MediaWiki:Common.css: Difference between revisions

From Space Station 14 Wiki
Browse history interactively
← Older edit
thumbnail image and source editor syntax highlighting from User:Aliser
Aliser (talk | contribs)
cssmin
2,803 edits
Module:ScribuntoUnit styles
 
(32 intermediate revisions by 3 users not shown)
Line 18: Line 18:
     --bg-color-light-x3: hsl(240, 7%, 20%);
     --bg-color-light-x3: hsl(240, 7%, 20%);
     --bg-color-light-x4: hsl(240, 7%, 23%);
     --bg-color-light-x4: hsl(240, 7%, 23%);
    --bg-color-light-x5: hsl(240, 7%, 26%);
    --bg-color-light-x6: hsl(240, 7%, 32%);
    --bg-color-light-x7: hsl(240, 5%, 38%);


     --border-color-light: hsl(240, 7%, 35%);
     --border-color-light: hsl(240, 7%, 35%);
Line 23: Line 26:
     --border-color: hsl(240, 7%, 24%);
     --border-color: hsl(240, 7%, 24%);


     --text-color: lightgrey;
     --text-color: hsl(0, 0%, 95%);
    --text-color-grayed-500: hsl(0, 0%, 50%);
    --text-color-grayed-450: hsl(0, 0%, 45%);
    --text-color-grayed-400: hsl(0, 0%, 40%);
    --text-color-grayed-350: hsl(0, 0%, 35%);
    --text-color-grayed-300: hsl(0, 0%, 30%);


     --code-color-bg: #1b1e1f;
     --code-color-bg: hsl(195, 7%, 11%);
     --code-color-text: #e8e6e3;
    --code-color-bg-light: hsl(195, 7%, 18%);
     --code-color-border: #353a3c;
     --code-color-text: hsl(36, 10%, 90%);
     --code-color-border: hsl(197, 6%, 22%);


     --link-color: lightblue;
     --link-color: lightblue;
Line 37: Line 46:
     --action-color-dark: var(--blue-color-dark);
     --action-color-dark: var(--blue-color-dark);
     --action-color-dark-x2: var(--blue-color-dark-x2);
     --action-color-dark-x2: var(--blue-color-dark-x2);
--warning-color: hsl(54 100% 15% / 1);
--warning-color-border: hsl(60, 55%, 30%);
--danger-color: var(--red-color);
--danger-color-dark: var(--red-color-dark);
--danger-color-dark-x2: var(--red-color-dark-x2);
--danger-color-border: var(--red-color-border);
    --success-color-bg: hsl(167, 50%, 35%);
--success-color-border: hsl(167, 40%, 15%);
--success-color-text: var(--text-color);


     --blue-color-light-x2: hsl(220, 66%, 63%);
     --blue-color-light-x2: hsl(220, 66%, 63%);
Line 50: Line 71:
     --red-color: hsl(0, 75%, 50%);
     --red-color: hsl(0, 75%, 50%);
     --red-color-dark: hsl(0, 67%, 42%);
     --red-color-dark: hsl(0, 67%, 42%);
    --red-color-dark-x2: hsl(0, 62%, 36%);
    --red-color-border: hsl(0, 47%, 22%);
    /* ============= */
    /* New format of variables (wip) */
    /* ============= */
    --wiki-content-background-color: var(--bg-color-light);
    --wiki-content-background-color--secondary: var(--bg-color-light-x2);
    --wiki-accent-color: var(--action-color);
    --wiki-accent-label-color: var(--text-color);
    --wiki-accent-link-color: var(--link-color);
    --wiki-content-border-color: var(--border-color);
    --wiki-content-border-color--accent: var(--border-color-light-x2);
    --wiki-content-link-color: var(--link-color);
    --wiki-content-link-label-color: var(--text-color);
    --wiki-content-text-color: var(--text-color);
    /* ============= */
    /* ICONS GO HERE */
    /* ============= */
   
    /* white table sort icon */
    --icon-table-sort-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjEiIGhlaWdodD0iOSI+PGRlZnM+PGZpbHRlciBpZD0iZGFya3JlYWRlci1pbWFnZS1maWx0ZXIiPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjI0OSAtMC42MTQgLTAuNjcyIDAuMDAwIDEuMDM1IC0wLjY0NiAwLjI4OCAtMC42NjQgMC4wMDAgMS4wMjAgLTAuNjM2IC0wLjYwOSAwLjI1MCAwLjAwMCAwLjk5NCAwLjAwMCAwLjAwMCAwLjAwMCAxLjAwMCAwLjAwMCIgLz48L2ZpbHRlcj48L2RlZnM+PGltYWdlIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiBmaWx0ZXI9InVybCgjZGFya3JlYWRlci1pbWFnZS1maWx0ZXIpIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBEOTRiV3dnZG1WeWMybHZiajBpTVM0d0lpQmxibU52WkdsdVp6MGlWVlJHTFRnaVB6NEtQSE4yWnlCNGJXeHVjejBpYUhSMGNEb3ZMM2QzZHk1M015NXZjbWN2TWpBd01DOXpkbWNpSUhkcFpIUm9QU0l5TVNJZ2FHVnBaMmgwUFNJNUlpQjJhV1YzUW05NFBTSXdJREFnTWpFZ09TSStDZ2s4Y0dGMGFDQmtQU0p0TVRRdU5TQTFMVFFnTkMwMExUUjZiVEF0TVMwMExUUXROQ0EwZWlJdlBnbzhMM04yWno0SyIgLz48L3N2Zz4=");
    /* wiki help button icon - transparent question mark in circle of cosmoBlue */
    --icon-wiki-help-cosmoBlue: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQloZWxwCgk8L3RpdGxlPgoJPHBhdGggZmlsbD0icmdiKDIxMiAyMzYgMjU1KSIgZD0iTTEwIDBhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTAgMHptMSAxNkg5di0yaDJ6bTIuNzEtNy42YTIuNjQgMi42NCAwIDAgMS0uMzMuNzQgMy4xNiAzLjE2IDAgMCAxLS40OC41NWwtLjU0LjQ4Yy0uMjEuMTgtLjQxLjM1LS41OC41MmEyLjU0IDIuNTQgMCAwIDAtLjQ3LjU2QTIuMyAyLjMgMCAwIDAgMTEgMTJhMy43OSAzLjc5IDAgMCAwLS4xMSAxSDkuMDhhOC45IDguOSAwIDAgMSAuMDctMS4yNSAzLjI4IDMuMjggMCAwIDEgLjI1LS45IDIuNzkgMi43OSAwIDAgMSAuNDEtLjY3IDQgNCAwIDAgMSAuNTgtLjU4Yy4xNy0uMTYuMzQtLjMuNTEtLjQ0YTMgMyAwIDAgMCAuNDMtLjQ0IDEuODMgMS44MyAwIDAgMCAuMy0uNTUgMiAyIDAgMCAwIC4xMS0uNzIgMi4wNiAyLjA2IDAgMCAwLS4xNy0uODYgMS43MSAxLjcxIDAgMCAwLTEtLjkgMS43IDEuNyAwIDAgMC0uNS0uMSAxLjc3IDEuNzcgMCAwIDAtMS41My42OCAzIDMgMCAwIDAtLjUgMS44Mkg2LjE2YTQuNzQgNC43NCAwIDAgMSAuMjgtMS42OCAzLjU2IDMuNTYgMCAwIDEgLjgtMS4yOSAzLjg4IDMuODggMCAwIDEgMS4yOC0uODNBNC41OSA0LjU5IDAgMCAxIDEwLjE4IDRhNC40NCA0LjQ0IDAgMCAxIDEuNDQuMjMgMy41MSAzLjUxIDAgMCAxIDEuMTUuNjUgMy4wOCAzLjA4IDAgMCAxIC43OCAxLjA2IDMuNTQgMy41NCAwIDAgMSAuMjkgMS40NSAzLjM5IDMuMzkgMCAwIDEtLjEzIDEuMDF6Ii8+Cjwvc3ZnPg==");
    /* navbar search magnifying glass search icon in greyish colors */
    --icon-navbar-search-greyish: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlzZWFyY2gKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IndoaXRlIiBkPSJNMTIuMiAxMy42YTcgNyAwIDEgMSAxLjQtMS40bDUuNCA1LjQtMS40IDEuNC01LjQtNS40ek0xMyA4QTUgNSAwIDEgMSAzIDhhNSA1IDAgMCAxIDEwIDB6Ii8+Cjwvc3ZnPgo=");
    /* transparent exclamation mark in a circle filled with cosmoGreen */
    --icon-popup-notice-info-cosmoGreen: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlub3RpY2UKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTAgMGExMCAxMCAwIDEgMCAxMCAxMEExMCAxMCAwIDAgMCAxMCAwem0xIDE2SDl2LTJoMnptMC00SDlWNGgyeiIvPgo8L3N2Zz4=");
   
    /* transparent exclamation mark in a circle filled with some kind of orange */
    --icon-popup-notice-warn-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHRpdGxlPiBhbGVydCA8L3RpdGxlPiA8cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik02IDBhNiA2IDAgMCAwLTYgNiA2IDYgMCAwIDAgNiA2IDYgNiAwIDAgMCA2LTYgNiA2IDAgMCAwLTYtNnpNNSAyaDJ2NUg1VjJ6bTAgNmgydjJINVY4eiIvPiA8L3N2Zz4=");
    /* an icon to use to mark external links, in cosmoGreen */
    --icon-external-link-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGV4dGVybmFsIGxpbmsgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTcgMTdIM1YzaDVWMUgzYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0ydi01aC0yeiIvPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+PC9zdmc+");
    /* an asterisk icon used to mark required template fields, in yellow */
    --icon-asterisk-yellow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHJlcXVpcmVkIDwvdGl0bGU+PHBhdGggZmlsbD0iaHNsKDM5LCAxMDAlLCA1MCUpIiBkPSJNOC41IDBoM3YyMGgtM3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik0xOS40IDEzLjcgMTggMTYuMy42IDYuMyAyIDMuN3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Im0xOCAzLjcgMS40IDIuNi0xNy4zIDEwLTEuNS0yLjZ6Ii8+PC9zdmc+");
   
    /* source editor icon - double brackets [[]], cosmoGreen color */
    --icon-source-editor-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IFdpa2l0ZXh0IDwvdGl0bGU+PGcgZmlsbD0icmdiKDEwLCAyMTIsIDk4KSI+PHBhdGggZD0iTTEgM3YxNGgzdi0ySDNWNWgxVjN6bTQgMHYxNGg0di0ySDdWNWgyVjN6bTExIDB2MmgxdjEwaC0xdjJoM1Yzem0tNSAwdjJoMnYxMGgtMnYyaDRWM3oiLz48L2c+PC9zdmc+");
    /* source editor mode switch icon in active state (which you open mode switch menu) - a pencil, in cosmo green */
    --icon-source-editor-mode-switch-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGVkaXQgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJtMTYuNzcgOCAxLjk0LTJhMSAxIDAgMCAwIDAtMS40MWwtMy4zNC0zLjNhMSAxIDAgMCAwLTEuNDEgMEwxMiAzLjIzek0xIDE0LjI1VjE5aDQuNzVsOS45Ni05Ljk2LTQuNzUtNC43NXoiLz48L3N2Zz4=");
    /* source editor syntax highlight icon in active state (when syntax higlighting is on) - a pen, in cosmo green */
    --icon-source-editor-syntax-highlight-mode-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");
    /* a puzzle icon present in templates in visual editor, in white */
    --icon-template-puzzle-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHB1enpsZSA8L3RpdGxlPjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJ3aGl0ZSIgY3g9IjE3IiBjeT0iMTAiIHI9IjMiLz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0xMC41OCAzQTMgMyAwIDAgMSAxMSA0LjVhMyAzIDAgMCAxLTYgMEEzIDMgMCAwIDEgNS40MiAzSDF2MTJhMiAyIDAgMCAwIDIgMmgxMlYzeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");
    /* tabber icon present in visual editor → insert, in black */
    --icon-tabber-black: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPiA8dGl0bGU+dGFiYmVyPC90aXRsZT4gPHBhdGggZmlsbD0iIzA5YWJmMSIgZD0iTTE4IDJIMkMuOSAyIDAgMi45IDAgNHYxMmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6bTEgNWgtOGMtLjYgMC0xLS40LTEtMVYzaDhjLjYgMCAxIC40IDEgMXYzeiIvPiA8L3N2Zz4=");
    /* dropdown icon (arrow-like), in cosmo blue */
    --icon-dropdown-cosmoBlue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48dGl0bGU+IGRvd24gPC90aXRsZT48cGF0aCBmaWxsPSIjZDZlZGZmIiBkPSJNOS45IDIuOSA2IDYuOCAyLjEgMi45IDEgNGw1IDUgNS01eiIvPjwvc3ZnPg==");
}
}


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


code {
/* Reset italic styling set by user agent */
     color: var(--code-color-text);
cite,
    background-color: var(--code-color-bg);
dfn {
    border: 1px solid var(--code-color-border);
     font-style: inherit;
}
}


pre {
/* Straight quote marks for <q> */
     color: var(--code-color-text);
q {
    background-color: var(--code-color-bg);
     quotes: '"' '"' "'" "'";
    border: 1px solid var(--code-color-border);
}
}


a {
/* Avoid collision of blockquote with floating elements by swapping margin and padding */
     color: var(--link-color);
blockquote {
     overflow: hidden;
    margin: 1em 0;
    padding: 0 40px;
}
}


a:hover {
/* Consistent size for <small>, <sub> and <sup> */
    /* keep the same color */
small {
    color: var(--link-color);
     font-size: 85%;
    /* keep underline */
     text-decoration: underline;
}
}


a:visited {
.mw-body-content sub,
     color: var(--link-color-visited);
  .mw-body-content sup,
  span.reference /* for Parsoid */ {
     font-size: 80%;
}
}


a:visited:hover {
/* Same spacing for indented and unindented paragraphs on talk pages */
    /* keep the same color */
.ns-talk .mw-body-content dd {
    color: var(--link-color-visited);
    margin-top: 0.4em;
     /* keep underline */
     margin-bottom: 0.4em;
    text-decoration: underline;
}
}


/* big links on the main page */
/* Main page fixes */
.biglink > a:hover {
#interwiki-completelist {
     color: #2952a3;
     font-weight: bold;
}
}


/* big links on the main page */
.biglink {
.biglink > a:visited:hover {
    font-family: "Teko";
     color: #1e3666;
    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 */
/* #endregion */
.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 */
/* #region IMAGES & GALLERIES */
.mw-rcfilters-enabled .mw-specialpage-summary {
/* ============ */
    margin-top: 1em;
}


/* images with "thumb" type */
/* Highlight linked elements (such as clicked references) in blue */
figure[typeof~='mw:File/Thumb'],
.citation:target {
/* images with "frame" type */
    background-color: rgba(0, 127, 255, 0.133);
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 */
/* Styling for citations. Breaks long urls, etc., rather than overflowing box */
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,  
.citation {
/* images with "frame" type → image */
    word-wrap: break-word;
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
border-color: var(--border-color-light);
}
}


/* images with "thumb" type → open image icon */
/* Make the list of references smaller
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
  * Keep in sync with Template:Refbegin/styles.css
/* images with "thumb" type → ????? (something alike to the above) */
  * And Template:Reflist/styles.css
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
  */
filter: invert(100%);
ol.references {
    font-size: 90%;
    margin-bottom: 0.5em;
}
}


/* #endregion */
/* Style for horizontal lists (separator following item).
 
@source mediawiki.org/wiki/Snippets/Horizontal_lists
/* ============ */
@revision 8 (2016-05-21)
/* #region PAGE DIFF */
@author [[User:Edokter]]
/* ============ */
  */
 
.hlist dl,
/* page versions diff → diff entry (one cell) */
.hlist ol,
.diff .diff-context {
.hlist ul {
     background: var(--code-color-bg);
     margin: 0;
     color: var(--text-color);
     padding: 0;
    border-color: var(--border-color);
}
}


/* page versions diff → cell (deleted text) */
/* Display list items inline */
.diff .diff-deletedline {
.hlist dd,
     border-color: var(--red-color);
.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;
}
}


/* page versions diff → cell (added text) */
/* Display nested lists inline */
.diff .diff-addedline {
.hlist.inline,
     border-color: var(--green-color);
.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;
}
}


/* page versions diff → cell → inline diff */
/* Hide empty list items */
.diff .diffchange {
.hlist .mw-empty-li {
     background-color: var(--blue-color-dark-x2);
     display: none;
}
}


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


/* ============ */
/**
/* #region =📕= SOURCE EDITOR =📕= */
  * 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;
}


/* existing styles */
.hlist dd:last-child:after,
 
.hlist dt:last-child:after,
textarea {
.hlist li:last-child:after {
    background: var(--bg-color-light-x3);
     content: none;
    border: 1px solid var(--bg-color-light-x4);
     color: var(--text-color);
}
}


/* new styles */
/* Add parentheses around nested lists */
 
.hlist dd dd:first-child:before,
:root {
.hlist dd dt:first-child:before,
     /* todo */
.hlist dd li:first-child:before,
     --se-mode-icon: unset;
.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;
}
}


/* page editor content */
.hlist dd dd:last-child:after,
.mw-editform #wpTextbox1 {
.hlist dd dt:last-child:after,
    background-color: var(--bg-color-light-x2);
.hlist dd li:last-child:after,
     color: var(--text-color);
.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;
}
}


/* page editor footer section */
/* Put ordinals in front of ordered list items */
.mw-editform .editOptions {
.hlist ol {
     background-color: var(--bg-color-light);
     counter-reset: listitem;
    color: var(--text-color);
}
}


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


/* page editor footer section → edit summary hover */
.hlist ol > li:before {
.mw-editform .editOptions input#wpSummary:hover {
     content: " " counter(listitem) "\a0";
     border-color: var(--border-color-light-x2);
}
}


/* page editor footer section "save changes" button */
.hlist dd ol > li:first-child:before,
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpSave {
.hlist dt ol > li:first-child:before,
     background-color: var(--action-color);
.hlist li ol > li:first-child:before {
    border-color: var(--border-color);
     content: " (" counter(listitem) "\a0";
}
}


/* page editor footer section "save changes" button hover */
/* Unbulleted lists */
.mw-editform
.plainlist ol,
    .editOptions
.plainlist ul {
     .editButtons
     line-height: inherit;
     .oo-ui-buttonElement-button#wpSave:hover {
     list-style: none none;
     background-color: var(--action-color-light);
     margin: 0;
}
}


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


/* page editor footer section "show preview/changes" buttons */
/* Default style for navigation boxes */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview,
.navbox {
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff,
    /* Navbox container style */
  /* "Manage TemplateData" button above the text editor when editing a template
    box-sizing: border-box;
  !important directives are used to override the defaults */
    border: 1px solid #a2a9b1;
  .tdg-editscreen-main .oo-ui-buttonElement-button {
     width: 100%;
     background-color: var(--bg-color-light) !important;
     clear: both;
     color: var(--text-color) !important;
    font-size: 88%;
     border: 1px solid var(--bg-color-light-x4) !important;
    text-align: center;
     padding: 1px;
    margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
}
}


/* page editor → footer section → show preview/changes buttons hover */
.navbox .navbox {
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:hover,
     margin-top: 0; /* No top margin for nested navboxes */
  .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 */
.navbox + .navbox {
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:active,
     margin-top: -1px; /* Single pixel border between adjacent navboxes */
  .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 */
.navbox-inner,
.wikiEditor-ui-toolbar {
.navbox-subgroup {
     background-color: var(--bg-color-light);
     width: 100%;
    color: var(--text-color);
}
}


/* text editor toolbar icons - inverting from black to white */
.navbox-group,
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
.navbox-title,
.wikiEditor-ui-toolbar .oo-ui-indicator-down {
.navbox-abovebelow {
     filter: invert(100%);
    padding: 0.25em 1em; /* Title, group and above/below styles */
    line-height: 1.5em;
     text-align: center;
}
}


/* text editor toolbar icons on hover */
th.navbox-group {
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover,
    /* Group style */
  /* text editor toolbar mode switch icon button on hover */
    white-space: nowrap;
  .wikiEditor-ui-toolbar .oo-ui-widget .oo-ui-popupToolGroup-handle:hover {
     /* @noflip */
     /* !important directive makes the override much easier here */
     text-align: right;
     background-color: var(--bg-color-light-x3) !important;
}


    /* more "snappier" transition */
.navbox,
     transition: background-color 50ms ease-out, color 50ms ease-out,
.navbox-subgroup {
        border-color 50ms ease-out, box-shadow 50ms ease-out;
     background-color: #fdfdfd; /* Background color */
}
}


/* text editor toolbar mode switch icon button (when active) */
.navbox-list {
.wikiEditor-ui-toolbar
     line-height: 1.5em;
     .oo-ui-popupToolGroup-active
     border-color: #fdfdfd; /* Must match background color */
    .oo-ui-popupToolGroup-handle {
     background-color: var(--bg-color-light-x4);
}
}


/* text editor toolbar mode switch icon button → icon (when active) */
/* cell spacing for navbox cells */
.wikiEditor-ui-toolbar
tr + tr > .navbox-abovebelow,
    .oo-ui-popupToolGroup-active
tr + tr > .navbox-group,
    .oo-ui-popupToolGroup-handle
tr + tr > .navbox-image,
    .oo-ui-iconElement-icon {
tr + tr > .navbox-list {
     filter: none;
     /* Borders above 2nd, 3rd, etc. rows */
     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");
     border-top: 2px solid #fdfdfd; /* Must match background color */
}
}


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


/* text editor toolbar labels */
.navbox-abovebelow,
.wikiEditor-ui-toolbar .group .label {
th.navbox-group,
     color: var(--text-color);
.navbox-subgroup .navbox-title {
    filter: brightness(80%);
     background-color: #ddddff; /* Level 2 color */
}
}


/* text editor toolbar labels with .tool-select class (they act as select) */
.navbox-subgroup .navbox-group,
.wikiEditor-ui-toolbar .group .tool-select .label {
.navbox-subgroup .navbox-abovebelow {
     color: var(--text-color);
     background-color: #e6e6ff; /* Level 3 color */
    filter: none;
}
}


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


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


     /* a new prop, introduced because of hover */
.navbox .hlist td dl,
    transition: background-color 50ms ease-in;
.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 */
}
}


/* text editor toolbar → special characters tab → special characters */
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.wikiEditor-ui-toolbar .page-characters div span {
.mw-parser-output .mw-collapsible-toggle {
     color: var(--text-color);
     font-weight: normal;
     background-color: var(--bg-color-light);
    /* @noflip */
     border-color: var(--border-color);
    text-align: right;
     padding-right: 0.2em;
     padding-left: 0.2em;
}


     /* a new prop, introduced because of hover */
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
     transition: background-color 50ms ease-in;
     /* @noflip */
     float: left;
    /* @noflip */
    text-align: left;
}
}


/* text editor toolbar label (that acts as select) options on hover
/* Infobox template style */
  note: no hover is defined by default, this is an addition */
.infobox {
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover,
    border: 1px solid #a2a9b1;
  /* text editor toolbar → group lists inside tabs → options on hover */
    border-spacing: 3px;
  .wikiEditor-ui-toolbar .booklet>.index> :hover,
    background-color: #f8f9fa;
  /* text editor toolbar → special characters tab → special characters on hover */
    color: black;
  .wikiEditor-ui-toolbar .page-characters div span:hover {
    /* @noflip */
     background-color: var(--bg-color-light-x2);
    margin: 0.5em 0 0.5em 1em;
     transition: background-color 50ms ease-out;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    font-size: 88%;
     line-height: 1.5em;
     width: 22em;
}
}


/* text editor toolbar → special characters tab → special characters on hover */
.infobox-header,
.wikiEditor-ui-toolbar .page-characters div span:hover {
  .infobox-label,
    border-color: var(--border-color-light);
  .infobox-above,
}
  .infobox-full-data,
 
  .infobox-data,
/* text editor toolbar → group lists inside tabs → active option */
  .infobox-below,
.wikiEditor-ui-toolbar .booklet > .index > .current {
  .infobox-subheader,
     color: var(--link-color);
  .infobox-image,
    background-color: var(--bg-color-light-x4);
  .infobox-navbar,
    transition: background-color 50ms ease-out;
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox th,
  .infobox td {
     vertical-align: top;
}
}


/* text editor toolbar tab buttons
.infobox-label,
  the color property to the selected tab since it has higher priority */
  .infobox-data,
.wikiEditor-ui-toolbar .tabs span.tab a {
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
     color: var(--link-color);
  .infobox th,
 
  .infobox td {
     transition: background-color 100ms ease-out;
     /* @noflip */
     text-align: left;
}
}


/* text editor toolbar selected tab */
/* Remove .infobox when element selectors above are removed */
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.infobox .infobox-above,
   /* text editor toolbar selected tab, visited */
  .infobox .infobox-title,
   .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
   /* Remove element selector when every .infobox thing is using the standard module/templates  */
     color: var(--link-color);
   .infobox caption {
     background-color: var(--bg-color-light-x4);
     font-size: 125%;
 
     font-weight: bold;
     transition: background-color 100ms ease-in;
     text-align: center;
}
}


/* an arrow icon to the left in text editor toolbar tabs */
.infobox-title,
.wikiEditor-ui-toolbar .tabs span.tab a::before {
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
     filter: invert(100%);
  .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;
}
}


/* editor footer → checkbox */
/* Remove .infobox when element selectors above are removed */
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
.infobox .infobox-navbar {
     background-color: var(--bg-color-light-x2);
     /* @noflip */
     border-color: var(--border-color-light);
     text-align: right;
}
}


/* editor footer → checkbox hover */
/* Normal font styling for wikitable row headers with scope="row" tag */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:hover + span {
.wikitable.plainrowheaders th[scope="row"] {
     border-color: var(--border-color-light-x2);
     font-weight: normal;
    /* @noflip */
    text-align: left;
}
}


/* editor footer → checkbox active */
/* Lists in wikitable data cells are always left-aligned */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
.wikitable td ul,
    [type="checkbox"]:active
.wikitable td ol,
    + span {
.wikitable td dl {
    background-color: var(--action-color);
     /* @noflip */
    /* same as the bg color to make it seamless
     text-align: left;
  !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 */
/* Fix for hieroglyphs specificity issue in infoboxes ([[phab:T43869]]) */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
table.mw-hiero-table td {
     /* background-color: var(--action-color-dark-x2er); */
     vertical-align: middle;
}
}


/* editor footer → checkbox (checked) */
/* Change the external link icon to an Adobe icon for all PDF files */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
.mw-parser-output a[href$=".pdf"].external,
    [type="checkbox"]:checked
.mw-parser-output a[href*=".pdf?"].external,
    + span {
.mw-parser-output a[href*=".pdf#"].external,
     background-color: var(--action-color-light);
.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;
}
}


/* editor footer → checkbox (checked) hover */
/* Messagebox templates */
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
.messagebox {
     [type="checkbox"]:checked
    border: 1px solid #a2a9b1;
     + span:hover {
    background-color: #f8f9fa;
     background-color: var(--action-color-light-x2);
     width: 80%;
     margin: 0 auto 1em auto;
     padding: 0.2em;
}
}


/* editor footer → checkbox (checked) active */
.messagebox.merge {
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
     border: 1px solid #c0b8cc;
     [type="checkbox"]:checked
     background-color: #f0e5ff;
     + span:active {
     text-align: center;
     background-color: var(--action-color-dark);
}
}


/* legal stuff above the buttons at the footer of the editor
.messagebox.cleanup {
  note: this just adds additional spacing between the text and the checkboxes for visual clarity */
    border: 1px solid #9f9fff;
#editpage-copywarn {
     background-color: #efefff;
     margin-top: 1rem;
}
 
/* override for page editor toolbar → help tab → table → th */
.wikiEditor-ui-toolbar .page-table th {
     text-align: center;
     text-align: center;
    color: var(--text-color);
}
}


/* override for page editor toolbar → help tab → table → td */
.messagebox.standard-talk {
.wikiEditor-ui-toolbar .page-table td {
     border: 1px solid #c0c090;
     color: var(--text-color);
    background-color: #f8eaba;
    margin: 4px auto;
}
}


/* override page editor toolbar → tabs → left section
/* For old WikiProject banners inside banner shells. */
  note: both these overrides are done just
.mbox-inside .standard-talk {
  to make the help section a little larger and thus more readable */
    border: 1px solid #c0c090;
.wikiEditor-ui-toolbar .booklet>.index,
    background-color: #f8eaba;
  /* override page editor toolbar → tabs → right section */
    width: 100%;
  .wikiEditor-ui-toolbar .booklet .pages {
    margin: 2px 0;
     height: 12rem;
     padding: 2px;
}
}


/* editor → toolbar → mode switch button → popup (that opens on click) */
.messagebox.small {
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
    width: 238px;
     background-color: var(--bg-color-light);
    font-size: 85%;
    /* @noflip */
    float: right;
    clear: both;
    /* @noflip */
    margin: 0 0 1em 1em;
     line-height: 1.25em;
}
}


/* editor → toolbar → mode switch button → popup on click → inactive mode (span) */
.messagebox.small-talk {
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled {
    width: 238px;
     transition: background-color 100ms ease-in;
    font-size: 85%;
     color: var(--text-color);
    /* @noflip */
    float: right;
     clear: both;
     /* @noflip */
    margin: 0 0 1em 1em;
    line-height: 1.25em;
    background-color: #f8eaba;
}
}


/* editor → toolbar → mode switch button → popup on click → inactive mode (span) hover */
/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled:hover,
th.mbox-text,
  /* editor → toolbar → mode switch button → popup on click → inactive mode (a) active */
td.mbox-text {
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled .oo-ui-tool-link:active {
    /* The message body cell(s) */
     color: var(--text-color);
    border: none;
     background-color: var(--bg-color-light-x2);
     /* @noflip */
     transition: background-color 100ms ease-out;
     padding: 0.25em 0.9em; /* 0.9em left/right */
     width: 100%; /* Make all mboxes the same width regardless of text length */
}
}


/* editor → toolbar → mode switch button → popup on click → inactive mode (a) hover */
td.mbox-image {
.wikiEditor-ui-toolbar
    /* The left image cell */
     .oo-ui-toolbar-popups
     border: none;
     .oo-ui-widget-enabled
     /* @noflip */
     .oo-ui-tool-link:hover {
     padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
    /* duplicate background, removing it */
     text-align: center;
     background-color: transparent;
}
}


/* editor → toolbar → mode switch button → popup on click → selected mode (span) */
td.mbox-imageright {
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active,
    /* The right image cell */
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) */
    border: none;
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link,
    /* @noflip */
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) active */
    padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
  .wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active .oo-ui-tool-link:active {
     text-align: center;
     background-color: var(--bg-color-light-x3);
}
}


/* editor → toolbar → mode switch button → popup on click → selected mode (a) hover */
td.mbox-empty-cell {
.wikiEditor-ui-toolbar
     /* An empty narrow cell */
     .oo-ui-toolbar-popups
     border: none;
     .oo-ui-widget-enabled.oo-ui-tool-active
     padding: 0;
     .oo-ui-tool-link:hover {
     width: 1px;
     background-color: var(--bg-color-light-x3);
}
}


/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → title */
/* Article message box styles */
.wikiEditor-ui-toolbar
table.ambox {
     .oo-ui-toolbar-popups
    margin: 0 10%; /* 10% = Will not overlap with other elements */
     .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
     border: 1px solid #a2a9b1;
     .oo-ui-tool-title {
     /* @noflip */
     color: var(--text-color);
     border-left: 10px solid #36c; /* Default "notice" blue */
     background-color: #fbfbfb;
    box-sizing: border-box;
}
}


