@charset "utf-8";

#minhaconta { float: left; width: 70%; padding: 20px 15% 60px;}

#minhaconta .menu { float: left; width: 25%; margin: 0 0 50px; background-color: rgb(0 0 0 / 10%); position: relative;}
#minhaconta .menu strong { float: left; width: 90%; padding: 20px 5%; background-color: rgb(165 230 241); background-position: 20px 50%; background-repeat: no-repeat; text-transform: uppercase; text-align: center; font-size: 1.3em; color: rgb(90 90 90);}
#minhaconta .menu strong.expandir { background-image: url('../../imagens/site/chave-abrir.png');}
#minhaconta .menu strong.recolher { background-image: url('../../imagens/site/chave-fechar.png'); -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px;}
#minhaconta .menu b { float: left; width: 90%; padding: 20px 5%; border-bottom: 1px solid rgb(0 0 0 / 15%); text-transform: uppercase; font-size: 1em; color: rgb(90 90 90);}
#minhaconta .menu b.compras { -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px;}
#minhaconta .menu b.auth { border-bottom: 0; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
#minhaconta .menu b.ativo { background-color: rgb(0 0 0 / 10%);}
#minhaconta .menu b:hover { background-color: rgb(0 0 0 / 10%);}
#minhaconta .menu a.sair { position: absolute; bottom: -35px; left: 5px; color: rgb(90 90 90);}
#minhaconta .menu a.apagar { position: absolute; bottom: -75px; left: 5px; color: rgb(90 90 90);}
#minhaconta .menu a:hover { color: rgb(0 135 190);}

#minhaconta .conteudo { float: right; width: 70%;}
#minhaconta .conteudo .compras { float: left; width: 100%;}
#minhaconta .conteudo .compras .tab { float: left; width: 90%; padding: 20px 5%; margin: 0 0 20px; outline: 1px solid rgb(0 0 0 / 10%); background-color: rgb(255 255 255); background-position: 10px 50%; background-repeat: no-repeat; position: relative;}
#minhaconta .conteudo .compras .tab h2 { float: left; width: 100%; font-size: 1.3em;}
#minhaconta .conteudo .compras .tab h2 i {font-style: normal; color: rgb(211 155 68);}
#minhaconta .conteudo .compras .tab h2 em { float: left; padding: 8px; margin: 5px 5px 0 0; background-color: rgb(90 90 90); font-weight: bold; font-style: normal; font-size: 0.8em; line-height: 1; color: rgb(255 255 255); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#minhaconta .conteudo .compras .tab h2 em.aguardando { background-color: rgb(33 101 128);}
#minhaconta .conteudo .compras .tab h2 em.processando { background-color: rgb(33 101 128);}
#minhaconta .conteudo .compras .tab h2 em.pago { background-color: rgb(25 141 77);}
#minhaconta .conteudo .compras .tab h2 em.pendente { background-color: rgb(211 155 68);}
#minhaconta .conteudo .compras .tab h2 em.cancelado { background-color: rgb(78, 44, 117);}
#minhaconta .conteudo .compras .tab h2 em.devolvido { background-color: rgb(78, 44, 117);}
#minhaconta .conteudo .compras .tab h2 em.contestado { background-color: rgb(78, 44, 117);}
#minhaconta .conteudo .compras .tab h2 em.negado { background-color: rgb(134, 49, 49);}
#minhaconta .conteudo .compras .tab h3 { float: left; width: 100%; margin: 10px 0 0; font-size: 1em; color: rgb(90 90 90);}
#minhaconta .conteudo .compras .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%);}
#minhaconta .conteudo .compras .tabela { margin: 10px 0;}
#minhaconta .conteudo .compras .tabela tr td { border-color: rgb(0 0 0 / 20%);}


