/* ====== FANCY ======
 *
 * Contains all styles that enhance the visuals of the application.
 * This includes things like text/background/border colors, fonts etc.
 *
 * This style-sheet should be completely optional.
 *
 */

/* ------ General ------ */
:root {
  /* ------- Layout Variables ------- */
  /* Font */
  --layout__primary-font: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  /* Confirm */
  --layout__confirm-color:        #5cb468;
  --layout__confirm-hover-color:  #559e5f;
  --layout__confirm-active-color: #407947;
  /* Warning */
  --layout__warning-dark-color:   #5a1010;
  --layout__warning-medium-color: #731919;
  --layout__warning-bright-color: #a22020;
  --layout__warning-shallow:      #c0ce00;
  /* Valid / Invalid */
  --layout__valid-color:   #009600;
  --layout__invalid-color: #840000;
  /* Text Color */
  --layout__primary-text-color:     #f1f1f1;
  --layout__secondary-text-color:   #aaaaaa;
  --layout__highlighted-text-color: #ffffff;
  --layout__disabled-text-color:    #9b9b9b;
  --layout__disabled-text-color-2:  #5a5a5a;
  --layout__contrast-text-color:    #191919;
  /* Background */
  --layout__primary-background:    #1b1b1c;
  --layout__secondary-background:  #2d2d30;
  --layout__tertiary-background:   #141417;
  --layout__quaternary-background: #242428;
  --layout__background-faded:      #1b1b1cb8;
  /* Outline Color */
  --layout__primary-outline-color: #47474d;
  /* Scrollbar */
  --layout__scroll-thumb-color:        #585858;
  --layout__scroll-thumb-color-hover:  #505050;
  --layout__scroll-thumb-color-active: #404040;
  /* Slider */
  --layout__slider-background:        #4d4f55;
  --layout__slider-background-hover:  #43454b;
  --layout__slider-background-active: #2e2f33;
  /* Game Item */
  --layout__game-item-color: var(--layout__secondary-text-color);
  --layout__game-item-color-hover: var(--layout__primary-text-color);
  --layout__game-item-color-selected:                       #cecece;
  --layout__game-item-color-selected-hover: var(--layout__game-item-color-hover);
  --layout__game-list-item-background-even:                 #1e1e1f; /* Only used in "list" mode. */
  --layout__game-item-background-hover:                     #3c3c41;
  --layout__game-item-background-selected:                  #791c76;
  --layout__game-item-background-selected--secondary:       #571354;
  --layout__game-item-background-selected-hover:            #a72aa2;
  --layout__game-item-thumb-image-rendering:                  normal; /* Used to set the "image-rendering" of the thumbnail. */
  --layout__game-grid-icon-shadow:                          black;
  --layout__tag-editable-hover:                               var(--layout__background-faded);
  /* Browse Sidebar(s) */
  --layout__browse-sidebar-background:               #181819;
  --layout__browse-sidebar-divider-background:       #131313;
  --layout__browse-sidebar-divider-background-hover: var(--layout__flashpoint-red);
  /* Right Browse Sidebar */
  --layout__browse-right-sidebar-screenshot-placeholder-background: #1b1b1b;
  --layout__browse-right-sidebar-screenshot-placeholder-border:     #818181;
  --layout__browse-right-sidebar-searchable-hover:                  #857df3;
  /* Playlist List */
  --layout__playlist-list-item-even-background:                #1e1e1f;
  --layout__playlist-list-fake-even-background:                #19191b;
  --layout__playlist-list-item-content-background:             #242425;
  --layout__playlist-list-item-hover-color:                    #e6e6e6;
  --layout__playlist-list-fake-hover-background:               #343438;
  --layout__playlist-list-item-drag-over-background:           #3c3c41;
  --layout__playlist-list-item-drag-over-border:               #818181;
  --layout__playlist-list-item-editing-odd-background:         #151f14;
  --layout__playlist-list-item-editing-even-background:        #192519;
  --layout__playlist-list-item-editing-content-background:     #1c291b;
  --layout__playlist-list-item-editing-description-background: #3a5637;
  /* Game Image Split */
  --layout__game-image-split-hover-color:    #575757;
  --layout__game-image-split-disabled-color: #141414;
  /* Home Page */
  --layout__home-page-box-border:     #3f3f3f;
  --layout__home-page-box-background: #252525;
  /* Curate Page */
  --layout__curate-page-box-background: var(--layout__tertiary-background);
  --layout__curate-page-box-border: var(--layout__primary-outline-color);
  --layout__curate-page-floating-box-background: var(--layout__quaternary-background);
  --layout__curate-page-floating-box-background-secondary: var(--layout__primary-background);
  --layout__curate-page-floating-box-border: var(--layout__tertiary-background);
  /* Log (at the Log Page) */
  --layout__log-time-stamp:                 #857df3;
  --layout__log-source:                     #d4d4d4;
  --layout__log-source-background-services: #8d8d8d;
  --layout__log-source-game-launcher:       #e67e22;
  --layout__log-source-language:            #b157ec;
  --layout__log-source-redirector:          #00ffff;
  --layout__log-source-server:              #00ff00;
  --layout__log-source-curation:            #efff00;
  --layout__log-source-log-watcher:         #cf0000;
  --layout__log-source-extensions:          #2ab308;
  --layout__log-source-main:                #da0000;
  --layout__log-level-TRACE:                #000000;
  --layout__log-level-DEBUG:                #5fa4f3;
  --layout__log-level-INFO:                 var(--layout__primary-background);
  --layout__log-level-WARN:                 #efff00;
  --layout__log-level-ERROR:                var(--layout__warning-bright-color);
  --layout__log-level-TRACE-text:           var(--layout__primary-text-color);
  --layout__log-level-DEBUG-text:           var(--layout__contrast-text-color);
  --layout__log-level-INFO-text:            var(--layout__primary-text-color);
  --layout__log-level-WARN-text:            var(--layout__contrast-text-color);
  --layout__log-level-ERROR-text:           var(--layout__primary-text-color);
  /* Credits */
  --layout__credits-tooltip-border:           #000000;
  --layout__credits-tooltip-background:       #000000DD;
  --layout__credits-tooltip-roles-background: #000000;
  /* Log Page */
  --layout__log-page-bar-background: #222222;
  --layout__log-text-color:            var(--layout__primary-text-color);
  --layout__log-even:                  var(--layout__primary-background);
  --layout__log-odd:                 #202022;
  /* Curate Page */
  --layout__curate-entry-collision-color: #efef98;
  /* Developer Page */
  --layout__developer-page-log-background: #313133;
  --layout__developer-page-log-border:     #353535;
  /* Simple Button */
  --layout__simple-button-background: #434346;
  --layout__simple-button-border: #6f6f75;
  /* Header Menu Item */
  --layout__header-menu-item-hover-background: #3c2d4b;
  --layout__header-menu-item-hover-border: #d33682;
  /* Splash Screen */
  --layout__splash-screen_loading:                 #eb4b4b;
  /* Play Button */
  --layout__play-button:                      #5cb468;
  --layout__play-button--hover:               #559e5f;
  --layout__play-button--active:              #407947;
  --layout__play-button--running:             #a22020;
  --layout__play-button--running--hover:      #731919;
  --layout__play-button--running--active:     #5a1010;
  --layout__play-button--download:            #00c6f8;
  --layout__play-button--download--hover:     #00aaf8;
  --layout__play-button--download--active:    #019ee7;
  /* Misc */
  --layout__title-bar-cross-color:                 #eb4b4b;
  --layout__no-theme-suggestion-color:             #bfbfbf;
  --layout__footer-scale-slider-icon-color:        #0f1010;
  --layout__footer-scale-slider-background:        #353838;
  --layout__icon-button-hover-fill:                #b1b1b1; /* Color of "icon buttons" while the cursor is hovering over them. */
  --layout__toggle-sidebar-fill:                   #cccccc;
  --layout__drop-down-content-background-selected: #1e90ff;
  /* Flashpoint */
  --layout__flashpoint-red: #DD0428;
  --layout__flashpoint-light-red: #E85971;
}

