.tcard{
    margin: auto;
    width: 38%;
    max-width:600px;
    padding: 4vh 0;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-top: 3px solid rgb(252, 103, 49);
    border-bottom: 3px solid rgb(252, 103, 49);
    border-left: none;
    border-right: none;
}
@media(max-width:768px){
    .tcard{
        width: 90%;
    }
}
.ttitle{
    color: rgb(252, 103, 49);
    font-weight: 600;
    margin-bottom: 2vh;
    padding: 0 8%;
    font-size: initial;
}
#tdetails{
    font-weight: 400;
}
.tinfo{
    padding: 5% 8%;
}
.tinfo .col-5{
    padding: 0;
}
#theading{
    color: grey;
    line-height: 6vh;
}

.tpricing .col-3{
    padding: 0;
}


#tprogressbar {
    margin-bottom: 3vh;
    overflow: hidden;
    color: rgb(252, 103, 49);
    padding-left: 0px;
    margin-top: 3vh
}

#tprogressbar li {
    list-style-type: none;
    font-size: x-small;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400;
    color: rgb(160, 159, 159);
    align-content: center;
    
}
#tprogressbar #step5 {
   text-align: right;
}
#tprogressbar #step4 {
   text-align: center;
}
        
#tprogressbar #step1:before {
    content: "";
    color: rgb(252, 103, 49);
    width: 10px;
    height: 10px;
    margin-left: 0px !important;
    /* padding-left: 11px !important */
}

#tprogressbar #step2:before {
    content: "";
    color: #fff;
    width: 10px;
    height: 10px;
    margin-left: 20%;
}

#tprogressbar #step3:before {
    content: "";
    color: #fff;
    width: 10px;
    height: 10px;
    margin-left: 30% ; 
    /* padding-right: 11px !important */
}
#tprogressbar #step4:before {
    content: "";
    color: #fff;
    width: 10px;
    height: 10px;
    margin-left: 50% ; 
    align-content: right;
    /* padding-right: 11px !important */
}
#tprogressbar #step5:before {
    content: "";
    color: #fff;
    width: 10px;
    height: 10px;
   
    margin-right: 0 !important;
   
    /* padding-right: 11px !important */
}

#tprogressbar li:before {
    line-height: 29px;
    display: block;
    font-size: 12px;
    background: #ddd;
    border-radius: 50%;
    margin: auto;
    z-index: -1;
    margin-bottom: 1vh;
}

#tprogressbar li:after {
    content: '';
    height: 4px;
    background: #ddd;
    position: absolute;
    left: 0%;
    right: 0%;
    margin-bottom: 2vh;
    top: 3px;
    z-index: 1;
}
.tprogress-track{
    padding: 0 8%;
}
#tprogressbar li:nth-child(2):after {
    margin-right: auto;
}

#tprogressbar li:nth-child(1):after {
    margin: auto;
}

#tprogressbar li:nth-child(3):after {
    float: left;
    width: 68%;
}
#tprogressbar li:nth-child(4):after {
    margin-left: auto;
    width: 132%;
}
#tprogressbar li:nth-child(5):after {
    margin-left: auto;
    width: 132%;
}
#tprogressbar  li.active{
    color: black;
}

#tprogressbar li.active:before,
#tprogressbar li.active:after {
    background: rgb(252, 103, 49);
}
        .trow {
    display: flex;
    justify-content: space-between; /* This will space out the child elements evenly */
    align-items: left; /* This will vertically align the child elements in the middle */
    width: 100%; /* Ensures the row takes full width of its parent */
    padding: 0 1%; /* Optional: Adds some padding on the sides */
}

/* Adjustments for column classes to ensure they take up correct space */
.tcol-7, .tcol-5 {
    display: flex;
    flex-direction: column;
    justify-content: left; /* Centers content vertically */
}

.tcol-7 {
    flex: 0 0 50%; /* Allows this column to take up roughly 70% of the .row's width */
}

.tcol-5 {
    flex: 0 0 50%; /* Allows this column to take up roughly 30% of the .row's width */
}


  
  .ttimeline {
    position: relative;
   
    padding: 0;
    list-style: none;
  }
  .ttimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 2px;
    background: #C5CAE9;
  }
  .ttimeline-item {
    margin: 0;
    padding: 0;
    padding-left: 60px;
    position: relative;
  }
  .ttimeline-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3F51B5;
    color: white;
    text-align: center;
    line-height: 40px;
  }
  .ttimeline-content {
    padding-bottom: 20px;
  }
  .ttimeline-content time {
    display: block;
   
  }
.ttimeline-content p {
    display: block;
  margin: 0;
   
  }
  .ttimeline-content p span {
    display: block;
  margin: 0;
   color: #bdbdbd;
  } 
    .ttimeline-content span {
    display: block;
  margin: 0;
    color: #bdbdbd;
  }                 

.trackingform {
  
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
 
}

.input-wrapper {
  position: relative;
  /* You can adjust the width as necessary, or remove it to fit the content */
}

#trackingnumber {
  width: 100%; /* Adjust the width as needed, or set a specific width for the .input-wrapper */
  padding: 10px 45px 10px 10px; /* Right padding is larger to make space for the button */
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 5px; /* Slightly rounded edges for a subtle softness */
  outline: none;
  box-sizing: border-box;
}

.trackingbtn {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px; /* Matching the input field's border-radius */
 
  height: 35px;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  padding: 2;
  line-height: 35px; /* Center the arrow vertically */
}

.trackingbtn:hover {
  background-color: #45a049;
}