.note-detail-relation-map {
    height: 100%;
    overflow: hidden !important;
    padding-top: 10px;
}

.relation-map-wrapper {
    position: relative;
    height: 100%;
    outline: none; /* remove dotted outline on click */
}

.note-detail-relation-map .note-box {
    padding: 16px;
    position: absolute !important;
    background-color: var(--accented-background-color);
    color: var(--main-text-color);
    z-index: 4;
    border: 1px solid #666;
    box-shadow: 2px 2px 19px #999;
    border-radius: 8px;
    opacity: 0.8;
    font-size: 11px;
    width: auto;
    height: auto;
    max-width: 200px;
    min-width: 150px;
    max-height: 200px;
    overflow: hidden;
}

.note-detail-relation-map .note-box:hover {
    background-color: var(--more-accented-background-color);
}

.note-detail-relation-map .note-box .title {
    font-size: larger;
    font-weight: 600;
}

.note-detail-relation-map .connection-label.jtk-hover, .jtk-source-hover, .jtk-target-hover {
    background-color: var(--more-accented-background-color);
}

.note-detail-relation-map .connection-label {
    background-color: var(--accented-background-color);
    color: var(--main-text-color);
    opacity: 0.8;
    padding: 0.3em;
    border-radius: 0.5em;
    border: 1px solid #666;
    cursor: pointer;
}

.note-detail-relation-map .endpoint {
    position: absolute;
    bottom: 37%;
    right: 5px;
    width: 1em;
    height: 1em;
    background-color: #333;
    cursor: pointer;
    box-shadow: 0 0 2px black;
}

.note-detail-relation-map .endpoint:hover {
    box-shadow: 0 0 6px black;
}

.note-detail-relation-map .dragHover {
    border: 2px solid orange;
}

.note-detail-relation-map path, .note-detail-relation-map .jtk-endpoint { cursor:pointer; }

.note-detail-relation-map .ui-contextmenu {
    z-index: 100;
}

.note-detail-relation-map .floating-button {
    position: absolute !important;
    z-index: 100;
}