* {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

body {
  justify-content: center;
  visibility: hidden;
  align-items: center;
  overflow: hidden;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

#navbar-container-div {
  vvisibility: visible;
}

[id$='boxesDiv'] {
  vvisibility: hidden;
}

html, body, body * {
  touch-action: manipulation !important;
  ttttouch-action: none !important;
  overscroll-behavior: none;
  pointer-events: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

#install-msg-alert .btn-close:focus {
  outline: none;
  box-shadow: none;
}

#install-msg-alert {
  z-index: 10;
}

/* MODAL-DIALOG MUST BE LEFT AS BOOTSTRAP ASSIGNED pointer-events:none OR CLICKING
 * AWAY FROM MODAL TO CLOSE DOESN'T WORK */

#navbar-container-div *:not(.navbar, #brand-text, .container, .navbar-brand), .modal, .modal *:not(.modal-dialog), .modal-backdrop, #SafariNudgeShareIcon, .hg-button, [id$='boxes-div'], #homescreen-inst-close, .btn-close, #installBanner, #installBanner *, #install-msg-alert, #apple-share-icon {
  vvvisibility: visible;
  pointer-events: auto !important;
  touch-action: auto !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

form input {
  ppointer-events: auto !important;
  ttouch-action: auto !important;
  caret-color: transparent;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

input:focus {
  outline: none;
}

@keyframes JMPflipInX {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.JMPflipInX {
  animation-name: JMPflipInX;
  animation-timing-function: ease-out;
}

/* ********
*:focus {
  outline: 2px solid red;
  background-color: red;
  background: red;
  color: red;
}
******** */

/* ******* SCROLLBAR APPEARANCE -- MAINLY FOR JMPMODAL ******** */

/* Firefox */

[id^="container-of"][id$="boxes-div"] {
  /*opacity: 0;*/
  /*transition: opacity 1000ms ease-in-out;*/
}

* {
  scrollbar-width: thin;
  scrollbar-color: black white;
  scrollbar-color: rgb(77, 77, 77) white;
}

#testerModal {
  position: relative;
  z-index: 20000;
}

/* ********* MAKE KEYBOARD DISAPPEAR FOR TESTING *********
.ui-keyboard {
  display: none !important;
}
******************************************************** */

/* ** OVERRIDE BOOTSTRAP RULE THAT CHANGES --bs-modal--margin TO 1.75 
     WHEN THE SCREEN IS BIGGER. THAT CAUSED THE #jmp-modal WINDOW TO LOSE HEIGHT
     WHICH OBSCURED SOME OF THE CONTENT.
** */

#jmp-modal .modal-dialog {
  --bs-modal-margin: 0.5rem;
}

/* ****** STYLE THE MODAL USED FOR JMPalert() WHEN IT'S CALLED FROM hasCorrectLetters() ********
 ******* hasCorrectLetters adds the style rules-msg ******
 ******* Put it over the keyboard and make header and footer skinnier
 ********************************************************************************************* */

.modal-dialog {
  margin: auto;
}

#jmp-modal {
}

/* MAKE MODAL Z-INDEX HIGHER THAN KB, WHICH IS 16000 AS SET IN MOTTIE'S keyboard.css.
 * THIS ENABLES MODALS' OUTER CONTAINER -- WHICH TAKES UP THE WHOLE SCREEN -- TO
 * RECEIVE CLICKS WHEN YOU CLICK ON THE DISABLED KB AND THEREFORE ENABLES BOOTSTRAP'S
 * CLOSE-MODAL-WHEN-CLICKED-OUTSIDE TO WORK. */

.modal {
  z-index: 16500 !important;
}

.rules-msg .modal-dialog .modal-content {
  position: absolute;
  bottom: 45px;
}

.rules-msg #jmp-modal-x-close {
  display: block !important;
  position: absolute;
  right: 40px;
}

/* *** don't let modal cover navbar ** */

