.trs-map-panel {
    position: relative;
}
.trs-node-sheet {
    /* background-color: ghostwhite; */
    height: 100%;
    height: calc(100% - 3px); /* Adjust for unknown to not overflow at 100% zoom. */
}
.trs-node-sheet:focus {
    outline: none;
}
.trs-arrow-sheet {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* position: absolute; */
}
/* ----- The fixed items on the map. */
.trs-arg-map-title {
    position: absolute;
    top: 5px;
    color: Gray;
    font-size: 24px;    
    /* Center horizontally */
    left: 50%;
    /* -webkit-transform: translateX(-50%); */
    transform: translateX(-50%)
}
.trs-arg-map-center-message1, .trs-arg-map-center-message2 {
    position: absolute;
    /* Center horizontally */
    left: 50%;
    transform: translateX(-50%);  
    /* Other */  
    transition: opacity 1s;
    color: Gray;
    line-height: 1.4;
}
.trs-arg-map-center-message1 { /* 'Drag and drop the claim' */
    /* Center vertically */
    top: 30%;
    /* transform: translateY(-50%); */
    /* Other */
    width: 340px;
    font-size: 16px;
}
.trs-arg-map-center-message2 { /* Quote */
    /* Center vertically */
    top: 70%;
    /* transform: translateY(-50%); */
    /* Other */
    width: 500px;
    font-size: 28px;
    text-align: center;
    color: lightskyblue;
}
.trs-map-confidence-level-text, .trs-map-add-replace-mode, .trs-map-status { /* These are from left to right. */
    position: absolute;
    bottom: 3px; 
    font-size: 14px;
    color: Gray;
}
.trs-map-confidence-level-text, .trs-map-confidence-level-number  {
    left: 10px;
    transition: opacity 1s;
}
.trs-map-confidence-level-number { /* The big blue confidence level number. Easy to see at a glance. */
    position: absolute;
    bottom: 25px; 
    font-size: 40px;
    color: rgb(76, 66, 214); /* Medium dark blue, less so than DarkBlue. */
}
.trs-map-add-replace-mode { /* Centered, using a hack. */
    left: 50%;
    transform: translateX(-50%); 
}
.trs-map-status {
    right: 13px;
}
/* ---------- Map Nodes ------------------------------------------------------------ */
.trs-node {
    position: absolute;
    border-radius: 5px; /* No border, causes a slight jump when selected. */
    box-shadow: 3px 3px 8px #9c9c9c;
    cursor: default;
}
.trs-node:hover { 
    box-shadow: 0px 1px 10px #5f6fff; /* Half blue */
}
.trs-node-selected {
    /* box-shadow: 0 0 15px #5870be; */
    box-shadow: 0 1px 10px #2c41ff;
    border: 2px solid rgb(47, 41, 134);
}
.trs-node-drop-highlight { /* For dragover event */
    border: 1px solid blue;
    box-shadow: 0 0 15px #1e48c7;
}
.trs-node-header {
    position: relative;
    border: 1px solid LightGray;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    padding: 2px 5px;
}
.trs-node-weight, .trs-node-name, .trs-node-cl, .trs-node-body-text, .trs-node-body-database {
    user-select: none; /* Prevent selection of text with mouse drag. */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.trs-node-name {
    text-align: center;
    font-weight: bold;
}
.trs-node-name-hidden { /* To allow determining text length of node-name. */
    position: absolute;
    visibility: hidden;
    font-weight: bold;
}
/* node-weight and node-cl are somewhat mirror opposites. Weight is on left, cl is on right */
.trs-node-weight, .trs-node-cl {
    position: absolute;
}
.trs-node-weight { 
    top: 4px;
    left:  3px; 
    /* font-stretch: condensed; Not supported in any browsers yet. */
    transform: scaleX(.9);
    transform-origin: left;
}       
.trs-node-cl     { 
    top: 3px;
    right: 5px; 
}
.trs-node-cl-claim {
    top: 2px;
    /* font-weight: bold; */
}
.trs-node-body-text, .trs-node-body-database {
    text-align: left;
    padding: 1px 5px 3px 5px;
}
.trs-node-body-text {
    background-color: white;
    border: 1px solid LightGray;
}
.trs-node-body-database {
    background-color: rgb(240, 240, 240);
    border: 1px solid LightGray;
    border-top: none;
}
/* Nodes WITH database text: rule, fact, and rclaim. */
.trs-node-is-rule .trs-node-body-database, .trs-node-is-fact .trs-node-body-database, .trs-node-is-rclaim .trs-node-body-database { 
    border-radius: 0 0 5px 5px;
}
/* Nodes with NO database text: claim and intcon */
.trs-node-is-claim .trs-node-body-text, .trs-node-is-intcon .trs-node-body-text { 
    border-radius: 0 0 5px 5px; 
}
.trs-node-is-claim .trs-node-body-database, .trs-node-is-intcon .trs-node-body-database { 
    display: none;
}
/* Other */
.trs-node-valid-target-indicator { 
    position: absolute;
    right:  0;
    bottom: 0;
    padding: 1px 4px 1px 3px;
    border-top-left-radius: 8px;
    color: white;
    background-color: DeepSkyBlue;
    font-size: 10px;
}
/* Node font sizes */
.trs-node-cl        { font-size: 14px; }
.trs-node-name, .trs-node-name-hidden, .trs-node-cl-claim { font-size: 16px; }
.trs-node-name-claim { font-size: 18px; letter-spacing: .6px; }
.trs-node-weight    { font-size: 12px; }
.trs-node-body-text, .trs-node-body-database { font-size: 14px; }

/* Z indexes */
.trs-node           { z-index: 1;  }  /* So arrows are behind nodes. */
.trs-node-selected  { z-index: 10; }  /* So in front of all other nodes, must be after above class. */

/* Node colors. See PtrTextEditor.css for variable declarations. */
.trs-node-is-claim  { background-color: var(--bg-color-claim); }
.trs-node-is-rule   { background-color: var(--bg-color-rule-lighter); } 
.trs-node-is-intcon { background-color: var(--bg-color-intcon); } 
.trs-node-is-fact   { background-color: var(--bg-color-fact); } 
.trs-node-is-rclaim { background-color: var(--bg-color-rclaim); } 

/* ----------- For resizing nodes with the mouse. Concept from https://jqueryui.com/resizable/. */
.trs-node-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
    cursor: e-resize;
    width: 7px;
    top: 0;
    height: 100%;
    /* background-color: pink; /* For testing. */
}
.trs-node-resizable-handle-left {
    left: 0;
}
.trs-node-resizable-handle-right {
    right: 0;
}
/* ========== Node Animation ==========  From https://github.com/daneden/animate.css */
/* --- Transitions ----- */
.trs-node-start-delete {
    transition: opacity 1s linear;
    opacity:0;
}
/* .trs-arrow-sheet {
    transition: visibility 2s; 
} */
.trs-node-move {
    transition: top  1s;
    transition: left 1s;
}
.trs-vertical-move-node {
    transition: top  1s;
}
/* --- Animations ----- */
.trs-animated-node {
    animation-duration: 1s;
    animation-fill-mode: both;    
}
.trs-animated-arrow-out {
    animation-duration: .5s;
    animation-fill-mode: both;
}
.trs-animated-arrow-in {
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both;
}
.trs-fade-in { animation-name: trs-fadeIn; }
@keyframes                     trs-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.trs-fade-out { animation-name: trs-fadeOut; }
@keyframes                      trs-fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.trs-fade-in-left { animation-name: trs-fadeInLeft; }
@keyframes                          trs-fadeInLeft {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: none;
    }
}
.trs-fade-out-right {
    animation-name: trs-fade-out-right;
}
@keyframes trs-fade-out-right {
    from {
    opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}