/* Base styling*/
.unity-order-tracking {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    padding-top: 50px;
    margin-bottom: 50px;
}
.unity-order-tracking h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}
.unity-order-tracking h2 {
    margin-top: 50px;
    margin-bottom: 0;
    padding-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}
.unity-order-tracking h2.order-nr {
    margin-top: 20px;
    padding: 0;
}

/* Order route details */
:root {
    --background-color-inactive: #D0D4D9;
    --background-color-active: #EAEAEA;
    --line-color: #559d76;
}
.ot-actions-delivery:first-child:after, .ot-actions-delivery:last-child:after {
	display: block;
	position: absolute;
	font-size: 9px;
}
.ot-actions-delivery:before {
	content: "";
    height: 2px;
	background-color: var(--line-color);
    position: absolute;
    top: 50%;
	left: 100%;
}
.ot-actions-delivery:last-child:before{
	width: 0px;
}
.ot-actions-delivery:last-child span:last-of-type{
	position: absolute;
    top: 25px;
	font-size: 10px;
    right: 0;
}
.ot-actions-delivery.inactive:before, .ot-actions-delivery.driver-location:before, .ot-actions-delivery.stacked-delivery:before {
    background-color: var(--background-color-active);
}
.ot-actions-delivery.inactive {
	background-color: var(--background-color-inactive);
}
.ot-actions-delivery.driver-location:before {
	background-color: var(--background-color-active);
}
.ot-actions-delivery.driver-location div:before {
	content: "";
    height: 2px;
	background-color:  var(--line-color);
    position: absolute;
	top: 50%;
	right: 20px;
}
.ot-actions-delivery.driver-location div {
	animation: animate_car 2s ease-in-out infinite;
}
.ot-actions-delivery {
    height: 20px;
    width: 20px;
    border-radius: 20px;
	background:  var(--line-color);
	position: relative;
}
.ot-actions-delivery .first-client {
	position: absolute;
	top: 25px;
	width: 60px;
	font-size: 10px;

}
.ot-actions-delivery.driver-location > div svg {
	display: block;
	position: relative;
    width: 20px;
    height: 20px;
	fill:  var(--line-color);
}
.ot-actions-delivery .ot-order-delivery-house svg {
	display: block;
    width: 13px;
    height: 13px;
}
.ot-actions-delivery.driver-location .ot-order-delivery-house svg {
    fill: #FFFFFF;
}
.ot-actions-delivery .ot-order-delivery-house {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.ot-order-delivery-content {
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	position: relative;
	overflow: hidden;
	height: 60px;
}
.ot-actions-delivery.stacked-delivery {
	background: var(--background-color-inactive);
	border-radius: 5px;
	text-align: center;
}
.ot-actions-delivery.stacked-delivery span {
	font-size: 10px;
}
.ot-order-delivery-container ul .ot-order-delivery-time, .ot-order-delivery-container ul li span span {
	font-weight: 700;
}
.ot-order-delivery-destination {
	margin-top: 5px;
	margin-bottom: 5px;
}
.ot-actions-delivery .checkmark {
    display: block;
	height: 15px;
	width: 15px;
    position: absolute;
	stroke: #FFFFFF;
	top: 3px;
    left: 3px;
    z-index: 2;
}
.ot-actions-delivery:last-child .checkmark{
    display: none;
}
.ot-order-delivery-content.desktop-view {
	display: none;
}
/* Order details */
.ot-order-details ul {
    padding: 16px 24px;
    background: #f8f8f8;
}
.ot-order-delivery .ot-order-delivery-container {
    padding: 10px 15px 10px 15px;
    background: #f8f8f8;
}
.ot-order-details ul li {
    font-size: 14px;
    padding: 0;
}
.ot-order-details ul li + li {
    padding-top: 5px;
}
.ot-order-details ul li span {
    font-weight: 700;
}
.ot-order-delivery h2 {
    color: #559D76;
}

/* Product cards*/
.ot-product + .ot-product {
    margin-top: 8px;
}
.ot-product.cancelled .ot-product-card-img,
.ot-product.cancelled .ot-product-card-block,
.ot-product.cancelled .ot-actions-list{
    opacity: 0.5;
}
.ot-product-card {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eff1f2;
    background: #f8f8f8;
    padding: 24px;
    align-items: center;
    justify-content: center;
}
.ot-product-card-img {
    width: 100%;
    margin-bottom: 5px;
    text-align: center;
}
.ot-product-card-img img {
    max-height: 100px;
}
.ot-product-card-block {
    display: flex;
    align-items: center;
    flex-grow: 1;
}
.ot-product-card-content {
    margin: 0 0 0 5px;
    flex-grow: 1;
}
.ot-product-card-content-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    color: #000000;
    margin-bottom: 5px;
}
.ot-product-card-content-features {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.ot-product-card-content-features span{
    font-size: 14px;
    line-height: 19px;
    color: #7C7F85;
}
.ot-product-card-content-qty{
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #7C7F85;
}
.ot-product-card-price {
    font-size: 16px;
    font-weight: 500;
    margin-top: auto;
}
.ot-product-card-price span{
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
}
.ot-order-extra:after {
    display: block;
    content: '';
    padding-bottom: 50px;
    border-bottom: 1px solid #EFF1F2;
}

/* Actions history */
.ot-actions {
    position: relative;
    background: #f8f8f8;
    width: 100%;
}
.ot-actions-list {
    position: relative;
    padding: 0;
}
.ot-actions-item {
    display: flex;
    align-items: stretch;
    position: relative;
    transition: opacity 1s ease-in-out;
    padding: 0;
}
.ot-actions-item:not(:last-child) {
    border-bottom: 1px solid #eff1f2;
}
.ot-actions-item-time {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 16px 10px 16px 24px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
}
.ot-actions-item-time span:first-child {
    color: #222426;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
}
.ot-actions-item-time span:last-child{
    font-weight: 600;
    font-size: 14px;
    text-align: left;
    color: #7C7F85;
}
.ot-actions-item-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    font-size: 16px;
    padding: 16px 10px 16px 10px;
    margin: 0 45px;
}
.ot-actions-item-info:before {
    content: "";
    height: 100%;
    width: 2px;
    background: #eff1f2;
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translate(0, -50%);
}
.ot-actions-item:first-child .ot-actions-item-info:before{
    height: 50%;
    top: 75%;
}
.ot-actions-item:last-child .ot-actions-item-info:before{
    height: 50%;
    top: 25%;
}
.ot-actions-item-info:after {
    content: "";
    height: 14px;
    width: 14px;
    background: #d0d4d9;
    position: absolute;
    left: -30px;
    border-radius: 20px;
    top: 50%;
    transform: translate(0, -50%);
}
.ot-actions-item.current .ot-actions-item-info:after {
    background: #559d76;
}
.ot-actions-item-action{
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #222426;
}
.ot-actions-item-comment {
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    color: #7C7F85;
    margin-top: 5px;
}
.ot-actions-item-toggle {
    position: absolute;
    display: block;
    padding: 24px;
    height: 100%;
    right: 0;
}
.ot-actions-item-toggle i {
    position: absolute;
    right: 24px;
    top: 15px;
    font-size: 24px;
    width: 24px;
    height: 24px;
    text-align: center;
    color: #222426;
    cursor: pointer;
    transition: transform 0.6s ease-in-out;
}
.ot-actions-item-toggle span svg,
.ot-actions-item-toggle span svg.svg-icon-arrow {
    position: absolute;
    right: 24px;
    font-size: 24px;
    width: 16px;
    height: 16px;
    text-align: center;
    color: #222426;
    cursor: pointer;
    transition: transform 0.6s ease-in-out;
    rotate: 90deg;
    align-self: anchor-center;
}
.ot-actions-item-toggle i.rotate_down,
.ot-actions-item-toggle span.rotate_down svg,
.ot-actions-list .ot-actions-item-toggle svg.svg-icon-arrow.rotate_down {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Tracking form */
.ot-track-other h2 {
    text-align: center;
    padding: 0;
    font-size: 24px;
}
.ot-track-other .ot-track-order{
    position: relative;
    width: 100%;
    padding: 20px;
    margin-top: 0;
}
.ot-track-order{
    margin-top: 30px;
}
.ot-track-order-form{
    max-width: 400px;
    margin: auto;
}
.ot-track-order-field{
    margin-bottom: 20px;
}
.ot-track-order-field label {
    display: block;
    color: #7C7F85;
    width: 100%;
    font-weight: 400;
    margin-bottom: 5px;
}
.ot-track-order-field input {
    color: #7C7F85;
    width: 100%;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 4px 8px;
    font-size: 16px;
    background-color: #ffffff;
}
.ot-track-other .ot-track-order-field input {
    background-color: #F8F8F8;
}
.ot-track-order-field input::placeholder {
    font-size: 16px;
    color: #7C7F85;
    font-weight: 400;
}
.ot-track-order-buttons .ty-btn__primary{
    color: #222426;
    background-color: #559D76;
    width: 100%;
    height: 50px;
}
.ot-track-order-buttons .ty-btn__primary:hover,
.ot-track-order-buttons .ty-btn__primary:focus{
    color: #559D76;
    background-color: #222426;
}
.ot-track-order .recapcha_custom_explainer {
    font-size: 12px;
    color: #7C7F85;
    margin-top: 5px;
}
.ot-track-order .recapcha_custom_explainer > a {
    font-size: inherit;
    color: #222426;
}
.ot-not-found span{
    font-weight: 700;
    color: #EE6C6C;
    font-size: 20px;
}
.ot-track-order-additional-text{
    font-size: 12px;
    color: #7C7F85;
    padding: 0;
    padding-top: 5px;
    margin-top: 5px;
}
.ot-track-order-additional-text.ot-track-order-additional-line{
    border-top: 1px solid #eff1f2;
    margin-top: 10px;
    padding-top: 15px;
}
@media only screen and (min-width: 420px) {
    /* Product cards*/
    .ot-product-card {
        flex-wrap: nowrap;
    }
    .ot-product-card-img {
        width: auto;
        margin-bottom: 0;
    }
    .ot-product-card-content {
        margin: 0 20px;
    }

    /* Order details */
    .ot-actions-item-info {
        padding: 16px 10px 16px 10px;
    }
    .ot-actions-item-info:after {
        width: 20px;
        height: 20px;
    }
    .ot-actions-item-info:before {
        left: -21px;
    }
}
@media only screen and (min-width: 767px) {
	.unity-order-tracking h1 {
        font-size: 38px;
        text-align: center;
    }
    .ot-product-card-price {
        margin-top: unset;
    }
}

/* Order Route Details */
@media only screen and (min-width: 979px) {
	.ot-order-delivery-content.desktop-view {
		display: flex;
	}
	.ot-order-delivery-content.mobile-view {
		display: none;
	}
	.ot-order-delivery-content.desktop-view:has(> :last-child:nth-child(2)) {
		max-width: 50%;
	}
	.ot-order-delivery-content.desktop-view:has(> :last-child:nth-child(2)) .ot-actions-delivery.driver-location div {
		animation: animate_car 4s ease-in-out infinite;
	}
}