@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("4chan.org") {

/*---------------------taken from moko's--------------------*/

/*Notes:
 * IMPORTANT: navigation controls are not unified
 * allow firefox to let websites pick their own fonts
 * for proper css font overriding
 * changing fonts will break navigation controls
 * adjust as necessary
 */

/*set colors, i.e.var(post-bg)*/
:root{
  --head-bg: rgba(16,19,39,0.8) !important;
  --post-bg: rgba(27,27,27,1) !important;
  --alt-bg: rgba(63,68,73,1) !important;
  --shadow-text: rgba(9,8,39,1) !important;
  --highlight-text: rgba(253,213,77,1) !important; /*yellow*/
  --pink-text: rgba(243,86,110,1) !important; /*salmon pink*/
  --one-text: rgba(139,123,112,1) !important;
  --two-text: rgba(219,75,96,1) !important;/*another shade of pink*/
  --three-text: rgba(62,132,80,1) !important;
  --potato-text: rgba(248,187,87,0.7) !important;
  --shadow-box: rgba(63,68,73,0.75) !important;
  --thread-bg: rgba(164,171,219,0.2) !important;
}

/*using these colors*/

/*--------------------block bg colors---------------------*/

/* settings and stats and file info block bg */
.settings-link, span.menu-button, #thread-stats, .container, .fileText{
  color: var(--one-text) !important;
}

/* qr and date block bg */
.qr-shortcut, span.dateTime, .yotsuba.fixed:root #custom-board-list .current, .yotsuba-b.fixed:root #custom-board-list .current, .yotsuba-b:root #header-bar:hover, .yotsuba-b:root #board-list a:hover{
  color: var(--potato-text) !important;
}

/* quote bg */
div.post div.postInfo span.postNum, div.post div.postInfo span.postNum a{
  color: var(--three-text) !important;
}

/* watcher and name block bg, quote text */
#watcher-link, .warning, div.post div.postInfo span.nameBlock span.name, div.post div.postInfo span.nameBlock span.postertrip, .nameBlock, .yotsuba_b_new .backlink, /*.quotelink,*/ .yotsuba_b_new .backlink a{
  color: var(--two-text) !important;
}

/* EAI and subject block bg */
.expand-all-shortcut, .subject, div.post div.postInfo span.subject, #custom-board-list, .yotsuba-b:root #board-list a, .yotsuba:root #board-list a{
  color: var(--two-text) !important;
}

/*------------------------text colors----------------------*/

/* main text */
body, #qr, #thread-watcher, #thread-watcher .refresh, .menu-button .fa, #watched-threads .watcher-title, #watched-threads .watcher-unread, #thread-watcher a, .entry, #qr textarea.field, .right-box, .field, .globalMessage, div#boardNavDesktop, table.postForm > tbody > tr > td:first-child, input[type="text"], input[type="password"], table.postForm > tbody textarea, #recaptcha_response_field, div#boardNavDesktopFoot, .gal-count{
  color: var(--one-text) !important;
}

/* links & quoted */
/*a, a:hover,*/ div.post div.postInfo span.postNum a:hover, a.deadlink, a.close, .tab-filter, a.tab-main.tab-selected, #qr-no-file, .yotsuba-b:root .entry, /*#boards a,*/ .boxbar, .deadlink, .gal-name/*,#qr select, select*/{
  color: var(--three-text) !important;
}

/*located below thread op in normal view*/
/*also color of non-hovered reply links*/
a.replylink:not(:hover){
  color: var(--two-text) !important;
  transition: 0.25s !important;
}

a.quotelink:not(:hover){
  color: var(--pink-text) !important;
  transition: 0.25s !important;
}

/*announcement*/
#globalMessage{
  margin-top: 5px !important;
  color: var(--pink-text) !important;
  background: var(--head-bg) !important;
  width: 500px !important;
  margin-left: 30px !important;
  margin-right: 30px !important;
  opacity: 0.1 !important;
  transition: 0.25s ease-out !important;
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

#globalMessage:hover{
  opacity: 0.75 !important;
  transition: 0.25s ease-in !important;
}

/*NAVIGATION COLORS*/
a,
a:hover,
#qr select,
select,
span#totop.btn-wrap > span.button,
#filters-ctrl,
#settings{
  color: /*#7ba4ba*/ var(--potato-text) !important;
  transition: 0.25s !important;
}

#boards a,
span.boardList a,
span.customboardList{
  color: var(--pink-text) !important;
}

span.boardList a:hover,
span.customboardList:hover{
  color: var(--three-text) !important;
}

/*set colors for some buttons in thread view*/
div.navLinks.desktop > label:hover,
input:hover,
div.navLinks > span:hover,
div.navLinks.desktop > span:hover{
  color: var(--pink-text) !important;
}

/*start a new thread, post reply*/
div#togglePostFormLink.desktop,
div#togglePostFormLink.desktop > a{
  font-size: 12px !important;
  font-weight: unset !important;
  text-decoration: unset !important;
  color: var(--potato-text) !important;
}

/*text color in search bars*/
#qf-ctrl{
  color: var(--pink-text) !important;
}