body {
  color: var(--layout__primary-text-color);
  background-color: var(--layout__primary-background);
  font-family: var(--layout__primary-font);
}

:link {
  color: var(--layout__highlighted-text-color);
}


/* ------ Icons ------ */
.icon__use {
  fill: var(--layout__highlighted-text-color);
}


/* ------ Generic & Re-usable ------ */
/* Simple Button */
.simple-button {
  background-color: var(--layout__secondary-background);
  border-color: var(--layout__primary-outline-color);
  color: var(--layout__primary-text-color);
}
.simple-button:hover {
  background-color: var(--layout__simple-button-background);
  border-color: var(--layout__simple-button-border);
}
.simple-button:active {
	background-color: var(--layout__primary-background);
	box-shadow: 0px -1px 0px 0px #09090a;
}
.simple-button:disabled {
  color: var(--layout__disabled-text-color);
}
.simple-button--red {
  background-color: var(--layout__warning-dark-color);
  border-color: var(--layout__warning-medium-color);
}
.simple-button--red:hover {
  background-color: var(--layout__warning-medium-color);
  border-color: var(--layout__warning-bright-color);
}
/* Simple Selector */
.search-selector,
.simple-selector {
  border-color: var(--layout__primary-outline-color);
  /* Pimp */
  font-family: var(--layout__primary-font);
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
}
/* Simple Scroll(bar) */
.simple-scroll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 calc(0.25 * var(--scrollbar-size)) rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.085);
  border-radius: calc(0.5 * var(--scrollbar-size));
}
.simple-scroll::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 calc(0.5 * var(--scrollbar-size));
  border-radius: calc(0.5 * var(--scrollbar-size));
  background-color: var(--layout__scroll-thumb-color);
  color: rgba(0, 0, 0, 0.15);
}
.simple-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--layout__scroll-thumb-color-hover);
}
.simple-scroll::-webkit-scrollbar-thumb:active {
  background-color: var(--layout__scroll-thumb-color-active);
}
/* Simple Input (Input text field) */
.simple-input {
  color: var(--layout__primary-text-color);
  background-color: var(--layout__secondary-background);
}
.simple-input--disabled {
  color: var(--layout__disabled-text-color);
}
/* Simple Disabled Text */
.simple-disabled-text {
  color: var(--layout__disabled-text-color);
}
/* Input Field */
.input-field--info {
  background-color: var(--layout__warning-medium-color);
}
.input-field--warn {
  background-color: var(--layout__warning-shallow);
  color: var(--layout__primary-background);
}
/* Checkbox Dropdown */
.simple-dropdown {
  font-family: var(--layout__primary-font);
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
}
.simple-dropdown-button:hover {
  background-color: var(--layout__simple-button-background);
  border-color: var(--layout__simple-button-border);
}
.simple-dropdown__select-box {
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
  border-color: var(--layout__primary-outline-color);
}
.simple-dropdown__content {
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
  border-color: var(--layout__primary-outline-color);
}
/* Input Dropdown */
.input-dropdown {
  font-family: var(--layout__primary-font);
  color: var(--layout__primary-text-color);
}
.input-dropdown--disabled {
  color: var(--layout__disabled-text-color);
}
.input-dropdown__input-field__back {
  background-color: var(--layout__secondary-background);
  color: var(--layout__primary-text-color);
}
.input-dropdown__content {
  background-color: var(--layout__secondary-background);
  color: var(--layout__primary-text-color);
  border-color: var(--layout__primary-outline-color);
}
.input-dropdown__content label:hover,
.input-dropdown__content label:focus {
  background-color: var(--layout__drop-down-content-background-selected);
}
/* Log */
.log {
  font-weight: 275;
  color: var(--layout__log-text-color);
}
.log__even {
  background-color: var(--layout__log-even);
}
.log__odd {
  background-color: var(--layout__log-odd);
}
.log__level-TRACE {
  background-color: var(--layout__log-level-TRACE);
  color: var(--layout__log-level-TRACE-text);
}
.log__level-DEBUG {
  background-color: var(--layout__log-level-DEBUG);
  color: var(--layout__log-level-DEBUG-text);
}
.log__level-INFO {
  background-color: var(--layout__log-level-INFO);
  color: var(--layout__log-level-INFO-text);
}
.log__level-WARN {
  background-color: var(--layout__log-level-WARN);
  color: var(--layout__log-level-WARN-text);
}
.log__level-ERROR {
  background-color: var(--layout__log-level-ERROR);
  color: var(--layout__log-level-ERROR-text);
}
.log__time-stamp {
  color: var(--layout__log-time-stamp);
}
.log__source {
  /* Default color of sources, used on the unknown/unspecified sources */
  color: var(--layout__log-source);
  font-weight: bold;
}
.log__source--background-services {
  color: var(--layout__log-source-background-services);
}
.log__source--game-launcher {
  color: var(--layout__log-source-game-launcher);
}
.log__source--language {
  color: var(--layout__log-source-language);
}
.log__source--redirector {
  color: var(--layout__log-source-redirector);
}
.log__source--server {
  color: var(--layout__log-source-server);
}
.log__source--curation {
  color: var(--layout__log-source-curation);
}
.log__source--log-watcher {
  color: var(--layout__log-source-log-watcher);
}
.log__source--extensions {
  color: var(--layout__log-source-extensions);
}
.log__source--main {
  color: var(--layout__log-source-main);
}

