/* SKELETON DATATABLE */
.table-loader {
    visibility: hidden;
}

.table-loader:before {
    visibility: visible;
    display: table-caption;
    content: " ";
    width: 100%;
    height: 600px;
    background-image:
        linear-gradient(rgba(235, 235, 235, 1) 1px, transparent 0),
        linear-gradient(90deg, rgba(235, 235, 235, 1) 1px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(rgba(240, 240, 242, 1) 35px, transparent 0);

    background-repeat: repeat;

    background-size:
        1px 35px,
        calc(100% * 0.1666666666) 1px,
        30% 100%,
        2px 70px;

    background-position:
        0 0,
        0 0,
        0 0,
        0 0;

    animation: shine 0.5s infinite;
}

/** Card Skeleton for Loading **/
.card-loader {
    /* width: 895px; */
    height: 286px;
    /* background-color: red; */
    box-shadow: 0 5px 45px rgba(192, 192, 192, 0.1);

    background-image:
        linear-gradient(rgba(235, 235, 235, 1) 80px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(rgba(245, 245, 245, 1) 215px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(rgba(235, 235, 235, 1) 295px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%);
    background-repeat: no-repeat;
    background-position: 0 0,
        0 0,
        0 0,
        0 0,
        0 0,
        0 0;
    animation: loading 1.5s infinite;
}

/** Card Skeleton for Loading **/
.card-loader-novedad {
    /* width: 895px; */
    height: 203px;
    /* background-color: red; */
    box-shadow: 0 5px 45px rgba(192, 192, 192, 0.1);

    background-image:
        linear-gradient(rgba(235, 235, 235, .9) 162px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%),
        linear-gradient(rgba(230, 230, 230, 1) 203px, transparent 0),
        linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 30%);
    background-repeat: no-repeat;
    background-position: 0 0,
        0 0,
        0 0,
        0 0;
    animation: novedad 1.5s infinite;
}

@keyframes loading {
    to {
        background-position: 0 0,
            1200px 0,
            0 0,
            1200px 0,
            0 0,
            1200px 0;
    }
}

@keyframes novedad {
    to {
        background-position: 0 0,
            1200px 0,
            0 0,
            1200px 0;
    }
}

@keyframes shine {
    to {
        background-position: -100px 0,
            0 0,
            40% 0,
            0 0;
    }
}