@charset "UTF-8";
#fullscreen:fullscreen {
  background-color: rgb(255, 255, 255);
}

#fullscreen:-webkit-full-screen {
  background-color: rgb(255, 255, 255);
  height: 100%;
}

#fullscreen:-moz-full-screen {
  background-color: rgb(255, 255, 255);
}

#fullscreen:-ms-fullscreen {
  background-color: rgb(255, 255, 255);
}

*:fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen,
*:-ms-fullscreen {
  background-color: rgb(255, 255, 255);
}

#fullscreen:-ms-fullscreen > #map {
  position: static;
}

#fullscreen:fullscreen > #map {
  position: static;
}

#fullscreen:-webkit-full-screen > #map {
  position: static;
}

#fullscreen:-moz-full-screen > #map {
  position: static;
}

/*******************************************************************************/
/** necesario para que la ventana de impresión se muestre por encima del mapa **/
/** el compononte lo hace bien cuando es modal, pero si no lo es, hay que     **/
/** añadir este estilo                                                        **/
/********************************************************************************/
#vmImprimir {
  z-index: 1050;
  /* para que aparezca por encima del mapa */
  display: none;
  /* la opción autoOpen no funciona y por eso la oculto de inicio */
}

/**********************************/
.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}

.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

.tooltip-static:before {
  border-top-color: #ffcc33;
}

.ol-control.ol-layerswitcher {
  top: 3.2em;
}

.ol-control.ol-layerswitcher .ol-switchertopdiv,
.ol-control.ol-layerswitcher .ol-switcherbottomdiv {
  border-bottom: 2px solid #9d9d9d;
}

.ol-control.ol-layerswitcher .ol-switcherbottomdiv {
  border-top: 2px solid #9d9d9d;
}

.ol-control.ol-layerswitcher .ol-switchertopdiv:before {
  border-bottom-color: #9d9d9d;
}

.ol-control.ol-layerswitcher .ol-switcherbottomdiv:before {
  border-top-color: #9d9d9d;
}

.ol-dragover {
  background: #9d9d9d;
}

.ol-layerswitcher .panel li.dropover {
  background: #9d9d9d;
}

.ol-layerswitcher [type=radio] + label:before,
.ol-layerswitcher [type=checkbox] + label:before,
.ol-layerswitcher [type=radio]:checked + label:after,
.ol-layerswitcher [type=checkbox]:checked + label:after {
  border: 2px solid #9d9d9d;
}

.ol-layerswitcher [type=radio]:checked + label:after {
  background: #9d9d9d none repeat scroll 0 0;
}

.ol-layerswitcher [type=checkbox]:checked + label:after {
  border-color: #9d9d9d;
}

.ol-layerswitcher .layerup {
  background-color: #9d9d9d;
}

.ol-layerswitcher .layerInfo {
  background: #9d9d9d;
}

.ol-layerswitcher .layerTrash {
  background: #9d9d9d;
}

.ol-layerswitcher .layerExtent {
  background: #9d9d9d;
}

.ol-layerswitcher .expend-layers:before,
.ol-layerswitcher .collapse-layers:before {
  background: #9d9d9d;
}

.ol-layerswitcher .expend-layers:after {
  background: #9d9d9d;
}

.ol-layerswitcher .layerswitcher-opacity {
  border: 1px solid #9d9d9d;
  background: #ffffff;
}

.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor,
.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before {
  background: rgba(34, 34, 34, 0.5);
}

.ol-layerswitcher .layerswitcher-progress div {
  background-color: #9d9d9d;
}

.ol-control button:focus,
.ol-control button:hover {
  background-color: rgba(34, 34, 34, 0.7);
}

.ol-control button {
  background-color: rgba(34, 34, 34, 0.5);
}

/*http://stackoverflow.com/questions/21725557/additional-twitter-bootstrap-label-button-alert-badge-colors*/
/* apple colors */
[class*=-info-dark] {
  /*background-color:#02243C;*/
  background-color: rgba(34, 34, 34, 0.5);
  color: #f0f0f0;
}

[class*=-light] {
  background-color: #f9f9f9;
  color: #999;
}

[class*=-blue] {
  background-color: #5195ce;
  color: #fff;
}

[class*=-apple] {
  background-color: #005DB3;
  color: #f8f8f8;
}