/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → icon */
/* Single border between stacked boxes. */
.wikiEditor-ui-toolbar
table.ambox + table.ambox,
    .oo-ui-toolbar-popups
table.ambox + .mw-empty-elt + table.ambox {
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
     margin-top: -1px;
     .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 */
.ambox th.mbox-text,
.wikiEditor-ui-toolbar
.ambox td.mbox-text {
     .oo-ui-toolbar-popups
     /* The message body cell(s) */
     .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
     padding: 0.25em 0.5em; /* 0.5em left/right */
    .oo-ui-tool-title {
}
     color: var(--text-color);
 
.ambox td.mbox-image {
     /* The left image cell */
    /* @noflip */
    padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
}
}


/* editor → toolbar → mode switch button → popup on click → source editing mode active → icon */
.ambox td.mbox-imageright {
.wikiEditor-ui-toolbar
     /* The right image cell */
    .oo-ui-toolbar-popups
     /* @noflip */
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
     padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
    .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 */
table.ambox-notice {
    /* @noflip */
    border-left: 10px solid #36c; /* Blue */
}


/* editor toolbar and content combined */
table.ambox-speedy {
.wikiEditor-ui .wikiEditor-ui-view,
    /* @noflip */
  /* editor toolbar section that open with tabs */
    border-left: 10px solid #b32424; /* Red */
  .wikiEditor-ui-toolbar .sections .section,
    background-color: #fee7e6; /* Pink */
  /* 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 */
table.ambox-delete {
.wikiEditor-ui-toolbar .group:not(:last-child) {
    /* @noflip */
     border-right: 1px solid var(--border-color-light);
     border-left: 10px solid #b32424; /* Red */
}
}


/* editor toolbar last groups of buttons */
table.ambox-content {
.wikiEditor-ui-toolbar .group:last-child {
    /* @noflip */
     border-left: 1px solid var(--border-color-light);
     border-left: 10px solid #f28500; /* Orange */
}
}


/* this is the last button on the main row of the editor toolbar */
table.ambox-style {
.wikiEditor-ui-toolbar .section-main .group:last-child {
    /* @noflip */
     border-right: 1px solid var(--border-color-light);
     border-left: 10px solid #fc3; /* Yellow */
}
}


/* editor toolbar */
table.ambox-move {
.wikiEditor-ui .wikiEditor-ui-top {
    /* @noflip */
     border-bottom: 1px solid var(--border-color-light);
     border-left: 10px solid #9932cc; /* Purple */
}
}


/* editor toolbar → mode switch button
table.ambox-protection {
  it has extra border on the bottom */
    /* @noflip */
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
     border-left: 10px solid #a2a9b1; /* Gray-gold */
     border-bottom: none;
}
}


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


:root {
.imbox .mbox-text .imbox {
     --synt-high--color-darkCreamy: #262421;
     /* For imboxes inside imbox-text cells. */
     --synt-high--color-lightCreamy: hsl(38, 5%, 45%);
    margin: 0 -0.5em; /* 0.9 - 0.5 = 0.4em left/right.        */
     display: block; /* Fix for webkit to force 100% width.  */
}


    --synt-high--color-comment: var(--synt-high--color-lightCreamy);
.mbox-inside .imbox {
    --synt-high--color-err: #ff1a94;
     /* For imboxes inside other templates. */
    --synt-high--color-operator: #f92672;
     margin: 4px;
    --synt-high--color-punctuation: #f8f8f2;
}
    --synt-high--color-string: #e6db74;
 
    --synt-high--color-date: var(--synt-high--color-string);
table.imbox-notice {
     /* names for things such as variables, functions, classes, etc. */
     border: 3px solid #36c; /* Blue */
     --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 */
table.imbox-speedy {
    border: 3px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}


/* Code block container  */
table.imbox-delete {
.mw-content-ltr.mw-highlight-lines pre {
     border: 3px solid #b32424; /* Red */
    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 */
table.imbox-content {
    box-shadow: rgb(34, 37, 39) 2.75em 0px 0px inset;
     border: 3px solid #f28500; /* Orange */
}
}


/* Code block → line numbers  */
table.imbox-style {
.mw-highlight .linenos {
     border: 3px solid #fc3; /* Yellow */
     color: rgb(165, 155, 142);
}
}


/* Highlighted Lines */
table.imbox-move {
.mw-highlight .hll {
     border: 3px solid #9932cc; /* Purple */
     background-color: var(--action-color);
}
}


.mw-highlight {
table.imbox-protection {
     background: #272822;
     border: 3px solid #a2a9b1; /* Gray-gold */
    color: #f8f8f2;
}
}


/* Error */
table.imbox-license {
.mw-highlight .err {
     border: 3px solid #88a; /* Dark gray */
     color: var(--synt-high--color-err);
     background-color: #f7f8ff; /* Light gray */
     background-color: hsl(328, 40%, 16%);
}
}


/* Keyword */
table.imbox-featured {
.mw-highlight .k {
     border: 3px solid #cba135; /* Brown-gold */
     color: var(--synt-high--color-keyword);
}
}


/* Literal */
/* Category message box styles */
.mw-highlight .l {
table.cmbox {
     color: var(--synt-high--color-literal);
     margin: 3px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1;
    background-color: #dfe8ff; /* Default "notice" blue */
    box-sizing: border-box;
}
}


/* Name */
table.cmbox-notice {
.mw-highlight .n {
     background-color: #d8e8ff; /* Blue */
     color: #f8f8f2;
}
}


/* Operator */
table.cmbox-speedy {
.mw-highlight .o {
     margin-top: 4px;
     color: var(--synt-high--color-operator);
    margin-bottom: 4px;
    border: 4px solid #b32424; /* Red */
    background-color: #ffdbdb; /* Pink */
}
}


/* Punctuation */
table.cmbox-delete {
.mw-highlight .p {
     background-color: #ffdbdb; /* Pink */
     color: var(--synt-high--color-punctuation);
}
}


/* Comment */
table.cmbox-content {
.mw-highlight .c {
     background-color: #ffe7ce; /* Orange */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Hashbang */
table.cmbox-style {
.mw-highlight .ch {
     background-color: #fff9db; /* Yellow */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Multiline */
table.cmbox-move {
.mw-highlight .cm {
     background-color: #e4d8ff; /* Purple */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Preproc */
table.cmbox-protection {
.mw-highlight .cp {
     background-color: #efefe1; /* Gray-gold */
     color: var(--synt-high--color-comment);
}
}


/* Comment.PreprocFile */
/* Other pages message box styles */
.mw-highlight .cpf {
table.ombox {
     color: var(--synt-high--color-comment);
     margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #a2a9b1; /* Default "notice" gray */
    background-color: #f8f9fa;
    box-sizing: border-box;
}
}


/* Comment.Single */
table.ombox-notice {
.mw-highlight .c1 {
     border: 1px solid #a2a9b1; /* Gray */
     color: var(--synt-high--color-comment);
}
}


/* Comment.Special */
table.ombox-speedy {
.mw-highlight .cs {
    border: 2px solid #b32424; /* Red */
    color: var(--synt-high--color-comment);
    background-color: #fee7e6; /* Pink */
}
}


/* Generic.Deleted */
table.ombox-delete {
.mw-highlight .gd {
     border: 2px solid #b32424; /* Red */
     color: #f92672;
}
}


/* Generic.Emph */
table.ombox-content {
.mw-highlight .ge {
     border: 1px solid #f28500; /* Orange */
     font-style: italic;
}
}


/* Generic.Inserted */
table.ombox-style {
.mw-highlight .gi {
     border: 1px solid #fc3; /* Yellow */
     color: var(--synt-high--color-name);
}
}


/* Generic.Strong */
table.ombox-move {
.mw-highlight .gs {
     border: 1px solid #9932cc; /* Purple */
     font-weight: bold;
}
}


/* Generic.Subheading */
table.ombox-protection {
.mw-highlight .gu {
     border: 2px solid #a2a9b1; /* Gray-gold */
     color: #75715e;
}
}


/* Keyword.Constant */
/* Talk page message box styles */
.mw-highlight .kc {
table.tmbox {
     color: var(--synt-high--color-keyword);
     margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090; /* Default "notice" gray-brown */
    background-color: #f8eaba;
    min-width: 80%;
    box-sizing: border-box;
}
}


/* Keyword.Declaration */
.tmbox.mbox-small {
.mw-highlight .kd {
     min-width: 0; /* reset the min-width of tmbox above        */
     color: var(--synt-high--color-keyword);
}
}


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


/* Keyword.Pseudo */
.mbox-inside .tmbox.mbox-small {
.mw-highlight .kp {
    /* "small" tmboxes should not be small when  */
     color: var(--synt-high--color-keyword);
    line-height: 1.5em; /* also "nested", so reset styles that are  */
     font-size: 100%; /* set in "mbox-small" above.                */
}
}


/* Keyword.Reserved */
table.tmbox-speedy {
.mw-highlight .kr {
    border: 2px solid #b32424; /* Red */
    color: var(--synt-high--color-keyword);
    background-color: #fee7e6; /* Pink */
}
}


/* Keyword.Type */
table.tmbox-delete {
.mw-highlight .kt {
     border: 2px solid #b32424; /* Red */
     color: var(--synt-high--color-keyword);
}
}


/* Literal.Date */
table.tmbox-content {
.mw-highlight .ld {
     border: 2px solid #f28500; /* Orange */
     color: var(--synt-high--color-date);
}
}


/* Literal.Number */
table.tmbox-style {
.mw-highlight .m {
     border: 2px solid #fc3; /* Yellow */
     color: var(--synt-high--color-literal);
}
}


/* Literal.String */
table.tmbox-move {
.mw-highlight .s {
     border: 2px solid #9932cc; /* Purple */
     color: var(--synt-high--color-string);
}
}


/* Name.Attribute */
table.tmbox-protection,
.mw-highlight .na {
table.tmbox-notice {
     color: var(--synt-high--color-name);
     border: 1px solid #c0c090; /* Gray-brown */
}
}


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


/* Name.Class */
table.fmbox-system {
.mw-highlight .nc {
     background-color: #191970;
     color: var(--synt-high--color-name);
}
}


/* Name.Constant */
table.fmbox-warning {
.mw-highlight .no {
    border: 1px solid #bb7070; /* Dark pink */
    color: var(--synt-high--color-keyword);
    background-color: #ffdbdb; /* Pink */
}
}


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


/* Name.Entity */
/* Div based "warning" style fmbox messages. */
.mw-highlight .ni {
div.mw-warning-with-logexcerpt,
     color: #f8f8f2;
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;
}
}


/* Name.Exception */
/* Use default color for partial block fmbox banner per [[Special:PermaLink/1028105567#pblock-style]] */
.mw-highlight .ne {
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
     color: var(--synt-high--color-name);
     border-color: #fc3;
    background-color: #fef6e7;
}
}


/* Name.Function */
/* These mbox-small classes must be placed after all other
.mw-highlight .nf {
ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
     color: var(--synt-high--color-name);
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;
}
}


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


/* Name.Namespace */
/* Style for compact ambox */
.mw-highlight .nn {
/* Hide the images */
     color: #f8f8f2;
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
     display: none;
}
}


/* Name.Other */
/* Remove borders, backgrounds, padding, etc. */
.mw-highlight .nx {
.compact-ambox table.ambox {
     color: var(--synt-high--color-name);
     border: none;
    border-collapse: collapse;
    background-color: transparent;
    margin: 0 0 0 1.6em !important;
    padding: 0 !important;
    width: auto;
    display: block;
}
}


/* Name.Property */
body.mediawiki .compact-ambox table.mbox-small-left {
.mw-highlight .py {
     font-size: 100%;
     color: #f8f8f2;
    width: auto;
    margin: 0;
}
}


/* Name.Tag */
/* Style the text cell as a list item and remove its padding */
.mw-highlight .nt {
.compact-ambox table .mbox-text {
     color: #f92672;
     padding: 0 !important;
    margin: 0 !important;
}
}


/* Name.Variable */
.compact-ambox table .mbox-text-span {
.mw-highlight .nv {
    display: list-item;
     color: #f8f8f2;
    line-height: 1.5em;
    list-style-type: square;
     list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
}
}


/* Operator.Word */
/* Allow for hiding text in compact form */
.mw-highlight .ow {
.compact-ambox .hide-when-compact {
     color: var(--synt-high--color-operator);
     display: none;
}
}


/* Text.Whitespace */
/* Remove underlines from certain links */
.mw-highlight .w {
.nounderlines a,
     color: #f8f8f2;
.IPA a:link,
.IPA a:visited {
     text-decoration: none !important;
}
}


/* Literal.Number.Bin */
/* Prevent line breaks in silly places where desired (nowrap)
.mw-highlight .mb {
and links when we don't want them to (nowraplinks a) */
     color: var(--synt-high--color-literal);
.nowrap,
.nowraplinks a {
     white-space: nowrap;
}
}


/* Literal.Number.Float */
/* But allow wrapping where desired: */
.mw-highlight .mf {
.wrap,
     color: var(--synt-high--color-literal);
.wraplinks a {
     white-space: normal;
}
}


/* Literal.Number.Hex */
/* Increase the height of the image upload box */
.mw-highlight .mh {
#wpUploadDescription {
     color: var(--synt-high--color-literal);
     height: 13em;
}
}


/* Literal.Number.Integer */
/* Minimum thumb width */
.mw-highlight .mi {
.thumbinner {
     color: var(--synt-high--color-literal);
     min-width: 100px;
}
}


/* Literal.Number.Oct */
/* Prevent floating boxes from overlapping any category listings,
.mw-highlight .mo {
file histories, edit previews, and edit [Show changes] views. */
     color: var(--synt-high--color-literal);
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
     clear: both;
}
}


/* Literal.String.Affix */
/* Selectively hide headers in WikiProject banners */
.mw-highlight .sa {
/* TemplateStyles */
     color: var(--synt-high--color-string);
.wpb .wpb-header {
     display: none;
}
}


/* Literal.String.Backtick */
.wpbs-inner .wpb .wpb-header {
.mw-highlight .sb {
     display: table-row;
     color: var(--synt-high--color-string);
}
}


/* Literal.String.Char */
.wpbs-inner .wpb-outside {
.mw-highlight .sc {
     display: none; /* hide things that should only display outside shells */
     color: var(--synt-high--color-string);
}
}


/* Literal.String.Delimiter */
/* Styling for Abuse Filter tags */
.mw-highlight .dl {
.mw-tag-markers {
     color: var(--synt-high--color-string);
     font-style: italic;
    font-size: 90%;
}
}


/* Literal.String.Doc */
/* Hide stuff meant for accounts with special permissions. Made visible again in
.mw-highlight .sd {
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
    color: var(--synt-high--color-string);
[[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;
}


/* Literal.String.Double */
/* Hide the redlink generated by {{Editnotice}},
.mw-highlight .s2 {
this overrides the ".sysop-show { display: none; }" above that applies
    color: var(--synt-high--color-string);
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;
}
}


/* Literal.String.Escape */
/* Remove bullets when there are multiple edit page warnings */
.mw-highlight .se {
ul.permissions-errors > li {
     color: var(--synt-high--color-literal);
     list-style: none none;
}
}


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


/* Literal.String.Interpol */
/* texhtml class for inline math (based on generic times-serif class) */
.mw-highlight .si {
span.texhtml {
     color: var(--synt-high--color-string);
    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;
}
}


/* Literal.String.Other */
span.texhtml span.texhtml {
.mw-highlight .sx {
     font-size: 100%;
     color: var(--synt-high--color-string);
}
}


/* Literal.String.Regex */
span.mwe-math-mathml-inline {
.mw-highlight .sr {
     font-size: 118%;
     color: var(--synt-high--color-string);
}
}


/* Literal.String.Single */
/* Make <math display="block"> be left aligned with one space indent for
.mw-highlight .s1 {
  * compatibility with style conventions
     color: var(--synt-high--color-string);
  */
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
     margin-left: 1.6em !important;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}
}


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


/* Name.Builtin.Pseudo */
/* Work-around for [[phab:T25965]] / [[phab:T100106]] (Kaltura advertisement) */
.mw-highlight .bp {
.k-player .k-attribution {
     color: #f8f8f2;
     visibility: hidden;
}
}


/* Name.Function.Magic */
/* Move 'play' button of video player to bottom left corner */
.mw-highlight .fm {
.PopUpMediaTransform a .play-btn-large {
     color: var(--synt-high--color-name);
     margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}
}


/* Name.Variable.Class */
@media screen {
.mw-highlight .vc {
    /* Put a chequered background behind images, only visible if they have transparency.
    color: #f8f8f2;
'.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;
    }


/* Name.Variable.Global */
    /* Display "From Wikipedia, the free encyclopedia" in skins that support it,
.mw-highlight .vg {
do not apply to print mode */
    color: #f8f8f2;
    /*
  #siteSub {
  display: block;
  }
  */
}
}


/* Name.Variable.Instance */
/* Hide FlaggedRevs notice UI when there are no pending changes */
.mw-highlight .vi {
.flaggedrevs_draft_synced,
     color: #f8f8f2;
  .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;
}
}


/* Name.Variable.Magic */
/* Fix horizontal scrolling of long edit summaries T158725 */
.mw-highlight .vm {
span.comment {
     color: #f8f8f2;
     overflow-wrap: break-word;
}
}


/* Literal.Number.Integer.Long */
#mw-page-base {
.mw-highlight .il {
    background: #1b1b1f;
     color: var(--synt-high--color-literal);
     color: var(--text-color);
    border: #1b1b1f;
}
}


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


/* ============ */
.mw-body {
/* #region SOURCE EDITOR → SYNTAX HIGHLIGHTING */
    background: #212126;
/* based on: https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/master/resources/mode/mediawiki/mediawiki.less */
    color: var(--text-color);
/* ============ */
    border: black;
}


:root {
#mw-panel {
     /* "se-cm" = Source Editor - Code Mirror */
    background: #1b1b1f;
     color: var(--text-color);
    border: #1b1b1f;
}


    /* same color as for source editor */
#mw-content-container,
    --se-cm--bg-color: var(--bg-color-light-x2);
#mw-header-container,
     /* same color as for code block */
#mw-header-nav-hack,
     --se-cm--gutter-bg-color: var(--code-color-bg);
#mw-content-wrapper,
     /* margin to the left for the main contents of the editor */
#mw-content,
    --se-cm--main-contents-left-margin: 0.25rem;
#p-logo {
     background: #1b1b1f;
     color: var(--text-color);
     border: #1b1b1f;
}


     /* bg color for pre/nowiki tags contents */
#mw-header-nav-hack {
     --se-cm--pre-bg-color: hsl(205, 21%, 15%);
     background: #212126;
     color: var(--text-color);
    border: #212126;
}


    /* from the <syntaxhighlight> theme */
.mw-code {
     --se-cm--comment-color: var(--synt-high--color-comment);
     background: #212126;
     --se-cm--error-color: var(--red-color);
     color: var(--text-color);
}


    /* link itself */
footer,
    --se-cm--link-color: var(--link-color);
#footer-info-lastmod,
    /* link delimiter */
#footer-info-copyright {
    --se-cm--cm-mw-link-delimiter: var(--se-cm--template-delimiter-color);
     color: var(--text-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) */
p,
     --se-cm--parser-function-color: var(--synt-high--color-operator);
h1,
h2,
h3,
h4,
h5,
h6,
li {
     color: var(--text-color);
}


    /* table brackets and row delimiter */
a,
    --se-cm--table-punctuation-color: var(--synt-high--color-punctuation);
.vector-menu-portal .vector-menu-content li a,
    /* table settings */
.vector-menu-tabs li a,
     --se-cm--table-settings-color: var(--se-cm--template-arg-name-color);
body.skin--responsive #p-cactions li a {
     color: lightblue;
}


    /* template name */
a:visited,
    --se-cm--template-name-color: hsl(80, 76%, 53%);
.vector-menu-portal .vector-menu-content li a:visited,
    /* template arg names */
.vector-menu-tabs li a:visited,
    --se-cm--template-arg-name-color: hsl(80, 76%, 42%);
body.skin--responsive #p-cactions li a:visited {
    /* template brackets */
     color: #007fff;
    --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 */
body.skin--responsive #p-cactions li a {
    --se-cm--template-param-name-color: var(--synt-high--color-keyword);
     background: var(--bg-color-light-x2);
     /* 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. */
.mw-prefs-buttons {
     --se-cm--wikitext-formatting-color: var(--blue-color-light);
     background: var(--bg-color-light-x2);
    /* html tags, including ones specific for the wiki (like syntaxhighlight) */
}
    --se-cm--xml-tag-color: hsl(41, 53%, 67%);


    /* selection color */
a.extiw:visited,
    --se-cm--selection-color: hsl(205, 21%, 30%);
a.external:visited,
    /* bg color applied when selecting a bracket that has a match (in templates) */
.mw-parser-output a.extiw:visited,
    --se-cm--matching-brackets-bg-color: hsl(205, 21%, 44%);
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
    color: #8a2be2;
}
}


/* the whole content body code mirror wrapper */
.vector-menu-tabs .selected a,
.CodeMirror-wrap {
.vector-menu-tabs .selected a:visited,
    /* same color as for source editor */
body.skin--responsive #p-cactions li.selected a {
    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);
     color: var(--text-color);
    font-weight: bold;
}
}


/* the actual lines of text */
body.skin--responsive #p-cactions li.selected a {
.CodeMirror pre.CodeMirror-line {
     background: var(--bg-color-light-x2);
     /* a little bit of margin for the main content */
    margin-left: var(--se-cm--main-contents-left-margin);
}
}


/* gutters?? */
.vector-menu-tabs li {
.CodeMirror-wrap .CodeMirror-gutters {
     background: #212126;
     border-color: var(--border-color);
}
}


/* gutter */
.tools-inline li a {
.CodeMirror-wrap .CodeMirror-gutter {
     filter: invert(100%);
     /* same color as for code block */
    background-color: var(--se-cm--gutter-bg-color);
}
}


/* selection */
.tools-inline span {
.CodeMirror-line::selection,
    filter: invert(100%);
/* selection */
     color: var(--text-color);
.CodeMirror-line>span::selection,
/* selection */
.CodeMirror-line>span>span::selection {
     background-color: var(--se-cm--selection-color);
}
}


/* bullet point symbol */
#personal h2,
.cm-mw-list,
#site-tools h2,
/* ???? */
#site-navigation h2,
.cm-mw-indenting {
#searchButton {
     color: var(--se-cm--wikitext-formatting-color);
     filter: invert(100%);
}
}


/* magic words */
#personal h2 span {
.cm-mw-doubleUnderscore,
     filter: invert(100%);
/* 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;" */
#mw-site-navigation .sidebar-chunk,
.cm-mw-mnemonic,
#mw-site-navigation .sidebar-chunk,
/* ???? */
#mw-related-navigation .sidebar-chunk,
.cm-mw-html-entity {
body.skin--responsive .portlet,
     color: var(--se-cm--xml-tag-color);
body.skin--responsive .pBody {
     background-color: #684905;
    background: #212126;
    border-radius: 2px;
     color: var(--text-color);
     border: #1b1b1f;
}
}


/* comments */
#p-logo-text a {
.cm-mw-comment {
     color: var(--text-color);
     color: var(--se-cm--comment-color);
}
}


/* formatting: 3 apostrophes for bold text */
#ca-nstab-mediawiki.a {
.cm-mw-apostrophes-bold,
     color: var(--text-color);
/* 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 */
#mw-changeslist-links {
.cm-mw-template-name {
    background: #212126;
     color: var(--se-cm--template-name-color);
     color: var(--text-color);
    /* disable the default */
    text-decoration: none;
}
}


/* template arg names */
#simpleSearch {
.cm-mw-template-argument-name {
    background: var(--bg-color-light-x2);
     color: var(--se-cm--template-arg-name-color);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


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


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


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


/* template variable (with 3 brackets) name */
body.skin--responsive #p-cactions li.selected {
.cm-mw-templatevariable-name {
     border: var(--bg-color-light-x4);
     color: var(--se-cm--template-param-name-color);
}
}


/* template variable (with 3 brackets) value */
.vector-menu-tabs .selected {
.cm-mw-templatevariable {
     background: #1b1b1f;
     color: var(--se-cm--template-param-value-color);
}
}


/* template variable brackets (3 brackets) */
#pagehistory li.selected {
.cm-mw-templatevariable-bracket {
     background: #1b4d3e;
     color: var(--se-cm--template-param-brackets-color);
    font-weight: bold;
}
}


/* template variable (with 3 brackets) delimiter */
div.mw-warning-with-logexcerpt,
.cm-mw-templatevariable-delimiter {
div.mw-lag-warn-high,
    color: var(--se-cm--param-delimiter-color);
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    background: #7c0a02;
    border: 1px solid #bb7070;
}
}


/* parser functions (things like "DISPLAYTITLE" or invokes) → name */
.wikitable {
.cm-mw-parserfunction-name {
    background: var(--bg-color-light-x3);
     color: var(--se-cm--template-name-color);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* parser functions (things like "DISPLAYTITLE" or invokes) → value */
.toc {
.cm-mw-parserfunction {
    background: var(--bg-color-light-x3);
     color: var(--se-cm--template-values-color);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


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


/* parser functions (things like "DISPLAYTITLE" or invokes) → delimiters */
.wikitable > tr > th,
.cm-mw-parserfunction-delimiter {
.wikitable > tr > td,
     color: var(--se-cm--template-delimiter-color);
.wikitable > * > tr > th,
.wikitable > * > tr > td {
     border: 1px solid var(--bg-color-light-x4);
}
}


/* wiki html tag names? like >syntaxhighlight> */
.wikitable > * > tr > th {
.cm-mw-exttag-name,
    background: var(--bg-color-light-x2);
/* html tag names */
     border: 1px solid var(--bg-color-light-x4);
.cm-mw-htmltag-name {
    color: var(--text-color);
     color: var(--se-cm--xml-tag-color);
}
}


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


/* wiki html tag brackets */
.quickboxhead {
.cm-mw-exttag-bracket,
    border-bottom: 1px solid #303038;
/* wiki html tag attributes (name, delimiter, value) */
    background: #1b1b1f;
.cm-mw-exttag-attribute,
    text-align: center;
/* 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 */
.thumbinner,
pre.CodeMirror-line.cm-mw-tag-pre,
.thumbinner .thumbimage {
/* pre tag INLINE contents */
    background: var(--bg-color-light-x2);
.CodeMirror-line span.cm-mw-tag-pre,
    border: 1px solid var(--bg-color-light-x4);
/* ???? */
     color: var(--text-color);
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 */
table.ombox tbody,
pre.CodeMirror-line.cm-mw-tag-pre,
table.ombox {
/* nowiki tag BLOCK contents */
     background: var(--bg-color-light-x2);
pre.CodeMirror-line.cm-mw-tag-nowiki {
    border: 1px solid var(--bg-color-light-x4);
     /* colors the margin gap bg for block variants */
    color: var(--text-color);
    box-shadow: calc(-1 * var(--se-cm--main-contents-left-margin)) 0
        var(--se-cm--pre-bg-color);
}
}


/* pre tag INLINE contents */
table.ambox tbody,
.CodeMirror-line span.cm-mw-tag-pre,
table.ambox {
/* nowiki tag INLINE contents */
    background: var(--bg-color-light-x2);
.CodeMirror-line span.cm-mw-tag-nowiki {
    border-top: 1px solid var(--bg-color-light-x4);
     /* a little corner rounding won't hurt a thing! */
     border-bottom: 1px solid var(--bg-color-light-x4);
     border-radius: 2px;
     border-right: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* ???? */
table.imbox tbody,
.cm-mw-link,
table.imbox {
/* ???? */
    background: var(--bg-color-light-x2);
.cm-mw-link-tosection,
     border: 1px solid var(--bg-color-light-x4);
/* header equal signs */
    color: var(--text-color);
.cm-mw-section-header {
     color: var(--se-cm--wikitext-formatting-color);
}
}


/* link itself */
/* OOUI PAIN */
.cm-mw-link-pagename,
/* Generic OOUI elements */
/* external link itself, without protocol */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
.cm-mw-extlink,
    background: var(--bg-color-light-x2);
/* ???? same as above, maybe? */
    border: 1px solid #303038;
.cm-mw-free-extlink,
     color: var(--text-color);
/* 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 */
.oo-ui-popupWidget-popup {
.cm-mw-link-bracket,
    background: var(--bg-color-light-x3);
/* external link brackets */
     border: 1px solid var(--bg-color-light-x4);
.cm-mw-extlink-bracket {
    color: var(--text-color);
     color: var(--se-cm--link-brackets-color);
}
}


/* link delimiter */
/* SITE SPECIFIC */
.cm-mw-link-delimiter {
/*
    color: var(--se-cm--cm-mw-link-delimiter);
  .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;
    }
}
}


/* link text */
.positive {
.cm-mw-link-text,
     color: #00ff00;
/* external link text */
    font-weight: bold;
.cm-mw-extlink-text {
     color: var(--se-cm--link-text-color);
}
}


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


/* the table settings I guess? (like «class="wikitable"») */
.anglerect {
.cm-mw-table-definition {
    --angle-rect-clip-size: 16px;
    color: var(--se-cm--table-settings-color);
    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;
}
}


/* ???? idk some kind of formatting errors? */
@media screen and (min-width: 851px) {
.cm-error,
    .mobile {
.cm-mw-error,
        display: none;
.cm-s-default .cm-error {
    }
    color: var(--se-cm--error-color);
}
}


.cm-mw-matchingbracket {
@media screen and (max-width: 850px) {
    background-color: var(--se-cm--matching-brackets-bg-color);
     .nomobile {
     /* disable the default */
        display: none;
    box-shadow: none;
    }
}
}


/* various inline bg targeting things, idk what each of them target exactly */
img {
.cm-mw-template2-ground,
    -ms-interpolation-mode: nearest-neighbor;
.cm-mw-template3-ground,
    image-rendering: -moz-crisp-edges;
.cm-mw-ext-ground,
    image-rendering: -o-crisp-edges;
.cm-mw-template-ext-ground,
    image-rendering: -webkit-optimize-contrast;
.cm-mw-ext2-ground,
    image-rendering: crisp-edges;
.cm-mw-template-ext2-ground,
     image-rendering: pixelated;
.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 */
/* allows enabling smooth rendering for images by adding this class to them whenever needed */
#mw-scribunto-input {
img.smooth-render,
font-family: monospace;
.smooth-render img {
font-weight: normal;
    image-rendering: auto;
color: var(--code-color-text);
}
background-color: var(--code-color-bg);
}  


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


/* #endregion */
.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);
}


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


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


/* Reset italic styling set by user agent */
/* page content */
cite,
#mw-content-text {
dfn {
    /* for the tooltips to work */
     font-style: inherit;
    /* can be switched back to auto (or maybe removed?) if using tooltips not dependant on position of tooltipped element */
     overflow: visible;
}
}


/* Straight quote marks for <q> */
code {
q {
    color: var(--code-color-text);
     quotes: '"' '"' "'" "'";
    background-color: var(--code-color-bg);
     border: 1px solid var(--code-color-border);
}
}


/* Avoid collision of blockquote with floating elements by swapping margin and padding */
pre {
blockquote {
     color: var(--code-color-text);
     overflow: hidden;
     background-color: var(--code-color-bg);
     margin: 1em 0;
     border: 1px solid var(--code-color-border);
     padding: 0 40px;
}
}


/* Consistent size for <small>, <sub> and <sup> */
a {
small {
     color: var(--link-color);
     font-size: 85%;
}
}


.mw-body-content sub,
a:hover {
  .mw-body-content sup,
    /* keep the same color */
  span.reference /* for Parsoid */ {
    color: var(--link-color);
     font-size: 80%;
    /* keep underline */
     text-decoration: underline;
}
}


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


/* Main page fixes */
a:visited:hover {
#interwiki-completelist {
    /* keep the same color */
     font-weight: bold;
    color: var(--link-color-visited);
    /* keep underline */
     text-decoration: underline;
}
}


.biglink {
/* big links on the main page */
     font-family: "Teko";
.biglink > a:hover {
    font-style: oblique 10deg;
     color: #2952a3;
    font-variant-caps: small-caps;
    text-shadow: #1b1b1f 2px 3px, #a00d 3px 5px;
}
}


/* Reduce page jumps by hiding collapsed/dismissed content */
/* big links on the main page */
.client-js .mw-special-Watchlist #watchlist-message,
.biglink > a:visited:hover {
  .client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child),
     color: #1e3666;
 
  /* 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-body h1,
.mw-rcfilters-enabled .mw-specialpage-summary {
.mw-body h2,
     margin-top: 1em;
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
/* page title */
.mw-page-title-main,
/* wiki title at upper left → long variant */
#p-logo-text a,
/* sidebar */
#mw-site-navigation h3,
/* sidebar */
#mw-related-navigation h3 {
     font-family: 'Teko', serif;
}
}


/* Highlight linked elements (such as clicked references) in blue */
/* up the header sizes do to 'Teko' font visually appearing smaller than its serif counterpart */
.citation:target {
.mw-body .mw-heading1,
     background-color: rgba(0, 127, 255, 0.133);
.mw-body h1 {
    font-size:2.5em;
}
.mw-body .mw-heading2,
.mw-body h2 {
    font-size: 2.2em;
}
.mw-body .mw-heading3,
.mw-body h3 {
    font-size: 1.8em;
}
.mw-body .mw-heading4,
.mw-body h4,
#p-logo-text a.long {
     font-size: 1.6em;
}
.mw-body .mw-heading5,
.mw-body h5,
/* sidebar */
#mw-site-navigation .sidebar-chunk h3,
/* sidebar */
#mw-related-navigation .sidebar-chunk h3 {
    font-size: 1.4em;
}
.mw-body .mw-heading6,
.mw-body h6 {
    font-size: 1.3em;
}
}


/* Styling for citations. Breaks long urls, etc., rather than overflowing box */
/** bot password → grants table → even row */
.citation {
#mw-botpasswords-table .mw-htmlform-matrix tbody tr:nth-child(2n) td {
     word-wrap: break-word;
     background-color: var(--bg-color-light-x3);
}
}


