@charset 'UTF-8';

@font-face {
    font-family: "Normal"; src: url('../fontes/lato/TTF/Lato-Reg.ttf') format("truetype");
}
@font-face {
    font-family: "Italico"; src: url('../fontes/lato/TTF/Lato-RegIta.ttf') format("truetype");
}
@font-face {
    font-family: "Forte"; src: url('../fontes/lato/TTF/Lato-Bla.ttf') format("truetype");
}

:root {
    --cores-branco: #fff;
    --cores-preto: #000;
    --cores-vermelho: #8c221b;
    --cores-marrom: #aa8a6e;
    --cores-azul: #7f3be0;
    --cores-bege: #7a6c54;    
    --cores-cinza: #ebe8e2;
    --cores-cinza-escuro: #cac1c2;    
    --cores-cinza-claro: #faf1f2;    
    --cores-verde: #29735a;
    --cores-laranja: #BF5011;
    --col-perc: 8.33333%
}

html, body{
    height: 100%; font-family: 'Normal', 'Helvetica Neue', sans-serif; font-size: 14px;
}

/* Estrutura principal da página */
main {
    display: flex; flex-direction: column; margin: 0px auto; height: 100%; overflow-y: hidden; background-color: #fff;
}
main > header{
    position: relative; padding: 10px 20px;  text-align: center;
}
main > header .titulo{
    display: none; margin: 6px 0px 0px 50px; text-align: left; font-family: 'Forte'; font-size: 20px; color: var(--cores-preto)
}
main #listavez{
    position: absolute; right: 27px; top: 10px;
}
main .listavez-rotulo{
    position: absolute; right: 20px; top: 48px; font-size: 9px; text-transform: uppercase; color: var(--cores-cinza-escuro)
}
main > section{
    position: relative; flex-grow: 1; display: flex; overflow: auto;
}
main > footer{
    border-top: 1px solid var(--cores-cinza); padding: 5px 0px 10px; height: 40px;
}

/* Grid */
.col1,.col2,.col3,.col4,.col5,.col8{
    box-sizing: border-box;
}
.col1{ width: calc(1 * var(--col-perc)); }
.col2{ width: calc(2 * var(--col-perc)); }
.col3{ width: calc(3 * var(--col-perc)); }
.col4{ width: calc(4 * var(--col-perc)); }
.col5{ width: calc(5 * var(--col-perc)); }
.col6{ width: calc(6 * var(--col-perc)); }
.col7{ width: calc(7 * var(--col-perc)); }
.col8{ width: calc(8 * var(--col-perc)); }
.col9{ width: calc(9 * var(--col-perc)); }
.col10{ width: calc(10 * var(--col-perc)); }
.col11{ width: calc(11 * var(--col-perc)); }
.col12{ width: calc(12 * var(--col-perc)); }

/* Comportamento padrão dos elementos */
* { 
    outline: none; text-decoration: none;
}
h1, h2, h3, h4, h5{
    margin: 0px 0px 10px; font-family: 'Forte';
}
p{
    margin: 0px 0px 10px;
}
p.grande{
    font-size: 20px;
}
input, textarea, select {
    box-sizing: border-box;
}
li{ 
    list-style: none; 
}
td, th{
    vertical-align: top; text-align: left;
}
.flex{
    flex-grow: 1; display: flex;
}
strong, th{
    font-family: 'Forte';
}
button:not(.imagem){
    border: 0px; border-radius: 3px; padding: 6px 10px; background-color: #000; color: #fff; 
    font-family: 'Normal'; font-size: 12px; text-transform: uppercase; cursor: pointer;
}
button.imagem{
    border:0px;  background-color: transparent;
}
[latente]{
    display: none !important;
}
[clone]{
    display: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}
::-webkit-input-placeholder {
    color: var(--cores-cinza-escuro); text-transform: none !important;
}
:-ms-input-placeholder {
    color: var(--cores-cinza-escuro); text-transform: none !important;
}
::placeholder {
    color: var(--cores-cinza-escuro); text-transform: none !important;
} 
[toque]{
    position: relative;
}
[toque]::after{
    content: "";
}
[toque]:active::after{
    
}
#atendimento_status{
    display: none;
}
select{ background-color: transparent; }
@keyframes toque-animacao {
    
}

