/* Official Board CSS of 8chan.moe/biz/ */

@import "/.static/css/tomorrow.css";
:root {
	--link-color: #4099f9;
	--link-hover-color: #9cb0f7;

	--background-highlight-color: #4d5159;
	--horizon-sep-color: #282a2e;
  --subject-color: #b294bb;
	--role-color: #65c76a;
  --navbar-text-color: #34373b;

}

.innerPost {
  border-radius: 3px;
}

.noEmailName,
.noEmailName:hover {
  color: #33a639;
}

.greenText {
  color: #7cbd68;
}

/* autism moe */

.moeText {
  transition: 0.1s ease-in-out;
  background:linear-gradient(to right,crimson,red,orange,yellow,#ff0,greenyellow,lawngreen,green,lightseagreen,cyan,darkcyan,slateblue,blueviolet,magenta,hotpink,deeppink);
  background-size:auto;
  background-clip:border-box;
  background-size:200% auto;
  color:#000;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:autism4 3s linear infinite;
  font-style: italic;
}

.moeText:before {
  background: none;
}

.moeText:hover {
    transition: 0.1s ease-in-out;
  font-style:normal
}

/* I stole this from 76chan budy */
@keyframes autism4 {
  to {
    background-position:200% center
  }
}

.pinkText {
  color: #d93076;
}

.doomText {
  color: #CD3B2B;
  font-family: 'DOOM';
  text-transform: uppercase;
  font-size: 110%;
}

.divBanMessage:before, .lockIndicator:before, .pinIndicator:after, .archiveIndicator:after
, .cyclicIndicator:after, .bumpLockIndicator:after { 
  font-family: "Icons";
  color: #ff0000;
}

/* glowing jew */
.flag-il.imgFlag {
  animation: glownigger 2s infinite;
}

/* glownigger glow glow */
@keyframes glownigger {
  0% {
    box-shadow: 0px 0px 0px 0px green;
  }
  50% {
  box-shadow: 0px 0px 16px 5px green;
  }
  100% {
  box-shadow: 0px 0px 0px 0px green;
  }
}

/* Flip */
.boardHeader p#labelDescription {
    font-size: 110%;
	font-weight: bold;
    text-shadow: 1px 1x 1px;
    animation: flip 5s infinite;
}
@keyframes flip {
  0%,80% {
    transform: rotateX(360deg) 
  }
}
/* Rainbow fag text */
.boardHeader #labelName {
    color: #cccccc;
    font-family: Nintendo;
    font-size: 125%;
    text-shadow: -1px 2px 0px #000000;
}
p#labelName{
  color: #ff0202;
  animation: rainbow 1.5s infinite reverse;
  text-shadow: 1px 1px #452981; 
}

#divUpload > th:nth-child(1) {
 font-size: 0px;
}
#divUpload > th:nth-child(1):after {
 content: ' Files';
 font-size: 13px;
}

#togglePosting:before {
  content: '[';
}

#togglePosting:after {
  content: ']';
}

#togglePosting {
  font-size: 25px;
  animation: rainbow 1.5s infinite reverse;
  border: none;
  border-radius: 9px;
  padding: 7px;
  background: inherit;
}

#togglePosting:hover {
  color: lightgray;
  border-radius: 9px;
  padding: 7px;
  border-color: rgb(25, 27, 31) rgb(25, 27, 31) rgb(10, 12, 16);
  background: linear-gradient(#37393D, #282A2E) repeat scroll 0% 0% transparent;);
  animation: none;
}

a, .glowOnHover { 
  transition: 0.3s;
  color: var(--link-color);
  cursor: pointer;
  text-decoration: none; /* TODO tentative change */
}

a:hover, .glowOnHover:hover {
  color: white !important;
  font-size: 101%;
  transition: 0.3s;
}


.spanId .labelId {
  border-radius: 10px;
  font-weight: normal;
}

