body {
  -ms-touch-action: auto !important;
  touch-action: auto !important;
}

.app-content {
  overflow: visible;
}

#hemophilia-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgb(201,224,245); /* Old browsers */
 /* IE9 SVG */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5ZTBmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iI2M5ZTBmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iI2EzY2VmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM0JSIgc3RvcC1jb2xvcj0iI2EzY2VmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iI2EzY2VmNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -webkit-linear-gradient(top, rgba(201,224,245,1) 0%,rgba(201,224,245,1) 34%,rgba(163,206,245,1) 34%,rgba(163,206,245,1) 34%,rgba(163,206,245,1) 67%,rgba(125,185,232,1) 67%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -ms-linear-gradient(top, rgba(201,224,245,1) 0%,rgba(201,224,245,1) 34%,rgba(163,206,245,1) 34%,rgba(163,206,245,1) 34%,rgba(163,206,245,1) 67%,rgba(125,185,232,1) 67%,rgba(125,185,232,1) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(201,224,245,1) 0%,rgba(201,224,245,1) 34%,rgba(163,206,245,1) 34%,rgba(163,206,245,1) 34%,rgba(163,206,245,1) 67%,rgba(125,185,232,1) 67%,rgba(125,185,232,1) 100%); /* W3C */
}

.generation {
  position: absolute;
  left: -0.6%;
  color: #9F5E5D;
  font-weight: bold;
  font-size: 1.3em;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#gen1 {
  top: 14%;
}

#gen2 {
  top: 47%;
}

#gen3 {
  top: 80%;
}

.gen-1to2 {
  position: absolute;
  top: 22.5%;
  left: 37.7%;
  height: 4.8em;
}

.gen-2to3 {
  position: absolute;
  top: 56.3%;
  left: 14.2%;
  height: 5.53em;
}

#repository {
  border:0.11em solid #7f7f7f;
  position: absolute;
  top: 4%;
  left: 84%;
  width: 12%;
  height: 92%;
  background-color:#D3EAF8;
}

#repository-title {
  padding: 5px 0 5px 0px;
  width: 100%;
  background-color: #7F7E7F;
  color: white;
  text-align: center;
  font-weight: bold;
}

#repository-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.answer-image {
  height: 1.65em;
}

.answer-image-rep {
  position: absolute;
  height: 1.65em;
  left: 26.4%;
  cursor: pointer;
  opacity: 0;
  -ms-touch-action: none !important;
  touch-action: none !important;
}

.rep-answer-1 {
  top: 5.7%;
}

.rep-answer-2 {
  top: 24%;
}

.rep-answer-3 {
  top: 42.6%;
}

.rep-answer-4 {
  top: 61.7%;
}

.rep-answer-5 {
  top: 79.3%;
}

.person-container {
  position: absolute;
  width: 15%;
  height: 22%;
}

.genotype {
  position: absolute;
  top: 13%;
  height: 1.65em;
  border: 0.16em solid white;
  border-radius: 1.7em;
  background-color: #9ADEDF;
  left: 39.8%;
  padding-left: 2em;
}

.thumbnail {
  width:4.77em;
  position: absolute;
  top: 0%;
  left:0%;
  padding:0.2em 0.1em 0 0;
  border: 0.16em solid white;
  border-radius: 1.1em;
  background-color: #69BCCC;
  vertical-align: bottom;
}

.genotype-text {
  position: absolute;
  top: -2.4%;
  left: 73%;
  letter-spacing: normal;
  font-weight: bold;
  font-size: 0.9em;
}

.person-image {
  height: 5.3em;
}

#gen1-1 {
  top: 4%;
  left: 34%;
}

#gen1-2 {
  top: 4%;
  left: 55.2%;
}

#gen2-1 {
  top: 39.6%;
  left: 12.2%;
}

#gen2-2 {
  top: 39.6%;
  left: 34%;
}

#gen2-3 {
  top: 39.6%;
  left: 55.2%;
}

#gen3-1 {
  top: 76%;
  left: 10.2%;
}

