.magnet {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 1.3em;
  background: #fff;
  box-shadow: inset 0 0 30px #f2f2f2;
}

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

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

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

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

/*=====================================
 =            common styles            =
 =====================================*/
.board {
  position: relative;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: andika;
}

.board:lang(np) * {
  font-family: laila !important;
}

.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: 50%;
  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%;
  background: #bbdefb;
}

/*================================================
 =            Notification Pulse Style            =
 ================================================*/
/**
 How to use:
 - To enable notification pulse add 'data-usernotification="notifyuser"'
 attribute to the html element inside board div
 */

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  25% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.1);
    opacity: 0.8;
  }
  75% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0);
    opacity: 0;
  }
  25% {
    -moz-transform: scale(0);
    opacity: 0.6;
  }
  50% {
    -moz-transform: scale(0.1);
    opacity: 0.8;
  }
  75% {
    -moz-transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 0;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.6;
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.8;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}

/*for all element inside board*/
.board *[data-usernotification*='notifyuser'] {
  cursor: pointer;
}

.board *[data-usernotification*='notifyuser']::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2em;
  height: 2em;
  background-color: white;
  border: 2px solid black;
  border-radius: 50%;
  -webkit-animation: pulse 1.2s ease-out infinite;
  -moz-animation: pulse 1.2s ease-out infinite;
  animation: pulse 1.2s ease-out infinite;
}

.parsedString {
  color: gray;
}

/*=====  End of Notification Pulse Style  ======*/

/*=====  End of common styles  ======*/

/*===============================================
 =            general template layout            =
 ===============================================*/

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

/*=====  End of general template layout  ======*/

/*=========================================================
 =            general templated specific styles            =
 =========================================================*/

/*=====  End of general templated specific styles  ======*/

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

.description_title {
  font-size: 10vmin;
}

.description1 {
  font-size: 9.56vmin;
  padding-top: 0.7em;
}

.description_normal {
  font-size: 4vmin;
}

.description_normal2 {
  font-size: 3.56vmin;
  display: none;
}

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

.description_defn {
  font-size: 2.5vmin;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2%;
  width: 90%;
  height: fit-content;
  background: #ffcd54;
  border-radius: 1em;
  border-bottom-left-radius: 2em;
}
.magnetcontainer {
  position: absolute;
  width: 24%;
  top: 15%;
  padding: 0% 4% 4%;
}

.horseshoemanet {
  width: 100%;
}

.imgblk_100 {
  position: absolute;
  width: 98%;
  height: 82%;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: #fff;
}

.nail {
  position: absolute;
  width: 14%;
  left: 3%;
  bottom: 8%;
}

.glass {
  position: absolute;
  width: 15%;
  left: 14%;
  bottom: 15%;
}

.nickel {
  position: absolute;
  width: 11%;
  left: 28%;
  bottom: 5%;
}

.bottle {
  position: absolute;
  width: 14%;
  bottom: 15%;
  left: 44%;
}

.cobalt {
  position: absolute;
  width: 14%;
  bottom: 5%;
  left: 52%;
}

.stick {
  position: absolute;
  width: 10%;
  bottom: 5%;
  left: 58%;
}

.bag {
  position: absolute;
  width: 12%;
  bottom: 12%;
  left: 73%;
}

.spoon {
  position: absolute;
  width: 14%;
  bottom: 10%;
  left: 85%;
  transform: rotate(-50deg);
}

.nail2 {
  position: absolute;
  width: 47%;
  left: 6%;
  bottom: 26%;
  transform: rotate(-50deg);
  display: none;
  /* filter: drop-shadow(5px 5px 5px #5a5a5a); */
}

.nickel2 {
  position: absolute;
  width: 26%;
  left: 12%;
  bottom: 31%;
  display: none;
  /* filter: drop-shadow(5px 5px 5px #5a5a5a); */
}

