@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
html {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  display: table;
  width: 100% !important;
  height: 100% !important;
}
html:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
  width: 50px;
  height: 50px;
  background-size: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(img/loader-app.svg);
  -webkit-animation-name: rotate;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: rotate;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
}
html, body { 
    max-width: 100%; 
    overflow-x: hidden;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

body {
  -webkit-touch-callout: none;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  color: #333;
  font-size: 16px;
  font-family: -apple-system;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.01em !important;
  text-rendering: optimizeLegibility;
  -webkit-backface-visibility: hidden;
  -webkit-user-drag: none;
  -ms-content-zooming: none;
  background-color: #f2f7fc;
  background: -moz-linear-gradient(
    top,
    #fff 0%,
    #dbe0e5 43%,
    #ededed 55%,
    #fff 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #fff),
    color-stop(43%, #dbe0e5),
    color-stop(55%, #ededed),
    color-stop(100%, #fff)
  );
  background: -webkit-linear-gradient(
    top,
    #fff 0%,
    #dbe0e5 43%,
    #ededed 55%,
    #fff 100%
  );
  background: -o-linear-gradient(
    top,
    #fff 0%,
    #dbe0e5 43%,
    #ededed 55%,
    #fff 100%
  );
  background: -ms-linear-gradient(
    top,
    #fff 0%,
    #dbe0e5 43%,
    #ededed 55%,
    #fff 100%
  );
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #dbe0e5 43%,
    #ededed 55%,
    #fff 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ffffff',GradientType=0);
}

a,
button,
:focus,
a:focus,
button:focus,
a:active,
a:hover {
  outline: 0;
}

a {
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

a[href]:hover {
  cursor: pointer;
}

b,
strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

code,
kbd,
pre,
samp {
  font-size: 1em;
  font-family: monospace, serif;
}

pre {
  white-space: pre-wrap;
}

q {
  quotes: "\201C""\201D""\2018""\2019";
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

fieldset {
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
  border: 1px solid silver;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  font-family: inherit;
  outline-offset: 0;
  outline-style: none;
  outline-width: 0;
  -webkit-font-smoothing: inherit;
  background-image: none;
}
textarea,
input {
  -webkit-user-select: auto !important;
  /*-webkit-user-select: none;*/
}
button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

img {
  -webkit-user-drag: none;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

*,
:before,
:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  margin: 0 0 10px;
}

small {
  font-size: 85%;
}

cite {
  font-style: normal;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text {
  line-height: 1.2em;
}

.pontos {
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 3.6em;
  margin-right: -1em;
  padding-right: 1em;
}

.pontos:before {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}
.pontos:after {
  content: "";
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
}
#bannerOnpedido {
  width: 100%;
  margin: 0 auto;
  display: table;
  margin-top: 10px;
  margin-bottom: 5px;
}

/*** TELAS & MENUS ***/
#telaProduto {
  position: absolute;
  top: 50px;
  left: 0;
  z-index:801;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fafaf7;
  box-shadow: 0 4px 5px 0 #000 !important;
}
#telaConteudo {
  position: absolute;
  top: 50px;
  left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fff;
  background: -moz-linear-gradient(top, #fff 0%, #f2f7fc 100%);
  background: -webkit-linear-gradient(top, #fff 0%, #f2f7fc 100%);
  background: linear-gradient(to bottom, #fff 0%, #f2f7fc 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f7fc', GradientType=0);
  box-shadow: 0 4px 5px 0 #000 !important;
  z-index:990;
}

#telaCardapio,
#telaCarrinho,
#telaPromocoes{
  position: absolute;
  top: 50px;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color:  #f2f7fc;
}

/* MENU */
#menu {
  position: absolute;
  z-index: 999;
  background-color: transparent !important;
}

.corpoMenu {
  width: 300px;
  height: 100%;
  float: left;
  box-shadow: 0px 0px 25px #000;
  position: relative;
}

#sombraMenu {
  right: 0px;
  height: 100%;
  position: absolute;
  z-index: 991;
  display: table;
}

.alturaTela {
  display: table;
  width: 300px;
  height: 300px;
}

#navApp {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
  --active-color: #a70000; /* pode ser sobrescrito via CSS dinâmico */
}

/* ===== Animações ===== */
@keyframes iconJump {
  0%   { transform: translate(-50%, 0) scale(1); }
  30%  { transform: translate(-50%, -6px) scale(1.08); }
  50%  { transform: translate(-50%, 0) scale(1); }
  70%  { transform: translate(-50%, -3px) scale(1.04); }
  100% { transform: translate(-50%, 0) scale(1); }
}

/* linha do topo crescendo do CENTRO para as bordas (com overshoot) */
@keyframes topLineExpand {
  0%   { transform: scaleX(0);   opacity: 0; }
  100% { transform: scaleX(1);   opacity: 1; } /* permanece visível */
}

/* ===== Botões - base ===== */
.btCardapio,
.btCarrinho,
.btPromocoes {
  position: relative;
  width: 33.3%;
  height: 70px;
  font-size: 12px;
  float: left;
  text-align: center;
  color: #333;
  box-shadow: 0 0 3 #000;
  border-bottom: 1px solid #eee;
  transition: box-shadow 0.3s ease;
  will-change: transform;
}

/* Título abaixo dos ícones */
.btCardapio font,
.btCarrinho font,
.btPromocoes font {
  font-size: 95%;
  font-weight: 600;
  display: table;
  text-align: center;
  width: 100%;
  margin-top: 45px;
  color: #777;
}

/* Ícone via pseudo-elemento (inativo = #777) */
.btCardapio::before,
.btCarrinho::before,
.btPromocoes::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

/* SVGs inativos (cinza #777) */
.btCardapio::before {
  background-image: url('data:image/svg+xml,<svg fill="%23777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,6H23a1,1,0,0,0,0-2H7A1,1,0,0,0,7,6Z"/><path d="M23,11H7a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M23,18H7a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z"/><circle cx="2" cy="5" r="2"/><circle cx="2" cy="12" r="2"/><circle cx="2" cy="19" r="2"/></svg>');
}
.btCarrinho::before {
  background-image: url('data:image/svg+xml,<svg fill="%23777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,6H18A6,6,0,0,0,6,6H3A3,3,0,0,0,0,9V19a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V9A3,3,0,0,0,21,6ZM12,2a4,4,0,0,1,4,4H8A4,4,0,0,1,12,2ZM22,19a3,3,0,0,1-3,3H5a3,3,0,0,1-3-3V9A1,1,0,0,1,3,8H6v2a1,1,0,0,0,2,0V8h8v2a1,1,0,0,0,2,0V8h3a1,1,0,0,1,1,1Z"/></svg>');
}
.btPromocoes::before {
  background-image: url('data:image/svg+xml,<svg fill="%23777" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"/></svg>');
}

/* Estado ativo: mantém teu “pulo” perfeito do ícone */
.tabAtivo {
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(163, 163, 163, 0.2) inset;
}
.tabAtivo::before {
  animation: iconJump 0.8s ease-in-out;
}

/* ===== Linha superior animada no TOPO do botão ===== */
.btCardapio::after,
.btPromocoes::after,
.btCarrinho::after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0;
  height: 3px;
  background: var(--active-color, #a70000);
  border-radius: 60px;
  transform: scaleX(0);     /* começa fechada */
  transform-origin: center; /* cresce do centro para as bordas */
  opacity: 0;               /* aparece só quando ativa */
  will-change: transform, opacity;
}

/* dispara DEPOIS do pulo do ícone e permanece aberta */
.tabAtivo::after {
  animation: topLineExpand 0.6s ease-out 0.85s forwards;
}

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce) {
  .tabAtivo::before,
  .tabAtivo::after { animation: none; }
  .btCardapio::after,
  .btPromocoes::after,
  .btCarrinho::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

.carregando {
  top: 50%;
  left: 50%;
  margin-left: -47px;
  margin-top: -47px;
  width: 94px;
  height: 94px;
  position: absolute;
  display: block;
  border-radius: 100px;
  box-shadow: 3px 3px 5px #000;
  background-color: #9b0000;
  background-size: 64px 64px;
  background-image: url(img/miniLoader.gif);
  background-repeat: no-repeat;
  background-position: center center;
}

#loader {
  position: absolute;
  z-index: 999;
}

header {
  width: 100%;
  margin: 0;
  height: 50px;
  background-color: #9b0000;
  display: flex;
  align-items: stretch;
  align-items: center;
}

#espacoBtVoltar {
  width: 50px;
  height: 50px;
  display: table;
  float: left;
}

#btVoltar {
  width: 50px;
  height: 50px;
  display: table;
  float: left;
  background-size: 25px;
  background-image: url(img/voltar.png);
  background-repeat: no-repeat;
  background-position: center center;
}

#tituloPagina {
  text-align: center;
  color: #fff;
  height: 50px;
  display: table;
  float: left;
  margin: 0 auto;
  width: auto;
}

#tituloPagina span {
  display: block;
  font-size: 16px;
  border: 0px solid #000;
  text-align: center;
  margin-top: 16px;
  width: 100%;
}
.headerPagina {
  text-align: center;
  color: #fff;
  display: table;
  float: left;
  background-color: #555;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  padding-top: 10px;
  padding-bottom: 10px;
  background-image: url(img/preto30.png);
  background-position: center bottom;
  background-repeat: repeat;
}
.itemPagina {
  padding: 10px;
  display: table;
  border-bottom: 1px solid #eee;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
}

/* ===================== TERMOS E POLÍTICAS (PWA) ===================== */
.termos .headerPagina{
  margin-bottom:10px;
}
.termos .itemPagina {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  width: calc(100% - 20px);
  padding: 10px 14px;
  margin-top: 10px;

  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 2px #b8b8b8;
  font-size: 14px;


  background-color: #d9ffd1;
  color: #34a203;
}

/* Ícones Remix */
.itemPagina i {
  font-size: 20px;
  min-width: 20px;
}

/* Link ocupa toda a linha */
.termos .itemPagina a {
  flex: 1;
  text-decoration: none;
  color: #34a203;
  font-weight: 600;
}

/* Feedback visual (toque) */
.termos .itemPagina:active {
  background-color: #f2f2f2;
}

/* Opcional: seta visual de navegação */
.termos .itemPagina::after {
  content: "›";
  font-size: 20px;
  color: #34a203;
  margin-left: auto;
}

#btMenu {
  width: 50px;
  height: 50px;
  display: table;
  float: right;
  background-size: 30px;
  background-image: url(img/menu.png);
  background-repeat: no-repeat;
  background-position: center center;
}

.show {
  display: block;
}

.hide {
  display: none !important;
}