#gen3-2 {
  top: 76%;
  left: 27.3%;
}

#gen3-3 {
  top: 76%;
  left: 44.5%;
}

#gen3-4 {
  top: 76%;
  left: 61.7%;
}

.correct::before,
.wrong::before {
  top: 0.8em;
  left: 4.37em;
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: 0;
  -o-background-size: 0;
  -webkit-background-size: 0;
  background-size: 0;
  -moz-transition: background-size 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -o-transition: background-size 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -webkit-transition: background-size 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition: background-size 400ms cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
  content: "";
  display: block;
  height: 1.25em;
  width: 1.25em;
  z-index: 50;
  position: absolute;
}

.correct::before {
  background-image: url(../content/img/V_s.svg);
}

.wrong::before {
  background-image: url(../content/img/X_s.svg);
}

.done::before {
  -moz-background-size: 1.25em 1.25em;
  -o-background-size: 1.25em 1.25em;
  -webkit-background-size: 1.25em 1.25em;
  background-size: 1.25em 1.25em;
}

#overlay {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.00001;
  display: none;
  z-index: 200;
}

#overlay.visible {
  display: block;
}

#result {
  background: #A3CEF5;
  border-radius: 0;
  box-shadow: none;
  color: #000;
  visibility: visible;
  font-size: 1.7em;
  font-weight: 700;
  height: 0;
  margin: 0 0;
  text-align: center;
  width: 0;
  position: absolute;
  bottom: 4.86em;
  right: 13.93em;
  z-index: 300;
}

  #result.visible {
    border: 0.13em solid #6E6556;
    box-shadow: 0 0.07em 0.28em 0.28em rgba(0, 0, 0, .25);
    border-radius: 0.2em;
    height: 6.03em;
    cursor: pointer;
    width: 12.88em;
    right: 6.64em;
    padding: 0.25em;
  }

#resultInner {
  background: white;
  color:#444444;
  width: 100%;
  height: 100%;
}

#close {
  cursor: pointer;
  height: 0.73em;
  width: 0.73em;
  position: absolute;
  display: none;
  top: 0.28em;
  left: 12.37em;
}

  #close.visible {
    display: block;
  }

#partial {
  display: none;
  position: absolute;
  top: 29%;
  left: 24.4%;
}

#goodjob {
  position: absolute;
  display: none;
  top: 2.5em;
  left: 4.4em;
}

#tryagain {
  position: absolute;
  display: none;
  top: 2.5em;
  left: 4.1em;
}

  #goodjob.visible,
  #tryagain.visible,
  #partial.visible {
    display: block;
  }

.btn:focus {
  outline: 0;
}

.ui-draggable-dragging {
  z-index: 100;
}

.rep-visible {
  opacity: 1;
}

.dropped,
.ui-draggable-dragging {
  opacity: 1;
}

/******************english + vi*********************/
body.en #partial {
  top: 23%;
  left: 0.8%;
  right:0.8%;
  font-size:0.81em;
  direction:ltr;
}

body.vi #partial {
  top: 32%;
  left: 0.8%;
  right:0.8%;
  font-size:0.81em;
  direction:ltr;
}

body.en #goodjob,
body.en #tryagain {
  position: absolute;
  direction:ltr;
  top: 2.3em;
  left: 4.1em;
}

body.vi #tryagain {
  position: absolute;
  direction:ltr;
  top: 2.6em;
  left: 4.6em;
}

body.vi #goodjob{
  top: 2.5em;
  left: 1.3em;
  direction:ltr;
}

body.en .genotype-text {
  position: absolute;
  left: 68%;
  letter-spacing: normal;
  font-weight: bold;
  font-size: 0.75em;
}

body.vi .genotype-text {
  position: absolute;
  left: 68%;
  letter-spacing: normal;
  font-weight: bold;
  font-size: 0.75em;
  width:100%;
}

body.en #gen1 {
  top:12%;
}

body.en #gen2 {
  top:46%;
}
body.en #gen3 {
  top:79%;
}

body.en .generation
{
width:17%;
left:-4%;
}