.apexcharts-tooltip-style-1 {
    .apexcharts-tooltip {
        padding: rem(12px) rem(8px);
        background-color: var();
        border: 1px solid var(--input-bg);
        background-color: var(--white);
        box-shadow: 0 12px 20px rgba(#000, 0.1);
        @include border-radius(rem(8px));

        &-title {
            padding: 0 !important;
            background-color: transparent !important;
            font-size: rem(14px) !important;
            color: var(--text-primary-light) !important;
            font-weight: 600 !important;
            border: none !important;
        }

        &-series-group {
            padding: 0;
            display: flex;
            align-items: center;
            padding: 0 !important;

            .apexcharts-tooltip-y-group {
                padding: 0 !important;
            }

            .apexcharts-tooltip-z-group {
                display: none !important;
            }
        }
    }
}


/* Home Two Widget Chart Css Start*/
.remove-tooltip-title {
    .apexcharts-tooltip-title {
        display: none;
    }
}

.rounded-tooltip-value {
    .apexcharts-tooltip.apexcharts-theme-light {
        background: #fff;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .apexcharts-tooltip-text-y-label {
        display: none;
    }

    .apexcharts-tooltip-marker {
        display: none;
    }

    .apexcharts-tooltip-text-y-value {
        margin-left: 0;
    }

    .apexcharts-tooltip-text {
        display: flex;
    }
}

/* Home Two Widget Chart Css End*/

/* Chart's text color Css End*/
.apexcharts-xaxis-label, .apexcharts-yaxis-label {
    fill: #8a929f
}

/* Chart's text color Css End*/


/* Home Two Donut Chart Css Start*/
.apexcharts-tooltip-z-none {
    .apexcharts-tooltip-z-group {
        display: none;
    }
}

.title-style {
    .apexcharts-text.apexcharts-datalabel-value {
        display: none;
    }

    .apexcharts-text.apexcharts-datalabel-label {
        fill: #4B5563 !important;
        font-size: 14px;
        font-weight: 700 !important;
        font-family: Inter, sans-serif
    }
}

.circle-none {
    circle {
        display: none;
    }
}

#donutChart {
    height: 0px;
    min-height: 163px !important;
    margin-top: -32px;
}

.margin-16-minus {
    margin: -16px;
}

/* Home Two Donut Chart Css End*/

/* Home Five Radial Chart Css End*/
#semiCircleGauge {
    transform: translateY(22px) translateX(14px);
}

/* Home Five Radial Chart Css End*/


.apexcharts-bar-area:hover {
    fill: var(--brand);
}

.apexcharts-datalabels text {
    filter: none !important; /* Remove any filter applied to data labels */
    text-shadow: none !important; /* Remove any text shadow */
}

.apexcharts-legend-text {
    color: var(--text-secondary-light) !important;
}

.square-marker .apexcharts-legend-marker {
    border-radius: 4px !important;
    width: 16px !important;
    height: 16px !important;
}

.series-gap-24 {
    .apexcharts-legend-series {
        margin: 4px 12px !important;
    }
}

.check-marker {
    .apexcharts-legend-marker {
        position: relative;

        &::after {
            position: absolute;
            content: "\eb7a";
            font-family: remixicon;
            display: inline-block;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 10px;
            color: #fff;
            transition: .2s;
        }
    }
}


.apexcharts-yaxis {
    transform: translateX(10px);
}


[data-theme="dark"] {
    .apexcharts-tooltip.apexcharts-theme-light {
        color: #fff !important;
        background: rgba(30, 30, 30, .8) !important;
    }

    .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
        background: rgba(0, 0, 0, .7) !important;
        border-bottom: 1px solid #333 !important;
    }

    .apexcharts-tooltip-series-group {
        background: rgba(0, 0, 0, .7) !important;
    }
}