@charset "utf-8";

/*fontes*/

@font-face {
  font-family: "OpenSans";
  src: url("../webfonts/opensans-regular.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSansLight";
  src: url("../webfonts/opensans-light.ttf") format("truetype");
}

@font-face {
  font-family: "OpenSansBold";
  src: url("../webfonts/opensans-semibold.ttf") format("truetype");
}

/* medias */

@media print {
    .menu-acessibilidade,
    .barra-menu,
    #descricao,
    .botoes,
    .breadcrumb,
    .exports,
    .downloads,
    .downloads__data,
    .rodape__lista,
    .send-btn,
    .social-media,
    .titulos,
    .topo {
        display: none !important;
    }

    .grafico__conteudo {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /*
    .tabela {
        overflow: initial !important;
        max-height: none !important;
    }
    */
    .tabela table {
        display: table !important;
    }
  }

/*estilos mobile first*/

html{
    box-sizing: border-box;
    font-size: 100%;
    font-family: OpenSans, Helvetica, Arial, sans-serif;
}

body{
    background-color: #FAF9F9;
}

.busca{
    display: inline-block;
    margin: 0;
    position: relative;
}

.busca__form{
    margin: 0;
}

.busca__label{
    position: absolute;
    right: 0;
    padding: 5px 10px 5px 5px;
    /* color: #00BF57; */
}

.menu{
    display: inline-block;
    position: relative;
    top: 5px;
    padding: 0 12px;
}

.menu__label{
    color: #00BF57;
    font-size: 1.5em;
}

.menu__submenu{
    position: absolute;
    list-style: none;
    padding: 5px;
    right: 10px;
    background-color: #6B5C5D;
    display: none;
    width: 200px;
    text-align: left;
}

.menu__submenu-item{
    color: white;
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 5px;
}

.menu__submenu-item:hover{
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
}


.conteudo{
    display: flex;
    flex-direction: column;
    /* margin: 15px; */
    justify-content: center;
}

.titulos{
    list-style: none;
    padding: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
}

.titulos__titulo-esquerda{
    background-color: #DEDADB;
    padding: 7px 15px;
    border-radius: 20px 0 0 0;
    color: #6B5C5D;
    text-transform: uppercase;
    width: 100%;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    -webkit-transition: background 600ms ease;
    -moz-transition: background 600ms ease;
    -ms-transition: background 600ms ease;
    -o-transition: background 600ms ease;
    transition: background 600ms ease;
}

.titulos__titulo-esquerda:hover{
    background-color:#90b2bf;
    -webkit-transition: background 600ms ease;
    -moz-transition: background 600ms ease;
    -ms-transition: background 600ms ease;
    -o-transition: background 600ms ease;
    transition: background 600ms ease;
}

.titulos__titulo-esquerda--selecionado{
    background-color: #004663 !important;
    color: white !important;
}

.titulos__titulo-centro{
    background-color: #DEDADB;
    padding: 7px 15px;
    color: #6B5C5D;
    text-transform: uppercase;
    width: 100%;
    margin: 0 3px;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    -webkit-transition: background 600ms ease;
    -moz-transition: background 600ms ease;
    -ms-transition: background 600ms ease;
    -o-transition: background 600ms ease;
    transition: background 600ms ease;
}

.titulos__titulo-centro:hover {
    background-color: #4dc885;
    -webkit-transition: background 600ms ease;
    -moz-transition: background 600ms ease;
    -ms-transition: background 600ms ease;
    -o-transition: background 600ms ease;
    transition: background 600ms ease;
}

.titulos__titulo-centro--selecionado{
    background-color: #00893F !important;
    color: white !important;
}

.titulos__titulo-direita{
    background-color: #DEDADB;
    padding: 7px 15px;
    border-radius: 0 0 20px 0;
    color: #6B5C5D;
    text-transform: uppercase;
    width: 100%;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    -webkit-transition: background 600ms ease;
    -moz-transition: background 600ms ease;
    -ms-transition: background 600ms ease;
    -o-transition: background 600ms ease;
    transition: background 600ms ease;
}

.titulos__titulo-direita:hover{
    background-color: #bdbdbd;
    -webkit-transition: background 600ms ease;
    -moz-transition: background 600ms ease;
    -ms-transition: background 600ms ease;
    -o-transition: background 600ms ease;
    transition: background 600ms ease;
}

.titulos__titulo-direita--selecionado{
    background-color: #726263 !important;
    color: white !important;
}

.breadcrumb{
    font-size: 0.8em;
    color: #6B5C5D;
    margin-top: 2em;
    margin-bottom: 1em;
}
.breadcrumb__link{
    text-decoration: none;
    color: #004663;
    font-size: 1.1em;
    text-transform: uppercase;
}
.breadcrumb__atual{
    color: #6B5C5D;
    font-size: 1.1em;
    text-transform: uppercase;
}
.breadcrumb-list {
    display: inline;
    padding: 0;
}
.breadcrumb-item {
    display: inline;
}
.breadcrumb-item + .breadcrumb-item:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f054';
    font-weight: 900;
}

.filtro-principal{
    margin-top: 15px;
    margin-bottom: 15px;
}

.filtro-principal__linha{
    margin: 5px 0;
    display: flex;
    flex-direction: column;
}

.filtro-principal__label{
    width: auto;
    text-align: left;
    padding: 7px 7px 7px 0;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #004663;
}

.filtro-principal__input{
    padding: 10px 50px 10px 10px;
    border: none;
    background-color: #DEDADB;
    width: 100%;
    font-size: 1.0em;
    color: #6B5C5D;
}

.botao-container{
    display: flex;
    flex-direction: column;
    margin: 5px 0;
}

.glossario-botao{
    border-radius: 15px;
    border: 2px solid #00BF57;
    padding: 8px 16px;
    text-transform: uppercase;
    color: #004663;
    background: none;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    cursor: pointer;
    width: 100%;
    align-self: flex-end;
}

.comentarios-botao{
    border-radius: 15px;
    border: 2px solid #726263;
    padding: 4px 16px;
    text-transform: uppercase;
    color: #726263;
    background: none;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    cursor: pointer;
    align-self: flex-start;
}

.filtro-secundario{
     margin: 15px 0;
     display: flex;
     flex-direction: column;
}

.filtro-secundario__comboboxes{
    display: flex;
    flex-direction: column;
}

.filtro-secundario__linha{
    margin: 5px 0;
    display: flex;
    flex-direction: column;
    width: auto;
}

.filtro-secundario__label {
    padding: 7px 7px 7px 0;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    color: #004663;
}
.filtro-secundario__linha-disabled .filtro-secundario__label {
    color: lightgray;
}

.filtro-secundario__input {
    padding: 10px;
    border: 1px solid lightgray;
    background-color: #fafafa;
    width: 100%;
    font-size: 1.0em;
    color: #6B5C5D;
    cursor: pointer;
}
.filtro-secundario__input.no-selection {
    color: lightgray;
}
.filtro-secundario__linha-disabled .filtro-secundario__input {
    background-color: #eeeeee;
    border: 1px solid lightgray;
    cursor: default;
}
.filtro-secundario__linha-disabled .select-wrapper::after {
    color: lightgray;
}

.filtro-secundário__checkboxes{
    margin: 15px 0;
}

.filtro-secundario__checkbox-titulo{
    padding: 7px 0;
    margin: 0;
    text-transform: uppercase;
    color: #004663;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
}
.filtro-secundario__checkbox-label {
    display: inline-block;
    padding: 5px 15px 5px 5px;
    margin: 3px 3px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
.filtro-secundario__checkbox-label::before      { padding: 0 8px; }
.filtro-secundario__checkbox-label.on           { background-color: #00893f; }
.filtro-secundario__checkbox-label.off          { background-color: #868686; }
/*.filtro-secundario__checkbox-label.on::before   { content: url(assets/img/check_categorias.png); }
.filtro-secundario__checkbox-label.off::before  { content: url(assets/img/x_categorias.png); }*/
.filtro-secundario__checkbox { display: none; }

.rotulos{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 15px 0px;
}

.rotulos__container{
    margin: 5px 0;
}

.rotulos__titulo{
    text-transform: uppercase;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    color: #004663;;
}

.rotulos__valor{
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    color: #6B5C5D;
}

.grafico{
    margin: 15px 0;
    background-color: white;
}

.grafico__titulo{
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    background-color: #004663;
    color: white;
    padding: 5px 15px;
    text-transform: uppercase;
}

.grafico__titulo--1{
    background-color: #004663 !important;
    color: white !important;
}

.grafico__titulo--2{
    background-color: #00BF57 !important;
    color: #004663 !important;
}

.grafico__titulo--3{
    background-color: #726263 !important;
    color: white !important;
}

.grafico__conteudo {
    background-color: white;
    padding: 15px 0;
    width: 100%;
}

.grafico__unidade {
    color: #6B5C5D;
    font-size: 0.9em;
}

.tabela{
    margin: 15px 0;
    width: 100%;
    overflow-y: hidden;
    overflow-x: initial;
}

.tabela__titulo {
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    color: white;
    padding: 12px;
    text-transform: uppercase;
    text-align: center;

    /* Fixed table title */
    position: absolute;
    right: 15px;
    left: 15px;
}
.tabela_blue  .tabela__titulo { background-color: #004663 !important; position: -webkit-sticky; position: sticky; top: 0; left: 0; }
.tabela_green .tabela__titulo { background-color: #00893f !important; position: -webkit-sticky; position: sticky; top: 0; left: 0; }
.tabela_brown .tabela__titulo { background-color: #726263 !important; position: -webkit-sticky; position: sticky; top: 0; left: 0; }

.tabela__conteudo {
    background-color: white;
    /* Fixed table title margin */
    /* margin-top: 45px; */
}

.tabela__tabela{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #004663;
}
/* .tabela__tabela th:first-child {
    text-align: left;
} */

.tabela__linha{
    color: #6B5C5D;
}
.tabela__linha a{
    color: #6B5C5D;
}
.tabela__linha:nth-child(even){
    background-color: #f0eeef;
}
.tabela_blue thead .tabela__linha { background-color: rgb(0, 67, 96, 0.15); }
.tabela_green thead .tabela__linha { background-color: rgb(0, 191, 87, 0.15); }
.tabela_brown thead .tabela__linha { background-color: rgb(114, 98, 99, 0.15); }

.tabela__cabecalho{
    padding: 10px;
    text-transform: uppercase;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    border-right: 1px solid gray;
}
.tabela_blue .tabela__cabecalho {
    background-color: rgb(185, 203, 211);
    color: #004663;
    position: sticky;
    top: 45px;
}
.tabela_green .tabela__cabecalho {
    background-color: rgb(185, 236, 209);
    color: #00893f;
    position: sticky;
    top: 45px;
}
.tabela_brown .tabela__cabecalho {
    background-color: rgb(216, 212, 212);
    color: #726263;
    position: sticky;
    top: 45px;
}

.tabela__celula{
    padding: 10px;
    font-family: OpenSans, Helvetica, Arial, sans-serif;
    border-right: 1px solid #004663;
}

.tabela__celula_nomeSerie{
    padding: 10px;
    font-family: OpenSans, Helvetica, Arial, sans-serif;
    border-right: 1px solid #004663;
    text-align: left;
}

.downloads{
    color: #004663;
    text-transform: uppercase;
    font-size: 0.9em;
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.downloads__icone{
    color: #00BF57;
}

.downloads__texto{
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    cursor: pointer;
}

.downloads__item{
    margin: 5px 0;
}

.fonte-serie {
    color: #6B5C5D;
    font-size: 0.9em;
    margin: 1em 0;
}

.botoes{
    display: flex;
    flex-direction: column;
}

.botoes__botao{
    border-radius: 15px;
    border: 2px solid #00BF57;
    padding: 8px 16px;
    text-transform: uppercase;
    color: #004663;
    background: none;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    cursor: pointer;
    margin-bottom: 15px;
}

.topo{
    display: flex;
    flex-direction: row;
    justify-content: center;

    position: fixed;
    bottom: 30px;
    right: 30px;
}

.topo__botao{
    background-color: white;
    border: none;
    border-radius: 7px;
    padding: 5px;
    text-transform: uppercase;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    color: #004663;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.topo__icone{
    font-size: 1.5em;
    color: #00BF57;
}

/*----------------------------------*/

.temas{
    background-color: #004663;
    margin: 3px;
    padding: 20px;
    border-radius: 30px 0 0;
}

.temas__titulo{
    color: white;
    text-transform: uppercase;
    font-size: 1.3em;
    margin: 0;
}

.temas__lista{
    list-style: none;
    padding: 0;
    margin: 0;
}

.temas__item{
    color: white;
    margin: 15px 0;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
}

.nivel-geografico{
    background-color: #00BF57;
    margin: 3px;
    padding: 20px;
}

.nivel-geografico__titulo{
    color: #004663;
    text-transform: uppercase;
    font-size: 1.3em;
    margin: 0;
}

.nivel-geografico__lista{
    list-style: none;
    padding: 0;
    margin: 0;
}

.nivel-geografico__item{
    color: #004663;
    margin: 15px 0;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
}

.fontes{
    background-color: #726263;
    margin: 3px;
    padding: 20px;
    border-radius: 0 0 30px 0;
}

.fontes__titulo{
    color: white;
    text-transform: uppercase;
    font-size: 1.3em;
    margin: 0;
}

.fontes__lista{
    list-style: none;
    padding: 0;
    margin: 0;
}

.fontes__item{
    color: white;
    margin: 15px 0;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
}

.rodape{
    background-color: #E6E3E3;
    border-top: 2px solid #726263;
    padding: 15px 0px;
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    width:100%;
}

.rodape__logo-container{
    text-align: right;
    display:flex;
    margin: 30px 10px;
}

.rodape__logo-ibge {
    height: 40px;
    margin-right: 20px;
}

.rodape__lista{
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: right;
    font-size: 0.8em;
    font-family: OpenSansBold, Helvetica, Arial, sans-serif;
    color: #004663;
}

.rodape__list-item {
	margin: 5px 0;
}
.rodape__list-item a {
	cursor: pointer;
}

.rodape__copyright{
    font-size: 0.8em;
    text-align: right;
    margin: 0;
    color: #726263;
    display: block;
}

/*****                       *****
 ***** estilos mobile *****
 *****                       *****/

 @media (max-width: 770px) {
  .tabela__conteudo {
    /* preenche a tabela com um fundo branco */
    width: fit-content;
  }

  /* .tabela__titulo {
    text-align: center;
  } */

  .cabecalhoOpacity {
    opacity: 0;
  }
}


/*****                 *****
 ***** estilos desktop *****
 *****                 *****/

@media (min-width: 720px) {

    .downloads {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .temas,
    .nivel-geografico,
    .fontes{
        width: 100%;
    }

    .breadcrumb,
    .titulos,
    .filtro-principal,
    .rotulos,
    .filtro-secundario__comboboxes,
    .filtro-secundário__checkboxes,
    .send-form,
    .data-wrapper,
    .topo {
        max-width: 1366px;
        margin-left: auto;
        margin-right: auto;
    }

    .rodape{
        flex-direction: row;
        justify-content: space-around;
    }

    .filtro-principal__linha{
        flex-direction: row;
    }

    .filtro-principal__label{
        width: 140px;
        text-align: right;
    }

    .glossario-botao{
        width: auto;
    }

    .filtro-secundario__comboboxes{
        flex-direction: row;
    }

    .filtro-secundario__linha{
        margin: 5px 5px 5px 0;
        flex-direction: column;
        width: 33%;
    }

    /*
    .rotulos{
        flex-direction: row;
        justify-content: space-between;
    }

    .rotulos__container {
        min-width: 50%;
    }
    */

    .grafico__conteudo,
    .grafico__unidade {
        width: 70%;
        margin: auto;
    }
    .grafico__conteudo {
        padding: 15px;
    }

    .botoes{
        flex-direction: row;
    }

    .botoes__botao{
        margin-right: 10px;
        min-width: 150px;
    }

}

/*****                       *****
 ***** estilos large desktop *****
 *****                       *****/

@media (min-width: 1366px) {
    .topo {
        right: calc(100%/2 - 1366px/2 + 30px) /* Keep it inside container. Delete this otherwise. */
    }

    .tabela__titulo {
        position: initial;
        right: none;
        left: none;
    }
    .tabela__conteudo {
        margin-top: 0;
    }
}


/*****                             *****
 ***** estilos para acessibilidade *****
 *****                             *****/

/** componentes do app **/
.contrast .filtro-principal__input {
    background: black !important;
    border: 1px solid white !important;
    color: white !important;
}
.contrast .filtro-secundario__checkbox-label.off { background-color: #000 !important; }
.contrast .filtro-secundario__checkbox-label.off span { color: yellow !important; }


.contrast .downloads__texto {
    color: yellow !important;
}

/* descricao-item */
.contrast .dropdown-content,
.contrast .dropdown-content_blue a,
.contrast .dropdown-content_green a,
.contrast .dropdown-content_brown a {
    background-color: #000 !important;
}
.contrast .dropdown .dropbtn::after,
.contrast .dropdown.selected .dropbtn::after {
	content: url(assets/img/seta_branca.png) !important;
}
.contrast .dropdown:hover .dropbtn::after,
.contrast .dropdown:focus-within .dropbtn::after {
	content: url(assets/img/seta_branca_down.png) !important;
}