/* Logotipo */
.logotipo {
    margin-right: 11px; max-width: 100px; max-height: 40px;
}

/* Botão sair */
.sair{
    position: absolute; top: 23px; right: 20px;
}

/* Botão voltar */
.voltar{
    position: absolute; top: 12px; left: 10px; display: none; height: 30px; cursor: pointer;
}
.voltar img{
    height: 100%;
}

/* Avatar */
.avatar{
    border-radius: 25px; width: 50px; height: 50px; background-color: var(--cores-cinza);
}
.avatar-grande{
    border-radius: 75px !important; width: 150px !important; height: 150px !important;
}

/* Toggle de função */
ul.toggle{
    margin-bottom: 20px; display: flex; flex-direction: row;
}
ul.toggle li{
    border: 1px solid var(--cores-cinza); padding: 10px 20px; font-family: 'Forte';
}
ul.toggle li:first-child{
    border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-right: 0px; 
}
ul.toggle li:last-child{
    border-top-right-radius: 15px; border-bottom-right-radius: 15px;
}
ul.toggle.inativo li{
    background-color: var(--cores-vermelho); color: #fff
}
ul.toggle.ativo li{
    background-color: var(--cores-verde); color: #fff
}

/* Função on/off */
ul.onoff{
    position: relative; display: flex; flex-direction: row;
}
ul.onoff li{
    background-color: var(--cores-cinza-escuro); width: 25px; height: 30px;
    transition: background-color .3s;
}
ul.onoff li:first-child{
    border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-right: 0px; 
}
ul.onoff li:last-child{
    border-top-right-radius: 15px; border-bottom-right-radius: 15px;
}
ul.onoff .botao{
    position: absolute; top: 2px; left: 2px; border-radius: 13px; width: 26px; height: 26px; background-color: #fff;
    transition: left .3s;
}
ul.onoff.ativo li{
    background-color: var(--cores-verde);
}
ul.onoff.ativo .botao{
    left: 22px;
}

/* Navegação ao rodapé */
footer > nav > ul{
    margin: 0px auto; display: flex; justify-content: space-between; max-width: 400px;
}
footer > nav > ul li{
    position: relative; flex-grow: 1; text-align: center; font-family: 'Forte'; font-size: 10px; color: var(--cores-cinza-escuro); cursor: pointer;
}
footer > nav > ul li span{
    display: block; margin: 0px auto; width: 30px; height: 30px; background: url(../imagens/navegacao.png) no-repeat 0px -30px; background-size: auto 60px;    
}
footer > nav > ul li.ativo{
    color: #000;
}
footer > nav > ul li.ativo span{
    background-position-y: 0px !important
}
footer > nav > ul li span.nav-busca{
    background-position-x: -30px;
}
footer > nav > ul li span.nav-pedido{
    background-position-x: -60px;
}
footer > nav > ul li span.nav-crm{
    background-position-x: -90px;
}
footer > nav > ul li span.nav-perfil{
    background-position-x: -120px;
}
footer > nav > ul li strong.badge{
    position: absolute; right: calc(50% - 30px); top: 0px; transform: scale(.75);
    
}

/* Menu de opções da página inicial */
ul.menu{
    display: flex; margin: 0px auto; margin-bottom: 10px; justify-content: space-evenly; flex-wrap: wrap;
}
ul.menu li{
    position: relative; flex-grow: 1; margin: 10px 10px; flex-basis: calc(50% - 20px); cursor: pointer;
}
ul.menu li:hover span{
    border-color: #000
}
ul.menu li:nth-child(even){
    margin-left: 10px;
}
ul.menu li:nth-child(odd){
    margin-right: 10px;
}
ul.menu li span{
    display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--cores-cinza); border-radius: 5px; 
    padding: 5px; height: calc(100% - 10px); color: #000; font-family: 'Forte'; font-size: 12px;  color: var(--cores-preto);
    text-align: center; text-transform: uppercase; transition: border .3s;
}
ul.menu li span img{
    display: block; margin: 0px auto; margin-bottom: 10px; height: 60px;
}
ul.menu .badge{
    position: absolute; top: 10px; right: 10px !important;
}
ul.menu .mdi{
    margin-bottom: 10px; font-size: 40px; color: var(--cores-bege);
}
.inicial li span{
    padding: 10px 5px 20px !important;
}

