body:lang(np), body:lang(np) * {
	font-family: laila;
  }
.background{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}
.blue_bg{
  background-color: #B6E4EF;
}
.blue_dark_bg{
  background-color : 6CB4BC;
}
.right-box{
  position: absolute;
  right: 0%;
  top: 0%;
  width: 25%;
  height: 100%;
}

.dsLine{
  color: green;
}

.forhover{
  cursor: pointer;
}

.forhover:hover{
  background: #FFAB40;
  color: #000000;
  border: 2px solid #3C78D8;
}

.theopt:hover > p{
  background-color: #3C78D8;
}

.corIncor{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 25%;
  display: none;
}


.gatti {
    position: absolute;
    height: 10%;
    left: 10%;
    top: 13%;
    transform: translate(-50%, -50%);
}

.flexcontainerblock{
	position: absolute;
	width: 30%;
	height: 60%;
	right: 1.5%;
	top: 20%;
	display: flex;
	flex-flow: row nowrap;
	border: 1px solid #BDBFB5;
}

.flexcontainerblock100 {
  position: absolute;
  width: 65%;
  height: 94%;
  right: 30%;
  top: 3%;
  display: flex;
  flex-flow: row nowrap;
  border: 2px solid #0097A7;
  font-size: 2.56vmin;
  background-color: #fff;
}

.column{
	display: flex;
	flex-flow: column nowrap;
	flex: 1;
}

.column1{
	display: flex;
	flex-flow: column nowrap;
	flex: 1;
	background-color: #93C47D;
}

.column2{
	display: flex;
	flex-flow: column nowrap;
	flex: 1;
	background-color: #C27BA0;
}

.rowheader{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.86vmin;
	color: #000000;
	border: 1px solid #555555;
	flex: 1.2;
}


.rowheaderdropable{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.35vmin;
	border-bottom: 1px solid #BDBFB5;
	flex: 1.2;
}

.rownormal {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.55vmin;
  color: #000000;
  border: 1.5px solid #0097A7;
  flex: 1;
}
.rownormaldropable{
	display: flex;
	justify-content: center;
	flex-flow: column nowrap;
	font-size: 3.56vmin;
	color: #000000;
	flex: 4;
}

.rownormalafterdrop{
	font-size: 3vmin;
	color: #000000;
	border: 1px solid #C5C7BF;
}

.rownormal > p{
	padding: 0 0.35em;
	margin: 0;
}

.lowerinfotext{
	color: #000000;
	text-align: center;
	padding: 0.5em;
	width: 100%;
}
.dice {
  position: absolute;
  width: 8%;
  bottom: 5%;
  right: 8%;
  z-index: 1;
}
.dice:hover{
  cursor: pointer !important;
}

.quesboard {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  animation: quescale 1s ease-out forwards;
  z-index: 5;
  display: none;
  background-color: rgba(255,255,255,0.8);
}

.hbquesblock{
  height: 80%;
  border: 3px solid #DE8500;
  background-color: #FFF8E2;
  border-radius: 1.25em;
  width: 80%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background: #ffffff;

}

.hover-active{
    transform: translate(-50%) scale(1.1);
}



.theins {
  position: absolute;
  width: 74%;
  left: 50%;
  text-align: left;
  top: 34%;
  transform: translate(-50%, -50%);
}

.ins-box {
    position: absolute;
    top: 1%;
    right: 1%;
    background: white;
    width: 98%;
    height: 98%;
    padding: 1%;
    z-index: 6;
    border-radius: 1em;
    /*display: none;*/
}


.ins-title {
    font-family: bungee;
    font-size: 5.5vmin;
    color: blue;
}

.okaybtn {
    background: #1BB005;
    width: 19%;
    position: absolute;
    bottom: 5%;
    transform: translateX(-50%);
    left: 50%;
    font-size: 4vmin;
    color: white;
    border-radius: 0.5em;
    padding: 0.5%;
    border: 0.15em solid #095006;
    cursor: pointer;
}

.okaybtn:hover{
  background: #4ECE3B;
  border: 0.15em solid #297726;
}


@keyframes quescale {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
}
  100% {
      transform: translate(-50%, -50%) scale(1);
  }
}

.rolleffect{
  animation:  letsroll 1s ease-in-out alternate;
}

@keyframes letsroll {
  0% {
    transform: scale(2.5);
}
  50% {
      transform: scale(3.3);
  }
  100% {
    transform: scale(2.5);
}
}

[class*="theques"] {
  position: absolute;
  transform: translateX(-50%);
  width: 49%;
  color: #ffffff;
  font-size: 3.5vmin;
  left: 67%;
  top: 2.5%;
  background-color: #FF9E0B;
  padding: .5%;
  border-radius: 10px;
}

[class*="optcontainer"] {
    height: 14%;
    position: absolute;
    transform: translate(-50%);
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    z-index: 99;
}

