MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
/***********************************************************************************************************
 * css reset for browser default rules and MediaWiki internal rules
 ***********************************************************************************************************/
* {
  outline: 0;
}

table {
  white-space: unset; /* be set to `no-wrap` in MW internal css */
}

html {
  font-size: 16px; /* reset rem size */
}

body {
  overflow-y: unset;
}

pre {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  border: 0 solid transparent;
}

table {
  display: table;
  white-space: unset;
}

body, code {
  background: none;
}

/***********************************************************************************************************
 * css for wiki.gg top bar and footer bar
 ***********************************************************************************************************/
/********* wiki.gg header *********/
header#wikigg-header #p-personal ul {
  white-space: nowrap; /* for "log out" */
}
header#wikigg-header #p-personal .vector-menu-content #pt-anonuserpage, header#wikigg-header #p-personal .vector-menu-content #pt-userpage a {
  /* user avatar icon position fix */
  padding-top: 0;
  background-position: left center;
}
@media screen and (max-width: 720px) {
  header#wikigg-header #p-personal li#p-themes > span {
    display: inline-block;
  }
}

/********* wiki.gg footer *********/
footer#wikigg-footer .footer-right, footer#wikigg-footer .footer-left {
  margin: 0;
  text-align: center;
}
@media screen and (max-width: 479px) {
  footer#wikigg-footer .footer-right, footer#wikigg-footer .footer-left {
    width: auto;
  }
}
@media screen and (max-width: 359px) {
  footer#wikigg-footer .footer-middle {
    /* hide wiki.gg logo to make room to avoid text wrapping */
    display: none;
  }
}

/***********************************************************************************************************
 * theming vars.
 ***********************************************************************************************************/
:root {
  /*** top site logo ***/
  --theme-site-logo-image: url(/images/e/e6/Site-logo.png);
  --theme-site-logo-filter: none;
  --theme-site-logo-width: 492px;
  --theme-site-logo-height: 108px;
  /*** site background ***/
  --theme-site-background: #73bfe8 url(/images/8/80/Site-background.jpg) top center / cover no-repeat fixed;
  /* common "box" style */
  --theme-box-back-backdrop-filter: none;
  --theme-box-border-radius: 4px;
  --theme-box-border-width: 0px;
  --theme-box-border-style: solid;
  --theme-box-border-color: #511e00;
  --theme-box-shadow: none;
  --theme-box-shadow2: none;
  --theme-box-back-background: rgba(255,255,255,0.8);
  /* be used in multi-layer background, so we can't simpy use background-color */
  --theme-box-background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5));
  --theme-background: var(--theme-box-background), var(--theme-box-back-background);
  /*** text color ***/
  --theme-text-color: #000;
  --theme-text-color-hover: var(--theme-text-color);
  --theme-text-color-note: #9d9d9d;
  --theme-text-color-em: #0c742f;
  --theme-heading-color: var(--theme-text-color);
  --theme-text-color-placeholder: #808080;
  --theme-control-text-color: #333;
  --theme-control-text-color-hover: #333;
  /*** link text color ***/
  --theme-link-color: #611e00;
  --theme-link-color-hover: #000000;
  --theme-link-color-visited: var(--theme-link-color);
  --theme-link-color-redlink: #bf0017;
  --theme-link-color-focus: var(--theme-link-color);
  /* default color for icons */
  --theme-icon-color: var(--theme-link-color);
  --theme-icon-color-redlink: var(--theme-link-color-redlink);
  --theme-icon-color-hover: var(--theme-link-color-hover);
  /* default common color */
  --theme-border-color: #cecece;
  --theme-border-color-accent: #ffdd7a;
  --theme-highlight-background: rgba(255, 221, 122, 0.5);
  /* dropdown menu */
  --theme-dropdown-border: 1px solid var(--theme-box-border-color);
  --theme-dropdown-background: rgba(255,255,255,0.95);
  --theme-dropdown-backdrop-filter: blur(5px);
  /* for wide table */
  --theme-wide-table-shadow-color: #999;
  /** notification **/
  --theme-notice-red-text-color: #ff001f;
  --theme-notice-orange-text-color: #ffab5b;
  /* portable infobox */
  --pi-background: #ffffff;
  --pi-border-color: rgba(255,221,122, 0.5);
  --pi-secondary-background: rgb(255,221,122);
  --pi-secondary-background--label: #000;
  --pi-item-spacing: 8px 10px;
  /* misc */
  --theme-page-background-color: #ffffff;
  --theme-page-background-color--secondary: #f2f2f2;
  --theme-page-dynamic-color-1--rgb: 0,0,0;
}
:root.theme-dark {
  --theme-site-background: #111d64 url(/images/c/c4/Site-background-dark.jpg) top center / cover no-repeat fixed;
}
:root.theme-dark {
  --theme-box-border-color: #666666;
  --theme-box-back-background: rgba(30,31,31,0.8);
  --theme-box-background: linear-gradient(rgba(30,31,31,0.5), rgba(30,31,31,0.5));
}
:root.theme-dark {
  --theme-text-color: #fff;
  --theme-text-color-note: #bbb;
  --theme-text-color-em: #00f600;
}
:root.theme-dark {
  --theme-link-color: #00abff;
  --theme-link-color-hover: #65ccff;
  --theme-link-color-redlink: #dd001a;
}
:root.theme-dark {
  --theme-border-color: #505151;
  --theme-border-color-accent: #296bc4;
  --theme-highlight-background: rgba(0, 171, 255, 0.15);
}
:root.theme-dark {
  --theme-dropdown-background: rgba(30,31,31,0.95);
}
:root.theme-dark {
  --pi-background: #1e1f1f;
  --pi-border-color: rgba(41,107,196, 0.5);
  --pi-secondary-background: rgb(41,107,196);
  --pi-secondary-background--label: #fff;
}
:root.theme-dark {
  --theme-page-background-color: #1e1f1f;
  --theme-page-background-color--secondary: #404141;
  --theme-page-dynamic-color-1--rgb: 255,255,255;
}

/* main content box */
/* sidebar */
#mw-panel {
  --theme-link-color: var(--theme-text-color);
  --theme-link-color-visited: var(--theme-link-color);
  --theme-link-color-hover: var(--theme-link-color);
  --theme-border-width: 0;
  --theme-gap: 0;
}

#catlinks {
  --theme-background: none;
  --theme-box-border-radius: 0;
}

#footer {
  --theme-background: none;
}

/* navbar */
#mw-head {
  --theme-link-color: var(--theme-text-color);
  --theme-link-color-visited: var(--theme-link-color);
  --theme-link-color-hover: var(--theme-link-color);
  --theme-background: none;
  --theme-background-shadow: linear-gradient(to top, rgba(0,0,0,0.05), transparent 6px);
  --theme-tab-background: var(--theme-box-background);
  --theme-tab-background-selected: var(--theme-box-background);
  --theme-tab-border-color: var(--theme-box-border-color);
  --theme-tab-border-color-selected: var(--theme-box-border-color);
}
#mw-head #p-search {
  --theme-border-color: var(--theme-box-border-color);
  --theme-link-color: var(--theme-text-color);
  --theme-background: var(--theme-box-background);
  --theme-border-color-hover: var(--theme-icon-color-hover);
  --theme-border-color-focus: var(--theme-border-color-hover);
  --theme-shadow: none;
  --theme-shadow-focus: var(--theme-box-shadow);
}

/* search result suggestion */
body > .suggestions {
  --theme-border-color: var(--theme-border-color-accent);
  --theme-rule-color: var(--theme-border-color-accent);
  --theme-link-color: var(--theme-text-color);
  --theme-link-color-visited: var(--theme-text-color);
  --theme-link-color-hover: var(--theme-text-color-hover);
}

/***********************************************************************************************************
 * base css styles for both interface and content box: font, color, etc.
 ***********************************************************************************************************/
/** Font **/
html, body {
  font-family: Helvetica, Arial, sans-serif;
  color: var(--theme-text-color);
}

html {
  background: var(--theme-site-background);
}

body {
  font-size: 14px;
  line-height: 1.5;
}

ul, ol {
  margin: 2px 0 2px 1.5em;
}

li {
  margin: 0 0 2px 0;
}

pre, code, .mw-code {
  color: var(--theme-text-color);
  border: 1px solid var(--theme-border-color);
  background: var(--theme-background);
}

/** link color **/
/* Self-links aren't real links, they're not clickable.
 * Hence, they shouldn't change color when hovered over like real links, as that is counter-intuitive.
 * We should not use :not(.selflink) since it increases the priority and make it is difficult to override
 * link styles for certain elements (e.g. in wiki.gg header).
 */
a,
a.selflink:hover, a.selflink:active {
  text-decoration: none;
  color: var(--theme-link-color);
}

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

a:hover, a:active {
  text-decoration: underline;
  color: var(--theme-link-color-hover);
}

/** red link **/
/* we don't really need to mark you have "visited" an inexistent page */
a.new, a.new:visited {
  color: var(--theme-link-color-redlink);
}

/*********************************************************************************************************/
input, button {
  color: var(--theme-control-text-color);
  caret-color: var(--theme-text-color);
}

input[type=submit] {
  color: var(--theme-control-text-color);
}

::placeholder {
  color: var(--theme-text-color-placeholder);
}

/* Removes VisualEdit button */
#ca-ve-edit {
  display: none;
}

/* Link color */
.mw-parser-output a.external,
.mw-parser-output a.external:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.extiw:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  color: var(--theme-link-color);
}

/* Text color */
.i .note,
.note-text {
  color: var(--theme-text-color-note);
}

.pixel img, .pixel,
#mw-imagepage-section-filehistory img {
  image-rendering: pixelated; /*for chrome*/
  image-rendering: crisp-edges; /*for firefox*/
}

.small {
  font-size: 85%;
}

.fullwidth, .full-width {
  width: 100%;
}

.nowrap {
  white-space: nowrap;
}

/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
  text-align: center;
}

.alignleft,
.align-left {
  text-align: left;
}

.alignright,
.align-right {
  text-align: right;
}

/* clear fix for float block */
.clearfix {
  *zoom: 1;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* References smaller text than main */
.references {
  font-size: 90%;
}

/* Larger font for Module: code display (default is smaller than other code pages) */
pre.lua.source-lua {
  font-size: 14px !important;
}

/* Facilitate inline scary transclusion */
.scary-transclusion p, .scary-transclusion .mw-parser-output {
  display: inline;
}

/* hide last empty paragraph at the end */
div.mw-parser-output > p:last-child > br:only-child {
  display: none;
}

/* Fix empty parameter descriptions on api.php having no height, causing misalignments that seriously impede readability */
.apihelp-parameters dd:empty::before {
  content: " ";
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

hr.space {
  height: 4px;
  background: none;
  border: 0;
}

.page-content .vertical-align-top * {
  vertical-align: top;
}

.page-content .vertical-align-bottom * {
  vertical-align: bottom;
}

/* Drowning Table No Border */
.drowning-table-no-border {
  border: none;
}

/* Gadget description length */
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
  max-width: unset;
}

/* Box at the top of all pages when the user has a new message on their User_talk: page */
.usermessage {
  box-sizing: border-box;
  border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
  border-radius: var(--theme-box-border-radius);
  backdrop-filter: var(--theme-box-back-backdrop-filter);
  box-shadow: var(--theme-box-shadow);
  background: var(--theme-box-background), var(--theme-box-back-background);
}

/***********************************************************************************************************
 * interface layout and styles for widgets outside of content box
 ***********************************************************************************************************/
:root {
  --layout-topbar-height: 35px; /* height of wiki.gg topbar */
  --layout-sidebar-width: 180px; /* width of side navbar, without gap */
  --layout-sidespace: 24px; /* whitespace width on most left and most right */
  --layout-box-gap: 12px;
  --layout-box-border-radius: 5px;
  --layout-logo-scale: 1;
  --layout-logo-box-height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale) + var(--layout-box-gap) * 2);
  --dropdown-item-padding-x: 12px;
  --dropdown-item-padding-y: 4px;
}

/**** Main Layout START ***********************************************************/
/**
 * Note: wiki.gg topbar is position:fixed. So we don't need to consider it in grid layout
 */
html, body {
  min-height: 100%;
}

html {
  height: 100%;
  scroll-padding-top: calc(var(--layout-topbar-height) + 10px);
}

body {
  height: auto;
}

/*** main grid container ***/
body {
  /* self */
  box-sizing: border-box;
  /* grid */
  display: grid;
  grid-template-columns: [body-left] var(--layout-sidespace) [aside-left] var(--layout-sidebar-width) [aside-right nav-left content-left footer-left] minmax(0, 1fr) [nav-right content-right footer-right] var(--layout-sidespace) [body-right];
  grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end nav-start aside-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [aside-end page-end] 0fr [body-end];
  gap: 0 var(--layout-box-gap);
}

/*** grid items ***/
/* Flatten DOM structure. Therefore we have following grid items under body grid container:
 * div#mw-page-base, div#mw-head-base, #mw-navigation>h2, div#mw-head, div#mw-panel, div#content.mw-body, div#footer, footer.
 */
body > .content-wrapper,
#mw-navigation {
  display: contents;
}

/** unused, hide them **/
#mw-head-base,
#mw-navigation > h2 {
  display: none;
}

/** side nav bar **/
#mw-panel {
  grid-column: aside-left/aside-right;
  grid-row: aside-start/aside-end;
  margin-bottom: var(--layout-box-gap);
  float: none;
  width: unset;
  padding: 0;
}

/** nav **/
#mw-head {
  grid-column: nav-left/nav-right;
  grid-row: nav-start/nav-end;
}

/** content **/
.mw-body {
  grid-column: content-left/content-right;
  grid-row: content-start/content-end;
}

/* For some page such as api.php, .mw-body is the only child, so take up all space. */
.mw-body:first-child {
  grid-column: body-left/body-right;
  grid-row: page-start/page-end;
}

/** #footer: content footer **/
#footer {
  grid-column: footer-left/footer-right;
  grid-row: footer-start/footer-end;
  margin: 0;
  z-index: 0;
}

/** used to gen box shadow for main box (nav + content + #footer) **/
#mw-page-base {
  grid-column: content-left/content-right;
  grid-row: nav-start/footer-end;
  height: 100%;
}

/** wiki.gg footer bar **/
body > footer {
  grid-column: body-left/body-right;
  grid-row: page-end/body-end;
}

/*** logo block. It is absolute position ***/
#p-logo {
  position: absolute;
  width: 100%;
  height: var(--layout-logo-box-height);
  left: 0;
  top: var(--layout-topbar-height);
  background: var(--theme-site-logo-image) center center/var(--theme-site-logo-width) auto no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: var(--theme-site-logo-filter);
}

/* use logo image as <a>'s background will sometime flicker when hovered on Firefox,
 * I still don't know why, but move background to #p-logo can avoid this issue.
 */
#p-logo .mw-wiki-logo {
  width: var(--theme-site-logo-width);
  height: var(--theme-site-logo-height);
  margin: auto;
  background: none; /* logo flicker fix */
}

/**** Main Layout END ***********************************************************/

/********* side panel START *********/
#mw-panel {
  --list-body-font-size: 14px;
  --list-body-padding-x: 6px;
  --list-body-padding-y: 3px;
}

#mw-panel a {
  text-decoration: none;
}

/* section box */
#mw-panel .portal {
  margin: 0 0 var(--layout-box-gap) 0;
  padding: 0;
  box-sizing: border-box;
  border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
  border-radius: var(--theme-box-border-radius);
  backdrop-filter: var(--theme-box-back-backdrop-filter);
  box-shadow: var(--theme-box-shadow);
  background: var(--theme-box-background), var(--theme-box-back-background);
}
#mw-panel .portal .vector-menu-heading {
  /* section heading */
  background: none;
  margin: 0;
  padding: 6px 10px;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--theme-heading-color);
}

/* show the heading of first section */
#mw-panel #p-logo + .portal .vector-menu-heading {
  display: flex;
}

/* arrow icon */
#mw-panel .portal .vector-menu-heading::after {
  content: "";
  display: block;
  background: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: var(--theme-icon-color) transparent;
  border-width: 0 5px 6px;
  margin-top: 2px;
  flex: 0 0 auto;
}
#mw-panel .portal .vector-menu-heading:hover::after {
  border-color: var(--theme-icon-color-hover) transparent;
}
#mw-panel .portal.collapsed .vector-menu-heading::after {
  transform: scaleY(-1);
}

/* list body */
#mw-panel .portal .body {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-top: var(--theme-border-width) solid var(--theme-border-color);
}
#mw-panel .portal .body ul {
  padding: var(--theme-gap) 4px 4px;
}
#mw-panel .portal .body li {
  margin: 0;
  padding: 0;
  font-size: var(--list-body-font-size);
  line-height: inherit;
}
#mw-panel .portal .body li:hover {
  background: var(--theme-highlight-background);
}
#mw-panel .portal .body li a {
  display: block;
  padding: var(--list-body-padding-y) var(--list-body-padding-x);
  color: var(--theme-link-color);
}
#mw-panel .portal .body li a:visited {
  color: var(--theme-link-color-visited);
}
#mw-panel .portal .body li a:hover {
  color: var(--theme-link-color-hover);
}

/* "Atom" RSS Feed */
#mw-panel .portal .body li a.feedlink {
  text-indent: calc(var(--list-body-font-size) + 2px);
  background-position: var(--list-body-padding-x) center; /* align icon with other text */
}

/********* side panel END *********/

/********* main content box *********/
/****** navbar (#mw-head) ******/
/* reset */
#mw-head * {
  float: unset;
  font-size: unset;
  line-height: unset;
}

/* tabs layout */
#mw-head {
  --layout-padding: 12px;
  --layout-gap: 6px;
  --tab-padding-x: 12px;
  --tab-padding-y: 5px;
  --icon-size: 1em;
  padding: var(--layout-padding) 0 0 0;
  background: var(--theme-background);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
#mw-head #left-navigation, #mw-head #right-navigation {
  float: none;
  flex: 1 1 auto;
  margin: 0;
  display: flex;
  align-items: flex-end;
}
#mw-head #left-navigation::before, #mw-head #left-navigation::after, #mw-head #right-navigation::before, #mw-head #right-navigation::after {
  content: "";
  display: block;
  height: 100%;
  border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
  background: var(--theme-background-shadow);
}
#mw-head #left-navigation {
  justify-content: flex-start;
}
#mw-head #right-navigation {
  justify-content: flex-end;
}
#mw-head #left-navigation::before, #mw-head #right-navigation::after {
  flex: 0 0 var(--layout-padding);
}
#mw-head #left-navigation::after, #mw-head #right-navigation::before {
  flex: 1 1 auto;
}

/*** tabs of navbar ***/
/* reset */
#mw-head .vector-menu,
#mw-head .vector-menu * {
  background: none;
}

/* tabs list */
#mw-head .vector-menu-tabs {
  height: unset;
  padding: unset;
}
#mw-head .vector-menu-tabs .vector-menu-content-list {
  display: flex;
  align-items: flex-end;
}

