.overlapping_numberfield:lang(np) {
  font-family: 'kalimati' !important;
}
p,
h1 {
  font-family: sniglet;
  color: #595959;
}
input {
  cursor: pointer;
}
.speechbox.speechtextbox.speechtextboxtw {
  width: 52% !important;
}
:lang(np).overlapping_numberfield {
  position: absolute;
  width: 50%;
  height: 90%;
  inset: 0;
  left: -50%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  /* display: none; */
  font-weight: 600;
  font-size: 2vw;
}

:lang(en).overlapping_numberfield {
  display: none;
}

:lang(np).ansdiv .ans {
  color: transparent;
}
/* infobox */
.infobox {
  position: absolute;
  top: 25%;
  right: 7%;
  width: 80%;
  height: 60%;
  background-color: #fffcedff;
  border: 5px solid #7f6000;
  border-radius: 4vw;
  z-index: 102;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
.infobook {
  width: 7%;
  position: absolute;
  left: 34%;
}
@media screen and (min-width: 1440px) {
  .infobook {
    left: 28%;
  }
}
:lang(np).infobook {
  left: 26%;
}
.infotext {
  font-size: 3vw;
}
.cross {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 3%;
  z-index: 102;
  cursor: pointer;
}

/* slide 1 */
.bg_school {
  width: 100%;
  height: 100%;
}
.pasang,
.boy,
.girl {
  height: 50%;
  position: absolute;
  bottom: 2%;
}
.pasang {
  right: 40%;
}
.girl {
  right: 20%;
}
.boy {
  right: 5%;
}

.speechtextbox {
  position: absolute;
  top: 10%;
  left: 29%;
  width: 50%;
  height: 35%;
  font-size: 1.1vw;
}
/* slide 2 */

.pasang2 {
  left: 2%;
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.title {
  background-color: #5a95b5ff;
  color: #fff;
  position: absolute;
  top: 0%;
  right: 0;
  font-size: 1.5vw;
  padding: 2% 10%;
  width: 100%;
}

.booktop {
  position: absolute;
  top: 1.8vw;
  left: 11vw;
  width: 4%;
  z-index: 102;
  display: none;
}
:lang(np).booktop {
  left: 17%;
}
.table {
  position: absolute;
  top: 15%;
  right: 9%;
  width: 65%;
  height: 50%;
  background-color: #fff;
  border: 3px solid #111;
}
@media only screen and (max-width: 580px) {
  .table td {
    padding: 3px !important;
  }
  .book {
    width: 1px;
  }
}
@media only screen and (max-width: 470px) {
  .table td {
    padding: 1px !important;
  }
  .book {
    width: 1px;
  }
}
.table tr td,
th {
  border: 3px solid #111;
  padding: 10%;
  font-family: sniglet;
  color: #111;
  font-size: 1.5vw;
  text-align: left;
}
.table tr td:nth-child(2) {
  width: 80%;
}
.book {
  width: 7%;
  margin-right: 2%;
}
.infoicon {
  width: 5%;
  position: absolute;
  top: 0.5%;
  right: 2%;
  z-index: 102;
  cursor: pointer;
}

/* //slide 3 */

.ansdiv {
  position: absolute;
  bottom: 5%;
  right: 10%;
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
  align-items: center;
  z-index: 103;
}
.ansdiv .ans {
  border: 2px solid #000;
  outline: none;
  padding: 3%;
  text-align: center;
  margin-bottom: 5%;
  width: 50%;
  font-family: sniglet;
  margin: 0;
  color: #111;
}
.check {
  border: 2px solid #1155cc;
  background-color: #3c78d8;
  color: #fff;
  font-family: sniglet;
  padding: 4% 10%;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}
.correct {
  position: absolute;
  bottom: 6.5%;
  right: 5%;
  width: 5%;
  z-index: 200;
  opacity: 0;
}
.wrong {
  position: absolute;
  bottom: 6.5%;
  right: 5%;
  width: 4%;
  z-index: 200;
  opacity: 0;
}

.speechtextbox8 {
  position: absolute;
  top: 10%;
  right: 35%;
  width: 30%;
  height: 30%;
  font-size: 2vw;
  opacity: 0;
}
.textbox8 {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}
.text8 {
  margin-top: 7% !important;
}

:lang(np).text8 {
  margin-top: 2% !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  /* margin: 0; */
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

.speechbox > p {
  position: absolute;
  width: 91%;
  left: 5%;
  top: 40%;
  transform: translateY(-50%);
  padding: 3% 1% 1% 1%;
}
@media (min-aspect-ratio: 4/3) {
  .table {
    top: 25%;
  }
  .table tr td,
  th {
    font-size: 3vh;
  }
  .ans,
  .check,
  :lang(np).overlapping_numberfield {
    font-size: 3vh;
  }
  .text1,
  .speechbox,
  .speechbox > p {
    font-size: 3.5vh;
  }
}
@media (max-aspect-ratio: 4/3) {
  .table tr td,
  th {
    font-size: 1.5vw;
  }
  .ans,
  .check,
  :lang(np).overlapping_numberfield {
    font-size: 2vw;
  }
  .text1,
  .speechbox,
  .speechbox > p {
    font-size: 2vw;
  }
}

@media screen and (max-width: 768px) {
  .table tr th {
    padding: 0.2em !important;
    border-color: #111 !important;
  }
}

@media (min-aspect-ratio: 4/3) {
  .title {
    font-size: 2.7vh;
  }
  .speechbox p {
    font-size: 2.5vh;
  }
}