.ticks {
	font: 10px sans-serif
}

.track,
.track-inset,
.track-overlay {
	stroke-linecap: round
}

.track {
	stroke: #4abdf0;
	stroke-opacity: 1;
	stroke-width: 2px
}

.track-inset {
	stroke: #c4c4c4;
	stroke-width: 1px
}

.track-overlay {
	stroke-width: 50px;
	stroke: #0000
}

.handle {
	fill: #fff;
	pointer-events: none;
	stroke: #4abdf0;
	stroke-opacity: 1;
	stroke-width: 2px
}

.sliderRange {
	pointer-events: none;
	stroke-width: 2px
}

svg {
	-webkit-user-select: none;
	user-select: none;
	backface-visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	font-family: Lato
}

.svgbackground {
	fill: #fff
}

.graph {
	fill: none;
	stroke-linejoin: round;
	stroke-width: 1px;
	pointer-events: none
}

.graph.line1 {
	stroke-width: 2px
}

.highlight {
	stroke: none
}

.line1 {
	stroke: #4abdf0
}

.line2 {
	stroke: #d8a40e
}

.line3 {
	stroke: #ce693e
}

.line4 {
	stroke: #c4c4c4
}

.axis {
	pointer-events: none;
	color: #c4c4c4;
	font-family: Lato
}

.axis .domain {
	display: none
}

@media (max-width:768px) {
	.axis {
		font-size: 20px
	}
}

.leftAxis {
	text-anchor: end
}

.bottomAxis {
	color: #c4c4c4;
	
		
}

.bottomAxis line {
	display: none
}

@media (max-width:768px) {
	.bottomAxis .even {
		display: none
	}
}

.dateRange {
	fill: #4aa1d4;
	font-size: 11px;
	font-weight: 400
}

@media (max-width:768px) {
	.dateRange {
		font-size: 17px
	}
}

.startRange {
	text-anchor: start
}

.endRange {
	text-anchor: end
}

.instructions {
	text-anchor: left;
	fill: #a2a2a2;
	font-size: 12px;
	font-weight: 200
}

@media (max-width:768px) {
	.instructions {
		font-size: 17px
	}
}

.bubble {
	visibility: hidden;
	text-anchor: left;
	fill: #ededed;
	font-size: 16px
}

.bubble .pole {
	stroke: #4abdf0;
	stroke-width: 1.5px
}

.bubble text {
	fill: #666;
	font-size: 10px;
	font-weight: 400
}

.bubble line {
	stroke: #4abdf0;
	stroke-width: .5px
}

.bubble .stockName {
	letter-spacing: .1em
}

.bubble .stockDate {
	text-anchor: end;
	font-weight: 300
}

.button {
	letter-spacing: .1em;
	font-size: 11px;
	font-weight: 200
}

.button rect {
	pointer-events: none;
	stroke: none;
	height: 26px;
	rx: 13px
}

.button rect.bg {
	cursor: pointer;
	stroke: none;
	pointer-events: all
}

.button text {
	pointer-events: none;
	stroke: none;
	fill: #fff
}

.button.disabled .bg {
	fill: #c4c4c4
}

.button line {
	stroke: #fff
}

.icon {
	pointer-events: none;
	stroke-width: .5px
}

.disabled .removeIcon {
	visibility: hidden
}

.disabled .addIcon,
.enabled .removeIcon {
	visibility: visible
}

.enabled .addIcon {
	visibility: hidden
}

.fill1 {
	fill: #4abdf0
}

.fill2 {
	fill: #d8a40e
}

.fill3 {
	fill: #ce693e
}

.fill4 {
	fill: #c4c4c4
}

.flag.big {
	transform: scale(2)
}

.flag.big.flipped {
	transform: matrix(2, 0, 0, 2, -210, 0)
}

.flag.flipped {
	transform: translate(-100px)
}