* {
    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: red;
    margin-left:10%;

}


.add-container label {
    text-align: center;
    font-size: 80%;
    font-weight: bold;
}


.add-container button {
    font-weight:bold;
    width: 60%;
    margin-left: 20%;
    letter-spacing: 6px;
    border-radius: 5px;
    margin-top: .4%;
    font-size: 100%;
    padding:  1%;
    background-color: indigo;
    border: none;
    color: yellow;
    cursor: pointer;
    border: 2px solid black;
}

.addlabel label{
    font-size: 100%;
    font-weight: bold;

    
}

.add-container button:hover {
 background-color: yellow;
  color:black;
}
.doc-control {
 
    width: 100%;
    letter-spacing: 1px;
    margin-bottom: .5rem;
    font-size: 100%;
    padding: .5%;
    background-color: indigo;
    border: none;
    color: yellow;
    cursor: pointer;
    border-radius: 5px;
  border: 2px solid rgb(0, 0, 0);
  
}




.doc-control:hover {
 background-color: yellow;
 color: black;
}



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

.add-container input:hover{
   background-color: yellow;
 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: 60%;
    width: 100%;
    padding: .2%;
    margin-bottom: -50%;
    
    background-color:  rgba(0, 0, 0, 0.281);
    border-radius: 20px;
    color: rgb(255, 255, 255);
}

.doccount input{
    
    font-weight:bold;
    font-size: 90%;
    width:76%;
    padding: .2%;
 margin-LEFT: 20%;
    margin-bottom:1%;
    border: 2px 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: yellow;
 color:black;
}

#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], 
.form-element input[type=password]{

    font-size: 70%;
    width: 80%;
    padding: .5%;
    border: 2px solid #000000;
    border-radius: 2px;
    color: black;
    letter-spacing: 1px;
}


#formlogin{
    margin:0;
    padding:0;
    box-sizing:border-box;

    background-size:100%;
 background-image: linear-gradient( 114.2deg,  rgba(184,215,21,1) -15.3%, rgba(21,215,98,1) 14.5%, rgba(21,215,182,1) 38.7%, rgba(129,189,240,1) 58.8%, rgba(219,108,205,1) 77.3%, rgba(240,129,129,1) 88.5% );
  
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;

}




#formsadmin{
    margin:0;
    padding:0;
    box-sizing:border-box;
  
    background-size:100%;
    max-height:100%;
    background-repeat: no repeat;
    background-attachment:scroll; 
    background-position: auto;
  background-image: linear-gradient( 114.2deg,  rgba(184,215,21,1) -15.3%, rgba(21,215,98,1) 14.5%, rgba(21,215,182,1) 38.7%, rgba(129,189,240,1) 58.8%, rgba(219,108,205,1) 77.3%, rgba(240,129,129,1) 88.5% );

}
#formindex{
    margin:0;
    padding:0;
    box-sizing:border-box;
 background-image: linear-gradient( 114.2deg,  rgba(184,215,21,1) -15.3%, rgba(21,215,98,1) 14.5%, rgba(21,215,182,1) 38.7%, rgba(129,189,240,1) 58.8%, rgba(219,108,205,1) 77.3%, rgba(240,129,129,1) 88.5% );
 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: linear-gradient( 114.2deg,  rgba(184,215,21,1) -15.3%, rgba(21,215,98,1) 14.5%, rgba(21,215,182,1) 38.7%, rgba(129,189,240,1) 58.8%, rgba(219,108,205,1) 77.3%, rgba(240,129,129,1) 88.5% );
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
}

#formadd{
    margin:0;
    padding:0;
    box-sizing:border-box;
  background-image: linear-gradient( 114.2deg,  rgba(184,215,21,1) -15.3%, rgba(21,215,98,1) 14.5%, rgba(21,215,182,1) 38.7%, rgba(129,189,240,1) 58.8%, rgba(219,108,205,1) 77.3%, rgba(240,129,129,1) 88.5% );
  
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
 
}

#formtutor{
    margin:0;
    padding:0;
    box-sizing:border-box;

    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
    
}

#formsoftcopy{
    margin:0;
    padding:0;
    box-sizing:border-box;
background-image: linear-gradient( 114.2deg,  rgba(184,215,21,1) -15.3%, rgba(21,215,98,1) 14.5%, rgba(21,215,182,1) 38.7%, rgba(129,189,240,1) 58.8%, rgba(219,108,205,1) 77.3%, rgba(240,129,129,1) 88.5% );
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
    
    }

.add-container{
    font-weight:bold;
     width: 39%;
    margin-top: 1%;
    margin-left: 30%;
    background-color: transparent;
      border: 6px solid rgb(0, 0, 0);
    border-radius: 20px;
    height: auto;
    padding: 1% ;
   
    font-size: 100%;

   
}






#password1{
    font-weight:bold;
    font-size: 100%;
    margin-top: 1%;
    margin-bottom: 0%;
}
.showpassword_box1{
    display: flex;
    margin-top: 1%;
    margin-left: -95%;
}
.showpassword_box1 p{
    margin-left: -49%;
    font-size:100%;
     margin-top: 0%;
}
.box input[type="checkbox"]{
    width: 16px;
    
}

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

    margin: 0 auto;
    width: 35%;
   
    margin-left: 32%;
    background-color: rgb(150, 199, 188);
    border: 0.1px solid rgb(128, 128, 128);
    border-radius: 2px;

   
    
}



