html[data-echo-mobile-shell="1"],
html[data-echo-mobile-shell="1"] body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

html[data-echo-mobile-shell="1"] body{
  min-height:100vh!important;
  height:auto!important;
}

html[data-echo-mobile-shell="1"] *,
html[data-echo-mobile-shell="1"] *::before,
html[data-echo-mobile-shell="1"] *::after{
  box-sizing:border-box;
}

html[data-echo-mobile-shell="1"] img,
html[data-echo-mobile-shell="1"] video,
html[data-echo-mobile-shell="1"] canvas,
html[data-echo-mobile-shell="1"] iframe{
  max-width:100%!important;
}

html[data-echo-mobile-shell="1"] input,
html[data-echo-mobile-shell="1"] select,
html[data-echo-mobile-shell="1"] textarea,
html[data-echo-mobile-shell="1"] button{
  max-width:100%;
}

html[data-echo-mobile-shell="1"] .top,
html[data-echo-mobile-shell="1"] .topbar,
html[data-echo-mobile-shell="1"] .editor-top,
html[data-echo-mobile-shell="1"] .toolbar,
html[data-echo-mobile-shell="1"] .header,
html[data-echo-mobile-shell="1"] .nav,
html[data-echo-mobile-shell="1"] .actions,
html[data-echo-mobile-shell="1"] .tabs,
html[data-echo-mobile-shell="1"] .tools{
  flex-wrap:wrap!important;
  max-width:100%;
}

html[data-echo-mobile-shell="1"] .sp{
  min-width:0;
}

html[data-echo-mobile-shell="1"] .top button,
html[data-echo-mobile-shell="1"] .topbar button,
html[data-echo-mobile-shell="1"] .editor-top button,
html[data-echo-mobile-shell="1"] .toolbar button,
html[data-echo-mobile-shell="1"] .actions button,
html[data-echo-mobile-shell="1"] .tabs button,
html[data-echo-mobile-shell="1"] .tbtn{
  white-space:normal;
}

html[data-echo-mobile-shell="1"] .top > *,
html[data-echo-mobile-shell="1"] .topbar > *,
html[data-echo-mobile-shell="1"] .editor-top > *,
html[data-echo-mobile-shell="1"] .toolbar > *,
html[data-echo-mobile-shell="1"] .header > *,
html[data-echo-mobile-shell="1"] .actions > *{
  min-width:0;
}

html[data-echo-mobile-shell="1"] table{
  display:block;
  width:100%!important;
  overflow-x:auto;
}

html[data-echo-mobile-shell="1"] .modal,
html[data-echo-mobile-shell="1"] .dialog,
html[data-echo-mobile-shell="1"] dialog,
html[data-echo-mobile-shell="1"] [id*="Modal"],
html[data-echo-mobile-shell="1"] [class*="modal"]{
  max-width:100vw!important;
}

html[data-echo-mobile-shell="1"][data-echo-mobile-role="admin"] [data-echo-app-preview="1"],
html[data-echo-mobile-shell="1"][data-echo-mobile-role="studio"] [data-echo-app-preview="1"]{
  display:none!important;
}