#jmp-modal.rules-msg .modal-header {
  height: 32px;
  margin-top: 8px;
  padding-top: 8px;
}

#jmp-modal.rules-msg .modal-footer #jmp-modal-close-button {
  /*display: none;*/
}

/* ****** END STYLE THE MODAL USED FOR JMPalert() WHEN IT'S CALLED FROM hasCorrectLetters() ******* */

#test-middle-text {
  display: none;
}

/* ************** */

@media screen and (min-width: 768px) {
  .navbar-expand-md .navbar-collapse {
    display: block !important;
  }
}

.navbar-brand {
  pointer-events: none;
}

/* **************** */

[id$="letter-boxes"] .navbar-toggler {
  display: block;
}

/* ************ MAKE SURE HAMBURGER MENU GETS CLICKS EVEN WHEN COVERED BY A DIV *********** */

.navbar-toggler {
  ddisplay: block !important;
  padding-left: 4px !important;
  zz-index: 999;
}

#navcol-1 {
  position: relative;
  z-index: 1000;
}

/* **** BUT MUST DISPLAY WHEN navcol-1 has .show ****** */

@media screen and (min-width: 768px) {
  .nnavbar-nav.me-auto {
    flex-direction: column !important;
    margin-top: 350px;
    left: -200px;
  }
}

/*  */

#navcol-1:not(.show) .navbar-nav.me-auto {
  ddisplay: none;
}

/*  */

/* *********
@media screen and (min-width: 768px){
.navbar-nav.me-auto {
   display:none !important;
}}
******** */

/* ******
@media screen and (min-width: 768px){
#navcol-1:not([style*='display: flex']) {
  display: none !important;
}}
******* */

/* * @media screen and (max-width: 768px){ * */

#navcol-1 {
  ddisplay: block !important;
}

/* ** IF BODY GETS WIDER, KEYBOARD SIZE GETS MUCKED UP; RESTRICT FOR NOW ** */

/* The navbar will be visible even though the rest of the body isn't per the above rule */

/* **** PREVENT BROWSER FROM REFRESHING ON DOWNSWIPE **** */

html, body {
  overscroll-behavior-y: none;
}

#navbar-container-div .container {
  max-width: none !important;
  margin-left: 10px !important;
  margin-right: 12px !important;
}

html, body {
  height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* PREVENT HAMBURGER FROM GETTING OUTLINED WHEN FOCUSED */

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

#info-and-burger-buttons-span {
  opacity: .9;
  width: 160px;
  /*visibility: visible;*/
}

#info-and-burger-buttons-span > button {
  flex: 1 1 0 !important;
  /*grow: 1, shrink:1, basis:0;*/
  min-width: 0 !important;
}

#info-and-burger-buttons-span #share-button {
  width: 28px;
  height: 34px;
  background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22scale(1.15)%22%3E%3Cpath%20d%3D%22M5%2012V17C5%2018.6569%206.34315%2020%208%2020H16C17.6569%2020%2019%2018.6569%2019%2017V12M12%2016V4M12%204L8%208M12%204L16%208%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
}

#info-button {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='white' stroke-width='2'/%3E%3Ctext x='12' y='12' fill='white' font-family='Arial' font-style='italic' font-weight='bold' font-size='12' text-anchor='middle' dominant-baseline='central'%3Ei%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  position: relative;
  height: 28px;
}

#trash-can-button {
  background-color: transparent;
  background-repeat: no-repeat;
  position: relative;
  height: 28px;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M20.0 12a8.5 8.5 0 1 1-3-6.3" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M20.5 3v6h-6" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' transform='scale(1.15)'><path d='M5 7h14' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M6 7v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M10 11v6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M14 11v6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

#trash-can-button.disabled #trash-can-overlay {
  background-color: gray;
  opacity: .5;
}

#trash-can-button.disabled {
  cursor: default !important;
}