.uploaddddd{

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






.uploaddd button{
    width: 35%;
    letter-spacing: 1px;
    margin-left: 32%;
    border-radius: 2px;
    margin-top:0%;
    font-size: 100%;
    padding:  .5%;
    background-color: indigo;
    border: 6px solid black;
    color: white;
    cursor: pointer;
  

    font-weight:bold;
  
}
.uploaddd button:hover {
 background-color: yellow;
 color:black;
}

.upload label{
    font-weight:bold;
    width: 50%;
    letter-spacing: 1px;
    border-radius: 10px;
    margin-left: 25%;
    margin-top: -5rem;
    font-size: 100px;
    padding:  1%;
    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: 200px;
   
}

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

    margin: 0 auto;
   max-width: 100%;
    width: 39%;
    margin-top: 1%;
    margin-left: 30%;
    background-color: transparent;
    border: 6px solid rgb(0, 0, 0);
    border-radius: 20px;
    max-height: 650px ;
     min-height: 650px ;
    overflow-y: scroll;
    padding: 1rem ;
    box-shadow: 5px 6px 18px #888;
    font-size: 100%;
   
        
}


.softcopy-containerr{

    margin: 0 auto;
    width: 40%;
    margin-top: -1.5%;
    margin-left: 30%;
    background-color: rgb(31, 112, 95);
    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{
    
    width: 100%;
    letter-spacing: 2%;
    border-radius: 2px;
    margin-top:1%;
    font-size: 120%;
    padding:  .15%;
    background-color: indigo;
    color: white;
    cursor: pointer;
    font-weight:bold;
    border: 2px solid black;
}
.softcopy-container button:hover {
     background-color: yellow;
      color:black;
}
.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);
   
}



.clearsearchphoims button{
       
    
    
    position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
     border-radius: 50%;
 
    top: 12.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    
    
    
    
}



.clearsearchacc button{
       
    
    
    position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
     border-radius: 50%;
 
    top: 19.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    
    
    
    
}
.clearsearchreleased button{
        position: absolute;

  
    width: 12%;
    height: 8%;
    line-height: 16px;
    font-size: 110%;
   
  text-align: left  ;
  font-weight :bold;
    top: 10%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:17%;
    margin-top:5%;
   
    padding: 1%;
    outline: none;
  
    transition: .1s;
     border:10px; 
     text-align:center;
     
      background-color: green;
  
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
 }



.clearsearchprint button {
  
      position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
 border-radius: 50%;
 
    top: 61.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  
  }

.clearsearchprint2 button {
   



   position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 90%;
   
   border-radius: 50%;
   
    top: 61.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
   margin-right:84%;
    margin-top:30px;
     background-color: indigo;
   color:  gray;
    padding: .1%;
    outline: none;
  
    transition: .1s;
  font-weight:bold;
  }
  
  #formindex .clearsearchprint2 button:hover {
    background-color: indigo;
    color:gray;
}



.clearsearchbackup button {
   
          position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
   border-radius: 50%;

    top: 68.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: red;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;


  
  }
  
  @page
{
  size:A4;
  margin: 0;
}
#print-btn
{
  display: none;
  visibility: none;
}
  
  .clearsearchlogout button {

   
   
   
   
        position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
   border-radius: 50%;

    top: 75.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  }
  
   .clearsearchcpw button {
   
   
   
   
       position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
    border-radius: 50%;
 
    top: 40.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  }


   .clearsearchcna button {

   
   
       position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
     border-radius: 50%;

    top: 33.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
   
   
  }
  
    .clearsearchsc button {
 
   
           position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
    border-radius: 50%;

    top: 47.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
  }
  
      .clearsearchadd button {
    position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 95%;
    font-weight:bold;
    border-radius: 50%;

    top: 26.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;

   
    
    
    
    
    
  }
  
     .clearsearcha button {
   
    
    
          position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 90%;
    font-weight:bold;
     border-radius: 50%;
  
    top: 54.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  
  }

.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: 100%;
  }

  .clearsearchs button {
   position: absolute;

    display: block;
    width: 6%;
    height: 6.5%;
    line-height: 16px;
    font-size: 70%;
    font-weight:bold;
   border-radius: 50% 0 0 50%;

    top: 11%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:77%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    
  
  
  
  
  }

  .logo12 a {
    width:9%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: -2%;
    margin-left: 69.5%;
    margin-right:-67.5%;
height:100px;
   width:100px;
    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: 100%;
    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:9%;
    letter-spacing: 2px;
    border-radius: 20px;
    margin-top: -2%;
    margin-left: 85.5%;
    margin-right: -84%;
height:100px;
   width:100px;
    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: 100%;
    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 {
   
  
}
wrapperlink{
width: 100%;
}
.wrapperlink a:hover{
    background-color: yellow;
    color:black;
}



.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: 100%;
    padding:  1%;
    background-color: blue;
    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: yellow;
    color:black;
}
.scb button{
    margin-top: 1%;
   font-size: 100%;
   width:36%;
       background-color: indigo;
    border: 2px solid black;
    color: rgb(255, 255, 255);
     padding:  .3%;
     font-weight:bold;
       margin-left: 31%;
        cursor: pointer;
}

.clearsearchpr button{
 position: absolute;
    border: .1px;
    display: block;
   width: 20.7%;
    height: 8.5%;
    line-height: 16px;
    font-size: 110%;
    border-radius: 2px;
  
    top: 18.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:21.65%;
    margin-top:30px;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 7px solid black;
    font-weight:bold;
        visibility:hidden;
}

.clearsearchprr button{
 position: absolute;
    border: .1px;
    display: block;
    width: 20.7%;
    height: 8.5%;
    line-height: 16px;
    font-size: 110%;
    font-weight:bold;
    border-radius: 2px;
   border: 7px solid black;
    top: 18.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:21.65%;
  margin-top:30px;
   background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
    visibility:hidden;
}

#formindex .clearsearchprr button:hover {
    background-color: yellow;
     
}

#formindex .clearsearchpr button:hover {
    background-color: yellow;
     
}
.clearsearche button{
 position: absolute;
    border: .1px;
    display: block;
   width: 27.6%;
    height: 8.5%;
    line-height: 16px;
    font-size: 110%;
    border-radius: 2px;
 
    top: 18.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:28.5%;
    margin-top:30px;
    background-color: indigo;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    border: 10px solid black;
    font-weight:bold;
    visibility:hidden;
}


