/*
  ==Theme==
  @name              Iconic Dark
  @version           1.2
  @description       A modern dark theme, with icons.
  @author            LostError
  @launcher-version  10.1.0.3
  ==/Theme==
*/

/* ------ General ------ */
:root {
  /* ------- Layout Variables ------- */
  /* Font */
  --layout__primary-font: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Confirm */
  --layout__confirm-color: #5cb468;
  /* Warning */
  --layout__warning-dark-color:   #5a1010;
  --layout__warning-medium-color: #731919;
  --layout__warning-bright-color: #a22020;
  /* Valid / Invalid */
  --layout__valid-color:   #009600;
  --layout__invalid-color: #840000;
  /* Text Color */
  --layout__primary-text-color:     lightgrey;
  --layout__secondary-text-color:   lightgrey;
  --layout__highlighted-text-color: lightgrey; #7237cf
  --layout__disabled-text-color:    darkgrey;
  /* Background */
  --layout__primary-background:    #141414;
  --layout__secondary-background:  #141414;
  --layout__tertiary-background:   #1c1c1c;
  --layout__quaternary-background: #1c1c1c;
  /* Outline Color */
  --layout__primary-outline-color: dimgrey;
  /* Scrollbar */
  --layout__scroll-thumb-color:        #4c4c4c;
  --layout__scroll-thumb-color-hover:  dimgrey;
  --layout__scroll-thumb-color-active: #4c4c4c;
  /* Slider */
  --layout__slider-background:        #4c4c4c;
  --layout__slider-background-hover:  dimgrey;
  --layout__slider-background-active: #4c4c4c;
  /* 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:            lightgrey;
  --layout__game-item-color-selected-hover:     #f4f4f4;
  --layout__game-list-item-background-even:      #141414; /* Only used in "list" mode. */
  --layout__game-item-background-hover:          #0a0a0a;
  --layout__game-item-background-selected:       black;
  --layout__game-item-background-selected-hover: black;
  --layout__game-item-thumb-image-rendering:       crisp-edges; /* Used to set the "image-rendering" of the thumbnail. */
  /* Browse Sidebar(s) */
  --layout__browse-sidebar-background:         #141414;
  --layout__browse-sidebar-divider-background: #0c0c0c;
  /* Right Browse Sidebar */
  --layout__browse-right-sidebar-screenshot-placeholder-background: #181818;
  --layout__browse-right-sidebar-screenshot-placeholder-border:     #818181;
  --layout__browse-right-sidebar-searchable-hover:                  white;
  /* Playlist List */
  --layout__playlist-list-item-even-background:                #141414;
  --layout__playlist-list-fake-even-background:                #141414;
  --layout__playlist-list-item-content-background:             #0c0c0c; /*text description for playlists*/
  --layout__playlist-list-item-hover-color:                    #5b24b2; /*title highlight color*/
  --layout__playlist-list-fake-hover-background:               lightgrey; /*special buttons color*/
  --layout__playlist-list-item-drag-over-background:           #3c3c41;
  --layout__playlist-list-item-drag-over-border:               #818181;
  --layout__playlist-list-item-editing-odd-background:         #1c1c1c; /*editing*/
  --layout__playlist-list-item-editing-even-background:        #1c1c1c; /*editing*/
  --layout__playlist-list-item-editing-drag-over-background:   #1c1c1c; /*editing*/
  --layout__playlist-list-item-editing-content-background:     #1c1c1c; /*editing*/
  --layout__playlist-list-item-editing-description-background: #0c0c0c; /*editing*/
  /* Game Image Split */
  --layout__game-image-split-hover-color:    #575757;
  --layout__game-image-split-disabled-color: #141414;
  /* Home Page */
  --layout__home-page-box-border:     #3f3f3f00; /*that one line to remove*/
  --layout__home-page-box-background: #202020;
  /* Log (at the Log Page) */
  --layout__log-time-stamp:                 #7237cf;
  --layout__log-source:                     lightblue;
  --layout__log-source-background-services: darkgrey;
  --layout__log-source-game-launcher:       #b59a00;
  --layout__log-source-language:            #703596;
  --layout__log-source-redirector:          #009494;
  --layout__log-source-router:              #007a00;
  /* Credits */
  --layout__credits-tooltip-border:           #1c1c1c;
  --layout__credits-tooltip-background:       #1c1c1c;
  --layout__credits-tooltip-roles-background: #1c1c1c;
  /* Log Page */
  --layout__log-page-bar-background: #222222;
  /* Curate Page */
  --layout__curate-entry-collision-color: #efef98;
  /* Developer Page */
  --layout__developer-page-log-background: #0c0c0c;
  --layout__developer-page-log-border:     darkgrey;
  /* Simple Button */
  --layout__simple-button-background: #0c0c0c;
  --layout__simple-button-border: darkgrey;
  /* Header Menu Item */
  --layout__header-menu-item-hover-background: #2e2e2e;
  --layout__header-menu-item-hover-border: #d33682;
  /* Splash Screen */
  --layout__splash-screen_loading:                 #eb4b4b;
  /* Misc */
  --layout__title-bar-cross-color:                 #eb4b4b;
  --layout__no-theme-suggestion-color:             #bfbfbf;
  --layout__footer-scale-slider-icon-color:        grey;
  --layout__footer-scale-slider-background:        #0c0c0c;
  --layout__icon-button-hover-fill:                #b1b1b1; /* Color of "icon buttons" while the cursor is hovering over them. */
  --layout__toggle-sidebar-fill:                   dimgrey;
  --layout__drop-down-content-background-selected: #1e90ff;
}

