:root {
    /* Colors */
    /*--background-dark: #20202F;*/
    --background-dark: #1b1b25 !important;
    --background-medium: #202033;
    --background-light: #242436;
    --text: #a7a7ad;
    --link: #7787a3;
    --link-hover: #ff79c6;
    --error: #ff5555;

    /* Border properties */
    --common-border: 1px solid black;
}

/* --- Fonts --- */

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/.media/a0bf60ef0f83c5ed4d7a75d45838548b1f6873372dfac88f71804491898d138f') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/.media/5590990c82e097397517f275f430af4546e1c45cff408bde4255dad142479dcb') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

* { font-family: 'Calibri', sans-serif;}

body {
    background: var(--background-dark);
    color: var(--text);
    background-image: none !important;
}

a {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

/* --- Navigation --- */
nav.navHeader {
    background: var(--background-medium);
    color: var(--text);
    border-width: 1px;
    border-color: black;
}

/* --- Theme and Settings --- */
#themeSelector,
#settingsMenu,
#watchedMenu {
    background: var(--background-light);
    color: var(--text);
    border: var(--common-border);
    border-radius: 5px;
}

#cssInput,
#jsInput {
    background: var(--background-light);
    color: var(--text);
}

.watchedCellDismissButton,
#watchedMenu td,
.settingsTab,
.embedButton,
.close-btn {
    color: var(--link);
}

.watchedCellDismissButton:hover,
#watchedMenu td:hover,
.embedButton:hover,
.close-btn:hover {
    color: var(--link-hover);
}

.selectedTab {
    color: var(--link-hover);
}

/* --- Thread Stats --- */
span.thread-stats-display,
span.statNumb {
    font-size: 12px;
    color: var(--text);
}

span.statLabel {
    color: var(--link-hover);
    font-weight: bolder;
}

/* --- Board Header --- */
.boardHeader #labelName,
.boardHeader p#labelDescription {
    color: var(--link-hover);
}

.boardHeader p {
    color: var(--text);
}

/* --- Panel Messages --- */
#panelMessage {
    color: var(--error);
}

#panelMessage div {
    padding: 6px 0px 0px 0px;
}

/* --- Buttons and Inputs --- */
label#favoriteButtonLabel,
.innerUtility.top a,
.hideButton,
.extraMenuButton {
    color: var(--link) !important;
}

.innerUtility.top a:hover,
.hideButton:hover,
.extraMenuButton:hover {
    color: var(--link-hover) !important;
}

#postingForm input[type=text],
#postingForm textarea,
#quick-reply input[type="text"],
#quick-reply textarea,
.divRefresh input,
input[type=button],
#postingForm input[type=submit],
input[type=submit],
button,
.modalTableBody input[type=text],
.modalTableBody select {
    background-color: var(--background-dark);
    color: var(--text);
    border: var(--common-border);
    border-radius: 5px;

}

input[type="checkbox" i] {
    margin: 3px;
}

/* --- Posting Form --- */
#newPostFieldset legend {
    background: var(--background-medium);
    border: var(--common-border);
    border-radius: 5px;

}

#newPostFieldset #newPostFieldHide:checked~form {
    display: block;
    background-color: var(--background-medium);
    border: var(--common-border);
    border-radius: 5px;

}

#postingForm th {
    background-color: transparent;
    border: none;
}

#quick-reply {
    background-color: var(--background-light) !important;
    color: var(--text);
    border: var(--common-border);
    border-radius: 5px;

}

#quick-reply th {
    background: var(--background-light);
    border: var(--common-border);
    border-radius: 5px;
    color: var(--text);
}

.postingFormExtra {
    display: none;
}

fieldset legend {
    background-color: var(--background-medium) !important;
}

.showFormDetails summary {
    color: var(--link);
}

.showFormDetails summary:hover {
    color: var(--link-hover);
}

/* --- Uploads --- */
.dropzone {
    background: var(--background-medium);
    border: var(--common-border);
    border-radius: 5px;
    color: var(--text);
}

.uploadDetails {
    margin-top: 0.5em;
    margin-bottom: 0em;
    margin-left: 0.7em;
}

.uploadDetails>span.hideFileButton {
    color: var(--link);
}

.uploadCell .imgLink {
    margin: 0.7em;
}

.uploadCell img:not(.imgExpanded) {
    max-width: 160px;
    max-height: 125px;
    object-fit: contain;
    height: auto;
    width: auto;
    margin-right: 0em;
    margin-bottom: 0em;
}

