.ytp-chrome-top {
  display: none !important;
 }


/* width */
::-webkit-scrollbar {
  border-radius: 10px;
          background: transparent;
    border: 1px solid white;    
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #747678;
    border: 1px solid white;
  border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background: #ff000000;
}






/*--------- GENERAL ---------*/

.ggskin {
    font-family: 'Frutiger', sans-serif;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 0.04em;
  }
  .ggmarkdown p,.ggmarkdown h1,.ggmarkdown  h2,.ggmarkdown h3,.ggmarkdown h4 {
    margin-top: 0px
  }
  .ggmarkdown {
    white-space:normal
  }



.skin-menu-bar{
  transition: transform 0.7s !important;
}


.student-label {
  background: #ffffff45;
  padding: 8px 20px 8px 20px;
  border: 1px solid white;
  border-radius: 99px;
}



.cursor > div{
  cursor: pointer !important;
}

/* FLEX CONTAINERS*/


.flex-container-column{
  display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 20px;
    height: auto !important;
    width: auto !important;
    max-width: 1000px;
    position: relative !important;
    margin: auto !important;
    left:auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}



.flex-container-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  align-content: center;
}


  .flex-child-element{
    position: static !important;
    transform: none !important;
    width: auto !important;
    margin: 8px !important;
  }



  .responsive-img img{
    height:auto !important;
  }

  @media screen and (max-width: 1024px) {
    .responsive-img img{
    transform: scale(0.7);
    }
  }

  @media screen and (max-width: 768px) {
    .responsive-img img{
    transform: scale(0.6);
    }
  }

  @media screen and (max-width: 480px) {
    .responsive-img img{
    transform: scale(0.5);
    }
  }



  .responsive-container{
    transform: translate(-50%, -50%);
    left: 50% !important;
  }

  @media screen and (max-width: 1024px) {
    .responsive-container{
    transform: translate(-50%, -50%) scale(0.9);
    }
  }

  @media screen and (max-width: 768px) {
    .responsive-container{
    transform: translate(-50%, -50%) scale(0.7);
    }
  }

  @media screen and (max-width: 480px) {
    .responsive-container{
    transform: translate(-50%, -50%) scale(0.4);
    }
  }


.origin-left-center{
  transform-origin: left center !important;
}

.origin-right-center{
  transform-origin: right center !important;
}



  .responsive-element {

    transform: scale(1.0) !important;
  }

  @media screen and (max-width: 1024px) {
    .responsive-element{

    transform: scale(0.85) !important;
    }
  }

  @media screen and (max-width: 768px) {
    .responsive-element{

    transform: scale(0.7) !important;
    }
  }

  @media screen and (max-width: 480px) {
    .responsive-element{

    transform: scale(0.5) !important;
    }
  }


  @media screen and (max-width: 380px) {
    .responsive-element{

    transform: scale(0.4) !important;
    }
  }







  .responsive-button{

    transform: scale(1.0) !important;
  }

  @media screen and (max-width: 1024px) {
    .responsive-button{

    transform: scale(0.85) !important;
    }
  }

  @media screen and (max-width: 768px) {
    .responsive-button{

    transform: scale(0.7) !important;
    }
  }

  @media screen and (max-width: 480px) {
    .responsive-button{

    transform: scale(0.6) !important;
    }
  }






.bold-title{
  font-weight: 700 !important;
}



.title-h1 div{
  font-size: max(4.35vw, 24px) !important;
}

.title-h2 div{
  font-size: max(3vw, 18px) !important;
  letter-spacing: 3px;
  line-height: 80px;
}

@media screen and (max-width: 980px) {
.title-h2 div{
  line-height: 25px;
}
}


.title-h3 div{
  font-size: max(2.5vw, 16px) !important;
}

.title-h4 div{
  font-size: max(1.6vw, 14px) !important;
}

.title-h5 div{
  font-size: max(1.1vw, 12px) !important;
}

.title-Module div{
  font-size: max(1.18vw, 14px) !important;
}


.title-26 div{
  font-size: max(1.35vw, 18px) !important;
}

