MediaWiki:Common.css: Difference between revisions

From Starlight wiki
← Older editNewer edit →
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 163: Line 163:
}
}


.noSprite>*>* {
@font-face {
image-rendering: auto !important;
    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%;
}
}


.material-symbols-outlined {
:root {
     font-family: 'Material Symbols Outlined';
     color-scheme: dark;
     font-weight: normal;
 
     font-style: normal;
     --bg-color: hsl(240, 7%, 11%);
     font-size: 24px;
     --bg-color-light: hsl(240, 7%, 14%);
     line-height: 1;
     --bg-color-light-x2: hsl(240, 8%, 17%);
     letter-spacing: normal;
     --bg-color-light-x3: hsl(240, 7%, 20%);
    text-transform: none;
     --bg-color-light-x4: hsl(240, 7%, 23%);
    display: inline-block;
     --bg-color-light-x5: hsl(240, 7%, 26%);
    white-space: nowrap;
     --bg-color-light-x6: hsl(240, 7%, 32%);
     word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased
}


.mw-body-content sub,.mw-body-content sup,span.reference {
    --border-color-light: hsl(240, 7%, 35%);
     font-size: 80%
    --border-color-light-x2: hsl(240, 7%, 45%);
}
     --border-color: hsl(240, 7%, 24%);


.ns-talk .mw-body-content dd {
    --text-color: lightgrey;
    margin-top: 0.4em;
     --text-color-grayed-out: gray;
     margin-bottom: 0.4em
}


#interwiki-completelist {
    --code-color-bg: hsl(195, 7%, 11%);
     font-weight: bold
    --code-color-bg-light: hsl(195, 7%, 18%);
}
     --code-color-text: hsl(36, 10%, 90%);
    --code-color-border: hsl(197, 6%, 22%);


.biglink {
     --link-color: lightblue;
     font-family: "Oswald";
     --link-color-visited: #007fff;
    font-style: oblique 10deg;
     font-variant-caps: small-caps;
    text-shadow: #1b1b1f 1px 2px,#595959dd 2px 2px 1px
}


.client-js .mw-special-Watchlist #watchlist-message,.client-js .collapsible:not(.mw-made-collapsible).collapsed>tbody>tr:not(:first-child),#editpage-specialchars {
    --action-color-light-x2: var(--blue-color-light-x2);
     display: none
    --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);


.mw-rcfilters-enabled .mw-specialpage-summary {
--warning-color: hsl(54 100% 15% / 1);
    margin-top: 1em
--warning-color-border: hsl(60, 55%, 30%);
}


.citation:target {
--danger-color: var(--red-color);
    background-color: rgba(0,127,255,0.133)
--danger-color-dark: var(--red-color-dark);
}
--danger-color-dark-x2: var(--red-color-dark-x2);
--danger-color-border: var(--red-color-border);


.citation {
    --blue-color-light-x2: hsl(220, 66%, 63%);
     word-wrap: break-word
     --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%);


ol.references {
    --green-color-light: hsl(167, 80%, 50%);
     font-size: 90%;
     --green-color: hsl(167, 80%, 45%);
     margin-bottom: 0.5em
     --green-color-dark: hsl(167, 74%, 30%);
}


.hlist dl,.hlist ol,.hlist ul {
    --red-color: hsl(0, 75%, 50%);
     margin: 0;
     --red-color-dark: hsl(0, 67%, 42%);
     padding: 0
     --red-color-dark-x2: hsl(0, 62%, 36%);
}
    --red-color-border: hsl(0, 47%, 22%);


.hlist dd,.hlist dt,.hlist li {
    margin: 0;
    display: 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
    /* 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+");


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


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


.hlist dd:after,.hlist li:after {
    /* a puzzle icon present in templates in visual editor, in white */
     content: " · ";
     --icon-template-puzzle-white: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IHB1enpsZSA8L3RpdGxlPjxjaXJjbGUgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJ3aGl0ZSIgY3g9IjE3IiBjeT0iMTAiIHI9IjMiLz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Ik0xMC41OCAzQTMgMyAwIDAgMSAxMSA0LjVhMyAzIDAgMCAxLTYgMEEzIDMgMCAwIDEgNS40MiAzSDF2MTJhMiAyIDAgMCAwIDIgMmgxMlYzeiIgZmlsbD0id2hpdGUiLz48L3N2Zz4=");
    font-weight: bold
}


.hlist dd:last-child:after,.hlist dt:last-child:after,.hlist li:last-child:after {
    /* tabber icon present in visual editor → insert, in black */
    content: none
    --icon-tabber-black: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPiA8dGl0bGU+dGFiYmVyPC90aXRsZT4gPHBhdGggZmlsbD0iIzA5YWJmMSIgZD0iTTE4IDJIMkMuOSAyIDAgMi45IDAgNHYxMmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjRjMC0xLjEtLjktMi0yLTJ6bTEgNWgtOGMtLjYgMC0xLS40LTEtMVYzaDhjLjYgMCAxIC40IDEgMXYzeiIvPiA8L3N2Zz4=");
}


.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 {
    /* dropdown icon (arrow-like), in cosmo blue */
    content: " (";
    --icon-dropdown-cosmoBlue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48dGl0bGU+IGRvd24gPC90aXRsZT48cGF0aCBmaWxsPSIjZDZlZGZmIiBkPSJNOS45IDIuOSA2IDYuOCAyLjEgMi45IDEgNGw1IDUgNS01eiIvPjwvc3ZnPg==");
    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
}
}


.hlist ol {
/* ============ */
    counter-reset: listitem
/* #region Uncategorized */
}
/* ============ */


.hlist ol>li {
/* Reset italic styling set by user agent */
     counter-increment: listitem
cite,
dfn {
     font-style: inherit;
}
}


.hlist ol>li:before {
/* Straight quote marks for <q> */
     content: " " counter(listitem) "\a0"
q {
     quotes: '"' '"' "'" "'";
}
}


.hlist dd ol>li:first-child:before,.hlist dt ol>li:first-child:before,.hlist li ol>li:first-child:before {
/* Avoid collision of blockquote with floating elements by swapping margin and padding */
     content: " (" counter(listitem) "\a0"
blockquote {
    overflow: hidden;
    margin: 1em 0;
     padding: 0 40px;
}
}


.plainlist ol,.plainlist ul {
/* Consistent size for <small>, <sub> and <sup> */
     line-height: inherit;
small {
    list-style: none none;
     font-size: 85%;
    margin: 0
}
}


.plainlist ol li,.plainlist ul li {
.mw-body-content sub,
     margin-bottom: 0
  .mw-body-content sup,
  span.reference /* for Parsoid */ {
     font-size: 80%;
}
}


.navbox {
/* Same spacing for indented and unindented paragraphs on talk pages */
    box-sizing: border-box;
.ns-talk .mw-body-content dd {
    border: 1px solid #a2a9b1;
     margin-top: 0.4em;
    width: 100%;
     margin-bottom: 0.4em;
    clear: both;
    font-size: 88%;
     text-align: center;
    padding: 1px;
     margin: 1em auto 0
}
}


.navbox .navbox {
/* Main page fixes */
     margin-top: 0
#interwiki-completelist {
     font-weight: bold;
}
}


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


.navbox-inner,.navbox-subgroup {
/* Reduce page jumps by hiding collapsed/dismissed content */
     width: 100%
.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;
}
}


.navbox-group,.navbox-title,.navbox-abovebelow {
/* Adds padding above Watchlist announcements where new recentchanges/watchlist filters are enabled */
     padding: 0.25em 1em;
.mw-rcfilters-enabled .mw-specialpage-summary {
    line-height: 1.5em;
     margin-top: 1em;
    text-align: center
}
}


th.navbox-group {
/* Highlight linked elements (such as clicked references) in blue */
     white-space: nowrap;
.citation:target {
    text-align: right
     background-color: rgba(0, 127, 255, 0.133);
}
}


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


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


tr+tr>.navbox-abovebelow,tr+tr>.navbox-group,tr+tr>.navbox-image,tr+tr>.navbox-list {
/* Style for horizontal lists (separator following item).
     border-top: 2px solid #fdfdfd
@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;
}
}


.navbox th,.navbox-title {
/* Display list items inline */
     background-color: #ccccff
.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;
}
}


.navbox-abovebelow,th.navbox-group,.navbox-subgroup .navbox-title {
/* Display nested lists inline */
     background-color: #ddddff
.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;
}
}


.navbox-subgroup .navbox-group,.navbox-subgroup .navbox-abovebelow {
/* Hide empty list items */
     background-color: #e6e6ff
.hlist .mw-empty-li {
     display: none;
}
}


.navbox-even {
/* Generate interpuncts */
     background-color: #f7f7f7
.hlist dt:after {
     content: ": ";
}
}


.navbox-odd {
/**
     background-color: transparent
  * 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;
}
}


.navbox .hlist td dl,.navbox .hlist td ol,.navbox .hlist td ul,.navbox td.hlist dl,.navbox td.hlist ol,.navbox td.hlist ul {
.hlist dd:last-child:after,
     padding: 0.125em 0
.hlist dt:last-child:after,
}
.hlist li:last-child:after {
     content: none;
}


.mw-parser-output .mw-collapsible-toggle {
/* 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;
     font-weight: normal;
    text-align: right;
    padding-right: 0.2em;
    padding-left: 0.2em
}
}


.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
.hlist dd dd:last-child:after,
     float: left;
.hlist dd dt:last-child:after,
     text-align: left
.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;
}
}


.infobox {
/* Put ordinals in front of ordered list items */
     border: 1px solid #a2a9b1;
.hlist ol {
    border-spacing: 3px;
     counter-reset: listitem;
    background-color: #f8f9fa;
    color: black;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    float: right;
    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,.infobox th,.infobox td {
.hlist ol > li {
     vertical-align: top
     counter-increment: listitem;
}
}


.infobox-label,.infobox-data,.infobox th,.infobox td {
.hlist ol > li:before {
     text-align: left
     content: " " counter(listitem) "\a0";
}
}


.infobox .infobox-above,.infobox .infobox-title,.infobox caption {
.hlist dd ol > li:first-child:before,
    font-size: 125%;
.hlist dt ol > li:first-child:before,
     font-weight: bold;
.hlist li ol > li:first-child:before {
    text-align: center
     content: " (" counter(listitem) "\a0";
}
}


.infobox-title,.infobox caption {
/* Unbulleted lists */
     padding: 0.2em
.plainlist ol,
.plainlist ul {
     line-height: inherit;
    list-style: none none;
    margin: 0;
}
}


.infobox .infobox-header,.infobox .infobox-subheader,.infobox .infobox-image,.infobox .infobox-full-data,.infobox .infobox-below {
.plainlist ol li,
     text-align: center
.plainlist ul li {
     margin-bottom: 0;
}
}


.infobox .infobox-navbar {
/* Default style for navigation boxes */
     text-align: right
.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 */
}
}


.wikitable.plainrowheaders th[scope=row] {
.navbox .navbox {
     font-weight: normal;
     margin-top: 0; /* No top margin for nested navboxes */
    text-align: left
}
}


.wikitable td ul,.wikitable td ol,.wikitable td dl {
.navbox + .navbox {
     text-align: left
     margin-top: -1px; /* Single pixel border between adjacent navboxes */
}
}


table.mw-hiero-table td {
.navbox-inner,
     vertical-align: middle
.navbox-subgroup {
     width: 100%;
}
}


.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 {
.navbox-group,
     background: url(//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif) no-repeat right;
.navbox-title,
     padding-right: 18px
.navbox-abovebelow {
     padding: 0.25em 1em; /* Title, group and above/below styles */
    line-height: 1.5em;
     text-align: center;
}
}


.messagebox {
th.navbox-group {
     border: 1px solid #a2a9b1;
     /* Group style */
     background-color: #f8f9fa;
     white-space: nowrap;
     width: 80%;
     /* @noflip */
     margin: 0 auto 1em auto;
     text-align: right;
    padding: .2em
}
}


.messagebox.merge {
.navbox,
    border: 1px solid #c0b8cc;
.navbox-subgroup {
     background-color: #f0e5ff;
     background-color: #fdfdfd; /* Background color */
    text-align: center
}
}


.messagebox.cleanup {
.navbox-list {
     border: 1px solid #9f9fff;
     line-height: 1.5em;
     background-color: #efefff;
     border-color: #fdfdfd; /* Must match background color */
    text-align: center
}
}


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


.mbox-inside .standard-talk {
.navbox th,
    border: 1px solid #c0c090;
.navbox-title {
     background-color: #f8eaba;
     background-color: #ccccff; /* Level 1 color */
    width: 100%;
    margin: 2px 0;
    padding: 2px
}
}


.messagebox.small {
.navbox-abovebelow,
     width: 238px;
th.navbox-group,
    font-size: 85%;
.navbox-subgroup .navbox-title {
    float: right;
     background-color: #ddddff; /* Level 2 color */
    clear: both;
    margin: 0 0 1em 1em;
    line-height: 1.25em
}
}


.messagebox.small-talk {
.navbox-subgroup .navbox-group,
     width: 238px;
.navbox-subgroup .navbox-abovebelow {
    font-size: 85%;
     background-color: #e6e6ff; /* Level 3 color */
    float: right;
}
    clear: both;
 
    margin: 0 0 1em 1em;
.navbox-even {
    line-height: 1.25em;
     background-color: #f7f7f7; /* Even row striping */
     background-color: #f8eaba
}
}


th.mbox-text,td.mbox-text {
.navbox-odd {
     border: none;
     background-color: transparent; /* Odd row striping */
    padding: 0.25em 0.9em;
    width: 100%
}
}


td.mbox-image {
.navbox .hlist td dl,
    border: none;
.navbox .hlist td ol,
     padding: 2px 0 2px 0.9em;
.navbox .hlist td ul,
    text-align: center
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
     padding: 0.125em 0; /* Adjust hlist padding in navboxes */
}
}


td.mbox-imageright {
/* Styling for JQuery makeCollapsible, matching that of collapseButton */
     border: none;
.mw-parser-output .mw-collapsible-toggle {
     padding: 2px 0.9em 2px 0;
     font-weight: normal;
     text-align: center
    /* @noflip */
    text-align: right;
     padding-right: 0.2em;
     padding-left: 0.2em;
}
}


td.mbox-empty-cell {
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
     border: none;
     /* @noflip */
     padding: 0;
    float: left;
     width: 1px
     /* @noflip */
     text-align: left;
}
}


table.ambox {
/* Infobox template style */
    margin: 0 10%;
.infobox {
     border: 1px solid #a2a9b1;
     border: 1px solid #a2a9b1;
     border-left: 10px solid #36c;
     border-spacing: 3px;
     background-color: #fbfbfb;
     background-color: #f8f9fa;
     box-sizing: border-box
    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;
}
}


table.ambox+table.ambox,table.ambox+.mw-empty-elt+table.ambox {
.infobox-header,
     margin-top: -1px
  .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;
}
}


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


.ambox td.mbox-image {
/* Remove .infobox when element selectors above are removed */
     padding: 2px 0 2px 0.5em
.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;
}
}


.ambox td.mbox-imageright {
.infobox-title,
     padding: 2px 0.5em 2px 0
  /* Remove element selector when every .infobox thing is using the standard module/templates  */
  .infobox caption {
     padding: 0.2em;
}
}


