MediaWiki:Common.css

@font-face {
    font-family: "Teko";
    font-weight: 500;
    src: url(https://wiki.spacestation14.com/w/images/stuff/Teko-Medium.woff2)
            format("woff2"),
        url(https://wiki.spacestation14.com/w/images/stuff/Teko-Medium.woff)
            format("woff");
    ascent-override: 65%;
    descent-override: 10%;
}

:root {
    color-scheme: dark;

    --bg-color: hsl(240, 7%, 11%);
    --bg-color-light: hsl(240, 7%, 14%);
    --bg-color-light-x2: hsl(240, 8%, 17%);
    --bg-color-light-x3: hsl(240, 7%, 20%);
    --bg-color-light-x4: hsl(240, 7%, 23%);

    --border-color-light: hsl(240, 7%, 35%);
    --border-color-light-x2: hsl(240, 7%, 45%);
    --border-color: hsl(240, 7%, 24%);

    --text-color: lightgrey;

    --code-color-bg: #1b1e1f;
    --code-color-text: #e8e6e3;
    --code-color-border: #353a3c;

    --link-color: lightblue;
    --link-color-visited: #007fff;

    --action-color-light-x2: var(--blue-color-light-x2);
    --action-color-light: var(--blue-color-light);
    --action-color: var(--blue-color);
    --action-color-dark: var(--blue-color-dark);
    --action-color-dark-x2: var(--blue-color-dark-x2);

    --blue-color-light-x2: hsl(220, 66%, 63%);
    --blue-color-light: hsl(220, 60%, 56%);
    --blue-color: hsl(220, 60%, 50%);
    --blue-color-dark: hsl(220, 54%, 43%);
    --blue-color-dark-x2: hsl(220, 54%, 36%);

    --green-color-light: hsl(167, 80%, 50%);
    --green-color: hsl(167, 80%, 45%);
    --green-color-dark: hsl(167, 74%, 30%);

    --red-color: hsl(0, 75%, 50%);
    --red-color-dark: hsl(0, 67%, 42%);
}

/* ============ */
/* #region GENERAL STYLES */
/* ============ */

code {
    color: var(--code-color-text);
    background-color: var(--code-color-bg);
    border: 1px solid var(--code-color-border);
}

pre {
    color: var(--code-color-text);
    background-color: var(--code-color-bg);
    border: 1px solid var(--code-color-border);
}

a {
    color: var(--link-color);
}

a:hover {
    /* keep the same color */
    color: var(--link-color);
    /* keep underline */
    text-decoration: underline;
}

a:visited {
    color: var(--link-color-visited);
}

a:visited:hover {
    /* keep the same color */
    color: var(--link-color-visited);
    /* keep underline */
    text-decoration: underline;
}

/* big links on the main page */
.biglink > a:hover {
    color: #2952a3;
}

/* big links on the main page */
.biglink > a:visited:hover {
    color: #1e3666;
}

/* ============ */
/* #endregion */
/* ============ */

/* ============ */
/* #region IMAGES & GALLERIES */
/* ============ */

/* images with "thumb" type */
figure[typeof~='mw:File/Thumb'], 
/* images with "frame" type */
figure[typeof~='mw:File/Frame'],
/* images with "thumb" type → caption */
figure[typeof~='mw:File/Thumb'] > figcaption, 
/* images with "frame" type  → caption */
figure[typeof~='mw:File/Frame'] > figcaption {
	background-color: var(--bg-color-light-x2);
	border-color: var(--border-color);
}

/* images with "thumb" type → image */
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element, 
/* images with "frame" type → image */
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
	border-color: var(--border-color-light);
}

/* images with "thumb" type → open image icon */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after, 
/* images with "thumb" type → ????? (something alike to the above) */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
	filter: invert(100%);
}

/* #endregion */

/* ============ */
/* #region PAGE DIFF */
/* ============ */

/* page versions diff → diff entry (one cell) */
.diff .diff-context {
    background: var(--code-color-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* page versions diff → cell (deleted text) */
.diff .diff-deletedline {
    border-color: var(--red-color);
}

/* page versions diff → cell (added text) */
.diff .diff-addedline {
    border-color: var(--green-color);
}

/* page versions diff → cell → inline diff */
.diff .diffchange {
    background-color: var(--blue-color-dark-x2);
}

/* ============ */
/* #endregion */
/* ============ */

/* ============ */
/* #region =📕= SOURCE EDITOR =📕= */
/* ============ */

/* existing styles */

textarea {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

/* new styles */

:root {
    /* todo */
    --se-mode-icon: unset;
}

/* page editor content */
.mw-editform #wpTextbox1 {
    background-color: var(--bg-color-light-x2);
    color: var(--text-color);
}

/* page editor footer section */
.mw-editform .editOptions {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}

/* page editor footer section → edit summary */
.mw-editform .editOptions input#wpSummary {
    background-color: var(--bg-color-light-x2);
    color: var(--text-color);
    border-color: var(--border-color-light);
}

/* page editor footer section → edit summary hover */
.mw-editform .editOptions input#wpSummary:hover {
    border-color: var(--border-color-light-x2);
}

/* page editor footer section "save changes" button */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpSave {
    background-color: var(--action-color);
    border-color: var(--border-color);
}

/* page editor footer section "save changes" button hover */
.mw-editform
    .editOptions
    .editButtons
    .oo-ui-buttonElement-button#wpSave:hover {
    background-color: var(--action-color-light);
}

/* page editor footer section "save changes" button active */
.mw-editform
    .editOptions
    .editButtons
    .oo-ui-buttonElement-button#wpSave:active {
    background-color: var(--action-color-dark);
}

/* page editor footer section "show preview/changes" buttons */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff,
  /* "Manage TemplateData" button above the text editor when editing a template
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--bg-color-light-x4) !important;
}

/* page editor → footer section → show preview/changes buttons hover */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:hover,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:hover,
  /* "Manage TemplateData" button above the text editor when editing a template
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button:hover {
    background-color: var(--action-color-light) !important;
    /* override of the default selector */
    color: var(--text-color) !important;
}

/* page editor → footer section → show preview/changes buttons active */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:active,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:active,
  /* "Manage TemplateData" button above the text editor when editing a template
  !important directives are used to override the defaults */
  .tdg-editscreen-main .oo-ui-buttonElement-button:active {
    background-color: var(--action-color-dark) !important;
    /* override of the default selector */
    color: var(--text-color) !important;
}

/* text editor toolbar */
.wikiEditor-ui-toolbar {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}

/* text editor toolbar icons - inverting from black to white */
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
.wikiEditor-ui-toolbar .oo-ui-indicator-down {
    filter: invert(100%);
}

/* text editor toolbar icons on hover */
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover,
  /* text editor toolbar mode switch icon button on hover */
  .wikiEditor-ui-toolbar .oo-ui-widget .oo-ui-popupToolGroup-handle:hover {
    /* !important directive makes the override much easier here */
    background-color: var(--bg-color-light-x3) !important;

    /* more "snappier" transition */
    transition: background-color 50ms ease-out, color 50ms ease-out,
        border-color 50ms ease-out, box-shadow 50ms ease-out;
}

/* text editor toolbar mode switch icon button (when active) */
.wikiEditor-ui-toolbar
    .oo-ui-popupToolGroup-active
    .oo-ui-popupToolGroup-handle {
    background-color: var(--bg-color-light-x4);
}

