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: 115px;
    bottom: 0;
    width: 100%;
    flex-grow: 1;
    cursor: none
}

.container-legend-geocoder-slider {
    display: flex;
    z-index: 1;
    flex-flow: row wrap;
    gap: 15px 20px;
    justify-content: center;
    padding-top: 5px;
}

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


}




.legend-flotilla-gaza {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    color: #000000;
    gap: 5px;
    order: 2;
    font-size: 14px;
    font-family: 'Encode Sans', sans-serif;
    min-height: 40px;
    position: absolute;
    z-index: 1;
    padding: 10px;
    background-color: rgb(255, 255, 255, 0.8);
    border-radius: 5px;
    margin: 10px 10px;
    bottom: 35px;
}

.mapboxgl-ctrl-geocoder {
    margin: 0 auto;
    max-width: 220px;
    font-family: "Encode Sans", sans-serif;
    border-radius: 0px;
    border: 1px solid rgba(209, 209, 209, 1);
    box-shadow: none
}

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


.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-content {
    box-shadow: 0 2px 2px 0 #ccc;
    border-radius: 0px;
    border: 1px solid #ccc;
    padding: 10px;
}

.mapboxgl-popup-tip {
    display: block
}


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





/* SLIDER */

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

.parameter-value path {
    fill: #ffffff
}


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

.slider-contenedor {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 4;
    font-size: 12px;
    font-family: 'Encode Sans', sans-serif;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    z-index: 1;
    border: 1px solid #a5a5a5;
    flex-direction: column;
}

.handle:focus {
    outline: none
}

.button-flotilla-gaza-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 15px;
    font-family: 'Encode Sans', sans-serif;
    order: 3;
    flex: 1
}



.button-flotilla-gaza-div {
    width: 200px;
    text-align: center;
    font-size: 11px;
    color: #a0a0a0
}

.button-flotilla-gaza {
    font-size: 14px;
    background-color: #fff;
    border: 1px solid rgba(133, 133, 133, 1);
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 0px;
    margin-top: 0px;
    font-family: 'Encode Sans', sans-serif;
    color: black;
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08);
}


.button-flotilla-gaza .spinning-icon-ipc {
    width: 23px;
    vertical-align: middle;
    margin-right: 8px;
    transition: transform .7s ease-in-out;
}

.button-flotilla-gaza:hover {
    background-color: #f5f5f5;
}

@media (min-width: 900px) {

    #map {
        top: 0px;
    }



    .slider-contenedor {
        order: 4;
    }

}




@media (max-width: 900px) {



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

    .geocoder {
        z-index: 1;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        text-align: center;
        top: 75px
    }


    #map {
        top: 0px;

    }

    .button-flotilla-gaza {
        font-family: 'Encode Sans', sans-serif;
        width: 180px;
        font-size: 12px
    }
}

@media (max-width: 480px) {
    .geocoder {
        z-index: 1;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        text-align: center;
        top: 125px
    }


    #map {
        top: 0px;

    }

}



#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;

}