@import '../variables.less';
.ui-mdtrend, .ui-mdstattrend {
	position: relative;
	border: 1px solid @common-border-color;
	padding: @ui-mdtrend-padding;
	overflow: hidden;
	.multiple-chart-header {
		height: @ui-mdtrend-multiple-chart-header-height;
		background: @common-bg-color;
		position: relative;
		text-align: left;
		h2 {
				margin: 0 10px;
				font-size: 14px;
				height: @ui-mdtrend-h2-height;
				line-height: @ui-mdtrend-h2-line-height;
				color: @strong-text-color;
				overflow: hidden;
				a {
			// color: @mdreport-text-color;
				}
				span {
					display: inline-block;
					margin: 4px 0 0 10px;
					height: 8px;
					width: 13px;
					background-repeat: no-repeat;
					background-position: 0 0;
					background-image: url(../../img/Artboard.png);
				}
		}
	}
	.multiple-chart-body {
		position: relative;
		background: @common-bg-color;
		overflow: hidden;
		.credit {
			position: absolute;
			bottom: 12px;
			right: 10px;
			opacity: .6;
		}
		.view-type {
			margin-left: 10px;
			text-align: left;
			li {
				display: inline-block;
				margin-right: 5px;
				width: 12px;
				height: 12px;
				cursor: pointer;
				&.type-area {
						background: url(../../img/trend/chartarea.png) no-repeat;
						background-size: 12px;
				}
				&.type-line {
						background: url(../../img/trend/chartline.png) no-repeat;
						background-size: 12px;
				}
				&.type-column {
						background: url(../../img/trend/chartcolumn.png) no-repeat;
						background-size: 12px;
				}
				&.type-stack {
						background: url(../../img/trend/chartstack.png) no-repeat;
						background-size: 12px;
				}
				&.type-normal {
						background: url(../../img/trend/chartnormal.png) no-repeat;
						background-size: 12px;
				}
			}
		}
		.echarts-tooltip {
			border-radius: 0;
            padding: 0;
            background-color: @ui-mdtrend-tooltip-background-color;
            box-shadow: @ui-mdtrend-tooltip-box-shadow;
            min-width: 150px;
            padding-bottom: 3px;
            .echarts-tooltip-title {
            	background-color: @ui-mdtrend-tooltip-title-background-color;
            	padding: 5px 10px;
            	color: @ui-mdtrend-tooltip-title-color;;
            	margin-bottom: 3px;
            }
            .echarts-tooltip-item {
            	padding: 3px 10px;
            }
            .echarts-tooltip-point-item {
            	span {
            		color:red;
            	}
            }
            .echarts-tooltip-item-desc {
            	padding: 1px 15px;
            }
            .echarts-tooltip-item-warning {
            	padding: 3px 15px;
            	color: #999;
            }
		}
	}
	.trend-error-holder {
		margin: 20px;
		height: 278px;
		line-height: 250px;
		font-size: 15px;
		color: #9a9a9a;
		text-align: center;
	}
}
