.skeleton-block {
}

    .skeleton-block .skeleton-background {
        background-color: var(--bs-secondary);
    }

        .skeleton-block .skeleton-background .skeleton-loading {
            background-color: #011d38;
        }

    .skeleton-block .skeleton-loading {
        animation-delay: 0ms;
        animation-iteration-count: infinite;
        animation-name: skeleton-animation;
        animation-direction: alternate;
        animation-timing-function: steps(10, end);
        animation-duration: 0.5s;
        background-color: var(--bs-secondary);
    }

        .skeleton-block .skeleton-loading.cicle {
            display: block;
            border-radius: 100%;
        }

        .skeleton-block .skeleton-loading.text-block {
            border-radius: 5px;
            height: 12px;
        }


    .skeleton-block .skeleton-delay-1 {
        animation-delay: 0ms;
    }

    .skeleton-block .skeleton-delay-2 {
        animation-delay: 200ms;
    }

    .skeleton-block .skeleton-delay-3 {
        animation-delay: 400ms;
    }

    .skeleton-block .skeleton-delay-4 {
        animation-delay: 600ms;
    }

    .skeleton-block .skeleton-delay-5 {
        animation-delay: 800ms;
    }

    .skeleton-block .skeleton-padding {
        padding: 15px 0;
    }

    .skeleton-block .skeleton-dimension-holder {
        border-width: 0px;
    }

        .skeleton-block .skeleton-dimension-holder .skeleton-loading.image {
            display: block;
            width: 100%;
            height: 100%;
        }

    .skeleton-block .skeleton-ava {
        overflow: hidden;
        padding: 0;
    }

    .skeleton-block .skeleton-divider {
        background-color: var(--bs-secondary);
    }


@keyframes skeleton-animation {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.5;
    }
}



.chart-skeleton {
    position: relative;
    width: 100%;
    background-color: var(--bs-secondary);
    overflow: hidden;
    animation-name: skeleton-animation;
    animation-delay: 0ms;
    animation-iteration-count: infinite;
    animation-name: skeleton-animation;
    animation-direction: alternate;
    animation-timing-function: steps(10, end);
    animation-duration: 0.5s;
}

.chart-skeleton-svg-trendline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.chart-skeleton-trendline-path {
    fill: none;
    stroke: url(#shimmerGradient);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: shimmer-move 2s linear infinite;
}

@keyframes shimmer-move {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}