*{margin: 0; padding: 0; box-sizing: border-box; font-family: "Comfortaa", sans-serif; font-size: 10pt;}

/*Configuração para celulares menores*/
@media screen and (max-width: 480px){	
	
}

/*Configuração para telas menores que as de um notebook*/

@media screen and (min-width: 481px) and (max-width: 768px){	
	
}
/*Config do meu celular Samsung*/
@media screen and (min-width: 769px) and (max-width: 1199px){	
	
}


/*Configuração para notebook e demais telas maiores*/
@media screen and (min-width: 1024px){	

	.fundo{	position: absolute;	top: 0;	left: 0;width: 100%;height: 100%;background: url('../img/fundo.png') center center no-repeat;
		background-size: cover;
		clear: both;
	}

	.fundots{	position: absolute;	left: 0;width: 100%;height: 100%;background: url('../img/fundo.png') center center no-repeat;
		background-size: cover;
		z-index: 1;
		clear: both;
	}

	.fundopainel{	position: absolute;	left: 0;width: 100%;height: 100%;background: url('../img/fundo.png') center center no-repeat;
		background-size: cover;
		clear: both;
	}

	.fundotresult{	position: absolute;	left: 0;width: 100%;height: 100%;background: url('../img/fundo_result.png') center center no-repeat;
		background-size: cover;
		clear: both;
	}

	.progresso {
	    display: none;
	    position: fixed;
	    left: 50%;
	    top: 50%;
	    -webkit-transform: translate(-50%, -50%);
	    transform: translate(-50%, -50%);
	    text-align: center;
	    font-size: 16px;
	    font-weight: bold;
	    background-color: white;
	    border: 1px solid black;
	    height: 90px;
	    width: 120px;
	}


	.loader-wrapper {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: #242f3f;
	  display:flex;
	  justify-content: center;
	  align-items: center;
	}

	.loader {
	  display: inline-block;
	  width: 30px;
	  height: 30px;
	  position: relative;
	  top: 50%;                       /******** <- Remove this line *********/
	  border: 4px solid #Fff;
	  animation: loader 2s infinite ease;
	}

	form#formConfig{
		position: absolute;
		width: 650px;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
		border: 1px solid #c1c1c1;
		background: #fff;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 2px 2px 2px 0px #c1c1c1;
	}


	.form{
		position: absolute;
		width: 400px;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
		border: 1px solid #c1c1c1;
		background: #fff;
		padding: 30px;
		border-radius: 5px;
		box-shadow: 2px 2px 2px 0px #c1c1c1;
	}

	.titulo{	
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
		font-style: bold;
		color: gray;		
	}

	.imagemlogo{
		float: left;
		width: 60%;
		height: 40px;
		margin-bottom: 20px;
		text-align: center;
	}

	.Copyright{
		float: left;
		width: 100%;
		text-align: center;
		margin-top: 30px;
		font-size: 10px;
	}

	input#btnPesquisar{
		border: 1px solid #bbb;
		border-radius: 3px;
		font-size: 16px;
		padding: 0 10px;
		height: 30px;
		margin-left: 10px;
		background-color: #6E7B8B;
		color:white;
	}

	input#btnPesquisar:hover{
		border: 1px solid black;
		background-color: #2F4F4F;		
	}

	input#btnAddUsuario{
		border: 1px solid #bbb;		
		border-radius: 3px;
		font-size: 16px;
		padding: 0 10px;
		height: 30px;
		margin-left: 10px;
		color: white;
		background-color: #BDB76B;
	}

	input#btnAddUsuario:hover{
		border: 1px solid black;
		background-color: #2F4F4F;		
	}

	input#btnUsuario{
		border:0px solid white;		
		background-color: white;
		color: black;
		width: 100px;
		height: 25px;
		font-size: 12px;
		box-shadow: 0px 0px 0px 0px #fff;
	}	

	#telefone{
		float: left;
		width: 100%;
		height: 30px;
		margin: 15px 0;
		border: 1px solid #bbb;
		border-radius: 3px;
		font-size: 16px;
		padding: 0 10px;
		text-align: center;
	}

	input[type='text'], input[type='password']{
		float: left;
		width: 100%;
		height: 30px;
		margin: 15px 0;
		border: 1px solid #bbb;
		border-radius: 3px;
		font-size: 16px;
		padding: 0 10px;
		text-align: center;
	}

	input[type='date']{
		float: left;
		width: 100%;
		height: 30px;
		margin: 15px 0;
		border: 1px solid #bbb;
		border-radius: 3px;
		font-size: 16px;
		padding: 0 10px;
		text-align: center;
	}

	input[type='submit']{
		width: 30%;
		float: left;
		height: 35px;
		width: 100%;
		background-color:#36648B;
		color: white;
		border: none;
		border-radius: 3px;
		font-weight: bold;
		margin-top: 5px;
		box-shadow: 0px 2px 2px 0px #c1c1c1;
	}

	input[type='submit']:hover{
		opacity: 0.8;
		box-shadow: 0px 2px 2px 0px #000;
	}

	input.btnnovaconsulta{
		background-color: #8DB6CD;
		height: 35px;
	}

	input.btnnovaconsulta:hover{
		opacity: 0.8;
	}

	div#painel_comandos{
		display: inline;
		width: 600px;
		height: auto;
		right: 25px;		
		bottom: 25px;
		margin: 0px auto 0px auto;
		position: fixed;
		padding: 15px;
		border:1px solid black;
		background-color: #c1c1c1;
	}

	input#bntPesquisarFiltros{	
		float: right;	
		background-color: green;
		border:black;		
		right: 5;		
		margin-top: 25px;	
		width:90px;
		height: 25px;
		box-shadow: 1px solid #c1c1c1

	}

	input.btnAssociar{
		float: left;		
		position: fixed;
		width: 260px;
		height: 25px;
		margin-top: 0;		
		/*height: 26px;
		top: 75px;
		right: 30px;			
		background-color: #000;
		color: white;*/
		border: 1px solid #c1c1c1;
		text-align: center;
	}

	input.btnAssociar:hover{
		background-color: green;
		color: #fff;
	}

	tr table.tbComandoAssociar {
		padding-bottom: 10px;
	}


	.bar{
		width: 100%;
		height: auto;

	}

	.alerta_permissao{
		width: 50%;
		padding: 20px;
		height: auto;		
		/*border:1px solid #c1c1c1;*/
		border-radius: 5px;
		top: 30%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
		position: absolute;		
		color: blue;
		font-weight: bold;		
	}

	


	.alertaerro{
		float: left;
		text-align: center;
		width: 100%;
		height: auto;
		background-color: red;
		border-radius: 3px;
		color:white;
		padding: 10px 10px 10px 10px;
		margin-top: 10px;
		font-size: 14px;
		font-weight: bold;
	}

	.alertasucesso{
		float: left;
		text-align: center;
		width: 100%;
		height: auto;
		background-color: rgb(22, 95, 44);
		border-radius: 3px;
		color:white;
		padding: 10px 10px 10px 10px;
		margin-top: 10px;
		font-size: 14px;
		font-weight: bold;
	}

	.alertainfo{
		float: left;
		text-align: center;
		width: 100%;
		height: auto;
		background-color: rgb(122, 96, 9);
		border-radius: 3px;
		color:white;
		padding: 10px 10px 10px 10px;
		margin-top: 10px;
		font-size: 14px;
		font-weight: bold;
	}
		

	.barrapesquisa{
		position: absolute;	top: 0;	left: 0;width: 100%;height: 7%;background: #36648B center center no-repeat;
		background-size: cover
	}

	.cardsagrupados{
		position: absolute;
		display: line;
		width: auto;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
	}

	.card{
		float: left;
		width: 200px;
		height: auto;		
		margin: 10px;
		padding: 10px;
		border: solid 1px #c1c1c1;
		border-radius: 10px;
		background-color: #fff;		
	}

	#conteudocard{
		position: absolute;		
		width: auto;
		height: auto;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
	}

	#cardviewchat{
		float: left;
		width: 160px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/chat_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;		
	}

	#cardviewts{
		float: left;
		width: 160px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/tarifasocial_f_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;
	}

	#cardviewcr{
		float: left;
		width: 160px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/cadastro_rural_f_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;
	}

	#cardviewcf{
		float: left;
		width: 160px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/certificacao_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;
	}

	#cardviewos{
		float: left;
		width: 159px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/nota_servico_f_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;

	}

	#cardviewsm{
		float: left;
		width: 158px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/sesmt_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;
	}

	#cardviewfg{
		float: left;
		width: 158px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/config_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;
	}


	#cardviewrel{
		float: left;
		width: 158px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/releitura_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;
	}
	

	#cardviewirreg{
		float: left;
		width: 158px;
		height: 170px;		
		margin: 5px;
		padding: 10px;
		border: solid 1px #36648B;
		border-radius: 10px;
		background-color: #fff;
		background: url('../img/irreg_b.png') center center no-repeat;
		color: #36648B;
		position: relative;
		font-size: 11pt;
	}

	#cardviewchat:hover{
		background-color: #36648B;
		background: url('../img/chat_a.png') center center no-repeat;
		color: #fff;
	}

	#cardviewrel:hover{
		background-color: #36648B;
		background: url('../img/releitura_a.png') center center no-repeat;
		color: #fff;
	}

	#cardviewfg:hover{
		background-color: #36648B;
		background: url('../img/config.png') center center no-repeat;
		color: #fff;
	}

	#cardviewirreg:hover{
		background-color: #36648B;
		background: url('../img/irreg_a.png') center center no-repeat;
		color: #fff;
	}

	#cardviewsm:hover{
		background-color: #36648B;
		background: url('../img/sesmt_a.png') center center no-repeat;
		color: #fff;
	}

	#cardviewcf:hover{
		background-color: #36648B;
		background: url('../img/certificacao_a.png') center center no-repeat;
		color: #fff;
	}

	#cardviewos:hover{
		background-color: #36648B;
		color: #fff;
		background: url('../img/nota_servico_f_a.png') center center no-repeat;
	}

	#cardviewcr:hover{
		background-color: #36648B;
		color: #fff;
		background: url('../img/cadastro_rural_f_a.png') center center no-repeat;
	}

	#cardviewts:hover{
		background-color: #36648B;
		color: #fff;
		background: url('../img/tarifasocial_f_a.png') center center no-repeat;			
	}


	.titulocard{
		font-weight: bold;	
		position: absolute;
		text-align: center;		
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
		bottom: 0;
	}

	.imagem{
		float: left;
		width: 100%;
		height: 200px;
		margin-bottom: 10px;
	}

	.subtitulo{
		font-style: bold;
		margin-bottom: 5px
	}

	.descricao{
		font-size: 13px;
		margin-bottom: 8px;
	}

	.btnacessar{
		width: 100%;
	}
	

