@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.loaderss {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 200px;
  height: 200px;
  animation: spin 4s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block; /* Hide by default */
}

.loader {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 200px;
  height: 200px;
  animation: spin 4s linear infinite;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; /* Hide by default */
}

.paragraph{
  font-size: 200%;
  text-align: center;
}



.column1 {
  position: fixed;
  margin-left: 0px;
  margin-bottom: 0px;
  float: left;
  width: 50%;
  padding: 0px;
  height: 100%; /* Should be removed. Only for demonstration */
  background-color: rgb(57, 131, 188);
  background-color: rgb(38, 99, 58);
}
.column1login {
  position: fixed;
  top: 0%;
  margin: 0px;
  left: 0%;
  float: left;
  width: 50%;
  padding: 0px;
  height: 100%; /* Should be removed. Only for demonstration */
  background-color: rgb(57, 131, 188); 
  background-color: rgb(38, 99, 58);
}
.loginfooter{
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 2%;
}
.loginimage{
  margin: 0px;
  width: 50%;
  padding-left: 0%;
  padding-top: 0%;
  padding: 0%;
  text-align: center;
  position: absolute;
}

.loginmoney{
  margin: 0px;
  padding: 0%;
  width: 100%;
  height: 40%;
  padding-left: 0%;
  padding-top: 0%;
  text-align: center;
  position: absolute;
  top: 60%;
}
div.logintext{
  width: 100%;
  padding-left: 10%;
  padding-top: 20%;
  color: white;
  font-size: 200%;
  background-image: url("images\loginbackground.jpg");
}
div.loginheader{
  width: 100%;
  text-align: center;
}

.column2 {
  float: left;
  width: 50%;
  padding: 0px;
  height: 100%; /* Should be removed. Only for demonstration */
  background-color: white;
}

.column2login {
  float: right;
  width: 50%;
  padding: 0px;
  height: 100%; /* Should be removed. Only for demonstration */
  background-color: white;
  position: relative;
}

.columnindex1 {
  margin: 0px;
  top: 0%;
  left: 0%;
  position: fixed;
  float: left;
  width: 20%;
  padding: 0px;
  height: 100%; /* Should be removed. Only for demonstration */
  background-color: rgb(57, 131, 188);
  background-color: rgb(38, 99, 58);
  overflow-y: auto;
  overflow-x: visible;
}

.columnindex2 {
  position: absolute;
  float: left;
  width: 80%;
  left: 20%;
  top: 0%;
  padding: 1px;
  height: 100%; /* Should be removed. Only for demonstration */
}
.columnindex21 {
  position: relative;
  top: 0%;
  float: left;
  width: 100%;
  padding: 0px;
  height: 13%; /* Should be removed. Only for demonstration */
  /*background-color: rgba(221, 219, 219, 0.758);*/
  background-color: rgb(57, 131, 188);
  background-color: rgb(38, 99, 58);
  color: white;
}

.columnindex22 {
  background-color: white;
  position: absolute;
  top: 13%;
  left: 0%;
  float: left;
  width: 100%;
  padding: 0px;
  height: 100%; /* Should be removed. Only for demonstration */
  overflow-y: visible;
  overflow-x: visible;
}

div.form
{
    display: block;
    text-align: center;
    margin-top: 30%;
}
.loginform
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.loginlabel{
  font-size: 1em;
}

.logininput{
  border: 2px solid rgb(57, 131, 188);
  border-radius: 4px;
  width: 150%;
  height: 5%;
}

.loginsubmit{
  color: white;
  border: 2px solid rgb(57, 131, 188);
  background-color: rgb(57, 131, 188);
  border-radius: 4px;
  width: 150%;
  height: 5%;
}

.sidebar {
  float: left;
  list-style-type: none;
  margin: 10;
  padding: 0px;
  width: 100%;
}

.sidebartotal {
  float: left;
  width: 100%;
  
}

.sidebarlist a {
  text-align: justify;
  display: block;
  padding-left: 10%;
  padding-bottom: 4%;
  padding-top: 4%;
  float: left;
  width: 100%;
  color: white;
  font-size: 1.3em;
  text-decoration: none;
}
li{
  list-style-type:none;
}

