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 {
  --trwiki-theme-gdf-color: #293748;
  --trwiki-theme-dyn-color: #482937;
  --trwiki-quote-color: var(--trwiki-theme-gdf-color);
  --trwiki-ability-icon-glow-color: #06acd0;
  --icon-category: 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");
}
 
:root,
.theme-gdf {
  /* body style */
  --theme-body-background-color: #181621;
  --theme-body-background-color--rgb: 24,22,33;
  --theme-body-background-color--secondary: #211e2d;
  --theme-body-background-color--secondary--rgb: 33,30,45;
  --theme-body-background-image: url(/images/8/80/Site-background.jpg);
  --theme-body-background-image-opacity: 100%;
  --theme-body-text-color: #fff;
  --theme-body-text-color--rgb: 255,255,255;
  --theme-body-text-color--hover: #cccccc;
  --theme-body-text-opacity-factor: 0.7;
  /* page style */
  --theme-page-accent-mix-color: #1d2935;
  --theme-page-background-color: #1a2432;
  --theme-page-background-color--rgb: 26,36,50;
  --theme-page-background-color--secondary: #3c4551;
  --theme-page-background-color--secondary--rgb: 60,69,81;
  --theme-page-headings-font: 'Rubik';
  --theme-page-text-color: #e6e6e6;
  --theme-page-text-color--rgb: 230,230,230;
  --theme-page-text-color--hover: #b3b3b3;
  --theme-page-text-mix-color: #80858c;
  --theme-page-text-mix-color-95: #242e3b;
  /* accent style */
  --theme-accent-color: #202d38;
  --theme-accent-color--rgb: 32,45,56;
  --theme-accent-color--hover: #456178;
  --theme-accent-label-color: #fff;
  /* notice style */
  --theme-alert-color: #e2001b;
  --theme-alert-color--rgb: 226,0,27;
  --theme-alert-color--hover: #fe485e;
  --theme-alert-color--secondary: #fe586c;
  --theme-alert-label: #fff;
  --theme-alert-label-color: #fff;
  --theme-warning-color: #cf721c;
  --theme-warning-color--rgb: 207,114,28;
  --theme-warning-color--secondary: #dc791d;
  --theme-warning-label: #000;
  --theme-success-color: #0d8134;
  --theme-success-color--rgb: 13,129,52;
  --theme-success-color--secondary: #11aa44;
  --theme-success-label: #fff;
  --theme-success-label-color: #fff;
  /*** top site logo ***/
  --theme-site-logo-image: url(/images/e/e6/Site-logo.png);
  --theme-site-logo-filter: none;
  --theme-site-logo-width: calc(1440px/3);
  --theme-site-logo-height: calc(480px/3);
  /*** site background ***/
  --theme-site-background: #181621 url(/images/8/80/Site-background.jpg) center center / cover no-repeat fixed;
  /* common "box" style */
  --theme-box-back-backdrop-filter: none;
  --theme-box-border-radius: 0;
  --theme-box-border-width: 1px;
  --theme-box-border-style: solid;
  --theme-box-border-color: #4d555f;
  --theme-box-shadow: none;
  --theme-box-shadow2: none;
  --theme-box-back-background: rgba(var(--theme-page-background-color--rgb), 0.8);
  /* be used in multi-layer background, so we can't simply use background-color */
  --theme-box-background: linear-gradient(rgba(var(--theme-page-background-color--rgb), 0.9), rgba(var(--theme-page-background-color--rgb), 0.9));
  --theme-background: var(--theme-box-background), var(--theme-box-back-background);
  /*** text color ***/
  --theme-text-color: #e6e6e6;
  --theme-text-color--rgb: 230, 230, 230;
  --theme-text-color--hover: var(--theme-text-color);
  --theme-text-color-note: #bbb;
  --theme-text-color-em: #3ede5e;
  --theme-text-mix-color: #7c7c7c;
  --theme-text-mix-color-95: #1c1c1c;
  --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: #60a8d4;
  --theme-link-color--rgb: 96,168,212;
  --theme-link-color--hover: #b0d3e9;
  --theme-link-label-color: var(--theme-accent-label-color);
  --theme-link-color--visited: var(--theme-link-color);
  --theme-link-color-redlink: #f11b36;
  /* default color for icons */
  --theme-icon-color: var(--theme-link-color);
  --theme-icon-color--hover: var(--theme-link-color--hover);
  --theme-icon-color-redlink: var(--theme-link-color-redlink);
  --theme-icon-general-filter: invert(100%);
  --theme-icon-to-link-filter: invert(77%) sepia(31%) saturate(311%) hue-rotate(174deg) brightness(104%) contrast(102%); /* insert --theme-link-color at https://codepen.io/sosuke/pen/Pjoqqp */
  /* default common color */
  --theme-border-color: #4d555f;
  --theme-border-color--rgb: 77,85,95;
  --theme-border-color-accent: #456178;
  --theme-highlight-background: rgba(176, 211, 233, 0.15);
  /* dropdown menu */
  --theme-dropdown-border: 1px solid var(--theme-border-color-accent);
  --theme-dropdown-background: var(--theme-background);
  /* for wide table */
  --theme-wide-table-shadow-color: #999;
  /** notification **/
  --theme-notice-red-text-color: #ff001f;
  --theme-notice-orange-text-color: #ffab5b;
  /* dynamic colors for wiki editor */
  --theme-body-dynamic-color: #fff;
  --theme-body-dynamic-color--rgb: 255, 255, 255;
  --theme-body-dynamic-color--inverted: #000;
  --theme-body-dynamic-color--inverted--rgb: 0, 0, 0;
  --theme-body-dynamic-color--secondary: #e6e6e6;
  --theme-body-dynamic-color--secondary--rgb: 230, 230, 230;
  --theme-body-dynamic-color--secondary--inverted: #191919;
  --theme-body-dynamic-color--secondary--inverted--rgb: 11, 11, 11;
  --theme-content-background-color: #111111;
  --theme-content-background-color--rgb: 17,17,17;
  --theme-content-background-color--secondary: #161618;
  --theme-content-background-color--secondary--rgb: 22,22,24;
  --theme-content-border-color: #464646;
  --theme-content-text-color: #e6e6e6;
  --theme-content-text-color--rgb: 230, 230, 230;
  --theme-content-link-color: #4a89e4;
  --theme-content-link-color--rgb: 74,137,228;
  --theme-content-link-label-color: #000;
  --theme-content-redlink-color: #F43B34;
  --theme-content-text-mix-color: #7c7c7c;
  --theme-content-text-mix-color-95: #1c1c1c;
  --theme-content-dynamic-color: #fff;
  --theme-content-dynamic-color--rgb: 255, 255, 255;
  --theme-content-dynamic-color--inverted: #000;
  --theme-content-dynamic-color--inverted--rgb: 0, 0, 0;
  --theme-content-dynamic-color--secondary: #e6e6e6;
  --theme-content-dynamic-color--secondary--rgb: 230, 230, 230;
  --theme-content-dynamic-color--secondary--inverted: #191919;
  --theme-content-dynamic-color--secondary--inverted--rgb: 11, 11, 11;
  /* portable infobox */
  --pi-background: rgba(var(--theme-page-background-color--secondary--rgb), 0.1);
  --pi-border-color: var(--theme-border-color);
  --pi-secondary-background: var(--theme-accent-color);
  --pi-secondary-background--label: var(--theme-accent-label-color);
  --pi-item-spacing: 8px 10px;
}

