html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
/* PLG-HOR-NAVIGATION */

@media screen and (max-width: 890px) {
    div.m-control.m-navigationzoomhistory-container::after {
        display: none;
    }
}

div.m-area div.m-panel.plg-navigation.opened button.m-panel-btn.g-navigationtools-opened {
    height: 43px !important;
}


/****************************************************************
* MANAGE LAYERS
*****************************************************************/

/* Tamaño toc e imágenes */

#toolbar-managelayers {
    max-height: 500px;
}

#toc-baselayers .box {
    height: 70px;
    width: 150px;
}

/* Verde Junta */
.m-panel.m-managelayers .m-panel-btn.g-cartografia-flecha-derecha,
#toolbar-managelayers #toolbar-title-managelayers,
#toolbar-managelayers #toolbar-buttons-managelayers,
.m-panel.plg-navigation .m-panel-btn, 
.m-panel-btn.g-cartografia-flecha-derecha,
.m-control.m-addservices-container .title{
    background: #C5342B!important;
    color: white !important;
}

/* Elimina inicial*/
#toc-activelayers .toc-item-layer .toc-item-layer-header .m-area-origin {
       display: none; 
}


#objetivo1 .toc-item-group-header.gris-n1{ 
  background-color: #97BF0A!important;
 }
#objetivo2 .toc-item-group-header.gris-n1{ 
  background-color:#0772BA!important;
 }
#objetivo3 .toc-item-group-header.gris-n1{ 
  background-color: #0FABA0!important;
 }
#objetivo4 .toc-item-group-header.gris-n1{ 
  background-color:#85305A!important;
 }
 #objetivo5 .toc-item-group-header.gris-n1{ 
  background-color: #F4931F!important;
 }
#objetivo6 .toc-item-group-header.gris-n1{ 
  background-color:#F5C01A!important;
 }
 #objetivo7 .toc-item-group-header.gris-n1{ 
  background-color: #EE71A9!important;
 }
#objetivo8 .toc-item-group-header.gris-n1{ 
  background-color:#94803B!important;
 }
 #objetivo9 .toc-item-group-header.gris-n1{ 
  background-color: #D5212C!important;
 }
#objetivo10 .toc-item-group-header.gris-n1{ 
  background-color:#932D89!important;
 }
 .letra-negrita-20 {
    font-size: 12px!important;     
	text-align: center; 
	 
    color: #f3f3f3!important;
	font-family: PT Sans;
}

.m-panel.m-managelayers .m-panel-btn.g-cartografia-flecha-derecha, #toolbar-managelayers #toolbar-title-managelayers, #toolbar-managelayers #toolbar-buttons-managelayers, .m-panel.plg-navigation .m-panel-btn, .m-panel-btn.g-cartografia-flecha-derecha, .m-control.m-addservices-container .title {
    font-family: PT Sans;
}
#toc-activelayers .toc-item-group .layer-group-name span {
    font-size: 10px;
}
#toc-activelayers .toc-item-group .toc-item-layer-header, #toc-activelayers .toc-item-group .toc-item-layer-options {
 
    font-size: 9px;
}
/* Oculta capas Catastro, Batimetría y Contexto en el TOC */
#toc-activelayers div[id*='contexto_andalucia'].toc-item-layer, 
#toc-activelayers div[id*='batimetria'].toc-item-layer,
#toc-activelayers div[id*='layerThatContainSelectedFeatures'].toc-item-layer,
#toc-activelayers div[id*='layerChangingColorWhenHovering'].toc-item-layer,
#toc-activelayers div[id*='Catastro'].toc-item-layer,
#toc-activelayers div[id$='_'].toc-item-layer {    display: none;}

/* Eliminar boton capas tematicas */
.m-areas>div.m-area>div.m-panel.m-managelayers.opened #toolbar-button-thematiclayers {
    display: none;
}
div#toolbar-buttons-managelayers.m-toolbar-buttons.m-toolbar-buttons-managelayers{
    display: none!important;
}  

/****************************************************************

* OTROS
*****************************************************************/

/* Tabla contenido identify */
.tabcontent {
	overflow: scroll!important;
}

 
/***********************************************************/
/* PLUGIN TOC */
/***********************************************************/
#toc-activelayers div[title*='Contorno de las ARPSI'].m-title {
    color: black;
}

/* Eliminar boton ordenar capas */
#toc-activelayers .m-accion-activelayers-order, #guardarCapa, #cargarCapa, #toolbar-button-stylemanager, .g-cartografia-herramienta {
    display: none;
}
#toc-activelayers .m-accion-activelayers-order, #guardarCapa, #cargarCapa, #toolbar-button-stylemanager, .g-cartografia-tamano {
    display: none;
}

