<style>
	.ip-ranges{
		width: 70% !important;
	}
	.search{
		border-style: ridge;
		height: 14% !important;
		display: flex;
		background-color:#D0D0D0;
		border-radius: 14px;
	}
	.dataTables_length{
		visibility: hidden;
	}
	#example_filter{
		visibility: hidden;
	}
	.row{
		width: 53% !important;
	}
	.ip-button{
		display-flex: inline !important;
		float: left;


	}
	.btn btn-light{
		border-radius: 2px !important;
	}
	.tableinfo {
		width: 40% !important;
 
	}
	#homeicone { background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}
.homeicone{
	width: -9%!important;
    float: right;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel ="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>

<center>
  <div class="homeicone">
          <button class="btn" id="homeicone"><i class="fa fa-bars"></i></button>
        </div>
      <div class="ip-ranges">

        <h1 style=" border-bottom: outset;border-bottom-width: thin;">
          <center>IP Address Ranges</center>
        </h1>
       
        <div class="search dropdown">
          <div class="row mt-3">
                                            <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Site Location 
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                 <select class="form-control selectpicker" id="select-country" data-live-search="true" style="line-height: 14px;padding: 7px;margin-top: 4PX;text-align: left;">
                                                   <option> - </option>
                                                    <option> Not invoiced </option>
                                                    <option> Monthly </option>
                                                    <option> Bimonthly </option>
                                                    <option> Quarterly </option>
                                                    <option> Half-yearly </option>
                                                    <option> Yearly </option>
                                                </select>
                                            </div>

                                        </div>
                                        <div class="row mt-3">
                                          <div class="col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                                Search  
                                            </div>
                                            <div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                                 <div class="input-group">
  <input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
  <button type="button" class="btn btn-outline-primary">search</button>
</div>
                                            </div>
                                            
                                        </div>
        </div><br>
        <div class="ip-button">
          <button type="button" class="btn btn-info"style="border-radius: 98px;">172.111.161.01</button>
        <button type="button" class="btn btn-danger" style="border-radius: 98px;">172.111.161.01</button>
        <button type="button" class="btn btn-info"style="border-radius: 98px;">172.111.161.01</button>
          <button type="button" class="btn btn-info"style="border-radius: 98px;">172.111.161.01</button>
        </div>
      </div>
    </center>
  </br>
</br>
</br>

      <center><div class="tableinfo">
        <table>
          <tr>
            <th style="border: 1px solid #dddddd;text-align: left;padding: 8px;">IP Address Range</th>
            <th style="border: 1px solid #dddddd;text-align: left;padding: 8px;">07.229.1140</th>
          </tr>
          <tr >
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">Network Mask </td>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">266.255.255.0</td>
          </tr>
          <tr style="border: 1px solid #dddddd;">
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">Network Mark by Bits</td>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">24</td>
          </tr>

          <tr>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">Numbers of Addresses</td>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">226</td>
          </tr>

          <tr style="border: 1px solid #dddddd;">
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">Used Address</td>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">1.32</td>
          </tr>


           <tr style="border: 1px solid #dddddd;">
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">Free Address</td>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">124</td>
          </tr>



           <tr style="border: 1px solid #dddddd;">
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">Network Mask</td>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">255.255.255.0</td>
          </tr>

          <tr style="border: 1px solid #dddddd;">
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">Description</td>
            <td style="border: 1px solid #dddddd;text-align: left;padding: 8px;">07.229.114.024</td>
          </tr>
        </table>
      </div>
      </center>

<center><div>
<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>IP</th>
                <th>Assigned</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
            	<td>1</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                
            </tr>
 
        </tbody>
        <tfoot>
        
        </tfoot>
    </table>


	</div>

	<script>
		$(document).ready(function (){
    $('#example').DataTable();
});
	</script>