html, body {
    color-adjust: none;
    cursor: default;
    height: 100%;
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.mainView {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    display: grid;
    height: 100vh;
    width: 100vw;
}

.fullsizeOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
}

    .mainView .BPT-ToolbarContents * {
        overflow: visible;
    }

    .mainView .dataViewContainer {
        grid-template-columns: minmax(670px, 1fr);
        grid-row: 1;
        grid-template-rows: auto 1fr;
        display: grid;
        padding-left: 2px;
        padding-right: 5px;
        position: relative;
        overflow-y: hidden;
        overflow-x: auto;
    }

        .mainView .dataViewContainer .warningViewContainer {
            grid-template-columns: 1fr auto;
            grid-row: 1;
            display: grid;
        }

            .mainView .dataViewContainer .warningViewContainer .warningView {
                grid-column: 1;
                display: none;
                padding: 4px 0px 7px 0px;
            }

                .mainView .dataViewContainer .warningViewContainer .warningView .warningMessage {
                    background-repeat: no-repeat;
                    background-position-y: -18px;
                    background-image: url('DiagnosticsCommon\images\i_warning.png'); /*[url({image-warning})]*/
                    background-size: 18px 54px;
                    color: TRANSPARENT; /*[{plugin-color}]*/
                    display: inline;
                    height: 18px;
                    padding-left: 21px;
                    width: 18px;
                }

            .mainView .dataViewContainer .warningViewContainer .loadFileView {
                grid-column: 2;
            }

        .mainView .dataViewContainer .detailedViewsContainer {
            grid-template-columns: 1fr;
            grid-row: 2;
            grid-template-rows: 1fr;
            display: grid;
            overflow: visible;
        }

            .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer {
                grid-row: 1;
                margin-bottom: 10px;
                margin-top: 5px;
                overflow: visible;
            }

                .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup {
                    grid-column: 1;
                    grid-template-columns: 1fr max-content;
                    grid-row: 1;
                    grid-template-rows: auto 4px 1fr;
                    display: grid;
                    height: 100%;
                    overflow: visible;
                    width: 100%;
                }

                    .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineLabel {
                        grid-column: 1;
                        grid-row: 1;
                        align-self: end;
                        font-weight: 600;
                        width: 100%;
                        padding-left: 8px;
                    }

                    .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .sortFilterSection {
                        grid-column: 2;
                        grid-row: 1;
                        overflow: visible;
                    }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .sortFilterSection > * {
                            overflow: visible;
                        }

                    .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .dataProcessingProgressDiv {
                        grid-row: 1;
                        grid-column: 1;
                        display: none;
                    }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .dataProcessingProgressDiv .progressBarDiv {
                            text-align: center;
                        }

                    .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails {
                        grid-column: span 2;
                        grid-template-columns: 1fr 3px 250px;
                        grid-row: 3;
                        grid-template-rows: auto 1fr;
                        border-top: 1px solid grey; /*[1px solid {plugin-responsiveness-graph-border}]*/
                        display: grid;
                        height: 100%;
                        position: relative;
                        width: 100%;
                    }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineEventHeaderLabel {
                            align-self: center;
                            font-weight: 600;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            padding-left: 25px;
                            grid-column: 1;
                            grid-row: 1;
                        }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineEventHeaderDivider {
                            background-color: TRANSPARENT; /*[{plugin-perftools-splitter}]*/
                            height: 100%;
                            position: relative;
                            width: 3px;
                            grid-column: 1;
                            grid-row: 1;
                        }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineRuler {
                            grid-column: 1;
                            grid-row: 1;
                            border-bottom: 1px solid TRANSPARENT; /*[1px solid {diagnostics-host-border}]*/
                            height: 1.8em;
                            position: relative;
                        }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineView {
                            grid-column: 1;
                            grid-row: 2;
                            height: 100%;
                            position: relative;
                            width: 100%;
                        }

                            .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineView .verticalRulerLine {
                                background-color: lightgrey; /*[{diagnostics-host-graph-line}]*/
                                margin-top: 1px;
                                position: absolute;
                                width: 1px;
                            }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineDetailsHeader {
                            grid-column: 3;
                            grid-row: 1;
                            font-weight: 600;
                            overflow: hidden;
                            padding: 0px 10px 0px 10px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            background-color: TRANSPARENT; /*[{plugin-perftools-detail-pane}]*/
                        }
                            .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineDetailsHeader .eventDetailsIndicator {
                                width: 6px;
                                flex-shrink: 0;
                                height: 1.5em;
                                color: transparent;
                                margin-top: 5.5px;
                                margin-right: 5px;
                                min-width: 6px;
                                float: left;
                            }

                            .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineDetailsHeader .eventDetailsTitle {
                                margin-top: 5.5px;
                                float:left;
                            }

                        .mainView .dataViewContainer .detailedViewsContainer .timelineViewContainer .timelineViewGroup .timelineViewAndDetails .timelineDetailsPaneContainer {
                            grid-column: 3;
                            grid-row: 2;
                        }