/* tab */
#mw-head {
  --theme-tab-border-style: solid;
  --theme-tab-border-width: 1px;
  --theme-border-bottom-style: solid;
  --theme-border-bottom-width: 1px;
  --theme-border-bottom-color: var(--theme-tab-border-color-selected);
  --theme-border-bottom-color-selected: transparent;
}
#mw-head .vector-menu-tabs .mw-list-item,
#mw-head .vector-menu-dropdown {
  /* outer box */
  background: var(--theme-tab-background);
  border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
  border-radius: var(--theme-box-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  margin-right: var(--layout-gap); /* make space for gap */
}
#mw-head .vector-menu-tabs .mw-list-item::after,
#mw-head .vector-menu-dropdown::after {
  /* gap */
  content: "";
  display: block;
  width: var(--layout-gap);
  height: 100%;
  border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
  position: absolute;
  left: 100%;
  bottom: calc(0px - var(--theme-border-bottom-width));
  background: var(--theme-background-shadow);
}
#mw-head .vector-menu-tabs .mw-list-item a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  /* inner box */
  height: auto;
  margin: 0;
  padding: var(--tab-padding-y) var(--tab-padding-x);
  border: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color);
  border-bottom: 0;
  border-radius: var(--theme-box-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  color: var(--theme-link-color);
  background: var(--theme-background-shadow);
}
#mw-head .vector-menu-tabs .mw-list-item a:hover,
#mw-head .vector-menu-dropdown .vector-menu-heading:hover {
  color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-list-item a.new,
#mw-head .vector-menu-dropdown .vector-menu-heading.new {
  color: var(--theme-link-color-redlink);
}
#mw-head .vector-menu-tabs .mw-list-item.selected {
  /* outer box: selected */
  background: var(--theme-tab-background-selected);
  border: var(--theme-tab-border-width) var(--theme-tab-border-style) var(--theme-tab-border-color-selected);
  border-bottom: 0;
}
#mw-head .vector-menu-tabs .mw-list-item.selected:after {
  /* gap */
  bottom: 0;
  padding-left: var(--theme-tab-border-width); /* x-position offset */
}
#mw-head .vector-menu-tabs .mw-list-item.selected a {
  /* inner box: selected */
  border: 0;
  border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color-selected);
  background: none;
  color: var(--theme-text-color);
}

/* dropdown menu*/
#mw-head .vector-menu-dropdown .vector-menu-heading {
  /* tab label */
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
}
#mw-head .vector-menu-dropdown .vector-menu-heading::after {
  /* arrow icon */
  background: none;
  opacity: unset;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: var(--theme-icon-color) transparent;
  border-width: 6px 5px 0;
  margin-top: 2px;
}
#mw-head .vector-menu-dropdown:hover .vector-menu-heading::after {
  /* .vector-menu-heading is covered by .vector-menu-checkbox, therefore we can't use .vector-menu-heading:hover::after */
  border-color: var(--theme-icon-color-hover) transparent;
}
#mw-head .vector-menu-dropdown .vector-menu-content {
  /* dropdown list body */
  border: var(--theme-dropdown-border);
  border-radius: var(--theme-box-border-radius);
  background: var(--theme-dropdown-background);
  backdrop-filter: var(--theme-dropdown-backdrop-filter);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  left: 0; /* reset */
}
#mw-head .vector-menu-dropdown .vector-menu-content ul {
  padding: 4px;
}
#mw-head .vector-menu-dropdown .vector-menu-content li:hover {
  background: var(--theme-highlight-background);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a {
  display: block;
  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
  text-decoration: none;
  color: var(--theme-link-color);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:visited {
  color: var(--theme-link-color-visited);
}
#mw-head .vector-menu-dropdown .vector-menu-content li a:hover {
  color: var(--theme-link-color-hover);
}

/* watch/unwatch star */
#mw-head .vector-menu-tabs .mw-watchlink.icon a {
  --theme-link-color-hover: var(--theme-icon-color-hover);
  width: 1.5em; /* same as line height */
  height: 1.5em;
  box-sizing: content-box;
  padding: var(--tab-padding-y);
  color: transparent; /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
  content: "";
  display: block;
  position: unset;
  background-image: none;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: calc((1.5em - var(--icon-size)) / 2);
  --mask: var(--icon) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--theme-link-color);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a:hover::before {
  background-color: var(--theme-link-color-hover);
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a span {
  display: none;
}
#mw-head .vector-menu-tabs .mw-watchlink.icon a::before {
  transform-origin: 50% calc(var(--icon-size) / 2 * 1.125);
}
#mw-head .vector-menu-tabs #ca-watch.icon {
  /* line star */
  --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M28.61,11.67H20l-2.66-8.2a1.39,1.39,0,0,0-2.64,0L12,11.67H3.39a1.39,1.39,0,0,0-.82,2.51l7,5.07L6.89,27.46a1.39,1.39,0,0,0,1.32,1.82A1.43,1.43,0,0,0,9,29l7-5.07L23,29a1.43,1.43,0,0,0,.81.27,1.39,1.39,0,0,0,1.32-1.82l-2.66-8.21,7-5.07A1.39,1.39,0,0,0,28.61,11.67Zm-7.34,6-1.17.86.44,1.38,2.09,6.41-5.45-4L16,21.46l-1.18.86-5.45,4,2.09-6.41.44-1.38-1.17-.86-5.45-4h8.19l.45-1.38L16,5.89l2.08,6.4.45,1.38h8.19Z'/%3E%3C/g%3E%3C/svg%3E");
}
#mw-head .vector-menu-tabs #ca-unwatch.icon {
  /* solid star */
  --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M28.61,11.67H20l-2.66-8.2a1.39,1.39,0,0,0-2.64,0L12,11.67H3.39a1.39,1.39,0,0,0-.82,2.51l7,5.07L6.89,27.46a1.39,1.39,0,0,0,1.32,1.82A1.43,1.43,0,0,0,9,29l7-5.07L23,29a1.43,1.43,0,0,0,.81.27,1.39,1.39,0,0,0,1.32-1.82l-2.66-8.21,7-5.07A1.39,1.39,0,0,0,28.61,11.67Z'/%3E%3C/g%3E%3C/svg%3E");
}


/*** search form ***/
#mw-head #p-search {
  /* navbar common border bottom */
  border-bottom: var(--theme-border-bottom-width) var(--theme-border-bottom-style) var(--theme-border-bottom-color);
  background: var(--theme-background-shadow);
  margin: 0;
  align-self: stretch;
}
#mw-head #p-search form {
  margin: 0;
}
#mw-head #p-search .vector-search-box-input {
  border-width: 1px;
  border-style: solid;
  border-color: var(--theme-border-color);
  color: var(--theme-text-color);
  background: var(--theme-background);
  box-shadow: var(--theme-shadow);
  height: 26px;
  padding: 0 26px 0 4px;
}
#mw-head #p-search .vector-search-box-input:hover {
  border-color: var(--theme-border-color-hover);
}
#mw-head #p-search .vector-search-box-input:focus {
  border-color: var(--theme-border-color-focus);
  box-shadow: var(--theme-shadow-focus);
  outline: 0;
  z-index: 1100; /* .suggestions: 1099 */
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
  z-index: 1101;
}
#mw-head #p-search .vector-search-box-input::placeholder {
  color: var(--theme-text-color-note);
}
#mw-head #p-search .mw-searchButton {
  opacity: 0;
}
#mw-head #p-search .searchButton {
  width: 26px;
  min-width: unset;
  opacity: 1;
  background-image: none;
  --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E search %3C/title%3E%3Cpath fill-rule='evenodd' d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM13 8A5 5 0 1 1 3 8a5 5 0 0 1 10 0z'/%3E%3C/svg%3E%0A") no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--theme-link-color);
}
#mw-head #p-search #searchform:hover .searchButton {
  background-color: var(--theme-link-color-hover);
}
#mw-head #p-search .vector-search-box-input:focus ~ .searchButton {
  background-color: var(--theme-link-color-focus);
}

/*** search result suggestions ***/
.suggestions {
  background: var(--theme-background);
  box-sizing: border-box;
  margin-top: 0;
  box-shadow: var(--theme-box-shadow);
  backdrop-filter: var(--theme-box-back-backdrop-filter);
}
.suggestions .suggestions-results,
.suggestions .suggestions-special {
  background: none;
}
.suggestions .suggestions-results {
  border: 1px solid var(--theme-border-color);
  border-top: 0;
  border-bottom-color: var(--theme-rule-color);
}
.suggestions .suggestions-results:empty {
  border-bottom: 0;
}
.suggestions .suggestions-result,
.suggestions .suggestions-special .special-label,
.suggestions .suggestions-special .special-query {
  color: var(--theme-text-color);
}
.suggestions .suggestions-result {
  padding: 1px 4px;
}
.suggestions .suggestions-special {
  margin: 0;
  padding: 2px 4px 4px;
  border: 1px solid var(--theme-border-color);
  border-top: 0;
  border-radius: var(--theme-box-border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
  color: var(--theme-link-color);
}
.suggestions .suggestions-result-current {
  background: var(--theme-highlight-background);
  color: var(--theme-link-color-hover);
}
.suggestions .suggestions-result-current .special-label, .suggestions .suggestions-result-current .special-query {
  color: var(--theme-link-color-hover);
}



/**** main content box ****/
/* font */
.vector-body {
  font-size: unset; /* reset */
  line-height: 1.7142857143;
}

/** layout **/
#content {
  color: var(--theme-text-color);
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--theme-box-background);
  --theme-heading-rule-color-h1: var(--theme-border-color);
  --theme-heading-rule-color-h2: var(--theme-border-color);
  --layout-padding-x: 24px;
  --layout-padding-y: 16px;
}

.content-body {
  flex: 1 1 auto;
}
.content-body > main {
  align-self: stretch;
  padding: var(--layout-padding-y) var(--layout-padding-x);
}

#bodyContent {
  display: flex;
  flex-direction: column;
  position: unset;
}

/** main heading section **/
#firstHeading {
  overflow: hidden; /* override mw internal css, fix scroll-x issue for narrow width */
}

/** the " < rootpage < page " crumb **/
#contentSub, #contentSub2 {
  margin: 0;
  color: var(--theme-text-color-note);
  font-size: 12px;
  line-height: 20px;
}

#contentSub .subpages {
  color: transparent;
  line-height: 20px;
  font-size: 0;
}
#contentSub .subpages a {
  font-size: 12px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  padding-left: 4px;
}
#contentSub .subpages a::before {
  content: "";
  display: inline-block;
  height: 4px;
  width: 4px;
  border-color: var(--theme-icon-color);
  border-style: solid;
  border-width: 0 0 2px 2px;
  margin: 0 2px 0 0;
  transform: rotate(45deg);
}
#contentSub::after {
  /* the spacing and line between heading section and content body box */
  content: "";
  display: block;
  height: 0;
  border-bottom: 1px solid var(--theme-heading-rule-color-h2);
  margin-top: 4px;
  margin-bottom: var(--layout-padding-y);
}

/** content body box **/
#mw-content-text {
  flex: 1 1 auto;
  min-height: 30em;
}

/*** "category:" box ***/
#catlinks {
  background: var(--theme-background);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--theme-box-border-radius);
  margin: var(--layout-padding-y) 0 0 0;
  padding: 0.5em 1em;
}

/*** ads ***/
div.games-showcase-header {
  margin: 0;
  padding: var(--layout-padding-y) var(--layout-padding-x) 0;
}

div.games-showcase-footer {
  margin: 0;
  padding: 0 var(--layout-padding-x) var(--layout-padding-y);
}

.content-body > .games-showcase-sidebar {
  margin: 0;
  padding: var(--layout-padding-y) var(--layout-padding-x) 0 0;
}

.games-showcase-header img, .games-showcase-footer img {
  height: 100%;
  width: auto;
  object-fit: contain;
}
@media screen and (max-width: 1100px) {
  .games-showcase-header img, .games-showcase-footer img {
    height: auto !important;
    width: 100% !important;
    object-fit: contain;
  }
}
@media screen and (max-width: 926px) {
  .games-showcase-header img, .games-showcase-footer img {
    object-position: 50%;
    height: 105px !important;
    width: 100% !important;
    object-fit: none !important;
  }
}

aside.games-showcase-sidebar div.sidebar-showcase {
  padding: 0 0 var(--layout-padding-y) 0;
}


/**** #footer (copyright info) ****/
#footer {
  background: var(--theme-background);
  padding: 16px 24px;
  border-radius: 0 0 var(--theme-box-border-radius) var(--theme-box-border-radius);
  position: relative;
  /* grid */
  display: grid;
  grid-template-columns: [l] 1fr 0fr [r];
  grid-template-rows: [t] auto auto [b];
  z-index: 0; /* covered by content */
}

.mw-footer li {
  color: var(--theme-text-color);
}

#footer a {
  color: var(--theme-link-color);
}

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

#footer-info {
  font-size: 12px;
  display: contents;
}

#footer ul li {
  font-size: inherit;
  line-height: 1.5;
  padding: 0;
}

#footer-icons {
  grid-column: span 1/r;
  grid-row: t/b;
  place-self: end;
}

#footer #footer-info-lastmod {
  grid-column: l/span 1;
  grid-row: t/span 1;
  place-self: start;
  margin-bottom: 1em;
}

#footer #footer-info-copyright {
  grid-column: l/span 1;
  grid-row: span 1/b;
  place-self: end stretch;
  position: relative;
  padding-right: 100px;
}

#footer-info-copyright img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 31px;
  width: auto;
}

#footer-places,
#footer > div {
  display: none;
}

/**** background box for nav+content+#footer ****/
#mw-page-base {
  box-sizing: border-box;
  border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
  border-radius: var(--theme-box-border-radius);
  backdrop-filter: var(--theme-box-back-backdrop-filter);
  box-shadow: var(--theme-box-shadow);
  background: var(--theme-box-back-background);
  z-index: -1;
}

#mw-head, #content, #footer {
  box-sizing: border-box;
  background-clip: padding-box;
  border: var(--theme-box-border-width) solid transparent;
  margin: 0;
}

#mw-head {
  border-bottom-width: 0;
}

#content {
  border-top-width: 0;
  border-bottom-width: 0;
}

#footer {
  border-top-width: 0;
}

