.space { padding-left: 0.5em; }
.absolute { position: absolute; }

.btn .fa, .btn .fab, .btn .fal, .btn .far, .btn .fas { line-height: inherit; }
.fa-paperclip { vertical-align: middle; }
.title { font-weight: bold; }
input.title { width: calc(100% + 5px); margin: 0px -5px 0px 0px; }
.author { font-style: italic; }
.message-body { text-align: justify; }
.bodyContainer, .message-title { position: relative; overflow-x: auto; overflow-y: hidden; overflow-wrap: break-word; contain: layout paint style; }
  /* We set `position: relative` so any position: absolute's within have
   * this as the containing block. We set `overflow-y: hidden` to prevent hacks
   * that render outside the rectangle of this message (but also avoid a
   * vertical scrollbar); and set `overflow-x: auto` to handle any content
   * that's too wide.
   */
.katex .katex-mathml { left: 0; }
  /* avoid pushing into right margin, given `position: absolute` layout */
.katex .vlist-t2 { margin-right: -0.1px; }
.katex .vlist-s { width: 0.1px; min-width: 0.1px; }
  /* avoid vlists from pushing into right margin and causing scroll bars;
   * KaTeX uses 2px for these two numbers instead
   */
.message-footer { width: 100%; padding: 0ex 1em; }
.panel-body { padding-bottom: 0px; } /* always have a footer right below */
.message-deleted > .message-body, .message-unpublished > .message-body { opacity: 0.6; }
/* .push-down (e.g. .message-left-buttons) push the title down to compensate
 * for the missing 5px top-padding of .panel-heading (needed to get the
 * .message-right-buttons to be higher than the title, without using negative
 * spacing, which would mess up multiline titles).
 */