[class*=-gray] {
  background-color: #e6e6e6;
  color: #666;
}

[class*=-green] {
  background-color: #5BC236;
  color: #fff;
}

/* hover and active */
[class*=-dark]:hover,
[class*=-dark]:focus {
  /*background-color:#12254d;*/
  background-color: #666;
  color: #fff;
}

[class*=-light]:hover,
[class*=-light]:active {
  background-color: #eeeeee;
  color: #fff;
}

[class*=-blue]:hover,
[class*=-blue]:active {
  background-color: #62a6df;
  color: #fff;
}

[class*=-apple]:hover,
[class*=-apple]:active {
  background-color: #116ec4;
  color: #fff;
}

[class*=-gray]:hover,
[class*=-gray]:active {
  background-color: #d5d5d5;
  color: #fff;
}

[class*=-green]:hover,
[class*=-green]:active {
  background-color: #6cd347;
  color: #fff;
}

/*CONTROL BUSCAR*/
/* aumentamos el alto del campo para que con los margenes
  alcance hasta los 100px que es lo que necesitamos para controlar las 2 barras que aparecen
  cuando redimensionamos reduciendo la vista y así no quede ninguna linea en blanco entre 
  la barra de herramientas y el mapa */
.typeahead__container,
.typeahead__field,
.js-typeahead,
.typeahead__button button,
.typeahead__search-icon {
  height: 34px;
  font-size: 1em;
}

.typeahead__cancel-button {
  height: 34px;
  font-size: 1.5em;
}

/*estilos modificados para redimensionar el campo buscar según la pantalla*/
@media (max-width: 767px) {
  .typeahead__container {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .typeahead__container {
    width: 380px;
  }
}
@media (min-width: 992px) {
  .typeahead__container {
    width: 380px;
  }
}
@media (min-width: 1200px) {
  .typeahead__container {
    width: 380px;
  }
}
.drawcursor {
  cursor: pointer;
}

body {
  overflow: hidden;
}

.navbar-offset {
  margin-top: 50px;
}

#map {
  position: absolute;
  height: 100%;
  top: 50px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

#map .ol-zoom {
  font-size: 1.2em;
}

#map .ol-rotate {
  font-size: 1.2em;
  top: 3.9em;
  left: 0.5em;
  right: auto;
}

#map .ol-full-screen {
  font-size: 1.2em;
}

#map {
  z-index: 35;
}

.main-row {
  position: relative;
  top: 0;
}

/* Idiomas */
.dropdown {
  position: relative;
  display: block;
  padding: 10px;
  line-height: 20px;
  color: #9d9d9d;
  text-decoration: none;
  background-color: transparent;
}

#globoidioma:hover {
  color: white;
}

