.callerCallee {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
}

/* Main View positioning */
.callerCallee thead:not(.sharedHeader) {
    visibility: collapse;
}

.callerCallee .caption {
    flex: 0 0 auto;
    width: 100%;
}

.callerCallee .header {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
}

.callerCallee table {
    table-layout: fixed;
    overflow: hidden;
    flex: 0 0 auto;
    width: 100%;
}

.callerCallee .wrapper {
    width: auto;
}

.callerCallee .verticalScroll {
    display: flex;
    flex: 1 1 45%;
    overflow-y: auto;
}

.callerCallee .current {
    flex: 1 0 10%;
    overflow: none;
}

/* Caption Styling */
.callerCallee .caption {
    font-size: 1.4em;
    border-bottom: 1px solid purple; /*[1px solid {Header-SeparatorLine-Background}]*/
}

/* Table Styling */
.callerCallee table {
    /*
     * 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;
}

.callerCallee .header {
    background-color: chartreuse; /*[{Header-Default-Background}]*/
}

.callerCallee thead tr:first-child th {
    border-top: 1px solid purple; /*[1px solid {Header-SeparatorLine-Background}]*/
}

.callerCallee td:first-child, .callerCallee th:first-child {
    border-left: 1px solid purple; /*[1px solid {Environment-GridLine-Background}]*/
}

.callerCallee td, .callerCallee th {
    border-right: 1px solid purple; /*[1px solid {Environment-GridLine-Background}]*/
    border-bottom: 1px solid purple; /*[1px solid {Environment-GridLine-Background}]*/
    padding: 1px 4px;
}

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

/* Grid Rows Styling */
.callerCallee th {
    position: relative;
    min-width: 40px;
    width: 150px;
    padding: 4px;
    text-align: right;
    vertical-align: middle;
    font-weight: normal;
    color: red; /*[{Environment-CommandBarTextActive-Background}]*/
    border-color: purple; /*[{Header-SeparatorLine-Background}]*/
    background-color: chartreuse; /*[{Header-Default-Background}]*/
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
    text-overflow: ellipsis;
}

.callerCallee td {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.callerCallee th.leftAlign, .callerCallee td.leftAlign {
    text-align: left;
}

/* Linked Horizontal Scrolling */
.callerCallee .linkedHorizontalScroll {
    display: flex;
    overflow-x: hidden;
    width: 100%;
}

.callerCallee .scrollBarInner {
    width: 1px;
    height: 1px;
}

.callerCallee .horizontalScroll {
    flex: 0 0 auto;
    overflow-x: auto;
    width: 100%;
}

/* Focus, Selection, & Hover */
.callerCallee thead th:hover, .callerCallee thead th:focus {
    background-color: red; /*[{Header-MouseOver-Background}]*/
    color: chartreuse; /*[{Environment-CommandBarTextHover-Background}]*/
    border-color: purple; /*[{Header-SeparatorLine-Background}]*/
}

.callerCallee tbody tr:hover {
    color: red; /*[{plugin-treeview-content-inactive-selected-color}]*/
    background-color: chartreuse; /*[{plugin-treeview-content-inactive-selected-background-color}]*/
}

.callerCallee tbody tr.selected {
    color: red; /*[{plugin-treeview-content-selected-color}]*/
    background-color: chartreuse; /*[{plugin-treeview-content-selected-background-color}]*/
}

.callerCallee thead > tr:focus > th {
    border-bottom: 1px dotted black; /*[1px dotted {CommonControls-FocusVisual-Foreground}]*/
    border-top: 1px dotted black; /*[1px dotted {CommonControls-FocusVisual-Foreground}]*/
}

.callerCallee thead > tr:focus > th:first-child {
    border-left: 1px dotted black; /*[1px dotted {CommonControls-FocusVisual-Foreground}]*/
}

.callerCallee thead > tr:focus > th:last-child {
    border-right: 1px dotted black; /*[1px dotted {CommonControls-FocusVisual-Foreground}]*/
}

.callerCallee tbody:focus {
    /*
     * We explicitly remove the outline focus ring since IE does not correctly show it
     * with collapsed borders. Instead we edit the borders to mimic the same look on the table
     */
    outline: none;
}

.callerCallee tbody:focus > tr:last-child > td {
    border-bottom: 1px dotted black; /*[1px dotted {CommonControls-FocusVisual-Foreground}]*/
}

.callerCallee tbody:focus > tr > td:first-child {
    border-left: 1px dotted black; /*[1px dotted {CommonControls-FocusVisual-Foreground}]*/
}

.callerCallee tbody:focus > tr > td:last-child {
    border-right: 1px dotted black; /*[1px dotted {CommonControls-FocusVisual-Foreground}]*/
}

/* Sortable */
.callerCallee th {
   /** 
    * We do this to the header since we need to modify the th padding
    * when sorting to show the sort arrow with trimmed text, but don't
    * want to affect the width of the column
    */
    box-sizing: border-box;
}

.callerCallee .sortAsc, .callerCallee .sortDesc {
    position: relative;
    padding-right: 1em;
}

.callerCallee .sortAsc:after, .callerCallee .sortDesc: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;
}

.callerCallee .sortAsc:after {
    content: "5"; /* With Marlett font this will be an up arrow */
}

.callerCallee .sortDesc:after {
    content: "6"; /* With Marlett font this will be a down arrow */
}

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

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

