/*
  ==Theme==
  @name              /f/
  @version           1.0
  @description       Yotsuba-like theme to imitate the feel of the legendary upload board.
  @author            Shady
  @launcher-version  11.1
  ==/Theme==
*/

:root {
	
	/* The following values weren't tested very well and serve just as a failsafe for the case of an update utilizing these variables */
	/* Most of these values aren't probably used anywhere when this theme is active. */
	
	/* Confirm */
	--layout__confirm-color:        #fff974;
	--layout__confirm-hover-color:  #ffd990;
	--layout__confirm-active-color: #efdc4b;
	/* Warning */
	--layout__warning-dark-color:   #5a3c10;
	--layout__warning-medium-color: #9f5b1e;
	--layout__warning-bright-color: #c1721f;
	--layout__warning-shallow:      #f78800;
	/* Valid / Invalid */
	--layout__valid-color:   #ffceb5;
	--layout__invalid-color: #af7878;
	/* Text Color */
	--layout__primary-text-color:     maroon;
	--layout__secondary-text-color:   black;
	--layout__highlighted-text-color: rgb(192 0 0 / 1);
	--layout__disabled-text-color:    #976262;
	--layout__disabled-text-color-2:  #6c3030;
	--layout__contrast-text-color:    #191919;
	/* Background */
	--layout__quaternary-background: #ffffff;
	/* Outline Color */
	--layout__primary-outline-color: maroon;
	/* Scrollbar */
	--layout__scroll-thumb-color:        #bcbcbc;
	--layout__scroll-thumb-color-hover:  #8d8d8d;
	--layout__scroll-thumb-color-active: #555555;
	/* Slider */
	--layout__slider-background:        #8d919c;
	--layout__slider-background-hover:  #73767e;
	--layout__slider-background-active: #404247;
	/* Right Browse Sidebar */
	--layout__browse-right-sidebar-searchable-hover:                  #f3b37d;
	/* Game Image Split */
	--layout__game-image-split-hover-color:    #575757;
	--layout__game-image-split-disabled-color: #141414;
	/* Curate Page */
	--layout__curate-entry-collision-color: #ffaa5c;
	/* Simple Button */
	--layout__simple-button-background: buttonface;
	--layout__simple-button-border: buttontext;
	/* Header Menu Item */
	--layout__header-menu-item-hover-background: #ffa077;
	--layout__header-menu-item-hover-border: #d37736;
	/* Splash Screen */
	--layout__splash-screen_loading:                 #ffd299;
	/* Misc */
	--layout__title-bar-cross-color:                 #eb4b4b;
	--layout__no-theme-suggestion-color:             #fce2c1;
	--layout__icon-button-hover-fill:                red; /* Color of "icon buttons" while the cursor is hovering over them. */
	--layout__toggle-sidebar-fill:                   #cccccc;
	--layout__drop-down-content-background-selected: #ffbd1e;
	/* Flashpoint */
	--layout__flashpoint-red: maroon;
	
	/*----------------------END OF FAILSAFE VALUES----------------------*/
	
	--layout__primary-text-color: maroon;
	--layout__secondary-text-color: #900;
	--layout__primary-background: #ffe;
	--layout__secondary-background: #fed6af;
	--layout__tertiary-background: #ea8;
	--layout__footer-scale-slider-background: var(--layout__primary-background);
	--layout__primary-font: arial,helvetica,sans-serif;
	--layout__header-menu-item-hover-background: #0000;
	--layout__header-menu-item-hover-border: #0000;
	--layout__scroll-thumb-color: #c1c1c1;
	--layout__scroll-thumb-color-hover: #c1c1c1;
	--layout__scroll-thumb-color-active: #c1c1c1;
	--layout__game-list-item-background-even: #ede2d4;
	--layout__game-list-item-background-odd: var(--layout__primary-background);
	--layout__playlist-list-item-even-background: #f0e0d6;
	--layout__playlist-list-fake-even-background: var(--layout__playlist-list-item-even-background);
	--layout__game-item-background-selected: #e6bdbd;
	--layout__game-item-background-hover: #f0d6d6;
    --layout__game-item-background-selected-hover: var(--layout__game-item-background-hover);
	--layout__playlist-list-item-editing-description-background: #feeace;
	--layout__background-faded:      #0000;
	
	--layout__log-source:                     #787878;
	--layout__log-source-background-services: #212121;
	--layout__log-source-game-launcher:       #bd671c;
	--layout__log-source-language:            #8d43bd;
	--layout__log-source-redirector:          #00b1b1;
	--layout__log-source-server:              #00b800;
	--layout__log-source-curation:            #e7c809;
}

