@charset "utf-8";

#compras { float: left; width: 100%;}
#compras .tab { float: left; width: 97.5%; padding: 15px 1% 14px; margin: 1px 0 4px; border: 1px solid rgb(100, 100, 100, 60%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
#compras .tab .celula { float: left;}
#compras .tab .celula.c1 { width: 100px;}
#compras .tab .celula.c2 { width: 150px;}
#compras .tab .celula.c3 { width: 250px;}
#compras .tab .celula.c4 { width: 100px;}
#compras .tab .celula.c5 { float: right;}
#compras .tab .celula .botao { float: left; padding: 14px 13px 13px; text-transform: uppercase; background-color: rgb(50, 50, 50); font-weight: bold; color: rgb(255, 255, 255);}
#compras .tab .celula .botao.pagar { background-color: rgb(127, 193, 51);}
#compras .tab .celula .botao.pagar:hover { background-color: rgb(76, 128, 17);}
#compras .tab .celula .botao.ver { background-color: rgb(99, 127, 148);}
#compras .tab .celula .botao.ver:hover { background-color: rgb(83, 110, 131);}
#compras .tab .celula h4 { float: left; width: 100%; font-weight: normal; font-size: 0.8em; color: #627966;}
#compras .tab .celula h5 { float: left; width: 100%; margin: 3px 0 0; font-weight: normal; font-size: 1em; color: #010101;}
#compras .tab .celula h5 a { color: #1E6192;}
#compras .tab .celula h5 a:hover { color: #010101;}

#exibicompra { float: left; width: 100%; margin: 0 0 30px;}
#exibicompra .logo { float: left; width: 100%; padding: 10px 0 5px; text-align: center;}
#exibicompra .logo img { height: 45px;}
#exibicompra .subtitulo { float: left; width: 98%; padding: 10px 1% 8px; background-color: rgb(220, 220, 220); text-transform: uppercase; font-weight: bold; font-size: 1.1em; -webkit-border-radius: 7px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 7px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 7px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}
#exibicompra .basico { float: left; width: 100%;}
#exibicompra .basico .tab { float: left; width: 100%; margin: 20px 0 0;}
#exibicompra .basico .tab .linha { float: left; width: 98%; padding: 10px 0 8px; margin: 0 1%; border-bottom: 1px solid rgb(100, 100, 100, 60%);}
#exibicompra .basico .tab .linha b { font-weight: normal; color: #B44143;}
#exibicompra .basico .tab .linha strong { font-weight: normal;}
#exibicompra .basico .tab .linha a { color: #408DDC;}
#exibicompra .basico .tab .linha a:hover { text-decoration: underline;}
#exibicompra .basico .top { margin: 0;}

#exibicompra .pagamento { float: left; width: 100%;}
#exibicompra .pagamento .qrcode { float: left; width: 100%; margin: 10px 0; text-align: center;}
#exibicompra .pagamento .qrcode img { width: 200px; padding: 5px; border: 1px solid rgb(100, 100, 100, 20%); background-color: rgb(255, 255, 255);}
#exibicompra .pagamento .copiaecola { float: left; width: 100%; margin: 20px 0 40px; text-align: center;}
#exibicompra .pagamento .copiaecola b { padding: 16px 40px 15px; background-color: rgb(0, 171, 199, 30%); background-position: 10px 50%; background-repeat: no-repeat; font-weight: normal; font-size: 1.1em; color: rgb(0, 0, 0, 70%);}
#exibicompra .pagamento .copiaecola b:hover { background-color: rgb(0, 171, 199, 40%);}
#exibicompra .pagamento .copiaecola b.ok { background-color: rgb(127, 193, 51, 40%); background-image: url('https://www.portalecovida.com.br/imagens/copiaecola.png');}
#exibicompra .pagamento .escanear { float: left; width: 100%;}
#exibicompra .pagamento .escanear h3 { float: left; width: 100%; text-align: center; font-size: 1.2em; color: rgb(100, 100, 100);}
#exibicompra .pagamento .pdf { float: left; width: 50%; padding: 17px 0 15px; margin: 10px 25% 0; background-color: rgb(25, 141, 77); text-align: center; font-weight: bold; font-size: 1.1em; color: rgb(255, 255, 255);}
#exibicompra .pagamento .pdf:hover { background-color: rgb(20, 124, 67);}
#exibicompra .pagamento .enquanto { float: left; width: 100%; padding: 20px 0; margin: 20px 0; border-top: 1px solid rgb(100, 100, 100, 60%);}
#exibicompra .pagamento .enquanto h3 { float: left; width: 100%; text-align: center; font-size: 1.2em; color: rgb(100, 100, 100);}
#exibicompra .pagamento .enquanto h3 a { color: rgb(33, 101, 128);}
#exibicompra .pagamento .enquanto h3 a:hover { text-decoration: underline;}

#exibicompra .produtos { float: left; width: 100%; margin: 20px 0 0;}
#exibicompra .produtos .tabela { float: left; width: 98%; margin: 5px 1% 0; border: 1px solid rgb(100, 100, 100, 60%); border-top: 0;}
#exibicompra .produtos .cabecario b { display: block; text-transform: uppercase;}
#exibicompra .produtos .listagem b { display: none;}
#exibicompra .produtos .linha { float: left; width: 100%; border-top: 1px solid rgb(100, 100, 100, 60%);}
#exibicompra .produtos .celula { float: left; padding: 12px 2% 10px;}
#exibicompra .produtos .celula strong { font-weight: normal;}
#exibicompra .produtos .nome { width: 48%;}
#exibicompra .produtos .unidade { width: 18%; border-left: 1px solid rgb(100, 100, 100, 60%);}
#exibicompra .produtos .total { float: right; width: 18%; border-left: 1px solid rgb(100, 100, 100, 60%);}

#exibicompra.impressao { font-size: 14px;}
#exibicompra.impressao .basico .tab { width: 48%; margin: 11px 1%;}
#exibicompra.impressao .produtos { width: 98%; margin: 11px 1% 0;}
#exibicompra.impressao .produtos .tabela { width: 100%; margin: 5px 0 0;}
#exibicompra.impressao .basico .tab .linha b { font-weight: bold; color: #000000;}

@media only screen and (max-width: 1000px){
	#exibicompra .subtitulo { width: 94%; padding: 10px 3% 8px;}
	#exibicompra .basico .tab .linha { width: 94%; margin: 0 3%;}

	#exibicompra .produtos .tabela { border: 0;}
	#exibicompra .produtos .cabecario { display: none;}
	#exibicompra .produtos .linha { margin: 0 0 10px; border: 1px solid rgb(100, 100, 100, 60%);}
	#exibicompra .produtos .celula { border-bottom: 1px solid rgb(100, 100, 100, 60%);}
	#exibicompra .produtos .celula b { display: block;}
	#exibicompra .produtos .nome { width: 96%;}
	#exibicompra .produtos .unidade { width: 44%; border-left: 0; border-bottom: 0;}
	#exibicompra .produtos .total { width: 44%; border-bottom: 0;}
}
@media only screen and (max-width: 800px){
	#compras .tab .celula.c3 { display: none;}
}
@media only screen and (max-width: 500px){
	#compras .tab .celula.c4 { display: none;}
}