.@{noahvPrefixCls}-trend {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
    position: relative;
    .@{noahvPrefixCls}-chart {
    	min-height: 300px;
    	border: none;
    	margin-bottom: 0;
    	padding: 10px 0;
    }
    .trend-detail {
    	.detail-handler {
    		cursor: pointer;
    		.noahv-icon {
    			font-size: 12px;
    			margin-left: 5px;
    			cursor: pointer  !important;

    		}
		}
    	.detail-panel {
    		ul {
    			display: table;
    			width: 100%;
    			li {
		    		list-style: none;
		    		display: table-row;
		    		width: 100%;
		    		color: #999;
		    		height: 40px;
		    		line-height: 40px;
		    		span {
		    			display: table-cell;
		    			border-bottom: 1px solid #EBEBEB;
		    		}
		    		&.detail-title {
		    			color: #666;
		    			.noahv-icon {
		    				cursor: pointer !important;
		    			}
		    		}
		    		&.active {
		    			color: #333;
		    		}
		    	}
    		}
    	}
	}
	
	.trend-tooltip-wrapper {
		min-width: 150px;
		padding-bottom: 3px;
	}
	.trend-tooltip-title {
		padding: 5px 10px;
		color: #000;
		margin-bottom: 3px;
	}
	.trend-tooltip-item {
		padding: 3px 10px;
	}
	.trend-tooltip-item-value {
		color: #333;
	}
    .trend-error-holder {
		margin: 20px;
		height: 278px;
		line-height: 250px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 15px;
		color: #9a9a9a;
		text-align: center;
	}
	.show-loading {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		.mask {
			position: absolute;
			opacity: 0.8;
			background: #fff;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.content {
			position: absolute;
			width: 100%;
			line-height: 360px;
			text-align: center;

		}

	}
}