.banner{
	width: 100%; height: auto; min-height: 400px; padding: 60px 0px 0px 0px;
	background-image: url("../../../images/track-banner.jpg");
	background-size: cover; background-position: 50% 50%;
	color: #fff; line-height: 1;
}
@media (max-width: 767px){
	.banner{
		min-height: 120px; padding: 10px 0px 10px 0px;
	}
}
.error-message {
	padding: 0 15%;
}
/***********TAB*************/
.tab a {
	color: #333;
	padding: 10px 65px;
	font-size: 16px;
	display: inline-block;
	border-bottom: 4px solid #fff;
}
.tab a.active {
	border-bottom: 4px solid #071E39;
}
.tab a:hover {
	text-decoration: none;
}
.tab a:focus {
	text-decoration: none;
}
.tab {
	text-align: center;
}
.tab span {
	display: inline-block;
	border-bottom: 1px solid #ccc;
}
.tabcontent {
	padding-top: 35px;
	padding-bottom: 35px;
	animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
.shipment_information {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-right: -20px;
	margin-left: -20px;
}
.shipment_information li{
	width: 33%;
	padding-right: 20px;
	padding-left: 20px;
	margin-bottom: 25px;
}
.shipment_information li h4 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 1.4px;
}
.route {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #ccc;
	text-align: center;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
	from {opacity: 0;}
	to {opacity: 1;}
}
/***********TAB*************/


/* welcome */
.welcome{
	width: 100%; height: auto; min-height: 200px; padding: 50px 0px 0px 0px; background-color: #fff; color: #333;
}
.welcome .tracking{
	width: 100%; height: auto; padding: 0px 0px 50px 0px;
}
.welcome .tracking .tracking-title{
	width: 100%; height: auto;
}
.welcome .tracking .tracking-title h2{
	margin: 0 0 10px 18px; font-weight: bold; font-family: 'Raleway-Bold'; font-size: 36px;
}
.welcome .tracking .tracking-title p{
	font-size: 15px; margin: 15px 0px 20px 0px;
}
.welcome .tracking .tracking-form{
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	height: auto;
	padding-bottom: 40px;
}
.welcome .tracking .tracking-form input{
	width: 100%; height: 48px; border: 1px solid #bbb; border-radius: 4px; outline: none; margin-right: 5px; padding: 0px 4px; text-align: center;
}
.welcome .tracking .tracking-form button{
	width: 100%; max-width: 300px; height: 48px; border: 0px; border-radius: 2px; background-color: #fae164; color: #000; outline: none; padding: 1px 0 0 0;
	box-shadow: 0px 2px 3px #333; transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s; font-family: 'Raleway-Bold';
}
.welcome .tracking .tracking-form button:hover{
	background-color: #201910; color: #fff; border: 1px solid #000;
}
.welcome .tracking .tracking-result{
	width: 100%; max-width: 960px; margin: 0 auto; height: auto; padding: 0px 0px 0px 0px;
}
.welcome .tracking .tracking-result hr{
	border-top: 1px solid #ccc; margin-top: 50px;
}
.welcome .tracking .tracking-result h2{
	margin: 30px 0 30px 18px;
	font-weight: normal;
	font-size: 16px;
}
.Timeline p{
	font-size: 13px;
	margin: 15px 0px 20px 0px;
}
.date_delivery .date {
	float: left;
	border-right: 1px solid #fff;
	padding-right: 15px;
	margin-right: 15px;
}
.date_delivery .date .weekday {
	font-size: 22px;
	text-transform: uppercase;
}
.date_delivery .row_date_estimated b{
	font-size: 60px;
	font-weight: bold;
	float: left;
	padding-right: 15px;
	line-height: 0.6;
}
.date_delivery .row_date_estimated span {
	display: inline-block;
	padding-top: 22px;
	font-size: 13px;
	line-height: 1;
}
.date_delivery .time {
	padding-top: 48px;
}
.date_delivery .time p {
	margin-bottom: 0;
}
.date_delivery .time span {
	font-size: 18px;
	font-weight: bold;
}

.welcome .tracking .tracking-result p b{
	font-family: 'Raleway-Bold';
}
.welcome .tracking .tracking-result button{
	width: 100%;
	max-width: 300px;
	height: 45px;
	border: 0px;
	border-radius: 2px;
	background-color: #fae164;
	color: #000;
	outline: none;
	padding: 1px 0 0 0;
	box-shadow: 0px 2px 3px #333;
	transition: border-color 0.4s ease 0s, background-color 0.4s ease 0s;
}
.welcome .tracking .tracking-result button:hover{
	background-color: #201910; color: #fff; border: 1px solid #000;
}
.welcome .tracking .tracking-result .value{
	font-size: 18px;
}
@media (min-width: 991px){
	.welcome .tracking .tracking-form .col-md-8, .welcome .tracking .tracking-form .col-md-4{
		padding: 0px;
	}
}
@media (max-width: 767px){
	.welcome{
		min-height: 0px; padding: 20px 0px 20px 0px;
	}
	.welcome .tracking .tracking-title h2{
		margin: 0 0 0 0px; font-size: 22px;
	}
	.welcome .tracking .tracking-form{
		width: 100%; height: auto; padding: 10px 0px 0px 0px;
	}
	.welcome .tracking .tracking-form input{
		width: 100%; height: 32px; max-width: 450px; margin-bottom: 10px;
	}
	.welcome .tracking .tracking-form button{
		width: 100%; height: 32px; max-width: 350px; margin-bottom: 10px;
	}
}

/* map */
.tracking-map{
	width: 100%; height: auto; padding: 10px 0px 0px 0px;
}

