// --------------------------------------------------
// --------------------------------------------------
// contentObject
// --------------------------------------------------
// --------------------------------------------------

// --------------------------------------------------
// Hide nav back button
// --------------------------------------------------

html {
  background-size: cover;
  background-position: center;
  /*background: url("assets/RR_EPL_scenario_bg.jpg");*/
  background-color: #f4f4f4;
}
   
body {
  background-color: #f4f4f4;
  color: #000;
}

.hide-nav-back-btn .nav__back-btn {
  .u-display-none;
}

// --------------------------------------------------

input[type="radio"]:focus+span {
  box-shadow: 0 0 1px 1px #1f36c7;
}

// --------------------------------------------------
// --------------------------------------------------
// Block
// --------------------------------------------------
// --------------------------------------------------

// --------------------------------------------------
// Custom class added to block
// Aligns child components centrally on the vertical axis
// --------------------------------------------------
.block.align-vert-center .component__container {
  align-items: center;
}

// --------------------------------------------------
.notify__btn-icon {
  background-color: transparent;
}

.notify__btn-icon .icon {
  filter: drop-shadow(1px 1px 1px #666);
}

// --------------------------------------------------
// Extend width of block to max page width
// --------------------------------------------------
.block.extend-container .block__inner {
  max-width: @max-width;
}

// --------------------------------------------------

// --------------------------------------------------
// Remove top padding from block
// --------------------------------------------------
.block.remove-top-padding .block__inner {
  padding-top: 0;
}

// --------------------------------------------------

// --------------------------------------------------
// Remove bottom padding from block
// --------------------------------------------------
.block.remove-bottom-padding .block__inner {
  padding-bottom: 0;
}

#app {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
  background-color: #fff;

  @media screen and (max-width: 896px) {
    padding: 0px 0px 0px 0px;
  }

}

#wrapper {
  // padding: 100px 10px 50px 10px;

}

.textRadioOptionsMCQsurvey {

  .text_bodytext {
    width: 100%;
    background: transparent;
    padding: 0px 100px 0px 100px;
    font-size: 1.5rem;

    @media screen and (max-width: 896px) {
      padding: 0px 5px 0px 5px;
    }
  }

  .container-title_survey_mcq {
    padding: 0px 100px 0px 100px;

    @media screen and (max-width: 896px) {
      padding: 0px 5px 0px 5px;
      font-size: 1rem;
    }
  }

  .textrd_question01 {
    width: 100px;
  }

  .numberContainer {
    max-width: 60%;
    background-color: #002559;
    color: #fff;
    padding: 2px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 1.2rem;
    min-height: 40px;

    @media screen and (max-width: 896px) {

      font-size: 1rem;
      max-width: 100%;
    }
  }

  .numberContainer .number {
    width: 5%;
    background: #fff;
    color: #002559;
    text-align: center;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    margin-left: 0.5px;

  }

  .numberContainer .numbertext {
    display: inline-block;
    width: 95%;
  }

  .textrd_question01 {
    position: relative;
    padding: 0px;
    display: block;
    color: #000;
    background: none;
    border-radius: 0px;
    font-size: 1.2rem;
    min-height: auto;
    margin-bottom: 15px;
    font-weight: 300;
    background-color: #fff;
    margin-top: 15px;
    width: 200px;

    @media screen and (max-width: 896px) {
      font-size: 1rem;
    }

  }

  .lab_container {
    display: inline-block;
    cursor: pointer;
    position: relative;
    width: 100%;
    padding: 10px 38px;
  }

  .lab_container input {
    position: absolute;
    opacity: 0;
    width: 100%;
    top: 0px;
    height: 100%;
    cursor: pointer;
    display: block !important;
    left: 0px !important;
    z-index: 1;
  }

  .lab_container .radioassessment {
    position: absolute;
    left: 10px;
    height: 22px;
    width: 22px;
    top: calc(50% - 10px);
    background-color: #ffffff;
    border: 1px solid #75787b;
    border-radius: 50%;
    z-index: 0;
  }

  .lab_container .radioassessment:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 4px;
    width: 12px;
    height: 12px;
    transform: none;
    background: #000000;
    border-radius: 50%;
  }

  .lab_container input:checked+.radioassessment,
  .lab_container input:checked+.radioassessment:after {
    display: block;
  }

  .label_number {
    position: absolute;
    top: 38px;
    left: 4px;
  }

  .disablebuttonSubmit {
    pointer-events: none;
    color: white;
    background: #A5A19D;
    background-color: #A5A19D !important;

  }

  .lab_container .correctIncorrectIcon {
    position: absolute;
    right: 0px;
    min-height: 44px;
    max-width: 47px;
    top: calc(50% - 22px);
    background: transparent;
    width: 100%;
  }

  .disabledoption {
    pointer-events: none;
    cursor: default;
  }
}




//MMCQ--------
.question_top_text {
  width: 100%;
  background: transparent;
  padding: 0px 100px 20px 100px;

  @media screen and (max-width: 896px) {
    padding: 0px 15px 20px 15px;
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    font-size: 1rem;
    padding: 0px 15px 20px 15px;
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
    font-size: 1rem;
    padding: 10px 40px 10px 40px;
  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    font-size: 1rem;
    padding: 0px 15px 20px 15px;
  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    font-size: 1rem;
    padding: 0px 40px 20px 40px !important;
  }


}

.question_top_text p {
  font-size: 1.2rem;
  margin-top: 0px;
  margin-bottom: 12px;

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    font-size: 1rem;

  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
    font-size: 1rem;

  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    font-size: 1rem;

  }
}

.gmcq__item-label {
  margin: 0.1rem !important;
}

.gmcq__item-label:focus {
  border: 1px solid #000;
}

.mr_submit_button {
  outline: none;
  border: none;
  padding: 5px 30px;
  background-color: #fde2c7;
  margin-left: 0px;
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #000 !important;
  border-radius: 0 !important;

  @media screen and (max-width: 896px) {
    font-size: 1rem;
  }
}

.mr_submit_button:hover {
  background-color: #002559 !important;
  color: #fff !important;
}

.mr_submit_button:focus {
  outline: 2px solid #000;
}

.mr_showfeedback_button {
  outline: none;
  border: none;
  padding: 5px 30px;
  background-color: #fde2c7;
  margin-left: 0px;
  font-size: 1.2rem;
  margin-bottom: 5px;
  display: none;
  color: #000 !important;
  border-radius: 0 !important;

  @media screen and (max-width: 896px) {
    font-size: 1rem;
  }

  &:hover {
    background-color: #002559 !important;
    color: #fff !important;
  }
}

.mr_showfeedback_button:focus {
  outline: 2px solid #000;
}

.diablebutton {
  pointer-events: none;
  background: #A5A19D !important;
}

.color1 {
  .mr_submit_button {
    background-color: #E6E2F6;
  }

  .mr_showfeedback_button {
    background-color: #E6E2F6;
  }
}
.color2 {
  .mr_submit_button {
    background-color: #FEF0E2 !important;
  }

  .mr_showfeedback_button {
    background-color: #FEF0E2 !important;
  }
}

.color3 {
  .mr_submit_button {
    background-color: #FCF6F9 !important;
  }

  .mr_showfeedback_button {
    background-color: #FCF6F9 !important;
  }
}

.color4 {
  .mr_submit_button {
    background-color: #FEFDEC !important;
  }

  .mr_showfeedback_button {
    background-color: #FEFDEC !important;
  }
}

.color5 {
  .mr_submit_button {
    background-color: #F5EBF2;
  }

  .mr_showfeedback_button {
    background-color: #F5EBF2;
  }
}

.hidePopup {
  display: none !important;
}

.showImage {
  display: block !important;
}

.gmcq__item-text {
  margin-top: 0;
  padding: 0.7rem;
  text-align: left;
  font-size: 1.2rem;

  @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:landscape) {
    font-size: 1rem;
  }

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    font-size: 1rem;
  }
}

.gmcq__item-label img {
  display: block;
  max-width: 100%;
  margin: auto;
}

.gmcq__item-option {
  margin-top: 0.5rem;
  padding: 0.5rem;
  background-color: #fde2c7;
  color: #000;
  border-radius: 0px;
  display: flex;
  align-items: center;
 
  padding-right: 40px;
}

.gmcq__item-option:focus {
  outline: 2px solid #000;
}

.MMCQ_container {
  width: 100%;
  height: auto;
  background: transparent;
  padding: 10px 20% 1rem 20%;
  // margin-bottom: 70px;

  @media screen and (max-width: 896px) {
    padding: 10px 15px 10px 15px;
  }

  .MMCQ_inner_container {
    background-color: #fff;
    padding: 10px 15px 10px 15px;
  }
}

.MMCQ1 {

  .gmcq__widget {
    padding: 0;
    min-height: 200px;
    max-width: 100%;
    background-color: #FFF;
    margin: 0 auto;
  }

  .textHeading {
    width: 100%;
    background: #E6E2F6;
    padding: 0px 100px 10px 100px;
    font-size: 1.5rem;

    @media screen and (max-width: 896px) {
      padding: 10px 15px 10px 15px;
      font-size: 1.3rem;
    }

  }

  .textHeading p {
    margin: 0;
    color: #002559;
  }

  .gmcq__item-label.is-selected .gmcq__item-option {
    background-color: #002559;
    color: #fff;
    padding-right: 40px;
  }

}


.MCQ_feedback .closeBtn_CYU:before {
  display: block;
  background-color: white;
  font-family: "vanilla";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 1.5rem;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000 !important;

}

.MCQ_feedback .closeBtn_CYU:before {
  content: "\e634";
  color: #000 !important;
}


.MMCQ_feedbackcontainer {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  z-index: 90;
  display: none;
  background: rgba(0, 0, 0, 0.5);

  .correct {
    padding: 32px 70px 30px;
    background-color: white;
    width: 100%;
    min-height: 330px;
    font-size: 1.2rem;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    width: 72%;
    position: absolute;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    display: none;

    @media screen and (max-width: 896px) {
      width: 90%;
      padding: 70px 25px 30px;
      font-size: 1rem;
    }
  }

  .incorrect {
    padding: 32px 70px 30px;
    background-color: white;
    width: 100%;
    min-height: 330px;
    font-size: 1.2rem;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    width: 72%;
    position: absolute;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    display: none;

    @media screen and (max-width: 896px) {
      width: 90%;
      padding: 70px 25px 30px;
      font-size: 1rem;
    }
  }

  .partial {
    padding: 32px 70px 30px;
    background-color: white;
    width: 100%;
    min-height: 330px;
    font-size: 1.2rem;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    width: 72%;
    position: absolute;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    display: none;

    @media screen and (max-width: 896px) {
      width: 90%;
      padding: 70px 25px 30px;
      font-size: 1rem;
    }
  }

}

//GMCQ Template bipin
.MCQ_ImageTemplate {
  .MMCQ_container {
    width: 100%;
    height: auto;
    background: transparent;
    padding: 10px 100px 10px 100px;

    @media screen and (max-width: 896px) {
      padding: 10px 15px 10px 15px !important;
    }

  }

  .gmcq__widget {
    padding: 0px;
    min-height: 200px;
    width: 100%;
    margin: 0 auto;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;

    @media screen and (max-width: 896px) {
      justify-content: center;
    }
  }

  .gmcq__item {
    max-width: 340px;
    background-color: #002559;
    border: 3px solid #002559;
    border-radius: 10px;
    @media screen and (max-width: 896px) {
      justify-content: center;
      margin-top: 20px;
      max-width: 100% !important;
      width: 100% !important;
    }
  }

  .gmcq__item-label .gmcq__item-image {
    display: block;
    max-width: 100%;
    margin: auto;
    width: 360px;
    height: auto;

    @media screen and (max-width: 896px) {
      width: 100%;
    }
  }

  .callout_top {
    background-color: #fff;
    padding: 10px;
    color: #FFF;
    position: relative;
    // min-height: 60px;
  }

  .callout_top::after {
    content: '';
    position: absolute;
    top: 99%;
    right: 15%;
    width: 0;
    height: 0;
    border: 38px solid transparent;
    border-top-color: #002559;
    border-bottom: 0;
    border-left: 0;
  }

  .component__attribution {
    background-color: #fff;
    padding: 10px;
    color: #000;
    position: relative;
    min-height: 168px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 2px solid #002559;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    // min-height: 60px;
    @media screen and (max-width: 896px) {
      min-height: auto;
    }
  }

  .component__attribution::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 24%;
    width: 36px;
    height: 30px;
    background: url(course/en/images/Callout_Pointer.svg);
    background-repeat: no-repeat;
    background-size: 22px;
  }

  .gmcq__attribution {
    position: relative;
  }

  .gmcq__item-label.is-selected .gmcq__item-option {
    background-color: #002559;
    color: #fff;
    // margin-top: 0;
    // margin-left: 2px;
    // margin-right: 2px;
  }

  .textHeading {
    width: 100%;
    background: transparent;
    padding: 10px 100px 10px 100px;
    font-size: 1.5rem;

    @media screen and (max-width: 896px) {
      padding: 10px 15px 10px 15px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1.3rem;
      padding: 0 15px 0 15px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1.3rem;
      padding: 0 40px 0 40px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1.3rem;
      padding: 0 15px 0 15px;
    }

    .question_top_text {
      width: 100%;
      background: #fff;
      padding: 0px 100px 20px 100px;

      @media screen and (max-width: 896px) {
        padding: 10px 15px 10px 15px;
      }

      @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
        font-size: 1.3rem;
        padding: 0 15px 0 15px;
      }

      @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
        font-size: 1.3rem;
        padding: 0 40px 0 40px;
      }

      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
        font-size: 1.3rem;
        padding: 0 15px 0 15px;
      }

    }


  }

  .textHeading p {
    margin: 0;
    // color: #002559;
  }

  .feedbackicon {
    left: 19px;
    top: 24px;
    max-width: 38px;
    position: absolute;
  }

  .gmcq__item-option {
    background: transparent !important;
    padding-left: 30px;
    margin-top: 0;
    margin-left: 2px;
    margin-right: 2.5px;
    margin-bottom: 2px;
  }

  .is-selected.correctOpt .gmcq__item-option .gmcq__item-correct-icon {
    position: absolute;
    right: 0px;
    max-width: 47px;
    background: #ffffff69 !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    top: calc(100% - 50px) !important;
    border-bottom-right-radius: 10px;
  }

  .is-selected.inCorrectOpt .gmcq__item-option .gmcq__item-incorrect-icon {
    position: absolute;
    right: 0px;
    max-width: 47px;
    top: calc(100% - 50px) !important;
    background: #ffffff69 !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 10px;
  }

  .correctOpt .gmcq__item-option .gmcq__item-correct-icon {
    position: absolute;
    right: 0px;
    max-width: 47px;
    top: calc(100% - 50px) !important;
    background: #ffffff69 !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 10px;
  }

  .inCorrectOpt .gmcq__item-option .gmcq__item-incorrect-icon {
    position: absolute;
    right: 0px;
    max-width: 47px;
    top: calc(100% - 50px) !important;
    background: #ffffff69 !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 10px;
  }

  .MMCQ_container .MMCQ_inner_container {
    background-color: #fff !important;
    padding: 5px;
  }


}

.MCQ_ImageTemplate {
  .mr_submit_button {
    outline: none;
    border: none;
    padding: 5px 30px;
    background-color: #002559;
    margin-left: 0px;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #fff;
    border-radius: 0 !important;
  }

  .mr_submit_button:hover {
    background-color: #002559;
    // color: #fff;
  }

  .mr_submit_button:focus {
    outline: 2px solid #000;
  }

  .mr_showfeedback_button {
    outline: none;
    border: none;
    padding: 5px 30px;
    background-color: #002559;
    margin-left: 0px;
    font-size: 1.2rem;
    margin-bottom: 5px;
    display: none;
    color: #fff !important;
    border-radius: 0 !important;

    &:hover {
      background-color: #002559 !important;
      color: #fff !important;
    }
  }

  .mr_showfeedback_button:focus {
    outline: 2px solid #000;
  }

  .diablebutton {
    pointer-events: none;
    background: #A5A19D !important;
    color: #000 !important;
  }

  .gmcq__item-option {
    color: #fff;
  }

  .gmcq__item-label.is-disabled .gmcq__item-option {
    color: #fff;
   margin: 1px 0px 0px 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}



@media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) {
  .MCQ_ImageTemplate .gmcq__item {
    max-width: 280px;
  }

  .MCQ_ImageTemplate .MMCQ_container {
    padding: 10px 92px 10px 92px;
  }

  .MCQ_ImageTemplate .component__attribution {
    min-height: 190px;
  }

}