#settings-button {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.07 12.93a7.5 7.5 0 0 0 .01-1.86l2.01-1.67a.5 .5 0 0 0 .12-.64l-2-3.46a.5 .5 0 0 0-.61-.22l-2.49 1c-.28-.2-.6-.34-.92-.53l-.37-2.64a.5 .5 0 0 0-.49-.41h-4a.5 .5 0 0 0-.49.41l-.37 2.64a2.07 2.07 0 0 0-.92.53l-2.49-1a.5 .5 0 0 0-.61.22l-2 3.46a.5 .5 0 0 0 .12.64l2.01 1.67a7.5 7.5 0 0 0 .01 1.86l-2.01 1.67a.5 .5 0 0 0-.12.64l2 3.46a.5 .5 0 0 0 .61.22l2.49-1c.28.2.6.34.92.53l.37 2.64a.5 .5 0 0 0 .49.41h4a.5 .5 0 0 0 .49-.41l.37-2.64c.32-.19.64-.33.92-.53l2.49 1a.5 .5 0 0 0 .61-.22l2-3.46a.5 .5 0 0 0-.12-.64l-2.01-1.67z'%3E%3C/path%3E%3C/svg%3E");
  background-color: transparent;
  background-repeat: no-repeat;
  position: relative;
  height: 27px;
  width: 27px;
}

#info-and-burger-buttons-span {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around !important;
}

#info-and-burger-buttons-span button {
  background-position-x: center !important;
}

.modal-backdrop.show {
  opacity: .1 !important;
  bbackground: orange;
}

/* ****** KEYBOARD ******** */

.ui-keyboard-button {
  width: min(59px, calc((100vw / 10.5) - 5px));
}

button.ui-keyboard-button.ui-state-default.ui-corner-all {
  background-color: rgb(110, 110, 110);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-keyboard-button.ui-state-default.ui-corner-all {
  background-image: none;
}

.ui-keyboard-text {
  color: rgb(250, 250, 250);
}

.ui-keyboard.ui-widget-content.ui-widget {
  background: transparent;
}

.ui-keyboard.ui-widget-content.ui-widget.ui-corner-all {
  border: none;
  padding: 0px;
}

.ui-keyboard-button {
  height: 50px;
  height: 49px;
  padding-left: 7px;
  padding-right: 7px;
  font-family: monospace !important;
  font-size: 16px !important;
  font-weight: 300 !important;
}

@media screen and (max-width: 768px) {
  .ui-keyboard-button {
    font-size: 14px !important;
    font-weight: 300;
  }
}

.ui-keyboard-button.ui-keyboard-ENTER {
  font-size: 7px !important;
}

.ui-keyboard-button {
  vertical-align: top;
  min-width: 21px !important;
  top: -.3px;
}

.ui-keyboard-button.ui-keyboard-actionkey.ui-keyboard-ENTER.ui-keyboard-widekey {
  min-width: 58px !important;
}

.ui-keyboard-button.ui-state-default.ui-corner-all {
  min-width: 48px;
}

.ui-keyboard-button.ui-state-default.ui-corner-all {
  margin: 2px;
}

/* * */

button.ui-keyboard-bksp.ui-keyboard-button {
  min-width: 60px !important;
  font-weight: 300 !important;
}

@media screen and (max-width: 568px) {
  button.ui-keyboard-bksp.ui-keyboard-button {
    font-size: 20px !important;
    font-size: 2em !important;
  }
}

/* ****** */

/* ****** PREVENT INPUT BOX FROM RESPONDING TO H; OTHERWISE HING SQUARES MUCKS UP MY FOCUS HANDLING **** */

/* ***********
.ui-keyboard {
  top: 0px !important;
}
************ */

/* ***** INPUT FIELDS ****** */

#JMP5boxesDiv input {
  max-height: 61px;
  min-height: 61px !important;
  max-width: 61px;
  min-width: 61px !important;
}

#container-of-6-boxes-div:not(.isMobile) #JMP6boxesDiv input {
  max-height: 59px;
  min-height: 59px !important;
  max-width: 59px;
  min-width: 59px !important;
}