/*Formatação da tabela de resultado: ts.php */

	table.nis {

		border: 1px #c1c1c1 solid;
		background: #fff;
		padding: 20px;
		border-radius: 5px;
		font-style: bold;
		color: gray;
		position: absolute;
		top: 53%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);	
		z-index: 100;	
	}

	table.bpc {

		border: 1px #c1c1c1 solid;
		background: #fff;
		padding: 20px;
		border-radius: 5px;
		font-style: bold;
		color: gray;
		position: absolute;
		top: 53%;
		left: 10%;
		margin-right: -50%;
		transform: translate(-50%,-50%);		
	}

	table#tablePermissoes{		
		background: #fff;
		padding: 5px;		
		font-style: bold;
		color: gray;		
	}


	div#conteudo{
		border: 1px #c1c1c1 solid;
		background: #fff;
		padding: 20px;
		border-radius: 5px;
		font-style: bold;
		color: gray;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
	}

	div#divOpcoesAdm{
		margin:0px;		
		float: left;
		position: absolute;
		display: inline;
		top: 50px;
		width: 100%;
		height: 100%;			

	}	

	#painelEsquerdo{
		float: left;
		width: 19%;
		height: 100%;
		/*border:1px solid gray;*/

	}

	#painelCentro{
		margin-top: 0px;		
		float: left;
		left: 0px;
		width: 62%;
		height: 100%;		
		/*border:5px solid black;*/

	}

	#painelCentro table{
		width: 100%;
	}



	#painelDireito{
		float: right;
		padding: 5px;
		display: block;
		position: fixed;
		width: 18%;
		height: 50%;
		right: 2px;		
		/*background-color: orange;
		/*border:1px solid gray;*/

	}

	#tbListaRanking{
		padding: 5px;
		font-size: 11px;
		border:1px solid #c1c1c1;
		margin:20px 0px 10px 0px;
		border-collapse: collapse;
		background-color: white;
		max-height: 60%;		
		overflow-y: auto;    /* Trigger vertical scroll    */
   		overflow-x: hidden;  /* Hide the horizontal scroll */
	}

	#tbListaRanking td{		
		border:1px solid #c1c1c1;
		padding: 4px;
	}

	#tbListaRankingTitulo{
		padding: 10px;
		background-color: #000;
		color: white;
		width: auto;
		margin:0px auto 0px auto;
		text-align: center;
		border:1px solid black;
	}

	#tbRowTitulo{
		padding: 20px;
	}

	#tbRowTitulo td{
		height: 20px;
		background-color: #000;
		color:white;
		margin-left: 20px;
		font-weight: bold;
		align-items: center;
		
	}

	table#tbListaUsuarios{	
		margin-left: 5px;	
		width: 100%;
		border:1px solid #c1c1c1;	
		border-collapse: collapse;
		overflow:auto;	
	}

	table#tbListaUsuarios td{
		font-size: 12px;
		margin:0px;
		width: auto;
		padding: 5px;
		border:1px solid #c1c1c1;
	}

	table#tbListaUsuarios tr{
		padding: 15px;
		border:1px solid #c1c1c1;	
	}

	table#tbOpcoesAdm{
		width: 35%;
		height: 200px;
		padding: 10px;
		border:1px solid #c1c1c1;
	}

	#tabela_resultado{
		padding: 10px;
		background-color: #fff;
		position: absolute;
		border:1px solid #c1c1c1;
		width: auto;
		height: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
	}

	#linha{
		border:1px solid #c1c1c1;
	}

	div.contedo_resultado{
		float: left;
	}
	

	table#lista_os{	
		border: 1px #c1c1c1 solid;
		background: #fff;
		padding: 5px;			
		border: 1px #c1c1c1 solid;	
		border-radius: 0px;
		position: relative;
		top: 50px;

	}

	td#linhaprincipal{
		background-color: #c1c1c1;
		border-color: #c1c1c1;
		border: 1px solid #c1c1c1;
		color: #fff;
		font-weight: bold;
		padding: 2px;
	}

	tr#trlinhaprincipal{
		padding: 8px;
	}

	

	.clear{
		clear: both;
	}

	td.tbtitulo {
		padding: 7px;
		text-align: right;
		text-transform: uppercase;
		color: darkslategray;
		font-style: bold;
		font-size: 90%;
		font-weight:bold ;
		background-color: #fff;
	}

	td.resultado {
		font-size: 90%;
		padding: 7px;
		border: 1px #c1c1c1 solid;
		border-radius: 5px;
		text-align: left;
		height: auto;
		width: 280px;
		text-transform: uppercase;
		background-color: #fff;
		font-style: bold;
		color: gray;
	}

	td.status-ts-possui {
		padding: 7px;
		border: 1px #c1c1c1 solid;
		border-radius: 5px;
		text-align: left;
		height: auto;
		text-transform: uppercase;
		color: rgb(38, 221, 38);
		font-style: bold;
		background-color: #fff;
	}

	td input.lupa {
		background-color: #708090;
		padding: 5px;
		width: 45px;
		height: 35px;
		border: 1px #708090 solid;
		border-radius: 5px;
		line-height: 0.1;
	}	

	div.consulta_cod{
		position: absolute;
		border: 1px solid #c1c1c1;
		width: 25%;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%,-50%);
		background: #fff;
		padding: 30px;
		border-radius: 5px;
		z-index: 98;
	}
	
	table.tbRsultadoFinalCadastroNis{
		width: 650px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		border: 1px solid #c1c1c1;
		transform: translate(-50%,-50%);
		padding: 30px;
	}

	.titulosomos{
		font-size: 25px;
		text-align: center;
		color: #fff;
		margin-bottom: 20px;
		text-shadow: 2px 2px #c1c1c1;
	}

	/* MENU TOPO */

	nav.menu-topo {		
		font-family: Comfortaa, sans-serif;
		font-weight: bold;		
		width: 100%;
		height: 35px;
		background-color: #36648B;
		padding: 10px;
		position: fixed;
		top: 0px;
		z-index: 99;	

	}

	/*MENU TOPO DA LISTA DE ORDENS DE SERVIÇO*/
	nav.menu-topo-os{
		font-family: Comfortaa, sans-serif;
		font-weight: bold;		
		width: 100%;
		height: 48px;
		background-color: #36648B;
		padding: 15px 20px 15px 65px;
		top: 0%;
		position: fixed;		
	}

	nav.menu-topo-os li, a {
		color: #fff;
		display: inline-block;
		text-transform: none;
		
	}


	li.item-menu {
		margin-right: 20px;
	}

	li.item-menu-painel {
		margin: 0px 20px 0px 0px;
	}

	img#imgConfig{
		width: 32px;
		height: 32px;	
		position: absolute;	
		position: fixed;
		top: 8px;
		left: 300px;
	}

	li.item-menu-sair{
		float: right;		
	}

	nav.menu-topo li, a {
		color: #fff;
		display: inline-block;
		text-transform: none;
		
	}
	a:link{
		text-decoration: none;
	}

	nav.menu-topo a:link,a:hover{
		color: #CAE1FF; 
		text-decoration:none;
		font-weight: bold;
	}

	.link_numero_os{
		color: black;
		font-size: 8pt;
	}

	#minha_uc{
		margin-top: 30px;
		color: blue;
		text-align: center;
		width: 100%;

	}

	#minha_uc:hover{
		color: green;
	}

	/*botões do painel2*/
	#btnts{
		width: 160px;
		height: 180px;
		margin:5px;
		border-radius: 5px;
		border: 1px solid #c1c1c1;
		background-color: #fff;
	}

	#btnts:hover{
		width: 160px;
		height: 180px;
		margin:5px;
		border-radius: 5px;
		border: 1px solid orange;
		background-color: orange;
		background-image: url('img/ts_azul.png') center center no-repeat;
	}	

	div#divteste{
		width: 500px;
		height: auto;
	}

	.tim {
	    border: 0;
	    padding: 0;
	    display: inline;
	    background: none;
	    border:none;
	    text-decoration: underline;
	    color: blue;
	}

	#option_res_pes{
		background:none;
		width: 600px;
		height: auto;
		padding: 5px;
		margin: 2px;
	}

	#option_res_pes:hover {		
    	cursor: pointer;
    	color: #708090;
    	text-decoration: underline;
	}

	select.select-css {
	    display: block;
	    font-size: 8pt;
	    font-family: sans-serif;
	    font-weight: 700;
	    color: #444;
	    line-height: 1.3;
	    padding: .3em 1.4em .5em .6em;
	    width: 100%;
	    max-width: 100%; 
	    box-sizing: border-box;
	    margin: 0;
	    border: 1px solid #aaa;
	    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	    border-radius: .5em;
	    -moz-appearance: none;
	    -webkit-appearance: none;
	    appearance: none;
	    background-color: #fff;
	    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	    background-repeat: no-repeat, repeat;
	    background-position: right .7em top 50%, 0 0;
	    background-size: .65em auto, 100%;
	}
	.select-css::-ms-expand {
	    display: none;
	    
	}
	.select-css:hover {
	    border-color: #888;
	}
	.select-css:focus {
	    border-color: #aaa;
	    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	    box-shadow: 0 0 0 3px -moz-mac-focusring;
	    color: #222; 
	    outline: none;
	}
	.select-css option {
	    font-weight:normal;
	}

	/*FILTRO PARA OS*/

	select.select_filtro_agente{
		display: inline;
	    font-size: 8pt;
	    font-family: sans-serif;
	    font-weight: 700;
	    color: #444;
	    line-height: 1.3;
	    padding: .3em 1.4em .5em .6em;
	    width: 50%;
	    max-width: 50%; 
	    box-sizing: border-box;
	    margin: 1px;
	    border: 1px solid #aaa;
	    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	    border-radius: .5em;
	    -moz-appearance: none;
	    -webkit-appearance: none;
	    appearance: none;
	    background-color: #fff;
	    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	    background-repeat: no-repeat, repeat;
	    background-position: right .7em top 50%, 0 0;
	    background-size: .65em auto, 100%;
	}

	select.select_filtro_uac{
		display: inline;
	    font-size: 8pt;
	    font-family: sans-serif;
	    font-weight: 700;
	    color: #444;
	    line-height: 1.3;
	    padding: .3em 1.4em .5em .6em;
	    width: 40%;
	    max-width: 40%; 
	    box-sizing: border-box;
	    margin: 1px;
	    border: 1px solid #aaa;
	    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	    border-radius: .5em;
	    -moz-appearance: none;
	    -webkit-appearance: none;
	    appearance: none;
	    background-color: #fff;
	    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	    background-repeat: no-repeat, repeat;
	    background-position: right .7em top 50%, 0 0;
	    background-size: .65em auto, 100%;
	}

	select.select_filtro_servico{
		display: inline;
	    font-size: 8pt;
	    font-family: sans-serif;
	    font-weight: 700;
	    color: #444;
	    line-height: 1.3;
	    padding: .3em 1.4em .5em .6em;
	    width: 35%;
	    max-width: 35%; 
	    box-sizing: border-box;
	    margin: 1px;
	    border: 1px solid #aaa;
	    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	    border-radius: .5em;
	    -moz-appearance: none;
	    -webkit-appearance: none;
	    appearance: none;
	    background-color: #fff;
	    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	    background-repeat: no-repeat, repeat;
	    background-position: right .7em top 50%, 0 0;
	    background-size: .65em auto, 100%;	
	}

	select.select_filtro_local{
		display: inline;
	    font-size: 8pt;
	    font-family: sans-serif;
	    font-weight: 700;
	    color: #444;
	    line-height: 1.3;
	    padding: .3em 1.4em .5em .6em;
	    width: 20%;
	    max-width: 20%; 
	    box-sizing: border-box;
	    margin: 1px;
	    border: 1px solid #aaa;
	    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	    border-radius: .5em;
	    -moz-appearance: none;
	    -webkit-appearance: none;
	    appearance: none;
	    background-color: #fff;
	    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	    background-repeat: no-repeat, repeat;
	    background-position: right .7em top 50%, 0 0;
	    background-size: .65em auto, 100%;
	}

	select.select_filtro_supervisor{
		margin-bottom: 2px;
		display: inline;
    	font-size: 8pt;
    	font-family: sans-serif;
    	font-weight: 700;
    	color: #444;
    	line-height: 1.3;
    	padding: .3em 1.4em .5em .6em;
    	width: 99%;
    	max-width: 99%; 
    	box-sizing: border-box;
    	margin: 1px;
    	border: 1px solid #aaa;
    	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    	border-radius: .5em;
    	-moz-appearance: none;
    	-webkit-appearance: none;
    	appearance: none;
    	background-color: #fff;
    	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    	linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    	background-repeat: no-repeat, repeat;
    	background-position: right .7em top 50%, 0 0;
    	background-size: .65em auto, 100%;
	}	
	

	#opcoes_filtro{
		display: inline;
		padding: 10px 3px;
		top: 48px;		
		height: 100;
		width: 27%;
		margin: 2px;
		position: fixed;
		background-color: #fff;
	}

	#div_barra_pesquisa_os{
		display: inline;
		padding: 10px 3px;
		top: 20px;		
		height: auto;
		width: 35%;
		margin: 2px;
		position: fixed;
		background-color: #fff;
		/*border:1px solid #c1c1c1;*/
	}

	div#divbtnAssoc{
		height: 60px;
		left: 0;
		padding: 2px 5px;
	}
	

	/*TABELA DE ORDEM DE SERVIÇO*/

	table.table_list {
		text-align: center;
		text-transform: uppercase;
		/* border: 1px #c1c1c1 solid; */
		background: #fff;
		padding: 10px 2px;
		border-radius: 0px;
		color: gray;
		position: absolute;
		top: 100px;
		left: 0%;
		width: 35%;
		margin-left: -1px;			
	}

	table.table_list a:hover{
		color: blue;
		font-weight: bold;		
	}


	.table_list tr:nth-child(2n+1) {
		/*background-color: #0489B1;*/
		background-color: #f2f2f2;
		color: black;
		font-weight: bold;
	}

	div#fundodivmapa{
		background: #0489B1;
	}

	#linhacheck{
		background:#fff;
	}

	table.table_list th {
		color: darkslategray;
		border-bottom: 2px darkslategray solid;
	}

	table.table_list td {
		font-size: 90%;
		border-collapse: collapse;
		border: 1px #C1C1C1 solid;
		border-radius: 5px;
		padding: 7px;
		font-family: monospace;	
	}

	table.table_list .table_list_bold {
		font-weight: bold;
		border: none;
		font-family: inherit;
	}

	table.table_list .table_list_serv {
		font-weight: bold;
		border: none;
		font-family: inherit;
	}

	table.table_list td.table_list_left {
		text-align: left;
	}	

	table.table_list tr.linha_filtro td{
		position: fixed;
		width: 17%;
	}

	label#rotulo_check_todos{
		margin:5px;
		padding: 5px;
	}

	/*DIV COM A PÁGINA DA LISTA DE OS*/

	div.contudo_lista_os{
		float: left;
	}

	#linhafiltro{
		background:#fff;
	}


	/*ROTULO DA TELA DE LOGIN*/

	#rotulo_ip{
		position: fixed;
		right: 20px;
		bottom: 30px;
	}

	/*BARRA DE MENU LATERAL*/

	#menu_icon{
		width: 30px;
		height: 30px;
	}

	.barra_menu_os{	
		top: 0;	
		background-color: #333;
		height: 100%;
		width: 250px;
		position: absolute;
		position: fixed;
		transition: all .2s linear;
		left: -250px;
	}

	.barra_menu_adm{
		float: left;
		display: list-item;
		top: 0px;
		background-color: #333;
		height: 100%;
		width: 250px;		
		position: fixed;	
	}

	.barra_menu_adm a{
		width: 100%;	
	}

	#check{
		display: none;
	}

	#iconMenu{
		cursor: pointer;
		padding: 8px;
		position: absolute;
		position: fixed;
		z-index: 1;
	}

	#nav_menu_os a{		
		display: inline;
		text-decoration: none;
	}

	#nav_menu_adm{
		width: 100%;
		position: absolute;
		top: 48px;
	}

	.img_area_adm{
		padding: 20px;
		left: 50%;
		width: 50%;
		height: auto;
	}

	table#tbDetalhesAtrasos{
		padding: 5px;
		width: 100%;
		height: 15%;
		/*border:1px solid black;*/
		border-collapse: collapse;

	}

	p#mensagemAtrasoOs{
		margin: 5px;
		font-weight: bold;
		font-size: 12px;
	}

	#startdate1{
		width: 95%;
		margin: 1px;
	}

	#startdate2{
		width: 95%;
		margin: 1px;
	}

	#painelRelatoriosQuantidade{
		width: 20%;
		height: 92%;
		right: 5px;
		position: absolute;
		position: fixed;
		top: 48px;
		display: block;	
		float: left;	
		/*background-color: #FFEFD5;*/
		/*border: 1px solid black;*/
	}

	#painelRelatorioTabelas{
		width: 80%;
		height: 92%;
		left: 0;
		margin: 0 auto 0 auto;		
		top: 48px;
		display: inline-block;
		position: fixed;
		/*float: left;
		/*border:1px solid green;*/
	}

	#painelColunas{
		/*border: 1px solid red;*/
		width: 50%;
		height: 92%;
		position: fixed;
		display: block;
		float: left;
	}

	#painelRanking{
		border: 1px solid red;
		width: 24%;
		height: 90%;
		position: fixed;
		display: block;	
		background-color: 	white;
	}

	#coluna1{
		/*border:1px solid black;*/
		width: 98%;
		height: 48%;
		margin: 5px;
	}

	#coluna2{
		/*border:1px solid black;*/
		width: 98%;
		height: 48%;
		margin: 5px;
	}

	#coluna3{		
		/*border:1px solid black;*/
		width: 29%;
		height: auto;
		margin: 10px 5px;
		right: 20%;
		position: fixed;
		padding: 15px;
		background-color:#E8E8E8;
		border-radius: 10px;
	}

	

	#boxQuantidadeAguardandoValidacao{
		padding: 20px;
		width: 95%;
		height: 100px;
		background-color: #EEEEE0;		
		color: black;		
		font-weight: bold;
		margin:10px;
		border-radius: 10px;
		/*border: 1px solid black;*/
	}

	#boxQuantidadeAguardandoValidacao p{
		font-size: 12pt;
	}

	#boxQuantidadeAguardandoValidacao label{
		font-size: 26pt;
	}

	#boxQuantidadeCarregadasPelosAgentes{
		padding: 20px;
		width: 95%;
		height: 100px;
		background-color: #708090;		
		color: white;		
		font-weight: bold;
		margin:10px;
		border-radius: 10px;
		/*border: 1px solid black;*/
	}

	#boxQuantidadeCarregadasPelosAgentes p{
		font-size: 12pt;
	}

	#boxQuantidadeCarregadasPelosAgentes label{
		font-size: 26pt;
	}

	#boxQuantidadeAbertasNaoDistribuidas{
		padding: 20px;
		width: 95%;
		height: 100px;
		background-color: #8FBC8F;		
		color: white;		
		font-weight: bold;
		margin:10px;
		border-radius: 10px;
		/*border: 1px solid black;*/
	}

	#boxQuantidadeForaDoPrazo{
		padding: 20px;
		width: 95%;
		height: 100px;
		background-color: #CD5C5C;		
		color: white;		
		font-weight: bold;
		margin:10px;
		border-radius: 10px;
		/*border: 1px solid black;*/
	}

	#boxQuantidadeAbertasNaoDistribuidas p{
		font-size: 12pt;
	}

	#boxQuantidadeAbertasNaoDistribuidas label{
		font-size: 26pt;
	}

	#boxQuantidadeForaDoPrazo p{
		font-size: 12pt;
	}

	#boxQuantidadeForaDoPrazo label{
		font-size: 26pt;
	}

	#boxQuantidadeTotalOs{
		padding: 20px;
		width: 95%;
		height: 100px;
		background-color: orange;		
		color: white;		
		font-weight: bold;
		margin:10px;
		border-radius: 10px;
		/*border: 1px solid black;	*/	
	}



	#boxQuantidadeTotalOs p{
		font-size: 12pt;
	}

	#boxQuantidadeTotalOs label{
		font-size: 26pt;
	}

	#boxQuantidadeOs{
		top: 70px;
		padding: 20px;
		width: 180px;
		height: 80px;
		right: 20px;
		background-color: red;		
		color: white;		
		font-weight: bold;
		position: absolute;
		position: fixed;
		border-radius: 10px;
	}

	#boxQuantidadeOs p{
		font-size: 12pt;
	}

	#boxQuantidade{
		float: left;		
		margin-top: 10px;
		padding: 20px;
		width: 100%;
		height: 100px;
		right: 10px;
		background-color: green;		
		color: white;		
		font-weight: bold;
		border-radius: 10px;
	}

	#boxQuantidade p{
		font-size: 12pt;
	}	

	#boxQuantidade label{
		font-size: 30pt;
		text-align: right;
	}

	#boxQuantidadePreto{
		float: left;		
		margin-top: 10px;
		padding: 20px;
		width: 100%;
		height: 100px;
		right: 10px;
		background-color: black;		
		color: white;		
		font-weight: bold;
	}

	#boxQuantidadePreto p{
		font-size: 12pt;
	}	

	#boxQuantidadePreto label{
		font-size: 30pt;
		text-align: right;
	}

	#nav_menu_os{
		width: 100%;
		position: absolute;
		top: 48px;
	}

	.link{		
		padding: 12px 20px;		
		font-size: 10pt;
		height: 40px;
		/*transition: all .2s linear;*/
	}

	.link:hover{
		background-color: #494950;
		border-left: 5px solid #36648B;
		padding-left: 15px;
	}

	#check:checked ~ .barra_menu_os{
		transform: translateX(250px);
	}

	#check:checked ~ .barra_menu_os nav a .link{
		opacity: 1;
	}

	#check:checked ~ .barra_menu_adm nav a .link{
		opacity: 1;
	}

	div.dados_usuario img{
		top: 0;		
		width: 100%;		
		color: white;
		background-color: #404950;				
		
	}	

	p#txtMensagemSomos{
		display: none;
		color: white;
		font-weight: bold;
		bottom: 50px;
		left: 50%;
		margin-right: -50%;
		padding: 5px;
		transform: translate(-50%,-50%);
		position: absolute;
		background-color: #000;			
	}

	#textoCarregando{
		position: fixed;
		bottom: 60px;
		left: 50%;
		margin-right: -50%;
		padding: 5px;
		transform: translate(-50%,-50%);		
	}

	#certificado {
		top: 20%;
		float: left;
		margin-right: 60%;
		position: absolute;
		width: 80px;
		height: 60px;
	}


	.loader {
		position: fixed;
		top: 50%;
		bottom: 50px;
		left: 47%;
		margin-right: -50%;
		padding: 5px;
		transform: translate(-50%,-50%);
		margin: 0px auto 0px auto;
		border: 12px solid #f2f2f2;
		border-radius: 50%;
		border-top: 12px solid #3498db;
		width: 90px;
		height: 90px;			
		-webkit-animation: spin 2s linear infinite; /* Safari */
		animation: spin 2s linear infinite;			  
	}

	/* Safari */
	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}
       
	#btnMultiFamiliarSim{
		background-color: green;
		color: white;
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
		border-radius:5px;
	}

	#btnMultiFamiliarNao{
		background-color: red;
		color: white;
		width: 100%;
		padding: 10px;
		border-radius:5px;
	}

	.notificacoes {
		border:  1px #c1c1c1 solid;
		background: #fff;
		padding: 10px;
		margin-top: 30px;
		margin-left: 15px;
		margin-right: 15px;
	}


}