MediaWiki:Common.css: Difference between revisions

Latest revision as of 17:07, 5 December 2025

/**********************
*** Start variables ***
**********************/
:root {
	--wiki-content-background-color: #13161a;
	--wiki-content-background-color--secondary: #1a1e23;
	--wiki-content-background-color--tertiary: #21252a;
	--wiki-content-text-color: #cbced1;
	--wiki-accent-color: #131313;
	--wiki-accent-label-color: #ff992c;
	
	--wiki-body-dynamic-color: #cbced1;
	--wiki-content-border-color: #2e3237;
	--wiki-content-border-color--accent: var(--wiki-content-border-color);
	
	/* ability Templates */
	--ability-background-color: var(--wiki-content-background-color--tertiary);
	--ability-border-inner-color: var(--wiki-content-background-color--secondary);
	--ability-upgrade-background-color: var(--wiki-accent-color);
	--ability-upgrade-separation-color: var(--wiki-content-background-color--tertiary);
	--ability-upgrade-border-inner-color: var(--wiki-content-background-color--tertiary);
	--ability-border-inner-color: var(--wiki-content-background-color--secondary);
	--ability-border-outer-color: var(--wiki-body-dynamic-color);
	--ability-icon-background-color: #FEAE34;
	--ability-icon-boder-inner-color: #FBDF6B;
	--ability-icon-boder-outer-color: var(--ability-border-outer-color);
	--ability-upgrade-border-outer-color: var(--ability-border-outer-color);
	--ability-grid-border-color: var(--ability-border-outer-color);
	--ability-grid-background-color: #9999;
	--ability-grid-cells-background-color: rgb(0 0 0 / .5);
	--ability-grid-center-background-color: white;
	--ability-grid-influence-background-color: aqua;
	--ability-grid-influence-all-background-color: #950000;
	--ability-grid-influence-source-background-color: #0a3;
	/* ability template end */
	
	/* oo-ui */
	--background-color-base: #1a1a1a;
	--color-emphasized: #eee;
}

/**********************
***  End variables  ***
**********************/

/********************************
* Start environment adjustments *
********************************/

.mw-datatable th {
	background-color: #464543;
}

#mw-content .toc ul a * {
	filter: saturate(50%);
}

#mw-content, #content-bottom-stuff {
background: linear-gradient(to right, #15181b,#202327,#15181b);
filter: drop-shadow(black 0 0 3rem);
border-inline: solid #BEA064;
outline: solid #13161a 1em;
}

/* cargo tables */
table.cargoTable.noMerge tr:nth-child(2n+1) {
	background: #2b2b2b;
}
table.cargoTable.noMerge tr:nth-child(2n) {
	background: #202020;
}

/*********************************
***  End environment adjustments *
*********************************/

/**************************
* 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 {
	flex: 1;
}

.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: color-mix(in srgb, var(--wiki-content-dynamic-color) 50%, transparent);
	transition: all 0.3s;
	cursor: pointer;
	overflow: auto;
}

@supports not (color:color-mix(in srgb, #000, transparent)) {
	.spoiler-content {
		background-color: var(--wiki-content-dynamic-color--secondary);
	}	
}

.spoiler-content > * {
	pointer-events: none;
	opacity: 0;
	transition: all 0.3s;
}

.spoiler-content.show {
	background-color: transparent;
}

.spoiler-content.show > * {
	pointer-events: unset;
	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,
.link-icon.notext .fallback {
	display: inline-block;
}

/********* [[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 *
**********************/

/*********************************
* Used by [[Template:TOC limit]] *
**********************************/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}
/*************************
* End Template:TOC limit *
**************************/

/*********************************
* Used by [[Template:TOC right]] *
**********************************/
@media all and (min-width: 720px) {
	.tocright {
		float: right;
		clear: right;
		margin: 0 0 0.5em 1em; 
	}
}
/*************************
* End Template:TOC right *
**************************/

/***************************
*** Start general styles ***
***************************/

/* general graphics are pixel art */
.mw-body {
	image-rendering: pixelated;
}

.right {
	text-align: right;
}

.ranger-navbox {
	clear: both;
}

table.table-align-top tr {
	vertical-align: top;
}

/* enlarge small pixel icons in image viewer */
.mw-mmv-image img {
	min-width: 10em;
	min-height: 10em;
 	image-rendering: pixelated;
}

.mw-parser-output .plain-link a.external {
	background: none;
	padding-right: 0;
}

/***************************
**** End general styles ****
***************************/

/**************************
* Start Portable infobox *
**************************/

