@charset "utf-8";

#checkout { float: left; width: 100%; padding: 0 0 150px;}
#checkout .topo { float: left; width: 100%; padding: 10px 0 9px; background-color: rgb(255 255 255); position: relative;}
#checkout .topo .logo { float: left; width: 100%; text-align: center; font-size: 0;}
#checkout .topo .logo img { max-width: 90%;}
#checkout .topo .voltar { position: absolute; top: 0; left: 2%; padding: 40px 0 40px 25px; line-height: 0; background-image: url('../../imagens/geral/voltar-a.png'); background-position: 0 50%; background-repeat: no-repeat;}

#checkout .conteudo { float: left; width: 70%; padding: 30px 15% 0; min-height: 300px;}

#checkout .cupom { float: left; outline: 1px solid rgb(0 0 0 / 10%); background-color: rgb(255, 255, 255);}
#checkout .cupom .nome { float: left; width: 100%; font-weight: bold; font-size: 1.1em;}
#checkout .cupom .inserir { float: left; width: 100%; margin: 5px 0 0;}
#checkout .cupom .inserir .campo { float: left; width: 200px; height: 40px; padding: 10px; outline: 1px solid rgb(90 90 90); outline-offset: -1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#checkout .cupom .inserir .ok { float: left; width: 40px; height: 40px; margin: 0 0 0 5px; background-color: rgb(25 141 77); font-weight: bold; font-size: 1em; color: rgb(255 255 255);}
#checkout .cupom .inserir .ok:hover { background-color: rgb(19 128 47);}

#checkout .listar { float: left; width: 100%; position: relative;}
#checkout .listar .cupom { width: 96%; padding: 15px 2%; margin: 0 0 15px;}
#checkout .listar .tab { float: left; width: 96%; padding: 15px 2% 40px; margin: 2px 0; background-color: rgb(255 255 255); outline: 1px solid rgb(0 0 0 / 5%); position: relative;}
#checkout .listar .tab .imagem { float: left; width: 90px;}
#checkout .listar .tab .imagem img { float: left; width: 100%;}
#checkout .listar .tab .detalhes { float: left; width: 350px; margin: 0 0 0 10px;}
#checkout .listar .tab .detalhes .nome { float: left; width: 100%; font-size: 1.2em; line-height: 1.3;}
#checkout .listar .tab .detalhes .nome:hover { text-decoration: underline;}
#checkout .listar .tab .detalhes .variacao { float: left; padding: 4px 7px; margin: 8px 2px 2px 0; outline: 1px solid; font-size: 1.1em;}
#checkout .listar .tab .quantidade { position: absolute; width: 145px; top: 50%; right: 200px; margin: -20px 0 0;}
#checkout .listar .tab .quantidade .qtd { float: left; width: 50px; height: 36px; padding: 2px 0 0; margin: 0 5px; outline: 1px solid rgb(15 15 15); text-align: center; font-weight: bold;}
#checkout .listar .tab .quantidade .acao { float: left; width: 40px; height: 40px; background-color: rgb(0 0 0 / 10%); background-position: 50%; background-repeat: no-repeat;}
#checkout .listar .tab .quantidade .acao.menos { background-image: url('../../imagens/site/checkout-menos.png');}
#checkout .listar .tab .quantidade .acao.mais { background-image: url('../../imagens/site/checkout-mais.png');}
#checkout .listar .tab .quantidade .acao:hover { background-color: rgb(0 0 0 / 15%);}
#checkout .listar .tab .quantidade .disponiveis { float: left; width: 100%; margin: 5px 0 0; text-align: center; color: rgb(90 90 90);}
#checkout .listar .tab .valor { position: absolute; top: 50%; right: 2%; margin: -15px 0 0; font-size: 1.5em;}
#checkout .listar .tab .remover { position: absolute; bottom: 8px; left: 2%; font-weight: normal; color: rgb(90 90 90);}
#checkout .listar .tab .remover:hover { color: rgb(179 43 43);}
#checkout .listar .tab.indisponivel .imagem { opacity: 0.4;}
#checkout .listar .tab.indisponivel .detalhes { opacity: 0.4;}
#checkout .listar .tab.indisponivel .valor { opacity: 0.4;}
#checkout .listar .nenhum { float: left; margin: 20px 0 0 20px; font-size: 1.1em; color: rgb(90 90 90);}

