/* Template Theme [Hispa Styled] */
/* Use this as a guide to make your theme.*/
@import "./syntax/a11y-light.css";

:root {
 --background-color: #eef2ff; /* The main background color. */
 --background-gradient: none; /* The gardient for the background. Currently set to none. */
 --background-highlight-color: none; /* No clue. */
 --border-color: #8E4F39; /* The border color. Seen in post & message boxes & the bottom line on the header. */
 --button-color: var(--reload-button-bg-color); /* The color of the buttons. Left alone to match reload button color.  */
 --contrast-color: #FDC982C7;  /* The post background & message box window color. */
 --doom-text-color: #CD3B2B;  /* The color used for the Doom font tag. Original value is '#FDC982C7'. */
 --echo-text-bg-color: mediumblue; /* The background color used for (((Echo text))). Original value is 'mediumblue'. */
 --echo-text-color: ghostwhite; /* The text color used for (((Echo text))). Original value is 'ghostwhite'. */
 --green-text-color: #429406; /* The color used for >implications. Original value is '#429406'. */
 --header-color:  #FDC982; /* The color of the header, which rests on top of the site. Recommended to keep the color solid. */
 --inactive-color: var(--link-press-color); /* The color of the inactive symbol on the boards page when a board hasn't seen activity. Currently set to link hover cover. */
 --link-color: #6CA0A1; /* The color of the hyperlink. */
 --link-hover-color: #DB6151; /* The color of the hyperlink when hovered.  */
 --link-press-color: #A92F1F; /* The color of the hyperlink when clicked on.  */
 --logo-image: url('/.static/logo/logo_hispa_red.png'); /* The 8moe logo that appears at the welcome page. */
 --marked-border-color: #8E4F39; /* The post's border color when marked. */
 --marked-color: #FFD7A0D6; /* The post's background color when marked. */
 --marked-text-color: var(--text-color); /* The color of the text when marked. Left alone to main text color. */
 --navbar-text-color: #529e5a; /* The text on the navbar. */
 --pink-text-color: #f04d3a; /* The color used for <implications. Original value is '#ff28fb'. */
 --pressed-color: #EEBA73C7; /* The color used for clicking on the post & hide menus, along with the file upload background area. Reduce the brightness of the contrast color by 15 for best results. */
 --red-text-color: #AF0A0F; /*  The color used for red text. Original value is '#AF0A0F'.*/
 --reload-button-bg-color: #ecebe5; /* The color of the button when it's not hovered or pressed.  */
 --reload-button-border-color: #8f8f9d; /* The color of the button's border.  */
 --reload-button-font-color: #000000; /* The color of the button's text when it's not hovered or pressed.  */
 --reload-button-hover-bg-color: #d8d0c4; /* The color of the button when hovering over it.  */
 --reload-button-hover-border-color: var(--reload-button-border-color); /* The color of the button's border when hovering over it. Left alone to match reload button border color. */
 --reload-button-hover-font-color: var(--reload-button-font-color); /* The color of the button's text when hovering over it. Left alone to match reload button's text color. */
 --reload-button-press-bg-color: #9C9488; /* The color of the button when pressed. */
 --reload-button-press-border-color: var(--reload-button-border-color); /* The color of the button's border when pressed. Left alone to match reload button border color. */
 --reload-button-press-font-color: white; /* The color of the button's text when pressed. */
 --role-color: var(--red-text-color); /* The text color of the administrator or moderator role. Left alone to match red text. */
 --sfw-color: var(--link-color); /* The color of the SFW symbol on the boards page when a board is marked as SFW. Originally has its own color, but currently set to match link color. */
 --sloped-text-bg-color: #c8102e; /* The background color used for ///Slanted Text\\\. Default value is '#c8102e'. */
 --sloped-text-color: #fce300; /* The text color used for ///Slanted Text\\\. Defeault value is '#fce300'. */
 --subject-color: var(--link-color); /* The text color of the thread name. Left alone to match link color. */
 --table-every-other-color: #E4B069; /* The color of the table seen on the board list. Set it a little darker or lighter from the contrast color for consistenacy. */
 --text-color: #3E3E3E; /* The color of the main text. */
 --text-shadow-color: none; /* The color of the glowing effect on the hyperlink when hovered. */
 --text-shadow-press-color: none; /* The color of the glowing effect on the hyperlink when pressed. */
 --thread-navbar-background: #D8584ED6; /* The color of the navbar. */
 --thread-navbar-color: #fff; /* The text color on the navbar.  */
 scrollbar-color: var(--thread-navbar-background) var(--contrast-color); /* Left alone to match the theme  */
}
/* --------------- Custom background settings --------------- */