/* text editor toolbar mode switch icon button → icon (when active) */
.wikiEditor-ui-toolbar
    .oo-ui-popupToolGroup-active
    .oo-ui-popupToolGroup-handle
    .oo-ui-iconElement-icon {
    filter: none;
    background-image: url("data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ctitle%3E%20edit%20%3C%2Ftitle%3E%3Cpath%20fill%3D%22rgb(10%2C%20212%2C%2098)%22%20d%3D%22m16.77%208%201.94-2a1%201%200%200%200%200-1.41l-3.34-3.3a1%201%200%200%200-1.41%200L12%203.23zM1%2014.25V19h4.75l9.96-9.96-4.75-4.75z%22%2F%3E%3C%2Fsvg%3E");
}

/* text editor toolbar → syntax highlight button → icon (when active) */
span.oo-ui-iconElement-icon.oo-ui-icon-highlight.oo-ui-image-progressive {
    /* disable icon filter applied earlier */
    filter: none;
    /* replace with a proper image instead */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");
}

/* text editor toolbar labels */
.wikiEditor-ui-toolbar .group .label {
    color: var(--text-color);
    filter: brightness(80%);
}

/* text editor toolbar labels with .tool-select class (they act as select) */
.wikiEditor-ui-toolbar .group .tool-select .label {
    color: var(--text-color);
    filter: none;
}

/* text editor toolbar label (that acts as select) options container */
.wikiEditor-ui-toolbar .group .tool-select .options {
    background-color: var(--bg-color-light-x2);
}

/* text editor toolbar label (that acts as select) options */
.wikiEditor-ui-toolbar .group .tool-select .options .option,
  /* text editor toolbar → group lists inside tabs → options */
  .wikiEditor-ui-toolbar .booklet>.index {
    color: var(--text-color);

    /* a new prop, introduced because of hover */
    transition: background-color 50ms ease-in;
}

/* text editor toolbar → special characters tab → special characters */
.wikiEditor-ui-toolbar .page-characters div span {
    color: var(--text-color);
    background-color: var(--bg-color-light);
    border-color: var(--border-color);

    /* a new prop, introduced because of hover */
    transition: background-color 50ms ease-in;
}

/* text editor toolbar label (that acts as select) options on hover
  note: no hover is defined by default, this is an addition */
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover,
  /* text editor toolbar → group lists inside tabs → options on hover */
  .wikiEditor-ui-toolbar .booklet>.index> :hover,
  /* text editor toolbar → special characters tab → special characters on hover */
  .wikiEditor-ui-toolbar .page-characters div span:hover {
    background-color: var(--bg-color-light-x2);
    transition: background-color 50ms ease-out;
}

/* text editor toolbar → special characters tab → special characters on hover */
.wikiEditor-ui-toolbar .page-characters div span:hover {
    border-color: var(--border-color-light);
}

/* text editor toolbar → group lists inside tabs → active option */
.wikiEditor-ui-toolbar .booklet > .index > .current {
    color: var(--link-color);
    background-color: var(--bg-color-light-x4);
    transition: background-color 50ms ease-out;
}

/* text editor toolbar tab buttons 
  the color property to the selected tab since it has higher priority */
.wikiEditor-ui-toolbar .tabs span.tab a {
    color: var(--link-color);

    transition: background-color 100ms ease-out;
}

/* text editor toolbar selected tab */
.wikiEditor-ui-toolbar .tabs span.tab a.current,
  /* text editor toolbar selected tab, visited */
  .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
    color: var(--link-color);
    background-color: var(--bg-color-light-x4);

    transition: background-color 100ms ease-in;
}

/* an arrow icon to the left in text editor toolbar tabs */
.wikiEditor-ui-toolbar .tabs span.tab a::before {
    filter: invert(100%);
}

/* editor footer → checkbox */
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
    background-color: var(--bg-color-light-x2);
    border-color: var(--border-color-light);
}

/* editor footer → checkbox hover */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span {
    border-color: var(--border-color-light-x2);
}

/* editor footer → checkbox active */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:active
    + span {
    background-color: var(--action-color);
    /* same as the bg color to make it seamless 
	  !important here overrides the more lighter color in hover state*/
    border-color: var(--action-color) !important;
    /* disabling the default box shadow, which just doubles the border when active/in focus  */
    box-shadow: none;
}

/* editor footer → checkbox focus */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
    /* background-color: var(--action-color-dark-x2er); */
}

/* editor footer → checkbox (checked) */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span {
    background-color: var(--action-color-light);
}

/* editor footer → checkbox (checked) hover */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span:hover {
    background-color: var(--action-color-light-x2);
}

/* editor footer → checkbox (checked) active */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span:active {
    background-color: var(--action-color-dark);
}

/* legal stuff above the buttons at the footer of the editor
  note: this just adds additional spacing between the text and the checkboxes for visual clarity */
#editpage-copywarn {
    margin-top: 1rem;
}

/* override for page editor toolbar → help tab → table → th */
.wikiEditor-ui-toolbar .page-table th {
    text-align: center;
    color: var(--text-color);
}

/* override for page editor toolbar → help tab → table → td */
.wikiEditor-ui-toolbar .page-table td {
    color: var(--text-color);
}

/* override page editor toolbar → tabs → left section
  note: both these overrides are done just 
  to make the help section a little larger and thus more readable */
.wikiEditor-ui-toolbar .booklet>.index,
  /* override page editor toolbar → tabs → right section */
  .wikiEditor-ui-toolbar .booklet .pages {
    height: 12rem;
}

/* editor → toolbar → mode switch button → popup (that opens on click) */
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
    background-color: var(--bg-color-light);
}

/* editor → toolbar → mode switch button → popup on click → inactive mode (span) */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled {
    transition: background-color 100ms ease-in;
    color: var(--text-color);
}

/* editor → toolbar → mode switch button → popup on click → inactive mode (span) hover */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled:hover,
  /* editor → toolbar → mode switch button → popup on click → inactive mode (a) active */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled .oo-ui-tool-link:active {
    color: var(--text-color);
    background-color: var(--bg-color-light-x2);
    transition: background-color 100ms ease-out;
}

/* editor → toolbar → mode switch button → popup on click → inactive mode (a) hover */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled
    .oo-ui-tool-link:hover {
    /* duplicate background, removing it */
    background-color: transparent;
}

/* editor → toolbar → mode switch button → popup on click → selected mode (span) */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active,
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link,
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) active */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link:active {
    background-color: var(--bg-color-light-x3);
}

/* editor → toolbar → mode switch button → popup on click → selected mode (a) hover */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-active
    .oo-ui-tool-link:hover {
    background-color: var(--bg-color-light-x3);
}

/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → title */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
    .oo-ui-tool-title {
    color: var(--text-color);
}

/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → icon */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
    .oo-ui-iconElement-icon {
    /* hue rotate  to ≈strongBlue (instead of a separate image) */
    filter: hue-rotate(-23.06deg) saturate(150%) brightness(120%);
}

/* editor → toolbar → mode switch button → popup on click → source editing mode active → title */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
    .oo-ui-tool-title {
    color: var(--text-color);
}

/* editor → toolbar → mode switch button → popup on click → source editing mode active → icon */
.wikiEditor-ui-toolbar
    .oo-ui-toolbar-popups
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
    .oo-ui-iconElement-icon {
    /* cosmoGreen "source editing" mode icon */
    background-image: linear-gradient(transparent, transparent),
        var(--se-mode-icon);
    /* disable the hue rotating filter since the correct icon is provided */
    filter: none;
}

/* #region borders */

/* editor toolbar and content combined */
.wikiEditor-ui .wikiEditor-ui-view,
  /* editor toolbar section that open with tabs */
  .wikiEditor-ui-toolbar .sections .section,
  /* editor toolbar label (that acts as select) options container */
  .wikiEditor-ui-toolbar .group .tool-select .options,
  /* text editor toolbar → special characters tab → special characters */
  .wikiEditor-ui-toolbar .page-characters div span,
  /* editor → toolbar → mode switch button → popup (that opens on click) */
  .wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools,
  /* editor footer */
  div.editOptions,
  /* summary input */
  div.editOptions #wpSummary,
  /* content body */
  #wpTextbox1 {
    border: 1px solid var(--border-color-light);
}

