.reachability-control-expand-button { font-size: 18rem; font-weight: bold; }
.leaflet-touch .reachability-control-expand-button { font-size: 22rem; }
.reachability-control-range-list { font: normal 14rem Maps_Bold, Arial; }
.reachability-control-settings-container { background: #fff; padding: 12rem 12rem 12rem 12rem; height: 140rem; min-width: 203rem;  }
.reachability-control-settings-container select { float: right; padding-top: 1rem; margin-top: -2rem; border: 1rem solid #B9005F; color: #B9005F; background-color: #FFFFFF; border-radius: 0; }
.leaflet-left { left: 50%; transform: translate(-50%, 0%);  margin-top: 20rem; }
.container { background-color: #EEEEEE; }

.reachability-control-collapse-button { display: block; font: normal 14rem Maps_Bold, Arial; padding: 10rem; border: 0; z-index: 8; white-space: nowrap; background-color: #FFFFFF; color: #333333; background-color: #F5F5F5; }
.reachability-control-settings-block-container { display: block; margin-bottom: 10rem; padding-bottom: 10rem; border-bottom: 1rem dotted #757575; }
.reachability-control-error, .leaflet-touch .reachability-control-error { border-color: #B9005F; color: #B9005F; box-shadow: 0 1rem 5rem rgba(0,0,0,0.65); }
.reachability-control-range-title { font-weight: bold; margin: 0 5rem 5rem 0; display: inline-block;  color: #FFFFFF; }
.reachability-control-show-range-interval { padding-left: 1rem; margin-top: 2rem; float: left; }
.reachability-control-settings-container label { padding-left: 1rem; font: normal 14rem Maps_Bold, Arial; margin-right: 8rem; }
.reachability-control-hide-content { display: none; }

.leaflet-bar button.reachability-control-settings-button { display:  inline-block !important; width: 38rem; height: 38rem; border-radius: 0; margin-right: 17rem; border: 1rem solid #CCCCCC; text-align: center; cursor: pointer; color: #757575; font-size: 22rem; box-shadow: none; }
.leaflet-bar button.reachability-control-settings-button:last-child { margin-right: 0rem; }
.leaflet-bar button.reachability-control-active, .leaflet-touch .leaflet-bar button.reachability-control-active, .leaflet-bar button.reachability-control-active a, .leaflet-touch .leaflet-bar button.reachability-control-active a { border-color: #B9005F; color: #B9005F; } 

.leaflet-bar button.export, .leaflet-bar button.export:focus { background-image: url('../_knop/reach_export_zwart.svg'); box-shadow: none; border: 0; float: right; margin-right: 10rem; display:none; width: 20rem; height: 20rem; background-color: #FFFFFF; }
.leaflet-bar button.fa-pencil { background-image: url('../_knop/reach_draw_zwart.svg'); }
.leaflet-bar button.fa-trash { background-image: url('../_knop/reach_delete_zwart.svg'); }
.leaflet-bar button.fa-road { background-image: url('../_knop/reach_distance_zwart.svg'); }
.leaflet-bar button.fa-clock-o { background-image: url('../_knop/reach_time_zwart.svg'); }
.leaflet-bar button.fa-car { background-image: url('../_knop/reach_car_zwart.svg'); }
.leaflet-bar button.fa-ebike { background-image: url('../_knop/reach_ebike_zwart.svg'); }
.leaflet-bar button.fa-bicycle { background-image: url('../_knop/reach_bicycle_zwart.svg'); }
.leaflet-bar button.fa-male { background-image: url('../_knop/reach_walk_zwart.svg'); }
.leaflet-bar button.reachability-control-settings-button, .leaflet-bar button.reachability-control-settings-button:focus { background-color: #FFFFFF; }

.leaflet-bar button.export.reachability-control-active { background-image: url('../_knop/reach_export_paars.svg'); background-color: #FFFFFF;}
.leaflet-bar button.fa-pencil.reachability-control-active { background-image: url('../_knop/reach_draw_paars.svg'); }
.leaflet-bar button.fa-trash.reachability-control-active { background-image: url('../_knop/reach_delete_paars.svg'); }
.leaflet-bar button.fa-road.reachability-control-active { background-image: url('../_knop/reach_distance_paars.svg'); }
.leaflet-bar button.fa-clock-o.reachability-control-active { background-image: url('../_knop/reach_time_paars.svg'); }
.leaflet-bar button.fa-car.reachability-control-active { background-image: url('../_knop/reach_car_paars.svg'); }
.leaflet-bar button.fa-ebike.reachability-control-active { background-image: url('../_knop/reach_ebike_paars.svg'); }
.leaflet-bar button.fa-bicycle.reachability-control-active { background-image: url('../_knop/reach_bicycle_paars.svg'); }
.leaflet-bar button.fa-male.reachability-control-active { background-image: url('../_knop/reach_walk_paars.svg'); }
.leaflet-bar button.reachability-control-settings-button.reachability-control-active { background-color: #FFFFFF; }

@media (hover: hover) and (pointer: fine){
	.leaflet-bar button.export:hover { background-image: url('../_knop/reach_export_paars.svg'); background-color: #FFFFFF;}
	.leaflet-bar button.fa-pencil:hover { background-image: url('../_knop/reach_draw_paars.svg'); }
	.leaflet-bar button.fa-trash:hover { background-image: url('../_knop/reach_delete_paars.svg'); }
	.leaflet-bar button.fa-road:hover { background-image: url('../_knop/reach_distance_paars.svg'); }
	.leaflet-bar button.fa-clock-o:hover { background-image: url('../_knop/reach_time_paars.svg'); }
	.leaflet-bar button.fa-car:hover { background-image: url('../_knop/reach_car_paars.svg'); }
	.leaflet-bar button.fa-ebike:hover { background-image: url('../_knop/reach_ebike_paars.svg'); }
	.leaflet-bar button.fa-bicycle:hover { background-image: url('../_knop/reach_bicycle_paars.svg'); }
	.leaflet-bar button.fa-male:hover { background-image: url('../_knop/reach_walk_paars.svg'); }
	.leaflet-bar button.reachability-control-settings-button:hover { background-color: #FFFFFF; }

 }

/* #rangeInterval { display: none;} */

/* KB */
/* #rangeInterval { margin-top: -2rem; } */
/* #rangeInterval:before { display: block; position: relative; top: 0; width: 14rem; height: 14rem; border: 1rem solid #777777; content: ""; background: #FFFFFF; } */
/* #rangeInterval:after { display: block; position: relative; top: -15rem; left: 1rem; width: 14rem; height: 14rem; border: 0; content: ""; background: #FFFFFF; } */
/* #rangeInterval:checked:before { background-color: #777777; } */
/* #rangeInterval:checked:after { top: -15rem; left: 5rem; width: 4rem; height: 9rem; background-color: transparent; border: 1rem solid #FFFFFF; border-width: 0 2rem 2rem 0; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } */

#rangeInterval {  margin-top: -4rem; accent-color: #777777; width: 18rem; height: 18rem; }
#rangeInterval.contrast { accent-color: #000000;}