/* The first style is not yet used. */
.trs-bkgcolor-rules   { background-color: var(--bg-color-rule-lighter); }
.trs-bkgcolor-facts   { background-color: var(--bg-color-fact); }
.trs-bkgcolor-rclaims { background-color: var(--bg-color-rclaim); }
.trs-bkgcolor-deception-patterns { background-color: var(--bg-color-deception-pattern); }

/*---------- Rules page ---------- */
.trs-rules-left-container   { flex: .30; background-color: white; }
.trs-rules-middle-container { flex: .35; background-color: white; }
.trs-rules-right-container  { flex: .40; background-color: white; }
/* Right container width can differ from Factuals and Analysis pages. They are 40. */

/* .trs-rules-list-header {
    background-color: #ddddfb;
    border-bottom: 1px solid Gray;
} */
.trs-rules-list-header-column {
    float: right;
    padding: 9px 16px 0 0;
    font-size: 14px;
}
.trs-factuals-list-header-tags, .trs-factuals-list-header-cl, .trs-factuals-list-header-usecount{
    float: right;
    font-size: 14px;
}
.trs-factuals-list-header-tags {
    padding-right: 8px;
}
.trs-factuals-list-header-usecount {
    padding-right: 15px;
}
.trs-factuals-list-header-cl {
    padding-right: 30px;
}
.trs-toggle-button {
    margin: 8px 0 0 8px;
    padding: 1px 0 0 4px;
    width:  13px; 
    height: 15px;
    border: 1px solid #75b8ce;
    border-radius: 20px;
    font-size: 11px;
    text-align: left;
    cursor: default;
}
.trs-toggle-button:hover {
    background-color: darkseagreen;
}
.trs-toggle-button:active {
    margin: 6px -3px -1px 6px;
    padding: 2px 1px 1px 5px;
    background-color: rgb(97, 144, 97);
    width: 16px; height: 16px;
}
.trs-rulesfolders-list {
    flex: 1;
    height: 100%;
    background-color: white;
    overflow-x: auto;
}
.trs-rulesfolders-list:focus {
    outline: none;
}
.trs-treerow {
    cursor: pointer;
}
.trs-treerow div {
    margin: 0;
    padding: 0 0 0 6px;
    font-size: 14px;
    line-height: 16px;
    cursor: default;
    user-select: none;
    display: inline-block; /* So we can clone a compact element for drag and drop. */
    cursor: pointer;
}
.trs-treerow-record {
    line-height: 10px;
}
.trs-treerow-record div {
    padding: 0 2px 0px 10px;
    font-size: 13px;
    line-height: 16px;
}
.trs-treefolder-isnotleaf {
    margin-top: 0;
}
.trs-treefolder {
    top: -1px;
    position: relative;
    font-size: 14px;
    font-weight: bold;
}
/* .trs-treefolder::before {
    content: url(/images/app/RulesFolderContainer.png);
} */
.trs-treerow:not(.trs-treerow-selected) .trs-treefolder {
    color: #0000d0; /* Dark blue. */
}
.trs-treerow:not(.trs-treerow-selected):hover {
    background-color: #dff7f6; /* Very light sea green, same as factuals, make a constant. */
}
.trs-treerow-selected {
    color: white;
    background-color: #008881; /* Dark green. */
}
.trs-treefolder-dragtarget div {
    background-color: rgb(153, 255, 153); /* Neon light green. */
}
.trs-treerow:not(.trs-treerow-selected) .trs-treefolder-count-dim {
    color: #a2a2a2; /* Between gray and lightgray. */
    top: -1px;
    position: relative;
}
.trs-treerow-selected .trs-treefolder-count-dim {
    top: -1px;
    position: relative;
}
.trs-rulesfolders-description-box {
    padding: 0 4px 0 6px;
    height: 108px;
    transition: height 1s;
    border: none;
    border-top: 1px solid gray;
    background-color: GhostWhite;
    overflow-x: auto;
    resize: none;
    font-family: var(--font-sans-serif);
    font-size: 14px;
    line-height: 18px;
}
.trs-rules-edit-description-title {
    padding: 5px;
    border-bottom: 1px solid Gray;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    color: var(--rounded-border-color-standard);
}
/* For animation in hide and show folder description. */
.trs-rules-folder-title, .trs-rules-folder-description, .trs-folder-image-panel {
    transition: opacity 1s;
}
.trs-rules-folder-title {
    margin: 6px 0 4px 0;
    text-align: center;
    font-size: 19px;
    /* color: var(--rounded-border-color-standard); */
}
/* Bug fix for tiny mce. The class is incorrectly styled in Edit Folder Description. */
.trs-factuals-fact-editor-container .mce-panel {
    border-width: 0px;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
}
/* Modal dialog */
.trs-tree-modal-foldername {
    margin: 20px auto 20px auto;
    display: block;
    width: 300px;
    font-size: 15px;
}
/* ---------- Reusables superclass  ---------- */
.trs-reusables-page {
    display: flex;
    margin: 0; 
    max-width:  none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
.trs-reusables-page li {
    margin: 15px 0 15px 0;
}
/* ---------- Factuals page  ---------- */
/* .trs-factuals-left-container   { flex: var(--analysis-panel-flex-1); }
.trs-factuals-middle-container { flex: var(--analysis-panel-flex-2); }
.trs-factuals-right-container  { flex: var(--analysis-panel-flex-3); } */

.trs-factuals-left-container   { flex: 35; }
.trs-factuals-middle-container { flex: 40; }
.trs-factuals-right-container  { flex: 35; }

.trs-factuals-middle-container, .trs-factuals-right-container {
    background-color: white;
}
.trs-factuals-middle-container {
    display: flex;
    flex-direction: column;
}
.trs-factuals-list {
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.trs-factuals-fact-editor-container {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.trs-rnodes-factualuses-container, .trs-rnodes-factTL-container {
    height: 100%;
}
.trs-rnodes-factuals-map .trs-arg-map-title {
    font-size: 20px;
}
.trs-factuals-rclaims-item {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background-color: white;
}
.trs-factuals-list-impact-info {
    box-sizing: border-box;
    margin: 10px;
    padding: 0 7px 5px 7px;
    border: solid 1px gray;
    border-radius: 10px;
    background-color: antiquewhite;
}
/* ----- Patterns info box with accordian ----- */
.trs-factuals-list-impact-info p {
    margin: 5px 0;
    line-height: 1.45em;
}
.accordian {
    height: 0px;
    transition: height 1s ease-out;
    overflow: hidden;    
}
.accordian-closed {
    padding: 0;
    margin: 0;
    border: none;
}
/* ----- Fact TL Editor ----- */
.trs-rnodes-factTL-container {
    display: flex;
    flex-direction: column;
    background-color: rgb(236, 239, 255);
}
.trs-rnodes-factTL-decisiontree {
    position: relative;
    height: 255px;
    font-family: var(--font-sans-serif);
    /* border-bottom: 1px solid LightGray;  */
    overflow: hidden;
}
.trs-rnodes-factTL-label, .trs-rnodes-factTL-question, .trs-rnodes-factTL-boxsquarecorners {
    position: absolute;
    font-size: 10px;
}
.trs-rnodes-factTL-question, .trs-rnodes-factTL-boxsquarecorners {
    padding: 2px 2px 2px 4px;
    background-color: white;
    border: 1px solid gray;
}
.trs-rnodes-factTL-question {
    /* line-height: 1.4em; */
    border-radius: 5px;
}
.trs-rnodes-factTL-question-selected {
    box-shadow: 0 1px 10px #2c41ff;
    border: 2px solid rgb(47, 41, 134);
}
.trs-rnodes-factTL-connectionbutton {
    position: absolute;
    padding: 0px 2px 2px 2px;
    margin: 0;
    font-size: 10px;
    line-height: 10px;
}
.trs-rnodes-factTL-connectionbutton:active {
    margin: -1px -1px 0 0;
    padding: 1px 3px 3px 3px;
}
.trs-rnodes-factTL-tabpanel {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 431px;
    margin: 0 auto;
}
/* ----- Factuals List Header and Filter ----- */
.trs-factuals-list-header {
    border-bottom: 1px solid Gray;
    background-color: var(--bg-color-title-verylightgray);
}
/* .trs-factuals-list-header:last-child {
    margin-bottom: 5px;
} */
.trs-factuals-list-header-title {
    padding: 2px;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
}
.trs-factuals-list-search-input {
    width: 170px;
    font-size: 13px;
    letter-spacing: .75px;
    padding-left: 2px;
}
.trs-factuals-list-header-filter-options form {
    padding-bottom: 4px;
}
.trs-factuals-list-header-row-search, .trs-factuals-list-header-row-radio, .trs-factuals-list-header-row-tagcheckboxes {
    padding: 1px 0 1px 10px;
    font-size: 12px;
}
.trs-factuals-list-header-row-radio label {
    margin-right: 5px;
}
.trs-factuals-list-header-row-tagcheckboxes label {
    margin-right: 5px;
    display: inline-block;
}
.trs-factuals-list-search-icon {
    display: inline-block;
}
/* Search highlight */
.trs-search-highlight-1, .trs-search-highlight-2, .trs-search-highlight-3, .trs-search-highlight-4 {
    border: 1px solid gray; 
    color: black;
}
.trs-search-highlight-1 { background-color: yellow; }
.trs-search-highlight-2 { background-color: rgb(153, 255, 153); } /* Bright light green. */
.trs-search-highlight-3 { background-color: rgb(160, 255, 255); } /* Bright light blue. */
.trs-search-highlight-4 { background-color: rgb(255, 153, 153); } /* Light red. */

.trs-factuals-list-item-current-fact .trs-search-highlight-1, 
    .trs-factuals-list-item-current-rclaim .trs-search-highlight-1,
.trs-factuals-list-item-current-fact .trs-search-highlight-2, 
    .trs-factuals-list-item-current-rclaim .trs-search-highlight-2, 
.trs-factuals-list-item-current-fact .trs-search-highlight-3, 
    .trs-factuals-list-item-current-rclaim .trs-search-highlight-3, 
.trs-factuals-list-item-current-fact .trs-search-highlight-4, 
    .trs-factuals-list-item-current-rclaim .trs-search-highlight-4 
    {
    color: black;
}
.trs-search-highlight-emphasize {
    border: 2px solid black;
    background-color: aquamarine;
}
/* ----- Factuals list ----- */
.trs-factuals-list-items {
    flex: 1;
    height: auto;
    overflow-y: scroll;
}
.trs-factuals-list-items:focus {
    outline: none;
}
.trs-factuals-list-item-current-fact, .trs-factuals-list-item-current-rclaim {
    color: white;
}
.trs-factuals-list-item-current-fact .trs-articles-panel-article-row-title {
    background-color: LightSeaGreen;
    /* border-bottom: 1px solid lightseagreen; */
}
.trs-factuals-list-item-current-rclaim .trs-articles-panel-article-row-title {
    background-color: var(--bg-color-menu-selected);
    /* border-bottom: 1px solid var(--bg-color-rclaim); */
}
/* ----- Other ----- */
.trs-folder-image {
    margin: 10px auto;
    max-width: 100%;
    max-height: calc(100% - 52px); /* Adjust for close button. */
}
.trs-factuals-buttonsmessage {
    margin: 3px 10px;
    width: 270px;
    font-size: 13px;
}
.trs-rnodes-factuals-map {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background-color: rgb(236, 239, 255);
}
/* ---------- Old work with rnodes page ---------- */
.trs-rnodes-page {
    display: flex;
    margin: 10px auto;
    max-width: 1200px;
}
.trs-rnodes-list, .trs-rnodes-item {
    height: calc(100vh - 70px);
    margin: 7px;
    border: 5px solid var(--bg-color-panel-section-title);
    background-color: white;
    /* float: left; */
}
/* ----- The list of items on the left ----- */
.trs-rnodes-list {
    flex: .45;
    display: flex;
    flex-direction: column;

    margin-right: 0;
    border-top-left-radius: 40px;
    border-right: 1px solid #aaaaaa; /* Result is 3px wide center vertical line. */
}
.trs-rnodes-list-header {
    padding: 5px;
    border-top-left-radius: 36px; /* To fit with container radius of 40px. */
    border-bottom: 1px solid Gray;
    text-align: center;
}
.trs-rnodes-list-header-title {
    font-size: 20px;
    font-weight: bold;
}
.trs-rnodes-list-header-subtitle {
    margin-top: 3px;
    font-size: 13px;
}
.trs-rnodes-list-items {
    flex: 1;
    overflow-x: auto;
}
.trs-rnodes-list-items:focus {
    outline: none;
}
.trs-rnodes-list-isundergoingedit {
    font-weight: bold;
}
.trs-rnodes-item-undergoingedit, .trs-factuals-item-undergoingedit {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 45%;
    display: none;

    border: 3px solid gray;
    /* border-radius: 30px; */
    padding: 10px 15px;
    color: gray;
    background-color: ghostwhite;
    opacity: .5;

    font-size: 32px;
    font-weight: bold;
    text-align: center;
}
.trs-rnodes-buttons-container {
    display: flex;
    justify-content: center;
    background-color: GhostWhite;
    border-top: 1px solid Gray;
}
/* ----- The item on the right ----- */
.trs-rnodes-item {
    margin-left: 0;
    flex: .55;
    
    border-top-right-radius: 40px;
    border-left: 2px solid #aaaaaa;
    overflow: hidden;
}
.trs-rnodes-item-description-container {
    display: flex;
    /* flex-direction: column; */
    position: relative;
    height: 100%;
    background-color: GhostWhite;
}
.trs-rnodes-item-description-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.trs-rnodes-item-description-detail h3 {
    margin: 30px 0 0 0;
}
.trs-rnodes-item-description-title, .trs-rnodes-item-cl, .trs-factuals-item-cl {
    padding: 5px 0 8px 0;
    margin: 5px 0 2px 10px;
    color: var(--bg-color-panel-section-title);
    font-size: 19px;
    font-weight: bold;
    line-height: 17px;
}
.trs-rnodes-item-description-title {
    text-align: center;
    padding: 3px 0 6px 0;
}
.trs-rnodes-item-description-subtitle {
    margin-top: -5px;
    padding: 0 30px 5px 0;
    font-size: 13px;
    text-align: center;
}
.trs-rnodes-item p { /* Same as info panel. */
    margin: 0 10px 10px 10px;
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 22px;  
}
.trs-rnodes-item-cl, .trs-factuals-item-cl {
    position: absolute;
    right: 30px;
    font-weight: normal;
}
/* ----- Same as mce container ----- */
.trs-rnodes-item-description, .trs-factuals-item-description {
    flex: 1; /* Grow vertically to take up all available space. */
    padding: 5px 10px 20px 10px;
    overflow-x: auto;
    border-top: 1px solid gray;
    background-color: white;
    word-break: break-word;
}
.trs-rnodes-item-description h1, .trs-factuals-item-description h1, 
    .trs-rnodes-item-description p, .trs-factuals-item-description p,
    .trs-rnodes-item-description blockquote, .trs-factuals-item-description blockquote {
    font-family: var(--font-serif);
}
.trs-rnodes-item-description h1, .trs-factuals-item-description h1 {
    font-weight: 700;
    margin: 10px 0 10px 0;
}
/* .trs-rnodes-item-description h2, .trs-factuals-item-description h2 {
    margin: 35px 0 -7px 0;
    font-family: var(--font-sans-serif);
    font-size: 1.5em;
} */
.trs-rnodes-item-description p, .trs-factuals-item-description p {
    margin: 15px 0 15px 0; /* Same as mce container. */
}
.trs-rnodes-item-description blockquote, .trs-factuals-item-description blockquote {
    font-style: italic;
    line-height: 22px;
    margin: 15px 30px;
}
.trs-rnodes-item-description img, .trs-factuals-item-description img {
    margin: 5px;
    max-width: 100%;
    height: auto;
}
/* Override the above for the dial images. This cuplicates css in Trs Editor line 307. */
.trs-dial-container img {
    margin: 0;
}
/* ----- End same ----- */
.trs-rnodes-selected-node-message1, .trs-rnodes-selected-node-message2,
    .trs-factuals-selected-node-message1, .trs-factuals-selected-node-message2 {
    padding: 5px 10px 0 12px;
    max-height: 49px; /* Holds 3 lines of text. */
    font-size: 13px;
    overflow: scroll;
    overflow-x: auto;
    overflow-y: auto;
    background-color: GhostWhite;
}
.trs-rnodes-selected-node-inline {
    color: var(--bg-color-panel-section-title);
    font-weight: bold;
}
/* ----- Edit a rule or fact ----- */
.trs-rnodes-item-editor-container {
    display: none;
    /* display: flex; */
    flex-direction: column;
    position: relative;
    height: 100%;
}
.trs-rnodes-item-editor-container, .trs-rnodes-item-editor-container .mce-toolbar {
    background-color: GhostWhite;
}
.trs-rnodes-item-editor-summary, 
    .trs-rnodes-item-editor-description, .trs-factuals-item-editor-summary,
    .trs-factuals-item-editor-cl-label, .trs-admin-users-edit-ruletype-label {
    margin: 2px 0 4px 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--bg-color-panel-section-title);
}
/* .trs-factuals-item-editor-cl {
    margin-left: -3px;
} */
.trs-rnodes-item-editor-description {
    margin: 5px 0 2px 10px;
}
.trs-rnodes-item-editor-summary-textarea, .trs-factuals-item-editor-summary-textarea {
    width: 97%;
    margin-bottom: 2px;
    resize: none;
    font-size: 17px;
    font-family: var(--font-serif);
    line-height: 22px;
}
.trs-rnodes-item-editor-summary-container {
    flex: 1;
    padding: 0 10px;
    /* display: inline-block; */
}
.trs-rnodes-item-editor-cl-container {
    width: 100px;
    float: right;
}
.trs-factuals-item-editor-cl-label {
    margin-left: 10px;
    display: inline-block; 
}
.trs-factuals-item-editor-cl-value {
    margin-bottom: 10px;
    width: 50px; 
    display: inline-block; 
    text-align: center;
}
/* ----- Edit a rule - Rule type ----- */
.trs-admin-users-edit-ruletype-label {
    margin: 5px 5px 3px 10px;
    display: inline-block; 
}
.trs-admin-users-edit-ruletype-select {
    width: 300px; 
    display: inline-block; 
    font-size: 15px;
}
/* ----- Cascade of flex needed to set editor to full height. ----- */
.trs-texteditor-wrapper {
    flex: 1;
    display: flex;
}
/* All uses of tiny mce need a unique class added here. */
/* This group of classes can be deleted after testing. ===== */
/* .trs-rnodes-item-rules-editor-wrapper, 
.trs-rnodes-item-facts-editor-wrapper, 
.trs-rnodes-item-factuals-editor-wrapper, 
.trs-rnodes-item-folder-description-editor-wrapper,

.trs-sourcecr-tabtexteditor-articletitles-wrapper,
.trs-sourcecr-tabtexteditor-articles-wrapper,
.trs-sourcecr-tabtexteditor-comments-wrapper,

.trs-sourcecr-tabtexteditor-articletitles2-wrapper,
.trs-sourcecr-tabtexteditor-articles2-wrapper,
.trs-sourcecr-tabtexteditor-comments2-wrapper,

.trs-patterns-folder-description-editor-wrapper
{ */
    /* flex: 1;
    display: flex; */
    /* flex-direction: column;
    overflow: hidden;
    background-color: antiquewhite; */
/* } */
/* ----- End cascade ----- */
.trs-rnodes-item-editor-buttons-container {
    display: flex;
    justify-content: center;
    border-top: 1px solid lightgray;
}
/* .trs-rnodes-item-editor-buttons-container button {
    margin: 12px 10px;
} */
/* ----- RClaims page ----- */
.trs-rnodes-page.trs-rnodes-page-rclaims {
    margin: 0; 
    max-width:  none;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
.trs-rnodes-rclaims-list, .trs-rnodes-rclaims-item {
    background-color: white;
    display: flex;
    flex-direction: column;
}
.trs-rnodes-page-rclaims .trs-rnodes-list-header {
    border-top-left-radius: 0;
    /* display: flex;
    flex-direction: column; */
}
.trs-rnodes-rclaims-list { flex: var(--analysis-panel-flex-1); }
.trs-rnodes-rclaims-item { flex: var(--analysis-panel-flex-2); }
.trs-rnodes-rclaims-map  { flex: var(--analysis-panel-flex-3); }

.trs-rnodes-list-items.trs-rnodes-rclaims-list-items {
    overflow-x: auto;
    flex: 1;
    height: auto;
}
.trs-rnodes-item.trs-rnodes-rclaims-item {
    position: relative;
    margin: 0;
    width: auto;
    border: none;
    border-radius: 0;
    height: auto;
}
.trs-splitter {
    width: 2px;
    background-color: LightGray;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    cursor: e-resize;
}
.trs-rnodes-page-rclaims .trs-rnodes-item-description-title {
    margin-right: 30px;
}
.trs-rnodes-page-rclaims .trs-rnodes-item-description {
    border-bottom: none;
}
.trs-rnodes-rclaims-map {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background-color: rgb(236, 239, 255);
}
.trs-rnodes-rclaims-map .trs-arg-map-title {
    font-size: 20px;
}
.trs-rnodes-rclaims-nodesheet-wrapper {
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.trs-rnodes-rclaims-nodesheet {
    height: 100%;
    /* Bkg color for testing. ============= */
    /* background-color: GhostWhite;  */
}
.trs-rnodes-rclaims-map-buttonscontainer {
    border-top: 1px solid gray;
    background-color: white;
}
/* -------------------- Set Fact TL Using source credibilty rating tab ------------------ */
.trs-sourceca-lowertabset-contentcontainer {
    border: solid 1px gray;
    overflow-y: unset;
    font-family: var(--font-sans-serif);
}
.trs-sourceca-lowertabset-overallcontainer{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.trs-sourceca-listrow-sourceselect, 
.trs-sourceca-listrow-sourcecr, 
.trs-sourceca-listrow-trscaleselect,
.trs-sourceca-listrow-trlevelsselect,
.trs-sourceca-listrow-trvariance {
    display: inline-block;
    font-size: 11px;
}
.trs-sourceca-listrow-sourcecr, .trs-sourceca-listrow-trvariance {
    text-align: center;
    background-color: var(--bg-color-noteditable);
    border: solid 1px var(--border-color-matchselect);
}
.trs-sourceca-listrow-sourceselect   { width: 137px; margin-left: 3px; }
.trs-sourceca-listrow-sourcecr       { width: 40px; margin-left: 10px; }
.trs-sourceca-listrow-trscaleselect  { width: 40px; margin-left: 15px; }
.trs-sourceca-listrow-trlevelsselect { width: 55px; margin-left: 15px; }
.trs-sourceca-listrow-trvariance     { width: 47px; margin-left: 19px; }

/* ------------------- Set Fact TL Using Marks tab --------------------- */
.trs-factPOD-tab-container {
    display: flex; 
    flex-direction: column;
    width: 95%; 
    height: 100%; 
    margin: 10px auto; 
}
.trs-factPOD-calc-results-box {
    margin: 10px 0;
    padding: 5px 7px;
    min-height: 170px;
    border: solid 1px gray;
    background-color: ghostwhite;
}
.trs-factPOD-calc-results-box p {
    font-size: 13px;
    font-family: var(--font-sans-serif);
    line-height: 1.1;
}