a {
    cursor: pointer;
}

.rlabs-unselectable {
    user-select: none;
}

/* ID+class selectors for higher specificity than just the ID selectors, which are used for setting display to table */
#rlabs-graph.rlabs-hidden-graph-view,
#rlabs-tree-graph.rlabs-hidden-graph-view {
    display: none;
}

/**
* Common styles
**/
.rlabs-nowrap {
    white-space: nowrap;
}

.rlabs-attribute-no-value {
    color: var(--ds-text, #999);
}

.rlabs-table-footer-delimiter {
    margin: 0 10px;
    border-left: 1px solid var(--ds-border-accent-gray, #ccc);
}

ul.rlabs-values {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

ul.rlabs-values > li {
    white-space: nowrap;
    display: block;
}

ul.rlabs-values.inline-mode > li {
    white-space: normal;
    display: inline-block;
}

ul.rlabs-values.inline-mode > li::after {
    content: '\00a0\00a0';
}

ul.rlabs-values.inline-mode > li:last-child::after {
    content: '';
}

/* Graph */
.rlabs-module-graph {
    position: relative;
    height: 600px;
    width: 100%;
    background: var(--ds-surface, #fff);
    top: 0;
    left: 0;
}

.rlabs-module-graph.rlabs-fullscreen {
    height: 100%;
    position: fixed;
}

.rlabs-graph-canvas {
    width: calc(100% - 400px);
    height: 100%;
    position: absolute;
    left: 0;
}

.rlabs-graph-canvas svg {
    pointer-events: all;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-touch-callout: none;
    user-select: none;
}

.rlabs-graph-sidebar {
    width: 402px;
    height: 100%;
    position: absolute;
    right: 0;
    background: var(--ds-surface, #fff);
}

.rlabs-graph-sidebar-navigator {
    width: 40px;
    height: 100%;
    position: absolute;
    background-color: var(--ds-background-input, #f5f5f5);
    border-left: 1px solid var(--ds-border, #ccc);
    border-right: 1px solid var(--ds-border, #ccc);
}

.rlabs-graph-sidebar-navigator .rlabs-option {
    margin: 4px;
    width: calc(100% - 8px);
    padding: 0;
    display: flex;
}

.rlabs-graph-sidebar-content {
    width: calc(100% - 42px);
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    left: 42px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    position: absolute;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket-header {
    background: var(--ds-background-input, #f5f5f5);
    border-bottom: 1px solid var(--ds-border, #ccc);
    box-sizing: border-box;
    padding: 15px 20px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket-content {
    flex: 1;
    width: 100%;
    padding: 20px;
    padding-top: 0;
    box-sizing: border-box;
    overflow: auto;
    position: relative;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: fit-content;
    min-width: 320px; /* We have to apply this since fit-content makes it too thin when the list of objects in the object graph dialog is collapsed */
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li {
    display: block;
    padding-top: 20px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-object {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #ddd);
    border-radius: 3px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-heading {
    display: flex;
    border-radius: 3px 3px 0 0;
    height: 50px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-heading .rlabs-checkbox-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid var(--ds-border, #ddd);
    width: 50px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-heading .rlabs-toggle-parent {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-width: 0; /* to prevent overflowing flex container */
    padding: 4px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-heading .rlabs-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    height: auto;
    max-width: 100%;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-heading .rlabs-object-avatar {
    vertical-align: middle;
    width: 32px;
    margin-right: 10px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-heading .rlabs-object-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-details {
    padding: 15px;
    padding-bottom: 5px;
    border-top: 1px solid var(--ds-border, #ddd);
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-details > table > tbody > tr {
    border: 0;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-details > table > tbody > tr > th,
.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-details > table > tbody > tr > td {
    vertical-align: top;
    border: 0;
    padding: 0;
    padding-bottom: 10px;
}

.rlabs-graph-sidebar-content .rlabs-objects-bucket ul.rlabs-object-list > li .rlabs-details > table > tbody > tr > th {
    padding-right: 15px;
}

.rlabs-graph-sidebar-content
    .rlabs-objects-bucket
    ul.rlabs-object-list
    > li
    .rlabs-details
    > table
    td
    ul.rlabs-values
    > li {
    text-overflow: ellipsis;
    width: 190px;
    display: inline-block;
    overflow: hidden;
}

/* Graph - Tree Layout */

.rlabs-tree-graph-node {
    cursor: pointer;
}

.rlabs-tree-graph-node-inner {
    transition: transform 300ms 100ms;
}

.rlabs-tree-graph-node-inner.hover,
.rlabs-tree-graph-node-inner:hover {
    transform: scale(1.2);
    transition: transform 300ms;
}

.rlabs-tree-graph-object-node circle {
    stroke: var(--ds-border-selected, steelblue);
    stroke-width: 0;
    stroke-dasharray: 10, 6;
    fill: var(--ds-surface-overlay, #ededed);
}

.rlabs-tree-graph-reference-object-type-node rect {
    stroke: var(--ds-border-selected, steelblue);
    stroke-width: 0;
    stroke-dasharray: 10, 6;
    fill: var(--ds-surface-overlay, #ededed);
}

.rlabs-tree-graph-node-text {
    font-size: 14px;
    fill: var(--ds-text, #000);
    text-shadow: var(--ds-surface, white) -1px 0, var(--ds-surface, white) 0 1px, var(--ds-surface, white) 1px 0,
        var(--ds-surface, white) 0 -1px;
}

.rlabs-tree-graph-link-stroke {
    fill: none;
    stroke-width: 3px;
}

.rlabs-tree-graph-link-text-label {
    pointer-events: none;
    font-size: 14px;
    fill: var(--ds-text, #000);
    text-shadow: var(--ds-surface, white) -1px 0, var(--ds-surface, white) 0 1px, var(--ds-surface, white) 1px 0,
        var(--ds-surface, white) 0 -1px;
    transition: opacity 0ms 500ms, fill 300ms;
}

.rlabs-tree-graph-node-image {
    opacity: 1;
}

.bidi-replacement {
    /* // TO-DO: DT */
    color: var(--ds-text, #7f5f01);

    /* // TO-DO: DT */
    background-color: var(--ds-background-input, #fff0b3); /* @ak-color-Y75 */
    unicode-bidi: isolate;
}

.bidi-replacement::before {
    unicode-bidi: isolate;
    content: attr(data-charcode);
}

.rlabs-asset-hr {
    width: 600px;
    margin: 20px 0;
    border-color: var(--ds-border);
}