/* Make the list of references smaller
/** bot password → grants table → cell :hover */
  * Keep in sync with Template:Refbegin/styles.css
#mw-botpasswords-table .mw-htmlform-matrix tbody tr:hover td {
  * And Template:Reflist/styles.css
     background-color: var(--bg-color-light-x5);
  */
ol.references {
     font-size: 90%;
    margin-bottom: 0.5em;
}
}


/* Style for horizontal lists (separator following item).
/* ============ */
@source mediawiki.org/wiki/Snippets/Horizontal_lists
/* #endregion */
@revision 8 (2016-05-21)
/* ============ */
@author [[User:Edokter]]
 
  */
/* ============ */
.hlist dl,
/* #region System messages */
.hlist ol,
/* various notices */
.hlist ul {
/* ============ */
     margin: 0;
 
     padding: 0;
/* system message banner */
.mw-message-box {
     background-color: var(--action-color);
     color: var(--text-color);
    border-color: var(--action-color-dark);
}
}


/* Display list items inline */
/* system success banner */
.hlist dd,
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
.hlist dt,
     background-color: var(--success-color-bg);
.hlist li {
    border-color: var(--success-color-border);
     margin: 0; /* don't trust the note that says margin doesn't work with inline
     color: var(--success-color-text);
  * removing margin: 0 makes dds have margins again */
     display: inline;
}
}


/* Display nested lists inline */
/* system warning banner (e.g. when you preview changes in the source editor and the "changes not yeh published" banner pops up) */
.hlist.inline,
.mw-message-box-warning,
.hlist.inline dl,
/* another system warning banner */
.hlist.inline ol,
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning,
.hlist.inline ul,
/* warning banner on template edit page */
.hlist dl dl,
.cdx-message--warning {
.hlist dl ol,
    color: var(--text-color);
.hlist dl ul,
    background-color: var(--warning-color);
.hlist ol dl,
     border-color: var(--warning-color-border);
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
     display: inline;
}
}


/* Hide empty list items */
/* another system error banner */
.hlist .mw-empty-li {
.mw-message-box-error,
     display: none;
/* system error banner (e.g., when you remove the parameter name from templateData param) */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error,
/* error banner on template styles page */
.cdx-message--error {
     color: var(--text-color);
    background-color: var(--danger-color-dark);
    border-color: var(--danger-color-border);
}
}


/* Generate interpuncts */
/* error banner on template styles page → icon */
.hlist dt:after {
.cdx-message--error .cdx-message__icon {
     content: ": ";
     /* match text color */
    background-color: var(--text-color);
}
}


/**
/* #endregion */
  * 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
/* #region IMAGES & GALLERIES */
  */
/* ============ */
.hlist dd:after,
 
.hlist li:after {
/* images with "thumb" type */
    content: " · ";
figure[typeof~='mw:File/Thumb'],
    font-weight: bold;
/* 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,
/* The backgrounds for galleries. */
#content .gallerybox div.thumb {
background-color: var(--bg-color-light-x2);
border-color: var(--border-color);
}
}


.hlist dd:last-child:after,
/* images with "thumb" type → image */
.hlist dt:last-child:after,
figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,  
.hlist li:last-child:after {
/* images with "frame" type → image */
    content: none;
figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element,
/* some other images */
.mw-image-border .mw-file-element {
border-color: var(--border-color-light);
}
}


/* Add parentheses around nested lists */
/* images with "thumb" type → open image icon */
.hlist dd dd:first-child:before,
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,  
.hlist dd dt:first-child:before,
/* images with "thumb" type → ????? (something alike to the above) */
.hlist dd li:first-child:before,
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
.hlist dt dd:first-child:before,
filter: invert(100%);
.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,
/* images with "thumb" type */
.hlist dd dt:last-child:after,
figure[typeof~='mw:File/Thumb'],  
.hlist dd li:last-child:after,
/* images with "frame" type */
.hlist dt dd:last-child:after,
figure[typeof~='mw:File/Frame'] {
.hlist dt dt:last-child:after,
     /* minimum possible image  */
.hlist dt li:last-child:after,
     min-width: 120px;
.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 */
/* #endregion */
.hlist ol {
    counter-reset: listitem;
}


.hlist ol > li {
/* ============ */
     counter-increment: listitem;
/* #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);
}
}


.hlist ol > li:before {
/* page versions diff → cell (deleted text) */
     content: " " counter(listitem) "\a0";
.diff .diff-deletedline {
     border-color: var(--red-color);
}
}


.hlist dd ol > li:first-child:before,
/* page versions diff → cell (added text) */
.hlist dt ol > li:first-child:before,
.diff .diff-addedline {
.hlist li ol > li:first-child:before {
     border-color: var(--green-color);
     content: " (" counter(listitem) "\a0";
}
}


/* Unbulleted lists */
/* page versions diff → cell → inline diff */
.plainlist ol,
.diff .diffchange {
.plainlist ul {
     background-color: var(--blue-color-dark-x2);
     line-height: inherit;
    list-style: none none;
    margin: 0;
}
}


.plainlist ol li,
/* ============ */
.plainlist ul li {
/* #endregion */
    margin-bottom: 0;
/* ============ */
}


/* Default style for navigation boxes */
/* ============ */
.navbox {
/* #region Search */
    /* Navbox container style */
/* ============ */
     box-sizing: border-box;
 
     border: 1px solid #a2a9b1;
/* SEARCH BAR */
     width: 100%;
 
    clear: both;
/* search form → search bar */
    font-size: 88%;
.mw-search-form-wrapper #mw-search-top-table input[type=search] {
    text-align: center;
     background-color: var(--bg-color-light);
     padding: 1px;
     border-color: var(--border-color-light);
    margin: 1em auto 0; /* Prevent preceding content from clinging to navboxes */
     color: var(--text-color);
}
 
/* search form → search bar → search icon */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-icon-search,
/* search form → search bar → clear search icon */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-indicator-clear {
     filter: invert(100%);
}
}


.navbox .navbox {
/* search form → search bar → search button */
     margin-top: 0; /* No top margin for nested navboxes */
.mw-search-form-wrapper #mw-search-top-table button[type=submit],
/* search form → advanced search options → all/none toggle container → button */
.mw-search-form-wrapper #mw-search-togglebox input[type=button] {
     background-color: var(--action-color);
    border-color: var(--border-color);
    color: var(--text-color);
    transition: background-color 100ms ease-in;
}
}


.navbox + .navbox {
/* search form → search bar → search button hover */
     margin-top: -1px; /* Single pixel border between adjacent navboxes */
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:hover,
/* search form → advanced search options → all/none toggle container → button hover */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:hover {
     background-color: var(--action-color-light);
    transition: background-color 100ms ease-out;
}
}


.navbox-inner,
/* search form → search bar → search button active */
.navbox-subgroup {
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:active,
     width: 100%;
/* search form → advanced search options → all/none toggle container → button active */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:active {
     background-color: var(--action-color-dark-x2);
    transition: background-color 100ms ease-out;
}
}


.navbox-group,
/* search form → search in pane → namespace suggest → namespace with a border */
.navbox-title,
.oo-ui-defaultOverlay > .oo-ui-selectWidget .mw-advancedSearch-namespace-border {
.navbox-abovebelow {
     border-color: var(--bg-color-light-x3);
     padding: 0.25em 1em; /* Title, group and above/below styles */
    line-height: 1.5em;
    text-align: center;
}
}


th.navbox-group {
/* SEARCH BAR END */
    /* Group style */
 
    white-space: nowrap;
/* search form → results count info */
    /* @noflip */
.mw-search-form-wrapper #mw-search-top-table .results-info {
     text-align: right;
     color: var(--bg-color-light-x4);
}
}


.navbox,
/* search form → advanced search/search in pane */
.navbox-subgroup {
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
     background-color: #fdfdfd; /* Background color */
     background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color-light);
}
}


.navbox-list {
/* search form → advanced search/search in pane hover */
     line-height: 1.5em;
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button:hover {
     border-color: #fdfdfd; /* Must match background color */
     background-color: var(--bg-color-light-x2) !important;
    /* stays the same */
    color: var(--text-color) !important;
     border-color: var(--border-color) !important;
}
}


/* cell spacing for navbox cells */
/* search form → advanced search/search in pane → "down" indication icon */
tr + tr > .navbox-abovebelow,
.mw-search-form-wrapper .oo-ui-indicator-down {
tr + tr > .navbox-group,
     filter: invert(100%);
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,
/* search form → advanced search/search in pane → content container */
.navbox-title {
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-pane > * {
     background-color: #ccccff; /* Level 1 color */
    /* a slight "glow" at the top */
     background: linear-gradient(hsla(0, 0%, 100%, 0.1), var(--bg-color) 0.5em);
    border-color: var(--border-color-light);
}
}


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


.navbox-subgroup .navbox-group,
/* TAGS */
.navbox-subgroup .navbox-abovebelow {
 
     background-color: #e6e6ff; /* Level 3 color */
/* search form → tag */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget,
/* recent changes → filters → tag */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagItemWidget {
     background-color: var(--bg-color-light-x3) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color-light) !important;
    text-shadow: 0 0 3px var(--bg-color) !important;
}
}


.navbox-even {
/* search form → tag → remove button hover */
     background-color: #f7f7f7; /* Even row striping */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-buttonElement-button:hover,
/* recent changes → filters → tag → remove button hover */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
     background-color: var(--bg-color-light);
}
}


.navbox-odd {
/* search form → tag → remove icon */
     background-color: transparent; /* Odd row striping */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-icon-close,
/* recent changes → filters → tag → remove button → icon */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagItemWidget .oo-ui-icon-close {
     filter: invert(100%);
}
}


.navbox .hlist td dl,
/* search form → disabled tag */
.navbox .hlist td ol,
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget.oo-ui-widget-disabled {
.navbox .hlist td ul,
    background-color: var(--bg-color-light);
.navbox td.hlist dl,
    color: color-mix(in srgb, var(--text-color), var(--bg-color) 22%);
.navbox td.hlist ol,
     text-shadow: none;
.navbox td.hlist ul {
     padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
}


/* Styling for JQuery makeCollapsible, matching that of collapseButton */
/* search form → tag → link */
.mw-parser-output .mw-collapsible-toggle {
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget > a {
     font-weight: normal;
     color: var(--text-color);
    /* @noflip */
    text-align: right;
    padding-right: 0.2em;
    padding-left: 0.2em;
}
}


.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
/* search form → tag with a non-existing link */
     /* @noflip */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget:has(a.new) {
     float: left;
     background-color: var(--warning-color);
    /* @noflip */
     border-color: var(--border-color-light);
     text-align: left;
     text-shadow: 0 0 3px var(--bg-color-light-x2);
}
}


/* Infobox template style */
/* TAGS END */
.infobox {
/* FIELDS */
    border: 1px solid #a2a9b1;
 
    border-spacing: 3px;
/* search form → info icon */
    background-color: #f8f9fa;
.mw-search-form-wrapper .oo-ui-icon-info,
     color: black;
/* search form → menu icon */
    /* @noflip */
.mw-search-form-wrapper .oo-ui-icon-menu,
    margin: 0.5em 0 0.5em 1em;
/* search form → search icon */
    padding: 0.2em;
.mw-search-form-wrapper .oo-ui-icon-search {
     /* @noflip */
     filter: invert(100%);
     float: right;
}
     /* @noflip */
 
     clear: right;
/* search form → dropdown input */
     font-size: 88%;
.mw-search-form-wrapper .oo-ui-dropdownInputWidget,
     line-height: 1.5em;
/* search form → dropdown input hover */
    width: 22em;
.mw-search-form-wrapper .oo-ui-dropdownInputWidget:hover {
     /* remove this extra bg */
     background-color: transparent;
}
 
/* search form → fields group → label */
.mw-search-form-wrapper .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
     /* should be the same as the bg to hide the line underneath */
     background: var(--bg-color) !important;
     color: var(--text-color) !important;
     font-weight: bold !important;
}
}


.infobox-header,
/* search form → tag select field */
  .infobox-label,
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget,
  .infobox-above,
/* search form → text input field → input */
  .infobox-full-data,
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
  .infobox-data,
/* search form → dropdown select */
  .infobox-below,
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle,
  .infobox-subheader,
/* search form → dropdown select hover */
  .infobox-image,
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
  .infobox-navbar,
     background-color: var(--bg-color-light) !important;
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
    color: var(--text-color) !important;
  .infobox th,
  .infobox td {
     vertical-align: top;
}
}


.infobox-label,
/* search form → tag select field → input */
  .infobox-data,
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget input {
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
     color: var(--text-color);
  .infobox th,
  .infobox td {
     /* @noflip */
    text-align: left;
}
}


/* Remove .infobox when element selectors above are removed */
/* search form → tag select field → next nested container element */
.infobox .infobox-above,
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget > .oo-ui-tagMultiselectWidget-handle,
  .infobox .infobox-title,
/* search form → text input field → input */
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
  .infobox caption {
/* search form → dropdown select */
     font-size: 125%;
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle {
    font-weight: bold;
     border-color: var(--border-color-light) !important;
     text-align: center;
}
 
/* search form → tag select field hover → next nested container element */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget:hover > .oo-ui-tagMultiselectWidget-handle,
/* search form → text input field → input hover */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:hover,
/* search form → dropdown select hover */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
     border-color: var(--border-color-light) !important;
}
}


.infobox-title,
 
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
/* FIELDS END */
  .infobox caption {
 
     padding: 0.2em;
/* #endregion */
 
/* ============ */
/* #region Recent changes */
/* ============ */
 
 
/* list of abbreviations block */
.mw-changeslist-legend.mw-changeslist-legend.mw-changeslist-legend,
/* filters */
.mw-rcfilters-ui-filterWrapperWidget > .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
/* filters → search → input */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-inputWidget-input {
     color: var(--text-color);
    background-color: var(--bg-color-light-x2);
    border-color: var(--border-color);
}
}


/* Remove .infobox when element selectors above are removed */
/* list of abbreviations block → collapse button */
.infobox .infobox-header,
.mw-changeslist-legend.mw-changeslist-legend.mw-changeslist-legend .mw-collapsible-toggle-default .mw-collapsible-text {
.infobox .infobox-subheader,
     color: var(--link-color);
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
     text-align: center;
}
}


/* Remove .infobox when element selectors above are removed */
/* filters (nested el) */
.infobox .infobox-navbar {
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
     /* @noflip */
     background-color: transparent;
     text-align: right;
     border: none;
}
}


/* Normal font styling for wikitable row headers with scope="row" tag */
/* filters → search → button group */
.wikitable.plainrowheaders th[scope="row"] {
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonGroupWidget {
     font-weight: normal;
     border: none;
     /* @noflip */
     padding: .25rem;
    text-align: left;
}
}


/* Lists in wikitable data cells are always left-aligned */
/* filters → search → button group → button (except last) */
.wikitable td ul,
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonGroupWidget > *:not(:last-child) {
.wikitable td ol,
     margin-right: .2rem;
.wikitable td dl {
     /* @noflip */
    text-align: left;
}
}


/* Fix for hieroglyphs specificity issue in infoboxes ([[phab:T43869]]) */
/* filters → search → input */
table.mw-hiero-table td {
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-inputWidget-input {
     vertical-align: middle;
     border: none;
 
    border-top: 1px solid var(--border-color);
}
}


/* Change the external link icon to an Adobe icon for all PDF files */
/* filters → search → input ::placeholder */
.mw-parser-output a[href$=".pdf"].external,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-inputWidget-input::placeholder {
.mw-parser-output a[href*=".pdf?"].external,
     color: var(--text-color-grayed-500) !important;
.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 */
/* filters → search → button */
.messagebox {
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    border: 1px solid #a2a9b1;
     background-color: var(--bg-color-light-x4);
     background-color: #f8f9fa;
     border: 1px solid var(--border-color-light);
     width: 80%;
     color: var(--text-color);
     margin: 0 auto 1em auto;
    padding: 0.2em;
}
}


.messagebox.merge {
/* filters → search → button :hover */
     border: 1px solid #c0b8cc;
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
     background-color: #f0e5ff;
     background-color: var(--bg-color-light-x6);
     text-align: center;
     color: var(--text-color);
     border: 1px solid var(--border-color-light-x2);
}
}


.messagebox.cleanup {
/* filters → restore default filters button */
     border: 1px solid #9f9fff;
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: #efefff;
     color: var(--text-color);
    text-align: center;
}
}


.messagebox.standard-talk {
/* filters → restore default filters button :hover */
     border: 1px solid #c0c090;
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
     background-color: #f8eaba;
     color: var(--text-color);
    margin: 4px auto;
     background-color: var(--bg-color-light-x3);
}
}


/* For old WikiProject banners inside banner shells. */
/* live updates button */
.mbox-inside .standard-talk {
.mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
    border: 1px solid #c0c090;
/* results count & time period settings button */
     background-color: #f8eaba;
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
     width: 100%;
/* saved filters button */
     margin: 2px 0;
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
    padding: 2px;
/* saved filters button (pressed) */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-pressed .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* save current filter button → popup → button */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
     background-color: var(--bg-color-light-x3);
     border: 1px solid var(--border-color-light);
     color: var(--text-color);
}
}


.messagebox.small {
/* live updates button :hover */
    width: 238px;
.mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
    font-size: 85%;
/* results count & time period settings button :hover */
    /* @noflip */
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
    float: right;
/* saved filters button :hover */
    clear: both;
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
    /* @noflip */
/* save current filter button → popup → button :hover */
     margin: 0 0 1em 1em;
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
     line-height: 1.25em;
     background-color: var(--bg-color-light-x5);
     color: var(--text-color);
    border: 1px solid var(--border-color-light-x2);
}
}


.messagebox.small-talk {
/* save current filter button → popup → button (disabled) */
     width: 238px;
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-widget-disabled .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    font-size: 85%;
     background-color: var(--bg-color);
     /* @noflip */
     color: var(--text-color-grayed-300);
    float: right;
     border-color: var(--border-color);
     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 */
/* live updates button (pressed) */
th.mbox-text,
.mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-buttonElement-pressed .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
td.mbox-text {
     background-color: var(--action-color-dark-x2);
     /* 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 {
/* live updates button (active) */
    /* The left image cell */
.mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    border: none;
     background-color: var(--action-color);
    /* @noflip */
    padding: 2px 0 2px 0.9em; /* 0.9em left, 0px right */
     text-align: center;
}
}


td.mbox-imageright {
/* active filter name */
    /* The right image cell */
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle {
    border: none;
     color: var(--action-color);
    /* @noflip */
     padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
    text-align: center;
}
}


td.mbox-empty-cell {
/* saved filters change animation */
    /* An empty narrow cell */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .mw-rcfilters-ui-filterTagMultiselectWidget-emphasize.oo-ui-tagMultiselectWidget-handle {
    border: none;
     background-color: var(--bg-color-light-x7);
     padding: 0;
    width: 1px;
}
}


/* Article message box styles */
/* saved filters button → popup → item */
table.ambox {
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .mw-rcfilters-ui-savedLinksListItemWidget.mw-rcfilters-ui-savedLinksListItemWidget {
     margin: 0 10%; /* 10% = Will not overlap with other elements */
     background-color: var(--bg-color-light);
     border: 1px solid #a2a9b1;
     color: var(--text-color);
    /* @noflip */
     border-color: var(--border-color);
     border-left: 10px solid #36c; /* Default "notice" blue */
 
    background-color: #fbfbfb;
     transition: all 100ms ease-in;
     box-sizing: border-box;
}
}


/* Single border between stacked boxes. */
/* saved filters button → popup → item (highlighted) */
table.ambox + table.ambox,
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .mw-rcfilters-ui-savedLinksListItemWidget.mw-rcfilters-ui-savedLinksListItemWidget.oo-ui-optionWidget-highlighted {
table.ambox + .mw-empty-elt + table.ambox {
     background-color: var(--bg-color-light-x3);
     margin-top: -1px;
}
}


.ambox th.mbox-text,
/* saved filters button → popup → item → label */
.ambox td.mbox-text {
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .mw-rcfilters-ui-savedLinksListItemWidget-label {
     /* The message body cell(s) */
     color: var(--text-color);
    padding: 0.25em 0.5em; /* 0.5em left/right */
}
}


.ambox td.mbox-image {
/* save current filter button → popup → input */
    /* The left image cell */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-inputWidget-input,
     /* @noflip */
/* saved filters button → popup → item rename → input */
     padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .oo-ui-inputWidget-input {
     background-color: var(--bg-color-light);
    color: var(--text-color);
     border-color: var(--border-color-light) !important;
}
}


.ambox td.mbox-imageright {
/* save current filter button → popup → input :hover */
    /* The right image cell */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-inputWidget-input:hover,
    /* @noflip */
/* saved filters button → popup → item rename → input :hover */
     padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .oo-ui-inputWidget-input:hover {
     border-color: var(--border-color-light-x2) !important;
}
}


table.ambox-notice {
/* results count & time period settings button → overlay */
    /* @noflip */
/* .oo-ui-popupWidget-popup:has(.mw-rcfilters-ui-changesLimitPopupWidget) {
    border-left: 10px solid #36c; /* Blue */
 
}
} */


table.ambox-speedy {
/* "active filters" text */
    /* @noflip */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    border-left: 10px solid #b32424; /* Red */
     color: var(--text-color-grayed-500);
     background-color: #fee7e6; /* Pink */
}
}


table.ambox-delete {
/* filters → tag (enabled, selected) */
     /* @noflip */
.mw-rcfilters-container .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
     border-left: 10px solid #b32424; /* Red */
     background-color: var(--bg-color-light-x6) !important;
     border-color: var(--action-color) !important;
}
}


table.ambox-content {
/* filters → tag (enabled, focus) */
    /* @noflip */
.mw-rcfilters-container .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
     border-left: 10px solid #f28500; /* Orange */
     border-color: var(--action-color) !important;
}
}


table.ambox-style {
/* filters → overlay */
     /* @noflip */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-menuSelectWidget {
     border-left: 10px solid #fc3; /* Yellow */
     background-color: var(--bg-color-light-x3);
     border-color: var(--border-color);
}
}


table.ambox-move {
/* filters → overlay → header */
     /* @noflip */
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
     border-left: 10px solid #9932cc; /* Purple */
     background-color: var(--bg-color-light-x3);
     border-color: var(--border-color);
}
}


table.ambox-protection {
/* filters → overlay → header → title */
    /* @noflip */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .mw-rcfilters-ui-filterMenuHeaderWidget-title,
    border-left: 10px solid #a2a9b1; /* Gray-gold */
/* filters → overlay → option → desc */
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
/* filters → overlay → option (muted) → desc */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
/* filters → overlay → footer → title */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-labelElement.oo-ui-labelElement {
    color: var(--text-color-grayed-500);
}
}


/* Image message box styles */
/* filters → overlay → header → button */
table.imbox {
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
    margin: 4px 10%;
/* filters → overlay → footer → button */
    border-collapse: collapse;
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-buttonElement-button.oo-ui-buttonElement-button
     border: 3px solid #36c; /* Default "notice" blue */
{
     background-color: #fbfbfb;
     border: 1px solid var(--border-color-light);
    box-sizing: border-box;
     background-color: var(--bg-color-light-x4);
}
}


.imbox .mbox-text .imbox {
/* filters → overlay → header → button :hover */
    /* For imboxes inside imbox-text cells. */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
     margin: 0 -0.5em; /* 0.9 - 0.5 = 0.4em left/right.        */
/* filters → overlay → footer → button :hover */
     display: block; /* Fix for webkit to force 100% width.  */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
     background-color: var(--bg-color-light-x6);
     color: var(--text-color);
}
}


.mbox-inside .imbox {
/* filters → overlay → header → button (toggled off) → icon */
     /* For imboxes inside other templates. */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement:not(.oo-ui-buttonElement-active) .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
     margin: 4px;
/* filters → overlay → footer → button → icon */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* filters → clear filters trash bin icon */
.mw-rcfilters-container .oo-ui-icon-trash,
/* filters → search → menu/search icon */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-iconElement-icon,
/* filters → search → button group → button → icon */
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonGroupWidget > * .oo-ui-iconElement-icon,
/* live updates button (when toggled off) → icon */
.mw-rcfilters-ui-liveUpdateButtonWidget:not(.oo-ui-buttonElement-active) .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* filters → restore default filters button → icon */
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* results count & time period settings button → icon */
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* results count & time period settings button → dropdown icon */
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator,
/* save current filter button → icon */
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters .oo-ui-icon-bookmark,
/* saved filters button → bookmark icon  */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-icon-bookmark,
/* saved filters button → dropdown icon  */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-indicator-down,
/* saved filters button → popup → item → icons */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .oo-ui-iconElement-icon,
/* save current filter button → popup → bookmark icon */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-icon-bookmark,
/* save current filter button → popup → close icon */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-icon-close {
     filter: invert(100%);
}
 
/* filters → overlay → header → button (enabled) */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement-active .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
     background-color: var(--action-color);
}
}


table.imbox-notice {
/* filters → overlay → option → highlight results color button (when visible) */
     border: 3px solid #36c; /* Blue */
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
     background-color: var(--bg-color-light-x6);
}
}


table.imbox-speedy {
/* filters → overlay → option → highlight results color button (when visible) :hover */
    border: 3px solid #b32424; /* Red */
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
     background-color: #fee7e6; /* Pink */
     background-color: var(--bg-color-light-x7);
}
}


table.imbox-delete {
/* filters → overlay → option → highlight results color button (when visible) → pencil icon */
     border: 3px solid #b32424; /* Red */
/* filters → overlay → option → highlight results color button (when visible) → dropdown icon */
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button .oo-ui-icon-highlight:not(.mw-rcfilters-ui-filterItemHighlightButton-circle),
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button .oo-ui-indicator-down {
     filter: invert(100%);
}
}


table.imbox-content {
/* filters → overlay → header → help button  */
     border: 3px solid #f28500; /* Orange */
.mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* filters → overlay → header → back button  */
.mw-rcfilters-ui-filterMenuHeaderWidget-backButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: transparent;
     border: none;
}
}


table.imbox-style {
/* filters → overlay → header → help button :hover  */
     border: 3px solid #fc3; /* Yellow */
.mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
/* filters → overlay → header → back button  */
.mw-rcfilters-ui-filterMenuHeaderWidget-backButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
     background-color: var(--bg-color-light-x4);
}
}


table.imbox-move {
/* filters → overlay → section header */
     border: 3px solid #9932cc; /* Purple */
.mw-rcfilters-ui-filterMenuSectionOptionWidget,
/* filters → overlay → option (selected) */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected,
/* filters → overlay → footer */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect {
     background-color: var(--bg-color-light-x5);
}
}


table.imbox-protection {
/* filters → overlay → option */
     border: 3px solid #a2a9b1; /* Gray-gold */
.mw-rcfilters-ui-itemMenuOptionWidget,
/* filters → overlay → footer */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect {
     border-color: var(--border-color-light-x2) !important;
}
}


table.imbox-license {
/* filters → overlay → option :hover */
    border: 3px solid #88a; /* Dark gray */
.mw-rcfilters-ui-itemMenuOptionWidget:hover,
     background-color: #f7f8ff; /* Light gray */
/* filters → overlay → option (selected) :hover */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected:hover {
     background-color: var(--bg-color-light-x4);
}
}


table.imbox-featured {
/* filters → overlay → option (highlighted) */
     border: 3px solid #cba135; /* Brown-gold */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-highlighted,
/* filters → overlay → option (selected, highlighted) */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-highlighted {
     background-color: var(--bg-color-light-x5);
}
}


/* Category message box styles */
/* filters → overlay → section header → label */
table.cmbox {
.mw-rcfilters-ui-filterMenuSectionOptionWidget .oo-ui-labelElement-label,
    margin: 3px 10%;
/* filters → overlay → option → title */
    border-collapse: collapse;
.mw-rcfilters-ui-itemMenuOptionWidget-label-title {
    border: 1px solid #a2a9b1;
     color: var(--text-color);
    background-color: #dfe8ff; /* Default "notice" blue */
     box-sizing: border-box;
}
}


table.cmbox-notice {
/* filters → overlay → option (muted) → title */
     background-color: #d8e8ff; /* Blue */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title {
}
     color: var(--text-color-grayed-500);
}


table.cmbox-speedy {
/* filters → overlay → option (muted) */
    margin-top: 4px;
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
    margin-bottom: 4px;
     background-color: var(--bg-color-light);
    border: 4px solid #b32424; /* Red */
     background-color: #ffdbdb; /* Pink */
}
}


table.cmbox-delete {
/* filters → overlay → option (muted) :hover */
     background-color: #ffdbdb; /* Pink */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected):hover {
     background-color: var(--bg-color-light-x2);
}
}


table.cmbox-content {
/* filters → overlay → option → "excluded" label */
     background-color: #ffe7ce; /* Orange */
.mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel {
     color: var(--text-color-grayed-500);
}
}


table.cmbox-style {
/* change (highlighted w/ color 1) */
     background-color: #fff9db; /* Yellow */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c1 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
     background-color: hsl(220deg 40% 40% / 45%);
}
}


table.cmbox-move {
/* change (highlighted w/ color 2) */
     background-color: #e4d8ff; /* Purple */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c2 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
     background-color: hsl(167deg 40% 40% / 45%);
}
}


table.cmbox-protection {
/* change (highlighted w/ color 3) */
     background-color: #efefe1; /* Gray-gold */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c3 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
     background-color: hsl(45deg 100% 50% / 31%);
}
}


