:root {
    color-scheme: dark;

    --light-gray: #595959;
    --medium-gray: #3c3c3c;
    --dark-gray: #1e1e1e;

    --medium-radius: 12px;
}

html,
body {
    height: 100%;
    margin: 0;
}

#map {
    height: 100%;
}

.leaflet-container {
    background: #a3cdfe;
}

/* Zoom Control */
.leaflet-bar a {
    background-color: var(--medium-gray);
    color: #fff;
    font-weight: 500;
    border: 2px solid var(--dark-gray) !important;
}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
    border: none;
}

.leaflet-touch .leaflet-bar a {
    border-radius: 50% !important;
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
    background-color: var(--light-gray);
}

.leaflet-bar a.leaflet-disabled {
    background-color: var(--dark-gray);
    color: var(--light-gray);
}

.leaflet-touch .leaflet-bar a {
    width: 44px;
    height: 44px;
    line-height: 44px;
}

.leaflet-touch .leaflet-control-zoom-in,
.leaflet-touch .leaflet-control-zoom-out {
    font-size: 26px;
}

.leaflet-bar a+a {
    margin-top: 5px;
}

/* Layers Control */
.leaflet-top.leaflet-right .leaflet-control {
    background-color: var(--medium-gray);
    color: #fff;
    border: 2px solid var(--dark-gray) !important;
    border-radius: 50%;
}

.leaflet-control-layers-expanded {
    border-radius: var(--medium-radius) !important;
}

.leaflet-control-layers-separator {
    border-color: var(--dark-gray);
}

/* Popup */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: var(--medium-gray);
    color: #fff;
}

.leaflet-container a.leaflet-popup-close-button {
    color: #fff;
}

.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
    color: #fff;
}

/* Marker Cluster */
.marker-cluster {
    background-color: var(--dark-gray);
    border-radius: 20px;
}

.marker-cluster div {
    background-color: var(--medium-gray);
}

.marker-cluster div {
    width: 36px;
    height: 36px;
    margin-left: 2px;
    margin-top: 2px;
    text-align: center;
    border-radius: 19px;
}

.marker-cluster span {
    line-height: 36px;
    color: #fff;
    font-weight: bold;
}

/* Search Control */
.leaflet-control-search .search-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--medium-gray);
    border: 2px solid var(--dark-gray);
    background-image: url(images/search.svg);
    background-position: center;
    background-size: 22px;
}

.leaflet-container .leaflet-control-search {
    background: none;
    border: none;
}

.leaflet-control-search .search-button:hover {
    background-color: var(--light-gray);
    background-image: url(images/search.svg);
    background-position: center;
    background-size: 22px;
}

.leaflet-control-search .search-input {
    background-color: var(--medium-gray);
    border: 2px solid var(--dark-gray);
    border-radius: var(--medium-radius);
    padding: 11px 9px;
    margin: 0px 8px 0px 0px;
}

/* Draw */
.leaflet-draw-toolbar a {
    position: relative;
    background-image: none;
}

.leaflet-draw-toolbar a::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: 440px 44px;
    background-image: url("https://unpkg.com/leaflet-draw@1.0.4/dist/images/spritesheet.svg");
    filter: brightness(0) invert(100%);
}

.leaflet-draw-toolbar a.leaflet-disabled::after {
    filter: brightness(0) invert(35%);
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline::after {
    background-position: 0;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon::after {
    background-position: -43px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle::after {
    background-position: -88px -1px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle::after {
    background-position: -132px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker::after {
    background-position: -176px -1px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker::after {
    background-position: -396px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit::after,
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled::after {
    background-position: -307px -1px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove::after,
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled::after {
    background-position: -352px;
}

.leaflet-touch .leaflet-draw-actions {
    left: 48px;
}

.leaflet-retina .leaflet-draw-toolbar a {
    background-image: none;
}