.isIntroSpeechBubble {

  .staticPageWrapper_speechbubble {
    width: 100%;
    height: auto;
  }

  .container-title {

    width: 100%;
    height: auto;
    color: #000;
    // background-color: #FEF0E2;
    padding: 20px 5px 20px 100px;

    @media screen and (max-width: 896px) {
      padding: 20px 25px 20px 5px;
    }

  }


  .callout_top {
    background-color: #fff;
    border: 3px solid #002559;
    border-radius: 10px;
    padding: 10px;
    color: #000;
    position: relative;
    font-size: 1.2rem;
    text-align: center;
    top: 5px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1rem;

    }

    // text-align: center;

    // min-height: 60px;
  }

  .callout_top::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 40%;  
    width: 36px;
    height: 30px;
    background: url(course/en/images/Callout_Pointer.svg);
    background-repeat: no-repeat;
    background-size: 30px;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      position: absolute;
      top: 100%;
      left: 40%;
      width: 36px;
      height: 30px;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 18px;

    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      position: absolute;
      top: 100%;
      left: 30%;
      width: 36px;
      height: 30px;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 18px;

    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      position: absolute;
      top: 100%;
      left: 40%;
      width: 36px;
      height: 30px;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 30px;

    }
  }

  .contentpart {
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .callout_area {
    max-width: 560px;
  }

  .textHeading {
    width: 100%;
    background: transparent;
    padding: 0px 100px 0px 100px;
    font-size: 1.5rem;

    @media screen and (max-width: 896px) {
      padding: 10px 15px 0px 15px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1.3rem;
      padding: 0 15px 0 15px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1.3rem;
      padding: 0 40px 0 40px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1.3rem;
      padding: 0 15px 0 15px;
    }
  }

  .textHeading p {
    margin: 0;
    // color: #002559;
    color: #000 !important;
  }

  .bodynum {
    width: 100%;
    background: transparent;
    padding: 0px 100px 20px 100px;

    @media screen and (max-width: 896px) {
      padding: 10px 25px 10px 5px;
    }
  }
}

.isIntroSpeechBubbleCopy {
  .callout_top {
   background-color: #fff;
    border: 3px solid #002559;
    border-radius: 10px;
    padding: 10px;
    color: #000;
    position: relative;
    font-size: 1.2rem;
    text-align: center;
    top: 5px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1rem;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1rem;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1rem;
    }
  }

  .callout_top::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 32%;
    width: 36px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer.svg);
    background-repeat: no-repeat;
    background-size: 30px;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      position: absolute;
      top: 100%;
      left: 32%;
      width: 36px;
      height: 30px;

      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 18px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      position: absolute;
      top: 100%;
      left: 32%;
      width: 36px;
      height: 30px;
    
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 18px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      position: absolute;
      top: 100%;
      left: 32%;
      width: 36px;
      height: 30px;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }
  }
}

//--------------end
/*MMCQ Carousal css start*/

//MCQ_ImageTemplate
.MMCQ_Carosel {

  .cyuScroll .cyu-options ._item .lab_container input {
    position: absolute;
    opacity: 0;
    width: 100%;
    top: 0px;
    height: 100%;
    cursor: pointer;
    display: block !important;
    left: 0px !important;
    z-index: 1;
  }

  .cyuScroll .cyu-options ._item {
    position: relative;
    padding: 0;
    display: block;
    color: #000;
    background: none;
    border-radius: 0px;
    font-size: 1.2rem;
    min-height: auto;
    margin-bottom: 15px;
    font-weight: 300;
    cursor: pointer;
    background-color: #fde2c7;
    margin-top: 15px;
    width: 100%;
  }

  .cyuScroll .lab_container .radioassessment {
    position: absolute;
    left: 20px;
    height: 21px;
    width: 21px;
    top: calc(50% - 10px);
    background-color: #ffffff;
    border: 1px solid #75787b;
    border-radius: 0% !important;
    z-index: 0;
  }

  .cyuScroll .lab_container input:checked+.radioassessment {
    transform: none;
    background: #ffffff;
    border: 1px solid #75787b;
  }

  .cyuScroll .lab_container input:checked+.radioassessment,
  .cyuScroll .lab_container input:checked+.radioassessment:after {
    display: block;
    border: 2px solid #000;

  }

  .cyuScroll .lab_container .radioassessment:after {
    content: "";
    position: absolute;
    display: none;
    left: 3px;
    top: 3px;
    width: 12px;
    height: 12px;
    transform: none;
    background: #000000;
    border-radius: 0%;
  }

  .closeBtn_MMCQ {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .closeBtn_MMCQ:before {
    display: block;
    background-color: white;
    font-family: "vanilla";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  }

  .closeBtn_MMCQ:before {
    content: "\e634";
  }

  .showAnswerMMCQ {
    outline: none;
    border: none;
    padding: 10px 20px;
    background-color: #fde2c7;
    margin-left: 0px;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #000 !important;
  }

  .showAnswerMMCQ:hover {
    background-color: #002559;
    color: #fff !important;
  }

  .showAnswerMMCQ:focus {
    outline: 2px solid #000;
  }

}

/*MMCQ carousal css end*/


// --------------------------------------------------

// --------------------------------------------------
// Background color mixin
// Add to block to enable
// e.g. 'block-color black'
// Note: both arguments must be predefined variables
// --------------------------------------------------
.block-color-mixin(transparent-light, black);
.block-color-mixin(transparent-dark, white);
.block-color-mixin(black, white);
.block-color-mixin(background, background-inverted);

.block-color-mixin(@color, @color-inverted) {
  .block-color.@{color} {
    background-color: @@color;
    color: @@color-inverted;

    .block,
    .component {

      &__title,
      &__body a,
      &__instruction a {
        color: @@color-inverted;
      }
    }

    .pagelevelprogress {
      &__indicator {
        border-color: @@color-inverted;
      }

      &__indicator-inner {
        background-color: @@color;
      }

      &__indicator-bar {
        background-color: @@color-inverted;
      }
    }

    .narrative {
      &__progress {
        background-color: fade(@@color-inverted, 50%);
      }

      &__progress.is-selected {
        background-color: @@color-inverted;
      }
    }
  }
}

.component__title-inner {
  display: block;
}

.text__body-inner ul li {
  // margin-bottom: 1rem;
}

// Home Page CSS
.component__inner>div {
  // width: 100%;
  // margin: auto;
  // max-width: 95%;
  // min-width: 90%;
}

.media__inner {
  &>div {
    max-width: 100%;
  }
}

.home-page {
  background-color: #58009c;

  .home-page-container {
    .left-container {
      background-color: #ffffff;
      height: 100vh;
      justify-content: center;
      border-left: 80px solid #7705bc;
      border-right: 10px solid #7705bc;
      width: 40%;

      // @media screen and (max-width: 850px) {
      //   height: 70vh;
      //   width: 100%;
      // }
      // @media screen and (max-height: 500px) {
      //   min-height: 30rem;
      //   .team-container {
      //     min-height: 15rem;
      //   }
      // }
      .inner-content {
        margin-top: 25px;
        position: relative;
        width: 80%;

        .logoContainer {
          img {
            width: 100%;
          }
        }

        .splash_content {
          text-align: center;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 12%;

          h2 {
            font-size: 2rem;
            font-weight: bold;
            color: #006dff;
            line-height: 1.2;
            font-family: 'RRPioneerMedium';

            span {
              font-size: 2.5rem;
            }
          }

          .btn.start-btn {
            text-align: center;
            padding: 0px;
            background-color: #7705bc;
            color: #fff;
            border-radius: 7px;
            line-height: 1.7;
            font-size: 22px;
            height: 34px;
            width: 100px;
            margin-top: 20px;
          }
        }
      }
    }

    .logo-container {
      background-color: #fff;
    }

    .right-container {
      // background-color: @sunset-red;
      width: 60%;

      img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
      }

      .inner-content {
        height: 50vh;
        width: 100%;
        padding: 1rem;

        // @media screen and (max-width: 850px) {
        //   height: 30vh;
        //   width: 50%;
        // }
        img {
          min-width: auto;
          max-height: 100%;
          margin: auto;
        }

        &.get-started-container {
          background-color: @sunset-red;
          color: @white-text;

          h2 {
            font-size: 3vw;

            @media screen and (max-width: 896px) {
              display: none;
            }
          }
        }
      }

      // @media screen and (max-width: 850px) {
      //   width: 100%;
      //   display: flex;display:-ms-flexbox;
      // }
    }
  }
}

.setup-page {
  .setup-container {
    background: #58009c;
  }

  .setup-container .setup-left-container {
    min-height: calc(100% - 7rem);
    width: 100%;
    padding: 1rem;
    // display: flex;
    // display: -ms-flexbox;
    // flex-direction: column;
    // justify-content: space-between;
    margin-top: 7%;
    border-right: 2px solid #c15eff;

    .logoContainer {
      width: 77%;
      margin: auto;
    }
  }

  .setup-container .mobile-left-container {
    display: block;
    background: #fff;
    margin-left: 4%;
    width: 40%;
    // @media screen and (max-width: 850px) {
    //   display: none;
    // }
  }

  .setup-container .mobile-right-container {
    width: 56%;
  }

  // #checkboxes::-webkit-scrollbar{
  //   width: 5px;
  // }

  .setup-container .mobile-right-container .profile-text-mobile-container {
    display: none;

    @media screen and (max-width: 896px) {
      display: inline-block;
      width: 75%;
      margin-left: 4%;
      margin-bottom: 5%;

      .profile-text {
        font-size: 1.5rem;
        color: @white-text;
      }
    }
  }

  .setup-container .setup-left-container .profile-container {
    max-width: 296px;
    height: 296px;
    margin: 3rem auto 0;
  }

  .setup-container .setup-left-container h2 {
    font-size: 3rem;
    color: @white-text;
    text-align: left;
    padding-left: 4rem;

    @media screen and (max-width: 1000px) {
      padding-left: 1rem;
    }
  }

  .setup-container .setup-left-container .profile-container img {
    width: 100%;
    height: auto;
  }

  .setup-container .setup-right-container {
    background-color: #fff;
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding-bottom: 20px;
  }

  .setup-container .setup-right-container .form-container {
    width: 100%;
    color: @white-text;
    padding: 3rem 1.5rem 1rem;
    font-family: "RR-light";
    height: 100%;
    justify-content: center;
  }

  @media screen and (max-width: 896px) {
    padding: 0;
  }
}

.setup-container .setup-right-container .form-container form {
  width: 100%;
  max-width: 32rem;

  @media screen and (max-width: 896px) {
    max-width: 100%;
    margin-top: 2%;
  }
}

.setup-container .setup-right-container .form-container form .search-container {
  background-color: #1f36c7;
  line-height: 3.5rem;
  padding-left: 15px;
  color: #f5f8fc;
  margin-bottom: 4%;
}

.setup-container .setup-right-container .form-container form .search-container label {
  font-size: 1rem;
  line-height: 1rem;
  margin-right: 4%;
  font-weight: bold;
}

.setup-container .setup-right-container .form-container form .search-container input {
  height: auto;
  border: none;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 1rem;
  width: calc(100% - 95px);
  line-height: 1;
}

.setup-container .setup-right-container .form-container form .select-box-container {
  position: relative;
  z-index: 10;
  color: #000;
  width: 49%;
  margin: auto;
  font-size: 1.3rem;

  // height: 100%;
  .mobile-center {
    // height: 50px;
    position: relative;
  }
}

.setup-container .setup-right-container .form-container form .selectBox {
  position: relative;
}

.setup-container .setup-right-container .form-container form .selectBox .select-arrow {
  position: absolute;
  right: 20px;
  top: 18px;
}

.setup-container .setup-right-container .form-container form .selectBox .select-box {
  width: 100%;
  font-weight: bold;
}

.setup-container .setup-right-container .form-container form #checkboxes {
  display: none;
  background-color: #fff;
  // max-height: 360px;
  height: auto;

  // overflow: auto;
  @media screen and (max-height:767px) {
    // max-height: 200px;
  }

  // @media screen and (max-height:670px) and (min-width:800){
  //   max-height: 220px;
  // }
}

.setup-container .setup-right-container .form-container form #checkboxes label {
  display: block;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.setup-container .setup-right-container .form-container form .select-box {
  // font-size: 1rem;
  background-color: #1f36c7;
  border: none;
  color: #f8eded;
  font-weight: bold;
  -webkit-appearance: none;
  appearance: none;
  padding: 1rem;
  line-height: 1.5;
  border-radius: 0;
}

.setup-container .setup-right-container .form-container form .redio-btn-container {
  display: block;
  position: relative;
  padding-left: 18px;
  margin-bottom: 0px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #fff;
  border-bottom: 1px solid rgba(31, 54, 199, 0.1);
  min-height: 31px;
  line-height: 31px;
  border: 2px solid #c15eff;
  margin-bottom: 15px;
  text-align: center;

  &:hover {
    background-color: #c15eff;
    color: #fff;

    .radio-text {
      color: #ffffff;
    }
  }


}

.setup-container .setup-right-container .form-container form .redio-btn-container .radio-text {
  color: #000;
  /* font-weight: bold; */
  font-size: 1.2rem;
}

// stylish checkbox
/* Hide the browser's default radio button */
.setup-container .setup-right-container .form-container form .redio-btn-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.setup-container .setup-right-container .form-container form .redio-btn-container .checkmark {
  position: absolute;
  top: 10px;
  right: 25px;
  height: 26px;
  width: 26px;
  background-color: rgba(0, 94, 239, 0.3);
  border-radius: 50%;
  display: none;
}

.checked {
  background-color: #c15eff !important;
  color: #fff !important;

  .radio-text {
    color: #fff !important;
  }
}

.btn.btn-primary:hover,
.btn.btn-primary:active {
  color: #fff !important;
}

.setup-container .setup-right-container .form-container form .redio-btn-container.disabled {
  pointer-events: none;
  background: #1c1c1c1f;
  border: 2px solid #ccc;
  cursor: default;
}

/* On mouse-over, add a grey background color */
// .setup-container .setup-right-container .form-container form .redio-btn-container:hover input ~ .checkmark {
//   background-color: #005eef;
// }

/* When the radio button is checked, add a blue background */
// .setup-container .setup-right-container .form-container form .redio-btn-container input:checked ~ .checkmark {
//   background-color: #005eef;
// }

.desktop_img_accourdian {
  display: block;
}

.mobile_img_accourdian {
  display: none;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.setup-container .setup-right-container .form-container form .redio-btn-container:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.setup-container .setup-right-container .form-container form .redio-btn-container input:checked~.checkmark:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #005eef;
  content: "";
  transform: translate(-50%, -50%);
}

/* Style the indicator (dot/circle) */
.setup-container .setup-right-container .form-container form .redio-btn-container .checkmark:after {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #005eef;
  content: "";
}

select::-ms-expand {
  display: none;
}

.setup-container .setup-right-container .footer-container {
  display: block;
  padding: 1rem;
  width: 100%;
  padding-bottom: 0;
}

.setup-container .setup-right-container .footer-container .left-footer-container {
  height: 220px;
  width: 145px;
  position: absolute;
  left: 10px;
  bottom: 20%;

  @media screen and (max-width: 896px) {
    width: 68px;
    left: 10px;
    bottom: 5%;
    height: 104px;
  }
}

.setup-container .setup-right-container .footer-container .right-footer-container {
  height: 230px;
  width: 163px;
  position: absolute;
  right: 10px;
  bottom: 20%;

  @media screen and (max-width: 896px) {
    height: 90px;
    width: 58px;
    top: 10px;
  }
}

.setup-container .setup-right-container .footer-container img {
  height: auto;
  width: 100%;
}

.setup-container .setup-right-container .continue_btn {
  // position: absolute;
  margin: auto;
  width: 100px;
  text-align: center;
  border-radius: 7px;
  margin-top: 20px;
  font-size: 22px;
  line-height: 1.7;
  height: 34px;
  background-color: #58009c;
  color: #fff;

  @media screen and (max-width: 896px) {
    // border-radius: 2rem;
    // font-size: 0.8rem;
    // line-height: 0.8em;
    // bottom: 12%;
    // left: 50%;
    // padding: 1rem 0.8rem 1rem;
    // transform: translateX(-50%);
    // max-width: 150px;
  }
}

