Merge branch '110-Mejoras_visuales_en_consola_Visual' into 'develop'

110 mejoras visuales en consola visual #110 See merge request !29
2025-07-30 09:15:15 +02:00 · 2017-01-16 14:44:24 +01:00 · 2017-01-16 14:44:24 +01:00 · 1ca30286ab
commit 1ca30286ab
parent a27f72168d 897da6d5da
36 changed files with 1595 additions and 408 deletions
--- a/pandora_console/extras/pandoradb_migrate_6.0_to_6.1.mysql.sql
+++ b/pandora_console/extras/pandoradb_migrate_6.0_to_6.1.mysql.sql
@ -124,6 +124,7 @@ ALTER TABLE tlayout ADD `background_color` varchar(50) NOT NULL default '#FFF';
 -- Table `tlayout_data`
 -- ---------------------------------------------------------------------
 ALTER TABLE tlayout_data ADD `type_graph` varchar(50) NOT NULL default 'area';
+ALTER TABLE tlayout_data ADD `label_position` varchar(50) NOT NULL default 'down';

 -- ---------------------------------------------------------------------
 -- Table `tagent_custom_fields`
--- a/pandora_console/extras/pandoradb_migrate_6.0_to_6.1.oracle.sql
+++ b/pandora_console/extras/pandoradb_migrate_6.0_to_6.1.oracle.sql
@ -102,6 +102,7 @@ ALTER TABLE tlayout ADD COLUMN background_color varchar(50) NOT NULL default '#F
 -- Table `tlayout_data`
 -- ---------------------------------------------------------------------
 ALTER TABLE tlayout_data ADD COLUMN type_graph varchar(50) NOT NULL default 'area';
+ALTER TABLE tlayout_data ADD COLUMN label_position varchar(50) NOT NULL default 'down';

 -- ---------------------------------------------------------------------
 -- Table `tagent_custom_fields`
--- a/pandora_console/extras/pandoradb_migrate_6.0_to_6.1.postgreSQL.sql
+++ b/pandora_console/extras/pandoradb_migrate_6.0_to_6.1.postgreSQL.sql
@ -38,8 +38,4 @@ ALTER TABLE tlayout ADD COLUMN background_color varchar(50) NOT NULL default '#F
 -- Table `tlayout_data`
 -- ---------------------------------------------------------------------
 ALTER TABLE tlayout_data ADD COLUMN type_graph varchar(50) NOT NULL default 'area';
