body {
}

#divSingle{ background-color:#FFF;}
.tooltip-text {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    box-shadow: 1px 2px 1px #CCCCCC;
    color: #000000 !important;
    font-size: 12px;
    left: -48px;
    line-height: 15px;
    padding: 5px 10px !important;
    position: absolute;
    bottom: 99999px;
    width: 250px;
    z-index: 9999;
    position: absolute !important;
    margin: 0 !important;
    font-weight: normal !important;
    background-color:#FFF;
    word-wrap:break-word;
    white-space:normal;
}

.info-icon {
    background: url("../_img/info-icon.png") no-repeat scroll 2px 0;
    cursor: default !important;
    display: inline-block;
    height: 21px;
    padding: 0 1px;
    vertical-align: top;
    width: 22px;
    position: relative;
}

.info-icon:hover {
        background: url("../_img/info-icon-hover.png") no-repeat right center;
    }

.info-icon:hover .tooltip-text {
            bottom: 41px;
    }

.tooltip-text:after {
    background: url("../_img/tooltip-arrow.png") no-repeat scroll 0 0;
    content: "";
    height: 17px;
    left: 43px;
    position: absolute;
    bottom: -17px;
    width: 29px;
    z-index: 9;
}

.info-icon:hover .tooltip-text {
    left: -117px;
}

.info-icon:hover .tooltip-text:after {
        left: 112px;
    }