/* Disposição do conteúdo no formato cartão */
.cartao{
    position: relative; display: block; border: 1px solid var(--cores-cinza); border-radius: 5px; padding: 10px;
}
.cartao h3{
    margin-top: 10px; font-size: 14px; text-transform: uppercase; text-align: center; color: #000;
}
.cartao p{
    font-size: 18px; color: var(--cores-cinza-escuro); text-align: center;
}
.cartao .badge{
    position: absolute; right: 10px; top: 10px;
}
.cartao table{
    width: 100%;
}

/* Badges de totais */
.badge{
    display: inline-block; border-radius: 13px; width: 26px; height: 26px; background-color: var(--cores-vermelho); color: #fff; text-align: center; font-family: 'Forte'; font-size: 14px; line-height: 25px;
}
.badge[data-valor=""],.badge[data-valor="0"]{
    display: none;
}

/* Tabelas */
.tabela{
    display: table; border-collapse: collapse; width: 100%;
}
.tabela tbody tr td{
    padding: 10px 5px; border-bottom: 1px solid var(--cores-cinza);
}

/* Formulários */
.formulario{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;
}
.formulario div{
    position: relative; margin-bottom: 15px; flex-basis: 100%;
}
.formulario div.col2{
    flex-basis: 48%;
}
.formulario div.col3{
    flex-basis: 36%;
}
.formulario div.col4-off{
    flex-basis: 72%;
}
.formulario div.col4{
    flex-basis: 24%;
}
.formulario div > label:not(.check) {
    position: absolute; top: 10px; left: 10px; font-size: 9px; text-transform: uppercase; color: var(--cores-bege)
}
.formulario div > label.check input{
    float: left; margin: 1px 6px 0px 0px;
}
.formulario input[type=text], .formulario input[type=password], .formulario select, .formulario textarea{
    box-sizing: border-box; border-radius: 1px; border: 1px solid var(--cores-cinza); padding: 13px 9px 0px; width: 100%; 
    height: 50px; font-size: 16px; color: #000
}
.formulario select{
    padding: 13px 5px 0px
}
.formulario > div h3{
    margin: 0px;
}
.formulario button, .botao{
    border-radius: 1px; height: 48px; width: 100%; font-size: 14px; font-family: 'Forte';
}
.formulario .erro{
    border-color: var(--cores-vermelho) !important; color: var(--cores-vermelho) !important
}
.formulario .destacar input{
    border-color: var(--cores-verde) !important; 
}
.formulario .destacar label{
    color: var(--cores-verde) !important;
}
button.com-borda{
    border: 2px solid #000; background-color: #fff; color: #000;
}

/* Botões */
.botao-flutuante{
    position: fixed; display: flex; justify-content: center; align-items: center; border-radius: 27px !important; width: 54px; height: 54px; background-color: #000; font-family: 'Forte'; font-size: 20px; color: #fff;
    -webkit-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.3);
}
.botao-flutuante img{
    height: 70%;
}

/* Listas */
.lista{
    flex-grow: 1; margin: 10px 20px 20px;
}
.lista > .cartao{
    margin-bottom: 20px; cursor: pointer; transition: border .3s;
}
.lista > .cartao:hover{
    border-color: #000; 
}

/* Corpo de um pedido */
.pedido{
    display: flex; flex-grow: 1; flex-direction: column; margin-top: 10px;
}
.pedido > header{
    height: 40px; padding: 0px 20px;
}
.pedido > header li{
    display: inline-block; margin-right: 5px; padding-right: 15px; background: url(../imagens/seta-cinza.png) 98% 50%  no-repeat; background-size: 6px auto; color: var(--cores-bege); font-size: 11px; text-transform: uppercase;
}
.pedido > header li:last-child{
    padding-right: 0px; background: none;
}
.pedido > div{
    position: relative; flex-grow: 1; padding: 0px 20px 50px; overflow-x: hidden; overflow-y: auto; z-index: 1;
}
.pedido > footer{
    position: relative; padding: 10px 20px; height: 80px; border-top: 1px solid #d7d7d7; background-color: var(--cores-cinza)
}
.pedido > footer > div:first-child{
    position: absolute; left: 20px; top: -41px; border-bottom: 1px solid var(--cores-verde); height: 40px; width: calc(100% - 40px); background-color: #fff; font-size: 15px; font-family: 'Forte'; color: var(--cores-verde); text-align: center; z-index: 2; line-height: 38px;
}
.pedido > footer li{
    display: inline;
}

