/* * -------------------- * CNC Mini Lazy Load Placeholder * https://confluence.cncenter.cz/display/KB/Lazy+load * -------------------- */
.loading-placeholder {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}
.loading-placeholder img {
    width: 100%;
    opacity: 0;
    transition: opacity 1s;
}
.loading-placeholder.item-loaded {
    padding-bottom: 0 !important;
}
.loading-placeholder.item-loaded img {
    opacity: 1;
}
.loading-placeholder:not(.item-loaded) {
    position: relative;
    height: auto;
    background-color: #e8e8e8;
}
.loading-placeholder:not(.item-loaded)::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #e8e8e8;
    background-image: linear-gradient(to right, #e8e8e8 12%, #ddd 24%, #e8e8e8 48%);
    animation: gradient-animation linear 1s infinite;
}
.loading-placeholder:not(.item-loaded) img {
    position: absolute;
    text-indent: -9999px;
    color: transparent;
}
@keyframes gradient-animation {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}