.theme-dynasty {
  --theme-page-background-color: #230e0c;
  --theme-page-background-color--rgb: 35, 14, 12;
  --theme-page-background-color--secondary: #392624;
  --theme-page-background-color--secondary--rgb: 57, 38, 36;
  --theme-accent-color: #402431;
  --theme-accent-color--rgb: 64,36,49;
  --theme-accent-color--hover: #894e69;
  --theme-body-background-color: #1f0f0f;
  --theme-border-color: #843732;
  --theme-border-color--rgb: 132, 55, 50;
  --theme-link-color: #e35c36;
  --theme-link-color--hover: #e77a5c;
  --theme-link-color--visited: var(--theme-link-color--hover);
  --theme-site-logo-image: url(/images/d/d6/Site-logo-dyn.png);
  --theme-site-background: #181621 url(/images/e/e8/Site-background-dyn.jpg) center center / cover no-repeat fixed;
  --theme-icon-to-link-filter: invert(61%) sepia(73%) saturate(4276%) hue-rotate(334deg) brightness(100%) contrast(102%);
  --trwiki-quote-color: var(--trwiki-theme-dyn-color);
  --trwiki-ability-icon-glow-color: #ff4628;
}

.theme-light {
  --theme-accent-color: #293A48;
  --theme-accent-label-color: #fff;
  --theme-text-color: #333333;
  --theme-text-color--rgb: 230,230,230;
  --theme-body-background-color: #a8adad;
  --theme-body-background-color--rgb: 168,173,173;
  --theme-page-background-color: #d3d9d9;
  --theme-page-background-color--rgb: 211,217,217;
  --theme-page-background-color--secondary: #e1e5e5;
  --theme-page-background-color--secondary--rgb: 225,229,229;
  --theme-border-color: #a5aaaa;
  --theme-border-color--rgb: 165,170,170;
  --theme-link-color: #0d6fba;
  --theme-link-color--rgb: 13,111,186;
  --theme-link-color--hover: #06365a;
  --theme-link-label-color: #fff;
  --theme-icon-to-link-filter: none;
}

