.jeopardy-main {
  margin: auto;
  width: 100%;
  max-width: 95%;
  min-height: 800px;
}

.jeopardy-header {
  display: flex;
  gap: 20px;
  align-items: flex-end;
}

.jeopardy-main > .jeopardy-header {
  border-bottom: 1px solid #ddd;
}

.jeopardy-header > .title {
  font-size: 3em;
  white-space: nowrap;
}

.jeopardy-header > .controls {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.jeopardy-header > .controls > div {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.jeopardy-main > .jeopardy-header > .controls > div:last-child {
  margin-bottom: 5px;
}

.jeopardy-header > .controls .count {
  text-align: right;
  display: flex;
  gap: 15px;
}

.jeopardy-header > .controls .teams,
.jeopardy-header > .controls .categories,
.jeopardy-header > .controls .units {
  white-space: nowrap;
}

.jeopardy-header > .controls .buttons {
  text-align: right;
  display: flex;
  gap: 15px;
}

.jeopardy-main > .jeopardy-header > .controls .buttons {
  gap: 5px;
}

.jeopardy-header > .controls select[name="unit"] {
  width: 128px;
}

.jeopardy-header > .controls button[name="category-sub"],
.jeopardy-header > .controls button[name="category-add"],
.jeopardy-header > .controls button[name="player-sub"],
.jeopardy-header > .controls button[name="player-add"] {
  width: 2em;
}

.jeopardy-header > .controls .pallete button[name="color"] {
  width: 20px;
  height: 20px;
  margin: 2px;
  /* border-radius: 100%; */
  border: 1px solid #000;
  cursor: pointer;
}

.jeopardy-header > .controls .points > input {
  width: 50px;
}

.jeopardy-main > .question-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1;
}

.jeopardy-main > .question-popup > .question {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.jeopardy-main > .question-popup > .question .controls {
  background-color: #ddd;
  display: flex;
  justify-content: center;
  gap: 30px;
  align-items: baseline;
  padding-block: 30px;
}

.jeopardy-main > .question-popup > .question .controls span.value {
  font-size: 2em;
  /* display: none; */
}

.jeopardy-main > .question-popup > .question .controls button {
  height: 50px;
  width: 150px;
  background: var(--theme-color);
  color: #fff;
  font-size: 2em;
  font-family: inherit;
  border: none;
  cursor: pointer;
}

.jeopardy-main > .question-popup > .question .controls button:hover {
  opacity: 0.75;
}

.jeopardy-main > .question-popup > .question .question-content {
  flex: 1;

  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.jeopardy-main > .question-popup > .question .question-content .tool {
  flex: 1;
}

.jeopardy-main > .question-popup > .question .question-content .minigame {
  flex: 1;
  padding: 50px;
  overflow-y: auto;
}

.jeopardy-main > .question-popup > .question .contestants {
  padding: 30px;
  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  gap: 20px;
  display: inline-grid;
  grid-template-columns: max-content;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

.jeopardy-main > .question-popup > .question .contestants button {
  min-width: 300px;
  height: 80px;
  background: none;
  border: 2px solid #000;
  text-align: center;
  font-family: inherit;
  font-size: 2em;
  cursor: pointer;
  padding-inline: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.jeopardy-main > .question-popup > .question .contestants button .icon {
  width: 70px;
  height: 70px;
}

.jeopardy-main > .question-popup > .question .contestants button span {
  flex: 1;
}

.jeopardy-main > .question-popup > .question .contestants button:hover {
  border-color: var(--theme-color);
}

.jeopardy-main > .jeopardy-stand {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 15px;
  padding-bottom: 40px;
  /* background: #ddd; */
}

.jeopardy-main > .jeopardy-stand > .controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(0%, -50%);
}

.jeopardy-main > .jeopardy-stand > .controls > button {
  width: 2em;
}

.jeopardy-main > .jeopardy-stand > .contestants {
  display: flex;
  flex: 1;
  gap: 20px;
  overflow-x: auto;
  justify-content: center;
}

.jeopardy-main > .jeopardy-stand > .contestants > .player {
  /* flex: 1; */
}

.jeopardy-main > .jeopardy-stand > .contestants > .player .icon-container {
  position: relative;
}

.jeopardy-main > .jeopardy-stand > .contestants > .player .icon-container:not(:hover) select {
  opacity: 0;
}

.jeopardy-main > .jeopardy-stand > .contestants > .player .icon-container select {
  position: absolute;
  right: 0;
  width: 40px;
}

.jeopardy-main > .jeopardy-stand > .contestants > .player .icon-container .icon {
  cursor: pointer;
  width: 100px;
  height: 100px;
  padding: 10px;
  background: #eee;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.jeopardy-main > .jeopardy-stand > .contestants > .player .score {
  font-size: 2em;
}

.jeopardy-main > .jeopardy-stand > .contestants > .player,
.jeopardy-main > .jeopardy-stand > .contestants > .player input {
  text-align: center;
}

.jeopardy-main > .jeopardy-stand > .contestants > .player input[name="name"] {
  font: inherit;
  width: 100%;
}

.jeopardy-main > .jeopardy-board table {
  width: 100%;
  /* background: #999; */
  background: #777;
  table-layout: fixed;
}

.jeopardy-main > .jeopardy-board thead > tr > td {
  vertical-align: top;
  text-align: center;
}

.jeopardy-main > .jeopardy-board thead > tr > td > .category-title a {
  color: #000;
  cursor: pointer;
  text-decoration: unset;
}

.jeopardy-main > .jeopardy-board td {
  /* vertical-align: top; */
  /* border: 2px solid #999; */
  border: 1px solid #00000054;
  background: #ddd;
  padding: 10px;
}

.jeopardy-main > .jeopardy-board .hint {
  font-size: 2em;
  /* padding: 20px 0px; */
  height: 80px;
  /* color: #fff; */
  /* background: var(--theme-color); */
  /* text-shadow: #000 2px 2px 0px; */
  /* letter-spacing: -3px; */
  /* font-weight: bold; */
  text-align: center;
  opacity: 1;
  cursor: pointer;
  background: #eee;
}

.jeopardy-main > .jeopardy-board .hint:hover {
  opacity: 0.75;
}

.jeopardy-main > .jeopardy-board .hint:not(.active) {
  visibility: hidden;
}

.jeopardy-main > .jeopardy-board {
  position: relative;
}

.jeopardy-main > .jeopardy-board .category-controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 100%;
  /* transform: translateX(-40%); */
}

.jeopardy-main > .jeopardy-board .category-controls button {
  width: 2em;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

#dialog-choose-mode {
  padding: 20px;
}

#dialog-choose-mode .mode {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

#dialog-choose-mode .mode > button {
  /* text-align: center; */
  flex: 1;
}

#dialog-choose-mode .mode .icon {
  font-size: 3em;
}

#dialog-choose-mode .mode .label {
  font-size: 1.5em;
}