.clearsearchee button{
 position: absolute;
    border: .1px;
    display: block;
   width: 27.6%;
    height: 8.5%;
    line-height: 16px;
    font-size: 110%;
    font-weight:bold;
    border-radius: 2px;
   border: 10px solid black;
    top: 18.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:28.5%;
    margin-top:30px;
    background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
visibility:hidden;
    
}

.image{
 position: absolute;
   margin-left:70%;
    margin-top:-1.5%;
}

.image2{
 position: absolute;
   margin-left:77%;
    margin-top:-1.5%;
}

.image3{
 position: absolute;
   margin-left:85.5%;
    margin-top:-1.5%;
}

.image4{
 position: absolute;
   margin-left:92.5%;
    margin-top:-1.5%;
}
#formindex .clearsearchee button:hover {
    background-color: yellow;
     
}
#formindex .clearsearche button:hover {
    background-color: yellow;
     
}
.clearsearcho button{
 position: absolute;
    border: .1px;
    display: block;
    width: 18%;
    height: 8%;
    line-height: 16px;
    font-size: 100%;
    border-radius: 50% 0 0 50%;

    top: 9.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:20%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
  
    font-weight:bold;
}


.clearsearchoo button{
 position: absolute;


    border: .1px;
    display: block;
    width: 18%;
    height: 8%;
    line-height: 16px;
    font-size: 100%;
    font-weight:bold;
    border-radius: 50% 0 0 50%;


    top: 9.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:20%;
    margin-top:30px;
    background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;

    
}


.clearsearchl button{
 position: absolute;
    border: .1px;
    display: block;
    width: 18%;
    height: 8%;
    line-height: 16px;
    font-size: 100%;
    border-radius:  0 50% 50% 0;

    top: 9.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .05px;
    margin-right:1%;
    margin-top:30px;
    background-color: indigo;
    color: yellow;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;


    font-weight:bold;
}


.clearsearchll button{
 position: absolute;
    border: .1px;
    display: block;
    width: 18%;
    height: 8%;
    line-height: 16px;
    font-size: 100%;
    font-weight:bold;
    border-radius: 0 50% 50% 0;
  
   
    top: 9.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .05px;
    margin-right:1%;
    margin-top:30px;
    background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;

    
}


#formindex .clearsearchoo button:hover {
    background-color: yellow;
     
}

#formindex .clearsearcho button:hover {
    background-color: yellow;
     
}
.scb button:hover{
    background-color: yellow;
color:black;
}

#formindex .BACKUP button:hover{
    background-color: yellow;
color:black;
   
}



#formindex .clearsearchll button:hover {
    background-color: yellow;
     color:black;
}


#formindex .clearsearchl button:hover {
    background-color: yellow;
     color:black;
}


#formindex .clearsearchbackup2 button:hover {
    background-color: indigo;
    color:gray;
}

.clearsearchs input{
   position:absolute;
   margin: auto; 
    width:38%;
   font-size: 140%;
    height:6.5%;
    padding: 0.5%;
       top: 11%;
    bottom: 0;
     border: 1px solid black;
    
     border-radius: 0 80% 80% 0;
    color: rgb(12, 0, 0);
    margin-left: 22.5%;
    margin-top: 30px;
    
    
}

.clearsearchsadmin input{
    position:absolute;
   margin: auto; 
    width:38%;
   font-size: 120%;
    height:6.5%;
    padding: 0.5%;
       top: 2%;
    bottom: 0;
     border: 6px solid black;
    
    border-radius: 2px;
    color: rgb(12, 0, 0);
    margin-left: 22.5%;
    margin-top: 30px;
}
.clearsearchsadmin button{
  position: absolute;

    display: block;
    width: 6%;
    height: 6.5%;
    line-height: 16px;
    font-size: 70%;
    font-weight:bold;
    border-radius: 2px;
  border: 6px solid black;
    top: 2%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:77%;
    margin-top:30px;
    background-color: blue;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
}

.clearsearchsadmin  input:hover {
   background-color: yellow;
}
.clearsearchs input:hover {
   background-color: yellow;
}

.clearsearchcna2 button {

 
   
   
   
     position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 90%;
   
    border-radius: 50%;
 
    top: 33.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
     background-color: indigo;
   color:  gray;
    padding: .1%;
    outline: none;
  
    transition: .1s;
    font-weight:bold;
}


#formindex .clearsearchcna2 button:hover {
    background-color: indigo;
     color:gray;
}
.clearsearchaddindex2 button {
 
   
   
   
      position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 90%;
   
    border-radius: 50%;
   
    top: 26.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:84%;
    margin-top:30px;
       background-color: indigo;
   color:  gray;
    padding: .1%;
    outline: none;
  
    transition: .1s;
    font-weight:bold;
}


#formindex .addindex2 button:hover {
    background-color: indigo;
     color:gray;
}

.clearsearchbackup2 button {
   
   
   
   
    position: absolute;
    border: .1px;
    display: block;
    width: 15%;
    height: 6.5%;
    line-height: 16px;
    font-size: 90%;
   
 border-radius: 50%;
 
    top: 68.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
   margin-right:84%;
    margin-top:30px;
background-color: indigo;
   color:  gray;
    padding: .1%;
    outline: none;
font-weight:bold;
    transition: .1s;
}

.wrapperbutton button:hover{
    background-color: yellow;
    color:black;
}

.login-container button{
    width: 30%;
    letter-spacing: 1px;
    border-radius: 20px;
    margin-top: 1.8rem;
    font-size: 100%;
    padding:  2%;
    background-color: indigo;
    border: none;
    color: yellow;
    cursor: pointer;
    font-weight:bold;

  

   
  

    

}



.rc{
  
    margin-left: 10%;
  
  
  
}


.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: yellow;
    color: black;
}
.login-container input:hover{
    background-color: yellow;
}



