/* Dark Mode */
:root {
    /* --map-tiles-filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); */
    --map-tiles-filter: invert(100%) hue-rotate(180deg);
}

.map-tiles {
    filter:var(--map-tiles-filter, none);
}
#mySidepanelRight .sidepanel-toggle-button{
    border-left: 1px solid #2d333b;
    border-top: 1px solid #2d333b;
    border-bottom: 1px solid #2d333b;
}
.leaflet-tooltip-pane {
    /* filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); */
    filter:var(--map-tiles-filter, none);
}

.leaflet-sidebar, .leaflet-control-locate, .leaflet-control-zoom, .leaflet-control-layers, .easy-button-container, .leaflet-control-scale { /*don't add filter to geocoder, image filter can't invert nicely */ 
    filter:var(--map-tiles-filter, none);
}
.leaflet-control-geocoder.leaflet-bar{ /*apply the dark style manually for geocoder*/
    background:black;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background-clip: padding-box;
}
.leaflet-control-geocoder.leaflet-bar a, .leaflet-control-geocoder-form input{
    color: white;
}
ul.leaflet-control-geocoder-alternatives li:hover,
li.leaflet-control-geocoder-selected {
  background-color: #555555;
}
.leaflet-control-geocoder-icon{
    filter:var(--map-tiles-filter, none);
}

.leaflet-control.leaflet-control-attribution { /* no filter for the flag, hue-rotate twice muddies the colours, this overwrites with unfiltered flag */
    background: rgba(42, 42, 42, 0.8);
}

.externallinks img, .leaflet-popup-content img, .flickrHeaderImage, .flickrImage, .bfainfo img{
    filter: hue-rotate(180deg) invert(100%); /* undo the filter for some things */
}
.leaflet-popup-pane{
    /* filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); */
    filter:var(--map-tiles-filter, none);
}

#mySidepanelRight .sidepanel-tab[aria-disabled="true"]{
    background: #30363d;
}
#mySidepanelRight .sidepanel-tab[aria-disabled="true"] .sidebar-tab-link {
    border-bottom-color: #22272e;
    color: #22272e;
}

/* Unloaded map tile color */
.leaflet-container {
    background: #575757;
}