/* ------ Image Preview ------ */
.image-preview {
  background-color: rgba(0, 0, 0, 0.8);
}


/* ------ Meta Edit Exporter ------ */
.meta-edit-exporter {
  background-color: rgba(0, 0, 0, 0.8);
}
.meta-edit-exporter__inner {
  border-radius: 0.25rem;
  background-color: var(--layout__quaternary-background);
}
.meta-edit-exporter__row:hover {
  background-color: var(--layout__secondary-background);
}


/* ------ Main Layout ------ */
.root {
  background-color: var(--layout__tertiary-background);
}
.main {
  background-color: var(--layout__primary-background);
}


/* ------ TitleBar ------ */
.title-bar {
  background-color: var(--layout__tertiary-background);
}
/* Minimize Button */
.title-bar__button-bar__min {
  background-image: url('../images/min.png');
}
.title-bar__button-bar__min:hover {
  background-color: var(--layout__quaternary-background);
}
/* Maximize Button */
.title-bar__button-bar__max {
  background-image: url('../images/max.png');
}
.title-bar__button-bar__max:hover {
  background-color: var(--layout__quaternary-background);
}
/* Cross Button */
.title-bar__button-bar__cross {
  background-image: url('../images/cross.png');
}
.title-bar__button-bar__cross:hover {
  background-color: var(--layout__title-bar-cross-color);
}


/* ------ Header ------ */
.header {
  background-color: var(--layout__secondary-background);
}
.header__menu__item:hover .icon__use {
  fill: var(--layout__icon-button-hover-fill);
}
.header__menu__item__link {
  cursor: pointer;
  text-decoration: none;
  color: var(--layout__primary-text-color);
}
.header__menu__item__link:hover {
  background-color: var(--layout__header-menu-item-hover-background);
  border-color: var(--layout__header-menu-item-hover-border);
}
.header__menu__item__link-selected {
  font-weight: bold;
  text-decoration: underline;
}
.header__search {
  border: 1px solid var(--layout__primary-outline-color);
  background-color: var(--layout__primary-background);
}
.header__search__input {
  color: var(--layout__primary-text-color);
  border-color: var(--layout__primary-outline-color);
  /** Override simple-input **/
  background-color: inherit !important;
}
.header__search__icon .icon__use {
  fill: var(--layout__primary-text-color);
}
.header__search__icon:hover .icon__use--circle-x {
  fill: var(--layout__icon-button-hover-fill);
}
/* Header Toggle-Sidebar */
.header__toggle-sidebar .icon__use {
  fill: var(--layout__toggle-sidebar-fill);
}
.header__toggle-sidebar:hover .icon__use {
  fill: var(--layout__highlighted-text-color);
}
.header__toggle-sidebar:active .icon__use {
  fill: var(--layout__secondary-text-color);
}
.header-user-icon {
  border: 1px solid var(--layout__simple-button-border);
  border-radius: 25%;
}
.header-user-box:hover {
  background-color: var(--layout__simple-button-background);
}


/* ------ Footer ------ */
.footer {
  background-color: var(--layout__secondary-background);
}
/* Scale Slider */
.footer__scale-slider__inner {
  background-color: var(--layout__footer-scale-slider-background);
  box-shadow: inset 0 0 calc(0.5 * var(--slider-size)) rgba(0, 0, 0, 0.05);
  border-radius: calc(0.5 * var(--slider-size));
}
.footer__scale-slider__icon {
  font-family: monospace;
  font-weight: bold;
  color: var(--layout__footer-scale-slider-icon-color);
}
.footer__scale-slider__icon--center {
  background-color: var(--layout__footer-scale-slider-icon-color);
}
.footer__scale-slider__input {
  background: none;
}
.footer__scale-slider__input::-webkit-slider-runnable-track {
  background: none;
}
.footer__scale-slider__input::-webkit-slider-thumb {
  box-shadow: inset 0 0 calc(0.5 * var(--slider-size));
  border-radius: 50%;
  background-color: var(--layout__slider-background);
  color: rgba(0, 0, 0, 0.05);
}
.footer__scale-slider__input::-webkit-slider-thumb:hover {
  background-color: var(--layout__slider-background-hover);
}
.footer__scale-slider__input::-webkit-slider-thumb:active {
  background-color: var(--layout__slider-background-active);
}
/* Update Panel */
.footer__update-panel-up-to-date {
  background-color: var(--layout__secondary-background);
}
.footer__update-panel-up-to-date:hover {
  background-color: var(--layout__simple-button-background);
}
.footer__update-panel-up-to-date:active {
  background-color: var(--layout__primary-background);
}
.footer__update-panel-updates-ready {
  background-color: var(--layout__flashpoint-red);
}
.footer__update-panel-updates-ready:hover {
  background-color: var(--layout__flashpoint-light-red);
}
.footer__update-panel-updates-ready:active {
  background-color: var(--layout__title-bar-cross-color);
}
.footer__update-panel:active {
	box-shadow: 0px -1px 0px 0px #09090a;
}

