@media (max-width:400px) {
    html{
        font-size: 70%;
    }
    .middle-part-navbar{     
      display: none;
    }
   
    header{
      display: flex;
      justify-content: space-between;
      align-items: center;
       color: black;
      position: sticky;
      top: 10px;
      z-index: 10;
      min-height: 2vh;
      font-size: 16px;
    }
    #logo-figure{
      padding: 0;
      margin-left: 1rem;
      margin-top: 0;
      }
      
      #logo-figure a:hover {
        background-color: rgb(159, 241, 159);
      }
     
      .logo{
      font-size: 1rem;
      }
      #header-menu-icon{
      display: none;
      }
      .top-logo{
        width: 45px;
        height: 45px; 
        margin-top: 0;   
      }
      
    .left-bopart-navbar{
      flex-basis: 25%;
      text-align: left;
      margin: 0;
      padding-right: 5px;
      padding-left: 5px;
    }
    .middle-bopart-navbar{
      flex-basis: 60%;
      text-align: center;
      margin:0;
    }
    .right-bopart-navbar{
      flex-basis: 15%;
      padding-top: 10px;
      text-align: right;
      margin-right:1rem;
      display: flex;
      justify-content:flex-end; 
    
    }
    .right-bopart-navbar > ul > li {
      list-style: none;
      display: block;
    }
    .vigibilty-logout{
      display: none;
    }
    .container-bo-navbar {
      width: 100%;
      display: flex;
      justify-content:space-between; 
      margin: 0;  
    }
    
    .container-navbar {
      width: 100%;
      display: flex;
      justify-content:space-between; 
      margin: 0;
      font-size: 1rem;
    }
    .dropdown-container{
      display:block;
      /* position: relative; */
      text-align: right;
      float: right;  
      padding: 3px;
      max-width: fit-content;
      min-width: fit-content;
    }
    
    .dropdown-container:hover .dropdown-content{
      display:block;
    }
    .dropdown-content{
      /* background-color: rgba(147, 145, 144, 0.624); */
      position:initial;
      text-align: left;
      color: black;
      max-width: fit-content;
      min-width: fit-content;
      padding: 3px;
    }
.right-part-navbar  {
  display:inline-block;
  margin:0;
 padding: 0;
 justify-content: flex-end;
}

.right-part-navbar > ul   {
  display:flex;
  justify-content: space-between;  
  margin:0;
  padding-top: 7px;
  padding-right: 20px;
}
.login-title{
  text-align: center;
  margin-top: auto;
}
.container-login{ 
  left: 25%;
  top: 30%;
  margin-left: -25%;
  position: absolute;
  margin-top: -25%;
  }
  
.login-form{
  border: 4px solid #d1d5db;
  min-width: 300px;
  max-width: 300px;
  border-radius: 16px;
 text-align: left;  
 
}
.menu-table-container{
  width: 90%;
  text-align: center;
  /* margin: auto; */
  margin-top: 25%;
}
.home_details{
  padding: .2rem .2rem;  
  width: 99%;
}
.home_details article{
  /* flex-basis: 80%; */
  margin-top: 3.5rem;
  width: 100%;
}
.home_details aside{
  display: none;

}


  .sproduct-Card {
    /* float: left;  */
    text-align: center;
    margin:0.5rem;                 
    padding: 5px;
    font-size: 2rem;
    width: 20rem;
    height: 18rem;
    margin-bottom: 2.2rem;
  
    } 
  .btn-cart{
    width: 6rem;
    height: 5vh;
    font-size: 1rem;
    text-align:center;    
    background-color: rgba(73, 182, 77, 0.862);
    border: none;
    border-radius: 1rem;
    color: black;
    /* margin-right: 2rem; */
    cursor: pointer;
    transition: var(--transition);
    padding:2px;
  }
  .cort-container{
    position: fixed;
      top: 30vh; 
      left:85%;
      z-index:1000;  
    text-align: right;
    margin-right: 4rem;
  
  }
  .product-Card {
    /* float: left;  */
    text-align: center;
    margin:.5rem; 
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    max-width: 45%; 
    min-width: 45%;
    height: 30vh;
    background-color: white;
    padding: 2px;
    border-radius: 50%;
    margin-bottom: 1rem;
    } 
    .product-Card-category{
      text-align: center;
      margin:.5rem; 
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
      max-width: 45%; 
      min-width: 45%;
      height: 20vh;
      background-color: white;
      padding: 2px;
      border-radius: 50%;
      margin-bottom: 1rem;
    }
    
  .card{  
    float: left; 
    text-align: center;
    margin:.5rem; 
    justify-content: space-between;
    width: 45%; 
    height: 35vh;
    position: relative;
    background-color: rgba(255, 243, 225, 0.98);
  }
  .product-image{
    width: 100%;
    height: 25vh;
    }
    /* .product-img img{
    width: 100%;
    height: 80%;    
    } */
    .product-image img{
      width: 100%;
      height: 100%;
      text-align: center;
       margin: auto;  
       padding: 5px;  
     }
    .item_rate{
      position: absolute;
      bottom: 3vh;
      text-align: center;
      height: 3vh;
      margin-left:.5rem; 
      margin-right:.5rem; 
      padding: 2px;  
      background-color: rgb(244, 219, 219);
      min-width:80%;
      max-width:80%;
      font-size: .8rem;
    }

