body{
    font-size: 16px;
}
.navbarSelf{
    position: absolute;
    top:0px;
    width: 100%;
    color: #2d2d2d;
}
.navbarSelf .nav-link{
    color: #2d2d2d;
}

.trackWrap {
    padding: 142px 40px 60px;
}

.trackMinbox{
    margin: 0 auto;
    width: 560px;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(97, 132, 255, .07), 0px 4px 8px rgba(97, 132, 255, .0417), 0px 2px 4px rgba(97, 132, 255, .0283);
    background: #fff;
    border: 1px solid #5b62ff;
}
.trackContentMinbox{
    position: relative;
    padding:0px;
}
.button-search{
    font-weight: 700;
    cursor: pointer;
    box-sizing: border-box;
    height: auto;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    background: #5b62ff;
    border: none;
    z-index: 3;
    position: absolute;
    right: 8px;
    top:5px;
    z-index: 100;
    
}



.box1{
    width:100%;
    max-width: 600px;
    background-color: #fff;
    position: relative;
    overflow: auto;
    height: auto;
    min-height: 56px;
    padding:4px 0px;
}
.boxWrap{
    width: 100%;
    height: auto;
    background-color: #fff;
    font-size: 18px;
}
.box1.active{
    height:350px;
}

.box11{
    width: 80%;
    margin: 0 auto;
    height: auto;
    min-height: 48px;
    background-color: transparent;
    line-height: 48px;
    position: absolute;
    top: 4px;
    z-index: 10;
    left: 10%;
    outline: none;
    color:#333;
    transition: all 3000ms;
}
.box11>div{
    height: 48px;
}
pre{
    width: 80%;
    height: 100%;
    background-color: #fff;
}
.line{
    width: 100%;
    height: 48px;
    z-index: 5;
    position: relative;
}
.DivOrder{
    position: absolute;
    left: 10px;
    line-height: 48px;
    color:rgba(32,32,32,.5);
}
.DivDelect>i{
    width:24px;
    height:24px;
    font-size:18px;
    position: absolute;
    right: 10px;
    text-align: center;
    top:10px;
    cursor: pointer;
    vertical-align:middle;
    color:rgba(32,32,32,.5);

}
.DivDelect>i:hover{
    background-image:url("../images/Trace/delectHover111.png?v=20190124");
}

.firstBox11{
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0;
}

.line:nth-child(2n){
    background-color: #f7f7f7;
}
.bottomShow{
    display: block!important;
    height: 30px!important;
     line-height: 30px!important;
    top:0px;
}

/* .placeholder:after{
    content: 'ENTER UP TO 50 NUMBERS, ONE PER LINE.';
    color: #c5c5c5;
    font-size: 12px;
}
.placeholderCH:after{
   content: '一次最多支持50条订单查询';
   color: #c5c5c5;
   font-size: 12px;
} */
.placeholderMore:after{
    content: 'ENTER UP TO 10000 NUMBERS, ONE PER LINE.';
    color: #c5c5c5;
    font-size: 12px;
}




.box11{
   text-transform:uppercase;

}
.tracr_result .copyBtnAll{
   color:#4A90E2;
}

.divcopyDetail::after{
   display: inherit;
   content:'Copy Result';
   padding-right: 20px;
   color:#4A90E2;
}

.divcopyDetailLink::after{
   display: inherit;
   content:'Copy Link';
   color:#4A90E2;
}

.box1 {
    max-height: 100vh;
    overflow-y: auto;
 
    &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background-color: #aeb2ff;
    }
    
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 5px;
        background-color: transparent;
    }
 
}


@media (max-width: 480px){
    .divcopyDetail,.divcopyDetailLink{
        display: inline-block;
        width: 26px;
        height: 26px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
    }
    .divcopyDetail{
        background-image: url('../images/Trace/copyresult.png?v=20190124');
        margin-right: 20px
    }
    
    .divcopyDetailLink{
      
        background-image: url('../images/Trace/copylink.png?v=20190124')
    }

    .divcopyDetail::after{
        content:'';
    }
    
    .divcopyDetailLink::after{
        content:'';
    }
  
}





