.landing_page_desktop_bg[data-v-0f092191] {
  background-image: url(../img/Background.32c2843d.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.landing_page_mobile_bg[data-v-0f092191] {
  background-image: url(../img/Mobile_Background.89a832c8.jpg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container[data-v-0f092191] {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logo_container[data-v-0f092191] {
  height: 20%;
  width: 80%;
}
.logo-en[data-v-0f092191] {
  height: 100%;
  width: auto;
  background-image: url(../img/Sudoku_Logo_En.51418db1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.logo-jp[data-v-0f092191] {
  height: 100%;
  width: auto;
  background-image: url(../img/Sudoku_Logo_Ja.33868d8e.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.label[data-v-0f092191] {
  margin: 50px 0;
  color: white;
  font-weight: 900;
  font-size: 20px;
}
.buttonGroup[data-v-0f092191] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.button[data-v-0f092191] {
  width: 160px;
  height: 56px;
  display: flex;
  font-weight: 900;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 200;
  margin: 30px;
  background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
  border-radius: 28px;
}
.button span[data-v-0f092191] {
  color: white;
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25);
}
.button span[data-v-0f092191]::before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 3px;
  background: rgba(255, 255, 255, 0.7);
  top: -16px;
  right: 18px;
  z-index: 4;
  border-radius: 20px;
  box-shadow: 0 0 10px 0 #FFFFFF;
  transform: rotate(7.7deg);
}
.button[data-v-0f092191]::after,
.button[data-v-0f092191]::before {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  border-radius: 28px;
}
.button[data-v-0f092191]::before {
  background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
  z-index: 2;
}
.button[data-v-0f092191]::after {
  background: linear-gradient(180deg, #00969A 0%, #67D7B7 100%);
  padding: 1px;
  z-index: 1;
  margin: -1px 0 0 -1px;
}
@media screen and (max-width: 700px) and (min-width: 471px) {
.button[data-v-0f092191] {
    transform: scale(0.8);
    margin: 0;
}
}
@media screen and (max-width: 470px) {
.landing_page_desktop_bg[data-v-0f092191] {
    background-image: url(../img/Mobile_Background.89a832c8.jpg);
}
.buttonGroup[data-v-0f092191] {
    flex-direction: column;
}
.button[data-v-0f092191] {
    transform: scale(1);
    margin: 0 0 10px 0;
}
.logo_container[data-v-0f092191] {
    height: 20%;
    width: 120%;
}
}


.cell[data-v-6cfc3a2f] {
  /*outline: 1px solid #959595;*/
  box-sizing: border-box;
  background-color: white;
}
.defaultBackground[data-v-6cfc3a2f] {
  background-color: #e6e6e6;
}
.selectedBackground[data-v-6cfc3a2f] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(103, 215, 183, 0.5);
}
.selectedBackgroundColumnOrRow[data-v-6cfc3a2f] {
  background-color: #E6FFF8;
}
.answer[data-v-6cfc3a2f] {
  position: absolute;
  font-weight: 700;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.answer--correct[data-v-6cfc3a2f] {
  color: #2c64d5;
}
.answer--userAnswer[data-v-6cfc3a2f] {
  color: #353EB5;
}
.errorMark[data-v-6cfc3a2f] {
  position: absolute;
  border-radius: 50%;
  background-color: #ff4b56;
}
.candidates[data-v-6cfc3a2f] {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #465864;
}
.candidate[data-v-6cfc3a2f] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.candidate--selectedCell.candidate--hidden[data-v-6cfc3a2f]:hover {
  opacity: 0.8;
}
@media (hover: none) {
.candidate--selectedCell.candidate--hidden[data-v-6cfc3a2f]:hover {
    opacity: 0;
}
}
.candidate--hidden[data-v-6cfc3a2f] {
  opacity: 0;
}
.candidate[data-v-6cfc3a2f]:nth-child(n):nth-child(-n+3) {
  top: 20%;
}
.candidate[data-v-6cfc3a2f]:nth-child(n+7) {
  top: 80%;
}
.candidate[data-v-6cfc3a2f]:nth-child(3n-2) {
  left: 20%;
}
.candidate[data-v-6cfc3a2f]:nth-child(3n+3) {
  left: 80%;
}
.checkedErrorMark[data-v-6cfc3a2f] {
  position: absolute;
  width: 140%;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background-color: #ff4b56;
  border-radius: 5px;
}


.cell[data-v-3e62e29c] {
  outline: 1px solid #959595;
  border: 3px #959595;
  background-color: white;
  box-sizing: border-box;
}
.defaultBackground[data-v-3e62e29c] {
  background-color: #e6e6e6;
}
.answer[data-v-3e62e29c] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.grid {
  background: #C1C2DD;
  -webkit-print-color-adjust: exact;
          color-adjust: exact;
  border-radius: 3px;
}
.grayBackground {
  background: #C1C2DD;
}


.keyboardKey[data-v-49f6cd49] {
  box-sizing: border-box;
  position: relative;
  border: 1.5px solid #67D7B7;
  border-radius: 5px;
  color: #fff;
}
.keyboardDelete[data-v-49f6cd49] {
  display: flex;
  color: #fff;
  margin-bottom: 0.5rem;
}
.keyboardMode[data-v-49f6cd49] {
  display: flex;
  color: #fff;
  margin-bottom: 0.5rem;
}
.icon-container[data-v-49f6cd49] {
  padding: 8px;
  border: 2px solid #67D7B7;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.keyboardDelete:hover .icon-label[data-v-49f6cd49] {
  color: #67D7B7;
}
.keyboardMode:hover .icon-label[data-v-49f6cd49] {
  color: #67D7B7;
}
.icon[data-v-49f6cd49] {
  max-height: 100%;
  max-width: 100%;
}
.icon-label[data-v-49f6cd49] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.5rem;
  font-size: 1rem;
  font-weight: 900;
}
.keyboardKeyLabel[data-v-49f6cd49] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  font-weight: 700;
}
.keyboardKeyLabel--left[data-v-49f6cd49] {
  left: 25%;
}
.keyboardKeyLabel--top[data-v-49f6cd49] {
  top: 25%;
}
.keyboardKeyLabel--right[data-v-49f6cd49] {
  left: 75%;
}
.keyboardKeyLabel--bottom[data-v-49f6cd49] {
  top: 75%;
}
@media screen and (max-width: 680px),
(max-height: 530px) {
.icon-label[data-v-49f6cd49] {
    display: none;
}
.keyboardDelete[data-v-49f6cd49] {
    margin-bottom: 0;
}
.keyboardMode[data-v-49f6cd49] {
    margin-bottom: 0;
}
}
@media screen and (max-width: 470px) {
.icon-container[data-v-49f6cd49] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0px solid #67D7B7;
}
.keyboardKeyLabel[data-v-49f6cd49] {
  font-size: 3em;
}
}


.switchContainer[data-v-1eee01bd] {
  font-size: 1rem;
  display: flex;
  margin-bottom: 1em;
  background: #181E76;
  border-radius: 5px;
}
.switchKey[data-v-1eee01bd] {
  box-sizing: border-box;
  width: 50%;
  padding: 10px;
  cursor: pointer;
  color: white;
}
.switchKey--left[data-v-1eee01bd] {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.switchKey--right[data-v-1eee01bd] {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.switchKey--active[data-v-1eee01bd] {
  background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
  color: #353A90;
  border: none;
}
@media screen
  and (max-width: 470px)
  and (min-width: 321px)
{
.switchContainer[data-v-1eee01bd] {
    margin: 0;
    margin-right: 1rem;
    align-items: center
}
.switchKey[data-v-1eee01bd] {
    height: 100%;
}
#switchKey-label-right[data-v-1eee01bd] {
    padding-left: 15px;
    float: right;
}
}
@media screen and (max-width: 320px)
{
.switchKey[data-v-1eee01bd], .switchKey--left[data-v-1eee01bd], .switchKey--right[data-v-1eee01bd], .switchKey--active[data-v-1eee01bd] {
    padding: 7px;
}
.switchKey--right[data-v-1eee01bd] {
    padding-right: 30px;
}
}


.autoCheckboxContainer[data-v-b5d27ed0] {
  display: flex;
  color: #fff;
}
.autoCheckboxContainer:hover #label-text[data-v-b5d27ed0] {
  color: #67D7B7;
}
#autoCheckbox[data-v-b5d27ed0] {
  display: none;
}
#label[data-v-b5d27ed0] {
  display: flex;
}
.icon-container[data-v-b5d27ed0] {
  padding: 8px;
  border: 2px solid #67D7B7;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.icon[data-v-b5d27ed0] {
  margin-bottom: 5px;
  max-height: 100%;
  max-width: 100%;
}
#label-text[data-v-b5d27ed0] {
  display: flex;
  margin-left: 0.5rem;
  justify-content: center;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 900;
}
@media screen and (max-width: 730px) {
#label-text[data-v-b5d27ed0] {
    font-size: 0.84rem;
}
}
@media screen and (max-width: 700px),
(max-height: 530px) {
#label-text[data-v-b5d27ed0] {
    display: none;
}
}
@media screen and (max-width: 470px) {
.autoCheckboxContainer[data-v-b5d27ed0] {
    margin: 0;
    display: block;
}
.candidate-icon[data-v-b5d27ed0] {
    margin-top: -2px;
}
.icon-container[data-v-b5d27ed0] {
    width: 2.5rem;
    height: 2.5rem;
    border: 0px solid #67D7B7;
}
}
@media screen and (max-width: 320px) {
  /* .icon-container {
    width: 1rem;
    height: 1rem;
  } */
.icon[data-v-b5d27ed0] {
    margin-left: -3px;
    margin-bottom: 0;
}
}


