/* Cherry Blossum Pink Theme for /a/ */
/* Based on /sm/ v2.5.1 */

@import "./syntax/ascetic.css";
:root {
  
  /* v  Catalog   v */
  --catalogCell-background-color: #FFFFFF; /* <  Affects every individual thread cell on the catalog  */
  --catalogCell-border-color: #F5F5F5;/* <  Affects every individual thread cell on the catalog  */
  --boardHeader-p-color: #800A32; /* Affects only the 'Catalog of' text, also seen at Overboard */

  /* v   Home Page   v */
  --divLatestImages-border-color: transparent;  /* <  Affects only the 'Latest Images'  */
  --fieldsetlegend-background-color: linear-gradient(90deg, rgba(127,0,0,1) 0%, rgba(206,16,133,1) 100%); /* <  Affects every field bar  */
  --fieldsetlegend-border-color: transparent; /* <  Border color for the bars  */
  --fieldsetlegend-text-color: #fff;/* <  Text color for the named bars  */
  --indexwrapper-fieldset-background-color: rgba(255, 255, 255, 0.6); /* <  Affects the welcome message, action menu, site-wide announcement, stats, and top board fields  */
  --indexwrapper-fieldset-border-color: #000;  /* <  Affects the welcome message, action menu, site-wide announcement, stats, and top board fields  */
  --logo-image: url("/.static/logo/logo_hispa_pink.png"); /* Affects the 8Chan logo seen in the welcome message*/
  --splitfield-background-color: rgba(255, 255, 255, 0.6);
  --titleFieldset-background-color: rgba(255, 255, 255, 0.6);
  --titleFieldset-border-color: #000; /* <  Border color for the 'Latest Images' & 'Latest Posts' bars  */

  /* v   Links   v */
  --link-color: #683143;
  --link-hover-color: #000000;   /* < Only appears when hovering  */
  --link-press-color: #683143;   /* <  Only appears when clicked on  */
  
  --a-link-color: #683143; /* <  Hyperlinks hovering  */
  --a-link-hover-color: #f00;   /* <  Hovering on hyperlinks  */
  --a-link-press-color: #683143;   /* <  Clicking on a hyperlink */

  /* v  Nav   v */
  --nav-background-color: linear-gradient(to right, #FF9899, #FEDDE4); /* #FFE3E2 */
  --nav-border-color: #BD5A88; /* #FFE3E2 */
  --nav-text-color: #541D2F; /* #FFE3E2 */
  
  /* v  Navbar   v */
  --thread-navbar-background: transparent; /* CHANGED from #7239b3 to transparent */
  --thread-navbar-color: #743944;

  /* v  Non-OP Posts   v */
  --innerPost-background-color: white; /* <  Affects every post  */
  --innerPost-background-marked-color: #FFEDEDC9;  /* <  Only affects a single post  */
  --innerPost-border-color: ghostwhite; /* <  Affects every post  */
  --innerPost-marked-border-color: #F1ADBA;  /* <  Only affects a single post  */
  --innerPost-text-color: #9E2517;  /* <  Affects every post  */

  /* v   Oekaki Button   v */
  --oekaki-button-color: #EA98B9;
  --oekaki-button-boxshadow-color: #D698B1;
  --oekaki-button-active-color: #C198A8;
  --oekaki-button-focus-color: #FED7E6;
  --oekaki-button-icon-color: white;   /* <  Paintbrush icon color  */
  --oekaki-button-icon-active-color: whitesmoke;   /* <  Paintbrush icon color when clicked on  */

  /* v  OP Post   v */
  --innerOP-background-color: rgba(255, 255, 255, 0.6); /* #FFE3E2 */
  --innerOP-border-color: #F1ADBA;
  --innerOP-text-color: #9E2517;  /* <  RIP & TEAR  */
  --subject-color: #104AA7;  /* <  RIP & TEAR  */

  /* v   Post Field   v */
  --newPostFieldset-color: rgba(255, 227, 226, 0.6); /* #FFE3E2 */

  /* v   Post Form   v */
  --PostingForm-background-color: #AF153C; /* #FFE3E2 */
  --PostingForm-border-color: #935565; /* #FFE3E2 */
  --PostingForm-text-color: white; /* #FFE3E2 */

  /* v   Post menu buttons   v */
  --floatinglist-buttons-background-color: #FFC4BC;
  --floatinglist-buttons-hover-background-color: #FFE3E2;
  --floatinglist-buttons-active-background-color: #FFC4BC;

  /* v   Post Tags   v */
  --doomtext-color: #9E2517;  /* <  RIP & TEAR  */
  --greentext-color: #39740E;  /* <  >greentext  */
  --pinktext-color: #921590;  /* <  <pinktext  */
  --redtext-color: #A31B1F;  /* <  SRZ BIZNIZ  */
  
  /* v   Quick Reply, Reply Mode, & Settings menu   v */
  --quick-replay-background-color: rgba(255, 255, 255, 0.9);
  --selectedCell-cell-background-color: #FFE3E2;  /* <  File upload background  */
  --newPostFieldset-background-color: rgba(255, 255, 255, 0.6);
  --newPostFieldset-border-color: #000;
  --settingsMenu-background-color: rgba(255, 255, 255, 0.9);

  /* v   Reload Buttons   v */
  /* v   Used on the quick drop  v */
 --reload-button-bg-color: #ecebe5;
 --reload-button-border-color: #8f8f9d;
 --reload-button-font-color: #000000;
 --reload-button-hover-bg-color: #d8d0c4;
 --reload-button-hover-border-color: var(--reload-button-border-color);
 --reload-button-hover-font-color: var(--reload-button-font-color);
 --reload-button-press-bg-color: #9C9488;
 --reload-button-press-border-color: var(--reload-button-border-color);
 --reload-button-press-text-color: white;
  
  /* v   Reply Button & Quick Reply Button   v */
  /* v   They both use Skeuomorphic design. To make color editing easier on yourself, copy the hex codes to your paint program & use the hue & saturation effects to make all fitting color changes without splitting hairs.  v */
  --input-Formbutton-and-qrbutton-background-color: #A54040;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-border-bottom-color: #331615;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-border-left-color: #4C201F;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-border-right-color: #4C201F;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-border-top-color: #893737;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-box-shadow1-color: #ED5C5C;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-box-shadow2-color: #4C1D1D;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-box-shadow3-color: #511F1F;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-box-shadow4-color: #0F0F0F;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-text-color: #fff;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-text-shadow-color: #1e2d4d;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-box-shadow-hover-color: #FF8987;  /* <  'Anonymous' in posts  */
  --input-Formbutton-and-qrbutton-box-shadow-active-color: #ED5C5C;  /* <  'Anonymous' in posts  */

  /* v   Report Fieldset   v */
  /* v   Used on the quick drop  v */
 --reportFieldset-background-color: rgba(255, 255, 255, 0.6);
 --reportFieldset-border-color: #000;

  --reportFieldset-legend-background-color: #000;
  --reportFieldset-legend--text-color: #000;
  --reportFieldset-legend--border-color: #000;

  /* v   Misc.   v */
  --bannerImager-border-color: var(--PostingForm-border-color);  /* <  'Anonymous' in posts  */
  --board-title-color: #A6516E;  /* <  'Anonymous' in posts  */
  --hr-border-color: #A6516E;  /* <  Color for the hr lines  */
  --labelDescription-color: #800A32;  /* <  'Anonymous' in posts  */
  --labelName-color: #800A32;  /* <  'Anonymous' in posts  */
  --navfade-background-color: transparent;  /* <  'Anonymous' in posts  */
  --noEmailName-color: #0A5C0A;  /* <  'Anonymous' in posts  */
  --panelMessage-color: #E12188;  /* <  'Anonymous' in posts  */
  --modalForm-background-color: #FFE3E2;  /* <  Report menu background  */
  --modalForm-border-color: #F1ADBA;  /* <  Report menu background  */
  --site-background-color: #FCDFEB;  /* <  Color for the background behind posts. If you're using a seamless pattern, set this value to 'none'.  */
  --span-labelCreated-color: #000000;  /* <  Date & Time in posts  */
  --role-color: #a10705;  /* <  Admin, Root, Moderator, etc.  */
  --upload-img-not-expanded-border-color: transparent;  /* <  Admin, Root, Moderator, etc.  */
  --linkThumb-border-color: transparent;  /* <  Admin, Root, Moderator, etc.  */
}


/* --------------- CUSTOM THUMBNAILS --------------- */

/* Make sure to set the width & height sizes to be the same as your custom thumbnails to fully replace the site's original designs, otherwise they will not show up. You should also double check your thumbnail's file hash & make sure there's no extra 8 added at the beginning of it as it seems to happen whenever the contents is posted inside the [code] syntax. The 'padding-left' value should match the thumbnail's width size. */

/*  [AUDIO] (Only appears when uploaded audio file(s) lack an embedded album artwork cover. */
/*  For audio formats such as mp3, flac, opus, ogg, etc. Original site thumbnail size is 128px. */
img[src="/audioGenericThumb.png"] {
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background: url("/.media/ffadbfb08613e751e9e400e954f5dc9f9cb6ecb75d9da63ef7e99f59a87ac262.png");
 background-repeat: no-repeat;
 width: 51px;
 height: 79px;
 padding-left: 51px;
}

/*  [DOCUMENTS] */
/* For downloadable document formats such as txt, pdf, epub, etc. Original site thumbnail size is 150px. */
img[src="/genericThumb.png"] {
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background: url("/.media/7be75d3ab10534a691771303dff36087bdb083659ed13971b4c682047b0e9efb.png");
 background-repeat: no-repeat;
 width: 120px;
 height: 100px;
 padding-left: 120px;
}

/*  [GENERIC] (Only appears on quick reply upload menu) */
/* Thumbnail for many filetypes (even audio like mp3.) Original site thumbnail size is 100px. */
img[src="/.static/mimethumbs/generic_file.svg"] {
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background: url("/.media/0c0afd0c84e17a412a1861fdcf788f8a0c0146bef48e14c6a0e6952cc84da316.png");
 background-repeat: no-repeat;
 width: 100px;
 height: 100px;
 padding-left: 100px;
}

/*  [VIDEO] (Only seen on quick reply upload menu) */
/* Thumbnail for video-based files in the quick reply menu's upload window(s). Original site thumbnail size is 100px. */
img[src="/.static/mimethumbs/generic_video.svg"] {
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background: url("/.media/0fff272f7da53592f8b90293f33d60cb874edd4ace2a4015b1b2e7eacca90220.png");
 background-repeat: no-repeat;
 width: 100px;
 height: 100px;
 padding-left: 100px;
}

/*  [Captcha] (Only seen at first loading of Captcha) */
/* Replaces the boring white rectangle before the Captcha loads. Keep at 300px x 100px for seamless transition. */
.captchaImage {
  background-image: url('/.media/13c77fb14b27adbbb10edf4dca6dbab3616b4230d5beaa7de73f7d27e7db7f16.png');
  background-size: 300px 100px;
  border: 1px solid black;
}

/* --------------- HOME MENU --------------- */

/* v-------------  Images in 'Latest Images' */
#divLatestImages img {
  border-radius: 10px;
  border: 1px solid var(--divLatestImages-border-color);
}

