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

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

/* Simple Button styles*/
button {
  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;
}

/* Simple Button Style on Hover */
button:hover {
  background-color: black;
  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;
}

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

/* 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: rgba(255, 255, 255, 0.788);
  color: #000;
  border: 1px solid #000;
  font-weight: bold;
}

/* Choice Button Style on Hover */
[data-component="choice-container"] button:hover {}

/* 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;
  background-color: rgb(0, 0, 0);
  font-weight: bold;
  width: 13%;
  text-align: center;
  border-radius: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  padding: 0.3rem 0.1rem;
}

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

.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("./background-mine.jpg");
  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;
  /* top: 100vh; */
  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: darkslategrey;
  width: 70px;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  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 {
  transition: 0.5s all linear;
  position: absolute;
  display: -ms-grid;
  top: 15%;
  left: 27%;
  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;
}

.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: 40%;
  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: 37%;
  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: 20%;
  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: 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;
}

choice-container [data-content="wrapper"] {
  display: flex;
  width: 70%;
  justify-content: space-between;
  /* 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);
  }
}

.battery {
  position: absolute;
  background-color: #aaa;
  width: 7%;
  height: 25%;
  top: 10px;
  left: 482px;
}

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

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

.btn-certificate {
  margin: 5px auto 2px;
  display: flex;
  width: max-content;
  justify-content: center;
  /* transform: translate(100%, 0); */
  background-color: brown;
  align-items: center;
  padding: 3px 10px;
}

.btn-certificate:hover {
  background-color: rgb(134, 23, 23);
}

/* -> *Tablet Style */
@media (min-width: 901px) and (max-width: 1200px) and (orientation: landscape) {
  .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;
    }
  }

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

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

  .battery {
    position: absolute;
    background-color: #aaa;
    width: 56px;
    height: 130px;
    top: 10px;
    left: 46%;
  }

  .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("./background-mine.jpg");
    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: 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: darkslategrey;
    width: 70px;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
    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-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 {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 27%;
    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;
  }

  .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: 37%;
    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: 40%;
    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: 49%;
    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;
    background-color: white;
    font-weight: bold;
    width: 30%;
    text-align: center;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 0.3rem 0.1rem !important;
  }
}

@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);
  }
}

/* --Phone Style */
@media (max-width: 900px) {
  .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: medium;
  }

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

  .battery {
    position: absolute;
    background-color: #aaa;
    width: 56px;
    height: 130px;
    top: 10px;
    left: 46%;
  }

  .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("./background-mine.jpg");
    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: 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: darkslategrey;
    width: 70px;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
    padding: 10px 10px;
    font-size: 13px;
  }

  .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 {
    transition: 0.5s all linear;
    position: absolute;
    display: -ms-grid;
    top: 15%;
    left: 27%;
    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: min-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;
  }

  .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: 37%;
    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: 40%;
    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: 49%;
    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;
  }
}

/* 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;
    background-color: white;
    font-weight: bold;
    width: 30%;
    text-align: center;
    border-radius: 5px;
    margin-left: 5px;
    margin-bottom: 5px;
    padding: 0.3rem 0.1rem !important;
  }
}

@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);
  }
}

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