table.ambox-notice {
/* Remove .infobox when element selectors above are removed */
     border-left: 10px solid #36c
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
     text-align: center;
}
}


table.ambox-speedy {
/* Remove .infobox when element selectors above are removed */
     border-left: 10px solid #b32424;
.infobox .infobox-navbar {
     background-color: #fee7e6
     /* @noflip */
     text-align: right;
}
}


table.ambox-delete {
/* Normal font styling for wikitable row headers with scope="row" tag */
     border-left: 10px solid #b32424
.wikitable.plainrowheaders th[scope="row"] {
    font-weight: normal;
    /* @noflip */
     text-align: left;
}
}


table.ambox-content {
/* Lists in wikitable data cells are always left-aligned */
     border-left: 10px solid #f28500
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
     /* @noflip */
    text-align: left;
}
}


table.ambox-style {
/* Fix for hieroglyphs specificity issue in infoboxes ([[phab:T43869]]) */
     border-left: 10px solid #fc3
table.mw-hiero-table td {
     vertical-align: middle;
}
}


table.ambox-move {
/* Change the external link icon to an Adobe icon for all PDF files */
     border-left: 10px solid #9932cc
.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;
}
}


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


table.imbox {
.messagebox.merge {
    margin: 4px 10%;
     border: 1px solid #c0b8cc;
    border-collapse: collapse;
     background-color: #f0e5ff;
     border: 3px solid #36c;
     text-align: center;
     background-color: #fbfbfb;
     box-sizing: border-box
}
}


.imbox .mbox-text .imbox {
.messagebox.cleanup {
     margin: 0 -0.5em;
     border: 1px solid #9f9fff;
     display: block
    background-color: #efefff;
     text-align: center;
}
}


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


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


table.imbox-speedy {
.messagebox.small {
     border: 3px solid #b32424;
    width: 238px;
     background-color: #fee7e6
    font-size: 85%;
    /* @noflip */
    float: right;
    clear: both;
    /* @noflip */
     margin: 0 0 1em 1em;
     line-height: 1.25em;
}
}


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


table.imbox-content {
/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */
     border: 3px solid #f28500
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 */
}
}


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


table.imbox-move {
td.mbox-imageright {
     border: 3px solid #9932cc
    /* The right image cell */
     border: none;
    /* @noflip */
    padding: 2px 0.9em 2px 0; /* 0px left, 0.9em right */
    text-align: center;
}
}


table.imbox-protection {
td.mbox-empty-cell {
     border: 3px solid #a2a9b1
    /* An empty narrow cell */
     border: none;
    padding: 0;
    width: 1px;
}
}


table.imbox-license {
/* Article message box styles */
     border: 3px solid #88a;
table.ambox {
     background-color: #f7f8ff
    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;
}
}


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


table.cmbox {
.ambox th.mbox-text,
    margin: 3px 10%;
.ambox td.mbox-text {
    border-collapse: collapse;
     /* The message body cell(s) */
     border: 1px solid #a2a9b1;
     padding: 0.25em 0.5em; /* 0.5em left/right */
     background-color: #dfe8ff;
    box-sizing: border-box
}
}


table.cmbox-notice {
.ambox td.mbox-image {
     background-color: #d8e8ff
     /* The left image cell */
    /* @noflip */
    padding: 2px 0 2px 0.5em; /* 0.5em left, 0px right */
}
}


table.cmbox-speedy {
.ambox td.mbox-imageright {
     margin-top: 4px;
     /* The right image cell */
     margin-bottom: 4px;
     /* @noflip */
     border: 4px solid #b32424;
     padding: 2px 0.5em 2px 0; /* 0px left, 0.5em right */
    background-color: #ffdbdb
}
}


table.cmbox-delete {
table.ambox-notice {
     background-color: #ffdbdb
    /* @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.cmbox-content {
table.ambox-content {
     background-color: #ffe7ce
     /* @noflip */
    border-left: 10px solid #f28500; /* Orange */
}
}


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


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


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


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


table.ombox-notice {
.imbox .mbox-text .imbox {
     border: 1px solid #a2a9b1
     /* 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.  */
}
}


table.ombox-speedy {
.mbox-inside .imbox {
     border: 2px solid #b32424;
     /* For imboxes inside other templates.  */
     background-color: #fee7e6
     margin: 4px;
}
}


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


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


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


table.ombox-move {
table.imbox-content {
     border: 1px solid #9932cc
     border: 3px solid #f28500; /* Orange */
}
}


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


table.tmbox {
table.imbox-move {
    margin: 4px 10%;
     border: 3px solid #9932cc; /* Purple */
    border-collapse: collapse;
     border: 1px solid #c0c090;
    background-color: #f8eaba;
    min-width: 80%;
    box-sizing: border-box
}
}


.tmbox.mbox-small {
table.imbox-protection {
     min-width: 0
     border: 3px solid #a2a9b1; /* Gray-gold */
}
}


.mediawiki .mbox-inside .tmbox {
table.imbox-license {
     margin: 2px 0;
     border: 3px solid #88a; /* Dark gray */
     width: 100%
     background-color: #f7f8ff; /* Light gray */
}
}


.mbox-inside .tmbox.mbox-small {
table.imbox-featured {
     line-height: 1.5em;
     border: 3px solid #cba135; /* Brown-gold */
    font-size: 100%
}
}


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


table.tmbox-delete {
table.cmbox-notice {
     border: 2px solid #b32424
     background-color: #d8e8ff; /* Blue */
}
}


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


table.tmbox-style {
table.cmbox-delete {
     border: 2px solid #fc3
     background-color: #ffdbdb; /* Pink */
}
}


table.tmbox-move {
table.cmbox-content {
     border: 2px solid #9932cc
     background-color: #ffe7ce; /* Orange */
}
}


table.tmbox-protection,table.tmbox-notice {
table.cmbox-style {
     border: 1px solid #c0c090
     background-color: #fff9db; /* Yellow */
}
}


table.fmbox {
table.cmbox-move {
    clear: both;
     background-color: #e4d8ff; /* Purple */
    margin: 0.2em 0;
    width: 100%;
    border: 1px solid #a2a9b1;
     background-color: #f8f9fa;
    box-sizing: border-box
}
}


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


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


table.fmbox-editnotice {
table.ombox-notice {
     background-color: transparent
    border: 1px solid #a2a9b1; /* Gray */
}
 
table.ombox-speedy {
    border: 2px solid #b32424; /* Red */
     background-color: #fee7e6; /* Pink */
}
}


div.mw-warning-with-logexcerpt,div.mw-lag-warn-high,div.mw-cascadeprotectedwarning,div#mw-protect-cascadeon,div.titleblacklist-warning {
table.ombox-delete {
    clear: both;
     border: 2px solid #b32424; /* Red */
    margin: 0.2em 0;
     border: 1px solid #bb7070;
    background-color: #ffdbdb;
    padding: 0.25em 0.9em;
    box-sizing: border-box
}
}


.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt {
table.ombox-content {
     border-color: #fc3;
     border: 1px solid #f28500; /* Orange */
    background-color: #fef6e7
}
}


html body.mediawiki .mbox-small {
table.ombox-style {
     clear: right;
     border: 1px solid #fc3; /* Yellow */
    float: right;
    margin: 4px 0 4px 1em;
    box-sizing: border-box;
    width: 238px;
    font-size: 88%;
    line-height: 1.25em
}
}


html body.mediawiki .mbox-small-left {
table.ombox-move {
    margin: 4px 1em 4px 0;
     border: 1px solid #9932cc; /* Purple */
    box-sizing: border-box;
    overflow: hidden;
    width: 238px;
     border-collapse: collapse;
    font-size: 88%;
    line-height: 1.25em
}
}


.compact-ambox table .mbox-image,.compact-ambox table .mbox-imageright,.compact-ambox table .mbox-empty-cell {
table.ombox-protection {
     display: none
     border: 2px solid #a2a9b1; /* Gray-gold */
}
}


.compact-ambox table.ambox {
/* Talk page message box styles */
     border: none;
table.tmbox {
     margin: 4px 10%;
     border-collapse: collapse;
     border-collapse: collapse;
     background-color: transparent;
     border: 1px solid #c0c090; /* Default "notice" gray-brown */
     margin: 0 0 0 1.6em !important;
     background-color: #f8eaba;
     padding: 0 !important;
     min-width: 80%;
     width: auto;
     box-sizing: border-box;
    display: block
}
}


body.mediawiki .compact-ambox table.mbox-small-left {
.tmbox.mbox-small {
     font-size: 100%;
     min-width: 0; /* reset the min-width of tmbox above        */
    width: auto;
    margin: 0
}
}


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


.compact-ambox table .mbox-text-span {
.mbox-inside .tmbox.mbox-small {
     display: list-item;
     /* "small" tmboxes should not be small when  */
     line-height: 1.5em;
     line-height: 1.5em; /* also "nested", so reset styles that are  */
     list-style-type: square;
     font-size: 100%; /* set in "mbox-small" above.                */
    list-style-image: url(/w/skins/MonoBook/resources/images/bullet.svg)
}
}


.compact-ambox .hide-when-compact {
table.tmbox-speedy {
     display: none
     border: 2px solid #b32424; /* Red */
    background-color: #fee7e6; /* Pink */
}
}


.nounderlines a,.IPA a:link,.IPA a:visited {
table.tmbox-delete {
     text-decoration: none !important
     border: 2px solid #b32424; /* Red */
}
}


.nowrap,.nowraplinks a {
table.tmbox-content {
     white-space: nowrap
     border: 2px solid #f28500; /* Orange */
}
}


.wrap,.wraplinks a {
table.tmbox-style {
     white-space: normal
     border: 2px solid #fc3; /* Yellow */
}
}


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


.thumbinner {
table.tmbox-protection,
    min-width: 100px;
table.tmbox-notice {
    background: #303037;
     border: 1px solid #c0c090; /* Gray-brown */
     border: solid #37373e
}
}


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


#mw-subcategories,#mw-pages,#mw-category-media,#filehistory,#wikiPreview,#wikiDiff {
table.fmbox-system {
     clear: both
     background-color: #191970;
}
}


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


.wpbs-inner .wpb .wpb-header {
table.fmbox-editnotice {
     display: table-row
     background-color: transparent;
}
}


.wpbs-inner .wpb-outside {
/* Div based "warning" style fmbox messages. */
     display: none
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;
}
}


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


.checkuser-show,.sysop-show,.abusefilter-show,.abusefilter-helper-show,.patroller-show,.templateeditor-show,.extendedmover-show,.extendedconfirmed-show,.autoconfirmed-show,.user-show {
/* These mbox-small classes must be placed after all other
     display: none
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;
}
}


.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,.ve-ui-mwNoticesPopupTool-item .mbox-image,.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
html body.mediawiki .mbox-small-left {
     display: none !important
    /* 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;
}
}


ul.permissions-errors>li {
/* Style for compact ambox */
     list-style: none none
/* Hide the images */
.compact-ambox table .mbox-image,
.compact-ambox table .mbox-imageright,
.compact-ambox table .mbox-empty-cell {
     display: none;
}
}


ul.permissions-errors {
/* Remove borders, backgrounds, padding, etc. */
     margin: 0
.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;
}
}


span.texhtml {
body.mediawiki .compact-ambox table.mbox-small-left {
    font-family: "Nimbus Roman No9 L","Times New Roman",Times,serif;
     font-size: 100%;
     font-size: 118%;
     width: auto;
     line-height: 1;
     margin: 0;
    white-space: nowrap;
    -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 {
/* Style the text cell as a list item and remove its padding */
     font-size: 100%
.compact-ambox table .mbox-text {
     padding: 0 !important;
    margin: 0 !important;
}
}


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


.mwe-math-fallback-image-display,.mwe-math-mathml-display {
/* Allow for hiding text in compact form */
     margin-left: 1.6em !important;
.compact-ambox .hide-when-compact {
    margin-top: 0.6em;
     display: none;
    margin-bottom: 0.6em
}
}


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


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


.PopUpMediaTransform a .play-btn-large {
/* But allow wrapping where desired: */
     margin: 0;
.wrap,
    top: auto;
.wraplinks a {
    right: auto;
     white-space: normal;
    bottom: 0;
    left: 0
}
}


@media screen {
/* Increase the height of the image upload box */
    #content .gallerybox div.thumb {
#wpUploadDescription {
        background-color: #f8f9fa
    height: 13em;
    }
}


    .gallerybox .thumb img {
/* Minimum thumb width */
        background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat
.thumbinner {
    }
    min-width: 100px;
}


    .ns-0 .gallerybox .thumb img,.ns-2 .gallerybox .thumb img,.ns-100 .gallerybox .thumb img,.nochecker .gallerybox .thumb img {
/* Prevent floating boxes from overlapping any category listings,
        background-image: none
file histories, edit previews, and edit [Show changes] views. */
    }
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
    clear: both;
}
}


.flaggedrevs_draft_synced,.flaggedrevs_stable_synced,#t-upload,.mw-special-Book #coll-downloadbox {
/* Selectively hide headers in WikiProject banners */
     display: none
/* TemplateStyles */
.wpb .wpb-header {
     display: none;
}
}


#site-tools {
.wpbs-inner .wpb .wpb-header {
     display: none !important
     display: table-row;
}
}


span.comment {
.wpbs-inner .wpb-outside {
     overflow-wrap: break-word
     display: none; /* hide things that should only display outside shells */
}
}


#mw-page-base {
/* Styling for Abuse Filter tags */
     background: #1b1b1f;
.mw-tag-markers {
     color: lightgrey;
     font-style: italic;
    border: #1b1b1f
     font-size: 90%;
}
}


.mediawiki,.mw-page-container {
/* Hide stuff meant for accounts with special permissions. Made visible again in
    background: #1b1b1f;
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
    color: lightgrey;
[[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
     border: #1b1b1f
[[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;
}
}


.mw-body {
/* Hide the redlink generated by {{Editnotice}},
    background: #212126;
this overrides the ".sysop-show { display: none; }" above that applies
    color: lightgrey;
to the same link as well. See [[phab:T45013]]
     border: black
 
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;
}
}


#mw-panel {
/* Remove bullets when there are multiple edit page warnings */
     background: #1b1b1f;
ul.permissions-errors > li {
    color: lightgrey;
     list-style: none none;
    border: #1b1b1f
}
}


#mw-content-container,#mw-header-container,#mw-content-wrapper,#mw-content,#p-logo {
ul.permissions-errors {
     background: #1b1b1f;
     margin: 0;
    color: lightgrey;
    border: #1b1b1f
}
}


.mw-code {
/* texhtml class for inline math (based on generic times-serif class) */
     background: #212126;
span.texhtml {
     color: lightgrey
    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;
}
}


footer,#footer-info-lastmod,#footer-info-copyright {
span.texhtml span.texhtml {
     color: lightgrey
     font-size: 100%;
}
}


p,h1,h2,h3,h4,h5,h6,li {
span.mwe-math-mathml-inline {
     color: lightgrey
     font-size: 118%;
}
}


