:root {
    --cor-box-shadow: gray;
    --cor-fundo: #FFF;
    --box-shadow: 5px 5px 15px 5px rgb(218, 209, 209);
    --font-family: 'Open sans', sans-serif;
    --cor-alcancadas: #7A9D54;
    --cor-alcancar: #FF9B50;
    ---cor-total: #000;
}

.area_familias_relatorio {
    font-family: 'Roboto Mono', monospace, sans-serif;
    width: 95%;
    height: auto;
    box-sizing: border-box;
    box-shadow: var(--box-shadow);
    border-radius: 7px;
    margin-bottom: 0.5%;
}

.relatorio_box_1 {
    width: 100%;
    height: auto;
}

.relatorio_box_1_filtro {
    width: 100%;
    height: auto;
    box-shadow: var(--box-shadow);
    border-radius: 7px;
}

.relatorio_box_2_card {
    width: 100%;
    height: auto;
}

.relatorio_box_2_tabela {
    width: 100%;
    height: auto;
    box-shadow: var(--box-shadow);
    border-radius: 7px;
}

#dashboard-familia-relatorio {
    border-radius: 7px;
}

.tabela-teste {
    width: 99.5%;
    margin: auto;
}

.buscar_cidadao_responsavel input {
    text-align: center;
    padding: 5px;
}

@media only screen and (min-width:640px) and (max-width:771px) {
    .dashboard_box_2_card{
        flex-direction: column;

    }

}

@media only screen and (min-width:1024px){
    .area_familias_relatorio {
       flex-direction: row-reverse;
       flex-wrap: nowrap;
       gap: 0.1rem;
    }

    .relatorio_box_1 {
        width: 30%;
        height: 100%;
        flex-wrap: nowrap;
    }

    .relatorio_box_1_filtro {
        width: 100%;
        height: 100%;
        flex-wrap: nowrap;
    }

    .relatorio_box_2 {
        width: 70%;
        flex-wrap: nowrap;
    }

    .relatorio_box_2_card{ 
        flex-wrap: nowrap;
    }
    
    .relatorio_box_2_tabela {
        height: 538px;
    }
}