<!-- Modal -->
<div class="modal tracking-items fade" id="trackingItemsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="icon-circle-close" aria-hidden="true"></span></button>
        <h4>Packet tracking</h4>
      </div>
      <div class="modal-body">
        <div class="body">
          <div class="row">
            <div class="col-md-12">
              <div class="details">
                <p>Tracking<span id="date" class="value">9400110200793331949607</span></p>
              </div>
              <div class="details right">
                <p>Shipped By<span id="order-number" class="value">United States Postal Services</span></p>
              </div>
              <hr>
            </div>
          </div>
          <div class="row">
              <div class="col-md-12">
                <div class="status delivered">
                    <span class="circle"></span>
                    <span class="text">Delivered</span>
                </div>
                  <p>Your Package was delivered on Nov. 12, 2017</p>
                  <div class="row status-line">
                      <div class="col-md-4 column">
                          <span class="line"></span>
                          <div class="point">
                              <span class="circle"></span>
                              <span class="text">Shipped</span>
                          </div>
                      </div>
                      <div class="col-md-4 column">
                          <span class="line"></span>
                          <div class="point">
                              <span class="circle"></span>
                              <span class="text">In Transit</span>
                          </div>
                      </div>
                      <div class="col-md-4 column">
                          <span class="line"></span>
                          <div class="point">
                              <span class="circle">
                                  <span class="icon icon-check"></span>
                              </span>
                              <span class="text">Delivered</span>
                          </div>
                      </div>
                  </div>
                  <hr>
                  <h6>Tracking Detail</h6>
                  <div class="timeline">
                    <div class="report active">
                        <span class="line"></span>
                        <span class="hline"></span>
                        <span class="point"></span>
                        <span class="date">Nov. 12, 2017, 10:50 am</span>
                        <div class="content">
                            <p>Delivered</p>
                        </div>
                    </div>
                    <div class="report">
                        <span class="line"></span>
                        <span class="hline"></span>
                        <span class="point"></span>
                        <span class="date">Nov. 12, 2017, 6:50 am</span>
                        <div class="content">
                            <p>Out of Delivery</p>
                        </div>
                    </div>
                    <div class="report">
                        <span class="line"></span>
                        <span class="hline"></span>
                        <span class="point"></span>
                        <span class="date">Nov. 12, 2017, 6:50 am</span>
                        <div class="content">
                            <p>Package arrived at a carrier facility</p>
                        </div>
                    </div>
                    <div class="report">
                        <span class="line"></span>
                        <span class="hline"></span>
                        <span class="point"></span>
                        <span class="date">Nov. 12, 2017, 6:50 am</span>
                        <div class="content">
                            <p>Package arrived at a carrier facility</p>
                        </div>
                    </div>
                  </div>
              </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>