MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');

@font-face {
  font-family: "MagicSchoolOne";
  font-style: normal;
  font-weight: normal;
  src: url('https://vignette.wikia.nocookie.net/idle-wizard/images/c/ce/MagicSchoolOne.ttf') format('truetype');
}

@font-face {
  font-family: "EnchantedLand";
  font-style: normal;
  font-weight: normal;
  src: url('https://vignette.wikia.nocookie.net/idle-wizard/images/b/b3/Enchanted_Land_DEMO.otf') format('opentype');
}

/* Main page Taken from Dead Cells Wiki and adapted */

#fplinks {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}

.fp-section {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

#fp-container {
    display: grid;
    grid-template-areas: "a" "b" "c";
    grid-template-columns: 100%
}

@media screen and (min-width: 990px) {
    #fp-container {
        grid-template-areas: "a b" "c b";
        grid-template-columns: 60% 40%;
    }
}

@media screen and (min-width: 1350px) {
    #fp-container {
        grid-template-areas: "a b" "c b";
        grid-template-columns: auto 400px;
    }
}

.fpbox {
  width:calc(100% - 2px);
  box-sizing:border-box;
}


#fp-top {
  grid-area:a
}
#fp-flex {
  grid-area:b
}
#fp-bottom {
  grid-area:c
}

.dc_btext{
    margin-top:5px;
    font-weight:800;
}

.wikitable.fp {
	width:100%;
    text-align: center;
    margin: 10px;
    padding: 20px;
    justify-content: center
}

.newupdate {
    display:flex;
    justify-content:center;
}
/* End main page */

/************
* Infoboxes *
*************/
.portable-infobox {
    --pi-background: var(--wiki-content-background-color--secondary);
    --pi-secondary-background: var(--wiki-guidebox-colour);
    --pi-secondary-background-label: #ffffff;
    --pi-border-color: rgba(var(--wiki-content-border-color--rgb),0.6);
    border-radius: 5px;
    border: 1px solid var(--wiki-content-border-color)
}

.portable-infobox .pi-title {
    background-color: var(--pi-secondary-background);
    color: var(--pi-secondary-background-label);
    margin-bottom: 10px;
}

.portable-infobox .pi-secondary-background {
	background-color: var(--pi-secondary-background);
    color:var(--pi-secondary-background-label);
}

.druid-container-extension .druid-grid-section-Default {
    text-align:center;
}
/****************
* End infoboxes *
*****************/


/* Tables */

table {
    display: table;
    white-space: unset;
}


/* Front page structure */

/* Flex */
@media screen and (min-width: 1080px){
	.page-Support_Wiki .mw-parser-output {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.mainpage-left {
		width: calc(100% - 550px);
	}
	.mainpage-right {
		width: 500px;
	}
}

.fpbox {
  margin: 5px;
  padding: 5px;
  overflow: auto;
  width: calc(100% - 2px);
}

.fpbox.plain {
  background: transparent;
  border: none;
  box-shadow: none;
}

.fpbox .heading,
.fpbox .mainheading,
.fpbox .welcome {
  margin: 0 0 10px;
  padding: 0 0 5px;
  overflow: auto;
}

.fpbox .mainheading,
.fpbox .welcome {
  font-size: 150%;
  font-weight: bold;
}

.fpbox .heading {
    text-align: center;
    font-size: 175%;
    font-family: Cinzel;
    font-weight: 40
}

.linkslabel {
  margin: 15px 5px 5px;
  padding: 0 0 5px;
}

/* Template:FP links styles */
.fplinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: stretch;
  text-align: center;
}

.fplink-outer {
  padding: 5px;
  flex-basis: calc(25% - 10px);
  width: calc(25% - 15px);
  min-width: 115px;
  display: inline-block;
  vertical-align: middle;
}

.fplink-wide {
  flex-basis: calc(33% - 10px);
  width: calc(33% - 15px);
}

