/* Importando a fonte Gotham localmente (ou fornecendo o caminho correto) */
        @font-face {
            font-family: 'Gotham';
            src: url('fonts/Gotham-Bold.woff2') format('woff2'), /* Certifique-se de adicionar o caminho correto */
                 url('fonts/Gotham-Bold.woff') format('woff');
        }

        /* Definindo a cor de fundo do body para #215C56 */
        body {
            background-color: #215C56; /* Cor de fundo do body */
            font-family: 'Gotham', sans-serif; /* Aplicar a fonte Gotham */
            color: white; /* Cor do texto branco para contraste com o fundo escuro */
			margin: 0;
        }

        /* Estilos para o menu */
        .menu {
            background-color: #EC5C27; /* Cor de fundo do menu */
            padding: 10px;
            display: flex; /* Usar flexbox para alinhar itens */
            justify-content: space-between; /* Distribuir espaço entre itens */
            align-items: center; /* Alinhar verticalmente os itens */
            position: relative; /* Usar `position: relative` para permitir submenu */
            z-index: 10; /* Menu tem prioridade sobre outros elementos */
        }
		
		/* Estilo para o texto centralizado ao lado do logotipo */
        .menu .center-text {
            flex-grow: 1; /* Permite que o texto ocupe o espaço disponível */
            text-align: center; /* Centraliza o texto */
        }

        .menu a {
            float: left;
            display: block;
            color: white; /* Cor do texto dos links */
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;      z-index: 100; /* Garantir que o menu esteja à frente do conteúdo */
      
        }
		 /* Estilo para o submenu suspenso */
        .menu ul li ul {
            display: none;
            position: absolute;
            top: 100%; /* Submenu desce a partir do item do menu principal */
            left: 0;
            background-color: #EC5C27;
            padding: 0;
            min-width: 100%; /* Largura mínima igual ao item pai */
            border-radius: 4px; /* Opção: adicione cantos arredondados */     
			z-index: 20; /* Garantir que o submenu esteja acima do menu principal */
       
        }

        /* Mostrar submenu ao passar o mouse sobre o item do menu */
        .menu ul li:hover ul {
            display: block;
        }
		      /* Estilo para o menu suspenso */
        .menu ul {
            list-style: none; /* Remover marcadores */
            padding: 0;
            margin: 0;
            position: relative;
        }

        /* Estilo para os itens do menu */
        .menu ul li {
            display: inline-block;
            position: relative;
        }

        .menu ul li a {
            color: white;
            padding: 14px 16px;
            text-decoration: none;
            display: block;
        }

        /* Alteração de cor ao passar o mouse sobre os links */
        .menu a:hover {
            background-color: #FFD1C1; /* Cor de fundo clara ao passar o mouse */
            color: #215C56; /* Cor do texto ao passar o mouse */
        }

        /* Estilo para o ícone do menu em telas menores */
        .menu a.icon {
            display: none;
        }

        /* Media query para tornar o menu adaptativo em telas menores */
        @media screen and (max-width: 2768px) {
            .menu a:not(:first-child) {
                display: none;
            }
            .menu a.icon {
                float: right;
                display: block;
            }
        }

        /* Estilos para o menu responsivo em telas menores */
        @media screen and (max-width: 2768px) {
            .menu.responsive {
                position: relative;
            }
            .menu.responsive a.icon {
                position: absolute;
                right: 0;
                top: 0;
            }
            .menu.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
        }

        /* Estilos para o objeto de KPI */
        .kpi {
            margin: 10px;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 8px;
            font-family: 'Gotham', sans-serif;
            color: #215C56;
        }

        .kpi h3 {
            margin-bottom: 10px;
        }
		.kpi {
			height: 6vw;
			max-height: 180px;
			min-height: 80px;
			box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
			border-radius: 2px;
			color: #fff;

		}
		
		
		.viz {
		margin: 10px;
		height: 300px;
		background-color: #f4f4f4;
        font-family: 'Gotham', sans-serif;
        color: #215C56;
      }
	  
	  .sel {
		margin: 10px;
		background-color: #f4f4f4;
        font-family: 'Gotham', sans-serif;
        color: #215C56;
        height: 140px; /* Mantém a altura da div */
      }
	  
	.qv-st-data-row {
	background-color: #e6e6e6;
	color: #029f99;
	font-size: 12px;
	}

	.cell.ng-scope {
		font-size: 12px;
	}

	tr:nth-child(even) {
	  background-color: #e6e6e6;
		color: #029f99;
	}
	
	.no-click {
    pointer-events: none;
	}
	
	.menu_com_botao {
    display: grid; /* Ativa o modo Grid */
    grid-template-columns: repeat(3, 1fr); /* Define 3 colunas com largura igual */
    grid-template-rows: repeat(2, 1fr); /* Define 2 linhas com altura igual */
    grid-gap: 1px; /* Define o espaço entre os elementos */
	height: 100px; /* Mantém a altura da div */
}
	
	/* Estilos para o botão com aparência de tijolo */
        button {
            background-color: #EC5C27; /* Cor de fundo semelhante a um tijolo */
            color: #fff; /* Cor do texto */
            padding: 10px 10px; /* Padding para dimensionar o botão */
            border: none; /* Remover borda padrão */
            font-size: 16px; /* Tamanho da fonte */
            font-weight: bold; /* Negrito */
            cursor: pointer; /* Cursor de clique */
        }

        /* Adiciona um estilo de hover para o botão */
        button:hover {
            background-color: #b03428; /* Cor mais escura ao passar o mouse */
        }
        