body {
	background: var(--background-color); /* Background color, refer back to root to change color  */
	background-image: url('/.media/f9fe8002d5f054fb33b56e43f207017fa2c1a0bce459bc956287776e3ee3d6f8.png'), /* Board Mascot image. First, upload the image to /res/, then copy the souce URL hash & overwrite the other hash including the file extension. If not using one, remove 'url('/.media/XXXXXX)' & replace it with 'none' or vice-versa if adding one. */
		url('/.media/607aea96383c8a3f909d26118c3c1ca02537f0fc7dd3adb80a02ff1fc357ba1d.jpg'); /* Background Image. First, upload the image to /res/, then copy the souce URL hash & overwrite the other hash including the file extension. If not using one, remove 'url('/.media/XXXXXX)' & replace it with 'none' or vice-versa if adding one. */
	    background-blend-mode: normal, overlay; /* 1st value is for Board Mascot, 2nd value is for Background Image. The common value is 'normal, overlay'. */
	background-repeat: no-repeat, repeat; /* 1st value is for Board Mascot, 2nd value is for Background Image. The common value is 'no-repeat, repeat'.*/
	background-attachment: fixed, scroll; /* 1st value is for Board Mascot, 2nd value is for Background Image. The common value is 'fixed, scroll'. */
	background-position: right bottom; /* Placement for board mascot. The common value is 'right bottom'. */
	background-size: 256px 237px, auto; /* 1st value is for Board Mascot, 2nd value is for Background Image. For best results, keep the Board Mascot size no larger than 512px 512px (Recommended to resize in multiples of 128 pixels in both height and width) & leave the Background Image on 'auto'. */
 font-family: 'IBMPlexSansJP-Regular'; /* Changes the font. First, upload to the font thread on /res/, then copy the source URL hash and overwrite the other hash below on src. I.E: "/.media/XXXXXX" where X is your image's hash. Font used in this template is IBM Plex Sans JP. */
 src: url("/.media/25d96fe620f12fba6cf09158807117ec13d1e7c9debff488117cf21dc8844688.ttf");
}

/* --------------- Theme Additions--------------- */
nav.navHeader {
 background-color: var(--header-color);
 border-color: var(--border-color);
 box-shadow: 0 2px 4px -1px rgb(13 16 22 / 14%),0 4px 5px 0 rgb(13 16 22 / 12%),0 1px 10px 0 rgb(13 16 22 / 20%);
 color: var(--text-color);
 text-align: center;
}
.boardHeader #labelName {
 color: var(--link-color);
}
.boardHeader p,
#overboardId {
 color: var(--link-color);
}
.innerUtility.top {
 border-radius: 5px;
}
#newPostFieldset legend {
 background: var(--contrast-color);
 border-color: var(--border-color);
 border-radius: 5px;
 color: var(--text-color);
}
input[type=text],
input[type=password],
input[type=number],
input[type=url],
textarea { /*! background: var(--background-color); */
 border-color: var(--border-color);
 border-radius: 5px;
}
#postingForm th {
 background: var(--contrast-color);
 border-color: var(--border-color);
 border-radius: 5px;
 color: var(--text-color);
}
.modalTableBody th {
 background: var(--thread-navbar-background);
 border: none;
 border-radius: 5px;
 color: var(--thread-navbar-color);
}
a,
.glowOnHover {
 color: var(--link-color);
 text-shadow: none;
}
a:hover,
.glowOnHover:hover {
 color: var(--link-hover-color);
 text-shadow: 1px 0px 20px var(--text-shadow-color);
}
a:active,
.glowOnHover:active {
 color: var(--link-press-color);
 text-shadow: 1px 0px 20px var(--text-shadow-press-color);
}
.dropzone {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-font-color);
}
.dropzone:hover {
 background: var(--reload-button-hover-bg-color);
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-hover-font-color);
}
.dropzone:active {
 background: var(--reload-button-press-bg-color);
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-press-font-color);
}
input[type="submit"] {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-font-color);
}
input[type="submit"]:hover {
 background: var(--reload-button-hover-bg-color);
 border: 1px solid var(--reload-button-hover-border-color);
 border-radius: 5px;
 color:var(--reload-button-hover-font-color);
}
input[type="submit"]:active {
 background: var(--reload-button-press-bg-color);
 border: 1px solid var(--reload-button-press-border-color);
 border-radius: 5px;
 color:var(--reload-button-press-font-color);
}
input[value="Cancel"] {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-font-color);
}
input[value="Cancel"]:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 border-radius: 5px;
 color:var(--reload-button-hover-font-color);
}
input[value="Cancel"]:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 border-radius: 5px;
 color:var(--reload-button-press-font-color);
}
input[value="Reload"] {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-font-color);
}
input[value="Reload"]:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 border-radius: 5px;
 color:var(--reload-button-hover-font-color);
}
input[value="Reload"]:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 border-radius: 5px;
 color:var(--reload-button-press-font-color);
}
input#refreshButton {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-font-color);
}
input#refreshButton:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 border-radius: 5px;
 color:var(--reload-button-hover-font-color);
}
input#refreshButton:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 border-radius: 5px;
 color:var(--reload-button-press-font-color);
}
button {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 border-radius: 5px;
 color:var(--reload-button-font-color);
}
button:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 border-radius: 5px;
 color:var(--reload-button-hover-font-color);
}
button:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 border-radius: 5px;
 color:var(--reload-button-press-font-color);
}
.innerPost {
 border: 1px solid var(--border-color);
 border-radius: 5px;
 padding: 5px;
}
.innerUtility.top a {
  color: var(--thread-navbar-color);
}
span.labelCreated {
 color: var(--link-color);
}
.linkSelf,
.linkQuote,
.labelStats {
 color: var(--link-color);
 font-weight: bold;
 text-decoration: none;
}
.floatingList,
.floatingMenu,
.modalForm {
 background: var(--contrast-color);
 border-color: var(--border-color);
 color: var(--text-color);
}
.quoteLink {
 color: var(--link-color);
}
#panelMessage {
 background: var(--contrast-color);
 border: 1px solid var(--border-color);
 border-radius: 5px;
 color: var(--red-text-color);
}
.noEmailName {
 color: var(--link-hover-color);
}
.noEmailName:hover {
 color: var(--link-hover-color);
 text-shadow: none;
}
.doomText {
  color: var(--doom-text-color);
  font-family: 'DOOM';
}
.greenText {
 color: var(--green-text-color);
}
.pinkText {
 color: var(--pink-text-color);
}
.redText {
 color: var(--red-text-color);
}
.echoText {
  background: var(--echo-text-color);
  color: var(--echo-text-bg-color);
}

