.content {
  margin-bottom: 15px;
  overflow-y: visible;
  overflow-x: hidden;
}

.error {
  color: red;
  padding: 5px;
  display: block;
}

.thread {
  clear: both;
}

.hrWrapper hr {
  margin: 0; /* margin bugs Virtuoso scrolling */
}

.postDesktop .hrWrapper {
  padding: 0.5em 0; /* instead of using margin, wrap with padding */
}

.hideButtonWrapper {
  height: 15px;
  width: 18px;
  padding-right: 5px;
  float: left;
}

.hideButtonWrapperNoImage {
  height: 25px !important;
}

.postDesktop .hideButton {
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
  height: 18px;
  display: inline-block;
  image-rendering: pixelated;
  cursor: pointer;
  transform: translateY(-1px);
}

.postDesktopHidden {
  opacity: 0.5;
}

.xmasHatWrapper {
  position: relative;
}

.xmasHat {
  position: absolute;
  pointer-events: none;
  top: -80px;
  left: 0;
  z-index: 9999;
}

@media (max-width: 640px) {
  .xmasHat {
    width: 100px;
    top: -20px;
    left: -15px;
  }
}

.xmasHat img {
  border: none;
}

/* clearfix to contain float elements */
.postDesktop::after {
  content: "";
  display: table;
  clear: both;
}

/* clearfix for OP content to contain floated thumbnail before replies */
.opContainer::after {
  content: "";
  display: table;
  clear: both;
}

.postDesktop .hideThread {
  background-image: var(--post-hide-button-background-image);
}

.postDesktop .unhideThread {
  background-image: var(--post-unhide-button-background-image);
}

.postDesktop .fileText a {
  color: var(--post-link-text-color);
  text-decoration: var(--post-link-text-decoration);
}

.postDesktop .fileText a:hover {
  color: var(--post-link-text-color-hover);
  text-decoration: var(--post-link-text-decoration-hover);
}

.postDesktop .postInfo {
  width: 100%;
}

.userAddress {
  padding: 0 5px;
  border-radius: 6px;
  font-size: 0.8em;
  cursor: pointer;
}

.userAddress:hover {
  color: var(--post-quotelink-text-color-hover) !important;
}

.postDesktop .subject {
  color: var(--post-subject-text-color);
  font-weight: var(--post-subject-font-weight);
}

.postDesktop .name, .replyDesktop .name {
  color: var(--post-name-text-color);
  font-weight: var(--post-name-font-weight);
}

.postDesktop .postNumLink a, .postDesktop .postNumLink span, .replyDesktop .postNumLink a, .replyDesktop .postNumLink span {
  color: unset;
  text-decoration: unset;
}

.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
  color: var(--button-desktop-text-color-hover);
}

.postDesktop .stickyIconWrapper, .replyDesktop .stickyIconWrapper {
  padding-left: 5px;
  padding-right: 10px;
}

.postDesktop .closedIconWrapper {
  padding-left: 5px;
  padding-right: 10px;
}

.postDesktop .addPaddingInBetween {
  padding-left: 8px;
}

