.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;
}
.head_text {
  color: #dd6900;
  font-size: 2vw;
}
.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;
}

@font-face {
  font-family: amaranth;
  src: url('../fonts/amaranath/amaranth-regular.ttf');
}

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

p {
  margin: 0;
}

.nextBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 7%;
  height: 10%;
}

.prevBtn {
  display: none;
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 7%;
  height: 10%;
}

.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: andika;
}

.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%;
}

div.textblock {
  position: absolute;
  width: 100%;
  top: 14.3%;
  height: 80%;
}

/*-------------- For Loading ---------------*/

#loading-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #222;
  z-index: 999;
}

#loading-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  text-align: center;
  transform: translate(-50%, -50%);
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 3vmin;
}

#loading-content {
  display: block;
  position: absolute;
  left: 40%;
  top: 33.35%;
  width: 20%;
  height: 33.3%;
  transform: translate(-50%, -50%);
  border: 3px solid #f00;
}

#loading-content:after {
  content: '';
  position: absolute;
  border: 3px solid #0f0;
  left: 15%;
  right: 15%;
  top: 15%;
  bottom: 15%;
}

#loading-content:before {
  content: '';
  position: absolute;
  border: 3px solid #00f;
  left: 5%;
  right: 5%;
  top: 5%;
  bottom: 5%;
}

#loading-content {
  border: 3px solid transparent;
  border-top-color: #4d658d;
  border-bottom-color: #4d658d;
  border-radius: 50%;
  -webkit-animation: loader 2s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
}

#loading-content:before {
  border: 3px solid transparent;
  border-top-color: #d4cc6a;
  border-bottom-color: #d4cc6a;
  border-radius: 50%;
  -webkit-animation: loader 3s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
  animation: loader 3s linear infinite;
}

#loading-content:after {
  border: 3px solid transparent;
  border-top-color: #84417c;
  border-bottom-color: #84417c;
  border-radius: 50%;
  -webkit-animation: loader 1.5s linear infinite;
  animation: loader 1.5s linear infinite;
  -moz-animation: loader 2s linear infinite;
  -o-animation: loader 2s linear infinite;
}

@-webkit-keyframes loaders {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.blurin {
  animation: blurin 1s forwards;
}

@keyframes blurin {
  0% {
    opacity: 0;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
  }
}
.fadein {
  animation: fadein 1s ease-in forwards;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.question_img {
  color: #674ea7;
  position: relative;
  top: 18%;
  font-size: 4vmin;
}

.optionsdiv_img {
  top: -28%;
  left: 54%;
  width: 50%;
  text-align: center;
  position: relative;
}

.optionscontainer {
  display: inline;
  position: relative;
  height: 100%;
}

.optionscontainer_img {
  position: relative;
  margin-bottom: 15%;
}

.optionscontainer_img:nth-child(1) {
  margin-bottom: 22% !important;
}

.imagestartpos_img {
  width: 9%;
  margin-left: 35%;
  margin-top: 0%;
  position: absolute;
  left: 38%;
  visibility: hidden;
}

.ispforimage {
  position: absolute;
  width: 21%;
  left: 38%;
  top: 550%;
  visibility: hidden;
}

.buttonsel {
  display: inline;
  background-position: 0% 0%;
  color: white;
  margin: 6%;
  font-size: 3vmin;
  height: 10% !important;
  padding: 8% 4%;
}

.circleback {
  background: url(../images/circle.png);
  background-size: 400% 100%;
}

.rectangleback {
  background: url(../images/rectangle.png);
  background-size: 400% 100%;
}

.triangleback {
  background: url(../images/triangle.png);
  background-size: 400% 100%;
  padding: 12% 6% 2% 6%;
}

.optimg {
  display: inline;
  border-radius: 15px;
  color: white;
  margin: 0% 1%;
  font-size: 4vmin;
  border: 5px solid #adaedb;
  cursor: pointer;
  width: 21%;
}

.forhover {
  cursor: pointer;
}

.forhover:hover {
  background-position: 300% 0% !important;
}

.wrongans {
  background: #ea9999;
  color: #f66e20;
}

.rightans {
  background: #6aa84f;
}

.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; */
}

/*
 *
 * Text Block
 *
 */

.instruction {
  color: #9181c2;
  font-size: 3.3vmin;
}

.hidden {
  display: none !important;
}

/*
 *
 * Droppable Block
 *
 */

div.droppableblock {
  position: absolute;
  bottom: 0;
  left: 0%;
  height: 45%;
  width: 100%;
}

.droppablecontainer {
  flex: 1;
  margin: 0% 1%;
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 2vmin;
  border: 2px solid #ffdcd7;
  background-color: #f3f3f3;
  /*margin: 1%;*/
}

.droppable_magnet,
.droppable_nonmagnet {
  position: absolute;
  width: 42%;
  border-radius: 5px;
  border: 3px solid #000000;
}

.droppable_magnet {
  left: 4%;
  background: linear-gradient(
    0deg,
    rgba(208, 253, 245, 0.55),
    rgba(208, 253, 245, 0.55)
  );
}
.droppable_nonmagnet {
  right: 4%;
  background: linear-gradient(
    0deg,
    rgba(247, 243, 210, 0.53),
    rgba(247, 243, 210, 0.53)
  );
}

.droppable_magnet::after {
  background: #f2e679;
}
.droppable_nonmagnet::after {
  background: #5ae0c8;
}

.droppable_magnet::after,
.droppable_nonmagnet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  border-bottom: 3px solid black;
}