/* editor toolbar groups of buttons, except the last one */
.wikiEditor-ui-toolbar .group:not(:last-child) {
    border-right: 1px solid var(--border-color-light);
}

/* editor toolbar last groups of buttons */
.wikiEditor-ui-toolbar .group:last-child {
    border-left: 1px solid var(--border-color-light);
}

/* this is the last button on the main row of the editor toolbar */
.wikiEditor-ui-toolbar .section-main .group:last-child {
    border-right: 1px solid var(--border-color-light);
}

/* editor toolbar */
.wikiEditor-ui .wikiEditor-ui-top {
    border-bottom: 1px solid var(--border-color-light);
}

/* editor toolbar → mode switch button
  it has extra border on the bottom */
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
    border-bottom: none;
}

/* ================================================ */
/* #region <syntaxhighlight> CODE BLOCKS  */
/* ================================================ */

:root {
    --synt-high--color-darkCreamy: #262421;
    --synt-high--color-lightCreamy: hsl(38, 5%, 45%);

    --synt-high--color-comment: var(--synt-high--color-lightCreamy);
    --synt-high--color-err: #ff1a94;
    --synt-high--color-operator: #f92672;
    --synt-high--color-punctuation: #f8f8f2;
    --synt-high--color-string: #e6db74;
    --synt-high--color-date: var(--synt-high--color-string);
    /* names for things such as variables, functions, classes, etc. */
    --synt-high--color-name: #a6e22e;
    /* literals, mostly numbers, some string stuff too. */
    --synt-high--color-literal: #ae81ff;
    /* keywords and constants */
    --synt-high--color-keyword: #66d9ef;
}

/* Modified version of https://github.com/richleland/pygments-css/blob/master/monokai.css */

/* Code block container  */
.mw-content-ltr.mw-highlight-lines pre {
    background-color: var(--code-color-bg);
    color: var(--code-color-text);
    border-color: var(--code-color-border);
    font-size: 90%;

    /* targets the line numbers bg, when they (line numbers) are present */
    box-shadow: rgb(34, 37, 39) 2.75em 0px 0px inset;
}

/* Code block → line numbers  */
.mw-highlight .linenos {
    color: rgb(165, 155, 142);
}

/* Highlighted Lines */
.mw-highlight .hll {
    background-color: var(--action-color);
}

.mw-highlight {
    background: #272822;
    color: #f8f8f2;
}

/* Error */
.mw-highlight .err {
    color: var(--synt-high--color-err);
    background-color: hsl(328, 40%, 16%);
}

/* Keyword */
.mw-highlight .k {
    color: var(--synt-high--color-keyword);
}

/* Literal */
.mw-highlight .l {
    color: var(--synt-high--color-literal);
}

/* Name */
.mw-highlight .n {
    color: #f8f8f2;
}

/* Operator */
.mw-highlight .o {
    color: var(--synt-high--color-operator);
}

/* Punctuation */
.mw-highlight .p {
    color: var(--synt-high--color-punctuation);
}

/* Comment */
.mw-highlight .c {
    color: var(--synt-high--color-comment);
}

/* Comment.Hashbang */
.mw-highlight .ch {
    color: var(--synt-high--color-comment);
}

/* Comment.Multiline */
.mw-highlight .cm {
    color: var(--synt-high--color-comment);
}

/* Comment.Preproc */
.mw-highlight .cp {
    color: var(--synt-high--color-comment);
}

/* Comment.PreprocFile */
.mw-highlight .cpf {
    color: var(--synt-high--color-comment);
}

/* Comment.Single */
.mw-highlight .c1 {
    color: var(--synt-high--color-comment);
}

/* Comment.Special */
.mw-highlight .cs {
    color: var(--synt-high--color-comment);
}

/* Generic.Deleted */
.mw-highlight .gd {
    color: #f92672;
}

/* Generic.Emph */
.mw-highlight .ge {
    font-style: italic;
}

/* Generic.Inserted */
.mw-highlight .gi {
    color: var(--synt-high--color-name);
}

/* Generic.Strong */
.mw-highlight .gs {
    font-weight: bold;
}

/* Generic.Subheading */
.mw-highlight .gu {
    color: #75715e;
}

