.hotgraphic {
  &__widget {
    position: relative;
  }

  // --------------------------------------------------
  // Hotgraphic as pins
  // --------------------------------------------------
  &__pin {
    position: absolute;
    top: 0;
    left: 0;
  }

  &__pin .icon {
    .icon-pin;
  }

  &__pin.has-pin-image {
    padding: 0;
  }

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

  // --------------------------------------------------
  // Hotgraphic as tiles
  // --------------------------------------------------
  &__tile-item-container {
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    font-size: 1.5rem;
  }

  &__tile-item {
    width: 50%;
    line-height: 0;
  }

  &__tile {
    // width: 320px;
    background-color: transparent;
    // border: 1px solid #233c97;
    // padding: 12px;
    position: relative;
    color: #233c97;
    // margin-bottom: 10px;
    // height: 54px;
    // margin-left: 20px;
    line-height: 0;

    img {
      // position: absolute;
      // left: 0;
      // top: 0;
      // width: 320px;
      // height: 54px;
      // object-fit: contain;
    }

    .button_text_hotspot {
      position: absolute;
      left: 62px;
      top: 0px;
      z-index: 1;
      display: block;
      width: 80%;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
    }
  }

  // --------------------------------------------------
}




.position_buttontemp01 {
  position: relative;
  top: 0px;
}