a,.vector-menu-portal .vector-menu-content li a,.vector-menu-tabs li a,body.skin--responsive #p-cactions li a,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 {
/* Make <math display="block"> be left aligned with one space indent for
    color: #77c1d9
  * 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;
}
}


a:hover,a:visited:hover {
.mwe-math-mathml-display math {
     color: white
     display: inline;
}
}


body.skin--responsive #p-cactions li a {
/* Work-around for [[phab:T25965]] / [[phab:T100106]] (Kaltura advertisement) */
     background: #27272e
.k-player .k-attribution {
     visibility: hidden;
}
}


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


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 {
@media screen {
    color: #3377aa
    /* 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;
    }


.vector-menu-tabs .selected a,.vector-menu-tabs .selected a:visited,body.skin--responsive #p-cactions li.selected a {
    /* Display "From Wikipedia, the free encyclopedia" in skins that support it,
    color: lightgrey;
do not apply to print mode */
    font-weight: bold
    /*
  #siteSub {
  display: block;
  }
  */
}
}


body.skin--responsive #p-cactions li.selected a {
/* Hide FlaggedRevs notice UI when there are no pending changes */
     background: #27272e
.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;
}
}


.vector-menu-tabs li {
/* Fix horizontal scrolling of long edit summaries T158725 */
     background: #212126
span.comment {
     overflow-wrap: break-word;
}
}


#mw-site-navigation .sidebar-chunk,#mw-site-navigation .sidebar-chunk,#mw-related-navigation .sidebar-chunk,body.skin--responsive .portlet,body.skin--responsive .pBody {
#mw-page-base {
     background: #212126;
     background: #1b1b1f;
     color: lightgrey;
     color: var(--text-color);
     border-color: #1b1b1f;
     border: #1b1b1f;
    border: 1px solid black;
    border-radius:1.4rem;
}
}


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


#ca-nstab-mediawiki.a {
.mw-body {
    color: lightgrey
}
 
#mw-changeslist-links {
     background: #212126;
     background: #212126;
     color: lightgrey
     color: var(--text-color);
    border: black;
}
}


#simpleSearch {
#mw-panel {
     background: #27272e;
     background: #1b1b1f;
     border: 1px solid #37373e;
     color: var(--text-color);
     color: lightgrey
     border: #1b1b1f;
}
}


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


#pt-createaccount {
#mw-header-nav-hack {
     visibility: hidden;
     background: #212126;
     display: none
    color: var(--text-color);
     border: #212126;
}
}


.vector-user-links .vector-user-menu-more .vector-menu-content-list li a,#personal .dropdown {
.mw-code {
     background: #27272e;
     background: #212126;
     border: 1px solid black;
     color: var(--text-color);
    color: lightgrey
}
}


body.skin--responsive #p-cactions li.selected {
footer,
     border: #37373e
#footer-info-lastmod,
#footer-info-copyright {
     color: var(--text-color);
}
}


.vector-menu-tabs .selected {
p,
     background: #1b1b1f
h1,
h2,
h3,
h4,
h5,
h6,
li {
     color: var(--text-color);
}
}


#pagehistory li.selected {
a,
     background: #1B4D3E;
.vector-menu-portal .vector-menu-content li a,
    font-weight: bold
.vector-menu-tabs li a,
body.skin--responsive #p-cactions li a {
     color: lightblue;
}
}


div.mw-warning-with-logexcerpt,div.mw-lag-warn-high,div.mw-cascadeprotectedwarning,div#mw-protect-cascadeon,div.titleblacklist-warning {
a:visited,
     background: #7C0A02;
.vector-menu-portal .vector-menu-content li a:visited,
    border: 1px solid #bb7070
.vector-menu-tabs li a:visited,
body.skin--responsive #p-cactions li a:visited {
     color: #007fff;
}
}


/* Style for wikitable tables */
body.skin--responsive #p-cactions li a {
.wikitable {
     background: var(--bg-color-light-x2);
    border-spacing: 1px;
    padding: 12px;
    border-collapse: separate;
    border: 1px solid black;
    border-radius: 1em;
     background: #27272e;
    color: #dbdbdb;
}
}


.wikitable>*>tr>*{
.mw-prefs-buttons {
     padding: 0.4em !important;
     background: var(--bg-color-light-x2);
    margin: 0 !important;
    border: none;
}
}


.wikitable>*>tr>th {
a.extiw:visited,
    background: #27272e;
a.external:visited,
     color: white;
.mw-parser-output a.extiw:visited,
.mw-parser-output a.external:visited,
body.skin--responsive #p-cactions li a.external:visited {
     color: #8a2be2;
}
}


.wikitable>*>tr>td {
.vector-menu-tabs .selected a,
     background: #32323c;
.vector-menu-tabs .selected a:visited,
body.skin--responsive #p-cactions li.selected a {
     color: var(--text-color);
    font-weight: bold;
}
}


.wikitable p, .wikitable h1, .wikitable h2, .wikitable h3, .wikitable h4, .wikitable h5, .wikitable h6, .wikitable li {
body.skin--responsive #p-cactions li.selected a {
     color: #dbdbdb;
     background: var(--bg-color-light-x2);
}
}


/* Rounding the upper left corner of the first cell */
.vector-menu-tabs li {
.wikitable thead tr:first-child th:first-child,
     background: #212126;
.wikitable thead tr:first-child td:first-child,
.wikitable:not(:has(thead)) tr:first-child th:first-child,
.wikitable:not(:has(thead)) tr:first-child td:first-child {
     border-top-left-radius: 4px;
}
}


/* Rounding the upper right corner of the last cell */
.tools-inline li a {
.wikitable thead tr:first-child th:last-child,
    filter: invert(100%);
.wikitable thead tr:first-child td:last-child,
.wikitable:not(:has(thead)) tbody > tr:first-child th:last-child,
.wikitable:not(:has(thead)) tbody > tr:first-child td:last-child {
    border-top-right-radius: 4px;
}
}


/* Rounding the lower left corner of the first cell of the last row
.tools-inline span {
.wikitable tbody tr:last-child th:first-child,
     filter: invert(100%);
.wikitable tbody tr:last-child td:first-child {
    color: var(--text-color);
     border-bottom-left-radius: 4px;
}*/
 
/* Rounding the bottom right corner of the last cell of the last row
.wikitable tbody tr:last-child th:last-child,
.wikitable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}*/
 
/* Tables on phones */
@media screen and (max-width: 850px) {
    .wikitable {
        font-size: 0.65em;
        padding: 5px !important;
    }
   
.wikitable img[width="64"][height="64"] {
width: 32px;
height: 32px;
}
.wikitable img[width="64"][height="128"] {
width: 32px;
height: 64px;
}
}
}


.toc {
#personal h2,
    background: #27272E;
#site-tools h2,
     border: 1px solid black;
#site-navigation h2,
    color: white
#searchButton {
     filter: invert(100%);
}
}


.mw-content-ltr .tocnumber {
#personal h2 span {
     color: grey
     filter: invert(100%);
}
}


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


.quickboxhead {
#p-logo-text a {
     border-bottom: 1px solid #303038;
     color: var(--text-color);
    background: #1b1b1f;
    text-align: center
}
}


.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,.mw-rcfilters-ui-changesListWrapperWidget {
#ca-nstab-mediawiki.a {
     background: #27272e;
     color: var(--text-color);
    border: 1px solid #303038;
    color: white
}
}


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


.oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button {
#simpleSearch {
    background: #27272e;
    background: var(--bg-color-light-x2);
     border: 1px solid #303038;
     border: 1px solid var(--bg-color-light-x4);
     color: white
     color: var(--text-color);
}
}


.oo-ui-popupWidget-popup {
#searchInput {
     background: #303037;
     color: var(--text-color);
    border: 1px solid #37373e;
    color: white
}
}


.mw-editform #wpTextbox1,textarea {
#pt-createaccount {
     background: #303037;
     visibility: hidden;
    border: 1px solid #37373e;
    color: white
}
}


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


.wikiEditor-ui-toolbar .group {
body.skin--responsive #p-cactions li.selected {
     border: 1px solid #37373e;
     border: var(--bg-color-light-x4);
    color: white
}
}


.wikiEditor-ui-toolbar .group .label {
.vector-menu-tabs .selected {
     color: white
     background: #1b1b1f;
}
}


.wikiEditor-ui-toolbar .tabs span.tab a.current,.wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
#pagehistory li.selected {
     color: #151518;
     background: #1b4d3e;
     font-weight: bold
     font-weight: bold;
}
}


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


.wikiEditor-ui .wikiEditor-ui-view {
.wikitable {
     border: 1px solid #37373e
    background: var(--bg-color-light-x3);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


.editOptions,.mw-editform .editOptions {
.toc {
     background: #212126;
     background: var(--bg-color-light-x3);
     border: 1px solid #37373e;
     border: 1px solid var(--bg-color-light-x4);
     color: white
     color: var(--text-color);
}
}


@media screen {
.mw-content-ltr .tocnumber {
    .mw-body-content .recipeimg a>img {
    color: grey;
        padding: 0;
        margin: 0;
        border: 0;
        width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important
    }
}
}


.positive {
.wikitable > tr > th,
     color: #00FF00;
.wikitable > tr > td,
    font-weight: bold
.wikitable > * > tr > th,
.wikitable > * > tr > td {
     border: 1px solid var(--bg-color-light-x4);
}
}


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


.anglerect {
.quickbox {
     --angle-rect-clip-size: 16px;
     border: 1px solid #303038;
     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)))
     background: var(--bg-color-light-x2);
}
}


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


.mw-body {
.thumbinner,
     padding: 0.5em;
.thumbinner .thumbimage {
     box-shadow: 0 0 2px black
     background: var(--bg-color-light-x2);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


.mw-body dd {
table.ombox tbody,
     margin: 0.2em;
table.ombox {
     margin-left: 1.6em
     background: var(--bg-color-light-x2);
     border: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


.tabs-label {
table.ambox tbody,
     cursor: pointer;
table.ambox {
     padding: 1px 6px;
     background: var(--bg-color-light-x2);
     background: transparent !important;
     border-top: 1px solid var(--bg-color-light-x4);
     border: 1px solid black
     border-bottom: 1px solid var(--bg-color-light-x4);
     border-right: 1px solid var(--bg-color-light-x4);
    color: var(--text-color);
}
}


.tabs-tabbox > .tabs-input:checked + .tabs-label,.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
table.imbox tbody,
    z-index: 2;
table.imbox {
     box-shadow: 0px 2px 1px #3366cc
    background: var(--bg-color-light-x2);
    border: 1px solid var(--bg-color-light-x4);
     color: var(--text-color);
}
}


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


.tabs-label:hover {
/* Generic OOUI elements */
     box-shadow: 0px 2px 1px darkblue;
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
     z-index: 2
     background: var(--bg-color-light-x2);
    border: 1px solid #303038;
     color: var(--text-color);
}
}


.tabs-tabbox > .tabs-container {
.oo-ui-popupWidget-popup {
     margin-top: -1px;
     background: var(--bg-color-light-x3);
    padding: 2px 10px;
     border: 1px solid var(--bg-color-light-x4);
    background: #303037;
     color: var(--text-color);
    border-radius: 0;
    position: relative;
     border: 1px solid #000000;
     width: inherit;
    max-width: inherit;
    min-width: inherit;
    z-index: 1
}
}


.tabs-tabbox > .tabs-label {
/* SITE SPECIFIC */
     margin: 0;
/*
    background: transparent;
  .chemrecipeimg img {
    position: relative;
  background-image: url('https://wiki.spacestation14.com/w/images/7/75/Beaker_Fill.png');
    display: inline-block;
  background-blend-mode: multiply;
    vertical-align: baseline;
  background-position: center;
     border-radius: 0
  }
  */
@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;
     }
}
}


.tooltip {
.positive {
     position: relative;
     color: #00ff00;
     display: inline
     font-weight: bold;
}
}


.tooltiptext {
.negative {
     position: absolute;
     color: #ff0000;
     min-width: 240px;
     font-weight: bold;
    max-width: 100%;
}
     left: -240px;
 
    right: -240px;
.anglerect {
    top: 125%;
     --angle-rect-clip-size: 16px;
    margin-left: auto;
     clip-path: polygon(
    margin-right: auto;
        0 0,
    z-index: 99;
        calc(100% - var(--angle-rect-clip-size)) 0,
    padding: 22px;
        100% var(--angle-rect-clip-size),
     pointer-events: none;
        100% 100%,
    visibility: hidden;
        var(--angle-rect-clip-size) 100%,
    transition: all 0.05s;
        0 calc(100% - var(--angle-rect-clip-size))
    border: 1px solid #3366cc;
    );
    border-radius: 1.4rem;
    background-color: #27272E;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
}


.tooltip:hover>.tooltiptext {
/* hack for mobile/nomobile */
     visibility: visible;
.flex {
    opacity: 1;
     display: flex;
}
}


@media screen and (min-width: 851px) {
@media screen and (min-width: 851px) {
     .mobile {
     .mobile {
         display:none
         display: none;
    }
 
    .headder {
        width: 25%;
        float: right;
        margin-left: 1em
    }
 
    .stiky {
        position: sticky;
        top: 0.1em
     }
     }
}
}
Line 1,391: Line 1,696:
@media screen and (max-width: 850px) {
@media screen and (max-width: 850px) {
     .nomobile {
     .nomobile {
         display:none
         display: none;
    }
 
    .headder {
        width: 100%;
        margin-left: 0
    }
 
    .sidebar-inner {
        background: #27272e;
        border: 1px solid black;
        color: lightgrey
    }
 
    .tooltip {
        position: static
    }
 
    .tooltiptext {
        box-shadow: 0px 0px 100vw 100vh rgb(0 0 0 / 60%);
        position: fixed!important;
        width: 80vw !important;
        top: 40vh !important;
        left: 0 !important;
        margin: 0 auto !important;
        right: 0!important;
    }
    /*
    .mobilefont {
        font-size: 80%
    }
    */
   
    .mobile-image img {
        width: 32px;
        height: 32px;
     }
     }
}
}


.mw-mmv-above-fold,.mw-mmv-dialog,.mw-mmv-image-links li,.mw-mmv-options-cancel-button.mw-ui-button.mw-ui-quiet,.mw-mmv-options-dialog-header,.mw-mmv-options-text-header {
img {
     color: #e0e0e0
    -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;
}
}


.mw-mmv-above-fold {
/* allows enabling smooth rendering for images by adding this class to them whenever needed */
     background: #222;
img.smooth-render,
    border-top: 1px solid #333
.smooth-render img {
     image-rendering: auto;
}
}


.mw-mmv-image-metadata {
.layered {
     background-color: #111;
     position: absolute;
     border-color: #333
     top: 0;
}
    left: 0;
}


.mw-mmv-dialog {
.blend {
     border: 1px solid #333;
     mix-blend-mode: multiply;
    background: #222;
    box-shadow: none
}
}


.mw-mmv-dialog .mw-mmv-dialog-down-arrow {
/* replace pencil icon in "edit section" buttons with a version that's visible */
     background: #222;
.mw-editsection {
    border-bottom: 1px solid #333;
     background-image: url(/w/images/a/a9/Pencil-lightblue.svg);
    border-right: 1px solid #333
}
}


.mw-mmv-options-enable-alert {
/* #endregion */
     background: #333;
 
    color: #e0e0e0
/* ============ */
/* #region GENERAL STYLES */
/* ============ */
 
/* page content */
#mw-content-text {
     overflow: auto;
}
}


