// After Entries bar icons for hint area

.hints-bar{
	background-color: $white;
	font-size: 11px;
	color: $black;
	font-style: italic;
	padding: 7px 0;
	margin: 0 12px 0;
		.recent{
		float: left;
		margin:6px 30px 0 0;
		height:14px;
		span{
		color: #666666;
		font-weight: bold;
		font-style: normal;
		}
		}
		.discontinued{
			float: left;
			margin:6px 30px 0 0;
			height:14px;
				span{
					color: #666666;
				}
		}
		.seasonal-adjust{
			float: left;
			margin:6px 30px 0 0;
			width: 125px;
			height:14px;
				img{
					width: 10%;
				}
		}
		.value{
			float: left;
			margin-right: 30px;
			width: auto;
				span{
					background: url("../img/sprite.svg") no-repeat -134px 0;
					width: 24px;
					height: 20px;
					float:left;
				}
				img{
					width: 20%;
				}
				.value-set{
					margin: 4px 0 0 5px;
					float:left;
				}
		}
		.mom{
			float: left;
			margin-right: 30px;
			width: auto;
				span{
					background: url("../img/sprite.svg") no-repeat -245px 0;
					width: 24px;
					height: 20px;
					float:left;
				}
				img{
					width: 12%;
				}
				.value-set{
					margin: 4px 0 0 5px;
					float:left;
				}
		}
		.mom-per{
			float: left;
			margin-right: 30px;
			width: auto;
				img{
					width: 10%;
				}
				span{
					background: url("../img/sprite.svg") no-repeat -218px 0;
					width: 24px;
					height: 20px;
					float:left;
				}
				.value-set{
					margin: 4px 0 0 5px;
					float:left;
				}
		}
		.yoy{
			float: left;
			margin-right: 30px;
			width: auto;
				img{
					width: 13%;
				}
				span{
					background: url("../img/sprite.svg") no-repeat -190px 0;
					width: 24px;
					height: 20px;
					float:left;
				}
				.value-set{
					margin: 4px 0 0 5px;
					float:left;
				}
		}
		.yoy-per{
			float: left;
			margin-right: 30px;
			width: auto;
				img{
					width: 11%;
				}
				span{
					background: url("../img/sprite.svg") no-repeat -163px 0;
					width: 24px;
					height: 20px;
					float:left;
				}
				.value-set{
					margin: 4px 0 0 5px;
					float:left;
				}
		}
		.red-hint{
			float: left;
			width: auto;
			margin: 10px 30px 3px 0;
			line-height: 20px;
				span{
					float: left;
					margin-right: 5px;
					width: 20px;
					height: 20px;
					border: 1px solid #999;
						&.bg-red{
							background-color: #f7b8b8;
						}
				}
		}
		.yellow-hint{
			float: left;
			width: auto;
			line-height: 20px;
			margin: 10px 0 3px 0;
				span{
					float: left;
					margin-right: 5px;
					width: 20px;
					height: 20px;
					border: 1px solid #999;
						&.bg-yellow{
							background-color:  #f1e5a8;
						}
				}
		}
		@media screen and (max-width:1580px){
			.value, .mom, .mom-per, .yoy, .yoy-per{
				.value-set{
					margin:4px 4px 0 1px;
				}
			}
			.recent, .discontinued, .seasonal-adjust{
				margin: 6px 5px 6px 0;
			}
			.value, .mom, .mom-per, .yoy, .yoy-per{
				margin-bottom:6px;
				margin-right:0px;
			}
		}  
}