#dialog-choose-mode .grade {
  text-align: center;
}

#dialog-choose-mode .grade-level {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

#dialog-choose-mode .grade-level > button {
  flex: 1;
  height: 50px;
  font-size: 1.5em;
}

#dialog-choose-picture {
  text-align: center;
}

#dialog-choose-picture .icon {
  width: 100px;
  cursor: pointer;
}

#dialog-choose-picture .icon:hover {
  opacity: 0.75;
  border: 1px solid var(--theme-color);
}

#dialog-choose-category table {
  width: 100%;
}

#dialog-choose-category td {
  padding: 5px;
}

#dialog-choose-category td:first-child {
  width: 5em;
}

#dialog-choose-category select {
  width: 100%;
}

#dialog-choose-category tr[data-type="tool"] td.options div {
  padding-block: 2px;
}

#dialog-choose-category tr[data-type="tool"] td.options select {
  width: unset;
}

#dialog-choose-category tr[data-type="tool"] td.options label {
  white-space: nowrap;
}

#dialog-populate-categories table {
  width: 100%;
}

#dialog-populate-categories td {
  padding: 5px;
}

#dialog-populate-categories td:first-child {
  width: 5em;
}

#dialog-populate-categories select {
  width: 100%;
}

#dialog-populate-categories .info {
  color: orange;
  display: none;
}

#dialog-information-how-to-play p {
  margin-bottom: 5px;
}

#dialog-information-gameover .trophy {
  text-align: center;
  font-size: 4em;
  margin-bottom: 10px;
}

#dialog-information-gameover .earned-points {
  text-align: center;
  margin-top: 10px;
}

#dialog-information-gameover table {
  width: 80%;
  text-align: center;
  margin: auto;
  font-size: 1.5em;
}

#dialog-information-gameover .icon {
  width: 70px;
  height: 70px;
  vertical-align: middle;
}

#dialog-information-gameover td {
  text-align: left;
  vertical-align: baseline;
}

#dialog-information-gameover td:last-child {
  /* width: 30%; */
  text-align: right;
}

#dialog-information-gameover .highest {
  font-weight: bold;
}

body::backdrop {
  background: #ccc;
}

@media all and (display-mode: fullscreen) {
  #navContainer,
  .newNaveSpace,
  .newNav,
  .navMainSpacer,
  .content,
  #footer {
    display: none;
  }

  #pageContent {
    max-width: unset;
  }
}

:-webkit-full-screen #navContainer,
:-webkit-full-screen .newNaveSpace,
:-webkit-full-screen .newNav,
:-webkit-full-screen .navMainSpacer,
:-webkit-full-screen .content,
:-webkit-full-screen #footer {
  display: none;
}

:-webkit-full-screen #pageContent {
  max-width: unset;
}