g.classGroup text {
  fill: $nodeBorder;
  stroke: none;
  font-family: 'trebuchet ms', verdana, arial;
  font-family: var(--mermaid-font-family);
  font-size: 10px;

  .title {
    font-weight: bolder;
  }
}

.divider {
  stroke: $nodeBorder;
  stroke-width: 1;
}

g.clickable {
  cursor: pointer;
}

g.classGroup rect {
  fill: $nodeBkg;
  stroke: $nodeBorder;
}

g.classGroup line {
  stroke: $nodeBorder;
  stroke-width: 1;
}

.classLabel .box {
  stroke: none;
  stroke-width: 0;
  fill: $nodeBkg;
  opacity: 0.5;
}

.classLabel .label {
  fill: $nodeBorder;
  font-size: 10px;
}

.relation {
  stroke: $nodeBorder;
  stroke-width: 1;
  fill: none;
}

.dashed-line{
  stroke-dasharray: 3;
}

@mixin composition {
  fill: $nodeBorder !important ;
  stroke: $nodeBorder !important ;
  stroke-width: 1;
}

#compositionStart, .composition {
  @include composition;
}

#compositionEnd, .composition {
  @include composition;
}

@mixin aggregation {
  fill: $nodeBkg !important ;
  stroke: $nodeBorder !important ;
  stroke-width: 1;
}

#aggregationStart, .aggregation {
  @include aggregation;
}

#aggregationEnd, .aggregation {
  @include aggregation;
}

#dependencyStart, .dependency {
  @include composition;
}

#dependencyEnd, .dependency {
  @include composition;
}

#extensionStart , .extension{
  @include composition;
}

#extensionEnd, .extension {
  @include composition;
}