#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #56829e ;border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);
}

100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);
}
}

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);transform: rotate(0deg);
  }
  
  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);
  }
}

body, html {
  margin: 0;
  padding:0;
  font-size: 16px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
  }

#pills-tabContent{
  margin-top: 8%;
}
.search-container {
  float:right;
}


 #searchForm input { 
  
  width:200px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  border-color: rgb(195, 68, 46);
  padding: 5px;
  
}  
.addBtn {
    position:fixed;
    left:450px;    
    top:20px;
    
  }  
#pills-tab { 
    position:fixed;
    top:10px;
    left:10px;
    font-size: 14px;
  }

table  { 
  border-collapse: collapse;
   width: 100%;
   }
th, td { 
  padding: 8px 16px; 
   
}
.tableFixHead { 
  overflow: auto; 
  height: 90vh; 
}


.tableFixHead thead th {
  position: sticky; 
  top: 0;
  z-index: 1; 
  background-color: #A9A9A9;
  padding:10px 8px;
  color:white;
  
  }

/* Hide scrollbar for Chrome, safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /*IE and Edge */
  scrollbar-width: none; /*Firefox*/
}
.navbar {
  width: 100%;
  height: 115px;
}





/* @media query */

/* MOBILE DEVICE FROM SMALL TO LARGE SCREEN  */
/* for small mobile */
@media only screen and (min-width:320px){
  #pills-tabContent
  {
    
    margin-top:35%;      

  } 
  .addBtn 
  {
    
    position:fixed;
    left:250px;   
    top:70px;  
  
  }
}
/* for mobile medium device   */
@media only screen and  (min-width:375px) { 
  #pills-tabContent{
    
    margin-top:30%; 
  } 
  
   
     
 }
 /* for large mobile device screen */
 @media only screen and (min-width:425px)  { 
  #pills-tabContent{
    
    margin-top:26%;  
  } 
  
  
 } 
 @media only screen and (min-width:426px)  { 
  #pills-tabContent{
    
    margin-top:23%; 

  } 
  
  
  
}
  
 @media only screen and (min-width:575.98px) { 
  #pills-tabContent {
    
    margin-top:23%;    
     
  } 
  
  

  
 }

 /* FOR TABLET AND IPADS */

 @media only screen and (min-width:768px) { 
#pills-tabContent 
  {
    
    margin-top:12%;    
     
  } 
.navbar 
  {
    width: 100%;
    height: 90px;
  }

  .addBtn 
  {
    
    position:fixed;
    left:500px;   
    top:25px;  
  
  } 
  
 }

 @media only screen and (min-width:800px) { 
  #pills-tabContent {
    
    margin-top:11%;    
  }
  
 }

 @media only screen and (min-width:822px) { 
  #pills-tabContent {
    
    margin-top:11%;    
  }
  .navbar {
    width: 100%;
    height: 90px;
  }  
  
 }
 @media only screen and (min-width:850px) { 
  #pills-tabContent {
    
    margin-top:10%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }
  
  
 }
 @media only screen and (min-width:898.98px) { 
  #pills-tabContent {
    
    margin-top:10%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }

  
  
 }
 @media only screen and (min-width:900.98px) { 
  #pills-tabContent {
    
    margin-top:10%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }

  
  
 }
 
 
 /* FOR LAPTOP AND DESKTOP DEVICE */
 
 @media only screen and (min-width:1000.98px) { 
  #pills-tabContent {
    
    margin-top:9%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }

  
  
 }
 @media only screen and (min-width:1024px) { 
  #pills-tabContent {
    
    margin-top:8%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }
  
  
  
 }
 @media only screen and (min-width:1030px) { 
  #pills-tabContent {
    
    margin-top:8%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }
  
  
  
 }
 @media only screen and (min-width:1200px) { 
  #pills-tabContent {
    
    margin-top:6%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }
  
  
  
 } 
 @media only screen and (min-width:1400px) { 
  #pills-tabContent {
    
    margin-top:7%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  } 
  
  
 }
 
 @media only screen and (min-width:1440px) { 
  #pills-tabContent {
    
    margin-top:6%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  } 
  
  
 }
 
 @media only screen and (min-width:1475px) { 
  #pills-tabContent {
    
    margin-top:7%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  } 
  
  
 }
 
 @media only screen and (min-width:1600px) { 
  #pills-tabContent {
    
    margin-top:7%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  } 
  
  
 }
 

 
 /* FOR EXTRA LARGE DESKTOP DEVICE */
 @media only screen and (min-width:2385px) { 
  #pills-tabContent {
    
    margin-top:4%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }
  
  
 } 
 @media only screen and (min-width:2400px) { 
  #pills-tabContent {
    
    margin-top:4%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }
  
  
 } 
 @media only screen and (min-width:2560px) { 
  #pills-tabContent {
    
    margin-top:4%;    
  } 
  .navbar {
    width: 100%;
    height: 90px;
  }
  
  
 } 

 /* for searchbox and nav-item  */ 
 
 @media screen and (max-width:600px) {
  
  
  .search-container {
    margin-top: 60px;
    margin-right: 300px;
  }
  
  
  
  .nav-link {
    padding:14px 5px;
  }

  
}