.title-paragraph div{
  font-size: max(0.94vw, 10px) !important;
}


.title-paragraph-accent div{
  font-size: max(1.35vw, 10px) !important;
}

.title-paragraph-sub div{
  font-size: max(1.35vw, 10px) !important;
  font-weight: 400 !important;
}

.header-question div{
  font-size: max(1.65vw, 14px) !important;
}


.button-label div{
  font-size: max(0.75vw,10px) !important;
  letter-spacing: 0.01em;
  font-family: 'neo sans pro';
}


.button-label-b div{
  font-size: max(0.90vw,10px) !important;
}

@media screen and (max-width: 1475px) {
.title-responsive-center > div{
text-align:center !important;

}
}

  /*TEXT FRAMES*/

  .white-frame{
    border: 1px solid white !important;
    border-radius: 99px;
  }



  .white-frame > div{
padding: 20px !important;
  }


  .header-frame{
    border: 1px solid white;
    border-radius: 99px;
    background: #0096571a;
    width: calc(100% - 30px) !important;
    padding: 25px 0px 25px 0px;
    margin-bottom: 60px !important;
    margin-top: 15px !important;
  }

  .header-left{
    width: 100% !important;
    margin-bottom: 50px !important;
    font-size:22px !important;
  }



  /*UPPERCASE TITLES*/

  .ggskin.ggskin_text.capital-titles {
    text-transform: uppercase;
  }


/*MODULE BACKGROUND IMAGES*/

.responsive-bg-image{
  width: 100%;
  height: auto;
}


/*----------BUTTONS--------*/

.button-container-column{
  display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}

.button-container-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  align-content: center;
}


/*Basic Button Design*/


.button{
  font-family: 'Frutiger', sans-serif;
  line-height: normal;
  font-size: 16px;
  cursor: pointer !important;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: background-color .5s ease-in-out 0s;
  transition: background-color .5s ease-in-out 0s;
}

.button *{
  cursor: pointer !important;
}


  .button > div{
    color: white;
    position: absolute;
    height: auto !important;

  }


  .flex-child{
    position: static !important;
    transform: none !important;
  }
  


/*--------------------------LANDING---------------------------------*/


.flex-landing-viewport{
  position: relative;
  height: 100vh !important;
  width: 100vw !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 20px;
  row-gap: 60px;
}

.flex-landing-logo{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.flex-landing-content{
  position: relative !important;
  top: auto !important;
  left: auto !important;

  width: auto !important;
  height: auto !important;
}

.flex-landing-position{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;

}

.flex-start-wrapper{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 20px;
  row-gap: 60px;
  padding: 25px 60px 25px 60px;
}








/*------Button Style 1 (Green BG / Orange Hover / No Flex-------*/

.btn-green{
  width: 272px !important;
  height: 62px !important;
  background-color: #00965e !important;
  color: white;
  border-radius: 0px;
  font-size: 22px !important;
}




.btn-green:hover{
  background-color: #ff9730 !important;
}

/*------Button Style 2 (White /TRANS BG / Orange Hover / Flex-------*/

.btn-white{
  background-color: #ffffff09 !important;
  color: white;
  text-transform: uppercase;
}



#icon-next{
  content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/icon_arrow-right.svg') ;
  display: inline-block;
  height: 12px;
  margin: 0px 5px 0px 20px;
}

.btn-white:hover{
  background-color: #ffffff4d !important;
}

.btn-white > div{
  cursor: pointer;
}



/*Continue Button*/

.question-continue-button{
  border: 2px white solid;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  transition: 0.5s;
  max-width: 840px;
}

.question-continue-button:hover{
  background: rgba(255, 255, 255, 0.4);
}






/* Passed / Failed Status after return */


/*------PASSED-------*/

.ggskin.ggskin_text.passed > div {
    text-transform: uppercase;
    color: #009657;
    font-family: 'Frutiger', sans-serif;
    font-size: 86px !important;
    width: 500px
}

.ggskin.ggskin_text.passed > div:before {
  content: url(../../../../assets/23-2201_VR_360/p2vr/example-content/icons/icon_passed.svg);
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 500;
  width: 86px;
  height: 86px;

}