.keysContainer[data-v-6a235be6] {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: 10vh;
}
.answerPanel[data-v-6a235be6] {
  margin-left: 20px;
  max-width: 240px;
  position: relative;
}
.bottomContainer[data-v-6a235be6] {
  bottom: 0;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
}
@media screen and (max-width: 680px),
(max-height: 530px) {
.bottomContainer[data-v-6a235be6] {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
}
}
@media screen and (max-height: 540px) {
.keysContainer[data-v-6a235be6] {
    margin-top: 0;
}
}


.keyboardKey[data-v-76b415b0] {
    border: 0px;
}
.keysContainer[data-v-76b415b0] {
    display: flex;
    justify-content: space-evenly;
}
.options--mobile[data-v-76b415b0] {
    display: flex;
}
.keyRow[data-v-76b415b0] {
    display: flex;
    justify-content: space-evenly;
}
.footer--mobile[data-v-76b415b0] {
    display: flex;
    justify-content: space-around;
    margin-top: 1em;
}
@media screen
  and (max-width: 470px)
  and (min-width: 343px)
{
.keyRow[data-v-76b415b0] {
    padding: 0 0.5em;
    justify-content: space-between;
}
.footer--mobile[data-v-76b415b0] {
    margin: 1rem 0;
    justify-content: space-evenly;
}
.options--mobile[data-v-76b415b0] {
    display: flex;
}
}
@media screen and (max-width: 342px)
{
.keysContainer[data-v-76b415b0] {
    padding: 0 3em;
}
.footer--mobile[data-v-76b415b0] {
    justify-content: space-between;
    height: 2rem;
}
.keyRow[data-v-76b415b0] {
    justify-content: space-between;
}
.options--mobile[data-v-76b415b0] {
       display: flex;
    width: 40%;
    justify-content: space-between;
}
.switchContainer[data-v-76b415b0] {
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: bold;
}
}


