*{
    margin: 0;
    padding: 0; 
}






/* login page */




#mainpanlogin{
  position: relative;
    min-height: 100vh;
    background-color: #faf8f8;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
 
}  
h1{
    color: aliceblue;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    
}

#bimg{
position: absolute;
height: 94vh;
width: 94vw; 
left: 3vw; top: 3vh;
background-color: #ccc;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
border-radius: 10px;

}

#logimg{
position: absolute;
height: 12vh;
width: 6vw; 
left: 150px; top: 20px;

}
.frmpan{
   position: absolute;
    margin-top: 90px;
    margin-left: 60%;
    min-width: 400px;
    min-height: 650px;
    left: 5vw;
    background-color:white;
    border-radius: 12px;
    box-shadow: 0px 10px 40px rgb(0, 5, 0, .12);
   
}
    h2{
    position: absolute;
    color: rgb(7, 7, 7);
    left: 100px;
    top: 14vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    font-weight: 700;

    }
    

    h6{
    position: absolute;
    color: rgb(179, 180, 180);
    left: 107px;
    top: 17vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    font-weight: 700;

    }

#username{
    border-color: rgb(138, 146, 255);
    border-width: 1px;
    border-radius: 6px;
    border-style: solid;
    color: rgb(6, 6, 6);
    padding: 10px;
    margin-top: 230px;
    margin-left: 40px;
    width: 300px;
}
#password{
    border-color: rgb(138, 146, 255);
    border-width: 1px;
   border-radius: 8px;
    border-style: solid;
    color: rgb(6, 6, 6);
    padding: 10px;
    margin-top: 30px;
    margin-left: 40px;
    width: 300px;
    display: block;

}
#cbox{
    border-color: rgb(76, 88, 255);
    border-width: 2px;
   
    border-style: solid;
    
    
    margin-top: 20px;
    margin-left: 40px;
    width: 20px;
    display: block;

}
#h5tag{
  position: absolute;
    color: #080808;
    margin-left: 65px;
    top: 352px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;

}
#h5tag1{
  position: absolute;
    color: #2719e7;
    margin-left: 260px;
    top: 352px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;

}


#btn{
    background-color:rgb(73, 73, 248) ;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    color: white;
    padding: 10px;
    margin-top: 60px;
    margin-left:40px;
    cursor: pointer;
    width: 325px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    gap: 15px;
    display: flex;

}
#btn i{
    font-size: 20px;
    
  }
.cbtn{
    width: 20px;
    border: 1px;
}
#btn:hover{
    
    filter: drop-shadow(0 0 10px,#0e0d01);
    background-color: darkgreen;
    color: aliceblue;
    transition: 0.5s;
}
a{
   margin-left: 100px;
   margin-top: 40px;
   display: block;
    
}

#Emsch:hover{
    
    filter: drop-shadow(0 0 10px,#0e0d01);
    background-color: rgb(5, 21, 247);
    color: aliceblue;
    transition: 0.3s;
}

#logo{
position: absolute;
position: absolute;
height: 15vh;
width: 10vw; 
left:21vw; top: 7vh;

}

 #he1{
    position: absolute;
    color: rgb(7, 7, 7);
    left: 280px;
    top: 23vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.5rem;
    padding: 10px;
    font-weight: 700;

    }
     #he2{
    position: absolute;
    color: rgb(56, 92, 252);
    left: 450px;
    top: 23vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.5rem;
    padding: 10px;
    font-weight: 700;

    }
    
     #he3{
    position: absolute;
    color: rgb(38, 38, 92);
    left: 370px;
    top: 32vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    padding: 10px;
    font-weight: 500;

  }
   
     #he4{
    position: absolute;
    color: rgb(59, 59, 189);
    left: 250px;
    top: 43vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    padding: 10px;
    font-weight: 500;

  }
     #he5{
    position: absolute;
    color: rgb(125, 125, 128);
    left:130px;
    top: 90vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    padding: 10px;
    font-weight: 400;

  }
   
     #he6{
    position: absolute;
    color: rgb(38, 38, 121);
    left:230px;
    top: 90vh;  
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    padding: 10px;
    font-weight: 600;

  }
#poweredlogo{

