MediaWiki:Common.css

/* TABLE OF CONTENTS */
/*
** To find a specific section of the document, press CTRL + F and, in the
** search bar, write the name of the section that you want to jump in.
**
** 1. Imports
** 2. Fonts
** 3. Global variables
** 3.1. Light theme
** 3.2. Dark theme
** 4. Elements, pseudo-elements, and pseudo-classes
** 4.1. Utility classes
** 5. Components
** 5.1. Grid
** 5.2. Typography
** 5.3. Popups
** 5.4. Infobox
** 5.5. Tables
** 5.6. Buttons
** 5.7. Tabs
** 5.8. Checkbox
** 5.9. Modals
** 6. General styles
** 6.1. Editor
** 6.2. Recent Changes
** 6.3. Special:Search
** 6.4. Page history
** 6.5. Template:Dialogue
** 7. Fixes and tweaks
** 8. User preferences
*/

/* 1. Imports */
@import url('https://fonts.googleapis.com/css2?family=Aldrich&display=swap');
@import url('https://galaxylife.wiki.gg/index.php?title=MediaWiki:Common.css/Icons.css&action=raw&ctype=text/css');

/* 2. Fonts */
@font-face {
	font-display: swap;
	font-family: 'Nasalization';
	font-style: normal;
	font-weight: 400;
	src: url('https://commons.wiki.gg/images/c/cf/Nasalization-rg.otf') format('OpenType');
}

/* 3. Global variables */
:root {
	--gl-color--starling__base: #e26922;
	--gl-color--starling__light: #eb8d52;
	--gl-color--starling__dark: #a1411b;
	--gl-color--starling__meat: #68294c;
	--gl-color--starling__blood: #952a64;
	--gl-color--clothes--red__base: #e1160b;
	--gl-color--clothes--red__light: #fa6760;
	--gl-color--clothes--red__light--rgb: 250, 103, 96;
	--gl-color--clothes--red__dark: #8e100a;
	--gl-color--clothes--yellow__base: #dfa201;
	--gl-color--clothes--yellow__light: #ffc732;
	--gl-color--clothes--yellow__dark: #876a24;
	--gl-color--clothes--white__base: #e6ead9;
	--gl-color--clothes--white__light: #f7f8ee;
	--gl-color--clothes--white__dark: #b3bfb7;
	--gl-color--loading-background: #010a13;
	--gl-color--scrollbar-start: #6ca0aa;
	--gl-color--scrollbar-middle: #063d3f;
	--gl-color--scrollbar-end: #006781;
	--gl-color--scrollbar-border: #00d2ff;
	--gl-color--scrollbar-track: #000101;
	--gl-color__black: #000;
	--gl-color__black--rgb: 0, 0, 0;
	--gl-color__white: #fff;
	--gl-color__white--rgb: 255, 255, 255;
	--gl-scrollbar--border-radius: 8px;
	--gl-border-opacity: .12;
	--gl-disabled-opacity: .3;
	--gl-secondary-opacity: .7;
	--gl-primary-opacity: 1;
	--gl-background--galaxy: url('https://galaxylife.wiki.gg/images/f/f0/Galaxy2.webp');
	--gl-background--fog-1: url('https://galaxylife.wiki.gg/images/a/a9/Galaxy-fog-1.png');
	--gl-background--fog-2: url('https://galaxylife.wiki.gg/images/f/ff/Galaxy-fog-2.png');
	--gl-background--stars-1: url('https://galaxylife.wiki.gg/images/2/23/Galaxy-stars-1.png');
	--gl-background--stars-2: url('https://galaxylife.wiki.gg/images/d/d5/Galaxy-stars-2.png');
	/* Motion - durations and easings. */
	--gl-motion-duration--short-1: 50ms;
	--gl-motion-duration--short-2: 100ms;
	--gl-motion-duration--short-3: 150ms;
	--gl-motion-duration--short-4: 200ms;
	--gl-motion-duration--medium-1: 250ms;
	--gl-motion-duration--medium-2: 300ms;
	--gl-motion-duration--medium-3: 350ms;
	--gl-motion-duration--medium-4: 400ms;
	--gl-motion-duration--long-1: 450ms;
	--gl-motion-duration--long-2: 500ms;
	--gl-motion-duration--long-3: 550ms;
	--gl-motion-duration--long-4: 600ms;
	--gl-motion-duration--extra-long-1: 700ms;
	--gl-motion-duration--extra-long-2: 800ms;
	--gl-motion-duration--extra-long-3: 900ms;
	--gl-motion-duration--extra-long-4: 1000ms;
	--gl-motion-easing--linear: cubic-bezier(0, 0, 1, 1);
	--gl-motion-easing--standard: cubic-bezier(.2, 0, 0, 1);
	--gl-motion-easing--standard__accelerated: cubic-bezier(.3, 0, 1, 1);
	--gl-motion-easing--standard__decelerated: cubic-bezier(0, 0, 0, 1);
	--gl-motion-easing--emphasized: cubic-bezier(.2, 0, 0, 1);
	--gl-motion-easing--emphasized__accelerated: cubic-bezier(.3, 0 .8, .15);
	--gl-motion-easing--emphasized__decelerated: cubic-bezier(.05, .7, .1, 1);
	--gl-motion-easing--legacy-linear: cubic-bezier(.4, 0, .2, 1);
	--gl-motion-easing--legacy-standard: cubic-bezier(.4, 0, .2, 1);
	--gl-motion-easing--legacy-accelerated: cubic-bezier(.4, 0, 1, 1);
	--gl-motion-easing--legacy-decelerated: cubic-bezier(0, 0, .2, 1);
	--gl-motion-path: linear;
	/* Elevation - shadows. */
	--gl-elevation-0dp_-_box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12);
	--gl-elevation-1dp_-_box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
	--gl-elevation-2dp_-_box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
	--gl-elevation-3dp_-_box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12);
	--gl-elevation-4dp_-_box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
	--gl-elevation-6dp_-_box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
	--gl-elevation-8dp_-_box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
	--gl-elevation-12dp_-_box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12);
	--gl-elevation-16dp_-_box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12);
	--gl-elevation-24dp_-_box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
	--gl-elevation_-_-shadow-transition: 280ms var(--gl-motion-standard-easing);
	/* Cut corners. */
	/** Cut corners sizes. **/
	--gl-cut-radius--small: 1rem;
	--gl-cut-radius--medium: 2rem;
	--gl-cut-radius--large: 3rem;
	--gl-cut-radius--extra-large: 4rem;
	/** Cut corner directions. **/
	/*** All directions. ***/
	--gl-cut-corner: polygon(0 var(--gl-cut-radius--large), var(--gl-cut-radius--large) 0, calc(100% - var(--gl-cut-radius--large)) 0, 100% var(--gl-cut-radius--large), 100% calc(100% - var(--gl-cut-radius--large)), calc(100% - var(--gl-cut-radius--large)) 100%, var(--gl-cut-radius--large) 100%, 0 calc(100% - var(--gl-cut-radius--large)));
	/*** One direction. ***/
	--gl-cut-corner--top: polygon(0 var(--gl-cut-radius--large), var(--gl-cut-radius--large) 0, calc(100% - var(--gl-cut-radius--large)) 0, 100% var(--gl-cut-radius--large), 100% 100%, 0 100%);
	--gl-cut-corner--bottom: polygon(0 0, 100% 0, 100% calc(100% - var(--gl-cut-radius--large)), calc(100% - var(--gl-cut-radius--large)) 100%, var(--gl-cut-radius--large) 100%, 0 calc(100% - var(--gl-cut-radius--large)));
	--gl-cut-corner--left: polygon(var(--gl-cut-radius--large) 0, 100% 0, 100% 100%, var(--gl-cut-radius--large) 100%, 0 calc(100% - var(--gl-cut-radius--large)), 0 var(--gl-cut-radius--large));
	--gl-cut-corner--right: polygon(0 0, calc(100% - var(--gl-cut-radius--large)) 0, 100% var(--gl-cut-radius--large), 100% calc(100% - var(--gl-cut-radius--large)), calc(100% - var(--gl-cut-radius--large)) 100%, 0 100%);
	/*** One corner. ***/
	--gl-cut-corner--top-left: polygon(0 var(--gl-cut-radius--large), var(--gl-cut-radius--large) 0, 100% 0, 100% 100%, 0 100%);
	--gl-cut-corner--top-right: polygon(0 0, calc(100% - var(--gl-cut-radius--large)) 0, 100% var(--gl-cut-radius--large), 100% 100%, 0 100%);
	--gl-cut-corner--bottom-right: polygon(0 0, 100% 0, 100% calc(100% - var(--gl-cut-radius--large)), calc(100% - var(--gl-cut-radius--large)) 100%, 0 100%);
	--gl-cut-corner--bottom-left: polygon(0 0, 100% 0, 100% 100%, var(--gl-cut-radius--large) 100%, 0 calc(100% - var(--gl-cut-radius--large)));
	/* Grid. */
	--gl-grid-gap--phone: 2rem;
	--gl-grid-gap--tablet: 3rem;
	--gl-grid-gap--desktop: 4rem;
	/* Typography. */
	--gl-font-base_-_font-family: 'Nasalization', 'Roboto', 'Noto', 'Arial', sans-serif;
	--gl-font-secondary_-_font-family: 'Aldrich', 'Roboto', 'Noto', 'Arial', sans-serif;
	--gl-font-shadow: 0 .2em .25em rgba(var(--gl-color__black--rgb), .8);
	--gl-title-font-shadow: 0 .2em .25em rgba(var(--gl-color__black--rgb), .8), 0 .2em 0 rgba(var(--gl-color__black--rgb), .8);
	/* Popups. */
	--gl-popup--background-start: rgba(9, 19, 26, .8);
	--gl-popup--background-end: rgba(13, 59, 54, .8);
	--gl-popup--border-color: rgb(0, 210, 255);
	--gl-popup--border-radius: 8px;
	--gl-popup--line-background: url('https://galaxylife.wiki.gg/images/7/7f/Ornament.png');
	--gl-popup--line-height: 112px;
	/* Skins */
	/** Basic blue **/
	--gl-skin--basic-blue--atlas: url('https://galaxylife.wiki.gg/images/b/b2/Atlas_skin_ui.png');
	--gl-skin--basic-blue--cookie-warning-background: url('https://galaxylife.wiki.gg/images/b/b0/Skin-basic-blue--cookie-warning-background.png');
	--gl-skin--basic-blue--scrollbar--arrow-up: url('https://galaxylife.wiki.gg/images/2/27/Scrollbar_arrow_up.png');
	--gl-skin--basic-blue--scrollbar--arrow-down: url('https://galaxylife.wiki.gg/images/2/27/Scrollbar_arrow_down.png');
	--gl-skin--basic-blue--scrollbar--arrow-left: url('https://galaxylife.wiki.gg/images/c/c6/Scrollbar_arrow_left.png');
	--gl-skin--basic-blue--scrollbar--arrow-right: url('https://galaxylife.wiki.gg/images/8/84/Scrollbar_arrow_right.png');
	--gl-skin--basic-blue--tab-active--background: url('https://galaxylife.wiki.gg/images/8/8e/Tab.png');
	--gl-skin--basic-blue--tab-active--corner-left: url('https://galaxylife.wiki.gg/images/8/8d/Tab_corner_left.png');
	--gl-skin--basic-blue--tab-disabled--background: url('https://galaxylife.wiki.gg/images/e/e7/Tab_disabled.png');
	--gl-skin--basic-blue--tab-disabled--corner-left: url('https://galaxylife.wiki.gg/images/8/83/Tab_corner_left_disabled.png');
	--gl-skin--basic-blue--tab-area: url('https://galaxylife.wiki.gg/images/5/54/Area_tab.png');
	--gl-skin--basic-blue--tab-area--corner-left: url('https://galaxylife.wiki.gg/images/8/8d/Area_tab_corner_left.png');
	--gl-skin--basic-blue--area-box: url('https://galaxylife.wiki.gg/images/d/d0/Area_box.png');
	--gl-skin--basic-blue--button-corner: url('https://galaxylife.wiki.gg/images/8/87/Btn_corner.png');
	--gl-skin--basic-blue--button-corner-cancel: url('https://galaxylife.wiki.gg/images/0/0f/Btn_corner_cancel.png');
	--gl-skin--basic-blue--button-cancel-color: rgb(254, 186, 185);
	--gl-skin--basic-blue--button-search: url('https://galaxylife.wiki.gg/images/2/25/Btn_search.png');
	--gl-skin--basic-blue--area-box-corners: url('https://galaxylife.wiki.gg/images/d/d1/Skin-basic-blue--area-box-corners.png');
	--gl-skin--basic-blue--tooltip: url('https://galaxylife.wiki.gg/images/1/17/Tooltip.png');
	--gl-skin--basic-blue--tooltip-arrow: url('https://galaxylife.wiki.gg/images/3/32/Tooltip_arrow.png');
	--gl-skin--basic-blue--border: rgb(0, 210, 255);
	--gl-skin--basic-blue--border-secondary: rgb(139, 5, 195);
	--gl-skin--basic-blue--border-error: rgba(255, 0, 0, .88);
	--gl-skin--basic-blue--background-primary: rgba(9, 19, 26, .8);
	--gl-skin--basic-blue--background-secondary: rgba(13, 59, 54, .8);
	/*
	--gl-skin--dark--cookie-warning-background: ;
	--gl-skin--sand--cookie-warning-background: ;
	--gl-skin--water--cookie-warning-background: ;
	--gl-skin--nature--cookie-warning-background: ;
	--gl-skin--colorblind--cookie-warning-background: ;
	*/
	/** Defaults **/
	--gl-atlas: var(--gl-skin--basic-blue--atlas);
	--gl-cookie-warning-background: var(--gl-skin--basic-blue--cookie-warning-background);
	--gl-scrollbar--arrow-up: var(--gl-skin--basic-blue--scrollbar--arrow-up);
	--gl-scrollbar--arrow-down: var(--gl-skin--basic-blue--scrollbar--arrow-down);
	--gl-scrollbar--arrow-left: var(--gl-skin--basic-blue--scrollbar--arrow-left);
	--gl-scrollbar--arrow-right: var(--gl-skin--basic-blue--scrollbar--arrow-right);
	--gl-tab-active--background: var(--gl-skin--basic-blue--tab-active--background);
	--gl-tab-active--corner-left: var(--gl-skin--basic-blue--tab-active--corner-left);
	--gl-tab-disabled--background: var(--gl-skin--basic-blue--tab-disabled--background);
	--gl-tab-disabled--corner-left: var(--gl-skin--basic-blue--tab-disabled--corner-left);
	--gl-tab-area: var(--gl-skin--basic-blue--tab-area);
	--gl-tab-area--corner-left: var(--gl-skin--basic-blue--tab-area--corner-left);
	--gl-area-box: var(--gl-skin--basic-blue--area-box);
	--gl-button-corner: var(--gl-skin--basic-blue--button-corner);
	--gl-button-corner-cancel: var(--gl-skin--basic-blue--button-corner-cancel);
	--gl-button-cancel-color: var(--gl-skin--basic-blue--button-cancel-color);
	--gl-button-search: var(--gl-skin--basic-blue--button-search);
	--gl-area-box-corners: var(--gl-skin--basic-blue--area-box-corners);
	--gl-tooltip: var(--gl-skin--basic-blue--tooltip);
	--gl-tooltip-arrow: var(--gl-skin--basic-blue--tooltip-arrow);
	--gl-checkbox: url('https://galaxylife.wiki.gg/images/1/10/Gray-checkbox.png');
	--gl-checkbox--tic: url('https://galaxylife.wiki.gg/images/thumb/3/3f/Icon_tic.png/30px-Icon_tic.png');
	--gl-checkbox--unchecked: transparent var(--gl-checkbox) center/contain no-repeat;
	--gl-checkbox--checked: var(--gl-checkbox--tic) center/contain no-repeat,
							var(--gl-checkbox) center/contain no-repeat;
	--gl-checkbox--glow: 0 0 5px var(--gl-popup--border-color),
						 0 0 5px var(--gl-popup--border-color),
						 0 0 5px var(--gl-popup--border-color);
}