.login-container{
     background-color: transparent;
   
    border-radius: 20px;
    border: 1px solid rgb(0, 0, 0);
    padding:.5% ;
  box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;  margin-top:4%;
    margin-left:30%;
  color: white;
    width:35%;
 

  
    
}

.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;
    
        animation: rotating 4s linear infinite;

   animation-delay: -1s;
}

.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: yellow;
  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{
    font-weight:bold;
    font-size: 70%;
    margin-bottom: .5%;
    margin-top: .5%;
   
}
.login-container label{

text-align:left;
   
}
#password{
    font-weight:bold;
    font-size: 70%;
    margin-top: 1%;
 

}
.showpassword_box{
    display: flex;
    margin-bottom: 3%;
    margin-left: 10%;
}
.showpassword_box p{
    margin-left: 1%;
    font-size:50%;
     margin-top: 1%;
}
.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";
    color:#00008B;

}


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

h1{
    text-align: center;
   
}


.table-fixed{
   top:19%;
 margin-top: 30px   ;
    border: 10px solid black ;
    
 margin-left: 17%;
    width: 82%;
   min-height:  63%  ;
    max-height: 63%;
    overflow-y: scroll;
   border-radius: 30px;
  
   position:absolute;
 z-index:-1;
color: black;
 
}




.table-fixed2{

       top:19%;
 margin-top: 30px   ;
    border: 10px solid black ;

    border-collapse: collapse;
    
 margin-left: 17%;
    width: 82%;
     min-height: 63%  ;
    max-height: 63% ;
    overflow-y: scroll;
   border-radius: 30px;
  
   position:absolute;
     z-index:-1;

color: black;
}


.table-fixedsa{

  top:10%;
 margin-top: 30px   ;
    border: 10px solid black ;
    
 margin-left: 17%;
    width: 82%;
   min-height:  40%  ;
    max-height: 40%;
    overflow-y: scroll;
  border-radius: 30px;
  
   position:absolute;
 z-index:-1;
    


}

.table-fixedsa2{

       top:52%;
 margin-top: 30px   ;
    border: 10px solid black ;

    border-collapse: collapse;
    
 margin-left: 17%;
    width: 82%;
     min-height: 40%  ;
    max-height: 40% ;
    overflow-y: scroll;
    border-radius: 30px;
  
   position:absolute;
     z-index:-1;
    


}


.table-fixed :hover {
    background-color: rgb(162, 218, 248);
}

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


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

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


tr:nth-child(even){
    background-color: rgb(255, 255, 255);
}
tr:nth-child(odd){
    background-color: rgb(255, 255, 255);
    }
    th:nth-child(1){
        background-color:  black;
            }
            th:nth-child(2){
                background-color:  black;
                    }
                    th:nth-child(3){
                        background-color:  black;
                            }
                            th:nth-child(4){
                                background-color:  black;
                                    }
                                    th:nth-child(5){
                                        background-color:  black;
                                            }
                                            th:nth-child(6){
                                                background-color:  black;
                                                    }
                                                    th:nth-child(7){
                                                        background-color:  black;
                                                            }
                                                            th:nth-child(8){
                                                                background-color:  black;
                                                                    }
                                                                    th:nth-child(9){
                                                                        background-color:  black;
                                                                            }
                                                                            th:nth-child(10){
                                                                                background-color:  black;
                                                                                    }
                                                                                    th:nth-child(11){
                                                                                        background-color: black;
                                                                                            }
                                                                                            th:nth-child(12){
                                                                                                background-color:  black;
                                                                                                    }
                                                                                                    
                                                                                                    

    td:nth-child(1){
      background-color: black;
        width:6%;
  
        
    }
 

    td:nth-child(2){
        width:6%;
    }


    td:nth-child(3){
       
        width:9%;
        
    }

    td:nth-child(4){
       
      
       width:9%
        
    }

    td:nth-child(5){
       
        width:7%;
    }

    td:nth-child(6){
       
      width:7%;
  
        
    }

    td:nth-child(7){
       
       width:7%;
  
        
    }

    td:nth-child(8){
       
     width:7%;
        
    }

    td:nth-child(9){
       
     width:7%;
        
    }

    td:nth-child(10){
       
         width:7%;
        
    }

    td:nth-child(11){
       
       width:7%;
    }

    td:nth-child(12){
       
         width:10%;
  
        
    }

    
 td:nth-child(13){
       
       width:7%;
  
        
    }


   
 th:nth-child(0) {
           background-color: black;
         
  

        }
 
 .table-fixedsa2 td:nth-child(1){
       
       width:18%;
  
        
    }
    
     .table-fixedsa2 td:nth-child(2){
       
       width:4%;
  
        
    }
  .table-fixedsa2 td:nth-child(3){
       
         width:18%;
  
        
    }
     .table-fixedsa2 td:nth-child(4){
       
           width:4%;
  
        
    }
  
   .table-fixedsa2 td:nth-child(5){
       
         width:18%;
  
        
    }
    
     .table-fixedsa2 td:nth-child(6){
       
           width:18%;
  
        
    }
    
     .table-fixedsa2 td:nth-child(7){
       
          width:18%;
  
        
    }
  tr{ border-top: 7px solid black;
      
  }
  
   

th {
  
    border-bottom: 20px solid black;
   color:white;
padding : .5%;
}
thead{
    font-weight:bold;
    margin-top:30px;
    text-align: center;
    padding : 1%;
 
    border-bottom: 0px solid rgb(0, 0, 0);
    font-size: 75%;
    position: sticky;
    top:0.1%;
    width:100%;
    
}
.thead :hover {
 background-color: black;
    
}
.table-fixed caption{
       position: sticky;
    top:0%;
    margin-top:0px;
    left:0px;
  
  background-color: black;
  color: white;
}
.table-fixed caption:hover {
    background-color: black;
}


