@media screen and (max-width: 768px) {
  html {
    font-size: 8px; /* tamanho de fonte padrão */
  }
  body {
    font-size: 8px; /* tamanho de fonte padrão */
  }
  
  /* Estilos para telas menores que 768px */
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  html {
    font-size: 13px; /* tamanho de fonte padrão */
  }
  body {
    font-size: 13px; /* tamanho de fonte padrão */
  }
  /* Estilos para telas entre 768px e 1024px */
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 16px; /* tamanho de fonte padrão */
  }
  body {
    font-size: 16px; /* tamanho de fonte padrão */
  }
  /* Estilos para telas maiores que 1024px */
}

h2 {
/*  position: sticky;*/
  top: 0;
  padding: 0px; /* opcional, dependendo do seu layout */
}
h3 {
  /*  position: sticky;*/
    top: 0;
    padding: 0px; /* opcional, dependendo do seu layout */
    background-color: orange;
  }
h5 {
    /*  position: sticky;*/
    margin-top: 30px; /* ajuste conforme necessário */
    margin-bottom: 0px; /* ajuste conforme necessário */
      padding: 0px; /* opcional, dependendo do seu layout */
      color:rgb(3, 3, 63);
    }
.destaque {
        color:rgb(51, 51, 155);
        font-weight: bold;
    }
.institucional-p {
  text-align: justify;
      color:rgb(0, 0, 10);
      font-weight: normal;
      font-size: 0.5rem;
      margin-left: 40px; /* ajuste conforme necessário */
      margin-right: 40px; /* ajuste conforme necessário */
  }    
.institucional {
  text-align: justify;
  padding: 0px; /* opcional, dependendo do seu layout */
  color:#010002;
  margin-top: 0px; /* ajuste conforme necessário */
  margin-bottom: 0px;
  margin-left: 40px; /* ajuste conforme necessário */
  margin-right: 40px; /* ajuste conforme necessário */
}


/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: orange;
}
*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 13px;
  border: 3px solid orange;
  height: 10px;
}


.prev,
.next {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  font-size: 3rem;
  border: none;
  background: transparent;
  color: #14033a;
  opacity: 0.1;
  cursor: pointer;
}
.prev {
  left:17%;
}
.next {
  right: 0.6%;
}
	.prev:hover,
	.next:hover {
	/*	background-color: #ce0606;*/
  color: #107a2a;
  opacity: 0.8;
}
.title {
    position: absolute; /* Define a posição absoluta da div interna */
    top: 15%;
    padding: 10px;
    left: 19%;
    width: 25%px;
    height: auto;
    z-index: 1; /* Define o z-index como 1 para a div ficar na frente do conteúdo */
    /*background-color: #fff; /* Define a cor de fundo da div */
    background-image: linear-gradient(to bottom right, #FF0000, #FFFF00);
		font-size: 1.4rem;
    color: #ffffff;
		margin-bottom: 10px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#nav-lateral {
    background-color: orange; /*fundo do menu lateral*/
    float: left;
    border-bottom-right-radius: 2px;
    height:  83vh; /*altura visível do menu da esquerda*/
    overflow: hidden;
}
html{
/*overflow-y:hidden; /*esconde barra de rolagem*/;
/*overflow-x:hidden; /*esconde barra de rolagem*/;
  overflow:hidden; /*esconde barra de rolagem*/;
}
 
    /* Estilos para o menu */
    .menu {
      position: fixed;
      width: 100px;
      height: 100%;
      background-color: #fffdfd;
      color: #ffffff;
     /* overflow-y: auto;*/
    }
    .menu-item {
      padding: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .menu-item:hover {
      background-color: red; /*cor mouse por cima*/
    }
    .active {
      background-color: #6eb8e2; /*cor do menu ativo */
    }
    
    .page-number {
      font-size: 1.6rem;
      color: #fffafa;
      align-items: center;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
    }



    .page-gauge-container meter::-webkit-meter-bar {
      background-color: #ddd;
    }
    
    .page-gauge-container meter::-webkit-meter-optimum-value {
      background-color: #007bff;
    }
    
    .page-gauge-container meter::-moz-meter-bar {
      background-color: #ddd;
    }
    
    .page-gauge-container meter::-moz-meter-optimum {
      background-color: #007bff;
    }
    
    .background-image-graduacao {
      /*position: absolute;*/
      top: 0;
      left: 0;
      align: center;
      width: 70%;
      height: 100%;
      /*opacity: 0.3;*/
    }
    
    .content-graduacao {
      /*position: absolute;*/
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1; /* Para que fique na frente da div de fundo */
      padding: 20px; /* Ajuste o padding conforme necessário */
      box-sizing: border-box; /* Para incluir o padding no tamanho da div */
      /*opacity: 1;*/
    }
    
/* Largura da barra de rolagem */
::-webkit-scrollbar {
  width: 0px;
}









.cabeca {
  background-color: white;
  width: 100%;
  overflow-x: hidden; /* Hide scrollbars */
}  
.fonte-cabeca {
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 
  font-size: 1.5rem; 
  color:#FFFFFF;
}
.subcabeca {
  background-color: rgb(8, 7, 8);
  width: 100%;
  overflow-x: hidden; /* Hide scrollbars */
}
.navpag {
  /*position: absolute; */
  position: static;
  width: 100%;  
  left: 18px;   
  top: auto;
  overflow-x: hidden; /* Hide scrollbars */
 }
 .container {
  display: flex;
  flex-direction: row;
  height: auto;
  width:100%; /*largura do total da div*/
 /* background: orange;*/
  overflow-x: hidden; /* Hide scrollbars */
}
.sidebar {
  background-color: #eee;
 /* flex-basis: 20%;*/
  background-color: rgb(8, 7, 8); /*fundo do menu lateral*/
  float: left;
  /*position: absolute;*/
  left:0;
  /*top:200px; /*onde começa o menu da esquerda*/
  /*border-bottom-right-radius: 2px;*/
  /*height:  86vh; /*altura visível do menu da esquerda*/
  /*  overflow: auto;*/
  overflow-x: hidden; /* Hide scrollbars */
  flex-basis: 20%;
  position: relative;
  top: auto;
  height: 86vh;
  border-radius: 0;
  border: none;
}


.sidebar ul {
  list-style: none;
  padding: 5px;
  margin: 0;
}
.sidebar li {
  margin: 5px;
  padding: 0px;
  border-bottom: 3px solid black;
  border-left: 3px solid black;
}
.sidebar a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: #f3f0dc;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.sidebar a:hover {
  background-color: #ccc;
  color: #111110; /*cor de quando selecionado*/
 }
.sidebar a.active {
  font-weight: bold;
  color: #111110; /*cor de quando selecionado*/
}
#nav-lateral a, ul >li {
  list-style: none;
  border-top-right-radius: 10px;
  text-decoration: none;
  /*background-color: rgba(41, 5, 247, 0.89);*/
  background-image: linear-gradient(to bottom right, #040d5f, rgba(41, 5, 247, 0.89));
  /*border-radius: 2px;*/
  padding: 5px 3px 5px 3px; /*magem dos itens*/
  /*top left bottom right*/
}
#nav-lateral ul {
  margin-right: 20px; /*margem da direita do item até a div*/
}
#nav-lateral ul li{
  margin-top: 10px;
  margin-right: 10px;
  width: 200px;
  margin-left: 10px;
}
.contentx {
  /*flex-basis: 98%;*/
  margin-top:30px;
  margin-bot:10px;
  width: 92%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  /* background-color: #bfe70a;*/
  background-image: linear-gradient(to bottom right, #afaeae, #f3f3c4);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  overflow-y: scroll; /* Adiciona uma barra de rolagem vertical */
  /*overflow-x:hidden;*/
  height: 90vh;
}

/* Personaliza a aparência da barra de rolagem no Chrome */
.sidebar::-webkit-scrollbar {
  width: 10px;
}
.sidebar::-webkit-scrollbar-track {
  background: orange;
}
.sidebar::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 5px;
}

