html, body {height: 100%; width: 100%; float: left; position: absolute; top: 0; left: 0; margin: 0; font-family: Roboto, sans-serif;}
#map { height: 180px; height: 100%;}

.info {max-width: 240px; padding: 6px 8px; font: 14px/16px Roboto, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; }
.info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 18px; color: #555; } .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; }

/*.filter {position: absolute; top: 70px; width: 100%; max-width: 160px; left: 25px; z-index: 1500; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}*/
.filter {position: absolute; top: 10px; width: 100%; height:100px; max-width: 200px; left: 25px; z-index: 1500; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.filter .filterbar { border: 0; -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.65); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.65); box-shadow: 0 1px 5px rgba(0,0,0,0.65);}
.filter .filterbar:first-of-type { margin-bottom: 10px; margin-top: 70px;}
.filter .filterbar:nth-of-type(2) { margin-bottom: 10px;}
.filter .filterbar:last-of-type { margin-top: 10px;}
.filter-item {padding: 0; width: 100%; float: left;}
.filter-item button {text-align:left;font-size: 13px; width: 100%; margin: 0 auto; height: 50px; border-radius: 0; font-weight: 500; background-color: #0089C1; opacity: 0.9; border: 0; border-left-color: #fff; border-bottom: 1px solid #fff;}
/*.filter-item button .fa {font-size: 22px; padding: 10px; position: absolute; top: 5px; left: calc(50% - 20px);}
.filter-item button .text {position: relative; top: 15px;}*/
.filter-item button .fa {font-size: 22px; padding-right: 10px;}

.subfilter {margin: 0; padding: 0; text-align:left;}
.subfilter li {padding: 10px 15px; font-weight: 500; list-style-type: none; background-color: #0089C1; color: #fff; font-size: 12px; opacity: 0.7; text-align: left; position: relative; line-height: 1.1;}
.subfilter li.active:after {position: relative; right: -30px; width: 0; height: 0; border-style: solid; border-width: 13.5px 0 13.5px 20px; border-color: transparent transparent transparent #008ac1; z-index: 1100;}
.subfilter li:hover {cursor: pointer;}

.subfilter .explanation {float: right; width: 20px; height: 20px; position: absolute; right: 5px; top: calc(50% - 7px); z-index: 1200;}
.subfilter .explanation .fa {color: #fff; float: right; height: 100%; width: 100%; font-size: 14px;}
.subfilter .explanation .tooltip {margin-left: 25px;top:-10px;position:absolute;}
.subfilter .explanation .tooltip.wide{width:400px;top:-410px;}
.subfilter .explanation .tooltip.wide .tooltip-arrow {
	top:410px;
}
.subfilter .explanation .tooltip.wide .tooltip-inner {
    max-width: 280px;
}
.subfilter .explanation .tooltip-inner {font-size: 10px; width: 340px; max-width: 340px; top:-10px;text-align: left;}
.subfilter .explanation .tooltip-arrow {position:absolute;top:10px; margin-top:2px; }


.filter-toggle {margin: 0; background-color: #0089C1; float: left; position: absolute; top: 0px; left: 20px; min-height: 54px; padding: 13px 10px; -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.65); -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.65); box-shadow: 0 1px 5px rgba(0,0,0,0.65);}
.filter-toggle .menu-text {color: #fff; font-weight: 700; font-size: 16px; clear: both;}
.filter-toggle .menu-icon .fa {color: #fff; font-size: 24px;}

/*.leaflet-marker-icon, .leaflet-marker-shadow {display: none !important;}*/
.leaflet-tooltip {background-color: transparent !important; opacity: 0.6 !important; border: 0 !important; font-weight: 700 !important; color: #333 !important; -webkit-box-shadow: none !important; -moz-box-shadow: 0 !important; box-shadow: 0 !important;}

.leaflet-popup-content h4 {margin-bottom: 0;}
.leaflet-popup-content img {max-width: 100px; margin: 10px auto;}

.leaflet-label { background: rgb(235, 235, 235); background: rgba(235, 235, 235, 0.81); background-clip: padding-box; border-color: #777; border-color: rgba(0,0,0,0.25); border-radius: 4px; border-style: solid; border-width: 4px; color: #111; display: block; font: 12px/20px Roboto, sans-serif; font-weight: bold; padding: 1px 6px;   position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; white-space: nowrap; z-index: 6;}
.leaflet-label.leaflet-clickable {  cursor: pointer; }
.leaflet-label:before, .leaflet-label:after {  border-top: 6px solid transparent; border-bottom: 6px solid transparent; content: none; position: absolute; top: 5px;}
.leaflet-label:before {border-right: 6px solid black; border-right-color: inherit; left: -10px; }
.leaflet-label:after {border-left: 6px solid black; border-left-color: inherit; right: -10px;}

.leaflet-label-right:before, .leaflet-label-left:after { content: ""; }

.tooltip {display: none; opacity: 1;}

.modal-title {float: left;}


@media (max-width: 1800px) {
    /* CONTENT */
    .filter .container {width: 900px;}
}
@media (max-width: 1366px) {
    /* CONTENT */
    .filter .container {width: 600px;}
}
@media (max-width: 1200px) {
    /* CONTENT */
    .navbar-toggle {display: block !important;}
    .filter .row {display: none;}
    .filter .filterbar.in button {opacity: 1;}

}
@media (max-width: 990px) {
    /* CONTENT */
    .filter .container {width: 100%;}
   /* .filter .filterbar {position: relative; top: 60px; left: 5px; max-width: 150px;}*/
    .filter .filterbar .col-md-3 {width: 100%;}
}
@media (max-width: 769px) {
    /* CONTENT */

}
@media (max-width: 500px) {
    /* CONTENT */

}
@media (max-width: 400px) {
    /* CONTENT */
    .info {max-width: 180px;}
}