@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500&display=swap');
#track-thaipost *{
   font-family: 'Noto Sans Thai', sans-serif !important; color: #686868;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
         box-sizing: border-box;
}
#track-thaipost *:before,
#track-thaipost *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
      -ms-box-sizing: border-box;
         box-sizing: border-box;
}
#track-thaipost .text-red{ color: #c21b17; }
#track-thaipost .title{ margin:20px 0 10px; }
#track-thaipost .title h1{ margin-bottom:10px; }
#track-thaipost .title p{ font-size:14px; }
#track-thaipost .d-flex{
   display: -webkit-box !important;
   display: -ms-flexbox !important;
   display: flex !important;
}
#track-thaipost .align-items-end{
   -webkit-box-align: end!important;
   -ms-flex-align: end!important;
   align-items: flex-end!important;
}
#track-thaipost .justify-content-center {
   -webkit-box-pack: center!important;
   -ms-flex-pack: center!important;
   justify-content: center!important;
}
#track-thaipost .ml-auto{ margin-left:auto; }
#track-thaipost #input-field .col-1{ width:calc(100% - 200px); }
#track-thaipost #input-field .col-2{ width:190px; padding-left:10px; padding-bottom:7px; }
#track-thaipost #input-field textarea{ border:1px solid #999; padding:10px 15px; width:100%; border-radius:7px; }
#track-thaipost #input-field button{ text-align:center; width:100%; padding:7px 0; background-color:#c21b17; border-radius:5px; border:none; color:#fff; cursor: pointer; transition: all 0.3s; opacity: 1; }
#track-thaipost #input-field button:focus{ opacity: 0.8; }
#track-thaipost .note{ font-size:14px; padding:10px 0 30px; }
#track-thaipost #track-result{ display:none; }
#track-thaipost .location-list .item{    
   display: -webkit-box !important;
   display: -ms-flexbox !important;
   display: flex !important; 
}
#track-thaipost .track-title{ font-size:22px; margin-bottom:5px; }
#track-thaipost .track-title .result-word{ font-size:16px; }
#track-thaipost .track-title #track-count{ font-size:14px; }
#track-thaipost .track-list{ border-top:1px solid #ccc; padding:8px 0 30px; }
#track-thaipost .ship-date .day{ font-size:30px; line-height:30px; padding-top:3px; font-weight: 500; color:#c21b17; margin-right:10px; }
#track-thaipost .ship-date .day-name{ font-size:14px; line-height:14px; }
#track-thaipost .month-year-time{ line-height:16px; font-size:12px; }
#track-thaipost .track-status{ text-align:center; margin-top:20px; }
#track-thaipost .track-status h3{ margin-bottom:5px; }
#track-thaipost .track-status-step{ padding:40px 0 20px; text-align: center; }
#track-thaipost .track-status-step > *{ position:relative; padding:0 50px; }
#track-thaipost .track-status-step > *:before{ content:''; display:block; width:100px; height:2px; background-color: #c21b17; position: absolute; right:170px; top:61px; }
#track-thaipost .track-status-step > *:first-child:before{ display:none; }
#track-thaipost .track-status-step > * > div{ color:#000; }
#track-thaipost .track-status-step i{ display:block; width:120px; height:120px; background-size:cover; margin-bottom:10px; }
#track-thaipost .track-status-step .status-1 i{ background-image:url('../img/track-thailandpost/status-1.png'); }
#track-thaipost .track-status-step .status-2 i{ background-image:url('../img/track-thailandpost/status-2.png'); }
#track-thaipost .track-status-step .status-3 i{ background-image:url('../img/track-thailandpost/status-3.png'); }
#track-thaipost .track-status-step .status-4 i{ background-image:url('../img/track-thailandpost/status-4.png'); }
#track-thaipost .track-status-step .status-1.active i{ background-image:url('../img/track-thailandpost/status-1-active.png'); }
#track-thaipost .track-status-step .status-2.active i{ background-image:url('../img/track-thailandpost/status-2-active.png'); }
#track-thaipost .track-status-step .status-3.active i{ background-image:url('../img/track-thailandpost/status-3-active.png'); }
#track-thaipost .track-status-step .status-4.active i{ background-image:url('../img/track-thailandpost/status-4-active.png'); }
#track-thaipost .track-location-box{ position:relative; margin-top:20px; }
#track-thaipost .track-location-box > *{ font-size:15px; }
#track-thaipost .track-sign{ position:absolute; right:0; top:9px; }
#track-thaipost .track-sign a{ color:#c21b17; text-decoration: underline; }
#track-thaipost .location-list .item{ padding:10px 0; }
#track-thaipost .location-list .status-tree-line{ width:50px; position:relative; }
#track-thaipost .location-list .status-tree-line:before{ content:''; display:block; height:calc(100% + 18px); width:1px; background-color:#c21b17; position:absolute; top:-28px; left:7px; }
#track-thaipost .location-list .status-tree-line:after{ content:''; display:block; width:14px; position:absolute; height:14px; left:0; top:50%; border-radius:50%; margin:-9px 0 0 0; border:1px solid #c21b17; background-color:#fff; }
#track-thaipost .location-list > .item:first-child .status-tree-line:before{ display:none; }
#track-thaipost .location-list > .item:first-child .status-tree-line:after{ background-color: #c21b17; }
#track-thaipost .location-list .date-location{ width:550px; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
#track-thaipost .location-list .track-date{ width:300px; }
#track-thaipost .location-list .track-location{ width:250px; }
#track-thaipost .location-list .track-status-description{ width:calc(100% - 650px); overflow: hidden; display: block;
   display: -webkit-box; max-width: 100%; max-height: 1.4em; line-height: 1.4em; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