/****** responsive Layout ******/
@media screen and (max-width: 1800px) {
  :root {
    --layout-sidespace: 0px; /* whitespace width on most left and most right,must with "px" */
  }
} /* screen and (max-width: 1800px) */
@media screen and (max-width: 1365px) {
  :root {
    --layout-logo-scale: 0.75;
  }
  
  /* change layout */
  body {
    grid-template-columns: [body-left] 0 [aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right] 0 [body-right];
    grid-template-rows: [body-start] var(--layout-topbar-height) [page-start logo-start] var(--layout-logo-box-height) [logo-end aside-start] auto [aside-end nav-start] 0fr [nav-end content-start] auto [content-end footer-start] 0fr [footer-end] 1fr [page-end] 0fr [body-end];
  }
  
  /* re-style navbar */
  #mw-panel {
    display: flex;
    align-items: flex-end;
    padding: 0 var(--layout-box-gap);
    box-sizing: border-box;
    border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
    border-radius: var(--theme-box-border-radius);
    backdrop-filter: var(--theme-box-back-backdrop-filter);
    box-shadow: var(--theme-box-shadow);
    background: var(--theme-box-background), var(--theme-box-back-background);
    /* Make #p-logo be positioned relative to #mw-panel. By this way, we can safely apply filter/backdrop-filter on #mw-panel */
    position: relative;
    z-index: 1;
  }
  #mw-panel .portal {
    background: none;
    box-shadow: none;
    border: 0;
    margin: 0;
    padding: 0;
    position: relative;
  }
  #mw-panel .portal .vector-menu-heading {
    padding: 9px 12px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  #mw-panel .portal .vector-menu-heading::after {
    border-width: 6px 5px 0; /* change arrow direction */
    margin-left: 4px;
  }
  #mw-panel .portal.collapsed .vector-menu-heading::after {
    transform: none;
  }
  #mw-panel .portal .body {
    display: none !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
    position: absolute;
    left: 0;
    top: 100%;
    width: max-content;
    min-width: 8em;
    border: var(--theme-dropdown-border);
    border-radius: var(--theme-box-border-radius);
    background: var(--theme-dropdown-background);
    backdrop-filter: var(--theme-box-back-backdrop-filter);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  #mw-panel .portal .body li a {
    padding: 6px 12px;
  }
  #mw-panel .portal.expanded .vector-menu-heading, #mw-panel .portal:hover .vector-menu-heading {
    background: var(--theme-highlight-background);
    border-radius: 0;
  }
  #mw-panel .portal.expanded .vector-menu-heading::after, #mw-panel .portal:hover .vector-menu-heading::after {
    transform: scaleY(-1);
  }
  #mw-panel .portal.expanded .body, #mw-panel .portal:hover .body {
    display: block !important;
  }
  
  /* logo: smaller, and position relative to #mw-panel */
  #p-logo {
    background-size: calc(var(--theme-site-logo-width) * var(--layout-logo-scale)) auto;
    width: auto;
    top: calc(0px - var(--layout-logo-box-height));
  }
  #p-logo .mw-wiki-logo {
    width: calc(var(--theme-site-logo-width) * var(--layout-logo-scale));
    height: calc(var(--theme-site-logo-height) * var(--layout-logo-scale));
  }
  
  /* search: move to sidebar nav box ("main nav bar") */
  #mw-head #p-search {
    box-sizing: border-box;
    border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
    border-radius: var(--theme-box-border-radius);
    backdrop-filter: var(--theme-box-back-backdrop-filter);
    box-shadow: var(--theme-box-shadow);
    background: var(--theme-box-background), var(--theme-box-back-background);
    padding: var(--layout-padding);
    border-bottom: 0;
    position: absolute;
    right: 0;
    top: -110px; /* offset */
    z-index: 2;
  }
  
  .vector-search-box-inner {
    width: 50vw;
    max-width: 25em;
  }
  
  #mw-head #right-navigation #p-cactions {
    margin-right: 0;
  }
  
  /* "more" menu in #right-navigation */
  #mw-head #right-navigation .vector-menu-dropdown {
    margin-right: 0;
  }
  #mw-head #right-navigation .vector-menu-dropdown::after {
    display: none;
  }
  #mw-head #right-navigation .vector-menu-dropdown .vector-menu-content {
    left: auto;
    right: 0;
  }
  
} /* screen and (max-width: 1365px) */
@media screen and (max-width: 900px) {
  :root {
    --layout-logo-scale: 0.5;
    --layout-logo-box-height: calc( var(--theme-site-logo-height) * var(--layout-logo-scale) + 20px);
    --layout-box-gap: 6px;
  }
  
  /* change layout */
  body {
    grid-template-columns: [body-left aside-left nav-left content-left footer-left] minmax(0, 1fr) [content-right aside-right nav-right footer-right body-right];
  }
  
  #mw-page-base,
  #mw-panel,
  #mw-head, #content, #footer {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  
  #p-logo {
    left: 10px;
  }
  
  #mw-head #p-search {
    top: -98px; /* offset */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .vector-search-box-inner {
    width: 50vw;
    max-width: 20em;
  }
  
  .mw-indicators {
    z-index: auto;
  }
  
  /* re-style navbar */
  #mw-panel {
    flex-wrap: wrap;
  }
  #mw-panel .portal {
    position: unset;
    flex: 0 0 auto;
  }
  #mw-panel .portal .vector-menu-heading {
    justify-content: center;
    white-space: nowrap;
  }
  #mw-panel .portal .vector-menu-heading::after {
    display: none;
  }
  #mw-panel .portal .body {
    left: 0;
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
  }
  #mw-panel .portal .body ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--layout-sidebar-width));
    justify-content: center;
  }
  #mw-panel .portal .body li a {
    display: block;
  }
  
  
} /* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
  :root {
    --layout-logo-scale: 0.75;
  }
  
  #p-logo {
    width: 100%;
    left: 0;
  }
  
  #mw-panel {
    box-shadow: var(--theme-box-shadow2);
    border-bottom: 0;
    display: block;
    height: 36px;
  }
  #mw-panel .portal {
    display: none;
    box-shadow: none;
    background: var(--theme-background);
    backdrop-filter: var(--theme-dropdown-backdrop-filter);
    border-left: var(--theme-dropdown-border);
    border-right: var(--theme-dropdown-border);
    margin: 0;
    border-radius: 0;
  }
  #mw-panel .portal .vector-menu-heading {
    padding: 0 12px 4px;
    border: 0;
    display: block;
    background: none;
    font-weight: bold;
  }
  #mw-panel .portal .vector-menu-heading::after {
    display: none;
  }
  #mw-panel .portal:hover .vector-menu-heading {
    background: none;
    color: var(--theme-heading-color);
  }
  #mw-panel .portal .body {
    display: block !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
    position: unset;
    border: 0;
    background: none;
    backdrop-filter: none;
    padding: 4px 12px;
  }
  #mw-panel .portal .body ul {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: unset;
  }
  #mw-panel .portal .body li a {
    padding: 4px 8px;
    white-space: nowrap;
  }
  #mw-panel .portal:last-child {
    padding-bottom: 12px;
    border-bottom: var(--theme-dropdown-border);
    border-radius: 0 0 var(--layout-box-border-radius) var(--layout-box-border-radius);
  }
  #mw-panel .menu-toggle {
    --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-category-2' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 4h6v6h-6z'%3E%3C/path%3E%3Cpath d='M4 14h6v6h-6z'%3E%3C/path%3E%3Cpath d='M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M7 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3C/svg%3E") no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: var(--theme-icon-color);
    cursor: pointer;
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 6px 12px;
  }
  #mw-panel .menu-toggle.expanded ~ .portal {
    display: block;
  }
  #mw-panel .menu-toggle + .portal {
    padding-top: 12px;
    border-top: var(--theme-dropdown-border);
  }
  
  #mw-head #p-search {
    box-shadow: none;
    padding: 0;
    top: -37px; /* offset */
    left: auto;
    right: 12px;
    width: auto;
    z-index: 3;
  }
  
  .vector-search-box-inner {
    width: 100vw;
    max-width: 20em;
  }
  
  #content {
    --layout-padding-x: 12px;
    --layout-padding-y: 12px;
  }
  
  /* icon navbar tabs */
  #mw-head {
    top: unset; /* reset */
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg fill='none' height='24' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none' stroke='none'/%3E%3Cpath d='M4 4l4 16l4 -14l4 14l4 -16'/%3E%3C/svg%3E");
    --icon-size: 1.5em;
  }
  #mw-head .vector-menu-tabs .mw-list-item a,
  #mw-head .vector-menu-dropdown .vector-menu-heading {
    --theme-link-color-hover: var(--theme-icon-color-hover);
    width: 1.5em; /* same as line height */
    height: 1.5em;
    box-sizing: content-box;
    padding: var(--tab-padding-y);
    color: transparent; /**<< for watch/unwatch, the text of <a> will be plain 'watch'/'unwatch' without <span> after clicking. **/
  }
  #mw-head .vector-menu-tabs .mw-list-item a::before,
  #mw-head .vector-menu-dropdown .vector-menu-heading::before {
    content: "";
    display: block;
    position: unset;
    background-image: none;
    width: var(--icon-size);
    height: var(--icon-size);
    margin: calc((1.5em - var(--icon-size)) / 2);
    --mask: var(--icon) no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center center;
    mask-position: center center;
    background-color: var(--theme-link-color);
  }
  #mw-head .vector-menu-tabs .mw-list-item a:hover::before,
  #mw-head .vector-menu-dropdown .vector-menu-heading:hover::before {
    background-color: var(--theme-link-color-hover);
  }
  #mw-head .vector-menu-tabs .mw-list-item a span,
  #mw-head .vector-menu-dropdown .vector-menu-heading span {
    display: none;
  }
  #mw-head .vector-menu-dropdown .vector-menu-heading::after {
    display: none;
  }
  
  #ca-edit {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M29.12,6.05,26,2.88a3,3,0,0,0-4.24,0L6.29,18.29a3.06,3.06,0,0,0-.72,1.18L2.08,29.92l10.46-3.49a3.15,3.15,0,0,0,1.17-.72L29.12,10.29a3,3,0,0,0,0-4.24Zm-21,13.28,8.75-8.74,1.58,1.58L9.67,20.92ZM18.24,9.17l1.59-1.58,4.58,4.58-1.58,1.59ZM7.1,21.19l3.72,3.71L5.25,26.75Zm5.57,2.73-1.59-1.59,8.75-8.74,1.58,1.58Zm15-15-1.88,1.88L21.24,6.17l1.88-1.88A1,1,0,0,1,23.83,4a1,1,0,0,1,.71.29l3.17,3.18a1,1,0,0,1,.29.7A1,1,0,0,1,27.71,8.88Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #ca-view,
  #ca-view-foreign {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M30.89,15.54A17,17,0,0,0,16,6,17,17,0,0,0,1.11,15.54L.87,16l.24.46A17,17,0,0,0,16,26a17,17,0,0,0,14.89-9.54l.24-.46ZM24,16a8,8,0,1,1-8-8A8,8,0,0,1,24,16ZM3.14,16a16.47,16.47,0,0,1,4.14-4.89,10,10,0,0,0,0,9.78A16.47,16.47,0,0,1,3.14,16Zm21.58,4.89a10,10,0,0,0,0-9.78A16.47,16.47,0,0,1,28.86,16,16.47,16.47,0,0,1,24.72,20.89Z'/%3E%3Cpath d='M16,20a4,4,0,1,0-4-4A4,4,0,0,0,16,20Zm0-6a2,2,0,1,1-2,2A2,2,0,0,1,16,14Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #left-navigation li[id^=ca-nstab-] {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='12 15 11 15 11 17 12 17 20 17 21 17 21 15 20 15 12 15'/%3E%3Cpolygon points='12 19 11 19 11 21 12 21 15 21 16 21 16 19 15 19 12 19'/%3E%3Cpath d='M20.41,3H5V26a3,3,0,0,0,3,3H24a3,3,0,0,0,3-3V9.59ZM20,5.41,24.59,10H21a1,1,0,0,1-1-1ZM24,27H8a1,1,0,0,1-1-1V5H18V9a3,3,0,0,0,3,3h4V26A1,1,0,0,1,24,27Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #ca-history {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z'/%3E%3Cpath d='M17,7H15v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #ca-talk {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M26,12H24V6a3,3,0,0,0-3-3H6A3,3,0,0,0,3,6V24.41l5.12-5.12A1.05,1.05,0,0,1,8.83,19H12v3a3,3,0,0,0,3,3h8.17a1.05,1.05,0,0,1,.71.29L29,30.41V15A3,3,0,0,0,26,12ZM12,15v2H8.83a3,3,0,0,0-2.12.88L5,19.59V6A1,1,0,0,1,6,5H21a1,1,0,0,1,1,1v6H15A3,3,0,0,0,12,15ZM27,25.59l-1.71-1.71A3,3,0,0,0,23.17,23H15a1,1,0,0,1-1-1V15a1,1,0,0,1,1-1H26a1,1,0,0,1,1,1Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #t-contributions {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg enable-background='new 0 0 32 32' id='Stock_cut' version='1.1' viewBox='0 0 32 32' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdesc/%3E%3Cpath d='M27,12V5h-7v0 c0-2.209-1.791-4-4-4h0c-2.209,0-4,1.791-4,4v0H1v7h0c2.209,0,4,1.791,4,4v0c0,2.209-1.791,4-4,4h0v11h11v0c0-2.209,1.791-4,4-4h0 c2.209,0,4,1.791,4,4v0h7V20h0c2.209,0,4-1.791,4-4v0C31,13.791,29.209,12,27,12L27,12z' fill='none' stroke='%23000000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
  }
  
  #ca-addsection {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpolygon points='29 15 17 15 17 3 15 3 15 15 3 15 3 17 15 17 15 28 17 28 17 17 29 17 29 15'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #ca-viewsource {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath class='heroicon-ui' d='M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z'/%3E%3C/svg%3E");
  }
  
  #p-variants {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm8,13a24.28,24.28,0,0,0-.41-3.62c2.19.91,3.75,2.19,4.25,3.62Zm-2,0H17V10a20.9,20.9,0,0,1,4.34.63A20.26,20.26,0,0,1,22,15ZM17,8V4.19c1.43.5,2.71,2.06,3.62,4.25A24.28,24.28,0,0,0,17,8ZM15,4.19V8a24.28,24.28,0,0,0-3.62.41C12.29,6.25,13.57,4.69,15,4.19ZM15,10v5H10a20.26,20.26,0,0,1,.63-4.34A20.9,20.9,0,0,1,15,10ZM8,15H4.19c.5-1.43,2.06-2.71,4.25-3.62A24.28,24.28,0,0,0,8,15Zm0,2a24.28,24.28,0,0,0,.41,3.62C6.25,19.71,4.69,18.43,4.19,17Zm2,0h5v5a20.9,20.9,0,0,1-4.34-.63A20.26,20.26,0,0,1,10,17Zm5,7v3.84c-1.43-.5-2.71-2.06-3.62-4.25A24.28,24.28,0,0,0,15,24Zm2,3.84V24a24.28,24.28,0,0,0,3.62-.41C19.71,25.75,18.43,27.31,17,27.81ZM17,22V17h5a20.26,20.26,0,0,1-.63,4.34A20.9,20.9,0,0,1,17,22Zm7-5h3.84c-.5,1.43-2.06,2.71-4.25,3.62A24.28,24.28,0,0,0,24,17Zm2.87-6.12A15.11,15.11,0,0,0,23,9a15.11,15.11,0,0,0-1.85-3.87A12.12,12.12,0,0,1,26.84,10.88Zm-16-5.72A15.11,15.11,0,0,0,9,9a15.11,15.11,0,0,0-3.87,1.85A12.12,12.12,0,0,1,10.88,5.16Zm-5.72,16A15.11,15.11,0,0,0,9,23a15.11,15.11,0,0,0,1.85,3.87A12.12,12.12,0,0,1,5.16,21.12Zm16,5.72A15.11,15.11,0,0,0,23,23a15.11,15.11,0,0,0,3.87-1.85A12.12,12.12,0,0,1,21.12,26.84Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  
  #p-cactions {
    --icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg id='Outlined' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg id='Fill'%3E%3Cpath d='M16,13a3,3,0,1,0,3,3A3,3,0,0,0,16,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,16,17Z'/%3E%3Cpath d='M24,13a3,3,0,1,0,3,3A3,3,0,0,0,24,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,24,17Z'/%3E%3Cpath d='M8,13a3,3,0,1,0,3,3A3,3,0,0,0,8,13Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,8,17Z'/%3E%3C/g%3E%3C/svg%3E");
  }
  
} /* screen and (max-width:720px) */
@media screen and (max-width: 600px) {
  :root {
    --layout-logo-scale: 0.5;
  }
  
  .vector-search-box-inner {
    width: 50vw;
    max-width: 15em;
  }
  
  /* footer */
  #footer #footer-icons {
    float: none;
  }
  #footer #footer-info-copyright {
    grid-column: l/span 2;
    padding-right: 0;
    padding-bottom: 40px;
  }
  #footer #footer-info-copyright img {
    right: auto;
    left: 0;
  }
  
} /* screen and (max-width:600px) */
@media screen and (max-width: 450px) {
  
  
} /* screen and (max-width:450px) */

/***** Notification area *****/
.mw-notification-area-overlay {
  position: fixed;
  z-index: 9999;
}

.mw-notification-area {
  font-size: 14px;
  line-height: 1.7142857143;
}

.mw-notification {
  color: var(--theme-text-color);
  box-sizing: border-box;
  border: var(--theme-box-border-width) var(--theme-box-border-style) var(--theme-box-border-color);
  border-radius: var(--theme-box-border-radius);
  backdrop-filter: var(--theme-box-back-backdrop-filter);
  box-shadow: var(--theme-box-shadow);
  background: var(--theme-box-background), var(--theme-box-back-background);
  transform: none;
}

/* Notification boxes on the right, e.g. after patrolling an edit */
.mw-notification.mw-notification-type-error {
  color: var(--theme-notice-red-text-color);
  border-color: var(--theme-notice-red-text-color);
}

.mw-notification.mw-notification-type-warn {
  color: var(--theme-notice-orange-text-color);
  border-color: var(--theme-notice-orange-text-color);
}

/****** postedit notification ******/
.postedit-container {
  top: 4em;
}


/***********************************************************************************************************
 * Over-width table floating-scroll
 ***********************************************************************************************************/
/*
css for floating-scroll v3.2.0
https://amphiluke.github.io/floating-scroll/
(c) 2022 Amphiluke
*/
.fl-scrolls {
  overflow: auto;
  position: fixed;
}

.fl-scrolls div {
  overflow: hidden;
  pointer-events: none;
}

.fl-scrolls div:before {
  content: " ";
}

.fl-scrolls, .fl-scrolls div {
  font-size: 1px;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.fl-scrolls-hidden div:before {
  content: "  ";
}

.fl-scrolls-viewport {
  position: relative;
}

.fl-scrolls-body {
  overflow: auto;
}

.fl-scrolls-viewport .fl-scrolls {
  position: absolute;
}

.fl-scrolls-hoverable .fl-scrolls {
  opacity: 0;
  transition: opacity 0.5s 0.3s;
}

.fl-scrolls-hoverable:hover .fl-scrolls {
  opacity: 1;
}

.fl-scrolls:not([data-orientation]), .fl-scrolls[data-orientation=horizontal] {
  bottom: 0;
  min-height: 17px;
}

.fl-scrolls:not([data-orientation]) div, .fl-scrolls[data-orientation=horizontal] div {
  height: 1px;
}

.fl-scrolls-hidden.fl-scrolls:not([data-orientation]), .fl-scrolls-hidden.fl-scrolls[data-orientation=horizontal] {
  bottom: 9999px;
}

.fl-scrolls-viewport .fl-scrolls:not([data-orientation]), .fl-scrolls-viewport .fl-scrolls[data-orientation=horizontal] {
  left: 0;
}

.fl-scrolls[data-orientation=vertical] {
  right: 0;
  min-width: 17px;
}

.fl-scrolls[data-orientation=vertical] div {
  width: 1px;
}

.fl-scrolls-hidden.fl-scrolls[data-orientation=vertical] {
  right: 9999px;
}

.fl-scrolls-viewport .fl-scrolls[data-orientation=vertical] {
  top: 0;
}

/*css for wide table */
.table-wide {
  clear: both;
  position: relative;
}

.mw-parser-output > .table-width {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.table-wide-inner {
  overflow-x: auto;
}

.table-wide-inner > table {
  margin: 0 !important;
}

.table-wide:before {
  box-shadow: inset -15px 0 20px -15px var(--theme-wide-table-shadow-color);
  content: "";
  display: block;
  width: 20px;
  height: 100%;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/***********************************************************************************************************
 * Styles for "real" wiki page content. (in div.mw-parser-output)
 ***********************************************************************************************************/
/* remove external link icon. */
.mw-parser-output a.external,
.link-https {
  padding-right: 0;
  background: none;
}

.mw-parser-output > :first-child {
  margin-top: 0;
}

/** headings **/
.mw-body h1, .mw-body-content h1, .mw-body-content h2,
.vector-body h3, .vector-body h4,
.vector-body h5, .vector-body h6 {
  margin: 0;
  color: var(--theme-heading-color);
  font-family: inherit;
  font-weight: normal;
  line-height: 1.25;
}

.mw-body h1, .mw-body-content h1 {
  font-size: 32px;
  line-height: 40px;
}

.mw-body-content h2 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 18px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--theme-heading-rule-color-h2);
  padding-bottom: 3px;
}

.vector-body h3 {
  font-size: 20px;
  line-height: 26px;
  margin-top: 14px;
  margin-bottom: 7px;
}

.vector-body h4 {
  font-size: 16px;
  line-height: 22px;
  margin-top: 14px;
  margin-bottom: 7px;
}

.vector-body h5 {
  line-height: 22px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 7px;
}

.vector-body h6 {
  line-height: 20px;
  font-size: 12px;
  font-weight: bold;
  margin-top: 7px;
  margin-bottom: 7px;
}

/* reduce heading font size: */
@media (max-width: 900px) {
  .mw-body h1, .mw-body-content h1 {
    font-size: 24px;
    line-height: 32px;
  }
  .mw-body-content h2 {
    font-size: 20px;
    line-height: 28px;
  }
  .vector-body h3 {
    font-size: 18px;
    line-height: 24px;
  }
}
/* section edit link */
.mw-editsection {
  white-space: nowrap;
  color: var(--theme-text-color-note);
}

/** ToC **/
/* base common style */
.toc {
  background: none;
  border-radius: 4px;
  border: 1px solid var(--theme-border-color);
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 0;
  font-size: 1em;
  min-width: 12em;
}
.toc a {
  color: var(--theme-text-color);
}
.toc .tocnumber {
  color: var(--theme-text-color-note);
}
.toc .tocnumber:after {
  content: ".";
}

/* header */
.toc {
  /* arrow */
  /* do not change ToC box width when toggle show/hide. */
}
.toc .toctitle {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 8px;
}
.toc .toctitle h2 {
  line-height: 20px;
  font-weight: normal;
  margin: 0;
  border: 0;
  display: flex;
  align-items: center;
  padding: 0 0.5em;
}
.toc .toctitle h2::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--theme-text-color);
  margin: 0 6px 0 0;
}
.toc .toctogglelabel {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding-right: 1em;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.toc .toctogglespan::before,
.toc .toctogglespan::after,
.toc .toctogglelabel::after {
  display: none;
}
.toc .toctogglelabel::before {
  content: "";
  display: inline-block;
  background: none;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: var(--theme-icon-color) transparent;
  border-width: 0 5px 6px 5px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.toc .toctogglelabel:hover::before {
  border-color: var(--theme-icon-color-hover) transparent;
}
.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
  border-width: 6px 5px 0 5px;
}
.toc .toctogglecheckbox:checked ~ ul {
  overflow: hidden;
  display: block;
  height: 0;
  border: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* content list */
.mw-content-ltr .toc ul ul,
.mw-content-rtl .toc ul ul {
  margin: 0 0 0 1em;
}

.toc > ul {
  padding: 0.5em;
  border-top: 1px solid var(--theme-border-color);
  margin: 0;
}
.toc > ul a {
  display: block;
  padding: 2px 0.5em;
  border-radius: 4px;
  transition: background 0.1s;
}
.toc > ul a:hover {
  text-decoration: none;
  background: var(--theme-highlight-background);
}
.toc > ul li {
  margin: 0;
}

/********* Tables *********/
table {
  /* fix 100% width table with border */
  box-sizing: border-box;
}

table.lined,
table.bordered,
table.cellborder {
  border-collapse: collapse;
  border-style: solid;
  border-color: var(--theme-border-color);
}

table.lined th,
table.lined td {
  border-width: 0 0 1px 0;
}

table tfoot:empty,
table thead:empty {
  display: none;
}

table.lined td.noline, table.lined tr.noline td {
  border-bottom-width: 0;
}

table tr.bottomline td {
  border-bottom-width: 1px;
}

table tr.topline td {
  border-top-width: 1px;
}

table td.bottomline, table.lined tr.noline td.bottomline {
  border-bottom-width: 1px;
}

table td.topline {
  border-top-width: 1px;
}

/* Hack for using "border-collapse" and "border-radius" in the same table display by using one table nested within another */
table.outer {
  white-space: nowrap;
}

table.inner {
  border-collapse: collapse;
  background: inherit;
  width: 100%;
}

table.inner th {
  border: 2px solid var(--theme-border-color);
}

.wikitable,
.wikitable > tr > th,
.wikitable > * > tr > th {
  color: inherit;
  background: none;
}

.wikitable {
  border-color: var(--theme-border-color);
}

table.cargoTable.noMerge tr:nth-child(2n) {
  background: rgba(127, 127, 127, 0.25);
}

table.cargoTable.noMerge tr:nth-child(2n+1) {
  background: none;
}

/***********************************************************************************************************
 * common style for content box
 ***********************************************************************************************************/
.fullwidth, .full-width {
  width: 100%;
}

.nowrap {
  white-space: nowrap;
}

/* ".center" has width=100% rule, we don't want it, so use a different class name. */
.aligncenter,
.align-center {
  text-align: center;
}

.alignleft,
.align-left {
  text-align: left;
}

.alignright,
.align-right {
  text-align: right;
}

/* clear fix for float block */
.clearfix {
  *zoom: 1;
}

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* Thumbnail background color */
html .thumbimage {
  background-color: #4d3a32;
}

/** gallery **/
.thumbinner {
  border-radius: 5px;
}

li.gallerybox div.thumb {
  border-radius: 5px;
}

.gallery * {
  box-sizing: initial;
}

.mw-gallery-traditional .thumb {
  display: flex;
}

.mw-gallery-traditional .thumb a {
  display: block;
}

/***********************************************************************************************************
 * css for specific content pages
 ***********************************************************************************************************/
/*********** Main page  START ****************/
#mainpage-wrap .footer {
  text-align: right;
  font-size: 12px;
  line-height: 22px;
}
#mainpage-wrap .content-wrap {
  display: flex;
  gap: 1em;
  align-items: stretch;
  margin-bottom: 1em;
}
@media (max-width: 1200px) {
  #mainpage-wrap .content-wrap {
    flex-direction: column;
  }
}
#mainpage-wrap .content-wrap .l {
  flex: 4 4 800px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#mainpage-wrap .content-wrap .r {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/*********** Main page  END ****************/


