MediaWiki:Common.css

From Sheltered 2 Wiki
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all themes */

/* Imported fonts, icons etc */
/* Multi-font import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,600;1,600&family=Source+Code+Pro:wght@500&display=block');

/* -- WARNING -- This is variable heavy (with a lot of redundancy) until styling is settled (and possible themes added)*/

:root {
  /* BEGIN -- Sheltered 2 theme variables */
  --theme-body-background-image-full: url(/images/0/0f/Site-background-dark.webp);
  --theme-logo-image-full: url(/images/e/e6/Site-logo.png?11bb4);
  /* -- Page / Article content */
  --theme-primary-background-color: #000;
  --theme-primary-background-color--rgb: 0, 0, 0;
  --theme-secondary-background-color: #404040;
  --theme-secondary-background-color--rgb: 64, 64, 64;
  --theme-body-header-letter-spacing: .035em;
  --theme-body-header-text-color: var(--theme-text-highlight-color--general);
  --theme-body-header-text-color--rgb: var(--theme-text-highlight-color--general--rgb);
  --theme-body-header-text-font: 'Bebas Neue', sans-serif;
  --theme-body-header-text-size: 1.5em;
  --theme-body-letter-spacing: .02em;
  --theme-body-line-height: 1.75;
  --theme-body-text-font: 'Open Sans', sans-serif;
  --theme-body-text-size: .875em;
  --theme-body-secondary-text-style: italic;
  --theme-header-font: var(--theme-body-header-text-size) var(--theme-body-header-text-font);
  --theme-link-color--hover: #aeb6cb;
  --theme-link-color: #8590b0;
  --theme-link-color--rgb: 133, 144, 176;
  --theme-page-background-color: rgba(var(--theme-primary-background-color--rgb), .75);
  --theme-primary-text-color: #e6e6e6;
  --theme-primary-text-color--rgb: 230, 230, 230;
  --theme-primary-text-color--darker: #c0c0c0;
  --theme-primary-text-color--darker--rgb: 192, 192, 192;
  --theme-primary-text-color-note: var(--theme-primary-text-color--darker);
  --theme-scrollbar-color: grey var(--theme-primary-background-color);
  --theme-scrollbar-width: thin;
  --theme-text-highlight-color--bad: #CC2F2F;
  --theme-text-highlight-color--bad--rgb: 204, 47, 47;
  --theme-text-highlight-color--bad--darker: #ab2a2a;
  --theme-text-highlight-color--bad--darker--rgb: 171, 42, 42;
  --theme-text-highlight-color--bad--lighter: #ff640b;
  --theme-text-highlight-color--bad--lighter--rgb: 255, 100, 11;
  --theme-text-highlight-color--general: #ffbf0b;
  --theme-text-highlight-color--general--rgb: 255, 191, 11;
  --theme-text-highlight-color--general--darker: #eb980a;
  --theme-text-highlight-color--general--darker--rgb: 235, 152, 10;
  --theme-text-highlight-color--general--lighter: #fdc83f;
  --theme-text-highlight-color--general--lighter--rgb: 253, 200, 63;
  --theme-text-highlight-color--good: #189300;
  --theme-text-highlight-color--good--rgb: 24, 147, 0;
  --theme-text-highlight-color--good--lighter: #5abc62;
  --theme-text-highlight-color--good--lighter--rgb: 90, 188, 98;
  --theme-text-highlight-color--good--darker: #0c6304;
  --theme-text-highlight-color--good--darker--rgb: 12, 99, 4;
  --theme-text-disabled-color: #808080;
  --theme-text-disabled-color--rgb: 128, 128, 128;
  --theme-text-color-red: var(--theme-text-highlight-color--bad);
  --theme-text-color-green: var(--theme-text-highlight-color--good);
  --theme-text-color-note: var(--theme-text-color--darker);
  --theme-primary-border-color: #808080;
  --theme-primary-border-color--rgb: 128, 128, 128;
  --theme-primary-border-color--hover: var(--theme-text-highlight-color--general);
  --theme-primary-border-color--hover--rgb: var(--theme-text-highlight-color--general--rgb);
  --theme-secondary-border-color: #111;
  --theme-secondary-border-color--rgb: 17, 17, 17;
  --theme-secondary-border-color--hover: var(--theme-text-highlight-color--general);
  --theme-secondary-border-color--hover--rgb: var(--theme-text-highlight-color--general--rgb);
  /* -- ToC -- */
  --theme-toc-text-color: var(--theme-primary-text-color);
  --theme-toc-number-color: var(--theme-primary-text-color);
  --theme-toc-background-color: var(--theme-primary-background-color);
  --theme-toc-text-hover-color: var(--theme-body-header-text-color);
  --theme-toc-font: var(--sidebar-body-font);
  /* -- Category links */
  --theme-category-links-font: var(--theme-category-links-text-size) var(--theme-category-links-text-font);
  --theme-category-links-text-font: var(--theme-body-text-font);
  --theme-category-links-text-size: calc(1.2 * var(--theme-body-text-size));
  /* -- Footer */
  --theme-footer-text-color: #d3d3d3;
  --theme-header-line-primary-color: #b4b4b4;
  --theme-header-line-gradient-underline: linear-gradient(to right, rgba(180, 180, 180, 0) 0, var(--theme-header-line-primary-color) 33%, var(--theme-header-line-primary-color) 66%, rgba(180, 180, 180, 0) 100%);
  --theme-header-line-gradient-active-underline: linear-gradient(to right, rgba(var(--theme-body-header-text-color--rgb), 0) 0, var(--theme-body-header-text-color) 50%, rgba(var(--theme-body-header-text-color--rgb), 0) 100%);
  --theme-header-line-gradient-sideline: linear-gradient(to bottom, rgba(180, 180, 180, 0) 0, var(--theme-header-line-primary-color) 33%, var(--theme-header-line-primary-color) 66%, rgba(180, 180, 180, 0) 100%);
  --theme-header-underline-size: 100% 2px;
  --theme-header-sideline-size: 2px 100%;
  --theme-header-sideline-position: 2% 90%;
  --theme-header-underline-position: center 95%;
  --theme-header-underline: var(--theme-header-line-gradient-underline) var(--theme-header-underline-position) / var(--theme-header-underline-size) no-repeat;
  --theme-header-sideline: var(--theme-header-line-gradient-sideline) var(--theme-header-sideline-position) / var(--theme-header-sideline-size) no-repeat;
  --theme-header-underline-active: var(--theme-header-line-gradient-active-underline) var(--theme-header-underline-position) / var(--theme-header-underline-size) no-repeat;
  /* -- MediaWiki message boxes */
  --theme-message-box-background-color: var(--theme-primary-background-color);
  --theme-message-box-text-color: var(--theme-body-header-text-color);
  /* -- Icon color filters */
  --theme-icon-filter-link-color: invert(60%) sepia(8%) saturate(1056%) hue-rotate(187deg) brightness(94%) contrast(87%);
  --theme-icon-filter-content-color: invert(92%) sepia(0%) saturate(1742%) hue-rotate(174deg) brightness(99%) contrast(99%);
  --theme-icon-filter-selected-color: invert(88%) sepia(41%) saturate(6932%) hue-rotate(351deg) brightness(100%) contrast(104%);
  /* END -- Sheltered 2 theme variables */
  /* BEGIN -- Global layout / style variables */
  /* -- Top navigation */
  --navigation-tab-background: var(--theme-page-background-color);
  --navigation-tab-font: var(--navigation-tab-text-size) var(--navigation-tab-text-font);
  --navigation-tab-height: calc(var(--navigation-tab-text-size) + (3 * var(--navigation-tab-padding-y)));
  --navigation-tab-padding-x: .5em;
  --navigation-tab-padding-y: .25em;
  --navigation-tab-padding: var(--navigation-tab-padding-y) var(--navigation-tab-padding-x);
  --navigation-tab-text-color: var(--theme-primary-text-color);
  --navigation-tab-text-font: var(--theme-body-header-text-font);
  --navigation-tab-text-letter-spacing: var(--theme-body-header-letter-spacing);
  --navigation-tab-text-size: 1.25em;
  /* -- Search box */
  --search-box-background: var(--theme-page-background-color);
  /* -- Sidebar navigation */
  --sidebar-background: var(--theme-page-background-color);
  --sidebar-body-font: var(--sidebar-body-text-size) var(--theme-body-text-font);
  --sidebar-body-line-height: 1.2;
  --sidebar-body-text-font: var(--theme-body-text-font);
  --sidebar-body-text-size: var(--theme-body-text-size);
  --sidebar-header-font: var(--sidebar-header-text-size) var(--sidebar-header-text-font);
  --sidebar-header-letter-spacing: .1em;
  --sidebar-header-text-color: var(--theme-body-header-text-color);
  --sidebar-header-text-font: var(--theme-body-header-text-font);
  --sidebar-header-text-size: calc(1.25 * var(--sidebar-body-text-size));
  /* -- Category links */
  --category-links-font: var(--category-links-text-size) var(--category-links-text-font);
  --category-links-text-font: var(--theme-body-text-font);
  --category-links-text-size: calc(1.1 * var(--theme-body-text-size));
  /* -- Image Gallery  */
  --image-gallery-font: var(--theme-body-header-text-size) var(--theme-body-header-text-font);
  --image-gallery-text-color: var(--theme-body-header-text-color);
  /* -- Footer  */
  --footer-font: .9em var(--theme-body-text-font);
  --footer-padding: .5em .5em .5em .5em;
  /* END -- Global layout / style variables */
  /* BEGIN -- Global custom icons */
  /* Use SVG and 'fill' to be removed for live filtering */
  /* -- External Link  */
  --icon-external-link: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path fill-rule='evenodd' d='M11 1H6l2 2 .3.3-4 4 .6.7 4-4H9l2 2V1ZM2 2h2v1H2v7h7V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Z' clip-rule='evenodd'/></svg>");
  /* -- Open / Close section/tab icon */
  --icon-expand-section: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><path d='m11.05 3.996-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5'/></svg>");
}

/* END -- Global custom icons */

/* Set scrollbar colour to dark -- may remove this later by fixing elements in desktop with a custom scrollbar */
html {
	color-scheme: dark;
}

/* BEGIN -- Primary body/page styling */
#p-logo .mw-wiki-logo {
  background-size: contain;
}

body {
  background: var(--theme-body-background-image-full);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--theme-body-text-font);
  color: var(--theme-primary-text-color);
}

.mw-body {
  background: var(--theme-page-background-color);
  color: var(--theme-primary-text-color);
  scrollbar-color: var(--theme-scrollbar-color);
  border: 1px solid var(--theme-primary-border-color);
}

.mw-body .mw-body-content .mw-parser-output p {
  line-height: var(--theme-body-line-height);
}

/* Force link colors regardless of state */
/* Optimise the selector to cover a wider range */
.mw-body a,
.mw-body a:visited,
.mw-body a.external,
.mw-body a.external:visited,
.mw-body a.extiw,
.mw-body a.extiw:visited {
  color: var(--theme-link-color);
}

.mw-parser-output a.new {
  color: var(--theme-text-highlight-color--bad);
	text-decoration: underline;
	text-decoration-color: var(--theme-text-highlight-color--bad);
	text-decoration-style: dashed;
}

/* Content subdirectory under article header */
.mw-body .content-body #contentSub {
  font-size: 1em;
}

pre,
code,
.mw-code {
  background: unset;
  color: inherit;
}

/* Hacked in stylable 'external link icon' */
/* Remove existing 'background image to the side' */
.mw-parser-output a.extiw,
.mw-parser-output a.external {
  background: unset;
  padding: 0;
}

/* Add new filterable background-image ':after' to filter separately from the text */
.mw-parser-output a.extiw::after,
.mw-parser-output a.external::after {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  background-image: var(--icon-external-link);
  background-position: center right;
  background-repeat: no-repeat;
  filter: var(--theme-icon-filter-link-color);
}

#catlinks {
  background: unset;
  font: var(--theme-category-links-font);
}

:focus {
  outline-color: var(--theme-border-highlight-color);
}

#toc.toc {
  background-color: var(--theme-toc-background-color);
  font-family: var(--theme-toc-font-family);
  font-size: var(--theme-toc-font-size);
}

