MediaWiki:Common.css: Difference between revisions

Revision as of 12:54, 25 September 2026

/* ==== Reincarnated ==== */
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@font-face {
  font-family: 'Minecraft';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(filepath://JDGraphics_Minecraft.otf) format('opentype'); /**[[File:JDGraphics_Minecraft.otf]]*/
}

:root{
:root {
  --main-page-layout--mobile: "full";
  --main-page-layout--tablet: "left right";
  --main-page-layout--desktop: "left center right";

  --main-page-layout-columns--mobile: 100%;
  --main-page-layout-columns--tablet: 1fr 1fr;
  --main-page-layout-columns--desktop: 1fr 2fr 1fr;
}

    /* start font settings */
    --wiki-body-font-family: sans-serif;
    --wiki-heading-font-family: 'Linux Libertine','Georgia','Times',serif;
    --wiki-sidebar-heading-font-family: sans-serif;
    /* end font settings */
    
      /* start design variables */
	--wiki-sidebar-border-radius:0px; /* these two variables must have units specified even if 0, ignore the warning */
	--wiki-sidebar-portal-spacing:0px;
	/* end design variables */
}

/* the rest of the variables will modify some type of color, either text color, background color, border color, etc. */

:root,
/* Begin light theme, delete from here to "end light theme" if you don't want your wiki to support a light theme (remove from [[Mediawiki:Theme-definitions]] too, or ask wiki.gg staff for help doing this) */
.view-light {
	/**********************
	* Probably edit these * [ LIGHT THEME, if you are making a dark theme edit the other block ]
	***********************/
    --wiki-body-background-color: #F6F6F6;
    --wiki-body-background-color--rgb: 246,246,246;
    --wiki-body-background-image: url("/images/2/26/Background.png"); /* please find the file path by viewing the image directly (click the image from the File: page) */
    
    --wiki-content-background-color: #ffffff;
    --wiki-content-background-color--rgb: 255, 255, 255;
    --wiki-content-background-opacity: 100%;
    --wiki-content-background-color--secondary: #fbfbfb;
    --wiki-content-background-color--secondary--rgb: 251, 251, 251;
    --wiki-content-border-color: #006EE6;
    --wiki-content-border-color--rgb: 167, 215, 249;
    --wiki-content-link-color: #0645ad;
    --wiki-content-link-color--rgb: 6, 69, 173;
    --wiki-content-text-mix-color: #646464;
    --wiki-content-text-mix-color--rgb: 100,100,100;
    --wiki-content-text-mix-color-95: #f3f3f3;
    --wiki-content-text-mix-color-95--rgb: 243,243,243;
    /* [ LIGHT THEME ] */
    --wiki-accent-color: #274690;
    --wiki-accent-color--rgb: 39, 70, 144;
    --wiki-accent-color--hover: #447ff5;
    --wiki-accent-color--hover--rgb: 68, 127, 245; 
    --wiki-accent-label-color: #ffffff;
    --wiki-accent-label-color--rgb: 255, 255, 255;
    --wiki-accent-link-color: #D5FB51;
    --wiki-accent-link-color--rgb: 213, 251, 81;
    
    --wiki-icon-to-link-filter: invert(20%) sepia(93%) saturate(2141%) hue-rotate(210deg) brightness(83%) contrast(103%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */
    /**/


    /*******************
    * Maybe edit these * [ LIGHT THEME, if you are making a dark theme edit the other block ]
    ********************/
    --wiki-body-background-position: top center;
    --wiki-body-background-size:cover;
    --wiki-body-background-repeat: no-repeat;
    --wiki-body-background-attachment: fixed;
    
    --wiki-content-text-color: #111111;
    --wiki-content-text-color--rgb: 17, 17, 17;
    --wiki-content-link-color--visited: var(--wiki-content-link-color);
    --wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-link-color--hover: var(--wiki-content-link-color);
    --wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-redlink-color: #ba0000;
    --wiki-content-redlink-color--rgb: 186,0,0;

    --wiki-content-heading-color: var(--wiki-content-text-color);
    --wiki-content-heading-color--rgb: var(--wiki-content-text-color--rgb);
    /* [ LIGHT THEME ] */
    --wiki-sidebar-background-color: var(--wiki-content-background-color);
    --wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
    --wiki-sidebar-border-color: var(--wiki-content-border-color);
    --wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-sidebar-link-color: var(--wiki-content-link-color);
    --wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-sidebar-link-color--hover: var(--wiki-content-link-color--hover);
    --wiki-sidebar-link-color--hover--rgb: var(--wiki-content-link-color--hover--rgb);
    --wiki-sidebar-heading-color: var(--wiki-content-heading-color);
    --wiki-sidebar-heading-color--rgb: var(--wiki-content-heading-color--rgb);
    /* [ LIGHT THEME ] */
    --wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
    --wiki-navigation-background-color--rgb: var(--wiki-content-background-color--secondary--rgb);
    --wiki-navigation-background-color--secondary: var(--wiki-content-background-color);
    --wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--rgb);
    --wiki-navigation-border-color: var(--wiki-content-border-color);
    --wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-navigation-text-color: var(--wiki-content-link-color);
    --wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-navigation-text-color--hover: var(--wiki-content-link-color--hover);
    --wiki-navigation-text-color--hover--rgb: var(--wiki-content-link-color--hover--rgb);
    --wiki-navigation-selected-background-color: var(--wiki-content-background-color);
    --wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-navigation-selected-border-color: var(--wiki-navigation-border-color);
    --wiki-navigation-selected-border-color--rgb: var(--wiki-navigation-border-color--rgb);
    --wiki-navigation-selected-text-color: var(--wiki-content-text-color);
    --wiki-navigation-selected-text-color--rgb: var(--wiki-content-text-color--rgb);
    /* [ LIGHT THEME ] */
    --wiki-neutral-color: var(--wiki-content-text-mix-color);
    --wiki-neutral-color--rgb: var(--wiki-content-text-mix-color--rgb);
    --wiki-alert-color: #bf0017;
    --wiki-alert-color--rgb: 191,0,23;
    --wiki-warning-color: #cf721c;
    --wiki-warning-color--rgb: 207,114,28;
    --wiki-success-color: #0c742f;
    --wiki-success-color--rgb: 12,116,47;
    /**/
    
    
    /***********************************
    * Likely do not need to edit these *  [ LIGHT THEME, if you are making a dark theme edit the other block ]
    ************************************/
    --wiki-body-dynamic-color: #000000;
    --wiki-body-dynamic-color--rgb: 0,0,0;
    --wiki-body-dynamic-color--inverted: #ffffff;
    --wiki-body-dynamic-color--inverted--rgb: 255,255,255;
    --wiki-body-dynamic-color--secondary: #333333;
    --wiki-body-dynamic-color--secondary--rgb: 51,51,51;
    --wiki-body-dynamic-color--secondary--inverted: #dddddd;
    --wiki-body-dynamic-color--secondary--inverted--rgb: 221,221,221;
    
    --wiki-content-border-color--secondary: rgba(var(--wiki-content-border-color--rgb), 0.5);
    --wiki-content-border-color--secondary--rgb: var(--wiki-content-border-color--rgb);
    --wiki-content-border-color--accent: rgba(var(--wiki-accent-color--rgb), 0.5);
    --wiki-content-border-color--accent--rgb: var(--wiki-accent-color--rgb);
    --wiki-content-link-label-color: #ffffff;
    --wiki-content-link-label-color--rgb: 255,255,255;
    --wiki-content-dynamic-color: #000000;
    --wiki-content-dynamic-color--rgb: 0,0,0;
    --wiki-content-dynamic-color--inverted: #ffffff;
    --wiki-content-dynamic-color--inverted--rgb: 255,255,255;
    --wiki-content-dynamic-color--secondary: #333333;
    --wiki-content-dynamic-color--secondary--rgb: 51,51,51;
    --wiki-content-dynamic-color--secondary--inverted: #dddddd;
    --wiki-content-dynamic-color--secondary--inverted--rgb: 221,221,221;
    /* [ LIGHT THEME ] */
    --wiki-alert-label-color: #ffffff;
    --wiki-alert-label-color--rgb: 255, 255, 255;
    --wiki-warning-label-color: #000000;
    --wiki-warning-label-color--rgb: 0, 0, 0;
    --wiki-success-label-color: #ffffff;
    --wiki-success-label-color--rgb: 255, 255, 255;
	
    --wiki-icon-general-filter: ; /* do not set this to none, ignore the "unexpected token" error */
    /**/
}
/* end light theme */

/* Begin dark theme, delete from here to "end dark theme" if you don't want your wiki to support a dark theme (remove it from [[Mediawiki:Theme-definitions]] too, or ask wiki.gg staff for help doing this) */
.view-dark {
	/**********************
	* Probably edit these * [ DARK THEME, if you are making a light theme edit the other block ]
	***********************/
    --wiki-body-background-color: #171717;
    --wiki-body-background-color--rgb: 23, 23, 23;
    --wiki-body-background-image: url("/images/2/26/Background.png"); /* please find the file path by viewing the image directly (not at the File: page) */
    
    --wiki-content-background-color: #202020;
    --wiki-content-background-color--rgb: 32,32,32;
    --wiki-content-background-opacity: 90%;
    --wiki-content-background-color--secondary: #2b2b2b;
    --wiki-content-background-color--secondary--rgb: 43,43,43;
    --wiki-content-border-color: #006EE6;
    --wiki-content-border-color--rgb: 0,110,230;
    --wiki-content-link-color: #6d8afb;
    --wiki-content-link-color--rgb: 109,138,251;
    --wiki-content-text-mix-color: #9b9b9b;
    --wiki-content-text-mix-color--rgb: 155,155,155;
    --wiki-content-text-mix-color-95: #2a2a2a;
    --wiki-content-text-mix-color-95--rgb: 42,42,42;
    /* [ DARK THEME ] */
    --wiki-accent-color: #274690;
    --wiki-accent-color--rgb: 39, 70, 144;
    --wiki-accent-color--hover: #3659ac;
    --wiki-accent-color--hover--rgb: 54, 89, 172;
    --wiki-accent-label-color: #ffffff;
    --wiki-accent-label-color--rgb: 255, 255, 255;
    --wiki-accent-link-color: #22214d;
    --wiki-accent-link-color--rgb: 34, 33, 77;
	
	
    --wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */
    /**/


    /*******************
    * Maybe edit these * [ DARK THEME, if you are making a light theme edit the other block ]
    ********************/
    --wiki-body-background-position: top center;
    --wiki-body-background-size:cover;
    --wiki-body-background-repeat: no-repeat;
    --wiki-body-background-attachment: fixed;
	
	--wiki-content-text-color: #ededed;
    --wiki-content-text-color--rgb: 237,237,237;
    --wiki-content-link-color--visited: var(--wiki-content-link-color);
    --wiki-content-link-color--visited--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-link-color--hover: var(--wiki-content-link-color);
    --wiki-content-link-color--hover--rgb: var(--wiki-content-link-color--rgb);
    --wiki-content-redlink-color: #FC483B;
    --wiki-content-redlink-color--rgb: 252,72,59;
	
	--wiki-content-heading-color:  var(--wiki-content-text-color);
    --wiki-content-heading-color--rgb: var(--wiki-content-text-color--rgb);
    /* [ DARK THEME ] */
	--wiki-sidebar-background-color: var(--wiki-content-background-color);
    --wiki-sidebar-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
    --wiki-sidebar-border-color: var(--wiki-content-border-color);
    --wiki-sidebar-border-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-sidebar-link-color: var(--wiki-content-link-color);
    --wiki-sidebar-link-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-sidebar-link-color--hover: var(--wiki-content-link-color--hover);
    --wiki-sidebar-link-color--hover--rgb: var(--wiki-content-link-color--hover--rgb);
    --wiki-sidebar-heading-color: var(--wiki-content-heading-color);
    --wiki-sidebar-heading-color--rgb: var(--wiki-content-heading-color--rgb);
    /* [ DARK THEME ] */
    --wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
    --wiki-navigation-background-color--rgb: var(--wiki-content-background-color--secondary--rgb);
    --wiki-navigation-background-color--secondary: var(--wiki-content-background-color);
    --wiki-navigation-background-color--secondary--rgb: var(--wiki-content-background-color--rgb);
    --wiki-navigation-border-color: var(--wiki-content-border-color);
    --wiki-navigation-border-color--rgb: var(--wiki-content-border-color--rgb);
    --wiki-navigation-text-color: var(--wiki-content-link-color);
    --wiki-navigation-text-color--rgb: var(--wiki-content-link-color--rgb);
    --wiki-navigation-text-color--hover: var(--wiki-content-link-color--hover);
    --wiki-navigation-text-color--hover--rgb: var(--wiki-content-link-color--hover--rgb);
    --wiki-navigation-selected-background-color: var(--wiki-content-background-color);
    --wiki-navigation-selected-background-color--rgb: var(--wiki-content-background-color--rgb);
    --wiki-navigation-selected-border-color: var(--wiki-navigation-border-color);
    --wiki-navigation-selected-border-color--rgb: var(--wiki-navigation-border-color--rgb);
    --wiki-navigation-selected-text-color: var(--wiki-content-text-color);
    --wiki-navigation-selected-text-color--rgb: var(--wiki-content-text-color--rgb);
    /* [ DARK THEME ] */
    --wiki-neutral-color: var(--wiki-content-text-mix-color);
    --wiki-neutral-color--rgb: var(--wiki-content-text-mix-color--rgb);
    --wiki-alert-color: #ff4d61;
    --wiki-alert-color--rgb: 255,77,97;
    --wiki-warning-color:#cf721c;
    --wiki-warning-color--rgb: 207,114,28;
    --wiki-success-color: #13aa45;
    --wiki-success-color--rgb: 19,170,69;
    /**/
    
    
    /***********************************
    * Likely do not need to edit these * [ DARK THEME, if you are making a light theme edit the other block ]
    ************************************/
    --wiki-body-dynamic-color: #ffffff;
    --wiki-body-dynamic-color--rgb: 255,255,255;
    --wiki-body-dynamic-color--inverted: #000000;
    --wiki-body-dynamic-color--inverted--rgb: 0,0,0;
    --wiki-body-dynamic-color--secondary: #dddddd;
    --wiki-body-dynamic-color--secondary--rgb: 221,221,221;
    --wiki-body-dynamic-color--secondary--inverted: #333333;
    --wiki-body-dynamic-color--secondary--inverted--rgb: 51,51,51;
	
	--wiki-content-border-color--secondary: rgba(var(--wiki-content-border-color--rgb), 0.5);
    --wiki-content-border-color--secondary--rgb: var(--wiki-content-border-color--rgb);
    --wiki-content-border-color--accent: rgba(var(--wiki-accent-color--rgb), 0.5);
    --wiki-content-border-color--accent--rgb: var(--wiki-accent-color--rgb);
    --wiki-content-link-label-color: #000;
    --wiki-content-link-label-color--rgb: 0,0,0;
    --wiki-content-dynamic-color: #ffffff;
    --wiki-content-dynamic-color--rgb: 255, 255, 255;
    --wiki-content-dynamic-color--inverted: #000000;
    --wiki-content-dynamic-color--inverted--rgb: 0, 0, 0;
    --wiki-content-dynamic-color--secondary: #dddddd;
    --wiki-content-dynamic-color--secondary--rgb: 221, 221, 221;
    --wiki-content-dynamic-color--secondary--inverted: #333333;
    --wiki-content-dynamic-color--secondary--inverted--rgb: 51, 51, 51;
    /* [ DARK THEME ] */
    --wiki-alert-label-color: #000000;
    --wiki-alert-label-color--rgb: 0,0,0;
    --wiki-warning-label-color: #000000;
    --wiki-warning-label-color--rgb: 0, 0, 0;
    --wiki-success-label-color: #000000;
    --wiki-success-label-color--rgb: 0,0,0;
	
    --wiki-icon-general-filter: invert(100%);
}

/* End dark theme */

/******************************************************
* DO NOT EDIT THESE, used for backwards compatibility *
*******************************************************/
:root {
	--wiki-heading-color:var(--wiki-content-heading-color);
	--wiki-heading-color--rgb:var(--wiki-content-heading-color--rgb);
}

/****************************************
* End backwards compatibility variables *
*****************************************/

/*****************************
*     PortableInfoboxes      *
******************************/
:root {
	--pi-background: var(--wiki-content-background-color);
	--pi-secondary-background: var(--wiki-accent-color);
	--pi-secondary-background--rgb: var(--wiki-accent-color--rgb);
	--pi-secondary-background-label: var(--wiki-accent-label-color);
	--pi-border-color: rgba(var(--pi-secondary-background--rgb),0.5);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align:center;
	font-size:1.5em;
	background:rgba(var(--pi-secondary-background--rgb), 0.75);
	color:var(--pi-secondary-background-label);
}

.portable-infobox .pi-data {
	background:rgba(var(--pi-secondary-background--rgb), 0.18);
}

.portable-infobox .pi-image {
	padding: 8px;
}

.pi-image-thumbnail {
	max-width:100%;
}

.pi-caption {
	color: var(--wiki-content-text-mix-color);
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: var(--pi-secondary-background);
	color: var(--pi-secondary-background-label);
}

/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
	border-bottom: 0;
	font-family: inherit;
	font-weight: 700;
	margin: 0;
}
/*****************************
*   End PortableInfoboxes    *
******************************/