/***********************************************************************************************************
 * css for pages under MediaWiki or Special NS, or system widgets on template/module pages and so on
 ***********************************************************************************************************/
/********* ooui *********/
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  background: none;
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input {
  color: var(--theme-text-color);
}

.oo-ui-tabOptionWidget {
  color: var(--theme-text-color);
}

.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  color: var(--theme-text-color);
  background: none;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  color: var(--theme-text-color-note);
}

.oo-ui-tabSelectWidget-framed {
  background: none;
}

/********* for File: NS pages *********/
#filetoc {
  background: none;
}

/******* Search result page. (Special:Search)  ******/
.mw-search-form-wrapper {
  font-size: 1em;
}

.mw-search-form-wrapper #mw-search-top-table {
  display: flex;
  align-items: center;
}

.mw-search-form-wrapper #mw-search-top-table > div {
  float: none;
}

.mw-search-form-wrapper .results-info {
  color: var(--theme-text-color-note);
  font-size: 1em;
  padding: 0 0 0 3em;
  white-space: nowrap;
  text-align: right;
  flex: 1 1 auto;
}

.mw-search-form-wrapper .mw-search-visualclear {
  display: none;
}

.mw-search-form-wrapper .mw-search-profile-tabs {
  border: 0;
  margin: 1em 0;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types + div {
  display: none;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types {
  width: 100%;
  float: none;
  padding: 0;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

.mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li.current {
  background: var(--theme-highlight-background);
  border-radius: 4px;
  overflow: hidden;
}

.mw-search-form-wrapper #mw-searchoptions {
  padding: 1em;
  background: var(--theme-box-background);
  border: 1px solid var(--theme-border-color-accent);
  border-radius: 4px;
}

/* responsive tweak */
@media screen and (max-width: 600px) {
  .mw-search-form-wrapper #mw-search-top-table {
    display: block;
  }
  .mw-search-form-wrapper .results-info {
    margin-top: 1em;
  }
  .mw-search-form-wrapper .mw-search-profile-tabs .search-types ul li {
    font-size: 12px;
  }
}


.theme-dark {
  /***********************************************************************************************************
   * dark theme tweak
   ***********************************************************************************************************/
}
.theme-dark #filetoc, .theme-dark code,
.theme-dark .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.theme-dark .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.theme-dark .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.theme-dark .mw-search-profile-tabs, .theme-dark #mw-searchoptions,
.theme-dark .mw-datatable td {
  background: none;
}
.theme-dark .oo-ui-textInputWidget .oo-ui-inputWidget-input {
  background: #1f3030;
  color: var(--theme-text-color);
}
.theme-dark #mw-allmessagestable tbody:hover td {
  background: var(--theme-highlight-background);
}
.theme-dark li.gallerybox div.thumb {
  background: var(--theme-box-background);
}
.theme-dark ul {
  list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="13"><circle cx="2.5" cy="9" r="2.5" fill="#fff"/></svg>');
}
.theme-dark .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  color: var(--theme-text-color-note);
}
.theme-dark .oo-ui-tabSelectWidget-framed,
.theme-dark .mw-prefs-buttons {
  background: none;
}
.theme-dark .oo-ui-tabOptionWidget {
  color: var(--theme-text-color);
}
.theme-dark .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  color: var(--theme-text-color);
  background: none;
}
.theme-dark table.diff .diff-context {
  background: rgba(248, 249, 250, 0.15);
  color: var(--theme-text-color);
}
.theme-dark table.diff .diff-addedline .diffchange {
  background: rgba(74, 166, 255, 0.6);
}
.theme-dark table.diff .diff-deletedline .diffchange {
  background: rgba(255, 198, 63, 0.6);
}
.theme-dark :root {
  --pi-background: rgba(255,255,255, 0.1);
}
.theme-dark div.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
  background: #231c3b;
}
.theme-dark .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-iconElement-icon {
  filter: invert(1);
}
.theme-dark .mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagItemWidget .oo-ui-iconElement-icon {
  filter: none;
}
.theme-dark .mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
  color: #ddd;
}
.theme-dark div.thumbinner {
  background: none;
}
.theme-dark #pagehistory li.selected {
  background: rgba(40, 40, 40, 0.6);
  color: var(--theme-text-color);
}
.theme-dark #mw-indicator-mw-helplink a {
  background: none;
  position: relative;
}
.theme-dark #mw-indicator-mw-helplink a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background-image: url(/resources/src/mediawiki.helplink/images/helpNotice.svg?46d34);
  filter: invert(1);
}
.theme-dark .mw-plusminus-pos {
  color: #7cf56e;
}
.theme-dark .mw-plusminus-neg {
  color: #ff9a9b;
}
.theme-dark .autocomment, .theme-dark .autocomment a, .theme-dark .autocomment a:visited {
  color: var(--theme-text-color-note);
}
.theme-dark .mw-message-box-warning {
  background-color: rgba(54, 44, 10, 0.5);
  border-color: #fc3;
  color: #fff;
}
.theme-dark fieldset {
  border-color: #ccc;
}
.theme-dark .mw-highlight pre, .theme-dark .mw-highlight code, .theme-dark .mw-highlight .mw-code {
  color: #ccc;
}
.theme-dark .mw-highlight .nv {
  color: #01C2EC;
}

/* from https://animanga.fandom.com/wiki/MediaWiki:Anime-Common.css */
/** This is an expanded static version of the old Animepedia's shared common css **/
/*<big>'''[[MediaWiki:Anime-Box.css]]'''</big>*/
/*<pre>*/
/* Universal box styles. -Dantman */
.box.headnote {
  display: block;
  font-style: italic;
  font-size: 12px;
  margin: -10px 5px 10px 25px;
  padding: 0px;
  border-collapse: collapse;
}

.box.footnote {
  display: block;
  font-style: italic;
  font-size: 12px;
  margin: 10px 5px -10px 25px;
  padding: 0px;
  border-collapse: collapse;
}

.box.headbox {
  clear: both;
  margin: -10px auto 10px auto;
  border-collapse: collapse;
}

.box.fillnotice {
  width: 100%;
  height: 100%;
  clear: both;
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
}

.box.message {
  width: 90%;
  margin: 0px auto 10px auto;
  border-collapse: collapse;
}

.box.block {
  clear: both;
}

.box.block,
.box.block-noclear {
  margin: 0.5em auto;
  border-collapse: collapse;
}

.box.groupblock {
  width: 90%;
  clear: both;
  margin: 15px auto 5px auto;
  padding: 5px;
}

.box.groupblock td {
  text-align: center;
}

.box.descriptionbox {
  width: 100%;
  clear: both;
  margin: 0.5em auto;
  border-collapse: collapse;
}

.box.descriptionbox .mainheader {
  font-size: 125%;
  text-align: center;
}

.box.descriptionbox th {
  text-align: left;
  padding: 5px;
}

.box.descriptionbox td {
  text-align: left;
  padding: 2px 5px;
}

.box.nav {
  margin: 5px;
  padding: 1px;
  border-spacing: 1px;
}

.box.trinav {
  width: 100%;
  margin: 5px;
  padding: 0px;
  border-spacing: 0px;
}

.box.trinav > tbody > tr > td,
.box.trinav > tbody > tr > th {
  width: 33%;
  padding: 5px;
}

.box.table {
  margin: 1em 1em 1em 0;
  border-collapse: collapse;
}

.box.table > tbody > tr > td, .box.table > tbody > tr > th {
  padding: 0.2em;
}

.box.table > tbody > tr > th.mainheader {
  text-align: center;
  font-size: 110%;
}

.box.navtable {
  margin: 1em 1em 1em 0;
  border-collapse: separate;
}

.box.navtable > tbody > tr > td, .box.table > tbody > tr > th {
  padding: 0.2em;
}

.box.titleicons {
  display: table;
  position: absolute;
  top: 0em;
  right: 0.5em;
  float: right;
  padding: 0.2em 0em 0.09em 0em;
  font-size: 188%;
  white-space: nowrap;
  border-collapse: collapse;
}

/*Infobox*/
.box.info,
.box.infobox {
  margin: 0px 5px;
  padding: 0px;
  width: 300px;
  border-spacing: 0px;
  border-collapse: collapse;
  font-size: 85%;
}

.box.infotable {
  margin: 0px;
  padding: 0px;
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
  font-size: 85%;
}

.box.infotable td {
  vertical-align: top;
}

.box.info.float-left-clear,
.box.infobox.float-left-clear {
  margin: 0px 5px 0px 0px;
}

.box.info.float-right-clear,
.box.infobox.float-right-clear {
  margin: 0px 0px 0px 5px;
}

.box.info caption,
.box.infobox caption {
  font-size: larger;
  margin-left: inherit;
}

.box.info td,
.box.infobox td,
.box.infotable .sub-infotable td {
  width: 100%;
  vertical-align: top;
}

.box.info th,
.box.infobox th,
.box.infotable .sub-infotable th {
  width: auto;
  min-width: 35%;
  max-width: 50%;
  text-align: left;
  font-size: 90%;
  vertical-align: top;
  padding: 2px;
}

.box.infotable .sub-infotable th {
  min-width: 20%;
  max-width: 50%;
}

.box.info .mainheader,
.box.infobox .mainheader,
.box.infotable .mainheader {
  text-align: center;
  font-weight: bold;
  font-size: 100%;
}

.box.info .lightheader,
.box.infobox .lightheader {
  font-weight: normal;
}

/*.title { display: block; } remove by request*/
.title.english {
  font-size: 100%;
  font-weight: bold;
}

.title.kanji {
  font-size: 95%;
  font-style: italic;
}

.title.romaji, .title.romanji {
  font-style: italic;
  font-size: 95%;
}

.title.romaji:before, .title.romanji:before {
  content: "(";
}

.title.romaji:after, .title.romanji:after {
  content: ")";
}

.box.infotable .maintitle,
.box.infotable .subtitle {
  display: block;
  font-size: 1.75em;
  line-height: 1.25em;
}

.box.infotable .maintitle {
  font-size: 2em;
  line-height: 1em;
}

.box.infotable .ref {
  font-weight: normal;
  float: right;
  margin-left: -100%;
}

.box.info .imagecell,
.box.infobox .imagecell {
  text-align: center;
}

.box.infotable .imagecell {
  width: auto;
}

.box.infotable .infocell {
  width: 100%;
}

.box.info .imagecell,
.box.info .imagecell a,
.box.info .imagecell p,
.box.info .imagecell img,
.box.info .clearcell,
.box.info p,
.box.infobox .imagecell,
.box.infobox .imagecell a,
.box.infobox .imagecell p,
.box.infobox .imagecell img,
.box.infobox .clearcell,
.box.infobox p,
.box.infotable .imagecell,
.box.infotable .imagecell a,
.box.infotable .imagecell p,
.box.infotable .imagecell img,
.box.infotable .clearcell,
.box.infotable p {
  margin: 0px;
  padding: 0px;
}

.box.info table,
.box.infobox table,
.box.infotable table {
  width: 100%;
  margin: 0px;
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
}

.box.info .imagecell .thumb,
.box.infobox .imagecell .thumb,
.box.infotable .imagecell .thumb {
  border: 0px !important;
  margin: 0px !important;
  padding: 0px !important;
  float: none;
  clear: none;
}

.box.info .imagecell .thumb .thumbinner,
.box.infobox .imagecell .thumb .thumbinner,
.box.infotable .imagecell .thumb .thumbinner {
  border: 0px !important;
  margin: 0px !important;
  padding: 0px !important;
}

.box.info.bordered .borderless,
.box.info.bordered .borderless td,
.box.info.bordered .borderless th,
.box.infobox.bordered .borderless,
.box.infobox.bordered .borderless td,
.box.infobox.bordered .borderless th,
.box.infotable.bordered .borderless,
.box.infotable.bordered .borderless td,
.box.infotable.bordered .borderless th {
  border-width: 0px;
}

.box .edit-infobox {
  float: right;
  margin-left: -100%;
  font-weight: normal;
}

/* Layout modification */
.box.padded td,
.box.padded th {
  padding: 5px !important;
}

.nopadding {
  padding: 0px !important;
}

.nomargin,
.nomargin td,
.nomargin th {
  margin: 0px !important;
}

.nomargin > p,
.nopadding > p {
  margin: 0px !important;
}

/* Headerboxes (On inside of nav type boxes) */
.box.bordered.type-help .head-top,
.box.bordered.type-help .head-bottom,
.box.bordered.type-help .head-left,
.box.bordered.type-help .head-right {
  background: #EEEEAA !important;
  border: 0px solid #AAAA33;
}

.box.bordered.nav .head-top {
  border-bottom-width: 1px;
}

.box.bordered.nav .head-botom {
  border-top-width: 1px;
}

.box.bordered.nav .head-left {
  border-right-width: 1px;
}

.box.bordered.nav .head-right {
  border-left-width: 1px;
}

/* Needed base attributes */
.box.bordered {
  border-width: 1px;
  border-style: solid;
}

.box.headbordered > tbody > tr > th {
  border-width: 1px;
  border-style: solid;
}

.box.innerbordered > tbody > tr > td,
.box.innerbordered > tbody > tr > th {
  border-width: 1px;
  border-style: solid;
}

/* Border Mods */
.box.border-heavy {
  border-width: 3px !important;
}

/*</pre>*/
/***** Style Classes *****/
/*
 * Style: ''default''
 * Border color: 000000
 * Head border color: 000000
 * Inner border color: 000000
 * Cell background color: FFFFFF
 * Header background color: FFFFFF
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered {
  border-color: #000000;
}

.box.headbordered > tbody > tr > th {
  border-color: #000000;
}

.box.innerbordered > tbody > tr > td,
.box.innerbordered > tbody > tr > th {
  border-color: #000000;
}

.box.tablecolored {
  background: #FFFFFF;
}

.box.allcolored td {
  background: #FFFFFF;
}

.box.allcolored th {
  background: #FFFFFF;
}

.box.colored td,
.box.colored th {
  background: #FFFFFF;
}

.box.colored > tbody > tr > th {
  background: #FFFFFF;
}

.box.selfcolored > tbody > tr > td {
  background: #FFFFFF;
}

.box.selfcolored > tbody > tr > th {
  background: #FFFFFF;
}

/*
 * Style: basic
 * Border color: E0E0E0
 * Head border color: AAAAAA
 * Inner border color: AAAAAA
 * Cell background color: F2F2F2
 * Header background color: E5E5E5
 * Main header background color: CCCCCC
 * Header link color: N/I
 */
.box.bordered.style-basic {
  border-color: #E0E0E0;
}

.box.headbordered.style-basic > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.innerbordered.style-basic > tbody > tr > td,
.box.innerbordered.style-basic > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.style-basic {
  background: #F2F2F2;
}

.box.allcolored.style-basic td {
  background: #F2F2F2;
}

.box.allcolored.style-basic th {
  background: #E5E5E5;
}

.box.allcolored.style-basic .mainheader {
  background: #CCCCCC;
}

.box.colored.style-basic td,
.box.colored.style-basic th {
  background: #F2F2F2;
}

.box.colored.style-basic > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.style-basic > tbody > tr > .mainheader {
  background: #CCCCCC;
}

.box.selfcolored.style-basic > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.style-basic > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.style-basic > tbody > tr > .mainheader {
  background: #CCCCCC;
}

/* Backwards compatible type-basic tags. */
.box.bordered.type-basic {
  border-color: #E0E0E0;
}

.box.headbordered.type-basic > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.innerbordered.type-basic > tbody > tr > td,
.box.innerbordered.type-basic > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.type-basic {
  background: #F2F2F2;
}

.box.allcolored.type-basic td {
  background: #F2F2F2;
}

.box.allcolored.type-basic th {
  background: #E5E5E5;
}

.box.allcolored.type-basic .mainheader {
  background: #CCCCCC;
}

.box.colored.type-basic td,
.box.colored.type-basic th {
  background: #F2F2F2;
}

.box.colored.type-basic > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.type-basic > tbody > tr > .mainheader {
  background: #CCCCCC;
}

.box.selfcolored.type-basic > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.type-basic > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.type-basic > tbody > tr > .mainheader {
  background: #CCCCCC;
}

/*
 * Style: help
 * Border color: AAAA33
 * Head border color: FFAD80
 * Inner border color: AAAA33
 * Cell background color: FFFFEE
 * Header background color: EEEEAA
 * Main header background color: AAAA33
 * Header link color: N/I
 */
.box.bordered.style-help {
  border-color: #AAAA33;
}

.box.headbordered.style-help > tbody > tr > th {
  border-color: #FFAD80;
}

.box.innerbordered.style-help > tbody > tr > td,
.box.innerbordered.style-help > tbody > tr > th {
  border-color: #AAAA33;
}

.box.tablecolored.style-help {
  background: #FFFFEE;
}

.box.allcolored.style-help td {
  background: #FFFFEE;
}

.box.allcolored.style-help th {
  background: #EEEEAA;
}

.box.allcolored.style-help .mainheader {
  background: #AAAA33;
}