/* Lista de ações simples */
ul.acoes{
    display: flex; flex-direction: column;
}
ul.acoes li{
    border-bottom: 1px solid var(--cores-cinza); padding: 10px 0px; font-size: 18px; color: var(--cores-bege); cursor: pointer;
    transition: color .3s;
}
ul.acoes li:hover{
    color: #000
}
ul.acoes li img{
    float: left; margin-right: 10px; width: 20px;
}
ul.acoes li:last-child{
    border-bottom: none;
}

/* Lista de itens */
.itens{
    flex-wrap: 1; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px 20px 0px;
}
.itens li{
    flex-basis: 47%;
}
.itens li img{
    width: 100%;
}
.itens li h3{
    margin: 10px 0px 5px; font-size: 13px; color: var(--cores-cinza-escuro); text-align: center; text-transform: uppercase;
}
.itens li p{
    margin: 0px 0px 0px; color: var(--cores-preto); font-size: 11px; text-align: center;
}
.itens li .preco{
    margin: 5px 0px 15px; font-family: 'Forte';
}
.itens li .preco em{
    text-decoration: line-through; color: var(--cores-cinza-escuro);
}

/* Elemento de espera de carregamento de página */
.aguardar {
    position: fixed; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; 
    background-color: rgba(0, 0, 0, 0.1); opacity: 0; z-index: 200;
}
.aguardar > div{
    display: flex; justify-content: center; align-items: center; border-radius: 21px; width: 42px; height: 42px; background-color: var(--cores-cinza); 
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3);
}
.aguardar > div img{
    width: 85%; animation-duration: 1s; animation-name: aguardar-animacao; animation-iteration-count: infinite; transform-origin: 50% 50%;
    
}
@keyframes aguardar-animacao {
    from { transform: rotate(0deg)  }    
    to   { transform: rotate(360deg)}
}

/* Elemento de espera de carregamento de página */
.alerta {
    position: fixed; top: 0px; left: 0px; width: 100%; z-index: 201;    
}
.alerta > div h1{
    margin-bottom: 5px; font-size: 11px; text-transform: uppercase; color: var(--cores-verde);
}
.alerta > div p{
    margin-bottom: 0px; font-family: 'Italico'; font-size: 18px; color: #000;
}
.alerta > div{
    margin: 0px auto; margin-top: 20px; border-left: 6px solid var(--cores-verde); padding: 15px 10px 20px; width: calc(100% - 61px); min-height: 42px; 
    background-color: var(--cores-cinza);
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3);
    animation-name: alerta-animacao; animation-duration: .3s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.72, -0.22, 0.18, 1.2);
}
@keyframes alerta-animacao {
    from { transform: translateX(300px); opacity: 0;}
    to   { transform: translateX(0px); opacity: 1;  }
}
.alerta.erro > div{
    border-color: var(--cores-cinza-escuro) !important; background-color: var(--cores-vermelho);
}
.alerta.erro > div h1{
    color: var(--cores-cinza-escuro);
}
.alerta.erro > div p{
    color: #fff;
}