.bg-primary {
  background-color: @blue-primary;
}

.icon_hidden {
  @media screen and (max-width: 896px) {
    display: none !important;
  }
}

.menu-item.is-complete .boxmenu-item__button span.icon.icon-padlock-unlocked:before {
  content: "";
  background-image: url(assets/icons/RR_EPL_menu_completed.png);
  height: 29px;
  width: 29px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

// End Setup Page
.icon-padlock-locked:before {
  content: "";
  background-image: url(assets/icons/RR_EPL_menu_locked.png);
  height: 20px;
  width: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.icon-padlock-unlocked:before {
  content: "";
  background-image: url(assets/icons/RR_EPL_menu_active.png);
  height: 20px;
  width: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.menu.boxmenu .boxmenu-item__button-container {
  transition: all 300ms ease-in-out;
  pointer-events: none;
}

.menu-item:first-child .boxmenu-item__button {
  pointer-events: all;
}

.meet-the-team-container {
  .left-container {
    .team-container {
      height: 50vh;
      overflow: hidden;
      padding: 1.5rem;
      cursor: pointer;

      img {
        width: 80%;
        min-width: auto;
        margin: auto;
        margin-top: 10%;
      }
    }

    @media screen and (max-width: 896px) {
      height: 60vh;
      width: 100%;

      .team-container {
        height: 30vh;
        padding: 0.25rem;

        img {
          width: 90%;
          margin-top: 15%;
        }
      }
    }

    @media screen and (max-height: 500px) {
      min-height: 30rem;

      .team-container {
        min-height: 15rem;
      }
    }
  }

  .right-container {
    background-color: @blue-primary;
    color: @white-text;
    padding-left: 3%;

    @media screen and (max-width: 896px) {
      width: 100%;
      display: flex;
      display: -ms-flexbox;
      min-height: 40vh;
      align-items: center;
    }

    .welcome-text {
      font-size: 3vw;

      @media screen and (max-width: 896px) {
        font-size: 2rem;
        text-align: left;
        margin-top: 0;
      }
    }

    .inner-content {
      height: 50vh;
      width: 100%;
      padding: 2.5rem;

      .start-btn {
        margin-right: -2.5rem;

        @media screen and (max-width: 896px) {
          background-color: @sunset-red;
        }
      }

      @media screen and (max-width: 896px) {
        height: auto;
        width: 50%;
        padding: 1rem;

        .start-btn {
          margin-right: -1rem;
          background-color: @sunset-red;
        }

        .body-content {
          width: auto;
        }
      }
    }
  }

  .user-name {
    font-weight: 300;
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1.75rem;
    overflow: hidden;
    text-overflow: ellipsis;

    @media screen and (max-width: 896px) {
      max-width: 265px;
      padding-right: 5px;
    }
  }
}

.meet-team-notify {
  overflow-y: auto !important;

  .notify__close-btn {
    display: none;
  }

  .notify__btn-icon.notify__close-btn {
    .icon {
      background-image: url(assets/icons/Button_Close.png);
      width: 16px;
      height: 16px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;

      &:before {
        display: none;
      }
    }
  }

  .notify__popup-inner {
    max-width: 100%;
    padding: 0;

    .inner-container {
      &.user-img-container {
        @media screen and (max-width: 896px) {
          max-height: 200px;
          overflow: hidden;
          padding: 0.5rem;
        }
      }

      padding: 2rem;
    }

    .team-body {
      p {
        font-size: 1.5rem;
      }

      img {
        @media screen and (max-width: 896px) {
          display: none;
        }

        width: 90%;
        min-width: auto;
        margin-left: 10%;
        margin-bottom: 50px;

        @media screen and (-ms-high-contrast: active),
        (-ms-high-contrast: none) {
          width: cala(90% - 5rem);
        }
      }

      @media screen and (max-width: 1024px) {
        width: 100%;
      }
    }

    .right-inner-container {
      flex-direction: column;
      justify-content: space-between;
    }

    .meet-the-team-pop-up {
      min-height: 100vh;
      display: flex;
      display: -ms-flexbox;

      .team-heading {
        h2 {
          font-size: 3vw;

          @media screen and (max-width: 896px) {
            font-size: 1.5rem;
            font-weight: 200;
          }
        }

        h3 {
          font-size: 2.2vw;
          margin-bottom: 2.5em;
          margin-top: 1em;

          @media screen and (max-width: 896px) {
            font-size: 1.5rem;
            font-weight: 200;
          }
        }
      }

      .team-footer {
        position: absolute;
        bottom: 15px;
        width: 15%;
        right: 0;

        @media screen and (max-width: 896px) {
          width: 100%;
          position: static;
        }

        button.btn {
          border: 1px solid;
          border-radius: 20px;
          padding: 8px 16px;
          transition: all 150ms;
          min-width: 100px;

          &:hover {
            background-color: transparent;
            // filter: drop-shadow(1px 2px 1px #000);
            // -ms-filter: drop-shadow(1px 2px 1px #000);
          }
        }
      }
    }
  }
}

.corna-page-container {
  background-color: #58009c;
  color: #000;
  min-height: 100vh;
  position: relative;

  .disclaimer_container {
    background: #fff;
    height: auto;
    width: 88%;
    margin: 74px auto 0 auto;
    padding: 30px;

    h2.dis_heading {
      background: #58009c;
      color: #fff;
      padding: 2px 20px 0 20px;
      margin-right: -31px;
      display: flex;
      align-items: center;
      min-height: 45px;
      font-family: 'RRPioneerMedium';
      font-weight: 400;
    }
  }

  .disclaimer_btn {
    // position: absolute;
    bottom: 25px;
    right: 0;
    left: 0;
    background: #58009c;
    width: 100px;
    margin: auto;
    padding: 0;
    color: #fff;
    border-radius: 7px;
    line-height: 1.7;
    height: 34px;
    font-size: 22px;
  }

  &>.row {


    .container_header {
      position: fixed;
      height: 74px;
      z-index: 9;

      img {
        margin: 15px;
      }
    }

    .left-container {
      .content {
        max-width: 900px;
        width: 100%;
        padding: 1.5rem;

        img {
          max-width: 180px;
          width: 100%;
          margin: 0 auto 1.5rem;
        }

        h2 {
          font-size: 3.5rem;
          margin-bottom: 0.5em;
          margin-top: 0;

          @media screen and (max-width: 896px) {
            font-size: 2.8rem !important;
          }
        }

        p {
          font-size: 2rem;
          margin-top: 0.7em;
          font-weight: 700;
        }

        .mt-15p {
          margin-top: 15%;
        }
      }

      @media screen and (min-width: 540px) {
        .col-4 {
          width: 33.33%;
        }
      }
    }

    .vid_container {
      width: 960px;
      min-height: 550px;
      margin: auto;
      // background: #fff;
      border-radius: 10px;
      // padding: 10px;
      box-sizing: content-box;
      position: relative;
      border: 10px solid #fff;

      .video_backdrop {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0;
        background-color: #101010bd;

        // border-radius: 10px;
        // border: 10px solid #fff;
        .main-container {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .icon_container {

            img {
              width: 100%;
              height: auto;
              max-width: 120px;
              cursor: pointer;
              border-radius: 50%;
            }

          }

          .content_container {
            color: #fff;
            width: 100%;
            text-align: center;
            font-size: 1.5rem;
            font-family: 'RRPioneer_Bold';
            line-height: 1.5;
            position: relative;
            top: 10%;

            img {
              display: inline-block;
              width: 35px;
              margin-left: 10px;
              position: relative;
              top: 10px;
            }
          }
        }

      }

      .vid_transcriptArea {
        background: #c8c7cc;
        margin: -7px 0 0 0;
        height: auto;
        text-align: center;

        .trnascriptBtn {
          width: 100%;
          height: 30px;
          background: #525154;
          text-transform: uppercase;
          color: #fff;
          font-weight: 100;
          font-size: 1rem;

          &:hover {
            background-color: #0a2768;
            color: #ffffff;
          }
        }

        .transcript_text {
          font-size: 1rem;
          padding: 0.5rem 1rem 0.5rem;
          display: none;
          max-height: 90px;
          overflow: auto;

          p {
            margin: 0;
          }
        }
      }

    }

    .right-container {
      justify-content: space-evenly;

      .btn.btn-primary {
        background-color: #032480;
        color: #00d7c4;

        span.mid-line {
          color: currentColor;
        }

        &:hover,
        &:active {
          background-color: #7705bc;
        }
      }

      @media screen and (max-width: 896px) {
        width: 100%;
        padding-bottom: 2rem;
      }
    }
  }

  .fotterBtn {
    // position: absolute;
    width: 100px;
    text-align: center;
    padding: 0;
    margin: 60px auto;
    padding: 3px;
    font-weight: 500;
    line-height: 1.5;
    transition: all 500ms;

    button {
      background: #58009c;
      color: #ffffff;
      padding: 0px;
      border: 2px solid #fff;
      border-radius: 7px;
      width: 100px;
      line-height: 1.5;
      font-size: 22px;
      height: 34px;
    }
  }
}

.video_page {
  width: 100%;
  height: auto;
  margin-top: 80px;
}

.meet_coach {
  width: 100%;
  height: auto;
  font-family: "RR-light";
  margin-top: 80px;

  .coach_bg {
    width: 87%;
    height: auto;
    margin: auto;
    background: #fff;

    .coach_image {
      width: 79%;
      margin: 19px auto 0 auto;
    }

    .learning_image {
      width: 100%;
      margin: 0;
    }

    .coachtext {
      width: 88%;
      margin: 11% 0 0 0;
      font-size: 1.5rem;

      .coach_title {}

    }

    .learningtext {
      width: 100%;
      padding: 0 20px;
      margin: 0;
      font-size: 1.5rem;

      .coach_title {}
    }

    .meetcoachStrip {
      position: absolute;
      width: 90%;
      background: #58009c;
      height: 45px;
      color: #fff;
      font-weight: 500;
      bottom: 30px;
      line-height: 45px;
      font-size: 1.5rem;
      right: 0;
      padding-left: 25px;
      // font-family: 'RRPioneer'
    }
  }
}

.narrative__slider-image-container {
  width: 100%;
}

.menu.boxmenu {
  // background-color: #FEF0E2;

  // min-height: 107vh;  
  // padding: 0 0 0 4%;
  .menu-poster {
    .menuInstruction {
      position: absolute;
      top: 25px;
      background: #fff;
      width: 230px;
      right: 25px;
      color: #000;
      font-family: "RR-light";
      padding: 13px;
      text-align: center;

      p {
        margin-top: 0;
        font-size: 1.2rem;
      }

      .menuIns {
        margin-bottom: 0;
        font-size: 1rem;
        color: #ff7140;
      }
    }
  }

  .menu-container {
    width: 100%;

    .splash_main_wrapper {
      .top_splash_img_wrapper {
        margin-bottom: 70px;

        img {
          width: 580px;
          max-width: 100%;

          @media screen and (max-width: 896px) {
            width: 310px;
            max-width: 100%;
          }
        }
      }

      .bottom_splash_img_wrapper {
        margin-top: 70px;

        img {
          width: 368px;
          max-width: 100%;

          @media screen and (max-width: 896px) {
            width: 200px;
            max-width: 100%;
          }

          @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {
            width: 200px;
            max-width: 100%;

          }

          @media only screen and (min-device-width: 768px) and (max-device-width: 1200px) and (orientation:portrait) {
            width: 360px;
            max-width: 100%;
          }

        }
      }
    }

    .logoImg {
      position: absolute;
      right: 25px;
      top: 30px;
    }

    .menuInstruction {
      width: 100%;
      right: 0;
      padding-left: 207px;
      padding-right: 20px;
      margin: 20px 0 20px 0;

      h2,
      p {
        margin: 0;
      }

      p {
        line-height: 1.5;
      }

      .font-color {
        color: #002559;
      }

      .topcontent {
        margin-bottom: 20px;

        h1 {
          margin-bottom: 5px;
          font-size: 1.5rem;
          @media screen and (max-width: 896px) {
            font-size: 1.2rem;
          }
        }

        p {
          font-size: 80%;
        }
      }

      .bottomcontent {
        h2 {
          margin-bottom: 5px;
          font-size: 1.2rem;
          @media screen and (max-width: 896px) {
            font-size: 1.2rem;
          }
        }
        p {
          font-size: 1.2rem;

          @media screen and (max-width: 896px) {
            font-size: 1rem;
          }

          ;
        }
      }

    }
  }

  .boxmenu-item__progress {
    display: none;
  }

  // @media (max-width: 850px) {
  //   padding: 1rem;
  //   padding-bottom: 5rem;
  // }
  .boxmenu-item__button-container {
    transition: all 300ms ease-in-out;
  }

  .menupage-container {
    // @media (max-width: 850px) {
    //   flex-direction: column-reverse;
    // }
  }

  .menu-item__button-container.boxmenu-item__button-container {
    button {
      background-color: transparent;
      position: absolute;
      color: #706f6f;
      border-radius: 50%;
      font-family: "RR-light";
      line-height: normal;
      bottom: -9%;
      left: 50%;
      right: 0;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 1px solid #ccc;

      img {
        width: 100%;
      }

      &:hover {
        // border-bottom: 10px solid #016BFF;
      }

      &.user-select-none {
        pointer-events: none;
      }

      .icon {
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
      }

      .icon_devider {
        display: inline-block;
        height: 149px;
        position: absolute;
        width: 2px;

        right: 4.5rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }





  .menu-accordion-container {
    margin-bottom: 1rem;

    .menu-accordion-heading {
      font-size: 1.5rem;
      padding: 1rem 3.5rem 1rem 1.5rem;

      line-height: 1.2;
      vertical-align: top;
      user-select: none;
      position: relative;
      cursor: pointer;

      .icon {
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .menu-accordion-panel {
      display: none;
      color: @white;

      .pagelevelprogress__indicator-bar {
        background-color: @white;
      }

      .pagelevelprogress__indicator-inner {
        background-color: transparent;
      }
    }

    .icon-padlock-locked:before {
      content: "";
      background-image: url(assets/icons/lock.png);
      //background-image: url(assets/icons/unlock.png);
      height: 24px;
      width: 24px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    .icon-padlock-unlocked:before {
      content: "";
      background-image: url(assets/icons/unlock.png);
      height: 24px;
      width: 24px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }
  }
}

.btn__marking.js-btn-marking {
  display: none;
}

.trickle.conclusion .js-trickle-btn-container {
  .mr_trickel_btn_text.last-trickle {
    position: absolute;
    color: #fff;
    top: 0;
    left: 0;
    background-color: #1f36c7;
    width: 120px;
    border-radius: 3rem;
    padding: 10px;
    height: 43px;
    user-select: none;
    z-index: 1;

    &+.trickle__btn {
      width: 120px;
      border-radius: 3rem;
      height: 43px;
      position: relative;
      opacity: 0;
      z-index: 2;
    }
  }
}


.co-24 .exit_btn {
  display: block;

  .mr_trickel_btn_text.last {
    position: absolute;
    color: #fff;
    top: 0;
    left: 0;
    background-color: #1f36c7;
    width: 120px;
    border-radius: 3rem;
    padding: 10px;
    height: 43px;
    user-select: none;
    z-index: 1;

    &+.last-btn-icon {
      width: 120px;
      border-radius: 3rem;
      height: 43px;
      position: relative;
      opacity: 0;
      z-index: 2;
    }
  }
}

.co-08 .mr_trickel_btn_text {
  color: darkgray;
}

.co-10 .mr_trickel_btn_text {
  color: darkgray;
}

.co-01 .mr_trickel_btn_text {
  color: darkgray;
}

.co-02 .mr_trickel_btn_text {
  color: darkgray;
}

.co-19 .mr_trickel_btn_text {
  color: darkgray;
}

.co-20 .mr_trickel_btn_text {
  color: darkgray;
}

.co-22 .mr_trickel_btn_text {
  color: darkgray;
}

.co-16 .mr_trickel_btn_text {
  color: darkgray;
}

@media screen and (-ms-high-contrast: active) {
  .mr_trickel_btn_text {
    color: darkgray;
  }
}

.js-languagepicker-nav-btn {
  display: block;
  margin-left: 20px;
  margin-right: 20px;
  pointer-events: none;
  opacity: 0.5;

  @media screen and (max-width: 896px) {
    margin-left: 20px;
    margin-right: -10px;
  }
}

.icon-language-2:before {
  content: "";
  width: 31px;
  height: 40px;
  background: url(assets/RR_EPL_menu_button.png) no-repeat;
  background-size: 55%;
  background-position: 2px 8px;
}

.icon-container {
  margin-top: 2.5rem;

  a {
    display: inline-block;
    width: 1.5rem;
    margin-right: 1.5rem;

    &.share-alt {
      width: 28px;
    }

    &.external-link-alt {
      width: 28px;
    }
  }
}

// .w-90 {
//   width: 90%;
// }
// .w-100 {
//   width: 100%;
// }
// // .disclaimer > .row .right-container {
// //   justify-content: flex-end;
// //   margin-bottom: 14%;
// // }
.disclaimer>.row .left-container .content h2 {
  font-size: 3rem;
}

.disclaimer>.row .left-container .content p {
  font-weight: 400;
  font-size: 1.75rem;
}

.disclaimer .image {
  margin-bottom: 50px;
}

// .disclaimer .right-container.d-flex.dir-col{
//   float: right;
//   width: 100%;
// }
// .disclaimer  > .row .right-container {
//   justify-content: flex-start;
// }
// .disclaimer .left-container{
//   margin-top: 8%;
// }
// .disclaimer .content{
//   margin-left: -35px;
//   margin-right: 35px;
// }

// .disclaimer > .row .right-container .btn.btn-primary {
//   position: absolute;
//   right: 0;
//   bottom: 16%;
// }
.disclaimer>.row .right-container {
  justify-content: flex-end;
}

.full-width {
  width: 100%;

}

.disclaimer>.row .right-container.full-width {
  justify-content: center;
}

.disclaimer .d-flex.v-center {
  // align-items: flex-end;
}


[lang="ja"] {
  .hint-container>p {
    -moz-transform: skewX(-15deg) skewY(0deg);
    -webkit-transform: skewX(-15deg) skewY(0deg);
    -o-transform: skewX(-15deg) skewY(0deg);
    -ms-transform: skewX(-15deg) skewY(0deg);
    transform: skewX(-15deg) skewY(0deg);

    em,
    i {
      font-style: normal;
    }
  }
}

[lang="ar"],
[lang="he"] {
  .menu.boxmenu .menu-accordion-container .menu-accordion-heading {
    padding: 1rem 1.5rem 1rem 3rem;

    .icon {
      left: 1.5rem;
      right: auto !important;
    }

  }

  .menu.boxmenu .menu-item__button-container.boxmenu-item__button-container button {
    text-align: right;
    padding: 0.5rem 1.5rem .25rem 3.5rem;

    .icon {
      left: 1.5rem;
      right: auto !important;

    }
  }

  .page {
    ul {
      list-style: none;

      &>li {
        position: relative;

        &:before {
          content: "";
          position: absolute;
          right: -30px;
          top: 7px;
          width: 16px;
          height: 16px;
          background-color: currentColor;
          border-radius: 50%;
        }
      }
    }
  }

  button.media__transcript-btn {
    right: auto !important;
    left: 0 !important;
    max-width: 140px;

    .icon:before {}

    @media screen and (max-width:800px) {
      position: static;

      .icon {
        display: none;
      }
    }

    &:hover {
      left: 0;
      right: auto !important;
    }
  }

  .mcq {
    .popup-btn-container {
      text-align: right !important;

    }

    .mcq__item-state {
      left: 1rem;
      right: auto !important;
    }

    .mcq__option_text {
      right: 10px;
      left: unset;
    }
  }

  .mcq__item-text {
    padding-left: 3rem;
    padding-right: 2.5rem;
  }

  .matching .feedback-body p:before {
    right: -1.75rem;
    left: unset;
  }

  @media screen and (max-width: 896px) {
    .mcq .feedback-inner-container h4 {
      text-align: right;
    }
  }


  /*Time Line Css*/
  .timeline__inner {
    .timeline-wrapper {
      .w-50 {
        &:nth-child(1) {
          border-left: 8px solid #1f36c7;
          border-right: 0;
        }

        @media screen and (max-width: 896px) {
          border-left: none !important;
          border-right: 8px solid #1f36c7 !important;
        }
      }

      @media screen and (max-width: 896px) {
        .even.even-wrapper.row {
          flex-direction: column-reverse;
        }

        &:last-child {
          .timeline-content {
            margin-bottom: 0;
          }
        }
      }
    }

    .component__title {
      color: inherit;
    }

    .timeline-container {
      padding: 5rem 0 3rem;
      font-size: 1.25rem;

      .timeline-flag {
        max-width: 300px;
        margin-right: auto;
        color: @white;
        margin-left: 0;

        .year-wrapper {
          max-width: 185px;
          margin-right: auto;
          margin-left: 0;

          @media screen and (max-width: 896px) {
            margin-right: 0 !important;
          }

          .bg-color-container {
            padding: 0.8rem 1rem 1rem;
            text-align: right;
            position: relative;
            z-index: 5;
          }

          position: relative;
          z-index: 3;

          &:after {
            content: "";
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            box-shadow: 0px 10px 5px 5px rgba(0, 0, 0, 0.3);
            transform: rotate(5deg);
            z-index: 0;

            @media screen and (max-width: 896px) {
              transform: rotate(-5deg);
            }
          }

          h4 {
            font-size: 3rem;
            font-weight: 700;
            margin: 0;
          }
        }

        .title-wrapper {
          position: relative;
          z-index: 1;

          .bg-color-container {
            padding: 1.8rem 2rem 2rem;
            position: relative;
            z-index: 5;
          }

          p {
            margin: 0;
            font-weight: 500;
          }

          &:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            bottom: 15px;
            right: 15px;
            transform: rotate(5deg);
            box-shadow: 0px 20px 15px 5px rgba(0, 0, 0, 0.2);

            @media screen and (max-width: 896px) {
              transform: rotate(-5deg);
            }
          }

          span.noch {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 60px;
            width: 60px;
            left: -34px;
            right: auto !important;
            background-color: inherit;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(30, 30, 30, 0.5);

            @media screen and (max-width: 896px) {
              left: auto;
              right: -34px !important;
            }

            &:after,
            &:before {
              content: "";
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              border-radius: 50%;
            }

            &:after {
              height: 60px;
              width: 60px;
              background-color: #fff;
              z-index: 2;
            }

            &:before {
              height: 30px;
              width: 30px;
              background-color: inherit;
              right: 15px;
              z-index: 3;
            }
          }
        }

        &.even {
          margin-right: 0;
          margin-left: auto;

          .year-wrapper {
            margin-right: 0;
            margin-left: auto;

            &:after {
              transform: rotate(-5deg);
            }
          }

          .title-wrapper {
            &:after {
              transform: rotate(-5deg);
            }

            span.noch {
              right: -34px !important;
              left: auto;
            }
          }
        }

        @media screen and (max-width: 896px) {
          margin-right: 0;
        }
      }

      .timeline-content {
        padding-bottom: 10rem;
        padding-left: 5rem;
        padding-right: 5rem;

        p {
          margin-top: 0;
          margin-bottom: 3rem;
          // color: #005eef;
          font-weight: 500;
          font-size: 1.5rem;
        }

        @media screen and (max-width: 896px) {
          padding: 0;
          margin-bottom: 4rem;

          .body-wrapper {
            padding: 2rem 1rem 0;
          }

          .img-wrapper {
            margin-right: -3px;
            margin-left: unset;

            img {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  /*Time Line Css*/

  .opt {
    .matching__select-state {
      left: 3px !important;
      top: -2px;
    }
  }

  .meet-the-team-container {
    .right-container {
      .inner-content {
        padding-left: 0;
      }
    }
  }

  .pd-right {
    padding-right: 0;
  }

  .meet-the-team-container {
    .right-container {
      padding-right: 3%;
      padding-left: 0;
    }
  }

  .btn.btn-primary {
    @media screen and (max-width: 896px) {
      border-top-right-radius: 2rem;
      border-bottom-right-radius: 2rem;
      border-top-left-radius: 0rem;
      border-bottom-left-radius: 0rem;
    }
  }

  .team-footer {
    button.btn {
      min-width: 100px;

      &:hover {
        background-color: transparent;

      }
    }

    .danial {
      color: #fff !important;
    }

    .sarah {
      color: #005eef !important;
    }
  }


  /*Setup Page*/
  .setup-container .setup-right-container .form-container form .redio-btn-container .checkmark {
    right: auto;
    left: 10px;
  }




  .setup-container .setup-right-container .form-container form .redio-btn-container {
    padding-right: 18px;
    padding-left: 0;
  }

  .setup-container .mobile-right-container .profile-text-mobile-container {
    @media screen and (max-width: 896px) {
      margin-right: 4%;
      margin-left: 0;
    }
  }

  .setup-container .setup-right-container .footer-container .right-footer-container {
    right: 10px;
    left: auto;

    @media screen and (max-width: 896px) {
      left: 10px;
      right: auto;
    }
  }

  @media screen and (max-width: 896px) {

    .setup-page .setup-container .setup-right-container .continue_btn {
      left: 50%;
      right: auto;
    }
  }
}

// html{
//   &.ipad{
//   /* */
//     .mr_ {
//       &wrapper_container{
//         min-height: calc(100 * var(--vh, 1vh));
//   }
//   }
//   .media {
//     &.component {
//       min-height: calc(90 * var(--vh, 1vh));
//     }
//     .media__transcript-container {
//       max-height: calc(89 * var(--vh, 1vh));
//     }
//     .video-row-container {
//      min-height: calc(95 * var(--vh, 1vh));
//     }

//     .video-col {
//       .mejs-container {
//         height: calc(95 * var(--vh, 1vh));
//       }
//     }
//   }
// }
// }

.notify-msg {
  border-radius: 5px;
  background-color: #1f36c7;

  @media screen and (max-width: 896px) {
    border-radius: 0px;
  }

  p {
    padding: 10px;
  }
}

.trickle__btn-icon .icon:before {
  content: "";
  width: 42px;
  height: 42px;
  background: url('course/en/images/down_arrow_active.png') no-repeat;
  position: absolute;
  bottom: -1px;
  right: 0;
  left: -1px;
  margin: auto;
  background-size: 100%;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.bgText {
  background-color: #f8ebdf;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.padding_topIntro {
  padding-top: 22px;
}

.staticPageWrapper {
  width: 100%;
  height: auto;

  .text_intro04 {
    padding: 0px 100px 0px 0px;
    display: flex;
    margin-top: -16px;

    @media screen and (max-width: 896px) {
      padding: 0px 5px 0px 5px;
      font-size: 1rem;
    }
  }

  .closeIcon:before {
    content: "\e634";
  }

  .closeIcon:before {
    display: block;
    background-color: white;
    font-family: "vanilla";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .select_button {
    background-color: #002559;
    width: 140px;
    color: #FFF;
    height: 35px;
  }

  .disabledbtn {
    background: #ccc;
    cursor: default;
    pointer-events: none;
  }

  .disabledtxtArea {
    background: #ccc;
    cursor: default;
    pointer-events: none;
  }

  .showDive {
    // position: fixed;
    // top:0px;
    // left:0px;
    // bottom:0px;
    // right:0px;
    margin: auto;
    // z-index:90;
    display: none;
  }

  .shadow_bg {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    background: rgba(0, 0, 0, .5);
  }

  .showDive_content {
    // top: 50%;
    // left: 50%;
    margin: 20px auto 0 0;
    width: 100%;
    // position: absolute;
    // border-radius: 1px;
    // transform: translate(-50%, -50%);   
    // overflow-y: auto;

    @media screen and (max-width: 896px) {
      width: 100%;
    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {
      max-height: 100%;
      overflow-y: auto;
    }

  }

  .showDive_content_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rem 1rem 0rem 4rem !important;
    max-height: auto;
    width: 100%;
    flex-wrap: wrap;

    .mrImgContainer {
      @media screen and (max-width: 896px) {
        text-align: center;
      }
    }

    .component__body {
      padding: 0 0 0 168px;

      @media screen and (max-width: 896px) {
        padding: 0;
        ;
      }
    }

    @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {

      max-height: 100%;
      padding: 30px 15px 0 46px !important;
    }

    .staticPageWrapper .container-title .mrImgContainer {
      max-width: 335px;

      margin: 0 auto;


    }
  }

  .icon {
    display: block;
    font-family: "vanilla";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
  }


  .textHeading {
    width: 100%;
    padding: 0px 100px 0px 100px;
    font-size: 1.5rem;

    // @media screen and (max-width: 850px) {
    //   padding: 10px 25px 10px 25px;
    // }
    p {
      margin: 0;
      color: #002559;
    }
  }

  .textHeading2 {
    width: 100%;
    // background: #fff;      
    padding: 0px 100px 0px 100px;
    font-size: 1.5rem;

    @media screen and (max-width: 896px) {
      padding: 10px 15px 0px 15px;
      font-size: 1.3rem;
    }

    p {
      margin: 0;
      color: #002559;
    }
  }

  .container-title_intro02 {
    width: 100%;
    height: auto;
    display: flex;
    color: #000;
    // background-color: #FEF0E2; 
    justify-content: space-between;
    gap: unset;
    padding: 5px 100px 5px 100px;
    flex-wrap: wrap;

    .mrImgContainer {
      margin: auto;
    }
  }

  blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
  }

  blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
  }

  blockquote::after {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
  }

  .container-title {
    width: 100%;
    height: auto;
    display: flex;
    color: #000;
    background-color: transparent;
    align-items: center;
    justify-content: space-between;
    gap: unset;
    // min-height: 413px;
    padding: 5px 0px 0px 100px;
    flex-wrap: wrap;

    @media screen and (max-width: 896px) {
      padding: 5px 15px 0px 15px
    }

    .mrImgContainer {
      // padding: 55px 0 15px 15px;
      // min-width: 400px;

      @media screen and (max-width: 896px) {
        margin: auto;
      }

      position: relative;

      img {
        width: 100%;
       
      }

      .imagetitle {
        position: absolute;
        bottom: 43px;
        background: #fff;
        width: 94%;
        padding: 10px;
        right: 0;
        font-size: 1.5rem;
      }
    }

    .contentpart {
      display: flex;
      align-items: center;
      padding: 0px 15px 0px 0px;

      // margin: auto;
      @media only screen and (min-device-width: 320px) and (max-device-width: 896px) {
        left: 3px;
        width: 100%;
      }

      // .display_icon img
      // {
      //   position: absolute;
      //   left:100px;
      //   @media only screen and (min-device-width: 320px) and (max-device-width: 896px)
      //   {
      //     left:3px;
      //   } 
      // }
    }

    .contentpart_intro {
      display: flex;
      align-items: center;
      padding: 5px 70px 0px 0px;

      // margin: auto;
      @media screen and (max-width: 896px) {
        padding: 5px 0px 0px 0px !important;
      }

      @media only screen and (min-device-width: 320px) and (max-device-width: 896px) {
        left: 3px;
        padding: 0px 10px 0px 0px;
        width: 100%;
      }

      .display_icon img {
        position: absolute;
        left: 100px;

        @media only screen and (min-device-width: 320px) and (max-device-width: 896px) {
          left: 27px;
        }
      }
    }

    p {
      margin-top: 0;
      // font-size:1.2rem;
      margin-bottom: 10px;
    }

    .tophead {
      font-size: 1.7rem;
    }

    .introImgP {
      max-width: 850px;
      margin: auto;
      //  margin-top: 15px;
      //  margin-bottom: 15px;            
      @media only screen and (min-device-width : 813px) and (max-device-width : 1024px) and (orientation : landscape) {
        width: 50% !important;
        min-width: 0px;
        height: auto;
      }
    }

    .isIntro1 {
      max-width: 850px;

      // margin: auto auto !important;
      // padding: 10px !important;
      // margin-top: 15px;
      // margin-bottom: 15px;
      @media only screen and (min-device-width: 320px) and (max-device-width: 896px) {
        min-width: 0px;
        width: 100% !important;

      }
    }
  }

  .bodyTitle {
    font-size: 1.2rem;
    padding: 15px 100px 20px 100px;
    display: block;
    // @media only screen and (min-device-width: 320px) and (max-device-width: 896px)
    // {
    //   min-width:0px;   
    //   padding: 0px 25px 0px 25px;

    // } 
  }

  .headingPara {
    margin-left: 0 !important;
    padding: 0px 100px 0px 100px;
  }

  .caseStudy_caption {
    padding: 0px 100px 0px 100px;
    text-align: center;
    margin: 0;
  }
}



.menupage-container {
  position: relative;
  // padding: 85px 0 35px 8%;
  background: #fff;
}

.flipcardPageWrapper .textHeading {
  padding: 0px 100px 10px 100px;
}

.flipCard_bottomText {
  padding: 0px 100px 0px 100px;
  font-size: 1.2rem;

  p {
    margin-bottom: 0;
    margin-top: 10px;
  }
}

.accordionPageWrapper .textHeading {
  padding: 0px 100px 0px 100px;
}

.audio-inner-container {
  max-width: 510px !important;

}

textarea {
  width: 100%;
}


/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {

  .assessment_Algorithm .textPara {
    font-size: 1rem;
    padding: 0px 15px 10px 15px !important;
  }

  .staticPageWrapper .container-title_intro02 {
    display: inline;
    padding: 0px 25px 0px 25px;
  }

  .reflection_point .staticPageWrapper .text_intro04 {
    padding: 0px 10px 0px 0px !important;

  }

  textarea {
    width: 100%;
  }

  .flipCard_bottomText {
    padding: 0px 15px 0px 15px;
    font-size: 1rem;
  }

  .accordionPageWrapper .accordion_container_title .contentpart {
    margin-left: 0px;
    padding: 15px 15px 0 15px !important;
  }

  .staticPageWrapper .caseStudy_caption {
    padding: 0px 25px 0px 25px;
    text-align: center;
  }

  .menu.boxmenu {
    padding: 0;

    .menupage-container {
      .col-100 {
        width: 100% !important;
        margin-bottom: 3%;
      }
    }
  }

  .menu.boxmenu .menu-container .logoImg {
    width: 170px;
    position: relative;
    left: 37px;
    top: 0px;

  }

  .nav .headLogo {
    width: 200px;
    padding-left: 15px;
  }

  .setup-page {
    .setup-container {
      height: 100vh;

      .mobile-left-container {
        margin-left: 10%;
        width: 100%;

        .setup-left-container {
          border: none;

          .logoContainer {
            .desktop_setupPagelogo {
              display: none;
            }

            .mobile_setupPagelogo {
              display: block;
            }
          }
        }
      }

      .mobile-right-container {
        width: 100%;

        .setup-right-container {
          margin-left: 10%;
          min-height: calc(100% - -5px);

          .form-container form .select-box-container {
            width: 80%;

            .langtitle {
              text-align: center;
            }

            .mobile-center {
              text-align: center;

              .continue_btn {
                border-radius: 7px;
                font-size: 1rem;
                line-height: 0;
                bottom: 12%;
                left: 0;
                padding: 1rem 0.8rem 1rem;
                transform: unset;
                max-width: 150px;
                background-color: #002559;
              }
            }
          }
        }
      }

    }
  }

  .desktop_setupPagelogo {
    display: none;
  }

  .mobile_setupPagelogo {
    display: block;
    // margin-left: -12%;
  }

  .home-page {
    .home-page-container {
      .left-container {
        width: 100%;
        width: 100%;
        border: none;
        height: 100vh;

        .inner-content {
          width: 100%;

          .logoContainer {
            img {
              width: auto
            }
          }

          .right-container {
            margin-top: 15px;
            width: 100%;
            border-bottom: 10px solid #002559;
            ;

            .form-container {
              padding: 0rem 1.5rem 1rem;
            }

            img {
              height: auto;
              object-fit: unset;
            }

          }

          .splash_content {
            position: relative;
            bottom: 0;
          }
        }
      }
    }

    .right-container.desktop_setupPagelogo {
      display: none;
    }
  }

  .meet_coach .coach_bg .meetcoachStrip {
    bottom: 8px;
  }

  .corna-page-container>.row .vid_container .video_backdrop .main-container .icon_container img {
    width: 100%;
    height: auto;
    max-width: 90px;
    cursor: pointer;
  }

  .corna-page-container>.row .vid_container .video_backdrop .main-container .content_container {
    font-size: 1rem;
    line-height: 1;
  }



  .component__body-inner {
    font-size: 1rem;
    padding: 0 0px 0 0px;
  }

  .component__instruction {
    font-size: 1.1rem;
  }

  .menu.boxmenu {
    padding: 0;
    height: auto;

    .menupage-container {
      .summery {
        position: absolute;
        left: -14px;
        align-items: center;
        justify-content: center;
        display: none;
        bottom: 540px;
        width: 100%;
        right: 0;

        .menu-item__inner {
          .boxmenu-item__details .boxmenu-item__button-container button {
            height: 50px;
            width: 100%;
            font-size: 1.3rem;
            background: #002559;
            text-align: center;
            color: #fff;
            border: none;
            min-width: 278px;
            padding: 10px 23px;
            border-radius: 5px;
          }
        }
      }
    }

    .menu-item__button-container.boxmenu-item__button-container button {

      // background: linear-gradient(180deg, #c8c7cc, #c8c7cc, #9b9b9b);
      // display: block;
      // width: 100%;
      // text-align: left;
      // font-size: 1.2rem;
      // padding: 0.5rem 4rem 0.25rem 1.5rem;
      // position: relative;
      // color: #000;
      // border-radius: 0;
      // border-bottom: 10px solid #c15eff;
      // font-family: "RR-light";
      // line-height: normal;
      // height: 15vh;
      .icon_devider {
        height: 100px;
      }
    }

    .menu-poster {
      img {
        height: auto;
        object-fit: unset;
        width: 100%;
      }

      .go_back {
        position: absolute;
        bottom: 15px;
        padding: 15px 0;
        width: 59%;
        background-color: #7705bc;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 1.3rem;
        border-radius: 5px;
        margin: 0 auto;
        left: 85px;

      }

      .menuInstruction {
        position: absolute;
        top: 38%;
        color: #000;
        display: flex;
        justify-content: space-around;
        min-height: 150px;
        flex-direction: column;
        width: 100%;
        right: 0;
        padding-left: 115px;
      }

    }
  }

  .mr_wrapper_container_text {

    // padding: 2.5rem 0.5rem 4rem !important;
    .staticPageWrapper {
      .textHeading {
        width: 100%;
        padding: 0 15px 0 15px;
      }

      .container-title {
        display: block;
        padding: 0 15px 0 15px;

        .mrImgContainer {
          width: 100% !important;
          padding: 5px 15px 0px 15px;
          margin: auto;
        }

        .contentpart {
          width: 100% !important;
          padding: 5px 0px 0px 0px
        }
      }
    }
  }

  .mr_media_wrapper {
    padding: 1rem 0rem 4rem;
    min-height: auto;

    .mediaPageWrapper {
      .textHeading {
        width: 100%;
      }
    }

  }

  .media .video-row-container.transcript-hidden .video-col {
    width: 100%;
  }

  .media .video-row-container.transcript-hidden .video-col {
    width: 100%;
  }

  .media .video-row-container.transcript-show .video-col {
    width: 100%;
  }

  .media .video-row-container.transcript-hidden .trans-col {
    width: 100%;
  }

  .media .video-row-container.transcript-show .trans-col {
    width: 100%;
  }

  .flipcard__header-inner {
    padding: 0px 15px 0px 15px;
  }

  .mr_wrapper_container1 {
    padding: 1rem 0rem 4rem !important;

    .textHeading {
      width: 100%;
      padding: 0px 5px 0px 5px;
      ;
    }

    .flipcardPageWrapper {
      .flipcardcontentpart {
        .flipcard-widget {
          display: block;
          padding: 0;

          .flipcard-item-inner {
            margin-bottom: 15px;
          }

          .flipcard-item {
            width: 100%;
            min-height: 302px;
            max-width: 100%;
            margin: auto;
          }
        }

        .flipcard_face {
          width: 100%;
        }
      }
    }

    .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-front,
    .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-back {
      // padding: 10px;
      max-width: 100% !important;
      width: 34rem !important;
      min-height: 255px;
      color: #000;
    }

  }

  .accordionPageWrapper {
    min-height: auto;

    .textHeading {
      width: 100%;
      padding: 0px 15px 0px 15px;
    }

    .accordion_container_title {
      display: block;

      .mrImgContainer {
        width: 100%;
        padding: 15px;

        .desktop_img_accourdian {
          display: none;
        }

        .mobile_img_accourdian {
          display: block;
        }

      }

      .contentpart {
        width: 100%;
        padding: 15px 15px 0 15px;

        .accordion_item_container {
          display: block;

          .accordion_header_Item {
            width: 100%;
            border-radius: 0px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;

          }
        }
      }
    }

    .accordion_content_item {
      width: 100%;
      height: auto;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
    }
  }

  .trickle .final_btn_container {
    position: fixed;
    bottom: 43px;
    width: 100%;
    justify-content: space-between;
    right: 0;

    button {
      margin-bottom: 10px;
    }
  }

  .menu.boxmenu .menu-container {
    background-size: 100% 100%;
  }

  .staticPageWrapper .textHeading2 {
    padding: 0px 5px 5x 5px;
  }

  .staticPageWrapper .bodyTitle {
    padding: 10px 15px 0px 15px;
  }

  .accordionPageWrapper {
    min-height: auto;
  }

  .staticPageWrapper .textHeading2 {
    padding: 0px 15px 0px 15px;
  }

  .staticPageWrapper .headingPara {
    padding: 0px 15px 0px 15px;
  }

  .mr_wrapper_container_text .staticPageWrapper .textHeading {
    padding: 0px 15px 5px 15px;
  }

  .staticPageWrapper .showDive_content_inner .component__body {
    padding: 0;
  }

  .staticPageWrapper .showDive_content_inner .contentpart {
    width: 100%;
  }

  .media .video-row-container .media__transcript-body-inline .media__transcript-body-inline-inner p {
    font-size: 1rem;
  }

  .mr_wrapper_container .hotgrapghics_container .container-title .instruction_text {
    padding: 0 15px 0 15px !important;
  }

  .mr_wrapper_container {
    padding: 1rem 0rem 4rem !important;
  }

  .padding_topIntro {
    padding-top: 22px;
  }
}

//bip
// .introImgP{
//   left: -8%;
//       padding: 15px 0px 2px 0px !important;
//           height: 400px; 
//              width: 459px !important;
//                  object-fit: contain;
// }

// .isIntro1{
//   width: 100% !important;
//   margin: auto auto !important;
//   padding: 10px !important;
// }

/* iPhone X ----------- */
@media only screen and (max-width: 896px) {

  .staticPageWrapper .container-title_intro02 {
    padding: 0px 15px 0px 15px;
  }

  .staticPageWrapper .textHeading {
    padding: 10px 15px 10px 15px;
    font-size: 1.3rem;
  }

  .staticPageWrapper .bodyTitle {
    padding: 10px 15px 20px 15px;
    font-size: 1rem;
  }

  .flipcardPageWrapper .textHeading {
    padding: 0px 15px 0px 15px;
    font-size: 1.3rem;
  }

  .flipcard__header-inner {
    padding: 10px 15px 10px 15px;
  }

  .staticPageWrapper .headingPara {
    padding: 10px 15px 10px 15px;
    font-size: 1rem;
  }

  .flipCard_bottomText {
    padding: 0px 15px 0px 15px;
    font-size: 1rem;
  }

  .staticPageWrapper .caseStudy_caption {
    padding: 0px 25px 0px 25px;
    text-align: center;
  }

  .accordionPageWrapper .textHeading {
    padding: 0px 15px 0px 15px;
    font-size: 1.3rem;
  }

  .imgTitle {
    font-size: 1rem;
  }

  .accordion_header_Item {
    position: relative;
    padding: 20px 50px 20px 10px;
    text-align: left;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    font-size: 0.8rem;
    width: 100%;
    height: 100px;
  }


  .menu.boxmenu {
    padding: 0;

    .menupage-container {
      .col-100 {
        width: 100% !important;
        // margin-bottom: 3%;
      }
    }

    .menu-item__button-container.boxmenu-item__button-container button {
      background-color: transparent;
      position: absolute;
      color: #706f6f;
      border-radius: 50%;
      font-family: "RR-light";
      line-height: normal;
      bottom: -10%;
      left: 46%;
      right: 0;
      width: 30px;
      height: 30px;
      padding: 0;

      .icon_devider {
        height: 95px;
      }
    }
  }

  .menu.boxmenu .menu-container {
    // display: flex;
    // align-items: center;
  }

  .menu.boxmenu .menu-container {
    // background-size: 120% 100%;
  }

  .menu.boxmenu .menu-container .menuInstruction {
    position: relative;
    color: #000;
    width: 100%;
    padding-left: 30px;
    top: auto;
    left: auto;
    display: block;
    min-height: auto;

    .topcontent {
      font-size: 0.8rem !important;
    }

    .bottomcontent {
      font-size: 0.8rem !important;
    }
  }

  .menu.boxmenu .menu-container .menuInstruction .font-color {
    font-size: 0.9rem;
  }

  .menu.boxmenu .menu-container .logoImg {
    max-width: 130px;
    left: 10px;
    top: 4px;
    position: relative;
    // left: 37px;
    // top: 0px;
  }


  .media .video-row-container.transcript-hidden .video-col {
    width: 100%;
  }

  .media .video-row-container.transcript-hidden .video-col {
    width: 100%;
  }

  .media .video-row-container.transcript-show .video-col {
    width: 100%;
  }

  .media .video-row-container.transcript-hidden .trans-col {
    width: 100%;
  }

  .media .video-row-container.transcript-show .trans-col {
    width: 100%;
  }



  .flipcardPageWrapper {
    .flipcardcontentpart {
      .flipcard-widge {
        padding: 0 5px;
      }
    }
  }


  .accordionPageWrapper {
    .accordion_container_title {
      display: inline-block;

      .contentpart {
        width: 100% !important;
        padding: 5px;

        // float: left;
        .accordion_item_container {
          .accordion_header_Item {
            position: relative;
            padding: 20px 50px 20px 10px;
            text-align: left;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            font-size: 1rem;
            width: 100%;
            min-height: 70px;
            height: auto;
          }
        }
      }

      .mrImgContainer {
        float: left;

        .desktop_img_accourdian {
          display: none;
        }

        .mobile_img_accourdian {
          display: block;
        }
      }
    }

    .accordion_content_item {
      padding: 1rem;
      background-color: #fff !important;
      color: #000;
      height: auto;
      overflow-y: auto;
      text-align: left;
      font-size: 1rem;
      width: 100%;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
    }
  }

  .trickle .final_btn_container {
    position: fixed;
    bottom: 51px;
    width: 525px;
    justify-content: space-between;
    right: -40px;
  }

  .introImgP {
    // height: 287px;
    // width: 421px !important;
    // object-fit: contain;
  }

  .staticPageWrapper .container-title .contentpart {
    // padding: 0px 25px 0 52px !important;
  }

  .introSlide {
    // position: relative !important;   
    // left: auto !important;
    // bottom: auto !important;
    // padding: 10px;
  }

  .staticPageWrapper .container-title {
    min-height: auto !important;
  }

  .staticPageWrapper .textHeading {
    // padding: 15px 52px;
  }

  .textHeading {
    margin-left: 0px;
  }


  /*FlipKart css*/
  .flipcardPageWrapper {
    .flipcardcontentpart {
      .flipcard-widget {
        display: block;
        padding: 0;

        .flipcard-item-inner {
          margin-bottom: 15px;
          font-size: 1rem;
        }

        .flipcard-item {
          width: 22rem !important;
          min-height: 290px !important;
          margin: auto;
          max-width: 100% !important;
        }
      }

      .flipcard_face {
        width: 100%;
      }
    }
  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-front,
  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-back {
    max-width: 90%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 1rem;
    color: #000;
  }

}

/*for Ipad */
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /*Setup Landuage Page css*/

  .assessment_Algorithm .textPara {
    font-size: 1rem;
    padding: 0px 15px 20px 15px;
  }

  .setup-page {
    .setup-container {
      height: 100vh;
      display: block;

      .mobile-left-container {
        margin-left: 10%;
        width: 100%;

        .setup-left-container {
          border: none;

          .logoContainer {
            .desktop_setupPagelogo {
              display: none;
            }

            .mobile_setupPagelogo {
              display: block;
            }
          }
        }
      }

      .mobile-right-container {
        width: 100%;

        .setup-right-container {
          margin-left: 10%;
          min-height: calc(100vh - 142px);

          .form-container form .select-box-container {
            width: 80%;

            .langtitle {
              text-align: center;
            }

            .mobile-center {
              text-align: center;

              .continue_btn {
                border-radius: 7px;
                font-size: 1rem;
                line-height: 0;
                bottom: 12%;
                left: 0;
                padding: 1rem 0.8rem 1rem;
                transform: unset;
                max-width: 150px;
                background-color: #58009c;
              }
            }
          }
        }
      }

    }
  }

  /*Setup Landuage Page css*/

  /*Splash Page Css Start*/
  .desktop_setupPagelogo {
    display: none;
  }

  .mobile_setupPagelogo {
    display: block;
  }

  .home-page {

    .home-page-container {
      .left-container {
        width: 100%;
        width: 100%;
        border: none;
        height: 100vh;

        .inner-content {
          width: 100%;

          .logoContainer {
            img {
              width: auto
            }
          }

          .right-container {
            margin-top: 15px;
            width: 100%;
            border-bottom: 0px solid #7705bc;

            img {
              height: auto;
              object-fit: unset;
            }

          }

          .splash_content {
            position: relative;
            bottom: 0;
          }
        }
      }
    }

    .right-container.desktop_setupPagelogo {
      display: none;
    }
  }

  /*Splash Page Css Start*/



  /*Disclaimer page Css Start*/
  .component__body-inner {
    font-size: 1rem;
  }

  .component__instruction {
    font-size: 1rem;
  }

  /*Menu page css start*/

  .menu.boxmenu {
    padding: 0;
    height: auto;
    min-height: auto;

    .menupage-container {
      .summery {
        position: absolute;
        left: -84px;
        align-items: center;
        justify-content: center;
        display: none;
        bottom: 800px;
        width: 100%;

        .menu-item__inner {
          .boxmenu-item__details .boxmenu-item__button-container button {
            height: 55px;
            width: 100%;
            font-size: 1.3rem;
            // background: #7705bc;
            text-align: center;
            color: #fff;
            border: none;
            min-width: 484px;
            padding: 10px 23px;
            border-radius: 5px;
          }
        }
      }
    }

    .menu-item__button-container.boxmenu-item__button-container button {

      // background: linear-gradient(180deg, #c8c7cc, #c8c7cc, #9b9b9b);
      // display: block;
      // width: 100%;
      // text-align: left;
      // font-size: 1.2rem;
      // padding: 0.5rem 4rem 0.25rem 1.5rem;
      // position: relative;
      // color: #000;
      // border-radius: 0;
      // border-bottom: 10px solid #c15eff;
      // font-family: "RR-light";
      // line-height: normal;
      // height: 15vh;
      .icon_devider {
        height: 100px;
      }
    }

    .menu-poster {
      img {
        height: auto;
        object-fit: unset;
        width: 100%;
      }

      .go_back {
        position: absolute;
        bottom: 15px;
        padding: 15px 0;
        width: 59%;
        background-color: #7705bc;
        border: none;
        color: #fff;
        cursor: pointer;
        font-size: 1.3rem;
        border-radius: 5px;
        margin: 0 auto;
        left: 85px;

      }

      .menuInstruction {
        position: absolute;
        top: 25px;
        background: #fff;
        width: 230px;
        right: 0px;
        color: #000;
        font-family: "RR-light";
        padding: 13px;
        text-align: center;
      }

    }
  }

  /*Static screen */
  .mr_wrapper_container_text {
    padding: 1rem 0rem 4rem !important;
    min-height: auto;

    .staticPageWrapper {
      .textHeading {
        width: 100%;
        padding: 0 15px 10px 15px;
      }

      .container-title {
        padding: 5px 15px 5px 15px;

        .mrImgContainer {
          // width: 100% !important;
          padding: 5px 15px 15px 15px;
          margin: auto;
        }

        .contentpart {
          // width: 100% !important;
          padding: 5px 5px 48px 0px
        }
      }
    }
  }

  /*Static screen */





  /*Menu page css End*/


  /*Flipcard css start*/
  .mr_wrapper_container1 {
    padding: 1rem 0rem 4rem !important;

    .textHeading {
      width: 100%;
    }

    .flipcardPageWrapper {
      .flipcardcontentpart {
        .flipcard-widget {
          display: block;
          padding: 0;

          .flipcard-item-inner {
            margin-bottom: 15px;
          }

          .flipcard-item {
            width: 34rem;
            min-height: 500px;
            max-width: 100% !important;
            margin: auto;
          }
        }

        .flipcard_face {
          width: 100%;
        }
      }
    }

    .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-front,
    .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-back {
      padding: 0;
      color: #000;
    }
  }

  /*Flipcard css End*/

  /*Accourdian css Start*/

  .accordionPageWrapper {

    // min-height: 65vh;
    .textHeading {
      width: 100%;
      padding: 0px 15px 0px 15px;
    }

    .accordion_container_title {
      display: block;

      // padding-bottom: 115px;
      .mrImgContainer {
        width: 100%;
        padding: 15px;

        .desktop_img_accourdian {
          display: none;
        }

        .mobile_img_accourdian {
          display: block;
        }

      }

      .contentpart {
        width: 100%;
        padding: 15px 5px 0 5px;

        .accordion_item_container {
          display: block;

          .accordion_header_Item {
            width: 100%;
            border-radius: 0px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;

          }
        }
      }
    }

    .accordion_content_item {
      width: 100%;
      height: auto;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;

    }


  }

  .media {
    &.component {
      // min-height: 90vh;
      display: flex;
      display: -ms-flexbox;
      align-items: center;
      // background-color: #f2f2f2;
    }



    // --------------------------------------------------
    &.toggle-captions .mejs-captions-selector {
      display: none !important;
    }

    // --------------------------------------------------

    .media__transcript-container {
      /*padding: 2rem 2.5rem 5rem; */
      overflow: auto;
      margin: 1px 0 0 0;
    }

    .video-row-container {
      // min-height: 100vh;

      .video-col {
        transition: all ease-in-out 300ms;
        background-color: #f1f1f1;

        .mejs-container {
          // height: 95vh !important;
          transition: all ease-in-out 200ms;
        }
      }

      .trans-col {
        transition: all ease-in-out 300ms;
      }

      &.transcript-hidden {
        .video-col {
          width: 750px;
          margin: 10px auto 0 auto;
          min-height: auto;
          background: #ffffff;
          border-radius: 10px;
          padding: 15px;
          position: relative;
        }

        .trans-col {
          width: 100%;
          background-color: #D9D9D9;

        }
      }

      &.transcript-show {
        .video-col {
          width: 750px;
          margin: 20px auto 0 auto;
          background: #ffffff;
          border-radius: 10px;
          padding: 15px;
          position: relative;

        }

        .trans-col {
          width: 100%;

          button.media__transcript-btn {

            padding: 8px 10px;
            line-height: 1;
            border-radius: 0;
            width: 100%;
            min-width: 140px;
            transition: all ease-in-out 250ms;
            left: 0;
            margin: auto;

            .icon:before {
              content: "\e651";
            }

          }
        }
      }

      button.media__transcript-btn {

        padding: 8px 10px;
        line-height: 1;
        border-radius: 0;
        width: 100%;
        min-width: 140px;
        transition: all ease-in-out 250ms;
        left: 0;
        margin: auto;

        .icon:before {
          display: inline;
          vertical-align: middle;
          font-size: 1em;
        }


        &:hover {
          right: 0;
        }
      }

      .media__transcript-body-inline {
        margin-top: 0;
        padding: 0.5rem 1rem 0;
        color: #000;
        height: auto;

        // font-size: 1.5rem;        
        .media__transcript-body-inline-inner {
          p {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
          }
        }
      }
    }
  }


  /*Accourdian css End*/

  .trickle .final_btn_container {
    position: fixed;
    bottom: 43px;
    width: 100%;
    justify-content: space-between;
    right: 0;

    button {
      margin-bottom: 10px;
    }
  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item {
    width: 30vw;
    height: auto;
    perspective: 1000px;
    min-height: 280px;
    cursor: pointer;
  }

  .text_content_manage {
    margin-left: 52px;
  }

  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title .narrative_heading {
    padding: 0px 15px 0px 15px;
  }

  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title .instruction_text {
    padding: 0px 15px 0px 15px;
  }

  .mr_media_wrapper .mediaPageWrapper .textHeadingMedia {
    padding: 0px 15px 0px 15px;
  }

  .media__header {
    padding: 0px 15px 0px 15px;
  }

  .staticPageWrapper .textHeading2 {
    padding: 20px 15px 0px 15px;
  }

  .staticPageWrapper .bodyTitle {
    padding: 15px 15px 20px 15px;
  }

  .flipcardPageWrapper .textHeading {
    padding: 0px 15px 20px 15px;
  }

  .flipcard__header-inner {
    padding: 0px 15px 0px 15px;
  }

  .flipCard_bottomText {
    padding: 0px 15px 0px 15px;
  }

  .staticPageWrapper .textHeading2 {
    padding: 20px 15px 0px 15px;
  }

  .staticPageWrapper .headingPara {
    padding: 20px 15px 20px 15px;
  }

  .staticPageWrapper .textHeading2 {
    padding: 10px 15px 0px 15px;
  }

  .staticPageWrapper .bodyTitle {
    padding: 15px 15px 20px 15px;
  }

  .staticPageWrapper .text_intro04 {
    padding: 10px 15px 0px 0px;
  }

  .staticPageWrapper .showDive_content_inner .component__body {
    padding: 0;
  }

  .staticPageWrapper .showDive_content_inner {
    padding: 30px 15px 0 46px !important;
  }

  .mr_wrapper_container .hotgrapghics_container .container-title .heading {
    padding: 0px 15px 0px 15px !important;
  }

  .padding_topIntro {
    padding-top: 22px;
  }

  .nav__inner {
    padding: 10px 15px 10px 15px;
  }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

  .flipcardPageWrapper {
    .flipcardcontentpart .flipcard_face {
      background: #10069f;
      color: #fff;
      width: 28vw;
      height: 75vh;
      text-align: center;
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }

  .flipcardPageWrapper {
    .flipcardcontentpart {
      .flipcard-widget {
        padding: 0 5px;
      }
    }
  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget {
    display: flex !important;
  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item {
    // width: 28vw;
    min-height: 255px;
    font-size: 15px;
    width: 20rem;
    max-width: 100%;
  }

  .accordionPageWrapper {
    .accordion_container_title {
      padding: 0px 40px 50px 40px;
      display: inline-block;

      .contentpart {
        width: 100% !important;
        padding: 0px;

        // float: left;
        .accordion_item_container {
          .accordion_header_Item {
            position: relative;
            padding: 20px 40px 20px 40px;
            text-align: left;
            // background-color: #016bff;
            color: #fff;
            border-radius: 0px;
            width: 100%;
            height: 60px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            // font-family: 'RRPioneer';
            font-size: 16px;
            display: flex;
            align-items: center;

          }
        }
      }

      .mrImgContainer {
        float: left;

        .desktop_img_accourdian {
          display: none;
        }

        .mobile_img_accourdian {
          display: block;
        }
      }
    }

    .accordion_content_item {
      padding: 1.5rem;
      background-color: #fff !important;
      color: #000;
      width: 100%;
      // border: 4px solid #016bff !important;
      height: auto;
      overflow-y: auto;
      text-align: left;
      font-size: 1rem;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;

    }

    .accordionPageWrapper .textHeading {
      padding: 0px 20px 0px 20px;
    }
  }



  .staticPageWrapper .textHeading {
    padding: 0px 40px 20px 40px;
    font-size: 1.3rem;

  }

  .staticPageWrapper .textHeading2 {
    padding: 20px 40px 0px 40px
  }

  .staticPageWrapper .bodyTitle {
    padding: 15px 40px 20px 40px;
  }

  .flipcardPageWrapper .textHeading {
    padding: 0px 40px 20px 40px;
  }

  .flipcard__header-inner {
    padding: 0px 40px 0px 40px;
  }

  .flipCard_bottomText {
    padding: 0px 40px 0px 40px;
  }

  .staticPageWrapper .headingPara {
    padding: 20px 40px 20px 40px;
  }

  .staticPageWrapper .container-title {
    padding: 5px 5px 5px 40px;
  }

  .accordionPageWrapper .textHeading {
    padding: 0px 40px 0px 40px;
  }

  .textRadioOptionsMCQsurvey .container-title_survey_mcq {
    padding: 0px 40px 20px 40px;
  }

  .textRadioOptionsMCQsurvey .text_bodytext {
    padding: 0px 40px 20px 40px;
  }

  .correct {
    min-height: auto;
  }

  .incorrect {
    min-height: auto;
  }

  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title .narrative_heading {
    padding: 0px 40px 0px 40px;
  }

  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title .instruction_text {
    padding: 0px 40px 0px 40px;
  }

  .mr_media_wrapper .mediaPageWrapper .textHeadingMedia {
    padding: 20px 40px 0px 40px;
  }

  .media__header {
    padding: 0px 40px 20px 40px;
  }

  .staticPageWrapper .text_intro04 {
    padding: 0px 40px 0px 40px;
  }

  .staticPageWrapper .showDive_content_inner .component__body {
    padding: 30px 0 0 30px;
  }

  .mr-is-landscape.size-large .mr_wrapper_container .hotgrapghics_container .container-title .heading {
    padding: 0px 40px 0px 40px;
    font-size: 1rem;
  }

  .mr-is-landscape.size-large .mr_wrapper_container .hotgrapghics_container .container-title .body_content {
    padding: 0px 40px 0px 40px;
  }

  .notify__popup-inner {
    padding: 2rem;
  }

  .notify__popup {
    min-height: 360px;
  }

  .MCQ_ImageTemplate .gmcq__item-label.is-disabled .gmcq__item-option {
    margin-left: 2px;
    margin-right: 3px;
  }

  .MCQ_ImageTemplate .gmcq__item {
    max-width: 260px;
  }

  .MCQ_ImageTemplate .is-selected.correctOpt .gmcq__item-option .gmcq__item-correct-icon {
    right: 1.5px;
  }

  .MCQ_ImageTemplate .is-selected.correctOpt .gmcq__item-option .gmcq__item-incorrect-icon {
    right: 1.5px;
  }

  .MCQ_ImageTemplate .inCorrectOpt .gmcq__item-option .gmcq__item-incorrect-icon {
    right: 1.5px;
  }

  .MCQ_ImageTemplate .inCorrectOpt .gmcq__item-option .gmcq__item-correct-icon {
    right: 1.5px;
  }

  .MCQ_ImageTemplate .MMCQ_container {
    padding: 10px 92px 10px 92px;
  }

  .MCQ_ImageTemplate .component__attribution {
    min-height: 190px;
  }

  .nav__inner {
    padding: 10px 40px 10px 40px;
  }

  .mr_wrapper_container .hotgrapghics_container .container-title .instruction_text {
    padding: 0 0 0 40px;
  }
}

@media only screen and (min-device-width : 813px) and (max-device-width : 1024px) and (orientation : landscape) {
  .w-50 {
    width: 50% !important;
  }

  .staticPageWrapper .container-title .contentpart {
    width: 50% !important;
  }

  .staticPageWrapper .container-title .introImgP {
    width: 50% !important;
  }
}


.menu-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.introSlide {
  position: relative;
  // left: 16%;
  // bottom: -60px;
}

// .is-audio{
//   width: 60%;
// }

.qoutIcon {
  margin-left: -30px;
}

.text_content_manage {
  margin-left: 31px;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {

  .showDive_content_inner {
    .component__body {
      padding: 10px 0 0 10px !important;

    }

  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item {
    min-height: 260px;
    ;
    margin: auto !important;
    max-width: 100% !important;
    width: 22rem !important;
    min-height: 290px !important;
  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-front,
  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-back {
    max-width: 90% !important;
    left: 0;
    right: 0;
    margin: auto;
    color: #000;
  }

  .notify__popup {
    min-height: 350px;
  }

  .MMCQ1 {
    .textHeading {
      padding: 0px 15px 20px 15px;
    }
  }

  .MMCQ1 {
    .question_top_text {
      padding: 0px 15px 20px 15px;

    }
  }

  .MMCQ_container {
    padding: 10px 5px 10px 10px;

    .MMCQ_inner_container {
      padding: 10px 15px 10px 15px;
    }
  }

  .gmcq__item-option {
    .gmcq__item-text {
      font-size: 0.8rem;
      line-height: 1;
      font-size: 1rem;
    }
  }

  .MMCQ_feedbackcontainer .incorrect {
    padding: 70px 25px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: 350px;
  }

  .MMCQ_feedbackcontainer .partial {
    padding: 70px 25px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: 350px;
  }

  .MMCQ_feedbackcontainer .incorrect_firstAttempt {
    padding: 70px 25px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: 350px;
  }

  .MMCQ_feedbackcontainer .correct {
    padding: 70px 25px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: 350px;
  }

  .isIntroSpeechBubble .container-title {
    padding: 20px 15px 10px 15px;
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 896px)and (orientation:landscape) {

  .assessment_Algorithm .textPara {
    font-size: 1.3rem;
    padding: 0px 40px 0px 40px !important;
  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item {
    // min-height: 300px;
  }

  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-front,
  .flipcardPageWrapper .flipcardcontentpart .flipcard-widget .flipcard-item-back {
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    font-size: 1rem;
    color: #000;
  }

  .staticPageWrapper .textHeading {
    padding: 0px 40px 0px 40px !important;
    font-size: 1.3rem;
  }

  .staticPageWrapper .container-title .contentpart_intro {
    display: flex;
    align-items: center;
    padding: 0px 10px 10px 0px !important
  }

  .staticPageWrapper .container-title {
    padding: 10px 40px 10px 40px !important
  }

  .mr_wrapper_container_narrative .narrative_main_container .narrative-container-title .narrative_heading {
    padding: 0px 40px 0px 40px !important;
  }

  .mr_media_wrapper .mediaPageWrapper .textHeadingMedia {
    padding: 0px 40px 0px 40px !important;
  }

  .media__header {
    padding: 0px 40px 10px 40px !important;
  }

  .MCQ_ImageTemplate .textHeading {
    padding: 20px 40px 0px 40px;
  }
  
  .MCQ_ImageTemplate .gmcq__item {
    max-width: 240px !important;
  }
  
  .MCQ_ImageTemplate .gmcq__widget {
    justify-content: space-between;
  }

  .textRadioOptionsMCQsurvey .container-title_survey_mcq {
    padding: 0px 40px 20px 40px;
  }

  .textRadioOptionsMCQsurvey .text_bodytext {
    padding: 0px 40px 20px 40px;
  }
  
  .MCQ_ImageTemplate .component__attribution {
    min-height: 210px;
  }

  .isIntroSpeechBubble .textHeading {
    padding: 20px 40px 0px 40px;
  }

  .isIntroSpeechBubble .bodynum {
    padding: 0px 40px 10px 40px;
  }

  .isIntroSpeechBubble .container-title {
    padding: 20px 40px 10px 40px;
  }

  .staticPageWrapper .textHeading2 {
    padding: 0px 40px 10px 40px !important;
  }

  .staticPageWrapper .bodyTitle {
    padding: 0px 40px 10px 40px !important;
  }

  .flipcardPageWrapper .textHeading {
    padding: 0px 40px 10px 40px !important;
  }

  .flipcard__header-inner {
    padding: 0px 40px 10px 40px !important;
  }

  .flipCard_bottomText {
    padding: 0px 40px 10px 40px !important;
  }

  .accordionPageWrapper .textHeading {
    padding: 0px 40px 10px 40px !important;
  }

  .accordionPageWrapper .accordion_container_title {
    padding: 0px 40px 10px 40px !important;
  }

  .staticPageWrapper .textHeading2 {
    padding: 0px 40px 10px 40px !important;
  }

  .staticPageWrapper .headingPara {
    padding: 0px 40px 10px 40px !important;
  }

  .staticPageWrapper .text_intro04 {
    padding: 0px 40px 0px 0px !important
  }

  .menu.boxmenu .menu-container .logoImg {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
    max-width: 90px !important;
  }

  .notify__popup {
    min-height: 200px;
    // left: 5% !important;
    max-height: 220px;
    overflow-y: auto;
  }

  .MMCQ1 {
    .textHeading {
      padding: 0px 40px 20px 40px;
    }
  }

  .MMCQ1 {
    .question_top_text {
      padding: 0px 40px 20px 40px;
    }
  }

  .MMCQ_feedbackcontainer .incorrect {
    padding: 25px 66px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: auto;
    max-height: 240px;

  }

  .MMCQ_feedbackcontainer .partial {
    padding: 25px 66px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: auto;
    max-height: 240px;

  }

  .MMCQ_feedbackcontainer .incorrect_firstAttempt {
    padding: 25px 66px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: auto;
    max-height: 240px;

  }

  .MMCQ_feedbackcontainer .correct {
    padding: 25px 66px 30px;
    width: 90%;
    overflow-y: auto;
    display: none;
    min-height: auto;
    max-height: 240px;

  }

  .MMCQ_container {
    padding: 10px 40px 10px 40px;
  }

  .padding_topIntro {
    padding-top: 22px;
  }

  .nav__inner {
    padding: 10px 40px 10px 40px;
  }

  .menu.boxmenu .menu-container .menuInstruction {
    padding-left: 30px;
  }
  .staticPageWrapper .showDive_content_inner {
    padding: 30px 30px 0px 46px !important;
  }
}

.footerText {
  font-size: 1.2rem;
  color: #000 !important;
  font-style: normal !important;
  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
     padding: 10px 15px 0 15px;
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
     padding: 10px 40px 0 40px;
  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
     padding: 10px 15px 0 15px;
  }
}

.narrativFooter {
  font-size: 1rem;
  color: #000;
  padding: 0 0 0 20px;
}

.is-selected.correctOpt {
  .gmcq__item-option {
    background-color: #78DF2F !important;
    color: #000 !important;
    
  }

  .gmcq__item-option {
    .gmcq__item-answer-icon {
      display: block !important;
    }

    .gmcq__item-correct-icon {
      position: absolute;
      right: 5px;
      min-height: 51px;
      max-width: 47px;
      top: calc(51% - 22px);
      background: #ffffff69 !important;
      width: 100%;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
  }
}

.is-selected.inCorrectOpt {
  .gmcq__item-option {
    background-color: #c50a00 !important;
    color: #fff !important;
   
  }

  .gmcq__item-option {
    .gmcq__item-answer-icon {
      display: block !important;
    }

    .gmcq__item-incorrect-icon {
      position: absolute;
      right: 5px;
      min-height: 51px;
      max-width: 47px;
      top: calc(51% - 22px);
      background: #ffffff69 !important;
      width: 100%;
      display: flex !important;
      align-items: center;
      justify-content: center;

    }
  }
}


.correctOpt {
  .gmcq__item-option {}

  .gmcq__item-option {
    .gmcq__item-answer-icon {
      display: block !important;
    }

    .gmcq__item-correct-icon {
      position: absolute;
      right: 5px;
      min-height: 51px;
      max-width: 47px;
      top: calc(51% - 22px);
      background: #ffffff69 !important;
      width: 100%;
      display: flex !important;
      align-items: center;
      justify-content: center;
    }
  }
}

.inCorrectOpt {
  .gmcq__item-option {}

  .gmcq__item-option {
    .gmcq__item-answer-icon {
      display: block !important;
    }

    .gmcq__item-incorrect-icon {
      position: absolute;
      right: 5px;
      min-height: 51px;
      max-width: 47px;
      top: calc(51% - 22px);
      background: #ffffff69 !important;
      width: 100%;
      display: flex !important;
      align-items: center;
      justify-content: center;

    }
  }
}

.iText {
  margin-top: 10px !important;
  font-style: italic;
}

.reflection_point {
  .staticPageWrapper {
    .text_intro04 {
      padding: 0px 100px 0px 0px;
      display: flex;
      position: relative;

      .reflection_icon_container {
        width: 14%;
        background: #b6917c;
        justify-content: center;
        padding: 35px 10px;
        text-align: center;
        margin-right: 35px;
        display: flex;
        align-items: center;

        @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
          width: 28%;
        }

        img {
          max-width: 100px;
          width: 100%;
        }
      }

      .reflectionWrapper {
        padding-top: 15px;
        width: 84%;

        .reflection_heading {
          font-size: 1.5rem;
          color: #002559;
          font-weight: 100;
          margin-bottom: 10px;

          @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
            font-size: 1.3rem;
          }

          @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
            font-size: 1.3rem;
          }

          @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
            font-size: 1.3rem;
          }
        }

        .headbody {
          font-size: 1.2rem;

          @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
            font-size: 1rem;
          }

          @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
            font-size: 1rem;
          }

          @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
            font-size: 1rem;
          }
        }
      }
    }

    .showDive_content_inner {
      .component__body {
        padding: 30px 30px 0 168px;

        @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
          padding: 30px 20px 0px 46px !important;
        }

        @media only screen and (min-device-width : 768px) and (max-device-width : 1180px) and (orientation : landscape) {
          padding: 30px 20px 0px 46px !important;
        }

      }

    }

    .showDive_content {
      margin: 0;
    }

    .select_button {
      position: relative;
      bottom: -14px;
    }
  }

}

.reflection_icon_container {
  width: 165px;
  background: #b6917c;
  justify-content: center;
  padding: 35px 10px;
  text-align: center;
  margin-right: 35px;
  display: flex;
  align-items: center;

  @media screen and (max-width: 896px) {
    margin-right: 20px
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    margin-right: 20px
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
    margin-right: 20px
  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    margin-right: 20px
  }
}

.reflectionWrapper {
  padding-top: 15px;
  padding-right: 15px;

  .textHeading {
    padding: 0;
    margin-bottom: 10px;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      padding: 0 !important;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      padding: 0 !important;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      padding: 0 !important;
    }
  }

  .text_bodytext {
    width: 100%;
    background: transparent;
    padding: 0px;
    font-size: 1.5rem;

    .numberContainer {
      max-width: 100%;
      background-color: #002559;
      color: #fff;
      padding: 2px;
      margin-bottom: 0px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 1.2rem;
      min-height: 40px;
      margin-bottom: 10px;

      @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
        font-size: 1rem;
      }

      @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
        font-size: 1rem;
      }

      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
        font-size: 1rem;
      }

      .number {
        width: 5%;
        background: #fff;
        color: #002559;
        text-align: center;
        min-height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        margin-left: 0.5px;
      }

      .numbertext {
        display: inline-block;
        width: 95%;
      }
    }
  }

  .container-title_survey_mcq {
    padding: 0px;
  }

  .mr_submit_button {
    position: relative;
    bottom: -14px;
  }
 }

.assessment_Algorithm {

  .textPara {
    width: 100%;
    background: #fff;
    padding: 0px 100px 20px 100px;

    @media only screen and (max-width: 896px) {
      font-size: 1rem;
      padding: 0px 15px 20px 15px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      padding: 0px 40px 10px 40px !important;
    }


  }

  .staticPageWrapper .container-title {
    width: 100%;
    height: auto;
    display: flex;
    color: #000;
    // background-color: #FEF0E2;
    justify-content: center;
    padding: 5px 100px 5px 100px;

    @media only screen and (max-width: 896px) {
      padding: 0px 15px 0px 15px;
    }
  }

  .staticPageWrapper .container-title .contentpart_intro {
    display: flex;
    align-items: center;
    padding: 0px 15px 0px 15px !important;
    justify-content: center;
  }
}

.body-heading {
  font-size: 1.5rem;
  font-weight: 100;
  margin-bottom: 10px;
  margin-top: 0px;

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    font-size: 1.3rem;

  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
    font-size: 1.3rem;

  }

  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    font-size: 1.3rem;

  }
}

.text_folder {
  .text_folderimage {
    display: flex;
  }

  .text_folder_para {
    padding-left: 20px;
  }
}

.MCQ1 {
  .gmcq__item-option {
    height: auto !important;
    margin-top: 0px !important;
  }

  .gmcq__item-text-inner {
    padding-right: 10px;
    font-size: 1.2rem;

    @media screen and (max-width: 896px) {
      font-size: 1rem;
    }
  }

  .textHeading {
    background: transparent;
    color: #d74520;
    padding: 10px 100px 10px 100px;
    font-weight: 100;
    font-size: 1.5rem;

    p {
      margin: 0;
    }

    @media screen and (max-width: 896px) {
      padding: 0px 15px 0px 15px;
      font-size: 1.3rem;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1.3rem;
      padding: 10px 15px 10px 15px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1.3rem;
      padding: 10px 40px 10px 40px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1.3rem;
      padding: 10px 15px 10px 15px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      font-size: 1.3rem;
      padding: 0px 40px 20px 40px !important;
    }

  }

  .gmcq__item-label.is-selected .gmcq__item-option {
    background-color: #002559;
    color: #fff;
  }
}

.MCQ1 {
  .mr_submit_button {
    outline: none;
    border: none;
    padding: 5px 30px;
    background-color: #fde2c7;
    margin-left: 0px;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #000 !important;
    border-radius: 0 !important;

    @media screen and (max-width: 896px) {
      font-size: 1rem;
    }
  }

  .mr_submit_button:hover {
    background-color: #002559 !important;
    color: #fff !important;
  }

  .mr_submit_button:focus {
    outline: 2px solid #000;
  }

  .mr_showfeedback_button {
    outline: none;
    border: none;
    padding: 5px 30px;
    background-color: #fde2c7;
    margin-left: 0px;
    font-size: 1.2rem;
    margin-bottom: 5px;
    display: none;
    color: #000 !important;
    border-radius: 0 !important;

    @media screen and (max-width: 896px) {
      font-size: 1rem;
    }

    &:hover {
      background-color: #002559 !important;
      color: #fff !important;
    }
  }

  .mr_showfeedback_button:focus {
    outline: 2px solid #000;
  }

  .diablebutton {
    pointer-events: none;
    background: #A5A19D !important;
  }
}

.mr-gmcq-wrapper {
  padding: 1rem 0rem 4rem;
}

.staticPageWrapper .showDive_content_inner .mrImgContainer {
  max-width: 850px;
  margin: auto;

  img {
    width: 100%;
    height: auto;
  }
}

.endText {
  font-size: 1.2rem;
  background-color: #dce6f3;
  text-align: center !important;
  border-radius: 0;
  padding: 10px 10px !important;
  margin-top: 20px;

  p {
    margin: 0;
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    font-size: 1rem;

  }

  @media only screen and (min-device-width : 310px) and (max-device-width : 896px) and (orientation : landscape) {
    font-size: 1rem;

  }

  @media only screen and (min-device-width : 718px) and (max-device-width : 1024px) and (orientation : portrait) {
    font-size: 1rem;

  }
}
.gmcq__item-label{
  margin-bottom: 0.5rem !important;
}

.imgLeft{
  img{
    margin-left: -60px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      margin-left: 0px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      margin-left: 0px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      margin-left: 0px;
    }

  }
}

.c-15{
  .contentpart_intro{
    // width: 100%;
  }
}
.Carosel_SpeechBubbleScenario
{
  .trickelBtn_inner
  {
    width: 100%;
    padding: 15px 0px 15px 0px;
    display: flex;
    justify-content: center;
  } 
  .trickelBtn
  {
    width: 42px;
    height: 42px;
    background: url(course/en/images/down_arrow_active.png) no-repeat;
    margin: auto;
    background-size: 100%;
    border: 1px solid #ccc;
    border-radius: 50%;
  }      
  .main_slider_container
  {
    position: relative;
    height: 100%;
    padding: 0px;
    width: 100%;
    background-color: #eacbb5;
    min-height: 450px;
    @media screen and (max-width: 896px)
    {
      padding: 10px 30px 10px 30px;
    }
  }
  
  .main-container .narrative__slide-container
  {
    width: auto;
    width: 100%;
    // margin-right: 4%;
    overflow-x: hidden;
    // float: left;
    padding-bottom: 10px;
    padding-top: 30px;
    // border:2px solid #FF0000;
  }
  .narrative__content
  {
    display: none;
    float: left;
    width: 48%;
    top:0px;
  }
  .myImgCrausal
  {
    max-width:560px;
  }
  .narrative__slider-image-container
  {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .callout_top
  {
    background-color: #002559;
    padding: 10px;
    color:#FFF;
    position: relative;
    text-align: center;
    // min-height: 60px;
  }
  .callout_top::after
  {
    content: '';
    position: absolute;
    top: 93%;
    left: 38%;    
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: #002559;
    border-bottom: 0;
    border-left: 0;
  }

  .callout_top.topCol
  {
    background-color: #fff;
    padding: 10px;
    top: 4px;
    color:#000;
    position: relative;
    border: #002559 3px solid;
    border-radius: 10px;
    // min-height: 60px;
  }
  .callout_top.topCol::after
  {
    content: '';
    position: absolute;
    top: 100%;
    left: 13%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointeicon.svg);
    background-repeat: no-repeat;
    background-size: 30px;
  }


  
  .callout_top.coll_maa
  {
    background-color: #002559;
    padding: 10px;
    color:#FFF;
    position: relative;
    // min-height: 60px;
  }
  .callout_top.coll_maa::after      
  {
    content: '';
    position: absolute;
    top: 93%;
    left: 20%;    
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: #002559;
    border-bottom: 0;
    border-left: 0;
  }
 

  .callout_bottom
  {
    background-color: #002559;
    padding: 10px;
    color:#FFF;
    position: relative;
    text-align: center;
    //  min-height: 60px;
  }
  .callout_bottom::before
  {
    // content: '';
    // position: absolute;
    // top: -26px;
    // left: 68%;
    // width: 0;
    // height: 0;
    // border: 30px solid transparent;
    // border-bottom-color: #002559;
    // border-top: 0;
    // border-right: 0;
  }

  .callout_bottom.bottomFlipColl
  {
    background-color: #002559;
    padding: 10px;
    color:#FFF;
    position: relative;

    //  min-height: 60px;
  }
  .callout_bottom.bottomFlipColl::before
  {
    content: '';
    position: absolute;
    top: -26px;
    left: 85%;
    width: 0;
    height: 0;  
    border: 30px solid transparent;
    border-bottom-color: #002559;
    border-top: 0;
    border-left: 0;
  }
  



  .callout_bottom.botCol
  {
    background-color: #fff;
    padding: 10px;
    top: -5px;
    color:#000;
    position: relative;
    border: #002559 3px solid !important;
    border-radius: 10px;
    //  min-height: 60px;
  }
  .callout_bottom.botCol::after
  {
    content: '';
    position: absolute;
    top: -20%;
    left: 86%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer_2_M7.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -13%;
      left: 85%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      position: absolute;
      top: -20%;
      left: 86%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -20%;
      left: 86%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }

    @media only screen and (min-device-width : 767px) and (max-device-width : 1200px) and (orientation : landscape) {
      content: '';
      position: absolute;
      top: -20%;
      left: 81%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }
  }

  .callout_bottom.botCol1
  {
    background-color: #fff;
    padding: 10px;
    top: -5px;
    color:#000;
    position: relative;
    border: #002559 3px solid !important;
    border-radius: 10px;
    //  min-height: 60px;
  }
  .callout_bottom.botCol1::after
  {
    content: '';
    position: absolute;
    top: -19%;
    left: 57%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer_2_M7.svg);
    background-repeat: no-repeat;
    background-size: 30px;
  }

  .callout_top.left_top  
  {
    background-color: #fff;
    padding: 10px;
    top: 4px;
    color:#000;
    position: relative;
    border: #002559 3px solid !important;
    border-radius: 10px;
    // min-height: 60px;
  }
  .callout_top.left_top::after
  {
    content: '';
    position: absolute;
    top: 100%;
    left: 32%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointeicon.svg);
    background-repeat: no-repeat;
    background-size: 30px;
  }

  .callout_bottom.left_bottom
  {
    background-color: #fff;
    padding: 10px;
    top: -5px;
    color:#000;
    position: relative;
    border: #002559 3px solid !important;
    border-radius: 10px;
    //  min-height: 60px;
  }
  .callout_bottom.left_bottom::before
  {
    content: '';
    position: absolute;
    top: -28px;
    left: 75%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer_2_M7.svg);
    background-repeat: no-repeat;
    background-size: 30px;
  }
  
  .callout_img
  {
    display: block;

  }



  
}
.c-70{
  .callout_top.topCol::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 14%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointeicon.svg);
    background-repeat: no-repeat;
    background-size: 30px;
 }

 .callout_top.left_top::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 46%;
  width: 35px;
  height: 30px;
  border: none;
  background: url(course/en/images/Callout_Pointeicon.svg);
  background-repeat: no-repeat;
  background-size: 30px;
 }

 .callout_top.topColThird{
  background-color: #fff;
  padding: 10px;
  top: 4px;
  color:#000;
  position: relative;
  border: #002559 3px solid;
  border-radius: 10px;
 }
 .callout_top.topColThird::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 34%;
  width: 35px;
  height: 30px;
  border: none;
  background: url(course/en/images/Callout_Pointeicon.svg);
  background-repeat: no-repeat;
  background-size: 30px;
 }



  .callout_bottom.botCol::after{
    content: '';
    position: absolute;
    top: -61%;
    left: 86%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer_2_M7.svg);
    background-repeat: no-repeat;
    background-size: 30px;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -41%;
      left: 85%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -63%;
      left: 86%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
   }
  }

 .callout_bottom.botColThird {
  background-color: #fff;
  padding: 10px;
  top: -5px;
  color:#000;
  position: relative;
  border: #002559 3px solid !important;
  border-radius: 10px;
  // min-height: 60px;
 }
  .callout_bottom.botColThird::after {
    content: '';
    position: absolute;
    top: -60%;
    left: 10%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer_2_M7.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -41%;
      left: 7%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      content: '';
       position: absolute;
       top: -61%;
       left: 10%;
       width: 35px;
       height: 30px;
       border: none;
       background: url(course/en/images/Callout_Pointer_2_M7.svg);
       background-repeat: no-repeat;
       background-size: 30px;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -63%;
      left: 10%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
   }
  }


}

