  <div style="margin: 0 auto;">
    
     

 
      
          <div class="d-flex align-items-center justify-content-center bg-gray-300 ht-500 pd-x-20 pd-xs-x-0">
            <div class="card wd-350 shadow-base">
              <div class="card-body pd-x-20 pd-xs-40">
                <h5 class="tx-xs-24 tx-normal tx-gray-900 mg-b-15" style="text-align: center;">Welcome to Whispers SMS</h5>
                <h6 class="tx-xs-18 tx-normal tx-gray-700 mg-b-15">Sign In to Continue</h6>
               
                <% include ./partials/messages %>
         <form action="/users/login" method="POST">
                <div class="form-group">
                <label for="phone">Your Phone Number</label>
                  <input class="form-control" id="phone" type="text" name="phone" placeholder="e.g. 0722112233">
            
            
                </div>
                <!-- form-group -->
                <div class="form-group">
                <label for="password">Password</label>
                  <input class="form-control" type="password" name="password" id="password" placeholder="**********">
                </div>
                <!-- form-group -->

                <button type="submit" class="btn btn-info btn-block">Sign In</button>
          </form>
          <p class="lead mt-4">
        New To Whispers? <a href="/users/register">Register Here</a>
      </p>
      <p class="lead mt-4">
        Forgot Password? <a href="/users/resetPassword">Reset Password</a>
      </p>
              </div>
              <!-- card-body -->
            </div>
            <!-- card -->
          </div>
          <!-- d-flex -->
          </div></div>




 </div><!-- br-mainpanel -->
    <!-- ########## END: MAIN PANEL ########## -->

        <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/popper.js/popper.js"></script>
    <script src="../lib/bootstrap/bootstrap.js"></script>
    <script src="../lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
    <script src="../lib/moment/moment.js"></script>
    <script src="../lib/jquery-ui/jquery-ui.js"></script>
    <script src="../lib/jquery-switchbutton/jquery.switchButton.js"></script>
    <script src="../lib/peity/jquery.peity.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/select2/js/select2.min.js"></script>

    <script src="../js/bracket.js"></script>
    <script>
      $(function(){
        'use strict'

        $('.form-layout .form-control').on('focusin', function(){
          $(this).closest('.form-group').addClass('form-group-active');
        });

        $('.form-layout .form-control').on('focusout', function(){
          $(this).closest('.form-group').removeClass('form-group-active');
        });

        // Select2
        $('#select2-a, #select2-b').select2({
          minimumResultsForSearch: Infinity
        });

        $('#select2-a').on('select2:opening', function (e) {
          $(this).closest('.form-group').addClass('form-group-active');
        });

        $('#select2-a').on('select2:closing', function (e) {
          $(this).closest('.form-group').removeClass('form-group-active');
        });

      });
    </script>

      </body>


</html>