#toc.toc a {
  color: var(--theme-toc-text-color);
}
#toc.toc a:hover {
  color: var(--theme-toc-text-hover-color);
  text-decoration: none;
}

#toc.toc .tocnumber {
	color: inherit;
}

#toc.toc h2#mw-toc-heading {
	font-size: var(--theme-body-header-text-size);
	background: var(--theme-header-underline);
}

#toc.toc .toctogglespan {
	font-size: calc(var(--theme-body-header-text-size) * 0.8);
	float: right;
}

#toc.toc .toctogglespan label {
	color: var(--theme-link-color);
}

button, input, optgroup, select, textarea {
  background-color: var(--theme-primary-background-color);
  color: var(--theme-primary-text-color);
}

option:hover {
  background-color: unset;
  color: var(--theme-body-header-text-color);
}

/* Top navigation */

#mw-head-base {
  margin-bottom: .5em
}

/* Strip hover underline on links where we want the gradient line */
.vector-menu-tabs a:hover,
.vector-menu-portal a:hover,
.vector-menu-content a:hover {
  text-decoration: none;
}

.vector-menu-tabs,
.vector-menu-dropdown,
.vector-menu-dropdown .vector-menu-content {
  background: var(--navigation-tab-background);
  border: unset;
}

.vector-menu-tabs,
.vector-menu-tabs li,
.vector-menu-tabs .selected,
.vector-menu-dropdown {
  height: var(--navigation-tab-height);
  line-height: var(--theme-body-header-text-size);
}

.vector-menu-tabs li a,
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .mw-list-item a {
  font: var(--navigation-tab-font);
  letter-spacing: var(--navigation-tab-text-letter-spacing);
  padding: var(--navigation-tab-padding);
  color: var(--navigation-tab-text-color);
  background: unset;
  height: inherit;
  text-decoration: unset;
}

.vector-menu-tabs .selected a,
.vector-menu-tabs .selected a:visited,
.vector-menu-tabs a:hover,
.vector-menu-tabs a:visited:hover,
.vector-menu-dropdown .vector-menu-heading-label:hover,
.vector-menu-dropdown .vector-menu-content li a:hover {
  color: var(--theme-body-header-text-color);
}

#mw-page-base {
  background: unset;
}

.vector-menu-tabs li,
.vector-menu-tabs .selected,
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background: unset;
}

/* Add gradient side-line to replicate game menu */
#mw-navigation .vector-menu-tabs li.selected,
#mw-navigation .vector-menu-tabs li:hover:not(.mw-watchlink),
#mw-navigation .vector-menu-dropdown .vector-menu-content li:hover {
  background: var(--theme-header-sideline);
}

.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) {
  font-size: calc(var(--navigation-tab-text-size) * .9);
  padding-left: 1em;
}

/* Add quality star / hollow quality star as watch 1icons */
.vector-menu-tabs .mw-watchlink.icon {
  width: var(--navigation-tab-height);
  height: var(--navigation-tab-height);
}

.vector-menu-tabs .mw-watchlink.icon a {
  padding: 0;
  width: 100%;
  height: 100%;
}

.vector-menu-tabs .mw-watchlink.icon a:before {
  position: relative;
  top: auto;
  left: middle;
  height: var(--navigation-tab-height);
}

.vector-menu-tabs #ca-watch.icon a:before,
.vector-menu-tabs #ca-unwatch.icon a:hover:before,
.vector-menu-tabs #ca-watch.icon a:focus:before {
  content: '★';
  color: #000;
  font-size: 1em;
  -webkit-text-stroke-width: .025em;
  -webkit-text-stroke-color: var(--pi-secondary-text-color);
  background: unset;
}

.vector-menu-tabs #ca-unwatch.icon a:before,
.vector-menu-tabs #ca-watch.icon a:hover:before,
.vector-menu-tabs #ca-unwatch.icon a:focus:before {
  content: '★';
  color: var(--theme-body-header-text-color);
  font-size: 1em;
  background: unset;
}

.vector-menu-tabs #ca-unwatch.icon .loading:before,
.vector-menu-tabs #ca-watch.icon .loading:before {
  animation: rotate 700ms infinite linear;
  outline: 0;
  cursor: default;
  pointer-events: none;
  transform-origin: 40% 40%
    /* Weird number because of odd formatting, maybe look into this */
}

/* Clear potential ring-border around the dropdown trigger on click */
.vector-menu-dropdown .vector-menu-heading:focus-visible {
  outline: unset;
}

/* Hacked in stylable 'up down' dropdown expansion icon */
#mw-head .vector-menu-dropdown .vector-menu-heading:after {
  /* content: '\2228'; */
  content: '';
  background-image: var(--icon-expand-section);
  filter: var(--theme-icon-filter-content-color);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: .25em;
}

.vector-menu-checkbox:checked+.vector-menu-heading:after {
  content: '';
  background-image: var(--icon-expand-section);
  filter: var(--theme-icon-filter-selected-color);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: .25em;
}

/* Search box */
.vector-search-box form {
  margin: 0 .125em;
}

.vector-search-box-input {
  background: var(--search-box-background);
  color: var(--theme-primary-text-color);
  font: var(--theme-font);
  height: var(--navigation-tab-height);
}

.vector-search-box-input:focus,
.vector-search-box-inner:hover .vector-search-box-input:focus { 
  border-color: var(--theme-border-highlight-color);
  box-shadow: inset 0 0 0 1px var(--theme-border-highlight-color);
}

.searchButton[name=go] {
  filter: invert(1);
}
/* Sidebar Navigation */

#t-print {
  display: none;
}

#mw-panel {
  background: var(--sidebar-background);
  margin-top: -2.5em;
}

.vector-menu-portal .vector-menu-content {
  margin-left: unset;
}

.vector-menu-portal .vector-menu-content li {
  padding: .125em 0 .125em .5em;
}

.vector-menu-portal .vector-menu-content li:hover {
  background: var(--theme-header-sideline);
}

.vector-menu-portal .vector-menu-heading {
  font: var(--sidebar-header-font);
  color: var(--sidebar-header-text-color);
  letter-spacing: var(--sidebar-header-letter-spacing);
  text-align: center;
  background: var(--theme-header-underline);
}

.vector-menu-portal .vector-menu-content li {
  font: var(--sidebar-body-font);
}

.vector-menu-portal .vector-menu-content li a,
.vector-menu-portal .vector-menu-content li a:visited {
  color: var(--theme-primary-text-color);
}

.vector-menu-portal .vector-menu-content li a:hover,
.vector-menu-portal .vector-menu-content li a:visited:hover {
  color: var(--sidebar-header-text-color);
}

/* Adjust header sizes */
.mw-body h1 {
  font-size: calc(var(--theme-body-header-text-size) * 1.3);
}
.mw-body-content h2 {
  font-size: calc(var(--theme-body-header-text-size) * 1.2);
}
.mw-body-content h3 {
  font-size: calc(var(--theme-body-header-text-size) * 1.1);
}
.mw-body-content h4 {
  font-size: calc(var(--theme-body-header-text-size) * 1);
}
.mw-body-content h5 {
  font-size: calc(var(--theme-body-header-text-size) * .8);
}

.mw-body-content h2 > span:first-child,
.mw-body-content h3 > span:first-child,
.mw-body-content h4 > span:first-child,
.mw-body-content h5 > span:first-child {
  /* 'Heading' underlines */
  background: var(--theme-header-underline);
}

/* Unbold and standardise headers */
.mw-body h1,
.mw-body-content h2,
.mw-body-content h2:not(.pi-data-label):not(.pi-header):not(.pi-title),
.mw-body-content h3:not(.pi-data-label):not(.pi-header),
.mw-body-content h4,
.mw-body-content h5 {
  font-family: var(--theme-body-header-text-font);
  color: var(--theme-body-header-text-color);
  letter-spacing: var(--theme-body-header-letter-spacing);
  text-transform: uppercase;
  font-weight: normal;
}

h2 .mw-editsection,
h3 .mw-editsection,
h4 .mw-editsection,
h5 .mw-editsection {
  text-transform: uppercase;
  padding-right: 1em;
  background: none;
}

/* Image gallery */
.gallery .gallerybox .thumb,
.gallery .gallerybox .gallerytext pre {
  background-color: unset;
  font: var(--image-gallery-font);
}

.gallery .gallerybox .gallerytext a,
.gallery .gallerybox .gallerytext a:visited {
  color: var(--image-gallery-text-color);
  align-content: center;
}

.mw-message-box {
  background-color: var(--theme-message-box-background-color);
  color: var(--theme-message-box-text-color);
}

/* Tables */
table {
  white-space: normal;
}

/* Block Quotes */
blockquote.pull-quote {
  font-style: italic;
  background: var(--theme-header-sideline);
  border: 1px solid var(--theme-primary-border-color);
}

/* Definition Lists */
div:not(.mw-changeslist-legend) > div > dl > dt {
  font: var(--theme-header-font);
  color: var(--theme-body-header-text-color);
  background: var(--theme-header-underline);
  display: inline;
  letter-spacing: var(--theme-body-header-letter-spacing);
}

/* Category page styling */
/* .mw-category .mw-category-group h3 {
  display: inline;
  background: var(--theme-header-underline);
} */

/* Footer Styling -- Thanks to Terraria wiki for this :) */
#footer {
  padding: var(--footer-padding);
  position: relative;
  /* grid */
  display: grid;
  grid-template-columns: [l] 1fr 0fr [r];
  grid-template-rows: [t] auto auto [b] auto;
  z-index: 0;
  /* covered by content */
}

#footer a {
  color: var(--theme-link-color);
}

#footer a:hover {
  color: var(--theme-link-color-hover);
}

#footer ul li {
  color: var(--theme-footer-text-color);
  font: var(--footer-font);
  line-height: inherit;
  padding: 0;
}

#footer #footer-info {
  display: contents;
}

#footer #footer-icons {
  grid-column: span 1/r;
  grid-row: t/b;
  place-self: end;
}

#footer #footer-info-lastmod {
  grid-column: l/span 1;
  grid-row: t/span 1;
  place-self: start;
  margin-bottom: 1em;
}

#footer #footer-info-copyright {
  grid-column: l/span 1;
  grid-row: span 1/b;
  place-self: end stretch;
  position: relative;
  padding-right: 100px;
}

#footer #footer-info-copyright img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 31px;
  width: auto;
}

#footer #footer-places {
  grid-column: l/span 1;
  grid-row: b/span 1;
}

/* END -- Primary body/page styling */

.mw-plusminus-pos {
  color: var(--theme-text-highlight-color--good);
}

.mw-plusminus-neg {
  color: var(--theme-text-highlight-color--bad);
}
/* BEGIN -- Article & Code Editor styling */
:root {
  /* Editor variables -- Colours are temporary until friendlier shades are found */
  --diff-context-color: var(--theme-primary-text-color);
  --diff-addedline-background: var(--theme-text-highlight-color--good);
  --diff-addedline-border: var(--theme-text-highlight-color--good);
  --diff-deletedline-background: var(--theme-text-highlight-color--bad);
  --diff-deletedline-border: var(--theme-text-highlight-color--bad);
  --editor-text-color: var(--theme-primary-text-color);
  --editor-text-size: 1.05em;
  --editor-background-color: var(--theme-primary-background-color);
  --editor-active-line-color: var(--theme-primary-background-color);
  --editor-active-line-background: var(--theme-text-highlight-color--general);
  --editor-options-color: var(--theme-primary-text-color);
  --editor-selected-text-color: var(--editor-header-text-color);
  --editor-header-font: var(--theme-header-font);
  --editor-header-text-color: var(--theme-body-header-text-color);
}

/* Editor styling */
.diff-context {
  background: unset;
  color: var(--diff-context-color);
}

.diff-addedline .diffchange {
  background: var(--diff-addedline-background);
}

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

.diff-deletedline .diffchange {
  background: var(--diff-deletedline-background);
}

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

.wikiEditor-ui-toolbar {
  background: unset;
}

.ace-tm,
.ace-tm .ace_gutter,
.codeEditor-status,
.wikiEditor-ui,
.CodeMirror {
  background-color: var(--editor-background-color);
  font-size: var(--editor-text-size);
}

#msupload-div,
#msupload-dropzone,
.ace-tm,
.wikiEditor-ui textarea,
.CodeMirror-code {
  background: unset;
  color: var(--editor-text-color);
}

