diff --git a/index_3.1.html b/index_3.1.html
index 2422ff4..047ddfc 100644
--- a/index_3.1.html
+++ b/index_3.1.html
@@ -1062,7 +1062,7 @@
 
 									<!--   TIPO GRAMMATICALE -->
 									<div style="display: none;"
-										class="col-12 tab-pane p-0 pt-3 mt-2 bg-white border-top"
+										class="col-12 tab-pane p-0 pt-3 bg-white border-top"
 										id="tipogrammaticaleN" role="tabpanel"
 										aria-labelledby="claN-tab" data-claType="Grammaticale"
 										data-claActive="1">
@@ -1853,56 +1853,53 @@
 														<div class="col-md-auto pl-0 pr-1 align-self-start">
 															<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
 														</div>
-														<div
+														<div style="min-height: 64px;" 
 															class="col-md-auto pl-0 pr-2 pb-2 flex-fill align-self-start">
-															<span class="small pl-1 clatext">xX2Xx</span>
+															<span class="small clatext">xX2Xx<br><br></span>
 														</div>
-														<div
-															class="col-md-auto px-0 align-self-start justify-content-end">
-															<div class="row no-gutters justify-content-end">
+														<div class="col-md-auto px-1 align-self-start justify-content-end">
+															<div class="row no-gutters flex-nowrap justify-content-end">
 																<div
 																	class="col-auto pb-0 pl-2 pr-1 pt-1 align-top flex-grow-1 align-self-start justify-content-end text-right bd-highlight text-primary editCla"
 																	id="headingCxX1Xx">
-
-																	<div style="height: 32px;" 
-																		class="custom-control custom-control-sm custom-control-sm custom-switch p-0 align-self-end text-right">
+																	<div style="height: 32px; width: 40px;" 
+																		class="custom-control custom-control-sm custom-switch p-0 align-self-end text-right">
 																		<input type="checkbox"
 																			class="custom-control-input claAct align-self-end"
 																			name="cla-attiva" aria-label="attiva"
 																			id="actiClaSWxX3Xx"><label
 																			class="custom-control-label form-control-sm	p-0" for="actiClaSWxX1Xx"></label>
 																	</div>
-
 																</div>
 																<div
 																	class="col-auto pb-0 pl-1 pr-2 pt-1 align-top align-self-start justify-content-end text-right bd-highlight text-primary removeCla">
 																	<ion-icon name="close-circle"></ion-icon>
 																</div>
 															</div>
-															<div class="row no-gutters align-self-end align-items-end">
-																<div class="col-auto align-self-end p-0">
-
-																	<button class="btn btn-sm btn-link collapsed mr-2 px-4 pb-0 border border-primary"
-																		style="background-color: #dbe5f2 !important;"
-																		data-toggle="collapse"
-																		data-target="#collapseCxX1Xx"
-																		aria-expanded="false"
-																		aria-controls="collapseCxX1Xx">
-																		<ion-icon name="pencil"></ion-icon>
-																	</button>
-
-																</div>
-															</div>
+														</div>
+													</div>
+													<div class="row no-gutters flex-nowrap align-items-start justify-content-end">
+														<div class="col-auto flex-fill align-self-start"></div>
+														<div
+															class="col-auto pr-1 align-self-end align-items-end justify-content-end text-right position-absolute">
+															<button id="claCollapsexX1Xx" class="btn btn-sm btn-link claCollBtn collapsed mr-2 px-4 pb-0 border border-primary"
+																data-toggle="collapse"
+																data-target="#collapseCxX1Xx"
+																aria-expanded="false"
+																aria-controls="collapseCxX1Xx">
+																<ion-icon name="pencil"></ion-icon>
+															</button>
 														</div>
 													</div>
 												</div>
-												<div id="collapseCxX1Xx" class="collapse""
+												<div id="collapseCxX1Xx" class="collapse"
 													aria-labelledby="headingCxX1Xx"
 													data-parent="#sortable0">
-													<div class="card-body p-0" id="claBodyxX1Xx"></div>
+													<div class="card-body p-0 mx-1 border" id="claBodyxX1Xx" style="background-color: #dbe5f2 !important; border-color: #3d6ca9!important;"></div>
 												</div>
 											</li>
 									<!--   FINE LI CLAUSOLA -->
+
 									<!--   LI LOGICA -->
 											<li id="condxX4Xx" style="display: none;" class="condLI-xX5Xx mx-0 my-1 p-1 list-group-item align-items-center border text-muted bg-xX6Xx">
 												<ul id="sortablexX4Xx" class="handle list-group ui-sortable">
