/* Grid Container */
.treeGridContainer {
    position: relative;
    /* TODO for Dev15 - This should be extended to everything on the DOM once we have the new grid in both scenarios */
    box-sizing: content-box;
}

    /* Grid */
    .treeGridContainer table {
        table-layout: fixed;
        overflow: hidden;
        /*
    * This is a workaround as IE does not always correctly render the bottom border of a
    * table when border-collapse is specified. Our solution is to manually specify the correct
    * borders and set the spacing of cells to be 0.
    */
        border-collapse: separate;
        border-spacing: 0px;
    }

    .treeGridContainer thead tr:first-child th {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }

    .treeGridContainer td:first-child, .treeGridContainer th:first-child {
        border-left: 1px solid var(--Environment-GridLine-Background, purple);
    }

    .treeGridContainer td, .treeGridContainer th {
        border-right: 1px solid var(--Environment-GridLine-Background, purple);
        border-bottom: 1px solid var(--Environment-GridLine-Background, purple);
        padding: 1px 4px;
    }

    .treeGridContainer tr {
        /* We need a fixed row height since we calculate the virtualization with the row height */
        height: 1.8em;
    }

    /* Grid Header */
    .treeGridContainer .dataGridHeader {
        position: absolute;
        z-index: 1;
        overflow: hidden;
        background-color: var(--Header-Default-Background, chartreuse);
        border-bottom: 1px solid var(--Header-SeparatorLine-Background, purple);
        padding-left: 0px;
        padding-right: 0px;
        top: 0px;
        left: 0px;
        /* Adjust for scrollbar width */
        width: calc(100% - var(--scrollbar-width));
    }

    .treeGridContainer .treeGridBody {
        z-index: 0;
        width: 100%;
        height: 100%;
        margin: 0px;
        overflow-y: scroll;
    }

    .treeGridContainer thead th {
        position: relative;
        min-width: 40px;
        width: 150px;
        padding: 4px;
        text-align: right;
        vertical-align: middle;
        font-weight: normal;
        color: var(--Environment-CommandBarTextActive-Background, chartreuse);
        border-color: var(--Header-SeparatorLine-Background, purple);
        border-bottom: 0px;
        background-color: var(--Header-Default-Background, chartreuse);
        overflow: hidden;
        white-space: nowrap;
        cursor: default;
        text-overflow: ellipsis;
    }

    .treeGridContainer thead tr:first-child th:hover, .treeGridContainer thead tr:first-child th:focus {
        background-color: var(--Header-MouseOver-Background, chartreuse);
        color: var(--Environment-CommandBarTextHover-Background, chartreuse);
        border: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
    }

    .treeGridContainer thead th div {
        display: inline;
    }

    /* Column Filter dialog */
    .treeGridContainer thead th .filterContainer {
        position: relative;
    }

    .treeGridContainer thead th .filterButton {
        display: inline-flex;
        align-items: baseline;
        margin-left: 10px;
        padding: 1px 5px;
        background-color: transparent;
        border: 1px solid transparent;
        color: var(--Environment-CommandBarTextInactive-Background, fuchsia);
    }

        .treeGridContainer thead th .filterButton:hover {
            border-color: var(--Environment-CommandBarBorder-Background, lawngreen);
            background-color: var(--DetailsView-CommandBarMouseOverBackground-Background, fuchsia);
            color: var(--Environment-CommandBarTextHover-Background, lawngreen);
        }

    /* Grid Rows */
    .treeGridContainer tbody td {
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .treeGridContainer .treeGridRow-expander {
        cursor: pointer;
        display: inline-block;
        width: 16px;
        height: 16px;
        overflow: hidden;
        vertical-align: middle;
        background: var(--itemCollapsed, url("../images/itemCollapsed.png")) no-repeat 0px 0px;
        background-position-x: center;
        background-position-y: center;
        background-size: 70%;
    }

        .treeGridContainer .treeGridRow-expander.expanded {
            background: var(--itemExpanded, url("../images/itemExpanded.png")) no-repeat 0px 0px;
            background-position-x: center;
            background-position-y: center;
            background-size: 60%;
        }

.hotHighlight {
    display: inline-block;
    width: 0px;
    height: 0px;
    vertical-align: middle;
    background-size: 100%;
}

    .hotHighlight.hotItem {
        width: 1.4em;
        height: 1.4em;
        vertical-align: middle;
    }

.treeGridContainer tbody tr:hover {
    color: var(--plugin-treeview-content-inactive-selected-color, chartreuse);
    background-color: var(--plugin-treeview-content-inactive-selected-background-color, chartreuse);
}

.treeGridContainer tbody tr.selected {
    color: var(--plugin-treeview-content-selected-color, chartreuse);
    background-color: var(--plugin-treeview-content-selected-background-color, chartreuse);
}

.treeGridContainer .treeGridRow .treeGridCell-label {
    color: var(--TreeGridCellLabelText, var(--CpuUsageTool-TreeGridCellLabelText, chartreuse));
}

.treeGridContainer tr.selected .treeGridCell-label, .treeGridContainer tr:hover .treeGridCell-label {
    color: inherit;
}

/* Focus:
 * IE does not always correctly show focus rings with collapsed borders. To fix this
 * we explicitly remove the outline focus ring and edit the borders on the rows to mimic 
 * the same look when the body or table header row has focus.
 */
.treeGridContainer tbody:focus {
    outline: none;
}

    .treeGridContainer tbody:focus > tr > td {
        border-bottom: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
        border-right: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
    }

        .treeGridContainer tbody:focus > tr > td:first-child {
            border-left: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
        }

.treeGridContainer thead > tr:focus > th {
    border-bottom: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
    border-top: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
    border-right: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
}

    .treeGridContainer thead > tr:focus > th:first-child {
        border-left: 1px dotted var(--CommonControls-FocusVisual-Foreground, black);
    }

/* Arrangeable */
#arrangeColumn {
    position: absolute;
    /* We want to be on top of everything as this will only be shown when reordering columns */
    z-index: 10001;
    color: var(--Environment-CommandBarTextActive-Background, chartreuse);
    background-color: var(--Header-Default-Background, chartreuse);
    border: 1px solid var(--Header-SeparatorLine-Background, purple);
    text-align: right;
    vertical-align: middle;
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    text-overflow: ellipsis;
}