/* Elemento de sobreposição para abertura de funcionalidades sobre a página, ex: modal */
.modal {
    position: fixed; display: flex; justify-content: center; align-items: center; top: 0px; left: 0px; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.5); overflow: hidden; opacity: 0; z-index: 100;
}
.modal.latdir{
    justify-content: flex-end;
}
.modal.oculto{
    display: none;
}
.modal > div{
    position: relative; display: flex; flex-direction: column; border-radius: 5px; width: 80%; min-height: 250px; max-height: 70%;
    max-width: 380px; background-color: #fff; z-index: 101; opacity: 1; transition: transform .3s, opacity .3s; transition-timing-function: cubic-bezier(0.04, 0.75, 0.32, 1.39);
    -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.3);
}
.modal > div.oculto{
    transform: translateY(100%); opacity: 0;
}
.modal.latdir > div{
    position: relative; border-radius: 0px; width: 88%; min-height: auto !important; max-height: 100% !important; height: 100%;
    max-width: 380px; background-color: #fff; z-index: 101; opacity: 1;
    transition-timing-function: cubic-bezier(0.04, 0.75, 0.3, 0.92);
}
.modal.latdir > div.oculto{
    transform: translateX(100%); opacity: 0;
}
.modal > div > header{
    padding: 20px; height: 20px;
}
.modal > div > header h2{
    font-family: 'Normal';
}
.modal > div > div{
    flex-grow: 1; padding: 20px; overflow-y: auto;
}
.modal > div > header button{
    float: right;
}
.modal > div > footer{
    display: flex; flex-direction: row; justify-content: space-between; border-top: 1px solid var(--cores-cinza); padding: 10px 20px 20px; height: 40px;
}
.modal > div > footer button{
    flex-basis: 47%; float: right; min-width: 60px; width: auto !important; height: 40px;
}

/* Elemento de abas */
.abas{
    display: flex; border-bottom: 1px solid var(--cores-cinza); flex-direction: row; justify-content: space-between; 
}
.abas li{
    position: relative; bottom: -1px; flex-grow: 1; border-bottom: 1px solid transparent; padding: 8px; text-align: center; font-family: 'Forte'; color: var(--cores-cinza-escuro);
}
.abas li.ativo{
    border-bottom-color: var(--cores-verde); color: var(--cores-verde);
}
.aba{
    display: none; padding: 15px 0px; 
}

