@font-face { font-family: 'Roboto';
             src: url('https://fonts.googleapis.com/css?family=Roboto');} 

body{
	font-family: 'Roboto', sans-serif;
	font-size: 20px; 
    }

h1 {
    background-color: #ffffcc; 
    height:60px; 
    width: 100%; 
    text-align: center
    }
#zeitstellung {
        margin-top: 50px;
        padding-left: 5px; 
        padding-right: 5px;

}
#ueberschrift { 
                font-size: 50px;
                position: relative; 
                font-weight: 30;
                color: black;
            }
.fixed {
        position: fixed;
        top: 50;
        left: 50;
        z-index: 50;
        }
 #map {
        float: left;  
        padding: 5px; 
        padding-left: 
        120px}
 #selection {
            margin-top: 5px;
            margin: 50px; 
            vertical-align: middle;
            background: rgba(255, 255, 204, .4); 
            font-size: 40px; 
            float:right; 
        } 
#checkFund {
    margin-left: 20px;
}
#radioVar {
    padding-top: 20px;
    margin-left: 20px;
}
#svgmap{
    clip-path: circle(50% at 50% 50%); 
    fill-opacity = 0.8;
}
#radioVar {
    font-size: 40px;
}
#checkFund {
    font-size: 40px;   
}
#radiobuttons {
    padding-left: 80px;
}
#checkboxes {
    padding-left: 80px;
}
#legende {
    background: rgba(255, 255, 204, .5);
}
#legendmap {

    background: rgba(200, 255, 204, .5);
    float:left; /*
    clip-path: polygon(100% 100%, 0 100%, 0 0);*/
}
span.radioTx {
    font-size: 40px;
    text-align: left; 
    padding-top: 50px;
    padding-left: 20px;
    border: 0px;
    width: 2em;
    height: 2em;
}
span.checkTx {
     font-size: 40px;
    text-align: left; 
    padding-top: 50px;
    padding-left: 20px;
    border: 0px;
    width: 2em;
    height: 2em;
}
input[type = "checkbox"] {
    border: 0px;
    width: 2em;
    height: 2em;
}
line {
    stroke: white;
    stroke-width: 1px;
}
fieldset {
	border: none;
}
#beschriftung {
    margin-top:10px;
    font-weight: bold;
    fill: #800000;
    font-size: 30px;
}
.slidecontainer {
    width: 90%;
}
.slider {
    -webkit-appearance: none;
    width: 99%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
   -webkit-transition: .2s;
    transition: opacity .2s;
}
.slider:hover {
    opacity: 1;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #800000;
    cursor: pointer;
}
div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 200px;                    
    height: 30px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}