#arrangeDropLocation {
    /* We want to be on top of everything except the arrangeColumn as this will only be shown when reordering columns */
    z-index: 10000;
    width: 8px;
    position: absolute;
    overflow: hidden;
}

    #arrangeDropLocation:before {
        content: "";
        width: 0;
        height: 50%;
        display: block;
        position: absolute;
        border-top: 4px solid var(--Environment-CommandBarTextActive-Background, red);
        border-bottom: 4px solid var(--Environment-CommandBarTextActive-Background, red);
        border-left: 4px solid transparent;
    }

    #arrangeDropLocation:after {
        content: "";
        width: 0;
        height: 50%;
        right: 0;
        display: block;
        position: absolute;
        border-top: 4px solid var(--Environment-CommandBarTextActive-Background, red);
        border-bottom: 4px solid var(--Environment-CommandBarTextActive-Background, red);
        border-right: 4px solid transparent;
    }


/* Sortable */
.treeGridContainer [aria-sort="ascending"], .treeGridContainer [aria-sort="descending"] {
    position: relative;
    padding-right: 1em;
}

    .treeGridContainer [aria-sort="ascending"]:after, .treeGridContainer [aria-sort="descending"]:after {
        /* These :after styles are for the up or down Marlett arrows */
        position: absolute;
        top: calc(100% - 1em - 4px); /* 100% - height of the text - padding of the outer element */
        right: 0px;
        width: 1em;
        font-family: Marlett;
    }

    .treeGridContainer [aria-sort="ascending"]:after {
        /* With Marlett font this will be an up arrow
     * Set alternative text as empty string so screenreader will not read this
     */
        content: "5" / "";
    }

    .treeGridContainer [aria-sort="descending"]:after {
        /* With Marlett font this will be a down arrow
    * Set alternative text as empty string so screenreader will not read this
    */
        content: "6" / "";
    }