/** as of Module:navbox version 1.2.2 **/

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	/*
	 * don't trust the note that says margin doesn't work with inline
	 * removing margin: 0 makes dds have margins again
	 * We also want to reset margin-right in Minerva
	 */
	margin: 0; 
	display: inline;
}

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.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;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
	content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
	/* "space, Middle Dot, space" 
	We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
	The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
	/* content: "\20\00B7\20"; font-weight: bold; */
    /* "space &nbsp; • &nbsp; space" 
       There may (and likely) be an extra whitespace between <li>s, 
       therefore we have to use a space character as last character of this sequence. 
       By this way, the last space and the next whitespce will collapse as a single space,
       to make the whitespace on both sides of the middle dot the same width.
    */
	content: "\20\A0\2022\A0\20"; 
	font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
	content: "\20(";
	font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
	content: ")";
	font-weight: inherit;
}

/* 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) ".\20";
}

/* Progressive enhancement:
 * try to make the dot always follow the list item in same line
 */
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
	display: inline-block;
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
  --navbox-background: none; /* for entire navbox */
  --navbox-margin: 0.5em auto;
  --navbox-padding: 4px;
  --navbox-gap: 3px; /* when using zero-value, it must be 0px */
  --navbox-outer-border-color: var(--wiki-content-border-color--accent);
  --navbox-outer-border-width: 1px;
  --navbox-outer-border-style: solid;
  --navbox-outer-border-radius: 0px;
  --navbox-font-size: calc(1em - 2px);
  --navbox-title-color: var(--wiki-accent-label-color);
  --navbox-title-font-size: calc(125%);
  --navbox-title-background: var(--wiki-accent-color);
  --navbox-title-icon-color: var(--wiki-accent-label-color);
  --navbox-title-link-color: var(--navbox-title-color);
  --navbox-title-link-color--visited: var(--navbox-title-link-color);
  --navbox-title-link-color--hover: var(--wiki-accent-link-color);
  --navbox-title-redlink-color: var(--navbox-title-link-color);
  --navbox-title-link-decoration: underline solid;
  --navbox-title-redlink-decoration: underline wavy;
  --navbox-title-padding--y: 0.5em;
  --navbox-above-background: color-mix(in srgb, var(--wiki-content-text-color) 15%, transparent);
  --navbox-above-color: var(--wiki-content-text-color);
  --navbox-above-padding: var(--navbox-list-padding);
  --navbox-below-background: var(--navbox-above-background);
  --navbox-below-color: var(--navbox-above-color);
  --navbox-below-padding: var(--navbox-above-padding);
  --navbox-header-color: var(--navbox-title-color);
  --navbox-header-font-size: calc(110%);
  --navbox-header-background: var(--navbox-title-background);
  --navbox-header-icon-color: var(--navbox-title-icon-color);
  --navbox-header-link-color: var(--navbox-title-link-color);
  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
  --navbox-header-padding--y: 0.3em;
  --navbox-subheader-font-size: calc(100%);
  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
  --navbox-list-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 8%, transparent);
  --navbox-list-color: var(--wiki-content-text-color);
  --navbox-list-padding: 0.25em 0.5em;
  /* --navbox-group-* also apply to .ranger-subgroup */
  --navbox-group-text-align: left;
  --navbox-group-text-align--mobile: left; /* only for mobile view */
  --navbox-group-background: color-mix(in srgb, var(--wiki-accent-color) 20%, transparent);
  --navbox-group-color: var(--wiki-content-text-color);
  --navbox-group-padding: var(--navbox-list-padding);
  --navbox-tree-line-color: color-mix(in srgb, var(--wiki-accent-color) 30%, transparent);
  --navbox-tree-line-width: 2px;
  --navbox-tree-indent: 1em;
  --navbox-tree-line-indent: 0.5em;
  --navbox-tree-line-spacing: var(--navbox-gap);
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' 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='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' 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='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill, 
.ranger-navbox.pill-mobile{
  /** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
  --navbox-pill-gap: 0.3em;
  --navbox-pill-padding: 0.25em 0.75em;
  --navbox-pill-border-radius: 3px;
  --navbox-pill-box-shadow: none;
  --navbox-pill-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
  --navbox-pill-background--hover: var(--navbox-pill-background);
  /* remove list cell background */
  --navbox-list-background: none;
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
  --navbox-title-link-color: var(--wiki-accent-link-color);
  --navbox-title-link-decoration: none;
  --navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
  --navbox-padding: 0px;
  --navbox-outer-border-width: 0px;
}

