/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

/**
 * ===========================
 * General Styling
 * ===========================
**/

/* -------------------------------------------------------------------------- */
/*                               Desktop Styling                              */
/* -------------------------------------------------------------------------- */

/*
 *
 * ===========================
 * Animation
 * ===========================
 */

.speech-bubble {
  position: relative;
  background: #21757d;
  border-radius: 0.4em;
}

.container-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.container-logo img:first-child {
  margin-right: 1rem;
}

.container-logo img {
    width: 9rem;
}

.container-logo img:last-child {
    width: 14rem;
}

.btn-certificate {
  position: absolute;
  top: 1rem;
  right: 5rem;
  background-color: #ABDBEF !important;
  padding: 1rem !important;
  box-shadow: 0 0.2em #56B8E0, 0 0.4em #fff, 0 .6em #ccc;
  color: #01638B !important;
  transition: none !important;
}

.btn-certificate:active {
  box-shadow: 0 0.2em #fff, 0 0.4em #ccc;
  top: 1.2em;
  transition: none !important;

}

.speech-bubble:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border: 22px solid transparent;
  border-right-color: #21757d;
  border-left: 0;
  border-bottom: 0;
  margin-top: -11px;
  margin-left: -22px;
}

.img-right {
  position: absolute;
  right: 0;
  left: auto;
  width: 50%;
}

.slide-in {
  animation-name: ken-burns;
  /* Name of the animation to use */
  animation-duration: 2s;
  /* 1 if it should only move once */
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  -moz-transition: ease 1s all;
  -o-transition: ease 1s all;
  -webkit-transition: ease 1s all;
  transition: ease 1s all;
}

@keyframes ken-burns {
  0% {
    transform: translateX(-500px);
  }

  100% {
    transform: translateX(0px);
  }
}

.slide-in-reverse {
  animation-name: slide-in-reverse;
  /* Name of the animation to use */
  animation-duration: 2s;
  /* 1 if it should only move once */
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  -moz-transition: ease 1s all;
  -o-transition: ease 1s all;
  -webkit-transition: ease 1s all;
  transition: ease 1s all;
}

@keyframes slide-in-reverse {
  0% {
    transform: translateX(500px);
    -webkit-transform: translateX(500px);
    -moz-transform: translateX(500px);
    -ms-transform: translateX(500px);
    -o-transform: translateX(500px);
  }

  100% {
    transform: translateX(0px);
  }
}

.slide-out-reverse {
  animation-name: slide-out-reverse;
  /* Name of the animation to use */
  animation-duration: 2s;
  /* 1 if it should only move once */
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  -moz-transition: ease 1s all;
  -o-transition: ease 1s all;
  -webkit-transition: ease 1s all;
  transition: ease 1s all;
}

@keyframes slide-out-reverse {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
  }

  100% {
    transform: translateX(500px);
    -webkit-transform: translateX(500px);
    -moz-transform: translateX(500px);
    -ms-transform: translateX(500px);
    -o-transform: translateX(500px);
  }
}

.slide-out {
  animation-name: slide-rtls;
  /* Name of the animation to use */
  animation-duration: 2s;
  /* 1 if it should only move once */
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  -moz-transition: ease 1s all;
  -o-transition: ease 1s all;
  -webkit-transition: ease 1s all;
  transition: ease 1s all;
}

@keyframes slide-rtls {
  0% {
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
  }

  100% {
    transform: translateX(-500px);
    -webkit-transform: translateX(-500px);
    -moz-transform: translateX(-500px);
    -ms-transform: translateX(-500px);
    -o-transform: translateX(-500px);
  }
}

.slide-up {
  animation-name: slide-ups;
  /* Name of the animation to use */
  animation-duration: 2s;
  /* 1 if it should only move once */
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  -moz-transition: ease 1s all;
  -o-transition: ease 1s all;
  -webkit-transition: ease 1s all;
  transition: ease 1s all;
}

@keyframes slide-ups {
  0% {
    transform: translateY(500px);
    -webkit-transform: translateY(500px);
    -moz-transform: translateY(500px);
    -ms-transform: translateY(500px);
    -o-transform: translateY(500px);
  }

  100% {
    transform: translateY(0px);
    -webkit-transform: translateY(00px);
    -moz-transform: translateY(00px);
    -ms-transform: translateY(00px);
    -o-transform: translateY(00px);
  }
}

.slide-down {
  animation-name: slide-downs;
  /* Name of the animation to use */
  animation-duration: 2s;
  /* 1 if it should only move once */
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  -moz-transition: ease 1s all;
  -o-transition: ease 1s all;
  -webkit-transition: ease 1s all;
  transition: ease 1s all;
}

@keyframes slide-downs {
  0% {
    transform: translateY(0px);
    -webkit-transform: translateY(00px);
    -moz-transform: translateY(00px);
    -ms-transform: translateY(00px);
    -o-transform: translateY(00px);
  }

  100% {
    transform: translateY(500px);
    -webkit-transform: translateY(500px);
    -moz-transform: translateY(500px);
    -ms-transform: translateY(500px);
    -o-transform: translateY(500px);
  }
}

.breath {
  animation-name: breathe;
  /* Name of the animation to use */
  animation-duration: 2s;
  /* 1 if it should only move once */
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  -moz-transition: ease 1s all;
  -o-transition: ease 1s all;
  -webkit-transition: ease 1s all;
  transition: ease 1s all;
}

@keyframes breathe {
  0% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
  }

  50% {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
  }

  100% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
  }
}

/* General Style */
body {}

/* Button General */
button {
  background-color: #0294d0;
  margin: 5px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

button:hover {
  background-color: #004d6e;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

/* Button Main Menu */
main-screen button[data-action] {
  border-radius: 40px;
  background-color: #0294d0;
  box-shadow: 0 .2em #01638B, 0 .4em #fff, 0 .6em #ccc;
  margin: 10px;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

main-screen button:hover[data-action] {
  background-color: #004d6e;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

main-screen button:active[data-action] {
  box-shadow: 0 .2em #fff, 0 .4em #ccc;
  position: relative;
  top: .2em;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

/* Button Load */
main-screen button[data-open="load"] {
  background-color: #F2BB22;
  box-shadow: 0 .2em #A17D17, 0 .4em #fff, 0 .6em #ccc;
}

main-screen button:hover[data-open="load"] {
  background-color: #b58c1c;
}

/* Pop Up Modal Captcha */
form.modal__content {
  box-shadow: 0 .2em #ccc;
  border-radius: 20px;
}

text-input input {
  background-color: #CCEAF6;
  border-radius: 10px;
  min-width: 80%;
}

::placeholder {
  color: #81CAE8;
}

:-ms-input-placeholder {
  color: #81CAE8;
}

::-ms-input-placeholder {
  color: #81CAE8;
}

/* General Styling for Menu Screens */
[data-screen] {}

/**
 * ===========================
 * Main Menu Styling
 * ===========================
**/

/* Main Menu Styling */
[data-screen="main"] {
  justify-content: center;
  align-items: center;
}

/* Main Menu Buttons Styling */
[data-screen="main"] button {}

/**
 * ===========================
 * Save and Load Menus Styling
 * ===========================
**/

/* Slots Style */
[data-component="save-slot"] figure {}

[data-component="choice-container"] {
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: flex-end;
  overflow: hidden;
  z-index: 10;
}

/* Slot's Image Style */
[data-component="save-slot"] img {}

/* Slots Title Style */
[data-component="save-slot"] figcaption {}

/* Slots Delete Button Style */
[data-component="save-slot"] button {}

/**
 * ===========================
 * Game Elements Styling
 * ===========================
**/

/* Choice Buttons style */
[data-component="choice-container"] button {
  margin: 0;
  background-color: #2CA6D8;
  color: #fff;
  border: none;
  font-weight: bold;
  padding: .4rem 1.1rem;
}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {
  background-color: #008fcc;
}

/* Text Box styling */
[data-component="text-box"] {
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.568);
  color: #000;
}

/* Character Name Style */
[data-ui="who"] {
  /* display: none; */
  position: absolute;
  top: -1.6rem;
  background-color: #0294D0;
  box-shadow: 0 .2em #027bad;
  font-weight: bold;
  width: auto;
  text-align: center;
  border-radius: 20px;
  margin-left: 5px;
  margin-bottom: 5px;
  padding: 0.3rem 0.6rem;
}

/* ---------------------------------- Quary Game NEW ---------------------------------- */
#quarry-game {
  background: url(./new-assets/game2/bg-drill-game.png);
  height: 100%;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}

.position-drill {
  position: absolute;
  top: 7.1rem;
}

@media (min-height: 721px) {
  .position-drill {
    position: absolute;
    top: 9rem;
  }
}

#position-1-game {
  left: 1rem;
}

#position-2-game {
  right: 0;
}

.container-waktu {
  position: absolute;
  text-align: center;
  left: 3rem;
  user-select: none;
}

.container-waktu p {
  margin: .2em 0;
}

.container-waktu p:first-child {
  color: #F2BB22;
  text-shadow: 0px 1px 0px #FFFFFF;
  font-weight: 500;
  font-size: large;
  line-height: 30px;
}

.container-waktu p:last-child {
  color: #A17D17;
  font-weight: 500;
  font-size: large;
  background: #FBE8B5;
  border-radius: 20px;
  padding: .5rem 1rem;
}

.drill-btn {
  color: #fff;
  font-weight: 600;
  position: absolute;
  top: 29rem;
  right: 6rem;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: #00CC2D;
  border: none;
  cursor: pointer;
  box-shadow: 0 .2em #00881e, 0 .4em #fff, 0 .6em #ccc;
  transition: none;
}

.drill-btn:hover {
  background-color: #00CC2D;
  transition: none;
}

.drill-btn:active {
  right: 6rem;
  box-shadow: 0 .2em #fff, 0 .4em #ccc;
  transition: none;
  top: 29.2rem;
}

.blasting-btn {
  right: 12rem;
  color: #fff;
  font-weight: 600;
  position: absolute;
  top: 29rem;
  right: 12rem;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: #ccc;
  border: none;
  cursor: not-allowed;
  box-shadow: 0 .2em #aaa, 0 .4em #fff, 0 .6em #ccc;
}

.blasting-btn:hover {
  background-color: #ccc;
}

.blast-red:active {
  right: 12rem;
  box-shadow: 0 .2em #fff, 0 .4em #ccc;
  top: 29.2rem;
}

.container-btn-game2 {
  position: relative;
}

.blast-red {
  background-color: #CC0000;
  box-shadow: 0 .2em #880000, 0 .4em #fff, 0 .6em #ccc;
  cursor: pointer;
}

.blast-red:hover {
  background-color: #CC0000;
}

.container-btn-game2 button {
  font-size: 1.2rem;
  width: 77px;
  height: 77px;
}

/* ---------------------------------- End Quarry Game --------------------------------- */

/* Button Lanjut */
.lanjut-new {
  background-color: #0294D0 !important;
  border-radius: 50%;
  width: 35px !important;
  height: 35px !important;
  position: absolute;
  bottom: 2.4rem;
  right: 3rem;
  border: none !important;
  padding: 7px !important;
}

.lanjut-new-input {
  bottom: 0;
  right: .5rem;
}

.lanjut-new:before {
  content: url("./new-assets/image/arrow.png");
}

/* End Button Lanjut */

/* Checkbox new */
.container-checkbox {
  position: absolute;
  bottom: 5rem;
  display: flex;
  height: 16%;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
}

.item-checkbox {
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  position: relative;
  margin: 0.5rem;
  cursor: pointer;
  text-align: left;
  width: 30%;
  background-color: #2CA6D8;
  padding: 0.5rem 2.3rem;
  border-radius: 12px;
  color: #fff;
  font-size: 1.2rem;
}

.item-checkbox input[type="checkbox"] {
  opacity: 0;
}

.item-checkbox:hover input~.checkbox-custom {
  background-color: #aaa;
}

.checkbox-custom:after {
  content: "";
  position: absolute;
  display: none;
}

.item-checkbox input:checked~.checkbox-custom:after {
  display: block;
}

.item-checkbox .checkbox-custom:after {
  left: 31%;
  top: 10%;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox-custom {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 1rem;
  top: 0.7rem;
  box-shadow: 0 .1em #01638B;
  background-color: #eee;
  border-radius: 2px;
}

#btn {
  width: 100%;
  box-shadow: 0 .1em #01638B, 0 .2em #fff, 0 .3em #ccc;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

#btn:hover {
  background-color: #008fcc;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

#btn:active {
  box-shadow: 0 .1em #fff, 0 .2em #ccc;
  position: relative;
  top: .2em;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

/* END Checkbox New */

/* New Frames Images */
.frame-new-images {
  width: 26% !important;
  background: #ABDBEF;
  position: absolute;
  margin: 0 !important;
  top: 8rem !important;
  right: 6rem !important;
  left: auto !important;
  padding: 1.1rem;
  border-radius: 20px;
  box-shadow: 0 0.2em #0294d0;
}

/* End New Frames Images */

/* Position Framing Images */
.position-question-1 {
  width: 27% !important;
  right: 5rem !important;
  top: -21rem !important;
}

.position-job {
  width: 27% !important;
  right: 2rem !important;
  top: -15.1rem !important;
}

/* ENd Position Framing Images */

#volume {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999999;
}

.no-btn {
  pointer-events: none;
  padding: 0;
  border: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
}

.selection {
  position: absolute;
  z-index: 100;
  width: 20%;
}

.boom-blast {
  position: absolute;
  width: 50px;
  left: 3.5rem;
  bottom: 0;
}

.dynamite-1 {
  left: 0;
  width: 10rem;
}

.white {
  background-color: #fff;
}

.circle1 {
  transition: 0.5s all linear;
  display: flex;
  position: relative;
  width: 182px;
  height: 182px;
  background-color: black;
  border-radius: 50%;
  text-align: center;
  margin-right: 90px;
  justify-content: center;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

p.text {
  margin: 0;
  font-size: 30px;
  color: white;
  vertical-align: middle;
  height: 100%;
  display: flex;
  align-items: center;
}

div.arrow {
  width: 6vmin;
  height: 6vmin;
  box-sizing: border-box;
  position: absolute;
  right: -60px;
  top: 38%;
  transform: rotate(45deg);
}

div.arrow::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 10px 10px 0 0;
  border-style: solid;
  top: 50%;
  right: 20px;
  border-color: #ff0000;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;
}

div.arrow:after {
  content: "";
  float: left;
  position: relative;
  top: 50%;
  right: 20px;
  width: 100%;
  height: 100%;
  border-width: 0 0 0 0;
  border-style: solid;
  border-color: #ff0000;
  transform-origin: 100% 0;
  transition: 0.2s ease;
}

div.arrow:hover::after {
  transform: rotate(45deg);
  border-color: orange;
  height: 120%;
}

div.arrow:hover::before {
  border-color: orange;
  transform: scale(0.8);
}

.inital {
  height: 0;
}

.cont-input {
  z-index: 1000;
  color: white;
  height: 20px;
  position: absolute;
  top: 53%;
  left: 24%;
}

/* Checkbox */
.cont-inputbox {
  z-index: 100;
  display: block;
  position: relative;
  padding-left: 35px;
  margin: 30px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.cont-inputbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.check-right {
  text-align: center;
  position: absolute;
  top: 0;
  right: -7px;
  height: 45px;
  width: 230px;
  background-color: #eee;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border: 1px solid black;
  box-shadow: 2px 2px 2px gray;
  color: #000;
  font-size: larger;
}

/* On mouse-over, add a grey background color */
.cont-inputbox:hover input~.check-right {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cont-inputbox input:checked~.check-right {
  background-color: #2196f3;
}

/* Create the check/indicator (hidden when not checked) */
.check-right:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the check when checked */
.cont-inputbox input:checked~.check-right:after {
  display: block;
}

#restart {
  position: absolute;
  width: 28px;
  text-align: center;
  height: 28px;
  right: 25%;
  border-radius: 5px;
  /* background-color: grey; */
  /* display: flex; */
  padding: 0;
  justify-content: center;
  color: white;
  display: flex;
  font-weight: bolder;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
}

#restart:hover {
  /* background-color: rgb(87, 87, 87); */
}

#audio-setting {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  z-index: 99;
}

