.grafics{
    padding: 50px 0;
}
.grafics .title-grafics-view{
    font-family: 'Open Sans';
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.66px;
}

.grafics-content{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.grafics-content .grafic-medium{
    display: flex;
    align-items: center;
    width: 492px;
    min-height: 281px;
    padding: 20px 32px;
    border-radius: 20px;
    background-color: var(--color-white-01);
    margin-top: 15px;
}

.grafic-medium .content-text{
    width: 60%;
}

.grafic-medium .grafic{
    width: 40%;
}

.content-stadistics .item-stadistics{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

.item-stadistics .content-color{
    width: 15px;
    height: 11px;
    border-radius: 3px;
    margin-right: 5px;
}

.item-stadistics span{
    font-size: 14px;
    max-width: 220px;
    color:  #222;
    font-style: normal;
    line-height: 16px;
}

.grafic-pie{
    width: 696px !important;
}

.grafics-content .grafic-large{
    width: 696px;
    height: 281px;
    border-radius: 20px;
    padding: 10px 20px;
    background: var(--color-white-01);
    margin-top: 15px;
}

.grafic-large #chartLine{
    height: 225px !important;
    margin: auto;
}

.grafic-large .section-title{
    width: 100%;
    height: 30px;
    border-bottom: 1px solid #e4e5e7;
}

.g-large{
    height: 354px !important;
}

.g-large #chartBar{
    width: 647px !important;
    height: 300px !important;
}

@media screen and (max-width: 1400px) {
    .grafics-left{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

    .grafics-right{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .g-large{
        margin-top: 35px !important;
    }
}

@media screen and (max-width: 1024px) {
    .grafic-medium{
        width: 100% !important;
    }

    .grafics-content .grafic-large{
        width: 100% !important;
    }

    .g-large #chartBar{
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    .grafic-medium{
        flex-direction: column;
    }

    .grafic-large #chartLine{
        width: 100% !important;
    }

    .grafic-medium .content-text{
        width: 100%;
    }

    .grafic-medium .grafic{
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
    }
}