.c-100{
  .callout_top.topCol::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 77%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointeicon.svg);
    background-repeat: no-repeat;
    background-size: 30px;
 }

 .callout_top.left_top::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 35%;
  width: 35px;
  height: 30px;
  border: none;
  background: url(course/en/images/Callout_Pointeicon.svg);
  background-repeat: no-repeat;
  background-size: 30px;
 }


  .callout_bottom.botCol::after{
    content: '';
    position: absolute;
    top: -23%;
    left: 86%;
    width: 35px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer_2_M7.svg);
    background-repeat: no-repeat;
    background-size: 30px;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -15%;
      left: 85%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      content: '';
      position: absolute;
      top: -23%;
      left: 86%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer_2_M7.svg);
      background-repeat: no-repeat;
      background-size: 30px;
   }
  }

}

.c-85{
  .gmcq__item-option{
    margin-top: 5px !important;
  }
  .gmcq__item-label{
    margin-bottom: 0rem !important;
   }
}

.footerTexts {
  font-size: 1.2rem;
  text-align: center !important;
  border-radius: 0;
  padding: 10px 0px !important;

  margin: 0;

  p {
    margin: 0;
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    font-size: 1rem;

  }

  @media only screen and (min-device-width : 310px) and (max-device-width : 896px) and (orientation : landscape) {
    font-size: 1rem;

  }

  @media only screen and (min-device-width : 718px) and (max-device-width : 1024px) and (orientation : portrait) {
    font-size: 1rem;

  }
}