/* 3.1. Light theme *
:root {
	--gl-primary: #795548;
	--gl-primary-variant: #4b2c20;
	--gl-secondary: #fff176;
	--gl-secondary-variant: #cabf45;
	--gl-background: var(--gl-color--loading-background);
	--gl-surface: #efdcd5;
	--gl-error: #b00020;
	--gl-on-primary: #fff;
	--gl-on-secondary: #000;
	--gl-on-background: #fff;
	--gl-on-background: #000;
	--gl-on-error: #fff;
	--gl-on-background: rgb(0, 0, 0);
	--gl-on-background--rgb: 0, 0, 0;
	--gl-primary-on-background: rgba(0, 0, 0, .87);
	--gl-primary-on-background-inverse: rgba(255, 255, 255, .87);
	--gl-secondary-on-background: rgba(0, 0, 0, .6);
	--gl-secondary-on-background-inverse: rgba(255, 255, 255, .6);
	--gl-hint-on-background: rgba(0, 0, 0, .38);
	--gl-on-background--inverse: rgb(0, 0, 0);
	--gl-on-background--invserse--rgb: 0, 0, 0;
	--gl-hint-on-background-inverse: rgba(255, 255, 255, .38);
	--gl-disabled-on-background: rgba(0, 0, 0, .38);
	--gl-disabled-on-background-inverse: rgba(255, 255, 255, .38);
	--gl-icon-on-background: rgba(0, 0, 0, .38);
	--gl-icon-on-background-inverse: rgba(255, 255, 255, .38);
	--gl-primary-on-light: rgba(0, 0, 0, .87);
	--gl-secondary-on-light: rgba(0, 0, 0, .6);
	--gl-hint-on-light: rgba(0, 0, 0, .38);
	--gl-disabled-on-light: rgba(0, 0, 0, .38);
	--gl-icon-on-light: rgba(0, 0, 0, .38);
	--gl-secondary-on-dark: rgba(255, 255, 255, .7);
	--gl-hint-on-dark: rgba(255, 255, 255, .5);
	--gl-disabled-on-dark: rgba(255, 255, 255, .5);
	--gl-icon-on-dark: rgba(255, 255, 255, .5);
	--gl-color__red: #f44330;
	--gl-color__red--rgb: 244, 67, 48;
	--gl-color__pink: #e91e63;
	--gl-color__pink--rgb: 233, 30, 99;
	--gl-color__purple: #e91e63;
	--gl-color__purple--rgb: 233, 30, 99;
	--gl-color__deep-purple: #673ab7;
	--gl-color__deep-purple--rgb: 103, 58, 183;
	--gl-color__indigo: #3f51b5;
	--gl-color__indigo--rgb: 63, 81, 181;
	--gl-color__blue: #2196f3;
	--gl-color__blue--rgb: 33, 150, 243;
	--gl-color__light-blue: #03a9f4;
	--gl-color__light-blue--rgb: 3, 169, 244;
	--gl-color__cyan: #00bcd4;
	--gl-color__cyan--rgb: 0, 188, 212;
	--gl-color__teal: #009688;
	--gl-color__teal--rgb: 0, 150, 136;
	--gl-color__green: #4caf50;
	--gl-color__green--rgb: 76, 175, 80;
	--gl-color__light-green: #8bc34a;
	--gl-color__light-green--rgb: 139, 195, 74;
	--gl-color__lime: #cddc39;
	--gl-color__lime--rgb: 205, 220, 57;
	--gl-color__yellow: #ffeb3b;
	--gl-color__yellow--rgb: 255, 235, 59;
	--gl-color__amber: #ffc107;
	--gl-color__amber--rgb: 255, 193, 7;
	--gl-color__orange: #ff9800;
	--gl-color__orange--rgb: 255, 152, 0;
	--gl-color__deep-orange: #ff5722;
	--gl-color__deep-orange--rgb: 255, 87, 34;
	--gl-color__brown: #795548;
	--gl-color__brown--rgb: 121, 85, 72;
	--gl-color__grey: #9e9e9e;
	--gl-color__grey--rgb: 158, 158, 158;
	--gl-color__blue-grey: #607d8b;
	--gl-color__blue-grey--rgb: 96, 125, 139;
	accent-color: var(--gl-color--starling__dark);
	color-scheme: light dark;
}

/* 3.2 Dark theme */
:root {
	--gl-primary: var(--gl-color--starling__light);
	--gl-primary-variant: var(--gl-color--starling__base);
	--gl-secondary: var(--gl-color--starling__blood);
	--gl-background: var(--gl-color--loading-background);
	--gl-surface: #121212;
	--gl-error: #cf6679;
	--gl-on-primary: #000;
	--gl-on-secondary: #000;
	--gl-on-surface: #fff;
	--gl-on-error: #000;
	--gl-on-background: rgb(255, 255, 255);
	--gl-on-background--rgb: 255, 255, 255;
	--gl-primary-on-background: rgba(255, 255, 255, .87);
	--gl-secondary-on-background: rgba(255, 255, 255, .6);
	--gl-disabled-on-background: rgba(255, 255, 255, .38);
	--gl-on-background--inverse: rgb(0, 0, 0);
	--gl-on-background--inverse--rgb: 0, 0, 0;
	--gl-primary-on-background--inverse: rgba(0, 0, 0, .87);
	--gl-secondary-on-background--inverse: rgba(0, 0, 0, .6);
	--gl-disabled-on-background--inverse: rgba(0, 0, 0, .38);
	--gl-color__red: #ef9a9a;
	--gl-color__red--rgb: 239, 154, 154;
	--gl-color__pink: #f48fb1;
	--gl-color__pink--rgb: 244, 143, 177;
	--gl-color__purple: #ce93d8;
	--gl-color__purple--rgb: 206, 147, 216;
	--gl-color__deep-purple: #b39ddb;
	--gl-color__deep-purple--rgb: 179, 157, 219;
	--gl-color__indigo: #9fa8da;
	--gl-color__indigo--rgb: 159, 168, 218;
	--gl-color__blue: #90caf9;
	--gl-color__blue--rgb: 144, 202, 249;
	--gl-color__light-blue: #81d4fa;
	--gl-color__light-blue--rgb: 129, 212, 250;
	--gl-color__cyan: #80deea;
	--gl-color__cyan--rgb: 128, 222, 234;
	--gl-color__teal: #80cbc4;
	--gl-color__teal--rgb: 128, 203, 196;
	--gl-color__green: #a5d6a7;
	--gl-color__green--rgb: 165, 214, 167;
	--gl-color__light-green: #c5e1a5;
	--gl-color__light-green--rgb: 197, 225, 165;
	--gl-color__lime: #e6ee9c;
	--gl-color__lime--rgb: 230, 238, 156;
	--gl-color__yellow: #fff59d;
	--gl-color__yellow--rgb: 255, 245, 157;
	--gl-color__amber: #ffe082;
	--gl-color__amber--rgb: 255, 224, 130;
	--gl-color__orange: #ffcc80;
	--gl-color__orange--rgb: 255, 204, 128;
	--gl-color__deep-orange: #ffab91;
	--gl-color__deep-orange--rgb: 255, 171, 145;
	--gl-color__brown: #bcaaa4;
	--gl-color__brown--rgb: 188, 170, 164;
	--gl-color__grey: #eee;
	--gl-color__grey--rgb: 237, 237, 237;
	--gl-color__blue-grey: #b0bec5;
	--gl-color__blue-grey--rgb: 176, 190, 197;
	accent-color: var(--gl-color--starling__light);
	background-color: var(--gl-background);
	color-scheme: dark light;
}

/* 4. Elements, pseudo-elements, and pseudo-classes */
html {
	scrollbar-color: var(--gl-color--scrollbar-border) var(--gl-color--scrollbar-track);
	scrollbar-width: 16px;
}

::-webkit-scrollbar {
	height: 16px;
	width: 16px;
}

::-webkit-scrollbar-thumb {
	border: 1px solid var(--gl-color--scrollbar-border);
	border-radius: var(--gl-scrollbar--border-radius);
}

::-webkit-scrollbar-thumb:vertical {
	background-image: linear-gradient(to right, var(--gl-color--scrollbar-start) 0%, var(--gl-color--scrollbar-middle) 60%, var(--gl-color--scrollbar-end) 100%);
}

::-webkit-scrollbar-thumb:horizontal {
	background-image: linear-gradient(to bottom, var(--gl-color--scrollbar-start) 0%, var(--gl-color--scrollbar-middle) 60%, var(--gl-color--scrollbar-end) 100%);
}

::-webkit-scrollbar-track {
	background-color: var(--gl-color--scrollbar-track);
	box-shadow: inset 0 0 0 1px var(--gl-color--scrollbar-border);
}

::-webkit-scrollbar-button:single-button {
	height: 16px;
	width: 16px;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
	background: transparent no-repeat center/cover var(--gl-skin--basic-blue--scrollbar-arrow-up);
}

::-webkit-scrollbar-button:single-button:vertical:increment {
	background: transparent no-repeat center/cover var(--gl-skin--basic-blue--scrollbar-arrow-down);
}

::-webkit-scrollbar-button:single-button:horizontal:decrement {
	background: transparent no-repeat center/cover var(--gl-skin--basic-blue--scrollbar-arrow-right);
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
	background: transparent no-repeat center/cover var(--gl-skin--basic-blue--scrollbar-arrow-left);
}

::-webkit-scrollbar-corner {
	background-color: var(--gl-background);
}

a:not(.mw-selflink),
a:not(.mw-selflink):visited,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-portal .vector-menu-content li a:visited,
.mw-parser-output a.extiw,
.mw-parser-output a.external,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
.toctogglelabel,
#msupload-div a {
	color: var(--gl-color__blue);
}

q {
	font-style: italic;
	quotes: '“' '”' '‘' '’';
}

q::before {
	content: open-quote;
}

q::after {
	content: close-quote;
}

::selection {
	background-color: var(--gl-on-background);
	color: var(--gl-on-background--inverse);
}

::placeholder {
	font-family: var(--gl-font-secondary_-_font-family);
}