.mw-mmv-filepage-buttons .mw-ui-button {
code {
     background: #36c;
    color: var(--code-color-text);
    color: #e0e0e0;
     background-color: var(--code-color-bg);
     border-color: #1d4699
     border: 1px solid var(--code-color-border);
}
}


.mw-default-size {
pre {
     background-color: #21212600 !important;
    color: var(--code-color-text);
     border-color: black !important
     background-color: var(--code-color-bg);
     border: 1px solid var(--code-color-border);
}
}


.mw-default-size img {
a {
     border-color: black !important
     color: var(--link-color);
}
}


.mw-default-size figcaption {
a:hover {
     background-color: #21212600 !important;
     /* keep the same color */
     border-color: black !important
    color: var(--link-color);
     /* keep underline */
    text-decoration: underline;
}
}


.mw-halign-right {
a:visited {
     background-color: #27272E00 !important;
     color: var(--link-color-visited);
    border-color: black !important
}
}


.mw-halign-right img {
a:visited:hover {
     border-color: black !important
    /* keep the same color */
    color: var(--link-color-visited);
    /* keep underline */
     text-decoration: underline;
}
}


.mw-halign-right figcaption {
/* big links on the main page */
     background-color: #27272E00 !important;
.biglink > a:hover {
    border-color: black !important
     color: #2952a3;
}
}


.mw-halign-left {
/* big links on the main page */
     background-color: #27272E00 !important;
.biglink > a:visited:hover {
    border-color: black !important
     color: #1e3666;
}
}


.mw-halign-left img {
/* ============ */
     border-color: black !important
/* #endregion */
/* ============ */
 
/* ============ */
/* #region SYSTEM MESSAGES */
/* ============ */
 
/* system message banner */
.mw-message-box {
    color: var(--text-color);
     border-color: var(--border-color-light);
    background-color: var(--bg-color-light-x4);
}
}


.mw-halign-left figcaption {
/* system success banner */
     background-color: #27272E00 !important;
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
     border-color: black !important
     background-color: hsl(167 37% 27% / 1);
     border-color: #096450;
    color: var(--text-color);
}
}


.mw-halign-center {
/* system warning banner (e.g. when you preview changes in the source editor and the "changes not yeh published" banner pops up) */
     background-color: #27272E00 !important;
.mw-message-box-warning,
     border-color: black !important
/* another system warning banner */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
    color: var(--text-color);
     background-color: var(--warning-color);
     border-color: var(--warning-color-border);
}
}


.mw-halign-center img {
/* another system error banner */
     border-color: black !important
.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 {
    color: var(--text-color);
    background-color: var(--danger-color-dark-x2);
     border-color: var(--danger-color-border);
}
}


.mw-halign-center figcaption {
/* #endregion */
    background-color: #27272E00 !important;
 
    border-color: black !important
/* ============ */
/* #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);
}
}


.reference {
/* images with "thumb" type → image */
    background-color: #27272E00;
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);
}
}


ol.references li:target,sup.reference:target {
/* images with "thumb" type → open image icon */
    background-color: #ffffff0f;
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,  
    padding: 0px 1px 3px 1px;
/* images with "thumb" type → ????? (something alike to the above) */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
filter: invert(100%);
}
}


.oo-ui-inputWidget-input {
/* #endregion */
     background-color: #27272e !important;
 
     border: #37373e !important;
/* ============ */
     color: #ffffff !important
/* #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);
}
}


.mw-search-profile-tabs {
/* page versions diff → cell (deleted text) */
     background-color: #27272e !important;
.diff .diff-deletedline {
    border: #37373e !important
     border-color: var(--red-color);
}
}


.search-types .current a {
/* page versions diff → cell (added text) */
     color: #d3d3d3 !important;
.diff .diff-addedline {
    cursor: default !important
     border-color: var(--green-color);
}
}


.mw-message-box-error {
/* page versions diff → cell → inline diff */
     background-color: #7b1919 !important;
.diff .diffchange {
    border-color: #af2424 !important
     background-color: var(--blue-color-dark-x2);
}
}


.mw-message-box-warning {
/* ============ */
     background-color: #7b6919 !important;
/* #endregion */
     border-color: #af9a24 !important
/* ============ */
 
/* ============ */
/* #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);
}
}


#mw-header-nav-hack {
/* search form → search bar → search icon */
    border-top: solid 2px #212126 !important;
.mw-search-form-wrapper #mw-search-top-table .oo-ui-icon-search,
    display: block;
/* search form → search bar → clear search icon */
    position: absolute;
.mw-search-form-wrapper #mw-search-top-table .oo-ui-indicator-clear {
    z-index: 98;
     filter: invert(100%);
    background: #212126 !important;
     width: 100%
}
}


.ui-widget-overlay {
/* search form → search bar → search button */
     background: #000000 !important;
.mw-search-form-wrapper #mw-search-top-table button[type=submit],
     opacity: .3 !important
/* 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;
}
}


.ui-widget-content {
/* search form → search bar → search button hover */
    border: 1px solid #4a4a57 !important;
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:hover,
     background: #212126 !important;
/* search form → advanced search options → all/none toggle container → button hover */
     color: #e0e0e0 !important
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:hover {
     background-color: var(--action-color-light);
     transition: background-color 100ms ease-out;
}
}


.ui-widget-header {
/* search form → search bar → search button active */
    border: 1px solid #4a4a57 !important;
.mw-search-form-wrapper #mw-search-top-table button[type=submit]:active,
     background: #212126 !important;
/* search form → advanced search options → all/none toggle container → button active */
     color: #e0e0e0 !important;
.mw-search-form-wrapper #mw-search-togglebox input[type=button]:active {
    font-weight: bold !important
     background-color: var(--action-color-dark-x2);
     transition: background-color 100ms ease-out;
}
}


#wikieditor-toolbar-file-target,#wikieditor-toolbar-file-caption,#wikieditor-toolbar-file-alt {
/* search form → search in pane → namespace suggest → namespace with a border */
     width: 100% !important;
.oo-ui-defaultOverlay > .oo-ui-selectWidget .mw-advancedSearch-namespace-border {
    background-color: #27272e !important;
     border-color: var(--bg-color-light-x3);
    color: #e0e0e0 !important
}
}


.wikiEditor-toolbar-dialog .ui-dialog-content input[type='text'] {
/* SEARCH BAR END */
     box-sizing: border-box !important;
 
    background-color: #27272e !important;
/* search form → results count info */
    color: #e0e0e0 !important
.mw-search-form-wrapper #mw-search-top-table .results-info {
     color: var(--bg-color-light-x4);
}
}


.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button {
/* search form → advanced search/search in pane */
     font-family: Verdana,Arial,sans-serif !important;
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
     font-size: 1em !important;
     background-color: var(--bg-color-light);
     background-color: #27272e !important;
     color: var(--text-color);
    color: #e0e0e0 !important
     border-color: var(--border-color-light);
}
}


.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
/* search form → advanced search/search in pane hover */
     border: 1px solid #4a4a57 !important;
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button:hover {
     background: #27272e !important;
     background-color: var(--bg-color-light-x2) !important;
     font-weight: normal !important;
     /* stays the same */
     color: #e0e0e0 !important
     color: var(--text-color) !important;
     border-color: var(--border-color) !important;
}
}


.ui-state-hover,.ui-widget-contetn .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus {
/* search form → advanced search/search in pane → "down" indication icon */
     border: 1px solid #4a4a57 !important;
.mw-search-form-wrapper .oo-ui-indicator-down {
    background: #4c4c59 !important;
     filter: invert(100%);
    font-weight: normal !important;
    color: #e0e0e0 !important
}
}


body .wikiEditor-toolbar-dialog .ui-dialog-titlebar-close {
/* search form → advanced search/search in pane → content container */
     right: 0.9em !important;
.mw-search-form-wrapper .mw-advancedSearch-expandablePane-pane > * {
     background: #4c4c59 !important
     /* 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);
}
}


.ui-dialog .ui-dialog-titlebar-close:hover,.ui-dialog .ui-dialog-titlebar-close:focus {
 
     padding: 0 !important;
/* TAGS */
     background: #6c6c80 !important
 
/* search form → tag */
.mw-search-form-wrapper.mw-search-form-wrapper .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;
}
}


ul#filetoc,.toc,.toccolours,.mw-warning {
/* search form → tag → remove button hover */
    display: table !important;
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-buttonElement-button:hover {
    background-color: #27272e !important;
     background-color: var(--bg-color-light);
    border: solid #000000 !important;
    border-radius: 0.9em;
    border-width: 1px 1px 0.2em !important;
     box-shadow: 0 1px 2px 1px rgb(39 0 255 / 17%) !important;
    padding: 1.25em 1.75em !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    min-width: 15em !important;
    font-size: 100% !important
}
}


.mw-body h1 {
/* search form → tag → remove icon */
     font-family: 'oswald';
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget .oo-ui-icon-close {
    font-size: 2em
     filter: invert(100%);
}
}


.mw-body .toctitle h2 {
/* search form → disabled tag */
     font-family: 'oswald';
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget.oo-ui-widget-disabled {
     font-size: 1.2em
     background-color: var(--bg-color-light);
     color: color-mix(in srgb, var(--text-color), var(--bg-color) 22%);
    text-shadow: none;
}
}


.diff-editfont-monospace .diff-addedline,.diff-editfont-monospace .diff-deletedline,.diff-editfont-monospace .diff-context {
/* search form → tag → link */
     font-family: monospace,monospace !important;
.mw-search-form-wrapper.mw-search-form-wrapper .oo-ui-tagItemWidget > a {
    background-color: #1b1b1f !important;
     color: var(--text-color);
    border-color: #1b1b1f !important;
    color: white !important
}
}


.diff-deletedline .diffchange {
/* search form → tag with a non-existing link */
     background: #4c3c16 !important
.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);
}
}


.diff-addedline .diffchange {
/* TAGS END */
     background: #16324d !important
/* 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;
}
}


.mw-json th,.mw-json td {
/* search form → fields group → label */
     border: 1px solid #000000;
.mw-search-form-wrapper .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
     font-size: 16px;
     /* should be the same as the bg to hide the line underneath */
     padding: 0.5em 1em
    background: var(--bg-color) !important;
     color: var(--text-color) !important;
     font-weight: bold !important;
}
}


.mw-json tr {
/* search form → tag select field */
     background-color: #212126;
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget,
     margin-bottom: 0.5em
/* 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;
}
}


.mw-json th {
/* search form → tag select field → input */
     background-color: #303037;
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget input {
    font-weight: normal;
     color: var(--text-color);
    vertical-align: top;
    color: #d3d3d3
}
}


.mw-json th span {
/* search form → tag select field → next nested container element */
    -webkit-position: sticky;
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget > .oo-ui-tagMultiselectWidget-handle,
     position: sticky;
/* search form → text input field → input */
    top: 0.5em
.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;
}
}


.mw-json-value,.mw-json-single-value {
/* search form → tag select field hover → next nested container element */
    background-color: #1b5929;
.mw-search-form-wrapper .oo-ui-tagMultiselectWidget:hover > .oo-ui-tagMultiselectWidget-handle,
    font-family: monospace,monospace;
/* search form → text input field → input hover */
     white-space: pre-wrap;
.mw-search-form-wrapper .oo-ui-textInputWidget .oo-ui-inputWidget-input:hover,
    color: #d3d3d3
/* search form → dropdown select hover */
.mw-search-form-wrapper .oo-ui-dropdownWidget-handle:hover {
     border-color: var(--border-color-light) !important;
}
}


.mw-json-empty {
 
     background-color: #1b5929;
/* FIELDS END */
     font-style: italic;
 
    color: #d3d3d3
/* #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);
}
}


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


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


.img_special:hover .img_spec {
/* option select popup → selected option hover */
     display: none
.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);
}
}


.ace-tm .ace_gutter {
/* option select popup → option active */
     background: #212126;
.oo-ui-selectWidget > .oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed,
     color: #333
/* 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%
    );
}
}


.ace-tm .ace_print-margin {
/* OPTION SELECT END */
     width: 1px;
 
     background-color: #1b1b1f
/* #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);
}
}


.ace-tm {
/* new styles */
     background-color: #1b1b1f;
 
    color: lightgrey
:root {
     --se-mode-icon: var(--icon-source-editor-cosmoGreen);
}
}


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


.ace-tm .ace_storage,.ace-tm .ace_keyword {
/* page editor footer section */
     color: rgb(153,153,255)
.mw-editform .editOptions {
    background-color: var(--bg-color-light);
     color: var(--text-color);
}
}


.ace-tm .ace_constant.ace_numeric {
/* page editor footer section → edit summary */
     color: rgb(153,153,205)
.mw-editform .editOptions input#wpSummary {
    background-color: var(--bg-color-light-x2);
     color: var(--text-color);
    border-color: var(--border-color-light);
}
}


.ace-tm .ace_constant {
/* page editor footer section → edit summary hover */
     color: rgb(241,89,92)
.mw-editform .editOptions input#wpSummary:hover {
     border-color: var(--border-color-light-x2);
}
}


.ace-tm .ace_support.ace_function {
/* page editor footer section "save changes" button */
     color: rgb(68,118,235)
.mw-editform .editOptions .editButtons .oo-ui-buttonElement-button#wpSave {
     background-color: var(--action-color);
    border-color: var(--border-color);
}
}


.ace-tm .ace_support.ace_constant {
/* page editor footer section "save changes" button hover */
     color: rgb(23,202,33)
.mw-editform
    .editOptions
    .editButtons
    .oo-ui-buttonElement-button#wpSave:hover {
     background-color: var(--action-color-light);
}
}


.ace-tm .ace_support.ace_type,.ace-tm .ace_support.ace_class {
/* page editor footer section "save changes" button active */
     color: rgb(182,187,236)
.mw-editform
    .editOptions
    .editButtons
    .oo-ui-buttonElement-button#wpSave:active {
     background-color: var(--action-color-dark);
}
}


.ace-tm .ace_string {
/* page editor footer section "show preview/changes" buttons */
     color: rgb(6,142,13)
.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;
}
}


.ace-tm .ace_comment {
/* page editor → footer section → show preview/changes buttons hover */
     color: rgb(103,193,150)
.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;
}
}


.ace-tm .ace_constant.ace_numeric {
/* page editor → footer section → show preview/changes buttons active */
     color: rgb(153,153,255)
.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;
}
}


.ace-tm .ace_marker-layer .ace_selection {
/* text editor toolbar */
     background: rgb(28,45,68)
.wikiEditor-ui-toolbar {
     background-color: var(--bg-color-light);
    color: var(--text-color);
}
}


.ace-tm .ace_marker-layer .ace_bracket {
/* text editor toolbar icons - inverting from black to white */
    margin: -1px 0 0 -1px;
.wikiEditor-ui-toolbar .oo-ui-iconElement-icon,
     border: 1px solid rgb(94,94,94)
.wikiEditor-ui-toolbar .oo-ui-indicator-down {
     filter: invert(100%);
}
}


.ace-tm .ace_marker-layer .ace_active-line {
/* text editor toolbar icons on hover */
     background: rgb(153,153,183,7%)
.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;
}
}