/* Keyword.Constant */
.mw-highlight .kc {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Declaration */
.mw-highlight .kd {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Namespace */
.mw-highlight .kn {
    color: #f92672;
}

/* Keyword.Pseudo */
.mw-highlight .kp {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Reserved */
.mw-highlight .kr {
    color: var(--synt-high--color-keyword);
}

/* Keyword.Type */
.mw-highlight .kt {
    color: var(--synt-high--color-keyword);
}

/* Literal.Date */
.mw-highlight .ld {
    color: var(--synt-high--color-date);
}

/* Literal.Number */
.mw-highlight .m {
    color: var(--synt-high--color-literal);
}

/* Literal.String */
.mw-highlight .s {
    color: var(--synt-high--color-string);
}

/* Name.Attribute */
.mw-highlight .na {
    color: var(--synt-high--color-name);
}

/* Name.Builtin */
.mw-highlight .nb {
    color: #f8f8f2;
}

/* Name.Class */
.mw-highlight .nc {
    color: var(--synt-high--color-name);
}

/* Name.Constant */
.mw-highlight .no {
    color: var(--synt-high--color-keyword);
}

/* Name.Decorator */
.mw-highlight .nd {
    color: var(--synt-high--color-name);
}

/* Name.Entity */
.mw-highlight .ni {
    color: #f8f8f2;
}

/* Name.Exception */
.mw-highlight .ne {
    color: var(--synt-high--color-name);
}

/* Name.Function */
.mw-highlight .nf {
    color: var(--synt-high--color-name);
}

/* Name.Label */
.mw-highlight .nl {
    color: #f8f8f2;
}

/* Name.Namespace */
.mw-highlight .nn {
    color: #f8f8f2;
}

/* Name.Other */
.mw-highlight .nx {
    color: var(--synt-high--color-name);
}

/* Name.Property */
.mw-highlight .py {
    color: #f8f8f2;
}

/* Name.Tag */
.mw-highlight .nt {
    color: #f92672;
}

/* Name.Variable */
.mw-highlight .nv {
    color: #f8f8f2;
}

/* Operator.Word */
.mw-highlight .ow {
    color: var(--synt-high--color-operator);
}

/* Text.Whitespace */
.mw-highlight .w {
    color: #f8f8f2;
}

/* Literal.Number.Bin */
.mw-highlight .mb {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Float */
.mw-highlight .mf {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Hex */
.mw-highlight .mh {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Integer */
.mw-highlight .mi {
    color: var(--synt-high--color-literal);
}

/* Literal.Number.Oct */
.mw-highlight .mo {
    color: var(--synt-high--color-literal);
}

/* Literal.String.Affix */
.mw-highlight .sa {
    color: var(--synt-high--color-string);
}

/* Literal.String.Backtick */
.mw-highlight .sb {
    color: var(--synt-high--color-string);
}

/* Literal.String.Char */
.mw-highlight .sc {
    color: var(--synt-high--color-string);
}

/* Literal.String.Delimiter */
.mw-highlight .dl {
    color: var(--synt-high--color-string);
}

/* Literal.String.Doc */
.mw-highlight .sd {
    color: var(--synt-high--color-string);
}

/* Literal.String.Double */
.mw-highlight .s2 {
    color: var(--synt-high--color-string);
}

/* Literal.String.Escape */
.mw-highlight .se {
    color: var(--synt-high--color-literal);
}

/* Literal.String.Heredoc */
.mw-highlight .sh {
    color: var(--synt-high--color-string);
}

/* Literal.String.Interpol */
.mw-highlight .si {
    color: var(--synt-high--color-string);
}

/* Literal.String.Other */
.mw-highlight .sx {
    color: var(--synt-high--color-string);
}

/* Literal.String.Regex */
.mw-highlight .sr {
    color: var(--synt-high--color-string);
}

/* Literal.String.Single */
.mw-highlight .s1 {
    color: var(--synt-high--color-string);
}

/* Literal.String.Symbol */
.mw-highlight .ss {
    color: var(--synt-high--color-string);
}

/* Name.Builtin.Pseudo */
.mw-highlight .bp {
    color: #f8f8f2;
}

/* Name.Function.Magic */
.mw-highlight .fm {
    color: var(--synt-high--color-name);
}

/* Name.Variable.Class */
.mw-highlight .vc {
    color: #f8f8f2;
}

/* Name.Variable.Global */
.mw-highlight .vg {
    color: #f8f8f2;
}

/* Name.Variable.Instance */
.mw-highlight .vi {
    color: #f8f8f2;
}

/* Name.Variable.Magic */
.mw-highlight .vm {
    color: #f8f8f2;
}

/* Literal.Number.Integer.Long */
.mw-highlight .il {
    color: var(--synt-high--color-literal);
}

/* #endregion */


/* ============ */
/* #region SOURCE EDITOR → SYNTAX HIGHLIGHTING */
/* based on: https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/master/resources/mode/mediawiki/mediawiki.less */
/* ============ */

:root {
    /* "se-cm" = Source Editor - Code Mirror */

    /* same color as for source editor */
    --se-cm--bg-color: var(--bg-color-light-x2);
    /* same color as for code block */
    --se-cm--gutter-bg-color: var(--code-color-bg);
    /* margin to the left for the main contents of the editor */
    --se-cm--main-contents-left-margin: 0.25rem;

    /* bg color for pre/nowiki tags contents */
    --se-cm--pre-bg-color: hsl(205, 21%, 15%);

    /* from the <syntaxhighlight> theme */
    --se-cm--comment-color: var(--synt-high--color-comment);
    --se-cm--error-color: var(--red-color);

    /* link itself */
    --se-cm--link-color: var(--link-color);
    /* link delimiter */
    --se-cm--cm-mw-link-delimiter: var(--se-cm--template-delimiter-color);
    /* link text */
    --se-cm--link-text-color: var(--text-color);
    --se-cm--link-brackets-color: var(--se-cm--link-text-color);

    /* things like "DISPLAYTITLE" "templates" (the whole template except the value part) */
    --se-cm--parser-function-color: var(--synt-high--color-operator);

    /* table brackets and row delimiter */
    --se-cm--table-punctuation-color: var(--synt-high--color-punctuation);
    /* table settings */
    --se-cm--table-settings-color: var(--se-cm--template-arg-name-color);

    /* template name */
    --se-cm--template-name-color: hsl(80, 76%, 53%);
    /* template arg names */
    --se-cm--template-arg-name-color: hsl(80, 76%, 42%);
    /* template brackets */
    --se-cm--template-brackets-color: var(--synt-high--color-name);
    /* template arg values */
    --se-cm--template-values-color: var(--blue-color-light-x2);
    /* template arg delimiters */
    --se-cm--template-delimiter-color: hsl(205, 71%, 85%);

    /* template param name */
    --se-cm--template-param-name-color: var(--synt-high--color-keyword);
    /* template param brackets */
    --se-cm--template-param-brackets-color: hsl(190, 61%, 40%);
    /* template param values */
    --se-cm--template-param-value-color: var(--blue-color-light-x2);
    /* template param delimiter */
    --se-cm--template-param-delimiter-color: var(
        --se-cm--template-delimiter-color
    );

    /* wiki formatting: headers, bullet points, bold/italic quotes, etc. */
    --se-cm--wikitext-formatting-color: var(--blue-color-light);
    /* html tags, including ones specific for the wiki (like syntaxhighlight) */
    --se-cm--xml-tag-color: hsl(41, 53%, 67%);

    /* selection color */
    --se-cm--selection-color: hsl(205, 21%, 30%);
    /* bg color applied when selecting a bracket that has a match (in templates) */
    --se-cm--matching-brackets-bg-color: hsl(205, 21%, 44%);
}

/* the whole content body code mirror wrapper */
.CodeMirror-wrap {
    /* same color as for source editor */
    background-color: var(--se-cm--bg-color);

    /* color for the text that the other rules don't apply to (regular text, header text, etc.) */
    color: var(--text-color);
}

/* the actual lines of text */
.CodeMirror pre.CodeMirror-line {
    /* a little bit of margin for the main content */
    margin-left: var(--se-cm--main-contents-left-margin);
}

/* gutters?? */
.CodeMirror-wrap .CodeMirror-gutters {
    border-color: var(--border-color);
}

/* gutter */
.CodeMirror-wrap .CodeMirror-gutter {
    /* same color as for code block */
    background-color: var(--se-cm--gutter-bg-color);
}

/* selection */
.CodeMirror-line::selection,
/* selection */
.CodeMirror-line>span::selection,
/* selection */
.CodeMirror-line>span>span::selection {
    background-color: var(--se-cm--selection-color);
}

/* bullet point symbol */
.cm-mw-list,
/* ???? */
.cm-mw-indenting {
    color: var(--se-cm--wikitext-formatting-color);
}

/* magic words */
.cm-mw-doubleUnderscore,
/* magic words */
.cm-mw-double-underscore,
/* ???? user signature maybe */
.cm-mw-signature,
/* ???? hr tags prob */
.cm-mw-hr {
    color: var(--se-cm--wikitext-formatting-color);

    /* override the defaults */
    background-color: inherit;
}

/* html sequences like "&nbsp;" */
.cm-mw-mnemonic,
/* ???? */
.cm-mw-html-entity {
    color: var(--se-cm--xml-tag-color);
    background-color: #684905;
    border-radius: 2px;
}

/* comments */
.cm-mw-comment {
    color: var(--se-cm--comment-color);
}

/* formatting: 3 apostrophes for bold text */
.cm-mw-apostrophes-bold,
/* formatting: 2 apostrophes for italic text
todo make them separate? better eligibility */
.cm-mw-apostrophes-italic {
    color: var(--se-cm--wikitext-formatting-color);
}

/* template name */
.cm-mw-template-name {
    color: var(--se-cm--template-name-color);
    /* disable the default */
    text-decoration: none;
}

/* template arg names */
.cm-mw-template-argument-name {
    color: var(--se-cm--template-arg-name-color);
}

/* template arg values */
.cm-mw-template {
    color: var(--se-cm--template-values-color);
}

/* template pipe delimiters (maybe colon too for modules?) */
.cm-mw-template-delimiter {
    color: hsl(205, 71%, 85%);
}

/* template brackets */
.cm-mw-template-bracket {
    color: var(--se-cm--template-brackets-color);
}

/* template variable (with 3 brackets) name */
.cm-mw-templatevariable-name {
    color: var(--se-cm--template-param-name-color);
}

/* template variable (with 3 brackets) value */
.cm-mw-templatevariable {
    color: var(--se-cm--template-param-value-color);
}

/* template variable brackets (3 brackets) */
.cm-mw-templatevariable-bracket {
    color: var(--se-cm--template-param-brackets-color);
}

/* template variable (with 3 brackets) delimiter */
.cm-mw-templatevariable-delimiter {
    color: var(--se-cm--param-delimiter-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → name */
.cm-mw-parserfunction-name {
    color: var(--se-cm--template-name-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → value */
.cm-mw-parserfunction {
    color: var(--se-cm--template-values-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → brackets */
.cm-mw-parserfunction-bracket {
    color: var(--se-cm--template-brackets-color);
}

/* parser functions (things like "DISPLAYTITLE" or invokes) → delimiters */
.cm-mw-parserfunction-delimiter {
    color: var(--se-cm--template-delimiter-color);
}

/* wiki html tag names? like >syntaxhighlight> */
.cm-mw-exttag-name,
/* html tag names */
.cm-mw-htmltag-name {
    color: var(--se-cm--xml-tag-color);
}

/* if a string starts with an empty space, it will generate a pre block.
this targets that one single space.
same style as for html tag names, but for bg here */
.cm-mw-skipformatting {
    background-color: var(--se-cm--xml-tag-color);
}

/* wiki html tag brackets */
.cm-mw-exttag-bracket,
/* wiki html tag attributes (name, delimiter, value) */
.cm-mw-exttag-attribute,
/* html tag brackets */
.cm-mw-htmltag-bracket,
/* html tag attributes (name, delimiter, value) */
.cm-mw-htmltag-attribute {
    color: var(--se-cm--xml-tag-color);
}

/* pre tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-pre,
/* pre tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-pre,
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-pre,
/* pre tag contents */
.cm-mw-tag-pre,
/* ============== */
/* nowiki tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-nowiki,
/* nowiki tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-nowiki,
/* ???? */
pre.CodeMirror-line-like.cm-mw-tag-nowiki,
/* nowiki tag contents */
.cm-mw-tag-nowiki {
    background-color: var(--se-cm--pre-bg-color);
}

/* pre tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-pre,
/* nowiki tag BLOCK contents */
pre.CodeMirror-line.cm-mw-tag-nowiki {
    /* colors the margin gap bg for block variants */
    box-shadow: calc(-1 * var(--se-cm--main-contents-left-margin)) 0
        var(--se-cm--pre-bg-color);
}

/* pre tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-pre,
/* nowiki tag INLINE contents */
.CodeMirror-line span.cm-mw-tag-nowiki {
    /* a little corner rounding won't hurt a thing! */
    border-radius: 2px;
}

/* ???? */
.cm-mw-link,
/* ???? */
.cm-mw-link-tosection,
/* header equal signs */
.cm-mw-section-header {
    color: var(--se-cm--wikitext-formatting-color);
}

/* link itself */
.cm-mw-link-pagename,
/* external link itself, without protocol */
.cm-mw-extlink,
/* ???? same as above, maybe? */
.cm-mw-free-extlink,
/* external link protocol (the "https://" part) */
.cm-mw-extlink-protocol,
/* ???? same as above, maybe? */
.cm-mw-free-extlink-protocol {
    color: var(--se-cm--link-color);
}

/* link brackets */
.cm-mw-link-bracket,
/* external link brackets */
.cm-mw-extlink-bracket {
    color: var(--se-cm--link-brackets-color);
}

/* link delimiter */
.cm-mw-link-delimiter {
    color: var(--se-cm--cm-mw-link-delimiter);
}

/* link text */
.cm-mw-link-text,
/* external link text */
.cm-mw-extlink-text {
    color: var(--se-cm--link-text-color);
}

/* tables opening "{|" and closing "|}" brackets */
.cm-mw-table-bracket,
/* table row delimiter (doesn't include cols!) */
.cm-mw-table-delimiter {
    color: var(--se-cm--table-punctuation-color);
}

/* the table settings I guess? (like «class="wikitable"») */
.cm-mw-table-definition {
    color: var(--se-cm--table-settings-color);
}

/* ???? idk some kind of formatting errors? */
.cm-error,
.cm-mw-error,
.cm-s-default .cm-error {
    color: var(--se-cm--error-color);
}

.cm-mw-matchingbracket {
    background-color: var(--se-cm--matching-brackets-bg-color);
    /* disable the default */
    box-shadow: none;
}

/* various inline bg targeting things, idk what each of them target exactly */
.cm-mw-template2-ground,
.cm-mw-template3-ground,
.cm-mw-ext-ground,
.cm-mw-template-ext-ground,
.cm-mw-ext2-ground,
.cm-mw-template-ext2-ground,
.cm-mw-ext3-ground,
.cm-mw-template-ext3-ground,
.cm-mw-link-ground,
.cm-mw-ext-link-ground,
.cm-mw-template-link-ground,
.cm-mw-ext2-link-ground,
.cm-mw-template-ext-link-ground,
.cm-mw-ext3-link-ground,
.cm-mw-template-ext2-link-ground,
.cm-mw-template-ext3-link-ground,
.cm-mw-template2-ext-ground,
.cm-mw-template2-ext2-ground,
.cm-mw-template2-ext3-ground,
.cm-mw-template2-link-ground,
.cm-mw-template2-ext-link-ground,
.cm-mw-template2-ext2-link-ground,
.cm-mw-template2-ext3-link-ground,
.cm-mw-template3-ext-ground,
.cm-mw-template3-ext2-ground,
.cm-mw-template3-ext3-ground,
.cm-mw-template3-link-ground,
.cm-mw-template3-ext-link-ground,
.cm-mw-template3-ext2-link-ground,
.cm-mw-template3-ext3-link-ground {
    /* just disable them */
    background-color: inherit;
}

/* script input in module editor */
#mw-scribunto-input {
	font-family: monospace;
	font-weight: normal;
	color: var(--code-color-text);
	background-color: var(--code-color-bg);
}   


/* #endregion */


/* #endregion */

/* ============ */
/* #endregion */
/* ============ */

/* Reset italic styling set by user agent */
cite,
dfn {
    font-style: inherit;
}

/* Straight quote marks for <q> */
q {
    quotes: '"' '"' "'" "'";
}

/* Avoid collision of blockquote with floating elements by swapping margin and padding */
blockquote {
    overflow: hidden;
    margin: 1em 0;
    padding: 0 40px;
}

/* Consistent size for <small>, <sub> and <sup> */
small {
    font-size: 85%;
}

.mw-body-content sub,
  .mw-body-content sup,
  span.reference /* for Parsoid */ {
    font-size: 80%;
}

/* Same spacing for indented and unindented paragraphs on talk pages */
.ns-talk .mw-body-content dd {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

/* Main page fixes */
#interwiki-completelist {
    font-weight: bold;
}

.biglink {
    font-family: "Teko";
    font-style: oblique 10deg;
    font-variant-caps: small-caps;
    text-shadow: #1b1b1f 2px 3px, #a00d 3px 5px;
}

/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .mw-special-Watchlist #watchlist-message,
  .client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
  
  /* Hide charinsert base for those not using the gadget */
  #editpage-specialchars {
    display: none;
}

/* Adds padding above Watchlist announcements where new recentchanges/watchlist filters are enabled */
.mw-rcfilters-enabled .mw-specialpage-summary {
    margin-top: 1em;
}

/* Highlight linked elements (such as clicked references) in blue */
.citation:target {
    background-color: rgba(0, 127, 255, 0.133);
}

/* Styling for citations. Breaks long urls, etc., rather than overflowing box */
.citation {
    word-wrap: break-word;
}

/* Make the list of references smaller
   * Keep in sync with Template:Refbegin/styles.css
   * And Template:Reflist/styles.css
   */
ol.references {
    font-size: 90%;
    margin-bottom: 0.5em;
}

/* Style for horizontal lists (separator following item).
	 @source mediawiki.org/wiki/Snippets/Horizontal_lists
	 @revision 8 (2016-05-21)
	 @author [[User:Edokter]]
   */
.hlist dl,
.hlist ol,
.hlist ul {
    margin: 0;
    padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
    margin: 0; /* don't trust the note that says margin doesn't work with inline
				  * removing margin: 0 makes dds have margins again */
    display: inline;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
    display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li {
    display: none;
}

/* Generate interpuncts */
.hlist dt:after {
    content: ": ";
}

/**
   * Note hlist style usage differs in Minerva and is defined in core as well!
   * Please check Minerva desktop (and Minerva.css) when changing
   * See https://phabricator.wikimedia.org/T213239
   */
.hlist dd:after,
.hlist li:after {
    content: " · ";
    font-weight: bold;
}

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

/* Add parentheses around nested lists */
.hlist dd dd:first-child:before,
.hlist dd dt:first-child:before,
.hlist dd li:first-child:before,
.hlist dt dd:first-child:before,
.hlist dt dt:first-child:before,
.hlist dt li:first-child:before,
.hlist li dd:first-child:before,
.hlist li dt:first-child:before,
.hlist li li:first-child:before {
    content: " (";
    font-weight: normal;
}

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

/* Put ordinals in front of ordered list items */
.hlist ol {
    counter-reset: listitem;
}

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

.hlist ol > li:before {
    content: " " counter(listitem) "\a0";
}

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

/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}

.plainlist ol li,
.plainlist ul li {
    margin-bottom: 0;
}

/* Default style for navigation boxes */
.navbox {
    /* Navbox container style */
    box-sizing: border-box;
    border: 1px solid #a2a9b1;
    width: 100%;
    clear: both;
    font-size: 88%;
    text-align: center;
    padding: 1px;
    margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
}

.navbox .navbox {
    margin-top: 0; /* No top margin for nested navboxes */
}

.navbox + .navbox {
    margin-top: -1px; /* Single pixel border between adjacent navboxes */
}

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

.navbox-group,
.navbox-title,
.navbox-abovebelow {
    padding: 0.25em 1em; /* Title, group and above/below styles */
    line-height: 1.5em;
    text-align: center;
}

th.navbox-group {
    /* Group style */
    white-space: nowrap;
    /* @noflip */
    text-align: right;
}

.navbox,
.navbox-subgroup {
    background-color: #fdfdfd; /* Background color */
}

.navbox-list {
    line-height: 1.5em;
    border-color: #fdfdfd; /* Must match background color */
}

/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {
    /* Borders above 2nd, 3rd, etc. rows */
    border-top: 2px solid #fdfdfd; /* Must match background color */
}

.navbox th,
.navbox-title {
    background-color: #ccccff; /* Level 1 color */
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    background-color: #ddddff; /* Level 2 color */
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background-color: #e6e6ff; /* Level 3 color */
}

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

.navbox-odd {
    background-color: transparent; /* Odd row striping */
}

.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
    padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
    padding-right: 0.2em;
    padding-left: 0.2em;
}

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
}

/* Infobox template style */
.infobox {
    border: 1px solid #a2a9b1;
    border-spacing: 3px;
    background-color: #f8f9fa;
    color: black;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    font-size: 88%;
    line-height: 1.5em;
    width: 22em;
}

.infobox-header,
  .infobox-label,
  .infobox-above,
  .infobox-full-data,
  .infobox-data,
  .infobox-below,
  .infobox-subheader,
  .infobox-image,
  .infobox-navbar,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
    vertical-align: top;
}

.infobox-label,
  .infobox-data,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
    /* @noflip */
    text-align: left;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
  .infobox .infobox-title,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox caption {
    font-size: 125%;
    font-weight: bold;
    text-align: center;
}

.infobox-title,
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox caption {
    padding: 0.2em;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
    text-align: center;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
    /* @noflip */
    text-align: right;
}

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope="row"] {
    font-weight: normal;
    /* @noflip */
    text-align: left;
}

/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
    /* @noflip */
    text-align: left;
}

/* Fix for hieroglyphs specificity issue in infoboxes ([[phab:T43869]]) */
table.mw-hiero-table td {
    vertical-align: middle;
}

/* Change the external link icon to an Adobe icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
    background: url("//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif")
        no-repeat right;
    /* @noflip */
    padding-right: 18px;
}

/* Messagebox templates */
.messagebox {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    width: 80%;
    margin: 0 auto 1em auto;
    padding: 0.2em;
}

.messagebox.merge {
    border: 1px solid #c0b8cc;
    background-color: #f0e5ff;
    text-align: center;
}

.messagebox.cleanup {
    border: 1px solid #9f9fff;
    background-color: #efefff;
    text-align: center;
}

.messagebox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
    margin: 4px auto;
}

/* For old WikiProject banners inside banner shells. */
.mbox-inside .standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
    width: 100%;
    margin: 2px 0;
    padding: 2px;
}

.messagebox.small {
    width: 238px;
    font-size: 85%;
    /* @noflip */
    float: right;
    clear: both;
    /* @noflip */
    margin: 0 0 1em 1em;
    line-height: 1.25em;
}

.messagebox.small-talk {
    width: 238px;
    font-size: 85%;
    /* @noflip */
    float: right;
    clear: both;
    /* @noflip */
    margin: 0 0 1em 1em;
    line-height: 1.25em;
    background-color: #f8eaba;
}

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
th.mbox-text,
td.mbox-text {
    /* The message body cell(s) */
    border: none;
    /* @noflip */
    padding: 0.25em 0.9em; /* 0.9em left/right */
    width: 100%; /* Make all mboxes the same width regardless of text length */
}

td.mbox-image {
    /* The left image cell */
    border: none;
    /* @noflip */
    padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
    text-align: center;
}

td.mbox-imageright {
    /* The right image cell */
    border: none;
    /* @noflip */
    padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
    text-align: center;
}

td.mbox-empty-cell {
    /* An empty narrow cell */
    border: none;
    padding: 0;
    width: 1px;
}

/* Article message box styles */
table.ambox {
    margin: 0 10%; /* 10% = Will not overlap with other elements */
    border: 1px solid #a2a9b1;
    /* @noflip */
    border-left: 10px solid #36c; /* Default "notice" blue */
    background-color: #fbfbfb;
    box-sizing: border-box;
}

/* Single border between stacked boxes. */
table.ambox + table.ambox,
table.ambox + .mw-empty-elt + table.ambox {
    margin-top: -1px;
}

.ambox th.mbox-text,
.ambox td.mbox-text {
    /* The message body cell(s) */
    padding: 0.25em 0.5em; /* 0.5em left/right */
}

.ambox td.mbox-image {
    /* The left image cell */
    /* @noflip */
    padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
}

.ambox td.mbox-imageright {
    /* The right image cell */
    /* @noflip */
    padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
}

table.ambox-notice {
    /* @noflip */
    border-left: 10px solid #36c; /* Blue */
}

table.ambox-speedy {
    /* @noflip */
    border-left: 10px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.ambox-delete {
    /* @noflip */
    border-left: 10px solid #b32424; /* Red */
}

table.ambox-content {
    /* @noflip */
    border-left: 10px solid #f28500; /* Orange */
}

table.ambox-style {
    /* @noflip */
    border-left: 10px solid #fc3; /* Yellow */
}

table.ambox-move {
    /* @noflip */
    border-left: 10px solid #9932cc; /* Purple */
}

table.ambox-protection {
    /* @noflip */
    border-left: 10px solid #a2a9b1; /* Gray-gold */
}

/* Image message box styles */
table.imbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 3px solid #36c; /* Default "notice" blue */
    background-color: #fbfbfb;
    box-sizing: border-box;
}

.imbox .mbox-text .imbox {
    /* For imboxes inside imbox-text cells. */
    margin: 0 -0.5em; /* 0.9 - 0.5 = 0.4em left/right.        */
    display: block; /* Fix for webkit to force 100% width.  */
}

.mbox-inside .imbox {
    /* For imboxes inside other templates.  */
    margin: 4px;
}

table.imbox-notice {
    border: 3px solid #36c; /* Blue */
}

table.imbox-speedy {
    border: 3px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.imbox-delete {
    border: 3px solid #b32424; /* Red */
}

table.imbox-content {
    border: 3px solid #f28500; /* Orange */
}

table.imbox-style {
    border: 3px solid #fc3; /* Yellow */
}

table.imbox-move {
    border: 3px solid #9932cc; /* Purple */
}

table.imbox-protection {
    border: 3px solid #a2a9b1; /* Gray-gold */
}

table.imbox-license {
    border: 3px solid #88a; /* Dark gray */
    background-color: #f7f8ff; /* Light gray */
}

table.imbox-featured {
    border: 3px solid #cba135; /* Brown-gold */
}

/* Category message box styles */
table.cmbox {
    margin: 3px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;
    background-color: #dfe8ff; /* Default "notice" blue */
    box-sizing: border-box;
}

table.cmbox-notice {
    background-color: #d8e8ff; /* Blue */
}

table.cmbox-speedy {
    margin-top: 4px;
    margin-bottom: 4px;
    border: 4px solid #b32424; /* Red */
    background-color: #ffdbdb; /* Pink */
}

table.cmbox-delete {
    background-color: #ffdbdb; /* Pink */
}

table.cmbox-content {
    background-color: #ffe7ce; /* Orange */
}

table.cmbox-style {
    background-color: #fff9db; /* Yellow */
}

table.cmbox-move {
    background-color: #e4d8ff; /* Purple */
}

table.cmbox-protection {
    background-color: #efefe1; /* Gray-gold */
}

/* Other pages message box styles */
table.ombox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1; /* Default "notice" gray */
    background-color: #f8f9fa;
    box-sizing: border-box;
}

table.ombox-notice {
    border: 1px solid #a2a9b1; /* Gray */
}

table.ombox-speedy {
    border: 2px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.ombox-delete {
    border: 2px solid #b32424; /* Red */
}

table.ombox-content {
    border: 1px solid #f28500; /* Orange */
}

table.ombox-style {
    border: 1px solid #fc3; /* Yellow */
}

table.ombox-move {
    border: 1px solid #9932cc; /* Purple */
}

table.ombox-protection {
    border: 2px solid #a2a9b1; /* Gray-gold */
}

/* Talk page message box styles */
table.tmbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090; /* Default "notice" gray-brown */
    background-color: #f8eaba;
    min-width: 80%;
    box-sizing: border-box;
}

.tmbox.mbox-small {
    min-width: 0; /* reset the min-width of tmbox above        */
}

.mediawiki .mbox-inside .tmbox {
    /* For tmboxes inside other templates. The "mediawiki" class ensures that */
    margin: 2px 0; /* this declaration overrides other styles (including mbox-small above)   */
    width: 100%; /* For Safari and Opera */
}

.mbox-inside .tmbox.mbox-small {
    /* "small" tmboxes should not be small when  */
    line-height: 1.5em; /* also "nested", so reset styles that are   */
    font-size: 100%; /* set in "mbox-small" above.                */
}

table.tmbox-speedy {
    border: 2px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}

table.tmbox-delete {
    border: 2px solid #b32424; /* Red */
}

table.tmbox-content {
    border: 2px solid #f28500; /* Orange */
}

table.tmbox-style {
    border: 2px solid #fc3; /* Yellow */
}

table.tmbox-move {
    border: 2px solid #9932cc; /* Purple */
}

table.tmbox-protection,
table.tmbox-notice {
    border: 1px solid #c0c090; /* Gray-brown */
}

/* Footer and header message box styles */
table.fmbox {
    clear: both;
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa; /* Default "system" gray */
    box-sizing: border-box;
}

table.fmbox-system {
    background-color: #191970;
}

table.fmbox-warning {
    border: 1px solid #bb7070; /* Dark pink */
    background-color: #ffdbdb; /* Pink */
}

table.fmbox-editnotice {
    background-color: transparent;
}

/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    clear: both;
    margin: 0.2em 0;
    border: 1px solid #bb7070;
    background-color: #ffdbdb;
    padding: 0.25em 0.9em;
    box-sizing: border-box;
}

/* Use default color for partial block fmbox banner per [[Special:PermaLink/1028105567#pblock-style]] */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
    border-color: #fc3;
    background-color: #fef6e7;
}

