Untitled

<html>

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div calss="col-md-12">
          <div class="section text-center">
              <h3 class="section-heading text-center">Select Services</h3>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 col-sm-12">
          <div class="appointment-block">
                <h5 class="form-heading-title">
                  <span class="form-heading-no">1. </span>Services</h5>
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <input type="text" class="form-control date-pick searchBox" id="appointment-date" placeholder="Appointment Date" />
        </div>
        <div class="col-sm-2">
          <button type="button" onclick="selectService()" class="btn btn-primary pull-right searchButton">Save</button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="table-responsive">
            <table id="tblServices" class="table table-condensed table-responsive tableBody">
              <thead>
                <tr>
                  <th>S.No</th>
                  <th>Service Name</th>
                  <th>Service Price</th>
                </tr>
              </thead>
              <tbody id="tbodytblServices"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */

.ErrorMessages {
    font-size: small;
    color: tomato;
}

.fa-Icons-Padding {
    padding-top: 33px;
}

.MessageStrip {
    background-color: #0891ff !important;
    color: white !important;
    text-align: center !important;
    font-family: arial !important;
    font-weight: bold !important;
}

.Container-IndexPage {
    padding-right: 0%;
    padding-left: 0%;
}

.topBar {
    background-color: #F4F4F4 !important;
}

.searchBox {
    margin-left: 73%;
    width: 60% !important;
    border-color: lightgrey !important;
}

.searchButton {
    margin-right: 29%;
}

.searchButton {
    margin-right: 28.7%
}

.AddServicesSearchButton 
{
    margin-right: 7.7%;
    margin-top: -8%;
}

.datatable-headerrow {
    background-color: #F4F4F4 !important;
}

.pagination-buttons {
    background: linear-gradient(to bottom, #0891FF 0%, #0891FF 100%) !important;
    color: white !important;
}

.searchbox-border {
    border-color: lightgrey !important;
}

.tableBody {
    font-size: 16px !important;
    font-family: calibri !important;

}

.btnCheckIn {
    margin-right: 61%;
    margin-top: 1%;
}

.btnEdit {
    color: #fff !important;
    background-color: #0891FF !important;
    /*margin-right: -670%;
margin-top: -25%;*/
}

.btnBill 
{

    margin-right: 4%;
    margin-top: -18%;
    background-color: #03C04A;
}

.btnCancel {
    color: #fff !important;
    background-color: tomato !important;
    margin-right: 27%;
    margin-top: -18%;
}

.searchButtonConfirmationCancellation {
    margin-right: 28.7%;
}

.addCustomerBtn {
    margin-left: 376%;
    margin-top: 5%;
    margin-bottom: 5%;
}

.printDiv {
    text-align: center;
    margin-bottom: 1.5%;
}

.pad-container {
    padding-top: 0% !important;
}

.table-header {
    font-size: 81%;
    font-family: arial;
}

.specialh3 
{
    text-align: center;
    text-transform: capitalize;
}

.selectColumn 
{
    margin: 11px -13px 14px !important;
}

.InvoiceTable 
{
    width: 50%;
    margin-left: 25%;
    margin-top: 1%;
    border: 1px gray dashed;
}
.Copies 
{
    margin-left: 46%;
    margin-top: 1% !important;
    font-size: 11px !important;

}

.topheaderMargin 
{
    margin-top: -5%;
}