.sidebar-nav {
        padding: 9px 0;
      }

      /* Dropdown Button */
      .dropbtn {
        background-color: #04AA6D;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
      }
      
      /* The container <div> - needed to position the dropdown content */
      .dropdown {
        position: relative;
        display: inline-block;
      }
      
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }
      
      /* Links inside the dropdown */
      .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }
      
      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {background-color: #ddd;}
      
      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {display: block;}
      
      /* Change the background color of the dropdown button when the dropdown content is shown */
      .dropdown:hover .dropbtn {background-color: #3e8e41;}
  #loading {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 300px;
  height: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

    </style>

    <style type="text/css">
      
      /* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown1 {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content1 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content1 a:hover {background-color: #ddd;}





.dropdown2 {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {background-color: #ddd;}







.dropdown3 {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content3 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {background-color: #ddd;}

input[type='text']{
  height: 30px;
}










.dropdown4 {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content4 {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content4 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content4 a:hover {background-color: #ddd;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
* { box-sizing: border-box; }
#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('./assets/store.png') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}


#loaderspinner{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('./assets/loading.jpg') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

#popup{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('./assets/loading.jpg') 50% 50% no-repeat rgb(249,249,249);
    opacity: .94;
}

#loader1 {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: .8;
}



div.gallery1 {
  margin: 5px;
  border: 1px solid #777;
  float: left;
  width: 150px;
}

div.gallery1:hover {
  border: 1px solid #000;
}

div.gallery1 img {
  width: 100%;
  height: auto;
}

div.desc1 {
  padding: 15px;
  text-align: center;
}
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 100px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}








div.gallery4 {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width:200px;
}

div.gallery4:hover {
  border: 1px solid #777;
}

div.gallery4 img {
  width: 100%;
  height: auto;
}

div.desc4 {
  padding: 15px;
  text-align: center;
}











* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}
input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  background-color: #f1f1f1;
  width:auto;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}


 #lstitemstbls tr td:hover{
    cursor: pointer;
    background-color:grey;
  }
   #codeval tr td:hover{
    cursor: pointer;
    background-color:grey;
  }

  #showallocatedtbl tr :hover{
    cursor: pointer;
    background-color:grey;
  }

    #brandval tr :hover{
    cursor: pointer;
    background-color:grey;
  }
    #categoryval tr :hover{
    cursor: pointer;
    background-color:grey;
  }

 #sparesuppliertbl tr :hover{
    cursor: pointer;
  }
  #sparemachinemenutbl tr :hover{
    cursor: pointer;
  }
    #supplierval tr :hover{
    cursor: pointer;
    background-color:grey;
  }

    #itemstbl tr  :hover{
    cursor: pointer;
    background-color:#abff89;
  }

    #selp tr  :hover{
    cursor: pointer;
    background-color:grey;
  }

  #codelsttbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }

  #operatorstbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
#targetmachinetbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
  #codebtnpopuptbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
#listbrandstbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }

#listcustomersmenutbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }


  #printingmaterialtbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
   #listcustomerstbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }

  #addspareitemtbl tr  :hover{
    cursor: pointer;
  }


#salescustomerlist tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
#salescustomerlist tr  :hover{
    cursor: pointer;
    background-color:grey;
  }

  #salesitemlisttbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
  #salesitemprintedtbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
    
  #message  :hover{
    cursor: pointer;
    background-color:grey;
  }

#lastproductionmoretbl tr  :hover{
    cursor: pointer;
    background-color:grey;
  }
    


    #customertbl tr  :hover{
    cursor: pointer;
    background-color:grey;
    color:white;
  }
    
   

#codebtn:hover{
    cursor: pointer;
    background-color:grey;
  }

#datebtn:hover{
    cursor: pointer;
    background-color:grey;
  }
  #periodicalbtn:hover{
    cursor: pointer;
    background-color:grey;
  }

#gallery:hover{
  cursor: pointer;
}

#paymentsaccounts:hover{
  cursor: pointer;
}


#journalaccountstbl:hover{
  cursor: pointer;
}

#dsallocateditems:hover{
  cursor: pointer;
}

#dispdepartmentstbl:hover{
  cursor: pointer;
}


#ledgeraccounts:hover{
  cursor: pointer;
}

#chartsaccountstbl:hover{
  cursor: pointer;

}