.m-accion-activelayers-info.g-cartografia-info{
    display: none!important;
}

/***********************************************************/
 /* COLORES BOTONES*/
/***********************************************************/
.g-navigationtools-opened {
    background-color: #C5342B!important;
}
.g-navigationtools-closed:before {
    color: #C5342B!important;
}

.m-areas>div.m-area>div.m-panel.m-managelayers.collapsed>button.m-panel-btn {
    color: #C5342B!important; 
}

.m-areas>div.m-area>div.m-panel>div.m-panel-controls>div.m-control.m-rotate-container button[class^=g-cartografia-]#m-rotate-button {
    
    color: #C5342B!important; 
}
.m-panel.srsselector-panel.collapsed>button {
    color: #C5342B!important;
}
.srsselector-panel .m-panel-btn.g-cartografia-flecha-derecha {
    background-color: #C5342B!important;
 }
 
 .m-areas>div.m-area>div.m-panel.m-location>div.m-panel-controls>div.m-control.activated>button {
    color: #C5342B;
}

/***********************************************************/
/* botones activados*/
/***********************************************************/

.g-cartografia-mundo:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-zoom-mas:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-zoom-menos:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-flecha-izquierda3:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-flecha-derecha3:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-gps4:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-cancelar2:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-papelera:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-medir-area:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}
.g-cartografia-medir-linea:active {
    color: #ff9800!important;
    font-weight: 600!important;
    opacity: 1!important;
}

.m-mapea-container {    
    background-image: none;
}
/***********************************************************/
/* RESPONSIVE*/
/***********************************************************/

@media screen and (max-width: 400px).m-areas>div.m-area>div.m-panel.plg-navigation.opened>div.m-panel-controls {
    justify-content: center;
    max-width: calc(80vw - 65px)!important;
}


/***********************************************************/
/* POPUP*/
/***********************************************************/
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
    width: 185px;
    background-color: #626262;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 22;
    bottom: 125%;
    left: 50%;
    margin-left: -118px;
    text-align: justify;
    padding: 8px;
    font-size: 11px;
    font-family: PT Sans;
    margin-bottom: 8px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
 .popuptext.show {
  visibility: visible!important;
  -webkit-animation: fadeIn 1s!important;
  animation: fadeIn 1s!important;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
  
  
/***********************************************************/
/* loader*/
/***********************************************************/
  
  #loader-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.3);
	 
}
#loader {
    display: block;
    position: relative;
    left: 52%;
    top: 0%;
    width: 100px;
    height: 100px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

 
.m-control.m-getfeatureinfo-container.activated button:before {  
	color:#C5342B!important;
}
.g-cartografia-medir-area:before {
   color: #2e2929!important;
}
.g-cartografia-info:before {
   color: #2e2929!important;
}
.m-control.m-measurearea-container.activated button:before {  
	color:#C5342B!important;
}
.g-cartografia-medir-linea:before {
   color: #2e2929!important;
}
.m-control.m-measurelength-container.activated button:before {  
	color:#C5342B!important;
} 

table.featureInfo, table.featureInfo td, table.featureInfo th {
    font-size: 100%!important;
}
#img-logo  {    
    width: 28em!important;
}

#texto-construccion {
    padding: 1em!important;
}
.letra-negrita-20{
    display: inline-block;
    width: 80%;
    text-align: justify;
}
@media screen and (max-width: 400px) {
  .letra-negrita-20 {
    width: calc(50% );
  }
}
.legend {
    font-size: 12px!important; 
    font-family: PT Sans;
}
 html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
			font-family: PT Sans!important; 
        }
 .layer-group-name{
    font-size: 16px
 }
 
.toc-item-layer-header {
    font-size: 12px!important; 
 }
 
 #consultaManualAttributions {
    background-color: #C5342B;
    border-radius: 5px;
    color: white;
    font-size: 1em;
    font-weight: 400;
    padding: 5px;
    position: relative;
    text-decoration: none;
    top: 10px;
	padding: 10px;
}
.logomini{
    width: 200px!important; 
    height: 150px!important; 
	max-height:8em!important; 
}
#logo{text-align: center;}


.m-panel-controls{
	font-family: PT Sans!important;
}

.ol-attribution.m-attributions-container-list{
	font-family: PT Sans!important;
	text-align: center;
	font-weight: bold;
 }
 
 .m-attributions-container li {
   font-size: 1em;
}