.eventDetails {
    background-color: TRANSPARENT; /*[{plugin-perftools-detail-pane}]*/
    height: 100%;
    overflow-y: auto;
    padding-top: 2px;
}

    .eventDetails .eventDetailsTable {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .eventDetails .eventRow {
        display: table-row;
    }

    .eventDetails .eventCell {
        display: table-cell;
        overflow: hidden;
        padding: 2px 10px 2px 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .eventDetails .name {
        width: 130px;
    }

    .eventDetails .value {
        user-select: text;
        width: calc(100% - 130px);
    }

    .eventDetails .detailSeparator {
        border-bottom: 1px solid TRANSPARENT; /*[1px solid {plugin-responsiveness-graph-border}]*/
        height: 0px;
        left: 0px;
        margin: 5px 10px 5px 10px;
    }

    .eventDetails .eventDetailsDescription {
        margin: 5px 10px 10px 10px;
    }

    .eventDetails .imagePreviewContainer {
        display: block;
        margin: 5px 10px 10px 10px;
    }

    .eventDetails .imagePreview {
        background-image: url('images/i_checkered_background.png'); /*[url({image-checkered-background})]*/
        box-shadow: 2px 2px 2px transparent; /*[2px 2px 2px {plugin-textbox-border-color rgba(0.5)}]*/
        margin-top: 7px;
        max-width: calc(100% - 2px);
    }

.timelineView > .timelineFocus {
    height: 0px;
    width: 100%;
}

.BPT-listItemContainerHover {
}

    .BPT-listItemContainerHover .BPT-FileLink, .BPT-listItemContainerHover .BPT-FileLink:hover {
        color: TRANSPARENT; /*[{plugin-treeview-content-mouseover-color}]*/
    }

    .BPT-listItemContainerHover .eventDataTemplate > .eventDataTemplateDataCell > .hintText {
        color: TRANSPARENT; /*[{plugin-treeview-content-mouseover-color}]*/
    }


.BPT-listItemSelected {
}

    .BPT-listItemSelected .BPT-FileLink, .BPT-listItemSelected .BPT-FileLink:hover {
        color: TRANSPARENT; /*[{plugin-treeview-content-inactive-selected-color}]*/
    }

    .BPT-listItemSelected .eventDataTemplate > .eventDataTemplateDataCell > .hintText {
        color: TRANSPARENT; /*[{plugin-treeview-content-inactive-selected-color}]*/
    }

.BPT-listItemSelectedActive {
}

    .BPT-listItemSelectedActive .BPT-FileLink, .BPT-itemSelectedActive .BPT-FileLink:hover {
        color: TRANSPARENT; /*[{plugin-treeview-content-selected-color}]*/
    }

    .BPT-listItemSelectedActive .eventDataTemplate > .eventDataTemplateDataCell > .hintText {
        color: TRANSPARENT; /*[{plugin-treeview-content-selected-color}]*/
    }

.hidden {
    visibility: hidden;
}

.eventDataTemplate {
    grid-template-columns: 185px 3px 1fr;
    grid-template-rows: 1fr;
    display: grid;
}

    .eventDataTemplate .eventDataTemplateNameCell {
        grid-column: 1;
        grid-row: 1;
        align-items: center;
        display: flex;
        position: relative;
    }

        .eventDataTemplate .eventDataTemplateNameCell .eventDataTemplateThreadIndicator {
            background: #9B4F96;
            width: 2px;
            flex-shrink: 0;
            height: 1em;
            margin-left: 3px;
            margin-right: 5px;
            min-width: 2px;
        }

        .eventDataTemplate .eventDataTemplateNameCell .eventDataTemplateName {
            margin-left: 5px;
            margin-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

            .eventDataTemplate .eventDataTemplateNameCell .eventDataTemplateName .measureName {
                font-weight: bold;
            }

    .eventDataTemplate > .eventDataTemplateDataCell {
        align-items: center;
        grid-column: 3;
        grid-row: 1;
        display: flex;
        height: 100%;
        overflow: hidden;
    }

        .eventDataTemplate > .eventDataTemplateDataCell > .eventBar {
            flex-shrink: 0;
            height: 1em;
            margin-top: 2px;
            min-width: 3px;
        }

        .eventDataTemplate > .eventDataTemplateDataCell > .bracket {
            background: none;
            border-left: 3px solid #839900;
            border-right: 3px solid #839900;
            border-top: 2px solid #839900;
            height: 50%;
        }

        .eventDataTemplate > .eventDataTemplateDataCell > .durationText {
            flex-shrink: 0;
            margin-left: 5px;
        }

        .eventDataTemplate > .eventDataTemplateDataCell > .hintText {
            flex-shrink: 0;
            margin-left: 5px;
            color: TRANSPARENT; /*[{visualprofiler-hint-text-color}]*/
        }

.emptyHeader {
    background-color: TRANSPARENT; /*[{plugin-treeview-content-inactive-selected-background-color}]*/
}

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

    .errorGrid .errorFrown {
        grid-row: 1;
        font-size: 100px;
    }

    .errorGrid .errorMessage {
        grid-row: 2;
        font-size: 20px;
        word-wrap: break-word;
    }

/*From the DOM/Console common "toolwindow.css"*/
.BPT-FileLink, .BPT-HelpLink {
    color: TRANSPARENT; /*[{plugin-link-color}]*/ /*EnvironmentColors.CommandBarMenuLinkTextColorKey*/
    cursor: pointer;
}

    .BPT-FileLink:hover, .BPT-HelpLink:hover {
        color: TRANSPARENT; /*[{plugin-link-hover-color}]*/ /*EnvironmentColors.CommandBarMenuLinkTextHoverColorKey*/
        text-decoration: underline;
    }

.filteringBar {
    display: flex;
    margin-bottom: 1px;
}

    .filteringBar .timelineSort {
        margin-right: 8px;
    }

        .filteringBar .timelineSort .timelineSortLabel {
            padding-right: 5px;
        }

        .filteringBar .timelineSort .timelineSortSelector option {
            padding-left: 5px;
            padding-right: 5px;
        }

    .filteringBar .frameGroupingButton {
        height: 20px;
        margin-right: 8px;
    }

        .filteringBar .frameGroupingButton .buttonIcon {
            background-image: url('images/i_frame_grouping.png'); /*[url({image-frame-grouping})]*/
            margin-top: -2px;
        }

    .filteringBar .filteringMenuButton {
        height: 20px;
        padding: 0px;
        margin-right: 8px;
    }

        .filteringBar .filteringMenuButton .buttonIcon {
            background-image: url('images/i_filtering_options.png'); /*[url({image-filtering})]*/
            width: 33px;
        }

    .filteringBar .viewSettingsMenuButton {
        height: 20px;
        padding: 0px;
    }

        .filteringBar .viewSettingsMenuButton .buttonIcon {
            background-image: url('images/i_viewSettings_options.png'); /*[url({image-viewsettings})]*/
            width: 33px;
        }

.BPT-menuContent .eventNameFilter .BPT-TextBox {
    width: 140px;
}

.BPT-donutChartText {
    fill: transparent; /*[{plugin-color}]*/
}

.dataIdle {
    background: TRANSPARENT; /*[{plugin-treeview-content-inactive-selected-background-color}]*/
    stroke: TRANSPARENT; /*[{plugin-treeview-content-inactive-selected-background-color}]*/
    fill: none;
    opacity: 1;
}