.optcontainer-1{
  position: absolute;
  width: 55%;
  top: 50%;
  left: 40%;
  height: 65%;
  transform: translateY(-50%);
}

.optcontainer-2 {
	width: 67%;
	top: 35%;
	left: 50%;
}

.optcontainer-3 {
    width: 90%;
    top: 80%;
    left: 50%;
}

.theopt {
  border: 2px solid #FF9E0B;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  width: 40%;
  height: 100%;
  /* overflow: hidden; */
}

.vid-1,
.vid-2{
  width: 100%;
  height: 80%;
  background-color: #D3FDFF;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.qn-txt{
  position: absolute;
  bottom: 0%;
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  color: #ffffff;
  background-color: #FF9E0B;
}


.qnImage{
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  height: 80%;
  border: 2px solid #FFD591;
  border-radius: 15px;
  background-color: #ffffff;
}
/* 
.theques-type1 {
  left: 50%;
  bottom: 85%;
  width: 95%;
  color: #666693;
	font-family: laila !important;
  display: none;
}

.theques-type2 {
  color: black;
  left: 50%;
  top: 11%;
}

.theques-type3 {
  color: black;
  left: 50%;
  top: 63%;
}

.theopt-g2opt1 {
    left: 15%;
    bottom: 3%;
}


.theopt-g3opt1 {
    left: 30%;
    top: 33%;
}

.theopt-g3opt2 {
    left: 50%;
    top: 33%;
}

.theopt-g3opt3 {
    left: 70%;
    top: 33%;
} */

.correctans{
  color: green;
}

.corr{
  border: 2px solid #6AA84F;
}
.corr>p{
  background-color: #6AA84F;
}

.incor{
  border: 2px solid #d2411a;
}
.incor>p{
  background-color: #d2411a;
}

.arrow {
  position: absolute;
  height: 15%;
  top: 64%;
  right: 9.5%;
  z-index: 1;
  animation: arrowmove 0.5s alternate infinite;
}

.closebtn{
  position: absolute;
  width: 4%;
  top: 3%;
  right: 1%;
  display: none;
  cursor: pointer;
  z-index: 3;
  animation: closemove 0.5s alternate infinite;
}

@keyframes closemove {
  100%{
    filter: drop-shadow(0em 0em 0.2em red);
  }
}

@keyframes arrowmove {
  100%{
    transform: translateY(13%);
  }
}


.clickHere{
  position: absolute;
  right: 3%;
  top: 54%;
  padding: 1%;
  border-radius: 8px;
  width: 18%;
  background-color: #FFE599;
  /* color: #FFE599; */
}

.congrat-popup-center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  background-color: #FFF8E2;
  border: 4px solid #FFA925;
  border-radius: 27px;
}

.rabbit-big{
  position: absolute;
  width: 29%;
  bottom: 7%;
  right: 15%;
}

.txt-congrat{
  position: absolute;
  right: 23.5%;
  top: 10%;
  color: #B45F06;
}


/* #region video player css */

.sidevideoDiv{
  position: absolute;
  height: 48%;
  width: 18%;
  top: 3%;
  right: 3%;
  z-index: 1;
}
.popupVideo-container{
  position: absolute;
  height: 81%;
  width: 28%;
  top: 9.5%;
  left: 10%;
  z-index: 1;  
}
.side_video_holder{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: #D3FDFF;
  border-radius: 10px;
  overflow: hidden;
  border: 2px  solid #2D989C;
  background-color: #D3FDFF;
}

.videolabel-btm {
  position: absolute;
  bottom: 0%;
  width: 100%;
  background: #faeca3;
  padding: 5%;
}

#nslVideo {
  position: absolute;
  width: 40%;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}

.video_container {
  position: absolute;
  height: 80%;
  width: 100%;
  bottom: 20%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  overflow: hidden;
}

.replaybtn_container {
  position: absolute;
    bottom: 1%;
    height: 18%;
    width: 98%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #d3fdff;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

#replay_video_btn {
  width: 70%;
  margin: auto;
  pointer-events: none;
  top: -12%; 
}
.vid {
  height: 87.5%;
  width: 100%;
}

/* #endregion */


@media screen and (min-aspect-ratio: 4/3) {
	.fs-4, .theopt, .theques-type1{
		font-size: 4vh;
	}
	.fs-5{
		font-size: 5.5vh;
	}
  .txt-congrat{
    font-size: 7vh;
  }
	.fs-7{
		font-size: 7vh;
	}
}

@media screen and (max-aspect-ratio: 4/3) {
	.fs-4,.theopt, .theques-type1{
		font-size: 2.5vw;
	}
	.fs-5{
		font-size: 3.1vw;
	}
  .txt-congrat{
    font-size: 5vw;
  }
	.fs-7{
		font-size: 4vw;
	}
}