body {font-family: Arial, Helvetica, sans-serif;
margin: 0;}
* {box-sizing: border-box;}
 
  /* The popup form - hidden by default */
  .register-con {
    margin:auto;
    margin-top:20px;
    width:420px;
    padding: 20px;
    z-index: 1;
   
  }
  .register-con h1 {
      font-size: 18px;
      color:green;
      text-align: center;
      letter-spacing: 1px;
  }
  
  /* Add styles to the form container */
  .form-group {
        margin:auto;
        max-width: 300px;
        padding: 20px;
        background-image: linear-gradient(green, white);
        border-radius: 14px 14px 14px 14px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  /* Full-width input fields */
  .form-group input[type=text] {
    width: 100%;
    height:35px;
    padding: 10px;
    margin: 5px 0 22px 0;
    border: none;
    background: #ddf5cf;
    border-radius: 10px 10px 10px 10px;
    letter-spacing: 2px;
    opacity:0.8;
  }
  .form-group .msg_otp {
      padding-top: 20px;
      font-size: 12px;
      text-align:center;
    text-decoration: none;
    color:darkgreen;
    margin-bottom:20px;
    font-weight:600;
  }
   #register_success, #success_msg {
      color:darkgreen;
      font-size:12px;
      text-decoration:none;
       letter-spacing: 1px;
}
 #mobile_error, #otp_error {
      color:red;
      font-size:12px;
      text-decoration:none;
       letter-spacing: 1px;
}
  .form-group button[type="button"] {
    border-radius: 8px;
    font-weight: 600;
    
}
/* When the inputs get focus, do something */
.form-group input[type=text]:focus {
    background-color: #ddd;
    outline: none;
     width: 100%;
    
  }
  .form-group button[type="button"]:focus {
      border: 2px solid green;
  }
  
  /* Set a style for the submit/login button */
  .form-group .btn {
    background-color: darkgreen;
    color: white;
    font-weight:600;
    padding: 10px 10px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    margin-top:10px;
    opacity: 0.8;
  }
  .form-group a {
    margin-bottom:10px;
    margin-top:10px;
     text-decoration: none;
  }
   .msg_otp {
       text-align: center;
       font-weight: 600px;
   }
  
  /* Add some hover effects to buttons */
  .form-group .btn:hover {
    opacity: 1;
    
  }
  @media screen and (max-width: 600px) {
   main {
        padding:5px;
    }
     div.register-con {
        width:100%;
        padding:20px;
    }
    .form-group {
        max-width:380px;
        width: 100%;
        margin: auto;
        background-color:rgb(0, 138, 0);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 20px;
        border-radius: 14px 14px 14px 14px;
}
  }