.tracking-block{
	padding: 25px 50px 50px 50px;
	min-height: 100vh;
}

.tracking-block .title{
	font-size: 25px;
	color: #1e57ff;
}

.tracking-block .form-and-logs{
	margin-top: 30px;
}


.tracking-number-form, .log{
	background-color: white;
	border-radius: 5px;
	padding: 25px;
	margin-bottom: 30px;
}

.tracking-number-form label{
	font-size: 14px;
	font-weight: bold;
}

.tracking-number-form .input-group{
	margin-top: 5px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.tracking-number-form .input-group input{
	width: 50%;
	height: 60px;
	border-radius: 10px 0 0 10px;
	border: 1px #999999 solid;
	border-right: 0;
	padding: 10px;
	font-size: 16px;
}

.tracking-number-form .input-group button{
	height: 60px;
	width: 20%;
	border-radius: 0 10px 10px 0;
	border: 1px #1e57ff solid;
	background-color: #1e57ff;
	color: white;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
}

.tracking-number-form .input-group button img{
	display: none;
}


.log{
	margin-top: 35px;
	border-left: 5px #1e57ff solid;
	display: none;
}




.log .quick .number-and-sender{
	font-size: 14px;
	font-weight: bold;
}

.quick .progress-bar{
	margin-top: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.graphic .separator, .graphic .point{
	background-color: #e0e0e0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}



.graphic .point:nth-of-type(1){
	border-left: 1px solid #e0e0e0;
}

.graphic .point:nth-of-type(4){
	border-right: 1px solid #e0e0e0;
}

.progress-bar .graphic, .progress-bar .description{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0 10px 0;
}

.graphic .point{
	width: 20px;
	height: 20px;
	border-radius: 15px;
	
}


.graphic .separator{	
	height: 5px;
	width: 20vw;
}


.description .separator{
	width: 5vw;
}


 .description .point{
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 text-align: center;
	 width: 15vw;
	
 }


 
 
  .description .point .event{
	  font-size: 12px;
	  font-weight: bold;
  }
  
  
  .log hr{
	margin: 50px auto 50px auto;
	width: 90%;
	border-color: #f5f6f6;
	opacity: 0.1;
  }
  
  .log .details .title{
	  font-size: 14px;
	  text-decoration: underline;
  }
  
  .log .details table{
	  margin-top: 20px;
	  padding: 10px;
  }
  

  
  table thead th{
	  text-align: left;
	  font-size: 14px;
	  padding: 10px 0 10px 0;
  }

 
  table tbody tr{
	  width: 100%;
	
  }
  
  table tbody td{
	 font-size: 12px;
	 
  }
  
  table tbody td:nth-of-type(1){
	width: 17%;
	padding-right: 25px;
	font-weight: bold;
  }
  
  table tbody td:nth-of-type(2){
	 background-color: #f7f7f7;
	 padding: 10px;
	 border-radius: 10px;
  }
  
  table .the_date{
	  display: none;
  }
  
  







@media (max-width:768px){
	
	.tracking-block{
		padding: 10px 5px 5px 5px;
	}
	
	.tracking-block .title{
		font-size: 16px;
	}
	
	.tracking-block .form-and-logs{
		margin-top: 15px;
	}


	.tracking-number-form, .log{
		padding: 10px;
	}
	
	
	.tracking-number-form label{
		font-size: 12px;
	}
	
	.tracking-number-form .input-group input{
		width: 85%;
		height: 35px;
	}
	
	.tracking-number-form .input-group button{
		height: 35px;
		width: 15%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	
	.tracking-number-form .input-group button span{
		display: none;
	}
	
	.tracking-number-form .input-group button img{
		display: inline-block;
	}

	.log .quick .number-and-sender{
		font-size: 12px;
	}
	
	.log{
		margin-top: 10px;
	}
	
	.log hr{
		margin: 25px auto 25px auto;
	
	}
	
	.log .details .title{
		font-size: 12px;
	}
	
	.log .details table{
		margin-top: 10px;
		padding: 5px;
	}
	
	table thead{
		display: none;
	}
	
	table tbody td:nth-of-type(1){
		display: none;
	}
	

	
	
	table .the_date{
		display: inline;
		font-size: 11px;
		font-weight: bold;
		padding: 0 5px 0 5px;
		border-radius: 10px;
		color: white;
		background-color: #1e57ff;
		margin-right: 5px;
		
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}