/* These mbox-small classes must be placed after all other
	 ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
	 they override "table.ambox + table.ambox" above. */
html body.mediawiki .mbox-small {
    /* For the "small=yes" option. */
    /* @noflip */
    clear: right;
    /* @noflip */
    float: right;
    /* @noflip */
    margin: 4px 0 4px 1em;
    box-sizing: border-box;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em;
}

html body.mediawiki .mbox-small-left {
    /* For the "small=left" option. */
    /* @noflip */
    margin: 4px 1em 4px 0;
    box-sizing: border-box;
    overflow: hidden;
    width: 238px;
    border-collapse: collapse;
    font-size: 88%;
    line-height: 1.25em;
}

/* Style for compact ambox */
/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
    display: none;
}

/* Remove borders, backgrounds, padding, etc. */
.compact-ambox table.ambox {
    border: none;
    border-collapse: collapse;
    background-color: transparent;
    margin: 0 0 0 1.6em !important;
    padding: 0 !important;
    width: auto;
    display: block;
}

body.mediawiki .compact-ambox table.mbox-small-left {
    font-size: 100%;
    width: auto;
    margin: 0;
}

/* Style the text cell as a list item and remove its padding */
.compact-ambox table .mbox-text {
    padding: 0 !important;
    margin: 0 !important;
}