/*----------ANIMATIONS--------*/

@keyframes colorChange {
  from {background-color: #1c1c1c;}
  to {background-color: #00000000;}
}

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

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 {
  border-radius: 5px;
  background: #5b24b2;
  border: 0px;
  /*color: var(--layout__primary-text-color);*/
  color: white;
  font-weight: bold;
  height: 30px;
  border-radius: 15px;
  padding-left: 12px;
  padding-right: 12px;
}
.simple-button:hover {
  box-shadow: 0px 1px 1px 1px #00000030;
  background: #7237cf;
  border-color: var(--layout__simple-button-border);
}
.simple-button:active {
  box-shadow: inset 0px 1px 1px 1px #00000070;
  background: #4a1899;
  color: lightgrey;
}
.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);
  color:white;
}
.simple-button--red:hover {
  background-color: var(--layout__warning-medium-color);
  border-color: var(--layout__warning-bright-color);
  color:white;
}
/* Simple Selector */
.simple-selector {
  background: #5b24b2;
  border:0px;
  box-shadow: 0px 1px 1px 1px #00000020;
  /*color: var(--layout__primary-text-color);*/
  color: white;
  height: 28px;
  font-weight: bold;
  border-radius: 15px !important;
  padding-left: 5px;
  padding-right: 12px;
}
select option:checked,
select option:hover {
    background: #7237cf !important;
}

