/* General settings for the entire page */
body {
  margin: 0ex 1ex;
  padding: 0;
  background-color: #1f1f1f;
  color: #ffffffe0;
  font-family: sans-serif;
}

/* The page title centered at the top of each page */
div.title {
  display: table-cell;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  vertical-align: bottom;
  width: 100%;
}

/* The login status message in the top right-hand corner */
div.status {
  display: table-cell;
  text-align: right;
  vertical-align: bottom;
  color: #ddddddc9;
  font-size: 0.8em;
  font-weight: bold;
  white-space: nowrap;
}
/* The leftoftitle is a <div> to the left of the title <div>
** that contains the same text as the status div.  But we want
** the area to show as blank.  The purpose is to cause the
** title to be exactly centered. */
div.leftoftitle {
  visibility: hidden;
}

/* The header across the top of the page */
div.header {
  display: table;
  width: 100%;
}

/* The main menu bar that appears at the top of the page beneath
** the header */
div.mainmenu {
  padding: 0.25em 0.5em;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom: 1px dotted rgba(200,200,200,0.3);
  z-index: 21;  /* just above hbdrop */
}
div#hbdrop {
  background-color: #1f1f1f;
  border: 2px solid #303536;
  border-radius: 0 0 0.5em 0.5em;
  display: none;
  left: 2em;
  width: calc(100% - 4em);
  position: absolute;
  z-index: 20;  /* just below mainmenu, but above timeline bubbles */
}

div.mainmenu, div.submenu, div.sectionmenu {
  color: #ffffffcc;
  background-color: #303536/*#0000ff60*/;
}
/* The submenu bar that *sometimes* appears below the main menu */
div.submenu, div.sectionmenu {
  padding: 0.15em 0.5em 0.15em 0;
  font-size: 0.9em;
  text-align: center;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
a, a:visited {
   color: rgba(127, 201, 255, 0.9);
   display: inline;
   text-decoration: none;
}
a:visited {opacity: 0.8}
div.mainmenu a, div.submenu a,
div.sectionmenu>a.button, div.submenu label,
div.footer a {
  padding: 0.15em 0.5em;
}
div.mainmenu a.active {
  border-bottom: 1px solid #FF4500f0;
}
a:hover,
a:visited:hover {
  background-color: #FF4500f0;
  color: rgba(24,24,24,0.8);
  border-radius: 0.1em;
}
.fileage tr:hover,
div.filetreeline:hover {
  background-color: #333;
}
.button,
button {
  color: #aaa;
  background-color: #444;
  border-radius: 5px;
  border: 0
}
.button:hover,
button:hover {
  background-color: #FF4500f0;
  color: rgba(24,24,24,0.8);
  outline: 0
}
input[type=button],
input[type=reset],
input[type=submit] {
  color: #ddd;
  background-color: #446979;
  border: 0;
  border-radius: 5px
}
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  background-color: #FF4500f0;
  color: rgba(24,24,24,0.8);
  outline: 0
}
input[type=submit]:disabled {
  color: #363636;
  background-color: #707070;
}
.button:focus,
button:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus {
  outline: 2px outset #333;
  border-color: #888;
}

/* All page content from the bottom of the menu or submenu down to
** the footer */
div.content {
  padding: 0ex 1ex 1ex 1ex;
}

/* Some pages have section dividers */
div.section {
  margin-bottom: 0;
  margin-top: 1em;
  padding: 0.1em;
  font-size: 1.2em;
  font-weight: bold;
  background-color: #303536/*#0000ff60*/;
  white-space: nowrap;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  border-bottom: 1px dotted rgba(200,200,200,0.3);
}

/* The "Date" that occurs on the left hand side of timelines */
div.divider {
  background: #303536;
  border: 1px #558195 solid;
  font-size: 1em; font-weight: normal;
  padding: .25em;
  margin: .2em 0 .2em 0;
  float: left;
  clear: left;
  white-space: nowrap;
}

/* The footer at the very bottom of the page */
div.footer {
  clear: both;
  font-size: 0.8em;
  padding: 0.15em 0.5em;
  text-align: right;
  background-color: #303536/*#0000ff60*/;
  border-top: 1px dotted rgba(200,200,200,0.3);
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}

/* Hyperlink colors in the footer */

pre {
  border-radius: 0.25em;
}
pre > code {
  display: block;
}
/* verbatim blocks */
pre.verbatim {
  padding: 0.12em;
  white-space: pre-wrap;
}
pre:not(.verbatim) {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgba(200,200,200, 0.1);
  padding: 0.5em 1em;
}