/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
	.ranger-navbox {
		--navbox-above-background: var(--wiki-content-background-color--secondary);
		--navbox-list-background: transparent;
		--navbox-list-background--striped: var(--wiki-content-background-color--secondary);
		--navbox-group-background: var(--wiki-content-background-color--secondary);
		--navbox-tree-line-color：var(--wiki-content-background-color--secondary);
	}
	.ranger-navbox.pill, 
	.ranger-navbox.pill-mobile {
	  --navbox-pill-background: var(--wiki-content-background-color--secondary);
	  --navbox-list-background--striped: transparent;
	}
}
/***************
* End fallback *
****************/

.ranger-navbox{
  border-color: var(--navbox-outer-border-color);
  border-style: var(--navbox-outer-border-style);
  border-width: var(--navbox-outer-border-width);
  border-radius: var(--navbox-outer-border-radius);
  padding: var(--navbox-padding);
  font-size: var(--navbox-font-size);
  margin: var(--navbox-margin);
  background: var(--navbox-background);
  line-height: 1.5;
  clear:both;
}

.ranger-navbox * {
  border: 0;
}
.ranger-navbox .center *{
  margin-left: unset;
  margin-right: unset;
}
.ranger-navbox, 
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
  text-align: center;
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.ranger-navbox .ranger-title{
  color: var(--navbox-title-color);
  background: var(--navbox-title-background);
  font-size: var(--navbox-title-font-size);
  padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
	text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
	text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
  color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
  color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
    color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
  color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
  color: var(--navbox-header-color);
  background: var(--navbox-header-background);
  font-size: var(--navbox-header-font-size);
  padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
  font-size: var(--navbox-subheader-font-size);
  padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
	text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
	text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
  color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
  color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
    color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
  font-size: var(--navbox-title-font-size);
  position: absolute;
  left: var(--navbox-icon-offset--x);
  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
  display: block;
}
.ranger-navbox .ranger-meta .nv{
  --mask: var(--icon-metalinks);
  display: block;
  width: 0.84em; /* based on the icon graph */
  height: 0.84em;
  -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(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
	display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
  position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
  display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
  pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
  --mask: var(--icon-chevron-down);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  width: 1.5em;
  height: 1.5em;
  right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: var(--navbox-icon-offset--x);
  -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(--navbox-title-icon-color);
  transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
  top: 0;
  right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
  transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
  display: none;
}
.ranger-navbox .ranger-list{
  width: unset;
  padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
  padding: var(--navbox-above-padding);
  width: unset;
}
.ranger-navbox .ranger-below{
  background: var(--navbox-below-background);
  color: var(--navbox-below-color);
  padding: var(--navbox-below-padding);
  width: unset;
}
.ranger-navbox .ranger-sublist{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
  display: grid;
  gap: var(--navbox-gap);
  grid-template-columns: auto minmax(0,1fr);
}
/* gap fix for collapsed content */
.ranger-navbox [class^="ranger-"][hidden="until-found"]{
  margin-top: calc(0px - var(--navbox-gap)) !important;
}
.ranger-navbox .ranger-row{
  display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
  text-align: var(--navbox-group-text-align);
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
  padding: var(--navbox-group-padding);
  width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
  --navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
  --navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
  --navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
  --navbox-group-text-align--mobile: left;
}

.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
  --navbox-group-text-align--mobile: center;
}

.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
  --navbox-group-text-align--mobile: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
  background: var(--navbox-list-background);
  color: var(--navbox-list-color);
  flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
  flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
  grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
  background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
	display: inline-block;
}

.ranger-navbox .align-left,
.ranger-navbox .alignleft{
  text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
  text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
  text-align: right;
}

/* responsive */
@media screen and (max-width: 720px) {
  .ranger-navbox .ranger-section-body,
  .ranger-navbox .ranger-sublist {
    display: flex;
    flex-flow: column;
  }
  .ranger-navbox .ranger-row{
    display: block;
  }
  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
    margin-top: var(--navbox-gap);
  }
  .ranger-navbox .ranger-listbox.empty{
    display: none;
  }
  .ranger-navbox .ranger-group,
  .ranger-navbox .ranger-subgroup{
    text-align: var(--navbox-group-text-align--mobile);
    white-space: normal;
  }
  
  .ranger-navbox .ranger-sublist {
    padding-left: var(--navbox-tree-indent);
    margin-left: var(--navbox-tree-line-indent);
  }
  .ranger-navbox .ranger-subgroup,
  .ranger-navbox .ranger-listbox {
    position:relative;
  }
  .ranger-navbox .ranger-group br,
  .ranger-navbox .ranger-subgroup br{
    display: none;
  }
  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
  }
  .ranger-navbox .ranger-sublist .ranger-row > ::before{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent));
    top: 0;
    width: var(--navbox-tree-line-width);
    height: 100%;
    content: '';
    display: block;
    background-color: var(--navbox-tree-line-color);
  }
  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
    height: calc(100% + var(--navbox-gap));
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
    display: none;
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
    display: block;
    height: calc(50% + var(--navbox-tree-line-width)/2);
  }
  .ranger-navbox .ranger-subgroup::after,
  .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
    height: var(--navbox-tree-line-width);
    content: '';
    background-color: var(--navbox-tree-line-color);
  }
  /* increase height for links */
  .ranger-navbox .hlist{
    line-height: 2;
  }
}
/**** `.pill` class: the "pill" style  ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap); 
  flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
	/* remove middle dots betweem items */
	.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
	.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
	  display: none;
	}
	/* remove parentheses around nested lists*/
	.ranger-navbox.pill-mobile .hlist dd ol::before,
	.ranger-navbox.pill-mobile .hlist dd ul::before,
	.ranger-navbox.pill-mobile .hlist dd dl::before,
	.ranger-navbox.pill-mobile .hlist dt ol::before,
	.ranger-navbox.pill-mobile .hlist dt ul::before,
	.ranger-navbox.pill-mobile .hlist dt dl::before,
	.ranger-navbox.pill-mobile .hlist li ol::before,
	.ranger-navbox.pill-mobile .hlist li ul::before,
	.ranger-navbox.pill-mobile .hlist li dl::before,
	.ranger-navbox.pill-mobile .hlist dd ol::after,
	.ranger-navbox.pill-mobile .hlist dd ul::after,
	.ranger-navbox.pill-mobile .hlist dd dl::after,
	.ranger-navbox.pill-mobile .hlist dt ol::after,
	.ranger-navbox.pill-mobile .hlist dt ul::after,
	.ranger-navbox.pill-mobile .hlist dt dl::after,
	.ranger-navbox.pill-mobile .hlist li ol::after,
	.ranger-navbox.pill-mobile .hlist li ul::after,
	.ranger-navbox.pill-mobile .hlist li dl::after {
	  display: none;
	}
	/* make lists inline-flex */
	.ranger-navbox.pill-mobile .hlist ul,
	.ranger-navbox.pill-mobile .hlist ol,
	.ranger-navbox.pill-mobile .hlist dl{
	  display: inline-flex;
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* "pill" style for items */
	.ranger-navbox.pill-mobile .hlist li,
	.ranger-navbox.pill-mobile .hlist dt,
	.ranger-navbox.pill-mobile .hlist dd{
	  /* 100% height */
	  display: flex;
	  align-items: center;
	  /* for nested lists */
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* "pill" style for items */
	.ranger-navbox.pill-mobile .hlist li,
	.ranger-navbox.pill-mobile .hlist dt,
	.ranger-navbox.pill-mobile .hlist dd{
	  padding: var(--navbox-pill-padding);
	  border-radius: var(--navbox-pill-border-radius);
	  box-shadow: var(--navbox-pill-box-shadow);
	  background: var(--navbox-pill-background);
	  /* 100% height */
	  display: flex;
	  align-items: center;
	  /* for nested lists */
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* Add a hover / focus feedback style */
	.ranger-navbox.pill-mobile .hlist dd:hover,
	.ranger-navbox.pill-mobile .hlist dd:focus,
	.ranger-navbox.pill-mobile .hlist dt:hover,
	.ranger-navbox.pill-mobile .hlist dt:focus,
	.ranger-navbox.pill-mobile .hlist li:hover,
	.ranger-navbox.pill-mobile .hlist li:focus {
	  box-shadow: var(--navbox-pill-box-shadow--hover);
	  background: var(--navbox-pill-background--hover);
	}
}
/*********************
* End Template:Navbox*
**********************/


/*******************
* Main page layout *
********************/

#mp-container {
	display:grid;
    /* for mobile screens */
	grid-template-areas:var(--main-page-layout--mobile);
	grid-template-columns:var(--main-page-layout-columns--mobile, 100%);
	gap:10px;
}

@media screen and (min-width:990px) {
	#mp-container {
        /* for narrow screens, between 990px and 1350px */
		grid-template-areas:var(--main-page-layout--tablet);
		grid-template-columns:var(--main-page-layout-columns--tablet, 1fr 1fr);
	}
}

@media screen and (min-width:1350px) {
	#mp-container {
		grid-template-areas:var(--main-page-layout--desktop);
		grid-template-columns:var(--main-page-layout-columns--desktop, 2fr 1fr 2fr);
  }
}

.mp-box {
	position:relative;
	display:flex;
	flex-flow:column nowrap;
	width: calc(100% - 2px);
	box-sizing: border-box;
	background:rgba(var(--wiki-content-background-color--secondary--rgb), 0.25);
	border:1px solid var(--wiki-content-border-color);
	padding:0px;
}

