/**
* Wordfind.js 0.0.1
* (c) 2012 Bill, BunKat LLC.
* Wordfind is freely distributable under the MIT license.
* For all details and documentation:
*     http://github.com/bunkat/wordfind
*/
body {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 300 !important;
  background-color: black;
  color: #666666 !important;
  /* line-height: 2.3em !important; */
  margin: 2em !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: -moz-none !important;
  -ms-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
  min-width: 1000px !important;
}

.mostrar {
  opacity: 1.0;
}

.ocultar {
  width: 40px;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  display: inline-table;
  font-weight: bold;
}


p {
  font: 22pt sans-serif;
  margin: 20px 20px 0px 20px;
}

/**
* Styles for the puzzle
*/
#juego {
  /* border: 1px solid black; */
  padding: 5px;

  /* margin: 5px; */
}

#juego div {
  /* width: 100%; */
  margin: 0 auto;
}

/* style for each square in the puzzle */
.puzzleSquare {
  height: 30px;
  width: 30px;
  text-transform: uppercase;
  background-color: rgb(214, 200, 200);
  border: 0;
  font: 1em sans-serif;
}

button::-moz-focus-inner {
  border: 0;
}

/* indicates when a square has been selected */
#juego .selected {
  background-color: orange;
}

/* indicates that the square is part of a word that has been found */
#juego .found {
  background-color: blue;
  color: white;
}

.subraya {
  text-decoration: line-through;
  color: #9d7511 !important;

}

#juego .solved {
  background-color: #dfbe64 !important;
  color: white;
}

/* indicates that all words have been found */
#juego .complete {
  background-color: #a8c0a8;

}

.palabras {
  text-align: start !important;
  padding: 10px 0;
  /* margin-left: 50px;
  margin-bottom: 20px;
  margin-top: 20px; */
  background-color: #ededed;
  border-radius: 10px;
  column-count: 2;
}


.palabras ul {
  flex-direction: row;
  list-style-type: none;
  padding: 4px;
}

.palabras li {
  padding: 5px;
  font: 1em sans-serif;
  margin-bottom: 5px;
}

/* indicates that the word has been found */
.palabras .wordFound {
  text-decoration: line-through;
  color: #dfbe64;
  font-weight: bold;
}

.parrafos {
  text-align: start !important;
  padding: 10px 0;
  /* margin-left: 50px;
  margin-bottom: 20px;
  margin-top: 20px; */
  background-color: #ededed;
  border-radius: 10px;
}

.parrafos ul {
  flex-direction: row;
  list-style-type: none;
  padding: 10px;
}

.parrafos li {
  padding: 3px 0;
  font: 1em sans-serif;
  margin-top: 7px;
}

/* indicates that the word has been found */
.parrafos .wordFound {
  color: black;

}


/**
* Styles for the button
*/
#solve,
#again,
#btn-iniciar {
  padding: 10px;
  background-color: #0069d9;
  margin: 30px;
  color: azure;
  border-radius: 7px;
}

.headings {
  /*nm*/
  font-family: 'Open Sans', sans-serif;
  color: #b1b1b1;
  letter-spacing: 1px;
  font-size: 1em;
  margin: 0;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #666666;
  font-size: 1.1em;
  line-height: 1.8em;
  font-weight: 300;
  letter-spacing: .7px;
  text-align: left;
}

.actividad {
  max-width: 250px;
  background: #b1b1b1;
  padding: 5px;
  border-radius: 20px;
  text-align: center;
  color: #fff !important;
  margin-bottom: 15px !important;
}

.headings-int {
  font-family: 'Open Sans', sans-serif;
  color: #003b71;
  letter-spacing: 1px;
  font-size: 2em;
  margin-top: 0;
  font-weight: bold;
}

.under-li {
  border-bottom: solid #dbdbdb;
  border-width: 3px;
  padding-bottom: 9px;
  width: 80%;
}

a {
  padding: 30px;
}

@media (max-width: 900px) {

  .palabras,
  .parrafos {
    width: 500px;
    column-count: 2;
  }
}

@media (max-width: 600px) {

  .palabras,
  .parrafos {
    width: 300px;
    column-count: 2;
  }
}

@media (max-width: 300px) {

  .palabras,
  .parrafos {
    width: 200px;
    column-count: 2;
  }
}


#countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  background-color: #ededed;
  border-radius: 10px;
}

#prohibido {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  color: red;
  font-weight: bold;
  font-size: large;
  z-index: 1000000;
}

#mododebug {

  align-items: center;
  justify-content: left;
  font-size: 2vw;
  border-radius: 10px;
}

