@import "variables";
.p-tracking {
	.nav-tabs {
		margin-bottom: 24px;
		@media( max-width: 575px ){
			display: flex;
		}
		& > li {
			@media( max-width: 575px ) {
				float: none;
			}
			& > a, & > span {
				padding: 12px 16px;
				text-align: center;
			}
			&.more {
				.drop {
					min-width: 220px;
					li {
						a {
							padding: 12px 16px;
							&:hover {
								background: #f5f7fa;
							}
						}
					}
				}
			}
		}

		&:not(.nav-tabs-responsive){
			& > li {
				& > a, & > span {
					white-space: normal;
				}
			}
		}

		&.v2 {
			& > li {
				&.more {
					padding-left: 4px;
					& > span {
						background: $blue;
						margin-top: 4px;
						padding: 8px 12px;
						color: $white;
						@include border-radius(2px);
					}
				}
			}
		}
	}

	.tracking-h1 {
		font-size: 34px;
		@media (max-width: 991px){ font-size: 28px; }
		@media (max-width: 767px){ font-size: 22px; }
	}

	.p-tracking-form {
		max-width: 450px;
		.form-group {
			margin-bottom: 20px;
			&:before {
				display: table;
				content: " ";
			}
			&:after {
				clear: both;
			}
			label {
				margin-bottom: 4px;
				@media (min-width: 576px){
					float: left;
					width: 140px;
					margin: 5px 0 0 0;
				}
			}
			.form-field {
				@media (min-width: 576px){
					margin-left: 140px;
				}
			}
		}
	}

	.mini-contact-list {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			position: relative;
			padding-left: 32px;
			font-size: 14px;
			&:not(:first-child){
				margin-top: 8px;
			}
			.fa {
				position: absolute; top: 50%; left: 0;
				display: block;
				width: 24px;
				height: 24px;
				margin-top: -10px;
				font-size: 18px;
				color: $black;
				line-height: 24px;
				text-align: center;
			}
			a {
				border-bottom-color: transparent;
				&.color-black {
					@media (max-width: 767px){
						color: $blue !important;
					}
				}
			}
		}
	}

	.p-tracking__summaryError {
		@media (min-width: 576px){
			margin-left: 140px;
		}
	}
}