@media (max-width: 1180px){

   #track-thaipost .track-status-step > *{ padding:0 40px; }
   #track-thaipost .track-status-step i{ width:110px; height:110px; }
   #track-thaipost .track-status-step > *:before { width: 82px; right: 149px; top: 56px; }
   #track-thaipost .location-list .date-location{ display:block !important; }
   #track-thaipost .location-list .date-location{ width:300px; }
   #track-thaipost .location-list .track-date{ width:100%; }
   #track-thaipost .location-list .track-location{ width:100%; }
   #track-thaipost .location-list .track-status-description{ width:calc(100% - 450px); }
   #track-thaipost .location-list .status-tree-line:after{ top:13px; }
   #track-thaipost .location-list .status-tree-line:before{ top:-51px; }
}

@media (max-width: 900px){

   #track-thaipost .location-list .track-status-description{ max-height: 3em; line-height: 1.5em; -webkit-line-clamp: 2; }
}

@media (max-width: 768px){

   #track-thaipost .contact br{ display:none; }
   #track-thaipost .title h1{ font-size:26px; }
   #track-thaipost #input-field{ display:block !important; }
   #track-thaipost #input-field .col-1,
   #track-thaipost #input-field .col-2{ width:100%; padding-left:0; }
   #track-thaipost .track-title{ font-size:20px; }
   #track-thaipost .track-status-step{ padding:20px 0; }
   #track-thaipost .track-status-step i{ width:55px; height:55px; }
   #track-thaipost .track-status-step > *{ padding:0 10px; font-size:14px; width:75px; }
   #track-thaipost .track-status-step > *:before { width:21px; right:64px; top:28px; }
   #track-thaipost .track-status-step > * > div{ line-height:18px; font-size: 12px; }
   #track-thaipost .track-list .track-place{ font-size:14px; }
   #track-thaipost .location-list{ font-size:15px; }
   #track-thaipost .location-list .track-date{ font-size:14px; }
   #track-thaipost .location-list .status-tree-line{ width:25px; }
   #track-thaipost .location-list .status-tree-line:before{ top:-47px; }
   #track-thaipost .location-list .track-location{ overflow: hidden; display: block; display: -webkit-box; max-width: 100%; max-height: 1.4em; line-height: 1.4em; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
   #track-thaipost .location-list .date-location{ width:160px; }
   #track-thaipost .location-list .track-status-description{ width:calc(100% - 185px); }
   #track-thaipost .track-location-box{ padding-top:40px; }
   #track-thaipost .track-sign{ left:50%; margin-left:-27px; top:0; }
   #track-thaipost .track-status{ font-size:16px; }
   #track-thaipost .ship-date .day{ margin-right:7px; padding-top:0; font-size:29px; }
   #track-thaipost .month-year-time{ line-height:14px; }
}