#overlay {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(247, 241, 227, 0.96);
  z-index: 5;
}

#overlayBox {
  position: absolute;
  left: 6%;
  top: 8%;
  right: 6%;
  bottom: 8%;
  border: 3px solid #d6c7a7;
  background: #fffdf6;
}

#overlayBox.overlayNewTimer {
  top: 4%;
  bottom: 5%;
}

#overlayBox.overlayNewTimer #overlayTitle {
  top: 14px;
  font-size: 40px;
}

#overlayBox.overlayNewTimer #overlayContent {
  top: 76px;
  bottom: 18px;
}

#overlayTitle {
  position: absolute;
  left: 28px;
  top: 22px;
  right: 28px;
  font-size: 44px;
  font-weight: bold;
  color: #17362f;
  text-align: center;
}

#overlayContent {
  position: absolute;
  left: 34px;
  top: 92px;
  right: 34px;
  bottom: 28px;
  font-size: 34px;
  color: #25302b;
}

.choice {
  height: 62px;
  line-height: 62px;
  border: 3px solid #d6c7a7;
  margin-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
  background: #fff9ec;
  overflow: hidden;
  cursor: pointer;
}

.choice.focused {
  border-color: #286a5a;
  background: #e6f2e4;
}

.choiceGrid {
  overflow: hidden;
}

.choiceHalf {
  float: none;
  width: auto;
  margin-right: 0;
}

.fieldRow {
  text-align: center;
  margin-top: 24px;
  font-size: 40px;
}

.field {
  display: inline-block;
  min-width: 128px;
  height: 82px;
  line-height: 82px;
  margin: 0 10px;
  border: 3px solid #d6c7a7;
  background: #fff9ec;
  font-size: 54px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.field.focused {
  border-color: #286a5a;
  background: #e6f2e4;
}

.hint {
  text-align: center;
  margin-top: 22px;
  font-size: 26px;
  color: #5d6b63;
}

.smallButton {
  display: inline-block;
  min-width: 86px;
  height: 62px;
  line-height: 54px;
  margin: 0 10px;
  border: 3px solid #d6c7a7;
  background: #fff9ec;
  color: #25302b;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.startButton {
  min-width: 170px;
  background: #438b4c;
  border-color: #35723e;
  color: #fffdf6;
  font-size: 30px;
}



.timerCreateGrid {
  overflow: hidden;
}

.timerCreateColumn {
  float: left;
  width: 31%;
  margin-right: 2%;
}

.timerCreateColumnTitle {
  font-size: 24px;
  font-weight: bold;
  color: #17362f;
  margin-bottom: 12px;
  text-align: center;
}

.timerCreateColumn .choice {
  font-size: 24px;
  height: 50px;
  line-height: 50px;
  margin-bottom: 9px;
}

.timerCreateColumn .fieldRow {
  margin-top: 12px;
  font-size: 28px;
}

.timerCreateColumn .field {
  min-width: 72px;
  height: 58px;
  line-height: 58px;
  font-size: 38px;
}

.timerCreateColumn .smallButton {
  min-width: 62px;
  height: 48px;
  line-height: 40px;
  font-size: 22px;
  margin: 0 4px;
}

.timerCreateColumn .startButton {
  min-width: 120px;
}

.timerRecentColumn .choice {
  height: 38px;
  line-height: 38px;
  margin-bottom: 6px;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 21px;
}

.timerRecentColumn .hint {
  margin-top: 8px;
  font-size: 20px;
}