/*** PRODUTOS DO CARDAPIO ***/
.categoriaProduto {
  width: 97%;
  margin: 0 auto;
  border-radius: 10px;
  margin-bottom: 2.5px;
  margin-top: 5px;
  height: auto;
  display: table;
  background-color: #9b0000;
  color: #fff;
  padding: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.categoriaProduto h1 {
  font-size: 16px;
  margin: 0;
  font-weight: 500;
  line-height: 1.2em;
  text-align: left;
}

.categoriaProduto font {
  font-size: 12px;
  font-weight: 400;
  display: table;
  text-align: left;
  width: 100%;
  margin: 0;
  line-height: 1.2em;
  opacity: 0.8;
  margin-top: 5px;
}
.acordiao {
  padding-bottom: 2.5px;
  padding-top: 2.5px;
}
.categoriaProdutoAtiva,
.subCategoriaProdutoAtiva,
.categoriaProdutoInativa,
.subCategoriaProdutoInativa {
  background-repeat: no-repeat !important;
  background-size: 22px !important;
  background-position: calc(100% - 14px) center !important;
  padding-right: 44px !important;
}

/* Ícone da categoria aberta (seta para cima) */
.categoriaProdutoAtiva {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 8l6 6H6z"/></svg>') !important;
}

/* Ícone da categoria fechada (seta para baixo) */
.categoriaProdutoInativa {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 16l-6-6h12z"/></svg>') !important;
}

/* Ícone da subcategoria aberta (cinza) */
.subCategoriaProdutoAtiva {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23555"><path d="M12 8l6 6H6z"/></svg>') !important;
}

/* Ícone da subcategoria fechada (cinza) */
.subCategoriaProdutoInativa {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23555"><path d="M12 16l-6-6h12z"/></svg>') !important;
}

.subCategoriaProduto {
  width: 97%;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 0px;
  display: table;
  height: auto;
  display: table;
  background-color: #dbe0e5;
  color: #555;
  padding: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
}

.subCategoriaProduto h1 {
  font-weight: 400;
  font-size: 14px;
  margin: 0;
  line-height: 1.2em;
  text-align: left;
}

.subCategoriaProduto font {
  font-size: 12px;
  font-weight: 400;
  display: table;
  text-align: left;
  width: 100%;
  margin: 0;
  line-height: 1.2em;
  opacity: 0.8;
  margin-top: 5px;
}
.produtoPromocao {
  background-color: #fff;
  box-shadow: 0 0px 1px #b8b8b8;
  color: #444;
  line-height: 1.2em;
  display: table;
  margin: 0px;
  width: 100%;
  padding: 10px;
  padding-right: 0px;
  margin-top: 10px;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.produtoPromocao h1 {
  display: table;
  margin: 0;
  width: 45%;
  font-size: 16px;
  font-weight: 600;
  padding-left: 15px;
  padding-bottom: 5px;
  float: left;
  line-height: 1.2em;
}
.produtoPromocao span {
  margin: 0px !important;
  width: 55% !important;
  text-align: right;
  float: right;
  padding-right: 10px;
  display: table;
  font-weight: 600;
  color: #34a203;
  padding-top: 2px;
  font-size: 12px;
}
.produtoPromocao h2 {
  display: table;
  width: 100%;
  padding: 0;
  margin: 0;
  margin-left: 15px;
  padding-right: 20px;
  font-size: 14px;
  margin-top: 10px;
  font-weight: 400;
  color: #333;
}

.produtoPromocao hgroup {
  display: table;
  width: 75%;
  padding: 0;
  margin: 0;
  font-size: 95%;
  font-weight: 500;
  color: #555;
  float: left;
}
.produtoPromocao figure {
  height: 100%;
  margin: 0px;
  padding: 0px;
  float: left;
  width: 25%;
  display: table;
}
.produtoPromocao figure img {
  width: 100%;
  height: auto;
  display: table;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.produtoFoto {
  width: 97%;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 7px;
  margin-bottom: 7px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 0px 1px #b8b8b8;
}
.produtoFoto table {
  width: 100%;
}
.produtoFoto .titulo {
  width: 100%;
  border: 0px solid #ccc;
  line-height: 1.2em;
  text-align: left;
  font-size: 14px;
}
.produtoFoto .descricao {
  border: 0px solid;
  font-size: 12px;
  font-weight: 400;
  color: #777;
  vertical-align: top;
}
.produtoFoto .percentualDesconto {
  margin-top: -26px;
  margin-left:5px;
  font-size: 12px;
  background-color: #34a203;
  z-index: 999999;
  position: absolute;
  padding: 3px 5px 3px 5px;
  font-weight: 600;
  color: #fff;
  border-radius: 10px;
}
.produtoFoto .valor {
  text-align: right;
  float: right;
  width: 70px;
  border: 0px solid #ccc;
  padding-right: 10px;
  display: table;
  font-weight: 600;
  color: #34a203;
  font-size: 14px;
  vertical-align: top;
}
.produto .valor font:nth-child(1),
.produtoFoto .valor font:nth-child(1) {
  text-align: right;
  float: right;
  width: 90px;
  border: 0px solid #ccc;
  padding-right: 10px;
  display: table;
  font-weight: 600;
  margin-bottom: 0px;
  font-size: 8px;
  line-height: 1.2;
  vertical-align: top;
  color: #777;
}
.produto .valor font:nth-child(2),
.produtoFoto .valor font:nth-child(2) {
  font-weight: 600;
  font-size: 14px;
  margin-right: 2px;
}
@-webkit-keyframes girar {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
.loadImagem {
  width: 90px;
  height: 90px;
  display: table;
  background-color: #ccc;
  border-radius: 10px;
  margin-right: 10px;
}
.loadImagem div {
  margin: 0 auto;
  margin-top: 20px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 32px;
  -webkit-animation: girar 2s infinite linear;
  background-image: url(/app/img/loader.png);
}
.produtoFoto .foto {
  width: 90px;
  height: 90px;
}
.produtoFoto img {
  width: 90px;
  margin-right: 10px;
  height: 90px !important;
  display: table;
  box-shadow: 0px 0px 1px #bbb;
  vertical-align: top;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.produto {
  background-color: #fff;
  box-shadow: 0 0px 1px #b8b8b8;
  color: #444;
  line-height: 1.2em;
  display: table;
  width: 97%;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 7px;
  margin-bottom: 7px;
  height: auto;
  padding: 10px;
  padding-bottom: 12px;
  padding-top: 12px;
  position: relative !important;
  text-shadow: 1px 1px 1px #fff;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hgroup.descricaoProduto {
  padding: 0px;
}

.descricaoProduto {
  display: table;
  float: left;
  padding: 15px;
  overflow: hidden !important;
  height: auto;
  width: 100%;
}

.produto h1 {
  display: table;
  margin: 0;
  padding: 0;
  width: 50%;
  color: #000;
  font-size: 14px;
}

.produto h2 {
  display: table;
  width: 100%;
  padding-right: 50px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #777;
  margin-top: 8px;
  display: table;
}

.botaoPedir {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 14px;
  padding: 0px !important;
  width: 75px;
  text-align: right;
}

.botaoPedir span font:nth-child(1) {
  text-align: right;
  float: right;
  width: 55px;
  color: #777777;
  padding-right: 10px;
  display: table;
  font-weight: 600;
  margin-bottom: -5px;
  font-size: 8px;
  vertical-align: top;
  padding: 0px !important;
  border: 0px solid #ccc;
  float:right!important;
}
.botaoPedir span font:nth-child(2) {
  font-weight: 600;
  font-size: 14px;
  margin-right: 0px;
}
.botaoPedir span font:nth-child(3) {
  font-weight: 600;
  font-size: 14px;
  margin-left: 2px;
}
.botaoPedir span:nth-child(1) {
  margin-left: 10px;
  display: table;
  float: left;
  font-weight: 600;
  color: #34a203;
  text-align: right;
  font-size: 12px;
}

/******* itens pedido ******/
.tela aside {
  margin: 15px;
}

h2.tituloItensPedido {
  margin: 0;
  display: table;
  width: 100%;
  height: 48px;

  border-bottom: 5px solid;
}

h2.tituloItensPedido span:first-child {
  padding: 12px 0 12px 15px;
  float: left;
  border: 0 solid #000;
}

h2.tituloItensPedido span:last-child {
  width: 35px;
  height: 35px;
  display: table;
  float: right;
  margin: 5px 5px 0 0;
  background-image: url(img/setas.png);
  background-position: left top;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

h3.tituloProdutoPedido {
  height: 35px;
  width: 100%;
  padding: 10px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  z-index: 555;
  background-color: #9b0000;
  font-weight: 500;
  display: table;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

h3.tituloProdutoPedido span {
  float: right;
  border: 0;
  border-radius: 100%;
  color: #fff;
  height: 25px;
  width: 25px;
  border: 0 solid #fff;
  font-weight: 400;
  border: 0px solid #fff;
  margin-top: 0px;
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: 50%;
  background-image: url('data:image/svg+xml,<svg fill="%23FFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18,6h0a1,1,0,0,0-1.414,0L12,10.586,7.414,6A1,1,0,0,0,6,6H6A1,1,0,0,0,6,7.414L10.586,12,6,16.586A1,1,0,0,0,6,18H6a1,1,0,0,0,1.414,0L12,13.414,16.586,18A1,1,0,0,0,18,18h0a1,1,0,0,0,0-1.414L13.414,12,18,7.414A1,1,0,0,0,18,6Z"/></svg>');
}
.tituloProdutoPedido font {
  display: table;
  width: auto;
  padding-top: 4px;
  float: left;
  border: 0px solid #fff;
}

.opcionaisPedido {
  margin: 0;
  margin-left: 0;
  display: table;
  padding: 0;
  width: 100%;
  border-left: 1px solid #f1f1f1;
}

.opcionaisPedido ul {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style-position: inside;
}

.opcionaisPedido ul {
  margin: 0;
  background-color: #fff;
  color: #555;
  display: table;
  border-right: 0 solid #fff;
}

.opcionaisPedido ul li {
  padding: 0 0 0 5px;
  width: 100%;
  margin: 0;
  display: table;
  overflow: hidden !important;
  box-shadow: inset 0px 0 0 #dbe0e5;
  border-bottom: 1px solid #f1f1f1;
}

.opcionaisPedido ul li b {
  font-size: 12px;
  font-weight: 500;
  border: 0 solid #ccc;
  padding-top:4px!important;
  padding-bottom:4px!important;
}
.opcionaisPedido ul li:first-child{
  border-bottom: 1px solid #f1f1f1!important;
  box-shadow: none!important;
}
.opcionaisPedido ul li:last-child {
  border-top: 0px solid #f1f1f1;
  border-bottom: 0px solid #333;
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 100% 0px;
}

.opcionaisPedido ul li:last-child {
  border-bottom: 1px solid #f3f3f3;
}

.opcionaisPedido ul li b {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  display: table;
  padding: 1px 0 0;
  float: left;
}

.opcionaisPedido ul li span {
  float: right;
  height: 26px;
  line-height: 26px;
  padding-left: 20px;
  color: #fff;
  width: 100px;
  margin: 0;
  margin-right: 0;
  font-weight: 500;
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
  color: #555;
  background-color: #dbe0e5;
  background-image: url("img/setaBox.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 30px 100%;
}

.opcionaisPedido ul li span:first-child {
  z-index: -555;
  box-shadow: -10px 10px 10px #000;
}
.observacoesProdutoPedido {
  width: 100%;
  margin: 0;
  padding: 10px;
  display: table;
  background-color: #f3f3f3;
  text-shadow: 1px 1px 1px #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.observacoesProdutoPedido h4 {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
}

.observacoesProdutoPedido p {
  margin: 0;
  font-size: 12px;
  margin-top: 1px;
  line-height: 1.3em;
  font-weight: 400;
  color: #555;
}

.rodapeProdutoPedido {
  width: 100%;
  margin: 0;
  height: 40px;
  background-color: #dbe0e5;
  border-radius: 0px 0px 12px 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: 0px solid #f1f1f1;
}

#itensPedido {
  width: 100%;
  overflow: hidden;
  background: #fff;
  background: -moz-linear-gradient(
    top,
    #fff 0%,
    #f3f3f3 43%,
    #ededed 55%,
    #fff 100%
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #fff),
    color-stop(43%, #f3f3f3),
    color-stop(55%, #ededed),
    color-stop(100%, #fff)
  );
  background: -webkit-linear-gradient(
    top,
    #fff 0%,
    #f3f3f3 43%,
    #ededed 55%,
    #fff 100%
  );
  background: -o-linear-gradient(
    top,
    #fff 0%,
    #f3f3f3 43%,
    #ededed 55%,
    #fff 100%
  );
  background: -ms-linear-gradient(
    top,
    #fff 0%,
    #f3f3f3 43%,
    #ededed 55%,
    #fff 100%
  );
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #f3f3f3 43%,
    #ededed 55%,
    #fff 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ffffff',GradientType=0);
}

#grupoCategoriasCarrinho {
  overflow: hidden;
}

ul.selectem-items {
  overflow: hidden !important;
}

.rodapeProdutoPedidoEsquerdo {
  float: left;
}

.rodapeProdutoPedidoDireito {
  float: right;
  color: #555;
  font-weight: 600;
  padding: 10px 10px 10px 0;
  font-size:14px;
}

.rodapeProdutoPedidoDireito span {
  font-weight: 300;
  font-weight: 400;
  font-size: 12px;
  margin-right: 3px;
}

.btSomar,
.btSubtrair {
  float: left;
  border: 0;
  border-radius: 100%;
  color: #fff;
  padding: 0;
  height: 25px;
  width: 25px;
  font-weight: 400;
  font-size: 22px;
  background-repeat: no-repeat;
  margin: 6px 10px 10px;
  background-size: 33px;
  background-position: center center;
  background-color: #9b0000;
}

.btSomar,
.btSubtrair{
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: none !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.btSomar{
  background-color: #34a203 !important;
}

.btSubtrair{
  background-color: #d3d9de;
  color: #555;
}
.btSomar i,
.btSubtrair i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 20px;
}

.btSomar:hover,
.btSubtrair:hover {
  /*box-shadow: 2px 2px 3px #333;*/
}

.btSomar:active,
.btSubtrair:active {
  box-shadow: 0px 0px 5px #55555591;
}

.boxQtd {
  min-width: 27px;
  height: 27px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  float: left;
  font-size: 14px;
  font-weight: 700;
  /*
  padding: 4px 5px 1px;*/
  margin: 6px 0 0;
  background-color: rgb(214, 245, 203);
  color: rgb(14, 108, 0) !important;
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/*** OPCIONAIS ***/
.boxOpcoes {
  width: 100%;
}

.boxRollProduto {
  overflow-y: scroll;
  overflow-x: hidden;
}

#telaProduto{
  background-color:  #f2f7fc!important;
}

.boxOpcoes textarea {
  min-height: 250px !important;
  width: 90% !important;
  margin: 0 auto;
  margin-top: 20px;
  display: table;
  border: 0 solid;
  color: #333;
  padding: 20px;
  font-size: 14px;
  font-weight: 400;
  background-color: #f9ffdf;
  box-shadow: 0 3px 2px #ccc;
}

.itemOpcao {
  display: table;
  width: 100% !important;
  padding: 0;
  border-top: 0px solid #fff;
  border-bottom: 1px solid #ddd;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #777;
}

.promocaoOpcao {
  font-size: 9px;
  text-align: center;
  border-radius: 10px;
  font-weight: 600;
  color: #fff;
  background-color: #34a203;
  padding-top: 1px;
  display: block;
  width: 100px;
  height: 20px;
  margin-bottom: 5px;
}
.promocaoOpcao:before {
  content: "";
  display: inline-block;
  vertical-align: bottom;
  margin-left: 60px;
  width: 0;
  height: 0;
  margin-top: 19px;
  position: absolute;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #34a203;
}
.categoriaOpcoes {
  width: 100%;
  height: auto;
  display: table;
  background-color: #ccc;
  color: #555;
  font-weight: 700;
  padding: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.categoriaOpcoes h1 {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
  line-height: 1.2em;
  text-align: center;
}
.categoriaOpcoes h2 {
  font-size: 12px;
  margin: 0;
  margin-top: 2px;
  font-weight: 400;
  line-height: 1.5em;
  text-align: center;
}
.boxOpcoes .itemOpcao:nth-child(1) {
  border-top: 0 solid #c00 !important;
}

.itemOpcao label span:nth-child(1) {
  font-size: 14px;
  font-weight: 600;
  color: #9b0000;
  width: 100%;
  display: table;
}
.boxFP {
  font-size: 14px;
}
.boxFP .itemOpcao label span:nth-child(1) img {
  width: 60px;
  margin-top: 0px;
  float: right;
  position: relative;
  border-radius: 10px;
  display: table;
  text-align: right;
}
.itemOpcao label span:nth-child(2) {
  font-weight: 600;
  color: #34a203;
  right: 0;
  margin-top: -20px;
  float: right;
  font-size: 12px;
}
.itemOpcao label span:nth-child(2) img {
  width: 60px;
  float: right;
  position: relative;
  border-radius: 10px;
  display: table;
  text-align: right;
}
.itemOpcao label span:nth-child(3) {
  font-size: 12px;
  font-weight: 400;
  color: #777;
  float: left;
  width: 100%;
  display: table;
  margin-top:2px;
}

.itemOpcao label {
  margin: 0;
  height: 50px;
  width: 100%;
  padding: 10px;
  padding-left: 15px;
  float: left;
  display: table;
}

.itemOpcao input[type="radio"],
.itemOpcao input[type="checkbox"],
.mdItemOpcao input[type="radio"] {
  display: none;
}
.retiradaCheck input[type="radio"] + label {
  padding-left: 60px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 10px center;
  background-image: url(img/balcao.png);
}
.localidadeCheck input[type="radio"] + label {
  padding-left: 60px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 10px center;
  background-image: url(img/casa.png);
}
.novaLocalidadeCheck input[type="radio"] + label {
  padding-left: 60px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 10px center;
  background-image: url(img/novaCasa.png);
}
.relogioCheck input[type="radio"] + label {
  padding-left: 60px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: 10px center;
  background-image: url(img/relogio64.png);
}
@-webkit-keyframes breath {
  0% {
    background-size: 30px auto;
    padding-left: 50px;
  }
  50% {
    background-size: 40px auto;
    padding-left: 60px;
  }
  100% {
    background-size: 30px auto;
    padding-left: 50px;
  }
}
.inputsFormMD {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
}
.inputsFormMD select {
  padding-left: 67px !important;
  background-size: auto, 30px;
  background-position: 95% 50%, 3% 50%;
  background-repeat: no-repeat, no-repeat;
  background-color: #fff;
}
.inputsFormMD .inputIfIconMD {
  padding-left: 67px !important;
  background-size: 30px;
  background-position: 3% 50%;
  background-repeat: no-repeat;
  background-color: #fff;
}
.inputsFormMD textarea {
  resize: none !important;
}
.mdItemOpcao {
  width: 45%;
  border: 0px solid #ccc;
  margin-bottom: 5% !important;
  margin-left: 2.5%;
  margin-right: 2.5%;
  font-weight: 400;
  color: #ccc;
  box-shadow: 0px 0px 5px #ccc;
  border-radius: 5px !important;
  word-break: break-word;
  background-color: #fff;
}
.mdItemOpcao label {
  height: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  border-radius: 5px !important;
  background-position: 10px 50% !important;
  vertical-align: middle !important;
  display: flex !important;
  border-bottom: 5px solid #eee;
}
.mdItemOpcao .spanUm {
  padding-left: 5px;
  font-size: 18px !important;
  font-weight: 600;
  padding-right: 15px;
  height: auto !important;
}
.mdItemOpcao .spanTres {
  font-size: 12px !important;
  line-height: 16px !important;
}
.mdItemOpcao input[type="radio"] + label,
.mdItemOpcao input[type="checkbox"] + label {
  padding-left: 50px;
  color: #444;
  background-color: none;
  background-repeat: no-repeat;
  margin: 0px;
  background-size: 30px 30px;
  background-position: 10px 15px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border-radius: 5px !important;
}
.mdItemOpcao input[type="radio"]:checked + label,
.mdItemOpcao input[type="checkbox"]:checked + label {
  padding-left: 50px;
  background-color: #ecffe8;
  border-bottom: 5px solid #34a203;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 10px 15px;
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  -webkit-animation: breath 1s ease-in-out none;
}
.mdItemOpcao input[type="radio"]:checked + label,
.mdItemOpcao input[type="checkbox"]:checked + label {
  padding-left: 50px;
  background-color: #ecffe8;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 10px 15px;
  background-image: url(img/checkCirculo.png);
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  -webkit-animation: breath 1s ease-in-out none;
}
.itemOpcao input[type="radio"] + label,
.itemOpcao input[type="checkbox"] + label {
  padding-left: 50px;
  background-color: none;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 10px 15px;
  background-image: url(img/uncheckCirculo.png);
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}
.itemOpcao input[type="radio"]:checked + label,
.itemOpcao input[type="checkbox"]:checked + label {
  padding-left: 50px;
  background-color: #ecffe8;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-position: 10px 15px;
  background-image: url(img/checkCirculo.png);
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  -webkit-animation: breath 1s ease-in-out none;
}
.itemOpcaoQtd {
  display: table;
  padding: 10px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #ccc;
  width: 100%;
}
.itemOpcaoQtd table,
.itemOpcaoQtd table td {
  border: 0px solid #ccc;
  valign: top;
}
.itemOpcaoQtd table td:nth-child(1) {
  border: 0px solid #ccc;
  vertical-align: top;
}
.itemOpcaoQtd table td:nth-child(2) {
  width: 100%;
  vertical-align: top;
}
.itemOpcaoQtd table td:nth-child(3) {
  width: 100%;
  vertical-align: top;
  font-size: 12px;
}

.itemOpcaoQtd .titulo {
  font-size: 14px;
  font-weight: 600;
  color: #c00;
  width: auto;
  display: table;
  float: left;
}
.itemOpcaoQtd .valor {
  font-weight: 600;
  color: #34a203;
  width: 90px;
  display: table;
  text-align: right;
}
.itemOpcaoQtd .imagem img {
  width: 60px;
  float: right;
  border-radius: 10px;
  display: table;
  text-align: right;
}
.itemOpcaoQtd .descricao {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  float: left;
  width: 100%;
}

.itemOpcao span:nth-child(3) {
  width: 100%;
  font-size: 14px;
  float: left;
}

.btMaisOpcao,
.btMenosOpcao {
  float: left;
  border: 0;
  border-radius: 100%;
  color: #fff;
  /*! padding: 0; */
  height: 25px;
  width: 25px;
  /*! font-family: 'Open Sans',sans-serif; */
  font-weight: 400;
  font-size: 21px;
  cursor: pointer;
  outline: none;
  background-repeat: no-repeat;
  margin: 10px 10px 10px;
  background-size: 33px;
  background-position: -4px -4px;
  background-color: #c00;
  display: table !important;
}

.btMaisOpcao {
  /*background-image: url(https://static.onpedido.com.br/img/mais.svg);*/

  text-align: center;
  padding-top: 15px !important;
  margin-right: 0px;
}
.btMaisOpcao::before {
  content: "+";
  width: 20px;
  text-align: center;
  height: 20px !important;
  border: 0px solid #000;
  display: table;
  font-weight: bold;
  margin-top: -1px;
  margin-left: 2.5px;
}
.btMenosOpcao {
  /*background-image: url(https://static.onpedido.com.br/img/menos.svg);*/
  margin-left: 0px;
}
.btMenosOpcao::before {
  content: "-";
  width: 20px;
  text-align: center;
  height: 20px !important;
  border: 0px solid #000;
  display: table;
  font-weight: bold;
  margin-top: -1px;
  margin-left: 2.5px;
}

.btMaisOpcao:hover,
.btMenosOpcao:hover {
  box-shadow: 2px 2px 3px #ccc;
}

.btMaisOpcao:active,
.btMenosOpcao:active {
  box-shadow: -2px -2px 3px #ccc;
}
.numeroItens {
  background-color: #555;
  width: 30px;
  height: 25px;
  float: left;
  display: table;
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  margin: 10px 0px 0px;
}
.numeroItens div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.boxQtds {
  display: table;
  width: auto;
  float: left;
  border: 0px solid #ccc;
  padding: 0px;
  width: 110px;
}
.grupoRollOpcoes {
  display: table;
  width: 100%;
}
.tituloBox {
  font-weight: 400;
  color: #333;
  display: table;
  width: 100%;
  margin: 0px;
}

.tituloBox span {
  border-radius: 100%;
  width: 28px;
  height: 28px;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  line-height: 100% !important;
  background-color: #9b0000;
}

.tituloBox font {
  padding-left: 10px;
  padding-right: 15px;
  line-height: 1.2;
  display: table-cell;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 500;
  height: 25px;
}
.tituloBox font.iconeObservacao {
  padding: 0px;
  line-height: 2;
}
.iconeObservacao::before {
  content: "";
  border-radius: 50px;
  float: left;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  display: block;
  background-color: #333;
  background-position: center center;
  background-size: 15px;
  background-repeat: no-repeat;
  background-image: url(https://onpedido.com.br/static/img/editarBranco.png);
}
.cabecalhoSecundarioOpcionais {
  width: 100%;
  display: table;
  height: 42px;
  padding: 0;
  background-color: #fff;
  vertical-align: middle;
  box-shadow: inset 0 -3px 3px -3px rgba(0, 0, 0, 0.2);
}

.tituloBox {
  float: left;
  font-size: 16px;
  font-weight: 500;
  height: auto;
  width: 100%;
  display: table;
  margin-left: 10px;
  margin-top: 7px;
  margin-bottom: 7px;
  border: 0 solid #ccc;
}

.display {
  display: none;
}

/*** Box Lista ***/
#boxLista {
  top: 50px;
  left: 50%;
  height: auto;
  display: table;
  margin-left: -50%;
  position: absolute;
  line-height: 1.3em;
  background-color: #fff;
  z-index:990;
}

#boxListaTitulo {
  padding: 15px;
  padding-left: 15px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  background-color: #9b0000;
  background-repeat: repeat;
}

#boxListaConteudo {
  overflow-y: scroll;
  overflow-x: hidden;
}

.boxListaCancelar {
  float: left;
  width: 50%;
  border: 0;
  color: #555;
  float: left;
  height: 50px;
  padding: 15px;
  display: table;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-align: center;
  border-radius: 0;
  background-color: #d3d9de;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.2);
}

.boxListaOk {
  width: 50%;
  border: 0;
  float: right;
  height: 50px;
  padding: 15px;
  display: table;
  overflow: hidden;
  text-align: center;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  background-color: #d9ffd1;
  color: #34a203;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.2);
}
#boxLista .Ok {
  width: 100%;
}
/*** Aviso Alerta ***/
.avisoAlerta {
  top: 20%;
  left: 50%;
  width: 70%;
  height: auto;
  display: table;
  margin-left: -35%;
  position: absolute;
  line-height: 1.3em;
  background-color: #fff;
  box-shadow: 0 0 50px #000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  z-index: 999;
}

.avisoTitulo {
  padding: 15px;
  padding-left: 15px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  background-color: #9b0000;
  background-repeat: repeat;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.avisoTexto {
  padding: 10px 10px;
  font-size: 14px;
}

.avisoCancelar {
  float: left;
  width: 50%;
  padding: 15px;
  display: table;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #555;
  font-size: 14px;
  background-color: #d3d9de;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-left-radius: 10px;
}
.avisoTitulo i,
.avisoFooter .avisoOk i,
.avisoFooter .avisoCancelar i {
  margin-right: 0px;
  margin-left: 0px;
  font-size: 16px;
}
.avisoOk {
  float: left;
  width: 50%;
  padding: 15px;
  font-size: 14px;
  font-weight: 600;
  background-color: #d9ffd1;
  color: #34a203;
  display: table;
  text-align: center;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-right-radius: 10px;
}
.Ok {
  width: 100%;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.previewImagem {
  width: 100%;
  padding-top: 30px;
  text-align: center; 
}

.previewImagem img {
  display: block;          
  margin: 0 auto !important;
  max-width: 220px;
  height: auto;
  border-radius: 10px;
}
.produtoTitulo {
  font-size: clamp(18px, 4vw, 26px); /* cresce com a tela, nunca menor que 18px nem maior que 26px */
  text-align: center;                /* centraliza o texto */
  width: 85%;                        /* dá uma pequena folga lateral */
  display: block;                    /* garante o comportamento de bloco */
  line-height: 1.25;                 /* melhora leitura */
  margin: 0 auto 8px;                /* centraliza e dá leve respiro abaixo */
  margin-top: 30px;
  word-wrap: break-word;             /* evita overflow em nomes grandes */
}
.produtoDescricao {
  font-size: clamp(14px, 3.2vw, 18px); /* menor que o título, escala suavemente */
  text-align: center;                  /* centralizado como o título */
  width: 85%;                          /* pequena margem lateral */
  display: block;
  line-height: 1.45;                   /* leitura confortável */
  color: #555;                         /* cor neutra, menos destaque */
  margin: 6px auto 10px;               /* espaçamento natural */
  opacity: 0.9;                        /* leve suavidade */
  word-break: break-word;              /* evita estouro em descrições longas */
}
.avancarTela,
.avancarTelaFP,
.avancarTelaCadastro,
.submeterFormulario {
  border: 0;
  float: right;
  height: 50px;
  padding: 10px;
  display: table;
  overflow: hidden;
  text-align: center;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  background-color: #d9ffd1;
  color: #34a203;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.2);
}
.voltar,
.voltarPreview,
.voltarFP,
.voltarCadastro {
  border: 0;
  color: #555;
  float: left;
  height: 50px;
  padding: 10px;
  display: table;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-align: center;
  border-radius: 0;
  background-color: #d3d9de;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.2);
}
.promocoesVazio,
.carrinhoVazio {
  width: 100%;
  margin: 0 auto;
  margin-top: 40px;
  margin-bottom: 40px;
  text-align: center;
  display: table;
  border: 0px solid #000;
}
.promocoesVazio font,
.carrinhoVazio font {
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 5px;
  display: table;
  width: 100%;
  font-weight: 600;
  color: #9b0000;
  text-align: center;
}
.promocoesVazio p,
.carrinhoVazio p {
  color: #333;
  font-size: 14px;
  margin: 0px;
  width: 100%;
  display: table;
  text-align: center;
}
.iconeSemPromocoes {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  margin: 0 auto;
  background-image: url('data:image/svg+xml,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"/></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
  background-color: #9b0000;
}
.iconeCarrinhoVazio {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  margin: 0 auto;
  background-image: url('data:image/svg+xml,<svg fill="%23FFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23,19H21V17a1,1,0,0,0-2,0v2H17a1,1,0,0,0,0,2h2v2a1,1,0,0,0,2,0V21h2a1,1,0,0,0,0-2Z"/><path d="M21,6H18A6,6,0,0,0,6,6H3A3,3,0,0,0,0,9V19a5.006,5.006,0,0,0,5,5h9a1,1,0,0,0,0-2H5a3,3,0,0,1-3-3V9A1,1,0,0,1,3,8H6v2a1,1,0,0,0,2,0V8h8v2a1,1,0,0,0,2,0V8h3a1,1,0,0,1,1,1v5a1,1,0,0,0,2,0V9A3,3,0,0,0,21,6ZM8,6a4,4,0,0,1,8,0Z"/></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px auto;
  background-color: #9b0000;
}
.itensMenu {
  margin-top: 50px !important;
}
.corpoMenu {
  background-image: url("img/bgGradiente.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: 0px 30px 30px 0px;
  background-color: #a70000;
}

.corpoMenu .pedidos,
.corpoMenu .horarios,
.corpoMenu .taxas,
.corpoMenu .pagamento,
.corpoMenu .contato,
.corpoMenu .termos,
.corpoMenu .app {
  display: flex;
  align-items: center;
  width: 300px;
  border: 0px solid #000;
  padding: 17px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding-left: 17px;
  gap: 12px;
  background-image: none !important;
  background-repeat: initial !important;
  background-position: initial !important;
  background-size: initial !important;
}

.corpoMenu .pedidos i,
.corpoMenu .horarios i,
.corpoMenu .taxas i,
.corpoMenu .pagamento i,
.corpoMenu .contato i,
.corpoMenu .termos i,
.corpoMenu .app i {
  font-size: 22px;
  line-height: 1;
  width: 28px; 
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight:200;
}

.corpoMenu .pedidos,
.corpoMenu .horarios,
.corpoMenu .taxas,
.corpoMenu .pagamento,
.corpoMenu .contato,
.corpoMenu .termos,
.corpoMenu .app {
  white-space: nowrap;
}

.corpoMenu .telacheia {
  display: flex;
  align-items: center;
  width: 300px;
  border: 0px solid #000;
  padding: 15px;
  color: #fff;
  margin: 0px;
  font-size: 16px;
  cursor: pointer;

  padding-left: 15px;
  gap: 12px;

  background-image: none !important;
  background-repeat: initial !important;
  background-position: initial !important;
  background-size: initial !important;
}

.corpoMenu .telacheia i {
  font-size: 22px;
  line-height: 1;
  width: 28px;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.direitos {
  width: 100%;
  margin-top: 0px;
  color: #fff;
  font-size: 12px;
  background-image: url("img/preto10.png");
  background-repeat: repeat;
  background-position: 0px top;
  background-size: 1px 1px;
  padding: 7px;
  text-align: center;
  height: 60px;
  display: table;
}
.direitos .titulo,
.direitos .ano {
  position: relative;
  margin: 0px;
  width: auto;
  padding: 0px;
}

.direitos a:link,
.direitos a:active,
.direitos a:visited {
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  opacity: 0.5;
}
.direitos a:hover {
  opacity: 1;
}
.logoOnpedido {
  opacity: 0.7;
  height: 20px;
  margin: 0 auto;
  margin-top: 4px;
  background-image: url(https://onpedido.com.br/static/img/logoOnpedidoLettering.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 70px;
}
.tituloMenuSesssao {
  display: table;
  width: 300px;
  border: 0px solid #000;
  padding: 10px;
  color: #fff;
  margin: 0px;
  font-size: 14px;
  font-weight: 600;
  background-image: url("img/setaBaixoGrande.png"), url("img/preto30.png");
  background-repeat: no-repeat, repeat;
  background-position: 260px 15px, 0px top;
  background-size: 25px auto, 1px 1px;
}
.cabecalhoMenu {
  margin: 0px;
  padding: 0px;
  height: 150px;
}

.corpoMenu .btEntrar {
  width: 150px;
  color: #fff;
  text-align: center;
  height: 45px;
  padding: 0px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  background-color: #34a203;
  padding: 10px 14px;
  font-size: 14px;
  background-color: #d9ffd1;
  color: #34a203;
}
.corpoMenu .btCadastro i,
.corpoMenu #btMenuCadastrese i,
.corpoMenu #sairLogin i,
.corpoMenu .btEntrar i{
  font-size: 16px;
}
.corpoMenu #btMenuCadastrese,
.corpoMenu .btCadastro {
  width: 150px;
  color: #fff;
  text-align: center;
  height: 45px;
  padding: 0px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #555;
  float: left;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background-color: #d3d9de;
}
.bottom20 {
  width: 100%;
  height: 20px;
  clear: both;
}
.pagina {
  display: table;
  margin-top: 15px;
  width: 100%;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  font-size:14px;
}
.pagina b {
  font-weight: 600;
}
.inputsForm label {
  color: #555;
  display: table;
  width: 100%;
  margin-bottom: 5px;
  font-size:14px;
}
.inputsForm {
  display: table;
  margin-top: 15px;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.inputsForm input,
.inputsForm textarea,
.inputsForm select,
.inputsForm button{
  box-sizing: border-box;
  padding: 10px 14px !important;
  height: auto;
  min-height: 45px;
  font-size: 14px !important;
  width: 100%;
  margin: 0 auto;
  font-size: 110%;
  font-weight: normal;
  background-color: #ffffff !important;
  color: #333 !important;

  border-top: 1px solid #e5e6e9;
  border-right: 1px solid #dfe0e4;
  border-bottom: 0px solid #d0d1d5;
  border-left: 1px solid #dfe0e4;

  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;

  box-shadow: 0 2px 2px #b8b8b8;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  user-select: auto;
}

.inputsForm input:focus,
.inputsForm textarea:focus,
.inputsForm select:focus,
.inputsForm button:focus{
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(0, 193, 19, 0.3) !important;
  background-color: #fff !important;
}

.inputsForm select {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23555555' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 14.5l-6-6h12l-6 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px;
  padding-right: 20px !important; /* espaço para a seta */
}

.inputsForm input:-webkit-autofill,
.inputsForm input:-webkit-autofill:hover,
.inputsForm input:-webkit-autofill:focus,
.inputsForm select:-webkit-autofill,
.inputsForm select:-webkit-autofill:hover,
.inputsForm select:-webkit-autofill:focus,
.inputsForm textarea:-webkit-autofill,
.inputsForm textarea:-webkit-autofill:hover,
.inputsForm textarea:-webkit-autofill:focus {
    box-shadow: 0 0 0px 100px #ffffff inset, 0 2px 2px #b8b8b8 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #333 !important;
    transition: background-color 9999s ease-out 0s !important; /* Hack iOS */
}

.inputsForm #login,
.inputsForm #cadastrese,
#locaisEntregaCadastro,
#recuperarSenhaCadastro,
.inputsForm .submeter {
  border: 0px;
  font-size: 100%;
  line-height: 16.08px;
  word-spacing: 0px;
  color: #fff;
  border-radius: 10px;
  font-size: 14px !important;
  width: 100%;
  margin: 0 auto;
  display: block;
  font-weight:600;
  padding: 10px 14px;
  background-color: #d9ffd1!important;
  color: #34a203!important;
}
.inputsForm #login i,
.inputsForm #cadastrese i,
#locaisEntregaCadastro i,
#recuperarSenhaCadastro i,
.inputsForm .submeter i {
  font-size: 16px;
}
#locaisEntregaCadastro,
#recuperarSenhaCadastro,
.inputsForm .submeter,
.inputsForm #login {
  background-color: #34a203;
}


.inputsForm #cadastrese {
  background-color: #555;
}
.solido {
  width: 100%;
  display: table;
  border: 0px solid #000;
}
.pedidoBox {
  font-size: 12px !important;
  margin-bottom: 15px;
  margin-top: 15px;
  font-family: monospace;
  font-style: normal;
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 0px);
  margin: 25px auto 10px;
  padding: 20px;
  border-radius: 10px;
  background: #f9ffdf;
  box-shadow: 0 0px 15px rgb(11 11 11 / 15%);
  display: table;
  color: #444;
  font-weight:500;
  font-size: 12px;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 5px;
    height: 6px;
    width: calc(100% - 10px);
  }

  &:before {
    top: -5px;
    background: radial-gradient(
        circle,
        transparent,
        transparent 50%,
        #f9ffdf 50%,
        #f9ffdf 100%
      ) -7px -8px / 16px 16px repeat-x;
  }

  &:after {
    bottom: -5px;
    background: radial-gradient(
        circle,
        transparent,
        transparent 50%,
        #f9ffdf 50%,
        #f9ffdf 100%
      ) -7px -2px / 16px 16px repeat-x;
  }
}
.carrinhoValor {
  width: 100%;
  height: 130px;
  background-color: #dbe0e5;
  text-align: left;
  padding-left: 15px;
  display: flex;
  line-height: 1.7;
  justify-content: left;
  align-items: center;
  font-size: 14px;
  color: #555;
  font-weight: 400; 
}
.carrinhoValor span {
  width: 100%;
}
.carrinhoValor font {
  font-size: 85%;
  font-weight: 600;
}
.carrinhoValor table {
  width: 100%;
}
.btFinalizar {
  width: 100%;
  height: 50px;
  font-size: 14px;
  font-weight: 600;
  background-color: #d9ffd1;
  color: #34a203;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 600;
}
#corpoCarrinho {
  display: table;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.right {
  float: right;
}
.formasPagamento {
  text-align: center;
  display: flex;
  justify-content: left;
  align-items: center;
}
.formasPagamento img {
  border-radius: 10px;
  width: 60px;
  margin-right: 10px;
}
.imgDelivery {
  height: 200px;
  background-size: auto 100%;
  background-position: center 10px;
  background-repeat: no-repeat;
  background-image: url(/static/img/bgMaps.png);
  margin-bottom: 20px;
}
.imgDeliveryErro {
  height: 200px;
  background-size: auto 100%;
  background-repeat: no-repeat, repeat-x;
  background-position: center top;
  background-image: url(img/imgAdvertencia.jpg), url(img/delivery-continuos.jpg);
  margin-bottom: 20px;
}
.imgIcon {
  height: 170px;
  background-size: auto 80%, auto 100%;
  background-repeat: no-repeat, repeat-x;
  background-position: center 50%, center top;
  margin-bottom: 20px;
}
.padding20 {
  padding: 20px;
}
.fullStatus {
  width: 97%;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 10px;
  background-color: #fff;
  font-weight: 600;
  padding-left: 15px;
  padding-right: 15px;
  display: table;
  box-shadow: 0 0 2px #b8b8b8;
}
.fullStatus font {
  max-width: 85%;
}
.iconeMenuInformativo {
  float: left;
  display: table;
  width: 25px;
  height: 25px;
  margin-right: 15px;
  background-color: none;
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center top;
}
.status {
  padding: 10px 0;
  margin: 0 auto;
  float: left;
  min-height: 75px;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  justify-content: center;
  align-items: center;
}
.aberto {
  background-color: #ecffe8;
  color: #0e6c00;
}

.fechado {
  background-color: #ffd1d1;
  color: #9b0000;
}

.statusInativo {
  background-image: url(https://static.onpedido.com.br/img/erro.png),
    url(https://static.onpedido.com.br/img/pontoVermelho.gif);
  border-radius: 100px;
  background-size: 52% 52%, 100% 100%;
  background-position: 50% 50%, center top;
  width: 25px;
  height: 25px;
  display: table;
}

.statusAtivo {
  background-image: url(https://static.onpedido.com.br/img/checadoBranco.png),
    url(https://static.onpedido.com.br/img/pontoVerde.gif);
  border-radius: 100px;
  background-size: 70% 70%, 100% 100%;
  background-position: 50% 50%, center top;
  width: 25px;
  height: 25px;
  display: table;
}
.boxFP {
  overflow-y: scroll;
}
.boxFP label {
  font-size: 14px;
  color: #555;
}
.boxFP label font {
  display: table;
  float: right;
  width: auto;
  font-size: 12px;
  color: #a7a7a7;
}
#formaPagamentoFP {
  background-position: 7px 50% !important;
}
#boxDinheiroFP .h2{
  font-size:14px;
  text-align: center;
  font-weight:600;
  margin-bottom:15px;
  margin-top:20px;
}
#boxDinheiroFP .h2 i{
  font-size:24px!important;
  text-align: center;
  font-weight:100!important;
  font-size:16px;
  margin:0px;
}
.inputsForm b {
  color: #333;
  font-weight: 600;
}

.inputSifrao {
  display: flex;
  align-items: center;
  width: 100%;
}

.inputSifrao .sifraoFP {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  padding: 0 10px;
  font-weight: 600;
  font-size: 110%;
  white-space: nowrap;
  flex: 0 0 auto; /* não estica */
}

.inputSifrao .sifraoFP:empty {
  display: none !important;
  padding: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}

.inputSifrao input {
  flex: 1;
  height: 55px;
}

#dinheiroSymbolLeft:not(:empty) + input {
  border-left: 0;
}

input + #dinheiroSymbolRight:not(:empty) {
  border-right: 0;
}

#labelSeuTroco,
#totalTroco {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-weight: 500;
  margin-top:15px;
}

/* espaçamento entre texto e valor */
#labelSeuTroco {
  margin-right: 0px;
}

/* ícone 2px maior */
#labelSeuTroco i {
  font-size: calc(100% + 2px);
  margin-right: 4px;
}

.cupomDesconto {
  background-color: #34a203;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px;
  margin-left: 5px;
  color:#fff
}

#boxCupomAdd{
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 0px);
  margin: 25px auto 10px;
  padding: 20px;
  border-radius: 10px;
  background: #f9ffdf;
  box-shadow: 0 5px 15px rgb(11 11 11 / 8%);
  display: table;
  color: #555;
  font-weight:500;
  font-size: 12px;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 5px;
    height: 6px;
    width: calc(100% - 10px);
  }

  &:before {
    top: -5px;
    background: radial-gradient(
        circle,
        transparent,
        transparent 50%,
        #f9ffdf 50%,
        #f9ffdf 100%
      ) -7px -8px / 16px 16px repeat-x;
  }

  &:after {
    bottom: -5px;
    background: radial-gradient(
        circle,
        transparent,
        transparent 50%,
        #f9ffdf 50%,
        #f9ffdf 100%
      ) -7px -2px / 16px 16px repeat-x;
  }
}
#boxCupomAdd h2{
  font-size: 16px;
  margin-bottom:4px;
  margin-top:4px;
}
#codigoCupom{
  width: calc(100% - 130px);
  float:left;
  text-transform:uppercase;
  margin-top:10px;
}
#boxCupomRemover {
  color: #236c00;
  font-weight:600;
  font-size: 16px;
}
#boxCupomRemover font{
  color: #555;
  font-weight:500;
  font-size: 12px;
}
#removerCupom{
  text-align: center;
  font-size: 14px;
  margin-top:10px;
  font-weight: 600;
  background-color: #ffdbdb!important;
  color: #9b0000!important;
}
#submeterCupom {
  width: 120px;
  margin-left:10px;
  margin-top:10px;
  float:left;
  border: 0;
  float: right;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  background-color: #d9ffd1!important;
  color: #34a203!important;
}
#retiradaFP .iconRestaurante {
  width: 77px;
  height: 77px;
  background-color: #34a203;
  border-radius: 100px;
  margin: 0 auto;
  margin-bottom: 20px;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(https://static.onpedido.com.br/img/restaurante.png);
}
#retiradaFP {
  text-align: center;
  color: #444 !important;
}

