/*  La anchura máxima será de 1500 pixeles  */

.anchuraMaxima {
  max-width: 1500px;
  margin: auto;
}

#botonMenuBulder {
  position: fixed;
  width: 40px;
  height: 40px;
  top: 8px;
  left: 8px;
  padding: 0;
  border: 2px solid blue;
  z-index: 2;
  border-radius: 11px;
  cursor: pointer;
  background-color: white;
  background-image: url("../iconos/menu_2.png");
}

#botonMenuGuardarBulder {
  position: fixed;
  width: 40px;
  height: 40px;
  top: 8px;
  left: 8px;
  padding: 0;
  border: 2px solid blue;
  z-index: 2;
  border-radius: 5px;
  cursor: pointer;
  background-color: white;
  background-image: url("../iconos/guardar_2.png");
}


/*  Para el indicar que es pie libre:  */

.infoBulderPieLibre {
  /*  Para indicar que el pie es libre:  */
  position: fixed;
  width: 80px;
  color: blue;
  font-size: .9em;
  font-weight: bold;
  padding: 0;
  /*  border: 2px solid blue;   */
  z-index: 2;
  cursor: pointer;
  animation: resaltaPieLibre 11s linear;
  animation-iteration-count: 2;
}

.infoBulderPieLibreAbajoIzq {
  bottom: 5px;
  left: 1px;
}

.infoBulderPieLibreAbajoDer {
  bottom: 1px;
  right: 1px;
}

.infoBulderPieLibreArribaDer {
  top: 1px;
  right: 1px;
}

@keyframes resaltaPieLibre {
  15% {
    color: yellow;
  }
  30% {
    color: red;
  }
  50% {
    color: white;
    /*  transform: scale(1.2, 1.2);  */
    /*  transform: rotate(360deg) scale(2, 2);  */
  }
  70% {
    color: black;
  }
  85% {
    color: pink;
  }
  100% {
    color: blue;
  }
}


/*  Para indicar que el bulder o imagen está obsoleto:  */

.infoBulderObsoleto {
  /*  Para indicar que está obsoleto:  */
  position: fixed;
  width: 90px;
  color: blue;
  font-size: 1.7em;
  font-weight: bold;
  padding: 0;
  /*  border: 2px solid blue;   */
  z-index: 2;
  cursor: pointer;
}

.infoBulderObsoletoAbajoIzq {
  bottom: 45px;
  left: 11px;
}

.infoBulderObsoletoArribaDer {
  top: 45px;
  right: 50px;
}

#pImagen,
#pImagenUsar {
  /*  position: relative;  */
  /*	border: 2px solid red;  */
}

#wrapper,
#wrapperUsar {
  width: 100%;
  height: 100%;
  position: absolute;
  /*  z-index: 1;   */
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  background: #ccc;
  /*	overflow: scroll;  */
  overflow: hidden;
}

#contenedor,
#contenedorUsar {
  width: 100%;
  height: 100%;
  /*  position: absolute;  */
  top: 0px;
  left: 0px;
  margin: 0px;
  padding: 0px;
  overflow: scroll;
  /*  overflow: hidden;   */
  /*  z-index: 1;  */
  /*  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  */
  /*  width: 100%;
  height: 100%;  
  overflow: scroll;  */
}

#canvasImagen {
  top: 0;
  left: 0;
  margin: 0px;
  padding: 0px;
}

.tituloGuardarBulder {
  text-align: center;
  color: maroon;
}

#opcionOlvidoClave {
  display: none;
  /*  border: 1px solid red;  */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#opcionIraRegistro {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#fRecuperarClave {
  display: none;
}

#fRegistro span {
  color: red;
}

#popupSalida-popup {
  position: fixed !important;
  /*	top: 1000px !important;
	left: 900px !important;
*/
}

.tituloBulders {
  height: 20px;
  background-color: darkorange !important;
  color: white !important;
  /*	text-align: center !important;  */
  font-size: 1em;
  padding-left: .5em !important;
  padding-top: .5em !important;
}


#consultarMisLogrosListaLugar .tituloBulders span {
  position: absolute;
  right: .5em;
  font-family: Courier New, Courier, monospace;
  font-size: .7em;
  background-color: white;
  color: black;
  padding: .3em;
  border-radius: 5px;
}

.detalleBulders span,
#consultarMisLogrosListaLugar span {
  position: absolute;
  right: 1.5em;
  font-family: Courier New, Courier, monospace;
  font-size: .7em;
  background-color: white;
  color: black;
  padding: .3em;
  border-radius: 5px;
}

#btAbrirBulder,
#btDefinirBulder,
#selLugaresFavoritos {
  margin-top: 2em;
  margin-bottom: 3em;
}

#lvDefinirBulder {
  margin-bottom: 5em;
}

#fsTipoDefinir {
  text-align: center;
  /*  padding-left: 15%;
  padding-right: 15%;
  /*  border: 1px solid red;  */
}

#btIrApPrincipal {
  margin-top: 3em;
}

#puInfoGPS_Conn div {
  margin-bottom: .7em;
}

#labelCrearBulder_1 label {
  font-size: 1.1em;
}

#labelCrearBulder_2 label {
  font-size: 1.1em;
  text-align: center;
}

#lvFinalizarBulder {
  margin-bottom: 2.5em;
}

#nPaso {
  text-align: center;
  color: blue;
  font-weight: bolder;
  padding: .2em;
}

#lvFotosDIV, #lvFotosViaEscaladaDIV {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 255px;
}

