diff --git a/admin/survey/classes/class.RecodeValues.php b/admin/survey/classes/class.RecodeValues.php
index 40d84bff7..c9de91763 100644
--- a/admin/survey/classes/class.RecodeValues.php
+++ b/admin/survey/classes/class.RecodeValues.php
@@ -667,11 +667,11 @@ class RecodeValues {
 			}
 			$sugestedName = strip_tags(self::$cacheSpremenljivka['naslov'].' - recoded');
 			echo'<div id="divRecodeSprOption">';
-			echo '<label>'.$lang['srv_recode_to_spr'].':</label>';
+			echo '<label>'.$lang['srv_recode_to_spr'].': ';
 			if ( $_GET['t'] == 'charts' || $_POST['recIsCharts'] == 1 ) {
-				echo $lang['srv_recode_to_spr_same'];
+				echo $lang['srv_recode_to_spr_same'].'</label>';
 			} else {
-				echo '<input type="radio" name="recode_type" id="recode_type0" value="0" '.((int)$recode_type == 0 ? ' checked="checked"' : '').'onchange="changeRecodeType();return false;"><label for="recode_type0">'.$lang['srv_recode_to_spr_same'].'</label>';
+				echo '</label><input type="radio" name="recode_type" id="recode_type0" value="0" '.((int)$recode_type == 0 ? ' checked="checked"' : '').'onchange="changeRecodeType();return false;"><label for="recode_type0">'.$lang['srv_recode_to_spr_same'].'</label>';
 				echo '<input type="radio" name="recode_type" id="recode_type1" value="1" '.((int)$recode_type == 1 ? ' checked="checked"' : '').'onchange="changeRecodeType();return false;"><label for="recode_type1">'.$lang['srv_recode_to_spr_new'].'</label>';
 			}
 			echo '</div>';
