body,
html {
  margin: 0px;
  font-family: "Verdana";
  background-color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  display: none;
}

#container {
  position: absolute;
  top: 42px;
  width: 700px;
  height: 558px;
  border: 1px solid black;
  background-color: #bfe8ff;
}

#container.algebraic {
  background-color: #aaffc3;
}

#statement {
  position: absolute;
  left: 4px;
  top: 10px;
  width: 692px;
  height: 32px;
  font-size: 18px;
  text-align: center;
}

#subheader {
  position: absolute;
  left: 104px;
  top: 42px;
  width: 486px;
  height: 36px;
  font-size: 18px;
  text-align: center;
}

#streets {
  position: absolute;
  left: 96px;
  top: 98px;
  background-color: #bbb;
  width: 500px;
  height: 338px;
  border: 1px solid #777;
  border-radius: 2px;
}

#container.algebraic #streets {
  left: 80px;
  width: 532px;
  height: 334px;
  background-color: #42d4f4;
}

.clue {
  position: absolute;
  background-color: #d8edf2;
  border: 1px solid black;
  width: 50px;
  height: 47px;
  padding-top: 3px;
  font-size: 34px;
  text-align: center;
}

#container.algebraic .clue {
  background-color: #edf4f2;
}

.clue.smol {
  padding-top: 12px;
  height: 38px;
  font-size: 20px;
}

.clue.round {
  border-radius: 27px;
}

.clue.round input {
  position: absolute;
  left: 0.34px;
  top: 0.32px;
  width: 45px;
  height: 47px;
  background-color: rgba(230, 250, 255, 0.95);
  text-align: center;
  border: none;
  border-radius: 24px;
  font-size: 34px;
  font-family: Verdana;
}

#container.algebraic .clue {
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
  background-image: url(hex.png);
  font-size: 30px;
  padding-top: 11px;
  width: 72px;
  height: 53px;
}

#container.algebraic .clue.round {
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
  background-image: url(square.png);
  font-size: 30px;
  padding-top: 11px;
  width: 64px;
  height: 53px;
}

#container.algebraic .cell {
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
  background-image: url(hex.png);
  font-size: 30px;
  padding-top: 0px;
  width: 72px;
  height: 64px;
}

#container.algebraic .cell.round {
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
  background-image: url(square.png);
  font-size: 30px;
  padding-top: 0px;
  width: 64px;
  height: 64px;
}

#container.algebraic input {
  width: 62px;
  height: 60px;
  padding-top: 2px;
  border: none;
  background: none;
  font-size: 30px;
}

#container.algebraic input:focus {
  border: none;
  outline: none;
}

#container.algebraic .cell input {
  width: 70px;
}

#container.algebraic .cell.round input {
  width: 62px;
}

.cell {
  position: absolute;
  width: 52px;
  height: 52px;
  font-size: 34px;
}

.cell input {
  width: 48px;
  height: 48px;
  font-size: 34px;
  line-height: 24px;
  text-align: center;
  background-color: #fff;
  border: 1px solid;
  -webkit-appearance: none;
  border-radius: 0px;
  padding-left: 1px;
  padding-right: 1px;
  padding-bottom: 2px;
  padding-top: 0px;
  font-family: Verdana;
}

.cell.gratis {
  background-color: #fff;
  text-align: center;
  font-size: 34px;
  padding-top: 4px;
  width: 51px;
  height: 46px;
  border: 1px solid black;
}

.cell.smol input {
  font-size: 20px;
}

.grey {
  position: absolute;
  color: #fff;
  font-size: 92px;
}

.grey.unforced {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #d8edf2;
  margin-left: 6px;
  margin-top: 36px;
  border: 1px solid #333;
}

.hexc {
  position: absolute;
  width: 48px;
  height: 30px;
  font-size: 26px;
  color: #000;
  text-align: center;
}

.hexi {
  position: absolute;
}

.hexi input {
  width: 40px;
  height: 28px;
  font-size: 24px;
  text-align: center;
  font-family: Verdana;
}

.hexi.flawed {
  border: 1px solid red;
  background-color: #fdd;
}

.hexi.flawed input {
  background-color: #fdd;
  font-family: Verdana;
}

.gth {
  position: absolute;
  width: 54px;
  height: 54px;
  font-size: 28px;
  color: #235;
}

#submit {
  position: absolute;
  left: 72px;
  top: 512px;
  background-color: #f2f2c6;
  width: 128px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#submit:hover {
  background-color: #f8f8e6;
}

#hint {
  position: absolute;
  left: 20px;
  top: 512px;
  background-color: #f2f2c6;
  width: 142px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#hint:hover {
  background-color: #f8f8e6;
}

#try-another {
  position: absolute;
  left: 354px;
  top: 512px;
  background-color: #f2f2c6;
  width: 260px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#try-another:hover {
  background-color: #f8f8e6;
}

#try-again {
  position: absolute;
  left: 70px;
  top: 512px;
  background-color: #f2d4c2;
  width: 148px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#try-again:hover {
  background-color: #fbe2d2;
}

#try-again.stretch {
  left: 42px;
  width: 252px;
}

#numbers-used {
  position: absolute;
  left: 60px;
  top: 428px;
  width: 584px;
  height: 36px;
  padding-top: 2px;
  font-size: 24px;
  text-align: center;
  pointer-events: none;
}

#message {
  position: absolute;
  left: 8px;
  top: 444px;
  width: 674px;
  height: 36px;
  padding-top: 2px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  pointer-events: none;
}

#container.algebraic #statement {
  left: 0px;
  width: 702px;
  font-size: 24px;
}

#container.algebraic #subheader {
  left: 0px;
  width: 702px;
  top: 44px;
  font-size: 24px;
}

#container.algebraic #message {
  font-size: 24px;
}

/*# sourceMappingURL=styles.css.map */

/*# sourceMappingURL=styles.css.map */