.p-tracking-list {
	margin: 0;
	padding: 0;
	list-style: none;
	& > li {
		position: relative;
		overflow: hidden;
		padding: 0 4px 32px 28px;
		font-size: 14px;
		//&:not(:first-child){}
		&:before {
			content: '';
			border-left: 1px dashed $color_gray_20;
			position: absolute; top: 0; bottom: 0; left: 10px;
			display: block;
		}
		&:last-child {
			&:before { display: none; }
		}
		.ptl-gap {
			position: absolute; bottom: 0; left: 10px;
			display: block; width: 1px; height: 32px;

			background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
			background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
		}
		.ptl-gap-2 {
			background: $white;
			border-top: 1px solid rgba(0,0,0,0.15);
			border-bottom: 1px solid rgba(0,0,0,0.15);
			position: absolute; bottom: 8px; left: 7px;
			display: block; width: 7px; height: 16px;
		}
		.ptl-mark {
			background: $white;
			border: 1px dashed $color_gray_20;
			position: absolute; top: 0; left: 0;
			display: block;
			width: 20px;
			height: 20px;
			@include border-radius(50%);
			&:before {
				content: '';
				position: absolute; top: 35%; left: 25%;
				display: block;
				width: 50%;
				height: 25%;
				@include transform(rotate(-45deg));
			}
		}
		.ptl-title {
			position: relative;
			color: $gray;
		}
		.ptl-date {
			color: $color_gray_40;
		}
		.ptl-description {
			color: $color_gray_40;
		}
		.ptl-explanation {
			background: $white;
			display: inline-block;
			margin: 8px 0 0 0;
			padding: 8px 12px;
			list-style: none;
			@include box-shadow(0 2px 6px 0 rgba(0,0,0,.2));
			@include border-radius(4px);
			&.info {
				background: $color_water;
				@include box-shadow();
			}
			p {
				margin-bottom: 8px;
			}
			a {
				word-break: break-all;
			}
			.ptl-explanation__table {
				.d-grid {
					display: inline-grid;
					grid-template-columns: auto auto;
					.d-grid__label {
						padding: 3px 0;
					}
					.d-grid__field {
						margin-left: 20px;
						padding: 3px 0;
					}
					@media (max-width: 575px) {
						grid-template-columns: 100%;
						.d-grid__label {
							padding: 0;
							&:not(:first-child){
								margin-top: 8px;
							}
						}
						.d-grid__field {
							margin-left: 0;
							padding: 0;
						}
					}
				}
			}
		}
		.ptl-address {
			position: relative;
			overflow: hidden;
			max-width: 480px;
			@include box-shadow(0 2px 6px 0 rgba(0,0,0,.2));
			@include border-radius(4px);
			.ptl-address__side {
				background-position: 50% 50%;
				background-size: cover;
				min-height: 200px;
				@media (min-width: 767px) {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					width: 50%;
					min-height: auto;
				}
			}
			.ptl-address__body {
				@media (min-width: 767px){
					margin-left: 50%;
				}
				padding: 12px 16px;
			}
		}

		&.completed {
			.ptl-mark {
				background: #c8e69f;
				border: none;
				@include box-shadow(inset 0 1px 1px $color_gray_20);
				&:before {
					border-bottom: 1px solid darken($green, 15%);
					border-left: 1px solid darken($green, 15%);
				}
			}
			.ptl-title {
				color: $gray_dark;
			}
		}
		&.current {
			.ptl-mark {
				background: rgb(0,105,0);
				background: -moz-linear-gradient(top, rgba(0,200,0,1) 0%, rgba(0,105,0,1) 100%);
				background: -webkit-linear-gradient(top, rgba(0,200,0,1) 0%,rgba(0,105,0,1) 100%);
				background: linear-gradient(to bottom, rgba(0,200,0,1) 0%,rgba(0,105,0,1) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c800', endColorstr='#006900',GradientType=0 );
				border: none;
				&:before {
					border-bottom: 1px solid $white;
					border-left: 1px solid $white;
				}
			}
			.ptl-title {
				margin-top: -4px;
				font-size: 18px;
				font-weight: bold;
				color: $green_dark;
			}
		}
	}
}

.p-tracking-order-info {
	.cloud {
		background: $white;
		display: inline-block;
		width: 520px;
		max-width: 100%;
		margin: 0 0 32px;
		padding: 16px;
		list-style: none;
		@include border-radius(4px);
		@include box-shadow(0 2px 7px 0 rgba(0,0,0,0.15));
		& > li {
			& + li {
				margin-top: 8px;
			}
		}
	}
}

.p-tracking-another {
	padding-left: 28px;
	font-size: 16px;
}

.p-tracking-parcel {
	//max-width: 540px;
	margin-bottom: 32px;
	.p-tracking-parcel__head {
		margin-bottom: 8px;
		font-size: 16px;
		font-weight: bold;
	}
	.p-tracking-parcel__body {
		.p-tracking-parcel-item {
			padding: 8px 0;
			font-size: 14px;
			& + .p-tracking-parcel-item {
				border-top: 1px solid $color_gray_10;
			}
			.ptpi__left {
				position: relative;
				float: left;
				width: 80px;
				padding-right: 16px;
			}
			.ptpi__right {
				float: right;
				padding-left: 16px;
				font-weight: bold;
			}
			.ptpi__center {
				overflow: hidden;
			}
			.ptpi__image {
				border: none;
				display: block;
				img {
					display: block;
					width: 100%;
				}
			}
			.ptpi__overlay {
				background: $color_dark;
				position: absolute; top: 50%; right: 100%;
				width: 240px;
				@media(min-width: 1200px){
					width: 280px;
				}
				margin-right: 12px;
				padding: 16px;
				@include transform(translateY(-50%));
				img {
					display: block;
					width: 100%;
				}
			}
			.ptpi__title {
				a {
					border-bottom-color: transparent;
					font-weight: bold;
					&:hover {
						border-bottom-color: $blue;
					}
				}
			}
		}
		.more-link {
			padding-top: 16px;
			color: $blue;
			span {
				cursor: pointer;
			}
		}
	}
	&.open {
		.p-tracking-parcel__body {
			border-bottom: 1px solid $color_gray_10;
			.p-tracking-parcel-item {
				&.hidden {
					display: block !important;
				}
			}
			.more-link {
				display: none;
			}
		}
	}
}

.p-tracking-custom {
	margin: 0;
	padding: 0;
	list-style: none;
	dt {}
	dd {
		&:not(:first-child){
			margin-top: 4px;
		}
	}
	a {
		border-bottom-color: transparent;
		svg {
			display: inline;
			width: 14px;
			height: 14px;
			margin-left: 4px;
		}
		&:hover {
			border-bottom-color: $blue;
		}
	}
}