/* ... other styles ... */

.order-tracking-container {
  max-width: 100%; /* Adjust width as needed */
  margin: 20px auto;
  padding: 20px;
/*   border: 1px solid #ccc;
  border-radius: 5px; */
  overflow-x: auto;
  display: flex;           /* Add this */
  flex-direction: column;  /* Add this */
  align-items: center;    /* Add this */	
}
.order-tracking-container p {
  max-width: 100%; /* Adjust the percentage as needed for text */
  margin-left: auto;
  margin-right: auto;
}

.order-tracking-container form {
  display: flex;
  flex-direction: column; 
  width: fit-content;
}

.order-tracking-container label {
  margin-bottom: 5px;
}

.order-tracking-container input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
}

.order-tracking-container button[type="submit"] {
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

#tracking-results {
  margin-top: 20px;
}

#tracking-results h3 {
  margin-bottom: 10px;
}

/* Table Styles */
.tracking-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.tracking-table th,
.tracking-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.tracking-table th {
  background-color: #f5f5f5; 
}

/* Dynamic Icon Color */
.tracking-table tr td i { /* Target the icon within the table cell */
  color: var(--status-color, black); /* Use the --status-color variable, default to black */
}

/* Predefined Color Classes (applied to the <tr> element) */
tr.status-primary { --status-color: blue; } 
tr.status-info { --status-color: lightblue; } 
tr.status-warning { --status-color: orange; } 
tr.status-danger { --status-color: red; } 

.tracking-table td .date-time { /* Style for the date and time */
  font-size: 0.9em; /* Slightly smaller font size */
  margin-bottom: 5px; /* Add some space below */
  color: #d67e1a;
}

/* .tracking-table td .status-with-icon { /* Style for the icon and status name */
  display: flex; /* Use flexbox for alignment */
} */

.tracking-table td .status-with-icon i { /* Style for the icon */
  margin-right: 5px; /* Add some space between icon and text */
}