/*------FAILED*/

.ggskin.ggskin_text.failed > div {
  text-transform: uppercase;
  color: #ff0000;
  font-family: 'Frutiger', sans-serif;
  font-size: 86px !important;
  width: 500px
}

.ggskin.ggskin_text.failed > div:before {
content: url(../../../../assets/23-2201_VR_360/p2vr/example-content/icons/icon_failed.svg);
display: inline-block;
vertical-align: middle;
font-size: 20px;
font-weight: 500;
width: 86px;
height: 86px;

}









/*--------SCORECARD----------*/

.scorecard-label{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px white solid !important;
  border-radius: 99px;
  color: white !important;
  font-size: 16px;
  width: 245px !important;
}

.scorecard-label-mobile{
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px white solid !important;
  border-radius: 99px;
  color: white !important;
  font-size: 12px;
}

.scorecard-score{
  color: white !important;
}


.score-result{
  font-size: 50px;
  display: inline-block;
}

.score-result-mobile{
  font-size: 25px;
  display: inline-block;
}


.score-max{
  font-size: 60px;
  display: inline-block;
}

.score-max-mobile{
  font-size: 35px;
  display: inline-block;
}

.score-max-percent{
  font-size: 60px;
  display: inline-block;
  font-weight: 400 !important;
}

.score-max-percent-mobile{
  font-size: 35px;
  display: inline-block;
  font-weight: 400 !important;
}

.sc-status-indication{

}

  .sc-correct{}

  .sc-wrong{

  }


  .icon-wrong{
    content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/icon_x.svg') ;
    display: inline-block;
    height: 23px;
    margin: 0;
  }


  .icon-correct{
    content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/icon_check.svg') ;
    display: inline-block;
    height: 23px;
    margin: 0;
  }

/*----------VIDEO PLAYER----------*/


.vjs-loading-spinner{
  z-index:0;
  display: none !important;
}


.video-js .vjs-big-play-button {
  display: none !important;
}


.vid1-dimensions {
  width: 100vw;
  height: 100vh;
}


.vjs-poster img {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}




/*----------GLOBAL SKIN ELEMENTS----------*/



.button-nav{
  font-family: 'Frutiger', sans-serif;
  line-height: normal;
  font-size: 22px;
  width: 60px !important;
  height: 60px !important;
  background-color: #00965e !important;
  -webkit-transition: background-color .3s ease-in-out 0s;
  transition: background-color .3s ease-in-out 0s;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px;
  cursor: pointer !important;
  border: none !important;
}


.button-nav-mobile{
  font-family: 'Frutiger', sans-serif;
  line-height: normal;
  font-size: 22px;
  width: 25px !important;
  height: 25px !important;
  background-color: #00965e !important;
  -webkit-transition: background-color .3s ease-in-out 0s;
  transition: background-color .3s ease-in-out 0s;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px;
  cursor: pointer !important;
  border: none !important;
}

.button-nav * {
  cursor: pointer !important;
}

.button-nav > div{
  color: white;
  position: absolute;
  height: 30px !important;
  content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/arrow.svg')!important;
}

.button-nav-mobile > div{
  color: white;
  position: absolute;
  height: 15px !important;
  content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/arrow.svg')!important;
}


.button-nav:hover{
  background-color: #ff9730 !important;
}


.button-nav-forward{

}


.back{
  rotate: 180deg;
}




.button-close{
  font-family: 'Frutiger', sans-serif;
  line-height: normal;
  font-size: 22px;
  width: 60px !important;
  height: 60px !important;
  background-color: #00965e !important;
  -webkit-transition: background-color .3s ease-in-out 0s;
  transition: background-color .3s ease-in-out 0s;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px;
  cursor: pointer !important;
  border: none !important;
  position: absolute;
  content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/icon_close_app.svg')!important;
  box-sizing: border-box;
  padding: 15px;
}


.button-close:hover{
  background-color: #ff9730 !important;
}

/*----------SKIN MENU BAR----------*/