/* Other pages message box styles */
/* change (highlighted w/ color 4) */
table.ombox {
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c4,
    margin: 4px 10%;
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c4 tr:first-child,
    border-collapse: collapse;
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
    border: 1px solid #a2a9b1; /* Default "notice" gray */
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
    background-color: #f8f9fa;
     background-color: hsl(20deg 81% 44% / 35%);
     box-sizing: border-box;
}
}


table.ombox-notice {
/* change (highlighted w/ color 5) */
     border: 1px solid #a2a9b1; /* Gray */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c5,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c5 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
     background-color: hsl(0deg 84% 48% / 35%);
}
}


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


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


table.ombox-content {
/* ============ */
     border: 1px solid #f28500; /* Orange */
/* #region Page history */
/* ============ */
 
#pagehistory li.selected {
     color: var(--text-color);
}
}


table.ombox-style {
#pagehistory .mw-plusminus-pos {
     border: 1px solid #fc3; /* Yellow */
     color: var(--green-color);
}
}


table.ombox-move {
#pagehistory .autocomment,
     border: 1px solid #9932cc; /* Purple */
#pagehistory .autocomment a,
#pagehistory .autocomment a:visited {
     color: var(--text-color-grayed-500);
}
}


table.ombox-protection {
/* row (in group mode) → expand/collapse icon */
     border: 2px solid #a2a9b1; /* Gray-gold */
.mw-enhancedchanges-checkbox + * .mw-enhancedchanges-arrow {
     filter: invert(100%);
}
}


/* Talk page message box styles */
/* #endregion */
table.tmbox {
 
    margin: 4px 10%;
/* ============ */
    border-collapse: collapse;
/* #region Popups */
    border: 1px solid #c0c090; /* Default "notice" gray-brown */
/* various popup windows */
     background-color: #f8eaba;
/* some of them live in ".oo-ui-defaultOverlay" */
     min-width: 80%;
/* ============ */
    box-sizing: border-box;
 
/* OPTION SELECT */
 
/* option select popup */
.oo-ui-selectWidget {
     background-color: var(--bg-color);
     border-color: var(--border-color);
}
}


.tmbox.mbox-small {
/* option select popup → option */
     min-width: 0; /* reset the min-width of tmbox above        */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget {
     background-color: var(--bg-color);
    transition: background-color 100ms ease-in;
    color: var(--text-color);
}
}


.mediawiki .mbox-inside .tmbox {
/* option select popup → option hover */
     /* For tmboxes inside other templates. The "mediawiki" class ensures that */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    margin: 2px 0; /* this declaration overrides other styles (including mbox-small above)   */
     background-color: var(--bg-color-light);
     width: 100%; /* For Safari and Opera */
     transition: none;
}
}


.mbox-inside .tmbox.mbox-small {
/* option select popup → selected option hover */
     /* "small" tmboxes should not be small when  */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted {
    line-height: 1.5em; /* also "nested", so reset styles that are  */
     color: var(--text-color);
     font-size: 100%; /* set in "mbox-small" above.                */
     background-color: var(--action-color-dark);
}
}


table.tmbox-speedy {
/* option select popup → option active */
     border: 2px solid #b32424; /* Red */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed,
     background-color: #fee7e6; /* Pink */
/* option select popup → selected option */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
     color: var(--text-color);
    transition: none;
     background-color: var(--action-color-dark);
    background: linear-gradient(90deg,
        var(--action-color) 0%,
        var(--action-color-dark-x2) 100%
    );
}
}


table.tmbox-delete {
/* OPTION SELECT END */
    border: 2px solid #b32424; /* Red */
 
}
/* #endregion */
 
 
/* ============ */
/* #region =📕= SOURCE EDITOR =📕= */
/* ============ */
 
/* existing styles */


table.tmbox-content {
textarea {
     border: 2px solid #f28500; /* Orange */
    background: var(--bg-color-light-x3);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


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


table.tmbox-move {
:root {
     border: 2px solid #9932cc; /* Purple */
     --se-mode-icon: var(--icon-source-editor-cosmoGreen);
}
}


table.tmbox-protection,
/* page editor content */
table.tmbox-notice {
.mw-editform #wpTextbox1 {
     border: 1px solid #c0c090; /* Gray-brown */
     background-color: var(--bg-color-light-x2);
    color: var(--text-color);
}
}


/* Footer and header message box styles */
/* page editor footer section */
table.fmbox {
.mw-editform .editOptions {
    clear: both;
     background-color: var(--bg-color-light);
    margin: 0.2em 0;
     color: var(--text-color);
    width: 100%;
    border: 1px solid #a2a9b1;
     background-color: #f8f9fa; /* Default "system" gray */
     box-sizing: border-box;
}
}


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


table.fmbox-warning {
/* page editor footer section → edit summary hover */
     border: 1px solid #bb7070; /* Dark pink */
.mw-editform .editOptions input#wpSummary:hover {
    background-color: #ffdbdb; /* Pink */
     border-color: var(--border-color-light-x2);
}
}


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


/* Div based "warning" style fmbox messages. */
/* page editor footer section "save changes" button hover */
div.mw-warning-with-logexcerpt,
.mw-editform
div.mw-lag-warn-high,
    .editOptions
div.mw-cascadeprotectedwarning,
    .editButtons
div#mw-protect-cascadeon,
    .oo-ui-buttonElement-button#wpSave:hover {
div.titleblacklist-warning {
     background-color: var(--action-color-light);
    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]] */
/* page editor footer section "save changes" button active */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
.mw-editform
     border-color: #fc3;
    .editOptions
    background-color: #fef6e7;
    .editButtons
    .oo-ui-buttonElement-button#wpSave:active {
     background-color: var(--action-color-dark);
}
}


/* These mbox-small classes must be placed after all other
/* page editor footer section "show preview/changes" buttons */
ambox/tmbox/ombox etc classes. "html body.mediawiki" is so
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview,
they override "table.ambox + table.ambox" above. */
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff,
html body.mediawiki .mbox-small {
  /* "Manage TemplateData" button above the text editor when editing a template
    /* For the "small=yes" option. */
  !important directives are used to override the defaults */
    /* @noflip */
  .tdg-editscreen-main .oo-ui-buttonElement-button {
    clear: right;
     background-color: var(--bg-color-light) !important;
     /* @noflip */
     color: var(--text-color) !important;
    float: right;
     border: 1px solid var(--bg-color-light-x4) !important;
     /* @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 {
/* page editor → footer section → show preview/changes buttons hover */
    /* For the "small=left" option. */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:hover,
    /* @noflip */
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:hover,
    margin: 4px 1em 4px 0;
  /* "Manage TemplateData" button above the text editor when editing a template
     box-sizing: border-box;
  !important directives are used to override the defaults */
     overflow: hidden;
  .tdg-editscreen-main .oo-ui-buttonElement-button:hover {
     width: 238px;
     background-color: var(--action-color-light) !important;
    border-collapse: collapse;
     /* override of the default selector */
    font-size: 88%;
     color: var(--text-color) !important;
    line-height: 1.25em;
}
}


/* Style for compact ambox */
/* page editor → footer section → show preview/changes buttons active */
/* Hide the images */
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpPreview:active,
.compact-ambox table .mbox-image,
  .mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpDiff:active,
.compact-ambox table .mbox-imageright,
  /* "Manage TemplateData" button above the text editor when editing a template
.compact-ambox table .mbox-empty-cell {
  !important directives are used to override the defaults */
     display: none;
  .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;
}
}


/* Remove borders, backgrounds, padding, etc. */
/* text editor toolbar */
.compact-ambox table.ambox {
.wikiEditor-ui-toolbar {
     border: none;
     background-color: var(--bg-color-light);
    border-collapse: collapse;
     color: var(--text-color);
    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 {
/* text editor toolbar icons - inverting from black to white */
     font-size: 100%;
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
    width: auto;
.wikiEditor-ui-toolbar .oo-ui-indicator-down {
    margin: 0;
     filter: invert(100%);
}
}


/* Style the text cell as a list item and remove its padding */
/* text editor toolbar icons on hover */
.compact-ambox table .mbox-text {
.wikiEditor-ui-toolbar .oo-ui-buttonElement-button:hover,
     padding: 0 !important;
  /* text editor toolbar mode switch icon button on hover */
     margin: 0 !important;
  .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;
}
}


.compact-ambox table .mbox-text-span {
/* text editor toolbar mode switch icon button (when active) */
     display: list-item;
.wikiEditor-ui-toolbar
     line-height: 1.5em;
    .oo-ui-popupToolGroup-active
    list-style-type: square;
     .oo-ui-popupToolGroup-handle {
    list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg);
     background-color: var(--bg-color-light-x4);
}
}


/* Allow for hiding text in compact form */
/* text editor toolbar mode switch icon button → icon (when active) */
.compact-ambox .hide-when-compact {
.wikiEditor-ui-toolbar
     display: none;
    .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");
}
}


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


/* Prevent line breaks in silly places where desired (nowrap)
/* text editor toolbar labels */
and links when we don't want them to (nowraplinks a) */
.wikiEditor-ui-toolbar .group .label {
.nowrap,
     color: var(--text-color);
.nowraplinks a {
    filter: brightness(80%);
     white-space: nowrap;
}
}


/* But allow wrapping where desired: */
/* text editor toolbar labels with .tool-select class (they act as select) */
.wrap,
.wikiEditor-ui-toolbar .group .tool-select .label {
.wraplinks a {
     color: var(--text-color);
     white-space: normal;
    filter: none;
}
}


/* Increase the height of the image upload box */
/* text editor toolbar label (that acts as select) options container */
#wpUploadDescription {
.wikiEditor-ui-toolbar .group .tool-select .options {
     height: 13em;
     background-color: var(--bg-color-light-x2);
}
}


/* Minimum thumb width */
/* text editor toolbar label (that acts as select) options */
.thumbinner {
.wikiEditor-ui-toolbar .group .tool-select .options .option,
     min-width: 100px;
  /* 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;
}
}


/* Prevent floating boxes from overlapping any category listings,
/* text editor toolbar → special characters tab → special characters */
file histories, edit previews, and edit [Show changes] views. */
.wikiEditor-ui-toolbar .page-characters div span {
#mw-subcategories,
    color: var(--text-color);
#mw-pages,
    background-color: var(--bg-color-light);
#mw-category-media,
    border-color: var(--border-color);
#filehistory,
 
#wikiPreview,
    /* a new prop, introduced because of hover */
#wikiDiff {
     transition: background-color 50ms ease-in;
     clear: both;
}
}


/* Selectively hide headers in WikiProject banners */
/* text editor toolbar label (that acts as select) options on hover
/* TemplateStyles */
  note: no hover is defined by default, this is an addition */
.wpb .wpb-header {
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover,
     display: none;
  /* 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;
}
}


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


.wpbs-inner .wpb-outside {
/* text editor toolbar → group lists inside tabs → active option */
     display: none; /* hide things that should only display outside shells */
.wikiEditor-ui-toolbar .booklet > .index > .current {
    color: var(--link-color);
    background-color: var(--bg-color-light-x4);
     transition: background-color 50ms ease-out;
}
}


/* Styling for Abuse Filter tags */
/* text editor toolbar tab buttons
.mw-tag-markers {
  the color property to the selected tab since it has higher priority */
     font-style: italic;
.wikiEditor-ui-toolbar .tabs span.tab a {
     font-size: 90%;
     color: var(--link-color);
 
     transition: background-color 100ms ease-out;
}
}


/* Hide stuff meant for accounts with special permissions. Made visible again in
/* text editor toolbar selected tab */
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
.wikiEditor-ui-toolbar .tabs span.tab a.current,
[[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
  /* text editor toolbar selected tab, visited */
[[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
  .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
[[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
    color: var(--link-color);
.checkuser-show,
    background-color: var(--bg-color-light-x4);
.sysop-show,
 
.abusefilter-show,
     transition: background-color 100ms ease-in;
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
     display: none;
}
}


/* Hide the redlink generated by {{Editnotice}},
/* an arrow icon to the left in text editor toolbar tabs */
this overrides the ".sysop-show { display: none; }" above that applies
.wikiEditor-ui-toolbar .tabs span.tab a::before {
to the same link as well. See [[phab:T45013]]
     filter: invert(100%);
 
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 */
/* editor footer → checkbox */
ul.permissions-errors > li {
.oo-ui-checkboxInputWidget [type="checkbox"] + span {
     list-style: none none;
     background-color: var(--bg-color-light-x2);
    border-color: var(--border-color-light);
}
}


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


/* texhtml class for inline math (based on generic times-serif class) */
/* editor footer → checkbox active */
span.texhtml {
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
     font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
     [type="checkbox"]:active
     font-size: 118%;
     + span {
     line-height: 1;
     background-color: var(--action-color);
    white-space: nowrap;
     /* same as the bg color to make it seamless
     /* Force tabular and lining display for texhtml */
  !important here overrides the more lighter color in hover state*/
     -moz-font-feature-settings: "lnum", "tnum", "kern" 0;
     border-color: var(--action-color) !important;
    -webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
     /* disabling the default box shadow, which just doubles the border when active/in focus  */
     font-feature-settings: "lnum", "tnum", "kern" 0;
     box-shadow: none;
    font-variant-numeric: lining-nums tabular-nums;
     font-kerning: none;
}
}


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


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


/* Make <math display="block"> be left aligned with one space indent for
/* editor footer → checkbox (checked) hover */
  * compatibility with style conventions
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
  */
     [type="checkbox"]:checked
.mwe-math-fallback-image-display,
     + span:hover {
.mwe-math-mathml-display {
     background-color: var(--action-color-light-x2);
     margin-left: 1.6em !important;
     margin-top: 0.6em;
     margin-bottom: 0.6em;
}
}


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


/* Work-around for [[phab:T25965]] / [[phab:T100106]] (Kaltura advertisement) */
/* legal stuff above the buttons at the footer of the editor
.k-player .k-attribution {
  note: this just adds additional spacing between the text and the checkboxes for visual clarity */
     visibility: hidden;
#editpage-copywarn {
     margin-top: 1rem;
}
}


/* Move 'play' button of video player to bottom left corner */
/* override for page editor toolbar → help tab → table → th */
.PopUpMediaTransform a .play-btn-large {
.wikiEditor-ui-toolbar .page-table th {
     margin: 0;
     text-align: center;
     top: auto;
     color: var(--text-color);
    right: auto;
    bottom: 0;
    left: 0;
}
}


@media screen {
/* override for page editor toolbar → help tab → table → td */
    /* Gallery styles background changes are restricted to screen view.
.wikiEditor-ui-toolbar .page-table td {
In printing we should avoid applying backgrounds. */
    color: var(--text-color);
    /* 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,
/* override page editor toolbar → tabs → left section
do not apply to print mode */
  note: both these overrides are done just
    /*
  to make the help section a little larger and thus more readable */
  #siteSub {
.wikiEditor-ui-toolbar .booklet>.index,
  display: block;
  /* override page editor toolbar → tabs → right section */
  }
  .wikiEditor-ui-toolbar .booklet .pages {
  */
    height: 12rem;
}
}


/* Hide FlaggedRevs notice UI when there are no pending changes */
/* editor → toolbar → mode switch button → popup (that opens on click) */
.flaggedrevs_draft_synced,
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
  .flaggedrevs_stable_synced,
     background-color: var(--bg-color-light);
  /* "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 */
/* editor → toolbar → mode switch button → popup on click → inactive mode (span) */
span.comment {
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled {
     overflow-wrap: break-word;
     transition: background-color 100ms ease-in;
    color: var(--text-color);
}
}


#mw-page-base {
/* editor → toolbar → mode switch button → popup on click → inactive mode (span) hover */
    background: #1b1b1f;
.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);
     color: var(--text-color);
     border: #1b1b1f;
     background-color: var(--bg-color-light-x2);
    transition: background-color 100ms ease-out;
}
}


.mediawiki,
/* editor → toolbar → mode switch button → popup on click → inactive mode (a) hover */
.mw-page-container {
.wikiEditor-ui-toolbar
     background: #1b1b1f;
    .oo-ui-toolbar-popups
     color: var(--text-color);
     .oo-ui-widget-enabled
     border: #1b1b1f;
     .oo-ui-tool-link:hover {
    /* duplicate background, removing it */
     background-color: transparent;
}
}


.mw-body {
/* editor → toolbar → mode switch button → popup on click → selected mode (span) */
     background: #212126;
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled.oo-ui-tool-active,
    color: var(--text-color);
  /* editor → toolbar → mode switch button → popup on click → selected mode (a) */
    border: black;
  .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);
}
}


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


#mw-content-container,
/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → title */
#mw-header-container,
.wikiEditor-ui-toolbar
#mw-header-nav-hack,
    .oo-ui-toolbar-popups
#mw-content-wrapper,
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeVisual.oo-ui-tool-active
#mw-content,
    .oo-ui-tool-title {
#p-logo {
    background: #1b1b1f;
     color: var(--text-color);
     color: var(--text-color);
    border: #1b1b1f;
}
}


#mw-header-nav-hack {
/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → icon */
     background: #212126;
.wikiEditor-ui-toolbar
     color: var(--text-color);
    .oo-ui-toolbar-popups
     border: #212126;
     .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%);
}
}


.mw-code {
/* editor → toolbar → mode switch button → popup on click → source editing mode active → title */
     background: #212126;
.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);
     color: var(--text-color);
}
}


footer,
/* editor → toolbar → mode switch button → popup on click → source editing mode active → icon */
#footer-info-lastmod,
.wikiEditor-ui-toolbar
#footer-info-copyright {
    .oo-ui-toolbar-popups
     color: var(--text-color);
     .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
}
    .oo-ui-iconElement-icon {
 
    /* cosmoGreen "source editing" mode icon */
p,
    background-image: linear-gradient(transparent, transparent),
h1,
        var(--se-mode-icon);
h2,
    /* disable the hue rotating filter since the correct icon is provided */
h3,
    filter: none;
h4,
h5,
h6,
li {
    color: var(--text-color);
}
}


a,
/* #region borders */
.vector-menu-portal .vector-menu-content li a,
 
.vector-menu-tabs li a,
/* editor toolbar and content combined */
body.skin--responsive #p-cactions li a {
.wikiEditor-ui .wikiEditor-ui-view,
     color: lightblue;
  /* 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);
}
}


a:visited,
/* editor toolbar groups of buttons, except the last one */
.vector-menu-portal .vector-menu-content li a:visited,
.wikiEditor-ui-toolbar .group:not(:last-child) {
.vector-menu-tabs li a:visited,
    border-right: 1px solid var(--border-color-light);
body.skin--responsive #p-cactions li a:visited {
    color: #007fff;
}
}


body.skin--responsive #p-cactions li a {
/* editor toolbar last groups of buttons */
     background: var(--bg-color-light-x2);
.wikiEditor-ui-toolbar .group:last-child {
     border-left: 1px solid var(--border-color-light);
}
}


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


a.extiw:visited,
/* editor toolbar */
a.external:visited,
.wikiEditor-ui .wikiEditor-ui-top {
.mw-parser-output a.extiw:visited,
    border-bottom: 1px solid var(--border-color-light);
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
    color: #8a2be2;
}
}


.vector-menu-tabs .selected a,
/* editor toolbar → mode switch button
.vector-menu-tabs .selected a:visited,
  it has extra border on the bottom */
body.skin--responsive #p-cactions li.selected a {
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
     color: var(--text-color);
     border-bottom: none;
    font-weight: bold;
}
}


body.skin--responsive #p-cactions li.selected a {
/* ================================================ */
     background: var(--bg-color-light-x2);
/* #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;
}
}


.vector-menu-tabs li {
/* Modified version of https://github.com/richleland/pygments-css/blob/master/monokai.css */
     background: #212126;
 
/* 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;
}
}


.tools-inline li a {
/* Code block → line numbers  */
     filter: invert(100%);
.mw-highlight .linenos {
     color: rgb(165, 155, 142);
}
}


.tools-inline span {
/* Highlighted Lines */
     filter: invert(100%);
.mw-highlight .hll {
    color: var(--text-color);
     background-color: var(--action-color);
}
}


#personal h2,
.mw-highlight {
#site-tools h2,
    background: #272822;
#site-navigation h2,
     color: #f8f8f2;
#searchButton {
     filter: invert(100%);
}
}


#personal h2 span {
/* Error */
     filter: invert(100%);
.mw-highlight .err {
     color: var(--synt-high--color-err);
    background-color: hsl(328, 40%, 16%);
}
}


#mw-site-navigation .sidebar-chunk,
/* Keyword */
#mw-site-navigation .sidebar-chunk,
.mw-highlight .k {
#mw-related-navigation .sidebar-chunk,
     color: var(--synt-high--color-keyword);
body.skin--responsive .portlet,
body.skin--responsive .pBody {
    background: #212126;
     color: var(--text-color);
    border: #1b1b1f;
}
}


#p-logo-text a {
/* Literal */
     color: var(--text-color);
.mw-highlight .l {
     color: var(--synt-high--color-literal);
}
}


#ca-nstab-mediawiki.a {
/* Name */
     color: var(--text-color);
.mw-highlight .n {
     color: #f8f8f2;
}
}


#mw-changeslist-links {
/* Operator */
    background: #212126;
.mw-highlight .o {
     color: var(--text-color);
     color: var(--synt-high--color-operator);
}
}


#simpleSearch {
/* Punctuation */
     background: var(--bg-color-light-x2);
.mw-highlight .p {
    border: 1px solid var(--bg-color-light-x4);
     color: var(--synt-high--color-punctuation);
    color: var(--text-color);
}
}


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


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


.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,
/* Comment.Multiline */
#personal .dropdown {
.mw-highlight .cm {
     background: var(--bg-color-light-x2);
     color: var(--synt-high--color-comment);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


body.skin--responsive #p-cactions li.selected {
/* Comment.Preproc */
     border: var(--bg-color-light-x4);
.mw-highlight .cp {
     color: var(--synt-high--color-comment);
}
}


.vector-menu-tabs .selected {
/* Comment.PreprocFile */
     background: #1b1b1f;
.mw-highlight .cpf {
     color: var(--synt-high--color-comment);
}
}


#pagehistory li.selected {
/* Comment.Single */
     background: #1b4d3e;
.mw-highlight .c1 {
    font-weight: bold;
     color: var(--synt-high--color-comment);
}
}


div.mw-warning-with-logexcerpt,
/* Comment.Special */
div.mw-lag-warn-high,
.mw-highlight .cs {
div.mw-cascadeprotectedwarning,
    color: var(--synt-high--color-comment);
div#mw-protect-cascadeon,
div.titleblacklist-warning {
    background: #7c0a02;
    border: 1px solid #bb7070;
}
}


.wikitable {
/* Generic.Deleted */
    background: var(--bg-color-light-x3);
.mw-highlight .gd {
    border: 1px solid var(--bg-color-light-x4);
     color: #f92672;
     color: var(--text-color);
}
}


.toc {
/* Generic.Emph */
    background: var(--bg-color-light-x3);
.mw-highlight .ge {
     border: 1px solid var(--bg-color-light-x4);
     font-style: italic;
    color: var(--text-color);
}
}


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


.wikitable > tr > th,
/* Generic.Strong */
.wikitable > tr > td,
.mw-highlight .gs {
.wikitable > * > tr > th,
     font-weight: bold;
.wikitable > * > tr > td {
     border: 1px solid var(--bg-color-light-x4);
}
}


.wikitable > * > tr > th {
/* Generic.Subheading */
    background: var(--bg-color-light-x2);
.mw-highlight .gu {
    border: 1px solid var(--bg-color-light-x4);
     color: #75715e;
     color: var(--text-color);
}
}


.quickbox {
/* Keyword.Constant */
     border: 1px solid #303038;
.mw-highlight .kc {
    background: var(--bg-color-light-x2);
     color: var(--synt-high--color-keyword);
}
}


.quickboxhead {
/* Keyword.Declaration */
    border-bottom: 1px solid #303038;
.mw-highlight .kd {
     background: #1b1b1f;
     color: var(--synt-high--color-keyword);
    text-align: center;
}
}


