body
{
margin:0;
padding:0;
font-family: 'Roboto', sans-serif;
font-size:10pt;
line-height:175%;
}

svg
{
overflow:hidden;
}

#container
{
width:95%;
margin-left:auto;
margin-right:auto;
margin-top:2%;
}

#control
{
width:100%;
text-align:center;
}

#output
{
margin:10px auto 0 auto;
}

#intro, #heading
{
margin:0 auto 15px auto;
width:90%;
text-align:left;
}

#heading
{
font-size:18pt;
}

#footer
{
font-size:8pt;
margin:20px auto 0 auto;
line-height:145%;
width:90%;
}

.divs
{
display:inline-block;
position:relative;
margin:5px 0 0 5px;
border-radius:20px;
background-color:#519cc8;
}

.sw
{
background-color:#f6baa2;
}

.ww
{
background-color:#b1d3e7;
}

#legende
{
width:100%;
margin:2% 0 0 0;
text-align:center;
}

.legende
{
display:block;
font-size:8pt;
}

.legendec
{
display:inline-block;
}

.heading
{
font-size:12pt;
color:#ffffff;
font-weight:bold;
cursor:default;
text-align:center;
width:100%;
}

.bls
{
font-size:9pt;
text-anchor:middle;
cursor:default;
}

.buttons
{
display:inline-block;
padding:5px;
cursor:pointer;
margin:10px 0 10px 0;
font-size:9pt;
border-radius:20px;
}

.buttons:hover, .buttons_hovered
{
background-color:#d3d3d3;
}

.rings
{
fill:none;
stroke:#ffffff;
stroke-width:1px;
stroke-opacity:0.5;
}

.rad_wbt, .wbr
{
stroke-width:5px;
}

.rad_wbt
{
fill:none;
stroke:#000000;
}

.rad_ung
{
stroke:#d6604d;
fill:white;
fill-opacity:0;
stroke-width:2px;
}

.rad_area
{
stroke:none;
fill:#000000;
fill-rule:evenodd;
fill-opacity:0.6;
}

.wbr
{
fill:none;
stroke:#ffffff;
}

.grid
{
stroke-width:1px;
stroke:#ffffff;
stroke-opacity:0.5;
}

#tool
{
font-size:9pt;
line-height:1.8em;
position:absolute;
background-color:rgba(255, 255, 255, 0.95);
padding:1em;
border-radius:20px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events:none;
z-index:5;
}

.ue
{
text-decoration:underline;
font-weight:bold;
}

.wbt_gesamt
{
stroke-width:3px;
stroke:#ffffff;
stroke-dasharray:2,2;
fill:none;
}

.hitbox
{
fill:white;
fill-opacity:0;
}

.labels
{
font-size:7pt;
fill:#ffffff;
stroke:none;
fill-opacity:0.5;
}

.arc
{
visibility:hidden;
fill:none;
stroke:none;
}

a:link
{
color:#000000;
}

a:visited
{
color:#000000;
}

a:hover
{
color:#000000;
background-color:#8c8c8c;
color:#ffffff;
}

a:active
{
color:#000000;
}