diff --git a/src/resources/themes/v_moonlight/v_moonlight_mermaid.css b/src/resources/themes/v_moonlight/v_moonlight_mermaid.css
index ecfbe7fe..d8d51564 100644
--- a/src/resources/themes/v_moonlight/v_moonlight_mermaid.css
+++ b/src/resources/themes/v_moonlight/v_moonlight_mermaid.css
@@ -1,344 +1,407 @@
 /* Flowchart variables */
 /* Sequence Diagram variables */
 /* Gantt chart variables */
-.mermaid .label {
+.mermaid-diagram .mermaid .label {
   font-family: 'trebuchet ms', verdana, arial;
   color: #333;
 }
-.node rect,
-.node circle,
-.node ellipse,
-.node polygon {
+
+.mermaid-diagram .node rect,
+.mermaid-diagram .node circle,
+.mermaid-diagram .node ellipse,
+.mermaid-diagram .node polygon {
   fill: #cde498;
   stroke: #13540c;
   stroke-width: 1px;
 }
-.edgePath .path {
+
+.mermaid-diagram .edgePath .path {
   stroke: green;
   stroke-width: 1.5px;
 }
-.edgeLabel {
+
+.mermaid-diagram .edgeLabel {
   background-color: #e8e8e8;
 }
-.cluster rect {
+
+.mermaid-diagram .cluster rect {
   fill: #cdffb2 !important;
   rx: 4  !important;
   stroke: #6eaa49 !important;
   stroke-width: 1px !important;
 }
-.cluster text {
+
+.mermaid-diagram .cluster text {
   fill: #333;
 }
-.actor {
+
+.mermaid-diagram .actor {
   stroke: #13540c;
   fill: #cde498;
 }
-text.actor {
+
+.mermaid-diagram text.actor {
   fill: black;
   stroke: none;
 }
-.actor-line {
+
+.mermaid-diagram .actor-line {
   stroke: grey;
 }
-.messageLine0 {
+
+.mermaid-diagram .messageLine0 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
   stroke: #333;
 }
-.messageLine1 {
+
+.mermaid-diagram .messageLine1 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   stroke: #333;
 }
-#arrowhead {
+
+.mermaid-diagram #arrowhead {
   fill: #333;
 }
-#crosshead path {
+
+.mermaid-diagram #crosshead path {
   fill: #333 !important;
   stroke: #333 !important;
 }
-.messageText {
+
+.mermaid-diagram .messageText {
   fill: #333;
   stroke: none;
 }
-.labelBox {
+
+.mermaid-diagram .labelBox {
   stroke: #326932;
   fill: #cde498;
 }
-.labelText {
+
+.mermaid-diagram .labelText {
   fill: black;
   stroke: none;
 }
-.loopText {
+
+.mermaid-diagram .loopText {
   fill: black;
   stroke: none;
 }
-.loopLine {
+
+.mermaid-diagram .loopLine {
   stroke-width: 2;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
   stroke: #326932;
 }
-.note {
+
+.mermaid-diagram .note {
   stroke: #6eaa49;
   fill: #fff5ad;
 }
-.noteText {
+
+.mermaid-diagram .noteText {
   fill: black;
   stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
+
 /** Section styling */
-.section {
+.mermaid-diagram .section {
   stroke: none;
   opacity: 0.2;
 }
-.section0 {
+
+.mermaid-diagram .section0 {
   fill: #6eaa49;
 }
-.section2 {
+
+.mermaid-diagram .section2 {
   fill: #6eaa49;
 }
-.section1,
-.section3 {
+
+.mermaid-diagram .section1,
+.mermaid-diagram .section3 {
   fill: white;
   opacity: 0.2;
 }
-.sectionTitle0 {
+
+.mermaid-diagram .sectionTitle0 {
   fill: #333;
 }
-.sectionTitle1 {
+
+.mermaid-diagram .sectionTitle1 {
   fill: #333;
 }
-.sectionTitle2 {
+
+.mermaid-diagram .sectionTitle2 {
   fill: #333;
 }
-.sectionTitle3 {
+
+.mermaid-diagram .sectionTitle3 {
   fill: #333;
 }
-.sectionTitle {
+
+.mermaid-diagram .sectionTitle {
   text-anchor: start;
   font-size: 11px;
   text-height: 14px;
 }
+
 /* Grid and axis */
-.grid .tick {
+.mermaid-diagram .grid .tick {
   stroke: lightgrey;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
-.grid path {
+
+.mermaid-diagram .grid path {
   stroke-width: 0;
 }
+
 /* Today line */
-.today {
+.mermaid-diagram .today {
   fill: none;
   stroke: red;
   stroke-width: 2px;
 }
+
 /* Task styling */
 /* Default task */
-.task {
+.mermaid-diagram .task {
   stroke-width: 2;
 }
-.taskText {
+
+.mermaid-diagram .taskText {
   text-anchor: middle;
   font-size: 11px;
 }
-.taskTextOutsideRight {
+
+.mermaid-diagram .taskTextOutsideRight {
   fill: black;
   text-anchor: start;
   font-size: 11px;
 }
-.taskTextOutsideLeft {
+
+.mermaid-diagram .taskTextOutsideLeft {
   fill: black;
   text-anchor: end;
   font-size: 11px;
 }
+
 /* Specific task settings for the sections*/
-.taskText0,
-.taskText1,
-.taskText2,
-.taskText3 {
+.mermaid-diagram .taskText0,
+.mermaid-diagram .taskText1,
+.mermaid-diagram .taskText2,
+.mermaid-diagram .taskText3 {
   fill: white;
 }
-.task0,
-.task1,
-.task2,
-.task3 {
+
+.mermaid-diagram .task0,
+.mermaid-diagram .task1,
+.mermaid-diagram .task2,
+.mermaid-diagram .task3 {
   fill: #487e3a;
   stroke: #13540c;
 }
-.taskTextOutside0,
-.taskTextOutside2 {
+
+.mermaid-diagram .taskTextOutside0,
+.mermaid-diagram .taskTextOutside2 {
   fill: black;
 }
-.taskTextOutside1,
-.taskTextOutside3 {
+
+.mermaid-diagram .taskTextOutside1,
+.mermaid-diagram .taskTextOutside3 {
   fill: black;
 }
+
 /* Active task */
-.active0,
-.active1,
-.active2,
-.active3 {
+.mermaid-diagram .active0,
+.mermaid-diagram .active1,
+.mermaid-diagram .active2,
+.mermaid-diagram .active3 {
   fill: #cde498;
   stroke: #13540c;
 }
-.activeText0,
-.activeText1,
-.activeText2,
-.activeText3 {
+
+.mermaid-diagram .activeText0,
+.mermaid-diagram .activeText1,
+.mermaid-diagram .activeText2,
+.mermaid-diagram .activeText3 {
   fill: black !important;
 }
+
 /* Completed task */
-.done0,
-.done1,
-.done2,
-.done3 {
+.mermaid-diagram .done0,
+.mermaid-diagram .done1,
+.mermaid-diagram .done2,
+.mermaid-diagram .done3 {
   stroke: grey;
   fill: lightgrey;
   stroke-width: 2;
 }
-.doneText0,
-.doneText1,
-.doneText2,
-.doneText3 {
+
+.mermaid-diagram .doneText0,
+.mermaid-diagram .doneText1,
+.mermaid-diagram .doneText2,
+.mermaid-diagram .doneText3 {
   fill: black !important;
 }
+
 /* Tasks on the critical line */
-.crit0,
-.crit1,
-.crit2,
-.crit3 {
+.mermaid-diagram .crit0,
+.mermaid-diagram .crit1,
+.mermaid-diagram .crit2,
+.mermaid-diagram .crit3 {
   stroke: #ff8888;
   fill: red;
   stroke-width: 2;
 }
-.activeCrit0,
-.activeCrit1,
-.activeCrit2,
-.activeCrit3 {
+
+.mermaid-diagram .activeCrit0,
+.mermaid-diagram .activeCrit1,
+.mermaid-diagram .activeCrit2,
+.mermaid-diagram .activeCrit3 {
   stroke: #ff8888;
   fill: #cde498;
   stroke-width: 2;
 }
-.doneCrit0,
-.doneCrit1,
-.doneCrit2,
-.doneCrit3 {
+
+.mermaid-diagram .doneCrit0,
+.mermaid-diagram .doneCrit1,
+.mermaid-diagram .doneCrit2,
+.mermaid-diagram .doneCrit3 {
   stroke: #ff8888;
   fill: lightgrey;
   stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
-.doneCritText0,
-.doneCritText1,
-.doneCritText2,
-.doneCritText3 {
+
+.mermaid-diagram .doneCritText0,
+.mermaid-diagram .doneCritText1,
+.mermaid-diagram .doneCritText2,
+.mermaid-diagram .doneCritText3 {
   fill: black !important;
 }
-.activeCritText0,
-.activeCritText1,
-.activeCritText2,
-.activeCritText3 {
+
+.mermaid-diagram .activeCritText0,
+.mermaid-diagram .activeCritText1,
+.mermaid-diagram .activeCritText2,
+.mermaid-diagram .activeCritText3 {
   fill: black !important;
 }
-.titleText {
+
+.mermaid-diagram .titleText {
   text-anchor: middle;
   font-size: 18px;
   fill: black;
 }
-/*
 
-
-*/
-g.classGroup text {
+.mermaid-diagram g.classGroup text {
   fill: #13540c;
   stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
-g.classGroup rect {
+
+.mermaid-diagram g.classGroup rect {
   fill: #cde498;
   stroke: #13540c;
 }
-g.classGroup line {
+
+.mermaid-diagram g.classGroup line {
   stroke: #13540c;
   stroke-width: 1;
 }
-svg .classLabel .box {
+
+.mermaid-diagram svg .classLabel .box {
   stroke: none;
   stroke-width: 0;
   fill: #cde498;
   opacity: 0.5;
 }
-svg .classLabel .label {
+
+.mermaid-diagram svg .classLabel .label {
   fill: #13540c;
 }
-.relation {
+
+.mermaid-diagram .relation {
   stroke: #13540c;
   stroke-width: 1;
   fill: none;
 }
-.composition {
+
+.mermaid-diagram .composition {
   fill: #13540c;
   stroke: #13540c;
   stroke-width: 1;
 }
-#compositionStart {
+
+.mermaid-diagram #compositionStart {
   fill: #13540c;
   stroke: #13540c;
   stroke-width: 1;
 }
-#compositionEnd {
+
+.mermaid-diagram #compositionEnd {
   fill: #13540c;
   stroke: #13540c;
   stroke-width: 1;
 }
-.aggregation {
+
+.mermaid-diagram .aggregation {
   fill: #cde498;
   stroke: #13540c;
   stroke-width: 1;
 }
-#aggregationStart {
+
+.mermaid-diagram #aggregationStart {
   fill: #cde498;
   stroke: #13540c;
   stroke-width: 1;
 }
-#aggregationEnd {
+
+.mermaid-diagram #aggregationEnd {
   fill: #cde498;
   stroke: #13540c;
   stroke-width: 1;
 }
-#dependencyStart {
+
+.mermaid-diagram #dependencyStart {
   fill: #13540c;
   stroke: #13540c;
   stroke-width: 1;
 }
-#dependencyEnd {
+
+.mermaid-diagram #dependencyEnd {
   fill: #13540c;
   stroke: #13540c;
   stroke-width: 1;
 }
-#extensionStart {
+
+.mermaid-diagram #extensionStart {
   fill: #13540c;
   stroke: #13540c;
   stroke-width: 1;
 }
-#extensionEnd {
+
+.mermaid-diagram #extensionEnd {
   fill: #13540c;
   stroke: #13540c;
   stroke-width: 1;
 }
-.node text {
+
+.mermaid-diagram .node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
-div.mermaidTooltip {
+
+.mermaid-diagram div.mermaidTooltip {
   position: absolute;
   text-align: center;
   max-width: 200px;
diff --git a/src/resources/themes/v_native/v_native_mermaid.css b/src/resources/themes/v_native/v_native_mermaid.css
index 769933f0..3d808780 100644
--- a/src/resources/themes/v_native/v_native_mermaid.css
+++ b/src/resources/themes/v_native/v_native_mermaid.css
@@ -1,264 +1,311 @@
 /* Flowchart variables */
 /* Sequence Diagram variables */
 /* Gantt chart variables */
-.mermaid .label {
+.mermaid-diagram .mermaid .label {
   color: #333;
 }
-.node rect,
-.node circle,
-.node ellipse,
-.node polygon {
+
+.mermaid-diagram .node rect,
+.mermaid-diagram .node circle,
+.mermaid-diagram .node ellipse,
+.mermaid-diagram .node polygon {
   fill: #ECECFF;
   stroke: #CCCCFF;
   stroke-width: 1px;
 }
-.edgePath .path {
+
+.mermaid-diagram .edgePath .path {
   stroke: #333333;
 }
-.edgeLabel {
+
+.mermaid-diagram .edgeLabel {
   background-color: #e8e8e8;
 }
-.cluster rect {
+
+.mermaid-diagram .cluster rect {
   fill: #ffffde !important;
   rx: 4 !important;
   stroke: #aaaa33 !important;
   stroke-width: 1px !important;
 }
-.cluster text {
+
+.mermaid-diagram .cluster text {
   fill: #333;
 }
-.actor {
+
+.mermaid-diagram .actor {
   stroke: #CCCCFF;
   fill: #ECECFF;
 }
-text.actor {
+
+.mermaid-diagram text.actor {
   fill: black;
   stroke: none;
 }
-.actor-line {
+
+.mermaid-diagram .actor-line {
   stroke: grey;
 }
-.messageLine0 {
+
+.mermaid-diagram .messageLine0 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
   stroke: #333;
 }
-.messageLine1 {
+
+.mermaid-diagram .messageLine1 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   stroke: #333;
 }
-#arrowhead {
+
+.mermaid-diagram #arrowhead {
   fill: #333;
 }
-#crosshead path {
+
+.mermaid-diagram #crosshead path {
   fill: #333 !important;
   stroke: #333 !important;
 }
-.messageText {
+
+.mermaid-diagram .messageText {
   fill: #333;
   stroke: none;
 }
-.labelBox {
+
+.mermaid-diagram .labelBox {
   stroke: #CCCCFF;
   fill: #ECECFF;
 }
-.labelText {
+
+.mermaid-diagram .labelText {
   fill: black;
   stroke: none;
 }
-.loopText {
+
+.mermaid-diagram .loopText {
   fill: black;
   stroke: none;
 }
-.loopLine {
+
+.mermaid-diagram .loopLine {
   stroke-width: 2;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
   stroke: #CCCCFF;
 }
-.note {
+
+.mermaid-diagram .note {
   stroke: #aaaa33;
   fill: #fff5ad;
 }
-.noteText {
+
+.mermaid-diagram .noteText {
   fill: black;
   stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
+
 /** Section styling */
-.section {
+.mermaid-diagram .section {
   stroke: none;
   opacity: 0.2;
 }
-.section0 {
+
+.mermaid-diagram .section0 {
   fill: rgba(102, 102, 255, 0.49);
 }
-.section2 {
+
+.mermaid-diagram .section2 {
   fill: #fff400;
 }
-.section1,
-.section3 {
+
+.mermaid-diagram .section1,
+.mermaid-diagram .section3 {
   fill: white;
   opacity: 0.2;
 }
-.sectionTitle0 {
+
+.mermaid-diagram .sectionTitle0 {
   fill: #333;
 }
-.sectionTitle1 {
+
+.mermaid-diagram .sectionTitle1 {
   fill: #333;
 }
-.sectionTitle2 {
+
+.mermaid-diagram .sectionTitle2 {
   fill: #333;
 }
-.sectionTitle3 {
+
+.mermaid-diagram .sectionTitle3 {
   fill: #333;
 }
-.sectionTitle {
+
+.mermaid-diagram .sectionTitle {
   text-anchor: start;
   font-size: 11px;
   text-height: 14px;
 }
+
 /* Grid and axis */
-.grid .tick {
+.mermaid-diagram .grid .tick {
   stroke: lightgrey;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
-.grid path {
+
+.mermaid-diagram .grid path {
   stroke-width: 0;
 }
+
 /* Today line */
-.today {
+.mermaid-diagram .today {
   fill: none;
   stroke: red;
   stroke-width: 2px;
 }
+
 /* Task styling */
 /* Default task */
-.task {
+.mermaid-diagram .task {
   stroke-width: 2;
 }
-.taskText {
+
+.mermaid-diagram .taskText {
   text-anchor: middle;
   font-size: 11px;
 }
-.taskTextOutsideRight {
+
+.mermaid-diagram .taskTextOutsideRight {
   fill: black;
   text-anchor: start;
   font-size: 11px;
 }
-.taskTextOutsideLeft {
+
+.mermaid-diagram .taskTextOutsideLeft {
   fill: black;
   text-anchor: end;
   font-size: 11px;
 }
+
 /* Specific task settings for the sections*/
-.taskText0,
-.taskText1,
-.taskText2,
-.taskText3 {
+.mermaid-diagram .taskText0,
+.mermaid-diagram .taskText1,
+.mermaid-diagram .taskText2,
+.mermaid-diagram .taskText3 {
   fill: white;
 }
-.task0,
-.task1,
-.task2,
-.task3 {
+
+.mermaid-diagram .task0,
+.mermaid-diagram .task1,
+.mermaid-diagram .task2,
+.mermaid-diagram .task3 {
   fill: #8a90dd;
   stroke: #534fbc;
 }
-.taskTextOutside0,
-.taskTextOutside2 {
+
+.mermaid-diagram .taskTextOutside0,
+.mermaid-diagram .taskTextOutside2 {
   fill: black;
 }
-.taskTextOutside1,
-.taskTextOutside3 {
+
+.mermaid-diagram .taskTextOutside1,
+.mermaid-diagram .taskTextOutside3 {
   fill: black;
 }
+
 /* Active task */
-.active0,
-.active1,
-.active2,
-.active3 {
+.mermaid-diagram .active0,
+.mermaid-diagram .active1,
+.mermaid-diagram .active2,
+.mermaid-diagram .active3 {
   fill: #bfc7ff;
   stroke: #534fbc;
 }
-.activeText0,
-.activeText1,
-.activeText2,
-.activeText3 {
+
+.mermaid-diagram .activeText0,
+.mermaid-diagram .activeText1,
+.mermaid-diagram .activeText2,
+.mermaid-diagram .activeText3 {
   fill: black !important;
 }
+
 /* Completed task */
-.done0,
-.done1,
-.done2,
-.done3 {
+.mermaid-diagram .done0,
+.mermaid-diagram .done1,
+.mermaid-diagram .done2,
+.mermaid-diagram .done3 {
   stroke: grey;
   fill: lightgrey;
   stroke-width: 2;
 }
-.doneText0,
-.doneText1,
-.doneText2,
-.doneText3 {
+
+.mermaid-diagram .doneText0,
+.mermaid-diagram .doneText1,
+.mermaid-diagram .doneText2,
+.mermaid-diagram .doneText3 {
   fill: black !important;
 }
+
 /* Tasks on the critical line */
-.crit0,
-.crit1,
-.crit2,
-.crit3 {
+.mermaid-diagram .crit0,
+.mermaid-diagram .crit1,
+.mermaid-diagram .crit2,
+.mermaid-diagram .crit3 {
   stroke: #ff8888;
   fill: red;
   stroke-width: 2;
 }
-.activeCrit0,
-.activeCrit1,
-.activeCrit2,
-.activeCrit3 {
+
+.mermaid-diagram .activeCrit0,
+.mermaid-diagram .activeCrit1,
+.mermaid-diagram .activeCrit2,
+.mermaid-diagram .activeCrit3 {
   stroke: #ff8888;
   fill: #bfc7ff;
   stroke-width: 2;
 }
-.doneCrit0,
-.doneCrit1,
-.doneCrit2,
-.doneCrit3 {
+
+.mermaid-diagram .doneCrit0,
+.mermaid-diagram .doneCrit1,
+.mermaid-diagram .doneCrit2,
+.mermaid-diagram .doneCrit3 {
   stroke: #ff8888;
   fill: lightgrey;
   stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
-.doneCritText0,
-.doneCritText1,
-.doneCritText2,
-.doneCritText3 {
+
+.mermaid-diagram .doneCritText0,
+.mermaid-diagram .doneCritText1,
+.mermaid-diagram .doneCritText2,
+.mermaid-diagram .doneCritText3 {
   fill: black !important;
 }
-.activeCritText0,
-.activeCritText1,
-.activeCritText2,
-.activeCritText3 {
+
+.mermaid-diagram .activeCritText0,
+.mermaid-diagram .activeCritText1,
+.mermaid-diagram .activeCritText2,
+.mermaid-diagram .activeCritText3 {
   fill: black !important;
 }
-.titleText {
+
+.mermaid-diagram .titleText {
   text-anchor: middle;
   font-size: 18px;
   fill: black;
 }
-/*
 
-
-*/
-.node text {
+.mermaid-diagram .node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
-div.mermaidTooltip {
+
+.mermaid-diagram div.mermaidTooltip {
   position: absolute;
   text-align: center;
   max-width: 200px;
diff --git a/src/resources/themes/v_pure/v_pure_mermaid.css b/src/resources/themes/v_pure/v_pure_mermaid.css
index 769933f0..3d808780 100644
--- a/src/resources/themes/v_pure/v_pure_mermaid.css
+++ b/src/resources/themes/v_pure/v_pure_mermaid.css
@@ -1,264 +1,311 @@
 /* Flowchart variables */
 /* Sequence Diagram variables */
 /* Gantt chart variables */
-.mermaid .label {
+.mermaid-diagram .mermaid .label {
   color: #333;
 }
-.node rect,
-.node circle,
-.node ellipse,
-.node polygon {
+
+.mermaid-diagram .node rect,
+.mermaid-diagram .node circle,
+.mermaid-diagram .node ellipse,
+.mermaid-diagram .node polygon {
   fill: #ECECFF;
   stroke: #CCCCFF;
   stroke-width: 1px;
 }
-.edgePath .path {
+
+.mermaid-diagram .edgePath .path {
   stroke: #333333;
 }
-.edgeLabel {
+
+.mermaid-diagram .edgeLabel {
   background-color: #e8e8e8;
 }
-.cluster rect {
+
+.mermaid-diagram .cluster rect {
   fill: #ffffde !important;
   rx: 4 !important;
   stroke: #aaaa33 !important;
   stroke-width: 1px !important;
 }
-.cluster text {
+
+.mermaid-diagram .cluster text {
   fill: #333;
 }
-.actor {
+
+.mermaid-diagram .actor {
   stroke: #CCCCFF;
   fill: #ECECFF;
 }
-text.actor {
+
+.mermaid-diagram text.actor {
   fill: black;
   stroke: none;
 }
-.actor-line {
+
+.mermaid-diagram .actor-line {
   stroke: grey;
 }
-.messageLine0 {
+
+.mermaid-diagram .messageLine0 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
   stroke: #333;
 }
-.messageLine1 {
+
+.mermaid-diagram .messageLine1 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   stroke: #333;
 }
-#arrowhead {
+
+.mermaid-diagram #arrowhead {
   fill: #333;
 }
-#crosshead path {
+
+.mermaid-diagram #crosshead path {
   fill: #333 !important;
   stroke: #333 !important;
 }
-.messageText {
+
+.mermaid-diagram .messageText {
   fill: #333;
   stroke: none;
 }
-.labelBox {
+
+.mermaid-diagram .labelBox {
   stroke: #CCCCFF;
   fill: #ECECFF;
 }
-.labelText {
+
+.mermaid-diagram .labelText {
   fill: black;
   stroke: none;
 }
-.loopText {
+
+.mermaid-diagram .loopText {
   fill: black;
   stroke: none;
 }
-.loopLine {
+
+.mermaid-diagram .loopLine {
   stroke-width: 2;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
   stroke: #CCCCFF;
 }
-.note {
+
+.mermaid-diagram .note {
   stroke: #aaaa33;
   fill: #fff5ad;
 }
-.noteText {
+
+.mermaid-diagram .noteText {
   fill: black;
   stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
+
 /** Section styling */
-.section {
+.mermaid-diagram .section {
   stroke: none;
   opacity: 0.2;
 }
-.section0 {
+
+.mermaid-diagram .section0 {
   fill: rgba(102, 102, 255, 0.49);
 }
-.section2 {
+
+.mermaid-diagram .section2 {
   fill: #fff400;
 }
-.section1,
-.section3 {
+
+.mermaid-diagram .section1,
+.mermaid-diagram .section3 {
   fill: white;
   opacity: 0.2;
 }
-.sectionTitle0 {
+
+.mermaid-diagram .sectionTitle0 {
   fill: #333;
 }
-.sectionTitle1 {
+
+.mermaid-diagram .sectionTitle1 {
   fill: #333;
 }
-.sectionTitle2 {
+
+.mermaid-diagram .sectionTitle2 {
   fill: #333;
 }
-.sectionTitle3 {
+
+.mermaid-diagram .sectionTitle3 {
   fill: #333;
 }
-.sectionTitle {
+
+.mermaid-diagram .sectionTitle {
   text-anchor: start;
   font-size: 11px;
   text-height: 14px;
 }
+
 /* Grid and axis */
-.grid .tick {
+.mermaid-diagram .grid .tick {
   stroke: lightgrey;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
-.grid path {
+
+.mermaid-diagram .grid path {
   stroke-width: 0;
 }
+
 /* Today line */
-.today {
+.mermaid-diagram .today {
   fill: none;
   stroke: red;
   stroke-width: 2px;
 }
+
 /* Task styling */
 /* Default task */
-.task {
+.mermaid-diagram .task {
   stroke-width: 2;
 }
-.taskText {
+
+.mermaid-diagram .taskText {
   text-anchor: middle;
   font-size: 11px;
 }
-.taskTextOutsideRight {
+
+.mermaid-diagram .taskTextOutsideRight {
   fill: black;
   text-anchor: start;
   font-size: 11px;
 }
-.taskTextOutsideLeft {
+
+.mermaid-diagram .taskTextOutsideLeft {
   fill: black;
   text-anchor: end;
   font-size: 11px;
 }
+
 /* Specific task settings for the sections*/
-.taskText0,
-.taskText1,
-.taskText2,
-.taskText3 {
+.mermaid-diagram .taskText0,
+.mermaid-diagram .taskText1,
+.mermaid-diagram .taskText2,
+.mermaid-diagram .taskText3 {
   fill: white;
 }
-.task0,
-.task1,
-.task2,
-.task3 {
+
+.mermaid-diagram .task0,
+.mermaid-diagram .task1,
+.mermaid-diagram .task2,
+.mermaid-diagram .task3 {
   fill: #8a90dd;
   stroke: #534fbc;
 }
-.taskTextOutside0,
-.taskTextOutside2 {
+
+.mermaid-diagram .taskTextOutside0,
+.mermaid-diagram .taskTextOutside2 {
   fill: black;
 }
-.taskTextOutside1,
-.taskTextOutside3 {
+
+.mermaid-diagram .taskTextOutside1,
+.mermaid-diagram .taskTextOutside3 {
   fill: black;
 }
+
 /* Active task */
-.active0,
-.active1,
-.active2,
-.active3 {
+.mermaid-diagram .active0,
+.mermaid-diagram .active1,
+.mermaid-diagram .active2,
+.mermaid-diagram .active3 {
   fill: #bfc7ff;
   stroke: #534fbc;
 }
-.activeText0,
-.activeText1,
-.activeText2,
-.activeText3 {
+
+.mermaid-diagram .activeText0,
+.mermaid-diagram .activeText1,
+.mermaid-diagram .activeText2,
+.mermaid-diagram .activeText3 {
   fill: black !important;
 }
+
 /* Completed task */
-.done0,
-.done1,
-.done2,
-.done3 {
+.mermaid-diagram .done0,
+.mermaid-diagram .done1,
+.mermaid-diagram .done2,
+.mermaid-diagram .done3 {
   stroke: grey;
   fill: lightgrey;
   stroke-width: 2;
 }
-.doneText0,
-.doneText1,
-.doneText2,
-.doneText3 {
+
+.mermaid-diagram .doneText0,
+.mermaid-diagram .doneText1,
+.mermaid-diagram .doneText2,
+.mermaid-diagram .doneText3 {
   fill: black !important;
 }
+
 /* Tasks on the critical line */
-.crit0,
-.crit1,
-.crit2,
-.crit3 {
+.mermaid-diagram .crit0,
+.mermaid-diagram .crit1,
+.mermaid-diagram .crit2,
+.mermaid-diagram .crit3 {
   stroke: #ff8888;
   fill: red;
   stroke-width: 2;
 }
-.activeCrit0,
-.activeCrit1,
-.activeCrit2,
-.activeCrit3 {
+
+.mermaid-diagram .activeCrit0,
+.mermaid-diagram .activeCrit1,
+.mermaid-diagram .activeCrit2,
+.mermaid-diagram .activeCrit3 {
   stroke: #ff8888;
   fill: #bfc7ff;
   stroke-width: 2;
 }
-.doneCrit0,
-.doneCrit1,
-.doneCrit2,
-.doneCrit3 {
+
+.mermaid-diagram .doneCrit0,
+.mermaid-diagram .doneCrit1,
+.mermaid-diagram .doneCrit2,
+.mermaid-diagram .doneCrit3 {
   stroke: #ff8888;
   fill: lightgrey;
   stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
-.doneCritText0,
-.doneCritText1,
-.doneCritText2,
-.doneCritText3 {
+
+.mermaid-diagram .doneCritText0,
+.mermaid-diagram .doneCritText1,
+.mermaid-diagram .doneCritText2,
+.mermaid-diagram .doneCritText3 {
   fill: black !important;
 }
-.activeCritText0,
-.activeCritText1,
-.activeCritText2,
-.activeCritText3 {
+
+.mermaid-diagram .activeCritText0,
+.mermaid-diagram .activeCritText1,
+.mermaid-diagram .activeCritText2,
+.mermaid-diagram .activeCritText3 {
   fill: black !important;
 }
-.titleText {
+
+.mermaid-diagram .titleText {
   text-anchor: middle;
   font-size: 18px;
   fill: black;
 }
-/*
 
-
-*/
-.node text {
+.mermaid-diagram .node text {
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 14px;
 }
-div.mermaidTooltip {
+
+.mermaid-diagram div.mermaidTooltip {
   position: absolute;
   text-align: center;
   max-width: 200px;