hr {
	border-bottom: 0px solid;
	border-color: var(--gl-on-background--rgb, var(--gl-border-opacity));
	margin: 2rem 0;
}

dt {
	margin-bottom: .5em;
}

dd {
	margin-bottom: 2em;
}

ul {
	list-style-image: none;
}

table {
	display: table;
}

[id], h1, h2, h3, h4, h5, h6 {
	scroll-margin-top: 2em;
}

figure > picture + figcaption {
	margin-top: 1em;
	text-align: center;
}

pre,
code,
.mw-code {
	background-color: rgba(var(--gl-on-background--rgb), .12);
	border-color: rgba(var(--gl-on-background--rgb), .4);
	color: var(--gl-on-background);
}

.is-invisible {
	opacity: 0;
}

.is-invisible.fade-bottom {
	transform: translateY(16px);
}

.is-invisible.fade-top {
	transform: translateY(-16px);
}

.is-invisible.fade-left {
	transform: translateX(-16px);
}

.is-invisible.fade-right {
	transform: translateX(16px);
}

.is-visible {
	opacity: 1;
	transition: transform 500ms cubic-bezier(.4, 0, .2, 1),
				opacity 235ms cubic-bezier(.4, 0, .2, 1);
}

.is-visible.fade-bottom,
.is-visible.fade-top {
	transform: translateY(0);
}

.is-visible.fade-left,
.is-visible.fade-right {
	transform: translateX(0);
}

.is-hidden {
	display: none !important;
}

/* 4.1. Utility classes */
.cut-all {
	clip-path: var(--gl-cut-corner);
}

.cut-top {
	clip-path: var(--gl-cut-corner--top);
}

.cut-left {
	clip-path: var(--gl-cut-corner--left);
}

.cut-bottom {
	clip-path: var(--gl-cut-corner--bottom);
}

.cut-right {
	clip-path: var(--gl-cut-corner--right);
}

.cut-top-left {
	clip-path: var(--gl-cut-corner--top-left);
}

.cut-top-right {
	clip-path: var(--gl-cut-corner--top-right);
}

.cut-bottom-right {
	clip-path: var(--gl-cut-corner--bottom-right);
}

.cut-bottom-left {
	clip-path: var(--gl-cut-corner--bottom-left);
}

/* 5. Components */
/* 5.1 Grid */
@supports (display: grid) {
	.grid {
		display: grid;
		gap: var(--gl-grid-gap--phone);
		grid-gap: var(--gl-grid-gap--phone);
		grid-template-columns: repeat(12, minmax(5px, 1fr));
		max-width: 2280px;
	}

	.grid .grid__col--span-0 {
		display: none;
	}

	.grid .grid__col--span-1 {
		grid-column-end: span 1;
	}

	.grid .grid__col--span-1 .grid {
		grid-template-columns: repeat(1, minmax(5px, 1fr));
	}

	.grid .grid__col--span-2 {
		grid-column-end: span 2;
	}

	.grid .grid__col--span-2 .grid {
		grid-template-columns: repeat(2, minmax(5px, 1fr));
	}

	.grid .grid__col--span-3 {
		grid-column-end: span 3;
	}

	.grid .grid__col--span-3 .grid {
		grid-template-columns: repeat(3, minmax(5px, 1fr));
	}

	.grid .grid__col--span-4 {
		grid-column-end: span 4;
	}

	.grid .grid__col--span-4 .grid {
		grid-template-columns: repeat(4, minmax(5px, 1fr));
	}

	.grid .grid__col--span-5 {
		grid-column-end: span 5;
	}

	.grid .grid__col--span-5 .grid {
		grid-template-columns: repeat(5, minmax(5px, 1fr));
	}

	.grid .grid__col--span-6 {
		grid-column-end: span 6;
	}

	.grid .grid__col--span-6 .grid {
		grid-template-columns: repeat(6, minmax(5px, 1fr));
	}

	.grid .grid__col--span-7 {
		grid-column-end: span 7;
	}

	.grid .grid__col--span-7 .grid {
		grid-template-columns: repeat(7, minmax(5px, 1fr));
	}

	.grid .grid__col--span-8 {
		grid-column-end: span 8;
	}

	.grid .grid__col--span-8 .grid {
		grid-template-columns: repeat(8, minmax(5px, 1fr));
	}

	.grid .grid__col--span-9 {
		grid-column-end: span 9;
	}

	.grid .grid__col--span-9 .grid {
		grid-template-columns: repeat(9, minmax(5px, 1fr));
	}

	.grid .grid__col--span-10 {
		grid-column-end: span 10;
	}

	.grid .grid__col--span-10 .grid {
		grid-template-columns: repeat(10, minmax(5px, 1fr));
	}

	.grid .grid__col--span-11 {
		grid-column-end: span 11;
	}

	.grid .grid__col--span-11 .grid {
		grid-template-columns: repeat(11, minmax(5px, 1fr));
	}

	.grid .grid__col--span-12 {
		grid-column-end: span 12;
	}

	.grid .grid__col--span-12 .grid {
		grid-template-columns: repeat(12, minmax(5px, 1fr));
	}

	/* Utility classes. */
	/**
	*** Disables column merging when grid's width is less than 600px (see more at
	*** the last seciton of the stylesheet).
	**/
	@supports (container-type: inline-size) {
		.mw-parser-output .grid.grid--unresponsive {
			container: unset;
		}
	}

	/**
	*** Horizontally align the grid itself (requires it's maximum width to be
	*** less than 100% for it to work).
	**/
	.grid.grid--align-left {
		margin-right: auto;
		margin-left: 0;
	}

	.grid.grid--align-right {
		margin-right: 0;
		margin-left: auto;
	}

	.grid.grid--align-center {
		margin: 0 auto;
	}

	/**
	*** Verically align grid's cells (requires the grid's minimum height to be
	*** higher than a single row's maximum height for it to work).
	**/
	.grid .grid__col--align-top {
		align-self: start;
	}

	.grid .grid__col--align-middle {
		align-self: center;
	}

	.grid .grid__col--align-bottom {
		align-self: end;
	}

	/** Adds padding equal to the grid gap's size into the grid itself. **/
	/*** All sides. ***/
	.grid.grid__padding {
		padding: var(--gl-grid-gap--phone);
	}

	/*** Top only. ***/
	.grid.grid__padding--top {
		padding-top: var(--gl-grid-gap--phone);
	}

	/*** Bottom only. ***/
	.grid.grid__padding--bottom {
		padding-bottom: var(--gl-grid-gap--phone);
	}

	/*** Left only. ***/
	.grid.grid__padding--left {
		padding-left: var(--gl-grid-gap--phone);
	}

	/*** Right only. ***/
	.grid.grid__padding--top {
		padding-top: var(--gl-grid-gap--phone);
	}

	/*** Block (vertical) sides only. ***/
	.grid.grid__padding--block {
		padding-bottom: var(--gl-grid-gap--phone);
		padding-top: var(--gl-grid-gap--phone);
	}

	/*** Inline (horizontal) sides only. ***/
	.grid.grid__padding--inline {
		padding-left: var(--gl-grid-gap--phone);
		padding-right: var(--gl-grid-gap--phone);
	}

	/* Increases grid cells' spacing as the screen gets wider. */
	@media only screen and (max-width: 1079px) {
		.grid :is(.grid__col--span-1,
		.grid__col--span-2,
		.grid__col--span-3,
		.grid__col--span-4,
		.grid__col--span-5,
		.grid__col--span-6,
		.grid__col--span-7,
		.grid__col--span-8,
		.grid__col--span-9,
		.grid__col--span-10,
		.grid__col--span-11) {
			grid-column-end: span 12;
		}
	}

	@media only screen and (min-width: 720px) and (max-width: 1239px) {
		.grid {
			gap: var(--gl-grid-gap--tablet);
			grid-gap: var(--gl-grid-gap--tablet);
		}

		/** Adds padding equal to the grid gap's size into the grid itself. **/
		/*** All sides. ***/
		.grid.grid__padding {
			padding: var(--gl-grid-gap--tablet);
		}

		/*** Top only. ***/
		.grid.grid__padding--top {
			padding-top: var(--gl-grid-gap--tablet);
		}

		/*** Bottom only. ***/
		.grid.grid__padding--bottom {
			padding-bottom: var(--gl-grid-gap--tablet);
		}

		/*** Left only. ***/
		.grid.grid__padding--left {
			padding-left: var(--gl-grid-gap--tablet);
		}

		/*** Right only. ***/
		.grid.grid__padding--top {
			padding-top: var(--gl-grid-gap--tablet);
		}

		/*** Block (vertical) sides only. ***/
		.grid.grid__padding--block {
			padding-bottom: var(--gl-grid-gap--tablet);
			padding-top: var(--gl-grid-gap--tablet);
		}

		/*** Inline (horizontal) sides only. ***/
		.grid.grid__padding--inline {
			padding-left: var(--gl-grid-gap--tablet);
			padding-right: var(--gl-grid-gap--tablet);
		}
	}

	@media only screen and (min-width: 1240px) {
		.grid {
			gap: var(--gl-grid-gap--desktop);
			grid-gap: var(--gl-grid-gap--desktop);
		}

		/** Adds padding equal to the grid gap's size into the grid itself. **/
		/*** All sides. ***/
		.grid.grid__padding {
			padding: var(--gl-grid-gap--desktop);
		}

		/*** Top only. ***/
		.grid.grid__padding--top {
			padding-top: var(--gl-grid-gap--desktop);
		}

		/*** Bottom only. ***/
		.grid.grid__padding--bottom {
			padding-bottom: var(--gl-grid-gap--desktop);
		}

		/*** Left only. ***/
		.grid.grid__padding--left {
			padding-left: var(--gl-grid-gap--desktop);
		}

		/*** Right only. ***/
		.grid.grid__padding--top {
			padding-top: var(--gl-grid-gap--desktop);
		}

		/*** Block (vertical) sides only. ***/
		.grid.grid__padding--block {
			padding-bottom: var(--gl-grid-gap--desktop);
			padding-top: var(--gl-grid-gap--desktop);
		}

		/*** Inline (horizontal) sides only. ***/
		.grid.grid__padding--inline {
			padding-left: var(--gl-grid-gap--desktop);
			padding-right: var(--gl-grid-gap--desktop);
		}
	}

	/* Merge all columns into one when windows's width is less than 1080px. */
	@media only screen and (max-width: 1079px) {
		.mw-parser-output .grid :is(.grid__col--span-1,
		.grid__col--span-2,
		.grid__col--span-3,
		.grid__col--span-4,
		.grid__col--span-5,
		.grid__col--span-6,
		.grid__col--span-7,
		.grid__col--span-8,
		.grid__col--span-9,
		.grid__col--span-10,
		.grid__col--span-11,
		.grid__col--span-12)  {
			grid-column-end: span 1;
		}

		.mw-parser-output .grid,
		.mw-parser-output .grid :is(.grid__col--span-1,
		.grid__col--span-2,
		.grid__col--span-3,
		.grid__col--span-4,
		.grid__col--span-5,
		.grid__col--span-6,
		.grid__col--span-7,
		.grid__col--span-8,
		.grid__col--span-9,
		.grid__col--span-10,
		.grid__col--span-11,
		.grid__col--span-12) .grid {
			grid-template-columns: repeat(1, minmax(5px, 1fr));
		}
	}
}

/** 5.2. Typography **/
h1 {
	margin: 0;
}

.typography :is(.headline-1, .headline-2, .headline-3, .headline-4, .headline-5, .headline-6),
.typography:is(.headline-1, .headline-2, .headline-3, .headline-4, .headline-5, .headline-6),
.mw-body :is(h1, h2, h3, h4, h5, h6),
:is(h1, h2, h3, h4, h5, h6) {
	border-color: var(--gl-popup--border-color);
	color: var(--gl-on-background);
	font-family: var(--gl-font-base_-_font-family);
	text-shadow: var(--gl-font-shadow);
	text-transform: uppercase;
}

.typography .subtitle-1,
.typography.subtitle-1,
.typography dt {
	color: var(--gl-on-background);
	font: 700 .875rem/1rem var(--gl-font-base_-_font-family); /* Original font-weight: 400. */
	letter-spacing: .009em;
	text-shadow: var(--gl-font-shadow);
	text-transform: uppercase;
}

.typography .subtitle-2,
.typography.subtitle-2 {
	color: var(--gl-on-background);
	font: 500 .75rem/.875rem var(--gl-font-base_-_font-family);
	letter-spacing: .006em;
	text-shadow: var(--gl-font-shadow);
	text-transform: uppercase;
}

.typography .body-1,
.typography.body-1 {
	font: 400 1rem/1.5 var(--gl-font-secondary_-_font-family);
	letter-spacing: .031em;
}

.typography .body-2,
.typography.body-2,
.typography dd {
	font: 400 .875rem/1.25 var(--gl-font-secondary_-_font-family);
	/* .75rem originally */
	letter-spacing: .016em;
}