.sidebarlist a.active {
  float: left;
  background-color: rgb(57, 131, 188);
  color: rgb(31, 10, 217);
  width: 100%;
}

.sidebarlist a:hover {
  float: left;
  /*font-size: 1.5em;*/
  color: rgb(33, 30, 30);
  width: 100%;
}


.list2 a {
  text-align: justify;
  display: block;
  padding-left: 12%;
  padding-bottom: 4%;
  float: left;
  width: 100%;
  color: white;
  font-size: 0.8em;
  text-decoration: none;
  list-style-type:none;
}

.list2 a.active {
  float: left;
  background-color: rgb(57, 131, 188);
  color: rgb(31, 10, 217);
  width: 100%;
}

.list2 a:hover:not(.active) {
  float: left;
  /*font-size: 1.0em;*/
  color: rgb(33, 30, 30);
  /*color: white;*/
  width: 100%;
  list-style-type:none;
}

div.logo
{
    display: block;
    text-align: center;
    margin-top: 30%;
}

div.foot
{
  height: 100%;
  bottom: 0%;
  width: 100%;
  color: rgba(245, 245, 245, 0.944);
  text-align: center;
}

div.welcomename{
  position: relative;
  top: 1.5%;
  padding-left: 6%;
  width: 50%;
  font-size: 1.7em;
}

div.logout{
  position: absolute;
  top: 40%;
  padding-left: 1%;
  width: 6%;
  height: 20%;
  font-size: 1.7em;
  margin-left: 80%;
  background-color: rgb(57, 131, 188);
  background-color: rgb(38, 99, 58);
  border-radius: 6px;
  font-size: 1.1em;
}

div.username{
  position: absolute;
  top: 10%;
  padding-left: 1%;
  width: 25%;
  height: 20%;
  font-size: 1.7em;
  margin-left: 80%;
  background-color: rgb(57, 131, 188);
  background-color: rgb(38, 99, 58);
  border-radius: 6px;
  font-size: 1.1em;
}

.logout:hover{
  
  color:rgb(146, 7, 135);
}

div.bell{  
  float: left;
  position: absolute;
  top: 25%;
  text-align: left;
  margin-left: 50%;
  padding-left: 10%;
  /*width: 50%;*/
  font-size: 3em;
}

p.newemployee{
  float: center;
  text-align: center;
  font-size: 1.7em;
  text-decoration: bold;
}

div.initial{  
  float: left;
  margin-left: 65%;
  /*right: 1%;*/
  margin-top: 1%;
  /*top: 1.5%;*/
  /*background-color: aqua;*/
  position: absolute;
  text-align: center;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  aspect-ratio : 1 / 1;
  /*height: 1.5%;*/
  /*width: same-as-height;*/
  height: 50px;
  width: 50px;
  font-size: 1.8em;
  vertical-align: middle;
  border-radius: 50%;
}
p.initp{
  /*background-color: red;*/
  margin-top: 15%;
  padding-left: 0%;
  padding-right: 0%;
  padding-top: 0%;
  padding-bottom: 0%;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  text-align: center;
}
div.payrollsum{
  position: relative;
  width: 100%;
  height: 20%;
  background-color: white;
  border-style: solid;
  border-radius: 10px;
  border: 10px;
  border-color: black;
  text-align: center;
}

div.grossdiv{
  border-style: solid;
  border-radius: 10px;
  position: relative;
  background-color: white;
  width: 15%;
  float: left;
  border-radius: 10px;
  margin-left: 5%;
  border-color: rgba(221, 219, 219, 0.758);
}

div.payediv{
  background-color: white;
  position: relative;
  width: 15%;
  float: left;
  border-radius: 10px;
  border-style: solid;
  margin-left: 10%;
  border-radius: 10px;
  border-color: rgba(221, 219, 219, 0.758);
}