.mr_wrapper_container {
  padding: 1rem 0rem 4rem;
  width: 100%;
  min-height: 100%;
  background-color: #fff;

  @media screen and (max-width: 896px) {
    padding: 1rem 0rem 4rem !important;
  }

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

    // box-shadow: 0 15px 15px #bdbdbd;
    .container-title {
      color: #000;
      // background: #fef0e2;
      height: 100%;
      width: 100%;

      .container {
        position: relative;
      }

      .heading {
        color: #233c97;
        padding: 0px 0px 0px 100px;
        font-size: 1.5rem;
        margin-bottom: 0px;
        font-weight: 100;

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

        @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 !important;
        }

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

        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
          padding: 0px 40px 0px 40px
        }
      }

      .clicked_container {
        // display: grid;
        // grid-template-columns: repeat(2, 0.5fr);
        // grid-auto-rows: 212px;
        // column-gap: 6px;
        // margin-bottom: 10px;
        max-width: 100%;
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: relative;
      }

      .clicked_container2 {

        max-width: 469px;
        width: 100%;
        height: auto;
        margin: 0 auto;
        position: absolute;
        border: 1px solid #FF0000;
        top: 20px;
      }


      .hotgraphics_container {
        width: 100%;
        height: auto;
        // display: flex;
        color: #000;
        background-color: transparent;
        justify-content: space-between;
        gap: unset;
        padding: 30px 0px 20px 0px;
        flex-wrap: wrap;

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

        @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {
          display: block;
          width: 100%;
          padding: 18px 15px 10px 15px;
        }

        @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
          padding: 30px 15px 10px 15px;
        }

        .hotographic_instructions {
          font-size: 1.2rem;
          font-style: italic;

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

      }



      .hotgraphics_container_temp1 {
        width: 100%;
        height: auto;
        display: flex;
        color: #000;
        background-color: transparent;
        justify-content: center;
        gap: unset;
        padding: 40px 5px 20px 100px;

        @media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation:portrait) {
          display: block;
          width: 100%;
          padding: 40px 5px 20px 5px;
        }

      }

      .clicked_btn {
        height: 100%;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        position: relative;
        height: 219px;
        width: 215px;

        img {
          position: absolute;
          height: 90px;
        }

        .text {
          position: absolute;
          width: 165px;
          display: inline-block;
          color: #fff;
          font-size: 1.3rem;

          h3 {
            margin: 5px 0px;
          }

          p {
            margin: 5px 0px;
          }
        }

        .tick_icon {
          display: none;
        }

      }

      .feedback_container_box {
        height: auto;

        .feedback-container {
          position: absolute;
          width: 290px;

          .close_btn {
            position: absolute;
            right: 5px;
            top: 5px;
            width: 25px;
            display: none;
          }

          .feedback {
            background-color: #ccc;
            padding: 10px;
            height: auto;
            color: #fff;

            .feedback_body {
              min-height: 196px;
            }
          }

        }

        ul {
          list-style: unset !important;
          margin-top: 0px;
          margin-bottom: 0px;
          font-size: 1.1rem;
          margin-left: -20px;
        }

        ul>li:before {
          content: none !important;
        }
      }

      .instruction_text {
        font-size: 1.1rem;
        font-style: italic;
        padding: 0px 0px 0px 100px;

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

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

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

        p {
          margin-top: 0.8rem;
          margin-bottom: 0.8rem;
        }
      }

      .body_content {
        @media screen and (max-width: 896px) {
          font-size: 1rem !important;
          padding: 0px 15px 0px 15px;
        }

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

.tab-container {
  .tab-panel {
    padding: 10px;
    background-color: #C8C7CC;
    margin-bottom: 10px;
    min-height: 70px;
    font-size: 1.3rem;

    p {
      margin-bottom: 5px;
      margin-top: 5px;
    }
  }
}

.hotgraphic.is-complete .mr_wrapper_container .hotgraphic__tile-item-container .container-title .container .clicked_container .clicked_btn .click_icon {
  display: none;
}

.hotgraphic.is-complete .mr_wrapper_container .hotgraphic__tile-item-container .container-title .container .clicked_container .clicked_btn .tick_icon {
  display: block;
}

.show {
  display: block !important;
}




@media only screen and (min-device-width: 320px) and (max-device-height: 896px) and (orientation:portrait) {
  .mr_wrapper_container {
    padding: 0.5rem 0.5rem 4rem;
    width: 100%;
    min-height: 100%;
    background-color: #fff;

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


      .container-title {
        color: #000;

        height: 100%;
        width: 100%;

        .container {
          position: relative;
        }

        .heading {
          padding: 5px 15px !important;
        }

        .clicked_container {
          max-width: 320px;
          width: 100%;
          height: auto;
          margin: 0 auto;
          position: relative;
        }

        .clicked_btn {
          height: 100%;
          background-size: contain !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          position: relative;
          height: 158px;
          width: 154px;

          img {
            position: absolute;
            height: 60px;
          }

          .text {
            position: absolute;
            width: 102px;
            display: inline-block;
            color: #fff;
            font-size: 0.8rem;
            margin-top: -22px;

            h3 {
              margin: 5px 0px;
            }

            p {
              margin: 5px 0px;
            }
          }

          .tick_icon {
            display: none;
          }

        }

        .feedback_container_box {
          height: auto;

          .feedback-container {
            position: absolute;
            width: 328px;
            top: -2px !important;
            right: 0 !important;
            left: 0 !important;
            bottom: auto !important;

            .close_btn {
              position: absolute;
              right: 5px;
              top: 5px;
              width: 25px;
              display: block;
            }

            .feedback {
              background-color: #ccc;
              padding: 10px;
              height: auto;
              color: #fff;

              .feedback_body {
                min-height: 300px;
                padding-top: 30px;
              }
            }

          }

          ul {
            list-style: unset !important;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 1.1rem;
            margin-left: -20px;
          }

          ul>li:before {
            content: none !important;
          }
        }

        .instruction_text {
          font-size: 1rem;
          padding: 0px 15px 0px 15px !important;

          p {
            margin-top: 0.8rem;
            margin-bottom: 0.8rem;
          }
        }
      }
    }

  }
}


