@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700|PT+Sans:400,400italic,700&subset=latin,cyrillic);

.chart-tech2018 {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
}

.chart-tech2018 .linechart {
	margin-bottom: 15px;
}
.chart-tech2018 .linechart .rect-background {
	fill: gray;
	opacity: 0;
	cursor: help;
}
.chart-tech2018 .linechart .area {
	fill-opacity: .1;
	stroke: none;
}
.chart-tech2018 .linechart .line {
	fill: none;
	stroke-width: 2px;
}
.chart-tech2018 .linechart .zero-line {
	fill: none;
	stroke-width: 1px;
	stroke: black;
}
.chart-tech2018 .linechart .tech-name {
	font-family: "PT Sans Narrow", "PT Sans", sans;
	font-size: 16px;
}
.chart-tech2018 .linechart .text-label {
	font-family: "PT Sans Narrow", "PT Sans", sans;
	font-size: 14px;
	fill: #808080;
}

#chart-tooltip {
	font-family: PT Sans Narrow, PT Sans, Arial, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	pointer-events: none; 
	background: black;
	position: absolute;
	top: 30px; 
	left: 30px;
	padding: 10px 15px 15px;
	display: none;
}
#chart-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 14px;
	margin-left: 0;
	border-width: 6px;
	border-style: solid;
	border-color:  #000 transparent transparent transparent;
}

#chart-tooltip .tech-name {
	font-size: 18px;
	color: white;
	padding-bottom: 2px;
	margin-bottom: 4px;
	border-bottom: 1px solid #222;
}
#chart-tooltip .tech-info {
	font-size: 14px;
	color: #808080;
}
#chart-tooltip .tech-info .row {
	display: flex;
	justify-content: space-between;
}
#chart-tooltip .tech-info .value-label {
	margin-left: 5px;
	text-align: right;
	color: #ccc;
}
#chart-tooltip .tech-info .diff-label {
	min-width: 40px;
	margin-left: 5px;
	text-align: right;
	font-style: italic;
}

.chart-lang-mobile { display: none; }

@media screen and (max-width: 768px) {
	.chart-lang-desktop { display: none; }
	.chart-lang-mobile { 
		display: block; 
		margin: 0 15px 0 20px;
	}
}