/* This CSS file holds the default implementations for all of fossil's
   CSS classes. When /style.css is requested, the rules in this file
   are emitted first, followed by (1) page-specific CSS (if any) and
   (2) skin-specific CSS.
*/
div.sidebox {
  float: right;
  background-color: white;
  border-width: medium;
  border-style: double;
  margin: 10px;
}
div.sideboxTitle {
  display: inline;
  font-weight: bold;
}
div.sideboxDescribed {
  display: inline;
  font-weight: bold;
}
span.disabled {
  color: red;
}
table.timelineTable {
  border-spacing: 0px 2px;
}
.timelineDate {
  white-space: nowrap;
}
span.timelineDisabled {
  font-style: italic;
  font-size: small;
}
tr.timelineCurrent {
  padding: .1em .2em;
  border: 1px dashed #446979;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.timelineSelected {
  padding: .1em .2em;
  border: 2px solid lightgray;
  background-color: #ffc;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
.timelineSecondary {
  background-color: #cff;
}
tr.timelineSelected td {
  border-radius: 0;
  border-width: 0;
}
tr.timelineCurrent td {
  border-radius: 0;
  border-width: 0;
}
span.timelineLeaf {
  font-weight: bold;
}
span.timelineHistDsp {
  font-weight: bold;
}
td.timelineTime {
  vertical-align: top;
  text-align: right;
  white-space: nowrap;
}
td.timelineGraph {
  width: 20px;
  text-align: left;
  vertical-align: top;
}
span.timelineCompactComment {
  cursor: pointer;
}
span.timelineEllipsis {
  cursor: pointer;
}
.timelineModernCell, .timelineColumnarCell, .timelineDetailCell {
  vertical-align: top;
  text-align: left;
  padding: 0.75em;
  border-radius: 1em;
}
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] {
  background-color: #efefef;
}
.timelineModernDetail {
  font-size: 80%;
  text-align: right;
  float: right;
  opacity: 0.75;
  margin-top: 0.5em;
  margin-left: 1em;
}
.tl-canvas {
  margin: 0 6px 0 10px;
}
.tl-rail {
  width: 18px;
}
.tl-mergeoffset {
  width: 2px;
}
.tl-nodemark {
  margin-top: 5px;
}
.tl-node {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
}
.tl-node.leaf:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: #000;
}
.tl-node.sel:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: red;
}
.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 #000;
}
.tl-arrow.u.sm {
  border-bottom: 5px solid #000;
}
.tl-line {
  background: #000;
  width: 2px;
}
.tl-arrow.merge {
  height: 1px;
  border-width: 2px 0;
}
.tl-arrow.merge.l {
  border-right: 3px solid #000;
}
.tl-arrow.merge.r {
  border-left: 3px solid #000;
}
.tl-line.merge {
  width: 1px;
}
.tl-arrow.cherrypick {
  height: 1px;
  border-width: 2px 0;
}
.tl-arrow.cherrypick.l {
  border-right: 3px solid #000;
}
.tl-arrow.cherrypick.r {
  border-left: 3px solid #000;
}
.tl-line.cherrypick.h {
  width: 0px;
  border-top: 1px dashed #000;
  border-left: 0px dashed #000;
  background: rgba(255,255,255,0);
}
.tl-line.cherrypick.v {
  width: 0px;
  border-top: 0px dashed #000;
  border-left: 1px dashed #000;
  background: rgba(255,255,255,0);
}
.tl-arrow.warp {
  margin-left: 1px;
  border-width: 3px 0;
  border-left: 7px solid #600000;
}
.tl-line.warp {
  background: #600000;
}
.tl-line.dotted.v {
  width: 0px;
  border-left-width: 2px;
  border-left-style: dotted;
  background: rgba(255,255,255,0);
}
.tl-tooltip {
  text-align: center;
  padding: 5px 1em;
  border: 1px solid black;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.75);
}

