:root { 
    --bg-color-panel-section-title:  #3f88d0; /* Pastel blue*/ 
    --analysis-panel-flex-1: .23; 
    --analysis-panel-flex-2: .40; 
    --analysis-panel-flex-3: .37; 
}
#trs-database-text {
    display: none;
}
#trs-analysis-container {
    display: flex;
    height: 100%;
}
#trs-analysis-panel-1 { flex: var(--analysis-panel-flex-1); }
#trs-analysis-panel-2 { flex: var(--analysis-panel-flex-2); }
#trs-analysis-panel-3 { flex: var(--analysis-panel-flex-3); }

/* ----- The three panels: Multi-panel, text editor, argument map. ----- */
#trs-analysis-panel-1, #trs-analysis-panel-2, #trs-analysis-panel-3 {
    /* float: left; */
    /* height: 100%; */
    /* border-top:    1px solid gray; */
    /* border-bottom: 1px solid gray; */
    resize: none;
    overflow-x: auto;
    overflow-y: auto; 
}
#trs-analysis-panel-1, #trs-analysis-panel-2 {
    background-color: white;
}
/* Widths are 35 + 42 + 23 = 100. This is the initial state. */
/* #trs-analysis-panel-1 {
    width: calc(23%);
} */
#trs-analysis-panel-1 { 
    display: flex;
    flex-direction: column;
}
#trs-analysis-panel-2 {
    display: flex;
    flex-direction: column;

    /* For TinyMCE */
    overflow-x: hidden;
    overflow-y: hidden;
}
.trs-analysis-editor-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#trs-analysis-panel-3 {
    /* width: calc(42% - 9px); /* 9 = 8 for splitter widths plus 1 for extra space. */
    background-color: rgb(236, 239, 255); /* Pale blue, for argument map. */
}
#trs-analysis-splitter-1, #trs-analysis-splitter-2 {
    /* float: left; */
    /* height: 100%; */
    border:    1px solid gray;
    border-top: none;
    border-bottom: none;
    /* border-right:   1px solid gray; */
    width: 2px;
    background-color: LightGray;
    cursor: e-resize;
}
/* ----- Info panel ----- */
.trs-info-panel {
    /* flex: 1;
    display: flex;
    flex-direction: column; */
    position: relative;
}
.trs-info-panel-content{
    overflow-x: auto;
    flex: 1;
    word-break: break-word;
}
.trs-info-panel h1 {
    margin: 10px;
    font-size: 20px;
}
.trs-info-panel h2 {
    margin: 0; 
    padding: 5px 10px;
    border-bottom: 1px solid LightGray;
    font-size: 18px;
    text-align: center;
}
.trs-info-panel h3, .trs-rnodes-item h3 { /* Same as in Claim box. */
    margin: 6px 0 2px 10px;
    color: var(--bg-color-panel-section-title);
    font-size: 17px;
    line-height: 17px;
}
h2.trs-info-panel-subtitle { 
    font-size: 20px;
    color: Gray;
    justify-content: center;
}
.trs-info-panel p {
    margin: 0 10px 10px 10px;
    font-family: var(--font-serif);
    font-size: 15.5px;
    line-height: 1.4em;
}
p.trs-info-panel-summary { 
    padding: 5px 10px;
    background-color: rgb(240, 240, 240); /* Same as diagram. */
}
.trs-info-panel-non-database-node { 
    color: Gray;
    padding: 100px 50px;
}
.trs-info-panel-confidence-level { 
    position: absolute;
    right: 7px;
    top:  9px;
    font-size: 14px;
}
.trs-info-panel-empty, .trs-info-panel-truthstatement {
    padding: 100px 30px;
    color: gray;
}
.trs-info-panel-empty {
    text-align: center;
}
/* ----- Info panel, add article ----- */
.trs-info-panel-addarticle-container {
    padding: 20px 15px 10px 0;
}
.trs-info-panel-addarticle-container div { /* The title. */
    margin: 10px 0 20px 0;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.trs-info-panel-addarticle-container li, .trs-info-panel-addarticle-container p {
    font-size: 17px;
    line-height: 22px;
}
.trs-info-panel-addarticle-container p {
    padding-left: 10px;
}
/* ----- Rule calculation panel ----- */
#trs-calc-panel-titlecontainer {
    background-color: var(--bg-color-rule-lighter);
    border-bottom: 1px solid LightGray;
}
.trs-calc-panel-questionmark {
    margin-top: 50px;
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    color: LightGray;
}
.trs-calc-panel-titleline {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: var(--bg-color-panel-section-title);
}
.trs-calc-panel-subtitleline {
    margin: 2px 0 2px 0;
    font-size: 14px;
    text-align: center;
}
#trs-calc-panel-textcontainer {
    height: 400px;
    overflow-y: scroll;
}