div.nisempediv{
  background-color: white;
  position: relative;
  width: 15%;
  float: left;
  border-radius: 10px;
  margin-left: 10%;
  border-style: solid;
  border-radius: 10px;
  border-color: rgba(221, 219, 219, 0.758);
}

div.nisemprdiv{
  background-color: white;
  position:  relative;
  width: 15%;
  float: left;
  margin-left: 10%;
  border-style: solid;
  border-radius: 10px;
  border-color: rgba(221, 219, 219, 0.758);
}
p.pname{
  text-align: center;
  color: rgb(91, 91, 236);
  font-size: 1.3em;
}
p.lab{
  font-size: 1em;
}
p.value{
  font-size: 1.2em;
}
div.searchform{
  height: 25%;
  width: 100%;
  background-color: white;
}
.searchbar{
  float: left;
  margin-left: 20%;
  margin-top: 6%;
  height: 20%;
  width: 30%;
  border-color: rgba(221, 219, 219, 0.758);

}

.searchicon{
  margin-top: 6%;
  height: 20%;
  width :6%;
  float: left;

}
.addempl{
  float: left;
  margin-top: 6%;
  height: 20%;
  margin-left: 5%;
  width: 19%;
  background-color: rgb(57, 131, 188);
  color: white;
}
.addempl:hover{
  background-color: rgb(145, 145, 194);
}

.employee{
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.employee td, .employee th {
  border: 1px solid #ddd;
  padding: 8px;
}

.employee tr:nth-child(even){background-color: #f2f2f2;}

.employee tr:hover {background-color: #ddd;}

.employee th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(57, 131, 188);;
  color: white;
}

div.bankingtable{
  position: relative;
  margin-top: 10%;
}

.employeeb{
  position: relative;
  margin-top: 1%;
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

.employeeb td, .employeeb th {
  border: 1px solid #ddd;
  padding: 8px;
}

.employeeb tr:nth-child(even){background-color: #f2f2f2;}

.employeeb tr:hover {background-color: #ddd;}

.employeeb th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

div.nextandback{
  position: relative;
  margin-top: 1%;
  margin-right: 5%;
}

div.messa{
  position: relative;
  margin-top: 6%;
  margin-left: 10%;
  color: rgb(57, 131, 188);
  font-size: 150%;
}

button.nab{
  width: 6%;
  height: 4%;
  float: right;
  margin-right: 1%;
  background-color: white;
  border-color: rgb(57, 131, 188);
  border-radius: 5px;
  border-style: solid;
  color: rgb(57, 131, 188);
}

button.nab:hover{
  background-color: rgb(57, 131, 188);;
  color: white;
}

button.nabs{
  background-color: white;
  border-color: rgb(57, 131, 188);
  border-radius: 5px;
  border-style: solid;
  color: rgb(57, 131, 188);
}

button.nabs:hover{
  background-color: rgb(57, 131, 188);;
  color: white;
}

div.personalinfo{
  border-style: solid;
  border-radius: 5px;
  border-color: rgba(221, 219, 219, 0.758);
  margin-top: 0%;
  width: 70%;
  margin-left: 10%;
}

table.personalinfo{
  border-style: solid;
  border-radius: 5px;
  border-color: rgba(221, 219, 219, 0.758);
  margin-top: 0%;
  width: 50%;
  margin-left: 10%;
  font-size: 1.15em;
}

div.personalinfos{
  border-style: solid;
  border-radius: 5px;
  border-color: rgba(221, 219, 219, 0.758);
  margin-top: 0%;
  width: 70%;
  margin-left: 10%;
}

div.fandlnamelabel{
  background-color: white;
  margin-top: 2%;
}

div.empandtinlabel{
  background-color: white;
  margin-top: 2%;
}

div.designationandnislabel{
  background-color: white;
  margin-top: 2%;
}

div.doeanddptlabel{
  background-color: white;
  margin-top: 2%;
}

div.basicandbanklabel{
  background-color: white;
  margin-top: 2%;
}

div.designationandnislabel{
  background-color: white;
  margin-top: 2%;
}

div.doeanddptlabel{
  background-color: white;
  margin-top: 2%;
}


label.firstname{
  margin-left: 5%;
  width: 30%;
}
label.empnum{
  margin-left: 5%;
  width: 30%;
}
label.basicsal{
  margin-left: 5%;
  width: 30%;
}
label.des{
  margin-left: 5%;
  width: 30%;
}
label.doe{
  margin-left: 5%;
  width: 30%;
}
input.firstnameinput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  margin-top: 2%;
  border-radius: 8px;
}

input.earninginput{
  margin-left: 30%;
  height: 1000%;
  width: 60%;
  margin-top: 5%;
  border-radius: 8px;
  font-size:0.8em;
}

input.timefileinput{
  
}

input.empnuminput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  margin-top: 2%;
  border-radius: 8px;
}

textarea.textareain{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  margin-top: 2%;
  border-radius: 8px;
}
input.doempinput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  margin-top: 2%;
  border-radius: 8px;
  margin-bottom: 2%;
}

input.designationinput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  margin-top: 2%;
  border-radius: 8px;
}

label.lastname{
  margin-left: 37%;
  width: 40%;
}
label.bankbranch{
  margin-left: 37%;
  width: 40%;
}

label.nis{
  margin-left: 37%;
  width: 40%;
}

label.tin{
  margin-left: 37%;
  width: 40%;
}
label.dpt{
  margin-left: 37%;
  width: 40%;
}
input.lastnameinput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  border-radius: 8px;
}
input.nisinput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  border-radius: 8px;
}

