// Report Left Area

.report-right{
	float: right;
	width: 340px;
	margin: 5px 0 0;
		&.page-02{
			width: 340px;
			margin-top: 12px;
		}
		.right-yellow{
			background-color: rgba(235, 206, 128, 0.4);
			padding: 5px 10px;
			margin-bottom: 8px;
			width: 380px;
				.chart-title{
					@include text-style($purple, 700, 19px, $sarif);
					line-height: 25px;
						&.lh-24{
							line-height: 24px;
						}
				}
				.map-sec{
					padding: 10px 0;
					width: 350px;
				}
				.source-note{
					@include text-style($black, 400, 10px, $sans);
					font-style: italic;
					margin: 3px 0 0 0;
				}
		}
		.right-gray{
			background-color: $lt-gray;
			padding: 5px 10px;
			margin-bottom: 8px;
				.chart-title{
					@include text-style($purple, 700, 19px, $sarif);
					line-height: 25px;
						&.lh-24{
							line-height: 24px;
						}
				}
				h5{
					@include text-style($black, 400, 11px, $sans);
					border-bottom: 1px solid $black;
					text-transform: uppercase;
				}
				.labels-area-outer{
					margin: 5px 0 0;
						.labels-area{
							&:nth-of-type(2){
								float: right;
							}
							width: 47%;
							float: left;
								&.full-area{
									width: 100%;
									float: none;
										.change-area{
											margin: 4px 0 0;
										}
										.chart-area{
											margin-bottom: 5px;
										}
								}
								.chart-area{
									margin-bottom: 5px;
										img{
											width: 100%;
										}
								}
								.value{
									@include text-style($purple, 400, 29px, $sarif);
									line-height: 25px;
								}
								h4{
									@include text-style($black, 700, 12px, $sans);
									text-transform: uppercase;
									margin: 3px 0;
								}
								h5{
									@include text-style($black, 400, 11px, $sans);
									border-bottom: 0;
									float: left;
									margin: 3.5px 0;
										&.web{
											margin: 2.5px 0;
										}
								}
								.change-area{
									margin: 2px 0 8px;
									float: left;
										.change{
											@include text-style($black, 400, 11px, $sans);
											text-transform: uppercase;
											float: left;
												&.border{
													border-right: 1px solid #343440;
													border-left: 1px solid #343440;
													margin: 0 5px;
													padding: 0 5px;
												}
												span{
													width: 12px;
													height: 9px;
													display: inline-block;
													background-image: url("../img/arrows-up-down.png");
													position: relative;
													top: 1px;
														&.arrow-up{
															background-position: left bottom;
														}
														&.arrow-down{
															background-position: left top;
														}
												}
										}
								}
						}
				}
				.gray-labels-area-outer{
					.labels-area{
						width: 47%;
						float: left;
							&:nth-of-type(2){
								float: right;
							}
							.value{
								@include text-style($gray, 400, 22px, $sarif);
								line-height: 25px;
							}
					}
				}
				.source-note{
					margin-top: 10px;
				}
		}
		.source-note{
			@include text-style($black, 400, 10px, $sans);
			font-style: italic;
			margin: 3px 0 0 0;
		}
}