body{
    /*font-family: 'Prompt', sans-serif !important;*/
	font-family: 'Sarabun', sans-serif;
    height: 100%;
}
 
/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.tabcontent{
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.showcontent{
  animation: fadeEffect 1s;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeOut{
  from {opacity: 1;}
  to {opacity: 0;}
}

@webkit-keyframes fadeOut{
  from {opacity: 1;}
  to {opacity: 0;}
}
.logo-image {
  float: left;
  line-height: .8;
  max-height: 50px;
  width: auto;
  margin-left: .25rem;
  margin-right: .5rem;
  margin-top: -.6rem;
}

.newblink {
  -moz-animation: blinker 0.75s linear infinite;
  -moz-animation-iteration-count: 10;
  -webkit-animation: blinker 0.75s linear infinite;
  -webkit-animation-iteration-count: 10;
  animation: blinker 0.75s linear infinite;
  animation-iteration-count: 10;
}

@keyframes blinker {
  50% {
    background-color: #922B21;
  }
}

.trainmain:hover{
  background-color: #343a40;
}

.holder {
  position: absolute;
  margin: 25px 8px;
  cursor: auto;
  font-family: Helvetica;
  font-size: 11pt;
  z-index: 1;
}

.link-class:hover{
  background-color:#f1f1f1;
 }

@media screen and (min-width: 4096px){
  body h1{
    font-size:75px;
  }
  body h3{
    font-size:58px;
  }
  .timealign{
    font-size:60px;
  }
  .trainnoalign{
    font-size:66px;
  }
  .thaivertalign{
    font-size:56px;
  }
  .thaismallvertalign{
    font-size:32px;
  }
  .engvertalign{
    font-size:53px;
  }
  .engsmallvertalign{
    font-size:30px;
  }
  .chvertalign{
    font-size:53px;
  }
  .chbigvertalign{
    font-size:56px;
  }
  .chsmallvertalign{
    font-size:28px;
  }
}

@media screen and (min-width: 2560px) and (max-width: 4095px){
  body h1{
    font-size:48px;
  }
  body h3{
    font-size:36px;
  }
  .timealign{
    font-size:36px;
  }
  .trainnoalign{
    font-size:40px;
  }
  .thaivertalign{
    font-size:34px;
  }
  .thaismallvertalign{
    font-size:20px;
  }
  .engvertalign{
    font-size:32px;
  }
  .engsmallvertalign{
    font-size:18px;
  }
  .chvertalign{
    font-size:30px;
  }
  .chbigvertalign{
    font-size:32px;
  }
  .chsmallvertalign{
    font-size:18px;
  }
}

@media screen and (min-width: 1920px) and (max-width: 2559px){
  body h1{
    font-size:36px;
  }
  body h3{
    font-size:30px;
  }
  .timealign{
    font-size:30px;
  }
  .trainnoalign{
    font-size:2.0em;
  }
  .thaivertalign{
    font-size:26px;
  }
  .thaismallvertalign{
    font-size:16px;
  }
  .engvertalign{
    font-size:24px;
  }
  .engsmallvertalign{
    font-size:14px;
  }
  .chvertalign{
    font-size:26px;
  }
  .chbigvertalign{
    font-size:30px;
  }
  .chsmallvertalign{
    font-size:14px;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1919px){
  body h1{
    font-size:30px;
  }
  body h3{
    font-size:22px;
  }
  .timealign{
    font-size:24px;
  }
  .trainnoalign{
    font-size:1.8em;
  }
  .thaivertalign{
    font-size:22px;
  }
  .thaismallvertalign{
    font-size:13px;
  }
  .engvertalign{
    font-size:20px;
  }
  .engsmallvertalign{
    font-size:12px;
  }
  .chvertalign{
    font-size:20px;
  }
  .chbigvertalign{
    font-size:22px;
  }
  .chsmallvertalign{
    font-size:12px;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1599px){
  body h1{
    font-size:24px;
  }
  body h3{
    font-size:18px;
  }
  .timealign{
    font-size:20px;
  }
  .trainnoalign{
    font-size:1.5em;
  }
  .thaivertalign{
    font-size:18px;
  }
  .thaismallvertalign{
    font-size:11px;
  }
  .engvertalign{
    font-size:16px;
  }
  .engsmallvertalign{
    font-size:11px;
  }
  .chvertalign{
    font-size:18px;
  }
  .chbigvertalign{
    font-size:16px;
  }
  .chsmallvertalign{
    font-size:11px;
  }
}

@media screen and (max-width: 1279px){
  body h1{
    font-size:24px;
  }
  body h3{
    font-size:18px;
  }
  .timealign{
    font-size:16px;
  }
  .trainnoalign{
    font-size:1.5em;
  }
  .thaivertalign{
    font-size:14px;
  }
  .thaismallvertalign{
    font-size:12px;
  }
  .engvertalign{
    font-size:14px;
  }
  .engsmallvertalign{
    font-size:10px;
  }
  .chvertalign{
    font-size:12px;
  }
  .chbigvertalign{
    font-size:14px;
  }
  .chsmallvertalign{
    font-size:10px;
  }
}
@media screen and (min-height: 2160px){
  /*.trainmain{
    height:140px;
  }
  .trainrow{
    height:120px;
  }
  #notice{
    height: 150px;
  }*/
  .main-footer{
    height: 140px; 
    font-size: 36px;
  }

}

@media screen and (min-height: 1440px) and (max-height: 2159px){
  /*.trainmain{
    height:140px;
  }
  .trainrow{
    height:100px;
  }
  #notice{
    height:105px;
  }*/
  .main-footer{
    height: 80px; 
    font-size: 24px;
  }
}

@media screen and (min-height: 1080px) and (max-height: 1439px){
  /*.trainmain{
    height:70px;
  }
  #notice{
    height: 80px;
  }*/
  .main-footer{
    height: 80px; 
    font-size: 18px;
  }
}


@media screen and (min-height: 960px) and (max-height: 1079px){
  /*.trainmain{
    height:65px;
  }
  .trainrow{
    height:40px;
  }
  #notice{
    height: 65px;
  }*/
  .main-footer{
    height: 40px; 
    font-size: 15px;
  }
}

@media screen and (min-height: 768px) and (max-height: 959px){
  /*.trainmain{
    height:45px;
  }
  .trainrow{
    height:30px;
  }
  #notice{
    height: 40px;
  }*/
  .main-footer{
    height: 25px; 
    font-size: 12px;
  }
}

@media screen and (max-height: 767px){
  body h1{
    font-size:24px;
  }
  body h3{
    font-size:18px;
  }
  .timealign{
    font-size:16px;
  }
  .trainnoalign{
    font-size:1.3em;
  }
  .thaivertalign{
    font-size:16px;
  }
  .delayalign{
	font-size:12px;
  }
  .thaismallvertalign{
    font-size:12px;
  }
  .engvertalign{
    font-size:12px;
  }
  .engsmallvertalign{
    font-size:10px;
  }
  .chvertalign{
    font-size:14px;
  }
}

.searchfixbutton{
  position:fixed; 
  right:0px; 
  top:30%; 
  margin-right:0px; 
  z-index:1;
}
.onslide{
  right: 250px;
  transition: right 0.3s ease-in-out;
}

.onhide{
  right: 0px;
  transition: right 0.3s ease-in-out;
}

ul.typeahead{
  width: 50%; }

ul.typeahead.dropdown-menu li a {
  border-bottom:#CCC 1px solid;
  color:#000;
  background-color:#fff;
  font-size:14px; }
  
ul.typeahead.dropdown-menu li a:hover{
    color:#ffffff;
    background-color:#922B21;
}

ul.typeahead.dropdown-menu li a:hover{
  color:#ffffff;
  background-color:#922B21;
}

ul.typeahead.dropdown-menu li:last-child a { 
  border-bottom:0px !important; }

.blink {
  -moz-animation: blinktime 0.75s linear infinite;
  -moz-animation-iteration-count: 10;
  -webkit-animation: blinktime 0.75s linear infinite;
  -webkit-animation-iteration-count: 5;
  animation: blinktime 0.75s linear infinite;
  animation-iteration-count: 5;
}
  
@keyframes blinktime {
  50% {
    opacity:0;
  }
}

.flash {
  -moz-animation: blinkcall 3.75s linear infinite;
  -moz-animation-iteration-count: 1;
  -webkit-animation: blinkcall 3.75s linear infinite;
  -webkit-animation-iteration-count: 1;
  animation: blinkcall 3.75s linear infinite;
  animation-iteration-count: 1;
  
}
  
@keyframes blinkcall {
  0% {
    background-color: inherit;
    color:black;
  }
  15% {
    background-color:#922B21;
    color:white;
    opacity: 1;
  }
  85% {
    background-color:#922B21;
    color:white;
    opacity: 1;
  }
  100% {
    background-color: inherit;
    color:black;
  }
}
.tracking-detail {
  padding:3rem 0
 }
 #tracking {
  margin-bottom:1rem
 }
 [class*=tracking-status-] p {
  margin:0;
  font-size:1.1rem;
  color:#fff;
  text-transform:uppercase;
  text-align:center
 }
 [class*=tracking-status-] {
  padding:1.6rem 0
 }
 .tracking-list {
  border:1px solid #e5e5e5
 }
 .tracking-item {
  border-left:1px solid #e5e5e5;
  position:relative;
  padding:2rem 1.5rem .5rem 2.5rem;
  font-size:.9rem;
  margin-left:3rem;
  min-height:5rem
 }
 .tracking-item:last-child {
  padding-bottom:4rem
 }
 .tracking-item .tracking-date {
  margin-bottom:.5rem
 }
 .tracking-item .tracking-date span {
  color:#888;
  font-size:85%;
  padding-left:.4rem
 }
 .tracking-item .tracking-content {
  padding:.5rem .8rem;
  background-color:#f4f4f4;
  border-radius:.5rem
 }
 .tracking-item .tracking-content span {
  display:block;
  color:#888;
  font-size:85%
 }
 .tracking-item .tracking-icon {
  line-height:2.6rem;
  position:absolute;
  left:-1.3rem;
  width:2.6rem;
  height:2.6rem;
  text-align:center;
  border-radius:50%;
  font-size:1.1rem;
  background-color:#fff;
  color:#fff
 }
 .tracking-item .tracking-icon.status-pass {
  background-color:#4cbb87
 }
 .tracking-item .tracking-icon.status-expected {
  background-color:#f5a551
 }
 .tracking-item .tracking-icon.status-deliveryoffice {
  background-color:#f7dc6f
 }
 .tracking-item .tracking-icon.status-attemptfail {
  background-color:#b789c7
 }
 .tracking-item .tracking-icon.status-cancel {
  background-color:#922B21
 }
 .tracking-item .tracking-icon.status-node {
  background-color:#214977
 }
 .tracking-item .tracking-icon.status-intransit {
  color:#e5e5e5;
  border:1px solid #e5e5e5;
  font-size:.6rem
 }
 @media(min-width:992px) {
  .tracking-item {
   margin-left:10rem
  }
  .tracking-item .tracking-date {
   position:absolute;
   left:-10rem;
   width:7.5rem;
   text-align:right
  }
  .tracking-item .tracking-date span {
   display:block
  }
  .tracking-item .tracking-content {
   padding:0;
   background-color:transparent
  }
 }

 .sidebar .full-name {
  padding: 3px 3px 5px 10px;
  color: white;
  width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-dark-primary .short-name {
  padding: 0.5rem 3px 5px 0.75rem; 
  color: white;
}

.sidebar-dark-primary .full-name {
  padding: 3px 3px 5px 10px;
  color: white;
  width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}