:root {
    --primary: #00afcf;
    --primary-hover: #0b889f;
    --primary-li: #8bb4c7;
    --secondary: #e2ebeb;
    --secondary-hover: #88888830;
    --tertiary: #ee5249;
    --background: #f5f5f5;
    --text: #565656;
    --text2: #314e59;
    --medium: #adadad;
    --light: #ededed;
    --bad: #a0211f;
    --bad-li: #ffdada;
    --good: #006f00;
    --good-li: #e4f3e3;
    --rounded: 12px;
    --rounded_sm: 6px;
    --margin-sm: 6px;
    --margin-md: 2rem;
    --margin-lg: 4.5rem;
    --raised: -5px -5px 10px 0px #ffffff, 5px 5px 10px 0px #bfbfbf;
    --raised-press: -2px -2px 5px 0px #ffffff, 2px 2px 5px 0px #bfbfbf;
    --inset: inset -5px -5px 14px 0px #ffffff75, inset 7px 7px 9px 0px #0000002b;
    --inset-press: inset -2px -2px 7px 0px #ffffff75, inset 2px 2px 6px 0px #0000002b;
    --title: 4.5rem;
    --heading: 2rem;
    --heading2: 1.4rem;
    --body: 1.2rem;
    --body2: 1.1rem;
    --heading-width: 50rem;
    --body-width: 40rem;
  }
  
  body {
      font-family: 'body';
  }
  
  .fixed-image, .full-image {
      background-image: none !important;
      background-position: 50% !important;
      background-repeat: no-repeat !important;
      background-size: cover;
      background-color: #E2E2E3 !important;
  }
  
  
  .exit_btn:before {
      content: "EXIT";
      position: relative;
      font-family: 'ui';
      font-weight: bold;
      left: 57px;
      top: 15px;
      font-size: 18px;
      letter-spacing: 1.6px;
      color: #221F23;
      border-right: none;
      padding-right: 17px;
  }
  
  
  .exit_btn {
      width: 116px !important;
      height: 55px !important;
      background-size: 36px !important;
      background-position: center right 90% !important;
      background-image: url(../../shared/test_statics/images/exit.png) !important;
      background-repeat: no-repeat;
      background-color: transparent;
      border-radius: 0px 0px 0px 0px;
      margin: 0px !important;
  }
  
  .exit_btn:hover {
  width: 116px !important;
      height: 55px !important;
     background-color: #1476b5 !important;
  background-repeat: no-repeat !important;
   border: solid 3px #221F23 !important;
     background-image: url(../../shared/test_statics/images/exit_hover.png) !important;
  }
  
  .start-tip {
      top: 17% !important;
      left: 10.7% !important;
      width: 57vw !important;
      font-style: normal !important;
      text-align: left !important;
      color: #191919 !important;
      font-size: 3.5vw !important;
      font-family: 'body-bold';
      line-height: 3.3vw;
  }
  
  .start-page-title {
      top: 24.2% !important;
      left: 11% !important;
      width: auto !important;
      background-color: #616161 !important;
      transform: skewX(0deg) !important;
      color: #e2e2e3 !important;
      font-family: 'body' !important;
      font-weight: 600 !important;
      font-size: 1.8vw !important;
      padding: 0.5% 1% .5% 1% !important;
      border-radius: 0.4vw !important;
  }
  
  .start-inst {
      top: 44% !important;
      left: 11% !important;
      width: 75% !important;
      color: #5c5c5c !important;
      font-family: 'body';
      font-size: 1.2vw !important;
  margin-top: 2vw !important;
  }
  
  .start-title {
      left: 11% !important;
      width: 75% !important;
      font-family: 'body' !important;
  }
  
  .start-submit {
      top: 77% !important;
      width: 13% !important;
      right: 13% !important;
      height: 6% !important;
      background-image: none !important;
      color: #ffffff !important;
      background-color: #1476b5 !important;
      border-radius: 0vw !important;
      padding: 0.8vw 0vw 0.2vw 1.4vw !important;
      font-family: 'ui' !important;
      font-size: 1.5rem !important;
      font-weight: 600 !important;
      border: solid 3px #221F23 !important;
      box-shadow: 6px 6px #221F23 !important;
  }
  
  .start-submit:hover {
      background-color: #cf8000 !important;
  
  }
  
  .video-close {
      background-color: #ff3232 !important;
      width: 45px !important;
      height: 44px !important;
      right: -45px !important;
      border-top-right-radius: 6px !important;
      border-bottom-right-radius: 6px !important;
  }
  
  .video-close:hover {
      background-color: #ff7a7a !important;
  }
  
  .video-close:after, .video-close:before {
      left: 21px !important;
      top: 12px !important;
      height: 1.1rem !important;
      width: 3px !important;
      background-color: white !important; 
  }
  
  .video-close:hover:after, .video-close:hover:before {
      left: 21px !important;
      top: 12px !important;
      height: 1.1rem !important;
      width: 3px !important;
      background-color: white !important; 
  }
  
  .test-mod-number {
      top: 0% !important;
      left: 44% !important;
      width: 12% !important;
      height: 7% !important;
      padding-left: 0.6%;
      background-image: none !important;
      font-weight: normal !important;
      font-size: 1.4vw !important;
      border-bottom: 5px solid #cf8000;
      color: #221F23 !important;
      font-family: 'body' !important;
  }
  
  .test-question{
      height: 17% !important;
      top: 40% !important;
      left: 7% !important;
      width: 40% !important;
      font-size: 1.3vw !important;
      line-height: 2vw !important;
      font-weight: normal !important;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: left !Important;
      margin-top: 2vw !important;
      margin-bottom: 2vw !important;
      color: #191919;
      font-family: 'accent-bold';
  }
  
  .test-optinos {
      left: 54% !important;
      top: 26% !important;
      width: 38% !important;
      height: 15% !important;
      margin-top: .5vw !important;
  }
  
  .test-option {
      padding: 2.6% 5% !important;
      border-radius: 0 !important;
      margin: 0 !important;
      margin-top: 4% !important;
      background-color: white !important;
      padding: 1vw 1vw 1vw 1vw!important;
      border: solid black !important;
      box-shadow: 6px 6px black !important;
  
  }
  
  .test-option:hover {
      background-color: #cf8000 !important;
      box-shadow: 3px 3px black !important;
      margin: calc(4% + 3px) 0 -3px 3px !important;
  }
  
  .test-option-text {
      padding: 0vw 1vw 0vw 1vw!important;
      font-weight: normal !important;
      font-family: 'body';
  }
  
  
  
  .selectedOption {
      color: #ffffff !important;
      background-color: #1476b5 !important;
      font-family: 'body';
  }
  
  .test-option-bar {
      background-image: none !important;
      display: none !important;
  }
  
  .test-back-btn {
      top: 70% !important;
      left: 68% !important;
      height: 6% !important;
      background-image: none !important;
      color: #404040 !important;
      background-color: transparent !important;
      border-radius: 0vw !important;
      font-family: Source Sans Pro,sans-serif !important;
      font-size: 1.2vw !important;
      font-weight: 400 !important;
      margin-top: 4vw !important;
  border: solid 3px #221F23 !important;
  
  }
  
  .test-back-btn:hover {
      border: solid 3px #221F23 !important;
      background-color: #f5f5f5 !important;
  }
  
  .test-next-btn-disable {
      top: 70% !important;
      right: initial !important;
      left: 82%;
      height: 6% !important;
      background-image: none !important;
      border-radius: 0vw !important;
      font-family: 'ui' !important;
      font-size: 1.2vw !important;
      margin-top: 4vw !important;
      color: #a9a9a9 !important;
      background-color: #E2E2E3 !important;
      border: solid 3px #a9a9a9 !important;
  }
  
  .test-next-btn-disable>span {
  margin-left: 0 !important;
  }
  
  .test-next-btn, .result-page-complete-button, .result-page-restart-button {
      top: 70% !important;
      right: initial !important;
      left: 82%;
      height: 6% !important;
      background-image: none !important;
      transition: none !important;
      border-radius: 0vw !important;
      font-family: 'ui' !important;
      font-size: 1.2vw !important;
      margin-top: 4vw !important;
      color: #ffffff !important;
      background-color: #1476b5 !important;
      border: solid 3px #221F23 !important;
      box-shadow: 6px 6px #221F23 !important;
      
  }
  
  .test-next-btn:hover, .result-page-complete-button:hover, .result-page-restart-button:hover{
     top: 70.3% !important;
     right: initial !important;
     left: 82.3%;
     width: 12% !important;
     height: 6% !important;
     background-image: none !important;
     transition: none !important;
     border-radius: 0vw !important;
     font-family: 'ui' !important;
     font-size: 1.2vw !important;
     margin-top: 4vw !important;
     color: #ffffff !important;
     background-color: #cf8000 !important;
     border: solid 3px #221F23 !important;
     box-shadow: 3px 3px #221F23 !important;
  }
  
  .result-page-result {
      padding-bottom: 1%;
      margin-top: -1%;
      width: 10% !important;
      margin-left: 80.5%;
      font-family: 'accent' !important;
      font-weight: normal !important;
      color: transparent !important;
  }
  
  .result-page-bottom>div{
      background-color: transparent !important;
      padding-bottom: 11% !important;
  }
  
  .result-page-bar{
      width: 50% !important;
      margin-left: 25.4% !important;
      margin-top: 15% !important;
      padding-right: 10% !important;
      background-color: #e2e2e3 !important;
      font-family: 'accent-bold' !important;
      color: #221f23 !important;
  }
  
  .result-page-message{
      margin-bottom: 4.5% !important;
      margin-top: 0% !important;
      color: #3a3a3a !important;
  }
  
  .result-page-score:before {
      content: "FINAL SCORE";
      width: auto;
      height: 1vw;
      font-size: 1vw;
      font-family: 'ui';
      color: #8d8d8d;
      top: 3vw !important;
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
  }
  
  .result-page-score{
      color: #ffffff !important;
      font-weight: 400 !important;
      width: 13vw !important;
      height: 13vw !important;
      left: 44% !important;
      margin-top: 0% !important;
      border: solid 6px #221F23 !important;
      border-radius: 50%;
      background-image: none !important;
      font-family: 'body';
  }
  
  .score-text{
      font-size: 4vw !important;
      font-weight: 600 !important;
      color: #221F23 !important;
      top: 54% !important;
  
  }
  
  .result-page-message {
      width: 50% !important;
      margin-left: 25% !important;
      background: none !important;
  }
  
  .result-page-icon {
      background-image: none !important;
      width: 7vw !important;
      height: 4.8vw !important;
      left: 18.4% !important;
      margin: 0 !important;
  }
  
  .question-text{
  
  }
  
  .feedback-block{
      width: 80% !important;
      margin-left: 10% !important;
      box-shadow: 0.4vw 0.5vw 0px #4e4e4e;
      border: solid 3px !important;
      min-height: 23vw;
      box-shadow: 6px 6px !important;
      background-color: transparent !important;
      border-radius: 0 !important;
  }
  
  .feedback-question{
      padding: 1% 3.3% !important;
      background-color: transparent;
      font-size: 1.2vw !important;
      color: #ffffff !important;
      text-align: left !important;
      font-family: 'ui-il' !important;
      margin-bottom: -3.2vw;
  }
  
  .feedback-question-text{
      margin-top: initial !important;
      margin-left: initial !important;
      padding: 2% 18% 2% 18% !important;
      width: initial !important;
      margin-right: -5.3%;
      color: #1c1c1c;
      font-size: 1.6vw !important;
      display: flex;
      justify-content: center;
      background-color: #000000 !important;
      color: #f1f1f1 !important;
      line-height: 2vw !important;
  }
  
  .feedback-answer-title {
      width: 22% !important;
      font-family: 'body-bold' !important;
      color: #6c6c6c8c;
  }
  
  .feedback-answer-text {
      color: #181818 !important;
      font-family: 'body' !important;
  }
  
  .feedback-answer-icon {
      width: 13%;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin: 5% 0px 0px -16.6% !important;
      position: absolute;
  }
  
  .feedback-tag{
      width: 14% !important;
      height: 9% !important;
      margin-top: -3.4% !important;
      margin-left: 64.9% !important;
  }
  
  .feedback-bar {
      background: none !important; 
  }
  
  .feedback-bar>div {
      background-color: transparent !important;
  }
  
  .feedback-box {
      background-image: none !important;
      margin-top: -4% !important;
      width: 36% !important;
      height: 20% !important;
      margin-left: 35% !important;
      background-color: transparent !important;
      border: none !important;
      box-shadow: initial !important;
      display: flex;
      align-content: center;
      justify-content: center;
      border-radius: 0vw !important;
  }
  
  .feedback-box-text {
      width: initial !important;
      height: initial !important;
      margin: 0 0 0 10% !important;
      align-self: center;
      color: #565656 !important;
      font-family: 'body-bold';
  }
  
  .result-next-btn, .result-next-btn:hover {
      width: 16% !important;
      margin-left: 41% !important;
  }
  .result-next-btn>span {
      margin-left: 0 !important;
      }
  
  .result-next-btn {
      top: 85% !important;
      height: 6% !important;
      background-image: none !important;
      color: #ffffff !important;
      background-color: #1476b5 !important;
      border-radius: 0vw !important;
      padding: 0.8vw 0vw 0.8vw 0vw !important;
      font-family: 'ui' !important;
      font-size: 1.6vw !important;
      border: solid 3px #221F23 !important;
      box-shadow: 6px 6px #221F23 !important;
  }
  
  .result-next-btn:hover {
      background-color: #cf8000 !important;
     
  }
  
  
  /* width */
  ::-webkit-scrollbar {
      width: 15px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
      background: #44444512;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #1476b5 !important;
      border-radius: 13px;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #452cfd !important;
      border-radius: 13px;
    }
  
  button.result-page-restart-button.interaction, .result-page-complete-button {
      position: fixed;
      z-index: 19;
      padding: 3vw;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      width: 12%;
      justify-content: center;
  }
  
  .popup-background {
      z-index: 20 !important;
      backdrop-filter: blur(4px);
      background-color: #333333b3 !important;
  }
  
  .completion-pop-up{
  width: 33rem !important;
  box-shadow: 0 0 30px #00000091;
  }
  
  .completion-banner {background-image: url(../test_statics/images/completion_top.png) !important;background-size: cover !important;border-radius: var(--rounded) var(--rounded) 0 0;}
  
  .completion-title {font-family: 'ui-bold' !important;font-size: 2.3rem !important;color: var(--text);margin-bottom: 2rem !important;letter-spacing: 0.05rem;}
  
  .completion-text {width: 85% !important;font-family: 'ui' !important;}
  
  .return-home-button {background-image: url(../test_statics/images/check.png) !important;box-shadow: initial !important;background-color: transparent !important;font-size: var(--heading2) !important;font-family: 'ui' !important;background-position: top 21px left 24px !important;}
  
  .return-home-button:hover {
  background-color: var(--light) !important;
  }
  
  .save-close-button{
  background-image: none;
  font-size: var(--heading2) !important;
  } 
  
  
  .completion-popup {
  }