.carrinhoFP font {
  font-size: 85%;
  font-weight: 600;
}
.carrinhoFP table {
  width: 100%;
}
.carrinhoFP table td {
  padding:2px;
}
.carrinhoFP {
  display: table;
  padding: 12px;
  width: 100%;
  font-size: 14px;
  font-weight: normal;
  background-color: #fff;
  color: #555;
  display: table;
  border-radius: 10px;
  box-shadow: 0 0px 2px #b8b8b8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.carrinhoFP font.cupomDesconto {
  color: #fff;
  font-size: 80%;
}
.carrinhoFP font {
  font-size: 90%;
}
.imgSucessoFP {
  background-color: #000;
  height: 160px;
  background-image: url(img/sucessoPedido.png),
    url(https://static.onpedido.com.br/img/pontoVerde.gif);
  background-size: auto 130%, 100% 100%;
  background-repeat: no-repeat, repeat;
  background-position: center 50%;
  border-bottom: 3px solid #fff;
  box-shadow: 0 2px 2px #b8b8b8;
}
.infoBox {
  width: 100%;
  float: left;
  color: #fff;
  padding: 15px;
  text-align: left;
  font-size: 90%;
  background-color: #fff;
  color: #555;
  background-color:#fff;
  border-radius:12px;
  border-top: 1px solid #e5e6e9;
  border-right: 1px solid #dfe0e4;
  border-bottom: 1px solid #d0d1d5;
  border-left: 0px solid #dfe0e4;
  display: table;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: -1px 1px 2px #b8b8b8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.infoBox b {
  width: 100%;
  display: table;
  font-size: 120%;
  margin-bottom: 10px;
  color: #9b0000;
}
.infoBox font b {
  color: #236c00;
  width: auto;
  font-size: 90%;
  display: inline;
}
.presente {
  padding-left: 120px;
  background-position: 15px 50%;
  background-size: 90px;
  background-repeat: no-repeat;
  background-image: url(//static.onpedido.com.br/img/descontoPresente.png);
}
.produtoFalta {
  text-shadow: none;
  background-color: #fed201;
  color: #6b5000;
  text-align: center;
  z-index: 1;
  margin-top: 0px;
  padding: 3px;
  float: left;
  width: 140px;
  margin: 0 auto;
  border-radius: 10px;
  font-size: 12px;
  clear: both;
  margin-top: 5px;
}
.laminaPizza {
  margin-top: -15px;
  background-image: url(img/preto30.png);
  background-repeat: repeat;
  display: block;
  padding-bottom: 10px;
}
.boxPizza {
  background-color: #000;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 0px;
  width: 100%;
  background-image: url("//onpedido.com.br/static/img/pizzaBackground.jpg");
  background-position: center top;
  animation: animatedBackgroundPizzas 20s linear 0s infinite alternate;
}
@keyframes animatedBackgroundPizzas {
  from {
    background-size: 600px auto;
    background-position: 20% 40%;
  }
  to {
    background-size: 1180px auto;
    background-position: 50% 80%;
  }
}
.laminaPizza {
  background-image: url(/app/img/preto30.png);
  background-repeat: repeat;
  display: block;
  border-radius: 10px;
  padding-bottom: 10px;
  overflow: auto;
}
.boxPizza {
  background-color: #000;
  margin: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 10px;
  width: 100%;
  background-image: url("//onpedido.com.br/static/img/pizzaBackground.jpg");
  background-position: center top;
  animation: animatedBackgroundPizzas 25s linear 0s infinite alternate;
}
@keyframes animatedBackgroundPizzas {
  from {
    background-size: 1024px auto;
    background-position: 35% 35%;
  }
  to {
    background-size: 1600px auto;
    background-position: 100% 80%;
  }
}
.avisoPizzas {
  text-align: center;
  padding-top: 150px;
  font-weight: 500;
  background-size: 120px;
  background-repeat: no-repeat;
  background-position: center 30px;
  background-image: url(https://onpedido.com.br/static/img/pizza-icon.png);
}
.avisoPizzas h2 {
  font-weight: 600;
  width: 600px;
  margin: 0 auto;
  margin-bottom: 15px;
  margin-top: 15px;
}
.boxPizza {
  margin:0 auto;
  margin-top: 25px;
  margin-bottom: 0px;
  border-radius: 10px;
  box-shadow: 1px 1px 2px #ccc;
  outline: none;
  width:97%;
  
}
.boxPizza .titulo {
  display: block;
  width: auto;
  padding: 25px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  height: 20px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
.boxPizza .descricao {
  display: block;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 25px;
  text-align: center;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
}
.boxPizza .botao {
  width: 90%;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  background-color: #d9ffd1;
  color: #0e7c00;
  padding: 12px;
  display: table;
  height: 45px;
  border: 0 solid transparent;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
  outline: none;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
   background-image: url(https://onpedido.com.br/static/img/preto5.png),
    url(https://onpedido.com.br/static/img/preto10.png);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: 100% 5px;
  transition: none !important;
}
.boxPizza .botao:hover {
  background-size: 100% 5px;
  background-image: url(https://onpedido.com.br/static/img/preto5.png),
    url(https://onpedido.com.br/static/img/preto10.png);
  background-repeat: repeat, repeat-x;
  background-position: top, bottom;
  transition: none !important;
}
.boxPizza .botao:active {
  padding-top: 14px;
  padding-bottom: 8px;
  background-size: 100% 5px;
  background-image: url(https://onpedido.com.br/static/img/branco30.png);
  background-repeat: repeat-x;
  background-position: top;
  transition: none !important;
}
.boxPizza table {
  
  width: 90%;
  text-align: center;
  margin: 0 auto;
  border-spacing: 0px;
  border-collapse: separate;
}
.boxPizza table {
  font-size: 10px;
  width: 90%;
  text-align: center;
  margin: 0 auto;
}
a.boxPizza:active,
a.boxPizza:visited,
.boxPizza {
  text-decoration: none;
  color: #555;
  font-weight: 500;
}
.boxPizza table td {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 5px;
}
.boxPizza table tr:first-child td {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
}
.boxPizza table tr:last-child td {
  background-color: #dbe0e5;
  color: #555;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  padding:5px 0px!important;
}
.boxPizza table tr:last-child td font:first-child {
  display: table;
  font-weight: 500;
  width: 50px;
  font-size: 8.8px;
  margin: 0 auto;
  margin-bottom: -5px;
}
.boxPizza table tr:last-child td font:last-child {
  font-size: 10px;
  margin: 0 auto;
  font-weight: 600;
  margin-right: 2px;
}
.boxPizza table td:first-child {
  border-left: 0px solid transparent;
}
.boxPizza table tr:first-child td:first-child {
  border-radius: 10px 0px 0px 0px;
  border-left: 0px solid;
}
.boxPizza table tr:first-child td:last-child {
  border-radius: 0px 10px 0px 0px;
}
.boxPizza table tr:last-child td:first-child {
  border-radius: 0px 0px 0px 10px;
  border-left: 0px solid transparent;
}
.boxPizza table tr:last-child td:last-child {
  border-radius: 0px 0px 10px 0px;
}
.boxInformacoes {
  padding: 15px;
  padding-left: 5px;
  color: #236c00;
  background-color: #ecffe8;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
.boxInformacoes::before {
  content: "";
  width: 35px;
  height: 35px;
  display: table;
  float: left;
  margin-top: -7px;
  margin-bottom: 0px;
  border-radius: 100px;
  margin-right: 15px;
  margin-left: 5px;
  background-color: #236c00;
  background-image: url(https://onpedido.com.br/static/img/informacoes.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 45%;
}
.buscasOpcaoAviso icon {
  width: 100%;
  display: table;
  font-size: 26px;
  margin-bottom: 15px;
}
.buscasOpcaoAviso {
  padding: 15px;
}
.buscasOpcaoAviso h1 {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.buscasOpcaoAviso h2 {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
/*** OWL ***/
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel {
  display: none;
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
  float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div {
  cursor: pointer;
}
.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.grabbing {
  cursor: url(grabbing.png) 8 8, move;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  margin-bottom: -1px;
  height: 0;
  border: 0px;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0px;
}
#loadPaginaExterna {
  border: 0px;
  width: 100%;
  margin: 0px;
}
/*** ANIMAÇÃO CSS ***/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;

    transform: none;
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
.switchDuplo {
  width: 320px;
  display: table;
  margin: 0 auto;
  margin-bottom: 20px;
}
.switchDuplo {
  width: 100%;
  display: table;
  margin-left: 10px;
  margin-bottom: 20px;
  margin-top: 0px;
}

.switchDuplo .bt {
  width: calc(50% - 20px);
  float: left;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
  position: relative;
  color: #555;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  background-color: #d3d9de;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.2);
}

.switchDuplo .bt:nth-child(1) {
  border-radius: 10px;
  margin-right: 5%;
}

.switchDuplo .bt:nth-child(2) {
  border-radius: 10px;
}

.switchDuplo .ativo {
  background-color: #32c131;
  color: #fff;
}
.switchDuplo i{
  font-size:16px;
}
/* Animação de rotação */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Ícone girando apenas quando o botão estiver ativo */
#pendentes.ativo i {
  display: inline-block; /* essencial para o transform funcionar */
  animation: spin 1s linear infinite;
}
.switchDuplo .ativo:before {
  content: "";
  position: absolute;
  bottom: -10px; /* Coloca a seta para fora do botão, abaixo */
  left: 50%; /* Começa no centro */
  transform: translateX(-50%); /* Corrige para centralizar */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #32c131;
}

.switchDuplo font {
  position: relative;
  display: table;
  width: 25px;
  margin: 0px;
  padding: 5px;
  float: right;
  position: absolute;
  margin-top: -40px;
  margin-left: 140px;
  border-radius: 100%;
  background-color: #a70000;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

#boxPendentes .avisoRastreio,
#boxEntregues .avisoRastreio {
  display: table;
  width: calc(100% - 20px);
  border-radius:10px;
  margin: 0 auto;
  text-align: center;
  padding: 10px;
  background-color: #f9ffdf;
  color: #776500;
  font-size: 14px;
}

.espacamento {
  width: 100%;
  display: table;
  height: 10px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.pedidoBox .pdBtImpressao input:hover {
  background-image: url(img/impressora.png), url(img/preto30.png);
}
#boxPendentes .pedidoBox .pdEntrega {
  background: linear-gradient(-90deg, #222299, #5a5aed, #222299, #5a5aed);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  background-color: #222299;
}
#boxPendentes .pedidoBox .pdAgendadoRetirado {
  background: linear-gradient(-90deg, #560081, #9f00ef, #560081, #9f00ef);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  background-color: #560081;
}
#boxPendentes .pedidoBox .pdAgendado {
  background: linear-gradient(-90deg, #ff6600, #ff802b, #ff6600, #ff802b);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  background-color: #ff6600;
}
#boxPendentes .pedidoBox .pdRetirada {
  background: linear-gradient(-90deg, #2b98f2, #5bb5ff, #2b98f2, #5bb5ff);
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
  background-color: #2b98f2;
}

/**/
.pedidoBox .pdEntrega {
  background-color: #222299;
}
.pedidoBox .pdAgendadoRetirado {
  background-color: #560081;
}
.pedidoBox .pdAgendado {
  background-color: #ff6600;
}
.pedidoBox .pdRetirada {
  background-color: #2b98f2;
}
.pedidoBox table {
  font-size: 12px;
  width: 100%;
  display: table;
  margin-bottom: 10px;
  text-align: center;
  margin: 0 auto;
  font-family: "-apple-system", "Helvetica Neue", "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}
.pedidoBox table tr:nth-child(1) th {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  padding: 10px;
  border-bottom: 0px solid transparent;
  -webkit-border-radius: 10px 10px 0px 0px !important;
  -moz-border-radius: 10px 10px 0px 0px !important;
  -ms-border-radius: 10px 10px 0px 0px !important;
  border-radius: 10px 10px 0px 0px !important;
}
.apple .pedidoBox table tr th {
  -webkit-border-radius: 10px 10px 0px 0px !important;
  -moz-border-radius: 10px 10px 0px 0px !important;
  -ms-border-radius: 10px 10px 0px 0px !important;
  border-radius: 10px 10px 0px 0px !important;
}
.pedidoBox table td {
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 5px;
}
.pedidoBox table tr:nth-child(2) td {
  border-left: 1px solid rgb(0 0 0 / 5%);
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: 50% 50%;
  font-weight: 500;
  text-align: center;
  background-color: #d3d9de;
}
.pedidoBox table tr:nth-child(3) td {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  border-left: 1px solid rgb(0 0 0 / 5%);
}
.pedidoBox table tr:nth-child(3) td:nth-child(1) {
  border: 0px;
}
.pedidoBox .rodape b {
  color: #555;
  display: table;
  margin: 0 auto;
  margin-top: -2px;
}
.pedidoBox .rodape {
  padding: 8px;
  color: #fff;
  font-size: 12px;
  border: 0px solid;
  line-height:1.3em;
  -webkit-border-radius: 0px 0px 10px 10px !important;
  -moz-border-radius: 0px 0px 10px 10px !important;
  -ms-border-radius: 0px 0px 10px 10px !important;
  border-radius: 0px 0px 10px 10px !important;
  color: #555;

  font-weight: 400;
  text-align: center;
  background-color: #d3d9de;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.2);
}

.apple .pedidoBox .rodape {
  -webkit-border-radius: 0px 0px 10px 10px !important;
  -moz-border-radius: 0px 0px 10px 10px !important;
  -ms-border-radius: 0px 0px 10px 10px !important;
  border-radius: 0px 0px 10px 10px !important;
}

.pedidoBox table tr:nth-child(2) td:nth-child(1) {
  background-image: url(https://static.onpedido.com.br/img/pedidoEnviado.png);
}
.pedidoBox table tr:nth-child(2) td:nth-child(2) {
  background-image: url(https://static.onpedido.com.br/img/ok.png);
}
.pedidoBox td.entrega {
  background-image: url(https://static.onpedido.com.br/img/pedidoSaiu.png);
}
.pedidoBox td.retirada {
  background-image: url(https://static.onpedido.com.br/img/balcao.png);
}
.pedidoBox table tr:nth-child(2) td:nth-child(4) {
  background-image: url(https://static.onpedido.com.br/img/bag2.png);
}
.pedidoBox table tr:nth-child(4) td:last-child {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.pedidoBox table tr:nth-child(4) td {
  background-color: #fff;
  border-left: 0px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px solid rgba(0, 0, 0, 0.1);
  font-size: 10px;
  font-weight: 600;
  width: 25%;
  color: #888;
  line-height: 1.2em;
}
.pedidoBox table .pdAtrasado {
  color: #fff;
  background-image: url(img/pontoVermelho.gif);
}
.pedidoBox table .pdAtrasado font {
  color: #fff;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
}
.pedidoBox table tr:nth-child(2) td.statusPedidoConcluido {
  background-color: #236c00 !important;
}
.pedidoBox table tr:nth-child(3) td.statusPedidoConcluido {
  background-color: #ecffe8 !important;
  color: #236c00;
}
.pedidoBox table tr:nth-child(2) td.statusPedidoAtivo {
  background-color: #13b800 !important;
}
.pedidoBox table tr:nth-child(3) td.statusPedidoAtivo {
  background-color: #ecffe8 !important;
  color: #236c00;
}
.pedidoBox table.pedidoCancelado tr:nth-child(2) td {
  color: #fff;
  background-color: #b80000;
  background-repeat: no-repeat;
  background-image: url(https://static.onpedido.com.br/img/blocking.png);
}
.pedidoBox table.pedidoCancelado tr:nth-child(3) td {
  color: #fff;
  font-weight: 600;
  background-color: #555;
}
.pedidoBox table.pedidoCancelado tr:nth-child(4) td {
  font-size: 12px;
}
.headerPaginaBt {
  text-align: center;
  color: #fff;
  display: table;
  float: left;
  background-color: #555;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  padding-top: 0px;
  padding-bottom: 0px;
  background-image: url(img/preto30.png);
  background-position: center bottom;
  background-repeat: repeat;
}
.headerPaginaBt .alinha {
  width: 320px;
  margin: 0 auto;
}
.headerPaginaBt .tituloHeaderPagina {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0px;
  float: left;
}
.headerPaginaBt .btHeader {
  width: 100px;
  font-weight: 600;
  font-size: 12px;
  float: right;
  margin-top: 10px;
  margin-right: 0px;
  border-radius: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  /*background: linear-gradient(-45deg, #009a57, #32c131, #009a57, #32c131);
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
  background-color: #009a57;
*/

  font-weight: 600;
  background-color: #d9ffd1;
  color: #34a203;
  box-shadow: inset 0 3px 3px -3px rgba(0, 0, 0, 0.2);
}
.headerPaginaBt i{
  font-size:16px;
}
#iscaBuscar {
 font-size: 14px;
  z-index: 0 !important;
  width: 97% !important;
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
  background-color: #ffffff;
  color: #555;
  border-top: 1px solid #e5e6e9;
  border-right: 1px solid #dfe0e4;
  border-bottom: 0px solid #d0d1d5;
  border-left: 1px solid #dfe0e4;
  display: table;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 2px 2px #b8b8b8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -user-select: auto;
}
.boxBuscar {
  font-size: 14px;
  display: table;
  margin: 2px;
  margin: 0 auto;
  width: 97%;
  padding-top: 10px;
  padding-bottom: 5px;
}
.boxBuscar .lupa {
  width: 25px;
  height: 25px;
  float: right;
  display: table;
  top: 0px;
  margin-left: -30px;
  position: relative;
}
#buscar {
  font-size: 14px;
  z-index: 0 !important;
  width: 97% !important;
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 300;
  background-color: #ffffff;
  color: #333;
  border-top: 1px solid #e5e6e9;
  border-right: 1px solid #dfe0e4;
  border-bottom: 0px solid #d0d1d5;
  border-left: 1px solid #dfe0e4;
  display: table;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 2px 2px #b8b8b8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -user-select: auto;
  
}
#buscar:focus {
  background: url(https://onpedido.com.br/static/img/lupaCinza.png) 98% 45%
    no-repeat rgba(236, 255, 232, 1) !important;
  background-size: 33px !important;
}
.boxBuscar #buscar {
  background: url(https://onpedido.com.br/static/img/lupaCinza.png) 95% 50%
    no-repeat #fff;
  background-size: 25px;
}
.focusBuscar {
  position: fixed;
  top: 110px;
  width: 100%;
  z-index: 9999;
}
.focusBuscar #buscar {
  width: 100%;
  border-radius: 0px;
  border: 0px;
  border-bottom: 3px solid #01a200;
}
.avisoCardapio,
#nadaEncontrado,
#maisCaracteres {
  background-color: #ffe777;
  color: #6b5000;
  text-align: center;
  padding: 8px;
  margin: 0 auto;
  border-radius: 10px;
  font-size: 12px;
  width: 97%;
  margin: 0 auto;
  box-shadow: none;
  margin-top: 10px;
  font-weight:500;
}
#boxListaTitulo {
  font-weight:500;
  background-repeat: repeat;
  background-image: url(img/preto30.png);
  text-align: center;
  padding: 10px;
}
img.iconPagamento {
  width: 55px;
  float: right;
  clear: both;
  margin-top: 7px;
  margin-bottom: -30px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
#addCreditCard {
  padding: 12px;
}
#addCreditCard p {
  width: auto;
  border: 0px solid #ccc;
  display: table;
  margin: 0 auto;
}
#addCreditCard span:last-child {
  font-weight: 600;
  display: table;
  position: relative;
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
#addCreditCard span:first-child {
  background-image: url(https://onpedido.com.br/static/img/mais.svg);
  background-size: 25px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  display: table;
  float: left;
}
.semCartao {
  width: 100%;
  display: table;
  padding: 15px;
  padding-top: 210px;
  text-align: center;
  background-image: url(https://onpedido.com.br/static/img/carteira-arte.png);
  background-size: 200px;
  background-position: 50% 30px;
  background-repeat: no-repeat;
}
.semCartao h1 {
  font-size: 21px;
}
.semCartao p {
  font-size: 14px;
  color: #333;
}
/* PGO */
.showPix {
  width: 100%;
  display: table;
  padding: 15px;
  padding-bottom: 0px;
  text-align: center;
}
#loadQRCodePIX {
  width: 277px;
  display: table;
  margin: 0 auto;
  background-color: #fff;
  padding: 7px;
  border-radius: 7px;
  border: 1px solid #d0d1d5;
}
.showPix h1 {
  line-height: 1.2;
  font-size: 27px;
}
#copiarCodePix {
  padding: 12px;
  background-color: #337de7;
}
#copiarCodePix p {
  width: auto;
  border: 0px solid #ccc;
  display: table;
  margin: 0 auto;
}
#copiarCodePix span:last-child {
  font-weight: 600;
  display: table;
  position: relative;
  float: left;
  margin-top: 4px;
  margin-left: 10px;
}
#copiarCodePix span:first-child {
  background-image: url(https://onpedido.com.br/static/img/duplicarIcon.png);
  background-size: 22px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  display: table;
  float: left;
}
.grid2Box {
  width: 100%;
  padding: 10px;
  padding-top: 0px;
  float: left;
  display: table;
  height: 900px !important;
}
.bandeiras {
  margin: 0 auto;
}
.bandeiras img {
  width: 12%;
  margin: 1.1%;
  float: left;
  border-radius: 10px;
  border: 1px solid #ccc;
}
#boxListaConteudo {
  background-color: #f2f7fc;
}

#formCartao input:focus {
  border-color: #01a200;
}
#formCartao input {
  font-size: 16px;
  z-index: 0 !important;
  padding: 10px;
  width: 100%;
  font-weight: 600;
  background-color: #ffffff;
  color: #333;
  border-top: 1px solid #e5e6e9;
  border-right: 1px solid #dfe0e4;
  border-bottom: 1px solid #d0d1d5;
  border-left: 1px solid #dfe0e4;
  display: table;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 2px #d8d8d8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -user-select: auto;
  /*background: url(https://onpedido.com.br/static/img/lupaCinza.png) 98% 45% no-repeat #fff!important;*/
  background-size: 33px !important;
}
#formCartao #numero,
#formCartao #nome {
  width: 100%;
}

#formCartao #expira {
  margin-right: 4%;
  margin-left: 0% !important;
}
#formCartao label {
  display: table;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}
#formCartao .duoInput {
  width: 48%;
  float: left;
  margin-top: 0px;
  margin-bottom: 10px;
}
#formCartao .duoInput:nth-child(4) {
  margin-right: 2% !important;
  margin-top: 10px;
}
#formCartao .duoInput:nth-child(5) {
  margin-left: 5%;
  margin-top: 10px;
  width: 35%;
}
#formCartao .duoInput:nth-child(5) input {
  width: 100%;
}
#formCartao .duoInput:nth-child(6) {
  width: 100%;
}
#formCartao .duoInput:nth-child(7) {
  width: 100%;
}
#formCartao .duoInput:nth-child(8) {
  width: 100%;
}
input {
  width: 100%;
  display: block;
  margin-top: 5px;
}
#formCartao .info {
  width: 10%;
  height: 40px;
  margin-top: 37px;
  float: right;
  cursor: pointer;
  display: block;
  margin-bottom: -50px;
  background-image: url(https://onpedido.com.br/static/img/icon-info.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 28px;
  border: 0px solid #000;
  z-index: 9999 !important;
}
.termosSessao {
  margin-top: 15px;
  text-align: center !important;
  font-size: 12px;
  color: #777;
}
.termosSessao div {
  text-align: center;
  color: #34a203;
}
#msgRecuperarSenha label font {
  display: table;
  float: right;
  width: auto;
  font-size: 12px;
  color: #a7a7a7;
}