/* ------ Home ------ */
/* HomePage Box */
.home-page__box {
  border-color: var(--layout__home-page-box-border);
  background-color: var(--layout__home-page-box-background);
}
.home-page__box-head {
  border-bottom-color: var(--layout__home-page-box-border);
}
.home-page__box-head--minimize {
  border-left-color: var(--layout__home-page-box-border);
}
.home-page__box-head--minimize:hover {
  background-color: var(--layout__game-item-background-hover);
}
/* HomePage Box - Upgrades */
.home-page__box--upgrades .home-page__grayed-out {
  color: var(--layout__disabled-text-color);
}
.home-page__platform-entry:hover {
  background-color: var(--layout__secondary-background);
}

/* GOTD Box */
.home-page__box-item--gotd-left {
  border-color: var(--layout__home-page-box-border);
}


/* ------ About ------ */
/* Credits */
.about-page__credits__tooltip {
  border-color: var(--layout__credits-tooltip-border);
  background-color: var(--layout__credits-tooltip-background);
}
.about-page__credits__tooltip__note {
  color: var(--layout__disabled-text-color);
  font-style: italic;
}
.about-page__credits__tooltip__roles p {
  background-color: var(--layout__credits-tooltip-roles-background);
}


/* ------ Curate ------ */
.curate-page__center {
  background-color: var(--layout__curate-page-box-background);
}
.curate-page__right--header {
  font-weight: bold;
}
.curate-page__header-text {
  font-weight: bold;
}
/* Curate Page Top */
.curate-page__floating-box {
  border-color: var(--layout__curate-page-floating-box-border);
  background-color: var(--layout__curate-page-floating-box-background);
}
.curate-page__left--hover {
  background-color: var(--layout__game-image-split-hover-color);
}
/* Curate Page Left Sidebar Items */
.curate-page__left-sidebar-item {
  background-color: var(--layout__playlist-list-fake-even-background);
  color: var(--layout__secondary-text-color);
}
.curate-page__left-sidebar-item:nth-child(2n) {
  background-color: var(--layout__playlist-list-item-even-background);
}
.curate-page__left-sidebar-item:hover {
  background-color: var(--layout__playlist-list-item-drag-over-background);
}
.curate-page-keybinds-box {
  border: 1px solid;
  border-color: var(--layout__curate-page-floating-box-border);
  background-color: var(--layout__curate-page-floating-box-background);
}
.curate-page-keybinds-box-combo {
  font-weight: bold;
  border-color: var(--layout__curate-page-floating-box-border);
  background-color: var(--layout__curate-page-floating-box-background-secondary);
}
.curate-page-keybinds-box-row td:first-child {
  border-right: 2px solid;
  border-color: var(--layout__curate-page-floating-box-border);
}

.curate-box input[type="checkbox"] {
  vertical-align: middle;
  transform: scale(1rem);
}
/* Curate Box Divider */
.curate-box-divider {
  border-color: var(--layout__primary-outline-color);
  border-style: solid;
}
/* Curate Box Add-Apps */
.curate-box-add-app:nth-child(2n) {
  background-color: var(--layout__quaternary-background);
}
/* Curate Box Files */
.curate-box-files__head-collision-count {
  color: var(--layout__curate-entry-collision-color);
}
.curate-box-files__entry-collision {
  color: var(--layout__curate-entry-collision-color);
}
/* Curate Box Images */
.curate-box-images__image {
  cursor: zoom-in;
}
.curate-box-images__image--placeholder {
  background-color: var(--layout__browse-right-sidebar-screenshot-placeholder-background);
  border-color: var(--layout__browse-right-sidebar-screenshot-placeholder-border);
}
.curate-box-images__image--placeholder p {
  color: var(--layout__disabled-text-color);
}
/* Curate Box Buttons */
.curate-box-buttons__button--active:hover { /* ":hover" to get higher specificity */
  background-color: var(--layout__warning-medium-color);
}
/* Curate Box Select Dropdowns */
.curate-box-select--warn select {
  background-color: var(--layout__warning-medium-color);
}
.curate-box-select--warn select option:not(.curate-box-select__invalid-option) {
  background-color: var(--layout__secondary-background);
}
/* Curate List Item */
.curate-list-item:nth-child(n+2) { /* All but first */
  border-color: var(--layout__tertiary-background);
}
.curate-list-item:hover {
  background-color: var(--layout__game-item-background-hover);
}
.curate-list-item--selected {
  background-color: var(--layout__game-item-background-selected);
}
.curate-list-item--selected--secondary {
  background-color: var(--layout__game-item-background-selected--secondary);
}
.curate-list-item__warning .icon__use {
  fill: var(--layout__warning-shallow);
}
.curate-list-group__hovered-curation {
  background-color: var(--layout__secondary-background);
}
.curate-list-group__header {
  background-color: var(--layout__secondary-background);
}
.curate-list-group__header-unpinned .icon__use {
  fill: var(--layout__primary-background);
}
.curate-list-group__header-text--counter {
  font-style: italic;
  color: var(--layout__disabled-text-color);
}
/* Curate Tag (Game tag for the curate page) */
.curate-tag {
  border: 1px solid;
  border-color: var(--layout__home-page-box-border);
}
.curate-tag-inner:hover {
  background-color: var(--layout__warning-dark-color);
}
.curate-tag-primary-icon {
  font-weight: bold;
}
.curate-tag-primary-icon__promote:hover {
  background-color: var(--layout__confirm-hover-color);
}
.curate-box-content__entry:hover {
  background-color: var(--layout__secondary-background);
}
.curate-box-content__entry-icon--launch-path .icon__use {
  fill: var(--layout__confirm-color);
}

