.bloco {
			width: 800px;
			margin-right: auto;
			margin-left: auto;
		}

		.circulo {
			width: 15px;
			height: 15px;
			border-radius: 10px;
			box-shadow: 0 0 4px black;

		}

		.marcada {
			background-color: #ce7d7d66 !important;
		}

		.crud {
			font-family: arial, helvetica, sans-serif;
			font-size: 11px;
			width: 70%;
			position: relative;
		}

		.grid {
			font-family: arial, helvetica, sans-serif;
			font-size: 10px;
			width: 100%;
			position: sticky;
			height: auto;
		}

		.cad {
			font-family: arial, helvetica, sans-serif;
			font-size: 11px;
		}

		.form-control {
			font-size: 10px;
			height: 24px;
			font-family: Arial, Helvetica, sans-serif;
			vertical-align: middle;
			margin-top: 1px;
			margin-bottom: 1px;
		}

		.container-xl {
			height: auto;
			min-height: 100vh;

		}

		.table {
			font-size: 9px;
			height: 10px;

		}




		.table-auto {
			max-height: 900px;
			overflow-x: auto;
			overflow-y: auto;
			/*scrollbar-x-position: top;
			scrollbar-y-position: top;*/
		}

		.table-sm {
			font-size: 10px;
		}

		.btn {
			font-size: 10px;
		}

		.center {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}

		#imgpos1 {
			float: right;
		}

		#imgpos2 {
			float: left;
		}

		.sm {
			font-size: 10px;
		}

		.folha {
			background-color: #ccc;
			padding: 0.5em;
		}

		.a4_vertical {
			width: 793px;
			height: 1100px;
			font-family: arial, helvetica, sans-serif;
			font-size: 11px;
		}

		.a4_horizontal {
			width: 1122px;
			height: 793px;
		}

		@media print {
			html, body {
				margin: 0;
				padding: 0;
				border: 0;
			}

			#printable {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 14px;
			}

			#printable~* {
				display: none;
			}
		}

		.img_logo_rfa {
			max-width: 100%;
			width: 102px;
			height: 60px;
			object-fit: contain;
		}

		.img_logo_sgi {

			width: 102px;
			height: 60px;

		}

		#ladoalado {
			display: flex;
			justify-content: space-between;
		}

		.negativo {
			color: #FF6347;
			font-style: bold;
			font-size: 10px;
		}

		.positivo {
			color: indigo;
			font-style: bold;
			font-size: 10px;
		}

		.saldo {
			font-style: bold;
			font-size: 10px;
		}

		/* classe para cabecalho */
		.cabeca {
			border: 1px solid;
			border-color: #000099;
		}

		/* classe para títulos da página   */
		.titulo {
			border: 1px solid;
			border-color: #000099;
			background-color: #ECF5FF;
			color: #0073b7;
			font-family: 'open_sanssemibold', sans-serif;
			font-size: 15px;
			text-transform: uppercase;
			margin-top: 10px;
			text-align: center;
			height: 21px;
			border-radius: 10px;

		}

		.subtitulo {
			border: 1px solid;
			border-color: #000099;
			background-color: #ECF5FF;
			color: #0073b7;
			font-family: 'open_sanssemibold', sans-serif;
			font-size: 12px;
			text-transform: uppercase;
			margin-top: 10px;
			text-align: center;
			height: 20px;
			border-radius: 10px;

		}

		.subtitulo2 {
			border: 1px solid;
			border-color: #000099;
			background-color: #ECF5FF;
			color: #0073b7;
			font-family: 'open_sanssemibold', sans-serif;
			font-size: 9px;
			text-transform: uppercase;
			margin-top: 10px;
			text-align: center;
			height: 12px;
			border-radius: 10px;

		}

		/* classe para tabela igual a ssw   */
		a.srtit2 {
			padding: 0px 0px 0px 0px;
			/*border-right: 0px solid #CCC;*/
			position: relative;
			text-decoration: none;
			vertical-align: middle;
		}

		a.srtit2:active, a.srtit2:hover, a.srtit2:focus {
			color: yellow
		}

		/* titulo da tabela  esquerda*/
		.srtit2 {
			padding: 0px 5px 0px 5px;
			font-size: 10px;
			font-family: Verdana, Arial, sans-serif;
			color: #FFF;
			border-right: 1px solid #CCC;
			font-weight: bold;
			border-bottom: 0px solid #0073b7;
			vertical-align: middle;
			white-space: nowrap;
			overflow: hidden;
			background: #0073b7;
		}

		.srdiv {
			position: relative;
			overflow: visible;
			text-align: left;
		}

		/* linhas da tabel */
		.srtr2 {
			font-size: 10px;
			font-family: Verdana, Arial, sans-serif;
			color: #000;
			cursor: default;
			height: 19;
			vertical-align: middle;
			border-bottom: 1px solid #000;
			border-left: 1px solid #000;
			border-right: 1px solid #000;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.srdvl {
			text-align: left;
			position: relative;
			width: 100%;
			white-space: nowrap;
			overflow: hidden;
		}

		.srtd2 {
			border-right: 1px solid #CCC;
			border-bottom: 1px solid #CCC;
			padding: 0px 5px 0px 5px;
			white-space: nowrap;
			overflow: visible;
		}

		/* AUDITORIA */
		/*edinho 26/06/2023 */
		td div, td div img {
			vertical-align: text-top;
			display: inline-block;
			background: yellow;
		}

		div.thumb {
			position: relative;
			z-index: 0;
			margin: -0.2em;
		}

		div.thumb img {
			/*width: 100px;*/
			width: 100px;
			/*height: 100px;*/
			height: 100px;
			object-fit: cover;
			cursor: pointer;
		}

		tr:hover div.thumb {
			z-index: 9999;
			background: black;
		}

		/* Estilo para a imagem ampliada */
		td:hover div.thumb img {
			width: 800px;
			height: 1024px;
			transform: rotate(270deg);
			display: block;
			position: absolute;
			object-fit: contain;
			top: 50%;
			left: 50%;
			margin: 0;
			box-shadow: 0px 0px 16px 1px #000000;
			background: black;
			z-index: 10000;
			overflow: auto;
		}

		/* Destaque a linha da tabela ao passar o mouse */
		table tr:hover {
			background-color: yellow;
		}

		.green-text {
			color: green;
		}

		.red-text {
			color: red;
		}

		.black-text {
			color: black;
		}

		/* esse é meu codigo
		td:hover div.thumb img {
			width: 800px;
    		height: 1024px;
			transform: rotate(270deg);
    		display: block;
   			position: absolute;
			object-fit: contain;
    		top: 0%;
    		left: 25%;    
    		
			margin: 0 auto;
    		box-shadow:0px 0px 16px 1px #000000;
			
			background: black;
		} */


		/* FINAL AUDITORIA */





		/* tabela positivo */
		.srtr2positivo {
			font-size: 10px;
			font-family: Verdana, Arial, sans-serif;
			color: #090082;
			cursor: default;
			height: 19;
			vertical-align: middle;
			border-bottom: 1px solid #000;
			border-left: 1px solid #000;
			border-right: 1px solid #000;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 4cm;
		}

		/* tabela positivo */
		.srtr2negativo {
			font-size: 10px;
			font-family: Verdana, Arial, sans-serif;
			color: red;
			cursor: default;
			height: 19;
			vertical-align: middle;
			border-bottom: 1px solid #000;
			border-left: 1px solid #000;
			border-right: 1px solid #000;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 4cm;
		}

		/* tr da table zebradas */
		tr:nth-child(even) {
			background-color: lightblue;
		}

		tr:nth-child(odd) {
			background-color: #FFF;
		}

		.red {
			color: red;
		}

		.red_bold {
			color: red;
			font-weight: bold;
		}




		/* buttoes padrão icones */
		.btn2 {
			background-color: DodgerBlue;
			/* Blue background */
			border: none;
			/* Remove borders */
			color: white;
			/* White text */
			padding: 10px 20px;
			/* Some padding */
			font-size: 10px;
			/* Set a font size */
			cursor: pointer;
			/* Mouse pointer on hover */
		}

		.btn2:hover {
			background-color: royalblue;
		}

		/* div para mensagens */
		.divmsg {
			background-color: #D4EDDA;
			height: 13px;
			font-size: 9px;
			color: red;
			border-radius: 10px;
			font-family: Arial, Helvetica, sans-serif;
		}

		/* Rodape */
		#footer {
			clear: both;
			padding: 10px;
			background-color: #999999;
			color: white;
			text-align: right;
			font-size: 11px;
			font-style: italic;
			font-style: bold;
			margin-top: 350px;

		}

		/* flexibiliza o site */
		.wrapper {
			display: flex;
			min-height: 100vh;
			flex-direction: column;
		}

		.wrapper main {
			flex: 1;
		}

		html {
			height: auto;
		}

		/* tela de login */
		.card-container.card {
			width: 350px;
			padding: 40px 40px;
		}

		/*
 * Card component
 */
		.card {
			background-color: #F7F7F7;
			/* just in case there no content*/
			padding: 20px 25px 30px;
			margin: 0 auto 25px;
			margin-top: 50px;
			/* shadows and rounded borders */
			-moz-border-radius: 2px;
			-webkit-border-radius: 2px;
			border-radius: 2px;
			-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
			box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		}

		.profile-img-card {
			width: 96px;
			height: 96px;
			margin: 0 auto 10px;
			display: block;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
		}


		.profile-name-card {
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			margin: 10px 0 0;
			min-height: 1em;
		}

		.reauth-email {
			display: block;
			color: #404040;
			line-height: 2;
			margin-bottom: 10px;
			font-size: 14px;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		.forgot-password {
			color: rgb(104, 145, 162);
		}

		.forgot-password:hover,
		.forgot-password:active,
		.forgot-password:focus {
			color: rgb(12, 97, 33);
		}

		/* classe para Labels dos campos de formularios */

		.labelForm {
			margin-top: 10px;
			background: #f5f5f5;
			width: 100%;
			height: 15px;
			padding: 3px 3px 10px 10px;
			font-weight: 600;
			border-radius: 10px;
			vertical-align: middle;
		}

		label {
			margin-top: 10px;
			background: #f5f5f5;
			width: 100%;
			font-size: 10px;
			height: 15px;
			/*padding:3px 3px 10px 10px*/
			;
			font-weight: 600;
			border-radius: 10px;
			vertical-align: middle;

		}


		/* MARCAR COMO CLICADO */
		a:visited {
			background: red;
		}

		.first {
			margin: 155px auto
		}

		.image-hover {
			transition: transform 0.2s ease-in-out;
		}

		.image-hover:hover {
			transform: scale(1.5);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
			z-index: 1000;
		}


		/* CRIA ICONE ANIMADO*/
		/* span{
	width: 10px;
	height: 10px;
	background: steelblue;
	border-radius: 50%;
	display: block;
	margin-left: 30px;
	box-shadow: 30px 30px 20px 2px steelblue;
	-webkit-animation: rotate 10s infinite;
	animation: rotate 10s linear infinite;
}
	
@keyframes rotate {
	from{
		transform: rotateZ(360deg);
	}
	to {
		transform: rotateZ(8deg);
	}
}
@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotateZ(360deg);
	}
	to {
		-webkit-transform: rotateZ(8deg);
	}
} */


		/* Elementos gerais */
		body {
			font-family: 'Inter', sans-serif;
			margin: 0;
			padding: 20px;
			background-color: #f4f6f8;
			color: #333;
			display: flex;
			min-height: 100vh;
			flex-direction: column;
			height: auto;
		}


		/* Informações do agregado */
		.informacoes-agregado {
			text-align: center;
			margin-bottom: 20px;
		}

		.informacoes-agregado h3 {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.informacoes-agregado p {
			font-size: 14px;
			color: #555;
		}

		/* Tabelas */
		.tabelas-container {
			display: flex;
			justify-content: space-around;
			align-items: flex-start;
			margin-top: 20px;
			gap: 20px;
		}

		.tabela-agregado, .tabela-detalhes {
			width: 500px;
			border-collapse: collapse;
			margin: 0 10px;
			background-color: #f9f9f9;
			border: 1px solid #ccc;
		}

		.tabela-agregado th, .tabela-agregado td, .tabela-detalhes th, .tabela-detalhes td {
			padding: 10px;
			text-align: left;
			border: 1px solid #ccc;
		}

		.tabela-agregado th, .tabela-detalhes th {
			background-color: #e0e0e0;
			text-transform: uppercase;
		}

		.tabela-agregado tbody tr:nth-child(odd) {
			background-color: #f2f2f2;
		}

		.tabela-agregado tbody tr:hover {
			background-color: #dcdcdc;
		}

		/* Gráficos */
		.graficos-container {
			display: flex;
			justify-content: space-around;
			margin-top: 30px;
		}

		/* Estilos específicos para os gráficos */
		#aggregatedChart,
		#aggregatedChartMesAnterior,
		#monthlyEvolutionChart {
			max-width: 500px;
			max-height: 500px;
			width: 100%;
			height: auto;
			border: 2px solid #333;
			/* Borda cinza escura */
			border-radius: 5px;
			/* Cantos arredondados */
			padding: 10px;
			/* Espaçamento interno */
			margin: 10px;
			/* Espaçamento externo */
			background-color: #ffffff;
			/* Cor de fundo */
		}

		/* Estilos específicos para os gráficos */
		#myperformanceChart,
		#myChart {
			max-width: 300px;
			max-height: 300px;
			width: 100%;
			height: auto;
			border: 2px solid #333;
			/* Borda cinza escura */
			border-radius: 5px;
			/* Cantos arredondados */
			padding: 10px;
			/* Espaçamento interno */
			margin: 10px;
			/* Espaçamento externo */
			background-color: #ffffff;
			/* Cor de fundo */
		}

		/* Estilos específicos para os gráficos */
		#myBarChart {
			max-width: 300px;
			max-height: 500px;
			width: 100%;
			height: auto;
			border: 2px solid #333;
			/* Borda cinza escura */
			border-radius: 5px;
			/* Cantos arredondados */
			padding: 10px;
			/* Espaçamento interno */
			margin: 10px;
			/* Espaçamento externo */
			background-color: #ffffff;
			/* Cor de fundo */
		}


		/* Legendas dos gráficos */
		.chart-legend {
			text-align: center;
			font-size: 8px;
			margin-top: 10px;
		}

		.chart-legend ul {
			display: inline-flex;
			list-style-type: none;
			padding: 0;
			margin: 0;
		}

		.chart-legend ul li {
			margin: 0 10px;
			display: flex;
			align-items: center;
		}

		.chart-legend ul li span {
			display: inline-block;
			width: 20px;
			height: 20px;
			margin-right: 5px;
			background-color: red;
		}

		/* Percentual de créditos */
		.percentual-info {
			text-align: center;
			margin-top: 20px;
			font-size: 1.2em;
			font-weight: bold;
		}

		.percentual-info span {
			display: inline-flex;
			align-items: center;
			margin-left: 10px;
		}

		.percentual-info span.positivo {
			color: green;
		}

		.percentual-info span.negativo {
			color: red;
		}

		/* Modal */
		.modal {
			display: block;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.modal.ng-show {
			display: block;
			animation: fadeIn 0.3s;
		}

		.modal-content {
			background-color: #fefefe;
			margin: 10% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 50%;
		}

		.close {
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
		}

		.close:hover,
		.close:focus {
			color: black;
			text-decoration: none;
		}

		/* Destaque de linhas */
		.highlighted {
			background-color: #f0f0f0;
		}

		/* Animação */
		@keyframes fadeIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		button[aria-hidden="true"],
		input[aria-hidden="true"],
		select[aria-hidden="true"],
		textarea[aria-hidden="true"] {
			pointer-events: auto !important;
			visibility: visible !important;
			opacity: 1 !important;
		}