/* Track */
/* Handle */
.custom-scroll .inner-scroll-handle {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: white;
  border-radius: 3px;
  margin: 1px 0; }

.custom-scroll .scroll-handle {
  display: none;
  position: absolute;
  content: " ";
  right: -4px;
  top: 0;
  bottom: 0;
  width: 3px; }

.custom-scroll .scroll-bg {
  display: none;
  position: absolute;
  content: " ";
  background-color: #d8d8d8;
  border-radius: 3px;
  right: -5px;
  top: 0;
  bottom: 0;
  width: 5px; }

.custom-scroll.scrollable .scroll-handle,
.custom-scroll.scrollable .scroll-bg {
  display: block; }

@font-face {
  font-family: "AcuminPro-Regular";
  src: url("../../assets/fonts/AcuminPro-Regular.woff2"); }

@font-face {
  font-family: "AcuminProCond-Regular";
  src: url("../../assets/fonts/AcuminProCond-Regular.woff2"); }

html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0; }

div, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  padding: 0;
  margin: 0;
  font-family: AcumanPro-Regular;
  /* safe GSK font */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */ }

sup {
  line-height: 0; }

.arjs-loader {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center; }

.arjs-loader div {
  text-align: center;
  font-size: 1.25em;
  color: white; }

a-scene {
  height: 90%;
  width: 100%; }

