
.background-sistema {
   background: #F37022;
}

.color-sistema {
   color: #F37022;
}

select:-webkit-autofill,
select:-webkit-autofill:focus,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill {
   -webkit-box-shadow: inset 0 0 0px 9999px #C57916 !important;
}

.fixed-header-sistema,
.container-icon-sistema {
   border-left: 1px solid rgba(0,164,183,0.7);
}

.container-icon-sistema.active {
   background: rgba(0,164,183,0.7);
}

.container-icon-sistema i {
   color: #A5D2D8;
}

.container-icon-sistema:hover i {
   color: #04A5B7;
}

.container-dados-login {
   background: rgba(241,187,27,0.7);
}

.form-control {
   background: #C57916;
}

.btn-enter {
   background: #FDF7E2;
   color: #C57916;
}

.btn-enter:hover,
.btn-enter-mobile:hover {
   background: #EC6707;
}

.btn-enter-mobile {
   background: #F4F6FB;
}

#btn-solicitar-acesso,
#btn-solicitaracesso,
#btn-recover,
#btn-certificado,
#btn-biometria,
#btn-manutencao {
   background: #F37022;
}

#btn-solicitar-acesso:hover,
#btn-solicitar-acesso:active,
#btn-solicitaracesso:hover,
#btn-solicitaracesso:active,
#btn-recover:hover,
#btn-recover.active,
#btn-certificado:hover,
#btn-certificado.active,
#btn-biometria:hover,
#btn-biometria.active,
#btn-manutencao:hover,
#btn-manutencao.active {
   background: #EC6707;
}

#container_tooltip {
   color: #F37022;
}
<script>
   var end_virtual = 'https://camarapanambi.atende.net/social'; 
   var end_virtual_estrutura = 'https://camarapanambi.atende.net/social/estrutura'; 
   var end_virtual_include = 'https://camarapanambi.atende.net/social/include'; 
   var end_virtual_imagem = 'https://camarapanambi.atende.net/social/imagem'; 
   var end_virtual_upload = 'https://camarapanambi.atende.net/social/upload/'; 
   var end_virtual_glo = ''; 
   var end_virtual_icone = 'https://camarapanambi.atende.net/social/imagem/icone'; 
   var end_virtual_js = 'https://camarapanambi.atende.net/social/estrutura/js'; 
   var end_virtual_css = 'https://camarapanambi.atende.net/social/estrutura/estilo'; 
   var end_virtual_principal = 'https://camarapanambi.atende.net/social/estrutura/super_principal.php'; 
