.pie-chart{
    position: relative;
}
.pie-chart-cont {
    width: 480px;
    height: 480px;
    /* margin: 10px auto; */
}

.h-core-knob {
    position: absolute;
    width: 50px;
    margin: 164px;
    box-shadow: 0px 6px 10px -1px rgba(0, 0, 0, 0.82);
    border-radius: 50%;
    z-index: 6;
    
}

.h-core-canvas {
    position: absolute;
    margin: 90px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    z-index: 5;
}

.h-core-canvas-2 {
    position: absolute;
    margin: 75px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    z-index: 4;
}

.h-core-canvas-3 {
    position: absolute;
    margin: 55px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.00);
    border-radius: 50%;
    z-index: 3;
}

.h-core-canvas-4 {
    position: absolute;
    margin: 35px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.00);
    border-radius: 50%;
    z-index: 2;
}

.h-core-canvas-5 {
    position: absolute;
    margin: 15px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.00);
    border-radius: 50%;
    z-index: 1;
}

.pie-controls-cont {
    margin: 0 auto;
    width: 580px;
    height: 100px;
}

.custom-controls .pie-controls-cont{
    margin: 0;
    margin-left: -2rem;
}

.custom-texts{
    display: flex;
    justify-content: space-between;
    width: 400px;
    margin-top: -100px;
    text-transform: uppercase;
}
.custom-texts .active{
    font-weight: bolder;
    color: #294A66;
}

.pie-controls-1 {
    float: left;
    width: 200px;
    height: 80px;
}

.pie-controls-2 {
    float: left;
    width: 50px;
    height: 80px;
}

.pie-controls-3 {
    float: left;
    width: 200px;
    height: 80px;
}

.pie-text-bot {
    display: block;
    width: 450px;
    margin: 0;
}

.pie-chart-overlay {
    position: absolute;
    width: 580px;
    height: 395px;
    /* margin: -397px 0px 6px; */
    background-repeat: no-repeat;
    z-index: 5;
    opacity: 0;
    transition: opacity 800ms ease-in-out; 
    top: 0
    /* margin-left: -150px; */
}

@media (max-width: 576px) {
    .pie-controls-cont{
        height: 70px;
    }
    .controls-1, .controls-2, .controls-3{
        width: 420px
    }
    .pie-controls-1, .pie-controls-2, .pie-controls-3{
        width: 140px;
        height: 60px;
    }
    .custom-texts{
        font-size: 13px;
        margin-top: 0px;
        width: 350px;
    }

    /* .h-over-1{
        top: 25px;
        left: -60px;
    } */

    .pie-chart-overlay{
        left: -1rem;
    }

    .pie-chart-cont{
        left: -1.6rem;
        position: relative;
    }

    /* .h-over-2{
        top: 20px;
        left: -75px;
    }

    .h-over-3{
        top: 30px;
        left: -70px;
    } */
    
}