/*---------------------------------------------------
              css for new tracking
---------------------------------------------------*/



.search-box{
  padding: 12px;
  text-align:center;

}
.nav-search{
  padding-top: 8px;
}
.nav-search > .title{
  font-weight: bold;
  padding-right: 38px;
}

.nav-search > input{
  max-width: 400px;
  margin: 0 auto;

}

.btn-nav-search{
  text-align: center;
  background-color: #327e3f !important;
  color: #fff !important;
  border: 0px !important;
}

.header{
  background-color: #ececec;
  width:100%;
  height: 120px;
  position: fixed;
  z-index: 500;
}


.main-content{
   padding:40px;
   background-color: #f1f1f1;
}


.status {
    font-size: 16px;
    width: 550px;
    position: relative;
    overflow: auto;
    padding-bottom: 20px;
}

.status > .date {
    color: #808080;
    text-align: right;
    width: 120px;
    float: left;
    margin-top: 4px;
    margin-right: 95px;
    padding-left: 10px;
    font-size: 12px;
}

.info > div >.desc{
  color: #327e3f;
}

.status > .desc {
  float: left;
  width: 320px;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
  color : #227e3f;
  font-weight: bold;
}

.status > .icon > .img {
    height: 45px;
    width: 45px;

}

.icon > .img {
   background: url(../img/priority-waiting.png) no-repeat;
}


.priority-success > .icon > .img {
    background: url(../img/priority-success.png) no-repeat;
}

.normaly-waiting > .icon > .img {
    background: url(../img/normaly-waiting.png) no-repeat;
}

.status > .icon {
    width: 45px;
    margin: 0px 25px;
    background: url(../img/line.png) center repeat-y;
    height: 100%;
    position: absolute;
    left: 130px;
    top: 0px;
    height: 100%;
    overflow: hidden;
}

.status:last-child > .icon {
    background: none!important;
}

.tracking_detail{
  display: table-cell;
    vertical-align: top;
    width: 40%;
    position: relative;
}


.info{
  color: #1c1c1c;
line-height: 1.4;
padding-bottom: 40px;

}

.mrb{
  position: relative;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: auto;
    padding: 20px;
    border-top: 1px #c8c8c8 solid;
}

.mrb .logo {
    margin-right: 15px;
    float: left;
}

.mrb .t1 {
    padding-top: 6px;
    font-weight: bold;
}


.mrb .t2 {
    color: #1c1c1c;
    font-size: 14px;

    font-weight: normal;
}

.img-tracking-logo{
  margin-top: 32px;
  width: 286px;
  margin-left: 20px;
  position:fixed;
}


@media only screen and (max-width: 900px){

  .nav-search{
    margin-left: 160px;
  }

  .tracking_detail {
    display: block;
    width: 100%;
}

  .info {
      padding-top: 0px;
      padding-bottom: 20px;
  }
  .mrb {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
      border-bottom: 1px #c8c8c8 solid;
      margin-bottom: 20px;
      padding-bottom: 30px;
  }
}






@media only screen and (max-width: 600px){
  .info {
    padding-top: 0px;
}
  .mrb {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}


  .status {
      padding-left: 90px;
      width: auto;
  }
  .status > .icon {
      left: 0px;
  }
  .status > .date {
      width: auto;
      float: none;
      text-align: left;
      padding-left: 0px;
      margin-right: 0px;
  }

  .status > .desc {
      width: auto;
      float: none;
      padding-left: 0px;
      padding-top: 0px;
  }
  .status > .date > div {
      display: inline-block;

  }
}
@media only screen and (max-width: 460px){
  .img-tracking-logo{
    margin-top:40px;
    height: 60px;
  }

  .nav-search{
    margin-left: 100px;
  }


}


/*---------------------------------------------------*/


.img-sign{
  margin-top: -44px;
margin-left: 6px;
z-index: 99;
position: absolute;
}


.main-title {
  margin-top: 22px;
  padding-left: 4px;
}
.title{
  font-size: 22px;
  font-weight: bold;
  color: #1c1c1c;
  margin-bottom: 6px;
}
.desc{
  font-size: 14px;
}

.statusBox > label{
  padding-top:6px
}

.statusBox > i{
  margin-top:-6px;
}

#done.active {
  color: green;
  background-color:rgba(0,255,0,0.02);
  border: green solid 3px;
}

#deliver.active {
  color: #3071A9;
  border: #3071A9 solid 3px;
  background-color:rgba(66,139,202,0.02);
}


#prepare.active {
  color: #67655D;
  border: #67655D solid 3px;
  background-color:rgba(66,139,202,0.02);
}

.status-container{
  text-align: center;
}
.statusBox{
  text-align: center;

  height: 90px;
  width: 140px;
  margin-top: 15px;
  background-color: #ececec;
  display: inline-block;
  border-radius: 8px;
  color: #b0b0b0;
  border: #c0c0c0 solid 1px;

}

#map {

  height: 448px;
  width: 100%;

  }


.cur_p {
  cursor: pointer;
}

.no-padding{
 padding: 0;
}

body {
  background-color: #fff;
}

@media screen and (max-width: 1158px) {
    .main-title {
        visibility: hidden;
    }
    .status-box {
        display: "";
    }
}



@media screen and (max-width: 918px) {
    .main-title {
        visibility: visible;
    }
    .status-box {
        display: none;
    }
}





/**/