/* ====== CORE ======
 * 
 * Contains all styles that are necessary for the application to be used.
 * This includes styles that set things like position, size, "user-select" etc.
 * 
 * The application should be completely usable with this style-sheet only.
 * 
 */

/* ------ General ------ */
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
*:focus {
  outline: none;
}
*:visited {
  color: inherit;
}
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
:root {
  /* Root font size (Scales most stuff) */
  font-size: 1em;
  font-weight: 100;
}

body {
  overflow: hidden;
}

/* Measure elements by the outline of their border instead of by their content */
:root {
  box-sizing: border-box;
}
*, ::before, ::after {
  box-sizing: inherit;
}


/* ------ Icons ------ */
.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}


/* ------ Generic & Re-usable ------ */
/* Simple Center */
.simple-center {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.simple-center__inner {
  display: inline-block;
  text-align: center;
}
.simple-center__vertical-inner {
  display: inline-block;
  margin-left: 0.1rem;
}
/* Simple Button */
.simple-button {
  padding: 0 0.2em;
  font-size: 1em;
  border: 1px solid;
  user-select: none;
}
/* Simple Selector */
.simple-selector {
  margin-right: 0.5em;
  font-size: 1em;
  font-weight: 100;
  border: 1px solid;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Hidden Slider */
.hidden-slider {
  -webkit-appearance: none;
  font-size: 1em;
  --slider-size: 1em;
}
.hidden-slider::-webkit-slider-runnable-track {
  height: 100%;
  cursor: pointer;
}
.hidden-slider::-webkit-slider-thumb {
  width: var(--slider-size);
  height: var(--slider-size);
  -webkit-appearance: none;
  cursor: pointer;
}
/* Simple Vertical Shake */
.simple-vertical-shake {
  animation: simple-vertical-shake 0.7s ease-in-out both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  --vertical-shake-amount: 0.125rem;
}
@keyframes simple-vertical-shake {
  20% {
    transform: translate3d(0, -calc(3 * var(--vertical-shake-amount)), 0);
  }
  40% {
    transform: translate3d(0, calc(1 * var(--vertical-shake-amount)), 0);
  }
  60% {
    transform: translate3d(0, -calc(1 * var(--vertical-shake-amount)), 0);
  }
  80% {
    transform: translate3d(0, calc(1 * var(--vertical-shake-amount)), 0);
  }
}
/* Simple Scroll(bar) */
.simple-scroll {
  --scrollbar-size: 0.85rem;
}
.simple-scroll::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
.simple-scroll::-webkit-scrollbar-corner {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
/* Simple Input (Input text field) */
.simple-input {
  border: none;
}
/* Simple Disabled Text */
.simple-disabled-text {
  cursor: default;
  user-select: none;
  font-style: italic;
}
/* Input Field */
.input-field {
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.input-field--edit {
  width: 100%;
}
.input-field.input-field--multiline {
  display: block;
  font-size: 0.9em;
  width: 100%;
  min-height: 1rem;
  resize: vertical;
  white-space: pre-wrap;
}
.input-field--multiline.input-field--edit {
  height: 10em;
}
/* Checkbox Dropdown */
.checkbox-dropdown {
  --width: 11rem;
  width: var(--width);
}
.checkbox-dropdown__select-box {
  position: relative;
  width: 100%;
  padding: 0 0.1rem;
  /* Pimp */
  appearance: menulist-button;
  -webkit-appearance: menulist-button;
  border: 1px solid;
}
.checkbox-dropdown__content {
  width: var(--width);
  display: block;
  position: absolute;
  /* Pimp */
  border: 1px solid;
}
.checkbox-dropdown__content--hidden {
  display: none;
}
.checkbox-dropdown__content label {
  display: flex;
}
.checkbox-dropdown__content label p {
  display: inline-block;
  overflow: hidden;
}
/* Input Dropdown */
.input-dropdown {
  position: relative;
  height: 100%;
}
.input-dropdown__input-field {
  position: relative;
  display: flex;
  width: 100%;
  /*padding: 0 0.1rem;*/
}
.input-dropdown__input-field__back {
  width: 100%;
  height: 100%;
  position: absolute;
  user-select: none;
  cursor: default;
  /* Pimp */
  appearance: menulist-button;
  -webkit-appearance: menulist-button;
  border: none;
}
.input-dropdown__input-field__input {
  position: relative;
  flex: 1 1 auto;
}
.input-dropdown__input-field__input__inner {
  background: none;
}
.input-dropdown__input-field__button {
  position: relative;
  width: 1.25em;
  flex: 0 0 auto;
  cursor: pointer;
}
.input-dropdown--disabled .input-dropdown__input-field__button {
  cursor: default;
}
.input-dropdown__content {
  width: 100%;
  display: block;
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1; /* Kind of a hacky fix - makes the drop-down selection not appear underneath the drop-downs that come after this */
  /* Pimp */
  border: 1px solid;
}
.input-dropdown__content--hidden {
  display: none;
}
.input-dropdown__content label {
  display: flex;
}
.input-dropdown__content label p {
  display: inline-block;
  overflow: hidden;
}
/* Log */
.log {
  height: 100%;
  overflow: scroll;
}
/* Simple Columns */
.simple-columns {
  /*--columns: <Number of columns>;*/
  /*--column-width: <Width of each column>;*/
  /*--column-gutter: <Margin on the left and right side of each column>;*/
  max-width: calc(var(--columns) * var(--column-width) + var(--column-gutter) * min(0, var(--columns) - 1));
  text-align: center;
}
.simple-columns__column {
  display: inline-block;
  width: var(--column-width);
  margin: 0 calc(var(--column-gutter) * 0.5);
  vertical-align: top;
  text-align: initial;
}


/* ------ Search & SearchTag Components ------ */
.search {
  display: inline-flex;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.25em;
}
.search__input, .search__input:active {
  width: 0;
  flex: 1;
}
.search__tag {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  flex: 0 1 auto;
  margin-right: 0.5em;
  padding: 0.15em 0.25em;
}
.search__tag__text,
.search__tag__text:active {
  display: inline-block;
  white-space: nowrap;
}
.search__tag__remove {
  display: inline-block;
  text-align: center;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.25em;
}
.search__tag__remove__inner {
  /* Pimp */
  user-select: none;
}

/* ------ Image Preview ------ */
.image-preview {
  /* Fill entire screen */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Pimp */
  padding: 2rem;
}
.image-preview * {
  user-select: none;
}
.image-preview__border {
  width: 100%;
  height: 100%;
}
.image-preview__image--fill {
  cursor: zoom-out;
}
.image-preview__image--fit {
  cursor: zoom-in;
}


/* ------ Main Layout ------ */
.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.main {
  flex: 1;
  overflow: hidden;
}


/* ------ TitleBar ------ */
.title-bar {
  display: flex;
  flex: 0 0 auto;
  width: calc(100% - 4px);
  height: 18px;
  margin: 4px 0 0 4px;
  -webkit-app-region: drag; /* Dragging this moves the window */
  -webkit-user-select: none; /* Disable text selection */
}
/* Title */
.title-bar__title {
  display: inline;
  flex: 1;
  position: relative;
  top: -2px;
  overflow: hidden;
  /* Text */
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Button Bar */
.title-bar__button-bar {
  height: 22px;
  flex: 0 1 auto;
  display: block;
  float: right;
  position: relative;
  top: -4px;
}
/* Button Bar Buttons */
.title-bar__button-bar__min,
.title-bar__button-bar__max,
.title-bar__button-bar__cross {
  height: 100%;
  width: 28px;
  float: left;
  -webkit-app-region: no-drag;
  /* Pimp */
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
}
.title-bar__button-bar__min:hover,
.title-bar__button-bar__max:hover,
.title-bar__button-bar__cross:hover {
  opacity: 1;
}


/* ------ Header ------ */
.header {
  --header-padding: 0.3em;
  display: inline-flex;
  flex-flow: wrap;
  font-size: 0.75em;
  padding: var(--header-padding);
  padding-bottom: 0.4em;
}
.header__wrap {
  min-height: 2rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.header__wrap--width-restricted {
  max-width: calc(100vw - var(--header-padding));
}
.header__right {
  flex-grow: 1;
}
.header__right > div > :not(:first-child) {
  margin-right: 0.75rem;
}
/* Header Menu */
.header__menu {
  padding: 0.3em 0;
  margin-right: 1em;
  /* Pimp */
  user-select: none;
}
.header__menu__item {
  display: inline-block;
}
.header__menu__item__link {
  display: inline-block;
  padding: 0.3em 0.7em;
  border: 1px solid rgba(0,0,0,0);
}
/* Header Search */
.header__search__wrap {
  width: 13rem;
  margin-right: 0.5em;
}
.header__search {
  display: flex;
  padding: 0.25em;
  overflow: hidden;
}
.header__search__left {
  flex: 1 1 auto;
}
.header__search__right {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 1.5em;
}
.header__search__right__inner {
  width: fit-content;
  display: inline-flex;
  margin: 0 auto;
}
.header__search__icon {
  width: 0.9em;
  height: 0.9em;
}
.header__search__input,
.header__search__input:active {
  font-size: 1em;
  width: 100%;
  background: none;
  border: none;
  outline: none;
}
/* Header Toggle-Sidebar */
.header__toggle-sidebar {
  float: right;
  margin-right: 0.4rem;
}
.header__toggle-sidebar:hover {
  cursor: pointer;
}


/* ------ Footer ------ */
.footer {
  display: inline-flex;
  flex-flow: wrap;
  padding: 0.05rem 0.2rem;
  /* Pimp */
  user-select: none;
}
.footer__wrap {
  padding: 0.025rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.footer__right {
  flex-grow: 1;
}
.footer__right__inner {
  display: flex;
  float: right;
  width: 100%;
  max-width: 22.5em;
  flex-wrap: wrap;
}
/* Game Count */
.footer__game-count {
  font-size: 0.9rem;
  cursor: default;
}
.footer__game-count p {
  display: inline-block;
}
.footer__game-count p:not(:last-child) {
  padding-right: 0.3rem;
}
/* Scale New-Game */
.footer__new-game {
  font-size: 0.8rem;
}
/* Layout Selector */
.footer__layout-selector {
  display: inline-block;
  margin: 0 0.3em;
  font-size: 0.8em;
}
/* Scale Slider */
.footer__scale-slider {
  flex: 1 1 auto;
  min-width: 6em;
}
.footer__scale-slider__inner {
  --slider-size: 1em;
  display: inline-block;
  position: relative;
  height: var(--slider-size);
  cursor: pointer;
}
.footer__scale-slider__icon {
  position: absolute;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}
.footer__scale-slider__icon--left {
  left: 0.25rem;
}
.footer__scale-slider__icon--center {
  left: 50%;
  width: 1px;
  height: 60%;
}
.footer__scale-slider__icon--right {
  right: 0.25rem;
}
.footer__scale-slider__input {
  width: 100%;
  height: 100%;
  position: absolute;
}
.footer__scale-percent {
  display: block;
  width: 2.3em;
}
.footer__scale-percent p {
  float: right;
}


/* ------ Home ------ */
.home-page {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.home-page__inner {
  min-width: 40em;
  overflow: visible;
}
/* Logo */
.home-page__logo {
  --size: 5rem;
  margin: 0.5rem auto 1rem;
  /* Keep the mask's aspect ratio */
  width: var(--size);
  height: calc(var(--size) * 0.9);
}
.home-page__logo__image {
  --zoom: 1800%;
  width: 100%;
  height: 100%;
}
/* HomePage Box */
.home-page__box {
  display: block;
  margin: 0 auto;
  margin-bottom: 1rem;
  width: 30em;
  border: 1px solid;
}
.home-page__box__head {
  padding: 0.15rem 0.3rem;
  border-bottom: 1px solid;
  font-weight: bold;
}
.home-page__box__body {
  padding: 0.3rem;
}
.home-page__box__item {
  display: flex;
  flex-direction: row;
  list-style: none;
}
.home-page__box__item:not(:last-child) {
  margin-bottom: 0.1rem;
}
.home-page__box__item__icon {
  margin-right: 0.35rem;
}
/* HomePage Box - Upgrades */
.home-page__box--upgrades b,
.home-page__box--upgrades i {
  display: block;
  text-align: center;
  white-space: pre-line;
}
/* Random Games */
.home-page__random-games {
  text-align: center;
}
.home-page__random-games__inner {
  display: inline-block;
  margin: 0 auto;
}
.home-page__random-games__title {
  margin: 0.2em 0;
  font-size: 1.2em;
  font-weight: bold;
}
.home-page__random-games__loading {
  display: block;
  text-align: center;
}
.random-games {
  display: flex;
}

/* ------ Page-Not-Found (404) ------ */
.page-not-found {
  width: 100%;
  height: 100%;
  padding: 1em;
  text-align: center;
}
.page-not-found__error-number {
  font-size: 8em;
}
.page-not-found__title {
  font-size: 2em;
  padding-bottom: 0.5em;
}


/* ------ About ------ */
.about-page {
  --columns: 2;
  --column-width: 35em;
  --column-gutter: 2em;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.about-page__inner {
  display: flex;
  flex-direction: column;
  min-width: var(--column-width);
  height: 100%;
}
.about-page__top {
  flex: 1 0 auto;
}
.about-page__bottom {
  flex: 0 0 auto;
  padding: 0.5rem;
  padding-bottom: 1rem;
  text-align: center;
}
.about-page__bottom__inner {
  display: inline-block;
  text-align: left;
  margin: auto;
}
.about-page__bottom__quote {
  font-style: italic;
}
.about-page__bottom__author {

}
.about-page__title {
  font-size: 2.5em;
  margin-bottom: 0.5rem;
  text-align: center;
}
.about-page__columns {
  margin: auto;
}
.about-page__columns__left {
  margin-top: 2rem;
}
.about-page__columns__right {
}
.about-page__section {
  margin-bottom: 2rem;
}
.about-page__section__title {
  font-size: 1.4rem;
  padding-left: 0.4rem;
}
.about-page__section__content {
  padding-left: 0.4rem;
}
.about-page__section__content__description {
  margin-bottom: 0.26rem;
}
.about-page__section__links * {
  display: inline-block;
  margin-top: 0.2rem;
}
.about-page__section__links :not(:last-child) {
  margin-right: 1rem;
}
/* Credits */
.about-page__credits {
}
.about-page__credits__title {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}
.about-page__credits__profiles {}
.about-page__credits__profile {
  --size: 3rem;
  width: var(--size);
  height: var(--size);
  margin: 0.25rem;
  margin-top: 0;
  clip-path: circle();
  display: inline-block;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.about-page__credits__tooltip {
  max-width: 20rem;
  padding: 0.5rem;
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border: 1px solid;
}
.about-page__credits__tooltip__roles {
  --indent: 0.5em;
  margin-left: calc(0.5rem + var(--indent));
  text-indent: calc(0px    - var(--indent));
}
.about-page__credits__tooltip__roles p {
  display: inline;
}

/* ------ Curate ------ */
.curate-page {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.curate-page__inner {
  width: 40rem;
  margin: 0 auto;
}
/* (Edit how other classes appear in this page) */
.curate-page .input-dropdown__content {
  max-height: 25rem;
}
.curate-page .input-field--multiline.input-field--edit {
  height: 5em;
}
/* Curate Page Top */
.curate-page-top {
  display: flex;
  margin-top: 0.5rem;
  padding: 0.25rem;
  /* Border */
  border-radius: 0.2em;
  border: 1px solid;
}
.curate-page-top__left {
  flex: 1 0;
  white-space: nowrap;
}
.curate-page-top__right {
  flex: 0 0;
  white-space: nowrap;
}
.curate-page-top__right > * {
  margin-left: 0.5rem;
}
/* Curate Box */
.curate-box {
  margin: 1.5rem 0;
  padding: 0.5rem;
  border: 1px solid;
  border-radius: 0.4rem;
}
.curate-box__image {
  width: 100px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Curate Box Image Titles */
.curate-box-image-titles {
  display: flex;
  text-align: center;
}
.curate-box-image-titles__title {
  display: inline-block;
  flex: 1 1 auto;
}
/* Curate Box Images */
.curate-box-images {
  display: flex;
  height: 8rem;
  margin: 0.35rem 0;
}
.curate-box-images__image {
  flex: 1 1 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* Curate Box Divider */
.curate-box-divider {
  margin: 0.4rem 0;
  border-width: 1px;
}
/* Curate Box Row */
.curate-box-row {
  display: flex;
  margin-bottom: 0.2rem;
}
.curate-box-row__title {
  padding-right: 0.4em;
  user-select: none;
}
.curate-box-row__content {
  flex: 1 1;
}
/* Curate Box Add-App */
.curate-box-add-app {
  margin: 0.5rem 0;
  padding: 0.4rem;
}
/* Curate Box Files */
.curate-box-files {
  margin-bottom: 0.2rem;
}
.curate-box-files__head {
  user-select: none;
}
.curate-box-files__body {
  max-height: 25rem;
  overflow: auto;
}
/* Curate Box Warnings */
.curate-box-warnings {
  margin-bottom: 0.2rem;
}
.curate-box-warnings--empty {
  display: none;
}
.curate-box-warnings__head {
  user-select: none;
}
/* Curate Box Buttons */
.curate-box-buttons {
  text-align: right;
}
.curate-box-buttons__button {
  margin: 0 0.2rem;
}
.curate-box-buttons__button:last-child {
  margin-right: 0;
}


/* ------ Log ------ */
.log-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
/* Log-Page Bar */
.log-page__bar {
  flex: 0 0 auto;
  display: inline-flex;
  flex-flow: wrap;
  padding: 0.2rem 0.3rem;
  font-size: 0.85rem;
  user-select: none;
}
.log-page__bar__wrap {
  padding: 0.025rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.log-page__bar__right {
  flex-grow: 1;
}
.log-page__bar__right__inner {
  display: flex;
  float: right;
  width: auto;
  flex-wrap: wrap;
}
.log-page__bar__right__inner > *:not(:last-child) {
  margin-right: 0.3rem;
}
/* Log-Page Content */
.log-page__content {
  flex: 1 1 auto;
}


/* ------ Browse ------ */
.game-browser {
  display: flex;
  width: 100%;
  height: 100%;
}
/* Center */
.game-browser__center {
  flex: 1 0 auto;
}
.game-browser__center-inner {
  display: flex;
  width: 100%;
  height: 100%;
}
/* Sidebar */
.game-browser__sidebar {
  --divider-width: 6px;
  display: flex;
  flex: 0 0 auto;
  min-width: var(--divider-width);
  max-width: 100%;
}
.game-browser__sidebar--hidden {
  display: none;
}
.game-browser__sidebar__inner {
  display: flex;
  width: 100%;
  height: 100%;
}
.game-browser__sidebar__content {
  flex: 1 1 auto;
  width: calc(100% - var(--divider-width));
  overflow-y: auto;
  overflow-x: hidden;
}
.game-browser__sidebar__divider {
  width: var(--divider-width);
  flex: 0 0 auto;
  user-select: none;
  cursor: ew-resize;
}
/* Right Sidebar */
.game-browser__right p {
  display: inline;
}
/* Browse-Left-Sidebar */
.browse-left-sidebar > .playlist-list {
  width: 100%;
}
/* Browse-Right-Sidebar */
.browse-right-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}
/* Browse-Right-Sidebar Section */
.browse-right-sidebar__section {
  margin-bottom: 1.1em;
}
.browse-right-sidebar__section:last-child {
  margin-bottom: 0;
}
.browse-right-sidebar__section--below-gap {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
/* Browse-Right-Sidebar Additional-Application */
.browse-right-sidebar__additional-application {
  padding: 0.5rem;
}
.browse-right-sidebar__additional-application__delete-button {
  float: right;
}
/* Browse-Right-Sidebar Row */
.browse-right-sidebar__row {
  margin-bottom: 0.2rem;
}
.browse-right-sidebar__row:last-child {
  margin-bottom: 0;
}
.browse-right-sidebar__row p {
  display: inline;
  cursor: default;
}
.browse-right-sidebar--edit-enabled {
  user-select: none; /* Can not select text while editing is enabled */
}
.browse-right-sidebar__row--one-line {
  display: flex;
}
.browse-right-sidebar__row--one-line > :first-child {
  flex: 0 0 auto;
  white-space: pre;
}
.browse-right-sidebar--edit-disabled .browse-right-sidebar__row--one-line > :last-child {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.browse-right-sidebar__row--one-line > .input-dropdown {
  width: 100%;
}
.browse-right-sidebar__row--one-line .input-dropdown__content {
  max-height: 25rem;
}
.browse-right-sidebar__row--additional-applications-header > :not(:first-child) {
  float: right;
}
.browse-right-sidebar__row--additional-applications-name {
  display: flex;
}
.browse-right-sidebar--edit-disabled .browse-right-sidebar__row--additional-applications-name > :first-child {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}
.browse-right-sidebar__row--additional-applications-name > :last-child {
  flex: 0 0 auto;
}
/* BrowseSidebar Title-Row */
.browse-right-sidebar__title-row {
  display: flex;
  margin-bottom: 0;
}
.browse-right-sidebar__title-row__title {
  flex: 1 1 auto;
  overflow: hidden;
  height: 1.6rem;
  font-size: 1.15rem;
  font-weight: bold;
}
.browse-right-sidebar__title-row__title > p {
  display: block;
  overflow-y: visible;
}
.browse-right-sidebar--edit-disabled .browse-right-sidebar__title-row__title > * {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* BrowseSidebar Title-Row Buttons */
.browse-right-sidebar__title-row__buttons {
  flex: 0 0 auto;
  display: flex;
  margin-left: 0.3rem;
  user-select: none;
}
.browse-right-sidebar__title-row__buttons > *:not(:first-child) {
  margin-left: 0.6rem;
}
.browse-right-sidebar__title-row__buttons > * {
  height: 0.9rem;
  width: 0.9rem;
}
/* Browse-Right-Sidebar Row - Sub Elements */
.browse-right-sidebar__row__check-box-wrapper {
  display: contents;
}
.browse-right-sidebar__row__check-box {
  vertical-align: middle;
}
.browse-right-sidebar__row__spacer {
  flex: 1 0 auto;
}
.browse-right-sidebar__row__game-id {
  user-select: text;
  padding-left: 0.25rem;
}
.browse-right-sidebar__row__date-added {
  user-select: text;
  padding-left: 0.25rem;
}
/* Browse-Right-Sidebar Row - Screenshot */
.browse-right-sidebar__row__screenshot {
  width: 100%;
}
.browse-right-sidebar__row__screenshot img {
  width: 100%;
  cursor: zoom-in;
}
.browse-right-sidebar__row__screenshot__placeholder {
  width: 100%;
  height: 15rem;
  overflow: hidden;
  border: 2px dashed;
  user-select: none;
  position: relative;
}
.browse-right-sidebar__row__screenshot__placeholder__back {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
}
.browse-right-sidebar__row__screenshot__placeholder__front {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0;
}
.browse-right-sidebar__row__screenshot__placeholder__front > :not(:last-child) {
  margin-bottom: 0.15rem;
}
.browse-right-sidebar__row__screenshot__placeholder h1 {
  font-size: 1.15rem;
}
.browse-right-sidebar__row__screenshot__placeholder p {
  font-size: 0.9rem;
  font-style: italic;
}
.browse-right-sidebar__row__screenshot img {
  width: 100%;
  cursor: zoom-in;
}
/* GameImageSplit */
.game-image-split {
  flex: 1 1 auto;
  width: 50%;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.game-image-split:first-child {
  border-right: 1px dashed;
  margin-bottom: -1px;
}
.game-image-split:last-child {
  border-left: 1px dashed;
  margin: -1px;
}
.game-image-split__buttons {
  top: 0;
  padding: 0.5rem;
}
.game-image-split__buttons > * {
  float: right;
}
.game-image-split__buttons > p {
  float: left;
}
.game-image-split__not-found {
  display: inline-block;
  margin-left: 0.1rem;
}
/* Browse Right Sidebar Empty (when no game is selected) */
.browse-right-sidebar-empty {
  padding: 1em 0;
  text-align: center;
  text-align: center;
}
.browse-right-sidebar-empty h1 {
  font-size: 1.3rem;
  font-weight: bold;
  padding-bottom: 0.2rem;
}
.browse-right-sidebar-empty p {
  font-size: 1rem;
}


/* GameList Wrapper */
.game-list-wrapper {
  /* --height | Height of list items (in pixels) */
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* GameList */
.game-list {}
/* GameList Item */
.game-list-item {
  display: flex;
}
.game-list-item:hover {
  cursor: pointer;
}
.game-list-item--dragged {
  opacity: 0.4;
}
.game-list-item * {
  user-select: none;
}
.game-list-item__icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: calc(1px * var(--height));
  height: calc(1px * var(--height));
}
.game-list-item__right {
  flex: 1;
  display: block;
  width: 100%;
  overflow: hidden;
}
.game-list-item__field {
  display: inline-block;
  width: 100%;
  font-size: calc(0.8 * 1px * var(--height));
  vertical-align: top;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* GameList NoGames */
.game-list__no-games {
  width: 100%;
  height: 100%;
  padding: 1em;
  text-align: center;
}
.game-list__no-games__title {
  font-size: 1.5rem;
}
/* GameList Header */
.game-list-header {
  display: flex;
  width: 100%;
}
.game-list-header__right {
  display: flex;
  width: 100%;
}
.game-list-header__scroll-fill {
  width: 1rem;
}
/* GameList Header Column */
.game-list-header-column {
  display: inline-flex;
  width: 100%;
}
.game-list-header-column__title {
  flex: 1 1 auto;
  overflow: hidden;
  user-select: none;
  padding-left: 0.2rem;
}
.game-list-header-column__divider {
  width: 2px;
  height: auto;
}
/* GameList Item & GameList Header Column (Size) */
.game-list-header-column--icon {
  flex: 1 0 auto;
  width: calc(1px * var(--height));
}
.game-list-header-column--title,
.game-list-item__field--title {
  max-width: 40%;
}
.game-list-header-column--genre,
.game-list-item__field--genre {
  max-width: 15%;
}
.game-list-header-column--developer,
.game-list-item__field--developer {
  max-width: 22.5%;
}
.game-list-header-column--publisher,
.game-list-item__field--publisher {
  max-width: 22.5%;
}

/* GameGrid */
.game-grid {
  /* --width | Width of grid items (in pixels) */
  /* --height | Height of grid items (in pixels) */
}
/* GameGrid Item */
.game-grid-item {
  width: calc(1px * var(--width));
  height: calc(1px * var(--height));
  list-style: none;
}
.game-grid-item:hover {
  cursor: pointer;
}
.game-grid-item--dragged {
  opacity: 0.4;
}
/* GameGrid Item Thumb */
.game-grid-item__thumb {
  padding: calc(var(--width) * 0.0025rem);
  width: calc(var(--width) * 1px);
  height: calc(var(--width) * 1px);
}
.game-grid-item__thumb__image {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid;
}
.game-grid-item__thumb__icons {
  width: 100%;
  padding: calc(0.001rem * var(--width));
  position: absolute;
  bottom: 0;
}
.game-grid-item__thumb__icons__icon {
  width: calc(0.144px * var(--width));
  height: calc(0.144px * var(--width));
  float: right;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* GameGrid Item Title */
.game-grid-item__title {
  padding: calc(var(--width) * 0.001rem);
  height: calc((var(--height) - var(--width)) * 0.001rem);
  text-align: center;
}
.game-grid-item__title__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc((16 / 188) * var(--height) * 1px);
  line-height: 1.2;
  word-break: break-word;
  /* Pimp */
  font-weight: bold;
  user-select: none;
}
/* GameGrid NoGames */
.game-grid__no-games {
  width: 100%;
  height: 100%;
  padding: 1em;
  text-align: center;
}
.game-grid__no-games__title {
  font-size: 2em;
}



/* ------ Playlist ------ */
.playlist-list__message {
  padding: 1rem;
  text-align: center;
}
.playlist-list__message h2 {
  margin-bottom: 0.2rem;
}

/* PlaylistList */
.playlist-list {
  --image-size: 1.45rem; /* Width & Height of the icon in the playlist item head */
  --image-padding: 0.15rem; /* Padding of the playlist item head */
}
/* Playlist-List-Item */
.playlist-list-item--editing p {
  user-select: none; /* Can not select text while editing is enabled */
}
.playlist-list-item--drag-over {
  position: relative;
}
.playlist-list-item--drag-over .playlist-list-item__drag-overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 2px dashed;
}
/* Playlist-List-Item Head */
.playlist-list-item__head {
  display: flex;
  height: calc(var(--image-size) + var(--image-padding) * 2);
  padding: var(--image-padding);
  padding-left: 0.3rem;
  cursor: pointer;
  overflow: hidden;
}
.playlist-list-item--editing .playlist-list-item__head {
  cursor: default;
}
.playlist-list-item__head > * {
  flex: 0 0 auto;
  user-select: none;
}
.playlist-list-item__head__icon {
  width: var(--image-size);
  height: var(--image-size);
}
.playlist-list-item__head__icon__image {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.playlist-list-item__head__icon__no-image {
  height: 65%;
}
.playlist-list-item__head__icon__no-image__icon {
  width: 100%;
  height: 100%;
}
.playlist-list-item__head__title {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: bold;
  padding-left: 0.5rem;
}
.playlist-list-item__head__divider {
  padding: 0 0.2rem;
  font-size: 0.9em;
}
.playlist-list-item__head__author {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.9em;
  font-style: italic;
}
.playlist-list-item__head__author > p {
  padding-right: 0.2em; /* Give it some extra space since its in italics */
}
.playlist-list-item__head__title > *,
.playlist-list-item__head__author > * {
  /* Truncates the overflowing text */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-list-item--editing .playlist-list-item__head__title input,
.playlist-list-item--editing .playlist-list-item__head__author input {
  width: 8rem;
}
.playlist-list-item--editing .playlist-list-item__head__title,
.playlist-list-item--editing .playlist-list-item__head__author,
.playlist-list-item--editing .playlist-list-item__head__icon {
  cursor: pointer;
}
/* Playlist-List-Item Content */
.playlist-list-item__content {
  max-height: 0; /* Overridden with JavaScript when expanded. */
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}
.playlist-list-item--editing .playlist-list-item__content {
  transition: max-height 0.15s;
}
.playlist-list-item__content__inner {
  padding: 0.4rem;
}
.playlist-list-item__content__edit {
  display: flex;
  width: 100%;
  margin-bottom: 0.15rem;
}
.playlist-list-item__content__id {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  font-size: 0.7rem;
  opacity: 0.3;
  white-space: pre;
}
.playlist-list-item__content__id__pre {
  flex: 0 0 auto;
  user-select: none;
}
.playlist-list-item__content__id__text {
  flex: 1 1 auto;
  overflow: hidden;
}
.playlist-list-item__content__id__text p {
  user-select: text;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playlist-list-item__content__buttons {
  flex: 0 0 auto;
  font-size: 0.85rem;
}
.playlist-list-item__content__buttons > * {
  margin-left: 0.3rem;
}
.playlist-list-item__content__description-edit {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
}
.playlist-list-item__content__description-text {
  white-space: pre-wrap;
}
.playlist-list-item__editable-text {
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}
/* Playlist-List-Fake-Item */
.playlist-list-fake-item {
  display: flex;
  overflow: hidden;
  height: calc(var(--image-size) + var(--image-padding) * 2);
  padding: var(--image-padding);
  padding-left: 0.5rem;
}
.playlist-list-fake-item,
.playlist-list-fake-item * {
  cursor: pointer;
  user-select: none;
}
.playlist-list-fake-item__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.playlist-list-fake-item__inner > * {
  display: inline-block;
}
.playlist-list-fake-item__inner .icon {
  --icon-size: calc(var(--image-size) * 0.65);
  width: var(--icon-size);
  height: var(--icon-size);
}
.playlist-list-fake-item__inner__title {
  font-size: 1.1rem;
  padding-left: 0.5rem;
  overflow: hidden;
  word-break: break-all;
}


/** ------ Developer ------ */
.developer-page {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.developer-page__inner {
  padding: 0.1rem 0.5rem;
  min-width: 30em;
  text-align: center;
  overflow: visible;
}
.developer-page__title {
  font-size: 2.5em;
}
.developer-page__buttons > * {
  margin: 0.25rem;
}
.developer-page__log {
  flex: 1 1 auto;
  height: 35rem;
  border: 1px solid;
  border-radius: 0.5rem;
  text-align: left;
}


/** ------ Config ------ */
.config-page {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.config-page__inner {
  padding: 0.1rem 0.5rem;
  min-width: 30em;
  text-align: center;
  overflow: visible;
}
.config-page__title {
  font-size: 2.5em;
}
/* ... */
.config-page p {
  display: inline-block;
}
.config-page input[type="checkbox"] {
  vertical-align: middle;
  transform: scale(1.25);
}
/* SaveAndRestart */
.config-page input[type="button"].save-and-restart {
  font-size: 1.075em;
  margin: 0 auto;
}
/* Setting */
.setting {
  margin: 0 auto;
  margin-top: 1em;
  max-width: 40em;
}
.setting > :first-child {
  border-top: 0;
}
.setting__title {
  margin: 0.2em 0;
  font-size: 1.2em;
  font-weight: bold;
}
.setting__body {
  /* Pimp */
  border-radius: 0.2em;
  border: 1px solid;
}
/* Setting Row */
.setting__row {
  padding: 0.75em;
}
.setting__row:not(:first-child) {
  border-top: 1px solid;
}
.setting__row__top {
  display: flex;
}
.setting__row__bottom {
  padding: 0;
  border-top: 0;
  font-size: 0.8em;
  font-style: italic;
  text-align: left;
}
.setting__row__title {
  flex: 0 1 auto;
  font-size: 1.15em;
  font-weight: bold;
}
.setting__row__content {
  flex: 1 1 auto;
}
/* Setting Row Content - FilePoint Path */
.setting__row__content--filepath-path {
  display: flex;
  height: fit-content;
  margin-left: 0.5rem;
}
.setting__row__content--filepath-path .flashpoint-path__input {
  flex: 1;
  border: 1px solid;
}
.setting__row__content--filepath-path .flashpoint-path__input input[type="text"] {
  width: 100%;
  font-size: 1em;
  background: none;
  border: none;
  outline: none;
}
/* Setting Row Content - Toggle */
.setting__row__content--toggle > div {
  float: right;
}
/* Setting Row Content - Redirector */
.setting__row__content--redirector {
  text-align: right;
}
.setting__row__content--redirector > div {
  display: inline;
}
.setting__row__content--redirector > div:not(:last-child) {
  margin-right: 1rem;
}
.setting__row__content--redirector input {
  margin-right: 0.2rem;
}
/* Setting Row Content - Input Field */
.setting__row__content--input-field {
  display: flex;
  height: fit-content;
  margin-left: 0.5rem;
}
.setting__row__content--input-field > :first-child {
  width: 100%;
}
.setting__row__content--input-field .input-dropdown__input-field,
.setting__row__content--input-field .input-dropdown__content {
  border: 1px solid;
}