/* *********
.animate__animated.animate__flipInX {
  --animate-delay: 2s;
}

:root {
  --animate-duration: 800ms;
  --animate-delay: 2.9s;
}
*********** */

/* .form-control input { */

[id$="boxesDiv"] input {
  border-radius: 1px !important;
  bborder-style: solid !important;
  border-color: white !important;
  background-color: "";
  padding: 0px !important;
  font-weight: 600 !important;
  ccolor: white !important;
  font-size: 40px !important;
  background: transparent;
  box-shadow: none;
  caret-color: transparent;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* ************* NAVBAR ************* */

.navbar.navbar-light.py-3 {
  padding-top: 10px !important;
}

/* ****** */

#container-of-6-boxes-div, #container-of-5-boxes-div, #container-of-7-boxes-div {
  /*max-height: 389px;*/
  /*overflow-y: hidden !important;*/
  ooooverflow-y: scroll !important;
  sscroll-behavior: smooth;
  sscroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
}

/* ** CAUSE ROWS TO SNAP TO TOP OF THEIR CONTAINER, WHEN CONTAINER IS SCROLLED ** */

[id^="container-of-"][id$="-boxes-div"] form {
  sscroll-snap-align: start;
}

/* *******
[id^='JMP'][id$='boxesDiv'] {
  scroll-behavior: smooth;
  overscroll-behavior-y:contain;
  overflow-y: hidden;
******* */

/* **** MENU **** */

#scroll-down {
  background: rgb (100, 100, 100) !important;
  border-radius: 8px !important;
  width: fit-content !important;
  padding: 10px !important;
}

#scroll-down .nav-link {
  color: white !important;
  color: rgba(255, 255, 255, 1) !important;
}

#scroll-down li {
  line-height: 18px !important;
  margin-right: 8px !important;
}

/* MENU SLIDES DOWN WHEN OPENED */

@keyframes slideDownFade {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-down-animated {
  animation: slideDownFade 0.3s ease-out;
  animation: slideDownFade 1s ease-out;
}

/* ... AND FOR SLIDING BACK UP */

@keyframes slideUpFade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
    transform: translateY(-400px);
  }
}

.scroll-up-animated {
  animation: slideUpFade 0.3s ease-out;
  aanimation: slideUpFade 4s ease-out;
}

/* FOR BOOTSTRAP'S AUTOMATIC ANIMATION OF THE MENU'S HEIGHT CAUSED BY ITS ADDITION OF .collapsing
 * WHEN THE MENU GETS SHOWN OR HIDDEN; CONTROL THAT ANIMATION'S SPEED. */

#navcol-1.collapsing {
  transition: height .1s ease-in;
}

/* ******** MENU ITEMS FOR TEST VERSION ONLY ******* */

#four-letter-menu-item {
  display: none;
}

#seeFirstLetter {
  display: none;
}

#scroll-boxes-up {
  display: none;
}

#four-letter-menu-item {
  display: none;
}

/* *********** OVERLAY TO DISABLE PAGE ELEMENTS WHEN MY MODAL "JMPALERT" BOX OPENS ****** */

#overlay {
  z-index: 20000;
  opacity: 0.4;
  background: gray;
  position: fixed;
}

.disable-click {
  pointer-events: none;
}

/* ****************************************************
/**** PREVENT SCROLLBAR ON OUTER BOXES CONTAINER *** */

[id^="container-of"][id$="boxes-div"] {
  scroll-behavior: smooth;
  overflow: auto;
  -ms-overflow-style: none;
  sscrollbar-width: none;
}

[id^="container-of"][id$="boxes-div"]::-webkit-scrollbar {
  display: none;
}

/* *** END PREVENT SCROLLBAR ON OUTER BOXES CONTAINER ****
******************************************************** */