position: absolute;
height: 8vh;
width: 5vw; 
left:2.5vw; top: 88vh;

}

  






















  
                          /* dashboard */


  
  #Lmain1{
    position: relative;
    background-color: rgb(235, 235, 238);
    width: 100vw;
    height: 100vh;
  }
  
  .sidebox{
    position:absolute;
    background-color: lab(27.46% -8.51 -19.26);
    width: 18vw;
    height: 100vh;
    border-radius: 10px;
  }
 
  .sl1{
    position:absolute;
    background-color: lab(27.46% -8.51 -19.26);
    width: 18vw;
    height: 10vh;

  }
  #slname1{
    position:absolute;
    top: 2vh;
    left:9vw;
    color: aliceblue;

  }
    #slname2{
    position:absolute;
    top: 4vh;
    left: 9vw;
    color: aliceblue;

  }

#simg1{
     position:absolute;
     top:0vh;
     width: 9vw;
     height: 12vh;
     left:0vw;
}
 #sbtn0{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 30vh;
    left:0.5vw;
    height: 5vh;
    width: 14vw;
    border-color: aliceblue ;
    border-radius:8px;
    color: rgb(244, 244, 248);
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
  }
  #sbtn1{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 12vh;
    left:0.5vw;
    height: 6vh;
    width: 16.5vw;
    border-color: aliceblue ;
    border-radius:8px;
    color: rgb(244, 244, 248);
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;

  }
   #slname3{
    position:absolute;
    top: 26vh;
    left:1vw;
    color: rgb(16, 224, 9);
   }
    #sbtn2{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content:center;
    
    gap: 8px;
    top: 36vh;
    left:0.5vw;
    height: 5vh;
    width: 14vw;
    border-color: aliceblue ;
    border-radius:8px;
    color: rgb(244, 244, 248);
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
  }
  #sbtn0 i{
    font-size: 20px;
    
  }
  #sbtn2 i{
    font-size: 20px;
  }
    #sbtn3 i{
    font-size: 20px;
  }
  #sbtn4 i{
    font-size: 20px;
  }
  #sbtn5 i{
    font-size: 20px;
  }
  #sbtn6 i{
    font-size: 20px;
  }
  #sbtn1 i{
    font-size: 20px;
  }
  #btnExit i{
    font-size: 20px;
  }


#sbtn3{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 42vh;
    left:0.5vw;
    height: 5vh;
    width: 14vw;
    border-radius:8px;
    color: rgb(244, 244, 248);
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-color: aliceblue ;
    cursor: pointer;
  }
  #sbtn4{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 48vh;
    left:0.5vw;
    height: 5vh;
    width: 14vw;
    border-radius:8px;
    border-color: aliceblue ;
    color: rgb(244, 244, 248);
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;

  }
   #sbtn5{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 54vh;
    left:0.5vw;
    height: 5vh;
    width: 14vw;
    border-radius:8px;
    border-color: aliceblue ;
    color: rgb(244, 244, 248);
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
   }
   #sbtn6{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 60vh;
    left:0.5vw;
    height: 5vh;
    width: 14vw;
    border-radius:8px;
    color: rgb(244, 244, 248);
    border-color: aliceblue ;
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
   }
   #btnExit{
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    top: 93vh;
    left:0.5vw;
    height: 5vh;
    width: 14vw;
    border-radius:8px;
    color: rgb(244, 244, 248);
    border-color: aliceblue ;
    background-color: lab(27.46% -8.51 -19.26);
    font-size:large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
   }

   #sbtn1:hover,
   #btnExit:hover,
   #sbtn2:hover,
   #sbtn3:hover,
   #sbtn4:hover,
   #sbtn5:hover,
   #sbtn6:hover{
    
    filter: drop-shadow(0 0 10px,#0e0d01);
    background-color: red;
    color: rgb(213, 250, 6);
  
    transition: 0.5s;
}


  #date1{
    position:absolute;
    top: 87vh;
    left:1vw;
    width: 12vw;
    height: 4vh;
    color: rgb(0, 5, 8);
    font-size:large;
  }
  #sidepanlogo{
    position: absolute;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgb(0, 5, 0, .15);
    width:14vw;
    height: 18vh;
    left: 65vw; top: 0.5vh;
  }




  /* DashboardMainpanal */



  #pan1{
    position: relative;
    background-color: rgb(250, 252, 253);
    width: 80vw;
    height: 20vh;
    left: 19vw; top: 0.5vh;
    border-radius: 10px;
  }
  #pan2{
    position: absolute;
    background-color:rgb(250, 252, 253);
    width: 80vw;
    height: 20vh;
    left: 19vw; top: 23vh;
    border-radius: 10px;
  }
  #pan3{
    position: absolute;
    background-color: rgb(250, 252, 253);
    width: 45vw;
    height: 50vh;
    left: 19vw; top: 45vh;
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
   #pan4{
    position: absolute;
    background-color:WhiteSmoke;
    width: 34vw;
    height: 50vh;
    left: 65vw; top: 45vh;
    border-radius: 10px;
  }
    #span1{
    position:absolute;
    background-color: WhiteSmoke;
    width: 18vw;
    height: 17vh;
    left: 1vw; top: 1vh;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgb(0, 5, 0, .15);
    }

  #sp1name{
    position:relative;
    top: -1Vh;
    left:2vw;
    color: rgb(5, 5, 5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5vw;
  }
  #sp1name1{
    position:relative;
    top:-3vh;
    left:2vw;
    font-size: 4vw; color: red;
   
  }

  #sp1name2{
    position:relative;
    display: flex;
    top: -3vh;
    left:8vw;
    color: rgb(5, 5, 5);
    font-size: 1vw;
  }
  #sp1img{
    position: absolute;
     width: 40%; height: 60%; left: 0vw; top: 5vh;
  }




    #span2{
    position:absolute;
    background-color: whitesmoke;
    width: 18vw;
    height: 17vh;
    left: 20vw; top: 1vh;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgb(0, 5, 0, .15);
  }
   #sp2name{
    position:relative;
    top: -1Vh;
    left:2vw;
    color: rgb(5, 5, 5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5vw;
  }
  #sp2name1{
    position:relative;
    top:-3vh;
    left:2vw;
    font-size: 4vw; color: red;
  }

  #sp2name2{
    position:relative;
    display: flex;
    font-size: 1vw;
    top: -3vh;
    left:8vw;
    color: rgb(5, 5, 5);
  }
  #sp2img{
    position: absolute;
     width: 40%; height: 60%; left: 0vw; top: 5vh;
}





