#mermaid-dialog {
  width: fit-content;
  max-width: 90vw;
}

#mermaid-dialog .dialog-body {
  user-select: text;
  cursor: text;
  padding-bottom: 64px;
}

#mermaidDialogDiagram svg {
  user-select: text;
  pointer-events: auto;
  cursor: text !important;
}
#mermaidDialogDiagram text {
  user-select: text;
}

/* Hide the mermaid title text from the diagram since it's shown in the dialog header */
#mermaidDialogDiagram text[y^="-"] {
  display: none;
}

/* Style the mermaid title text in the inline diagram*/
svg[id^="mermaid-"] text[y^="-"] {
  font-family: "Swedbank Headline", "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  fill: #333;
  text-anchor: middle;
}