.thumbinner,
/* Keyword.Namespace */
.thumbinner .thumbimage {
.mw-highlight .kn {
     background: var(--bg-color-light-x2);
     color: #f92672;
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


table.ombox tbody,
/* Keyword.Pseudo */
table.ombox {
.mw-highlight .kp {
     background: var(--bg-color-light-x2);
     color: var(--synt-high--color-keyword);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


table.ambox tbody,
/* Keyword.Reserved */
table.ambox {
.mw-highlight .kr {
     background: var(--bg-color-light-x2);
     color: var(--synt-high--color-keyword);
    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,
/* Keyword.Type */
table.imbox {
.mw-highlight .kt {
     background: var(--bg-color-light-x2);
     color: var(--synt-high--color-keyword);
    border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


/* OOUI PAIN */
/* Literal.Date */
/* Recent Changes */
.mw-highlight .ld {
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
     color: var(--synt-high--color-date);
    .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 */
/* Literal.Number */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
.mw-highlight .m {
     background: var(--bg-color-light-x2);
     color: var(--synt-high--color-literal);
    border: 1px solid #303038;
    color: var(--text-color);
}
}


.oo-ui-popupWidget-popup {
/* Literal.String */
     background: var(--bg-color-light-x3);
.mw-highlight .s {
    border: 1px solid var(--bg-color-light-x4);
     color: var(--synt-high--color-string);
    color: var(--text-color);
}
}


/* SITE SPECIFIC */
/* Name.Attribute */
/*
.mw-highlight .na {
  .chemrecipeimg img {
    color: var(--synt-high--color-name);
  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 {
/* Name.Builtin */
     color: #00ff00;
.mw-highlight .nb {
    font-weight: bold;
     color: #f8f8f2;
}
}


.negative {
/* Name.Class */
     color: #ff0000;
.mw-highlight .nc {
    font-weight: bold;
     color: var(--synt-high--color-name);
}
}


.anglerect {
/* Name.Constant */
    --angle-rect-clip-size: 16px;
.mw-highlight .no {
     clip-path: polygon(
     color: var(--synt-high--color-keyword);
        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 */
/* Name.Decorator */
.flex {
.mw-highlight .nd {
     display: flex;
     color: var(--synt-high--color-name);
}
}


@media screen and (min-width: 851px) {
/* Name.Entity */
     .mobile {
.mw-highlight .ni {
        display: none;
     color: #f8f8f2;
    }
}
}


@media screen and (max-width: 850px) {
/* Name.Exception */
     .nomobile {
.mw-highlight .ne {
        display: none;
     color: var(--synt-high--color-name);
    }
}
}


img {
/* Name.Function */
    -ms-interpolation-mode: nearest-neighbor;
.mw-highlight .nf {
     image-rendering: -moz-crisp-edges;
     color: var(--synt-high--color-name);
    image-rendering: -o-crisp-edges;
}
    image-rendering: -webkit-optimize-contrast;
 
    image-rendering: crisp-edges;
/* Name.Label */
     image-rendering: pixelated;
.mw-highlight .nl {
     color: #f8f8f2;
}
}


/* allows enabling smooth rendering for images by adding this class to them whenever needed */
/* Name.Namespace */
img.smooth-render {
.mw-highlight .nn {
     image-rendering: auto;
     color: #f8f8f2;
}
}


.layered {
/* Name.Other */
     position: absolute;
.mw-highlight .nx {
    top: 0;
     color: var(--synt-high--color-name);
    left: 0;
}
}


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


/* replace pencil icon in "edit section" buttons with a version that's visible */
/* Name.Tag */
.mw-editsection {
.mw-highlight .nt {
     background-image: url(/w/images/a/a9/Pencil-lightblue.svg);
     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: hsl(207,90%,83%);
    /* 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: hsl(207,90%,83%);
    /* 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) !important;
    box-shadow: inset 0 0 1px 1px var(--text-color-grayed-450);
}
/* 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;
}
/* #endregion */
/* #endregion */
/* ============ */
/* #endregion */
/* ============ */
/* ============ */
/* #region =🖌️= VISUAL EDITOR =🖌️= */
/* ============ */
/* visual editor (content) → template [puzzle] icon
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle {
    background-image: linear-gradient(transparent, transparent),
        var(--icon-template-puzzle-white);
    opacity: 1;
}
/* template name
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle + .oo-ui-labelElement-label {
    color: white;
}
/* visual editor → editor loading → placeholder (?) navbar container */
.ve-init-mw-desktopArticleTarget-targetContainer
    .ve-init-mw-desktopArticleTarget-toolbarPlaceholder-open {
    /* disables progress bar cropping when moving it down */
    overflow: visible;
}
/* visual editor → editor loading → progress bar (bg) */
.ve-init-mw-progressBarWidget {
    background-color: var(--bg-color-light);
}
/* visual editor → editor loading → progress bar (loading stripe) */
.ve-init-mw-progressBarWidget .ve-init-mw-progressBarWidget-bar {
    background-color: var(--action-color);
}
/* visual editor → toolbar (left part)  */
.ve-init-target-visual > .oo-ui-toolbar > .oo-ui-toolbar-bar {
    background-color: var(--bg-color-light-x3);
    color: var(--text-color);
}
/* visual editor → toolbar → icons */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-iconElement-icon,
/* visual editor → toolbar → arrow down icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-indicator-down {
    filter: invert(100%);
}
/* visual editor → toolbar (whole, one level up from the left one) */
.ve-init-target-visual > .oo-ui-toolbar {
    /* reset */
    margin: 0;
    /* get the same offset that the search box has */
    margin-right: -0.95rem;
    /* get the same offset that the "Page" link has */
    margin-left: -1.25rem;
}
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
    /* disables selecting of the button text
    same behavior is already present in an available button */
    user-select: none;
    /* just for the button bg */
    transition: background-color 0.1s ease-out;
    background-color: var(--bg-color-light-x5);
}
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) → title */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title {
    color: var(--text-color-grayed-500);
}
/* visual editor → toolbar (right part) → «save changes» button (available) */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color);
}
/* visual editor → toolbar (right part) → «save changes» button (available) hover */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton:hover {
    background-color: var(--action-color-light-x2);
}
/* visual editor → toolbar (right part) → «save changes» button (available) active */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled.oo-ui-tool-active
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color-dark-x2);
}
/* visual editor → toolbar (right part) → «save changes» button (available) → label */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton
    .oo-ui-tool-title {
    color: var(--text-color);
}
/* visual editor → toolbar → dropdown button (div) hover */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-popupToolGroup-handle:hover,
/* visual editor → toolbar → button (a) hover (except the «save changes» button */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-tool-link:not(.ve-ui-toolbar-saveButton):hover {
    background-color: var(--bg-color-light-x2);
    /* more "snappier" transition */
    transition: background-color 50ms ease-out;
}
/* visual editor → toolbar → dropdown button (span) active → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-iconElement-icon,
/* visual editor → toolbar → button (span) active (except the «save changes» button → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-iconElement-icon {
    /* rotate from the default dark blue to the the bright, saturated version of cosmoBlue.
    this results in this color: hsl(198, 93%, 49%) */
    filter: brightness(150%) saturate(150%) contrast(180%);
}
/* visual editor → toolbar → tabber icon (only in the «insert» menu afaik) → icon */
.ve-init-target-visual
    > .oo-ui-toolbar
    > .oo-ui-toolbar-bar
    .oo-ui-tool-active
    .oo-ui-icon-tabber {
    /* this icon don't have a default dark blue color when it's active, instead they have just black (which is inverted to white in this theme), so we can't rotate to the proper color. instead here's the same icon but in cosmoBlueBright color. */
    filter: none;
    background-image: var(--icon-tabber-black);
}
/* visual editor → toolbar → dropdown button (span 1 level up) active */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle,
/* visual editor → toolbar → button active (a) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-tool-link {
    background-color: var(--bg-color-light-x3);
}
/* visual editor → toolbar → dropdown button (span) active → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-labelElement-label,
/* visual editor → toolbar → button (span) active (except the «save changes» button → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-labelElement-label,
/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-widget.oo-ui-tool-active .oo-ui-tool-title {
    color: var(--action-color-light-x2);
}
/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
    /* remove white bg */
    background: unset;
}
/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget {
    /* set to proper color instead of white */
    border-color: var(--border-color-light);
}
/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools {
    background-color: var(--bg-color-light);
}
/* visual editor → tool popups → button (span) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool {
    background-color: var(--bg-color-light);
}
/* visual editor → tool popups → button (span) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool:hover {
    background-color: var(--bg-color-light-x2);
}
/* visual editor → tool popups → button (span) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active {
    background-color: var(--bg-color-light-x3);
}
/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-tool-title {
    /* more responsive transition */
    transition: color 0.1s ease-out;
}
/* visual editor → tool popups → button (span) active → icon */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-iconElement-icon {
}
/* visual editor → tool popups → button (a) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    color: var(--text-color);
}
/* visual editor → tool popups → button (a) → keybind label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-accel {
    /* gets hidden on active, since it the same color.
    can we call it a feature? :D */
    color: var(--bg-color-light-x6);
}
/* visual editor → tool popups → button (a) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link:hover,
/* visual editor → tool popups → button (a) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    /* remove the bg color since it's already set in the button.
    this prevents the flicker. */
    background-color: unset;
}
/* visual editor → tool popups → editor mode switch popup → «source editor» button active → label */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-tool-title {
    color: var(--green-color);
}
/* visual editor → tool popups → editor mode switch popup → «source editor» button active → icon */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-iconElement-icon {
    background-image: var(--se-mode-icon);
}
/* ============ */
/* #region STYLES FROM THE SOURCE */
/* some of the styles below were sourced from https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/c295a731ec5ef261e4e5659c30f14b0b1b3e11d2/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css */
/* ============ */
@keyframes ve-modal-opening-backdrop {
    from {
        backdrop-filter: blur(0px);
        background-color: transparent;
    }
    to {
        backdrop-filter: blur(3px);
        background-color: color-mix(in srgb, var(--bg-color) 25%, transparent);
    }
}
/* visual editor → modal container */
.oo-ui-windowManager-modal > .oo-ui-dialog {
    background-color: transparent;
    animation: ve-modal-opening-backdrop 400ms ease-in-out forwards;
}
/* visual editor → modal */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal head */
.oo-ui-windowManager-modal .oo-ui-window-head {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    /* lighter than the usual border color - for visibility */
    outline-color: var(--bg-color-light-x4);
}
/* visual editor → modal head → «apply changes» button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-widget-disabled .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-disabled .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color-inactive);
    border-color: var(--bg-color-light-x3);
} 
/* visual editor → modal head → «apply changes» button (a) */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled .oo-ui-buttonElement-button,
/* visual editor → modal message dialog → action button (a) */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-buttonElement-button,
/* visual editor → save changes modal → «review changes» button (a) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color);
    border-color: var(--bg-color-light-x4);
    transition: background-color 100ms ease-in;
} 
/* visual editor → modal → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled
.oo-ui-buttonElement-button:hover,
/* visual editor → modal head → «apply changes» button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget
.oo-ui-buttonElement-button:hover,
/* visual editor → modal → modal message dialog → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget
.oo-ui-buttonElement-button:hover,
/* visual editor → save changes modal → «review changes» button (a) hover */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget
.oo-ui-buttonElement-button:hover {
    color: var(--text-color);
    background-color: var(--action-color-light-x2);
    border-color: var(--bg-color-light-x4);
    transition: background-color 100ms ease-out;
} 
/* visual editor → modal → action button (a) active */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled
.oo-ui-buttonElement-button:active,
/* visual editor → modal → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled.oo-ui-buttonElement-pressed
.oo-ui-buttonElement-button:hover,
/* visual editor → modal head → «apply changes» button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget
.oo-ui-buttonElement-button:active,
/* visual editor → modal head → «apply changes» button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-pressed .oo-ui-buttonElement-button:hover,
/* visual editor → modal → modal message dialog → action button (a) pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed 
.oo-ui-buttonElement-button,
/* visual editor → modal → modal message dialog → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed
.oo-ui-buttonElement-button:hover,
/* visual editor → save changes modal → «review changes» button (a) active */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget
.oo-ui-buttonElement-button:active {
    color: var(--text-color);
    background-color: var(--action-color-dark-x2);
    border-color: var(--bg-color-light-x4);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal head → close button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:hover,
/* visual editor → modal head → close button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:active {
    background-color: var(--bg-color-light-x2);
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal head → close button (a) → icon */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}
/* visual editor → modal footer (which is empty for template modal) */
.oo-ui-processDialog-content .oo-ui-window-foot {
    /* override default */
    outline-color: transparent;
}
/* visual editor → modal → big header (e.g. for template name) */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header,
/* visual editor → modal → medium header (e.g. template param header) */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info {
    color: var(--text-colorStrong);
}
/* visual editor → modal → medium header (e.g. template param header) → "undocumented param" label */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info .ve-ui-mwParameterPage-undocumentedLabel {
    color: var(--bg-color-light-x4);
}
/* visual editor → modal → big header (e.g. for template name) → puzzle icon  */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header .oo-ui-icon-puzzle {
    filter: invert(92%);
}
/* visual editor → modal → big header (e.g. for template name) → deprecated icon  */
.oo-ui-windowManager-modal .oo-ui-indicatorElement[title="Deprecated field"] {
    /* default is .5 */
    opacity: .8;
    /* same icon, "warning-color-border" color */
    background-image:
    linear-gradient(transparent,transparent),
    var(--icon-popup-notice-warn-cosmoGreen);
}
/* visual editor → modal → url icon (e.g. for template URL params) */
.oo-ui-windowManager-modal .oo-ui-icon-linkExternal {
    /* default is 0.67 */
    opacity: .8;
    /* same icon, but in "cosmoGreen" color */
    background-image:
    linear-gradient(transparent,transparent),
    var(--icon-external-link-cosmoGreen);
}
/* visual editor → modal → param description block (like a template param) → entries */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > p {
    color: var(--text-color);
}
/* visual editor → modal (template) → template search block → description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePlaceholderPage .oo-ui-inline-help,
/* visual editor → modal (template) → template description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description,
/* visual editor → modal → param description block (like a template param) → "deprecated" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-deprecated,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-required,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-example,
/* visual editor → modal → param description block (like a template param) → "default" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-default,
/* visual editor → modal → param search results → no results text */
.ve-ui-mwTransclusionOutlineTemplateWidget-no-match {
    color: var(--text-color-grayed-500);
}
/* visual editor → modal (template) → template description hr */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description hr {
    background-color: var(--bg-color-light-x4);
}
/* visual editor → modal → param input (type=text) */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
    color: var(--text-color);
    background-color: var(--bg-color-dark);
    border: 1px solid var(--bg-color-light-x2);
} 
/* visual editor → modal → param input (type=text) placeholder */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
    color: var(--bg-color-light-x4);
} 
/* visual editor → modal → param input (type=text) hover */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input:hover,
/* visual editor → modal → param input when a param input dropdown button is hovered  */
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal → param input (type=text) (invalid state) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
    border-color: var(--color-red);
}
/* visual editor → modal → param input (type=text) in invalid state hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:hover {
    border-color: var(--color-red);
}
/* visual editor → modal → required indicator (for params only I guess?) */
.oo-ui-windowManager-modal .oo-ui-indicator-required {
    /* same icon, "warning-color-border" color */
    background-image:
        linear-gradient(transparent,transparent),
        var(--icon-asterisk-yellow);
}
/* visual editor → modal → param input dropdown button (for suggested values) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color);
    border-color: var(--bg-color-light-x2);
    border-left: none;
}
/* visual editor → modal → param input dropdown button (for suggested values) hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a:hover,
/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color-light);
    /* default override */
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    /* disable default transition, so the color will change instantly, because dropdown appears instantly too */
    transition: background-color 0s;
}
/* visual editor → modal → param input dropdown button (for suggested values) → icon */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-dropdownButton a .oo-ui-indicatorElement-indicator {
    filter: invert(100%);
}
/* visual editor → modal → "add undocumented paramter" block → button hover  */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light);
}
/* visual editor → modal → "add undocumented paramter" block → button → icon */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}
/* visual editor → modal → "add undocumented paramter" block → button → label */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-labelElement-label {
    color: var(--text-color);
}
/* visual editor → modal → "add undocumented paramter" block → description */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-inline-help  {
    color: var(--bg-color-light-x4);
}
/* visual editor → modal → modal message dialog → action button (a) focus */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button:focus,
/* visual editor → save changes modal → «review changes» button (a) focus */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonElement-button:focus {
    border-color: var(--bg-color-light-x4);
}
/* visual editor → modal → modal message dialog → "destructive" action button */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red);
    transition: background-color 100ms ease-in;
}
/* visual editor → modal → modal message dialog → "destructive" action button hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:hover  {
    background-color: var(--color-red-light);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal → modal message dialog → "destructive" action button pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-buttonElement-pressed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red-dark);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal → left menu */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu {
    border-color: var(--bg-color-light-x2);
}
/* visual editor → modal → left menu → search block */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
    /* override default */
background-color: var(--bg-color);
}
/* visual editor → modal → left menu → search block → query input → placeholder */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky input::placeholder {
    color: var(--bg-color-light-x4);
}
/* visual editor → modal → search icon */
.oo-ui-windowManager-modal .oo-ui-icon-search {
    filter: invert(100%);
}
/* visual editor → modal → left menu → search block → "hide unused" (params) button → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label {
    color: var(--action-color-light-x2);
    transition: color 100ms ease-in;
}
/* visual editor → modal → left menu → search block → "hide unused" (params) button hover → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label:hover {
    color: var(--action-color-light-x3);
    transition: color 100ms ease-out;
}
/* visual editor → modal → left menu → params container → item */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * {
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 100ms ease-in;
}
/* visual editor → modal → left menu → params container → item checkbox disabled checked → bg */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * input[type=checkbox][disabled] + span {
    background-color: var(--bg-color-light-x3);
    border-color: var(--bg-color-light-x4);
}
/* visual editor → modal → left menu → params container → item hover */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > *:hover {
    color: var(--text-color);
    background-color: var(--bg-color-light);
    transition: background-color 75ms ease-out;
}
/* visual editor → modal → left menu → params container → item label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * .oo-ui-labelElement-label {
    color: var(--text-color);
}
/* visual editor → modal → popup windows and such */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable {
    background-color: var(--bg-color-light);
    border-color: var(--bg-color-light-x3);
}
/* visual editor → modal → popup windows and such → item */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}
/* visual editor → modal → popup windows and such → item hover */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled:hover {
    background-color: var(--bg-color-light-x2);
}
/* visual editor → modal → popup windows and such → item pressed (mouse down) */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-pressed,
/* visual editor → modal → popup windows and such → item selected */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-selected{
    color: var(--text-colorStrong);
    background-color: var(--bg-color-light-x3);
    transition:
        color 100ms ease-out,
        text-shadow 100ms ease-out,
        background-color 100ms ease-out;
}
/* visual editor → modal → help button */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement  > .oo-ui-buttonElement-button {
    background-color: var(--text-color);
    transition: background-color 100ms ease-out;
}
/* visual editor → modal → help button active */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    transition: background-color 100ms ease-out;
}
/** visual editor → modal → something loading "stripes" */
.oo-ui-windowManager-modal .oo-ui-pendingElement-pending {
    --strip-col: var(--bg-color-light-x2);
    background-image: linear-gradient(
        135deg,
        var(--strip-col) 25%,
        transparent 25%,
        transparent 50%,
        var(--strip-col) 50%,
        var(--strip-col) 75%,
        transparent 75%,
        transparent
    );
}
/** visual editor → modal → template search results block → item → description */
.oo-ui-windowManager-modal .mw-widget-titleWidget-menu .mw-widget-titleOptionWidget-description {
    color: var(--text-color);
    /* disable text shadow enabled for selected elements */
    text-shadow: none;
}
/** visual editor → modal message dialog → */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating .oo-ui-messageDialog .oo-ui-window-frame {
    border-color: var(--bg-color-light-x3);
}
/** visual editor → modal message dialog → title */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-messageDialog-title {
    color: var(--action-color-light-x2);
    font-weight: bold;
}
/** visual editor → modal message dialog → message */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-labelElement-label {
    color: var(--text-color);
}
/* visual editor → save changes modal → summary */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-summary {
    background-color: inherit;
}
/* visual editor → save changes modal → options (where the checkboxes are) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options {
    background-color: inherit;
    border: none;
}
/* visual editor → save changes modal → options → checkboxes container */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options .ve-ui-mwSaveDialog-checkboxes {
    padding-left: 0;
}
/* visual editor → save changes modal → copyright warning */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog #editpage-copywarn {
    color: var(--bg-color-light-x3);
}
/* visual editor → popups  */
.oo-ui-popupWidget-popup {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color);
}
/* table editor → context menu → item */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem .oo-ui-buttonElement-button {
    color: var(--text-color);
}
/* table editor → context menu → item :hover */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem .oo-ui-buttonElement-button:hover {
    color: var(--text-color);
    background-color: color-mix(in srgb, var(--bg-color-light-x7) 25%, transparent);
}
/* table editor → context menu → item (disabled) */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem:has(> *.oo-ui-widget-disabled),
/* table editor → context menu → item (disabled) */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem:has(> *.oo-ui-widget-disabled) .oo-ui-buttonElement-button {
    background-color: var(--bg-color);
    color: var(--text-color-grayed-500);
}
.ve-ui-tableLineContext-menu .ve-ui-contextItem + .ve-ui-contextItem {
    border-top-color: var(--border-color-light-x2);
}
/* table editor → context menu → item → icon */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem .oo-ui-buttonElement-button .oo-ui-iconElement-icon:not(.oo-ui-icon-trash) {
    filter: invert(100%);
}
/* #endregion */
/* ============ */
/* #region =🖌️= VISUAL EDITOR BORDERS =🖌️= */
/* ============ */
/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools,
/* visual editor → toolbar → paragraph button (I think?) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-menuToolGroup,
/* visual editor → toolbar → dropdown button (span) hover */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-handle:hover {
    border-color: var(--border-color-light);
}
/* #endregion */
/* #endregion */
/* ============ */
/* #region LUA */
/* ============ */
:root {
    /* ldp = Lua Debug Panel */
    --ldp-elements-padding: .25em;
    --ldp-control-elements-padding: .5em;
}
/* lua module debug panel */
#mw-scribunto-console .mw-scribunto-console-fieldset {
    background: var(--bg-color-light-x2);
    color: var(--text-color);
    padding: .5em 0;
    border: 1px solid var(--action-color);
}
/* lua module debug panel → header */
.mw-scribunto-console-fieldset > legend {
    margin-left: 1em;
}
/* lua module debug panel → output → output elements */
#mw-scribunto-output > * {
    padding: 0 var(--ldp-elements-padding);
}
/* lua module debug panel → output → printed input */
.mw-scribunto-input {
    font-family: monospace;
font-weight: normal;
    color: var(--code-color-text);
    background-color: transparent;
    border-color: var(--code-color-border);
    margin: .5em 0;
    /* better visibility */
    font-size: 1.1em;
}
/* lua module debug panel → input field container element */
div:has(#mw-scribunto-input) {
    padding: var(--ldp-control-elements-padding);
}
/* lua module debug panel → input field */
#mw-scribunto-input {
    background-color: var(--bg-color-light-x4);
}
/* lua module debug panel → "Clear" button container */
#mw-scribunto-console div:has(input[type=button][value=Clear]) {
    padding: var(--ldp-control-elements-padding);
}
/* lua module debug panel → output → result of the execution */
#mw-scribunto-output .mw-scribunto-normalOutput,
/* lua module debug panel → output → logs from the code */
.mw-scribunto-print {
    font-family: monospace;
    color: var(--code-color-text);
    background: var(--code-color-bg);
    padding-top: .5em;
    padding-bottom: .5em;
    outline: .1em solid var(--green-color-dark);
}
/* lua module debug panel → output → logs from the code */
.mw-scribunto-print {
    outline: none;
}
/* lua module debug panel → error block */
.mw-scribunto-error {
    color: var(--text-color);
    background-color: var(--danger-color-dark-x2);
    border-color: var(--danger-color-border);
}
/* .mw-scribunto-propList {
    color: #008000;
    background: #fff;
} */
/* lua module debug panel → message block */
.mw-scribunto-message {
    color: var(--text-color);
    border-color: var(--border-color-light);
    background-color: var(--bg-color-light-x4);
}
/* .mw-scribunto-tabcomplete {
    color: #800080;
    background: #fff;
} */
.mw-scribunto-clear {
    color: var(--text-color);
    background-color: var(--action-color);
    border-bottom: 3px dashed var(--action-color-light-x2);
    border-top: 3px dashed var(--action-color-light-x2);
}
/* #endregion */
/* ============ */
/* #region Json Pages */
/* ============ */
.mw-json {
    border-color: var(--border-color-light-x2);
}
.mw-json tr {
    background-color: unset;
}
.mw-json th,
.mw-json td {
    font-family: monospace;
    border-color: var(--code-color-border);
    color: var(--code-color-text);
}
.mw-json th {
    background-color: var(--code-color-bg-light);
    border: 1px solid var(--border-color-light);
}
.mw-json-value,
.mw-json-single-value,
.mw-json td {
    background-color: var(--code-color-bg);
}
.mw-json-single-value {
    background-color: unset
}
.mw-json-empty {
    background-color: unset;
}
/* #endregion */
/* ============ */
/* #region DRUID Infoboxes */
/* ============ */
/* DRUID Infobox. */
/* source: https://support.wiki.gg/wiki/MediaWiki:Gadget-druidInfoboxes.css */
/* license: CC BY-SA 4.0 */
/****************************************/
/*******  Start DRUID CSS rules *********/
/****************************************/
.druid-container {
    /* These variables are designed to inherit from your wiki's color variables.
      If your wiki uses a different naming scheme, change the inner names to match yours.
      If your wiki doesn't use color variables you should consider doing so,
      otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
    */
    --druid-background-color: var(--wiki-content-background-color, #ffffff);
   
    --druid-secondary-background-color: var(--wiki-accent-color, #36c);
    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
   
    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
   
    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
   
    --druid-link-color: var(--wiki-content-link-color, #0645ad);
    --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
}
/* ---------------------------------  */
/*    Safe to edit ABOVE this line    */
/* ---------------------------------  */
/* ---------------------------------  */
/*    Do not edit below this line    */
/* ---------------------------------  */
.druid-container {
    border: 4px solid var(--druid-border-color);
    border-radius: 3px;
    background: var(--druid-background-color);
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
width:100%;
max-width:22em;
    box-sizing: border-box;
    border-collapse: collapse;
}
@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}
.druid-main-images-file,
.druid-main-image {
    text-align:center;
}
.druid-infobox .druid-title,
.druid-infobox .druid-section {
    background:var(--druid-secondary-background-color); /* fallback */
    background:color-mix(in srgb, var(--druid-secondary-background-color) 75%, transparent);
    color:var(--druid-secondary-background-label-color);
    text-align:center;
    font-size:1.5em;
    padding:1px;
}
.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
}
.druid-infobox  .druid-collapsible .druid-section {
flex-grow: 1;
}
.druid-label {
    font-weight:bold;
    text-align: right;
box-sizing: border-box;
}
.druid-row > .druid-label {
    width: 48%;
    flex-shrink: 0;
}
.druid-row > .druid-label,
.druid-row > .druid-data {
padding-inline: 0.3em;
}
.druid-main-image,
.druid-main-images {
    padding:5px;
}
.druid-main-image img,
.druid-main-images img {
    max-width:100%;
    height:auto;
}
.druid-main-images-labels {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}
.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}
.druid-main-images-label.focused {
    background:var(--druid-link-color);
    color:var(--druid-link-label-color);
}
.druid-main-images-label:not(.focused):hover {
    background:var(--druid-link-color); /* fallback */
    background:color-mix(in srgb, var(--druid-link-color) 25%, transparent);
}
.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}
.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display:none;
}
.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}
.druid-grid {
    display:grid;
    gap: 0.3em;
padding: 0.35em;
}
.druid-grid-item {
    background:var(--druid-tertiary-background-color);
    padding:0.25em;
    border:1px solid var(--druid-border-color); /* fallback */
    border:1px solid color-mix(in srgb, var(--druid-border-color) 50%, transparent);
    border-radius: 2px;
}
.druid-grid-item .druid-label,
.druid-grid-item .druid-data {
text-align: center;
}
.druid-data-wide {
width:100%;
}
.druid-section-container > .druid-collapsible {
display: flex;
justify-content: space-between;
align-items: center;
}
.druid-collapsed {
    display:none!important;
}
.druid-collapsible {
    cursor:pointer;
    position:relative;
}
.druid-collapsible::after {
content: "";
display: block;
position: absolute;
right: 10px;
width: 20px;
height: 20px;
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E collapse %3C/title%3E%3Cpath d='M1 13.75l1.5 1.5 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z'/%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--druid-secondary-background-label-color);
}
.druid-collapsible-collapsed::after {
transform: rotate(180deg);
}
.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
  display: none;
}
/*****************************************
Div support
*****************************************/
div.druid-row {
    display:flex;
    margin-block: 1px;
}
div.druid-row + div.druid-row {
margin-top: 0;
}
div.druid-row > .druid-label {
background: var(--druid-tertiary-background-color);
}
.druid-infobox .druid-title {
  font-weight: 700;
}
.druid-infobox #toc {
    display:none;
}
/********
Custom display classes
*********/
div.druid-stacked.druid-row,
.druid-stacked div.druid-row {
    flex-direction: column;
}
.druid-stacked.druid-row > .druid-label,
.druid-stacked .druid-row > .druid-label {
    text-align: left;
    width: 100%;
    flex-basis:unset;
}
.druid-stacked.druid-row > .druid-data,
.druid-stacked .druid-row > .druid-data {
    padding-left: .75em;
}
/* ---------------------------------  */
/*    Do not edit above this line    */
/* ---------------------------------  */
/* ---------------------------------  */
/* Local overrides go below this line */
/* ---------------------------------  */
.druid-infobox .druid-title {
    --clip: 0.6em;
    clip-path: polygon( 0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)) );
    margin: 3px;
}
/* labels */
.druid-infobox .druid-row > .druid-label {
    width: 14ch;
}
/* values */
.druid-infobox .druid-data {
    /* break words that are too long */
    word-break: break-word;
}
/****************************************/
/*******  End DRUID CSS rules  *********/
/****************************************/
/* #endregion */
/* ============ */
/* #region RANGER Navbox */
/* ============ */
/* RANGER Navbox. */
/* source: https://support.wiki.gg/wiki/RANGER_navboxes */
/* license: CC BY-SA 4.0 */
/** as of Module:navbox version 1.2.2 **/
/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}
/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.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;
}
/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
/* "space, Middle Dot, space"
We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
/* content: "\20\00B7\20"; font-weight: bold; */
    /* "space &nbsp; • &nbsp; space"
      There may (and likely) be an extra whitespace between <li>s,
      therefore we have to use a space character as last character of this sequence.
      By this way, the last space and the next whitespce will collapse as a single space,
      to make the whitespace on both sides of the middle dot the same width.
    */
content: "\20\A0\2022\A0\20";
font-weight: inherit;
}
/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
content: "\20(";
font-weight: inherit;
}
.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
content: ")";
font-weight: inherit;
}
/* 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) ".\20";
}
/* Progressive enhancement:
* try to make the dot always follow the list item in same line
*/
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
display: inline-block;
}
/********************************************
* End semantically-correct horizontal lists *
*********************************************/
/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
  --navbox-background: var(--wiki-content-background-color--secondary); /* for entire navbox */
  --navbox-margin: 0.5em auto;
  --navbox-padding: 4px;
  --navbox-gap: 3px; /* when using zero-value, it must be 0px */
  --navbox-outer-border-color: var(--wiki-content-border-color--accent);
  --navbox-outer-border-width: 0;
  --navbox-outer-border-style: solid;
  --navbox-outer-border-radius: 0px;
  --navbox-font-size: calc(1em - 2px);
  --navbox-title-color: var(--wiki-accent-label-color);
  --navbox-title-font-size: calc(125%);
  --navbox-title-background: var(--wiki-accent-color);
  --navbox-title-icon-color: var(--wiki-accent-label-color);
  --navbox-title-link-color: var(--navbox-title-color);
  --navbox-title-link-color--visited: var(--navbox-title-link-color);
  --navbox-title-link-color--hover: var(--wiki-accent-link-color);
  --navbox-title-redlink-color: var(--navbox-title-link-color);
  --navbox-title-link-decoration: underline solid;
  --navbox-title-redlink-decoration: underline wavy;
  --navbox-title-padding--y: 0.5em;
  --navbox-above-background: color-mix(in srgb, var(--wiki-content-text-color) 15%, transparent);
  --navbox-above-color: var(--wiki-content-text-color);
  --navbox-above-padding: var(--navbox-list-padding);
  --navbox-below-background: var(--navbox-above-background);
  --navbox-below-color: var(--navbox-above-color);
  --navbox-below-padding: var(--navbox-above-padding);
  --navbox-header-color: var(--navbox-title-color);
  --navbox-header-font-size: calc(110%);
  --navbox-header-background: var(--navbox-title-background);
  --navbox-header-icon-color: var(--navbox-title-icon-color);
  --navbox-header-link-color: var(--navbox-title-link-color);
  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
  --navbox-header-padding--y: 0.3em;
  --navbox-subheader-font-size: calc(100%);
  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
  --navbox-list-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 8%, transparent);
  --navbox-list-color: var(--wiki-content-text-color);
  --navbox-list-padding: 0.25em 0.5em;
  /* --navbox-group-* also apply to .ranger-subgroup */
  --navbox-group-text-align: left;
  --navbox-group-text-align--mobile: left; /* only for mobile view */
  --navbox-group-background: var(--bg-color-light-x3);
  --navbox-group-color: var(--wiki-content-text-color);
  --navbox-group-padding: var(--navbox-list-padding);
  --navbox-tree-line-color: color-mix(in srgb, var(--wiki-accent-color) 30%, transparent);
  --navbox-tree-line-width: 2px;
  --navbox-tree-indent: 1em;
  --navbox-tree-line-indent: 0.5em;
  --navbox-tree-line-spacing: var(--navbox-gap);
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile{
  /** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
  --navbox-pill-gap: 0.3em;
  --navbox-pill-padding: 0.25em 0.75em;
  --navbox-pill-border-radius: 3px;
  --navbox-pill-box-shadow: none;
  --navbox-pill-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
  --navbox-pill-background--hover: color-mix(in srgb, var(--wiki-content-text-color) 10%, transparent);
  /* remove list cell background */
  --navbox-list-background: none;
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
  --navbox-title-link-color: var(--wiki-accent-link-color);
  --navbox-title-link-decoration: none;
  --navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
  --navbox-padding: 0px;
  --navbox-outer-border-width: 0px;
}
/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
.ranger-navbox {
--navbox-above-background: var(--wiki-content-background-color--secondary);
--navbox-list-background: transparent;
--navbox-list-background--striped: var(--wiki-content-background-color--secondary);
--navbox-group-background: var(--wiki-content-background-color--secondary);
--navbox-tree-line-color: var(--wiki-content-background-color--secondary);
}
.ranger-navbox.pill,
.ranger-navbox.pill-mobile {
  --navbox-pill-background: var(--wiki-content-background-color--secondary);
  --navbox-list-background--striped: transparent;
}
}
/***************
* End fallback *
****************/
.ranger-navbox{
  border-color: var(--navbox-outer-border-color);
  border-style: var(--navbox-outer-border-style);
  border-width: var(--navbox-outer-border-width);
  border-radius: var(--navbox-outer-border-radius);
  padding: var(--navbox-padding);
  font-size: var(--navbox-font-size);
  margin: var(--navbox-margin);
  background: var(--navbox-background);
  line-height: 1.5;
  clear:both;
}
.ranger-navbox * {
  border: 0;
}
.ranger-navbox .center *{
  margin-left: unset;
  margin-right: unset;
}
.ranger-navbox,
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
  text-align: center;
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.ranger-navbox .ranger-title{
  color: var(--navbox-title-color);
  background: var(--navbox-title-background);
  font-size: var(--navbox-title-font-size);
  padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
  color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
  color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
    color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
  color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
  color: var(--navbox-header-color);
  background: var(--navbox-header-background);
  font-size: var(--navbox-header-font-size);
  padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
  font-size: var(--navbox-subheader-font-size);
  padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
  color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
  color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
    color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
  font-size: var(--navbox-title-font-size);
  position: absolute;
  left: var(--navbox-icon-offset--x);
  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
  display: block;
}
.ranger-navbox .ranger-meta .nv{
  --mask: var(--icon-metalinks);
  display: block;
  width: 0.84em; /* based on the icon graph */
  height: 0.84em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
  position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
  display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
  pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
  --mask: var(--icon-chevron-down);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  width: 1.5em;
  height: 1.5em;
  right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: var(--navbox-icon-offset--x);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
  transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
  top: 0;
  right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
  transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
  display: none;
}
.ranger-navbox .ranger-list{
  width: unset;
  padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
  padding: var(--navbox-above-padding);
  width: unset;
}
.ranger-navbox .ranger-below{
  background: var(--navbox-below-background);
  color: var(--navbox-below-color);
  padding: var(--navbox-below-padding);
  width: unset;
}
.ranger-navbox .ranger-sublist{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
  display: grid;
  gap: var(--navbox-gap);
  grid-template-columns: auto minmax(0,1fr);
}
.ranger-navbox .ranger-row{
  display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
  text-align: var(--navbox-group-text-align);
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
  padding: var(--navbox-group-padding);
  width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
  --navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
  --navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
  --navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
  --navbox-group-text-align--mobile: left;
}
.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
  --navbox-group-text-align--mobile: center;
}
.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
  --navbox-group-text-align--mobile: right;
}
.ranger-navbox .ranger-listbox > .ranger-wrap{
  background: var(--navbox-list-background);
  color: var(--navbox-list-color);
  flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
  flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
  grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
  background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
display: inline-block;
}
.ranger-navbox .align-left,
.ranger-navbox .alignleft{
  text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
  text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
  text-align: right;
}
/* responsive */
@media screen and (max-width: 720px) {
  .ranger-navbox .ranger-section-body,
  .ranger-navbox .ranger-sublist {
    display: flex;
    flex-flow: column;
  }
  .ranger-navbox .ranger-row{
    display: block;
  }
  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
    margin-top: var(--navbox-gap);
  }
  .ranger-navbox .ranger-listbox.empty{
    display: none;
  }
  .ranger-navbox .ranger-group,
  .ranger-navbox .ranger-subgroup{
    text-align: var(--navbox-group-text-align--mobile);
    white-space: normal;
  }
 
  .ranger-navbox .ranger-sublist {
    padding-left: var(--navbox-tree-indent);
    margin-left: var(--navbox-tree-line-indent);
  }
  .ranger-navbox .ranger-subgroup,
  .ranger-navbox .ranger-listbox {
    position:relative;
  }
  .ranger-navbox .ranger-group br,
  .ranger-navbox .ranger-subgroup br{
    display: none;
  }
  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
  }
  .ranger-navbox .ranger-sublist .ranger-row > ::before{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent));
    top: 0;
    width: var(--navbox-tree-line-width);
    height: 100%;
    content: '';
    display: block;
    background-color: var(--navbox-tree-line-color);
  }
  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
    height: calc(100% + var(--navbox-gap));
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
    display: none;
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
    display: block;
    height: calc(50% + var(--navbox-tree-line-width)/2);
  }
  .ranger-navbox .ranger-subgroup::after,
  .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
    height: var(--navbox-tree-line-width);
    content: '';
    background-color: var(--navbox-tree-line-color);
  }
  /* increase height for links */
  .ranger-navbox .hlist{
    line-height: 2;
  }
}
/**** `.pill` class: the "pill" style  ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
/* remove middle dots betweem items */
.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill-mobile .hlist dd ol::before,
.ranger-navbox.pill-mobile .hlist dd ul::before,
.ranger-navbox.pill-mobile .hlist dd dl::before,
.ranger-navbox.pill-mobile .hlist dt ol::before,
.ranger-navbox.pill-mobile .hlist dt ul::before,
.ranger-navbox.pill-mobile .hlist dt dl::before,
.ranger-navbox.pill-mobile .hlist li ol::before,
.ranger-navbox.pill-mobile .hlist li ul::before,
.ranger-navbox.pill-mobile .hlist li dl::before,
.ranger-navbox.pill-mobile .hlist dd ol::after,
.ranger-navbox.pill-mobile .hlist dd ul::after,
.ranger-navbox.pill-mobile .hlist dd dl::after,
.ranger-navbox.pill-mobile .hlist dt ol::after,
.ranger-navbox.pill-mobile .hlist dt ul::after,
.ranger-navbox.pill-mobile .hlist dt dl::after,
.ranger-navbox.pill-mobile .hlist li ol::after,
.ranger-navbox.pill-mobile .hlist li ul::after,
.ranger-navbox.pill-mobile .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill-mobile .hlist ul,
.ranger-navbox.pill-mobile .hlist ol,
.ranger-navbox.pill-mobile .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill-mobile .hlist li,
.ranger-navbox.pill-mobile .hlist dt,
.ranger-navbox.pill-mobile .hlist dd{
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill-mobile .hlist li,
.ranger-navbox.pill-mobile .hlist dt,
.ranger-navbox.pill-mobile .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill-mobile .hlist dd:hover,
.ranger-navbox.pill-mobile .hlist dd:focus,
.ranger-navbox.pill-mobile .hlist dt:hover,
.ranger-navbox.pill-mobile .hlist dt:focus,
.ranger-navbox.pill-mobile .hlist li:hover,
.ranger-navbox.pill-mobile .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
}
/*********************
* OVERRIDES GO BELOW *
**********************/
/* pill */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd,
/* title box */
.ranger-title,
/* header box (inside the navbox) */
.ranger-header {
    --clip: .5em;
    clip-path: polygon( 0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)) );
}
/* pill :hover/:focus */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
    box-shadow: none;
    /* background-color:  */
}
.ranger-section-body > .ranger-row:first-child > .ranger-group {
    --clip: .5em;
    /* clip just the top left corner */
    clip-path: polygon(var(--clip) 0, 100% 0, 100% 100%, 0 100%, 0 var(--clip));
}
.ranger-section-body > .ranger-row:last-child > .ranger-group {
    --clip: .5em;
    /* clip just the bottom right corner */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
}
.ranger-navbox .ranger-group {
    font-size: calc(var(--navbox-font-size) + 0.25em);
    justify-items: center;
}
.ranger-navbox a.mw-selflink:hover {
    /* remove flicker on hover */
    color: inherit;
}
/*********************
*    OVERRIDES END  *
**********************/
/*********************
* End Template:Navbox*
**********************/
/* #endregion */
/* ============ */
/* #region Custom classes */
/* ============ */
/* flat bullet lists without bullets and margin */
.flat-bullet-list ul {
/* remove margin */
margin: 0;
}
.flat-bullet-list ul li::marker {
/* remove bullet */
content: '';
}
/* #endregion */
/* ============ */
/* #region Module:ScribuntoUnit */
/* ============ */
.scribunto-test-table {
width: 100%;
max-width: 100%;
}
.scribunto-test-table .test-output {
overflow-wrap: break-word;
word-break: break-all;
}
.scribunto-test-table .test-output-expected,
.scribunto-test-table .test-output-actual {
font-family: monospace, monospace;
white-space: pre-wrap;
}
/* #endregion */
/* ============ */
/* #region Other */
/* ============ */
/* wiki help button link */
.mw-helplink-icon {
    filter: invert(100%);
}
/* preferences → tab button (not selected)  */
.mw-prefs-tabs .oo-ui-tabOptionWidget:not(.oo-ui-optionWidget-selected) {
    color: var(--text-color);
}
/* #endregion */

