@charset "utf-8";

#auth { float: left; width: 100%; padding: 51px 0;}
#auth .centro { margin: 0 auto; width: 450px; max-width: 94%;}
#auth .form { padding: 30px;}
#auth .form .nomesi.m1 { margin: 0 0 14px;}
#auth .form .c1 { float: left; width: 100%; margin: 11px 0;}
#auth .form .nomecampo { font-size: 1.1em;}
#auth .form .campo { height: 40px; padding: 0 10px;}
#auth .form .campo.ci { padding: 0 10px 0 30px;}
#auth .form .campo::placeholder { font-size: 0;}
#auth .form .ico { position: absolute; width: 20px; height: 20px; top: 50%; left: 5px; margin: -10px 0 0;}
#auth .form .ico.email { background: url('../img/auth-email.png') 50% no-repeat;}
#auth .form .ico.senha { background: url('../img/auth-senha.png') 50% no-repeat;}
#auth .form .ico.chave { left: auto; right: 5px;}
#auth .form .ico.chave.mostrar { background: url('../img/auth-senha-mostrar.png') 50% no-repeat;}
#auth .form .ico.chave.ocultar { background: url('../img/auth-senha-ocultar.png') 50% no-repeat;}
#auth .form .instrucao { margin: 5px 0 0; text-align: center; color: rgb(240 0 0);}
#auth .form .submit { padding: 15px; background-color: rgb(0 150 130); text-transform: uppercase; font-weight: bold;}
#auth .form .submit:hover { background-color: rgb(0 170 100);}
#auth .opcoes { margin: 11px 0 0;}
#auth .opcoes .opcao { float: left; width: 100%; padding: 5px 0; text-align: center;}
#auth .opcoes .opcao:hover { background-color: rgb(90 90 90 / 10%);}

#minhaconta { float: left; width: 100%; padding: 31px 0;}
#minhaconta .submenu { background-color: rgb(90 90 90 / 20%);}
#minhaconta .submenu .nome { padding: 10px 10px 8px; font-weight: bold; text-transform: uppercase;}
#minhaconta .submenu .um { padding: 20px 10px; border-top: 1px solid rgb(90 90 90 / 20%); text-align: left;}
#minhaconta .submenu .um:hover { background-color: rgb(90 90 90 / 10%);}

#minhaconta .perfil { float: left; width: 100%;}
#minhaconta .perfil .reusmo { display: flex; flex-wrap: wrap; justify-content: space-between; float: left; width: 100%;}
#minhaconta .perfil .tabe { float: left; width: 33.33%; padding: 10px; outline: 1px solid rgb(90 90 90 / 20%);}
#minhaconta .perfil .bloco { float: left; width: 100%; padding: 10px; margin: 0 0 5px;}
#minhaconta .perfil .janela { float: left; width: 100%; padding: 5px; outline: 1px solid rgb(90 90 90 / 30%); position: relative;}
#minhaconta .perfil .itens { float: left; width: 100%; margin: 11px 0;}
#minhaconta .perfil .itens .item { float: left; width: 100%; padding: 5px 0;}
#minhaconta .perfil .itens .item em { float: left; width: 100%; font-style: normal; font-size: 0.9em; opacity: 0.7;}
#minhaconta .perfil .itens .item b { float: left; width: 100%;}
#minhaconta .perfil .itens .item span { float: left; width: 100%;}
#minhaconta .perfil .alterar { float: left; padding: 13px 7px; background-color: rgb(255 187 0 / 50%);}
#minhaconta .perfil .alterar:hover { background-color: rgb(255 187 0 / 60%);}
#minhaconta .perfil .editar { float: left; padding: 13px 7px; background-color: rgb(70 70 70); color: rgb(255 255 255) !important;}
#minhaconta .perfil .editar:hover { background-color: rgb(50 50 50);}
#minhaconta .perfil .deletar { position: absolute; top: 5px; right: 5px;}
#minhaconta .perfil .deletar .submit { float: left; width: 20px; height: 20px; background-color: rgb(230 0 50); font-weight: bold; font-size: 0.8em; color: rgb(250 250 250) !important;}
#minhaconta .perfil .deletar .submit:hover { background-color: rgb(255 0 0);}

