// Spark Report Area Start

.sr-area{
	margin: 0 20px 5px;
	background-color: #ececed;
	padding: 7px;
		.sr-left{
			width: 29.5%;
			float: left;
				.sr-heading-left{
					float: right;
					width: calc(100% - 26px);
					margin-top: 2px;
				}
				.icon-side{
					float: left;
					width: 23px;
					height: 22px;
					background-image: url("../img/sprite.svg");
					background-repeat: no-repeat;
						&.indi-icon-default{
							background-position: -136px 1px;
							position: relative;
						}
						&.indi-icon-yoy{
							background-position: -191px 1px;
						}
						&.indi-icon-yoy-per{
							background-position: -164px 1px;
						}
						&.indi-icon-mom{
							background-position: -246px 1px;
						}
						&.indi-icon-mom-per{
							background-position: -219px 1px;
						}
				}
				h2{
					text-transform: uppercase;
					font-size: 14px;
					color: #231f20;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				h5{
					text-transform: uppercase;
					font-size: 12px;
					color: #231f20;
					margin: 2px 0;
				}
				.graph-set{
					height: 57px;
					width: 100%;
						img{
							height: 57px;
							width: 100%;
						}
				}
		}
		.sr-right{
			width: 70%;
			float: right;
			border: 1px ridge #231f20;
			height: 150px;
				.year-data{
					width: 46%;
					float: left;
					padding: 24px 10px;
						h1{
							font-size: 25px;
							color: #231f20;
							font-weight: normal;
						}
						h4{
							font-size: 13px;
							color: #231f20;
							text-transform: uppercase;
						}
				}
				.high-low{
					float: right;
					width: 54%;
					font-size: 12px;
					color: #231f20;					
						.hl-inner{
							height: 46px;
							border-bottom: 1px ridge #231f20;
							padding: 0px 10px 0 0;
								&:nth-of-type(2){
									border-bottom: 0;
								}
								.hl-text{
									float: left;
									height: 46px;
									padding: 16px 0;
									width: 45px;
									font-size: 11px;
									text-align: center;
									text-transform: uppercase;
									border-right: 1px ridge #231f20;
									border-left: 1px ridge #231f20;
								}
								.hl-data{
									float: right;
									text-align: right;
									padding: 9px 0 3px;
									line-height: 12px;
										h5{
											font-size: 11px;
											text-transform: uppercase;
											font-weight: normal;
											padding: 2px 0;
										}
										h3{
											font-size: 13px;
										}
								}
						}
				}
				.vs-area{
					border-top: 1px ridge #231f20;
					height: 55px;
					line-height: 14px;
						&.red{
							background-color: #d44126;
							color: #FFF;
						}
						&.green{
							background-color: #8cc047;
						}
						&.yellow{
							background-color: #f0cd16;
							color: #000;
						}
						.vs-sec{
							float: left;
							text-align: center;
							color: #FFF;
							width: 33.33%;
							padding: 13px 0 13px;
							height: 55px;
								&:nth-of-type(1){
									border-right: 2px ridge #231f20;
								}
								&:nth-of-type(2){
									border-right: 2px ridge #231f20;
								}
								&.red{
									background-color: #d44126;
									color: #FFF;
								}
								&.green{
									background-color: #8cc047;
								}
								&.yellow{
									background-color: #f0cd16;
									color: #000;
								}
								h4{
									font-size: 13px;
								}
								h5{
									font-size: 11px;
									text-transform: uppercase;
									font-weight: normal;
								}
						}
				}
		}
}