/* main content box */
/* sidebar */
#mw-panel {
  --theme-link-color: var(--theme-text-color);
  --theme-link-color--hover: var(--theme-link-color);
  --theme-link-color--visited: 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-link-color: var(--theme-text-color);
  --theme-background: var(--theme-box-background);
  --theme-border-color: var(--theme-border-color-accent);
  --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 styling */
.references {
  font-size: 90%; /* References smaller text than main */
}
ol.references li:target, sup.reference:target {
  background-color: rgba(var(--theme-link-color--rgb), .2);
}

/* 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: 160px; /* 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));
  --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: 10pt;
  --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 */
  align-items: center;
  background: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
  cursor: pointer;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  line-height: 18px;
  margin: 0;
  padding: 6px 10px;
}

/* 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-box-back-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 .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;
    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 {
    border-bottom: 0;
    background: none;
    position: absolute;
    right: var(--layout-box-gap);
    /* inner height of #mw-panel ( line height of .vector-menu-heading(18px) + padding-top of .vector-menu-heading(9px) + padding-bottom of .vector-menu-heading(0px) ) */
    --layout-height-of-panel: 36px;
    /* outer height of #p-search>#searchform ( css height of .vector-search-box-input ) */
    --layout-height-of-search-form: 26px;
    top: calc(0px - var(--theme-box-border-width) * 2 - var(--layout-box-gap) - var(--layout-height-of-panel) / 2 - var(--layout-height-of-search-form) / 2); /* offset */
    z-index: 2;
  }
  
  .vector-search-box-inner {
    width: 50vw;
  }
  
  #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) * 0.5 + 20px);
    --layout-box-gap: 6px;
    --search-height: 35px; /* space for search form. */
  }

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

  /* move search bar to bottom */
  #mw-panel {
    margin-bottom: var(--search-height);
    box-shadow: var(--theme-box-shadow2);
    border-bottom: 0;
  }
  #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);
    box-shadow: none;
    padding: var(--layout-box-gap);
    padding-top: 5px;
    top: -36px; /* offset */
    left: 0;
    right: auto;
    width: 100%;
    z-index: auto;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
  .vector-search-box-inner {
    width: 100%;
    max-width: unset;
  }
} /* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
  #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-panel .portal .vector-menu-heading {
    font-size: 14px;
  }
  #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) {
  /* 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;
  }
}
@media screen and (max-width: 540px) {
  #mw-panel .portal .vector-menu-heading::after {
    display: none;
  }
  #mw-panel #p-navigation .vector-menu-heading-label {
    display: none;
  }
  #mw-panel #p-navigation .vector-menu-heading::before {
    content: "";
    display :block;
    pointer-events: none;
    width: calc(1em + 2px + 10px);
    height: calc(1em + 2px + 10px);
    margin: -5px;
    --mask: var(--icon-category) no-repeat;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    -webkit-mask-size: calc(1em + 6px) calc(1em + 6px);
    mask-size: calc(1em + 6px) calc(1em + 6px);
    -webkit-mask-position: center calc(50% + 1px);
    mask-position: center calc(50% + 1px);
    background-color: var(--theme-heading-color);
  }
} /* screen and (max-width:600px) */
@media screen and (max-width: 450px) {
  :root {
    --layout-logo-scale: calc(2/5);
  }
  #mw-panel .vector-menu-heading-label {
    font-size: 13px;
  }
  #mw-panel #p-tb {
    display: none;
  }
} /* 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;
  z-index: 2;
}

/***********************************************************************************************************
 * 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: var(--theme-page-background-color);
  border-radius: var(--theme-box-border-radius);
  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 {
  background: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
  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-accent-label-color);
  margin: 0 6px 0 0;
}
.toc .toctitle #mw-toc-heading {
  color: var(--theme-accent-label-color);
}
.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;
  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;
  border: 1px solid var(--theme-border-color);
}

/** gallery **/
.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);
}
#mainpage-wrap .box > div {
  background: rgba(var(--theme-body-background-color--rgb), 0.4);
  font-size: small;
  padding: 12px;
}
#mainpage-wrap h2 {
  margin: 0;
  border-bottom: 0;
  line-height: 2;
  text-align: center;
  background: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
  font-size: 18px;
  font-weight: bold;
}
#mainpage-wrap .content-wrap {
  display: flex;
  gap: 1em;
  align-items: stretch;
  margin: 1em auto;
}
@media (max-width: 1200px) {
  #mainpage-wrap .content-wrap {
    flex-direction: column;
  }
}
#mainpage-wrap .content-wrap .l {
  flex: 4 4 600px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#mainpage-wrap .content-wrap .r {
  flex: 1 1 280px;
  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;
  }
}


