
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
    }

    body{
      background-color: #dee3eb;
      overflow: hidden;
    }
    
    .sample-image {
      width: auto;
    }

    .sample-image-third {
      width: calc(33.33% - .5rem);
    }



    .frame-container {
      padding: 0.562rem 0.5rem 0.5rem 0.5rem;
      flex-flow: column nowrap;
      row-gap: .5rem;
      display: flex;
      height: 100vh;
      justify-content: stretch;
      align-items: stretch;
    }

    .frame-container > div ,
    .frame-container > iframe {
      flex-grow: 1;
    }

    .frame-container > div > iframe{
      height: 100%;
      width: 100%;
    }

    .sample-row{      
      flex-flow: row nowrap;
      justify-content: center;
      align-items: center;
      column-gap: .65rem;
      display: flex;
    }
    .ae-menubar.toolbar.compact {
      padding: 0 !important;
      height: auto;
    }

  </style>
  <main>
    <div id='sc-main-content' class="vertical-orientation">
      <section class="ae-menubar menubar" role="toolbar" aria-orientation="vertical" tabindex="0" data-aetheme="{{menu_theme}}">
        <div class="wrapper-header">
          <div class="logo"><a id="sc-menu-link-home" href="./"><span class="only-sr">Scriptcase menubar home </span><img
                class="d-block" src="{{logo}}" aria-hidden="true" /><img
                class="d-none" src="{{logo_compact}}" aria-hidden="true" /></a></div>
          <div class="mb_icon fa-solid fa-compress hide-mobile" id="switch-menu-position" aria-label="menu fixo" role="checkbox"
            aria-checked="true"></div>
        </div>
          {{header_string_m_placement}}
          <?php
          if ($menu_data['usercheck'] == 'S') {
          ?>
        <div class="wrapper-user">
          <div class="user-info" aria-expanded="false" aria-controls="user-menu">
            <div class="user action-button" role="button" id="user-button" aria-label="ações do usuário"
              aria-expanded="false" aria-controls="user-panel" aria-owns="user-panel">
              <img src="{{userimage}}" class="user_image" />
            </div>
            <div class="group">
              <p class="user-name">{{username}}</p>
              <p class="user-profile">{{userdesc}}</p>
            </div>
          </div>
          <div class="user-menu p-right-4">
            <div class="wrapper" id="user-menu">
              <div class="user-menu-content">
                <div class="section actions ae-menubar-accordion">
                  <ul role="menubar" aria-label="ações do menu do usuário" id="user_menu_list">
                  </ul>
                </div>
                <hr class="divider-y divider-solid divider-theme-color my-2" />
              </div>
            </div>
          </div>
        </div>
          <?php
              }
              ?>
        <div class="wrapper-navigation ae-menubar-accordion" aria-label="navegação principal">
          <ul role="menubar" aria-label="navegação principal" id="nav_list">
          </ul>
        </div>
      </section>
      <section class="ae-menubar tabsbar compact" role="toolbar" aria-orientation="horizontal" tabindex="0" data-aetheme="{{menu_theme}}">
        {{tabs_placement}}
      </section>
      {{breadcrumbs_placement}}
      <div class="frame-container" id="app-frames" data-aetheme="{{menu_theme}}">
        <iframe class="nm_frame_app" name="nm_frame_app" src="" frameborder="0"></iframe>
          <div class="loader-placeholder"><div class="lds-dual-ring"></div></div>
      </div>
    </div>
  </main>