.compact-ambox table .mbox-text-span {
    display: list-item;
    line-height: 1.5em;
    list-style-type: square;
    list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
}

/* Allow for hiding text in compact form */
.compact-ambox .hide-when-compact {
    display: none;
}

/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
    text-decoration: none !important;
}

/* Prevent line breaks in silly places where desired (nowrap)
	 and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
    white-space: nowrap;
}

/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
    white-space: normal;
}

/* Increase the height of the image upload box */
#wpUploadDescription {
    height: 13em;
}

/* Minimum thumb width */
.thumbinner {
    min-width: 100px;
}

/* Prevent floating boxes from overlapping any category listings,
	 file histories, edit previews, and edit [Show changes] views. */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
    clear: both;
}

/* Selectively hide headers in WikiProject banners */
/* TemplateStyles */
.wpb .wpb-header {
    display: none;
}

.wpbs-inner .wpb .wpb-header {
    display: table-row;
}

.wpbs-inner .wpb-outside {
    display: none; /* hide things that should only display outside shells */
}

/* Styling for Abuse Filter tags */
.mw-tag-markers {
    font-style: italic;
    font-size: 90%;
}

/* Hide stuff meant for accounts with special permissions. Made visible again in
	 [[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
	 [[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
	 [[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
	 [[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
    display: none;
}

/* Hide the redlink generated by {{Editnotice}},
	 this overrides the ".sysop-show { display: none; }" above that applies
	 to the same link as well. See [[phab:T45013]]
  
	 Hide the images in editnotices to keep them readable in VE view.
	 Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
    display: none !important;
}

/* Remove bullets when there are multiple edit page warnings */
ul.permissions-errors > li {
    list-style: none none;
}