.typography .button,
.typography.button {
	color: var(--gl-on-background);
	font: 700 1.25rem/1 var(--gl-font-base_-_font-family);
	letter-spacing: .078em;
	text-shadow: var(--gl-font-shadow);
	text-transform: uppercase;
}

.typography .caption,
.typography.caption,
figcaption {
	color: var(--gl-on-background);
	font: 500 .75rem/1.5 var(--gl-font-secondary_-_font-family);
	letter-spacing: .025em;
}

.typography .overline,
.typography.overline {
	font: 700 .75rem/1.5 var(--gl-font-secondary_-_font-family);
	letter-spacing: .094em;
	text-transform: uppercase;
}

.typography .footnote,
.typography.footnote {
	font: 300 .75rem/1.25rem var(--gl-font-secondary_-_font-family);
}

/** Buttons. **/
/*** @todo: use a propper class and update url to vars. ***/
.styled-button {
	align-items: center;
	appearance: none;
	background: transparent repeat-x center url(../../assets/img/optimized/gui/button_blue_centre.png);
	border: none;
	color: #fff;
	display: flex;
	height: 40px;
	justify-content: center;
	outline: none;
	padding: 0;
	position: relative;
	text-shadow: var(--gl-font-shadow);
}

.styled-button::before,
.styled-button::after {
	background: transparent no-repeat center;
	bottom: 0;
	content: '';
	position: absolute;
	top: 0;
	width: 16px;
}

.styled-button::before {
	background-image: url(../../assets/img/optimized/gui/button_blue_left.png);
	left: 0;
	transform: translateX(-100%);
}

.styled-button::after {
	background-image: url(../../assets/img/optimized/gui/button_blue_right.png);
	right: 0;
	transform: translateX(100%);
}

.styled-button:is(:hover, :focus) {
	background-image: url(../../assets/img/optimized/gui/button_blue_centre_selected.png);
}

.styled-button:is(:hover, :focus)::before {
	background-image: url(../../assets/img/optimized/gui/button_blue_left_selected.png);
}

.styled-button:is(:hover, :focus)::after {
	background-image: url(../../assets/img/optimized/gui/button_blue_right_selected.png);
}

/** 5.3. Popups. **/
.popup {
	align-items: center;
	background-image: linear-gradient(to bottom, var(--gl-popup--background-start) 0%, var(--gl-popup--background-end) 100%);
	border: 2px solid var(--gl-popup--border-color);
	border-radius: var(--gl-popup--border-radius);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 20px;
	position: relative;
}

.portable-infobox .pi-collapse:last-child.pi-collapse-closed > .pi-header {
	border-radius: 0 0 var(--gl-popup--border-radius) var(--gl-popup--border-radius);
}

.is-visible .popup,
.popup.is-visible {
	animation: popupBounceIn var(--gl-motion-duration--short-4);
}

.popup-stripes--container {
	left: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

/* Makes sure anything in the popup is in front of the stripes. */
.popup-stripes--container ~ * {
	z-index: 0;
}

/*
** Here you can modify how the lines/stripes at the top of the popups are
** rendered. Please use the variables (the properties that start with two
** dashes [--]) in the root element (in the global variables section) to
** modify them rather than the actual element properties.
*/
.popup-stripes {
	/*
	** The mask property adds the fading-to-transparent effect of the lines.
	** The -webkit-prefixed property bring masking support to Chrome and other
	** browsders that use the WebKit engine such as Opera, Brave, and Edge.
	*/
	-webkit-mask-image: linear-gradient(black, transparent);
	/*
	** Here's where the magic happens. Creates a páttern of infinitely repeating
	** diagonal <line color> lines which are tilted at <line angle> degrees.
	** These lines are then rendered in pixels 0 to <line width> and the rest
	** of the background space (<line spacing>) is filled with transparent pixels.
	*/
	background-image: repeating-linear-gradient(var(--gl-popup--line-angle), var(--gl-popup--line-color) 0, var(--gl-popup--line-color) var(--gl-popup--line-width), transparent 0, transparent 50%);
	/* Adds spacing between each line. */
	background-size: var(--gl-popup--line-spacing) var(--gl-popup--line-spacing);
	/* Determines each line's height. */
	height: var(--gl-popup--line-height);
	/* Unprefixed masking property that adds fade-to-transparent effect. */
	mask-image: linear-gradient(black, transparent);
	/* Render diagonal lines facing to the left. */
	transform: scaleX(-1);
	/* Repeat pattern for the entire parent element's width. */
	width: 100%;
}

.popup--header {

}

.popup--header-start {

}

.popup--header-end {

}

.popup--body {

}

.popup--footer {
	
}

.popup :is(.headline-2,
.headline-3,
.headline-4,
.headline-5,
.headline-6) {
	margin: 0;
}

@keyframes popupBounceIn {
	0% {
		transform: scale(0);
	}

	80% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes popupBounceOut {
	0% {
		transform: scale(1);
	}

	20% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(0);
	}
}

/** 5.4. Infobox **/
.portable-infobox {
	background-color: unset;
	background-image: linear-gradient(to bottom, var(--gl-popup--background-start) 0%, var(--gl-popup--background-end) 100%);
	border: 2px solid var(--gl-popup--border-color);
	border-radius: var(--gl-popup--border-radius);
}

.portable-infobox,
.portable-infobox * {
	position: relative;
}

.portable-infobox::before {
	background: var(--gl-popup--line-background);
	content: '';
	height: var(--gl-popup--line-height);
	position: absolute;
	top: -2px;
	width: 100%
}

.portable-infobox .pi-title {
	font-family: var(--gl-font-base_-_font-family);
	text-align: center;
}

.portable-infobox .pi-section-navigation,
.portable-infobox .pi-media-collection-tabs {
	gap: 4px;
	padding: 2px 12px 0;
	width: calc(100% - 24px);
}

.pi-section-navigation .pi-section-tab,
.pi-media-collection .pi-tab-link {
	align-items: center;
	background: var(--gl-tab-disabled--background);
	border: 0;
	border-radius: 8px 8px 0 0;
	display: inline-flex;
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
	height: 35px;
	text-shadow: var(--gl-title-font-shadow);
	text-transform: uppercase;
}

.pi-section-navigation .pi-section-tab::before,
.pi-media-collection .pi-tab-link::before,
.pi-section-navigation .pi-section-tab::after,
.pi-media-collection .pi-tab-link::after {
	background-image: var(--gl-tab-disabled--corner-left);
	content: '';
	display: inline-block;
	height: 100%;
	position: absolute;
	width: 10px;
}

.pi-section-navigation .pi-section-tab,
.pi-media-collection .pi-tab-link {
	max-width: 90%;
}

.pi-section-navigation .pi-section-tab::before,
.pi-media-collection .pi-tab-link::before {
	left: 0;
}

.pi-section-navigation .pi-section-tab::after,
.pi-media-collection .pi-tab-link::after {
	right: 0;
	transform: scaleX(-1);
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background-image: var(--gl-tab-active--background);
	font-weight: 400;
}

.pi-section-navigation .pi-section-tab.pi-section-active::before,
.pi-section-navigation .pi-section-tab.current::before,
.pi-media-collection .pi-tab-link.current::before,
.pi-section-navigation .pi-section-tab.pi-section-active::after,
.pi-section-navigation .pi-section-tab.current::after,
.pi-media-collection .pi-tab-link.current::after {
	background-image: var(--gl-tab-active--corner-left);
}

.pi-media-collection-tab-content {
	background: top var(--gl-tab-area) repeat-x;
	margin: 0 12px;
	padding: 12px 0;
}

.pi-media-collection-tab-content::before,
.pi-media-collection-tab-content::after {
	background-image: var(--gl-tab-area--corner-left);
	content: '';
	height: 23px;
	position: absolute;
	top: 0;
	width: 6px;
}

.pi-media-collection-tab-content::before {
	left: 0;
	transform: translateX(-100%);
}

.pi-media-collection-tab-content::after {
	right: 0;
	transform: translateX(100%) scaleX(-1);
}

.portable-infobox .pi-header {
	background: transparent var(--gl-area-box);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
	text-align: center;
}

.portable-infobox .pi-data-label {
	text-shadow: var(--gl-font-shadow), 0 0 2px rgb(var(--gl-color__black--rgb));
	flex: 1 1 80%;
}

.portable-infobox .pi-data-label .image {
	margin-right: 4px;
}

.portable-infobox .pi-border-color {
	border-color: var(--gl-popup--border-color);
}

.portable-infobox .pi-border-color.pi-group {
	border-bottom: none;
}

.portable-infobox .pi-data-value {
	font-family: var(--gl-font-secondary_-_font-family);
}




.pi-tabs__has-arrows {
	position: static;
	flex-wrap: nowrap;
	justify-content: unset;
	overflow-x: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.pi-tabs__has-arrows::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.pi-tabs__has-arrows {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox and new Chrome versions */
}

.pi-tabs__has-arrows .pi-tab-link {
	max-width: unset;
	overflow: unset;
}

.pi-tabs__has-arrows .pi-tabs__arrow {
	align-items: center;
	appearance: none;
	background: none;
	border: none;
	bottom: 0;
	display: flex;
	fill: currentcolor;
	height: 36px;
	justify-content: center;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity 300ms;
	width: 36px;
	z-index: 1;
}

.pi-tabs__has-arrows .pi-tabs__arrow > svg {
	filter: drop-shadow(0 0 1px #000)
			drop-shadow(0 0 1px #000);
	pointer-events: none;
}

.pi-tabs__has-arrows .pi-tabs__arrow-left {
	background-image: linear-gradient(to right, var(--gl-popup--border-color), #0000);
	left: 0;
}

.pi-tabs__has-arrows .pi-tabs__arrow-right {
	background-image: linear-gradient(to left, var(--gl-popup--border-color), #0000);
	right: 0;
}

.pi-tabs__has-arrows.left-arrow-visible .pi-tabs__arrow-left,
.pi-tabs__has-arrows.right-arrow-visible .pi-tabs__arrow-right {
	cursor: pointer;
	opacity: 1;
	pointer-events: all;
}

/** 5.5. Tables **/
/*** Fixes tables extending beyond the page's width. ***/
table {
	text-wrap: wrap;
}

table:only-child {
	margin-left: 0;
	margin-right: 0;
}

/*** General table styles. ***/
.wikitable,
.mw-datatable {
	background-color: transparent;
	color: var(--gl-primary-on-background);
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td,
.mw-datatable td,
.mw-datatable tr:hover td {
	background-color: var(--gl-popup--background-start);
	color: var(--gl-primary-on-background);
	padding: .25em .75em;
}

.wikitable > tr > th,
.wikitable > * > tr > th,
.mw-datatable th {
	background-color: var(--gl-popup--background-end);
	color: var(--gl-on-background);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
}

.wikitable,
.article-table {
	border-collapse: collapse;
	color: rgba(var(--gl-on-background--rgb), .87);
	margin: 1em 1em 1em 0;
}

.wikitable td,
.wikitable th,
.article-table td,
.article-table th {
	border-bottom: 1px solid var(--gl-popup--border-color);
	padding: 0.375rem 0.75rem;
}

.wikitable th,
.article-table th {
	background: rgba(var(--gl-on-background--rgb), .05);
}

.article-table {
	background-color: rgba(var(--gl-on-background--rgb), .08);
}

/** 5.6. Buttons **/
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
#mw-editform-cancel .oo-ui-buttonElement-button {
	align-items: center;
	background: var(--gl-popup--border-color);
	border: 8px solid transparent;
	border-image: var(--gl-button-corner) 7 fill;
	border-radius: 7px;
	color: var(--gl-on-background);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
	display: inline-flex;
	height: 36px;
	text-shadow: var(--gl-font-shadow);
	text-transform: uppercase;
	transition: unset;
}

#mw-editform-cancel {
	margin-left: 0;
}

#mw-editform-cancel .oo-ui-buttonElement-button {
	border-image: var(--gl-button-corner-cancel) 7 fill;
	color: var(--gl-button-cancel-color);
}

.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button,
.oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
	line-height: 1;
}

.oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button {
	padding: 0 6px;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
	color: #fff;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
	background: var(--gl-popup--border-color);
	color: var(--gl-on-background);
}

:is(.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
#mw-editform-cancel .oo-ui-buttonElement-button):is(:hover, :focus, :focus-within, :active) {
	box-shadow: 0 0 8px var(--gl-popup--border-color),
				0 0 8px var(--gl-popup--border-color),
				0 0 8px var(--gl-popup--border-color);
}

:is(.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
#mw-editform-cancel .oo-ui-buttonElement-button):active {
	transform: translateY(2px);
}

/** 5.7. Tabs **/
@media (prefers-reduced-motion: no-preference) {
	.tabber__tabs {
		scroll-behavior: smooth !important;
	}
}

.tabber__header {
	box-shadow: unset;
}

.tabber__tabs {
	gap: 4px;
	padding: 0 12px;
}

a.tabber__tab:not(.mw-selflink),
a.tabber__tab[aria-selected='true'],
a.tabber__tab[aria-selected='true']:visited {
	color: #fff;
}

.tabber__indicator {
	display: none;
}

.tabber__tab {
	align-items: center;
	background: var(--gl-tab-disabled--background);
	border: 0;
	border-radius: 8px 8px 0 0;
	display: inline-flex;
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
	height: 35px;
	padding: 0 1em;
	position: relative;
	text-shadow: var(--gl-title-font-shadow);
	text-transform: uppercase;
}

.tabber__tab[aria-selected='true'] {
	background-image: var(--gl-tab-active--background);
}

.tabber__tab::before,
.tabber__tab::after {
	background-image: var(--gl-tab-disabled--corner-left);
	content: '';
	display: inline-block;
	height: 100%;
	position: absolute;
	width: 10px;
}

.tabber__tab[aria-selected='true']::before,
.tabber__tab[aria-selected='true']::after {
	background-image: var(--gl-tab-active--corner-left);
}

.tabber__tab::before {
	left: 0;
}

.tabber__tab::after {
	right: 0;
	transform: scaleX(-1);
}

.tabber__header__next::after {
	background: currentColor;
	-webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E next %3C/title%3E %3Cpath d=%22M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z%22/%3E %3C/svg%3E");
	mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E next %3C/title%3E %3Cpath d=%22M7 1L5.6 2.5 13 10l-7.4 7.5L7 19l9-9z%22/%3E %3C/svg%3E");
}

.tabber__header__prev::after {
	background: currentColor;
	-webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E previous %3C/title%3E %3Cpath d=%22M4 10l9 9 1.4-1.5L7 10l7.4-7.5L13 1z%22/%3E %3C/svg%3E");
	mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E previous %3C/title%3E %3Cpath d=%22M4 10l9 9 1.4-1.5L7 10l7.4-7.5L13 1z%22/%3E %3C/svg%3E");
}

.tabber__section {
	position: relative;
}

.tabber__section::before {
	background: var(--gl-tab-area) repeat-x;
	content: '';
	height: 32px;
	left: 6px;
	/* This seems quite hacky but at least it works... */
	position: sticky;
	top: 0;
	width: calc(100% - 12px);
}

.tabber__panel {
	padding: 12px 6px;
	position: relative;
}

.tabber__panel::before,
.tabber__panel::after {
	background-image: var(--gl-tab-area--corner-left);
	content: '';
	height: 23px;
	position: absolute;
	top: 0;
	width: 6px;
}

.tabber__panel::before {
	left: 0;
}

.tabber__panel::after {
	right: 0;
	transform: scaleX(-1);
}

/** 5.8. Checkbox. **/
/*
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span {
	background-color: var(--gl-on-background);
}
*/

/* Removes blue border when interacting with a checkbox. */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span {
	box-shadow: unset;
}

.oo-ui-checkboxInputWidget [type='checkbox'] + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] + span {
	background: none;
	background: var(--gl-checkbox--unchecked);
	border: none;
}

.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span,
.oo-ui-checkboxInputWidget [type='checkbox']:checked + span {
	background: none;
	background: var(--gl-checkbox--checked);
	border-color: unset;
}

.oo-ui-checkboxInputWidget [type='checkbox']:is(:hover, :focus, :active) + span,
.oo-ui-checkboxInputWidget [type='checkbox']:checked:is(:hover, :focus, :active) + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:is(:hover, :focus, :active) + span,
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:is(:hover, :focus, :active) + span {
	box-shadow: var(--gl-checkbox--glow);
}

/** 5.9. Modals **/
/*** Add new invisible backdrop that will handle the close event when clicked. ***/
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-backdrop {
	bottom: 0;
	height: 100%;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: -1;
}

/*** Preventing modal footer from overlapping the header. ***/
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
	min-height: 148px;
}

/*** Add some horizontal padding to the modal body. ***/
.oo-ui-window-content.oo-ui-processDialog-content .oo-ui-window-body {
	padding: 8px 19px;
}

/*** Other styles. ***/
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame hr {
	border: none;
	border-bottom: 1px solid var(--theme-border-color);
}

/*** GL-related styles ***/
.oo-ui-windowManager-modal > .oo-ui-dialog {
	background-color: rgba(0, 0, 0, .4);
}

@media only screen and (min-width: 701px) {
	.oo-ui-window-frame {
		width: min(100%, 1080px) !important;
	}
}

.oo-ui-window-content .modal-contents {
    display: block !important;
}

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame,
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
	background: none;
	background-image: linear-gradient(to bottom, var(--gl-popup--background-start) 0%, var(--gl-popup--background-end) 100%);
	border: 2px solid var(--gl-popup--border-color);
	border-radius: var(--gl-popup--border-radius);
}

