MediaWiki:Common.css

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

/************
* Infoboxes *
*************/
:root {
  --pi-background: transparent;
  --pi-border-color: #F0B62A;
  --pi-item-spacing: 3px 10px;
  --pi-width: 300px;
}
.theme-light {
  --pi-secondary-background: #F0B62A;
  --pi-secondary-background-label: #000;
}
.theme-dark {
  --pi-secondary-background: #464646;
  --pi-border-color: #F0B62A;
}

.portable-infobox {
  border: 1px dashed var(--pi-border-color);
  padding: 0.4em;
  box-sizing: border-box;
}
.pi-image-thumbnail[width="270"] {
 width: 100%;
 max-width: var(--pi-width);
}
.pi-title + .pi-image {
  background-color: #CBCDCC;
}
.pi-group {
  border-bottom: 0;
}
.portable-infobox .pi-data {
  border-top: 0;
  border-bottom: 0;
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
 background:var(--pi-secondary-background);
 color:var(--pi-secondary-background-label);
 text-align: center;
 padding: .5em;
 font-size: 1.2em;
 font-weight: bold;
}
.portable-infobox .pi-data-label {
  flex-basis: 135px;
  text-align: right;
}
@media screen and (max-width:720px) {
 .portable-infobox {
  font-size:.85em
 }
}

/* 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: 500;
    margin: 0;
}
/****************
* End infoboxes *
*****************/

/************
* Social for Main Page *
Code adopted from https://dotage.wiki.gg/wiki/MediaWiki:Common.css by Skeleklin
*************/
.gg-section {
	max-width: 50%;
	padding: 0 2rem 2rem 2rem;
	border-radius: 10px;
}

.gg-section .content {
	margin: 0;
}

.gg-social {
	padding: 1em 2em 2em 2em;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	color: rgba(255,255,255,0.8);
	display: flex;
	align-items: center;
	gap: 2em;
	margin-bottom: 2em;
	max-width: max-content;
}

.gg-social img {
	height: 50px;
	width: auto;
}

.gg-social a {
	color: #fff !important;
}

.gg-social.discord {
	background: #7289DA;
}

.gg-social.twitter {
	background: #56bbf9;
}

.gg-social.steam {
	background: #1b2838;
}

.card {
  min-width: 200px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  transition: box-shadow 0.15s, transform 0.2s;
  background: #ffffffa3;
}

.card:hover {
	box-shadow: rgba(0,0,0,0.16) 0px 1px 13px;
    transform: translate(0, -5px);
}

.card__top {
  height: 100px;
  overflow: hidden;
  position: relative;
}

.card__top pre {
	padding: 0;
	margin: 0;
	background: none;
}

.card__top a {
	position: absolute;
	left: 0;
}

.card h2 {
  border: none;
  font-size: 1.5em;
  margin: 0;
  padding: 1em;
}

.gg-container {
display: flex;
    width: 100%;
    gap: 1em;
    margin-top: 4em;
}

.gg-box {
  color: white;
  position: relative;
	margin-bottom: 50px;
	width: 200px;
}

.gg-box__header {
  font-family: "Vinque";
  font-size: 1.5em;
  color: #36363d;
  background: var(--content-bg);
  /* margin-bottom: -9px; */
  position: absolute;
  top: -34px;
  padding: 0.25em 0.5em;
  border-radius: 8px;
  border-bottom-left-radius: 0;
}

.gg-box__content {
  padding: 1em 0.5em 0.5em;
  background: #4c682fb3;
  border-radius: 8px;
  border: 2px solid #23253766;
}

.gg-content__item {
  padding: 0.25em 0.5em;
  background: #534d26db;
  border-radius: 5px;
  margin-bottom: 0.25em;
}

.gg-content__item a, .da-content__item a.new {
	color: #fff;
}

/**********/

body.page-Sandbox div#content {
background: url(https://pubg.wiki.gg/images/2/26/Background.png) center top scroll #1C2126; 
    background-repeat: no-repeat;
    border: none;
    margin-top: 200px;
}

body.page-Sandbox div#footer {
    border: none;
    background: #F1F1F1;
}

body.page-Sandbox h1.firstHeading {
    display:none;
}

.headertext {
    color: #555 !important;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 110%;
}

/* This will style the div that contains the whole tabber object. Generally this can be left alone. */
body .tabberlive {
    border: none;
}

/* This will style each tab's content area. */
body .tabberlive .tabbertab {
    border: none;
}

/* This is the box that surrounds all the tabs. */
body ul.tabbernav {
    border: none;
    padding: 3px 0 0 0;
}

/* This is a box that surrounds each of the tabs. */
body ul.tabbernav li {
    border: none;
    height: 50px;
}