.ace-tm .ace_gutter-active-line {
/* text editor toolbar mode switch icon button (when active) */
     background-color: rgb(44,44,51)
.wikiEditor-ui-toolbar
    .oo-ui-popupToolGroup-active
    .oo-ui-popupToolGroup-handle {
     background-color: var(--bg-color-light-x4);
}
}


.ace-tm .ace_marker-layer .ace_selected-word {
/* text editor toolbar mode switch icon button → icon (when active) */
     background: rgb(37,59,89);
.wikiEditor-ui-toolbar
     border: 1px solid rgb(36,36,42)
    .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");
}
}


.codeEditor-status {
/* text editor toolbar → syntax highlight button → icon (when active) */
     clear: both;
span.oo-ui-iconElement-icon.oo-ui-icon-highlight.oo-ui-image-progressive {
     width: 100%;
     /* disable icon filter applied earlier */
     background-color: #212126;
    filter: none;
    border-top: 1px solid #40404b;
     /* replace with a proper image instead */
    display: table
     background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48dGl0bGU+IGhpZ2hsaWdodCA8L3RpdGxlPjxnIGZpbGw9IiMzNmMiPjxwYXRoIGZpbGw9InJnYigxMCwgMjEyLCA5OCkiIGQ9Ik0xNS4xNCAyLjI3YTEgMSAwIDAgMC0xLjQxIDBsLTEwIDEwYTEgMSAwIDAgMCAwIDEuNDFMNCAxNGwtMyA0aDVsMS0xIC4yOS4yOWExIDEgMCAwIDAgMS40MSAwbDEwLTEwYTEgMSAwIDAgMCAuMDMtMS40M3pNNyAxNWwtMi0yIDktOSAyIDJ6Ii8+PC9nPjwvc3ZnPg==");
}
}


.codeEditor-status-message {
/* text editor toolbar labels */
     border-left: 1px solid #40404b;
.wikiEditor-ui-toolbar .group .label {
    border-right: 1px solid #40404b;
     color: var(--text-color);
     padding: 0 0.3em;
     filter: brightness(80%);
    width: 100%;
    display: table-cell
}
}


.ace_search {
/* text editor toolbar labels with .tool-select class (they act as select) */
     background-color: #212126;
.wikiEditor-ui-toolbar .group .tool-select .label {
    color: #d3d3d3;
     color: var(--text-color);
    border: 1px solid #383843;
     filter: none;
     border-top: 0 none;
}
    overflow: hidden;
 
    margin: 0;
/* text editor toolbar label (that acts as select) options container */
    padding: 4px 6px 0 4px;
.wikiEditor-ui-toolbar .group .tool-select .options {
    position: absolute;
     background-color: var(--bg-color-light-x2);
     top: 0;
    z-index: 99;
    white-space: normal
}
}


.ace_search_form.ace_nomatch {
/* text editor toolbar label (that acts as select) options */
     outline: 1px solid #922626
.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;
}
}


.ace_search_field {
/* text editor toolbar → special characters tab → special characters */
     border-radius: 3px 0 0 3px;
.wikiEditor-ui-toolbar .page-characters div span {
     background-color: #27272e;
     color: var(--text-color);
    color: #d3d3d3;
     background-color: var(--bg-color-light);
     border: 1px solid #383843;
     border-color: var(--border-color);
    border-right: 0 none;
 
    outline: 0;
     /* a new prop, introduced because of hover */
     padding: 0;
     transition: background-color 50ms ease-in;
     font-size: inherit;
    margin: 0;
    line-height: inherit;
    padding: 0 6px;
    min-width: 17em;
    vertical-align: top;
    min-height: 1.8em;
    box-sizing: content-box
}
}


.ace_searchbtn {
/* text editor toolbar label (that acts as select) options on hover
    border: 1px solid #383843;
  note: no hover is defined by default, this is an addition */
    line-height: inherit;
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover,
    display: inline-block;
  /* text editor toolbar → group lists inside tabs → options on hover */
    padding: 0 6px;
  .wikiEditor-ui-toolbar .booklet>.index> :hover,
    background: #27272e;
  /* text editor toolbar → special characters tab → special characters on hover */
    border-right: 0 none;
  .wikiEditor-ui-toolbar .page-characters div span:hover {
     border-left: 1px solid #383843;
     background-color: var(--bg-color-light-x2);
     cursor: pointer;
     transition: background-color 50ms ease-out;
    margin: 0;
    position: relative;
    color: #d3d3d3
}
}


.ace_searchbtn:last-child {
/* text editor toolbar → special characters tab → special characters on hover */
     border-radius: 0 3px 3px 0;
.wikiEditor-ui-toolbar .page-characters div span:hover {
    border-right: 1px solid #383843
     border-color: var(--border-color-light);
}
}


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


.ace_searchbtn.prev:after {
/* text editor toolbar tab buttons
     content: "";
  the color property to the selected tab since it has higher priority */
    border: solid 2px #d3d3d3;
.wikiEditor-ui-toolbar .tabs span.tab a {
    width: 0.5em;
     color: var(--link-color);
     height: 0.5em;
 
    border-width: 2px 0 0 2px;
     transition: background-color 100ms ease-out;
    display: inline-block;
    transform: rotate(-45deg)
}
}


.ace_searchbtn.next:after {
/* text editor toolbar selected tab */
     content: "";
.wikiEditor-ui-toolbar .tabs span.tab a.current,
     border: solid 2px #d3d3d3;
  /* text editor toolbar selected tab, visited */
    width: 0.5em;
  .wikiEditor-ui-toolbar .tabs span.tab a.current:visited {
     height: 0.5em;
     color: var(--link-color);
    border-width: 2px 0 0 2px;
     background-color: var(--bg-color-light-x4);
    display: inline-block;
 
    transform: rotate(135deg)
     transition: background-color 100ms ease-in;
}
}


.ace_button {
/* an arrow icon to the left in text editor toolbar tabs */
    margin-left: 2px;
.wikiEditor-ui-toolbar .tabs span.tab a::before {
    cursor: pointer;
     filter: invert(100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
     opacity: 0.7;
    border: 1px solid rgb(56,56,68);
    padding: 1px;
    box-sizing: border-box!important;
    color: #d3d3d3;
    background-color: #27272e
}
}


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


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


::-webkit-scrollbar {
/* editor footer → checkbox active */
     background-color: #424242
.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;
}
}


::-webkit-scrollbar-thumb {
/* editor footer → checkbox focus */
     background-color: #686868;
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type="checkbox"]:focus + span {
    border: 2px solid #424242;
     /* background-color: var(--action-color-dark-x2er); */
    border-radius: 4px
}
}


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


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


.style-for-sub-numbered-lists ol {
/* editor footer → checkbox (checked) active */
     counter-reset: item
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled
    [type="checkbox"]:checked
    + span:active {
     background-color: var(--action-color-dark);
}
}


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


.style-for-sub-numbered-lists li:before {
/* override for page editor toolbar → help tab → table → th */
     content: counters(item,".") ". ";
.wikiEditor-ui-toolbar .page-table th {
    counter-increment: item
    text-align: center;
     color: var(--text-color);
}
}


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


.section .col {
/* override page editor toolbar → tabs → left section
     flex: 1 1 auto
  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;
}
}


.section .line-break {
/* editor → toolbar → mode switch button → popup (that opens on click) */
     flex-basis: 100%;
.wikiEditor-ui-toolbar .oo-ui-popupToolGroup-tools {
    width: 0px;
     background-color: var(--bg-color-light);
    height: 0px;
    overflow: hidden
}
}


.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,.mw-changeslist-legend,.mw-body .mw-search-profile-tabs,.mw-body fieldset#mw-searchoptions,.mw_metadata,.mw-datatable {
/* editor → toolbar → mode switch button → popup on click → inactive mode (span) */
     color: #d3d3d3;
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled {
    background: #303037;
     transition: background-color 100ms ease-in;
     border: solid #000000;
     color: var(--text-color);
    border-width: 1px 1px 0.2em;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02)
}
}


.mw_metadata > tr > th,.mw-datatable > tr > th,.wikitable > tr > th,.mw_metadata > tr > td,.mw-datatable > tr > td,.wikitable > tr > td,.mw_metadata > * > tr > th,.mw-datatable > * > tr > th,.wikitable > * > tr > th,.mw_metadata > * > tr > td,.mw-datatable > * > tr > td,.wikitable > * > tr > td {
/* editor → toolbar → mode switch button → popup on click → inactive mode (span) hover */
     border:none;
.wikiEditor-ui-toolbar .oo-ui-toolbar-popups .oo-ui-widget-enabled:hover,
     padding:0.5em;
  /* 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;
}
}


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


.mw-datatable td {
/* editor → toolbar → mode switch button → popup on click → selected mode (span) */
     background-color: #303037
.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);
}
}


.mw-datatable tr:hover td {
/* editor → toolbar → mode switch button → popup on click → selected mode (a) hover */
     background-color: #3f3f48
.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);
}
}


.pretoclip-copy-button {
/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → title */
     float: right
.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);
}
}


.mw-scribunto-console-fieldset {
/* editor → toolbar → mode switch button → popup on click → visual editing source mode active → icon */
     color: #d3d3d3;
.wikiEditor-ui-toolbar
     background: none;
    .oo-ui-toolbar-popups
    border: 3px solid #27272e
    .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-scribunto-message {
/* editor → toolbar → mode switch button → popup on click → source editing mode active → title */
     color: #008000;
.wikiEditor-ui-toolbar
    background: none
    .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);
}
}


#mw-scribunto-input {
/* editor → toolbar → mode switch button → popup on click → source editing mode active → icon */
     width: 100%;
.wikiEditor-ui-toolbar
     border: 0;
    .oo-ui-toolbar-popups
     overflow: auto;
    .oo-ui-widget-enabled.oo-ui-tool-name-editModeSource.oo-ui-tool-active
     background: #303037
    .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;
}
}


.mw-scribunto-input {
/* #region borders */
    color: #d3d3d3;
 
     font: inherit;
/* editor toolbar and content combined */
    font-weight: bold;
.wikiEditor-ui .wikiEditor-ui-view,
    margin-top: 0.5em
  /* 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);
}
}


.table-flex {
/* editor toolbar groups of buttons, except the last one */
     display: flex;
.wikiEditor-ui-toolbar .group:not(:last-child) {
    flex-direction: row;
     border-right: 1px solid var(--border-color-light);
    flex-wrap: wrap;
    justify-content: space-evenly
}
}


.boxes-flex {
/* editor toolbar last groups of buttons */
     padding: 0;
.wikiEditor-ui-toolbar .group:last-child {
    margin: 0;
     border-left: 1px solid var(--border-color-light);
    text-align: center
}
}


.role-big-title {
/* this is the last button on the main row of the editor toolbar */
     margin: 0px;
.wikiEditor-ui-toolbar .section-main .group:last-child {
    text-align: center;
     border-right: 1px solid var(--border-color-light);
    font-size: 40px;
    line-height: 50px;
    border-radius: 8px
}
}


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


.role-block-name {
/* editor toolbar → mode switch button
    padding: 2px;
  it has extra border on the bottom */
     border-radius: .3em;
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
    margin-bottom: .2em
     border-bottom: none;
}
}


.story-text {
/* ================================================ */
     text-indent: 19px;
/* #region <syntaxhighlight> CODE BLOCKS  */
     text-align: justify
/* ================================================ */
 
: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;
}
}


.story-dialogue {
/* Modified version of https://github.com/richleland/pygments-css/blob/master/monokai.css */
     line-height: 1.2
 
/* 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;
}
}


.oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
/* Code block → line numbers  */
     display: block;
.mw-highlight .linenos {
    position: relative;
     color: rgb(165, 155, 142);
    margin: 0px 25%
}
}


.mw-gallery-slideshow .gallerybox.slideshow-current {
/* Highlighted Lines */
     background: #28282e
.mw-highlight .hll {
     background-color: var(--action-color);
}
}


.gallerytext {
.mw-highlight {
     overflow: hidden;
     background: #272822;
    font-size: 94%;
     color: #f8f8f2;
    padding: 2px 4px;
     word-wrap: break-word;
    text-align: center
}
}


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


.mw-body li.gallerybox div.thumb {
/* Keyword */
     background: #f8f9fa00;
.mw-highlight .k {
    border: solid #28282e;
     color: var(--synt-high--color-keyword);
    border-width: 1px 1px 0.2em;
    padding: 1.25em 1.75em;
    box-shadow: 0 1px 2px 1px rgba(0,0,0,0.02);
    padding: 0
}
}


.title-no-bottom-border {
/* Literal */
     border-bottom: none !important
.mw-highlight .l {
     color: var(--synt-high--color-literal);
}
}


.title-top-border {
/* Name */
     border-top: solid 2px #c8ccd1
.mw-highlight .n {
     color: #f8f8f2;
}
}


@media (min-width: 1340px) {
/* Operator */
     #mw-content-block {
.mw-highlight .o {
        display:block
     color: var(--synt-high--color-operator);
    }
}


    #mw-content {
/* Punctuation */
        margin-left: 14em;
.mw-highlight .p {
        padding: 2em 0 0
    color: var(--synt-high--color-punctuation);
    }
}


    #mw-content-wrapper {
/* Comment */
        float: right;
.mw-highlight .c {
        margin-left: -14em;
    color: var(--synt-high--color-comment);
        background: transparent;
}
        width: 100%
    }


    #mw-related-navigation {
/* Comment.Hashbang */
        width: 14em;
.mw-highlight .ch {
        padding: 0 1em 0 0
    color: var(--synt-high--color-comment);
    }
}


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


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


    #catlinks {
/* Comment.PreprocFile */
        margin-left: 14em
.mw-highlight .cpf {
     }
     color: var(--synt-high--color-comment);
}
}


#footer {
/* Comment.Single */
     padding-right: 1em
.mw-highlight .c1 {
     color: var(--synt-high--color-comment);
}
}


.mw-body h2 {
/* Comment.Special */
     font-size: 1.8em;
.mw-highlight .cs {
    border-bottom: solid 2px #3366cc
     color: var(--synt-high--color-comment);
}
}


#mw-site-navigation .sidebar-chunk h3,#mw-related-navigation .sidebar-chunk h3 {
/* Generic.Deleted */
     border-bottom: solid 2px #3366cc
.mw-highlight .gd {
     color: #f92672;
}
}


.target {
/* Generic.Emph */
     border-bottom: 1px solid darkblue
.mw-highlight .ge {
     font-style: italic;
}
}


.target:target {
/* Generic.Inserted */
    border-bottom: 2px solid gold;
.mw-highlight .gi {
     transition: border 0.7s cubic-bezier(0.4,0,0.2,1)
     color: var(--synt-high--color-name);
}
}


.backlight:hover {
/* Generic.Strong */
    box-shadow: 0 0 0.3em gold;
.mw-highlight .gs {
     background-color: #00000025;
     font-weight: bold;
}
}


#main.backlight:hover {
/* Generic.Subheading */
     box-shadow: inset 0 0 23em #00000066;
.mw-highlight .gu {
    border-radius: 8px
     color: #75715e;
}
}


#strongwhite, #strongwhite p, #strongwhite h1, #strongwhite h2, #strongwhite h3, #strongwhite h4, #strongwhite h5, #strongwhite h6, #strongwhite li {
/* Keyword.Constant */
     color: #e9e9e9 !important