/***********************************************************************************************************
 * dark theme tweak
 ***********************************************************************************************************/
#filetoc, code,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.mw-search-profile-tabs, #mw-searchoptions,
.mw-datatable td {
  background: none;
}

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

#mw-allmessagestable tbody:hover td {
  background: var(--theme-highlight-background);
}

li.gallerybox div.thumb {
  background: var(--theme-box-background);
  border: 1px solid var(--theme-border-color);
}

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>');
}

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

.oo-ui-tabSelectWidget-framed,
#preferences .mw-htmlform-submit-buttons {
  background: none;
}

.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;
}

table.diff .diff-context {
  background: rgba(248, 249, 250, 0.15);
  color: var(--theme-text-color);
}
table.diff .diff-addedline .diffchange {
  background: rgba(74, 166, 255, 0.6);
}
table.diff .diff-deletedline .diffchange {
  background: rgba(255, 198, 63, 0.6);
}

div.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
  background: #231c3b;
}

.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-iconElement-icon {
  filter: invert(1);
}
.mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagItemWidget .oo-ui-iconElement-icon {
  filter: none;
}
.mw-rcfilters-ui-filterTagMultiselectWidget .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
  color: #ddd;
}

div.thumbinner {
  background: none;
  border: 1px solid var(--theme-border-color);
}

#pagehistory li.selected {
  background: rgba(40, 40, 40, 0.6);
  color: var(--theme-text-color);
}

#mw-indicator-mw-helplink a {
  background: none;
  position: relative;
}
#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);
}

.mw-plusminus-pos {
  color: #7cf56e;
}
.mw-plusminus-neg {
  color: #ff9a9b;
}
.autocomment, .autocomment a, .autocomment a:visited {
  color: var(--theme-text-color-note);
}

.mw-message-box-warning {
  background-color: rgba(54, 44, 10, 0.5);
  border-color: #fc3;
  color: #fff;
}

fieldset {
  border-color: #ccc;
}

.mw-highlight pre, .mw-highlight code, .mw-highlight .mw-code {
  color: #ccc;
}
.mw-highlight .nv {
  color: #01C2EC;
}

/* main page welcome */
#mf-welcome {
  font-weight: bold;
  margin: auto;
  width: 750px;
}
#mf-welcome h1 {
  font-size: 20pt;
  font-weight: bold;
}
@media screen and (max-width:900px) {
  #mf-welcome {
    width: 90%;
  }
}