-
-- ---------------------------------------------------------------------
-- Table `tgraph`
-- ---------------------------------------------------------------------
-ALTER TABLE tgraph ADD COLUMN percentil int(4) unsigned default 0;
+ALTER TABLE tlayout_data ADD COLUMN label_position varchar(50) NOT NULL default 'down';
--- a/pandora_console/fonts/lato.woff2
+++ b/pandora_console/fonts/lato.woff2
--- a/pandora_console/fonts/leaguegothic.woff
+++ b/pandora_console/fonts/leaguegothic.woff
--- a/pandora_console/fonts/opensans.woff2
+++ b/pandora_console/fonts/opensans.woff2
--- a/pandora_console/fonts/roboto.woff2
+++ b/pandora_console/fonts/roboto.woff2
--- a/pandora_console/godmode/reporting/visual_console_builder.data.php
+++ b/pandora_console/godmode/reporting/visual_console_builder.data.php
@ -134,24 +134,23 @@ else{


 $table->data[5][0] = __('Size - (Width x Height)');
-$table->data[5][1] = html_print_input_text('width', 1024, '', 10, 10, true , true) .
+
+if($action == 'new'){
+$table->data[5][1] = '<button id="modsize" style="margin-right:20px;" value="modsize">Set custom size</button>';
+}
+else{
+$table->data[5][1] = '<button id="modsize" style="margin-right:20px;" value="modsize">Set custom size</button>';
+}
+
+$table->data[5][1] .= '<span class="opt" style="visibility:hidden;">'.html_print_input_text('width', 1024, '', 10, 10, true , false) .
 	' x ' .
-	html_print_input_text('height', 768, '', 10, 10, true, true);
+	html_print_input_text('height', 768, '', 10, 10, true, false).'</span>';

 if($action == 'new'){
-$table->data[5][1] .= '<button disabled id="getsize" style="margin-left:20px;" value="modsize">Set default size</button>';
+$table->data[5][1] .= '<span class="opt" style="visibility:hidden;">'.'<button id="getsize" style="margin-left:20px;" value="modsize">Set default size</button>'.'</span>';
 }
 else{
-$table->data[5][1] .= '<button id="getsize" style="margin-left:20px;" value="modsize">Set default size</button>';
-}
-
-$table->data[5][1] .= ui_print_help_tip(__("You must define size"), true);
-
-if($action == 'new'){
-$table->data[5][1] .= '<button disabled id="modsize" style="margin-left:20px;" value="modsize">Set other size</button><span style="margin-left:20px;" id="modsizetext">Disabled</span>';
-}
-else{
-$table->data[5][1] .= '<button id="modsize" style="margin-left:20px;" value="modsize">Set other size</button><span style="margin-left:20px;" id="modsizetext">Disabled</span>';
+$table->data[5][1] .= '<span class="opt" style="visibility:hidden;">'.'<button id="getsize" style="margin-left:20px;" value="modsize">Set default size</button>'.'</span>';
 }

 $table->data[5][2] = '<img id="imagen" style="display:none" src="images/console/background/'.$background.'">';
@ -192,45 +191,38 @@ $(document).ready (function () {
 $("#modsize").click(function(event){
    event.preventDefault();
 		
-		if($('input[name=width]').attr('readonly')){
-			$('input[name=width]').attr('readonly',false);
-			$('input[name=height]').attr('readonly',false);
-			$('#modsizetext').html('Enabled');
-				$('input[name=update_layout]').attr('disabled',false);	
-		}
-		else{
-			$('input[name=width]').attr('readonly',true);
-			$('input[name=height]').attr('readonly',true);
-			$('#modsizetext').html('Disabled');
-				$('input[name=update_layout]').attr('enabled',false);	
+		if($('.opt').css('visibility') == 'hidden'){
+			$('.opt').css('visibility','visible');
 		}
 			
 		$('input[name=width]').val($('#imagen').width());
 		$('input[name=height]').val($('#imagen').height());
 			
-	
-		
-		
 });

 $("#getsize").click(function(event){
    event.preventDefault();
 	
-$('input[name=update_layout]').attr('disabled',false);		
 $('input[name=width]').val($('#imagen').width());
 $('input[name=height]').val($('#imagen').height());

-
 });

-
 $("#background").click(function(event){
 	$('#imagen').attr('src','images/console/background/'+$('#background').val());
-	$('input[name=update_layout]').attr('disabled',true);
-	$("#getsize").attr('disabled',false);
-	$("#modsize").attr('disabled',false);
 });

+$( "input[type=submit]" ).click(function( event ) {
+	
+	if($( "#getsize" ).css('visibility')=='hidden'){
+		$('input[name=width]').val($('#imagen').width());
+		$('input[name=height]').val($('#imagen').height());
+	}
+	
+	
+});
+
+
 $("#file-background_image").change(function(event){
 	$('#back').submit();
 });
--- a/pandora_console/godmode/reporting/visual_console_builder.editor.js
+++ b/pandora_console/godmode/reporting/visual_console_builder.editor.js
@ -83,6 +83,22 @@ function visual_map_main() {

 	//Fixed to wait the load of images.
 	$(window).load(function() {
+		
+		$('#radiobtn0001').click(function(){
+			$("#custom_graph option[value=0]").prop("selected", true);
+		});
+		
+		$('.labelpos').click(function(event){
+			$("#labelposup img").attr('src','/pandora_console/images/label_up.png');
+			$("#labelposdown img").attr('src','/pandora_console/images/label_down.png');
+			$("#labelposleft img").attr('src','/pandora_console/images/label_left.png');
+			$("#labelposright img").attr('src','/pandora_console/images/label_right.png');
+			$('.labelpos').attr('sel','no');
+			$("#"+$(this).attr('id')+" img").attr('src','/pandora_console/images/label_'+$(this).attr('id').replace('labelpos','')+'_2.png');
+			$("#"+$(this).attr('id')).attr('sel','yes');
+					
+		});
+		
 			draw_lines(lines, 'background', true);

 			draw_user_lines("", 0, 0, 0 , 0, 0, true);
@ -151,7 +167,6 @@ function is_metaconsole() {

 function update_button_palette_callback() {

-
 	var values = {};

 	values = readFields();
@ -176,33 +191,79 @@ function update_button_palette_callback() {
 			idElement = 0;
 			break;
 		case 'box_item':
+		
+		if($('input[name=width_box]').val() == ''){
+		alert('Undefined width');
+		return false;
+		}
+		if($('input[name=height_box]').val() == ''){
+		alert('Undefined height');
+		return false;
+		}
+		
 			$("#" + idItem + " div").css('background-color', values['fill_color']);
 			$("#" + idItem + " div").css('border-color', values['border_color']);
 			$("#" + idItem + " div").css('border-width', values['border_width'] + "px");
+			
+			if(values['height_box']==0 || values['width_box']==0){
+				$("#" + idItem + " div").css('width', "300px");
+				$("#" + idItem + " div").css('height', "180px");
+			}
+			else{
 				$("#" + idItem + " div").css('height', values['height_box'] + "px");
 				$("#" + idItem + " div").css('width', values['width_box'] + "px");
+			}
 			break;
 		case 'group_item':
 		case 'static_graph':
+		
+		if($('input[name=width]').val() == ''){
+		alert('Undefined width');
+		return false;
+		}
+		if($('input[name=height]').val() == ''){
+		alert('Undefined height');
+		return false;
+		}
+		
 			$("#text_" + idItem).html(values['label']);
 			
-			if ((values['width'] != 0) && (values['height'] != 0)) {
-				$("#image_" + idItem).attr('width', values['width']);
-				$("#image_" + idItem).attr('height', values['height']);
-				$("#" + idItem).css('width', values['width'] + 'px');
-				$("#" + idItem).css('height', values['height'] + 'px');
+			
+			
+			if ((values['width'] == 0) || (values['height'] == 0)) {
+				$("#image_" + idItem).removeAttr('width');
+				$("#image_" + idItem).removeAttr('height');
+				$("#image_" + idItem).attr('width', 70);
+				$("#image_" + idItem).attr('height', 70);
+				$("#image_" + idItem).css('width', '70px');
+				$("#image_" + idItem).css('height', '70px');
+				
 			}
 			else {
 				$("#image_" + idItem).removeAttr('width');
 				$("#image_" + idItem).removeAttr('height');
-				$("#" + idItem +" img").css('width', '70px');
-				$("#" + idItem +" img").css('height', '70px');
-				$("#" + idItem).css('width', '70px');
-				$("#" + idItem).css('height', '70px');
+				$("#image_" + idItem).attr('width', values['width']);
+				$("#image_" + idItem).attr('height', values['height']);
+				$("#image_" + idItem).css('width', values['width'] + 'px');
+				$("#image_" + idItem).css('height', values['height'] + 'px');
 			}
+			
+		
+			
 			break;
 		case 'percentile_bar':
 		case 'percentile_item':
+			
+		if($('input[name=width_percentile]').val() == ''){
+		alert('Undefined width');
+		return false;
+		}
+		if($('input[name=height_percentile]').val() == ''){
+		alert('Undefined height');
+		return false;
+		}
+		
+		
 			$("#text_" + idItem).html(values['label']);
 			$("#image_" + idItem).attr("src", "images/spinner.gif");
 			if (values['type_percentile'] == 'bubble') {
@ -212,8 +273,26 @@ function update_button_palette_callback() {
 				setPercentileBar(idItem, values);
 			}
 			
+			
+
 			break;
 		case 'module_graph':
+		
+		if($('input[name=width_module_graph]').val() == ''){
+		alert('Undefined width');
+		return false;
+		}
+		if($('input[name=height_module_graph]').val() == ''){
+		alert('Undefined height');
+		return false;
+		}
+		if($('#custom_graph_row').css('display') != 'none' && $("#custom_graph option:selected").html() == 'None'){
+				alert('Undefined graph');
+		return false;
+		}
+		
+		
+		
 			$("#text_" + idItem).html(values['label']);
 			$("#image_" + idItem).attr("src", "images/spinner.gif");
 			setModuleGraph(idItem);
@ -228,49 +307,130 @@ function update_button_palette_callback() {
 			$("#text_" + idItem).html(values['label']);
 			break;
 		case 'icon':
+		
+		if($('input[name=width]').val() == ''){
+		alert('Undefined width');
+		return false;
+		}
+		if($('input[name=height]').val() == ''){
+		alert('Undefined height');
+		return false;
+		}
+		
+		
 			$("#image_" + idItem).attr('src', "images/spinner.gif");

-			if ((values['width'] != 0) && (values['height'] != 0)) {
-				$("#image_" + idItem).attr('width', values['width']);
-				$("#image_" + idItem).attr('height', values['height']);
-				$("#" + idItem).css('width', values['width'] + 'px');
-				$("#" + idItem).css('height', values['height'] + 'px');
+			if ((values['width'] == 0) || (values['height'] == 0)) {
+				$("#image_" + idItem).removeAttr('width');
+				$("#image_" + idItem).removeAttr('height');
+				$("#image_" + idItem).attr('width', 70);
+				$("#image_" + idItem).attr('height', 70);
+				$("#image_" + idItem).css('width', '70px');
+				$("#image_" + idItem).css('height', '70px');
+				
 			}
 			else {
 				$("#image_" + idItem).removeAttr('width');
 				$("#image_" + idItem).removeAttr('height');
-				$("#" + idItem).css('width', '70px');
-				$("#" + idItem).css('height', '70px');
-				
-				$("#" + idItem +" img").css('width', '70px');
-				$("#" + idItem +" img").css('height', '70px');
+				$("#image_" + idItem).attr('width', values['width']);
+				$("#image_" + idItem).attr('height', values['height']);
+				$("#image_" + idItem).css('width', values['width'] + 'px');
+				$("#image_" + idItem).css('height', values['height'] + 'px');
 			}
 			var image = values['image'] + ".png";
 			set_image("image", idItem, image);
 			break;
 		default:
+		if($('input[name=width]').val() == ''){
+		alert('Undefined width');
+		return false;
+		}
+		if($('input[name=height]').val() == ''){
+		alert('Undefined height');
+		return false;
+		}
 			//Maybe save in any Enterprise item.
 			if (typeof(enterprise_update_button_palette_callback) == 'function') {
 				enterprise_update_button_palette_callback(values);
 			}
+
 		break;
+		
 	}

 	updateDB(selectedItem, idItem , values);

 	toggle_item_palette();
+	
+	if(values['label_position']=='left'){
+		$("#" + idItem + ' table').css('float','left');
+		$("#" + idItem + ' img').css('float','right');
+		$("#" + idItem + ' img').css('margin-left','');
+		$("#" + idItem + ' table').css('height',$("#" + idItem+ ' img').css('height'));
+		$("#" + idItem + ' table').css('width','');
+		$("#" + idItem + ' img').css('margin-top',(parseInt($("#" + idItem).css('height'))/2)-(parseInt($("#" + idItem + " img").css('height'))/2)+'px');
+		$("#" + idItem + ' > p').remove();
+	}
+	else if(values['label_position']=='right'){
+		$("#" + idItem + ' table').css('float','right');
+		$("#" + idItem + ' img').css('float','left');
+		$("#" + idItem + ' img').css('margin-left','');
+		$("#" + idItem + ' table').css('height',$("#" + idItem+ ' img').css('height'));
+		$("#" + idItem + ' table').css('width','');
+		$("#" + idItem + ' img').css('margin-top',(parseInt($("#" + idItem).css('height'))/2)-(parseInt($("#" + idItem + " img").css('height'))/2)+'px');
+		$("#" + idItem + ' > p').remove();
+	}
+	
+	else if(values['label_position']=='down'){
+		$("#" + idItem + ' table').css('float','');			
+		$("#" + idItem + ' img').css('float','');	
+		var tempoimg = $('#' + idItem + ' table').clone();
+		$('#' + idItem + ' table').remove();
+		$('#' + idItem).append(tempoimg);
+		$("#" + idItem + ' table').css('height','');
+		$("#" + idItem + ' table').css('width','100%');
+		$("#" + idItem + ' span').css('width','100%');
+		$("#" + idItem + ' img').css('margin-top','');
+		//if(parseInt($("#" + idItem).css('width'))-parseInt($("#" + idItem + " img").css('width'))/2 == 0 || values['height'] == 0 || values['width'] == 0){
+			$("#" + idItem + ' img').css('margin-left',(parseInt($("#" + idItem).css('width'))/2)-(parseInt($("#" + idItem + " img").css('width'))/2)+'px');
+		//}
+		//else{
+			//$("#" + idItem + ' img').css('margin-left','');
+		//}
+		
+		$("#" + idItem + ' > p').remove();
+	}
+	else if(values['label_position']=='up'){
+		$("#" + idItem + ' table').css('float','');			
+		$("#" + idItem + ' img').css('float','');	
+		var tempoimg = $('#' + idItem + ' img').clone();
+		$('#' + idItem + ' img').remove();
+		$('#' + idItem).append(tempoimg);
+		$("#" + idItem + ' table').css('height','');
+		$("#" + idItem + ' table').css('width','100%');
+		$("#" + idItem + ' span').css('width','100%');
+		$("#" + idItem + ' img').css('margin-top','');
+		//if(parseInt($("#" + idItem).css('width'))-parseInt($("#" + idItem + " img").css('width'))/2 == 0 || values['height'] == 0 || values['width'] == 0){
+			//$("#" + idItem + ' img').css('margin-left','');
+			
+		//}
+		//else{
+			$("#" + idItem + ' img').css('margin-left',(parseInt($("#" + idItem).css('width'))/2)-(parseInt($("#" + idItem + " img").css('width'))/2)+'px');
+		//}
+		$("#" + idItem + ' > p').remove();
+	}
+		
 }

 function readFields() {
+	
+	$("#text-label_ifr").contents().find("p").css('overflow','hidden');
 	metaconsole = $("input[name='metaconsole']").val();
-
 	var values = {};
-
 	values['label'] = $("input[name=label]").val();
-
-
 	var text = tinymce.get('text-label').getContent();
 	values['label'] = text;
+	values['line-height'] = $("#text-label_ifr").contents().find("p").css('line-height');
 	values['type_graph'] = $("select[name=type_graph]").val();
 	values['image'] = $("select[name=image]").val();
 	values['background_color'] = $("select[name=background_color]").val();
@ -306,6 +466,7 @@ function readFields() {
 	values['line_width'] = parseInt(
 		$("input[name='line_width']").val());
 	values['line_color'] = $("input[name='line_color']").val();
+	values['label_position'] = $(".labelpos[sel=yes]").attr('position');
 	
 	if (is_metaconsole()) {
 		values['metaconsole'] = 1;
@ -333,9 +494,25 @@ function create_button_palette_callback() {
 	var validate = true;
 	switch (creationItem) {
 		case 'box_item':
+		if (($("input[name='width_box']").val() == '')) {
+			alert('Undefined width');
+			validate = false;
+		}
+		if (($("input[name='height_box']").val() == '')) {
+			alert('Undefined height');
+			validate = false;
+		}
 			break;
 		case 'group_item':
 		case 'static_graph':
+			if ((values['width'] == '')) {
+				alert('Undefined width');
+				validate = false;
+			}
+			if ((values['height'] == '')) {
+				alert('Undefined height');
+				validate = false;
+			}
 			if ((values['label'] == '') && (values['image'] == '')) {
 				alert($("#message_alert_no_label_no_image").html());
 				validate = false;
@ -348,6 +525,14 @@ function create_button_palette_callback() {
 			}
 			break;
 		case 'icon':
+			if ((values['width'] == '')) {
+				alert('Undefined width');
+				validate = false;
+			}
+			if ((values['height'] == '')) {
+				alert('Undefined height');
+				validate = false;
+			}
 			if ((values['image'] == '')) {
 				alert($("#message_alert_no_image").html());
 				validate = false;
@ -355,6 +540,10 @@ function create_button_palette_callback() {
 			break;
 		case 'percentile_bar':
 		case 'percentile_item':
+			if ((values['width'] == '')) {
+				alert('Undefined width');
+				validate = false;
+			}
 			if ((values['agent'] == '')) {
 				alert($("#message_alert_no_agent").html());
 				validate = false;
@ -373,6 +562,14 @@ function create_button_palette_callback() {
 			}
 			break;
 		case 'module_graph':		
+			if (values['width_module_graph'] == '') {
+				alert('Undefined width');
+				validate = false;
+			}
+			if (values['height_module_graph'] == '') {
+				alert('Undefined height');
+				validate = false;
+			}
 			if (values['id_custom_graph'] == 0) {
 				if ((values['agent'] == '')) {
 					alert($("#message_alert_no_agent").html());
@ -631,9 +828,6 @@ function toggle_item_palette() {
 			enterprise_activeToolboxButton(false);
 		}

-
-
-
 		if (creationItem != null) {
 			//Create a item

@ -670,9 +864,27 @@ function toggle_item_palette() {

 		hiddenFields(item);

-
-
 		$("#properties_panel").show("fast");
+		
+				$( ".lineheighttd").remove();				
+				//$('.mceToolbarEndButton').before(
+				//	'<td id="divlineheight" class="lineheighttd"><img height="20px" width="20px" style="margin-bottom:2px;" src="images/line_height.png"></td><td class="lineheighttd"><select style="margin-right:5px;margin-left:5px" class="lineheight"><option class="lineheightsize"  value="2pt">2pt</option><option class="lineheightsize"  value="4pt">4pt</option><option class="lineheightsize"  value="6pt">6pt</option><option class="lineheightsize"  value="8pt">8pt</option><option class="lineheightsize" value="10pt">10pt</option><option class="lineheightsize"  value="12pt">12pt</option><option class="lineheightsize"  value="14pt">14pt</option><option class="lineheightsize"  value="16pt">16pt</option><option class="lineheightsize"  value="18pt">18pt</option><option class="lineheightsize"  value="20pt">20pt</option><option class="lineheightsize" value="22pt">22pt</option><option class="lineheightsize" value="24pt">24pt</option><option class="lineheightsize" value="26pt">26pt</option><option class="lineheightsize" value="28pt">28pt</option></select></td>'
+				//);
+		    $('.mceToolbarEndButton').before(
+					'<td id="divlineheight" class="lineheighttd"><img height="20px" width="20px" style="margin-bottom:2px;" src="images/line_height.png"></td><td class="lineheighttd"><select style="width:60px;margin-right:5px;margin-left:5px" id="lineheight" class="lineheight"><option class="lineheightsize"  value="2px">2px</option><option class="lineheightsize"  value="6px">6px</option><option class="lineheightsize" value="10px">10px</option><option class="lineheightsize"  value="14px">14px</option><option class="lineheightsize"  value="18px" selected="selected">18px</option><option class="lineheightsize" value="22px">22px</option><option class="lineheightsize" value="26px">26px</option><option class="lineheightsize" value="30px">30px</option><option class="lineheightsize" value="36px">36px</option><option class="lineheightsize" value="72px">72px</option><option class="lineheightsize" value="96px">96px</option><option class="lineheightsize" value="128px">128px</option><option class="lineheightsize" value="154px">154px</option><option class="lineheightsize" value="196px">196px</option></select></td>'
+				);
+				
+				$('.lineheight').click(function(){
+					$( "#text-label_ifr" ).contents().find( "p" ).attr( "data-mce-style","line-height:"+$(this).val()+";");
+					$( "#text-label_ifr" ).contents().find( "p" ).css("line-height",$(this).val());
+					$( "#text-label_ifr" ).contents().find( "span" ).attr( "data-mce-style","line-height:"+$(this).val()+";");
+					$( "#text-label_ifr" ).contents().find( "span" ).css("line-height",$(this).val());
+				
+				});
+				
+				$( "#text-label_ifr" ).contents().find( "p" ).css("line-height",$('#lineheight').val());
+					$( "#text-label_ifr" ).contents().find( "span" ).css("line-height",$('#lineheight').val());
+								
 	}
 }

@ -745,6 +957,8 @@ function loadFieldsFromDB(item) {
 					$("input[name=label]").val(val);
 				}
 				
+				$('#lineheight').val($("#text-label_ifr").contents().find("p").css('line-height'));
+
 				if (key == 'enable_link') {
 					if (val == "1") {
 						$("input[name=enable_link]")
@ -757,12 +971,17 @@ function loadFieldsFromDB(item) {
 				}
 				
 				if (key == 'type_graph') {
-					if (val == "area") {
-						$("select[name=type_graph]").val(val);
-					}
-					else {
 						$("select[name=type_graph]").val(val);
 					}
+					
+					if (key == 'label_position') {
+						$('#labelposup'+" img").attr('src','/pandora_console/images/label_up.png');
+						$('#labelposdown'+" img").attr('src','/pandora_console/images/label_down.png');
+						$('#labelposleft'+" img").attr('src','/pandora_console/images/label_left.png');
+						$('#labelposright'+" img").attr('src','/pandora_console/images/label_right.png');
+						$('.labelpos').attr('sel','no');
+						$('#labelpos'+val+" img").attr('src','/pandora_console/images/label_'+$('#labelpos'+val).attr('id').replace('labelpos','')+'_2.png');
+						$('#labelpos'+val).attr('sel','yes');
 					}
 					
 				if (key == 'image') {
@ -890,19 +1109,33 @@ function loadFieldsFromDB(item) {
 				}

 			});
+			if (data.type == 6 || data.type == 7 || data.type == 8) {
+				
+					$("#period_row").css('display', '');
+					$("#period_row." + item).css('display', '');
+				}
+				else if (data.type == 2) {
+					$("#period_row").css('display', 'none');
+					$("#period_row." + item).css('display', 'none');
+				}
+				

 			if (data.type == 1) {
-				if (data.id_custom_graph > 0) {
-					$("input[name='radio_choice'][value='custom_graph']")
-						.prop('checked', true);
-					$("input[name='radio_choice']").trigger('change');
-				//	$("#custom_graph option[value=" + data.id_custom_graph + "]")
-				//		.prop("selected", true);
-				}
-				else {
+				if (data.id_custom_graph == 0) {
 					$("input[name='radio_choice'][value='module_graph']")
 						.prop('checked', true);
 					$("input[name='radio_choice']").trigger('change');
+					
+		
+				}
+				else {
+	
+					$("input[name='radio_choice'][value='custom_graph']")
+						.prop('checked', true);
+					$("input[name='radio_choice']").trigger('change');
+
+	  		$("#custom_graph option[value=" + data.id_custom_graph + "]").prop("selected", true);
+										
 				}
 			}

@ -915,6 +1148,8 @@ function loadFieldsFromDB(item) {
 	});
 }

+
+
 function setAspectRatioBackground(side) {
 	toggle_item_palette();

@ -1077,10 +1312,6 @@ function hiddenFields(item) {
 	$("#line_case").css('display', 'none');
 	$("#line_case." + item).css('display', '');

-
-
-
-
 	$("input[name='radio_choice']").trigger('change');

 	if (typeof(enterprise_hiddenFields) == 'function') {
@ -1181,6 +1412,15 @@ function set_static_graph_status(idElement, image, status) {
 			data: parameter,
 			success: function (data) {
 				set_static_graph_status(idElement, image, data);
+				
+				if($('#'+idElement+' table').css('float') == 'right' || $('#'+idElement+ ' table').css('float') == 'left'){
+				$('#'+idElement+ ' img').css('margin-top', 	parseInt($('#'+idElement).css('height'))/2 - parseInt($('#'+idElement+ ' img').css('height'))/2);	
+				}
+				else{
+				$('#'+idElement+ ' img').css('margin-left',parseInt($('#'+idElement).css('width'))/2 - parseInt($('#'+idElement+ ' img').css('width'))/2);		
+				}
+				
+								
 			}
 		});

@ -1298,15 +1538,35 @@ function setModuleGraph(id_data) {
 					else {
 						if($("#module_row").css('display')!='none'){
 							$("#" + id_data + " img").attr('src', 'images/console/signes/module_graph.png');
+								if($('#text-width_module_graph').val() == 0 || $('#text-height_module_graph').val() == 0){
+									$("#" + id_data + " img").css('width', '300px');
+									$("#" + id_data + " img").css('height', '180px');
+								}
+								else{
 									$("#" + id_data + " img").css('width', $('#text-width_module_graph').val()+'px');
 									$("#" + id_data + " img").css('height', $('#text-height_module_graph').val()+'px');
+								}
 						}else{
 							$("#" + id_data + " img").attr('src', 'images/console/signes/custom_graph.png');
+								if($('#text-width_module_graph').val() == 0 || $('#text-height_module_graph').val() == 0){
+									$("#" + id_data + " img").css('width', '300px');
+									$("#" + id_data + " img").css('height', '180px');
+								}
+								else{
 									$("#" + id_data + " img").css('width', $('#text-width_module_graph').val()+'px');
 									$("#" + id_data + " img").css('height', $('#text-height_module_graph').val()+'px');
 								}
 						}
 					}
+					
+					if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
+					$('#'+id_data+ ' img').css('margin-top', 	parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);	
+					}
+					else{
+					$('#'+id_data+ ' img').css('margin-left',parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);		
+					}
+					
+				}
 			});
 		}
 	});
@ -1332,8 +1592,9 @@ function setModuleValue(id_data, process_simple_value, period) {
 		dataType: 'json',
 		success: function (data) {
 			var currentValue = $("#text_" + id_data).html();
-			currentValue = currentValue.replace(/_VALUE_/gi, data.value);
-			$("#text_" + id_data).html('Data value');
+			//currentValue = currentValue.replace(/_VALUE_/gi, data.value);
+			$("#text_" + id_data).html(currentValue);
+			//$("#text_" + id_data).html('Data value');
 		}
 	});
 }
@ -1364,8 +1625,8 @@ function setPercentileBar(id_data, values) {
 		dataType: 'json',
 		success: function (data) {
 			module_value = data['value'];
-			//max_percentile = data['max_percentile'];
-			//width_percentile = data['width_percentile'];
+			max_percentile = data['max_percentile'];
+			width_percentile = data['width_percentile'];
 			unit_text = false;

 			if ((data['unit_text'] != false) || typeof(data['unit_text']) != 'boolean') {
@ -1393,8 +1654,24 @@ function setPercentileBar(id_data, values) {
 			$("#"+  id_data).attr('src', img);
 			
 			$("#" + id_data + " img").attr('src', 'images/console/signes/percentil.png');
+			if($('#text-width_percentile').val() == 0){
+			$("#" + id_data + " img").css('width', '130px');
+			}
+			else{
 			$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
+			}
+			
 			$("#" + id_data + " img").css('height', '30px');
+			
+			
+			if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
+			$('#'+id_data+ ' img').css('margin-top', 	parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);	
+			}
+			else{
+			$('#'+id_data+ ' img').css('margin-left',parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);		
+			}
+			
+			
 		}
 	});
 }
@ -1425,8 +1702,8 @@ function setPercentileBubble(id_data, values) {
 		dataType: 'json',
 		success: function (data) {
 			module_value = data['value'];
-			//max_percentile = data['max_percentile'];
-			//width_percentile = data['width_percentile'];
+			max_percentile = data['max_percentile'];
+			width_percentile = data['width_percentile'];
 			unit_text = false
 			if ((data['unit_text'] != false) || typeof(data['unit_text']) != 'boolean')
 				unit_text = data['unit_text'];
@ -1451,8 +1728,23 @@ function setPercentileBubble(id_data, values) {
 			$("#image_" + id_data).attr('src', img);
 			
 			$("#" + id_data + " img").attr('src', 'images/console/signes/percentil_bubble.png');
+			
+			
+			if($('#text-width_percentile').val() == 0){
+			$("#" + id_data + " img").css('width', '130px');
+			$("#" + id_data + " img").css('height', '130px');
+			}
+			else{
 			$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
 			$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
+			}
+			
+			if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
+			$('#'+id_data+ ' img').css('margin-top', 	parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);	
+			}
+			else{
+			$('#'+id_data+ ' img').css('margin-left',parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);		
+			}
 			
 		}
 	});
@ -1522,9 +1814,36 @@ function createItem(type, values, id_data) {

 	switch (type) {
 		case 'box_item':
+		
+			if(values['width_box'] == 0 || values['height_box'] == 0){
 				item = $('<div id="' + id_data + '" '
 					+ 'class="item box_item" '
-				+ 'style="text-align: center; '
+					+ 'style="text-align: left; '
+						+ 'position: absolute; '
+						+ 'display: inline-block; '
+						+ 'z-index: 1; '
+						+ 'top: ' + values['top'] + 'px; '
+						+ 'left: ' + values['left'] + 'px;">'
+						+ '<div '
+						+ 'style=" '
+						+ 'width: 300px;'
+						+ 'height: 180px;'
+						+ 'border-style: solid;'
+						+ 'border-width: ' + values['border_width'] + 'px;'
+						+ 'border-color: ' + values['border_color'] + ';'
+						+ 'background-color: ' + values['fill_color'] + ';'
+						+ '">'
+						+ '</div>'
+					+ '</div>'
+					+ '<input id="hidden-status_' + id_data + '" '
+						+ 'type="hidden" value="0" '
+						+ 'name="status_' + id_data + '">'
+				);
+			}
+			else{
+				item = $('<div id="' + id_data + '" '
+					+ 'class="item box_item" '
+					+ 'style="text-align: left; '
 						+ 'position: absolute; '
 						+ 'display: inline-block; '
 						+ 'z-index: 1; '
@ -1545,6 +1864,9 @@ function createItem(type, values, id_data) {
 						+ 'type="hidden" value="0" '
 						+ 'name="status_' + id_data + '">'
 				);
+			}
+		
+			
 			break;
 		case 'group_item':
 		case 'static_graph':
@ -1562,24 +1884,42 @@ function createItem(type, values, id_data) {
 			item = $('<div></div>')
 				.attr('id', id_data)
 				.attr('class', 'item ' + class_type)
-				.css('text-align', 'center')
+				.css('text-align', 'left')
 				.css('position', 'absolute')
 				.css('display', 'inline-block')
 				.css('top', values['top'] + 'px')
 				.css('left', values['left'] + 'px');
-			if ((values['width'] == 0) && (values['height'] == 0)) {
-				// Do none
+				
+				
+				
+			if(values['label_position'] == 'left'){
+			
+				var $image = $('<img></img>')
+					.attr('id', 'image_' + id_data)
+					.attr('class', 'image')
+					.attr('src', img_src)
+					.attr('style','float:right;');
+			
 			}
-			else {
-				item.css('width','70'  + 'px')
-					.css('height', '70' + 'px');
+			else if(values['label_position'] == 'right'){
+			
+				var $image = $('<img></img>')
+					.attr('id', 'image_' + id_data)
+					.attr('class', 'image')
+					.attr('src', img_src)
+					.attr('style','float:left;');
+			
 			}
+			else{
 				
 				var $image = $('<img></img>')
 					.attr('id', 'image_' + id_data)
 					.attr('class', 'image')
 					.attr('src', img_src);
-			if ((values['width'] == 0) && (values['height'] == 0)) {
+				
+			}
+				
+			if ((values['width'] == 0) || (values['height'] == 0)) {
 				// Do none
 				$image.attr('width', '70')
 					.attr('height', '70');
@ -1588,23 +1928,63 @@ function createItem(type, values, id_data) {
 				$image.attr('width', values['width'])
 					.attr('height', values['height']);
 			}
-
+/*
 			var $span = $('<span></span>')
 				.attr('id', 'text_' + id_data)
 				.attr('class', 'text')
 				.append(values['label']);
 			
+*/
 			var $input = $('<input></input>')
 				.attr('id', 'hidden-status_' + id_data)
 				.attr('type', 'hidden')
 				.attr('value', -1)
 				.attr('name', 'status_' + id_data);

+		if(values['label_position'] == 'up'){
+			item
+				.append('<table><tr><td></td></tr><tr><td><span id="text_'+id_data+'" class="text">'+values['label']+'</span></td></tr><tr><td></td></tr></table>')
+				.append($image)
+				.append($image)
+				.append($input);
+				
+			}
+			else if(values['label_position'] == 'down'){
 				item
 					.append($image)
 					.append($image)
-				.append($span)
+					.append('<table><tr><td></td></tr><tr><td><span id="text_'+id_data+'" class="text">'+values['label']+'</span></td></tr><tr><td></td></tr></table>')
 					.append($input);				
+			}
+			else if(values['label_position'] == 'left'){
+				
+				if(values['height'] == 0){
+					item
+						.append('<table style="float:left;height:70px"><tr><td></td></tr><tr><td><span id="text_'+id_data+'" class="text">'+values['label']+'</span></td></tr><tr><td></td></tr></table>');
+				}
+				else{
+					item
+						.append('<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_'+id_data+'" class="text">'+values['label']+'</span></td></tr><tr><td></td></tr></table>')
+				}
+					item
+					.append($image)
+					.append($image)
+					.append($input);				
+			}
+			else if(values['label_position'] == 'right'){
+				if(values['height'] == 0){
+					item
+						.append('<table style="float:right;height:70px"><tr><td></td></tr><tr><td><span id="text_'+id_data+'" class="text">'+values['label']+'</span></td></tr><tr><td></td></tr></table>');
+				}
+				else{
+					item
+						.append('<table style="float:right;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_'+id_data+'" class="text">'+values['label']+'</span></td></tr><tr><td></td></tr></table>')
+				}
+					item
+					.append($image)
+					.append($image)
+					.append($input);				
+			}

 			set_static_graph_status(id_data, values['image']);

@ -1615,21 +1995,72 @@ function createItem(type, values, id_data) {
 			var imageSize = '';

 			if (values['type_percentile'] == 'percentile') {
-				item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: center; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
-						'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span><br />' +
+				
+				if(values['label_position'] == 'up'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
 							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
 							'</div>'
 					);
+				}
+				else if(values['label_position'] == 'down'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' + 					
+							'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+							'</div>'
+					);
+					
+				}
+				else if(values['label_position'] == 'right'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:left;" />' + 					
+							'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+							'</div>'
+					);
+					
+				}
+				else if(values['label_position'] == 'left'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:right;"/>' + 					
+							'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+							'</div>'
+					);
+					
+				}
 				
 				setPercentileBar(id_data, values);
 			}
 			else {
-				item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: center; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
-						'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span><br />' +
+				
+				
+				if(values['label_position'] == 'up'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
 							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
 							'</div>'
 					);
-
+				}
+				else if(values['label_position'] == 'down'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' + 					
+							'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+							'</div>'
+					);
+				}
+				else if(values['label_position'] == 'left'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<img style="float:right;" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' + 					
+							'<table style="float:left;height:'+values['height']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+							'</div>'
+					);
+				}
+				else if(values['label_position'] == 'right'){
+					item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+							'<img style="float:left;" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' + 					
+							'<table style="float:right;height:'+values['height']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+							'</div>'
+					);
+				}
 				setPercentileBubble(id_data, values);
 			}
 			break;
@ -1637,11 +2068,36 @@ function createItem(type, values, id_data) {
 			sizeStyle = '';
 			imageSize = '';

-			item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: center; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
-					'<span id="text_' + id_data + '" class="text">' + values['label'] + '</span><br />' +
-					'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="border:1px solid #808080;" />' +
+			if(values['label_position'] == 'up'){
+				item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+						'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+						'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
 					'</div>'
 				);				
+			}
+			else if(values['label_position'] == 'down'){
+				item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+						'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
+						'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+					'</div>'
+				);				
+			}
+			else if(values['label_position'] == 'left'){
+				item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+						'<img style="float:right" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
+						'<table style="float:left;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+					'</div>'
+				);				
+			}
+			else if(values['label_position'] == 'right'){
+				item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+						'<img style="float:left" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
+						'<table style="float:right;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
+					'</div>'
+				);				
+			}
+
+			
 			setModuleGraph(id_data);
 			break;
 		case 'simple_value':
@ -1664,7 +2120,7 @@ function createItem(type, values, id_data) {
 				);
 			break;
 		case 'icon':
-			if ((values['width'] == 0) && (values['height'] == 0)) {
+			if ((values['width'] == 0) || (values['height'] == 0)) {
 				sizeStyle = 'width: ' + '70'  + 'px; height: ' + '70' + 'px;';
 				imageSize = 'width="' + '70'  + '" height="' + '70' + '"';
 			}
@ -1673,7 +2129,7 @@ function createItem(type, values, id_data) {
 				imageSize = 'width="' + values['width']  + '" height="' + values['height'] + '"';
 			}

-			item = $('<div id="' + id_data + '" class="item icon" style="text-align: center; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
+			item = $('<div id="' + id_data + '" class="item icon" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
 				'<img id="image_' + id_data + '" class="image" src="images/spinner.gif" ' + imageSize + ' /><br />' +
 				'</div>'
 			);
@ -1688,6 +2144,7 @@ function createItem(type, values, id_data) {
 				if (temp_item != false) {
 					item = temp_item;
 				}
+					$('#'+id_data).css({'width':'','height':''});
 			}
 			break;
 	}
@ -1708,6 +2165,15 @@ function createItem(type, values, id_data) {

 		refresh_lines(lines, 'background', true);
 	}
+	
+	
+	if(values['label_position'] == 'right'){
+	$('#text_'+id_data).css({'display':'block','float':'right'});
+	}
+	else if(values['label_position'] == 'left'){
+		$('#text_'+id_data).css({'display':'block','float':'left'});
+	}
+	
 }

 function addItemSelectParents(id_data, text) {
@ -1774,7 +2240,7 @@ function insertDB(type, values) {
 						// Draw handler start
 						item = $('<div id="handler_start_' + id + '" ' +
 							'class="item handler_start" ' +
-							'style="text-align: center; ' +
+							'style="text-align: left; ' +
 								'z-index: 1;' +
 								'position: absolute; ' +
 								'top: ' + (values['line_start_y']  - radious_handle) + 'px; ' +
@ -1789,7 +2255,7 @@ function insertDB(type, values) {
 						// Draw handler stop
 						item = $('<div id="handler_end_' + id + '" ' +
 							'class="item handler_end" ' +
-							'style="text-align: center; ' +
+							'style="text-align: left; ' +
 								'z-index: 1;' +
 								'position: absolute; ' +
 								'top: ' + (values['line_end_y']  - radious_handle) + 'px; ' +
@ -2213,7 +2679,10 @@ function eventsItems(drag) {
 				divParent = $(divParent).parent();
 			}
 			unselectAll();
-			$(divParent).css('border', '2px blue dotted');
+			$(divParent).attr('withborder','true');
+			$(divParent).css('border', '1px blue dotted');
+			$(divParent).css('left', '-=1px');
+			$(divParent).css('top', '-=1px');
 			
 			if ($(divParent).hasClass('box_item')) {
 				creationItem = null;
@ -2331,7 +2800,7 @@ function eventsItems(drag) {
 		event.stopPropagation();
 		if (!is_opened_palette) {
 			unselectAll();
-			$(event.target).css('border', '2px blue dotted');
+			$(event.target).css('border', '1px blue dotted');

 			selectedItem = null;
 			if ($(event.target).hasClass('box_item')) {
@ -2538,7 +3007,7 @@ function eventsBackground() {
 		event.stopPropagation();
 		if (!is_opened_palette) {
 			unselectAll();
-			$("#background").css('border', '2px blue dotted');
+			$("#background").css('border', '1px blue dotted');
 			activeToolboxButton('copy_item', false);
 			activeToolboxButton('edit_item', true);
 			activeToolboxButton('delete_item', false);
@ -2585,11 +3054,23 @@ function move_elements_resize(original_width, original_height, width, height) {
 }

 function unselectAll() {
-	$("#background").css('border', '2px black solid');
-	$(".item").css('border', '');
+	$("#background").css('border', '1px lightgray solid');
+	
+    $(".item").each(function(){
+        $(this).css('border', '');
+				if($(this).attr('withborder') == 'true'){
+					$(this).css('top', '+=1');
+					$(this).css('left', '+=1');
+					$(this).attr('withborder', 'false');
+				}
+				
+    });
+	
 }

 function click_button_toolbox(id) {
+		unselectAll();
+		selectedItem = null;
 	switch (id) {
 		case 'static_graph':
 			toolbuttonActive = creationItem = 'static_graph';
--- a/pandora_console/godmode/reporting/visual_console_builder.editor.php
+++ b/pandora_console/godmode/reporting/visual_console_builder.editor.php
@ -75,10 +75,10 @@ if (!defined('METACONSOLE')) {
 	echo '<div id="frame_view" style="width: 100%; height: 500px; overflow: scroll; margin: 0 auto;">';
 }
 else {
-	echo '<div id="frame_view" style="overflow: auto; margin: 0px auto; padding: 5px; ">';
+	echo '<div id="frame_view" style="width: 919px; height: 500px; overflow: scroll; margin: 0 auto;">';
 }
-echo '<div id="background" class="" style="
-	margin: 0px auto;border: 2px black solid; width: ' . $widthBackground . 'px; height: ' . $heightBackground . 'px;">';
+echo '<div id="background" class="" style="top:50px;
+	margin: 0px auto;border: 1px lightgray solid; width: ' . $widthBackground . 'px; height: ' . $heightBackground . 'px;">';
 echo "<div id='background_grid'
 	style='position: absolute; display: none; overflow: hidden;
 	background: url(" . ui_get_full_url('images/console/background/white_boxed.jpg', false, false, false) . ");
@ -195,6 +195,8 @@ ui_require_javascript_file ('encode_decode_base64');
 			"4pt=.visual_font_size_4pt, " +
 			"6pt=.visual_font_size_6pt, " +
 			"8pt=.visual_font_size_8pt, " +
+			"10pt=.visual_font_size_10pt, " +
+			"12pt=.visual_font_size_12pt, " +
 			"14pt=.visual_font_size_14pt, " +
 			"24pt=.visual_font_size_24pt, " +
 			"36pt=.visual_font_size_36pt, " +
@ -218,4 +220,29 @@ ui_require_javascript_file ('encode_decode_base64');
 		element_format : "html",
 		editor_deselector : "noselected"
 	});
+
+	$('.item img').each(function(){
+		
+		if($(this).css('float')=='left' || $(this).css('float')=='right'){
+			
+		$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
+		$(this).css('margin-left','');
+		}
+		else{
+			$(this).css('margin-left',(parseInt($(this).parent().css('width'))/2-parseInt($(this).css('width'))/2)+'px');
+			$(this).css('margin-top','');
+		}
+		
+	});
+	
+	$('#process_value').change(function(){
+		if($(this).val() == 0){
+			$('#period_row').css('display','none');
+		}
+		else{
+			$('#period_row').css('display','');
+		}
+	})
+	
+			
 </script>
--- a/pandora_console/godmode/reporting/visual_console_builder.elements.php
+++ b/pandora_console/godmode/reporting/visual_console_builder.elements.php
@ -590,6 +590,8 @@ ui_require_javascript_file('tiny_mce', 'include/javascript/tiny_mce/');
 				"4pt=.visual_font_size_4pt, " +
 				"6pt=.visual_font_size_6pt, " +
 				"8pt=.visual_font_size_8pt, " +
+				"10pt=.visual_font_size_10pt, " +
+				"12pt=.visual_font_size_12pt, " +
 				"14pt=.visual_font_size_14pt, " +
 				"24pt=.visual_font_size_24pt, " +
 				"36pt=.visual_font_size_36pt, " +
--- a/pandora_console/godmode/reporting/visual_console_builder.wizard.php
+++ b/pandora_console/godmode/reporting/visual_console_builder.wizard.php
@ -137,6 +137,16 @@ $table->data["staticgraph_modulegraph"][1] .= '&nbsp;&nbsp;&nbsp;' .
 	__('Height') . ': ' .
 	html_print_input_text('height', 0, '', 5, 5, true);
 	
+	  $fontf = array('Roboto' => 'Roboto',
+			 'lato' => 'Lato',
+			 'opensans' => 'Open Sans',
+			 'nunito' => 'Nunito',
+			 'leaguegothic' => 'League Gothic'
+	 	 );
+		 
+		 $fonts = array('4pt' => '4pt','6pt' => '6pt','8pt' => '8pt','10pt' => '10pt','12pt' => '12pt','14pt' => '14pt','24pt' => '24pt','36pt' => '36pt','72pt' => '72pt','96pt' => '96pt','128pt' => '128pt','154pt' => '154pt','196pt' => '196pt');
+		 
+	/*	 
 		 $fontf = array('andale mono,times' => 'Andale Mono',
 			 'arial,helvetica,sans-serif' => 'Arial',
 			 'arial black,avant garde' => 'Arial Black',
@ -154,20 +164,21 @@ $table->data["staticgraph_modulegraph"][1] .= '&nbsp;&nbsp;&nbsp;' .
 			 'Webdings' => 'Webdings',
 			 'Wingdings'  => 'Wingdings' 
 	 	 );
+	*/
 	
 	$table->rowstyle['all_9'] = 'display: none;';
 	$table->data['all_9'][0] = __('Font');
 	$table->colspan['all_9'][1] = "3";
 	$table->data["all_9"][1] = html_print_select($fontf,
-		'fontf', '', '', '', '', true);
+		'fontf', $fontf['Roboto'], '', '', '', true);
+		
 		
-		$fonts = array('4pt' => '4pt','6pt' => '6pt','8pt' => '8pt','14pt' => '14pt','24pt' => '24pt','36pt' => '36pt','72pt' => '72pt','96pt' => '96pt','128pt' => '128pt','154pt' => '154pt','196pt' => '196pt');
 		
 		$table->rowstyle['all_10'] = 'display: none;';
 		$table->data['all_10'][0] = __('Font size');
 		$table->colspan['all_10'][1] = "3";
 		$table->data["all_10"][1] = html_print_select($fonts,
-			'fonts', '', '', '', '', true);
+			'fonts', $fonts['12pt'], '', '', '', true);


 $table->rowstyle["modulegraph_simplevalue"] = 'display: none;';
--- a/pandora_console/images/console/signes/custom_graph.png
+++ b/pandora_console/images/console/signes/custom_graph.png
--- a/pandora_console/images/console/signes/module_graph.png
+++ b/pandora_console/images/console/signes/module_graph.png
--- a/pandora_console/images/console/signes/percentil.png
+++ b/pandora_console/images/console/signes/percentil.png
--- a/pandora_console/images/console/signes/percentil_bubble.png
+++ b/pandora_console/images/console/signes/percentil_bubble.png
--- a/pandora_console/images/console/signes/service.png
+++ b/pandora_console/images/console/signes/service.png
--- a/pandora_console/images/label_down.png
+++ b/pandora_console/images/label_down.png
--- a/pandora_console/images/label_down_2.png
+++ b/pandora_console/images/label_down_2.png
--- a/pandora_console/images/label_left.png
+++ b/pandora_console/images/label_left.png
--- a/pandora_console/images/label_left_2.png
+++ b/pandora_console/images/label_left_2.png
--- a/pandora_console/images/label_right.png
+++ b/pandora_console/images/label_right.png
--- a/pandora_console/images/label_right_2.png
+++ b/pandora_console/images/label_right_2.png
--- a/pandora_console/images/label_up.png
+++ b/pandora_console/images/label_up.png
--- a/pandora_console/images/label_up_2.png
+++ b/pandora_console/images/label_up_2.png
--- a/pandora_console/include/ajax/visual_console_builder.ajax.php
+++ b/pandora_console/include/ajax/visual_console_builder.ajax.php
@ -130,6 +130,7 @@ $get_element_status = get_parameter('get_element_status', 0);

 $enable_link = get_parameter('enable_link', 1);
 $type_graph = get_parameter('type_graph', 'area');
+$label_position = get_parameter('label_position', 'down');

 switch ($action) {
 	case 'get_font':
@ -394,6 +395,8 @@ switch ($action) {
 	case 'move':
 		$values = array();
 		
+		$values['label_position'] = $label_position;
+		
 		// In Graphs, background color is stored in column image (sorry)
 		if ($type == 'module_graph') {
 			$values['image'] = $background_color;
@ -505,6 +508,15 @@ switch ($action) {
 						break;
 					case 'group_item':
 						$values['id_group'] = $id_group;
+						if ($image !== null) {
+							$values['image'] = $image;
+						}
+						if ($width !== null) {
+							$values['width'] = $width;
+						}
+						if ($height !== null) {
+							$values['height'] = $height;
+						}
 						break;
 					case 'module_graph':
 						if ($height_module_graph !== null) {
@ -570,6 +582,7 @@ switch ($action) {
 				if ($action == 'move') {
 					// Don't change the label because only change the positions
 					unset($values['label']);
+					unset($values['label_position']);
 					// Don't change background color in graphs when move
 					
 					switch ($type) {
@ -757,6 +770,7 @@ switch ($action) {
 		$values['label'] = $label;
 		$values['pos_x'] = $left;
 		$values['pos_y'] = $top;
+		$values['label_position'] = $label_position;
 		
 		if (defined('METACONSOLE') && $metaconsole) {
 			if ($server_id > 0) {
@ -933,6 +947,16 @@ switch ($action) {
 					$return['values']['width_box'] = $values['width'];
 					$return['values']['height_box'] = $values['height'];
 					break;
+					
+				case PERCENTILE_BUBBLE:
+					$return['values']['type_percentile'] = 'bubble';
+					break;
+					
+				case PERCENTILE_BAR:
+					$return['values']['type_percentile'] = 'percentile';
+					break;				
+			
+				
 			}
 		}
 		
--- a/pandora_console/include/functions_visual_map.php
+++ b/pandora_console/include/functions_visual_map.php
@ -41,7 +41,7 @@ function visual_map_print_item_toolbox($idDiv, $text, $float) {
 	}
 	
 	echo '<div class="button_toolbox" id="' . $idDiv . '"
-		style="font-weight: bolder; text-align: center; float: ' . $float . ';'
+		style="font-weight: bolder; text-align:; float: ' . $float . ';'
 		. $margin . ': 5px;">';
 	echo $text;
 	echo '</span>';
@ -67,7 +67,7 @@ function visual_map_print_user_line_handles($layoutData) {
 		'style="z-index: ' .$z_index . ';' .
 			'position: absolute; top: ' . ($start_y - $radious_handle) . 'px; ' .
 			'left: ' . ($start_x - $radious_handle) . 'px;' .
-			'text-align: center;' .
+			'text-align: ;' .
 			'display: inline-block; ' . $sizeStyle . '">';
 	
 	html_print_image("images/dot_red.png");
@ -79,7 +79,7 @@ function visual_map_print_user_line_handles($layoutData) {
 		'style="z-index: ' .$z_index . ';' .
 			'position: absolute; top: ' . ($end_y - $radious_handle) . 'px; ' .
 			'left: ' . ($end_x - $radious_handle) . 'px;' .
-			'text-align: center;' .
+			'text-align: ;' .
 			'display: inline-block; ' . $sizeStyle . '">';
 	
 	html_print_image("images/dot_green.png");
@ -109,6 +109,7 @@ function visual_map_print_item($mode = "read", $layoutData,
 	$border_width = $layoutData['border_width'];
 	$border_color = $layoutData['border_color'];
 	$fill_color = $layoutData['fill_color'];
+	$label_position = $layoutData['label_position'];
 		
 	$sizeStyle = '';
 	$borderStyle = '';
@ -125,6 +126,110 @@ function visual_map_print_item($mode = "read", $layoutData,
 	$label = str_replace($agentname,ui_print_truncate_text($agentname, 'agent_small', false, true, false, '…', false),$label);
 	$text = '<span id="text_' . $id . '" class="text">' . $label .'</span>';

+	if($height == 0){
+		
+	switch($type){
+		
+		case 0:
+		case 11:
+		$tableheight0 = '70';
+		break;
+		
+		case 3:
+		$tableheight0 = '30';
+		break;
+		
+		case 9:
+		$tableheight0 = '130';
+		break;
+		
+		case 1:
+		$tableheight0 = '180';
+		break;
+		
+		case SERVICE:
+		$tableheight0 = '50';
+		break;
+	
+	}
+}
+else{
+	$tableheight0 = $height;
+}
+
+if ($layoutData['width'] == 0 || $layoutData['height'] == 0){
+	switch($type){
+		
+		case 0:
+		case 11:
+		$himg = '70';
+		$wimg ='70';
+		break;
+		
+		case 3:
+		
+		if(get_parameter('action') == 'edit'){
+		
+		$himg = '30';
+		$wimg = '150';
+		
+		}
+		else{
+			$himg = '15';
+			$wimg = '150';
+		}
+		
+		
+		break;
+		
+		case 9:
+		$himg = '130';
+		$wimg = '130';
+		break;
+		
+		case 1:
+		$himg = '180';
+		$wimg = '300';
+		break;
+		
+		case SERVICE:
+		$himg = '50';
+		$wimg = '150';
+		break;
+	
+	}
+}
+else{
+	$wimg = $layoutData['width'];
+	$himg = $layoutData['height'];
+	
+	if($type == 3){
+		if(get_parameter('action') == 'edit'){
+		
+		$himg = '30';
+		
+		}
+		else{
+			$himg = '15';
+		}
+	}
+	if($type == 9){
+	$himg = $wimg;
+	}
+}
+
+	if($label_position == 'left'){
+		$text = '<table style="float:left;height:'.$himg.'px;"><tr><td></td></tr><tr><td><span id="text_' . $id . '" class="text">' . $label .'</span></td></tr><tr><td></td></tr></table>';	
+	}
+	else if($label_position == 'right'){
+		$text = '<table style="float:right;height:'.$himg.'px;"><tr><td></td></tr><tr><td><span style="" id="text_' . $id . '" class="text">' . $label .'</span></td></tr><tr><td></td></tr></table>';
+	}
+	else{
+		$text = '<table style="width:'.$wimg.'px;"><tr><td></td></tr><tr><td><span style="" id="text_' . $id . '" class="text">' . $label .'</span></td></tr><tr><td></td></tr></table>';
+	}
+	
+	
+	
 	if (!isset($layoutData['status_calculated'])) {
 		$layoutData['status_calculated'] =
 			visual_map_get_status_element($layoutData);
@ -680,11 +785,6 @@ function visual_map_print_item($mode = "read", $layoutData,
 				}
 			}
 									
-			if (($width != 0) && ($height != 0)) {
-				$sizeStyle = 'width: ' . $width . 'px; height: ' . $height . 'px;';
-				$imageSize = 'width="' . $width . '" height="' . $height . '"';
-			}
-			
 			if ($status == VISUAL_MAP_STATUS_CRITICAL_BAD)
 				$z_index = 3 + 1;
 			elseif ($status == VISUAL_MAP_STATUS_WARNING)
@ -736,6 +836,10 @@ function visual_map_print_item($mode = "read", $layoutData,
 				$unit_text = trim(io_safe_output($unit_text));
 				
 				$value_text = format_for_graph($module_value, 2);
+				if($value_text<=0){
+					$value_text = remove_right_zeros(number_format($module_value, $config['graph_precision']));
+					
+				}
 				if (!empty($unit_text))
 					$value_text .= " " . $unit_text;
 			}
@ -751,6 +855,16 @@ function visual_map_print_item($mode = "read", $layoutData,
 				$percentile = 100;
 			break;
 		case MODULE_GRAPH:
+		
+			$imgpos = '';
+						
+			if($layoutData['label_position']=='left'){
+				$imgpos = 'float:right';
+			}
+			else if($layoutData['label_position']=='right'){
+				$imgpos = 'float:left';
+			}
+		
 			if (!empty($proportion)) {
 				$width =
 					((integer)($proportion['proportion_width'] * $width));
@ -771,18 +885,70 @@ function visual_map_print_item($mode = "read", $layoutData,
 			if ($layoutData['id_custom_graph'] != 0) {
 				// Show only avg on the visual console
 				if(get_parameter('action') == 'edit'){
-					$img =  '<img src="images/console/signes/custom_graph.png" style="width:'.$width.'px;height:'.$height.'px;">';
+					if($width == 0 || $height == 0){
+							$img =  '<img src="images/console/signes/custom_graph.png" style="width:300px;height:180px;'.$imgpos.'">';	
+						}
+						else{
+							$img =  '<img src="images/console/signes/custom_graph.png" style="width:'.$width.'px;height:'.$height.'px;'.$imgpos.'">';
+						}				
+			 		}
+				else{
+			
+						if($width == 0 || $height == 0){
+			
+							if($layoutData['label_position']=='left'){
+								$img = '<div style="float:right;height:'.$himg.'px;">'.custom_graphs_print(
+								$layoutData['id_custom_graph'], 180, 300,
+								$period, null, true, 0, false, $layoutData['image'],
+								array(), '', array(), array(), true,
+								false, false, true, 1, false, true).'</div>';
+							}
+							else if($layoutData['label_position']=='right'){
+							$img = '<div style="float:left;height:'.$himg.'px;">'.custom_graphs_print(
+								$layoutData['id_custom_graph'], 180, 300,
+								$period, null, true, 0, false, $layoutData['image'],
+								array(), '', array(), array(), true,
+								false, false, true, 1, false, true).'</div>';
 							}
 							else{
 								$img = custom_graphs_print(
-						$layoutData['id_custom_graph'], $height, $width,
+								$layoutData['id_custom_graph'], 180, 300,
 								$period, null, true, 0, false, $layoutData['image'],
 								array(), '', array(), array(), true,
-						false, false, true, 1, false, true, $layoutData['percentil']
-					);
+								false, false, true, 1, false, true);
 							}
 			
 					
+				}
+				
+				else{
+					
+					if($layoutData['label_position']=='left'){
+						$img = '<div style="float:right;height:'.$himg.'px;">'.custom_graphs_print(
+						$layoutData['id_custom_graph'],$height,$width,
+						$period, null, true, 0, false, $layoutData['image'],
+						array(), '', array(), array(), true,
+						false, false, true, 1, false, true).'</div>';
+					}
+					else if($layoutData['label_position']=='right'){
+						$img = '<div style="float:left;height:'.$himg.'px;">'.custom_graphs_print(
+						$layoutData['id_custom_graph'],$height,$width,
+						$period, null, true, 0, false, $layoutData['image'],
+						array(), '', array(), array(), true,
+						false, false, true, 1, false, true).'</div>';
+					}
+					else{
+						$img = custom_graphs_print(
+						$layoutData['id_custom_graph'],$height,$width,
+						$period, null, true, 0, false, $layoutData['image'],
+						array(), '', array(), array(), true,
+						false, false, true, 1, false, true);
+					}
+					
+					
+				}
+					
+					}
 		
 			}
 			else {
@ -792,13 +958,62 @@ function visual_map_print_item($mode = "read", $layoutData,
 					$homeurl = '';
 		
 				if(get_parameter('action') == 'edit'){
-					$img =  '<img src="images/console/signes/module_graph.png" style="width:'.$width.'px;height:'.$height.'px;">';
+					if($width == 0 || $height == 0){
+							$img =  '<img src="images/console/signes/module_graph.png" style="width:300px;height:180px;'.$imgpos.'">';	
 						}
-				else {
-					$img =  grafico_modulo_sparse($id_module, $period, 0, $width, $height, '', null,
+						else{
+							$img =  '<img src="images/console/signes/module_graph.png" style="width:'.$width.'px;height:'.$height.'px;'.$imgpos.'">';
+						}				
+			 		}
+			else{
+			
+				if($width == 0 || $height == 0){
+					
+					if($layoutData['label_position']=='left'){
+						$img =  '<div style="float:right;height:'.$himg.'px;">'.grafico_modulo_sparse($id_module, $period, 0,300,180,
+						'',null,
 						false, 1, false, 0, '', 0, 0, true, false, '', 1, false,
-									          '', false, false, false, $layoutData['image'], null, true,
-									          false,$type_graph);
+						'', false, false, false, $layoutData['image'], null, true, false,$type_graph).'</div>';
+					}
+					else if($layoutData['label_position']=='right'){
+						$img =  '<div style="float:left;height:'.$himg.'px;">'.grafico_modulo_sparse($id_module, $period, 0,300,180,
+						'',null,
+						false, 1, false, 0, '', 0, 0, true, false, '', 1, false,
+						'', false, false, false, $layoutData['image'], null, true, false,$type_graph).'</div>';
+					}
+					else{
+						$img =  grafico_modulo_sparse($id_module, $period, 0,300,180,
+						'',null,
+						false, 1, false, 0, '', 0, 0, true, false, '', 1, false,
+						'', false, false, false, $layoutData['image'], null, true, false,$type_graph);
+					}
+									
+									
+					}
+					else{
+						
+						if($layoutData['label_position']=='left'){
+							$img =  '<div style="float:right;height:'.$himg.'px;">'.grafico_modulo_sparse($id_module, $period, 0,$width,$height,
+							'',null,
+							false, 1, false, 0, '', 0, 0, true, false, '', 1, false,
+							'', false, false, false, $layoutData['image'], null, true, false,$type_graph).'</div>';
+					  }
+						else if($layoutData['label_position']=='right'){
+							$img =  '<div style="float:left;height:'.$himg.'px;">'.grafico_modulo_sparse($id_module, $period, 0,$width,$height,
+							'',null,
+							false, 1, false, 0, '', 0, 0, true, false, '', 1, false,
+							'', false, false, false, $layoutData['image'], null, true, false,$type_graph).'</div>';
+						}
+						else{
+							$img =  grafico_modulo_sparse($id_module, $period, 0,$width,$height,
+							'',null,
+							false, 1, false, 0, '', 0, 0, true, false, '', 1, false,
+							'', false, false, false, $layoutData['image'], null, true, false,$type_graph);
+						}
+						
+					}
+					
+					
 					}
 		      }
 			
@ -860,7 +1075,6 @@ function visual_map_print_item($mode = "read", $layoutData,
 			'position: absolute; ' .
 			'top: ' . $top . 'px; ' .
 			'left: ' . $left . 'px;' .
-			'text-align: left;' .
 			'display: inline-block; ' . $sizeStyle . '">';
 	
 	if ($link) {
@ -869,6 +1083,19 @@ function visual_map_print_item($mode = "read", $layoutData,
 	
 	switch ($type) {
 		case BOX_ITEM:
+		
+			
+			if($width == 0 || $width == 0){
+				$style = "";
+				$style .= "width: 300px; ";
+				$style .= "height: 180px; ";
+				$style .= "border-style: solid; ";
+				$style .= "border-width: " . $border_width . "px; ";
+				$style .= "border-color: " . $border_color . "; ";
+				$style .= "background-color: " . $fill_color . "; ";
+				echo "<div style='" . $style . "'></div>";
+			}
+				else{
 					if (!empty($proportion)){
 						$style = "";
 						$style .= "width: " . ($width * $proportion['proportion_width']) . "px; ";
@ -889,11 +1116,11 @@ function visual_map_print_item($mode = "read", $layoutData,
 						$style .= "background-color: " . $fill_color . "; ";
 						echo "<div style='" . $style . "'></div>";
 					}
+				}

 			break;
 		case STATIC_GRAPH:
 		case GROUP_ITEM:
-			echo "<div>";
 			if ($layoutData['image'] != null) {
 						
 				
@ -926,46 +1153,70 @@ function visual_map_print_item($mode = "read", $layoutData,
 					if (is_file($config['homedir'] . '/' . $img))
 						$infoImage = getimagesize($config['homedir'] . '/' . $img);
 					
-					if ($width != 0) {
+					if ($height == 0 || $height == 0) {
+						$height = '70px';
+						$width = '70px';
+					}
+					else {
+						$height = (integer)($proportion['proportion_height'] * $height);
 						$width = (integer)($proportion['proportion_width'] * $width);
 					}
-					else {
-						$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
 				}
 					
-					if ($height != 0) {
-						$height = (integer)($proportion['proportion_height'] * $height);
-					}
-					else {
-						$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
-					}
+				$imgpos = '';
+								
+				if($layoutData['label_position']=='up'){
+					echo io_safe_output($text);
 				}
 				
-				if (($width != 0) && ($height != 0)) 
-					echo html_print_image($img, true,
-						array("class" => "image",
-							"id" => "image_" . $id,
-							"width" => "$width",
-							"height" => "$height",
-							"title" => $img_style_title,
-							"style" => $borderStyle), false,
-							false, false, $isExternalLink);
-				else
+				if($layoutData['label_position']=='left'){
+					$imgpos = 'float:right';
+				}
+				else if($layoutData['label_position']=='right'){
+					$imgpos = 'float:left';
+				}
+				
+				if ($width == 0 || $height == 0) 
 				echo html_print_image($img, true,
 					array("class" => "image",
 						"id" => "image_" . $id,
 						"width" => "70px",
 						"height" => "70px",
 						"title" => $img_style_title,
-							"style" => $borderStyle), false,
+						"style" => $borderStyle.$imgpos), false,
 						false, false, $isExternalLink);
-				echo '<br />';
+				else
+				echo html_print_image($img, true,
+					array("class" => "image",
+						"id" => "image_" . $id,
+						"width" => $width,
+						"height" => $height,
+						"title" => $img_style_title,
+						"style" => $borderStyle.$imgpos), false,
+						false, false, $isExternalLink);
+					
 			}
+			
+			if($layoutData['label_position']=='down'){
 				echo io_safe_output($text);
-			echo "</div>";
+			}			
+			else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
+				echo io_safe_output($text);
+			}
+			
 			break;
 		
 		case PERCENTILE_BAR:
+		
+		$imgpos = '';
+								
+		if($layoutData['label_position']=='left'){
+			$imgpos = 'float:right;';
+		}
+		else if($layoutData['label_position']=='right'){
+			$imgpos = 'float:left;';
+		}
+		
 		$progress_bar_heigh = 15;
 		if (!empty($proportion)) {
 			if ($width != 0) {
@ -983,34 +1234,59 @@ function visual_map_print_item($mode = "read", $layoutData,
 				$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
 			}
 		}
-		echo io_safe_output($text) . '<br />';
+		
+		if($layoutData['label_position']=='up'){
+			echo io_safe_output($text);
+		}
 		
 		ob_start();
 		if ($type == PERCENTILE_BUBBLE) {
-			echo progress_bubble($percentile, $width, $width, '', 1, $value_text, $colorStatus);
+			echo progress_bubble($percentile, $width, $width, '', 1, $value_text, $colorStatus,$imgpos);
 		}
 		else {
-			echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
+			echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus,$imgpos);
 		}
 		$img = ob_get_clean();
 		
 		
 		if(get_parameter('action') == 'edit'){
 		
-		$img =  '<img src="images/console/signes/percentil.png" style="width:'.$width.'px;height:30px;">';
+		if($width == 0){
+		$img =  '<img src="images/console/signes/percentil.png" style="width:130px;height:30px;'.$imgpos.'">';	
+		}
+		else{
+		$img =  '<img src="images/console/signes/percentil.png" style="width:'.$width.'px;height:30px;'.$imgpos.'">';	
+		}
 					
 		}
 		else{
 			
-		$img = str_replace('>', 'class="image" id="image_' . $id . '" />', $img);
+		$img = str_replace('>', 'class="image" style="height:'.$himg.'px;width:'.$wimg.'px;'.$imgpos.'" id="image_' . $id . '" />', $img);
 		
 		}
 		
 		echo $img;		
 		
+		if($layoutData['label_position']=='down'){
+			echo io_safe_output($text);
+		}			
+		else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
+			echo io_safe_output($text);
+		}	
+		
 		break;
 		
 		case PERCENTILE_BUBBLE:
+		
+			$imgpos = '';
+									
+			if($layoutData['label_position']=='left'){
+				$imgpos = 'float:right;';
+			}
+			else if($layoutData['label_position']=='right'){
+				$imgpos = 'float:left;';
+			}
+		
 		 	$progress_bar_heigh = 15;
 			if (!empty($proportion)) {
 				if ($width != 0) {
@ -1028,11 +1304,20 @@ function visual_map_print_item($mode = "read", $layoutData,
 					$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
 				}
 			}
-			echo io_safe_output($text) . '<br />';
+			
+			if($layoutData['label_position']=='up'){
+			echo io_safe_output($text);
+		}
 			
 			ob_start();
 			if ($type == PERCENTILE_BUBBLE) {
-				echo progress_bubble($percentile, $width, $width, '', 1, $value_text, $colorStatus);
+				if($width == 0){
+					echo progress_bubble($percentile, 100,100, '', 1, $value_text, $colorStatus,$s);
+				
+				}
+				else{
+					echo progress_bubble($percentile, $width,$width, '', 1, $value_text, $colorStatus);
+				}
 			}
 			else {
 				echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
@ -1042,22 +1327,42 @@ function visual_map_print_item($mode = "read", $layoutData,
 			
 			if(get_parameter('action') == 'edit'){
 			
-			$img =  '<img src="images/console/signes/percentil_bubble.png" style="width:'.$width.'px;height:'.$width.'px;">';
+			if($width == 0){
+			$img =  '<img src="images/console/signes/percentil_bubble.png" style="width:130px;height:130px;'.$imgpos.'">';	
+			}
+			else{
+			$img =  '<img src="images/console/signes/percentil_bubble.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';	
+			}
 						
 			}
 			else{
 				
-			$img = str_replace('>', 'class="image" id="image_' . $id . '" />', $img);
+			$img = str_replace('>', 'class="image" style="width:'.$wimg.'px;height:'.$himg.'px;'.$imgpos.'" id="image_' . $id . '" />', $img);
 			
 			}
 			
 			echo $img;			
 			
+			if($layoutData['label_position']=='down'){
+			echo io_safe_output($text);
+		}			
+		else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
+			echo io_safe_output($text);
+		}
+			
 			break;
 		
 		case MODULE_GRAPH:
-			echo io_safe_output($text) . '<br />'; 
+			if($layoutData['label_position']=='up'){
+				echo io_safe_output($text);
+			}
 			echo $img;
+			if($layoutData['label_position']=='down'){
+			echo io_safe_output($text);
+			}			
+			else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
+				echo io_safe_output($text);
+			}
 			break;
 		case SIMPLE_VALUE:
 		case SIMPLE_VALUE_MAX:
@ -1106,18 +1411,20 @@ function visual_map_print_item($mode = "read", $layoutData,
 				}
 			}
 			
-			$io_safe_output_text = str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
+			//$io_safe_output_text = str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
 			
 			
 			
 			if(get_parameter('action') == 'edit'){
 							
-			echo 'Data value';
+			//echo 'Data value';
+			
+			echo $io_safe_output_text;
 								
 				}
 			else{
 		
-			echo $io_safe_output_text;
+			echo str_replace(array('_VALUE_','_value_'), $value, $io_safe_output_text);
 				
 				}
 			
@ -1168,7 +1475,6 @@ function visual_map_print_item($mode = "read", $layoutData,
 						array("class" => "image", "id" => "image_" . $id,"width" => "70px",
 						"70px" => "$height"),
 						false, false, false, $isExternalLink);
-				echo '<br />';
 			}
 			break;
 		default:
@ -1248,14 +1554,15 @@ function visual_map_get_simple_value($type, $id_module, $period = SECONDS_1DAY)
 			}
 			else {
 				if ( is_numeric($value) )
-					$value = format_for_graph($value, $config['graph_precision']);
+				$value = remove_right_zeros(number_format($value, $config['graph_precision']));
+				//$value = format_for_graph($value, $config['graph_precision']);
+					
 				if (!empty($unit_text)) {
 					$value .= " " . $unit_text;
 				}
 			}
 			
 			$value = preg_replace ('/\n/i','<br>',$value);
-            $value =  preg_replace ('/\t/i','&#09;',$value);
 			$value =  preg_replace ('/\s/i','&nbsp;',$value);
 			
 			return $value;
@ -2079,7 +2386,7 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
 		$(window).load(function () {
 			draw_lines(lines, 'background_'+id_layout);
 			draw_user_lines_read('background_'+id_layout);
-			center_labels();
+			//center_labels();
 		});
 		/* ]]> */
 	</script>
@ -2137,12 +2444,26 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
 	}
 	
 	if (defined('METACONSOLE')) {
-		echo "<div style='width: 100%; overflow:auto; margin: 0 auto; padding:5px;'>";
+		echo "<div style='width: 920px; overflow:auto; margin: 0 auto;'>";
 	}
 	
-	echo '<div style="background-color:'.$layout["background_color"].';"><div id="background_'.$id_layout.'"
-		style="margin:0px auto;
-			text-align:center;
+	echo '<div style="';
+	
+	if(get_parameter('pure')==1){
+		echo 'width:100%;height:100%;position:absolute;';
+	}
+	
+	
+	echo 'background-color:'.$layout["background_color"].';"><div id="background_'.$id_layout.'"
+		style="margin:0px auto;';
+
+		if(get_parameter('pure')==1){
+			echo 'top: 50%;
+    transform: translate(-0%, -50%);
+    -webkit-transform: translate(-0%, -50%);';
+		}		
+		
+ echo 'text-align:;
 			z-index: 0;
 			position:relative;
 			width:' . $mapWidth . 'px;
@ -2187,11 +2508,6 @@ function visual_map_print_visual_map ($id_layout, $show_links = true,
 				'proportion_width' => $proportion_width);
 		}
 		
-		if($layout_data['id_custom_graph']){
-			$layout_data['percentil'] = db_get_value ("percentil", "tgraph",
-				"id_graph", $layout_data["id_custom_graph"]);
-		}
-
 		switch ($layout_data['type']) {
 			case LINE_ITEM:
 				visual_map_print_user_lines($layout_data, $proportion);
--- a/pandora_console/include/functions_visual_map_editor.php
+++ b/pandora_console/include/functions_visual_map_editor.php
@ -43,7 +43,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 	
 	
 	
-	echo '<div id="properties_panel" style="display: none; position: absolute; border: 2px solid #114105; padding: 5px; background: white; z-index: 90;">';
+	echo '<div id="properties_panel" style="display: none; position: absolute; border: 1px solid lightgray; padding: 5px; background: white; z-index: 90;">';
 	//----------------------------Hiden Form----------------------------
 	?>
 	<table class="databox filters" border="0" cellpadding="4" cellspacing="4" width="350">
@ -164,7 +164,25 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 				'datos',
 				'group_item');
 			$form_items['label_row']['html'] =
-				'<td align="left" valign="top" style="">' . __('Label') . '</td>
+				'<td align="left" valign="top" style="">' . __('Label') . '
+				
+				<div id="label_box_arrow" style="text-align:center;width:120px;height:110px;margin-top:50px;">
+					<span>Label position</span>
+					
+					<div class="labelpos" id="labelposup" position="up" style="width:20px;height:20px;margin-top:10px;margin-left:45px;cursor: pointer;"><img src="'.$config['homeurl'].'images/label_up.png" style="height:100%;width:100%;"></div>
+					
+					<div class="labelpos" id="labelposleft" position="left" style="position:relative;top:-5px;width:20px;height:20px;margin-top:15px;cursor: pointer;"><img src="'.$config['homeurl'].'images/label_left.png" style="height:100%;width:100%;"></div>
+					
+					<div style="font-weight:bold;width:40px;height:20px;position:relative;margin-left:35px;margin-top:-24px;cursor: default;"><span style="float:left;margin-top:3px;margin-left:5px;">Object</span></div>
+					
+					<div class="labelpos" id="labelposright" position="right" style="top:2px;width:20px;height:20px;position:relative;margin-left:90px;margin-top:-24px;cursor: pointer;"><img src="'.$config['homeurl'].'images/label_right.png" style="height:100%;width:100%;"></div>
+					
+					<div class="labelpos" sel="yes" id="labelposdown" position="down" style="width:20px;height:20px;position:relative;margin-left:45px;margin-top:10px;cursor: pointer;"><img src="'.$config['homeurl'].'images/label_down_2.png" style="height:100%;width:100%;"></div>
+					
+				</div>
+				
+				
+				</td>
 				<td align="left" style="">' .
 				html_print_input_text('label', '', '', 20, 200, true) . '</td>';
 			
@ -437,7 +455,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items['button_update_row'] = array();
 			$form_items['button_update_row']['items'] = array('datos');
 			$form_items['button_update_row']['html'] = '<td align="left" colspan="2" style="text-align: right;">' .
-				html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', 'class="sub cancel"', true) .
+				html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', 'class="sub cancel"', true) . '<span ="margin-right:10px;">&nbsp</span>' .
 				html_print_button(__('Update'), 'update_button', false, 'update_button_palette_callback();', 'class="sub upd"', true) .
 				'</td>';
 			
@ -445,7 +463,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
 			$form_items['button_create_row'] = array();
 			$form_items['button_create_row']['items'] = array('datos');
 			$form_items['button_create_row']['html'] = '<td align="left" colspan="2" style="text-align: right;">' .
-				html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', 'class="sub cancel"', true) . 
+				html_print_button(__('Cancel'), 'cancel_button', false, 'cancel_button_palette_callback();', 'class="sub cancel"', true)  . '<span ="margin-right:10px;">&nbsp</span>' .
 				html_print_button(__('Create'), 'create_button', false, 'create_button_palette_callback();', 'class="sub wand"', true) . 
 				'</td>';
 			
@ -589,6 +607,8 @@ function visual_map_editor_print_toolbox() {
 		visual_map_print_button_editor('group_item', __('Group'), 'left', false, 'group_item_min', true);
 		visual_map_print_button_editor('box_item', __('Box'), 'left', false, 'box_item_min', true);
 		visual_map_print_button_editor('line_item', __('Line'), 'left', false, 'line_item_min', true);
+  echo '<a href="javascript:" class="tip"><img src="'.$config['homeurl'].'/images/tip.png" data-title="The data displayed in editor mode is not real" data-use_title_for_force_title="1" 
+			class="forced_title" alt="The data displayed in editor mode is not real"></a>';
 		
 		enterprise_hook("enterprise_visual_map_editor_print_toolbox");
 		
--- a/pandora_console/include/graphs/flot/pandora.flot.js
+++ b/pandora_console/include/graphs/flot/pandora.flot.js
@ -850,7 +850,7 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
 	alert_ids, legend_alerts, yellow_threshold, red_threshold,
 	force_integer, separator, separator2, 
 	yellow_up, red_up, yellow_inverse, red_inverse,
-	series_suffix_str, dashboard, vconsole, xaxisname) {
+	series_suffix_str, dashboard, vconsole, xaxisname,background_color,legend_color) {

 	var threshold = true;
 	var thresholded = false;
@ -1509,7 +1509,6 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,

 	// The first execution, the graph data is the base data
 	datas = data_base;
-
 	// minTickSize
 	var count_data = datas[0].data.length;
 	var min_tick_pixels = 80;
@ -1532,8 +1531,9 @@ function pandoraFlotArea(graph_id, values, labels, labels_long, legend,
 				clickable: true,
 				borderWidth:1,
 				borderColor: '#666',
-				tickColor: '#eee',
-				markings: markings
+				tickColor: background_color,
+				markings: markings,
+				color: legend_color
 				},
 			xaxes: [ {
 					axisLabelFontSizePixels: font_size,
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@ -2353,60 +2353,85 @@ span#plugin_description {
 #tinymce {
 	text-align: left;
 }
-.visual_font_size_4pt, .visual_font_size_4pt > em, .visual_font_size_4pt > strong, .visual_font_size_4pt > strong > span .visual_font_size_4pt > span {
+.visual_font_size_4pt, .visual_font_size_4pt > em, .visual_font_size_4pt > strong, .visual_font_size_4pt > strong > span, .visual_font_size_4pt > span, .visual_font_size_4pt > strong > em, .visual_font_size_4pt > em > strong, .visual_font_size_4pt em span, .visual_font_size_4pt span em  {
 	font-size: 4pt !important;
+	line-height: 4pt;
 }
-.visual_font_size_6pt, .visual_font_size_6pt > em, .visual_font_size_6pt > strong, .visual_font_size_6pt > strong > span, .visual_font_size_6pt > span {
+.visual_font_size_6pt, .visual_font_size_6pt > em, .visual_font_size_6pt > strong, .visual_font_size_6pt > strong > span, .visual_font_size_6pt > span, .visual_font_size_6pt > strong > em, .visual_font_size_6pt > em > strong, .visual_font_size_6pt em span, .visual_font_size_6pt span em   {
 	font-size: 6pt !important;
+	line-height: 6pt;
 }
-.visual_font_size_8pt, .visual_font_size_8pt > em, .visual_font_size_8pt > strong, .visual_font_size_8pt > strong > span , .visual_font_size_8pt > span {
+.visual_font_size_8pt, .visual_font_size_8pt > em, .visual_font_size_8pt > strong, .visual_font_size_8pt > strong > span , .visual_font_size_8pt > span, .visual_font_size_8pt > strong > em, .visual_font_size_8pt > em > strong, .visual_font_size_8pt em span, .visual_font_size_8pt span em   {
 	font-size: 8pt !important;
+	line-height: 8pt;
 }
-.visual_font_size_14pt, .visual_font_size_14pt > em , .visual_font_size_14pt > strong, .visual_font_size_14pt > strong > span, .visual_font_size_14pt > span  {
-	font-size: 14pt !important;
+.visual_font_size_10pt, .visual_font_size_10pt > em , .visual_font_size_10pt > strong, .visual_font_size_10pt > strong > em, .visual_font_size_10pt > em > strong, .visual_font_size_10pt em span, .visual_font_size_10pt span em   {
+	font-size: 10pt !important;
+	line-height: 10pt;
 }
-.visual_font_size_24pt, .visual_font_size_24pt > em, .visual_font_size_24pt > strong, .visual_font_size_24pt > strong > span , .visual_font_size_24pt > span {
-	font-size: 24pt !important;
-}
-.visual_font_size_36pt, .visual_font_size_36pt > em, .visual_font_size_36pt > strong, .visual_font_size_36pt > strong > span, .visual_font_size_36pt > span {
-	font-size: 36pt !important;
-}
-.visual_font_size_72pt, .visual_font_size_72pt > em, .visual_font_size_72pt > strong, .visual_font_size_72pt > strong > span, .visual_font_size_72pt > span {
-	font-size: 72pt !important;
-}
-
-.visual_font_size_96pt, .visual_font_size_96pt > em, .visual_font_size_96pt > strong, .visual_font_size_96pt > strong > span, .visual_font_size_96pt > span {
-	font-size: 96pt !important;
-}
-
-.visual_font_size_128pt, .visual_font_size_128pt > em, .visual_font_size_128pt > strong, .visual_font_size_128pt > strong > span, .visual_font_size_128pt > span {
-	font-size: 128pt !important;
-}
-
-.visual_font_size_154pt, .visual_font_size_154pt > em, .visual_font_size_154pt > strong, .visual_font_size_154pt > strong > span, .visual_font_size_154pt > span {
-	font-size: 154pt !important;
-}
-
-.visual_font_size_196pt, .visual_font_size_196pt > em, .visual_font_size_196pt > strong, .visual_font_size_196pt > strong > span, .visual_font_size_196pt > span {
-	font-size: 196pt !important;
-}
-
-
-
-.resize_visual_font_size_8pt, .resize_visual_font_size_8pt > em, .resize_visual_font_size_8pt > strong, .resize_visual_font_size_8pt > strong > span, .resize_visual_font_size_8pt > span {
-	font-size: 4pt !important;
-}
-.resize_visual_font_size_14pt, .resize_visual_font_size_14pt > em , .resize_visual_font_size_14pt > strong, .resize_visual_font_size_14pt > strong > span, .resize_visual_font_size_14pt > span {
-	font-size: 7pt !important;
-}
-.resize_visual_font_size_24pt, .resize_visual_font_size_24pt > em, .resize_visual_font_size_24pt > strong, .resize_visual_font_size_24pt > strong > span, .resize_visual_font_size_24pt > span {
+.visual_font_size_12pt, .visual_font_size_12pt > em , .visual_font_size_12pt > strong, .visual_font_size_12pt > strong > em, .visual_font_size_12pt > em > strong, .visual_font_size_12pt em span, .visual_font_size_12pt span em   {
 	font-size: 12pt !important;
+	line-height: 12pt;
 }
-.resize_visual_font_size_36pt, .resize_visual_font_size_36pt > em, .resize_visual_font_size_36pt > strong, .resize_visual_font_size_36pt > strong > span, .resize_visual_font_size_36pt > span {
-	font-size: 18pt !important;
+.visual_font_size_14pt, .visual_font_size_14pt > em , .visual_font_size_14pt > strong, .visual_font_size_14pt > strong > span, .visual_font_size_14pt > span, .visual_font_size_14pt > strong > em, .visual_font_size_14pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em    {
+	font-size: 14pt !important;
+	line-height: 14pt;
 }
-.resize_visual_font_size_72pt, .resize_visual_font_size_72pt > em, .resize_visual_font_size_72pt > strong, .resize_visual_font_size_72pt > strong > span, .resize_visual_font_size_72pt > span {
+.visual_font_size_24pt, .visual_font_size_24pt > em, .visual_font_size_24pt > strong, .visual_font_size_24pt > strong > span , .visual_font_size_24pt > span, .visual_font_size_24pt > strong > em, .visual_font_size_24pt > em > strong, .visual_font_size_24pt em span, .visual_font_size_24pt span em   {
+	font-size: 24pt !important;
+	line-height: 24pt;
+}
+.visual_font_size_36pt, .visual_font_size_36pt > em, .visual_font_size_36pt > strong, .visual_font_size_36pt > strong > span, .visual_font_size_36pt > span, .visual_font_size_36pt > strong > em, .visual_font_size_36pt > em > strong, .visual_font_size_36pt em span, .visual_font_size_36pt span em   {
 	font-size: 36pt !important;
+	line-height: 36pt;
+}
+.visual_font_size_72pt, .visual_font_size_72pt > em, .visual_font_size_72pt > strong, .visual_font_size_72pt > strong > span, .visual_font_size_72pt > span, .visual_font_size_72pt > strong > em, .visual_font_size_72pt > em > strong, .visual_font_size_72pt em span, .visual_font_size_72pt span em   {
+	font-size: 72pt !important;
+	line-height: 72pt;
+}
+
+.visual_font_size_96pt, .visual_font_size_96pt > em, .visual_font_size_96pt > strong, .visual_font_size_96pt > strong > span, .visual_font_size_96pt > span, .visual_font_size_96pt > strong > em, .visual_font_size_96pt > em > strong, .visual_font_size_96pt em span, .visual_font_size_96pt span em   {
+	font-size: 96pt !important;
+	line-height: 96pt;
+}
+
+.visual_font_size_128pt, .visual_font_size_128pt > em, .visual_font_size_128pt > strong, .visual_font_size_128pt > strong > span, .visual_font_size_128pt > span, .visual_font_size_128pt > strong > em, .visual_font_size_128pt > em > strong, .visual_font_size_128pt em span, .visual_font_size_128pt span em   {
+	font-size: 128pt !important;
+	line-height: 128pt;
+}
+
+.visual_font_size_154pt, .visual_font_size_154pt > em, .visual_font_size_154pt > strong, .visual_font_size_154pt > strong > span, .visual_font_size_154pt > span, .visual_font_size_154pt > strong > em, .visual_font_size_154pt > em > strong, .visual_font_size_154pt em span, .visual_font_size_154pt span em   {
+	font-size: 154pt !important;
+	line-height: 154pt;
+}
+
+.visual_font_size_196pt, .visual_font_size_196pt > em, .visual_font_size_196pt > strong, .visual_font_size_196pt > strong > span, .visual_font_size_196pt > span, .visual_font_size_196pt > strong > em, .visual_font_size_196pt > em > strong, .visual_font_size_196pt em span, .visual_font_size_196pt span em   {
+	font-size: 196pt !important;
+	line-height: 196pt;
+}
+
+
+
+.resize_visual_font_size_8pt, .resize_visual_font_size_8pt > em, .resize_visual_font_size_8pt > strong, .resize_visual_font_size_8pt > strong > span, .resize_visual_font_size_8pt > span, .resize_visual_font_size_8pt > strong > em, .resize_visual_font_size_8pt > em > strong, .visual_font_size_8pt em span, .visual_font_size_8pt span em   {
+	font-size: 4pt !important;
+	line-height: 4pt;
+}
+.resize_visual_font_size_14pt, .resize_visual_font_size_14pt > em , .resize_visual_font_size_14pt > strong, .resize_visual_font_size_14pt > strong > span, .resize_visual_font_size_14pt > span, .resize_visual_font_size_14pt > strong > em, .resize_visual_font_size_14pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em  {
+	font-size: 7pt !important;
+	line-height: 7pt;
+}
+.resize_visual_font_size_24pt, .resize_visual_font_size_24pt > em, .resize_visual_font_size_24pt > strong, .resize_visual_font_size_24pt > strong > span, .resize_visual_font_size_24pt > span, .resize_visual_font_size_24pt > strong > em, .resize_visual_font_size_24pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em  {
+	font-size: 12pt !important;
+	line-height: 12pt;
+	
+}
+.resize_visual_font_size_36pt, .resize_visual_font_size_36pt > em, .resize_visual_font_size_36pt > strong, .resize_visual_font_size_36pt > strong > span, .resize_visual_font_size_36pt > span, .resize_visual_font_size_36pt > strong > em, .resize_visual_font_size_36pt > em > strong, .visual_font_size_36pt em span, .visual_font_size_36pt span em  {
+	font-size: 18pt !important;
+	line-height: 18pt;
+}
+.resize_visual_font_size_72pt, .resize_visual_font_size_72pt > em, .resize_visual_font_size_72pt > strong, .resize_visual_font_size_72pt > strong > span, .resize_visual_font_size_72pt > span, .resize_visual_font_size_72pt > strong > em, .resize_visual_font_size_72pt > em > strong, .visual_font_size_72pt em span, .visual_font_size_72pt span em  {
+	font-size: 36pt !important;
+	line-height: 36pt;
 }

 /*SIDEBAR*/
@ -3477,6 +3502,30 @@ div.simple_value > a > span.text p
 src: url('../fonts/unicode.ttf') format('truetype');
 }

+@font-face
+{
+ font-family: 'roboto';
+ src: url('../../fonts/roboto.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'opensans';
+ src: url('../../fonts/opensans.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'lato';
+ src: url('../../fonts/lato.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'leaguegothic';
+ src: url('../../fonts/leaguegothic.woff') format('woff');
+}
+
 .unicode{
 	font-family: unicodeFont;
 }
@ -3608,3 +3657,20 @@ color:#82b92e;font-family:Nunito;font-size:10pt;position:relative;top:6px;
 .input_error {
    border: 1px solid red;
 }
+
+#toolbox > input{
+	border-width:0px 1px 0px 0px;
+	border-color: lightgray;
+}
+
+#toolbox > input.service_min{
+	border-width:0px 0px 0px 0px;
+}
+
+#toolbox > input.grid_min{
+	border-width:0px 0px 0px 0px;
+}
+
+#tinymce{
+	padding-top:20px;
+}
--- a/pandora_console/include/styles/pandora_black.css
+++ b/pandora_console/include/styles/pandora_black.css
@ -367,6 +367,30 @@ div#foot {
  src: local('Nunito-Regular'), url(../../fonts/nunito.woff) format('woff');
 }

+@font-face
+{
+ font-family: 'roboto';
+ src: url('../../fonts/roboto.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'opensans';
+ src: url('../../fonts/opensans.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'lato';
+ src: url('../../fonts/lato.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'leaguegothic';
+ src: url('../../fonts/leaguegothic.woff') format('woff');
+}
+
 #login_body {
 	/* Set rules to fill background */
 	min-height: 100%;
@ -2330,41 +2354,84 @@ span#plugin_description {
 #tinymce {
 	text-align: left;
 }
-.visual_font_size_4pt, .visual_font_size_4pt > em, .visual_font_size_4pt > strong {
-	font-size: 4pt;
+.visual_font_size_4pt, .visual_font_size_4pt > em, .visual_font_size_4pt > strong, .visual_font_size_4pt > strong > span, .visual_font_size_4pt > span, .visual_font_size_4pt > strong > em, .visual_font_size_4pt > em > strong, .visual_font_size_4pt em span, .visual_font_size_4pt span em  {
+	font-size: 4pt !important;
+	line-height: 4pt; 
 }
-.visual_font_size_6pt, .visual_font_size_6pt > em, .visual_font_size_6pt > strong {
-	font-size: 6pt;
+.visual_font_size_6pt, .visual_font_size_6pt > em, .visual_font_size_6pt > strong, .visual_font_size_6pt > strong > span, .visual_font_size_6pt > span, .visual_font_size_6pt > strong > em, .visual_font_size_6pt > em > strong, .visual_font_size_6pt em span, .visual_font_size_6pt span em   {
+	font-size: 6pt !important;
+	line-height: 6pt; 
 }
-.visual_font_size_8pt, .visual_font_size_8pt > em, .visual_font_size_8pt > strong {
-	font-size: 8pt;
+.visual_font_size_8pt, .visual_font_size_8pt > em, .visual_font_size_8pt > strong, .visual_font_size_8pt > strong > span , .visual_font_size_8pt > span, .visual_font_size_8pt > strong > em, .visual_font_size_8pt > em > strong, .visual_font_size_8pt em span, .visual_font_size_8pt span em   {
+	font-size: 8pt !important;
+	line-height: 8pt; 
 }
-.visual_font_size_14pt, .visual_font_size_14pt > em , .visual_font_size_14pt > strong {
-	font-size: 14pt;
+.visual_font_size_10pt, .visual_font_size_10pt > em , .visual_font_size_10pt > strong, .visual_font_size_10pt > strong > em, .visual_font_size_10pt > em > strong, .visual_font_size_10pt em span, .visual_font_size_10pt span em   {
+	font-size: 10pt !important;
+	line-height: 10pt;
 }
-.visual_font_size_24pt, .visual_font_size_24pt > em, .visual_font_size_24pt > strong {
-	font-size: 24pt;
+.visual_font_size_12pt, .visual_font_size_12pt > em , .visual_font_size_12pt > strong, .visual_font_size_12pt > strong > em, .visual_font_size_12pt > em > strong, .visual_font_size_12pt em span, .visual_font_size_12pt span em   {
+	font-size: 12pt !important;
+	line-height: 12pt;
 }
-.visual_font_size_36pt, .visual_font_size_36pt > em, .visual_font_size_36pt > strong {
-	font-size: 36pt;
+.visual_font_size_14pt, .visual_font_size_14pt > em , .visual_font_size_14pt > strong, .visual_font_size_14pt > strong > span, .visual_font_size_14pt > span, .visual_font_size_14pt > strong > em, .visual_font_size_14pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em    {
+	font-size: 14pt !important;
+	line-height: 14pt; 
 }
-.visual_font_size_72pt, .visual_font_size_72pt > em, .visual_font_size_72pt > strong {
-	font-size: 72pt;
+.visual_font_size_24pt, .visual_font_size_24pt > em, .visual_font_size_24pt > strong, .visual_font_size_24pt > strong > span , .visual_font_size_24pt > span, .visual_font_size_24pt > strong > em, .visual_font_size_24pt > em > strong, .visual_font_size_24pt em span, .visual_font_size_24pt span em   {
+	font-size: 24pt !important;
+	line-height: 24pt; 
 }
-.resize_visual_font_size_8pt, .resize_visual_font_size_8pt > em, .resize_visual_font_size_8pt > strong {
-	font-size: 4pt;
+.visual_font_size_36pt, .visual_font_size_36pt > em, .visual_font_size_36pt > strong, .visual_font_size_36pt > strong > span, .visual_font_size_36pt > span, .visual_font_size_36pt > strong > em, .visual_font_size_36pt > em > strong, .visual_font_size_36pt em span, .visual_font_size_36pt span em   {
+	font-size: 36pt !important;
+	line-height: 36pt; 
 }
-.resize_visual_font_size_14pt, .resize_visual_font_size_14pt > em , .resize_visual_font_size_14pt > strong {
-	font-size: 7pt;
+.visual_font_size_72pt, .visual_font_size_72pt > em, .visual_font_size_72pt > strong, .visual_font_size_72pt > strong > span, .visual_font_size_72pt > span, .visual_font_size_72pt > strong > em, .visual_font_size_72pt > em > strong, .visual_font_size_72pt em span, .visual_font_size_72pt span em   {
+	font-size: 72pt !important;
+	line-height: 72pt;
 }
-.resize_visual_font_size_24pt, .resize_visual_font_size_24pt > em, .resize_visual_font_size_24pt > strong {
-	font-size: 12pt;
+
+.visual_font_size_96pt, .visual_font_size_96pt > em, .visual_font_size_96pt > strong, .visual_font_size_96pt > strong > span, .visual_font_size_96pt > span, .visual_font_size_96pt > strong > em, .visual_font_size_96pt > em > strong, .visual_font_size_96pt em span, .visual_font_size_96pt span em   {
+	font-size: 96pt !important;
+	line-height: 96pt; 
 }
-.resize_visual_font_size_36pt, .resize_visual_font_size_36pt > em, .resize_visual_font_size_36pt > strong {
-	font-size: 18pt;
+
+.visual_font_size_128pt, .visual_font_size_128pt > em, .visual_font_size_128pt > strong, .visual_font_size_128pt > strong > span, .visual_font_size_128pt > span, .visual_font_size_128pt > strong > em, .visual_font_size_128pt > em > strong, .visual_font_size_128pt em span, .visual_font_size_128pt span em   {
+	font-size: 128pt !important;
+	line-height: 128pt; 
 }
-.resize_visual_font_size_72pt, .resize_visual_font_size_72pt > em, .resize_visual_font_size_72pt > strong {
-	font-size: 36pt;
+
+.visual_font_size_154pt, .visual_font_size_154pt > em, .visual_font_size_154pt > strong, .visual_font_size_154pt > strong > span, .visual_font_size_154pt > span, .visual_font_size_154pt > strong > em, .visual_font_size_154pt > em > strong, .visual_font_size_154pt em span, .visual_font_size_154pt span em   {
+	font-size: 154pt !important;
+	line-height: 154pt; 
+}
+
+.visual_font_size_196pt, .visual_font_size_196pt > em, .visual_font_size_196pt > strong, .visual_font_size_196pt > strong > span, .visual_font_size_196pt > span, .visual_font_size_196pt > strong > em, .visual_font_size_196pt > em > strong, .visual_font_size_196pt em span, .visual_font_size_196pt span em   {
+	font-size: 196pt !important;
+	line-height: 196pt; 
+}
+
+
+
+.resize_visual_font_size_8pt, .resize_visual_font_size_8pt > em, .resize_visual_font_size_8pt > strong, .resize_visual_font_size_8pt > strong > span, .resize_visual_font_size_8pt > span, .resize_visual_font_size_8pt > strong > em, .resize_visual_font_size_8pt > em > strong, .visual_font_size_8pt em span, .visual_font_size_8pt span em   {
+	font-size: 4pt !important;
+	line-height: 4pt; 
+}
+.resize_visual_font_size_14pt, .resize_visual_font_size_14pt > em , .resize_visual_font_size_14pt > strong, .resize_visual_font_size_14pt > strong > span, .resize_visual_font_size_14pt > span, .resize_visual_font_size_14pt > strong > em, .resize_visual_font_size_14pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em  {
+	font-size: 7pt !important;
+	line-height: 7pt;
+}
+.resize_visual_font_size_24pt, .resize_visual_font_size_24pt > em, .resize_visual_font_size_24pt > strong, .resize_visual_font_size_24pt > strong > span, .resize_visual_font_size_24pt > span, .resize_visual_font_size_24pt > strong > em, .resize_visual_font_size_24pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em  {
+	font-size: 12pt !important;
+	line-height: 12pt; 
+}
+.resize_visual_font_size_36pt, .resize_visual_font_size_36pt > em, .resize_visual_font_size_36pt > strong, .resize_visual_font_size_36pt > strong > span, .resize_visual_font_size_36pt > span, .resize_visual_font_size_36pt > strong > em, .resize_visual_font_size_36pt > em > strong, .visual_font_size_36pt em span, .visual_font_size_36pt span em  {
+	font-size: 18pt !important;
+	line-height: 18pt;
+}
+.resize_visual_font_size_72pt, .resize_visual_font_size_72pt > em, .resize_visual_font_size_72pt > strong, .resize_visual_font_size_72pt > strong > span, .resize_visual_font_size_72pt > span, .resize_visual_font_size_72pt > strong > em, .resize_visual_font_size_72pt > em > strong, .visual_font_size_72pt em span, .visual_font_size_72pt span em  {
+	font-size: 36pt !important;
+	line-height: 36pt; 
 }

 /*SIDEBAR*/
@ -3240,3 +3307,19 @@ color:#82b92e;font-family:Nunito;font-size:10pt;position:relative;top:6px;
 .cargatextodialogo p, .cargatextodialogo b, .cargatextodialogo a{
 	font-size:18pt;
 }
+
+#toolbox > input{
+	border-width:0px 1px 0px 0px;
+	border-color: lightgray;
+}
+
+#toolbox > input.service_min{
+	border-width:0px 0px 0px 0px;
+}
+
+#toolbox > input.grid_min{
+	border-width:0px 0px 0px 0px;
+}
+#tinymce{
+	padding-top:20px;
+}
--- a/pandora_console/include/styles/pandora_green_old.css
+++ b/pandora_console/include/styles/pandora_green_old.css
@ -367,6 +367,30 @@ div#foot {
  src: local('Nunito-Regular'), url(../../fonts/nunito.woff) format('woff');
 }

+@font-face
+{
+ font-family: 'roboto';
+ src: url('../../fonts/roboto.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'opensans';
+ src: url('../../fonts/opensans.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'lato';
+ src: url('../../fonts/lato.woff2') format('woff2');
+}
+
+@font-face
+{
+ font-family: 'leaguegothic';
+ src: url('../../fonts/leaguegothic.woff') format('woff');
+}
+
 #login_body {
 	/* Set rules to fill background */
 	min-height: 100%;
@ -2411,43 +2435,85 @@ span#plugin_description {
 #tinymce {
 	text-align: left;
 }
-.visual_font_size_4pt, .visual_font_size_4pt > em, .visual_font_size_4pt > strong {
-	font-size: 4pt;
+.visual_font_size_4pt, .visual_font_size_4pt > em, .visual_font_size_4pt > strong, .visual_font_size_4pt > strong > span, .visual_font_size_4pt > span, .visual_font_size_4pt > strong > em, .visual_font_size_4pt > em > strong, .visual_font_size_4pt em span, .visual_font_size_4pt span em  {
+	font-size: 4pt !important;
+	line-height: 4pt;
 }
-.visual_font_size_6pt, .visual_font_size_6pt > em, .visual_font_size_6pt > strong {
-	font-size: 6pt;
+.visual_font_size_6pt, .visual_font_size_6pt > em, .visual_font_size_6pt > strong, .visual_font_size_6pt > strong > span, .visual_font_size_6pt > span, .visual_font_size_6pt > strong > em, .visual_font_size_6pt > em > strong, .visual_font_size_6pt em span, .visual_font_size_6pt span em   {
+	font-size: 6pt !important;
+	line-height: 6pt;
 }
-.visual_font_size_8pt, .visual_font_size_8pt > em, .visual_font_size_8pt > strong {
-	font-size: 8pt;
+.visual_font_size_8pt, .visual_font_size_8pt > em, .visual_font_size_8pt > strong, .visual_font_size_8pt > strong > span , .visual_font_size_8pt > span, .visual_font_size_8pt > strong > em, .visual_font_size_8pt > em > strong, .visual_font_size_8pt em span, .visual_font_size_8pt span em   {
+	font-size: 8pt !important;
+	line-height: 8pt;
 }
-.visual_font_size_14pt, .visual_font_size_14pt > em , .visual_font_size_14pt > strong {
-	font-size: 14pt;
+.visual_font_size_10pt, .visual_font_size_10pt > em , .visual_font_size_10pt > strong, .visual_font_size_10pt > strong > em, .visual_font_size_10pt > em > strong, .visual_font_size_10pt em span, .visual_font_size_10pt span em   {
+	font-size: 10pt !important;
+	line-height: 10pt;
 }
-.visual_font_size_24pt, .visual_font_size_24pt > em, .visual_font_size_24pt > strong {
-	font-size: 24pt;
+.visual_font_size_12pt, .visual_font_size_12pt > em , .visual_font_size_12pt > strong, .visual_font_size_12pt > strong > em, .visual_font_size_12pt > em > strong, .visual_font_size_12pt em span, .visual_font_size_12pt span em   {
+	font-size: 12pt !important;
+	line-height: 12pt;
 }
-.visual_font_size_36pt, .visual_font_size_36pt > em, .visual_font_size_36pt > strong {
-	font-size: 36pt;
+.visual_font_size_14pt, .visual_font_size_14pt > em , .visual_font_size_14pt > strong, .visual_font_size_14pt > strong > span, .visual_font_size_14pt > span, .visual_font_size_14pt > strong > em, .visual_font_size_14pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em    {
+	font-size: 14pt !important;
+	line-height: 14pt;
 }
-.visual_font_size_72pt, .visual_font_size_72pt > em, .visual_font_size_72pt > strong {
-	font-size: 72pt;
+.visual_font_size_24pt, .visual_font_size_24pt > em, .visual_font_size_24pt > strong, .visual_font_size_24pt > strong > span , .visual_font_size_24pt > span, .visual_font_size_24pt > strong > em, .visual_font_size_24pt > em > strong, .visual_font_size_24pt em span, .visual_font_size_24pt span em   {
+	font-size: 24pt !important;
+	line-height: 24pt;
 }
-.resize_visual_font_size_8pt, .resize_visual_font_size_8pt > em, .resize_visual_font_size_8pt > strong {
-	font-size: 4pt;
+.visual_font_size_36pt, .visual_font_size_36pt > em, .visual_font_size_36pt > strong, .visual_font_size_36pt > strong > span, .visual_font_size_36pt > span, .visual_font_size_36pt > strong > em, .visual_font_size_36pt > em > strong, .visual_font_size_36pt em span, .visual_font_size_36pt span em   {
+	font-size: 36pt !important;
+	line-height: 36pt;
 }
-.resize_visual_font_size_14pt, .resize_visual_font_size_14pt > em , .resize_visual_font_size_14pt > strong {
-	font-size: 7pt;
-}
-.resize_visual_font_size_24pt, .resize_visual_font_size_24pt > em, .resize_visual_font_size_24pt > strong {
-	font-size: 12pt;
-}
-.resize_visual_font_size_36pt, .resize_visual_font_size_36pt > em, .resize_visual_font_size_36pt > strong {
-	font-size: 18pt;
-}
-.resize_visual_font_size_72pt, .resize_visual_font_size_72pt > em, .resize_visual_font_size_72pt > strong {
-	font-size: 36pt;
+.visual_font_size_72pt, .visual_font_size_72pt > em, .visual_font_size_72pt > strong, .visual_font_size_72pt > strong > span, .visual_font_size_72pt > span, .visual_font_size_72pt > strong > em, .visual_font_size_72pt > em > strong, .visual_font_size_72pt em span, .visual_font_size_72pt span em   {
+	font-size: 72pt !important;
+	line-height: 72pt;
 }

+.visual_font_size_96pt, .visual_font_size_96pt > em, .visual_font_size_96pt > strong, .visual_font_size_96pt > strong > span, .visual_font_size_96pt > span, .visual_font_size_96pt > strong > em, .visual_font_size_96pt > em > strong, .visual_font_size_96pt em span, .visual_font_size_96pt span em   {
+	font-size: 96pt !important;
+	line-height: 96pt; 
+}
+
+.visual_font_size_128pt, .visual_font_size_128pt > em, .visual_font_size_128pt > strong, .visual_font_size_128pt > strong > span, .visual_font_size_128pt > span, .visual_font_size_128pt > strong > em, .visual_font_size_128pt > em > strong, .visual_font_size_128pt em span, .visual_font_size_128pt span em   {
+	font-size: 128pt !important;
+	line-height: 128pt; 
+}
+
+.visual_font_size_154pt, .visual_font_size_154pt > em, .visual_font_size_154pt > strong, .visual_font_size_154pt > strong > span, .visual_font_size_154pt > span, .visual_font_size_154pt > strong > em, .visual_font_size_154pt > em > strong, .visual_font_size_154pt em span, .visual_font_size_154pt span em   {
+	font-size: 154pt !important;
+	line-height: 154pt; 
+}
+
+.visual_font_size_196pt, .visual_font_size_196pt > em, .visual_font_size_196pt > strong, .visual_font_size_196pt > strong > span, .visual_font_size_196pt > span, .visual_font_size_196pt > strong > em, .visual_font_size_196pt > em > strong, .visual_font_size_196pt em span, .visual_font_size_196pt span em   {
+	font-size: 196pt !important;
+	line-height: 196pt; 
+}
+
+
+
+.resize_visual_font_size_8pt, .resize_visual_font_size_8pt > em, .resize_visual_font_size_8pt > strong, .resize_visual_font_size_8pt > strong > span, .resize_visual_font_size_8pt > span, .resize_visual_font_size_8pt > strong > em, .resize_visual_font_size_8pt > em > strong, .visual_font_size_8pt em span, .visual_font_size_8pt span em   {
+	font-size: 4pt !important;
+	line-height: 4pt;
+}
+.resize_visual_font_size_14pt, .resize_visual_font_size_14pt > em , .resize_visual_font_size_14pt > strong, .resize_visual_font_size_14pt > strong > span, .resize_visual_font_size_14pt > span, .resize_visual_font_size_14pt > strong > em, .resize_visual_font_size_14pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em  {
+	font-size: 7pt !important;
+	line-height: 7pt;
+}
+.resize_visual_font_size_24pt, .resize_visual_font_size_24pt > em, .resize_visual_font_size_24pt > strong, .resize_visual_font_size_24pt > strong > span, .resize_visual_font_size_24pt > span, .resize_visual_font_size_24pt > strong > em, .resize_visual_font_size_24pt > em > strong, .visual_font_size_14pt em span, .visual_font_size_14pt span em  {
+	font-size: 12pt !important;
+	line-height: 12pt;
+}
+.resize_visual_font_size_36pt, .resize_visual_font_size_36pt > em, .resize_visual_font_size_36pt > strong, .resize_visual_font_size_36pt > strong > span, .resize_visual_font_size_36pt > span, .resize_visual_font_size_36pt > strong > em, .resize_visual_font_size_36pt > em > strong, .visual_font_size_36pt em span, .visual_font_size_36pt span em  {
+	font-size: 18pt !important;
+	line-height: 18pt;
+}
+.resize_visual_font_size_72pt, .resize_visual_font_size_72pt > em, .resize_visual_font_size_72pt > strong, .resize_visual_font_size_72pt > strong > span, .resize_visual_font_size_72pt > span, .resize_visual_font_size_72pt > strong > em, .resize_visual_font_size_72pt > em > strong, .visual_font_size_72pt em span, .visual_font_size_72pt span em  {
+	font-size: 36pt !important;
+	line-height: 36pt;
+}
 /*SIDEBAR*/
 .menu_sidebar {
 	color:#111;
@ -3296,3 +3362,20 @@ color:#82b92e;font-family:Nunito;font-size:10pt;position:relative;top:6px;
 .cargatextodialogo p, .cargatextodialogo b, .cargatextodialogo a{
 	font-size:18pt;
 }
+
+#toolbox > input{
+	border-width:0px 1px 0px 0px;
+	border-color: lightgray;
+}
+
+#toolbox > input.service_min{
+	border-width:0px 0px 0px 0px;
+}
+
+#toolbox > input.grid_min{
+	border-width:0px 0px 0px 0px;
+}
+
+#tinymce{
+	padding-top:20px;
+}
--- a/pandora_console/operation/visual_console/render_view.php
+++ b/pandora_console/operation/visual_console/render_view.php
@ -217,7 +217,6 @@ $ignored_params['refr'] = '';
 		var refr = <?php echo (int)$refr; ?>;
 		var pure = <?php echo (int) $config['pure']; ?>;
 		var href = "<?php echo ui_get_url_refresh ($ignored_params); ?>";
-		
 		if (pure) {
 			var startCountDown = function (duration, cb) {
 				$('div.vc-countdown').countdown('destroy');
@ -233,7 +232,13 @@ $ignored_params['refr'] = '';
 						$('div.vc-countdown').countdown('destroy');
 						//cb();
 						url = js_html_entity_decode( href ) + duration;
-						$(document).attr ("location", url);
+						//$(document).attr ("location", url);
+						$.get(window.location.href.replace("render_view","pure_ajax"), function(respuestaSolicitud){
+							$('#background_<?php echo $id_layout; ?>').html(respuestaSolicitud);	
+							startCountDown(refr, false);
+						});
+						
+					
 					}
 				});
 			}
@ -277,20 +282,96 @@ $ignored_params['refr'] = '';
 			});
 		}
 		
-		
+		/*
 		$(".module_graph").each(function(){
-		left =	parseInt($(this).css("left")) + 150;
+		left =	parseInt($(this).css("left")) + 150 + ((parseInt($(this).css("width"))-300)/2);
 				$(this).css('left', left);
 		});
 		
-		$(".parent_graph").each(function(){
-		if($(this).css('background-color') != 'rgb(255, 255, 255)'){
-				$(this).css('color', 'red');
+		$('.item:not([class~="module_graph"])').each(function(){
+			left =	parseInt($(this).css('left')) + ((parseInt($('#' + $(this).attr('id')).css('width')) - parseInt($('#' + $(this).attr('id') + " img").css('width')))*0.5);
 			
+			$(this).css('left', left);
+		});
+		
+		
+		*/
+		
+		$(".module_graph .menu_graph").css('display','none');
+		
+		$(".parent_graph").each(function(){
+			
+		if($(this).css('background-color') != 'rgb(255, 255, 255)'){
+				$(this).css('color', '#999');				
 				}
 		});			

+		$(".overlay").removeClass("overlay").addClass("overlaydisabled");
 		
+		$('.item:not(.icon) img').each(function(){
+			
+			
+			if($(this).css('float')=='left' || $(this).css('float')=='right'){
+			
+				
+			$(this).css('margin-top',(parseInt($(this).parent().parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
+			$(this).css('margin-left','');
+			
+			}
+			else{
+				$(this).css('margin-left',(parseInt($(this).parent().parent().css('width'))/2-parseInt($(this).css('width'))/2)+'px');
+				$(this).css('margin-top','');
+			}
+			
+		});
+		
+		$('.item > div').each(function(){
+			if($(this).css('float')=='left' || $(this).css('float')=='right'){
+			
+				
+			$(this).css('margin-top',(parseInt($(this).parent().css('height'))/2-parseInt($(this).css('height'))/2-15)+'px');
+			$(this).css('margin-left','');
+			
+			}
+			else{
+				$(this).css('margin-left',(parseInt($(this).parent().css('width'))/2-parseInt($(this).css('width'))/2)+'px');
+				$(this).css('margin-top','');
+			}
+			
+		});
+		
+		$('.item > a > div').each(function(){
+			if($(this).css('float')=='left' || $(this).css('float')=='right'){
+			
+				
+			$(this).css('margin-top',(parseInt($(this).parent().parent().css('height'))/2-parseInt($(this).css('height'))/2-5)+'px');
+			$(this).css('margin-left','');
+			
+			}
+			else{
+				$(this).css('margin-left',(parseInt($(this).parent().parent().css('width'))/2-parseInt($(this).css('width'))/2)+'px');
+				$(this).css('margin-top','');
+			}
+			
+		});
+		
+		/*
+		$('.percentile_item a > img').each(function(){
+			
+			if($(this).css('float')=='left' || $(this).css('float')=='right'){
+				
+				
+			$(this).css('margin-top',(parseInt($(this).parent().parent().css('height'))/2-parseInt($(this).css('height'))/2)+'px');
+			$(this).css('margin-left','');
+			
+			}
+			else{
+				$(this).css('margin-left',(parseInt($(this).parent().parent().css('width'))/2-parseInt($(this).css('width'))/2)+'px');
+				$(this).css('margin-top','');
+			}
+			
+		});
+		*/
 	
 	});
 </script>
--- a/pandora_console/pandoradb.oracle.sql
+++ b/pandora_console/pandoradb.oracle.sql
@ -1381,6 +1381,7 @@ CREATE TABLE tlayout_data (
 	id_custom_graph NUMBER(10, 0) DEFAULT 0,
 	border_width NUMBER(10, 0) DEFAULT 0,
 	type_graph VARCHAR2(50) DEFAULT 'area',
+	label_position VARCHAR2(50) DEFAULT 'down',
 	border_color VARCHAR2(200) DEFAULT '',
 	fill_color VARCHAR2(200) DEFAULT ''
 );
--- a/pandora_console/pandoradb.postgreSQL.sql
+++ b/pandora_console/pandoradb.postgreSQL.sql
@ -1142,6 +1142,7 @@ CREATE TABLE "tlayout_data" (
 	"id_custom_graph" INTEGER NOT NULL default 0,
 	"border_width" INTEGER NOT NULL default 0,
 	"type_graph" varchar(50) NOT NULL DEFAULT 'area',
+	"label_position" varchar(50) NOT NULL DEFAULT 'down',
 	"border_color" varchar(200) DEFAULT '',
 	"fill_color" varchar(200) DEFAULT '' 
 );
--- a/pandora_console/pandoradb.sql
+++ b/pandora_console/pandoradb.sql
@ -1269,6 +1269,7 @@ CREATE TABLE IF NOT EXISTS `tlayout_data` (
 	`id_custom_graph` INTEGER UNSIGNED NOT NULL default 0,
 	`border_width` INTEGER UNSIGNED NOT NULL default 0,
 	`type_graph` varchar(50) NOT NULL default 'area',
+	`label_position` varchar(50) NOT NULL default 'down',
 	`border_color` varchar(200) DEFAULT "",
 	`fill_color` varchar(200) DEFAULT "",
 	PRIMARY KEY(`id`)