/* Estilo da Loja Virtual Sanep (adaptado do portal GSAN) */
*{margin:0;padding:0;}
a{cursor:pointer;outline:none;text-decoration:none;}
li{list-style:none;}
img{border:none;}
body{background:url(imagens/body.gif) repeat-x 0 0;color:#2f2f2f;font:12px/1.6em Verdana, Geneva, sans-serif;}
form{float:left;}
fieldset{border:none;}
input[type=text]{text-transform:uppercase;height:16px!important;padding:8px 12px!important;margin-top:3.5px!important;}

#container{background:url(imagens/content.png) repeat-y 0 0;display:table;margin:35px auto 0;padding:0 5px;width:950px;}

#top{background:url(imagens/border-top.png) repeat-x 0 0;border-bottom:1px dashed #dedede;float:left;height:168px;width:950px;}
#top img{float:right;height:145px;margin-top:18px;width:607px;}

#content{float:left;position:relative;width:950px;}
#text-top{background:url(imagens/img-text-top.gif) no-repeat 0 0;float:left;height:64px;margin:35px 0 35px 56px;padding:4px 0 0 105px;width:740px;}

.box{float:left;height:360px;margin-left:33px;width:424px;}
.box span{color:#2f2f2f;padding:270px 0 0 36px;float:left;width:330px;}
#info-index{background:url(imagens/link-info4.jpg) no-repeat 0 0;}
#servicos-index{background:url(imagens/link-servicos7.jpg) no-repeat 0 0;}
#info-index a{height:90px;}

#form-matricula{padding:8px 0 0 36px;width:360px;}
#form-matricula input{background:url(imagens/matricula.png) no-repeat;float:left;text-indent:-9000px;border:none;}
#form-matricula label{color:#737373;cursor:pointer;float:left;font-weight:700;height:25px;margin:8px 5px 0 0;width:67px;}
#form-matricula input.campo-text{background-position:-72px -4px;color:#008fd6;font:700 12px/1.6em Verdana;text-indent:0;width:93px;}
#form-matricula input.btn-ok{background-position:-195px -7px;cursor:pointer;height:29px;margin:6px 5px 0;width:50px;}
#form-matricula input.btn-ok:disabled{cursor:wait;opacity:.6;}

/* Mensagem de erro / status abaixo do formulário */
#msg-matricula{clear:both;float:left;margin:6px 0 0 36px;width:340px;font-size:11px;line-height:1.4em;min-height:16px;}
#msg-matricula.erro{color:#c0392b;font-weight:700;}
#msg-matricula.info{color:#008fd6;}

#footer{background:url(imagens/footer.png) repeat-x 0 0;border-top:1px solid #003d98;float:left;height:200px;margin-top:50px;width:950px;}
#footer h4{background:url(imagens/canais-atendimento.png) no-repeat 0 0;float:left;height:58px;margin:85px 15px 0 0;text-indent:-9000px;width:159px;}
#footer ul{float:right;margin-top:29px;padding-right:26px;}
#footer ul li{float:left;margin-right:45px;}
#footer ul li a{background:url(imagens/links-canais-atendimento.png) no-repeat;float:left;height:115px;text-indent:-9000px;width:120px;}
#footer ul li#link-1 a{background-position:0 0;}
#footer ul li#link-2 a{background-position:-157px 0;}
#footer ul li#link-4 a{background-position:-469px 0;}
#footer ul li#link-1 a:hover{background-position:0 -120px;}
#footer ul li#link-2 a:hover{background-position:-157px -120px;}
#footer ul li#link-4 a:hover{background-position:-469px -120px;}
#footer address{color:#fff;float:right;font-size:11px;font-style:normal;margin:30px 45px 0 0;width:550px;}

/* ======================================================================
   Página de Serviços (menu após informar a matrícula)
   ====================================================================== */
#barra-servicos,#barra-servicos h2{float:left;height:40px;}
#barra-servicos{background:url(imagens/barra-servicos.png) no-repeat 0 0;margin:50px 0 0 38px;position:relative;width:865px;}
#barra-servicos h2{background:url(imagens/tit-servicos.png) no-repeat 0 0;text-indent:-9000px;width:112px;}
#barra-servicos h3{background:url(imagens/nome-cliente.gif) no-repeat right 0;color:#fff;height:40px;line-height:3em;padding:0 30px 0 20px;right:260px;top:0;text-align:right;}
#barra-servicos h4{color:#006bbb;font-weight:400;right:100px;top:10px;}
#barra-servicos h4 span{font-weight:700;}
#barra-servicos h3,#barra-servicos h4{font-size:12px;position:absolute;}
#barra-servicos a{float:right;height:38px;width:81px;}
.adobe-reader{position:absolute;right:47px;top:12px;}

.info-serv{background:url(imagens/info-servico-top.gif) no-repeat 0 0 #f5f6f6;display:none;padding-top:15px;position:absolute;right:-508px;top:-30px;width:470px;z-index:5;}
.info-serv span#bottom{background:url(imagens/info-servico-bottom.gif) no-repeat 0 0;float:left;height:10px;width:470px;}
.info-serv img{left:-38px;position:absolute;top:30px;}
.info-serv p{float:left;padding:0 20px 15px;width:430px;}

#lista-informacoes{float:left;padding:80px 0 100px 35px;width:360px;}
#lista-informacoes li{background:url(imagens/arrow-link.gif) no-repeat scroll 0 0 transparent;float:left;height:39px;display:block;margin-bottom:5px;position:relative;width:100%;}
#lista-informacoes li a{color:#008FD6;font-size:15px;font-weight:bold;height:100%;position:absolute;width:100%;}
#lista-informacoes li:hover{background:url(imagens/arrow-link-hover.gif) no-repeat;}
#lista-informacoes li a:hover,#lista-informacoes li a.ativo{color:#FFF;}
#lista-informacoes li a span{margin-left:50px;position:absolute;margin-top:9px;}
#lista-informacoes li a.indisponivel{color:#8aa6b8;}
#lista-informacoes li a.indisponivel:hover{color:#FFF;}

#informativo-bancos{float:right;width:38%;background-color:#F4F8FA;padding:20px;border-radius:8px;border:1px solid #D5E3EC;box-sizing:border-box;margin-top:26px;margin-right:44px;}
#informativo-bancos p.intro{font-size:14px;color:#555;margin-bottom:20px;text-align:left;line-height:1.4;}
#informativo-bancos .bancos{text-align:center;margin-bottom:20px;background-color:#FFF;padding:15px;border-radius:6px;border:1px solid #EAEAEA;}
#informativo-bancos .bancos img{max-width:100%;height:auto;}
#informativo-bancos p.obs-titulo{font-weight:bold;font-size:14px;color:#333;margin-bottom:5px;}
#informativo-bancos p.obs{font-size:13px;color:#008FD6;margin:0;}
#informativo-bancos p.obs span{color:#008FD6;font-size:18px;margin-right:5px;}

/* Avisos modais (equivalente ao blockUI + tema jQuery UI do portal) */
.ui-corner-all{border-radius:5px;}
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#aaa;opacity:.3;z-index:1000;}
.modal-overlay.aberto{display:block;}
.modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:420px;z-index:1001;
	border:1px solid #a6c9e2;background:#fcfdfd;color:#222;font-family:"Lucida Grande","Lucida Sans",Arial,sans-serif;font-size:1.1em;box-shadow:0 4px 18px rgba(0,0,0,.25);}
.modal.aberto{display:block;}
.modal .titulo{border:1px solid #4297d7;background:#0062B4 linear-gradient(#6fb4e4,#0062B4);color:#fff;font-weight:bold;padding:.5em .3em .3em 1em;font-size:1.1em;}
.modal .corpo{padding:.5em 1em 1em;overflow:hidden;cursor:default;}
.modal .corpo h3{font-family:Verdana,Geneva,sans-serif;font-size:1em;padding:10px 0;}
.modal .corpo p{line-height:1.5em;}
.modal .corpo img{float:left;padding-right:10px;margin-top:10px;}
.modal .corpo .texto{margin-left:45px;}
.modal a.button{padding:3px 12px;color:#FFF;background-color:#0062B4;float:right;font-weight:bold;margin-top:10px;}
.modal a.button:hover{background-color:#004f91;}

/* ======================================================================
   Página de débitos (Emissão da 2ª Via de Débitos)
   ====================================================================== */
em{font-style:normal;font-weight:700;padding-right:5px;}
.serv-int{float:left;margin:25px 0 0 38px;width:915px;}
.serv-int .btn-voltar-servicos{left:38px;position:absolute;top:15px;}
.serv-int h3{background:url(imagens/tit-servicos-int.gif) no-repeat 0 0 #008fd6;color:#fff;float:left;font-size:12px;height:27px;line-height:2.3em;padding:0 15px;position:relative;}
.serv-int h3 span{background:url(imagens/tit-servicos-int-right.gif) no-repeat 0 0;height:27px;position:absolute;right:0;top:0;width:10px;}
.serv-int #desc-debito{float:left;margin:5px 0 5px;width:100%;}
.serv-int #desc-debito li{color:#2f2f2f;float:left;font-weight:700;margin-right:20px;padding-right:25px;position:relative;}
.serv-int #desc-debito li em{color:#008fd6;}
.serv-int #desc-debito li span{position:absolute;right:0;top:0;}
.serv-int table{border-collapse:collapse;color:#2f2f2f;float:left;font-weight:700;width:635px;font-size:1em;}
.serv-int table th,.serv-int table td{text-align:center;}
.serv-int table th{color:#fff;}
.serv-int table thead tr{background:url(imagens/thead.png) no-repeat 0 0;height:40px;width:635px;}
.serv-int table tbody tr{height:31px;}
.serv-int table tbody tr.last-tr{height:37px;}
.serv-int table tbody tr.vazio td{height:31px;font-weight:400;color:#737373;font-size:11px;}
#tr-2-2,tr.tr-2-2{background:url(imagens/tr-22.png) no-repeat 0 0!important;}
#tr-1-2,tr.tr-1-2{background:url(imagens/tr-12.png) no-repeat 0 0!important;}
.serv-int table tbody tr td a{color:#2f2f2f;text-decoration:underline;}
.serv-int table tbody tr td a:hover{color:#008fd6;text-decoration:none;}
.serv-int p.obs{clear:left;font-size:11px;}
.serv-int form{clear:left;width:605px;}
.serv-int form span{float:left;padding:0 30px 10px 0;width:287px;padding-left:10px;}
.serv-int form input{background-position:0 0;background-repeat:no-repeat;border:none;float:left;}

.checkbox-custom{position:absolute;opacity:0;}
.checkbox-label{display:inline-block;width:16px;height:16px;background:#fff;border:2px solid #008fd6;border-radius:3px;cursor:pointer;position:relative;}
.checkbox-custom:checked + .checkbox-label{background:#008fd6;}
.checkbox-custom:checked + .checkbox-label:after{content:"\2713";color:#fff;font-size:14px;position:absolute;top:-1px;left:1px;font-weight:bold;}

.acoes-debito{text-align:right;margin:40px 25px 50px 0;padding:0;}
.btn-imprimir{display:inline-flex;align-items:center;justify-content:center;gap:10px;background-color:#4f6f86;color:#fff;
	font:bold 13px/1.4 Verdana,Geneva,sans-serif;padding:10px 20px 10px 16px;border:1px solid #003d7a;border-radius:5px;cursor:pointer;
	box-shadow:0 3px 6px rgba(0,0,0,.2);min-width:220px;transition:all .2s ease;}
.btn-imprimir:hover{background-color:#3d5a6e;}
.btn-imprimir img{width:20px;height:20px;vertical-align:middle;}

/* ======================================================================
   Responsivo (celular / tablet). O layout original é fixo em 950px;
   abaixo de 760px as larguras fixas e os floats são desfeitos.
   ====================================================================== */
@media screen and (max-width: 760px) {
	html{-webkit-text-size-adjust:100%;}
	body{font-size:13px;}
	#container{width:100%;max-width:100%;box-sizing:border-box;margin:0;padding:0 10px;display:block;background:#fff;overflow-x:hidden;}
	#top{width:100%;height:auto;float:none;padding:10px 0;text-align:center;}
	#top img{float:none;width:100%!important;max-width:420px;height:auto!important;margin:0 auto;display:block;}
	#content{width:100%;float:none;}

	/* Página inicial */
	#text-top{width:auto;height:auto;float:none;margin:16px 0;padding:70px 0 0;background-position:center 0;text-align:left!important;}
	.box{width:100%;height:auto;float:none;margin:0 0 20px;background-size:100% auto;padding-top:75%;min-height:0;overflow:hidden;}
	.box span{width:auto;float:none;display:block;padding:8px 10px 0;}
	#info-index,#servicos-index{background-size:100% auto;background-position:0 0;}
	#info-index a{height:auto;display:block;}
	#form-matricula{width:auto;float:none;padding:10px 10px 0;}
	#form-matricula fieldset{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
	#form-matricula label{float:none;margin:0;width:auto;height:auto;}
	#form-matricula input.campo-text{float:none;width:93px;}
	#form-matricula input.btn-ok{float:none;margin:0;}
	#msg-matricula{float:none;width:auto;margin:6px 10px 0;}

	/* Barra de serviços (nome + matrícula) */
	#barra-servicos{width:100%;height:auto;margin:16px 0 0;float:none;background:#008fd6;border-radius:6px;padding:8px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
	#barra-servicos h2{float:none;height:auto;width:auto;text-indent:0;color:#fff;font-size:15px;background:none;}
	#barra-servicos h3,#barra-servicos h4{position:static;height:auto;line-height:1.4;padding:0;background:none;text-align:left;}
	#barra-servicos h3{color:#fff;flex-basis:100%;}
	#barra-servicos h4{color:#fff;}
	#barra-servicos h4 label{color:#e6f4fc;}
	#barra-servicos a{float:none;width:auto;height:auto;margin-left:auto;}
	#barra-servicos a img{height:28px;width:auto;}
	.adobe-reader{display:none;}

	/* Página de serviços */
	#informativo-bancos{float:none;width:100%;margin:16px 0 0;}
	#lista-informacoes{float:none;width:100%;padding:16px 0 24px;}
	#lista-informacoes li{height:auto;min-height:39px;background-size:auto 39px;}
	#lista-informacoes li a{position:static;display:block;padding:9px 10px 9px 50px;height:auto;}
	#lista-informacoes li a span{position:static;margin:0;display:block;}
	.info-serv{display:none!important;}

	/* Página de débitos */
	.serv-int{width:100%;margin:16px 0 0;float:none;}
	.serv-int .btn-voltar-servicos{position:static;display:inline-block;margin:12px 0 0;}
	.serv-int form{width:100%;float:none;}
	.serv-int h3{float:none;display:inline-block;}
	.serv-int #desc-debito{float:none;width:auto;margin:10px 0 4px;}
	.serv-int #desc-debito li{float:none;display:block;margin:0 0 4px;padding:0;}
	.serv-int #desc-debito li span{display:none;}
	.serv-int form span{width:auto;float:none;padding:0;}
	.serv-int .tabela-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:8px;}
	.serv-int table{width:635px;float:none;}
	.serv-int p.obs{clear:none;margin:6px 0;}
	.acoes-debito{text-align:center;margin:24px 0 20px;}
	.btn-imprimir{width:100%;max-width:360px;}

	/* Avisos modais */
	.modal{width:calc(100% - 24px);max-width:420px;}

	/* Rodapé */
	#footer{width:100%;height:auto;float:none;margin-top:30px;padding:16px 0 12px;}
	#footer h4{float:none;margin:0 auto 10px;}
	#footer ul{float:none;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0;padding:0;}
	#footer ul li{float:none;margin:0;}
	#footer address{float:none;width:auto;margin:12px 8px 0;text-align:center;}
}