/* ApexChart Custom Area Style
============================================*/
.card {
    .apexcharts-legend-text {
        padding-left: 20px;
        margin-left: -15px;
    }
    .apexcharts-tooltip {
        box-shadow: 0 0 24px #4755691a;
        background-color: $white;
        border: 0;
    }
    .apexcharts-tooltip-rangebar {
        padding: 0;
    }
    .apexcharts-tooltip * {
        //color: $body-color;
        font-size: 14px !important;
        font-family: $body-font-family !important;
    }
    .apexcharts-tooltip-rangebar {
        .category {
            font-weight: 500;
            color: $secondary;
        }
        div:nth-child(2) {
            padding: 9px 35px 9px 12px;
        }
        .series-name {
            margin-bottom: 0;
            padding: 9px 35px 9px 12px;
            background-color: #e7effd;
            color: $secondary !important;
            font-weight: 500;
            font-size: 14px !important;
        }
    }
    .apexcharts-tooltip {
        &.apexcharts-theme-light {
            border: none;
            .apexcharts-tooltip-title {
                margin-bottom: 0;
                padding: 9px 35px 9px 12px;
                background-color: #e7effd;
                color: $secondary !important;
                font-weight: 500;
                font-size: 14px !important;
                border: none;
            }
        }
       
    }
    .apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
        border: 0;
        color: $secondary;
        background-color: $white;
        box-shadow: 0 4px 34px #6560f01a;
    }
    .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text, .apexcharts-yaxistooltip .apexcharts-xaxistooltip-text {
        font-weight: 500;
        font-size: 14px !important;
        font-family: $body-font-family !important;
    }
    .apexcharts-xaxistooltip-bottom:before {
        border-bottom-color: $white;
    }
    .apexcharts-xaxistooltip-bottom:after {
        border-bottom-color: $white;
    }
    .apexcharts-tooltip-series-group.apexcharts-active, .apexcharts-tooltip-series-group:last-child {
        background-color: $white !important;
        color: $secondary !important;
    }
    .apexcharts-tooltip-marker {
        border-radius: 0;
    }
    span.apexcharts-tooltip-text-y-label {
        color: $body-color;
    }
}
.chart-position {
    .apexcharts-tooltip-title {
        display: none;
    }
    max-width: 150px;
    position: absolute;
    right: 6px;
    bottom: 13px;
    text-align: right;
}
#client_payment_status_chart {
    .apexcharts-text  {
        display: none;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1599px) {
    .total_leads_chart {
        margin-top: 8px !important;
    }
}

/* 
Dark Mode SCSS 
===================================================*/
[data-theme=dark] {

    .card {
        .apexcharts-pie-series path {
            stroke: #1b232d;
        }
        .apexcharts-pie circle {
            stroke: #fff3;
        }
        .apexcharts-pie {
            line {
                stroke: #fff3;
            }
        }
        .apexcharts-tooltip {
            background-color: $dark-body-bg !important;
        }
        .apexcharts-tooltip-rangebar {
            .category {
                color: $secondary;
            }
            
            .series-name {
                background-color: $dark-body-bg !important;
                color: $secondary !important;
            }
        }
        .apexcharts-tooltip {
            &.apexcharts-theme-light {
                border: none;
                .apexcharts-tooltip-title {
                    background-color: $dark-body-bg !important;
                    color: $white !important;
                }
            }
        }
        .apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
            color: $white;
            background-color: $dark-body-bg;
        }
        .apexcharts-xaxistooltip-bottom:before {
            border-bottom-color: $dark-body-bg !important;
        }
        .apexcharts-xaxistooltip-bottom:after {
            border-bottom-color: $dark-body-bg !important;
        }
        .apexcharts-tooltip-series-group.apexcharts-active, .apexcharts-tooltip-series-group:last-child {
            background-color: $dark-border !important;
            color: $white !important;
        }
        span.apexcharts-tooltip-text-y-label {
            color: $body-color;
        }
        .apexcharts-grid-row {
            fill: $dark-card-bg;
        }
        .apexcharts-gridline {
            stroke: $dark-input-bg;
        }
        #total_sales_chart {
            .apexcharts-tooltip * {
                background-color: #131920 !important;
                color: $white !important;
               
            }
            .apexcharts-tooltip-rangebar div:nth-child(2) {
                background-color: rgba(255, 255, 255, 0.0901960784) !important;
                span {
                    background-color: rgba(255, 255, 255, 0.0901960784) !important;
                }
            }
        }
    }

}