/* main page contents */
#mf-gamelogo img {
  height: auto;
  width: 500px;
}
#mf-contents {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
#mf-contents .mf-contents-header {
  border-bottom: 2px solid var(--theme-border-color);
  font-size: 120%;
  font-weight: bold;
  width: 100%;
}
#mf-contents .mf-contents-section {
  display: flex;
  flex-direction: row;
  margin: 0 0.4em;
}
#mf-contents .mf-contents-box {
  position: relative;
  border: 1px solid var(--theme-border-color);
  margin: 1em 0.5em;
}
#mf-contents .mf-contents-img img {
  max-width: 100%;
  height: auto;
}
#mf-contents .mf-contents-img img:hover {
  filter: brightness(150%);
  transition: 0.3s;
}
#mf-contents .mf-contents-label {
  background-color: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
  position: absolute;
  left: 0px;
  bottom: 0px;
  font-size: 90%;
  padding: 0 5px;
}
@media screen and (max-width: 640px) {
  #mf-gamelogo img {
    width: 100%;
  }
  #mf-contents {
    flex-direction: column;
  }
  #mf-contents .mf-contents-section {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  #mf-contents .mf-contents-box {
    width: 46%;
  }
}

/* navboxBuilder */
.navbox {
  line-height: 120%;
  margin: 0.5em 0;
  clear: both;
  overflow: hidden;
}
.navbox-table-wrapper {
  margin: -3px;
  margin-top: 0;
  overflow: hidden;
}
.navbox-table-wrapper:first-child, .navbox-section-wrapper:first-child {
  margin-top: -3px;
}

.navbox-table {
  border-collapse: separate;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-spacing: 3px;
}
.navbox-table td {
  margin: 0;
  padding: 0;
}
.navbox-section {
  margin: 3px 0;
  overflow: hidden;
}

.navbox-section:first-child {
  margin-top: 0;
}
.navbox-section:last-child {
  margin-bottom: 0;
}

.navbox-title {
  font-size: 110%;
  text-align: center;
  font-weight: bold;
  padding: 0.2em 2em;
  position: relative;
}

.navbox-header {
  text-align: center;
  font-weight: bold;
  padding: 0.2em 2em;
  position: relative;
}

.navbox-template-links {
  line-height: 190%;
  font-size: 80%;
  font-weight: normal;
  text-align: left;
  width: 5em;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0.6em;
}

.navbox > .mw-collapsible-toggle, .navbox-section > .mw-collapsible-toggle {
  float: none;
  text-align: center;
  cursor: pointer;
}
.navbox > .mw-collapsible-toggle::after, .navbox-section > .mw-collapsible-toggle::after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 50%;
  right: 0.6em;
  margin-top: -2px;
  border-color: #000;
  border-color: currentColor;
  border-style: solid;
  border-width: 2px 2px 0 0;
  height: 4px;
  width: 4px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.navbox > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::after, .navbox-section > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::after {
  margin-top: -4px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}

.navbox-above, .navbox-below {
  text-align: center;
  padding: 0;
}
.navbox-list {
  text-align: left;
  padding: 0;
  vertical-align: top;
}
.navbox-group, .navbox-subgroup {
  text-align: center;
  padding: 0;
}
.navbox-image {
  width: 1px;
  vertical-align: top;
}

.navbox-table .navbox-padding {
  padding: 0.2em 0.3em;
}
.navbox-table-layout {
  margin: -3px;
  margin-top: 0;
}

.navbox-table-layout .navbox-group,
.navbox-table-layout .navbox-subgroup {
  text-align: right;
  white-space: nowrap;
  width: 1px;
}
.navbox-nogroup {
  text-align: center;
}
.navbox-horizontal-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-right: -3px;
}