.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
	border: 0;
	border-radius: 0;
}

.oo-ui-processDialog-content .oo-ui-window-head,
.oo-ui-processDialog-content .oo-ui-window-foot {
	outline: unset;
}

.oo-ui-processDialog-content::before {
	background: var(--gl-popup--line-background);
	content: '';
	height: var(--gl-popup--line-height);
	position: absolute;
	top: -2px;
	width: 100%;
	z-index: -1;
}

/**** Dialog head ****/
.oo-ui-processDialog-location {
	align-items: center;
	display: flex;
	justify-content: center;
	position: relative;
}

.oo-ui-processDialog-title {
	font: 500 1.5rem/1 var(--gl-font-base_-_font-family);
	text-shadow: var(--gl-title-font-shadow);
	text-transform: uppercase;
}

.oo-ui-processDialog-actions-safe {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	left: unset;
	right: 0;
	width: 44px;
}

.oo-ui-processDialog-actions-safe .oo-ui-actionWidget {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.oo-ui-processDialog .oo-ui-actionWidget.oo-ui-iconElement > .oo-ui-buttonElement-button {
	--button-size: 25px;
	align-items: center;
	border: none;
	color: transparent;
	display: flex;
	font-size: 0;
	height: 100%;
	justify-content: center;
	line-height: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.oo-ui-processDialog .oo-ui-actionWidget.oo-ui-iconElement > .oo-ui-buttonElement-button:is(:hover, :focus, :active) {
	color: transparent;
}

.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:is(:hover, :focus, :active) {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none !important;
}

.oo-ui-processDialog .oo-ui-actionWidget.oo-ui-iconElement > .oo-ui-buttonElement-button::before {
	background: url('https://galaxylife.wiki.gg/images/c/c8/Btn_close.png') center/contain no-repeat;
	content: '';
	height: var(--button-size);
	position: absolute;
	width: var(--button-size);
	z-index: -1;
}

.oo-ui-processDialog .oo-ui-actionWidget.oo-ui-iconElement > .oo-ui-buttonElement-button:is(:hover, :focus, :active)::before {
	filter: drop-shadow(0 0 3px var(--gl-popup--border-color))
			drop-shadow(0 0 3px var(--gl-popup--border-color));
}

/**** Dialog body. ****/
.oo-ui-processDialog-content .oo-ui-window-body :is(#toc, .mw-editsection) {
	display: none;
}

.oo-ui-processDialog-content .oo-ui-window-body h2:not(.pi-item):first-of-type {
	padding-top: 0;
}

.oo-ui-processDialog-content .oo-ui-window-body h2 {
	text-shadow: var(--gl-title-font-shadow);
}

.oo-ui-processDialog-content :is(.pi-title,
.pi-header,
.pi-data-label) {
	color: var(--gl-on-background);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 500;
	text-shadow: var(--gl-title-font-shadow);
	text-transform: uppercase;
	vertical-align: middle;
}

.rootpage-Quests .pi-image-thumbnail {
	max-height: 44px;
	max-width: 44px;
	object-fit: contain;
}

.rootpage-Quests .pi-horizontal-group-item.pi-data-value {
	vertical-align: middle;
}

.oo-ui-processDialog-content .dialogue-container:not(:has(+ .dialogue-container)) {
	margin-bottom: 0;
}

/***** Put infobox above the rest of the info (for mission dialogs) *****
@media only screen and (max-width: 1079px) {
	.oo-ui-processDialog-content .grid > div:first-child {
		order: 2;
	}

	.oo-ui-processDialog-content .grid > div:nth-child(2) {
		order: 1;
	}
}
*/

/* 6. General styles */
html {
	background: var(--gl-background) center/cover fixed var(--gl-background--galaxy);
}

#content {
	background-color: var(--gl-background);
}

html::before,
html::after {
	content: '';
	height: 300%;
	left: 0;
	position: fixed;
	right: 0;
	top: -50%;
	transform: translateY(0);
	transform-origin: 0 0;
	width: 100%;
	z-index: -1;
}

html::before {
	background: var(--gl-background--fog-1), var(--gl-background--stars-1);
}

html::after {
	background: var(--gl-background--fog-2), var(--gl-background--stars-2);
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		html::before {
			animation: parallax-galaxy-1 auto linear;
			animation-timeline: scroll();
		}
		
		html::after {
			animation: parallax-galaxy-2 auto linear;
			animation-timeline: scroll();
		}

		@keyframes parallax-galaxy-1 {
			to {
				transform: translateY(-30%);
			}
		}
		
		@keyframes parallax-galaxy-2 {
			to {
				transform: translateY(-50%);
			}
		}
	}
}

html,
body,
#mw-page-base,
#mw-head-base,
#mw-head {
	background: none;
}

.mw-body,
.parsoid-body {
	background-color: var(--gl-popup--background-start);
	border-color: var(--gl-popup--border-color);
	color: var(--gl-on-background);
}

.mw-body {
	background: top var(--gl-tab-area) repeat-x;
	border-top: 0;
	font-family: var(--gl-font-secondary_-_font-family);
	letter-spacing: .25px;
}

/** 6.1. Sidebar **/
#mw-panel {
	background-color: unset;
	background-image: linear-gradient(to bottom, var(--gl-popup--background-start) 0%, var(--gl-popup--background-end) 100%);
	border: 2px solid var(--gl-popup--border-color);
	border-radius: var(--gl-popup--border-radius);
	margin-top: 36px;
	overflow: hidden;
	position: relative;
}

.vector-menu-portal .vector-menu-heading {
	color: var(--gl-on-background);
}

.vector-menu-portal#p-navigation #n-Discord > a {
	background: left/contain no-repeat url('https://discord.com/api/guilds/747216490629038121/embed.png');
	display: block;
	font-size: 0;
	height: 18px;
}

@media screen and (min-width: 982px) {
	#mw-panel {
		padding: 0;
	}
}

/*** Mobile design. ***/
@media screen and (max-width: 720px) {
	.mw-body,
	.parsoid-body {
		border: none;
	}

	.portable-infobox {
		margin-bottom: 1rem;
	}

	#mw-navigation {
		margin: 0;
		width: 100%;
	}

	#mw-panel {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		width: calc(100% - 4px);
	}

	#mw-panel #p-logo,
	#mw-panel #p-navigation {
		display: flex;
		flex: 1 1 100%;
		justify-content: center;
	}

	#mw-panel #p-navigation {
		margin-bottom: 1em;
	}
}

/** 6.2. Page header **/
:is(#p-variants, #p-cactions):has(.vector-menu-content-list:empty) {
	display: none;
}

.vector-search-box-input {
	background: var(--gl-area-box);
	border: 0;
	border-radius: 8px;
	color: #fff;
}

#searchButton,
#mw-searchButton {
	background: var(--gl-button-search);
	opacity: 1;
	overflow: unset;
}

#left-navigation,
#right-navigation {
	margin-top: 2.675em;
}

.vector-menu-tabs-legacy,
#right-navigation .vector-menu-dropdown {
	height: 35px;
}

.vector-menu-tabs-legacy ul {
	display: flex;
	gap: 4px;
}

.vector-menu-tabs-legacy li:is(:hover, :focus-within) {
	box-shadow: 0 0 8px var(--gl-popup--border-color),
				0 0 8px var(--gl-popup--border-color),
				0 0 8px var(--gl-popup--border-color);
}

.vector-menu-tabs-legacy ul a:not(.mw-selflink),
.vector-menu-tabs-legacy li a:not(.mw-selflink):is(:hover, :focus) {
	color: #fff;
	text-decoration: none;
}

.vector-menu-tabs,
.vector-menu-tabs a,
#mw-head .vector-menu-dropdown .vector-menu-heading {
	background: none;
	transform: translateY(1px);
}

/* Fixes text getting cut off in some tabs. */
.vector-menu-tabs-legacy li a {
	padding-left: 16px;
	padding-right: 16px;
}

.vector-menu-tabs-legacy li a,
.vector-menu-tabs-legacy .new a,
.vector-menu-tabs-legacy .selected a,
.vector-menu-tabs-legacy .selected a:visited {
	color: #fff;
}

.vector-menu-tabs-legacy li,
.vector-menu-dropdown {
	align-items: center;
	background: var(--gl-tab-disabled--background);
	border: 0;
	border-radius: 8px 8px 0 0;
	display: inline-flex;
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
	height: 35px;
	position: relative;
	text-shadow: var(--gl-title-font-shadow);
	text-transform: uppercase;
}

.vector-menu-tabs-legacy li::before,
.vector-menu-tabs-legacy li::after,
.vector-menu-dropdown::before,
.vector-menu-dropdown::after {
	background-image: var(--gl-tab-disabled--corner-left);
	content: '';
	display: inline-block;
	height: 100%;
	position: absolute;
	width: 10px;
}

