html,
body {
    background-color: #eef1ef;
    width: 100%;
    height: 100%;
    margin: 0;
}
.map {
    width: 100%;
    height: 100%;
}

.marker {
    width: 15px;
    height: 15px;
    background-color: rgb(17, 134, 243);
    display: block;
    border: none;
    border-radius: 50%;
    border: 2px solid white;
    padding: 0;
}

.maplibregl-ctrl-bottom-right {
    bottom: var(--bottom-padding);
}

:root {
    --background-color: white;
    --button-color: black;
}

.button {
    background-color: var(--button-color);
}

.maplibregl-ctrl-attrib-button {
    background-image: none;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 fill-rule=%27evenodd%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 fill-rule=%27evenodd%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0%27/%3E%3C/svg%3E");
} 
.maplibregl-ctrl-attrib-button, .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
    background-color: var(--button-color);

}

    
.popup {
    --bg: var(--background-color);
}
.marker {
    border: 2px solid var(--background-color);
}
.label {
    color: var(--button-color);
}

.maplibregl-ctrl-attrib.maplibregl-compact {
    background-color: var(--background-color);
    color: var(--button-color);
}
.maplibregl-ctrl-attrib.maplibregl-compact a {
        color: var(--button-color);
}
:root {
    --range-slider: #555;
}
.maplibregl-ctrl-attrib-button, .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
    background-color: gray;
}