.gameArea[data-v-647cff62] {
  display: flex;
  justify-content: center;
}
.grid--mobile[data-v-647cff62] {
  margin: 0 auto 1.25em auto;
}
.gameArea--mobile[data-v-647cff62] {
  display: block;
  margin: 0;
}
.gridWrapper[data-v-647cff62] {
  display: flex;
}
.gridWrapper--mobile[data-v-647cff62] {
  display: block;
}


.underlined[data-v-d1a7e442] {
  border-bottom: 4px solid white;
  font-size: 1.80rem;
  margin-top: -15px;
}
.instructions-text[data-v-d1a7e442] {
  white-space: pre-line;
  text-align: left;
  padding: 0 1.7em;
  color: white;
}
.container[data-v-d1a7e442] {
  display: flex;
}
#sound-icon[data-v-d1a7e442] {
  margin-right: 1rem;
}
#print-icon[data-v-d1a7e442],
#question_icon[data-v-d1a7e442] {
  margin-right: 1rem;
  height: 2.5rem;
}
.navBarRoot[data-v-d1a7e442] {
  width: 100%;
  height: var(--navigation-bar-height);
  display: flex;
  justify-content: flex-start;
  margin-left: 1em;
}
@media screen and (max-width: 470px) and (min-width: 321px) {
.navBarRoot[data-v-d1a7e442] {
    justify-content: space-between;
    margin-left: 0;
}
#sound-icon[data-v-d1a7e442] {
    margin-right: 0.2rem;
}
}
.text-wrapper[data-v-d1a7e442] {
  display: flex;
  align-items: center;
  font-weight: 700;
}
.text-icon[data-v-d1a7e442] {
  margin-right: 1em;
  height: 1em;
}
.level-wraper[data-v-d1a7e442] {
  font-size: 1.5rem;
  background-color: #181E76;
  margin-top: 4px;
  border-radius: 5px;
  padding: 0 10px 10px 10px;
  flex-direction: column;
  display: flex;
}
.level-container[data-v-d1a7e442] {
  color: white;
}
.button-level:hover .arrow-icon[data-v-d1a7e442] {
  transform: rotate(180deg);
}
.timer-text[data-v-d1a7e442] {
  font-size: 2rem;
  font-weight: 900;
  color: white;
}
.diffButtonGroup[data-v-d1a7e442] {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.5rem;
  color: white;
  margin-right: 1rem;
}
.diffIcon[data-v-d1a7e442] {
  height: 2.2rem;
  margin-right: 0.5em;
}
#diff-label[data-v-d1a7e442] {
  font-size: 1.5rem;
  font-weight: 900;
}
.labelIcon[data-v-d1a7e442] {
  height: 2.5em;
}
.icon-container[data-v-d1a7e442] {
  display: block;
  margin: auto;
}
.arrow-icon[data-v-d1a7e442] {
  height: 0.6em;
}
.helpMenu[data-v-d1a7e442] {
  position: fixed;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  right: 0;
  top: 0;
  width: 20em;
  background: linear-gradient(180deg, #048088 0%, #00969A 56.77%, #67D7B7 100%);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), -2px 4px 4px rgba(34, 38, 113, 0.7);
  height: 100vh;
  z-index: 10;
  transition: right 0.3s;
}
#helpMenuCloseButton[data-v-d1a7e442] {
  color: white;
  right: 0;
  position: absolute;
  padding: 0.5em;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
}
.helpMenu-category-text[data-v-d1a7e442] {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0.5em;
  color: white;
  text-align: left;
  min-width: var(--navigation-bar-height);
  line-height: var(--navigation-bar-height);
  padding: 0 0.3em 0 0.3em;
}
.options[data-v-d1a7e442] {
  margin-bottom: 1em;
}
.buttonGroup[data-v-d1a7e442] {
  display: flex;
  align-items: center;
}
.clockButtonGroup[data-v-d1a7e442] {
  align-items: center;
  display: flex;
  margin-right: 1rem;
}
.clockIcon[data-v-d1a7e442] {
  height: 2.5rem;
  margin-right: 0.5em;
}
.button[data-v-d1a7e442] {
  min-width: var(--navigation-bar-height);
  line-height: var(--navigation-bar-height);
  color: white;
  cursor: pointer;
  padding: 0 0.625em 0 0.625em;
  margin: 0 0.5em;
}
.button--submenu[data-v-d1a7e442] {
  display: block;
}
.button--selected[data-v-d1a7e442] {
  color: black;
  font-weight: bold;
}
.button-level[data-v-d1a7e442] {
  z-index: 1;
  min-width: var(--navigation-bar-height);
  line-height: var(--navigation-bar-height);
  color: white;
  cursor: pointer;
  text-align: left;
}
.level-helpMenu[data-v-d1a7e442] {
  display: block;
  color: #FFFFFF;
  background-color: #181E76;
}
.button-level--submenu[data-v-d1a7e442] {
  display: block;
}
.biggerFont[data-v-d1a7e442] {
  font-size: 1.5rem;
}
@media screen and (max-width: 780px) {
.timer-text[data-v-d1a7e442] {
    font-size: 1.5rem;
}
}
@media screen and (max-width: 680px) {
#diff-label[data-v-d1a7e442] {
    font-size: 1.3rem;
}
}
@media screen and (max-width: 580px) {
#print-icon[data-v-d1a7e442] {
    display: none;
}
}
@media screen and (max-width: 700px) {
#diff-label[data-v-d1a7e442] {
    display: none;
}
}
@media screen and (max-width: 470px) and (min-width: 321px) {
.container[data-v-d1a7e442] {
    width: 80%;
}
.diffButtonGroup[data-v-d1a7e442] {
    margin-right: 0.3rem;
}
.clockButtonGroup[data-v-d1a7e442] {
    margin-right: 0.3rem;
}
.instructions-text[data-v-d1a7e442] {
    padding: 0 1em;
}
.text-wrapper[data-v-d1a7e442] {
    font-size: 1.2em;
}
.helpMenu[data-v-d1a7e442] {
    height: 85vh;
    width: 100%;
}
.options[data-v-d1a7e442] {
    margin: 0;
}
#print-icon[data-v-d1a7e442] {
    height: 2em;
}
.diffIcon[data-v-d1a7e442] {
    margin: 0;
}
#question_icon[data-v-d1a7e442] {
    height: 2.5em;
    margin-left: 0.2rem;
    margin-right: 0.3rem;
}
.label[data-v-d1a7e442],
  .button-level[data-v-d1a7e442] {
    display: none;
}
.clockIcon[data-v-d1a7e442] {
    margin-right: 0;
    margin-top: 0;
    height: 2.5em;
}
.timer-text[data-v-d1a7e442] {
    font-size: 1.8rem;
}
.text-icon[data-v-d1a7e442] {
    height: 1.5em;
}
.button[data-v-d1a7e442] {
    margin: 0 0.7em;
    padding: 0;
    min-width: auto;
    line-height: 50px;
}
.labelIcon[data-v-d1a7e442] {
    margin-top: 0;
}
.helpMenu-category-text[data-v-d1a7e442] {
    padding: 0;
}
#helpMenuCloseButton[data-v-d1a7e442] {
    font-size: 1.2em;
    right: 0;
    position: absolute;
}
#diff-label[data-v-d1a7e442] {
    display: none;
}
.levels[data-v-d1a7e442] {
    padding-bottom: 1em;
}
}
@media only screen and (max-width: 320px) {
.container[data-v-d1a7e442] {
    width: 65%;
}
#diff-label[data-v-d1a7e442] {
    display: none;
}
.helpMenu[data-v-d1a7e442] {
    width: 100%;
}
.options[data-v-d1a7e442] {
    margin: 0;
}
#print-icon[data-v-d1a7e442] {
    margin-right: 0;
    height: 1.5rem;
}
.diffIcon[data-v-d1a7e442] {
    margin-right: 0;
}
#question_icon[data-v-d1a7e442] {
    height: 1.5rem;
}
.label[data-v-d1a7e442],
  .button-level[data-v-d1a7e442] {
    display: none;
}
.clockIcon[data-v-d1a7e442] {
    margin-right: 0.5em;
    margin-top: 0;
}
.timer-text[data-v-d1a7e442] {
    font-size: 1.5em;
}
.button[data-v-d1a7e442] {
    margin: 0 0.7em;
    padding: 0;
    min-width: auto;
    line-height: 30px;
}
.labelIcon[data-v-d1a7e442] {
    margin-top: 0;
    height: 2em;
}
.helpMenu-category-text[data-v-d1a7e442] {
    padding: 0;
}
#helpMenuCloseButton[data-v-d1a7e442] {
    font-size: 1.2em;
    right: 0;
    position: absolute;
}
.levels[data-v-d1a7e442] {
    padding-bottom: 1em;
}
}