/* Elemento de sobreposição para exibição de detalhe de um item */
.detalhe {
    position: fixed; display: flex; justify-content: center; align-items: flex-end; top: 0px; left: 0px; width: 100%; height: 100%; 
    background: transparent; overflow: hidden; opacity: 1; z-index: 100;
}
.detalhe.oculto{
    display: none;
}
.detalhe > div{
    position: relative; display: flex; flex-direction: column; border-radius: 20px; width: 100%; height: 70%;
    background-color: rgba(255, 255, 255, 0.94); z-index: 101;
    transition: transform .4s; transition-timing-function: cubic-bezier(0.81, 0.28, 0.36, 0.96);
    -webkit-box-shadow: 0px -2px 18px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px -2px 18px 7px rgba(0, 0, 0, 0.1); box-shadow: 0px -2px 18px 7px rgba(0, 0, 0, 0.1);
}
.detalhe > div.oculto{
    transform: translateY(100%);
}
.detalhe > div header{
    position: relative;
}
.detalhe > div header button{
    position: absolute; top: -10px; left: 50%; margin-left: -25%; border: 0px; border-radius: 5px; width: 50%; height: 10px; background-color: var(--cores-preto);
}
.detalhe > div{
    padding: 20px;
}
.detalhe > div h1{
    margin-top: 20px; margin-bottom: 15px; font-size: 18px;
}
.detalhe > div h2{
    margin-top: 10px; margin-bottom: 5px; font-size: 15px; color: var(--cores-cinza-escuro);
}
.detalhe p{
    margin-bottom: 15px; font-size: 16px;
}
.detalhe p.codigo{
    float: right; margin: 19px 0px 0px 10px; font-size: 12px;
}
.detalhe > div p em{
    text-decoration: line-through; color: var(--cores-cinza-escuro);
}
.detalhe > div > div{
    overflow-y: scroll;
}
.detalhe > div ul li{
    display: inline-block; margin-right: 15px; font-size: 16px;
}
.detalhe > div ul li:last-child{
    margin-right: 0px;
}
.detalhe > div ul.cores {
    margin-bottom: 15px;
}
.detalhe > div ul.cores li span{
    display: inline-block; margin: -3px 6px 0px 0px; width: 10px; height: 10px; border-radius: 10px; border: 2px solid var(--cores-cinza-escuro); vertical-align: middle;
}
.detalhe > div ul.cores li.ativo span{
    background-color: #000;
}
.detalhe > div ul.tamanhos{
    margin-bottom: 5px;
}
.detalhe > div ul.tamanhos li{
    position: relative; display: inline-block; margin-right: 10px; margin-bottom: 10px; width: 34px; height: 34px; border: 2px solid var(--cores-cinza-escuro); background-color: #fff; font-size: 16px; text-align: center; line-height: 32px;
}
.detalhe > div ul.tamanhos li.zero{
    border-color: var(--cores-cinza); color: var(--cores-cinza) !important;
}
.detalhe > div ul.tamanhos li.ativo{
    border-color: var(--cores-preto); color: var(--cores-preto) !important; background-color: var(--cores-cinza);
}
.detalhe > div ul.tamanhos li .rota{
    position: absolute; bottom: 20px; left: -2px; height: 35px;
}
.detalhe > div table{
    display: none; border-collapse: collapse; margin-bottom: 60px; width: 100%;
}
.detalhe > div table th{
    border-bottom: 1px solid var(--cores-cinza); color: var(--cores-cinza-escuro);
}
.detalhe > div table th, .detalhe > div table td{
    padding: 8px 5px 8px; text-align: center;
}
.detalhe > div table th:first-child, .detalhe > div table td:first-child{
    text-align: left;
}
.detalhe > div table td{
    border-bottom: 1px solid var(--cores-cinza);
}
.detalhe > div table tbody tr.ativo td{
    background-color: #000; color: #fff;
}
.detalhe > div p.indisponivel{
    display: none; margin-top: 10px; color: var(--cores-vermelho); font-family: 'Forte';
}
.detalhe footer{
    position: absolute; bottom: -100px; left: 0px; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 20px; 
    display: flex; width: calc(100% - 40px); justify-content: center; align-items: center; background-color: #fff; 
    -webkit-box-shadow: 0px -2px 18px 7px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px -2px 18px 7px rgba(0, 0, 0, 0.1); box-shadow: 0px -2px 18px 7px rgba(0, 0, 0, 0.1);
    transition: bottom .3s;
}
.detalhe footer.ativo{
    bottom: 0px
}
.detalhe footer .redondo{
    border-radius: 24px; width: 50px; height: 35px; font-size: 22px; line-height: 22px;
}
.detalhe footer .quantidade{
    margin: 0px 5px; width: 50px; height: 48px; text-align: center; font-size: 20px; line-height: 48px;
}
.detalhe footer #adicionar_sacola{
    margin-left: 10px;
}
.detalhe #adicionar_refssacola{
    margin-left: 0px; width: 100%;
}
.botoes-varejo{
    display: flex;
}
.detalhe .atacado{
    padding-bottom: 60px;
}
.detalhe .atacado > ul{
    float: left; width: 30%;
}
.detalhe .atacado > ul li{
    display: block; height: 68px;
}
.detalhe .atacado > div{
    max-width: 70%; overflow: auto;
}
.detalhe .atacado div ul{
    display: flex; flex-wrap: nowrap; text-align: center;
}
.detalhe .atacado div li strong{
    color: var(--cores-verde);
}
.detalhe .atacado div li span{
    display: block; margin-bottom: 10px; width: 50px; height: 40px; text-align: center; font-size: 26px; font-weight: 700;
}

/* Página de Login e Carregamento */
main.login{
    max-width: 600px;
}
main.login .header, main.login .container {
    display: flex; flex-grow: 1; padding: 20px
}
main.login .header{
    justify-content: center; align-items: center;
}
main.login .header img{
    width: 60%; max-height: 70%; max-width: 280px;
}
main.login .container .formulario{
    flex-grow: 1; align-content: flex-start;
}
main.login .container .formulario:last-child{
    display: none;
}
main.login .footer{
    padding: 20px
}


/* Página de Pedido */
.pedido .botao-flutuante{
    bottom: 210px; right: 20px;
}

/* Página de Busca */
.busca-leitor{
    margin-top: -82px; right: 20px;
}
main.busca .inicial{
    flex-grow: 1; display: flex; flex-direction: column; padding: 20px; width: 100%;
}
main.busca .inicial > div{
    flex-grow: 1;
}
main.busca .itens{
    display: none;
}
#botao_subir{
    bottom: 80px; right: 20px
}

