.shimmer-line {
    height: 10px;
    margin-top: 20px;
    background: #777;
}

.shimmer-line-br {
    border-radius: 8px;
}
.shimmer-line-full {
    width: 100%;
}
.shimmer-line-80 {
    width: 80%;
}
.shimmer-line-60 {
    width: 60%;
}
.shimmer-line-40 {
    width: 40%;
}
.shimmer-line-20 {
    width: 20%;
}
.shimmer-line-10 {
    width: 10%;
}

.shimmer-circle {
    background: #777;
    border-radius: 50%;
}

.shimmer-circle-lg {
    height: 129px;
    width: 129px;
}

.shimmer-circle-md {
    height: 65px;
    width: 65px;
}

.shimmer-circle-sm {
    height: 33px;
    width: 33px;
}

.shimmer-circle-x-sm {
    height: 17px;
    width: 17px;
}

.shimmer-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #f6f7f8;
    border-radius: 8px;
    height: 100%;
}

.shimmer {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.animated {
    animation: shimmer 1.5s infinite;
}

.shine, .shine1 {
    display: inline-block;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.shine1 {
    animation-delay: 0.75s;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}