@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
:root {
  --white-color: #fff;
  --blue-color: #4070f4;
  --grey-color: #707070;
  --grey-color-light: #aaa;
}
body {
  background-color: #fff;
  transition: all 0.5s ease;
  color: #0b0570;

 
}  
body.dark {
  background-color: #333;
}
body.dark {
  --white-color: #333; 
  --blue-color: #fff;
  --grey-color: #f2f2f2;
  --grey-color-light: #aaa;
}
a{
    text-decoration:none;
    color:#fff;
}  
  .hide-menu-button {
    display: none;
  }
  
  
  .navbar {
  position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 97px;
    background-color:fff; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    z-index:300; /* Reduce the z-index value to ensure it's below the .sidebar */
    box-shadow: 0 0 2px var(--grey-color-light);
    border-bottom: 2px solid #030040;
    
  }
  
  .logo_item {
    display: flex;
    align-items:left;
    left:500px;
    position:absolute;
    column-gap: 10px;
    font-size: 22px;
    font-weight: 500;
    color: var(--blue-color);
  }
  
.navbar img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
  }
  
  
  h1 {
    font-weight: 600;
    color: #030040;
    text-align: center;
    /* text-decoration: underline; */
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', cursive;
  }
  
  /* Styles for content within the navbar */
  .navbar_content {
    display: flex;
    align-items: center;
    column-gap: 25px;
  }
  
  .navbar_content i {
    cursor: pointer;
    font-size: 20px;
    color: var(--grey-color);
  }
  
  
  .logout-button,
  .reset-button {
    display: inline-block;
    padding: 8px 16px;
    color: white;
    background-image: radial-gradient(#da0000, #a70202);
    text-decoration: none;
    border-radius: 4px;
  }
  .home-button{
    display: inline-block;
    padding: 8px 16px;
    color: white;
    background-image: radial-gradient(#008B8B,#008B8B);
    text-decoration: none;
    border-radius: 4px;
  }
  
  .logout-button:hover,
  .reset-button:hover {
    color: white;
  }
  
  .welcome-message{
      display:flex;
      justify-content:center;
      align-items:center;
      margin-left:300px;
  }
  /* Sidebar styles */
  body {
    background-color: #fff;
  }
  
  .sidebar {
    width:25%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: -20px; /* This negative value might cause issues, you might want to adjust it */
    height:100%;
    padding: 0 0px;
    display:flex;
    margin-left: 0;
    z-index:300;
    background-color:#fff; 
    transition:0.5s all ease-in;
    /*overflow-y:scroll;*/
  }
  
  .sidebar2{
      position:absolute;
  }
  .sidebar.active {
       left: -100%;;
    }
 
 
  ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    width:100%;
    height: 1000px;
    margin-left: 0px;
    border-right: 5px solid red;
  }
  
  li a {
    display: block;
    color: #000;
    padding: 18px 16px;
    text-decoration: none;
    border: 1px solid black;
    border-right: 0px solid black;
    text-align: center;
    font-weight: bold;
    color: #030040;
  
  }
  li a .first{
    height:100px;
    width:200px;
    left:0;
    margin:0px;
    padding:0px;
    border:0px;
  }
  .navAnchor:hover {
    background-color: #030040;
    color: #fff;
    font-weight: bold;
  }
  
  
  li.active {
    background-image: radial-gradient(#da0000, #a70202);
    color: white;
    font-weight: bold;
  }
  
  
  li.active:hover {
    background-color: #030040;
    color: white;
  }
  
  
  .logo {
    height:100px;
    width:200px;
    left:0;
    margin:0px;
    padding:0px;
    border:0px;
  }
  
  .reset-button[disabled] {
      background-color: #ff6666; /* Change this to your desired color */
  }
  .hamburger {
    position: absolute;
    top: 20px;
    left:26%;
  }
  
  
  .fas.fa-bars {
    width:100px;
    height:40px;
    width: 50px;
    color: blue;
  }
  
  .active .sidebar{
      left: -225px;
  }
 .navbar.active {
      display: flex;
      justify-content: flex-start;
      width: 100%;
  }
    .navbar.active .hamburger{
      left:50px;
      width:80px;
  } 
.navbar.active .navbar_content {
        position: absolute;
        right: 50px;
        width:400px;
      
  }
  
  
.container_main.active {
   width:100%;
   height:100%;
  left:5%;
   justify-content:center;
  
}
.container_main.active .container_one,
.container_main.active .container_two,
.container_main.active .container_three{
  display: flex;
  margin:0px;
  justify-content:flex-start;
  width: 100%;
}
.container_main.active .oval{
  width:300px;
     
}
.footer.active{
      width:100%;
      margin-bottom:0%;
      margin-left:0%;
      }
      
.footer .active .footer-wrap{
      width:100%;
       margin-left:0px;
      }      
      
.footer{
  width:76%;
  margin-left:24.1%;
  margin-right:0px;
  position:relative;
  margin-bottom:0%;
}
.footer-wrap
 {
    background-color:#030040;
     color:#fff;
     padding:10px 0px;
     text-align: center;
 }

 .container_main {  
    max-width: 1000px;
    margin: 90px auto;
    padding:10px;
    height:auto;
    position: relative;
    left:12%;
    /*top:2%;*/
    color:#0c0678;
    border-radius: 4px;
}

/* cards............ */
 .container_one{
    display: flex; 
    justify-content:center;
    align-items: center;
    height:180px;
    
}
.box_one{
    width:250px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-right: 50px; 
    background-image: radial-gradient(#0b0570,#030040);
	color:#fff;
	text-transform: capitalize;
	border-radius: 10px;
 }


 .arrival_strore{
    background-image: url("assets/image/new-arrival.png");
    background-size: cover;
    height:6rem;
    width:6rem;
    margin-left:20%;
    margin-right:20%;
}

 .approved_stock{
    background-image: url("assets/image/delivery-box.png");
    background-size: cover;
    height:6rem;
    width:6rem;
    margin-left:20%;
    margin-right:20%;
 }
 
 .oval p {
  font-size:1.3rem;
  font-style:bold;
  margin: 0; /* Reset margin for the <p> element */
  bottom: 0%;
  width:150px;
  text-align:center;
}

.dashAnchor{     
  color:white;     
  text-decoration:none;
    
} 

#footer{
  width:76%;
  margin-left:24.1%;
  margin-right:0px;
  position:relative;
  margin-bottom: 0%;
}

.footer-wrap
 {
 background-color:#030040;
 color:#fff;
 padding:10px 0px;
 text-align: center;
 justify-content:center;
 }

h3{
  text-align: center;
  
}


input[type="text"]{
     color:#000;
     font-size: 20px;
}


.button{
  display: flex;
  margin:20px;
  justify-content:space-around;
  padding:20px;
}

.centered-button {
  text-align: center;
  margin-top: 10px; /* Adjust as needed */
  display:flex;
  justify-content: center;
  align-items: center;
}

#warantee_button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-right{
  display:flex;         
  justify-content:right;
  left:70%;
}

.centered-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px; /* Adjust as needed */
}