/* Personaliza a aparência da barra de rolagem no Chrome */
.contentx::-webkit-scrollbar {
  width: 10px;
}
.contentx::-webkit-scrollbar-track {
  background: orange;
}
.contentx::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 5px;
}
/* Personaliza a aparência da barra de rolagem no Firefox */
.contentx {
  /*scrollbar-color: #888 #f1f1f1;*/
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}
.contentx::-moz-scrollbar {
  width: 10px;
}
.contentx::-moz-scrollbar-track {
  background: #f1f1f1;
}
.contentx::-moz-scrollbar-thumb {
  background-color: #023880;
  border-radius: 5px;
}
.content {
		flex-basis: 98%;
    width: 92%;
		padding: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
    overflow-y: scroll; /* Adiciona uma barra de rolagem vertical */
    height: 86vh;
    background-image: linear-gradient(to bottom right, #7a7777, #f3f3c4);
    /* background-color: #a6c90d;*/
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /*overflow-y: scroll; /* Adiciona uma barra de rolagem vertical */
    /*overflow-x: hidden; /* Hide scrollbars */
	}
.content p {
		font-size: 1.3rem;
		line-height: 1.5;
	}
  .page-footer-gauge {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 1%;
    leftt: 0px;
    width: 40%;
    height: 10%;
    /*background-color: #1d62ca;*/
    padding: 0 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow-x: hidden; /* Hide scrollbars */
  }

  .page-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 3%;
    right: 2%;
    width: 9%;
    height: 6%;
    background-color: #2a076d;
    padding: 0 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }  

.celula-colorida {
    background-color: rgb(142, 209, 240); /* Define a cor de fundo da célula */
    font-size: 1.1rem;
    padding: 10px;
  }
.celula-branca {
    background-color: rgb(212, 213, 214); /* Define a cor de fundo da célula */
    font-size: 1.1rem;
    padding: 10px;
  }
.celula-colorida-border {
    background-color: rgb(142, 209, 240); /* Define a cor de fundo da célula */
    font-size: 1.1rem;
    padding: 10px;
    border: 2px solid white; /* Define a borda das células como uma linha sólida com cor preta */
  }
.celula-branca-border {
    background-color: rgb(212, 213, 214); /* Define a cor de fundo da célula */
    font-size: 1.1rem;
    padding: 10px;
    border: 2px solid white; /* Define a borda das células como uma linha sólida com cor preta */
  }

.fontep {
  font-size: 0.1rem;
}

	.centrada- {
    text-align: center;	
    }	
  .sem-borda {
    border: none;
  }
  .roda {
  /*  writing-mode: vertical-rl;*/
  font-size: 0.1rem;
    transform: rotate(-90deg);
    text-align: center;	
    font-weight: bold;
  }
  .fundoescuro {
    background: #040440;
    color: white;	
      text-align: center;	
    font-weight: bold;
  }	
  .fundoclaro {
    font-weight: bold;
    text-align: center;	
    background: #B6B6B6;
    /*color: white;	*/
    }