body {
  /*   background: rgba(13, 137, 182, .95); */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#app {
  position: relative;
  background: rgba(13, 137, 182, 1);
  color: #fff;
  font-family: "pm", "Helvetica", "Arial", sans-serif;
  margin: auto;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: top;
}

.flexRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.flexRowLeft {
  justify-content: start;
}

.flexCol {
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.flexColCenter {
  justify-content: center;
}

#mainPanel {
  position: relative;
  box-sizing: border-box;
  padding: 6px;
  flex-grow: 1;
  overflow-y: scroll;
  /*   background: rgba(0, 0, 0, .5); */
}

#footer {
  color: #eee;
  width: 100%;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 6px;
  flex-shrink: 0;
}

#focusPanel {
  /*   margin-top: 25px; */
  position: relative;
  /*   padding: 45px; */
  /*   background: rgba(255, 255, 255, .05); */
  gap: 40px;
}

#gamePanel {
}

#titlePanel {
  background: rgba(0, 0, 0, 0.5);
}

#title {
  font-size: 26px;
  text-align: center;
  border-bottom: 1px solid #fff;
  padding-bottom: 25px;
  margin-bottom: 0 !important;
  margin-top: 0;
  padding-top: 20px;
}

a {
  color: #0adcff;
}

@media (max-width: 779px) {
  #title {
    font-size: 20px;
  }

  .control {
    font-size: 15px;
  }
}

.buttonBase {
  background: none;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  min-height: 30px;
  cursor: pointer;
}

.buttonBase.buttonDark {
  color: #222;
  border-color: #222;
}

.buttonEffects:hover {
  background: #fff !important;
  color: #111 !important;
}

.buttonEffects:active {
  background: #aaa !important;
  color: #111 !important;
}

.buttonEffects.buttonDark:hover {
  background: #222 !important;
  color: #fff !important;
}

.buttonEffects.buttonDark:active {
  background: #555 !important;
  color: #fff !important;
}

.buttonEffects:disabled {
  color: #ddd;
  border: 1px solid #ddd;
  cursor: default !important;
  filter: brightness(0.65) !important;
}

.buttonEffects:disabled:hover,
.buttonEffects:disabled:active {
  background: none !important;
  color: #ddd !important;
}

#footerContent {
  padding: 15px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
}

.footerBlock {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.footerBlock > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 20px;
}

/* me again */
.hide {
  visibility: hidden;
  display: none;
}

.buttonFooter {
  padding: 5px 10px;
  margin-right: 10px;
}

#sourceContainer {
  margin-right: 15px;
}

.flexRowCenter {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.fullPanel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  color: #fff;
}

.overlayPanel {
  background: rgba(0, 0, 0, 0.5);
}

.verticalPanel {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.panelContent {
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: top;
  text-align: center;
}

.fullPanel h1,
#titlePanel h1 {
  font-size: 40px;
}

#helpContent p {
  font-size: 1.2em;
  width: 55%;
  margin: 10px auto;
}

#helpContent li {
  width: 60%;
  margin: 7px auto;
  text-align: left;
}

.textDark {
  color: #222;
}

.textDark a {
  color: #0d1033;
}

hr {
  width: 100%;
  border-bottom: 1px solid white;
}

input[disabled=""] {
  background: #cccccc;
  color: #222222;
  font-style: italic;
}

/** this app **/

#game {
  position: relative;
}

#title {
  gap: 7px;
}

.date {
  padding: 24px 0;
  font-size: 24px;
  text-transform: uppercase;
}

.rows {
  gap: 12px;
}

.row {
  gap: 12px;
}

.cell {
  cursor: default;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.cellRight {
  background: rgba(40, 200, 120, 1);
}

.cellMisplaced {
  background: rgba(200, 180, 20, 1);
}

.cellWrong {
  background: rgba(50, 50, 70, 0.325);
  color: rgba(255, 255, 255, 0.925);
}

.cellCurrent {
  border: 3.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 15px 6px rgba(255, 255, 255, 0.35);
  transition-duration: 25ms;
}

.abCell.cellCurrent {
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 25px 6px rgba(255, 255, 255, 0.3);
}

.cellFlip {
  transform: rotate3d(360, 0, 0, 360deg);
  transition-duration: 800ms;
}

.cellFlipFast {
  transform: rotate3d(360, 0, 0, 360deg);
  transition-duration: 300ms;
}

.bottomTray {
  padding-top: 30px;
}

#alphabet {
  gap: 10px;
}

.abRow {
  gap: 10px;
}

.abCell {
  text-transform: uppercase;
  width: 30px;
  height: 30px;
  font-size: 17px;
  font-weight: 700;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

.abDouble {
  width: 70px;
}

.abGuessed {
  background: rgba(0, 0, 0, 0.1);
  color: #fff !important;
  border-color: #fff !important;
}

.abGuessed:disabled:hover,
.abGuessed:disabled:active {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #fff !important;
  border-color: #fff !important;
}

.rowShake {
  animation: 0.5s shakeLR 1;
}

@keyframes shakeLR {
  0% {
    translate: 0 0;
  }

  20% {
    translate: -25px 0;
  }

  40% {
    translate: 20px 0;
  }

  60% {
    translate: -10px 0;
  }

  80% {
    translate: 5px 0;
  }

  100% {
    translate: 0 0;
  }
}

@keyframes slide-left {
  from {
    translate: 0 0;
  }

  to {
    translate: -20px 0;
  }
}

@keyframes slide-right {
  from {
    translate: 0 0;
  }

  to {
    translate: 20px 0;
  }
}

#winMessage {
  gap: 7px;
  height: 100px;
  justify-content: center;  
}

.endCell {
  width: 40px;
  height: 40px;
  font-size: 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  color: rgba(0, 0, 0, 0.75);
}

#loseMessage {
  gap: 15px;
}

#revealWord {
  width: 120px;
  height: 50px;
  font-size: 20px;
  text-transform: uppercase;
}

#revealedWord {
  position: relative;
  top: 4px;
  gap: 7px;
}

#revealWord:disabled,
#revealWord:disabled:hover,
#revealWord:disabled:active {
  background: rgba(0, 0, 0, 0.1) !important;
  color: #fff !important;
  border-color: #fff !important;
}

.dropOuttaSight {
/*   top: 101vh; */
  opacity: 0;
  visibility: hidden;
  translate: 0 100vh;
  height: 0;
  transition: visibility 500ms ease-in, opacity 400ms ease-in, translate 200ms ease-in, height 500ms ease-in;
}

#btnReset {
  display: none;
  visibility: hidden;
}


/* Settings */

#settingsNotice {
  font-size: 24px;
  font-style: italic;
  padding: 20px 0 40px 0;
}

#mainSettings {
  width: 90%;
  gap: 15px;
}

.settingCard label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
  width: 400px;
}

.settingLabel {
  font-size: 24px;
  text-align: right;
  width: 200px;
  position: relative;
  top: 3px;
}

.settingCard .spinner {
  width: 40px;
  font-size: 20px;
}

.settingCard .ui-checkboxradio-label {
  font-size: 24px;
}

.settingCard .ui-checkboxradio-icon {
  top: 25px;
  left: 20px;
  width: 25px;
}

#btnClearCustomList {
  font-size: 24px;
  padding: 10px;
}

.settingCard {
  gap: 10px;
}