ul.permissions-errors {
    margin: 0;
}

/* texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
    font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
    font-size: 118%;
    line-height: 1;
    white-space: nowrap;
    /* Force tabular and lining display for texhtml */
    -moz-font-feature-settings: "lnum", "tnum", "kern" 0;
    -webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
    font-feature-settings: "lnum", "tnum", "kern" 0;
    font-variant-numeric: lining-nums tabular-nums;
    font-kerning: none;
}

span.texhtml span.texhtml {
    font-size: 100%;
}

span.mwe-math-mathml-inline {
    font-size: 118%;
}

/* Make <math display="block"> be left aligned with one space indent for 
   * compatibility with style conventions
   */
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
    margin-left: 1.6em !important;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}

.mwe-math-mathml-display math {
    display: inline;
}

/* Work-around for [[phab:T25965]] / [[phab:T100106]] (Kaltura advertisement) */
.k-player .k-attribution {
    visibility: hidden;
}

/* Move 'play' button of video player to bottom left corner */
.PopUpMediaTransform a .play-btn-large {
    margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}

@media screen {
    /* Gallery styles background changes are restricted to screen view.
		 In printing we should avoid applying backgrounds. */
    /* The backgrounds for galleries. */
    #content .gallerybox div.thumb {
        /* Light gray padding */
        background-color: #f8f9fa;
    }
    /* Put a chequered background behind images, only visible if they have transparency.
		 '.filehistory a img' and '#file img:hover' are handled by MediaWiki core (as of 1.19) */
    .gallerybox .thumb img {
        background: #fff
            url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png)
            repeat;
    }
    /* But not on articles, user pages, portals or with opt-out. */
    .ns-0 .gallerybox .thumb img,
    .ns-2 .gallerybox .thumb img,
    .ns-100 .gallerybox .thumb img,
    .nochecker .gallerybox .thumb img {
        background-image: none;
    }

    /* Display "From Wikipedia, the free encyclopedia" in skins that support it,
		 do not apply to print mode */
    /*
	  #siteSub {
		  display: block;
	  }
	  */
}

