/*blur ripple effect*/
.blur-effect {
    position: absolute;
    top: 10px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
}


    .blur-effect .blur-box {
        background: #fff;
        padding: 5px 10px;
        margin: 0 10px;
        height: 100%;
        cursor: pointer;
        display: flex;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
    }


    .blur-effect .info-text1 {
        width: 50%;
        height: 10px;
        border-radius: 4px;
        margin-left:20px;
    }

    .blur-effect .info-text2 {
        width: 90%;
        height: 10px;
        border-radius: 4px;
    }

    .blur-effect .info-text3 {
        width: 55%;
        height: 10px;
        border-radius: 4px;
    }

    .blur-effect .info-text4 {
        width: 30%;
        height: 10px;
        border-radius: 4px;
    }

    .blur-effect .left-box {
        flex: 0 0 100%;
        margin-right: auto;
        padding-left:10px;
    }

    .blur-effect .shinny {
        background: lightgray;
        margin: 10px 0px;
        position: relative;
        overflow: hidden;
    }

        .blur-effect .shinny::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: rgb(100 100 100 / 20%);
            height: 100%;
            transform: skew(5deg);
            animation: shine infinite 0.7s ease-in-out;
        }


@keyframes shine {
    from {
        transform: skew(45deg) translateX(0%);
    }

    to {
        transform: skew(45deg) translateX(200%);
    }
}
/*blur ripple effect*/

#tblGridProgress tr{
    height:30px;
}