/* ******************************************************************************************************************
******************************************** SEVEN BOXES NON-MOBILE ************************************************
******************************************************************************************************************* */

:root {
  --squareSide: clamp(12px, 12.5vw, 61px);
  --squaremargin: 2px;
  --formHeight: calc(var(--squareSide) + var(--squaremargin) + var(--squaremargin));
  --formHeight: calc(2 * var(--squaremargin) + var(--squareSide));
}

#container-of-7-boxes-div:not(.isMobile) #word-row-form-6 {
  ddisplay: none !important;
}

/* ** BOX SIZE AND SIDE marginS ** */

#container-of-7-boxes-div:not(.isMobile) #JMP7boxesDiv input {
  height: var(--squareSide) !important;
  width: var(--squareSide) !important;
  margin-left: var(--squaremargin) !important;
  margin-right: var(--squaremargin) !important;
  font-size: 40x !important;
}

/* ** FORM's HEIGHT = SQUARE HEIGHT, AND BOTTOM margin ** */

#container-of-7-boxes-div:not(.isMobile) #JMP7boxesDiv form.flex-row {
  flex-direction: row !important;
  justify-content: center !important;
  height: var(--squareSide) !important;
  margin-bottom: calc(var(--squaremargin) * 2) !important;
}

/* ** BOTH CONTAINERS HEIGHT AND WIDTH ** */

#container-of-7-boxes-div:not(.isMobile) {
  width: 96% !important;
  height: calc(var(--formHeight) * 7 + 1px) !important;
}

#container-of-7-boxes-div:not(.isMobile) #JMP7boxesDiv {
  width: 95% !important;
  height: calc(var(--formHeight) * px + 2px) !important;
}

/* ** TELL BOTH INNER AND OUTER CONTAINERS TO CENTER CONTENT VERTICALLY ** */

#container-of-7-boxes-div:not(.isMobile), #JMP7boxesDiv {
  flex-direction: column !important;
  jjustify-content: center !important;
}

/* *
#container-of-7-boxes-div:not(.isMobile) input {
  background-color: purple !important;
}
  * */

/* ******************************************************************************************************************
******************************************** SIX BOXES PHONE *****************************************************
******************************************************************************************************************* */

:root {
  --sixSquareSideMobile: 56px;
  --sixSquaremarginMobile: 2px;
  --sixFormHeightMobile: calc(var(--sixSquareSideMobile) + var(--sixSquaremarginMobile) + var(--sixSquaremarginMobile));
  --sixFormHeight: calc(2 * var(--squaremargin) + var(--squareSide));
}

/* ** BOX SIZE AND SIDE marginS ** */

#container-of-6-boxes-div.isMobile #JMP6boxesDiv input {
  height: var(--sixSquareSideMobile) !important;
  width: var(--sixSquareSideMobile) !important;
  margin-left: var(--sixSquaremarginMobile) !important;
  margin-right: var(--sixSquaremarginMobile) !important;
  font-size: 40px !important;
}

/* ** FORM's HEIGHT = SQUARE HEIGHT, AND BOTTOM margin ** */

#ccontainer-of-6-boxes-div.isMobile #JMP6boxesDiv form.flex-row {
  flex-direction: row !important;
  justify-content: center !important;
  hhheight: var(--sixSquareSideMobile) !important;
  margin-bottom: calc(var(--sixSquaremarginMobile) * 2) !important;
}

/* ** BOTH CONTAINERS HEIGHT AND WIDTH ** */

#ccontainer-of-6-boxes-div.isMobile {
  width: 95% !important;
  height: calc(var(--sixFormHeightMobile) * 6) !important;
  /*height: 336px !important;*/
  hheight: 200px !important;
}

#cccontainer-of-6-boxes-div.isMobile #JMP6boxesDiv {
  width: 95% !important;
  height: calc(var(--sixFormHeightMobile) * 6 px + 2px) !important;
  height: 350px;
}

/* ** TELL BOTH INNER AND OUTER CONTAINERS TO CENTER CONTENT VERTICALLY ** */

