.stacked-area-container {
    width:100%;
    height:400px;
}   
 .stacked-area {
    width:100%;
    height:100%;
}

.stacked-area .axis text {
  font: 10px sans-serif;
}

.stacked-area .axis path,
.stacked-area .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.stacked-area .legend {
	position: absolute;
	left: 50px;
    top: 0px;
	padding: 5px 10px;
}
.modal .stacked-area .legend {
	top: -25px;
	left: 0px;
    bottom:unset;
}
.stacked-area .legend .title {
	margin-bottom: 2px;
	font-weight: 900;
}
.stacked-area .legend .item {
	font-size: .75em;
    color:#888;
    float:left;
    padding-left:10px;
}
.stacked-area .legend .swatch {
	width: 10px;
	height: 10px;
	margin-top: 3px;
	float: left;
	margin-right: 5px;
}

/*TIP*/
.stacked-area .tip {
	position:absolute;
	display:table;
	background-color: hsla(0,0%,100%,.8);
	padding: 10px;
	border-radius: 5px;
	font-size: 0.8em;
	width: 180px;
	height:30px;
	pointer-events:none;
	color:#666;
}
.stacked-area .tip .year {
	font-weight: 900;
	font-size: 1.25em;
	margin-bottom: 2px;
}
.stacked-area .tip .swatch {
  width: 11px;
  height: 11px;
  float: left;
  margin-top: 6px;
  margin-right: 4px;
}
.stacked-area .select {
    position:absolute;
    display:block !important;
    bottom:-15px;
}
.stacked-area .select.left {
    left:0;
}
.stacked-area .select.right {
    right:0;
}
.modal .stacked-area .select {
	top: -45px;
	right: 0;
}