/* v-------------  Headers for Latest Images, Latest Posts, Stats, & Top Boards*/
fieldset legend {
  background: var(--fieldsetlegend-background-color);
  color: var(--fieldsetlegend-text-color);
  border: 1px solid var(--fieldsetlegend-border-color);
}

.titleFieldset legend {
	margin-left: -17px;
	padding-right: 28px;
}

#indexWrapper > fieldset {
  background: var(--indexwrapper-fieldset-background-color);
  border: 1px dashed var(--indexwrapper-fieldset-border-color);
}
/* -- x x x x x x  -- */

#quick-reply th {
  background: var( --PostingForm-background-color);
  border: 1px solid var(--PostingForm-border-color);
  color: var( --PostingForm-text-color);
}

/* v-------------  Catalog */
.catalogCell {
  background: var(--catalogCell-background-color); /* #CEC9EC */
  border: 1px solid var(--catalogCell-border-color);
  border-radius: 6px;
}

/* v-------------  Nav bar (Contains active boards & various settings) */
nav.navHeader > .nav-fade {
  background-image: linear-gradient(to right, #0000, var(--navfade-background-color));
  border-right: 0.5em solid var(--navfade-background-color);
}

.innerUtility.top a {
  color: var(--thread-navbar-color);
}

div p#labelName{
  color: var(--labelName-color);
}