/*green text*/
blockquote > span.quote{
  color: var(--three-text) !important;
}

/*catalog stats and post titles*/
div#meta,
.meta,
div.teaser b{
  font-weight: unset !important;
  text-decoration: none !important;
}

div.teaser b{
  color: var(--potato-text) !important;
}

.meta,
.meta b{
  color: var(--pink-text) !important;
  text-shadow: none !important;
  text-transform: none !important;
  text-decoration-style: unset !important;
  font-size: 12px !important;
  opacity: 0.85 !important;
  font-family: Verdana !important;
  font-style: normal !important;
  font-weight: unset !important;
}

/*quick reply box container*/
#quickReply > form > div#qrForm > div > textarea{
  background-color: var(--post-bg) !important;
  color: var(--one-text) !important;
}

/*title obviously*/
div.boardBanner > div.boardTitle{
  font-family: /*Tahoma,sans-serif*/ Verdana !important;
  font-size: 36px;
  font-weight: normal !important;
  letter-spacing: 4px !important;
  margin-top: 0px !important;
  margin-bottom: 4px !important;
  border: none;
  /*text-shadow: 3px 3px 1px #000000 !important;*/
}

.div.boardTitle, .yotsuba-b:root div.boardTitle,
div.boardTitle{
    display: inherit !important;
    color: var(--two-text) !important;
    padding: 5px !important;
    background: transparent !important;
}

/*boardlist*/
span.boardList,
span.customboardList{
  color: var(--alt-bg) !important;
}

/*main controls*/
div.navLinks.desktop,
div#ctrl-top.desktop,
span.navLinks.navLinksBottom.mobilebtn{
  color: var(--potato-text) !important;
}

.navLinks a:hover,
div#ctrl-top.desktop a:hover,
div.navLinks:nth-child(19) > label:nth-child(6):hover,
span#totop.btn-wrap > span.button:hover{
  color: var(--pink-text) !important;
}

/*pull out stats*/
.thread-stats:hover,
div.navLinks:nth-child(19) > span:nth-child(7):hover{
  color: var(--pink-text) !important;
}

/*search in normal*/
#search-box{
  color: var(--pink-text) !important;
}

/*brackets normal view*/
div.pagelist.desktop,
.pagelist{
  color: var(--alt-bg) !important;
}

div.prev a:hover{
  color: var(--three-text) !important;
}

div.pagelist div.pages a:hover,
div.pagelist.desktop:hover{
  color: var(--pink-text) !important;
  transition: 0.25s ease-in !important;
}

/*bracket color in catalog search*/
span.btn-wrap:nth-child(5){
  color: rgba(255,255,255,0) !important;
}

/*-------------actual bg colors----------------------*/

/* reply bg */
div.reply, .catalog-mode:root .board, .inline .post{
  background: var(--post-bg) !important;
}

/* header bg and main site bg */
#header-bar, .yotsuba-b:root:not(.fixed) #header-bar, .boxcontent, .top-box, .left-box, .right-box, #recent-images a {
  background: var(--post-bg) !important;
}

/* menus, watcher, linked posts and qr bg */
#thread-watcher, #fourchanx-settings.dialog,
fieldset legend, .yotsuba-b:root .suboption-list > div:last-of-type, .dialog:not(#qr):not(#thread-watcher):not(#header-bar), #fourchanx-settings code, kbd, /*.reply:target, .reply.highlight,*/.yotsuba-b:root .inline{
  background: var(--alt-bg) !important;
}

/* quoted bg */
 .yotsuba:root .inline, .boxbar, #qr select, select{
   background: var(--alt-bg) !important;
 }

/* notifications */
.message{
    background-color: var(--post-bg) !important;
    color: var(--one-text) !important;
    text-shadow: none !important;
}

/*highlights reply quotes in thread*/
.reply:target, .reply.highlight{
  color: var(--three-text) !important;
  background: var(--alt-bg) !important;
  opacity: 1 !important;
  transition: 0.25s !important;
  border: none !important;
  border-style: none !important;
}

/*quotes to (you) border color, it's useless disable it*/
.highlight-you:root .quotesYou.opContainer,
.highlight-you:root .quotesYou > .reply{
  border-top: 0px dotted var(--two-text) !important;
  border: none !important;
  border-style: none !important;
  transition: 0.25s !important;
}

/*-----------------sets majority of fonts------------------------*/

/*any font size changes higher than 12
 *requires adjusting the size and position
 *of the as yet un-unified navigation controls*/
/* fonts */
body, .dd-menu li, .post.reply, .opContainer, #board-list, #custom-board-list, #menu.dialog, .entry, .yotsuba-b:root .suboption-list > div:last-of-type, option, #qr textarea.field, .field, #index-search.field, #updater.dialog, #thread-stats.dialog, #thread-stats, .boardSubtitle, #thread-watcher, div.post div.postInfo span.nameBlock span.postertrip, div.post div.postInfo span.nameBlock span.name, div.post div.postInfo span.subject, #qr:not(.captcha-open) .captcha-counter > a, #file-n-submit > input, #watcher-link, .settings-link, .expand-all-shortcut, .qr-shortcut, div#boardNavDesktop, .yotsuba_b_new .backlink, .quotelink, div#boardNavDesktop a, table.postForm > tbody > tr > td:first-child, input[type="text"], input[type="password"], table.postForm > tbody textarea, #recaptcha_response_field, div#boardNavDesktopFoot a, #qr select{
  font-family: "Verdana" !important;
  font-weight: normal !important;
  font-size: 12px !important;
  text-decoration: unset !important;
  font-style: normal !important;
}