// SpeechBubble_textOnLeftCoulmn Bipin CSS
.Carosel_withSpeechBubble_textOnLeftCoulmn {
  .main_slider_container {
    position: relative;
    height: 100%;
    padding: 20px 100px 10px 80px;
    width: 100%;
    background-color: #eacbb5;
    min-height: auto;

    @media screen and (max-width: 896px) {
      padding: 0px 30px 0px 30px;
    }


  }

  .narrative_text_inner_wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: unset;
    min-height: 350px;
  }

  .main-container .narrative__slide-container {
    width: 560px;
    margin-right: 0%;
    overflow-x: hidden;
  }

  .narrative__content {
    max-width: 500px;
    top: 0px;
    font-size: 1.2rem;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 310px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 718px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1rem;

    }
  }

  .callout_top {
    // background-color: #002559;
    border: 2px solid #002559;
    border-radius: 10px;
    padding: 10px;
    // color: #FFF;
    color: #000;
    position: relative;
    text-align: center;

    // min-height: 60px;
  }

  .callout_top::after {
    content: '';
    position: absolute;
    top: 98%;
    right: 15%;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: #002559;
    border-bottom: 0;
    border-left: 0;
  }

  .batispeeck {
    background-color: #fff;
    border: 3px solid #002559;
    border-radius: 10px;
    padding: 10px;
    color: #000;
    position: relative;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.2rem;
    top: 5px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1rem;
    }

    @media only screen and (min-device-width : 310px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 718px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1rem;
    }
    // min-height: 60px;
  }

  .batispeeck::after {
    position: absolute;
    top: 100%;
    left: 71%;
    width: 36px;
    height: 30px;
    border: none;
    background: url(course/en/images/Callout_Pointer.svg);
    background-repeat: no-repeat;
    background-size: 30px;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      position: absolute;
      top: 100%;
      left: 70%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 18px;

    }

    @media only screen and (min-device-width : 310px) and (max-device-width : 896px) and (orientation : landscape) {
      position: absolute;
      top: 100%;
      left: 71%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 18px;
    }

    @media only screen and (min-device-width : 718px) and (max-device-width : 1024px) and (orientation : portrait) {
      position: absolute;
      top: 100%;
      left: 71%;
      width: 35px;
      height: 30px;
      border: none;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 30px;

    }
  }


  .fatherspeeck {
    background-color: #fff;
    border: 3px solid #002559;
    border-radius: 10px;
    // background-color: #002559;
    padding: 10px;
    color: #000;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    top: 5px;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1rem;
    }

    @media only screen and (min-device-width : 310px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 718px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1rem;
    }
    // min-height: 60px;
  }

  .fatherspeeck::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 75%;
    width: 36px;
    height: 30px;
    background: url(course/en/images/Callout_Pointer.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    border: none;
     @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      background-size: 18px;
    }
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      background-size: 18px;
    }
  }

  .blankColout {
    background-color: #002559;
    padding: 10px;
    color: #FFF;
    position: relative;
    text-align: center;

    // min-height: 60px;
  }

  .blankColout::after {
    content: '';
    position: absolute;
    top: 97%;
    right: 15%;
    width: 0;
    height: 0;
    border: 0px solid transparent;
    border-top-color: #002559;
    border-bottom: 0;
    border-left: 0;
  }

  .leftColout {
    background-color: #fff;
    border: 3px solid #002559;
    border-radius: 10px;
    padding: 10px;
    color: #000;
    position: relative;
    font-size: 1.2rem;
    top: 5px;

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 310px) and (max-device-width : 896px) and (orientation : landscape) {
      font-size: 1rem;

    }

    @media only screen and (min-device-width : 718px) and (max-device-width : 1024px) and (orientation : portrait) {
      font-size: 1rem;

    }
  }

  .leftColout:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 32%;
    width: 36px;
    height: 30px;
    background: url(course/en/images/Callout_Pointer.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    border:none;

    @media screen and (max-width: 896px) {
      position: absolute;
      top: 100%;
      left: 34%;
      width: 36px;
      height: 30px;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 30px;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      position: absolute;
      top: 102%;
      left: 34%;
      width: 36px;
    height: 30px;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 18px;

    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
      background-size: 18px;
      top: 102%;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      position: absolute;
      top: 100%;
      left: 34%;
      width: 36px;
      height: 30px;
      background: url(course/en/images/Callout_Pointer.svg);
      background-repeat: no-repeat;
      background-size: 30px;

    }
  }
}

