/* SHIMMER INSIDE DIV */
.shimmer-loader {
    position: absolute;
    inset: 0;
   
    z-index: 11;
    
    opacity: 1;
    transition: opacity 0.6s ease;
    overflow: hidden
}

    /* HIDE */
    .shimmer-loader.hide {
        opacity: 0;
        pointer-events: none;
    }

/* SHIMMER ITEMS */
.shimmer-line {
    height: 15px;
    background: #e9e9e9;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    width: 100%
}

    /* ANIMATION */
    .shimmer-line::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.6), transparent );
        animation: shimmer 2s infinite;
    }

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/*header area*/

.header-shimmer-logo {
    width: 70px !important;
    height: 20px !important
}
.header-shimmer-menu .shimmer-line{
    width:70px
}
.header-shimmer-actions .shimmer-line {
    width: 20px !important;
    height: 20px !important;
    border-radius:100%
}
.header-area .shimmer-line, .app-side-nav-small .side-nav-header .shimmer-line {
    background: rgb(255 255 255 / 38%);
}

   .header-area .shimmer-line::before {
      
        background: linear-gradient(128deg, transparent, rgb(255 255 255 / 19%), transparent);
       
    }
.vbox-theme-light .shimmer-line {
    background: rgb(255 255 255 / 38%);
}
/*side panel*/
.app-side-nav-small .shimmer-loader {
    background: #FFF
}
.side-nav-header{
    height:50px;
    padding:10px
}
.nav-shimmer-item {
    height: 80px;
    background: #f9f9f9;
    margin-bottom: 2px;
    border: 1px solid #f5f5f5;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:15px
}
    .nav-shimmer-item .shimmer-line:first-child {
        height: 30px;
        width:30px;
        margin-bottom:10px;
        border-radius:100%
    }
.nav-shimmer-item .shimmer-line:last-child{
    height:10px
}


/*table shimmer*/
/* header */

.table-shimmer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    /* ROW */
    .table-shimmer .border-bottom {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 30px 20px;
        padding-bottom: 20px;
    }
        .table-shimmer .border-bottom.row-3 {
            grid-template-columns: repeat(3, 1fr);
        }

    /* =========================
   PATTERN 1
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 1) .shimmer-line:nth-child(1) {
        width: 55%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 1) .shimmer-line:nth-child(2) {
        width: 70%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 1) .shimmer-line:nth-child(3) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 1) .shimmer-line:nth-child(4) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 1) .shimmer-line:nth-child(5) {
        width: 50%;
    }

    /* =========================
   PATTERN 2
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 2) .shimmer-line:nth-child(1) {
        width: 35%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 2) .shimmer-line:nth-child(2) {
        width: 80%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 2) .shimmer-line:nth-child(3) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 2) .shimmer-line:nth-child(4) {
        width: 65%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 2) .shimmer-line:nth-child(5) {
        width: 30%;
    }

    /* =========================
   PATTERN 3
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 3) .shimmer-line:nth-child(1) {
        width: 55%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 3) .shimmer-line:nth-child(2) {
        width: 50%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 3) .shimmer-line:nth-child(3) {
        width: 30%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 3) .shimmer-line:nth-child(4) {
        width: 85%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 3) .shimmer-line:nth-child(5) {
        width: 40%;
    }

    /* =========================
   PATTERN 4
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 4) .shimmer-line:nth-child(1) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 4) .shimmer-line:nth-child(2) {
        width: 75%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 4) .shimmer-line:nth-child(3) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 4) .shimmer-line:nth-child(4) {
        width: 35%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 4) .shimmer-line:nth-child(5) {
        width: 50%;
    }

    /* =========================
   PATTERN 5
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 5) .shimmer-line:nth-child(1) {
        width: 65%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 5) .shimmer-line:nth-child(2) {
        width: 30%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 5) .shimmer-line:nth-child(3) {
        width: 80%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 5) .shimmer-line:nth-child(4) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 5) .shimmer-line:nth-child(5) {
        width: 55%;
    }

    /* =========================
   PATTERN 6
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 6) .shimmer-line:nth-child(1) {
        width: 50%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 6) .shimmer-line:nth-child(2) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 6) .shimmer-line:nth-child(3) {
        width: 40%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 6) .shimmer-line:nth-child(4) {
        width: 70%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 6) .shimmer-line:nth-child(5) {
        width: 35%;
    }

    /* =========================
   PATTERN 7
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 7) .shimmer-line:nth-child(1) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 7) .shimmer-line:nth-child(2) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 7) .shimmer-line:nth-child(3) {
        width: 75%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 7) .shimmer-line:nth-child(4) {
        width: 50%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 7) .shimmer-line:nth-child(5) {
        width: 40%;
    }

    /* =========================
   PATTERN 8
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 8) .shimmer-line:nth-child(1) {
        width: 30%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 8) .shimmer-line:nth-child(2) {
        width: 80%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 8) .shimmer-line:nth-child(3) {
        width: 55%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 8) .shimmer-line:nth-child(4) {
        width: 65%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 8) .shimmer-line:nth-child(5) {
        width: 45%;
    }

    /* =========================
   PATTERN 9
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 9) .shimmer-line:nth-child(1) {
        width: 70%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 9) .shimmer-line:nth-child(2) {
        width: 35%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 9) .shimmer-line:nth-child(3) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 9) .shimmer-line:nth-child(4) {
        width: 50%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 9) .shimmer-line:nth-child(5) {
        width: 80%;
    }

    /* =========================
   PATTERN 10
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 10) .shimmer-line:nth-child(1) {
        width: 55%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 10) .shimmer-line:nth-child(2) {
        width: 65%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 10) .shimmer-line:nth-child(3) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 10) .shimmer-line:nth-child(4) {
        width: 75%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 10) .shimmer-line:nth-child(5) {
        width: 30%;
    }

    /* =========================
   PATTERN 11
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 11) .shimmer-line:nth-child(1) {
        width: 40%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 11) .shimmer-line:nth-child(2) {
        width: 70%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 11) .shimmer-line:nth-child(3) {
        width: 50%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 11) .shimmer-line:nth-child(4) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 11) .shimmer-line:nth-child(5) {
        width: 55%;
    }

    /* =========================
   PATTERN 12
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 12) .shimmer-line:nth-child(1) {
        width: 80%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 12) .shimmer-line:nth-child(2) {
        width: 40%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 12) .shimmer-line:nth-child(3) {
        width: 35%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 12) .shimmer-line:nth-child(4) {
        width: 70%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 12) .shimmer-line:nth-child(5) {
        width: 45%;
    }

    /* =========================
   PATTERN 13
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 13) .shimmer-line:nth-child(1) {
        width: 50%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 13) .shimmer-line:nth-child(2) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 13) .shimmer-line:nth-child(3) {
        width: 80%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 13) .shimmer-line:nth-child(4) {
        width: 40%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 13) .shimmer-line:nth-child(5) {
        width: 30%;
    }

    /* =========================
   PATTERN 14
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 14) .shimmer-line:nth-child(1) {
        width: 65%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 14) .shimmer-line:nth-child(2) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 14) .shimmer-line:nth-child(3) {
        width: 70%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 14) .shimmer-line:nth-child(4) {
        width: 55%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 14) .shimmer-line:nth-child(5) {
        width: 50%;
    }

    /* =========================
   PATTERN 15
   ========================= */
    .table-shimmer .border-bottom:nth-child(15n + 15) .shimmer-line:nth-child(1) {
        width: 45%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 15) .shimmer-line:nth-child(2) {
        width: 75%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 15) .shimmer-line:nth-child(3) {
        width: 60%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 15) .shimmer-line:nth-child(4) {
        width: 35%;
    }

    .table-shimmer .border-bottom:nth-child(15n + 15) .shimmer-line:nth-child(5) {
        width: 85%;
    }
   