i.ip {
  color: #83c635;
}

i.it {
  color: #f01b18;
}

.blink {
  animation: blink 2s linear infinite;
  -webkit-animation: blink 2s linear infinite;
}

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}

@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

[data-title]:after {
  content: attr(data-title);
  background-color: #83c635;
  color: #fff;
  font-size: 14px;
  width: 100px;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  padding: 3px 20px;
  bottom: -1.6em;
  left: 100%;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #83c635;
  opacity: 0;
  border: 1px solid #83c635;
  z-index: 99999;
  visibility: hidden;
  border-radius: 6px;

}

[data-title] {
  position: relative;
}

/**/
.retroBien {
  color: rgb(0, 131, 0);
  background-color: rgba(0, 255, 0, 0.1);
  border: 1px solid rgb(0, 165, 0);
  padding: 6px;
  border-radius: 3px;
  line-height: 30px;
}

.retroMal {
  color: rgb(131, 0, 0);
  background-color: rgba(255, 0, 0, 0.1);
  border: 1px solid rgb(165, 0, 0);
  padding: 6px;
  border-radius: 3px;
  margin: 0 2px;
  line-height: 30px;
}

.bien {
  border-color: #00A500;
}

.mal {
  border-color: #A50000;
}

i.ip {
  color: #83c635;
}

i.it {
  color: #f01b18;
}

i.ii {
  color: #31b0d5;
}

.blink {
  animation: blink 2s linear infinite;
  -webkit-animation: blink 2s linear infinite;
}

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}

@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}

[data-toggle]:after {
  content: attr(data-toggle);
  background-color: #83c635;
  color: #fff;
  font-size: 14px;
  width: 100px;
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  padding: 3px 20px;
  bottom: -1.6em;
  left: 100%;
  white-space: nowrap;
  box-shadow: 1px 1px 3px #83c635;
  opacity: 0;
  border: 1px solid #83c635;
  z-index: 99999;
  visibility: hidden;
  border-radius: 6px;

}

[data-toggle] {
  position: relative;
}


.tooltip-inner {
  font-size: 1.2em;
  text-align: left;
  min-width: 280px;
  padding: 10px
}

.tooltip.primary .tooltip-inner {
  background-color: #337ab7;
}

.tooltip.primary.top>.tooltip-arrow {
  border-top-color: #337ab7;
}

.tooltip.primary.right>.tooltip-arrow {
  border-right-color: #337ab7;
}

.tooltip.primary.bottom>.tooltip-arrow {
  border-bottom-color: #337ab7;
}

.tooltip.primary.left>.tooltip-arrow {
  border-left-color: #337ab7;
}

.tooltip.info .tooltip-inner {
  background-color: #31b0d5;
}

.tooltip.info.top>.tooltip-arrow {
  border-top-color: #31b0d5;
}

.tooltip.info.right>.tooltip-arrow {
  border-right-color: #31b0d5;
}

.tooltip.info.bottom>.tooltip-arrow {
  border-bottom-color: #31b0d5;
}

.tooltip.info.left>.tooltip-arrow {
  border-left-color: #31b0d5;
}

.tooltip.success .tooltip-inner {
  background-color: #83c635;
  max-width: 300px;
}

.tooltip.success.top>.tooltip-arrow {
  border-top-color: #83c635;
}

.tooltip.success.right>.tooltip-arrow {
  border-right-color: #83c635;
}

.tooltip.success.bottom>.tooltip-arrow {
  border-bottom-color: #83c635;
}

.tooltip.success.left>.tooltip-arrow {
  border-left-color: #83c635;
}

.tooltip.warning .tooltip-inner {
  background-color: #ec971f;
}

.tooltip.warning.top>.tooltip-arrow {
  border-top-color: #ec971f;
}

.tooltip.warning.right>.tooltip-arrow {
  border-right-color: #ec971f;
}

.tooltip.warning.bottom>.tooltip-arrow {
  border-bottom-color: #ec971f;
}

.tooltip.warning.left>.tooltip-arrow {
  border-left-color: #ec971f;
}

.tooltip.danger .tooltip-inner {
  background-color: #f01b18;
}

.tooltip.danger.top>.tooltip-arrow {
  border-top-color: #f01b18;
}

.tooltip.danger.right>.tooltip-arrow {
  border-right-color: #f01b18;
}

.tooltip.danger.bottom>.tooltip-arrow {
  border-bottom-color: #f01b18;
}

.tooltip.danger.left>.tooltip-arrow {
  border-left-color: #f01b18;
}

.tooltip.in {
  opacity: 1 !important;
}