.mp-body {
	height: 100%;
	display: flex;
	padding:0.5em;
	flex-flow: column nowrap;
}

.mp-box.centered-content .mp-body {
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-evenly;
}

.mp-box.has-floating-image {
	display:block;
}

.mp-box.has-floating-image .mp-body {
	height:unset;
	display:block;
}

.mp-box h2 {
	text-align:center;
	font-weight:bold;
	font-family:var(--wiki-heading-font-family);
    overflow: initial;
	border-bottom: 1px solid var(--wiki-content-border-color);
	font-size: 150%;
	margin: 0;
	padding: 5px 0;
	color:var(--wiki-heading-color);
}

.mp-box .welcome-message {
    font-size: 200%;
	font-family: var(--wiki-heading-font-family);
    margin: 0;
    padding: 5px 0;
	color: #fff;
	filter: drop-shadow(0px 2px 3px #000);
}

#mp-box-welcome {
	text-align:center;
	position:relative;
	overflow:hidden;
}

#mp-welcome {
	display:flex;
	flex-flow:column nowrap;
	position: relative;
	height: 100%;
	z-index: 2;
	box-sizing: border-box;
}

#mp-welcome .welcome-subtitle {
	height: 100%;
	background:rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.85);
	padding:0.5em;
}

#mp-banner {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(5px);
    z-index: -1;
    background: url(filepath://MP_banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.view-dark #mp-banner {
	filter: blur(5px) brightness(50%);
}

.view-light #mp-banner {
	filter: blur(5px) contrast(50%);
}

/* [[Template:MP_link]] */
.mp-links {
  --gap:10px;
}

.mp-links > ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	margin: 2px;
	gap:var(--gap);
}

.mp-links > ul > li {
	display:flex;
	flex-flow:column nowrap;
	align-items:stretch;
	text-align: center;
	box-sizing:border-box;
	flex: max(calc(50% - var(--gap)), 5em) 1 1;
	outline:1px solid var(--wiki-content-link-color);
	transition:0.1s ease-in;
}

.mp-links > ul > li:hover {
	background-color:rgba(var(--wiki-content-link-color--rgb), 0.2);
}

.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
.mp-links.columns-max > ul > li {flex: max(calc(0% - var(--gap)), 5em) 1 1;}

.mp-links > ul > li:hover a {
	text-decoration: underline;
}

.mp-links > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height:100%;
	flex:1 1 auto;
	box-sizing:border-box;
	padding:5px;
}

.mp-links > ul > li > a:first-child {
  height:100%;
}

.mp-links > ul > li > a:last-child:not(:first-child) {
  height:unset;
}

.mp-links.stretch,
.mp-links.stretch > ul {
	height:100%;
}

.mp-links.side-image li {
	flex-flow:row nowrap;
}

.mp-links.plain > ul > li {
  outline-color:transparent;
}

/* MP icon lists */
.mp-iconlists {
	display: flex;
    flex-flow: wrap;
    gap: 5px 20px;
}

.mp-iconlists > .mp-iconlist {
	flex: 1;
    min-width: fit-content;
}

.mp-iconlist > h3 {
	padding: 0;
	margin: 0;
}

.mp-iconlist > ul {
	list-style: none;
	margin: 0;
}

/* MP gallery */
.mp-box ul.gallery.gallery.gallery { /* this selector looks ridiculous but is actually part of stock Vector and therefore a necessary override */
    display: flex;
    flex-flow: wrap;
    gap: 5px 10px;
    align-items: flex-end;
    justify-content: space-evenly;
    margin: auto;
}

.mp-box ul.gallery .gallerytext {
	margin-top: 1em;
	padding: 0;
    background-color: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-link-color);
}

.mp-box .gallerybox:hover .gallerytext {
    background-color: rgba(var(--wiki-content-link-color--rgb), 0.2);
}

.mp-box ul.gallery .gallerytext > p {
	margin: 0;
}

.mp-box ul.gallery .gallerytext a {
	display: block;
    padding: .5em 0;
}

/***********************
* End main page layout *
************************/

/****************************************/
/*******  Start DRUID CSS rules *********/
/****************************************/

.druid-container {
    /* These variables are designed to inherit from your wiki's color variables.
       If your wiki uses a different naming scheme, change the inner names to match yours.
       If your wiki doesn't use color variables you should consider doing so,
       otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
    */
    --druid-background-color: var(--wiki-content-background-color, #ffffff);
    --druid-background-color--rgb: var(--wiki-content-background-color--rgb, 255, 255, 255);
    
    --druid-secondary-background-color: var(--wiki-accent-color, #36c);
    --druid-secondary-background-color--rgb: var(--wiki-accent-color--rgb, 51, 102, 204);
    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
    --druid-secondary-background-label-color--rgb: var(--wiki-accent-label-color--rgb, 255, 255, 255);
    
    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
    --druid-tertiary-background-color--rgb: var(--wiki-content-background-color--secondary--rgb, 234, 236, 240);
    
    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
    --druid-border-color--rgb: var(--wiki-content-border-color--rgb, 167, 215, 249);
    
    --druid-link-color: var(--wiki-content-link-color, #0645ad);
    --druid-link-color--rgb: var(--wiki-content-link-color--rgb, 6, 69, 173);
    --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
    --druid-link-label-color--rgb: var(--wiki-content-link-label-color--rgb, 255, 255, 255);
}

/* ---------------------------------  */
/*    Safe to edit ABOVE this line    */
/* ---------------------------------  */

/* ---------------------------------  */
/*     Do not edit below this line    */
/* ---------------------------------  */

.druid-container {
    border: 4px solid var(--druid-border-color);
    border-radius: 3px;
    background: var(--druid-background-color);
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
	width:100%;
	max-width:22em;
    box-sizing: border-box;
    border-collapse: collapse;
}

@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}

.druid-main-images-file,
.druid-main-image {
    text-align:center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
    background:rgba(var(--druid-secondary-background-color--rgb), 0.75);
    color:var(--druid-secondary-background-label-color);
    text-align:center;
    font-size:1.5em;
    padding:1px;
}

.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
}

.druid-infobox  .druid-collapsible .druid-section {
	flex-grow: 1;
}

.druid-label {
    font-weight:bold;
    text-align: right;
	box-sizing: border-box;
}

.druid-row > .druid-label {
    width: 48%;
    flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
	padding-inline: 0.3em;
}

.druid-main-image,
.druid-main-images {
    padding:5px;
}

.druid-main-image img, 
.druid-main-images img {
    max-width:100%;
    height:auto;
}

.druid-main-images-labels {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}

.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
    background:var(--druid-link-color);
    color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
    background:rgba(var(--druid-link-color--rgb), 0.25);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}

.druid-grid {
    display:grid;
    gap: 0.3em;
	padding: 0.35em;
}

.druid-grid-item {
    background:var(--druid-tertiary-background-color);
    padding:0.25em;
    border:1px solid rgba(var(--druid-border-color--rgb), 0.5);
    border-radius: 2px;
}

.druid-grid-item .druid-label,
.druid-grid-item .druid-data {
	text-align: center;
}

.druid-data-wide {
	width:100%;
}

