.mainWrapper{
    /*width:840px !important;
    height:700px;
    background:  url('images/Education.png');
    background-size: cover;
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    left:-25px;*/
    /*width: 80% !important;*/
    /*height: 80%;*/
    /*background-color: #FFF0FFFF; !* Cambia #ff0000 por el código hexadecimal o nombre del color que deseas usar *!*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    /*position: relative;*/
    /*left: -25px;*/
    /*background-color: #ccc;*/
    /*display: flex;*/
    /*width: 40em;*/
    /*background-image: url("../config/logo_da.png");*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Dos columnas del mismo tamaño */
    grid-gap: 20px;
    justify-content: center; /* Alinea los elementos horizontalmente en el centro */
    align-items: center;
    border-top: 1px solid #678036;
}
.select-personalizado {
    margin-top: -400px !important;
}
.unico{
    padding: 20px;
    display: grid;
    grid-gap: 20px;
    justify-content: center; /* Alinea los elementos horizontalmente en el centro */
    align-items: center;
}
/*#chartDiv{
    position:absolute;
    margin-top:60px;
    margin-left:10px;
    width:260px;
    height:240px;
}
#chartDiv2{
    position:absolute;
    margin-top:315px;
    margin-left:10px;
    width:260px;
    height:360px;
    position: absolute;
    margin-top: 80%;
    margin-left: 10px;
    width: 260px;
    height: 360px;
}
#chartDiv3{
    position:absolute;
    margin-top:0px;
    margin-left:460px;
    width:364px;
    height: 352px;
    position: absolute;
    margin-top: 0px;
    margin-left: 70%;
    width: 364px;
    height: 352px;
}
#chartDiv4{
    position:absolute;
    margin-top:410px;
    margin-left:560px;
    width:260px;
    height:260px;
    position: absolute;
    margin-top: 80%;
    margin-left: 70%;
    width: 260px;
    height: 260px;
}*/
#chartDiv {
    /*position: absolute;*/
    /*top: 10px;*/
    /*bottom: 10px;*/
    /*left: 10px;*/
    /*width: 46%;*/
    /*height: 40%;*/
}

#chartDiv2 {
    /*position: absolute;*/
    /*bottom: 10px;*/
    /*left: 10px;*/
    /*width: 46%;*/
    /*height: 40%;*/
}

#chartDiv3 {
    /*position: absolute;*/
    /*top: 100px;*/
    /*right: 10px;*/
    /*width: 46%;*/
    /*height: 40%;*/
    /*display: flex !important;*/
    /*flex-wrap: wrap !important;*/
    /*justify-content: space-around !important;*/
}

#chartDiv4 {
    /*position: absolute;*/
    /*bottom: 100px;*/
    /*right: 10px;*/
    /*width: 46%;*/
    /*height: 40%;*/
}


.icon-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* o cualquier otra alineación que desees */
}

.icon {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*width: 16px;*/
    /*height: 16px;*/
    /*margin: 4px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px; /* Espacio entre los iconos */
    max-width: calc((100% - 8px) / 10); /* Ajusta el número 10 según sea necesario */
    max-height: calc((100vh - 8px) / 10); /* Ajusta el número 10 según sea necesario */
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.tab {
    overflow: hidden;
    border-bottom: 1px solid #678036;
    /*background-color: #f1f1f1;*/
    margin-left: 10px;
    margin-right: 10px;
}
.dashboard {
    overflow: hidden;
    /*border: 1px solid #ccc;*/
    background-color: #f1f1f1;
    margin-left: 10px;
    margin-right: 10px;
}
.contenidodashboard{
    border-radius: 25px; /* Ajusta el valor según el radio de redondeo deseado */
    background-color: #f2f2f2; /* Cambia el color de fondo según tus preferencias */
    padding: 20px; /* Añade un relleno para separar el contenido del borde */
}
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 0 10px 10px;
    transition: 0.3s;
    /* margin-right: 10px; */
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    /* background-color: #ffffff; */
}