diff --git a/admin/survey/classes/surveyAnalysis/class.SurveyChart.php b/admin/survey/classes/surveyAnalysis/class.SurveyChart.php
index 066d9de7e..4f60a4700 100644
--- a/admin/survey/classes/surveyAnalysis/class.SurveyChart.php
+++ b/admin/survey/classes/surveyAnalysis/class.SurveyChart.php
@@ -8813,7 +8813,7 @@ class SurveyChart {
         echo '<h2>'.$spremenljivka['variable'].' - '.$spremenljivka['naslov'].'</h2>';
         
         echo '<div class="popup_close"><a href="#" onClick="chartCloseAdvancedSettings(); return false;">✕</a></div>';
-		
+
 		echo '<form method="post" name="chart_advanced_settings" onsubmit="chartSaveAdvancedSettings(\''.$spid.'\', \''.self::$current_loop.'\'); return false;">';
 		
 		echo '<input type="hidden" name="anketa" value="'.self::$anketa.'" />';
@@ -8874,17 +8874,10 @@ class SurveyChart {
 		
 		
 		/* GUMBI NA DNU */
-		echo '<div id="chartSettingsButtons" class="buttons_holder">';
-		
-		echo '<span class="buttonwrapper spaceRight floatLeft">';
-		echo '<a class="ovalbutton ovalbutton_gray" onclick="chartCloseAdvancedSettings(); return false;"><span>'.$lang['srv_zapri'].'</span></a>';
-		echo '</span>';	
-		
-		echo '<span class="buttonwrapper floatLeft">';
-        echo '<a class="ovalbutton ovalbutton_orange" onclick="chartSaveAdvancedSettings(\''.$spid.'\', \''.self::$current_loop.'\'); return false;">'.$lang['srv_potrdi'].'</a>';
-        echo '</span>';		
-	
-		echo '</div>';		
+		echo '<div class="button_holder">';
+        echo '<button class="medium white-blue" onClick="chartCloseAdvancedSettings(); return false;">'.$lang['srv_zapri'].'</button>';              
+        echo '<button class="medium blue" onclick="chartSaveAdvancedSettings(\''.$spid.'\', \''.self::$current_loop.'\'); return false;">'.$lang['srv_potrdi'].'</button>';
+        echo '</div>';
 	}
 	
 	// Urejanje barv posameznega grafa
@@ -8923,11 +8916,12 @@ class SurveyChart {
 		}
 		
 		// reset na default barvo
-		echo '<br /><span class="as_link clr" onClick="chartAdvancedSettingsSetColor(\''.(is_numeric(self::$skin) ? implode("_",$default_colors) : self::$skin).'\')">'.$lang['srv_chart_advanced_default_color'].'</span>';
+		echo '<p class="as_link top16 bottom16" onClick="chartAdvancedSettingsSetColor(\''.(is_numeric(self::$skin) ? implode("_",$default_colors) : self::$skin).'\')">'.$lang['srv_chart_advanced_default_color2'].'</p>';
 		
 		// nastavitev ene od palet
-		echo '<br /><span class="clr">'.$lang['srv_chart_advanced_skin'].': ';
-		echo '<select name="chart_advanced_color" id="chart_advanced_color" onChange="chartAdvancedSettingsSetColor(this.value)">';
+		echo '<div class="setting_holder">';
+		echo '<p>'.$lang['srv_chart_advanced_skin'].': ';
+		echo '<select class="dropdown large" name="chart_advanced_color" id="chart_advanced_color" onChange="chartAdvancedSettingsSetColor(this.value)">';
 		echo '	<option' . (self::$skin == '1ka' ? ' selected="selected"' : '') . ' value="1ka">'.$lang['srv_chart_skin_1ka'].'</option>';
 		echo '	<option' . (self::$skin == 'lively' ? ' selected="selected"' : '') . ' value="lively">'.$lang['srv_chart_skin_0'].'</option>';
 		echo '	<option' . (self::$skin == 'mild' ? ' selected="selected"' : '') . ' value="mild">'.$lang['srv_chart_skin_1'].'</option>';
@@ -8944,7 +8938,7 @@ class SurveyChart {
 		}
 		
 		
-		echo '</select></span>';
+		echo '</select></p></div>';
 		
 	}
 	