</script>
<script>	var sParametroSenha = ""; 	var iParametroCodCliente = "2603"; 	var iCodigoSistema = 53; </script><html lang="pt-br">
   <head>
		<title>IPM Social</title>
		<link href="css/portal_bootstrap_min.css" rel="stylesheet" type="text/css">
      <link href="css/portal_font-awesome_min.css" rel="stylesheet" type="text/css">
		<link href="https://camarapanambi.atende.net/social/estrutura/plugins/pace/css_loading.css" rel="stylesheet" type="text/css">
      <link href="https://camarapanambi.atende.net/social/estrutura/estilo/css_animate.css" rel="stylesheet" type="text/css">
      <link href="https://camarapanambi.atende.net/social/estrutura/plugins/lobibox/css_lobibox.css" rel="stylesheet" type="text/css">
		<link href="https://camarapanambi.atende.net/social/estrutura/portal/css/portal_aviso_atualizar_navegador.css" rel="stylesheet" type="text/css">
		<script src="https://camarapanambi.atende.net/social/estrutura/js/jquery/jqr_jquery214_min.js"></script>				
		<script src="https://camarapanambi.atende.net/social/estrutura/js/jquery/jquery-ui.js"></script>	
		<script src="https://camarapanambi.atende.net/social/estrutura/js/scr_md5.js"></script>
		<script src="https://camarapanambi.atende.net/social/estrutura/js/scr_crypto.js"></script>
		<script src="https://camarapanambi.atende.net/social/estrutura/js/scr_websocket.js?1"></script>
		<script src="https://camarapanambi.atende.net/social/estrutura/js/scr_websocketcomponentes.js?1"></script>
		<script src="https://camarapanambi.atende.net/social/estrutura/plugins/lobibox/scr_lobibox.js"></script>				
		<script src="https://camarapanambi.atende.net/social/estrutura/plugins/facescroll/jqr_facescroll.js?1"></script>
		<script src="https://camarapanambi.atende.net/social/estrutura/plugins/bootstrap/js/scr_bootstrap_min.js"></script>
		<script src="https://camarapanambi.atende.net/social/estrutura/portal/js/scr_login.js?1"></script>
	</head>
	<body onresize="resizeContainerExtra()">
				<div style="position: absolute; z-index: 1; width: 100%; height: 100%; background: url(https://camarapanambi.atende.net/social/imagem/sistemas/bg_sistema.png) left top repeat;"></div>
		<main style="position: relative; z-index: 2;">
			<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">
				<div class="container-header">					
					<span><a href='http://www.ipm.com.br' target='_blank'>IPM Sistemas</a> | <a onclick='parent.window.location = "https://camarapanambi.atende.net/saude/"' style='cursor: pointer;'>IPM Saúde</a> | <a  onclick='parent.window.location = "https://camarapanambi.atende.net/vigilancia/"' style='cursor: pointer;'>IPM Vigilância</a></span>						
					<span class="header-phone hidden-xs">
						<img src="images/ipm_call.png" style="margin-right: 5px;"> 47 3531-1500 
					</span>
				</div>
			</div>
			<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12">
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 container-white" id="container_principal" style="margin-bottom: 30px;">
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 header-acesso">						
						<div class="col-lg-12 col-md-12 container-logo">
							<img src="images/social/ipm_social.png" height="80">							
						</div>
					</div>
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 container-dados-login" id="container_dados_login">
						<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1">
							<div class="col-lg-5 col-lg-offset-3 col-md-5 col-md-offset-3 col-sm-6 col-sm-offset-2 col-xs-12">
								<div id="container-title">
									Acesso ao Sistema
								</div>	
							</div>	
							<div class="col-lg-5 col-lg-offset-3 col-md-5 col-md-offset-3 col-sm-6 col-sm-offset-2 col-xs-12">
								<form class="form" id="frm" name="frm" method="POST">
									<input type="hidden" id="codigo_sistema" name="codigo_sistema" value="53">
									<input type="hidden" id="info" name="info">
									<input type="hidden" id="continuar-acesso-seguro" name="continuar-acesso-seguro" value="false">
									<input type="hidden" id="campo_session_id" name="campo_session_id" value="95ekef74lo2fkvksq2ca54n2a4">									
									<div id="container_campo_cpf" class="form-group container-campo active">
										<input id="login_cpf" name="login_cpf" maxlength="18" type="text" class="form-control" placeholder="CPF/CNPJ">
									</div>
									<div class="form-group container-campo" id="container_campo_tecnico">
										<input id="login_useripm" name="login_useripm" maxlength="4" class='form-control' placeholder="Usuário IPM" type="text">
									</div>
									<div class="form-group" id="container_campo_senha">
										<input id="passw" name="passw" type="password" class="form-control" placeholder="Senha">
									</div>
									<div id="btn_enter_mobile" class="col-xs-12 hidden-lg hidden-md hidden-sm btn-enter-mobile">
										Entrar
									</div>
								</form>
							</div>
							<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 hidden-xs" style="padding-left: 0px; margin-left: -14px;">
								<div class="btn-enter hidden-xs" id="btn_enter">
									Entrar
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px; margin-bottom: 1px;">
						<div class="col-lg-2 col-md-2 hidden-sm hidden-xs" style="background: #F37022; height: 40px; margin-top: 1px;"></div>
						<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" class="container-btn-function" style="padding-left: 0px; padding-right: 0px;">
							<div id="btn-recover" class="btn-function">
								<i class="fa fa-key"></i>
								<span>Recuperar senha</span>
							</div>
						</div>
						<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0px; padding-right: 0px;">
							<div id="btn-certificado" class="btn-function">
								<i class="fa fa-lock"></i>
								<span>Acesso Seguro</span>
							</div>
						</div>
						<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0px; padding-right: 0px;">
							<div id="btn-biometria" class="btn-function">
								<i class="fa fa-hand-stop-o"></i>
								<span>Biometria</span>
							</div>
						</div>
						<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12" style="padding-left: 0px; padding-right: 0px;">
							<div id="btn-manutencao" class="btn-function add-margin">
								<i class="fa fa-gears"></i>
								<span>Manutenção</span>
							</div>
						</div>
						<div class="col-lg-2 col-md-2 hidden-sm hidden-xs" style="background: #F37022; height: 40px; margin-top: 1px;"></div>
					</div>
					<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding: 0px;">
						<div class="load-bar">
							<div class="bar"></div>
						</div>
					</div>
					<div class="col-lg-12 col-md-12 col-sm-12 hidden-xs" id="container_extra" style="height: 200px; padding: 0px;"></div>						
					
					<script>
   $(document).ready(function() {
            $('#tela_ajuda_qrcode_quadro').css({
         'width': getStylePortalRodape('cod_autenticidade', 'width', false),
         'margin-left': (getStylePortalRodape('abrir_tela_ajuda_qrcode', 'width', true, 34) + getStylePortalRodape('abrir_tela_ajuda_qrcode', 'margin-right', true, 4)) + 'px',
         'top': '-' + getStylePortalRodape('container_consulta_autenticidade', 'padding-top', false, 14)
      });
   });

   $(window).resize(function() {
            $('#tela_ajuda_qrcode_quadro').css('width', getStylePortalRodape('cod_autenticidade', 'width', false));
   });

      function exibirTelaAjudaQRCode() {
      criarModal({
         titulo: 'Consulta de Autenticidade',
         conteudo: '<div id="tela_ajuda_qrcode">	<div id="tela_ajuda_qrcode_mensagem" style="padding-left: 5px; padding-right: 5px;">		<p>&nbsp;&nbsp;&nbsp;&nbsp;Os documentos emitidos pelo IPM Saúde, IPM Vigilância e IPM Social (atestado médico, alvará sanitário, entre outros), possuem um sistema para verificação da autenticidade através de um código alfanumérico e QR-Code, gerados com base em um conjunto de dados que garantem a unicidade do código e a veracidade das infomações.		</p>		<p>&nbsp;&nbsp;&nbsp;&nbsp;Para verificar a autenticidade de um documento, basta inserir o código no campo "Código de autenticidade" no portal e em seguida clicar em "Verificar".		</p>		<p>&nbsp;&nbsp;&nbsp;&nbsp;O QR-Code é um código gráfico bidimensional que pode ser lido através de aplicativos para celulares ou tablets, desta forma, o usuário verifica a autenticidade de um documento diretamente no dispositivo móvel, bastando apenas possuir o aplicativo leitor de QR-Code instalado.		</p>	</div>	<div id="tela_ajuda_qrcode_imagem" style="text-align: center; margin-top: 10px;">		<img src="https://camarapanambi.atende.net/social/estrutura/portal/images/passoapasso_qrcode.jpg" width="65%" alt="Passo a passo QR-Code" title="Passo a passo QR-Code"/>	</div></div>',
         top: '10%',
         width: '65%'
      });
   }

   function exibirTelaSolicitacaoAcesso() {
      criarModal({
         titulo: 'Solicitação de Acesso',
         conteudo: '<p>A solicitação de acesso será encaminhada para o setor responsável, após aprovação você será notificado por e-mail.<div>  <table border="0" width="100%" cellpadding="0" cellspacing="0" style="padding: 3px 0px 5px 0px;">    <tr>       <td style="width: 10%; padding-top: 4px; text-align: right;color: #f53737;">          <label style="font-weight: 100;">Nome:&nbsp;</label>       </td>       <td colspan="2">          <input id="nome_solicitacao" name="nome_solicitacao" maxlength="100" type="text" autocomplete="off" class="form-control" style="background-color: #FFF; color: #000; border: 1px solid #CCC; -webkit-text-fill-color: #000 !important;">       </td>    </tr>  </table>  <table border="0" width="100%" cellpadding="0" cellspacing="0" style="padding: 3px 0px 5px 0px;">    <tr >       <td style="width: 10%; padding-top: 4px; text-align: right; color: #f53737;" >          <label style="font-weight: 100;">CPF/CNPJ:&nbsp;</label>       </td>       <td style="padding-top: 4px;">          <input id="cpf_solicitacao" name="cpf_solicitacao" maxlength="18" type="text" class="form-control" autocomplete="off" style="background-color: #FFF; color: #000; border: 1px solid #CCC; -webkit-text-fill-color: #000 !important;">       </td>       <td style="width: 9%; padding-top: 4px; text-align: right; color: #f53737;">          <label style="font-weight: 100;">Telefone:&nbsp;</label>       </td>       <td style="padding-top: 4px;">          <input id="telefone_solicitacao" name="telefone_solicitacao" maxlength="14" type="text" class="form-control" autocomplete="off" style="background-color: #FFF; color: #000; border: 1px solid #CCC; -webkit-text-fill-color: #000 !important;">       </td>    </tr>    <tr >       <td style="width: 10%; padding-top: 4px; text-align: right; color: #f53737;" >          <label style="font-weight: 100;">E-mail:&nbsp;</label>       </td>       <td style="padding-top: 4px;">          <input id="email_solicitacao" name="email_solicitacao" maxlength="60" type="text" class="form-control" autocomplete="off" style="background-color: #FFF; color: #000; border: 1px solid #CCC; -webkit-text-fill-color: #000 !important;">       </td>       <td style="width: 9%; padding-top: 4px; text-align: right; color: #f53737;">          <label style="font-weight: 100;">Senha:&nbsp;</label>       </td>       <td style="padding-top: 4px;">          <input id="senha_solicitacao" name="senha_solicitacao" maxlength="40" type="password" class="form-control" autocomplete="off" style="background-color: #FFF; color: #000; border: 1px solid #CCC; -webkit-text-fill-color: #000 !important;">       </td>    </tr>  </table></div>',
         top: '15%',
         width: '45%',
         botoes: [
            {
               titulo: 'Confirmar',
               click: function() {
                  validaSolicitacaoAcesso();
               }
            }
         ]
      });

      $('#cpf_solicitacao').keypress(function(event) {
         return so_numero(this, event, true);
      });

      $('#cpf_solicitacao').keydown(function(event) {
         mascara_cpfcnpj_evento(this, event);
      });

      $('#cpf_solicitacao').keyup(function(event) {
         mascara_cpfcnpj_evento(this, event);
      });

      $('#telefone_solicitacao').keypress(function(event) {
         mascaraTelefone(this);
      });

      $('#telefone_solicitacao').blur(function(event) {
         mascaraTelefone(this);
      });
   }

   function mostraTelaConfirmacaoEmail() {
      criarModal({
         titulo: 'Confirmação de E-mail',
         conteudo: '<p>E-mail confirmado com sucesso.</p>',
         top: '15%',
         width: '45%'
      });
   }

      function exibirTelaRedefinicaoSenha(tipo) {
      criarModal({
         titulo: 'Redefinição de senha',
         conteudo: '<p>Sua senha expirou, por motivos de segurança deve-se cadastrar uma nova senha de acesso.</p><label style="font-weight: 100;">Nova senha:</label><input id="nova_senha" name="nova_senha" type="password" class="form-control" style="background-color: #FFF; color: #000; border: 1px solid #CCC; -webkit-text-fill-color: #000 !important;" aria-label="Informe a Nova senha"><label for="nova_senha_confirma" style="font-weight: 100;">Confirma nova senha:</label><input id="nova_senha_confirma" name="nova_senha_confirma" type="password" class="form-control" style="background-color: #FFF; color: #000; border: 1px solid #CCC; -webkit-text-fill-color: #000 !important;" aria-label="Confirme a Nova senha"><div id="container_forca_senha" style="margin-top: 2px;"></div>',
         top: '10%',
         width: '35%',
         botoes: [
            {
               titulo: 'Confirmar',
               tabindex: '0',
               click: function() {
                  validaAlterarSenha(tipo);
               }
            }
         ]
      });

      UtilsAlteracaoSenha.criarElementoForcaSenha('container_forca_senha');
      UtilsAlteracaoSenha.setEventosCampoSenha('nova_senha');

      $('#nova_senha').focus();

      $('#nova_senha').keypress(function(e) {
         if(e.which == 13) {
            $('#nova_senha_confirma').focus();
         }
      });

      $('#nova_senha_confirma').keypress(function(e) {
         if(e.which == 13) {
            validaAlterarSenha(tipo);
         }
      });
   }

      function exibirQuadroAjudaQRCode(bExibir) {
      if(bExibir) {
         var iTop = getStylePortalRodape('container_consulta_autenticidade', 'padding-top', true, 14);
         if(iTop === 0) {
            iTop += 60;
         }
         else {
            iTop += getStylePortalRodape('cod_autenticidade', 'height', true, 34);
         }
         $('#tela_ajuda_qrcode_quadro').show().animate({'height': '60px', 'top': '-' + iTop + 'px'});
      }
      else {
         $('#tela_ajuda_qrcode_quadro').animate({'top': '0px', 'height': getStylePortalRodape('cod_autenticidade', 'height', false, 34)}, function() {
            $('#tela_ajuda_qrcode_quadro').hide();
         });
      }
   }

      function getStylePortalRodape(sIdCampo, sStyle, bRetornaInteiro, xValorDefault) {
      var xValor = '';
      try {
         xValor = $('#' + sIdCampo).css(sStyle);
         if(bRetornaInteiro) {
            xValor = parseInt(retira_alf(xValor));
         }
      }
      catch(e) {
         console.log({msg: 'Erro ao obter o estilo do elemento: ' + sIdCampo, erro: e});
         if(typeof xValorDefault !== 'undefined') {
            xValor = xValorDefault;
         }
      }

      return xValor;
   }