@media only screen and(min-device-width: 320px) and (max-device-height: 896px) and (orientation:landscape) {
  .mr_wrapper_container {
    padding: 1rem 0rem 4rem;
    width: 100%;
    min-height: 100%;

    // background-color: #58009c;
    .hotgrapghics_container {
      width: 100%;
      height: auto;

      // box-shadow: 0 15px 15px #bdbdbd;
      .container-title {
        color: #000;
        height: 100%;
        width: 100%;

        .container {
          position: relative;
        }

        .clicked_container {
          max-width: 320px;
          width: 100%;
          height: auto;
          margin: 0 auto;
          position: relative;
        }

        .clicked_btn {
          height: 100%;
          background-size: contain !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          position: relative;
          height: 158px;
          width: 154px;

          img {
            position: absolute;
            height: 60px;
          }

          .text {
            position: absolute;
            width: 102px;
            display: inline-block;
            color: #fff;
            font-size: 0.8rem;
            margin-top: -22px;

            h3 {
              margin: 5px 0px;
            }

            p {
              margin: 5px 0px;
            }
          }

          .tick_icon {
            display: none;
          }

        }

        .feedback_container_box {
          height: auto;

          .feedback-container {
            position: absolute;
            width: 450px;
            top: -2px !important;
            right: 0 !important;
            left: 0px !important;
            bottom: auto !important;
            margin: 0 auto;

            .close_btn {
              position: absolute;
              right: 5px;
              top: 5px;
              width: 25px;
              display: block;
            }

            .feedback {
              background-color: #ccc;
              padding: 10px;
              height: auto;
              color: #fff;

              .feedback_body {
                min-height: 300px;
                padding-top: 30px;
                width: 100%;
              }
            }

          }

          ul {
            list-style: unset !important;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 1.1rem;
            margin-left: -20px;
          }

          ul>li:before {
            content: none !important;
          }
        }
      }
    }

  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .mr_wrapper_container {
    padding: 1rem 0rem 4rem;
    width: 100%;
    min-height: 100%;

    // background-color: #58009c;
    .hotgrapghics_container {
      width: 100%;
      height: auto;
      margin-top: 0px;

      // box-shadow: 0 15px 15px #bdbdbd;
      .container-title {
        color: #000;

        height: 100%;
        width: 100%;

        .container {
          position: relative;
        }

        .heading {
          // background: #58009c;
          // color: #fff;

          // margin-right: -31px;  
          margin: 0 0px 0 0;
        }

        .clicked_container {
          max-width: 320px;
          width: 100%;
          height: auto;
          margin: 0 auto;
          position: relative;
        }

        .clicked_btn {
          height: 100%;
          background-size: contain !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          position: relative;
          height: 158px;
          width: 154px;

          img {
            position: absolute;
            height: 60px;
          }

          .text {
            position: absolute;
            width: 102px;
            display: inline-block;
            color: #fff;
            font-size: 0.8rem;
            margin-top: -22px;

            h3 {
              margin: 5px 0px;
            }

            p {
              margin: 5px 0px;
            }
          }

          .tick_icon {
            display: none;
          }

        }

        .feedback_container_box {
          height: auto;

          .feedback-container {
            position: absolute;
            width: 328px;
            top: -2px !important;
            right: 0 !important;
            left: 0 !important;
            bottom: auto !important;
            margin: 0 auto;

            .close_btn {
              position: absolute;
              right: 5px;
              top: 5px;
              width: 25px;
              display: block;
            }

            .feedback {
              background-color: #ccc;
              padding: 10px;
              height: auto;
              color: #fff;

              .feedback_body {
                min-height: 300px;
                padding-top: 30px;
                width: 100%;

              }
            }

          }

          ul {
            list-style: unset !important;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 1.1rem;
            margin-left: -20px;
          }

          ul>li:before {
            content: none !important;
          }
        }

      }
    }

  }

  .notify__popup-inner {
    padding: 2rem 2rem 4rem 2rem !important;
  }

  .mr_media_wrapper {
    padding: 1rem 0rem 1rem;
    width: 100%;
    min-height: auto;
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  .mr_wrapper_container {
    padding: 1rem 0rem 4rem;
    width: 100%;
    min-height: 100%;

    // background-color: #58009c;
    .hotgrapghics_container {
      width: 100%;
      height: auto;

      // box-shadow: 0 15px 15px #bdbdbd;
      .container-title {
        color: #000;

        height: 100%;
        width: 100%;

        .container {
          position: relative;
        }

        .heading {
          // background: #58009c;
          // color: #fff;


        }

        .clicked_container {
          max-width: 320px;
          width: 100%;
          height: auto;
          margin: 0 auto;
          position: relative;
        }

        .clicked_btn {
          height: 100%;
          background-size: contain !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          position: relative;
          height: 158px;
          width: 154px;

          img {
            position: absolute;
            height: 60px;
          }

          .text {
            position: absolute;
            width: 102px;
            display: inline-block;
            color: #fff;
            font-size: 0.8rem;
            margin-top: -22px;

            h3 {
              margin: 5px 0px;
            }

            p {
              margin: 5px 0px;
            }
          }

          .tick_icon {
            display: none;
          }

        }

        .feedback_container_box {
          height: auto;

          .feedback-container {
            position: absolute;
            width: 316px;
            margin: 0 auto;

            .close_btn {
              position: absolute;
              right: 5px;
              top: 5px;
              width: 25px;
              display: none;
            }

            .feedback {
              background-color: #ccc;
              padding: 10px;
              height: auto;
              color: #fff;

              .feedback_body {
                height: 175px;
                padding-top: 0px;
                min-height: unset;
              }
            }

          }

          ul {
            list-style: unset !important;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 0.9rem;
            margin-left: -20px;
          }

          ul>li:before {
            content: none !important;
          }
        }

      }
    }

  }

  .staticPageWrapper .showDive_content_inner {
    padding: 0rem 2.4rem 0rem 4rem !important;
  }

  .mr_wrapper_container_text {
    min-height: 100%;
  }

  .accordionPageWrapper {
    min-height: 100%;
  }

  .narrativFooter {
    font-size: 1rem;
    color: #000;
    padding: 0 0 0 20px;
    margin-left: 0px;
  }
}







@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .mr_wrapper_container {
    padding: 1rem 0rem 4rem !important;
    width: 100%;
    min-height: 100%;
    background-color: #fff;

    .hotgrapghics_container {
      width: 100%;
      height: auto;
      margin-top: 74px;

      // box-shadow: 0 15px 15px #bdbdbd;
      .container-title {
        color: #000;

        height: 100%;
        width: 100% !important;

        .container {
          position: relative;
        }

        .heading {

          color: #fff;
          padding: 0px 0px 0px 100px;
        }

        .clicked_container {
          max-width: 320px;
          width: 100%;
          height: auto;
          margin: 0 auto;
          position: relative;
        }

        .clicked_btn {
          height: 100%;
          background-size: contain !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          position: relative;
          height: 158px;
          width: 154px;

          img {
            position: absolute;
            height: 60px;
          }

          .text {
            position: absolute;
            width: 102px;
            display: inline-block;
            color: #fff;
            font-size: 0.8rem;
            margin-top: -22px;

            h3 {
              margin: 5px 0px;
            }

            p {
              margin: 5px 0px;
            }
          }

          .tick_icon {
            display: none;
          }

        }

        .feedback_container_box {
          height: auto;

          .feedback-container {
            position: absolute;
            width: 316px;
            margin: unset !important;

            .close_btn {
              position: absolute;
              right: 5px;
              top: 5px;
              width: 25px;
              display: none;
            }

            .feedback {
              background-color: #ccc;
              padding: 10px;
              height: auto;
              color: #fff;

              .feedback_body {
                height: 140px;
                padding-top: 0px;
                min-height: unset;
              }
            }

          }

          [data-id="0"] {
            right: 0px !important;
            left: 0px !important;
            top: -4px !important;
            bottom: auto !important;
          }

          [data-id="1"] {
            right: 8px !important;
            left: auto !important;
            top: -4px !important;
          }

          [data-id="2"] {
            right: 0px !important;
            left: 0 !important;
            bottom: -4px !important;
            top: auto !important;
          }

          [data-id="3"] {
            right: 8px !important;
            left: auto !important;
            bottom: -4px !important;
            top: auto !important;
          }


          ul {
            list-style: unset !important;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 0.9rem;
            margin-left: -20px;
          }

          ul>li:before {
            content: none !important;
          }
        }

        .instruction_text {
          font-size: 1.1rem;

          p {
            margin-top: 0.8rem;
            margin-bottom: 0.8rem;
          }
        }
      }
    }

  }
}

.bottom_text {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 4px;
  width: 100%;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 5px 0 5px 100px;
}

.disabled-itm-btn {
  width: 75%;
  background-color: #fff;
  border: 1px solid #cccccc;
  padding: 12px;
  position: relative;
  color: #cccccc;
  cursor: default;
  pointer-events: none;
  font-size: 1.2rem;

  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 47px;
    object-fit: contain;
  }
}