.mw-highlight .kc {
     color: var(--synt-high--color-keyword);
}
}
/*cell phone blackout*/
 
#menus-cover {
/* Keyword.Declaration */
     background: #000000;
.mw-highlight .kd {
    opacity: 0.4
     color: var(--synt-high--color-keyword);
}
}
.oo-ui-tagMultiselectWidget-handle,.oo-ui-panelLayout-padded {
 
     background: #1b1b1f;
/* Keyword.Namespace */
    border: 1px solid black;
.mw-highlight .kn {
    border-radius: 0
     color: #f92672;
}
}
/*Beautiful pictures*/
 
.mw-content-ltr figure[typeof~='mw:File/Thumb'], .mw-content-ltr figure[typeof~='mw:File/Frame'] {
/* Keyword.Pseudo */
     margin: 0 0 0.5em 0.5em;
.mw-highlight .kp {
    border:1px solid black;
     color: var(--synt-high--color-keyword);
    border-bottom:0;
    border-radius:0.9em 0.9em 0 0;
    background:#1b1b1f;
}
}
figure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
 
    border-radius: 0 0 0.9em 0.9em;
/* Keyword.Reserved */
     border:1px solid black;
.mw-highlight .kr {
    border-top:0;
     color: var(--synt-high--color-keyword);
    background:#1b1b1f;
    padding-bottom:5px;
    font-family:oswald;
    font-size:1em;
}
}


figure[typeof~='mw:File/Thumb'] > a:first-child > *:first-child:not(.mw-broken-media), figure[typeof~='mw:File/Frame'] > a:first-child > *:first-child:not(.mw-broken-media), figure[typeof~='mw:File/Thumb'] > span:first-child > *:first-child:not(.mw-broken-media), figure[typeof~='mw:File/Frame'] > span:first-child > *:first-child:not(.mw-broken-media) {
/* Keyword.Type */
    margin: 5px;
.mw-highlight .kt {
    border-radius: 0.4em;
    color: var(--synt-high--color-keyword);
}
}
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame']{
 
     border-collapse:separate;
/* Literal.Date */
.mw-highlight .ld {
     color: var(--synt-high--color-date);
}
}
.mw-content-ltr figure[typeof~='mw:File/Thumb']:not([typeof~='mw:Error']) > a.mw-file-description:after{
 
     border-bottom: 1px solid #3366cc;
/* Literal.Number */
.mw-highlight .m {
     color: var(--synt-high--color-literal);
}
}


/*button for the main menu*/
/* Literal.String */
.StupidButton {
.mw-highlight .s {
     width: 100%;
     color: var(--synt-high--color-string);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}
}


/*Colors of tables for different departments*/
/* Name.Attribute */
.mw-highlight .na {
    color: var(--synt-high--color-name);
}


/* Table */
/* Name.Builtin */
#MED.wikitable {
.mw-highlight .nb {
background: #01453e;
    color: #f8f8f2;
border-spacing: 0px;
}
}


/* Header */
/* Name.Class */
#MED.wikitable thead tr th,
.mw-highlight .nc {
#MED.wikitable:not(:has(thead)) tr:first-of-type th {
    color: var(--synt-high--color-name);
    position: relative;
    background-color: #01453e;
    border-bottom: 4px solid #00000015;
}
}


/* Title cell */
/* Name.Constant */
#MED.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
.mw-highlight .no {
#MED.wikitable thead + tbody > tr th {
     color: var(--synt-high--color-keyword);
     background: #005b53;
    border-bottom: 1px solid #01453e;
}
}


/* Cell with contents */
/* Name.Decorator */
#MED.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
.mw-highlight .nd {
#MED.wikitable thead + tbody > tr td {
     color: var(--synt-high--color-name);
     background: #1f635d;
    border-bottom: 1px solid #01453e;
    border-left: 1px solid #005b53;
}
}


#ENG.wikitable {
/* Name.Entity */
background: #775f0e;
.mw-highlight .ni {
border-spacing: 0px;
    color: #f8f8f2;
}
}


#ENG.wikitable thead tr th,
/* Name.Exception */
#ENG.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .ne {
     position: relative;
     color: var(--synt-high--color-name);
    background-color: #775f0e;
    border-bottom: 4px solid #00000015;
}
}


#ENG.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Name.Function */
#ENG.wikitable thead + tbody > tr th {
.mw-highlight .nf {
     background: #8f7210;
     color: var(--synt-high--color-name);
    border-bottom: 1px solid #775f0e;
}
}


#ENG.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
/* Name.Label */
#ENG.wikitable thead + tbody > tr td {
.mw-highlight .nl {
     background: #977e31;
     color: #f8f8f2;
    border-bottom: 1px solid #775f0e;
    border-left: 1px solid #8f7210;
}
}


#SEC.wikitable {
/* Name.Namespace */
    background: #404144;
.mw-highlight .nn {
     color: #dddddd;
     color: #f8f8f2;
}
}


#SEC.wikitable>*>tr>th {
/* Name.Other */
     background: #912424;
.mw-highlight .nx {
    color: #dddddd;
     color: var(--synt-high--color-name);
}
}


#SEC.wikitable > * > tr > td {
/* Name.Property */
    background: #515255;
.mw-highlight .py {
     color: #dddddd;
     color: #f8f8f2;
}
}


#SRV.wikitable {
/* Name.Tag */
    background: #316f20;
.mw-highlight .nt {
     color: #dddddd;
     color: #f92672;
}
}


#SRV.wikitable>*>tr>th {
/* Name.Variable */
    background: #316f20;
.mw-highlight .nv {
     color: #dddddd;
     color: #f8f8f2;
}
}


#SRV.wikitable >*> tr > td {
/* Operator.Word */
     background: #40852b;
.mw-highlight .ow {
    color: #dddddd;
     color: var(--synt-high--color-operator);
}
}


#RND.wikitable {
/* Text.Whitespace */
background: #630069;
.mw-highlight .w {
border-spacing: 0px;
    color: #f8f8f2;
}
}


#RND.wikitable thead tr th,
/* Literal.Number.Bin */
#RND.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .mb {
     position: relative;
     color: var(--synt-high--color-literal);
    background-color: #630069;
    border-bottom: 4px solid #00000015;
}
}


#RND.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Literal.Number.Float */
#RND.wikitable thead + tbody > tr th {
.mw-highlight .mf {
     background: #7c0183;
     color: var(--synt-high--color-literal);
    border-bottom: 1px solid #630069;
}
}


#RND.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
/* Literal.Number.Hex */
#RND.wikitable thead + tbody > tr td {
.mw-highlight .mh {
     background: #84328f;
     color: var(--synt-high--color-literal);
    border-bottom: 1px solid #630069;
    border-left: 1px solid #7c0183;
}
}


#SUP.wikitable {
/* Literal.Number.Integer */
background: #6f3d0a;
.mw-highlight .mi {
border-spacing: 0px;
    color: var(--synt-high--color-literal);
}
}


#SUP.wikitable thead tr th,
/* Literal.Number.Oct */
#SUP.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .mo {
     position: relative;
     color: var(--synt-high--color-literal);
    background-color: #6f3d0a;
    border-bottom: 4px solid #00000015;
}
}


#SUP.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Literal.String.Affix */
#SUP.wikitable thead + tbody > tr th {
.mw-highlight .sa {
     background: #85490c;
     color: var(--synt-high--color-string);
    border-bottom: 1px solid #6f3d0a;
}
}


#SUP.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
/* Literal.String.Backtick */
#SUP.wikitable thead + tbody > tr td {
.mw-highlight .sb {
     background: #8f5a23;
     color: var(--synt-high--color-string);
    border-bottom: 1px solid #6f3d0a;
    border-left: 1px solid #85490c;
}
}


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


#aMED.wikitable thead tr th,
/* Literal.String.Delimiter */
#aMED.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .dl {
     position: relative;
     color: var(--synt-high--color-string);
    background-color: #004d45;
    border-bottom: 0.2em solid #00000059;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
}


#aMED.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Literal.String.Doc */
#aMED.wikitable thead + tbody > tr th {
.mw-highlight .sd {
     background: #0d747f;
     color: var(--synt-high--color-string);
    border-bottom: 0.1em solid #00000059;
    border-left: 0.2em solid #00000059;
}
}


#aENG.wikitable thead tr th,
/* Literal.String.Double */
#aENG.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .s2 {
     position: relative;
     color: var(--synt-high--color-string);
    background-color: #715609;
    border-bottom: 0.2em solid #00000059;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
}


#aENG.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Literal.String.Escape */
#aENG.wikitable thead + tbody > tr th {
.mw-highlight .se {
     background: #957710;
     color: var(--synt-high--color-literal);
    border-bottom: 0.1em solid #00000059;
    border-left: 0.2em solid #00000059;
}
}


#aRND.wikitable thead tr th,
/* Literal.String.Heredoc */
#aRND.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .sh {
     position: relative;
     color: var(--synt-high--color-string);
    background-color: #4e0163;
    border-bottom: 0.2em solid #00000059;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
}


#aRND.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Literal.String.Interpol */
#aRND.wikitable thead + tbody > tr th {
.mw-highlight .si {
     background: #78027f;
     color: var(--synt-high--color-string);
    border-bottom: 0.1em solid #00000059;
    border-left: 0.2em solid #00000059;
}
}


#aSUP.wikitable thead tr th,
/* Literal.String.Other */
#aSUP.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .sx {
     position: relative;
     color: var(--synt-high--color-string);
    background-color: #6f390a;
    border-bottom: 0.2em solid #00000059;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
}


#aSUP.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Literal.String.Regex */
#aSUP.wikitable thead + tbody > tr th {
.mw-highlight .sr {
     background: #874b0e;
     color: var(--synt-high--color-string);
    border-bottom: 0.1em solid #00000059;
    border-left: 0.2em solid #00000059;
}
}


#aSEC.wikitable {
/* Literal.String.Single */
     background: #27272E;
.mw-highlight .s1 {
    color: #dddddd;
     color: var(--synt-high--color-string);
}
}


#aSEC.wikitable>*>tr>th {
/* Literal.String.Symbol */
     background: #912424;
.mw-highlight .ss {
    color: #dddddd;
     color: var(--synt-high--color-string);
}
}


#aSEC.wikitable > * > tr > td {
/* Name.Builtin.Pseudo */
    background: #32323C;
.mw-highlight .bp {
     color: #dddddd;
     color: #f8f8f2;
}
}


#aSRV.wikitable {
/* Name.Function.Magic */
background: #216321;
.mw-highlight .fm {
border-spacing: 0px;
    color: var(--synt-high--color-name);
}
}


#aSRV.wikitable thead tr th,
/* Name.Variable.Class */
#aSRV.wikitable:not(:has(thead)) tr:first-of-type th {
.mw-highlight .vc {
     position: relative;
     color: #f8f8f2;
    background-color: #216321;
    border-bottom: 0.2em solid #00000021;
}
}


#aSRV.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* Name.Variable.Global */
#aSRV.wikitable thead + tbody > tr th {
.mw-highlight .vg {
     background: #297929;
     color: #f8f8f2;
    border-bottom: 1px solid #216321;
}
}


#aSRV.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
/* Name.Variable.Instance */
#aSRV.wikitable thead + tbody > tr td {
.mw-highlight .vi {
     background: #3f833f;
     color: #f8f8f2;
    border-bottom: 1px solid #216321;
}
    border-left: 1px solid #297929;
}  


#BOTANY.wikitable {
/* Name.Variable.Magic */
background: #0d3f28;
.mw-highlight .vm {
    color: #f8f8f2;
}
}


 
/* Literal.Number.Integer.Long */
#BOTANY.wikitable thead tr th,
.mw-highlight .il {
#BOTANY.wikitable:not(:has(thead)) tr:first-of-type th {
     color: var(--synt-high--color-literal);
     position: relative;
    background-color: #04673e !important;
    border-bottom: 0.2em solid #00000021;
}
}


/* #endregion */


#BOTANY.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
#BOTANY.wikitable thead + tbody > tr th {
    background: #0d7b39;
}


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


#BOTANY.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th:first-of-type,
:root {
#BOTANY.wikitable thead + tbody > tr th:first-of-type {
     /* "se-cm" = Source Editor - Code Mirror */
     border-left: 0.2em solid #0000003b;
}


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


#BOTANY.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
    /* bg color for pre/nowiki tags contents */
#BOTANY.wikitable thead + tbody > tr td {
    --se-cm--pre-bg-color: hsl(205, 21%, 15%);
    background: #2a834e;
}


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


#MUTATION.wikitable {
    /* link itself */
background: #220f3b;
    --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);


#MUTATION.wikitable thead tr th,
    /* table brackets and row delimiter */
#MUTATION.wikitable:not(:has(thead)) tr:first-of-type th {
    --se-cm--table-punctuation-color: var(--synt-high--color-punctuation);
     position: relative;
     /* table settings */
     background-color: #330b65 !important;
     --se-cm--table-settings-color: var(--se-cm--template-arg-name-color);
    border-bottom: 0.2em solid #00000021;
}


    /* 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%);


#MUTATION.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
    /* template param name */
#MUTATION.wikitable thead + tbody > tr th {
    --se-cm--template-param-name-color: var(--synt-high--color-keyword);
     background: #3a1769;
    /* 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%);


#MUTATION.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th:first-of-type,
    /* selection color */
#MUTATION.wikitable thead + tbody > tr th:first-of-type {
    --se-cm--selection-color: hsl(205, 21%, 30%);
    border-left: 0.2em solid #0000003b;
    /* 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);


#MUTATION.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
    /* color for the text that the other rules don't apply to (regular text, header text, etc.) */
#MUTATION.wikitable thead + tbody > tr td {
    color: var(--text-color);
    background: #422371;
}
}


/* Unbroken spaces in horizontal lists
/* the actual lines of text */
  @source: https://ru.wikipedia.org/wiki/MediaWiki:Common.css
.CodeMirror pre.CodeMirror-line {
  @Sported under CC BY-SA 4.0
    /* a little bit of margin for the main content */
  @author: [[Contributor:WindEwriX]]*/
    margin-left: var(--se-cm--main-contents-left-margin);
.nowrap,
.nowraplinks a,
.nowraplinks .selflink,
.hlist-items-nowrap dd,
.hlist-items-nowrap dt,
.hlist-items-nowrap li {
white-space: nowrap;
}
}
/* Termination of CC BY-SA 4.0 license*/


/* Style for horizontal lists (separator following item).
/* gutters?? */
  @source mediawiki.org/wiki/Snippets/Horizontal_lists
.CodeMirror-wrap .CodeMirror-gutters {
  @revision 9 (2016-08-10)
    border-color: var(--border-color);
  @Sported under CC BY-SA 4.0
}
  @author [[User:Edokter]]
 
*/
/* gutter */
.hlist dl,
.CodeMirror-wrap .CodeMirror-gutter {
.hlist.hlist ol,
    /* same color as for code block */
.hlist.hlist ul {
    background-color: var(--se-cm--gutter-bg-color);
margin: 0;
padding: 0;
}
}
/* Display list items inline */
 
.hlist dd,
/* selection */
.hlist dt,
.CodeMirror-line::selection,
.hlist li {
/* selection */
margin: 0;
.CodeMirror-line>span::selection,
display: inline;
/* selection */
.CodeMirror-line>span>span::selection {
    background-color: var(--se-cm--selection-color);
}
}
/* Display nested lists inline */
 
