/* ==UserStyle==
@name         WaniKani Elementary Dark
@namespace    github.com/openstyles/stylus
@version      2.1.6
@license      MIT
@description  Dark theme for the WaniKani domain
@author       Sepitus
@homepageURL  https://github.com/Sepitus-exe/WKElementaryDark
@supportURL   https://github.com/Sepitus-exe/WKElementaryDark/issues
==/UserStyle== */

@-moz-document domain("www.wanikani.com") {
:root {
    /* CSS variables (technically, "custom properties") for theming */

    /*
     * Semantic variables
     *
     * DO NOT EDIT THIS FILE DIRECTLY. Script stylers should use the --ED-*
     * props in their own CSS rules. Users can override any of these colors by
     * defining their own --USER-* props in a separate file.
     *
     * The --ED-* props form the API for this styling platform. These properties
     * should remain fairly constant (though new ones may be added going forward).
     *
     * Properties with the --EDI-* naming convention are _internal_ variables that
     * shouldn't be referenced outside of this file.
     *
     * Note that the colors in this file form a dark theme. It specifically uses
     * light text (colored with --ED-text) over everything except
     * containers with a background color of --ED-surface-inv.
     * 
     * Light themes are possible by overriding these color definitions with
     * --USER-* properties in an override file.
     *
     */

    /* 
     * Surfaces / overlapping containers for layout
     */
    --ED-surface-1: var(--USER-surface-1, var(--EDI-gray-1));
    --ED-surface-2: var(--USER-surface-2, var(--EDI-gray-3));
    --ED-surface-3: var(--USER-surface-3, var(--EDI-gray-5));
    --ED-surface-4: var(--USER-surface-4, var(--EDI-gray-7));

    /* 
     * Inverted surfaces. Text will be colored with --ED-text-inv
     */
    --ED-surface-inv: var(--USER-surface-inv, var(--EDI-gray-9));

    /*
     * Text colors 
     */

    /* 
     * One color for dark backgrounds, one for light.
     *
     * --ED-text-inv is used over --ED-surface-inv ONLY
     *
     * --ED-text is used everywhere else
     */
    --ED-text: var(--USER-text, var(--EDI-gray-12));
    --ED-text-inv: var(--USER-text-inv, var(--EDI-gray-1));

    /* Special coloring needs */
    --ED-text-hl: var(--USER-text-hl, var(--EDI-yellow));
    --ED-text-grayed: var(--USER-text-grayed, var(--EDI-gray-8));

    /*
     * Other semantic types
     */

    /* Theme/branding colors */
    --ED-brand: var(--USER-brand, var(--EDI-red));

    /* Indicate item types */
    --ED-radical: var(--USER-radical, var(--EDI-blue));
    --ED-kanji: var(--USER-kanji, var(--EDI-red));
    --ED-vocab: var(--USER-vocab, var(--EDI-green));

    /* Indicate SRS stages */
    --ED-apprentice: var(--USER-apprentice, var(--EDI-gray-7));
    --ED-guru: var(--USER-guru, var(--EDI-gray-yellow));
    --ED-master: var(--USER-master, var(--EDI-yellow));
    --ED-enlightened: var(--USER-enlightened, var(--EDI-yellow-red));
    --ED-burned: var(--USER-burned, var(--EDI-red));

    /* Indicate review vs. lesson */
    --ED-lesson: var(--USER-lesson, var(--ED-radical));
    --ED-review: var(--USER-review, var(--ED-kanji));

    /* Alerts/warnings */
    --ED-alert: var(--USER-alert, var(--EDI-red));
    --ED-success: var(--USER-success, var(--EDI-green));
    --ED-correct: var(--USER-correct, var(--EDI-green));
    --ED-incorrect: var(--USER-incorrect, var(--EDI-red));

    /* Progress bars */
    --ED-progress: var(--USER-progress, var(--EDI-yellow));

    /* Image filters */
    --ED-logo-filter: var(--USER-logo-filter, var(--EDI-logo-filter));
    --ED-extra-study-filter: var(
      --USER-extra-study-filter,
      var(--EDI-extra-study-filter)
    );
    --ED-locked-item-filter: var(
      --USER-locked-item-filter,
      var(--EDI-locked-item-filter)
    );
    --ED-kotoba-odd-row-filter: var(
      --USER-kotoba-odd-row-filter,
      var(--EDI-kotoba-odd-row-filter)
    );
    --ED-footer-filter: var(--USER-footer-filter, var(--EDI-footer-filter));
    --ED-loading-filter: var(--USER-loading-filter, var(--EDI-loading-filter));
    --ED-overlay-box-highlights-filter: var(
      --USER-overlay-box-highlights-filter,
      var(--EDI-overlay-box-highlights-filter)
    );

    /*
     * Begin internal-only custom property definitions. DO NOT REFERENCE THESE
     * PROPERTIES OUTSIDE OF THIS FILE.
     */

    /*
     * Color palette
     *
     */

    /* 
     *  Grays 
     */

    --EDI-gray-1: #151515; /* darkest */
    --EDI-gray-2: #242424;
    --EDI-gray-3: #282828;
    --EDI-gray-4: #2c2c2c;
    --EDI-gray-5: #303030;
    --EDI-gray-6: #434343;
    --EDI-gray-7: #535353;
    --EDI-gray-8: #aaaaaa;
    --EDI-gray-9: #bababa;
    --EDI-gray-10: #bfbfbf;
    --EDI-gray-11: #cccccc;
    --EDI-gray-12: #eeeeee; /* lightest */

    --EDI-pure-black: #000;
    --EDI-pure-white: #fff;

    /*
     * HSL values
     *
     * Colors defined using hue/saturation/lightness values make 
     * it easy to create tints and shades as shown below. It also makes 
     * it easy to use transparency with hsla().
     */

    --EDI-red-hsl: 1, 39%, 44%;
    --EDI-red-light-hsl: 1, 39%, 64%;
    --EDI-red-dark-hsl: 1, 34%, 24%;

    --EDI-blue-hsl: 225, 23%, 44%;
    --EDI-blue-light-hsl: 225, 23%, 64%;
    --EDI-blue-dark-hsl: 225, 18%, 24%;

    --EDI-green-hsl: 148, 22%, 44%;
    --EDI-green-light-hsl: 148, 22%, 64%;
    --EDI-green-dark-hsl: 148, 17%, 24%;

    --EDI-yellow-hsl: 35, 44%, 46%;
    --EDI-yellow-light-hsl: 35, 44%, 66%;
    --EDI-yellow-dark-hsl: 35, 39%, 26%;

    --EDI-gray-yellow-hsl: 35, 25%, 39%;
    --EDI-yellow-red-hsl: 19, 41%, 45%;

    /*
     * Colors defined from the HSL values above
     */
    --EDI-red: hsl(var(--EDI-red-hsl));
    --EDI-red-light: hsl(var(--EDI-red-light-hsl));
    --EDI-red-dark: hsl(var(--EDI-red-dark-hsl));

    --EDI-blue: hsl(var(--EDI-blue-hsl));
    --EDI-blue-dark: hsl(var(--EDI-blue-dark-hsl));

    --EDI-green: hsl(var(--EDI-green-hsl));
    --EDI-green-dark: hsl(var(--EDI-green-dark-hsl));

    --EDI-yellow: hsl(var(--EDI-yellow-hsl));
    --EDI-yellow-light: hsl(var(--EDI-yellow-light-hsl));
    --EDI-yellow-dark: hsl(var(--EDI-yellow-dark-hsl));

    --EDI-gray-yellow: hsl(var(--EDI-gray-yellow-hsl));
    --EDI-yellow-red: hsl(var(--EDI-yellow-red-hsl));

    /*
     * Filters
     */
    --EDI-logo-filter: invert(1) saturate(0) brightness(1.6);
    --EDI-extra-study-filter: invert(0.843);
    --EDI-locked-item-filter: brightness(70%);
    --EDI-kotoba-odd-row-filter: brightness(1.1);
    --EDI-footer-filter: invert(1);
    --EDI-loading-filter: grayscale(90%) invert(0.843) hue-rotate(180deg);
    --EDI-overlay-box-highlights-filter: hue-rotate(160deg);

    /* 
     * Redefine Wanikani provided properties to use ED props
     */
    --color-black: var(--EDI-pure-black);
    --color-gray-light: var(--EDI-gray-12);
    --color-white: var(--EDI-pure-white);
    --color-red: var(--EDI-red);
    --color-text: var(--ED-text);
    --color-radical: var(--ED-radical);
    /* --color-radical-gradient: $colorRadicalBlueGradient; */
    --color-kanji: var(--ED-kanji);
    /* --color-kanji-gradient: $colorKanjiPinkGradient; */
    --color-vocabulary: var(--ED-vocab);
    /* --color-vocabulary-gradient: $colorvocabularyPurpleGradient; */
    --color-subject-slide-navigation-background: var(--ED-surface-2);
    --color-subject-slide-navigation-text: var(--ED-text);
    --color-subject-slide-navigation-button-hover: var(--ED-text-hl);
    --color-button-default-background: var(--ED-surface-4);
    --color-button-quiz-background: var(--ED-success);
    --color-button-quiz-text: var(--ED-text);
    --color-button-quiz-text-shadow: none;
    --color-button-modal-primary-background: var(--ED-surface-4);
    --color-button-modal-primary-border: var(--color-white);
    --color-button-modal-primary-text: var(--ED-text);
    --color-button-modal-primary-text-shadow: none;
    --color-button-modal-secondary-background: transparent;
    --color-button-modal-secondary-border: var(--color-white);
    --color-button-modal-secondary-text: var(--ED-text);
    --color-button-modal-secondary-text-shadow: none;
    /* --color-text-shadow-dark: rgba(0, 0, 0, 0.2); */
    --color-text-shadow-light: none;
    --color-quiz-incorrect-background: var(--ED-incorrect);
    --color-quiz-incorrect-text-color: var(--ED-text);
    --color-quiz-incorrect-text-shadow: none;
    --color-quiz-correct-background: var(--ED-success);
    --color-quiz-correct-text-color: var(--ED-text);
    --color-quiz-correct-text-shadow: none;
    --color-quiz-srs-correct-background: var(--ED-success);
    --color-quiz-srs-correct-text-color: var(--ED-text-color);
    --color-quiz-srs-correct-text-shadow: none;
    --color-quiz-srs-incorrect-background: var(--ED-incorrect);
    --color-quiz-srs-incorrect-text-color: var(--ED-text-color);
    --color-quiz-srs-incorrect-text-shadow: none;
  
  
    --color-wk-panel-background: var(--ED-surface-2);
    --color-wk-panel-content-background: var(--ED-surface-3);
    --color-level-progress-bar-progress: var(--ED-progress);
    --color-review-forecast-bar: var(--ED-brand);
    --color-locked: var(--ED-surface-4);
    --color-level-progress-bar-background: var(--ED-surface-4);
    --color-level-progress-bar-text: var(--ED-text);
    --color-subject-srs-progress-stage-background: var(--ED-surface-inv);
    --color-review-forecast-divider: var(--ED-text);
    --color-review-forecast-increase-sign: var(--ED-text);
    --color-recent-mistakes-intro-divider: var(--ED-text);
    --color-extra-study-tooltip-button-border: var(--ED-text);
  }

  /*************************************************************************************************
   * 
   * BEGIN CSS RULES
   *
  /*************************************************************************************************/

  /* General reset */

  body,
  .dashboard section.dashboard-sub-section div.see-more {
    background-color: var(--ED-surface-1);
    background-image: none;

    /* Default color assumes dark background */
    --EDI-text-color: var(--ED-text); /* default */
  }

  .global-header,
  .sitemap {
    background-color: var(--ED-surface-2);
    background-image: none;
    border-color: var(--ED-surface-4);
  }

  .navigation__toggle-lines,
  .navigation__toggle-lines::before,
  .navigation__toggle-lines::after,
  .wk-title--underlined,
  .wk-nav__item-link,
  .wk-nav__item,
  .sitemap__pages--levels .sitemap__page--current-level a {
    border-color: var(--EDI-text-color);
  }

  span,
  a,
  h1,
  h3,
  .extra-study > div p,
  time,
  .text-right,
  .text-left,
  .font-sans,
  .navigation-shortcut a,
  .text-sm,
  .recent-unlocks > h3,
  .see-more > a,
  .dashboard-sub-section h3,
  .dashboard section.dashboard-sub-section a.small-caps,
  .forum-topics-list a.topic-title,
  .forum-topics-list a,
  .small-caps.invert,
  .kotoba-table-list table tr.none-available,
  p,
  h1,
  html#public-profile div.wall-of-shame div.title,
  h2,
  h3,
  .character-header--vocabulary .character-header__meaning,
  .sitemap__pages--levels .sitemap__page a,
  .sitemap__group-header,
  .sitemap__page--subject .sitemap__page-subtitle,
  .sitemap__page--subject a,
  .sitemap__page .button--chat,
  .page-header__title-subtext,
  .character-header__menu,
  .fa-chevron-right::before,
  .fa-sitemap::before,
  .fa-house-chimney::before,
  .navigation-shortcut[data-count="0"] span,
  .sitemap__page a,
  .sitemap__section-header--subsection,
  .fa-arrow-circle-left::before,
  .fa-arrow-circle-right::before,
  .components-list__item::after,
  .user-summary a,
  div.chart,
  .alert-info{
    color: var(--EDI-text-color);
    text-shadow: none;
  }

  .dashboard .forum-topics-list h3.small-caps.invert div.heading-symbol {
    border-color: var(--EDI-text-color);
  }

  .alert-info {
    background-color: var(--ED-alert);
  }

  .alert-close {
    color: var(--EDI-text-color);
    opacity: 1;
  }

  /*************************************************************************************************
  * Dashboard page specifics
  /*************************************************************************************************/

  /* rmoving scroll bar*/
  .dashboard .progress-and-forecast .wk-panel--review-forecast .wk-panel__content {
    overflow-y: hidden;
  }

  .review-forecast__toggleicon {
    color: var(--ED-brand);
  }

  .sitemap__pages--levels .sitemap__page a:hover {
    color: var(--ED-text-inv);
    background-color: var(--ED-surface-inv);
  }

  .extra-study-button {
    border-color: var(--ED-brand);
    border-radius: 0.5em;
  }

  .extra-study-button__link:hover {
    color: var(--ED-text-hl);
  }

  .kotoba-table-list table tr.none-available {
    background-color: var(--ED-surface-3);
    color: var(--EDI-text-color);
    text-shadow: none;
  }

  table:has(.none-available) + .see-more a.small-caps {
    display: none;
  }

  table:has(.none-available) + div.see-more {
    padding: 7.5px 30px;
    background-color: var(--ED-surface-3) !important;
  }

  .sitemap__expandable-chunk,
  .review-forecast__day,
  .bg-white {
    background-color: var(--ED-surface-3);
  }

  .sitemap__grouped-pages > .sitemap__page > a,
  .navigation__toggle[data-expanded="true"] {
    background-color: var(--ED-surface-3);
  }

  .extra-study,
  .dashboard section.forecast,
  .dashboard section.dashboard-progress,
  .recent-unlocks > h3,
  .see-more > a,
  .dashboard-sub-section h3 {
    background-color: var(--ED-surface-2);
  }

  .extra-study img,
  .review-forecast__empty-image,
  .none-available div {
    filter: var(--ED-extra-study-filter);
  }

  .review-forecast__day-header::before {
    background-color: var(--ED-surface-2);
  }

  .logo,
  .logo:active,
  .logo:focus {
    filter: var(--ED-logo-filter);
  }

  #query {
    background-color: var(--ED-surface-1);
    color: var(--EDI-text-color);
  }

  .progress-bar {
    background-color: var(--ED-surface-3);
  }

  .progress-bar .progress-bar__progress {
    background-color: var(--ED-progress);
    background-image: none;
  }

  .bg-gray-500 {
    background-color: var(--ED-brand);
  }

  .sitemap__expandable-chunk--levels::before {
    background-color: var(--ED-surface-inv);
  }

  .sitemap__pages--radical > .sitemap__page--subject,
  .sitemap__section-header--radicals:hover,
  .sitemap__section-header--radicals[data-expanded="true"],
  .sitemap__section-header--radicals:active,
  .sitemap__section-header--radicals:focus,
  .sitemap__section--open .sitemap__section-header--radicals {
    border-color: var(--ED-radical) !important;
  }

  .sitemap__pages--radical li > a:hover,
  .sitemap__expandable-chunk--radicals::before {
    background-color: var(--ED-radical);
  }

  .sitemap__pages--kanji > .sitemap__page--subject,
  .sitemap__section-header--kanji:hover,
  .sitemap__section-header--kanji[data-expanded="true"],
  .sitemap__section-header--kanji:active,
  .sitemap__section-header--kanji:focus,
  .sitemap__section--open .sitemap__section-header--kanji {
    border-color: var(--ED-kanji) !important;
  }

  .sitemap__pages--kanji li > a:hover,
  .sitemap__expandable-chunk--kanji::before {
    background-color: var(--ED-kanji);
  }

  .sitemap__pages--vocabulary > .sitemap__page--subject,
  .sitemap__section-header--vocabulary:hover,
  .sitemap__section-header--vocabulary[data-expanded="true"],
  .sitemap__section-header--vocabulary:active,
  .sitemap__section-header--vocabulary:focus,
  .sitemap__section--open .sitemap__section-header--vocabulary {
    border-color: var(--ED-vocab) !important;
  }

  .sitemap__pages--vocabulary li > a:hover,
  .sitemap__expandable-chunk--vocabulary::before {
    background-color: var(--ED-vocab);
  }

  body > footer {
    filter: var(--ED-footer-filter);
  }

  footer ul {
    filter: var(--ED-footer-filter);
  }
  footer ul li:last-child {
    filter: hue-rotate(50deg) grayscale(0.75) brightness(2.2);
  }

  .review-forecast__bar,
  .dashboard section.newbie {
    background-color: var(--ED-brand);
  }

  .border-blue-300 {
    border-color: var(--ED-brand);
  }

  .lessons-and-reviews__lessons-button {
    --ED-button-fg: var(--EDI-text-color);
    --ED-button-bg: var(--ED-lesson);
    background-color: var(--ED-button-bg);
    color: var(--ED-button-fg);
  }

  .lessons-and-reviews__lessons-button span {
    /* count badge inverts fg/bg */
    background-color: var(--ED-button-fg);
    color: var(--ED-button-bg);
  }

  .lessons-and-reviews .lessons-and-reviews__lessons-button--0 {
    /* No lessons, no color */
    --ED-button-fg: var(--EDI-text-color);
    --ED-button-bg: var(--ED-surface-4);
  }

  .lessons-and-reviews__reviews-button {
    --ED-button-fg: var(--EDI-text-color);
    --ED-button-bg: var(--ED-review);
    background-color: var(--ED-button-bg);
    color: var(--ED-button-fg);
  }

  .lessons-and-reviews__reviews-button span {
    /* count badge inverts fg/bg */
    background-color: var(--ED-button-fg);
    color: var(--ED-button-bg);
  }

  .lessons-and-reviews .lessons-and-reviews__reviews-button--0 {
    /* No reviews, no color */
    --ED-button-fg: var(--EDI-text-color);
    --ED-button-bg: var(--ED-surface-4);
  }

  .lessons-and-reviews__lessons-button:hover,
  .lessons-and-reviews__lessons-button:active,
  .lessons-and-reviews__lessons-button:focus,
  .lessons-and-reviews__reviews-button:hover,
  .lessons-and-reviews__reviews-button:active,
  .lessons-and-reviews__reviews-button:focus {
    color: var(--ED-text-hl);
  }

  .dashboard section.newbie,
  .dashboard section.dashboard-progress,
  .dashboard section.forecast,
  .progress-entry .kanji-icon,
  .progress-entry .radical-icon,
  .progress-entry .vocabulary-icon,
  .dashboard section.dashboard-sub-section div.see-more,
  .small-caps.invert {
    border: 0px;
    box-shadow: 0 0px;
  }

  .dashboard section.newbie hr {
    border-color: var(--ED-brand);
  }

  section.srs-progress ul li:first-child,
  section.srs-progress ul li:nth-child(2),
  section.srs-progress ul li:nth-child(3),
  section.srs-progress ul li:nth-child(4),
  section.srs-progress ul li:nth-child(5),
  .progress-entry .kanji-icon,
  .progress-entry .radical-icon,
  .progress-entry .vocabulary-icon,
  .forum-topics-list a.small-caps {
    background-image: none;
  }

  section.srs-progress,
  section.srs-progress span {
    color: var(--EDI-text-color);
  }

  .radical-icon--locked,
  .kanji-icon--locked,
  .subject-character--small.subject-character--locked .subject-character__characters {
    background-color: var(--ED-surface-4) !important;
    filter: var(--ED-locked-item-filter);
    background-image: none;
  }

  .kotoba-table-list table a span,
  .kotoba-table-list table a time,
  .kotoba-table-list table td span.pull-right,
  .vocabulary-icon,
  .kanji-icon,
  .radical-icon {
    color: var(--EDI-text-color);
  }

  .kotoba-table-list tr[class|="radical"],
  .kotoba-table-list tr[class|="kanji"],
  .kotoba-table-list tr[class|="vocabulary"] {
    background-image: none;
  }

  .kotoba-table-list tr[class|="radical"]:nth-child(odd),
  .kotoba-table-list tr[class|="kanji"]:nth-child(odd),
  .kotoba-table-list tr[class|="vocabulary"]:nth-child(odd) {
    filter: var(--ED-kotoba-odd-row-filter);
  }

  .kotoba-table-list tr[class|="radical"] {
    background-color: var(--ED-radical);
  }

  .kotoba-table-list tr[class|="kanji"] {
    background-color: var(--ED-kanji);
  }

  .kotoba-table-list tr[class|="vocabulary"] {
    background-color: var(--ED-vocab);
  }

  .small-caps.invert,
  .forum-topics-list table tbody tr td {
    box-shadow: none;
    background: none;
  }

  .forum-topics-list > h3.small-caps {
    background-color: var(--ED-surface-2);
    background-image: none;
  }

  .forum-topics-list table,
  .forum-topics-list table tbody tr {
    color: var(--EDI-text-color);
    background-color: var(--ED-surface-3);
  }

  .forum-topics-list table tbody tr:hover {
    background-color: var(--ED-surface-4);
  }

  /* Used in the newly absent community div */
  .heading-symbol {
    filter: brightness(0.86);
  }

  .small-caps {
    border-radius: 0 0 5px 5px;
  }

  /*
   * RRW Used in the community forum section, God only knows where else. Tightnen
   * the selector?
   */
  .text-blue-500:hover,
  .text-blue-500:active,
  .text-blue-500:focus,
  .forum-topics-list a:hover {
    color: var(--ED-text-hl);
    --tw-ring-color: var(--ED-text-hl);
  }

  .navigation-shortcut {
    background-image: none;
    border: none;
  }

  .navigation-shortcut a {
    border: 2px solid var(--ED-surface-4);
  }

  .navigation-shortcut a:hover {
    color: var(--ED-text-hl);
  }

  /* RRW De-emphasize counts if 0 in shortcut navigation to lessons/reviews in top nav  bar */
  .navigation-shortcut[data-count="0"] span,
  .navigation-shortcut[data-count="0"] .navigation-shortcut__count {
    background-color: var(--ED-surface-3);
    color: var(--ED-text-grayed);
  }

  /* RRW highlight the counts if work to do */
  .navigation-shortcut a span {
    background-color: var(--ED-review);
    color: var(--EDI-text-color);
  }
  .navigation-shortcut--lessons a span {
    background-color: var(--ED-lesson);
    color: var(--EDI-text-color);
  }

  .navigation-shortcut a:hover,
  .navigation-shortcut a:focus {
    border-color: var(--EDI-text-color);
  }

  @media screen and (min-width: 1024px) {
    .sitemap__section-header:hover,
    .sitemap__section-header:focus,
    #search__trigger:hover,
    #search__trigger:focus {
      border-color: var(--EDI-text-color);
    }
    .navigation-shortcut a span {
      z-index: -1;
    }
  }

  /* Popover when hovering over appr/guru/master/enl stage counts */
  .popover.srs .popover-content ul li {
    background-image: none !important;
    border: none !important;
    color: var(--EDI-text-color)
  }
  .popover.srs .popover-content ul li:nth-child(1) {
    background-color: var(--ED-radical);
  }
  .popover.srs .popover-content ul li:nth-child(2) {
    background-color: var(--ED-kanji) !important;
  }
  .popover.srs .popover-content ul li:nth-child(3) {
    background-color: var(--ED-vocab) !important;
  }

  .popover.srs {
    border-color: var(--ED-surface-3);
  }

  .popover.srs.right .arrow::after {
    border-right-color: var(--ED-surface-3);
  }

  .popover.srs .popover-title {
    background-color: var(--ED-surface-2);
  }

  .progress-entry .radical-icon {
    background-color: var(--ED-radical);
  }

  .progress-entry .kanji-icon,
  .popover.srs .popover-content ul li:nth-child(2) {
    background-color: var(--ED-kanji);
    background-image: none;
    border: none;
  }

  .progress-entry .vocabulary-icon,
  .popover.srs .popover-content ul li:last-child {
    background-color: var(--ED-vocab);
    background-image: none;
    border: none;
  }

  section.srs-progress ul li:nth-child(1) {
    background-color: var(--ED-apprentice);
  }

  section.srs-progress ul li:nth-child(2) {
    background-color: var(--ED-guru);
  }

  section.srs-progress ul li:nth-child(3) {
    background-color: var(--ED-master);
  }

  section.srs-progress ul li:nth-child(4) {
    background-color: var(--ED-enlightened);
  }

  section.srs-progress ul li:last-child {
    background-color: var(--ED-burned);
  }

  /* Guru progress indicators under indiviual items */
  .bg-green {
    background-color: var(--ED-progress);
  }

  .community-banner {
    background-color: var(--ED-surface-2);
    border: none;
  }

  .community-banner__title {
    text-shadow: none;
  }

  /*************************************************************************************************/
  /* Review & lesson summary pages
  /* TODO: summary pages have been removed -- determine if we can remove any/all
  /* of these rules
  /*************************************************************************************************/

  /* Sticky header */
  #reviews-summary .pure-g-r:first-child,
  #lessons-summary .pure-g-r:first-child {
    padding: 0 0 10px;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  #reviews-summary header,
  #lessons-summary header {
    background-color: var(--ED-surface-2);
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ED-surface-4);
    margin-bottom: 3rem;
  }

  #reviews-summary header nav,
  #lessons-summary header nav {
    position: relative;
    border: none;
    margin: 0;
    padding: 0 20px 0;
  }

  #reviews-summary header h1,
  #lessons-summary header h1 {
    padding: 0 0 0 20px;
  }

  #reviews-summary header nav #back-dashboard,
  #lessons-summary header nav #back-dashboard {
    background-color: var(--ED-progress);
    box-shadow: none;
  }

  #reviews-summary header nav #back-dashboard:hover,
  #lessons-summary header nav #back-dashboard:hover {
    background-color: var(--ED-progress);
    filter: brightness(0.8);
  }

  #reviews-summary header nav #start-session a.disabled,
  #lessons-summary header nav #start-session a.disabled {
    background-color: var(--ED-surface-2);
  }

  #reviews-summary header nav #start-session a {
    background-color: var(--ED-review);
  }

  #reviews-summary header nav #start-session a:hover {
    background-color: var(--ED-review);
    filter: brightness(0.8);
  }

  #lessons-summary header nav #start-session a {
    background-color: var(--ED-lesson);
  }

  #lessons-summary header nav #start-session a:hover {
    background-color: var(--ED-lesson);
    filter: brightness(0.8);
  }

  #reviews-summary header nav #start-session a:hover.disabled,
  #lessons-summary header nav #start-session a:hover.disabled {
    background-color: var(--ED-surface-2);
  }

  #lessons .font-lessons textarea {
    background-color: var(--ED-surface-3);
  }

  /* RRW answered incorrectly headers */
  #reviews-summary #incorrect h2 {
    background-color: var(--ED-incorrect);
  }

  #lessons-summary #radicals h2 {
    background-color: var(--ED-radical);
  }

  #lessons-summary #kanji h2 {
    background-color: var(--ED-kanji);
  }

  #lessons-summary #vocabulary h2 {
    background-color: var(--ED-vocab);
  }

  /* RRW answered correctly headers */
  #reviews-summary #correct h2 {
    background-color: var(--ED-correct);
  }

  #reviews-summary #review-stats [id*="review-stats-"],
  #reviews-summary #incorrect,
  #reviews-summary #correct,
  #reviews-summary #correct .apprentice h3 span,
  #reviews-summary #incorrect .apprentice h3 span,
  #reviews-summary #correct .apprentice h3 strong,
  #reviews-summary #incorrect .apprentice h3 strong,
  #reviews-summary #correct .guru h3 strong,
  #reviews-summary #incorrect .guru h3 strong,
  #reviews-summary #correct .guru h3 span,
  #reviews-summary #incorrect .guru h3 span,
  #reviews-summary #correct .master h3 strong,
  #reviews-summary #incorrect .master h3 strong,
  #reviews-summary #correct .master h3 span,
  #reviews-summary #incorrect .master h3 span,
  #reviews-summary #correct .enlightened h3 strong,
  #reviews-summary #incorrect .enlightened h3 strong,
  #reviews-summary #correct .enlightened h3 span,
  #reviews-summary #incorrect .enlightened h3 span,
  #reviews-summary #correct .burned h3 strong,
  #reviews-summary #incorrect .burned h3 strong,
  #reviews-summary #correct .burned h3 span,
  #reviews-summary #incorrect .burned h3 span {
    background-color: var(--ED-surface-2);
  }

  #reviews-summary #review-stats [id*="review-stats-"],
  #reviews-summary #incorrect,
  #reviews-summary #correct,
  #reviews-summary #correct .apprentice > ul > li,
  #reviews-summary #incorrect .apprentice > ul > li,
  #reviews-summary #correct .apprentice h3 span,
  #reviews-summary #incorrect .apprentice h3 span,
  #reviews-summary #correct .guru > ul > li,
  #reviews-summary #incorrect .guru > ul > li,
  #reviews-summary #correct .guru h3 span,
  #reviews-summary #incorrect .guru h3 span,
  #reviews-summary #correct .master > ul > li,
  #reviews-summary #incorrect .master > ul > li,
  #reviews-summary #correct .master h3 span,
  #reviews-summary #incorrect .master h3 span,
  #reviews-summary #correct .enlightened > ul > li,
  #reviews-summary #incorrect .enlightened > ul > li,
  #reviews-summary #correct .enlightened h3 span,
  #reviews-summary #incorrect .enlightened h3 span,
  #reviews-summary #correct .burned > ul > li,
  #reviews-summary #incorrect .burned > ul > li,
  #reviews-summary #correct .burned h3 span,
  #reviews-summary #incorrect .burned h3 span,
  #reviews-summary footer #last-session-date,
  #reviews-summary footer #copyright,
  #lessons-summary #radicals,
  #lessons-summary #kanji,
  #lessons-summary #vocabulary,
  #lessons-summary footer #last-session-date,
  #lessons-summary #kanji > div > ul > li.kanji,
  #lessons-summary #radicals > div > ul > li.radicals,
  #lessons-summary #vocabulary > div > ul > li.vocabulary {
    box-shadow: none;
    color: var(--EDI-text-color);
    text-shadow: none;
  }

  /* prettier-ignore */
  #reviews-summary #review-stats [class*="pure-u-"]:first-child [id*="review-stats-"] {
    background-color: var(--ED-surface-inv); /* light background */
    --EDI-text-color: var(--ED-text-inv);
    color: var(--EDI-text-color);
  }

  /* prettier-ignore */
  #reviews-summary #review-stats [class*="pure-u-"]:first-child [id*="review-stats-"]::after {
    border-color: transparent transparent transparent var(--ED-surface-inv);
  }

  #lessons-summary #radicals > div > ul > li.radicals,
  #reviews-summary #correct .apprentice > ul > li.radicals,
  #reviews-summary #incorrect .apprentice > ul > li.radicals,
  #reviews-summary #correct .guru > ul > li.radicals,
  #reviews-summary #incorrect .guru > ul > li.radicals,
  #reviews-summary #correct .master > ul > li.radicals,
  #reviews-summary #incorrect .master > ul > li.radicals,
  #reviews-summary #correct .enlightened > ul > li.radicals,
  #reviews-summary #incorrect .enlightened > ul > li.radicals,
  #reviews-summary #correct .burned > ul > li.radicals,
  #reviews-summary #incorrect .burned > ul > li.radicals,
  .search-results li[class^="radical-"] a {
    background-color: var(--ED-radical);
    background-image: none;
  }

  #lessons-summary #kanji > div > ul > li.kanji,
  #reviews-summary #correct .apprentice > ul > li.kanji,
  #reviews-summary #incorrect .apprentice > ul > li.kanji,
  #reviews-summary #correct .guru > ul > li.kanji,
  #reviews-summary #incorrect .guru > ul > li.kanji,
  #reviews-summary #correct .master > ul > li.kanji,
  #reviews-summary #incorrect .master > ul > li.kanji,
  #reviews-summary #correct .enlightened > ul > li.kanji,
  #reviews-summary #incorrect .enlightened > ul > li.kanji,
  #reviews-summary #correct .burned > ul > li.kanji,
  #reviews-summary #incorrect .burned > ul > li.kanji,
  .search-results li[class^="kanji-"] a {
    background-color: var(--ED-kanji);
    background-image: none;
  }

  #lessons-summary #vocabulary > div > ul > li.vocabulary,
  #reviews-summary #correct .apprentice > ul > li.vocabulary,
  #reviews-summary #incorrect .apprentice > ul > li.vocabulary,
  #reviews-summary #correct .guru > ul > li.vocabulary,
  #reviews-summary #incorrect .guru > ul > li.vocabulary,
  #reviews-summary #correct .master > ul > li.vocabulary,
  #reviews-summary #incorrect .master > ul > li.vocabulary,
  #reviews-summary #correct .enlightened > ul > li.vocabulary,
  #reviews-summary #incorrect .enlightened > ul > li.vocabulary,
  #reviews-summary #correct .burned > ul > li.vocabulary,
  #reviews-summary #incorrect .burned > ul > li.vocabulary,
  .search-results li[class^="vocabulary-"] a {
    background-color: var(--ED-vocab);
    background-image: none;
  }

  /* SEP Is removing the text/box shadow necessary here? */
  #reviews-summary #correct .apprentice > ul > li.kanji,
  #reviews-summary #correct .apprentice > ul > li.radical,
  #reviews-summary #correct .apprentice > ul > li.vocabulary,
  #reviews-summary #incorrect .apprentice > ul > li.radical,
  #reviews-summary #incorrect .apprentice > ul > li.kanji,
  #reviews-summary #incorrect .apprentice > ul > li.vocabulary {
    text-shadow: none;
    box-shadow: none;
    color: var(--EDI-text-color);
  }

  /* Search result borders */
  .search-results ul.multi-character-grid li[class^="radical-"],
  .search-results ul.multi-character-grid li[class^="kanji-"],
  .search-results ul.multi-character-grid li[class^="vocabulary-"] {
    border-bottom: 2px solid var(--ED-surface-1);
    border-top: transparent;
  }

  /* Summary statistics containers on lesson summary pages (might be empty) */
  #lessons-summary #radicals > div,
  #lessons-summary #kanji > div,
  #lessons-summary #vocabulary > div {
    background-color: var(--ED-surface-2);
  }

  /*************************************************************************************************/
  /* Individual review/lesson pages
  /*************************************************************************************************/

  /* RRW Freaky! X-ray Wanikani! (loading image) */
  #loading,
  #additional-content-load,
  #loading-screen,
  #review-forecast:not([complete=""]),
  #subject-info:not([data-loaded="true"]) {
    filter: var(--ED-loading-filter);
  }

  .additional-content__item:not(.additional-content__item--disabled),
  .additional-content__content{
    border-color: var(--EDI-text-color);
  }

  .additional-content__item--open::after,
  .subject-slides__navigation-link[aria-selected="true"]::after {
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) var(--EDI-text-color) rgba(0,0,0,0);
  }

  #progress-bar,
  .user-synonyms ul li.user-synonyms-add-btn::before,
  #lesson #supplement-nav,
  .bg-gray-400, /* ugh */
  .user-synonyms ul li.user-synonyms-add-form form button {
    background-color: var(--ED-surface-2);
  }

  #reviews #progress-bar,
  #lessons #progress-bar,
  #lessons #progress-bar #bar {
    height: 10px;
  }

  .quiz-progress__bar {
    background-color: var(--ED-progress);
  }

  /* Header/prompt with e.g. "Vocabulary **Reading**" */
  #question #question-type.meaning,
  #question #question-type.reading,
  #quiz #question-type.meaning,
  #quiz #question-type.reading,
  .quiz-input__question-type-container[data-question-type="reading"],
  .quiz-input__question-type-container {
    background-color: var(--ED-surface-2);
    background-image: none;
    text-shadow: none;
    border: none;
  }

  #question #question-type.meaning,
  #quiz #question-type.meaning,
  .quiz-input__question-type-container[data-question-type="meaning"],
 .quiz-input__question-type-container[data-question-type="meaning"] > span {
    background-color: var(--ED-surface-inv);
    background-image: none;
    text-shadow: none;
    color: var(--ED-text-inv);
    border:none;
  }

  .subject-collocations__pattern-name {
	  background-color: var(--ED-surface-4);
  }

  #question #question-type h1,
  .wk-nav__item-link,
  .wk-nav__item-link:visited,
  .character-header__content {
    color: var(--EDI-text-color);
  }

  #item-info #related-items ul,
  .wk-nav__item-link{
    background-color: var(--ED-surface-2);
  }

  #question #character.radical,
  .highlight-radical,
  .radical,
  header #main-info.radical,
  #lesson #supplement-info .radical,
  #item-info #related-items ul.radical span,
  .character-header--radical {
    background-color: var(--ED-radical);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
  }

  #lessons #stats ul li span.radical {
    color: var(--ED-radical);
  }

  #question #character.kanji,
  .highlight-kanji,
  .kanji,
  header #main-info.kanji,
  #lesson #supplement-info .kanji,
  #item-info #related-items ul.kanji span,
  .character-header--kanji {
    background-color: var(--ED-kanji);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
  }

  #lessons #stats ul li span.kanji {
    color: var(--ED-kanji);
  }

  #question #character.vocabulary,
  .highlight-vocabulary,
  .vocabulary,
  header #main-info.vocabulary,
  #lesson #supplement-info .vocabulary,
  #item-info #related-items ul.vocabulary span,
  .character-header--vocabulary {
    background-color: var(--ED-vocab);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
  }

  #lessons #stats ul li span.vocabulary {
    color: var(--ED-vocab);
  }

  header #main-info.radical #character,
  header #main-info.radical #meaning,
  #lesson #supplement-info .radical,
  header #main-info.kanji #character,
  header #main-info.kanji #meaning,
  #lesson #supplement-info .kanji,
  header #main-info.vocabulary #character,
  header #main-info.vocabulary #meaning,
  #lesson #supplement-info .vocabulary,
  header.quiz #main-info.vocabulary #character,
  header.quiz #main-info.kanji #character,
  header.quiz #main-info.radical #character,
  #lesson #supplement-nav,
  #lesson #supplement-info,
  #lesson #supplement-info #supplement-kan-breakdown ul li div,
  #lesson #supplement-info h2,
  #lesson #supplement-info #supplement-kan-related-vocabulary ul li div,
  .text-gray-900,
  #answer-exception span,
  #item-info #related-items a:visited,
  #item-info #related-items a,
  .user-synonyms ul li.user-synonyms-add-form form input,
  #lesson #supplement-info #supplement-voc-breakdown ul li div,
  #lesson #supplement-info #supplement-rad-related-kanji div {
    text-shadow: none;
    box-shadow: none;
    color: var(--EDI-text-color);
  }

  #item-info #related-items ul.radical span,
  .reading-highlight {
    text-shadow: none;
    box-shadow: none;
  }

  /* Upward pointing triangle nav indicator */
  #lesson #supplement-nav ul li.active::before {
    border-color: transparent transparent var(--ED-surface-2) transparent;
  }

  #lesson #supplement-info,
  #quiz {
    background-color: var(--ED-surface-1);
    background-image: none;
  }

  #quiz .bg-gray-300 {
    background-color: var(--ED-surface-3);
  }

  #quiz .bg-gray-300:hover {
    --EDI-text-color: var(--ED-text-inv);
    background-color: var(--ED-surface-inv);
  }

  #lesson #supplement-info {
    background-color: var(--ED-surface-2);
    background-image: none;
  }

  #answer-form input[type="text"] {
    box-shadow: none;
    color: var(--EDI-text-color);
    text-shadow: none;
    height: 72px;
    background-color: var(--ED-surface-4);
  }

  #answer-form button,
  #lesson #supplement-info blockquote,
  #answer-exception span,
  #item-info #all-info,
  #item-info blockquote,
  [class^="note-"] form fieldset button[type="submit"],
  [class^="note-"] form fieldset button,
  .user-synonyms ul li.user-synonyms-add-form form input {
    background-color: var(--ED-surface-3);
    color: var(--EDI-text-color);
  }

  #answer-exception span::before {
    border-color: transparent transparent var(--ED-surface-4) transparent;
  }

  .subject-collocations__pattern-name[aria-selected="true"]::after{
    background-color: var(--EDI-text-color);
  }

  .answer-exception,
  .quiz-input__exception {
    background-color: var(--ED-surface-3);
    color: var(--EDI-text-color);
    text-shadow: none;
    box-shadow: none;
  }

  #additional-content ul li.active i,
  #information,
  .additional-content__item {
    background-color: var(--ED-surface-2);
    box-shadow: none;
    color: var(--EDI-text-color);
    line-height: 1;
  }

  #additional-content ul li:not(#option-audio) span:hover::before,
  #kana-chart.legacy ul li:not(.empty):hover,
  [class^="note-"] form fieldset,
  .kana-chart__character,
  .kana-chart__backspace {
    background-color: var(--ED-surface-3);
    box-shadow: none;
    text-shadow: none;
    color: var(--EDI-text-color);
  }

  /* reading highlights present on some item pages and lessons/reviews */
  .highlight-reading,
  .highlight-reading > span,
  .reading-highlight,
  .bg-\[\#f1d6ff\],
  .bg-\[\#f8d8ef\],
  .bg-\[\#d6f1ff\] {
    background-color: var(--EDI-text-color);
    color: var(--ED-surface-2);
    text-shadow: none;
    font-weight: bold;
    background-image: none;
  }

  #information {
    margin: 0px 10px 10px 10px;
  }

  #additional-content ul li.active::before {
    border-color: transparent transparent var(--ED-surface-2);
  }

  #lesson #supplement-nav ul li:hover:not(.active)::before {
    border-color: transparent transparent var(--ED-surface-2);
  }

  #kana-chart.legacy ul li span {
    color: var(--EDI-text-color);
  }

  #additional-content ul li span:hover {
    color: var(--ED-surface-1);
  }

  .menu-bar,
  .note-meaning,
  #item-info #item-info-col1 section {
    font-size: 16px;
  }

  #answer-form fieldset {
    position: relative;
    margin-bottom: 0;
    padding: 10px;
    border: 1px solid var(--ED-surface-3);
  }

  #answer-form fieldset.correct button,
  #answer-form fieldset.correct input[type="text"],
  #answer-form fieldset.correct input[type="text"]:disabled {
    background-color: var(--ED-correct) !important;
  }

  #answer-form fieldset.incorrect button,
  #answer-form fieldset.incorrect input[type="text"],
  #answer-form fieldset.incorrect input[type="text"]:disabled {
    background-color: var(--ED-incorrect) !important;
  }

  .srs .srs-apprentice {
    background-color: var(--ED-apprentice);
    color: var(--EDI-text-color);
  }

  .srs .srs-guru {
    background-color: var(--ED-guru);
    color: var(--EDI-text-color);
  }

  .srs .srs-master {
    background-color: var(--ED-master);
    color: var(--EDI-text-color);
  }

  .srs .srs-englightened {
    background-color: var(--ED-enlightened);
    color: var(--EDI-text-color);
  }

  /* Kanachart in lessons */

  .kana-chart-tab__backspace,
  #kana-chart .kana-chart-a > button,
  #kana-chart .kana-chart-k > button,
  #kana-chart .kana-chart-s > button,
  #kana-chart .kana-chart-t > button,
  #kana-chart .kana-chart-h > button,
  #kana-chart .kana-chart-n > button,
  #kana-chart .kana-chart-m > button,
  #kana-chart .kana-chart-r > button,
  #kana-chart .kana-chart-x > button {
    color: var(--EDI-text-color);
    background: var(--ED-surface-3);
  }

  .kana-chart-tab__backspace:hover,
  #kana-chart .kana-chart-a > button:hover,
  #kana-chart .kana-chart-k > button:hover,
  #kana-chart .kana-chart-s > button:hover,
  #kana-chart .kana-chart-t > button:hover,
  #kana-chart .kana-chart-h > button:hover,
  #kana-chart .kana-chart-n > button:hover,
  #kana-chart .kana-chart-m > button:hover,
  #kana-chart .kana-chart-r > button:hover,
  #kana-chart .kana-chart-x > button:hover {
    color: var(--ED-text-inv);
    background: var(--ED-surface-inv);
  }

  .kana-chart-tabs > button {
    color: var(--EDI-text-color);
  }

  /* overlay message */

  .screen-overlay--background,
  .dashboard section.system-alert {
    background-color: var(--ED-alert);
    background-image: none;
  }

  .dashboard section.system-alert {
    box-shadow: none;
    border: none;
    color: var(--EDI-text-color);
  }

  .dashboard section.system-alert time,
  .dashboard section.system-alert a,
  .dashboard section.system-alert h3 {
    color: var(--EDI-text-color);
    text-shadow: none;
    opacity: 1;
  }

  .screen-overlay-with-box img,
  .screen-overlay-with-box .btn-set li.dominant a {
    filter: var(--ED-overlay-box-highlights-filter);
  }
  .screen-overlay-with-box .btn-set li.dominant a,
  .screen-overlay-with-box .icon-close,
  .screen-overlay-with-box .btn-set li a {
    filter: var(--ED-overlay-box-highlights-filter) grayscale(0.4);
  }

  section#related-items > .radical {
    background-color: var(--ED-surface-2);
  }

  /* "Last" section when opened */

  #information .last-item {
    background-color: var(--ED-surface-4);
  }

  #information .last-item__label,
  #information .last-item__srs-level {
    color: var(--ED-text-grayed);
  }

  #information .last-item__value {
    color: var(--EDI-text-color);
  }

  #information .last-item__characters {
    color: var(--EDI-text-color);
  }

  #information .last-item .last-item__characters--radical {
    background-color: var(--ED-radical);
  }

  #information .last-item .last-item__characters--kanji {
    background-color: var(--ED-kanji);
  }

  #information .last-item .last-item__characters--vocab {
    background-color: var(--ED-vocab);
  }

  /* Item stage movement indicators */
  .srs .srs-up {
    color: var(--EDI-text-color);
  }
  .srs .srs-down {
    color: var(--ED-text-grayed);
  }
  .srs .srs-apprentice {
    background-color: var(--ED-apprentice);
  }
  .srs .srs-guru {
    background-color: var(--ED-guru);
  }
  .srs .srs-master {
    background-color: var(--ED-master);
  }
  .srs .srs-enlighten {
    background-color: var(--ED-enlightened);
  }
  .srs .srs-burn {
    background-color: var(--ED-burned);
  }

  .character-item--burned {
    box-shadow: none;
    color: var(--ED-text-grayed);
  }

  .subject-slide {
    background-color: var(--color-subject-slide-navigation-background);
    box-shadow: none;
    border: none;
  }

  .subject-character--radical .subject-character__characters {
    background-color: var(--ED-radical);
    background-image: none;
    color: var(--EDI-text-color);
  }

  .subject-character--kanji .subject-character__characters {
    background-color: var(--ED-kanji);
    background-image: none;
    color: var(--EDI-text-color);
  }

  .subject-character--vocabulary .subject-character__characters {
    background-color: var(--ED-vocab);
    background-image: none;
    color: var(--EDI-text-color);
  }

  .hotkeys-menu__header,
  .chat-button {
    background-color: var(--ED-surface-4);
    color: var(--EDI-text-color);
    border-radius: 0;
  }

  .subject-character__meaning {
    text-shadow: none;
    color: var(--EDI-text-color);
  }

  .subject-character--small .subject-character__characters {
    box-shadow: none;
  }

  .subject-character--tiny .subject-character__characters {
    box-shadow: none;
  }

  .subject-character__characters {
    text-shadow: none;
  }

  .character-header--radical .character-header__meaning {
    text-shadow: none;
  }
  /*************************************************************************************************/
  /* Levels page
  /*************************************************************************************************/

  .subject-legend,
  .subject-legend__item-badge--locked,
  .subject-legend__item-badge--all,
  .subject-legend__item-badge--burned,
  .character-grid__header,
  .page-nav__item-link,
  .subject-legend__item-badge--radicals,
  .subject-legend__item-badge--kanji,
  .subject-legend__item-badge--vocabulary,
  .character-item {
    color: var(--EDI-text-color);
    text-shadow: none;
    box-shadow: none;
  }

  .subject-legend__item-badge--radicals {
    background-color: var(--ED-radical);
  }

  .subject-legend__item-badge--kanji {
    background-color: var(--ED-kanji);
  }

  .subject-legend__item-badge--vocabulary {
    background-color: var(--ED-vocab);
  }

  .subject-legend__item-badge--burned {
    background-color: var(--ED-burned);
  }

  .subject-legend,
  .character-grid__header,
  .page-nav__item-link {
    background-color: var(--ED-surface-2);
  }

  .page-nav__item-link {
    border-color: var(--ED-surface-2);
  }

  .subject-legend__item-badge--recently-unlocked,
  .component-character__badge,
  .character-item__badge {
    background-color: var(--ED-brand);
  }

  .component-character__badge,
  .character-item__badge {
    box-shadow: 0px 0px 5px var(--ED-surface-3);
  }

  /* Use kanji color for the "New" sample at top of page */
  .subject-legend__item-badge--all {
    background-color: var(--ED-kanji);
  }
  .subject-legend__item-badge--locked,
  .character-item--locked {
    filter: var(--ED-locked-item-filter);
  }

  .character-item--kanji {
    background-color: var(--ED-kanji);
    border-color: var(--EDI-gray-3);
  }

  #additional-content .character-item--kanji span {
    background-color: var(--ED-kanji);
  }

  .character-item--kanji:not(.character-item--locked) {
    background-color: var(--ED-kanji);
    background-image: none;
  }

  .character-item--radical {
    background-color: var(--ED-radical);
    border-color: var(--EDI-gray-3);
  }

  .character-item--radical:not(.character-item--locked) {
    background-color: var(--ED-radical);
    background-image: none;
  }

  .character-item--vocabulary {
    background-color: var(--ED-vocab);
    border-color: var(--ED-surface-3);
  }

  .character-item--vocabulary:not(.character-item--locked) {
    background-color: var(--ED-vocab);
    background-image: none;
  }

  .progress-bar__label {
    box-shadow: none;
  }

  .progress-bar__bar {
    background-color: var(--ED-progress);
    background-image: none;
  }

  .character-grid .progress-bar__label,
  .subject-progress .progress-bar__label {
    background-color: var(--ED-surface-4);
  }

  .progress-bar__label::after,
  .progress-bar__label::before {
    border-top-color: var(--ED-surface-4);
  }

  .subject-legend__item-badge--recently-unlocked,
  .character-grid__item--radical .character-item__badge,
  .character-grid__item--kanji .character-item__badge,
  .character-grid__item--vocabulary .character-item__badge {
    color: var(--ED-text-inv);
    font-weight: bold;
    text-shadow: none;
    box-shadow: none;
    background-color: var(--ED-surface-inv)
  }

  /*************************************************************************************************/
  /* Individual item page colors
  /*************************************************************************************************/

  .page-header__icon--level,
  .page-header__icon--radical,
  .page-header__icon--kanji,
  .page-header__icon--vocabulary,
  .subject-section__title,
  .subject-section__meanings-title,
  .user-synonyms__button,
  .radical-highlight,
  .kanji-highlight,
  .vocabulary-highlight,
  .subject-progress,
  .subject-progress__streak-title,
  .subject-hint__title,
  .subject-section__text,
  .user-note__button,
  .user-note__character-count,
  .user-note,
  #user_reading_note .user-note__input,
  .component-character__meaning,
  .component-character--radical .component-character__characters,
  .subject-readings-with-audio__item,
  .subject-collocations__pattern-collocation--selected,
  .text-black,
  .subject-section__subtitle,
  .subject-collocations__title {
    box-shadow: none;
    color: var(--EDI-text-color);
    text-shadow: none;
  }

  /* 
   * Make the meaning MUCH more visible when exposed
   */
  .subject-section__meanings{
    margin-bottom: 0.5em;
  }

  .wk-button--default {
    padding: 0.3em;
    border-radius: 0.3em;
    border-color: var(--EDI-text-color);
  }

  .subject-section__meanings-items,
  .reading-with-audio__reading {
    color: var(--ED-text-hl);
    font-size: 1.5rem;
    font-weight: bold;
  }

  .subject-section__meanings-title {
    font-size: 1.2rem;
  }

  .user-note__button:hover,
  .user-note__button:active,
  .user-note__button:focus {
    color: var(--ED-text-hl);
  }

  .page-header__icon--radical:hover,
  .page-header__icon--kanji:hover,
  .page-header__icon--vocabulary:hover {
    box-shadow: none;
  }

  .user-synonyms__button,
  .user-synonyms__form-input {
    background-color: var(--ED-surface-2);
    border: none;
  }

  .user-synonyms__button:hover {
    color: var(--ED-text-hl);
  }

  .user-synonyms__form-input:focus {
    outline: 3px solid var(--ED-text-hl);
  }

  .user-synonyms__item .user-synonym {
    background-color: var(--ED-surface-4);
  }

  /* SEP since its a close button, I opted to use a generic red instead of any semantic color */
  .user-synonyms__item .user-synonym i {
    background-color: var(--EDI-red);
  }

  .page-header__icon--level,
  .subject-progress__streak-value {
    background-color: var(--ED-surface-3);
    background-image: none;
  }

  .page-header__icon--radical,
  .radical-highlight,
  .component-character--radical .component-character__characters {
    background-color: var(--ED-radical);
    background-image: none;
  }

  .page-header__icon--kanji,
  .kanji-highlight {
    background-color: var(--ED-kanji);
    background-image: none;
  }

  .page-header__icon--vocabulary,
  .vocabulary-highlight {
    background-color: var(--ED-vocab);
    background-image: none;
  }

  .subject-hint {
    background-color: var(--ED-surface-3);
  }

  .user-note__input,
  .user-note__footer {
    background-color: var(--ED-surface-2);
    border: none;
  }

  #user_reading_note > .user-note__form {
    background-color: var(--ED-surface-2);
  }

  .fa-check::before {
    color: var(--EDI-text-color);
  }
  .none-available .fa-check::before {
    color: var(--ED-surface-1);
  }

  /* Context menu divider present on some vocab pages */
  .subject-collocations__patterns::after {
    box-shadow: none;
    right: -9px;
    background-color: var(--EDI-text-color);
    filter: brightness(0.85);
  }
  
  .subject-info .subject-collocations__pattern-name[aria-selected="true"]::after {
    background-color: var(--EDI-text-color);
  }

  .subject-collocations__pattern-name[aria-selected="true"]{
    background-color: var(--ED-surface-1);
    color: var(--EDI-text-color);
  }

  .subject-section__title {
    border-color: var(--EDI-text-color);
  }

  /* "Pattern of Use" separator - found in lessons/reviews of some words/kanji in dropdown boxes*/
  .word-types--with-collocations::after {
    box-shadow: none;
    background-color: var(--ED-surface-inv);
    left: calc(100% - 1px);
  }

  #supplement-voc-context .word-type__button--selected::after {
    background-color: var(--ED-surface-inv);
  }

  .subject-collocations__pattern-name--selected,
  .context__word-types .bg-gray-300,
  .context__word-types .bg-gray-300 > span {
    background-color: var(--ED-surface-3);
    color: var(--EDI-text-color);
  }

  /* Rex's additions to individual item pages */

  .page-header {
    background-color: var(--ED-surface-2);
    padding: 10px 20px 0;
  }

  .subject-section {
    background-color: var(--ED-surface-2);
    padding: 20px;
  }

  button.search__button {
    background-color: var(--ED-surface-inv);
    --EDI-text-color: var(--ED-text-inv);
    color: var(--EDI-text-color);
  }

  span.kanji-highlight,
  span.highlight-kanji,
  span.vocabulary-highlight,
  span.highlight-vocabulary {
    font-weight: normal;
    text-shadow: none !important;
  }

  /*************************************************************************************************/
  /* Contact us page
  /*************************************************************************************************/

  input[type="text"],
  form .control-group textarea {
    background-color: var(--ED-surface-2);
    border: none;
    box-shadow: none;
  }

  input.btn[type="submit"] {
    --EDI-text-color: var(--ED-text-inv);
  }

  input[type="text"],
  textarea,
  form label,
  input[type="file"],
  input[type="submit"] {
    color: var(--EDI-text-color);
    text-shadow: none;
  }

  input[type="text"]:focus,
  input[type="text"]:active,
  textarea:focus,
  textarea:active {
    outline: 3px solid var(--EDI-text-color);
  }

  /*************************************************************************************************/
  /* Profile page
  /*************************************************************************************************/

  html#public-profile .public-profile-header::before {
    background-color: transparent;
  }

  html#public-profile .public-profile-header div.avatar {
    border: 15px solid var(--ED-surface-2);
  }

  html#public-profile .public-profile-header div.user-info {
    background-color: var(--ED-surface-2);
    background-image: none;
    box-shadow: none;
  }

  /* sheesh. little itty-bitty triangle below profile pic */
  html#public-profile .public-profile-header div.user-info::after {
    border-bottom-color: var(--ED-surface-2);
  }

  html#public-profile .public-profile-header div.user-info h3.small-caps,
  /* prettier-ignore */
  html#public-profile .public-profile-header div.user-info div[class*="span"] ul li,
  html#public-profile div.wall-of-shame h3 span,
  .worst-kanji .progress .bar span,
  .worst-radical .progress .bar span,
  .worst-vocabulary .progress .bar span,
  html#public-profile div.wall-of-shame ul li > span:first-child {
    color: var(--EDI-text-color);
    text-shadow: none;
    box-shadow: none;
  }

  .kanji-icon,
  .radical-icon,
  .vocabulary-icon,
  .last-item,
  .subject-readings__reading-title {
    text-shadow: none;
    box-shadow: none;
  }

  .last-item {
    border: 1px solid var(--ED-surface-4);
  }

  html#public-profile div.wall-of-shame {
    background-color: var(--ED-surface-2);
  }

  html#public-profile div.wall-of-shame h3 span {
    background-color: var(--ED-surface-3);
  }

  .radical-icon {
    background-color: var(--ED-radical);
    background-image: none;
  }

  .kanji-icon {
    background-color: var(--ED-kanji);
    background-image: none;
  }

  .vocabulary-icon,
  #information .last-item > .last-item__characters--vocabulary {
    background-color: var(--ED-vocab);
    background-image: none;
  }

  html#public-profile div.wall-of-shame .progress,
  .kanji-progress .progress,
  .vocabulary-progress .progress {
    background-color: var(--ED-surface-3);
    background-image: none;
  }

  html#public-profile div.wall-of-shame .progress .bar,
  .kanji-progress .progress .bar,
  .vocabulary-progress .progress .bar {
    background-image: none;
    background-color: var(--ED-progress);
  }

  .progress .bar span {
    --EDI-text-color: var(--ED-text-inv);
    background-color: var(--ED-surface-inv);
    color: var(--EDI-text-color);
    box-shadow: none;
    text-shadow: none;
  }

  .progress .bar span:after {
    border-top-color: var(--ED-surface-inv);
  }

  .worst-kanji .progress .bar span,
  .worst-radical .progress .bar span,
  .worst-vocabulary .progress .bar span {
    background-color: var(--ED-surface-4);
    --EDI-text-color: var(--ED-text);
  }

  .worst-kanji .progress .bar span:after,
  .worst-radical .progress .bar span:after,
  .worst-vocabulary .progress .bar span:after {
    border-top-color: var(--ED-surface-4);
  }

  html#public-profile .public-profile-header div.user-info div[class*="span"] ul strong {
    color: var(--ED-text-hl);
  }

  /*************************************************************************************************/
  /* Settings page
  /*************************************************************************************************/

  .settings-section,
  .settings-section h2,
  .settings-section .btn,
  .page-list ul > li > a {
    box-shadow: none;
    text-shadow: none;
  }

  .settings-section,
  .page-list ul > li > a {
    background-color: var(--ED-surface-2);
  }

  .page-list ul {
    background-color: var(--ED-surface-1);
  }

  .page-list ul > li > a {
    border: none;
  }

  .settings-section aside,
  .settings-section .table td,
  #personal-access-tokens-list th,
  .personal-access-token-permissions__namespace-header,
  .personal-access-token-permission__description {
    color: var(--ED-text-grayed);
  }

  .page-list ul > li > a,
  .settings-section h2 {
    color: var(--EDI-text-color);
  }

  .account-settings form.form-auto-submit-on-select-change select,
  input[type="password"],
  .settings-section .btn,
  .settings-section select {
    background-color: var(--ED-surface-inv);
    --EDI-text-color: var(--ED-text-inv);
    background-image: none;
  }

  /* SEP using generic red a opposed to a semantic color to denote expire/reset WK buttons */
  .settings-section .btn-danger {
    --EDI-text-color: var(--ED-text);
    background-color: var(--EDI-red);
  }

  .settings-section .btn:hover,
  .settings-section .btn:focus {
    background-color: var(--EDI-yellow);
  }

  .settings-section .btn:active {
    background-color: var(--EDI-text-color);
    color: var(--EDI-gray-3);
  }

  .indicator--success {
    background-color: var(--ED-success);
  }

  /* Is this necessary? */
  .indicator {
    border-top: 0.5em solid rgba(255, 255, 255, 0.2);
    border-right: 0.5em solid rgba(255, 255, 255, 0.2);
    border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
    border-left: 0.5em solid rgba(255, 255, 255, 0.5);
  }

  .settings-section input[type="text"] {
    border: 1px solid var(--EDI-text-color);
    background-color: var(--ED-surface-inv);
    --EDI-text-color: var(--ED-text-inv);
  }

  .settings-section form .control-group textarea {
    border: 1px solid var(--ED-text-grayed);
  }

  /*************************************************************************************************/
  /* Subscription page
  /*************************************************************************************************/

  .account-billing .bg-gray-100 {
    background-color: var(--ED-surface-2);
  }

  .account-billing .bg-\[\#00aaff\] {
    background-color: var(--ED-brand);
  }

  .border-blue-300:hover,
  .border-blue-300:active,
  .border-blue-300:focus {
    border-color: var(--ED-brand);
  }

  .account-billing h2 {
    text-shadow: none;
    color: var(--EDI-text-color);
  }

  /*************************************************************************************************/
  /* Non-Wanikani styling. Currently just the Wanikani Open Framework settings 
  /*************************************************************************************************/

  #wkof_ds .ui-dialog,
  #wkof_ds .ui-widget,
  #wkof_ds .ui-widget-content {
    border: 1px solid var(--ED-surface-1, #151515);
    background-color: var(--ED-surface-2, #282828);
    color: var(--EDI-text-color, #eeeeee);
    background-image: none;
    box-shadow: none;
    text-decoration: none;
  }

  #wkof_ds select,
  #wkof_ds input {
    background-color: var(--ED-surface-inv, #bababa);
    --EDI-text-color: var(--ED-text-inv, #151515);
  }

  #wkof_ds .ui-dialog .ui-dialog-titlebar {
    text-shadow: none;
  }

  #wkof_ds .ui-widget-header {
    background-color: var(--ED-surface-3, #303030);
    font-weight: normal;
  }

  #wkof_ds .ui-dialog .ui-dialog-titlebar-close {
    border: 1px solid var(--ED-surface-2, #282828);
  }

  #wkof_ds .ui-widget button {
    text-shadow: none;
  }

  #wkof_ds .ui-state-default a,
  #wkof_ds .ui-state-default a:link,
  #wkof_ds .ui-state-default a:visited,
  #wkof_ds a.ui-button,
  #wkof_ds a:link.ui-button,
  #wkof_ds a:visited.ui-button,
  #wkof_ds .ui-button {
    color: var(--EDI-text-color, #eeeeee);
    text-decoration: none;
  }

  #wkof_ds .wkof_settings .ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background-color: var(--ED-surface-3, #303030);
    border-bottom: none;
  }

  #wkof_ds .ui-state-default,
  #wkof_ds .ui-widget-content .ui-state-default,
  #wkof_ds .ui-widget-header .ui-state-default,
  #wkof_ds .ui-button,
  html #wkof_ds .ui-button.ui-state-disabled:hover,
  html #wkof_ds .ui-button.ui-state-disabled:active {
    background: var(--ED-surface-4, #535353);
    font-weight: normal;
    color: var(--EDI-text-color, #eeeeee);
  }

  #wkof_ds .ui-dialog .ui-dialog-buttonpane {
    background-color: var(--ED-surface-2, #282828);
  }

  #wkof_ds .ui-widget {
    text-shadow: none;
  }

  #wkof_ds .wkof_settings legend {
    color: var(--EDI-text-color, #eeeeee);
  }

  /* Item inspector does some of it's own settings dialog styling.
   Might as well include it here. Ugly, but functional. */

  #wkofs_Item_Inspector .filters .row.checked {
    background-color: var(--ED-surface-inv, #bababa);
    --EDI-text-color: var(--ED-text-inv, #151515);
  }

  #wkofs_ss_quiz .filters .row.checked {
    background-color: var(--ED-surface-inv);
    --EDI-text-color: var(--ED-text-inv);
  }
}