.box.colored.style-help td,
.box.colored.style-help th {
  background: #FFFFEE;
}

.box.colored.style-help > tbody > tr > th {
  background: #EEEEAA;
}

.box.colored.style-help > tbody > tr > .mainheader {
  background: #AAAA33;
}

.box.selfcolored.style-help > tbody > tr > td {
  background: #FFFFEE;
}

.box.selfcolored.style-help > tbody > tr > th {
  background: #EEEEAA;
}

.box.selfcolored.style-help > tbody > tr > .mainheader {
  background: #AAAA33;
}

/* Backwards compatible type-help tags. */
.box.bordered.type-help {
  border-color: #AAAA33;
}

.box.headbordered.type-help > tbody > tr > th {
  border-color: #FFAD80;
}

.box.innerbordered.type-help > tbody > tr > td,
.box.innerbordered.type-help > tbody > tr > th {
  border-color: #AAAA33;
}

.box.tablecolored.type-help {
  background: #FFFFEE;
}

.box.allcolored.type-help td {
  background: #FFFFEE;
}

.box.allcolored.type-help th {
  background: #EEEEAA;
}

.box.allcolored.type-help .mainheader {
  background: #AAAA33;
}

.box.colored.type-help td,
.box.colored.type-help th {
  background: #FFFFEE;
}

.box.colored.type-help > tbody > tr > th {
  background: #EEEEAA;
}

.box.colored.type-help > tbody > tr > .mainheader {
  background: #AAAA33;
}

.box.selfcolored.type-help > tbody > tr > td {
  background: #FFFFEE;
}

.box.selfcolored.type-help > tbody > tr > th {
  background: #EEEEAA;
}

.box.selfcolored.type-help > tbody > tr > .mainheader {
  background: #AAAA33;
}

/*
 * Style: note
 * Border color: FFAD80
 * Head border color:
 * Inner border color: FFAD80
 * Cell background color: FFF7CB
 * Header background color: FFE7AB
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-note {
  border-color: #FFAD80;
}

.box.innerbordered.style-note > tbody > tr > td,
.box.innerbordered.style-note > tbody > tr > th {
  border-color: #FFAD80;
}

.box.tablecolored.style-note {
  background: #FFF7CB;
}

.box.allcolored.style-note td {
  background: #FFF7CB;
}

.box.allcolored.style-note th {
  background: #FFE7AB;
}

.box.colored.style-note td,
.box.colored.style-note th {
  background: #FFF7CB;
}

.box.colored.style-note > tbody > tr > th {
  background: #FFE7AB;
}

.box.selfcolored.style-note > tbody > tr > td {
  background: #FFF7CB;
}

.box.selfcolored.style-note > tbody > tr > th {
  background: #FFE7AB;
}

/* Backwards compatible type-note tags. */
.box.bordered.type-note {
  border-color: #FFAD80;
}

.box.innerbordered.type-note > tbody > tr > td,
.box.innerbordered.type-note > tbody > tr > th {
  border-color: #FFAD80;
}

.box.tablecolored.type-note {
  background: #FFF7CB;
}

.box.allcolored.type-note td {
  background: #FFF7CB;
}

.box.allcolored.type-note th {
  background: #FFE7AB;
}

.box.colored.type-note td,
.box.colored.type-note th {
  background: #FFF7CB;
}

.box.colored.type-note > tbody > tr > th {
  background: #FFE7AB;
}

.box.selfcolored.type-note > tbody > tr > td {
  background: #FFF7CB;
}

.box.selfcolored.type-note > tbody > tr > th {
  background: #FFE7AB;
}

/*
 * Style: related
 * Border color: AAAAAA
 * Head border color:
 * Inner border color:
 * Cell background color: F9F9F9
 * Header background color: BBCCEE
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-related {
  border-color: #AAAAAA;
}

.box.tablecolored.style-related {
  background: #F9F9F9;
}

.box.allcolored.style-related td {
  background: #F9F9F9;
}

.box.allcolored.style-related th {
  background: #BBCCEE;
}

.box.colored.style-related td,
.box.colored.style-related th {
  background: #F9F9F9;
}

.box.colored.style-related > tbody > tr > th {
  background: #BBCCEE;
}

.box.selfcolored.style-related > tbody > tr > td {
  background: #F9F9F9;
}

.box.selfcolored.style-related > tbody > tr > th {
  background: #BBCCEE;
}

/* Backwards compatible type-related tags. */
.box.bordered.type-related {
  border-color: #AAAAAA;
}

.box.tablecolored.type-related {
  background: #F9F9F9;
}

.box.allcolored.type-related td {
  background: #F9F9F9;
}

.box.allcolored.type-related th {
  background: #BBCCEE;
}

.box.colored.type-related td,
.box.colored.type-related th {
  background: #F9F9F9;
}

.box.colored.type-related > tbody > tr > th {
  background: #BBCCEE;
}

.box.selfcolored.type-related > tbody > tr > td {
  background: #F9F9F9;
}

.box.selfcolored.type-related > tbody > tr > th {
  background: #BBCCEE;
}

/*
 * Style: legal
 * Border color: 8888AA
 * Head border color: 8888AA
 * Inner border color: 8888AA
 * Cell background color: F7F8FF
 * Header background color: E7E8FF
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-legal {
  border-color: #8888AA;
}

.box.headbordered.style-legal > tbody > tr > th {
  border-color: #8888AA;
}

.box.innerbordered.style-legal > tbody > tr > td,
.box.innerbordered.style-legal > tbody > tr > th {
  border-color: #8888AA;
}

.box.tablecolored.style-legal {
  background: #F7F8FF;
}

.box.allcolored.style-legal td {
  background: #F7F8FF;
}

.box.allcolored.style-legal th {
  background: #E7E8FF;
}

.box.colored.style-legal td,
.box.colored.style-legal th {
  background: #F7F8FF;
}

.box.colored.style-legal > tbody > tr > th {
  background: #E7E8FF;
}

.box.selfcolored.style-legal > tbody > tr > td {
  background: #F7F8FF;
}

.box.selfcolored.style-legal > tbody > tr > th {
  background: #E7E8FF;
}

/* Backwards compatible type-legal tags. */
.box.bordered.type-legal {
  border-color: #8888AA;
}

.box.headbordered.type-legal > tbody > tr > th {
  border-color: #8888AA;
}

.box.innerbordered.type-legal > tbody > tr > td,
.box.innerbordered.type-legal > tbody > tr > th {
  border-color: #8888AA;
}

.box.tablecolored.type-legal {
  background: #F7F8FF;
}

.box.allcolored.type-legal td {
  background: #F7F8FF;
}

.box.allcolored.type-legal th {
  background: #E7E8FF;
}

.box.colored.type-legal td,
.box.colored.type-legal th {
  background: #F7F8FF;
}

.box.colored.type-legal > tbody > tr > th {
  background: #E7E8FF;
}

.box.selfcolored.type-legal > tbody > tr > td {
  background: #F7F8FF;
}

.box.selfcolored.type-legal > tbody > tr > th {
  background: #E7E8FF;
}

/*
 * Sub style: fs (For: legal)
 * Border color: E0E0E0
 * Head border color:
 * Inner border color:
 * Cell background color:
 * Header background color:
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-legal.legal-fs {
  border-color: #E0E0E0;
}

/* Backwards compatible type-legal tags. */
.box.bordered.type-legal.legal-fs {
  border-color: #E0E0E0;
}

/*
 * Sub style: gnu (For: legal)
 * Border color: E0E0E0
 * Head border color:
 * Inner border color:
 * Cell background color: F8F8F8
 * Header background color: F8F8F8
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-legal.legal-gnu {
  border-color: #E0E0E0;
}

.box.tablecolored.style-legal.legal-gnu {
  background: #F8F8F8;
}

.box.allcolored.style-legal.legal-gnu td {
  background: #F8F8F8;
}

.box.allcolored.style-legal.legal-gnu th {
  background: #F8F8F8;
}

.box.colored.style-legal.legal-gnu td,
.box.colored.style-legal.legal-gnu th {
  background: #F8F8F8;
}

.box.colored.style-legal.legal-gnu > tbody > tr > th {
  background: #F8F8F8;
}

.box.selfcolored.style-legal.legal-gnu > tbody > tr > td {
  background: #F8F8F8;
}

.box.selfcolored.style-legal.legal-gnu > tbody > tr > th {
  background: #F8F8F8;
}

/* Backwards compatible type-legal tags. */
.box.bordered.type-legal.legal-gnu {
  border-color: #E0E0E0;
}

.box.tablecolored.type-legal.legal-gnu {
  background: #F8F8F8;
}

.box.allcolored.type-legal.legal-gnu td {
  background: #F8F8F8;
}

.box.allcolored.type-legal.legal-gnu th {
  background: #F8F8F8;
}

.box.colored.type-legal.legal-gnu td,
.box.colored.type-legal.legal-gnu th {
  background: #F8F8F8;
}

.box.colored.type-legal.legal-gnu > tbody > tr > th {
  background: #F8F8F8;
}

.box.selfcolored.type-legal.legal-gnu > tbody > tr > td {
  background: #F8F8F8;
}

.box.selfcolored.type-legal.legal-gnu > tbody > tr > th {
  background: #F8F8F8;
}

/*
 * Sub style: cc (For: legal)
 * Border color: E0E0E0
 * Head border color:
 * Inner border color:
 * Cell background color: F8F8F8
 * Header background color: F8F8F8
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-legal.legal-cc {
  border-color: #E0E0E0;
}

.box.tablecolored.style-legal.legal-cc {
  background: #F8F8F8;
}

.box.allcolored.style-legal.legal-cc td {
  background: #F8F8F8;
}

.box.allcolored.style-legal.legal-cc th {
  background: #F8F8F8;
}

.box.colored.style-legal.legal-cc td,
.box.colored.style-legal.legal-cc th {
  background: #F8F8F8;
}

.box.colored.style-legal.legal-cc > tbody > tr > th {
  background: #F8F8F8;
}

.box.selfcolored.style-legal.legal-cc > tbody > tr > td {
  background: #F8F8F8;
}

.box.selfcolored.style-legal.legal-cc > tbody > tr > th {
  background: #F8F8F8;
}

/* Backwards compatible type-legal tags. */
.box.bordered.type-legal.legal-cc {
  border-color: #E0E0E0;
}

.box.tablecolored.type-legal.legal-cc {
  background: #F8F8F8;
}

.box.allcolored.type-legal.legal-cc td {
  background: #F8F8F8;
}

.box.allcolored.type-legal.legal-cc th {
  background: #F8F8F8;
}

.box.colored.type-legal.legal-cc td,
.box.colored.type-legal.legal-cc th {
  background: #F8F8F8;
}

.box.colored.type-legal.legal-cc > tbody > tr > th {
  background: #F8F8F8;
}

.box.selfcolored.type-legal.legal-cc > tbody > tr > td {
  background: #F8F8F8;
}

.box.selfcolored.type-legal.legal-cc > tbody > tr > th {
  background: #F8F8F8;
}

/*
 * Sub style: pd (For: legal)
 * Border color: 8888AA
 * Head border color:
 * Inner border color:
 * Cell background color: F7F8FF
 * Header background color: F7F8FF
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-legal.legal-pd {
  border-color: #8888AA;
}

.box.tablecolored.style-legal.legal-pd {
  background: #F7F8FF;
}

.box.allcolored.style-legal.legal-pd td {
  background: #F7F8FF;
}

.box.allcolored.style-legal.legal-pd th {
  background: #F7F8FF;
}

.box.colored.style-legal.legal-pd td,
.box.colored.style-legal.legal-pd th {
  background: #F7F8FF;
}

.box.colored.style-legal.legal-pd > tbody > tr > th {
  background: #F7F8FF;
}

.box.selfcolored.style-legal.legal-pd > tbody > tr > td {
  background: #F7F8FF;
}

.box.selfcolored.style-legal.legal-pd > tbody > tr > th {
  background: #F7F8FF;
}

/* Backwards compatible type-legal tags. */
.box.bordered.type-legal.legal-pd {
  border-color: #8888AA;
}

.box.tablecolored.type-legal.legal-pd {
  background: #F7F8FF;
}

.box.allcolored.type-legal.legal-pd td {
  background: #F7F8FF;
}

.box.allcolored.type-legal.legal-pd th {
  background: #F7F8FF;
}

.box.colored.type-legal.legal-pd td,
.box.colored.type-legal.legal-pd th {
  background: #F7F8FF;
}

.box.colored.type-legal.legal-pd > tbody > tr > th {
  background: #F7F8FF;
}

.box.selfcolored.type-legal.legal-pd > tbody > tr > td {
  background: #F7F8FF;
}

.box.selfcolored.type-legal.legal-pd > tbody > tr > th {
  background: #F7F8FF;
}

/*
 * Sub style: copy (For: legal)
 * Border color: ACCE79
 * Head border color:
 * Inner border color:
 * Cell background color: E2F2D2
 * Header background color: E2F2D2
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-legal.legal-copy {
  border-color: #ACCE79;
}

.box.tablecolored.style-legal.legal-copy {
  background: #E2F2D2;
}

.box.allcolored.style-legal.legal-copy td {
  background: #E2F2D2;
}

.box.allcolored.style-legal.legal-copy th {
  background: #E2F2D2;
}

.box.colored.style-legal.legal-copy td,
.box.colored.style-legal.legal-copy th {
  background: #E2F2D2;
}

.box.colored.style-legal.legal-copy > tbody > tr > th {
  background: #E2F2D2;
}

.box.selfcolored.style-legal.legal-copy > tbody > tr > td {
  background: #E2F2D2;
}

.box.selfcolored.style-legal.legal-copy > tbody > tr > th {
  background: #E2F2D2;
}

/* Backwards compatible type-legal tags. */
.box.bordered.type-legal.legal-copy {
  border-color: #ACCE79;
}

.box.tablecolored.type-legal.legal-copy {
  background: #E2F2D2;
}

.box.allcolored.type-legal.legal-copy td {
  background: #E2F2D2;
}

.box.allcolored.type-legal.legal-copy th {
  background: #E2F2D2;
}

.box.colored.type-legal.legal-copy td,
.box.colored.type-legal.legal-copy th {
  background: #E2F2D2;
}

.box.colored.type-legal.legal-copy > tbody > tr > th {
  background: #E2F2D2;
}

.box.selfcolored.type-legal.legal-copy > tbody > tr > td {
  background: #E2F2D2;
}

.box.selfcolored.type-legal.legal-copy > tbody > tr > th {
  background: #E2F2D2;
}

/*
 * Sub style: green (For: legal)
 * Border color: 80D080
 * Head border color:
 * Inner border color:
 * Cell background color: E2F2D2
 * Header background color: E2F2D2
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-legal.legal-green {
  border-color: #80D080;
}

.box.tablecolored.style-legal.legal-green {
  background: #E2F2D2;
}

.box.allcolored.style-legal.legal-green td {
  background: #E2F2D2;
}

.box.allcolored.style-legal.legal-green th {
  background: #E2F2D2;
}

.box.colored.style-legal.legal-green td,
.box.colored.style-legal.legal-green th {
  background: #E2F2D2;
}

.box.colored.style-legal.legal-green > tbody > tr > th {
  background: #E2F2D2;
}

.box.selfcolored.style-legal.legal-green > tbody > tr > td {
  background: #E2F2D2;
}

.box.selfcolored.style-legal.legal-green > tbody > tr > th {
  background: #E2F2D2;
}

/* Backwards compatible type-legal tags. */
.box.bordered.type-legal.legal-green {
  border-color: #80D080;
}

.box.tablecolored.type-legal.legal-green {
  background: #E2F2D2;
}

.box.allcolored.type-legal.legal-green td {
  background: #E2F2D2;
}

.box.allcolored.type-legal.legal-green th {
  background: #E2F2D2;
}

.box.colored.type-legal.legal-green td,
.box.colored.type-legal.legal-green th {
  background: #E2F2D2;
}

.box.colored.type-legal.legal-green > tbody > tr > th {
  background: #E2F2D2;
}

.box.selfcolored.type-legal.legal-green > tbody > tr > td {
  background: #E2F2D2;
}

.box.selfcolored.type-legal.legal-green > tbody > tr > th {
  background: #E2F2D2;
}

/*
 * Style: nav
 * Border color: 87CEFA
 * Head border color: 7FFFD4
 * Inner border color: 00FFFF
 * Cell background color: E0FFFF
 * Header background color: 87CEFA
 * Main header background color:
 * Header link color: green
 */
.box.bordered.style-nav {
  border-color: #87CEFA;
}

.box.headbordered.style-nav > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.style-nav > tbody > tr > td,
.box.innerbordered.style-nav > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.style-nav {
  background: #E0FFFF;
}

.box.allcolored.style-nav td {
  background: #E0FFFF;
}

.box.allcolored.style-nav th {
  background: #87CEFA;
}

.box.allcolored.style-nav th .extiw:link {
  color: green !important;
}

.box.colored.style-nav td,
.box.colored.style-nav th {
  background: #E0FFFF;
}

.box.colored.style-nav > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.style-nav > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.style-nav > tbody > tr > th {
  background: #87CEFA;
}

/* Backwards compatible type-nav tags. */
.box.bordered.type-nav {
  border-color: #87CEFA;
}

.box.headbordered.type-nav > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.type-nav > tbody > tr > td,
.box.innerbordered.type-nav > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.type-nav {
  background: #E0FFFF;
}

.box.allcolored.type-nav td {
  background: #E0FFFF;
}

.box.allcolored.type-nav th {
  background: #87CEFA;
}

.box.allcolored.type-nav th .extiw:link {
  color: green !important;
}

.box.colored.type-nav td,
.box.colored.type-nav th {
  background: #E0FFFF;
}

.box.colored.type-nav > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.type-nav > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.type-nav > tbody > tr > th {
  background: #87CEFA;
}

/*
 * Style: aninav
 * Border color: 87CEFA
 * Head border color: 7FFFD4
 * Inner border color: 00FFFF
 * Cell background color: E0FFFF
 * Header background color: 87CEFA
 * Main header background color:
 * Header link color: green
 */
.box.bordered.style-aninav {
  border-color: #87CEFA;
}

.box.headbordered.style-aninav > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.style-aninav > tbody > tr > td,
.box.innerbordered.style-aninav > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.style-aninav {
  background: #E0FFFF;
}

.box.allcolored.style-aninav td {
  background: #E0FFFF;
}

.box.allcolored.style-aninav th {
  background: #87CEFA;
}

.box.allcolored.style-aninav th .extiw:link {
  color: green !important;
}

.box.colored.style-aninav td,
.box.colored.style-aninav th {
  background: #E0FFFF;
}

.box.colored.style-aninav > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.style-aninav > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.style-aninav > tbody > tr > th {
  background: #87CEFA;
}

/* Backwards compatible type-aninav tags. */
.box.bordered.type-aninav {
  border-color: #87CEFA;
}

.box.headbordered.type-aninav > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.type-aninav > tbody > tr > td,
.box.innerbordered.type-aninav > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.type-aninav {
  background: #E0FFFF;
}

.box.allcolored.type-aninav td {
  background: #E0FFFF;
}

.box.allcolored.type-aninav th {
  background: #87CEFA;
}

.box.allcolored.type-aninav th .extiw:link {
  color: green !important;
}

.box.colored.type-aninav td,
.box.colored.type-aninav th {
  background: #E0FFFF;
}

.box.colored.type-aninav > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.type-aninav > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.type-aninav > tbody > tr > th {
  background: #87CEFA;
}