@media(max-width:760px){
  html[data-echo-mobile-shell="1"] body{
    display:block!important;
    overflow-y:auto!important;
  }

  html[data-echo-mobile-shell="1"]{
    overflow-y:auto!important;
  }

  html[data-echo-mobile-shell="1"] body *{
    min-width:0!important;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  html[data-echo-mobile-shell="1"] button,
  html[data-echo-mobile-shell="1"] a,
  html[data-echo-mobile-shell="1"] span,
  html[data-echo-mobile-shell="1"] strong,
  html[data-echo-mobile-shell="1"] b,
  html[data-echo-mobile-shell="1"] em{
    white-space:normal!important;
  }

  html[data-echo-mobile-shell="1"] .top,
  html[data-echo-mobile-shell="1"] .topbar,
  html[data-echo-mobile-shell="1"] .editor-top,
  html[data-echo-mobile-shell="1"] .toolbar,
  html[data-echo-mobile-shell="1"] .header{
    position:relative;
    align-items:center!important;
    gap:8px!important;
    overflow:visible!important;
    padding:10px 12px!important;
    height:auto!important;
    min-height:0!important;
  }

  html[data-echo-mobile-shell="1"] .top h1,
  html[data-echo-mobile-shell="1"] .topbar h1,
  html[data-echo-mobile-shell="1"] .editor-top h1,
  html[data-echo-mobile-shell="1"] .toolbar h1,
  html[data-echo-mobile-shell="1"] .header h1,
  html[data-echo-mobile-shell="1"] .logo{
    flex:1 1 100%!important;
    min-width:0!important;
    font-size:1rem!important;
    line-height:1.25!important;
  }

  html[data-echo-mobile-shell="1"] [data-echo-app-redundant="1"]{
    display:none!important;
  }

  html[data-echo-mobile-shell="1"] .top button,
  html[data-echo-mobile-shell="1"] .topbar button,
  html[data-echo-mobile-shell="1"] .editor-top button,
  html[data-echo-mobile-shell="1"] .toolbar button,
  html[data-echo-mobile-shell="1"] .header button,
  html[data-echo-mobile-shell="1"] .actions button,
  html[data-echo-mobile-shell="1"] .top a,
  html[data-echo-mobile-shell="1"] .topbar a,
  html[data-echo-mobile-shell="1"] .editor-top a,
  html[data-echo-mobile-shell="1"] .toolbar a,
  html[data-echo-mobile-shell="1"] .header a,
  html[data-echo-mobile-shell="1"] .actions a,
  html[data-echo-mobile-shell="1"] .tbtn,
  html[data-echo-mobile-shell="1"] .btn{
    flex:1 1 calc(50% - 8px);
    min-height:42px;
    border-radius:12px!important;
    padding:9px 10px!important;
    line-height:1.15!important;
    text-align:center;
  }

  html[data-echo-mobile-shell="1"] .topbar-space,
  html[data-echo-mobile-shell="1"] .tsp,
  html[data-echo-mobile-shell="1"] .sp{
    display:none!important;
  }

  html[data-echo-mobile-shell="1"] .tab-bar,
  html[data-echo-mobile-shell="1"] .editor-tabs,
  html[data-echo-mobile-shell="1"] .nav-tabs,
  html[data-echo-mobile-shell="1"] .filter-tabs,
  html[data-echo-mobile-shell="1"] .category-tabs,
  html[data-echo-mobile-shell="1"] .quick-btns,
  html[data-echo-mobile-shell="1"] .chips,
  html[data-echo-mobile-shell="1"] .pills{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  html[data-echo-mobile-shell="1"] .tab-bar > *,
  html[data-echo-mobile-shell="1"] .editor-tabs > *,
  html[data-echo-mobile-shell="1"] .nav-tabs > *,
  html[data-echo-mobile-shell="1"] .filter-tabs > *,
  html[data-echo-mobile-shell="1"] .category-tabs > *,
  html[data-echo-mobile-shell="1"] .quick-btns > *,
  html[data-echo-mobile-shell="1"] .chips > *,
  html[data-echo-mobile-shell="1"] .pills > *,
  html[data-echo-mobile-shell="1"] .p-tab,
  html[data-echo-mobile-shell="1"] .nav-tab{
    flex:1 1 calc(50% - 8px)!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  html[data-echo-mobile-shell="1"] .row,
  html[data-echo-mobile-shell="1"] .row-x,
  html[data-echo-mobile-shell="1"] .control-row,
  html[data-echo-mobile-shell="1"] .status-row,
  html[data-echo-mobile-shell="1"] .meta-row,
  html[data-echo-mobile-shell="1"] .card-hd,
  html[data-echo-mobile-shell="1"] .preview-header,
  html[data-echo-mobile-shell="1"] .order-chip,
  html[data-echo-mobile-shell="1"] .order-feed,
  html[data-echo-mobile-shell="1"] .ev,
  html[data-echo-mobile-shell="1"] .item,
  html[data-echo-mobile-shell="1"] .result-item,
  html[data-echo-mobile-shell="1"] .status-indicator,
  html[data-echo-mobile-shell="1"] .bottom-nav,
  html[data-echo-mobile-shell="1"] .categories,
  html[data-echo-mobile-shell="1"] .category-row{
    flex-wrap:wrap!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  html[data-echo-mobile-shell="1"] .order-chip{
    align-items:flex-start!important;
    flex:1 1 calc(50% - 8px)!important;
  }

  html[data-echo-mobile-shell="1"] .ev .mv,
  html[data-echo-mobile-shell="1"] .ev .del{
    position:relative!important;
    top:auto!important;
    right:auto!important;
  }

  html[data-echo-mobile-shell="1"] .layout,
  html[data-echo-mobile-shell="1"] .main,
  html[data-echo-mobile-shell="1"] .grid,
  html[data-echo-mobile-shell="1"] .main-grid,
  html[data-echo-mobile-shell="1"] .admin-grid,
  html[data-echo-mobile-shell="1"] .studio-grid,
  html[data-echo-mobile-shell="1"] .dashboard-grid,
  html[data-echo-mobile-shell="1"] .content-grid,
  html[data-echo-mobile-shell="1"] [style*="grid-template-columns"]{
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  html[data-echo-mobile-shell="1"] .layout,
  html[data-echo-mobile-shell="1"] .main-layout,
  html[data-echo-mobile-shell="1"] .app-layout{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  html[data-echo-mobile-shell="1"] .editor-grid,
  html[data-echo-mobile-shell="1"] .admin-grid,
  html[data-echo-mobile-shell="1"] .studio-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:12px!important;
  }

  html[data-echo-mobile-shell="1"] .editor-panel,
  html[data-echo-mobile-shell="1"] .col-left,
  html[data-echo-mobile-shell="1"] .col-right,
  html[data-echo-mobile-shell="1"] .side-panel{
    order:1;
  }

  html[data-echo-mobile-shell="1"] .layout,
  html[data-echo-mobile-shell="1"] .main,
  html[data-echo-mobile-shell="1"] .content,
  html[data-echo-mobile-shell="1"] .dashboard,
  html[data-echo-mobile-shell="1"] .page,
  html[data-echo-mobile-shell="1"] .shell{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }

  html[data-echo-mobile-shell="1"] .sidebar,
  html[data-echo-mobile-shell="1"] .side-panel,
  html[data-echo-mobile-shell="1"] .col-left,
  html[data-echo-mobile-shell="1"] .col-right,
  html[data-echo-mobile-shell="1"] .left,
  html[data-echo-mobile-shell="1"] .right,
  html[data-echo-mobile-shell="1"] .drawer{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  html[data-echo-mobile-shell="1"] .panel,
  html[data-echo-mobile-shell="1"] .card,
  html[data-echo-mobile-shell="1"] .box,
  html[data-echo-mobile-shell="1"] aside,
  html[data-echo-mobile-shell="1"] main,
  html[data-echo-mobile-shell="1"] section,
  html[data-echo-mobile-shell="1"] article{
    min-width:0!important;
    max-width:100%!important;
  }

  html[data-echo-mobile-shell="1"] .panel,
  html[data-echo-mobile-shell="1"] .card,
  html[data-echo-mobile-shell="1"] .box{
    border-radius:14px!important;
  }

  html[data-echo-mobile-shell="1"] .panel .scroll,
  html[data-echo-mobile-shell="1"] .card .scroll,
  html[data-echo-mobile-shell="1"] .box .scroll{
    min-height:160px;
    max-height:none!important;
  }

  html[data-echo-mobile-shell="1"] .scroll,
  html[data-echo-mobile-shell="1"] .list,
  html[data-echo-mobile-shell="1"] .msgs,
  html[data-echo-mobile-shell="1"] .side{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  html[data-echo-mobile-shell="1"] [style*="display:flex"]{
    flex-wrap:wrap!important;
  }

  html[data-echo-mobile-shell="1"] [style*="width:260px"],
  html[data-echo-mobile-shell="1"] [style*="width: 260px"],
  html[data-echo-mobile-shell="1"] [style*="width:280px"],
  html[data-echo-mobile-shell="1"] [style*="width: 280px"],
  html[data-echo-mobile-shell="1"] [style*="width:320px"],
  html[data-echo-mobile-shell="1"] [style*="width: 320px"],
  html[data-echo-mobile-shell="1"] [style*="width:380px"],
  html[data-echo-mobile-shell="1"] [style*="width: 380px"],
  html[data-echo-mobile-shell="1"] [style*="width:400px"],
  html[data-echo-mobile-shell="1"] [style*="width: 400px"]{
    width:100%!important;
    max-width:100%!important;
  }

  html[data-echo-mobile-shell="1"] form,
  html[data-echo-mobile-shell="1"] label{
    min-width:0!important;
    max-width:100%!important;
  }

  html[data-echo-mobile-shell="1"] .input,
  html[data-echo-mobile-shell="1"] .composer,
  html[data-echo-mobile-shell="1"] .form-row,
  html[data-echo-mobile-shell="1"] .field-row{
    grid-template-columns:1fr!important;
  }

  html[data-echo-mobile-shell="1"] [id*="Modal"],
  html[data-echo-mobile-shell="1"] [class*="modal"]{
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:auto!important;
    padding:16px!important;
  }

  html[data-echo-mobile-shell="1"] [id*="Modal"] > *,
  html[data-echo-mobile-shell="1"] [class*="modal"] > *,
  html[data-echo-mobile-shell="1"] dialog > *{
    width:min(440px, calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    max-height:calc(100vh - 32px)!important;
    overflow:auto!important;
  }
}