.druid-section-container > .druid-collapsible {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.druid-collapsed {
    display:none!important;
}

.druid-collapsible {
    cursor:pointer;
    position:relative;
}

.druid-collapsible::after {
	content: "";
	display: block;
	position: absolute;
	right: 10px;
	width: 20px;
	height: 20px;
	--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E collapse %3C/title%3E%3Cpath d='M1 13.75l1.5 1.5 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z'/%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(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
	transform: rotate(180deg);
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
  display: none;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
    display:flex;
    margin-block: 1px;
}

div.druid-row + div.druid-row {
	margin-top: 0;
}

div.druid-row > .druid-label {
	background: var(--druid-tertiary-background-color);
}

.druid-infobox .druid-title {
  font-weight: 700;
}

.druid-infobox #toc {
    display:none;
}


/********
Custom display classes
*********/

div.druid-stacked.druid-row,
.druid-stacked div.druid-row {
    flex-direction: column;
}

.druid-stacked.druid-row > .druid-label,
.druid-stacked .druid-row > .druid-label {
    text-align: left;
    width: 100%;
    flex-basis:unset;
}

.druid-stacked.druid-row > .druid-data,
.druid-stacked .druid-row > .druid-data {
    padding-left: .75em;
}

/* ---------------------------------  */
/*    Do not edit above this line     */
/* ---------------------------------  */

/* ---------------------------------  */
/* Local overrides go below this line */
/* ---------------------------------  */


/****************************************/
/*******  End DRUID CSS rules   *********/
/****************************************/

/*** Miscellaneous ***/
.responsive-image {
	max-width:100%;
	height:auto;
}

.view-dark .invert-on-dark,
.view-light .invert-on-light {
    filter:invert(100%);
}

.pixelated {
  image-rendering:pixelated;
}

@media screen and (min-width:720px) {
	.mobileonly {
		display:none;
	}
}
@media screen and (max-width:720px) {
	.nomobile {
		display:none;
	}
}

/*** Utility classes for standard MW galleries ***/
/* it's important that spaced comes before centered in the sheet */
.gallery.gallery.gallery.spaced { /* this selector looks ridiculous but is actually part of stock Vector and therefore a necessary override */
    display:flex;
    flex-flow:row wrap;
    justify-content:space-evenly;
    margin-left:unset;
}

.gallery.centered {
    text-align:center;
}

/**************************
* Start Modular Templates *
**************************/

/********* [[Template:Ambox]] *********/
.ambox {
    --ambox-color:var(--wiki-accent-color);

	border: 1px solid var(--wiki-content-border-color);
	border-left: 10px solid var(--ambox-color);
	border-radius: 2px;
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 1em 0;
	padding: 3px .6em;
	background-color: var(--wiki-content-background-color--secondary);
	box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
	.ambox {
		margin-inline: 10%;
	}
}

.ambox.tiny {
	padding: .04rem .5em;
	margin-inline: 0;
    width: fit-content;
}

.ambox + .ambox {
	margin-top: -.6em;
}

.ambox-content p {
	margin: .15em 0;
}

.ambox-title {
	font-weight: bold;
}

/********* [[Template:Hatnote]] *********/
.hatnote {
    padding: 1px 0 1px 1.6em;
    margin-bottom: 0.5em;
    font-style: italic;
    border-top: 1px solid var(--wiki-content-border-color--secondary);
    border-bottom: 1px solid var(--wiki-content-border-color--secondary);
}

.hatnote.icon {
	padding-left: 0;	
}

/********* [[Template:Spoiler]] *********/
.spoiler-content {
  background-color: rgb(127, 127, 127);
  transition: all 0.3s;
  cursor: pointer;
}

.spoiler-content > span {
  opacity: 0;
  transition: all 0.3s;
}

.spoiler-content > * {
  pointer-events:none;
}

.spoiler-content.show > * {
  pointer-events:unset;
}

.spoiler-content.show {
  background-color: rgba(127, 127, 127, 0);
}

.spoiler-content.show > span {
  opacity: 1;
}

/********* [[Template:Link icon]] *********/
.link-icon {
	--link-icon-line-height: 1.5em;
	--link-icon-size: 1.5em;	
	display: inline-flex; 
	align-items: center;
    height: var(--link-icon-line-height);
    vertical-align: bottom;
}

.link-icon .regular {
    align-self: center;
}

.link-icon .regular a {
	display: flex;
}

.link-icon .regular img {
	height: var(--link-icon-size);
	max-width: var(--link-icon-size);
}

.link-icon .fallback {
	outline: 1px solid var(--wiki-content-text-color);
	border-radius: 50%;
	text-align: center;
	width: var(--link-icon-size);
	line-height: var(--link-icon-size);
}

.link-icon.notext .fallback {
	display: inline-block;
}

.link-icon.notext {
    display: inline;
}

/********* [[Template:Quote]] *********/
.quote {
    background: var(--wiki-content-background-color--secondary);
    border-radius: 5px;
    border: 2px solid var(--wiki-content-border-color);
    margin: .5em 0;
    padding: .5em;
	overflow-y: hidden;
}

.quote .block {
	display: block;
}

.quote .title {
	font-size: large;
    font-weight: bold;
}

.quote .content {
	font-style: italic;
}

.quote .author {
	font-weight: bold;
	text-align: end;
}

.quote .marks-wrapper {
	display: flex;
	gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
	font-size: 100px;
    line-height: 0px;
}

.quote .marks-wrapper::before {
	content: "\201C";
	margin-top: 40px;
}

.quote .marks-wrapper::after {
	content: "\201D";
	align-self: end;
	margin-bottom: -10px;
}

.client-js .mw-charinsert-item {
 display:none;
}

/************************
* End Modular Templates *
*************************/

/*****************************
* Used by [[Template:Color]] *
******************************/
.color__splotch {
  display:inline-block;
  height:1em;
  width:1em;
  box-sizing:border-box;
  vertical-align:text-top;
  border-radius:50%;
  border:1px solid var(--wiki-content-text-color); 
}
/*********************
* End Template:Color *
**********************/

/********* [[Template:Diagram]] *********/
table.diagram {
    border-spacing: 0;
    background: transparent;
    --connector-border-color: var(--theme-box-border-color);
  }
  table.diagram.diagramdoc {
    /* theme-text-color gives the connectors better visibility in the template documentation */
    --connector-border-color: var(--theme-text-color);
    border: 1px solid var(--theme-box-border-color-light);
    border-radius: 4px;
    padding: 0.5em;
  }
  table.diagram tr {
    height: 1px;
    text-align: center;
  }
  table.diagram td.l {
    border-style: none;
    border-width: 1px;
    border-color: var(--connector-border-color);
    padding: 0.5em;
  }
  table.diagram td.n {
    padding: 0;
  }
  table.diagram td.db {
    border-bottom-style: dashed;
  }
  table.diagram td.dr {
    border-right-style: dashed;
  }
  table.diagram td.sb {
    border-bottom-style: solid;
  }
  table.diagram td.sr {
    border-right-style: solid;
  }
  table.diagram td.nb {
    border-bottom-style: solid;
    border-bottom-color: transparent;
  }
  table.diagram td.nr {
    border-right-style: solid;
    border-right-color: transparent;
  }
  table.diagram td.cf {
    position: relative;
  }
  table.diagram td.cf:after {
    content: "";
    display: block;
    position: absolute;
    width: 0.9px;
    height: 1px;
    border-bottom: 1px solid var(--connector-border-color);
    right: 0;
    bottom: 0;
  }
  table.diagram td.alt {
    position: relative;
  }
  table.diagram td.alt:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    left: 0;
    bottom: -1px;
    border-width: 3px 8px 1px 0;
    border-top-color: transparent;
  }
  table.diagram td.alb {
    position: relative;
  }
  table.diagram td.alb:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    left: 0;
    top: 0;
    border-width: 0 8px 3px 0;
    border-bottom-color: transparent;
  }
  table.diagram td.art {
    position: relative;
  }
  table.diagram td.art:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    right: 0;
    bottom: -1px;
    border-width: 3px 0 1px 8px;
    border-top-color: transparent;
  }
  table.diagram td.arb {
    position: relative;
  }
  table.diagram td.arb:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    right: 0;
    top: 0;
    border-width: 0 0 3px 8px;
    border-bottom-color: transparent;
  }
  table.diagram td.atl {
    position: relative;
  }
  table.diagram td.atl:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    right: -1px;
    top: 0;
    border-width: 0 1px 8px 3px;
    border-left-color: transparent;
  }
  table.diagram td.atr {
    position: relative;
  }
  table.diagram td.atr:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    left: 0;
    top: 0;
    border-width: 0 3px 8px 0;
    border-right-color: transparent;
  }
  table.diagram td.abl {
    position: relative;
  }
  table.diagram td.abl:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    right: -1px;
    bottom: 0;
    border-width: 8px 1px 0 3px;
    border-left-color: transparent;
  }
  table.diagram td.abr {
    position: relative;
  }
  table.diagram td.abr:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    box-sizing: content-box;
    border-style: solid;
    border-color: var(--connector-border-color);
    left: 0;
    bottom: 0;
    border-width: 8px 3px 0 0;
    border-right-color: transparent;
  }
  table.diagram td.ct, table.diagram td.cb {
    position: relative;
  }
  table.diagram td.sr.cb {
    border-right-color: transparent;
  }
  table.diagram td.ct:before {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: var(--connector-border-color);
    right: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 4px);
    border-width: 0 1px 0 0;
  }
  table.diagram td.cb:before {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: var(--connector-border-color);
    right: -1px;
    bottom: 0;
    width: 100%;
    height: calc(100% - 4px);
    border-width: 0 1px 0 0;
  }
  table.diagram td.ct:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: var(--connector-border-color);
    right: -4px;
    bottom: -5px;
    width: 5px;
    height: 9px;
    border-width: 1px 1px 1px 0;
    border-radius: 0 10px 10px 0;
  }
  table.diagram td.no-border {
    border: none;
  }
  table.diagram td.craft-station {
    border: none;
    padding: 2px 0;
  }
  
  .diagram-box {
    border-width: 2px;
    border-style: solid;
    border-color: var(--theme-box-border-color);
    border-radius: 7px;
    padding: 0.25em 0.5em;
  }
  .diagram-box .note-text {
    line-height: 1.25;
    margin-top: 0.25em;
  }
  .diagram-box > .note-text:first-child {
    margin-top: auto;
  }
  .diagram-box > img:first-child {
    margin-top: 2px;
  }
/* Collapsed Section @/
/* Default state: collapsed with arrow right (▶) */
.collapsible-header::after {
    content: " ▶"; /* Arrow for collapsed */
    color: #007acc; /* Default arrow color */
}

/* Expanded state: arrow down (▼) */
.collapsible-header.expanded::after {
    content: " ▼"; /* Arrow for expanded */
    color: #ff5722; /* Color for expanded arrow */
}

/* Collapsible content hidden by default */
.collapsible-content {
    display: none;
    margin-left: 20px; /* Optional indentation */
}

/* Optional: Styling for the clickable header */
.collapsible-header {
    cursor: pointer;
    font-weight: bold;
    color: #007acc; /* Header text color */
}

/* Optional: Hover effect for the header */
.collapsible-header:hover {
    color: #005999; /* Change color on hover */
}

/** Template stylings **/
/* [[Template:Inventory slot]] */
.invslot {
    box-sizing: unset;
	position: relative;
	display: inline-block;
	background: #8B8B8B no-repeat center center / 32px 32px;
	border: 2px solid;
	border-color: #373737 #FFF #FFF #373737;
	width: 32px;
	height: 32px;
	font-size: 16px;
	line-height: 1;
	text-align: left;
	vertical-align: bottom;
}
.invslot::before,
.invslot::after {
	content: "";
	position: absolute;
	background-color: #8B8B8B;
	height: 2px;
	width: 2px;
	pointer-events: none;
}
.invslot::before {
	bottom: -2px;
	left: -2px;
}
.invslot::after {
	top: -2px;
	right: -2px;
}

.invslot-large {
	padding: 8px;
}

.invslot-item,
.invslot-item a:first-child {
	position: relative;
	display: block;
	margin: -2px;
	padding: 2px;
	width: 32px;
	height: 32px;
}

/* [[File:Grid Unknown.png]] */
.invslot-item-image a.new:first-child {
	background: url('https://minecraft.wiki/images/Grid_Unknown.png') no-repeat content-box;
	width: 32px;
	height: 32px;
	text-indent: -9999px;
	overflow: hidden;
}

/* Styling for tooltip */
.explain {
    border-bottom: 0;
    text-decoration: underline dotted;
    cursor: help;
}

/* Show help cursor when an abbr element has a title attribute */
abbr[title] {
    cursor: help;
}

/* Element animator */
.mw-body-content .animated > *:not(.animated-active),
.mw-body-content .animated > .animated-subframe > *:not(.animated-active) {
	display: none
}
.mw-body-content span.animated,
.mw-body-content span.animated.animated-visible > *,
.mw-body-content span.animated.animated-visible > .animated-subframe > * {
	display: inline-block;
}
.mw-body-content div.animated.animated-visible > *,
.mw-body-content div.animated.animated-visible > .animated-subframe > * {
	display: block;
}

/* Styling for minecraft style tooltip */
#minetip-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #100010;
    background-color: rgba(16, 0, 16, 0.94);
    padding: 0.375em;
    font-family: Minecraft, sans-serif;
    font-size: 16px;
    word-spacing: 4px;
    white-space: nowrap;
    line-height: 1.25em;
    margin: 0.125em 0.25em;
    pointer-events: none;
    z-index: 9999;
}

#minetip-tooltip::before {
    content: "";
    position: absolute;
    top: 0.125em;
    right: -0.125em;
    bottom: 0.125em;
    left: -0.125em;
    border: 0.15em solid #100010;
    border-style: none solid;
    border-color: rgba(16, 0, 16, 0.94);
}