.hlist.inline,
/* bullet point symbol */
.hlist.inline dl,
.cm-mw-list,
.hlist.inline ol,
/* ???? */
.hlist.inline ul,
.cm-mw-indenting {
.hlist dl dl, .hlist dl ol, .hlist dl ul,
    color: var(--se-cm--wikitext-formatting-color);
.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,
/* magic words */
.hlist .mw-empty-elt {
.cm-mw-doubleUnderscore,
display: none;
/* 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;
}
}
/* Generate bullets */
 
.hlist dt:after {
/* html sequences like "&nbsp;" */
content: ": ";
.cm-mw-mnemonic,
/* ???? */
.cm-mw-html-entity {
    color: var(--se-cm--xml-tag-color);
    background-color: #684905;
    border-radius: 2px;
}
}
.hlist dd:after,
 
.hlist li:after {
/* comments */
content: "\00a0· ";
.cm-mw-comment {
font-weight: bold;
    color: var(--se-cm--comment-color);
}
}
.hlist dd:last-child:after,
 
.hlist dt:last-child:after,
/* formatting: 3 apostrophes for bold text */
.hlist li:last-child:after {
.cm-mw-apostrophes-bold,
content: none;
/* formatting: 2 apostrophes for italic text
todo make them separate? better eligibility */
.cm-mw-apostrophes-italic {
    color: var(--se-cm--wikitext-formatting-color);
}
}
/* Add parentheses around nested lists */
 
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
/* template name */
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.cm-mw-template-name {
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
    color: var(--se-cm--template-name-color);
content: " (";
    /* disable the default */
font-weight: normal;
    text-decoration: none;
}
}
.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,
/* template arg names */
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
.cm-mw-template-argument-name {
content: ")";
    color: var(--se-cm--template-arg-name-color);
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";
}
/* Termination of CC BY-SA 4.0 license*/


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


.pseudomodal {
/* template pipe delimiters (maybe colon too for modules?) */
    overflow-y: auto;
.cm-mw-template-delimiter {
    display: flex;
     color: hsl(205, 71%, 85%);
    flex-direction: column;
     visibility: hidden;
    opacity: 0;
    background-color: #212126;
    width: 60%;
    height: 80%;
    border: 1px solid black;
    border-radius: 0.5rem;
    padding: 5px 25px;
    position: fixed;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100 !important;
    box-shadow: 0px 0px 0px 100vh rgba(0,0,0,0.6);
}
}


.pseudomodal--caller:focus-within + .pseudomodal {
/* template brackets */
  visibility: visible;
.cm-mw-template-bracket {
  opacity: 1;
    color: var(--se-cm--template-brackets-color);
}
}


.pseudomodal:hover {
/* template variable (with 3 brackets) name */
  visibility: visible;
.cm-mw-templatevariable-name {
  opacity: 1;
    color: var(--se-cm--template-param-name-color);
}
}


.pseudomodal--header {
/* template variable (with 3 brackets) value */
  text-align: center;
.cm-mw-templatevariable {
  font-size: 1.1em;
    color: var(--se-cm--template-param-value-color);
  position: relative;
}
}


.pseudomodal--header-hr{
/* template variable brackets (3 brackets) */
  margin: 20px 0;
.cm-mw-templatevariable-bracket {
  padding: 0;
    color: var(--se-cm--template-param-brackets-color);
  height: 0;
  border: none;
  border-top: 1px solid darkgray;
}
}


.pseudomodal--body{
/* template variable (with 3 brackets) delimiter */
  height: 100%;
.cm-mw-templatevariable-delimiter {
  position: relative;
    color: var(--se-cm--param-delimiter-color);
}
}


.pseudomodal::-webkit-scrollbar {
/* parser functions (things like "DISPLAYTITLE" or invokes) → name */
  width: 0.15rem;
.cm-mw-parserfunction-name {
  background-color:transparent;
    color: var(--se-cm--template-name-color);
}
}


.pseudomodal::-webkit-scrollbar-track {
/* parser functions (things like "DISPLAYTITLE" or invokes) → value */
  margin:1em;
.cm-mw-parserfunction {
  background: transparent;
    color: var(--se-cm--template-values-color);
}
}


.pseudomodal::-webkit-scrollbar-thumb {
/* parser functions (things like "DISPLAYTITLE" or invokes) → brackets */
  background-color: transparent;
.cm-mw-parserfunction-bracket {
  border: solid #373737;
    color: var(--se-cm--template-brackets-color);
}
}


/* Key press */
/* parser functions (things like "DISPLAYTITLE" or invokes) → delimiters */
.keyboard-key {
.cm-mw-parserfunction-delimiter {
     border: 1px solid #555555;
     color: var(--se-cm--template-delimiter-color);
    border-radius: 0.2em;
    box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.1);
    background-image: linear-gradient(to bottom, #1e1e1e, #393838, #1e1e1e);
    color: lightgrey;
    padding: 0.1em 0.3em;
    font-family: inherit;
    font-size: 0.8em;
}
}


@media only screen and (max-width: 600px) {
/* wiki html tag names? like >syntaxhighlight> */
.flex--row-column {
.cm-mw-exttag-name,
flex-direction:column; width: 50%; margin: auto;
/* html tag names */
}
.cm-mw-htmltag-name {
    color: var(--se-cm--xml-tag-color);
}
}


.forumMessage, .wikiMessage {
/* if a string starts with an empty space, it will generate a pre block.
background: #1b1b1f;
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);
}
}


.forumMessage {
/* wiki html tag brackets */
padding: 10px 10px 30px;
.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);
}
}


.wikiMessage {
/* pre tag BLOCK contents */
padding: 10px 10px 10px;
pre.CodeMirror-line.cm-mw-tag-pre,
margin-bottom: 10px;
/* 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);
}
}


.forumMessageInfo, .wikiMessageInfo{
/* pre tag BLOCK contents */
padding: 0;
pre.CodeMirror-line.cm-mw-tag-pre,
margin-left: 160px;
/* nowiki tag BLOCK contents */
border-bottom: 1px none black;
pre.CodeMirror-line.cm-mw-tag-nowiki {
zoom: 1;
    /* colors the margin gap bg for block variants */
color: rgb(255, 255, 255);
    box-shadow: calc(-1 * var(--se-cm--main-contents-left-margin)) 0
        var(--se-cm--pre-bg-color);
}
}


.forumMessageContent, .wikiMessageContent {
/* pre tag INLINE contents */
padding-bottom: 2px;
.CodeMirror-line span.cm-mw-tag-pre,
padding-left:4px;
/* nowiki tag INLINE contents */
border-style: hidden;
.CodeMirror-line span.cm-mw-tag-nowiki {
min-height: 100px;
    /* a little corner rounding won't hurt a thing! */
overflow: hidden;
    border-radius: 2px;
}
.forumMessageContent {
background-color: #303037
}
}


.forumMessageUserInfo, .wikiIMG {
/* ???? */
float: left;
.cm-mw-link,
width: 140px;
/* ???? */
position: relative;
.cm-mw-link-tosection,
/* header equal signs */
.cm-mw-section-header {
    color: var(--se-cm--wikitext-formatting-color);
}
}


.forumAvatarHolder, .wikiIMGHolder {
/* link itself */
padding: 10px;
.cm-mw-link-pagename,
text-align: center;
/* external link itself, without protocol */
position:relative;
.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);
}
}


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


.forumUserText {
/* link delimiter */
padding: 1px 10px;
.cm-mw-link-delimiter {
background:#303037
    color: var(--se-cm--cm-mw-link-delimiter);
}
}


.forumUserName {
/* link text */
font-size: 14px;
.cm-mw-link-text,
color: rgb(255, 148, 7);
/* external link text */
margin-bottom: 5px;
.cm-mw-extlink-text {
display: block;
    color: var(--se-cm--link-text-color);
overflow: hidden;
line-height: 16px;
text-align: center;
}
}


.forumBanner {
/* tables opening "{|" and closing "|}" brackets */
font-size: 11px;
.cm-mw-table-bracket,
text-align: center;
/* table row delimiter (doesn't include cols!) */
padding: 5px;
.cm-mw-table-delimiter {
color: black;
    color: var(--se-cm--table-punctuation-color);
border-color: silver;
height: 16px;
width: 105px;
display: block;
margin-bottom: 5px
}
}


.forumAdmin {
/* the table settings I guess? (like «class="wikitable"») */
background: silver
.cm-mw-table-definition {
}
     color: var(--se-cm--table-settings-color);
/* CodeMirror */
.CodeMirror {
     position: relative;
    overflow: hidden;
    background: #1b1b1f;
    color: inherit;
}
}


.CodeMirror-gutters {
/* ???? idk some kind of formatting errors? */
    border-right: 1px solid #212126;
.cm-error,
     background-color: #212126;
.cm-mw-error,
    white-space: nowrap;
.cm-s-default .cm-error {
     color: var(--se-cm--error-color);
}
}


.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
.cm-mw-matchingbracket {
     background: #1c2d44;
    background-color: var(--se-cm--matching-brackets-bg-color);
    /* disable the default */
     box-shadow: none;
}
}


.noExternal>.external {
/* various inline bg targeting things, idk what each of them target exactly */
  padding-right:0px !important;
.cm-mw-template2-ground,
  background-image:none !important;
.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;
}
}


.mw-mmv-image>*, .fullImageLink>*>* {
image-rendering: auto !important;
}


.skameykatable{
/* #endregion */
border:1px solid black;
 
border-radius:1.4rem;
 
}
/* #endregion */
.skameykatable>*>tr>th{
 
      text-align:center;
/* ============ */
    font-weight:bold;
/* #endregion */
    }
/* ============ */
.skameykatable>*>tr>td{
 
      border:none;
/* ============ */
    }
/* #region =🖌️= VISUAL EDITOR =🖌️= */
.skameykatable>*>tr:not(:first-child)>*{
/* ============ */
    border-top:1px solid black !important;
}
.skameykatable>*>tr:not(:first-child):not(:last-child):hover{
box-shadow: inset 30em 30em 0 #1b1b20;
}
.skameykatable>*>tr:last-child{
    box-shadow: inset 30em 30em 0 #1b1b20;
    border-bottom-left-radius:1.3rem;
    border-bottom-right-radius:1.3rem;
}


.skameykatable>*>tr>*{
/* visual editor (content) → template [puzzle] icon
    padding:0.4em;
the content selector is to not affect other places where this icon is used */
     background:transparent;
.content-body .oo-ui-icon-puzzle {
          border:none !important;
     background-image: linear-gradient(transparent, transparent),
    }
        var(--icon-template-puzzle-white);
   
     opacity: 1;
.headerSort::after {
content: "\21C5";
}
      
.headerSort.headerSortUp::after {
    content: "\2191";
}
}


.headerSort.headerSortDown::after {
/* template name
     content: "\2193";
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;
}
}




.headerSort {
/* visual editor → editor loading → placeholder (?) navbar container */
background-size: 0 0 !important;
.ve-init-mw-desktopArticleTarget-targetContainer
white-space: nowrap;
    .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);
}


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


/**
/* visual editor → toolbar (left part)  */
* SS220 import
.ve-init-target-visual > .oo-ui-toolbar > .oo-ui-toolbar-bar {
*
    background-color: var(--bg-color-light-x3);
* Taken from https://wiki.ss220.space/index.php?title=MediaWiki:Common.css&oldid=35625
    color: var(--text-color);
*/
}


/* Hide noscript only elements */
/* visual editor → toolbar → icons */
.client-js *.noscript {
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-iconElement-icon,
     display: none;
/* 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;
}


/* SS220 import end*/
/* 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;


#highlighted-header.wikitable thead tr th,
    /* just for the button bg */
    transition: background-color 0.1s ease-out;


#highlighted-header.wikitable:not(:has(thead)) tr:first-of-type th {
    background-color: var(--bg-color-light-x5);
     position: relative;
}
    background-color: #3d3d4f;
/* visual editor → toolbar (right part) → «save changes» button (disabled, when no changes were made yet) → title */
    border-bottom: 0.2em solid #00000059;
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link .oo-ui-tool-title {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     color: var(--text-color-grayed-out);
}
}


 
/* visual editor → toolbar (right part) → «save changes» button (available) */
#highlighted-header.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
.oo-ui-toolbar-actions
 
    .ve-ui-toolbar-group-save
#highlighted-header.wikitable thead + tbody > tr th {
    .oo-ui-toolGroup-tools
     background: #972626;
     .oo-ui-widget-enabled
     border-bottom: 0.1em solid #00000059;
     .ve-ui-toolbar-saveButton {
     border-left: 0.2em solid #00000059;
     background-color: var(--action-color);
}
}


#highlighted-header-classic.wikitable thead tr th,
/* visual editor → toolbar (right part) → «save changes» button (available) hover */
#highlighted-header-classic.wikitable:not(:has(thead)) tr:first-of-type th {
.oo-ui-toolbar-actions
     position: relative;
    .ve-ui-toolbar-group-save
     background-color: #323245;
     .oo-ui-toolGroup-tools
     border-bottom: 0.2em solid #0000002b;
     .oo-ui-widget-enabled
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     .ve-ui-toolbar-saveButton:hover {
     background-color: var(--action-color-light-x2);
}
}


#highlighted-header-classic.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* visual editor → toolbar (right part) → «save changes» button (available) active */
#highlighted-header-classic.wikitable thead + tbody > tr th {
.oo-ui-toolbar-actions
     background: #3d3d51;
    .ve-ui-toolbar-group-save
     border-bottom: 0.1em solid #0000000d;
    .oo-ui-toolGroup-tools
     border-left: 0.2em solid #00000024;
     .oo-ui-widget-enabled.oo-ui-tool-active
     .ve-ui-toolbar-saveButton {
     background-color: var(--action-color-dark-x2);
}
}


#highlighted-header-cold.wikitable thead tr th,
/* visual editor → toolbar (right part) → «save changes» button (available) → label */
#highlighted-header-cold.wikitable:not(:has(thead)) tr:first-of-type th {
.oo-ui-toolbar-actions
     position: relative;
    .ve-ui-toolbar-group-save
     background-color: #006587;
    .oo-ui-toolGroup-tools
     border-bottom: 0.2em solid #00000059;
     .oo-ui-widget-enabled
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     .ve-ui-toolbar-saveButton
     .oo-ui-tool-title {
     color: var(--text-color);
}
}


#highlighted-header-cold.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* visual editor → toolbar → dropdown button (div) hover */
#highlighted-header-cold.wikitable thead + tbody > tr th {
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-popupToolGroup-handle:hover,
     background: #00707b;
/* visual editor → toolbar → button (a) hover (except the «save changes» button */
    border-bottom: 0.1em solid #00000059;
.ve-init-target-visual>.oo-ui-toolbar .oo-ui-tool-link:not(.ve-ui-toolbar-saveButton):hover {
    border-left: 0.2em solid #00000059;
     background-color: var(--bg-color-light-x2);
}


#highlighted-header-dark.wikitable thead tr th,
    /* more "snappier" transition */
#highlighted-header-dark.wikitable:not(:has(thead)) tr:first-of-type th {
     transition: background-color 50ms ease-out;
     position: relative;
    background-color: #3d3d4f;
    border-bottom: 0.2em solid #00000059;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
}


