// 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{
									border: 1px solid #231f20;
									margin: 10px 0;
									height: 60px;
										&.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;
											border-left: 1px solid #231f20;
												h3{
													text-transform: uppercase;
													font-size: 16px;
													border-bottom: 1px solid #231f20;
													padding: 10px 0;
												}
												h4{
													font-size: 11px;
													text-transform: uppercase;
													font-weight: normal;
													padding: 4px 0;
												}
										}
										.fd-sec{
											width: 33.33%;
											float: left;
											text-align: center;
												&:nth-of-type(1), &:nth-of-type(2){
													border-right: 1px solid #231f20;
												}
												span{
													font-size: 22px;
														.red{
															color: #d44126;
														}
														.green{
															color: #61a846;
														}
														.yellow{
															color: #f0cd16;
															font-size: 14px;
															position: relative;
															top: -3px;
														}
												}												
												h3{
													text-transform: uppercase;
													font-size: 16px;
													border-bottom: 1px solid #231f20;
													padding: 0 0 3px;
														&.h-set{
															height: 48px;
															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: 4px 0;
												}
										}
								}
								.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{
									border: 1px solid #231f20;
									margin: 5px 0 10px;
									height: 54px;
										.hl-text{
											font-size: 11px;
											text-transform: uppercase;
											width: 10%;
											text-align: center;
											float: left;
											padding: 20px 0;
											border-right: 1px solid #231f20;
										}
										.hl-data{
											float: left;
											width: 40%;
											text-align: right;
											padding: 11px 7px;
												&.bo-r{
													border-right: 1px solid #231f20;
												}
												h5{
													font-size: 11px;
													text-transform: uppercase;
													font-weight: normal;
												}
												h3{
													font-size: 16px;
													text-transform: uppercase;
													color: #231f20;
												}
										}
								}
						}
				}
		}
}