.labelId {
  padding: 0px 2px;
  text-shadow: -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333;
  background-image: none;
  font-family: arial, helvetica, sans-serif;
  font-size: 9pt;
  font-weight:  normal;
}

.redText:hover {
  animation: niggerz 3s 0s infinite;
  font-size: 2em;
  transition: 3s;
}

.redText {
  transition: 3s;
  animation: niggerz 1s 0s infinite;
  color: #c81b1b;
  font-weight: bold;
  font-size: 2em;
}

@keyframes niggerz {
 0% {
  font-size: 2rem;
  color: darkred;
  transform: rotate(0deg);
 }
 50% {
  font-size: 2.01rem;
  color: red;
   transform: rotate(10deg);
 }
 100% {
  font-size: 2rem;
  color: darkred;
 }
}

.catalogCell {
  border: 0px solid rgba(0, 0, 0, 0.7);
  width: 11em;
  height: 20em;
  font-size: 15px;
  padding: 0.2em;
  background-color: inherit;
}

.catalogCell:hover {
  background: rgba(250, 250, 250, 0.1);
}

.linkThumb img {
  max-height: 120px;
  max-width: 120px;
  scale: 105%;
}

#bannerImage {
  transition: 1s;
  max-width: 99%;
  height: 99px;
}

#bannerImage:hover {
  transition-duration: 1s;
  max-width: 150%;
  height: 150px;
}

.postingFormExtra summary::marker {
  content: "Flags and more +";
  font-size: 105%;
}

.postingFormExtra[open] summary::marker {
  content: "Less -";
}

.postingFormExtra {
  text-align: center;
}

#postingForm input[type=submit], #qrbutton:hover {
  background: #4d5159;
}

#favoriteButton:checked + #favoriteButtonLabel:after {
  content: '\2605';
  color: yellow;
  text-shadow: 0px 0px 5px yellow;
}

/* hide global announcement */
#dynamicAnnouncement > table > tbody > tr > td {
  opacity: 0;
  transition: 1s;
  font-size: 15px;
  padding: 0px
}

#dynamicAnnouncement > table > tbody > tr > td:hover {
  opacity: 100;
  transition: 1s;
  font-size:15px;
  padding: 0px;
}

/* Make /biz/ readable on the nav bar */

[href="/biz"] {
  color: #72a4d9 !important;
  font-weight: bolder;
}

[href="https://8chan.moe/biz"] {
  color: #72a4d9 !important;
  font-weight: bolder;
}

[href="https://8chan.se/biz"] {
  color: #72a4d9 !important;
  font-weight: bolder;
}


#navTopBoardsSpan > [href]:hover {
  color: red !important;
  font-size: 125%;
}

/* remove email field */
.postingFormExtra > table > tbody > tr:nth-of-type(1) > th { display: none; }
#fieldEmail { display: none; }

nav.navHeader {
  color: #949494;
}

#newPostFieldset > legend {
  display: none;
}

#newPostFieldset legend label {
  font-size: 140%;
  width: 100%;
  display: inline-block;
  margin: 0;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#newPostFieldset #newPostFieldHide:not(checked) ~ form {
  display: block;
}

div.newPostFieldToggleButton {
  font-size: xx-large;
  pointer-events: none;
  margin-left:66%;
  opacity: 0;
}

@font-face {
  font-family: Nintendo;
  src: url('/.static/css/fonts/spritendo.otf');
}

@keyframes rainbow{
  from, to { color: red; text-shadow-color: red }
  12.5% { color: orange; text-shadow-color: orange }
  25% { color: yellow; text-shadow-color: yellow }
  37.5% { color: lime; text-shadow-color: lime }
  50% { color: green; text-shadow-color: green }
  62.5% { color: #66f; text-shadow-color: blue }
  75% { color: #f6f; text-shadow-color: purple }
  87.5% { color: magenta; text-shadow-color: magenta }
}

/* ↓ 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: not-allowed;

  /* 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/14c41e24ccd4fab6a27e8460cb390bd886b56a5852812373422191dd9f17576b");

  /* 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;
}