</script>

<style>
   #tela_ajuda_qrcode_quadro {
      display: none;
      position: absolute;
      height: 60px;
      z-index: 0;
      background-color: white;
      border: 1px rgb(200,200,200) solid;
      padding: 4px;
   }
</style>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 container-footer" style="padding: 0px;">
   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-background" style="padding: 0px; background: #FFF;">
      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="background: #FFF; height: 60px;padding: 5px;">
         <a href="https://seal.digicert.com/seals/popup/?tag=RALy-m78&url=atende.net&lang=pt&cbr=1728501212766" target="_blank">
            <img alt="Selo Norton" src="estrutura/portal/images/norton_secured.png" style="height: 50px;">
         </a>
         <a href="https://seal.digicert.com/seals/popup/?tag=RALy-m78&url=atende.net&lang=pt&cbr=1728501212766" target="_blank">
            <img alt="Selo Digicert" src="estrutura/portal/images/digicert_secured.png" style="height: 50px;">      
         </a>
      </div>
      <div id="container_consulta_autenticidade" class="col-lg-4 col-md-4 col-sm-12 col-xs-12 padding-small" style="padding: 0px; padding-top: 14px;">
         <div id="tela_ajuda_qrcode_quadro">
            <table style="width: 100%;">
               <tbody>
                  <tr>
                     <td align="left"><p id="tela_ajuda_qrcode_quadro_texto" style="font-size: 11px;">Localize o código de autenticidade conforme indicado ao lado:</p></td>
                     <td align="right"><span id="tela_ajuda_qrcode_quadro_imagem"><img src="https://camarapanambi.atende.net/social/estrutura/portal/images/qr_code.png" width="42px"></span></td>
                  </tr>
               </tbody>
            </table>
         </div>
         <div id="abrir_tela_ajuda_qrcode" style="width: 34px; float: left; margin-right: 4px;">
            <img src="https://camarapanambi.atende.net/social/estrutura/portal/images/imagem_qrcode.png" height="34px" onclick="exibirTelaAjudaQRCode();" onmouseover="$(this).css('cursor', 'pointer');" onmousedown="$(this).css('cursor', '');" title="Como funciona o código de autenticidade." alt="Como funciona o código de autenticidade."/>
         </div>
         <div class="input-group">
            <input type="text" class="form-control" id="cod_autenticidade" autocomplete="off" onfocus="exibirQuadroAjudaQRCode(true);" onblur="exibirQuadroAjudaQRCode(false);" style="height: 34px; background: #FFF; border: 1px solid #c8c8c8; color: #3C3F41 !important; -webkit-text-fill-color: #3C3F41 !important; " placeholder="Código de autenticidade">
            <span class="input-group-btn">
               <button class="btn btn-default" style="background: #FFF; border-radius: 0px; border-color: #c8c8c8; color: #939597; outline: 0;" onfocus="" onclick="imprimirAutenticacao();">Verificar</button>
            </span>
         </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 container-tecnologia-ipm" style="text-align: right; background: #FFF; height: 60px;">
         <img src="https://camarapanambi.atende.net/social/estrutura/portal/images/portal_logo_ipm.png" style="margin-top: 7px;">
      </div>
   </div>