Latest revision as of 01:25, 4 April 2025

@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%);
    --bg-color-light-x5: hsl(240, 7%, 26%);
    --bg-color-light-x6: hsl(240, 7%, 32%);
    --bg-color-light-x7: hsl(240, 5%, 38%);

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

    --text-color: hsl(0, 0%, 95%);
    --text-color-grayed-500: hsl(0, 0%, 50%);
    --text-color-grayed-450: hsl(0, 0%, 45%);
    --text-color-grayed-400: hsl(0, 0%, 40%);
    --text-color-grayed-350: hsl(0, 0%, 35%);
    --text-color-grayed-300: hsl(0, 0%, 30%);

    --code-color-bg: hsl(195, 7%, 11%);
    --code-color-bg-light: hsl(195, 7%, 18%);
    --code-color-text: hsl(36, 10%, 90%);
    --code-color-border: hsl(197, 6%, 22%);

    --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);

	--warning-color: hsl(54 100% 15% / 1);
	--warning-color-border: hsl(60, 55%, 30%);

	--danger-color: var(--red-color);
	--danger-color-dark: var(--red-color-dark);
	--danger-color-dark-x2: var(--red-color-dark-x2);
	--danger-color-border: var(--red-color-border);

    --success-color-bg: hsl(167, 50%, 35%);
	--success-color-border: hsl(167, 40%, 15%);
	--success-color-text: var(--text-color);

    --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%);
    --red-color-dark-x2: hsl(0, 62%, 36%);
    --red-color-border: hsl(0, 47%, 22%);

    /* ============= */
    /* New format of variables (wip) */
    /* ============= */

    --wiki-content-background-color: var(--bg-color-light);
    --wiki-content-background-color--secondary: var(--bg-color-light-x2);
    --wiki-accent-color: var(--action-color);
    --wiki-accent-label-color: var(--text-color);
    --wiki-accent-link-color: var(--link-color);
    --wiki-content-border-color: var(--border-color);
    --wiki-content-border-color--accent: var(--border-color-light-x2);
    --wiki-content-link-color: var(--link-color);
    --wiki-content-link-label-color: var(--text-color);
    --wiki-content-text-color: var(--text-color);

    /* ============= */
    /* ICONS GO HERE */
    /* ============= */
    
    /* white table sort icon */
    --icon-table-sort-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjEiIGhlaWdodD0iOSI+PGRlZnM+PGZpbHRlciBpZD0iZGFya3JlYWRlci1pbWFnZS1maWx0ZXIiPjxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwLjI0OSAtMC42MTQgLTAuNjcyIDAuMDAwIDEuMDM1IC0wLjY0NiAwLjI4OCAtMC42NjQgMC4wMDAgMS4wMjAgLTAuNjM2IC0wLjYwOSAwLjI1MCAwLjAwMCAwLjk5NCAwLjAwMCAwLjAwMCAwLjAwMCAxLjAwMCAwLjAwMCIgLz48L2ZpbHRlcj48L2RlZnM+PGltYWdlIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiBmaWx0ZXI9InVybCgjZGFya3JlYWRlci1pbWFnZS1maWx0ZXIpIiB4bGluazpocmVmPSJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBEOTRiV3dnZG1WeWMybHZiajBpTVM0d0lpQmxibU52WkdsdVp6MGlWVlJHTFRnaVB6NEtQSE4yWnlCNGJXeHVjejBpYUhSMGNEb3ZMM2QzZHk1M015NXZjbWN2TWpBd01DOXpkbWNpSUhkcFpIUm9QU0l5TVNJZ2FHVnBaMmgwUFNJNUlpQjJhV1YzUW05NFBTSXdJREFnTWpFZ09TSStDZ2s4Y0dGMGFDQmtQU0p0TVRRdU5TQTFMVFFnTkMwMExUUjZiVEF0TVMwMExUUXROQ0EwZWlJdlBnbzhMM04yWno0SyIgLz48L3N2Zz4=");

    /* wiki help button icon - transparent question mark in circle of cosmoBlue */
    --icon-wiki-help-cosmoBlue: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQloZWxwCgk8L3RpdGxlPgoJPHBhdGggZmlsbD0icmdiKDIxMiAyMzYgMjU1KSIgZD0iTTEwIDBhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTAgMHptMSAxNkg5di0yaDJ6bTIuNzEtNy42YTIuNjQgMi42NCAwIDAgMS0uMzMuNzQgMy4xNiAzLjE2IDAgMCAxLS40OC41NWwtLjU0LjQ4Yy0uMjEuMTgtLjQxLjM1LS41OC41MmEyLjU0IDIuNTQgMCAwIDAtLjQ3LjU2QTIuMyAyLjMgMCAwIDAgMTEgMTJhMy43OSAzLjc5IDAgMCAwLS4xMSAxSDkuMDhhOC45IDguOSAwIDAgMSAuMDctMS4yNSAzLjI4IDMuMjggMCAwIDEgLjI1LS45IDIuNzkgMi43OSAwIDAgMSAuNDEtLjY3IDQgNCAwIDAgMSAuNTgtLjU4Yy4xNy0uMTYuMzQtLjMuNTEtLjQ0YTMgMyAwIDAgMCAuNDMtLjQ0IDEuODMgMS44MyAwIDAgMCAuMy0uNTUgMiAyIDAgMCAwIC4xMS0uNzIgMi4wNiAyLjA2IDAgMCAwLS4xNy0uODYgMS43MSAxLjcxIDAgMCAwLTEtLjkgMS43IDEuNyAwIDAgMC0uNS0uMSAxLjc3IDEuNzcgMCAwIDAtMS41My42OCAzIDMgMCAwIDAtLjUgMS44Mkg2LjE2YTQuNzQgNC43NCAwIDAgMSAuMjgtMS42OCAzLjU2IDMuNTYgMCAwIDEgLjgtMS4yOSAzLjg4IDMuODggMCAwIDEgMS4yOC0uODNBNC41OSA0LjU5IDAgMCAxIDEwLjE4IDRhNC40NCA0LjQ0IDAgMCAxIDEuNDQuMjMgMy41MSAzLjUxIDAgMCAxIDEuMTUuNjUgMy4wOCAzLjA4IDAgMCAxIC43OCAxLjA2IDMuNTQgMy41NCAwIDAgMSAuMjkgMS40NSAzLjM5IDMuMzkgMCAwIDEtLjEzIDEuMDF6Ii8+Cjwvc3ZnPg==");

    /* navbar search magnifying glass search icon in greyish colors */
    --icon-navbar-search-greyish: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlzZWFyY2gKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IndoaXRlIiBkPSJNMTIuMiAxMy42YTcgNyAwIDEgMSAxLjQtMS40bDUuNCA1LjQtMS40IDEuNC01LjQtNS40ek0xMyA4QTUgNSAwIDEgMSAzIDhhNSA1IDAgMCAxIDEwIDB6Ii8+Cjwvc3ZnPgo=");

    /* transparent exclamation mark in a circle filled with cosmoGreen */
    --icon-popup-notice-info-cosmoGreen: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KCTx0aXRsZT4KCQlub3RpY2UKCTwvdGl0bGU+Cgk8cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTAgMGExMCAxMCAwIDEgMCAxMCAxMEExMCAxMCAwIDAgMCAxMCAwem0xIDE2SDl2LTJoMnptMC00SDlWNGgyeiIvPgo8L3N2Zz4=");
    
    /* transparent exclamation mark in a circle filled with some kind of orange */
    --icon-popup-notice-warn-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4gPHRpdGxlPiBhbGVydCA8L3RpdGxlPiA8cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik02IDBhNiA2IDAgMCAwLTYgNiA2IDYgMCAwIDAgNiA2IDYgNiAwIDAgMCA2LTYgNiA2IDAgMCAwLTYtNnpNNSAyaDJ2NUg1VjJ6bTAgNmgydjJINVY4eiIvPiA8L3N2Zz4=");

    /* an icon to use to mark external links, in cosmoGreen */
    --icon-external-link-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGV4dGVybmFsIGxpbmsgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJNMTcgMTdIM1YzaDVWMUgzYTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGEyIDIgMCAwIDAgMi0ydi01aC0yeiIvPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Im0xMSAxIDMuMjkgMy4yOS01LjczIDUuNzMgMS40MiAxLjQyIDUuNzMtNS43M0wxOSA5VjF6Ii8+PC9zdmc+");

    /* an asterisk icon used to mark required template fields, in yellow */
    --icon-asterisk-yellow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHJlcXVpcmVkIDwvdGl0bGU+PHBhdGggZmlsbD0iaHNsKDM5LCAxMDAlLCA1MCUpIiBkPSJNOC41IDBoM3YyMGgtM3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Ik0xOS40IDEzLjcgMTggMTYuMy42IDYuMyAyIDMuN3oiLz48cGF0aCBmaWxsPSJoc2woMzksIDEwMCUsIDUwJSkiIGQ9Im0xOCAzLjcgMS40IDIuNi0xNy4zIDEwLTEuNS0yLjZ6Ii8+PC9zdmc+");
    
    /* source editor icon - double brackets [[]], cosmoGreen color */
    --icon-source-editor-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IFdpa2l0ZXh0IDwvdGl0bGU+PGcgZmlsbD0icmdiKDEwLCAyMTIsIDk4KSI+PHBhdGggZD0iTTEgM3YxNGgzdi0ySDNWNWgxVjN6bTQgMHYxNGg0di0ySDdWNWgyVjN6bTExIDB2MmgxdjEwaC0xdjJoM1Yzem0tNSAwdjJoMnYxMGgtMnYyaDRWM3oiLz48L2c+PC9zdmc+");

    /* source editor mode switch icon in active state (which you open mode switch menu) - a pencil, in cosmo green */
    --icon-source-editor-mode-switch-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGVkaXQgPC90aXRsZT48cGF0aCBmaWxsPSJyZ2IoMTAsIDIxMiwgOTgpIiBkPSJtMTYuNzcgOCAxLjk0LTJhMSAxIDAgMCAwIDAtMS40MWwtMy4zNC0zLjNhMSAxIDAgMCAwLTEuNDEgMEwxMiAzLjIzek0xIDE0LjI1VjE5aDQuNzVsOS45Ni05Ljk2LTQuNzUtNC43NXoiLz48L3N2Zz4=");

    /* source editor syntax highlight icon in active state (when syntax higlighting is on) - a pen, in cosmo green */
    --icon-source-editor-syntax-highlight-mode-active-cosmoGreen: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");

    /* a puzzle icon present in templates in visual editor, in white */
    --icon-template-puzzle-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHB1enpsZSA8L3RpdGxlPjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJ3aGl0ZSIgY3g9IjE3IiBjeT0iMTAiIHI9IjMiLz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0xMC41OCAzQTMgMyAwIDAgMSAxMSA0LjVhMyAzIDAgMCAxLTYgMEEzIDMgMCAwIDEgNS40MiAzSDF2MTJhMiAyIDAgMCAwIDIgMmgxMlYzeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");

    /* tabber icon present in visual editor → insert, in black */
    --icon-tabber-black: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPiA8dGl0bGU+dGFiYmVyPC90aXRsZT4gPHBhdGggZmlsbD0iIzA5YWJmMSIgZD0iTTE4IDJIMkMuOSAyIDAgMi45IDAgNHYxMmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6bTEgNWgtOGMtLjYgMC0xLS40LTEtMVYzaDhjLjYgMCAxIC40IDEgMXYzeiIvPiA8L3N2Zz4=");

    /* dropdown icon (arrow-like), in cosmo blue */
    --icon-dropdown-cosmoBlue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48dGl0bGU+IGRvd24gPC90aXRsZT48cGF0aCBmaWxsPSIjZDZlZGZmIiBkPSJNOS45IDIuOSA2IDYuOCAyLjEgMi45IDEgNGw1IDUgNS01eiIvPjwvc3ZnPg==");

}

/* ============ */
/* #region Uncategorized */
/* ============ */

/* 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 {
    /* 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 */
/* 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,
.smooth-render img {
    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);
}

/* #endregion */

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

/* page content */
#mw-content-text {
    /* for the tooltips to work */
    /* can be switched back to auto (or maybe removed?) if using tooltips not dependant on position of tooltipped element */
    overflow: visible;
}

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;
}

.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
/* page title */
.mw-page-title-main,
/* wiki title at upper left → long variant */
#p-logo-text a,
/* sidebar */
#mw-site-navigation h3,
/* sidebar */
#mw-related-navigation h3 {
    font-family: 'Teko', serif;
}

/* up the header sizes do to 'Teko' font visually appearing smaller than its serif counterpart */
.mw-body .mw-heading1,
.mw-body h1 {
    font-size:2.5em;
}
.mw-body .mw-heading2,
.mw-body h2 {
    font-size: 2.2em;
}
.mw-body .mw-heading3,
.mw-body h3 {
    font-size: 1.8em;
}
.mw-body .mw-heading4,
.mw-body h4,
#p-logo-text a.long {
    font-size: 1.6em;
}
.mw-body .mw-heading5,
.mw-body h5,
/* sidebar */
#mw-site-navigation .sidebar-chunk h3,
/* sidebar */
#mw-related-navigation .sidebar-chunk h3 {
    font-size: 1.4em;
}
.mw-body .mw-heading6,
.mw-body h6 {
    font-size: 1.3em;
}

/** bot password → grants table → even row */
#mw-botpasswords-table .mw-htmlform-matrix tbody tr:nth-child(2n) td {
    background-color: var(--bg-color-light-x3);
}

/** bot password → grants table → cell :hover */
#mw-botpasswords-table .mw-htmlform-matrix tbody tr:hover td {
    background-color: var(--bg-color-light-x5);
}

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

/* ============ */
/* #region System messages */
/* various notices */
/* ============ */

/* system message banner */
.mw-message-box {
    background-color: var(--action-color);
    color: var(--text-color);
    border-color: var(--action-color-dark);
}

/* system success banner */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
    background-color: var(--success-color-bg);
    border-color: var(--success-color-border);
    color: var(--success-color-text);
}

/* system warning banner (e.g. when you preview changes in the source editor and the "changes not yeh published" banner pops up) */
.mw-message-box-warning,
/* another system warning banner */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning,
/* warning banner on template edit page */
.cdx-message--warning {
    color: var(--text-color);
    background-color: var(--warning-color);
    border-color: var(--warning-color-border);
}

/* another system error banner */
.mw-message-box-error,
/* system error banner (e.g., when you remove the parameter name from templateData param) */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error,
/* error banner on template styles page */
.cdx-message--error {
    color: var(--text-color);
    background-color: var(--danger-color-dark);
    border-color: var(--danger-color-border);
}

/* error banner on template styles page → icon */
.cdx-message--error .cdx-message__icon {
    /* match text color */
    background-color: var(--text-color);
}

/* #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,
/* The backgrounds for galleries. */
#content .gallerybox div.thumb {
	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,
/* some other images */
.mw-image-border .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%);
}

/* images with "thumb" type */
figure[typeof~='mw:File/Thumb'], 
/* images with "frame" type */
figure[typeof~='mw:File/Frame'] {
    /* minimum possible image  */
    min-width: 120px;
}

/* #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 Search */
/* ============ */

/* SEARCH BAR */

/* search form → search bar */
.mw-search-form-wrapper #mw-search-top-table input[type=search] {
    background-color: var(--bg-color-light);
    border-color: var(--border-color-light);
    color: var(--text-color);
}

/* search form → search bar → search icon */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-icon-search,
/* search form → search bar → clear search icon */
.mw-search-form-wrapper #mw-search-top-table .oo-ui-indicator-clear {
    filter: invert(100%);
}

/* search form → search bar → search button */
.mw-search-form-wrapper #mw-search-top-table button[type=submit],
/* search form → advanced search options → all/none toggle container → button */
.mw-search-form-wrapper #mw-search-togglebox input[type=button] {
    background-color: var(--action-color);
    border-color: var(--border-color);
    color: var(--text-color);
    transition: background-color 100ms ease-in;
}

/* search form → search bar → search button hover */
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:hover,
/* search form → advanced search options → all/none toggle container → button hover */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:hover {
    background-color: var(--action-color-light);
    transition: background-color 100ms ease-out;
}

/* search form → search bar → search button active */
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:active,
/* search form → advanced search options → all/none toggle container → button active */
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:active {
    background-color: var(--action-color-dark-x2);
    transition: background-color 100ms ease-out;
}

/* search form → search in pane → namespace suggest → namespace with a border */
.oo-ui-defaultOverlay > .oo-ui-selectWidget .mw-advancedSearch-namespace-border {
    border-color: var(--bg-color-light-x3);
}

/* SEARCH BAR END */

/* search form → results count info */
.mw-search-form-wrapper #mw-search-top-table .results-info {
    color: var(--bg-color-light-x4);
}

/* search form → advanced search/search in pane */
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color-light);
}

/* search form → advanced search/search in pane hover */
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light-x2) !important;
    /* stays the same */
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* search form → advanced search/search in pane → "down" indication icon */
.mw-search-form-wrapper .oo-ui-indicator-down {
    filter: invert(100%);
}

/* search form → advanced search/search in pane → content container */
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-pane > * {
    /* a slight "glow" at the top */
    background: linear-gradient(hsla(0, 0%, 100%, 0.1), var(--bg-color) 0.5em);
    border-color: var(--border-color-light);
}


/* TAGS */

/* search form → tag */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget,
/* recent changes → filters → tag */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagItemWidget {
    background-color: var(--bg-color-light-x3) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color-light) !important;
    text-shadow: 0 0 3px var(--bg-color) !important;
}

/* search form → tag → remove button hover */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-buttonElement-button:hover,
/* recent changes → filters → tag → remove button hover */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light);
}

/* search form → tag → remove icon */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-icon-close,
/* recent changes → filters → tag → remove button → icon */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-tagItemWidget .oo-ui-icon-close {
    filter: invert(100%);
}

/* search form → disabled tag */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget.oo-ui-widget-disabled {
    background-color: var(--bg-color-light);
    color: color-mix(in srgb, var(--text-color), var(--bg-color) 22%);
    text-shadow: none;
}

/* search form → tag → link */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget > a {
    color: var(--text-color);
}

/* search form → tag with a non-existing link */
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget:has(a.new) {
    background-color: var(--warning-color);
    border-color: var(--border-color-light);
    text-shadow: 0 0 3px var(--bg-color-light-x2);
}

/* TAGS END */
/* FIELDS */

/* search form → info icon */
.mw-search-form-wrapper .oo-ui-icon-info,
/* search form → menu icon */
.mw-search-form-wrapper .oo-ui-icon-menu,
/* search form → search icon */
.mw-search-form-wrapper .oo-ui-icon-search {
    filter: invert(100%);
} 

/* search form → dropdown input */
.mw-search-form-wrapper .oo-ui-dropdownInputWidget,
/* search form → dropdown input hover */
.mw-search-form-wrapper .oo-ui-dropdownInputWidget:hover {
    /* remove this extra bg */
    background-color: transparent;
}

/* search form → fields group → label */
.mw-search-form-wrapper .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
    /* should be the same as the bg to hide the line underneath */
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
    font-weight: bold !important;
}

/* search form → tag select field */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget,
/* search form → text input field → input */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
/* search form → dropdown select */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle,
/* search form → dropdown select hover */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
    background-color: var(--bg-color-light) !important;
    color: var(--text-color) !important;
}

/* search form → tag select field → input */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget input {
    color: var(--text-color);
}

/* search form → tag select field → next nested container element */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget > .oo-ui-tagMultiselectWidget-handle,
/* search form → text input field → input */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input,
/* search form → dropdown select */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle {
    border-color: var(--border-color-light) !important;
}

/* search form → tag select field hover → next nested container element */
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget:hover > .oo-ui-tagMultiselectWidget-handle,
/* search form → text input field → input hover */
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:hover,
/* search form → dropdown select hover */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
    border-color: var(--border-color-light) !important;
}


/* FIELDS END */

/* #endregion */

/* ============ */
/* #region Recent changes */
/* ============ */


/* list of abbreviations block */
.mw-changeslist-legend.mw-changeslist-legend.mw-changeslist-legend,
/* filters */
.mw-rcfilters-ui-filterWrapperWidget > .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
/* filters → search → input */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-inputWidget-input {
    color: var(--text-color);
    background-color: var(--bg-color-light-x2);
    border-color: var(--border-color);
}

/* list of abbreviations block → collapse button */
.mw-changeslist-legend.mw-changeslist-legend.mw-changeslist-legend .mw-collapsible-toggle-default .mw-collapsible-text {
    color: var(--link-color);
}

/* filters (nested el) */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
    background-color: transparent;
    border: none;
}

/* filters → search → button group */
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonGroupWidget {
    border: none;
    padding: .25rem;
}

/* filters → search → button group → button (except last) */
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonGroupWidget > *:not(:last-child) {
    margin-right: .2rem;
}

/* filters → search → input */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-inputWidget-input {
    border: none;

    border-top: 1px solid var(--border-color);
}

/* filters → search → input ::placeholder */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-inputWidget-input::placeholder {
    color: var(--text-color-grayed-500) !important;
} 

/* filters → search → button */
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: var(--bg-color-light-x4);
    border: 1px solid var(--border-color-light);
    color: var(--text-color);
}

/* filters → search → button :hover */
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light-x6);
    color: var(--text-color);
    border: 1px solid var(--border-color-light-x2);
}

/* filters → restore default filters button */
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    color: var(--text-color);
}

/* filters → restore default filters button :hover */
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
    color: var(--text-color);
    background-color: var(--bg-color-light-x3);
}

/* live updates button */
.mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* results count & time period settings button */
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* saved filters button */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* saved filters button (pressed) */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-pressed .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* save current filter button → popup → button */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: var(--bg-color-light-x3);
    border: 1px solid var(--border-color-light);
    color: var(--text-color);
}

/* live updates button :hover */
.mw-rcfilters-ui-liveUpdateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
/* results count & time period settings button :hover */
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
/* saved filters button :hover */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
/* save current filter button → popup → button :hover */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light-x5);
    color: var(--text-color);
    border: 1px solid var(--border-color-light-x2);
}

/* save current filter button → popup → button (disabled) */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-widget-disabled .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: var(--bg-color);
    color: var(--text-color-grayed-300);
    border-color: var(--border-color);
}

/* live updates button (pressed) */
.mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-buttonElement-pressed .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: var(--action-color-dark-x2);
}

/* live updates button (active) */
.mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: var(--action-color);
}

/* active filter name */
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle {
    color: var(--action-color);
}

/* saved filters change animation */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .mw-rcfilters-ui-filterTagMultiselectWidget-emphasize.oo-ui-tagMultiselectWidget-handle {
    background-color: var(--bg-color-light-x7);
}

/* saved filters button → popup → item */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .mw-rcfilters-ui-savedLinksListItemWidget.mw-rcfilters-ui-savedLinksListItemWidget {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color);

    transition: all 100ms ease-in;
}

/* saved filters button → popup → item (highlighted) */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .mw-rcfilters-ui-savedLinksListItemWidget.mw-rcfilters-ui-savedLinksListItemWidget.oo-ui-optionWidget-highlighted {
    background-color: var(--bg-color-light-x3);
}

/* saved filters button → popup → item → label */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .mw-rcfilters-ui-savedLinksListItemWidget-label {
    color: var(--text-color);
}

/* save current filter button → popup → input */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-inputWidget-input,
/* saved filters button → popup → item rename → input */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .oo-ui-inputWidget-input {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color-light) !important;
}

/* save current filter button → popup → input :hover */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-inputWidget-input:hover,
/* saved filters button → popup → item rename → input :hover */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .oo-ui-inputWidget-input:hover {
    border-color: var(--border-color-light-x2) !important;
}

/* results count & time period settings button → overlay */
/* .oo-ui-popupWidget-popup:has(.mw-rcfilters-ui-changesLimitPopupWidget) {

} */

/* "active filters" text */
.mw-rcfilters-container .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
    color: var(--text-color-grayed-500);
}

/* filters → tag (enabled, selected) */
.mw-rcfilters-container .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
    background-color: var(--bg-color-light-x6) !important;
    border-color: var(--action-color) !important;
}

/* filters → tag (enabled, focus) */
.mw-rcfilters-container .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
    border-color: var(--action-color) !important;
}

/* filters → overlay */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-menuSelectWidget {
    background-color: var(--bg-color-light-x3);
    border-color: var(--border-color);
}

/* filters → overlay → header */
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
    background-color: var(--bg-color-light-x3);
    border-color: var(--border-color);
}

/* filters → overlay → header → title */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .mw-rcfilters-ui-filterMenuHeaderWidget-title,
/* filters → overlay → option → desc */
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
/* filters → overlay → option (muted) → desc */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc,
/* filters → overlay → footer → title */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-labelElement.oo-ui-labelElement {
    color: var(--text-color-grayed-500);
}

/* filters → overlay → header → button */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* filters → overlay → footer → button */ 
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-buttonElement-button.oo-ui-buttonElement-button
{
    border: 1px solid var(--border-color-light);
    background-color: var(--bg-color-light-x4);
}

/* filters → overlay → header → button :hover */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
/* filters → overlay → footer → button :hover */ 
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light-x6);
    color: var(--text-color);
}

/* filters → overlay → header → button (toggled off) → icon */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement:not(.oo-ui-buttonElement-active) .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* filters → overlay → footer → button → icon */ 
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* filters → clear filters trash bin icon */
.mw-rcfilters-container .oo-ui-icon-trash,
/* filters → search → menu/search icon */
.mw-rcfilters-ui-filterTagMultiselectWidget-views-input .oo-ui-iconElement-icon,
/* filters → search → button group → button → icon */
.mw-rcfilters-ui-filterTagMultiselectWidget-views .oo-ui-buttonGroupWidget > * .oo-ui-iconElement-icon,
/* live updates button (when toggled off) → icon */
.mw-rcfilters-ui-liveUpdateButtonWidget:not(.oo-ui-buttonElement-active) .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* filters → restore default filters button → icon */
.mw-rcfilters-ui-filterTagMultiselectWidget-resetButton .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* results count & time period settings button → icon */
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button .oo-ui-iconElement-icon,
/* results count & time period settings button → dropdown icon */
.mw-rcfilters-ui-changesLimitAndDateButtonWidget .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator,
/* save current filter button → icon */ 
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters .oo-ui-icon-bookmark,
/* saved filters button → bookmark icon  */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-icon-bookmark,
/* saved filters button → dropdown icon  */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-indicator-down,
/* saved filters button → popup → item → icons */
.mw-rcfilters-ui-overlay .mw-rcfilters-ui-savedLinksListWidget-menu .oo-ui-iconElement-icon,
/* save current filter button → popup → bookmark icon */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-icon-bookmark,
/* save current filter button → popup → close icon */
.mw-rcfilters-ui-saveFiltersPopupButtonWidget-popup .oo-ui-icon-close {
    filter: invert(100%);
}

/* filters → overlay → header → button (enabled)  */
.mw-rcfilters-ui-filterMenuHeaderWidget-header .oo-ui-buttonElement-active .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: var(--action-color);
}

/* filters → overlay → option → highlight results color button (when visible) */
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: var(--bg-color-light-x6);
}

/* filters → overlay → option → highlight results color button (when visible) :hover */
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light-x7);
}