/* The label/value pairs on (for example) the ci page */
table.label-value th {
  vertical-align: top;
  text-align: right;
  padding: 0.2ex 2ex;
}

h1 {margin: 0.6em 0}
h2 {margin: 0.5em 0}
h3 {margin: 0.5em 0}
h4 {margin: 0.5em 0}
h5 {margin: 0.5em 0}


/**********
td.timelineTime,
tr.timelineBottom td {
  border-bottom: 0
}
table.timelineTable {
  border-spacing: 0.3em 0.3em;
}
table.timelineTable tr td {
  padding: 0.5em 1em;
}
.timelineModernCell[id],
.timelineColumnarCell[id],
.timelineDetailCell[id] {
    background-color: #ffffff40;
}
table.timelineTable tr td:nth-of-type(2) {
  background-color: #ffffffc0;
}
div.tl-canvas {
}
*/

.fossil-tooltip,
.fossil-toast-message {
  background-color: rgba(251, 106, 0, 1);
  border-color: rgba(127, 201, 255, 0.9);
  color: black;
}

/************************************************************************
timeline...
************************************************************************/
table.timelineTable tr:not(.timelineDateRow){
  background-color: #ffffff17;
}
table.timelineTable tr:not(.timelineDateRow):hover{
  background-color: #FF450080;
}
table.timelineTable tr td:first-of-type {
  vertical-align: middle;
  padding: 0.2em 0.5em;
}
div.timelineDate {
  font-weight: 700;
  white-space: nowrap;
  border-radius: 0.2em;
}
td.timelineTime {
  text-align: right;
  white-space: nowrap;
}
td.timelineGraph {
  width: 20px;
  text-align: left;
  border-bottom: 0
}
a.timelineHistLink {
  /*text-transform: lowercase*/
}
span.timelineComment {
  padding: 0 5px
}
.report th,
span.timelineEllipsis {
  cursor: pointer
}
table.timelineTable {
  border-spacing: 0 0.2em;
}
.timelineModernCell, .timelineColumnarCell,
.timelineDetailCell, .timelineCompactCell,
.timelineVerboseCell {
  vertical-align: top;
  text-align: left;
  padding: .75em;
  border-radius: 0.25em;
  background: inherit /*#000*/;
}
.timelineSelected > .timelineColumnarCell,
.timelineSelected > .timelineCompactCell,
.timelineSelected > .timelineDetailCell,
.timelineSelected > .timelineModernCell,
.timelineSelected > .timelineVerboseCell {
  padding: .75em;
  border-radius: 0.2em;
  border: 1px solid #ff8000;
  vertical-align: top;
  text-align: left;
  background: #442800
}

/* Timeline has a blank line at the bottom. Apparently it's to provide the
   graph with a good starting place. Hiding it causes a slight graph
   unsightliness, but we can change its bg color. */
table.timelineTable tr.timelineBottom,
table.timelineTable tr.timelineBottom:hover {
    background: inherit;
}
span.timelineSelected {
  border-radius: 0.2em;
  border: 1px solid #ff8000;
  /*vertical-align: top;
  text-align: left;*/
  background: #442800
}
.timelineSelected {
  background-color: #ffffff40;
}
.timelineSecondary {}
.timelineSecondary > .timelineColumnarCell,
.timelineSecondary > .timelineCompactCell,
.timelineSecondary > .timelineDetailCell,
.timelineSecondary > .timelineModernCell,
.timelineSecondary > .timelineVerboseCell {
  padding: .75em;
  border-radius: 5px;
  border: solid #0080ff;
  /*vertical-align: top;
  text-align: left;*/
  background: #002844
}
span.timelineSecondary {
  border-radius: 5px;
  border: solid #0080ff;
  /*vertical-align: top;
  text-align: left;*/
  background: #002844
}
.timelineCurrent > .timelineColumnarCell,
.timelineCurrent > .timelineCompactCell,
.timelineCurrent > .timelineDetailCell,
.timelineCurrent > .timelineModernCell,
.timelineCurrent > .timelineVerboseCell {
  /*vertical-align: top;
  text-align: left;*/
  padding: .75em;
  border-radius: 5px;
  border: dashed #ff8000
}
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: inherit;/*#000*/
}
.tl-canvas {
  margin: 0 6px 0 10px
}
.tl-rail {
  width: 18px
}
.tl-mergeoffset {
  width: 2px
}
.tl-nodemark {
  margin-top: .8em
}
.tl-node {
  width: 10px;
  height: 10px;
  border: 2px solid #bbb;
  background: #111;
  cursor: pointer
}
.tl-node.leaf:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: #bbb
}
.tl-node.sel:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  background: #ff8000
}
.tl-arrow {
  width: 0;
  height: 0;
  transform: scale(.999);
  border: 0 solid transparent
}
.tl-arrow.u {
  margin-top: -1px;
  border-width: 0 3px;
  border-bottom: 7px solid
}
.tl-arrow.u.sm {
  border-bottom: 5px solid #bbb
}
.tl-line {
  background: #bbb;
  width: 2px
}
.tl-arrow.merge {
  height: 1px;
  border-width: 2px 0
}
.tl-arrow.merge.l {
  border-right: 3px solid #bbb
}
.tl-arrow.merge.r {
  border-left: 3px solid #bbb
}
.tl-line.merge {
  width: 1px
}
.tl-arrow.cherrypick {
  height: 1px;
  border-width: 2px 0;
}
.tl-arrow.cherrypick.l {
  border-right: 3px solid #bbb;
}
.tl-arrow.cherrypick.r {
  border-left: 3px solid #bbb;
}
.tl-line.cherrypick.h {
  width: 0px;
  border-top: 1px dashed #bbb;
  border-left: 0px dashed #bbb;
  background: rgba(255,255,255,0);
}
.tl-line.cherrypick.v {
  width: 0px;
  border-top: 0px dashed #bbb;
  border-left: 1px dashed #bbb;
  background: rgba(255,255,255,0);
}