/* Página de Lista da Vez */
main.listavez section{
    display: flex; flex-direction: column; align-items: center; padding: 10px 20px 20px 20px;
}
main.listavez .vendedor{
    width: 100%; height: 50px;
}
main.listavez .acoes{
    flex-grow: 1; margin-top: 5px; width: 100%; overflow-y: scroll;
}
main.listavez .rodape{
    width: 100%;
}
main.listavez .vendedor img{
    margin-right: 10px; vertical-align: middle;
}
main.listavez .vendedor span{
    font-family: 'Forte'; font-size: 17px; line-height: 120%; color: var(--cores-marrom);
}
main.listavez .acoes .aba h3{
    font-size: 14px; color: var(--cores-bege);
}
main.listavez .acoes .aba ul{
    margin-top: 10px;
}
main.listavez .acoes .aba li label{
    display: block;
}
main.listavez .acoes .aba li{
    padding: 1.3vh 0px; border-bottom: 1px dashed var(--cores-cinza); font-size: 18px; vertical-align: middle;
}
main.listavez .acoes .aba li input{
    margin-right: 5px;
}
main.listavez .acoes .aba li:last-child{
    border-bottom: 0px;
}
main.listavez .rodape textarea{
    margin: 0px 0px 5px; border: 1px solid var(--cores-cinza); width: 100%;
}
main.listavez .historico span{
    font-size: 11px; color: var(--cores-marrom);
}
main.listavez .historico p{
    padding-bottom: 10px; border-bottom: 1px dashed var(--cores-cinza); color: var(--cores-cinza-escuro);
}

/* Página Sacola */
.sacola > section{
    flex-direction: column;
}
.sacola > section h1{
    padding: 10px 20px 0px; margin: 0px; font-size: 16px; color: var(--cores-marrom);
}
.sacola > section ul{
    display: flex; flex-direction: column; padding: 20px;
}
.sacola > section ul li{
    margin-bottom: 20px; border-bottom: 1px dotted var(--cores-cinza); padding-bottom: 20px;
}
.sacola > section ul li:last-child{
    border-bottom: 0px
}
.sacola > section ul li img.item{
    float: left; width: 80px;
}
.sacola > section ul li > div{
    margin-left: 100px;
}
.sacola > section ul li button{
    float: right; margin-left: 6px; border-radius: 13px; width: 26px; height: 26px; background-color: var(--cores-vermelho);
}
.sacola > section ul li button img{
    width: 75%;
}
.sacola > section ul li .loja strong{
    color: var(--cores-verde);
}
.sacola > section ul li.recuo div{
    height: 140px;
}
.sacola > section ul p.detalhes{
    font-family: 'Forte'; font-size: 13px; color: var(--cores-cinza-escuro);
}
.sacola > section ul p.loja{
    margin-bottom: 0px; font-size: 13px; color: var(--cores-cinza-escuro)
}
.sacola > section ul p.loja strong{
    font-family: 'Normal'; font-weight: normal;
}
.sacola > section ul .preco em{
    text-decoration: line-through; color: var(--cores-cinza-escuro);
}
.sacola > section ul .preco strong{
    color: var(--cores-marrom);
}
.sacola > section ul li img.rota{
    margin-left: -5px; width: 15px; vertical-align: bottom;
}
.sacola .botao-flutuante{
    position: fixed; right: 20px; bottom: 80px;
}
.sacola #botao_lixeira{
    bottom: 150px; background-color: var(--cores-vermelho);
}
.sacola .nenhum{
    flex-grow: 1; display: none; justify-content: center; align-items: center; min-height: 100%;
}
.sacola .nenhum h2{
    color: var(--cores-cinza-escuro);
}
.sacola .referencia{
    color: var(--cores-marrom);
}

/* Página de Cliente */
main.clientes > section > div{
    flex-grow: 1; display: none; flex-direction: column; padding: 20px; width: 100%;
}
main.clientes > section > div h4{
    margin-bottom: 0px; color: var(--cores-bege);
}
main.clientes > section > div h1{
    margin-bottom: 20px;
}
main.clientes > section > div .formulario{
    flex-grow: 1; color: var(--cores-cinza-escuro); font-size: 18px;
}
main.clientes > section > div h2{
    width: 100%; font-size: 30px; color: var(--cores-verde); text-align: center !important;
}
main.clientes > section > div h3{
    color: var(--cores-cinza-escuro);
}