#span3{
    position:absolute;
    background-color: WhiteSmoke;
    width: 18vw;
    height: 17vh;
    left: 40vw; top: 1vh;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgb(0, 5, 0, .15);
    
  }
#sp3name{
    position:relative;
    top: -1Vh;
    left:2vw;
    color: rgb(5, 5, 5);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5vw;
}
  #sp3name1{
    position:relative;
    top:-3vh;
    left:2vw;
    font-size: 4vw; color: red;
  }

  #sp3name2{
    position:relative;
    top: -3vh;
    left:8vw;
    color: rgb(5, 5, 5);
    display: flex;
    font-size: 1vw;
  }
  #sp3img{
   position: absolute;
     width: 40%; height: 60%; left: 0vw; top: 5vh;
  }


  .Emtable{
    position: absolute;
    top: 3vh;
    left: 1vw;
    color: black;

  }

  #pan3 td{
    color: black;
    height: 60px;
    text-align: center;
    
   
  }
  #pan4 td{
     color: black;
     height: 9vh;
     text-align:left ;
  }

  /* #summary{
  border-collapse: separate;
  background-color: rgb(222, 220, 231);
  justify-content: center;
  border-collapse: separate;
  border-spacing: 0 10px;
  border-radius: 8px;
    
    
  } */
   #summary{
  position: absolute;
  width: 100%;
  height: 10vh;
  color: rgb(8, 0, 0);
  top: 0vh;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 300;
  background-color: rgb(231, 231, 233);
  justify-content: center;
  border-collapse: separate;
  border-spacing: 0 10px;
  border-radius: 8px;
  
   }

 
  
  #summary th{
    font-family: serif;
    width: 10vw;
    height: 4vh;
    color: rgb(0, 5, 8);
    z-index: 10;
    top: 0;
   
  
  }
   #sumhead th{
    text-align: center;
    width:20vw;
    margin: 0%;
    padding: 10px 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: small;
    background-color:  rgb(222, 220, 231);
    color:darkblue;
    position: sticky;
    top: 0;
    
  }

   
  #summary tr{
  
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border-radius: 8px;
}
#summary td{
  padding: 1px;
   
}

  #Emimg{
    position: absolute;
    
    width: 12vw;
    height: 25vh;
    left: 21vw; top: 2vh;
    border: 3px solid black;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgb(0, 5, 0, .15);

  }
  
  #listbox{
    position: absolute;
    top: 8vh;
    left:2vw;
    width: 12vw;
    height: 4vh;
    color: rgb(0, 5, 8);
    font-size:large;
   
  }
  #Emname{
    position: absolute;
    top: 8vh;
    left:14vw;
    width: 45vw;
    height: 4vh;
    color: rgb(0, 5, 8);
    font-size:large;
    
  }
    #Emsch{
    position: absolute;
    top: 8vh;
    left:59vw;
    width: 8vw;
    height: 4vh;
    background-color: darkblue;
    text-align: center;
    color: rgb(252, 249, 249);
    font-size:90%;
    border-radius: 8px;
  
  }