.text[data-v-ffb0a304] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}
.icon[data-v-ffb0a304] {
  height: 2em;
  transform: translate(0%, -25%);
}
.calendarDay[data-v-ffb0a304] {
  color: #161a51;
  font-size: 1.2em;
  position: relative;
  text-align: center;
}
.day--puzzleAvailable[data-v-ffb0a304] {
  font-weight: bold;
}
.day--clickable[data-v-ffb0a304] {
  cursor: pointer;
}



.calendarMonthPicker[data-v-1d0a5f10] {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calendarMonthPicker__labelContainer[data-v-1d0a5f10] {
  font-size: 1.5em;
  text-align: center;
}
.calendarMonthPicker__monthLabel[data-v-1d0a5f10] {
  font-weight: bold;
  margin-right: 0.3em;
}
.calendarMonthPicker__arrow[data-v-1d0a5f10] {
  cursor: pointer;
  height: 2em;
}
.calendarMonthPicker__arrow--left[data-v-1d0a5f10] {
  transform: translate(-15%, 0%) scaleX(-1);
}
.calendarMonthPicker__arrow--right[data-v-1d0a5f10] {
  transform: translate(15%, 0%);
}
@media only screen and (max-width: 470px)
{
.calendarMonthPicker__arrow--right[data-v-1d0a5f10] {
      transform: none;
}
}


.header[data-v-289f77a4] {
  width: 100%;
  margin-bottom: 2.5em;
}
.popupCloseButton[data-v-289f77a4] {
  position: absolute;
  font-size: 1.5em;
  right: 0.5em;
  top: 0.5em;
  width: 1.2em;
  height: 1.2em;
  font-weight: bold;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
@media only screen and (max-width: 470px)
{
.header[data-v-289f77a4] {
    margin-bottom: 0;
}
}



.popupRoot[data-v-6be7b2a8] {
  border-radius: 5px;
  box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.75);
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.popupButton[data-v-6be7b2a8] {
  background-color: black;
  color: white;
  border: 0;
  cursor: pointer;
  margin-top: 1em;
  border-radius: 5px;
  font-size: 1.2em;
  padding: 0.5em 1.5em;
  transition: background-color 0.3s;
}
.popupButton[data-v-6be7b2a8]:hover {
  background-color: gray;
}
@media only screen and (max-width: 470px)
{
.popupRoot[data-v-6be7b2a8] {
    border-radius: 0;
    box-shadow: none;
}
}


.calendar[data-v-5317290e] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1.5fr repeat(6, 1fr);
  width: 32em;
  height: 19em;
  margin: 0 auto;
}
.calendar-header-container[data-v-5317290e] {
  color: white;
  padding: 10px;
  background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
  border-radius: 5px 5px 0px 0px;
}
.dayHeader[data-v-5317290e] {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #A7ACEA;
  font-size: 14px;
  font-weight: bold;
}
.calendarContainer__monthPicker[data-v-5317290e] {
  margin-bottom: 1em;
}


.victoryHeader[data-v-055b78ea] {
    font-weight: bold;
    font-size: 2em;
    margin-bottom: 0.5em;
}
.subheader-text[data-v-055b78ea] {
    font-style: normal;
    font-weight: normal;
    font-size: 2em;
    color: #353B90;
    margin: 0;
}
.popup-container[data-v-055b78ea] {
    padding: 2em;
}
.icons-container[data-v-055b78ea] {
    display: flex;
    height: 400px;
    margin-top: 1.5em;
}
.details-icons-container[data-v-055b78ea] {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
}
.difficulty-container[data-v-055b78ea], .time-container[data-v-055b78ea] {
    display: flex;
    align-items: center;
}
.congrats-text-logo[data-v-055b78ea] {
    height: 10em;
}
.icon[data-v-055b78ea] {
    height: 4em;
}
.logo-icon[data-v-055b78ea] {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.rocket-icon-container[data-v-055b78ea], .time-icon-container[data-v-055b78ea] {
    width: 5em;
}
.text-conteiner[data-v-055b78ea] {
    margin: 0;
    color: #353B90;
    text-align: left;
}
.text-conteiner p[data-v-055b78ea] {
    margin: 0;
}
.text-bold[data-v-055b78ea] {
    font-weight: 900;
    font-size: 34px;
}
#upper-case[data-v-055b78ea]::first-letter {
    text-transform: uppercase;
}
.popupButton[data-v-055b78ea] {
    background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
    font-size: 1.5em;
    border-radius: 28px;
    font-weight: 900;
    font-size: 20px;
}
.close-btn-container[data-v-055b78ea] {
    height: calc(var(--navigation-bar-height) * 0.8);
    margin-bottom: calc(var(--navigation-bar-height) * 0.2);
}
.close-btn[data-v-055b78ea] {
    color: #47C3AE;
    font-size: 1.5em;
    font-weight: 900;
    float: right;
    background: none;
    border: none;
}
@media screen
  and (max-width: 470px)
  and (min-width: 321px)
 {
.congrats-text-logo[data-v-055b78ea] {
      height: 5em;
}
.subheader-text[data-v-055b78ea] {
      font-size: 1.5em;
}
.icons-container[data-v-055b78ea] {
      height: 150px;
}
.logo-icon-container[data-v-055b78ea] {
      margin: auto;
      height: 100%;
}
.logo-icon[data-v-055b78ea] {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
}
.icon[data-v-055b78ea] {
      height: 2.5em;
}
.popupButton[data-v-055b78ea] {
      font-size: 1em;
}
.text-bold[data-v-055b78ea] {
      font-size: 1em;
}
}

/* iPhone 4/4S */
@media
    only screen and (min-width: 320px)
    and (max-width: 480px)
    and (-webkit-device-pixel-ratio: 2)
    and (device-aspect-ratio: 2/3)
    and (orientation: portrait)
{
.congrats-text-logo[data-v-055b78ea] {
      height: 5em;
}
.subheader-text[data-v-055b78ea] {
      font-size: 1.5em;
}
.logo-icon-container[data-v-055b78ea] {
      margin: auto;
      height: 100%;
}
.logo-icon[data-v-055b78ea] {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
}
.icons-container[data-v-055b78ea] {
      height: 150px;
}
.icon[data-v-055b78ea] {
      height: 2em;
}
.popupButton[data-v-055b78ea] {
      font-size: 1em;
}
.text-bold[data-v-055b78ea] {
      font-size: 1em;
}
.rocket-icon-container[data-v-055b78ea], .time-icon-container[data-v-055b78ea] {
      width: 3em;
}
}


.pause-popup-container[data-v-0077a386] {
  padding: 2em;
  width: 15em;
  height: 7em;
}
.pauseText[data-v-0077a386] {
  font-size: 1.5rem;
  margin-top: 0.5em;
}
.popupButton[data-v-0077a386] {
  background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
  font-size: 1.5em;
}


.buttonGroup[data-v-4f67b142] {
  display: flex;
  justify-content: space-evenly;
}
.reveal-popup-container[data-v-4f67b142] {
    padding: 2em;
    width: 18em;
    height: 10em;
}
.revealText[data-v-4f67b142] {
    font-size: 1.5rem;
    margin-top: 0.5em;
}
.popupButton[data-v-4f67b142] {
    background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
    font-size: 1.5em;
}


.buttonGroup[data-v-3c61850f] {
  display: flex;
  justify-content: space-evenly;
}
.reveal-popup-container[data-v-3c61850f] {
    padding: 2em;
    width: 18em;
    height: 10em;
}
.revealText[data-v-3c61850f] {
    font-size: 1.5rem;
    margin-top: 0.5em;
}
.popupButton[data-v-3c61850f] {
    background: linear-gradient(180deg, #67D7B7 0%, #00969A 100%);
    font-size: 1.5em;
}


.popup-root[data-v-4f9f8fb5] {
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.overlay[data-v-4f9f8fb5] {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 470px)
{
.content-container[data-v-4f9f8fb5] {
    height: 100%;
}
}


.dateBarRoot[data-v-6da095f6] {
    color: white;
}
.logo-container[data-v-6da095f6] {
    float: left;
    height: auto;
    margin: 0;
}
.titleContainer[data-v-6da095f6] {
    display: flex;
}
.logo[data-v-6da095f6] {
    height: 3rem;
    width: auto;
    margin-right: 1.5rem;
    vertical-align: middle;
}
.date-container[data-v-6da095f6] {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#date-text[data-v-6da095f6] {
    color: white;
    font-size: 1.5rem;
    font-weight: 900;
}
.calendarIcon[data-v-6da095f6] {
    height: 2.5rem;
    margin-right: 0.5em;
}
@media screen
  and (max-width: 780px), (max-height: 780px)
{
.logo[data-v-6da095f6] {
    height: 2rem;
    width: auto;
}
#date-text[data-v-6da095f6] {
    font-size: 1.2rem;
}
}
@media screen
  and (max-width: 680px), (max-height: 680px)
{
#date-text[data-v-6da095f6] {
    font-size: 1.3rem;
}
.logo[data-v-6da095f6] {
    height: 2rem;
    margin-right: 1.5rem;
    width: auto;
}
}
@media screen
  and (max-width: 580px), (max-height: 580px)
{
.logo[data-v-6da095f6] {
    margin-right: 0.5rem;
    height: 2rem;
    width: auto;
}
}
@media only screen
  and (max-height: 320px)
{
#date-text[data-v-6da095f6] {
    font-size: 0.8rem;
}
}
@media screen
  and (max-width: 470px)
  and (min-width: 321px)
{
.logo-container[data-v-6da095f6] {
    height: auto;
}
.logo[data-v-6da095f6] {
    height: 2rem;
    width: auto;
    display: none;
}
.date-container[data-v-6da095f6] {
    display: block;
    padding: 0px;
}
.titleContainer[data-v-6da095f6] {
    /* margin-right: 8px; */
    display: flex;
    align-items: center;
    width: auto;
}
.calendarIcon[data-v-6da095f6] {
    margin: 0;
}
.dateBarRoot[data-v-6da095f6] {
    width: auto;
}
#date-text[data-v-6da095f6] {
    display: none;
}
}
@media screen
  and (max-width: 320px)
{
.logo-container[data-v-6da095f6] {
    height: auto;
    margin: 0;
}
.logo[data-v-6da095f6] {
    height: 1.5rem;
    width: auto;
}
.titleContainer[data-v-6da095f6] {
    display: flex;
    align-items: center;
    width: auto;
}
.calendarIcon[data-v-6da095f6] {
    margin: 0;
}
.dateBarRoot[data-v-6da095f6] {
    width: auto;
}
#date-text[data-v-6da095f6] {
    display: none;
}
}