#minetip-tooltip::after {
    content: "";
    position: absolute;
    top: 0.125em;
    right: 0;
    bottom: 0.125em;
    left: 0;
    border: 0.125em solid #2D0A63;
    border-image: -webkit-linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
    border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31)) 1;
}

#minetip-tooltip > .description,
#minetip-tooltip > .minetip-description {
    display: block;
    margin-top: 0.25em;
}

/* Classes corresponding to Minecraft formatting codes */
.format-0 {
	color: #000;
	text-shadow: 0.125em 0.125em 0 #000;
}
.format-1 {
	color: #0000A8;
	text-shadow: 0.125em 0.125em 0 #00002A;
}
.format-2 {
	color: #00A800;
	text-shadow: 0.125em 0.125em 0 #002A00;
}
.format-3 {
	color: #00A8A8;
	text-shadow: 0.125em 0.125em 0 #002A2A;
}
.format-4 {
	color: #A80000;
	text-shadow: 0.125em 0.125em 0 #2A0000;
}
.format-5 {
	color: #A800A8;
	text-shadow: 0.125em 0.125em 0 #2A002A;
}
.format-6 {
	color: #FBA800;
	text-shadow: 0.125em 0.125em 0 #3E2A00;
}
.format-7 {
	color: #A8A8A8;
	text-shadow: 0.125em 0.125em 0 #2A2A2A;
}
.format-8 {
	color: #545454;
	text-shadow: 0.125em 0.125em 0 #151515;
}
.format-9 {
	color: #5454FB;
	text-shadow: 0.125em 0.125em 0 #15153E;
}
.format-a {
	color: #54FB54;
	text-shadow: 0.125em 0.125em 0 #153E15;
}
.format-b {
	color: #54FBFB;
	text-shadow: 0.125em 0.125em 0 #153E3E;
}
.format-c {
	color: #FB5454;
	text-shadow: 0.125em 0.125em 0 #3E1515;
}
.format-d {
	color: #FB54FB;
	text-shadow: 0.125em 0.125em 0 #3E153E;
}
.format-e {
	color: #FBFB54;
	text-shadow: 0.125em 0.125em 0 #3E3E15;
}
.format-f,
#minetip-tooltip {
	color: #FBFBFB;
	text-shadow: 0.125em 0.125em 0 #3E3E3E;
}
.format-g {
	color: #DDD605;
	text-shadow: 0.125em 0.125em 0 #373501;
}
.format-h {
	color: #E3D4D1;
	text-shadow: 0.125em 0.125em 0 #383534;
}
.format-i {
	color: #CECACA;
	text-shadow: 0.125em 0.125em 0 #333232;
}
.format-j {
	color: #443A3B;
	text-shadow: 0.125em 0.125em 0 #110E0E;
}
.format-l {
	font-weight: bold;
	letter-spacing: 0.125em;
}
.format-m {
	text-decoration: line-through;
}
.format-n {
	text-decoration: underline;
}
.format-o {
	font-style: italic;
}
.format-p {
	color: #DEB12D;
	text-shadow: 0.125em 0.125em 0 #372C0B;
}
.format-q {
	color: #47A036;
	text-shadow: 0.125em 0.125em 0 #04280D;
}
.format-s {
	color: #2CBAA8;
	text-shadow: 0.125em 0.125em 0 #0B2E2A;
}
.format-t {
	color: #21497B;
	text-shadow: 0.125em 0.125em 0 #08121E;
}
.format-u {
	color: #9A5CC6;
	text-shadow: 0.125em 0.125em 0 #261731;
}
.format-v {
	color: #EB7114;
	text-shadow: 0.125em 0.125em 0 #3B1D05;
}
/* Custom color codes because §m and §n are used twice. */
.format-y {
	color: #971607;
	text-shadow: 0.125em 0.125em 0 #250501;
}
.format-z {
	color: #B4684D;
	text-shadow: 0.125em 0.125em 0 #2D1A13;
}


