.pipeline-connector {
    stroke:color-mix(in srgb, var(--text-color-secondary), var(--background))
}
.pipeline-node {
    z-index:0;
    justify-content:center;
    align-items:center;
    width:1.75rem;
    height:1.75rem;
    display:flex;
    position:relative
}
.pipeline-node:before {
    content:"";
    background:var(--card-background);
    z-index:-1;
    border-radius:50%;
    position:absolute;
    inset:-3px
}
.pipeline-node--selected:after {
    box-shadow:0 0 0 .125rem currentColor, 0 0 0 .5rem var(--card-background)!important
}
.pipeline-node--running.pipeline-node--selected:after {
    inset:0;
    box-shadow:0 0 0 .125rem color-mix(in srgb, currentColor, transparent), 0 0 0 .5rem var(--card-background)!important
}
.pipeline-node:has(a):after {
    content:"";
    z-index:-1;
    transition:var(--standard-transition);
    border-radius:50%;
    position:absolute;
    inset:1px;
    box-shadow:0 0 0 .5rem #0000
}
.pipeline-node:has(a):focus-visible {
    outline:none
}
.pipeline-node:has(a):hover:after {
    background:oklch(from var(--color) l c h/.1)
}
.pipeline-node:has(a):active:after {
    background:oklch(from var(--color) l c h/.15);
    box-shadow:0 0 0 .25rem oklch(from var(--color) l c h/.15)
}
.pipeline-node:has(a):focus:after {
    background:oklch(from var(--color) l c h/.15);
    box-shadow:0 0 0 .25rem oklch(from var(--color) l c h/.15)
}
.pipeline-node:has(a):focus-visible:after {
    box-shadow:0 0 0 .25rem var(--text-color)!important
}
.pipeline-node a {
    background:0 0;
    position:absolute;
    inset:0
}
.pipeline-node svg {
    width:1.75rem;
    height:1.75rem
}
.pipeline-node:has(.pipeline-node-terminal):before {
    inset:4px
}
.pipeline-node-counter {
    text-align:center;
    width:1.25rem;
    line-height:1rem;
    font-size:var(--font-size-xs);
    font-weight:var(--font-bold-weight);
    cursor:default;
    border:2px solid color-mix(in srgb, var(--text-color-secondary), var(--background));
    color:var(--text-color-secondary);
    border-radius:1rem
}
.pipeline-node-counter:before {
    display:none!important
}
.pipeline-node-terminal {
    border:2px solid color-mix(in srgb, var(--text-color-secondary), var(--background));
    border-radius:10px;
    width:10px;
    height:10px
}
.pipeline-node-terminal:before {
    display:none!important
}
.pipeline-connector-skipped {
    stroke:color-mix(in srgb, var(--text-color-secondary), var(--background));
    stroke-opacity:.75;
    stroke-dasharray:4 4
}
.pipeline-small-label {
    transition:translate var(--standard-transition);
    justify-content:center;
    align-items:baseline;
    gap:2px;
    font-size:.75rem;
    display:flex
}
.pipeline-small-label .TruncatingLabel {
    flex:0 auto;
    min-width:0
}
.pipeline-small-label--selected {
    translate:0 2px
}
.pipeline-big-label {
    font-weight:var(--font-bold-weight);
    transition:translate var(--standard-transition);
    text-align:center;
    font-size:.875rem
}
.pipeline-big-label .TruncatingLabel {
    -webkit-box-orient:vertical;
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:1!important
}
.pipeline-big-label--selected {
    translate:0 -2px
}
.pipeline-big-label-content {
    justify-content:center;
    align-items:baseline;
    gap:2px;
    min-width:0;
    display:flex
}
.pipeline-big-label-content .TruncatingLabel {
    flex:0 auto;
    min-width:0
}
.pipeline-collapse-badge {
    font-size:var(--font-size-xs);
    color:var(--text-color-secondary);
    cursor:pointer;
    white-space:nowrap;
    transition:color var(--standard-transition);
    flex:none;
    font-weight:400
}
.pipeline-collapse-badge:hover {
    color:var(--text-color)
}
.pipeline-collapse-chevron {
    vertical-align:baseline;
    width:.5rem;
    height:.5rem;
    transition:transform var(--standard-transition);
    margin-left:.25rem;
    display:inline-block;
    transform:rotate(0)
}
.pipeline-collapse-chevron--expanded {
    transform:rotate(90deg)
}
.pipeline-collapse-chevron * {
    stroke-width:64px
}
.pipeline-big-label.pipeline-graph-node--synthetic {
    font-style:italic
}
.pipeline-big-label.pipeline-graph-node--skeleton {
    color:var(--text-color-secondary);
    pointer-events:none;
    font-weight:400
}
.pipeline-stages__group {
    flex-direction:column;
    gap:.5rem;
    margin-top:1rem;
    display:flex
}
.pipeline-stages__group .pipeline-stages__heading {
    font-size:var(--font-size-xs);
    color:var(--text-color-secondary);
    font-weight:var(--font-bold-weight);
    margin-top:0;
    margin-bottom:.25rem;
    display:flex
}
.pipeline-stages__group:first-of-type {
    margin-top:0
}
.pipelinegraph-container {
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:0;
    display:flex;
    overflow-x:auto
}
.pipelinegraph-container * {
    box-sizing:border-box
}
.pipelinegraph-container .pipelinegraph {
    margin-right:auto
}
.pipeline-single-run {
    grid-template-columns:220px 1fr;
    align-items:center;
    display:grid
}
.pipeline-single-run:last-of-type {
    border-bottom:none
}
.pipeline-single-run .pipeline-user-specified-text {
    color:var(--text-color);
    transition:opacity var(--standard-transition);
    word-break:normal;
    overflow-wrap:anywhere;
    grid-template-columns:auto 1fr;
    align-items:start;
    gap:.125rem .625rem;
    text-decoration:none;
    display:grid
}
.pipeline-single-run .pipeline-user-specified-text span {
    color:var(--text-color-secondary);
    font-size:var(--font-size-xs);
    grid-area:2/2
}
.pipeline-single-run .pipeline-user-specified-text:hover {
    opacity:.75
}
.pipeline-single-run .pipeline-user-specified-text:active {
    opacity:.5
}
.pipeline-single-run .pipeline-user-specified-text svg {
    width:1.375rem;
    height:1.375rem
}
.pipeline-dropdown-checkboxes {
    font-size:var(--font-size-sm);
    color:var(--text-color);
    -webkit-user-select:none;
    user-select:none;
    flex-direction:column;
    gap:.75rem;
    margin:.5rem;
    display:flex
}