/* This is the style for the tabs, parts of this can be overridden for the current tab with the next selector */
body ul.tabbernav li a,
body ul.tabbernav li a:link,
body ul.tabbernav li a:visited,
body ul.tabbernav li a:hover {
    border: 1px solid #323642;
    background: #1C2126;
    color: #fff;
}

/* This is the style for the currently selected tab */
body ul.tabbernav li.tabberactive a,
body ul.tabbernav li.tabberactive a:link,
body ul.tabbernav li.tabberactive a:visited,
body ul.tabbernav li.tabberactive a:hover {
    background: #e84330;
    color: #fff;
}

.theme-fandomdesktop-light .mpimage img {
   -webkit-filter: drop-shadow(0px 0px 10px #000);
   filter: drop-shadow(0px 0px 3.5px #000) drop-shadow(1px 1px 1px #000);
}

.section-collapse {
    border-color: #000000;
    border-style: solid;
    border-width: 2px 2px 0 0;
    content: "";
    cursor: pointer;
    display: inline-block;
    height: 7px;
    margin-right: 5px;
    position: relative;
    right: 0;
    top: 5px;
    transform: rotate(-45deg);
    vertical-align: middle;
    width: 7px;
}

.section-collapsed {
    display: none;
}

.collapsed-icon {
   margin-top: -2px;
   transform: rotate(135deg);
}

/* Newer Navbox template style */
table.navbox {
    border: 1px solid #d98500;
    clear: both;
    font-size: 88%;
    margin: auto;
    padding: 1px;
    text-align: center;
    width: 100%; 
}

/* Border between adjacent navboxes */
table.navbox + table.navbox {
    margin-top: -1px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
}

.navbox-group {
    font-weight: bold;
    padding-left: 1em;
    padding-right: 1em;
    white-space: nowrap;
}

/* Base background */
/*.navbox, .navbox-subgroup {
    background: #f1f1f1;
}*/

.navbox-list {
    border-color: #fff;   /* Must match background color */
}

/* Level 1 color */
.navbox-title,
table.navbox th {
    background: rgba(0,0,0,.7);
    border: 1px dashed #d98500;
    color: #fff;
}

/* Level 2 styling */
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: rgba(0,0,0,.7);
    border: 1px dashed #d98500;
    color: #fff;
}

/* Level 3 styling */
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: rgba(0,0,0,.7);
    border: 1px dashed #d98500;
    color: #fff;
}

/* Even row striping */
.navbox-even {
    background: #262526;
}

/* Odd row striping */
.navbox-odd {
    background: transparent;
}
 
.collapseButton {
    font-weight: normal;
    width: auto;
}

.navbox .collapseButton {
    width: 6em;
}
 
.navbar {
    font-size: 88%;
    font-weight: normal;
}

.navbox .navbar {
    font-size: 100%;
}
 
table.collapsed tr.collapsible {
    display: none;
}
/* End of new Navbox styling */

/* this CSS governs the responsive 2 column main page layout */

.fpcontent {
    width: 100%;
    overflow: hidden;
    z-index: 1;
}

.fpmaybecols {
    overflow: hidden;
    margin: -5px 0 -5px 0;
}

.fpmaybecols + .fpmaybecols {
    margin: 0 0 -5px 0;
}

.fpbox {
    border: 1px dashed #d98500;
    margin: 5px 5px 5px 5px;
    padding: 5px 10px 5px 10px;
}

.fpplainbox {
    padding: 5px 8px 10px 8px;
    margin: 0 5px 10px 5px;
    vertical-align: top;
}

.fpbox .welcome {
    border-bottom: 2px solid #F0B62A;
    font-size: 150%;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    text-transform: uppercase;
}

.fpbox .heading {
    border-bottom: 1px solid #505050;
    font-size: 132%;
    font-variant: small-caps;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}

.fpbox .heading .smalllink {
    font-size: 75%;
    font-weight: bold;
}

.fpbox hr {
    border: none;
}

div#content hr {
    background: #F0B62A;
}

.fplinks {
    margin: -5px;
}

.fplinks .linkslabel {
    border-bottom: 2px solid #F0B62A;
    font-weight: bold;
    margin: 15px 5px 5px 5px;
    padding: 0 0 5px 0;
}

