.summaryView {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.currentView.summaryView {
    overflow: auto;
}

.summaryTitle {
    background-color: fuchsia; /*[{IntelliTrace-ReportHeaderActive-Background}]*/;
    flex: 0 0 3em;
    display: flex;
    flex-direction: column;
    padding: 10px;
    /* We set the main report area min to be 500 and the side panel to be 220, so our min width is the sum minus our padding */
    min-width: 700px;
}

    .summaryTitle > * {
        flex: 1 auto;
        display: flex;
        align-items: center;
        color: blueviolet; /*[{IntelliTrace-ReportHeaderActive-Foreground}]*/
    }

    .summaryTitle > .title {
        font-weight: bold;
    }

.summaryReport {
    display: flex;
    flex-direction: row;
}

.mainReport {
    min-width: 500px;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.sideBar {
    flex: 0 0 220px
}

.panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 10px;
}

    .panel > table {
        /* Tables don't respect align-items in IE, so we force them to take the full width by setting it */
        width: 100%;
    }

.panelTitle {
    flex: 0 0 auto;
    padding: 5px;
    font-weight: bold;
}

.panelBody {
    border-collapse: collapse;
    flex: 1 auto;
    padding: 5px;
    margin: 0px;
}

.panel.relatedViews {
    flex-direction: row;
}

.sideBar .panel {
    background-color: fuchsia; /*[{Diagnostics-ControlContent-Background}]*/
}

.sideBar .panelBody {
    list-style:none;
}

.sideBar .panelTitle {
    color: lawngreen; /*[{Diagnostics-ControlHeader-Foreground}]*/
    background-color: magenta; /*[{Diagnostics-ControlHeader-Background}]*/
}

.panelBody > li {
    padding: 3px;
}

table.panelBody {
    /*
    * 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;
}

.panelBody th {
    font-weight: normal;
    text-align: left;
    color: red; /*[{Environment-CommandBarTextActive-Background}]*/
    background-color: chartreuse; /*[{Header-Default-Background}]*/
    border: 0px solid purple; /*[0px solid {Header-SeparatorLine-Background}]*/
}

    .panelBody th:focus {
        background-color: red; /*[{Header-MouseOver-Background}]*/
        color: chartreuse; /*[{Environment-CommandBarTextHover-Background}]*/
        border-color: purple; /*[{Header-SeparatorLine-Background}]*/
    }

.panelBody td {
    border: 0px solid purple; /*[0px solid {Environment-GridLine-Background}]*/
}

    .panelBody thead tr:first-child th {
        border-top-width: 1px;
    }

    .panelBody td:first-child, .panelBody th:first-child {
        border-left-width: 1px;
    }

    .panelBody th, panelBody td {
        border-bottom-width: 1px;
        padding: 1px 4px;
    }

    .panelBody th {
        border-right-width: 1px;
    }

    .panelBody td:last-child {
        border-right-width: 1px;
    }

    .panelBody tr:last-child td {
        border-bottom-width: 1px;
    }

.panelBody > tbody {
    color: lawngreen; /*[{Diagnostics-ControlContent-Foreground}]*/
}

/* Specific controls styles */
.hotPathTable .inclusivePercent, .hotPathTable .exclusivePercent {
    text-align: right;
}

.summaryTable .name, .hotPathTable .name {
    width: 70%;
    /* 
        Setting the max width will allow the inner content to truncate if it is too long.
        Without this, the table layout algorithm will try and fit this to the content
        since the table width is set to 100% in the flexbox layout (take all the available space)
    */
    max-width: 200px;
}

.summaryTable .name > :first-child {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.summaryTable .percent {
    text-align: right;
    position: relative;
}

.summaryTable .count {
    text-align: right;
    position: relative;
    width: 20%;
}

.summaryTable .usageContainer {
    width: 30%;
    text-align: right;
}

.usageBar {
    display: inline-block;
    background-color: deeppink; /*[{Environment-DiagReportLinkText-Background}]*/
    border: 1px solid deeppink; /*[1px solid {Environment-DiagReportLinkText-Background}]*/
}

.summaryListItem:focus .usageBar, .hotPathRow:focus .usageBar {
    background-color: transparent;
    border-color: red; /*[{plugin-treeview-content-selected-color}]*/;
}

.summaryListItem:focus .hyperlink-button, .hotPathRow:focus .hyperlink-button {
    color: inherit;
}

.swimlaneBase > .contentRegion {
    grid-template-columns: 3em 1fr;
}

.summaryTable .summaryListItem:focus, .hotPathTable .hotPathRow:focus {
    color: red; /*[{plugin-treeview-content-selected-color}]*/
    background-color: chartreuse; /*[{plugin-treeview-content-selected-background-color}]*/
}

.summaryReport > .mainReport td, .summaryReport > .mainReport th {
    padding: 4px;
}

.hotPathRow > .name {
    white-space: nowrap;
}

/* 
    We override the hyperlink colors in the panel body to get a higher contrast.
    Focus is still shown via the text decoration and outline
*/
.panelBody .hyperlink-button, .hyperlink-button:enabled:hover, .hyperlink-button:enabled:focus {
    color: fuchsia; /*[{DiagnosticsHub-Hyperlink-Background}]*/
}