MediaWiki:Common.css: Difference between revisions

Revision as of 11:02, 14 October 2023

/***********************************************************************************************************
 * 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(97, 30, 0, 0.15);
  /* 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: none;
  --pi-border-color: #535663;
  --pi-secondary-background: #797a8e;
  --pi-secondary-background--label: #000;
  --pi-item-spacing: 8px 10px;
}
: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);
}

/* 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 .box {
  border: 1px solid var(--theme-border-color);
  border-radius: var(--theme-box-border-radius);
  padding: 1.5em;
}
#mainpage-wrap h2 {
  margin-top: 0;
  border-bottom: 0;
}
#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: 3 3 600px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#mainpage-wrap .content-wrap .r {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#mainpage-wrap .box.header {
  text-align: center;
}
#mainpage-wrap .box.header .welcome h2 {
  font-size: 2em;
}
#mainpage-wrap .box.header ul {
  display: inline-flex;
  align-items: center;
  margin: 1.5em auto 0.5em;
  gap: 1em;
}
#mainpage-wrap .box.header ul li {
  list-style: none;
}
@media (max-width: 600px) {
  #mainpage-wrap .box.header img {
    width: 32px;
    height: auto;
  }
}
#mainpage-wrap .box.game > div {
  display: flex;
  gap: 1em;
  align-items: center;
}
@media (max-width: 640px) {
  #mainpage-wrap .box.game > div {
    flex-direction: column;
  }
}
#mainpage-wrap .box.game img {
  width: 100%;
  height: auto;
  max-width: 320px;
  max-height: 180px;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
}
#mainpage-wrap .box.game p {
  font-size: 16px;
  line-height: 28px;
}
#mainpage-wrap .box.feature {
  font-size: 18px;
}
@media (max-width: 600px) {
  #mainpage-wrap .box.feature {
    font-size: 16px;
  }
}
#mainpage-wrap .box.feature ul {
  margin: 0.5em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  justify-items: start;
  gap: 1em 1.5em;
}
@media (max-width: 600px) {
  #mainpage-wrap .box.feature ul {
    gap: 8px;
  }
}
#mainpage-wrap .box.gallery ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0;
}
#mainpage-wrap .box.gallery ul li {
  flex: 1 1 40%;
  list-style: none;
}
@media (max-width: 1200px) and (min-width: 720px) {
  #mainpage-wrap .box.gallery ul li {
    flex: 1 1 22%;
  }
}
#mainpage-wrap .box.gallery ul li img {
  width: 100%;
  height: auto;
}
#mainpage-wrap .box.gallery img {
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.25);
}

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

.portable-infobox {
  border: 1px solid var(--pi-border-color);
}

.wikiEditor-ui-toolbar {
  color: #000;
}

.toccolours {
  background-color: unset;
  border: unset;
  font-size: unset;
  padding: unset;
}