/* filters → overlay → option → highlight results color button (when visible) → pencil icon */
/* filters → overlay → option → highlight results color button (when visible) → dropdown icon */
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button .oo-ui-icon-highlight:not(.mw-rcfilters-ui-filterItemHighlightButton-circle),
.mw-rcfilters-ui-itemMenuOptionWidget-highlightButton .oo-ui-buttonElement-button .oo-ui-indicator-down {
    filter: invert(100%);
}

/* filters → overlay → header → help button  */
.mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon .oo-ui-buttonElement-button.oo-ui-buttonElement-button,
/* filters → overlay → header → back button  */
.mw-rcfilters-ui-filterMenuHeaderWidget-backButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button {
    background-color: transparent;
    border: none;
}

/* filters → overlay → header → help button :hover  */
.mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover,
/* filters → overlay → header → back button  */
.mw-rcfilters-ui-filterMenuHeaderWidget-backButton .oo-ui-buttonElement-button.oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light-x4);
}

/* filters → overlay → section header */
.mw-rcfilters-ui-filterMenuSectionOptionWidget,
/* filters → overlay → option (selected) */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected,
/* filters → overlay → footer */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect {
    background-color: var(--bg-color-light-x5);
}

/* filters → overlay → option */
.mw-rcfilters-ui-itemMenuOptionWidget,
/* filters → overlay → footer */
.mw-rcfilters-ui-menuSelectWidget-footer-viewSelect {
    border-color: var(--border-color-light-x2) !important;
}

/* filters → overlay → option :hover */
.mw-rcfilters-ui-itemMenuOptionWidget:hover,
/* filters → overlay → option (selected) :hover */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected:hover {
    background-color: var(--bg-color-light-x4);
}

/* filters → overlay → option (highlighted) */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-highlighted,
/* filters → overlay → option (selected, highlighted) */
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-highlighted {
    background-color: var(--bg-color-light-x5);
}

/* filters → overlay → section header → label */
.mw-rcfilters-ui-filterMenuSectionOptionWidget .oo-ui-labelElement-label,
/* filters → overlay → option → title */
.mw-rcfilters-ui-itemMenuOptionWidget-label-title {
    color: var(--text-color);
}

/* filters → overlay → option (muted) → title */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title {
    color: var(--text-color-grayed-500);
}

/* filters → overlay → option (muted) */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
    background-color: var(--bg-color-light);
}

/* filters → overlay → option (muted) :hover */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected):hover {
    background-color: var(--bg-color-light-x2);
}

/* filters → overlay → option → "excluded" label */
.mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel {
    color: var(--text-color-grayed-500);
}

/* change (highlighted w/ color 1) */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1, 
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c1 tr:first-child, 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
    background-color: hsl(220deg 40% 40% / 45%);
}

/* change (highlighted w/ color 2) */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2, 
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c2 tr:first-child, 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
    background-color: hsl(167deg 40% 40% / 45%);
}

/* change (highlighted w/ color 3) */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3, 
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c3 tr:first-child, 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
    background-color: hsl(45deg 100% 50% / 31%);
}

/* change (highlighted w/ color 4) */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c4, 
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c4 tr:first-child, 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
    background-color: hsl(20deg 81% 44% / 35%);
}

/* change (highlighted w/ color 5) */
.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c5, 
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c5 tr:first-child, 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)), 
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
    background-color: hsl(0deg 84% 48% / 35%);
}


/* #endregion */

/* ============ */
/* #region Page history */
/* ============ */

#pagehistory li.selected {
    color: var(--text-color);
}

#pagehistory .mw-plusminus-pos {
    color: var(--green-color);
}

#pagehistory .autocomment, 
#pagehistory .autocomment a, 
#pagehistory .autocomment a:visited {
    color: var(--text-color-grayed-500);
}

/* row (in group mode) → expand/collapse icon */
.mw-enhancedchanges-checkbox + * .mw-enhancedchanges-arrow {
    filter: invert(100%);
}

/* #endregion */

/* ============ */
/* #region Popups */
/* various popup windows */
/* some of them live in ".oo-ui-defaultOverlay" */
/* ============ */

/* OPTION SELECT */

/* option select popup */
.oo-ui-selectWidget {
    background-color: var(--bg-color);
    border-color: var(--border-color);
}

/* option select popup → option */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget {
    background-color: var(--bg-color);
    transition: background-color 100ms ease-in;
    color: var(--text-color);
}

/* option select popup → option hover */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
    background-color: var(--bg-color-light);
    transition: none;
}

/* option select popup → selected option hover */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted {
    color: var(--text-color);
    background-color: var(--action-color-dark);
}

/* option select popup → option active */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed,
/* option select popup → selected option */
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
    color: var(--text-color);
    transition: none;
    background-color: var(--action-color-dark);
    background: linear-gradient(90deg,
        var(--action-color) 0%, 
        var(--action-color-dark-x2) 100%
    );
}

/* OPTION SELECT END */

/* #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 {
    --se-mode-icon: var(--icon-source-editor-cosmoGreen);
}

/* 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: hsl(207,90%,83%);
    /* 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: hsl(207,90%,83%);
    /* 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) !important;
    box-shadow: inset 0 0 1px 1px var(--text-color-grayed-450);
}

/* 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;
}


/* #endregion */


/* #endregion */

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

/* ============ */
/* #region =🖌️= VISUAL EDITOR =🖌️= */
/* ============ */

/* visual editor (content) → template [puzzle] icon
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle {
    background-image: linear-gradient(transparent, transparent),
        var(--icon-template-puzzle-white);
    opacity: 1;
}

/* template name
the content selector is to not affect other places where this icon is used */
.content-body .oo-ui-icon-puzzle + .oo-ui-labelElement-label {
    color: white;
}


/* visual editor → editor loading → placeholder (?) navbar container */
.ve-init-mw-desktopArticleTarget-targetContainer
    .ve-init-mw-desktopArticleTarget-toolbarPlaceholder-open {
    /* disables progress bar cropping when moving it down */
    overflow: visible;
}

/* visual editor → editor loading → progress bar (bg) */
.ve-init-mw-progressBarWidget {
    background-color: var(--bg-color-light);
}

/* visual editor → editor loading → progress bar (loading stripe) */
.ve-init-mw-progressBarWidget .ve-init-mw-progressBarWidget-bar {
    background-color: var(--action-color);
}

/* visual editor → toolbar (left part)  */
.ve-init-target-visual > .oo-ui-toolbar > .oo-ui-toolbar-bar {
    background-color: var(--bg-color-light-x3);
    color: var(--text-color);
}

/* visual editor → toolbar → icons */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-iconElement-icon,
/* visual editor → toolbar → arrow down icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-indicator-down {
    filter: invert(100%);
}

/* visual editor → toolbar (whole, one level up from the left one) */
.ve-init-target-visual > .oo-ui-toolbar {
    /* reset */
    margin: 0;
    /* get the same offset that the search box has */
    margin-right: -0.95rem;
    /* get the same offset that the "Page" link has */
    margin-left: -1.25rem;
}

/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
    /* disables selecting of the button text
    same behavior is already present in an available button */
    user-select: none;

    /* just for the button bg */
    transition: background-color 0.1s ease-out;

    background-color: var(--bg-color-light-x5);
}
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) → title */
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title {
    color: var(--text-color-grayed-500);
}

/* visual editor → toolbar (right part) → «save changes» button (available) */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color);
}

/* visual editor → toolbar (right part) → «save changes» button (available) hover */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton:hover {
    background-color: var(--action-color-light-x2);
}

/* visual editor → toolbar (right part) → «save changes» button (available) active */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled.oo-ui-tool-active
    .ve-ui-toolbar-saveButton {
    background-color: var(--action-color-dark-x2);
}

/* visual editor → toolbar (right part) → «save changes» button (available) → label */
.oo-ui-toolbar-actions
    .ve-ui-toolbar-group-save
    .oo-ui-toolGroup-tools
    .oo-ui-widget-enabled
    .ve-ui-toolbar-saveButton
    .oo-ui-tool-title {
    color: var(--text-color);
}

/* visual editor → toolbar → dropdown button (div) hover */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-popupToolGroup-handle:hover,
/* visual editor → toolbar → button (a) hover (except the «save changes» button */
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-tool-link:not(.ve-ui-toolbar-saveButton):hover {
    background-color: var(--bg-color-light-x2);

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

/* visual editor → toolbar → dropdown button (span) active → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-iconElement-icon,
/* visual editor → toolbar → button (span) active (except the «save changes» button → icon */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-iconElement-icon {
    /* rotate from the default dark blue to the the bright, saturated version of cosmoBlue.
    this results in this color: hsl(198, 93%, 49%) */
    filter: brightness(150%) saturate(150%) contrast(180%);
}

/* visual editor → toolbar → tabber icon (only in the «insert» menu afaik) → icon */
.ve-init-target-visual
    > .oo-ui-toolbar
    > .oo-ui-toolbar-bar
    .oo-ui-tool-active
    .oo-ui-icon-tabber {
    /* this icon don't have a default dark blue color when it's active, instead they have just black (which is inverted to white in this theme), so we can't rotate to the proper color. instead here's the same icon but in cosmoBlueBright color. */
    filter: none;
    background-image: var(--icon-tabber-black);
}

/* visual editor → toolbar → dropdown button (span 1 level up) active */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle,
/* visual editor → toolbar → button active (a) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-tool-link {
    background-color: var(--bg-color-light-x3);
}

/* visual editor → toolbar → dropdown button (span) active → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-labelElement-label,
/* visual editor → toolbar → button (span) active (except the «save changes» button → label */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-labelElement-label,
/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-widget.oo-ui-tool-active .oo-ui-tool-title {
    color: var(--action-color-light-x2);
}

/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
    /* remove white bg */
    background: unset;
}

/* visual editor → toolbar → adding new image → caption */
.ve-ui-targetWidget {
    /* set to proper color instead of white */
    border-color: var(--border-color-light);
}


/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools {
    background-color: var(--bg-color-light);
}

/* visual editor → tool popups → button (span) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool {
    background-color: var(--bg-color-light);
}

/* visual editor → tool popups → button (span) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool:hover {
    background-color: var(--bg-color-light-x2);
}

/* visual editor → tool popups → button (span) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active {
    background-color: var(--bg-color-light-x3);
}

/* visual editor → tool popups → button (span) active → label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-tool-title {
    /* more responsive transition */
    transition: color 0.1s ease-out;
}

/* visual editor → tool popups → button (span) active → icon */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    .oo-ui-widget.oo-ui-tool-active
    .oo-ui-iconElement-icon {
}

/* visual editor → tool popups → button (a) */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    color: var(--text-color);
}

/* visual editor → tool popups → button (a) → keybind label */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-accel {
    /* gets hidden on active, since it the same color.
    can we call it a feature? :D */
    color: var(--bg-color-light-x6);
}

/* visual editor → tool popups → button (a) hover */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link:hover,
/* visual editor → tool popups → button (a) active */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
    /* remove the bg color since it's already set in the button.
    this prevents the flicker. */
    background-color: unset;
}

/* visual editor → tool popups → editor mode switch popup → «source editor» button active → label */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-tool-title {
    color: var(--green-color);
}

/* visual editor → tool popups → editor mode switch popup → «source editor» button active → icon */
.oo-ui-toolbar-popups
    .oo-ui-widget.oo-ui-tool-active.oo-ui-tool-name-editModeSource
    .oo-ui-iconElement-icon {
    background-image: var(--se-mode-icon);
}



/* ============ */
/* #region STYLES FROM THE SOURCE */
/* some of the styles below were sourced from https://github.com/wikimedia/mediawiki-extensions-VisualEditor/blob/c295a731ec5ef261e4e5659c30f14b0b1b3e11d2/modules/ve-mw/ui/styles/dialogs/ve.ui.MWTransclusionDialog.css */
/* ============ */

@keyframes ve-modal-opening-backdrop {
    from {
        backdrop-filter: blur(0px);
        background-color: transparent;
    }

    to {
        backdrop-filter: blur(3px);
        background-color: color-mix(in srgb, var(--bg-color) 25%, transparent);
    }
}

/* visual editor → modal container */
.oo-ui-windowManager-modal > .oo-ui-dialog {
    background-color: transparent;
    animation: ve-modal-opening-backdrop 400ms ease-in-out forwards;
}

/* visual editor → modal */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal head */
.oo-ui-windowManager-modal .oo-ui-window-head {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    /* lighter than the usual border color - for visibility */
    outline-color: var(--bg-color-light-x4);
}

/* visual editor → modal head → «apply changes» button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-widget-disabled .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) inactive */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-disabled .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color-inactive);
    border-color: var(--bg-color-light-x3);
}   

/* visual editor → modal head → «apply changes» button (a) */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonElement-button,
/* visual editor → modal → action button (a) */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled .oo-ui-buttonElement-button,
/* visual editor → modal message dialog → action button (a) */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-buttonElement-button,
/* visual editor → save changes modal → «review changes» button (a) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-buttonElement-button {
    color: var(--text-color);
    background-color: var(--action-color);
    border-color: var(--bg-color-light-x4);

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



/* visual editor → modal → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled 
.oo-ui-buttonElement-button:hover,
/* visual editor → modal head → «apply changes» button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget 
.oo-ui-buttonElement-button:hover,
/* visual editor → modal → modal message dialog → action button (a) hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget 
.oo-ui-buttonElement-button:hover,
/* visual editor → save changes modal → «review changes» button (a) hover */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget 
.oo-ui-buttonElement-button:hover {
    color: var(--text-color);
    background-color: var(--action-color-light-x2);
    border-color: var(--bg-color-light-x4); 

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

/* visual editor → modal → action button (a) active */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled 
.oo-ui-buttonElement-button:active,
/* visual editor → modal → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-actionFieldLayout-button .oo-ui-widget-enabled.oo-ui-buttonElement-pressed 
.oo-ui-buttonElement-button:hover,

/* visual editor → modal head → «apply changes» button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget 
.oo-ui-buttonElement-button:active,
/* visual editor → modal head → «apply changes» button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-pressed .oo-ui-buttonElement-button:hover,

/* visual editor → modal → modal message dialog → action button (a) pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed  
.oo-ui-buttonElement-button,
/* visual editor → modal → modal message dialog → action button (a) pressed hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-buttonElement-pressed 
.oo-ui-buttonElement-button:hover,

/* visual editor → save changes modal → «review changes» button (a) active */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget 
.oo-ui-buttonElement-button:active {
    color: var(--text-color);
    background-color: var(--action-color-dark-x2);
    border-color: var(--bg-color-light-x4); 

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



/* visual editor → modal head → close button (a) hover */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:hover,
/* visual editor → modal head → close button (a) active */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button:active {
    background-color: var(--bg-color-light-x2);
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal head → close button (a) → icon */
.oo-ui-windowManager-modal .oo-ui-window-head .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}



/* visual editor → modal footer (which is empty for template modal) */
.oo-ui-processDialog-content .oo-ui-window-foot {
    /* override default */
    outline-color: transparent;
}


/* visual editor → modal → big header (e.g. for template name) */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header,
/* visual editor → modal → medium header (e.g. template param header) */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info {
    color: var(--text-colorStrong);
}

/* visual editor → modal → medium header (e.g. template param header) → "undocumented param" label */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-info .ve-ui-mwParameterPage-undocumentedLabel {
    color: var(--bg-color-light-x4);
}

/* visual editor → modal → big header (e.g. for template name) → puzzle icon  */
.oo-ui-windowManager-modal .oo-ui-fieldsetLayout-header .oo-ui-icon-puzzle {
    filter: invert(92%);
}

/* visual editor → modal → big header (e.g. for template name) → deprecated icon  */
.oo-ui-windowManager-modal .oo-ui-indicatorElement[title="Deprecated field"] {
    /* default is .5 */
    opacity: .8;
    /* same icon, "warning-color-border" color */
    background-image: 
    linear-gradient(transparent,transparent),
    var(--icon-popup-notice-warn-cosmoGreen);
}

/* visual editor → modal → url icon (e.g. for template URL params) */
.oo-ui-windowManager-modal .oo-ui-icon-linkExternal {
    /* default is 0.67 */
    opacity: .8;
    /* same icon, but in "cosmoGreen" color */
    background-image: 
    linear-gradient(transparent,transparent),
    var(--icon-external-link-cosmoGreen);
}

/* visual editor → modal → param description block (like a template param) → entries */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > p {
    color: var(--text-color);
}

/* visual editor → modal (template) → template search block → description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePlaceholderPage .oo-ui-inline-help,
/* visual editor → modal (template) → template description */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description,
/* visual editor → modal → param description block (like a template param) → "deprecated" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-deprecated,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-required,
/* visual editor → modal → param description block (like a template param) → "reqired" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-example,
/* visual editor → modal → param description block (like a template param) → "default" paragraph */
.oo-ui-windowManager-modal .ve-ui-mwParameterPage-doc > .ve-ui-mwParameterPage-doc-default,
/* visual editor → modal → param search results → no results text */
.ve-ui-mwTransclusionOutlineTemplateWidget-no-match {
    color: var(--text-color-grayed-500);
}

/* visual editor → modal (template) → template description hr */
.oo-ui-windowManager-modal .ve-ui-mwTemplatePage-description hr {
    background-color: var(--bg-color-light-x4);
}

/* visual editor → modal → param input (type=text) */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input {
    color: var(--text-color);
    background-color: var(--bg-color-dark);
    border: 1px solid var(--bg-color-light-x2);
}   

/* visual editor → modal → param input (type=text) placeholder */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
    color: var(--bg-color-light-x4);
}   

/* visual editor → modal → param input (type=text) hover */
.oo-ui-windowManager-modal .oo-ui-inputWidget-input:hover,
/* visual editor → modal → param input when a param input dropdown button is hovered  */
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal → param input (type=text) (invalid state) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
    border-color: var(--color-red);
}

/* visual editor → modal → param input (type=text) in invalid state hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:hover {
    border-color: var(--color-red);
}

/* visual editor → modal → required indicator (for params only I guess?) */
.oo-ui-windowManager-modal .oo-ui-indicator-required {
    /* same icon, "warning-color-border" color */
    background-image: 
        linear-gradient(transparent,transparent),
        var(--icon-asterisk-yellow);
}

/* visual editor → modal → param input dropdown button (for suggested values) */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color);
    border-color: var(--bg-color-light-x2);
    border-left: none;
}

/* visual editor → modal → param input dropdown button (for suggested values) hover */
.oo-ui-windowManager-modal .oo-ui-widget-enabled .oo-ui-comboBoxInputWidget-dropdownButton a:hover,
/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    background-color: var(--bg-color-light);
    /* default override */
    border-color: var(--bg-color-light-x3);
} 

/* visual editor → modal → param input dropdown button (for suggested values) when dropdown is open */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton a {
    /* disable default transition, so the color will change instantly, because dropdown appears instantly too */
    transition: background-color 0s;
}

/* visual editor → modal → param input dropdown button (for suggested values) → icon */
.oo-ui-windowManager-modal .oo-ui-comboBoxInputWidget-dropdownButton a .oo-ui-indicatorElement-indicator {
    filter: invert(100%);
} 



/* visual editor → modal → "add undocumented paramter" block → button hover  */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button:hover {
    background-color: var(--bg-color-light);
}

/* visual editor → modal → "add undocumented paramter" block → button → icon */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-iconElement-icon  {
    filter: invert(100%);
}

/* visual editor → modal → "add undocumented paramter" block → button → label */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-buttonElement-button .oo-ui-labelElement-label {
    color: var(--text-color);
}

/* visual editor → modal → "add undocumented paramter" block → description */
.oo-ui-windowManager-modal .ve-ui-mwTransclusionDialog-addParameterFieldset .oo-ui-inline-help  {
    color: var(--bg-color-light-x4);
}



/* visual editor → modal → modal message dialog → action button (a) focus */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button:focus,
/* visual editor → save changes modal → «review changes» button (a) focus */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonElement-button:focus {
    border-color: var(--bg-color-light-x4); 
}



/* visual editor → modal → modal message dialog → "destructive" action button */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red);

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

/* visual editor → modal → modal message dialog → "destructive" action button hover */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:hover  {
    background-color: var(--color-red-light);

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

/* visual editor → modal → modal message dialog → "destructive" action button pressed */
.oo-ui-windowManager-modal .oo-ui-messageDialog-actions .oo-ui-widget-enabled.oo-ui-buttonElement-pressed.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button  {
    background-color: var(--color-red-dark);

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



/* visual editor → modal → left menu */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu {
    border-color: var(--bg-color-light-x2);
}

/* visual editor → modal → left menu → search block */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky {
    /* override default */
	background-color: var(--bg-color);
}

/* visual editor → modal → left menu → search block → query input → placeholder */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky input::placeholder {
    color: var(--bg-color-light-x4);
}

/* visual editor → modal → search icon */
.oo-ui-windowManager-modal .oo-ui-icon-search {
    filter: invert(100%);
}


/* visual editor → modal → left menu → search block → "hide unused" (params) button → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label {
    color: var(--action-color-light-x2);

    transition: color 100ms ease-in;
}

/* visual editor → modal → left menu → search block → "hide unused" (params) button hover → label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu .ve-ui-mwTransclusionOutlineTemplateWidget-sticky .ve-ui-mwTransclusionOutlineToggleUnusedWidget .oo-ui-labelElement-label:hover {
    color: var(--action-color-light-x3);

    transition: color 100ms ease-out; 
}

/* visual editor → modal → left menu → params container → item */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * {
    color: var(--text-color);
    background-color: var(--bg-color);

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

/* visual editor → modal → left menu → params container → item checkbox disabled checked → bg */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * input[type=checkbox][disabled] + span {
    background-color: var(--bg-color-light-x3);
    border-color: var(--bg-color-light-x4);
}

/* visual editor → modal → left menu → params container → item hover */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > *:hover {
    color: var(--text-color);
    background-color: var(--bg-color-light);

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

/* visual editor → modal → left menu → params container → item label */
.oo-ui-windowManager-modal .oo-ui-menuLayout-menu div[role='listbox'] > * .oo-ui-labelElement-label {
    color: var(--text-color);
}



/* visual editor → modal → popup windows and such */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable {
    background-color: var(--bg-color-light);
    border-color: var(--bg-color-light-x3);
}

/* visual editor → modal → popup windows and such → item */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled {
    background-color: var(--bg-color-light);
    color: var(--text-color);
}

/* visual editor → modal → popup windows and such → item hover */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled:hover {
    background-color: var(--bg-color-light-x2);
}

/* visual editor → modal → popup windows and such → item pressed (mouse down) */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-pressed,
/* visual editor → modal → popup windows and such → item selected */
.oo-ui-windowManager-modal .oo-ui-floatableElement-floatable > .oo-ui-widget-enabled.oo-ui-optionWidget-selected{
    color: var(--text-colorStrong);
    background-color: var(--bg-color-light-x3);

    transition: 
        color 100ms ease-out,
        text-shadow 100ms ease-out,
        background-color 100ms ease-out;
}



/* visual editor → modal → help button */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement  > .oo-ui-buttonElement-button {
    background-color: var(--text-color);
    transition: background-color 100ms ease-out;
}

/* visual editor → modal → help button active */
.oo-ui-windowManager-modal .ve-ui-mwFloatingHelpElement .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    transition: background-color 100ms ease-out;
}


/** visual editor → modal → something loading "stripes" */
.oo-ui-windowManager-modal .oo-ui-pendingElement-pending {
    --strip-col: var(--bg-color-light-x2);

    background-image: linear-gradient(
        135deg,
        var(--strip-col) 25%,
        transparent 25%,
        transparent 50%,
        var(--strip-col) 50%,
        var(--strip-col) 75%,
        transparent 75%,
        transparent
    );
}

/** visual editor → modal → template search results block → item → description */
.oo-ui-windowManager-modal .mw-widget-titleWidget-menu .mw-widget-titleOptionWidget-description {
    color: var(--text-color);
    /* disable text shadow enabled for selected elements */
    text-shadow: none;
}



/** visual editor → modal message dialog → */
.oo-ui-windowManager-modal.oo-ui-windowManager-floating .oo-ui-messageDialog .oo-ui-window-frame {
    border-color: var(--bg-color-light-x3);
}

/** visual editor → modal message dialog → title */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-messageDialog-title {
    color: var(--action-color-light-x2);
    font-weight: bold;
}

/** visual editor → modal message dialog → message */
.oo-ui-windowManager-modal .oo-ui-messageDialog .oo-ui-window-frame .oo-ui-labelElement-label {
    color: var(--text-color);
}

 

/* visual editor → save changes modal → summary */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-summary {
    background-color: inherit;
}

/* visual editor → save changes modal → options (where the checkboxes are) */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options {
    background-color: inherit;
    border: none;
}

/* visual editor → save changes modal → options → checkboxes container */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog .ve-ui-mwSaveDialog-options .ve-ui-mwSaveDialog-checkboxes {
    padding-left: 0;
}

/* visual editor → save changes modal → copyright warning */
.oo-ui-windowManager-modal .ve-ui-mwSaveDialog #editpage-copywarn {
    color: var(--bg-color-light-x3);
}



/* visual editor → popups  */
.oo-ui-popupWidget-popup {
    background-color: var(--bg-color-light);
    color: var(--text-color);
    border-color: var(--border-color);
}


/* table editor → context menu → item */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem .oo-ui-buttonElement-button {
    color: var(--text-color);
}

/* table editor → context menu → item :hover */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem .oo-ui-buttonElement-button:hover {
    color: var(--text-color);
    background-color: color-mix(in srgb, var(--bg-color-light-x7) 25%, transparent);
}

/* table editor → context menu → item (disabled) */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem:has(> *.oo-ui-widget-disabled),
/* table editor → context menu → item (disabled) */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem:has(> *.oo-ui-widget-disabled) .oo-ui-buttonElement-button {
    background-color: var(--bg-color);
    color: var(--text-color-grayed-500);
}


.ve-ui-tableLineContext-menu .ve-ui-contextItem + .ve-ui-contextItem {
    border-top-color: var(--border-color-light-x2);
}


/* table editor → context menu → item → icon */
.ve-ui-tableLineContext-menu .ve-ui-tableLineContextItem .oo-ui-buttonElement-button .oo-ui-iconElement-icon:not(.oo-ui-icon-trash) {
    filter: invert(100%);
}

/* #endregion */

/* ============ */
/* #region =🖌️= VISUAL EDITOR BORDERS =🖌️= */
/* ============ */

/* visual editor → tool popups */
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools,
/* visual editor → toolbar → paragraph button (I think?) */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-menuToolGroup,
/* visual editor → toolbar → dropdown button (span) hover */
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-handle:hover {
    border-color: var(--border-color-light);
}

/* #endregion */

/* #endregion */


/* ============ */
/* #region LUA */
/* ============ */

:root {
    /* ldp = Lua Debug Panel */
    --ldp-elements-padding: .25em;
    --ldp-control-elements-padding: .5em;
}

/* lua module debug panel */
#mw-scribunto-console .mw-scribunto-console-fieldset {
    background: var(--bg-color-light-x2);
    color: var(--text-color);
    padding: .5em 0;
    border: 1px solid var(--action-color);
}

/* lua module debug panel → header */
.mw-scribunto-console-fieldset > legend {
    margin-left: 1em;
}

/* lua module debug panel → output → output elements */
#mw-scribunto-output > * {
    padding: 0 var(--ldp-elements-padding);
}

/* lua module debug panel → output → printed input */
.mw-scribunto-input {
    font-family: monospace;
	font-weight: normal;
    color: var(--code-color-text);
    background-color: transparent;
    border-color: var(--code-color-border);

    margin: .5em 0;

    /* better visibility */
    font-size: 1.1em;
}


/* lua module debug panel → input field container element */
div:has(#mw-scribunto-input) {
    padding: var(--ldp-control-elements-padding);
}

/* lua module debug panel → input field */
#mw-scribunto-input {
    background-color: var(--bg-color-light-x4);
}

/* lua module debug panel → "Clear" button container */
#mw-scribunto-console div:has(input[type=button][value=Clear]) {
    padding: var(--ldp-control-elements-padding);
}

/* lua module debug panel → output → result of the execution */
#mw-scribunto-output .mw-scribunto-normalOutput,
/* lua module debug panel → output → logs from the code */
.mw-scribunto-print {
    font-family: monospace;
    color: var(--code-color-text);
    background: var(--code-color-bg);

    padding-top: .5em;
    padding-bottom: .5em;

    outline: .1em solid var(--green-color-dark);
}

/* lua module debug panel → output → logs from the code */
.mw-scribunto-print {
    outline: none;
}

/* lua module debug panel → error block */
.mw-scribunto-error {
    color: var(--text-color);
    background-color: var(--danger-color-dark-x2);
    border-color: var(--danger-color-border);
}

/* .mw-scribunto-propList {
    color: #008000;
    background: #fff;
} */

/* lua module debug panel → message block */
.mw-scribunto-message {
    color: var(--text-color);
    border-color: var(--border-color-light);
    background-color: var(--bg-color-light-x4);
}

/* .mw-scribunto-tabcomplete {
    color: #800080;
    background: #fff;
} */

.mw-scribunto-clear {
    color: var(--text-color);
    background-color: var(--action-color);
    border-bottom: 3px dashed var(--action-color-light-x2);
    border-top: 3px dashed var(--action-color-light-x2);
}

/* #endregion */



/* ============ */
/* #region Json Pages */
/* ============ */

.mw-json {
    border-color: var(--border-color-light-x2);
}

.mw-json tr {
    background-color: unset;
}

.mw-json th,
.mw-json td {
    font-family: monospace;
    border-color: var(--code-color-border);
    color: var(--code-color-text);
}

.mw-json th {
    background-color: var(--code-color-bg-light);
    border: 1px solid var(--border-color-light);
}

.mw-json-value,
.mw-json-single-value,
.mw-json td {
    background-color: var(--code-color-bg);
}

.mw-json-single-value {
    background-color: unset
}

.mw-json-empty {
    background-color: unset;
}

/* #endregion */

/* ============ */
/* #region DRUID Infoboxes */
/* ============ */

/* DRUID Infobox. */
/* source: https://support.wiki.gg/wiki/MediaWiki:Gadget-druidInfoboxes.css */
/* license: CC BY-SA 4.0 */

/****************************************/
/*******  Start DRUID CSS rules *********/
/****************************************/