.simple-selector:hover {
  background-color: #5b24b2; 
}
.simple-selector:active{
  /*background-color: #5b24b2;*/
}
/* Simple Scroll(bar) */
.simple-scroll::-webkit-scrollbar-track {
  background-color: #0c0c0c00;
  border-radius: 0px;
  border:0px;
  box-shadow: 0px 0px 0px 0px white;
}
.simple-scroll::-webkit-scrollbar-thumb {
  background: var(--layout__scroll-thumb-color);
  color: rgba(0, 0, 0, 0.15);
  border: 0px;
  border-radius: 10px;
}
.simple-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--layout__scroll-thumb-color-hover);
}
.simple-scroll::-webkit-scrollbar-thumb:active {
  background: var(--layout__scroll-thumb-color-active);
  box-shadow: inset 2px 0px 2px 0px #2c2c2c00;
}
/* Simple Input (Input text field) */
.simple-input {
  color: white;
  background-color: #141414;
}
.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--warn {
  background-color: var(--layout__warning-medium-color);
  color:white;
}
/* Checkbox Dropdown */
.simple-dropdown {
  font-family: var(--layout__primary-font);
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
}
.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);
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
}
.input-dropdown--disabled {
  color: var(--layout__disabled-text-color);
}
.input-dropdown__input-field__back {
  background-color: var(--layout__primary-background);
  color: var(--layout__primary-text-color);
}
.input-dropdown__content {
  background-color: var(--layout__tertiary-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 {
  color: var(--layout__highlighted-text-color);
}
.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);
}
.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--router {
  color: var(--layout__log-source-router);
}
.log-page__bar {
  /*background color for top bar goes here with !important*/
}

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


/* ------ 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);*/
  background: #1c1c1c;
  position: relative;
  right: 0px;
  width: 100%;
  z-index: 1;
  height: 10px;
  padding-top: 3px;
  text-align: right;
  overflow: show;
}
/* Minimize Button */
.title-bar__button-bar__min {
  background-image: url('img/min.png');
  filter: invert(100%);
  opacity:1;
}
.title-bar__button-bar__min:hover {
  background-color: lightgrey;
}
/* Maximize Button */
.title-bar__button-bar__max {
  background-image: url('img/max.png');
  opacity:1;
  filter: invert(100%);
}
.title-bar__button-bar__max:hover {
  background-color: lightgrey;
}
/* Cross Button */
.title-bar__button-bar__cross {
  background-image: url('img/cross.png');
  filter: invert(100%);
  opacity:1;
}
.title-bar__button-bar__cross:hover {
  background-color: var(--layout__title-bar-cross-color);
  filter:opacity(100%);
}
.title-bar__title {
  padding-left: 10px;
  padding-top: 2px;
  font-size: 14px;
  font-weight: bold;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: dimgrey;
  font-style: italic;
}