#minhaconta .exibircompra { float: left; width: 100%;}
#minhaconta .exibircompra .status { float: left; width: 90%; margin: 20px 5%;}
#minhaconta .exibircompra .status h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 1.5em; color: rgb(90 90 90);}
#minhaconta .exibircompra .status h2 b { padding: 10px 0 10px 40px; background-position: 0 50%; background-repeat: no-repeat;}
#minhaconta .exibircompra .status h2 b.pago { background-image: url('../../imagens/site/status-pago.png');}
#minhaconta .exibircompra .status h3 { float: left; width: 100%; margin: 10px 0 0; text-align: center; font-size: 1.1em; color: rgb(90 90 90);}
#minhaconta .exibircompra .status h3.divisao { padding: 10px 0 0; border-top: 1px solid rgb(0 0 0 / 15%);}
#minhaconta .exibircompra .status h4 { float: left; width: 100%; padding: 10px 0 0; text-align: center; line-height: 3.5;}
#minhaconta .exibircompra .status h4 a { padding: 12px 20px 12px 40px; background-image: url('../../imagens/site/pagar.png?i'); background-position: 7px 50%; background-repeat: no-repeat; font-weight: bold; color: rgb(255 255 255);}
#minhaconta .exibircompra .status h4 a.a1 { background-color: rgb(25 141 77);}
#minhaconta .exibircompra .status h4 a.a1:hover { background-color: rgb(19 128 47);}
#minhaconta .exibircompra .status h4 a.a2 { background-color: rgb(211 155 68);}
#minhaconta .exibircompra .status h4 a.a2:hover { background-color: rgb(211 155 18);}
#minhaconta .exibircompra .pagamento { float: left; width: 100%;}
#minhaconta .exibircompra .pagamento .qrcode { float: left; width: 100%; margin: 20px 0 10px; text-align: center;}
#minhaconta .exibircompra .pagamento .qrcode img { width: 200px; padding: 5px; outline: 1px solid rgb(90 90 90 / 20%); background-color: rgb(255 255 255);}
#minhaconta .exibircompra .pagamento .copiaecola { float: left; width: 100%; margin: 10px 0; text-align: center;}
#minhaconta .exibircompra .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%);}
#minhaconta .exibircompra .pagamento .copiaecola .copiar:hover { background-color: rgb(147, 224, 255);}
#minhaconta .exibircompra .pagamento .copiaecola .copiar.ok { background-color: rgb(255, 227, 147);}
#minhaconta .exibircompra .pagamento .escanear { float: left; width: 100%; margin: 20px 0 0;}
#minhaconta .exibircompra .pagamento .escanear h3 { float: left; width: 100%; text-align: center; font-size: 1.2em; color: rgb(90 90 90);}


#minhaconta .apagar { float: left; width: 100%; margin: 10px 0 0;}
#minhaconta .apagar h2 { float: left; width: 70%; margin: 0 15%; text-align: center; font-size: 1.1em;}
#minhaconta .apagar h3 { float: left; width: 100%; padding: 10px 0; margin: 10px 0; border-top: 1px solid rgb(90 90 90 / 20%); border-bottom: 1px solid rgb(90 90 90 / 20%); text-align: center; font-size: 1.1em;}
#minhaconta .apagar h4 { float: left; width: 100%; text-align: center; font-size: 1em;}
#minhaconta .apagar h4 a { color: rgb(90 90 90);}
#minhaconta .apagar h4 a:hover { text-decoration: underline;}


@media only screen and (max-width: 1000px){
  #minhaconta { width: 90%; padding: 20px 5% 60px;}
}
@media only screen and (max-width: 800px){
  #minhaconta .menu { width: 100%; margin: 0;}
  #minhaconta .menu b { display: none; text-align: center;}
  #minhaconta .menu strong.expandir { display: block;}
  #minhaconta .menu a.sair { display: none; left: 0;}
  #minhaconta .menu a.apagar { display: none; left: auto; right: 0; bottom: -35px;}
  #minhaconta .expandido { margin: 0 0 50px;}

  #minhaconta .conteudo {  width: 100%;}
  #minhaconta .conteudo .compras { margin: 10px 0 0;}
}