.table-fixed2 caption{
       position: sticky;
    top:0px;
    left:0px;
  
  background-color: black;
  color: white;
}
.table-fixed2 caption:hover {
    background-color: black;
}
td {
  
    text-align: left;
    padding : .1%;
    
   
    min-width: fit-content;
   
    border-bottom: 2px solid rgb(0, 0, 0);
    font-size: 80%;
    
 
    box-sizing:border-box;
  margin-top:30px;
       top:300%;
 
}

.button-small3{
 
      background-color:indigo;

  
   

    cursor:default;

    border:none;
   
    color: gray;
    text-decoration: none;
    padding: 10px 10px  6px  10px ;
     font-size: 90%;
    border-radius:  0 50% 50% 0;
  font-weight:bold;
   
} 
td{
    margin-top:30px;
    top:60%;
    
}
.button-small3:hover {
   background-color:indigo;
}


.button-small{
    
     border:none;
    background:indigo;
     color: yellow;
     text-decoration: none;
     padding: 10px 10px  6px  10px ;
     font-size: 100%;
      border-radius:  0 50% 50% 0;
     cursor: pointer;
  
     font-weight:bold;
     
}
.button-small:hover{
    background-color: yellow;
color:black;
}



.button-small2{
    border:none;
     background:indigo;
    color: yellow;
    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: yellow;
     color:black;
}
#updatedon {
     font-size: .1px;
    visibility:hidden;
    margin-bottom: -100%;
    margin-top: -100%;
    padding: -100%;
}



@media (max-width: 800px){
    .login-container{
        background-color: transparent;
      
        border-radius: 0px;
        padding:0%;
        
    font-size: 120%;
       margin-left:0%;
       margin-top:5%;
       margin-bottom:0%;
    
        width:100%;
     height:450px;
      
    
       
      box-shadow: 0px 0px 0px ;
        
    }

}
@media (max-width: 800px){
.login-container button{
    width: 90%;
    letter-spacing: 1px;
    border-radius: 2px;
    margin-top: 0%;
    margin-bottom: 0%;
    font-size: 100%;
    padding:  .5rem;
       background-color: blue;
    border: none;
    color: white;
    cursor: pointer;
    font-weight:bold;
    margin-left:1%;
    border: 2px solid rgb(0, 0, 0);

  


}
    

}

@media (max-width: 800px){
    .form-element input[type=text]{
        margin-bottom: -2%;
        margin-top:1%;
        font-size: 100%;
        width: 90%;
        padding: 2%;
        border: 2px solid #000000;
        border-radius: 2px;
        color: rgb(12, 0, 0);
    }
    
        
    
    }

    @media (max-width: 800px){
  
        .form-element input[type=password]{
            margin-top:1%;
            font-size: 100%;
            width: 90%;
            padding: 2%;
            border: 2px solid #000000;
            border-radius: 2px;
            color: rgb(12, 0, 0);
        }

   #password{
    font-weight:bold;
    font-size: 100%;
    margin-top: 1%;
 

}
.showpassword_box{
    display: flex;
    margin-bottom: 3%;
    margin-left: 10%;
}
.showpassword_box p{
    margin-left: 1%;
    font-size:50%;
     margin-top: 1%;
}
.box input[type="checkbox"]{
    width: 16px;
    
}  
        
        }