.navbox-col {
  flex: 1 0 auto;
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.navbox-col .navbox-group {
  text-align: center;
  margin-bottom: 3px;
  margin-right: 3px;
}
.navbox-col .navbox-list {
  margin-right: 3px;
  text-align: center;
  flex: 1 0 auto;
}

.navbox-table-wrapper > .table-wide > .table-wide-inner, .navbox-section-wrapper > .table-wide > .table-wide-inner {
  margin: 0;
}
.navbox-table-wrapper > .table-wide::before, .navbox-section-wrapper > .table-wide::before {
  display: none;
}
.navbox-table-wrapper .fl-scrolls, .navbox-table-layout .fl-scrolls {
  overflow: visible !important;
}
.navbox-title.mw-collapsible-toggle a > *, .navbox-header.mw-collapsible-toggle a > * {
  pointer-events: none;
}

/* Fix for plainlist margins within infobox */
.infobox .plainlist ol,
.infobox .plainlist ul {
  margin: 0;
}

/* Portable infobox formatting */
.portable-infobox {
  background: rgba(var(--theme-page-background-color--secondary--rgb), 0.1);
  border: 1px solid var(--theme-border-color);
  border-radius: 0;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
  background: var(--pi-secondary-background);
  color: var(--pi-secondary-background--label);
}
.portable-infobox .pi-title[data-item-name="subtitle"] {
  border-top: 0;
  font-size: small;
  font-weight: bold;
  padding-top: 0;
}
.portable-infobox .pi-item {
  margin: 0;
}
.portable-infobox .pi-item-spacing,
.portable-infobox .pi-header.pi-item-spacing {
  padding: 6px;
}
.portable-infobox .pi-border-color {
  border-color: var(--theme-border-color);
}

/* Portable infobox data formatting */
.portable-infobox .pi-data-value {
  text-align: left;
}
.portable-infobox .pi-data-label {
  font-weight: bold;
  padding-bottom: 0;
  text-align: left;
}

/* Sections in infobox formatting */
.portable-infobox .pi-section-navigation .pi-section-tab:only-child {
  display: none;
}
.portable-infobox .pi-section-navigation,
.portable-infobox .pi-media-collection-tabs {
  padding: 0;
}
.portable-infobox .pi-section-content > .pi-item:last-child {
  border-bottom: none;
}

/* Tabbers in infobox formatting */
.portable-infobox .wds-tabs {
  flex-flow: row wrap;
  overflow-x: visible;
  justify-content: center;
  align-items: center;
}
.portable-infobox .wds-tabs__tab-label {
  height: 30px;
}
.portable-infobox .wds-tabs__arrow-left,
.portable-infobox .wds-tabs__arrow-right {
  visibility: hidden;
}
.portable-infobox .wds-tabs__wrapper.left-arrow-visible .wds-tabs,
.portable-infobox .wds-tabs__wrapper.right-arrow-visible .wds-tabs {
  -webkit-mask-image: none;
}
.pi-section-navigation .pi-section-tab.pi-section-active {
  color: var(--pi-secondary-background--label);
}

/* Plainlist margins within infoboxes */
.portable-infobox .plainlist ol,
.portable-infobox .plainlist ul {
  margin: 0;
}

/* Navbox formatting */
.navbox {
  background: var(--theme-body-background-color);
  padding: 4px;
  font-size: 10pt;
  border: 1px solid var(--theme-border-color);
}
.navbox-title {
  background: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
  padding: 4px;
}
.navbox-header {
  background: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
}

.navbox-table-layout .navbox-group {
  background: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
  text-align: center;
}
.navbox-table-layout .navbox-list {
  background: rgba(var(--theme-page-background-color--secondary--rgb), 0.5);
  width: 84%;
}
.navbox-table-layout .navbox-list ul {
  margin: 4px;
}
.navbox-table-layout .hlist ul ul {
  margin: 0;
  padding: 0;
}

/* Template GDF theme formatting */
.portable-infobox.pi-theme-gdf .pi-title,
.portable-infobox.pi-theme-gdf .pi-header,
.navbox.navbox-theme-gdf .navbox-title,
.navbox.navbox-theme-gdf .navbox-header,
.navbox.navbox-theme-gdf .navbox-table-layout .navbox-group {
  background: var(--trwiki-theme-gdf-color);
}

/* Template Dynasty theme formatting */
.portable-infobox.pi-theme-dynasty .pi-title,
.portable-infobox.pi-theme-dynasty .pi-header,
.navbox.navbox-theme-dynasty .navbox-title,
.navbox.navbox-theme-dynasty .navbox-header,
.navbox.navbox-theme-dynasty .navbox-table-layout .navbox-group {
  background: var(--trwiki-theme-dyn-color);
}

/* Quote settings */
.quote-left, .quote-right {
  color: var(--trwiki-quote-color);
  font-size: 40px;
  font-family: "Arial Black", "Times New Roman", serif;
  font-weight: bold;
  padding: 3px;
  width: 20px;
}
.quote-left {
  vertical-align: top;
  text-align: left;
  line-height: 0.9em;
}
.quote-right {
  vertical-align: bottom;
  text-align: right;
  line-height: 0.1em;
}

/* Sidebox formatting */
.sidebox {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--theme-border-color);
  border-spacing: 8px 0;
  margin-bottom: 4px;
  padding: 4px 0;
  width: calc(100% - 300px);
}
.sidebox th {
  padding: 4px;
}
.sidebox td .cols ul {
  margin-top: 0;
  margin-bottom: 0;
}
.sidebox td .cols ul li {
  break-inside: avoid-column;
}
@media screen and (max-width: 720px) {
  .sidebox {
    width: calc(100%);
  }
}
@media screen and (min-width: 900px) {
  .sidebox td .cols {
    width: 500px;
  }
}