/* --- Posts --- */
.postInfo {
    display: block;
    background: var(--background-medium);
    margin: 0px;
    border-radius: 5px 5px 0px 0px;
    padding: 2px 13px 5px 13px;
}

.labelSubject {
    color: var(--link-hover) !important;
    margin: 5px 2px 5px 2px;
}

.noEmailName,
.noEmailName:hover,
.watchedNotification {
    color: #bd93f9 !important;
    margin: 5px 2px 5px 2px;
}

span.labelCreated, span.spanId, span.relativeTime {
    margin: 5px 2px 5px 2px;
}

.youName, .youName:hover {
    color: var(--link-hover) !important;
    margin: 5px 2px 5px 2px;
    font-weight: bolder;
    text-decoration: underline;
}

.youName::after {
    display: none;
}

.linkSelf,
.linkQuote {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: bold;
    font-size: 12px;
    color: var(--link);
}

a.quoteLink.postLink.you {
    color: #8be9fd !important;
}

.you:hover {
    color: var(--link-hover);
}

.linkSelf {
    margin: 5px 2px 5px 2px;
    visibility: hidden;
}

.linkSelf::after {
    visibility: visible;
    content: "/#/";
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: -1em;
}

.linkQuote {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: -0.15em;
}

.innerPost {
    background: var(--background-light);
    border: var(--common-border);
    border-radius: 5px;
    padding: 0px;
}

span.unhideButton {
    color: var(--link);
}

span.unhideButton:hover {
    color: var(--link-hover);
}

.markedPost {
    border: 1px solid var(--link);
    color: var(--text);
}

.divMessage {
    font-size: 14px !important;
    color: var(--text);
}

.panelBacklinks {
    padding: 3px 5px 3px 5px;
}

.panelBacklinks a {
    color: #bd93f9;
}

.fcx-replies-plus .inlineQuote .innerPost {
    border-color: var(--link) !important;
    min-width: 99%;
    font-size: 14px !important;
}

.postCell:target .innerPost {
    background: var(--background-light);
    color: var(--text);
    border-style: dashed;
    border-color: var(--link);
}

.fcx-replies-plus .inlineQuote .hideButton {
    margin-left: 0.25em !important;
}

.threadBottom .threadInfo {
    display: block;
    background-color: var(--background-dark);
    border: var(--common-border);
    border-radius: 5px;
    padding: 2px 5px 2px 5px;
    font-size: 12px;
}

.threadInfo #postCount:before,
.threadInfo #idCount:before,
.threadInfo #fileCount:before {
    color: var(--link-hover);
}

summary.threadReplyOverflow {
    color: var(--link);
}

summary.threadReplyOverflow:hover {
    color: var(--link-hover);
}

/* --- Catalog --- */
.catalogCell {
    background: var(--background-medium);
    border: var(--common-border);
    border-radius: 5px;
}

.quoteLink {
    font-size: 14px;
    color: var(--link) !important;
}

.quoteLink:hover, a.backLink.postLink.you {
    color: var(--link-hover) !important;
}

/* --- Modals --- */
.modalForm {
    background: var(--background-medium);
    border: var(--common-border);
    border-radius: 5px;
    color: var(--text);
}

.modalTableBody th {
    background: var(--background-medium);
}

/* --- Lists --- */
.floatingList {
    background: var(--background-light);
    border: var(--common-border);
    border-radius: 5px;

}

.floatingList ul li {
    border-bottom: 0px;
    background: var(--background-light);
    color: var(--text);
}

.floatingList ul li:hover {
    color: var(--link-hover);
    background-color: var(--background-medium);
}

/* --- Fieldsets --- */
.titleFieldset {
    background: var(--background-light);
    border-radius: 5px;
}

.titleFieldset legend {
    border-radius: 5px 5px 0px 0px;
}

/* --- Other --- */
.containPages {
    background-color: transparent;
}

.uploadDetails .sizeLabel {
    display: none;
}

#media-viewer {
    background: transparent;
    border: none;
}

.greenText {
    color: #50fa7b;
}

.pinkText {
    color: #ff79c6;
}

.redText {
    color: var(--error);
}

h3.labelBoard,
.panelASN,
.panelBypassId,
.panelIp {
    margin-left: 1.2em;
    font-size: 13px !important;
}

.panelASN {
    margin-top: 0.5em;
    font-size: 13px !important;
}

a.linkEdit {
    margin-left: 1em;
}

a.linkEdit,
a.linkHistory,
a.linkFileHistory,
a.linkOffenseRecord {
    margin-top: 5px;
    margin-bottom: 5px;
}

