#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);
   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);
}
}


html, body { 

   height: 100vh;
   width: 100%;
   margin: auto;
   
   }

 .table{
    font-size: 0.7rem;
 }

   .mb-0{
      text-align: center;
   }

#myTab{
   font-size: 0.8rem;
   background-color: aliceblue;
}


   @media only screen and (min-width: 768px) {
      

      .card-header{
         padding:0;
      }
      
      #myTab{
         font-size: 1rem;
      }
     
     
      .table{
         font-size: 0.8rem;
      }

      #search{
         width: 300px;
       
         margin-top: 20px;
      /*   margin-bottom: 20px;*/
      }
      #create{
         margin-top: 20px;
        /* margin-bottom: 20px;*/
         
      }
      #createdep, #createloc{
         margin-top:20px;
       /*  margin-bottom: 20px;*/
      }
   }




#flex{
   display: flex;

}

#create{
   margin-top: 30px;
   margin-right:20px;
   /*margin-bottom: 20px;*/
   margin-left: 15px;
}


   #search{
      width: 170px;
      position: relative;
      display:   block;
      font-size: 14px;
      margin-top: 30px;
     /* margin-bottom: 20px;*/
    /*  margin-right: auto;
      margin-left:auto;*/
  }
  .search-box input[type="text"]{
      height: 32px;
      padding: 5px 10px;
      border: 1px solid #CCCCCC;
      font-size: 14px;
  }
  #result{
      /*position: absolute; */       
      z-index: 999;
      top: 100%;
      left: 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      margin-top:20px;
      margin-bottom: 30px;
  }
  .search-box input[type="text"], .result{
      width: 100%;
      box-sizing: border-box;
  }
  /* Formatting result items */
  #result p{
      margin: 0;
      padding: 7px 10px;
      border: 1px solid #CCCCCC;
      border-top: none;
      cursor: pointer;
  }
  #result p:hover{
      background: #f2f2f2;
  }

#createdep, #createloc{
   margin-top:30px;
  /* margin-bottom: 10px;*/
}


.modal-title{
   margin:auto;
}
.modal-body{
   text-align: center;
}
.tab-content{
   margin-top:5%;
}

form{
   font-size: 0.8rem;
}

input{
   border: 2px solid rgba(0,0,0,0.2);
   border-radius: 4px;
   font-size: 0.8rem;
}

.modal-content{
   background-color: aliceblue;
   color: darkslategrey;
}
select{
   height: 2rem;
   font-size: 0.8rem;
}
.edit, .delete, .editdep,
.editloc, .deleteloc,
.deletedep{
   border: none;
}
#cantremove{
   font-size: 0.8rem;
   font-weight: bold;
   text-align: center;
   padding: 15px;
}
#newperson, #newdepartment, #newlocation, #editperson, #editdepartment,
#editlocationform{
   text-align: left;
}

#flex{
   margin-top: 20px;
}
#personnel{
   margin-top: 70px;
}
#departments, #locations{
   margin-top: 30px;
}