@media screen and (min-width: 1024px) {
    .trackWrap {
        padding: 142px 40px 60px;
    }
}

@media screen and (max-width: 767px) {
    .trackWrap{
        padding: 112px 24px 20px;
    }
   
}

.trackWrap{
    background-size: 2260px 500px;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url('../images/bg.png');
}


.traceResultWrap{
    background-color: #f7f8fa;
    width: 100%;
}
.traceResultBox{
    max-width: 1200px;
    margin: 0 auto;
    padding:40px;
}
.resultClassEl{
    margin-right: 30px;
    cursor: pointer;
    padding:8px 18px;
    position: relative;
    border: 1px solid transparent;
}
.resultClassEl.active{
    background-color: #fff;
    border-radius: 24px;
    border: 1px solid #e6e9ee;
}
.resultClassEl.active::after
{
    content: "";
    position: absolute;
    display: block;
    width: 28px;
    height: 4px;
    border-radius: 3px 3px 0px 0px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5b62ff;
}


.resultClassBox .resultClassEl:last-child{
    margin-right: 0px;
}
.statusBox{
    color: #fff;
    font-size: 12px;
    padding: 4px 6px;
    margin-right: 8px;
    border-radius: 2px;
}
.statusBox-lg{
    padding: 10px 16px;
    font-size: 22px;
    border-radius: 6px;
}
.statusBox1{
    background-color: rgb(144, 154, 165);
}
.statusBox2{
    background-color: rgb(0, 181, 30);
}

#v-pills-tab{
    width:220px;
    border:1px solid #ccc;
    padding:6px;
    border-radius: 4px;
    background-color: #fff;
}

.leftBox .nav-link{
    border-radius: 4px;
    padding:6px;
    text-align: left;
    color: #333;
    position: relative;
}
.leftBox .nav-link.active{
    background-color:#5b62ff;
}
.leftBox .nav-link::after{
 content: "";
 display: block;
 width:100%;
 border-bottom: 1px solid #ccc;
 position: absolute;
 bottom: -1px;
 left: 0px;

}
.leftBox .nav-link.active::after,.leftBox .nav-link:last-child:after{
    border-bottom: none;
}
.circleBox{
    display: inline-block;
    width: 8px;
    height:8px;
    border-radius: 4px;

}
.circle-1{
    background-color: rgb(144, 154, 165);
}
.circle-2{
    background-color: rgb(0, 181, 30);
}

.RightBox{
    background-color: #fff;
    flex-grow: 1;
    padding:24px;
}
.color-ccc{
    color:#909aa5;
}
.locationBox{
    color: #435366;
}

.detailResultBox{
    padding: 30px 38px;
    background-color: #f7f8fa;
    border-radius: 6px;
    margin-bottom: 16px;
}

/* 时间轴 */

.timeline {
    list-style: none;
  }
   
  .timeline-item {
    position: relative;
  }
   .timeline-point-box{
    position: relative;
    width: 48px;
   }
  .timeline-point {
    position: absolute;
    top: 7px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    border:1px solid #c7ced5;
    z-index: 1;
  }
  .timeline-line{
    position: absolute;
    top: 12px;
    left: 17px;
    width: 1px;
    height:100%;
    background-color: #C0C4CC;
  }

  .timeline-item:first-child .timeline-point,
  .timeline-item:first-child .timeline-line{
    background-color: #5b62ff;
  }
  .timeline-item:last-child .timeline-line{
    display: none;
    height: 0px;
  }
 .tex-435366{
    color: #435366!important;
 }
 .fs-7{
    font-size: 14px;
 }
 .footer-box a{
    text-decoration: none;
    cursor: pointer;
 }
 .statusText{
    font-size:26px;
 }
 @media screen and (max-width: 767px) {
 
    .traceResultBox{
        padding:10px;
    }
    .RightBox{
        padding:6px;
    }
    .detailResultBox{
        padding:10px;
    }
    .statusText{
        font-size: 18px;
    }
}