.gr-xyx {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr 1fr;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-areas: "col-left col-middle col-right";
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.col-middle {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: col-middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col-left {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: col-left;
}

.col-right {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: col-right;
}

.col-left, .col-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.img-box {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[12];
      grid-template-columns: repeat(12, 1fr);
  -ms-grid-rows: (1fr)[9];
      grid-template-rows: repeat(9, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background: whitesmoke;
}

.img-box {
  height: 60%;
}

.m-tool-picture {
  -ms-grid-row: 2;
  -ms-grid-row-span: 7;
  -ms-grid-column: 3;
  -ms-grid-column-span: 8;
  grid-area: 2 / 3 / 9 / 11;
  -o-object-fit: contain;
     object-fit: contain;
  height: 100%;
  width: 100%;
}

.gr-fordirections {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 150px;
      grid-template-rows: 1fr 150px;
      grid-template-areas: "row-topdirections-area" 
 "row-bottomdirections-area";
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.gr-fordirections .row-topdirections {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: row-topdirections-area;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1.5fr 1fr;
      grid-template-columns: 1fr 1.5fr 1fr;
      grid-template-areas: "col-leftdirections col-middledirections col-rightdirections";
}

.gr-fordirections .row-topdirections .col-middledirections {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: col-middledirections;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gr-fordirections .row-topdirections .col-leftdirections {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: col-leftdirections;
  padding-left: 20px;
}

.gr-fordirections .row-topdirections .col-rightdirections {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: col-rightdirections;
  padding-right: 20px;
}

.gr-fordirections .row-topdirections .col-leftdirections, .gr-fordirections .row-topdirections .col-rightdirections {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gr-fordirections .row-bottomdirections {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: row-bottomdirections-area;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 50px;
  border: orange 2px solid;
  border-radius: 10px;
}

.img-boxdirections {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.txt-boxdirections {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px black;
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  height: auto;
  font-size: 25px;
  margin-bottom: 10px;
}

.img-boxdirections {
  height: 60%;
}

.left-match {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  -ms-grid-column: 2;
  -ms-grid-column-span: 4;
  grid-area: 3 / 2 / 4 / 6;
  background-color: rgba(0, 0, 0, 0.5);
  background: black;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  border: solid black 1px;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.right-match {
  -ms-grid-row: 7;
  -ms-grid-row-span: 1;
  -ms-grid-column: 8;
  -ms-grid-column-span: 4;
  grid-area: 7 / 8 / 8 / 12;
  background-color: rgba(255, 255, 255, 0.5);
  background: white;
  border: solid black 1px;
  color: black;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* place-items: center; */
  z-index: 2;
}

.right-match, .left-match {
  font-size: var(--font-tablet-big-size);
}

.draggable-item-example {
  padding: 10px;
  width: 180px;
  height: 50px;
  margin-bottom: 10px;
  font-size: 25px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px black;
}

.choice-left {
  background: black;
  color: white;
}

.choice-right {
  background: white;
  color: black;
}

.choice-left, .choice-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-size: var(--font-tablet-big-size);
  width: 180px;
  height: 50px;
  border-radius: 8px;
  border: solid black 1px;
  padding: 2px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 20px;
  z-index: 1100;
}

.keeper-double {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-size: var(--font-tablet-big-size);
  width: 180px;
  height: 50px;
  border-radius: 8px;
  padding: 2px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 20px;
}

.audio-matchbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border: solid blue 1px;
  background: yellow;
  min-height: 60px;
  height: calc(100% - 60px);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.audio-matchbox {
  width: 80%;
  height: 50%;
  font-size: 3rem;
}

.audio-playerbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.audio-playerbox {
  margin-top: 40px;
}

#player {
  width: 80%;
}

.audio-instruction {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -ms-flex-line-pack: center;
      align-content: center;
  justify-self: flex-start;
}

.audio-instruction {
  margin-bottom: 20px;
  font-size: var(--font-tablet-large-size);
}

.wr-matchimage {
  display: -ms-grid;
  display: grid;
      grid-template-areas: "top-image-area"
 "middle-images-area"
 "bottom-image-area";
  -ms-grid-rows: 0px 1fr 150px;
      grid-template-rows: 0px 1fr 150px;
  width: 100%;
}

.wr-matchimage .top-matchimage {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: top-image-area;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 3rem;
}

.wr-matchimage .middle-matchimage {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: middle-images-area;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.wr-matchimage .bottom-matchimage {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: bottom-image-area;
  display: -ms-grid;
  display: grid;
      grid-template-areas: "image-task image-answer";
  -ms-grid-columns: 4fr 1.3fr;
      grid-template-columns: 4fr 1.3fr;
  border: solid orange 2px;
  border-radius: 10px;
  margin: 0px 10px 10px 10px;
}

.wr-matchimage .bottom-matchimage .image-task {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: image-task;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 3rem;
}

.wr-matchimage .bottom-matchimage .image-answer {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: image-answer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-size: 50px;
  width: 100%;
  height: 100%;
}

.image-outer-frame {
  outline: 2px solid rgba(54, 86, 132, 0.75);
  outline-offset: -5px;
  padding: 5px;
}

.image-inner-frame {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

.boxxx {
  width: calc((100/3) * 1%);
  /* width: 100px; */
  /* height: 50px; */
  padding-bottom: calc((100/3) * (1080/1920) * 1%);
  /* padding-bottom: 80px; */
  margin-bottom: 30px;
}

/* 'width:' + ( 100 / numOfImagesPerRow ) + '%; */
/* padding-bottom:' + ( ( 100 / numOfImagesPerRow ) * ( imageAspectHeight / imageAspectWidth ) ) + '%;
margin-bottom:' + imageMarginBottom + 'px;'); */
/*# sourceMappingURL=main_multichoice.css.map */