.main {
	background: #ffe url(img/fade.png) top center repeat-x;
	color: #800;
}

:link, a, .clickable-url {
	color: #00e;
	text-decoration: none;
}

:link:hover, :link:active, a:hover, a:active, .clickable-url:hover, .clickable-url:active {
	color: red!important;
}

.simple-scroll {
    --scrollbar-size: unset;
}

.title-bar {
    background-color: var(--layout__tertiary-background);
	height: 28px;
    line-height: 28px;
	padding: 0 0 0 3px;
    font-weight: normal;
	font-size: 10pt;
	border: 1px solid #800;
	border-top: 0;
}

.title-bar__inner {
	height: inherit;
    display: block;
}

.title-bar__title {
	color: #800;
	overflow: visible;
	top: 0;
}

.title-bar__button-bar {
	top: 3px;
    height: 21px;
	display: table-cell;
}

.title-bar__button-bar__cross {
    background-image: url(img/cross.png);
	-webkit-background-size: cover;
	opacity: 1;
    margin-right: 3px;
    margin-left: 2px;
	width: 21px;
	height: 21px;
}

.title-bar__button-bar__max {
    background-image: url(img/max.png);
	-webkit-background-size: cover;
	opacity: 1;
    margin: 0 2px;
	width: 21px;
	height: 21px;
}

.title-bar__button-bar__min {
    background-image: url(img/min.png);
	-webkit-background-size: cover;
	opacity: 1;
    margin: 0 2px;
	width: 21px;
	height: 21px;
}

.title-bar__button-bar__cross:hover, .title-bar__button-bar__max:hover, .title-bar__button-bar__min:hover {
    background-color: #cc9e80;
}

.header {
	background: url(img/header-fade.png) top center repeat-x;
}

.header__menu__item__link {
	color: var(--layout__secondary-text-color);
	padding: 0.25em;
}

.header__menu__item__link::before {
  content: "[";
}

.header__menu__item__link::after {
  content: "]";
}

.header__menu__item__link-selected {
	font-weight: normal;
}

.input-field {
	color: black;
}

.header__search {
	background-color: white;
	border: 1px solid #aaa;
	margin-right: 0.5em;
	width: fit-content;
}

.header__search:focus-within {
	border: 1px solid #ea8!important;
}

.simple-selector {
	background-color: field;
	color: fieldtext;
    font-size: 13px;
}

.input-dropdown__content label:hover, .input-dropdown__content label:focus {
	background-color: #ccc;
}

.task-bar--header {
	background-color: var(--layout__tertiary-background);
}

.task-bar {
	background-color: var(--layout__primary-background);
	color: maroon;
}

.task-progress-bar {
	background-color: #ffa476;
	color: maroon;
}

.task-progress-bar--fill {
	background-color: #fff17c;
}

.footer__scale-slider__input::-webkit-slider-thumb {
	background: var(--layout__tertiary-background);
}

.footer__scale-slider__input::-webkit-slider-thumb:hover {
	background: var(--layout__tertiary-background);
	filter: brightness(0.75);
}

.floating-container {
	background-color: var(--layout__secondary-background);
	border-top: 14px solid var(--layout__tertiary-background);
}

.confirm-dialog__message {
	font-weight: normal;
}

.confirm-dialog__buttons>.simple-button {
	width: 25%;
	overflow: visible;
}

/* Home */

.fp-logo {
	background: #a22020;
}

.home-page__box {
	background: #fff;
	border: 1px solid;
	margin-bottom: .5em;
	padding-bottom: .5em;
}

.home-page__box-head {
	background: #fca;
}

.home-page__box-head--minimize {
	background: #fca;
}

.home-page__box-head--minimize:hover {
	background: #dcb092;
}

.icon:not(.icon--tag)>use {
	fill: maroon!important;
}

.icon--trash:hover>use,
.icon--pencil:hover>use,
.icon--chevron-top:hover>use,
.icon--chevron-bottom:hover>use,
.icon--chevron-right:hover>use,
.icon--chevron-left:hover>use,
.icon--caret-top:hover>use,
.icon--caret-bottom:hover>use,
.icon--layers:hover>use,
.icon--delete:hover>use,
.icon--plus:hover>use,
.icon--file:hover>use,
.icon--box:hover>use,
.icon--data-transfer-download:hover>use {
	fill: red!important;
}

.game-grid-item {
	border: #d9bfb7;
	background-color: #f0e0d6;
	color: #cc1105
}

.game-grid-item--selected, .game-grid-item {
	background-color: #ede2d4;
	color: maroon;
}

.game-grid-item--selected {
	background-color: #e6bdbd!important;
    color: inherit;
}