/* Create a custom checkbox */
.check {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 45px;
  width: 241px;
  background-color: #eee;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border: 1px solid black;
  box-shadow: 5px 5px 6px gray;
  color: #000;
  font-size: larger;
}

/* On mouse-over, add a grey background color */
.cont-inputbox:hover input~.check {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cont-inputbox input:checked~.check {
  background-color: #2196f3;
}

/* Create the check/indicator (hidden when not checked) */
.check:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the check when checked */
.cont-inputbox input:checked~.check:after {
  display: block;
}

.w-42 {
  width: 38% !important;
  height: 69% !important;
}

.w-17 {
  width: 17% !important;
}

.w-h {
  width: 35% !important;
  height: 75%;
}

.w {
  width: 29% !important;
  height: 96% !important;
}

.w-30 {
  width: 30% !important;
}

.w-36 {
  width: 36% !important;
}

.w-37 {
  width: 37% !important;
}

.con-truck {
  margin-top: 40px;
  margin-bottom: 50px;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-right: 100px;
}

.con-truck-1 {
  margin-top: 40px;
  margin-bottom: 50px;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.img {
  width: 135px;
}

.img-1 {
  width: 225px;
}

.drill {
  width: 23px;
  z-index: 1;
  margin: 0px;
  /* animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: normal; */
}

.drill-1 {
  width: 23px;
  z-index: 1;
  margin: 0px;
  /* animation-name: example;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: normal; */
}

@keyframes example {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

.con-btn {
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.con-drill {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 60px;
}

.con-drill-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 60px;
}

hr:not([size]) {
  height: 8px;
  opacity: 1;
  width: 120px;
  border: none;
}

#target-1 {
  position: absolute;
  left: 75%;
  /* bottom: 37%; */
}

#target-2 {
  position: absolute;
  right: 10%;
}

.container-drill {
  height: 100vh;
  /* width: 100vw; */
  background-image: url("./new-assets/game2/bg-drill-game.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: bottom;
}

.bg-danger {
  background-color: red;
}

.bg-success {
  background-color: green;
}

.blast-1 {
  transition: all 0.3s;
  position: absolute;
  top: -80px;
  width: 100px;
}

.blast-2 {
  transition: all 0.3s;
  position: absolute;
  top: -80px;
  width: 100px;
}

.m-0 {
  margin: 0 !important;
}

.appear {
  right: 0;
  opacity: 1 !important;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.game-pad {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 0;
  left: 20px;
  width: 10%;
  justify-content: space-evenly;
  height: 40%;
}

.gamepad-rl {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.gamepad {
  margin: 5px;
}

.btn-gamepad {
    text-align: center;
    background-color: #0294d0;
    width: 70px;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 10px;
    font-size: 13px;
}

.img-col {
  width: 100%;
  height: 50%;
  object-fit: contain;
  position: static;
}

.col-img {
  border: solid 2px black;
  margin: 0 2px;
  width: 20vw;
  display: flex;
  height: 100%;
  flex: 0 0 19%;
  max-width: 25%;
  /* flex-wrap: wrap; */
  flex-direction: column;
  align-items: center;
  padding: 6px;
  justify-content: space-evenly;
}

.text-img {
  text-align: center;
  /* font-size: 2vw; */
}

.selection-right {
  position: absolute;
  z-index: 100;
  width: 16%;
}

.selection {
  position: absolute;
  z-index: 100;
}

.image-flip {
  width: 100%;
  position: static;
  height: 100%;
  max-height: 100% !important;
}

.flip-card {
  width: 100% !important;
  height: 100% !important;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card-1 {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card-2 {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card-3 {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card-4 {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card-5 {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card-6 {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner-1 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-1:hover .flip-card-inner-1 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-1,
.flip-card-back-1 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front-1 {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back-1 {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* ================================================ */

.flip-card-inner-2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-2:hover .flip-card-inner-2 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-2,
.flip-card-back-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front-2 {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back-2 {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* ================================ */

.flip-card-inner-3 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-3:hover .flip-card-inner-3 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-3,
.flip-card-back-3 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front-3 {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back-3 {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* ============================================= */

.flip-card-inner-4 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-4:hover .flip-card-inner-4 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-4,
.flip-card-back-4 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front-4 {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back-4 {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* ==================================== */

.flip-card-inner-5 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-5:hover .flip-card-inner-5 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-5,
.flip-card-back-5 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front-5 {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back-5 {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* =========================== */

.flip-card-inner-6 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card-6:hover .flip-card-inner-6 {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front-6,
.flip-card-back-6 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front-6 {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back-6 {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

/* ========================================================================================================================= */

.inputs {
  color: black;
  width: 60%;
}

.text-box [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box {
  box-shadow: 0 .1em #81CAE8;
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: auto;
  bottom: 9%;
  left: 3%;
  border: 5px solid #cceaf6;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: #fff;
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  width: 95%;
  z-index: 10;
  text-align: left;
  color: #000;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.right-medium [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.right-medium {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 15%;
  left: 51%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 31%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-left-large [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-left-large {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 3%;
  left: 1%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 57%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-left-small [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-left-small {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 61%;
  left: 0%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: 22%;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 29%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-left-small [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-left-small {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 53%;
  left: 0%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /* max-height: 25%; */
  /* overflow: hidden; */
  width: 29%;
  z-index: 10;
  text-align: left;
  /* height: auto; */
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-right-wide [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-right-wide {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 4%;
  right: 5px;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /* overflow: hidden; */
  width: 69%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-right-small [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-right-small {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 33%;
  left: 66%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: 24%;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 32%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.boxes {
  background-color: white;
  position: absolute;
  left: 9px;
  top: 0;
  text-align: left;
  width: 50%;
  border-bottom: solid 2px black;
  border-left: solid 2px black;
  padding: 7px;
}

.text-box-right-medium [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-right-medium {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 15%;
  left: 53%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 33%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.w-42 {
  width: 38% !important;
}

.w-100 {
  width: 100% !important;
}

.w-h {
  width: 35% !important;
  height: 75%;
}

.w {
  width: 29% !important;
  height: 96% !important;
}

.text-box-right [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-right {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 3%;
  left: 38%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 52%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-right-long [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-right-long {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 48%;
  left: 66%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 33%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-right-large [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-right-large {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 4%;
  right: 5px;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 57%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-top [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-top {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 7%;
  left: 25%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 57%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-bottom [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-bottom {
  font-size: larger;
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 62%;
  left: 25%;
  display: grid;
  -ms-grid-columns: auto minmax(23%, 1fr);
  grid-template-columns: auto minmax(23%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 9px 12px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 57%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-bottom-left [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-bottom-left {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 33%;
  left: 44%;
  font-size: small;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: 49%;
  padding: 0px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 54%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-top-left [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-top-left {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 4%;
  left: 40%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: 49%;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 57%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-left [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-left {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 15%;
  left: 40%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: 49%;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 57%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-box-large [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-large {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 1%;
  left: 25%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /* max-height: 25%; */
  /* overflow: hidden; */
  width: 57%;
  z-index: 10;
  text-align: left;
  /* height: auto; */
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
}

.text-box-large-left [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-large-left {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 1%;
  left: 15%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /* max-height: 25%; */
  /* overflow: hidden; */
  width: 57%;
  z-index: 10;
  text-align: left;
  /* height: auto; */
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
}

.text-box-larger [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-larger {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 1%;
  left: 2%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 77%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

.text-box-medium-bottom [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-medium-bottom {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 33%;
  left: 2%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: 60%;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 50%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

choice-container [data-content="wrapper"] {
  display: flex;
  width: 88%;
  /* height: 20%; */
  justify-content: space-between;
  flex-wrap: wrap;
  /* flex-direction: column */
}

.col-img-tree {
  padding: 5px;
  border: 2px solid black;
  width: 100%;
  margin: 3px;
  text-align: center;
}

.img-col-tree {
  width: 50%;
  position: static;
}

.body-text {
  font-size: smaller;
  text-align: left;
}

.head-text {
  font-size: smaller;
}

#app {
  margin: 0 auto;
  /* width: max-content; */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid {
  width: 25%;
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: 95%;
  height: 100%;
  margin: 5px;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-item[draggable] {
  user-select: none;
  -khtml-user-drag: element;
  -webkit-user-drag: element;
  cursor: move;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.grid-item[draggable].drag--hover {
  color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.14);
  transform: scale(0.8);
  transition: 0.3s ease-out;
}

.grid-item[draggable].drag--moving {
  opacity: 0.4;
}

[data-header] {
  position: relative;
}

[data-header]:before {
  content: attr(data-header);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 2em;
}

.textbox-right [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.textbox-right {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 4%;
  left: 54%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: max-content;
  padding: 5px 2px;
  width: 45%;
  z-index: 10;
  text-align: left;
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.fire {
  position: absolute;
  /* -7% */
  /* left: 2%; */
  /* right: 45%; */
  transform: translate(50%, 0);
  /* 70% */
  bottom: -21%;
  width: 3%;
  left: 5%;
}

.boiler {
  /* width: 15%; */
  width: 230px;
  position: absolute;
  left: 0;
}

.spinner {
  position: absolute;
  width: 196px;
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: 0.5s all linear;
  left: 248px;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.load {
  width: 100%;
  margin: 2px 0px;
  height: 25%;
  text-align: center;
}

.container-boiler {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 0;
}

.container-game-boiler {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 29%;
}

.container-boiler {
  background: url("../bg-boiler.jpg");
  background-size: cover;
}

.container-flip {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  width: 47%;
  right: 0;
  height: 100%;
}

.container-flip-reverse {
  z-index: 99;
  display: flex;
  position: absolute;
  top: 0;
  width: 47%;
  right: 0;
  height: 100%;
}

#fullmode {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
}

#fullmode1 {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  height: 40px;
  width: 40px;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* #flip-card-inner {
	transform: rotateY(180deg);
} */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

.wrapper-text {
  height: 25%;
  display: flex;
  align-items: baseline;
}

[data-content="text"] {
  scroll-behavior: smooth;
}

.text_answer {
  pointer-events: none;
}

[data-ui="say"] {
  font-size: 1.5rem;
}

.poster-card {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrappers {
  width: 100%;
  height: 100%;
  border-bottom: solid 2px black;
  border-right: 2px solid black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 2%;
}

.wrappers1 {
  width: 100%;
  height: 100%;
  border-bottom: solid 2px black;
  border-right: 2px solid black;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.text-box-left-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 61%;
  border: 1px solid black;
  text-align: left;
  padding: 0px 2px;
  height: 43%;
}

.text-box-right-bottom {
  position: absolute;
  width: 35%;
  text-align: left;
  right: 0;
  background: rgba(0, 0, 0, 0.74);
  color: white;
  border-radius: 5px;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.text-box-left-bottom [data-content="text"] {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: text;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 100%;
}

.text-box-left-bottom {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 44%;
  left: 0%;
  display: grid;
  -ms-grid-columns: auto minmax(70%, 1fr);
  grid-template-columns: auto minmax(70%, 1fr);
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header""side-image text";
  background-color: var(--main-color);
  min-height: 10%;
  max-height: 60%;
  padding: 5px 2px;
  /*max-height: 25%;
	*/
  /*overflow: hidden;
	*/
  width: 51%;
  z-index: 10;
  text-align: left;
  /*height: auto;
	*/
  bottom: 0;
  color: #fff;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

#charcoal-way {
  position: absolute;
  width: 100%;
  bottom: -52%;
  height: 27%;
}

.charcoal {
  width: 1.5%;
  position: absolute;
  left: 0;
  bottom: 0;
  animation: load 1s ease infinite;
  -webkit-animation: load 1s ease;
}

@keyframes load {
  0% {
    left: 0;
  }

  50% {
    left: 120px;
  }

  100% {
    left: 120px;
    bottom: 50px;
    display: none;
  }
}

#fire-boil {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}

.text-bottom {
  font-size: 1.5vw;
}

.image-2 {
  width: 18%;
  height: 42%;
}

.container-blaster {
  display: flex !important;
  position: absolute !important;
  left: 0 !important;
  height: 100% !important;
  flex-wrap: wrap;
}

.container-drills-1 {
  top: 40% !important;
  right: 29px !important;
}

.container-drills-2 {
  position: absolute;
}

[data-action="set-volume"]::after {
  content: "+";
  margin: 9px;
  font-size: larger;
}

[data-action="set-volume"]::before {
  content: "-";
  margin: 9px;
  font-size: larger;
}

[data-action="set-text-speed"]::after {
  content: "+";
  margin: 9px;
  font-size: larger;
}

[data-action="set-text-speed"]::before {
  content: "-";
  margin: 9px;
  font-size: larger;
}

[data-action="set-auto-play-speed"]::after {
  content: "+";
  margin: 9px;
  font-size: larger;
}

[data-action="set-auto-play-speed"]::before {
  content: "-";
  margin: 9px;
  font-size: larger;
}

[data-action="back"] {
  right: 0 !important;
  left: auto;
  transform: rotate(180deg);
}

.location {
  font-family: 'Times New Roman', Times, serif;
  padding: 5px 16px;
  /* margin: 10px; */
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.location1 {
  font-family: 'Times New Roman', Times, serif;
  font-weight: bolder;
  padding: 5px 16px;
  color: black;
  width: 100%;
  /* position: absolute; */
  left: 0;
  text-align: center;
}

.stage {
  position: absolute;
  top: 0;
  left: 2%;
  padding: 2px;
  border-bottom: solid 2px black;
  /* border-block-end: solid black 2px; */
  border-left: solid 2px black;
  font-size: calc(0.75em + 1vmin);
}

.stage-right {
  position: absolute;
  top: 0;
  right: 2%;
  padding: 2px;
  border-bottom: solid 2px black;
  /* border-block-end: solid black 2px; */
  border-left: solid 2px black;
  font-size: calc(0.75em + 1vmin);
}

.zIndex-999 {
  z-index: 999;
}

.blue {
  background-color: #002060;
}

.yellow {
  background-color: #ffe699;
}

.lightblue {
  background-color: #dbebf3;
}

.input-custom {
  /* position: absolute; */
  bottom: 2.4rem;
  color: #0294d0 !important;
  font-weight: bold;
  padding: .5rem 0;
  width: 85%;
  left: 3.5rem;
  border-bottom: solid 1px black;
  background-color: transparent;
  color: black;
}

/* Show Modul */
.explain-opt {
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 5%;
}

.explain-opt-right {
  padding: 1rem;
  position: absolute;
  top: 0;
  right: 5%;
  background: #eee;
}

.opt-item img {
  width: 6rem;
}

[alt=Handbook] {
  padding-bottom: .7rem;
}

.opt-item p {
  color: #01638B !important;
}

.opt-item {
  padding: 1rem;
  margin: 0 0 0.5rem;
  background-color: #ABDBEF;
  border: 3px solid white;
  border-radius: 20px;
  box-shadow: 0 0.2em #ccc;
  color: #01638B !important;
}

.text-white {
  color: #fff !important;
}

/* End show modul */

/* POS NEW */
.container-pos {
  display: flex;
  position: absolute;
  z-index: -1;
  top: 8rem;
  background-color: #fff;
  box-shadow: 0 0.2em #ccc;
  border-radius: 20px;
  padding: 1rem;
}

.circle-pos {
  transition: 0.5s all linear;
  display: flex;
  position: relative;
  width: 9rem;
  height: 9rem;
  background-color: #0294D0;
  box-shadow: 0 0.2em #fff, 0 0.3em #ccc;
  border-radius: 50%;
  text-align: center;
  margin-right: 90px;
  justify-content: center;
  -webkit-transition: 0.5s all linear;
  -moz-transition: 0.5s all linear;
  -ms-transition: 0.5s all linear;
  -o-transition: 0.5s all linear;
}

.text-circle-pos {
  margin: 0;
  font-size: 23px;
  color: white;
  vertical-align: middle;
  height: 100%;
  display: flex;
  align-items: center;
}

.arrow-pos {
  width: 6vmin;
  height: 6vmin;
  box-sizing: border-box;
  position: absolute;
  right: -60px;
  top: 38%;
  transform: rotate(45deg);
  border-radius: 20px;
}

.arrow-pos::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 10px 10px 0 0;
  border-style: solid;
  top: 50%;
  right: 20px;
  border-color: #81CAE8;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;
  border-radius: 8px 8px 6px 4px;
}

/* END POS NEW */

/* Petunjuk Frame New */
.section-instruction {
  position: absolute;
  top: 1rem;
  text-align: left;
  width: 50%;
  right: 14rem;
  background-color: #ABDBEF;
  border-radius: 20px;
  box-shadow: 0 0.3em #0294d0;
  padding: 2rem;
  text-align: center;
}

.section-inner-instruction {
  padding: 1rem;
  background-color: #CCEAF6;
  border-radius: 20px;
  font-size: 16px;
  text-align: left;
}

.header-instruction {
  padding: 1rem;
  background-color: #0294D0;
  border-radius: 20px;
  font-size: 16px;
  width: fit-content;
  color: #fff;
}

ol.instruction li {
  display: list-item;
  list-style-type: decimal;
  color: #000;
}

.to-play-game {
  border-radius: 40px;
  background-color: #0294D0;
  margin-top: 1rem !important;
  box-shadow: 0 .2em #01638B, 0 .4em #fff;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

.to-play-game:active {
  box-shadow: 0 .2em #fff;
  position: relative;
  top: .2em;
  transition: none;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
}

/* End Petunjuk Frame */

/* Frame Stone New */
.stone-spec-container {
  color: #000;
  position: absolute;
  text-align: start;
  display: flex;
  justify-content: center;
  width: 80% !important;
  left: 8rem !important;
  top: -1rem;
}

.section-stone-inner {
  width: 25%;
  background: #fff;
  margin: 1rem;
  border: 1rem solid #ABDBEF;
  border-radius: 20px;
  box-shadow: 0 0.2em #0294D0;
  text-align: center;
  padding: 0.5rem;
}

.section-stone-image {
  text-align: center;
  padding: 1.1rem;
}

.image-stone-spec {
  position: static;
  width: 50%;
}

.name-stone-spec {
  margin: 0 0 0.5rem 0;
}

.section-stone-spec {
  border-radius: 20px;
  border: 1px solid #ccc;
  padding: 0.8rem;
}

.item-spec-stone {
  display: flex;
  font-size: 0.8rem;
  justify-content: space-between;
}

.item-spec-stone p {
  margin: 0.2rem 0;
}

/* END Frame Stone New */

/* Draggable New */
.draggable-item {
  background-color: #2CA6D8;
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  color: #fff;
  cursor: move;
}

.container-dragger {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-bottom: 4rem;
}

.draggable-item:before {
  background-image: url(./new-assets/image/icon-drag.svg);
  background-size: 10px 20px;
  display: inline-block;
  width: 10px;
  height: 20px;
  content: "";
  margin: -0.2rem 0.3rem;
}

.drag--hover {
  background-color: #01638B;
}

#btn-drag {
  box-shadow: 0 0.1em #01638b, 0 0.2em #fff, 0 0.3em #ccc;
  transition: none;
  -webkit-transition: none;
  border-radius: 40px;
}

.container-btn-drag {
  bottom: 11px;
  position: absolute;
}

#btn-drag:active {
  box-shadow: 0 .1em #fff, 0 .2em #ccc;
  position: relative;
  top: .1em;
  transition: none;
  -webkit-transition: none;
}

/* End Draggable New */

/* Global Button Game */
.btn-game-style {
  box-shadow: 0 0.1em #01638b, 0 0.2em #fff, 0 0.3em #ccc !important;
  border-radius: 40px !important;
  padding: 5px 23px !important;
  width: fit-content;
  height: fit-content;
  transition: none !important;
  -webkit-transition: none;
  background-color: #0294d0 !important;
}

.btn-game-style:active {
  box-shadow: 0 .1em #fff, 0 .2em #ccc !important;
  position: relative;
  top: .1em;
  transition: none;
  -webkit-transition: none;
}

.position-btn-game {
  top: 22rem;
  position: absolute;
  left: 34rem;
}

/* End Global Button Game */

/* Input Blasting Question */
.container-input-blasting {
  position: absolute;
  top: 12.6rem;
  right: 22.8rem;
}

.container-input-blasting-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* End Input Blasting Question */

/* Modal Custom New */
.success-header {
  color: #00CC2D !important;
}

.fail-header {
  color: #FF8310 !important;
}

.cancel-btn {
  box-shadow: 0 0.1em #9b0000, 0 0.2em #fff, 0 0.3em #ccc !important;
  background-color: #CC0000 !important;
}

.info-header {
  color: #0294D0 !important
}

.modal-custom {
  display: none;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  position: absolute;
  border-radius: 20px;
  padding: 10px;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.2em #ccc;
}

.modal-title {
  position: absolute;
  top: -2rem;
  left: 14rem;
  border-radius: 12px;
  color: #FFF;
  padding: 14px 20px;
  text-transform: uppercase;
}

.fail-modal {
  border: 1px solid #880000;
  text-shadow: 0 2px 0 #880000;
  background: #CC0000;
}

.success-modal {
  border: 1px solid #00CC2D;
  text-shadow: 0 2px 0 #00CC2D;
  background-color: #00CC2D;
}

/* End Modal Custom New */

/* Score Game 1 */
#scoreBoard {
  position: absolute;
  top: 1rem;
  left: 6rem;
  user-select: none;
  display: flex;
  align-items: center;
}

#scoreBoard p {
  margin: 0 1rem 0 0;
}

#text-on-score {
  text-shadow: none;
  color: #000;
}

#scoreText {
  padding: 0.3rem 2rem;
  border-radius: 20px;
  background-color: #FBE8B5;
  color: #a17d17;
}

.collectible-container {
  user-select: none;
  border-radius: 20px;
  background: #ffffffbf;
  display: flex;
  position: absolute;
  top: .6rem;
  right: 1rem;
  width: 45%;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  justify-content: space-between;
  align-items: flex-end;
}

.collectible-item img {
  width: 80%;
}

.collectible-item p {
  margin: 0;
}

.collectible-item:first-child img,
.collectible-item:last-child img {
  width: 90%;
}

.collectible-item {
  display: flex;
  text-align: center;
  width: 24%;
  align-items: flex-end;
  color: #A17D17;
  font-weight: 700;
}

/* End Score Game 1 */

p {
  font-family: Helvetica, sans-serif;
}

button:focus {
  border: none;
}

/* Progress Bar */
.container-progress-bar {
  width: 100%;
  position: absolute;
  z-index: 1;
}

.progressbar li {
  float: left;
  width: 20%;
  position: relative;
  text-align: center;
}

.progressbar {
  counter-reset: step;
}

.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: #979797;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li.active:after {
  background: #3aac5d;
}

.progressbar li.active:before {
  border-color: #3aac5d;
  background: #3aac5d;
  color: white
}

.progressbar li:first-child:after {
  content: none;
}

.dot-list li {
  list-style-type: disc;
  display: list-item;
  margin: 0 !important;
}

.input-answer-location {
  width: 11rem;
  color: #000;
  padding: 5px;
  margin: 2px;
}

.container-answer-location {
  margin-bottom: 5px;
}

.row-trees {
  display: flex;
  width: 29%;
  height: 70%;
  flex-wrap: wrap;
  /* margin-top: calc(1.5rem * -1); */
  margin-right: calc(1.5rem * -0.5);
  margin-left: calc(1.5rem * -0.5);
  position: absolute;
  right: 2rem;
  top: 0px;
  align-items: center;
  justify-content: space-around;
}

.container-trees-answ {
  flex: 0 0 auto;
  padding: 0.6rem;
  width: 46%;
  background: #ABDBEF;
  box-shadow: 0 .2em #0294D0;
  border-radius: 20px;
}

.trees-answ {
  width: 9rem;
  height: 10rem;
  background-color: #fff !important;
  color: #000 !important;
}

.trees-answ:hover {
  background-color: #ABDBEF !important;
}

.logout-button {
  position: absolute;
  top: .3rem;
  right: 1.2rem;
}

.logout-button button {
  width: fit-content;
  height: fit-content;
  padding: .3rem;
}

/* --------------------------------- *Tablet Style --------------------------------- */
@media (min-width: 901px) and (max-width: 1200px) and (orientation: landscape) {
  .trees-answ {
    width: 100%;
    height: 10rem;
    background-color: #fff !important;
    color: #000 !important;
  }
  .position-job {
    width: 27% !important;
    right: 1rem !important;
    top: -15.1rem !important;
  }

  .position-drill {
    position: absolute;
    top: 3.1rem;
  }
  .container-btn-game-3 {
    display: flex;
    bottom: 10.1rem !important;
    align-items: stretch;
    right: -1.2rem !important;
    width: 35% !important;
  }

  .btn-kimia {
    margin: .2em .4em;
  }

  .container-input-blasting-1 button {
    padding: 0.2rem 0.6rem;
    font-size: 1rem;
  }

  .modal-title {
    position: absolute;
    top: -2rem;
    left: 10rem;
    border-radius: 12px;
    color: #FFF;
    padding: 14px 20px;
    text-transform: uppercase;
  }

  [data-ui="say"] {
    font-size: 1.1rem;
  }

  .section-instruction {
    position: absolute;
    top: 2rem;
    text-align: left;
    width: 66%;
    right: 9rem;
    background-color: #ABDBEF;
    border-radius: 20px;
    box-shadow: 0 0.3em #0294d0;
    padding: 1rem;
    text-align: center;
  }

  .item-checkbox {
    font-size: 1rem !important;
  }

  .container-drills-2 {
    position: absolute;
  }

  .container-drills-1 {
    top: 40% !important;
    right: 29px !important;
  }

  .container-blaster {
    display: flex !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 90% !important;
  }

  game-screen [data-character] {
    bottom: 0;
    position: absolute;
    max-width: 100%;
    max-height: 65vh;
  }

  .w--43 {
    width: 43% !important;
  }

  .image-2 {
    width: 25%;
    height: 42%;
  }

  .text-bottom {
    font-size: 2.3vw;
  }

  .m-33 {
    width: 33%;
  }

  #charcoal-way {
    position: absolute;
    width: 100%;
    bottom: 22%;
    height: 27%;
  }

  .charcoal {
    width: 1.5%;
    position: absolute;
    left: 0;
    bottom: 0;
    animation: load 1s ease infinite;
    -webkit-animation: load 1s ease;
  }

  @keyframes load {
    0% {
      left: 0;
    }

    50% {
      left: 60px;
    }

    100% {
      left: 60px;
      bottom: 20px;
      display: none;
    }
  }

  .text_answer {
    pointer-events: none;
  }

  .circle1 {
    transition: 0.5s all linear;
    display: flex;
    position: relative;
    width: 142px;
    height: 142px;
    background-color: black;
    border-radius: 50%;
    text-align: center;
    margin-right: 48px;
    justify-content: center;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  p.text {
    margin: 0;
    font-size: 2vw;
    color: white;
    vertical-align: middle;
    height: 100%;
    display: flex;
    align-items: center;
  }

  div.arrow {
    width: 6vmin;
    height: 6vmin;
    box-sizing: border-box;
    position: absolute;
    right: -35px;
    top: 38%;
    transform: rotate(45deg);
  }

  div.arrow::before {
    content: "";
    width: 100%;
    height: 100%;
    border-width: 10px 10px 0 0;
    border-style: solid;
    top: 50%;
    right: 20px;
    border-color: #ff0000;
    transition: 0.2s ease;
    display: block;
    transform-origin: 100% 0;
  }

  div.arrow:after {
    content: "";
    float: left;
    position: relative;
    top: 50%;
    right: 20px;
    width: 100%;
    height: 100%;
    border-width: 0 0 0 0;
    border-style: solid;
    border-color: #ff0000;
    transform-origin: 100% 0;
    transition: 0.2s ease;
  }

  div.arrow:hover::after {
    transform: rotate(45deg);
    border-color: orange;
    height: 120%;
  }

  div.arrow:hover::before {
    border-color: orange;
    transform: scale(0.8);
  }

  [data-content="text"] {
    scroll-behavior: smooth;
  }

  .text-box-large-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-large-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 1%;
    left: 15%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /* max-height: 25%; */
    /* overflow: hidden; */
    width: 57%;
    z-index: 10;
    text-align: left;
    /* height: auto; */
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
  }

  .wrapper-text {
    height: 50%;
    display: flex;
    align-items: flex-start;
  }

  .poster-card {
    width: 90%;
    display: flex;
    flex-direction: column;
  }

  .left-mid {
    left: 10%;
    top: 0;
  }

  .wrappers {
    width: 100%;
    height: 100%;
    border-bottom: solid 2px black;
    border-right: 2px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 2%;
  }

  .wrappers1 {
    width: 100%;
    height: 100%;
    border-bottom: solid 2px black;
    border-right: 2px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }

  /* #flip-card-inner {
		transform: rotateY(180deg);
	} */

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .flip-card-front {
    background-color: #bbb;
    color: black;
  }

  .flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
  }

  .scene {
    width: 200px;
    height: 260px;
    border: 1px solid #ccc;
    margin: 40px 0;
    perspective: 600px;
  }

  .card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }

  .card.is-flipped {
    transform: rotateY(180deg);
  }

  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .card__face--front {
    background: red;
  }

  .card__face--back {
    background: blue;
    transform: rotateY(180deg);
  }

  .fire {
    position: absolute;
    left: 29px;
    transform: translate(50%, 0);
    top: 40%;
    width: 5%;
  }

  .boiler {
    width: 120px;
    position: absolute;
    left: 0;
  }

  .spinner {
    position: absolute;
    width: 150px;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: 0.5s all linear;
    left: 21%;
  }

  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

  .load {
    width: 100%;
    margin: 2px 0px;
    height: 25%;
    text-align: center;
  }

  .container-boiler {
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
  }

  .container-game-boiler {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 26%;
  }

  .inital {
    height: 0;
  }

  #app {
    margin: 0 auto;
    width: 47%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
  }

  .grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    z-index: 100;
    top: 3px;
    right: 0;
  }

  .grid-item {
    width: 90%;
    height: 90%;
    margin: 5px;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .grid-item[draggable] {
    user-select: none;
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    cursor: move;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .grid-item[draggable].drag--hover {
    color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.14);
    transform: scale(0.8);
    transition: 0.3s ease-out;
  }

  .grid-item[draggable].drag--moving {
    opacity: 0.4;
  }

  [data-header] {
    position: relative;
  }

  [data-header]:before {
    content: attr(data-header);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 2em;
  }

  .col-img-tree {
    padding: 5px;
    border: 2px solid black;
    width: 25%;
    margin: 3px;
    text-align: center;
    height: 85%;
    overflow-y: auto;
  }

  .img-col-tree {
    width: 50%;
  }

  .body-text {
    font-size: smaller;
    text-align: left;
  }

  .head-text {
    font-size: smaller;
  }

  choice-container [data-content="wrapper"] {
    display: flex;
    width: 88%;
    justify-content: space-between;
    /* flex-direction: column */
  }

  .con-truck {
    margin-top: 40px;
    margin-bottom: 50px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-right: 100px;
  }

  .con-truck-1 {
    margin-top: 40px;
    margin-bottom: 50px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .img {
    width: 135px;
  }

  .img-1 {
    width: 130px;
  }

  .drill {
    width: 15px;
    z-index: 1;
    margin: 0px;
    /* animation-name: example;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-direction: normal; */
  }

  .drill-1 {
    width: 15px;
    z-index: 1;
    margin: 0px;
    /* animation-name: example;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-direction: normal; */
  }

  @keyframes example {
    from {
      transform: rotateY(0deg);
    }

    to {
      transform: rotateY(360deg);
    }
  }

  .con-btn {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .con-drill {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60px;
  }

  .con-drill-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60px;
  }

  hr:not([size]) {
    height: 5px;
    opacity: 1;
    width: 100px;
    border: none;
  }

  #target-1 {
    position: absolute;
    left: 75%;
    /* bottom: 37%; */
  }

  #target-2 {
    position: absolute;
    right: 10%;
  }

  .container-drill {
    height: 100vh;
    background-image: url("./new-assets/game2/bg-drill-game.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: bottom;
  }

  .bg-danger {
    background-color: red;
  }

  .bg-success {
    background-color: green;
  }

  .blast-1 {
    transition: all 0.3s;
    position: absolute;
    top: -80px;
    width: 100px;
  }

  .blast-2 {
    transition: all 0.3s;
    position: absolute;
    top: -80px;
    width: 100px;
  }

  .m-0 {
    margin: 0;
  }

  .appear {
    right: 0;
    opacity: 1 !important;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }

  .game-pad {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: 22px;
    left: auto;
    right: 40px;
    width: 10%;
    justify-content: space-evenly;
    height: 40%;
  }

  .gamepad-rl {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .gamepad {
    margin: 5px;
  }

  .btn-gamepad {
    text-align: center;
    background-color: #0294d000;
    width: 70px;
    color: #bababa;
    border: none;
    border-radius: 50px;
    padding: 10px 10px;
    font-size: 59px;
  }

  .btn-gamepad:hover {
	background-color: unset !important;
  }

  .img-col {
    width: 100%;
    height: 50%;
    object-fit: contain;
    position: static;
  }

  .col-img {
    border: solid 2px black;
    margin: 0 2px;
    width: 20vw;
    display: flex;
    height: 100%;
    /* flex-wrap: wrap; */
    flex-direction: column;
    align-items: center;
    padding: 6px;
    justify-content: space-around;
  }

  .text-img {
    text-align: center;
    /* font-size: 2.2vw; */
  }

  .selection-right {
    position: absolute;
    z-index: 100;
    width: 16%;
  }

  .selection {
    position: absolute;
    z-index: 100;
    width: 66px;
    top: 5%;
  }

  .container-flip {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    width: 47%;
    right: 0;
    height: 100%;
  }

  .container-flip-reverse {
    display: flex;
    position: absolute;
    top: 0;
    width: 47%;
    right: 0;
    height: 100%;
  }

  .image-flip {
    width: 100%;
    position: static;
    height: 100%;
    max-height: 100% !important;
  }

  .flip-card {
    width: 100% !important;
    height: 100% !important;
  }

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card-1 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-2 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-3 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-4 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-5 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-6 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  /* This container is needed to position the front and back side */
  .flip-card-inner-1 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-1:hover .flip-card-inner-1 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-1,
  .flip-card-back-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-1 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-1 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ================================================ */

  .flip-card-inner-2 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    -webkit-transition: transform 0.8s;
    -moz-transition: transform 0.8s;
    -ms-transition: transform 0.8s;
    -o-transition: transform 0.8s;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-2:hover .flip-card-inner-2 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-2,
  .flip-card-back-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-2 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-2 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ================================ */

  .flip-card-inner-3 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-3:hover .flip-card-inner-3 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-3,
  .flip-card-back-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-3 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-3 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ============================================= */

  .flip-card-inner-4 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    -webkit-transition: transform 0.8s;
    -moz-transition: transform 0.8s;
    -ms-transition: transform 0.8s;
    -o-transition: transform 0.8s;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-4:hover .flip-card-inner-4 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-4,
  .flip-card-back-4 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-4 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-4 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ==================================== */

  .flip-card-inner-5 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-5:hover .flip-card-inner-5 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-5,
  .flip-card-back-5 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-5 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-5 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* =========================== */

  .flip-card-inner-6 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-6:hover .flip-card-inner-6 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-6,
  .flip-card-back-6 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-6 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-6 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* =================================== */

  .cont-input {
    text-align: center;
    z-index: 1000;
    color: white;
    height: 20px;
    /* position: absolute; */
    bottom: 73px;
    left: 10px;
  }

  .inputs {
    color: black;
    width: 60%;
  }

  .text-box [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box {
    box-shadow: 0 .1em #81CAE8;
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: auto;
    bottom: 9%;
    left: 3%;
    border: 5px solid #cceaf6;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: #fff;
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    width: 95%;
    z-index: 10;
    text-align: left;
    color: #000;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .textbox-right [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .textbox-right {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    left: 54%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 45%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-right-small [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-small {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 33%;
    left: 66%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 24%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 32%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left-small [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left-small {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 52%;
    left: 0%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 34%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 32%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .boxes {
    background-color: white;
    position: absolute;
    left: 9px;
    top: 0;
    text-align: left;
    width: 50%;
    border-bottom: solid 2px black;
    border-left: solid 2px black;
    padding: 7px;
  }

  .text-box-right-medium [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-medium {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 53%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 33%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .right-medium [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .right-medium {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 45%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 33%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .w-42 {
    width: 38% !important;
  }

  .w-100 {
    width: 100% !important;
  }

  .w-45 {
    width: 45% !important;
  }

  .w-43 {
    width: 43% !important;
    height: 69% !important;
  }

  .w-h {
    width: 35% !important;
    height: 75%;
  }

  .w {
    width: 29% !important;
    height: 96% !important;
  }

  .w-30 {
    width: 30% !important;
  }

  .w-36 {
    width: 36% !important;
  }

  .w-37 {
    width: 37% !important;
  }

  .text-box-right [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 3%;
    left: 38%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 52%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-right-long [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-long {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 16%;
    left: 70%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 29%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-right-large [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-large {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    right: 5px;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-top [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-top {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 7%;
    left: 22%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-bottom [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-bottom {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 62%;
    left: 22%;
    display: grid;
    -ms-grid-columns: auto minmax(23%, 1fr);
    grid-template-columns: auto minmax(23%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 9px 12px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-bottom-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-bottom-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 33%;
    left: 44%;
    font-size: small;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 49%;
    padding: 0px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 54%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-top-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-top-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    left: 40%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 49%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 40%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 49%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left-bottom [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 61%;
    border: 1px solid black;
    text-align: left;
    padding: 0px 2px;
    height: 40%;
  }

  .text-box-right-bottom {
    position: absolute;
    width: 35%;
    text-align: left;
    right: 0;
    background: rgba(0, 0, 0, 0.74);
    color: white;
    border-radius: 5px;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
  }

  .text-box-left-top p {
    padding: 3px 5px;
    margin: 0;
    font-size: 3.3vh;
  }

  .text-box-left-bottom {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 44%;
    left: 0%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 60%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 51%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left-large [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left-large {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 3%;
    left: 1%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-large [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-large {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 1%;
    left: 25%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /* max-height: 25%; */
    /* overflow: hidden; */
    width: 57%;
    z-index: 10;
    text-align: left;
    /* height: auto; */
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
  }

  .text-box-larger [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-larger {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 1%;
    left: 2%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 77%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
  }

  .text-box-medium-bottom [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-medium-bottom {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 33%;
    left: 2%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 66%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 50%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
  }

  .text-box-right-wide [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-wide {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    right: 5px;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 69%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .cont-inputbox {
    z-index: 100;
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 0 0 14% 0;
    cursor: pointer;
    font-size: 22px;
    height: 51px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Hide the browser's default checkbox */
  .cont-inputbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox */
  .check {
    text-align: center;
    position: absolute;
    top: 0;
    left: -55px;
    height: 100%;
    width: 200px;
    background-color: #eee;
    font-size: 2vw;
    padding: 2px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* On mouse-over, add a grey background color */
  .cont-inputbox:hover input~.check {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .cont-inputbox input:checked~.check {
    background-color: #2196f3;
  }

  /* Create the check/indicator (hidden when not checked) */
  .check:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the check when checked */
  .cont-inputbox input:checked~.check:after {
    display: block;
  }

  .check-right {
    text-align: center;
    position: absolute;
    top: 0;
    right: -7px;
    height: 100%;
    width: 200px;
    background-color: #eee;
    font-size: larger;
    padding: 2px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid black;
    box-shadow: 2px 2px 2px gray;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* On mouse-over, add a grey background color */
  .cont-inputbox:hover input~.check-right {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .cont-inputbox input:checked~.check-right {
    background-color: #2196f3;
  }

  /* Create the check/indicator (hidden when not checked) */
  .check-right:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the check when checked */
  .cont-inputbox input:checked~.check-right:after {
    display: block;
  }
}

/* End Checkbox */

/* Style for Centered Text */
[data-component="centered-dialog"] {}

/* Character Images Styles */
[data-screen="game"] [data-character] {}

/* Other Images Styles */
[data-screen="game"] [data-image] {}

/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {}

/* Quick Menu Buttons Style */
[data-component="quick-menu"] span {}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] span:hover {}

/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"]>span>.fa {}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these */
input[type="range"]:focus::-webkit-slider-runnable-track {}

input[type="range"]::-webkit-slider-runnable-track {}

input[type="range"]:focus::-ms-fill-upper {}

input[type="range"]:focus::-ms-fill-lower {}

input[type="range"]::-moz-range-track {}

input[type="range"]::-ms-fill-lower {}

input[type="range"]::-ms-fill-upper {}

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
  /* Styles for the desktop version of the Quick Menu */

  /* Quick Menu Style */
  [data-component="quick-menu"] {}

  /* Quick Menu Buttons Style */
  [data-component="quick-menu"] span {}

  /* Quick Menu Buttons Style on Hover */
  [data-component="quick-menu"] span:hover {}
}

/** Medium Devices, Tablets (992px)**/

@media screen and (max-width: 900px) {
  [data-ui="who"] {
    /* display: none; */
    position: absolute;
    top: -1.6rem;
    background-color: #0294D0;
    box-shadow: 0 .2em #027bad;
    font-weight: bold;
    width: auto;
    text-align: center;
    border-radius: 20px;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-width: 600px) {
  .circle1 {
    transition: 0.5s all linear;
    display: flex;
    position: relative;
    width: 80px;
    height: 80px;
    background-color: black;
    border-radius: 50%;
    text-align: center;
    margin-right: 48px;
    justify-content: center;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  p.text {
    margin: 0;
    font-size: 13px;
    color: white;
    vertical-align: middle;
    height: 100%;
    display: flex;
    align-items: center;
  }

  div.arrow {
    width: 6vmin;
    height: 6vmin;
    box-sizing: border-box;
    position: absolute;
    right: -25px;
    top: 38%;
    transform: rotate(45deg);
  }

  div.arrow::before {
    content: "";
    width: 100%;
    height: 100%;
    border-width: 10px 10px 0 0;
    border-style: solid;
    top: 50%;
    right: 20px;
    border-color: #ff0000;
    transition: 0.2s ease;
    display: block;
    transform-origin: 100% 0;
  }

  div.arrow:after {
    content: "";
    float: left;
    position: relative;
    top: 50%;
    right: 20px;
    width: 100%;
    height: 100%;
    border-width: 0 0 0 0;
    border-style: solid;
    border-color: #ff0000;
    transform-origin: 100% 0;
    transition: 0.2s ease;
  }

  div.arrow:hover::after {
    transform: rotate(45deg);
    border-color: orange;
    height: 120%;
  }

  div.arrow:hover::before {
    border-color: orange;
    transform: scale(0.8);
  }
}

/* ------------------------------------- Carousel ------------------------------------- */
.slideshow-container {
  max-width: 810px;
  position: absolute;
  margin: auto;
  top: 0;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  width: auto;
  height: 10px;
  padding: 5px 10px;
  color: #fff;
  background-color: #0294D0;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 50%;
  text-align: center;
  user-select: none;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: #005a7d;
}

/* Caption text */
.container-text {
  color: #000;
  font-size: 15px;
  padding: 5px 12px;
  width: 100%;
  background-color: #CCEAF6;
  margin: 0 0 0 1rem;
  border-radius: 20px;
  text-align: left;
}

/* Number text (1/3 etc) */
.numbertext {
  color: inherit;
  font-size: inherit;
  padding: 8px 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* .active,
.dot:hover {
  background-color: #717171;
} */

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

.container-slide {
  display: flex;
  align-items: flex-start;
  background-color: #ABDBEF;
  padding: 20px;
  box-shadow: 0 .3em #0294D0;
  border-radius: 20px;
}

.img-slide {
  width: 11rem;
  position: static;
}

.container-button {
  position: absolute;
  bottom: 1rem;
  right: 1.3rem;
}

.wrapper-button {
  margin: 1rem 0;
}

.button-play-game {
  background-color: #0294D0;
  cursor: pointer;
  font-weight: bolder;
  color: #fff;
  border: none;
  padding: .7em;
  border-radius: 20px;
  box-shadow: 0 .2em #01638B, 0 .4em #fff, 0 .6em #ccc;
}

.button-play-game:hover {
  background-color: #007aaa;
}

.button-play-game:active {
  top: .2em;
  position: relative;
  box-shadow: 0 .2em #fff, 0 .4em #ccc;
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

body.swal2-height-auto {
  height: inherit !important;
}

/* ----------------------------------- Report Style ----------------------------------- */
.battery {
  padding: 2px 5px;
  border: solid thin #FFF;
  position: relative;
  background-color: #CCEAF6;
  border-radius: 11.08px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.container-progress {
  padding-bottom: 1rem;
  color: #0294D0;
  font-weight: 700;
}

.bar:first-child {
  border-radius: 11.08px 0px 0px 11.08px;
}

.bar:last-child {
  border-radius: 0px 11.08px 11.08px 0px;
}

.bar {
  display: inline-block;
  width: 0;
  border: solid thin rgba(255, 255, 255, .1);
  padding: 7px;
  background: transparent;
  transition: background 1s;
  margin: 0 .02rem;
}

.bar.active {
  background: #027BAD;
}

.container-outer {
  display: flex;
  height: 90%;
  flex-direction: column;
  align-items: center;
  width: 75%;
  position: absolute;
  top: 0;
}

.container-chart {
  background-color: #fff;
  padding: .5rem;
  border-radius: 20px;
  height: 100%;
  width: 100%;
}

.iframe-certificate {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px;
}

.circle-progress-value {
  stroke: var(--color-circle);
}

.circle-progress {
  width: 150px;
  height: auto;
}

.img {
  width: 100%;
}

.img-logo {
  float: right;
  margin-bottom: 1rem;
  width: 90px;
}

.container-chart svg {
  display: inline-flex;
  vertical-align: bottom;
  width: 15rem;
}

circle {
  stroke: #abe7ff;
  stroke-width: 5px;
  stroke-dasharray: 0;
  fill: #E8F5FB;
}

.meter {
  stroke-width: 8px;
  stroke: #0294D0;
  fill: none;
  transition: stroke-dashoffset 1s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  transform-origin: center center;
  transform: rotate(-90deg) scaleX(-1);
}

text {
  fill: #4D4D4D;
  font-weight: bold;
}

/* ------------------------------------ End Report ------------------------------------ */

/* --Phone Style */
@media (max-width: 900px) {
  [data-ui=background] {
    background-position: 50% 25%;
  }
  /* ----------------------------------- Report Style ----------------------------------- */
  .battery {
    padding: 2px 5px;
    border: solid thin #FFF;
    position: relative;
    background-color: #CCEAF6;
    border-radius: 11.08px;
    width: fit-content;
  }

  .container-progress {
    padding-bottom: 0rem;
  }

  .bar:first-child {
    border-radius: 11.08px 0px 0px 11.08px;
  }

  .bar:last-child {
    border-radius: 0px 11.08px 11.08px 0px;
  }

  .bar {
    /* cursor: pointer; */
    display: inline-block;
    width: 0;
    border: solid thin rgba(255, 255, 255, .1);
    padding: 7px;
    background: transparent;
    transition: background 1s;
  }

  .bar.active {
    background: #027BAD;
  }

  .container-outer {
    display: flex;
    height: 95%;
    flex-direction: column;
    align-items: center;
  }

  .container-chart {
    background-color: #fff;
    padding: 1rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .circle-progress-value {
    stroke: var(--color-circle);
  }

  .circle-progress {
    width: 150px;
    height: auto;
  }

  .img {
    width: 100%;
  }

  .img-logo {
    float: right;
    margin-bottom: 1rem;
    width: 90px;
  }

  .container-chart svg {
    display: inline-flex;
    vertical-align: bottom;
    width: 10rem;
  }

  circle {
    stroke: #abe7ff;
    stroke-width: 5px;
    stroke-dasharray: 0;
    fill: #E8F5FB;
  }

  .meter {
    stroke-width: 8px;
    stroke: #0294D0;
    fill: none;
    transition: stroke-dashoffset 1s cubic-bezier(0.43, 0.41, 0.22, 0.91);
    transform-origin: center center;
    transform: rotate(-90deg) scaleX(-1);
  }

  text {
    fill: #4D4D4D;
    font-weight: bold;
  }

  /* ------------------------------------ End Report ------------------------------------ */
  .text-box [data-content=dialog] {
    padding: 0 3rem 0 1rem;
  }

  a:nth-child(2) .opt-item {
    padding: 0.9rem 1.8rem;
  }

  [alt=Handbook] {
    padding-bottom: 0.7rem;
  }

  .lanjut-new-input {
    bottom: 0 !important;
    right: .5rem !important;
  }

  .boom-blast {
    position: absolute;
    width: 50px !important;
    left: 0;
    bottom: 0;
    height: auto !important;
  }

  .dynamite-1 {
    left: -1rem;
    width: 6rem !important;
    height: auto !important;
  }

  /* ------------------------------------- Carousel ------------------------------------- */
  .slideshow-container {
    max-width: 500px;
    position: absolute;
    margin: auto;
  }

  /* Hide the images by default */
  .mySlides {
    display: none;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    width: auto;
    height: 10px;
    padding: 1px 7px;
    color: #fff;
    background-color: #0294D0;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 50%;
    text-align: center;
    user-select: none;
  }

  /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: #005a7d;
  }

  /* Caption text */
  .container-text {
    color: #000;
    font-size: 9px;
    padding: 8px 12px;
    width: 100%;
    background-color: #CCEAF6;
    margin: 0 0 0 1rem;
    border-radius: 20px;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: inherit;
    font-size: inherit;
    padding: 8px 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  /* .active,
  .dot:hover {
    background-color: #717171;
  } */

  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  .container-slide {
    display: flex;
    align-items: flex-start;
    background-color: #ABDBEF;
    padding: 20px;
    box-shadow: 0 .3em #0294D0;
    border-radius: 20px;
  }

  .img-slide {
    width: 7rem;
  }

  .container-button {
    position: absolute;
    bottom: 0.6rem;
    right: 1.3rem;
  }

  .wrapper-button {
    margin: .7rem 0;
  }

  .button-play-game {
    background-color: #0294D0;
    cursor: pointer;
    font-weight: bolder;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.2rem 0.3rem !important;
    font-size: 12px !important;
    box-shadow: 0 .2em #01638B, 0 .4em #fff, 0 .6em #ccc;
  }

  .button-play-game:hover {
    background-color: #007aaa;
  }

  .button-play-game:active {
    top: .2em;
    position: relative;
    box-shadow: 0 .2em #fff, 0 .4em #ccc;
  }

  @keyframes fade {
    from {
      opacity: .4
    }

    to {
      opacity: 1
    }
  }

  /* -------------------------------- Game In Revegetasi -------------------------------- */
  .row-trees {
    display: flex;
    width: 45%;
    height: 75%;
    flex-wrap: wrap;
    /* margin-top: calc(1.5rem * -1); */
    margin-right: calc(1.5rem * -0.5);
    margin-left: calc(1.5rem * -0.5);
    position: absolute;
    right: 2rem;
    top: -8px;
    align-items: stretch;
    justify-content: space-around;
  }

  .container-trees-answ {
    flex: 0 0 auto;
    padding: 0.5rem;
    width: 34%;
    background: #ABDBEF;
    box-shadow: 0 .2em #0294D0;
    border-radius: 20px;
    margin: 0.3rem 0;
  }

  .trees-answ {
    width: 100%;
    height: 100%;
    background-color: #fff !important;
    padding: 0;
    color: #000 !important;
  }

  /* --------------------------------- Button In Game 3 --------------------------------- */
  .container-btn-game-3 {
    display: flex;
    bottom: 3.3rem !important;
    align-items: stretch;
    right: 1.3rem !important;
    justify-content: space-evenly;
    width: 35% !important;
  }

  /* ------------------------------- End Button In Game 3 ------------------------------- */

  /* -------------------------------- Input Quest Quarry -------------------------------- */
  .container-input-blasting {
    position: absolute;
    top: 3.1rem;
    right: 14.7rem;
  }

  .container-input-blasting-1 {
    /* display: flex;
    flex-direction: column;
    align-items: center; */
  }

  .container-input-blasting-1 button {
    font-size: .7rem !important;
    padding: .2rem .8rem;
  }

  .container-input-blasting-1 input {
    text-align: center;
    font-size: .9rem;
  }

  /* ------------------------------ End Input Quest Quarry ------------------------------ */

  .button-center {
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    width: fit-content !important;
  }

  /* ---------------------------------- Quary Game NEW ---------------------------------- */
  #quarry-game {
    background: url(./new-assets/game2/bg-drill-game.png);
    height: 100%;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
  }

  .position-drill {
    position: absolute;
    top: 3.5rem;
  }

  #position-2-game {
    right: 4rem;
    /* transform: scaleX(-1); */
  }

  .container-waktu {
    position: absolute;
    text-align: center;
    left: 3rem;
    user-select: none;
  }

  .container-waktu p {
    margin: .2em 0;
  }

  .container-waktu p:first-child {
    color: #F2BB22;
    text-shadow: 0px 1px 0px #FFFFFF;
    font-weight: 500;
    font-size: large;
    line-height: 30px;
  }

  .container-waktu p:last-child {
    color: #A17D17;
    font-weight: 500;
    font-size: large;
    background: #FBE8B5;
    border-radius: 20px;
    padding: .5rem 1rem;
  }

  .drill-btn {
    color: #fff;
    font-weight: 600;
    position: absolute;
    top: 16rem;
    right: 2rem;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background-color: #00CC2D;
    border: none;
    cursor: pointer;
    box-shadow: 0 .2em #00881e, 0 .4em #fff, 0 .6em #ccc;
    transition: none;
  }

  .drill-btn:hover {
    background-color: #00CC2D;
    transition: none;
  }

  .drill-btn:active {
    right: 2rem;
    box-shadow: 0 .2em #fff, 0 .4em #ccc;
    transition: none;
    top: 16.2rem;
  }

  .blasting-btn {
    color: #fff;
    font-weight: 600;
    position: absolute;
    top: 16rem;
    right: 7rem;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background-color: #ccc;
    border: none;
    cursor: not-allowed;
    box-shadow: 0 .2em #aaa, 0 .4em #fff, 0 .6em #ccc;
  }

  .blasting-btn:hover {
    background-color: #ccc;
  }

  .blast-red:active {
    right: 7rem;
    box-shadow: 0 .2em #fff, 0 .4em #ccc;
    top: 16.2rem;
  }

  .container-btn-game2 {
    position: relative;
  }

  .blast-red {
    background-color: #CC0000;
    box-shadow: 0 .2em #880000, 0 .4em #fff, 0 .6em #ccc;
    cursor: pointer;
  }

  .blast-red:hover {
    background-color: #CC0000;
  }

  .container-btn-game2 button {
    font-size: 0.7rem;
  }

  #position-1-game {
    left: 8rem;
  }

  .position-drill img {
    width: 12rem;
    height: 16rem;
  }

  /* ---------------------------------- End Quarry Game --------------------------------- */
  .position-question-1 {
    width: 19% !important;
    right: 5rem !important;
    top: -13rem !important;
  }

  .position-job {
    width: 20% !important;
    right: 2rem !important;
    top: -12rem !important;
  }

  .location1 {
    font-size: calc(0.75em + 1vmin);
  }

  .stage {
    font-size: 14px;
  }

  #fullmode {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    height: 25px;
    width: 25px;
  }

  #fullmode1 {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    height: 25px;
    width: 25px;
  }

  .container-drills-2 {
    position: absolute;
  }

  .container-drills-1 {
    top: 0 !important;
    right: 29px !important;
  }

  #charcoal-way {
    position: absolute;
    width: 100%;
    bottom: 22%;
    height: 27%;
  }

  .charcoal {
    width: 1.5%;
    position: absolute;
    left: 0;
    bottom: 0;
    animation: load 1s ease infinite;
    -webkit-animation: load 1s ease;
  }

  @keyframes load {
    0% {
      left: 0;
    }

    50% {
      left: 60px;
    }

    100% {
      left: 60px;
      bottom: 20px;
      display: none;
    }
  }

  [data-ui="say"] {
    font-size: 13px;
  }

  .text_answer {
    pointer-events: none;
  }

  .circle1 {
    transition: 0.5s all linear;
    display: flex;
    position: relative;
    width: 91px;
    height: 91px;
    background-color: black;
    border-radius: 50%;
    text-align: center;
    margin-right: 48px;
    justify-content: center;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  p.text {
    margin: 0;
    font-size: 15px;
    color: white;
    vertical-align: middle;
    height: 100%;
    display: flex;
    align-items: center;
  }

  div.arrow {
    width: 6vmin;
    height: 6vmin;
    box-sizing: border-box;
    position: absolute;
    right: -25px;
    top: 38%;
    transform: rotate(45deg);
  }

  div.arrow::before {
    content: "";
    width: 100%;
    height: 100%;
    border-width: 10px 10px 0 0;
    border-style: solid;
    top: 50%;
    right: 20px;
    border-color: #ff0000;
    transition: 0.2s ease;
    display: block;
    transform-origin: 100% 0;
  }

  div.arrow:after {
    content: "";
    float: left;
    position: relative;
    top: 50%;
    right: 20px;
    width: 100%;
    height: 100%;
    border-width: 0 0 0 0;
    border-style: solid;
    border-color: #ff0000;
    transform-origin: 100% 0;
    transition: 0.2s ease;
  }

  div.arrow:hover::after {
    transform: rotate(45deg);
    border-color: orange;
    height: 120%;
  }

  div.arrow:hover::before {
    border-color: orange;
    transform: scale(0.8);
  }

  [data-content="text"] {
    scroll-behavior: smooth;
  }

  .text-box-large-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-large-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 1%;
    left: 15%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /* max-height: 25%; */
    /* overflow: hidden; */
    width: 57%;
    z-index: 10;
    text-align: left;
    /* height: auto; */
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
  }

  .wrapper-text {
    height: 50%;
    display: flex;
    align-items: flex-start;
  }

  .poster-card {
    width: 90%;
    display: flex;
    flex-direction: column;
  }

  .left-mid {
    left: 10%;
    top: 0;
  }

  .wrappers {
    width: 100%;
    height: 100%;
    border-bottom: solid 2px black;
    border-right: 2px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 2%;
  }

  .wrappers1 {
    width: 100%;
    height: 100%;
    border-bottom: solid 2px black;
    border-right: 2px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    perspective: 1000px;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  }

  /* #flip-card-inner {
		transform: rotateY(180deg);
	} */

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .flip-card-front {
    background-color: #bbb;
    color: black;
  }

  .flip-card-back {
    background-color: #2980b9;
    color: white;
    transform: rotateY(180deg);
  }

  .scene {
    width: 200px;
    height: 260px;
    border: 1px solid #ccc;
    margin: 40px 0;
    perspective: 600px;
  }

  .card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
  }

  .card.is-flipped {
    transform: rotateY(180deg);
  }

  .card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .card__face--front {
    background: red;
  }

  .card__face--back {
    background: blue;
    transform: rotateY(180deg);
  }

  .fire {
    position: absolute;
    left: 29px;
    transform: translate(50%, 0);
    top: 40%;
    width: 5%;
  }

  .boiler {
    width: 120px;
    position: absolute;
    left: 0;
  }

  .spinner {
    position: absolute;
    width: 150px;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: 0.5s all linear;
    left: 21%;
  }

  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }

  .load {
    width: 100%;
    margin: 2px 0px;
    height: 25%;
    text-align: center;
  }

  .container-boiler {
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
  }

  .container-game-boiler {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 26%;
  }

  .inital {
    height: 0;
  }

  #app {
    margin: 0 auto;
    width: 47%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
  }

  .grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    z-index: 100;
    top: 3px;
    right: 0;
  }

  .grid-item {
    width: 90%;
    height: 90%;
    margin: 5px;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .grid-item[draggable] {
    user-select: none;
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    cursor: move;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
      0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

  .grid-item[draggable].drag--hover {
    color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.14);
    transform: scale(0.8);
    transition: 0.3s ease-out;
  }

  .grid-item[draggable].drag--moving {
    opacity: 0.4;
  }

  [data-header] {
    position: relative;
  }

  [data-header]:before {
    content: attr(data-header);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 2em;
  }

  .col-img-tree {
    padding: 5px;
    border: 2px solid black;
    width: 160px;
    margin: 3px;
    text-align: center;
    height: 85%;
    overflow-y: auto;
  }

  .img-col-tree {
    width: 50%;
  }

  .body-text {
    font-size: smaller;
    text-align: left;
  }

  .head-text {
    font-size: smaller;
  }

  choice-container [data-content="wrapper"] {
    display: flex;
    width: 88%;
    justify-content: space-between;
    /* flex-direction: column */
  }

  .con-truck {
    margin-top: 40px;
    margin-bottom: 50px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-right: 100px;
  }

  .con-truck-1 {
    margin-top: 40px;
    margin-bottom: 50px;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .img {
    width: 135px;
  }

  .img-1 {
    width: 130px;
  }

  .drill {
    width: 15px;
    z-index: 1;
    margin: 0px;
    /* animation-name: example;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-direction: normal; */
  }

  .drill-1 {
    width: 15px;
    z-index: 1;
    margin: 0px;
    /* animation-name: example;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-direction: normal; */
  }

  @keyframes example {
    from {
      transform: rotateY(0deg);
    }

    to {
      transform: rotateY(360deg);
    }
  }

  .con-btn {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .con-drill {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60px;
  }

  .con-drill-1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60px;
  }

  hr:not([size]) {
    height: 5px;
    opacity: 1;
    width: 100px;
    border: none;
  }

  #target-1 {
    position: absolute;
    right: 69%;
    /* bottom: 37%; */
  }

  #target-2 {
    position: absolute;
    right: 10%;
  }

  .container-drill {
    height: 100vh;
    background-image: url("./new-assets/game2/bg-drill-game.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: bottom;
  }

  .bg-danger {
    background-color: red;
  }

  .bg-success {
    background-color: green;
  }

  .blast-1 {
    transition: all 0.3s;
    position: absolute;
    top: -80px;
    width: 100px;
  }

  .blast-2 {
    transition: all 0.3s;
    position: absolute;
    top: -80px;
    width: 100px;
  }

  .m-0 {
    margin: 0;
  }

  .appear {
    right: 0;
    opacity: 1 !important;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
  }

  .game-pad {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* top: 100vh; */
    bottom: 22px;
    left: auto;
    right: 40px;
    width: 10%;
    justify-content: space-evenly;
    height: 40%;
  }

  .gamepad-rl {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .gamepad {
    margin: 5px;
  }

  .btn-gamepad {
    text-align: center;
    background-color: #0294d000;
    width: 100%;
    height: 100%;
    color: #bababa;
    border-radius: none;
    border: none;
    padding: 10px 10px;
    font-size: 59px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select:none;
    user-select:none;
    -o-user-select:none;
  }

	.btn-gamepad:hover {
		background-color: unset !important;
  	}

  .img-col {
    width: 100px;
    height: 171px;
    object-fit: contain;
    position: static;
  }

  .col-img {
    border: solid 2px black;
    margin: 0 2px;
    width: 20vw;
    display: flex;
    height: 100%;
    /* flex-wrap: wrap; */
    flex-direction: column;
    align-items: center;
    padding: 6px;
    justify-content: space-between;
  }

  .text-img {
    text-align: center;
    font-size: 2vw;
  }

  .selection-right {
    position: absolute;
    z-index: 100;
    width: 16%;
  }

  .selection {
    position: absolute;
    z-index: 100;
    width: 66px;
    top: 5%;
  }

  .container-flip {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    width: 47%;
    right: 0;
    height: 100%;
  }

  .container-flip-reverse {
    display: flex;
    position: absolute;
    top: 0;
    width: 47%;
    right: 0;
    height: 100%;
  }

  .image-flip {
    width: 100%;
    position: static;
    height: 100%;
    max-height: 100% !important;
  }

  .flip-card {
    width: 100% !important;
    height: 100% !important;
  }

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card-1 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-2 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-3 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-4 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-5 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  .flip-card-6 {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }

  /* This container is needed to position the front and back side */
  .flip-card-inner-1 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-1:hover .flip-card-inner-1 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-1,
  .flip-card-back-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-1 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-1 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ================================================ */

  .flip-card-inner-2 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    -webkit-transition: transform 0.8s;
    -moz-transition: transform 0.8s;
    -ms-transition: transform 0.8s;
    -o-transition: transform 0.8s;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-2:hover .flip-card-inner-2 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-2,
  .flip-card-back-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-2 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-2 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ================================ */

  .flip-card-inner-3 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-3:hover .flip-card-inner-3 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-3,
  .flip-card-back-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-3 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-3 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ============================================= */

  .flip-card-inner-4 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    -webkit-transition: transform 0.8s;
    -moz-transition: transform 0.8s;
    -ms-transition: transform 0.8s;
    -o-transition: transform 0.8s;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-4:hover .flip-card-inner-4 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-4,
  .flip-card-back-4 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-4 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-4 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* ==================================== */

  .flip-card-inner-5 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-5:hover .flip-card-inner-5 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-5,
  .flip-card-back-5 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-5 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-5 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* =========================== */

  .flip-card-inner-6 {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card-6:hover .flip-card-inner-6 {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-card-front-6,
  .flip-card-back-6 {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
  }

  /* Style the front side (fallback if image is missing) */
  .flip-card-front-6 {
    background-color: #bbb;
    color: black;
  }

  /* Style the back side */
  .flip-card-back-6 {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }

  /* =================================== */

  .cont-input {
    text-align: center;
    z-index: 1000;
    color: white;
    height: 20px;
    /* position: absolute; */
    bottom: 73px;
    left: 10px;
  }

  .inputs {
    color: black;
    width: 60%;
  }

  .text-box [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box {
    box-shadow: 0 .1em #81CAE8;
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: auto;
    bottom: 9%;
    left: 3%;
    border: 5px solid #cceaf6;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: #fff;
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    width: 95%;
    z-index: 10;
    text-align: left;
    color: #000;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .textbox-right [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .textbox-right {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    left: 54%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 45%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-right-small [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-small {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 33%;
    left: 66%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 24%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 32%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left-small [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left-small {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 52%;
    left: 0%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 34%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 32%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .boxes {
    background-color: white;
    position: absolute;
    left: 9px;
    top: 0;
    text-align: left;
    width: 50%;
    border-bottom: solid 2px black;
    border-left: solid 2px black;
    padding: 7px;
    font-size: x-small;
  }

  .text-box-right-medium [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-medium {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 53%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 33%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .right-medium [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .right-medium {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 45%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 33%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .w-42 {
    width: 38% !important;
  }

  .w-100 {
    width: 100% !important;
  }

  .w-45 {
    width: 45% !important;
  }

  .w-43 {
    width: 43% !important;
    height: 69% !important;
  }

  .w-h {
    width: 35% !important;
    height: 75%;
  }

  .w {
    width: 29% !important;
    height: 96% !important;
  }

  .w-30 {
    width: 30% !important;
  }

  .w-36 {
    width: 36% !important;
  }

  .w-37 {
    width: 37% !important;
  }

  .text-box-right [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 3%;
    left: 38%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 52%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-right-long [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-long {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 16%;
    left: 70%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 29%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-right-large [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-large {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    right: 5px;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-top [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-top {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 7%;
    left: 25%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-bottom [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-bottom {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 62%;
    left: 25%;
    display: grid;
    -ms-grid-columns: auto minmax(23%, 1fr);
    grid-template-columns: auto minmax(23%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 9px 12px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-bottom-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-bottom-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 33%;
    left: 44%;
    font-size: small;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 49%;
    padding: 0px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 54%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-top-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-top-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    left: 40%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 49%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 40%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 49%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left-bottom [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 61%;
    border: 1px solid black;
    text-align: left;
    padding: 0px 2px;
    height: 43%;
  }

  .text-box-right-bottom {
    position: absolute;
    width: 35%;
    text-align: left;
    right: 0;
    background: rgba(0, 0, 0, 0.74);
    color: white;
    border-radius: 5px;
    padding: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
  }

  .text-box-left-top p {
    padding: 3px 5px;
    margin: 0;
    font-size: 4.3vh;
  }

  .text-box-left-bottom {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 44%;
    left: 0%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 60%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 51%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-left-large [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-left-large {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 3%;
    left: 1%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 57%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-box-large [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-large {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 1%;
    left: 25%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /* max-height: 25%; */
    /* overflow: hidden; */
    width: 57%;
    z-index: 10;
    text-align: left;
    /* height: auto; */
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
  }

  .text-box-larger [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-larger {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 1%;
    left: 2%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 77%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
  }

  .text-box-medium-bottom [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-medium-bottom {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 33%;
    left: 2%;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: 66%;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 50%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
  }

  .text-box-right-wide [data-content="text"] {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100%;
  }

  .text-box-right-wide {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 4%;
    right: 5px;
    display: grid;
    -ms-grid-columns: auto minmax(70%, 1fr);
    grid-template-columns: auto minmax(70%, 1fr);
    -ms-grid-rows: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header""side-image text";
    background-color: var(--main-color);
    min-height: 10%;
    max-height: max-content;
    padding: 5px 2px;
    /*max-height: 25%;
		*/
    /*overflow: hidden;
		*/
    width: 69%;
    z-index: 10;
    text-align: left;
    /*height: auto;
		*/
    bottom: 0;
    color: #fff;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .cont-inputbox {
    z-index: 100;
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 0 0 5% 0;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Hide the browser's default checkbox */
  .cont-inputbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox */
  .check {
    text-align: center;
    position: absolute;
    top: 0;
    left: -55px;
    height: 25px;
    width: 155px;
    background-color: #eee;
    font-size: 4.6vh;
    padding: 2px 5px;
  }

  /* On mouse-over, add a grey background color */
  .cont-inputbox:hover input~.check {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .cont-inputbox input:checked~.check {
    background-color: #2196f3;
  }

  /* Create the check/indicator (hidden when not checked) */
  .check:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the check when checked */
  .cont-inputbox input:checked~.check:after {
    display: block;
  }

  .check-right {
    text-align: center;
    position: absolute;
    top: 0;
    right: -7px;
    height: 25px;
    width: 118px;
    background-color: #eee;
    font-size: small;
    padding: 2px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid black;
    box-shadow: 2px 2px 2px gray;
  }

  /* On mouse-over, add a grey background color */
  .cont-inputbox:hover input~.check-right {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .cont-inputbox input:checked~.check-right {
    background-color: #2196f3;
  }

  /* Create the check/indicator (hidden when not checked) */
  .check-right:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the check when checked */
  .cont-inputbox input:checked~.check-right:after {
    display: block;
  }

  .text-box p {
    margin: 12px 0;
  }

  /* Button Lanjut */
  .lanjut-new {
    background-color: #0294D0 !important;
    border-radius: 50%;
    width: 25px !important;
    height: 25px !important;
    position: absolute;
    bottom: 1.7rem;
    right: 2.3rem;
    border: none !important;
    padding: 7px !important;
  }

  .lanjut-new:before {
    content: url("./new-assets/image/arrow.png");
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
  }

  /* End Button Lanjut */

  /* Checkbox new */
  .container-checkbox {
    position: absolute;
    bottom: 4rem;
    display: flex;
    height: 16%;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
  }

  .item-checkbox {
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
    position: relative;
    margin: 0.2rem;
    cursor: pointer;
    text-align: left;
    width: 30%;
    background-color: #2CA6D8;
    padding: 0.3rem 0rem 0.3rem 2.2rem;
    border-radius: 12px;
    color: #fff;
    font-size: .8rem;
  }

  .item-checkbox input[type="checkbox"] {
    opacity: 0;
  }

  .item-checkbox:hover input~.checkbox-custom {
    background-color: #aaa;
  }

  .checkbox-custom:after {
    content: "";
    position: absolute;
    display: none;
  }

  .item-checkbox input:checked~.checkbox-custom:after {
    display: block;
  }

  .item-checkbox .checkbox-custom:after {
    left: 31%;
    top: 10%;
    width: 5px;
    height: 10px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .checkbox-custom {
    position: absolute;
    width: 15px;
    height: 15px;
    left: 1rem;
    top: 0.3rem;
    box-shadow: 0 .1em #01638B;
    background-color: #eee;
    border-radius: 2px;
  }

  [data-component="choice-container"] button {
    font-size: .7rem;
  }

  #btn {
    width: 100%;
    box-shadow: 0 .1em #01638B, 0 .2em #fff, 0 .3em #ccc;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15);
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
  }

  #btn:hover {
    background-color: #008fcc;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
  }

  #btn:active {
    box-shadow: 0 .1em #fff, 0 .2em #ccc;
    position: relative;
    top: .2em;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
  }

  /* END Checkbox New */

  /* New Frames Images */
  .frame-new-images {
    width: 11rem !important;
    background: #ABDBEF;
    position: absolute;
    margin: 0 !important;
    top: 3rem !important;
    right: 2rem !important;
    left: auto !important;
    padding: 0.6rem;
    border-radius: 20px;
    box-shadow: 0 0.2em #0294d0;
  }

  /* End New Frames Images */

  .input-custom {
    /* position: absolute; */
    display: block;
    padding: .3rem 0;
    bottom: 1.6rem;
    width: 85%;
    left: 2.2rem;
    border-bottom: solid 1px black;
    background-color: transparent;
    color: black;
  }

  /* Show Modul */
  .explain-opt {
    padding: 0;
    position: absolute;
    top: 0;
    right: 5%;
    /* display: flex; */
  }

  .explain-opt-right {
    padding: 1rem;
    position: absolute;
    top: 0;
    right: 5%;
    background: #eee;
  }

  .opt-item img {
    width: 3rem;
  }

  .opt-item p {
    color: #01638B !important;
    font-size: .9rem;
  }

  .opt-item {
    padding: .5rem;
    margin: .5rem;
    background-color: #ABDBEF;
    border: 3px solid white;
    border-radius: 20px;
    box-shadow: 0 0.2em #ccc;
    color: #01638B !important;
  }

  .text-white {
    color: #fff !important;
  }

  /* End show modul */

  /* POS NEW */
  .container-pos {
    display: flex;
    position: absolute;
    z-index: -1;
    top: 3rem;
    background-color: #fff;
    box-shadow: 0 0.2em #ccc;
    border-radius: 20px;
    padding: 1rem;
  }

  .circle-pos {
    transition: 0.5s all linear;
    display: flex;
    position: relative;
    width: 7rem;
    height: 7rem;
    background-color: #0294D0;
    box-shadow: 0 0.2em #fff, 0 0.3em #ccc;
    border-radius: 50%;
    text-align: center;
    margin-right: 90px;
    justify-content: center;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  .text-circle-pos {
    margin: 0;
    font-size: 16px;
    color: white;
    vertical-align: middle;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .arrow-pos {
    width: 6vmin;
    height: 6vmin;
    box-sizing: border-box;
    position: absolute;
    right: -60px;
    top: 38%;
    transform: rotate(45deg);
    border-radius: 20px;
  }

  .arrow-pos::before {
    content: "";
    width: 100%;
    height: 100%;
    border-width: 10px 10px 0 0;
    border-style: solid;
    top: 50%;
    right: 20px;
    border-color: #81CAE8;
    transition: 0.2s ease;
    display: block;
    transform-origin: 100% 0;
    border-radius: 8px 8px 6px 4px;
  }

  /* END POS NEW */

  /* Petunjuk Frame New */
  .section-instruction {
    position: absolute;
    top: 0rem;
    text-align: left;
    width: 63%;
    right: 6rem;
    background-color: #ABDBEF;
    border-radius: 20px;
    box-shadow: 0 0.3em #0294d0;
    padding: 1rem;
    text-align: center;
  }

  .section-inner-instruction {
    padding: 0.3rem;
    background-color: #CCEAF6;
    border-radius: 20px;
    font-size: 16px;
    text-align: left;
  }

  .header-instruction {
    padding: 0.5rem;
    background-color: #0294D0;
    border-radius: 20px;
    font-size: 12px;
    width: fit-content;
    color: #fff;
  }

  .instruction {
    margin: 8px 0;
  }

  ol.instruction li {
    font-size: 13px;
    display: list-item;
    list-style-type: decimal;
  }

  .to-play-game {
    border-radius: 40px;
    background-color: #0294D0;
    margin-top: .7rem !important;
    box-shadow: 0 .2em #01638B, 0 .4em #fff;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
  }

  .to-play-game:active {
    box-shadow: 0 .2em #fff;
    position: relative;
    top: .2em;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
  }

  /* End Petunjuk Frame */

  /* Frame Stone New */
  .stone-spec-container {
    color: #000;
    position: absolute;
    text-align: start;
    display: flex;
    justify-content: center;
    width: 80% !important;
    left: 8rem !important;
    top: -1rem;
  }

  .section-stone-inner {
    width: 25%;
    background: #fff;
    margin: 1rem;
    border: 1rem solid #ABDBEF;
    border-radius: 20px;
    box-shadow: 0 0.2em #0294D0;
    text-align: center;
    padding: 0.5rem;
  }

  .section-stone-image {
    text-align: center;
    padding: 1.1rem;
  }

  .image-stone-spec {
    position: static;
    width: 50%;
  }

  .name-stone-spec {
    margin: 0 0 0.5rem 0;
  }

  .section-stone-spec {
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: 0.8rem;
  }

  .item-spec-stone {
    display: flex;
    font-size: 0.8rem;
    justify-content: space-between;
  }

  .item-spec-stone p {
    margin: 0.2rem 0;
  }

  /* END Frame Stone New */

  /* Draggable New */
  .draggable-item {
    background-color: #2CA6D8;
    padding: 0.6rem 1.1rem;
    border-radius: 12px;
    color: #fff;
    cursor: move;
  }

  .container-dragger {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin-bottom: 3rem;
  }

  .draggable-item:before {
    background-image: url(./new-assets/image/icon-drag.svg);
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
    margin: -0.2rem 0.3rem;
  }

  .drag--hover {
    background-color: #01638B;
  }

  #btn-drag {
    box-shadow: 0 0.1em #01638b, 0 0.2em #fff, 0 0.3em #ccc;
    transition: none;
    -webkit-transition: none;
    border-radius: 40px;
  }

  .container-btn-drag {
    bottom: 11px;
    position: absolute;
  }

  #btn-drag:active {
    box-shadow: 0 .1em #fff, 0 .2em #ccc;
    position: relative;
    top: .1em;
    transition: none;
    -webkit-transition: none;
  }

  /* End Draggable New */

  /* Global Button Game */
  .btn-game-style {
    box-shadow: 0 0.1em #01638b, 0 0.2em #fff, 0 0.3em #ccc;
    border-radius: 40px;
    padding: 5px 23px;
    width: fit-content;
    height: fit-content;
    transition: none;
    -webkit-transition: none;
  }

  .btn-game-style:active {
    box-shadow: 0 .1em #fff, 0 .2em #ccc;
    position: relative;
    top: .1em;
    transition: none;
    -webkit-transition: none;
  }

  /* End Global Button Game */

  /* Modal Custom New */
  .success-header {
    color: #00CC2D;
  }

  .fail-header {
    color: #FF8310;
  }

  .modal-custom {
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    background-color: #fefefe;
    position: absolute;
    border-radius: 20px;
    padding: 10px;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.2em #ccc;
  }

  .modal-title {
    position: absolute;
    top: -2rem;
    left: 8rem;
    border-radius: 12px;
    color: #FFF;
    padding: 14px 20px;
    text-transform: uppercase;
  }

  .fail-modal {
    border: 1px solid #880000;
    text-shadow: 0 2px 0 #880000;
    background: #CC0000;
  }

  .success-modal {
    border: 1px solid #00CC2D;
    text-shadow: 0 2px 0 #00CC2D;
    background-color: #00CC2D;
  }

  /* End Modal Custom New */

  /* Score Game 1 */
  #scoreBoard {
    position: absolute;
    top: 1rem;
    left: 6rem;
    user-select: none;
    display: flex;
    align-items: center;
  }

  #scoreBoard p {
    margin: 0 1rem 0 0;
    font-weight: 700;
  }

  #text-on-score {
    text-shadow: none;
    color: #000;
  }

  #scoreText {
    padding: 0.3rem 2rem;
    border-radius: 20px;
    background-color: #FBE8B5;
    color: #A17D17;
  }

  .collectible-container {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.75);
    display: flex;
    position: absolute;
    top: .6rem;
    right: 1rem;
    width: 45%;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    justify-content: space-between;
    align-items: flex-end;
  }

  .collectible-item img {
    width: 80%;
  }

  .collectible-item:first-child img,
  .collectible-item:last-child img {
    width: 100%;
  }

  .collectible-item {
    display: flex;
    text-align: center;
    width: 24%;
    align-items: Flex-end;
    color: #A17D17;
    font-weight: 700;
  }

  .collectible-item p {
    margin: 0;
  }

  /* End Score Game 1 */
}

/* End Checkbox */

/* Style for Centered Text */
[data-component="centered-dialog"] {}

/* Character Images Styles */
[data-screen="game"] [data-character] {}

/* Other Images Styles */
[data-screen="game"] [data-image] {}

/**
 * ===========================
 * Quick Menu Styling
 * ===========================
**/

/* These styles are applied to the Mobile version of the Quick Menu */

/* Quick Menu Style */
[data-component="quick-menu"] {}

/* Quick Menu Buttons Style */
[data-component="quick-menu"] span {}

/* Quick Menu Buttons Style on Hover */
[data-component="quick-menu"] span:hover {}

/* Quick Menu Buttons Icon Style */
[data-component="quick-menu"]>span>.fa {}

/**
 * ===========================
 * Range Styling
 * ===========================
**/

/* Use the background property to set a color for these */
input[type="range"]:focus::-webkit-slider-runnable-track {}

input[type="range"]::-webkit-slider-runnable-track {}

input[type="range"]:focus::-ms-fill-upper {}

input[type="range"]:focus::-ms-fill-lower {}

input[type="range"]::-moz-range-track {}

input[type="range"]::-ms-fill-lower {}

input[type="range"]::-ms-fill-upper {}

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
  /* Styles for the desktop version of the Quick Menu */

  /* Quick Menu Style */
  [data-component="quick-menu"] {}

  /* Quick Menu Buttons Style */
  [data-component="quick-menu"] span {}

  /* Quick Menu Buttons Style on Hover */
  [data-component="quick-menu"] span:hover {}
}

/** Medium Devices, Tablets (992px)**/

@media screen and (max-width: 900px) {
  [data-ui="who"] {
    /* display: none; */
    position: absolute;
    top: -1.6rem;
    background-color: #0294D0;
    box-shadow: 0 .2em #027bad;
    font-weight: bold;
    width: auto;
    text-align: center;
    border-radius: 20px;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 0.3rem 0.6rem;
  }
}

@media (max-width: 600px) {
  .circle1 {
    transition: 0.5s all linear;
    display: flex;
    position: relative;
    width: 80px;
    height: 80px;
    background-color: black;
    border-radius: 50%;
    text-align: center;
    margin-right: 48px;
    justify-content: center;
    -webkit-transition: 0.5s all linear;
    -moz-transition: 0.5s all linear;
    -ms-transition: 0.5s all linear;
    -o-transition: 0.5s all linear;
  }

  p.text {
    margin: 0;
    font-size: 13px;
    color: white;
    vertical-align: middle;
    height: 100%;
    display: flex;
    align-items: center;
  }

  div.arrow {
    width: 6vmin;
    height: 6vmin;
    box-sizing: border-box;
    position: absolute;
    right: -25px;
    top: 38%;
    transform: rotate(45deg);
  }

  div.arrow::before {
    content: "";
    width: 100%;
    height: 100%;
    border-width: 10px 10px 0 0;
    border-style: solid;
    top: 50%;
    right: 20px;
    border-color: #ff0000;
    transition: 0.2s ease;
    display: block;
    transform-origin: 100% 0;
  }

  div.arrow:after {
    content: "";
    float: left;
    position: relative;
    top: 50%;
    right: 20px;
    width: 100%;
    height: 100%;
    border-width: 0 0 0 0;
    border-style: solid;
    border-color: #ff0000;
    transform-origin: 100% 0;
    transition: 0.2s ease;
  }

  div.arrow:hover::after {
    transform: rotate(45deg);
    border-color: orange;
    height: 120%;
  }

  div.arrow:hover::before {
    border-color: orange;
    transform: scale(0.8);
  }
}

/* Notif Rotate */
.container-main-menu {
  background-color: #f7f7f7b8; 
  padding: 4rem; 
  border-radius: 20px;
}
.notif-rotate {
  color: #027BAD;
  background-color: rgba(255, 255, 255, 0.75);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 15rem;
  padding: 1rem;
  border-radius: 20px;
}

.container-notif-rotate {
  width: 100%;
  background: url(../assets/images/bg-ss.jpeg);
  display: flex;
  align-items: center;
}

#petunjuk-tree {
  position: absolute;
  top: 0;
  left: 4rem;
}

@media screen and (max-width: 992px) {
  .container-main-menu {
    padding: 2rem; 
  }
  .notif-rotate {
    margin: 0 1rem;
  }
}

@media (orientation: portrait) {
  .notif-rotate {
    flex-direction: column;
    margin: 0;
  }

  #btn-rotate {
    display: none;
  }
}

#pdf {
  font-size: initial
}

#pdf td, #pdf th {
  border: none;
}

.container-btn-game2 button {
  touch-action: manipulation;
}

button {
  touch-action: manipulation;
}

.btn-download {
  font-size: 17px;
  width: 33%;
}

.btn-download[disabled] {
  background-color: #888;
  box-shadow: 0 0.1em #4e4e4e, 0 0.2em #fff, 0 0.3em #ccc !important;
}

.btn-download[disabled]:active {
  position: static;
}

@media screen and (min-width: 62em) {}

/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {}

/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {}

/* [data-component=my-custom-element] {
	max-height: max-content;
} */