/**
 * Skeleton
 */
.skeleton-bg {
    background-image:url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' fill='%23ccc' viewBox='0 0 20 18'><path d='M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z'></path></svg>");
    background-size:15%;
    background-repeat:no-repeat;
    background-position:center;
    background-color:#e5e7eb;
    border-radius:4px;
    animation:skeleton-animate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-txt {
    position:relative;
}

.skeleton-txt::before {
    content:"";
    position:absolute;
    inset:0;
    background-color:transparent;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><rect x='0' y='0' width='100' height='25' rx='1' ry='8' fill='%23e5e7eb'/></svg>");
    overflow:hidden;
    background-size:100% 1lh;
    background-repeat:no-repeat repeat;
    z-index:1;
}

.skeleton-txt::after {
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background-image:linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0.4) 70%, transparent);
    background-size:60% 1lh;
    background-repeat:no-repeat repeat;
    background-position:-130% 0;
    animation:skeleton-txt-animate 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-txt:not(.skeleton-hide),
.skeleton-txt:not(.skeleton-hide) * {
    color:transparent !important;
}

.skeleton-txt.skeleton-hide::before,
.skeleton-txt.skeleton-hide::after {
    content:unset;
}

@keyframes skeleton-txt-animate {
    100% {
        background-position:180% 0;
    }
}
@keyframes skeleton-animate {
    0%, 100% {
        background-color:rgb(229, 231, 235);
    }
    50% {
        background-color:rgba(229, 231, 235, 0.5);
    }
}