/*******************
 * Custom app styles
 *******************/

.js-palette-square.vowel {
  background-color: var(--color-vowls);
  color: #fff;
}

.js-palette-square.pseudovowel {
  background-color: var(--color-vowls);
  color: #fff;
}

.js-palette-square.difficult-consonant {
  background-color: #B5446E;
  color: #0F0F0F;
}

.js-palette-square.consonant {
  background-color: #F5F5F5;
  color: #0f0f0f;
}

.js-palette-square.replacing-existing {
  opacity: 0.1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  filter: alpha(opacity=10);
}

.nav a {
  padding: 0 10px;
}

.button-row {
  display: flex;
}

.button-row > button {
  margin-right: 10px;
}

.palette-game-selection,
.palette-game-selections-display .stats-box {
  border: 1px solid black;
  border-radius: 3px;
  margin: 1em;
  text-align: center;
  color: #333333;
}

.palette-game-selection .charset,
.palette-game-selection .charset-details,
.palette-game-selection .solution-details,
.palette-game-selection .actions {
  margin-top: 0.8em;
}

.palette-game-selection .actions {
  margin-bottom: 0.8em;
}

.palette-game-selection .solution-details {
  border-top: 1px solid black;
  border-right: none;
  border-bottom: 1px solid black;
  border-left: none;
  border-width: thin;
}

.palette-game-selection .solution-row {
  display: block;
  font-size: 1.2em;
  padding: 0.25em;
}

.palette-game-selection .solution-row:nth-child(odd) {
  background-color: #e3dddd;
}

.palette-game-selection .solution-row:nth-child(even) {
  background-color: #f9f9f9;
}


.palette-game-selection .charset {
  font-weight: bold;
  font-size: 1.2em;
}

.palette-game-selection .actions form {
  display: inline;
}

.palette-game-selection .actions input[type=submit] {
  margin: 0 0.5em;
  padding: 0.25em 0.75em;
  border-radius: 5px;
  border-style: inset;
  border-width: thin;
  color: white;
}

.palette-game-selection .difficulty-header {
  font-weight: bold;
  color: white;
  padding: 0.5em;
}

.palette-game-selection .difficulty-header.fun,
.palette-game-selection .actions .fun input[type=submit] {
  background-color: green;
}

.palette-game-selection .difficulty-header.questionable,
.palette-game-selection .actions .questionable input[type=submit] {
  background-color: orange;
}

.palette-game-selection .difficulty-header.less_fun,
.palette-game-selection .actions .less_fun input[type=submit] {
  background-color: red;
}

.palette-game-selection .actions.reevaluate input[type=submit] {
  background-color: black;
}

.new-game-selections .reload-button,
.palette-curations .reload-button {
  margin: 1em;
  text-align: center;
}

.palette-curations .filter-form {
  max-width: 400px;
  margin: 0 auto 1em;
  padding: 1em;
  border: 1px solid black;
  border-radius: 3px;
}

/* .form-input's default left padding makes room for the auth card's icons; this form has none. */
.palette-curations .filter-form .form-input {
  padding-inline-start: var(--space-2xs);
}

.palette-curations .filter-form .form-group.inline-label label {
  margin-bottom: 0;
}

.palette-curations .filter-form input[type=checkbox] {
  inline-size: 1.15em;
  block-size: 1.15em;
  accent-color: var(--color-vowls);
  cursor: pointer;
}

.palette-curations .filter-form input[type=submit] {
  margin-top: var(--space-2xs);
  padding: 0.5em 1.25em;
  border: none;
  border-radius: 6px;
  background-color: var(--color-vowls);
  color: var(--color-white);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.palette-curations .filter-form input[type=submit]:hover {
  filter: brightness(0.9);
}

.palette-curations .pagination {
  display: flex;
  justify-content: center;
  gap: 1em;
  margin: 1em;
}