<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2>TRACK INFO</h2>
<div class="row">
<div class="col-md-12 col-lg-12">
<div id="tracking-pre"></div>
<div id="tracking">
<div class="text-center tracking-status-intransit pb-3 pt-4 rounded-top">
<p class="tracking-status text-light lead text-uppercase">in transit</p>
</div>
<div class="border mb-4 rounded-bottom">
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Aug 10, 2018<span class="text-muted small pl-1">05:01 PM</span></div>
<div class="tracking-content">DESTROYEDPER SHIPPER INSTRUCTION<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Aug 10, 2018<span class="text-muted small pl-1">11:19 AM</span></div>
<div class="tracking-content">SHIPMENT DELAYSHIPPER INSTRUCTION TO DESTROY<span class="d-block small text-muted">SHENZHEN, CHINA, PEOPLE'S REPUBLIC</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 27, 2018<span class="text-muted small pl-1">04:08 PM</span></div>
<div class="tracking-content">DELIVERY ADVICERequest Instruction from ORIGIN<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 20, 2018<span class="text-muted small pl-1">05:25 PM</span></div>
<div class="tracking-content">Delivery InfoCLOSED-OFFICE/HOUSE CLOSED<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-outfordelivery">
<svg class="svg-inline--fa fa-shipping-fast fa-w-20" aria-hidden="true" data-prefix="fas" data-icon="shipping-fast" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
<path fill="currentColor" d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path>
</svg>
<!-- <i class="fas fa-shipping-fast"></i> -->
</div>
<div class="tracking-date mb-1">Jul 20, 2018<span class="text-muted small pl-1">08:58 AM</span></div>
<div class="tracking-content">Shipment is out for despatch by KLHB023.<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 19, 2018<span class="text-muted small pl-1">05:42 PM</span></div>
<div class="tracking-content">Delivery InfoUNABLE TO ACCESS<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-outfordelivery">
<svg class="svg-inline--fa fa-shipping-fast fa-w-20" aria-hidden="true" data-prefix="fas" data-icon="shipping-fast" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
<path fill="currentColor" d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path>
</svg>
<!-- <i class="fas fa-shipping-fast"></i> -->
</div>
<div class="tracking-date mb-1">Jul 19, 2018<span class="text-muted small pl-1">07:36 AM</span></div>
<div class="tracking-content">Shipment is out for despatch by KLHB023.<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 17, 2018<span class="text-muted small pl-1">10:54 AM</span></div>
<div class="tracking-content">Delivery InfoCLOSED-OFFICE/HOUSE CLOSED<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-outfordelivery">
<svg class="svg-inline--fa fa-shipping-fast fa-w-20" aria-hidden="true" data-prefix="fas" data-icon="shipping-fast" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
<path fill="currentColor" d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path>
</svg>
<!-- <i class="fas fa-shipping-fast"></i> -->
</div>
<div class="tracking-date mb-1">Jul 17, 2018<span class="text-muted small pl-1">08:08 AM</span></div>
<div class="tracking-content">Shipment is out for despatch by KLHB023.<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 16, 2018<span class="text-muted small pl-1">12:30 PM</span></div>
<div class="tracking-content">SHIPMENT DELAYCONSIGNEE NOT AVAILABLE<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 16, 2018<span class="text-muted small pl-1">12:06 PM</span></div>
<div class="tracking-content">Delivery InfoCLOSED-OFFICE/HOUSE CLOSED<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-outfordelivery">
<svg class="svg-inline--fa fa-shipping-fast fa-w-20" aria-hidden="true" data-prefix="fas" data-icon="shipping-fast" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
<path fill="currentColor" d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path>
</svg>
<!-- <i class="fas fa-shipping-fast"></i> -->
</div>
<div class="tracking-date mb-1">Jul 16, 2018<span class="text-muted small pl-1">08:32 AM</span></div>
<div class="tracking-content">Shipment is out for despatch by KLHB023.<span class="d-block text-muted small">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 14, 2018<span class="text-muted small pl-1">01:57 PM</span></div>
<div class="tracking-content">Delivery InfoMISSED DELIVERY<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-outfordelivery">
<svg class="svg-inline--fa fa-shipping-fast fa-w-20" aria-hidden="true" data-prefix="fas" data-icon="shipping-fast" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
<path fill="currentColor" d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"></path>
</svg>
<!-- <i class="fas fa-shipping-fast"></i> -->
</div>
<div class="tracking-date mb-1">Jul 14, 2018<span class="text-muted small pl-1">08:41 AM</span></div>
<div class="tracking-content">Shipment is out for despatch by KLHB023.<span>KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 11, 2018<span class="text-muted small pl-1">05:22 PM</span></div>
<div class="tracking-content">Shipment designated to .<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 11, 2018<span class="text-muted small pl-1">10:32 AM</span></div>
<div class="tracking-content">Shipment arrived at KUALA LUMPUR (LOGISTICS HUB), MALAYSIA station.<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 10, 2018<span class="text-muted small pl-1">02:30 PM</span></div>
<div class="tracking-content">Custom cleared and arrived at KUALA LUMPUR (LOGISTICS HUB), MALAYSIA station.<span class="d-block small text-muted">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 10, 2018<span class="text-muted small pl-1">07:30 AM</span></div>
<div class="tracking-content">Shipment arrived at airport.<span class="d-block text-muted small">KUALA LUMPUR (LOGISTICS HUB), MALAYSIA, MALAYSIA</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 10, 2018<span class="text-muted small pl-1">03:59 AM</span></div>
<div class="tracking-content">Shipment departed to MALAYSIA.<span class="d-block small text-muted">HONG KONG, HONGKONG</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 09, 2018<span class="text-muted small pl-1">04:03 PM</span></div>
<div class="tracking-content">Shipment designated to MALAYSIA.<span class="d-block small text-muted">SHENZHEN, CHINA, PEOPLE'S REPUBLIC</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 09, 2018<span class="text-muted small pl-1">11:04 AM</span></div>
<div class="tracking-content">Pickup shipment checked in at SHENZHEN.<span class="d-block small text-muted">SHENZHEN, CHINA, PEOPLE'S REPUBLIC</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-intransit">
<svg class="svg-inline--fa fa-circle fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
<path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"></path>
</svg>
<!-- <i class="fas fa-circle"></i> -->
</div>
<div class="tracking-date mb-1">Jul 09, 2018<span class="text-muted small pl-1">10:09 AM</span></div>
<div class="tracking-content">Shipment info registered at SHENZHEN.<span class="d-block small text-muted">SHENZHEN, CHINA, PEOPLE'S REPUBLIC</span></div>
</div>
<div class="tracking-item border-left position-relative mr-3">
<div class="tracking-icon rounded-circle position-absolute text-center status-outfordelivery">
<svg class="svg-inline--fa fa-clipboard-list fa-w-12" aria-hidden="true" data-prefix="fas" data-icon="clipboard-list" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
<path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM96 424c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm0-96c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm96-192c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm128 368c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-96c0 4.4-3.6 8-8 8H168c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"></path>
</svg>
<!-- <i class="fas fa-clipboard-list"></i> -->
</div>
<div class="tracking-date mb-1">Jul 06, 2018<span class="text-muted small pl-1">02:02 PM</span></div>
<div class="tracking-content">Shipment designated to MALAYSIA.<span class="d-block small text-muted">HONG KONG, HONGKONG</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
.tracking-detail {
padding:3rem 0
}
.tracking-status-intransit {
background-color:#65aee0
}
.tracking-status-outfordelivery {
background-color:#f5a551
}
.tracking-status-deliveryoffice {
background-color:#f7dc6f
}
.tracking-status-delivered {
background-color:#4cbb87
}
.tracking-status-attemptfail {
background-color:#b789c7
}
.tracking-status-error,.tracking-status-exception {
background-color:#d26759
}
.tracking-status-expired {
background-color:#616e7d
}
.tracking-status-pending {
background-color:#ccc
}
.tracking-status-inforeceived {
background-color:#214977
}
.tracking-item {
padding:2rem 1.5rem .5rem 2.5rem;
font-size:.9rem;
min-height:5rem
}
.tracking-item:last-child {
padding-bottom:4rem
}
.tracking-item .tracking-icon {
line-height:2.6rem;
left:-1.3rem;
width:2.6rem;
height:2.6rem;
}
.tracking-item .tracking-icon.status-sponsored {
background-color:#f68
}
.tracking-item .tracking-icon.status-delivered {
background-color:#4cbb87
}
.tracking-item .tracking-icon.status-outfordelivery {
background-color:#f5a551
}
.tracking-item .tracking-icon.status-deliveryoffice {
background-color:#f7dc6f
}
.tracking-item .tracking-icon.status-attemptfail {
background-color:#b789c7
}
.tracking-item .tracking-icon.status-exception {
background-color:#d26759
}
.tracking-item .tracking-icon.status-inforeceived {
background-color:#214977
}
.tracking-item .tracking-icon.status-intransit {
color:#e5e5e5;
border:1px solid #e5e5e5;
font-size:.6rem
}
@media(min-width:992px) {
.tracking-item {
margin-left:10rem
}
.tracking-item .tracking-date {
position:absolute;
left:-10rem;
width:7.5rem;
text-align:right
}
.tracking-item .tracking-date span {
display:block
}
.tracking-item .tracking-content {
padding:0;
background-color:transparent
}
}