.table{
    width:1000px;
}

   .sales_report{
    width:80%;
    height:400px;
    border-radius:1px;
    border:3px solid black;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:90px;
}

.weekly_sales{
    width:400px;
    height:400px;
    align-items:center
}
.week{
    display:flex;
    margin:10px;
    padding:10px;
    
}
.week button{
    width:100px;
    height:40px;
}

.week input[type="text"] {
    border-radius: 5px;
    width: 200px;
    margin-left:50px;
}

.weekly_sales p{
    width:60px;
  border: 2px solid black; 

}

button a{
    text-decoration:none;
    color:#fff;
}
.btn:hover {
    text-decoration: none;
    color: #fff;
}
  @media (max-width: 800px) {
    .navbar {
      padding: 10px 20px;
    }
  
    .logo_item {
       
       left: 250px;
       font-size:13px; 
       
    }
  
    .navbar_content {
      column-gap: 15px;
    }
  
    .logout-button,
    .reset-button {
      padding: 6px 12px;
    }
  .logo{
      width:100px;
      height:40px;
  }
  }
  
a{
text-decoration:none;
color:#fff;
}
 
 
.arrival_store{
    display:flex;
    flex-wrap:wrap;
     
 } 
 
 
 
/*@media screen and (min-width: 800px) {*/
/* body{*/
/*     height:100%;*/
/*     width:800vh;*/
     
/* }*/
/*   .navbar {*/
/*    padding: 10px 20px;*/
/*  }*/

/*  .logo_item {*/
     
/*     left: 250px;*/
/*     font-size:13px; */
     
/*  }*/

/*  .navbar_content {*/
/*    column-gap: 15px;*/
/*  }*/

/*  .logout-button,*/
/*  .reset-button */
/*  .home-button{*/
/*    padding: 6px 12px;*/
/*  }*/

 
/*}*/