body{
    font-family: Verdana, Geneva, sans-serif !Important;	
    font-size:13px;
    }
    .main
    {
        color:#333;
    }
    .b
    {
        
        /* border:solid 1px #ccc; */
        clear:both;
    }
    .step
    {
        color:black;
    }
    .orh
    {
        
        margin:0px;
        margin-top:10px;
    }
    .consignee{
        
        border:solid lightgray;
        border-width:thin;
        padding:0px;
        margin-top: 0px;
        border-left-width: -10;
        margin-left: 10px;
        margin-top:35px;
  
        
    }
    
    .Consigner{
        border:solid lightgray;
        border-width:thin;
        margin-top: 35px;
        margin-bottom:0px;
        margin-right: 0px;
        margin-left: -10px;
       
       }
    .con{
        padding-bottom:2px;
        padding-top:2px;
        padding-left:2px;
        padding-right:2px;
        background:lightgray;
    
    }
    .con1
    {
        padding-bottom:2px;
        padding-top:2px;
        padding-left:2px;
        padding-right:2px;
        background:lightgray;
    
    }
    .bookid{
        
        margin-top:0px;
    }
    .bookon{
        
        margin-top:0px;
    }
    .address{
        
        margin-top:0px;
        
    }
    .order
    {
        text-align:right;
    }
    #Logo {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 30%; right: -25%; bottom: 0; left: -15%;
      margin-top:-55px;
      display:block; 
      fill: green;
      stroke: green;
      stroke-miterlimit: 5;
    }
    .far
    {
        margin-bottom:5px;
        margin-top:2px;
        font-size:40px;
        
    }
    
    .Animate-Draw {
      fill-opacity: 0;
      /* Sets the opacity of the fill to 0 or none */
      animation-timing-function: ease-in-out;
      /* Slow start end end to the animation */
      animation-fill-mode: forwards;
      /* Will retain styles set in the last keyframe */
      animation-iteration: 1;
      /* How many times the animation runs */
      stroke-width:3px;
      /* Making the drawn line wider */
      stroke-linecap:round;
      /* Making the end of the line rounded */
      strong-linejoin:round;
      /* Making where the lines join rouned */
      animation-name: DrawLine, FadeStroke, FillIn;
      /* Declares the animation names for our keyframes */
      animation-duration: 500ms, 500ms, 800ms;
      /* First applies to DrawLine, seccond is FadeStroke, third is FillIn*/
      animation-delay: 0s, 800ms, 800ms;
      /* First applies to DrawLine, seccond is FadeStroke, third is FillIn*/
    }
    
    #Draw-Circle {
      stroke-dashArray: 1100;
      stroke-dashoffset: 1100; 
      /* This causes the draw effect*/
    }
    
    #Draw-Check { 
      animation-delay: 800ms, 1s, 1.3s;
      /* First applies to DrawLine, seccond is FadeStroke, third is Fill In*/
      animation-duration: 1.5s, 1s, 1s; 
      /* First applies to DrawLine, seccond is FadeStroke, third is FillIn*/
      stroke-dashArray: 1500;
      stroke-dashoffset: 1500;
      /* This causes the draw effect*/
    }
    
    @keyframes DrawLine {
      to { stroke-dashOffset: 0; }
    }
    
    @keyframes FadeStroke {
      to { stroke-opacity: 0; }
    }
    
    @keyframes FillIn {
      from { fill-opacity: 0; }
      to { fill-opacity: 1; }
    }
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff !Important;
  opacity: 1 !Important; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff !Important;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff !Important;
}
input:focus{
	border:none !Important;
	outline:none !Important;
}
.headboxright{
	border-left: dotted 2px lightgray;text-align: left; margin-top: 20px;
}
.headboxleft{
	text-align: right;border-right:dotted 2px #ccc;margin-top:20px;margin-bottom: 8px;
}
#consignerparty{
	background:url('../images/companyicon.png') no-repeat right top;padding-right:20px;background-size:15px 15px;
}
#consignerpartyadd{
	background:url('../images/locationicon.png') no-repeat right top;padding-right:20px;background-size:15px 15px;
}
#consigneeparty{
	background:url('../images/companyicon.png') no-repeat;padding-left:20px;background-size:15px 15px;
}
#consigneepartyadd{
	background:url('../images/locationicon.png') no-repeat;padding-left:20px;background-size:15px 15px;
}
.footerboxleft{text-align: right;margin-top:20px;margin-bottom: 8px;border-right: lightgray 2px dotted;}
.footerboxright{text-align:left;margin-top:20px;margin-bottom: 8px;}
#tracker1{width: 80%;margin:auto;}

@media screen and (max-width: 600px) {
	.headboxmid{
		border-top: dotted 2px lightgray;
	}
	#consignerparty,
	#consignerpartyadd,
	#consigneeparty,
	#consigneepartyadd
	{
		background:none;
		padding:0px 20px 0px 20px;
	}
	.footerboxleft,
	.footerboxright,
	.headboxleft,
	.headboxright{
		border-top: dotted 2px lightgray;text-align: center;padding:20px;
	}
	#tracker1{
		width:100%;
	}
}