.cobalt2 {
  position: absolute;
  width: 37%;
  bottom: 18%;
  left: 61%;
  display: none;
  /* filter: drop-shadow(5px 5px 5px #5a5a5a); */
}

.spoon2 {
  position: absolute;
  width: 50%;
  bottom: 21%;
  left: 60%;
  transform: rotate(50deg);
  display: none;
  /* filter: drop-shadow(5px 5px 5px #5a5a5a); */
}

.position1_2_3_4 {
  -webkit-animation: animpos1 1s ease-in forwards,
    animpos2 1s ease-in 1s forwards, animpos3 1s ease-in 3s forwards,
    animpos4 1s ease-in 5s forwards, animposfinal 1s ease-in 10s forwards;
  animation: animpos1 10s ease-in forwards;
}

@-webkit-keyframes animpos1 {
  to {
    left: -2%;
  }
}

@keyframes animpos1 {
  from {
    left: -2%;
  }
  to {
    left: 74%;
  }
}

@-webkit-keyframes animpos2 {
  from {
    left: -2%;
  }
  to {
    left: 27%;
  }
}

@keyframes animpos2 {
  from {
    left: -2%;
  }
  to {
    left: 27%;
  }
}

@-webkit-keyframes animpos3 {
  from {
    left: 27%;
  }
  to {
    left: 40%;
  }
}

@keyframes animpos3 {
  from {
    left: 27%;
  }
  to {
    left: 40%;
  }
}

@-webkit-keyframes animpos4 {
  from {
    left: 40%;
  }
  to {
    left: 74%;
  }
}

@keyframes animpos4 {
  from {
    left: 40%;
  }
  to {
    left: 74%;
  }
}

@-webkit-keyframes animposfinal {
  from {
    left: 74%;
  }
  to {
    left: 42%;
  }
}

@keyframes animposfinal {
  from {
    left: 74%;
  }
  to {
    left: 42%;
  }
}
/**
	magnet container animation left coordinates
	left: -2%, 27%, 40%, 74%
	bottom: 54%, 48%, 47%, 50%
*/

.metalanimate1 {
  -webkit-animation: animmetal1 1s linear 0.4s forwards;
  animation: animmetal1 1s linear 0.4s forwards;
}

@-webkit-keyframes animmetal1 {
  to {
    left: -2%;
    bottom: 54%;
    transform: scale(0.7) rotate(-40deg);
  }
}

@keyframes animmetal1 {
  to {
    left: -2%;
    bottom: 54%;
    transform: scale(0.7) rotate(-40deg);
  }
}

.metalanimate2 {
  -webkit-animation: animmetal2 1s linear 4s forwards;
  animation: animmetal2 1s linear 4s forwards;
}

@-webkit-keyframes animmetal2 {
  to {
    bottom: 48%;
    transform: scale(0.7);
  }
}

@keyframes animmetal2 {
  to {
    bottom: 48%;
    transform: scale(0.7);
  }
}

.metalanimate3 {
  -webkit-animation: animmetal3 1s linear 6s forwards;
  animation: animmetal3 1s linear 6s forwards;
}

@-webkit-keyframes animmetal3 {
  to {
    bottom: 49%;
    transform: scale(0.7) rotate(300deg);
  }
}

@keyframes animmetal3 {
  to {
    bottom: 49%;
    transform: scale(0.7) rotate(300deg);
  }
}

.metalanimate4 {
  -webkit-animation: animmetal4 1s linear 9.5s forwards;
  animation: animmetal4 1s linear 9.5s forwards;
}

@-webkit-keyframes animmetal4 {
  to {
    bottom: 54%;
    transform: scale(0.7);
  }
}

@keyframes animmetal4 {
  to {
    bottom: 54%;
    transform: scale(0.7);
  }
}

.ltb_100_top_100 {
  position: absolute;
  top: 100%;
  left: 0%;
  height: 100%;
  width: 100%;
  display: none;
  background-color: #bbdefb;
}

