.scoreboard{
  height: 12%;
  box-shadow: 0.1vmin 0.4vmin 0.1vmin rgba(17, 17, 17, 0.3);
}
.activity_container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 1.3em;
  background: #fff;
  box-shadow: inset 0 0 30px #f2f2f2;
}

.activity_container,
.activity_container * {
  position: relative;
  margin: 0;
  padding: 0;
}

.activity_container .nextBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 7%;
  height: 10%;
  z-index: 10;
}
.activity_container .prevBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 7%;
  height: 10%;
  z-index: 10;
}
.text_para {
  position: absolute;
  top: 2%;
  left: 50%;
  background: #a3e5fc;
  padding: 2% 2%;
  font-family: 'andika';
  transform: translate(-50%);
  border-radius: 3vw;
  font-size: 3.3vh;
  width: 90%;
}
.paragraphwrapper {
  background: #1b9aaa;
  position: absolute;
  padding: 1%;
  font-family: sniglet;
  width: 100%;
  transform: translateX(-50%);
  left: 50%;
  font-size: 2vw !important;
  height: 12%;
  color: #fff;
  display: flex;
  align-items: center;
}
.callreceived {
  position: absolute;
  width: 28%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.exercisebody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: absolute;
  top: 12%;
  width: 100%;
  height: 90%;
  background: #fff4e5;
}
.imgcontainer {
  background-color: #fff;
  margin: 5%;
  height: 90%;
  border-radius: 0.75vw;
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
  position: relative;
}
.imgcontainer > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: 2% 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.exerciseoption_content {
  position: relative;
  height: 90%;
  top: 10%;
}
.exerciseoptions {
  position: absolute;
  top: 0%;
  width: 75%;
  cursor: pointer;
  left: 5%;
  padding: 5% !important;
  /* border: 3px solid #fcd172; */
  background-color: #1b9aaa;
  border-radius: 0.75vw;
  color: white;
  box-shadow: 0.1vmin 0.4vmin 0.1vmin rgba(17, 17, 17, 0.3);
}
.exerciseoption_first {
  top: 0%;
}
.exerciseoption_second {
  top: 30%;
}
.exerciseoption_third {
  top: 60%;
}
.exerciseoptions > img {
  height: 61%;
  width: 15%;
  position: absolute;
  right: -20%;
  top: 10%;
  object-fit: contain;
  display: none;
}

.firstexerciseoption_para,
.secondexerciseoption_para,
.thirdexerciseoption_para {
  align-self: center;
  width: 100%;
  color: #fff;
}

