: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;
    --cor-visitada-porcent: #8fc951;
    --cor-nao-visitada-porcent: #ffb983;
    --cor-meta-porcent: #383838;
    --box-shadow: 2px 3px 3px 3px rgb(218, 209, 209);
    --box-shadow-filtro:  5px 5px rgb(218, 209, 209);
    --cor-fundo-input-date: #FF6400;
    --cor-fundo-hover: #ffc107;
    --cor-font: #FFF;
    --cor-borda-card: #ced4da;
    --cor-primaria: #fd7e14;
    --cor-secundaria: #ffc107;
    --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;
    --cor-visitada-porcent: #8fc951;
    --cor-nao-visitada-porcent: #ffb983;
    --cor-meta-porcent: #383838;
}

.area_epidemiologia_relatorio {
    width: 95%;
    height: auto;

    border-radius: 7px;
    box-shadow: var(--box-shadow);

    margin-bottom: 0.5%;

}

/*Area geral dashboard*/
.epidemiologia_dashboard {
    font-family: 'Roboto Mono', monospace, sans-serif;

    width: 100%;
    height: auto;

    border-radius: 7px;
    box-sizing: border-box;

    margin-left: 0;
}


/*Filtros Epidemiologia*/
.epidemiologia_dashboard_box_1 {
    width: 100%;
    height: auto;
}

/*Area geral cards e charts*/
.main_epidemiologia_dashboard_box {
    width: 100%;
    height: auto;
}

/*Area geral cards e chart total*/
.epidemiologia_dashboard_box_2 {
    width: 100%;
    height: auto;
}

.epidemiologia_card_total{
    height: 160px;
    width: 100%;

    box-shadow: var(--box-shadow);
    border-radius: 7px;
}

.epidemiologia_card_vacinados {
    height: 160px;
    width: 100%;

    box-shadow: var(--box-shadow);
    border-radius: 7px;
}

.epidemiologia_card_nao_vacinados {
    height: 160px;
    width: 100%;

    box-shadow: var(--box-shadow);
    border-radius: 7px;
}

.card_total_epidemiologia_first {
    width: 60%;
    height: 100%;
}

.card_vacinados_epidemiologia_second {
    width: 60%;
    height: 100%; 
}

.card_nao_vacinados_epidemiologia_third {
    width: 60%;
    height: 100%; 
}

.card_epidemiologia_total_titulo {
    font-size: 15px;
    font-weight: bold;   
    line-height: 2.5em;
    letter-spacing: 1.5px;

    align-content: flex-start;

}

.card_epidemiologia_vacinados_titulo {
    font-size: 15px;
    font-weight: bold;   
    line-height: 2.5em;
    letter-spacing: 1.5px;

    align-content: flex-start;
}

.card_epidemiologia__nao_vacinados_titulo {
    font-size: 15px;
    font-weight: bold;   
    line-height: 2.5em;
    letter-spacing: 1.5px;

    align-content: flex-start;
}

.card_epidemiologia_total_valor {
    align-self: center;
    align-content: baseline;

    font-size: 35px;
    font-weight: bolder;
    letter-spacing: 1.5px;

    margin-top: 10px;

    color: var(---cor-total);
}

.card_epidemiologia_vacinados_valor {
    align-self: center;
    align-content: baseline;

    font-size: 35px;
    font-weight: bolder;
    letter-spacing: 1.5px;

    margin-top: 10px;

    color: var(--cor-alcancadas);
}

.card_epidemiologia_nao_vacinados_valor {
    align-self: center;
    align-content: baseline;

    font-size: 35px;
    font-weight: bolder;
    letter-spacing: 1.5px;

    margin-top: 10px;

    color: var(--cor-alcancar);
}

#fa_solid_card_epidemiologia {
    align-self: center;

    font-size: 20px;
}

#fa_solid_card_epidemiologia_vacinados {
    align-self: center;

    font-size: 20px;
}

#fa_solid_card_epidemiologia_nao_vacinados {
    align-self: center;

    font-size: 20px;
}

.card_total_epidemiologia_secund {
    width: 35%;
    height: 100%;
}

.card_vacinados_epidemiologia_secund {
    width: 35%;
    height: 100%;

    margin-top: 27px;
}

.card_nao_vacinados_epidemiologia_secund {
    width: 35%;
    height: 100%;

    margin-top: 27px;
}

#smile_epidemiologia_total {
    font-size: 35px;
}

#smile_epidemiologia_vacinados {
    font-size: 35px;
}

#smile_epidemiologia_nao_vacinados {
    font-size: 35px;
}

.porcentagem_vacinadas {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;

    color: var(--cor-alcancadas);
}

.porcentagem_nao_vacinados {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    
    color: var(--cor-alcancar);
}

.porcentagem_vacinadas:hover {
    cursor: pointer;
    color: var(--cor-visitada-porcent);
}

