Fix embedded mermaid css to fix class diagram arrow heads

Originally used id based selecters, which doesn't work as the ids are made unique.
Replacing them with class based selectors fixes this.

src/templates/assets/javascripts/components/content/mermaid/index.css

@@ -171,19 +171,15 @@ g.classGroup text {
 }
 
 /* Class extension, composition and dependency marker */
-defs #classDiagram-extensionStart,
-defs #classDiagram-extensionEnd,
-defs #classDiagram-compositionStart,
-defs #classDiagram-compositionEnd,
-defs #classDiagram-dependencyStart,
-defs #classDiagram-dependencyEnd {
+defs marker.marker.extension.class path,
+defs marker.marker.composition.class path ,
+defs marker.marker.dependency.class path  {
   fill: var(--md-mermaid-edge-color) !important;
   stroke: var(--md-mermaid-edge-color) !important;
 }
 
 /* Class aggregation marker */
-defs #classDiagram-aggregationStart,
-defs #classDiagram-aggregationEnd {
+defs marker.marker.aggregation.class path  {
   fill: var(--md-mermaid-label-bg-color) !important;
   stroke: var(--md-mermaid-edge-color) !important;
 }