﻿/* Carousel*/
:root {
    --skeleton-card-wave-blue: rgba(30, 128, 234, 0.15);
}

.e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar {
    height: 10px;
}

    .e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar e-indicator button div {
        height: 10px;
        border: none;
    }

    .e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar .e-indicator {
        width: 15px;
        height: 10px;
        border: none;
    }

    .e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar.e-active .e-indicator {
        width: 30px;
    }

        .e-carousel .e-carousel-indicators.e-default .e-indicator-bars .e-indicator-bar.e-active .e-indicator div {
            background-color: #FFB61E;
            color: #fff;
            border: none;
            width: 30px;
        }

/* Skeleton */
.summary-skeleton.e-skeleton.e-shimmer-wave::after {
    background-image: linear-gradient(90deg, transparent calc(50% - 100px), rgb(30 128 234 / 50%) 50%, transparent calc(50% + 100px));
}

.summary-skeleton.e-skeleton.e-shimmer-wave {
    background-color: #353A8A; /* or use a CSS variable for theme support */
}

.card-skeleton.e-skeleton.e-shimmer-wave::after {
    background-image: linear-gradient(90deg, transparent calc(50% - 100px), var(--skeleton-card-wave-blue) 50%, transparent calc(50% + 100px));
}