#checkout .finalizar { float: left; width: 100%;}
#checkout .finalizar .cupom { width: 90%; padding: 10px 5%; margin: 0 0 5px;}
#checkout .finalizar .endereco { float: left; width: 90%; padding: 20px 5%; outline: 1px solid rgb(0 0 0 / 10%); background-color: rgb(255, 255, 255);}
#checkout .finalizar .endereco .nome { float: left; width: 100%; font-weight: bold; font-size: 1.1em;}
#checkout .finalizar .endereco .local { float: left; width: 100%; padding: 10px 0; font-size: 1.1em;}
#checkout .finalizar .endereco .alterar { float: left; width: 100%; font-size: 1.1em; color: rgb(0 135 190);}
#checkout .finalizar .endereco .alterar:hover { text-decoration: underline;}
#checkout .finalizar .pacote { float: left; width: 100%; margin: 30px 0 0;}
#checkout .finalizar .pacote .numero { float: left; width: 100%; font-size: 1.2em;}
#checkout .finalizar .pacote .frete { float: left; width: 90%; padding: 10px 5%; outline: 1px solid rgb(0 0 0 / 10%); background-color: rgb(255, 255, 255); font-size: 1em; position: relative;}
#checkout .finalizar .pacote .frete .prazo { float: left; margin: 0 100px 0 0; color: rgb(90 90 90);}
#checkout .finalizar .pacote .frete .valor { position: absolute; top: 50%; right: 5%; margin: -12px 0 0; color: rgb(90 90 90);}
#checkout .finalizar .pacote .frete .valor b { padding: 0 5px; background-color: rgb(121 255 168); font-weight: normal; color: rgb(15 15 15);}
#checkout .finalizar .pacote .ecupom { float: left; width: 90%; padding: 10px 5%; outline: 1px solid rgb(0 0 0 / 10%); background-color: rgb(255, 255, 255); font-size: 1em; position: relative;}
#checkout .finalizar .pacote .ecupom i { font-style: normal; color: rgb(187 80 10);}
#checkout .finalizar .pacote .produto { float: left; width: 90%; min-height: 100px; padding: 20px 5%; outline: 1px solid rgb(0 0 0 / 10%); background-color: rgb(255, 255, 255); position: relative;}
#checkout .finalizar .pacote .produto .imagem { position: absolute; width: 100px; height: 100px; top: 20px; left: 5%; text-align: center; overflow: hidden; font-size: 0;}
#checkout .finalizar .pacote .produto .imagem img { height: 100px;}
#checkout .finalizar .pacote .produto .detalhes { float: left; margin: 0 0 0 110px; color: rgb(50 50 50);}

#checkout .pagamento { float: left; width: 100%;}
#checkout .pagamento .opcoes { float: left; width: 100%;}
#checkout .pagamento .opcoes .tab { float: left; width: 100%; margin: 10px 0; outline: 1px solid rgb(0 0 0 / 5%); background-color: rgb(255 255 255); background-position: 10px 50%; background-repeat: no-repeat; position: relative;}
#checkout .pagamento .opcoes .tab.pix { background-image: url('../../imagens/site/pagamento-pix.png');}
#checkout .pagamento .opcoes .tab.boleto { background-image: url('../../imagens/site/pagamento-boleto.png');}
#checkout .pagamento .opcoes .tab.cartao { background-image: url('../../imagens/site/pagamento-cartao.png');}
#checkout .pagamento .opcoes .tab .detalhes { float: left; padding: 20px 0 20px 70px; color: rgb(90 90 90); line-height: 1.3;}
#checkout .pagamento .opcoes .tab .detalhes b { font-size: 1.4em;}
#checkout .pagamento .opcoes .tab .detalhes strong { font-weight: normal;}
#checkout .pagamento .opcoes .tab:hover { -webkit-box-shadow: 0 1px 12px 0 rgb(0 0 0 / 15%); -moz-box-shadow: 0 1px 12px 0 rgb(0 0 0 / 15%); box-shadow: 0 1px 12px 0 rgb(0 0 0 / 15%);}

