#sign_body{

 /*background-color: rgba(29, 149, 170, 0.782);*/
background-image: url(https://images.squarespace-cdn.com/content/v1/533718c2e4b03942d9e3a9a7/1401733161757-6MZP4AYMMWSDMS9D7ZDI/DSC_0964.JPG?format=1000w);
background-size: cover;

}
.sign_container{

    margin-left: 35%;
    margin-top: 3%;
    width: 25%;
    height: 85%;
    background-color: rgba(55, 54, 54, 0.683);
    box-shadow: 0 0 6px rgba(209, 149, 109, 0.718);
    border-radius: 8px;
    
}
.sign_title{
text-align: center;
font-size: 30px;
position: relative;
font-family: 'Rye';
color: rgb(229, 202, 165);
box-shadow: 0 0 2px black;
text-shadow: 3.4px .7px rgba(193, 90, 22, 0.776);
top: 25px;


}

.field{
position: relative;
top:13%;
margin-left: 15%;
width: 70%;
margin-top: 5%;
height: 7%;
border-radius: 8px;
border: none;
background-color: rgba(255, 255, 255, 0.716);
color: black;
outline: none;
}
.field :focus{
  background-color:  rgba(182, 182, 182, 0.916);
}

.submit{
position: relative;
width: 110px;
height: 40px;
border: none;
background-color: rgba(0, 0, 0, 0.515);
box-shadow: 0 0 5px rgb(147, 79, 30);
color: white;
top:25%;
left: 35%;
border-radius: 6px;


}

.submit:hover{
    box-shadow: 0 0 180px rgba(250, 104, 0, 0.868);   
    transition-duration: 1s;
}
.alredy_signup{
    position: relative;
top:26%;
color: rgb(245, 245, 245);
text-align: center;

}
.alredy_signup a{

text-decoration: none;
color:rgb(255, 123, 0);
}
.alredy_signup a:hover{

    text-decoration:underline;
    color:rgb(224, 137, 15);
    }
    
    .warning
{
text-align: center;
color: rgb(225, 84, 19);
position: relative;
top:15%;
}

.verify{


  position: absolute;
  top:25%;
  left:70%;
  width: 23%;
  height: 45%;
  background-color: rgba(244, 244, 244, 0.798);
  border-radius: 8px;
  box-shadow: 0 0 5px rgb(170, 82, 15);
}



.verify h1{
  text-align: center;
  font-size: 20px;
  font-family: 'Yeseva One';
}


.verify p{
  text-align: center;
  font-size: 13px;
  font-family: 'Yeseva One';
}
.field_verify{
position: relative;
height: 52px;
width: 52px;
left: 11%;
margin-top:8%;
border-radius: 2px;
border: none;
margin-left: 5px;
text-align: center;
font-size: 28px;
}


.submit_verify{
  position: absolute;
margin-top: 34%;
left: 35%;
height: 40px;
width: 90px;
border: none;
border-radius: 6px;
background-color: rgba(94, 94, 94, 0.359);
box-shadow: 0  0 7px rgb(170, 82, 15);
}
.submit_verify:hover{
  box-shadow: 0  0 180px rgb(253, 110, 0);
  transition-duration: 1s;
}





.re_verify{
  position: absolute;
  margin-top: 27%;
  left: 32%;
  height: 26px;
  width: 130px;
  
  border: none;
  border-radius: 6px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0  0 7px rgb(170, 82, 15);

}
.re_verify:hover{
  box-shadow: 0  0 8px rgb(0, 0, 0);
  transition-duration: 1s;
}






































#login_body{

  background-color: rgba(0, 0, 0, 0.782);
  background-image: url(../bg_images/login.avif);
  background-size: cover;
  
  }

  form i {
    margin-left: -32px;
    cursor: pointer;
    z-index: 10;
   position: relative;
   top:13%;
}