.fplink-fullwidth {
  flex-basis: 100%;
  width: calc(100% - 15px);
  font-weight: bold;
}

.fplink {
  padding: 0.5em;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: table;
}

.fplink-plain {
  background: transparent;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.fplink-inner {
  display: table-row;
}

.fplink a {
  display: table-cell;
  vertical-align: middle;
}

.fplink img {
  max-width: 150px;
  width: 100%;
  height: auto;
}

/* Auto-resize front page video to fit smaller columns */
.fpbox .embedvideowrap {
  width: 100% !important;
  max-width: 480px;
  margin: 0 auto;
}

.fpbox .embedvideowrap iframe {
  width: 100% !important;
}

/* Multi-column box support */
.fp-container main .columns .leftcol,
.fp-container .columns .rightcol {
  width: 100%;
  margin: 0;
  padding: 0;
}

@media (min-width: 990px) {
  .fp-container .columns .leftcol {
    float: left;
    width: 50%;
  }
  .fp-container .columns .rightcol {
    float: right;
    width: 50%;
  }
}

/* this CSS governs the responsive 2 column main page layout */
#fp-2column.fp-container {
  display: grid;
  grid-template-areas: "a" "b" "c";
  grid-template-columns: 100%;
}

@media screen and (min-width: 990px) {
  #fp-2column.fp-container {
    grid-template-areas: "a b" "c c";
    grid-template-columns: 50% 50%;
  }
}
@media screen and (min-width: 1350px) {
  #fp-2column.fp-container {
    grid-template-areas: "a b" "c b";
    grid-template-columns: auto 520px;
  }
}
#fp-top {
  grid-area: a;
}

#fp-flex {
  grid-area: b;
}

#fp-bottom {
  grid-area: c;
}

/* end responsive 2 column main page layout */
/* Front page appearance styles */
.fpbox .heading,
.fpbox .mainheading {
  border: 0;
  border-bottom: 1px solid transparent;
}

.fpbox {
    border: 1px #395157 solid;
    border-radius: 3px;
}

.fplink:not(.fplink-plain) {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid #505050;
}

.fplink-fullwidth .fplink:not(.fplink-plain) {
  background: rgba(0, 0, 0, 0.1);
}

.linkslabel {
  border-bottom: 2px solid #505050;
}

.mw-parser-output .fp-main-heading {
  border: 0;
  margin-bottom: 0.5rem;
  font-size: 1.6em;
  color: var(--wiki-accent-color);
}

.fp-help-outer-container {
  display:flex;
  flex-direction:column;
  gap:2em;
}

@media screen and (min-width:1200px) {
  .fp-help-outer-container {
    display:flex;
    flex-direction:row;
  }
}

.fp-help-column-container {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.fp-help-inner-container {
  padding: 0.5em;
  border-radius: 0.2rem;
  background: rgba(var(--wiki-content-text-mix-color-95--rgb), 0.7);
  border: 1px solid rgba(var(--wiki-accent-color--rgb), 0.5);
  box-shadow: 0 0 0.5rem #0002;
}

.fp-help {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 1.3em 1.5em;
  margin-block: 1.25em;
}
@media screen and (max-width: 1000px) {
  .fp-help {
    gap: 0.5rem 1rem;
    margin-block: 0.7em;
  }
  .fp-help-section {
    flex-grow: 1;
  }
}

.mainpage-left {
  width:80%;
}

.fp-help-section {
  text-align: left;
  border: 1px solid rgba(var(--wiki-accent-color--rgb), 0.2);
  padding: 1rem 1.1em;
  border-radius: .1rem;
  min-width: 15em;
  box-sizing: border-box;
  background: rgba(var(--wiki-content-dynamic-color--inverted--rgb), 0.18);
}

.fp-help-inner-container > h2 {
  margin-top: 0.5em;
  padding-bottom: 0.3em;
}

.fp-help-section > h3 {
  text-align: center;
  padding: 0.4em 0;
  font-size: 130%;
  font-weight: 400;
  margin-top: 0;
}


/*****************************
* Used by [[Template:Ambox]] *
******************************/
.ambox {
    background-color: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-border-color);
    border-collapse: collapse;
    font-size: 95%;
    margin: 0 auto 2px auto;
    width: 80%;
}