.btn_detail{
  position: absolute;
  bottom: 0%;
  text-align:right;  
  margin-left: 5rem; 
  
}
.item_detail{
  width: 5rem;
  height: 3vh;
  font-size: .7rem;
  text-align:center;  
  margin: auto; 
  background-color: rgba(181, 181, 176, 0.716);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  color: black;
  /* padding: 2px; */
}
.btn_addtocart{
  position: absolute;
  bottom:3vh;
  text-align:left;  
}
    
  .btnaddtocart{
    width: 5rem;
    height: 3vh;
    font-size: .7rem;
    text-align:center;  
    margin: auto; 
    background-color: rgba(220, 220, 192, 0.716);
    border: none;
    color: black;
    position: absolute;
    cursor: pointer;
    transition: var(--transition);
  }
    .cproduct-image{
    width: 100%;
    height: 100%;
    }
   
  
.btn-roleinfo{
  width: 6rem;
  padding: .3rem;
  font-size: .8rem;
  text-align:center;
  background-color: rgb(17, 95, 56);
  border: none;
  border-radius: 1rem;
  color: white;
  margin-left: 5px;
}
.btn-profileinfo{
  width: 7rem;
  min-width: 7rem;
  padding: .25rem;
  font-size: 11px;
  text-align:center;
  background-color: rgb(17, 95, 56);
  border: none;
  border-radius: 1rem;
  color: white;
  margin:.5rem; 
  margin-bottom: 2rem;
}


.btnporder{
  width: 10rem;
  height: 4vh;
  font-size: 1rem;
  font-weight: bold;
  text-align:center;    
  background-color: rgba(211, 190, 179, 0.716);    
  border: none;  
  color: black;
  cursor: pointer;
  transition: var(--transition);
  cursor: pointer;
  padding: 5px;
  margin-bottom: .5rem;
}

.product-detail-container{
  display: inline-block;
  text-align: center;
  margin: 20px;
  padding: 20px;
  background: rgb(229, 225, 225)
}
.left-side-produt-image{
  /* flex-basis: 50%; */
  background: white;
  /* border: .2px solid; */
  padding: 10px;
}
.right-side-produt-desc{
  /* flex-basis: 50%; */
  padding: 20px;
}


.btn-product-detail{
  cursor: pointer;
  transition: var(--transition);
  padding: 3px;
  width: 50px;
  text-align: center;
  height: 40px;
}
.product-detail-addremove{
  text-align: center;
  margin: auto;
  padding: 10px;
  background-color: #ccc;
  color: brown;
  height: 60px;
}
.cart-contrainer{
  display: inline-block;
  margin-top: 5.5rem; 
}
.cart-right-side{
  width: 95%;         
  text-align: left;
  margin-bottom: 1rem;
  padding-left: 10px;
  font-size: 15px;
}
.cart-left-side{
  min-width: 95%;
  max-width: 95%;
  font-size: 10px;
}
.Shoppingcart_body{
  width: 95%;
  text-align: left;
  padding: 5px;
  margin-bottom: 1rem;
}
.form-control-cart input{
  font-size: 12px;
  height:4vh;
  text-align: left;   
  margin-bottom: .5rem; 
  outline: none;     
}
.form-control-cart label{
  font-size: 12px;     
  margin-bottom: .5rem;    
  text-align: left;
}
.container-profile{
  min-width: 100%;
  margin-top: 6rem;
  margin-bottom: 3rem;
}
.container-supplier-arrea{
  width: 70%;
  text-align: center;
  /* background-color:rgb(155, 240, 212); */
  margin: auto;
  margin-top: 4rem;
  margin-bottom: 3rem;
}
.short-profile-form{
  width:80%;
  text-align: center;
  margin: auto;
}
.container-home{
  max-width: 99%;
  margin: 0 ;
  padding: 10px;
  margin-top: 15%;
}

.Datatable thead tr th{
font-size: 9px;
background-color: #faf7f7;
padding: 3px;
}
.Datatable tbody tr td{
  font-size: 9px;
    padding: 3px 3px;
  }