p#labelDescription{
  color: var(--labelDescription-color);
}

/* v-------------  File drop zone (Quick Reply) */
div#dropzoneQr.dropzone {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
div#dropzoneQr.dropzone:hover {
 background: var(--reload-button-hover-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-hover-font-color);
}
div#dropzoneQr.dropzone:active {
 background: var(--reload-button-press-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-press-text-color);
}

/* v-------------  Oekaki button */
.oekaki-btn {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.13)), radial-gradient(90% 7% at 50% 8%, rgba(255, 255, 255, 0.47) 25%, rgba(255, 255, 255, 0) 50%), var(--oekaki-button-color);
  border: 0;
  border-radius: 0.375em;
  box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.47), 0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27), 0 0.1em 0 0.1em rgba(255, 255, 255, 0.27), -0.2em 0 0.2em var( --oekaki-button-boxshadow-color) inset, 0 0.2em 0.2em rgba(255, 255, 255, 0.27) inset, 0.2em 0 0.2em rgba(255, 255, 255, 0.27) inset, 0 -0.2em 0.2em var( --oekaki-button-boxshadow-color) inset;
  color: var(--oekaki-button-icon-color);
  cursor: pointer;
  font-size: 16px;
  margin: 0 auto;
  padding: 0.75em 1em;
  text-shadow: 0 0 0.2em rgba(255, 255, 255, 0.47);
  transition-property: box-shadow;
  -webkit-tap-highlight-color: transparent;
}
.oekaki-btn, .oekaki-btn span {
  display: block;
  transition-duration: 0.1s;
  transition-timing-function: linear;
}
.oekaki-btn:focus, .oekaki-btn span:focus {
  outline: none;
}
.oekaki-btn span {
  transition-property: transform;
  will-change: transform;
}
.oekaki-btn:active {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.47), 0 -0.1em 0 0.1em rgba(0, 0, 0, 0.27), 0 0.1em 0 0.1em rgba(255, 255, 255, 0.27), -0.2em 0 0.2em var(--oekaki-button-active-color) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.27) inset, 0.2em 0 0.2em rgba(0, 0, 0, 0.27) inset, 0 -0.2em 0.2em var(--oekaki-button-active-color) inset;
  color: var(--oekaki-button-icon-active-color);
}
.oekaki-btn:active span {
  transform: scale(0.95);
}
.oekaki-btn:focus {
  color: var(--oekaki-button-focus-color);
  text-shadow: 0 0 0.2em rgba(157, 196, 255, 0.47);
}