/* Try to use nearest neighbour scaling for pixelated images */
.mcwiki-header-grass,
.ns-special .gallerybox img,
.ns-14 .gallerybox img,
.filehistory a img,
.pixel-image,
.invslot-item-image,
.sprite {
	image-rendering: optimizeSpeed;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

.invslot-stacksize {
	position: absolute;
	right: 0;
	bottom: 0;
	font-family: Minecraft, serif; !important;
	font-weight: normal !important;
	color: #FFF !important;
	text-shadow: 2px 2px 0 #3F3F3F;
	filter: dropshadow(color=#3F3F3F, offx=2, offy=2);
	z-index: 2;
}

/* Plain slot with no border or background */
.invslot-plain {
	background-color: transparent;
	border: 0;
}
.invslot-plain::before,
.invslot-plain::after {
	content: none;
}
.invslot-plain > .invslot-item,
.invslot-plain > .invslot-item a:first-child {
	margin: 0;
	padding: 0;
}

/* Default background images:
   [[File:Grid layout Head Empty.png]],
   [[File:Grid layout Chest Empty.png]],
   [[File:Grid layout Legs Empty.png]],
   [[File:Grid layout Feet Empty.png]],
   [[File:Grid layout Offhand Empty.png]],
   [[File:Grid layout Smithing Empty.png]],
   [[File:Grid layout Brewing Empty.png]],
   [[File:Grid layout Brewing Fuel Empty.png]] */
.invslot-default-head {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Head_Empty.png');
}
.invslot-default-chest {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Chest_Empty.png');
}
.invslot-default-legs {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Legs_Empty.png');
}
.invslot-default-feet {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Feet_Empty.png');
}
.invslot-default-offhand {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Offhand_Empty.png');
}
.invslot-default-smithing {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Smithing_Empty.png');
}
.invslot-default-brewing {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Empty.png');
}
.invslot-default-brewing-fuel {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Fuel_Empty.png');
}

/* [[Template:hp]] */
.mc-hearts::before {
	content: ' (';
}
.mc-hearts::after {
	content: ')';
}

/* Generic Minecraft interface styling: [[Module:UI]] */
.mcui {
	display: inline-block;
	position: relative;
	background-color: #C6C6C6;
	border: 2px solid;
	border-color: #DBDBDB #5B5B5B #5B5B5B #DBDBDB;
	padding: 6px;
	text-align: left;
	white-space: nowrap;
	vertical-align: bottom;
}

.mcui-Crafting_Table > *,
.mcui-Furnace > * {
	display: inline-block;
	vertical-align: top;
}

/* [[Template:Crafting Table]]:
   [[File:Grid layout Arrow (small).png]], [[File:Grid layout Shapeless.png]], [[File:Grid layout Fixed.png]] */
.mcui-Crafting_Table .mcui-row {
	display: block;
}

.mcui-Crafting_Table > .mcui-arrow {
	background: url('https://minecraft.wiki/images/Grid_layout_Arrow_%28small%29.png') no-repeat;
	width: 32px;
	height: 26px;
	margin: 40px 4px 0;
}

.mcui-Crafting_Table > .mcui-output {
	margin-top: 28px;
}

.mcui-Crafting_Table > .mcui-icons {
	position: absolute;
	top: 6px;
	right: 6px;
}
.mcui-Crafting_Table .mcui-shapeless,
.mcui-Crafting_Table .mcui-fixed {
	display: inline-block;
	background-repeat: no-repeat;
	width: 19px;
	height: 15px;
	cursor: help;
}
.mcui-Crafting_Table .mcui-shapeless {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Shapeless.png');
}
.mcui-Crafting_Table .mcui-fixed {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Fixed.png');
}


/* [[Template:Furnace]]:
   [[File:Grid layout Fire.png]], [[File:Grid layout Fire (in-active).png]]
   [[File:Grid layout Furnace Progress.png]], [[File:Grid layout Furnace Progress (in-active).png]] */
.mcui-Furnace .mcui-fuel {
	display: block;
	background: url('https://minecraft.wiki/images/Grid_layout_Fire.png') no-repeat;
	width: 36px;
	height: 36px;
}
.mcui-Furnace .mcui-fuel.mcui-inactive {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Fire_%28in-active%29.png');
}
	
.mcui-Furnace > .mcui-arrow {
	background: url('https://minecraft.wiki/images/Grid_layout_Furnace_Progress.png') no-repeat;
	width: 44px;
	height: 32px;
	margin: 36px 18px 0 14px;
}
.mcui-Furnace > .mcui-arrow.mcui-inactive,
.mcui-Inventory-Crafting_Table-arrow {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Furnace_Progress_%28in-active%29.png');
}

.mcui-Furnace > .mcui-output {
	margin-top: 28px;
}

.mcui-Furnace > .mcui-experience {
	position: absolute;
	top: 92px;
	left: 108px;
	text-align: center;
	width: 70px;
}

.mcui-Furnace .mcui-experience-orb {
	display: inline-block;
	margin-top: 3px;
	width: 16px;
	height: 16px;
	vertical-align: top;
	background-size: 16px 16px;
}

.mcui-Furnace .mcui-experience-text {
	display: inline-block;
	vertical-align: top;
	font-family: Minecraft, sans-serif;
	font-size: 16px;
	color: #404040;
}

/* [[Template:Brewing Stand]]:
   [[File:Grid layout Brewing Bubbles.gif]], [[File:Grid layout Brewing Bubbles (In-active).png]],
   [[File:Grid layout Brewing Arrow.png]], [[File:Grid layout Brewing Arrow (In-active).png]],
   [[File:Grid layout Brewing Paths.png]], [[File:Grid layout Brewing Empty.png]] */
.mcui-Brewing_Stand > * {
	display: block;
}

.mcui-Brewing_Stand .invslot {
	vertical-align: top;
}

.mcui-Brewing_Stand > .mcui-input {
	text-align: center;
}

.mcui-Brewing_Stand > .mcui-input > .invslot {
	margin-top: 3px;
}

.mcui-Brewing_Stand .mcui-bubbling,
.mcui-Brewing_Stand .mcui-arrow {
	display: inline-block;
	background-repeat: no-repeat;
	width: 24px;
	height: 57px;
}

.mcui-Brewing_Stand .mcui-bubbling,
.mcui-Inventory-Brewing_Stand-bubbles {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Bubbles.gif');
}
.mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-bubbling,
.mcui-Inventory-Brewing_Stand-bubbles-inactive {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Bubbles_%28In-active%29.png');
}

.mcui-Brewing_Stand .mcui-arrow,
.mcui-Inventory-Brewing_Stand-arrow {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Arrow.png');
}
.mcui-Brewing_Stand > .mcui-input.mcui-inactive > .mcui-arrow,
.mcui-Inventory-Brewing_Stand-arrow-inactive {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Arrow_%28In-active%29.png');
}

.mcui-Brewing_Stand > .mcui-paths {
	position: relative;
	background: url('https://minecraft.wiki/images/Grid_layout_Brewing_Paths.png') no-repeat;
	width: 60px;
	height: 40px;
	margin: -20px auto -16px;
	z-index: 1;
}

.mcui-Brewing_Stand .mcui-output .invslot {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Empty.png');
}
.mcui-Brewing_Stand .mcui-output2 {
	margin: 14px 10px 0;
}

/* [[Template:Anvil]]:
   [[File:Anvil Hammer.png]], [[File:Anvil Plus.png]],
   [[File:Anvil_GUI_bar.png]], [[File:Anvil_GUI_bar_(in-active).png]],
   [[File:Grid layout Anvil crossed.png]], [[File:Grid layout Furnace Progress (in-active).png]] */
.mcui-Anvil > .mcui-hammer,
.mcui-Inventory-Anvil-hammer {
	background-image: url('https://minecraft.wiki/images/Anvil_Hammer.png');
}

.mcui-Smithing_Table > .mcui-plus,
.mcui-Anvil > .mcui-plus,
.mcui-Inventory-Anvil-plus  {
	background-image: url('https://minecraft.wiki/images/Anvil_Plus.png');
}

.mcui-Anvil > .mcui-input,
.mcui-Inventory-Anvil-input {
	background-image: url('https://minecraft.wiki/images/Anvil_GUI_bar.png');
}
.mcui-Anvil > .mcui-input.mcui-inactive,
.mcui-Inventory-Anvil-input-inactive {
	background-image: url('https://minecraft.wiki/images/Anvil_GUI_bar_%28in-active%29.png');
}

.mcui-Smithing_Table > .mcui-arrow,
.mcui-Anvil > .mcui-arrow,
.mcui-Inventory-Anvil-arrow {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Furnace_Progress_%28in-active%29.png');
	background-position-y: -2px;
}
.mcui-Smithing_Table > .mcui-arrow.mcui-inactive,
.mcui-Anvil > .mcui-arrow.mcui-inactive,
.mcui-Inventory-Anvil-arrow-inactive {
	background-image: url('https://minecraft.wiki/images/Grid_layout_Anvil_crossed.png');
	background-position-y: unset;
}

/* [[Template:Smithing Table]], [[Template:Legacy Smithing Table]]:
   [[File:Smithing Table Hammer_JE2.png]] [[File:Smithing Table Hammer_JE1_BE1.png]] */
.mcui-Smithing_Table > .mcui-hammer,
.mcui-Inventory-Smithing_Table-hammer {
	background-image: url('https://minecraft.wiki/images/Smithing_Table_Hammer_JE2.png');
}
.mcui-Smithing_Table > .mcui-hammer-legacy {
	background-image: url('https://minecraft.wiki/images/Smithing_Table_Hammer_JE1_BE1.png');
}

/* [[Template:Hotbar]]:
   [[File:Hotbar.png]], [[File:Hotbar selector.png]] */
.mcui-Hotbar {
	display: inline-block;
	position: relative;
	border: 0;
	padding: 0;
	background-color: transparent;
}
.mcui-Hotbar > .mcui-selector {
	position: absolute;
	top: -2px;
	margin-left: -2px;
}
.mcui-Hotbar > .mcui-slots {
	position: absolute;
	top: 0;
	left: 0;
	margin: 2px;
}
.mcui-Hotbar .invslot {
	margin: 4px;
}
.mcui-Hotbar-image {
	background: url('https://minecraft.wiki/images/Hotbar.png') no-repeat;
}
.mcui-Hotbar-image-selected {
	background: url('https://minecraft.wiki/images/Hotbar_selector.png') no-repeat;
}

/* [[Template:Loom]] */
.mcui-Loom > * {
    display: inline-block;
    vertical-align: top;
}
.mcui-Loom > .mcui-tapestry {
    background: url('https://minecraft.wiki/images/Grid_layout_Loom.png') no-repeat;
    width: 98px;
    height: 108px;
}
.mcui-Loom > .mcui-loomArrow {
    background: url('https://minecraft.wiki/images/Grid_layout_Loom_Arrow.png') no-repeat;
    width: 54px;
    height: 54px;
    margin: 28px 4px 0 4px;
}
.mcui-Loom > .mcui-output {
    margin-top: 38px;
}
.mcui-Loom .mcui-inputBanner {
    margin: 22px 10px;
    position: absolute;
}
.mcui-Loom .mcui-inputDye {
    margin: 22px 50px;
    position: absolute;
}
.mcui-Loom .mcui-inputPattern {
    margin: 60px 30px;
    position: absolute;
}
.mcui-Loom .mcui-bannerSprite {
    margin-left: 4px;
}


/* [[Template:Grindstone]] */
.mcui-Grindstone > * {
    display: inline-block;
    vertical-align: top;
}
.mcui-Grindstone > .mcui-grindstone {
    background: url('https://minecraft.wiki/images/Grid_layout_Grindstone.png') no-repeat;
    width: 108px;
    height: 112px;
}
.mcui-Grindstone .mcui-input1 {
    margin: 6px 36px;
    position: absolute;
}
.mcui-Grindstone .mcui-input2 {
    margin: 48px 36px;
    position: absolute;
}
.mcui-Grindstone > .mcui-arrow {
    background: url('https://minecraft.wiki/images/Grid_layout_Furnace_Progress_%28in-active%29.png') no-repeat;
    width: 44px;
    height: 34px;
    margin: 36px 22px 0 22px;
}
.mcui-Grindstone > .mcui-output {
    margin-top: 34px;
}


/* [[Template:Stonecutter]] */
.mcui-Stonecutter > * {
    display: inline-block;
    vertical-align: top;
}
.mcui-Stonecutter > .mcui-stonecutterArrow {
    background: url('https://minecraft.wiki/images/Grid_layout_Stonecutter_Arrow.png') no-repeat;
    width: 58px;
    height: 60px;
    margin: 9px 4px 0 4px;
}
.mcui-Stonecutter > .mcui-output {
    margin: 28px 0 28px 0;
}
.mcui-Stonecutter > .mcui-input {
    margin-top: 36px;
}
.mcui-Stonecutter .mcui-stonecutterSprite {
    margin: 4px 0 0 5px;
}

/* [[Template:Inventory]]: [[File:Steve inventory.png]]
   [[File:Grid layout Recipe Book Button.png]], [[File:Grid layout Arrow (small).png]],
   [[File:Grid layout Fire.png]], [[File:Grid layout Fire (inactive).png]],
   [[File:Grid layout Furnace Progress.png]], [[File:Grid layout Furnace Progress (inactive).png]],
   [[File:Grid layout Brewing Pipes.png]], [[File:Grid layout Brewing Paths Long.png]],
   [[File:Grid layout Brewing Fuel.png]], [[File:Inventory background.png]] */
.mcui-Inventory-Player-Steve {
    background-image: url('https://minecraft.wiki/images/Steve_inventory.png');
}
.mcui-Inventory-Recipe_Book-button {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Recipe_Book_Button.png');
}
.mcui-Inventory-Table-arrow {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Arrow_%28small%29.png');
}
.mcui-Inventory-Furnace-fire {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Fire.png');
}
.mcui-Inventory-Furnace-fire-inactive {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Fire_%28in-active%29.png');
}
.mcui-Inventory-Furnace-progress {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Furnace_Progress.png');
}
.mcui-Inventory-Furnace-progress-inactive {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Furnace_Progress_%28in-active%29.png');
}
.mcui-Inventory-Brewing_Stand-pipes {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Pipes.png');
}
.mcui-Inventory-Brewing_Stand-paths {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Paths_Long.png');
}
.mcui-Inventory-Brewing_Stand-fuel {
    background-image: url('https://minecraft.wiki/images/Grid_layout_Brewing_Fuel.png');
}
.mcui-Inventory-border {
    -webkit-border-image: url('https://minecraft.wiki/images/Inventory_background.png') 4 fill repeat;
    -moz-border-image: url('https://minecraft.wiki/images/Inventory_background.png') 4 fill repeat;
    -o-border-image: url('https://minecraft.wiki/images/Inventory_background.png') 4 fill repeat;
    border-image: url('https://minecraft.wiki/images/Inventory_background.png') 4 fill repeat;
}

.wikitable.crafting *,
.wikitable.crafting:after,
.wikitable.crafting:before {
    -webkit-box-sizing: unset;
    box-sizing: unset;
}


/* Diagram box for Races */
.diagram-box.prerequisite { 
    border-style: dashed;
    border-radius: 0;
}

/* End of Diagram Box */

.race-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 20px 0;
}

.race-item {
  position: relative;
  text-align: center;
  width: 200px; /* Increase width to allow more space for text */
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  background-color: #1d1e1e;
  transition: transform 0.2s, box-shadow 0.2s;
  line-height: 0; /* Prevents gaps caused by line height */
}
.race-item a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.race-item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.race-item img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px; /* Optional: Adds slightly rounded corners */
  display: block; /* Eliminates inline spacing */
  margin: 0 auto;
}

.race-name {
  font-size: 1em; /* Adjust font size for better fit */
  margin-top: 10px; /* Add some space above the text */
  font-weight: bold;
  word-wrap: break-word; /* Allow text to wrap if too long */
}

.navi-grid {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next row */
  gap: 30px; /* Space between items */
  justify-content: center; /* Center-align the grid */
  margin: 20px 0; /* Add vertical spacing */
}

.navi-item {
  position: relative;
  text-align: center;
  width: 200px;
  padding: 10px;
  background-color: #1d1e1e;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  overflow: hidden;
}