.fplink {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

/* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */
.fplink .box {
    border-collapse: separate;
    border-spacing: 5px;
    display: table;
    width: 100%;
}

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

.fplink .box .row .cell {
    display: table-cell;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    vertical-align: middle;
}

.fplink.wide .box .row .cell {
    padding: 0 5px;
}

#fptopsection .fplink.image,
#fpflexsection .fplink.image,
#fpbottomsection .fplink.image 
    height: 114px;{
    width: 114px;
}

.fplink.image .box .row .cell {
    height: 100px;
    width: 100px;
    vertical-align: bottom;
}

.fplink.image .box .row .cell .image img {
    height: 100px;
    width: 100px;
}

@media (min-width: 470px) {
  .fplink {
    width: 50%;
  }

  .fplink.wide {
    width: 100%;
  }
}

@media (min-width: 580px) {
  .fplink {
    width: 33.333%;
  }

  .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 690px) {
  .fplink {
    width: 25%;
  }

  .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .fplink {
    width: 20%;
  }

  .fplink.wide {
    width: 40%;
  }
}

@media (min-width: 910px) {
  .fplink {
    width: 16.666%;
  }

  .fplink.wide {
    width: 33.333%;
  }
}

@media (min-width: 990px) {
  .fpcontent { 
    padding-right: 475px; 
    width: auto; 
  }

  #fptopsection { 
    float: left; 
    width: 100%; 
  }

  #fpflexsection { 
    float: right;
    width: 475px;
    margin-right: -475px;
  }

  #fpbottomsection { 
    float: left; 
    width: 100%; 
    margin-top: -5px; 
  }

  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 50%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 100%;
  }

  #fpflexsection .fplink {
    width: 25%;
  }

  #fpflexsection .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 1100px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 33.333%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 1210px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 25%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 1320px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 20%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 40%;
  }
}

@media (min-width: 1430px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 16.666%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 33.333%;
  }

  .fplink a {
    padding: 3px 5px;
  }
}

@media (min-width: 1540px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 14.285%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 28.571%;
  }

  #fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
    background-image: none;
  }

  .fpmaybelcol {
    float: left;
    width: 70.886%;
  }

  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 20%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 40%;
  }

  .fpmaybercol {
    float: right;
    width: 29.113%;
  }

  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 50%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 100%;
  }
}

@media (min-width: 1650px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 12.5%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 25%;
  }
}

@media (min-width: 1697px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 16.666%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 33.333%;
  }
}

@media (min-width: 1760px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 11.111%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 22.222%;
  }
}

@media (min-width: 1850px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 14.285%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 28.571%;
  }
}

@media (min-width: 1870px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 10%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 20%;
  }

  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 134px;
    height: 134px;
  }

  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 120px;
    height: 120px;
  }

  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1918px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 33.333%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 66.666%;
  }
}

@media (min-width: 1980px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 9.09%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 18.181%;
  }
}

@media (min-width: 2006px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 12.5%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 25%;
  }
}

@media (min-width: 2090px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 8.33%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 16.666%;
  }
}

@media (min-width: 2161px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 11.111%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 22.222%;
  }
}

@media (min-width: 2200px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.692%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 15.384%;
  }
}

@media (min-width: 2296px) {
  #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
    width: 25%;
  }

  #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
    width: 50%;
  }
}

@media (min-width: 2310px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 7.142%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 14.285%;
  }
}

@media (min-width: 2316px) {
  #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
    width: 10%;
  }

  #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
    width: 20%;
  }
}

@media (min-width: 2420px) {
  #fptopsection .fplink, #fpbottomsection .fplink {
    width: 6.666%;
  }

  #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
    width: 13.333%;
  }

  .fplink a {
    padding: 5px 5px;
  }

  #fptopsection .fplink.image, #fpbottomsection .fplink.image {
    width: 164px;
    height: 164px;
  }

  #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
    width: 150px;
    height: 150px;
  }

  #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
    width: 150px;
    height: 150px;
  }
}

.fplink.image .image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 75%;
  z-index: 1;
}

.fplink.image a {
  z-index: 2;
}

.fplink a {
  display: block;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1px 5px;
}

.fplink.image .image a {
  padding: 0;
}

.fplink.image .link a {
  border-top: 2px solid #505050;
}

.fplink.wide a {
  margin: 0 -5px;
}

.fpvideos {
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

.fpvideo {
  display: inline-block;
  margin: 0 5px;
}

.mw-rcfilters-ui-overlay { z-index:10; }

/* css for Theme Toggle extension */
header#wikigg-header #p-personal li#p-themes{
    white-space: nowrap;	
}
header#wikigg-header #p-personal li#p-themes > h3{
	padding: 0.5em;
	margin: 0;
	font-family: unset; /* same font as the rest of the wiki.gg header ("h3" has a different font-family rule) */
}
header#wikigg-header #p-themes > h3 span{
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg height='60' viewBox='0 0 1792 1792' width='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M1615 0q70 0 122.5 46.5t52.5 116.5q0 63-45 151-332 629-465 752-97 91-218 91-126 0-216.5-92.5t-90.5-219.5q0-128 92-212l638-579q59-54 130-54zm-909 1034q39 76 106.5 130t150.5 76l1 71q4 213-129.5 347t-348.5 134q-123 0-218-46.5t-152.5-127.5-86.5-183-29-220q7 5 41 30t62 44.5 59 36.5 46 17q41 0 55-37 25-66 57.5-112.5t69.5-76 88-47.5 103-25.5 125-10.5z'/%3E%3C/svg%3E");
	background-size: 17px 17px;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 20px;
}