/* Column Resizer */
.treeGridContainer .columnResizer {
    position: absolute;
    display: inline-block;
    cursor: col-resize;
    padding: 4px 0px;
    height: 100%;
    top: 0px;
    z-index: 10;
}

    .treeGridContainer .columnResizer:after {
        /* This adds a nbsp so that the resizer is rendered */
        content: "\00a0";
    }

/* Filter Flyout */
.dataGridFilterFlyout .filterFlyout {
    position: absolute;
    top: 34px;
    overflow: auto;
    visibility: hidden;
    z-index: 10001;
    border: 1px solid var(--Environment-CommandBarMenuBorder-Background, black);
    background-color: var(--Environment-CommandBarMenuBackgroundGradientBegin-Background, aquamarine);
    color: var(--Environment-CommandBarTextActive-Background, fuchsia);
    margin-top: -1px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    max-height: min(400px, 100% - 34px);
}

    .dataGridFilterFlyout .filterFlyout > * {
        display: inline-block;
    }

    .dataGridFilterFlyout .filterFlyout.flyoutActive {
        visibility: visible;
    }

.dataGridFilterFlyout .filterHeader {
    grid-row: 1;
    margin: 3px 0px;
    padding: 0px 8px;
}

.dataGridFilterFlyout .searchContainer {
    margin-left: 3px;
}

.dataGridFilterFlyout .includeBar {
    grid-row: 2;
    margin: 3px 0px;
    padding: 0px 8px;
    width: 80%;
}

.dataGridFilterFlyout .excludeBar {
    grid-row: 3;
    margin: 3px 0px;
    padding: 0px 8px;
    width: 80%;
}

.dataGridFilterFlyout .filterList {
    grid-row: 2;
    list-style-type: none;
    overflow-y: scroll;
    margin: 0px;
    padding: 0px;
}

.dataGridFilterFlyout .searchActive + .filterList {
    visibility: hidden;
}

.dataGridFilterFlyout .filterList > li {
    white-space: nowrap;
    margin: 3px 0px;
    padding: 0px 20px 0px 6px;
}

    .dataGridFilterFlyout .filterList > li.childOption {
        margin-left: 40px;
    }

    .dataGridFilterFlyout .filterList > li:hover, .dataGridFilterFlyout .filterList > li.hasFocus {
        background-color: var(--SearchControl-PopupControlMouseOverBackgroundGradientBegin-Background, lightgreen);
        outline: 1px solid var(--SearchControl-FocusedBorder-Background, fuchsia);
        color: var(--SearchControl-PopupCheckboxMouseDownText-Background, black);
    }

    .dataGridFilterFlyout .filterList > li .filter-expander {
        cursor: pointer;
        display: inline-block;
        width: 16px;
        height: 16px;
        overflow: hidden;
        vertical-align: middle;
        background: var(--itemCollapsed, url("../images/itemCollapsed.png")) no-repeat 0px 0px;
        background-position-x: center;
        background-position-y: center;
        background-size: 70%;
    }

        .dataGridFilterFlyout .filterList > li .filter-expander.expanded {
            background: var(--itemExpanded, url("../images/itemExpanded.png")) no-repeat 0px 0px;
            background-position-x: center;
            background-position-y: center;
            background-size: 60%;
        }


.dataGridFilterFlyout .filterFooter {
    grid-row: 4;
    display: flex;
    justify-content: flex-end;
    padding: 9px 9px;
}

    .dataGridFilterFlyout .filterFooter > button {
        margin-left: 3px;
    }

        .dataGridFilterFlyout .filterFooter > button:active {
            background-color: var(--, fuchsia);
            color: var(--Environment-CommandBarTextMouseDown-Background, lawngreen);
        }

    /* reset the default IE button:active animation */
    .dataGridFilterFlyout .filterFooter button:active * {
        position: relative;
    }