.portable-infobox.pi-theme-default {
	background-color: #1a1e22;
	--pi-secondary-background: #1a1e22;
}

.portable-infobox .pi-image img {
    width: 200px;
    height: auto;
}

.portable-infobox .pi-data[data-source=caption] {
  text-align: center;
}

/***************************
*** End Portable infobox ***
***************************/

/**************************
* Start [[Module:Abilities]] *
**************************/

.ability-supercontainer {
	width: fit-content;
	display: inline-block;
	margin-bottom: 1em;
	margin-right: 2em;
}
.ability-container {
	border-radius: 0.2em;
	box-shadow: 0 0 0 0.15em var(--ability-border-inner-color), 0 0 0 0.3em var(--ability-border-outer-color);
	background-color: var(--ability-background-color);
	margin: 1em 0.3em 0.3em;
	position: relative;
	z-index: 1;
}
.ability-container.ability-subability {
	margin-top: -.1em;
	margin-left: 2em;
	margin-right: 1em;
	position: relative;
	z-index: 0;
}
.ability-subability .ability-header {
	padding: 0.2em 0.5em;
}
.ability-header {
	display: flex;
	align-items: center;
	background: #fff1;
	padding: 0 0.5em;
}
.ability-header div {
	margin: 0 0.5em 0 0;
}
.ability-name{
	font-weight:bold;
	font-size: 1.5em;
}
.ability-subability .ability-name{
	font-size:1.3em
}
.ability-icons img {
	margin: 0 0 0 1em;
	padding: 0.1em;
	background-color: var(--ability-icon-background-color);
	box-shadow: 0 0 0 0.15em var(--ability-icon-boder-inner-color), 0 0 0 0.2em var(--ability-icon-boder-outer-color);
	border-radius: 0.2em;
	image-rendering: smooth;
}

.ability-body {
	display: flex;
	align-items: stretch;
}

.ability-body > div{
	display: inline-block;
	padding: 0.6em 0.8em 0.8em;
}

.ability-body > div:first-child {
	flex-grow: 1;
}

.ability-body > div:last-child {
	margin-top: 1px;
	border-left: 1px gray solid;
	min-width: 9em;
}

.ability-description {
	margin: 0 0 0.8em;
}

.ability-upgrades {
	background-color: var(--ability-upgrade-background-color);
	padding: 0 0.6em;
	box-shadow: 0 0 0 0.15em var(--ability-upgrade-border-inner-color),0 0 0 0.3em var(--ability-upgrade-border-outer-color);
	border-radius: 0.2em;
}

.ability-upgrades > div{
	padding: 0.3em 0;
}

.ability-upgrades > div:not(:first-child) {
	border-top: 0.1em solid var(--ability-upgrade-separation-color);
}

/* ability grid */
.ability-grid{
	float: right;
}

.influence-grid{
	display: inline-grid;
	grid-template: repeat(5, 10px) / repeat(5, 10px);
	column-gap: 3px;
	row-gap: 3px;
	padding: 0.2em;
	border: 1px solid var(--ability-grid-border-color);
	border-radius:0.3em;
	background-color: var(--ability-grid-background-color);
}

.influence-grid div{
	background-color: var(--ability-grid-cells-background-color);
}

.influence-grid div.influence-center{
	background-color: var(--ability-grid-center-background-color);
	box-shadow: 0 0 0 1px var(--ability-grid-center-background-color);
}
.influence-grid div.influence-blue{
	background-color: var(--ability-grid-influence-background-color);
}
.influence-grid div.influence-red{
	background-color: var(--ability-grid-influence-all-background-color);
}
.influence-grid span.influence-source{
	background-color: var(--ability-grid-influence-source-background-color);
	display: block;
	width: 60%;
	height: 60%;
	margin: 20%;
	border-radius: 50%;
	border: 1px solid #52ff14;
}
/* ability grid end */

div.ability-stats {
	clear: both;
	text-align: center;
}

/***************************
* End [[Module:Abilities]] *
***************************/

/********************************
* Start [[Template:LevelStats]] *
********************************/

/*  dim table cells from the except the first ones when stat values don't change */
.grey-from2 td:nth-child(n+2){
	color:gray;
}
.grey-from3 td:nth-child(n+3){
	color:gray;
}
.grey-from4 td:nth-child(n+4){
	color:gray;
}

/******************************
* End [[Template:LevelStats]] *
******************************/

/*******************************
* Start [[Template:TreeChart]] *
*******************************/

.tree {
	margin: 0 0 1em;
	text-align: center;
}