#msupload-dropzone {
  font: var(--editor-header-font);
  color: var(--editor-header-text-color);
}

#msupload-select {
  filter: brightness(0) invert(90);
}

#msupload-select:hover {
  filter: brightness(0) var(--ooui--icon-progressive-filter);
}

.wikiEditor-ui-toolbar .tabs span.tab a,
.wikiEditor-ui-toolbar .tabs span.tab a.current,
.wikiEditor-ui-toolbar .group .tool-select .label,
.wikiEditor-ui-toolbar .group .label,
.wikiEditor-ui-toolbar .page-table th {
  color: inherit;
  text-transform: uppercase;
}

.wikiEditor-ui-toolbar .tabs span.tab a.current {
  color: var(--editor-header-text-color);
}

.wikiEditor-ui-toolbar .tabs span.tab a:hover,
.wikiEditor-ui-toolbar .tool-select:hover {
  color: var(--editor-header-text-color);
  text-decoration: none;
}

/* Pointer arrow for closed / opened tab */
/* -- Add in-game icon for this later */
.wikiEditor-ui-toolbar .tabs span.tab a:before {
  background-image: var(--icon-expand-section);
  filter: var(--theme-icon-filter-content-color);
}

.wikiEditor-ui-toolbar .tabs span.tab a.current:before,
.wikiEditor-ui-toolbar .tabs span.tab a:hover:before {
  background-image: var(--icon-expand-section);
  filter: var(--theme-icon-filter-selected-color);
}

.wikiEditor-ui-toolbar .booklet>.index>.current,
.wikiEditor-ui-toolbar .group .tool-select .options,
.wikiEditor-ui-toolbar .group .tool-select .menu .options .option:hover {
  background-color: var(--editor-background-color);
  color: var(--editor-header-text-color);
}

.wikiEditor-ui-toolbar .page-characters div span,
.wikiEditor-ui-toolbar .page-table td,
.wikiEditor-ui-toolbar .group .tool-select .options .option {
  color: var(--editor-text-color);
}

.wikiEditor-ui-toolbar .page-characters div span:hover,
.wikiEditor-ui-toolbar .booklet>.index>div:hover {
  background-color: unset;
  color: var(--editor-selected-text-color);
}

.ace-tm .ace_gutter-active-line {
  background-color: var(--editor-active-line-background);
  color: var(--editor-active-line-color);
}

.ace-tm .ace_print-margin {
  background: grey;
}
/* -- ?action=edit -- */
/* Override styling of: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.action/mediawiki.action.edit.styles.less */
.editOptions {
  background-color: var(--ooui--messagewidget-notice-background-color);
  color: var(--theme-primary-text-color);
  border-color: var(--ooui--messagewidget-notice-border-color);
}
/* -- ?action=history -- */
/* Override styling of: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.action/mediawiki.action.history.styles.less */
 #pagehistory li.selected {
  background-color: transparent;
  color: inherit;
}

.updatedmarker {
  background-color: var(--oouihelper--yellow);
}

/* -- changeslist -- */
/* Special:Watchlist, Special:RecentChanges, etc. */
/* Override styling of: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.special.changeslist/default.less */
/* Colored byte change numbers */
.mw-plusminus-pos {
  color: var(--theme-text-color-green);
}

.mw-plusminus-neg {
  color: var(--theme-text-color-red);
}

.mw-plusminus-null {
  color: var(--theme-text-color-note);
}

/* To do:
 - Button hover colour
 - Check boxes
*/

#mw-indicator-mw-helplink a:before {
  content: '';
  display: inline-block;
  height: 20px;
  padding-left: 25px;
  line-height: 20px;
  background-image: url(/resources/src/mediawiki.helplink/images/helpNotice.svg?46d34);
  background-position: left center;
  background-repeat: no-repeat;
  filter: invert(1);
}

#mw-indicator-mw-helplink a {
  background: none;
}

/* -- HTMLForm -- */
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:nth-child(even) td {
  background-color: var(--oouihelper--textinput-background-lighter);
}
.mw-htmlform-ooui .mw-htmlform-matrix tbody tr:hover td {
  background-color: var(--oouihelper--textinput-background);
}

/* ace related text colors
.ace_support
.ace_variable
.ace_constant
.ace_paren
.ace_punctuation
.ace_string
.ace_comment
*/

div.mw-highlight {
  background-color: #000;
}

.mw-content-ltr.mw-highlight-lines pre,
.mw-content-ltr.content .mw-highlight-lines pre {
  box-shadow: inset 2.75em 0 0 #000;
}

.mw-content-ltr.mw-highlight .linenos {
  color: var(--theme-primary-text-color);
}

/* preformatted text colors
.mw-highlight
.nv (variables?)
.nd (:before :after :hover etc)
.nf 
.nc (specifiers)
.c (comments)
.p (puntuation)
.s1
.n (invalids)
-- Properties & Values --
.k (properties)
.kc (property word values)
.kt (unit name - % px em etc)
.mi (integers)
.mf (floats)
.mh (#numbers)
*/

/* CodeMirror syntax colours */
.cm-mw-link-pagename, .cm-mw-link-bracket, .cm-mw-link-delimiter, .cm-mw-extlink, .cm-mw-free-extlink {
	color: var(--theme-link-color);
}
/* Portable Infobox debugger output */
.pi-error-info.pi-error-info, .pi-debug.pi-debug {
	background-color: var(--pi-header-background);
}
.pi-error-info.pi-error-info {
	color: var(--theme-text-highlight-color--bad);
	border-color: var(--theme-text-highlight-color--bad);
	border-style: solid;
}

/* END -- Article & Code Editor styling */

/* BEGIN -- Portable Infobox styling */
/* Portable Infobox Variables */
:root {
  --pi-background: unset;
  --pi-body-text-color: var(--theme-primary-text-color);
  --pi-body-text-color--rgb: var(--theme-primary-text-color--rgb);
  --pi-body-text-font: var(--theme-body-text-font);
  --pi-body-text-size: var(--theme-body-text-size);
  --pi-body-text-style: var(--theme-body-secondary-text-style);
  --pi-border-color: var(--theme-primary-border-color);
  --pi-border-color--rgb: var(--theme-primary-border-color--rgb);
  --pi-border-style: solid;
  --pi-border-width: 1px;
  --pi-border: var(--pi-border-width) var(--pi-border-style) var(--pi-border-color);
  --pi-border-divider-width: 3px;
  --pi-header-background: #000;
  --pi-header-font: var(--pi-header-text-size) var(--pi-header-text-font);
  --pi-header-text-font: var(--theme-body-header-text-font);
  --pi-header-text-size: 1.25em;
  --pi-tab-inactive-color: var(--pi-border-color);
  --pi-tab-section-header-text-size: 1.2em;
  --pi-secondary-background: var(--theme-body-header-text-color);
  --pi-secondary-background--rgb: 0, 0, 0;
  --pi-secondary-text-color: var(--theme-body-header-text-color);
  --pi-secondary-text-color--rgb: var(--theme-body-header-text-color--rgb);
  --pi-title-background: var(--pi-secondary-text-color);
  --pi-title-background--rgb: var(--pi-secondary-text-color--rgb);
  --pi-title-font: var(--pi-title-text-size) var(--pi-title-text-font);
  --pi-title-text-color: #000;
  --pi-title-text-color--rgb: 0, 0, 0;
  --pi-title-text-font: var(--theme-body-header-text-font);
  --pi-title-text-size: 2em;
  --pi-header-underline-primary-color: #b6b6b6;
  --pi-header-underline-primary-color--rgb: 180, 180, 180;
  --pi-header-underline-gradient: linear-gradient(to right, rgba(var(--pi-header-underline-primary-color--rgb), 0) 0, var(--pi-header-underline-primary-color) 50%, rgba(var(--pi-header-underline-primary-color--rgb), 0) 100%);
  --pi-header-active-underline-gradient: linear-gradient(to right, rgba(var(--pi-secondary-background--rgb), 0) 0, var(--pi-secondary-background) 50%, rgba(var(--pi-secondary-background--rgb), 0) 100%);
  --pi-header-underline-size: var(--theme-header-underline-size);
  --pi-header-underline-position: var(--theme-header-underline-position);
  --pi-header-underline: var(--pi-header-underline-gradient) var(--pi-header-underline-position) / var(--pi-header-underline-size) no-repeat;
  --pi-header-underline-active: var(--pi-header-active-underline-gradient) var(--pi-header-underline-position) / var(--pi-header-underline-size) no-repeat;
}

.portable-infobox {
  font-size: inherit;
  font-style: var(--pi-body-text-style);
  border: var(--pi-border);
}

.portable-infobox section.pi-panel {
  border-top-width: var(--pi-border-divider-width);
}

.portable-infobox .pi-title {
  font: var(--pi-title-font);
  color: var(--pi-title-text-color);
  background-color: var(--pi-title-background);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header,
.portable-infobox .pi-group[data-item-name=Tier-Group] {
  text-align: center;
  border-width: 1px 0 1px 0;
  text-transform: uppercase;
  font-style: normal;
}

.portable-infobox section.pi-group .pi-header,
.portable-infobox section .pi-section-label {
  font: var(--pi-header-font);
  color: var(--pi-secondary-text-color);
  letter-spacing: 0.5px;
}

.portable-infobox .pi-data-label {
  font-size: 1.1em;
  color: var(--pi-body-text-color);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
}

.portable-infobox .pi-data-value {
  hyphens: manual;
}

.portable-infobox .pi-caption {
  font-size: 1.2em;
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
  background: unset;
}

.pi-panel-scroll-wrapper,
.pi-media-collection .pi-tab-link {
  border: var(--pi-border);
}

.pi-section-navigation {
  background-color: var(--pi-header-background);
}

.portable-infobox .pi-header {
  background-color: var(--pi-header-background);
}

.pi-section-navigation .pi-section-tab .pi-section-label {
  font-size: calc(1.2 * var(--pi-header-text-size));
  text-transform: uppercase;
}

.portable-infobox section.pi-item,
.pi-section-navigation .pi-section-tab {
  border: none;
}

/* Tab labels / areas styling */
/* Default style for all tab labels */
.portable-infobox .pi-panel>.pi-panel-scroll-wrapper .pi-section-navigation .pi-section-tab,
.portable-infobox section.pi-group[data-item-name=Tier-Group] .pi-data-value {
  color: var(--pi-secondary-text-color);
  flex-grow: 1;
  flex-shrink: 1;
  /* Let panels spread across the row */
}

/* Set tab size / spread across rows */
.portable-infobox section.pi-group[data-item-name=Tier-Group] .pi-data-value {
  flex-basis: 50%;
  /* Usually 1 or 2 entries in this row */
}

.portable-infobox .pi-panel[data-item-name=Quality-Panel] > .pi-panel-scroll-wrapper .pi-section-navigation .pi-section-tab {
	flex-basis: 33%;
}

/* Gradient underline of headings */
/* Standard grey fade out */
.portable-infobox .pi-section-navigation .pi-section-tab:not(.pi-section-active),
.portable-infobox section.pi-group .pi-header,
.portable-infobox section.pi-group.pi-collapse-closed .pi-header,
.portable-infobox .pi-media-collection .pi-tab-link {
  background: var(--pi-header-underline), var(--pi-header-background);
}

/* 'Selected/Active' highlight fade out */
.portable-infobox .pi-section-navigation .pi-section-tab.pi-section-active,
.portable-infobox .pi-section-navigation .pi-section-tab:hover,
.portable-infobox section.pi-collapse:not(.pi-collapse-closed) > .pi-header,
.portable-infobox section.pi-collapse > .pi-header:hover {
  background: var(--pi-header-underline-active), var(--pi-header-background);
}

/* Grey out 'unselected' panel text tabs or collapsible headers */
.portable-infobox .pi-panel>.pi-panel-scroll-wrapper .pi-section-navigation .pi-section-tab:not(.pi-section-active):not(:hover) .pi-section-label,
.portable-infobox .pi-collapse.pi-collapse-closed .pi-header:not(:hover) {
  color: var(--pi-tab-inactive-color);
}

/* Hollow 'unselected' panel quality tab */
.portable-infobox .pi-panel[data-item-name=Quality-Panel]>.pi-panel-scroll-wrapper .pi-section-navigation .pi-section-tab:not(.pi-section-active) .pi-section-label {
  color: #000;
  -webkit-text-stroke-width: .025em;
  -webkit-text-stroke-color: var(--pi-secondary-text-color);
}

.portable-infobox section.pi-group[data-item-name=Tier-Group] {
  font-family: var(--pi-title-text-font);
  font-size: var(--pi-header-text-size);
}

/* Padding and alignment of text in PI elements */
.portable-infobox section.pi-group[data-item-name=Text-Group] .pi-data-value {
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
}

/* Add better framing / spacing for Item/Object/Location list sections of infoboxes */
.portable-infobox section.pi-group[data-item-name=Padded-Group] .pi-data-value {
  padding-left: 25px;
  padding-right: 25px;
}

.portable-infobox section.pi-group[data-item-name=Padded-Group] .pi-data-value {
  padding-left: 25px;
  padding-right: 25px;
}

/* Game style, might look stupid on the web */
.portable-infobox .pi-font a {
  color: var(--pi-secondary-text-color);
}

.portable-infobox.type-Faction .pi-data[data-source=HomeBiome]>.pi-data-label,
.portable-infobox.type-Faction .pi-data[data-source=HomeBiome]>.pi-data-value,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowLocation]>.pi-data-label,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMin]>.pi-data-value,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMax]>.pi-data-value
{
  font-size: 16px;
}