/* tracking result */
.ship_info{
	width: 100%; height: auto;
}
.ship_info .line{
	width: 100%; max-width: 240px; height: auto; margin: 0 auto; position: relative; text-align: center;
}
.ship_info .line .container_deadline{
    width: 100%; height: 3px; border: 0; position: relative; top: 30px; background-color: #999;
}
.ship_info .line .container_deadline .run{
	width: 100%; height: 3px; background-color: #F5C145;
}
.ship_info .line i{
    position: absolute; top: 21px; left: 0px; font-size: 20px; color: #999;
}
.ship_info .line i.active{
    color: #F5C145;
}
.ship_info .line i.big{
    top: 11px; background-color: #fff; border-radius: 50px; font-size: 40px;
}
.ship_info .line i.step_1{
    left: 0px;
}
.ship_info .line i.step_2{
    left: 33.33%;
}
.ship_info .line i.step_3{
    left: 67.67%;
}
.ship_info .line i.step_4{
    left: 100%;
}
.ship_info .line h3{
    margin-top: 50px;
}
.ship_info .line h5{
    font-style: italic; color: #999;
}
.ship_info .ship_info_from{
	width: 100%; height: auto; padding: 10px 10px;
}
.ship_info .ship_info_from hr{
	margin: 10px 0px; width: 90%;
}
.ship_info .ship_info_to{
	width: 100%; height: auto; padding: 10px 10px;
}
.ship_info .ship_info_to hr{
	margin: 10px 0px; width: 90%;
}
@media (min-width: 768px){
	.ship_info .ship_info_from{
		position: absolute; top: -120px;
	}
	.ship_info .ship_info_to{
		position: absolute; top: -120px;
	}
}
.ship_info .history{
	width: 100%; height: auto; padding: 10px 10px;
}
.ship_info .history table{
	width: 100%; border-top: 1px solid #999;
}
.ship_info .history table tr:nth-child(even) {background: #eee;}
.ship_info .history table tr:nth-child(odd) {background: #FFF;}
.ship_info .history table tr th{
	padding: 4px 6px;
}
.ship_info .history table tr td{
	padding: 4px 6px; color: #666;
}



@media (max-width: 560px) {
	.TrackPanel {
		border-radius: 0 !important;
	}

	/* Constrain eta header text to one line on mobile */
	.Eta-banner h2 {
		font-size: 6.2vw;
	}
}

/**** Panel ****/
.TrackPanel {
	border-radius: 4px;
	box-shadow: 0 2px 20px 0 rgba(40, 40, 40, 0.5);
	padding: 10px 0;
	background-color: #FFFFFF;
}

.TrackPanel-body {
	padding: 10px 30px;
}

.TrackPanel-body--flush {
	padding-left: 0;
	padding-right: 0;
}

.TrackPanel-heading {
	border-bottom: 1px solid #EFEFEF;
	padding-bottom: 13px;
	padding-top: 4px;
	text-align: left;
}

/**** ETA section ****/
.Eta {
}

.Eta-heading {
	color: #555555;
	margin-bottom: 10px;
}
.tracking_info .status {
	font-size: 22px;
	font-weight: bold;
}
.tracking_info .current_location {
}
.tracking_info .current_location p {
	margin-bottom: 0;
}
.title_info {
	font-size: 14px;
	font-weight: bold;
}
.note_delivery_estimated {
	font-size: 15px;
}
.delivered {
	color: #48c34c;
}
.note_delivered {
	padding-top: 15px;
}
.Eta-banner {
	color: white;
	overflow: auto;
	padding: 15px 10%;
}

/**** Items section ****/
.LineItem {
	padding-bottom: 10px;
	text-align: left;
}

/**** Track timeline section ****/
/* TIMELINE CONTAINER */
.Timeline {
	position: relative;
	overflow: hidden;
}

/* Middle vertical line */
.Timeline::before {
	content: '';
	position: absolute;
	height: 100%;
	left: 50%;
	top: 5px;
	width: 2px;
	background-color: #000;
}

.Timeline::after {
	content: '';
	clear: both;
	display: block;
}

/* TIMELINE EVENT */
.Timeline-item {
	clear: both;
	min-height: 50px;
	font-size: 13px;
}

.Timeline-item:last-child {
	min-height: auto;
}
.Timeline-item.is-current .Timeline-itemContent header{
	font-weight: bold;
	font-size: 16px;
}
/* Dots */
.Timeline-item::before {
	content: '';
	position: absolute;
	left: 50%;
	width: 10px;
	height: 10px;
	margin-top: 4px;
	margin-left: -4px;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #fff;
}

/* Current dot is filled */
.Timeline-item.is-current::before {
	background-color: #000;
}

/* Cover up the last portion of the vertical line :) */
.Timeline-item.is-current::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 2px;
	height: 100px;
	margin-top: 14px;
}

/* TIMELINE EVENT DETAIL */
/* Pull date stamp to left side */
.Timeline-itemDate {
	float: left;
	width: 50%;
	text-align: right;
	padding-right: 18px;
	color: #999999;
}

/* Pull event to right side */
.Timeline-itemContent {
	float: right;
	width: 50%;
	text-align: left;
	padding-left: 18px;
	color: #555555;
}

.Timeline-itemContent header {
	font-weight: 500;
	line-height: 1.2em;
}

.Timeline-itemContent p {
	margin-top: 3px;
}

/**** Utilities ****/
.btn-rounded {
	border-radius: 50px;
}

.btn-default--muted {
	color: #718087;
	border-color: #e7e7e7;
}

.border-bottom {
	border-bottom: 1px solid #EFEFEF;
}

.button-bottom{
	text-align: center;
}
.button-bottom button{
	margin: 20px auto !important;
	width: 160px !important;
}

.is-hidden {
	display: none;
}


/******Timezone*************/
.div_timezone {
	padding-bottom: 20px;
}
.list_timezone {
	display: none;
}