@@ -8955,18 +8949,24 @@ class SurveyChart {
 		
 		$row = Cache::srv_spremenljivka($spid);
 		$disabled = ($row['edit_graf'] == 0) ? ' disabled="disabled"' : '';
+		$gray = ($row['edit_graf'] == 0) ? ' gray' : '';
 				
 		
-		echo '<div><p>';
-		echo $lang['srv_chart_advanced_useLabels'].':';		
-		echo '<label for="edit_graf_0"><input type="radio" value="0" name="edit_graf" id="edit_graf_0" '.(($row['edit_graf'] == 0) ? ' checked="checked" ' : '').' onClick="edit_labels(\'0\');" />';
+		echo '<div class="new_labels"><p>';
+		echo $lang['srv_chart_advanced_useLabels'].':</p>';
+		echo '<input type="radio" value="0" name="edit_graf" id="edit_graf_0" '.(($row['edit_graf'] == 0) ? ' checked="checked" ' : '').' onClick="edit_labels(\'0\');" />';		
+		echo '<label for="edit_graf_0">';
 		echo $lang['no'].'</label>';
-		echo ' <label for="edit_graf_1"><input type="radio" value="1" name="edit_graf" id="edit_graf_1" '.(($row['edit_graf'] == 1) ? ' checked="checked" ' : '').' onClick="edit_labels(\'1\');" />';	
+
+		echo '<input type="radio" value="1" name="edit_graf" id="edit_graf_1" '.(($row['edit_graf'] == 1) ? ' checked="checked" ' : '').' onClick="edit_labels(\'1\');" />';
+		echo ' <label for="edit_graf_1">';	
 		echo $lang['yes'].'</label>';
 		echo '</p></div>';
 		
+		echo '<div class="chart_editing">';
+		
+		echo '<p id="title_edit" class="top16'.$gray.'">'.$lang['srv_notifications_send_title'].':</p>';
 		
-		echo '<div class="chart_editing">';		
 		
 		// Urejanje naslova spremenljivke
 		$text = $row['naslov_graf'] == '<p></p>' ? $row['naslov'] : $row['naslov_graf'];
@@ -8974,9 +8974,7 @@ class SurveyChart {
 			$text = substr($text, 3);
 			$text = substr($text, 0, -4);
 		}		
-		echo '<p>';
-		echo '<textarea style="width:99%; height:50px;" name="naslov_graf" id="naslov_graf" class="chart_label" '.$disabled.'>'.$text.'</textarea>';
-		echo '</p>';		
+		echo '<textarea class="textarea" name="naslov_graf" id="naslov_graf" class="chart_label" '.$disabled.'>'.$text.'</textarea>';
 			
 
 		// Urejanje label za gride
@@ -9010,7 +9008,7 @@ class SurveyChart {
 				$sql1 = sisplet_query("SELECT naslov, naslov_graf FROM srv_grid WHERE id='$i' AND spr_id='$spid'");
 				$row1 = mysqli_fetch_array($sql1);
 				$text = $row1['naslov_graf'] == '' ? $row1['naslov'] : $row1['naslov_graf'];
-				echo '<td><input type="text" maxlength="30" name="grid_graf_'.$i.'" id="grid_naslov_'.$i.'_graf" class="chart_label" value="'.$text.'" '.$disabled.' /></td>';
+				echo '<td><input type="text" class="text medium wauto" maxlength="30" name="grid_graf_'.$i.'" id="grid_naslov_'.$i.'_graf" class="chart_label" value="'.$text.'" '.$disabled.' /></td>';
 			}
 			
 			//dodatne vrednosti (ne vem, zavrnil...)
@@ -9019,7 +9017,7 @@ class SurveyChart {
 				if (count($missing_values) > 0) {
 					foreach ($missing_values AS $mv_key => $mv_text) {
 						if (isset($already_set_mv[$mv_key])) {
-							echo '<td><input type="text" maxlength="30" name="grid_'.$mv_key.'_graf" class="chart_label" value="'.$already_set_mv[$mv_key].'" '.$disabled.' /></td>';
+							echo '<td><input type="text" class="text medium wauto" maxlength="30" name="grid_'.$mv_key.'_graf" class="chart_label" value="'.$already_set_mv[$mv_key].'" '.$disabled.' /></td>';
 						}
 					}
 				}
@@ -9044,7 +9042,7 @@ class SurveyChart {
 			
 			echo '<li id="vrednost_'.$vrednost.'" '.($row1['other'] == 1 ? 'class="li_other"' : '').'>';
 					
-			echo '<textarea maxlength="30" name="vrednost_graf_'.$row1['id'].'" id="'.$row1['variable'].'_graf" class="vrednost_textarea chart_label" style="width:60%; height:15px;" '.$disabled.'>'.$text.'</textarea> ';
+			echo '<textarea maxlength="30" name="vrednost_graf_'.$row1['id'].'" id="'.$row1['variable'].'_graf" class="vrednost_textarea chart_label" '.$disabled.'>'.$text.'</textarea> ';
 			echo '['.$row1['variable'].']</span>';
 			if ($row1['other'] == 1) echo ' <input type="text" disabled style="width:40px" />';
 
diff --git a/admin/survey/script/charts.js b/admin/survey/script/charts.js
index fbf9845c2..3d02c3fc2 100644
--- a/admin/survey/script/charts.js
+++ b/admin/survey/script/charts.js
@@ -500,9 +500,11 @@ function tableChartSaveAdvancedSettings (chartID) {
 function edit_labels(val){
 	if(val == 0) {
 		$('.chart_editing :input').attr('disabled', true);
+		$('#title_edit').addClass('gray');
     } 
 	else {
         $('.chart_editing :input').removeAttr('disabled');
+		$('#title_edit').removeClass('gray');
 	}
 }
 
diff --git a/lang/1.php b/lang/1.php
index 8f03eb346..def4a58f2 100644
--- a/lang/1.php
+++ b/lang/1.php
@@ -4862,7 +4862,7 @@ $lang = array (
 	"srv_chart_hq"								=>	"Visoka ločljivost",
 	"srv_chart_hq_warning"						=>	"Izbrali ste visoko ločljivost (2400px), ki je primerna za izpis PDF in RTF.\n\nIzdelava vsakega posameznega grafa lahko zato traja nekaj sekund! Datoteka bo tudi razmeroma velika!\n\nAli ste prepričani da želite nadaljevati?",
 	"srv_chart_advanced_useLabels"				=>	"Uporabi popravljene labele",
-	"srv_chart_advanced_labelsWarning"			=>	"* Omejitev za popravljene labele je 20 znakov!",
+	"srv_chart_advanced_labelsWarning"			=>	"* Omejitev za popravljene labele je 30 znakov!",
 	"srv_chart_advanced_labels"					=>	"Labele",
 	"srv_chart_advanced_colors"					=>	"Barve",
 	"srv_chart_advanced_recoding"				=>	"Rekodiranje",
diff --git a/lang/2.php b/lang/2.php
index 18433bbce..95785f8c4 100644
--- a/lang/2.php
+++ b/lang/2.php
@@ -4835,7 +4835,7 @@ $lang = array (
 	"srv_chart_hq"								=>	"High resolution",
 	"srv_chart_hq_warning"						=>	"High resolution charts (2400px) are suitable for PDF and RTF exports.\n\nEach chart might take several seconds to generate! File will also be relatively large!\n\nAre you sure you want to continue?",
 	"srv_chart_advanced_useLabels"				=>	"Use custom labels",
-	"srv_chart_advanced_labelsWarning"			=>	"Text limit for custom labels is 20 characters!",
+	"srv_chart_advanced_labelsWarning"			=>	"Text limit for custom labels is 30 characters!",
 	"srv_chart_advanced_labels"					=>	"Labels",
 	"srv_chart_advanced_colors"					=>	"Colors",
 	"srv_chart_advanced_recoding"				=>	"Recoding",
diff --git a/public/css/admin_new.css b/public/css/admin_new.css
index 43019735b..d61094a93 100644
--- a/public/css/admin_new.css
+++ b/public/css/admin_new.css
@@ -31324,19 +31324,16 @@ input#endDate {
 #chart_float_editing {
   display: none;
   position: relative;
-  z-index: 999;
   width: 815px;
-  padding: 0 20px;
+  box-sizing: border-box;
 }
 #chart_float_editing .chartSettingsArea {
   position: absolute;
   overflow: auto;
   right: 20px;
+  box-sizing: border-box;
   width: 615px;
-  height: 300px;
-  padding: 20px;
-  margin: 0 0 40px 0;
-  background-color: #1E88E5;
+  padding: 0 20px;
 }
 #chart_float_editing .chartSettingsArea ul.vrednost_sort li {
   border: 1px solid #E5E5E5;
@@ -31354,15 +31351,46 @@ input#endDate {
   padding: 0px 10px;
   color: red;
 }
+#chart_float_editing .chartSettingsArea .new_labels {
+  display: flex;
+  flex-direction: row;
+}
+#chart_float_editing .chartSettingsArea .new_labels p {
+  margin-right: 8px;
+}
+#chart_float_editing .chartSettingsArea .chart_editing textarea {
+  width: 100%;
+  height: 40px;
+}
+#chart_float_editing .chartSettingsArea .chart_editing #vrednosti_holder ul li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+#chart_float_editing .chartSettingsArea .chart_editing #vrednosti_holder ul li textarea {
+  width: 90%;
+  margin-right: 8px;
+}
+#chart_float_editing .chartSettingsArea .form-item {
+  width: 200px;
+}
+#chart_float_editing .chartSettingsArea .form-item label {
+  margin-right: 8px;
+}
+#chart_float_editing .chartSettingsArea .colorwell {
+  width: 70px;
+  height: 28px;
+  font-size: 14px;
+  margin-bottom: 8px;
+}
 #chart_float_editing .chartSettingsTabs {
   position: absolute;
