body {
    background: url(../images/1.jpg) no-repeat;
    background-size: cover;
    font-family: 'Poppins', sans-serif;
  }
  
  #login_form {
    height: 40%;
    width: 300px;
    margin: 15vh  auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
  
  #login_form h1 {
    color: #0f2027;
    text-align: center;
  }
  
  #login_btn {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color:rgb(12,148,198);
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  #login_btn:hover{
    background-color: rgb(12,148,198);
  }
  .input-control {
    display: flex;
    flex-direction: column;
  }
  
  .input-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    padding: 10px;
    width: 100%;
  }
  
  .input-control input:focus {
    outline: 0;
  }
  
  .input-control.success input {
    border-color:rgb(12,148,198);
    
  }
  
  .input-control.error input {
    border-color: #ff3860;
  }
  
  .input-control .error {
    color: #ff3860;
    font-size: 11px;
    height: 13px;
  }
  
  .a11:hover{
    color:rgb(136, 0, 79)
  }

  a {
    text-decoration: none;
    color: #148dd3;
  }

  #login_btn + h4{
    color: #148dd3;
    text-align: right;
  }

  label{
    display: none;
  }

  #userName, #userPass{
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgb(12,148,198);
    background-color: transparent;
    margin-bottom: 10px;
  }
  #userName:hover, #userPass:hover{
    background-color: #ebf3eb;
  }

  label + h4{
    color: #148dd3;
    margin-left: 90px;
  }

  h4{
      color: #148dd3;
      text-align: right;
  }

  @media (max-width: 600px) {
  #login_form {
      width: 90%;
      margin: 10vh auto 0;
    }
    .container
    {
      height: fit-content;
    }  
  }

  @media (max-width: 992px) {
    #login_form {
      width: 60%;
      margin: 10vh auto 0;
    }
    .container
    {
      height: fit-content;
    }   
  }