html,body {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			}
		body {
			font-family: 'Montserrat', sans-serif;
			}
		#map {
			height: calc(100vh - 50px);
			width: 100%;
			}
				
		@media all and (max-width: 768px) {
			nav {
				justify-content: space-around;
			}
			nav a.logo {
				flex: 100%;
			}
			.map {
				height: calc(100vh - 96px);
			}
		}

		@media all and (max-width: 480px) {
			nav {
				flex-flow: column wrap;
				padding: 0;
			}
			nav a {
				padding: 10px;
				border-top: 1px solid rgba(255, 255, 255, 0.3);
			}
			.map {
				height: calc(100vh - 168px);
			}
		}

		nav {
			display: flex;
			flex-direction: row; 
			flex-wrap: wrap;
			justify-content: flex-start;	
			overflow: hidden;
			background-color: #161925;
			-webkit-box-shadow: 0px 2px 5px 0px rgba(100, 100, 100, 1);
			-moz-box-shadow: 0px 2px 5px 0px rgba(100, 100, 100, 1);
			box-shadow: 0px 2px 5px 0px rgba(100, 100, 100, 1);
			}
		nav a {
			float: left;
			color: #f2f2f2;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
			font-size: 17px;
			}
		nav a:hover {
			background-color: #8EA8C3;
			color: black;
			}
		nav a.logo {
			background-color: #23395b;
			color: white;
			}
		nav a.boton {
			float: right;		
			text-align: center;
			font-size: 17px;
			background-color: #8EA8C3;
			color: black;
			}
		nav a.medicion {
			float: right;		
			text-align: top;
			font-size: 17px;
			background-color: #8EA8C3;
			color: black;
			}
		nav a#init-view {
			background-color: solid 1px #8EA8C3 !important;
		}	
		#escudo{
			position: flex;
			left: 0px;
			background-repeat: no-repeat;
			background-size: contain;
			background-color: white;
			}

		.ol-full-screen {
			left: 0.5em !important;
			top: 4em !important;
			right: auto !important;
			}
		.ol-mouse-position {
			top: 20em;
			right: 0.5em;
			left: auto;
			bottom: auto;
			color:  black;
			background-color: #8EA8C3;
			border: solid 1px #23395b;
			}
		.ol-control button { 
			color:  #e0e1dd !important;
			background-color: #8EA8C3 !important;
			}
		.ol-control button:hover { 
			background-color: #23395b !important;
			}


		.ol-popup {
			position: flex;
			background-color: #fff;
			--webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
			box-shadow: drop-shadow( 1px 4px rgba(0,0,0,0.2));
			padding: 5px 8px;
			border-radius: 10px;
			bottom: 12px;
			left: -50px;
			min-width: 20px;
		}
		.ol-popup-container-header {
			padding: 1px 1px;
			border-bottom: 1px solid #750550;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		.container-title {
			display: flex;
			align-items: center;
			gap: 8px;
			line-height: 1;
			font-weight: 700;
			font-size: 1.125;
			svg {
				width: 20px;
				height: 20px;
				color:black;
			}
		}
		#popup-closerbutton {
			position:absolute;
			right: 6px;
			padding: 0;
			border: 0;
			background-color: transparent;
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			cursor: pointer;
			border-radius: 8px;
			transition: 0.15s ease;
			svg {
				width: 24px;
				height: 24px;
			}
			&:hover,
			&:focus {
				background-color: #dfdad7;
			}
		}	
		.popup-content{
				padding: 10px 10px 10px;
				overflow-y: auto;
		}
		.popup-footer {
			padding: 8px 8px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			border-top: 1px solid #750550;
			gap: 12px;
			position: relative;
			&:after {
				content: "";
				display: block;
				position: absolute;
				top: -51px;
				left: 24px;
				right: 24px;
				height: 50px;
				flex-shrink: 0;
				background-image: linear-gradient(to top, rgba(#fff, 0.75), transparent);
				pointer-events: none;
			}
		}			
		a#footer1 {
			padding: 12px 20px;
			border-radius: 8px;
			background-color: transparent;
			border: 0;
			font-weight: 500;
			cursor: pointer;
			transition: 0.15s ease;
			background-color: #750550;
			color: #fff;
			&:hover,
			&:focus {
				background-color: #4a0433;
			}
		}
		a#footer2 {
			padding: 12px 20px;
			border-radius: 8px;
			background-color: transparent;
			border: 0;
			font-weight: 500;
			cursor: pointer;
			transition: 0.15s ease;
			background-color: #750550;
			color: #fff;
			&:hover,
			&:focus {
				background-color: #4a0433;
			}
		}


		.ol-tooltip {
			position: relative;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 4px;
			color: white;
			padding: 4px 8px;
			opacity: 0.7;
			white-space: nowrap;
			font-size: 12px;
			cursor: default;
			user-select: none;
		}
		.ol-tooltip-measure {
			opacity: 1;
			font-weight: bold;
		}
		.ol-tooltip-static {
			background-color: #ffcc33;
			color: black;
			border: 1px solid white;
		}
		.ol-tooltip-measure:before,
		.ol-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%;
		}
		.ol-tooltip-static:before {
			border-top-color: #ffcc33;
		}
		.autocomplete {
			max-height: 140px;
		}

		/*layerswitcher image*/
		.ol-control.ol-layerswitcher-image {
			top: 46em !important;
		}
		.ol-control.ol-layerswitcher-image.ol-collapsed {
			top:47em !important;
		}
		.ol-layerswitcher-image.ol-collapsed .panel {
			display:block !important;
		  }
		.ol-layerswitcher-image.ol-collapsed button {
			display:none !important;	
		}
		.ol-layerswitcher-image li {
			width: 74px !important;
			height: 74px !important;
		}
		.ol-layerswitcher-image li img {
			max-width:120% !important;
		  }
		.ol-layerswitcher-image li:hover p {
			font-size:0.75em !important;
		  }
		/*geocoder*/  
		.ol-touch .ol-geocoder.gcd-gl-container {
			font-size: 4.1em !important; 
			}
		.ol-geocoder.gcd-gl-container {
			top: .5em !important; 
			left: 19em !important;
		}
		.ol-geocoder .gcd-gl-control {
			width: 2em !important;
			height: 2em !important;
			overflow: block !important;
		}		
		.ol-geocoder .gcd-gl-expanded {
			width: 14.625em !important;
		}
		.ol-geocoder .gcd-gl-input {
			top: 0.20em !important;
			left: 2.5em !important;
			width: 14.84375em;
		}
		.ol-geocoder ul.gcd-gl-result {
			border-radius: 1px !important;
		}
		/*buscador por atributo*/
		.ol-search{
			left: 2.5em !important;
			font-size: 1em !important;
		}
		.ol-search input {
			font-size: 1em !important;
		}
		.ol-touch .ol-search input,
		.ol-touch .ol-search ul {
		  font-size: 1em !important;
		}
		.ol-search.ol-revers > ul,
		.ol-control.ol-search.ol-collapsed > * {
		  display: block !important;
		}
		.ol-search ul {
			max-width: 14em !important;
		}
		.ol-control.ol-search ul {
			position: absolute !important;
			box-shadow: 5px 5px 5px rgba(0,0,0,0.5) !important;
		  }