.overlay {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.holeOverlay {
  position: relative;
  top: 20%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 0 0 9999px rgba(15, 91, 135, 0.8); }

header {
  text-align: center;
  font-size: 48px;
  width: 100%;
  height: 10%;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: white; }

.percentCircle {
  height: 100px;
  width: 100px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block; }

#ui-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }
  #ui-overlay #scalingWrapper {
    position: absolute;
    top: 0%;
    left: 50%;
    height: 100%;
    width: 100%;
    transform-origin: top left;
    pointer-events: none;
    transform: translateX(-50%); }
    #ui-overlay #scalingWrapper #onScreenLabels {
      position: absolute;
      top: 0;
      left: 0; }
      #ui-overlay #scalingWrapper #onScreenLabels #target1-label-healthyPatient {
        display: none;
        position: absolute;
        left: -1px;
        top: 60px;
        width: 128px;
        height: 17px;
        background-image: url("/assets/images/labels/healthy-patients@3x.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left top; }
        #ui-overlay #scalingWrapper #onScreenLabels #target1-label-healthyPatient.show {
          display: block; }
      #ui-overlay #scalingWrapper #onScreenLabels #target1-label-immunoSupressed {
        display: none;
        position: absolute;
        left: -1px;
        top: 60px;
        width: 111px;
        height: 29px;
        background-image: url("/assets/images/labels/immunosuppressed-label@3x.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left top; }
        #ui-overlay #scalingWrapper #onScreenLabels #target1-label-immunoSupressed.show {
          display: block; }
    #ui-overlay #scalingWrapper .starttap {
      display: none;
      top: 50%;
      transform: translateY(-50%);
      height: 168px;
      width: 100%;
      position: absolute;
      text-align: center;
      pointer-events: all;
      color: #0f5b87; }
      #ui-overlay #scalingWrapper .starttap a {
        color: #0f5b87; }
      #ui-overlay #scalingWrapper .starttap .background-popup {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(102, 199, 199, 0.95); }
      #ui-overlay #scalingWrapper .starttap .popup-text {
        width: 107px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 13px;
        font-family: AcuminProCond-Regular;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: normal; }
        #ui-overlay #scalingWrapper .starttap .popup-text sup {
          font-size: 0.5em;
          vertical-align: super; }
      #ui-overlay #scalingWrapper .starttap .popup-text-differentwidth {
        width: 131px; }
      #ui-overlay #scalingWrapper .starttap .popup-text1 {
        position: absolute;
        top: 21px;
        height: 39px; }
      #ui-overlay #scalingWrapper .starttap .hand-icon {
        width: 24px;
        position: absolute;
        top: 74px;
        height: 30px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url("/assets/images/ui/tapToBegin/icon-tap-to-begin@3x.png");
        background-repeat: no-repeat;
        background-size: contain; }
      #ui-overlay #scalingWrapper .starttap .popup-text2 {
        position: absolute;
        top: 120px; }
      #ui-overlay #scalingWrapper .starttap p {
        font-size: 6px;
        position: absolute;
        top: 145px;
        left: 50%;
        transform: translateX(-50%);
        width: 109px;
        height: 13px;
        line-height: 7px;
        font-family: AcuminProCond-Regular; }
      #ui-overlay #scalingWrapper .starttap .restart-text1 {
        width: 139px;
        font-size: 10px;
        line-height: 1.2; }
      #ui-overlay #scalingWrapper .starttap .restart-icon {
        width: 18px;
        position: absolute;
        top: 58px;
        height: 21px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url("/assets/images/ui/restart/group-3@3x.png");
        background-repeat: no-repeat;
        background-size: contain; }
      #ui-overlay #scalingWrapper .starttap .restart-icon-text {
        position: absolute;
        top: 83px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 6.5px;
        font-family: AcuminProCond-Regular; }
      #ui-overlay #scalingWrapper .starttap .restart-text2 {
        width: 180px;
        font-size: 7.5px;
        position: absolute;
        top: 105px;
        left: 50%;
        transform: translateX(-50%);
        line-height: 1.4; }
      #ui-overlay #scalingWrapper .starttap .restart-copyright {
        width: 100%;
        font-size: 6px;
        font-family: AcuminProCond-Regular; }
    #ui-overlay #scalingWrapper #ui-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 34px;
      background-color: #003b51; }
      #ui-overlay #scalingWrapper #ui-header .logo {
        position: absolute;
        left: 6px;
        top: 6px;
        width: 93px;
        height: 23px;
        background-image: url("/assets/images/ui/header/logo.png");
        background-repeat: no-repeat;
        background-size: contain;
        pointer-events: all;
        cursor: pointer; }
      #ui-overlay #scalingWrapper #ui-header #btn-reference {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 79px;
        background-color: #66c7c7;
        pointer-events: all;
        cursor: pointer; }
        #ui-overlay #scalingWrapper #ui-header #btn-reference::after {
          content: "";
          position: absolute;
          left: -2px;
          top: 0;
          width: 19px;
          height: 100%;
          background-image: url("/assets/images/ui/header/diag-section.png");
          background-repeat: no-repeat;
          background-position: left;
          background-size: cover; }
        #ui-overlay #scalingWrapper #ui-header #btn-reference .label {
          position: absolute;
          top: 50%;
          right: 33px;
          color: #003b51;
          font-family: AcuminPro-Regular;
          font-size: 6.9px;
          text-decoration: underline;
          transform: translate(50%, -50%); }
    #ui-overlay #scalingWrapper #ui-viewFinder {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0; }
      #ui-overlay #scalingWrapper #ui-viewFinder .container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0; }
        #ui-overlay #scalingWrapper #ui-viewFinder .container .background {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0; }
          #ui-overlay #scalingWrapper #ui-viewFinder .container .background .view-port {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 125px;
            height: 125px;
            transform: translate(-50%, -55px);
            background-image: url("/assets/images/ui/viewFinder/viewCircle.png");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            opacity: 0.85; }
            #ui-overlay #scalingWrapper #ui-viewFinder .container .background .view-port::before {
              content: "";
              position: absolute;
              right: 95%;
              top: 0;
              width: 200%;
              height: 100%;
              background-color: #003b51; }
            #ui-overlay #scalingWrapper #ui-viewFinder .container .background .view-port::after {
              content: "";
              position: absolute;
              left: 95%;
              top: 0;
              width: 200%;
              height: 100%;
              background-color: #003b51; }
            #ui-overlay #scalingWrapper #ui-viewFinder .container .background .view-port .upper {
              position: absolute;
              bottom: 95%;
              right: -200%;
              left: -200%;
              height: 300%;
              background-color: #003b51; }
            #ui-overlay #scalingWrapper #ui-viewFinder .container .background .view-port .lower {
              position: absolute;
              top: 95%;
              right: -200%;
              left: -200%;
              height: 300%;
              background-color: #003b51; }
        #ui-overlay #scalingWrapper #ui-viewFinder .container .text-1 {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 147px;
          color: white;
          font-size: 7px;
          text-align: center;
          font-family: "AcuminProCond-Regular";
          font-weight: lighter;
          transform: translate(-50%, -90px); }
        #ui-overlay #scalingWrapper #ui-viewFinder .container .align-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 26px;
          height: 29px;
          transform: translate(-50%, 100px);
          background-image: url("/assets/images/ui/viewFinder/icon-align@3x.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center; }
    #ui-overlay #scalingWrapper #ui-voiceOverText {
      display: none;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0; }
      #ui-overlay #scalingWrapper #ui-voiceOverText .container {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 61.5px;
        background-color: rgba(0, 59, 81, 0.85);
        transition: height 0.5s; }
        #ui-overlay #scalingWrapper #ui-voiceOverText .container .content {
          position: absolute;
          left: 14px;
          top: 50%;
          right: 34px;
          transform: translateY(-50%);
          color: white;
          font-family: AcuminProCond-Regular;
          line-height: 1.2;
          font-weight: lighter;
          font-size: 8px; }
        #ui-overlay #scalingWrapper #ui-voiceOverText .container .view-subtitles {
          display: none;
          position: absolute;
          top: 5px;
          left: 50%;
          transform: translateX(-50%);
          color: white;
          font-family: AcuminProCond-Regular;
          font-weight: lighter;
          font-size: 8px; }
        #ui-overlay #scalingWrapper #ui-voiceOverText .container .completion-bar {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 9px; }
          #ui-overlay #scalingWrapper #ui-voiceOverText .container .completion-bar .bar-container {
            position: absolute;
            top: 3px;
            bottom: 3px;
            left: 5px;
            right: 5px;
            overflow: hidden;
            background-color: #003b51; }
            #ui-overlay #scalingWrapper #ui-voiceOverText .container .completion-bar .bar-container .bar {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: #66c7c7;
              transition-timing-function: linear;
              transition-duration: 1s;
              transform: translateX(-100%); }
        #ui-overlay #scalingWrapper #ui-voiceOverText .container .btn-expand {
          position: absolute;
          top: 0;
          right: 0;
          width: 34px;
          height: 20px;
          background-image: url("/assets/images/ui/voiceOver/cornerPiece.webp");
          background-size: contain;
          background-repeat: no-repeat;
          background-position: top right;
          pointer-events: all;
          cursor: pointer; }
          #ui-overlay #scalingWrapper #ui-voiceOverText .container .btn-expand .arrow {
            position: absolute;
            right: 8px;
            top: 7px;
            height: 7px;
            width: 11px;
            background-image: url("/assets/images/ui/voiceOver/arrow.webp");
            background-size: contain;
            background-repeat: no-repeat; }
      #ui-overlay #scalingWrapper #ui-voiceOverText.closed .container {
        height: 29px; }
        #ui-overlay #scalingWrapper #ui-voiceOverText.closed .container .view-subtitles {
          display: block; }
        #ui-overlay #scalingWrapper #ui-voiceOverText.closed .container .content {
          display: none; }
        #ui-overlay #scalingWrapper #ui-voiceOverText.closed .container .btn-expand {
          background-image: url("/assets/images/ui/voiceOver/conerPieceClosed.webp"); }
          #ui-overlay #scalingWrapper #ui-voiceOverText.closed .container .btn-expand .arrow {
            transform: rotate(180deg); }
    #ui-overlay #scalingWrapper #ui-references {
      display: none;
      position: absolute;
      top: 34px;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: all;
      background-color: rgba(102, 199, 199, 0.9); }
      #ui-overlay #scalingWrapper #ui-references .title {
        position: absolute;
        left: 12px;
        top: 26.5px;
        font-family: "AcuminProCond-Regular";
        font-weight: bold;
        font-size: 10.5px;
        color: #003b51; }
      #ui-overlay #scalingWrapper #ui-references .scrolled-content-wrapper {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        position: absolute; }
      #ui-overlay #scalingWrapper #ui-references .outer-content-wrapper {
        position: absolute;
        top: 44.5px;
        left: 12px;
        bottom: 10px;
        right: 10px; }
      #ui-overlay #scalingWrapper #ui-references .content-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: -10px;
        padding-right: 20px;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden; }
        #ui-overlay #scalingWrapper #ui-references .content-wrapper h2 {
          font-family: "AcuminProCond-Regular";
          font-size: 7px;
          font-weight: bold;
          color: #003b51; }
        #ui-overlay #scalingWrapper #ui-references .content-wrapper p {
          font-family: "AcuminProCond-Regular";
          font-size: 7px;
          color: #003b51;
          margin-bottom: 7px; }
      #ui-overlay #scalingWrapper #ui-references .btn-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 16.5px;
        height: 16.5px;
        background-image: url("/assets/images/ui/references/ref-close.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
        pointer-events: all; }
    #ui-overlay #scalingWrapper #ui-startScreen {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      pointer-events: all; }
      #ui-overlay #scalingWrapper #ui-startScreen .background {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: white; }
        #ui-overlay #scalingWrapper #ui-startScreen .background::before {
          content: "";
          position: absolute;
          top: 50px;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #003b51; }
        #ui-overlay #scalingWrapper #ui-startScreen .background::after {
          content: "";
          position: absolute;
          top: 34px;
          left: 0;
          width: 100%;
          height: 300px;
          background-image: url("/assets/images/ui/startScreen/background.webp");
          background-size: 100% 100%;
          background-position: top center; }
      #ui-overlay #scalingWrapper #ui-startScreen .logo {
        position: absolute;
        left: 50%;
        top: 46px;
        width: 120px;
        height: 20px;
        transform: translateX(-50%);
        background-image: url("/assets/images/ui/startScreen/atarabio-fc-logo.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
      #ui-overlay #scalingWrapper #ui-startScreen .text-box-1 {
        position: absolute;
        top: 91px;
        left: 50%;
        width: 147px;
        transform: translateX(-50%);
        color: white;
        font-size: 14.5px;
        font-family: "AcuminProCond-Regular";
        line-height: 1; }
      #ui-overlay #scalingWrapper #ui-startScreen .text-box-2 {
        position: absolute;
        top: 132px;
        left: 50%;
        width: 147px;
        transform: translateX(-50%); }
        #ui-overlay #scalingWrapper #ui-startScreen .text-box-2 h2 {
          color: #66c7c7;
          font-family: "AcuminProCond-Regular";
          font-size: 12px;
          font-weight: lighter; }
        #ui-overlay #scalingWrapper #ui-startScreen .text-box-2 p {
          color: white;
          font-family: "AcuminProCond-Regular";
          font-size: 9px;
          line-height: 11px;
          margin-top: 5px; }
      #ui-overlay #scalingWrapper #ui-startScreen .text-box-3 {
        position: absolute;
        top: 266.5px;
        left: 50%;
        width: 127px;
        transform: translateX(-50%);
        color: white;
        font-size: 7.2px;
        font-family: "AcuminProCond-Regular";
        line-height: 1;
        text-align: center; }
      #ui-overlay #scalingWrapper #ui-startScreen .headphone-icon {
        position: absolute;
        top: 244px;
        left: 50%;
        height: 14px;
        width: 20.5;
        transform: translateX(-50%);
        background-image: url("/assets/images/ui/startScreen/headphones.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
      #ui-overlay #scalingWrapper #ui-startScreen .btn-start {
        position: absolute;
        top: 204.5px;
        left: 50%;
        width: 92px;
        height: 18.5;
        transform: translateX(-50%);
        background-image: url("/assets/images/ui/startScreen/start-button.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer; }
    #ui-overlay #scalingWrapper.ipad_tall #ui-viewFinder .container .background .view-port, #ui-overlay #scalingWrapper.ipad_wide #ui-viewFinder .container .background .view-port, #ui-overlay #scalingWrapper.desktop #ui-viewFinder .container .background .view-port {
      width: 175px;
      height: 175px;
      transform: translate(-50%, -90px); }
    #ui-overlay #scalingWrapper.ipad_tall #ui-viewFinder .container .text-1, #ui-overlay #scalingWrapper.ipad_wide #ui-viewFinder .container .text-1, #ui-overlay #scalingWrapper.desktop #ui-viewFinder .container .text-1 {
      transform: translate(-50%, -110px); }
    #ui-overlay #scalingWrapper.ipad_tall #ui-viewFinder .container .align-icon, #ui-overlay #scalingWrapper.ipad_wide #ui-viewFinder .container .align-icon, #ui-overlay #scalingWrapper.desktop #ui-viewFinder .container .align-icon {
      transform: translate(-50%, 112px); }