#map {
        height: 100%;
		}
      
		html, body {
        height: 100%;
        margin: 0;
        padding: 0;
		}
	  
		#wrapper { position: relative;
		overflow:   auto;
		}			
	
		
		#QUEJA { position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		width: 75%;
		height: 90%;
		overflow:  auto;		
		max-height: 80%;
		transition: 1s;	
		z-index: 1001;	
		border-radius: 15px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		background-color: rgba(255,255,255, 0.9);		
		font-family: 'Roboto', sans-serif;
		color: #000;
		font-size: 180%;
		letter-spacing: 3px;
		display: none;
		}
		
		#loc_point { position: absolute;
		cursor: pointer;
		display: none;
		font-family: 'Roboto', sans-serif;
		padding: .5em 1em;
		
		font-size: 160%;
	
		
		
		top: 25%;
		right: 50%;
		transform: translate(50%, -50%);
		width: 0%;
		
		overflow:  auto;		
		max-height: 80%;
			
		z-index: 1001;	
		border-radius: 15px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		background-color: rgba(255,0,0, 0.4);		

		
		}
		
		#compliants_s { position: absolute;
		top: 40%;
		right: 1%;
		height: 8%;
			
		z-index: 3;	
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		
		#HELP_s { position: absolute;
		cursor: pointer; 
		border-radius: 10px;
		top: 20%;
		right: 1%;
		
		height: 8%;
		
		
		
		z-index: 3;	
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		

		}
		
		.selected {
  border: 7px solid rgba(255, 0, 0, .6);
  transition: 1s;	
}
		
		#QUEJA_s { position: absolute;
		top: 30%;
		right: 1%;
		height: 8%;
		
		z-index: 3;	
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		#cal_s { position: absolute;
		top: 10%;
		right: 1%;
		height: 8%;
		 transition: 1s;
		z-index: 3;	
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		
		#QUEJA2 {
		padding: .5em 1em;
		}
		
		#QUEJA3 {
		padding: .5em 1em;
		}
		
		#QUEJA1 {
		padding: .5em 1em;
		}
		
		#tooltipq {
		border-radius: 15px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		padding: .5em 1em;
		font-family: 'Roboto', sans-serif;
		display: none;
		position: absolute;
		font-size: 180%;
		z-index: 1000;
		background-color: rgba(255,255,255,1);
		transform: translate(-100%, 00%);
		}	
		

	
	#loading_container {
		pointer-events: none;
		font-family: 'Roboto', sans-serif;
		-webkit-text-fill-color: red;
		  

		font-size: 45px;
		letter-spacing: 2px;
		
		
		position: absolute;
		bottom: 30%;  
		right: 50%; 
		
		z-index: 100;	
		
		
		}
		
		.frame_m {
		
		font-family: 'Roboto', sans-serif;
		position: absolute;
		bottom: 50%;  
		right: 50%; 
		transform: translate(50%, 50%); 

		font-size: 25px;
		
		
		
		
		
		
			
		
		
		}
		
		
		
		
		
		
		#error_container { 
		pointer-events: none;
		font-family: 'Roboto', sans-serif;
		-webkit-text-fill-color: red;
 
		font-size: 45px;
		letter-spacing: 2px;
		
		
		position: absolute;
		top: 50%;  
		left: 50%; 
		transform: translate(-50%, -50%); 
		z-index: 4;
		}
		
		
		
		
		#info1_container { 
		pointer-events: none;
		font-family: 'Roboto', sans-serif;
		color: rgba(0, 0, 0, 0.7);
		font-size: 20px;
		letter-spacing: 5px;
		
		pointer-events: none;
		position: absolute;
		bottom: 7%;  
		  
		width: 100%;
		transform: translate(0,0%); 
		z-index: 100;
		}
		
		
		
		
		
		
		#info2_container { 
		font-family: 'Roboto', sans-serif;
		
		font-size: 18px;
		letter-spacing: 5px;
		pointer-events: none;
		
		position: absolute;
		top: 5%;  
		Right: 50%; 
		transform: translate(50%);
		z-index: 100;
		}
		
		
		
		
		#plot_box { position: absolute;	
		z-index: 2;
		
		width: 100%;
		height:100%;
		border-radius: 15px;
		background-color:rgba(255, 255, 255, 0.9);	
		cursor :  url('/images/G3.png')31 22, auto;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);		padding:8px;

		
		
		}
		
		#plot_container { position: absolute;		
		bottom: 2%;
		right: 7%;
		
		width: 92%;
		height: 38%;

		display: none;
		z-index: 2;
		}
		
		
		#rec_player_container { position: absolute;
		bottom: 52.5%;
		right: 33%;
		transform: translate(50%, 0%);
		z-index: 300000000000000;
		box-shadow: 0 4px 8px 0 rgba(255, 0, 0, 0.2), 0 6px 20px 0 rgba(255, 0, 0, 0.19);
			background-color:rgba(255, 0, 0, 0.5);		
		border-radius: 15px;
		font-size: 12px;
		line-height: 100%;
		display: none;
		}	
		
		#gif1 { position: relative;	
		
		z-index: 10;
		width: 166px;
		height:71px;
		border-radius: 15px;
		
		
		transition: 2s;	
		
		}
		
		#gif1:hover {
		
		width: 500px;
		height:	213px;		
		}
		
		
		#gif1a { position: absolute;	
		
		z-index: 9;
		width:100%;
		height:100%;
		border-radius: 15px;
		

		
		}
		#gif1b { position: absolute;	
		
		z-index: 10;
		width:100%;
		height:100%;
		border-radius: 15px;
		opacity: 1;
    filter: alpha(opacity=100);
		

		
		}
		
		#gif1b:hover {
		
		 opacity: 0;
    filter: alpha(opacity=0);		
		}
		
		
		
		
		
		
		
		
		#gif2 { position: relative;	
		
		z-index: 10;
		width: 166px;
		height:71px;
		border-radius: 15px;
		
		
		transition: 2s;	
		
		}
		
		#gif2:hover {
		
		width: 500px;
		height:	213px;		
		}
		
		
		#gif2a { position: absolute;	
		
		z-index: 9;
		width:100%;
		height:100%;
		border-radius: 15px;
		

		
		}
		#gif2b { position: absolute;	
		
		z-index: 10;
		width:100%;
		height:100%;
		border-radius: 15px;
		opacity: 1;
    filter: alpha(opacity=100);
		

		
		}
		
		#gif2b:hover {
		
		 opacity: 0;
    filter: alpha(opacity=0);		
		}
		
		
		
		#gif3 { position: relative;	
		
		z-index: 10;
		width: 166px;
		height:71px;
		border-radius: 15px;
		
		
		transition: 2s;	
		
		}
		
		#gif3:hover {
		
		width: 500px;
		height:	213px;		
		}
		
		
		#gif3a { position: absolute;	
		
		z-index: 9;
		width:100%;
		height:100%;
		border-radius: 15px;
		

		
		}
		#gif3b { position: absolute;	
		
		z-index: 10;
		width:100%;
		height:100%;
		border-radius: 15px;
		opacity: 1;
    filter: alpha(opacity=100);
		

		
		}
		
		#gif3b:hover {
		
		 opacity: 0;
    filter: alpha(opacity=0);		
		}
		
		
		
		
		#plot_box2 { position: absolute;	
		
		z-index: 10;
		width: 100%;
		height:100%;
		border-radius: 15px;
		background-color:rgba(255, 255, 255, 1);	
		
		border: 2px solid #000;
		
		}
		
		#plot_container2 { position: absolute;	
				
		bottom: 45%;
		right: 50%;
		z-index: 3;
		width: 75%;
		height: 35%;
		transform: translate(50%, 50%);
		display: none;
		
		}
		
		
		
		
		
		
		
	
		
		
		#lg1{ 
		max-width: 50%;
		position: absolute;		
		top:1%;
		right: 1%;
		height: 6%;
		z-index: 5;		
		transform: translate(0%, 0%);
		
		}
		
		#lg2{ 
	
		position: absolute;		
		top:1%;
		right: 1%;
		
		z-index: 6;		
		transform: translate(0%, 0%);
		}
		
		
		
		
	
		#Btns { position: absolute;
		max-width:45%;
		border-radius: 10px;
		display: none;
		top:1%;
		left: 1%;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);		padding:8px;
		
		
		
		z-index: 1;	
		
	

		
		background-color: rgba(255,0,0,0.4);
		

		}
		
		
		#HELP { position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		display: none;
		width: 85%;
		height: 80%;
		overflow:  auto;
		
		max-height: 80%;
		transition: 2s;	
		z-index: 1001;	
	
		border-radius: 15px;
		background-color:rgba(255, 255, 255, 0.9);	
		
		
		

		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

		
		font-family: 'Roboto', sans-serif;
		color: #000;
		font-size: 180%;
		letter-spacing: 3px;

		}
		
		
		
		
	
		#HELP_i { position: absolute;
		width: 95%;
		right: 50%;
		top:50%;
		height:95%;
		transform: translate(50%, -50%);
		
		overflow:  auto;
		z-index: 3;	
		
		

		}
		
		#p2{ 
			column-count: 2;
		}
		#t{ 
		width: 100%;
			font-size: 100%;
		}
		
		
		
		
		.texts {font-family: 'Roboto', sans-serif;
		color: #000;
		font-size: 100%;
		max-width: 98%;
		border-radius: 15px;
		}
		.textsss {font-family: 'Roboto', sans-serif;
		color: #000;
		font-size: 170%;
		max-width: 98%;
		border-radius: 15px;
		}
		
		.texts_plot {font-family: 'Roboto', sans-serif;
		
		font-size: 18px;
		
		
		}
		
		.texts_btn {font-family: 'Roboto', sans-serif;
		color: #000;
		font-size: 130%;
		letter-spacing: 3px;
		background-color: rgba(255,255,255,1);
		border: 1px solid #000;
		border-radius: 15px;
		padding: .5em 1em;
		cursor :  pointer;
		}
		
		.textss {font-family: 'Roboto', sans-serif;
		color: #000;
		align: center;
		font-size: 18px;
		letter-spacing: 3px;
		font-weight: bold;
		display: none;
		}
		
		.list {font-family: 'Roboto', sans-serif;
		
		border-radius: 15px;
		font-size: 200%;
		letter-spacing: 3px;
		font-weight: bold;
		text-align-last:center;
		max-width: 98%;|
		color: #000;
   
		}