.droppable {
  height: 100%;
  width: 100%;
  border-radius: 2.5vmin;
  border: 2px solid yellow;
}

.droppableheader {
  position: absolute;
  top: 20%;
  height: 80%;
  width: 100%;
}

.droppable > img,
.droppableheader > img {
  max-width: 100%;
  max-height: 100%;
}

.drop_class_1 {
  display: flex;
  flex-flow: row wrap;
}

.drop_class_2 {
  display: flex;
  flex-flow: row wrap;
}

.drop_class_3 {
  background-color: blue;
}

.drop_class_4 {
  background-color: purple;
}

.allimg {
  max-width: 100%;
  max-height: 100%;
}

.header_containter {
  font-size: 2vw;
  position: absolute;
  width: 100%;
  height: 20%;
  left: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
/*
 *
 * Draggable Block
 *
 */

div.draggableblock {
  position: absolute;
  bottom: 0;
  left: 0%;
  height: 30%;
  width: 100%;
  bottom: 45%;
  display: flex;
  flex-wrap: nowrap;
  padding: 1%;
}

.draggable {
  width: 15%;
  position: absolute;
  z-index: 100;
  cursor: grab;
  border-radius: 10px;
  padding: 3%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}

.ui-draggable-helper {
  cursor: grab;
  height: 25%;
}

.draggable > img {
  max-width: 100%;
  max-height: 100%;
  /*padding: 1%;*/
}

.dummy_class {
  border-width: 0px !important;
  cursor: auto !important;
}

/*.class_1 {
    background-color: #ffa;
}

.class_2 {
    background-color: #afa;
}

.class_3 {
    background-color: #aaf;
}

.class_4 {
    background-color: #faf;
}*/

.position_1 {
  left: 5%;
  order: 1;
}
.position_2 {
  left: 28%;
  order: 2;
}
.position_3 {
  left: 52%;
  order: 3;
}
.position_4 {
  left: 75%;
  order: 4;
}

.sliding {
  -webkit-animation: slidein1 1.5s linear 1 forwards;
  animation: slidein1 1.5s linear 1 forwards;
}
.scoreboard {
  border: none !important;
}
@-webkit-keyframes slidein1 {
  from {
    transform: translate(-100%, 0);
  }
}

@keyframes slidein1 {
  from {
    transform: translate(-100%, 0);
  }
}