.callerCalleeOverlay {
    width: 100%;
    height: 100%;
    position: relative;
}

    .callerCalleeOverlay>.message {
        text-align: center;
        width: 100%;
        position: absolute;
        top: 30%;
    }

.callerCalleeView {
    width: 100%;
    height: 100%;
    padding: 2px 10px 10px 10px;
    display: flex;
    flex-direction: column;
}

    .callerCalleeView > span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .callerCalleeView > .currentFunctionName {
        display: block;
        font-size: 200%;
        color: var(--CallerCalleeTitleText-Background, chartreuse);
    }

    .callerCalleeView > .currentModuleName {
        display: block;
        padding: 2px 0px;
        color: var(--CallerCalleeSubTitleText-Background, fuchsia);
    }

.callerCalleeViewItem.chart {
    flex: 1;
    display: flex;
    box-sizing: content-box;
}

    .callerCalleeViewItem.chart > .arrowIcon {
        width: 1.33em;
        height: 1.33em;
        margin: auto;
    }

.callerCalleeViewItem.functionGroup {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.callerCalleeViewItem.functionGroup-title {
    display: block;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    margin: 0px;
}

.callerCalleeViewItem.functions {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    margin: 0px;
    background-color: var(--CallerCalleeFunctionGroupBackground-Background, hotpink);
    border: 1px solid var(--CallerCalleeFunctionGroupBorder-Background, turquoise);
    padding: 5px;
}

.callerCalleeViewItem > .function-name {
    flex: 1;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.callerCalleeViewItem > .metric {
    display: block;
}

.callerCalleeViewItem.function {
    display: flex;
    margin: 5px 0px 0px 0px;
    padding: 5px 10px;
    min-height: calc(1.5em + 10px); /** We add 10 pixels here for the padding in our function cell */
}

.callerCalleeViewItem.function.invokable {
    cursor: pointer;
}

.callerCalleeViewItem.functions > .function:first-child {
    margin-top: 0px;
}

.callerCalleeViewItem.functions > .function:last-child {
    margin-bottom: 0px;
}

.callerCalleeViewItem.callers .function {
    border: 1px solid var(--CallerCalleeFunctionBorder-Background, rgb(194, 0, 220));
    background-color: var(--CallerCalleeFunctionBackground-Background, rgb(207, 0, 229));
}

    .callerCalleeViewItem.callers .function.invokable:focus {
        border: 1px solid var(--CallerCalleeFunctionBorderHover-Background, rgb(194, 0, 220));
        background-color: var(--CallerCalleeFunctionBackgroundHover-Background, rgb(217, 0, 239));
    }

    .callerCalleeViewItem.callers .function.invokable:hover {
        border: 1px solid var(--CallerCalleeFunctionBorderHover-Background, rgb(194, 0, 220));
        background-color: var(--CallerCalleeFunctionBackgroundHover-Background, rgb(237, 0, 255));
    }

.callerCalleeViewItem.currentFunction .functionBody {
    border: 1px solid var(--CallerCalleeFunctionBorder-Background, rgb(194, 203, 0));
    background-color: var(--CallerCalleeFunctionBackground-Background, rgb(207, 214, 0));
}

    .callerCalleeViewItem.currentFunction .functionBody:focus {
        /* This is a workaround for a bug in IE where the focus outline is not shown for elements with a tabIndex=-1 */
        outline: thin dotted;
    }

    .callerCalleeViewItem.currentFunction .function:focus {
        outline: thin dotted;
    }

.callerCalleeViewItem.callees .function {
    border: 1px solid var(--CallerCalleeFunctionLowUsageBorder-Background, rgb(0, 203, 220));
    background-color: var(--CallerCalleeFunctionLowUsageBackground-Background, rgb(0, 214, 229));
}

    .callerCalleeViewItem.callees .function.invokable:focus {
        border: 1px solid var(--CallerCalleeFunctionLowUsageBorderHover-Background, rgb(0, 213, 230));
        background-color: var(--CallerCalleeFunctionLowUsageBackgroundHover-Background, rgb(0, 214, 239));
    }

    .callerCalleeViewItem.callees .function.invokable:hover {
        border: 1px solid var(--CallerCalleeFunctionLowUsageBorderHover-Background, rgb(0, 223, 240));
        background-color: var(--CallerCalleeFunctionLowUsageBackgroundHover-Background, rgb(0, 214, 249));
    }

    .callerCalleeViewItem.callees .function.hotpath {
        border: 1px solid var(--CallerCalleeFunctionHighUsageBorder-Background, rgb(0, 203, 220));
        background-color: var(--CallerCalleeFunctionHighUsageBackground-Background, rgb(0, 214, 229));
    }

    .callerCalleeViewItem.callees .function.invokable.hotpath:focus {
        border: 1px solid var(--CallerCalleeFunctionHighUsageBorderHover-Background, rgb(0, 213, 230));
        background-color: var(--CallerCalleeFunctionHighUsageBackgroundHover-Background, rgb(0, 224, 239));
    }

    .callerCalleeViewItem.callees .function.invokable.hotpath:hover {
        border: 1px solid var(--CallerCalleeFunctionHighUsageBorderHover-Background, rgb(0, 223, 240));
        background-color: var(--CallerCalleeFunctionHighUsageBackgroundHover-Background, rgb(0, 214, 249));
    }