body {
    background-color: #EEEEEE;
    font-family: 'Kanit', sans-serif;
}

.approve {
  color: #007bff;
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle;
  
}
.unapprove {
  color: #ff0000;
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle;
  
}
.leave {
    color: #800000;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
    
  }
  .style1 {
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
    
}
/*
.tb_head{
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
  text-align:left;

}
*/

td.tb_head{
  font-size: 11px;
   font-weight: bold; 
  vertical-align: middle;
  text-align:left;

}

.rep1{
  font-size: 0.2rem;
  font-weight: bold;
  vertical-align: middle;
  text-align:center;
  
}
.rep2 {
  font-size: 0.2rem;
  color: #800000;
  font-weight: bold;
  background-color: #d9d9d9;
  vertical-align: middle;
}
.tb_total{
  font-size: 11px;
  font-weight: bold;
  vertical-align: middle;
  background-color: #a0a0a0;

}
.holiday {
    font-size: 10px;
    color: #800000;
    font-weight: bold;
    background-color: #d9d9d9;
    vertical-align: middle;
}
/*
table td.style1 {
  overflow:hidden ;
  
}

table td.tb_head {
  

    overflow-y: visible;
  
  
}

tr.tr_head:hover {
  
  background-color: #b3b3b3;
}

td.style1, th {
 
  position: relative;
}
td.style1:hover::after,
th:hover::after {
 
  content: "";
  position: absolute;
  background-color: #b3b3b3;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}
td.style1:focus::after,
th:focus::after { 

  content: '';  
  background-color: lightblue;
  position: absolute;  
  left: 0;
  height: 10000px;
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td.style1:focus::before {
 
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}
*/