.druid-container {
    /* These variables are designed to inherit from your wiki's color variables.
       If your wiki uses a different naming scheme, change the inner names to match yours.
       If your wiki doesn't use color variables you should consider doing so,
       otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
    */
    --druid-background-color: var(--wiki-content-background-color, #ffffff);
    
    --druid-secondary-background-color: var(--wiki-accent-color, #36c);
    --druid-secondary-background-label-color: var(--wiki-accent-label-color, #fff);
    
    --druid-tertiary-background-color: var(--wiki-content-background-color--secondary, #eaecf0);
    
    --druid-border-color: var(--wiki-content-border-color, #a7d7f9);
    
    --druid-link-color: var(--wiki-content-link-color, #0645ad);
    --druid-link-label-color: var(--wiki-content-link-label-color, #fff);
}

/* ---------------------------------  */
/*    Safe to edit ABOVE this line    */
/* ---------------------------------  */

/* ---------------------------------  */
/*     Do not edit below this line    */
/* ---------------------------------  */

.druid-container {
    border: 4px solid var(--druid-border-color);
    border-radius: 3px;
    background: var(--druid-background-color);
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
	width:100%;
	max-width:22em;
    box-sizing: border-box;
    border-collapse: collapse;
}

@media screen and (max-width: 720px) {
  .druid-container {
    float: none;
    margin: 0.5rem auto;
  }
}

.druid-main-images-file,
.druid-main-image {
    text-align:center;
}

.druid-infobox .druid-title,
.druid-infobox .druid-section {
    background:var(--druid-secondary-background-color); /* fallback */
    background:color-mix(in srgb, var(--druid-secondary-background-color) 75%, transparent);
    color:var(--druid-secondary-background-label-color);
    text-align:center;
    font-size:1.5em;
    padding:1px;
}

.druid-infobox .druid-section {
    font-size: 1.25em;
    font-weight: 500;
}

.druid-infobox  .druid-collapsible .druid-section {
	flex-grow: 1;
}

.druid-label {
    font-weight:bold;
    text-align: right;
	box-sizing: border-box;
}

.druid-row > .druid-label {
    width: 48%;
    flex-shrink: 0;
}

.druid-row > .druid-label,
.druid-row > .druid-data {
	padding-inline: 0.3em;
}

.druid-main-image,
.druid-main-images {
    padding:5px;
}

.druid-main-image img, 
.druid-main-images img {
    max-width:100%;
    height:auto;
}

.druid-main-images-labels {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-evenly;
    margin:0.25em;
    gap:0.25em;
}

.druid-main-images-label {
    cursor:pointer;
    flex:1 1 auto;
    text-align:center;
    transition:.1s ease-in;
    outline:1px solid var(--druid-link-color);
}

.druid-main-images-label.focused {
    background:var(--druid-link-color);
    color:var(--druid-link-label-color);
}

.druid-main-images-label:not(.focused):hover {
    background:var(--druid-link-color); /* fallback */
    background:color-mix(in srgb, var(--druid-link-color) 25%, transparent);
}

.druid-toggleable-data:not(.focused),
.druid-main-images-file:not(.focused),
.druid-toggleable-heading:not(.focused) {
    display:none;
}

.druid-row:not(:has(.druid-grid)):has(.druid-toggleable-data-empty.focused) {
    display:none;
}

.druid-section:has(.druid-toggleable-heading-empty.focused) {
    display:none;
}

.druid-grid {
    display:grid;
    gap: 0.3em;
	padding: 0.35em;
}

.druid-grid-item {
    background:var(--druid-tertiary-background-color);
    padding:0.25em;
    border:1px solid var(--druid-border-color); /* fallback */
    border:1px solid color-mix(in srgb, var(--druid-border-color) 50%, transparent);
    border-radius: 2px;
}

.druid-grid-item .druid-label,
.druid-grid-item .druid-data {
	text-align: center;
}

.druid-data-wide {
	width:100%;
}

.druid-section-container > .druid-collapsible {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.druid-collapsed {
    display:none!important;
}

.druid-collapsible {
    cursor:pointer;
    position:relative;
}

.druid-collapsible::after {
	content: "";
	display: block;
	position: absolute;
	right: 10px;
	width: 20px;
	height: 20px;
	--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E collapse %3C/title%3E%3Cpath d='M1 13.75l1.5 1.5 7.5-7.5 7.5 7.5 1.5-1.5-9-9-9 9z'/%3E%3C/svg%3E") no-repeat;
	-webkit-mask: var(--mask);
	mask: var(--mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center center;
	mask-position: center center;
	background-color: var(--druid-secondary-background-label-color);
}

.druid-collapsible-collapsed::after {
	transform: rotate(180deg);
}

.druid-section-container:has(.druid-toggleable-data-empty.focused):not(:has(.druid-toggleable-data-nonempty.focused)):not(:has(.druid-data-nonempty)) {
  display: none;
}

/*****************************************
Div support
*****************************************/

div.druid-row {
    display:flex;
    margin-block: 1px;
}

div.druid-row + div.druid-row {
	margin-top: 0;
}

div.druid-row > .druid-label {
	background: var(--druid-tertiary-background-color);
}

.druid-infobox .druid-title {
  font-weight: 700;
}

.druid-infobox #toc {
    display:none;
}


/********
Custom display classes
*********/

div.druid-stacked.druid-row,
.druid-stacked div.druid-row {
    flex-direction: column;
}

.druid-stacked.druid-row > .druid-label,
.druid-stacked .druid-row > .druid-label {
    text-align: left;
    width: 100%;
    flex-basis:unset;
}

.druid-stacked.druid-row > .druid-data,
.druid-stacked .druid-row > .druid-data {
    padding-left: .75em;
}

/* ---------------------------------  */
/*    Do not edit above this line     */
/* ---------------------------------  */

/* ---------------------------------  */
/* Local overrides go below this line */
/* ---------------------------------  */

.druid-infobox .druid-title {
    --clip: 0.6em;
    clip-path: polygon( 0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)) );
    margin: 3px;
}

/* labels */
.druid-infobox .druid-row > .druid-label {
    width: 14ch;
}

/* values */
.druid-infobox .druid-data {
    /* break words that are too long */
    word-break: break-word;
}

/****************************************/
/*******  End DRUID CSS rules   *********/
/****************************************/

/* #endregion */

/* ============ */
/* #region RANGER Navbox */
/* ============ */

/* RANGER Navbox. */
/* source: https://support.wiki.gg/wiki/RANGER_navboxes */
/* license: CC BY-SA 4.0 */


/** as of Module:navbox version 1.2.2 **/

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

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

/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.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;
}

/* TODO: :not() can maybe be used here to remove the later rule. naive test
 * seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
	content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
	/* "space, Middle Dot, space" 
	We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
	The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
	/* content: "\20\00B7\20"; font-weight: bold; */
    /* "space &nbsp; • &nbsp; space" 
       There may (and likely) be an extra whitespace between <li>s, 
       therefore we have to use a space character as last character of this sequence. 
       By this way, the last space and the next whitespce will collapse as a single space,
       to make the whitespace on both sides of the middle dot the same width.
    */
	content: "\20\A0\2022\A0\20"; 
	font-weight: inherit;
}

/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
	content: "\20(";
	font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
	content: ")";
	font-weight: inherit;
}

/* 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) ".\20";
}

/* Progressive enhancement:
 * try to make the dot always follow the list item in same line
 */
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))){
	display: inline-block;
}

/********************************************
* End semantically-correct horizontal lists *
*********************************************/

/**********************************************************
* Template:Navbox (RANGER) (needs semantic horizontal lists above) *
***********************************************************/
.ranger-navbox{
  --navbox-background: var(--wiki-content-background-color--secondary); /* for entire navbox */
  --navbox-margin: 0.5em auto;
  --navbox-padding: 4px;
  --navbox-gap: 3px; /* when using zero-value, it must be 0px */
  --navbox-outer-border-color: var(--wiki-content-border-color--accent);
  --navbox-outer-border-width: 0;
  --navbox-outer-border-style: solid;
  --navbox-outer-border-radius: 0px;
  --navbox-font-size: calc(1em - 2px);
  --navbox-title-color: var(--wiki-accent-label-color);
  --navbox-title-font-size: calc(125%);
  --navbox-title-background: var(--wiki-accent-color);
  --navbox-title-icon-color: var(--wiki-accent-label-color);
  --navbox-title-link-color: var(--navbox-title-color);
  --navbox-title-link-color--visited: var(--navbox-title-link-color);
  --navbox-title-link-color--hover: var(--wiki-accent-link-color);
  --navbox-title-redlink-color: var(--navbox-title-link-color);
  --navbox-title-link-decoration: underline solid;
  --navbox-title-redlink-decoration: underline wavy;
  --navbox-title-padding--y: 0.5em;
  --navbox-above-background: color-mix(in srgb, var(--wiki-content-text-color) 15%, transparent);
  --navbox-above-color: var(--wiki-content-text-color);
  --navbox-above-padding: var(--navbox-list-padding);
  --navbox-below-background: var(--navbox-above-background);
  --navbox-below-color: var(--navbox-above-color);
  --navbox-below-padding: var(--navbox-above-padding);
  --navbox-header-color: var(--navbox-title-color);
  --navbox-header-font-size: calc(110%);
  --navbox-header-background: var(--navbox-title-background);
  --navbox-header-icon-color: var(--navbox-title-icon-color);
  --navbox-header-link-color: var(--navbox-title-link-color);
  --navbox-header-link-color--visited: var(--navbox-title-link-color--visited);
  --navbox-header-link-color--hover: var(--navbox-title-link-color--hover);
  --navbox-header-redlink-color: var(--navbox-title-redlink-color);
  --navbox-header-link-decoration: var(--navbox-title-link-decoration);
  --navbox-header-redlink-decoration: var(--navbox-title-redlink-decoration);
  --navbox-header-padding--y: 0.3em;
  --navbox-subheader-font-size: calc(100%);
  --navbox-subheader-padding--y: calc(var(--navbox-header-padding--y)/2);
  --navbox-list-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 8%, transparent);
  --navbox-list-color: var(--wiki-content-text-color);
  --navbox-list-padding: 0.25em 0.5em;
  /* --navbox-group-* also apply to .ranger-subgroup */
  --navbox-group-text-align: left;
  --navbox-group-text-align--mobile: left; /* only for mobile view */
  --navbox-group-background: var(--bg-color-light-x3);
  --navbox-group-color: var(--wiki-content-text-color);
  --navbox-group-padding: var(--navbox-list-padding);
  --navbox-tree-line-color: color-mix(in srgb, var(--wiki-accent-color) 30%, transparent);
  --navbox-tree-line-width: 2px;
  --navbox-tree-indent: 1em;
  --navbox-tree-line-indent: 0.5em;
  --navbox-tree-line-spacing: var(--navbox-gap);
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-chevron-down' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M6 9l6 6l6 -6'%3E%3C/path%3E%3C/svg%3E");
  --icon-metalinks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-edit' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1'%3E%3C/path%3E%3Cpath d='M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z'%3E%3C/path%3E%3Cpath d='M16 5l3 3'%3E%3C/path%3E%3C/svg%3E");
  --navbox-icon-offset--x: 0.5rem; /* should be an absolute length (rem-based or px-based) */
}
.ranger-navbox.pill, 
.ranger-navbox.pill-mobile{
  /** vars for the "pill" style only (`.pill` and ".pill-mobile" clases) **/
  --navbox-pill-gap: 0.3em;
  --navbox-pill-padding: 0.25em 0.75em;
  --navbox-pill-border-radius: 3px;
  --navbox-pill-box-shadow: none;
  --navbox-pill-background: color-mix(in srgb, var(--wiki-content-text-color) 5%, transparent);
  --navbox-pill-box-shadow--hover: inset 0 0 3px var(--navbox-list-color);
  --navbox-pill-background--hover: color-mix(in srgb, var(--wiki-content-text-color) 10%, transparent);
  /* remove list cell background */
  --navbox-list-background: none;
  --navbox-list-background--striped: color-mix(in srgb, var(--wiki-content-text-color) 3%, transparent);
}
.ranger-navbox.no-underline-title-links{
  --navbox-title-link-color: var(--wiki-accent-link-color);
  --navbox-title-link-decoration: none;
  --navbox-title-redlink-decoration: none;
}
.ranger-navbox.noborder,
.ranger-navbox.no-border{
  --navbox-padding: 0px;
  --navbox-outer-border-width: 0px;
}

/******************************
* Fallback for older browsers *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
	.ranger-navbox {
		--navbox-above-background: var(--wiki-content-background-color--secondary);
		--navbox-list-background: transparent;
		--navbox-list-background--striped: var(--wiki-content-background-color--secondary);
		--navbox-group-background: var(--wiki-content-background-color--secondary);
		--navbox-tree-line-color: var(--wiki-content-background-color--secondary);
	}
	.ranger-navbox.pill, 
	.ranger-navbox.pill-mobile {
	  --navbox-pill-background: var(--wiki-content-background-color--secondary);
	  --navbox-list-background--striped: transparent;
	}
}
/***************
* End fallback *
****************/

.ranger-navbox{
  border-color: var(--navbox-outer-border-color);
  border-style: var(--navbox-outer-border-style);
  border-width: var(--navbox-outer-border-width);
  border-radius: var(--navbox-outer-border-radius);
  padding: var(--navbox-padding);
  font-size: var(--navbox-font-size);
  margin: var(--navbox-margin);
  background: var(--navbox-background);
  line-height: 1.5;
  clear:both;
}

.ranger-navbox * {
  border: 0;
}
.ranger-navbox .center *{
  margin-left: unset;
  margin-right: unset;
}
.ranger-navbox, 
.ranger-navbox .ranger-section,
.ranger-navbox .ranger-listbox{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-title,
.ranger-navbox .ranger-header{
  text-align: center;
  min-height: 1.5em;
  position: relative;
  z-index: 0;
  font-weight: bold;
}
.ranger-navbox .ranger-title{
  color: var(--navbox-title-color);
  background: var(--navbox-title-background);
  font-size: var(--navbox-title-font-size);
  padding: var(--navbox-title-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a:visited,
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited,
.ranger-navbox .ranger-title a.external:hover {
	text-decoration: var(--navbox-title-link-decoration);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited {
	text-decoration: var(--navbox-title-redlink-decoration);
}
.ranger-navbox .ranger-title a,
.ranger-navbox .ranger-title a.external,
.ranger-navbox .ranger-title a.external:visited {
  color: var(--navbox-title-link-color);
}
.ranger-navbox .ranger-title a:visited{
  color: var(--navbox-title-link-color--visited);
}
.ranger-navbox .ranger-title a.new,
.ranger-navbox .ranger-title a.new:visited{
    color:var(--navbox-title-redlink-color);
}
.ranger-navbox .ranger-title a:hover,
.ranger-navbox .ranger-title a:visited:hover,
.ranger-navbox .ranger-title a.external:hover,
.ranger-navbox .ranger-title a.external:visited:hover {
  color:var(--navbox-title-link-color--hover);
}
.ranger-navbox .ranger-header{
  color: var(--navbox-header-color);
  background: var(--navbox-header-background);
  font-size: var(--navbox-header-font-size);
  padding: var(--navbox-header-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-sublist .ranger-header{
  font-size: var(--navbox-subheader-font-size);
  padding: var(--navbox-subheader-padding--y) calc(1.5em + var(--navbox-icon-offset--x)); /* left and right padding equal to the size and position of the edit/collapse buttons */
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a:visited,
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited,
.ranger-navbox .ranger-header a.external:hover {
	text-decoration: var(--navbox-header-link-decoration);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited {
	text-decoration: var(--navbox-header-redlink-decoration);
}
.ranger-navbox .ranger-header a,
.ranger-navbox .ranger-header a.external,
.ranger-navbox .ranger-header a.external:visited {
  color: var(--navbox-header-link-color);
}
.ranger-navbox .ranger-header a:visited{
  color: var(--navbox-header-link-color--visited);
}
.ranger-navbox .ranger-header a.new,
.ranger-navbox .ranger-header a.new:visited{
    color:var(--navbox-header-redlink-color);
}
.ranger-navbox .ranger-header a:hover,
.ranger-navbox .ranger-header a:visited:hover,
.ranger-navbox .ranger-header a.external:hover,
.ranger-navbox .ranger-header a.external:visited:hover {
  color:var(--navbox-header-link-color--hover);
}
.ranger-navbox .ranger-meta{
  font-size: var(--navbox-title-font-size);
  position: absolute;
  left: var(--navbox-icon-offset--x);
  top: calc(var(--navbox-title-padding--y) + 0.08em); /* 0.08em: vertial offset tweak based on the icon graph */
  display: block;
}
.ranger-navbox .ranger-meta .nv{
  --mask: var(--icon-metalinks);
  display: block;
  width: 0.84em; /* based on the icon graph */
  height: 0.84em;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
}
.ranger-navbox .ranger-meta .nv > a{
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.ranger-navbox .ranger-meta .nv > a > span{
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ranger-navbox .ranger-meta:has(.mw-selflink){
	display: none;
}
.ranger-navbox,
.ranger-navbox .ranger-section{
  position: relative;
}
.ranger .mw-collapsible-toggle-placeholder{
  display: none;
}
.ranger-navbox .ranger-title > .ranger-title-text,
.ranger-navbox .ranger-header > .ranger-header-text{
  pointer-events: none;
}
.ranger-navbox .ranger-title > .ranger-title-text a,
.ranger-navbox .ranger-header > .ranger-header-text a{
  pointer-events: auto;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle,
.ranger-navbox .ranger-header > .mw-collapsible-toggle{
  --mask: var(--icon-chevron-down);
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  overflow:hidden;
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  width: 1.5em;
  height: 1.5em;
  right: var(--navbox-icon-offset--x);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-sublist .ranger-header > .mw-collapsible-toggle{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  right: var(--navbox-icon-offset--x);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center center;
  mask-position: center center;
  background-color: var(--navbox-title-icon-color);
  transform: scaleY(-1);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle::before{
  top: var(--navbox-title-padding--y);
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-header-padding--y);
}
.ranger-navbox .ranger-sublist .ranger-header > .mw-collapsible-toggle::before{
  top: var(--navbox-subheader-padding--y);
}
.ranger-navbox.small-collapsible-toggle-click-area .ranger-title > .mw-collapsible-toggle::before,
.ranger-navbox.small-collapsible-toggle-click-area .ranger-header > .mw-collapsible-toggle::before{
  top: 0;
  right: 0;
}
.ranger-navbox .ranger-header > .mw-collapsible-toggle::before{
  background-color: var(--navbox-header-icon-color);
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before,
.ranger-navbox .ranger-header > .mw-collapsible-toggle.mw-collapsible-toggle-collapsed::before{
  transform: none;
}
.ranger-navbox .ranger-title > .mw-collapsible-toggle *,
.ranger-navbox .ranger-title > .mw-collapsible-toggle::after,
.ranger-navbox .ranger-header > .mw-collapsible-toggle *,
.ranger-navbox .ranger-header > .mw-collapsible-toggle::after{
  display: none;
}
.ranger-navbox .ranger-list{
  width: unset;
  padding: var(--navbox-list-padding);
}
.ranger-navbox .ranger-above{
  background: var(--navbox-above-background);
  color: var(--navbox-above-color);
  padding: var(--navbox-above-padding);
  width: unset;
}
.ranger-navbox .ranger-below{
  background: var(--navbox-below-background);
  color: var(--navbox-below-color);
  padding: var(--navbox-below-padding);
  width: unset;
}
.ranger-navbox .ranger-sublist{
  display: flex;
  flex-direction: column;
  gap: var(--navbox-gap);
}
.ranger-navbox .ranger-section-body{
  display: grid;
  gap: var(--navbox-gap);
  grid-template-columns: auto minmax(0,1fr);
}
.ranger-navbox .ranger-row{
  display: contents;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup{
  text-align: var(--navbox-group-text-align);
  white-space: nowrap;
  font-weight: bold;
  background: var(--navbox-group-background);
  color: var(--navbox-group-color);
  padding: var(--navbox-group-padding);
  width: unset;
}
/* for desktop view */
.ranger-navbox.group-align-left .ranger-group,
.ranger-navbox.group-align-left .ranger-subgroup{
  --navbox-group-text-align: left;
}
.ranger-navbox.group-align-center .ranger-group,
.ranger-navbox.group-align-center .ranger-subgroup{
  --navbox-group-text-align: center;
}
.ranger-navbox.group-align-right .ranger-group,
.ranger-navbox.group-align-right .ranger-subgroup{
  --navbox-group-text-align: right;
}
/* for mobile view */
.ranger-navbox.mobile-group-align-left .ranger-group,
.ranger-navbox.mobile-group-align-left .ranger-subgroup{
  --navbox-group-text-align--mobile: left;
}

.ranger-navbox.mobile-group-align-center .ranger-group,
.ranger-navbox.mobile-group-align-center .ranger-subgroup{
  --navbox-group-text-align--mobile: center;
}

.ranger-navbox.mobile-group-align-right .ranger-group,
.ranger-navbox.mobile-group-align-right .ranger-subgroup{
  --navbox-group-text-align--mobile: right;
}

.ranger-navbox .ranger-listbox > .ranger-wrap{
  background: var(--navbox-list-background);
  color: var(--navbox-list-color);
  flex-grow: 1;
}
.ranger-navbox .ranger-sublist{
  flex-grow: var(--count);
}
.ranger-navbox .ranger-listbox:first-child{ /* A list-n without group-n */
  grid-column-end: span 2;
}
.ranger-navbox .ranger-group,
.ranger-navbox .ranger-subgroup,
.ranger-navbox .ranger-listbox > .ranger-wrap{
  display: grid;
  justify-items: stretch;
  align-items: center;
}
.ranger-navbox.striped-even .ranger-even,
.ranger-navbox.striped-odd .ranger-odd{
  background: var(--navbox-list-background--striped);
}
/* make links use full line height (larger click box)*/
.ranger-navbox .hlist a{
	display: inline-block;
}

.ranger-navbox .align-left,
.ranger-navbox .alignleft{
  text-align: left;
}
.ranger-navbox .align-center,
.ranger-navbox .aligncenter{
  text-align: center;
}
.ranger-navbox .align-right,
.ranger-navbox .alignright{
  text-align: right;
}

/* responsive */
@media screen and (max-width: 720px) {
  .ranger-navbox .ranger-section-body,
  .ranger-navbox .ranger-sublist {
    display: flex;
    flex-flow: column;
  }
  .ranger-navbox .ranger-row{
    display: block;
  }
  .ranger-navbox .ranger-group + .ranger-listbox > .ranger-sublist:first-child,
  .ranger-navbox .ranger-subgroup + .ranger-listbox > .ranger-sublist:first-child{
    margin-top: var(--navbox-gap);
  }
  .ranger-navbox .ranger-listbox.empty{
    display: none;
  }
  .ranger-navbox .ranger-group,
  .ranger-navbox .ranger-subgroup{
    text-align: var(--navbox-group-text-align--mobile);
    white-space: normal;
  }
  
  .ranger-navbox .ranger-sublist {
    padding-left: var(--navbox-tree-indent);
    margin-left: var(--navbox-tree-line-indent);
  }
  .ranger-navbox .ranger-subgroup,
  .ranger-navbox .ranger-listbox {
    position:relative;
  }
  .ranger-navbox .ranger-group br,
  .ranger-navbox .ranger-subgroup br{
    display: none;
  }
  .ranger-navbox .ranger-sublist > .ranger-section > .ranger-header{
    margin-left: calc( 0px - var(--navbox-tree-indent) - var(--navbox-tree-line-indent));
  }
  .ranger-navbox .ranger-sublist .ranger-row > ::before{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent));
    top: 0;
    width: var(--navbox-tree-line-width);
    height: 100%;
    content: '';
    display: block;
    background-color: var(--navbox-tree-line-color);
  }
  .ranger-navbox .ranger-sublist .ranger-row > .ranger-listbox::before,
  .ranger-navbox .ranger-row.empty-list > .ranger-subgroup::before{
    height: calc(100% + var(--navbox-gap));
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > ::before {
    display: none;
  }
  .ranger-navbox .ranger-sublist .ranger-row:last-child > :first-child::before {
    display: block;
    height: calc(50% + var(--navbox-tree-line-width)/2);
  }
  .ranger-navbox .ranger-subgroup::after,
  .ranger-navbox .empty-group > .ranger-listbox > .ranger-wrap::after{
    position: absolute;
    left: calc(0px - var(--navbox-tree-indent) + var(--navbox-tree-line-width));
    width: calc(var(--navbox-tree-indent) - var(--navbox-tree-line-spacing) - var(--navbox-tree-line-width));
    height: var(--navbox-tree-line-width);
    content: '';
    background-color: var(--navbox-tree-line-color);
  }
  /* increase height for links */
  .ranger-navbox .hlist{
    line-height: 2;
  }
}
/**** `.pill` class: the "pill" style  ****/
/* remove middle dots betweem items */
.ranger-navbox.pill .hlist dd:not(:last-child)::after,
.ranger-navbox.pill .hlist li:not(:last-child)::after{
  display: none;
}
/* remove parentheses around nested lists*/
.ranger-navbox.pill .hlist dd ol::before,
.ranger-navbox.pill .hlist dd ul::before,
.ranger-navbox.pill .hlist dd dl::before,
.ranger-navbox.pill .hlist dt ol::before,
.ranger-navbox.pill .hlist dt ul::before,
.ranger-navbox.pill .hlist dt dl::before,
.ranger-navbox.pill .hlist li ol::before,
.ranger-navbox.pill .hlist li ul::before,
.ranger-navbox.pill .hlist li dl::before,
.ranger-navbox.pill .hlist dd ol::after,
.ranger-navbox.pill .hlist dd ul::after,
.ranger-navbox.pill .hlist dd dl::after,
.ranger-navbox.pill .hlist dt ol::after,
.ranger-navbox.pill .hlist dt ul::after,
.ranger-navbox.pill .hlist dt dl::after,
.ranger-navbox.pill .hlist li ol::after,
.ranger-navbox.pill .hlist li ul::after,
.ranger-navbox.pill .hlist li dl::after {
  display: none;
}
/* make lists inline-flex */
.ranger-navbox.pill .hlist ul,
.ranger-navbox.pill .hlist ol,
.ranger-navbox.pill .hlist dl{
  display: inline-flex;
  gap: var(--navbox-pill-gap);
  flex-wrap: wrap;
}
/* "pill" style for items */
.ranger-navbox.pill .hlist li,
.ranger-navbox.pill .hlist dt,
.ranger-navbox.pill .hlist dd{
  padding: var(--navbox-pill-padding);
  border-radius: var(--navbox-pill-border-radius);
  box-shadow: var(--navbox-pill-box-shadow);
  background: var(--navbox-pill-background);
  /* 100% height */
  display: flex;
  align-items: center;
  /* for nested lists */
  gap: var(--navbox-pill-gap); 
  flex-wrap: wrap;
}
/* Add a hover / focus feedback style */
.ranger-navbox.pill .hlist dd:hover,
.ranger-navbox.pill .hlist dd:focus,
.ranger-navbox.pill .hlist dt:hover,
.ranger-navbox.pill .hlist dt:focus,
.ranger-navbox.pill .hlist li:hover,
.ranger-navbox.pill .hlist li:focus {
  box-shadow: var(--navbox-pill-box-shadow--hover);
  background: var(--navbox-pill-background--hover);
}
/**** `.pill-mobile` class: only apply the "pill" style on mobile ****/
@media screen and (max-width: 720px) {
	/* remove middle dots betweem items */
	.ranger-navbox.pill-mobile .hlist dd:not(:last-child)::after,
	.ranger-navbox.pill-mobile .hlist li:not(:last-child)::after{
	  display: none;
	}
	/* remove parentheses around nested lists*/
	.ranger-navbox.pill-mobile .hlist dd ol::before,
	.ranger-navbox.pill-mobile .hlist dd ul::before,
	.ranger-navbox.pill-mobile .hlist dd dl::before,
	.ranger-navbox.pill-mobile .hlist dt ol::before,
	.ranger-navbox.pill-mobile .hlist dt ul::before,
	.ranger-navbox.pill-mobile .hlist dt dl::before,
	.ranger-navbox.pill-mobile .hlist li ol::before,
	.ranger-navbox.pill-mobile .hlist li ul::before,
	.ranger-navbox.pill-mobile .hlist li dl::before,
	.ranger-navbox.pill-mobile .hlist dd ol::after,
	.ranger-navbox.pill-mobile .hlist dd ul::after,
	.ranger-navbox.pill-mobile .hlist dd dl::after,
	.ranger-navbox.pill-mobile .hlist dt ol::after,
	.ranger-navbox.pill-mobile .hlist dt ul::after,
	.ranger-navbox.pill-mobile .hlist dt dl::after,
	.ranger-navbox.pill-mobile .hlist li ol::after,
	.ranger-navbox.pill-mobile .hlist li ul::after,
	.ranger-navbox.pill-mobile .hlist li dl::after {
	  display: none;
	}
	/* make lists inline-flex */
	.ranger-navbox.pill-mobile .hlist ul,
	.ranger-navbox.pill-mobile .hlist ol,
	.ranger-navbox.pill-mobile .hlist dl{
	  display: inline-flex;
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* "pill" style for items */
	.ranger-navbox.pill-mobile .hlist li,
	.ranger-navbox.pill-mobile .hlist dt,
	.ranger-navbox.pill-mobile .hlist dd{
	  /* 100% height */
	  display: flex;
	  align-items: center;
	  /* for nested lists */
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* "pill" style for items */
	.ranger-navbox.pill-mobile .hlist li,
	.ranger-navbox.pill-mobile .hlist dt,
	.ranger-navbox.pill-mobile .hlist dd{
	  padding: var(--navbox-pill-padding);
	  border-radius: var(--navbox-pill-border-radius);
	  box-shadow: var(--navbox-pill-box-shadow);
	  background: var(--navbox-pill-background);
	  /* 100% height */
	  display: flex;
	  align-items: center;
	  /* for nested lists */
	  gap: var(--navbox-pill-gap);
	  flex-wrap: wrap;
	}
	/* Add a hover / focus feedback style */
	.ranger-navbox.pill-mobile .hlist dd:hover,
	.ranger-navbox.pill-mobile .hlist dd:focus,
	.ranger-navbox.pill-mobile .hlist dt:hover,
	.ranger-navbox.pill-mobile .hlist dt:focus,
	.ranger-navbox.pill-mobile .hlist li:hover,
	.ranger-navbox.pill-mobile .hlist li:focus {
	  box-shadow: var(--navbox-pill-box-shadow--hover);
	  background: var(--navbox-pill-background--hover);
	}
}

/*********************
* OVERRIDES GO BELOW *
**********************/

/* pill */
.ranger-navbox.pill .hlist li, 
.ranger-navbox.pill .hlist dt, 
.ranger-navbox.pill .hlist dd,
/* title box */
.ranger-title,
/* header box (inside the navbox) */
.ranger-header {
    --clip: .5em;
    clip-path: polygon( 0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)) );
}

/* pill :hover/:focus */
.ranger-navbox.pill .hlist dd:hover, 
.ranger-navbox.pill .hlist dd:focus, 
.ranger-navbox.pill .hlist dt:hover, 
.ranger-navbox.pill .hlist dt:focus, 
.ranger-navbox.pill .hlist li:hover, 
.ranger-navbox.pill .hlist li:focus {
    box-shadow: none;
    /* background-color:  */
}

.ranger-section-body > .ranger-row:first-child > .ranger-group {
    --clip: .5em;
    /* clip just the top left corner */
    clip-path: polygon(var(--clip) 0, 100% 0, 100% 100%, 0 100%, 0 var(--clip));
}

.ranger-section-body > .ranger-row:last-child > .ranger-group {
    --clip: .5em;
    /* clip just the bottom right corner */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
}

.ranger-navbox .ranger-group {
    font-size: calc(var(--navbox-font-size) + 0.25em);
    justify-items: center;
}

.ranger-navbox a.mw-selflink:hover {
    /* remove flicker on hover */
    color: inherit;
}

/*********************
*    OVERRIDES END   *
**********************/

/*********************
* End Template:Navbox*
**********************/


/* #endregion */

/* ============ */
/* #region Custom classes */
/* ============ */

/* flat bullet lists without bullets and margin */

.flat-bullet-list ul {
	/* remove margin */
	margin: 0;
}

.flat-bullet-list ul li::marker {
	/* remove bullet */
	content: '';
}


/* #endregion */

/* ============ */
/* #region Module:ScribuntoUnit */
/* ============ */

.scribunto-test-table {
	width: 100%;
	max-width: 100%;
}

.scribunto-test-table .test-output {
	overflow-wrap: break-word;
	word-break: break-all;
}

.scribunto-test-table .test-output-expected,
.scribunto-test-table .test-output-actual {
	font-family: monospace, monospace;
	white-space: pre-wrap;
}

/* #endregion */

/* ============ */
/* #region Other */
/* ============ */

/* wiki help button link */
.mw-helplink-icon {
    filter: invert(100%);
}


/* preferences → tab button (not selected)  */
.mw-prefs-tabs .oo-ui-tabOptionWidget:not(.oo-ui-optionWidget-selected) {
    color: var(--text-color);
}

/* #endregion */
Retrieved from "https://wiki.spacestation14.com/w/index.php?title=MediaWiki:Common.css&oldid=12305"