.chartdiv {
    width: 100%;
    min-height: 260px;
}
.chartdiv-50 {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}
.totaldiv {
    width: 100%;
    height: 30px;
    font-weight:bold;
    font-size: 30px;
    display:inline;
}

.piramide {
    max-width: 540px;
    width: 100%;
}


.grafico:has(img):hover{
    opacity: 0.5;
}
.teste{
    width: "30px";
}

.grafico .colunas {
    min-height: 300px
}
.grafico .barrasEmpilhadas {
    min-height: 250px
}
#alfabetizacao, #situacao-domicilio{
   width:100%;
   height:200px; 

}
#alfabetizacao div.legenda{
    width:100%;
}
#estrutura-domicilios{
    width: 100%;
    height: 350px;
}
#entorno-domicilios{
    width: 100%;
    height: 350px;
}
#sexo{
	width:100%;
	min-height:280px;
}
#crescimento-populacional-ind{
    max-height:230px;
}
#mapa-populacao{
    /* min-height:300px; */
}
#cor-ou-raca-stackedbar-h{
    height:300px;
}
#cor-ou-raca-stackedbar-v{
    height:300px;
}

.grafico-expandido{
    min-height:350px !important;
}

/**
 * board
 */

.board {
    display: flex;
    flex-direction: column;
    
    width: 100%;
    height: 100%;
    border: 1px solid lightgray;
}
.board .board-icon {
    color: #ff811c;
    /* height: 150px; */
    height: 137px;
    background-repeat: no-repeat;
    background-position: center bottom;
}
.board .board-icon.populacao {
    background-image: url(../imagens/ico-populacao.png);
}
.board .board-icon.pop-porcentagem {
    background-image: url(../imagens/icon-pop-porcentagem.png);
}
.board .board-icon.domicilio {
    background-image: url(../imagens/ico-domicilios.png);
}
.board .board-icon.domicilio-ocupados {
    background-image: url(../imagens/ico-domicilios-ocupados.png);
}

.board .board-icon.domicilio-improvisados {
    background-image: url(../imagens/ico-domicilios-improvisados.png);
}

.board .board-icon.domicilio-permanentes {
    background-image: url(../imagens/ico-domicilios-permanentes.png);
}

.board .board-icon.domicilio-coletivo {
    background-image: url(../imagens/ico-domicilios-coletivos.png);
}

.board .board-icon.domicilio-particular {
    background-image: url(../imagens/ico-domicilios-particulares.png);
}

.board .board-icon.media-moradores {
    background-image: url(../imagens/media-moradores.png);
}

.board .board-icon.variacao {
    background-image: url(../imagens/ico-variacao.png);
}

.board .board-icon.indice-de-envelhecimento {
    background-image: url(../imagens/indice-de-envelhecimento.png);
}

.board .board-icon.idade-mediana {
    background-image: url(../imagens/idade-mediana.png);
}

.board .board-icon.razao-de-sexo {
    background-image: url(../imagens/razao-de-sexo.png);
}

.board .board-icon.area {
    background-image: url(../imagens/ico-area.png);
}

.board .board-icon.densidade-demografica {
    background-image: url(../imagens/ico-densidade-demografica.png);
}

.board .board-icon.favelas {
    background-image: url(../imagens/ico-favelas.png);
}

.board .board-icon.favelas-porcentagem {
    background-image: url(../imagens/ico-favelas-porcentagem.png);
}

.board .board-icon.autismo {
    background-image: url(../imagens/autismo.png);
}

.board .board-icon.deficiencia-laranja {
    background-image: url(../imagens/deficiencia-laranja.png);
}

.board .board-icon.deficiencia-roxo {
    background-image: url(../imagens/deficiencia-roxo.png);
}

.board .board-icon.sem-deficiencia {
    background-image: url(../imagens/sem-deficiencia.png);
}

.board .board-icon.brasileiros {
    background-image: url(../imagens/brasileiros.png);
}

.board .board-icon.estrangeiros {
    background-image: url(../imagens/estrangeiros.png);
}

.board .board-icon.naturalizados {
    background-image: url(../imagens/naturalizados.png);
}

.board .board-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 83px;
    min-height: 42px;
}
.board .board-value {
    color: #ff811c;
    font-size: 1.1em;
    font-weight: bold;
}
.board .board-value-roxo {
    color: #c22ea9;
}
.board .board-value-azul {
    color: #3f95c0;
}
.board .board-unit {
    color: black;
    font-size: .7em;
    margin-top: 4px;
    margin-left: 5px;
}

