/*basicos*/
* {padding: 0;margin: 0;-moz-box-sizing: border-box;box-sizing: border-box;font-family: 'Roboto',sans-serif;font-weight: 300;}
html {font-size: 62.50%; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
body {font-size: 1em;line-height: 1;display: flex;flex-wrap: wrap;background: var(--blanco);}

:root {
    --blanco: #fff;
    --gris_claro: #f8f8f8;
    --gris_medio: #ECECEC;
    --gris: #404040;
    --azul:  #2E4453;
    --azul_hover: #3074a4;

}

/* menu botonera */
#menu {background: var(--blanco);position: relative;z-index: 1;top: 0;right: auto;width: auto;display: inline-block;border: 0.1rem solid rgba(0,0,0,0.15);border-radius: 0.3rem;}
#menu, div#geocoder {margin:2.3rem auto;align-self: flex-end;}
#menu button, #menu a {font-size: 1.4rem;color: var(--gris);font-weight: 500;display: inline-block;margin: 0;padding: 0.85rem 1.2rem;text-decoration: none;text-align: center;text-transform: uppercase;letter-spacing: 0.2rem;box-shadow: none;border: 0;cursor: pointer;outline: none;float: left;border-right: .1rem solid rgba(0,0,0,0.15);}
#menu button:last-of-type, #menu a:last-of-type {border-right: 0;}
#menu button.active, #menu a.active, 
.mapboxgl-popup-content h4.data.highlighted {background: var(--blanco);color: var(--gris);font-weight: 700;}

button {font-weight:500;text-align: center;text-transform: uppercase;letter-spacing: 0.2rem;box-shadow: none;border: 0;}
.btn_reset{width:3.2rem;height:3.4rem;border:0.2rem solid #ddd;border-radius:0.4rem;background:url(/css/rtve.2022.noticias/mapa-precio-gasolina/i/reset.svg) no-repeat;background-position:center;}

/* leyenda */
/* div#legend-precios, div#legendprecios {width: auto;display: inline-block;position: relative;vertical-align: bottom;} */
div#legendprecios {margin: 0 auto;}
.preciogasolina .legendCells * {font-size: 1.2rem;font-weight: 700;}
.preciogasolina .legendTitle {font-size: 1.4rem;font-weight: 400;letter-spacing: 0.1rem;}

/* buscador */
div#geocoder {margin-top:0;/*max-width: 20%;*/position:absolute;top:9rem;right:6rem;}
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl {width:auto;}
/* .container >.g1 >.gridBox > .cell {position: relative;}
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl {position: absolute;top: 2rem;bottom: auto;left:auto;right: 1rem;} */

/* capa de precios */
.mapboxgl-popup .mapboxgl-popup-content {background:var(--blanco);box-shadow:0.2rem 0.2rem 0.2rem rgb(0 0 0 / 25%), -0.1rem -0.1rem 0.2rem rgb(0 0 0 / 10%);}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {border-top-color: var(--blanco);filter: drop-shadow(0.1rem 0.2rem 0.1rem rgb(0 0 0 / 25%));}
.mapboxgl-popup .mapboxgl-popup-content {padding:1rem;border-top-left-radius: 0.4rem; border-top-right-radius:  0.4rem;}
.mapboxgl-popup-content h3, .mapboxgl-popup-content h2 {font-size:1.6rem;font-weight:700;text-transform:uppercase;padding:0.5rem; border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem;width:calc(100% + 1rem);margin:-0.5rem 0 0 -0.5rem}
.mapboxgl-popup-content h2 > span, .mapboxgl-popup-content h2 > b  {text-transform:none;font-size: 1.4rem;font-weight: 400;} .mapboxgl-popup-content h2 > b {display:block}
.mapboxgl-popup-content h3.location {font-size:1.2rem;line-height:1.4rem;font-weight:400;text-transform:none;padding-top: 0;border-bottom:.1rem solid var(--gris_medio);margin-bottom: 0.5rem;}
.mapboxgl-popup-content h3 + h4, .mapboxgl-popup-content h2 + h4 {margin-top:0.5rem}
.mapboxgl-popup-content h4 {font-size:1.3rem;font-weight:700;margin:0;padding:0.5rem 0;display: inline-block;}
.mapboxgl-popup-content h4 strong,.mapboxgl-popup-content h4 b {font-size:1.2rem;font-weight:400;}
.mapboxgl-popup-content h4.hours {width: 100%;font-weight: 500;border-top: 0.1rem solid var(--gris_medio);margin-top: 0.5rem;line-height: 1.4rem;padding-bottom: 0;}
.mapboxgl-popup-content h4.area {display: none;}

.mapboxgl-popup-content h4.data {width:50%;float:left;display:block; font-size:1.6rem;text-align:center;}
.mapboxgl-popup-content h4.data strong, .mapboxgl-popup-content h4.data b {display:block;}
.mapboxgl-popup-content h4.data.highlighted {border-radius: 0.3rem;font-weight:700;}
.mapboxgl-popup-content h4.data.highlighted strong, .mapboxgl-popup-content h4.data.highlighted b {font-weight:500}
.mapboxgl-popup-content h4.data.highlighted {background: var(--gris_claro);color: #000;box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 10%)}

/*controles*/
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {display: block;width: 100%;height: 100%;background-repeat: no-repeat;background-position: 50%;padding: 0;}
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {background-image:url("/css/rtve.2022.noticias/mapa-precio-gasolina/i/zoom_in.svg");}
.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {background-image:url("/css/rtve.2022.noticias/mapa-precio-gasolina/i/zoom_out.svg");}
.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {background-image:url("/css/rtve.2022.noticias/mapa-precio-gasolina/i/compass.svg");}
.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon {background-image:url("/css/rtve.2022.noticias/mapa-precio-gasolina/i/fullscreen.svg");}

.mapboxgl-popup span.fecha-actualizacion, span.fecha-actualizacion b {display:inline-block;font-size: 1.15rem;line-height: 1;font-weight: 500;}
.mapboxgl-popup span.fecha-actualizacion b {font-weight: 400;}

/* ocultar elementos */
.floatLink,
button.mapboxgl-ctrl-fullscreen,
button.mapboxgl-ctrl-compass {display:none}

.spinnBox {height:100%;width: 100%;position: absolute;top:0;left:0;z-index:3;
    display:flex;background: rgba(255, 255, 255, 0.85);
    flex-direction: column;flex-wrap:nowrap;align-items:center;justify-content:center;}
.spinn,.spinn span {height: 1.4em;display: inline-block}
.spinn {
    text-align: center;
    width: 8em;
    left: 50%;
    top: 50%;
    margin: -.7em 0 0 -4em
}

.spinn span {
    float: left;
    margin: 0 .3em;
    width: 1.4em;
    border-radius: 100%;
    -webkit-animation: bouncedelay 2s infinite ease-in-out;
    animation: bouncedelay 1.8s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.spinn .ball01 {
    -webkit-animation-delay: -.48s;
    animation-delay: -.48s
}

.spinn .ball02 {
    -webkit-animation-delay: -.32s;
    animation-delay: -.32s
}

.spinn .ball03 {
    -webkit-animation-delay: -.16s;
    animation-delay: -.16s
}

@-webkit-keyframes bouncedelay {
    0%,100%,80% {
        -webkit-transform: scale(.1)
    }

    40% {
        -webkit-transform: scale(1)
    }
}

@keyframes bouncedelay {
    0%,100%,80% {
        transform: scale(.1);
        -webkit-transform: scale(.1)
    }

    40% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

.ball01 {background: #ffa000}
.ball02 {background: #f98307}
.ball03 {background: #f56a0f}
.ball04 {background: #f05014}
.hddn {display:none;}