@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.prd-load-card {
    background: #fff;
    border: 0.5px solid;
    border-color: rgb(0 0 0 / 1%);
    min-height: 280px;
    margin-bottom: 30px;
    width: 173px;
    transition: all 0.5s ease-in-out;
    box-shadow: 0 0 7px rgb(0 0 0 / 10%);
    
}

.animated-bg {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}

.background-masker {
    background: #fff;
    position: absolute;
}

.background-masker.padd-left {
    top: 154px;
    left: 0;
    right: calc(100% - 15px);
    height: 124px;
    width: 15px;
}

.background-masker.padd-right{
    top: 154px;
    left: calc(100% - 15px);
    right: 0;
    height: 124px;
    width: 15px;
}

.background-masker.first {
    top: 154px;
    left: 0 px;
    right: 0;
    height: 8px;
    width: 100%;
}

.background-masker.second {
    top: 162px;
    left: 0 px;
    right: 50%;
    height: 15px;
    width: 50%;
}

.background-masker.third {
    top: 177px;
    left: 0 px;
    right: 0;
    height: 8px;
    width: 100%;
}

.background-masker.fourth {
    top: 204px;
    left: 0 px;
    right: 0;
    height: 8px;
    width: 100%;
}

.background-masker.fifth {
    /* top: 212px;
    left: 50%;
    right: 0;
    height: 13px;
    width: 50%; */
}

.background-masker.sixth {
    top: 225px;
    left: 0;
    right: 0;
    height: 8px;
    width: 100%;
}

.background-masker.seventh {
    top: 263px;
    left: 0;
    right: 0;
    height: 15px;
    width: 100%;
}

.background-masker.eighth {
    top: 233px;
    left: 0;
    right: 50%;
    height: 5px;
    width: 50%;
}

.background-masker.ninth {
    top: 258px;
    left: 0;
    right: 50%;
    height: 5px;
    width: 50%;
}

.background-masker.tenth {
    top: 233px;
    left: calc(50% - 6px);
    right: calc(50% + 6px);
    height: 30px;
    width: 12px;
}
