body {
    background-color:#1C1C1C;
    color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    
  }

  .mobile-container {
    width: 100%;
    margin: auto;
    background-color: #555;
    color: white;
    border-radius: 10px;
  }
  
  .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  
  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .topbar {
    background-color: #04AA6D;
    color: white;
  }
.mainpage_pic{
 width: 100%;
 
}
.mainpage{
  float: left;

  
 }

 .frontpage{
  color: red;
  text-align: center;
  

  
 }
.emp_databank_table{
  font-size:x-small;
  color: white;
}

.emp_databank_table tr:nth-child(even){
  background-color:darkgrey;
}
 td{
    text-align: center;
    vertical-align: middle;
    font-size: small;
    
  }

  .name_cell{
   
    text-align: center;
    width: 200px;
    border: 1px black;
   
  }



  th{
    text-align: center;
    vertical-align: middle;
  }

  th.rotate {
    /* Something you can count on */
    height: 100px;
    font-size: smaller;
    white-space: nowrap;
  }
  
  th.rotate > div {
    transform: 
      /* Magic Numbers */
      translate(20px, 50px)
      /* 45 is really 360 - 45 */
      rotate(315deg);
    width: 5px;
  }
  th.rotate > div > span {
   
    padding: 2px 20px;
  }
  .btn_tray
  {
    border-radius: 12px;
    border-color: green;
    background-color:green;
    background-image: url("C:\xampp\htdocs\newoot\icons\tray.png");
    font-family: Arial, Helvetica, sans-serif;
    color: whitesmoke;


  }

  .btn_qty
  {
    border-radius: 5px;
    width: 40px;
    background-color:rgb(243, 33, 86);
    font-size: large;
    font-family: Arial, Helvetica, sans-serif;
    color: whitesmoke;


  }

.reason{
  width: 100%;
  border-radius: 10px;
  text-align: center;

  height: 50px;
   border-color: ivory;
  border-width: medium;
  background-color:white;
  
}
  .btn_pos
  {
    margin: 10px;
    
    width: 100px;
    height:50px;
    border-radius: 12px;
    background-color:red;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    color: whitesmoke;

  }
  .btn_reg
  {
    margin: 10px;
    font-size: larger;
    width: 100px;
    height:50px;
    border-radius: 12px;
    background-color:lightslategray;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    color: whitesmoke;

  }
  .gallery {
      float: unset;
    border-radius: 15px;
    margin: 5px;
    text-align: center;
    border: 1px solid #ccc;
    width:200px;
    height:50px;
  }
.textmodal{

    border-color: white;
    width: 150px;
    height: 50px;
}

.text_personal_info{

  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  color:red;
}

.text_info{

width: 150px;
  padding: 12px 5px;
  margin: 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  color:red;
}

.text_fsc{

  width: 100%;
  padding: 12px 20px;
  margin: 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  
}   
  
  .table_earnings{
    table-layout: fixed;
    border-color: azure;
    vertical-align: middle;
    border-spacing: 0;
    font-size: small;
    width: 100%;

  }
  .table_personal_info{
    table-layout:auto;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: small;
    width: 100%;

  }
.main{
  
  text-align: center;
    width: 100%;
  
  
}

.earnings_main{
  background-color:white;
  margin: 5px;
    width: 100%;
}

.regform{
 
  margin: 20px 10px;
  
  
}

.profile_pic{
  border-radius: 25px;
  width: 50px;
  height: 50px;
   border-color: ivory;
  border-width: medium;
}

.payroll_pic{
  border-radius: 70px;
  width: 100px;
  height: 100px;
   border-color: ivory;
  border-width: medium;
}

.pro_pic{
  border-radius: 25px;
  text-align: center;
  width: 50px;
  height: 50px;
   border-color: ivory;
  border-width: medium;
  background-color:darkblue;
  color:white ;
}
.circle_text{
  border-radius: 25px;
  text-align: center;
  width: 50px;
  height: 50px;
   border-color: ivory;
  border-width: medium;
  background-color:white;
  color:black ;
}
.circle_green{
  border-radius: 25px;
  font-size: x-small;
  text-align: center;
  width: 50px;
  height: 50px;
   border-color: ivory;
  border-width: medium;
  background-color:green;
  color:white;
}

.active{

  display: inline-block;
  border-radius: 25px;
  font-size: x-small;
  vertical-align: middle;
  width: 50px;
  height: 50px;
   border-color: ivory;
  border-width: medium;
  background-color:green;
  color:white;
}
.inactive{
  text-align: center;
  border-radius: 25px;
  font-size: x-small;
   width: 50px;
  height: 50px;
   border-color: ivory;
  border-width: medium;
  background-color:gray;
  color:white;
}

.emp_name{
  
   width: 150px;
 
}
.btn_meals{
  border-radius: 5px;
  width: 90%;
  height: 50px;
   border-color: ivory;
  border-width: medium;
  background-color:orange;
  color:white ;
}
.pro_alert{
  border-radius: 25px;
  width: 50px;
  height: 50px;
  color: white;
   border-color: ivory;
  border-width: medium;
  background-color:red;
}
.header {
  float:left;
  height: fit-content;
 width: 100%;
  color: white;
  font-size: 20px;
}
.deviation{
  width:100%;
  border-color: gray;
  height: 300px;
  border-radius: 10px;
  
}

select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.onboard_date {
  width: 88%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.dropdown {
    color:black;
    width: 88%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.select_earnings {
  width: 40%;
  padding: 12px 20px;
  margin: 5px 5px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.calendar_div {
  float: left;
  width: 40%;
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.holidays_div {
  float: left;
  width: 55%;
  margin: 10px;
   border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.nav-link {
  color: white;
  text-decoration: none;
  display: inline-block;
  text-transform: none;
  text-emphasis-style: none;
  
}


.nav-link .badge {
  position:relative;
  top: -10px;
  padding: 2px 5px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-size: smaller;
}

.eye_show {
  float:right;
  position:relative;
  top: -40px;
  padding: 2px 5px;
  border-radius: 50%;
 color:black;
  font-size:medium;
}
.accordion {
  
  
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}



.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}


.panel {
  
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.middle_align{
  margin: auto;
  padding: 5px;
}

.payslip-format{
  color: #1C1C1C;
  width:100%;
  background-color: white;
  margin: 3px;
}


.earnings_div{
  float: left;
  width: 49%;
 

}
.deductions_div{
  float: right;
  width: 49%;
 
}
.footer-text{

  width: 100%;
  margin-bottom: 5px;
  float:left ;
}
.address{
  float: right;
}
.tooltip {
  position:fixed;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;

}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.gallerymain {
    border-radius: 50px 15px ;
    text-align: center;
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
    height:200px;
  }