.porcentagem_nao_vacinados:hover {
    cursor: pointer;
    color: var(--cor-alcancar);
}

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

/*Area geral charts*/
.epidemiologia_dashboard_box_3 {
    width: 100%;
    height: auto;
}

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

.epidemiologia_box_2_chart_Faixa_Etaria {
    width: 100%;
    height: 300px;

    border-radius: 7px;
    box-shadow: var(--box-shadow);
}

.epidemiologia_box_2_chart_raca {
    width: 100%;
    height: 300px;

    border-radius: 7px;
    box-shadow: var(--box-shadow);
}

.epidemiologia_box_2_chart_aplicacao {
    width: 100%;
    height: 300px;

    border-radius: 7px;
    box-shadow: var(--box-shadow);
}

/*Chart Aplicação*/
#epidemiologia_box_2_chart_aplicacao {
    width: 95%;
    height: 100%;
}

#epidemiologia_box_2_chart_aplicacao > div > a {
    display: none;
}

/*Chart Raça*/
#epidemiologia_box_2_chart_raca {
    width: 96.5%;
    height: 97%;
}

#epidemiologia_box_2_chart_raca > div > a {
    display: none;
}

/*Chart Faixa Etária */
#epidemiologia_box_2_chart_Faixa_Etaria  {
    width: 96.5%;
    height: 97%;
}

#epidemiologia_box_2_chart_Faixa_Etaria > div > a {
    display: none;
}

/*Chart Total*/
#epidemiologia_box_2_chart_total {
    width: 96%;
    height: 100%;
}

#epidemiologia_box_2_chart_total > div > a {
    display: none;
}

@media only screen and (min-width: 1024px) {

    .epidemiologia_dashboard {
        height: 795px;
    }  

    .epidemiologia_dashboard_box_1 {
        width: 30%;
        height: 100%;
    }

    .epidemiologia_dashboard_filtro {
        height: 100% !important;
    }

    .form_filtro_epidemiologia_dashboard {
        width: 100%;
        height: 100%!important;
        overflow-y: auto;
    }

    .main_epidemiologia_dashboard_box {
        width: 70%;
    }

    .epidemiologia_box_2_charts {
        width: 30%;
    }

    .epidemiologia_dashboard_box_3 {
        width: 70%;
    }

}

/* ====================== FILTROS ========================= */

/*Area principal filtros*/
.epidemiologia_dashboard_filtro {
    width: 100%;
    height: auto;

    border-radius: 7px;
    box-shadow: var(--box-shadow);
}

.form_filtro_epidemiologia_dashboard {
    width: 100%;
}

/*SCROLL*/
.form_filtro_epidemiologia_dashboard::-webkit-scrollbar {
    width: 5px;
}
  
.form_filtro_epidemiologia_dashboard::-webkit-scrollbar-track {
    background: var(--second-color) !important; 
    border-radius: 20px;
    border: 1px solid var(--second-color);
}
  
.form_filtro_epidemiologia_dashboard::-webkit-scrollbar-thumb {
    background-color: var(--secondary-bg-color); 
    border-radius: 20px;
    border: 1px solid var(--second-color);
}

/*Titulo filtro*/
.filtro_epidemiologia_titulo {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.8rem;
    letter-spacing: 1.5px;

    margin-left: 10px;
    margin-top: 5px;
}

/*Filtro Periodo*/
.filtro_epidemiologia_periodo {
    width: 97%;
    height: auto;
    padding: 10px;

    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_periodo_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}

.dashboard_filtro_date_epidemiologia {
    width: 100%;
}

.dashboard_filtro_date_epidemiologia input {
    width: 100%;
}

/*Filtro Tipo de Relatório*/
.form_filtro_epidemiologia_tipo {
    width: 97%;
    height: auto;

    margin-right: auto;
    margin-bottom: 5px;
    padding: 10px;

    box-shadow: var(--box-shadow-filtro);
    border-radius: 7px;
}