.menu-bar-container{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  padding-bottom: 25px;

}


.menu-bar-container-mobile{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;

}


.menu-bar-icon{
  background-color: transparent !important;
  position: relative !important;
  width: 30px;
  height: 30px;
  cursor: pointer !important;
  padding: 5px;
  transition: 0.5s;
  border-radius: 5px;
  top: auto !important;
  left: auto !important;

}

.menu-bar-icon:hover{
  background-color: #ff973063 !important;
}



.menu-bar-toggle-sound{
  background-color: transparent !important;
  width: 30px;
  height: 30px;
  cursor: pointer !important;
  transition: 0.5s;
  border-radius: 5px;
}

.menu-bar-toggle-sound:hover{
  background-color: #ff973063 !important;
}





    .icon-sound{
      content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/menu/sound.svg') !important;
    }

    .icon-sound-muted{
      content: url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/sound-muted.svg') !important;
    }

    .icon-fullscreen{
      content:url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/menu/icon_fullscreen.svg') !important;
    }

    .icon-progress{
      content:url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/menu/icon_progress.svg') !important;
    }

    .icon-save{
      content:url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/menu/save.svg') !important;
    }


    .icon-home{
      content:url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/menu/home.svg') !important;
    }


    .icon-close{
      content:url('../../../../assets/23-2201_VR_360/p2vr/example-content/icons/menu/close.svg') !important;
      width: 35px !important;
      height: 35px !important;
    }





    .icon-label{
      border: 1px solid white !important;
      border-radius: 99px;
      background: #0096571a !important;
      height: 50px !important ;
      width: 200px !important;
      font-family: 'Frutiger', sans-serif;
      font-size: 18px !important;
      color: white !important;
      font-weight: 700 !important;
    }

    .flexbox-icon-wrapper{
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      display: flex;
      align-content: center;
      justify-content: center;
      align-items: center;
    }

    .flexbox-icon{
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
    }




    /*----------INTRO----------*/


    .flexbox-intro-viewport{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
    
    }


    .flexbox-intro-container{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 10px;
      padding-bottom: 25px;
    
    }

    .flexbox-intro-item{
      position: relative !important;
      top: auto !important;
      left: auto !important;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 10px;
    }


    .flexbox-intro-nav-wrapper{
      position: relative !important;
      top: auto !important;
      left: auto !important;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 10px;
    }


    .flexbox-intro-nav-dots{
      position: relative !important;
      top: auto !important;
      left: auto !important;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 10px;
    }

    .nav-dots-inactive{
      width: 10px !important;
      height: 10px !important;
      border-radius: 99px !important;
      background-color: rgba(255, 255, 255, 0.5) !important;
    }

    .nav-dots-active{
      width: 16px !important;
      height: 16px !important;
      border-radius: 99px !important;
      background-color: rgba(255, 255, 255, 1) !important;
    }


    .flexbox-nav-container{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 10px;
    }


    .intro-slide-content{
      font-family: "poppins", sans-serif;
      font-size: max(1.46vw, 14px) !important;
      color: rgba(209, 209, 209, 1)!important;
      font-weight: 500;
      width: auto !important;
      line-height: 40px;
      letter-spacing: 0.01em;
    }

    .intro-slide-title{
      font-size: max(2.86vw, 16px) !important;
      color: white !important;
      font-weight: 700;
      width: auto !important;
      letter-spacing: 4px;
    }





    #transitionOverlay{
      height: 100%;
      width: 100%;
    }





    .transitionOverlay{
      height: 100%;
      width: 100%;
      animation-name: transition-effect ;
      animation-duration: 0.2s;
      animation-iteration-count: 1;
    }

  @keyframes transition-effect {
      0%   {background-color: rgba(255, 255, 255, 0); transform: scale(0); display: block;}
      5%  {transform: scale(1);}
      75%  {background-color: rgba(255, 255, 255, 0.9); }
      100% {background-color: rgba(255, 255, 255, 0);  display: none;}
    }


.video-360-container{
  left: 0px !important;
}


.overflow-auto{
  overflow: auto;
}