.stickyIconWrapper img, .closedIconWrapper img {
  position: absolute;
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.postDesktop .addPaddingBeforeReply {
  padding-right: 15px;
}

.postDesktop .closeMedia {
  color: var(--button-desktop-text-color);
  text-decoration: underline;
  text-transform: capitalize;
}

.postDesktop .closeMedia:hover {
  cursor: pointer;
  color: var(--button-desktop-text-color-hover);
}

.postDesktop .replyButton {
  padding-left: 10px;
}

.postDesktop .replyButton a {
  color: var(--button-desktop-text-color);
  text-decoration: var(--button-desktop-text-decoration);
  text-transform: capitalize;
}

.postDesktop .replyButton a:hover {
  cursor: pointer;
  color: var(--button-desktop-text-color-hover);
}

.modQueueActions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.modQueueTypeField {
  font-weight: 400;
}

.modQueueButtonWrapper {
  display: inline-flex;
}

.modQueueActionButton {
  all: unset;
  cursor: pointer;
  text-transform: capitalize;
  color: var(--button-desktop-text-color);
  text-decoration: var(--button-text-decoration);
  font-family: inherit;
}

.modQueueActionButton:hover {
  color: var(--button-desktop-text-color-hover);
}

.modQueueActionButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modQueueStatusApproved {
  color: green;
  font-weight: 700;
}

.modQueueStatusRejected {
  color: red;
  font-weight: 700;
}

.approveButton {
  background-color: #3fa96b;
  color: #fff;
}

.rejectButton {
  background-color: #d9534f;
  color: #fff;
}

.postDesktop .spacer {
  width: 100%;
  padding: 5px;
}

.postDesktop .postMessage, .replyDesktop .postMessage {
  padding: 1em 40px;
  word-break: break-word;
}

.rulesMessage {
  font-weight: 700 !important;
}

.postDesktop .abbr {
  color: var(--post-mobile-abbr-text-color);
  font-size: var(--post-mobile-abbr-font-size);
}

.postDesktop .abbr a, .postDesktop .abbr span {
  color: var(--post-link-text-color);
  text-decoration: var(--post-content-link-text-decoration);
}

.postDesktop .abbr a:hover, .postDesktop .abbr span:hover {
  cursor: pointer;
  color: var(--post-link-text-color-hover);
  text-decoration: var(--post-content-link-text-decoration-hover);
}

.postDesktop .summary {
  padding-top: 10px;
  padding-left: 23px;
  position: relative;
  color: var(--post-mobile-abbr-text-color);
}

.stateString {
  color: var(--post-mobile-abbr-text-color);
}

.loadingString {
  display: block;
  color: var(--post-mobile-abbr-text-color);
} 

.postDesktop .summary .omittedRepliesButtonWrapper {
  position: absolute;
  top: 8px;
  left: 2px;
}

.postDesktop .summary .omittedRepliesButtonWrapper {
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
  height: 18px;
  display: inline-block;
  image-rendering: pixelated;
  cursor: pointer;
}

.postDesktop .summary .hideOmittedReplies {
  background-image: var(--post-hide-button-background-image);
}

.postDesktop .summary .showOmittedReplies {
  background-image: var(--post-unhide-button-background-image);
}

.postDesktop .summary a {
  color: var(--post-link-text-color);
  text-decoration: var(--post-content-link-text-decoration);
}

.postDesktop .summary a:hover {
  color: var(--post-link-text-color-hover);
  text-decoration: var(--post-content-link-text-decoration-hover);
}

/* clearfix to contain float elements */
.postMobile .postOp::after {
  content: "";
  display: table;
  clear: both;
}

.postMobile hr {
  padding-bottom: 30px;
}

.postMobile .thread {
  border-top: none;
  margin: 0;
  clear: both;
  padding-bottom: 30px;
}

.mobileUnhideButton {
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.mobileUnhideButton span {
  padding: 5px 18px 5px;
}

.unhideButtonHr {
  margin: 0;
}

.quotePreview {
  padding: 3px;
}

.postMobile .postContainer {
  background-color: var(--post-mobile-background-color);
}

.postMobile .postOp {
  display: inline;
}

.postMobile .postInfo {
  overflow: hidden;
  border-bottom: var(--post-mobile-info-border-bottom);
  border-top: var(--post-mobile-info-border-top);
  background-color: var(--post-mobile-info-background-color);
  color: var(--post-mobile-info-text-color);
  padding: 5px;
  clear: left;
}

.postMobile .nameBlock {
  clear: none;
}

.postMobile .nameBlock .name {
  color: var(--post-mobile-name-text-color);
  font-weight: var(--post-mobile-name-font-weight);
}

.postMobile .stickyIconWrapper {
  padding: 0 5px;
}

.postMobile .closedIconWrapper {
  padding: 0 5px;
}

.postMobile .addPaddingInBetween {
  padding: 0 13px;
}

.postMobile .nameBlock .subjectWrapper {
  display: block;
}

.postMobile .nameBlock .subject {
  color: var(--post-mobile-subject-text-color);
  font-weight: var(--post-mobile-subject-font-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.postMobile .dateTimePostNum {
  display: block;
  text-align: right;
}

.postMobile .postNumLink a {
  color: unset;
  text-decoration: unset;
}

.postMobile .postMessage {
  padding: 10px;
  font-size: var(--post-mobile-content-font-size);
  word-break: break-word;
}

.postMobile .postLink {
  clear: both;
  background-color: var(--post-mobile-link-background-color);
  border-top: var(--post-mobile-link-border-top);
  border-bottom: var(--post-mobile-link-border-bottom);
  padding: 5px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.postMobile .postLink .info {
  color: var(--post-mobile-link-info-text-color);
}

.postMobile .abbr {
  color: var(--post-mobile-abbr-text-color);
  font-size: var(--post-mobile-abbr-font-size);
}

.postMobile .abbr a, .postMobile .abbr span {
  color: var(--post-link-text-color);
  text-decoration: var(--post-content-link-text-decoration);

}

.postMobile .abbr a:hover, .postMobile .abbr span:hover {
  cursor: pointer;
  color: var(--post-link-text-color-hover);
  text-decoration: var(--post-content-link-text-decoration-hover);
}

.replyDesktop {
  padding-top: 4px;
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

.replyDesktop .sideArrows {
  color: var(--side-arrows-color);
  float: left;
  padding: 0 2px;
}

.replyDesktop .reply {
  background-color: var(--reply-desktop-background-color);
  border: var(--reply-desktop-border);
  border-top: var(--reply-desktop-border-top, revert);
  border-left: var(--reply-desktop-border-left, revert);
  display: table;
  padding: 0 2px 2px 2px;
}

.replyDesktop .postInfo {
  padding: 3px 3px 0 0;
}

.quoteLink {
  color: var(--post-quotelink-text-color);
  text-decoration: var(--post-quotelink-text-decoration);
}

.quoteLink:hover {
  color: var(--post-quotelink-text-color-hover);
  text-decoration: var(--post-quotelink-text-decoration-hover);
  cursor: pointer;
}

.quoteLinkUnavailable,
.quoteLinkUnavailable:hover {
  color: var(--post-quotelink-text-color);
  text-decoration: line-through;
  cursor: default;
}

.replyMobile {
  padding-top: 7px;
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}

.replyDesktop.pretextVirtualizedReply,
.replyMobile.pretextVirtualizedReply {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.replyMobile .replyContainer {
  background-color: var(--post-mobile-background-color);
  border-bottom: var(--post-mobile-border-bottom);
}

/* clearfix to contain float elements */
.replyMobile .replyContainer::after {
  content: "";
  display: table;
  clear: both;
}

.replyMobile .postInfo {
  padding: 5px;
  border-top: var(--post-mobile-info-border-top);
  border-bottom: var(--post-mobile-info-border-bottom);
  background-color: var(--post-mobile-info-background-color);
  color: var(--post-mobile-info-text-color);
}

.replyMobile .nameBlock {
  display: inline;
  float: left;
}

.replyMobile .dateTimePostNum {
  float: right;
  text-align: right;
}

.capcodeMod {
  color: var(--post-capcode-mod-text-color) !important;
}

.capcodeAdmin {
  color: #F00 !important;
}

.capcodeIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  image-rendering: pixelated;
  transform: translateY(2px);
}

.capcodeIconMobileWrapper {
  padding-right: 15px;
}

.capcodeIconMobile {
  position: absolute;
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  transform: translateY(-1px);
}

.capcodeModIcon {
  background-image: url('/assets/icons/board-mod.png');
}

.capcodeAdminIcon {
  background-image: url('/assets/icons/board-admin.png');
}

.pendingCid {
  color: red !important;
  font-weight: 700 !important;
}

.replyToPost {
  cursor: pointer;
}

.redEditMessage {
  text-transform: uppercase;
  font-weight: 700;
  color: red;
}

.pendingApproval {
  color: red;
  font-weight: 700;
}

.failedPublishNotice {
  display: block;
  color: red;
  font-weight: 700;
}

.failedDeletePostAction {
  color: var(--button-desktop-text-color);
  font-weight: 400;
}

.failedDeletePostButton {
  all: unset;
  font: inherit;
  text-transform: capitalize;
  color: var(--button-desktop-text-color);
  text-decoration: var(--button-text-decoration);
  cursor: pointer;
}

.failedDeletePostButton:hover:not(:disabled) {
  color: var(--button-desktop-text-color-hover);
}

.failedDeletePostButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.grayEditMessage {
  color: var(--post-mobile-abbr-text-color);
}

.backlink, .backlinkHash {
  font-size: 0.8em;
}

.backlink {
  padding-left: 5px;
}

.backlink, .backlinkHash {
  color: var(--post-backlink-text-color);
  text-decoration: var(--post-backlink-text-decoration);
}

.backlink:hover, .backlinkHash:hover {
  color: var(--post-backlink-text-color-hover);
  text-decoration: var(--post-backlink-text-decoration-hover);
  cursor: pointer;
}

.mobileReplyBacklinks {
  padding: 0 0;
  padding-bottom: 3px;
  line-height: 2;
  background-color: var(--reply-backlink-mobile-background-color);
  border-top: var(--reply-backlink-mobile-border-top);
  clear: both;
}

.highlight {
  background: var(--reply-highlight-background-color) !important;
  border: var(--reply-highlight-border) !important;
  border-left: var(--reply-highlight-border-left, revert) !important;
  border-top: var(--reply-highlight-border-top, revert) !important;
}

.replyQuotePreview {
  background:  var(--quote-preview-background);
  border: var(--quote-preview-border);
  border-right: var(--quote-preview-border-right);
  border-bottom: var(--quote-preview-border-bottom);
  box-sizing: border-box;
  max-width: calc(100vw - 20px);
}

.postDesktop .replyQuotePreviewSpacer {
  padding: 1.5px 0;
}

.editedInfo {
  color: var(--post-mobile-abbr-text-color);
  font-size: var(--post-mobile-abbr-font-size);
}

.showOriginal {
  color: var(--post-link-text-color);
  text-decoration: var(--post-content-link-text-decoration);
}

.showOriginal:hover {
  cursor: pointer;
  color: var(--post-link-text-color-hover);
  text-decoration: var(--post-content-link-text-decoration-hover);
}

@media (max-width: 640px) {
  .replyQuotePreview {
    margin-right: 10px;
  }

  .postDesktop {
    display: none;
  }

  .replyDesktop {
    display: none;
  }

  .loadingString {
    margin-top: 10px;
    margin-left: 5px;
  }
}

@media (min-width: 640px) {
  .error {
    padding-left: 0;
    padding-bottom: 0;
  }

  .replyQuotePreview {
    padding-right: 7px;
    padding-left: 2px;
  }

  .replyQuotePreviewOp {
    width: min(520px, calc(100vw - 20px));
  }

  .postMobile {
    display: none;
  }

  .replyMobile {
    display: none;
  }
}

.hiddenReplyEditMenuSpacer {
  width: 6px;
  display: inline-block;
}


.removedContent {
  color: red;
  font-weight: 700;
  text-transform: uppercase;
}

.alert {
  color: var(--mod-queue-alert-color, red);
  font-weight: bold;
  animation: blink 2s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
