* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}


.form-element {
    width: 100%;

}
.form-element label {
    display: block;
    font-size: 22px;
    margin-top: .5%;
    border-radius: 20px;
    color: BLACK;
    margin-left:10%;

}


.button:hover {
  background-color: #ff2c2c; /* Change to your desi#ff2c2c color */
}

.add-container label {
    text-align: left;
    font-size: 90%;
    font-weight: bold;
}
.adduser-container label {
  color:white;
}


.add-container button {

}

.addtopayroll button{
    
        position:absolute;
    font-weight:bold;
    width: 90%;
    margin-left: 3%;
    letter-spacing: .2px;
    border-radius: 10px;
    margin-top: -20px;
    font-size: 80%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
   
    height:27px;
}


.removetopayroll button{
    
        position:absolute;
    font-weight:bold;
    width: 73%;
    margin-left: 10%;
    letter-spacing: .2px;
    border-radius: 1px;
    margin-top: 0px;
    font-size: 80%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border-radius: 10px;
    color: white;
    cursor: pointer;
    border: none;
    height:25px;
}

.saveps2 button{
    
        position:absolute;
    font-weight:bold;
    width: 91%;
    margin-left: 1%;
    letter-spacing: 2px;
    border-radius: 8px;
    margin-top: 585px;
    font-size: 150%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
FONT-WEIGHT:BOLD;
    height:50px;
}
.saveps2 a{
    
        position:absolute;
    font-weight:bold;
    width: 91%;
    margin-left: 1%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 525px;
    font-size: 110%;
    padding: 4px 2px 4px 1px;
    background-color: LIGHTBLUE;
   
    border: none;
    color: BLACK;
    cursor: pointer;
text-align:center;
    height:40px;
    font-weight:bold;
}




.saveps button{
    
        position:absolute;
    font-weight:bold;
    width: 25%;
    margin-left: 16%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 300px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;

    height:60px;
}

input[type="button"].GoBackcancelps{
    
        position:absolute;
    font-weight:bold;
    width: 25%;
    margin-left: 56%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 300px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;

    height:60px;
}
.saves button{
    
        position:absolute;
    font-weight:bold;
    width: 15%;
    margin-left: 66%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 220px;
    font-size: 100%;
    padding: 15PX;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;

  
}


.cancels button{
    
        position:absolute;
    font-weight:bold;
    width: 15%;
    margin-left: 82%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 220px;
    font-size: 100%;
   padding: 15PX;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
   

}

.savees button{
    
        position:absolute;
    font-weight:bold;
    width: 15%;
    margin-left: 66%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 220px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    height:40px;
}


.canceles button{
    
        position:absolute;
    font-weight:bold;
    width: 15%;
    margin-left: 82%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 220px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    height:40px;
}


.savea button{
    
        position:absolute;
    font-weight:bold;
    width: 18%;
    margin-left: 28%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 25px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
    border: none;
    height:40px;
}


.cancela button{
    
        position:absolute;
    font-weight:bold;
    width: 18%;
    margin-left: 52%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 25px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
    border: none;
    height:40px;
}

.bsmall button{
    
        position:absolute;
    font-weight:bold;
    width: 6%;
    margin-LEFT:19%;
 
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top:400px;
    font-size: 80%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    height:30px;
    
}

.bsmall2 button{
    
        position:absolute;
    font-weight:bold;
    width: 30px;
    margin-LEFT:18%;
 
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top:465px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
  
    color: white;
    cursor: pointer;
    border: 1px solid black;
    height:30px;
     letter-spacing:0.1px;
}