input.tininput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  border-radius: 8px;
}

select.dptinput{
  margin-left: 5%;
  height: 4%;
  width: 40%;
  border-radius: 8px;
  margin-bottom: 2%;
  margin-top: 2%;
}

div.otheranddoblabel{
  margin-top: 5%;
}

div.payrollandacctypelabel{
  margin-top: 0%;
}
label.othernames{
  margin-top: 19%;
  margin-left: 5%;
  width: 40%;
}
input.othernamesinput{
  margin-top: 2%;
  margin-left: 5%;
  height: 4%;
  width: 40%;
  border-radius: 8px;
}

label.dob{
  margin-top: 19%;
  margin-left: 35%;
  width: 40%;
}
input.dob{
  margin-top: 2%;
  margin-left: 5%;
  height: 4%;
  width: 40%;
  border-radius: 8px;
}
label.address{
  margin-top: 5%;
  margin-left: 5%;
}
label.accnum{
  margin-top: 0%;
  margin-left: 5%;
}
div.add{
  margin-top: 5%;
}
input.address{
  margin-left: 5%;
  margin-top: 2%;
  height: 4%;
  width: 86%;
  border-radius: 8px;
  margin-bottom: 2%;
}
div.newempl{
  margin-left: 15%;
}
p.newemp{
  margin-top: 5%;
  /*font-style: italic;*/
  font-weight: bold;
  font-size: 1.1em;
}


div.employmentlinfo{
  border-style: solid;
  border-radius: 5px;
  border-color: rgba(221, 219, 219, 0.758);
  margin-top: 0%;
  width: 70%;
  margin-left: 10%;
}

div.paymentinfo{
  border-style: solid;
  border-radius: 5px;
  border-color: rgba(221, 219, 219, 0.758);
  margin-top: 0%;
  width: 70%;
  margin-left: 10%;
}

div.submitempl{
  position: relative;
  width: 100%;
  height: 10%;
  text-align: left;
  padding-left: 35%;
  padding-top: 4%;
  
}
input.submitemp{
  text-align: center;
  width: 20%;
  height: 90%;
  font-size: 100%;
  border-radius: 15px;
}
input.submitemp:hover{
  background-color: rgb(89, 88, 88);
}


div.messageemp{
  width: 34%;
  height: 16%;
  margin-left: 33%;
  margin-top: 20%;
  position: absolute;
  background-color: rgb(221, 214, 217);
  text-align: center;
  border-radius: 5px;
}

button.addemps{
  width: 20%;
  height: 40%;
}

div.payroll{
  width: 80%;
  height: 100%;
  float: left;
  margin-left: 10%;
  margin-top: 2%;
}

