.trackingForm-bg{background-color: #f9f9f9;padding: 0 0 15px;}

.track-container {max-width: 1200px;width: 100%;margin: 0 auto;}
.track_title {font-size: 30px; text-align: center;margin: 0 0 20px;font-weight: bold;line-height: 40px;background: #efefef;padding: 10px 0;font-family: 'open_sansbold';text-transform:uppercase;}
.track_title span {font-size: 16px;font-weight: normal;display: block;}

.trackForm {padding:0 30px;}

.tab {max-width: 600px;width: 100%;}
.tabs {display: flex;gap: 10px;margin-bottom: 20px;}
.tab {font-size: 18px; background: none; flex: 1;padding: 12px;color: #99a1a2;border: none;cursor: pointer;position: relative;transition: all 0.3s ease;border-bottom: 1px solid #f9f9f9;}
.tab.active {color: #3c66bc;border-bottom: 1px solid #3c66bc;font-family: 'open_sansbold';}
.tab-content {padding: 20px 0; transition: width 0.2s linear 0s, transform 0.2s ease-out 0s;}


.tracking-input {display: flex; justify-content: space-between; flex-flow: row wrap; align-items: center;}


.track_texbox {display: inline-block;border: 1px solid #b8b8b8;background: #fff;width: 48%;height: 40px;line-height: 40px;color: #151515;padding: 0 5px;outline: none;font-size: 14px;margin: 10px 0px;border-radius: 5px;}

.track_btn {color: #ffffff;font-size: 16px;font-family: 'Open Sans', sans-serif;display: inline-block;font-weight: 700;
padding: 0;cursor: pointer;text-align: center;width:200px; height: 40px;line-height: 40px;text-transform: uppercase;outline: none;
border: 0;appearance: none;-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;background:#028d02;border-radius: 10px;}

.tracking-submitDiv {width: 100%; text-align: center;margin: 15px 0 0;}
#spanLoading {display: none;color: #ff0000;}

#Trackingnumber .track_texbox {width:calc(100% - 220px); margin-right:10px;}

#loader{ position: fixed; top:0; left: 0; right: 0; height: 100%; background: #000000a1; z-index: 9999; }

#loader div{margin: 20% auto; border: 6px solid #f3f3f3; border-top: 6px solid #3c66bc; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite;}

.Delivered_section {width: 100%;}
.delivered_flex {display: flex;justify-content: space-between; flex-flow: row wrap; align-items: center;}
.Deliverd-dateDiv {width: calc(100% - 440px); box-shadow: 0 0 10px #e5e5e5; color: #fff; border-radius: 30px;padding:40px 40px;height: auto;display: flex;align-items: center;flex-flow: row wrap;}
.Deliverd-dateDiv .delivery_title{font-size: 24px; line-height: 32px; font-weight: 700;display: block;width: 100%;}
.Deliverd-dateDiv .delivery_content{font-size: 34px; padding: 5px 0; font-weight: 700;}


.Deliverd-detailDiv {width: 316px;background: #fff;border-radius: 20px;padding: 10px 0 20px;}
.Deliverd-detailDiv-inner { padding: 10px 20px;width: 100%;box-sizing: border-box;}
.Deliverd-detailDiv-title {padding: 0 0 10px;font-weight: bold;font-size: 20px;}
.Deliverd-detailDiv-slider {height: 2px;width: 100%;border-radius: 100px; background: #01919c;}

.delivery_detail_content {border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;padding: 20px;margin: 15px 0;}

.Deliverd-detail-col {display: flex;justify-content: flex-start; flex-flow: row wrap; align-items: self-start;}
.detail-col {color: #747c7d;font-size: 14px;padding-bottom: 6px;}
.detail-col-first {width: 35%;}
.detail-col-second {width: 65%;}
.detail-col strong {color: #313839;font-weight: bold;font-size: 16px;}
.detail-col span {display: block;}

.Deliverd-detail-view {width: 88%; margin: 5px 0 0; text-align: center;}
.Viewall-btn {text-decoration: underline;color: #313839;cursor: pointer;}

.Deliverd-trackingnumberDiv {width: 100%; padding: 0 20px;}
.trackingcountry {font-size: 14px;color: #313839;padding-bottom: 5px;}
.del_tracknumber {display: flex;align-items: center;gap: 10px;}
.del_tracknumber a {color: #00abb7;text-decoration: underline;font-size: 14px;}
.del_tracknumber img, .del_tracknumber input[type="image"] {width: 18px;cursor: pointer;}



.shipment-tracking {margin: 30px 0;}
.shipment-tracking-title {font-size: 24px; font-weight: bold;}

.shipment-tracking-tab {margin-top: 20px;}
.tabss {max-width: max-content;width: 100%;}
.tabsss {display: flex;margin-bottom: 20px;border-bottom: 1px solid #0000001f;}
.tabss {font-size: 18px; background: none; flex: 1;padding: 12px;color: #99a1a2;text-transform: uppercase; border: none;cursor: pointer;position: relative;transition: all 0.3s ease;border-bottom: 1px solid #0000001f;}
.tabss.active {color: #111;border-bottom: 1px solid #d40511;font-weight: 600;}
.tab-contentss {padding: 20px; border: solid 1px #d1d1d1; transition: width 0.2s linear 0s, transform 0.2s ease-out 0s;}

.order-info-box {display: flex;width: 100%;justify-content: space-between;padding: 20px;background: #dfe8fb;border: 1px solid #c2cce1;margin-bottom: 20px; flex-flow: row wrap;}
.order-info-box p strong {font-weight:bold; padding-left:10px;}


.tab-content-flex {display: flex; align-items: self-start; justify-content: space-between;flex-flow: row wrap;justify-items: center;}
.tab-content-colFirst{width: 48%;}
.Trackingnumber-contentss {color:#00000073;width: 48%;}
.Trackingnumber-contentss span {color:#000000cc;font-weight: bold;font-size: 18px;vertical-align: middle;}

.Delivered-contentss {margin: 30px 0;}
.Delivered-delivered-flex {display: flex; align-items: center; justify-content: space-between;}
.Delivered-date-flex {display: flex; align-items: center;gap: 20px;width: 45%;}
.Delivered-date-flex img {width: 30%;}
.Delivered-date-flex svg {width: 100px; height:100px;}
.daymonth {font-size: 40px;font-weight: bold;line-height: 26px;color:#000000cc;}
.monthyear {font-size: 18px;line-height: 20px;padding: 5px 0;color:#000000cc;}
.monthyear span {font-weight: bold;font-size: 18px;vertical-align: inherit;}
.daytime {font-size: 16px;color: #00000073;}

.final-DeliveredText {width: 50%; font-size: 40px;color: #3c66bc;font-family: 'open_sansbold';}

.dlv-from-toDiv {width: 400px; display: flex; align-items: center; justify-content: center;margin: 0 0 0 90px;gap: 20px;}
.dlv-from, .dlv-to {font-size: 14px;}
.fromto, .fromto-country {color: #00000073;display: block;}
.fromto-address {color: #000000cc;padding: 5px 0;font-weight: 600;}
/* .dlv-from::after{content: "";position: absolute;display: inline-block;background: url("arrow-right.png") no-repeat; width: 15px;height: 25px;} */
.arrow-right {width: 15px;}

.cls_Pro_processDiv{width:100%;float:left;margin: 20px 0 0;}
.cls_Pro_processDiv .Pro_processDiv .steps {
  padding:0;margin:0;list-style:none;
  display:flex;overflow-x:auto;align-items: center;
}
.cls_Pro_processDiv .Pro_processDiv .step {
  flex:1;display:flex;justify-content:center;position:relative;
}
.cls_Pro_processDiv .Pro_processDiv .step-content {
  display:flex;align-items:center;flex-direction:column;
  width:120px;padding-top:10px;position:relative;
}
.cls_Pro_processDiv .Pro_processDiv .step-circle {
  position:relative;display:flex;justify-content:center;align-items:center;
  width:40px;height:40px;border-radius:50%;
  background-color:#e3e3e3;color:#fff;
  font-size:16px;
  z-index:1111;
}
.cls_Pro_processDiv .Pro_processDiv .step-success .step-circle {
  background-color:#3c66bc; /* muted green for completed */
}
.cls_Pro_processDiv .Pro_processDiv .step-delivered .step-circle {
  background-color:#219150; /* bold green for Delivered */
  font-weight:bold;
}
.cls_Pro_processDiv .Pro_processDiv .step-text {
  margin-top:8px;
  color:#666;
  font-size:14px;
  font-weight:normal;
}
.cls_Pro_processDiv .Pro_processDiv .step.step-success .step-text {color: #000;}
.cls_Pro_processDiv .Pro_processDiv .step-delivered .step-text {
  color:#219150;
  font-weight:bold;
}
.cls_Pro_processDiv .Pro_processDiv .step:not(:last-child)::after {
  content:"";
  position:absolute;top:40%;right:-50%;width:100%;height:4px;
  background-color:#e3e3e3; /* green connection for completed */
  z-index:1; transform: translateY(-40%);
}


.cls_Pro_processDiv .Pro_processDiv .step-delivered::after {
  background-color:transparent;
}
svg{color: #fff; fill:#fff; width:24px; height:24px;}

.step-circle img {color: #fff; fill:#fff; width:24px; height:24px;}

.tab-content-colsecond { width: 47%;}
.trackhistory {width: 47%;}
.Feedback-box {margin: 15px 0 0;width: 40%;text-align: center;border: 1.4px solid #d1d1d1;background-color: #fff;}
.Feedback-title {background-color: #007c39;color: #fff;padding: 15px 0; font-weight: 600;}
.Feedback-star {padding: 20px 0 10px;}
.Feedback-star p {padding: 0 0 0px ;margin: 0;font-size: 14px;color: #000000cc;}

.custom_rate {height: auto;margin: 0 auto;display: table;}
.custom_rate:not(:checked) > input {position: absolute;left: -9999px;}
.custom_rate:not(:checked) > label {float: right;width: 35px;overflow: hidden;white-space: nowrap;cursor: pointer;font-size: 0px;color: #acacac;margin-right: 2px;margin: 0;}
.custom_rate:not(:checked) > label:before {font-family: 'FontAwesome';display: inline-block;content: "★" !important;font-size: 45px;line-height: 45px;}
.custom_rate > input:checked ~ label {color: #ffcc00;}

.custom_rate:not(:checked) > label:hover,
.custom_rate:not(:checked) > label:hover ~ label {
    color: #ffcc00;
}

.custom_rate > input:checked + label:hover,
.custom_rate > input:checked + label:hover ~ label,
.custom_rate > input:checked ~ label:hover,
.custom_rate > input:checked ~ label:hover ~ label,
.custom_rate > label:hover ~ input:checked ~ label {
    color: #ffcc00;
}

.rate-item {font-size: 14px;text-transform: capitalize;margin-bottom: 10px;display: block;}

.rating-form {margin-top: 25px;display: block;}
p.MuiTypography-subtitle2 {font-size: 13px;color: #00000073;}
.feedback-textarea {width: 92.3%; min-height: 2rem;min-width: 3rem;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 4px;height: 40px;overflow: hidden;margin: 10px 0;}
.MuiButtonBase-root {width: 94%; height: 2.5rem;border: 1.5px solid;font-size:14px;}

.ShipmentDetails-tab {display: flex; align-items: self-start; justify-content: space-between; flex-flow: row wrap;gap: 20px; width: 100%;}
.ShipmentDetails-tab-colFirst {width: 49%;}
.ShipmentDetails-title, .ShipmentTracking-title {font-size: 20px;font-weight: 800;color: #000000cc;}
.ShipmentDetails-bdrBox {width: 60%; padding: 0 5%; margin: 20px 0 0; border: solid 1px #d1d1d1;}

.shipment-common {color: #000000cc;font-weight: 700;font-size: 16px; margin: 35px 0;}
.shipment-common span {font-weight:500;display: block;margin-top: 5px;}
.shipment-common a {color: #d40511;font-weight: 500;display: block;margin-top: 10px;text-decoration: none;}

.ShipmentDetails-tab-colSecond {width: 49%;}
.TrackingHistory-bdrBox { width: 90%;padding: 10px 5%;margin: 20px 0 0;box-sizing: border-box;height: 500px;overflow-x: hidden;}


.timeline {
    position: relative;
    margin-left: 90px;
    padding-left: 12px;
    border-left: 4px solid rgb(184 205 247);
    width: 90%;
}
.timeline-event {
    position: relative;
    margin-bottom: 34px;
    min-height: 50px;
    padding-left: 24px;
}
.timeline-event:last-child {
    margin-bottom: 0;
}
.timeline-icon {
    position: absolute;
    left: -32px;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(168 190 233) /*#229648*/;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    border: 3px solid #dbe7ff;
}
.timeline-icon.delivered {
    background: #3c66bc;
    width: 46px;
    height: 46px;
    left: -37px;
    top: -7px;
}
.timeline-date {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
    margin-bottom: 4px;
    margin-left: -154px;
    margin-top: 10px;
    width: auto;
    text-align: right;
    float: left;
}
.timeline-date span {display: block;padding-top: 5px;}
.event-status {
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}
.event-status.delivered {
    color: #3c66bc;
    font-weight: bold;
}
.event-details {
    font-size: 14px;
    color: #1d1d1d;
    margin-top: 1px;
    line-height: 1.45;
    font-weight: 400;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}



.animation-rt {
    animation: 1s ease-out 0s infinite normal none running animation-1rtpaah;
    border: 3px solid #3c66bc;
    position: absolute;
    opacity: 0;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 7px;
}


@keyframes animation-1rtpaah {
	0% {transform: scale(0.1, 0.1);opacity: 0;}
	50% {opacity: 1;}
	100% {transform: scale(1.2, 1.2);opacity: 0;}
}

.lineD-active {
    height: 4px;
    margin-left: 18.5rem;
    margin-right: 8.5rem;
    border: 0px;
    background-color: #3c66bc;
    border-radius: 1px;
    flex: 1 1 auto;
    position: absolute;
    top: 29px;
    left: -220px;
    right: -242px;
	z-index:111;
}




@media (max-width:1160px) {
	#loader div {float: none;}
	.cls_Pro_processDiv .Pro_processDiv .steps {overflow:hidden;}

}



@media (max-width:800px) {
	.Trackingnumber-contentss {width: 100%;}
	.trackhistory {width: 100%;margin-top:20px;}
	.TrackingHistory-bdrBox {width:100%;padding-top:20px;}
	.order-info-box {padding:15px 20px;}
	.order-info-box p {width:49%;padding:5px 0;}
	.lineD-active {left: -192px;}
}

@media (max-width:699px) {
	.order-info-box p {width:auto;}
	.Trackingnumber-contentss span {font-size:16px;}
	.daymonth {font-size:30px;}
	.monthyear {padding-bottom:0;}
	.monthyear, .monthyear span {font-size:16px;}
	.daytime {font-size:14px;}
	.timeline {width:85%;}
	.final-DeliveredText {font-size: 30px;}
	.tab-content {padding:0;}
	.track_title {font-size: 20px;line-height: 20px;margin-bottom:10px;}
	
	.shipment-tracking {margin: 20px 0;}
	.shipment-tracking-title {font-size:20px;}
	.shipment-tracking-tab {margin-top: 10px;}
	
	.cls_Pro_processDiv {margin: 0 0 10px;}
	.Delivered-contentss {margin-bottom:10px;}
	.tabs {margin-bottom:10px;}
}


@media (max-width:580px) {
    .lineD-active {left: -219px; right:-212px;}
	.monthyear, .monthyear span {font-size: 12px;}
	.daytime {font-size: 12px;}
	
	.cls_Pro_processDiv .Pro_processDiv .steps {width:100%;}
	.cls_Pro_processDiv .Pro_processDiv .step {width: 33.33%;}
	.cls_Pro_processDiv .Pro_processDiv .step-text {font-size: 12px;}
	.timeline-icon.delivered {left: -48px;}
}

@media (max-width:560px) {
	.track_texbox {width:100%;}
	#Trackingnumber {text-align:center;}
	#Trackingnumber .track_texbox {width: 100%;margin-right:0;}
	.order-info-box p {width:100%;}
	
	.timeline-date {margin-left: -140px;margin-top: 3px;width: 27%;}
	.timeline {margin-left: 70px;}
	.timeline-icon {left: -45px;}
	.timeline-event {margin-left:14px;padding-left:0;}
	.event-status, .event-details {font-size:12px;}
	.tab {font-size: 16px;padding: 12px 0;}
}

@media (max-width:400px) {
	.lineD-active {left: -228px;right: -210px;}
	.timeline {margin-left: 60px;}
	.timeline-date {margin-left: -122px;}
	.tab {font-size: 14px;padding: 12px 0;}
	
}


@media (max-width:380px) {
    .timeline {width: 76%;}
	.timeline-date {width: 34%;}
}

@media (max-width:360px) {
    .lineD-active {left: -235px;right: -210px;}
}