#filtroBulder_pSelImagen {
  margin-bottom: 0px;
}


/*
	Añadido para los listview collapsables esos:
*/

.ui-li-static.ui-collapsible>.ui-collapsible-heading {
  margin: 0;
}

.ui-li-static.ui-collapsible {
  padding: 0;
}

.ui-li-static.ui-collapsible>.ui-collapsible-heading>.ui-btn {
  border-top-width: 0;
}

.ui-li-static.ui-collapsible>.ui-collapsible-heading.ui-collapsible-heading-collapsed>.ui-btn,
.ui-li-static.ui-collapsible>.ui-collapsible-content {
  border-bottom-width: 0;
}


/*  Desplegable de las opciones de ajuste de imagen:   */

#desplegableOpcionesAjusteImagen {
  margin-top: 4em;
}


/*  Para los radio buttons seleccionar bulders realizados:   */

#selBuldersRealizados .ui-radio label {
  /*  padding: 8px;  */
  /*  color: red;  */
}

.opcionesHorizontal .ui-radio label {
  padding: 7px;
  /*  color: red;  */
}


/*
	ESTILOS PARA LA PÁGINA DEL MAPA DE BUSCAR LUGAR (ROCÓDROMO):
*/

#pSelLugarMapa,
#cuerpo_pSelLugarMapa {
  height: 100%;
  margin: 0;
  padding: 0;
  /*  border: 2px solid blue;  */
}

#mapaSelLugar {
  height: 100%;
  width: 100%;
  /*  border: 2px solid red;  */
}

.controls {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  height: 29px;
  margin-left: 5px;
  margin-top: 10px;
  outline: none;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 330px;
}

.controls:focus {
  border-color: #4d90fe;
}


/*  Mapa con los lugares (TODOS los lugares):   */

#pMapaLugares,
#cuerpo_pMapaLugares {
  height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#mapaLugares {
  height: 100%;
  width: 100%;
}

.infoWindowLugar {
  display: none;
  width: 180px;
  /*  width: 60%;  */
  margin: 0;
  padding: 0;
}

.infoWindowLugar .nombreLugar {
  font-size: 1.2em;
  font-weight: bolder;
  font-weight: 800;
  color: maroon;
}

.botonAnadeLugar {
  display: block;
  margin-top: .7em;
  font-size: 1.2em;
  text-align: center;
  font-weight: bold;
}


/*  Estilo de las opciones de configuración:  */

.opConfig {
  height: 10%;
  border-bottom: 1px solid darkgray;
  padding: 15px 0 15px 0;
  /*  margin-top: 10px;  */
}


/*  Estilos para las ayudas:   */

#pAyudaSimbologiaBulder .ui-content h2 {
  color: darkorchid;
}

#pAyudaSimbologiaBulder span {
  color: maroon;
  font-weight: bold;
}

#infoBulderDatosGenerales {
  z-index: 5;
}

#opinionBuldersGradoMedio_contenedor {
  /* center the guage */
  /* margin-left: auto; 
  margin-right: auto;  */
  /* responsive width */
  /* width: 100%;
  position: relative;  */
}

#opinionBuldersGradoMedio {
  display: block;
}


/*  CSS para la tabla de histograma, de la opinión de los usuarios sobre los bulders:  */

.histograma {
  border: none;
}

.histograma .sepa {
  border-left: .4em solid transparent;
  border-right: .2em solid transparent;
}

.histograma .grafico {
  width: 85%;
  /*  border: 1px solid grey;  */
  border: 1px inset grey;
}

.histograma .grafico .relleno {
  /*  width: 30%; No le ponemos width, se calculará según porcentaje. */
  height: 1.4em;
  width: 0px;
  background-color: burlywood;
  padding: 0;
  margin: 0;
  -webkit-transition: width 2s;
  /* Safari */
  transition: width 2s;
}


/*  Estilos para las opiniones del bulder de los usuarios:  */

#infoBulderDatosGenerales,
#detalleOpinionesBulderDatosGenerales {
  margin-bottom: 1.5em;
}

#infoBulderUsarNombre,
#detalleOpinionesBulderNombre {
  text-align: center;
  color: #FD8C00;
  color: #D9901D;
}

#infoBulderUsarGrado,
#infoBulderUsarFecha,
#infoBulderUsarAutor,
#infoBulderUsarObsoleto,
#detalleOpinionesBulderGrado,
#detalleOpinionesBulderAutor,
#infoBulderUsarPieLibre {
  font-size: .8em;
  font-weight: bold;
  color: darkgreen;
}

.detalleOpinionBulder {
  /*  border-top: 1px solid darkgray;
  border-bottom: 1px solid darkgray;  */
  /*	padding: .8em 0 .4em 0;  */
  margin-bottom: 2em;
}

.detalleOpinionBulderFecha {
  width: 1px;
  padding: 0 10px;
  white-space: nowrap;
  color: #31C7C7;
}

.detalleOpinionBulderUsuarioGrado table {
  margin-bottom: .5em;
}

.detalleOpinionBulderUsuario {
  color: maroon;
}

.detalleOpinionBulderGrado {
  color: darkorchid;
  font-size: 1.3em;
  font-weight: bold;
  margin-left: .4em;
}

.detalleOpinionBulderComentario {
  margin-top: .5em;
  margin-bottom: .8em;
}


/* css para el filtro de consultar mis logros   */

.inputDias {
  border-radius: 5px;
  padding: .1em;
  width: 50px;
  margin-left: .4em;
  margin-right: .4em;
}