</div>

				</div>
			</div>
		</main>			
		<div id="painel_leitura" class="shadow" style="position: absolute; display: none; overflow: hidden; background: #FFF; z-index: 9999; width: 80%; height: auto;">
			<div id="painel_leitura_imagem" style="height: 5px;"></div>
			<div style="padding: 10px; padding-top: 5px;">
				<div id="painel_leitura_titulo" style="padding-bottom: 5px; border-bottom: 1px solid #dddddd; font-size: 20px; font-weight: bold;"></div>
				<div id="painel_leitura_mensagem" style="font-size: 14px; text-align: justify; padding-top: 10px;"></div>					
			</div>
			<div id="painel_leitura_footer" style="background: #FFF; position: absolute; bottom: 10px; border-top: 1px solid #dddddd; padding-top: 8px; text-align: center; width: 100%;">			
				<span id="btn-fechar" style="cursor: pointer; padding: 5px;" onclick="closePainel();">Fechar</span>
			</div>
		</div>
		<div id="painel_certificado" class="shadow" style="position: absolute; display: none; overflow: hidden; background: #FFF; z-index: 9999; width: 500px;">
			<div id="painel_certificado_imagem" style="height: 5px; background: #3498DB;"></div>
			<div style="padding: 10px; padding-top: 5px; padding-bottom: 0;">
				<div id="painel_certificado_titulo" style="padding-bottom: 5px; border-bottom: 1px solid #dddddd; font-size: 20px;">
					Selecione o certificado
				</div>
				<div id="painel_certificado_mensagem" style="font-size: 14px; padding-top: 5px;"></div>					
			</div>
			<div id="painel_certificado_footer" style="background: #FFF; border-top: 1px solid #dddddd; padding-top: 8px; padding-bottom: 8px; text-align: center; width: 100%;">
			</div>
		</div>
		<div id="no_scurinhu" style="position: absolute; background: rgba(0,0,0,0.3); height: 100%; width: 100%; display: none; z-index: 999;"></div>						
	</body>
</html>	