ul li.star:before { content: "*"; color:#ff6600; font-size:14px; float:left; padding-right:10px;}
ul li.circle:before { content: "O"; color:#ff6600; font-size:10px; float:left; padding-right:10px;}
/*
ul li.angle:before { content: "♦"; color:#ff6600; font-size:10px; float:left; padding-right:10px;}
    */
ul li.angle:before { content: "\2666"; color:#ff6600; font-size:10px; float:left; padding-right:10px;}

#container.tracking-result.ui-content{padding:0;}
.tracking-result h6{ margin:10px 15px;}
.tracking-result .consignment span{display:block; color:#333f48; padding:0 15px;}
.tracking-result .consignment span b{font-weight:bold;}
.track-detail{background:#fff; padding:20px 10px 20px; position:relative; margin-top:15px;}
.tracking-ref {position: relative;  overflow: auto; vertical-align:top}
.tracking-ref--td---padding {padding:3px;}
.tracking-ref--heading{width:99%}
.tracking-ref--content {text-align:left;overflow:auto;height:270px; margin:0; min-height:200px;padding:3px }
div#popup_container {
  border: 1px solid;
  background-color: white;
}

div#popup_overlay {
  background-color: grey;
  opacity: 0.75;
}

div#popup_content {
    padding:10px;
}

div#popup_panel {
    text-align:center;
}
a.underline{text-decoration:underline;}
/*.track-detail .result{  position: absolute;    right: 28%;    top: 55px;}
.track-detail  .buttone-set{margin-top:15%;}*/
.track-detail .result{ margin-bottom:15px;}
.track-detail .label{  float: left;    text-align:right;}
.track-detail .label span{    display: block;   font-size:14px; }
.non-active{color:#999;}

.headings.label span.active span, .headings.label span.exception span{
    width: 100px;
    height: 24px;
    color: #fff;
    display: block;
    padding: 4px 7px 2px;
    margin: 0 auto;
    float: none;
    border-radius: 3px;
    line-height: 18px;
    font-size:14px;
}
.headings.label span.active span{
    background-color: #1FA538;
}
.headings.label span.exception span{
    background-color: #F0B030;
}

.track-detail .img{ float: left;}
.track-detail  .buttone-set > span{width:100%; display:block; margin-top:10px;}
.track-detail  .buttone-set span .btn.orange{width:48%; padding:10px 0;}
.track-detail  .buttone-set span .btn, .track-detail  .buttone-set span .ui-btn{float:left; width:48%; padding:0;}
.track-detail  .buttone-set span .btn:first-child, .track-detail  .buttone-set span .ui-btn:first-child{margin:0 2% 0 0%;}
.track-detail  .buttone-set span .ui-btn-inner span{font-size:12px;}
.order-ship{ height: 25%;   width: 3px; position:relative; background: url(../_img/Track/dot-grey--horizontal.png);}
.order-ship.bg-orange{background:#1FA538;} /*TODO:change name to bg-green*/
.order-ship.bg-yellow{background:#F0B030;}
.order-ship.last{background: none;}

.order-ship em{background: url("../_img/Track/incomplete_milestone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 40px; width:40px;  left: -7px;  position: absolute;   top: -3px; cursor:pointer;}
.order-ship.sucess em{background: url("../_img/Track/complete_milestone.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.order-ship.unsucess em{background: url("../_img/Track/completed_exception.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}
.order-ship em span{ background: none repeat scroll 0 0 #fff;    border: 1px solid;    color: #000;    display: block;    margin-left: 50px;    margin-top: 6px;    padding: 7px;    width: 82px; display:none;}
.order-ship.sucess.pickup em{ background: url("../_img/Track/collecting.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block;  float: left;  height: 45px;   width: 45px; background-size:cover;   top: -5px; left:-20px; z-index: 9999; opacity:1.0;}
.order-ship.sucess.transit em{ background: url("../_img/Track/intransit.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block;  float: left;  height: 45px;   width: 45px; background-size:cover;         top: -5px; left:-20px; z-index: 9999; opacity:1.0;}
.order-ship.sucess.courier em{ background: url("../_img/Track/intransit.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block;  float: left;  height: 45px;   width: 45px; background-size:cover;        top: -5px; left:-20px; z-index: 9999; opacity:1.0;}
.order-ship.sucess.delivered em{ background: url("../_img/Track/delivered.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block;  float: left;  height: 45px;   width: 45px; background-size:cover;       top: -5px; left:-20px; z-index: 9999; opacity:1.0;}
.order-ship.exception em{ background: url("../_img/Track/state_exception.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: block;  float: left;  height: 45px;   width: 45px; background-size:cover;       top: -5px; left:-20px; z-index: 9999; opacity:1.0;}
.order-ship .truck.opacity{opacity:0.3;}
.btn.blue.small, .ui-submit{height:38px; line-height:30px; background:#1cb3f4; border:none;  font-family: 'Museo Sans W01 700', Arial, Helvetica, sans-serif;  color:#fff; font-weight:normal; margin-top:1px; border-top-left-radius: 0; border-bottom-left-radius: 0;padding: 10px 25px;font-size: 17px; box-shadow:none;}
.btn.blue, .ui-submit{line-height:30px; height:38px; background:#1cb3f4; border:1px solid #1cb3f4; width:100%;  font-family: 'Museo Sans W01 700', Arial, Helvetica, sans-serif;  color:#fff; font-weight:normal; margin-top:1px; padding: 10px 25px;font-size: 17px;  text-shadow:none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}
.btn.blue.ui-focus, .track-package .ui-focus, .ui-submit.ui-focus, .ui-submit.ui-btn:focus{box-shadow:0 0 3px #1cb3f4 inset, 0 0 9px #1cb3f4 !important; }
.external{padding:10px; width:100%; display:block; text-align:center; color:#fff !important; font-size:14px;}
.external.small{width:109px;}

.resultiframe{height: 430px; width: 100%; overflow:auto }
.item-right{text-align:right}
.item-center{text-align:center}


/*ie7 only style*/
.captcha-block-ie7fix{

	*margin-left:135px;
}

.table_ie7fix td{
	*padding:5px;
}

.btnSubmit {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-style:none;
  background-color: #1cb3f4;
  color:#FFF;
  padding: 10px 25px;
  line-height: 30px;
  font-size: 17px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  -webkit-appearance: button;
  text-shadow: none;
  text-transform:none;
  font-family: 'Museo Sans W01 700',Arial,Helvetica,sans-serif;
}
.required{ color:#F60; }
.track-detail .result
{
    float: left;
}
.track-detail
{
    border: 1px solid #dfdfdf;
    overflow: hidden;
    white-space: nowrap;
    height: 350px;
	padding: 50px 50px 0px 70px;
}
.label__heading--sub .heading
{ 
    color:#999;
	width: 100%; 
	display:block; 
}
.label__heading--sub 
{
	padding-bottom: 5px;
	white-space:nowrap;
    font-size: 12px;
}
.layout__item {
    padding-left: 24px;
    padding-right: 24px;
}


@media screen and (max-width: 759px)
{
    h1, h2, h3{font-size:14px !important;}
	.track-detail .external, .track-detail .buttone-set span a, .ui-btn-inner span a{font-size:10px !important;}
    .tracking-ref {position: relative;  overflow: auto; vertical-align:top; font-size:12px;}
	table.consign tr td span{display:block; margin-left:0px;}
   
	.links a.ui-link, .links a.ui-link:hover, span.terms-condition a.ui-link, span.terms-condition a.ui-link:hover, #footer.ui-footer p{font-size:12px;}
    .order-ship em{ width:40px; height:40px; left:-7px;}
    .order-ship{ width: 3px;   position: relative;}
    .track-detail .label span:first-child{margin-top:0px;}
    .track-detail .label span{}
    .resultiframe{width: 102%; min-height:700px; height:700px;}
    .btnSubmit {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-style:none;
      background-color: #1cb3f4;
      color:#FFF;
      padding: 10px 25px;
      line-height: 30px;
      font-size: 17px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-font-smoothing: antialiased;
      width:100%;
      display: inline-block;
      -webkit-appearance: button;
      text-shadow: none;
      text-transform:none;
      font-family: 'Museo Sans W01 700',Arial,Helvetica,sans-serif;
    }
    .tracking-ref--content {text-align:left;overflow:auto;height:290px; margin:0; min-height:230px;padding:3px }
    .phone-item-left{text-align:left; white-space:normal;}
    .order-ship.sucess.delivered em{top: -5px; left: -20px;}
}

@media screen and (min-width:760px) 
{
    .track-detail .result {margin:1% auto 12%; width:80%; padding:20px;}
    .track-detail .label {display:block;  min-height:27px !important; text-align:left;}
    .track-detail .label span{display: inline-block;}
    .track-detail .label span:first-child {margin-left:0px;}
    .track-detail .img{display:block; margin-left:0px; float:left; box-sizing:border-box; padding-left:25px;}
    .order-ship {float: left; height: 3px !important;    width: 25%;}
    .order-ship em , .order-ship.unsucess em, .order-ship.sucess em{top: -8px;}
    .order-ship .truck{height: 45px;    margin-left: -15px;    margin-top: 25px;    width: 45px;}
    .order-ship em span {position:relative; z-index:9999 !important;}
    .track-detail { padding: 100px 50px 0px; }
    .order-ship.sucess.pickup   em{ top: -20px; }
    .order-ship.sucess.transit  em{ top: -20px; }
    .order-ship.sucess.courier  em{ top: -20px; }
    .order-ship.sucess.delivered em{ top: -20px; }
    .order-ship.exception       em{ top: -20px; }
    .headings.label span.active span{float: left;}
    .headings.label span.exception span{float: left;}
}