/*buttons*/

.settings-link.fa-wrench:before, .qr-shortcut:before, #watcher-link:before{
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
}

/*forgot what this linked to because >nth-child*/
#ft > ul:nth-child(1),
#site-stats > div:nth-child(1) > div:nth-child(1) > h2:nth-child(1),
#popular-threads > div:nth-child(1) > div:nth-child(1) > h2:nth-child(1),
  #boards > div:nth-child(1) > div:nth-child(1) > h2:nth-child(1){
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
}

span.postNum a:hover{
  font-family: 'Verdana' !important;
}

/*-----------------------------------------------*/



/*what the fuck a mobile setting*/
/*mobile version needs work*/

.postInfoM.mobile,
.backlink.mobile,
#boardNavMobile{
  background: var(--post-bg) !important;
}

span.mobileib.button,
a.mobile{
  background: var(--post-bg) !important;
}



/*-----------------presentation--------------------------*/

/*front page*/
div#popular-threads.box-outer.top-box,
div#boards.box-outer.top-box,
div#site-stats.box-outer.top-box{
  box-shadow: 3px 3px 0px var(--shadow-box) !important;
}

/*background behind the post replies*/
body, html{
  padding-top: /*30*/5px !important; /*das ist meine*/
  padding-bottom: /*10*/15px !important;
  /*background: var(--head-bg) !important;*/
  background-repeat: repeat !important;
  background-image: url("https://a.pomf.cat/yjbpvh.jpg") !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  margin: auto !important;
}

#quote-preview /*affects OP link hover and hover post bodies*/{
  display: inline-block !important;
  z-index: 1050 !important; /*if turned off, visibly goes under navigation*/
  background: var(--post-bg) !important;
  border: none !important;
  color: var(--potato-text) !important;
  box-shadow: 2px 2px 0px var(--shadow-box) !important;
  font-weight: unset !important;
  word-wrap:break-word !important;
  transition: 0.25s cubic-bezier !important;
}

div.postContainer.opContainer/*opening post itself*/{
  display:inline-block !important;
  background: var(--post-bg) !important;
  box-shadow: 3px 3px 0px var(--shadow-box) !important;
  word-wrap: break-word !important;
  width: 79.4% !important;
  padding-right: 4px !important;
  padding-top: 6px !important;
  margin-top: 15px !important;
  padding-bottom: 10px !important;
  margin-bottom: 5px !important;
  transition: 0.25s !important;
}

/*why did moot have this hooked to actual thread apperance*/
.thread{
  /*display: block !important;
  max-block-size: 250px !important;*/
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 10px !important;
  padding-top: 10px !important;
  max-height: 100% !important;
  background-color: var(--thread-bg) !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  margin-bottom: 10px !important;
}

/*affects the small catalog viewing of threads*/
div#threads.extended-small{
  margin: 0px 45px 0px !important;
  /*display: -moz-box !important;
  margin-top: 150px !important;*/
  /*uncomment above for vertical browsing of catalog
   *un-aligned broken image and teaser alignment*/
}

/*replies in a thread*/
div.thread div.reply{
  display: inline-block !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  padding-bottom: 10px !important;
  width: 79.4% !important;
  word-wrap: break-word !important;
  border-right-width: 0px !important;
  border-bottom-color: rgba(0,0,0,0) !important;
  box-shadow: 3px 3px 0px var(--shadow-box) !important;
}

/*[code]install gentoo[/code]*/
.prettyprint{
  border: medium none !important;
  padding: 5px !important;
  display: block !important;
  max-height: 400px !important;
  overflow-x: auto !important;
  max-width: 600px !important;
  margin: auto !important;
  background: var(--post-bg) !important;
}

/*drop down arrow REPORT U menu*/
.dd-menu li{
  cursor: pointer;
  background: var(--post-bg) !important;
  color: var(--two-text) !important; /*text color in menu*/
  border-style: none !important;
  position: relative;
  padding: 4px 4px !important;
  box-shadow: 3px 3px 0px 0px var(--shadow-box) !important;
}

/*----preview data in catalog when hovering over image-----*/

/*set text*/
#post-preview,
.post-author,
.post-subject,
.post-tripcode,
.post-teaser,
.post-page,
.post-page:before,
.post-page:after,
.post-last{
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: -moz-none !important;
  text-align: center !important;
}

#post-preview{
  background: var(--post-bg) !important;
  padding: 5px 8px 4px 8px !important;
  word-wrap: break-word !important;
  white-space: pre-line !important;
  max-width: 500px !important;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.3) !important;
  border-radius: unset !important;
  color: var(--potato-text) !important;
}

.post-subject{
  color: var(--one-text) !important;
}

.post-author{
  color: var(--two-text) !important;
}