.slopedText {
  background: var(--sloped-text-bg-color);
  color: var(--sloped-text-color);
}
.diceRoll {
 color: var(--red-text-color);
}
.containPages {
 border-color: var(--marked-border-color);
 border-radius: 5px;
}
#indexWrapper > fieldset:nth-child(3) {
background: none;
border: none;
 border-radius: 5px;
}
.titleFieldset {
 border-color: var(--thread-navbar-background);
}
.jsenabled .catalogCell {
 background: var(--contrast-color);
 border-color: var(--border-color);
 border-radius: 5px;
}
#quick-reply {
 background: var(--contrast-color);
 border-color: var(--border-color);
 border-radius: 5px;
}
#quick-reply th {
 background: var(--thread-navbar-background);
 border-radius: 5px;
 border: none;
 color: var(--thread-navbar-color);
}
#quick-reply .close-btn.coloredIcon {
 color: var(--thread-navbar-color);
 text-shadow: none;
}
#quick-reply .close-btn.coloredIcon:hover {
 color: var(--link-hover-color);
 text-shadow: none;
}
.modalForm {
 border-radius: 5px;
}
.captchaImage {
 border-radius: 5px;
}
.floatingMenu {
 border-radius: 5px;
}
div#multiboardMenu.floatingMenu {
 border-radius: 5px;
}
.floatingMenu hr {
 border-color: var(--thread-navbar-background);
}
.floatingList ul li {
 background: var(--contrast-color);
 border-bottom: 1px solid var(--text-color);
}
.floatingList ul li:hover {
 background-color: var(--marked-color);
}
.floatingList ul li:active {
 background-color: var(--pressed-color);
}
.splitField > * {
 border-radius: 5px;
}
.labelCreated:after {
 content: " (UTC)";
}
.linkSelf {
 display: none;
}
.linkQuote:before {
 content: "/#/";
 font-weight: bolder;
}
input[type=text],
input[type=password],
input[type=number],
input[type=url],
textarea {
 border-color: var(--border-color);
 color: var(--text-color);
}
#themeSelector {
 color: var(--text-color);
}
.titleFieldset legend {
 background: var(--thread-navbar-background);
 border-color: var(--thread-navbar-background);
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 color: var(--thread-navbar-color);
 margin-left: -17px;
 padding-right: 28px;
}
fieldset.reportFieldset legend {
 background: var(--thread-navbar-background);
 border-radius: 5px;
 border: none;
 color: var(--thread-navbar-color);
}
.reportFieldset {
 border-color: var(--thread-navbar-background);
 border-radius: 5px;
 background: var(--contrast-color);
}
div#dynamicAnnouncement table tbody tr td,
div#mainPanel div#dynamicAnnouncement table tbody tr td {
 border: 1px solid var(--border-color);
 border-radius: 5px;
 background: var(--contrast-color);
}
.innerOP {
 background: var(--contrast-color);
 border: 1px solid var(--border-color);
 border-radius: 5px;
 padding: 5px;
}
hr {
 border: none;
 border-bottom: none;
}
.indicatorSfw{
  color: var(--sfw-color);
}
.indicatorInactive {
  color: var(--inactive-color);
}