.game-grid-item--selected:hover, .game-grid-item:hover {
	background-color: #d99f91;
	color: maroon;
}

.game-grid-item__thumb__image {
	background-color: var(--layout__game-list-item-background-odd);
	background-color: #0000;
	background-position: bottom;
}

.game-grid-item__thumb__image {
	border: 0;
	box-shadow: unset;
}

.home-page__box-item--gotd-author {
	color: #117743;
	font-weight: 700;
}

.home-page__box-item--gotd-author > b {
	color: #800
}

.simple-button, .react-datepicker__input-container > input {
	background-color: buttonface;
	color: buttontext;
	border-color: rgb(118, 118, 118);
}

.react-datepicker__current-month, .react-datepicker__day-name, .react-datepicker__day {
	color: black;
}

.simple-button:hover:not(:disabled){
	background-color: #ddd;
}

.simple-button:disabled:hover {
	background-color: buttonface;
}

.react-datepicker {
	background-color: #eee;
	border: #000;
}

.react-datepicker__header {
	background-color: #ddd;
	border: #000;
	color: black;
}

.react-datepicker__day--selected {
	background-color: #aaa;
}

.react-datepicker__day--selected:hover, .react-datepicker__day:hover {
	background-color: #ccc;
}

.home-page__box-item--platforms>.simple-center__vertical-inner>p {
	font-size: 116%;
	font-weight: 700;
	margin-block-start: 1em;
    margin-block-end: 1em;
}

.home-page__platform-entry:hover {
    background-color: #0000;
}

/* Games / Animations */

.game-list-header__scroll-fill, .game-list-header-column__title,
.tag-list-header__scroll-fill, .tag-list-header-column__title {
	background: var(--layout__secondary-background);
}

.game-list-header-column>div,
.tag-list-header-column>div {
	background-color: #ea8;
    border: 1px solid #800;
}

.game-list-header__right>.game-list-header-column>div,
.tag-list-header__right>.tag-list-header-column>div {
    color: #800;
    font-weight: 700;
	margin-left: 2px;
	margin-right: 1px;
}

.game-list-header-column:not(.game-list-header-column--title):first-child>div {
	border-right: none;
	margin-right: 0;
}

.game-list-header-column:not(.game-list-header-column--title):nth-child(2)>div {
	border-left: none;
	margin-left: 0;
}

.game-list-header__right>div>div {
    justify-content: center;
}

.game-list-item {
	background-color: var(--layout__game-list-item-background-odd);
}

.game-list-item--even {
	background-color: var(--layout__game-list-item-background-even);
}

.game-list-item__field--title, .browse-right-sidebar__title-row__title {
	color: #cc1105;
    font-weight: 700;
}

.game-list-item__field--developer, .browse-right-sidebar__top .browse-right-sidebar__searchable {
	color: #117743;
    font-weight: 700;
}

.game-list-item:hover, .game-list-item--selected {
    background-color: #f0d6d6!important;
    color: inherit;
}

.game-browser__sidebar {
	background: unset;
	color: maroon;
}

.game-browser__sidebar__divider {
	background-color: unset;
}

.tag-static:before {
	content: "[ ";
}

.tag-static:after {
	content: " ]";
}

.tag-label {
    flex-grow: unset;
}

.input-dropdown {
	color: unset;
}

.tag-label:hover, .tag-static:hover, .browse-right-sidebar__searchable:hover {
	color: red!important;
}

.browse-right-sidebar__play-button--download, .browse-right-sidebar__play-button, .browse-right-sidebar__play-button--running {
    background-color: buttonface!important;
    color: buttontext!important;
    padding: 1px 6px!important;
    border-width: 2px!important;
    border-style: outset!important;
    border-color: buttonborder!important;
    border-image: initial!important;
}

.browse-right-sidebar__play-button--busy {
	background-color: rgba(239, 239, 239, 0.3)!important;
    color: rgba(16, 16, 16, 0.3)!important;
    border-color: rgba(118, 118, 118, 0.3)!important;
	cursor: wait!important;
}

.browse-right-sidebar__play-button--download:hover, 
.browse-right-sidebar__play-button:hover, 
.browse-right-sidebar__play-button--text:hover,
.browse-right-sidebar__play-button--dropdown:hover,
.browse-right-sidebar__play-button--running:hover {
	background-color: #ddd!important;
}

.browse-right-sidebar__play-button {
	background-color: var(--layout__primary-background);
	color: #00e;
}

.progress-bar__bar {
	display: none;
}

.progress-bar__top-text {
	background-color: white;
	font-family: monospace;
	text-align: left;
	font-size: 16px;
	padding: 1em;
}