/* v-------------  Filter & Report buttons */
.floatingList, .floatingMenu {
  background: var(--modalForm-background-color);
}

/* v-------------  Report Menu */
.modalForm {
  background: var(--modalForm-background-color);
  border: 1px solid var(--modalForm-border-color);
}

/* v-------------  Main site background (Rests behind posts & all the other elements) */
.floatingList ul li {
  background-color: var(--floatinglist-buttons-background-color);
}
.floatingList ul li:hover {
  background-color: var(--floatinglist-buttons-hover-background-color);
}
.floatingList ul li:active {
  background-color: var(--floatinglist-buttons-active-background-color);
}

.splitField > * {
  background:var(--splitfield-background-color);
}

nav.navHeader {
  color: var(--nav-text-color);
  background: var(--nav-background-color);
  border-bottom: 1px solid var(--nav-border-color);
}

#newPostFieldset legend {
  border: 1px solid var(--PostingForm-border-color);
  background: var(--PostingForm-background-color);
  color: var(--PostingForm-text-color);
}

#postingForm th, .modalTableBody th {
  background: var(--PostingForm-background-color);
  color: var(--PostingForm-text-color);
  border: 1px double var(--PostingForm-border-color);
}

span.labelCreated{
  color: var(--span-labelCreated-color);
}