#boxAddressContent #sucessoEndereco {
  position: relative;
  display: table;
  padding: 12px;
  padding-right: 75px;
  width: 100%;
  font-size: 12px;
  font-weight: normal;
  background-color: #fff;
  color: #555;
  border-radius: 10px;
  box-shadow: 0 0px 2px #b8b8b8;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 15px;
}

#boxAddressContent #sucessoEndereco .btRemoveAddress {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 12px;
  background-color: #ffdbdb !important;
  color: #9b0000 !important;
  font-size: 22px;
}

#boxAddressContent #sucessoEndereco .btRemoveAddress::before {
  content: "\eb99"; /* ri-close-circle-line */
  font-family: "remixicon";
  font-weight: normal;
  line-height: 1;
  font-size: 28px;
}

#boxAddressContent .btFindAddress:hover,
#boxAddressContent #sucessoEndereco .btRemoveAddress:hover {
  opacity: 0.8;
}
#boxAddressContent .btFindAddress {
  font-size: 16px;
  z-index: 0 !important;
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  font-weight: 400;
  color: #fff;
  display: table;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 2px 2px #b8b8b8;
  background-color: #337de7;
  cursor: pointer;
}
.pac-matched {
  font-size: 16px !important;
}
.pac-item {
  padding: 7px;
  cursor: pointer;
  font-size: 14px !important;
  background-color: transparent !important;
}
.iconPointerMap {
  background-repeat: no-repeat;
  cursor: pointer;
}
.showAlert {
  width: 100%;
  display: table;
  padding: 15px;
  padding-bottom: 0px;
  text-align: center;
}
.showAlert h1 {
  line-height: 1.2;
  font-size: 27px;
}
#artLoginRulesOptional {
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 300px;
  height: 300px;
  background-size: auto 100%;
  background-position: 5px 50%;
  background-image: url("https://onpedido.com.br/static/img/pedido-sem-cadastro-art.png");
}
#entrarAlertOptionalLogin,
#cadastreseAlertOptionalLogin {
  width: 48%;
  float: left;
  margin-top: -5px;
  background-color: #337de7;
}
#cadastreseAlertOptionalLogin {
  background-color: #555;
  margin-left: 4%;
}

