pre.mermaid,
pre.graphviz {
  background: none;
  padding: 0;
  border: none;
}
pre > svg {
  display: block;
  margin: 0 auto;
}
pre.graphviz {
  white-space: normal;
  max-width: calc(100% - 3.125rem);
}
pre.graphviz svg > g > polygon {
  fill: var(--grey-1);
}
.mermaid.graph svg {
  max-height: 18.75rem;
}
.mermaid .label {
  font-family: var(--mermaid-font-family);
  color: var(--grey-7);
  font-size: 0.875em;
}
.mermaid .label text {
  fill: var(--text-color);
}
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
  fill: var(--grey-1);
  stroke: var(--text-color);
  stroke-width: 0.0625rem;
}
.mermaid .node .label {
  text-align: center;
}
.mermaid .node.clickable {
  cursor: pointer;
}
.mermaid .arrowheadPath {
  fill: var(--text-color);
}
.mermaid .edgePath .path {
  stroke: var(--text-color);
}
.mermaid .flowchart-link {
  stroke: var(--text-color);
  fill: none;
}
.mermaid .edgeLabel {
  background-color: var(--grey-2);
  text-align: center;
}
.mermaid .edgeLabel rect {
  opacity: 0.8;
  fill: var(--grey-2) !important;
}
.mermaid .cluster rect {
  fill: var(--grey-2);
  stroke: var(--text-color);
  stroke-width: 0.0625rem;
}
.mermaid .cluster text {
  fill: var(--text-color);
}
.mermaid div.mermaidTooltip {
  position: absolute;
  text-align: center;
  max-width: 12.5rem;
  padding: 0.125rem;
  font-family: var(--mermaid-font-family);
  font-size: 0.75rem;
  background: var(--grey-1);
  border: 0.0625rem solid var(--text-color);
  border-radius: 0.125rem;
  pointer-events: none;
  z-index: 99;
}
.mermaid .actor {
  stroke: var(--text-color);
  fill: var(--grey-1);
}
.mermaid text.actor {
  fill: var(--text-color);
  stroke: none;
}
.mermaid .actor-line {
  stroke: var(--text-color);
}
.mermaid .messageLine0 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: var(--text-color);
}
.mermaid .messageLine1 {
  stroke-width: 1.5;
  stroke-dasharray: '2 2';
  stroke: var(--text-color);
}
.mermaid #arrowhead {
  fill: var(--text-color);
}
.mermaid .sequenceNumber {
  fill: #fff;
}
.mermaid #sequencenumber {
  fill: var(--text-color);
}
.mermaid #crosshead path {
  fill: var(--text-color) !important;
  stroke: var(--text-color) !important;
}
.mermaid .messageText {
  fill: var(--text-color);
  stroke: none;
}
.mermaid .labelBox {
  stroke: var(--text-color);
  fill: var(--grey-3);
}
.mermaid .labelText {
  fill: var(--text-color);
  stroke: none;
}
.mermaid .loopText {
  fill: var(--text-color);
  stroke: none;
}
.mermaid .loopLine {
  stroke-width: 2;
  stroke-dasharray: '2 2';
  stroke: var(--text-color);
}
.mermaid .note {
  stroke: var(--grey-4);
  fill: var(--grey-3);
}
.mermaid .noteText {
  fill: #000;
  stroke: none;
  font-family: var(--mermaid-font-family);
  font-size: 0.875rem;
}
.mermaid .activation0 {
  fill: #f4f4f4;
  stroke: #666;
}
.mermaid .activation1 {
  fill: #f4f4f4;
  stroke: #666;
}
.mermaid .activation2 {
  fill: #f4f4f4;
  stroke: #666;
}
.mermaid .mermaid-main-font {
  font-family: var(--mermaid-font-family);
}
.mermaid .section {
  stroke: none;
  opacity: 0.2;
}
.mermaid .section0 {
  fill: var(--grey-1);
}
.mermaid .section2 {
  fill: var(--grey-1);
}
.mermaid .section1,
.mermaid .section3 {
  fill: var(--grey-0);
  opacity: 0.2;
}
.mermaid .sectionTitle0 {
  fill: var(--text-color);
}
.mermaid .sectionTitle1 {
  fill: var(--text-color);
}
.mermaid .sectionTitle2 {
  fill: var(--text-color);
}
.mermaid .sectionTitle3 {
  fill: var(--text-color);
}
.mermaid .sectionTitle {
  text-anchor: start;
  font-size: 0.6875rem;
  text-height: 0.875rem;
  font-family: var(--mermaid-font-family);
}
.mermaid .grid .tick {
  stroke: var(--text-color);
  opacity: 0.8;
  shape-rendering: crispEdges;
}
.mermaid .grid .tick text {
  font-family: var(--mermaid-font-family);
}
.mermaid .grid path {
  stroke-width: 0;
}
.mermaid .today {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 0.125rem;
}
.mermaid .task {
  stroke-width: 2;
}
.mermaid .taskText {
  text-anchor: middle;
  font-family: var(--mermaid-font-family);
}
.mermaid .taskText:not([font-size]) {
  font-size: 0.6875rem;
}
.mermaid .taskTextOutsideRight {
  fill: var(--text-color);
  text-anchor: start;
  font-size: 0.6875rem;
  font-family: var(--mermaid-font-family);
}
.mermaid .taskTextOutsideLeft {
  fill: var(--text-color);
  text-anchor: end;
  font-size: 0.6875rem;
}
.mermaid .task.clickable {
  cursor: pointer;
}
.mermaid .taskText.clickable {
  cursor: pointer;
  fill: #003163 !important;
  font-weight: bold;
}
.mermaid .taskTextOutsideLeft.clickable {
  cursor: pointer;
  fill: #003163 !important;
  font-weight: bold;
}
.mermaid .taskTextOutsideRight.clickable {
  cursor: pointer;
  fill: #003163 !important;
  font-weight: bold;
}
.mermaid .taskText0,
.mermaid .taskText1,
.mermaid .taskText2,
.mermaid .taskText3 {
  fill: var(--grey-1);
}
.mermaid .task0,
.mermaid .task1,
.mermaid .task2,
.mermaid .task3 {
  fill: var(--text-color);
  stroke: var(--text-color);
}
.mermaid .taskTextOutside0,
.mermaid .taskTextOutside2 {
  fill: var(--color-blue);
}
.mermaid .taskTextOutside1,
.mermaid .taskTextOutside3 {
  fill: var(--color-purple);
}
.mermaid .active0,
.mermaid .active1,
.mermaid .active2,
.mermaid .active3 {
  fill: var(--grey-1);
  stroke: var(--text-color);
}
.mermaid .activeText0,
.mermaid .activeText1,
.mermaid .activeText2,
.mermaid .activeText3 {
  fill: var(--text-color) !important;
}
.mermaid .done0,
.mermaid .done1,
.mermaid .done2,
.mermaid .done3 {
  stroke: var(--color-green);
  fill: var(--grey-1);
  stroke-width: 2;
}
.mermaid .doneText0,
.mermaid .doneText1,
.mermaid .doneText2,
.mermaid .doneText3 {
  fill: var(--text-color) !important;
}
.mermaid .crit0,
.mermaid .crit1,
.mermaid .crit2,
.mermaid .crit3 {
  stroke: var(--primary-color);
  fill: var(--primary-color);
  stroke-width: 2;
}
.mermaid .activeCrit0,
.mermaid .activeCrit1,
.mermaid .activeCrit2,
.mermaid .activeCrit3 {
  stroke: var(--primary-color);
  fill: var(--grey-1);
  stroke-width: 2;
}
.mermaid .doneCrit0,
.mermaid .doneCrit1,
.mermaid .doneCrit2,
.mermaid .doneCrit3 {
  stroke: var(--text-color);
  fill: var(--text-color);
  stroke-width: 2;
  cursor: pointer;
  shape-rendering: crispEdges;
}
.mermaid .milestone {
  transform: rotate(45deg) scale(0.8, 0.8);
}
.mermaid .milestoneText {
  font-style: italic;
}
.mermaid .doneCritText0,
.mermaid .doneCritText1,
.mermaid .doneCritText2,
.mermaid .doneCritText3 {
  fill: var(--color-green) !important;
}
.mermaid .activeCritText0,
.mermaid .activeCritText1,
.mermaid .activeCritText2,
.mermaid .activeCritText3 {
  fill: var(--text-color) !important;
}
.mermaid .titleText {
  text-anchor: middle;
  font-size: 1.125rem;
  fill: var(--text-color);
  font-family: var(--mermaid-font-family);
}
.mermaid g.classGroup text {
  fill: var(--text-color);
  stroke: none;
  font-family: var(--mermaid-font-family);
  font-size: 0.625rem;
}
.mermaid g.classGroup text .title {
  font-weight: bolder;
}
.mermaid g.clickable {
  cursor: pointer;
}
.mermaid g.classGroup rect {
  fill: var(--grey-1);
  stroke: var(--text-color);
}
.mermaid g.classGroup line {
  stroke: var(--text-color);
  stroke-width: 1;
}
.mermaid .classLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: var(--grey-1);
  opacity: 0.5;
}
.mermaid .classLabel .label {
  fill: var(--text-color);
  font-size: 0.625rem;
}
.mermaid .relation {
  stroke: var(--text-color);
  stroke-width: 1;
  fill: none;
}
.mermaid .dashed-line {
  stroke-dasharray: 3;
}
@mixin composition {
  fill: var(--text-color);
  stroke: var(--text-color);
  stroke-width: 1;
}
@include composition;
@include composition;
@mixin aggregation {
  fill: var(--grey-1);
  stroke: var(--text-color);
  stroke-width: 1;
}
@include aggregation;
@include aggregation;
@include composition;
@include composition;
@include composition;
@include composition;
.mermaid .commit-id,
.mermaid .commit-msg,
.mermaid .branch-label {
  fill: #d3d3d3;
  color: #d3d3d3;
  font-family: var(--mermaid-font-family);
}
.mermaid .pieTitleText {
  text-anchor: middle;
  font-size: 1.5625rem;
  fill: $taskTextDarkColor;
  font-family: var(--mermaid-font-family);
}
.mermaid .slice {
  font-family: var(--mermaid-font-family);
}
.mermaid g.stateGroup text {
  fill: var(--text-color);
  stroke: none;
  font-size: 0.625rem;
  font-family: var(--mermaid-font-family);
}
.mermaid g.stateGroup text {
  fill: var(--text-color);
  stroke: none;
  font-size: 0.625rem;
}
.mermaid g.stateGroup .state-title {
  font-weight: bolder;
  fill: #000;
}
.mermaid g.stateGroup rect {
  fill: var(--grey-1);
  stroke: var(--text-color);
}
.mermaid g.stateGroup line {
  stroke: var(--text-color);
  stroke-width: 1;
}
.mermaid .transition {
  stroke: var(--text-color);
  stroke-width: 1;
  fill: none;
}
.mermaid .stateGroup .composit {
  fill: #fff;
  border-bottom: 0.0625rem;
}
.mermaid .stateGroup .alt-composit {
  fill: #e0e0e0;
  border-bottom: 0.0625rem;
}
.mermaid .state-note {
  stroke: var(--grey-4);
  fill: var(--grey-3);
}
.mermaid .state-note text {
  fill: #000;
  stroke: none;
  font-size: 0.625rem;
}
.mermaid .stateLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: var(--grey-1);
  opacity: 0.5;
}
.mermaid .stateLabel text {
  fill: #000;
  font-size: 0.625rem;
  font-weight: bold;
  font-family: var(--mermaid-font-family);
}
.mermaid .node circle.state-start {
  fill: #000;
  stroke: #000;
}
.mermaid .node circle.state-end {
  fill: #000;
  stroke: #fff;
  stroke-width: 1.5;
}
.mermaid #statediagram-barbEnd {
  fill: var(--text-color);
}
.mermaid .statediagram-cluster rect {
  fill: var(--grey-1);
  stroke: var(--text-color);
  stroke-width: 0.0625rem;
}
.mermaid .statediagram-cluster rect.outer {
  rx: 0.3125rem;
  ry: 0.3125rem;
}
.mermaid .statediagram-state .divider {
  stroke: var(--text-color);
}
.mermaid .statediagram-state .title-state {
  rx: 0.3125rem;
  ry: 0.3125rem;
}
.mermaid .statediagram-cluster.statediagram-cluster .inner {
  fill: #fff;
}
.mermaid .statediagram-cluster.statediagram-cluster-alt .inner {
  fill: #e0e0e0;
}
.mermaid .statediagram-cluster .inner {
  rx: 0;
  ry: 0;
}
.mermaid .statediagram-state rect.basic {
  rx: 0.3125rem;
  ry: 0.3125rem;
}
.mermaid .statediagram-state rect.divider {
  stroke-dasharray: 10, 10;
  fill: #efefef;
}
.mermaid .note-edge {
  stroke-dasharray: 5;
}
.mermaid .statediagram-note rect {
  stroke: var(--grey-4);
  fill: var(--grey-3);
  stroke-width: 0.0625rem;
  rx: 0;
  ry: 0;
}
:root {
  --mermaid-font-family: "trebuchet ms", verdana, arial;
}