#container-of-6-boxes-div.isMobile, #JMP6boxesDiv {
  fflex-direction: column !important;
  jjustify-content: center !important;
}

/* ******************************************************************************************************************
****************************************END SIX BOXES PHONE *****************************************************
******************************************************************************************************************* */

.no-display {
  display: none !important;
}

/* *******
.ui-keyboard-input {
  border-color: rgb(220, 228, 235) !important;
  bborder-color: white !important;
}

@media (prefers-color-scheme: dark) {
  ui-keyboard-input {
      border-color: red!important;
  }
}
*********** */

/* * WHEN THE JS COVERS THE NAVBAR ICONS IT SETS OPACITY TO '1' AND "transition:"
 ** IN THIS RULE MAKES IT FADE IN * */

/* *
.JMPboxesContainer {
  opacity: 0;
  visibility: hidden;
  
  transition: opacity 1000ms ease-in-out;
  transition: opacity 0ms;
}
*** */

#nav-icons-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease-in-out;
  z-index: 1000;
}

/* ************** MAKE WINNER ANIMATION THE RIGHT SIZE ************** */

#winner-overlay-div img {
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 100%;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 600px) {
  #winner-overlay-div {
    max-width: 100%;
  }
}

#winner-overlay-div #good-job-img {
  position: relative;
  top: -100px;
}

img .JMP-object-fit {
  object-fit: fill;
}

#homescreen-inst-div, #homescreen-inst-div * {
  background: transparent;
}

#jmp-modal .modal-footer, .modal-footer {
  position: relative;
  justify-content: center;
}

/* #jmp-modal-game-history .modal-title, [id$="boxes-div"] {
  display: inline;
  pointer-events: auto;
} */

#jmp-modal-close-button {
  position: relative;
}

.modal-dialog {
  width: 85vw !important;
  max-width: 300px;
}

#settings-modal .modal-dialog {
  width: 95vw !important;
  max-width: 340px;
  mmin-width: 347px;
}

#settings-modal .modal-content {
  padding-bottom: 10px;
}

.JMP-text-with-toggle {
  padding-right: 14px;
}

#up-arrow {
  position: absolute;
  right: 10px;
  visibility: hidden;
  pointer-events: auto;
}

#down-arrow {
  margin: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  pointer-events: auto;
}

/* THE :is IS A LOGICAL "OR" */

[id^="container-of"] :is([id^="word-row-form"], [id^="added-row"]) .form-control {
  background-color: var(--bs-gray-700);
}

/* Remove the default BS focus styles */

input:focus, textarea:focus, select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* PREVENT OUTLINING AROUND BUTTONS IN MODALS */

.modal .btn, .modal .btn-close {
  outline: none !important;
  box-shadow: none !important;
}

.modal-content {
  max-height: 70vh !important;
}

/* ******** SIMPLE KEYBOARD ********* */

/* * Hide the Mottie kb * */

.ui-keyboard-keyset {
  ddisplay: none !important;
}

/* Use !important to override .hg-theme-default rules * */

/* #simple-keyboard.kb-disabled .hg-button { */

#simple-keyboard.kb-disabled #keyboard-overlay {
  opacity: .5 !important;
}

#simple-keyboard.kb-disabled .hg-button {
  bbackground-color: rgb(110, 110, 110) !important;
  color: rgb(255, 255, 255);
  cursor: default;
}

.simple-keyboard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(110, 110, 110);
  background-color: inherit;
  width: 100%;
  max-width: 630px;
  position: relative !important;
  height: auto !important;
  flex-grow: 1 !important;
  z-index: 6 !important;
  background-color: transparent !important;
}

@media screen and (min-height: 710px) {
  .ssimple-keyboard {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
  }
}

@media (max-height: 768px)
/* and (orientation: portrait) */ {
  .simple-keyboard {
    justify-content: center;
    margin: 0 !important;
  }
}