.ambox-gray {
    border-left-color: #383838;
}

.ambox + .ambox {
     margin-top: -2px;
}

.ambox-text {
     padding: 0.25em 0.5em;
}

.ambox-image {
     padding: 2px 0px 2px 0.5em;
     text-align: center;
     width: 60px;
}

.ambox-tiny .ambox-image {
     padding: 2px 0.5em;
     text-align: left;
     width: auto;
}

/* Ambox colors */
.ambox-blue {
     border-left: 10px solid #1e90ff;
}

.ambox-red {
     border-left: 10px solid #b22222;
}

.ambox-orange {
     border-left: 10px solid #f28500;
}

.ambox-yellow {
     border-left: 10px solid #f4c430;
}

.ambox-purple {
     border-left: 10px solid #9932cc;
}

.ambox-gray {
     border-left: 10px solid #bba;
}

.ambox-green {
     border-left: 10px solid #228b22;
}
/*********************
* End Template:Ambox *
**********************/

.documentation {
 clear: both;
 margin-top: 1em;
 border: 1px solid var(--table-border);
 background-color: rgb(var(--wiki-color-rgb),0.3);
 padding: 0.5em;
 border-radius: 3px;
}

.documentation-header {
 font-size:1.75em;
 margin-top:1em;
 font-family:sans-serif;
 line-height:1.3;
 margin-bottom:0.25em;
 padding:0;
 background:none;
 font-weight:normal;
 overflow:hidden;
 border-bottom: 1px solid var(--table-border);
}

.documentation-view-edit {
 float: right;
 font-size: small;
 position:relative;
 height:0px;
 top:15px;
}


/***************************
* Used by [[Template:Key]] *
****************************/
.key {
	display:inline-block;
	white-space:nowrap;
}

.key kbd {
  padding: 0.1em 0.6em 0.1em 0.6em; 
  margin-right:2px; 
  font-size:85%; 
  font-family:inherit; 
  font-style:normal;
  border-radius: .2em; 
}

/* Dark Wiki Variation */
.keysDark {
  color:black; 
  border: 1px solid rgb(170, 170, 170); 
  box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221); 
  background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238)); 
  background-color: rgb(249, 249, 249); 
}

/* Light Wiki Variation */
.keysLight {
  color:white; 
  border: 1px solid rgb(0, 0, 0); 
  box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0); 
  background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(15, 15, 15), rgb(30, 30, 30)); 
  background-color: rgb(30, 30, 30); 
}


/* Style for horizontal lists (separator following item).
   IE8-specific classes are assigned in [[MediaWiki:Common.js/IEFixes.js]].
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 6 (2014-05-09)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0;
    display: inline;
}
/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
    display: inline;
}
/* Generate interpuncts */
.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;
}
/* For IE8 */
.hlist dd.hlist-last-child:after,
.hlist dt.hlist-last-child:after,
.hlist li.hlist-last-child:after {
    content: none;
}
/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}
.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
    content: ") ";
    font-weight: normal;
}
/* For IE8 */
.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;
}
/* 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) " ";
    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) " ";
}

/* Template:DPL parameter */
table.wikitable.dplparameter {
	border-spacing:0;
}
table.wikitable.dplparameter > * > tr > td:first-child {
	background-color:var(--dplparameter-background);
	padding:5px;
	width:200px;
	font:130% Courier, monospace;
}
table.wikitable.dplparameter > * > tr > td:nth-child(2) {
	padding:5px;
}