.post-tripcode{
  color: var(--pink-text) !important;
}

.post-teaser{
  color: var(--potato-text) !important;
}

.post-page{
  color: var(--three-text) !important;
}

.post-last{
  color: var(--one-text) !important;
}

/*---------------posted preview in catalog-----------------*/
.extended-small .teaser,
.extended-large .teaser{
  min-height: 50px !important;
  max-height: 100px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  text-overflow: inherit !important;
  overflow: hidden !important;
  text-align: -moz-center !important;
  background-color: rgba(16,19,39,0.75) !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

div.teaser{
  color: rgba(250,250,250,0.7) !important;
}

/*catalog stats*/
.meta{
  display: inline-block !important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  background-color: var(--head-bg) !important;
  width: 100% !important;
}

/*--------------quick reply UI-----------------------*/

/*set text*/
#quickReply textarea,
div#qrHeader.drag.postblock,
input#qrFile,
#quickReply input[type="submit"],
.postblock,
#quickReply input[type="text"],
#quickReply textarea,
#quickReply #recaptcha_response_field,
.extPanel input[type="text"], .extPanel textarea,
#qrCaptchaContainer,
#qrCaptchaContainer > div > div{
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
}

#quickReply textarea{
  min-width: 296px !important;
  float: left !important;
}

#quickReply{
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3) !important;
  padding-top: 6px !important;
  z-index: 1020 !important;
}

div#qrHeader.drag.postblock{
  color: var(--two-text) !important;
  border: none !important;
  background: transparent !important;
  text-align: left !important;
}

input#qrFile,
input#qrFile[focused]{
  background: transparent !important;
  width: 229px !important;
  border-style: none !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: 2s !important;
}

#qrCaptchaContainer:hover,
#qrCaptchaContainer[focused]{
  opacity: 1 !important;
  transition: 0.25s !important;
}

input#qrFile:hover{
  opacity: 1 !important;
  transition: 0.25s !important;
}

#quickReply input[type="submit"]{
  border-style: unset !important;
  padding-top: 3px !important;
  padding-bottom: 6px !important;
  background: transparent !important;
}

#quickReply input[type="submit"]:hover{
  color: var(--three-text) !important;
}

.postblock{
  border: none !important;
}

#quickReply input[type="text"], #quickReply textarea, #quickReply #recaptcha_response_field{
  border: none !important;
  outline: none !important;
  width: 296px !important;
  padding: 2px !important;
  margin: 0px 0px 1px !important;
}

.extPanel input[type="text"], .extPanel textarea{
  border: none !important;
  outline: none !important;
}

#qrCaptchaContainer{
  height: 78px !important;
  background: transparent !important;
  opacity: 0 !important;
  transition: 2s !important;
}

#qrCaptchaContainer > div > div{
  width: 300px !important;
  background: transparent !important;
  padding-left: 4px !important;
}

/*--------------end of quick reply-------------*/

/*----404-----*/
.boxcontent{
  background: transparent !important;
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
}

.boxbar{
  background: transparent !important;
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
}

#backtoboard{
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
}

.boxbar > h2:nth-child(1){
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
}

#logo{
   display: none !important;
}

#logo > h1:nth-child(1) > a:nth-child(1){
  display: none !important;
}

/*leads to the built-in temporary archive*/
table#arc-list.flashListing{
  background-color: var(--post-bg) !important;
}

/*temporarily offline*/
p.show_content:nth-child(2),
p.show_content:nth-child(5){
  font-weight: unset !important;
}


/*---------------minor effects--------------*/
/*catalog thumbnail shadows*/
.thumb{
  box-shadow: 3px 3px 0px rgba(0,0,20,0.3) !important;
}

.thumb:hover{
  box-shadow: 3px 3px 0px 0px var(--head-bg) !important;
  transition: .25s ease-out !important; /*smoother fade in effect*/
}

/*---reply hover effect setup----*/
div.post div.file .fileThumb img{
  border: none;
  box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.3) !important;
  /*margin-top: 0px !important;*/
  transition: 0.25s ease-in !important;
}

img{
  margin-top: -8px !important;
}

div.postContainer.opContainer .fileText,
.reply .fileText{
  opacity: 0 !important;
  transition: 0.25s ease-in !important;
}

div.postContainer.opContainer:hover .fileText,
.file.image-expanded .fileText{
  opacity: 1 !important;
  padding-bottom: 5px !important;
  transition: 0.25s ease-out !important;
}

.reply:hover .fileText,
.file.image-expanded .fileText{
  opacity: 1 !important;
  padding-bottom: 5px !important;
  transition: 0.25s ease-out !important;
}

span.dateTime,
span.postNum.desktop,
a.postMenuBtn,
div.backlink
/*a.quotelink*/{
  opacity: 0 !important;
  transition: 0.25s ease-in !important;
}

/*a.quotelink:hover{
  opacity: 1 !important;
  transition: 0.2s !important;
}*/

a.postMenuBtn:hover{
  opacity: 1 !important;
  transition: 0.25s ease-in-out !important;
}

