MediaWiki:Navbox.css

/*navbox*/
.navbox {
	width: 100%;
	font-size: 88%;
	margin: auto;
	clear: both;
	text-align: center;
}

.navbox-inner,.navbox-subgroup {
	width: 100%;
}

.navbox-group,.navbox-title,.navbox-abovebelow {
	padding: 0.25em 1em;
	line-height: 1.5em;
	text-align: center;
}

th.navbox-group {
	/*white-space: nowrap;*/
	text-align: left; /* Align Left cuz read words LTR, skim left side charaters first */
}

.navbox,.navbox-subgroup {
	background: var(--theme-page-background-color);
}

.navbox-list {
	line-height: 1.5em;
	border-color: var(--theme-page-background-color);
}

/* Navbox colors */
.navbox-title a, .navbox-group a {
	color: var(--theme-link-color);
}

.navbox-title, .navbox-group, .navbox-title .mw-collapsible-text {
	color: var(--theme-page-text-color);
}

.navbox-border {
	border-radius: 5px;
	border: 2px solid var(--pi-tabber-bg-color);
	margin-top: 10px;
	margin-bottom: 10px;
}

.navbox-odd {
	background: var(--theme-page-background-color);
}

/* Dark mode navbox */
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-title {
	background: #1F1F1F;
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-subgroup .navbox-title {
	background: var(--theme-color-6);
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-title {
	background: #161616;
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-abovebelow,
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) th.navbox-group,
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-group,
:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-subgroup .navbox-abovebelow {
	color: var(--theme-page-text-color);
	background: #282828 !important;
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-image {
	background: var(--pi-rows-color);
}

:is(.theme-fandomdesktop-dark, .theme-fandommobile-dark) .navbox-even {
	background: var(--theme-page-background-color--secondary);
}

/* Light mode navbox */
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-title {
	background: var(--theme-color-6);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-subgroup .navbox-title {
	background: var(--theme-color-7);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-title {
	background: var(--theme-color-4);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-abovebelow,
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) th.navbox-group,
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-group,
:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-subgroup .navbox-abovebelow {
	color: var(--theme-page-text-color);
	background: var(--theme-color-7);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-image {
	background: var(--theme-color-6);
}

:is(.theme-fandomdesktop-light, .theme-fandommobile-light) .navbox-even {
	background: var(--pi-tabber-bg-color);
}

table.navbox {
	margin-top: 1em;
}

table.navbox table.navbox {
	margin-top: 0;
}

table.navbox + table.navbox {
	margin-top: -1px;
}

.navbox .hlist td dl,.navbox .hlist td ol,.navbox .hlist td ul,.navbox td.hlist dl,.navbox td.hlist ol,.navbox td.hlist ul {
	padding: 0.125em 0;
}

.page-content .navbox .hlist dl, .page-content .navbox .hlist ol, .page-content .navbox .hlist ul {
	margin: 0;
	padding: 0;
}

.hlist dd,.hlist dt,.hlist li {
	display: inline;
}

.hlist .inline,.hlist .inline dl,.hlist .inline ol,.hlist .inline ul,.hlist dl dl,.hlist dl ol,.hlist dl ul,.hlist ol dl,.hlist ol ol,.hlist ol ul,.hlist ul dl,.hlist ul ol,.hlist ul ul {
	display: inline;
}

.hlist dt:after {
	content: ":"
}

.hlist dd:after,.hlist li:after {
	content: " · ";
	font-weight: bold;
}

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

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

.hlist dd dd:first-child:before,.hlist dd dt:first-child:before,.hlist dd li:first-child:before,.hlist dt dd:first-child:before,.hlist dt dt:first-child:before,.hlist dt li:first-child:before,.hlist li dd:first-child:before,.hlist li dt:first-child:before,.hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}

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

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

.hlist ol {
	counter-reset: listitem;
}

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

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

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

.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}

.navbar ul {
	display: inline;
	white-space: nowrap;
}

.mw-body-content .navbar ul {
	line-height: inherit;
}

.navbar li {
	word-spacing: -0.125em;
}

.navbox .navbar {
	display: block;
	font-size: 100%;
}

.navbox-title .navbar {
	float: left;
	text-align: left;
	margin-right: 0.5em;
	width: 6em;
}

.collapseButton {
	float: right;
	font-weight: normal;
	margin-left: 0.5em;
	text-align: right;
	width: auto;
}

.navbox .collapseButton {
	width: 6em;
}

.mw-collapsible-toggle {
	font-weight: normal;
	text-align: right;
}

.navbox .mw-collapsible-toggle {
	width: 6em;
}

/* Portable Navbox */
.pi-theme-navbox {
  --pi-secondary-background: var(--theme-link-color);
  --pi-secondary-background--label: var(--theme-body-text-color);
  --pi-border-color:#0000;
  padding: 0 3px;
}
.pi-theme-navbox .pi-data {
  padding:0;
}
.portable-infobox.pi-theme-navbox .pi-item {
  border:0;
  margin: 3px 0;
  grid-column-gap: 3px;
}
.portable-infobox.pi-theme-navbox :is(.pi-data-label,.pi-data-value) {
  line-height: 1.5em;
  font-size: .7em;
  padding: 0.25em 1em;
}
.portable-infobox.pi-theme-navbox .pi-data-label {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Align Left cuz read words LTR, skim left side charaters first */
  flex-basis:200px;
  background-color: var(--custom-tertiary-color);
  color: var(--custom-tertiary-color-text);
}
.portable-infobox.pi-theme-navbox .pi-data-value {
  flex-basis:100%;
}
.portable-infobox.pi-theme-navbox .pi-data:nth-child(odd) .pi-data-value {
  background-color: var(--theme-page-background-color--secondary);
}

/* For Template:Characters_Navbox */
.navbox-list-top > div > div {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Adds Unknown image for not uploaded files and hides redlink */
.navbox-list a.new[href*="Special:Upload"] {
	display: inline-flex;
	width: 45px;
	height: 45px;
	background-image: url(https://wiki.zombiepanicsource.com/images/8/85/Placeholder_InfoGame.png);
	background-size: cover;
	vertical-align: middle;
	font-size: 0;
}
/* Handle default [[Template:Item]] usage which is 30px */
.navbox-items.navbox-list a.new[href*="Special:Upload"],
.navbox-items .navbox-list a.new[href*="Special:Upload"] {
	display: block;
	width: 30px;
	height: 30px;
	background-image: url(https://wiki.zombiepanicsource.com/images/8/85/Placeholder_InfoGame.png);
	background-size: cover;
	font-size: 0;
}

.skin-fandommobile .navbox-subgroup tr > th.navbox-group {
  max-width: 120px;
  width: 120px;
  overflow-wrap: break-word;
  text-wrap: wrap;
  padding: 0.25em;
}

.navbox-agent-content, .flex-table {
	display: flex;
	flex-wrap: wrap;
}

.navbox-agent-section, .flex-table-section {
	flex-grow: 1;
	border: 1px solid var(--pi-tabber-bg-color);
	min-width: 100px;
}

.navbox-agent-section-header, .flex-table-section-header {
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--theme-page-background-color--secondary);
	padding: 0 10px;
	font-weight: bold;
}

.flex-table-section-flex {
    display: flex;
    gap: 10px;
    justify-content: center;
}