div.payroll1{
  margin-top: 2%;
  height: 25%;
}
div.payroll2{
  margin-top: 1%;
  height: 25%;
}
div.pay1{
  margin-left: 10%;
  height: 80%;
  float: left;
  width: 20%;
  text-align: center;
  background-color: rgb(207, 207, 207);
  border-radius: 10px;
}
div.pay1:hover{
  background-color: rgb(57, 131, 188);
  color: white;
}
div.pay2:hover{
  background-color: rgb(57, 131, 188);
  color: white;
}
div.pay3:hover{
  background-color: rgb(57, 131, 188);
  color: white;
}
div.pay2{
  float: left;
  margin-left: 10%;
  height: 80%;
  width: 20%;
  text-align: center;
  background-color: rgb(207, 207, 207);
  border-radius: 10px;
}
div.pay3{
  float: left;
  margin-left: 10%;
  width: 20%;
  height: 80%;
  text-align: center;
  background-color: rgb(207, 207, 207);
  border-radius: 10px;
}
p.labelpay{
  margin-top: 2%;
  font-size: 150%;
}
div.message{
  font-size: 110%;
  text-align: center;
}

div.messageloan{
  font-size: 100%;
  text-align: center;
}



div.ccompany{
  border-radius: 10px;
  position: relative;
  background-color: white;
  width: 8%;
  float: left;
  margin-left: 5%;
}

div.cbanking{
  background-color: white;
  position: relative;
  width: 8%;
  float: left;
  border-radius: 10px;
  margin-left: 5%;
}
div.clocation{
  position: relative;
  background-color: white;
  width: 8%;
  float: left;
  margin-left: 5%;
}

div.cdepartment{
  background-color: white;
  position: relative;
  width: 9%;
  float: left;
  margin-left: 5%;
}

div.cterm{
  background-color: white;
  position: relative;
  width: 10%;
  float: left;
  margin-left: 5%;
}

div.cdesignation{
  background-color: white;
  position: relative;
  width: 8%;
  float: left;
  margin-left: 5%;
}
div.companyheads{
  position: relative;
  top: 2%;
  font-size: 150%;
}

div.bnkinfo{
  position: relative;
  top: 8%;
  text-align: left;
}
div.subscd{
  position: relative;
  margin-top: 2%;
  margin-bottom: 1.5%;
  margin-left: 5%;
}

input.submitc{
  position: relative;
  width: 8%;
  height: 4%;
  top: 1%;
  border-radius: 5px;
}


/*

.fa-user-plus {
  color: white;
}
.fa-gear{
  color: white;
}
.fa-clock-rotate-left{
  color: white;
}
.fa-house{
  color: white;
}
.fa-arrow-right-to-bracket{
  color: white;
}
.fa-calendar{
  color: white;
}
.fa-folder-plus{
  color: white;
}
.fa-key{
  color: white;
}
.fa-users{
  color: white;
}
.fa-building{
  color: white;
}
.fa-file-invoice-dollar{
  color: white;
}
.fa-hand-holding-dollar{
  color: white;
}
.fa-think-peaks{
  color: white;
}
.fa-wave-square{
  color: white;
}
.fa-percent{
  color: white;
}
.fa-percentage{
  color: white;
}
.fa-wpforms{
  color: white;
}
.fa-newspaper{
  color: white;
}
.fa-calendar-check{
  color: white;
}
.fa-dollar-sign{
  color: white;
}
.fa-file-invoice-dollar{
  color: white;
}
.fa-file-lines{
  color: white;
}
.fa-bell{
  color: blue;
}
.fa-bell{
  color: black;
}

.fa-arrow-right-from-bracket
{
  color: white;
}

.fa-file-invoice-dollar{
  color: rgb(142, 162, 246);
  color: white;
  width: 100%;
  font-size: 600%;
  margin-top: 5%;
}

.fa-user{
  color: rgb(142, 162, 246);
  color: white;
  width: 100%;
  font-size: 600%;
  margin-top: 5%;

}

*/