#trs-calc-panel-graphdescription {
    margin-top: 0 0 10px 0;
    border: 1px solid LightGray;
    border-right: none;
    background-color: #f7f7f7; /* Very light gray, to contrast with graph background. */
}
#trs-calc-panel-graphdescription p {
    margin: 9px;
    font-family: var(--font-sans-serif);
    font-size: 12px;
}
.trs-calc-panel-insetgraph {
    float: right;
    /* margin: 5px 0 0 0; */
}
/* ----- Articles panel ----- */
.trs-articles-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.trs-articles-panel-articleslist, .trs-articles-panel-edit  {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.trs-articles-panel-list, .trs-info-panel {
    flex: 1;
    overflow-x: auto;
}
.trs-info-panel:focus, .trs-articles-panel:focus, .trs-map-panel:focus {
    outline: none;
}
.trs-articles-panel h2 {
    margin: 0;
    padding: 5px;
    /* border-top: 1px solid darkgreen; */
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    color: white;
    background-color: var(--bg-color-articles-header);
}
.trs-articles-panel-optionsbuttonbar {
    background-color: #f0f0ff;
}
.trs-articles-panel-optionsbuttonbar button { /* These are fairly small. */
    margin-right: -3px; /* To eliminate space between buttons. A hack. */
    padding: 2px 10px;
    font-size: 14px;
}
.trs-articles-panel-article-row-title, .trs-articles-panel-article-row-cl, 
        .trs-articles-panel-optionsbuttonbar div {
    padding: 3px 10px; 
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    cursor: default;    
}
.trs-articles-panel-article {
    display: flex;
    position: relative;
    border-bottom: 1px solid lightblue;
    /* user-select: none; */
}
.trs-articles-panel-current { 
    color: white;
    background-color: #008881; /* Darker light sea green to handle red box better. */
    border-bottom: 1px solid lightseagreen; /* To replace the current color. */
}
.trs-list-saving-animation { /* Offers an elegant simple animation to indicate the item is being saved. */
    /* background-color: white;  */
    color: black;
    /* transition: background-color .5s, color .5s; */
    background: white;
    transition: background-color .5s, .5s;
}
.trs-articles-panel-before-current {
    border-bottom: 1px solid lightseagreen; /* The row before the one selected. */
}
.trs-articles-panel-article-row-title {
    flex: 1;
    padding-left: 8px;
}
.trs-articles-panel-article:not(.trs-articles-panel-current):hover {
    background-color: #eaeaea; /* Very light gray. */
}
.trs-articles-panel-article-row-cl { /* Container for class below. */
    width: 87px;
    /* text-align: right; */
    position: relative;
}
.trs-articles-panel-article-row-tags, .trs-articles-panel-article-row-cl-percent, 
.trs-articles-panel-article-row-usecount {
    position: absolute;
    bottom: 50%; /* Note trick for vertical center. */
    transform: translateY(50%);
}
.trs-articles-panel-article-row-tags {
    left: 4px;
}
.trs-articles-panel-article-row-usecount {
    right: 53px;
}
.trs-articles-panel-article-row-cl-percent { 
    right: 5px;
}
.trs-articles-panel-optionsbuttonbar div { 
    float: right;
    padding: 5px;
    padding: 5px 14px 0 0; 
    /* letter-spacing: 2px; */
}
/* ----- Articles edit panel ----- */
.trs-articles-panel-edit-title {
    padding: 4px 0;
    font-size: 19px;
    /* font-weight: bold; */
    text-align: center;
    color: white;
    background-color: var(--bg-color-articles-header);
}
.trs-info-header {
    padding: 5px 0;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .5px;
    text-align: center;
    color: black;
    /* border-top: 2px solid darkblue; */
    border-bottom: 1px solid LightGray;
}
.trs-claim   { background-color: var(--bg-color-claim); }
.trs-intcon  { background-color: var(--bg-color-intcon); }
.trs-rule    { background-color: var(--bg-color-rule-lighter); }
.trs-fact    { background-color: var(--bg-color-fact); }
.trs-rclaim  { background-color: var(--bg-color-rclaim); }
.trs-truth   { background-color: var(--bg-color-truth); }

.trs-articles-panel-savebuttonbar {
    /* display: flex; */
    /* justify-content: center; */
    padding: 10px 0; /* A small jump when revealed emphasizes the mode change. */ 
    background-color: #e2f1ff; /* Light blue */
    border-bottom: 2px solid darkblue;
}

.trs-articles-panel-savebuttonbar-buttons {
    text-align: center;
}