.tree,
.tree ul,
.tree li {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.tree,
.tree ul {
	display: table;
}

.tree ul {
	width: 100%;
}

.tree li {
	display: table-cell;
	padding: .5em 0;
	vertical-align: top;
}

.tree li>span {
	display: inline-block;
	position: relative;
	margin: 0.3em .8em .8em;
	padding: .2em .5em;
	background-color: var(--wiki-content-background-color--tertiary);
	border-radius: .2em;
}

.tree.left li>span {
	text-align: left;
}

/* lines */
.tree li:before,
.tree ul:before,
.tree li>span:before {
	outline: solid 1px var(--wiki-content-border-color);
	content: "";
	position: absolute;
	z-index: -1;
}

/* horizontal lines */
.tree li:before {
	left: 0;
	right: 0;
	top: 0;
}

.tree li:first-child:before {
	left: 50%;
}

.tree li:last-child:before {
	right: 50%;
}

/* vertical lines */
.tree ul:before,
.tree li>span:before {
	height: 0.6em;
	left: 50%;
}

.tree ul:before {
	top: -.9em;
	height: 0.8em;
}

.tree li>span:before {
	top: -1em;
}

/* no connection upwards for root nodes */
.tree>li {
	margin-top: 0;
}

.tree>li:before,
.tree>li:after,
.tree>li>span:before {
	outline: none;
}

/* for tree diagram going up */
.treeup {
	rotate: 180deg;
}

.treeup li>span {
	rotate: 180deg;
}

.treeup li>span:before {
	top: auto;
	bottom: -1em;
}

/*****************************
* End [[Template:TreeChart]] *
*****************************/

/********************************
* Start [[Template:Production]] *
********************************/

.production-container {
	padding: .2em;
	display: inline-flex;
	align-items: center;
	background-color: var(--wiki-content-background-color--tertiary);
}

.production-container .production-arrow {
	font-size: 4em;
	padding: 0 0.1em 0.15em;
}

.production-container .production-in-out {
	border: 1px solid var(--wiki-content-border-color);
	border-radius: 0.5em;
	padding: 0 0.4em;
	margin: 0 0.4em;
}

.production-container .production-building {
	text-align: center;
	border: 1px solid var(--wiki-content-border-color);
	border-radius: 0.5em;
	padding: 0.4em;
	background: var(--wiki-content-background-color--secondary);
}

/******************************
* End [[Template:Production]] *
******************************/

/**********************************
* Start [[Template:CaptionImage]] *
**********************************/

div.caption-image {
	margin: 0.8em 0 0.8em 0.8em;
	text-align: center;
}
div.caption-image img{
	padding: 0.4em;  
}
div.caption-image > div{
	padding: 0.2em;
	background: var(--wiki-content-background-color--secondary);
	margin: 0.2em 0 0;
}

/********************************
* End [[Template:CaptionImage]] *
********************************/

/**************************
* Start Sidebar icons     *
**************************/

#p-SFK.mw-portlet .mw-list-item a span:before {
	content: '';
	display: inline-block;
	vertical-align: bottom;
	height: 1.3em;
	width: 1.3em;
	background-size: contain;
	background-repeat: no-repeat;
	margin: 0 0.3em;
}

.mw-portlet #n-Units span:before {
	background-image: url(/images/mbhh_sfki/9/9f/Frontpage-units.png);
}

.mw-portlet #n-Heroes span:before {
	background-image: url(/images/mbhh_sfki/1/13/Frontpage-hero.png);
}

.mw-portlet #n-Characters span:before {
	background-image: url(/images/mbhh_sfki/1/15/Frontpage-star.png);
}

.mw-portlet #n-Kingdoms span:before {
	background-image: url(/images/mbhh_sfki/8/88/Frontpage-beer.png);
}

.mw-portlet #n-Resources span:before {
	background-image: url(/images/mbhh_sfki/3/39/Frontpage-resources.png);
}

.mw-portlet #n-Buildings span:before {
	background-image: url(/images/mbhh_sfki/9/95/Frontpage-house.png);
}

.mw-portlet #n-Monsters span:before {
	background-image: url(/images/mbhh_sfki/2/20/Frontpage-bone.png);
}

.mw-portlet #n-Bosses span:before {
	background-image: url(/images/mbhh_sfki/b/b7/Frontpage-blood.png);
}

.mw-portlet #n-Stats span:before {
	background-image: url(/images/mbhh_sfki/9/97/Frontpage-stats.png);
}

.mw-portlet #n-Combat span:before {
	background-image: url(/images/mbhh_sfki/7/7a/Frontpage-combat.png);
}