/* Tag Dropdown Item */
.tag-dropdown-item:hover {
  background-color: var(--layout__game-item-background-hover);
}
.tag-dropdown-item--selected {
  background-color: var(--layout__game-item-background-selected);
}


/* ------ Log ------ */
/* Log-Page Bar */
.log-page__bar {
  background-color: var(--layout__log-page-bar-background);
}
/* Dropdown */
.log-page__dropdown-item:hover {
  background-color: var(--layout__drop-down-content-background-selected);
}
.log-page__upload-log {
  font-weight: bold;
}

/* ------ Browse ------ */
.game-browser {
  background-color: var(--layout__primary-background);
}
/* Sidebar */
.game-browser__sidebar {
  background-color: var(--layout__browse-sidebar-background);
}
.game-browser__sidebar__divider {
  background-color: var(--layout__browse-sidebar-divider-background);
}
.game-browser__sidebar__divider:hover {
  background-color: var(--layout__browse-sidebar-divider-background-hover);
}
.browse-right-sidebar--edit-disabled .browse-right-sidebar__searchable:hover {
  color: var(--layout__browse-right-sidebar-searchable-hover);
}
/* Browse-Right-Sidebar Play Button */
.browse-right-sidebar__play-button,
.browse-right-sidebar__play-button--busy,
.browse-right-sidebar__play-button--running,
.browse-right-sidebar__play-button--download {
  border-width: 2px;
  border-style: solid;
  border-color: var(--layout__primary-outline-color);
  font-weight: bold;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--layout__primary-outline-color);
}
.browse-right-sidebar__play-button--dropdown {
  border-left: solid 2px;
  border-color: var(--layout__primary-outline-color);
}
.browse-right-sidebar__play-button--play-dropdown {
  background-color: var(--layout__play-button);
}
.browse-right-sidebar__play-button--download-dropdown {
  background-color: var(--layout__play-button--download);
}
.browse-right-sidebar__play-button {
  background-color: var(--layout__play-button);
}
.browse-right-sidebar__play-button--play-text:hover,
.browse-right-sidebar__play-button--play-dropdown:hover {
  background-color: var(--layout__play-button--hover);
}
.browse-right-sidebar__play-button--play-text:active
.browse-right-sidebar__play-button--play-dropdown:active {
  background-color: var(--layout__play-button--active);
}
.browse-right-sidebar__play-button--running {
  background-color: var(--layout__play-button--running);
}
.browse-right-sidebar__play-button--running:hover {
  background-color: var(--layout__play-button--running--hover);
}
.browse-right-sidebar__play-button--running:active {
  background-color: var(--layout__play-button--running--active);
}
.browse-right-sidebar__play-button--download-text {
  background-color: var(--layout__play-button--download);
}
.browse-right-sidebar__play-button--download-text:hover,
.browse-right-sidebar__play-button--download-dropdown:hover {
  background-color: var(--layout__play-button--download--hover);
}
.browse-right-sidebar__play-button--download-text:active,
.browse-right-sidebar__play-button--download-dropdown:hover {
  background-color: var(--layout__play-button--download--active);
}
.browse-right-sidebar__play-button--busy {
  background-color: var(--layout__secondary-background);
}
.browse
/* BrowseSidebar Title-Row Buttons */
.browse-right-sidebar__title-row__buttons .icon__use {
  fill: var(--layout__primary-text-color);
}
.browse-right-sidebar__title-row__buttons:hover .icon__use {
  fill: var(--layout__icon-button-hover-fill);
}
/* BrowseSidebar Title-Row Delete-Game */
.browse-right-sidebar__title-row__buttons__delete-game:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.browse-right-sidebar__title-row__buttons__delete-game--active:hover .icon__use {
  fill: var(--layout__warning-medium-color);
}
/* BrowseSidebar Title-Row Remove-From-Playlist */
.browse-right-sidebar__title-row__buttons__remove-from-playlist:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.browse-right-sidebar__title-row__buttons__remove-from-playlist--active:hover .icon__use {
  fill: var(--layout__warning-medium-color);
}
/* BrowseSidebar Title-Row Edit */
.browse-right-sidebar__title-row__buttons__edit-button:hover .icon__use {
  fill: var(--layout__confirm-color);
}
/* BrowseSidebar Title-Row Discard */
.browse-right-sidebar__title-row__buttons__discard-button:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.browse-right-sidebar__title-row__buttons__promote-button:hover .icon__use {
  fill: var(--layout__confirm-color);
}
/* BrowseSidebar Title-Row Save */
.browse-right-sidebar__title-row__buttons__save-button:hover .icon__use {
  fill: var(--layout__confirm-color);
}
/* Browse-Right-Sidebar Row - Additional Application */
.browse-right-sidebar__additional-application__delete-button:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.browse-right-sidebar__additional-application__delete-button--active:hover .icon__use {
  fill: var(--layout__confirm-color);
}
/* Browse-Right-Sidebar Row - Screenshot */
.browse-right-sidebar__row__screenshot__placeholder {
  background-color: var(--layout__browse-right-sidebar-screenshot-placeholder-background);
  border-color: var(--layout__browse-right-sidebar-screenshot-placeholder-border);
}
.browse-right-sidebar__row__screenshot__placeholder p {
  color: var(--layout__disabled-text-color);
}
.browse-right-sidebar__row__screenshot-image--hidden {
  background-color: var(--layout__secondary-background);
  border: 1px solid var(--layout__simple-button-border);
}
.browse-right-sidebar__row__screenshot-image--hidden:hover {
  background-color: var(--layout__simple-button-background);
}
.browse-right-sidebar__game-config-label {
  font-weight: bold;
}
.browse-right-sidebar__game-config-dropdown-none {
  font-style: italic;
}
.browse-right-sidebar-floating-icon .icon__use {
  fill: var(--layout__confirm-color);
}