.feedback_success {
  border: 2px solid rgb(50, 193, 38);
  color: rgb(50, 193, 38);
  border-radius: 0.35vw;
  font-family: 'andika';
}
.feedback_failure {
  border-color: transparent rgb(193, 40, 38) transparent transparent;
  border: 2px solid rgb(193, 40, 38);
  color: rgb(193, 40, 38);
  border-radius: 0.35vw;
}
.feedback_success_before {
  border-color: transparent rgb(50, 193, 38) transparent transparent;
}
.feedback_success.d::before {
  border-color: transparent rgb(50, 193, 38) transparent transparent;
}
.feedback_failure_before {
  border-color: transparent rgb(193, 40, 38) transparent transparent;
}
.feedback_failure.d::before {
  border-color: transparent rgb(193, 40, 38) transparent transparent;
}
@font-face {
  font-family: amaranth;
  src: url('../fonts/amaranath/amaranth-regular.ttf');
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

p {
  margin: 0;
}
.contentwithbg {
  width: 100%;
  height: 100%;
  background: url('../images/introduction-slide.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.nextBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 7%;
  height: 10%;
  z-index: 1000 !important;
}

.prevBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 7%;
  height: 10%;
  z-index: 1000 !important;
}

.myNextStyle {
  cursor: pointer;
  background-image: url('../../../../../../images/arrows/arrow.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.myNextStyle:hover {
  background-image: url('../../../../../../images/arrows/arrow_hover.png');
}

.myNextStyle:active {
  background-image: url('../../../../../../images/arrows/arrow_active.png');
}

.myPrevStyle {
  cursor: pointer;
  background-image: url('../../../../../../images/arrows/arrow_prev.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.myPrevStyle:hover {
  background-image: url('../../../../../../images/arrows/arrow_hover_prev.png');
}

.myPrevStyle:active {
  background-image: url('../../../../../../images/arrows/arrow_active_prev.png');
}

.board {
  position: absolute;
  top: 0%;
  left: 0%;
  text-align: center;
  height: 100%;
  width: 100%;
  font-family: amaranth;
}

.vertical-horizontal-center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  text-align: center;
}

.vertical-center {
  position: relative;
  top: 45%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  text-align: center;
}

.coverboardfull {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.generalTemplateblock {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /*border   : 1px solid red; */
}

div.headerblock {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 20%;
  background-color: #e3d0da;
  color: #ce00a7;

  /*border   : 1px solid red;*/
}

div.generalTemplateblock[data-templatecontains='hasheaderblock']
  div.contentblock {
  top: 20%;
  height: 80%;
  position: absolute;
  width: 100%;
}

div.generalTemplateblock[data-templatecontains='hasonlycontent']
  div.contentblock {
  top: 0%;
  height: 100%;
}

/*============ exercise template ===================
==================================================== */

.exefin {
  display: none;
  width: 100%;
  height: 20%;
  position: absolute;
  padding-bottom: 1%;
  top: 20%;
  animation: fade-in 1s linear forwards;
  text-align: center;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.circleimg {
  background-image: url(../images/11.jpg) !important;
}

.backtrue {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  padding: 6% 10% !important;
  margin: 1% !important;
}

div.imageblock {
  position: absolute;
  width: 100%;
  height: 100%;
  /*border     : 1px solid green; */
}

.jump_rhino {
  -webkit-animation: jump_rhino 0.5s cubic-bezier(0, 0.5, 1, 0.5);
  animation: jump_rhino 0.5s cubic-bezier(0.5, 1, 1, 0.75);
}
@keyframes jump_rhino {
  50% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes jump_rhino {
  50% {
    transform: translateY(-150%);
  }
}

.zoom_rhino {
  -webkit-animation: zoom_rhino 1s linear forwards;
  animation: zoom_rhino 1s linear forwards;
  animation-delay: 0.75s;
  transform-origin: bottom right;
}
.zoom_marks_rhino {
  -webkit-animation: zoom_marks_rhino 1s linear forwards;
  animation: zoom_marks_rhino 1s linear forwards;
  animation-delay: 0.75s;
}
@keyframes zoom_marks_rhino {
  100% {
    transform: scale(2);
    right: 35%;
    top: 15%;
  }
}
@-webkit-keyframes zoom_marks_rhino {
  100% {
    transform: scale(2);
    right: 35%;
    top: 15%;
  }
}

@keyframes zoom_rhino {
  100% {
    transform: scale(2.5);
    right: 0%;
    bottom: 30%;
  }
}
@-webkit-keyframes zoom_rhino {
  100% {
    transform: scale(2.5);
    right: 0%;
    bottom: 30%;
  }
}

/*--------- for exercise -------------*/
.main_bg {
  background: linear-gradient(#0066a4, #fbfcff);
}
/*------------------ specific blocks ------------------*/
.textblock {
  position: absolute;
}
.instruction {
  width: 60%;
  text-align: left;
}
.centerimage {
  position: absolute;
  width: 50%;
  left: 25%;
  top: 12%;
}
.blank-space {
  white-space: pre;
  color: #00b785;
  border-bottom: 0.3vmin dashed black;
}
.eximg {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  height: 35%;
}

.optionsblock {
  position: absolute;
  padding: 0% 2%;
  height: 40%;
  bottom: 2%;
  width: 50%;
  left: 25%;
  z-index: 10;
  border-radius: 3vmin;
}
.tb-large {
  width: 50%;
  left: 25%;
}
.tb-large-2 {
  width: 85%;
  left: 7.5%;
}
.tb-large-2 > p {
  left: 2%;
  width: 96%;
}
.options {
  position: absolute;
  cursor: pointer;
  font-size: 2.7vw;
  font-family: sniglet;
  background: rgb(184, 212, 255);
  padding: 1%;
  border-radius: 0.4em;
}

.pos-1 {
  top: 47%;
  left: 10%;
}
.pos-2 {
  left: 30%;
  top: 64%;
}
.pos-3 {
  left: 60%;
  top: 64%;
}
.pos-4 {
  left: 83%;
  top: 47%;
}
.options:hover {
  color: #356698;
}

/*-------------------------
 ------- for fonts --------
 --------------------------*/

.my_font_very_big {
  font-size: 4vw;
}

.my_font_big {
  font-size: 3.3vw;
}
.my_font_medium {
  font-size: 2.2vw;
}
.my_font_small {
  font-size: 1.5vw;
}

.question {
  position: absolute;
  font-family: sniglet;
  background: rgb(184, 212, 255);
  padding: 1%;
  border-radius: 0.5em;
  top: 22%;
  transform: translateX(-50%);
  left: 50%;
  width: 90%;
}
.class2 {
  position: absolute;
  font-size: 2vw;
  top: 83%;
  left: 53%;
}
@media (min-aspect-ratio: 4/3) {
  .my_font_very_big {
    font-size: 5vmin;
  }
  .my_font_big,
  .class1,
  .class2 {
    font-size: 4vmin;
  }
  .my_font_medium,
  .picture_tag {
    font-size: 3.5vmin;
  }
  .my_font_small {
    font-size: 2vmin;
  }
  .options {
    font-size: 3.3vh;
  }
  .instruction {
    font-size: 5.5vmin;
  }
}

.bg1 {
  background: url('../images/bg_02.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bg2 {
  background: url('../images/bg_01.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bg3 {
  background: url('../images/bg-03.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bg4 {
  background: url('../images/bg_04.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bg5 {
  background-color: #f5916f;
}
.bg6 {
  background-color: #fce5cd;
}
.bg7 {
  background-color: #6aa84f;
}
.bg8 {
  background-color: #d0e0e3;
}
.bg9 {
  background-color: #d9d2e9;
}
.bg10 {
  background-color: #ead1dc;
}
.class1 {
  top: 87%;
  left: 9%;
  font-size: 2vw;
}
.class2 {
  top: 87%;
  left: 54%;
  font-size: 2vw;
}
.class1:lang(np) {
  top: 87%;
  left: 26%;
  font-size: 2vw;
}
.picture_tag {
  position: absolute;
  font-family: sniglet;
  font-size: 4vh;
  background: #f3cb7a;
  padding: 1%;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  left: 17%;
  width: 66%;
  top: 68%;
}
.tb1 {
  background-color: #a5695e;
}
.tb2 {
  background-color: #ad736d;
}
.tb3 {
  background-color: #3e7230;
}
.tb4 {
  background-color: #bf9d6c;
}
.tb5 {
  background-color: #ae543b;
}
.tb6 {
  background-color: #dfa37c;
}
.tb7 {
  background-color: #55954b;
}
.tb8 {
  background-color: #86afc4;
}
.tb9 {
  background-color: #897ea5;
}
.tb10 {
  background-color: #996e84;
}
.instruction{
  font-size: 1.75vw;
}