.tracking-container {
  max-width: 800px;
  margin: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
}

.tracking-container h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

.tracking-search {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tracking-search input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}

.tracking-search button {
  padding: 12px 20px;
  background: #007BFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.tracking-search button:hover {
  background: #0056b3;
}

.records-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record-item {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 15px;
  background: #fafafa;
  transition: 0.3s;
}

.record-item:hover {
  background: #f0f8ff;
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.record-id {
  font-weight: bold;
  color: #007BFF;
}

.record-status {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.status-open { background: #ffefef; color: #d9534f; }
.status-inprogress { background: #fff5e6; color: #f0ad4e; }
.status-resolved { background: #e8f9e8; color: #5cb85c; }

.dno {
background: #fdecea;
color: #a94442;
font-weight: bold;
padding: 2px 6px;
border-radius: 4px;
}

.sno {
background: #fff8e1;
color: #ffb300;
font-weight: bold;
padding: 2px 6px;
border-radius: 4px;
}

.mwcd {
background: #e6f4ea;
color: #3c763d;
font-weight: bold;
padding: 2px 6px;
border-radius: 4px;
}


.tracking-zone .tracking-heading{}

.tracking-zone .tracking-heading h2{
    padding: 15px 0;
    text-align: center;
    font-size:26px;
    font-family: 'SourceSansPro-Semibold';
}

.tracking-zone .tracking-search-here{
    width: 100%;
max-width: 600px;
margin-bottom: 0;
margin: auto;
}
.tracking-zone .tracking-search-click{
    background: #48797e;
}
.tracking-zone .tracking-search-click:hover{
    background: #fff;
    border: 1px #007BFF solid;
}

.tracking-zone .message-box-show{
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.tracking-zone .message-box-show ul{
    width: 100%;
}

.tracking-zone .message-box-show .card{
    width: 100%;
max-width: 850px;
box-shadow: 0 3px 10px rgb(0 0 0 / 8%);
}

.tracking-zone .message-box-show .card .card-body{
    border:1px rgb(0 0 0 / 17%) solid;
    background:rgb(222 234 255 / 45%);
}
.tracking-zone .message-box-show .record-item{
    border:1px solid #d3d3d3;
}
.tracking-zone .message-box-show .submit-message{
    background: #455f90;
    color: #fff !important;
    padding: 3px 4px;
    font-size: 14px;
    border-radius: 5px;
    /* width: 100%; */
    /* max-width: 145px; */
    text-align: center;
    width: auto;
    display: inline-block;
}
.tracking-zone .message-box-show .forwarded-color{
    background:#c7a425;
}
.tracking-zone .message-box-show .resolved-color{
    background:#098345;
}

 .tracking-zone .message-box-show .in-process-color{
    background: #53888f;
 }

 .feedback-outer
{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    justify-content: right;
    margin: 0 auto;
}
.feedback-outer .feedback-header-top{
    font-family: 'SourceSansPro-Semibold';
    font-size: 18px;
    background: #455f90;
    color: #fff;
    display: inline-flex;
    padding: 6px 12px;
    margin-bottom: 10px;
    text-decoration: none;
}
.feedback-outer .feedback-header-top:hover{
    background: #455f90;
}
.tracking-main-outer-grid{ max-width: 900px; margin: 0 auto;}
.tracking-list-outer{
padding: 16px;
font-size: 16px;
margin-top: 16px;
display: flex; align-items: center; flex-wrap: wrap;
}
.tracking-list-outer p{font-size: 16px;}
.submitted-ticket{background: #eff4ff;  border: 1px solid #a4bdf5;}
.submit-ticket-img-outer{max-width: 50px;}
.submit-ticket-img-outer img{max-width: 100%;}
.submit-ticket-main-outer{width: 100%;max-width: calc(100% - 50px);padding-left: 16px;position: relative;}
.tracking-list-outer .tracking-step{font-size: 14px; font-family: 'SourceSansPro-Semibold'; color: #212121;}
.tracking-list-outer .tracking-ticket{font-size: 16px; margin-bottom: 8px;}
.tracking-list-outer .tracking-submitted{font-size: 16px; margin-bottom: 0;}

.status-outer{margin-bottom: 4px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px;}
.remark-outer{margin-bottom: 5px;}
.tracking-date-outer{margin-bottom: 0;}


.warning-outer{
background: #fff7e0;
border: 1px solid #ffc107;
}
.rejected-outer{
background: #ffeaec;
border: 1px solid #ff98a2;
}

.success-outer{
background: #e9fff5;
border: 1px solid #5ed9a0;
}
.forward-outer{
background: #e0faff;
border: 1px solid #80e5f9;
}
.view-file-btn-outer{    background: #455f90;
color: #fff;
border-radius: 0;
padding: 3px 9px;
display: inline-block;
margin-top: 5px;}

.tracking-list-outer .badge{font-size: 14px; padding: 8px 12px; border-radius: 4px; font-weight: 400; font-family: SourceSansPro-SemiBold;}

.bg-primary{background: #04a3c2 !important;}
.bg2-warning{background: #ffcd36 !important; color: #000;}
.bg2-primary{background: #26adc7 !important;}
.bg2-success{background: #37aa75 !important}
.bg2-danger{background: #e5626e !important;}
.ticket-badge{
position: absolute;
right: 0;
}
.ticket-badge span.badge{background: #046daf !important;}
@media (max-width: 640px) {
.submit-ticket-main-outer{width: 100%; max-width: 100%; padding: 0; margin-top: 10px;}
.submit-ticket-img-outer{max-width: 100%;  width: 100%;}
.submit-ticket-img-outer img{max-width: 50px;}
.ticket-badge{position: inherit; right: auto;}
}