/* .row {
    --bs-gutter-x: 0rem !important;
} */

.box {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x)/ -2);
    margin-left: calc(var(--bs-gutter-x)/ -2);
}

.box-grafica {
    position: relative;
    background-color: white;
    height: 700px;

}

.box-informacion {
    position: relative;
    background-color: white;
    height: 700px;


}

/* ---------------------------Estilos de las garificas */
.caja-grafica {
    right: 18rem;
    margin-top: 2rem;
    height: 150px;
    position: relative;
}

.pie-graifica {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

.pie {
    transition: all 1s;
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 280px, 560px, 0px);
}

.grafica-tema- {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 280px);
}

.grafica-tema-:hover {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 270px);
    bottom: 8px;
    left: 10px;
    z-index: 1;

}

.grafica-tema-2 {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 280px);
}

.grafica-tema-2:hover {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 270px);
    /* bottom: 0px; */
    left: 14px;
}

.grafica-tema-3 {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 280px);
}

.grafica-tema-3:hover {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 270px);
    left: 10px;
    top: 10px;
}

.grafica-tema-4 {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 280px);
}

.grafica-tema-4:hover {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 272px);
    left: 8px;
    top: 16px;
}

.grafica-tema-5 {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 280px);
}

.grafica-tema-5:hover {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 100%;
    clip: rect(0px, 560px, 560px, 270px);
    top: 21px;

}

#color-tema-uno .pie {
    background-color: #00A4DA;
    transform: rotate(45deg);
}

#color-tema-uno .pie:hover {
    background-color: #a04;
    transform: rotate(45deg);

}


#color-tema-dos {
    transform: rotate(45deg);
}

#color-tema-dos .pie {
    background-color: #f37261;
    transform: rotate(45deg);
}

#color-tema-dos .pie:hover {
    background-color: #D9D7F1;
    transform: rotate(45deg);

}


#color-tema-tres {
    transform: rotate(90deg);
}

#color-tema-tres .pie {
    background-color: #ffcc01;
    transform: rotate(40deg);
}

#color-tema-tres .pie:hover {
    background-color: #BAFFB4;
    transform: rotate(40deg);
}


#color-tema-cuatro {
    transform: rotate(130deg);
}

#color-tema-cuatro .pie {
    background-color: #a480b9;
    transform: rotate(23deg);
}

#color-tema-cuatro .pie:hover {
    background-color: #2F3A8F;
    transform: rotate(23deg);
}

#color-tema-cinco {
    transform: rotate(153deg);
}

#color-tema-cinco .pie {
    background-color: #7ac68c;
    transform: rotate(27deg);
}

#color-tema-cinco .pie:hover {
    background-color: #a04;
    transform: rotate(27deg);
}

.titulo1 {
    Text-align: left;
    color: white;
    font-family: Verdana;
    transform: rotate(-45deg);
    z-index: 1;
    left: -5px;
    position: relative;
    left: 89px;
    bottom: 128px;
}

.numero1 {
    Text-align: left;
    color: white;
    font-family: Verdana;
    transform: rotate(-45deg);
    z-index: 1;
    left: -5px;
    position: relative;
    left: 140px;
    bottom: 80px;
}


.circulo-blanco {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    border-radius: 100%;
    top: 230px;
    left: 230px;
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
    color: white;
    z-index: 1;
}

.circulo-transparente {
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.25);
    /* box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%); */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-radius: 100%;
    top: 130px;
    left: 130px;
    color: white;
    z-index: 1;
}