diff --git a/css/custom2_4.3.css b/css/custom2_4.3.css
index 30ba1cf..d14044c 100644
--- a/css/custom2_4.3.css
+++ b/css/custom2_4.3.css
@@ -547,20 +547,43 @@ li::marker {
     border-color: rgba(0,0,0,.125)! important;
 }
 
+.noteCardGroup {
+    background-color: #cfdeec! important;
+}
+
+.structCardGroup {
+    background-color: #cfdeec! important;
+}
+
 /* Dialoghi */
 
-.diaDiretto {
+.qdiaDiretto {
  	font-weight: bold;
  	color: #ce4f46;
 }
 
-.diaPensato {
+.qdiaPensato {
  	font-weight: bold;
  	color: #ce9346;
 }
 
-.diaSpeakable {
+.qdiaSpeakable {
  	font-weight: bold;
  	color: #c5ce46;
 }
 
+.diaDiretto {
+ 	font-weight: bold;
+ 	color: #bb6258;
+}
+
+.diaPensato {
+ 	font-weight: bold;
+ 	color: #bb9358;
+}
+
+.diaSpeakable {
+ 	font-weight: bold;
+ 	color: #977356;
+}
+
diff --git a/index_4.4.html b/index_4.4.html
index 8f380ff..e49faf0 100644
--- a/index_4.4.html
+++ b/index_4.4.html
@@ -109,7 +109,7 @@
 									<option value="frasi">Periodi</option>
 									<option value="riferimenti">Riferimenti</option>
 									<option value="dialoghi">Dialoghi</option>
-									<option value="metafore">Metafore</option>
+									<option value="metafore" disabled>Metafore</option>
 								</select>
 							</div>
 						</li>
@@ -484,7 +484,7 @@
 										</div>
 									</div>
   									<div class="tab-pane fade p-0 bg-lida-vis" id="vis1" role="tabpanel" aria-labelledby="vis1-tab">
-										<div id='displayinfo' class="p-0 pl-3">
+										<div id='displayinfo' class="p-0">
 											<div class="card card-body well well-sm m-1 mt-2 p-0" id="infoCard0">
 												<span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessuna struttura visualizzata</span>
 											</div>
@@ -1936,6 +1936,7 @@
 	<script nomodule
 		src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
 </body>
+
 <div class="modal-busy" id="loader" style="display: none">
     <div class="center-busy" id="test-git">
         <img alt="" src="./images/lida-loader.gif" />
diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js
index 62ea2f2..9d8c9bc 100644
--- a/js/cesareBrowse.js
+++ b/js/cesareBrowse.js
@@ -722,16 +722,6 @@ function loadDialoghi() {
 	}
 }
 function loadFrasi() {
-	//rimuove le classi dei dialoghi
-	$(cantoDisplayed).find(' .diaDiretto').each(function() {
-		$(this).removeClass('diaDiretto');
-	})
-	$(cantoDisplayed).find(' .diaPensato').each(function() {
-		$(this).removeClass('diaPensato');
-	})
-	$(cantoDisplayed).find(' .diaSpeakable').each(function() {
-		$(this).removeClass('diaSpeakable');
-	})
 	
 	$(cantoDisplayed).find(' .sentencetag').each(function() {
 		$(this).attr('style', 'display: d-flex;');
@@ -935,8 +925,7 @@ function resetFrasi(){
 	})
 
 	function createNoteGroup(cantica, canto, versi, id, len) {
-		var noteGroupCard = $('<div class="card card-body cardGroup well well-sm mx-1 my-2 p-0" id="noteGroupCard' + id + '" style="background-color: #cfdeec">');
-
+		var noteGroupCard = $('<div class="card card-body noteCardGroup well well-sm mx-1 my-2 p-0" id="noteGroupCard' + id + '">');
 		var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted" id="commentoGruppoVersi' + id + '">')
 		var rigaNota = $('<div class="p-0 m-0">');
 		var buttons = $('<div class="d-flex flex-wrap-reverse ml-auto align-items-center justify-content-end px-1 pt-1 pb-0">')
diff --git a/js/script_4.4.js b/js/script_4.4.js
index 59c94ef..0d5c3e7 100644
--- a/js/script_4.4.js
+++ b/js/script_4.4.js
@@ -3,6 +3,8 @@
  */
 
 var getJsonQuery;
+var fillStructCard;
+var emptyStructCard;
 var currPage = 0;
 var latestPhraseId = "";
 var numeroPagine = 0;
@@ -431,7 +433,7 @@ $(document).ready(function() {
 	// Evento: click sull'icona rimuovi nota
     $('#displaynote').on('click', '.closeNote', function() {
 		var noteListItemId = $(this).closest('.card');
-		if (($(noteListItemId).siblings(".card-body").length == 0) && !($(noteListItemId).hasClass("cardGroup")) ) {
+		if (($(noteListItemId).siblings(".card-body").length == 0) && !($(noteListItemId).hasClass("noteCardGroup")) ) {
 			$(noteListItemId).parent().remove()
 		} else {
 			$(noteListItemId).remove();
@@ -441,6 +443,11 @@ $(document).ready(function() {
 		};
 	});
 
+	// Evento: click sull'icona rimuovi periodo
+    $('#displayinfo').on('click', '.closeStruct', function() {
+		$('#displayinfo').empty();
+		$('#displayinfo').append($(emptyInfo))
+	});
 		
 	// Variabili JSON per i filtri
 	var verboJson = {
@@ -598,6 +605,7 @@ $(document).ready(function() {
 	const emptyClaList = '<li id="li-cla0" class="list-group-item align-items-center my-1 ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>';
 	const defaultCond = '<div id="cla-defaultCond" class="col-12 p-1 small font-weight-bold text-muted"> Clausole e condizioni in AND di default</div>';
 	const emptyNoteList = '<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard0"><span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessun commento visualizzato</span></div>';
+	const emptyInfo = '<div class="card card-body well well-sm m-1 mt-2 p-0" id="infoCard0"><span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessuna struttura visualizzata</span></div>';
 
 	const canticheList = ["Inferno","Purgatorio","Paradiso"];
 	const cla0JsonText = '{"queryText": "", "lemma_forma": "lemma", "opzioni_testo": "parola", "TipoClausola": "0", "Attiva": "0"}';
@@ -636,6 +644,39 @@ $(document).ready(function() {
 		return queryJson;
 	};
 
+	// Funzioni di gestione del tab Periodo, usate da synthgraph.js
+
+	fillStructCard = function(lisid){
+		var structGroupCard = $('<div class="card card-body structCardGroup well well-sm mx-1 my-2 p-0" id="structGroupCard0">');
+		var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted" id="structGruppoVersi0">')
+		var rigaNota = $('<div class="p-0 m-0">');
+		var buttons = $('<div class="d-flex flex-wrap-reverse ml-auto align-items-center justify-content-end px-1 pt-1 pb-0">')
+		var closeButton = $('<button id="closeStruct0"'+
+				'class="btn btn-sm btn-outline-warning btn-outline-warning-mod closeStruct rounded text-warning align-self-end px-1 pb-0 ml-1 mb-1">'+
+				'<ion-icon name="close-circle"></ion-icon>');
+		var structCard = $('<div class="card card-body well well-sm mx-1 mb-1 mt-0 p-0 border-lida08" id="structCard0">');			
+		var cantiche=["Inferno", "Purgatorio","Paradiso"];
+		var romani = ["I","II","III","IV","V","VI","VII","VIII","IX","X",
+					  "XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX",
+					  "XXI","XXII","XXIII","XXIV","XXV","XXVI","XXVII","XXVIII","XXIX","XXX",
+					  "XXXI","XXXII","XXXIII","XXXIV"];
+		var lisidArray = lisid.split('_')		
+		closeButton.appendTo(buttons);
+		rigaNota.append('<h6 class="card-title m-2 text-warning">' + cantiche[lisidArray[0]-1] + ", Canto " + romani[lisidArray[2]-1] + ", Verso " + lisidArray[2] + "</h6>");
+		rigaNota.appendTo(commentHeader);
+		buttons.appendTo(commentHeader);
+		commentHeader.appendTo(structGroupCard);
+		structCard.appendTo(structGroupCard);
+		$('#displayinfo').empty();
+		structGroupCard.appendTo($('#displayinfo'));
+	};
+	
+	emptyStructCard = function(){
+			$('#displayinfo').empty();
+			$('#displayinfo').append($(emptyInfo))
+	};
+	
+	
 	// Funzione di creazione del tab delle clausole grammaticali
 	function addGramCla(sortableId,active,tabID,toExpand){
 		if (active > 0) {