/* v-------------  Main site background (Rests behind posts & all the other elements) */
body {
background-image: url('/.media/c3529faddd6f6840f97a907840c4bc00a4924c1c1d3c3e829194297e0e8ec935.png'),
  url("/.media/77b3017496f3a615d399e12ca0416fa779817e3e53bad726350304b271f35fc9.png");
background-color: var(--site-background-color);
background-repeat: no-repeat, repeat-x;
  background-attachment: scroll, fixed;
  	background-position: bottom right, top;
  	background-size: 314px 194px, auto;
}
/* v-------------  hr lines (Seperators) */
hr {
  border: 1px dashed var(--hr-border-color);
}

/* v-------------  OP Posts */
div.innerOP,
.opCell > .innerOP {
  background: var(--innerOP-background-color); /* E4E4F9 */
  border: 1px solid var(--innerOP-border-color);
  border-radius: 6px;
}

/* v-------------  Non-OP Posts */
.innerPost,
.inlineQuote .innerPost {
  background: var(--innerPost-background-color); /* #CEC9EC */
  border: 1px solid var(--innerPost-border-color);
  border-radius: 6px;
}

.postCell:target .innerPost,
.markedPost {
  background: var(--innerPost-background-marked-color); /* #B8B1E3 */
  border-color: var(--innerPost-marked-border-color);
  color: var(--marked-text-color);
}

#newPostFieldset {
  background: var(--newPostFieldset-background-color);
  border: 1px dashed var(--newPostFieldset-border-color);
  border-radius: 6px;
}

#sideCatalogDiv {
  background: rgba(228, 228, 249, 0.6); /* E4E4F9 */
  border: 1px black;
  border-style: none none none solid;
  padding: 0.25em;
}

.linkThumb img {
  border: 1px solid var(--linkThumb-border-color);
  border-radius: 6px;
}

#settingsMenu{
  border-radius: 6px;
  padding: 0.25em;
  background: var(--settingsMenu-background-color);
}
#watchedMenu {
  border-radius: 6px;
  padding: 0.25em;
  background: rgba(249, 228, 228, 0.6);
}

.sideCatalogMarkedCell,
.sideCatalogCell {
  border: 1px black;
}

.imgFlag {
  max-width: none;
  max-height: 24px;
}

#bannerImage {
  max-width: 100%;
  border: 1px solid var(--bannerImager-border-color);
  border-radius: 6px;
}

/* v-------------  Uploaded images in posts */
.uploadCell img:not(.imgExpanded) {
  max-width: 225px;
  max-height: 225px;
  object-fit: contain;
  border: 1px solid var(--upload-img-not-expanded-border-color);
  border-radius: 6px;
}