.board-location {
    background-color: #5a7791;
    color: #fff;
    padding: 6px 10px;
    font-size: .8em;
    text-align: left;
    display: none;
    border-radius: 7px 7px 0px 0px;
}


div[id*="-comparacao"] {
    margin-left: 10px;
}

div[id*="-comparacao"] .board-location  {
    background-color: #f34f55;
}

/* .card .grafico.grafico-lado-a-lado .grafico-divs .chartDiv{
    border: 1px solid lightgray;
} */
.grafico-lado-a-lado .card-location{
    background-color: #5a7791;
    color: #fff;
    padding: 6px 10px;
    font-size: .8em;
    text-align: left;
    border-radius: 7px 7px 0px 0px;
}

.board-1 .board-value{
    width: 100%;
    text-align: center;
}

.board-1 .board{
    padding: 0px 10px;
}

.board-1 .board-info{
    flex-direction: column;
}

.board-1 .board-unit{
    width: 100%;
    text-align: center;
}


.board-2 .board{
    /* justify-content: center; */
    flex-direction: initial;
    /* padding: 33px 10px; */
    padding: 35px 10px;
}

.board-2 .board:nth-child(2){
    /* margin-top: 15px */
}

.board-2 .board .board-icon {
    width: 25%;
    min-width: 55px;
    height: auto;
    min-height: 60px;
    background-position: left center;
    padding-right: 23%;
    background-size: 43px;
}

.board-2 .board .board-info{
    margin-bottom: 0px;
}

.board-2 .board .board-location {
    margin-bottom: 20px;
}

.board-3 .board{
    /* justify-content: center; */
    flex-direction: initial;
    /* padding: 11px 10px; */
    padding: 13px 10px;
}

.board-3 .board:nth-child(1){
    margin-top: 0px
}

.board-3 .board .board-icon {
    width: 25%;
    height: auto;
    min-height: 60px;
    background-position: left center;
    padding-right: 23%;
    background-size: 35px;
}

.board-3 .board .board-info{
    margin-bottom: 0px;
}

.board-3 .board .board-location {
    margin-bottom: 20px;
}

.board-6 .board .board-icon{
    display: none;
}

.board-6 .board .board-info{
    flex-direction: row;
    margin-bottom: 0px;
    justify-content: start;
    margin-left: 20px;
}

.board-6 .board .board-unit{
    /* margin-top: -12px; */
    text-align: center;
}

div[referencia='5'] .board-1 .board-info{
    display: inline;
    text-align: center;
}

div[referencia='5'] .board-1 .board-unit{
  margin-left: 1px;
}



@media (max-width: 992px){

    .board-2 .board{
		flex-direction: column;
    }
    
    .board-2 .board .board-icon{
        background-position: center;
        width: 100%;
    }
    
    .board-2 .board .board-info{
        flex-direction: column;
    }

    .board-2 .board .board-unit{
        /* margin-top: -12px; */
        text-align: center;
    }

    .board-3 .board{
		flex-direction: column;
    }
    
    .board-3 .board .board-icon{
        background-position: center;
        width: 100%;
        min-height: 50px;
    }

    .board-3 .board .board-info{
        flex-direction: column;
    }

    .board-3 .board .board-unit{
        /* margin-top: -12px; */
        text-align: center;
    }


    /* Cards variavel isoalda*/
    
    /* .board .board-info{
        flex-direction: column;
    }
    
    .board .board-unit {
        margin-top: -11px;
        text-align: center;
    }
    
    .board-1 .board{
        flex-direction: column;
        padding: 64px 10px;
    }
    
    .board .board-info{
        
    }

	.board-1 .board .board-icon{
		width: 100%;
        background-position: center;
        padding-right: 0px;
        background-size: 60px;
    }

    .board-2 .board{
        flex-direction: column;
        padding: 43px 10px;
	}

	.board-2 .board .board-icon{
		width: 100%;
        background-position: center;
        padding-right: 0px;
        background-size: 60px;
    }

    .board-3 .board{
        flex-direction: column;
        padding: 10px;
	}

	.board-3 .board .board-icon{
		width: 100%;
        background-position: center;
        padding-right: 0px;
    } */
}