/************************************************************************
diffs...
************************************************************************/
td.diffln ins {
  background-color: #559855;
  color: #000;
  text-decoration: none;
}
td.diffln del {
  background-color: #c55;
  color: #000;
  text-decoration: none;
}
td.difftxt del {
  background-color: inherit;
  text-decoration: none;
}
td.difftxt del > del {
  background-color: #c55;
  color: #000;
  text-decoration: none;
}
td.difftxt ins {
  background-color: inherit;
  text-decoration: none;
}
td.difftxt ins > ins {
  background-color: #559855;
  color: #000;
  text-decoration: none;
}
tr.diffskip.jchunk {
  background-color: black;
}
tr.diffskip > td.chunkctrl .jcbutton {
  background-color: #303536;
}

/************************************************************************
************************************************************************/
body.wikiedit #fossil-status-bar,
body.fileedit #fossil-status-bar{
  border-radius: 0.25em 0.25em 0 0;
}
.tab-container > .tabs {
  border-radius: 0.25em;
}

blockquote.file-content {
  margin: 0;
}
blockquote.file-content > pre {
  padding: 0;
}
blockquote.file-content > pre > code {
  padding: 0 0.5em;
}
svg.pikchr {
  /* swap the pikchr svg colors around so they're readable in
     this dark theme. 2020-02: changes in fossil have made this
     obsolete. */
  /*filter: invert(1) hue-rotate(180deg);*/
}
span.snippet>mark {
  color: white;
  font-weight: bold;
}
button,
input,
optgroup,
select,
textarea {
  background: inherit;
  color: inherit;
  font: inherit;
  margin: 0
}
button {
  background-color: rgba(45,45,45,0.75);
}
input, textarea, select {
  border: 1px solid rgba(127, 201, 255, 0.9);
  padding: 1px;
}
select {
  color: #1f1f1f;
  background: #ffffffe0;
}
.capsumOff {
  background-color: #222;
}
.capsumRead {
  background-color: #262;
}
.capsumWrite {
  background-color: #662;
}

body.forum div.forumSel {
    background: inherit;
    border-left-width: 0.5em;
    border-left-style: double;
}

body.forum .debug {
    background-color: #FF4500f0;
    color: rgba(24,24,24,0.8);
}

body.forum .forumPosts.fileage tr:hover {
    background-color: #333;
    color: rgba(24,24,24,0.8);
}
body.forum .forumPosts.fileage tr:hover {
    background-color: #333;
    color: rgba(24,24,24,0.8);
}
body.forum .forumPosts.fileage tr:hover > td:nth-child(1),
body.forum .forumPosts.fileage tr:hover > td:nth-child(3) {
  color: #ffffffe0;
}

body.forum .forumPostBody > div blockquote {
    border: 1px inset;
    padding: 0 0.5em;
}

body.forum .forumPosts.fileage a:visited {
  color: rgba(98, 150, 205, 0.9);
}

body.report table.report tr td { color: black }
body.report table.report a { color: blue }
body.tkt td.tktDspValue { color: black }
body.tkt td.tktDspValue a { color: blue }

body.branch .brlist > table > tbody > tr:hover:not(.selected),
body.branch .brlist > table > tbody > tr.selected {
  background-color: #442800;
}