.c-15, .c-20, .c-21 {
  .heading {
    padding: 0px 40px 0px 100px !important;

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      padding: 0px 40px 0px 40px !important;
    }
  }

  .instruction_text {
    padding: 0px 100px 0px 100px !important;

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      padding: 0px 40px 0px 40px !important;
    }
  }
}

.c-20, .c-21{
  .hotgraphicTabs_button_container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    .hotgraphic__tile{
      max-width: 350px;
      img{
        height: 450px;
      }
      .button_text_hotspotTabs{
        top: 450px;
      }
    }
  }
}

.mr_mcq_wrapper {
  padding: 1rem 0rem 4rem;
  width: 100%;
  height: auto;
}

.ContentImgaeContainer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .mcqImageContainer{
    width: 100%;
  }
}

.containerWithImage {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  align-items: center;

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    padding: 0px 15px 5px 10px !important;
    flex-wrap: wrap;
  }



  .text {
    flex: 1;
    /* Allow the text to take up remaining space */
    padding-right: 20px;
    /* Add some spacing between text and image */
  }

  img { 
    max-width: 22%;
    height: auto;
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      margin-top: 10px;
      max-width: 100% !important;
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
      margin-top: 10px;
      max-width: 22% !important;
    }
  }

  
}

.containerWithTextImage {
  display: flex;
  /* Use flexbox to align items */
  align-items: center;
  /* Center items vertically */
  justify-content: space-between;
  /* Add space between items */
  // max-width: 800px;
  /* Set a max-width for the container */
  margin: 0 auto;
  /* Center the container */
  padding: 0px 100px 0px 100px;

  /* Add some padding */

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
    padding: 0px 15px 0px 15px;
  }

  @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
    padding: 0px 40px 0px 40px;
  }

  @media only screen and (min-device-width : 767px) and (max-device-width : 1024px) and (orientation : portrait) {
    padding: 0px 15px 0px 15px;
  }

  .text {
    flex: 1;
    /* Allow the text to take up remaining space */
    padding-right: 20px;

    /* Add some spacing between text and image */
    .textHeading {
      padding: 0px 100px 0px 10px !important;
      font-size: 1.5rem;
      color: #233c97;

      @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
        font-size: 1.3rem;
        padding: 0 15px 0 15px !important;
      }

      @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : landscape) {
        font-size: 1.3rem;
        padding: 0 40px 0 40px;
      }

      @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
        font-size: 1.3rem;
        padding: 0 15px 0 15px;
      }
    }
  }

  img {
    max-width: 10%;
    margin-top: -100px;
    /* Set a max-width for the image */
    height: auto;

    /* Preserve the aspect ratio of the image */
    @media only screen and (min-device-width : 320px) and (max-device-width : 896px) and (orientation : portrait) {
      margin-top: -252px;
      height: auto;
    }
  }
}