#minhaconta .compras { float: left; width: 100%;}
#minhaconta .compras .previa { float: left; width: 100%; padding: 10px; margin: 8px 0;}
#minhaconta .compras .previa .data { float: left; width: 100%; padding: 5px 0 10px; border-bottom: 1px solid rgb(90 90 90 / 30%); opacity: 0.7;}
#minhaconta .compras .previa .str { float: left; width: 100%; padding: 0 110px 0 0; margin: 10px 0 0; position: relative;}
#minhaconta .compras .previa .infor { float: left; width: 100%;}
#minhaconta .compras .previa .infor h3 { float: left; width: 100%; margin: 2px 0; font-size: 1em;}
#minhaconta .compras .previa .botoes { position: absolute; width: 100px; top: 0; right: 0;}
#minhaconta .compras .previa .botoes .button { float: left; width: 100%; padding: 15px 0; font-weight: bold; font-size: 0.9em;}
#minhaconta .compras .previa .botoes .button.pagar { margin: 0 0 5px; background-color: rgb(0 150 130); color: rgb(255 255 255) !important;}
#minhaconta .compras .previa .botoes .button.pagar:hover { background-color: rgb(0 170 100);}
#minhaconta .compras .previa .botoes .button.ver { outline: 1px solid rgb(90 90 90);}
#minhaconta .compras .previa .botoes .button.ver:hover { background-color: rgb(90 90 90 / 20%);}
#minhaconta .compras .zerado { float: left; width: 100%; margin: 5px 0; opacity: 0.8;}

#minhaconta .retornar { float: left; padding: 13px 7px; margin: 5px 0 0; background-color: rgb(255 187 0 / 50%);}
#minhaconta .retornar:hover { background-color: rgb(255 187 0 / 60%);}

#minhaconta .sair { padding: 8px; margin: 16px 0 0; text-align: left; font-size: 0.9em;}
#minhaconta .sair:hover { text-decoration: underline;}

#checkout { float: left; width: 100%; padding: 31px 0;}
#checkout .centro { margin: 0 auto; width: 800px; max-width: 94%;}
#checkout .tabe { float: left; width: 100%; padding: 10px; margin: 11px 0; outline: 1px solid rgb(90 90 90 / 20%);}
#checkout .produtos .qtd { width: 90px;}
#checkout .produtos .nun { float: left; width: 40px; height: 25px;}
#checkout .produtos .menos { float: left; width: 25px; height: 25px; background: url('../img/checkout-produtos-menos.png?v=2') 50% no-repeat;}
#checkout .produtos .mais { float: left; width: 25px; height: 25px; background: url('../img/checkout-produtos-mais.png?v=2') 50% no-repeat;}
#checkout .pfpj .dados { margin: 11px 0 0;}
#checkout .endereco .onde { margin: 5px 0 0;}
#checkout .endereco .opcoes { margin: 5px 0 0;}
#checkout .endereco .opcoes .opcao { position: relative; padding: 10px 5px; margin: 2px 0; outline: 1px solid rgb(90 90 90 / 30%); outline-offset: -1px; background-color: rgb(90 90 90 / 5%);}
#checkout .endereco .opcoes .opcao .radio { position: absolute; width: 20px; height: 20px; top: 50%; left: 10px; margin: -10px 0 0;}
#checkout .endereco .opcoes .opcao .label { padding: 0 35px;}
#checkout .endereco .opcoes .opcao .mudar { position: absolute; width: 30px; height: 30px; top: 50%; right: 5px; margin: -15px 0 0; outline: 1px solid rgb(90 90 90 / 50%); background: url('../img/checkout-endereco-mudar.png?v2') 50% no-repeat rgb(250 250 250);}
#checkout .endereco .opcoes .opcao .mudar:hover { background-color: rgb(90 90 90 / 10%);}
#checkout .finalizar { text-align: center;}
#checkout .finalizar .button { padding: 25px 40px; background-color: rgb(24 122 93); font-weight: bold; font-size: 1.2em; color: rgb(250 250 250);}
#checkout .finalizar .button.zap { padding: 25px 30px 25px 50px; background-image: url('../img/eproduto-botoes-zap.png'); background-repeat: no-repeat; background-position: 10px 50%;}
#checkout .finalizar .button:hover { background-color: rgb(15 107 79);}

