.pie-chart-component-wrapper {
    width: 100% !important;
    /*min-width: 900px;*/
    justify-content: center;
    display: flex;
    /* position: relative; */
    cursor: default;
    height: 300px;
    align-items: center;
}

.pie-chart-component-wrapper .recharts-surface {
    width: 300px !important;
}

.pie-chart-component-wrapper .recharts-legend-wrapper {
    position: relative !important;
    height: fit-content !important;
}

.pie-chart-component-wrapper ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pie-chart-component-wrapper ul li {
    display: flex;
    margin-right: unset !important;
    align-items: center;
}
.total-pay {
    position: absolute;
    text-align: center;
    font-size: 16px;
    top: 50% !important;
    left: -54% !important;
    transform: translateX(-50%);
    color: #4e73df;
}

.rectangle {
    width: 16px;
    height: 10px;
    margin-right: 5px;
}

.pie-chart-component-wrapper .recharts-tooltip-wrapper {
    top: 20% !important;
    left: 25% !important;
}

.pie-chart-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e3e6f0;
    border-radius: 0.35rem;
    width: 100%;
    min-width: 400px;
    alignItems: 'center';
    height: 500px
}

.pie-chart-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    width: 100%;
}

.chart-header-title {
    font-weight: 700 !important;
    width: fit-content;
    font-size: 16px !important;
    margin-bottom: 0px !important;
    cursor: pointer;
}