+  box-sizing: border-box;
   width: 160px;
-  height: 260px;
   padding: 0px;
-  font-size: 13px;
   font-weight: 500;
   text-align: center;
-  background-color: white;
+  background-color: #FFFFFF;
 }
 #chart_float_editing .chartSettingsTabs ul {
   padding: 0;
@@ -31376,7 +31404,8 @@ input#endDate {
   cursor: pointer;
 }
 #chart_float_editing .chartSettingsTabs ul li.active {
-  background-color: #1E88E5;
+  color: #1E88E5;
+  background-color: #EAF9FE;
 }
 
 /*color picker*/
diff --git a/resources/sass/admin_new/components/popup/page_specific.scss b/resources/sass/admin_new/components/popup/page_specific.scss
index dc3e16d8d..7dea4f2d6 100644
--- a/resources/sass/admin_new/components/popup/page_specific.scss
+++ b/resources/sass/admin_new/components/popup/page_specific.scss
@@ -528,7 +528,6 @@ table.question_recode_table {
             width: 190px;
         }
     }
-
 }
 
 //Izbira spremenljivke pri kalkulaciji
diff --git a/resources/sass/admin_new/pages/survey_analysis/popups/chart.scss b/resources/sass/admin_new/pages/survey_analysis/popups/chart.scss
index cbdcd1b98..992bfbb1a 100644
--- a/resources/sass/admin_new/pages/survey_analysis/popups/chart.scss
+++ b/resources/sass/admin_new/pages/survey_analysis/popups/chart.scss
@@ -133,22 +133,19 @@
 #chart_float_editing {
 	display: none;
 	position: relative;
