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

/* ----- 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;
}
/* These are used in the info panel node type headers. */
.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); }

/* ----- Info panel ----- */
.trs-info-panel {
    flex: 1;
    position: relative;
}
.trs-info-panel h2 {
    margin: 0 0 15px 0; /* To show off background color.  */
    padding: 5px 10px;
    border-bottom: 1px solid LightGray;
    font-size: 20px;
    /* Center element */
    display: flex;
    justify-content: center;
}
.trs-info-panel h3, .trs-rnodes-item h3 { /* Same as in Claim box. */
    margin: 0 0 2px 10px;
    color: var(--bg-color-panel-section-title);
    font-size: 19px;
    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: Georgia, "times new roman", times, 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 button {
    position: absolute;
    left: 10px;
    top:  7px;
} */
.trs-info-panel-confidence-level { 
    position: absolute;
    right: 7px;
    top:  8px;
    font-size: 16px;
}
/* ----- Articles panel ----- */
.trs-articles-panel {
    flex: 1;
}
.trs-info-panel:focus, .trs-articles-panel:focus, .trs-map-panel:focus {
    outline: none;
}
.trs-articles-panel h2 {
    margin: 0;
    padding: 5px;
    /* background-color: var(--bg-color-claim); */
    border-top: 1px solid darkgreen;
    /* border-bottom: 1px solid LightGray; */
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    color: white;
    /* background-color: rgb(52, 111, 168); */
    /* background-color: #4e89c1; /* rgb(78, 137, 193); */
    background-color: var(--bg-color-articles-header);
}
/* .trs-articles-panel-button-bar { */
    /* margin: -3px 0 0px -1px; */
    /* padding-left: 10px; */
    /* border-bottom: 1px solid lightblue; */
/* } */
.trs-articles-panel-button-bar button { /* These are fairly small. */
    margin-right: -3px; /* To eliminate space between buttons. A hack. */
    padding: 2px 8px 2px 6px;
    font-size: 14px;
}
.trs-articles-panel-list {
    /* height: calc(100vh - 73px); /* Now set dynamically, so this is ignored. */
    overflow-x: auto;
    /* overflow-y: scroll; */
}
.trs-articles-panel-article-row-title, .trs-articles-panel-article-row-cl, .trs-articles-panel-button-bar div {
    padding: 3px 10px; 
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    cursor: default;    
}
.trs-articles-panel-article {
    border-bottom: 1px solid lightblue;
    /* padding-left: 8px; */
}
.trs-articles-panel-current { 
    color: white;
    background-color: LightSeaGreen;
    border-bottom: 1px solid lightseagreen; /* To replace the current color. */
}
.trs-articles-panel-default-record {
    font-style: italic;
}
.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;
}
.trs-articles-panel-before-current {
    border-bottom: 1px solid lightseagreen; /* The row before the one selected. */
}
.trs-articles-panel-article-row-title {
    padding-left: 8px;
}
.trs-articles-panel-article:not(.trs-articles-panel-current) p:hover {
    background-color: #dff7f6; /* Much ligher than selected */
}
/* The first div contains the cl percent. The second has 'CL'. */
.trs-articles-panel-article-row-cl {
    float: right;
    padding-right: 5px;
} 
/* .trs-articles-panel-article-row-title {
    display: inline-block;
} */
.trs-articles-panel-button-bar div { 
    float: right;
    padding: 5px;
    padding: 5px 15px 0 0; /* 34 when vertical scroll appears, with no letter spacing. */
    letter-spacing: 2px;
}