.hotgraphic-popup__item-title {
  font-size: 1.5rem !important;

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

.hotgraphic__tile {
  font-size: 1.2rem;

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

.hotgraphic-popup__close {
  position: absolute;
  top: -35px;
  right: -32px;

  @media screen and (max-width: 896px) {
    top: -25px;
    right: -22px;
  }
}

.notify__popup-inner {
  @media screen and (max-width: 896px) {
    padding: 1.3rem !important;
  }

  @media screen and (max-width: 850px) {
    padding: 1.3rem !important;
  }
}

.hotGraphics_img_container {
  max-width: 510px;
  margin: auto;
  margin-bottom: 10px;


  img {
    height: auto;
    width: 100%;
  }

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

.position_button {
  text-align: center;
}

.hotgraphic_button_container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.hotgraphic__tile.is-visited {
  filter: saturate(0.5) !important;
  // opacity: 0.7;
}

.singlebtn {
  line-height: 0;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 65px 0 65px;

  .item-0 {
    margin-bottom: -130px;

  }
}

.leftsidebtn {
  line-height: 0;
  width: 32%;
  justify-content: space-between;
  margin-bottom: -43px;

  // padding-left: 16px;
  .hotgraphic__tile {
    // max-width: 40px;
  }
}

.bothsidebtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  // padding: 0 42px 0 10px;
  .disabled_Icon_container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 31.5%;
    margin-bottom: -10px;

    img {
      max-width: 52px;
    }
  }

  .hotgraphic_button_container {
    width: 29%;
    justify-content: space-around;
    margin-bottom: -54px;

    button {
      line-height: 1.8;
      // max-width: 40px;

    }
  }
}

.leftsidebtn_withLine {
  line-height: 0;
  width: 20%;
  justify-content: center;
  margin-bottom: -155px;
  padding-left: 10px;

  .hotgraphic__tile {
    // max-width: 40px;
    margin-bottom: 10px;
  }
}


@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation: portrait) {
  .singlebtn {
    line-height: 0;
    padding: 0 35px 0 35px;

    .item-0 {
      margin-bottom: -100px;
    }
  }

  .leftsidebtn {
    line-height: 0;
    width: 33%;
    justify-content: space-between;
    margin-bottom: -36px;
    padding-left: 0px;

    .hotgraphic__tile {
      max-width: 35px;
      margin-bottom: 8px;
    }
  }

  .bothsidebtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 5px;
    padding-top: 20px;

    .disabled_Icon_container {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 33%;
      margin-bottom: 0px;

      img {
        max-width: 35px;
      }
    }

    .hotgraphic_button_container {
      width: 28%;
      justify-content: space-around;
      margin-bottom: -38px;

      button {
        line-height: normal;
        max-width: 40px;
        margin-bottom: 5px;
      }
    }
  }

  .instruction_text {
    font-size: 1rem !important;
    padding: 0 15px 0 15px !important;

    p {
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
    }
  }

  .narrativFooter {
    padding: 0 !important;
    margin-left: -8px;
  }

  .leftsidebtn_withLine {
    line-height: 0;
    width: 20%;
    justify-content: center;
    margin-bottom: -120px;
    padding-left: 5px;

    .hotgraphic__tile {
      max-width: 40px;
      margin-bottom: 14px;

    }
  }
}

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

  .singlebtn {
    line-height: 0;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 0 50px 0 50px;

    .item-0 {
      margin-bottom: -130px;

    }
  }

  .leftsidebtn {
    line-height: 0;
    width: 34%;
    justify-content: space-between;
    margin-bottom: -58px;
    padding-left: 0px;

    .hotgraphic__tile {
      max-width: 52px;
      margin-bottom: 16px;
    }
  }

  .bothsidebtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 40px;

    .disabled_Icon_container {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 40%;
      margin-bottom: 10px;

      img {
        max-width: 52px;
      }
    }

    .hotgraphic_button_container {
      width: 25%;
      justify-content: space-around;
      margin-bottom: -52px;
      margin-right: -20px;

      button {
        line-height: normal;
        max-width: 52px;
      }
    }
  }

  .instruction_text {
    font-size: 1rem !important;

    p {
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
    }
  }

  .narrativFooter {
    padding: 0;
    margin-left: -8px;
  }

  .leftsidebtn_withLine {
    line-height: 0;
    width: 17%;
    justify-content: center;
    margin-bottom: -150px;
    padding-left: 25px;

    .hotgraphic__tile {
      margin-bottom: 10px;
      max-width: 100%;
    }
  }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 896px) and (orientation: landscape) {
  .instruction_text {
    font-size: 1rem !important;
    padding: 0px 40px 0px 40px !important;
    margin-bottom: 30px;

    p {
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
    }
  }

  .narrativFooter {
    font-size: 1rem;
    color: #000;
    padding: 0 0 0 20px;
    margin-left: 0px;
  }
}

@media screen and (max-width: 896px) {
  .instruction_text {
    font-size: 1rem !important;
    padding: 0px 5px 10px 5px;

    p {
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
    }
  }
}