#checkout .pagamento .lado1 { float: left; width: 30%;}
#checkout .pagamento .lado2 { float: right; width: 68%;}
#checkout .pagamento .tempo { float: left; width: 100%; margin: 2px 0 0; text-align: center; font-size: 0.9em; opacity: 0.7;}
#checkout .pagamento .meio { width: 340px; max-width: 100%; margin: 0 auto;}
#checkout .pagamento .pix { float: left; width: 100%;}
#checkout .pagamento .pix .icone { float: left; width: 100%; padding: 30px 20px; margin: 11px 0 0; outline: 1px solid rgb(90 90 90 / 30%); background: url('../img/checkout-pagamento-pix.png?v2') 10px 50% no-repeat; text-align: center; font-weight: bold; font-size: 1.2em;}
#checkout .pagamento .pix .icone:hover { background-color: rgb(90 90 90 / 5%);}
#checkout .pagamento .boleto { float: left; width: 100%;}
#checkout .pagamento .boleto .icone { float: left; width: 100%; padding: 30px 20px; margin: 21px 0 0; outline: 1px solid rgb(90 90 90 / 30%); background: url('../img/checkout-pagamento-boleto.png?v2') 10px 50% no-repeat; text-align: center; font-weight: bold; font-size: 1.2em;}
#checkout .pagamento .boleto .icone:hover { background-color: rgb(90 90 90 / 5%);}
#checkout .pagamento .cartao { float: left; width: 100%;}
#checkout .pagamento .cartao .icone { float: left; width: 100%; padding: 30px 20px; margin: 21px 0 0; outline: 1px solid rgb(90 90 90 / 30%); background: url('../img/checkout-pagamento-cartao.png?v2') 10px 50% no-repeat; text-align: center; font-weight: bold; font-size: 1.2em;}
#checkout .pagamento .cartao .icone:hover { background-color: rgb(90 90 90 / 5%);}
#checkout .pagamento .cartao .pgagora { float: left; padding: 8px 20px; background-color: rgb(60 80 120); text-transform: uppercase; font-weight: bold; color: rgb(255 255 255);}
#checkout .pagamento .cartao .pgagora:hover { background-color: rgb(45 60 90);}
#checkout .pagamento .cartao .pgagora.desativado { opacity: 0.4;}
#checkout .pagamento .cartao .pgagora.desativado:hover { background-color: rgb(60 80 120);}
#checkout .pagamento .pentrega { float: left; width: 100%;}
#checkout .pagamento .pentrega .icone { float: left; width: 100%; padding: 30px 20px; margin: 21px 0 0; outline: 1px solid rgb(90 90 90 / 30%); background: url('../img/checkout-pagamento-pentrega.png?v3') 10px 50% no-repeat; text-align: center; font-weight: bold; font-size: 1.2em;}
#checkout .pagamento .pentrega .icone:hover { background-color: rgb(90 90 90 / 5%);}

#checkout .sucesso .msg h2 { font-size: 1.5em;}
#checkout .sucesso .msg h3 { font-size: 1.1em;}

#checkout .sucesso .pix .qrcode img { width: 200px; padding: 5px; outline: 1px solid rgb(90 90 90 / 30%); background-color: rgb(255 255 255);}
#checkout .sucesso .pix .copiaecola { padding: 20px 0; margin: 10px 0; text-align: center;}
#checkout .sucesso .pix .copiaecola .copiar { padding: 20px; background-color: rgb(0 171 199 / 30%); line-height: 1;}
#checkout .sucesso .pix .copiaecola .copiar:hover { background-color: rgb(147 224 255);}
#checkout .sucesso .pix .copiaecola .copiar.ok { background-color: rgb(255 227 147);}
#checkout .sucesso .boleto .botao { padding: 15px 0;}
#checkout .sucesso .boleto .botao .pdf { padding: 15px; background-color: rgb(0 150 130); text-transform: uppercase; font-weight: bold; color: rgb(255 255 255);}
#checkout .sucesso .boleto .botao .pdf:hover { background-color: rgb(0 170 100);}
#checkout .sucesso .boleto .senao { margin: 31px 0 0; text-align: center;}
#checkout .sucesso .cartao h2 { font-size: 1.2em;}
#checkout .sucesso .cartao h3 { font-size: 1em;}
#checkout .sucesso .pentrega h2 { font-size: 1.2em;}
#checkout .sucesso .pentrega h3 { font-size: 1em;}

#checkout .obrigado .msg h2 { font-size: 1.5em;}
#checkout .obrigado .msg h3 { font-size: 1.1em;}

#checkout .modificar { margin: 5px 0 0;}
#checkout .modificar .btn { float: left; width: 100%; padding: 15px 7px; background-color: rgb(115 142 159 / 35%); text-align: left;}
#checkout .modificar .btn:hover { background-color: rgb(115 142 159 / 45%);}
#checkout .retornar { margin: 5px 0 0;}
#checkout .retornar .btn { float: left; width: 100%; padding: 13px 7px; background-color: rgb(255 187 0 / 35%); text-align: left;}
#checkout .retornar .btn:hover { background-color: rgb(255 187 0 / 45%);}

#checkout .identificacao { float: left; width: 100%; padding: 3px 10px; margin: 3px 0 0; background-color: rgb(90 90 90 / 20%);}

@media only screen and (max-width: 800px){
  #auth { padding: 21px 0;}
  #checkout { padding: 21px 0;}
  #minhaconta { padding: 21px 0;}

  #checkout .produtos .qtd { width: 40px;}
  #checkout .produtos .nun { width: 40px; height: 25px; margin: 2px 0;}
  #checkout .produtos .menos { width: 40px; height: 22px; background-color: rgb(90 90 90 / 10%);}
  #checkout .produtos .mais { width: 40px; height: 22px; background-color: rgb(90 90 90 / 10%);}
}