/* ------ Header ------ */
.header {
  position: relative;
  background-color: #1c1c1c !important;
  padding-top: 10px;
  padding-bottom: 10px;
  color:white;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header__menu {
  /*background: blue;*/
  /*border-radius: 0px;*/
  position: relative;
  padding: 0px;top: -2px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 5px;
}
.header__menu{
  visibility: hidden;
}
.header__menu__item:nth-child(1){/*home*/
  background-image: url('img/home1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(2){ /*play*/
  background-image: url('img/play3.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(3){ /*animations*/
  background-image: url('img/watch2.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(4){ /*logs*/
  background-image: url('img/log2.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(5){ /*config*/
  background-image: url('img/config.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(6){ /*about*/
  background-image: url('img/about3.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(7){ /*developer*/
  background-image: url('img/developer.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(8){ /*tags-4/curate-9*/
  background-image: url('img/developer.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(9){ /*tags-4/curate-9*/
  background-image: url('img/developer.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:nth-child(10){ /*tags-4/curate-9*/
  background-image: url('img/developer.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px;
  visibility: visible;
}
.header__menu__item:hover{ /*developer*/
  background-color: white;
  border-radius: 3px;
  opacity: 1;  
}
.header__menu__item:active{ /*developer*/
  background-color: white;
}

/*.header__menu__item:first-child:nth-last-child(10),
.header__menu__item:first-child:nth-last-child(10) ~ .header__menu__item {
  background-image: none;
}*/
.header__menu__item:first-child:nth-last-child(11),
.header__menu__item:first-child:nth-last-child(10) ~ .header__menu__item:nth-child(4) {
  background-image: url('img/tags.png');
}
.header__menu__item:first-child:nth-last-child(11),
.header__menu__item:first-child:nth-last-child(10) ~ .header__menu__item:nth-child(5) {
  background-image: url('img/category.png');
}
.header__menu__item:first-child:nth-last-child(11),
.header__menu__item:first-child:nth-last-child(10) ~ .header__menu__item:nth-child(6) {
  background-image: url('img/log2.png');
}
.header__menu__item:first-child:nth-last-child(11),
.header__menu__item:first-child:nth-last-child(10) ~ .header__menu__item:nth-child(7) {
  background-image: url('img/config.png');
}
.header__menu__item:first-child:nth-last-child(11),
.header__menu__item:first-child:nth-last-child(10) ~ .header__menu__item:nth-child(8) {
  background-image: url('img/about3.png');
}
.header__menu__item:first-child:nth-last-child(11),
.header__menu__item:first-child:nth-last-child(10) ~ .header__menu__item:nth-child(9) {
  background-image: url('img/curate.png');
}

.header__menu__item{
  /*background: green;*/
  border-radius: 0px;
  padding-top: 4px; 
  opacity: 0.6;
  filter:invert(100%);
  padding-bottom: 0px;
  transition: 0.1s;
  border-radius: 5px !important;
  width: 36px;
  height: 36px;
  margin-left: 3px;
  margin-right: 5px;
}
.header__menu__item__link {
  /*background: red;*/
  /*border-color: var(--layout__header-menu-item-hover-border);*/
  position: relative;
  margin-top: -6px;
  margin-left: -1px;
  /*border-radius: 5px;*/
  text-align: center;
  cursor: pointer;
  border: 0px;
  width: 36px;
  border-radius: 5px;
  height: 36px;
  transition: 0.2s;
  color: #FFFFFF00;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header__menu__item__link:hover{

  text-decoration: underline !important;
  color: #FFFFFF00;
  box-shadow: 0px 0px 0px 0px white;
  background-color: #FFFFFF00;
}
.header__menu__item__link:active{
  box-shadow: 0px 0px 0px 0px red;/*red*/
}
.header__menu__item:hover {
  border-color: var(--layout__header-menu-item-hover-border);
  cursor: pointer;
}
.header__menu__item:active {

  border-color: var(--layout__header-menu-item-hover-border);
  color:purple;
  text-decoration: underline;
  border-radius: 0px;
  cursor: pointer;
  border: 0px;
}
.header__search__input{
  background: #141414 !important;
}
.header__search {
  border: 1px solid var(--layout__primary-outline-color);
  border-radius: 50px;
  padding:5px;
  padding-left: -10px !important;
  margin-left: -10px !important;
  border-left: -10px solid white: 
  position: fixed !important;
  background-color: #141414;
  /*
  position: absolute;
  left: 30%;*/
}
.header__search__input {
  color: var(--layout__primary-text-color);
}
.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{
  top: 12px;
  position: relative;
}
.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);
}

/* ------ Footer ------ */
.footer {
  background-color: #1c1c1c;
  box-shadow: 0px -1px 2px #00000080;
  color: dimgrey;
}
/* Scale Slider */
.footer__scale-slider__inner {
  background-color: var(--layout__footer-scale-slider-background);
  border-radius: 0px;
}
.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: 15px;
  width: 25px; 
  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);
}


/* ------ Home ------ */
/* HomePage Box */
.home-page__box {
  border-color: var(--layout__home-page-box-border);
  background-color: var(--layout__home-page-box-background);
  /*box-shadow:  5px 5px 10px #cacaca, 
             -5px -5px 10px #ffffff;*/
  border: 0px;
  border-radius: 3px;
  background: #FFFFFF00;
}
.home-page__box-head {
  border-bottom-color: var(--layout__home-page-box-border);
  text-align: left;
  margin-left: -10px;
  background-color: #FFFFFF00;
  font-size: 18px;
  padding:5px;
  border: 0px;

}
.home-page__box-body{
  box-shadow: 0px 1px 1px 1px black;
  border: 0px;
  padding:5px;
  background: #1c1c1c;
  border-radius: 12px;
}

/* HomePage Box - Upgrades */
.home-page__box--upgrades .home-page__grayed-out {
  color: var(--layout__disabled-text-color);
  border: 0px !important;
}


/* ------ About ------ */
.about-page__title{
    margin-bottom: -20px;
    padding-top: 20px;
}
.about-page__section__title{
  padding-bottom: 3px;
}
.about-page__section {
  /*background-color: var(--layout__tertiary-background);*/
  background-color: #1c1c1c;
  box-shadow: 0px 1px 1px 1px black;
  padding:10px;
  border-radius: 12px;
}
.about-page__credits{
  margin-top: 31px;
  background-color: #1c1c1c;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  border-radius: 12px;
  box-shadow: 0px 1px 1px 1px black;
}
/* Credits */
.about-page__credits__tooltip {
  border-color: var(--layout__credits-tooltip-border);
  background-color: var(--layout__credits-tooltip-background);
  box-shadow: 0px 1px 1px 1px #000000;
  border-radius: 12px;
  padding:10px; 
}
.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);
}
.about-page__credits__profile {
  clip-path: none; /* Disable Image Rounding */
  background-color: black;
  border-radius: 2px;
  margin:5px;
  box-shadow: 0px 1px 1px 1px #000000;
  transition: 0.1s;
}
.about-page__credits__profile:hover {
  box-shadow: 0px 0px 0px 3px black, 0px 0px 0px 4px #FFFFFF30;
}

/* ------ Curate ------ */
/* Curate Page Top */
.curate-page-top {
  border-color: var(--layout__tertiary-background);
  background-color: var(--layout__quaternary-background);
}
/* Curate Box */
.curate-box {
  background-color: var(--layout__tertiary-background);
  border-color: var(--layout__primary-outline-color);
  border-radius: 3px;
  border:0px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* 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 {
  cursor: default;
}
/* Curate Box Buttons */
.curate-box-buttons__button--active:hover { /* ":hover" to get higher specificity */
  background-color: var(--layout__warning-medium-color);
  color: white;
}


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


/* ------ Browse ------ */
.game-browser {
  background-color: var(--layout__primary-background);
}
/* Sidebar */
.game-browser__sidebar {
  /*background-color: #eeeeee;*/
}
.game-browser__sidebar__divider {
  background-color: var(--layout__browse-sidebar-divider-background);
  width: 2px;
  /*box-shadow:  3px 3px 1px red, 
             -3px -3px 1px blue,
              inset 2px 2px 0px #ffffff;*/
}
.browse-right-sidebar--edit-disabled .browse-right-sidebar__searchable:hover {
  color: var(--layout__browse-right-sidebar-searchable-hover);
}
/* Browse-Right-Sidebar Additional-Application */
.browse-right-sidebar__additional-application:nth-child(2n) {
  background-color: var(--layout__tertiary-background);
}
/* 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);
}
/* 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);
}
/* 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);
}


/* 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);
}
/* 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);
  border-radius: 5px;

}
.game-grid-item:hover {
  background-color: var(--layout__game-item-background-hover);
  color: lightgrey;
  text-decoration: underline 0px #00000000;
  box-shadow: inset 0px 0px 1px 1px #00000020;
}
.game-grid-item--selected {
  background-color: var(--layout__game-item-background-selected);
  /*color: var(--layout__game-item-color-selected);*/
  color: darkgrey;
  text-decoration: underline 0px #00000000;
  background-color: black;
  box-shadow: inset 0px -1px 1px 1px #00000015;
}
.game-grid-item--selected:hover {
  background-color: var(--layout__game-item-background-selected-hover);
  /*color: var(--layout__game-item-color-selected-hover);*/
  color: lightgrey;
  box-shadow: inset 0px 0px 1px 1px #00000020, 0px 1px 0px 0px black;
}
.game-grid-item__thumb__image {
  background-color: #222222;
  border: 0px;
  box-shadow: 0px 1px 1px 1px #00000020;

  border-radius: 10px;
  image-rendering: var(--layout__game-item-thumb-image-rendering);
}


.game-grid-item--selected .game-grid-item__thumb__image {
  
}


.game-grid-item__thumb__image:hover {
  /*background-color: #141414;*/
  /*background-repeat: repeat !important;
  padding-left: 1px;*/ 
}
.game-grid-item__thumb{

  
}
/* Playlist-List-Item */
.playlist-list-item {
  /*background-color:  !important;*/
  color: var(--layout__secondary-text-color);
}
.playlist-list-item:nth-child(2n) { /*every second item*/
  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);
  color: white;
}
.playlist-list-item--editing {
  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--editing:hover,
.playlist-list-item--editing.playlist-list-item--drag-over {
  background-color: var(--layout__playlist-list-item-editing-drag-over-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: #5c5c5c;
}
.playlist-list-item__head:hover,
.playlist-list-item--drag-over .playlist-list-item__head {
  --color: var(--layout__playlist-list-item-hover-color);
  background-color: #1c1c1c;
}
.playlist-list-item__head__icon__no-image__icon .icon__use {
  fill: var(--color);
}
/* Playlist-List-Item Content */
.playlist-list-item__content {
  background-color: var(--layout__playlist-list-item-content-background);

}
.playlist-list-item--editing .playlist-list-item__content {
  background-color: var(--layout__playlist-list-item-editing-content-background);
  color: var(--layout__highlighted-text-color);

}
.playlist-list-item__content__description-edit {
  background-color: var(--layout__playlist-list-item-editing-description-background);
}
/* 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);
  background-color: #4a1899;
  box-shadow: inset 0px 0px 0px 1px #00000020;
}
.playlist-list-fake-item__inner .icon__use {
  fill: var(--color);
}
.playlist-list-fake-item__inner__title {
  color: var(--color);
}

.playlist-list-item__content__inner {
  background-color: #141414;
  /* Border */
  border: 0px solid silver;
  box-shadow: inset 0px 0px 0px 1px #00000020;
  font-size:14px;
}

/** ------ Developer ------ */
.developer-page__log {
  background-color: var(--layout__developer-page-log-background);
  border-color: var(--layout__developer-page-log-border);
  color: white;
  border: 0px;
  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1);
  border-radius: 3px;
}
/* Service Box */
.service-box {
  background-color: var(--layout__quaternary-background);
  border-color: var(--layout__tertiary-background);
  box-shadow: 0px 1px 1px 1px #00000020;
  border-radius: 12px;
}
.service-box__log {
  background-color: var(--layout__primary-background);
}

/** ------ Config ------ */
/* Setting */
.setting__body {
  box-shadow: 0px 1px 1px 1px black;
  border: 0px;
  padding:5px;
  background: #1c1c1c;
  border-radius: 12px;
}
/* Setting Row */
.setting__row {
  padding: 0.75em;
}
.setting__row:not(:first-child) {
  border-top-color: #00000010;
  border-top-width: 2px;
}
/* Setting Row Content - FilePoint Path */
.setting__row__content--filepath-path .flashpoint-path__input {
  border-color: var(--layout__primary-outline-color);
  padding:1px;
}
.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: white;
}
/* 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);
  background-color:#222222!important;
}
/* Setting Row Content - Input Field */
.input-dropdown__content {
  color: #F2f2f2f2;
}
/* 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--input-field > :first-child {
  /* Border */
  border: 1px solid #303030;
  color:lightgrey;
}
.settings{
    padding-bottom: 15px;
}
h1{
  padding-top: 15px;
}
.setting__title{
  padding-bottom: 3px;
  text-align: left !important;
  position: relative;
  width: 100%;
}


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