@media (min-width:0px) and (max-width:400px) {
    .cssdebug{
        background-color: blue;
    }

.karnepuani{
   display:none;
}

}
/* 8 blue */













@media (min-width:401px) and (max-width:450px) {
    .cssdebug{
        background-color: green;
    }

.karnepuani{
   display:none;
}

}
/* 7 green */


















@media (min-width:451px) and (max-width:600px) {
    .cssdebug{
        background-color: lightblue;
    }

.karnepuani{
   display:none;
}

} /* 6 lightblue */




















@media (min-width:601px) and (max-width:767px) {
    .cssdebug{
        background-color: lightgreen;
    }


.karnepuani{
   display:none;
}
    
} /* 5 lightgreen */

















@media (min-width:768px) and (max-width:992px) {
    .cssdebug{
        background-color: brown;
    }


.karnepuani{
   display:none;
}

} /* 4 brown */
















@media (min-width:993px) and (max-width:1000px) {
    .cssdebug{
        background-color: deepskyblue;
    }

.karnepuani{
   display:none;
}

} /* 3 deepskyblue  */






















@media (min-width:1001px) and (max-width:1199px) {
    .cssdebug{
        background-color: orange;
    }

.karnepuani{
   display:none;
}

} /* 2  orange */


















@media (min-width:1200px) and (max-width:1400px) {
    .cssdebug{
        background-color: darkorchid;
    }
 
.karnepuani{
       height:27.975px;   
}

  
}
/* darkorchid */








@media (min-width:1401px) and (max-width:1600px) {
    .cssdebug{
        background-color: yellow;
    }
 
.karnepuani{
      height:27.975px;  
}
   
}
/* yellow */










@media (min-width:1601px) and (max-width:1800px) {
    .cssdebug{
        background-color: pink;
    }


  
.karnepuani{
   height:27.975px;   
}

}
/* pink */





@media (min-width:1801px) and (max-width:5000px) {
    .cssdebug{
        background-color: red;
    }


.karnepuani{
     height:27.975px;  
}

}
/* red */




/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

/* GLOBAL */   /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */    /* GLOBAL */   /* GLOBAL */   /* GLOBAL */

.cssdebug{

    position: fixed;
    bottom:0px;
    left: 0px;
    width:30px;
    height: 30px;
    z-index:999999999999;

}




  
.karnepuani{
    width:auto; background:rgba(255,255,255,0.3); padding-left:3px;
    box-sizing: border-box; border-left:1px solid #e9e9e9; color:#666; 
    font-size:13px; font-weight: 600;
    display: flex; text-align: left; justify-content: left; align-items: center; 
}

.karnepuani:first-child{
    border-left:0px solid #ccc;
    background: rgba(255,255,255,0);
    color:#fff;
    opacity:0;
}