#n-Submit-a-ticket > a > span::after {
  background:url(https://commons.wiki.gg/images/9/9b/Wiki.gg_icon-pink.svg);
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center;
  content:'';
  display:inline-block;
  height:16px;
  width:16px;
  margin-left:7px;
}

#n-Submit-a-ticket > a > span {
  display:flex;
  align-items:center;
}


/* ----------------------------------------- */
/* OLD FANDOM CSS FOR REFERENCE */
/* ----------------------------------------- */


.mw-parser-output a:active,
.mw-parser-output a:hover {
    text-decoration: none;
}

.mw-parser-output a.extiw,
.mw-parser-output a.external {
    color: #0080FF;
}

/* plainlinks fix */
.plainlinks a.external:after {
    content: none !important;
}

/* ---------------------------------------- wikitable */
.ooui-theme-fandomooui .wikitable {
    background: #1c2229
}

.ooui-theme-fandomooui .wikitable > * > tr > th {
    background: #243241;
    border: 1px solid #395157;
}

.ooui-theme-fandomooui .wikitable>*>tr>td {
    border-color: #395157;
}

/* ---------------------------------------- wikitable caption (expand)*/
.wikitable.mw-collapsible.mw-expanded.mw-made-collapsible>caption {
    background-color: var(--wiki-guidebox-colour);
    margin-bottom: 10px;
    border: 1px solid var(--wiki-content-border-color);
}

/* ---------------------------------------- article-table */
.WikiaMainContent .article-table {
    background: #464645;
    border-collapse: collapse;
    border: none;
    margin: 1em 1em 1em 0;
}
.WikiaMainContent .article-table th {
    background-color: #282828;
    text-align: center;
}
.WikiaMainContent .article-table th,
.WikiaMainContent .article-table td {
    border-bottom: 1px #6C6B6B solid;
    padding: 6px 12px;
}