.progress-bar__top-text:after {
	content: "...";
}

.placeholder-download-bar--title {
	margin-bottom: 0.5em;
}

.browse-left-sidebar {
	border: 1px solid #d9bfb7;
	margin: 12px;
}

.playlist-list-item {
	background-color: var(--layout__playlist-list-item-even-background);
}

.playlist-list-item--drag-over {
	background-color: var(--layout__playlist-list-item-even-background)!important;
}

.playlist-list-item:hover {
	background-color: var(--layout__playlist-list-item-even-background);
}

.playlist-list-fake-item * {
	font-weight: bold;
	cursor: default;
}

.playlist-list-fake-item:hover {
	background-color: var(--layout__playlist-list-item-even-background);
}

.playlist-list-fake-item:hover {
    --color: maroon;
}

.playlist-list-fake-item__inner__title {
	color: inherit;
	padding-left: 0;
}

.playlist-list-fake-item__inner__title:hover {
	color: red;
	cursor: pointer;
}

.playlist-list-fake-item__inner>svg, .playlist-list-fake-item__inner>svg>use {
	margin-right: 0.5rem;
}

.playlist-list-item--editing:nth-child(2n) {
	background-color: #d99f91;
}

.icon--question-mark>use {
	fill: maroon!important;
}

.playlist-list-item__head, .playlist-list-fake-item {
	cursor: default;
}

.playlist-list-item__title>.playlist-list-item__text-field {
	font-weight: normal;
	color: #00e;
	cursor: pointer;
}

.playlist-list-item__title>.playlist-list-item__text-field:hover {
	color: red;
	text-decoration: underline;
}

.playlist-list-item__text-field {
	color: inherit;
}

.playlist-list-item__divider>.simple-center__inner {
	font-style: italic;
}

.playlist-list-item__divider>.simple-center__inner:hover {
	color: maroon;
}

.playlist-list-item__author>.playlist-list-item__text-field {
	color: #117743;
    font-weight: 700;
}

.playlist-list-item__head:hover, .playlist-list-item--drag-over .playlist-list-item__head {
	color: inherit;
}

.playlist-list-content {
	background-color: #d99f91;
	color: maroon;
}

.playlist-list-content__buttons use {
	fill: maroon;
}

/* Tags */

.icon--arrow-right>use {
	fill: maroon;
}

.tag-list-item__field--name:before {
	content: "[";
}

.tag-list-item__field--name:after {
	content: "]";
}

/* Categories */

.tag-list-item--selected, .tag-list-item:hover, .tag-list-item--selected:hover {
	color: inherit;
}

.tag-categories__color-preview {
	color: white;
}

/* Logs */
.log {
	color: inherit;
	background-color: var(--layout__primary-background);
}

.log-page__bar {
	background-color: var(--layout__secondary-background);
}

/* Config */

.setting {
	background-color: var(--layout__playlist-list-item-even-background);		
	border: 1px solid inherit;
}

.setting__body {
	background-color: inherit;
	border: 0;
	border-radius: 0;
	border-top: 1px solid #d9bfb7;
	margin: 0 1%;
	box-shadow: unset;
}

.setting__title {
	font-size: 1.25em;
}

.setting__row__title {
	font-size: 13px;
}

.setting__row:not(:first-child) {
	border: 0;
}

.slider {
	background-color: #925f5f;
}

.slider-checked {
	background-color: #ffbc8e;
}

.setting__row__content--filepath-path .flashpoint-path__input--valid, .simple-input, .input-dropdown__input-field__back {
	background-color: white;
}

.setting__row__content--override-row__delete>use {
	fill: black;
}

/* About */

.about-page__credits__profile {
	clip-path: unset;
}

.about-page__credits__tooltip {
  border-color: var(--layout__tertiary-background);
  background-color: var(--layout__primary-background);
  padding: 4px;
}

.about-page__credits__tooltip__title {
  color: #117743;
  font-weight: 700;
  margin-bottom: 0.25em;
}

.about-page__credits__tooltip__note {
  color: var(--layout__disabled-text-color);
  font-style: italic;
  margin-bottom: 0.5em;
}

.about-page__credits__tooltip__roles {
	list-style-type: none;
	padding: 0;
}

.about-page__credits__tooltip__roles p {
  background-color: var(--layout__primary-background);
  font-weight: 700;
}

.about-page__credits__tooltip__roles p:before {
	content: "## ";
}

/* Curate */

.curate-page-keybinds-box {
	background-color: var(--layout__primary-background);
}

.curate-page-keybinds-box h3 {
	margin-bottom: 0.5em;
}