div.postContainer.opContainer:hover span.dateTime,
div.postContainer.opContainer:hover span.postNum.desktop,
div.postContainer.opContainer:hover a.postMenuBtn,
div.postContainer.opContainer:hover div.backlink,
div.postContainer.opContainer:hover a.quotelink{
  opacity: 1 !important;
  transition: 0.25s ease-out !important;
}

.reply:hover span.dateTime,
.reply:hover span.postNum.desktop,
.reply:hover a.postMenuBtn,
.reply:hover div.backlink,
.reply:hover a.quotelink{
  opacity: 1 !important;
  transition: 0.25s ease-out !important;
}
/*---end of reply hover effect---*/


/*buttons in quick reply and to hide in normal view*/
#qrClose,
.extButton.threadHideButton{
  display: block !important;
  opacity: 0 !important;
  transition: 0.25s ease-out !important;
}

img#qrClose.extButton{
  margin-right: 0px !important;
  padding-left: 10px !important;
  padding-bottom: 10px !important;
  margin-top: -4px !important;
}

#qrClose:hover,
.extButton.threadHideButton:hover{
  opacity: 0.55 !important;
  transition: 0.25s ease-out !important;
}

/*when a post is hidden, this is how it looks*/
.post-hidden .extButton, .post-hidden:not(#quote-preview) .postInfo{
  opacity: 0.9 !important;
  transition: 0.25s ease-out !important;
}
/*media*/
.expandedWebm{
  float: left !important;
  width: 100% !important;
  margin-top: 1px !important;
  position: relative !important;
  right: 20px !important;
}

/*keep images inline*/
.expanded-thumb,
.fileDeletedRes{
  float: left !important;
  margin: auto !important;
  width: 100% !important;
  position: relative !important;
}

div.media-embed iframe{
  display:-moz-inline-box !important;
  max-inline-size: 720px !important;
  width: 100% !important;
  vertical-align: middle !important;
}

/*this thread is archived*/
span.tu-error{

}

.closed{
  font-size: 24px !important;
  color: var(--highlight-text) !important;
  text-shadow: 1px 1px rgba(0,0,0,0.3) !important;
}

/*----------------------NAVIGATION--------------------------*/

/*format of boardlist*/
span.boardList,
span.customboardList{
  background: var(--head-bg) !important;
  position: fixed !important;
  width: 570px !important;
  right: 0px !important;
  bottom: 316px !important;
  font-size: 12px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  text-align: center !important;
  /*box-shadow: 4px 4px 0px 0px var(--shadow-box) !important;*/
  opacity: 0.5 !important;
  margin-right: -570px !important;
  transition: 0.25s ease-in !important;
  border-left: 20px solid var(--head-bg) !important;
  border-bottom-left-radius: 10px !important;
  /*border-top-left-radius: 10px !important;*/
}

span.boardList:hover,
span.customboardList:hover{
  background: var(--post-bg) !important;
  opacity: 0.95 !important;
  margin-right: 0px !important;
  transition: 0.25s ease-out !important;
  /*box-shadow: 0px 3px 0px 0px var(--shadow-box) !important;*/
  box-shadow: 3px 3px 0px rgba(0,0,0,0.75) !important;
  border-left: 20px solid var(--post-bg) !important;
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

/*custom board list editor*/
/*redundant*/
div#customMenu.UIPanel > div.extPanel.reply{}

/*top boardlist Edit*/
span.boardList > span.custom-menu-ctrl{
  display: none !important;
}

/*boardList Edit, Save button*/
div.extPanel.reply > div.center > button{}

/*formatting controls*/
div.navLinks.desktop,
div#ctrl-top.desktop{
  position: fixed !important;
  z-index: 1010 !important;
  float: right !important;
  bottom: 113px !important;
  right: 0px !important;
  border: none !important;
  margin-bottom: 30px !important;
  width: 65px !important;
  padding-right: 10px !important;
  line-height: 25px !important; /*separates the controls from each other*/
  /*box-shadow: 3px 3px 0px 0px var(--shadow-box) !important;*/
}

/*do not merge with above because of killed brackets*/
span.navLinks.navLinksBottom.mobilebtn{
  position: fixed !important;
  z-index: 1010 !important;
  float: right !important;
  bottom: 69px !important;
  right: -5px !important;
  border: none !important;
  margin-bottom: 30px !important;
  width: 65px !important;
  padding-right: 10px !important;
  line-height: 25px !important; /*separates the controls from each other*/
  /*box-shadow: 3px 3px 0px 0px var(--shadow-box) !important;*/
}

div.navLinks.desktop > label, /*Auto*/
.navLinks a,
div#ctrl-top.desktop a,
span#totop.btn-wrap > span.button{
  background-color: var(--head-bg) !important;
  padding-right: 60px !important;
  padding-left: 10px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  margin-left: -5px !important;
  width: 65px !important;
  transition: 0.25s ease-in !important;
}

div.navLinks.desktop > label:hover,
.navLinks a:hover,
div#ctrl-top.desktop a:hover,
span#totop.btn-wrap > span.button:hover{
  margin-left: -8px !important;
  background-color: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
}

/*post new thread, new reply container, not actual buttons
 *post form needs work since it is stuck to the top
 *post reply is also tied to start a new thread, god damn it*/
