/**
 * Name: eCourier Parcel Tracker
 * Description: Styling for the frontend form and parcel tracking result view for eCourier Parcel Tracker WordPress plugin.
 * Author: Simon Gomes
 * Author URI: https://simongomes.dev
 * Version: 1.0.0
 * License: GPLv2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

/* Load font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

#ept-wrap {
	max-width: 850px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Poppins', sans-serif;
}

#ept-wrap * {
	list-style: none!important;
}

#ept-wrap .ept-title {
	font-weight: 600;
	text-align: center;
	color: #213540;
	letter-spacing: .25px;
	font-size: 36px;
	margin-top: 20px;
	margin-bottom: 5px;
}

#ept-wrap .ept-subtitle {
	text-align: center;
	line-height: 1.7em;
	letter-spacing: .35px;
	font-weight: 400;
	color: #3a3a3a;
	font-size: 15px;
	margin-bottom: 20px;
	margin-top: 0;
}

#ept-wrap .ept-tracker-input-container {
	-webkit-box-shadow: 0 0 20px -8px rgb(27 30 26 / 45%);
	-ms-box-shadow: 0 0 20px -8px rgba(27, 30, 26, .45);
	box-shadow: 0 0 20px -8px rgb(27 30 26 / 45%);
	padding: 20px;
	border-radius: 10px;
	background: #fff;
}

#ept-wrap .ept-tracker-input-container form {
	position: relative;
	margin: 0;
}

#ept-wrap .ept-tracker-input-container form input {
	padding: 15px 15px 15px 45px;
	width: 100%;
	border-radius: 4px;
	resize: none;
	border: 1px solid #c9d1d5;
	color: #213540;
	display: block;
	font-size: 1rem;
	line-height: 1.5;
	background-clip: padding-box;
	font-weight: 300;
	outline: none;
	background: #fff url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIxLjAwOTkgMTAuNDI5OUgyMC41Mjk5QzIwLjM4MDQgOC4xMDUzIDE5LjM4OTUgNS45MTQ2OSAxNy43NDIzIDQuMjY3NTRDMTYuMDk1MiAyLjYyMDM5IDEzLjkwNDUgMS42Mjk0NCAxMS41Nzk5IDEuNDc5OTJWMC45ODk5MjJDMTEuNTc5OSAwLjY3OTkyMiAxMS4zMTk5IDAuNDE5OTIyIDExLjAwOTkgMC40MTk5MjJDMTAuNjk5OSAwLjQxOTkyMiAxMC40Mzk5IDAuNjc5OTIyIDEwLjQzOTkgMC45ODk5MjJWMS40Njk5MkM4LjExNTMgMS42MTk0NCA1LjkyNDY5IDIuNjEwMzkgNC4yNzc1NCA0LjI1NzU0QzIuNjMwMzkgNS45MDQ2OSAxLjYzOTQ0IDguMDk1MyAxLjQ4OTkyIDEwLjQxOTlIMC45ODk5MjJDMC42Nzk5MjIgMTAuNDE5OSAwLjQxOTkyMiAxMC42Nzk5IDAuNDE5OTIyIDEwLjk4OTlDMC40MTk5MjIgMTEuMjk5OSAwLjY3OTkyMiAxMS41NTk5IDAuOTg5OTIyIDExLjU1OTlIMS40Njk5MkMxLjcyOTkyIDE2LjM2OTkgNS42MDk5MiAyMC4xOTk5IDEwLjQxOTkgMjAuNTA5OVYyMC45ODk5QzEwLjQxOTkgMjEuMjk5OSAxMC42Nzk5IDIxLjU1OTkgMTAuOTg5OSAyMS41NTk5QzExLjI5OTkgMjEuNTU5OSAxMS41NTk5IDIxLjI5OTkgMTEuNTU5OSAyMC45ODk5VjIwLjUwOTlDMTYuMzY5OSAyMC4yNDk5IDIwLjE5OTkgMTYuMzY5OSAyMC41MDk5IDExLjU1OTlIMjAuOTg5OUMyMS4yOTk5IDExLjU1OTkgMjEuNTU5OSAxMS4yOTk5IDIxLjU1OTkgMTAuOTg5OUMyMS41Nzk5IDEwLjY4OTkgMjEuMzE5OSAxMC40Mjk5IDIxLjAwOTkgMTAuNDI5OVpNMTguOTM5OSAxMS41Njk5SDE5LjM3OTlDMTkuMTE5OSAxNS43NTk5IDE1Ljc1OTkgMTkuMTA5OSAxMS41Nzk5IDE5LjM2OTlWMTguOTI5OUMxMS41Nzk5IDE4LjYxOTkgMTEuMzE5OSAxOC4zNTk5IDExLjAwOTkgMTguMzU5OUMxMC42OTk5IDE4LjM1OTkgMTAuNDM5OSAxOC42MTk5IDEwLjQzOTkgMTguOTI5OVYxOS4zNjk5QzYuMjQ5OTIgMTkuMTA5OSAyLjg5OTkyIDE1Ljc0OTkgMi42Mzk5MiAxMS41Njk5SDMuMDc5OTJDMy4zODk5MiAxMS41Njk5IDMuNjQ5OTIgMTEuMzA5OSAzLjY0OTkyIDEwLjk5OTlDMy42NDk5MiAxMC42ODk5IDMuMzg5OTIgMTAuNDI5OSAzLjA3OTkyIDEwLjQyOTlIMi42MTk5MkMyLjg3OTkyIDYuMjM5OTIgNi4yMzk5MiAyLjg4OTkyIDEwLjQxOTkgMi42Mjk5MlYzLjA2OTkyQzEwLjQxOTkgMy4zNzk5MiAxMC42Nzk5IDMuNjM5OTIgMTAuOTg5OSAzLjYzOTkyQzExLjI5OTkgMy42Mzk5MiAxMS41NTk5IDMuMzc5OTIgMTEuNTU5OSAzLjA2OTkyVjIuNjE5OTJDMTUuNzQ5OSAyLjg3OTkyIDE5LjA5OTkgNi4yMzk5MiAxOS4zNTk5IDEwLjQxOTlIMTguOTE5OUMxOC42MDk5IDEwLjQxOTkgMTguMzQ5OSAxMC42Nzk5IDE4LjM0OTkgMTAuOTg5OUMxOC4zNDk5IDExLjI5OTkgMTguNjI5OSAxMS41Njk5IDE4LjkzOTkgMTEuNTY5OVpNMTUuMTM5OSAxMC40Mjk5SDEzLjU0OTlDMTMuNDQyOCA5Ljk0NTU3IDEzLjE5OTUgOS41MDE5IDEyLjg0ODcgOS4xNTExM0MxMi40OTc5IDguODAwMzYgMTIuMDU0MyA4LjU1NzA4IDExLjU2OTkgOC40NDk5MlY2Ljg1OTkyQzExLjU2OTkgNi41NDk5MiAxMS4zMDk5IDYuMjg5OTIgMTAuOTk5OSA2LjI4OTkyQzEwLjY4OTkgNi4yODk5MiAxMC40Mjk5IDYuNTQ5OTIgMTAuNDI5OSA2Ljg1OTkyVjguNDQ5OTJDOS45NDU1NyA4LjU1NzA4IDkuNTAxOSA4LjgwMDM2IDkuMTUxMTMgOS4xNTExM0M4LjgwMDM2IDkuNTAxOSA4LjU1NzA4IDkuOTQ1NTcgOC40NDk5MiAxMC40Mjk5SDYuODU5OTJDNi41NDk5MiAxMC40Mjk5IDYuMjg5OTIgMTAuNjg5OSA2LjI4OTkyIDEwLjk5OTlDNi4yODk5MiAxMS4zMDk5IDYuNTQ5OTIgMTEuNTY5OSA2Ljg1OTkyIDExLjU2OTlIOC40NDk5MkM4LjU1NzA4IDEyLjA1NDMgOC44MDAzNiAxMi40OTc5IDkuMTUxMTMgMTIuODQ4N0M5LjUwMTkgMTMuMTk5NSA5Ljk0NTU3IDEzLjQ0MjggMTAuNDI5OSAxMy41NDk5VjE1LjEzOTlDMTAuNDI5OSAxNS40NDk5IDEwLjY4OTkgMTUuNzA5OSAxMC45OTk5IDE1LjcwOTlDMTEuMzA5OSAxNS43MDk5IDExLjU2OTkgMTUuNDQ5OSAxMS41Njk5IDE1LjEzOTlWMTMuNTQ5OUMxMi4wNTQzIDEzLjQ0MjggMTIuNDk3OSAxMy4xOTk1IDEyLjg0ODcgMTIuODQ4N0MxMy4xOTk1IDEyLjQ5NzkgMTMuNDQyOCAxMi4wNTQzIDEzLjU0OTkgMTEuNTY5OUgxNS4xMzk5QzE1LjQ0OTkgMTEuNTY5OSAxNS43MDk5IDExLjMwOTkgMTUuNzA5OSAxMC45OTk5QzE1LjcwOTkgMTAuNjg5OSAxNS40NDk5IDEwLjQyOTkgMTUuMTM5OSAxMC40Mjk5Wk0xMC45OTk5IDEyLjQ5OTlDMTAuMTU5OSAxMi40OTk5IDkuNDk5OTIgMTEuODM5OSA5LjQ5OTkyIDEwLjk5OTlDOS40OTk5MiAxMC4xNTk5IDEwLjE1OTkgOS40OTk5MiAxMC45OTk5IDkuNDk5OTJDMTEuODM5OSA5LjQ5OTkyIDEyLjQ5OTkgMTAuMTU5OSAxMi40OTk5IDEwLjk5OTlDMTIuNDk5OSAxMS44Mzk5IDExLjgzOTkgMTIuNDk5OSAxMC45OTk5IDEyLjQ5OTlaIiBmaWxsPSIjQTBBMEEwIi8+Cjwvc3ZnPgo=) no-repeat 15px center;
}

#ept-wrap .ept-tracker-input-container form button {
	position: absolute;
	top: 0;
	height: 100%;
	right: -2px;
	border-radius: 0 4px 4px 0;
	background: #56C4CF;
	border: none;
	letter-spacing: .35px;
	font-weight: 600;
	padding: 15px 35px;
	font-size: 1rem;
	cursor: pointer;
	color: #fff;
	display: inline-block;
	line-height: 1;
	text-transform: capitalize;
	z-index: 1;
	overflow: hidden;
	outline: none;
	border-radius: 0 4px 4px 0;
	text-decoration: none;
}

#ept-wrap .ept-tracker-input-container form button::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #42bdc9;
	z-index: -1;
	transform: skew( -15deg ) translateX( -50% );
	transition: all 0.5s cubic-bezier( .75,0,.25,1 ) 0.06s;
}
#ept-wrap .ept-tracker-input-container form button:hover::after {
	transform: skew(-15deg) translateX(50%);
}

#ept-wrap #error-container {
	padding: 15px;
	font-weight: 500;
	margin-top: 15px;
	background: #ff2828;
	text-align: center!important;
	color: #fff!important;
	border-radius: 4px;
	display: none;
}
#ept-wrap #error-container p {
	margin: 0;
}

#ept-wrap #track-not-found {
	text-align: center;
	padding: 20px;
	display: none;
}

#ept-wrap #track-not-found img {
	max-width: 200px;
	margin: 0 auto 30px;
}

#ept-wrap #package-information {
	display: none;
	padding: 30px;
	background: #fff;
	border-radius: 6px;
	margin-top: 50px;
	-webkit-box-shadow: 0 0 15px -8px rgb(27 30 26 / 45%);
	-ms-box-shadow: 0 0 15px -8px rgba(27, 30, 26, .45);
	box-shadow: 0 0 15px -8px rgb(27 30 26 / 45%);
}

#ept-wrap #package-information .info-header {
	display: flex;
	justify-content: space-between;
	margin: 0 -30px 30px;
	border-bottom: 1px solid #e3e7e9;
	padding: 0 30px 30px;
	align-items: center;
}

#ept-wrap #package-information .info-header h3 {
	font-size: 30px;
	font-weight: 700;
	margin: 0;
}

#ept-wrap #package-information .info-header h4 {
	color: #3a3a3a;
	text-align: right;
	font-weight: 400;
	font-size: 16px;
	margin: 0;
}

#ept-wrap #package-information .info-header h4 strong {
	display: block;
	font-size: 18px;
	color: #1B1E1A;
	font-weight: 700;
	margin-top: 5px;
}

#ept-wrap #package-information .track-order-info {
	padding: 30px;
	background: #F1F3F4;
	border-radius: 4px;
	margin-bottom: 30px;
}

#ept-wrap #package-information .track-order-info p {
	margin: 0;
	display: inline;
}

#ept-wrap #package-information .track-order-info ul {
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
}

#ept-wrap #package-information .track-order-info ul li {
	font-size: 14px;
	letter-spacing: .25px;
	color: #1B1E1A;
}

#ept-wrap #package-information .track-order-info ul li:first-of-type {
	text-align: left;
}

#ept-wrap #package-information .track-order-info ul li:nth-child(2) {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
}

#ept-wrap #package-information .track-order-info ul li:last-of-type {
	text-align: right;
}

#ept-wrap #package-information .track-order-info ul li span {
	display: block;
	font-size: 14px;
	color: #465C5F;
	margin-bottom: 5px;
	font-weight: 400;
}

#ept-wrap #package-information .track-delivery-info {
	padding: 30px 30px 0;
	background: #F1F3F4;
	border-radius: 4px;
}

#ept-wrap #package-information .track-delivery-info ul {
	padding: 0;
	margin: 0;
	position: relative;
}

#ept-wrap #package-information .track-delivery-info ul::before {
	content: '';
	width: 2px;
	height: calc(100% - 90px);
	position: absolute;
	left: 0;
	top: 2px;
	background: #602D90;
}

#ept-wrap #package-information .track-delivery-info ul::after {
	content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNC42OTMiIGhlaWdodD0iMTcuNzM4IiB2aWV3Qm94PSIwIDAgMTQuNjkzIDE3LjczOCI+CiAgPGcgaWQ9InNlbmQtcmVjZWl2ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMjc3IC0xLjEyNSkiPgogICAgPHBhdGggaWQ9IlBhdGhfMyIgZGF0YS1uYW1lPSJQYXRoIDMiIGQ9Ik0xMi40MTksMi44NTF2OGwyLjA1Mi0xLjg5NSwxLjU3OS0uMzE2TDE3LjI2Miw5Ljc2bC0uNDc0LDEuODI4LTYsNi40MjJMNC4zMTMsMTEuMTE1VjkuMzI2bDIuMTA1LS43OUw5LjA1LDEwLjg1MmwuMTU3LThBMi4wNTgsMi4wNTgsMCwwLDEsMTIuNDE5LDIuODUxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuMTYzIC0wLjE0NykiIGZpbGw9IiNmMWYzZjQiLz4KICAgIDxnIGlkPSJHcm91cF8zIiBkYXRhLW5hbWU9Ikdyb3VwIDMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMuMjc3IDEuMTI1KSI+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzQiIGRhdGEtbmFtZT0iUGF0aCA0IiBkPSJNMTAuNjIzLDE4Ljg2M2wtNi41NC02LjU0YTIuNzU4LDIuNzU4LDAsMCwxLDAtMy45LDIuODIxLDIuODIxLDAsMCwxLDMuNzg1LS4xMDVWMy44ODFhMi43NTYsMi43NTYsMCwxLDEsNS41MTEsMHY0LjQ0YTIuODIxLDIuODIxLDAsMCwxLDMuNzg1LjEwNSwyLjc1OCwyLjc1OCwwLDAsMSwwLDMuOVpNNi4wMzEsOS40NTZhLjkxOC45MTgsMCwwLDAtLjY0OSwxLjU2OGw1LjI0Miw1LjI0Miw1LjI0Mi01LjI0MmEuOTE3LjkxNywwLDAsMCwwLTEuMy45MzkuOTM5LDAsMCwwLTEuMywwTDExLjU0MiwxMi43NVYzLjg4MWEuOTE5LjkxOSwwLDAsMC0xLjgzOCwwVjEyLjc1TDYuNjgsOS43MjVBLjkxMS45MTEsMCwwLDAsNi4wMzEsOS40NTZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy4yNzcgLTEuMTI1KSIgZmlsbD0iIzYwMmQ5MCIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==);
	position: absolute;
	top: 20px;
	left: -6px;
	width: 18px;
	animation: scroll 3s infinite forwards;
}

#ept-wrap #package-information .track-delivery-info ul li {
	position: relative;
	padding-left: 30px;
	min-height: 90px;
	color: #3a3a3a;
	font-weight: 400;
	line-height: 20px;
	font-size: 14px;
}

#ept-wrap #package-information .track-delivery-info ul li::before {
	content: '';
	width: 14px;
	height: 14px;
	background: #602D90;
	border-radius: 50%;
	position: absolute;
	left: -6px;
	top: 2px;
	border: 2px solid #fff;
	-webkit-box-shadow: 0 0 5px -1px rgb(27 30 26 / 25%);
	-ms-box-shadow: 0 0 5px -1px rgba(27,30,26,.25);
	box-shadow: 0 0 5px -1px rgb(27 30 26 / 25%);
}

#ept-wrap #package-information .track-delivery-info ul li span {
	color: #1B1E1A;
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

@keyframes scroll {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0)
	}

	75% {
		opacity: 1
	}

	100% {
		opacity: 0;
		transform: translateY(50px)
	}
}

#ept-wrap #package-information .track-shipment-info {
	padding: 30px;
	background: #F1F3F4;
	border-radius: 4px;
	margin-top: 30px;
	margin-bottom: 30px;
}

#ept-wrap #package-information .track-shipment-info h3 {
	font-size: 18px;
	color: #1B1E1A;
	margin-bottom: 30px;
	margin-top: 0;
	font-weight: 600;
}

#ept-wrap #package-information .track-shipment-info ul {
	padding: 0;
	margin: 0;
}
#ept-wrap #package-information .track-shipment-info ul li {
	position: relative;
	letter-spacing: .35px;
}

#ept-wrap #package-information .track-shipment-info>ul>li {
	font-size: 16px;
	font-weight: 700;
	padding-left: 30px;
	border-left: 2px solid #959595;
	border-color: #959595;
}

#ept-wrap #package-information .track-shipment-info>ul>li::before {
	top: 0;
}

#ept-wrap #package-information .track-shipment-info>ul>li::before, #ept-wrap #package-information .track-shipment-info>ul>li:last-child::after {
	content: '';
	height: 18px;
	width: 18px;
	background: #959595;
	border: 3px solid #fff;
	border-radius: 50%;
	position: absolute;
	left: -10px;
}
#ept-wrap #package-information .track-shipment-info>ul>li.active {
	border-color: #602D90;
}

#ept-wrap #package-information .track-shipment-info>ul>li.active::before, #ept-wrap #package-information .track-shipment-info>ul>li.active:last-child::after {
	background: #602D90;
}
#ept-wrap #package-information .track-shipment-info ul li ul {
	width: 80%;
}

#ept-wrap #package-information .track-shipment-info ul li ul li {
	display: grid;
	grid-template-columns: 120px 1fr;
	padding: 15px 0;
	font-size: 12px;
	color: #3a3a3a;
	font-weight: 400;
}

#ept-wrap #package-information .track-shipment-info ul li ul li::before {
	top: 20px;
	left: -30px;
	position: absolute;
	width: 12px;
	height: 2px;
	background: #959595;
	content: '';
}

#ept-wrap #package-information .track-shipment-info ul li ul li h4 {
	margin: 0;
	font-size: 12px;
}

#ept-wrap #package-information .track-shipment-info ul li ul li strong, #ept-wrap #package-information .track-shipment-info ul li ul li h4 {
	color: #1B1E1A;
	font-weight: 500;
}

#ept-wrap #package-information .track-shipment-info ul li ul li b {
	display: block;
	color: #1B1E1A;
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 5px;
}

#ept-wrap #package-information .track-shipment-info ul li ul li strong, #ept-wrap #package-information .track-shipment-info ul li ul li h4 {
	color: #1B1E1A;
	font-weight: 500;
}
#ept-wrap #package-information .track-shipment-info>ul>li.active ul li::before {
	background: #602D90;
}