body {
    margin: 0;
    padding: 0;
}

.mapboxgl-ctrl-pitchtoggle-3d {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+ICAgIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkeT0iLjM1ZW0iIHN0eWxlPSJmb250LXNpemU6IDE0cHg7IGZvbnQtZmFtaWx5OiAnSGVsdmV0aWNhIE5ldWUnLEFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZDsgdGV4dC1hbmNob3I6IG1pZGRsZTsiPjNEPC90ZXh0Pjwvc3ZnPg==);
}

.mapboxgl-ctrl-pitchtoggle-2d {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+ICAgIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBkeT0iLjM1ZW0iIHN0eWxlPSJmb250LXNpemU6IDE0cHg7IGZvbnQtZmFtaWx5OiAnSGVsdmV0aWNhIE5ldWUnLEFyaWFsLEhlbHZldGljYSxzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZDsgdGV4dC1hbmNob3I6IG1pZGRsZTsiPjJEPC90ZXh0Pjwvc3ZnPg==);
}

html,
body {
    height: 100%;
    background-color: white
}

#map {
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 100%;
    flex-grow: 1;
}

#map:focus {
    outline: none;
}

button:focus {
    outline: none;
}

button,
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.mapboxgl-canvas:focus {
    outline: none;
}

.container-legend-geocoder-slider {
    display: flex;
    flex-flow: row wrap;
    gap: 10px 20px;

}

.geocoder {
    z-index: 1;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 1;
}


.legend-precios-gasolina {
    width: 250px;
    height: 70px;
    margin: 10px;
    position: absolute;
    bottom: 35px;
    z-index: 1;
    pointer-events: none;
    fill: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    fill: white;
}

.mapboxgl-ctrl-geocoder {
    margin: 0 auto;
    max-width: 220px;
    font-family: "Encode Sans", sans-serif;
}

.mapboxgl-ctrl-geocoder--input {
    font-size: 14px;
    font-family: "Encode Sans", sans-serif;
    margin: 0 auto;
    padding: 5px 23px 5px 40px
}



#mapbox-tooltip-contenedor h3 {
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 14px
}

#mapbox-tooltip-contenedor .columna-datos {
    text-align: right;
    padding-bottom: 0px;
    padding-top: 0px;
    border-bottom: 1px solid #ddd;

}

#mapbox-tooltip-contenedor .primeracolumna {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0px;
    padding-top: 0px;

}

#mapbox-tooltip-contenedor .div-four-blocks {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 10px;
}

#mapbox-tooltip-contenedor .element-div-four-blocks {
    width: 46%;
    min-height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    border: 1px solid black;
    background-color: #ebebeb
}


#mapbox-tooltip-contenedor p {
    font-size: 12px;
}

.mapbox-popup-contenedor {
    opacity: 1;
    font-family: 'Encode Sans', sans-serif;
    width: 300px;
    max-width: 300px !important;
}



.mapboxgl-popup-anchor-right {
    left: -15px
}

.mapboxgl-popup-anchor-bottom-right {
    left: -15px
}

.mapboxgl-popup-anchor-top-right {
    left: -15px
}

.mapboxgl-popup-anchor-bottom {
    top: -15px
}

.mapboxgl-popup-anchor-top {
    top: 20px;
}

.mapboxgl-popup-anchor-left {
    left: 15px
}

.mapboxgl-popup-anchor-bottom-left {
    left: 15px
}

.mapboxgl-popup-anchor-top-left {
    left: 15px
}

.mapboxgl-popup-close-button {
    font-size: 30px;
    background-color: #e0e0e0;
    border-radius: 35px;
    width: 35px;
    height: 35px;
    margin: 4px;
    padding: 8px;
    padding-top: 0;
    line-height: 1;
    color: #000000 !important
}

.mapboxgl-popup-content {
    box-shadow: 0 2px 2px 0 #ccc;
    border-radius: 0px;
    border: 1px solid #ccc
}

.mapboxgl-popup-tip {
    display: none
}


.legendpreciogasolina {
    font-family: 'Encode Sans', sans-serif;
    font-size: 12px
}


#buttons-tipo-gasolina {
    font-family: 'Encode Sans', sans-serif;
    font-size: 14px;
    justify-content: center;
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    margin-top: 5px;
    bottom: 100px;
    left: 30px;
    right: 30px;
    flex-wrap: wrap;
}

#buttons-tipo-gasolina button {
    font-family: 'Encode Sans', sans-serif;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 5px 5px 5px 5px;
    border: 2px solid #EEEDED;
    cursor: pointer;
    padding: 5px 15px;
    color: rgb(255, 255, 255, 0.6);
    transition: all 0s ease;
    position: relative;
    z-index: 1;
    width: 110px
}

#buttons-tipo-gasolina .button-mapa-active {
    color: white;
    opacity: 1;
    background-color: #000000
}

/* SLIDER */



.axis {
    font-size: 12px;
    font-family: 'Encode Sans', sans-serif
}

.parameter-value text {
    font-size: 12px;
    font-family: 'Encode Sans', sans-serif;
    font-weight: 700
}

.slider-contenedor {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;

}

.texto-slider {
    font-family: 'Encode Sans', sans-serif;
    margin: 0px 25px;
}

.handle:focus {
    outline: none
}

@media (min-width: 900px) {

    #map {
        top: 80px;
    }


    .container-legend-geocoder-slider {
        height: 80px
    }

    .legend-precios-gasolina {
        order: 2
    }

    .slider-contenedor {
        order: 3;
    }


}



@media (max-width: 900px) {

    .mapboxgl-ctrl-geocoder--input {
        font-size: 16px
    }

    .mapboxgl-popup {
        width: calc(100% - 30px);
        position: fixed;
        max-width: 975px !important;
        transform: none !important;
        top: auto;
        bottom: 20px;
        left: 15px;
        top: auto;
        z-index: 2;
    }

    #mapbox-tooltip-contenedor h3 {
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 15px
    }


    #mapbox-tooltip-contenedor p {
        font-size: 13px
    }

    .mapboxgl-popup-content {
        width: 100%
    }



}