/********************
* Non-Theme Specific *
*********************/

audio {
    height: -webkit-fill-available;
}

/********************
* [[Template:Mbox]] *
*********************/
.mbox {
	display: flex;
	position: relative;
	background-color: var(--wiki-content-background-color);
	border: 1px solid var(--wiki-content-border-color);
	border-left-width: 8px;
	margin-bottom: 5px;
	min-height: 32px;
}
.mbox-type-success {
	border-color: var(--wiki-success-color);
}
.mbox-type-info {
	border-color: var(--wiki-accent-color--hover);
}
.mbox-type-moderate {
	border-color: var(--wiki-warning-color);
}
.mbox-type-important {
	border-color: var(--wiki-alert-color);
}
.mbox__content {
	display: table;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 15px;
}
.mbox__content__image {
	display: table-cell;
	width: 45px;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	padding-right: 15px;
	font-size: 2.5em;
	line-height: 1;
}
.mbox__content__image .icon-filter {
	filter: var(--wiki-icon-general-filter);
}
.mbox__content__wrapper {
	display: table-cell;
	vertical-align: middle;
}
.mbox__content__header {
	display: block;
	font-weight: bold;
}
.mbox__content__text {
	display: block;
}
.mbox__content__text__comment {
	font-size: small;
}
.mbox__content__aside {
	display: table-cell;
	width: 100px;
	vertical-align: middle;
	text-align: center;
	padding-left: 15px;
	border-left: 1px solid var(--wiki-content-border-color);
}
.mbox__close {
	position: absolute;
	right: 0;
	top: 0;
	padding: 2px 7px;
	font-weight: bold;
	font-size: 16px;
	color: var(--wiki-content-text-color);
	cursor: pointer;
	transition: all .15s ease-in;
}
.mbox__close:hover {
	color: var(--wiki-content-text-mix-color);
}
.mbox__close:after {
	content: '×';
}
.mw-collapsed + .mbox__close {
	transform: rotate(45deg);
	padding: 4px 7px 5px 2px;
}
.mbox__content__image.fandom-icons {
	font-size: 2em;
}
#siteNotice .mbox {
	line-height: 1.4;
}
#siteNotice .mbox__close {
	display: none;
}
.sitedir-ltr .mw-dismissable-notice-body,
.sitedir-rtl .mw-dismissable-notice-body {
	clear: both;
	margin: 0;
}

#siteNotice>#localNotice, .mw-dismissable-notice
{
	background: #0002;
    border: 1px solid var(--pi-border-color);
    padding: .5em 1em 0;
}

/***********
* End Mbox *
************/

/* #region Interwiki dropdown */
#p-lang-btn {
    align-self: center;
    float: right;
    margin-left: 5px;
}
#p-lang-btn .vector-menu-content li {
    margin: 0.2em 0.5em;
}
#p-lang-btn .vector-menu-content {
    padding: 0.2em 0;
}
#p-lang-btn .vector-menu-content li:hover {
    background-color: rgba(var(--content-default-link-color--rgb), 0.25);
    border-radius: 2px;
}
#p-lang-btn .menu li a {
    text-transform: none;
    color: var(--content-text-color);
}
#p-lang-btn-label::before,
#p-lang-btn-label::after {
    content: '';
    background-position: 100% 50%;
    background-repeat: no-repeat;
    display: inline-block;
    width: 1.25em;
    height: 1em;
    vertical-align: middle;
}
#p-lang-btn-label::before {
    margin-right: 5px;
    filter: var(--oo-ui-icon-filter--normal-progressive);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z'/%3E%3C/svg%3E%0A");
}
#p-lang-btn-label::after {
    filter: var(--oo-ui-icon-filter--normal-progressive);
    background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22/%3E%3C/svg%3E");
}
/* #endregion */

/* Thank image, based code created by https://seaofthieves.wiki.gg/wiki/User:SavageAlien */

.mw-thanks-thank-link {
    display: inline-flex;
    position: relative;
    align-items: center; /* aligns before element with text */
    padding-left: 18px; /* adds space for before element */
}
    
.mw-thanks-thank-link::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    background-image: url("/images/a/a5/PUBG_Chicken_Emoji.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.mw-thanks-thank-link.jquery-confirmable-button-no::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cscript xmlns=''/%3E%3Ctitle%3E close %3C/title%3E%3Cpath d='M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z'/%3E%3Cpath d='M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z'/%3E%3C/svg%3E");
}

/* User Profile box */

.horse-userprofile, .mw-message-box 
{
	font-size: 14px;
	padding: 6px 12px;
	color: white;
}