.navi-item a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.navi-item:hover {
  transform: scale(1.05); /* Slight zoom-in effect on hover */
  background-color: #323434; /* Change background on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

/* Add padding to the image to expand the clickable area */
.navi-item img {
  width: calc(100% - 20px); /* Adjust width to fit within the box */
  height: auto; /* Maintain aspect ratio */
  padding: 10px; /* Expand clickable area */
  object-fit: cover; /* Ensures the image fits perfectly */
  display: block; /* Removes extra inline spacing */
}

.navi-name {
  font-size: 1.1em; /* Font size for the name */
  margin-top: 10px; /* Space between the image and the text */
  font-weight: bold; /* Bold text */
  text-align: center;
  color: #fff; /* Text color */
  word-wrap: break-word; /* Handles long names */
}

/* Skills */
.navi-item:has(img[alt="Skills"]) {
  border-color: #A600D3;
}
.navi-item:has(img[alt="Skills"]) .navi-name a {
  color: #A600D3;
}

/* Magics */
.navi-item:has(img[alt="Magics"]) {
  border-color: #398BC2;
}
.navi-item:has(img[alt="Magics"]) .navi-name a {
  color: #398BC2;
}

/* Battlewills */
.navi-item:has(img[alt="Battlewills"]) {
  border-color: #FFA500;
}
.navi-item:has(img[alt="Battlewills"]) .navi-name a {
  color: #FFA500;
}

.navi-item:has(img[alt="Spiritual Magic"]) {
  border-color: #7349B3;
}
.navi-item:has(img[alt="Spiritual Magic"]) .navi-name a {
  color: #7349B3;
}

.navi-item:has(img[alt="Summoning Magic"]) {
  border-color: #3B62BB;
}
.navi-item:has(img[alt="Summoning Magic"]) .navi-name a {
  color: #3B62BB;
}
.navi-item:has(img[alt="Aspectual Magic"]) {
	border-color: #47ff91;
}
.navi-item:has(img[alt="Aspectual Magic"]) .navi-name a {
  color: #47ff91;
}

/* Resistances */
.navi-item:has(img[alt="Resistances"]) {
  border-color: #00a8a8;
}
.navi-item:has(img[alt="Resistances"]) .navi-name a {
  color: #00a8a8;
}

/* Intrinsic Skills */
.navi-item:has(img[alt="Intrinsic Skills"]) {
  border-color: #54fcfc;
}
.navi-item:has(img[alt="Intrinsic Skills"]) .navi-name a {
  color: #54fcfc;
}

/* Common Skills */
.navi-item:has(img[alt="Common Skills"]) {
  border-color: #54fc54;
}
.navi-item:has(img[alt="Common Skills"]) .navi-name a {
  color: #54fc54;
}

/* Extra Skills */
.navi-item:has(img[alt="Extra Skills"]) {
  border-color: #fcfc54;
}
.navi-item:has(img[alt="Extra Skills"]) .navi-name a {
  color: #fcfc54;
}

/* Unique Skills */
.navi-item:has(img[alt="Unique Skills"]) {
  border-color: #fca800;
}
.navi-item:has(img[alt="Unique Skills"]) .navi-name a {
  color: #fca800;
}

/* Ultimate Skills */
.navi-item:has(img[alt="Ultimate Skills"]) {
  border-color: #fc5454;
}
.navi-item:has(img[alt="Ultimate Skills"]) .navi-name a {
  color: #fc5454;
}


.animated > * {
  display: none;
}
.animated > .animated-active {
  display: block;
}
.animated-subframe > * {
  display: none;
}
.animated-subframe > .animated-active {
  display: block;
}

/* True Demon Lord Gradient (Purple Variants) */
.animated-text-gradient-demon {
  background: linear-gradient(to right, #800080, #a349a4, #9400d3, #a349a4, #800080);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: animated-text-gradient 2s linear infinite;
  font-weight: bold;
}

/* True Hero Gradient (Orange Variants) */
.animated-text-gradient-hero {
  background: linear-gradient(to right, #ff8c00, #ffa500, #ff4500, #ffa500, #ff8c00);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: animated-text-gradient 2s linear infinite;
  font-weight: bold;
}

@keyframes animated-text-gradient {
  to {
    background-position: -200% center;
  }
}

/* Keeps this at the bottom please, it determines the logo to use for main page */
@media only screen and (max-width: 750px) {
	.no-mobile {
		display: none;
	}
	
	.mobile-only {
		display: inherit;
	}
	.navi-item {
		width: 100px;
	}
	
	.navi-item img {
		width: 64px;
		height: 64px;
	}
}

.notaninfobox {
    position: relative;
    clear: right;
    margin: 0 0 1em 1em;
    width: 300px;
    font-size: 90%;
    background: var(--wiki-content-background-color--secondary);
    float: right;
    border: 1px solid #CCC;
    padding: 2px;
    overflow: auto
}

.mw-content-rtl .notaninfobox {
    clear: left;
    float: left;
    margin: 0 1em 1em 0
}

@media all and (max-width: 511px) {
    .notaninfobox {
        float:none;
        margin-left: 0;
        width: auto
    }

    .mw-content-rtl .notaninfobox {
        float: none;
        margin-right: 0
    }
}

@media all and (max-width: 337px) {
    .notaninfobox {
        margin-left:-16px;
        margin-right: -16px;
        border-left: none;
        border-right: none
    }
}

.notaninfobox > .infobox-title {
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    border: none
}

.notaninfobox .infobox-rows .infobox-header {
    text-align: center;
    font-size: 100%
}

.notaninfobox th + td > dl > dd,.notaninfobox th + td > ul {
    list-style: none;
    margin-left: unset
}

.infobox-imagearea {
    text-align: center;
    padding: 4px
}

.infobox-imagearea > div:not(:first-child) {
    padding-top: 1em
}

.infobox-imagearea img {
    max-width: 100%;
    height: auto
}

.mw-body-content .infobox-imagearea .animated {
    display: inline-flex;
    align-items: center
}

.infobox-imagearea li.gallerybox div.thumb {
    background: none;
    border: none;
    margin: 0
}

.infobox-imagearea ul.gallery,.infobox-imagearea li.gallerybox,.infobox-imagearea li.gallerybox div.thumb > div {
    margin: 0 !important
}

.infobox-imagearea li.gallerybox div.gallerytext {
    font-weight: bold;
    font-size: 100%;
    padding: 0
}

.infobox-imagearea .tabber .tabbertab,.infobox-imagearea ul.tabbernav li a,.infobox-imagearea ul.tabbernav li.tabberactive a {
    background: none;
    border: none
}

.infobox-imagearea ul.tabbernav {
    font: inherit;
    font-size: 100%
}

.infobox-imagearea ul.tabbernav li a:hover,.infobox-imagearea ul.tabbernav li.tabberactive a:hover {
    color: #000
}

:where(body.wgl-theme-dark) .infobox-imagearea ul.tabbernav li a:hover,:where(body.wgl-theme-dark) .infobox-imagearea ul.tabbernav li.tabberactive a:hover {
    color: #fff
}

.infobox-imagearea ul.tabbernav > li {
    margin-bottom: 5px;
    padding: 0
}

.infobox-imagearea ul.tabbernav > li > a {
    color: #595959;
    padding-bottom: 1px;
    display: block
}

:where(body.wgl-theme-dark) .infobox-imagearea ul.tabbernav > li > a {
    color: #a9a9a9
}

.infobox-imagearea ul.tabbernav > li > a::before {
    display: block;
    content: attr(alt);
    font-weight: bold;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden
}

.infobox-imagearea ul.tabbernav > li.tabberactive {
    border: none
}

.infobox-imagearea ul.tabbernav > li.tabberactive > a {
    font-weight: bold;
    border-bottom: 2px solid var(--infobox-header-background-color);
    color: var(--content-text-color)
}

.infobox-imagecaption {
    overflow: hidden;
    font-weight: bold;
    word-wrap: break-word
}

.notaninfobox .infobox-rows {
    display: table;
    margin: 0 !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 1px
}

.infobox-rows > tbody > tr > th {
    text-align: left;
    white-space: nowrap
}

.mw-body-content .infobox-rows p {
    margin: 0
}

.infobox-rows dl + dl {
    margin-top: -0.4em
}

.infobox-rows dl:last-child {
    margin-bottom: 0.2em
}

.infobox-footer {
    text-align: center
}

body.wgl-theme-light .drop-shadow-light img,body.wgl-theme-light img.drop-shadow-light,.drop-shadow img,img.drop-shadow {
    -webkit-filter: drop-shadow(0 0 5px rgba(0,0,0,0.4));
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.4));
    background: none
}

body.wgl-theme-dark .drop-shadow-dark img,body.wgl-theme-dark img.drop-shadow-dark,body.wgl-theme-dark .drop-shadow img,body.wgl-theme-dark img.drop-shadow {
    -webkit-filter: drop-shadow(0 0 5px rgba(195,195,195,0.4));
    filter: drop-shadow(0 0 5px rgba(195,195,195,0.4));
    background: none
}

.history-json, .chest-json, .chestcontents-json, .sound-json, .spawntable-json, .advancements-json, .achievements-json {
    display: none;
}

@media only screen and (min-width: 751px) {
	.no-mobile {
		display: inherit;
	}
	
	.mobile-only {
		display: none;
	}
}


/* Local Vector 2022 bridge: Reincarnated の色指定を使用 */
body.skin-vector-2022 {
    background-color: var(--wiki-body-background-color, #f6f6f6);
    background-image: var(--wiki-body-background-image, none);
    background-position: var(--wiki-body-background-position, center top);
    background-size: var(--wiki-body-background-size, cover);
    background-repeat: var(--wiki-body-background-repeat, no-repeat);
    background-attachment: var(--wiki-body-background-attachment, fixed);
}
.skin-vector-2022 .mw-page-container {
    background: transparent;
}
.skin-vector-2022 .vector-header-container,
.skin-vector-2022 .mw-body {
    background-color: var(--wiki-content-background-color, #fff);
    color: var(--wiki-content-text-color, #202122);
}
.skin-vector-2022 .mw-body a {
    color: var(--wiki-content-link-color, #36c);
}
@@ Line 44: / Line 44: @@
      --wiki-body-background-color: #F6F6F6;
      --wiki-body-background-color--rgb: 246,246,246;
-     --wiki-body-background-image: url(filepath://Background.png); /* please find the file path by viewing the image directly (click the image from the File: page) */
+     --wiki-body-background-image: url("/images/2/26/Background.png"); /* please find the file path by viewing the image directly (click the image from the File: page) */
      --wiki-content-background-color: #ffffff;
@@ Line 179: / Line 179: @@
      --wiki-body-background-color: #171717;
      --wiki-body-background-color--rgb: 23, 23, 23;
-     --wiki-body-background-image: url(filepath://Background.png); /* please find the file path by viewing the image directly (not at the File: page) */
+     --wiki-body-background-image: url("/images/2/26/Background.png"); /* please find the file path by viewing the image directly (not at the File: page) */
      --wiki-content-background-color: #202020;
MediaWiki:Common.css: Difference between revisions

Revision as of 12:54, 25 September 2026

Navigation menu

Search