div#togglePostFormLink.desktop{
  position: fixed !important;
  top: 110px !important;
  right: -100px !important;
  margin-right: 0px !important;
  color: rgba(0,0,0,0) !important;
  background: var(--head-bg) !important;
  padding-left: 0px !important;
  z-index: 1010 !important;
}

div#togglePostFormLink.desktop > a{
  position: fixed !important;
  z-index: 1010 !important;
  /*top: 110px !important;*/
  bottom: 269px !important;
  right: 0px !important;
  margin-right: -1px !important;
  background: var(--head-bg)!important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  padding-left: 0px !important;
  padding-right: 1px !important;
  opacity: 1 !important;
  display: block !important;
  width: 75px !important;
  border-top-left-radius: 5px !important;
}

div#togglePostFormLink.desktop > a:hover{
  margin-right: 1px !important;
  color: var(--three-text) !important;
  transition: 0.25s ease-out !important;
  background-color: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  opacity: 1 !important;
}

/*---thread view---*/
.thread-stats{
  position: fixed !important;
  display: block !important;
  background-color: var(--head-bg) !important;
  bottom: 119px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-right: 40px !important;
  padding-bottom: 4px !important;
  padding-inline-start: 10px !important;
  word-wrap: break-word !important;
  max-height: 18px !important;
  width: 300px !important; /*sets it all on a single line*/
  text-align: left !important;
  transition: 0.25s ease-in !important;
}

/*the checkbox*/
div.navLinks.desktop > label > input{
  display: none !important;
}

/*new posts countdown, no new posts, etc.
 *moved to bottom because of fucking line
 *won't vanish when not in use*/
div.navLinks.desktop > span{
  position: fixed !important;
  background-color: var(--head-bg) !important;
  bottom: 0px !important;
  padding-right: 30px !important;
  padding-bottom: 4px !important;
  padding-inline-start: 10px !important;
  width: 300px !important;
  max-height: 18px !important;
  margin-left: 0px !important;
  transition: 0.25s ease-in !important;
  border-top-left-radius: 5px !important;
}


/*pull out stats*/
div.navLinks.desktop > span:hover,
.thread-stats:hover{
  margin-left:-50px !important;
  transition: 0.25s ease-out !important;
  background-color: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
}

/*---normal view---*/
#search-box{
  display: block !important;
  position: fixed !important;
  background: var(--head-bg) !important;
  border: none !important;
  bottom: 230px !important;
  margin-left: 0px !important;
  padding-right: 5px !important;
  max-width: 70px !important;
  margin-bottom: 2px !important;
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  overflow: auto !important;
}

#search-box:hover{
  background: var(--post-bg) !important;
  transition: 0.25s ease-out !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  margin: 0px !important;
  margin-bottom: 2px !important;
}

div.pagelist.desktop,
.pagelist{
  background: transparent !important;
  border: none !important;
  display: -moz-box !important;
  width: 400px !important;
  height: 50px !important;
  text-align: justify !important;
}

div.pagelist.desktop > div.next > span{
  display: none !important;
}

/*infinite scroll on page 1*/
div.prev{
  color: rgba(0,0,0,0) !important;
}

div.prev a{
  text-align: center !important;
  font-size: 12px !important;
  text-decoration: none !important;
  display: block !important;
  position: fixed !important;
  bottom: 194px !important;
  padding-top: 9px !important;
  padding-bottom: 10px !important;
  right: 0px !important;
  padding-right: 1px !important;
  width: 74px !important;
  background: var(--head-bg) !important;

}

div.prev a:hover{
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  background: var(--post-bg) !important;
  transition: 0.25s ease-in-out !important;
  margin: 1px !important;
  margin-bottom: 0px !important;
}

/*---catalog view---*/

/*formatting*/
/*search position*/
span.btn-wrap > span#qf-ctrl.button{
  z-index: 1010 !important;
  position: fixed !important;
  bottom: 77px !important;
  right: 0px !important;
  background: var(--head-bg) !important;
  max-height: 18px !important;
  margin-right: -10px !important;
  padding-right: 33px !important;
  padding-bottom: 2px !important;
  padding-top: 2px !important;
  padding-left: 9px !important;
  color: var(--potato-text) !important;
}

span.btn-wrap > span#qf-ctrl.button:hover{
  background: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  transition: 0.25s ease-in-out !important;
  color: var(--pink-text) !important;
  margin-right: -9px !important;
}

/*filter position*/
span#filters-ctrl.button{
  z-index: 1010 !important;
  position: fixed !important;
  bottom: 200px !important;
  right: 0px !important;
  background: var(--head-bg) !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-right: 26px !important;
  padding-left: 11px !important;
}

span#filters-ctrl.button:hover{
  background: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  transition: 0.25s ease-in-out !important;
  color: var(--pink-text) !important;
  margin-right: 1px !important;
}

/*actual search box*/
/*need alignment fixing by 3 pixels overflowing to right*/
#qf-box{
  z-index: 1010 !important;
  position: fixed !important;
  bottom: 56px !important;
  right: -3px !important;
  margin-right: -8px !important;
  padding-right: 10px !important;
  background: var(--head-bg) !important;
  color: var(--pink-text) !important;
  text-align: center !important;
  transition: 0.25s ease-out !important;
}