box.type-aninav hr,
box.style-aninav hr {
  background-color: #87CEFA;
}

/*
 * Style: warning
 * Border color: FF7777
 * Head border color:
 * Inner border color: FF7777
 * Cell background color: FFEEEE
 * Header background color: FF7777
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-warning {
  border-color: #FF7777;
}

.box.innerbordered.style-warning > tbody > tr > td,
.box.innerbordered.style-warning > tbody > tr > th {
  border-color: #FF7777;
}

.box.tablecolored.style-warning {
  background: #FFEEEE;
}

.box.allcolored.style-warning td {
  background: #FFEEEE;
}

.box.allcolored.style-warning th {
  background: #FF7777;
}

.box.colored.style-warning td,
.box.colored.style-warning th {
  background: #FFEEEE;
}

.box.colored.style-warning > tbody > tr > th {
  background: #FF7777;
}

.box.selfcolored.style-warning > tbody > tr > td {
  background: #FFEEEE;
}

.box.selfcolored.style-warning > tbody > tr > th {
  background: #FF7777;
}

/* Backwards compatible type-warning tags. */
.box.bordered.type-warning {
  border-color: #FF7777;
}

.box.innerbordered.type-warning > tbody > tr > td,
.box.innerbordered.type-warning > tbody > tr > th {
  border-color: #FF7777;
}

.box.tablecolored.type-warning {
  background: #FFEEEE;
}

.box.allcolored.type-warning td {
  background: #FFEEEE;
}

.box.allcolored.type-warning th {
  background: #FF7777;
}

.box.colored.type-warning td,
.box.colored.type-warning th {
  background: #FFEEEE;
}

.box.colored.type-warning > tbody > tr > th {
  background: #FF7777;
}

.box.selfcolored.type-warning > tbody > tr > td {
  background: #FFEEEE;
}

.box.selfcolored.type-warning > tbody > tr > th {
  background: #FF7777;
}

/*
 * Style: info
 * Border color: 87CEFA
 * Head border color: 7FFFD4
 * Inner border color: 00FFFF
 * Cell background color: E0FFFF
 * Header background color: 87CEFA
 * Main header background color:
 * Header link color: green
 */
.box.bordered.style-info {
  border-color: #87CEFA;
}

.box.headbordered.style-info > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.style-info > tbody > tr > td,
.box.innerbordered.style-info > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.style-info {
  background: #E0FFFF;
}

.box.allcolored.style-info td {
  background: #E0FFFF;
}

.box.allcolored.style-info th {
  background: #87CEFA;
}

.box.allcolored.style-info th .extiw:link {
  color: green !important;
}

.box.colored.style-info td,
.box.colored.style-info th {
  background: #E0FFFF;
}

.box.colored.style-info > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.style-info > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.style-info > tbody > tr > th {
  background: #87CEFA;
}

/* Backwards compatible type-info tags. */
.box.bordered.type-info {
  border-color: #87CEFA;
}

.box.headbordered.type-info > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.type-info > tbody > tr > td,
.box.innerbordered.type-info > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.type-info {
  background: #E0FFFF;
}

.box.allcolored.type-info td {
  background: #E0FFFF;
}

.box.allcolored.type-info th {
  background: #87CEFA;
}

.box.allcolored.type-info th .extiw:link {
  color: green !important;
}

.box.colored.type-info td,
.box.colored.type-info th {
  background: #E0FFFF;
}

.box.colored.type-info > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.type-info > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.type-info > tbody > tr > th {
  background: #87CEFA;
}

/*
 * Style: cleanup
 * Border color: 87CEFA
 * Head border color: 7FFFD4
 * Inner border color: 00FFFF
 * Cell background color: E0FFFF
 * Header background color: 87CEFA
 * Main header background color:
 * Header link color: green
 */
.box.bordered.style-cleanup {
  border-color: #87CEFA;
}

.box.headbordered.style-cleanup > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.style-cleanup > tbody > tr > td,
.box.innerbordered.style-cleanup > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.style-cleanup {
  background: #E0FFFF;
}

.box.allcolored.style-cleanup td {
  background: #E0FFFF;
}

.box.allcolored.style-cleanup th {
  background: #87CEFA;
}

.box.allcolored.style-cleanup th .extiw:link {
  color: green !important;
}

.box.colored.style-cleanup td,
.box.colored.style-cleanup th {
  background: #E0FFFF;
}

.box.colored.style-cleanup > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.style-cleanup > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.style-cleanup > tbody > tr > th {
  background: #87CEFA;
}

/* Backwards compatible type-cleanup tags. */
.box.bordered.type-cleanup {
  border-color: #87CEFA;
}

.box.headbordered.type-cleanup > tbody > tr > th {
  border-color: #7FFFD4;
}

.box.innerbordered.type-cleanup > tbody > tr > td,
.box.innerbordered.type-cleanup > tbody > tr > th {
  border-color: #00FFFF;
}

.box.tablecolored.type-cleanup {
  background: #E0FFFF;
}

.box.allcolored.type-cleanup td {
  background: #E0FFFF;
}

.box.allcolored.type-cleanup th {
  background: #87CEFA;
}

.box.allcolored.type-cleanup th .extiw:link {
  color: green !important;
}

.box.colored.type-cleanup td,
.box.colored.type-cleanup th {
  background: #E0FFFF;
}

.box.colored.type-cleanup > tbody > tr > th {
  background: #87CEFA;
}

.box.selfcolored.type-cleanup > tbody > tr > td {
  background: #E0FFFF;
}

.box.selfcolored.type-cleanup > tbody > tr > th {
  background: #87CEFA;
}

/*
 * Style: redirect
 * Border color: FF0000
 * Head border color:
 * Inner border color: FF0000
 * Cell background color: FFCC77
 * Header background color: EEAA55
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-redirect {
  border-color: #FF0000;
}

.box.innerbordered.style-redirect > tbody > tr > td,
.box.innerbordered.style-redirect > tbody > tr > th {
  border-color: #FF0000;
}

.box.tablecolored.style-redirect {
  background: #FFCC77;
}

.box.allcolored.style-redirect td {
  background: #FFCC77;
}

.box.allcolored.style-redirect th {
  background: #EEAA55;
}

.box.colored.style-redirect td,
.box.colored.style-redirect th {
  background: #FFCC77;
}

.box.colored.style-redirect > tbody > tr > th {
  background: #EEAA55;
}

.box.selfcolored.style-redirect > tbody > tr > td {
  background: #FFCC77;
}

.box.selfcolored.style-redirect > tbody > tr > th {
  background: #EEAA55;
}

/* Backwards compatible type-redirect tags. */
.box.bordered.type-redirect {
  border-color: #FF0000;
}

.box.innerbordered.type-redirect > tbody > tr > td,
.box.innerbordered.type-redirect > tbody > tr > th {
  border-color: #FF0000;
}

.box.tablecolored.type-redirect {
  background: #FFCC77;
}

.box.allcolored.type-redirect td {
  background: #FFCC77;
}

.box.allcolored.type-redirect th {
  background: #EEAA55;
}

.box.colored.type-redirect td,
.box.colored.type-redirect th {
  background: #FFCC77;
}

.box.colored.type-redirect > tbody > tr > th {
  background: #EEAA55;
}

.box.selfcolored.type-redirect > tbody > tr > td {
  background: #FFCC77;
}

.box.selfcolored.type-redirect > tbody > tr > th {
  background: #EEAA55;
}

/*
 * Style: shared
 * Border color: EE9900
 * Head border color:
 * Inner border color: EE9900
 * Cell background color: FFA500
 * Header background color: EE9900
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-shared {
  border-color: #EE9900;
}

.box.innerbordered.style-shared > tbody > tr > td,
.box.innerbordered.style-shared > tbody > tr > th {
  border-color: #EE9900;
}

.box.tablecolored.style-shared {
  background: #FFA500;
}

.box.allcolored.style-shared td {
  background: #FFA500;
}

.box.allcolored.style-shared th {
  background: #EE9900;
}

.box.colored.style-shared td,
.box.colored.style-shared th {
  background: #FFA500;
}

.box.colored.style-shared > tbody > tr > th {
  background: #EE9900;
}

.box.selfcolored.style-shared > tbody > tr > td {
  background: #FFA500;
}

.box.selfcolored.style-shared > tbody > tr > th {
  background: #EE9900;
}

/* Backwards compatible type-shared tags. */
.box.bordered.type-shared {
  border-color: #EE9900;
}

.box.innerbordered.type-shared > tbody > tr > td,
.box.innerbordered.type-shared > tbody > tr > th {
  border-color: #EE9900;
}

.box.tablecolored.type-shared {
  background: #FFA500;
}

.box.allcolored.type-shared td {
  background: #FFA500;
}

.box.allcolored.type-shared th {
  background: #EE9900;
}

.box.colored.type-shared td,
.box.colored.type-shared th {
  background: #FFA500;
}

.box.colored.type-shared > tbody > tr > th {
  background: #EE9900;
}

.box.selfcolored.type-shared > tbody > tr > td {
  background: #FFA500;
}

.box.selfcolored.type-shared > tbody > tr > th {
  background: #EE9900;
}

/*
 * Style: animanga
 * Border color: AAAAEE
 * Head border color:
 * Inner border color: AAAAEE
 * Cell background color: F9F9FF
 * Header background color: E6E9FF
 * Main header background color: CCCCFF
 * Header link color: N/I
 */
.box.bordered.style-animanga {
  border-color: #AAAAEE;
}

.box.innerbordered.style-animanga > tbody > tr > td,
.box.innerbordered.style-animanga > tbody > tr > th {
  border-color: #AAAAEE;
}

.box.tablecolored.style-animanga {
  background: #F9F9FF;
}

.box.allcolored.style-animanga td {
  background: #F9F9FF;
}

.box.allcolored.style-animanga th {
  background: #E6E9FF;
}

.box.allcolored.style-animanga .mainheader {
  background: #CCCCFF;
}

.box.colored.style-animanga td,
.box.colored.style-animanga th {
  background: #F9F9FF;
}

.box.colored.style-animanga > tbody > tr > th {
  background: #E6E9FF;
}

.box.colored.style-animanga > tbody > tr > .mainheader {
  background: #CCCCFF;
}

.box.selfcolored.style-animanga > tbody > tr > td {
  background: #F9F9FF;
}

.box.selfcolored.style-animanga > tbody > tr > th {
  background: #E6E9FF;
}

.box.selfcolored.style-animanga > tbody > tr > .mainheader {
  background: #CCCCFF;
}

/* Backwards compatible type-animanga tags. */
.box.bordered.type-animanga {
  border-color: #AAAAEE;
}

.box.innerbordered.type-animanga > tbody > tr > td,
.box.innerbordered.type-animanga > tbody > tr > th {
  border-color: #AAAAEE;
}

.box.tablecolored.type-animanga {
  background: #F9F9FF;
}

.box.allcolored.type-animanga td {
  background: #F9F9FF;
}

.box.allcolored.type-animanga th {
  background: #E6E9FF;
}

.box.allcolored.type-animanga .mainheader {
  background: #CCCCFF;
}

.box.colored.type-animanga td,
.box.colored.type-animanga th {
  background: #F9F9FF;
}

.box.colored.type-animanga > tbody > tr > th {
  background: #E6E9FF;
}

.box.colored.type-animanga > tbody > tr > .mainheader {
  background: #CCCCFF;
}

.box.selfcolored.type-animanga > tbody > tr > td {
  background: #F9F9FF;
}

.box.selfcolored.type-animanga > tbody > tr > th {
  background: #E6E9FF;
}

.box.selfcolored.type-animanga > tbody > tr > .mainheader {
  background: #CCCCFF;
}

/*
 * Style: character
 * Border color: E0E0E0
 * Head border color:
 * Inner border color: AAAAAA
 * Cell background color: F2F2F2
 * Header background color: E5E5E5
 * Main header background color: C5C5C5
 * Header link color: N/I
 */
.box.bordered.style-character {
  border-color: #E0E0E0;
}

.box.innerbordered.style-character > tbody > tr > td,
.box.innerbordered.style-character > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.style-character {
  background: #F2F2F2;
}

.box.allcolored.style-character td {
  background: #F2F2F2;
}

.box.allcolored.style-character th {
  background: #E5E5E5;
}

.box.allcolored.style-character .mainheader {
  background: #C5C5C5;
}

.box.colored.style-character td,
.box.colored.style-character th {
  background: #F2F2F2;
}

.box.colored.style-character > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.style-character > tbody > tr > .mainheader {
  background: #C5C5C5;
}

.box.selfcolored.style-character > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.style-character > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.style-character > tbody > tr > .mainheader {
  background: #C5C5C5;
}

/* Backwards compatible type-character tags. */
.box.bordered.type-character {
  border-color: #E0E0E0;
}

.box.innerbordered.type-character > tbody > tr > td,
.box.innerbordered.type-character > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.type-character {
  background: #F2F2F2;
}

.box.allcolored.type-character td {
  background: #F2F2F2;
}

.box.allcolored.type-character th {
  background: #E5E5E5;
}

.box.allcolored.type-character .mainheader {
  background: #C5C5C5;
}

.box.colored.type-character td,
.box.colored.type-character th {
  background: #F2F2F2;
}

.box.colored.type-character > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.type-character > tbody > tr > .mainheader {
  background: #C5C5C5;
}

.box.selfcolored.type-character > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.type-character > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.type-character > tbody > tr > .mainheader {
  background: #C5C5C5;
}

/*
 * Style: episode
 * Border color: E0E0E0
 * Head border color:
 * Inner border color: AAAAAA
 * Cell background color: F2F2F2
 * Header background color: E5E5E5
 * Main header background color: C5C5C5
 * Header link color: N/I
 */
.box.bordered.style-episode {
  border-color: #E0E0E0;
}

.box.innerbordered.style-episode > tbody > tr > td,
.box.innerbordered.style-episode > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.style-episode {
  background: #F2F2F2;
}

.box.allcolored.style-episode td {
  background: #F2F2F2;
}

.box.allcolored.style-episode th {
  background: #E5E5E5;
}

.box.allcolored.style-episode .mainheader {
  background: #C5C5C5;
}

.box.colored.style-episode td,
.box.colored.style-episode th {
  background: #F2F2F2;
}

.box.colored.style-episode > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.style-episode > tbody > tr > .mainheader {
  background: #C5C5C5;
}

.box.selfcolored.style-episode > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.style-episode > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.style-episode > tbody > tr > .mainheader {
  background: #C5C5C5;
}

/* Backwards compatible type-episode tags. */
.box.bordered.type-episode {
  border-color: #E0E0E0;
}

.box.innerbordered.type-episode > tbody > tr > td,
.box.innerbordered.type-episode > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.type-episode {
  background: #F2F2F2;
}

.box.allcolored.type-episode td {
  background: #F2F2F2;
}

.box.allcolored.type-episode th {
  background: #E5E5E5;
}

.box.allcolored.type-episode .mainheader {
  background: #C5C5C5;
}

.box.colored.type-episode td,
.box.colored.type-episode th {
  background: #F2F2F2;
}

.box.colored.type-episode > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.type-episode > tbody > tr > .mainheader {
  background: #C5C5C5;
}

.box.selfcolored.type-episode > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.type-episode > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.type-episode > tbody > tr > .mainheader {
  background: #C5C5C5;
}

/*
 * Style: ability
 * Border color: E0E0E0
 * Head border color:
 * Inner border color: AAAAAA
 * Cell background color: F2F2F2
 * Header background color: E5E5E5
 * Main header background color: C5C5C5
 * Header link color: N/I
 */
.box.bordered.style-ability {
  border-color: #E0E0E0;
}

.box.innerbordered.style-ability > tbody > tr > td,
.box.innerbordered.style-ability > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.style-ability {
  background: #F2F2F2;
}

.box.allcolored.style-ability td {
  background: #F2F2F2;
}

.box.allcolored.style-ability th {
  background: #E5E5E5;
}

.box.allcolored.style-ability .mainheader {
  background: #C5C5C5;
}

.box.colored.style-ability td,
.box.colored.style-ability th {
  background: #F2F2F2;
}

.box.colored.style-ability > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.style-ability > tbody > tr > .mainheader {
  background: #C5C5C5;
}

.box.selfcolored.style-ability > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.style-ability > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.style-ability > tbody > tr > .mainheader {
  background: #C5C5C5;
}

/* Backwards compatible type-ability tags. */
.box.bordered.type-ability {
  border-color: #E0E0E0;
}

.box.innerbordered.type-ability > tbody > tr > td,
.box.innerbordered.type-ability > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.type-ability {
  background: #F2F2F2;
}

.box.allcolored.type-ability td {
  background: #F2F2F2;
}

.box.allcolored.type-ability th {
  background: #E5E5E5;
}

.box.allcolored.type-ability .mainheader {
  background: #C5C5C5;
}

.box.colored.type-ability td,
.box.colored.type-ability th {
  background: #F2F2F2;
}

.box.colored.type-ability > tbody > tr > th {
  background: #E5E5E5;
}

.box.colored.type-ability > tbody > tr > .mainheader {
  background: #C5C5C5;
}

.box.selfcolored.type-ability > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.type-ability > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.type-ability > tbody > tr > .mainheader {
  background: #C5C5C5;
}

/*
 * Style: episodeguide
 * Border color: AAAAAA
 * Head border color:
 * Inner border color: E0E0E0
 * Cell background color:
 * Header background color: E5E5E5
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-episodeguide {
  border-color: #AAAAAA;
}

.box.innerbordered.style-episodeguide > tbody > tr > td,
.box.innerbordered.style-episodeguide > tbody > tr > th {
  border-color: #E0E0E0;
}

.box.allcolored.style-episodeguide th {
  background: #E5E5E5;
}

.box.colored.style-episodeguide > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.style-episodeguide > tbody > tr > th {
  background: #E5E5E5;
}

/* Backwards compatible type-episodeguide tags. */
.box.bordered.type-episodeguide {
  border-color: #AAAAAA;
}

.box.innerbordered.type-episodeguide > tbody > tr > td,
.box.innerbordered.type-episodeguide > tbody > tr > th {
  border-color: #E0E0E0;
}

.box.allcolored.type-episodeguide th {
  background: #E5E5E5;
}

.box.colored.type-episodeguide > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.type-episodeguide > tbody > tr > th {
  background: #E5E5E5;
}

/*
 * Style: watch
 * Border color: AAAAAA
 * Head border color: AAAAAA
 * Inner border color: AAAAAA
 * Cell background color: F2F2F2
 * Header background color: E5E5E5
 * Main header background color:
 * Header link color: N/I
 */
.box.bordered.style-watch {
  border-color: #AAAAAA;
}

.box.headbordered.style-watch > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.innerbordered.style-watch > tbody > tr > td,
.box.innerbordered.style-watch > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.style-watch {
  background: #F2F2F2;
}

.box.allcolored.style-watch td {
  background: #F2F2F2;
}

.box.allcolored.style-watch th {
  background: #E5E5E5;
}

.box.colored.style-watch td,
.box.colored.style-watch th {
  background: #F2F2F2;
}

.box.colored.style-watch > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.style-watch > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.style-watch > tbody > tr > th {
  background: #E5E5E5;
}

/* Backwards compatible type-watch tags. */
.box.bordered.type-watch {
  border-color: #AAAAAA;
}