diff --git a/js/script_3.1.js b/js/script_3.1.js
index 64899dc..6e9f348 100644
--- a/js/script_3.1.js
+++ b/js/script_3.1.js
@@ -62,6 +62,26 @@ $(document).ready(function() {
 	$('#collapseOptions').on('shown.bs.collapse', function () {
   		$("#showOptions").html('<span class="small">Nascondi Opzioni</span>');
 	})
+
+	$('.collapse').on('hide.bs.collapse', function (e) {
+		if (e.target.id.substr(0,9) == "collapseC") {
+			var claIdNum = e.target.id.substr(9);
+			$("#claCollapse" + claIdNum)[0].removeAttribute("style");
+			$("#claCollapse" + claIdNum).removeClass( "border-bottom-0" );
+			$("#claCollapse" + claIdNum).addClass( "border border-primary" );
+			e.stopPropagation();
+		};
+	})
+	
+	$('.collapse').on('show.bs.collapse', function (e) {
+		if (e.target.id.substr(0,9) == "collapseC") {
+			var claIdNum = e.target.id.substr(9);
+			$("#claCollapse" + claIdNum)[0].setAttribute("style", "background-color: #dbe5f2 !important;border-color: #3d6ca9!important;border-bottom-left-radius: 0;border-bottom-right-radius: 0;");
+			$("#claCollapse" + claIdNum).removeClass( "border border-primary" );
+			$("#claCollapse" + claIdNum).addClass( "border-bottom-0" );
+			e.stopPropagation();
+		};
+	})
 	
 	$('#searchToggle').on('change', function() {
 		if ($(this).prop('checked')) {
@@ -91,7 +111,7 @@ $(document).ready(function() {
 
 	// Inizializza selectableS e definisce le funzioni
 	$("#selectableS").selectable({
-		filter: "td",
+		filter: ".sel-canto",
 		selected: function(event, ui) {
             contextS[ui.selected.id.substring(0,1)][ui.selected.id.substring(2)] = 1;
 		},
@@ -191,7 +211,7 @@ $(document).ready(function() {
     	}
 	});
 		
-	// Evento: click sul checkbox di attivazione/disattivazione delle clausole
+	// Evento: click sul bottone di edit delle clausole
 	$('#cla-TabContent').on('click', '.claAct', function() {
 		var claListItemId = $(this).closest('li').attr('id');
 		var tabPanelId = "#" + claListItemId.substring(3);
@@ -302,7 +322,6 @@ $(document).ready(function() {
 	$('#cleanresult2').on('click', function() {
 		resetAdvGui();
 		refreshClaList();
-		console.log(queryJson);
 	});
 	
 	
@@ -571,7 +590,8 @@ $(document).ready(function() {
 		clone.setAttribute("id","cla" + tabID);
 		clone.setAttribute("data-claActive", active);
 		clone.setAttribute("aria-labelledby","cla" + tabID + "-tab");
-		clone.removeAttribute("style");
+		clone.setAttribute("style", "background-color: #dbe5f2 !important;");
+		//clone.removeAttribute("style");
 		$('#claBody' + tabID).append(clone);
 		// se non cambio l'id della select react non rileva l'evento onchange:		
 		$('#cla' + tabID + " #grammtypesN").attr("id","grammtypes" + tabID);
@@ -700,7 +720,8 @@ $(document).ready(function() {
 		clone.setAttribute("id","cla" + tabID);
 		clone.setAttribute("data-claActive",active);
 		clone.setAttribute("aria-labelledby","cla" + tabID + "-tab");
-		clone.removeAttribute("style");
+		clone.setAttribute("style", "background-color: #dbe5f2 !important;");
+		//clone.removeAttribute("style");
 		$('#claBody' + tabID).append(clone);
 		$('#cla' + tabID + " #lemma_formaN").attr("id","lemma_forma" + tabID);
 		$('#cla' + tabID + " #queryTextN").attr("id","queryText" + tabID);
@@ -857,7 +878,7 @@ $(document).ready(function() {
 						var jsonTextToParse = '{"queryText": "", "lemma_forma": "", "opzioni_testo": "", "TipoClausola": "' + claType + '", "Attiva": "' + claActive + '"';
          		};
          		if ($("#" + claListItemId)[0]) {
-					$("#" + claListItemId + " .clatext").replaceWith('<span class="small pl-1 clatext">' + claText + '</span>');
+					$("#" + claListItemId + " .clatext").replaceWith('<span class="small clatext">' + claText + '</span>');
          		} else {
 					addLIitem(sortableId,claIdNum,claText,checkInsert);
 				};
@@ -948,7 +969,6 @@ $(document).ready(function() {
 		//$("#sparqlquery").val(logicExprString);
 		queryJson.EsprLogica = logicExprString.split(' ');
 		queryJson.LogicaGui = guiLogicString.split(' ');
-		console.log(queryJson);
 	};
 	
 	// Funzione di refresh dei collegamenti tra elementi sortable