.popup.knockout-debugger-panel
{
    cursor: default;
    user-select: none;
    max-width: 1000px;
    font-family: monospace;
}

.popup.knockout-debugger-panel .debugger-value-line:hover
{
    background: #eee;
}

.popup.knockout-debugger-panel .debugger-value-line
{
    display: flex;
    height: 16px;
}

.popup.knockout-debugger-panel .expand-button-container
{
    width: 30px;
    flex: none;
}

.popup.knockout-debugger-panel button.expand
{
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='50' viewBox='0 0 34 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8188 47.6309L31.8948 29.6057C32.5395 29.0241 33.0549 28.3136 33.4077 27.5202C33.7605 26.7269 33.9428 25.8683 33.9428 25C33.9428 24.1317 33.7605 23.2731 33.4077 22.4797C33.0549 21.6863 32.5395 20.9759 31.8948 20.3943L10.8188 2.36911C10.2139 1.86431 9.51559 1.48359 8.76363 1.24868C8.01166 1.01377 7.22079 0.929265 6.43617 1C5.65154 1.07073 4.88854 1.29532 4.19071 1.66093C3.49289 2.02655 2.87391 2.52603 2.36911 3.13086C1.86432 3.73568 1.48359 4.43402 1.24868 5.18598C1.01377 5.93795 0.929265 6.72882 1 7.51344C1.07073 8.29807 1.29532 9.06107 1.66093 9.7589C2.02655 10.4567 2.52603 11.0757 3.13086 11.5805L18.6754 25L3.13086 38.4196C2.52603 38.9244 2.02655 39.5433 1.66094 40.2412C1.29532 40.939 1.07074 41.702 1 42.4866C0.929267 43.2712 1.01377 44.0621 1.24868 44.8141C1.48359 45.566 1.86432 46.2644 2.36911 46.8692C2.8739 47.474 3.49288 47.9735 4.19071 48.3391C4.88854 48.7047 5.65154 48.9293 6.43616 49.0001C7.22079 49.0708 8.01166 48.9863 8.76363 48.7514C9.51559 48.5165 10.2139 48.1357 10.8188 47.6309Z' fill='black'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    width: 16px;
    height: 14px;
    opacity: 0.5;
    transition: transform ease-out 80ms;
    border-radius: 20px;
}

.popup.knockout-debugger-panel .key
{
    white-space: pre-wrap;
    flex: none;
}

.popup.knockout-debugger-panel .variable-type
{
    font-family: monospace;
    margin-left: 20px;
}

.popup.knockout-debugger-panel .value
{
    font-family: monospace;
    margin-left: 20px;
    white-space: nowrap;
}

.popup.knockout-debugger-panel .value:hover
{
    background: rgba(0,0,0,0.08);
}

.popup.knockout-debugger-panel .type-null .value
{
    color: #49c1ff;
}

.popup.knockout-debugger-panel .type-boolean .value
{
    color: #49c1ff;
}

.popup.knockout-debugger-panel .type-number .value
{
    color: #49c1ff;
    user-select: text;
}

.popup.knockout-debugger-panel .type-string .value
{
    color: #cc6c34;
    user-select: text;
}

.popup.knockout-debugger-panel .type-object .value
{
    color: #b0b0b0;
}

.popup.knockout-debugger-panel .type-array .value
{
    color: #c574d7;
}

.popup.knockout-debugger-panel .type-function .value
{
    color: #61b33f;
}

.popup.knockout-debugger-panel .type-custom .value
{
    color: #6d34cc;
}


.popup.knockout-debugger-panel .var-type-observable .key
{
    color: #cc6c34;
}

.popup.knockout-debugger-panel .var-type-computed .key
{
    color: #61b33f;
}


.popup.knockout-debugger-panel button.expand.expanded
{
    transform: rotate(45deg);
    color: #bbb;
}

.popup.knockout-debugger-panel .drag-bar
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    cursor: move;
    opacity: 0.3;
}

.popup.knockout-debugger-panel .drag-bar:hover
{
    background: #49c1ff;
}

.popup.knockout-debugger-panel .debug-identifier
{
    color: #a00;
    padding-left: 20px;
}

.popup.knockout-debugger-panel .knockout-debugger-context-menu
{
    position: absolute;
    top: 10px;
    right: 10px;
    color: #888;
    background: #fff;
    border-radius: 5px;
}

.popup.knockout-debugger-panel .knockout-debugger-context-menu:hover
{
    background: #eee;
}

.popup.knockout-debugger-panel .count
{
    width: 35px;
    color: #2a28a1;
    padding-right: 10px;
    flex: none;
    text-align: right;
    font-size: 12px;
}

.popup.knockout-debugger-panel .count.empty
{
    color: #ddd;
}

.popup.knockout-debugger-panel .breadcrumbs
{
    display: flex;
    margin-bottom: 10px;
    margin-right: 30px;
}

.popup.knockout-debugger-panel .breadcrumb
{
    padding: 3px 10px;
    border-radius: 6px;
}

.popup.knockout-debugger-panel .breadcrumb:hover
{
    background: #eee;
}

.popup.knockout-debugger-panel .breadcrumb.selected
{
    background: #49c1ff;
    color: #fff;
}