/* Barra de selección de capa base */
#baselayerSelectorPanel {
	position: absolute;
	top: 80px;
	right: 25px;
	z-index: 100003;
	display: flex;
}

/*TODO FIXME adaptar a distintos tamaños de pantalla igual para navigationTable y viewerTable  */
@media (max-width: 991px) {
	#baselayerSelectorPanel {
		top: 65px;
	}
}
@media (max-width: 576px) {
	#baselayerSelectorPanel {
		top: 55px;
		right: 15px;
	}
}
/*Descomentar si hay botón de Debug visible*/
/*
@media (max-width: 347px) {
	#baselayerSelectorPanel {
		top: 75px;
		right: 15px;
	}
}
*/

.tool-notification-container,
.toast-message-container {
	border-radius: 10px;
	cursor:pointer;
	position:absolute;
	top:80px;
	left:50%;
	color:white;
	background-color:#222d32;
	padding:8px;
	text-align: center;
}

.tool-notification-container {
	border: 2px solid #388e3d;
	z-index:2000;
}

.toast-message-container {
	z-index:3000;
}

.baselayerSelectorButton {
}

#measuresPanel {
	position: absolute;
	right: 0px;
	display: flex;
	flex-direction: row-reverse;
}

.toolImg {
	width: 40px;
	height: 40px;
	margin: 4px;
	cursor: pointer;
}
@media (max-width: 576px) {
	.toolImg {
		width: 48px;
		height: 48px;
		margin: 8px;
	}
}

/* Barra de herramientas responsive */
#viewerTable {
	position: absolute;
	top: calc(80px + 40px + 8px);
	right: 25px;
	z-index: 100003;
	display: block;
}

#navigationTable {
	position: absolute;
	bottom: 8px;
	z-index: 100003;
	right: 4px;
	top: calc(60px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 8px);
	display: flex;
}

.navigationTable-feature-info {
	top: calc(60px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 8px) !important;
}

@media (max-width: 991px) {
	#viewerTable {
		top: calc(65px + 40px + 8px);
	}
	
	#navigationTable {
		top: calc(65px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 8px);
	}

	.navigationTable-feature-info {
		top: calc(65px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 8px) !important;
	}
}
@media (max-width: 576px) {
	#viewerTable {
		top: calc(55px + 48px + 16px);
		right: 15px;
	}
	
	#navigationTable {
		top: calc(60px + 8px + 60px + 60px + 60px + 60px + 60px + 8px);
		right: 15px;
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 60px + 60px + 60px + 60px + 60px + 60px + 8px) !important;
	}
	
	#zoomInButton {
		display: none;
	}
	#zoomOutButton {
		display: none;
	}
	#nextExtButton {
		display: none;
	}
	#prevExtButton {
		display: none;
	}
	/*#printMapButton {
		display: none;
	}*/
}

/*Descomentar si hay botón de Debug visible*/
/*
@media (max-width: 347px) {
	#viewerTable {
		top: calc(75px + 48px + 16px);
		right: 15px;
	}
	#zoomInButton {
		display: none;
	}
	#zoomOutButton {
		display: none;
	}
	#nextExtButton {
		display: none;
	}
	#prevExtButton {
		display: none;
	}
	#printMapButton {
		display: none;
	}
}
*/
@media (max-height: 600px) and (min-width: 577px) {
	#navigationTable {
		right: 76px;
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 16px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 24px) !important;
	}
}

@media (max-height: 510px) and (min-width: 577px) {
	#navigationTable {
		right: 76px;
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 8px) !important;
	}
}

@media (max-height: 510px) {
	#nextExtButton {
		display: none;
	}
	#prevExtButton {
		display: none;
	}
}
@media (max-height: 420px) {
	#zoomInButton {
		display: none;
	}
	#zoomOutButton {
		display: none;
	}
	#navigationTable {
		right: 2px;
		top: calc(60px + 40px + 40px + 40px + 40px + 40px + 40px + 4px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 4px) !important;
	}
}
@media (max-height: 330px) {
	#printMapButton {
		display: none;
	}
	
	#navigationTable {
		right: 2px;
		top: calc(60px + 40px + 40px + 40px + 40px + 24px);
	}

	.navigationTable-feature-info {
		right: calc(25px + 40px + 8px) !important;
		top: calc(60px + 40px + 40px + 40px + 40px + 32px) !important;
	}
}

@media (max-width: 991px) and (max-height: 600px) {
	#navigationTable {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 30px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 30px) !important;
	}
}


@media (max-width: 991px) and (max-height: 510px) {
	#navigationTable {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 14px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 40px + 14px) !important;
	}
}


@media (max-width: 991px) and (max-height: 420px) {
	#navigationTable {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 40px + 38px) !important;
		right: calc(25px + 40px + 8px) !important;
	}
}