.divHash, a.unlinkLink {
    margin-left: 0.7em;
}

.selectedCell {
    background: var(--background-dark);
    border: var(--common-border);
    border-radius: 5px;
    color: var(--text);
}

/* --- Script Styling --- */

.postNum.index {
    /*color: #bd93f9;*/
    color: #ffb86c !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: normal;
    font-size: 12px;
}

.threadedReplies {
    border-color: #6272a4 !important;
}

span.hash-link {
    color: var(--link) !important;
}

.quoteTooltip .innerPost {
    padding: 0px;
    border: 1px solid var(--link);
}

body:not(#SP1#SP1) .yourPost {
    border-left: 1px solid var(--link-hover) !important;
}

body:not(#SP1) .quotesYou {
    border-left: 1px solid #8be9fd !important;
}

.multipleUploads .uploadCell:not(.expandedCell) {
    max-width: 250px !important;
}

.replyUnderline {
    text-underline-position: below !important;
    text-underline-offset: 0px !important;
}

.quote-inlined {
    text-underline-position: auto !important;
    text-underline-offset: 1px !important;
}

span.trashIndicator {
    margin-top: 7px;
    margin-right: -8px;
    margin-left: 5px;
}

code {
    font-size: 12px;
    background-color: var(--background-dark);
    border-radius: 5px;
}

.fcx-in-nav .my-yous__yous {
    background: var(--background-dark) !important;
    border: var(--common-border);
    border-color: black !important;
    border-radius: 5px;
    color: var(--text) !important;
}

.labelRole {
    color: var(--error);
    font-weight: bolder;
    text-decoration: underline;
}

/* --- Mod View --- */

:not(.is-catalog) body {
    background: var(--background-dark) !important;
    background-image: none !important;
}

.archiveCell {
    margin: 2px 10px 0px 10px;
}

.sauceLinksContainer {
    display: inline-flex !important;
    margin-top: 0px !important;
    margin-left: 3px !important;
}

/* ↓ The button disabled effect happens here. Now has a loading icon to let you know the post is going through! */
input[value="Reload"]:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
button:disabled {
  cursor: wait;

  /* The animated loading icon that appears only for disabled buttons to give the illusion of loading. If your icon is .apng format, remove the .png extension from the hash. */
  background-image: url("/.media/eaa3eebca47711a31be420ed2f0d9700d358e595cbec80d427dcff8234fa6cdb.gif") !important;

  /* Don't change this  if you want to re-use the animated loading icon for your CSS theme. */
  padding-left: 20px;

  /* Don't change this if you want to re-use the animated loading icon for your CSS theme. */
  background-size: 16px 16px;

  /* Don't change this if you want to re-use the animated loading icon for your CSS theme. */
  background-repeat: no-repeat;

  /* Don't change this if you want to re-use the animated loading icon for your CSS theme. */
  background-position: 2px center;
}

.target-highlight {
    background-color: var(--background-light) !important;
    border-color: var(--link) !important;
    color: var(--text) !important;
}

.characterIdIcon {
    width: 18px !important;
    height: 18px !important;
    object-fit: cover !important;
    overflow: hidden !important;
    vertical-align: text-bottom !important;
    display: inline-block;
}

.labelId:before {
    content: '#';
}

.labelId {
    background-image: none;
    font-family: 'Jetbrains Mono', monospace;
    text-transform: uppercase;
    vertical-align: 1px;
}

.labelId.glows {
    box-shadow: 0 0 15px #50fa7b !important;
}

/* --- Spoiler Test -- *//*
span.spoiler:not(:hover) {
    font-family: 'MadokaRunes'!important;
    color: white;
    font-size: 10px !important;
}

span.spoiler {
    background: black !important;
    text-shadow: rgba(255,121,198, 0.75) 0px 0px 8px;
}

span.spoiler:hover {
    color: white !important;
} */

.hideLink {
    margin-left: 8px;
    margin-right: 5px;
    margin-top: 5px;
}

:not(#media-viewer) > video {
    margin-top: 5px;
}

#hamburger-menu-icon #sidebar-menu {
    background: var(--background-dark);
    border: 1px solid black;
}

.coloredIcon.watcherButton.mobileAlert {
    color: var(--link-hover);
}

#sidebar-menu ul {
    padding: 0.2em;
    margin: 5px 0px 5px 0px;
}

.hamburger-bottom a {
    margin-left: 15px;
}

.labelDeleted {
    margin-left: 3px;
}

.innerPost.innerPost:has(> .postInfo > .youName) {
    border-left: 1px solid #50fa7b !important;
}