.track-header{
  font-size:30px;
  margin-top: 20px;
}

.btn.btn-primary {
    min-width: 110px !important;
    
}
button.btn.btn-primary:hover {
    opacity: 0.8;
}
input[type="text"].form-control::placeholder {
    color:#ccc;
}
input#trackNumber {
    font-size: 14px;
    border: solid #000000 1px !important;
    height: 40px;
    margin-bottom: 0px;
}
.form-control{
/*background-color: #f5f5f5 !important;*/
    border:0px !important;
    border-radius: 8px 0 0 8px !important;
  
    display: flex;
    padding: 8px 8px 8px 0;
    font-size:20px;
    }
    
.form-group{
  display: flex !important;
    background-color: #fff !important;
    border-radius: 5px !important;
    padding: 20px 0 0px 0px !important;
    margin: 0px !important;
}

.track{
  margin:0 0 40px 0;
  padding: 20px;
}
.timeline-item {
  display: block;
  align-items: flex-start;
  margin-bottom: 16px;
  position: relative;
  font-size: 12px;
}

:root{
  --ap-red:#dc1928;
  --line:#e5e7eb;
  --done:#94a3b8;
  --text:#0f172a;
  --sub:#64748b;

  --icon-default:url("../img/transport.png");
  --icon-current:url("../img/sign_active.png");
}

.timeline{
  position:relative;
  margin:0;
  padding:0;

  /* 對齊用變數 */
  --icon-left:10px;
  --icon-size:25px;
  --line-width:2px;
  --icon-bg:#cbd5e1; /* 圓底顏色，可自行調 */
}

/* 整條貫穿的底線(在最底層) */
.timeline::before{
  content:"";
  position:absolute;
  left:calc(var(--icon-left) + var(--icon-size)*0.5 - var(--line-width)*0.5);
  top:0;
  bottom:0;
  width:var(--line-width);
  background:var(--line);
  border-radius:2px;
  z-index:0;
}

.timeline-item{
  position:relative;
  padding: 10px 0 1px 44px;
}

/* 圓形圖標(蓋在線上) */
.timeline-item::before{
  content:"";
  position:absolute;
  left:var(--icon-left);
  top:10px;
  width:var(--icon-size);
  height:var(--icon-size);

  background-image:var(--icon-default);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  background-color:var(--icon-bg); /* 圓底 */
  border:none;
  border-radius:999px; /* 變圓 */
  box-shadow:none;

  z-index:2; /* 一定要比線高 */
}

/* 每個節點「往下」的強調線(遮在底線上面) */
.timeline-item::after{
  content:"";
  position:absolute;
  left:calc(var(--icon-left) + var(--icon-size)*0.5 - var(--line-width)*0.5);

  /* 從圓形中心開始往下 */
  top:calc(10px + var(--icon-size)*0.5);
  bottom:-6px;
  width:var(--line-width);

  background:linear-gradient(180deg,var(--sub) 0%,var(--line) 100%);
  border-radius:2px;

  z-index:1;
}
.timeline-item:last-child::after{ display:none; }

/* 第一個節點用current圖+紅色下半段 */
.timeline-item:first-child::before{
  background-image:var(--icon-current);
  background-color:var(--icon-bg);
}
.timeline-item:first-child::after{
  background:linear-gradient(180deg,var(--ap-red) 0%,var(--line) 100%);
}

.timeline-content{ padding:0; }

.timeline-content .text-muted{
  display:block;
  font-size:15px;
  line-height:1.6;
  color:var(--text);
  margin:0 0 3px 0;
}
.timeline-item:first-child .text-muted{ color:var(--ap-red); }

.timeline-content .text-muted-content{
  display:block;
  font-size:12.5px;
  line-height:1.5;
  color:var(--sub);
  margin:0;
}

@media(max-width:768px){
  .timeline-item{ padding-left:40px; }
  /* 如果你手機端想改位置/大小，只動這兩個變數 */
  .timeline{
    --icon-left:10px;
    --icon-size:25px;
  }
}


/*.timeline-content{*/
/*  padding:0;*/
/*  flex:1;*/
/*  transform:translateY(-5px);*/
/*}*/


/*@media(max-width:768px){*/
/*  .timeline-content{*/
/*    transform:translateY(-5px);*/
/*  }*/
/*}*/
.timeline-date {
  width: 160px;
  padding-right: 20px;
  text-align: left;
}

.timeline-content {
  text-align: left;
}

.timeline-item.active .timeline-date,
.timeline-item.active .timeline-content {
  font-weight: bold;
}

.text-muted {
    font-size: 15px;
    font-weight: 300 !important;
}

.mt10 {
    margin-top: 10px;
}

.timeline-content p.text-muted {
  color: #aaa;
}
.timeline-item.active dt {
  font-weight: 1000;
  color: #333; /*高亮色*/
}
.active .text-muted {
  color: #333 !important; /*高亮色*/
}
.zib-widget {
    clear: both;
    background: #ffffff;
    padding: 15px;
    box-shadow: 0 0 10px rgb(116 116 116 / 44%);
    border-radius: 8px;
    margin-top: 20px;
}
.mt-3 {
    text-align: left;
    margin-bottom: 0px;
    font-weight: 600;
    font-size: 16px;
}

@media (max-width: 768px) {
    .mt-3 {
        text-align: left;
        margin-bottom: 0px;
        font-weight: 600;
        font-size: 16px;
    }
}
.b, .strong {
    font-weight: 0 !important;
}
@media (max-width: 480px) {
    .mt-3 {
        text-align: left;
        margin-bottom: 0px;
        font-weight: 600;
        font-size: 16px;
    }
}
.mt-3-number {
  text-align: left;
  margin: 0px;
}
.text-align {
  text-align: left;
}
.linehr {
 margin-top: 20px;
    border: none;
    border-bottom: 1px solid currentColor;
    opacity: .2;
    max-width: 100%;
    width: 100% !important;
}
.track-note{
    background-color: #d7e7f7;
    border-radius: 5px;
    color: #212129;
    justify-content: space-between;
    padding: 12px;
    /*margin-top: 20px;*/
    text-align: left;
}