<div class="component__inner hotgraphic__inner mr_wrapper_container" style="background-color: {{bgcolor}};">

    {{#unless _useGraphicsAsPins}}

    {{else}}




    <div class="hotgraphic__tile-item-container hotgrapghics_container" role="list">


      <div class="container-title">

        {{#if title}}
        <h2 class="heading" style="color: {{titleColor}}; background-color: {{bgcolor}};">
          {{{title}}}
        </h2>
        {{/if}}
        {{#if body}}
        <div class="body_content" tabindex="0"> {{{body}}}</div>
        {{/if}}

        {{#if instruction}}
        <div class="instruction_text" tabindex="0">
          {{{instruction}}}
        </div>
     {{/if}}
        <div class="container">
          <div class="hotgraphics_container">
            <div class="w-100 hotGraphics_img_container">

              <div class="{{#if bothsidebtn}} bothsidebtn {{/if}}">
                <div class="disabled_Icon_container">
                  {{#if disabledBtn}}
                  {{#each disablebtnItem}}
                  {{!-- <button class="disabled-itm-btn" style="top: {{top}}px; left: {{left}}px;">
                    {{title}} --}}
                    <img src="{{img}}" style="background-color: {{iconbg}}" />
                    {{!-- </button> --}}
                  {{/each}}
                  {{/if}}
                </div>
                <div
                  class="hotgraphic_button_container{{#if singlebtn}} singlebtn {{/if}} {{#if leftsidebtn}} leftsidebtn {{/if}} {{#if leftsidebtn_withLine}} leftsidebtn_withLine {{/if}}">
                  {{#each _items}}
                  <button
                    class="hotgraphic__tile  item-{{@index}}{{#if _graphic._classes}} {{_graphic._classes}}{{/if}} js-hotgraphic-item-click"
                    data-index="{{@index}}" style="top: {{btnPosition.top}}px; left: {{btnPosition.left}}px">
                    {{#if icon}}
                    <img class="click_icon" src="{{icon}}" style="background-color: {{iconbg}};">
                    {{/if}}
                    {{!-- <span class="aria-label">{{title}}.</span> --}}
                    {{!-- <span class="text button_text_hotspot">{{{title}}}</span> --}}
                  </button>
                  {{/each}}
                </div>
              </div>



              <img src="{{_graphic.src}}">
            </div>

           
            <div class="clicked_container w-100">
              {{!-- <div class="position_button">
                
              </div> --}}



               {{#if bottomText}}
              <div class="bottom_text">
                {{#each bottomText}}
                <p style="position: relative; top: {{top}}px; left: {{left}}px">{{text}}</p>
                {{/each}}
              </div>
              {{/if}}
            </div>
          </div>

          <div class="feedback_container_box">
            {{#each _items}}
            <div class="feedback-container" data-id="{{@index}}"
              style="display:none; top: {{feedback_position.top}}px; right: {{feedback_position.right}}px; left: {{feedback_position.left}}px; bottom: {{feedback_position.bottom}}px;">
              <button class="close_btn"><img src="course/en/images/RR_EPL_close.png"></button>
              <div class="feedback" style="background-color: {{bgColor}}">

                <div class="feedback_body" tabindex="0">
                  {{{body}}}
                </div>
              </div>
            </div>
            {{/each}}
          </div>


        </div>
           {{#if footerText}}
         <div class="instruction_text">
                
                  <p class="footerText">{{footerText}}</p>
                  
            </div>
            {{/if}} 



      </div>

    </div>

    {{/unless}}



  </div>