@media (max-width: 800px){
        .table-fixed{
            font-weight:bold;
                margin-top:30px;
      top: 25%;
            border: 3px solid rgb(0, 0, 0);
            box-shadow: 5px 6px 50px rgb(255, 255, 255);
            border-collapse: collapse;
            
            margin-left: .5%;
            width: 99%;
            min-height: 350px ;
            max-height: 350px ;
            overflow-y: scroll;
           border-radius: 2px;
          font-size: 150%;
            
        
        
        }

        .table-fixed2{
             font-weight:bold;
                margin-top:30px;
      top: 25%;
            border: 3px solid rgb(0, 0, 0);
            box-shadow: 5px 6px 50px rgb(255, 255, 255);
            border-collapse: collapse;
            
            margin-left: .5%;
            width: 99%;
            min-height:  350px ;
    max-height: 350px ;
    overflow-y: scroll;
   border-radius: 2px;
 
        
          font-size: 150%;
        }
        
         .table-fixedsa{
            font-weight:bold;
        margin-top: 71%  ;
            border: 3px solid rgb(0, 0, 0);
            box-shadow: 5px 6px 50px rgb(255, 255, 255);
            border-collapse: collapse;
            
            margin-left: .5%;
            width: 99%;
            min-height: 200px ;
            max-height: 200px ;
            overflow-y: scroll;
           border-radius: 2px;
        
        
        
        
        }
         .table-fixedsa2{
            font-weight:bold;
            margin-top: 1%   ;
            border: 3px solid rgb(0, 0, 0);
            box-shadow: 5px 6px 50px rgb(255, 255, 255);
            border-collapse: collapse;
            
            margin-left: .5%;
            width: 99%;
            min-height: 200px ;
            max-height: 200px ;
            overflow-y: scroll;
           border-radius: 2px;
        
        
        }
        
        .clearsearchsadmin input{
  position:absolute;
    width: 82%;
   font-size: 95%;
    height:56px;
    padding: 0.5%;
    border: 6px solid blue;
    border-radius: 2px;
    color: rgb(12, 0, 0);
    margin-left: 18%;
    margin-top: 61%;
}

.clearsearchsadmin button {
    position: absolute;
    border: .1px;
    display: block;
    width: 18%;
    height: 56px;
    line-height: 16px;
    font-size: 75%;
    border-radius: 2px;
   border: 6px solid blue;
    top: 2%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:82%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  margin-top:61%;
  }
        
       
       

    
  
.clearsearchprint2 button {
   position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:49.5%;
    margin-top:30%;

    background-color: rgb(211,211,211);
    color: gray;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
font-weight:normal;

visibility:hidden;
  
  }

    .clearsearchbackup2 button {
 position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;
top :10%;
    bottom: 0;
    right: .1px;
    
    letter-spacing: .1px;
    margin-right:.5%;
    margin-top:0%;
  
    background-color: rgb(211,211,211);
    color: gray;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
font-weight:normal;
visibility:hidden;
}
    
    
 
    .clearsearchcna2 button {

           position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:49.5%;
     margin-top:10%;
   visibility:hidden;
 background-color: rgb(211,211,211);
    color: gray;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
    

}
    
    
    
    


    .clearsearchaddindex2 button {

        
        
            position:absolute;
    border: .1px;
    display: block;
    width: 98.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:.5%;
    margin-top:30px;
      top: 6.5%;
   
 background-color: rgb(211,211,211);
    color: gray;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
    
    }


 

       

    .clearsearch input{
   position:absolute;
    width: 82%;
   font-size: 300%;
    height:37px;
    padding: 0.5%;
    border: 4px solid blue;
    border-radius: 2px;
    color: rgb(12, 0, 0);
    margin-left: 18%;
    margin-top: 45%;
}


.clearsearch button {
    position: absolute;
    border: .1px;
    display: block;
    width: 18%;
    height: 38px;
    line-height: 16px;
    font-size: 200%;
    border-radius: 2px;
   border: 6px solid blue;
    top: 2%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:82%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  margin-top:45%;
  }
  
   
.clearsearchprint button {
    position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:49.5%;
    margin-top:30%;

    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
   visibility:hidden;


}
  

  
.clearsearchbackup button {
 position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    visibility:hidden;
    letter-spacing: .1px;
    margin-right:.5%;
    margin-top:0%;
    
    background-color: blue;
     background-color: rgb(218, 8, 8);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
font-weight:normal;
  
  }
  
  

  .clearsearchlogout button {
 position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:.5%;
    margin-top:30px;
    top: 1%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
  }
  
  

  .clearsearchacc button {
 position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 5px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:49.5%;
   top: 1%;
      margin-top:30px;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
  }
 
   .clearsearchcpw button {
 position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 7%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:.5%;
  margin-top:10%;
    
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
   visibility:hidden;
  }


   .clearsearchcna button {
   position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:49.5%;
    margin-top:10%;
    
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
   visibility:hidden;
  }
  
  
  
    .clearsearchsc button {
 position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:49.5%;
    margin-top:20%;
    
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
   visibility:hidden;
  }
  
  
      .clearsearchadd button {
    position:absolute;
    border: .1px;
    display: block;
    width: 98.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;


    right: .1px;
    
    letter-spacing: .1px;
    margin-right:.5%;
    margin-top:30px;
      top: 6.5%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
  }
  
  

     .clearsearcha button {
    position:absolute;
    border: .1px;
    display: block;
    width: 49.5%;
    height: 5%;
    line-height: 16px;
    font-size: 300%;
    border-radius: 2px;
   border: 6px solid blue;

    right: .1px;
    
    letter-spacing: .1px;
    margin-right:.5%;
    margin-top:20%;
  
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
   visibility:hidden;
  
  }
  
 
        td {
            text-align: left;
            padding : .2%;
           
            
           
            border-bottom: 1px solid rgb(0, 0, 0);
            font-size: 150%;

            box-sizing:border-box;
        min-width: 70px;
         
        
}


        td:nth-child(1){
            background-color: rgba(0, 0, 0, 0.281);
            min-width: 70px;
      position: sticky;
      top:65px;
            left:0px;
          
        
 }


thead{
            font-weight:bold;
           
            text-align: center;
           
            border-bottom: 1px solid rgb(0, 0, 0);
            font-size: 150%;
           margin-top:30px;
            top:0%;
            width:50%;
            
        

 }
        
    
       

        .add-container label {
            text-align: center;
            font-size: 70%;
          
        }
        
        
        .add-container button {
            font-weight:bold;
            width: 100%;
            letter-spacing: 6px;
            border-radius: 2px;
            margin-top: .2rem;
            font-size: 100%;
            padding:  1%;
          
            cursor: pointer;
           
             margin-left: .5%;
             
              background-color: blue;
    border: none;
    color: white;
    cursor: pointer;
    border: 2px solid black;
        }

        .add-container{
            font-weight:bold;
            margin: 0 auto;
            width: 99%;
            margin-top: 1%;
            margin-left: .5%;
            background-color: transparent;
            border: 5px solid rgb(0, 0, 0);
            border-radius: 2px;
            height: auto;
            padding: 1rem ;
            box-shadow: 5px 6px 18px #888;
           
           font-size: 300%;
        }
        .add-container input {
            font-weight:bold;
            font-size: 100%;
            width: 100%;
            padding: 0.5%;
            margin-bottom: 1%;
            border: 2px solid #000000;
            border-radius: 2px;
            color: rgb(12, 0, 0);
            letter-spacing: 1px;
        }

        .doc-control {
            font-weight:bold;
            width: 100%;
            letter-spacing: 1px;
            border-radius: 4px;
            margin-bottom: 1%;
            font-size: 100%;
            padding:  0.5%;
             background-color: blue;
            border: none;
            color: white;
            cursor: pointer;
            border-radius: 2px;
            border: 2px solid rgb(0, 0, 0);
        }
        .delete button{
            width: 100%;
            letter-spacing: 6px;
            border-radius: 20px;
            margin-top: .5%;
           
            font-size: 80%;
            padding:  .3%;
            background-color: rgb(218, 8, 8);
            border: none;
            color: white;
            cursor: pointer;
            border: 2px solid rgb(0, 0, 0);
        }


        .softcopy-container{

            margin: 0 auto;
            width: 99%;
            margin-top: 1%;
            margin-left: .5%;
            background-color: transparent;
            border: 4px solid rgb(0, 0, 0);
            border-radius: 20px;
            height: auto;
            padding: 1rem ;
            box-shadow: 5px 6px 18px #888;
            font-size: 70%;
            border-radius: 2px;
           
                
        }
        .softcopy-containerr{
        
           
            margin: 0 auto;
            width: 80%;
            margin-top: 1%;
            margin-left: 10%;
            background-color: rgb(150, 199, 188);
            border: 2px solid rgb(0, 0, 0);
            border-radius: 20px;
            height: auto;
            padding: 1rem ;
            box-shadow: 5px 6px 18px #888;
            font-size: 70%;
           
                
        }
        
        .softcopy-container button{
            width: 100%;
            letter-spacing: 1px;
            border-radius: 2px;
            margin-top: .2rem;
            font-size: 100%;
            padding:  1%;
            background-color: blue;
            border: none;
            color: white;
            cursor: pointer;
            font-weight:bold;
            border: 2px solid rgb(0, 0, 0);
        }
        
        .scb button{
    margin-top: 6%;
   font-size: 100%;
   width:98%;
       background-color: blue;
    border: 2px solid black;
    color: rgb(255, 255, 255);
     padding:  .3%;
     font-weight:bold;
       margin-left: 1%;
        cursor: pointer;
}
    
.upload{

   
    width: 80%;
   
    margin-left: 10%;
    background-color: rgb(150, 199, 188);
    border: 4px solid black;
    border-radius: 20px;
    padding: .1%rem ;
    box-shadow: 5px 6px 18px #888;
   
    

        }
        .uploaddddd{

            margin: 0 auto;
            width: 100%;
           
            margin-left: 0%;
            background-color: rgb(150, 199, 188);
            border: 0.1px solid rgb(128, 128, 128);
            border-radius: 20px;
            
            padding: .1% ;
            box-shadow: 5px 6px 18px #888;
            font-size: 70%; 
            position: sticky;
            margin-top: 5%;
            
            overflow-y: scroll;
            max-height: 500px;
            border: 2px solid rgb(0, 0, 0);
        }
        
        
        
        
        
        
        .uploaddd button{
            width: 80%;
            letter-spacing: 6px;
            margin-left: 10%;
            border-radius: 2px;
            font-size: 80%;
            padding:  .2%;
            background-color: blue;
            border: none;
            color: white;
            cursor: pointer;
            top:50px;
            margin-top: 1%;
            font-weight:bold;
            border: 2px solid rgb(0, 0, 0);
        }
     
        .upload label{
            font-weight:bold;
            width: 80%;
            letter-spacing: 1px;
            border-radius: 10px;
            margin-left: 25%;
            margin-top: -5rem;
            font-size: 70%;
            padding:  0.1rem;
            background-color: rgb(150, 199, 188);
            border: 2px solid rgb(0, 0, 0);
            color: rgb(0, 0, 0);
            cursor: pointer;
            
            
        }
        
        .upload img {
            height: 500px;
            width: 500;
           
        }
        
        .upload iframe {
            height: 500px;
            width: 700px;
           
        }

        .docno input {
            text-align: center;
            font-weight:bold;
            font-size: 70%;
            width: 100%;
            padding: 0.1%;
            margin-bottom: 1%;
            border: 2px solid #000000;
            background-color:  rgba(0, 0, 0, 0.281);
            border-radius: 0px;
            color: rgb(255, 255, 255);
        }

        .doccount input{

            font-weight:bold;
            font-size: 50%;
            width: 99%;
            padding: 0.2%;
        margin-left: .5%;
            margin-TOP: 180%;
            border: 2px solid #000000;
            background-color:  rgba(0, 0, 0, 0.582);
            border-radius: 0px;
            color: rgb(255, 255, 255);
     
  
   position:absolute;
        }


        .button-small{

     border:none;
     background:blue;
     color: white;
     text-decoration: none;
     padding: 6%;
     font-size: 100%;
     border-radius: 2px;
     cursor: pointer;
     border: 2px solid rgb(0, 0, 0);
    
     
}

.button-small2{
    border:none;
    background:blue;
    color: white;
    text-decoration: none;
    padding: 6%;
     font-size: 100%;
    border-radius: 2px;
    cursor: pointer;
    border: 2px solid rgb(0, 0, 0);
}

.button-small3{
   
  

  
   background:rgb(211,211,211);

    cursor:default;

    border:none;
   color: gray;
    
    text-decoration: none;
    padding: 4%;
     font-size: 100%;
    border-radius: 2px;
    border: 2px solid rgb(0, 0, 0);
   
} 

 

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


.doccount button{
    
    width: 99%;
    letter-spacing: 2px;
    border-radius: 2px;
    margin-top: 0.3%;
    margin-left: .5%;
    margin-bottom: 0.02%;
    
    font-size: 80%;
    padding:  .5%;
    background-color: gray;
    border: 2px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-weight:bold;

}

.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: blue;
    border: 2px solid black;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-block;
    font-weight:bold;
}

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