/* Página de WMS */
main .wms-busca, main .wms-lista{
    flex-grow: 1; flex-direction: column; display: flex; padding: 10px 20px 0px !important; width: 100%;
}
main .wms-busca{
    padding: 10px 20px 20px !important;
}
main .wms-busca .formulario{
    flex-grow: 1;
}
main .wms-busca .formulario input{
    text-transform: uppercase;
}
main .wms-lista{
    display: block;
}
main .wms-lista .nenhum{
    flex-grow: 1; display: none; justify-content: center; align-items: center; min-height: 100%;
}
main .wms-lista .nenhum h2{
    color: var(--cores-cinza-escuro);
}
main .wms-lista ul{
    display: flex; flex-direction: column; margin-top: 0px;
}
main .wms-lista ul li{
    display: flex; margin-bottom: 20px; border-bottom: 1px dotted var(--cores-cinza); padding-bottom: 20px;
}
main .wms-lista ul li:last-child{
    border-bottom: 0px
}
main .wms-lista ul li img.item{
    width: 28%;
}
main .wms-lista ul li img.carregar{
    margin: 30px 0px 0px 30px; width: 52px !important; height: 52px;
}
main .wms-lista ul li > div{
    margin-left: 25px; flex-grow: 1; display: flex; flex-direction: column;
}
main .wms-lista ul li button img{
    width: 75%;
}
main .wms-lista ul h3{
    font-size: 18px; color: var(--cores-bege);
}
main .wms-lista ul p.detalhes{
    font-size: 16px;
}
main .wms-lista ul .qtde{
    flex-grow: 1; display: flex; justify-content: space-between; align-items: flex-end; 
    margin-bottom: -4px !important; color: var(--cores-cinza-escuro); font-size: 13px !important; text-align: right;
}
main .wms-lista ul .qtde strong{
    color: var(--cores-preto); font-size: 30px;
}
main .wms-lista .form-qtde{
    position: relative;
}
main .wms-lista .form-qtde .qtde-rotulo{
    left: calc(50% - 12px) !important;
}
main .wms-lista .form-qtde .qtde-campo{
    margin-left: 60px; width: calc(100% - 120px); 
}
main .wms-lista .form-qtde input[type=text]{
    text-align: center; font-family: 'Forte'; text-transform: uppercase;
}
main .wms-lista .form-qtde button{
    position: absolute; top: 66px; width: 50px;
}
main .wms-lista .form-qtde button.qtde-mais{
    right: 0px;
}
main .wms-lista .referencia{
    display: flex; flex-direction: column; flex-grow: 1; padding-bottom: 20px;
}
main .wms-lista .referencia .formulario{
    flex-grow: 1;
}

.autocompletar{
    position: relative; display: none; height: 1px;
}
.autocompletar > div{
    position: absolute; top: 0px; left: 0px; border: 1px solid var(--cores-verde); padding: 10px; width: calc(100% - 22px); max-height: 200px; 
    overflow-y: scroll; z-index: 1001;
}
.autocompletar > div ul li{
    display: block; margin-bottom: 5px; border-bottom: 1px dashed var(--cores-cinza); padding: 10px 0px; font-size: 18px; color: #000; cursor: pointer;
}
.autocompletar > div ul li strong{
    color: var(--cores-marrom) !important; font-family: 'normal' !important; font-weight: normal !important;
}
.autocompletar > div ul li:first-child{
    padding-top: 0px;
}
.autocompletar > div ul li:last-child{
    padding-bottom: 0px; border-bottom: 0px;
}
.autocompletar > div ul li:last-child{
    margin-bottom: 0px;
}
.autocompletar > div ul li strong{
    color: var(--cores-bege)
}

main.reservas section{
    display: flex; flex-direction: column; padding: 20px;
}
main.reservas section>div{
    flex-grow: 1; margin-bottom: 20px; overflow-y: auto;
}
main.reservas .botao{
    min-height: 40px;
}

main.listagem section{
    display: flex; flex-direction: column; padding: 20px;
}
main.listagem section>div{
    flex-grow: 1; margin-bottom: 20px; overflow-y: auto;
}
main.listagem .botao{
    min-height: 40px;
}