/* Estilo básico para o tooltip */

	.tooltip {
		position: relative;
		cursor: pointer;
	}

	/* Cria o tooltip com o conteúdo do atributo data-tooltip */
	.tooltip::after {
		content: attr(data-tooltip); /* Pega o conteúdo do atributo data-tooltip */
		position: absolute;
		bottom: 125%; /* Posiciona acima do elemento; ajuste conforme necessário */
		left: 50%;
		transform: translateX(-50%);
		background-color: #2978a0; /* Fundo escuro */
		color: #fff; /* Texto branco */
		padding: 5px 8px;
		border-radius: 4px;
		white-space: nowrap;
		opacity: 0; /* Inicialmente invisível */
		pointer-events: none; /* Impede que o tooltip interfira na interação com o elemento */
		transition: opacity 0.3s ease-in-out;
		z-index: 10;
	}

	/* Adiciona uma pequena seta ao tooltip */
	.tooltip::before {
		content: "";
		position: absolute;
		bottom: 107% !important; /* Ajuste conforme necessário */
		left: 50%;
		transform: translateX(-50%);
		border-width: 5px;
		border-style: solid;
		border-color: #2978a0 transparent transparent transparent;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		z-index: 20;
	}

	/* Mostra o tooltip ao passar o mouse sobre o elemento */
	.tooltip:hover::after,
	.tooltip:hover::before {
		opacity: 1;
	}
	
/* Finaliza tooltip */