/* Column hiding */
.callerCallee.hide0 tr td:nth-child(1), .callerCallee.hide0 tr th:nth-child(1) {
    display: none;
}

.callerCallee.hide1 tr td:nth-child(2), .callerCallee.hide1 tr th:nth-child(2) {
    display: none;
}

.callerCallee.hide2 tr td:nth-child(3), .callerCallee.hide2 tr th:nth-child(3) {
    display: none;
}

.callerCallee.hide3 tr td:nth-child(4), .callerCallee.hide3 tr th:nth-child(4) {
    display: none;
}

.callerCallee.hide4 tr td:nth-child(5), .callerCallee.hide4 tr th:nth-child(5) {
    display: none;
}

.callerCallee.hide5 tr td:nth-child(6), .callerCallee.hide5 tr th:nth-child(6) {
    display: none;
}

.callerCallee.hide6 tr td:nth-child(7), .callerCallee.hide6 tr th:nth-child(7) {
    display: none;
}

.callerCallee.hide7 tr td:nth-child(8), .callerCallee.hide7 tr th:nth-child(8) {
    display: none;
}

.callerCallee.hide8 tr td:nth-child(9), .callerCallee.hide8 tr th:nth-child(9) {
    display: none;
}

.callerCallee.hide9 tr td:nth-child(10), .callerCallee.hide9 tr th:nth-child(10) {
    display: none;
}

.callerCallee.hide10 tr td:nth-child(11), .callerCallee.hide10 tr th:nth-child(11) {
    display: none;
}

.callerCallee.hide11 tr td:nth-child(12), .callerCallee.hide11 tr th:nth-child(12) {
    display: none;
}

.callerCallee.hide12 tr td:nth-child(13), .callerCallee.hide12 tr th:nth-child(13) {
    display: none;
}

.callerCallee.hide13 tr td:nth-child(14), .callerCallee.hide13 tr th:nth-child(14) {
    display: none;
}

.callerCallee.hide14 tr td:nth-child(15), .callerCallee.hide14 tr th:nth-child(15) {
    display: none;
}

.callerCallee.hide15 tr td:nth-child(16), .callerCallee.hide15 tr th:nth-child(16) {
    display: none;
}

.callerCallee.hide16 tr td:nth-child(17), .callerCallee.hide16 tr th:nth-child(17) {
    display: none;
}

.callerCallee.hide17 tr td:nth-child(18), .callerCallee.hide17 tr th:nth-child(18) {
    display: none;
}

.callerCallee.hide18 tr td:nth-child(19), .callerCallee.hide18 tr th:nth-child(19) {
    display: none;
}

.callerCallee.hide19 tr td:nth-child(20), .callerCallee.hide19 tr th:nth-child(20) {
    display: none;
}

.callerCallee.hide20 tr td:nth-child(21), .callerCallee.hide20 tr th:nth-child(21) {
    display: none;
}

.callerCallee.hide21 tr td:nth-child(22), .callerCallee.hide21 tr th:nth-child(22) {
    display: none;
}

.callerCallee.hide22 tr td:nth-child(23), .callerCallee.hide22 tr th:nth-child(23) {
    display: none;
}

.callerCallee.hide23 tr td:nth-child(24), .callerCallee.hide23 tr th:nth-child(24) {
    display: none;
}

.callerCallee.hide24 tr td:nth-child(25), .callerCallee.hide24 tr th:nth-child(25) {
    display: none;
}

.callerCallee.hide25 tr td:nth-child(26), .callerCallee.hide25 tr th:nth-child(26) {
    display: none;
}

.callerCallee.hide26 tr td:nth-child(27), .callerCallee.hide26 tr th:nth-child(27) {
    display: none;
}

.callerCallee.hide27 tr td:nth-child(28), .callerCallee.hide27 tr th:nth-child(28) {
    display: none;
}

.callerCallee.hide28 tr td:nth-child(29), .callerCallee.hide28 tr th:nth-child(29) {
    display: none;
}

.callerCallee.hide29 tr td:nth-child(30), .callerCallee.hide29 tr th:nth-child(30) {
    display: none;
}

.callerCallee.hide30 tr td:nth-child(31), .callerCallee.hide30 tr th:nth-child(31) {
    display: none;
}

.callerCallee.hide31 tr td:nth-child(32), .callerCallee.hide31 tr th:nth-child(32) {
    display: none;
}

.callerCallee.hide32 tr td:nth-child(33), .callerCallee.hide32 tr th:nth-child(33) {
    display: none;
}

.callerCallee.hide33 tr td:nth-child(34), .callerCallee.hide33 tr th:nth-child(34) {
    display: none;
}

.callerCallee.hide34 tr td:nth-child(35), .callerCallee.hide34 tr th:nth-child(35) {
    display: none;
}

.callerCallee.hide35 tr td:nth-child(36), .callerCallee.hide35 tr th:nth-child(36) {
    display: none;
}

.callerCallee.hide36 tr td:nth-child(37), .callerCallee.hide36 tr th:nth-child(37) {
    display: none;
}

.callerCallee.hide37 tr td:nth-child(38), .callerCallee.hide37 tr th:nth-child(38) {
    display: none;
}

.callerCallee.hide38 tr td:nth-child(39), .callerCallee.hide38 tr th:nth-child(39) {
    display: none;
}

.callerCallee.hide39 tr td:nth-child(40), .callerCallee.hide39 tr th:nth-child(40) {
    display: none;
}