.mw-portlet #n-Items span:before {
	background-image: url(/images/mbhh_sfki/f/fd/Frontpage-trophy.png);
}

.mw-portlet #n-Relics span:before {
	background-image: url(/images/mbhh_sfki/4/45/Frontpage-chalice.png);
}

/**************************
* End Sidebar icons       *
**************************/

/************************
* Start Template:Navbox *
* based https://defaultloadout.wiki.gg/wiki/MediaWiki:Gadgets/ranger/main.css
* and https://support.wiki.gg/wiki/MediaWiki:Gadgets/ranger/variables.css
*************************/

/* variables */
.ranger-navbox{
  --navbox-background: var(--wiki-content-background-color); /* 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);
  --navbox-pill-selflink-background: color-mix(in srgb, var(--wiki-accent-color) 15%, transparent);/* background of pills with selflink in them */  
  /* 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;
    --navbox-pill-selflink-background: var(--wiki-content-background-color--secondary);
  }
}
/***************
* End fallback *
****************/

/*********************************************************************************************************************
* 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   •   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 *
*********************************************/

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

.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);
  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;
}
/* for desktop view */
.ranger-navbox.list-align-left .ranger-listbox{
  --navbox-list-text-align: left;
}
.ranger-navbox.list-align-center .ranger-listbox{
  --navbox-list-text-align: center;
}
.ranger-navbox.list-align-right .ranger-listbox{
  --navbox-list-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-list-align-left .ranger-listbox{
  --navbox-list-text-align--mobile: left;
}

.ranger-navbox.mobile-list-align-center .ranger-listbox{
  --navbox-list-text-align--mobile: center;
}
.ranger-navbox.mobile-list-align-right .ranger-listbox{
  --navbox-list-text-align--mobile: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
  text-align: var(--navbox-list-text-align);
  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, left);
    max-width: unset !important;
  }
  .ranger-navbox .ranger-group > *,
  .ranger-navbox .ranger-subgroup > *{
    max-width: unset !important;
  }  
  .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-listbox > .ranger-wrap{
    text-align: var(--navbox-list-text-align--mobile, left);
  }
  .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 .ranger-row .ranger-row.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 with selflink
 *
 * Only select the deepest level for nested lists.
 * We have to use :has() to pick pills with selflink and
 * all browsers which support :has() should also support :is() and :not(),
 * therefore we can use :is() and :not() here safely.
 */
.ranger-navbox.pill .hlist .ranger-list :is(li,dt,dd):has(.mw-selflink):not(:has(li, dt, dd)){ 
  background: var(--navbox-pill-selflink-background);
}
/**** `.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);
	}
	/* pill with selflink
	 *
	 * Only select the deepest level for nested lists.
	 * We have to use :has() to pick pills with selflink and
	 * all browsers which support :has() should also support :is() and :not(),
	 * therefore we can use :is() and :not() here safely.
	 */
	.ranger-navbox.pill-mobile .hlist .ranger-list :is(li,dt,dd):has(.mw-selflink):not(:has(li, dt, dd)){ 
	  background: var(--navbox-pill-selflink-background);
	}
}
/*********************
* End Template:Navbox*
**********************/

.tooltip-decoration{
	cursor: help;
	border-bottom: 1px dotted #397d75;
}

/**********************
* Start Template:Card *
**********************/

.card-container {
  position: relative;
  width: 200px;
  height: 300px;
  text-align: center;
  display: inline-block;
}

.card-container div {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

.card-background {
  height: 100%;
  background-size: 150px 220px;
}

.card-background.card-background-magical {
  background-image: url(/images/mbhh_sfki/4/4a/Card_background_magical.png);
}

.card-background.card-background-physical {
  background-image: url(/images/mbhh_sfki/5/59/Card_background_physical.png);
}

.card-frame {
  background-image: url(/images/mbhh_sfki/b/bd/Card_border.png);
  background-size: 180px 240px;
  height: 100%;
}

.card-indicator {
  top: 7px;
}

.card-indicator-background {
  background-image: url(/images/mbhh_sfki/9/95/Card_indicator_background.png);
  background-size: 48px 48px;
  height: 48px;
  top: 15px;
}

.card-label {
  border-image-source: url("/images/mbhh_sfki/7/75/Card_banner.png");
  border-image-slice: 4 37 8 37 fill;
  border-image-width: 16px 182px 21px 182px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: repeat repeat;
  border-style: solid;
  top: 64px;
  padding: 10px 10px;
  font-size: 1.2em;
}

.card-unit {
  bottom: 110px;
}

.card-damage-type {
  bottom: 64px;
}

/********************
* End Template:Card *
********************/