.vector-menu-tabs-legacy li::before,
.vector-menu-dropdown::before {
	left: 0;
}

.vector-menu-tabs-legacy li::after,
.vector-menu-dropdown::after {
	right: 0;
	transform: scaleX(-1);
}

.vector-menu-tabs-legacy .selected {
	background-image: var(--gl-tab-active--background);
	font-weight: 400;
}

.vector-menu-tabs-legacy .selected::before,
.vector-menu-tabs-legacy .selected::after {
	background-image: var(--gl-tab-active--corner-left);
}

.vector-menu-dropdown {
	margin-left: 4px;
	transform: translateY(1px);
}

.vector-menu-dropdown .vector-menu-heading {
	color: var(--gl-on-background);
}

.vector-menu-dropdown .vector-menu-heading:is(:hover, :focus) {
	color: var(--gl-on-background);
}

.vector-menu-dropdown .vector-menu-heading::after {
	background: unset;
	background-color: currentColor;
	margin-left: .5em;
	-webkit-mask: var(--icon-collapse) center/contain no-repeat;
	mask: var(--icon-collapse) center/contain no-repeat;
}

.vector-menu-dropdown:is(:hover, :focus) .vector-menu-heading::after {
	transform: rotate(.5turn);
}

.vector-menu-dropdown .vector-menu-content {
	--gl-tooltip-border-size: 14;
	background-color: unset;
	border: calc(1px * var(--gl-tooltip-border-size)) solid;
	border-image: var(--gl-tooltip) var(--gl-tooltip-border-size) fill;
	overflow: unset;
	transform: translateY(20px);
}

.vector-menu-dropdown .vector-menu-content::before {
	background: var(--gl-tooltip-arrow) center/contain no-repeat;
	content: '';
	height: 24px;
	left: 0;
	position: absolute;
	top: 0;
	transform: translateY(calc(-100% - 7px)) scaleY(-1);
	width: 25px;
}

/* Makes sure that the space between the dropdown content and the button is interactive. */
.vector-menu-dropdown .vector-menu-content::after {
	content: '';
	height: 20px;
	position: absolute;
	top: 0;
	transform: translate(calc(1px * var(--gl-tooltip-border-size)), calc(-100% - 1px * var(--gl-tooltip-border-size)));
	width: calc(100% + 2px * var(--gl-tooltip-border-size));
}

.vector-menu-dropdown .mw-list-item a {
	color: var(--gl-on-background);
	text-underline-position: under;
}

/** Cookie warning **/
.mw-cookiewarning-container {
	border: 10px solid transparent;
	border-bottom: 0;
	border-image: var(--gl-cookie-warning-background) 10 fill;
	background-color: unset;
}

/** Page content **/
#toc {
	background: none;
	border: 16px solid transparent;
	border-image: var(--gl-area-box-corners) 12 fill;
}

#toc #mw-toc-heading,
#toc .toctogglespan {
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
	text-shadow: var(--gl-font-shadow);
}

#toc .tocnumber {
	color: var(--gl-secondary-on-background);
}

#toc a {
	color: inherit;
	font-family: var(--gl-font-secondary_-_font-family);
}

.quote-container {
	border: 12px solid transparent;
	border-image: var(--gl-area-box-corners) 12 fill;
	display: flex;
	flex-direction: column;
	margin: 0 auto 1em;
	max-width: 80ch;
	position: relative;
}

.quote-author {
	align-self: flex-end;
}

li.gallerybox div.thumb {
	background-color: var(--gl-popup--background-end);
	border-color: var(--gl-popup--border-color);
}

div.gallerytext {
	COLOR: var(--gl-secondary-on-background);
}

div.thumbinner {
	border: none;
	background-color: transparent;
}

.thumbimage {
	background-color: transparent;
	border: none;
}

.thumbcaption {
	color: var(--gl-secondary-on-background);
}

/** Template:Advice. **/
.advice {
	background-color: #192951;
	border: 1px solid #ced8f6;
	border-radius: 12px;
	color: var(--gl-on-background);
	display: flow-root;
	margin: 1em 0;
	padding: 8px;
	text-align: center;
	width: fit-content;
}

.advice-image-container,
.advice-text-container {
	display: inline-block;
}

.advice-image-container {
	width: 64px;
}

.advice-text-container {
	padding: 8px;
}

/* Footer */
.catlinks {
	background: unset;
	border: 12px solid transparent;
	border-image: var(--gl-area-box-corners) 12 fill;
}

.mw-footer li {
	color: var(--gl-primary-on-background);
}

/** 6.1. Editor **/
.wikiEditor-ui .wikiEditor-ui-view,
.wikiEditor-ui .wikiEditor-ui-top,
.wikiEditor-ui-toolbar .sections .section,
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section-secondary .group {
	border-color: var(--gl-popup--border-color);
}

.wikiEditor-ui-toolbar,
.editOptions {
	background-color: var(--gl-popup--background-start);
}

.wikiEditor-ui-toolbar .group .tool-select .label,
.wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
	color: var(--gl-on-background);
}

.wikiEditor-ui-toolbar .tabs span.tab a {
	color: var(--gl-popup--border-color);
}

/*** Special characters menu ***/
.wikiEditor-ui-toolbar .booklet > .index > div {
	color: var(--gl-primary-on-background);
}

.wikiEditor-ui-toolbar .booklet > .index > :hover {
	background-color: rgba(var(--gl-on-background--rgb), .16);
}

.wikiEditor-ui-toolbar .booklet > .index > .current {
	background-color: rgba(var(--gl-on-background--rgb), .32);
	color: var(--gl-on-background);
}

.wikiEditor-ui-toolbar .page-characters div span {
	color: var(--gl-primary-on-background);
	border-color: var(--gl-popup--border-color);
}

.wikiEditor-ui-toolbar .page-characters div span:hover {
	background-color: rgba(var(--gl-on-background--rgb), .16);
	border-color: var(--gl-popup--border-color);
	color: var(--gl-on-background);
}

/*** Help section ***/
.wikiEditor-ui-toolbar .page-table th {
	color: var(--gl-on-background);
}

.wikiEditor-ui-toolbar .page-table td {
	color: var(--gl-primary-on-background);
}

/*** Upload file section ***/
#msupload-div {
	background-color: var(--gl-popup--background-start);
	border-color: var(--gl-popup--border-color);
}

#msupload-dropzone {
	border-color: var(--gl-popup--border-color);
	color: var(--gl-on-background);
}

#msupload-list .file {
	background-color: var(--gl-popup--background-end);
}

#msupload-list .file .file-name {
	font-weight: 400;
}

#msupload-list .file .file-name:hover {
	background-color: unset;
}

#msupload-list .file .file-size {
	color: var(--gl-secondary-on-background);
}

#msupload-bottom {
	border-color: var(--gl-popup--border-color);
}

.drop-over {
	background-color: rgba(var(--gl-on-background--rgb), .12);
}

/*** Footer ***/
.editOptions {
	color: var(--gl-on-background);
}

.editCheckboxes {
	margin-bottom: .5em;
}

/*** Code editor ***/
.CodeMirror {
	background-color: var(--gl-popup--background-end);
	color: var(--gl-on-background);
}

.CodeMirror-linenumber,
.CodeMirror-gutters {
	background-color: var(--gl-popup--background-start);
	color: var(--gl-secondary-on-background);
}

.CodeMirror pre.CodeMirror-line {
	color: var(--gl-primary-on-background);
}

.editOptions {
	background-color: var(--gl-popup--background-end);
	border-color: var(--gl-popup--border-color);
	color: var(--gl-primary-on-background);
}

:is(.cm-mw-template-ext-link-ground,
.cm-mw-template-ext2-link-ground,
.cm-mw-template-ext3-link-ground,
.cm-mw-template-link-ground,
.cm-mw-template-ext-ground,
.cm-mw-template-ext2-ground,
.cm-mw-template-ext3-ground,
.cm-mw-template-ground):is(.cm-mw-template-bracket,
.cm-mw-template-name,
.cm-mw-template-delimiter,
.cm-mw-template) {
	/* template-t1 */
	color: #d8f3dc;
}

:is(.cm-mw-template2-ext-link-ground,
.cm-mw-template2-ext2-link-ground,
.cm-mw-template2-ext3-link-ground,
.cm-mw-template2-link-ground,
.cm-mw-template2-ext-ground,
.cm-mw-template2-ext2-ground,
.cm-mw-template2-ext3-ground,
.cm-mw-template2-ground):is(.cm-mw-template-bracket,
.cm-mw-template-name,
.cm-mw-template-delimiter,
.cm-mw-template) {
	/* template-t2 */
	color: #95d5b2;
}

:is(.cm-mw-template3-ext-link-ground,
.cm-mw-template3-ext2-link-ground,
.cm-mw-template3-ext3-link-ground,
.cm-mw-template3-link-ground,
.cm-mw-template3-ext-ground,
.cm-mw-template3-ext2-ground,
.cm-mw-template3-ext3-ground,
.cm-mw-template3-ground):is(.cm-mw-template-bracket,
.cm-mw-template-name,
.cm-mw-template-delimiter,
.cm-mw-template) {
	/* template-t3 */
	color: #52b788;
}

.CodeMirror-line .cm-mw-template-argument-name {
	/* template-param */
	color: #e6f5a6;
}

.CodeMirror-line :is(.cm-mw-templatevariable-bracket,
.cm-mw-templatevariable-name,
.cm-mw-templatevariable-delimiter,
.cm-mw-templatevariable) {
	/* parameter */
	color: #ff8969;
}

.CodeMirror-line :is(.cm-mw-extlink-bracket,
.cm-mw-link-bracket,
.cm-mw-link-delimiter) {
	/* link */
	color: #d4b170;
}

.CodeMirror-line :is(.cm-mw-extlink-protocol,
.cm-mw-extlink,
.cm-mw-free-extlink-protocol,
.cm-mw-free-extlink,
.cm-mw-link-pagename,
.cm-mw-link,
.cm-mw-link-tosection) {
	/* link-target */
	color: #decaa4;
}

.CodeMirror-line :is(.cm-mw-extlink-text,
.cm-mw-link-text) {
	/* link-text */
	color: #decaa4;
}

.CodeMirror-line :is(.cm-mw-parserfunction-bracket,
.cm-mw-parserfunction-name,
.cm-mw-parserfunction-delimiter) {
	/* parser-func */
	color: #d48aff;
}

.CodeMirror-line :is(.cm-mw-htmltag-bracket,
.cm-mw-htmltag-name,
.cm-mw-exttag-bracket,
.cm-mw-exttag-name) {
	/* tag */
	color: #42b9f0;
}

.CodeMirror-line :is(.cm-mw-htmltag-attribute,
.cm-mw-exttag-attribute) {
	/* tag-attr */
	color: #a1dcf7;
}

.CodeMirror-line .cm-mw-mnemonic {
	/* entity */
	color: #42b9f0;
}

.CodeMirror-line .cm-mw-comment {
	/* comment */
	color: #84a0a0;
}

.CodeMirror-line :is(.cm-mw-apostrophes-bold,
.cm-mw-apostrophes-italic,
.cm-mw-section-header,
.cm-mw-hr,
.cm-mw-signature,
.cm-mw-list,
.cm-mw-indenting,
.cm-mw-doubleUnderscore) {
	/* markup */
	color: #0088ff;
}

.CodeMirror-line :is(.cm-mw-table-bracket,
.cm-mw-table-definition,
.cm-mw-table-delimiter) {
	/* table */
	color: #e5ed9f;
}

.cm-mw-matchingbracket {
	background-color: rgba(var(--theme-on-background), 0.3);
	box-shadow: inset 0 0 1px 1px rgba(var(--theme-on-background), 0.6);
}

.cm-mw-skipformatting {
	background-color: rgba(var(--theme-on-background), 0.3);
}

/*** Warning ***/
.mw-message-box-warning {
	background-color: rgb(var(--gl-color__yellow--rgb), .12);
	border-color: var(--gl-color__yellow);
	color: var(--gl-on-background);
}

/** 6.2. Recent Changes **/
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
	background-color: unset;
}

.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
	background-color: var(--gl-popup--background-start);
	border-color: var(--gl-popup--border-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
	color: var(--gl-on-surface);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
}

.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
	background-color: var(--gl-popup--background-end);
	border-color: var(--gl-popup--border-color);
	color: var(--gl-on-background);
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
	color: inherit;
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
	background-color: rgba(var(--gl-on-background--rgb), .16);
	color: inherit;
}

.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
	background-color: rgba(var(--gl-on-background--rgb), .32);
	color: inherit;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
	border-color: var(--gl-popup--border-color);
}

.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
	background-color: var(--gl-popup--background-start);
	border-color: var(--gl-popup--border-color);
}

/* Hover popup */
.oo-ui-popupWidget-popup {
	background-color: var(--gl-popup--background-end);
	border-color: var(--gl-popup--border-color);
}

.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
	border-top-color: var(--gl-popup--border-color);
}

.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
	border-top-color: var(--gl-popup--background-end);
}

