/* Your reusable placeholder under each chart */
.chart-loading {
    position: relative;
    min-height: 36px; /* reserve space so it doesn't jump */
}

    /* Kendo progress mask: remove the gray block look */
    .chart-loading .k-loading-mask {
        position: absolute;
        inset: 0;
        background: transparent !important;
        border: 0 !important;
    }

    /* Hide the Loading... text */
    .chart-loading .k-loading-text {
        display: none !important;
    }

    /* Hide the color layer that renders as a block */
    .chart-loading .k-loading-color {
        display: none !important;
    }

    /* Draw our own spinner (works regardless of theme assets) */
    .chart-loading .k-loading-image {
        display: block !important;
        width: 24px;
        height: 24px;
        margin: 6px auto;
        background: none !important;
        border: 3px solid rgba(0, 0, 0, 0.20);
        border-top-color: rgba(0, 0, 0, 0.60);
        border-radius: 50%;
        animation: appSpin 0.8s linear infinite;
    }
@keyframes appSpin {
    to {
        transform: rotate(360deg);
    }
}


/* Ensure Kendo progress mask is above the chart no-data overlay */
.k-chart {
    position: relative; /* already true, but keep it */
}

    .k-chart .k-loading-image {
        position: static; /* let flexbox center it */
    }

    .k-chart .k-loading-mask {
        z-index: 10020 !important;
    }

    .k-chart .k-chart-overlay {
        z-index: 10010 !important;
    }
    /* While the loading mask exists, replace the "No data available" text with "Loading..." */
    .k-chart .k-loading-mask ~ .k-chart-overlay .k-no-data {
        font-size: 0; /* hide original text while keeping the element */
    }

        .k-chart .k-loading-mask ~ .k-chart-overlay .k-no-data::after {
            content: "Loading...";
            font-size: 14px; /* pick what matches your app */
        }
/* Hide the chart "no data" overlay while we are loading */
.k-chart.is-loading .k-chart-overlay {
    display: none !important;
}