#employeelistpan{
  position: absolute;
  width: 25vw;
  max-height: 250px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  display: none;
  box-shadow: 0 8px 20px rgba(0,0,0,015);
  z-index: 1000;
  top: 12vh; left: 14vw;
}
#emplisttbl{
  width: 100%;
  border-collapse: collapse;

}
#emplisttbl tr{
  cursor: pointer;
  transition: 0.2s;

}
 #emplisttbl td{
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  cursor: pointer;
 }
 #emplisttbl tr:hover{
  background: #eaf4ff;
 }
#emplisttbl td:last-child{
  color: #444;
}






                                /* Employe Master Style */
  
                     
                                




#navbar{
    position: relative;
    background: transparent;
    background-color: rgb(25, 42, 117);
    color: aliceblue;
    width: 100vw; height: 10vh;
    
}

#navbarheading{
  position:absolute;
  display: flex;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size:xx-large;
  left: 42vw;
  top: 2vh;
}



#Staffmastermain{
  
  position: relative;
  width: 82vw;
  height: 81.5vh;
  left: 8vw;top: 1.5vh;
 background: #ccc;
 border-radius: 10px;
 
 


}




#Staffmasterentrypan{
    position: absolute;
    width: 40vw;
    height: 79.5vh;
    left: 0.5vw;
    top: 1vh;
    background-color:#fff;
    border-radius: 6px;
}
#Searchpan{
  position: relative;
  background-color:whitesmoke;
  width: 39vw;
  height: 10vh;
  top: 1vh;left: 0.5vw; 
  border-radius: 10px;
}
#Searchpan label{
  position: relative;
  display: flex;
  padding: 2px;
  color: black;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 0vh; left: 2vw;
}

 #sbar{
   position: absolute;
    width: 50%;padding: 0.5vw;
    left: 2vw;top: 3vh;
    border-radius: 4px;
   }
  
#employeesearchbtn{
    position: absolute;
    top: 3vh;
    left:30vw;
    width: 8vw;
    height: 4vh;
    cursor:pointer;
    color: rgb(7, 7, 7);
    font-size:1rem;
    border-radius: 6px;
    gap: 8px;
  }
  #saveemployee{
    position: absolute;
    top: 64vh;
    left:2vw;
    width: 7vw;
    height: 4vh;
    cursor:pointer;
    color: rgb(7, 7, 7);
    font-size:medium;
    border-radius: 6px;
  
  }
  #exitAdvancepan{
    position: absolute;
    top: 20vh;
    left:10vw;
    width: 7vw;
    height: 4vh;
    cursor:pointer;
    color: rgb(7, 7, 7);
    font-size:medium;
    border-radius: 6px;
  
  }

  #salarydetailspan{
  position: relative;
  background-color:#fff;
  width: 39vw;
  height: 67.5vh;
  top: 1.5vh;left: 0.5vw; 
  border-radius: 10px;
}






    #IDnumber{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 20vw;top: 4vh;
   
   }
   
  
   #Joindate{
    position: absolute ;
    width: 15vw;
    height: 3vh;
    left: 2vw;top: 4vh;
   }
  
  
    #Staffname{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 2vw;top: 13vh;
   
   }
   #Staffage{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 20vw;top: 13vh;
   }
    #StaffGender{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 2vw;top: 21vh;
   }
   
   #Staffbgroup{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 20vw;top: 21vh;
   }
    #Staffphone{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 2vw;top: 29vh;
   }
    #Staffemail{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 20vw;top: 29vh;
   }
    #Staffaddress{
    position: absolute;
    width: 15vw;
    height: 10vh;
    left: 2vw;top: 37vh;
   }
   #Basicsalary{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 2vw;top: 52vh;
   }
    #desig{
    position: absolute;
    width: 15vw;
    height: 3vh;
    left: 2vw;top: 60vh;
   }



   #Staffimg{
    position: absolute;
    border-color: #0a0101;
    width:12vw;
    height: 17vh;
    left: 20vw; top: 34vh;
  }

