body {
    margin: 0px;
    padding: 0px;
    background: #fafafa; 
}

body, div {
    font-family: Frutiger, 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;   
}

#map {
    height: 100%;
}

#popup {
    position: absolute;
    width: 200px;
    padding: 10px; 
    color: #333333;    
    font-size: 16px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); 
    background-color: white; 
    border-radius: 6px;    
    border-color: #e0e0e0;
    border-width: 1px;  
    border-style: solid; 
}

#searchBox {
    border-radius: 3px;
    /*background-color: #fafafa;*/
    color: #333333;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    position: absolute;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    top: 15px;
    left: 15px;
    width: 500px;
    /*height: calc(100% - 30px);*/
    /*height: 230px;*/
    overflow-y: hidden;
    max-width: calc(100% - 30px);
    /*max-height: calc(100% - 30px);*/
}

#searchCard {
    background-color: #fafafa;
    margin: 0px;
}

.card .header h2 {
    color: #333333;
}

.card .body {
    padding: 0px 20px 1px 20px;
}

/*
.card .header {
	padding: 10px;
}
*/

/* Ist nicht notwendig, falls im Code: Color.THEME verwendet wird.
Wenn man aber eine andere Color verwendet, wird der Arrow blau.*/
/* Chrome */
.card a:-webkit-any-link {
	color: #202020;
}
/* Firefox */
.card *|*:link {
    color: #202020;
}

#suggestBoxDiv {
    /*padding: 20px 20px 0px 20px;*/
}

.field-group input, .field-group textarea {
    font-family: Frutiger, 'Fira Sans', sans-serif !important;   
    color: 333333 !important;
}

.radio-option.checked label:after, .radio-option.with-gap.checked label:after {
	background-color: #F44336;
	border-color: #F44336; 
}

.radio-option:not(.checked) label, .radio-option.checked label {
	font-family: Frutiger, 'Fira Sans', sans-serif !important;   
}

#geolocation {
	position: fixed;
	left: 10px;
	bottom: 10px; 
}