.container{
  height: 4rem;
  width: 95%;
 display: flex;
 justify-content: space-between;
  /* background-color: black;  */
 padding-right: 10px;
 padding-top: 1px;
 box-shadow: 0 .125rem .25rem rgb(0 0 0/8%);
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 z-index:5;
max-width: 460px;

/* Default styles for larger screens */
/* .rightcontainer {
  display: block; /* Ensure it's visible on larger screens */


/* Styles for smaller screens (mobile devices) */
@media (max-width: 768px) {
  .rightcontainer {
    display: none; /* Hide right container on mobile devices */
  }
  
  .leftcont {
    width: 100%; /* Ensure left container takes full width */
  }
}

}
 
 
.login-btn{
  

  text-transform: capitalize;
text-decoration: none;
background-color:white;
color: #2e383e;
border: 1px solid black; 
padding-bottom: 9px;
padding-top: 5px; 
padding-left: 11px;
padding-right: 11px;
border-radius: 3px;
font-family: Poppins, sans-serif;
letter-spacing: 1px;
z-index: 99999;
   
}

a:hover{
  background-color: #2e383e ;
 
  
  color: white;
}
 .loginlogo{
  
  height:30px;
  width: 127px;
  /* background-image: url("rkludologo.webp");
 background-size:cover; 
  */
 }

 .loda_lele_abhishek

 {
  height:30px;
  width: 127px;

 }
  
 
#image{
  background-image: none;
  height: 6rem;
  width: 32rem;
  vertical-align: middle;
  left: 11rem;
  top: 5rem;
  /* bottom: 10px; */
  max-width: 100%;
  z-index: 0;
  display: flex;
  position: absolute;
  left: 0rem;
  /* align-items: stretch; */
  justify-content: center;
}
  

/* @media(min-width:600px) {
  #image{
    height: 40px;
    width: 500px;   
  }
       
  }

} */
#contaainer{
  outline: none;
  width: 94%;
  height: 22rem;
  border: solid 1px black;
  border-radius: 5px;
  position: fixed;
  left: 0px;
  z-index: 5;
  bottom: 19%;
  background-color: #2284775c;
  margin-left: 10px;
  font-size: 15px;
  flex-direction: column;
  display: flex
;
  min-height: 49vh;
  /* max-width: 400%; */
  max-width: 460px;

 

}
p{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}
p{
  /* text-align: center; */
 margin-left:50px;
   
  
}

#about{
  position: fixed;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 5;

}




#Login{
  margin-left: 50px;

}



 
  .login_main_page{
    /* align-items: center;
    background-color:initial;
    background: #fff;
    display: flex;
    flex-direction: column;
  
    margin-top: 30px;
    min-height: 100vh;
    overflow: hidden;
    width: 100%;
    vertical-align: middle; */
    justify-content: center;
    z-index: 1;
    min-height: 0;
  }



  .rightcontainer{
    background: url(https://annexlogics.com/static/media/08.17355bf8.webp);
    background-color: #fff;
    background-size: cover;
    border-left: 10px solid #e0e0e0;
    bottom: 0;
    left: 480px;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
      display: flex;
      display: block;
      flex-direction: column;
  }
  

 
 .imagebox > img{
  /* background-color: aliceblue; */
  height:auto;
  width: 300px;
  position: fixed;
  top: 57px;
  left: 790px;
 }
 img{
  vertical-align: middle;
 }
 
.imagebanner{
  bottom: 40%;
    position:absolute;
    width: 300px;
    
}
 .text-bold{
   
  font-family:Roboto Condensed;
  font-size:50px;
  font-weight:400;
  position:relative;
  bottom: -65px;
  right: -70px;
    text-transform:uppercase;
 }
 .snip-img{
  position: relative;
  bottom: -65px;
   
  left:60px;
  right: 1%;
 }
 img{
  vertical-align: middle;
 }

 
 
 
.login-footer{
  color: #003441;
  font-family: Poppins, sans-serif;
  font-size: .7rem;
  /* margin-bottom: 0rem; */
  margin-right: 1.87rem;
  margin-top: 50px;
  margin-left: 20px;
  padding-top: 50px;
  text-align: left;
  z-index: 2;
  height: 63px;
  max-width: 460px;
  position: fixed;
  left: 0;
  bottom: 0rem;

   

}
.leftcont{
  background-color: #fff ;
  min-height: 0;
  position: relative;
  background-color: #fff;
  max-width: 480px;
  width: 100%;
  min-height: 100%;
}
.login_main_page{
  align-items: center;
  background-color: initial;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
  min-height: 90vh;
  overflow: hidden;
  width: 100%;

  
}
#pri{
  margin: 0 0 0 ;
  padding: 0 0 0 ;
text-decoration: none;
border-style: none;
}
#otp{
  width: 142.9%;
  height: 45px;
  background-color: #208074;
  margin-left: -3.3rem;
  font-size: 1rem;
  border-radius: 5px;
  color: white;
  max-width: 75rem;
}
@media (min-width: 350px) {
  #otp {
    width: 156.6%;
  }
}

   

#verify {
  width: 129%;
  height: 2.75rem;
  background-color: #208074;
  margin-left: -2.1rem;
  font-size: 1rem;
  border-radius: 5px;
  color: white;
  max-width: 317px;
  position: relative;
  bottom: 0rem;
  left: -1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensure loader stays within button boundaries */
  padding: 0 1rem; /* Add padding to avoid content touching edges */
}



/* Optional: Add a loading class to show loader and hide text */
#verify.loading .loader {
  display: inline-block;
}

#verify.loading {
  pointer-events: none; /* Disable button interactions during loading */
}

#verify.loading span {
  visibility: hidden; /* Hide button text during loading */
}

#number {
  
    border: 1px solid #6e6e6e;
    border-radius: 5px;
    padding: 15px 15px 15px 50px;
    width: 40%;
    background-color: white;
    margin-left: 80px;
    height: 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: #003441;
    font-family: Poppins, sans-serif;
    font-weight: 600;
    left: -12px;
    margin-bottom: 15px;
    position: relative;
  

}
input{border: 0;outline: 0;
  font-size: .9em;
  font-weight: 400;
  color: #003441;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  min-height: 0;
  position: relative;
  background-color: #fff;
  max-width: 480px;
  width: 100%;
  min-height: 100%;
}
.number span{
  font-weight: 600;
  left: 10px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.monika{
  margin-left: -3rem;
}

.monika2{
  position: absolute;
  top: 5rem;
  z-index: 5;
  left: 0rem;
  padding-left: .4rem;
}

#validation{
  color:#fff;
  font-size: xx-small;
  font-family: Roboto;
}
#otp-12{
  border: 1px solid #6e6e6e;
  border-radius: 5px;
  padding: 15px 15px 15px 50px;
  width: 100%;
  background-color: white;
  margin-left: 64px;
  height: 1rem;
  font-size: 1rem;
  font-weight: 400;
  color: #003441;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  left: -115px;
  margin-bottom: 15px;
  position: relative;
  top: 2rem;
}
#otp {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color:#208074;
  color: white;
  border: none;
  border-radius: 5px;
  overflow: hidden;
}







/* loader */
/* styles.css */
/* .button {
position: relative;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
outline: none;
transition: background-color 0.3s;
} */

.button:hover {
background-color: #0056b3;
}

.loader {
position: absolute;
top: 11%;
left: 40%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 4px solid white;
animation: spin 1s linear infinite;

}

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