.input-div input::placeholder {color: #2B2B2B;opacity: 1; /* Firefox */}.input-div input:-ms-input-placeholder {color: #2B2B2B;}.input-div input::-ms-input-placeholder {color: #2B2B2B;}

.input-div input::-webkit-input-placeholder {
     color: #2B2B2B;
}
.input-div input::-moz-placeholder {
     color: #2B2B2B;
}
.input-div input:-ms-input-placeholder {
     color: #2B2B2B;
}
.input-div input:-moz-placeholder {
     color: #2B2B2B;
}

	.sp-awb-track-list h3 {
	    font-size: 20px;
	    font-weight: 500;
	}

	.sp-awb-track-list li {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 12px;
	    border: solid 1px rgba(0,0,0,0.1);
	    border-radius: 7px;
	}

	.sp-awb-track-list .sp-awb-track-list-detail h6 {
	    display: flex;
	    gap: 5px;
	    font-weight: 700;
	    color:#000000;
	    align-items: baseline;
	    margin-bottom: 5px;
	}

	.sp-awb-track-list .sp-awb-track-list-detail h6 p, .sp-awb-track-list .sp-awb-track-list-detail h6 p span {
	    color: #9f9f9f;
	    font-size: 13px;
	}

	.sp-awb-track-list .sp-awb-track-list-link a {
	    border-radius: 50px;
	    background-color: rgba(22, 96, 82, 1);
	    color: #ffffff;
	    padding: 8px 16px;
	    font-size: 14px;
	}

	.sp-awb-track-list ul li:not(:last-child) {
	    margin-bottom: 15px;
	}
	.sp-awb-track-status {
	    display: flex;
	    gap: 8px;
	    align-items: baseline;
	}

	.sp-awb-track-status .tracking_status {
	    font-size: 14px;
	    color: #fa7100;
	}


.track-container {max-width: 1200px; padding:50px 15px; margin: 0 auto;position: relative;width: 100%;min-height: 60vh;}
.track-container, .track-container *{color: #000000;letter-spacing: 0.4px;line-height: 1.2;font-weight: 400;font-size: 15px;}
.sp_hide{display:none;}

/* tracking login page css  */
.track-main-title{text-align: center;margin: 0 0 30px;}
.track-main-title h2 {font-size: 25px;font-weight: 600;line-height: 1.2;padding: 0;margin: 0;letter-spacing: 0.4px;}
.track-login-bg{width: 100%;margin: 0 auto;overflow: hidden;display: flex;background: #fff;border-radius: 6px;-webkit-box-shadow: 0px 0px 62px 0px rgb(0 0 0 / 7%);box-shadow: 0px 0px 62px 0px rgb(0 0 0 / 7%);position: relative;border: 1px solid rgb(210 213 217 / 30%);}
.withoutImg.track-login-bg{max-width: 550px;justify-content: center;}
.track-login-bg .track-deatils, 
.track-login-bg .track-banner {flex: 1 1 50%;}
.track-banner a, .track-banner a img {display: block;height: 100%;object-fit: cover;width: 100%;}
.track-login-bg.banner-left .track-deatils {order: 1;}
.track-deatils{padding: 40px;}
.track-tabs {position: relative;display: flex;margin: 0 -5px;}
.track-tabs ul {display: -webkit-box;display: flex;margin: 0;list-style: none;outline: none;box-shadow: none;background: rgba(22, 96, 82, 0.1);padding: 5px;border-radius: 50px;overflow: hidden;width: 100%;}
.track-tabs ul li {flex: 1 1 50%;}
.track-tabs ul li a, .track-tabs ul li span.track-tab-click {padding: 18px 15px;display: block;text-align: center;border-radius: 50px;cursor:pointer}
.track-tabs ul li a.active, .track-tabs ul li span.track-tab-click.active {background: rgba(22, 96, 82, 1);color: #ffffff;}
.track-tabs-disc {padding: 30px 0 0;min-height: 294px;}
.track-tabs-disc:not(.withoutImg) .track-tabs-disc {padding:30px 40px 40px;}
.sub-cmn-text {font-size: 14px;line-height: 1.4;margin: 0 0 45px;}
.input-div input {font-size: 13px !important;line-height: 1.2 !important;font-weight: normal !important;width: 100% !important;background: #fff !important;border: none !important;border-bottom: 1px solid #000000 !important;height: 40px !important;max-width: 100% !important;padding: 7px 15px 7px 0!important;outline: none !important;min-width: initial;margin: 0 !important;border-radius: 0 !important;display: block !important;color: #2B2B2B !important;box-shadow: none !important;text-decoration: none !important;text-indent: 0 !important;}
.cmn-btn {position: relative; border-radius: 4px !important;padding: 15px 20px !important;cursor: pointer !important;min-width: 80px !important;text-align: center !important;text-indent: 0 !important;text-decoration: none !important;max-width: 100% !important;outline: none !important;box-shadow: none !important;font-size: 15px !important;line-height: 1.2 !important;font-weight: normal !important;margin: 0 !important;height: auto !important;transition: all 200ms ease-in-out !important;-webkit-appearance: none !important;-moz-appearance: none !important;background-color: rgba(22, 96, 82, 1) !important;border: 1px solid rgba(22, 96, 82, 1) !important;color: #ffffff !important;min-height: inherit !important;}
.cmn-btn:hover {background-color: rgba(22, 96, 82, 0.9) !important;color: #ffffff !important;border: 1px solid rgba(22, 96, 82, 0.9) !important;}
.btn-full.cmn-btn{width: 100% !important;}
.cmn-btn span{color: #ffffff !important;}
.input-div {margin: 0 0 25px;position: relative;}
.input-div .err_msg {font-size: 13px;color: red;line-height: 1.2;position: absolute;top: 100%;left: 0;margin: 4px 0 0;}
.tabs-hide{display: none;}
.track-tabs-disc.track-tabs-disc-no-tab { min-height: inherit;padding-top: 0;}


/* tracking details page css */
.order-details {display: -webkit-box;display: flex;align-items: center;flex-wrap: wrap;margin: 0 -10px;}
.order-details h2 {color: rgba(22, 96, 82, 1);font-size: 25px;font-weight: 600;padding: 0 10px 10px;margin: 0;text-transform: inherit;word-break: break-word;flex: 1 1 auto;}
.tracking-page .track-login-bg.order-process .order-details {margin: -25px -25px 0;background: rgba(22, 96, 82, 1);padding: 20px 15px 10px;}
.tracking-page .track-login-bg.order-process .order-details h2 {color: #ffffff;}
.tracking-page .track-login-bg{padding: 25px;margin-bottom: 25px;align-items: inherit;}
.order-d-left{flex: 1 1 auto;}
.order-details ul{padding: 0 10px 10px;margin: 0;list-style: none;display: -webkit-box;display: flex;}
.order-details ul li {font-size: 16px;position: relative;font-weight: 600;}
.order-details ul li:last-child {margin-left: 15px;padding-left: 15px;border-left: 1px solid rgb(255 255 255 / 50%);}
.order-progress ul {display: -webkit-box;display: flex;justify-content: space-evenly;margin: 30px 0 5px ;}
.order-progress ul li {position: relative;display: flex;flex-direction: column;align-items: center;flex: 1 1;font-weight: 500;font-size: 1.4rem;text-align: center;}
.track-date-info .track-count {position: relative;z-index: 5;display: flex;justify-content: center;align-items: center;width: 40px;height: 40px;border-radius: 50%;background: #ccc;margin: 0 auto 1rem;}
.order-progress ul li.completed .track-count {background-color: rgba(22, 96, 82, 1);color: #ffffff;}
.track-date-info .step-date {font-size: 13px;font-weight: 400;margin: 0 0 5px;color: #6b7177;min-height: 18px;}
.track-date-info .step-info {margin: 5px 0 0;}
.order-progress ul li:after, 
.order-progress ul li:before {position: absolute;content: "";border-bottom: 2px solid #ccc;width: 100%;z-index: 0;}
.order-progress ul li:before {top: 30px;/*left: -50%;*/transform: translate3d(-50%, -50%, 0);}
.order-progress ul li.completed:after,
.order-progress ul li.order-cancel:after {position: absolute;content: "";border-bottom: 2px solid rgba(22, 96, 82, 1);width: 0;top:30px;left: 50%;z-index: 1;transform: translateY(-50%);/*animation: load 3s normal forwards;    */}

.order-progress ul li:nth-child(1).completed:after{animation: load 1s normal forwards;animation-delay: 0.25s;}
.order-progress ul li:nth-child(2).completed:after{animation: load 1s normal forwards;animation-delay:1.25s}
.order-progress ul li:nth-child(3).completed:after{animation: load 1s normal forwards;animation-delay:2.25s}
.order-progress ul li:nth-child(4).completed:after,
.order-progress ul li:nth-child(4).order-cancel:after{animation: load 1s normal forwards;animation-delay:3.25s}
@keyframes load {
	0% { height: 0; }
	100% { height: 100%; }
}

@media only screen and (min-width: 768px){
	.order-progress ul li:nth-child(1).completed:after{animation: load 1s normal forwards;animation-delay: 0;}
	.order-progress ul li:nth-child(2).completed:after{animation: load 1s normal forwards;animation-delay:1s}
	.order-progress ul li:nth-child(3).completed:after{animation: load 1s normal forwards;animation-delay:2s}
	.order-progress ul li:nth-child(4).completed:after,
	.order-progress ul li:nth-child(4).order-cancel:after{animation: load 1s normal forwards;animation-delay:3s}
	@keyframes load {
		0% { width: 0; }
		100% { width: 100%; }
	}
}

.order-progress ul li:not(.completed):not(.order-cancel):after,
.order-progress ul li:first-child::before,
.order-progress ul li:last-child::after{content: initial;}
.track-date-info {display: -webkit-box;display: flex;flex-direction: column;align-items: center;}
.track-icons svg{height: 35px;width: 35px;}
.order-progress ul li.when-no-icon:not(.completed) .track-icons:before{background: #cccccc;}
.track-icons {margin-bottom: 0;background: #fff;-webkit-box-shadow: 0px 0px 62px 0px rgb(0 0 0 / 10%);box-shadow: 0px 0px 62px 0px rgb(0 0 0 / 10%);position: relative;display: flex;align-items: center;justify-content: center;height: 60px;width: 60px;border-radius: 100%;z-index: 3;}
.order-progress ul li.order-cancel .track-icons {border-color: red;}

@keyframes loading-5 {
	0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);width: 0;}
	100% {-webkit-transform: rotate(180);transform: rotate(180deg);width: 100%;}
}
.order-progress ul li:not(.completed):not(.order-cancel) .step-info, 
.order-progress ul li:not(.completed):not(.order-cancel) .step-date,
.order-progress ul li:not(.completed):not(.order-cancel) .track-icons svg{opacity: 0.5;}
.order-progress ul li.order-cancel:after{border-bottom: 2px solid red;}

.ship-details ul{padding: 0;margin: -20px 0 0;list-style: none;position: relative;}
.ship-details ul:before {content: '';position: absolute;display: block;width: 2px;background: rgba(22, 96, 82, 1);top: 20px;bottom: 0;margin-left: 14px;height: calc(100% - 40px);}
.ship-details ul li{padding: 0;margin: 0;position: relative;}
.ship-icon {float: left;position: absolute;width: 30px;height: 30px;top: 15px;left: 0;background: #fff;border: 2px solid rgba(22, 96, 82, 1);border-radius: 100%;display: -webkit-box;display: flex;align-items: center;justify-content: center;}
.ship-info {position: relative;padding: 12px;margin-top: 20px;margin-left: 45px;background: rgba(22, 96, 82, 0.05);-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;}
.ship-icon span {background: rgba(22, 96, 82, 1);height: 10px;width: 10px;border-radius: 100%;}
.ship-info span {color: #84888c;display: block;margin: 0 0 3px;font-size: 12px;}
.ship-info h3 {font-size: 17px;font-weight: 600;margin: 0;}
.main-status {margin: 5px 0 15px;padding: 0 0 15px;border-bottom: 1px solid #d2d5d9;}
.sub-status {padding: 0 0 0 10px;}
.main-status p {font-size: 14px;}
.sub-status .order-sb-status {padding: 0 10px 10px;margin: 0 0 10px;border-bottom: 1px solid rgb(210 213 217 / 30%);}
.sub-status .order-sb-status:last-child {border-bottom: none;padding-bottom: 0;margin-bottom: 3px;}
.sub-status .order-sb-status p {margin: 0;padding: 0;font-size: 14px;}
.shipment-update .order-details h2,
.cus-ship-details .order-details h2{font-size: 20px;padding: 0 0 10px;}
.ship-details ul li.completed .ship-icon {background: rgba(22, 96, 82, 1);}
.ship-details ul li .ship-icon svg,
.ship-details ul li.completed .ship-icon span{display: none;}
.ship-details ul li.completed .ship-icon svg{height: 13px;width: 13px;display: block;fill: #ffffff;}

.track-login-bg.shipment-update .order-d-left,
.track-login-bg.cus-ship-details .order-d-left {flex: 1 1 50%;padding: 0 15px;}
.tracking-page .track-login-bg.shipment-update {padding: 25px 10px;}
.track-login-bg.shipment-update .order-d-left + .order-d-left,
.track-login-bg.cus-ship-details .order-d-left + .order-d-left {border-left: 1px solid #d2d5d9;}
.item-shipment .order-title-img {display: -webkit-box;display: flex;}
.item-shipment .order-title-img .order_img_div {width: 80px;height: 80px;margin-right: 15px;flex-shrink: 0;border-radius: 2px;position: relative;border: 1px solid #f0f0f0;padding: 2px;}
.order-img {width: 100%;height: 100%;object-fit: contain;object-position: top;max-width: 100%;border-radius: 2px;max-height: 100%;}
.pr-title-img {flex: 1 1 100%;width: 100%;}
.o-p-title {padding: 0;border: none;display: block;margin: 0 0 8px;max-width: 350px;}
.item-shipment ul {padding: 0;margin: 0;list-style: none;}
.item-shipment ul li {padding: 0 0 20px;margin: 0 0 20px;border-bottom: 1px solid rgb(210 213 217 / 30%);}
.o-p-title .sp_text_clr {line-height: 1.3;}
.pr-title-img .prod-info *, .pr-title-img .prod-info {font-size: 12px;}
.pr-title-img .prod-info:not(:last-child) {margin: 0  0 5px;}
.pr-title-img .prod-info span {font-weight: 600;}
.item-total {display: -webkit-box;display: flex;justify-content: space-between;}
.foot-order .item-total:not(:last-child) {margin: 0 0 10px;}
.item-total span {font-size: 14px;color: #84888c;margin:0}
.item-total span.total-pr {color: inherit;font-weight: 600;}

.track-login-bg.track-banner ul {flex:1 1 auto; padding: 0;margin: -15px;list-style: none;-moz-column-count: 2;column-count: 2;-moz-column-gap: 0;column-gap: 0;-moz-column-fill: balance;column-fill: balance;}
.track-login-bg.track-banner ul.when-single-banner {column-count: 1;}
.track-login-bg.track-banner ul li {padding: 15px;margin: 0;page-break-inside: avoid;-moz-column-break-inside: avoid;break-inside: avoid;width: 100%;text-align: center;}
.track-login-bg.track-banner ul li a {display: block;border-radius: 15px;overflow: hidden;width:auto;}
.track-login-bg.track-banner ul li img{max-width: 100%;border-radius: 15px;display: block;margin: 0 auto;height: auto;width: auto;}
.ship-details, .over-scroll {max-height: 400px;overflow: auto;padding-right:2px;height:100%;}
.track-login-bg.shipment-update .order-details,
.track-login-bg.shipment-update .order-details,
.track-login-bg.cus-ship-details .order-details{margin: 0 0 20px;}
.ship-details::-webkit-scrollbar-track,
.ship-details::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);background-color: #F5F5F5;}

.ship-details::-webkit-scrollbar,
.over-scroll::-webkit-scrollbar{width: 6px;background-color: #F5F5F5;}
.ship-details::-webkit-scrollbar-thumb,
.over-scroll::-webkit-scrollbar-thumb{background-color: #5e5e5e;}
.history_loader img {display: block;margin: 0 auto 10px; width: 80px; height: 80px;}

.cus-details h3 {font-size: 17px;font-weight: 600;margin: 0 0 15px;}
.cus-disc p {margin: 0 0 5px;font-size: 14px;word-break: break-word;display: -webkit-box;display: flex;}
.cus-disc p:last-child{margin: 0;}
.cus-disc p span {font-size: 14px;font-weight: 600;flex: 1 0 auto;max-width: 138px;width: 100%;}
.cus-disc p span:last-child {color: inherit;max-width: inherit;font-weight: normal;flex: 1 1 auto;}
.sp-loader-action::before { content: " ";display: block;width: 20px; height: 20px; margin: 0 auto; border-radius: 50%; border: 3px solid #fff;border-top: 3px #9d9d9d solid; animation: spin 1.2s linear infinite;position: absolute;left: 0;right: 0;}
.sp-loader-action span{opacity: 0;}
@keyframes spin {
	0% {  transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@-moz-keyframes spin {
	from {-moz-transform: rotate(0)}
	to { -moz-transform: rotate(360deg)}
}

@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0) }
	to { -webkit-transform: rotate(360deg) }
}
@keyframes spin {
	from { transform: rotate(0)}
	to { transform: rotate(360deg)}
}

.order-progress ul li.when-no-icon .progress:after{content:initial;}
.order-progress ul li.when-no-icon .progress span{display:none;}
.order-progress ul li.when-no-icon .track-icons svg {display:none;}
.order-progress ul li.when-no-icon .track-icons {height: 20px;width: 20px;background:#ccc;}
.order-progress ul li.when-no-icon:after, .order-progress ul li.when-no-icon:before {top: 10px !important;}

/* responsive */
@media only screen and (max-width: 1024px){
    .track-deatils{padding: 25px;}
}
@media only screen and (max-width: 767px){
    .track-container, .track-container *{font-size: 14px;}
    .track-deatils{padding: 15px;}
    .track-main-title{margin: 0 0 20px;}
    .track-main-title h2{font-size: 22px;}
    .track-login-bg{flex-wrap: wrap;}
    .track-login-bg .track-deatils, 
    .track-login-bg .track-banner{flex: 1 1 100%;}
    .track-tabs ul li a, .track-tabs ul li span.track-tab-click{padding: 14px 10px;}
    .sub-cmn-text{margin: 0 0 25px;}
    .track-tabs-disc{min-height: 275px;}
    .track-tabs-disc.track-tabs-disc-no-tab {padding:15px 0;}

    .tracking-page .track-login-bg{padding: 15px;margin-bottom: 20px;}
    .tracking-page .track-login-bg.order-process .order-details{margin: -20px -20px 0;padding: 25px 15px 15px;}
    .order-details ul{flex-wrap: wrap;margin: 5px 0 0;}
    .order-details ul li:last-child{margin-left: 0;padding-left: 0;border-left: none;}
    .order-details ul li{margin: 5px 0 0;font-size: 15px;}

    .order-progress ul{margin: 30px 0 -15px;flex-wrap: wrap;}
    .order-progress ul li{flex: 1 1 100%;align-items: flex-start;padding: 0 0 30px;}
    .track-date-info{align-items:center;flex-direction: row;}

    .order-progress ul li.completed:after, 
    .order-progress ul li.order-cancel:after {border-left: 2px solid rgba(22, 96, 82, 1);border-bottom: none;width: 2px;left: 30px;z-index: 1;transform: none;animation: none;height:0;}
    .order-progress ul li.order-cancel:after{border-left: 2px solid red;}
    .order-progress ul li:after, .order-progress ul li:before{border-left: 2px solid #ccc;border-bottom: none;width: 2px;height: 100%;left: 30px;}
    .order-progress ul li:before{left: 30px;transform: none;}
    .track-date-info .step-date{top: 7px;left: 70px;position: absolute;}
    .track-date-info .step-info{margin: 10px 0 0 10px;font-size: 15px;}
    .order-progress ul li:last-child:before{content: initial;}


    .tracking-page .track-login-bg.shipment-update{padding: 20px 10px;}
    .track-login-bg.shipment-update .order-details, 
    .track-login-bg.shipment-update .order-details, 
    .track-login-bg.cus-ship-details .order-details{margin: 0 0 10px;}
    .track-login-bg.shipment-update .order-d-left,
    .track-login-bg.cus-ship-details .order-d-left{padding: 0 5px;flex: 1 1 100%;}
    .ship-info{margin-left: 40px;margin-top: 15px;}
    .sub-status{padding: 0;}
    .track-login-bg.shipment-update .order-d-left + .order-d-left,
    .track-login-bg.cus-ship-details .order-d-left + .order-d-left {border-left: none;border-top: 1px solid #d2d5d9;margin: 30px 0 0;padding-top: 30px;}
    .item-shipment .order-title-img .order_img_div{height: 65px;width: 65px;margin-right: 10px;}
    .track-login-bg.track-banner ul li img,
    .track-login-bg.track-banner ul li a{border-radius: 10px;}
    .track-login-bg.track-banner ul li {padding: 15px 15px 0;flex: 1 1 100%;}
    .track-login-bg.track-banner ul{margin: -15px -15px 0;-moz-column-count: 1;column-count: 1;}

    .order-progress ul li.completed.when-no-icon:after, 
    .order-progress ul li.order-cancel.when-no-icon:after{left:10px;}
    .order-progress ul li.when-no-icon:before{left:10px;}
    .order-progress ul li.when-no-icon .track-date-info .step-info{margin-top:0;}
    .order-progress ul li:first-child:before{content:"" !important;}
}

.progress:after {content: "";width: 100%;height: 100%;border-radius: 50%;border: 2px solid rgb(210 213 217 / 30%);position: absolute;top: 0;left: 0;}
.progress span {width: 50%;height: 100%;position: absolute;top: 0;z-index: 1;overflow: hidden;}
.progress .progress-left {left: 0;}

.progress .progress-bar {display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;-ms-flex-pack: center;justify-content: center;color: #fff;text-align: center;white-space: nowrap;background-color: #007bff;transition: width .6s ease;width: 100%;height: 100%;background: 0 0;border-width: 2px;border-style: solid;position: absolute;top: 0;border-color: rgba(22, 96, 82, 1);}
.progress .progress-left .progress-bar {left: 100%;border-top-right-radius: 70px;border-bottom-right-radius: 70px;border-left: 0;transform-origin: center left;-webkit-transform-origin: center left;}
.order-progress ul li.completed .stage-3 .progress-left .progress-bar,
.order-progress ul li.order-cancel .stage-3 .progress-left .progress-bar {animation: loading-2 0.25s linear forwards;animation-delay: 0.25s;}
.progress .progress-right {right: 0;}
.progress .progress-right .progress-bar {left: -100%;border-top-left-radius: 70px;border-bottom-left-radius: 70px;border-right: 0;-webkit-transform-origin: center right;transform-origin: center right;}
.order-progress ul li.completed .stage-3 .progress-right .progress-bar,
.order-progress ul li.order-cancel .stage-3 .progress-right .progress-bar {animation: loading-2 0.25s linear forwards;}
.progress .progress-value {width: 90%;height: 90%;border-radius: 50%;background: #fff;font-size: 42px;color: purple;line-height: 63px;text-align: center;position: absolute;top: 5%;left: 5%;font-weight: 300;}

.order-progress ul li.completed:nth-child(2) .stage-3 .progress-left .progress-bar{animation-delay: 1.25s;}
.order-progress ul li.completed:nth-child(2) .stage-3 .progress-right .progress-bar{animation-delay: 1s;}
.order-progress ul li.completed:nth-child(3) .stage-3 .progress-left .progress-bar{animation-delay: 2.25s;}
.order-progress ul li.completed:nth-child(3) .stage-3 .progress-right .progress-bar{animation-delay: 2s;}
.order-progress ul li.completed:nth-child(4) .stage-3 .progress-left .progress-bar,
.order-progress ul li.order-cancel:nth-child(4) .stage-3 .progress-left .progress-bar{animation-delay: 3.25s;}
.order-progress ul li.completed:nth-child(4) .stage-3 .progress-right .progress-bar,
.order-progress ul li.order-cancel:nth-child(4) .stage-3 .progress-right .progress-bar{animation-delay: 3s;}
.order-progress ul li.completed:nth-child(5) .stage-3 .progress-left .progress-bar,
.order-progress ul li.order-cancel:nth-child(5) .stage-3 .progress-left .progress-bar{animation-delay: 4.25s;}
.order-progress ul li.completed:nth-child(5) .stage-3 .progress-right .progress-bar,
.order-progress ul li.order-cancel:nth-child(5) .stage-3 .progress-right .progress-bar{animation-delay: 4s;}
.order-progress ul li:not(:nth-child(4)).order-cancel .progress .progress-bar{border-color:  red;}

.order-progress ul li.order-cancel:nth-child(5) .track-date-info .step-info{animation: loading-4 0.25s linear forwards; animation-delay: 4s;}
.order-progress ul li.when-no-icon.completed .track-icons,
.order-progress ul li.when-no-icon.order-cancel:nth-child(4) .track-icons{animation: loading-dot 0.25s linear forwards;}
.order-progress ul li.when-no-icon.order-cancel:nth-child(4) .track-icons{animation-delay: 3s;}
.order-progress ul li.when-no-icon.completed:nth-child(2) .track-icons{animation-delay: 1s;}
.order-progress ul li.when-no-icon.completed:nth-child(3) .track-icons{animation-delay: 2s;}
.order-progress ul li.when-no-icon.completed:nth-child(4) .track-icons{animation-delay: 3s;}
.order-progress ul li.when-no-icon.completed:nth-child(5) .track-icons{animation-delay: 4s;}
.order-progress ul li.when-no-icon.order-cancel:last-child .track-icons{animation: loading-cancel 0.25s linear forwards; animation-delay: 4s;}

@keyframes loading-4 {
    0% {color: #000000;}
    100% {color: red;}
}
@keyframes loading-2 {
    0% {transform: rotate(0)}
    100% {transform: rotate(180deg)}
}

@keyframes loading-dot {
    0% {background:#ccc;}
    100% {background: rgba(22, 96, 82, 1);}
}

@keyframes loading-cancel {
    0% {background:#ccc;}
    100% {background: red;}
}