.animate_top {
  -webkit-animation: totop 1s ease-in 0.5s forwards;
  animation: totop 1s ease-in 0.5s forwards;
}

@-webkit-keyframes totop {
  to {
    top: 0%;
  }
}

@keyframes totop {
  to {
    top: 0%;
  }
}

.fadein1 {
  -webkit-animation: show_p 1s ease-in forwards;
  animation: show_p 1s ease-in forwards;
  opacity: 0;
}

.fadein2 {
  -webkit-animation: show_p 1s ease-in forwards;
  animation: show_p 1s ease-in forwards;
  opacity: 0;
}

.fadein3 {
  -webkit-animation: show_p 1s ease-in forwards;
  animation: show_p 1s ease-in forwards;
  opacity: 0;
}

@-webkit-keyframes show_p {
  to {
    opacity: 1;
  }
}

@keyframes show_p {
  to {
    opacity: 1;
  }
}

.bluebg {
  width: 70%;
  left: 15%;
  padding: 0.8em;
  background-color: #184ba0;
}
.flex-div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  height: 100%;
  padding: 2%;
}
.messageblock {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 10px;
  background-color: #ef8d8d;
  height: 100%;
  overflow: hidden;
}
.text_s {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 3%;
}
.messageblock:last-child {
  background-color: transparent;
}
.image_s {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #dbb7b7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-basis: 30%;
  bottom: -100%;
}
.messageblock:last-child .image_s {
  background: #ddf9f0;
}
.image_s .lw-img {
  flex-basis: 25%;
  width: 14%;
  padding: 3%;
}

.add_utb {
  background-color: #edece8;
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  padding: 1.5%;
  color: #dd6900;
  border-radius: 10px;
}

.clickfocus {
  /* -webkit-animation: click_focii 1s linear infinite alternate; */
  /* animation: click_focii 1s linear infinite alternate; */
}

