@media(max-width: 480px){

/*------Nav Code START-----*/
nav{
  width: 100vw;
  padding:2px ;
}

nav button {
  background-color: #333;
  color:#fff;
  width:5.2rem  ;
  border:none;
  border-radius:5%;
}





/*-----Nav Code END-------*/
/*------Main Content START-----*/
.container{
  margin-left: unset;
  width: 100%;
  margin-bottom:3rem ;
}

.header{
  display:flex ;
  justify-content: space-between;
  width: 100%;
  padding:2% 1%;
}

.s1{
  display: flex;
  justify-content: unset;
  gap:0.8%;
}

.cards{
  display: flex;
  flex-direction:column ;
}

.c{
  width:140px;
}

.chart canvas{
  width: 223px;
  height:100%;
}

table{
  width: 100%;
}

.s3, .s4, .s5{
  display:flex;
  flex-direction:column;
  width: 100%;
}

.performance-container{
  width:100%;

}




.ch canvas{
  width: 94%;
  height: 100%;
}

.ch{
  width:100% ;
}




/*------Main Content END---------*/

/*Side bar code start */
aside {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
min-height: unset;  
top: unset;          
background-color: #202020;
justify-content:unset ;
display: flex;
padding: unset;
z-index: 1000;
}


.sidebar-list{
display:flex;
justify-content:space-around;
padding-left: 5%;
}


.list-items ul{
display:flex;
gap:60%;
}



.list-items ul li a{
text-decoration: none;
}


.list-items ul li i,
.profile ul li i{
font-size:1.7rem ;
}

.logo{
padding-bottom: unset;
padding-left:unset;
display: none;
}

.logo i{
font-size:3rem;
}

.profile{
position:unset;
margin-left:95%;
padding-left:35%;
}

.d{
display:none;
}
/*----Sidebar Code End--------*/
                                            


/*------Daily bars Code START------*/
.performance-container{
position: relative;
z-index: 1;
}

.bar-track{
position: relative;
z-index: 1;
overflow: hidden;
}

.bar-fill{
position: absolute;
z-index: 1;
}
 /*------daily  bars code END------*/
 /*---Table Modal Code START----*/
.table-modal{
  z-index:2;
}

/*----Table Modal Code END--------*/

}