#highlighted-header-dark.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* visual editor → toolbar → dropdown button (span) active → icon */
#highlighted-header-dark.wikitable thead + tbody > tr th {
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-iconElement-icon,
     background: #8d2121;
/* visual editor → toolbar → button (span) active (except the «save changes» button → icon */
     border-bottom: 0.1em solid #00000059;
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-iconElement-icon {
     border-left: 0.2em solid #00000059;
     /* 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%);
}
}


#highlighted-header-CM.wikitable thead tr th,
/* visual editor → toolbar → tabber icon (only in the «insert» menu afaik) → icon */
#highlighted-header-CM.wikitable:not(:has(thead)) tr:first-of-type th {
.ve-init-target-visual
     position: relative;
    > .oo-ui-toolbar
     background-color: #313d45;
    > .oo-ui-toolbar-bar
     border-bottom: 0.2em solid #00000059;
    .oo-ui-tool-active
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     .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);
}
}


#highlighted-header-CM.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* visual editor → toolbar → dropdown button (span 1 level up) active */
#highlighted-header-CM.wikitable thead + tbody > tr th {
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle,
     background: #355f54;
/* visual editor → toolbar → button active (a) */
    border-bottom: 0.1em solid #00000059;
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-tool-link {
    border-left: 0.2em solid #00000059;
     background-color: var(--bg-color-light-x3);
}
}


#highlighted-header-xenomorph.wikitable thead tr th,
/* visual editor → toolbar → dropdown button (span) active → label */
#highlighted-header-xenomorph.wikitable:not(:has(thead)) tr:first-of-type th {
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-popupToolGroup-active .oo-ui-labelElement-label,
     position: relative;
/* visual editor → toolbar → button (span) active (except the «save changes» button → label */
    background-color: #3c1d5f;
.ve-init-target-visual>.oo-ui-toolbar>.oo-ui-toolbar-bar .oo-ui-tool-active .oo-ui-labelElement-label,
    border-bottom: 0.2em solid #00000059;
/* visual editor → tool popups → button (span) active → label */
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
.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);
}
}


#highlighted-header-xenomorph.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* visual editor → toolbar → adding new image → caption */
#highlighted-header-xenomorph.wikitable thead + tbody > tr th {
.ve-ui-targetWidget:not(.oo-ui-pendingElement-pending) {
     background: #5d1c55;
     /* remove white bg */
     border-bottom: 0.1em solid #00000059;
     background: unset;
    border-left: 0.2em solid #00000059;
}
}


#no-highlight {
/* visual editor → toolbar → adding new image → caption */
     border-bottom: none !important;
.ve-ui-targetWidget {
    box-shadow: none !important;
    /* 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);
}


#VIOLET.wikitable {
/* visual editor → tool popups → button (span) */
background: #391b5d;
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool {
border-spacing: 0px;
    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);
}


#VIOLET.wikitable thead tr th,
/* visual editor → tool popups → button (span) active */
#VIOLET.wikitable:not(:has(thead)) tr:first-of-type th {
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
    position: relative;
    .oo-ui-widget.oo-ui-tool-active {
     background-color: #391b5d;
     background-color: var(--bg-color-light-x3);
    border-bottom: 0.2em solid #00000021;
}
}


#VIOLET.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
/* visual editor → tool popups → button (span) active → label */
#VIOLET.wikitable thead + tbody > tr th {
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools
     background: #44206f;
    .oo-ui-widget.oo-ui-tool-active
     border-bottom: 1px solid #391b5d;
    .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 {
}


#VIOLET.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
/* visual editor → tool popups → button (a) */
#VIOLET.wikitable thead + tbody > tr td {
.oo-ui-popupToolGroup-tools.oo-ui-toolGroup-tools .oo-ui-tool .oo-ui-tool-link {
     background: #4a2b6f;
     color: var(--text-color);
    border-bottom: 1px solid #391b5d;
}
}


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


#YELLOW.wikitable {
/* visual editor → tool popups → editor mode switch popup → «source editor» button active → label */
background: #405d1b;
.oo-ui-toolbar-popups
border-spacing: 0px;
    .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);
}




#YELLOW.wikitable thead tr th,
/* ============ */
#YELLOW.wikitable:not(:has(thead)) tr:first-of-type th {
/* #region STYLES FROM THE SOURCE */
    position: relative;
/* 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 */
    background-color: #405d1b;
/* ============ */
    border-bottom: 0.2em solid #00000021;
}


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


#YELLOW.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) th,
    to {
#YELLOW.wikitable thead + tbody > tr th {
        backdrop-filter: blur(3px);
    background: #4c6d20;
        background-color: color-mix(in srgb, var(--bg-color) 25%, transparent);
     border-bottom: 1px solid #405d1b;
     }
}
}


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


#YELLOW.wikitable:not(:has(thead)) tbody > tr:nth-of-type(n+2) td,
/* visual editor → modal */
#YELLOW.wikitable thead + tbody > tr td {
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
     background: #577332;
     background-color: var(--bg-color);
     border-bottom: 1px solid #405d1b;
    color: var(--text-color);
     border-color: var(--bg-color-light-x3);
}
}


@media (max-width: 800px) {
/* visual editor → modal head */
     .grid-adaptive {
.oo-ui-windowManager-modal .oo-ui-window-head {
        grid-template-columns: 1fr !important;
    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);
}
}


.no-margin-edges > :first-child {
/* visual editor → modal head → «apply changes» button (a) inactive */
     margin-top: 0 !important;
.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;
}
}


.no-margin-edges > :last-child {
 
     margin-bottom: 0 !important;
 
/* 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(--bg-color-light-x4);
}
/* 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);
}
/* #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 */


.modern-button {
.modern-button {

Revision as of 01:50, 31 December 2024

/* Basic colors:
#1b1b1f - wiki background
#212126 - background of information blocks (navigation and the main block of the page)

#303037 - background for <pre> and <code>
lightgrey - text color for <pre> and <code>
*/

/* 
- - - FONTS - - -
*/
@font-face {
    font-family: 'Noto Sans Light';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRPQ_m87A.woff2) format('woff2');
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: 'Noto Sans Light';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRGQ_m87A.woff2) format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Noto Sans Light';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRMQ_m87A.woff2) format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Noto Sans Light';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/notosans/v30/o-0OIpQlx3QUlC5A4PNjhgRCQ_k.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752HT8Ghe4.woff2) format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    src: url(https://fonts.gstatic.com/s/oswald/v53/TK3iWkUHHAIjg752GT8G.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: 'Boxfont Round';
    src: url(/assets/fonts/boxfont-round/f3507eaadc95584e7358703d74e793ea/324a92fc76117885a667ae8af2be25ab/BoxfontRoundRegular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'noto sans';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans'),url(https://fonts.cdnfonts.com/s/15794/NotoSans-Regular.woff) format('woff')
}

@font-face {
    font-family: 'noto sans';
    font-style: italic;
    font-weight: 400;
    src: local('Noto Sans'),url(https://fonts.cdnfonts.com/s/15794/NotoSans-Italic.woff) format('woff')
}

@font-face {
    font-family: 'noto sans';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans'),url(https://fonts.cdnfonts.com/s/15794/NotoSans-Bold.woff) format('woff')
}

@font-face {
    font-family: 'noto sans';
    font-style: italic;
    font-weight: 700;
    src: local('Noto Sans'),url(https://fonts.cdnfonts.com/s/15794/NotoSans-BoldItalic.woff) format('woff')
}

@font-face {
    font-family: 'Noto Sans Symbols';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/notosanssymbols/v40/rP2up3q65FkAtHfwd-eIS2brbDN6gxP34F9jRRCe4W3gfQ8QA_9Edkw.woff2) format('woff2');
    unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F10C,U+1F110-1F16C,U+1F170-1F190,U+1F19B-1F1AC,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F321-1F32C,U+1F336,U+1F378,U+1F37D,U+1F393-1F39F,U+1F3A7,U+1F3AC-1F3AE,U+1F3C2,U+1F3C4,U+1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4DA,U+1F4DF,U+1F4E4-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50A,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F579,U+1F57B-1F594,U+1F597-1F5A3,U+1F5A5-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CB,U+1F6CD-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8B1,U+1F93B,U+1F946,U+1FA00-1FA6F,U+1FA70-1FA74,U+1FA78-1FA7A,U+1FA80-1FA86,U+1FA90-1FAA8,U+1FAB0-1FAB6,U+1FAC0-1FAC2,U+1FAD0-1FAD6,U+1FB00-1FBFF
}

@font-face {
    font-family: 'Noto Sans Symbols';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/notosanssymbols/v40/rP2up3q65FkAtHfwd-eIS2brbDN6gxP34F9jRRCe4W3gfQ8QY_9Edkw.woff2) format('woff2');
    unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

@font-face {
    font-family: 'Noto Sans Symbols';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/notosanssymbols/v40/rP2up3q65FkAtHfwd-eIS2brbDN6gxP34F9jRRCe4W3gfQ8Qbf9E.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v170/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2')
}

/* 
- - - TAGS - - -
*/
cite,dfn {
    font-style: inherit;
}

code {
    background-color: #303037;
    border-color: #303037;
    color: lightgrey;
}

pre {
    overflow: auto;
    white-space: pre-wrap;
    color: lightgrey;
    background-color: #303037;
    border-color: #303037;
}

blockquote {
    overflow: hidden;
    margin: 1em 0;
    padding: 0 40px
}

small {
    font-size: 85%
}

img {
    image-rendering: pixelated;
}

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

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

    --text-color: lightgrey;
    --text-color-grayed-out: gray;

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

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


    /* ============= */
    /* 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 */
/* Recent Changes */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled
    .oo-ui-tagMultiselectWidget-handle,
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background: var(--bg-color-light-x2);
    border: 1px solid #303038;
    color: var(--text-color);
}

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

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

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

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

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

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

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

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

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

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

/* allows enabling smooth rendering for images by adding this class to them whenever needed */
img.smooth-render,
.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 {
    overflow: auto;
}

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

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

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

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

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

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

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

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

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

/* ============ */
/* #region SYSTEM MESSAGES */
/* ============ */

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

/* system success banner */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
    background-color: hsl(167 37% 27% / 1);
    border-color: #096450;
    color: var(--text-color);
}

/* 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 {
    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 {
    color: var(--text-color);
    background-color: var(--danger-color-dark-x2);
    border-color: var(--danger-color-border);
}

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

/* #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 {
    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 {
    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 {
    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 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);
    /* disable the default */
    box-shadow: none;
}

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


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

/* 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(--bg-color-light-x4);
}

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

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


.modern-button {
    position: relative;
    display: flex;
    min-width: 45%;
    background: #31313b;
    border-radius: 8px;
    min-height: 64px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.modern-button__image {
    display: flex;
    align-items: center;
    background: #40404d;
    padding: 4px;
    box-shadow: inset 20px 0px 20px 0px rgba(0, 0, 0, 0.05);
}

.modern-button__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
}

.modern-button__title {
    font-size: 1.8em;
    line-height: 1;
    font-family: "Oswald";
}

.modern-button__subtext {
    font-size: 0.8em;
}

.modern-frame {
    display: flex;
    flex-direction: column;
}

.modern-frame__title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 2px 8px;
    color: #e5e5e5;
    font-size: 15px;
    font-family: "noto sans";
    border-radius: 0.3em 0.3em 0 0;
    border-bottom: 3px solid #00000045 !important;
}

.modern-frame__content {
    border-radius: 0 0 0.3em 0.3em;
    box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4);
}

@media (max-width: 800px) {
    .modern-frame__content {
        gap: 6px;
        padding: 8px;
    }
}

.gradient-header-frame-sub {
    border: 1px solid #3a3a46;
    border-radius: 0.3em;
}

.gradient-header-frame-sub__header {
    color: #efefef;
    font-size: 1.15em;
    font-family: "noto sans";
    padding: 6px 10px;
    background: linear-gradient(90deg, #3a3a45 0%, #3a3a45 10%, #2f2f37 50%);
    text-align: left;
}

.gradient-header-frame-sub__content {

}

.gradient-header-frame-sub__content::-webkit-scrollbar { width: 10px; }
.gradient-header-frame-sub__content::-webkit-scrollbar-track  { background: #2c2c33; }
.gradient-header-frame-sub__content::-webkit-scrollbar-thumb { background: #44444d; border: 2px solid #2c2c33; border-radius: 0; }

.gradient-header-frame {
    border: 1px solid #3a3a46;
    border-radius: 0.3em;
}

.gradient-header-frame__header {
    color: #efefef;
    font-size: 1.15em;
    font-family: "noto sans";
    padding: 6px 10px;
    background: linear-gradient(90deg, #2f2f37 0%, #3a3a45 40%, #3b3b47 50%, #3a3a45 60%, #2f2f37 100%);
    text-align: center;
}

.gradient-header-frame__content {

}

.gradient-header-frame__content::-webkit-scrollbar { width: 10px; }
.gradient-header-frame__content::-webkit-scrollbar-track  { background: #2c2c33; }
.gradient-header-frame__content::-webkit-scrollbar-thumb { background: #44444d; border: 2px solid #2c2c33; border-radius: 0; }

.link-card {
    display: inline-block;
    position: relative;
    border-radius: 0.3em;
    transition: all 0.15s ease;
    overflow: hidden;
    min-width: 110px;
    text-align: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
    border: 1px outset rgb(0 0 0 / 30%);
}

.link-card__image {
    padding: 6px;
}

.link-card__name {
    background: #00000040;
    padding: 2px 4px;
    font-size: 0.8em;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    .link-card  {
        display: flex;
        width: 100%;
        text-align: left;
    }

    .link-card__name {
        background: #00000020;
        padding: 4px 6px;
        font-size: 0.9em;
        display: flex;
        align-items: center;
    }

    .link-card__image {
        padding: 4px;
    }
}

.serverStatusFrame {
    display: flex;
    flex-direction: column;
    color: lightgrey;
}

.serverTitle {
    font-size: 18px;
    color: lightgrey;
    text-align: center;
    margin: 0;
    padding: 4px 8px;
    border-radius: 0.3em 0.3em 0 0;
    border-bottom: 3px solid #00000045 !important;
}

.serverInfo {
    padding: 6px;
    border-radius: 0 0 0.3em 0.3em;
    box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
}

serverInfo > div {
    margin-bottom: 3px;
}

.serverInfo div[class*="Set"] {
    font-size: 14px;
}

.progressBarContainer {
    width: 100%;
    background-color: rgba(150, 150, 150, 0.5);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 3px;
}

.progressBar {
    background-color: rgba(100, 200, 100, 0.8);
    height: 15px;
    transition: width 0.3s;
}

.percentageDisplay {
    text-align: right;
    font-size: 12px;
    color: lightgrey;
}

.copy-icon {
    cursor: pointer;
}

.serverConnectContainer {
    display: flex;
    align-items: flex-start;
    margin-top: 3px;
    min-height: calc(3em + 5px);
}

.serverConnectSet {
    margin-right: 1px;
    flex-grow: 1;
    overflow-wrap: break-word;
}

.tools-inline li.selected a
{
    color: lightgrey;
}
Retrieved from "https://ss14-starlight.wiki/index.php?title=MediaWiki:Common.css&oldid=41"