/* Icon glow effect */
.icon-glow img {
  filter: drop-shadow(0 0 3px var(--trwiki-ability-icon-glow-color));
}

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 8 (2016-05-21)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
  margin: 0;
  padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
  margin: 0;
  display: inline;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
  display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
  display: none;
}

/* Generate interpuncts */
.hlist dt:after {
  content: ": ";
}

/**
 * Note hlist style usage differd in
 * the Minerva skin. Remember .hlist is a class defined in core as well! Please check Minerva desktop (and Minerva.css) when changing
 * See https://phabricator.wikimedia.org/T213239
 */
.hlist dd:after,
.hlist li:after {
  content: " · ";
  font-weight: bold;
}

.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
  content: none;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
  content: " (";
  font-weight: normal;
}

.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
  content: ")";
  font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
  counter-reset: listitem;
}

.hlist ol > li {
  counter-increment: listitem;
}

.hlist ol > li:before {
  content: " " counter(listitem) " ";
}

.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
  content: " (" counter(listitem) " ";
}

/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
  line-height: inherit;
  list-style: none none;
  margin: 0;
}

.plainlist ol li,
.plainlist ul li {
  margin-bottom: 0;
}

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

/* Hatnote */
.hatnote {
  font-style: italic;
  margin-left: 2em;
}

/* Article tables */
.article-table {
  background: rgba(255,255,255,0.02);
  border: 0 var(--theme-border-color);
  border-collapse: collapse;
  margin: 1em 1em 1em 0;
}
.article-table td, .article-table th {
  border-bottom: 1px solid var(--theme-border-color);
  padding: 6px 12px;
}
.article-table th {
  background: var(--theme-accent-color);
  color: var(--theme-accent-label-color);
}
.article-table .cols ul {
  margin-top: 0;
}

/* Create account */
#mw-createaccount-join {
  background-color: var(--theme-accent-color);
}
#mw-createaccount-join:hover {
  background-color: var(--theme-accent-color--hover);
}

/* popups */
.mwe-popups, .mwe-popups .mwe-popups-container {
  background: var(--theme-page-background-color--secondary);
}
.mwe-popups .mwe-popups-container,
.mwe-popups .mwe-popups-extract {
  color: var(--theme-text-color);
}
.mwe-popups .mwe-popups-extract[dir='ltr']:after {
  background-image:linear-gradient(to right,rgba(255,255,255,0),var(--theme-background-color--secondary) 50%);
}
.mwe-popups .mwe-popups-extract[dir='rtl']:after {
  background-image:linear-gradient(to left,rgba(255,255,255,0),var(--theme-background-color--secondary) 50%);
}
.mwe-popups .mwe-popups-extract blockquote:after {
  background-image:linear-gradient(to bottom,rgba(255,255,255,0),var(--wiki-content-background-color--secondary) 75%);
}
.mwe-popups .mw-ui-icon {
  filter: var(--theme-icon-general-filter);
}
Personal tools

Navigation menu

Namespaces

Views

Navigation

Tempest Rising

Factions

Gameplay

Tools

MediaWiki:Common.css