-	z-index: 999;
-
 	width: 815px;
-    padding: 0 20px;
-    
+
+	box-sizing: border-box;
+
 	.chartSettingsArea {
 		position: absolute;
 		overflow: auto;
         right: 20px;
+
+		box-sizing: border-box;
         
 		width: 615px;
-		height: 300px;
-		padding: 20px;
-        margin: 0 0 40px 0;
-        
-		background-color: $blue;
+		padding: 0 20px;
         
         ul.vrednost_sort {
 			li {
@@ -172,16 +169,62 @@
 				}
 			}
 		}
+
+		.new_labels {
+			display: flex;
+			flex-direction: row;
+
+			p {
+				margin-right: 8px;
+			}
+		}
+
+		.chart_editing {
+			textarea {
+				width: 100%;
+				height: 40px;
+			}
+
+			#vrednosti_holder {
+				ul {
+					li {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						textarea {
+							width: 90%;
+							margin-right: 8px;
+						}
+					}
+				}
+			}
+		}
+
+		.form-item {
+			width: 200px;
+			label {
+				margin-right: 8px;
+			}
+		}
+		.colorwell {
+			width: 70px;
+			height: 28px;
+			font-size: 14px;
+			margin-bottom: 8px;
+		}
 	}
+
+
+	//// Nastavitve
 	.chartSettingsTabs {
 		position: absolute;
+		box-sizing: border-box;
+
 		width: 160px;
-		height: 260px;
 		padding: 0px;
-		font-size: 13px;
 		font-weight: 500;
 		text-align: center;
-        background-color: white;
+        background-color: $white;
         
 		ul {
             padding: 0;
@@ -196,7 +239,8 @@
             }
             
 			li.active {
-				background-color: $blue;
+				color: $blue;
+				background-color: $light-blue;
 			}
 		}
     }