.chart-box-lg {
    height: 285px;
}

.chart-box-md {
    height: 278px;
}

.matdash-chart-placeholder {
    min-height: 100%;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgb(93 135 255 / 10%), rgb(93 135 255 / 2%)),
        repeating-linear-gradient(90deg, rgb(42 53 71 / 10%) 0 1px, transparent 1px 42px);
}

#customers,
#projects {
    min-height: 78px;
}

#your-preformance,
#customers-area,
#sales-overview {
    min-height: 180px;
}

.app-empty-state {
    max-width: 520px;
    margin: 0 auto;
}

.app-skeleton {
    display: grid;
    gap: .75rem;
}

.app-skeleton-line {
    display: block;
    height: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bs-tertiary-bg), var(--bs-secondary-bg), var(--bs-tertiary-bg));
    background-size: 200% 100%;
    animation: app-skeleton 1.4s ease infinite;
}

@keyframes app-skeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}