.imgquadrada{
    height: 100px;
}
.imagem300{
    height: 300px;
}
.imagem300c{
  height: 300px;
  text-align: center;
}
.textoCentralizado{
    text-align: center;
}
.divmain {
  height: 65vh;
  border: 1px solid black;
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.divleft {
  float: left;
  width: 180px;
  height: 100%;
  background-color: green;
}
.divright {
  width: 100%;
  height: 100%;
  background-color: blue;
}
.divbaixo {
  width: 95vw;
  height: 25vh;
  padding: 5px;
}
.divbaixo20 {
  width: 100%;
  height: 20px;


}


.tabelaAlterada {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  

}
.tituloColuna{
  text-align: left;

  font-size: 14px;
}
.tituloSubcriterio{
  padding: 8px;
  text-align: left;
  font-size: 14px;
}
.botao {
  font-size: 1.2em;
  background: darkcyan;
  border: 0;
  margin-bottom: 1em;
  color: white;
  padding: 0.2em 0.6em;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  transform: translate(-50% -50%);
}
.tabelaSemBorda{
  border:none;
}
.botaoSelecionar {
  border-top: 1px solid #282f33;
  background: #191e21;
  background: -webkit-gradient(linear, left top, left bottom, from(#0b0c0d), to(#191e21));
  background: -webkit-linear-gradient(top, #0b0c0d, #191e21);
  background: -moz-linear-gradient(top, #0b0c0d, #191e21);
  background: -ms-linear-gradient(top, #0b0c0d, #191e21);
  background: -o-linear-gradient(top, #0b0c0d, #191e21);
  padding: 5.5px 11px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  box-shadow: rgba(0,0,0,1) 0 1px 0;
  text-shadow: rgba(0,0,0,.4) 0 1px 0;
  color: white;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  vertical-align: middle;
  }
.botaoSelecionar:hover {
  border-top-color: #131e29;
  background: #131e29;
  color: #ccc;
  }
.botaoSelecionar:active {
  border-top-color: #1b435e;
  background: #1b435e;
  }
 .divFundoBotao
 {
  background-color:  #222222;
  border: none;
 }
 .divResultado{
  height: 1px;
 }
 .selectOpcoes {
  -webkit-appearance: none;
  /* Remove estilo padrão do Chrome */
  -moz-appearance: none;
  /* Remove estilo padrão do FireFox */
  appearance: none;
  /* Remove estilo padrão do FireFox*/
  background: black;/*url(http://www.webcis.com.br/images/imagens-noticias/select/ico-seta-appearance.gif) no-repeat #eeeeee;*/
  /* Imagem de fundo (Seta) */
  background-position: 218px center;
  /*Posição da imagem do background*/
  width: 250px;
  /* Tamanho do select, maior que o tamanho da div "div-select" */
  height: 30px;
  /* Altura do select, importante para que tenha a mesma altura em todo os navegadores */
  border: 1px solid #ddd;
  color: white;
  font-family: Arial, Helvetica, sans-serif;

}
.selectNotas {
  -webkit-appearance: none;
  /* Remove estilo padrão do Chrome */
  -moz-appearance: none;
  /* Remove estilo padrão do FireFox */
  appearance: none;
  /* Remove estilo padrão do FireFox*/
  /*background: g;/*url(http://www.webcis.com.br/images/imagens-noticias/select/ico-seta-appearance.gif) no-repeat #eeeeee;*/
  /* Imagem de fundo (Seta) */
  background-position: 218px center;
  /*Posição da imagem do background*/
  width: 100px;
  /* Tamanho do select, maior que o tamanho da div "div-select" */
  height: 30px;
  /* Altura do select, importante para que tenha a mesma altura em todo os navegadores */
  border: 1px solid #ddd;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;

}
.MyViewerDiv {
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #F0F8FF;
  padding: 5px;
}
.fill{
  height: calc(100vh - 100px);
}
.fillNovo1{
  height: 500px;
  width: auto;
}
.fillFuzzy{
  height: calc(100vh - 120px);
}
.fillWidthFuzzy{
  width:100%;
}
.widthTabelaCoresFuzzy{
  width:120px;
}
.appBucketsFuzzy {
  overflow: auto;
  width: 100%;
  height: calc(100vh - 150px);
}
.bodyFuzzy {
  padding-top: 60px; /* space for the top nav bar */
  margin-right: 30px;
}
#appBuckets {
  overflow: auto;
  width: 100%;
  height: calc(100vh - 150px);
}
.MyNextButton {
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 1;
        font-size: 40px;
        cursor: pointer;
    }

.wrapperFuzzy {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
  }
  .box {
      box-sizing: border-box;
      padding: 1rem;
      margin: 1rem;
      width: calc((100% / 5) - 2rem); /* calco para descontar a margem da largura do box se aumenta a marge tem que ajustar aqui tb */
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
  }
  .box1 {
    box-sizing: border-box;
    padding: 1rem;
    margin: 1rem;
    
}
.cabecalho{
  
  width: 600px;
  padding: 40px 2%;
  text-align: left;
}

.tab {
  overflow: hidden;
  background-color:  #222222;
  border: none;
  height: 20px;
  color: white;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1px 16px;
  transition: 0.3s;
  color: white;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgb(86, 81, 81);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgb(86, 81, 81);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 3px 12px;
  border: 1px solid #ccc;
  border-top: none;
  height: auto;
}
.panel-headingFuzzy {
  padding: 3px 16px;
  border-bottom: 1px solid transparent;
  /*border-top-right-radius: 3px;
  border-top-left-radius: 3px;*/
  background-color:  #222222;
  color: white;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
.buttonForge {
  
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1px 16px;
  transition: 0.3s;

  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.divTopoMenuNovo{
  height: 30px;
  width: auto;

}
.divForgeNovo{
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: #F0F8FF;
  
}

.divbaixo {
  width: 95vw;
  height: 25vh;
  padding: 5px;
}
.divTesteNovo{
    width: 95vw;
    
    background-color: #eff2ff;
    display: grid;
    /* aqui eu defino que o Grid tem Duas colunas uma com    width:auto e outra com 50px */
    grid-template-columns:  350px 10px auto;           
    height: 530px;
    padding: 5px;
        }
.azul{
  background-color: blue;
}

.amarelo{
  background-color: #FFFF00;
}
.verde{
  background-color: #008000;
}
.branco{
  background-color: #FFFFFF;
}
.ciano{
  background-color: #00FFFF;
}
.esquerdoNovo{
    vertical-align: top;
    height: auto;

    display: inline-block;
        }
.direitoNovo {
    vertical-align: top;
    height: auto;

    display: inline-block;
}
.divComScrollBox {
  overflow: scroll;
  max-height: 500px;
}
.logo-img {
  width: 100px; /* Defina a largura desejada */
  height: auto; /* Isso manterá a proporção da imagem */
}

.logo-img200 {
  width: 100px; /* Defina a largura desejada */
  height: auto; /* Isso manterá a proporção da imagem */
}
.cardContrutivel {
  border: 1px solid #ccc; /* Adiciona uma borda aos cards */
  border-radius: 8px; /* Adiciona cantos arredondados */
  margin: 10px; /* Adiciona margem entre os cards */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  max-width: 250px
  ;/* Adiciona sombra aos cards */
}
.cardCustomContainer {
  background-color: rgba(211, 211, 211, 0.5); /* Cinza claro translúcido */
  border-radius: 5px; /* Bordas arredondadas */
  padding: 3px; /* Espaçamento interno */
}

.containerContrutivel {
  /* margin-top: 50px; */
  display: flex;
  flex: 1; /* Para que a container ocupe todo o espaço restante da tela */
  overflow: hidden;
}

.sidebarContrutivel {
  width: 300px;
  /*background-color: #f4f4f4;*/
  padding: 5px;
  box-sizing: border-box;
  overflow-y: auto;
  height: 100vh;
}
.content1Contrutivel {
  flex: 1; /* Ajuste para que a content ocupe todo o espaço disponível */
  background-color: #fff;
  padding: 5px;
  overflow-y: auto;
  overflow-x: auto;
  
}
.resizerContrutivel {
  width: 5px;
  cursor: ew-resize;
  background-color: gray;
  box-sizing: border-box;
}
.fakeimg {
  max-width: 400px;
  height: auto;
 
}
.fakeimg1 {
  max-width: 400px;
  height: 200px;
 
}
.fakeimg2 {
  min-width: 400px;
  height: 200px;
 
}