.wrapperlink label{
    font-weight:bold;
    width: 50%;
    letter-spacing: 2px;
    border-radius: 10px;


    font-size: 50%;
    padding:  0.1%;
    background-color: rgb(150, 199, 188);
    border: none;
    color: rgb(0, 0, 0);
    cursor: default;
 
}

#formlogin{
    margin:0;
    padding:0;
    box-sizing:border-box;
    
    background-size:100%;
 
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
font-size: 40%;
}

#formindex{
    margin:0;
    padding:0;
    box-sizing:border-box;
  
    background-size:100%;
    max-height:100%;
    background-repeat: no repeat;
    background-attachment:scroll; 
    background-position: auto;
font-size: 30%;
}

#formadd{
    margin:0;
    padding:0;
    box-sizing:border-box;
 
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
    font-size: 30%;
    
}
#formsoftcopy{
    margin:0;
    padding:0;
    box-sizing:border-box;
  
    background-size:100%;
    background-repeat: no repeat;
    background-attachment: scroll; 
    background-position: auto;
     font-size: 30%;
    }

    .addlabel label{
        font-size: 110%;
        font-weight: bold;
        
    }
    .login-container label{
 font-size: 100%;
  text-align: left;
   letter-spacing: 1px;
   margin-top:2%;
}

