body {
  background-color: #ffffff;
 /* padding-left: 20px;
 padding-right: 20px; */
 

}
body.disable-scroll {
  overflow: hidden;
}

.scrollable-content {
 
 
  overflow-y: scroll;
}

.scrollable-content::-webkit-scrollbar {
  display: none;
}

.bg{
    background-color: #ffffff !important;
    position: absolute;
    /* width: 96%; */
    top: 0px;
    left: 0px;
    right: 0px; 
    height: 180px;
    z-index: -6;
}

.bg1{
  background-color: #F38F31 !important;
  border-radius: 20px;
}

.msgInatividade{
  /* font-family: 'EB Garamond', serif; */
 /* font-family: 'Lato', sans-serif;  */
 font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 34px !important;
  font-weight: 500;
  color: #ffffffca !important; 
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
 
}

#totem {
  position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(0, 0, 0);
    z-index: 9999;
}

.imgTotem{
 
  padding: 2px; 
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10%;
  }

.txtTotem { 
  font-family: 'PT Sans', sans-serif; 
  font-size: 46px !important;
  color: #ffffff !important; 
  padding-top: 30px;
  text-align: center;
  display:block;
  position: fixed;
  bottom: -20px;
  width: 100%;
  height: 146px; 
  background: rgba(215, 17, 17, 1);
    z-index: 9999;
}

.numeroPedido{
  /* font-family: 'EB Garamond', serif; */
 /* font-family: 'Lato', sans-serif;  */
 font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 40px !important;
  font-weight: 700;
  color: rgb(70, 159, 32) !important; 
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
 
}

.msgSucesso{
  /* font-family: 'EB Garamond', serif; */
 /* font-family: 'Lato', sans-serif;  */
 font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 20px !important;
  font-weight: 700;
  color: #1e1e1eca !important; 
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
 
}

.sucesso{
  display: block;
}

.centerIcon{
  text-align: center;
  }

.disabledbutton {
  pointer-events: none;
  }

 


.pac-container{
 /*  position: absolute !important;
  left: 0px !important;
  top: 36px !important; */
  z-index: 999999;
}

input[readOnly] {
  background: rgb(255, 255, 255) !important;
}

.alertaVermelho{
  color: #db0d17 !important; 
}

.lojaFechada { 
  font-family: 'PT Sans', sans-serif; 
  font-size: 14px !important;
  color: #ffffff !important; 
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  background: red; 
  -moz-border-radius: 6px; 
  -webkit-border-radius: 6px; 
  border-radius: 6px;
}

.lojaAberta{
  font-family: 'PT Sans', sans-serif; 
  font-size: 14px !important;
  color: #ffffff !important; 
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 2px;
  background: rgb(70, 159, 32); 
  -moz-border-radius: 6px; 
  -webkit-border-radius: 6px; 
  border-radius: 6px;
}

.contaBloqueada { 
  font-family: 'PT Sans', sans-serif; 
  font-size: 16px !important;
  color: #ffffff !important; 
  padding-top: 6px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 6px;
  background: red; 
  -moz-border-radius: 6px; 
  -webkit-border-radius: 6px; 
  border-radius: 6px;
}
 /* ############## botões fixos no layout do aplicativo ######################## */
.botaoMenu {
    position: absolute;
    top: 20px;
    right: 20px; 
    width: 60px;
    height: 60px;
    z-index: -2;
    border: 0px solid;
    outline: none;
}



.botaoBuscar {
    position: absolute;
    top: 20px;
    right: 80px; 
    width: 60px;
    height: 60px;
    z-index: -4;
    border: 0px solid;
    outline: none;
}

.fotoUsuario {
  position: absolute;
  top: 20px;
  left: 20px; 
  width: 50px;
  height: 50px;
  z-index: -4;
}

.nomeEmpresa{
  font-family: 'PT Sans', sans-serif; 
  font-size: 16px !important;
  color: #8c8b8b !important; 
  position: absolute;
  top: 24px;
  left: 90px; 
  z-index: -4;
}

.iconeTempoEntrega{
  font-family: 'PT Sans', sans-serif; 
  font-size: 12px !important;
  color: #a6a5a5 !important; 
  position: absolute;
  top: 50px;
  left: 90px; 
  z-index: -4;
}

