.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;
}

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

.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;
}

.legend-container {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-self: end;
    display: flex;
    margin-left: 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: url("../images/itemExpandedIcon.png") no-repeat; /*[url({itemExpanded}) 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: url("../images/itemCollapsedIcon.png") no-repeat; /*[url({itemCollapsed}) 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 gray !important; /*[1px dotted {plugin-treeview-content-selected-border-color} !important]*/
        stroke: #C0C0C0 !important; /*[{plugin-treeview-content-selected-border-color} !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: #c0c0c0; /*[{DiagnosticsHub-GraphLine-Background}]*/
    border-bottom-width: 1px;
    border-bottom-style: dashed;
}

.swimlane-vertical-line {
    position: absolute;
    height: 100%;
    width: 0px;
    border-right-color: #c0c0c0; /*[{DiagnosticsHub-GraphLine-Background}]*/
    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-rows: auto auto;
    grid-template-columns: auto 1fr;
}

    .swimlaneBase > * {
        position: relative;
    }

    .swimlaneBase > .title-container {
        grid-row: 1;
        grid-column: 1;
        padding: 2px 0px 2px 0px;
        background-color: magenta; /*[{plugin-background-color}]*/
        z-index: 1;
    }

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

    .swimlaneBase > .titleRegion.limitedSpace {
        display: none;
    }

    .swimlaneBase > .titleRegion.collapsed {
        display: none;
    }

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

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

    .contentRegion > * {
        position: relative;
    }

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

    .contentRegion > .mainRegion {
        grid-row: 1;
        grid-column: 2;
        border: 1px solid red; /*[1px solid {DiagnosticsHub-SwimlaneBorder-Background}]*/
        cursor: pointer;
    }

    .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;
}

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

.timeFilter {
    position: absolute;
    top: 0px;
    height: 100%;
    /* These are hardcoded colors from icecap which should work in all color themes */
    background-color: rgba(255, 255, 100, .273);
    border: 1px solid rgba(211, 211, 17, .684);
    border-top-width: 0px;
    border-bottom-width: 0px;
}