#container {
  height: 100%;
  font-family: "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: auto;
  padding: 0 10px;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
#topBarContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1em 0 4em 0;
  width: auto;
}
#print {
  display: none;
}
@media print {
#screen {
    display: none;
}
#print {
    display: block;
}
}
@media screen and (max-width: 900px), (max-height: 700px) {
#screen {
    height: 100%;
    overflow: hidden;
}
}
@media screen and (max-height: 470px) {
#topBarContainer {
    margin: 1em 0 2em 0;
}
}
@media screen and (max-width: 470px) and (min-width: 321px) {
#topBarContainer {
    margin: 0.5rem 0rem;
    justify-content: space-around;
}
}
@media screen and (max-width: 320px) {
#topBarContainer {
    margin: 0 0.5rem;
}
}
:root {
  --main-bg-color: brown;
  --navigation-bar-height: 2.5em;
}
html, body {
  height: 100%;
  margin: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: #2F3488;
  overflow: hidden;
  touch-action: none;
}
@media screen and (min-width: 1920px) {
body {
    font-size: min(2vh, 2vw);
}
}
@media screen and (orientation: landscape) and (hover: none) {
html {
    /* Set content width to viewport height */
    width: 100vh;
    /* Set content height to viewport width */
    height: 100vw;
}
}
#app {
  height: 100%;
  font-family: "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}