.hg-rows {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
  justify-content: center !important;
  align-items: center !important;
  flex-shrink: 1;
  max-height: 300px;
}

.hg-rows.seven-letter-game {
  max-width: 550px !important;
}

.hg-row {
  width: 100% !important;
  justify-content: center !important;
  flex-grow: 1 !important;
  flex-shrink: 1;
  margin: 2px !important;
  min-height: 0 !important;
  ffont-size: calc(min(6vh, 8vw));
}

.hg-theme-default .hg-button {
  background-color: rgb(110, 110, 110);
  color: white;
  box-shadow: none !important;
  border: .85px solid rgb(204, 204, 204) !important;
  height: auto !important;
  min-height: 0;
  max-width: 9% !important;
  margin: 0px !important;
  margin-top: 1px !important;
  font-family: monospace !important;
  font-weight: 300 !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
  fffont-size: calc(min(5vh, 8vw));
  font-size: calc(min(5vh, 2.5em));
}

.hg-button[data-skbtn="Enter"], .hg-button[data-skbtn="Backspace"] {
  width: 14% !important;
  max-width: 14% !important;
  padding: 0;
  line-height: 1;
}

.hg-button[data-skbtn="Backspace"] span {
}

.hg-activeButton {
  background: rgba(229, 232, 235, 0.99) !important;
  color: rgba(22, 21, 24, 0.49) !important;
}

.simple-keyboard .hg-button[data-skbtn="Backspace"] svg {
  width: 50% !important;
  height: 50% !important;
}

/* **********
.hg-button[data-skbtn="Enter"] span {
font-size: 80px;
  max-height: 50px;
  top: -40px;
  position: relative;
******* */

.hg-button[data-skbtn="Enter"] span {
  font-size: 50px;
  line-height: 50px;
  height: 50px;
  max-height: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.simple-keyboard, .hg-row, .hg-rows, .hg-button {
  min-height: 0 !important;
}

#keyboard-overlay {
  position: absolute;
  opacity: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000;
  transition: opacity 0.5s ease-in-out;
}

/* ** FADE AN IMAGE IN AND OUT ** */

.fade-animation {
  animation: fadeInOut 1s infinite;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: .4;
  }
  50% {
    opacity: 1;
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

@keyframes pulse {
  0% {
    transform: scale(.7);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.JMPpulse {
  animation: pulse 1s ease-in-out;
}

@keyframes JMPfadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

.JMPfadeIn {
  animation: JMPfadeIn 1s ease-in-out;
}

@keyframes JMPborderWidth {
  0% {
    border-width: 2px;
  }
  50% {
    border-width: 9px;
  }
  100% {
    border-width: 2px;
  }
}

.JMPborderWidth {
  animation: JMPborderWidth 1s ease-in-out;
}

[id$="5-boxes-div"], [id$="6-boxes-div"], [id$="7-boxes-div"] {
  overflow: auto !important;
  /*margin: 0px !important;*/
  position: relative !important;
  justify-content: flex-start !important;
}

[id$="5-boxes-div"] {
  height: 393px !important;
}

[id$="6-boxes-div"] {
  height: 372px !important;
}

[id$="7-boxes-div"] {
  height: 371px !important;
}

[id$="boxesDiv"] {
  overflow: visible !important;
  justify-content: flex-start !important;
}

[id$="5boxesDiv"] form {
  margin-bottom: 5px !important;
}

[id$="6boxesDiv"] form {
  width: 370px !important;
  margin-bottom: 3px !important;
}

#navbar-container-div, .navbar {
  height: 60px !important;
  /*margin-bottom: 7px !important;*/
}

.modal-backdrop {
  display: none !important;
}

.navbar-brand {
  ppointer-events: auto !important;
}

/* Hide the share button if .noshare is on <html> */

.noshare #share-button {
  display: none !important;
}

.noshare #info-and-burger-buttons-span {
  width: 130px !important;
}