/* Center the login image inside this container */
 .imgcontainer {
    text-align: center;
    margin: 24px 0px 12px 0;
  }
 /* login image */
 img.img_login {
    width: 20%;
    border-radius: 50%;
  }
 /* Bordered form */
 form {
    border: 3px solid #f1f1f1;
    border-color: black;
    border-radius: 5pt;
    width: 98%;
    margin: 10pt auto;
  }

  #lbl_name{
    grid-area: lbl_name;
    font-size: 10pt;
  }
  #in_name{
    grid-area: in_name;
  }
  #lbl_pwd{
    grid-area: lbl_pwd;
    font-size: 10pt;
  }
  #in_pwd{
    grid-area: in_pwd;
  }
  #btn_pwd{
    grid-area: btn_pwd;
    background-color: lightgrey;
    border: none;
    cursor: pointer;
  }
  #div_err_msg{
    grid-area: div_error;
  }

  /* Add padding to containers */
  .container{
    display: grid;
    grid-template-areas:"lbl_name in_name" 
                        "lbl_pwd in_pwd"
                        "btn_pwd btn_pwd"
                        "div_error div_error";
  }
  .container{
    width:60%;
    padding: 16px;
    margin: 0px auto;
    gap: 3pt;
    margin-bottom: 3pt;
  }

  .container>*, #div_err_msg{
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 5pt;
    box-sizing: border-box;
    font-weight: bold;
    color: black;
    padding: 14px 20px;
    border-color: lightgrey;;
  }

  /* Add a hover effect for buttons */
  button:hover {
    opacity: 0.8;
  }
  #div_err_msg{
    color: white;
    background-color: red;
  }
  @media only screen and (max-width:900px){
    .container{
      grid-template-areas:"in_name" 
                        "in_pwd"
                        "btn_pwd"
                        "div_error";
    }
    label{display: none}
  }