@media (min-width: 768px) {
  .dropdown {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.dropdown-menu > li > a {
  color: #9d9d9d;
}

.dropdown-menu {
  background-color: #333;
}

/* Idiomas */
/*
    http://stackoverflow.com/questions/14266175/how-do-i-left-align-these-bootstrap-form-items
    If you are using Bootstrap 3 then I would just add an extra style into your own site's stylesheet which controls the text-left style of the control-label.
    If you were to add text-left to the label, by default there is another style which overrides this .form-horizontal .control-label.*/
.form-horizontal .control-label.text-left {
  text-align: left;
}

/*aumentando el tamaño de los campos reduciendo los valores originales del padding*/
div[class*=form-group] [class*=col-] {
  padding-right: 33px;
}

/**************************************************/
/* Make aligning text responsive #11292           */
/* https://github.com/twbs/bootstrap/issues/11292 */
/**************************************************/
.text-left-not-xs,
.text-left-not-sm,
.text-left-not-md,
.text-left-not-lg {
  text-align: left;
}

.text-center-not-xs,
.text-center-not-sm,
.text-center-not-md,
.text-center-not-lg {
  text-align: center;
}

.text-right-not-xs,
.text-right-not-sm,
.text-right-not-md,
.text-right-not-lg {
  text-align: right;
}

.text-justify-not-xs,
.text-justify-not-sm,
.text-justify-not-md,
.text-justify-not-lg {
  text-align: justify;
}

@media (max-width: 767px) {
  .text-left-not-xs,
  .text-center-not-xs,
  .text-right-not-xs,
  .text-justify-not-xs {
    text-align: inherit;
  }
  .text-left-xs {
    text-align: left;
  }
  .text-center-xs {
    text-align: center;
  }
  .text-right-xs {
    text-align: right;
  }
  .text-justify-xs {
    text-align: justify;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .text-left-not-sm,
  .text-center-not-sm,
  .text-right-not-sm,
  .text-justify-not-sm {
    text-align: inherit;
  }
  .text-left-sm {
    text-align: left;
  }
  .text-center-sm {
    text-align: center;
  }
  .text-right-sm {
    text-align: right;
  }
  .text-justify-sm {
    text-align: justify;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .text-left-not-md,
  .text-center-not-md,
  .text-right-not-md,
  .text-justify-not-md {
    text-align: inherit;
  }
  .text-left-md {
    text-align: left;
  }
  .text-center-md {
    text-align: center;
  }
  .text-right-md {
    text-align: right;
  }
  .text-justify-md {
    text-align: justify;
  }
}
@media (min-width: 1200px) {
  .text-left-not-lg,
  .text-center-not-lg,
  .text-right-not-lg,
  .text-justify-not-lg {
    text-align: inherit;
  }
  .text-left-lg {
    text-align: left;
  }
  .text-center-lg {
    text-align: center;
  }
  .text-right-lg {
    text-align: right;
  }
  .text-justify-lg {
    text-align: justify;
  }
}
/* Idiomas */
@media (min-width: 768px) and (max-width: 877px) {
  #map.espaniol {
    top: 200px;
  }
}
@media (min-width: 878px) and (max-width: 896px) {
  #map.espaniol {
    top: 150px;
  }
}
@media (min-width: 897px) and (max-width: 1479px) {
  #map.espaniol {
    top: 100px;
  }
}
@media (min-width: 1480px) {
  #map.espaniol {
    top: 50px;
  }
}

@media (min-width: 768px) and (max-width: 872px) {
  #map.valenciano {
    top: 200px;
  }
}
@media (min-width: 873px) and (max-width: 891px) {
  #map.valenciano {
    top: 150px;
  }
}
@media (min-width: 892px) and (max-width: 1478px) {
  #map.valenciano {
    top: 100px;
  }
}
@media (min-width: 1471px) {
  #map.valenciano {
    top: 50px;
  }
}

@media (min-width: 768px) and (max-width: 818px) {
  #map.ingles {
    top: 200px;
  }
}
@media (min-width: 819px) and (max-width: 837px) {
  #map.ingles {
    top: 150px;
  }
}
@media (min-width: 838px) and (max-width: 1416px) {
  #map.ingles {
    top: 100px;
  }
}
@media (min-width: 1417px) {
  #map.ingles {
    top: 50px;
  }
}

/* Idiomas */
/*******************************************************************************************/
/* How Do I Make Glyphicons Bigger? (Change Size?)                                         */
/* http://stackoverflow.com/questions/24960201/how-do-i-make-glyphicons-bigger-change-size */
/*******************************************************************************************/
.gi-2x {
  font-size: 2em;
}

.gi-3x {
  font-size: 3em;
}

.gi-4x {
  font-size: 4em;
}

.gi-5x {
  font-size: 5em;
}

.boton-expediente {
  color: #9d9d9d;
  background-color: #222;
  border: none;
}

.boton-expediente:hover {
  color: #fff;
  background-color: transparent;
}

#drag-info {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin-bottom: 0;
  /*opacity: 0.7;*/
  opacity: 1;
  z-index: 40;
}

.alert-dismissable,
.alert-dismissible {
  padding-right: 15px;
}

#drag-info-leyenda {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin-bottom: 0;
  /*opacity: 0.7;*/
  opacity: 1;
  z-index: 40;
}

.glyphicon-list,
.leyendatitulo {
  color: #fff;
}

.glyphicon-chevron-up,
.glyphicon-chevron-down {
  color: #fff;
}

#divCentrar {
  position: absolute;
  top: 5.6em;
  left: 0.5em;
  z-index: 40;
  font-size: 1.2em;
}

#map .ol-touch #divCentrar {
  top: 7.15em;
}

#btnCentrar {
  align-content: center;
}

.oculto {
  display: none;
}

