﻿/*Skeleton*/
.skeleton {
    background: rgba(130, 130, 130, 0.2);
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, rgba(130, 130, 130, 0.2)), color-stop(18%, rgba(130, 130, 130, 0.3)), color-stop(33%, rgba(130, 130, 130, 0.2)));
    background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
    background-size: 800px 100px;
    animation: pulse 700ms infinite alternate;
    /*    animation: wave-squares 2s infinite ease-out;
*/ height: var(--data-height) !important;
    width: var(--data-width) !important;
    max-width: 100%;
}

    .skeleton.circle {
        border-radius: 50%;
    }

    .skeleton.rounded {
        border-radius: 25px !important;
    }

    .skeleton.square {
        border-radius: 8px;
    }

    .skeleton.line {
        border-radius: 5px;
    }

/* Animation */
@keyframes pulse {
    from {
        background-color: #dddddd;
    }

    to {
        background-color: #fbf8f8;
    }
}

@keyframes wave-squares {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}
/*Skeleton*/