span.tagDsp {
  font-weight: bold;
}
span.wikiError {
  font-weight: bold;
  color: red;
}
span.infoTagCancelled {
  font-weight: bold;
  text-decoration: line-through;
}
span.infoTag {
  font-weight: bold;
}
span.wikiTagCancelled {
  text-decoration: line-through;
}
div.columns {
  padding: 0 2em 0 2em;
  max-width: 1000px;
}
div.columns > ul {
  margin: 0;
  padding: 0 0 0 1em;
}
div.columns > ul li:first-child {
  margin-top:0px;
}
.columns li {
  break-inside: avoid;
  page-break-inside: avoid;
}
.filetree {
  margin: 1em 0;
  line-height: 1.5;
}
.filetree > ul {
  display: inline-block;
}
.filetree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.filetree ul.collapsed {
  display: none;
}
.filetree ul ul {
  position: relative;
  margin: 0 0 0 21px;
}
.filetree li {
  position: relative;
  margin: 0;
  padding: 0;
}
.filetree li li:before {
  content: '';
  position: absolute;
  top: -.8em;
  left: -14px;
  width: 14px;
  height: 1.5em;
  border-left: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
}
.filetree li > ul:before {
  content: '';
  position: absolute;
  top: -1.5em;
  bottom: 0;
  left: -35px;
  border-left: 2px solid #aaa;
}
.filetree li.last > ul:before {
  display: none;
}
.filetree a {
  position: relative;
  z-index: 1;
  display: table-cell;
  min-height: 16px;
  padding-left: 21px;
  background-image: url("data:image/gif;base64,R0lGODlhEAAQAJEAAP\/\/\/y\
EhIf\/\/\/wAAACH5BAEHAAIALAAAAAAQABAAAAIvlIKpxqcfmgOUvoaqDSCxrEEfF14GqFX\
ImJZsu73wepJzVMNxrtNTj3NATMKhpwAAOw==");
  background-position: center left;
  background-repeat: no-repeat;
}
ul.browser {
  list-style-type: none;
  padding: 10px;
  margin: 0px;
  white-space: nowrap;
}
ul.browser li.file {
  background-image: url("data:image/gif;base64,R0lGODlhEAAQAJEAAP\/\/\/\
yEhIf\/\/\/wAAACH5BAEHAAIALAAAAAAQABAAAAIvlIKpxqcfmgOUvoaqDSCxrEEfF14Gq\
FXImJZsu73wepJzVMNxrtNTj3NATMKhpwAAOw==");
  background-repeat: no-repeat;
  background-position: 0px center;
  padding-left: 20px;
  padding-top: 2px;
}
ul.browser li.dir {
  background-image: url("data:image/gif;base64,R0lGODlhEAAQAJEAAP/WVCIiI\
v\/\/\/wAAACH5BAEHAAIALAAAAAAQABAAAAInlI9pwa3XYniCgQtkrAFfLXkiFo1jaXpo+\
jUs6b5Z/K4siDu5RPUFADs=");
  background-repeat: no-repeat;
  background-position: 0px center;
  padding-left: 20px;
  padding-top: 2px;
}
div.filetreeline {
  display: table;
  width: 100%;
  white-space: nowrap;
}
.filetree .dir > div.filetreeline > a {
  background-image: url("data:image/gif;base64,R0lGODlhEAAQAJEAAP/WVCIiI\
v\/\/\/wAAACH5BAEHAAIALAAAAAAQABAAAAInlI9pwa3XYniCgQtkrAFfLXkiFo1jaXpo\
+jUs6b5Z/K4siDu5RPUFADs=");
}
div.filetreeage {
 display: table-cell;
 padding-left: 3em;
 text-align: right;
}
div.filetreeline:hover {
 background-color: #eee;
}
table.login_out {
  text-align: left;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
div.captcha {
  text-align: center;
  padding: 1ex;
}
table.captcha {
  margin: auto;
  padding: 10px;
  border-width: 4px;
  border-style: double;
  border-color: black;
}
pre.captcha {
  font-size: 50%;
}
td.login_out_label {
  text-align: center;
}
span.loginError {
  color: red;
}
span.note {
  font-weight: bold;
}
span.textareaLabel {
  font-weight: bold;
}
table.usetupLayoutTable {
  outline-style: none;
  padding: 0;
  margin: 25px;
}
td.usetupColumnLayout {
  vertical-align: top
}
table.usetupUserList {
  outline-style: double;
  outline-width: 1px;
  padding: 10px;
}
th.usetupListUser {
  text-align: right;
  padding-right: 20px;
}
th.usetupListCap {
  text-align: center;
  padding-right: 15px;
}
th.usetupListCon {
  text-align: left;
}
td.usetupListUser {
  text-align: right;
  padding-right: 20px;
  white-space:nowrap;
}
td.usetupListCap {
  text-align: center;
  padding-right: 15px;
}
td.usetupListCon {
  text-align: left
}
div.ueditCapBox {
  margin-right: 20px;
  margin-bottom: 20px;
}
td.usetupEditLabel {
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
span.ueditInheritNobody {
  color: green;
  padding: .2em;
}
span.ueditInheritDeveloper {
  color: red;
  padding: .2em;
}
span.ueditInheritReader {
  color: black;
  padding: .2em;
}
span.ueditInheritAnonymous {
  color: blue;
  padding: .2em;
}
span.capability {
  font-weight: bold;
}
span.usertype {
  font-weight: bold;
}
span.usertype:before {
  content:"'";
}
span.usertype:after {
  content:"'";
}
p.missingPriv {
 color: blue;
}
span.wikiruleHead {
  font-weight: bold;
}
td.tktDspLabel {
  text-align: right;
}
td.tktDspValue {
  text-align: left;
  vertical-align: top;
  background-color: #d0d0d0;
}
td.tktTlOpen {
  color: #800;
}
td.tktTlClosed {
  color: #888;
}
span.tktError {
  color: red;
  font-weight: bold;
}
table.rpteditex {
  float: right;
  margin: 0;
  padding: 0;
  width: 125px;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
table.report {
  border-collapse:collapse;
  border: 1px solid #999;
  margin: 1em 0 1em 0;
  cursor: pointer;
}
td.rpteditex {
  border-width: thin;
  border-color: #000000;
  border-style: solid;
}
div.endContent {
  clear: both;
}
p.generalError {
  color: red;
}
p.tktsetupError {
  color: red;
  font-weight: bold;
}
p.xfersetupError {
  color: red;
  font-weight: bold;
}
p.thmainError {
  color: red;
  font-weight: bold;
}
span.thTrace {
  color: red;
}
p.reportError {
  color: red;
  font-weight: bold;
}
blockquote.reportError {
  color: red;
  font-weight: bold;
}
p.noMoreShun {
  color: blue;
}
p.shunned {
  color: blue;
}
span.brokenlink {
  color: red;
}
ul.filelist {
  margin-top: 3px;
  line-height: 100%;
}
ul.filelist li {
  padding-top: 1px;
}
table.sbsdiffcols {
  width: 90%;
  border-spacing: 0;
  font-size: xx-small;
}
table.sbsdiffcols td {
  padding: 0;
  vertical-align: top;
}
table.sbsdiffcols pre {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  background: inherit;
  color: inherit;
}
div.difflncol {
  padding-right: 1em;
  text-align: right;
  color: #a0a0a0;
}
div.difftxtcol {
  width: 45em;
  overflow-x: auto;
}
div.diffmkrcol {
  padding: 0 1em;
}
span.diffchng {
  background-color: #c0c0ff;
}
span.diffadd {
  background-color: #c0ffc0;
}
span.diffrm {
  background-color: #ffc8c8;
}
span.diffhr {
  display: inline-block;
  margin: .5em 0 1em;
  color: #0000ff;
}
span.diffln {
  color: #a0a0a0;
}
span.modpending {
  color: #b03800;
  font-style: italic;
}
pre.th1result {
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre.th1error {
  white-space: pre-wrap;
  word-wrap: break-word;
  color: red;
}
pre.textPlain {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.statistics-report-graph-line {
  background-color: #446979;
}
.statistics-report-table-events th {
  padding: 0 1em 0 1em;
}
.statistics-report-table-events td {
  padding: 0.1em 1em 0.1em 1em;
}
.statistics-report-row-year {
  text-align: left;
}
.statistics-report-week-number-label {
  text-align: right;
  font-size: 0.8em;
}
.statistics-report-week-of-year-list {
  font-size: 0.8em;
}
#usetupEditCapability {
  font-weight: bold;
}
table.adminLogTable {
  text-align: left;
}
.adminLogTable .adminTime {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.fileage table {
  border-spacing: 0;
}
.fileage tr:hover {
  background-color: #eee;
}
.fileage td {
  vertical-align: top;
  text-align: left;
  border-top: 1px solid #ddd;
  padding-top: 3px;
}
.fileage td:first-child {
  white-space: nowrap;
}
.fileage td:nth-child(2) {
  padding-left: 1em;
  padding-right: 1em;
}
.fileage td:nth-child(3) {
  word-wrap: break-word;
  max-width: 50%;
}
.brlist table {
  border-spacing: 0;
}
.brlist table th {
  text-align: left;
  padding: 0px 1em 0.5ex 0px;
  vertical-align: bottom;
}
.brlist table td {
  padding: 0px 2em 0px 0px;
  white-space: nowrap;
}
th.sort:after {
  margin-left: .4em;
  cursor: pointer;
  text-shadow: 0 0 0 #000; 
}
th.sort.none:after {
  content: '\2666';
}
th.sort.asc:after {
  content: '\2193';
}
th.sort.desc:after {
  content: '\2191';
}
span.snippet>mark {
  background-color: inherit;
  font-weight: bold;
}
div.searchForm {
  text-align: center;
}
p.searchEmpty {
  font-style: italic;
}
.clutter {
  display: none;
}
table.label-value th {
  vertical-align: top;
  text-align: right;
  padding: 0.2ex 1ex;
}
table.forum_post {
  margin-top: 1ex;
  margin-bottom: 1ex;
  margin-left: 0;
  margin-right: 0;
  border-spacing: 0;
}
span.forum_author {
  color: #888;
  font-size: 75%;
}
span.forum_author::after {
  content: " | ";
}
span.forum_age {
  color: #888;
  font-size: 85%;
}
span.forum_buttons {
  font-size: 85%;
}
span.forum_buttons::before {
  color: #888;
  content: " | ";
}
span.forum_npost {
  color: #888;
  font-size: 75%;
}
table.forumeditform td {
  vertical-align: top;
  border-collapse: collapse;
  padding: 1px;
}
div.forum_body p {
  margin-top: 0;
}
td.form_label {
  vertical-align: top;
  text-align: right;
}
.debug {
  background-color: #ffc;
  border: 2px solid #ff0;
}
div.forumEdit {
  border: 1px solid black;
  padding-left: 1ex;
  padding-right: 1ex;
}
div.forumTimeline {
  border: 1px solid black;
  padding-left: 1ex;
  padding-right: 1ex;
  max-width: 50em;
  overflow: auto;
}
div.forumTimeline code {
  white-space: pre-wrap;
}
div.markdown code {
  white-space: pre-wrap;
}
div.forumTime {
  border: 1px solid black;
  padding-left: 1ex;
  padding-right: 1ex;
  margin-top: 1ex;
  display: flex;
  flex-direction: column;
}
.forum div > form {
  margin: 0.5em 0;
}
.forum-post-collapser {
  /* Common style for the bottom-of-post and right-of-post
     expand/collapse widgets. */
  font-size: 0.8em;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0 0 0.5em 0.5em;
  background-color: rgba(0, 0, 0, 0.05);
  opacity: 0.8;
  cursor: pointer;
}
.forum-post-collapser.bottom {
  margin: 0 0 0.4em 0;
  height: 1.75em;
  line-height: 1.75em;
  /* ^^^ Those sizes are finely tuned for the current selection of
     arrow characters. If those change, these should, too. Remember that
     FF/Chrome simply do not agree on alignment with most values :/.  */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.forum-post-collapser.bottom > span {
  margin: 0 1em 0 1em;
  vertical-align: middle;
}
.forum-post-collapser.bottom > span::before {
  content: "⇣⇣⇣";
}
.forum-post-collapser.bottom.expanded > span::before {
  content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
}
div.forumPostBody{
  max-height: 50em;
  overflow: auto;
}
div.forumPostBody.with-expander {
  display: flex;
  flex-direction: row;
  overflow: auto;
}
div.forumPostBody.with-expander:not(.expanded) > :first-child {
  overflow-y: hidden;
}
div.forumPostBody.with-expander > *:first-child {
  /* Main content DIV/PRE */
  overflow: auto;
  flex: 10 1 auto;
}
div.forumPostBody.with-expander.expanded > *:first-child {
  margin-bottom: 0.5em /* try to suppress scroll bar */;
}
div.forumPostBody.with-expander .forum-post-collapser.right {
  /* "Tap zone" for expansion of the post, sits to the right of the
     post's content. */
  flex: 1 10 auto;
  min-width: 1.25em;
  max-width: 1.25em;
  margin: 0 0 0 0.2em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 0.1em;
  cursor: pointer;
  border-bottom: 0;
  border-radius: 0 0.5em 0 0;
}
div.forumPostBody.with-expander .forum-post-collapser.right > span:before {
  content: "⇣";
}
div.forumPostBody.with-expander.expanded .forum-post-collapser.right > span:before {
  content: "⇡";
}
div.forumPostBody.expanded {
  max-height: initial;
}
div.forumPostBody.shrunken {
  /* When an expandable post is un-expanded, it is shrunkend down
     to this size instead of its original size. */
  max-height: 8em;
}

div.forumSel {
  background-color: #cef;
}
div.forumObs {
  color: #bbb;
}

#capabilitySummary {
  text-align: center;
}
#capabilitySummary td {
  padding-left: 3ex;
  padding-right: 3ex;
}
#capabilitySummary th {
  padding-left: 1ex;
  padding-right: 1ex;
}
.capsumOff {
  background-color: #bbb;
}
.capsumRead {
  background-color: #bfb;
}
.capsumWrite {
  background-color: #ffb;
}
label {
  white-space: nowrap;
}
.copy-button {
  display: inline-block;
  width: 14px;
  height: 14px;
/*Note: .24em is slightly smaller than the average width of a normal space.*/
  margin: -2px .24em 0 0;
  padding: 0;
  border: 0;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
viewBox='0,0,14,14'%3E%3Cpath style='fill:black;opacity:0' \
d='M14,14H0V0h14v14z'/%3E%3Cpath style='fill:rgb(240,240,240)' \
d='M1,0h6.6l2,2h1l3.4,3.4v8.6h-10v-2h-3z'/%3E%3Cpath style='fill:rgb(64,64,64)' \
d='M2,1h5l3,3v7h-8z'/%3E%3Cpath style='fill:rgb(248,248,248)' \
d='M3,2h3.6l2.4,2.4v5.6h-6z'/%3E%3Cpath style='fill:rgb(80,128,208)' \
d='M4,5h4v1h-4zm0,2h4v1h-4z'/%3E%3Cpath style='fill:rgb(64,64,64)' \
d='M5,3h5l3,3v7h-8z'/%3E%3Cpath style='fill:rgb(248,248,248)' \
d='M10,4.4v1.6h1.6zm-4,-0.6h3v3h-3zm0,3h6v5.4h-6z'/%3E%3Cpath style='fill:rgb(80,128,208)' \
d='M7,8h4v1h-4zm0,2h4v1h-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.copy-button.disabled {
  filter: grayscale(1);
  opacity: 0.4;
}
.copy-button-flipped {
/*Note: .16em is suitable for element grouping.*/
  margin-left: .16em;
  margin-right: 0;
}
.nobr {
  white-space: nowrap;
}
.accordion {
  cursor: pointer;
}
.accordion_btn {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .5em;
  vertical-align: middle;
}
/* Note: the order of the next 3 entries should be
   maintained for the hierarchical cascade to work. */
.accordion > .accordion_btn_plus {
  display: none;
}
.accordion_closed > .accordion_btn_minus {
  display: none;
}
.accordion_closed > .accordion_btn_plus {
  display: inline-block;
}
.accordion_panel {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}
.error {
  color: darkred;
  background: yellow;
}
.warning {
  color: black;
  background: yellow;
}
.hidden {
  /* The framework-wide way of hiding elements is to assign them this
     CSS class. To make them visible again, remove it. The !important
     qualifiers are unfortunate but sometimes necessary when hidden
     element has other classes which specify visibility-related
     options. */
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
input {
  max-width: 95%;
}
textarea {
  max-width: 95%;
}
img {
  max-width: 100%;
}
hr {
  /* Needed to keep /dir README.txt from floating right in some skins */
  clear: both;
}

/**
  .tab-xxx: styles for fossil.tabs.js.
*/
.tab-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.tab-container > #fossil-status-bar {
  margin-top: 0;
}
.tab-container > .tabs {
  padding: 0.25em;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-width: 1px;
  border-style: outset;
  border-color: inherit;
}
.tab-container > .tabs > .tab-panel {
  align-self: stretch;
  flex: 10 1 auto;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}
.tab-container > .tab-bar {
  display: flex;
  flex-direction: row;
  flex: 1 10 auto;
  align-self: stretch;
  flex-wrap: wrap;
}
.tab-container > .tab-bar > .tab-button {
  display: inline-block;
  border-radius: 0.25em 0.25em 0 0;
  margin: 0 0.1em;
  padding: 0.25em 0.75em;
  align-self: baseline;
  border-color: inherit;
  border-width: 1px;
  border-bottom: none;
  border-top-style: inset;
  border-left-style: inset;
  border-right-style: inset;
  cursor: pointer;
  opacity: 0.6;
}
.tab-container > .tab-bar > .tab-button.selected {
  text-decoration: underline;
  opacity: 1.0;
  border-top-style: outset;
  border-left-style: outset;
  border-right-style: outset;
}

/**
   The flex-xxx classes can be used to create basic flexbox layouts
   through the application of classes to the containing/contained
   objects.
*/
.flex-container {
    display: flex;
}
.flex-container.flex-row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.flex-container .flex-grow {
  flex-grow: 10;
  flex-shrink: 0;
}
.flex-container .flex-shrink {
  flex-grow: 0;
  flex-shrink: 10;
}
.flex-container.flex-row.stretch {
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: stretch;
  margin: 0;
}
.flex-container.flex-column {
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.flex-container.flex-column.stretch {
  align-items: stretch;
  margin: 0;
}
.flex-container.child-gap-small > * {
  margin: 0.25em;
}
#fossil-status-bar {
  display: block;
  font-family: monospace;
  border-width: 1px;
  border-style: inset;
  border-color: inherit;
  min-height: 1.5em;
  font-size: 1.2em;
  padding: 0.2em;
  margin: 0.25em 0;
  flex: 0 0 auto;
}
.font-size-100 {
  font-size: 100%;
}
.font-size-125 {
  font-size: 125%;
}
.font-size-150 {
  font-size: 150%;
}
.font-size-175 {
  font-size: 175%;
}
.font-size-200 {
  font-size: 200%;
}

/**
   .input-with-label is intended to be a wrapper element which contain
   both a LABEL tag and an INPUT or SELECT control.  The wrapper is
   "necessary", as opposed to placing the INPUT in the LABEL, so that
   we can include multiple INPUT elements (e.g. a set of radio
   buttons). Note that these elements must sometimes be BLOCK elements
   (e.g. DIV) so that certain nesting constructs are legal.
*/
.input-with-label {
  border: 1px inset rgba(128, 128, 128, 0.5);
  border-radius: 0.25em;
  padding: 0.1em;
  margin: 0 0.5em;
  display: inline-block;
  cursor: default;
  white-space: nowrap;
}
.input-with-label > * {
  vertical-align: middle;
}
.input-with-label > label {
  display: inline; /* some skins set label display to block! */
  cursor: pointer;
}
.input-with-label > input {
  margin: 0;
}
.input-with-label > button {
  margin: 0;
}
.input-with-label > select {
  margin: 0;
}
.input-with-label > input[type=text] {
  margin: 0;
}
.input-with-label > textarea {
  margin: 0;
}
/* Browsers are unfortunately inconsistent in how they
   align checkboxes and radio buttons, even if they're
   given the same vertical-align value. 'middle' seems to
   be the least bad option, rather than the ideal. */
.input-with-label > input[type=checkbox] {
  vertical-align: middle;
}
.input-with-label > input[type=radio] {
  vertical-align: middle;
}
.input-with-label > label {
  font-weight: initial;
  margin: 0 0.25em 0 0.25em;
  vertical-align: middle;
}

table.numbered-lines {
  width: 100%;
  table-layout: fixed /* required to keep ultra-wide code from exceeding
                         window width, and instead force a scrollbar
                         on them. */;
}
table.numbered-lines > tbody > tr {
  font-family: monospace;
  line-height: 1.35;
  white-space: pre;
}
table.numbered-lines > tbody > tr > td {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: inherit;
  margin: 0;
  vertical-align: top;
  padding: 0.25em 0 0 0 /*prevents slight overlap at top */;
}
table.numbered-lines td.line-numbers {
  width: 4.5em;
}
table.numbered-lines td.line-numbers > span:first-of-type {
  margin-top: 0.25em/*must match top PADDING of
                      td.file-content > pre > code*/;
}
table.numbered-lines td.line-numbers > span {
  display: block;
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  white-space: pre;
  margin-right: 2px/*keep selection from nudging the right column */;
  text-align: right;
}
table.numbered-lines td.line-numbers > span:hover {
  background-color: rgba(112, 112, 112, 0.25);
}
table.numbered-lines td.file-content {
  padding-left: 0.25em;
}
table.numbered-lines td.file-content > pre,
table.numbered-lines td.file-content > pre > code {
  margin: 0;
  padding: 0;
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  white-space: pre;
  display: block/*necessary for certain skins!*/;
}
table.numbered-lines td.file-content > pre {
}
table.numbered-lines td.file-content > pre > code {
  overflow: auto;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.25em/*any top padding here must match the top MARGIN of
                       td.line-numbers's first span child or the
                       lines/code will get misaligned. */;
  padding-bottom: 0.25em/*prevents a slight overlap at bottom from
                          triggering a scroller*/;
}
table.numbered-lines td.file-content > pre > code > * {
  /* Defense against syntax highlighters indirectly messing up these
     properties... */
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
}
table.numbered-lines td.line-numbers span.selected-line/*replacement*/ {
  font-weight: bold;
  color: blue;
  background-color: #d5d5ff;
  border: 1px blue solid;
  border-top-width: 0;
  border-bottom-width: 0;
  padding: 0;
  margin: 0;
}
table.numbered-lines td.line-numbers span.selected-line.start {
  border-top-width: 1px;
  margin-top: -1px/*restore alignment*/;
}
table.numbered-lines td.line-numbers span.selected-line.end {
  border-bottom-width: 1px;
  margin-top: -1px/*restore alignment*/;
}
table.numbered-lines td.line-numbers span.selected-line.start.end {
  margin-top: -2px/*restore alignment*/;
}

.fossil-tooltip {
  text-align: center;
  padding: 0.2em 1em;
  border: 1px solid black;
  border-radius: 0.25em;
  position: absolute;
  display: inline-block;
  z-index: 19/*below default skin's hamburger popup*/;
  box-shadow: -0.15em 0.15em 0.2em rgba(0, 0, 0, 0.75);
  background-color: inherit;
  color: inherit;
}
.fossil-PopupWidget {
  /* This class is ALWAYS set on every fossil.PopupWidget instance, in
     addition to client/app-configured classes. It should not get any
     style - it is only used for DOM element selecting/filtering
     purposes. */
}
.fossil-toast-message {
  /* "toast"-style popup message.
     See fossil.popupwidget:toast() */
  position: absolute;
  display: block;
  z-index: 1001;
  text-align: left;
  padding: 0.15em 0.5em;
  margin: 0;
  font-size: 1em;
  border-width: 1px;
  border-style: solid;
  border-color: rgba( 127, 127, 127, 0.75 );
  border-radius: 0.25em;
  background-color: rgba(20, 20, 20, 1)
  /* problem: if we inherit the color it may either be
     transparent or inherit translucency via the
     skin, leaving it unreadable. Since we set the bg
     color we must also set the fg color. */;
  color: rgba(235, 235, 235, 0.9);
}
.fossil-toast-message.error,
.fossil-toast-message.warning {
  background: yellow;
}
.fossil-toast-message.error {
  font-weight: bold;
  color: darkred;
  border-color: darkred;
}
.fossil-toast-message.warning {
  color: black;
}

blockquote.file-content {
  /* file content block in the /file page */
  margin: 0 1em;
}


/**
   Circular "help" buttons intended to be placed to the right of
   another element and hold text text for it. These typically get
   initialized automatically at page startup via
   fossil.popupwidget.js, and can be manually initialized/created
   using window.fossil.helpButtonlets.setup/create(). All of their
   child content (plain text and/or DOM elements) gets moved out of
   the DOM and shown in a singleton popup when they are clicked. They
   may be SPAN elements if their children are all inline elements,
   otherwise they must be DIVs (block elements) so that nesting of
   block-element content is legal.
*/
.help-buttonlet {
  display: inline-block;
  min-width: 1em;
  max-width: 1em;
  min-height: 1em;
  max-height: 1em;
  cursor: pointer;
  margin: 0 0 0 0.35em;
  background-image: /* white question mark on blue circular background */
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' \
viewBox='0 0 15.867574 15.867574'%3e%3ccircle cx='7.9337869' cy='7.9337869' r='7.9337869' \
style='fill:%23f0f0f0;stroke-width:1' /%3e%3ccircle cx='7.9337869' cy='7.9337869' \
r='6.9662519' style='fill:%23404040;stroke-width:1' /%3e%3ccircle cx='7.9337869' \
cy='7.9337869' r='5.9987168' style='fill:%235080d0;stroke-width:1' /%3e%3cpath \
d='M 9.2253789,9.8629486 H 6.5997716 v -0.356384 q 0,-0.5963983 0.2400139,-1.0546067 \
0.240014,-0.4654816 1.0109681,-1.1782504 L 8.316235,6.8518647 Q 8.7308046,6.473661 \
8.9199065,6.1390961 9.1162816,5.8045312 9.1162816,5.4699662 q 0,-0.5091205 -0.3491113,-0.7927734 \
-0.3491111,-0.2909259 -0.9746021,-0.2909259 -0.5891252,0 -1.2728012,0.247287 \
-0.6836761,0.240014 -1.4255375,0.720042 V 3.0698267 q 0.8800513,-0.3054724 1.6073661,-0.4509353 \
0.7273151,-0.145463 1.403718,-0.145463 1.7746486,0 2.7056104,0.727315 0.930965,0.720042 \
0.930965,2.1092135 0,0.7127686 -0.283654,1.2800746 -0.283652,0.5600324 -0.967329,1.2073428 \
L 10.025425,8.2119439 Q 9.530851,8.6628792 9.3781148,8.9392588 9.2253789,9.2083654 \
9.2253789,9.535657 Z M 6.5997716,10.939376 h 2.6256073 v 2.589241 H 6.5997716 Z' \
style='fill:%23f8f8f8;stroke-width:1.35412836' /%3e%3c/svg%3e ");    
  background-repeat: no-repeat;
  background-position: center;
  /* When not using a background image, this additional style works
     reasonably well along with a ::before content of "?": */
  /*border-width: 1px;
  border-style: outset;
  border-radius: 0.5em;
  font-size: 100%;
  font-family: monspace;
  font-weight: 700;
  overflow: hidden;
  background-color: rgba(54, 54, 255,1);
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 1; */
}
/*.help-buttonlet::before {
  content: "?";
}*/
/**
   We really want to hide all help text via CSS but CSS cannot select
   TEXT nodes. Thus we move them out of the way programmatically
   during initialization.
*/
.help-buttonlet > *{}

/**
   CSS class for PopupWidget which wraps .help-buttonlet content.
   They also have class fossil-tooltip. We need an overly-exact
   selector here to be certain that this class's style overrides
   that of fossil-tooltip.
*/
.fossil-tooltip.help-buttonlet-content {
  cursor: default;
  text-align: left;
  border-style: outset;
}

noscript > .error {
  /* Part of the style_emit_noscript_for_js_page() interface. */
  padding: 1em;
  font-size: 150%;
}

/************************************************************
 pikchr...
 DOM structure:
  <DIV.pikchr-wrapper>
    <DIV.pikchr-svg>
      <SVG.pikchr>...</SVG>
    </DIV.pikchr-svg>
    <PRE.pikchr-src>...</PRE>
  </DIV.pikchr-wrapper>

************************************************************/
div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
div.pikchr-svg {/*wrapper for SVG.pikchr element*/}
svg.pikchr {/*pikchr SVG*/
  width: 100%/*necessary for SOME SVGs for Chrome!*/;
}
pre.pikchr-src {/*source code view for a pikchr (see fossil.pikchr.js)*/
  box-sizing: border-box;
  text-align: left;
}
/* The .source-inline class tells the .source class that the
   source view, when enbaled, should be "inline" (same position
   as the graphic), else the sources are shifted to the left as
   if they were "plain text". */
div.pikchr-wrapper.center:not(.source),
div.pikchr-wrapper.center.source.source-inline{
  text-align: center;
  /* Reminder for The Future: this impl also works:

      display: grid; place-items: center;

     and does not require setting display:inline-block on the relevant
     child items, but caniuse.com/css-grid suggests that some
     still-seemingly-legitimate browsers don't support grid mode. */
}
div.pikchr-wrapper.center > div.pikchr-svg {
}
div.pikchr-wrapper.center:not(.source) > pre.pikchr-src,
div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
/* ^^^ Centered non-source-view elements */
div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
/* ^^^ Centered inline-source-view elements */{
  display:inline-block/*allows parent text-align to do the alignment*/;
}
div.pikchr-wrapper.indent:not(.source),
div.pikchr-wrapper.indent.source.source-inline{
  margin-left: 4em;
}
div.pikchr-wrapper.float-left:not(.source),
div.pikchr-wrapper.float-left.source.source-inline {
  float: left;
  padding: 4em;
}
div.pikchr-wrapper.float-right:not(.source),
div.pikchr-wrapper.float-right.source.source-inline{
  float: right;
  padding: 4em;
}

/* For pikchr-wrapper.source mode, toggle pre.pikchr-src and
   svg.pikchr visibility... */
div.pikchr-wrapper.source > pre.pikchr-src {
  /* Source code  ^^^^^^^ is visible, else it is hidden */
}
div.pikchr-wrapper:not(.source) > pre.pikchr-src {
  /* Hide sources when image is being shown. */
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
div.pikchr-wrapper.source > div.pikchr-svg {
  /* Hide image when sources are being shown. */
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

/* Chat-related */
body.chat span.at-name { /* for @USERNAME references */
  text-decoration: underline;
  font-weight: bold;
}
/* A wrapper for a single single chat message (one row of the UI) */
body.chat .message-widget {
  margin-bottom: 0.75em;
  border: none;
  display: flex;
  flex-direction: column;
  border: none;
  align-items: flex-start;
}
body.chat.my-messages-right .message-widget.mine {
  /* Right-aligns a user's own chat messages, similar to how
     most mobile messaging apps do it. */
  align-items: flex-end;
}
body.chat.my-messages-right .message-widget.notification {
  /* Center-aligns a system-level notification message. */
  align-items: center;
}
/* The content area of a message. */
body.chat .message-widget-content {
  display: inline-block;
  border-radius: 0.25em;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
  padding: 0.25em 0.5em;
  margin-top: 0;
  min-width: 9em /*avoid unsightly "underlap" with the neighboring
                   .message-widget-tab element*/;
  white-space: pre-wrap/*needed for multi-line edits*/;
}
body.chat.monospace-messages .message-widget-content,
body.chat.monospace-messages textarea,
body.chat.monospace-messages input[type=text]{
  font-family: monospace;  
}
/* User name and timestamp (a LEGEND-like element) */
body.chat .message-widget .message-widget-tab {
  border-radius: 0.25em 0.25em 0 0;
  margin: 0 0.25em 0em 0.15em;
  padding: 0 0.5em 0.15em 0.5em;
  cursor: pointer;
  white-space: nowrap;
}
body.chat .fossil-tooltip.help-buttonlet-content {
  font-size: 80%;
}
/* The popup element for displaying message timestamps
   and deletion controls. */
body.chat .chat-message-popup {
  font-family: monospace;
  font-size: 0.8em;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.25em;
  z-index: 200;
}
/* Full message timestamps. */
body.chat .chat-message-popup > span { white-space: nowrap; }
/* Container for the message deletion buttons. */
body.chat .chat-message-popup > .toolbar {
  padding: 0.2em;
  margin: 0;
  border: 2px inset rgba(0,0,0,0.3);
  border-radius: 0.25em;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  flex-wrap: wrap;
}
body.chat .chat-message-popup > .toolbar > button {
  flex: 1 1 auto;
}
/* The widget for loading more/older chat messages. */
body.chat #load-msg-toolbar  {
  border-radius: 0.25em;
  padding: 0.1em 0.2em;
  margin-bottom: 1em;
}
/* .all-done is set when chat has loaded all of the available
   historical messages */
body.chat #load-msg-toolbar.all-done {
  opacity: 0.5;
}
body.chat #load-msg-toolbar > div {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  flex-wrap: wrap;
}
body.chat #load-msg-toolbar > div > button {
  flex: 1 1 auto;
}

/* An icon element intended for use as a button/menu for
   accessing app-specific settings. */
.settings-icon {
  /* Icon source: https://de.wikipedia.org/wiki/Datei:OOjs_UI_icon_settings.svg
     MIT License. */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg \
xmlns='http://www.w3.org/2000/svg' width='24' height='24' \
viewBox='0, 0, 24, 24'%3e%3cg id='settings'%3e%3cpath id='gear' \
d='M3 4h3v2h-3zM12 4h9v2h-9zM8 3h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 \
0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 11h9v2h-9zM18 11h3v2h-3zM14 10h2c.552 0 1 .448 \
1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 18h6v2h-6zM15 \
18h6v2h-6zM11 17h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 \
0-1-.448-1-1v-2c0-.552.448-1 1-1z'/%3e%3c/g%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  min-height: 1em;
  max-height: 1em;
  min-width: 1em;
  max-width: 1em;
  margin: 0;
  padding: 0.2em/*needed to avoid image truncation*/;
  border: 1px solid rgba(0,0,0,0.0)/*avoid resize when hover style kicks in*/;
  cursor: pointer;
  border-radius: 0.25em;
}
.settings-icon:hover {
  border: 1px outset rgba(127,127,127,1);
}
body.fossil-dark-style .settings-icon {
  filter: invert(100%);
}
/* "Chat-only mode" hides the site header/footer, showing only
   the chat app. */
body.chat.chat-only-mode{}
body.chat #chat-settings-button {}
/** Popup widget for the /chat settings. */
body.chat .chat-settings-popup {
  font-size: 0.8em;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.25em;
  z-index: 200;
}
body.chat .chat-settings-popup > span {
  vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry{
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid;
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
body.chat .chat-settings-popup > span.menu-entry:hover {
}
body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet {
  vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry > span.button {
  margin: 0.25em 0.2em;
  padding: 0.25em;
  flex: 1 1 auto/*eliminates dead no-click zones on the right*/;
}
body.chat .chat-settings-popup > span.menu-entry > input[type=checkbox] {
  cursor: inherit;
}
body.chat .chat-settings-popup > select.menu-entry {
  flex: 1 1 auto;
  padding: 0;
  cursor: pointer;
  min-height: 2.5em;
  border-radius: 0.25em;
}
body.chat .chat-settings-popup > select.menu-entry > option {
  /*Recall that many browsers don't allow styling of OPTION
    elements, or allow only very limited styling.*/
}

/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
  overflow: auto;
  /*max-height: 800em*//*will be re-calc'd in JS*/;
  flex: 2 1 auto;
}
body.chat #chat-messages-wrapper.loading > * {
  /* An attempt at reducing flicker when loading lots of messages. */
  visibility: hidden;
}
body.chat div.content {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  /* ^^^^ In order to get good automatic scrolling of new messages on
     the BOTTOM in bottom-up chat mode, such that they scroll up
     instead of down, we have to use column-reverse layout, which
     changes #chat-messages-wrapper's "gravity" for purposes of
     scrolling! If we instead use flex-direction:column then each new
     message pushes #chat-input-area down further off the screen!
 */
  align-items: stretch;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
  display: flex;
  flex-direction: column;
  padding: 0.5em 1em;
  border-bottom: none;
  border-top: 1px solid black;
  margin: 0.5em 1em 0 1em;
  position: initial /*sticky currently disabled due to scrolling-related issues*/;
  bottom: 0;
}
body.chat:not(.chat-only-mode) #chat-input-area{
  /* Safari user reports that 2em is necessary to keep the file selection
     widget from overlapping the page footer, whereas a margin of 0 is fine
     for FF/Chrome (and 2em is a *huge* waste of space for those). */
  margin-bottom: 0;
}

/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.25em;
  align-items: self-start;
}
body.chat #chat-input-line > input[type=submit],
body.chat #chat-input-line > #chat-settings-button,
body.chat #chat-input-line > button {
  flex: 1 5 auto;
  max-width: 6em;
  margin: 0 0.25em;
}
body.chat #chat-input-line > button {
  max-width: 4em;
}
body.chat #chat-input-line > #chat-settings-button{
  margin: 0 0 0 0.25em;
  max-width: 2em;
}
body.chat #chat-input-line > input[type=text],
body.chat #chat-input-line > textarea {
  flex: 5 1 auto;
}
/* Widget holding the file selection control and preview */
body.chat #chat-input-file-area  {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
body.chat #chat-input-file-area > .file-selection-wrapper {
  align-self: flex-start;
  margin-right: 0.5em;
  flex: 0 1 auto;
  padding: 0.25em 0.25em 0.25em 0;
}
body.chat #chat-input-file-area .file-selection-wrapper > * {
  vertical-align: middle;
  margin: 0;
}
body.chat #chat-input-file {
  border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
  border-radius: 0.25em;
  padding: 0.25em;
}
body.chat #chat-input-file > input {
  flex: 1 0 auto;
}
/* Indicator when a drag/drop is in progress */
body.chat #chat-input-file.dragover {
  border: 1px dashed green;
}
/* Widget holding the details of a selected/dropped file/image. */
body.chat #chat-drop-details {
  flex: 0 1 auto;
  padding: 0.5em 1em;
  margin-left: 0.5em;
  white-space: pre;
  font-family: monospace;
}

body.chat #chat-drop-details img {
  max-width: 45%;
  max-height: 45%;
}