.mw-rcfilters-ui-tagItemWidget-popup-content {
	color: var(--gl-primary-on-background);
}

/**/

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
	background-color: var(--gl-popup--background-start);
	border-color: var(--gl-popup--border-color);
}

/* Filters popup*/
.oo-ui-menuSelectWidget {
	background-color: var(--gl-popup--background-start);
	border-color: var(--gl-popup--border-color);
}

.mw-rcfilters-ui-filterMenuHeaderWidget-header {
	background-color: unset;
	border-color: var(--gl-popup--border-color);
}

.mw-rcfilters-ui-filterMenuHeaderWidget-title {
	color: var(--gl-on-background);
}

.mw-rcfilters-ui-filterMenuSectionOptionWidget,
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected,
.mw-rcfilters-ui-itemMenuOptionWidget:hover,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
	background-color: var(--gl-popup--background-end);
}

.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
	background-color: var(--gl-popup--background-end);
}

.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) {
	border-color: var(--gl-popup--border-color);
}

.oo-ui-menuSectionOptionWidget,
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label,
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title {
	color: var(--gl-on-background);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
}

.mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
	color: var(--gl-primary-on-background);
	font-family: var(--gl-font-secondary_-_font-family);
}

.mw-rcfilters-ui-menuSelectWidget-footer {
	background-color: var(--gl-popup--background-end);
	border-color: var(--gl-popup--border-color);
}

.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
	color: var(--gl-on-background);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
}

.mw-rcfilters-ui-datePopupWidget {
	border-color: var(--gl-popup--border-color);
}

.mw-rcfilters-ui-datePopupWidget .mw-rcfilters-ui-valuePickerWidget-title {
	color: var(--gl-on-background);
}

.oo-ui-buttonElement > .oo-ui-buttonElement-button {
	font-weight: 400;
}

.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:is(:hover, :active) {
	color: #fff;
}

.oo-ui-optionWidget.oo-ui-widget-disabled,
.mw-rcfilters-ui-savedLinksListWidget-placeholder.oo-ui-optionWidget .oo-ui-labelElement-label {
	color: var(--gl-secondary-on-background);
}

/** 6.3. Special:Search **/
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
	color: var(--gl-on-background);
}

.results-info {
	color: var(--gl-secondary-on-background);
}

.mw-search-profile-tabs,
#mw-searchoptions {
	background-color: var(--gl-popup--background-start);
	border-color: var(--gl-popup--border-color);
}

#mw-searchoptions .divider {
	border-color: var(--gl-popup--border-color);
}

.mw-search-result-data {
	color: var(--gl-secondary-on-background);
}

/** 6.4. Page history **/
#pagehistory li.selected {
	background-color: var(--gl-popup--background-end);
	outline-color: var(--gl-popup--border-color);
	color: var(--gl-on-background);
}

.mw-plusminus-pos {
	color: var(--gl-color__green);
}

.mw-plusminus-neg {
	color: var(--gl-color__red);
}

.mw-plusminus-null {
	color: var(--gl-color__grey);
}

.diff-context {
	background-color: unset;
	border-color: var(--gl-color__grey);
	color: var(--gl-on-background);
}

.diff-deletedline {
	border-color: var(--gl-color__red);
}

.diff-addedline {
	border-color: var(--gl-color__green);
}

.diff-deletedline .diffchange {
	background-color: var(--gl-color__red);
	color: var(--gl-on-background--inverse);
}

.diff-addedline .diffchange {
	background-color: var(--gl-color__green);
	color: var(--gl-on-background--inverse);
}

/** 6.5. Template:Dialogue **/
.dialogue-container {
	--speech-chevron-height: 52px;
	--speech-chevron-width: 58px;
	--shrink-factor: 1;
	align-items: center;
	display: flex;
	gap: calc(var(--speech-chevron-width) / var(--shrink-factor));
	margin-bottom: 1em;
}

.dialogue-container:last-of-type,
.dialogue-container:only-of-type {
	margin-bottom: unset;
}

.dialogue-container .dialogue-text {
	--border-size: 12px;
	background: none;
	border: calc(var(--border-size) / var(--shrink-factor)) solid transparent;
	border-image: url('https://galaxylife.wiki.gg/images/f/f3/Speech-background.png') calc(15 / var(--shrink-factor)) fill;
	padding: calc(1em / var(--shrink-factor)) calc(2em / var(--shrink-factor));
	position: relative;
	text-align: center;
}

.dialogue-container.is-small {
	--shrink-factor: 2;
}

.dialogue-container .dialogue-text::before {
	background: url('https://galaxylife.wiki.gg/images/3/3a/Speech_arrow_1.png') center/contain no-repeat;
	content: '';
	height: calc(var(--speech-chevron-height) / var(--shrink-factor));
	left: 0;
	position: absolute;
	top: 50%;
	transform: translate(calc(-100% + 7px / var(--shrink-factor)), -50%);
	width: calc(var(--speech-chevron-width) / var(--shrink-factor));
}

/** Main page **/
@media only screen and (min-width:1024px) {
	.mp-grid .grid__col--left {
		float: left;
		width: calc(100% - 320px)
	}
	
	.mp-grid .grid__col--right {
		clear: right;
		float: right;
		width: 300px;
	}
}

.mp-section {
	background: none;
	border: 16px solid transparent;
	border-image: var(--gl-area-box-corners) 12 fill;
	gap: 2em;
	grid-gap: 2em;
	padding: 1em 2em;
	text-align: center;
}

.mp-subsection {
	width: 100%;
}

.mp-section p:last-of-type {
	margin-bottom: 0;
}

.mp-section :is(ul, ol) {
	list-style: none;
	margin: 0;
}

.mp-section-start,
.mp-section-end {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mp-section .mp-headline {
	border: none;
	margin: 0 0 1em;
	text-align: center;
}

.mp-socials,
.mp-socials > P {
	display: flex;
	flex-flow: row wrap;
	flex-gap: .5em;
	gap: .5em;
	justify-content: center;
}

#mp-welcome .responsive-img {
	max-height: 250px;
	max-width: 250px;
}

@media only screen and (max-width: 1079px) {
	#mp-welcome .responsive-img {
		height: 250px;
		width: 250px;
	}
}

#mp-news {
	overflow: hidden;
}

/*** Announcement popup. ***/
.announcement-panel {
	grid-column-end: span 12;
}

h2.announcement-title {
	border: none;
	margin: 0;
}

.announcement-body {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 1rem;
	min-height: 300px;
}

.announcement-footer {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: center;
}

.announcement-pagination {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.announcement-footer button {
	appearance: none;
	background: var(--gl-atlas);
	border: none;
	cursor: pointer;
	height: 28px;
	padding: 0;
	width: 28px;
}

.announcement-footer button:not([disabled]):is(:hover, :focus) {
	filter: drop-shadow(0 0 2px var(--gl-popup--border-color))
			drop-shadow(0 0 2px var(--gl-popup--border-color))
			drop-shadow(0 0 2px var(--gl-popup--border-color));
	outline: 2px solid #0000;
}

.announcement-footer button[disabled] {
	cursor: unset;
	filter: grayscale(1);
}

.announcement-footer .button-first {
	background-position-x: -295px;
	transform: scaleX(-1);
}

.announcement-footer .button-prev {
	background-position-x: -92px;
	transform: scaleX(-1);
}

.announcement-footer .button-next {
	background-position-x: -92px;
}

.announcement-footer .button-last {
	background-position-x: -295px;
}

a:not(.mw-selflink).announcement-cta {
	align-items: center;
	background: var(--gl-popup--border-color);
	border: 8px solid transparent;
	border-image: var(--gl-button-corner) 7 fill;
	border-radius: 7px;
	color: var(--gl-on-background);
	font-family: var(--gl-font-base_-_font-family);
	font-weight: 400;
	display: inline-flex;
	text-decoration: none;
	text-shadow: var(--gl-font-shadow);
	text-transform: uppercase;
	transition: unset
}

a:not(.mw-selflink).announcement-cta:is(:hover, :focus) {
	box-shadow: 0 0 8px var(--gl-popup--border-color),0 0 8px var(--gl-popup--border-color),0 0 8px var(--gl-popup--border-color);
}

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

/** Tree charts **/
#missions-chart a:has(img) {
	--mission-background: url('https://galaxylife.wiki.gg/images/6/64/Circle.png');
	--mission-background-size: 44px;
	align-items: center;
	display: inline-flex;
	justify-content: center;
	position: relative;
}

#missions-chart a:is(:hover, :focus) {
	filter: drop-shadow(0 0 3px var(--gl-popup--border-color))
			drop-shadow(0 0 3px var(--gl-popup--border-color));
	outline: 2px solid transparent;
}

#missions-chart a::before {
	background: var(--mission-background) center/contain no-repeat;
	content: '';
	height: var(--mission-background-size);
	position: absolute;
	width: var(--mission-background-size);
	z-index: -1;
}

#missions-chart td[style^="border:2px solid white;"] {
	border: none !important;
}

/* 7. Fixes and tweaks */
#filetoc,
.mw_metadata td,
.mw_metadata th,
.mw-search-profile-tabs,
#mw-searchoptions {
	border-color: var(--gl-popup--border-color);
	background-color: var(--gl-popup--background-start);
}

#mw-searchoptions .divider {
	border-color: var(--gl-popup--border-color);
}

/** Prevents tables from horizontally overflowing on narrow screens. **/
.mw-parser-output .overflow-wrapper {
	max-width: 100%;
	overflow-x: auto;
}

/*
** This allows the dropdown menu to appear above the page's body.
**
** Because of the way the HTML is made, #content appears above (in Z space) of
** #mw-navigation, which is where the "more" dropdown menu is located. Because
** #mw-navigation uses position: static, we can't modify it's z-index so the
** menu appears above #content. So we set it to position: relative and make
** some layout changes to fix what that change breaks.
*/
@media only screen and (min-width: 721px) {
	#mw-navigation {
		position: relative;
		top: 48px;
		z-index: 1;
	}
	
	#mw-page-base {
		display: none;
	}
	
	#left-navigation,
	#right-navigation {
		margin-top: 0;
	}
	
	#content {
		position: relative;
		top: 84px;
	}

	#mw-panel {
		margin-top: 36px;
	}

	.mw-body,
	#mw-head-base,
	#left-navigation,
	#mw-data-after-content,
	.mw-footer {
		margin-left: 11em;
	}

	#footer {
		margin-top: 84px;
	}
}

/* 8. User preferences */
/** Disabling all motions if the user's browser/OS is configured to do so. **/
@media (prefers-reduced-motion: reduce) {
	:root {
		--gl-motion-duration--short-1: 0ms !important;
		--gl-motion-duration--short-2: 0ms !important;
		--gl-motion-duration--short-3: 0ms !important;
		--gl-motion-duration--short-4: 0ms !important;
		--gl-motion-duration--medium-1: 0ms !important;
		--gl-motion-duration--medium-2: 0ms !important;
		--gl-motion-duration--medium-3: 0ms !important;
		--gl-motion-duration--medium-4: 0ms !important;
		--gl-motion-duration--long-1: 0ms !important;
		--gl-motion-duration--long-2: 0ms !important;
		--gl-motion-duration--long-3: 0ms !important;
		--gl-motion-duration--long-4: 0ms !important;
		--gl-motion-duration--extra-long-1: 0ms !important;
		--gl-motion-duration--extra-long-2: 0ms !important;
		--gl-motion-duration--extra-long-3: 0ms !important;
		--gl-motion-duration--extra-long-4: 0ms !important;
	}

	*,
	::before,
	::after {
		animation-delay: 0ms !important;
		animation-duration: 0ms !important;
		animation-iteration-count: 0 !important;
		background-attachment: initial !important;
		scroll-behavior: auto !important;
		transition-duration: 0ms !important;
		transition-delay: 0ms !important;
	}
}





.tooltip-contents {
    display: none;
}

#missions-chart table {
    margin-right: 2em !important;
    width: max-content;
}

#missions-chart td {
    border-color: var(--gl-popup--border-color) !important;
	padding: 0 !important;
	/*width: 32px !important;*/
}

#missions-chart .mission-icon {
    width: 96px;
}

#missions-chart td .mission-icon::after {
    content: attr(data-title);
    display: block;
    font-size: .75rem;
    margin-top: .25rem;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

#missions-chart > .overflow-wrapper {
	cursor: grab;
	padding: 1rem 2rem;
}

#missions-chart > .overflow-wrapper:active {
	cursor: grabbing;
}











.stats-table,
.stats-table * {
	border-color: var(--gl-popup--border-color) !important;
	text-align: center;
}


/* Hide history button when not in the dropdown menu. */
#mw-head #p-views .vector-menu-content-list > #ca-history {
	display: none;
}




























:root {
	--gl-color--code-block-background: #1b1b1b;
	--gl-color--code-comment: #80868b;
	--gl-color--code-variables: #f28b82;
	--gl-color--code-literal: #fa903e;
	--gl-color--code-class: #fdd663;
	--gl-color--code-string: #81c995;
	--gl-color--code-quotes-and-meta: #8ab4f8;
	--gl-color--code-keyword: #c58af9;
}