#Staffimgupload{
    position: absolute;
    width: 10vw;
    height: 3vh;
    left: 20vw;top: 52vh;
   }














   #label12{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 18vh; left: 2vw;
   }

    #savesalary{
    position: absolute;
    top: 60vh;
    left:2vw;
    width: 7vw;
    height: 4vh;
    cursor:pointer;
    color: rgb(7, 7, 7);
    font-size:medium;
    border-radius: 6px;
  
  }
  #exitsalarypan{
    position: absolute;
    top: 64vh;
    left:26vw;
    width: 7vw;
    height: 4vh;
    cursor:pointer;
    color: rgb(7, 7, 7);
    font-size:medium;
    border-radius: 6px;
  
  }
  #Printsalarydetails{
    position: absolute;
    top: 64vh;
    left:18vw;
    width: 7vw;
    height: 4vh;
    cursor:pointer;
    color: rgb(7, 7, 7);
    font-size:medium;
    border-radius: 6px;
  
  }
    #Editemployee{
    position: absolute;
    top: 64vh;
    left:10vw;
    width: 7vw;
    height: 4vh;
    cursor:pointer;
    color: rgb(7, 7, 7);
    font-size:medium;
    border-radius: 6px;
    }


  #netsalaryshowpan{
  position: absolute;
  background-color:whitesmoke;
  width: 40.5vw;
  height: 79.5vh;
  top: 0vh;left: 40.5vw; 
  border-radius: 6px;
  overflow-x: auto;
  overflow-y: auto;
}

 #lbl2{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 1vh; left: 1vw;
  color: blue;
   }


#tblstaffshow{
  position:absolute;
  width: 100%;
  height: 4vh;
  color: rgb(8, 0, 0);
  top: 7vh;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 300;
  background-color: rgb(222, 220, 231);
  justify-content: center;
  border-collapse: separate;
  border-spacing: 0 10px;
  border-radius: 8px;
}

#Staffdetailstbl tr{
  
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  border-radius: 8px;
  
}

   #employeeshowhead th{
    text-align: center;
    width:20vw;
    margin: 0%;
    padding: 10px 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: small;
    background-color:  rgb(222, 220, 231);
    color:darkblue;
    position: sticky;
    top: 0;
    
  }


  

#Staffdetailstbl td{
  
  color: black;
  background-color:#e8ebfd;
  padding: 10px;
}




 label{
  color: black B;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
  
   }
  #label1{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
  top: 1vh; left: 2vw;
   }
    
  #label2{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 1vh; left: 20vw;
   }

    #label3{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
  top: 10vh; left: 2vw;
   }
    
  #label4{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 10vh; left: 20vw;
   }
   #label6{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 18vh; left: 20vw;
}
#label7{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 26vh; left: 2vw;
   }
#label8{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 26vh; left: 20vw;
   }
   #label9{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 34vh; left: 2vw;
   }
     #label10{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 49vh; left: 2vw;
   }
  #label11{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 57vh; left: 2vw;
   }



#lbl3{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 1vh; left: 1vw;
  color: blue;
   }


#lbl4{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 2vh; left: 1vw;
  color: black;
   }
   #lbl5{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 2vh; left: 1vw;
  color: black;
   }
   #lbl6{
  position: absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  top: 2vh; left: 1vw;
  color: black;
   }
  


   
#employeeSearchpan{
  position: absolute;
  width: 25vw;
  max-height: 250px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  display: none;
  box-shadow: 0 8px 20px rgba(0,0,0,015);
  z-index: 1000;
  top: 8vh; left:2vw;
}
#emplisttbl{
  width: 100%;
  border-collapse: collapse;

}
#emplisttbl tr{
  cursor: pointer;
  transition: 0.2s;

}
 #emplisttbl td{
  padding: 12px 16px;
  border-bottom: 1px solid #ececec;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
  cursor: pointer;
 }
 #emplisttbl tr:hover{
  background: #eaf4ff;
 }
#emplisttbl td:last-child{
  color: #444;
}