#boardContentLinks.innerUtility,
div#actionsForm,
#dynamicAnnouncement table,
.boardLinks,
.threadBottom,
span#labelAutoIndicator,
div#footer,
.boardHeader p
  font-weight: bold;
}
.quoteLink {
  color: #a10705;
}
#panelMessage {
  color: var(--panelMessage-color);
}
.noEmailName,
.noEmailName:hover {
  color: var(--noEmailName-color);
}
.greenText {
  color: var(--greentext-color);
}
.pinkText {
  color: var(--pinktext-color);
}
div#dropzone.dropzone {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
div#dropzone.dropzone:hover {
 background: var(--reload-button-hover-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-hover-font-color);
}
div#dropzone.dropzone:active {
 background: var(--reload-button-press-bg-color);
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-press-text-color);
}

/* ---------------  QUICK REPLY  --------------- */
input#formButton, input#qrbutton {
  background: var(--input-Formbutton-and-qrbutton-background-color);
  border-top: 1px solid var( --input-Formbutton-and-qrbutton-border-top-color);
  border-right: 1px solid var( --input-Formbutton-and-qrbutton-border-right-color);
  border-bottom: 1px solid var( --input-Formbutton-and-qrbutton-border-bottom-color);
  border-left: 1px solid var( --input-Formbutton-and-qrbutton-border-left-color);
  border-radius: 4px;
  box-shadow: inset 0 1px 10px 1px var(--input-Formbutton-and-qrbutton-box-shadow1-color), 0px 1px 0 var(--input-Formbutton-and-qrbutton-box-shadow2-color), 0 6px 0px var(--input-Formbutton-and-qrbutton-box-shadow3-color), 0 8px 4px 1px var(--input-Formbutton-and-qrbutton-box-shadow4-color);
  color: var(--input-Formbutton-and-qrbutton-text-color);
  font: bold 20px "helvetica neue", helvetica bold 20px "helvetica neue", helvetica;
  line-height: 1;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0px -1px 1px var(--input-Formbutton-and-qrbutton-text-shadow--color);
  width: 150px;
  -webkit-background-clip: padding-box;
}
input#formButton:hover, input#qrbutton:hover {
  -webkit-box-shadow: inset 0 0px 20px 1px var(--input-Formbutton-and-qrbutton-box-shadow-hover-color), 0px 1px 0 var(--input-Formbutton-and-qrbutton-box-shadow2-color), 0 6px 0px var(--input-Formbutton-and-qrbutton-box-shadow3-color), 0 8px 4px 1px var(--input-Formbutton-and-qrbutton-box-shadow4-color);
  -moz-box-shadow: inset 0 0px 20px 1px var(--input-Formbutton-and-qrbutton-box-shadow-hover-color), 0px 1px 0 var(--input-Formbutton-and-qrbutton-box-shadow2-color), 0 6px 0px var(--input-Formbutton-and-qrbutton-box-shadow3-color), 0 8px 4px 1px var(--input-Formbutton-and-qrbutton-box-shadow4-color);
  box-shadow: inset 0 0px 20px 1px var(--input-Formbutton-and-qrbutton-box-shadow-hover-color), 0px 1px 0 var(--input-Formbutton-and-qrbutton-box-shadow2-color), 0 6px 0px var(--input-Formbutton-and-qrbutton-box-shadow3-color), 0 8px 4px 1px var(--input-Formbutton-and-qrbutton-box-shadow4-color);
  cursor: pointer;
}
input#formButton:active, input#qrbutton:active {
  -webkit-box-shadow: inset 0 1px 10px 1px var(--input-Formbutton-and-qrbutton-box-shadow-active-color), 0 1px 0 var(--input-Formbutton-and-qrbutton-box-shadow2-color), 0 2px 0 var(--input-Formbutton-and-qrbutton-box-shadow3-color), 0 4px 3px 0 var(--input-Formbutton-and-qrbutton-box-shadow4-color);
  -moz-box-shadow: inset 0 1px 10px 1px var(--input-Formbutton-and-qrbutton-box-shadow-active-color), 0 1px 0 var(--input-Formbutton-and-qrbutton-box-shadow2-color), 0 2px 0 var(--input-Formbutton-and-qrbutton-box-shadow3-color), 0 4px 3px 0 var(--input-Formbutton-and-qrbutton-box-shadow4-color);
  box-shadow: inset 0 1px 10px 1px var(--input-Formbutton-and-qrbutton-box-shadow-active-color), 0 1px 0 var(--input-Formbutton-and-qrbutton-box-shadow2-color), 0 2px 0 var(--input-Formbutton-and-qrbutton-box-shadow3-color), 0 4px 3px 0 var(--input-Formbutton-and-qrbutton-box-shadow4-color);
  transform: translateY(4px);
}