.forgot_password{
  position: absolute;
bottom: 6%;
left:40%;
color: rgb(245, 245, 245);
text-align: center;

}
.forgot_password a{

text-decoration: none;
color:rgb(210, 138, 38);
}
.forgot_password a:hover{

  text-decoration:underline;
  color:rgb(178, 106, 5);
  }












































    

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield;
    }


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: rgb(98, 89, 89);
    opacity: 1; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(98, 89, 89);
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(98, 89, 89);
  }


@media only screen and (max-width: 650px) {
    
  .sign_container{

    margin-left: 0%;
    margin-top: 0%;
    width: 100%;
    height: 98%;
    background-color: rgba(55, 54, 54, 0.583);
    box-shadow: 0 0 6px rgba(209, 149, 109, 0.718);
    border-radius: 8px;
    
}  
.verify{


  position: absolute;
  top:15%;
  left:5%;
  width: 90%;
  height: 55%;
  background-color: rgba(244, 244, 244, 0.999);
  border-radius: 8px;
  box-shadow: 0 0 5px rgb(170, 82, 15);
}
   .warning
{
text-align: center;
color: rgb(225, 84, 19);
font-size:18px;
font-weight:w600;
position: relative;
top:2%;
}
}


.hold_excel{
    position:relative;
    margin-left:35%;
    margin-top:5%;
    width:28%;
    height:30%;
    background-color:#00979c;
    border-radius:10px;
}
#docpicker{
    
}
#submit_excel{
    position:relative;
    margin-left:40%;
    margin-top:20%;
    padding:12px;
    padding-left:20px;
    padding-right:20px;
    
    border:none;
    border-radius:5px;
    background:white;
     
}
#docpicker {
  display: none;
}
.custom-file-upload {
  display: inline-block;
  padding: 10px;
  padding-bottom:14px;
  padding-left:40px;
  padding-right:20px;
  margin-left:32%;
  cursor: pointer;
  color: black;
  background-color: white;
  border: 1px solid grey;
  border-radius: 4px;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
.custom-file-upload:hover {
  background-color: black;
 color: white;
}
.response{
    position:fixed;
    z-index:1000;
    width:35%;
   margin-top:37%;
   margin-left:58%;
    height:50px;
    border-radius:8px;
    background:green;
    text-align:center;
}
.response h1{
    font-size:16px;
    color:white;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.logout{
    position:absolute;
    z-index:1000;
    padding:15px;
    padding-left:45px;
    padding-right:15px;
   margin-top:37%;
   margin-left:46%;
    border-radius:8px;
    background:white;
    text-align:center;
    border:1px solid grey;
    
}

.logout i{
    color:green;
    font-size:22px;
}
.logout i:hover{
     color:red;
}

.view{
    position:absolute;
    z-index:1000;
    padding:15px;
    padding-left:80px;
     padding-right:80px;
   margin-top:37%;
   margin-left:20%;
    border-radius:8px;
    background:white;
    text-align:center;
    border:1px solid grey;
    
}
.view:hover{
   background:grey; 
}
@media only screen and (max-width: 650px) {
  .hold_excel{
    position:relative;
    margin-left:2.5%;
    margin-top:5%;
    width:95%;
    height:50%;
    background-color:#00979c;
    border-radius:10px;
}  
.view{
    position:absolute;
    z-index:1000;
    padding:8px;
    padding-left:15px;
     padding-right:30px;
   margin-top:90%;
   margin-left:5%;
    border-radius:8px;
    background:white;
    text-align:center;
    border:1px solid grey;
    
}
.logout{
    position:absolute;
    z-index:1000;
    padding:15px;
    padding-left:45px;
    padding-right:15px;
   margin-top:85%;
   margin-left:66%;
    border-radius:8px;
    background:white;
    text-align:center;
    border:1px solid grey;
    
}
.response{
    position:fixed;
    z-index:1000;
    width:92%;
   margin-top:110%;
   margin-left:2%;
    height:45px;
    border-radius:8px;
    background:green;
    text-align:center;
}
    
    
}