/**
*  @author    ThemeDelights
*  @copyright Since 2015 ThemeDelights. All Rights Reserved.
*  @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
*/

@-webkit-keyframes bar-progress {
	0% {
		background-position: 0 0;
	}

	to {
		background-position: -60px -60px;
	}
}

@keyframes bar-progress {
	0% {
		background-position: 0 0;
	}

	to {
		background-position: -60px -60px;
	}
}

#offcanvas_sidecart .tdfreeshipping {
	padding: 15px;
	box-shadow: 0 0 10px 0 rgba(229, 229, 229, 0.7);
}

#offcanvas_sidecart .tdfreeshipping .shipping_progress {
	margin: 15px 0 0;
}

.shipping_progress {
	width: 100%;
	height: 10px;
	background-color: var(--shipBarColor, #ededed);
	border-radius: 5px;
	margin: 15px 0 5px;
	position: relative;
}

.shipping_progress > span {
	width: 0;
	border-radius: 5px;
	background-color: var(--shipActiveBarColor, var(--color-primary));
	transition: width .4s ease-in-out;
	display: block;
	height: 100%;
	animation: 5s linear infinite bar-progress;
	position: relative;
	background-size: 1rem 1rem;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%);
}

.shipping_progress > span > svg {
	position: absolute;
	bottom: -2px;
	right: 0;
	stroke: #FFF;
	height: 30px;
	width: 30px;
	fill: var(--carIconColor, var(--color-primary));
}

.shipping_progress > span[data-shippercent="0"] > svg {
	right: -30px;
}

.shipping_progress svg .wheel {
	fill: #FFF;
}