.curate-page-keybinds-box-row td {
	display: inline;
	font-size: 13px;
}

.curate-page-keybinds-box-row td:first-child {
	border-right: 0;
}

.curate-page-keybinds-box-row td:first-child:after{
	content: "— "
}

.curate-page-keybinds-box-combo {
	background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 #ccc, 0 0 0 2px #fff inset;
    font-family: monospace;
    font-size: 11px;
    line-height: 1.4;
    padding: 0 5px;
    color: #000;
}

.curate-page__center {
	background: #ffe url(img/fade.png) top center repeat-x;
}

.curate-box__columns .simple-columns__column {
	background-color: #f0e0d6;
	border: 1px solid #d9bfb7!important;
}

.curate-page__center .curate-box-row__content {
	background-color: white;
	border: 1px solid maroon;
}

.curate-page__center .simple-input, .curate-page__center .input-dropdown__input-field__back {
	background-color: inherit;
}

.curate-page svg > use {
	fill: maroon;
}

.curate-box-row {
	margin: 1px;
}

.curate-box-row__title {
	background-color: #ea8;
    color: #800;
    font-weight: 700;
    border: 1px solid #800;
    padding: 0 5px;
    font-size: 10pt;
}

.input-dropdown__content {
	background-color: white;
	color: black;
}

.curate-box textarea, .curate-box .input-field, .curate-box .input-dropdown__input-field__back {
	margin: 0;
    padding: 2px 4px 3px;
    border: 1px solid #aaa;
    outline: none;
    font-family: arial,helvetica,sans-serif;
    font-size: 10pt;
}

.curate-box input[type=button], .curate-box input[type=submit] {
	padding: 1px 6px;
	background-color: buttonface;
	border-style: outset;
    border-radius: 3px;
}

.input-dropdown__input-field__button {
	background-image: url("img/down.png");
}

.input-dropdown__input-field__button:before {
	display: none;
}

.curate-box .curate-box-row__content {
	border: 0;
}

.curate-box .tag_alias-joiner {
	color: black;
	font-weight: normal;
}

.curate-box .tag_alias-joiner:before {
	content: "-";
}

.curate-box .tag-count {
	color: black;
}

.curate-tag {
	background-color: var(--layout__secondary-background);
}

.curate-tag:hover {
	background-color: var(--layout__tertiary-background);
}

/* Developer */

.service-box {
	background-color: var(--layout__secondary-background);
}

/* Scrollbar */
/* Copied from the Millenium theme made by MagnificentNoodle and modified */
.simple-scroll {
  --scrollbar-size: 16px;
  border: 1px solid;
  /* Inner Main Beveled Border */
  border-top-color: #0000;
  border-left-color: #ccc;
  border-bottom-color: #aaa;
  border-right-color: #aaa;
}
.simple-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
.simple-scroll::-webkit-scrollbar-thumb {
  background-color: #d1d1d1;
  border-radius: 0px;
  border: 1px solid;
  /* Outer Beveled Border */
  border-left-color: #ccc;
  border-top-color: #ccc;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  /* Inner Beveled Border */
  box-shadow:
    1px 1px var(--layout__primary-background) inset,
    -1px -1px var(--theme__primary-border-color) inset;
}
.simple-scroll::-webkit-scrollbar-track {
  background-image: url('img/scrollbar_track_bg.png');
  box-shadow: none;
  border-radius: 0px;
}
.simple-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
::-webkit-scrollbar-button:single-button {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-color: #d1d1d1;
  border: 1px solid;
  /* Outer Beveled Border */
  border-left-color: #ccc;
  border-top-color: #ccc;
  border-right-color: #aaa;
  border-bottom-color: #aaa;
  /* Inner Beveled Border */
  box-shadow:
    1px 1px var(--layout__primary-background) inset,
    -1px -1px var(--theme__primary-border-color) inset;
}
/* Scroll Bar Buttons */
::-webkit-scrollbar-button:single-button:active {
  border-color: #777;
  box-shadow: none;
  background-position: 1px 1px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url('img/up.png');
  background-position: -1px -1px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  background-position: 0px 0px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url('img/down.png');
  background-position: -1px -1px;
}
::-webkit-scrollbar-button:single-button:vertical:increment:active {
  background-position: 0px 0px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url('img/left.png');
  background-position: 4px 3px;
}
::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
  background-position: 5px 4px; /* 3D Depth Effect */
}
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url('img/right.png');
  background-position: 5px 3px;
}
::-webkit-scrollbar-button:single-button:horizontal:increment:active {
  background-position: 6px 4px; /* 3D Depth Effect */
}