.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
	box-shadow: inset 2.75em 0 0 var(--gl-color--code-block-background);
}

pre,
code,
.mw-code {
	background-color: var(--gl-color--code-block-background);
}

.mw-highlight .linenos {
	color: var(--gl-color--code-comment);
}

td.linenos .special {
	color: #000;
	background-color: #ffffc0;
	padding-left: 5px;
	padding-right: 5px
}

span.linenos.special {
	color: #000;
	background-color: #ffffc0;
	padding-left: 5px;
	padding-right: 5px
}

.mw-highlight .hll {
	background-color: #ffc
}

.mw-highlight {
	background: #f8f8f8
}

.mw-highlight .c {
	color: var(--gl-color--code-comment);
	font-style: unset;
}

.mw-highlight .err {
	border: 1px solid red
}

/* @ of "@import" color. */
.mw-highlight .p:has(+ .k) {
	color: var(--gl-color--code-keyword);
}

.mw-highlight .k {
	color: var(--gl-color--code-keyword);
	font-weight: unset;
}

.mw-highlight .w + .k {
	color: inherit;
}

.mw-highlight .o {
	color: inherit;
}

.mw-highlight .o:has(+ .nt + .o),
.mw-highlight .o + .nt:has(+ .o),
.mw-highlight .o + .nt + .o {
	color: var(--gl-color--code-keyword);
}

.mw-highlight .ch {
	color: #3d7b7b;
	font-style: italic
}

.mw-highlight .cm {
	color: var(--gl-color--code-comment);
	font-style: unset;
}

.mw-highlight .cp {
	color: var(--gl-color--code-quotes-and-meta);
}

.mw-highlight .cpf {
	color: #3d7b7b;
	font-style: italic
}

.mw-highlight .c1 {
	color: var(--gl-color--code-comment);
	font-style: unset;
}

.mw-highlight .cs {
	color: #3d7b7b;
	font-style: italic
}

.mw-highlight .gd {
	color: #a00000
}

.mw-highlight .ge {
	font-style: italic
}

.mw-highlight .gr {
	color: #e40000
}

.mw-highlight .gh {
	color: navy;
	font-weight: 700
}

.mw-highlight .gi {
	color: #008400
}

.mw-highlight .go {
	color: #717171
}

.mw-highlight .gp {
	color: navy;
	font-weight: 700
}

.mw-highlight .gs {
	font-weight: 700
}

.mw-highlight .gu {
	color: purple;
	font-weight: 700
}

.mw-highlight .gt {
	color: #04d
}

.mw-highlight .kc {
	color: var(--gl-color--code-literal);
	font-weight: unset;
}

.mw-highlight .kd {
	color: var(--gl-color--code-keyword);
	font-weight: unset;
}

.mw-highlight .kn {
	color: green;
	font-weight: 700
}

/* Un-colorize prefixed CSS properties. */
.mw-highlight .kp,
.mw-highlight .kp + .k {
	color: unset;
}

.mw-highlight .kr {
	color: var(--gl-color--code-keyword);
	font-weight: unset;
}

.mw-highlight .kt {
	color: var(--gl-color--code-literal);
}

.mw-highlight .m {
	color: #666
}

.mw-highlight .s {
	color: #ba2121
}

.mw-highlight .na {
	color: #687822
}

.mw-highlight .nb {
	color: var(--gl-color--code-quotes-and-meta);
}

.mw-highlight .p:has(+ .nc) {
	color: var(--gl-color--code-keyword);
}

.mw-highlight .nc {
	color: var(--gl-color--code-keyword);
	font-weight: unset;
}

.mw-highlight-lang-lua .nc,
.mw-highlight-lang-lua .nc + .p,
.mw-highlight-lang-lua .nc + .p + .nf {
	color: var(--gl-color--code-class);
}

.mw-highlight .no {
	color: #800
}

.mw-highlight .p:has(+ .nd),
.mw-highlight .nd {
	color: var(--gl-color--code-keyword);
}

/* Function name color. */
.mw-highlight .kd + .w + .nx:has(+ .p + .w + .p) {
	color: var(--gl-color--code-class);
}

.mw-highlight .ni {
	color: #717171;
	font-weight: unset;
}

.mw-highlight .ne {
	color: var(--gl-color--code-quotes-and-meta);
	font-weight: unset;
}

.mw-highlight .nf {
	color: var(--gl-color--code-quotes-and-meta);
}

.mw-highlight .nl {
	color: #767600
}

.mw-highlight .p:has(+ .nn) {
	color: var(--gl-color--code-keyword);
}

.mw-highlight .nn {
	color: var(--gl-color--code-keyword);
	font-weight: unset;
}

.mw-highlight .nt {
	color: inherit;
	font-weight: unset;
}

/* CSS tag names. */
.mw-highlight .nt:has(+ .w + .o),
.mw-highlight .nt:has(+ .o:last-child),
.mw-highlight .o + .w + .nt,
.mw-highlight .nt:where(:has(+ .w + .p), :has(+ .p)) {
	color: var(--gl-color--code-variables);
}

.mw-highlight .nv {
	color: inherit;
}

/* Object property color. */
.mw-highlight .nx:has(+ .o) {
	color: var(--gl-color--code-literal);
}

/* Object value color. */
/** null value: **/
.mw-highlight .nx + .o + .w + .kc,
/** Number value: **/
.mw-highlight .nx + .o + .w + .mf {
	color: var(--gl-color--code-literal);
}

/** String value: **/
.mw-highlight .nx + .o + .w + .s1 {
	color: var(--gl-color--code-string);
}

/* setTimeout color. */
.mw-highlight .nx:has(+ .p + .kd + .p) {
	color: var(--gl-color--code-quotes-and-meta);
}

.mw-highlight .ow {
	color: var(--gl-color--code-keyword);
	font-weight: unset;
}

.mw-highlight .w {
	color: #bbb
}

.mw-highlight .mb {
	color: #666
}

.mw-highlight .mf {
	color: var(--gl-color--code-literal);
}

.mw-highlight .mh {
	color: var(--gl-color--code-literal);
}

.mw-highlight .mi {
	color: var(--gl-color--code-literal);
}

.mw-highlight .mo {
	color: #666
}

.mw-highlight .sa {
	color: #ba2121
}

.mw-highlight .sb {
	color: #ba2121
}

.mw-highlight .sc {
	color: #ba2121
}

.mw-highlight .dl {
	color: #ba2121
}

.mw-highlight .sd {
	color: #ba2121;
	font-style: italic
}

.mw-highlight .s2 {
	color: var(--gl-color--code-string);
}

.mw-highlight .se {
	color: #aa5d1f;
	font-weight: 700
}

.mw-highlight .sh {
	color: #ba2121
}

.mw-highlight .si {
	color: #a45a77;
	font-weight: 700
}

.mw-highlight .sx {
	color: var(--gl-color--code-string);
}

.mw-highlight .sr {
	color: var(--gl-color--code-quotes-and-meta);
}

.mw-highlight .s1 {
	color: var(--gl-color--code-quotes-and-meta);
}

/* String color. */
.mw-highlight :where(.p, .w) + .s1:has(+ .p) {
	color: var(--gl-color--code-string);
}

.mw-highlight .p + .w + .s1:has(+ .w + .p) {
	color: var(--gl-color--code-string);
}

/** CSS string inside a function. **/
.mw-highlight .o + .s1:has(+ .o) {
	color: var(--gl-color--code-string);
}

/** CSS string as value. **/
.mw-highlight .nt + .o + .w + .s1:has(+ .o) {
	color: var(--gl-color--code-string);
}

.mw-highlight-lang-css.mw-highlight :where(.p, .w) + .s1 {
	color: var(--gl-color--code-string);
}

.mw-highlight .ss {
	color: #19177c
}

.mw-highlight .bp,
.mw-highlight .bp + .n {
	color: var(--gl-color--code-literal);
}

.mw-highlight .fm {
	color: #00f
}

.mw-highlight .vc {
	color: #19177c
}

.mw-highlight .vg {
	color: #19177c
}

.mw-highlight .vi {
	color: #19177c
}

.mw-highlight .vm {
	color: #19177c
}

.mw-highlight .il {
	color: #666
}





































:root {
	--gl-color--code-block-background: #1b1b1b;
	--gl-color--code-comment: #80868b;
	--gl-color--code-variables: #f28b82;
	--gl-color--code-literal: #fa903e;
	--gl-color--code-class: #fdd663;
	--gl-color--code-string: #81c995;
	--gl-color--code-quotes-and-meta: #8ab4f8;
	--gl-color--code-keyword: #c58af9;
}

.ace-tm {
	background-color: var(--gl-color--code-block-background);
	color: inherit;
}

.codeEditor-status {
	background-color: var(--gl-color--code-block-background);
	border-color: var(--gl-popup--border-color);
}

.codeEditor-status-message {
	border-color: var(--gl-popup--border-color);
}

.ace-tm .ace_gutter-active-line,
.ace_gutter-cell {
	background-color: var(--gl-color--code-block-background);
	color: var(--gl-color--code-comment);
}

.ace-tm .ace_gutter {
	background: #f0f0f0;
	color: #333;
}

.ace-tm .ace_print-margin {
	width: 1px;
	background-color: var(--gl-popup--border-color);
}

.ace-tm .ace_fold {
	background-color: #6B72E6;
}

.ace-tm .ace_cursor {
	color: currentcolor;
}

.ace_hidden-cursors .ace_cursor {
	opacity: .38;
}

.ace-tm .ace_invisible {
	color: rgb(191, 191, 191);
}

.ace-tm .ace_storage,
.ace-tm .ace_keyword {
	color: var(--gl-color--code-keyword);
}

.ace-tm .ace_numeric + .ace_keyword,
.ace-tm .ace_numeric + .ace_keyword + .ace_constant,
.ace-tm .ace_constant:has(+ .ace_numeric + .ace_keyword) {
	color: var(--gl-color--code-literal);
}

.ace-tm .ace_constant {
	color: inherit;
}

.ace-tm .ace_constant + .ace_constant {
	color: var(--gl-color--code-literal);
}

.ace-tm .ace_constant.ace_buildin {
	color: rgb(88, 72, 246);
}

.ace-tm .ace_constant.ace_language {
	color: rgb(88, 92, 246);
}

.ace-tm .ace_constant.ace_library {
	color: rgb(6, 150, 14);
}

.ace-tm .ace_invalid {
	background-color: rgba(255, 0, 0, 0.1);
	color: red;
}

.ace-tm .ace_support.ace_function {
	color: inherit;
}

.ace-tm .ace_support.ace_constant {
	color: var(--gl-color--code-quotes-and-meta);
}

.ace-tm .ace_operator + .ace_constant {
	color: var(--gl-color--code-literal);
}

.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {
	color: inherit
}

.ace-tm .ace_keyword.ace_operator {
	color: rgb(104, 118, 135);
}

.ace-tm .ace_string {
	color: var(--gl-color--code-string);
}

.ace-tm .ace_string:has(~ .ace_lparen) {
	color: var(--gl-color--code-keyword);
}

.ace-tm .ace_string:has(+ .ace_keyword) {
	color: var(--gl-color--code-keyword);
}

.ace-tm .ace_comment {
	color: var(--gl-color--code-comment);
}

.ace-tm .ace_comment.ace_doc {
	color: rgb(0, 102, 255);
}

.ace-tm .ace_comment.ace_doc.ace_tag {
	color: rgb(128, 159, 191);
}

.ace-tm .ace_constant.ace_numeric {
	color: var(--gl-color--code-literal);
}

.ace-tm .ace_variable,
.ace-tm .ace_variable + .ace_string {
	color: var(--gl-color--code-keyword);
}

.ace-tm .ace_xml-pe {
	color: rgb(104, 104, 91);
}

.ace-tm .ace_entity.ace_name.ace_function {
	color: #0000A2;
}

.ace-tm .ace_heading {
	color: rgb(12, 7, 255);
}

.ace-tm .ace_list {
	color: rgb(185, 6, 144);
}

.ace-tm .ace_meta.ace_tag {
	color: rgb(0, 22, 142);
}

.ace-tm .ace_string.ace_regex {
	color: rgb(255, 0, 0)
}

.ace-tm .ace_marker-layer .ace_selection {
	background: rgb(181, 213, 255);
}

.ace-tm.ace_multiselect .ace_selection.ace_start {
	box-shadow: 0 0 3px 0px white;
}

.ace-tm .ace_marker-layer .ace_step {
	background: rgb(252, 255, 0);
}

.ace-tm .ace_marker-layer .ace_stack {
	background: rgb(164, 229, 101);
}

.ace-tm .ace_marker-layer .ace_bracket {
	margin: -1px 0 0 -1px;
	border: 1px solid rgb(192, 192, 192);
}

.ace-tm .ace_marker-layer .ace_active-line {
	background: rgba(0, 0, 0, 0.07);
}

.ace-tm .ace_gutter-active-line {
	background-color : #dcdcdc;
}

.ace-tm .ace_marker-layer .ace_selected-word {
	background: rgb(250, 250, 255);c
	border: 1px solid rgb(200, 200, 250);
}