@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.loginform-img{
    
   width: 100%;
    height: auto;
    
}
.body{
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #e9e8e8;
}
.container{
max-width: 1280px;

}
.loginform{
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    min-height: 80vh;
    min-height: 80vh;
}

.loginform-img img {
    width: 100%;
   height:35vh;
    object-fit: cover;
}
.login-form-right{
    padding: 2rem ;
}
.login-form-right form input , .login-form-right form button{
    width: 100%;
    margin-bottom: 1rem;
    border: 2px solid #0b8ea286;
padding: 0.5rem;
border-radius: 8px;
}
.login-form-right h2 {
    margin-top: -10px;
   margin-bottom: 1rem;
text-align: center;

color: #0972db;}
#floatingInput Spinner{
display: none;
}
.show-hide {
    position: absolute;
    right: 450px;
    top: 55%;
    transform: translateY(-50%);
  }
  .show-hide i {
    font-size: 19px;
    color: #48b3fb;
    cursor: pointer;
    /* transform: translateX(200%); */
    transition: transform 0.3s ease-in-out;
    display: none;
  }
  .show-hide i.hide::before {
    content: '\f070';
  }
  input:valid ~ .show-hide i {
    /* transform: translateX(0); */
    display: block;
  }
@media screen and  (min-width: 768px) {
    .loginform{
        display: flex;
        flex-direction: row;
        background-color: white;
        border-radius: 20px;
        overflow: hidden;
        width: 100%;
    }
    .login-form-right{
        padding: 5rem ;
        width: 50%;
        display: flex;
        flex-direction: column;
        
        justify-items: center;
        margin: auto;
    }
    .loginform-img  {
      width: 40%;
    }
    .loginform-img img {
      
       height: 90vh;
       width: 100%;
       display: block;
       
    }
    .login-form-right form input , .login-form-right form button{
        width: 100%;
        margin-bottom: 1rem; 
        border: 2px solid #0b8ea286;
    padding: 0.5rem; 
    border-radius: 8px;

    }
    
}
@media (max-width:768px) {
    

  }
@media (max-width:480px) {
    
    .container{
       width: 100vw;
       height: 100vh;
        
        }
        .show-hide {
          position: absolute;
          right: 300px;
          top: 55%;
          transform: translateY(-50%);
        }
        .show-hide i {
          font-size: 19px;
          color: #48b3fb;
          cursor: pointer;
          /* transform: translateX(200%); */
          transition: transform 0.3s ease-in-out;
          display: none;
        }
        .show-hide i.hide::before {
          content: '\f070';
        }
        input:valid ~ .show-hide i {
          /* transform: translateX(0); */
          display: block;
        }


  }