* {
  font-family: sniglet;
}

input {
  cursor: pointer;
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.centertext {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40%;
  border-radius: 10%/20%;
  background: #fff2cc;
  font-size: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #dac84f;
  /* padding-top: 9%; */
}

.toptext {
  width: 80%;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fffcedff;
  /* height: 10%; */
  border-radius: 1%/8%;
  font-size: 1.8vw;
  font-weight: 700;
  border: 2px solid #0b5394;
  padding: 2% 3%;
}

.kid {
  position: absolute;
  bottom: 5%;
  left: 25%;
  height: 40%;
}

.kid02 {
  left: 38%;
}
.kid03 {
  left: 52%;
}
.kid04 {
  left: 65%;
}
.basket {
  left: 10%;
  position: absolute;
  height: 23.5%;
  bottom: 4%;
  z-index: 20;
}

.sidetable {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 70%;
  width: 44%;
  padding: 0;
  opacity: 0;
  z-index: 20;
}

.sidetable.table-center {
  top: 60%;
  left: 55%;
  color: #111;
  background-color: #ffffff;
}

.data-image img {
  opacity: 1;
  width: 40%;
  height: 9vh;
  object-fit: cover;
  object-position: top;
}

.colm {
  border: 3px solid #0b5394;
  width: 30%;
  height: 20%;
  padding: 3%;
  /* font-size: 1.2vw; */
  font-size: 1.5vw;
}

.sidetable.table-center .colm:nth-child(odd) {
  padding: 0.4em;
  width: 40%;
}

.sidetable.sidetable.table-center .thead {
  padding: 5%;
}

.row .colm:nth-child(even) {
  width: 60%;
}
.sidetable .row:nth-child(1) {
  font-weight: bold;
}

.child {
  position: absolute;
  top: 36%;
  opacity: 0;
  height: 8%;
  left: 43%;
}
.prem {
  top: 46%;
}
.pasang {
  top: 56%;
}
.reshma {
  top: 67%;
}
.dialogtext {
  position: absolute;
  top: 60%;
  padding: 3%;
  left: 5%;
  width: 30%;
  height: 30%;
  border-radius: 10%/20%;
  background-color: #fffcedff;
  border: 2px solid #fff2cc;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  color: black;
  opacity: 0;
}
.equaltext {
  position: absolute;
  top: 30%;
  font-size: 2vw;
  left: 22%;
  opacity: 0;
  z-index: 20;
  color: #fff;
  font-weight: 800;
}

body:lang(np) .equaltext {
  font-size: 1.2vw;
}
.headertext {
  position: absolute;
  top: 0%;
  left: 0;
  background-color: #0b5394ff;
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.basketside {
  position: absolute;
  left: 5%;
  top: 40%;
  width: 15%;
  height: 20%;
  background: #fffcedff;
  display: flex;
  z-index: 102;
  align-items: center;
  justify-content: center;
  border-radius: 2rem;
  border: 2px solid #f1c232;
  user-select: none;
}
.basketimg {
  height: 80%;
  cursor: pointer;
}
.colm2 {
  border: 3px solid #0b5394;
  width: calc((100% / 4));
  font-size: 1.7vw;
  text-align: center;
  font-weight: normal;
  padding: 1% 3%;
}

.colm2:has(img) {
  padding: 0;
}

td > img {
  padding: 0;
}

.colm2 img {
  width: 25%;
  height: auto;
}
.sidetable2 {
  position: absolute !important;
  padding: 2% !important;
  left: 22%;
  top: 15%;
  z-index: 102;
  width: 75%;
  margin: 0 auto;
  font-size: 1.5vw;
  height: 80%;
  user-select: none;
  background-color: #ffffff;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.table {
  background-color: #eee;
  height: 100%;
  margin-bottom: 0;
}
.table-responsive {
  height: 100%;
}
.tableinsideimage {
  height: 100%;
  opacity: 0;
}
.sidetable2 .row:nth-child(9) {
  font-weight: bold;
}
@media only screen and (max-width: 820px) {
  .colm2 {
    height: 4em !important;
  }
  .sidetable *,
  .sidetable2 * {
    border-width: 1px !important;
  }
}
.infobox {
  position: absolute;
  top: 25%;
  right: 7%;
  width: 80%;
  height: 60%;
  background-color: #cfe2f3;
  border: 5px solid #3d85c6;
  border-radius: 4vw;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  /* opacity: 0; */
}
.infotext {
  font-size: 2vw;
  width: 65%;
  text-align: left !important;
}
.infoicon {
  position: absolute;
  top: 2%;
  right: 3%;
  width: 4%;
  z-index: 101;
  cursor: pointer;
}
.cross {
  width: 3%;
  position: absolute;
  top: 8%;
  right: 7%;
  cursor: pointer;
}

.sidetable3 {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 70%;
  width: 44%;
  padding: 0;
  /* display: none; */
}

/* //info box/ */
.info {
  width: 5%;
  position: absolute;
  top: 3.5%;
  left: 2%;
  z-index: 102;
  cursor: pointer;
}
.infobox {
  position: absolute;
  top: 15%;
  right: 7%;
  width: 80%;
  height: 80%;
  background-color: #fffcedff;
  border: 5px solid #7f6000;
  border-radius: 4vw;
  /* opacity: 0; */
  z-index: 103;
}
.infobox div {
  /* top: 10%; */
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.infobox table {
  border: 2px solid #0b5394;
  width: 100%;
  justify-content: center;
  align-items: center;
  font-size: 1.5vw;
  font-weight: 600;
}
:lang(np).infobox table {
  margin-top: 8%;
}
.infobox table th {
  border: 2px solid #0b5394;
  padding: 3% 2%;
  text-align: center;
}
.infobox table tr td {
  border: 2px solid #0b5394;
  padding: 2% 2%;
  text-align: center;
  font-weight: normal;
}
.infobox table tr td:nth-child(2) {
  width: 60%;
}
.cancle {
  width: 4%;
  position: absolute;
  top: 0;
  right: -17%;
  cursor: pointer;
}
:lang(np).cancle {
  top: 1%;
  right: -15%;
}

.checkBtn {
  position: absolute;
  z-index: 102;
  top: 70%;
  left: 6%;
  background-color: #3c78d8;
  border: 2px solid #1155cc;
  color: #fff;
  padding: 1% 2%;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
}

.basketindiv {
  height: 80%;
  position: absolute;
  z-index: -1;
}

.avatar {
  width: 30%;
  height: 10svh;
  object-fit: cover;
  object-position: top;
}

.wrong,
.correct {
  position: absolute;
  z-index: 200;
  width: 5%;
  bottom: 5.5%;
  opacity: 0;
}

.anjan-wrong,
.anjan-correct {
  left: 38%;
}

.radha-wrong,
.radha-correct {
  left: 56%;
}

.muna-wrong,
.muna-correct {
  left: 74%;
}
.nirjala-wrong,
.nirjala-correct {
  left: 92%;
}

/* .correct {
  width: 15%;
  bottom: 40%;
  left: 55%;
} */

@media screen and (max-width: 768px) {
  .colm2 {
    height: 2.5em !important;
    padding: 0;
  }
  .basketside {
    border-radius: 1em;
  }
}

@media screen and (max-width: 1024px) {
  .data-image img,
  .avatar {
    max-height: 6svw;
  }
  .dialogtext {
    font-size: 2svmin;
  }
}

@media screen and (min-aspect-ratio: 4/3) {
  .equaltext {
    font-size: 3.5vh;
  }
  body:lang(np) .equaltext {
    font-size: 2vh;
  }
}