#qf-box:hover{
  margin-right: 0px !important;
  background: var(--post-bg) !important;
  transition: 0.25s ease-in !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
}

/*X*/
#qf-clear{
  position: fixed !important;
  bottom: 36px !important;
  right: 0px !important;
  background: var(--head-bg) !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
  color: var(--potato-text) !important;
  transition: 0.25s ease-in !important;
}

#qf-clear:hover{
  color: var(--pink-text) !important;
  background: var(--post-bg) !important;
  transition: 0.25s ease-out !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
}

/*redundant, adjust "right" to see*/
#search-label-bottom{
  display: none !important;
/*  position: fixed !important;
  z-index: 1010 !important;
  right: -163px !important;
  color: var(--pink-text) !important;
  bottom: 19px !important;
  padding-inline-start: 5px !important;
  background: var(--head-bg) !important;
  transition: 0.25s ease-in !important;*/
}

#search-term-bottom{
  font-weight: unset !important;
}

#search-label-bottom:hover{
  right: 0px !important;
  transition: 0.25s ease-out !important;
  background: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
}

/*dunno how to hide it properly
 *without breaking the button
 *so out of sight out of mind*/
#hidden-count,
#hidden-label{
  position: fixed !important;
  top: 0px !important;
  right: -150px !important;
}

/*hidden threads button
 *will leave a gap/also "back"
 *when nothing is hidden*/
#filters-clear-hidden{
  position: fixed !important;
  display: -moz-box !important;
  z-index: 1010 !important;
  bottom: 244px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  margin-right: 0px !important;
  right: 0px !important;
  background: var(--head-bg) !important;
  padding-inline-start: 10px !important;
  padding-right: 31px !important;
}

#filters-clear-hidden:hover{
  transition: 0.25s ease-out !important;
  background: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  color: var(--pink-text) !important;
}

/*bump order label*/
span.ctrl-wrap{
  z-index: 1010 !important;
  position: fixed !important;
  right: -150px !important;
}

/*need to align selection to fit the screen*/
select#order-ctrl{
  position: fixed !important;
  bottom: 223px !important;
  right: -17px !important;
  margin-right: -6px !important;
  padding-left: 6px !important;
  height: 18px !important;
  border-style: none !important;
  background: var(--head-bg) !important;
  text-decoration: unset !important;
  font-family: 'Verdana' !important;
  font-size: 12px !important;
}

select#order-ctrl:hover{
  background: var(--post-bg) !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  transition: 0.25s ease-in-out !important;
  color: var(--pink-text) !important;
  margin-right: 15px !important;
}

/*image size label*/
span.ctrl-wrap:nth-child(2),
select#size-ctrl{
  display: none !important;
}

/*OP comments*/
span.ctrl-wrap:nth-child(3),
select#teaser-ctrl{
  display: none !important;
}

/*container with settings, home*/
span#navtopright{
  position: fixed !important;
  top: 0px !important;
  right: -150px !important;
}

/*top right Settings*/
div#boardNavDesktop.desktop > span#navtopright > a#settingsWindowLink{
  display: none !important;
}

/*top right Home*/
div#boardNavDesktop.desktop > span#navtopright > a{
  position: fixed !important;
  z-index: 1010 !important;
  bottom: 393px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-left: 20px solid var(--head-bg) !important;
  /*border-bottom-left-radius: 10px !important;*/
  border-top-left-radius: 10px !important;
  opacity: 0.75 !important;
  right: -88px !important;
  background: var(--head-bg) !important;
  padding-inline-start: 8px !important;
  padding-right: 42px !important;
  transition: 0.25s !important;
}

div#boardNavDesktop.desktop > span#navtopright > a:hover{
  margin-right: 74px !important;
  color: var(--pink-text) !important;
  background: var(--post-bg) !important;
  transition: 0.25s ease-out !important;
  box-shadow: 2px 2px 0px rgba(0,0,0,0.75) !important;
  border-bottom-left-radius: 0px !important;
  border-top-left-radius: 0px !important;
  border-left: 20px solid var(--post-bg) !important;
}

/*bottom controls, delete and select*/
div.bottomCtrl.desktop > span.deleteform > input{}
div.bottomCtrl.desktop > span.stylechanger > select#styleSelector > option{}



/*------------END OF NAVIGATION------------------*/

/*filter in catalog*/
/*need to find a way to unset position
 *so as to be able to move it around like
 *quick reply*/
div#filters.panel{
  min-height: 100px !important;
}

#filters, #filters > div:nth-child(1){
  border: 1px !important;
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
  background: var(--alt-bg) !important;
  box-shadow: 3px 3px 0px var(--shadow-box) !important;
}

#filter-table{
  border: 1px !important;
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
  background: var(--post-bg) !important;
}

#filters-close{
  opacity: 0 !important;
  transition: 0.25s ease-in !important;
}

#filters-close:hover{
  opacity: 0.9 !important;
}