#checkout .pagamento .qrcode { float: left; width: 100%; margin: 20px 0 10px; text-align: center;}
#checkout .pagamento .qrcode img { width: 200px; padding: 5px; outline: 1px solid rgb(90 90 90 / 20%); background-color: rgb(255 255 255);}
#checkout .pagamento .copiaecola { float: left; width: 100%; margin: 10px 0; text-align: center;}
#checkout .pagamento .copiaecola .copiar { float: left; width: 50%; padding: 17px 0 15px; margin: 0 25%; background-color: rgb(0, 171, 199, 30%); font-weight: normal; font-size: 1.1em; color: rgb(0 0 0 / 80%);}
#checkout .pagamento .copiaecola .copiar:hover { background-color: rgb(147, 224, 255);}
#checkout .pagamento .copiaecola .copiar.ok { background-color: rgb(255, 227, 147);}
#checkout .pagamento .barcode { float: left; width: 100%; padding: 15px 0; margin: 40px 0 20px; outline: 1px solid rgb(0 0 0 / 10%); background-color: rgb(0 0 0 / 5%); text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(90 90 90);}
#checkout .pagamento .pdf { float: left; width: 50%; padding: 17px 0 15px; margin: 0 25%; background-color: rgb(25, 141, 77); text-align: center; font-size: 1.1em; color: rgb(255 255 255);}
#checkout .pagamento .pdf:hover { background-color: rgb(19, 128, 47);}
#checkout .pagamento .escanear { float: left; width: 100%; margin: 20px 0 0;}
#checkout .pagamento .escanear h3 { float: left; width: 100%; text-align: center; font-size: 1.2em; color: rgb(90 90 90);}

#checkout .obrigado { float: left; width: 100%; margin: 50px 0;}
#checkout .obrigado h2 { float: left; width: 100%; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 2.5em; color: rgb(90 90 90);}
#checkout .obrigado h3 { float: left; width: 100%; margin: 10px 0 0; text-align: center; font-size: 1.4em; color: rgb(150 150 150);}
#checkout .obrigado h4 { float: left; width: 100%; padding: 30px 0 12px; text-align: center;}
#checkout .obrigado h4 a { padding: 12px 20px; background-color: rgb(25 141 77); font-weight: bold; color: rgb(255 255 255);}
#checkout .obrigado h4 a:hover { background-color: rgb(19 128 47);}

#checkout .avancar { position: fixed; width: 70%; bottom: 0; left: 0; padding: 20px 15% 18px; background-color: rgb(255 255 255);}
#checkout .avancar .infor { float: left; width: 350px; margin: 12px 0 0;}
#checkout .avancar .infor .frete { float: left; width: 100%;}
#checkout .avancar .infor .frete b { padding: 0 5px; background-color: rgb(121 255 168); font-weight: normal;}
#checkout .avancar .infor .frete strong:hover { color: rgb(0 135 190);}
#checkout .avancar .infor .ecupom { float: left; width: 100%;}
#checkout .avancar .infor .ecupom i { font-style: normal; color: rgb(187 80 10);}
#checkout .avancar .infor .total { float: left; width: 100%; font-size: 1.2em;}
#checkout .avancar .botao { float: right; padding: 20px 20px; background-color: rgb(25 141 77); font-weight: bold; font-size: 1.5em; color: rgb(255 255 255);}
#checkout .avancar .botao:hover { background-color: rgb(19 128 47);}

@media only screen and (max-width: 1200px){
  #checkout .listar .tab .quantidade { right: 160px;}
}
@media only screen and (max-width: 1100px){
  #checkout .listar .tab .quantidade { float: left; width: 100%; top: auto; right: auto; margin: 10px 0 0; position: relative;}
  #checkout .listar .tab .quantidade .disponiveis { text-align: left;}
  #checkout .listar .tab .valor { top: auto; bottom: 34px; margin: 0;}
}
@media only screen and (max-width: 1000px){
  #checkout .conteudo { width: 90%; padding: 30px 5%;}
}
@media only screen and (max-width: 800px){
  #checkout .pagamento .copiaecola .copiar { width: 100%; margin: 0;}
  #checkout .pagamento .pdf { width: 100%; margin: 0;}

  #checkout .avancar { padding: 10px 15% 8px;}
  #checkout .avancar .infor { float: left; width: 100%; margin: 0 0 5px;}
  #checkout .avancar .botao { width: 100%; padding: 12px 0; text-align: center;}
}
@media only screen and (max-width: 600px){
  #checkout .listar .tab .imagem { width: 22%;}
  #checkout .listar .tab .detalhes { float: right; width: 75%; margin: 0 0 5px;}
}
@media only screen and (max-width: 500px){
  #checkout .topo .voltar { width: 30px; height: 100%; padding: 0; font-size: 0;}
}