@font-face {
  font-family: "robo";
  src: url("../fonts/roboto.woff") format("woff"),
  url("../fonts/roboto.woff2") format("woff2");
}

body
{
margin:0;
padding:0;
font-family: "robo", sans-serif;
font-size:10pt;
}

svg
{
overflow:hidden;
}

#container
{
width:98vw;
margin:5px auto 0 auto;
}

#quelle
{
font-size:8pt;
margin-top:15px;
}

.names
{
text-anchor:end;
stroke:none;
fill:#e6e6e6;
font-size:6pt;
cursor:default;
pointer-events:none;
display:none;
}

.highlight
{
font-size:14pt;
fill:#000000;
font-weight:bold;
}

.marker_left, .marker_right
{
pointer-events:none;
stroke-width:1px;
stroke:#d3d3d3;
stroke-dasharray:6,3;
display:none;
}

#infos, #gemsmall
{
pointer-events:none;
stroke:none;
fill:#000000;
font-size:9pt;
text-anchor:start;
}

.bg
{
pointer-events:none;
fill:#ffffff;
}

.infos_right, .infos_left
{
pointer-events:none;
stroke:none;
fill:#999999;
font-size:8pt;
text-anchor:end;
display:none;
}

#hoft
{
text-anchor:start;
}

.gems
{
stroke-width:1px;
shape-rendering:crispEdges;
}

#intro
{
font-size:10pt;
margin:5px 0 35px 5px;
}

#heading
{
font-size:18pt;
text-align:left;
padding:20px 0 20px 0;
}

.axis path, line
{
fill:none;
stroke:#d3d3d3;
shape-rendering:crispEdges;
}

.axis text 
{
font-size:7pt;
fill:#d3d3d3;
}

@media screen and (min-width:480px)
{
.marker_right, .infos_right
{
display:block;
}

#hoft
{
display:none;
}
}

@media screen and (min-width:640px)
{
.marker_left, .infos_left, #hoft
{
display:block;
}
}

@media screen and (min-width:760px)
{
#container
{
width:95vw;
}

#intro
{
margin:5px 0 35px 0;
}

.names
{
display:block;
}
}