.popover-content {
  min-width: 175px;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-gris,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-gris {
  color: #222222;
  background: #9d9d9d;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-negro,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-negro {
  color: #fff;
  background: #222222;
}

.bootstrap-switch {
  border-color: #9d9d9d;
}

.bootstrap-switch .bootstrap-switch-label {
  background-color: #222;
  color: #9d9d9d;
}

@media (max-width: 767px) {
  .bootstrap-switch {
    margin-left: 15px;
  }
}
/* estilos para caminos */
.form-control {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.control-label {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6 {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.align-middle {
  display: flex;
  align-items: center;
}

.w300 .th-inner {
  width: 300px;
}

.w250 .th-inner {
  width: 250px;
}

.w200 .th-inner {
  width: 200px;
}

.w150 .th-inner {
  width: 150px;
}

/* fin estilos para caminos */
/* ESTILOS PARA PONER LA BARRA BLANCA TIPO LA WEB DEL AYTO*/
.navbar {
  background-color: #293188;
  color: white;
  font-weight: bold;
  /* text-shadow: 1px 1px 2px rgba(0,0,0,0.25); */
}

.btn-toolbar {
  background-color: white;
  margin-left: 0px;
}

.nav.navbar-nav {
  background-color: white;
}

.bootstrap-switch .bootstrap-switch-label {
  background-color: #8f8f8f;
  color: #ebebeb;
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-gris,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-gris {
  color: #8f8f8f;
  background-color: #ebebeb;
}

/* FIN ESTILOS PARA PONER LA BARRA BLANCA TIPO LA WEB DEL AYTO*/
/* ESTILOS PGOU */
.foto-leyenda {
  vertical-align: middle !important;
}

ol.lista-letras {
  list-style-type: lower-alpha;
}

/*FUENTE: https://css-tricks.com/ordered-lists-unicode-symbols
ol.lista-letras {
  list-style-type:none;
}
.lista-letras li:nth-child(1):before {content: "a) ";}
.lista-letras li:nth-child(2):before {content: "b) ";}
.lista-letras li:nth-child(3):before {content: "c) ";}
.lista-letras li:nth-child(4):before {content: "d) ";}
.lista-letras li:nth-child(5):before {content: "e) ";}
.lista-letras li:nth-child(6):before {content: "f) ";} */
/*******************************************************************************************/
/* Hay dos técnicas diferentes para mostrar los iconos sacadas de:
https://stackoverflow.com/questions/18147338/twitter-bootstrap-3-0-icon-change-on-collapse
he usado los dos al mismo tiempo, aunque no es necesario                                 */
/*******************************************************************************************/
/* 1. MÉTODO PARA MOSTRAR LA CARPETA */
/* 1.1. Con FontAwesome*/
.panel-title > a:before {
  font-family: FontAwesome;
  content: "\f07c";
  padding-right: 5px;
}

.panel-title > a.collapsed:before {
  content: "\f07b";
}

.panel-title > a:hover,
.panel-title > a:active,
.panel-title > a:focus {
  text-decoration: none;
}

/* 1.2. Con Glyphicons*/
/* .panel-title > a:before {
font-family: "Glyphicons Halflings";
content:"\e118";
padding-right: 5px;
}

.panel-title > a.collapsed:before {
content:"\e117";
} */
/* 2. MÉTODO PARA MOSTRAR EL > y V */
a[aria-expanded=true] .glyphicon-chevron-right {
  display: none;
}

a[aria-expanded=false] .glyphicon-chevron-down {
  display: none;
}

.glyphicon-chevron-down {
  color: inherit;
}

.APA {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(0, 100%, 25%, 0.5);
}

.APD {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(0, 100%, 50%, 0.5);
}

.NA {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(60, 100%, 25%, 0.5);
}

.OI {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(60, 100%, 50%, 0.5);
}

.PAU {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(120, 100%, 25%, 0.5);
}

.PE {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(120, 100%, 50%, 0.5);
}

.PEAPA {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(180, 100%, 25%, 0.5);
}

.PPI {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(180, 100%, 50%, 0.5);
}

.PPII {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(240, 100%, 25%, 0.5);
}

.UA {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(240, 100%, 50%, 0.5);
}

.OTROS {
  min-width: 19px;
  max-width: 19px;
  min-height: 15px;
  max-height: 15px;
  overflow: hidden;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background-color: hsla(0, 0%, 0%, 0.5);
}