/* Hide FlaggedRevs notice UI when there are no pending changes */
.flaggedrevs_draft_synced,
  .flaggedrevs_stable_synced,
  /* "Temporary" to remove links in sidebar T255381 */
  #t-upload,
  /* Hide broken download box on Special:Book pending T285400 */
  .mw-special-Book #coll-downloadbox {
    display: none;
}

/* Fix horizontal scrolling of long edit summaries T158725 */
span.comment {
    overflow-wrap: break-word;
}

#mw-page-base {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

.mediawiki,
.mw-page-container {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

.mw-body {
    background: #212126;
    color: var(--text-color);
    border: black;
}

#mw-panel {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

#mw-content-container,
#mw-header-container,
#mw-header-nav-hack,
#mw-content-wrapper,
#mw-content,
#p-logo {
    background: #1b1b1f;
    color: var(--text-color);
    border: #1b1b1f;
}

#mw-header-nav-hack {
    background: #212126;
    color: var(--text-color);
    border: #212126;
}

.mw-code {
    background: #212126;
    color: var(--text-color);
}

footer,
#footer-info-lastmod,
#footer-info-copyright {
    color: var(--text-color);
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li {
    color: var(--text-color);
}

a,
.vector-menu-portal .vector-menu-content li a,
.vector-menu-tabs li a,
body.skin--responsive #p-cactions li a {
    color: lightblue;
}

a:visited,
.vector-menu-portal .vector-menu-content li a:visited,
.vector-menu-tabs li a:visited,
body.skin--responsive #p-cactions li a:visited {
    color: #007fff;
}

body.skin--responsive #p-cactions li a {
    background: var(--bg-color-light-x2);
}

.mw-prefs-buttons {
    background: var(--bg-color-light-x2);
}

a.extiw:visited,
a.external:visited,
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
    color: #8a2be2;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
body.skin--responsive #p-cactions li.selected a {
    color: var(--text-color);
    font-weight: bold;
}

body.skin--responsive #p-cactions li.selected a {
    background: var(--bg-color-light-x2);
}

.vector-menu-tabs li {
    background: #212126;
}

.tools-inline li a {
    filter: invert(100%);
}

.tools-inline span {
    filter: invert(100%);
    color: var(--text-color);
}

#personal h2,
#site-tools h2,
#site-navigation h2,
#searchButton {
    filter: invert(100%);
}

#personal h2 span {
    filter: invert(100%);
}

#mw-site-navigation .sidebar-chunk,
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
body.skin--responsive .portlet,
body.skin--responsive .pBody {
    background: #212126;
    color: var(--text-color);
    border: #1b1b1f;
}

#p-logo-text a {
    color: var(--text-color);
}

#ca-nstab-mediawiki.a {
    color: var(--text-color);
}

#mw-changeslist-links {
    background: #212126;
    color: var(--text-color);
}

#simpleSearch {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

#searchInput {
    color: var(--text-color);
}

#pt-createaccount {
    visibility: hidden;
}

.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
#personal .dropdown {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

body.skin--responsive #p-cactions li.selected {
    border: var(--bg-color-light-x4);
}

.vector-menu-tabs .selected {
    background: #1b1b1f;
}

#pagehistory li.selected {
    background: #1b4d3e;
    font-weight: bold;
}

div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    background: #7c0a02;
    border: 1px solid #bb7070;
}

.wikitable {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

.toc {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

.mw-content-ltr .tocnumber {
    color: grey;
}

.wikitable > tr > th,
.wikitable > tr > td,
.wikitable > * > tr > th,
.wikitable > * > tr > td {
    border: 1px solid var(--bg-color-light-x4);
}

.wikitable > * > tr > th {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

.quickbox {
    border: 1px solid #303038;
    background: var(--bg-color-light-x2);
}

.quickboxhead {
    border-bottom: 1px solid #303038;
    background: #1b1b1f;
    text-align: center;
}

.thumbinner,
.thumbinner .thumbimage {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

table.ombox tbody,
table.ombox {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

table.ambox tbody,
table.ambox {
    background: var(--bg-color-light-x2);
    border-top: 1px solid var(--bg-color-light-x4);
    border-bottom: 1px solid var(--bg-color-light-x4);
    border-right: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

table.imbox tbody,
table.imbox {
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

/* OOUI PAIN */
/* Recent Changes */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
    .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background: var(--bg-color-light-x2);
    border: 1px solid #303038;
    color: var(--text-color);
}

/* Generic OOUI elements */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
    background: var(--bg-color-light-x2);
    border: 1px solid #303038;
    color: var(--text-color);
}

.oo-ui-popupWidget-popup {
    background: var(--bg-color-light-x3);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}

/* SITE SPECIFIC */
/*
  .chemrecipeimg img {
	  background-image: url('https://wiki.spacestation14.com/w/images/7/75/Beaker_Fill.png');
	  background-blend-mode: multiply;
	  background-position: center;
  }
  */
@media screen {
    .mw-body-content .recipeimg a > img {
        padding: 0;
        margin: 0;
        border: 0;
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important;
    }
}

.positive {
    color: #00ff00;
    font-weight: bold;
}

.negative {
    color: #ff0000;
    font-weight: bold;
}

.anglerect {
    --angle-rect-clip-size: 16px;
    clip-path: polygon(
        0 0,
        calc(100% - var(--angle-rect-clip-size)) 0,
        100% var(--angle-rect-clip-size),
        100% 100%,
        var(--angle-rect-clip-size) 100%,
        0 calc(100% - var(--angle-rect-clip-size))
    );
}

/* hack for mobile/nomobile */
.flex {
    display: flex;
}

@media screen and (min-width: 851px) {
    .mobile {
        display: none;
    }
}

@media screen and (max-width: 850px) {
    .nomobile {
        display: none;
    }
}

img {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* allows enabling smooth rendering for images by adding this class to them whenever needed */
img.smooth-render {
    image-rendering: auto;
}

.layered {
    position: absolute;
    top: 0;
    left: 0;
}

.blend {
    mix-blend-mode: multiply;
}

/* replace pencil icon in "edit section" buttons with a version that's visible */
.mw-editsection {
    background-image: url(/w/images/a/a9/Pencil-lightblue.svg);
}