.box.headbordered.type-watch > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.innerbordered.type-watch > tbody > tr > td,
.box.innerbordered.type-watch > tbody > tr > th {
  border-color: #AAAAAA;
}

.box.tablecolored.type-watch {
  background: #F2F2F2;
}

.box.allcolored.type-watch td {
  background: #F2F2F2;
}

.box.allcolored.type-watch th {
  background: #E5E5E5;
}

.box.colored.type-watch td,
.box.colored.type-watch th {
  background: #F2F2F2;
}

.box.colored.type-watch > tbody > tr > th {
  background: #E5E5E5;
}

.box.selfcolored.type-watch > tbody > tr > td {
  background: #F2F2F2;
}

.box.selfcolored.type-watch > tbody > tr > th {
  background: #E5E5E5;
}

/***** Scheme Classes *****/
/*<big>'''[[MediaWiki:Anime-Userbox.css]]'''</big>*/
/*<pre>*/
/* Styling for Project:Userboxes/Listing -Dantman */
.uniquetable-userboxlist .categories a {
  display: list-item;
  margin-left: 15px;
}

.uniquetable-userboxlist .result {
  width: 250px;
}

/* Userbox Classes -Dantman */
.userbox {
  width: 250px;
  height: 50px;
  padding: 0px;
  border: 1px solid black;
  border-spacing: 0px;
}

.userbox .id {
  width: 65px;
  height: 50px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.userbox .info {
  height: 50px;
  margin: 0px;
  padding: 5px;
  font-size: 10px;
}

/* Userbox Mode Classes -Dantman */
.userbox.userbox-fill-vert {
  height: 100%;
}

.userbox.userbox-fill-horiz,
.userbox.userbox-fill-horiz .main {
  width: 100%;
}

/* Userbox Color Classes -Dantman */
/*ID*/
.userbox.id-white {
  border-color: #FFFFFF;
}

.userbox.id-white .id {
  background: #FFFFFF;
}

.userbox.id-cleargrey {
  border-color: #F8F8F8;
}

.userbox.id-cleargrey .id {
  background: #F8F8F8;
}

.userbox.id-lightgrey {
  border-color: #F2F2F2;
}

.userbox.id-lightgrey .id {
  background: #F2F2F2;
}

.userbox.id-grey {
  border-color: #AAAAAA;
}

.userbox.id-grey .id {
  background: #AAAAAA;
}

.userbox.id-darkgrey {
  border-color: #999999;
}

.userbox.id-darkgrey .id {
  background: #999999;
}

.userbox.id-heavygrey {
  border-color: #555555;
}

.userbox.id-heavygrey .id {
  background: #555555;
}

.userbox.id-black {
  border-color: #000000;
}

.userbox.id-black .id {
  background: #000000;
}

.userbox.id-cyan {
  border-color: #D0F8FF;
}

.userbox.id-cyan .id {
  background: #D0F8FF;
}

.userbox.id-darkcyan {
  border-color: #77E0E8;
}

.userbox.id-darkcyan .id {
  background: #77E0E8;
}

.userbox.id-lowerblue {
  border-color: #99B3FF;
}

.userbox.id-lowerblue .id {
  background: #99B3FF;
}

.userbox.id-lightblue {
  border-color: #E0E8FF;
}

.userbox.id-lightblue .id {
  background: #E0E8FF;
}

.userbox.id-clearblue {
  border-color: #F7F8FF;
}

.userbox.id-clearblue .id {
  background: #F7F8FF;
}

.userbox.id-blue {
  border-color: #0000FF;
}

.userbox.id-blue .id {
  background: #0000FF;
}

.userbox.id-violetblue {
  border-color: #5555EE;
}

.userbox.id-violetblue .id {
  background: #5555EE;
}

.userbox.id-clearviolet {
  border-color: #E7E8FF;
}

.userbox.id-clearviolet .id {
  background: #E7E8FF;
}

.userbox.id-lightviolet {
  border-color: #A0AAFF;
}

.userbox.id-lightviolet .id {
  background: #A0AAFF;
}

.userbox.id-violet {
  border-color: #FF00EE;
}

.userbox.id-violet .id {
  background: #FF00EE;
}

.userbox.id-darkviolet {
  border-color: #500050;
}

.userbox.id-darkviolet .id {
  background: #500050;
}

.userbox.id-bluepurple {
  border-color: #AA00EE;
}

.userbox.id-bluepurple .id {
  background: #AA00EE;
}

.userbox.id-purple {
  border-color: #9900FF;
}

.userbox.id-purple .id {
  background: #9900FF;
}

.userbox.id-darkpurple {
  border-color: #800080;
}

.userbox.id-darkpurple .id {
  background: #800080;
}

.userbox.id-brown {
  border-color: #DAA520;
}

.userbox.id-brown .id {
  background: #DAA520;
}

.userbox.id-clearmustard {
  border-color: #EEEEAA;
}

.userbox.id-clearmustard .id {
  background: #EEEEAA;
}

.userbox.id-lightmustard {
  border-color: #EEEE99;
}

.userbox.id-lightmustard .id {
  background: #EEEE99;
}

.userbox.id-mustard {
  border-color: #EEEE00;
}

.userbox.id-mustard .id {
  background: #EEEE00;
}

.userbox.id-darkmustard {
  border-color: #AAAA00;
}

.userbox.id-darkmustard .id {
  background: #AAAA00;
}

.userbox.id-orange {
  border-color: #EE9900;
}

.userbox.id-orange .id {
  background: #EE9900;
}

.userbox.id-darkorange {
  border-color: #FFAA00;
}

.userbox.id-darkorange .id {
  background: #FFAA00;
}

.userbox.id-orangegold {
  border-color: #FFD700;
}

.userbox.id-orangegold .id {
  background: #FFD700;
}

.userbox.id-gold {
  border-color: #FFEE00;
}

.userbox.id-gold .id {
  background: #FFEE00;
}

.userbox.id-magenta {
  border-color: #EE0099;
}

.userbox.id-magenta .id {
  background: #EE0099;
}

.userbox.id-clearpink {
  border-color: #FFEEFF;
}

.userbox.id-clearpink .id {
  background: #FFEEFF;
}

.userbox.id-pink {
  border-color: #FFAAEE;
}

.userbox.id-pink .id {
  background: #FFAAEE;
}

.userbox.id-darkpink {
  border-color: #FF7777;
}

.userbox.id-darkpink .id {
  background: #FF7777;
}

.userbox.id-peach {
  border-color: #FFEEEE;
}

.userbox.id-peach .id {
  background: #FFEEEE;
}

.userbox.id-red {
  border-color: #FF0000;
}

.userbox.id-red .id {
  background: #FF0000;
}

.userbox.id-clearyellow {
  border-color: #FFFFEE;
}

.userbox.id-clearyellow .id {
  background: #FFFFEE;
}

.userbox.id-lightyellow {
  border-color: #FFFF99;
}

.userbox.id-lightyellow .id {
  background: #FFFF99;
}

.userbox.id-yellow {
  border-color: #FFFF00;
}

.userbox.id-yellow .id {
  background: #FFFF00;
}

.userbox.id-cleargreen {
  border-color: #C5FCDC;
}

.userbox.id-cleargreen .id {
  background: #C5FCDC;
}

.userbox.id-lightgreen {
  border-color: #6EF7A7;
}

.userbox.id-lightgreen .id {
  background: #6EF7A7;
}

.userbox.id-lime {
  border-color: #00FF00;
}

.userbox.id-lime .id {
  background: #00FF00;
}

.userbox.id-grass {
  border-color: #ADFF2F;
}

.userbox.id-grass .id {
  background: #ADFF2F;
}

.userbox.id-green {
  border-color: #008000;
}

.userbox.id-green .id {
  background: #008000;
}

.userbox.id-darkgrass {
  border-color: #32CD32;
}

.userbox.id-darkgrass .id {
  background: #32CD32;
}

.userbox.id-darkgreen {
  border-color: #006400;
}

.userbox.id-darkgreen .id {
  background: #006400;
}

/*Info*/
.userbox.info-white {
  background: #FFFFFF;
}

.userbox.info-cleargrey {
  background: #F8F8F8;
}

.userbox.info-lightgrey {
  background: #F2F2F2;
}

.userbox.info-grey {
  background: #AAAAAA;
}

.userbox.info-darkgrey {
  background: #999999;
}

.userbox.info-heavygrey {
  background: #555555;
}

.userbox.info-black {
  background: #000000;
}

.userbox.info-cyan {
  background: #D0F8FF;
}

.userbox.info-darkcyan {
  background: #77E0E8;
}

.userbox.info-lowerblue {
  background: #99B3FF;
}

.userbox.info-lightblue {
  background: #E0E8FF;
}

.userbox.info-clearblue {
  background: #F7F8FF;
}

.userbox.info-blue {
  background: #0000FF;
}

.userbox.info-violetblue {
  background: #5555EE;
}

.userbox.info-clearviolet {
  background: #E7E8FF;
}

.userbox.info-lightviolet {
  background: #A0AAFF;
}

.userbox.info-violet {
  background: #FF00EE;
}

.userbox.info-darkviolet {
  background: #500050;
}

.userbox.info-bluepurple {
  background: #AA00EE;
}

.userbox.info-purple {
  background: #9900FF;
}

.userbox.info-darkpurple {
  background: #800080;
}

.userbox.info-brown {
  background: #DAA520;
}

.userbox.info-clearmustard {
  background: #EEEEAA;
}

.userbox.info-lightmustard {
  background: #EEEE99;
}

.userbox.info-mustard {
  background: #EEEE00;
}

.userbox.info-darkmustard {
  background: #AAAA00;
}

.userbox.info-orange {
  background: #EE9900;
}

.userbox.info-darkorange {
  background: #FFAA00;
}

.userbox.info-orangegold {
  background: #FFD700;
}

.userbox.info-gold {
  background: #FFEE00;
}

.userbox.info-magenta {
  background: #EE0099;
}

.userbox.info-clearpink {
  background: #FFEEFF;
}

.userbox.info-pink {
  background: #FFAAEE;
}

.userbox.info-darkpink {
  background: #FF7777;
}

.userbox.info-peach {
  background: #FFEEEE;
}

.userbox.info-red {
  background: #FF0000;
}

.userbox.info-clearyellow {
  background: #FFFFEE;
}

.userbox.info-lightyellow {
  background: #FFFF99;
}

.userbox.info-yellow {
  background: #FFFF00;
}

.userbox.info-cleargreen {
  background: #C5FCDC;
}

.userbox.info-lightgreen {
  background: #6EF7A7;
}

.userbox.info-lime {
  background: #00FF00;
}

.userbox.info-grass {
  background: #ADFF2F;
}

.userbox.info-green {
  background: #008000;
}

.userbox.info-darkgrass {
  background: #32CD32;
}

.userbox.info-darkgreen {
  background: #006400;
}

/*Text clases*/
.userbox.text-black {
  color: #000000;
}

.userbox.text-white {
  color: #FFFFFF;
}

.userbox.text-red {
  color: #FF0000;
}

.userbox.text-lime {
  color: #00FF00;
}

.userbox.text-lightgrey {
  color: #F2F2F2;
}

.userbox.text-grey {
  color: #999999;
}

.userbox.text-darkgrey {
  color: #333333;
}

.userbox.text-lightblue {
  color: #99B3FF;
}

.userbox.text-blue {
  color: #5555EE;
}

.userbox.text-cyan {
  color: #77E0E8;
}

.userbox.text-brown {
  color: #AAAA00;
}

.userbox.text-yellow {
  color: #EEEE99;
}

.userbox.text-pink {
  color: #FFAAEE;
}

.userbox.text-magenta {
  color: #EE0099;
}

.userbox.text-violet {
  color: #9900FF;
}

.userbox.text-purple {
  color: #500050;
}

.userbox.text-orange {
  color: #EE9900;
}

.userbox.text-gold {
  color: #DAA520;
}

.userbox.text-green {
  color: #006400;
}

.userbox.text-lightgreen {
  color: #6EF7A7;
}

/*Id Text clases*/
.userbox.id-text-black .id {
  color: #000000;
}

.userbox.id-text-white .id {
  color: #FFFFFF;
}

.userbox.id-text-red .id {
  color: #FF0000;
}

.userbox.id-text-lime .id {
  color: #00FF00;
}

.userbox.id-text-lightgrey .id {
  color: #F2F2F2;
}

.userbox.id-text-grey .id {
  color: #999999;
}

.userbox.id-text-darkgrey .id {
  color: #333333;
}

.userbox.id-text-lightblue .id {
  color: #99B3FF;
}

.userbox.id-text-blue .id {
  color: #5555EE;
}

.userbox.id-text-cyan .id {
  color: #77E0E8;
}

.userbox.id-text-brown .id {
  color: #AAAA00;
}

.userbox.id-text-yellow .id {
  color: #EEEE99;
}

.userbox.id-text-pink .id {
  color: #FFAAEE;
}

.userbox.id-text-magenta .id {
  color: #EE0099;
}

.userbox.id-text-violet .id {
  color: #9900FF;
}

.userbox.id-text-purple .id {
  color: #500050;
}

.userbox.id-text-orange .id {
  color: #EE9900;
}

.userbox.id-text-gold .id {
  color: #DAA520;
}

.userbox.id-text-green .id {
  color: #006400;
}

.userbox.id-text-lightgreen .id {
  color: #6EF7A7;
}

/*Link Classes*/
.userbox.link-white a {
  color: #FFFFFF !important;
}

.userbox.link-white a.new {
  color: #CCCCCC !important;
}

.userbox.link-black a {
  color: #000000 !important;
}

.userbox.link-black a.new {
  color: #555555 !important;
}

.userbox.link-lime a {
  color: #00FF00 !important;
}

.userbox.link-lime a.new {
  color: #006400 !important;
}

.userbox.link-green a {
  color: #006400 !important;
}

.userbox.link-green a.new {
  color: #00FF00 !important;
}

.userbox.link-red a {
  color: #FF0000 !important;
}

.userbox.link-red a.new {
  color: #FFEE00 !important;
}

/*</pre>*/
/*<big>'''[[MediaWiki:Anime-Content.css]]'''</big>*/
/*<pre>*/
/* Box Sizing */
.fill-horiz {
  width: 100%;
}

.fill-vert {
  height: 100%;
}

.half-horiz {
  width: 50%;
}

.half-vert {
  height: 50%;
}

.quarter-horiz {
  width: 25%;
}

.quarter-vert {
  height: 25%;
}

.fill-td td {
  width: 100%;
}

.fill-th th {
  width: 100%;
}

.fill-horiz-important {
  width: 100% !important;
}

/* Small Cells holding only single icons */
.cell-icon-25 {
  margin: 0px;
  padding: 0px;
  width: 25px;
  height: 25px;
}

.cell-icon-35 {
  margin: 0px;
  padding: 0px;
  width: 35px;
  height: 35px;
}

.cell-icon-64 {
  margin: 0px;
  padding: 0px;
  width: 64px;
  height: 64px;
}

.cell-icon-125 {
  margin: 0px;
  padding: 0px;
  width: 125px;
  height: 125px;
}

.cell-icon-25.withpadding,
.cell-icon-35.withpadding,
.cell-icon-64.withpadding,
.cell-icon-125.withpadding {
  padding: 5px;
}

/* Universal text classes. -Dantman */
.text-small {
  font-size: 70%;
}

.text-small.text-growbold b {
  font-size: 75%;
}

.text-medium {
  font-size: 80%;
}

.text-medium.text-growbold b {
  font-size: 85%;
}

.text-normal {
  font-size: 93%;
}

.text-normal.text-growbold b {
  font-size: 100%;
}

.text-large {
  font-size: 125%;
}

.text-large.text-growbold b {
  font-size: 130%;
}

.text-huge {
  font-size: 150%;
}

.text-huge.text-growbold b {
  font-size: 155%;
}

/* Universal text style convenience classes. -Dantman */
.style-italic {
  font-style: italic;
}

.style-bold {
  font-weight: bold;
}

.style-underline {
  text-decoration: underline;
}

.style-strike, .style-strikethrough {
  text-decoration: line-through;
}

.style-overline {
  text-decoration: overline;
}

/* Alignment classes -Dantman */
.left {
  text-align: left !important;
}

.center {
  text-align: center !important;
}

.right {
  text-align: right !important;
}

.justify {
  text-align: justify !important;
}

.top {
  vertical-align: top !important;
}

.middle {
  vertical-align: middle !important;
}

.bottom {
  vertical-align: bottom !important;
}

.center-block {
  margin: 0 auto;
}

.cell-align-left td,
.cell-align-left th,
.td-align-left td,
.th-align-left th {
  text-align: left;
}

.cell-align-center td,
.cell-align-center th,
.td-align-center td,
.th-align-center th {
  text-align: center;
}

.cell-align-right td,
.cell-align-right th,
.td-align-right td,
.th-align-right th {
  text-align: right;
}

.cell-align-top td,
.cell-align-top th,
.td-align-top td,
.th-align-top th {
  vertical-align: top;
}

.cell-align-middle td,
.cell-align-middle th,
.td-align-middle td,
.th-align-middle th {
  vertical-align: middle;
}

.cell-align-bottom td,
.cell-align-bottom th,
.td-align-bottom td,
.th-align-bottom th {
  vertical-align: bottom;
}

.float-left {
  float: left;
}

.float-left-clear {
  float: left;
  clear: left;
}

.float-right {
  float: right;
}

.float-right-clear {
  float: right;
  clear: right;
}

/* Lists -Dantman */
.list-noicon ul {
  list-style: none inside none !important;
  margin-left: 0px !important;
}

.list-noicon .list-icon ul {
  list-style: square inside none !important;
  margin-left: 18px !important;
}

.list-inline ul li {
  display: inline;
}

.list-comma ul li:after {
  content: ", ";
}

.list-fill-horiz ul {
  width: 100%;
}

.list-fill-vert ul {
  width: 100%;
}

.list-noicon ul ul {
  margin-left: 15px !important;
}

/* Page Cleanup -Dantman */
.nowrap {
  white-space: nowrap;
}

.nowrap-all * {
  white-space: nowrap;
}

.nowrap-td td {
  white-space: nowrap;
}

.nowrap-th th {
  white-space: nowrap;
}

.hide {
  display: none;
}

.inline-p p {
  display: inline;
}

.inline-div div {
  display: inline;
}

/* Header Modification -Dantman */
.header-noline h1,
.header-noline h2 {
  border: 0px;
}

.header-left h1,
.header-left h2,
.header-left h3,
.header-left h4,
.header-left h5,
.header-left h6 {
  text-align: left;
}

.header-center h1,
.header-center h2,
.header-center h3,
.header-center h4,
.header-center h5,
.header-center h6 {
  text-align: center;
}

.header-right h1,
.header-right h2,
.header-right h3,
.header-right h4,
.header-right h5,
.header-right h6 {
  text-align: right;
}

.header-bold h1,
.header-bold h2,
.header-bold h3,
.header-bold h4,
.header-bold h5,
.header-bold h6 {
  font-weight: bold;
}

.header-italic h1,
.header-italic h2,
.header-italic h3,
.header-italic h4,
.header-italic h5,
.header-italic h6 {
  font-style: italic;
}

.header-underline h1,
.header-underline h2,
.header-underline h3,
.header-underline h4,
.header-underline h5,
.header-underline h6 {
  text-decoration: underline;
}

/* Special TOC Styling -Dantman */
.toc-horiz #toc, .toc-horiz #toc ul {
  width: 100%;
}

