/*=============Tracking page==========*/
@font-face{
src:url("../font/Lato-Heavy.ttf");
font-family:lato_heavy;
}

@font-face{
src:url("../font/Roboto-Regular.ttf");
font-family:roboto_regular;
}

@font-face{
src:url("../font/Roboto-Light.ttf");
font-family:roboto_light;
}

@font-face{
src:url("../font/Segoe_UI.ttf");
font-family:segoe_regular;
}

@font-face{
src:url("../font/Tahoma_Regular.ttf");
font-family:tahoma_regular;
}

@font-face{
src:url("../font/Lato-Light.ttf");
font-family:lato_light;
}

@font-face{
src:url("../font/Proxima_Nova.otf");
font-family:proxima_nova;
}



div#tracking_page_body_wrapper{
position:relative;
min-height:500px;
}

/*@media all and (max-width:1280px){
		div#tracking_page_body_wrapper{
			min-height:831px;
			}
			
			
		}
			
			@media all and (max-width:1440px){
		div#tracking_page_body_wrapper{
			min-height:730px;
			}
			
			
		}
			
			@media all and (max-width:1600px){
		div#tracking_page_body_wrapper{
			min-height:615px;
			}
			
			
		}
*/
div#tracking_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:600px;
}

div#track_div{
position:relative;
/*border:1px dotted red;*/
min-height:210px;
padding:20px 20px 30px 50px;
}

div#track_div h1{
border-bottom:1px solid rgb(230,230,230);
padding:0px 0px 20px 0px;
margin:0px 0px 20px 0px;
position:relative;
font:24px lato_heavy;
}

div#track_div h1:before{
display:block;
position:absolute;
left:0px;
bottom:-10px;
content:'';
width:20px;
height:20px;
border:1px solid rgb(230,230,230);
}

div#track_div form{
display:flex;
flex-direction:row;
}

div#track_div form span{
display:block;
margin:0px 10px;
}

div#track_div form span:nth-child(1),div#track_div form span:nth-child(2){
padding:20px 0px 0px 0px;
}

div#track_div form span:nth-child(3){
padding:10px 0px 0px 10px;
}

div#track_div form span:nth-child(4){
padding:10px 0px 0px 0px;
}

div#track_div form label{
font:18px proxima_nova;
}

div#track_div form input[type="text"]{
display:block;
width:150px;
height:20px;
padding:10px;
font:18px proxima_nova;
}

div#track_div form input[type="submit"]{
display:block;
height:42px;
padding:10px;
width:100px;
background:#145163;
border:0px;
color:white;
border-radius:2px;
cursor:pointer;
}

div#tracking_output{
position:relative;
min-height:50px;
/*border:1px solid red;*/
}

div#tracking_output figure{
width:200px;
height:200px;
/*border:1px solid red;*/
margin:auto;
display:none;
}

div#tracking_output figure img{
display:block;
width:100%;
height:100%;
}

div#tracking_footer{
position:relative;
bottom:0px;
background:#F0EFEF;
min-height:30px;
padding:30px;
}

div#tracking_footer h1{
font:24px lato_heavy;
margin:0px 0px 10px 0px;
}

div#tracking_footer p{
margin:0px 0px 10px 0px;
font:16px lato_light;
line-height:1.5em;
}

div#display_track_wrapper{
position:relative;
padding:10px 50px 10px 50px;
min-height:50px;
display:flex;
}

div#display_track_wrapper > div{
/*border:1px solid red;*/
width:50%;
}

div#display_track_wrapper > div:nth-child(1){
position:relative;
}

div#timeline_div::after{
content:'';
position:absolute;
top:0px;
bottom:0px;
left:30%;
width:8px;
background:rgb(250,250,250);
box-shadow:0px 0px 3px rgba(100,100,100,.4);
}

div#timeline_div > div{
position:relative;
left:230px;
width:200px;
height:40px;
padding:10px;
border:1px solid rgb(230,230,230);
margin:5px 0px 20px 0px;
background:rgb(250,250,250);
}

div#timeline_div > div p{
font:14px segoe_regular;
text-transform:capitalize;
}

div#timeline_div > div em{
font:normal 10px Arial;
display:block;
position:absolute;
bottom:2px;
color:rgb(100,100,100);
}

div#timeline_div > div::before{
position:absolute;
content:'';
 width: 20px;
  height: 20px;
  left: -55px;
  background: white url('../images/arrow_up.png') no-repeat center;
  border: 4px solid #145163;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

div#display_track_wrapper > div:nth-child(2){
position:relative;
}

div#progress_bar{
position:relative;
width:70%;
height:30px;
margin:0px 0px 20px 0px;
border-radius:25px;
border:1px solid rgb(250,250,250);
}

div#progress_bar > div{
position:relative;
margin:2px;
height:95%;
transition:.5s width;
border-radius:25px;
}

.transition{
background:#EBF8A4;
border:1px solid #A2D246;
}

.hold{
background:red;
}

p#progressTxt{
font:14px segoe_regular,proxima_nova,lato_light;
text-transform:uppercase;
border-radius:25px;
height:30px;
width:300px;
text-align:center;
padding-top:5px;
background:#E8F7F7;
}

div#msgAlert{
position:relative;
border:1px solid rgb(240,240,240);
width:60%;
height:150px;
margin:10px 0px 0px 0px;
padding:10px;
}

div#msgAlert h5{
font:14px lato_heavy;
}

div#msgAlert p{
font:16px segoe_regular;
}

div#display_track_wrapper > div:nth-child(2) address{
position:relative;
display:flex;
padding:0px 0px 0px 50px;
margin:10px 0px 10px 0px;
}

div#display_track_wrapper > div:nth-child(2) address span{
display:block;
border:1px solid rgb(230,230,230);
margin:0px 10px;
padding:10px;
font:normal 14px segoe_regular;
border-radius:2px;
}

div#display_track_wrapper > div:nth-child(2) address span:nth-child(2){
border:0px;
}

div#display_track_wrapper > div:nth-child(2) address span:nth-child(3){
border:0px;
background:#C9F78B;
}

div#display_track_wrapper > div:nth-child(2) h2{
width:80%;
background:#FFE57E url('../images/warning_icon.png') no-repeat 20px center;
border-radius:25px;
border:1px solid #D67D29;
padding:2px 0px 5px 50px;
font:14px segoe_regular;
}

p.norecord{
width:30%;
margin:auto;
background:#FFB1A2;
border-radius:25px;
border:1px solid #BF0009;
padding:2px 0px 5px 50px;
font:14px segoe_regular;
}

div#display_storage{
position:relative;
min-height:200px;
padding:20px 500px 20px 100px;
background:url('../images/warehouse.webp') no-repeat right center;
}

div#display_storage p{
font:16px segoe_regular;
text-transform:capitalize;
line-height:2em;
position:relative;
}

div#display_storage p:before{
content:'';
display:block;
position:absolute;
left:-10px;
top:5px;
height:20px;
width:5px;
background:#1c566a;
}