.graph-exchange{
  padding:40px 20px 16px;
}
/* //////////////////// Section  import export exchange national ////////////////////*/

.graph-exchange .import,
.graph-exchange .export{
  display: flex;
  height: 150px;
}

.graph-exchange hr{
  margin-left: 0;
}

.graph-exchange .import-images,
.graph-exchange .export-images{
  display:flex;
  flex-direction:column;
  justify-content: center;
  width:130px;
  margin-right:10px;
}
.graph-exchange .import-images div,
.graph-exchange .export-images div{
  text-align:center;
  margin:5px;
}

.graph-exchange .blue-arrow img{
  -ms-transform: rotate(180deg); /* IE 9 */
  transform: rotate(180deg);
}
.graph-exchange .green-arrow img,
.graph-exchange .blue-arrow img{
  width:40px;
  height:40px;
  margin: auto;
} 

.graph-exchange .import-images img,          
.graph-exchange .export-images img{
  margin: auto;
}



.graph-exchange .import-label,
.graph-exchange .export-label,
.graph-exchange .max {
  font-family: NunitoSans;
  font-size: 13px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
}
.graph-exchange .max{
  font-weight:normal;
}
.graph-exchange .import-value,
.graph-exchange .export-value{
  display:flex;
}

.graph-exchange .import-value img,
.graph-exchange .export-value img{
  width: 30px;
  height:30px;
  margin: 10px 10px 10px 0;
}
.graph-exchange .value{
  font-size: 36px;
  font-weight: bold;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}
.graph-exchange .value span {
  font-size: 26px;
}

.graph-exchange .date,
.graph-exchange .hour{
  opacity: 0.8;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}
.graph-exchange .date img,
.graph-exchange .hour img{
  margin-right:5px;
}

.import-images > div:nth-child(2) img, .export-images > div:nth-child(2) img {
  width: 70px;
  height: 70px;
}

@media only screen and (max-width: 768px) {
	.graph-exchange {
		padding: 20px;
	}

  .graph-exchange .import,
  .graph-exchange .export{
    height: auto;
  }

	.graph-exchange .green-arrow img, .graph-exchange .blue-arrow img {
		width: 30px;
		height: 30px;
	}

	.graph-exchange .value {
		font-size: 26px;
		padding-top: 10px;
	}

	.graph-exchange .value span {
		font-size: 14px;
	}

	.graph-exchange hr {
		margin: 5px 0;
	}

	.graph-exchange .import-images, .graph-exchange .export-images {
		width: 90px;
		flex: unset;
	}

	.graph-exchange .import-images img,
	.graph-exchange .export-images img {
		width: 45px;
		margin: auto;
	}	
}