.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMin]>.pi-data-label,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMax]>.pi-data-label,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMin]>.pi-data-value,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMax]>.pi-data-value,
.portable-infobox.pi-type-Seed .pi-data[data-source=YieldMin]>.pi-data-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.portable-infobox section.pi-group[data-item-name=Stats] .pi-data-value {
  font-style: normal;
  font-size: 1.1em;
}

/* Temporary standalone unset italics until styling more settled */
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMin]>.pi-data-label,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMax]>.pi-data-label,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMin]>.pi-data-value,
.portable-infobox.pi-type-Seed .pi-data[data-source=GrowTempMax]>.pi-data-value {
  font-style: normal;
}

/* Force Tier data content to not highlight links, broken or not 
.portable-infobox section.pi-group[data-item-name=Tier-Group] .pi-data-value a.new,
.portable-infobox section.pi-group[data-item-name=Tier-Group] .pi-data-value a {
	color: var(--pi-secondary-text-color);
}

/* END MIGRATED */
/* -------------*/
/* BEGIN UMIGRATED 

.portable-infobox.type-Faction .pi-data[data-source=HomeBiome],
.portable-infobox.type-Seed .pi-data[data-source=GrowLocation],
.portable-infobox.type-Seed .pi-data[data-source=GrowTempMin],
.portable-infobox.type-Seed .pi-data[data-source=GrowTempMax] {
	padding-left: 25px;
	padding-right: 25px;
}

/* Multi-line horizontal data values get concatenated with inline-flex 
.portable-infobox.type-Seed .pi-data[data-source=GrowLocation] > .pi-data-value {
	display: block;
}


/* Style function section instead of using {{Highlight}} 
.portable-infobox .pi-group[data-item-name=Text-Group] .pi-data[data-source=Function] {
	color: var(--pi-secondary-text-color);
}

.portable-infobox.type-Faction .pi-caption {
	font-size: 18px;
}

/* Item & Object infoboxes 

/* Tabbed section specific styling 

/* Expand tab label spacing 
.portable-infobox section.pi-panel[data-item-name=Quality-Panel] .wds-tabs__wrapper li.wds-tabs__tab,
.portable-infobox section.pi-panel.wds-tabber[data-item-name=Data-Panel] li.wds-tabs__tab,
.portable-infobox section.pi-panel[data-item-name=Upgrade-Panel] .wds-tabs__wrapper li.wds-tabs__tab,
.portable-infobox section.pi-panel[data-item-name=Tier-Panel] .wds-tabs__wrapper li.wds-tabs__tab{
	text-align: center;
	text-transform: uppercase;
	flex-grow: 1;
}

/* Test replacement with flex-grow
.portable-infobox section.pi-panel[data-item-name=Quality-Panel] .wds-tabs__wrapper li.wds-tabs__tab,
.portable-infobox section.pi-panel[data-item-name=Upgrade-Panel] .wds-tabs__wrapper li.wds-tabs__tab {
	flex-grow: 1;
}

.portable-infobox section.pi-panel[data-item-name=Upgrade-Tier-Panel] .wds-tabs__wrapper li.wds-tabs__tab {
	flex-basis: 25%;
}

.portable-infobox section.pi-panel.wds-tabber[data-item-name=Data-Panel] li.wds-tabs__tab {
	flex-basis: 50%;
}

.portable-infobox .wds-tabs__tab-label {
  font-size: 16px;
}





/* Item Infoboxes only 

/* Default infobox tab style for all 'Data-Panel' items 






.portable-infobox section.pi-group[data-item-name=Centered-Group] .pi-data-value {
	text-align: center;
}

/* END -- Portable Infobox styling */

/* -- WikiTable styling -- */
.wikitable {
  background-color: unset;
  color: var(--theme-primary-text-color);
}

.wikitable>tr>th,
.wikitable>*>tr>th {
  background-color: #333;
}

/* Special page filters */
/* .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-menuSelectWidget,
.oo-ui-menuSectionOptionWidget,
.mw-rcfilters-ui-itemMenuOptionWidget .mw-rcfilters-ui-table,
.mw-rcfilters-ui-filterMenuHeaderWidget-header{
	background-color: #333;
	color: var(--theme-primary-text-color);
}

.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
.mw-rcfilters-ui-itemMenuOptionWidget-label-title {
	color: var(--theme-primary-text-color);
}
*/

/* Edge cases to investigate / clean up later */
body.rootpage-Special_Version table {
	white-space: normal;
}

/* -- Documentation Specific -- */
.doc-contentbox div.doc-header-row {
  background: var(--theme-header-underline);
}

.doc-contentbox span.doc-header {
  font: var(--theme-header-font);
  font-size: calc(var(--theme-body-header-text-size) * 1.2);
  color: var(--theme-body-header-text-color);
  letter-spacing: var(--theme-body-header-letter-spacing);
  vertical-align: middle;
}

/* -- DRUID BEGIN -- */