.bsmall10 button{
  
    
        position: absolute;
     border: 0.5px solid black;
    display: block;
    width:8.5%;
    height: 50px;
    line-height: 16px;
    font-size: 70%;
  
    letter-spacing: .1px;
    margin-left:78%;
   
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.bsmall9 button{
  
    
        position: absolute;
   border: 0.5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:70%;
   
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.bsmall8 button{
  
    
        position: absolute;
    border: 0.5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:62%;
   
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.bsmall7 button{
  
    
        position: absolute;
   border: 0.5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:54%;
   
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:BOLD;
 border-radius: 1px;
 z-index:6;

}


.bsmall6 button{
  
    
        position: absolute;
    border: 0.5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:46%;
   
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:BOLD;
 border-radius: 1px;
 z-index:6;

}
.bsmall6disable button{
  
    
        position: absolute;
    border: 0.5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
   
    margin-left:46%;
    background-color: silver;
    color: grey;
    padding: .1%;
    outline: none;
cursor:default;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.bsmall10disable button{
  
    
        position: absolute;
   border: 0.5px solid black;
    display: block;
    width:8.5%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:78%;
   
    background-color: silver;
    color: grey;
    padding: .1%;
    outline: none;
    cursor: default;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.bsmall9disable button{
  
    
        position: absolute;
   border: 0.5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:70%;
   
    background-color: silver;
    color: grey;
    padding: .1%;
    outline: none;
    cursor: default;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.bsmall8disable button{
  
    
        position: absolute;
   border: 0.5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:62%;
   
    background-color: silver;
    color: grey;
    padding: .1%;
    outline: none;
    cursor: default;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.bsmall7disable button{
  
    
        position: absolute;
    border: .5px solid black;
    display: block;
    width:8%;
    height: 50px;
    line-height: 16px;
    font-size: 80%;
  
    letter-spacing: .1px;
    margin-left:54%;
   
    background-color: silver;
    color: grey;
    padding: .1%;
    outline: none;
    cursor: default;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:BOLD;
 border-radius: 1px;
 z-index:6;
 
 
}

.clearsearchbackup button:hover {
 background-color: white;
    
}

.bsmall2 :hover{
  background-color: lightgray;
  color:black;

}


input[type="button"].GoBackcancelps:hover{
  background-color: lightgray;
  color:black;

}

.saveps button:hover{
  background-color: lightgray;
  color:black;

}
.doc-controlpayrollstatus:hover{
  background-color: lightgray;
  color:black;

}

.payrollvenue input:hover{
  background-color: lightgray;
  color:black;

}

.dateclaim input:hover{
  background-color: lightgray;
  color:black;

}
.bsmall4 button:hover{
  background-color: lightgray;
  color:black;

}
.bsmall5 button:hover{
  background-color: lightgray;
  color:black;

}
.bsmall6 button:hover{
  background-color: lightgray;
  color:black;

}

.bsmall7 button:hover{
  background-color: lightgray;
  color:black;

}

.bsmall8 button:hover{
  background-color: lightgray;
  color:black;

}

.bsmall9 button:hover{
  background-color: lightgray;
  color:black;

}

.bsmall10 button:hover{
  background-color: lightgray;
  color:black;

}
.bsmall5disable,.bsmall6disable,.bsmall7disable,.bsmall8disable,.bsmall9disable,.bsmall10disable button: hover{
  background-color: silver;

}


.addtopayroll button:hover{
  background-color: silver;
color:black;
}

.savea button:hover{
  background-color: silver;
color:black;
}

.cancela button:hover{
  background-color: silver;
color:black;
}

.bsmall3 button:hover{
  background-color: silver;
color:black;
}

.clearsearchs button:hover{
  background-color: silver;
color:black;
}

.clearsearchr button:hover{
  background-color: silver;
color:black;
}
.saves button:hover{
  background-color: silver;
color:black;
}

.savep button:hover{
  background-color: silver;
color:black;
}

.savep0 button:hover{
  background-color: silver;
color:black;
}

.cancels button:hover{
  background-color: silver;
color:black;
}

.saveaddrecord button:hover{
  background-color: silver;
color:black;
}

.label labeltotal{
  
    
        position: absolute;
    
    display: block;
    width:16%;
    height: 150px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
  
    margin-left:25%;
    background-color: transparent;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 100px   ;
font-weight:bold;

 z-index:6;

}

.bsmalltotals button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 120px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:81%;
    background-color: blue;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmallylarchive button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:81%;
    background-color: blue;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmallylarchivee button{
  
    
        position: absolute;
     border:1px solid blue;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:81%;
    background-color: white;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}


.bsmalldistrictarchive button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:20%;
    background-color: blueviolet;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmalldistrictarchivee button{
  
    
        position: absolute;
     border:1px solid blueviolet;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:20%;
    background-color: white;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmalldistrictarchivee button:hover {
 background-color: lightgray;
    
}

.bsmalldistrictarchive button:hover {
 background-color: lightgray;
     color: black;
}


.bsmallschoolarchivee button:hover {
 background-color: lightgray;
    
}

.bsmallschoolarchive button:hover {
 background-color: lightgray;
     color: black;
}


.bsmallfinancialarchive button:hover {
 background-color: lightgray;
    
}

.bsmallfinancialarchivee button:hover {
 background-color: lightgray;
     color: black;
}


.bsmallbmarchive button:hover {
 background-color: lightgray;
    
}

.bsmallbmarchivee button:hover {
 background-color: lightgray;
     color: black;
}


.bsmallylarchive button:hover {
 background-color: lightgray;
    
}

.bsmallylarchivee button:hover {
 background-color: lightgray;
     color: black;
}



.bsmalltotala button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 120px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:20%;
    background-color: blueviolet;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}
.bsmalltotal button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:14%;
    height: 120px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:65%;
    background-color: #4A6FA5;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmallbmarchive button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:14%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:65%;
    background-color: #4A6FA5;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmallbmarchivee button{
  
    
        position: absolute;
     border:1px solid #4A6FA5;
    display: block;
    width:14%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:65%;
    background-color: white;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.titleindextotall input{
    position:absolute;
  font-size: 300%;
  color:white;
   MARGIN-TOP:125px;
   font-weight:bold;
   width:12%;
    border:none;
    background-color:transparent;
       margin-LEFT:20%;
  
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.titleindextotalpp input{
    position:absolute;
  font-size: 300%;
  color:white;
   MARGIN-TOP:125px;
   font-weight:bold;
   width:12%;
    border:none;
    background-color:transparent;
       margin-LEFT:35%;
  
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.titleindextotalpp2 input{
    position:absolute;
  font-size: 300%;
  color:white;
   MARGIN-TOP:125px;
   font-weight:bold;
   width:12%;
    border:none;
    background-color:transparent;
       margin-LEFT:50.5%;
  
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.titleindextotalaa input{
    position:absolute;
  font-size: 150%;
  color:white;
   MARGIN-TOP:135px;
   font-weight:bold;
   width:17%;
    border:none;
    background-color:transparent;
       margin-LEFT:63%;
  letter-spacing:0.1px;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.titleindextotalss input{
    position:absolute;
  font-size: 300%;
  color:white;
   MARGIN-TOP:125px;
   font-weight:bold;
   width:17%;
    border:none;
    background-color:transparent;
       margin-LEFT:79%;
  letter-spacing:0.1px;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.bsmallschoolarchive button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:35%;
    background-color: indigo;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmallschoolarchivee button{
  
    
        position: absolute;
     border:1px solid indigo;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:35%;
    background-color: white;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}
.bsmalltotalp button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 120px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:35%;
    background-color: indigo;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmalltotalp2 button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 120px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:50%;
    background-color: green;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmallfinancialarchive button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:50%;
    background-color: green;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmallfinancialarchivee button{
  
    
        position: absolute;
     border:1px solid green;
    display: block;
    width:13%;
    height: 60px;
    line-height: 16px;
    font-size: 100%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:50%;
    background-color: white;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 95px   ;
font-weight:bold;

 z-index:6;

}

.bsmall3 button{
  
    
        position: absolute;
     border:none;
    display: block;
    width:5%;
    height: 50px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
    border-radius:10px;
    margin-left:91%;
    background-color: #4A6FA5;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;

 z-index:6;

}
.bsmall4disabled button{
  
    
        position: absolute;
    border: 0.5px solid black;
    display: block;
    width:3.5%;
    height: 50px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
   
    margin-left:88.5%;
    background-color: silver;
    color: grey;
    padding: .1%;
    outline: none;
    cursor: default;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}
.bsmall4 button{
  
    
        position: absolute;
    border: 0.5px solid black;
    display: block;
    width:3.5%;
    height: 50px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
   
    margin-left:88.5%;
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}


.bsmall5disabled button{
  
    
        position: absolute;
    border: 0.5px solid black;
    display: block;
    width:3.5%;
    height: 50px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
   
    margin-left:92.5%;
    background-color: silver;
    color: grey;
    padding: .1%;
    outline: none;
    cursor: default;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}
.bsmall5 button{
  
    
        position: absolute;
    border: 0.5px solid black;
    display: block;
    width:3.5%;
    height: 50px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
   
    margin-left:92.5%;
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 36px   ;
font-weight:bold;
 border-radius: 1px;
 z-index:6;

}

.saveaddrecord button{
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 67%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 205px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
   
    height:40px;
}


.canceladdrecord button{
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 83%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 150px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    height:40px;
}

input[type="button"].GoBackds {
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 84%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 200px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
   
    height:40px;
}

input[type="button"].GoBackrc {
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 83%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 300px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
  
    height:40px;
}
input[type="button"].GoBack {
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 83%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 205px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
  
    height:40px;
}
input[type="button"].GoBack:hover {
 background-color: lightgray;
  color:black;
}
input[type="button"].GoBackubm3 {
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 53%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 250px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
  
    height:40px;
}
input[type="button"].GoBackubm3:hover {
 background-color: lightgray;
  color:black;
}
input[type="button"].GoBackindex {
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 82%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 220px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
   
    height:40px;
}
input[type="button"].GoBackindex:hover {
 background-color: lightgray;
  color:black;
}

input[type="button"].GoBackresult {
    
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 82%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 220px;
    font-size: 100%;
    padding: 15PX;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;

}
input[type="button"].GoBackresult:hover {
 background-color: lightgray;
  color:black;
}
.saveaddrecordpayroll button{
    
        position:absolute;
    font-weight:bold;
    width: 28%;
    margin-left: 20%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 250px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
    
    height:40px;
}


.canceladdrecordpayroll button{
    
        position:absolute;
    font-weight:bold;
    width: 28%;
    margin-left: 54%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 250px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    
    height:40px;
}










.savep button{
    
        position:absolute;
    font-weight:bold;
    width: 30%;
    margin-left: 10%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 345px;
    font-size: 90%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;

    height:50px;
}


.cancelp button{
    
        position:absolute;
    font-weight:bold;
    width: 30%;
    margin-left: 50%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 345px;
    font-size: 90%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
 
    height:50px;
}

.savep button:hover {
 background-color: lightgray;
  color:black;
}

.cancelp button:hover {
 background-color: lightgray;
  color:black;
}

.u-container button {
    font-weight:bold;
    width: 35%;
    margin-left: 33%;
    letter-spacing: 6px;
    border-radius: 8px;
    margin-top: 1%;
    font-size: 100%;
    padding:  1%;
    background-color: orange;
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
}

.addlabel {
    font-size: 120%;
    font-weight: bold;
    text-align: left;
    color:white;
  width: 70%;
    
}
.addlabel label{
 width: 70%;
 
    
}




.addlabelcpr2  {
    font-size: 120%;
    font-weight: bold;
    text-align: left;
    color:white;
  width: 70%;
    
}

.u-container button:hover {
 background-color: indigo;
  color:white;
}


.doc-control {
 

  
    width: 100%;
    letter-spacing: 1px;
    margin-bottom: .5rem;
    font-size: 75%;
    padding: .5%;
 background-color: orange;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  
}

.doc-controlsq {
 

  
    width: 100%;
    letter-spacing: 1px;
    margin-bottom: .5rem;
    font-size: 100%;
    padding: .5%;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  
}

.doc-controlaccounttype {
 

  
    width: 100%;
    letter-spacing: 1px;
    margin-bottom: .5rem;
    font-size: 100%;
    padding: .5%;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  
}

.doc-controlBM {
 

  
    width: 100%;
    letter-spacing: 1px;
    margin-bottom: .5rem;
    font-size: 100%;
    padding: .5%;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  
}

.doc-control2 {
 
    width: 84%;
    letter-spacing: 1px;
    margin-left: 1%;
    margin-bottom: 0%;
    font-size: 50%;
    padding: 2%;
    background-color: rgba(171, 201, 226, 0.733);
      border: 2px solid BLACK;
    color: black;
    cursor: pointer;
    border-radius: 5px;

  
}


.doc-control:hover {
 background-color: indigo;
 color: white;
}



.add-container input {
     font-size: 100%;
    width: 100%;
    padding: 10px;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: BLACK;
    letter-spacing: 1px;
}

.adduser-container input {
     font-size: 100%;
    width: 100%;
    padding: .5%;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: BLACK;
    letter-spacing: 1px;
}

.add-container input:hover{
   background-color: lightgray;
  color:black;

   
}
.addrecord-container doc {
    
    padding: 10px;
   
}
.addrecord-container input {
     font-size: 100%;
    width: 100%;
    padding: 10px;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: BLACK;
    letter-spacing: 1px;
     background-color: silver;
}


.deletescholar-container input {
     font-size: 100%;
    width: 100%;
    padding: 10px;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: BLACK;
    letter-spacing: 1px;
     background-color: silver;
}
.editscholar-container input {
     font-size: 100%;
    width: 100%;
    padding: 10px;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: BLACK;
    letter-spacing: 1px;
   
}


.addrecordpayroll-container input {
     font-size: 100%;
    width: 100%;
    padding: 10px;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: white;
    letter-spacing: 1px;
     background-color: #1C3163;
}

.addrecord0-container {

Border:2px solid black;
    width: 70%;
}


.addrecord2-container input {
     font-size: 100%;
    width: 100%;
    padding: .5%;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: BLACK;
    letter-spacing: 1px;
    
       
     background-color: white;
    
}

.addrecord2-container input:hover{
   background-color: transparent;
  color:black;

   
}

.removetopayroll0-container{
    position:absolute;
   
     width: 65%;
    margin-top: 380px;
    margin-left: 25%;
   background-color: #1C3163;
    border: 0px ;
    border-radius: 2px;
    height: 400px;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    
     color: BLACK;
   z-index:1;
   
   
   
     font-size: 120%;
   
}

.removetopayroll0-container input {
     font-size: 100%;
    width: 100%;
    padding: .5%;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 1px solid #000000;
    border-radius: 5px;
    color: BLACK;
    letter-spacing: 1px;
    
       
     background-color: white;
    
}

.removetopayroll0-container input:hover{
   background-color: white;
  color:black;

   
}

.u-container input {
     font-size: 100%;
    width: 100%;
    padding: 1%;
    margin-bottom: .5%;
    margin-top: .1%;
    border: 2px solid #000000;
    border-radius: 5px;
    color: white;
    letter-spacing: 1px;
 
    background-color:  rgba(0, 0, 0, 0.281);
}

.EDIT input:hover{
   background-color: indigo;
  color:white;

   
}
.EDIT input {
   background-color: white;
  color:BLACK;

   
}
.docno input:hover{
   
background-color:  rgba(0, 0, 0, 0.281);
       color: rgb(255, 255, 255);
}

.docno input {
    text-align: center;
    font-weight:bold;
    font-size: 100%;
    width: 99%;
    padding: 1%;
    margin-bottom: 0%;
    margin-left:.5%;

    background-color:  rgba(0, 0, 0, 0.281);
    border-radius: 2px;
    color: rgb(255, 255, 255);
}

.doccount input{
    
    font-weight:bold;
    font-size: 90%;
    width:76%;
    padding: .2%;
 margin-LEFT: 20%;
    margin-bottom:1%;
    border: 200px solid #000000;
    background-color:  rgba(0, 0, 0, 0.582);
    border-radius: 0px;
    color: rgb(255, 255, 255);
position: absolute;
}

.doccount button{
    font-weight:bold;
    width: 21.5%;
    letter-spacing: 2px;
    border-radius: 2px;
    margin-top: 3%;
    margin-left: 18%;
    margin-bottom: 0.02%;
   
    font-size: 100%;
    padding:  0.2%;
    background-color: blue;
    border: 2px solid black;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;


}

.doccount button:hover{
    
    background-color: indigo;
  color:white;
}

#formindex .doccount input:hover {
    background-color:  rgba(0, 0, 0, 0.582);
}


.wrapper2 button:hover {
    background-color: rgb(63, 151, 199);
}




.form-element input[type=text]{
     font-size: 80%;
    width: 75%;
    padding:12PX;

    border: 1px solid #000000;
    border-radius: 10px;
    color: black;
    letter-spacing: 1px;
     margin-top: 50PX;

}
.form-element input[type=password]{

    font-size: 80%;
    width: 75%;
    padding:12PX;

    border: 1px solid #000000;
    border-radius: 10px;
    color: black;
    letter-spacing: 1px;
     margin-top: 50PX;

}
.form-element label1{

    font-size: 100%;
    width: 75%;
    padding:10PX;

    border: none;
    border-radius: 10px;
    color: black;
    letter-spacing: .1px;
     margin-top: 100PX;
     margin-left: 1%;

}
.form-element label2 {
   font-size: 50%;
    width: 100%;
    padding:10PX;

    border: none;
    border-radius: 10px;
    color: grey;
    letter-spacing: .1px;
     margin-top: 50PX;
     margin-left: 1%;


}
.form-element label3 {
   font-size: 35%;
    width: 100%;
    padding:0PX;

    border: none;
    border-radius: 10px;
    color: grey;
    letter-spacing: .1px;
    
     margin-left: 1%;


}
.login-container2 label4{

   

}

.login-container2 label5{
flex-grow:10;

position:absolute;

    font-size: 85%;
    width: 75%;
    padding:1PX;

    border: none;
FONT-WEIGHT:BOLD;
    color: WHITE;
    letter-spacing: .5px;
     margin-left: 13%;
     margin-top: -50PX;
   display:block;

}


.login-container2 labelsin{
flex-grow:1;

position:absolute;

    font-size: 80%;
    width: 75%;
    padding:1PX;

    border: none;
FONT-WEIGHT:BOLD;
    color: yellow;
    letter-spacing: .5px;
     margin-left: -10%;
     margin-top: 150PX;
   display:block;
z-index:60;
   display:block;
   text-align:center;
}

labelsin





.fpw{
     margin-TOP:10px;
    font-size: 100%;
     color: #ff2c2c;
     
}

.fpw a{
     margin-TOP:2%;
    font-size: 50%;
     color: #ff2c2c;
     
     
}
#formlogin{
    margin:0;
    padding:0;
    box-sizing:border-box;
 background-image: url('../img/opglogin.png');                              
  background-size:100%;
    max-height:100%;
    background-repeat: no repeat;
    background-attachment:scroll; 
    background-position: auto;


}




#formsadmin{
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-image: url('../img/phosadmin.png');
    background-size:100%;
    max-height:100%;
    background-repeat: no repeat;
    background-attachment:scroll; 
    background-position: auto;

}
#formindex{
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-image: url('../img/opglogin.png');
    background-size:100%;
    max-height:100%;
    background-repeat: no repeat;
    background-attachment:scroll; 
    background-position: auto;

}

#formresult{
    margin:0;
    padding:0;
    box-sizing:border-box;
     background-image: url('../img/sjdh.png');
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
}

#formadd{
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-image: url('../img/opglogin.png');
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
    
}

#formaddd{
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-image: url('../img/sjdh.png');
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
    
}

#formtutor{
    margin:0;
    padding:0;
    box-sizing:border-box;
    background-image: url('../img/sjdh.png');
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
    
}

#formsoftcopy{
    margin:0;
    padding:0;
    box-sizing:border-box;
       background-image: url('../img/sjdhh.png');
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
    
    }
    
    
.dataentry label{
    background-color: blue;
 
   padding: 0% 96% 1% 0%;
margin-left:-1.5%;
   margin-top:1.5%;
}

.printtitle label{
    background-color: blue;
 
   padding: 0% 96% 1% 0%;
margin-left:-1.5%;
   margin-top:1.5%;
}


.lastname input{
    position:absolute;
    width:30%;
    margin-top:0px;
}

.sn input{
    position:absolute;
    width:10%;
    margin-top:-50px;
    margin-left:15%;
    background-color:orange;
}

.lastnameaddrecord input{
    position:absolute;
    width:30%;
    margin-top:0px;
}

.lastnameaddrecord input:hover{
   background-color:lightgray;
}

.firstnameaddrecord input:hover{
   background-color:lightgray;
}

.middleinitialaddrecord input:hover{
   background-color:lightgray;
}
.extaddrecord input:hover{
   background-color:lightgray;
}
.brgyaddrecord input:hover{
   background-color:lightgray;
}
.cpaddrecord input:hover{
   background-color:lightgray;
}
.ea input:hover{
   background-color:lightgray;
}
.bday input:hover{
   background-color:lightgray;
}


.fatheraddrecord input:hover{
   background-color:lightgray;
}

.motheraddrecord input:hover{
   background-color:lightgray;
}
.scholarshipaddrecord input:hover{
   background-color:lightgray;
}
.yearawardaddrecord input:hover{
   background-color:lightgray;
}
.remarkaddrecord input:hover{
   background-color:lightgray;
}
































.Student_IDaddrecord input{
    position:absolute;
    width:30%;
    margin-top:0px;
}
.lastnameaddrecorpayroll input{
    position:absolute;
    width:30%;
    margin-top:0px;
}

.lastnameaddrecordpayroll input{
    position:absolute;
    width:30%;
    margin-top:0px;

}

.doc-controlRecommendationaddrecord {
       position:absolute;
    width:20%;
    margin-top:-30px;
margin-left:600px;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  visibility:hidden;
}
.recommendationaddrecord input {
       position:absolute;
    width:20%;
    margin-top:-23px;
  margin-LEFT:110px;
     font-size:100%;
   padding:10px;
 background-color: orange;
    border: none;
      color: black;
   
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.recommendationaddrecord input:hover {
background-color: orange;
}


.schoolyearaddrecordpayroll2 input{
       position:absolute;
    width:20%;
    margin-top:150px;
  
     font-size:100%;
   padding:10px;

    border: none;
   
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.doc-controlRecommendationaddrecord:hover {
background-color: lightgray;
}







.doc-controlschoolyearaddrecord{
    position:absolute;
    width:12%;
    margin-top:30px;
    margin-left:22%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.schoolyearaddrecord input{
    position:absolute;
    width:12%;
    margin-top:30px;
    margin-left:21%;
     font-size:100%;
   padding:.5%;
 background-color: orange;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}
.schoolyearaddrecordpayroll input{
    position:absolute;
    width:12%;
    margin-top:150px;
    margin-left:22%;
     font-size:100%;
   padding: 10px;

    border: none;
    
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlschoolyearaddrecord:hover {
background-color: lightgray;
}

.doc-controlsemesteraddrecord1:hover {
background-color: lightgray;
}

.doc-controlsemesteraddrecord1{
      position:absolute;
    width:12%;
    margin-top:30px;
    margin-left:35%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlsemesteraddrecord{
      position:absolute;
    width:12%;
    margin-top:40px;
    margin-left:34%;
     font-size:100%;
   height:35px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}
.doc-controlschooladdrecordpayroll{
   position:absolute;
    width:50%;
    margin-top:147px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}


.brgyschool input{
   position:absolute;
    width:14%;
    margin-top:30px;
    margin-left:83%;
     font-size:100%;
    padding :10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}

.brgyschool input:hover{
  
 background-color: lightgray;
  
}










.semesteraddrecord input{
      position:absolute;
    width:12%;
    margin-top:30px;
    margin-left:34%;
     font-size:100%;
   padding:.5%;
 background-color: orange;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.semesteraddrecordpayroll input{
      position:absolute;
    width:12%;
    margin-top:150px;
    margin-left:36%;
     font-size:100%;
   padding:10px;

    border: none;
 
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.doc-controlsemesteraddrecord:hover {
background-color: lightgray;
}




.doc-controlschooladdrecord{
      position:absolute;
    width:49%;
    margin-top:30px;
    margin-left:48%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}



.schooladdrecordpayroll input{
      position:absolute;
    width:35%;
     margin-top:147px;
    margin-left:50%;
     font-size:100%;
   padding:10px;

    border: none;
   
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlschooladdrecord:hover {
background-color: lightgray;
}





.doc-controlyearleveladdrecord{
      position:absolute;
    width:15%;
    margin-top:89px;
 margin-left:0%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.yearleveladdrecordpayroll input{
      position:absolute;
    width:10%;
    margin-top:150px;
      margin-left:87%;
     font-size:100%;
   padding:10px;

    border: none;
    
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlyearleveladdrecord:hover {
background-color: lightgray;
}




.courseaddrecord input{
      position:absolute;
    width:68%;
margin-left:16%;
    margin-top:90px;
       
     font-size:100%;
   padding:10px;

    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.courseaddrecordpayroll input{
      position:absolute;
    width:46%;

    margin-top:200px;
       
     font-size:100%;
   padding:10px;

    border: none;
 
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}



.courseaddrecord input:hover {
background-color: lightgray;
}

.amountaddrecord input{
      position:absolute;
    width:11.5%;
    margin-top:90px;
     margin-left:55%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlamount2{
      position:absolute;
    width:11%;
    margin-top:90px;
     margin-left:55%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlclassificationaddrecord:hover {
    background-color: lightgray;
}

.doc-controlclassificationaddrecords:hover {
    background-color: lightgray;
}
.doc-controlclassificationaddrecord{
      position:absolute;
    width:21%;
   margin-top:30px;

     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlclassificationaddrecords{
      position:absolute;
    width:25%;
   margin-top:-20px;
margin-left:375px;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.classificationaddrecordpayroll input{
      position:absolute;
    width:18%;
    margin-top:200px;
     margin-left:58%;
     font-size:100%;
   padding:10px;

    border: none;
  
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.doc-controlclassificationaddrecord:hover {
background-color: lightgray;
}








.amountaddrecordpayroll input{
      position:absolute;
    width:8%;
    margin-top:200px;
    margin-left:48%;
     font-size:100%;
   padding:10px;
 background-color: #1C3163;
    border: none;
   
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  cursor:default;
}
.amountaddrecord input:hover {
background-color: silver;
}





.doc-controlstatusaddrecord{
      position:absolute;
    width:12%;
    margin-top:90px;
    margin-left:85%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.statusaddrecordpayroll input{
      position:absolute;
    width:10%;
    margin-top:200px;
    margin-left:67%;
     font-size:100%;
   padding:.5%;

    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}






.doc-controlstatusaddrecord:hover {
background-color: lightgray;
}



.rc input{
      position:absolute;
    width:97%;
    margin-top:220px;
    margin-left:0%;
     font-size:110%;
   padding:20px;
background-color: lightgreen;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.rc input:hover {
background-color: lightgray;
}

.remarkaddrecord2 input:hover {
background-color: lightgray;
}

.remarkaddrecord2 input{
      position:absolute;
    width:97%;
    margin-top:150px;
    margin-left:0%;
     font-size:100%;
   padding:10px;

    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.remarkaddrecord2 input:hover {
background-color: lightgray;
}
.remarkaddrecord2payroll input{
      position:absolute;
    width:19%;
    margin-top:200px;
    margin-left:78%;
     font-size:100%;
   padding:10px;

    border: none;
     
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.remarkaddrecord input{
      position:absolute;
    width:20%;
    margin-top:30px;
    margin-left:45%;
     font-size:100%;
   padding:.5%;

    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.firstname input{
    position:absolute;
    width:30%;
    margin-top:0px;
    margin-left:31%;
}

.firstnameaddrecord input{
    position:absolute;
    width:30%;
    margin-top:0px;
    margin-left:31%;
}

.firstnameaddrecordpayroll input{
    position:absolute;
    width:30%;
    margin-top:0px;
    margin-left:31%;
}
.middleinitial input{
    position:absolute;
    width:26%;
    margin-top:0px;
    margin-left:62%;
}

.middleinitialaddrecord input{
    position:absolute;
    width:26%;
    margin-top:0px;
    margin-left:62%;
}

.middleinitialaddrecordpayroll input{
    position:absolute;
    width:26%;
    margin-top:0px;
    margin-left:62%;
}

.ext input{
    position:absolute;
    width:8%;
    margin-top:0px;
    margin-left:89%;
}

.extaddrecord input{
    position:absolute;
    width:8%;
    margin-top:0px;
    margin-left:89%;
}



.extaddrecordpayroll input{
    position:absolute;
    width:8%;
    margin-top:0px;
    margin-left:89%;
}


.doc-controlbrgy {
     position:absolute;
    width:18%;
    margin-top:50px;
    margin-left:29%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}





.doc-controlbrgyaddrecord {
  
    
      position:absolute;
    width:18%;
    margin-top:50px;
    margin-left:0%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   
}
.brgyaddrecord input{
   position:absolute;
    width:18%;
    margin-top:50px;
   
}


.brgyaddrecordpayroll input{
    position:absolute;
    width:18%;
    margin-top:50px;
   
   
}


.doc-controlmun{
    position:absolute;
    width:28%;
    margin-top:50px;
    margin-left:0%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}





.doc-controlmunschool{
       position:absolute;
    width:21%;
    margin-top:89px;
   
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}

.doc-controlbrgyschool{
       position:absolute;
    width:14%;
    margin-top:30px;
    margin-left:83%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}














.munaddrecord input{
    position:absolute;
    width:28%;
    margin-top:50px;
    margin-left:19%;
     font-size:100%;
   padding:10px;

    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.munaddrecordpayroll input{
    position:absolute;
   width:28%;
    margin-top:50px;
    margin-left:19%;
     font-size:100%;
   padding:10px;

    border: none;
   
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.doc-controlmun:hover {
background-color: lightgray;
}

.doc-controlpsyindex:hover {
background-color: lightgray;
}
.doc-controlpsemindex:hover {
background-color: lightgray;
}

.clearsearchindex button:hover {
background-color: lightgray;
}

.clearfilter button:hover {
background-color: lightgray;
}

.clearfilter2 button:hover {
background-color: lightgray;
}
.archivedl button:hover {
background-color: lightgray;
}

.clearsearcharchive2 button:hover {
background-color: lightgray;
}

.doc-controlstatarchive:hover {
background-color: lightgray;
}

.doc-controlpstatus:hover {
background-color: lightgray;
}
.doc-controlpsy:hover {
background-color: lightgray;
}
.doc-controlpsem:hover {
background-color: lightgray;
}


.pclass input{
    position:absolute;
    width:50%;
    margin-top:10px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}

.ptype input{
    position:absolute;
    width:50%;
    margin-top:56px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}
.doc-controlpclass{
    position:absolute;
    width:50%;
    margin-top:10px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}

.doc-controlptype{
    position:absolute;
    width:50%;
    margin-top:56px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}
.doc-controlpstatus{
    position:absolute;
    width:50%;
    margin-top:101px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}
.payrollstat-container2 labelcd2{
     position:absolute;
     margin-top:330px;
    margin-left:2%;
     font-size:100%;
    
}

.payrollstat-container2 labelrc2{
     position:absolute;
     margin-top:410px;
    margin-left:2%;
     font-size:100%;
    
}

.payrollstat-container2 labelLINK{
     position:absolute;
     margin-top:505px;
    margin-left:2%;
     font-size:90%;
    
}

.payrollstat-container2 labelsf{
     position:absolute;
     margin-top:10px;
    margin-left:2%;
     font-size:100%;
    
}

.payrollstat-container2 labelpc{
     position:absolute;
     margin-top:90px;
    margin-left:2%;
     font-size:100%;
    
}

.payrollstat-container2 labelv2{
     position:absolute;
     margin-top:250px;
    margin-left:2%;
     font-size:100%;
    
}

.payrollstat-container2 labelps2{
     position:absolute;
     margin-top:170px;
    margin-left:2%;
     font-size:100%;
    
}

.payrollstatus2c input{
      position:absolute;
    width:90%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: red;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.payrollstatus22 input{
      position:absolute;
    width:90%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.payrollstatus2rr input{
    position:absolute;
    width:90%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: green;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}

.payrollstatus2r input{
    position:absolute;
    width:90%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: lightgreen;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}
.payrollvenue2 input{
    position:absolute;
    width:90%;
    margin-top:270px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}

.payrolls2 input{
    position:absolute;
    width:90%;
    margin-top:30px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: orange;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.payrollcarrier input{
    position:absolute;
    width:90%;
    margin-top:110px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: orange;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}

.doc-controlpayrollstatus{
    position:absolute;
    width:60%;
    margin-top:135px;
    margin-left:17.5%;
     font-size:120%;
  padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}
.payrollvenue input{
    position:absolute;
  width:60%;
    margin-top:185px;
    margin-left:17.5%;
     font-size:120%;
  padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.dateclaim input{
    position:absolute;
  width:60%;
    margin-top:235px;
    margin-left:17.5%;
     font-size:120%;
  padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}

.dateclaim2 input{
    position:absolute;
    width:90%;
    margin-top:350px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}

.rc2 input{
    position:absolute;
    width:90%;
    margin-top:430px;
    margin-left:2%;
     font-size:120%;
    height:50px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.doc-controlpsy{
    position:absolute;
    width:50%;
    margin-top:192px;
    margin-left:22%;
     font-size:100%;
   height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
   
}
.archivedl button{
    position: absolute;
    border:1px solid black;
    display: block;
     width: 2.5%;
    height: 45px;
    line-height: 16px;
    font-size: 100%;
  border-radius:5px;
    letter-spacing: .1px;
    
    margin-left:47%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 30px   ;
font-weight:bold;
  z-index:20;
}


.clearfilter button{
    position: absolute;
    border:1px solid black;
    display: block;
     width: 2.5%;
    height: 45px;
    line-height: 16px;
    font-size: 100%;
  border-radius:5px;
    letter-spacing: .1px;
    
    margin-left:49%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 30px   ;
font-weight:bold;
  z-index:20;
}


.clearfilter2 button{
    position: absolute;
    border:1px solid black;
    display: block;
     width: 2.5%;
    height: 45px;
    line-height: 16px;
    font-size: 100%;
  border-radius:5px;
    letter-spacing: .1px;
    
    margin-left:44%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 30px   ;
font-weight:bold;
  z-index:20;
}

.doc-controlpsyindex{
    position:absolute;
    width:12%;
    margin-top:30px;
     margin-left: 20%;
     font-size:110%;
   height:45px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
   z-index:30;
   font-weight:bold;
}


.doc-controlstatarchive{
    position:absolute;
    width:20%;
    margin-top:30px;
     margin-left: 20%;
     font-size:110%;
   height:45px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
   z-index:30;
   font-weight:bold;
}
.doc-controlpsemindex{
    position:absolute;
    width:12%;
    margin-top:30px;
     margin-left: 33%;
     font-size:110%;
   height:45px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
      z-index:30;
       font-weight:bold;
}

.doc-controlpsyin{
    position:absolute;
    width:78%;
    margin-top:160px;
     margin-left: -38%;
     font-size:70%;
   height:35px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}

.doc-controlpsemin{
    position:absolute;
    width:78%;
    margin-top:202px;
     margin-left: -38%;
     font-size:70%;
   height:35px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}
.doc-controlpsem{
    position:absolute;
    width:50%;
    margin-top:238px;
    margin-left:22%;
     font-size:100%;
  height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}


.savep0 button{
     position:absolute;
    font-weight:bold;
    width: 13%;
    margin-left: 59%;
    letter-spacing: 1px;
    border-radius: 5px;
    margin-top: 285px;
    font-size: 90%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
  
    height:40px;
    z-index : 7;
}


.savep0 button:hover {
background-color: lightgray;
 color: black;
}
.doc-controlpclass:hover {
    background-color: lightgray;

}
.doc-controlptype:hover {
    background-color: lightgray;

}
.doc-controlschooladdrecordpayroll:hover {
    background-color: lightgray;

}
.savep input{
    position:absolute;
    width:50%;
    margin-top:285px;
    margin-left:22%;
     font-size:100%;
  height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: default;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}

.pnps input{
    position:absolute;
    width:60%;
    margin-top:35px;
    margin-left:17.5%;
     font-size:120%;
  padding:10px;
 background-color: orange;
    border: none;
      color: black;
    cursor: default;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}
.pnps2 input{
    position:absolute;
    width:60%;
    margin-top:85px;
   margin-left:17.5%;
     font-size:120%;
  padding:10px;
 background-color: orange;
    border: none;
      color: black;
    cursor: default;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}
.status2p input{
    position:absolute;
    width:50%;
      margin-top:101px;
    margin-left:22%;
     font-size:100%;
   height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}


.psyp input{
    position:absolute;
    width:50%;
  margin-top:192px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}


.Schooladdrecordp input{
    position:absolute;
    width:50%;
      margin-top:147px;
    margin-left:22%;
     font-size:100%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}
.psem input{
    position:absolute;
    width:50%;
  margin-top:238px;
    margin-left:22%;
     font-size:100%;
   height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}
.doc-controlmun:hover {
background-color: lightgray;
}

.clearsearchlogout button:hover {
 background-color: #00BFFF80;
}

.saveaddrecordpayroll button:hover {
background-color: lightgray;
color:black;
}
.doc-controlstat:hover {
background-color: lightgray;
}

.doc-controlsex:hover {
background-color: lightgray;
}

.cp input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:48%;
}

.ea input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:65.5%;
}
.eadel input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:65.5%;
    background-color:silver;
}
.eaaddrecordpayroll input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:65.5%;
}

.eaaddrecord input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:65.5%;
}
.eadis input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:65.5%;
    background-color: silver;
}

.cpaddrecord input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:48%;
    
}


.cpaddrecordpayroll input{
    position:absolute;
    width:17%;
    margin-top:50px;
    margin-left:48%;
    
}


.doc-controlstat{
    position:absolute;
    width:14%;
    margin-top:50px;
    margin-left:83%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}



.stataddrecord input{
    position:absolute;
    width:14%;
    margin-top:50px;
    margin-left:83%;
     font-size:100%;
   padding:10px;

    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}


.stataddrecordpayroll input{
    position:absolute;
    width:14%;
    margin-top:50px;
    margin-left:83%;
     font-size:100%;
   padding:10px;

    border: none;
     
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
}
.bday input{
    position:absolute;
    width:29%;
    margin-top:100px;
    margin-left:0%;
}

.bdayaddrecord input{
    position:absolute;
    width:20%;
    margin-top:100px;
    margin-left:0%;
}


.bdayaddrecordpayroll input{
    position:absolute;
    width:20%;
    margin-top:100px;
    margin-left:0%;
}
.bday button{
    position:absolute;
    width:20%;
    margin-top:100px;
    margin-left:31%;
}

.bday p{
    position:absolute;
    width:20%;
    margin-top:100px;
    margin-left:31%;
}

.age input{
    position:absolute;
    width:8%;
    margin-top:100px;
    margin-left:21%;
}

.ageaddrecord input{
    position:absolute;
    width:8%;
    margin-top:100px;
    margin-left:21%;
}


.ageaddrecordpayroll input{
    position:absolute;
    width:8%;
    margin-top:100px;
    margin-left:21%;
}

.doc-controlsex{
     position:absolute;
    width:10%;
    margin-top:100px;
    margin-left:31%;
     font-size:100%;
   padding:10px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  
   
}
.sexaddrecord input{
     position:absolute;
    width:10%;
    margin-top:100px;
    margin-left:31%;
     font-size:100%;
   padding:10px;

    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  
   
}

.sexaddrecordpayroll input{
     position:absolute;
    width:10%;
    margin-top:100px;
    margin-left:31%;
     font-size:100%;
   padding:10px;

    border: none;
  
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  
   
}


.father input{
    position:absolute;
    width:27%;
    margin-top:100px;
    margin-left:42%;
}
.fatheraddrecord input{
    position:absolute;
    width:27%;
    margin-top:100px;
    margin-left:42%;
}

.fatheraddrecordpayroll input{
    position:absolute;
    width:27%;
    margin-top:100px;
    margin-left:42%;
}
.mother input{
    position:absolute;
    width:27%;
    margin-top:100px;
    margin-left:70%;
}


.motheraddrecord input{
    position:absolute;
    width:27%;
    margin-top:100px;
    margin-left:70%;
}

.motheraddrecordpayroll input{
    position:absolute;
    width:27%;
    margin-top:100px;
    margin-left:70%;
}
.scholarship input{
    position:absolute;
    width:17%;
    margin-top:150px;
    margin-left:49%;
}


.foaddrecord input{
    position:absolute;
    width:24%;
    margin-top:150px;
    margin-left:0%;
      padding:10px;
}
.moaddrecord input{
    position:absolute;
    width:23%;
    margin-top:150px;
    margin-left:25%;
    padding:10px;
}


.fo input{
    position:absolute;
    width:24%;
    margin-top:150px;
    margin-left:0%;
}
.mo input{
    position:absolute;
    width:23%;
    margin-top:150px;
    margin-left:25%;
}
.scholarshipaddrecord input{
   position:absolute;
    width:17%;
    margin-top:150px;
    margin-left:49%;
    padding:10px;
}

.scholarshipaddrecordpayroll input{
    position:absolute;
    width:30%;
    margin-top:250px;
    margin-left:0%;
    visibility:hidden;
}

.yearaward input{
    position:absolute;
    width:14%;
    margin-top:150px;
    margin-left:67%;
}


.yearawardaddrecord input{
    position:absolute;
    width:14%;
    margin-top:150px;
    margin-left:67%;
    padding:10px;
}

.yearawardaddrecordpayroll input{
    position:absolute;
    width:15%;
    margin-top:250px;
    margin-left:44%;
     visibility:hidden;
}
.remark input{
    position:absolute;
    width:15%;
    margin-top:150px;
    margin-left:82%;
}
.remarkaddrecord input{
   position:absolute;
    width:15%;
    margin-top:150px;
    margin-left:82%;
    padding:10px;
}

.remarkaddrecordpayroll input{
    position:absolute;
    width:35%;
    margin-top:250px;
    margin-left:62%;
     visibility:hidden;
}



.add-container{
    position:absolute;
   
     width: 65%;
    margin-top: 20px;
    margin-left: 25%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height: 380px;
    padding: 1% ;

    
    COLOR: BLACK;
   
}

.adduser-container{
    position:absolute;
   
     width: 33%;
    margin-top: 20px;
    margin-left: 40%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height: 650px;
    padding: 1% ;
  
    
    COLOR: white;
   
}

.addrecord-container{
    position:absolute;
   
     width: 65%;
    margin-top: 40px;
    margin-left: 25%;
    background-color: grey;

    border-radius: 20px;
    height: 250px;
    padding: 1% ;

    
    COLOR: white;
   
}


.deletescholar-container{
    position:absolute;
   
     width: 65%;
    margin-top: 40px;
    margin-left: 25%;
  background-color: #79afc7;
    border: 2px solid BLUE;
    border-radius: 2px;
    height: 350px;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    
    COLOR: white;
   
}

.editscholar-container{
    position:absolute;
   
     width: 65%;
    margin-top: 40px;
    margin-left: 25%;
    background-color: #1C3163;
    border: 2px solid BLUE;
    border-radius: 2px;
    height: 360px;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    
    COLOR: white;
   
}

.addpayroll-container{
  position:absolute;
   
     width: 30%;
    margin-top: 30px;
    margin-left: 43%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height: 500px;
    padding: 1% ;
   
    
    COLOR: white;
}


.rd input{
    visibility:hidden;
}
.payrollstat-container{
  position:absolute;
   
     width: 26%;
    margin-top: 100px;
    margin-left: 40%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height:450px;
    padding: 1% ;
   
    
    COLOR: white;
}
.payrollstat-container2{
  position:absolute;
   
     width: 25%;
    margin-top: 100px;
    margin-left: 35%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height:680px;
    padding: 1% ;
   
    
    COLOR: white;
    
    z-index:30;
}

.addpayroll2-container{
  position:absolute;
   
     width: 30%;
    margin-top: 540px;
    margin-left: 43%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height: 200px;
    padding: 1% ;
   
    
    COLOR: white;
}
.addrecordpayroll-container{
  position:absolute;
   
     width: 65%;
    margin-top: 40px;
    margin-left: 25%;
    background-color: grey;

    border-radius: 20px;
    height: 400px;
    padding: 1% ;

    
    COLOR: white;
}



.addrecord2-container{
    position:absolute;
   
     width: 65%;
    margin-top: 380px;
    margin-left: 25%;
   background-color:#1C3163;

    border-radius: 20px;
    height: 300px;
    padding: 1% ;

    
     color: BLACK;
   z-index:1;
   
   
   
     font-size: 100%;
   
}


.addrecord12-container{
    position:absolute;
   
     width: 65%;
    margin-top: 400px;
    margin-left: 25%;
    background-color: #79afc7;
    border: 2px solid BLUE;
    border-radius: 2px;
    height: 250px;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    
    COLOR: white;
   z-index:1;
}


.addrecord1-container{
    position:absolute;
   
    width: 65%;
    margin-top: 430px;
    margin-left: 25%;
    background-color: #79afc7;
    border: 2px solid BLUE;
    border-radius: 2px;
    height: 270px;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    
    COLOR: white;
   z-index:1;
}



.addrecord2-container label{
    position:absolute;
   
  margin-top: 10px;
    
    COLOR: white;
   
}






.u-container{
    font-weight:bold;
     width: 33%;
    margin-top: 8%;
    margin-left: 32%;
    background-color: transparent;
    border: 2px rgba(241, 214, 163, 0.979) solid;
    border-radius: 2px;
    height: 50%;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    font-size: 100%;
    COLOR: BLACK;
   
}

.EDIT{
  width: 100%;
    letter-spacing: 1px;

    font-size: 100%;
    padding: 1%;
 background-color: rgba(241, 214, 163, 0.979);
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 2px solid rgb(0, 0, 0);
   
}


.welcome{
position:absolute;
    padding: 8px 0px ;
    font-size:70%;
margin-LEFT:0%;
color:white;
height:30px;
    margin-top:275PX;
LETTER-spacing:.1px;
   font-weight:bold;
  background-color:#74AC56;
  width:16.2%;
   transition: .1s;
   
}

.time{
position:absolute;
    
    font-size: 120%;

color:white;

    margin-top:220px;
   color:yellow;
   z-index:0;
        margin-LEFT:0.5%;

  padding: 4px 0px ;
   width:16.5%;
     z-index:20;
}
.timein{
position:absolute;
    
    font-size: 70%;

color:black;

    margin-top:270px;
   color:white;
   z-index:20;
      border-radius:20px;
background-color:darkblue;
  padding: 14px 0px ;
   width:85%;
  display: block; /* Images are inline by default, must be block to use auto margins */
  margin-left: 5%;

}
.timein p2{
   color:GOLD; 
    font-size: 120%;
}


#passworduser{
    font-weight:bold;
    font-size: 100%;
    margin-top: 0%;
    margin-bottom: 0%;
}
.showpassword_boxuser{
    display: flex;
    margin-top: 2%;
    margin-left: -97%;
}
.showpassword_boxuser p{
   
    margin-left: -49%;
    font-size:100%;
     margin-top: 0%;
     color:white;
}
.box input[type="checkbox"]{
    width: 16px;
    
}







#password1{
    font-weight:bold;
    font-size: 100%;
    margin-top: 10%;
    margin-bottom: 10%;
}
.showpassword_box1{
    display: flex;
    margin-top: 6%;
    margin-left: 16%;
}
.showpassword_box1 p{
    margin-left: 2%;
    font-size:50%;
     margin-top: 1%;
     color:black;
}
.box input[type="checkbox"]{
    width: 16px;
    
}

#password2{
    font-weight:bold;
    font-size: 100%;
    margin-top: 10%;
    margin-bottom: 0%;
}
.showpassword_box2{
    display: flex;
    margin-top: 10%;
    margin-left: -80%;
}
.showpassword_box2 p{
    margin-left: -40%;
    font-size:100%;
     margin-top: 0%;
}
.box input[type="checkbox"]{
    width: 16px;
    
}
.upload{

   
    width: 35%;
   
    margin-left: 30%;
    background-color: transparent;
    border: 0px solid black;
    border-radius: 20px;
    padding: .1rem ;
     margin-top: 0%;
   
    

        }



.uploaddddd{

    margin: 0 auto;
    width: 40%;

    margin-left:0%;
    background-color: transparent;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 2px;
    
    padding: 1rem ;
font-weight:bold;
    font-size: 50px; 
    position: absolute;
    margin-top: 0%;
    
    overflow-y: scroll;
    max-height: 100%;
    text-align: center;
    
}






.uploaddd button{
    width: 39%;
    letter-spacing: 1px;
    margin-left: 30%;
    border-radius: 10px;
    margin-top:7%;
    font-size: 100%;
    padding:  .5%;
      background-color: #fcd071fd;
    color: black;
    border: none;

    cursor: pointer;
    top:50px;

    font-weight:bold;
    border: 2px solid rgb(0, 0, 0);
}
.uploaddd button:hover {
 background-color: indigo;
  color:white;
}

.upload label{
    font-weight:bold;
    width: 50%;
    letter-spacing: 1px;
    border-radius: 10px;
    margin-left: 25%;
    margin-top: -5rem;
    font-size: 60%;
    padding:  .2%;
    background-color: rgb(150, 199, 188);
    border: none;
    color: rgb(0, 0, 0);
    cursor: pointer;
    border: 2px solid rgb(0, 0, 0);
    
}

.upload img {
    height: 700px;
    width: 300px;
   
}

.upload iframe {
    height: 600px;
    width:1000px;
   
}
.softcopy-container{

   font-weight:bold;
     width: 50%;
    margin-top: 2%;
    margin-left: 25%;
     background-color: transparent;
    border: 2px solid rgba(212, 136, 22, 0.836);
    border-radius: 2px;
    height: auto;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    font-size: 100%;
    COLOR: BLACK;
        
}


.softcopy-containerr{

    margin: 0 auto;
    width: 4%;
    
    margin-left: 30%;
     background-color: black;
    border: 0.1px solid rgb(128, 128, 128);
    border-radius: 2px;
    
    padding: 1rem ;
    box-shadow: 5px 6px 18px #888;
    font-size: 20px;
   
        
}

.softcopy-container button{
    
   font-weight:bold;
    width: 99%;
    margin-left: 1%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 1%;
    font-size: 100%;
    padding:  1%;
    background-color: #fcd071fd;
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
}
.softcopy-container button:hover {
   background-color: indigo;
  color:white;
}
.login-container h2{
    text-align: center;
    font-size: 50px;
    

}
 .delete button{
    width: 100%;
    letter-spacing: 6px;
    border-radius: 20px;
    margin-top: .2rem;
    margin-bottom:-30%;
    font-size: 130%;
    padding:  0.1rem;
    background-color: rgb(218, 8, 8);
    border: none;
    color: white;
    cursor: pointer;
    border: 2px solid rgb(0, 0, 0);
    
}

.delete button:hover{
    
    background-color: rgba(191, 194, 0, 0.767);
   
}




.clearsearchprint button {
    position: absolute;

    display: block;
 
   
    line-height: 16px;
       font-size: 85%;
    border-radius: 10px;
 

    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
   
  height: 5%;
  
   
    
    outline: none;
   
    transition: .1s;

   
    cursor: pointer;
    width:11%;


   top:53%;
    margin-top:30px;
    
    margin-right: 88%;
    margin-bottom: 0.07%;
    min-width: 20px;
 
    padding: 1%;
   


  text-align: left  ;
font-weight :bold;
 border: 2px solid black ;
  
   background-color: #fcd071fd;
    color: black;
  
 visibility:hidden;
  }

.clearsearchprint2 button {
    position: absolute;

    display: block;
 
   
    line-height: 16px;
       font-size: 85%;
    border-radius: 10px;
 
   
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
   
  height: 5%;
  
   
    
    outline: none;
   
    transition: .1s;

   
   
    width:11%;


top:53%;
    margin-top:30px;
    margin-right: 88%;
    margin-bottom: 0.07%;
    min-width: 20px;
 
      background-color: rgb(211,211,211);
    color:gray;
    padding: 1%;
   


  text-align: left  ;
font-weight :bold;
 border:1px SOLID BLACK;
  
   



  
  }
  
  #formindex .clearsearchprint button:hover {
    background-color: indigo;
  color:white;
}

  #formindex .clearsearchprint2 button:hover {
 background-color: rgb(211,211,211);
    color:gray;
}

.clearsearchbackup button {
  position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:660px;
    background-color: transparent;
    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
     border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
    
    
}

 .clearsearchbackupdd button:hover {
 background-color: none;
    
}

.clearsearchbackupdd button {
  position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:660px;
     background-color: transparent;
    color: grey;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
     border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
    
    
}
  .clearsearchprinth button {
    position: absolute;

    display: block;
 
   
    line-height: 16px;
       font-size: 85%;
    border-radius: 10px;
 

    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
   
  height: 5%;
  
   
    
    outline: none;
   
    transition: .1s;

   
    cursor: pointer;
    width:11%;


   top:53%;
    margin-top:30px;
    
    margin-right: 88%;
    margin-bottom: 0.07%;
    min-width: 20px;
 
    padding: 1%;
   


  text-align: left  ;
font-weight :bold;
 border: 2px solid black ;
  
   background-color: rgb(211,211,211);
    color: black;
  
  
  }
  
    #formindex .clearsearchprinth button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}
  
    #formindex .clearsearchbackuph button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}
  
  .clearsearchbackuph button {
    position: absolute;
  
    display: block;
 
   
    line-height: 16px;
    font-size: 90%;
    border-radius: 10px;
 
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
   
  height: 5%;
  
   

    outline: none;
   
    transition: .1s;

   
   
    width:11%;
    letter-spacing: 1px;
    border-radius: 10px;
      top:47%;
    margin-top:30px;
    margin-right: 88%;
    margin-bottom: 0.07%;
    min-width: 20px;
  
    padding:  0.15rem;
    background-color: rgb(211,211,211);
    color: black;
    padding: 1%;

    cursor: pointer;
    display: inline-block;

  text-align: left  ;
  font-weight :bold;
   border: 2px solid black ;
  }
  
  @page
{
  size:A4;
  margin: 0;
}
#print-btn
{
  display: none;
  visibility: none;
}

  #formindex .clearsearchlogouth button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}
  
  .clearsearchlogouth button {
    position: absolute;

    display: block;
    width: 11%;
    height: 6%;
    line-height: 16px;
      font-size: 85%;
    border-radius: 10px;
  text-align: left  ;
  font-weight :bold;
  
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:88%;
   top:59%;
    margin-top:30px;
    background-color: #fcd071fd;
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    border: 2px solid black ;
 
  }
  .clearsearchlogout button {
     position:absolute;
 
    display: block;
    width: 5.4%;
    height: 30px;
    line-height: 16px;
    font-size: 75%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;
   
     margin-top:275PX;
   background-color: #FF2C2C;
    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: center  ;
  font-weight:bold;
    border: 0px;
 z-index:1;
  }
  
   .clearsearchcpw button {
    position: absolute;

    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
      font-size: 85%;
    border-radius: 10px;

  
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:88%;
    top:80%;
    margin-top:100px;
    background-color: #fcd071fd;
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight :bold;
  border: 2px solid black ;
  visibility:hidden;
  }


 .clearsearchcpwh button {
    position: absolute;

    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
      font-size: 85%;
    border-radius: 10px;

  
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:88%;
    top:29%;
    margin-top:30px;
    background-color: rgb(211,211,211);
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight :bold;
  border: 2px solid black ;
  }
  
  #formindex .clearsearchcpwh button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}

   .clearsearchcpr button {
    position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:440px;
    background-color: transparent;
    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
     border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
 
  }
  
  
  
     .clearsearchcprr button {
    position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:440px;
  background-color: #00BFFF80;
    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
     border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
 
  }
  
    .clearsearchcna button {
   position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:615px;
    background-color: transparent;
    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
     border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
  }
  
 .clearsearchcna button:hover {
  background-color: #00BFFF80;

}

 .clearsearchcnaa button:hover {
  background-color: #00BFFF80;
    
}

  .clearsearchcnaa button {
   position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:615px;
   background-color: #00BFFF80;
    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
     border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
  }
  
  .clearsearchcnah button {
    position: absolute;
   
    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
    font-size: 85%;
    border-radius: 10px;
  border:10px;border: 2px solid black ;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:88%;
    top:23%;
    margin-top:30px;
   background-color: rgb(211,211,211);
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight :bold;
  }
  
    #formindex .clearsearchcnah button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}
    .clearsearcharchive button {
     position:absolute;
 
    display: block;
    width: 16.5%;
   
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:525px;
    background-color: transparent;
    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
  }
  
      .clearsearchpayroll button {
     position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:570px;
    background-color: transparent;
    color: white;
 
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
  }
  
        .clearsearchpayrolll button {
     position:absolute;
 
    display: block;
    width: 16.5%;
  
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:570px;
      background-color: #00BFFF80;
    color: white;
 
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
  }
  
  
  
   .clearsearchsch button {
    position: absolute;
  
    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
       font-size: 85%;
    border-radius: 10px;
   
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:88%;
     top:41%;
    margin-top:30px;
    background-color: rgb(211,211,211);
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight :bold;
  border: 2px solid black ;
  }
  
   #formindex .clearsearchsch button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}

.clearsearchhome button:hover {
 background-color: #00BFFF80;
    
}
.clearsearchhomee button:hover {
 background-color: #00BFFF80;
    
}
.clearsearchadd button:hover {
 background-color: #00BFFF80;
    
}

.clearsearchcpr button:hover {
 background-color: #00BFFF80;
    
}

.clearsearcharchive button:hover {
 background-color: #00BFFF80;
    
}

.clearsearchpayroll button:hover {
 background-color: #00BFFF80;
    
}
    .clearsearchhome button {
    position:absolute;
 
    display: block;
    width: 16.5%;
 
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;
   
    margin-top:350px;
    background-color: transparent;
    color: white;
   
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
   
  }
  
    .clearsearcharchivee button {

    background-color:  #00BFFF80;
       position:absolute;
 
    display: block;
    width: 16.5%;
   
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;

  margin-top:525px;

    color: white;
    
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
   
  }
  
  .clearsearchhomee button {
    position:absolute;
 
    display: block;
    width: 16.5%;
 
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;
   
    margin-top:350px;
    background-color:  #00BFFF80;
    color: white;
   
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
   
  }
      .clearsearchadd button {
    position:absolute;
 
    display: block;
    width: 16.5%;
 
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;
   
    margin-top:395px;
    background-color: transparent;
    color: white;
   
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
   
  }
  

        .clearsearchaddd button {
    position:absolute;
 
    display: block;
    width: 16.5%;
 
    font-size: 110%;
    border-radius: 0px;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:83.5%;
   
    margin-top:395px;
    background-color: #00BFFF80;
    color: white;
   
    outline: none;
    cursor: pointer;
    transition: .1s;
  text-align: left  ;
  font-weight:bold;
    border: 0px;
    
    height:40px;
     padding: 6px 0px 6px 20px;
   
  }
 .clearsearchpending button{
        position: absolute;

    display: block;
    width: 10%;
    height: 9%;
    line-height: 16px;
    font-size: 100%;
    border-radius: 10px;
  text-align: left  ;
  font-weight :bold;
  
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:89%;
 top:67%;
    margin-top:30px;
    background-color: rgb(182, 86, 42);
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
     border: 2px solid black ;
     text-align:center;
     
 }
 .clearsearchpendingh button{
        position: absolute;

    display: block;
    width: 10%;
    height: 9%;
    line-height: 16px;
    font-size: 100%;
    border-radius: 10px;
  text-align: left  ;
  font-weight :bold;
  
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:89%;
 top:67%;
    margin-top:30px;
    background-color: rgb(211,211,211);
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
     border: 2px solid black ;
     text-align:center;
     
 }
 
   #formindex .clearsearchpendingh button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}
  
 
 .clearsearchreceive button{
        position: absolute;

    display: block;
    width: 10%;
    height: 9%;
    line-height: 16px;
    font-size: 100%;
    border-radius: 10px;
  text-align: left  ;
  font-weight :bold;
   
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:89%;
top:77%;
    margin-top:30px;
    background-color: WHITE;
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 border: 2px solid black ;
     text-align:center;
 }
 
 .clearsearchreceiveh button{
        position: absolute;

    display: block;
    width: 10%;
    height: 9%;
    line-height: 16px;
    font-size: 100%;
    border-radius: 10px;
  text-align: left  ;
  font-weight :bold;
   
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:89%;
top:77%;
    margin-top:30px;
    background-color:  rgb(211,211,211);
    color: black;
    padding: 1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 border: 2px solid black ;
     text-align:center;
 }
 
    #formindex .clearsearchreceiveh button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}

.clear {
    position: relative;
    width: 100%;
    color: transparent;
    
  }.clear input {
    width: 100%;
    padding-right: 0px;
    box-sizing: border-box;

  }.clear input:placeholder-shown+button {
    opacity: 0;
    pointer-events: none;

  }

  .clearsearch {
    height: 0%;
  }

  .clearsearchs button {
    position: absolute;
    border:1px solid black;
    display: block;
     width: 45px;
    height: 40px;
    line-height: 16px;
    font-size: 160%;
  border-radius:5px;
    letter-spacing: .1px;
     right: .1px;
    margin-right:11%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 43px   ;
font-weight:bold;

 
  }
  
  
      .clearsearchindex button {
    position: absolute;
    border:1px solid black;
    display: block;
     width: 2.5%;
    height: 45px;
    line-height: 16px;
    font-size: 100%;
  border-radius:5px;
    letter-spacing: .1px;
    
    margin-left:46%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 30px   ;
font-weight:bold;
  z-index:20;

 
  }
  
      .clearsearcharchive2 button {
    position: absolute;
    border:1px solid black;
    display: block;
     width: 2.5%;
    height: 45px;
    line-height: 16px;
    font-size: 100%;
  border-radius:5px;
    letter-spacing: .1px;
    
    margin-left:41%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 30px   ;
font-weight:bold;
  z-index:20;

 
  }
  
    .clearsearchsr button {
    position: absolute;
    border:1px solid black;
    display: block;
     width: 45px;
    height: 40px;
    line-height: 16px;
    font-size: 100%;
  border-radius:5px;
    letter-spacing: .1px;
     right: .1px;
    margin-right:10%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 245px   ;
font-weight:bold;
  z-index:20;

 
  }
  
  .clearsearchs button:hover{
    
color:black;
}
    .clearsearchr button {
    position: absolute;
border:1px solid black;
    display: block;
     width: 45px;
    height: 40px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
     right: .1px;
    margin-right:5%;
    background-color: white;
    color:darkblue ;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 33px   ;
font-weight:bold;
 border-radius: 5px;
 
  }
  
  .clearsearchr button:hover{
    background-color: lightgray;
color:black;
}

    .clearsearchcpru button {
    position: absolute;
  
    display: block;
     width: 45px;
    height: 40px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
     right: .1px;
    margin-right:85.7%;
    background-color: #ff2c2c;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 border: none;
margin-top: 25px   ;
font-weight:bold;
 border-radius: 5px;
 
  }
  
  .clearsearchcpru button:hover{
    background-color: lightgray;
color:black;
}

   .clearsearchp button {
    position: absolute;
    border: 2px solid black;
    display: block;
     width: 45px;
    height: 40px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
     right: .1px;
    margin-right:30%;
    background-color: aqua;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 390px   ;
font-weight:bold;
 border-radius: 5px;
   z-index:10;
   visibility: hidden ;
  }
  
  .clearsearchp button:hover{
    background-color: lightgray;
color:black;
}
    .clearsearchh button {
    position: absolute;
    border: .1px;
    display: block;
    width: 30%;
    height: 6%;
    line-height: 16px;
    font-size: 100%;
   border: 2px solid black ;
   
  
    bottom: 0;

    margin: auto; 
    letter-spacing: .1px;
    margin-left:38%;
    background-color: #fcd071fd;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    top:15%;
margin-top: 30px   ;
  }

  
  .logo12 a {
    width:8%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: 1%;
    margin-left: .5%;
    margin-right:-.5%;
height:150px;
   
    font-size: 90%;
    padding:  0.3rem;
    
    border: 2px solid rgb(0, 0, 0);

    cursor: default;
    display: inline-block;
    font-weight:bold;
    opacity:0;
   
     
   
}
.logo12 a:hover {
   
    background-color:white;
    opacity:1;
     cursor: pointer;
   
}



  .clearsearch .logo12 {
   position: absolute;
    border: 0px;
    display: block;
    width: 100%;
    height: 50%;
    line-height: 0%;
    font-size: 0%;
    border-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    top: 6%;
    bottom: 0;
    right: 0%;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:0%;

 
    color: rgb(255, 255, 255);
    padding: 0%;
    outline: none;
    cursor: default;
    transition: .1s;
   
  }



  .logo12sa a {
    width:9%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: 0%;
    margin-left: 54%;
    margin-right:-54%;
height:180px;
   
    font-size: 90%;
    padding:  0.3rem;
    
    border: 2px solid rgb(0, 0, 0);

    cursor: default;
    display: inline-block;
    font-weight:bold;
    opacity:0;
   
     
   
}
.logo12sa a:hover {
   
    background-color:white;
    opacity:1;
     cursor: pointer;
   
}



  .clearsearch .logo12sa {
   position: absolute;
    border: 0px;
    display: block;
    width: 100%;
    height: 50%;
    line-height: 0%;
    font-size: 0%;
    border-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    top: 6%;
    bottom: 0;
    right: 0%;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:0%;
    margin-top:0%;
 
    color: rgb(255, 255, 255);
    padding: 0%;
    outline: none;
    cursor: default;
    transition: .1s;
   
  }


  .logo34 a {
    width:8%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: .5%;
    margin-left: 40%;
    margin-right: -40%;
  height:150px;
   
    font-size: 90%;
    padding:  0.3rem;

    border: 2px solid rgb(0, 0, 0);

    cursor: pointer;
    display: inline-block;
    font-weight:bold;
   
    opacity:0;
     
   
}

  .clearsearch .logo34 {
   position: absolute;
    border: 0px;
    display: block;
    width: 100%;
    height: 50%;
    line-height: 0%;
    font-size: 0%;
    border-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    top: 6%;
    bottom: 0;
    right: 0%;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:0%;
    
 
    color: rgb(255, 255, 255);
    padding: 0%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
  
  }

  .logo34 a:hover {
   
    background-color:white;
    opacity:1;
     
   
}


 .logo34sa a {
    width:9%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: 1%;
    margin-left: 72.5%;
    margin-right: -72.5%;
  height:180px;
   
    font-size: 90%;
    padding:  0.3rem;

    border: 2px solid rgb(0, 0, 0);

    cursor: pointer;
    display: inline-block;
    font-weight:bold;
   
    opacity:0;
     
   
}

  .clearsearch .logo34sa {
   position: absolute;
    border: 0px;
    display: block;
    width: 100%;
    height: 50%;
    line-height: 0%;
    font-size: 0%;
    border-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    top: 6%;
    bottom: 0;
    right: 0%;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:0%;
    margin-top:-1%;
 
    color: rgb(255, 255, 255);
    padding: 0%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
  
  }

  .logo34sa a:hover {
   
    background-color:white;
    opacity:1;
     
   
}
  .clearsearch .logobat {
    position: absolute;
    border: 0px;
    display: block;
    width: 100%;
    height: -50%;
    line-height: -50%;
    font-size: 0%;
    border-radius: 10px;
    border: 0px solid rgb(0, 0, 0);
    top: 6%;
    bottom: 0;
    right: 0%;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:0%;
    margin-top:1%;
    background-color:blue;
    color: rgb(255, 255, 255);
    padding: 0%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
  
  }

  .logobat a {
    width:30%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: 7%;
    margin-left: 5%;
   
  height:550px;
   
    font-size: 90%;
    padding:  0.3rem;

    border: 2px solid rgb(0, 0, 0);

    cursor: pointer;
    display: inline-block;
    font-weight:bold;
   
    opacity:0;
     
   
}

  .logobat a:hover {
   
    background-color:white;
    opacity:1;
     
   
}

  .clearsearch .bl button {
       width:10%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: 1%;
    margin-left: 10%;
    margin-right: 50%;
  height:100px;
   
    font-size: 90%;
    padding:  0.3rem;

    border: 2px solid rgb(0, 0, 0);

    cursor: pointer;
    display: inline-block;
    font-weight:bold;
   
  
}

 .BACKUP button:hover {
   
    background-color: #00BFFF80;
   
  
}
wrapperlink{
width: 100%;
}
.wrapperlink a:hover{
    background-color: indigo;
  color:white;
}



.wrapperlink label{
  
    font-weight:bold;
    width: 50%;
    letter-spacing: 1%;
  
    font-weight:bold;

    font-size: 70%;
    
    background-color: transparent;
    border: none;
    color: rgb(0, 0, 0);
    cursor: default;
   
}
.wrapperlink a{
        width: 95%;
    letter-spacing: 2px;
    border-radius: 2px;
    margin-top: 0%;
    margin-left: 1%;
height:30px;
   
    font-size: 50%;
    padding:  1%;
    background-color: white;
    border: 2px solid black;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-weight:bold;
}



.batlogo a{
    width: 15%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: 1%;
    margin-left: 1%;
  height:150%;
    min-width: 20px;
    font-size: 90%;
    padding:  0.3rem;
    background-color: rgb(16, 98, 143);
    border: 2px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-weight:bold;
}
.wrapperlink button:hover{
    background-color: indigo;
  color:white;
}


.adduser-container input:hover {
     background-color: lightgray;
}

.doc-controlsq:hover {
     background-color: lightgray;
}


.scb button{
    margin-top: 8%;
   font-size: 100%;
   width:36%;
       background-color: #fcd071fd;
    border: 2px solid black;
    color: black;
     padding:  .3%;
     font-weight:bold;
       margin-left: 32%;
        cursor: pointer;
}

.scb button:hover{
  background-color: indigo;
  color:white;
}






#formindex .clearsearchbackup2 button:hover {
    background-color: rgb(211,211,211);
    color:gray;
}
.clearsearchsr input{
   position:absolute;

    width: 76%;
    font-size:70%;
  
 
    height: 40px;
    padding: 0.5%;
      
    border:1px solid black;
    border-radius: 2px;
    color: black;
    
    margin-left: -38%;
    margin-top: 277px;
   border-radius:5px;
    z-index:20;
}
.clearsearchs input{
   position:absolute;

    width: 21%;
    font-size: 115%;
  
 
    height: 40px;
    padding: 5px;
      
    border:1px solid black;
    border-radius: 2px;
    color: black;
  
    margin-left: 68%;
    margin-top: 43px;
   border-radius:5px;
    
}
.clearsearchs input:hover{
    background-color: lightgray;
color:black;
}
.clearsearchsr input:hover{
    background-color: lightgray;
color:black;
}
.clearsearchsr button:hover{
    background-color: lightgray;
color:black;
}
.clearsearchpp input{
   position:absolute;

    width: 12%;
    font-size: 100%;
  
 
    height: 40px;
    padding: 0.5%;
      
     border: 1px solid black ;
    border-radius: 2px;
    color: black;
  
    margin-left: 33%;
    margin-top: 43px;
   
     box-shadow: 5px 6px 18px #888;
}
.clearsearchpp input:hover{
    background-color: lightgray;
color:black;
}

  .clearsearchpp button {
    position: absolute;
    border: 1px solid black;
    display: block;
     width: 45px;
    height: 40px;
    line-height: 16px;
    font-size: 150%;
  
    letter-spacing: .1px;
     right: .1px;
    margin-right:67%;
    background-color: white;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 43px   ;
font-weight:bold;
 border-radius: 5px;
 
  }
  
  .clearsearchpp button:hover{
    background-color: lightgray;
color:black;
}

.clearsearchr input{
   position:absolute;

    width: 27%;
    font-size: 115%;
  
 
    height: 40px;
    padding: 5px;
      
    
    border-radius: 5px;
    color: black;
  
    margin-left: 68%;
    margin-top: 33px;
  border:1px solid black;
    
}
.clearsearchr input:hover{
    background-color: lightgray;
color:black;
}

.clearsearchcpru input{
   position:absolute;

    width: 82%;
    font-size: 120%;
  
 
   
    padding: 10px;
      
     border: 2px solid black ;
    border-radius: 2px;
    color: black;
  border:none;
    margin-left: 11%;
    margin-top: 25px;
   
     
}
.clearsearchcpru input:hover{
    background-color: lightgray;
color:black;
}


.clearsearchp input{
   position:absolute;

    width: 27%;
    font-size: 100%;
  
 
    height: 40px;
    padding: 0.5%;
      
     border: 2px solid black ;
    border-radius: 2px;
    color: black;
  
    margin-left: 70%;
    margin-top: 390px;
   
     box-shadow: 5px 6px 18px #888;
     z-index:10;
        visibility: hidden ;
}
.clearsearchp input:hover{
    background-color: lightgray;
color:black;
}

.table table-borde#ff2c2c print {
    margin-left:1%;
}
.add-containerfpw{
    font-weight:bold;
     width: 33%;
    margin-top: 3%;
    margin-left: 35%;
    background-color: transparent;
    border: 2px solid rgba(212, 136, 22, 0.836);
    border-radius: 2px;
    height: 70%;
    padding: 1% ;
    box-shadow: 5px 6px 18px #888;
    font-size: 100%;
    COLOR: BLACK;
   position : absolute;
}


.add-containerfpw button{
    width: 70%;
    letter-spacing: 1px;
    border-radius: 25px;
    margin-top: 1.8rem;
    font-size: 70%;
    padding:  2%;
    background-color: #9261c2;;
    border: none;
    color: white;
    cursor: pointer;
    font-weight:bold;

  
font-weight:bold;
   
  

    

}


.add-containerfpw button:hover {
   background-color: indigo;
  color:white;
}


.add-containerfpw label1 {
    font-size: 90%;
}

.add-containerfpw label2 {
    font-size: 70%;
}
.clearsearchfpw input{
   position:absolute;
    width:68%;
   font-size: 100%;
    height:45px;
    padding: 0.5%;
    border: 3px solid #e6ae37ec;
    border-radius: 2px;
    color: rgb(12, 0, 0);
    margin-left: 33%;
    margin-top: 2%;
}

  .clearsearchfpw button{
    position: absolute;
    border: .1px;
    display: block;
    width: 16%;
    height: 45px;
    line-height: 16px;
    font-size: 100%;
    border-radius: 2px;
   
    top: 2%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:69%;
    background-color: #fcd071fd;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  margin-top:2%;
  }
  
    .clearsearchfpwc button{
    position: absolute;
    border: .1px;
    display: block;
    width: 16%;
    height: 45px;
    line-height: 16px;
    font-size: 100%;
    border-radius: 2px;
   
    top: 2%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:86%;
    background-color: #fcd071fd;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  margin-top:2%;
  }

.clearsearchsadmin input{
   position:absolute;
    width: 70%;
   font-size: 100%;
    height:57px;
    padding: 0.5%;
    border: 10px solid blue;
    border-radius: 2px;
    color: rgb(12, 0, 0);
    margin-left: 26%;
    margin-top: 11%;
}
.clearsearchsadmin button{
  position: absolute;
    border: .1px;
    display: block;
    width: 6%;
    height: 57px;
    line-height: 16px;
    font-size: 100%;
    border-radius: 2px;
   border: 6px solid blue;
    top: 2%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:74%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  margin-top:11%;
}

.clearsearchsadmin  input:hover {
   background-color: lightgray;
}
.clearsearch input:hover {
   background-color: lightgray;
}

.clearsearchcna2 button {

 position: absolute;
   
    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
   font-size: 85%;
    border-radius: 10px;
 border:1px SOLID BLACK;
  
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:88%;
    top:23%;
    margin-top:30px;
  background-color: rgb(211,211,211);
    color:gray;
    padding: 1%;
    outline: none;
 
    transition: .1s;
  text-align: left  ;
  font-weight :bold;
    
}


#formindex .clearsearchcna2 button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}
.clearsearchaddindex2 button {
    position:absolute;
 
    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
    font-size: 85%;
    border-radius: 10px;


    bottom: 0;
    right: .1px;
    
    letter-spacing: .1px;
    margin-right:88%;
  top:35%;
    margin-top:30px;
       background-color: rgb(211,211,211);
    color:gray;
    padding: 1%;
    outline: none;
    
    transition: .1s;
  text-align: left  ;
  font-weight :bold;
   border:10px;
}
.clearsearchaddh button {
    position:absolute;
 
    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
    font-size: 85%;
    border-radius: 10px;


    bottom: 0;
    right: .1px;
    
    letter-spacing: .1px;
    margin-right:88%;
  top:35%;
    margin-top:30px;
       background-color: rgb(211,211,211);
    color:gray;
    padding: 1%;
    outline: none;
    
    transition: .1s;
  text-align: left  ;
  font-weight :bold;
   border:10px;
}
#formindex .clearsearchaddh button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}
#formindex .addindex2 button:hover {
    background-color: rgb(211,211,211);
     color:gray;
}

#formindex .add2stat:hover {
    background-color: rgb(211,211,211);
     color:gray;
}

.add2stat doc-control{
     width: 12%;
    letter-spacing: 1px;
    margin-left: 8%;
    margin-bottom: .5rem;
    font-size: 100%;
    padding: 2%;
   background-color: rgb(211,211,211);
    border: none;
    color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 2px solid rgb(0, 0, 0);
    
}



.clearsearchbackup2 button {
    margin-left: 12%;
   
      position:absolute;
    border: .1px;
    display: block;
    width: 11%;
    height: 5%;
    line-height: 16px;
    font-size: 90%;
    border-radius: 2px;
   border: 6px solid blue;
top :10%;
    bottom: 0;
    right: .1px;
    
    letter-spacing: .1px;
    margin-right:88%;
     margin-top:520px;
    margin-bottom:8%;
       background-color: rgb(211,211,211);
   color:  gray;
    padding: .1%;
    outline: none;
     cursor:default;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
}

.wrapperbutton button:hover{
  

}

.titleindextotals input{
    position:absolute;
  font-size: 70%;
  color:white;
   MARGIN-TOP:175px;
   font-weight:bold;
   width:17%;
    border:none;
    background-color:transparent;
       margin-LEFT:79%;
     border-top:2px solid white;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.titleindextotala input{
    position:absolute;
  font-size: 70%;
  color:white;
   MARGIN-TOP:175px;
   font-weight:bold;
   width:17%;
    border:none;
    background-color:transparent;
       margin-LEFT:63%;
     border-top:2px solid white;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}
.titleindextotalp input{
    position:absolute;
  font-size: 70%;
  color:white;
   MARGIN-TOP:175px;
   font-weight:bold;
   width:17%;
    border:none;
    background-color:transparent;
       margin-LEFT:33%;
     border-top:2px solid white;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.titleindextotalp2 input{
    position:absolute;
  font-size: 70%;
  color:white;
   MARGIN-TOP:175px;
   font-weight:bold;
   width:17%;
    border:none;
    background-color:transparent;
       margin-LEFT:48%;
     border-top:2px solid white;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}
.titleindextotal input{
    position:absolute;
  font-size: 70%;
  color:white;
   MARGIN-TOP:175px;
   font-weight:bold;
   width:14%;
    border:none;
    background-color:transparent;
       margin-LEFT:19%;
     border-top:2px solid white;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
  z-index:30;
  text-align:center;
}

.LABELS LABEL{
    position:absolute;
  font-size: 130%;
  color:WHITE;
   margin-LEFT:.5%;
   TOP:13%;
   MARGIN-TOP:30px;
}
.titlein input{
    position:absolute;
  font-size: 100%;
  color:gold;
   margin-LEFT:2%;
   letter-spacing:2px;
   MARGIN-TOP:200px;
   font-weight:bold;
     border:none;
    background-color:transparent;
        z-index:12;
}
.title2in input{
    position:absolute;
  font-size: 80%;
  color:white;
   margin-LEFT:2%;
  
   MARGIN-TOP:400px;
   font-weight:bold;
     border:none;
    background-color:transparent;
    z-index:12;
}
.title input{
    position:absolute;
  font-size: 190%;
  color:WHITE;
   margin-LEFT:.5%;
 
   MARGIN-TOP:20px;
   font-weight:bold;
     border:none;
    background-color:transparent;
    font-family: "Arial Narrow", Impact, sans-serif;
}
.title1 input{
    position:absolute;
  font-size: 190%;
  color:WHITE;
   margin-LEFT:.5%;
 
   MARGIN-TOP:50px;
   font-weight:bold;
     border:none;
    background-color:transparent;
    font-family: "Arial Narrow", Impact, sans-serif;
}
.title2 input{
    position:absolute;
  font-size: 190%;
  color:WHITE;
   margin-LEFT:.5%;
  
   MARGIN-TOP:80px;
   font-weight:bold;
     border:none;
    background-color:transparent;
    font-family: "Arial Narrow", Impact, sans-serif;
}

.title3 input{
    position:absolute;
  font-size: 190%;
  color:WHITE;
   margin-LEFT:.5%;
  
   MARGIN-TOP:110px;
   font-weight:bold;
    border:none;
    background-color:transparent;
    font-family: "Arial Narrow", Impact, sans-serif;
}

.title31 input{
    position:absolute;
  font-size: 190%;
  color:WHITE;
   margin-LEFT:.5%;
  
   MARGIN-TOP:140px;
   font-weight:bold;
    border:none;
    background-color:transparent;
    font-family: "Arial Narrow", Impact, sans-serif;
}



.title32 input{
    position:absolute;
  font-size: 190%;
  color:WHITE;
   margin-LEFT:.5%;
  
   MARGIN-TOP:170px;
   font-weight:bold;
    border:none;
    background-color:transparent;
    font-family: "Arial Narrow", Impact, sans-serif;
  
}


.title33 input{
    position:absolute;
  font-size: 0%;
  color:transparent;
   margin-LEFT:0%;
  width:16.5%;
   MARGIN-TOP:210px;
   font-weight:bold;
    border:none;
    background-color:transparent;
    font-family: "Arial Narrow", Impact, sans-serif;
  border-top:2px solid white;
}




.title4 input{
    position:absolute;
  font-size: 120%;
  color:white;
   MARGIN-TOP:315px;
   font-weight:bold;
   width:16.5%;
    border:none;
    background-color:transparent;
       margin-LEFT:0%;
     border-top:2px solid white;
  border-left:none;
  border-right:none;
  border-bottom:none;
  padding: 4px 0px ;
}


.title5 input{
      position:absolute;
  font-size: 120%;
  color:white;
   margin-LEFT:0%;
  border-top:2px solid white;
  border-left:none;
  border-right:none;
  border-bottom:none;
   MARGIN-TOP:495px;
   font-weight:bold;
   width:16.5%;
   padding: 4px 0px ;
    background-color:transparent;
}

.title6 input{
      position:absolute;
  font-size: 120%;
  color:black;
   margin-LEFT:20%;
  border:none;

   MARGIN-TOP:55px;
   font-weight:bold;
   width:33%;
   padding: 1px 0px ;
    background-color:TRANSPARENT;
}
.title6pr input{
      position:absolute;
  font-size: 120%;
  color:black;
   margin-LEFT:20%;
  border:none;

   MARGIN-TOP:55px;
   font-weight:bold;
   width:9%;
   padding: 1px 0px ;
    background-color:transparent;
}

.title7 input{
      position:absolute;
  font-size: 95%;
  color:black;

    margin-LEFT:20%;
  border:none;
  border-left:none;
  border-right:none;
  border-bottom:none;
   MARGIN-TOP:380px;
   font-weight:bold;
   width:50%;
   padding: 0px 0px ;
    background-color:transparent;
}

.title71 input{
      position:absolute;
  font-size: 100%;
  color:black;

     margin-left:21%;
  border:none;
  border-left:none;
  border-right:none;
  border-bottom:none;
   MARGIN-TOP:475px;
   font-weight:bold;
   width:35%;
   padding: 2px 1px 2px 5px;
    background-color:transparent;
}


.title8 input{
      position:absolute;
  font-size: 95%;
  color:black;
   margin-LEFT:20%;
  border:none;
  border-left:none;
  border-right:none;
  border-bottom:none;
   MARGIN-TOP:394px;
   font-weight:bold;
   width:25%;
   padding: 4px 0px ;
    background-color:transparent;
}

.title9 input{
      position:absolute;
  font-size: 95%;
  color:black;
   margin-LEFT:20%;
  border:none;
  border-left:none;
  border-right:none;
  border-bottom:none;
   MARGIN-TOP:409px;
   font-weight:bold;
   width:25%;
   padding: 4px 0px ;
    background-color:transparent;
}
.titlenullrec input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:18%;
  border-top:1px solid black;

   MARGIN-TOP:91px;
   font-weight:bold;
   width:162px;
   padding: 27px 0px ;
    background-color:#79afc7;
    z-index:5;
}

.titlenull0 input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20%;
  border-top:.1px solid black;

   MARGIN-TOP:91px;
   font-weight:bold;
   width:162px;
   padding: 40px 0px ;
    background-color:#1C3163;
    z-index:5;
}
.titlenull input{
      position:absolute;
  font-size: 0%;
  color:white;
   margin-LEFT:20.1%;
  border-top:1px solid black;

   MARGIN-TOP:91px;
   font-weight:bold;
   width:162px;
   padding: 27px 0px ;
    background-color:#1C3163;
    z-index:10;
}

.titlenulltable2r input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20.1%;
  border-top:1px solid black;

   MARGIN-TOP:500px;
   font-weight:bold;
   width:161px;
   padding: 24px 0px ;
    background-color:#1C3163;
    z-index:5;
}

.titlenulltable2rrr input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20.1%;
  border-top:1px solid black;

   MARGIN-TOP:500px;
   font-weight:bold;
   width:161px;
   padding: 34px 0px ;
    background-color:#1C3163;
    z-index:5;
}


.titlenulltable2p input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:435px;
   font-weight:bold;
   width:161px;
   padding: 40px 0px ;
    background-color:#1C3163;
    z-index:5;
}


.titlenulltable2pbm2 input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:435px;
   font-weight:bold;
   width:161px;
   padding: 42px 0px ;
    background-color:#1C3163;
    z-index:5;
}


.titlenulltable2p3bm input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:433px;
   font-weight:bold;
   width:161px;
   padding: 42px 0px ;
    background-color:#1C3163;
    z-index:5;
}

.titlenulltable2p3 input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:435px;
   font-weight:bold;
   width:161px;
   padding: 42px 0px ;
    background-color:#1C3163;
    z-index:5;
}

.titlenulltable2pu input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:435px;
   font-weight:bold;
   width:161px;
   padding: 43px 0px ;
    background-color:#1C3163;
    z-index:5;
}
.titlenull2 input{
      position:absolute;
  font-size: 0%;
  color:black;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:20px;
   MARGIN-TOP:20px;
   font-weight:bold;
  min-width: 79%;
    max-width: 79%;
   padding: 160px 0px ;
    background-color:transparent;
    z-index:-5;
    box-shadow:10px solid grey
    ;
}


.titlenull22index input{
      position:absolute;
  font-size: 0%;
  color:black;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:20px;
   MARGIN-TOP:10px;
   font-weight:bold;
  min-width: 80%;
    max-width: 80%;
   padding: 420px 0px ;
    background-color:transparent;
    z-index:-5;
    box-shadow:10px solid grey
    ;
}
.titlenull221 input{
      position:absolute;
  font-size: 0%;
  color:black;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:20px;
   MARGIN-TOP:20px;
   font-weight:bold;
  min-width: 80%;
    max-width: 80%;
   padding: 400px 0px ;
    background-color:transparent;
    z-index:-5;
    box-shadow:10px solid grey
    ;
}

.titlenull22 input{
      position:absolute;
  font-size: 0%;
  color:black;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:20px;
   MARGIN-TOP:20px;
   font-weight:bold;
  min-width: 80%;
    max-width: 80%;
   padding: 400px 0px ;
    background-color:transparent;
    z-index:-5;
    box-shadow:10px solid grey
    ;
}

.titlenull22vr input{
      position:absolute;
  font-size: 0%;
  color:black;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:20px;
   MARGIN-TOP:20px;
   font-weight:bold;
  min-width: 80%;
    max-width: 80%;
   padding: 210px 0px ;
    background-color:transparent;
    z-index:-5;
    box-shadow:10px solid grey
    ;
}

.titlenull222 input{
      position:absolute;
  font-size: 0%;
  color:black;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:20px;
   MARGIN-TOP:20px;
   font-weight:bold;
  min-width: 80%;
    max-width: 80%;
   padding: 400px 0px ;
    background-color:transparent;
    z-index:-5;
    box-shadow:10px solid grey
    ;
}
.titlenull3 input{
      position:absolute;
  font-size: 0%;
  color:#79afc7;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:8px;
   MARGIN-TOP:465px;
   font-weight:bold;
  min-width: 80%;
    max-width: 80%;
   padding: 180px 0px ;
    background-color:white;
    z-index:-5;
}


.titlenull4 input{
      position:absolute;
  font-size: 0%;
  color:black;
   margin-LEFT:18%;
  border-top:1px solid black;
border-radius:10px;
   MARGIN-TOP:370px;
   font-weight:bold;
  min-width: 79%;
    max-width: 79%;
   padding: 230px 0px ;
    background-color:white;
    z-index:-5;
}

.titlenullcpr2 input{
      position:absolute;
  font-size: 120%;
  color:#1C3163;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:84px;
   font-weight:bold;
   width:162px;
   padding: 24px 0px ;
    background-color:#1C3163;
    z-index:5;
}


.titlenullcpr23u input{
      position:absolute;
  font-size: 120%;
  color:#1C3163;
   margin-LEFT:20.1%;
  border-top:1px solid black;

   MARGIN-TOP:84px;
   font-weight:bold;
   width:162px;
   padding: 33px 0px ;
    background-color:#1C3163;
    z-index:5;
}


.titlenullcpr21bm input{
      position:absolute;
  font-size: 120%;
  color:#1C3163;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:84px;
   font-weight:bold;
   width:162px;
   padding: 32px 0px ;
    background-color:#1C3163;
    z-index:5;
}


.titlenullcpr21 input{
      position:absolute;
  font-size: 120%;
  color:#1C3163;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:81px;
   font-weight:bold;
   width:162px;
   padding: 32px 0px ;
    background-color:#1C3163;
    z-index:5;
}

.titlenullcpr211 input{
      position:absolute;
  font-size: 120%;
  color:#1C3163;
   margin-LEFT:20.2%;
  border-top:1px solid black;

   MARGIN-TOP:81px;
   font-weight:bold;
   width:162px;
   padding: 35px 0px ;
    background-color:#1C3163;
    z-index:5;
}
.image{
position: fixed;
  bottom: 0;
  right: 0;
}

.image2{

}

img.fixed-size {
  width: 280px;  /* Set a fixed width in pixels */
  height: 90px; /* Set a fixed height in pixels */
   display: block; /* Images are inline by default, must be block to use auto margins */
  margin-left: auto;
  margin-right: auto;
  /* Optional: Set a width or max-width */
margin-top: 50px;
}


.login-container button{
    width: 70%;
    letter-spacing: 1px;
    border-radius: 10px;
    top:10%;
    margin-top:5PX;
    font-size: 95%;
    padding:  15px;
    background-color: #1C3163;
    border: none;
    color: white;
    cursor: pointer;
    font-weight:bold;
margin-left:3%;
  
font-weight:bold;
   
  

    

}




.rc a{
  position:absolute;
    margin-left: 63%;
 margin-top: 300px;
 padding:5px;
 
   font-weight:bold;
    width: 16%;
 
    letter-spacing: 1px;
    border-radius: 8px;
   
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
    border: 1px solid black;
    height:40px;
    text-align:center;
}



.message.success{
    background: #4bb838;
    border-left: 6px solid #069b1e;
    color: #2f6b06;

}

.message.info{
    background: #248baa;
    border-left: 6px solid #06589b;
    color:#ffffff;

}

.login-container button:hover{
   background-color: lightgray;
  color:BLACK;
}
.login-container input:hover{
    background-color: lightgray;
    color: BLACK;
}



.login-container{
    position:absolute;
       background-color: white;
   
    border-radius: 20px;
    border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    border: 1px solid rgb(0, 0, 0);

 margin-top:5%;
    margin-left:48%;
  color: white;
    width:25%;
 height:600px;
justify-content: center;
     
}

.login-container2{
      position:absolute;
background-color: #1C3163;;
   
    border-radius: 20px;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    border: 1px solid rgb(0, 0, 0);

 margin-top:5%;
    margin-left:24%;
  color: white;
    width:25%;
 height:600px;

flex-wrap:wrap;
  justify-content: center;
    
}

.login-containertutor button{
    width: 70%;
    letter-spacing: 1%;
    border-radius: 20px;
    margin-top: 1%;
    margin-left: 0%;
  
    min-width: 20px;
    font-size: 50%;
    padding: .5%;
    background-color: blue;
    border: 2px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-weight:bold;
}

.login-containertutor{
  

    background-color: transparent;
   
    border-radius: 20px;
    border: 2px solid rgb(0, 0, 0);
    
    padding: .5% ;
    box-shadow: 10px 10px 20px #4e4141;
    margin-top:.5%;
    margin-left:52%;

    width:33%;
 
  

   
  
    
}


.login-containertutor button:hover {
   
    background-color: lightgray;
  color: black;
     
   
}

.videotutor{
    background-color: transparent;
    border: 5px solid rgb(0, 0, 0);
    border-radius: 50px;
    
    padding: 2% ;
    box-shadow: 10px 10px 20px #4e4141;
    margin-top:1%;
    margin-left:1%;

    width:98%;
 height: 810px;
  

   
  
    
}
.videotutor button{
    width: 98%;
    letter-spacing: 1%;
    border-radius: 2px;
    margin-top: -1%;
    margin-left: 0%;
  
    min-width: 20px;
    font-size: 150%;
    padding:  .1%;
background-color: gray;
    border: 2px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-weight:bold;
}

.videotutor button:hover{
     background-color: blue;
}
.login-container input{

   
}
.login-container label{

text-align:left;
   
}
#password{

}
.showpassword_box{
    display: flex;
    margin-bottom: 3%;
    margin-left: 10%;
}
.showpassword_box p{
    margin-left: 1%;
    font-size:50%;
     margin-top: 10%;
}
.box input[type="checkbox"]{
    width: 16px;
    
}




/*message*/

.message{
    width: 100%;
    padding: 1rem;
}

.message.warning{

    background: #e9e77f;
    border-left: 6px solid #ceca09;
    color: #817f05;


}
body{
    font-family: "Arial";
  font-size:14px;
 color:#00008B;
}


.wrapper2 {
    padding:0 2rem 0 2rem;
}

h1{
    text-align: center;
   
}



.table-printp{


font-size:10px;


}


.table-fixedpp{


    margin-top:90px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  700px  ;
    max-height: 700px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:2;


}

.table-fixedpp td{
    padding: 1px;
}

.table-fixed222{


    margin-top:90px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  700px  ;
    max-height: 700px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:2;


}


.table-fixedindexmun{


    margin-top:230px;   
    border: 1px solid black;

   font-size:22px;
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  590px  ;
    max-height: 590px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:5;

}

.table-fixedindex{


    margin-top:230px;   
    border: 1px solid black;

   font-size:22px;
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  590px  ;
    max-height: 590px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:5;

}

.table-fixedarchive{


    margin-top:180px;   
    border: 1px solid black;

   font-size:22px;
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  590px  ;
    max-height: 590px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:5;

}
.table-fixed1{


    margin-top:90px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  700px  ;
    max-height: 700px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:5;

}
.table-fixed{


    margin-top:90px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  335px  ;
    max-height: 335px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:5;

}
.table-fixedproceed{

font-size:14px;
    margin-top:90px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
  min-height:  295px  ;
    max-height: 295px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:2;


}


.table-fixedindex th:nth-child(1){
  padding :15px 5px 15px 5px;
    
      min-width: 480px;
    max-width: 480px;
    font-weight:bold;
}

.table-fixedindex td:nth-child(1){ 
    
   padding :30px 5px 30px 5px;
    
      min-width: 480px;
    max-width: 480px;
     font-weight:bold;
}
.table-fixedindex td:nth-child(2){ 
  padding :30px 5px 30px 5px;
    
      min-width: 480px;
    max-width: 480px;
    
}

.table-fixedindex td:nth-child(3){ 
   padding :30px 5px 30px 5px;
      min-width: 480px;
    max-width: 480px;
}





.table-fixedarchive th:nth-child(1){
  padding :15px 5px 15px 5px;
    
      min-width: 400px;
    max-width: 400px;
    font-weight:bold;
}

.table-fixedarchive td:nth-child(1){ 
    
   padding :10px 5px 10px 5px;
    
      min-width: 400px;
    max-width: 400px;
     font-weight:bold;
}
.table-fixedarchive td:nth-child(2){ 
  padding :10px 5px 10px 5px;
    
      min-width: 400px;
    max-width: 400px;
    
}

.table-fixedarchive td:nth-child(3){ 
    padding :10px 5px 10px 5px;
      min-width: 400px;
    max-width: 400px;
}


.table-fixedarchive td:nth-child(4){ 
   padding :10px 5px 10px 5px;
      min-width: 400px;
    max-width: 400px;
}






.table-fixedindexmun th:nth-child(1){
  padding :15px 5px 15px 5px;
    
      min-width: 480px;
    max-width: 480px;
     font-weight:bold;
}

.table-fixedindexmun td:nth-child(1){ 
    
     padding :30px 5px 30px 5px;
    
      min-width: 480px;
    max-width: 480px;
     font-weight:bold;
}
.table-fixedindexmun td:nth-child(2){ 
     padding :30px 5px 30px 5px;
    
      min-width: 480px;
    max-width: 480px;
    
}

.table-fixedindexmun td:nth-child(3){ 
    padding :30px 5px 30px 5px;
      min-width: 480px;
    max-width: 480px;
}



.table-fixedproceed th{
    padding :20px 5px 20px 5px
    
    
    
}
.table-fixedproceed td{
    padding :30px 5px 30px 5px
    
    
    
}
.table-fixedaddpayrollstudentrecord{


    margin-top:80px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 75%;
    max-width: 75%;
  min-height:  245px  ;
    max-height: 245px;
    overflow-y: scroll;
   
   border-radius: 1px;
  background-color:white;
   position:absolute;
 z-index:2;


}
   .table-fixedrec{


    margin-top:500px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 76%;
    max-width: 76%;
   min-height:  310px  ;
    max-height: 310px;
    overflow-y: scroll;
   
   border-radius: 0px;
  background-color:white;
   position:absolute;
 z-index:2;


}





  .table-fixedpayroll{


    margin-top:430px;   
    border: 1px solid black;

   
    
 margin-left: 20%;
    min-width: 75%;
    max-width: 75%;
   min-height:  390px  ;
    max-height: 390px;
    overflow-y: scroll;
   
   border-radius: 1px;
  background-color:white;
   position:absolute;
 z-index:2;


}
















.table-fixed2{

   margin-top:240px;   
    border: 1px solid black;

   
    
 margin-left: 18%;
    min-width: 80%;
    max-width: 80%;
   min-height:  30%  ;
    max-height: 30%;
    overflow-y: scroll;
   
   border-radius: 1px;
  background-color:transparent;
   position:absolute;
 z-index:-1;

}


.table-fixedsa{

 top:23%;
    margin-top:30px; 
    border: 15px ridge rgb(0, 0, 0);
border-color:  #9dc8daf6;
    border-collapse: collapse;
    
margin-left: 18%;
    width: 81%;
     min-height:  30%;  ;
    max-height: 30%;
    overflow-y: scroll;
   border-radius: 2px;
  
   position:absolute;
    


}

.table-fixedsa2{

   top:55%;
    margin-top:30px; 
    border: 15px ridge rgb(0, 0, 0);
border-color:  #9dc8daf6;
    border-collapse: collapse;
    
 margin-left: 18%;
    width: 81%;
     min-height:  30%; ;
    max-height: 30%;
    overflow-y: scroll;
   border-radius: 2px;
  
   position:absolute;
    


}


.table-fixedindex :hover {
    background-color: lightgray;
   
}

.table-fixedarchive :hover {
    background-color: lightgray;
   
}

.table-fixedaddpayrollstudentrecord :hover {
    background-color: lightgray;
   
}


.table-fixedpayroll :hover {
    background-color: lightgray;
   
}
.table-fixed1 :hover {
    background-color: lightgray;
   
}

.table-fixedindexmun :hover {
    background-color: lightgray;
   
}

.table-fixed :hover {
    background-color: lightgray;
   
}
.table-fixedpp :hover {
    background-color: lightgray;
   
}
.table-fixedrec :hover {
    background-color: lightgray;
   
}

.table-fixed2 :hover {
    background-color: rgb(210, 162, 255);
}


.table-fixedsa :hover {
    background-color: rgb(210, 162, 255);
}

.table-fixedsa2 :hover {
    background-color: rgb(210, 162, 255);
}


tr:nth-child(even){
    background-color: rgb(255, 255, 255);
}
tr:nth-child(odd){
    background-color: rgb(255, 255, 255);
    }

                                                                                     
                                                                                                    
                                                                                                    

    
     td:nth-child(1){
   min-width:160px;
   max-width:160px;
        
    }
 

    td:nth-child(2){
         min-width:180px;
   max-width:180px;
    }


    td:nth-child(3){
       
        min-width:180px;
   max-width:180px;
    }

    td:nth-child(4){
       
      
      min-width:180px;
   max-width:180px;
        
    }

    td:nth-child(5){
       
       min-width:180px;
   max-width:180px;
    }

    td:nth-child(6){
       
     min-width:180px;
   max-width:180px;
  
        
    }

    td:nth-child(7){
       
      min-width:180px;
   max-width:180px;
        
    }

    td:nth-child(8){
       
   min-width:180px;
   max-width:180px;
        
    }

    td:nth-child(9){
       
   min-width:180px;
   max-width:180px;
        
    }

    td:nth-child(10){
       
          min-width:180px;
   max-width:180px;
        
    }

    td:nth-child(11){
       
       min-width:180px;
   max-width:180px;
    }

    td:nth-child(12){
       
   min-width:180px;
   max-width:180px;
  
        
    }

    
 td:nth-child(13){
       
      min-width:180px;
   max-width:180px;
  
        
    }
    
     td:nth-child(14){
       
     min-width:180px;
   max-width:180px;
    }
     td:nth-child(15){
       
     min-width:180px;
   max-width:180px;
    }
     td:nth-child(16){
       
    min-width:180px;
   max-width:180px;
    }
     td:nth-child(17){
       
    min-width:180px;
   max-width:180px;
    }
     td:nth-child(18){
       
        min-width:180px;
   max-width:180px;
    }
 
  td:nth-child(19){
       
        min-width:180px;
   max-width:180px;
    }
 
  td:nth-child(20){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(21){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(22){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(23){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(24){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(25){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(26){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(27){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(28){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(29){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(30){
       
        min-width:180px;
   max-width:180px;
    }
    
     td:nth-child(31){
       
        min-width:180px;
   max-width:180px;
    }
     td:nth-child(32){
       
        min-width:180px;
   max-width:180px;
    }
      td:nth-child(33){
       
        min-width:180px;
   max-width:180px;
    }
      td:nth-child(34){
       
        min-width:180px;
   max-width:180px;
    }
      td:nth-child(35){
       
        min-width:180px;
   max-width:180px;
    }
      td:nth-child(36){
       
        min-width:180px;
   max-width:180px;
    }
      td:nth-child(37){
       
        min-width:180px;
   max-width:180px;
    }
 th:nth-child(0) {
           background-color: transparent;
         
  

        }

  tr{ border-top: 7px #79afc7; 
      
  }
  
   
 .table-fixedsa thead{
       
         font-size: 80%;
  
        
    }
     .table-fixedsa2 thead{
       
         font-size: 80%;
  
        
    }
    
    .table-fixedrec td:first-child,
.table-fixedrec th:first-child{
    
    position: sticky;
    left:0;
    z-index:1;
    
    
}

.table-fixed td:first-child,
.table-fixed th:first-child{
    
    position: sticky;
    left:0;
    z-index:1;
    
    
}

.table-fixed td {
    
    padding :0px 1px 0px 1px;
    
    
}
.table-fixedaddpayrollstudentrecord td:first-child,
.table-fixedaddpayrollstudentrecord th:first-child{
    
    position: sticky;
    left:0;
    z-index:1;
    
    
}


.table-fixedpayroll td:first-child,
.table-fixedpayroll th:first-child{
    
    position: sticky;
    left:0;
    z-index:1;
    
    
}

.table- td {
    

    
}
.table-fixedpayroll td {
    
  padding : 10px 5px ;
    
}


th {

    border: 1px;
   color:white;
padding : .5%;
 position: sticky;
    top:0px;
     background-color:  transparent;
     font-size: 80%;
     text-align:left;
     letter-spacing:.1px;
}
thead{
    font-weight:bold;
    margin-top:-3%;
    text-align: left;
    padding : 1%;
   background-color:  #ff2c2c;
    border: 0px;
    font-size: 90%;
    position: sticky;
    top:20px;
    width:100%;
  
}

.table-fixedaddpayrollstudentrecord td{
    
    padding : 20px 5px ;
    
}

td {
    text-align: left;
    padding : 2px 5px ;
    
   
    min-width: fit-content;
   
border-bottom: 1px solid black;
    font-size: 85%;
    
 
    box-sizing:border-box;
     color:black;
      overflow: hidden;
}


caption{
       position: sticky;
    top:0px;
    left:0px;


}

.button-small3{
 
   
      background-color:#ff2c2c;

  
   

    cursor:default;

   border: 2px solid black ;
   
    color: white;
    text-decoration: none;
    padding: 5px 9px;
     font-size: 90%;
    border-radius:  0 50% 50% 0;
   
  font-weight:bold;
   
} 

.button-small3:hover {
   background-color:rgb(211,211,211);
}

.button-smallb{

     
 border: 2px solid black ;
     background-color: aqua;
     color: black;
     text-decoration: none;
     padding: 12px 30px;
     font-size: 100%;
      border-radius:  10px;
     cursor: pointer;
  
     font-weight:bold;
 
}




.button-small4{

      margin-right:15px;
     margin-left:15px;

     background-color: #ff2c2c;
     color: white;
     text-decoration: none;
     padding: 10PX;
     font-size: 120%;
      border-radius:  1px;
     cursor: pointer;

     font-weight:bold;
 
}

.button-small4:hover{
    background-color: lightgray;
     color:black;
}

.button-smallremovetopayroll{
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 68%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 300px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
   
    height:40px;
text-align:center;
}
.button-smallremovetopayrolll{
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 68%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 205px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
   
    height:40px;
text-align:center;
}

.button-smallremovescholar{
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 68%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 200px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
    border: 2px solid black;
    height:40px;
text-align:center;
}

.button-smallremovetopayrollcancel{
        position:absolute;
    font-weight:bold;
    width: 14%;
    margin-left: 83%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 150px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    height:40px;
text-align:center;
}

.button-smallpayrollcancel{
    position:absolute;
    font-weight:bold;
    width: 28%;
    margin-left: 60%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 250px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    height:40px;
    text-align:center;
}

.button-smallschola#ff2c2citcancel{
    position:absolute;
    font-weight:bold;
    width: 16%;
    margin-left: 82%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 220px;
    font-size: 100%;
    padding: 4px 2px 4px 1px;
    background-color: aqua;
   
    border: none;
    color: black;
    cursor: pointer;
    border: 2px solid black;
    height:40px;
    text-align:center;
}

.button-small{
     margin-bottom:4px;
 margin-right:15px;
     margin-left:15px;
 border: none;
     background-color: #FF2C2C;
     color: white;
     text-decoration: none;
     padding: 5px 15px;
     font-size: 90%;
     text-align:center;
      border-radius:  1px;
     cursor: pointer;
display: block; 
     font-weight:bold;
 border-radius:8px;
}


.button-small:hover{
    background-color: lightgray;
     color:black;
}



.button-small2{
    border:none;
     background-color: aqua;
     color: black;
    text-decoration: none;
   padding: 10px 10px  6px  10px ;
     font-size: 90%;
   border-radius:  0 50% 50% 0;
    cursor: pointer;
   
       font-weight:bold;
}

.button-small2:hover{
    background-color: lightgray;
     color:black;
}
#updatedon {
     font-size: .1px;
    visibility:hidden;
    margin-bottom: -100%;
    margin-top: -100%;
    padding: -100%;
}

@media (max-width: 900px){

  .login-container{
    position:absolute;
       background-color: white;
   
    border-radius: 20px;
    border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    border: 1px solid rgb(0, 0, 0);

 margin-top:550px;
    margin-left:1%;
  color: white;
    width:98%;
 height:600px;
justify-content: center;
display:none;
     
}

.login-container2{
      position:absolute;
background-color: #1C3163;;
   
    border-radius: 20px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
    border: 1px solid rgb(0, 0, 0);

 margin-top:10px;
    margin-left:1%;
  color: white;
    width:98%;
 height:700px;

flex-wrap:wrap;
  justify-content: center;
    
}

     .clearsearchsr button {
    position: absolute;
    border:1px solid black;
    display: block;
     width: 45px;
    height: 40px;
    line-height: 16px;
    font-size: 100%;
  border-radius:5px;
    letter-spacing: .1px;
     right: .1px;
    margin-right:12%;
    background-color: white;
     color:darkblue;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
margin-top: 245px   ;
font-weight:bold;
  z-index:20;

 
  }
  .clearsearchsr input{
   position:absolute;

    width: 80%;
    font-size:70%;
  
 
    height: 40px;
    padding: 0.5%;
      
    border:1px solid black;
    border-radius: 2px;
    color: black;
    
    margin-left: -42%;
    margin-top: 277px;
   border-radius:5px;
    z-index:20;
}
  .payrollstat-container2{
  position:absolute;
   
     width: 98%;
    margin-top: 5px;
    margin-left: 1%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height:630px;
    padding: 1% ;
   
    
    COLOR: white;
    
    z-index:30;
}

.image{
position: fixed;
  bottom: 0;
  right: 0;
    z-index:40;
}

.doc-controlpsyin{
    position:absolute;
    width:80%;
    margin-top:160px;
     margin-left: -42%;
     font-size:70%;
   height:35px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}

.doc-controlpsemin{
    position:absolute;
    width:80%;
    margin-top:202px;
     margin-left: -42%;
     font-size:70%;
   height:35px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
   text-align:Center;
}


.payrolls2 input{
    position:absolute;
    width:93%;
    margin-top:30px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: orange;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}

.payrollcarrier input{
    position:absolute;
    width:93%;
    margin-top:110px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: orange;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.payrollstatus2r input{
    position:absolute;
    width:93%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: lightgreen;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}




.payrollvenue2 input{
    position:absolute;
    width:93%;
    margin-top:270px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.dateclaim2 input{
    position:absolute;
    width:93%;
    margin-top:350px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}.payrollstatus2c input{
      position:absolute;
    width:93%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: red;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.payrollstatus22 input{
      position:absolute;
    width:93%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.payrollstatus2rr input{
    position:absolute;
    width:93%;
    margin-top:190px;
    margin-left:2%;
     font-size:120%;
    height:40px;
 background-color: green;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
}

.rc2 input{
    position:absolute;
    width:93%;
    margin-top:430px;
    margin-left:2%;
     font-size:120%;
    height:50px;
 background-color: white;
    border: none;
      color: black;
    cursor: pointer;
    border-radius: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align:Center;
  z-index:10px;
}
.payrollstat-container2{
  position:absolute;
   
     width: 99%;
    margin-top: 5px;
    margin-left: .5%;
    background-color: #1C3163;
    border: none;
    border-radius: 20px;
    height:630px;
    padding: 1% ;
   
    
    COLOR: white;
    
    z-index:30;
}

.saveps2 button{
    
        position:absolute;
    font-weight:bold;
    width: 96%;
    margin-left: 1%;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-top: 570px;
    font-size: 200%;
    padding: 4px 2px 4px 1px;
    background-color: #ff2c2c;
   
    border: none;
    color: white;
    cursor: pointer;
FONT-WEIGHT:BOLD;
    height:45px;
}

.saveps2 a{
    
        position:absolute;
    font-weight:bold;
    width: 96%;
    margin-left: 1%;
    letter-spacing: 2px;
    border-radius: 8px;
    margin-top: 520px;
    font-size: 90%;
    padding: 4px 2px 4px 1px;
    background-color: LIGHTBLUE;
   
    border: none;
    color: BLACK;
    cursor: pointer;
text-align:center;
    height:30px;
    font-weight:bold;
}

}