.buscaInput {
   
    top: 60px !important;
   padding-left: 30px;
    height: 30px;
    z-index: -4;
}

.iconeBusca {
  position: absolute;
  left: 0px;

}



 /* ############## fim ######################## */

 .containerBtnGarcom {
  display:block;
  position: fixed;
  bottom: 16px;
  right: 50%; 
  width: 64px;
  height: 64px; 
  
}

.btnGarcom {
  width: 64px;
  height: 64px;
  position:absolute;
}



.textoBtn{
  font-family: 'PT Sans', sans-serif; 
  font-size: 12px !important;
  color: #f9f9f9 !important; 
  padding-top: 4px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  background: red;
  width: 90px;
  border-radius: 20px;
  /* padding-left: 20px; */
}
  /* ############## botão carrinho de compra ######################## */
  .containerBtnCarrinho {
    display:block;
    position: fixed;
    bottom: 80px;
    right: 40px; 
    width: 64px;
    height: 64px; 
  }

  .textoBtnCarrinho{
    font-family: 'PT Sans', sans-serif; 
    font-size: 12px !important;
    color: #353434 !important; 
    padding-top: 4px;
    /* padding-left: 20px; */
  }

.btnCarrinho {
  width: 64px;
  height: 64px;
  position:absolute;
}

.circle { 
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  background: red; 
  -moz-border-radius: 15px; 
  -webkit-border-radius: 15px; 
  border-radius: 15px;
}
.numeroItens{
  font-family: 'PT Sans', sans-serif; 
  position:absolute; 
  font-size: 14px !important;
  color: #ffffff !important; 
  width: 30px;
  height: 30px;
  padding-top: 4px;
}
 /* ############## fim ######################## */



 /* ############## menu lateral esquerda com as categorias de produtos ######################## */
.menuCategorias {
    position: absolute;
    top: 100px;
    left: 20px; 
    z-index: 1;
}

/* unvisited link */
#categorias a:link {
    color: #666666;
    text-decoration:none;
  }
  
  /* visited link */
  #categorias a:visited {
    color: #333333;
    text-decoration:none;
  }
  
  /* mouse over link */
  #categorias a:hover {
    color: #333333;
  }
  
  /* selected link */
  #categorias a:active {
    color: #666666;
    text-decoration:none;
  }
   /* ############## fim ######################## */

  /* ############## corpo do aplicativo com a lista de produtos ######################## */
.categoriaSelecionada{
 margin-top: 130px;
  margin-left: 10px;
  font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 28px !important;
  font-weight: 700;
   color: #F38F31 !important;  
  text-align: left;
}

.containerProdutos{
  margin-top: 200px;
  margin-bottom: 30px;
 
}

 /* ############## layout 0 estilo pinterest ######################## */
.containerLista {
  min-width: 100%;
  
  column-gap: 12px;
  columns: 5;
}

.box {
  width: 100%;
   padding: 0px; 
  background-color: #ffffff;
  border: 1px solid #ffffff;
  margin-bottom: 10px;
  break-inside: avoid;
  border-radius: 20px;
  box-shadow: rgba(161, 161, 161, 0.1) 0px 20px 25px -5px, rgba(190, 190, 190, 0.04) 0px 10px 10px -5px;
}

.box img {
  padding: 20px; 
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 10%;
}

.circuloImg {
  border-radius: 50%;
}


.box button {
  margin-top: 10px;
  margin-left: 20px;
  display: block;
  width: 44px;
  height: 44px;
  border: 2px solid #cccccc;
  outline: none;
}

 /* ############## layout 1 vertical estilo grid ######################## */
 .espaco{
  gap:10px;
}

.card-body {
  
  max-width:19%; 
  padding: 0px; 
  background-color: #ffffff;
  border: 1px solid #ffffff;
  break-inside: avoid;
  border-radius: 20px;
 
  box-shadow: rgba(161, 161, 161, 0.1) 0px 20px 25px -5px, rgba(190, 190, 190, 0.04) 0px 10px 10px -5px;
}

.card-body img {
  padding: 20px; 
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 10%;
}

.card-body button {
  margin-top: 10px;
  margin-left: 20px;
  display: block;
  width: 44px;
  height: 44px;
  border: 2px solid #cccccc;
  outline: none;
}