/* You can continue same idea up to 15 */

       


/*nav large*/

.nav-large .nav-shimmer-item {
    display: flex;
    flex-direction: unset;
    padding: 15px 10px;
}
    .nav-large .nav-shimmer-item .shimmer-line:first-child {
        margin-bottom: 0px;
        flex-shrink: 0;
        margin-right: 10px
    }

/*tabs shimmer*/

.tabs-shimmer .shimmer-line{
    border-radius:0;
    border-radius:4px 4px 0 0 
}


/* Applications Box Shimmer */
/* Parent container ko grid banayein */

.applications-shimmer {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ek line mein 3 barabar boxes */
    gap: 15px; /* Boxes ke darmiyan fasla */
    max-width: 100%; /* Screen se bahar na jaye */
}

/* Box ki width ko fix se hata kar auto ya 100% karein taake grid manage kare */
.applications-box-shimmer {
    width: 100%; /* Column ki puri width le ga */
    height: 100px;
    background: #FFF;
    border: 1px solid #e1eeff;
    padding: 15px;
    text-align: center;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Shimmer lines ke darmiyan gap */
}
    .applications-box-shimmer div:first-child {
        width: 40px;
        height: 40px;
        border-radius: 100px;
    }

.color-box-shimmer {
    grid-template-columns: repeat(4, 1fr); /* Ek line mein 3 barabar boxes */
   
}
.color-box-shimmer .applications-box-shimmer {
   
    height: 65px
}

.color-box-shimmer .applications-box-shimmer div {
    width: 25px;
    height: 25px;
    border-radius: 100px;
}

/* area chart shimmer */
.area-chart-shimmer {
    display: flex;
    gap: 30px;
    align-items: flex-end; /* important for chart look */
}



        /* 6 bars with different heights */
        .area-chart-shimmer .shimmer-line:nth-child(1) {
            height: 40%;
        }

        .area-chart-shimmer .shimmer-line:nth-child(2) {
            height: 70%;
        }

        .area-chart-shimmer .shimmer-line:nth-child(3) {
            height: 55%;
        }

        .area-chart-shimmer .shimmer-line:nth-child(4) {
            height: 90%;
        }

        .area-chart-shimmer .shimmer-line:nth-child(5) {
            height: 60%;
        }

        .area-chart-shimmer .shimmer-line:nth-child(6) {
            height: 80%;
        }
.no-wrap-hide {
    max-height: 200px; /* adjust according to card height */
    overflow: hidden; /* extra columns hide */;
    height:300px
}