@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/datagrid/css/datagrid.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

h2,
h3 {
    text-align: center;
}

#csv {
    display: none;
}

#csv2 {
    display: none;
}


@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/datagrid/css/datagrid.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

h1#title {
    padding-top: 10px;
    margin: 0;
    background-color: #3d3d3d;
    text-align: center;
    color: white;
}

#kpi-vitamin-a .highcharts-dashboards-component-title::before,
#kpi-iron .highcharts-dashboards-component-title::before {
    width: 14px;
    height: 14px;
    border-radius: 28px;
    display: inline-block;
    padding: 0;
    margin-right: 4px;
    background-color: #833C8F;
    content: " ";
}

#kpi-iron .highcharts-dashboards-component-title::before {
    background-color: #E9D914;
}

#kpi-vitamin-a .highcharts-dashboards-component-kpi-subtitle,
#kpi-iron .highcharts-dashboards-component-kpi-subtitle {
    margin-top: 10px;
    font-size: 1.2em;
    color: var(--highcharts-neutral-color-60);
}

#kpi-vitamin-a .highcharts-dashboards-component-kpi-value,
#kpi-iron .highcharts-dashboards-component-kpi-value {
    font-size: 4em;
    font-weight: normal;
    line-height: 2.4rem;
    margin-top: 10px;
    color: #833C8F;
}

#kpi-iron .highcharts-dashboards-component-kpi-value {
    color: #E9D914;
}

#dashboard-col-0 .highcharts-color-0 {
    fill: #833C8F;
    stroke: #833C8F;
}
#dashboard-col-1 .highcharts-color-0 {
    fill: #E9D914;
    stroke: #E9D914;
}

#kpi-vitamin-a .highcharts-dashboards-component-kpi-value::after,
#kpi-iron .highcharts-dashboards-component-kpi-value::after {
    content: "Usuarios Registrados";
    display: block;
    font-size: 1rem;
}

.highcharts-plot-line {
    stroke-dasharray: 2px;
    stroke: #833C8F;
}

.highcharts-plot-line-label {
    fill: #BF14E9;
;}

.highcharts-description {
    padding: 0 20px;
}


#dashboard-col-2 {
    height: 323px;
}

#kpi-vitamin-a,
#kpi-iron {
    flex: 1 1 100%;
    height: 205px;
}

/* LARGE */
@media (max-width: 1200px) {
    #dashboard-col-0,
    #dashboard-col-1 {
        flex: 1 1 35%;
    }

    #kpi-wrapper {
        flex: 1 1 30%;
    }

    #kpi-vitamin-a,
    #kpi-iron {
        flex: 1 1 100%;
    }
}

/* MEDIUM */
@media (max-width: 992px) {
    #dashboard-col-0,
    #dashboard-col-1 {
        flex: 1 1 50%;
    }

    #kpi-wrapper {
        flex: 1 1 100%;
    }

    #kpi-vitamin-a,
    #kpi-iron {
        flex: 1 1 50%;
    }
}

/* SMALL */
@media (max-width: 576px) {
    #dashboard-col-0,
    #dashboard-col-1 {
        flex: 1 1 100%;
    }

    #kpi-wrapper {
        flex: 1 1 100%;
    }

    #kpi-vitamin-a,
    #kpi-iron {
        flex: 1 1 50%;
    }
}



/*:root {
    --highcharts-color-0: #BF14E9;
    --highcharts-color-1: #14E995;
    --highcharts-color-2: #E9D914;
    --highcharts-color-3: #14E9B2;
}
*/

/*the container must be positioned relative:*/
/*.custom-select {
    position: relative;
    font-family: Arial;
}

.custom-select select {
    display: none;*/ /*hide original SELECT element:*/
/*}

.select-selected {
    background-color: #AD57BB;
}*/

    /*style the arrow inside the select element:*/
    /*.select-selected:after {
        position: absolute;
        content: "";
        top: 14px;
        right: 10px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #fff transparent transparent transparent;
    }*/

    /*point the arrow upwards when the select box is open (active):*/
    /*.select-selected.select-arrow-active:after {
        border-color: transparent transparent #fff transparent;
        top: 7px;
    }*/

/*style the items (options), including the selected item:*/
/*.select-items div, .select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
}*/

/*style items (options):*/
/*.select-items {
    position: absolute;
    background-color: #AD57BB;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}*/

/*hide the items when the select box is closed:*/
/*.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}*/
select {
    appearance: none;
    /*  safari  */
    -webkit-appearance: none;
    /*  other styles for aesthetics */
    width: 500px;
    font-size: 1.15rem;
    padding: 0.675em 6em 0.675em 1em;
    background-color: #fff;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    color: #000;
    cursor: pointer;
    background-color: #ad57bb;
    color:white;
}


.custom-select::before,
.custom-select::after {
    --size: 0.3rem;
    content: "";
    position: absolute;
    right: 1rem;
    pointer-events: none;
}

.custom-select::before {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-bottom: var(--size) solid black;
    top: 40%;
}

.custom-select::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid black;
    top: 55%;
}

#divTablaMunicipios {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

    #divTablaMunicipios td, #divTablaMunicipios th {
        border: 1px solid #ddd;
        /*padding: 8px;*/
    }

    #divTablaMunicipios tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    #divTablaMunicipios tr:hover {
        background-color: #ddd;
    }

    #divTablaMunicipios th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #833C8F;
        color: white;
    }

table.dataTable tbody td {
    padding: 0px;
}

    .paddingcero{
        padding: 0px;
    }


/*@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

body {
    font-family: "Lato", sans-serif;
}

.table-container {
    margin: auto;
    max-width: 1200px;
    min-height: 100vh;
    overflow: scroll;
    width: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
}

thead tr {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    height: 1px;
}

th {
    font-weight: bold;
    height: inherit;
    padding: 0;
}

    th:not(:first-of-type) {
        border-left: 1px solid #ddd;
    }

    th button {
        background-color: #eee;
        border: none;
        cursor: pointer;
        display: block;
        font: inherit;
        height: 100%;
        margin: 0;
        min-width: max-content;
        padding: 0.5rem 1rem;
        position: relative;
        text-align: left;
        width: 100%;
    }

        th button::after {
            position: absolute;
            right: 0.5rem;
        }

        th button[data-dir="asc"]::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='0, 0 8,0 4,8 8' fill='%23818688'/%3E%3C/svg%3E");
        }

        th button[data-dir="desc"]::after {
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='4 0,8 8,0 8' fill='%23818688'/%3E%3C/svg%3E");
        }

tbody tr {
    border-bottom: 1px solid #ddd;
}

td {
    padding: 0.5rem 1rem;
    text-align: left;
}*/