.graphDiv {
    width: 100%;
    height: 100%;
}

.line-separator {
    height: 1px;
    background: black;
}

.legend-div {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    display: grid;
    align-self: center;
    float: left;
    margin-right: 10px;
    flex: 1 1 auto;
}

    .legend-div:last-child {
        margin-right: 0px;
    }

    .legend-div:focus {
        border: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
    }

.legend-marker {
    background-size: 100%;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.legend-text-div {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width .5s ease-in-out;
    width: 100%;
}

.legend-container {
    display: flex;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    justify-self: end;
    margin: 0px 3rem 0px 20px;
}

.title-container {
    margin-left: 5px;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    display: grid;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
}

.title-expand {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    display: grid;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
}

.title-text {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    font-weight: 600;
    margin-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-expanded-button {
    background: var(--vs-image-icon-tree-expanded, url("../images/itemExpandedIcon.png")) no-repeat;
    background-size: 10px 10px;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: left;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
}

.title-collapsed-button {
    background: var(--vs-image-icon-tree-collapsed, url("../images/itemCollapsedIcon.png")) no-repeat;
    background-size: 10px 10px;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: left;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
}

.graph-scale-left {
    width: 100%;
    height: 100%;
    position: relative;
}

.graph-scale-right {
    width: 100%;
    height: 100%;
    position: relative;
}

.graph-axis-left {
    position: absolute;
    text-align: right;
    right: 5px;
}

.graph-axis-right {
    position: absolute;
    text-align: left;
    left: 5px;
}

.graph-div {
    grid-row: 1;
    grid-column: 2;
    position: relative;
}

    .graph-div .unselected {
        background-color: rgba(200, 200, 200, 0.50);
        position: absolute;
        z-index: 110;
        height: 100%;
    }

    .graph-div .focused {
        outline: 1px dotted var(--plugin-treeview-content-selected-border-color, gray) !important;
        stroke: var(--plugin-treeview-content-selected-border-color, #C0C0C0) !important;
        stroke-dasharray: 2, 1 !important;
        stroke-width: 1px !important;
    }

.graph-canvas {
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
}

.graph-axis-line {
    position: absolute;
    width: 100%;
    height: 0px;
    left: 0px;
    z-index: 99;
    border-bottom-color: var(--diagnostics-host-graph-line, #c0c0c0);
    border-bottom-width: 1px;
    border-bottom-style: dashed;
}

.swimlane-vertical-line {
    position: absolute;
    height: 100%;
    width: 0px;
    border-right-color: var(--diagnostics-host-graph-line, #c0c0c0);
    border-right-width: 1px;
    border-right-style: solid;
    top: 0px;
}

.threshold-selector {
    grid-column: 3;
    margin-right: 10px;
}

.threshold-axis {
    border-bottom-color: #ff0000; /* Threshold axis line color */
}

.swimlaneBase {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

    .swimlaneBase > * {
        position: relative;
    }

    .swimlaneBase > .title-container {
        grid-row: 1;
        grid-column: 1;
        display: grid;
        grid-template-columns: auto auto 1fr;
        grid-template-rows: 1fr;
        padding: 2px 0px 2px 0px;
        background-color: var(--plugin-background-color, magenta);
        z-index: 1;
    }

        .swimlaneBase > .title-container > .titleRegion {
            grid-row: 1;
            grid-column: 3;
            justify-self: end;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr;
            padding: 2px 3em 2px 0px; /* The three em corresponds to the width of the .rightRegion */
        }

    .swimlaneBase > .title-container > .titleRegion.collapsed {
        display: none;
    }

    .swimlaneBase > .contentRegion {
        grid-row: 2;
        grid-column: 1;
        grid-column-end: 2;
    }

.contentRegion {
    box-sizing: content-box;
    display: grid;
    grid-template-columns: 3em 1fr 3em;
    grid-template-rows: 1fr;
}

    .contentRegion > * {
        position: relative;
    }

    .contentRegion > .leftRegion {
        grid-row: 1;
        grid-column: 1;
    }

    .contentRegion > .mainRegion {
        grid-row: 1;
        grid-column: 2;
        border: 1px solid var(--diagnostics-host-swimlane-border, red);
        cursor: pointer;
        overflow: hidden;
    }

    .contentRegion > .rightRegion {
        grid-row: 1;
        grid-column: 3;
    }

    .mainRegion > div > .unselected {
        background-color: rgba(200, 200, 200, 0.50);
        position: absolute;
        z-index: 110;
        height: 100%;
    }

    .mainRegion > .selectionActive {
        cursor: col-resize;
    }

.gridLines {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: transparent;
}

.selectionOverlay {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: transparent;
}