/* GameImageSplit */
.game-image-split {
  --inner-border-color: var(--layout__secondary-background);
}
.game-image-split--hover {
  background-color: var(--layout__game-image-split-hover-color);
}
.game-image-split--disabled {
  background-color: var(--layout__game-image-split-disabled-color);
}
.game-image-split:first-child {
  border-right-color: var(--inner-border-color);
}
.game-image-split:last-child {
  border-left-color: var(--inner-border-color);
}
.game-image-split__buttons__remove-image:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.game-image-split__buttons__remove-image--active:hover .icon__use {
  fill: var(--layout__warning-medium-color);
}
.game-image-split__buttons__remove-image--disabled .icon__use {
  fill: var(--layout__disabled-text-color);
}


/* GameList Item */
.game-list-item {
  list-style: none;
  background-color: var(--layout__primary-background);
  color: var(--layout__game-item-color);
}
.game-list-item--even {
  background-color: var(--layout__game-list-item-background-even);
}
.game-list-item:hover {
  background-color: var(--layout__game-item-background-hover);
  color: var(--layout__game-item-color-hover);
}
.game-list-item--selected {
  background-color: var(--layout__game-item-background-selected);
  color: var(--layout__game-item-color-selected);
}
.game-list-item--selected:hover {
  background-color: var(--layout__game-item-background-selected-hover);
  color: var(--layout__game-item-color-selected-hover);
}
/* GameList Item Thumb */
.game-list-item__thumb {
  image-rendering: var(--layout__game-item-thumb-image-rendering);
}
/* GameList Header */
.game-list-header-column__divider {
  background: var(--layout__browse-sidebar-divider-background);
}
.game-list-header__scroll-fill {
  background: linear-gradient(to left, var(--layout__tertiary-background), #00000000);
}
/* GameList Header Column */
.game-list-header-column--icon {
  background: linear-gradient(to right, var(--layout__tertiary-background), #00000000);
}


/* GameGrid */
.game-grid-item {
  color: var(--layout__game-item-color);
}
.game-grid-item:hover {
  background-color: var(--layout__game-item-background-hover);
  color: var(--layout__game-item-color-hover);
}
.game-grid-item--selected {
  background-color: var(--layout__game-item-background-selected);
  color: var(--layout__game-item-color-selected);
}
.game-grid-item--selected:hover {
  background-color: var(--layout__game-item-background-selected-hover);
  color: var(--layout__game-item-color-selected-hover);
}
.game-grid-item__thumb__image {
  border-radius: 0.2em;
  background-color: var(--layout__quaternary-background);
  border-color: var(--layout__tertiary-background);
  box-shadow: 0px 2px 4px 0px #09090a;
  image-rendering: var(--layout__game-item-thumb-image-rendering);
}
.game-grid-item__thumb__icons__icon {
  filter: drop-shadow(1px 1px 4px var(--layout__game-grid-icon-shadow));
}


/* Playlist Item */
.playlist-list-item {
  background-color: var(--layout__primary-background);
  color: var(--layout__secondary-text-color);
}
.playlist-list-item:nth-child(2n) {
  background-color: var(--layout__playlist-list-item-even-background);
}
.playlist-list-item:hover,
.playlist-list-item.playlist-list-item--drag-over {
  background-color: var(--layout__playlist-list-item-drag-over-background);
}
.playlist-list-item--editing,
.playlist-list-item--editing:hover {
  background-color: var(--layout__playlist-list-item-editing-odd-background);
}
.playlist-list-item--editing:nth-child(2n) {
  background-color: var(--layout__playlist-list-item-editing-even-background);
}
.playlist-list-item--drag-over .playlist-list-item__drag-overlay {
  border-color: var(--layout__playlist-list-item-drag-over-border);
}
/* Playlist-List-Item Head */
.playlist-list-item__head {
  --color: var(--layout__secondary-text-color);
  color: var(--color);
}
.playlist-list-item__head:hover,
.playlist-list-item--drag-over .playlist-list-item__head {
  --color: var(--layout__playlist-list-item-hover-color);
}
.playlist-list-item--editing .playlist-list-item__head:hover {
  --color: var(--layout__secondary-text-color);
}
.playlist-list-item__icon-placeholder-inner .icon__use {
  fill: var(--color);
}
.playlist-list-item__text-field {
  color: var(--color);
}


/* PlaylistContent */
.playlist-list-content {
  background-color: var(--layout__playlist-list-item-content-background);
}
.playlist-list-content--edit {
  background-color: var(--layout__playlist-list-item-editing-content-background);
  color: var(--layout__highlighted-text-color);
}
.playlist-list-content__description {
  color: var(--layout__secondary-text-color);
}
.playlist-list-content__extreme {
  color: var(--layout__warning-bright-color);
  font-weight: bolder;
}
.playlist-list-content--edit .playlist-list-content__description {
  background-color: var(--layout__playlist-list-item-editing-description-background);
  color: var(--layout__primary-text-color);
}
.playlist-list-content--edit .playlist-list-content__extreme {
  color: var(--layout__primary-text-color);
  font-style: normal;
}
/* Playlist-List-Content Buttons */
.playlist-list-content__button--confirm:hover .icon__use {
  fill: var(--layout__confirm-color);
}
.playlist-list-content__button--warning:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.playlist-list-content__button--warning.playlist-list-content__button--active:hover .icon__use {
  fill: var(--layout__warning-medium-color);
}


/* Playlist-List-Fake-Item */
.playlist-list-fake-item {
  background-color: var(--layout__playlist-list-fake-even-background);
  --color: var(--layout__secondary-text-color);
}
.playlist-list-fake-item:hover {
  background-color: var(--layout__playlist-list-fake-hover-background);
  --color: var(--layout__highlighted-text-color);
}
.playlist-list-fake-item__inner .icon__use {
  fill: var(--color);
}
.playlist-list-fake-item__inner__title {
  color: var(--color);
}


/** ------ Developer ------ */
.developer-page__log {
  background-color: var(--layout__developer-page-log-background);
  border-color: var(--layout__developer-page-log-border);
}
/* Service Box */
.service-box {
  background-color: var(--layout__quaternary-background);
  border-color: var(--layout__tertiary-background);
  box-shadow: 0px 2px 4px 0px #09090a;
}
.service-box__log {
  background-color: var(--layout__primary-background);
}

/** ------ Config ------ */
/* Setting */
.setting__body {
  background-color: var(--layout__quaternary-background);
  border-color: var(--layout__tertiary-background);
  box-shadow: 0px 2px 4px 0px #09090a;
}
/* Setting Row */
.setting__row {
  padding: 0.75em;
}
.setting__row:not(:first-child) {
  border-top-color: var(--layout__tertiary-background);
}
/* Setting Row Content - FilePoint Path */
.setting__row__content--filepath-path .flashpoint-path__input {
  border-color: var(--layout__primary-outline-color);
}
.setting__row__content--filepath-path .flashpoint-path__input--valid {
  background-color: var(--layout__valid-color);
}
.setting__row__content--filepath-path .flashpoint-path__input--invalid {
  background-color: var(--layout__invalid-color);
}
.setting__row__content--filepath-path .flashpoint-path__input input[type="text"] {
  color: var(--layout__primary-text-color);
}
/* Setting Row Content - Input Field */
.setting__row__content--input-field .input-dropdown__input-field,
.setting__row__content--input-field .input-dropdown__content {
  border-color: var(--layout__primary-outline-color);
}
/* Setting Row Content - Theme Input Field */
.setting__row__content--theme-input-field label:last-child {
  /* Change the color of the "No Theme" suggestion in the drop-down list. */
  color: var(--layout__no-theme-suggestion-color);
}
.setting__row__content--override-row__delete:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.setting__row__content--override-row__new:hover .icon__use {
  fill: var(--layout__confirm-color);
}
/** ------ Progress Components ------ **/
/* Status Bar */
.status-bar__top-text {
  color: var(--layout__primary-text-color);
}
.status-bar__bottom-text {
  color: var(--layout__primary-text-color);
}
/* Progress Bar */
.progress-bar__top-text {
  color: var(--layout__primary-text-color);
}
.progress-bar__bottom-text {
  color: var(--layout__primary-text-color);
}
.progress-bar__bar {
  background-color: var(--layout__secondary-background);
}
.progress-bar__bar__inner {
  background-color: var(--layout__confirm-color);
}

/* ------ FP Logo ------ */
.fp-logo {
  /* --size: 1rem; */
  /* --zoom: 100%; */
  /* Mask the background color with the FP logo */
  -webkit-mask: url('../images/logo-solid.svg');
  -webkit-mask-size: var(--size);
  -webkit-mask-repeat: no-repeat;
  /* Cool colors yall */
  background:
    linear-gradient(rgba(0, 0, 0, 0), var(--layout__primary-background)),
    linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #ff2400);
  background-size: var(--zoom) 100%;
}
.fp-logo--animated {
  -webkit-animation: fp-logo__slide 1200s linear infinite;
}
@-webkit-keyframes fp-logo__slide {
    0% { background-position-x:          0%; }
  100% { background-position-x: var(--zoom); }
}

/* ------ Splash Screen ------ */
.splash-screen {
  background: var(--layout__primary-background);
}
.splash-screen--fade-out {
  transition: opacity 0.8s;
}
.splash-screen__status {
  color: var(--layout__primary-text-color);
}

/* ----- Tag Related Elements ----- */
.tag-editable:hover {
  background-color: var(--layout__tag-editable-hover);
}
.tag-static:hover {
  color: var(--layout__browse-right-sidebar-searchable-hover)
}
.tag_alias-joiner {
  color: var(--layout__secondary-text-color)
}
.tag-count {
  color: var(--layout__secondary-text-color)
}
.tag-primary {
  font-weight: bold;
}
.tag-primary__right {
  font-style: italic;
  color: var(--layout__secondary-text-color);
}

.tag-list-item {
  list-style: none;
  background-color: var(--layout__primary-background);
  color: var(--layout__game-item-color);
}
.tag-list-item--even {
  background-color: var(--layout__game-list-item-background-even);
}
.tag-list-item:hover {
  background-color: var(--layout__game-item-background-hover);
  color: var(--layout__game-item-color-hover);
}
.tag-list-item--selected {
  background-color: var(--layout__game-item-background-selected);
  color: var(--layout__game-item-color-selected);
}
.tag-list-item--selected:hover {
  background-color: var(--layout__game-item-background-selected-hover);
  color: var(--layout__game-item-color-selected-hover);
}
.tag-alias__buttons-delete:hover .icon__use {
  fill: var(--layout__warning-bright-color);
}
.tag-alias__buttons-delete--active:hover .icon__use {
  fill: var(--layout__warning-medium-color);
}
.tag-alias__buttons-primary:hover .icon__use {
  fill: var(--layout__confirm-color);
}

.tag-list-header-column__divider {
  background: var(--layout__browse-sidebar-divider-background);
}
.tag-list-header__scroll-fill {
  background: linear-gradient(to left, var(--layout__tertiary-background), #00000000);
}
/* GameList Header Column */
.tag-list-header-column--icon {
  background: linear-gradient(to right, var(--layout__tertiary-background), #00000000);
}


.browse-right-sidebar__row .sketch-picker {
  margin: 0 0.5rem;
}
.sketch-picker {
  background-color: var(--layout__secondary-background) !important;
}
.sketch-picker * {
  color: var(--layout__primary-text-color) !important;
}
.sketch-picker input {
  background-color: var(--layout__quaternary-background);
}

/** Game Data Browser */
.game-data-info {
  border-color: var(--layout__home-page-box-border);
  background-color: var(--layout__secondary-background);
}

.game-data-info__table {
  border-color: var(--layout__home-page-box-border);
}

/** Confirm Dialog */
.confirm-dialog__message {
  white-space: pre-wrap;
  font-weight: bold;
}

/** Floating Containers */
.floating-container__wrapper {
  background-color: var(--layout__background-faded);
}

.floating-container {
  background-color: var(--layout__home-page-box-background);
  border-color: var(--layout__home-page-box-border);
}

.tag-filter-editor__header {
  font-style: italic;
}

/** Checkboxes */
.slider {
  background-color: var(--layout__simple-button-background);
}

.slider-checked {
  background-color: var(--layout__confirm-color);
}

.clickable-url {
  text-decoration: underline;
  cursor: pointer;
}

/** Tasks */
.task-bar--header {
  background-color: var(--layout__secondary-background)
}

.task-bar-empty {
  font-size: 2em;
  font-weight: bold;
  color: var(--layout__secondary-text-color);
}

.task-status {
  font-style: italic;
  color: var(--layout__secondary-text-color);
}

.task-progress-bar {
  color: var(--layout__contrast-text-color);
  background-color: var(--layout__slider-background);
}

.task-progress-bar--fill {
  background-color: var(--layout__confirm-color);
}

.task-progress-bar--failure {
  background-color: var(--layout__invalid-color);
}

/* Spinner */
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: #fff;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.main-output-content {
  background-color: var(--layout__tertiary-background);
}

/** Datepicker Overrides */

.react-datepicker__header {
  color: var(--layout__primary-text-color);
  background-color: var(--layout__secondary-background);
  border-bottom: 0px;
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
  border-bottom-color: var(--layout__home-page-box-border);
}

.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
  border-bottom-color: var(--layout__secondary-background);
}

.react-datepicker__current-month {
  color: var(--layout__primary-text-color);
}

.react-datepicker__day-name {
  color: var(--layout__primary-text-color);
}

.react-datepicker__day {
  color: var(--layout__primary-text-color)
}

.react-datepicker__day--disabled {
  color: var(--layout__disabled-text-color-2)
}

.react-datepicker {
  color: var(--layout__primary-text-color);
  background-color: var(--layout__home-page-box-background);
  border: 2px solid var(--layout__home-page-box-border);
  border-radius: 8px;
}

.react-datepicker__input-container > input {
  background-color: var(--layout__secondary-background);
  border-color: var(--layout__primary-outline-color);
  color: var(--layout__primary-text-color);
}

.tag-nuke-box {
  font-weight: bold;
}

.cancel-download-button {
  font-size: 2rem !important;
}

/** Game Config Dialog */
.game-config-dialog-header-title {
  font-size: 2rem;
  font-weight: bold;
}

.game-config-dialog__config {
  background-color: var(--layout__home-page-box-border);
}

.game-config-dialog__config-title {
  font-weight: bold;
}

.game-config-dialog__config-source-label {
  font-weight: bold;
}

.game-config-dialog__config-middleware-label {
  font-weight: bold;
}

.game-config-dialog-inputs > .game-config-dialog-label-row:not(:first-child) {
  border-color: var(--layout__simple-button-border);
}

.game-config-dialog__config-name-label {
  font-weight: bold;
}

/** Form Styles */

.input-field-form {
  border-color: var(--layout__simple-button-border);
}

.simple-dropdown-form {
  font-family: var(--layout__primary-font);
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
}
.simple-dropdown-form-button:hover {
  background-color: var(--layout__simple-button-background);
  border-color: var(--layout__simple-button-border);
}
.simple-dropdown-form__select-box {
  background-color: #323234;
  color: var(--layout__primary-text-color);
  box-shadow: 0px 0.5px 2px 1px #2a2a2c inset;
  border-color: var(--layout__simple-button-border);
}
.simple-dropdown-form__content {
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
  border-color: var(--layout__primary-outline-color);
}

/** --- Search bar --- */
.searchable-select-dropdown-search-bar {
  padding: 0.3rem;
  color: white;
}

.search-bar-text-input {
  padding: 0.3rem;
  color: white;
  background: transparent;
  border: none;
}

.searchable-select-dropdown-search-bar,
.searchable-select-dropdown,
.search-bar-order-dropdown,
.search-bar-text-input-wrapper,
.search-bar-simple-box {
  background-color: var(--layout__quaternary-background);
  border: 1px solid var(--layout__primary-outline-color);
  border-radius: 2px;
  box-shadow: 0px 2px 4px 0px #09090a;
}

.search-selector:hover,
.search-bar-simple-box:hover {
  background-color: #363638;
}

.search-bar-simple-box > * {
  filter: unset;
}


/** --- Searchable select -- */
.searchable-select-number {
  color: black;
  background-color: var(--layout__game-item-color-selected);
}

.searchable-select-dropdown-item {
  border-bottom: 1px solid var(--layout__primary-outline-color);
}

.searchable-select-dropdown-item--highlighted,
.searchable-select-dropdown-item:hover {
  background-color: var(--layout__header-menu-item-hover-background);
}