.druid-container {
  /* These variables are designed to inherit from your wiki's color variables.
     If your wiki uses a different naming scheme, change the inner names to match yours.
     If your wiki doesn't use color variables you should consider doing so,
     otherwise you can replace the inner variables or the fallback values with colors that match your wiki.
  */
  --druid-background-color: var(--pi-background, #ffffff);
  --druid-background-color--rgb: var(--pi-background--rgb, 255, 255, 255);
  
  --druid-secondary-background-color: var(--pi-secondary-background, #36c);
  --druid-secondary-background-color--rgb: var(--pi-secondary-background--rgb, 51, 102, 204);
  --druid-secondary-background-label-color: var(--pi-secondary-text-color, #fff);
  --druid-secondary-background-label-color--rgb: var(--pi-secondary-text-color--rgb, 255, 255, 255);
  
  --druid-tertiary-background-color: var(--pi-background, #eaecf0);
  --druid-tertiary-background-color--rgb: var(--pi-background--rgb, 234, 236, 240);
  
  --druid-border-color: var(--theme-primary-border-color, #a7d7f9);
  --druid-border-color--rgb: var(--theme-primary-border-color--rgb, 167, 215, 249);
  
  --druid-link-color: var(--theme-link-color, #0645ad);
  --druid-link-color--rgb: var(--theme-link-color--rgb, 6, 69, 173);
  --druid-link-label-color: var(--theme-link-label-color, #fff);
  --druid-link-label-color--rgb: var(--theme-link-label-color--rgb, 255, 255, 255);
}
/* -- DRUID END -- */

/* OOUI Theme Variables -- Thanks Terraria :) */
:root {
  --oouihelper--red: var(--theme-text-highlight-color--bad);
  --oouihelper--red-darker: var(--theme-text-highlight-color--bad--darker);
  --oouihelper--red-lighter: var(--theme-text-highlight-color--bad--lighter);
  --oouihelper--red-lighter-transparent: rgba(var(--theme-text-highlight-color--bad--lighter--rgb), 0.6);
  --oouihelper--yellow: var(--theme-text-highlight-color--general);
  --oouihelper--yellow-darker: var(--theme-text-highlight-color--general--darker);
  --oouihelper--yellow-lighter: var(--theme-text-highlight-color--general--lighter);
  --oouihelper--green: var(--theme-text-highlight-color--good);
  --oouihelper--green-darker: var(--theme-text-highlight-color--good--darker);
  --oouihelper--green-lighter: var(--theme-text-highlight-color--good--lighter);
  --oouihelper--progressive: var(--theme-text-highlight-color--general);
  --oouihelper--progressive-transparent: rgba(0, 0, 0, 0.6); /* #000; */
  --oouihelper--progressive-lighter: var(--theme-text-highlight-color--general--lighter);
  --oouihelper--disabled: var(--theme-text-disabled-color);
  --oouihelper--disabled-background: var(--theme-primary-background-color);
  --oouihelper--disabled-darker-transparent: rgba(128, 128, 128, 0.5);
  --oouihelper--border: var(--theme-primary-border-color);
  --oouihelper--borderdark: #000;
  --oouihelper--borderdark-lighter: rgb(90, 90, 90);
  --oouihelper--borderdark-hover: rgb(118, 117, 117);
  --oouihelper--borderdark-focus: var(--oouihelper--progressive);
  --oouihelper--textinput-background: rgba(0, 0, 0, .75);
  --oouihelper--textinput-background-lighter: rgba(30, 30, 30, 1);
  --oouihelper--textinput-background-darker: rgba(10, 10, 10, 1);
  --oouihelper--placeholdertext: var(--oouihelper--disabled);
  --oouihelper--themerelated: var(--theme-primary-border-color);
  --oouihelper--themerelated-lighter: 0;
  --oouihelper--themerelated-lighter-transparent: 0;
  --oouihelper--themerelated-lightest: 0;
  --oouihelper--themerelated-darker: 0;
  --oouihelper--themerelated-darkest: 0;
  --oouihelper--themerelated-disabled: 0;
  --oouihelper--themerelated-disabled-lighter: 0;
  --oouihelper--text-background: var(--theme-primary-background-color);

  /* Actual OOUI variables, grouped by element type */
  /* misc */
  --ooui--inlinehelp-color: var(--theme-primary-text-color-note);
  --ooui--disabled-color: var(--oouihelper--disabled);
  /* all buttons */
  --ooui--button-background: var(--theme-primary-background-color);
  --ooui--button-background--hover: var(--theme-secondary-background-color);
  --ooui--button-box-shadow: rgba(10, 10, 10, 0.5) 2px 2px 3px;
  --ooui--button-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
  /* "normal" button */
  --ooui--button-border-top: 2px solid var(--theme-primary-border-color);
  --ooui--button-border-right: var(--ooui--button-border-top);
  --ooui--button-border-bottom: var(--ooui--button-border-right);
  --ooui--button-border-left: var(--ooui--button-border-top);
  --ooui--button-border-top--hover: 2px solid var(--theme-primary-border-color--hover);
  --ooui--button-border-right--hover: var(--ooui--button-border-top--hover);
  --ooui--button-border-bottom--hover: var(--ooui--button-border-right--hover);
  --ooui--button-border-left--hover: var(--ooui--button-border-top--hover);
  --ooui--button-color: var(--theme-primary-text-color);
  --ooui--button-color--hover: var(--oouihelper--progressive);
  --ooui--button-selected-color: var(--oouihelper--progressive);
  /* "progressive" button */
  --ooui--button-progressive-color: var(--oouihelper--progressive);
  --ooui--button-progressive-color--hover: var(--oouihelper--progressive-lighter);
  --ooui--button-progressive-box-shadow--focus: inset var(--oouihelper--progressive-transparent) 0 0 0 2px;
  --ooui--button-progressive-primary-border-color: var(--oouihelper--progressive);
  --ooui--button-progressive-primary-border-color--hover: var(--oouihelper--progressive-lighter);
  /* "destructive" button */
  --ooui--button-destructive-color: var(--oouihelper--red-lighter);
  --ooui--button-destructive-color--hover: var(--oouihelper--red-lighter);
  --ooui--button-destructive-box-shadow--focus: inset var(--oouihelper--red-lighter-transparent) 0 0 0 2px;
  --ooui--button-destructive-primary-border-color: var(--oouihelper--red-lighter);
  --ooui--button-destructive-primary-border-color--hover: var(--oouihelper--red-lighter);
  /* disabled button */
  --ooui--button-disabled-color: var(--oouihelper--disabled);
  --ooui--button-disabled-background: var(--oouihelper--disabled-background);
  --ooui--button-disabled-border-top: 1px solid ;
  --ooui--button-disabled-border-right: 1px solid ;
  --ooui--button-disabled-border-bottom: var(--ooui--button-disabled-border-right);
  --ooui--button-disabled-border-left: var(--ooui--button-disabled-border-top);
  /* frameless button */
  --ooui--button-frameless-on-color: var(--theme-primary-text-color-highlight);
  /* textarea */
  --ooui--textarea-background-color: var(--oouihelper--textinput-background);
  --ooui--textarea-placeholder-color: var(--oouihelper--placeholdertext);
  --ooui--textarea-border-color: var(--oouihelper--borderdark-lighter);
  --ooui--textarea-border-color--hover: var(--oouihelper--borderdark-hover);
  --ooui--textarea-border-color--focus: var(--oouihelper--borderdark-focus);
  --ooui--textarea-invalid-border-color: var(--oouihelper--red-lighter);
  --ooui--textarea-readonly-background-color: var(--oouihelper--textinput-background-darker);
  --ooui--textarea-disabled-color: var(--oouihelper--disabled);
  --ooui--textarea-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
  --ooui--textarea-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
  --ooui--textarea-pending-background-color-1: rgba(20, 20, 20, 0.9);
  --ooui--textarea-pending-background-color-2: #000;
  /* checkbox */
  --ooui--checkbox-border-color: var(--oouihelper--themerelated);
  --ooui--checkbox-border-color--hover: var(--oouihelper--progressive);
  --ooui--checkbox-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E check %3C/title%3E%3Cpath d='M7 14.2 2.8 10l-1.4 1.4L7 17 19 5l-1.4-1.4z'/%3E%3C/svg%3E");
  --ooui--checkbox-icon--hover: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Echeck%3C/title%3E%3Cpath d=%22M7 14.17L2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z%22/%3E%3C/g%3E%3C/svg%3E");
  --ooui--checkbox-box-shadow--focus: var(--oouihelper--themerelated-darkest);
  --ooui--checkbox-selected-background-color: var(--oouihelper--progressive);
  --ooui--checkbox-disabled-background-color: var(--oouihelper--themerelated-disabled);
  --ooui--checkbox-disabled-icon: var(--ooui--checkbox-icon);
  /* radiobutton */
  --ooui--radiobutton-border-color: var(--oouihelper--themerelated);
  --ooui--radiobutton-border-color--hover: var(--oouihelper--themerelated-lighter);
  --ooui--radiobutton-box-shadow--focus: var(--oouihelper--themerelated-darkest);
  --ooui--radiobutton-disabled-background-color: var(--oouihelper--themerelated-disabled);
  /* toggleswitch */
  --ooui--toggleswitch-border-color: var(--oouihelper--themerelated);
  --ooui--toggleswitch-border-color--hover: var(--oouihelper--themerelated-lighter);
  --ooui--toggleswitch-color--active: var(--oouihelper--themerelated-darker);
  --ooui--toggleswitch-grip-color: var(--oouihelper--themerelated-lightest);
  --ooui--toggleswitch-box-shadow--focus: var(--oouihelper--themerelated-darkest);
  --ooui--toggleswitch-disabled-background-color: var(--oouihelper--themerelated-disabled);
  --ooui--toggleswitch-disabled-grip-color: var(--oouihelper--themerelated-disabled-lighter);
  /* dropdown */
  --ooui--dropdown-background-color: var(--oouihelper--textinput-background);
  --ooui--dropdown-background-color--hover: var(--oouihelper--textinput-background-lighter);
  --ooui--dropdown-border-color: var(--oouihelper--borderdark);
  --ooui--dropdown-border-color--hover: var(--oouihelper--borderdark-hover);
  --ooui--dropdown-border-color--focus: var(--oouihelper--borderdark-focus);
  --ooui--dropdown-disabled-color: var(--oouihelper--disabled);
  --ooui--dropdown-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
  --ooui--dropdown-disabled-background-color: var(--oouihelper--disabled-darker-transparent);
  /* selectfile */
  --ooui--selectfile-border-color: #72777d;
  --ooui--selectfile-background-color: var(--oouihelper--textinput-background);
  --ooui--selectfile-candrop-background-color: #514743;
  /* tag item */
  --ooui--tagitem-background-color: rgba(20, 20, 20, 0.75);
  --ooui--tagitem-border-color: var(--oouihelper--borderdark);
  --ooui--tagitem-border-color--hover: var(--oouihelper--borderdark-hover);
  --ooui--tagitem-border-color--focus: var(--oouihelper--themerelated-darkest);
  --ooui--tagitem-invalid-border-color: var(--oouihelper--red-lighter);
  --ooui--tagitem-color--hover: #efeadc;
  --ooui--tagitem-disabled-color: var(--oouihelper--disabled);
  --ooui--tagitem-disabled-border-color: var(--oouihelper--disabled-lighter-transparent);
  --ooui--tagitem-disabled-background-color: rgba(20, 20, 20, 0.5);
  /* multioption */
  --ooui--multioption-disabled-color: var(--oouihelper--disabled);
  /* progressbar */
  --ooui--progressbar-border-color: var(--oouihelper--themerelated);
  --ooui--progressbar-bar-background-color: var(--oouihelper--themerelated);
  --ooui--progressbar-disabled-border-color: var(--oouihelper--themerelated-disabled);
  --ooui--progressbar-pending-background-color-1: #7a6a52;
  --ooui--progressbar-pending-background-color-2: #4d4233;
  /* messagewidget */
  --ooui--messagewidget-notice-background-color: var(--theme-primary-background-color);
  --ooui--messagewidget-notice-border-color: var(--theme-primary-border-color);
  --ooui--messagewidget-error-background-color: var(--oouihelper--red);
  --ooui--messagewidget-error-border-color: var(--oouihelper--red-darker);
  --ooui--messagewidget-error-color: var(--oouihelper--red-lighter);
  --ooui--messagewidget-warning-background-color: var(--oouihelper--yellow);
  --ooui--messagewidget-warning-border-color: var(--oouihelper--yellow-darker);
  --ooui--messagewidget-success-background-color: var(--oouihelper--green);
  --ooui--messagewidget-success-border-color: var(--oouihelper--green-darker);
  --ooui--messagewidget-success-color: var(--oouihelper--green-lighter);
  /* menuselectwidget */
  --ooui--menuselect-background-color: var(--oouihelper--text-background);
  --ooui--menuselect-selected-background-color: var(--oouihelper--textinput-background-darker);
  --ooui--menuselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
  --ooui--menuselect-border-color: var(--oouihelper--borderdark);
  --ooui--menusectionoption-color: var(--oouihelper--placeholdertext);
  /* tabselectwidget */
  --ooui--tabselect-background-color: var(--oouihelper--text-background);
  --ooui--tabselect-selected-background-color: var(--theme-content-background);
  --ooui--tabselect-highlighted-background-color: var(--oouihelper--textinput-background-lighter);s
  --ooui--tabselect-frameless-box-shadow-color: var(--oouihelper--borderdark-lighter);
  --ooui--tabselect-frameless-selected-color: var(--theme-link-color);
  --ooui--tabselect-frameless-selected-box-shadow-color: var(--theme-link-color);
  --ooui--tabselect-frameless-highlighted-color: #bcd1d2;
  --ooui--tabselect-frameless-highlighted-box-shadow-color: #bcd1d2;
  --ooui--taboption-color: var(--oouihelper--placeholdertext);
  /* outlineselectwidget */
  --ooui--outlineselect-box-shadow--focus: inset var(--oouihelper--themerelated-lighter-transparent) 0 0 0 2px;
  --ooui--outlineoption-background-color: var(--oouihelper--text-background);
  --ooui--outlineoption-border-color: var(--oouihelper--borderdark);
  --ooui--outlineoption-selected-background-color: var(--oouihelper--textinput-background-darker);
  --ooui--outlineoption-highlighted-background-color: var(--oouihelper--textinput-background-lighter);
  --ooui--outlineoption-pressed-background-color: #22292a;
  /* popupwidget */
  --ooui--popup-background-color: var(--oouihelper--text-background);
  --ooui--popup-border-color: var(--oouihelper--borderdark);
  /* layouts */
  --ooui--bookletlayout-border-color: var(--oouihelper--borderdark);
  --ooui--panellayout-border-color: var(--oouihelper--borderdark);
  /* dialog */
  --ooui--dialog-border-color: var(--oouihelper--borderdark);
  --ooui--dialog-border-color--lighter: var(--oouihelper--borderdark-lighter);
  /* window */
  --ooui--window-background-color: var(--oouihelper--text-background);
  --ooui--window-border-color: var(--oouihelper--borderdark);
  /* toolbar */
  --ooui--toolbar-bar-background-color: var(--oouihelper--text-background);
  --ooui--toolbar-bar-color: var(--theme-primary-text-color);
  /* syntaxhighlight */

  /* edit */

  /* indicators */
  /* tools like https://isotropic.co/tool/hex-color-to-css-filter/ allow converting the desired color into a filter */
  --ooui--indicator-filter: brightness(0) invert(90%) sepia(28%) saturate(107%) hue-rotate(5deg) brightness(96%) contrast(93%);
  --ooui--indicator-invert-filter: none;
  /* icon filters */
  --ooui--icon-normal-filter: brightness(0) invert(1);
  --ooui--icon-progressive-filter: brightness(0) invert(78%) sepia(67%) saturate(1967%) hue-rotate(352deg) brightness(102%) contrast(103%); /* var(--theme-test-highlight-general */
  --ooui--icon-destructive-filter: brightness(0) invert(43%) sepia(14%) saturate(3288%) hue-rotate(315deg) brightness(78%) contrast(124%); /* var(--theme-text-highlight-bad) */
  --ooui--icon-invert-filter: none;
  --ooui--icon-success-filter: brightness(0) invert(32%) sepia(44%) saturate(4543%) hue-rotate(80deg) brightness(102%) contrast(104%); /* var(--theme-text-highlight-good) */
  --ooui--icon-warning-filter: var(--ooui--icon-progressive-filter);
  --ooui--icon-error-filter: var(--ooui--icon-destructive-filter);
}

/* -- OOUI: Icon replacements -- */
/* Override icons from (or with):
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/images/icons/ */
:root {

  --ooui--edit-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'> <title> highlight </title> <path d='M15.14 2.27a1 1 0 0 0-1.41 0l-10 10a1 1 0 0 0 0 1.41L4 14l-3 4h5l1-1 .29.29a1 1 0 0 0 1.41 0l10-10a1 1 0 0 0 .03-1.43zM7 15l-2-2 9-9 2 2z'/> </svg>"); /* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/images/icons/highlight.svg */
  --ooui--indicator-down: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><title> down </title><path d='M9.9 2.9 6 6.8 2.1 2.9 1 4l5 5 5-5z'/></svg>"); /* https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/images/indicators/down.svg  -- For some reason this was base64 encoded and larger than the source */
}

/* -- OOUI: MessageDialog -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/dialogs/MessageDialog.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/windows.less */
 .oo-ui-messageDialog-content > .oo-ui-window-foot {
  outline-color: var(--ooui--dialog-border-color);
}
.oo-ui-messageDialog-title {
  color: var(--theme-primary-text-color);
}
.oo-ui-messageDialog-message {
  color: var(--theme-primary-text-color);
}
.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button:active {
  background: var(--ooui--button-background);
}
.oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:active {
  background: var(--ooui--button-background);
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
  border-right-color: var(--ooui--dialog-border-color);
}
.oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
  border-bottom-color: var(--ooui--dialog-border-color--lighter);
}

/* -- OOUI: ProcessDialog -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/dialogs/ProcessDialog.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/windows.less */
.oo-ui-processDialog-content .oo-ui-window-head,
.oo-ui-processDialog-content .oo-ui-window-foot {
  outline-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget > .oo-ui-buttonElement-button {
  border-left-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:hover, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:active {
  border-left-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-primary .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:focus {
  border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-processDialog-actions-safe .oo-ui-actionWidget > .oo-ui-buttonElement-button, .oo-ui-processDialog-actions-other .oo-ui-actionWidget > .oo-ui-buttonElement-button {
  border-right-color: var(--ooui--dialog-border-color--lighter);
}
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:hover {
  background: var(--ooui--button-background--hover);
  border-right: var(--ooui--button-border-right--hover);
}
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:active {
  background: var(--ooui--button-background);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:focus {
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}

/* -- OOUI: ButtonElement -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/elements/ButtonElement.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/elements.less */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  color: var(--ooui--button-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  background-color: unset;
  color: var(--ooui--button-color--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
  box-shadow: var(--ooui--button-box-shadow--focus);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
  background-color: unset;
  color: var(--ooui--button-color);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  color: var(--ooui--button-progressive-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
  color: var(--ooui--button-progressive-color--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
  color: var(--ooui--button-progressive-color);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
  color: var(--ooui--button-destructive-color);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
  color: var(--ooui--button-destructive-color--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
  color: var(--ooui--button-destructive-color);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
  color: var(--ooui--button-disabled-color);
}
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
  border-radius: 4px;
}
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
  background: var(--ooui--button-disabled-background);
  color: var(--ooui--button-disabled-color);
  border-top: var(--ooui--button-disabled-border-top);
  border-right: var(--ooui--button-disabled-border-right);
  border-bottom: var(--ooui--button-disabled-border-bottom);
  border-left: var(--ooui--button-disabled-border-left);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
  background: var(--ooui--button-background);
  color: var(--ooui--button-color);
  border-top: var(--ooui--button-border-top);
  border-right: var(--ooui--button-border-right);
  border-bottom: var(--ooui--button-border-bottom);
  border-left: var(--ooui--button-border-left);
  box-shadow: var(--ooui--button-box-shadow);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  background: var(--ooui--button-background--hover);
  color: var(--ooui--button-color--hover);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
  box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
  background: var(--ooui--button-background);
  color: var(--ooui--button-selected-color);
  border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus {
  border-color: var(--ooui--button-progressive-primary-border-color);
  box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-progressive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
  background: var(--ooui--button-background);
  color: var(--ooui--button-color);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  color: var(--ooui--button-progressive-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
  color: var(--ooui--button-progressive-color--hover);
  background: var(--ooui--button-background--hover);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
  border-top: var(--ooui--button-border-top);
  border-right: var(--ooui--button-border-right);
  border-bottom: var(--ooui--button-border-bottom);
  border-left: var(--ooui--button-border-left);
  box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-progressive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
  background: var(--ooui--button-background);
  color: var(--ooui--button-progressive-color);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
  color: var(--ooui--button-destructive-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
  color: var(--ooui--button-destructive-color--hover);
  background: var(--ooui--button-background--hover);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
  border-top: var(--ooui--button-border-top);
  border-right: var(--ooui--button-border-right);
  border-bottom: var(--ooui--button-border-bottom);
  border-left: var(--ooui--button-border-left);
  box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-destructive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
  background: var(--ooui--button-background);
  color: var(--ooui--button-destructive-color);
  border-top: var(--ooui--button-border-top--hover);
  border-right: var(--ooui--button-border-right--hover);
  border-bottom: var(--ooui--button-border-bottom--hover);
  border-left: var(--ooui--button-border-left--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  color: var(--ooui--button-progressive-color);
  background: var(--ooui--button-background);
  border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
  color: var(--ooui--button-progressive-color--hover);
  background: var(--ooui--button-background--hover);
  border-color: var(--ooui--button-progressive-primary-border-color--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
  border-color: var(--ooui--button-progressive-primary-border-color);
  box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-progressive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
  color: var(--ooui--button-progressive-color);
  background: var(--ooui--button-background);
  border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
  color: var(--ooui--button-destructive-color);
  background: var(--ooui--button-background);
  border-color: var(--ooui--button-destructive-primary-border-color);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
  color: var(--ooui--button-destructive-color--hover);
  background: var(--ooui--button-background--hover);
  border-color: var(--ooui--button-destructive-primary-border-color--hover);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
  border-color: var(--ooui--button-destructive-primary-border-color);
  box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-destructive-box-shadow--focus);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
  color: var(--ooui--button-destructive-color);
  background: var(--ooui--button-background);
  border-color: var(--ooui--button-destructive-primary-border-color);
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle,
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
  background-color: var(--ooui--button-background);
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
  outline-color: var(--ooui--button-progressive-primary-border-color);
  box-shadow: var(--ooui--button-box-shadow--focus);
}

.oo-ui-popupToolGroup-tools {
  background-color: var(--theme-primary-background-color);
}

.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link {
  background-color: var(--ooui--menuselect-highlighted-background-color);
}

.oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
  background-color: var(--oouihelper--text-background);
  color: var(--oouihelper--progressive);
}

/* -- OOUI: PendingElement -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/elements/PendingElement.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/elements.less */
.oo-ui-pendingElement-pending {
  background-color: var(--ooui--textarea-pending-background-color-1);
  background-image: linear-gradient(135deg, var(--ooui--textarea-pending-background-color-2) 25%, transparent 25%, transparent 50%, var(--ooui--textarea-pending-background-color-2) 50%, var(--ooui--textarea-pending-background-color-2) 75%, transparent 75%, transparent);
}


/* -- OOUI: icons -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/elements/IconElement.less */
.oo-ui-iconElement-icon {
  filter: var(--ooui--icon-normal-filter);
}

/*
.oo-ui-iconElement-icon:hover {
  filter: brightness(0) var(--ooui--icon-progressive-filter);
} */

/* -- OOUI: ToolBar
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/Toolbar.less
 *  https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/tools.less */
.oo-ui-toolbar-bar {
	background-color: var(--ooui--toolbar-bar-background-color);
  color: var(--ooui--toolbar-bar-color);
}

.oo-ui-toolbar-tools, .oo-ui-toolbar-popups {
  background: inherit;
} 

.oo-ui-widget:hover > * > .oo-ui-iconElement-icon,
.oo-ui-widget:hover > * > .oo-ui-indicatorElement-indicator {
  filter: var(--ooui--icon-progressive-filter);
}
.oo-ui-widget:hover > * > .oo-ui-tool-link,
.oo-ui-widget:hover > * > .oo-ui-labelElement-label {
  color: var(--editor-header-text-color);
}

.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link {
  color: var(--ooui--button-progressive-color);
  background-color: var(--ooui--button-background);
  border-color: var(--ooui--button-progressive-primary-border-color);
}

.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover {
  background-color: var(--ooui--button-background--hover);
}

.oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link {
  color: var(--ooui--button-progressive-color);
  background-color: var(--ooui--button-background);
  border-color: var(--ooui--button-progressive-primary-border-color);
}
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
  color: var(--editor-header-text-color);
}

/* -- Icon re-colouring -- */
.oo-ui-iconElement-icon.oo-ui-image-invert {
  filter: var(--ooui--icon-invert-filter);
}

.oo-ui-iconElement-icon.oo-ui-image-progressive {
  filter: var(--ooui--icon-progressive-filter);
}

.oo-ui-iconElement-icon.oo-ui-image-destructive {
  filter: var(--ooui--icon-destructive-filter);
}

.oo-ui-iconElement-icon.oo-ui-image-error {
  filter: var(--ooui--icon-error-filter);
}

.oo-ui-iconElement-icon.oo-ui-image-warning {
  filter: var(--ooui--icon-warning-filter);
}

.oo-ui-iconElement-icon.oo-ui-image-success {
  filter: var(--ooui--icon-success-filter);
}

/* -- OOUI: indicators -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/indicators.json */
.oo-ui-indicator-clear {
  filter: var(--ooui--indicator-filter);
}

.oo-ui-image-invert.oo-ui-indicator-clear {
  filter: var(--ooui--indicator-invert-filter);
}

.oo-ui-indicator-up {
  filter: var(--ooui--indicator-filter);
}

.oo-ui-image-invert.oo-ui-indicator-up {
  filter: var(--ooui--indicator-invert-filter);
}

.oo-ui-indicator-down {
  filter: var(--ooui--indicator-filter);
}

.oo-ui-image-invert.oo-ui-indicator-down {
  filter: var(--ooui--indicator-invert-filter);
}

.oo-ui-indicator-required {
  filter: var(--ooui--indicator-filter);
}

.oo-ui-image-invert.oo-ui-indicator-required {
  filter: var(--ooui--indicator-invert-filter);
}

/* -- OOUI: BookletLayout -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/layouts/BookletLayout.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/layouts.less */
.oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
  border-top-color: var(--ooui--bookletlayout-border-color);
}
.oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
  border-right-color: var(--ooui--bookletlayout-border-color);
}

/* -- OOUI: FieldLayout -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/layouts/FieldLayout.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/layouts.less */
.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
  color: var(--ooui--dropdown-disabled-color);
}

/* -- OOUI: PanelLayout -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/layouts/PanelLayout.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/layouts.less */
.oo-ui-panelLayout-framed {
  border-color: var(--ooui--panellayout-border-color);
}


/* -- OOUI: ButtonGroupWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ButtonGroupWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
  border-left-color: var(--ooui--button-disabled-border-left);
}
.oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button,
.oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button:active {
  border-left-color: var(--ooui--button-border-left);
}

/* -- OOUI: ButtonSelectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ButtonSelectWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
  border-left: var(--ooui--button-disabled-border-left);
}
.oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
  border-color: var(--ooui--button-progressive-primary-border-color);
  box-shadow: var(--ooui--button-box-shadow), var(--ooui--button-progressive-box-shadow--focus);
}

/* -- OOUI: CheckboxInputWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/CheckboxInputWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-checkboxInputWidget [type=checkbox] + span {
  background-color: transparent;
  border-color: var(--ooui--checkbox-border-color);
  border-width: 2px;
  filter: none;
}
.oo-ui-checkboxInputWidget [type=checkbox]:indeterminate + span::before {
  background-color: var(--ooui--checkbox-border-color);
}
.oo-ui-checkboxInputWidget [type=checkbox]:disabled + span {
  background-color: var(--ooui--checkbox-disabled-background-color);
  border-color: var(--ooui--checkbox-border-color);
  background-image: linear-gradient(transparent, transparent), var(--ooui--checkbox-icon);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:focus + span {
  border-color: var(--ooui--checkbox-border-color);
  box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:hover + span {
  border-color: var(--ooui--checkbox-border-color--hover);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:active + span {
  background-color: var(--ooui--checkbox-border-color);
  border-color: var(--ooui--checkbox-border-color);
  box-shadow: none;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate + span {
  background-color: var(--ooui--checkbox-selected-background-color);
  border-color: var(--ooui--checkbox-border-color);
  border-width: 2px;
  background-image: linear-gradient(transparent, transparent), var(--ooui--checkbox-icon);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked:focus + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate:focus + span {
  background-color: transparent;
  border-color: var(--ooui--checkbox-border-color);
  box-shadow: inset 0 0 0 1px var(--ooui--checkbox-box-shadow--focus);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate:hover + span {
  background-color: var(--ooui--button-background--hover);
  border-color: var(--ooui--checkbox-border-color--hover);
  background-image: var(--ooui--checkbox-icon);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:checked:active + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type=checkbox]:indeterminate:active + span {
  background-color: transparent;
  border-color: var(--ooui--checkbox-border-color);
  box-shadow: none;
}

/* -- OOUI: DropdownInputWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/DropdownInputWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-dropdownInputWidget select {
  border-color: var(--ooui--dropdown-border-color);
}
.oo-ui-dropdownInputWidget option {
  color: initial;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
  background-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
  background-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
  color: var(--theme-primary-text-color);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
  color: var(--theme-primary-text-color);
  border-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
  color: var(--theme-primary-text-color);
  border-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus {
  border-color: transparent;
  box-shadow: none;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled {
  background-color: transparent;
}
.oo-ui-dropdownInputWidget.oo-ui-widget-disabled select {
  color: var(--ooui--dropdown-disabled-color);
  border-color: transparent;
}

/* -- OOUI: DropdownWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/DropdownWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-dropdownWidget-handle {
  border-color: var(--ooui--dropdown-border-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
  background-color: var(--ooui--dropdown-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
  background-color: var(--ooui--dropdown-background-color--hover);
  color: var(--theme-primary-text-color);
  border-color: var(--ooui--dropdown-border-color--hover);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
  color: var(--theme-primary-text-color);
  border-color: var(--ooui--dropdown-border-color--hover);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
  border-color: var(--ooui--dropdown-border-color--focus);
  box-shadow: inset 0 0 0 1px var(--ooui--dropdown-border-color--focus);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
  background-color: var(--ooui--dropdown-background-color);
}
.oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
  color: var(--ooui--dropdown-disabled-color);
  text-shadow: none;
  border-color: var(--ooui--dropdown-disabled-border-color);
  background-color: var(--ooui--dropdown-disabled-background-color);
}

/* -- OOUI: LabelWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/LabelWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-labelWidget.oo-ui-inline-help {
  color: var(--ooui--inlinehelp-color);
}

/* -- OOUI: MenuOptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MenuOptionWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
  background-color: var(--ooui--menuselect-highlighted-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
  background-color: var(--ooui--menuselect-selected-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
  background-color: var(--ooui--menuselect-selected-background-color);
  color: var(--theme-link-color);
}
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
  color: var(--theme-primary-text-color);
}

/* -- OOUI: MenuSectionOptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MenuSectionOptionWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-menuSectionOptionWidget {
  color: var(--ooui--menusectionoption-color);
}

/* -- OOUI: MenuSelectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MenuSelectWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-menuSelectWidget {
  background-color: var(--ooui--menuselect-background-color);
  border-color: var(--ooui--menuselect-border-color);
}

/* -- OOUI: MessageWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MessageWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
  background-color: var(--ooui--messagewidget-error-background-color);
  border-color: var(--ooui--messagewidget-error-border-color);
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
  background-color: var(--ooui--messagewidget-warning-background-color);
  border-color: var(--ooui--messagewidget-warning-border-color);
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
  background-color: var(--ooui--messagewidget-success-background-color);
  border-color: var(--ooui--messagewidget-success-border-color);
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
  background-color: var(--ooui--messagewidget-notice-background-color);
  border-color: var(--ooui--messagewidget-notice-border-color);
}
.oo-ui-messageWidget.oo-ui-flaggedElement-error:not(.oo-ui-messageWidget-block) {
  color: var(--ooui--messagewidget-error-color);
}
.oo-ui-messageWidget.oo-ui-flaggedElement-success:not(.oo-ui-messageWidget-block) {
  color: var(--ooui--messagewidget-success-color);
}

/* -- OOUI: MultioptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/MultioptionWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-multioptionWidget.oo-ui-widget-disabled {
  color: var(--ooui--multioption-disabled-color);
}

/* -- OOUI: OptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/OptionWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-optionWidget.oo-ui-widget-disabled {
  color: var(--ooui--disabled-color);
}

/* -- OOUI: OutlineOptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/OutlineOptionWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
  background-color: var(--ooui--outlineoption-highlighted-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
  background-color: var(--ooui--outlineoption-selected-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
  background-color: var(--ooui--outlineoption-pressed-background-color);
  color: var(--theme-link-color);
}

/* -- OOUI: OutlineSelectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/OutlineSelectWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-outlineSelectWidget:focus {
  box-shadow: var(--ooui--outlineselect-box-shadow--focus);
}

/* -- OOUI: PopupWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/PopupWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-popupWidget-popup {
  background-color: var(--ooui--popup-background-color);
  border-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
  border-bottom-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
  border-bottom-color: var(--ooui--popup-background-color);
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
  border-top-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
  border-top-color: var(--ooui--popup-background-color);
}
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::before {
  border-right-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::after {
  border-right-color: var(--ooui--popup-background-color);
}
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::before {
  border-left-color: var(--ooui--popup-border-color);
}
.oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::after {
  border-left-color: var(--ooui--popup-background-color);
}

/* -- OOUI: ProgressBarWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ProgressBarWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-progressBarWidget {
  border-color: var(--ooui--progressbar-border-color);
}
.oo-ui-progressBarWidget:not(.oo-ui-pendingElement-pending) {
  background-color: transparent;
}
.oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar {
  background-color: var(--ooui--progressbar-bar-background-color);
}
.oo-ui-progressBarWidget.oo-ui-widget-disabled .oo-ui-progressBarWidget-bar {
  background-color: var(--ooui--progressbar-disabled-border-color);
}
.oo-ui-progressBarWidget.oo-ui-pendingElement-pending {
  background-color: var(--ooui--progressbar-pending-background-color-1);
  background-image: linear-gradient(135deg, var(--ooui--progressbar-pending-background-color-2) 25%, transparent 25%, transparent 50%, var(--ooui--progressbar-pending-background-color-2) 50%, var(--ooui--progressbar-pending-background-color-2) 75%, transparent 75%, transparent);
}

/* -- OOUI: RadioInputWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/RadioInputWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-radioInputWidget [type=radio] + span {
  background-color: transparent;
  border-color: var(--ooui--radiobutton-border-color);
  border-width: 3px;
}
.oo-ui-radioInputWidget [type=radio] + span::before {
  top: 2.5px;
  left: 2.5px;
  right: 2.5px;
  bottom: 2.5px;
}
.oo-ui-radioInputWidget [type=radio]:checked + span, .oo-ui-radioInputWidget [type=radio]:checked:hover + span, .oo-ui-radioInputWidget [type=radio]:checked:focus:hover + span {
  border-width: 3px;
}
.oo-ui-radioInputWidget [type=radio]:checked + span:before, .oo-ui-radioInputWidget [type=radio]:checked:hover + span:before, .oo-ui-radioInputWidget [type=radio]:checked:focus:hover + span:before {
  background-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget [type=radio]:disabled + span {
  background-color: var(--ooui--radiobutton-disabled-background-color);
  border-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget [type=radio]:disabled:checked + span {
  background-color: var(--ooui--radiobutton-disabled-background-color);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:hover + span {
  border-color: var(--ooui--radiobutton-border-color--hover);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:active + span {
  background-color: var(--ooui--radiobutton-border-color);
  border-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked + span {
  border-color: var(--ooui--radiobutton-border-color);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:focus + span {
  box-shadow: inset 0 0 0 1px var(--ooui--radiobutton-box-shadow--focus);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:focus + span::before {
  border-color: transparent;
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:hover + span {
  border-color: var(--ooui--radiobutton-border-color--hover);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:active + span {
  border-color: var(--ooui--radiobutton-border-color);
  box-shadow: inset 0 0 0 1px var(--ooui--radiobutton-box-shadow--focus);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type=radio]:checked:active + span::before {
  border-color: transparent;
}

/* -- OOUI: RadioSelectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/RadioSelectWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-radioSelectWidget:focus [type=radio]:checked + span::before {
  border-color: transparent;
}

/* -- OOUI: SelectFileWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/SelectFileWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-selectFileWidget-dropTarget {
  background-color: var(--ooui--selectfile-background-color);
  border: 1px solid var(--ooui--selectfile-border-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
  background-color: var(--ooui--selectfile-background-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
  border-color: var(--ooui--selectfile-border-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget,
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
  background-color: var(--ooui--selectfile-candrop-background-color);
  color: var(--theme-link-color);
}
.oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget, .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
  background-color: var(--ooui--textarea-disabled-background-color);
  border-color: var(--ooui--selectfile-border-color);
}

/* -- OOUI: TabOptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TabOptionWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tabOptionWidget {
  color: var(--ooui--taboption-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  background-color: var(--ooui--tabselect-selected-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
  border-bottom-color: var(--ooui--tabselect-selected-background-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
  background-color: var(--ooui--tabselect-highlighted-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
  background-color: var(--ooui--tabselect-selected-background-color);
  color: var(--theme-primary-text-color);
}
.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
  background-color: var(--ooui--tabselect-selected-background-color);
}
.oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
  border-bottom-color: var(--theme-primary-text-color);
}
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  color: var(--ooui--tabselect-frameless-selected-color);
  box-shadow: inset 0 -2px 0 0 var(--ooui--tabselect-frameless-selected-box-shadow-color);
}
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:not(.oo-ui-optionWidget-selected):hover {
  color: var(--ooui--tabselect-frameless-highlighted-color);
  box-shadow: inset 0 -2px 0 0 var(--ooui--tabselect-frameless-highlighted-color);
}
.oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:not(.oo-ui-optionWidget-selected):active {
  color: var(--ooui--tabselect-frameless-selected-color);
  box-shadow: inset 0 -2px 0 0 var(--ooui--tabselect-frameless-selected-color);
}
.oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
  box-shadow: inset 0 0 0 2px var(--ooui--tabselect-frameless-selected-box-shadow-color);
}

/* -- OOUI: TabSelectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TabSelectWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tabSelectWidget-framed {
  background-color: var(--ooui--tabselect-background-color);
}
.oo-ui-tabSelectWidget-frameless {
  box-shadow: inset 0 -1px 0 0 var(--ooui--tabselect-frameless-box-shadow-color);
}

/* -- OOUI: TagItemWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TagItemWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tagItemWidget {
  border-color: var(--ooui--tagitem-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled {
  color: var(--theme-primary-text-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
  background-color: var(--ooui--tagitem-background-color);
  color: var(--ooui--tagitem-color--hover);
  border-color: var(--ooui--tagitem-border-color--hover);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
  border-color: var(--ooui--tagitem-border-color--focus);
  box-shadow: inset 0 0 0 1px var(--ooui--tagitem-border-color--focus);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed) {
  background-color: var(--ooui--tagitem-background-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
  border-color: var(--ooui--tagitem-invalid-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
  border-color: var(--ooui--tagitem-invalid-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
  border-color: var(--ooui--tagitem-invalid-border-color);
  box-shadow: inset 0 0 0 1px var(--ooui--tagitem-invalid-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
  background-color: var(--ooui--textarea-background-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:focus {
  border: 0;
  box-shadow: none;
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
  background-color: var(--ooui--tagitem-border-color);
}
.oo-ui-tagItemWidget.oo-ui-widget-disabled {
  background-color: var(--ooui--tagitem-disabled-background-color);
  color: var(--ooui--tagitem-disabled-color);
  border-color: var(--ooui--tagitem-disabled-border-color);
  text-shadow: none;
}

/* -- OOUI: TagMultiselectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TagMultiselectWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-tagMultiselectWidget-handle {
  border: 1px solid var(--ooui--textarea-border-color);
}
.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input {
  color: var(--theme-primary-text-color);
}
.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::-webkit-input-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input:-ms-input-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::-moz-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
  background-color: var(--ooui--textarea-readonly-background-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
  background-color: var(--ooui--textarea-background-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
  border-color: var(--ooui--textarea-border-color--hover);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
  border-color: var(--ooui--textarea-border-color--focus);
  box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid .oo-ui-tagMultiselectWidget-handle, .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid:hover .oo-ui-tagMultiselectWidget-handle {
  border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
  background-color: var(--ooui--textarea-readonly-background-color);
  background-color: transparent;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
  background-color: var(--ooui--tagitem-background-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
  border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
  color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
  background-color: var(--ooui--textarea-disabled-background-color);
  color: var(--ooui--textarea-disabled-color);
  text-shadow: none;
  border-color: var(--ooui--textarea-disabled-border-color);
}

/* -- OOUI: TextInputWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/TextInputWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
  background-color: var(--ooui--textarea-background-color);
  color: var(--theme-primary-text-color);
  border-color: var(--ooui--textarea-border-color);
}
.oo-ui-textInputWidget .oo-ui-pendingElement-pending {
  background-color: var(--ooui--textarea-pending-background-color-1);
}
.oo-ui-textInputWidget > .oo-ui-labelElement-label {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::-webkit-input-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:-ms-input-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::-moz-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
  border-color: var(--ooui--textarea-border-color--focus);
  box-shadow: inset 0 0 0 1px var(--ooui--textarea-border-color--focus);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) {
  background-color: var(--ooui--textarea-readonly-background-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
  border-color: var(--ooui--textarea-border-color--hover);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
  border-color: var(--ooui--textarea-border-color--focus);
}
@media screen and (min-width: 0) {
  .oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus {
    outline-color: var(--ooui--textarea-border-color--focus);
  }
  .oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid textarea.oo-ui-inputWidget-input:focus {
    outline-color: var(--ooui--textarea-invalid-border-color);
  }
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
  border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:hover {
  border-color: var(--ooui--textarea-invalid-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:focus {
  border-color: var(--ooui--textarea-invalid-border-color);
  box-shadow: inset 0 0 0 1px var(--ooui--textarea-invalid-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
  background-color: var(--ooui--textarea-disabled-background-color);
  -webkit-text-fill-color: var(--ooui--textarea-disabled-color);
  color: var(--ooui--textarea-disabled-color);
  text-shadow: none;
  border-color: var(--ooui--textarea-disabled-border-color);
}
.oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
  color: var(--ooui--textarea-placeholder-color);
  text-shadow: none;
}

/* -- OOUI: ToggleButtonWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ToggleButtonWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
  background-color: transparent;
  color: var(--ooui--button-frameless-on-color);
}

/* -- OOUI: ToggleSwitchWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/widgets/ToggleSwitchWidget.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/widgets.less */
.oo-ui-toggleSwitchWidget {
  background-color: transparent;
  border: 3px solid var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget-grip {
  top: 0.2142857143em;
}
.oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
  left: 1.7142857143em;
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
  background-color: transparent;
  border: 3px solid var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
  background-color: transparent;
  border-color: var(--ooui--toggleswitch-border-color--hover);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
  background-color: transparent;
  border-color: var(--ooui--toggleswitch-border-color--hover);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
  background-color: var(--ooui--toggleswitch-color--active);
  border-color: var(--ooui--toggleswitch-color--active);
  box-shadow: inset 0 0 0 1px var(--ooui--toggleswitch-color--active);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus .oo-ui-toggleSwitchWidget-grip {
  background-color: var(--ooui--toggleswitch-grip-color);
  border-color: var(--ooui--toggleswitch-grip-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
  border-color: var(--ooui--toggleswitch-border-color);
  box-shadow: inset 0 0 0 1px var(--ooui--toggleswitch-box-shadow--focus);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
  border-color: var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
  background-color: var(--ooui--toggleswitch-border-color);
  border-color: var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
  background-color: var(--ooui--toggleswitch-grip-color);
  border-color: var(--ooui--toggleswitch-grip-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
  background-color: var(--ooui--toggleswitch-border-color--hover);
  border-color: var(--ooui--toggleswitch-border-color--hover);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
  background-color: var(--ooui--toggleswitch-color--active);
  border-color: var(--ooui--toggleswitch-color--active);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
  border-color: var(--ooui--toggleswitch-border-color);
  box-shadow: none;
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus::before {
  border-color: var(--ooui--toggleswitch-grip-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
  background-color: var(--ooui--toggleswitch-disabled-background-color);
  border-color: var(--ooui--toggleswitch-border-color);
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
  background-color: transparent;
  border: 3px solid var(--ooui--toggleswitch-border-color);
  box-shadow: none;
}
.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
  background-color: var(--ooui--toggleswitch-disabled-grip-color);
}


/* -- OOUI: WindowManager -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/styles/WindowManager.less
 * https://gerrit.wikimedia.org/r/plugins/gitiles/oojs/ui/+/refs/heads/master/src/themes/wikimediaui/windows.less */
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
  background-color: var(--ooui--window-background-color);
}
.oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
  border-color: var(--ooui--window-border-color);
}

/* -------------------------------------------------------------------------------- */

/* -- RCFilters -- */
/* Filtering interface at the top of [[Special:RecentChanges]], [[Special:Watchlist]], and [[Special:RelatedChanges]].
 * For documentation of the project, see https://www.mediawiki.org/wiki/Edit_Review_Improvements/New_filters_for_edit_review */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less */
.client-js .mw-recentchanges-toplinks:not(.mw-recentchanges-toplinks-collapsed) {
  border-color: var(--ooui--dialog-border-color--lighter);
}
.client-js .mw-rcfilters-spinner .mw-rcfilters-spinner-bounce, .client-js .mw-rcfilters-spinner:before, .client-js .mw-rcfilters-spinner:after {
  background-color: var(--ooui--checkbox-border-color);
}

/* -- RCFilters: ChangesListWrapperWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less */
.mw-rcfilters-ui-changesListWrapperWidget-previousChangesIndicator {
  border-top-color: var(--oouihelper--disabled);
}
.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey td:not(:nth-child(-n+2)) {
  background-color: var(--oouihelper--themerelated-disabled);
}
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
  background-color: var(--ooui--messagewidget-notice-background-color);
  border-radius: 4px;
  border: 2px solid var(--ooui--messagewidget-notice-border-color);
}

.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c1,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c1 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c1.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
  background-color: var(--theme-notice-blue-background-color);
}

.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c2,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c2 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c2.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
  background-color: var(--theme-notice-green-background-color);
}

.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c3,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c3 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c3.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
  background-color: var(--theme-notice-yellow-background-color);
}

.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c4,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c4 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c4.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
  background-color: var(--theme-notice-orange-background-color);
}

.mw-rcfilters-ui-changesListWrapperWidget li.mw-rcfilters-highlight-color-c5,
.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-highlight-color-c5 tr:first-child,
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-toplevel:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+2)),
.mw-rcfilters-ui-changesListWrapperWidget tr.mw-rcfilters-highlight-color-c5.mw-rcfilters-ui-highlights-enhanced-nested:not(.mw-rcfilters-ui-changesListWrapperWidget-enhanced-grey) td:not(:nth-child(-n+4)) {
  background-color: var(--theme-notice-red-background-color);
}

/* the mixing of two and more colors is impossible with CSS variables, unless of course each mixed color is hardcoded */

/* -- RCFilters: DatePopupWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.DatePopupWidget.less */
.mw-rcfilters-ui-datePopupWidget {
  border-top-color: var(--ooui--textarea-border-color);
}
.mw-rcfilters-ui-datePopupWidget .mw-rcfilters-ui-valuePickerWidget-title {
  color: var(--theme-primary-text-color-note);
}

/* -- RCFilters: FilterItemHighlightButton -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less */
.oo-ui-buttonWidget.oo-ui-popupButtonWidget .oo-ui-buttonElement-button > .mw-rcfilters-ui-filterItemHighlightButton-circle {
  /* override the rule from base OOUI where we apply a filter to all ".oo-ui-iconElement-icon"
   * elements, which prevents this circle's color from being displayed properly */
  filter: none;
}

/* -- RCFilters: FilterMenuHeaderWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less */
.mw-rcfilters-ui-filterMenuHeaderWidget-title {
  color: var(--theme-body-header-text-color);
  text-transform: uppercase;
  font: var(--theme-header-font);
  letter-spacing: var(--theme-body-header-letter-spacing);
}
.mw-rcfilters-ui-filterMenuHeaderWidget-header {
  border-bottom-color: var(--ooui--textarea-border-color);
  background-color: var(--ooui--textarea-readonly-background-color);
}

/* -- RCFilters: FilterMenuOptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less */
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted:not(.oo-ui-optionWidget-selected) {
  background-color: transparent;
}
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted .mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
  color: var(--ooui--dropdown-disabled-color);
}
.mw-rcfilters-ui-filterMenuOptionWidget.oo-ui-flaggedElement-muted.oo-ui-optionWidget-highlighted {
  background-color: var(--ooui--menuselect-highlighted-background-color);
  color: var(--theme-primary-text-color);
}

/* -- RCFilters: FilterMenuSectionOptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less */
.mw-rcfilters-ui-filterMenuSectionOptionWidget {
  background-color: var(--ooui--dropdown-disabled-background-color);
}
.mw-rcfilters-ui-filterMenuSectionOptionWidget-header-title.oo-ui-labelElement-label {
  color: var(--ooui--dropdown-disabled-color);
}

/* -- RCFilters: FilterTagMultiselectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less */
.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
  background-color: var(--ooui--textarea-readonly-background-color);
  border-color: var(--ooui--textarea-border-color);
}
.mw-rcfilters-collapsed .mw-rcfilters-ui-filterTagMultiselectWidget {
  border-bottom-color: var(--ooui--textarea-border-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .mw-rcfilters-ui-filterTagMultiselectWidget-emphasize.oo-ui-tagMultiselectWidget-handle {
  background-color: var(--ooui--textarea-background-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
  color: var(--theme-primary-text-color-note);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle {
  color: var(--theme-primary-text-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget {
  border-color: var(--ooui--textarea-border-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters {
  color: var(--theme-primary-text-color-note);
}

/* -- RCFilters: FilterTagMultiselectWidgetMobile -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidgetMobile.less */
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile .oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget input[readonly] {
  background-color: var(--ooui--textarea-readonly-background-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile .oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget input[readonly]::-webkit-input-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile .oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget input[readonly]:-ms-input-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile .oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget input[readonly]::-moz-placeholder {
  color: var(--ooui--textarea-placeholder-color);
}
.mw-rcfilters-ui-filterTagMultiselectWidget-mobile .oo-ui-tagMultiselectWidget-input.oo-ui-textInputWidget input[readonly]::placeholder {
  color: var(--ooui--textarea-placeholder-color);
}

/* -- RCFilters: HighlightColorPickerWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less */
.mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect-color .oo-ui-iconElement-icon.oo-ui-icon-check {
  /* Override the rule from base OOUI where we apply a filter to all ".oo-ui-iconElement-icon"
   * elements. This is not necessary here because the six circles have the same color in all
   * themes, so this checkmark needs to be the same in all themes as well. */
  filter: none;
}

/* -- RCFilters: ItemMenuOptionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less */
.mw-rcfilters-ui-itemMenuOptionWidget:not(:last-child):not(.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk) {
  border-bottom-color: var(--ooui--menuselect-border-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-view-namespaces {
  border-top-width: 3px;
  border-top-color: var(--ooui--menuselect-border-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget:hover {
  background-color: var(--ooui--menuselect-highlighted-background-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget.oo-ui-optionWidget-selected {
  background-color: var(--ooui--menuselect-selected-background-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-title {
  color: var(--theme-primary-text-color);
}
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
  color: var(--theme-primary-text-color-note);
}
.mw-rcfilters-ui-itemMenuOptionWidget-excludeLabel {
  color: var(--theme-primary-text-color-note);
}

/* -- RCFilters: LiveUpdateButtonWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less */
.mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-toggleWidget-on:after {
  background: rgba(var(--theme-link-color--rgb), 0.5);
}

/* -- RCFilters: MenuSelectWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less */
.mw-rcfilters-ui-menuSelectWidget-noresults {
  color: var(--theme-primary-text-color-note);
}
.mw-rcfilters-ui-menuSelectWidget-footer {
  background-color: var(--ooui--textarea-readonly-background-color);
  border-top-color: var(--ooui--textarea-border-color);
}

/* -- RCFilters: SavedLinksListItemWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less */
.mw-rcfilters-ui-savedLinksListItemWidget:hover {
  /* Mimicking OOUI optionWidget styles */
  background-color: var(--ooui--menuselect-highlighted-background-color);
  color: var(--theme-primary-text-color);
}
.mw-rcfilters-ui-savedLinksListItemWidget-label {
  color: var(--theme-link-color);
}

/* -- RCFilters: TagItemWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less */
.mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
  background-color: var(--ooui--tagitem-disabled-background-color);
  border-color: var(--ooui--tagitem-disabled-border-color);
}
.mw-rcfilters-ui-tagItemWidget.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-labelElement-label {
  color: var(--ooui--tagitem-disabled-color);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .mw-rcfilters-ui-tagItemWidget-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
  background-color: var(--ooui--tagitem-background-color);
  border-color: var(--ooui--tagitem-border-color--focus);
}
.mw-rcfilters-ui-tagItemWidget-popup-content {
  color: var(--theme-primary-text-color-note);
}

/* -- RCFilters: ViewSwitchWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less */
.mw-rcfilters-ui-viewSwitchWidget label.oo-ui-labelWidget {
  color: var(--theme-primary-text-color);
}

/* -- RCFilters: WatchlistTopSectionWidget -- */
/* Override styling of:
 * https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less */
.mw-rcfilters-ui-watchlistTopSectionWidget-separator {
  border-top-color: var(--ooui--textarea-border-color);
}