table#filter-table > thead,
table#filter-table > thead > tr,
table#filter-table > thead > tr > th,
#filters-add, #filters-save{
  background: transparent !important;
  font-family: 'Verdana' !important;
  font-weight: unset !important;
  font-size: 12px !important;
  text-decoration: unset !important;
}

#filters-add:hover{
color: #7ba4ba !important;
}

#filters-save:hover{
color: #7ba4ba !important;
}
/*end filters*/




/*----------------garbage-------------------------*/

div.sideArrows/*useless side arrow indicators*/{
  display:none!important;
}

hr/*divider line that separates OPs*/{
  display: none !important;
}

#search-label,
#filters-help-open,
.close.fa.fa-times{
  display: none !important;
}

div.center:nth-child(16), div.center:nth-child(6){
  display: none !important;
}

.yotsuba:root .hide-post-button,
.yotsuba-b:root .hide-post-button{
  display: none !important;
}

span.navLinks:nth-child(1){
  display: none !important;
}

/*TURN IT OFF*/
.passNotice, tr.rules/*who cares m00t*/{
  display:none !important;
}

.bottomlink, .archlistlink, .indexlink{
  display: none !important;
}

#bannerCnt{
  border: none;
  display: none !important; /*turn it off mate*/
}

#logo-fp > a:nth-child(1) /*no more longcat*/{
  display: none !important;
}

a#close-announce.closebutton /*fugly mario button*/{
  display:none !important;
}

/*death to advertising*/
img.bottomad,
div#absbot,
.center,
div.center.middlead,
strong,
img#toggleMsgBtn,
img.middlead,
/*span.postertrip,*/ /*remove comment syntax to hide tripcodes*/
.click-me{
  display:none!important;
}

.qr-link-container,
.boardSubtitle,
.bottomCtrl.desktop,
#absbot.absBotText{
  display: none !important;
}

span.summary{
  display: none !important;
}

#skellington{
  display: none !important;
}

#header-bar a.current, .yotsuba-b:root #board-list a{
  text-decoration: none !important;
}

.index-refresh-shortcut, span.shortcut:nth-child(5){
  display: none !important;
}

#navbotright/*, #navtopright*/{
  display: none !important;
}

div.navLinks.navLinksBot.desktop{
  display:none !important;
}

.open-qr-wrap{
  display: none !important;
}

div.pagelist div.cataloglink{
  display: none !important;
}

#styleSwitcher, #hidden-label-bottom{
  display: none !important;
}

#copyright{
  display: none !important;
}

.postInfo > input,
a.hide-reply-button > span {
  display: none !important;
}

#announce/*who is this 4chins*/{
  display: none !important;
}

.pageSwitcherForm /*the stupid next button*/{
  display: none !important;
}

.extended-large .teaser {
  display: none !important;
}

.expand-all-shortcut {
  display: none !important;
}

.contract-all-shortcut {
  display: none !important;
}

/*news*/
#blotter td,
tbody#blotter-msgs,
td.blotter-content,
.blotter-date{
  display: none !important;
}

/*kill brackets but not necessary to do so
 *going to have to adjust catalog view if commented*/

#totop::before,
#hidden-label > span:nth-child(2)::before,
span.navLinks:nth-child(9) > span:nth-child(1)::before,
span.navLinks:nth-child(9) > span:nth-child(4)::before,
span.navLinks:nth-child(9) > span:nth-child(2)::before,
span.btn-wrap:nth-child(5)::before,
#settings > span:nth-child(4)::before{
  content: "" !important;
}

#totop::after,
span.btn-wrap:nth-child(5)::after,
#hidden-label > span:nth-child(2)::after,
span.navLinks:nth-child(9) > span:nth-child(1)::after,
span.navLinks:nth-child(9) > span:nth-child(2)::after,
span.navLinks:nth-child(9) > span:nth-child(4)::after,
#settings > span:nth-child(4)::after{
  content: "" !important;
}


/*-----------tiny details------------*/

.fileText a{
  text-decoration: none !important;
}

#qp {
    border: 0 !important;
    box-shadow: none !important;
}

#qrHeader
{
    border: none !important;
}

#qr.autohide:not(:hover):not(.has-focus) {
    max-height:21px;
    transition:max-height 0.7s ease 1s;
}

#header-bar .brackets-wrap:after,
#header-bar .brackets-wrap:before,
.shortcut:not(:last-child):after{
  content:""!important;
}

.brackets-wrap::after, .brackets-wrap::before {
    content: "" !important;
}

#index-search{
    background: var(--post-bg) !important;
    padding: 5px !important;
}

#ft li, .right-box,  .boxcontent, .top-box, .left-box, #recent-images .boxcontent, #qr select {
    border: none !important;
}

table.postForm > tbody > tr > td:first-child, input[type="text"], input[type="password"], table.postForm > tbody textarea, #recaptcha_response_field {
    background: transparent !important;
    border: none !important;
}

.top-box .menubutton, .right-box .menubutton {
    background-image: none !important;
}

#ft li, #ft ul {
    background: none !important;
    border: none !important;
}

gal-prev, .gal-next, .gal-count, .gal-name {
    background: transparent !important;
    border: none !important;
}

}