/* x x x x x x x  QUICK REPLY  x x x x x x x */

/* ---------------  QUICK REPLY  --------------- */
input.modalOkButton {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 color:var(--reload-button-font-color);
}
input.modalOkButton:hover {
 background-color:var(--reload-button-hover-bg-color) !important;
 border: 1px solid var(--reload-button-hover-border-color);
 color:var(--reload-button-hover-font-color);
}
input.modalOkButton:active {
 background-color:var(--reload-button-press-bg-color) !important;
 border: 1px solid var(--reload-button-press-border-color);
 color:var(--reload-button-press-text-color);
}
input[type="submit"] {
 background: var(--reload-button-bg-color);
 border: 1px solid var(--reload-button-border-color);
 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);
 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);
 color:var(--reload-button-press-text-color);
}
input[value="Cancel"] {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 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);
 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);
 color:var(--reload-button-press-text-color);
}
input[value="Reload"] {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 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);
 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);
 color:var(--reload-button-press-text-color);
}
input#refreshButton {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 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);
 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);
 color:var(--reload-button-press-text-color);
}
button {
 background-color:var(--reload-button-bg-color) !important;
 border: 1px solid var(--reload-button-border-color);
 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);
 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);
 color:var(--reload-button-press-text-color);
  }

/* x x x x x x x  QUICK REPLY  x x x x x x x */

/* ---------------  QUICK REPLY  --------------- */
/* v-------------  X Icon near 'Quick Reply' (Keep it the same color as the text) */
a.close-btn.coloredIcon {
 color: var(--PostingForm-text-color);
}
a.close-btn.coloredIcon:hover {
 color:var(--a-link-hover-color);
}
a.close-btn.coloredIcon:active {
 color:var(--a-link-press-color);
}

/* v-------------  Quick Reply bar */
div#quick-reply.floatingMenu.focused form table tbody tr th.handle{
  border: 1px solid var(--PostingForm-border-color);
  background: var(--PostingForm-background-color);
  color: var(--PostingForm-text-color);
}

/* v-------------  Quick Reply background */
#quick-reply {
  border-radius: 6px;
  padding: 0.25em;
  background: var(--quick-replay-background-color);
}

/* x x x x x x x  QUICK REPLY  x x x x x x x */

a,
.glowOnHover {
 color: var(--a-link-color);
 text-shadow: none;
}
a:hover,
.glowOnHover:hover {
 color: var(--a-link-hover-color);
 text-shadow: 1px 0px 20px var(--text-shadow-color);
}
a:active,
.glowOnHover:active {
 color: var(--a-link-press-color);
 text-shadow: 1px 0px 20px var(--text-shadow-press-color);
}
.selectedCell {
  background: var(--selectedCell-cell-background-color);
}
.containPages {
  color: var(--link-color);
  background-color: var(--site-background-color);
}
.reportFieldset {
  background: var(--reportFieldset-background-color);
  border: 1px dashed var(--reportFieldset-border-color);
}
.titleFieldset {
  background: var(--reportFieldset-background-color);
  border: 1px dashed var( --titleFieldset-border-color);
}
.boardHeader p, #overboardId {
  color: var(--boardHeader-p-color);
}

.labelRole {
  color: var(--role-color);
}