/* ############## layout 2 horizontal  ######################## */
.card-body2 {
  min-height: 240px;
  min-width:240px;
  padding: 0px; 
  background-color: #ffffff;
  border: 1px solid #ffffff;
  break-inside: avoid;
  border-radius: 20px;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.card-body2 img {
  padding: 20px; 
  width: 100%;
  height: 170px;
  object-fit: contain;
  border-radius: 10%;
}

.card-body2 button {
  margin-top: 10px;
  margin-left: 20px;
  display: block;
  width: 44px;
  height: 44px;
  border: 2px solid #cccccc;
  outline: none;
}

.nomeP{
  /* font-family: 'EB Garamond', serif; */
 /* font-family: 'Lato', sans-serif;  */
 font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 20px !important;
  font-weight: 700;
  color: #F38F31 !important; 
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
 
}

.descricaoP{
  /* position: absolute; */
  font-size: 14px !important;
  color: #666 !important; 
  text-align: center;
  /* padding-top: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
 
}

.precoP{
  font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 18px !important;
   color: #F38F31 !important;  
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
  /* ############## fim ######################## */

 
/* ############## offcanvas lateral direita detalhes produto ######################## */
.headerCarrinho{
display: block !important;
}
.tituloCarrinho{
  font-family: 'PT Sans', sans-serif; 
  font-size: 24px !important;
  font-weight: 600;
  color: #333333 !important; 
  margin-top: 4px;
  margin-left:  auto;
  margin-right: auto;
  text-align: center;
}

.subTituloCarrinho{
  font-family: 'PT Sans', sans-serif; 
  font-size: 18px !important;
  font-weight: 400;
  color: #666666 !important; 
  margin-left:  auto;
  margin-right: auto;
  text-align: center;
}

.botaoVoltarCarrinho {
  position: absolute; 
  top: 20px;
  right: 20px; 
  width: 40px;
  height: 40px;
  /* z-index: -2; */
  border: 0px solid;
  outline: none;
}

.detalhes{
  font-family: 'PT Sans', sans-serif; 
}

.nomeDetalhesP{
  /* font-family: 'EB Garamond', serif; */
 /* font-family: 'Lato', sans-serif;  */
 font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 20px !important;
  font-weight: 700;
  color: #F38F31 !important; 
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
 
}

.descricaoDetalhesP{
  /* position: absolute; */
  font-size: 14px !important;
  color: #666 !important; 
  text-align: center;
  /* padding-top: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 1.5em;
  height: 6em;
  overflow: hidden;
 
}

.descricaoDetalhesPVermelha{
  font-size: 14px !important;
  color: rgb(237, 11, 11) !important; 
  text-align: center;
  /* padding-top: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
}

.precoDetalhesP{
  font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 18px !important;
  color: #F38F31 !important; 
  font-weight: 700;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.nomeAdicional{
  font-family: 'PT Sans', sans-serif; 
   position: absolute;
  font-size: 16px !important;
  color: #2b2b2b !important; 
  font-weight: 500;
  text-align: left;
  left: 120px;
  margin-top: 10px;
  /* margin-bottom: 20px; */
}

.precoAdicional{
  font-family: 'PT Sans', sans-serif; 
   position: absolute;
  font-size: 14px !important;
  color: #F38F31 !important; 
  font-weight: 500;
  text-align: left;
  left: 120px;
  margin-top: 30px;
  /* margin-bottom: 20px; */
}

.detalhes img {
 
margin-left: auto;
margin-right: auto ;
  padding: 20px; 
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.mb30{
  margin-bottom: 30px;
}

.mt10{
  margin-top: 10px;
}

.mt30{
  margin-top: 30px;
}

.ml10{
  margin-left: 10px;
}
.ml20{
  margin-left: 20px;
}

.t20{
  top: 20px;
}

.t30{
  top: 30px;
}

.t60{
  top: 60px;
}
.t90{
  top: 90px;
}

.obsProduto{
  outline: none;
}

.adicionarItem{
  width: 240px; 
  height: 60px;
  margin: 0 auto; 
  display: block;
  outline: none;
  border: #F38F31;
  border-radius: 30px;
  background-color: #e8ae56;
  }

.pagamentoStyle{
  outline: none;
  border: #c4c4c4;
  background-color: #c4c4c4;
}

.adicionarQtdItem{
  width: 44px; 
  height: 44px;
   margin: 0 auto;  
  display: block;
  outline: none;
  border: #ed1d16;
  border-radius: 20px;
  background-color: #ed1d16;
  }

  .iconeAdicionar{
    padding-left: 20px !important;
    pointer-events: none;
  }


.imgCarrinho {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 20px;
  margin-bottom: 0px;
  
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.imgAdicional {
  margin-left: 30px;
  margin-right: 10px; 
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.imgCarrinho2{
 
  margin-left: auto;
  margin-right: auto ;
    
    width: 60px;
    height: 60px;
    object-fit: contain;
  }

  .imgQrcode {
 
    margin-left: auto;
    margin-right: auto ;
      padding: 20px; 
      width: 300px;
      height: 300px;
      object-fit: contain;
    }

.direita{
  position: absolute;
  right: 30px !important;
  margin-top: 18px !important;
}

.removerBtn{
  position: absolute;
  right: 70px !important;
}

.alinharDireita{
  position: absolute;
  right: 30px !important;
}

.checkBoxAdicionais{
  position: absolute;
  top: 30px;
}



.retirarLocal{
  font-family: 'PT Sans', sans-serif; 
  font-size: 16px !important;
  color: #158f13 !important; 
  font-weight: 700;
}
.retirarLocalSelecionado{
  font-family: 'PT Sans', sans-serif; 
  font-size: 16px !important;
  color: #fb0404 !important; 
  font-weight: 700;
}


.nomeCarrinhoP{
  /* font-family: 'EB Garamond', serif; */
 /* font-family: 'Lato', sans-serif;  */
 font-family: 'PT Sans', sans-serif; 
   position: absolute; 
  font-size: 20px !important;
  font-weight: 700;
  color: #333333 !important; 
  text-align: left;
  padding-left: 0px;
  padding-right: 10px;
  margin-top: 16px;
 
 
}

.descricaoCarrinhoP{
   /* position: absolute;  */
  font-size: 14px !important;
  color: #666 !important; 
  text-align: left;
  /* padding-top: 10px; */
  padding-left: 80px;
  padding-right: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
 
}

.precoCarrinhoP{
  font-family: 'PT Sans', sans-serif; 
   /* position: absolute;  */
  font-size: 18px !important;
  color: #000000 !important; 
  text-align: left;
  padding-left: 80px;
  padding-right: 10px;
  margin-top: 10px;
  margin-bottom: 0px;
  
}

.totalCarrinhoP{
  font-family: 'PT Sans', sans-serif; 
   /* position: absolute;  */
  font-size: 20px !important;
  color: #F38F31 !important; 
}

.adicionaisCarrinhoP{
  /* position: absolute;  */
 font-size: 14px !important;
 color: #666 !important; 
 text-align: left;
 /* padding-top: 10px; */
 padding-left: 80px;
 padding-right: 10px;
 margin-top: 0px;
 margin-bottom: 10px;
 line-height: 1.5em;
 /* height: 3em; */
 overflow: hidden;

}


.alerta{
  /* position: absolute; */
  font-size: 16px !important;
  color: rgb(214, 18, 18) !important; 
  text-align: center;
  /* padding-top: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
 
}

.alertaEsquerda{
  /* position: absolute; */
  font-size: 16px !important;
  color: rgb(214, 18, 18) !important; 
  text-align: left;
  /* padding-top: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
 
}


.nomeAtributos{
  /* font-family: 'EB Garamond', serif; */
 /* font-family: 'Lato', sans-serif;  */
 font-family: 'PT Sans', sans-serif; 
  /* position: absolute; */
  font-size: 18px !important;
  font-weight: 500;
  color: #2b2b2b !important; 
  text-align: left;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
 
}

.detalhesAtributos{
  /* position: absolute; */
  font-size: 14px !important;
  color: #666 !important; 
  text-align: left;
  /* padding-top: 10px; */
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  line-height: 1.5em;
  height: 3em;
  overflow: hidden;
 
}



/* lista horizontal */
div.scrollmenu {
  position: absolute;
  top: 90px;
  left: 10px; 
  right: 10px;
  outline: none;
}

.barraRolagem{
  overflow: auto;
  white-space: nowrap;
}



div.scrollmenu a {
  display: inline-block;
  font-size: 16px !important;
  color: #666; 
  text-align: center;

  padding-top: 0px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 0px;

  text-decoration: none;
 
  background-color: #ffffff !important;
  margin-left: 10px;
  height: 30px;
  margin-bottom: 12px;

  -moz-border-radius: 6px; 
  -webkit-border-radius: 6px; 
  border-radius: 6px; 
 
}


div.scrollmenu a:hover  {
  
  color: #ffffff; 
  background-color: #F38F31 !important;
  
}

 div.scrollmenu a:focus   {
  
  color: #ffffff; 
  background-color: #F38F31 !important;
  
}


div.scrollmenu a.active   {
  
  color: #ffffff; 
  background-color: #F38F31 !important;
  
} 




/* width */
div.scrollmenu::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

/* Track */
div.scrollmenu::-webkit-scrollbar-track {
  background: #ffffff; 
}
 
/* Handle */
div.scrollmenu::-webkit-scrollbar-thumb {
  background: #f2f2f2; 
}

/* Handle on hover */
div.scrollmenu::-webkit-scrollbar-thumb:hover {
  background: #f2f2f2; 
}



/* Telefones em paisagem e abaixo */
 @media screen and (max-width: 600px) {
	.containerLista {
    min-width: 100%;
    column-gap: 12px;
    column-count: 2;
	}

  .espaco{
    gap:6px;
  }

   .card-body {
    max-width:48%; 
    padding: 0px; 
    background-color: #ffffff;
    border: 1px solid #ffffff;
    break-inside: avoid;
    border-radius: 20px;
    box-shadow: rgba(161, 161, 161, 0.1) 0px 20px 25px -5px, rgba(190, 190, 190, 0.04) 0px 10px 10px -5px;
  } 


.barraRolagem{
  overflow: auto;
  white-space: nowrap;

  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  overflow-x: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
div.scrollmenu::-webkit-scrollbar {
  display: none;
}

  
}

/* Telefones em paisagem a tablet em retrato */
@media screen and (min-width: 601px) and (max-width: 1200px) {
	.containerLista {
    min-width: 100%;
 
  column-gap: 12px;
  column-count: 3;
	}

  .espaco{
    gap:12px;
  }

   .card-body {
    max-width:32%; 
    padding: 0px; 
    background-color: #ffffff;
    border: 1px solid #ffffff;
    break-inside: avoid;
    border-radius: 20px;
    box-shadow: rgba(161, 161, 161, 0.1) 0px 20px 25px -5px, rgba(190, 190, 190, 0.04) 0px 10px 10px -5px;
  } 

  .barraRolagem{
    overflow: auto;
    white-space: nowrap;
  
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow-x: scroll;
  }
  
  /* Hide scrollbar for Chrome, Safari and Opera */
  div.scrollmenu::-webkit-scrollbar {
    display: none;
  }


}

/* Tablet em retrato a paisagem e desktop */
/* @media screen and (min-width: 901px) and (max-width: 1200px) {
	.containerLista {
    min-width: 100%;
 
  column-gap: 12px;
  column-count: 4;
	}
}  */

/* hd desktop */
@media screen and (min-width: 1201px) and (max-width: 1920px) {
	.containerLista {
    min-width: 100%;
  
  column-gap: 12px;
  column-count: 5;
	}

  .espaco{
    gap:10px;
  }

   .card-body {
    max-width:19%; 
    padding: 0px; 
    background-color: #ffffff;
    border: 1px solid #ffffff;
    break-inside: avoid;
    border-radius: 20px;
    box-shadow: rgba(161, 161, 161, 0.1) 0px 20px 25px -5px, rgba(190, 190, 190, 0.04) 0px 10px 10px -5px;
  } 

  .barraRolagem{
  overflow: auto;
  white-space: nowrap;
}



} 

/* hd desktop */
/* @media screen and (min-width: 1601px) and (max-width: 1800px) {
	.container {
    min-width: 100%;
  margin: 0px auto;
  column-gap: 12px;
		columns: 6;
	}
} 
 */




.offcanvas{ /* add Responsivenes to default offcanvas */
  --bs-offcanvas-width: min(95vw, 500px) !important;
}