.login-containertutor button{
    width: 90%;
    letter-spacing: 1%;
    border-radius: 20px;
    margin-top:0%;
    margin-left: 0%;
  

    font-size: 40%;
    padding: 1%;
    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;
box-shadow: 0px 0px 0px;
    border-radius: 0px;
    
    padding: .2% ;
    
    margin-top:1%;
    margin-left:0%;

    width:100%;
 
  

   
  
    
}

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

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

  }

  .clearsearch {
    height: 0%;
  }

  .clearsearchi button {
    position: absolute;
    border: .1px;
    display: block;
    width: 25%;
    height: 70%;
    line-height: 16px;
    font-size: 70%;
    border-radius: 2px;
    border: 6px solid blue;
    top: 0%;
    bottom: 0%;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
      margin-top:6%;
    margin-right:1%;
    background-color: gray;
    color: rgb(255, 255, 255);
    padding: .001%;
    outline: none;
    cursor: pointer;
    transition: .1s;
  
  }

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

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


 .clearsearch .logo12 {
    position: absolute;
    border: 0px;
    display: block;
    width: 0%;
    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%;
 
    color: rgb(255, 255, 255);
    padding: 0%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
  }

  .logo34 a {
    width:0%;
    letter-spacing: 0px;
    border-radius: 0px;
    margin-top: 90%;
    margin-left: 0%;
    margin-right: 0%;
  height:0px;
   
    font-size: 0%;
    padding: 0rem;

    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: 0%;
    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:90%;
    background-color:blue;
    color: rgb(255, 255, 255);
    padding: 0%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   
  
  }

  .logo34 a:hover {
   
    background-color:white;
    opacity:0;
     
   
}
caption{
 
       position: sticky,front;
    top:0px;
    text-align:left;
     left:0px;
   
  background-color: black;
  color: white;
}
caption :hover {
    background-color: black;
}


.clearsearchpr button{
 position: absolute;
    border: .1px;
    display: block;
   width: 25%;
    height: 6%;
    line-height: 16px;
    font-size: 140%;
    border-radius: 2px;
   border: 6px solid blue;
    
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:25%;
  margin-top:30px;
      top: 18.5%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
   visibility:hidden;
}

.clearsearchprr button{
 position: absolute;
    border: .1px;
    display: block;
    width: 25%;
    height: 6%;
    line-height: 16px;
    font-size: 140%;
    font-weight:bold;
    border-radius: 2px;
   border: 6px solid black;
    
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:24.5%;
margin-top:30px;
      top: 18.5%;
   background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
 
       visibility:hidden;
}

#formindex .clearsearchprr button:hover {
    background-color: yellow;
     
}

#formindex .clearsearchpr button:hover {
    background-color: yellow;
     
}
.clearsearche button{
 position: absolute;
    border: .1px;
    display: block;
   width: 33%;
    height: 6%;
    line-height: 16px;
    font-size: 140%;
    border-radius: 2px;
   border: 6px solid blue;

    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:33.5%;
    margin-top:30px;
      top: 18.5%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
    font-weight:bold;
}


.clearsearchee button{
 position: absolute;
    border: .1px;
    display: block;
   width: 33%;
    height: 6%;
    line-height: 16px;
    font-size: 140%;
    font-weight:bold;
    border-radius: 2px;
  border: 6px solid black;
  
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:33.5%;
   margin-top:30px;
      top: 18.5%;
    background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    
    transition: .1s;
 
    
}


.clearsearcho button{
 position: absolute;
    border: .1px;
    display: block;
    width: 33%;
    height: 6%;
    line-height: 16px;
    font-size: 100%;
    border-radius: 2px;
   border: 6px solid blue;
   
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:66.5%;
    margin-top:30px;
      top: 18.5%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
   border: 2px solid rgb(0, 0, 0);
    
}


.clearsearchoo button{
 position: absolute;
    border: .1px;
    display: block;
    width: 33%;
    height: 6%;
    line-height: 16px;
    font-size: 160%;
    font-weight:bold;
    border-radius: 2px;
  border: 6px solid black;
    top: 18.5%;
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:66.5%;
    margin-top:30px;
      top: 18.5%;
    background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;

    
}


.clearsearchl button{
 position: absolute;
    border: .1px;
    display: block;
    width: 33%;
    height: 6%;
    line-height: 16px;
    font-size: 100%;
    border-radius: 2px;
   border: 6px solid blue;
   
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:.5%;
 margin-top:30px;
      top: 18.5%;
    background-color: blue;
    color: rgb(255, 255, 255);
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    
}


.clearsearchll button{
 position: absolute;
    border: .1px;
    display: block;
    width: 33%;
    height: 6%;
    line-height: 16px;
    font-size: 160%;
    font-weight:bold;
    border-radius: 2px;
   border: 6px solid black;
  
    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:.5%;
    margin-top:30px;
      top: 18.5%;
    background-color: yellow;
    color: black;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;

    
}


  .clearsearchs button {
   position: absolute;

    display: block;
    width: 20%;
    height: 6%;
    line-height: 16px;
    font-size: 150%;
    font-weight:bold;
    border-radius: 2px;
  border: 6px solid black;

    bottom: 0;
    right: .1px;
    margin: auto; 
    letter-spacing: .1px;
    margin-right:80%;
     margin-top:30px;
      top: 12%;
    background-color: blue;
    color: white;
    padding: .1%;
    outline: none;
    cursor: pointer;
    transition: .1s;
    
  
  
  
  
  }


.clearsearchs input{
   position:absolute;
   margin: auto; 
    width: 80%;
   font-size: 250%;
    height:6%;
    padding: 0.5%;
       top: 12%;
    bottom: 0;
     border: 6px solid black;
    border-radius: 2px;
    color: rgb(12, 0, 0);
    margin-left: 20%;
    margin-top: 30px;
    
    
}




    }