.fullBanner {
  padding:0px 1.5% 0px 1.5%;
  border-radius:10px;
}
.fullBanner img{
  border-radius:10px;
}

.aberto {
  background-color: #ecffe8;
  color: #0e6c00;
}
.fechado {
  background-color: #ffd1d1;
  color: #9b0000;
}
.onpedido-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 0 2px #b8b8b8;
  width: 97%;
  margin: 10px auto 0 auto;
  position: relative;
  overflow: hidden;
}

.onpedido-status-bar::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 12%;
  width: 90px;
  height: 90px;
  opacity: 0.05; 
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M21 13.2422V20H22V22H2V20H3V13.2422C1.79401 12.435 1 11.0602 1 9.5C1 8.67286 1.22443 7.87621 1.63322 7.19746L4.3453 2.5C4.52393 2.1906 4.85406 2 5.21132 2H18.7887C19.1459 2 19.4761 2.1906 19.6547 2.5L22.3575 7.18172C22.7756 7.87621 23 8.67286 23 9.5C23 11.0602 22.206 12.435 21 13.2422ZM19 13.9725C18.8358 13.9907 18.669 14 18.5 14C17.2409 14 16.0789 13.478 15.25 12.6132C14.4211 13.478 13.2591 14 12 14C10.7409 14 9.5789 13.478 8.75 12.6132C7.9211 13.478 6.75911 14 5.5 14C5.331 14 5.16417 13.9907 5 13.9725V20H19V13.9725ZM5.78865 4L3.35598 8.21321C3.12409 8.59843 3 9.0389 3 9.5C3 10.8807 4.11929 12 5.5 12C6.53096 12 7.44467 11.3703 7.82179 10.4295C8.1574 9.59223 9.3426 9.59223 9.67821 10.4295C10.0553 11.3703 10.969 12 12 12C13.031 12 13.9447 11.3703 14.3218 10.4295C14.6574 9.59223 15.8426 9.59223 16.1782 10.4295C16.5553 11.3703 17.469 12 18.5 12C19.8807 12 21 10.8807 21 9.5C21 9.0389 20.8759 8.59843 20.6347 8.19746L18.2113 4H5.78865Z'%3E%3C/path%3E%3C/svg%3E");
}
.onpedido-status-bar .status-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #555;
  padding: 4px 6px;
  border-radius: 10px;
}
.onpedido-status-bar .status-row b {
  font-weight: 500;
}
.onpedido-status-bar .status-icon {
  font-size: 22px;
  min-width: 22px;
  min-height: 22px;
  font-weight: 500;
  vertical-align: middle;
}
.onpedido-status-bar .status-open {
  background-color: #ecffe8;
  color: #0e7c00;
}
.onpedido-status-bar .status-closed {
  background-color: #ffd1d1;
  color: #e14d42;
}
.statusInativo {
  background-image: url(https://onpedido.com.br/static/img/erro.png),
    url(https://onpedido.com.br/static/img/pontoVermelho.gif);
  border-radius: 100px;
  background-size: 52% 52%, 100% 100%;
  background-position: 50% 50%, center top;
}
.statusAtivo {
  background-image: url(https://onpedido.com.br/static/img/checadoBranco.png),
    url(https://onpedido.com.br/static/img/pontoVerde.gif);
  border-radius: 100px;
  background-size: 70% 70%, 100% 100%;
  background-position: 50% 50%, center top;
}
/* ===== Trilhos de Categorias > Subcategorias (PWA) ===== */

/* Contêiner fixo do título (fora do trilho) */
.catrail-sticky {
  position: sticky;     
  z-index: 5;            
  margin-top:15px;
}
.catrail-sticky .pill {
  width: 97%;
  margin: 0 auto;
  padding: 0px 12px;
  border-radius: 10px;
  text-align: left;
  font-weight: 600;
  color: #555;
  line-height: 1.25;
  overflow: hidden;
  font-size:14px;
}
.pwa-cat-rails {
  --cat-title-w: 97%;
  --peek-next: 0px;
  display: flex;
  gap: 0;
  padding:0px;
  padding-bottom:10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
}
.pwa-cat-rails::-webkit-scrollbar { height: 0; }

/* Cada categoria ocupa 100% da viewport e deixa folga p/ próxima */
.catrail {
  flex: 0 0 100%;
  scroll-snap-align: start;
  box-sizing: border-box;
  padding-left:  calc((100% - var(--cat-title-w)) / 2);
  padding-right: calc((100% - var(--cat-title-w)) / 2 + var(--peek-next) + 16px);
  overflow: visible;
}

/* Cabeçalho local (apenas visual, não sticky) */
.catrail-head {
  width: 100%;
  margin: 0;
  padding: 2px 2px 4px 15px;
  border-radius: 10px;
  background: #dbe0e5;
}
.catrail-title {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  color: #555;
  margin: 0;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lista de subcategorias */
.catrail-scroll {
  width: 100%;
  margin: 10px 0 0 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 2px 2px 2px;
  overflow: visible;
  min-width: 0;
}

/* Card de subcategoria */
.subcard {
  flex: 0 0 auto;
  width: 150px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border: 1px solid #f1f1f1;
  padding: 10px;
  position: relative;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.subcard:active { transform: scale(.985); }
.subcard:focus-visible { outline: 2px solid #a70000; outline-offset: 2px; }

.subcard-media {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 12px;
  background: #fafafa;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
@supports not (aspect-ratio: 1 / 1) {
  .subcard-media { height: 0; padding-top: 100%; }
}
.subcard-media .loadImagem,
.subcard-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.subcard-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #bbb;
}

.subcard-title {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  line-height: 1.25;
  letter-spacing: .2px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1em * 1.25 * 2);
}

@media (min-width: 600px) {
  .subcard { width: 150px; }
  .subcard-title { font-size: 13.5px; }
}

.sectionTitle {
  width:95%;
  margin:10px auto 0;
  padding:10px 0 0;
  font-weight:600;
  font-size:14px;
  font-family:-apple-system, "Inter", sans-serif;
}

.inputsForm {
    width: 100%;
    font-size: 14px;
}
.inputsForm .select-ddi {
    display: table;
    float: left;
    width: 100px;
    margin-right: 10px;
}

.inputsForm .wrapper-ddd {
    display: table;
    float: left;
    margin: 0;
}

.inputsForm .input-ddd {
    width: 55px;
    margin-right: 10px;
}
.inputsForm .input-phone {
    float: left;
    width: calc(100% - 175px); 
    margin-left: 0;
}

.inputsForm .wrapper-ddd[style*="display:none"] + .input-phone,
.inputsForm .wrapper-ddd[style*="display: none"] + .input-phone {
    width: calc(100% - 110px);
}
.inputsForm .clear {
    clear: both;
}
.inputsForm label i {
    margin-right: 6px;
    font-size: 16px;
    vertical-align: middle;
}