@keyframes click_focii {
  from {
    filter: drop-shadow(0px 0px 6px #21adff);
  }
  to {
    filter: drop-shadow(0px 0px 0px #21adff);
  }
}

@-webkit-keyframes click_focii {
  from {
    filter: drop-shadow(0px 0px 6px #21adff);
  }
  to {
    filter: drop-shadow(0px 0px 0px #21adff);
  }
}

.mgone {
  position: absolute;
  transform: translateX(-50%);
  left: 25%;
  width: 30%;
  top: 49%;
  display: none;
}

.mgtwo {
  display: none;
  position: absolute;
  transform: translateX(-50%);
  left: 75%;
  width: 20%;
  top: 32%;
}
.coverpage {
  width: 100%;
  height: 100%;
}
.coverpage > img {
  width: 100%;
  height: 100%;
}

.chaptertext {
  height: 100%;
  width: 100%;
  z-index: 10;
}
.textdiv {
  width: 100%;
  height: 100%;
}
.chaptertext p {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 7vw;
}

/* section 2 merged css */

/*---------------------------
 * 		drag and drop 
 * -------------------------*/
.draggableblock {
  position: absolute;
  top: 15%;
  width: 100%;
  height: 35%;
  z-index: 10;
}

.draggable {
	width: 20%;
  position: absolute;
  z-index: 100;
  cursor: grab;
  background-color: white;
  border-radius: 10px;
  padding: 3%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.draggable > img {
  width: 4em;
  height: 4em;
  margin: auto;
  object-fit: contain;
}

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

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

@keyframes slidein1 {
  from {
    transform: translate(-100%, 0);
  }
}
.droppableblock {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 100%;
}

.droppable_magnet,
.droppable_nonmagnet {
  position: absolute;
  top: 53%;
  width: 45%;
  height: 45%;
  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_magnet.removeBgs::after,
.droppable_nonmagnet.removeBgs::after {
  content: '';
  background: transparent;
  border: 0;
}
.droppablediv > label {
  position: absolute;
  width: 100%;
  height: 20%;
  left: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.d_magnet,
.d_nonmagnet {
  position: absolute;
  top: 20%;
  width: 100%;
  height: 80%;
}

.d_magnet > div img,
.d_nonmagnet > div img {
  width: 100%;
  height: 100%;
}
.basket {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}
.hovered {
  transform: scale(1.1);
  /* filter: drop-shadow(0px 0px 3px gray); */
}
.drop-center .droppable_magnet.removeBgs,
.drop-center .droppable_nonmagnet.removeBgs {
  top: auto;
  bottom: 8%;
  width: 90%;
  transition: all 2s ease-in;
}
.droppable_magnet.removeBgs .d_magnet,
.droppable_nonmagnet.removeBgs .d_nonmagnet {
  height: 100%;
  margin: 0;
}

/*------------- drag and drop end ------------*/
.center_text_div {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}
.center_text {
  display: none;
  font-size: 3.5vmin;
  text-align: center;
  background-color: #ffcd54;
  padding: 3% 5%;
  border-radius: 1em;
  border-bottom-left-radius: 2.5em;
}

.introduction_1 {
  position: absolute;
  top: 5%;
  font-size: 3vmin;
  text-align: center;
  width: 85%;
  height: 15%;
  z-index: 10;
}

.introduction_1 p {
  background: #ffcd54;
  position: absolute;
  width: 90%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  padding: 3% 5%;
  display: inline;
  align-items: center;
  justify-content: center;
  border-radius: 1em;
  border-bottom-left-radius: 2em;
  font-size: 2.5vmin;
}

.magnet-top {
  position: absolute;
  top: 5%;
  right: 5%;
  height: 15%;
  width: 15%;
}
.magnet_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.belt {
  position: absolute;
  bottom: 5%;
  left: 1%;
  border-radius: 3vmin;
  height: 6%;
  width: 98%;
  background: linear-gradient(180deg, #7e7e7e 0%, #040404 100%),
    linear-gradient(0deg, #878787, #878787);
  border: 4px solid #878787;
  box-shadow: 0px 4px 4px 8px #00000040 inset;
}

.back_face {
  display: none;
  z-index: 0 !important;
}
.drop-center .droppable_magnet,
.drop-center .droppable_nonmagnet {
  top: 35%;
}

.draggable.movedtomagnet > img {
  width: 80%;
  height: 80%;
}
.feedback {
  background: #f0d2d2;
  position: absolute;
  width: 60%;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 63%;
  padding: 2%;
  display: inline;
  align-items: center;
  justify-content: center;
  border-radius: 1em;
  border-bottom-left-radius: 2em;
  font-size: 2.5vmin;
  border: 1px solid #000000;
  display: none;
}

/*-------------- tables -------------*/
.tableblock {
  height: 100%;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  padding: 2% !important;
}
.table {
  position: absolute;
  height: 95%;
  width: 45%;
  border-radius: 1em;
  background: #fff;
}
.table > label {
  position: absolute;
  top: 5%;
  left: 50%;
  padding: 3% 0;
  transform: translateX(-50%);
  font-size: 4vmin;
  background: #c6e3ed;
  width: 96%;
  border-radius: 5px;
  vertical-align: middle;
}
.table > img {
  position: absolute;
  height: 20%;
  width: 20%;
  object-fit: contain;
}
.table_1 {
  top: 2.5%;
  left: 2.5%;
}
.table_2 {
  top: 2.5%;
  left: 52.5%;
}

.t_img_1,
.t_img_7 {
  top: 25%;
  left: 14.5%;
}
.t_img_2,
.t_img_8 {
  top: 25%;
  left: 58.5%;
}
.t_img_3,
.t_img_9 {
  top: 50%;
  left: 14.5%;
}
.t_img_4,
.t_img_10 {
  top: 50%;
  left: 58.5%;
}
.t_img_5,
.t_img_11 {
  top: 75%;
  left: 14.5%;
}
.t_img_6,
.t_img_12 {
  top: 75%;
  left: 58.5%;
}