.q-row {
  display:flex;
  justify-content: center;
}

#zoom {
  margin:0 auto;
  min-height: 2000px;
  width: 6000px;
  text-align: center;
  /*overflow-y: hidden !important;*/
  overflow-x: scroll;

  touch-action: none;
  overscroll-behavior: none;
  transform: scale(0.5);
  transform-origin: 0 0;
}


.zoomContainer {
  display: block;
  overflow-x: scroll;
}

.zoomContainer::-webkit-scrollbar {
  display: none;
}
#zoom::-webkit-scrollbar {
  display: none;
}

.right-cols {
  position: relative;
  right: 273;
}

.connector {
  width: 397px;
  text-align: center;
  position: absolute;
  display:flex;
  justify-content: center;
  
}

.connector-half {
  width: 48%;
  position: relative;
  visibility: hidden;
  
}

.connector-half-child{
  display: flex;
  position: absolute;
  width: 100%;
  
}

.question-card {
  z-index: 999999;
}

.arrow-1 {
  position:relative;
  background-image: url('./assets/arrows/arrrow-01.svg');
  background-repeat: no-repeat;
  background-position: center;
  height: 140px;
  width: 30px;
  pointer-events: none;
  right: 0.5;

}

.arrow-2{
    position: relative;
    background-image: url(./assets/arrows/arrrow-02.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 250;
    width: 940;
    right: 911;
    bottom: 83;
    pointer-events: none;
}


.arrow-3{
    position: relative;
    background-image: url(./assets/arrows/arrrow-03.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 250;
    width: 912;
    left: 188;
    bottom: 84;
    pointer-events: none;
}

.arrow-4 {
  position:relative;
  background-image: url('./assets/arrows/arrrow-04.svg');
  background-repeat: no-repeat;
  background-position: center;
  height: 490px;
  width: 30px;
  pointer-events: none;
  right: 0.5

}


.arrow-5 {
    position: relative;
    background-image: url(./assets/arrows/arrrow-05.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 715;
    width: 90;
    pointer-events: none;
    left: 387;
    bottom: 105;
}
.arrow-6 {
  position: relative;
  background-image: url(./assets/arrows/arrrow-06.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 650;
  width: 820;
  left: 78;
  bottom: 200;
  pointer-events: none;

}

.arrow-7 {
  position: relative;
  background-image: url(./assets/arrows/arrrow-07.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 650;
  width: 820;
  right: 708;
  bottom: 200;
  pointer-events: none;

}

.arrow-8 {
  position: relative;
  background-image: url(./assets/arrows/arrrow-08.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 1183px;
  bottom: 0;
  pointer-events: none;

}

.arrow-8.left{
  left:40;
}

.arrow-8.right{
right:30;
}

.arrow-9 {
  position: relative;
  background-image: url(./assets/arrows/arrrow-09.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 1220;
  width: 2400;
  right: 48;
  bottom: 40;
  pointer-events: none;

}

.arrow-10 {
  position: relative;
  background-image: url(./assets/arrows/arrrow-10.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 1220;
  width: 2400;
  right: 2254;
  bottom: 38;
  pointer-events: none;

}

.arrow-11{
  position: relative;
  background-image: url(./assets/arrows/arrrow-11.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 1220;
  width: 800;
  bottom: 415;
  right: 800;
  pointer-events: none;

}

.arrow-12{
  position: relative;
  background-image: url(./assets/arrows/arrrow-12.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 1220;
  width: 800;
  bottom: 415;
  left: 200;
  pointer-events: none;

}
.arrow-13{
  position: relative;
    background-image: url(./assets/arrows/arrrow-13.svg);
    background-repeat: no-repeat;
    background-position: center;
    height: 241;
    width: 800;
    bottom: 96;
    right: 665;
    pointer-events: none;

}
.arrow-14{
  position: relative;
  background-image: url(./assets/arrows/arrrow-14.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 241;
  width: 800;
  bottom: 96;
  right: 45;
  pointer-events: none;

}

.arrow-15{
  position: relative;
  background-image: url(./assets/arrows/arrrow-15.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 370;
  width: 420;
  bottom: 130;
  right: 365;
  pointer-events: none;

}

.arrow-16{
  position: relative;
  background-image: url(./assets/arrows/arrrow-16.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 370;
  width: 420;
  bottom: 130;
  left: 132;
  pointer-events: none;

}

.arrow-17{
  position: relative;
  background-image: url(./assets/arrows/arrrow-17.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 200;
  width: 200;
  bottom: 59;
  right: 134;
  pointer-events: none;

}


.arrow-18{
  position: relative;
  background-image: url(./assets/arrows/arrrow-18.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 145;
  width: 450;
  bottom: 58;
  right: 255;
  pointer-events: none;

}

.arrow-19{
  position: relative;
  background-image: url(./assets/arrows/arrrow-19.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 145;
  width: 450;
  bottom: 58;
  pointer-events: none;
  right: 6;
}

.arrow-20{
  position: relative;
  background-image: url(./assets/arrows/arrrow-20.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 1560;
  width: 2690;
  bottom: 561;
  left: 90;
  
  pointer-events: none;

}

.arrow-21{
  position: relative;
  background-image: url(./assets/arrows/arrrow-21.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 1560px;
  width: 2255px;
  bottom: 1253;
  left: 94;
  
  pointer-events: none;

}

.arrow-22{
  position: relative;
  background-image: url(./assets/arrows/arrrow-22.svg);
  background-repeat: no-repeat;
  background-position: center;
  width: 1163;
  height: 1560;
  left: 94;
  bottom: 1253;
  
  pointer-events: none;
}


.arrow-23{
  position: relative;
  background-image: url(./assets/arrows/arrrow-23.svg);
  background-repeat: no-repeat;
  background-position: center;
  width:625;
  height:1560;
  bottom: 1253;
  left: 94;
  
  pointer-events: none;

}


.arrow-24{
  position: relative;
  background-image: url(./assets/arrows/arrrow-24.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 200;
  bottom: 57;
  right: 109;
  width: 250;
  
  pointer-events: none;

}

.arrow-25{
  position: relative;
  background-image: url(./assets/arrows/arrrow-25.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 200;
  bottom: 57;
  left: 48;
  width: 250;
  pointer-events: none;

}

.arrow-26{
position: relative;
    background-image: url(./assets/arrows/arrrow-26.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 270;
    height: 160;
    left: 133;
    bottom: 10;
    pointer-events: none;
}


.arrow-27{
  position: relative;
    background-image: url(./assets/arrows/arrrow-27.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 270;
    height: 160;
    right: 134;
    pointer-events: none;
    bottom: 10px;

}

.arrow-28{
  position: relative;
  background-image: url(./assets/arrows/arrrow-28.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 230;
  bottom: 57;
  right: 109;
  width: 250;
  
  pointer-events: none;

}

.arrow-29{
  position: relative;
  background-image: url(./assets/arrows/arrrow-29.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 230;
  bottom: 57;
  left: 48;
  width: 250;
  pointer-events: none;

}



.secondary-card{
  visibility: hidden;
}

.fadeIn{
  animation: 1.5s fadeIn;
  animation-fill-mode: forwards;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}



.video-border, .video-border-vimeo {
  background-color: rgba(199, 214, 233, 0.25);
  border-radius: 0px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 5px;
  aspect-ratio: 16/9;
  margin: 20px 0;
  border: 1px solid #1e5da8;
}

.video-container-iframe {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  margin: 20px 0;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 5px;
  border-radius: 0;
  background-color: rgba(199, 214, 233, 0.25);
  border: 1px solid #1e5da8;
}

.video-border-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-border-iframe iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.question-card {
  margin: 70px 75px;
  width: 396px !important;
  min-width: 365px;
}
.nav-item{
  cursor: pointer;
}

.offcanvas-completion-bar{
  display: none;
}

html, body {
  overscroll-behavior: none;
}

.nav-tabs .nav-link {
  text-align: left;
}