.push-down { margin-top: 5px; vertical-align: -5px; }
.panel-heading form .push-down, .search > .panel-heading > .pull-right.push-down { margin-top: 8px; }
.message-right-buttons { margin: 0px -5px -5px 0px; } /* cf. panel-heading's padding of 10px */
.panel-heading { padding: 5px 10px 10px 10px; } /* normally 10px 15px */
.panel-heading.compact { padding: 0px 5px 5px 10px; }
/* Fuse together root panel heading with following panel */
.root, .root > .panel-heading { border-bottom: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
.root + .panel, .root + .panel > .panel-heading { border-top: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
.panel-secondbody > .message-title { display: inline; color: gray; }
.panel-secondbody > .message-title > .panel-title { font-weight: normal; font-size: small; }
.linkToTop { margin-top: -4px; }
.message-title .label { vertical-align: 2px; } /* shift up to center */
.message-subtitle { margin-top: 5px; }
.message-subtitle .upper-strut { display: inline-block; height: 20px; vertical-align: 0px; }
.message-subtitle .lower-strut { display: inline-block; vertical-align: -10px; }
.btn.label { float: none; height: 20px; } /* +Tag manual height adjustment */
/* input.title ~ .message-right-buttons { margin: 0px; } */
.message-response-buttons { margin: 8px 0px 10px 0px; }

.sideBySide { display: flex; align-items: stretch; }
.sideBySide .editorContainer { flex: 1 1; width: 50%; margin: 0px; display: inline-block; }
.sideBySide .bodyContainer { flex: 1 1; overflow: scroll; }
.resizer { user-select: none; cursor: row-resize;
  border-top: ridge 3px #337ab7; }
.resizer:hover, .resizer.active { border-top-color: #286090; } /* link highlight color */
.dark .resizer:hover, .dark .resizer.active { border-top-color: #c7ddef; }

.children { margin-left: 1em; }

.center {
  display: flex; flex-direction: column; place-items: center;
  margin: 10pt 0; /* match <p> spacing */
}

img, video { max-width: 100%; max-height: 100vh; }
img { image-orientation: none; } /* we do manual EXIF rotation */
.center img { width: fit-content; } /* for {center} environment */

.panel-secondbody { margin-top: -10px; padding-top: 0px; padding-bottom: 10px; }

code.raw, pre { white-space: pre-wrap; }
/* line-height normal to make box drawing look right */
code.raw, pre, .CodeMirror { line-height: normal; }
/* match <pre>, overriding Bootstrap code defaults */
code, pre { font-size: 100%; }
code { color: inherit; background-color: rgba(200,200,200,0.3); }
.dark code { background-color: rgba(62,62,62,0.5); }
pre code { background-color: inherit !important; }

s .katex .base, del .katex .base { position: relative; } /* already in KaTeX */
s .katex .base:after, del .katex .base:after { content: "";
  position: absolute; left: 0; width: 100%; top: 50%; display: block;
  height: 1.3px; background: #c7254e; }
s, del, s a, del a { text-decoration-color: #c7254e; text-decoration-thickness: 0.09em; }

.root { margin-bottom: 0px; } /* glom onto message below */

.beforeMessageDrop { position: absolute; left: 0px; top: -5px; width: 100%; height: 10px; }
.beforeMessageDrop.dragover { z-index: 1;
  background-image: linear-gradient(rgba(0,0,0,0), red, rgba(0,0,0,0)); }
.onMessageDrop.dragover { background-image: linear-gradient(rgba(0,0,0,0), red, rgba(0,0,0,0)); }

.messageParentDialog .modal-body > .row:first-child { margin-bottom: 1.5ex; }
.messageParentDialog .modal-body > .row:first-child > .col-xs-6:first-child { padding-top: 0.75ex; }
.messageParentDialog .modal-body > .row:first-child > .col-xs-6:last-child { padding-right: 30px; }
.messageParentDialog .modal-content { max-height: 90vh; }
/* Workaround for https://bugs.chromium.org/p/chromium/issues/detail?id=958802
 * (in addition to removing .flexColumn from .modal-content) */
.messageParentDialog .modal-body { max-height: calc(90vh - 159px); } /* 159px is the measured height of header and footer */
.messageParentDialog .tt-menu .id { font-size: x-small; }
.messageParentDialog .tt-menu .author { font-size: medium; }
.messageParentDialog .panel { border-bottom: 0; }
.messageParentDialog .modal-footer { text-align: left; }
.messageParentDialog .fa-lightbulb { font-size: x-large; margin-right: 0.5em; }
.flexColumn { display: flex; flex-direction: column; }
.flexRow { display: flex; flex-direction: row; }
.flexGrow { flex-grow: 1; }
.flexShrink { min-height: 50px; } /* allow equal-size shrinking height down to 50px */
.flexNoShrink { flex-shrink: 0; }
.flexCenter { align-items: center; }
.scrollbars { overflow: auto; float: none; max-height: 100%; }
.parentArrow { text-align: center; }
.parentArrow div { vertical-align: top; display: inline-block; }
.parentArrow1 { border-left: red dotted 2px; border-bottom: red dotted 2px; height: 14px; width: 15%; }
.parentArrow2 { margin-top: 12px; border-top: red dotted 2px; height: 14px; width: 15%; }
.parentArrow3 { margin-top: 12px; border-top: solid 2px; border-left: solid 2px; height: 14px; width: 15%; }
.parentArrow4 { border-right: solid 2px; border-bottom: solid 2px; height: 14px; width: 15%; }
.parentArrow .fas { margin-top: 5px; }
.parentArrow .fa-times { color: red; }

@media print { /* override Bootstrap defaults for link printing */
  a[href].btn:after { content: ""; }
  a[href].author:after { content: ""; }
  a[href].tagLink:after { content: ""; }
}

/* Based on Github's .markdown-body styling e.g.
 * https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables
 * Plus some special formatting for thead.
 * Also return text-align to left to counteract .message-body's
 * text-align: justify
 */
.message-body table { margin-bottom: 16px; text-align: left; }
.message-body table td, .message-body table th { padding: 6px 13px; border: 1px solid #ddd }
.message-body table tr { background-color: #fff; }
.message-body table tr:nth-child(2n) { background-color: #f8f8f8; }
.message-body table thead tr { background-color: #ccc; }
.dark .message-body table td, .dark .message-body table th { border: 1px solid #444 }
.dark .message-body table tr { background-color: #000; }
.dark .message-body table tr:nth-child(2n) { background-color: #222; }
.dark .message-body table thead tr { background-color: #555; }

blockquote { padding: 5px 10px; }
blockquote.thm { font-size: 17.5px; padding: 10px 20px; }

em em { font-style: normal }
em em em { font-style: italic }
em em em em { font-style: normal }
em em em em em { font-style: italic }
em em em em em em { font-style: normal }

/* Treat <details><summary>...</summary>...</details> roughly like
 * <div class="panel panel-default"><div class="panel-heading
 * compact">...</div>...</div>
 */
details {
  padding: 0 10px 10px 10px;
  /* From .panel */
  margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  /* From .panel-default */
  border-color: #ddd;
}
.dark details { border-color: #222; }
summary {
  /* From .panel-heading */
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px; border-top-right-radius: 3px;
  /* From .panel-heading.compact */
  padding: 5px;
  /* From .panel-default > .panel-heading */
  border-color: #ddd; background-color: #f5f5f5; color: #333;
}
.dark summary { border-color: #222; background-color: #222; color: #eee; }
details > summary {
  list-style: none;
  touch-action: manipulation; cursor: pointer;
  margin: 0 -10px;
}
details:not([open]) > summary { margin-bottom: -10px }
details[open] > summary { margin-bottom: 10px }
details > summary::before {
  margin-right: 0.5em; /* like .space */
  /* From .fas */
  font-weight: 900; font-family: "Font Awesome 5 Free";
  /* Tweaked from .btn-group-xs > .btn */
  padding: 0px 3px; font-size: 12px; border-radius: 3px;
  /* From .btn-default */
  color: #333; background-color: #fff; border: 1px solid #ccc;
  /* From .btn */
  display: inline-block; margin-bottom: 0; text-align: center;
  white-space: nowrap; vertical-align: middle; background-image: none;
}
.dark details > summary::before { color: #eee; background-color: #4d4d4d; border-color: #404040; }
details > summary:hover::before, details > summary:active::before, details > summary:focus::before { background-color: #e6e6e6; border-color: #adadad; }
.dark details > summary:hover::before, .dark details > summary:active::before, .dark details > summary:focus::before { background-color: #333; border-color: #212121; }
details > summary:active:hover::before, details > summary:active:focus::before { background-color: #d4d4d4; border-color: #8c8c8c; }
.dark details > summary:active:hover::before, .dark details > summary:active:focus::before { background-color: #212121; border-color: #000; }
details > summary:focus::before { outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px }
details:focus, summary:focus { outline: none; }
details > summary::before { content: "\f067"; }       /* From .fa-plus */
details[open] > summary::before { content: "\f068"; } /* From .fa-minus */

/* Search results: 5px to match title + 2px to center vertically */
.panel-heading .pull-right.badge { padding-top: 2px; }
