@media(max-width:700px) {
      #view-main {
        flex-direction: column;
        padding-bottom: 88px
      }

      #sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        width: 100%;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        gap: 8px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        border-bottom: 0;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .18)
      }

      #sidebar-brand,
      #sidebar-user,
      .nav-section {
        display: none
      }

      #sidebar-nav {
        display: flex;
        padding: 0;
        width: max-content;
        flex: 0 0 auto
      }

      #admin-nav,
      #field-nav {
        display: flex;
        align-items: stretch;
        gap: 8px
      }

      .nav-item span {
        display: inline
      }

      .nav-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 76px;
        padding: 9px 10px;
        margin-bottom: 0;
        white-space: normal;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, .08);
        background: rgba(255, 255, 255, .04)
      }

      .nav-icon {
        width: auto;
        font-size: 16px
      }

      .nav-item span:not(.nav-icon) {
        font-size: 11px;
        line-height: 1.2
      }

      #validasi-badge {
        margin-left: 0 !important
      }

      #sidebar-footer {
        display: flex;
        align-items: stretch;
        gap: 8px;
        padding: 0;
        border-top: 0;
        margin-left: 4px;
        flex-shrink: 0
      }

      #sidebar-footer > div {
        display: none
      }

      #sidebar-footer .btn {
        width: auto !important;
        min-width: 76px;
        min-height: 100%;
        padding: 9px 10px;
        margin-top: 0 !important;
        white-space: normal;
        line-height: 1.2;
        flex-shrink: 0
      }

      #mobile-more-btn {
        display: inline-flex
      }

      #btn-logout {
        order: 2
        background: rgba(220, 38, 38, .18);
        color: #fecaca;
        border-color: rgba(248, 113, 113, .28)
      }

      #btn-logout:hover {
        background: rgba(220, 38, 38, .28);
        color: #fff
      }

      #mobile-more-btn {
        order: 1
      }

      #sidebar-footer>.btn:not(#mobile-more-btn):not(#btn-logout) {
        display: none
      }

      #admin-nav .nav-item[data-view="history"],
      #admin-nav .nav-item[data-view="reports"],
      #admin-nav .nav-item[data-view="users"],
      #admin-nav .nav-item[data-view="teams"],
      #admin-nav .nav-item[data-view="signatures"] {
        display: none
      }

      #content {
        min-width: 0
      }

      .page-header {
        padding: 14px 14px 0
      }

      .page-body {
        padding: 12px 14px 28px
      }

      .toolbar {
        padding: 10px 14px
      }