.click_icon{
  margin-right: 15px;
}

.instruction_text{
  p{
    margin: 0;
  }
}

.c-15{
  .w-50{
    @media only screen and (min-device-width: 813px) and (max-device-width: 1024px) and (orientation: landscape){
      width: 100% !important;
    }
  }
}


  

.c-51, .c-52, .c-53, .c-54, .c-54a{
  .heading {
    padding: 0px 40px 0px 100px !important;

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      padding: 0px 40px 0px 40px !important;
    }
  }

  .instruction_text {
    padding: 0px 100px 0px 100px !important;

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
      padding: 0px 40px 0px 40px !important;
    }
  }
}

.scenarionMCQ{
  .is-selected.is-incorrect .gmcq__item-option{
    background-color: #002559 !important;
    color: #fff !important;
  }
  .MMCQ1 .gmcq__item-label.is-selected .gmcq__item-option{
    background-color: #002559 !important;
    color: #fff !important;
  }
  .is-selected.is-incorrect .gmcq__item-option .gmcq__item-incorrect-icon{
    display: none !important;
  }
  .is-incorrect .gmcq__item-option .gmcq__item-incorrect-icon{
    display: none !important;
  }
  .is-correct .gmcq__item-option .gmcq__item-correct-icon{
    display: none !important;
  }
 
  .gmcq__widget.show-user-answer .is-correct .gmcq__item-correct-icon, .gmcq__widget.show-user-answer .is-incorrect .gmcq__item-incorrect-icon{
    display: none !important;
  }
  .gmcq__widget.show-user-answer .is-correct .is-selected .gmcq__item-correct-icon, .gmcq__widget.show-user-answer .is-incorrect .is-selected .gmcq__item-incorrect-icon{
    display: none !important;
  }   
  
  .is-incorrect .gmcq__item-option .gmcq__item-answer-icon{
    display: block !important;
  }
  .is-selected.is-incorrect .gmcq__item-option .gmcq__item-answer-icon{
    display: block !important;
  }
  .is-selected.is-correct .gmcq__item-option .gmcq__item-answer-icon{
    display: block !important;
  }
  .is-correct .gmcq__item-option .gmcq__item-answer-icon{
    display: block !important;
  }
}

.imgContainer{
  margin: auto;
  // max-width:500px
}

.crossBtnPosition{
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}

.crossBtnPosition:hover{
  transform: scale(1.3);
}

.Hovering-effect:hover{
  opacity: 0.5;
  // transition: all ease-in-out 250ms;
  @media screen and (max-width: 896px) {
    opacity: 1;
  }  
  @media only screen and (min-device-width: 768px) and (max-device-width: 1200px) and (orientation: landscape)
    { 
      opacity: 1;
    }
}
.linkCOLOR{
  color: #0563c1 !important;
 &:hover{
  color: #1a0dab !important;
 }
}
