body{
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Droid Sans","Helvetica Neue",Arial,sans-serif;
	color: rgb(55,55,55);
}
html, body{
	margin: 0;
  padding: 0;
}
svg{
	box-sizing: border-box;
	border: 1px solid rgb(111,111,111);
	border-radius: 2px;
}
.ie-svg{
	height: 567px;
}
.main{
	text-align: center;
}
.holder{
	text-align: center;
	margin: 0 auto;
	max-width: 400px;
  	position: relative;
}
.image-border{
	fill: none;
	stroke: rgb(44,44,44);
	stroke-width: 2;
	width: 398px;
	height: 565px;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.slide-region{
	fill: transparent;
	stroke: none;
	cursor: grab;
}
.slide-region:active{
	cursor: grabbing;
}
.vis-bar{
	fill: rgb(44,44,44);
}
.vis-handle > path{
	fill: rgb(44,44,44);
	stroke: #fff;
	stroke-width: 1;
}
.legend{
	pointer-events: none;
}
.legend text{
	font-family: inherit;
	fill: rgb(55,55,55);
	font-size: 17px;
	font-weight: 600;
}
text.legend-title{
	font-weight:700;
	font-size: 18px;
}
tspan.legend-smaller{
	font-weight: 600;
	font-size: 16px;
}
.rect-a{
	fill: #3d7a3c;
	stroke: rgb(33,33,33);
	stroke-width: 1;
}
.rect-b{
	fill: #619195;
	stroke: rgb(33,33,33);
	stroke-width: 1;
}
.rect-c{
	fill: #b5ac4b;
	stroke: rgb(33,33,33);
	stroke-width: 1;
}
.rect-d{
	fill: #c66171;
	stroke: rgb(33,33,33);
	stroke-width: 1;
}
.circ-b{
	fill: #00a69b;
}
.circ-h{
	fill: #bf4775;
}
.circ-a{
	fill: #00398f;
}
.circ-w{
	fill: #8c95db;
}
.legend-bg{
	fill: rgba(255,255,255,0.9);
	stroke: rgb(44,44,44);
	stroke-width: 0.5;
}