// Feature Report Use Only

.fr-report{
	width: 100%;
	margin: 0 auto;
		.fr-area{
			margin: 0 20px 5px;
				.fr-area-sec{
					background-color: #ececed;
					width: 32.33%;
					float: left;
					margin-right: 1%;
					font-size: 12px;
					margin-bottom: 20px;
						&:nth-of-type(1n){
							margin-right: 1.5%;
						}
						&:nth-of-type(3n){
							margin-right: 0;
							float: right;
						}
						.header-part{
							background-color: $main-blue;
							padding: 7px;
							height: 75px;
							color: #FFF;
								.heading-side{
									float: left;
									width: 330px;
										h2{
											font-size: 16px;
											text-transform: uppercase;
										}
										h5{
											font-size: 11px;
											text-transform: uppercase;
											font-weight: normal;
										}
								}
								.icon-side{
									float: right;
									width: 23px;
									height: 22px;
									background-color: #fff;
									border-radius: 50px;
									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;
										}
								}
						}
						.body-part{
							padding: 7px;
								.feature-chart{
									img{
										width: 100%;
									}
								}
								.featured-data-outer{
									background-color: #231f20;
									padding: 2px;
									margin: 10px 0;
										&.pt1{
											padding-top: 1px;
										}
								}
								.featured-data{
									margin: 0;
									height: 60px;
									background-color: #ececed;
										&.h70{
											height: 70px;
										}
										.featured-data-left{
											padding: 13px 7px;
											float: left;
												h1{
													font-size: 28px;
													color: #231f20;
													font-weight: normal;
												}
										}
										.featured-data-right{
											float: right;
											width: 120px;
											text-align: center;
											background-color: #231f20;
											padding-left: 2px;
												h3{
													text-transform: uppercase;
													font-size: 16px;
													padding: 10px 0;
													background-color: #ececed;
												}
												h4{
													font-size: 11px;
													text-transform: uppercase;
													font-weight: normal;
													padding: 5px 0 4px;
													margin-top: 1px;
													background-color: #ececed;
												}
										}
										.fd-sec{
											width: 33.33%;
											float: left;
											text-align: center;		
											background-color: #231f20;
												&:nth-of-type(1), &:nth-of-type(2){
													padding-right: 2px;
												}
												span{
													font-size: 22px;
													display: block;
													width: 100%;
													background-color: #ececed;
														.red{
															color: #d44126;
														}
														.green{
															color: #61a846;
														}
														.yellow{
															color: #f0cd16;
															font-size: 14px;
															position: relative;
															top: -3px;
														}
												}												
												h3{
													text-transform: uppercase;
													font-size: 16px;
													padding: 0 0 3px;													
													background-color: #ececed;
														&.h-set{
															height: 47px;
															padding: 15px 0;
															color: #FFF;
																&.red{
																	background-color: #d44126;
																}
																&.green{
																	background-color: #8cc047;
																}
																&.yellow{
																	background-color: #f0cd16;
																	color: #000;
																}
														}
												}
												h4{
													font-size: 11px;
													text-transform: uppercase;
													font-weight: normal;
													padding: 5px 0;
													margin-top: 2px;
													background-color: #ececed;
												}
										}
								}
								.feature-data-table{
									table{
										width: 100%;
											thead{
												background-color: $main-blue;
												color: #FFF;
												font-size: 12px;
												font-weight: normal;
												text-align: right;
													th{
														padding: 3px 5px;
														font-weight: normal;
															&:nth-of-type(1){
																text-align: left;
															}
													}
											}
											tbody{
												color: #231f20;
												font-size: 12px;
												font-weight: normal;
												text-align: right;
													tr{
														&:nth-of-type(odd){
															background-color: #dcdcde;
														}
														td{
															padding: 8px 5px;
															font-weight: normal;
																&:nth-of-type(1){
																	text-align: left;
																}
														}
													}
											}
									}
								}
								.feature-hl-outer{
									background-color: #231f20;
									padding: 2px;
									margin: 5px 0 10px;
										.feature-hl{										
											height: 54px;
												.hl-text{
													font-size: 11px;
													text-transform: uppercase;
													width: 10%;
													text-align: center;
													float: left;
													padding: 21px 0;
													background-color: #ececed;
												}
												.hl-data{
													float: left;
													width: 40%;
													text-align: right;
													background-color: #231f20;
													padding-left: 1px;
														&.bo-r{
															padding: 0 1px;
														}
														h5{
															font-size: 11px;
															text-transform: uppercase;
															font-weight: normal;
															background-color: #ececed;
															padding: 0 7px 12px;
														}
														h3{
															font-size: 16px;
															text-transform: uppercase;
															color: #231f20;
															background-color: #ececed;
															padding: 12px 7px 0;
														}
												}
										}
								}
						}
				}
		}
}