@media (max-width: 991px) and (max-height: 330px) {
	#navigationTable {
		top: calc(60px + 8px + 40px + 40px + 40px + 20px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 40px + 40px + 40px + 40px + 20px + 10px) !important;
		right: calc(40px + 25px + 8px) !important;
	}
}


@media (max-width: 576px) and (max-height: 600px) {
	#navigationTable {
		top: calc(60px + 8px + 60px + 60px + 60px + 60px + 60px + 8px);
		right: 15px;
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 60px + 60px + 60px + 60px + 60px + 60px + 8px) !important;
	}
}


@media (max-width: 576px) and (max-height: 510px) {
	#navigationTable {
		display: flex;
		top: calc(60px + 8px + 60px + 60px + 60px + 60px + 60px + 8px);
		right: 2px;
	}

	.navigationTable-feature-info {
		top: calc(60px + 8px + 60px + 60px + 60px + 60px + 60px + 60px + 8px) !important;
		right: calc(18px) !important;
	}
}

@media (max-width: 576px) and (max-height: 420px) {
	#navigationTable {
		right: 76px;
		display: flex;
		top: calc(60px + 40px + 40px + 40px + 40px + 40px + 12px);
	}

	.navigationTable-feature-info {
		top: calc(60px + 40px + 40px + 40px + 40px + 40px + 40px + 12px) !important;
	}
}

@media (max-width: 576px) and (max-height: 330px) {
	#navigationTable {
		right: 2px;
		top: calc(60px + 40px + 40px + 40px + 40px + 16px);
		display: flex;
	}

	.navigationTable-feature-info {
		top: calc(60px + 40px + 40px + 40px + 40px + 40px + 40px + 12px) !important;
		right: calc(25px + 40px + 8px) !important;
	}
}

/* Panel de ayuda */
#helpInfoContainer {
	height: 18px;
    left: 300px;
	padding: 2px;
    border: 1px solid #ffffff;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-color: #145b8c;
    text-align: center;
    color: #FFFFFF;
    font-family: Arial;
	font-size: 10pt;
}

/* Barra de info */
.olControlIAAA_NavBarInfo {
	display: none;
}

/* Diá8logo para centrar el mapa */
#centerMapDialog {
	background-color: #FFFFFF;
	border: 1px solid #145b8c; /*#4282b5;*/
	opacity: 0.8;
    filter: alpha(opacity=80);
    padding: 25px;
    cursor: default;
    font-family: Arial;
}

/* Estilo de tótulo de popups */
.popupTitle {
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-weight: bold;
	font-size:	0.9rem;
}

/* Por defecto todos los textos son de color blanco */
.popupTitle, .popupDescription, .popupDescription-handheld, 
.popupDescription-tablet {
	/*color: #ffffff;*//*popup source: cloud-popup-relative*/
	color: #000000;/*popup source: cloud-popup-relative-white*/
}

/* Estilo de descripción de popups */
.popupDescription {
	padding: 5px;
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 0.9rem;
}

/* Estilo de descripción de popups */
.popupDescription-handheld {
	padding: 5px;
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 0.9rem;
}

/* Estilo de descripción de popups */
.popupDescription-tablet {
	padding: 5px;
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 0.9rem;
}

/* Estilo de lista de popups */
.popupList {
	height: 99%;
	overflow-y: auto;
	margin: 0px; 
	padding: 0px;
	/*min-width: 320px;*/
	/*color: #FFFFFF;*//*popup source: cloud-popup-relative*/
	color: #000000;/*popup source: cloud-popup-relative-white*/
}

.popup-category-item-link {
	padding-left: 8px;
}

.popup-category-li-header {
	margin-bottom: 6pt;
	text-decoration: underline;
}

.popup-li-gap {
	font-size: 6pt;
}

/* Estilo de espacio entre tótulo y descripción de popups */
.popupTitleGap {
	font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
	font-size: 4pt;
}

.olControlIAAA_OverviewMap_213{
	background-color: #264b9c;
}

.popup-category-li {
	list-style: none outside none;
}

.popup-category-icon {
	margin-right: 8px;
	width: 16px;
	height: auto;
	/*Mostrar el icono blanco si popup source: cloud-popup-relative-white*/
	/*filter: invert(1);*/
}

.popup-category-item-name {
	vertical-align: bottom;
}

.popup-separator {
	width: 100%;
	height: 3px;
	margin-top: 3px;
	margin-bottom: 3px;
}

.popup-item-separator {
	width: 100%;
	height: 8px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.popup-separator-line {
	width: 100%;
	height: 3px;
	background-color: #FFFFFF;
	margin-top: 3px;
	margin-bottom: 3px;
	font-size: 2pt;
}

.fullExtent, .zoomIn, .zoomOut, .previousExtent,
.nextExtent, .dist, .area, .printMap {
   /* Do not show the focus outline on the anchor nodes*/
   outline: 0;/*Ie9 unsupported*/
}

.info-card {
	background-color: rgba(236,240,245,0.8);
	padding: 8px;
	border-radius: 8px;
}
