* {
	user-drag: none;
	-webkit-user-drag: none;
	font-family: 'Calibri', sans-serif;
	font-size: 15px;
  }
  
  body {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
  }
  
  html, body {
	overflow: hidden;
	margin: 0px;
	color: black;
	background-color: white;
  }	  
  
  span {
    font-size:inherit;
  }
  
  img {
	position:absolute;
  }	
  
  table, th, td {
	border: 1px solid white;
	border-collapse: collapse;
	padding: 2px 5px;
  }	  
  
  table {
	width: 100%;
  }
  
  polyline {
	fill-opacity: 0 !important;
  }
  
  .map_div {
	position: absolute;
	height: 100vh;
	width: 100vw;	
  }	 

  #mapwrapper {
	position: absolute;
	z-index:1;
  }
  
  #xy, #leyenda, #taxon {
	position: fixed;
	background-color:rgba(0,0,0,0.5);
	color:white;
	z-index:2;
	right:5vmin;
	bottom:5vmin;
	font-size:large;
	height:5vmin;
	border-radius:5px;
	display: table; 
	/*pointer-events: none;*/
	border:1px solid black;
  }
  
  #btnul {
    position: fixed;
	top:5vmin;
	left:5vmin;
	display: flex;
	align-items: center; 
	z-index:2;
  }

  #fullscreen, #zmas, #zmenos{
    background-color:rgba(0,0,0,0.5);
    border:1px solid black;
    border-radius:5px;
    z-index:2;
	width: 3em;
	height: 3em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 1em;
  }
  
  #fullscreen {
    background-image: url("./img/fullscreenTrue.svg");
  }
  
  #zmas {
    background-image: url("./img/zmas.svg");
  }
  
  #zmenos {
    background-image: url("./img/zmenos.svg");
  }  
  
  #leyenda {
	right:auto;
	left:5vmin;
	height: 4em;
	display: flex; 
	align-items: center;
	flex-direction: column;
    justify-content: center;
	row-gap: 5px;
  }
  
  #taxon {
	bottom:auto;
	top:5vmin;
        padding:1em;
  }
  
  #year_ {
	position: fixed;
	color: white;
	right:50vw;
	top:5vmin;
	z-index:2;
  }
  
  #grupo {
	font-size:xx-large;
	position: fixed;
	color: white;
	right:5vmin;
	top:5vmin;
	z-index:2;
	display:flex;
  }	  
  
  .year-etq_ {
	font-size:xx-large;
	margin: 0px 10px;
  }
  
  #statsPointer {
	padding-right: 5px;
	
  }
  
  #xy p {
	vertical-align: middle;
	display: table-cell; 
	padding: 5px;
  }
  
  #xytext {
	border-right: 1px solid black;
	border-left: 1px solid black;
  }
  
  #year, #func {
	border-left: 1px solid black;
  }

  #leyenda span {
	padding: 5px;
  }
  
  #xypointer {
	padding-left: 5px;
	border-right: 1px solid black;
  }	  
  
  #wait {
	opacity: 0;
	position: fixed;
	left: 45%;
	top: 45%;
	width: 50px;
	z-index: 1000;
	pointer-events: none;
  }	 
  
  :focus {
	outline: none !important;
  }	 	

  .layerdiv, .vectordiv, .griddiv {
	visibility: hidden;
	position: absolute;
  }
  
  .visible {
	visibility: visible;
  }		

  #raster_layers {
	z-index: 1;
  }
  
  #vector_layers {
	z-index: 4;
	pointer-events:none;
  }
  
  #grid_layers {
	z-index: 3;
  }	 
  
  #label_layers {
	z-index: 5;
	pointer-events:none;
  }	  

  .thick {
	font-weight: bold;
  }
  
  .italic {
    font-style:italic;
  }

  .right {
	float:right;
  }

  .margin10 {
	margin-left:10px;
  }
  
  #labelcont {
	z-index: 6;
	position:absolute;
	top: 0px;
	left: 0px;		
  }	  
  
  .polygon {
	//stroke-width:1;
	//fill-opacity:0;
  }	  

  #habcodecont {
	position:fixed;
	left:10px;
	top:10px;
	color:red;
  }

  .active {
	cursor:pointer;
	pointer-events: auto;
  }

  .label {
	min-width:250px;
	background-color:rgba(0,0,0,0.7);
	position: absolute;
	color:white;
	font-size: medium;
	padding:5px;
	display: flex;
	flex-direction: column;
	align-items:center;
	pointer-events:auto;
  }
  
  #tile {
	pointer-events: auto;
	max-height: 30vh;
	overflow-y: auto;
	overflow-x: hidden;
	width: 100%;
  }

  .tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
  }

  .tooltip .tooltiptext {
	visibility: hidden;
	width:180px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -90px;
	opacity: 0;
	transition: opacity 1s;
	white-space:normal;
  }

  .tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
  }

  .tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
  }

  .coloreado {
	fill:red;
	color:red;
  }

  .greyed {
	color:gray;
  }

  #flash {
	pointer-events: none;
	opacity: 0;
	background-color:red;
	z-index:50;
  }
  
  #overmap {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    background-color:white;
    z-index:55;
    transition: opacity 0.5s ease-in-out;
  }
  
  #overmap:hover {
    opacity:0.7;
  }
  
  .hidden {
	display: none;
  }

  .selected {
	stroke-width:3;
	stroke:#00FFFF !important;
	stroke-dasharray: 0;
	border:3px solid cyan;
  }

  .locked {
	stroke:red;
	fill:red;
	fill-opacity:0;
  }
  
  #toolbox, #toolboxDC {
	position: fixed;
	left:5vmin;
	z-index:2;
	height: 7vmin;
	display: flex;
	align-items:center;
  }	  
  
  #toolbox {
	color: white;
	top:5vmin;
  }
  
  #toolboxDC {
	color: orange;
	bottom:5vmin;
  }
  
  .tb_icon {
	position: relative;
	height: 7vmin;
	width: 7vmin;
	line-height: 7vmin;
	text-align: center;
  }
  
  #drawingLayer {
	cursor: crosshair;
	display:none;
	z-index:4;
  }	  
  
  .cutline {
	pointer-events: none;
	cursor: default;
  }	  
  
  .cambio {
	stroke-width:2;
	fill-opacity:0;
	pointer-events: auto;
  }	  
  
  #DC {
	pointer-events: none;
  }
  
  .valorado {
	fill-opacity:0.5;
	stroke-dasharray:4 1;
  }
  
  .revisado {
	stroke-width:4;
	stroke:white;
	pointer-events: none;
  }

  #escala {
	z-index:25;
	pointer-events: none;
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%,0);
	stroke:black;
	stroke-width:1;
	fill:none;
  }

  #escala text {
	stroke-width:0;
	fill:black;
  }	  
  
  .yellow {
	stroke:yellow;
	fill:yellow;
	fill-opacity:0;
	stroke-width:1;
  }
  
  .redfill {
	stroke:black;
	/*stroke-width:0;*/
	stroke-dasharray:4;
	fill:red;
  }
  
  .nostroke {
	stroke-width: 0;
  }
  
  .blackstroke {
	stroke:black;
	fill:transparent;
	fill-opacity:0;
	stroke-width:2;
  }
  
  .white {
	stroke:white;
	fill:white;
	fill-opacity:0;
	stroke-width:1;
  }

  .orange {
	stroke:orange;
	fill:orange;
	fill-opacity:0;
	stroke-width:2;
  }	
  
  .lime {
	stroke:lime;
	fill:lime;
	fill-opacity:0.10;
	stroke-width:0;
	pointer-events:none;
  }	

  .novoid {
	fill-opacity:0.25;
  }	  
  
  #bodyStats {
	color:white;
  }

  #mainStats, #graphStats, #dataStats, #bodyStats, #HCmenu, #WMSLayer {
	left: 0px;
	top: 0px;
	position: fixed;
	overflow: hidden;
	margin: 0px;
	background-color:transparent;
	color: black;
	height: 100vh;
	width: 100vw;
  }
  
  #WMSLayer {
	display:none;
	z-index:3;
  }
  
  #bodyStats, #HCmenu {
	color:white;
	opacity:0;
	transition: opacity 1s;
	z-index:3;
	background-color:rgba(255,255,255,0.85);
  }	  
  
  #HCmenu {
	display:none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap
  }	 	    

  #graphStats {
	top: 15%;
	height: 85vh;
  }

  #dataStats {
	z-index:2;
	height:auto;
  }

  #voidStats {
	height: 15vh;
  }

  .barra {
	stroke-width: 1;
	fill-opacity:0.5;
  }
  
  .blue {
	fill:blue;
	stroke:blue;
  }
  
  .red {
	fill:red;
	stroke:red;
  }	  
  
  .green {
	fill:green;
	stroke:green;
  }	 
  
  .gray {
	fill:black;
	stroke:black;
  }
  
  .texthorizontal {
	position: absolute;
	transform: translate(-50%,-100%);
  }

  .textvertical {
	position: absolute;
	transform: rotate(-90deg);
	transform-origin: 0% 0%;
  }

  .tvertical {
	text-align: right;
	position: absolute;
	transform: translateX(-100%);
	white-space: nowrap;
  }

  .statgreyed {
	font-size:80%;
	color:grey;
	pointer-events: none;
  }
  
  .black {
	font-size:80%;
	color:black;
	pointer-events: none;
  }	  	  
  
  #tituloStats {
	display: none;
	justify-content: center;
  }

  .title {
	font-size:150%;
	text-align: center;
	padding:20px;
	white-space: nowrap;
	font-weight: normal;
  }
  
  .actual {
	font-weight: bold;
  }

  #formcenter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 80%;
	margin-left: 10%;
  }
  
  #exitStats, #exitHCmenu {
	color: black;
	position:absolute;
	font-size:3em;
	right:0.5em;
	top:0;
  }

  .tableFixHead { 
	overflow-y: auto; 
	height: 90%; 
	color: black;
  }
  
  .tableFixHead table th td{ 
	border:0;
  }
  
  .tableFixHead thead th { 
	background-color:white;
	position: sticky; 
	top: 0; 
  }	  
  
  #sigpac20 {
	pointer-events:none;
  }
  
  #inputdummy {
	position:absolute;
	width:0;
	left:-100px;
	top:-100px;
  }
  
  #fuente {
	margin-right: 20px;
	font-size:75%;
	max-width: 35vw;
  }
  
  .red {
	color:red;
  }
  
  .ul {
	border-bottom: 1px dotted;
  }	  
  
  .selectable {
	user-select: text;
	line-break: anywhere;
  }
  
  #imggradiente {
	position: relative;
	width: 5em;
	height: 2em;
  }
  
  .tesela {
	fill-opacity:0.5;
  }
  
  .bounds {
	border:1px solid white;
	width:100%;
	display: flex;
	flex-direction: column;
	align-items:center;
        padding:5px 0;
  }

  .arrow-right {
	width: 0; 
	height: 0; 
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
  
	border-left: 1em solid;
	border-left-color: rgba(0,0,0,0.7);
	position: absolute;
	right: -1em;
  }	

  .arrow-left {
	width: 0; 
	height: 0; 
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
  
	border-right: 1em solid;
	border-right-color: rgba(0,0,0,0.7);
	position: absolute;
	left: -1em;		
  }	  
  
  .noborder {
	border: none;
	white-space: normal;
  }
  
  .bold {
	font-weight: bold;
	font-size: x-large;
  }

  #context {
    z-index:2;
    fill:transparent;
	stroke:black;
	stroke-width:1px;
  }

  .com_aut {
    fill:#dedfcf;
  }	
  
  .pais {
    fill:#f6f8e0;
  }
  
  .oceano {
    fill:#c0e6f1;
  }  
  
  .prov {
	stroke:#444444;
  }
	  
  .swal-button {
    background-color: rgb(117,158,137);
  }

#inputtaxon {
    font-size:large;
}

  .swal-modal > div {
    user-select:text !important;
  }