.tablinks:after{
    border-right: 1px solid #678036;
    content: '';
    margin-left: 10px;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

.picto{
    position: relative;
    z-index: 2;
    /*background-image: url("../config/logo_da.png");*/
    /*background-repeat: space;*/
    /*background-size: 20px 20px;*/
}
.picto [id^="JSCharting_"] {
    /* Estilos para elementos con id que comienza con "JSCharting_" dentro de .picto */
    /* Por ejemplo: */
    /*border: 1px solid #ccc;*/
    /*!* Otros estilos según tus necesidades *!*/
    /*background-image: url("../config/logo_da.png");*/
    /*background-repeat: space;*/
    /*background-size: 20px 20px;*/
    z-index: 20;
}
.picto tspan {
    /* Estilos para elementos con id que comienza con "JSCharting_" dentro de .picto */
    /* Por ejemplo: */
    /*border: 1px solid #ccc;*/
    /*!* Otros estilos según tus necesidades *!*/
    /*background-image: url("../config/logo_da.png");*/
    /*background-repeat: space;*/
    /*background-size: 20px 20px;*/
    /*background-image: url("../config/logo_da.png");*/
    /*background-repeat: space;*/
    /*background-size: 20px 20px;*/
    z-index: 20;
    position: absolute;
    top: 0;
    left: 0;
}
.pictodiv {
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../config/casa.png");
    background-repeat: space;
    /*background-size: 20px 20px;*/
    background-size: 2% auto;
    margin: 40px;
    z-index: 1;
}

.iconoPic {
    background-image: url("../config/censo_muni_img.png");
    background-position: center;
    background-repeat: no-repeat;
}


.picto path {
    stroke: #FFFFFF !important;
    /*fill: #FFFFFF !important;*/
    fill-opacity: 0;
    border: none;
}

.rect {
    border: none;
}
 .pictodivrect{
     border: 1px solid #ccc;
     background-image: url("../config/logo_da.png");
     background-repeat: space;
     /*background-size: 20px 20px;*/
     background-size: 8% auto;

 }
/*.picto [id^="JSCharting_"] svg g g:nth-child(1) g:nth-child(1) g g:nth-child(2) g:nth-child(2) g:nth-child(3) g g:nth-child(1) g:nth-child(4) g g g g:nth-child(1) g g g:nth-child(1) rect {*/
/*    stroke: #FFFFFF !important; !* Establece el color del trazo a blanco *!*/
/*    fill-opacity: 0;*/
/*}*/

/*.picto path:hover {*/
/*    stroke: #ff0000 !important; !* Mismo color de trazo cuando se hace hover *!*/
/*}*/

.pie [id^="JSCharting_"] {
    /*background-image: url("../config/sin_datos2x.png");*/
    background-position: center;
    background-repeat: no-repeat;
}

.picto [id^="JSCharting_"] {
    /*background-image: url("../config/sin_datos2x.png");*/
    background-position: center;
    background-repeat: no-repeat;
}

.column [id^="JSCharting_"] {
    /*background-image: url("../config/sin_datos2x.png");*/
    background-position: center;
    background-repeat: no-repeat;
}

.curvaS [id^="JSCharting_"] {
    /*background-image: url("../config/sin_datos2x.png");*/
    background-position: center;
    background-repeat: no-repeat;
}

.pie {
    /*background-image: url("../config/sin_datos2x.png");*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
}

.pie [id^="JSCharting_"] svg g g:nth-child(1) g:nth-child(1) g g:nth-child(2) g:nth-child(2) g:nth-child(3) g g:nth-child(1) g:nth-child(1) rect {
    margin-top: -10px; /* Ajusta la cantidad de margen superior según tus necesidades */
}

.pie tspan {
    /*background: #0b97c4 !important;*/
    /*margin-top: 20% !important;*/
}

.tituloPictograma{
    color: #ff0000;
    display: inline-block;
    font-size: 20px;
    margin-top: 40px !important;
    font-weight: bold;
    padding: 100px;
}
.circle-container {
    position: relative;
    width: 100px; /* Ancho del contenedor */
    height: 100px; /* Altura del contenedor */
    border-radius: 50%; /* Hace que el contenedor sea un círculo */
    background-color: lightblue; /* Color de fondo del círculo */
}

.circle-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px; /* Tamaño del número */
    color: white; /* Color del número */
}

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

.circle-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E10715; /* Puedes ajustar el color de fondo según tus necesidades */
    color: #ffffff; /* Puedes ajustar el color del texto según tus necesidades */
}

#loading-animation {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

#loading-spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/*@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}*/

.custom-chart-container {
    /*background: url('../config/sin_datos.png') center center no-repeat;*/
    background-size: cover;
}

.hide-bg {
    background-image: none !important;
}

.contenedorSelect {
    display: flex;
    align-items: center; /* Alinea los elementos verticalmente en el centro */
}

.loadergrafico {
    position: fixed;
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /*background-color: white;*/
    border-top: 16px solid blue;
    border-right: 16px solid green;
    border-bottom: 16px solid red;
    border-left: 16px solid pink;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#widgetFlexWrapper {
    display: flex;
    max-width: 600px;
    margin: 8px auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}