
svg[data-diagram-type=SEQUENCE] g.header.floating-header {
    opacity: 0.9;
    display: none;
}

svg[data-diagram-type=SEQUENCE].floating-header-active g.header.floating-header {
    display: inline;
}

svg[data-diagram-type=SEQUENCE] g.floating-header-toggle-button  {
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

svg[data-diagram-type=SEQUENCE].floating-header-active g.floating-header-toggle-button .button-icon  {
    fill: #333333 !important;
}

svg[data-diagram-type=SEQUENCE] g.header:hover g.floating-header-toggle-button {
    opacity: 0.8;
    visibility: visible;
    animation: fadeOut 2s forwards 1s; /* Delay the fade out effect */
}

svg[data-diagram-type=SEQUENCE] g.header g.floating-header-toggle-button:hover {
    opacity: 1;
    visibility: visible;
    animation: none !important;
}

svg[data-diagram-type=SEQUENCE] g.floating-header-toggle-button:hover .button-background  {
    stroke-width: 1 !important;
}

svg[data-diagram-type=SEQUENCE]:has(g.floating-header-toggle-button:hover) g.header * {
    filter: invert(0.1);
}

svg[data-diagram-type=SEQUENCE] g.floating-header-toggle-button:hover,
svg[data-diagram-type=SEQUENCE] g.floating-header-toggle-button:hover * {
    filter: none !important;
}

@keyframes fadeOut {
  0% {
    opacity: 0.8;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

svg[data-diagram-type=SEQUENCE] g.participant {
    cursor: pointer;
}

xsvg[data-diagram-type=SEQUENCE].filter-active g,
svg[data-diagram-type=SEQUENCE].filter-active g  > g:not(.header) {
    opacity: 0.2;
}

svg[data-diagram-type=SEQUENCE].filter-active g.filter-highlight {
    filter: url(#colorize-green);
    opacity: 1.0 !important;
}

svg[data-diagram-type=SEQUENCE].filter-active.filter-nomatch g.filter-highlight {
    filter: url(#colorize-red) !important;
}

svg[data-diagram-type=SEQUENCE].filter-active:not(.filter-nomatch) g.filter-highlight text {
    font-weight: bold;
}