/* ---------------------------------------- Sortable table arrows */
/* --- Using GP images because fandom doesn't have any */
table.jquery-tablesorter th.headerSort {
    background-image: url(https://help.gamepedia.com/skins/HydraDark/images/dark/sort_both.png);
    background-repeat: no-repeat;
    background-position: center right;
}
table.jquery-tablesorter th.headerSortUp {
    background-image: url(https://help.gamepedia.com/skins/HydraDark/images/dark/sort_up.png);
}
table.jquery-tablesorter th.headerSortDown {
    background-image: url(https://help.gamepedia.com/skins/HydraDark/images/dark/sort_down.png);
}

/* ---------------------------------------- TOC */

.toc {
    border: 1px solid #395157;
    border-radius: 5px;
}

/* Title */

.toc .toctitle {
    text-align: center;
}
.toc .toctitle h2 {
    font-weight: bold;
}

/* List */
.mw-parser-output .toc ul {
    list-style-type: none;
    margin: 0 3px 0 0.5em;
}
.mw-parser-output .toc ul ul {
    margin: 0 3px 0 1.5em;
}

/* ---------------------------------------- Bullet List */
.mw-parser-output ul,
ul.mw-imagepage-linkstoimage {
    list-style-type: disc;
    margin: 0 0 0 1.6em
}

.templatesUsed ul {
    list-style-type: disc;
    margin-top: 0.3em;
}

/* -------------------------------------------------- hr tags */
hr {
    background-color: #404040;
    height: 1px;
    border: 0;
    margin: 0.2em 0;
}

/* ---------------------------------------- Code pages (View) */
.mw-highlight pre {
    white-space: pre-wrap;
}

/* ---------------------------------------- Toolbar */
.WikiaBarWrapper .tools-menu {
    bottom: 20px;
}

/* ---------------------------------------- Tabber */
.WikiaArticle .tabbertab {
    border: none !important;
}

.WikiaArticle .tabbernav {
    border: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.wds-tabs {
    border: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.centered .wds-tabs {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.wds-tabs__wrapper.with-bottom-border{
    margin-left:2px;
    margin-right:2px;
}

.WikiaArticle .tabbernav li {
    margin: 2px;
}

.WikiaArticle .tabbernav a:link {
    background-color: transparent;
    color: #99A9D9;
    border: none;
}

.WikiaArticle .tabbernav a:hover,
.WikiaArticle .tabbernav .tabberactive a,
.WikiaArticle .tabbernav .tabberactive a:hover {
    color: #99A9D9;
    background: #404040;
    border-bottom: 1px solid #99A9D9;
}

.WikiaArticle .tabbernav .tabberactive a {
    border-top: 1px solid #99A9D9;
}

.WikiaArticle .tabbernav a {
    transition-property: background-color, color;
    transition-duration: 0.2s;
}

/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

/* ---------------------------------------- Page border blur */
/* Header blur */
.wds-community-header {
    box-shadow:0 -6px 5px #321800;
}
.WikiaSiteWrapper .WikiaPage {
    padding-top: 6px;
}

 /* Content area blur */
.WikiaPage {
    border: 1px solid #002b36;
    box-shadow:0 0 20px #002b36;
}

/* ---------------------------------------- Advanced Tooltips */
/* Main CSS class of the tooltip */
body .main-tooltip {
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    border-radius: 2px;
    border: 1px solid #f5d68d;
}

/* Adds padding to the wrapper to make space for a shadow */
body #tooltip-wrapper {
    padding: 0 0 3px 3px
}

/* Hides tooltips with redlinks, not yet loaded ones and elements containing tooltip contents for advanced tooltips */
body .has-redlinks,
body .tooltip-loading,
body .advanced-tooltip .tooltip-contents {
    display: none;
}

body .tooltips-init-complete {
    cursor: help;
}


/* Tooltip wrap fix */
.spell-tooltip,
.class-tooltip,
.pet-tooltip,
.item-tooltip {
    white-space: nowrap;
}

/* ---------------------------------------- Mainpage nav */

.mainpage-nav-item {
    min-width:200px;
    line-height: 1.5;
    padding: 10px;
    margin: 5px;
    background-color: #243241;
    border: 1px solid #f5d68d;
    border-radius: 3px
}

.mainpage-nav-item:hover {
    background-color:#324960; 
    border: 1px solid #ffffff;
}
.mainpage-nav-item a {
    display: block;
    color: #D5D4D4;
    text-decoration: none;
}
/*
.mainpage-nav-item a.external:after {
    background-image: none;
}
*/

/* ---------------------------------------- Hover zoom */
/* Simple zoom on hover */
.iw-zoom-hover {
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -o-transform: scale(1); 
    -ms-transform: scale(1); 
    -moz-transform: scale(1);
    transform: scale(1);
    display: inline-block;
    position: relative;
}

.iw-easter-egg {
    height: 128px;
    width: 128px;
    -webkit-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -webkit-transform: scale(0.1); 
    -o-transform: scale(0.1); 
    -ms-transform: scale(0.1); 
    -moz-transform: scale(0.1);
    transform: scale(0.1);
    display: inline-block;
    position: relative;
}

.iw-zoom-hover:hover, .iw-easter-egg:hover {
    z-index: 999;
}


.iw-zoom-hover:hover {
    -webkit-transform: scale(1.25); 
    -o-transform: scale(1.25); 
    -ms-transform: scale(1.25); 
    -moz-transform: scale(1.25);
    transform: scale(1.25);
}

.iw-easter-egg:hover {
    -webkit-transform: scale(0.75); 
    -o-transform: scale(0.75); 
    -ms-transform: scale(0.75); 
    -moz-transform: scale(0.75);
    transform: scale(0.75);
}

/* ---------------------------------------- Items page */
.page-Items .WikiaRail {
  display:none;
}
.page-Items .WikiaMainContent {
  width:100%;
}

/* ---------------------------------------- Items icons */
.item-icon {
    cursor: default !important;
    display: grid;
}

.item-icon-bg, .item-icon-img {
    grid-column: 1;
    grid-row: 1;
}

.item-icon-bg, .item-icon-img {
  display: flex;
  justify-content: center;
  align-items: center;
  
  max-width: 76px;
  max-height: 76px;
}

.item-icon img {
    width: 100%;
    height: 100%;
}

.item-icon p {
    margin: 0 !important;
}

/* ---------------------------------------- Item Preset */
table.item-preset {
    border-spacing: 0px;
    display: table;
    table-layout: fixed;
}

table.item-preset td {
    margin: 0;
    padding: 0;
}

/* ---------------------------------------- Spell Slots */
.spell-slot {
    cursor: default !important;
    position: relative;
    border-spacing: 0px;
    border-collapse: collapse;
}

.spell-slot p {
    margin: 0;
}

.spell-slot.reckless a:first-of-type {
    filter: saturate(400%) hue-rotate(330deg) brightness(65%) contrast(150%)
}

.spell-slot.careful a:first-of-type {
    filter: saturate(500%) hue-rotate(178deg) brightness(70%);
}

.spell-slot a:nth-of-type(2) {
    position: absolute;
    top: 13px;
    left: 7px;
    width: 73px;
    height: 72px;
    text-align: center;
}

.spell-slot a:nth-of-type(2) > img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* ---------------------------------------- BiS */
/* BiS Header */
.BiSHeader .portrait-wrapper {
    width: 20%;
    text-align: center;
}

.BiSHeader .portrait-wrapper img {
    width: 100%;
    height: auto;
}

/* BiS */
.BiS {
    border: 1px solid #6c6b6b;
    border-collapse: collapse;
    background-color: #3a3939;
    /* width: 100%; // Don't, this override the td width*/
    table-layout: fixed;
}

.BiS > tbody > tr {
    height: 0;
}

.BiS > tbody > tr > td {
    border: 1px solid #6c6b6b;
}

/* 
Ignore all these errors. These selectors are totally valid and supported: 
https://www.w3schools.com/cssref/css_selectors.asp
This linter is just primitive.
*/
.BiS > tbody > tr > td:first-of-type:not(*[colspan]) {
    width: 100px;
}

.BiS > tbody > tr > td:nth-of-type(2) {
    width: calc(100% - 100px);
}

.BiS .enchant-row td:nth-of-type(2) {
    background: #222;
    border: none;
}

.BiS .spell-slot a:nth-of-type(1) img {
    width: 51px;
    height: 79px;
}

.BiS .spell-slot a:nth-of-type(2) {
    top: 7px;
    left: 5px;
    width: 42px;
    height: 44px;
}

/* ---------------------------------------- AttributeEmbed */
.attribute-embed {
    background-color: #222;
    table-layout: fixed;
    width: 100%;
    font-family: 'EnchantedLand';
    font-size: 30px;
}

.attribute-embed td {
    vertical-align: top;
}

.attribute-embed .attribute {
    position: relative;
    background-image: url("https://vignette.wikia.nocookie.net/idle-wizard/images/6/66/Attr-bar.png/revision/latest");
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 4px;
    padding-right: 4px;
}

.attribute-embed .attribute .fill {
    overflow: hidden;
}

.attribute-embed .attribute .fill img {
    position: relative;
    top: -2px;
    height: auto;
    z-index: 2;
    width: 532px;
}

.attribute-embed .attribute .fill img:last-of-type {
    position: absolute;
    top: 3px;
    filter: brightness(50%);
    z-index: 1;
}

.attribute-embed .attribute .slot {
    position: relative;
    float: left;
    top: -11px;
    width: calc(100% / 7);
    z-index: 3;
}

.attribute-embed .slot > img:first-of-type {
    float: right;
    left: 4px;
}

.attribute-embed .slot .generic-tooltip {
    position: absolute;
    top: 13px;
    right: 2px;
    height: 26px;
    width: 28px;
    text-align: center;
}

.attribute-embed .slot .generic-tooltip img {
    position: relative;
    height: auto;
    width: auto;
    max-height: 100%;
    max-width: 100%;
}

/* ---------------------------------------- Miscellaneous */
div.ajax-poll {
    width: auto !important;
}

/* Chart styles */
.chart {
    border: 1px solid #6c6b6b;
    background-color: #ccc;
    background-color: rgba(255, 255, 255, 0.5);
}

/* Template:SiteNav links */
#Sitenav a,
#Sitenav .selflink {
    white-space: nowrap;
}

/* Special:AllPages redirects text */
.allpagesredirect:after {
   color: #808080;
   content: " (redirect)";
}

/* Edit history byte color */
.mw-plusminus-pos {
    color: #1EB02D;
}
.mw-plusminus-neg {
    color: #D90000;
}

/* Infobox sizing */
.pi-data-label {
	flex-basis: 95px;
}

/*Headings + Font for title*/

.mw-page-title-main{
    font-family: EnchantedLand;
    font-size:70px;
}
.page-header__title {
    font-family: EnchantedLand;
    font-size: 70px;
}
/* ---------------------------------------- Subtitle */
.page-header__page-subtitle {
    font-size:15px;
    color:white;
    text-transform: Uppercase;
    letter-spacing: 0.2rem;
    padding-left: 10px;
    padding-top: 6px;
    padding-bottom:6px;
    border: 1px solid; 
    border-image: linear-gradient(90deg, rgba(60,74,83,1),rgb(60 74 83 / 0%), rgba(60,74,83,.00)) 1;
}

/* --------------------------------------- SiteNav (template)*/
.navbox {
    width: 100%;
    background: #1c262f;
    margin-bottom: 1em;
    border: 1px solid #22343a;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 2px
}

.navbox.align-center {
    text-align: center
}

.navbox td,.navbox th {
    padding: 5px 6px
}

.navbox .col-title {
    text-align: center
}

.navbox .col-h {
    background-color: #243241;
    width: 20%;
    text-align: center
}

/* --------------------------------------- Templates: Todo, Guides*/
.marked {
    background: rgba(36, 50, 65,0.4);
    padding: 5px;
    padding-left: 8px;
    width: 100%;
    border-left: solid 5px #f5d68d;
    margin-bottom:5px;
}

.marked b {
    margin-left: 8px;
}

.mwe-math-fallback-image-inline {
	padding:0px 15px 0px 4px;
}

.FullWidthImage img {
    height: auto;
    width: 100%;
}

/* ----------------------------------------- Article tables used in Quality Tables ------ */
.WikiaTable, .article-table {
    background: rgb(29 40 45 / 13%);
    border-collapse: collapse;
    margin: 1em 1em 1em 0;
}

.WikiaTable td, .WikiaTable th, .article-table td, .article-table {
    border-bottom: 1px solid rgb(28 83 101);
    padding: 20px 10px 15px;
}

.WikiaTable th, .article-table th {
    background: rgb(30 54 64);
    border-bottom: none;
    margin:20px;
    text-align: left;
}

/* countdown */

.jst-countdown {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.jst-hours,.jst-minutes,.jst-seconds,.jst-days {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
}

.jst-label {
    font-size: 12px;
}

.jst-value {
    color: ;
    font-size: 15px;
    margin-right:3px;
}

.fp.weekly{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.fpweekcount {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

ul.gallery {
    margin: 0px;
}

.tt-advanced-tooltip{
    padding:10px;
    background: #1a1f21;
    color: white;
}
/* Elixir Icon Colour Change */
.ElixirEvocation img {
filter:hue-rotate(290deg) saturate(2);
}
.ElixirPet img {
filter:hue-rotate(350deg) saturate(2);
}
.ElixirSummoning img {
filter:hue-rotate(160deg) saturate(2);
}
.ElixirShadow img {
filter:hue-rotate(190deg) saturate(2);
}