.toc-horiz #toc li {
  display: inline;
  margin-right: 10px;
}

.toc-comma #toc li:after {
  content: ", ";
}

.toc-nolevel #toc li .tocnumber {
  display: none;
}

.toc-clear #toc {
  background: transparent;
  border: 0px;
  padding: 5px;
}

.toc-clear #toc td {
  background: transparent !important;
  border: 0px;
}

.toc-clear #toc {
  background: transparent;
  border: 0px;
  padding: 5px;
}

.toc-nohide #toc #toctitle {
  display: none;
}

/*Level Starts*/
.toc-start-2 li.toclevel-1 > a, .toc-start-2 li.toclevel-1:after {
  display: none;
}

.toc-start-3 li.toclevel-1 > a, .toc-start-3 li.toclevel-1:after, .toc-start-3 li.toclevel-2 > a, .toc-start-3 li.toclevel-2:after,
.toc-start-4 li.toclevel-1 > a, .toc-start-4 li.toclevel-1:after, .toc-start-4 li.toclevel-2 > a, .toc-start-4 li.toclevel-2:after, .toc-start-3 li.toclevel-3 > a, .toc-start-3 li.toclevel-3:after,
.toc-start-5 li.toclevel-1 > a, .toc-start-5 li.toclevel-1:after, .toc-start-5 li.toclevel-2 > a, .toc-start-5 li.toclevel-2:after, .toc-start-2 li.toclevel-3 > a, .toc-start-2 li.toclevel-3:after, .toc-start-2 li.toclevel-4 > a, .toc-start-2 li.toclevel-4:after,
.toc-start-6 li.toclevel-1 > a, .toc-start-6 li.toclevel-1:after, .toc-start-6 li.toclevel-2 > a, .toc-start-6 li.toclevel-2:after, .toc-start-1 li.toclevel-3 > a, .toc-start-1 li.toclevel-3:after, .toc-start-1 li.toclevel-4 > a, .toc-start-1 li.toclevel-4:after, .toc-start-1 li.toclevel-5 > a, .toc-start-1 li.toclevel-5:after {
  display: none;
}

/*Level Limits*/
.toc-limit-5 li.toclevel-6,
.toc-limit-4 li.toclevel-6, .toc-limit-4 li.toclevel-5,
.toc-limit-3 li.toclevel-6, .toc-limit-3 li.toclevel-5, .toc-limit-3 li.toclevel-4,
.toc-limit-2 li.toclevel-6, .toc-limit-2 li.toclevel-5, .toc-limit-2 li.toclevel-4, .toc-limit-2 li.toclevel-3,
.toc-limit-1 li.toclevel-6, .toc-limit-1 li.toclevel-5, .toc-limit-1 li.toclevel-4, .toc-limit-1 li.toclevel-3, .toc-limit-1 li.toclevel-2 {
  display: none !important;
}

/* Scrolling -Dantman */
pre {
  overflow: auto;
}

.overflow-visible {
  overflow: visible;
}

div.scrollable,
span.scrollable,
table.scrollable tbody,
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

/*</pre>*/
/*<big>'''[[MediaWiki:Anime-Cite.css]]'''</big>*/
/*<pre>*/
/**
 * References styling changes.
 *
 * -Reduce the size of the references to make them fit better.
 * -Use 2column layout for neatness when the browser will support it. (Ignore validator errors)
 * -Highlight active references to help navigation.
 * 	(Default highlight is a light blue. Individual wiki may copy the OVERRIDE section to pick another color.)
 */
.references {
  font-size: 90%;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

.references > li {
  margin-right: 25px;
} /* Avoid background overlapping into 2nd column numbers. */
/* OVERRIDE */
.references > li:target,
.reference:target {
  background-color: #DDEEFF;
}

/* END:OVERRIDE */
/*</pre>*/
/*<big>'''[[MediaWiki:Anime-Misc.css]]'''</big>*/
/*<pre>*/
/* Universal Spoiler Style -Dantman */
.spoiler {
  border-top: 2px outset lightgrey;
  border-bottom: 2px outset lightgrey;
  width: 80%;
  margin-left: 5%;
}

/* Universal Special Link Styles -Dantman */
/*Allpages redirect -Splarka & Dantman */
.allpagesredirect a {
  background: url("https://images.wikia.nocookie.net/anime/en/images/5/5c/Allpagesredirect.gif") center left no-repeat;
  padding-left: 13px;
  font-style: italic;
  font-size: 90%;
  color: grey;
}

/* Collapsible Edittools - Dantman */
#edittools {
  position: relative;
}

#edittools_button {
  position: absolute;
  right: 5px;
}

/* Replace the thumb's white border with a invisible margin to avoid annoyances when placed on colored backgrounds -Dantman */
div.tright {
  margin: 0.5em 0 0.8em 1.4em !important;
  border: 0px;
}

div.tleft {
  margin: 0.5em 1.9em 0.8em 0 !important;
  border: 0px;
}

/* Rating Template -Dantman */
.ratebox,
.ratebox .on,
.ratebox .off,
.ratebox .numberdisplay {
  float: left;
  border: 0px;
  width: 75px;
  height: 15px;
  background: transparent top left repeat-x;
}

.ratebox .off {
  background: url(https://images.wikia.nocookie.net/common/skins/slate/images/icon_article_star.png) top left repeat-x;
}

.ratebox .on {
  background: url(https://images.wikia.nocookie.net/common/skins/slate/images/icon_article_starFilled.png) top left repeat-x;
  margin-top: -15px;
}

.ratebox .numberdisplay {
  text-align: center;
  margin-top: -17px;
  color: #999;
  font-weight: bold;
}

/* Icon Classes. -Dantman */
.texticon {
  font-style: italic;
  font-weight: bold;
  color: #666666;
  font-size: 95%;
}

/* Remove the Unreasonably large whitespace around the Dismiss SiteNotice link. -Dantman */
#siteNotice > table > tbody > tr > td + td {
  width: 1%;
}

/* Questionable Outline. -Dantman */
.questionable {
  border: 1px dotted #AAAAFF;
}

/*</pre>*/
/*<big>'''[[MediaWiki:Anime-Forum.css]]'''</big>*/
/*<pre>*/
/* Forum formatting -Algorithm & -Splaka */
.forumheader {
  border: 1px solid #aaa;
  background-color: #f9f9f9;
  margin-top: 1em;
  padding: 12px;
}

.forumlist td.forum_edited a {
  color: black;
  text-decoration: none;
}

.forumlist td.forum_title a {
  padding-left: 20px;
}

.forumlist td.forum_title a.forum_new {
  font-weight: bold;
  background: url(/images/4/4e/Forum_new.gif) center left no-repeat;
  padding-left: 20px;
}

.forumlist td.forum_title a.forum_new:visited {
  font-weight: normal;
  background: none;
  padding-left: 20px;
}

.forumlist th.forum_title {
  padding-left: 20px;
}

/*</pre>*/
/*<big>'''[[MediaWiki:Anime-Recentchanges.css]]'''</big>*/
/*<pre>*/
/* Float Namespace selector to right and modify it a bit. */
div.namespacesettings {
  margin-top: -75px;
  margin-right: -5px;
  float: right;
  clear: right;
  padding: 0.3em 0.5em 0em 0.5em;
  width: auto;
  border: 1px dotted #AAAAAA;
}

div.namespacesettings .namespaceselector {
  float: left;
  clear: left;
  padding: 0px;
  margin: 0px;
  font-size: 95%;
}

div.namespacesettings #nsselect {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

div.namespacesettings input[type=submit] {
  float: left;
  padding: 0px;
  margin: 0em 0em 0em 0.25em;
  font-size: 95%;
}

div.namespacesettings label {
  float: left;
  clear: right;
  display: block;
}

div.namespacesettings #nsinvert {
  float: left;
  clear: left;
  display: block;
}

/* Drop the Enhanced Recent Changes down. -Dantman */
.page-Special_Recentchanges .rcoptions a:last-child {
  display: table;
}

/*</pre>*/
/********* Anime-Common.css end *************************************************/
/********* table *************************************************/
.WikiaTable,
.article-table {
  background: rgba(var(--theme-page-dynamic-color-1--rgb), 0.02);
  border: 0 var(--theme-border-color);
  border-collapse: collapse;
  margin: 1em 1em 1em 0;
}

.WikiaTable td,
.WikiaTable th,
.article-table td,
.article-table th {
  border-bottom: 1px solid var(--theme-border-color);
  padding: 6px 12px;
}

.WikiaTable th,
.article-table th {
  background: rgba(var(--theme-page-dynamic-color-1--rgb), 0.05);
  text-align: left;
}

.WikiaTable caption,
.article-table caption {
  font-weight: 700;
}

.wikitable {
  background: var(--theme-page-background-color);
  border: 1px solid var(--theme-border-color);
}
.wikitable > tr > th, .wikitable > * > tr > th {
  background: var(--theme-page-background-color--secondary);
  border: 1px solid var(--theme-border-color);
}
.wikitable > tr > td, .wikitable > * > tr > td {
  border: 1px solid var(--theme-border-color);
}

/********* main page *************************************************/
/* MAIN PAGE DESIGN CSS */
#mainpage-wrap #t-cite,
#mainpage-wrap #footer-info-lastmod,
#mainpage-wrap #siteSub,
#mainpage-wrap #contentSub,
#mainpage-wrap h1.firstHeading {
  display: none !important;
}

#mainpage-wrap li.gallerybox div.thumb {
  border: 0;
  background: none;
}

#mainpage-wrap li.gallerybox div.gallerytext {
  text-align: center;
}

#mainpage-wrap ul.gallery {
  margin: 0;
  padding: 0;
  text-align: center;
}

.theme-light,
.skin-oasis {
  --template-background-color-1: #add8e6; /* LBlue*/
  --template-background-color-1--rgb: 173, 216, 230;
  --template-background-color-2: #f5deb3; /* Wheat*/
  --template-background-color-2--rgb: 245, 222, 179;
  --template-background-color-3: #b0d67b; /* Green*/
  --template-background-color-3--rgb: 176, 214, 123;
}

.theme-dark {
  --template-background-color-1: #76bdd5; /* LBlue*/
  --template-background-color-1--rgb: 118, 189, 213;
  --template-background-color-2: #e8b34f; /* Wheat*/
  --template-background-color-2--rgb: 232, 179, 79;
  --template-background-color-3: #728951; /* Green*/
  --template-background-color-3--rgb: 114, 137, 81;
}

/* Background for templates with Tables inside Tables*/
.themebackground {
  background-color: #fff;
}
.theme-dark .themebackground {
  background-color: #1e1f1f;
}

/* Background for TableColorPallet*/
.themeColorPallet_1 {
  background-color: var(--template-background-color-1);
}

.themeColorPallet_2 {
  background-color: var(--template-background-color-2);
}

.themeColorPallet_3 {
  background-color: var(--template-background-color-3);
}

/* Color for Table that displays the lives challenges */
.challengetable td .wds-tabber .wds-tabs__wrapper .wds-tabs .wds-tabs__tab {
  color: #eeeeee;
}

/* Color for the Custom Collapsible Button */
.theme-dark .customCollapsible {
  background: linear-gradient(#393737, #3d3945);
  color: #eeeeee;
}

.theme-light .customCollapsible {
  background: linear-gradient(#f8cb34, #ffdd7a);
  color: #511e00;
}

/* Color for a dark-mode friendly Wikitable (see https://fantasy-life.fandom.com/wiki/Origin_Island#Pricing) - 26.02.2023 */
.theme-light .modeCell {
  background: #ffffff;
}

.theme-light .modeTable {
  border: 3px solid #ffdd7a;
  background: #bbeeff;
  color: #000000;
}

.theme-dark .modeCell {
  background: #2B3134;
}

.theme-dark .modeTable {
  background: #3a3a3a;
  border: 3px solid #2B3134;
  color: #e6e6e6;
}

/* Color for Dark Mode friendly Template:World/nav */
.theme-dark .modeWorldNavbox {
  background: #626262;
  border: 3px solid #3a3a3a;
}

.theme-dark .modeWorldNavbox .colorB {
  background: #494949;
}

.theme-dark .modeWorldNavbox .colorA {
  background: #555555;
}

.theme-light .modeWorldNavbox {
  background: #d49f48;
  border: 3px solid #894b00;
}

.theme-light .modeWorldNavbox .colorB {
  background: #bb8023;
}

.theme-light .modeWorldNavbox .colorA {
  background: #efd48b;
}

/* Making color template able to handle dark and light mode */
.theme-light .onlyDark {
  display: none;
}

.theme-dark .onlyLight {
  display: none;
}

/* Template:Life classes Dark Mode + Light Mode design */
.theme-light .LifeClassesColor {
  color: #0e191a;
}

.theme-light .LifeClassesBackground {
  background: #b2ddfb;
}

.theme-light .LifeClassesHeader {
  border: 2px solid #0188d1;
  background: #e4f5ff;
}

.theme-dark .LifeClassesColor {
  color: #dddddd;
}

.theme-dark .LifeClassesBackground {
  background: #333333;
}

.theme-dark .LifeClassesHeader {
  border: 2px solid #888888;
  background: #202020;
}

/* For the Forum Header. This class is actually defined in the imported stylesheet but only for light mode. */
.theme-dark .forumheader {
  border: 1px solid #555;
  background-color: #333;
}

/* Template:Skills Table */
.theme-dark .SkillTable {
  background: #333;
  border: 2px solid #222;
}

.theme-dark .SkillTableHeader {
  background: #3a3a3a;
  color: #ddd;
}

.theme-light .SkillTable {
  background: #e5d582;
  border: 2px solid #73400d;
}

.theme-light .SkillTableHeader {
  background: #c6b56b;
  color: #411919;
}

/* Forum last Edit date column */
.theme-dark .forumlist td.forum_edited a {
  color: #ddd;
}

/* Inputbox Button */
.createboxInput[type=text]:placeholder-shown ~ .createboxButton, .mw-inputbox-createbox:required:invalid ~ .mw-ui-button {
  background-color: #555;
  border-color: #aaa;
}

.theme-light .noticeLDMode {
  border: 1px solid #aaa;
  background-color: #fee;
}

.theme-dark .noticeLDMode {
  border: 1px solid #666;
  background-color: #444;
}

/* Coloring for Template:Gear/Automatic as implemented in Module:Gear */
.theme-light .gearInfoTable {
  background: #f8cb34;
  border: 2px solid #511e00;
}

.theme-dark .gearInfoTable {
  background: #393737;
  border: 2px solid #999999;
}

.theme-light .gearInfoTableIconRow {
  background: #ac6219;
}

.theme-dark .gearInfoTableIconRow {
  background: #242424;
}

.theme-light .gearInfoTableIconRowName {
  color: white;
}

.theme-dark .gearInfoTableIconRowName {
  color: #d3d3d3;
}

.theme-light .gearInfoTableDesc {
  background: #ffffff;
}

.theme-dark .gearInfoTableDesc {
  background: #2B3134;
}

.theme-light .gearInfoTableHeader {
  background: #ffdd7a;
}

.theme-dark .gearInfoTableHeader {
  background: #363636;
}

.theme-light .gearInfoTableUsable {
  background: #f8cb34;
}

.theme-dark .gearInfoTableUsable {
  background: #393737;
}

.theme-dark .invertOnDark .gearInfoTableUsable {
  background: #c6c8c8;
}

.theme-light .gearInfoTableCell {
  background: #ffe2ab;
}

.theme-dark .gearInfoTableCell {
  background: #393737;
}

/* Class to invert color in Dark Mode */
.theme-dark .invertOnDark {
  filter: invert(1);
}

/* Stub Template */
.theme-light .stubMode {
  background: #d4ced0;
  border: 2px solid #4c4f60;
}

.theme-dark .stubMode {
  background: #222;
  border: 2px solid #444;
}

/* Template:Languages */
.theme-light .modeTable .SkillTableHeader {
  background: #B3B3FF;
}

.theme-light .languageTable {
  background: #8080FF;
  border: 2px solid blue;
}

/* Yuelia Page Flutter Table */
.theme-light .flutterModeTable {
  background: #ab3533;
  border: 3px solid #b9a475;
}

.theme-light .flutterMode {
  background: #d66070;
}

.theme-light .flutterTableCell {
  background: #fcfae1;
  border: 1px solid #b6ad74;
}

.theme-dark .flutterModeTable {
  background: #333;
  border: 3px solid #333;
}

.theme-dark .flutterMode {
  background: #292929;
}

.theme-dark .flutterTableCell {
  background: #444;
  border: 1px solid #333;
}

/* Template:Incomplete */
.theme-light .incMode {
  background: #ec9fe3;
  border: 2px solid #6231a5;
}

.theme-dark .incMode {
  background: #222;
  border: 2px solid #444;
}

.theme-light .incImage {
  background: #d168c5;
}

/* Mainpage Dark Mode */
.theme-light .mainPageMode {
  background: #ffe2ab;
  border: 2px solid #511e00;
}

.theme-light .mainPageModeGrad {
  background: linear-gradient(#f8cb34, #ffdd7a);
}

.theme-light .mainPageNav {
  background: #ffebc4;
}

.theme-dark .mainPageMode {
  background: #393737;
  border: 2px solid #666;
}

.theme-dark .mainPageModeGrad {
  background: linear-gradient(#393737, #3d3945);
}

.theme-dark .mainPageNav {
  background: #3d3945;
}

/* Game Differences Page */
.theme-light .gameDifferences {
  background: #848A8D;
}

.theme-light .gameDifferencesTable {
  background: #2B3134;
  border: 3px solid #424B50;
}

.theme-dark .gameDifferences {
  background: #444;
}

.theme-dark .gameDifferencesTable {
  background: #555;
  border: 3px solid #222;
}

.portable-infobox {
  border: 1px solid var(--pi-border-color);
}
.portable-infobox .pi-title, .portable-infobox .pi-header {
  text-align: center;
}
.portable-infobox .pi-data {
  border-top-style: solid;
  border-top-width: 1px;
  border-bottom: 0;
}
.portable-infobox .pi-image + .pi-data, .portable-infobox .pi-image-collection + .pi-data, .portable-infobox .pi-secondary-background + .pi-data, .portable-infobox > .pi-data:first-child, .portable-infobox .pi-secondary-background + * > .pi-data:first-child {
  border-top: 0;
}
.portable-infobox .pi-data-label {
  font-weight: bold;
}
.portable-infobox code {
  border: 0;
  background: unset;
}
.portable-infobox .pi-secondary-background, .portable-infobox .pi-title {
  background: var(--pi-secondary-background);
  color: var(--pi-secondary-background--label);
}
.portable-infobox .pi-section-navigation .pi-section-tab, .portable-infobox .pi-media-collection .pi-tab-link {
  border: 0;
  border-bottom: 2px solid transparent;
  font-weight: bold;
}
.portable-infobox .pi-section-navigation .pi-section-tab.pi-section-active,
.portable-infobox .pi-section-navigation .pi-section-tab.current,
.portable-infobox .pi-media-collection .pi-tab-link.current {
  background: none;
  border-bottom-color: var(--theme-link-color);
  color: var(--theme-link-color);
}

.wikiEditor-ui-toolbar {
  color: #000;
}

.toccolours {
  background-color: unset;
  border: unset;
  font-size: unset;
  padding: unset;
}
Personal tools

Navigation menu

Namespaces

Views

Navigation

Fantasy Life

Fantasy Life Online

Media

Portals

Tools

MediaWiki:Common.css