div.dataTables_wrapper {
    margin: 0 auto;  
    text-align: left;  
      /* width: 20%;  */
}
div.dataTables_filter{
  width: 80%;

}
div.dataTables_info{
  display: none;
}
div.dataTables_length{
  display: none;
}
div.dataTables_paginate{
  display: none;
}
#customerorderlist td{
  padding: 5px;
  /* white-space: nowrap;  */
  font-size: 10px;
  /* width: fit-content; */
  }
  .order_detail{
  width: 4rem;
  background: lightgreen;
  color: black;
  padding: 2px;
  text-align: center;
  margin: auto;
  cursor: pointer;
  border-radius:10px;
  font-size: 10px;
}
.btn-receipt-goods{
  width: 7rem;
  background: lightgreen;
  color: black;
  padding: 2px;
  text-align: center;
  margin: auto;
  cursor: pointer;
  border-radius:10px;
  font-size: 9px;
}
.container-change-pass{
  max-width: 80%;
  /* margin: 0 ; */
  padding: 10px;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
}
        /* orders details css start here  */

.masterinfo-container{
  width: 90%;
  display: inline-block;
  text-align: left;
  margin: auto;
  font-size: 10px;
}
.masterinfo-left-div{
 display: inline;
 width: 95%;
}
.masterinfo-right-div{
  display: inline;
  width: 95%;
}
.masterinfo-control{
  padding-bottom: .25rem;
  margin-bottom: .25rem;
  display: flex;
  justify-content:space-between;
  padding: 5px;
}
.masterinfo-control label{
  flex: .3;
  font-size: 12px;
  padding: 2px;
  text-align: left;
}

.masterinfo-control input, select{
  flex: 0.7;
  font-size: 12px;
  height: 3vh;
  /* border: none; */  
}
.tbl-col-backcolor{
  background-color: white;
  border-bottom: none;
  }

.form-control-profile input{
  flex: 0.7;
  font-size: 12px;
  height: 4vh;  
  padding: 2px;
}
.form-control-profile input[type="date"]{
  font-size: 10px;
  height: 4vh;  
  flex: 0.7;  
  padding: 2px;
  
}
.form-control-profile{
  /* padding-bottom: .1rem;
  margin-bottom: .25rem; */
  display: flex;
  justify-content:space-between;
  padding: 5px;
}
.form-control-profile label{
  flex: .3;
  font-size: 10px;
  padding-right: 2px;
  text-align: left;  
}
.container-customer-order{
  max-width: 98%;
  min-width: 98%;
  text-align: center;
  font-size: 9px;
  /* margin: auto; */
}
.container-home{
  max-width: 99%;
  /* margin: 0 ; */
  /* padding: 2px; */
  margin-top: 15%;
}
.container-supplier-arrea{
  max-width: 95%;
  min-width: 95%;
  text-align: left;
  margin-bottom: 3rem;
  font-size: 9px;
}
#customerorderlist td{
  /* padding: 2px; */
  /* white-space: nowrap;  */
  font-size: 9px;
  /* width: fit-content; */
 }
 .spcard{  
  float: left; 
  text-align: center;
  margin:.5rem; 
  justify-content: space-between;
  width: 30%; 
  height: 40vh;
  position: relative;
  background-color: rgba(255, 243, 225, 0.98);
} 

.sitem_rate{
  position: absolute;
  bottom: 6vh;
  text-align: center;
  height: 4vh;
  /* margin-left:1rem;  */
  /* margin-right:1rem;  */
  padding: 2px;  
  background-color: rgb(244, 219, 219);
  min-width:100%;
  max-width:100%;
  font-size: .8rem;
}
.item_avgrate{
  position: absolute;
  bottom: 3dvh;
  text-align: center;
  /* margin:.5rem;  */
  padding: 2px;  
  background-color: rgb(213, 208, 208);
  width: 100%;
  font-size: 7px
}
.item_minirate{
  position: absolute;
  bottom: 0;
  text-align: center;
  /* margin:.5rem;  */
  padding: 2px;  
  background-color: rgb(213, 205, 205);
  width: 100%;
  font-size: 7px
}
.btn-reconfirm-order{  
  background: rgb(217, 216, 213);
  color: black;  
  text-align: center;
  margin: auto;
  cursor: pointer;
  border-radius:10px; 
  font-size: 9px;
  /* height: 3vh; */
}

.order_delivery{
  /* width: 7rem; */
  background: lightgreen;
  color: black;
  padding: 2px;
  text-align: center;
  margin: auto;
  cursor: pointer;
  border-radius:10px;
  font-size: 9px;
}

.order-table-container{
  max-width: 98%;
  min-width: 98%;
  /* text-align: center;
  margin: auto; */
  padding-left: 2px;
  padding-right: 2px;
  font-size: 9px;
}

.lg-form {
  /* margin: 16px; */
  padding: 10px;
  border: 4px solid #d1d5db;
  /* min-width: 400px; */
  border-radius: 16px;
  min-width: 300px;
  max-width: 300px;
  margin-top: 5%;

  
}
}