.filtro_epidemiologia_tipo_titulo {
    font-size: 13px;
    font-weight: bold;
    line-height: 1rem;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.epidemiologia_tipo {
    padding: 6px;
}

/*Filtro Unidade*/
.filtro_epidemiologia_unidade {
    width: 97%;
    height: auto;
    padding: 10px;

    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_unidade_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}

/*Filtro Equipe*/
.filtro_epidemiologia_equipe {
    width: 97%;
    height: auto;

    padding: 10px;
    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_equipe_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}

/*Filtro Profissional*/
.filtro_epidemiologia_profissional {
    width: 97%;
    height: auto;
    padding: 10px;

    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_profissional_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}

/*Filtro vacina*/
.filtro_epidemiologia_vacina {
    width: 97%;
    height: auto;
    padding: 10px;

    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_vacina_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}

/*Filtro Lote*/
.filtro_epidemiologia_lote {
    width: 97%;
    height: auto;
    padding: 10px;

    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_lote_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}

/*Filtro Faixa Etaria*/
.filtro_epidemiologia_faixa_etaria {
    width: 97%;
    height: auto;
    padding: 10px;

    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_faixa_etaria_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}

.inputs_epidemiologia_faixa_etaria {
    width: 100%;
    padding: 10px;
}

/*Filtro Paciente*/
.filtro_epidemiologia_paciente {
    width: 97%;
    height: auto;

    padding: 10px;
    margin-bottom: 20px;

    border-radius: 7px;
    box-shadow: var(--box-shadow-filtro);
}

.filtro_epidemiologia_paciente_titulo {
    font-size: 13px;
    font-weight: bold;

    line-height: 1rem;
    letter-spacing: 1.5px;
}


.buscar_cidadao_responsavel {
    display: flex;
    flex-direction: row;
    gap: 0.3rem;
}

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

/* ---------- FILTROS RELATÓRIO---------- */
.container_reponsive_epidemi {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.container_responsive_epidemi_filtros {
    width: 50%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.repossive_epidemi_container1 {
    width: 60%;
}

.reponsive_epidemi_container2 {
    width: 40%;
}


/* Responssividade container */
.epidemi_caixa_data {
    min-width: 35%;
}

.epidemi_caixa_1 {
    min-width: 15%;
}

.epidemi_caixa_2 {
    width: 25%;
}

.epidemi_caixa_3 {
    width: 30%;
}
/* ------------------------ */

.container_epidemi_vacinados {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.container_epidemi_vacinados_ {
    width: 50%;
    display: flex;
    gap: 0.3em;
    align-items: center;
    justify-content: center;
}

.epidemi_check_input {
    cursor: pointer;
}

@media only screen and (min-width: 1080px) {
    .container_reponsive_epidemi {
        width: 100%;
        flex-direction: column;
    }

    .container_responsive_epidemi_filtros {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    .filtro_rel_epidemi_ {
        width: 32%;
    }
    
    .filtro_rel_epidemi_lote {
        width: 13%;
    } 
    
    .filtro_rel_epidemi_fabricante {
        width: 12%;
    }    
    
    .filtro_rel_epidemi_dose {
        width: 10%;
    }

    /* Responssividade container */
    .epidemi_caixa_data {
        min-width: 22.5%;
    }

    .epidemi_caixa_1 {
        min-width: 14%;
    }

    .epidemi_caixa_2 {
        width: 25%;
    }

    .epidemi_caixa_3 {
        width: 37%;
    }
    /* ------------------------ */
}

@media only screen and (min-width: 1100px) {
    /* Responssividade container */
    .epidemi_caixa_data {
        width: 30%;
    }

    .epidemi_caixa_3 {
        width: 38.6%;
    }
    /* ------------------------ */
}

@media only screen and (min-width: 1220px) {
    /* Responssividade container */
    .epidemi_caixa_data {
        min-width: 27%;
    }

    .epidemi_caixa_1 {
        min-width: 12%;
    }

    .epidemi_caixa_2 {
        width: 25%;
    }

    .epidemi_caixa_3 {
        width: 47%;
    }
    /* ------------------------ */
}

@media only screen and (min-width: 1900px) {
    .container_reponsive_epidemi {
        width: 100%;
        flex-direction: row;
    }

    .container_responsive_epidemi_filtros {
        width: 50%;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    .repossive_epidemi_container1 {
        width: 66%;
    }

    .reponsive_epidemi_container2 {
        width: 34%;
    }

    /* Responssividade container */
    .epidemi_caixa_data {
        min-width: 20%;
    }

    .epidemi_caixa_1 {
        min-width: 12%;
    }

    .epidemi_caixa_2 {
        width: 23%;
    }

    .epidemi_caixa_3 {
        width: 47%;
    }

    .epidemi_caixa_idade {
        min-width: 23%;
    }
    /* ------------------------ */
}

@media only screen and (max-width: 1079px) {
    .container_reponsive_epidemi {
        width: 100%;
        flex-direction: column;
    }

    .container_responsive_epidemi_filtros {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .filtro_rel_epidemi_ {
        width: 100%;
    }
    
    .filtro_rel_epidemi_lote {
        width: 100%;
    } 
    
    .filtro_rel_epidemi_fabricante {
        width: 100%;
    }    
    
    .filtro_rel_epidemi_dose {
        width: 100%;
    }

    /* Responssividade container */
    .epidemi_caixa_data {
        min-width: 100%;
    }

    .epidemi_caixa_1 {
        min-width: 100%;
    }

    .epidemi_caixa_2 {
        width: 100%;
    }

    .epidemi_caixa_3 {
        width: 100%;
    }
}
/* -------------------------------------- */
/* ======================================================== */