body {
  padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2 */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
  -webkit-tap-highlight-color: transparent;
}

@supports(padding: max(0px)) {
  #main-menu {
    padding-top: max(40px, calc(constant(safe-area-inset-top) + 20px));
    padding-top: max(40px, calc(env(safe-area-inset-top) + 20px));
  }
}

.square-container {
  display: flex;
  flex-wrap: wrap;
  /* background-color: lightseagreen; */
}

.agw-top-border {
  border-top: 1px solid !important;
  border-color: gray !important;
}

.agw-bottom-border {
  border-bottom: 1px solid !important;
  border-color: gray !important;
}

.agw-right-border {
  border-right: 1px solid !important;
  border-color: gray !important;
}

.agw-left-border {
  border-left: 1px solid !important;
  border-color: gray !important;
}


.square {
  /* background-color: lightpink; */

  position: relative;
  flex-basis: 8.33333%;
  margin: 0px;
  border: 0px solid;
  box-sizing: border-box;

  text-align: center;
  font-size: 5vmin;

  overflow: hidden;

  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.highlighted {
  background-color: #1e87f0 !important;
  color: white !important;
}

.found {
  background-color: dimgray;
  color: white;
}

.target-words {
  color: #1e87f0;
  text-align: center;
  font-size: 5vmin;
  font-weight: bold;
  padding: 10vmin 4vmin 4vmin 4vmin;
  /* position: relative; */
}

.target-verse {
  text-align: center;
  font-size: 4vmin;
}

.target-reference {
  padding: 4vmin 4vmin 2vmin 4vmin;
  text-align: center;
  font-size: 6vmin;
  font-weight: bold;
}

.ws-button-row {
  text-align: center;
  /* vertical-align: bottom; */
}

.ws-back-button {
  text-align: left;
}

.ws-new-button {
  text-align: right;
}

.ws-button {
  font-size: 4vmin !important;
  border: 1px solid !important;
  border-color: black !important;
}

.vs-category-heading {
  padding-top: 0.5em;
}

.agw-navbar {
  text-align: center;
  width: 50vmin;
}

.nav-item.active .nav-link {
  color: #1e87f0 !important;
  font-weight: bold !important;
}

.uk-offcanvas-bar {
  background-color: dimgray !important;
}

.uk-button-default:focus, .uk-button-default:hover {
  border-color: #1e87f0 !important;
}

.agw-verse-list-header {
  margin-bottom: 0px !important;
}

.agw-verse-list-add-verse-icon {
  color: #1e87f0 !important;
}

.agw-verse-list-remove-verse-icon {
  color: whitesmoke !important;
}

.agw-delete-menu-item {
  color: whitesmoke !important;
  background-color: salmon !important;
}

.agw-verse-list-edit-verse-icon {
  color: whitesmoke !important;
}

.agw-edit-menu-item {
  color: whitesmoke !important;
  background-color: mediumseagreen !important;
}

.agw-selected-menu-item {
  background-color: #1e87f0 !important;
}

.agw-menu-item {
  border: 0px !important;
}

.call-out-text {
  color: #1e87f0 !important;
}

.agw-row {
  display: inline-block !important;
  vertical-align: middle !important;
}

.agw-nav-button-disabled {
  pointer-events: none;
  color: lightgray !important;
  border: 0px !important;
  font-style: italic !important; 
}

.agw-badge {
  min-width: 30px !important;
  height: 30px !important;
  font-size: 1.2rem !important;
}

.avoid-clicks {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.agw-verse-list-item {
  text-transform: inherit !important;
}

.agw-letter-selector .uk-button{
  font-size: 10vmin !important;
  border: 1px solid !important;
  border-color: white !important;
}

.agw-letter-selector {
  resize: none !important;  
  overflow: scroll !important;
  /* height: 100vh !important; */
}

.agw-letter-guesses {
  font-size: 15vmin !important;
  color: red !important;
  border: 1px solid !important;
  border-color: black !important;
  height: 1.5em;
}