// Indicator Detail Area 

.indicator-detail-area{
	margin: 0 40px 40px;
	background-color: #ffffff;
	box-shadow: 0 0 10px #292929;
	display:none;
	position:relative;
		.pin-icon{
			transition: inherit;
		}
	    .indicator-detail-area-set {
			padding: 55px 12px 12px 12px;
			font-size: 12px;
				.indi-list-view{
					width: 100%;
						.entry-bar{
							float:left;
							width: 100%;
						}
						.top-head-tb{
							float: left;
							width: 100%;
						}
						.cont-body-tb {
							float: left;
							max-height: 337px;
							overflow-y: scroll;
							width: 100%;
						}
						.top-head-tb table, .cont-body-tb table{
							width: 100%;
						}
						.top-head-tb table.list-vie-crt, .cont-body-tb table.list-vie-crt{
							width: 100%;
						}
						.list-vie-crt{
							tr{
								th, td{
									width: 18%;
									float: left;
								}
								th{
									font-size: 12px;
									text-transform: uppercase;
									color: #ffffff;
									padding: 1px 3px;
									text-align: right;
										span{
											display: inline-block;
											&.icon{
												background-color: #fff;
												background-image: url("../img/sprite.svg");
												background-repeat: no-repeat;
												text-align: center;
												width: 22px;
												height: 23px;
												margin-bottom: -3px;
												margin-right: 5px;
												border-radius: 50%;
													&.indi-icon-default{
														background-position: -136px 1px;
													}
													&.indi-icon-yoy{
														background-position: -191px 1px;
													}
													&.indi-icon-yoy-per{
														background-position: -163px 1px;
													}
													&.indi-icon-mom{
														background-position: -246px 1px;
													}
													&.indi-icon-mom-per{
														background-position: -218px 1px;
													}
											}
											&.icon-seasonal{
												margin-right: 5px;
												position: relative;
												top: -4px;
													img{
														width: 11px;
													}
											}
											&.text-set{
												max-width: 200px;
												overflow: hidden;
												position: relative;
												text-overflow: ellipsis;
												top: -1px;
												white-space: nowrap;
													@media only screen and (max-width: 1520px){
														max-width: 125px;
													}
											}	
										}
										&:nth-of-type(1){
											width: 82px;
											padding: 6px 3px;
										}
										&:nth-of-type(6){
											padding-right: 22px;
										}
								}
								td{
									font-size: 12px;
									padding: 5px 3px;
									text-align: right;
										&:nth-of-type(1){
											width: 82px;
										}
								}
							}
						}
						table{
							width: 100%;
								thead{
									background-color: $main-blue;										
								}
								tbody{
									tr{
										&:nth-of-type(even){
											background-color: #e0e0e0;
										}
										&:hover{
											background-color: #B2E0FF;
											cursor: pointer;
										}										
									}
								}
						}
				}
				.full-list-view{
					width: 100%;
					max-height: 400px;
					overflow-y: scroll;
						table{
							width: 100%;
								thead{
									th{
										&.indi-bg{
											background-color: #e0e0e0;
											padding: 5px 0;
											text-transform: uppercase;
												span{
													display: inline-block;
														&.icon{
															background-color: none;
															background-image: url("../img/sprite.svg");
															background-repeat: no-repeat;
															text-align: center;
															width: 22px;
															height: 23px;
															margin-bottom: -7px;
															margin-right: 5px;
															border-radius: 50%;
																&.indi-icon-default{
																	background-position: -136px 1px;
																}
																&.indi-icon-yoy{
																	background-position: -191px 1px;
																}
																&.indi-icon-yoy-per{
																	background-position: -163px 1px;
																}
																&.indi-icon-mom{
																	background-position: -246px 1px;
																}
																&.indi-icon-mom-per{
																	background-position: -218px 1px;
																}
														}
												}
										}
										&.blue-bg-light {
											background-color: #60a7d8;
											font-size: 12px;
											text-transform: uppercase;
											font-weight: normal;
											color: #ffffff;
											padding: 5px 0;
										}
										&.orange-bg-light {
											background-color: #dc6633;
											font-size: 12px;
											text-transform: uppercase;
											font-weight: normal;
											color: #ffffff;
											padding: 5px 0;
										}
										&.blue-bg-dark {
											background-color: #328dcc;
											font-size: 11px;
											text-transform: uppercase;
											color: #ffffff;
											padding: 2px 5px;
											vertical-align: bottom;
											cursor: pointer;
											font-weight: normal;
											text-align: right;
										}
										&.orange-bg-dark {
											background-color: #b34f29;
											font-size: 11px;
											text-transform: uppercase;
											color: #ffffff;
											padding: 5px 5px 2px 5px;
											vertical-align: bottom;
											cursor: pointer;
											font-weight: normal;
											text-align: right;
										}
									}
								}
								tbody{
									tr{
										&:nth-of-type(even){
											background-color: #e0e0e0;
										}
										&:hover{
											background-color: #B2E0FF;
										}
										td{
											text-align: right;
											padding: 3px 5px;
										}
									}
								}
						}
				}
				.line-chart-show-area{
					background-color:#f4f4f4;
					padding:10px;
						img{
							width:100%;
							height:auto;
						}
				}
				.map-chart-show-area{
					background-color:#f4f4f4;
					padding:10px;
						#map_title{
							font-size: 15px;
							font-weight: bold;
							padding-bottom: 15px;
								span{
									font-weight: normal;
									display: inline;
								}
						}
						img{
							width:40%;
							height:auto;
						}
						span{
							font-size:14px;
							width: 50px;
							display: block;
								&.line-space{
									margin:0 10px;
								}
						}
				}
				.entry-bar {
					background-color: #949494;
					font-size: 11px;
					color: #ffffff;
					font-style: italic;
					padding: 7px 10px;
					margin:0 0 12px 0;
					position: relative;
						.for-disable{
							cursor: no-drop;
							height: 31px;
							left: 0;
							position: absolute;
							top: 0;
							width: 100%;
							z-index: 1;
						}
						.current-period {
							float: left;
							margin-right: 30px;
							input[type="checkbox"] {
								margin: 3px 5px 0 0;
								float: left;
							}
							.period-text {
								float: left;
								margin: 3px 0 0 0;
									a{
										color: #FFF;
										text-decoration: underline;
									}
							}
						}
					.zoom-area{
						float:left;
						font-style:normal;
						margin-right:20px;
						.zoom-text{
							float:left;
							margin-right:10px;
							margin-top:6px;
						}
						.zoom-minus{
							background: #000 none repeat scroll 0 0;
							cursor: pointer;
							float: left;
							font-size: 20px;
							font-weight: bold;
							margin: -7px 5px -7px 0;
							padding: 6px 10px 8px;
								&:hover{
									background:#1c81c7;
								}
						}
						@media screen and (-webkit-min-device-pixel-ratio:0) {
							.zoom-minus{
								padding: 8px 10px 8px;
							}						
						}
						.zoom-plus{
							background: #000 none repeat scroll 0 0;
							cursor: pointer;
							float: left;
							font-size: 20px;
							font-weight: bold;
							margin: -7px 5px -7px 0;
							padding: 6px 10px 8px;
								&:hover{
									background:#1c81c7;
								}
						}
						@media screen and (-webkit-min-device-pixel-ratio:0) {
							.zoom-plus{
								padding: 8px 10px 8px;
							}
						}
					}
					.edit-color{
						float:left;
						text-decoration:underline;
						color:#FFF;
						margin-top:6px;
						text-transform:uppercase;
						margin-right:15px;
						cursor:pointer;
						&:hover{
							color:$black;
						}
					}
					.color-area{
						margin-right:20px;
						float:left;
						.color{
							background: #9ce7f9;
							border: 1px solid #fff;
							width: 45px;
							float: left;
							height: 25px;
							margin-right: 10px;
							&.color-one{
								background: #9ce7f9;
							}
							&.color-two{
								background: #88d0e7;
							}
							&.color-three{
								background: #73bad4;
							}
							&.color-four{
								background: #5fa3c2;
							}
							&.color-five{
								background: #4b8caf;
							}
							&.color-six{
								background: #36769d;
							}
							&.color-seven{
								background: #225f8a;
							}
						}
						.color-text{
							font-style:normal;
							margin-top:6px;
							float:left;
						}
					}
					.colors-set{
						float:left;
					}
				}
				.box-area{
					float:left;
					margin-right:1px;
					margin-bottom:1px;
					position:relative;
					width:calc(20% - 1px);
					.top-icon{
						background-image:url("../img/sprite.svg");
						position:absolute;					
						width:10px;
						height:10px;
						&.cross{
							background-position:-257px -112px;
							top:8px;
							right:8px;
						}
						&.pin{
							background-position:-225px -112px;
							top:8px;
							right:43px;
						}
					}
					.e-color{
						color: #FFF;
						font-size: 11px;
						position: absolute;
						right: 25px;
						top: 8px;
					}
					.head{
						padding: 5px 55px 5px 10px;
						color:#FFF;
						font-size:14px;
						line-height:16px;
						height:58px;
						&.padding-set{
							padding:7px 9px 8px;
							line-height:15px;
						}
						&.black-text{
							color:#000;
						}
						&.blue{
							background-color:#1c81c7;
						}
						&.green{
							background-color:#8ebf49;
						}
						&.orange{
							background-color:#d34000;
						}
						&.red{
							background-color:#009aa5;
						}
						&.royal-blue{
							background-color:#4a2ef5;
						}
						span{
							width: 10px;
							height: 30px;
							float: left;
							top: 6px;
							position: relative;
							left: 0;
							margin-right: 5px;
								&.seasonal-icon{
									background-image:url("../img/sprite.svg");
										&.white{
											background-position: -180px -112px;
										}
										&.black{
											background-position: -202px -112px;
										}
								}
						}
					}
					.box-body{
						padding:10px;
						color:#FFF;
						font-size:12px;
						&.black-text{
							color:#000;
						}
						&.blue{
							background-color:#61a7d8;
						}
						&.green{
							background-color:#b0d280;
						}
						&.orange{
							background-color:#e07a4d;
						}
						&.red{
							background-color:#0db8c3;
						}
						&.royal-blue{
							background-color:#7f6cee;
						}
						select{
							margin:10px 0px;
								&.disable{
									&:hover{
										cursor: no-drop;
									}
								}
								option{
									background:#FFF;
									color:#000;
									padding:0 5px;
									border-bottom:1px solid #ccc;
									&.head{
										font-weight:bold;
										background:#b4b4b4;
										color:#fff;
										font-size:13px;
										height:auto;
									}
								}
						}
						.chart-area{
							width:auto;
							float:left;						
							margin:0;
							width: 113px;
							position: relative;
								.for-disable{
										cursor: no-drop;
										height: 27px;
										left: 0;
										position: absolute;
										width: 98%;
										z-index: 1;
								}
								a {
									&:hover{
										cursor: pointer;
									}
									&:last-child {
										margin-right:0;
									}
								}
								.chart{
									background-image:url("../img/sprite.svg");
									width: 27px;
									height: 27px;
									float:left;
									display:block;
									border: 1px solid #fff;							
									&.line-chart{
										background-position: -162px -144px;
											&:hover{
												background-position: -162px -170px;
											}
										&.active{
											background-position: -162px -170px;
										}
									}
									&.bar-chart{
										background-position: -189px -144px;
											&:hover{
												background-position: -189px -170px;
											}
										&.active{
											background-position: -189px -170px;
										}
									}
									&.area-chart{
										background-position: -215px -144px;
											&:hover{
												background-position: -215px -170px;
											}
										&.active{
											background-position: -216px -170px;
										}
									}
									&.map-chart{
										background-position: -242px -144px;
										margin-right:0px;
											&:hover{
												background-position: -242px -170px;
											}
											&.active{
												background-position: -242px -170px;
											}
									}
								}
								@media only screen and (max-width: 1863px){
									width: 205px;
								}
						}
						.input-area{
							margin:9px 9px 0 0;
							float:left;
							input[type="checkbox"]{
								float:left;
							}
							.text{
								float:left;
								font-size:11px;
								font-style:italic;
								margin:0 0 0 2px;
							}
						}
					}
				}
				#map-show{
					display:none;
				}
		}
		.pin-icon{
			position:relative;
			float:right;
			width:35px;
			height:49px;
			background-image:url("../img/sprite.svg");
			background-position:-35px -211px;
			cursor:pointer;
			&:hover{
				background-position:-35px -262px;
			}
		}
		.cross-indi-chart{
			position:relative;
			float:right;
			width:35px;
			height:49px;
			background-image:url("../img/popup-cross-sprite.svg");
			background-position:-72px -200px;
			cursor:pointer;
			margin-left: 1px;
			&:hover{
				background-position:-72px -250px;
			}
		}
		.indi-download-icon{
			position:relative;
			width:35px;
			height:49px;
			background-image:url("../img/sprite.svg");
			background-position:0px -211px;
			float:right;
			cursor:pointer;
			margin-right: -1px;
			&:hover{
				background-position:-0px -262px;
			}
			.download-new-btn-menu{
			  position: absolute;
			  z-index: 9999;
			  top: 50px;
			  right: 0;
			  background-color: $menu-drop-gray;
			  width: 180px;
			  font-size: 12px;
			  font-weight: normal;
			  padding: 0 0 10px;
			  display: none;
			  .heading{
				font-size: 12px;
				font-weight: bold;
				text-transform: uppercase;
				padding: 10px 0 0 10px;
				text-align: left;
				color: $white;
			  }
			  ul{
				margin: 5px 0 0 0;
				line-height: 20px;
				li{
				  list-style: none;
				  position: relative;
				  a{
					text-decoration: none;
					text-align: left;
					padding-left: 14px;
					border-bottom: none;
					text-transform: capitalize;
					height: auto;
					line-height: inherit;
					color: $white;
					display: block;
					&:hover{
					  background-color: #1f80c3;
					}
				  }
				  .dashboard-sub-menu.mainmap {
					position: absolute;
					top: -5px;
					right: 100%;
					z-index: 21;
					width: 140px;
					padding: 0 0 10px;
					font-size: 12px;
					font-weight: normal;
					color: #ffffff;
					background-color: rgba(102, 102, 102, 0.95);
					display: none;
					.tab-menu-heading {
						font-size: 12px;
						font-weight: bold;
						text-transform: uppercase;
						padding: 10px 0 0 10px;
						text-align: left;
					}
				  }
				  &:hover{
					  .dashboard-sub-menu.mainmap {
						  display: block;
					  }
				  }
				}
			  }
			}
		}
		.tweet-icon{
			float: right;
			width: 35px;
			height: 49px;
			background: #aaa;
			color: #fff;
			font-size: 24px;
			padding: 10px 0;
			text-align: center;
			margin-right: 1px;
				&:hover{
					background-color: $main-blue;
				}
		}
}
@media screen and (max-width: 1310px){
	.indicator-detail-area {
		.indicator-detail-area-set{ 
			.entry-bar{
				padding:7px 10px 7px 10px;
				.color-area{
					margin-bottom:5px;
					margin-right:5px;
						.color{
							width:20px;
							margin-right: 5px;
						}
				}
				.edit-color{
					margin-bottom: 5px;
				}
			}
		}
	}
}
@media screen and (max-width: 1280px){
	.indicator-detail-area{ 
		.indicator-detail-area-set{ 
			.box-area{
				width:350px;
			}
		}
	}
}
@media screen and (max-width: $standard-target-width){
	.indicator-detail-area{
		margin:0 10px 40px;
	.indicator-detail-area-set{
			.entry-bar{
				.zoom-area{
					margin-bottom: 15px;
					margin-right:0px;
					margin-top:10px;
				}
				.colors-set{
					width:100%;
				}
			}
	}
	}
}
@media screen and (max-width: $ipad){
	.indicator-detail-area{ 
		.indicator-detail-area-set{
			.box-area{
				width:49%;
			}
			.entry-bar{
				.color-area{
					width:150px;
				}
				.edit-color{
					 width: 100%;
					 margin-bottom:15px;
				}
			}
		}
	}
}
@media screen and (max-width: $mobile-landscape){
	.indicator-detail-area{ 
		.indicator-detail-area-set{ 
			.entry-bar{ 
				.current-period{
					width: 40%;
				}
			}
		}
	}
}
@media screen and (max-width: $mini-mobile-landscape){
	.indicator-detail-area{
		.indicator-detail-area-set{
			.box-area{
				margin-bottom:1px;
				width:100%;
					.box-body{
						 .chart-area{
							width:113px;
							float:none;
						 }
						 .input-area{
							margin:9px 9px 0 0;
						 }
					}
			}
		}
	}
}