/* TopLink mobile old sidebar clean fix */

@media (min-width: 901px){
  .tl-mobile-toggle,
  .tl-sidebar-overlay{
    display:none !important;
  }
}

@media (max-width: 900px){
  html, body{
    margin:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  *{
    box-sizing:border-box;
  }

  .app{
    display:block !important;
    min-height:100vh !important;
  }

  .content{
    width:100% !important;
    min-height:auto !important;
    padding:82px 12px 24px !important;
    margin:0 !important;
  }

  main,
  .main,
  .page,
  .layout{
    margin-top:0 !important;
  }

  .tl-mobile-toggle{
    position:fixed !important;
    top:18px !important;
    right:16px !important;
    width:58px !important;
    height:58px !important;
    z-index:4001 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:18px !important;
    border:1px solid rgba(120,160,230,.45) !important;
    background:rgba(28,42,70,.96) !important;
    color:#fff !important;
    font-size:30px !important;
    line-height:1 !important;
    box-shadow:0 10px 28px rgba(0,0,0,.35) !important;
  }

  .tl-sidebar-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:3500 !important;
    display:none !important;
    background:rgba(0,0,0,.42) !important;
  }

  .tl-sidebar-overlay.show{
    display:block !important;
  }

  .sidebar{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:auto !important;
    width:min(320px, 88vw) !important;
    min-width:0 !important;
    max-width:min(320px, 88vw) !important;
    height:100dvh !important;
    min-height:100dvh !important;
    z-index:3900 !important;
    transform:translateX(105%) !important;
    transition:transform .22s ease !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-left:1px solid rgba(120,160,230,.25) !important;
    border-bottom:0 !important;
    padding:22px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .sidebar.open{
    transform:translateX(0) !important;
  }

  .sidebar .brand{
    text-align:center !important;
    font-size:26px !important;
    padding:12px 6px 18px !important;
  }

  .sidebar .nav{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:10px !important;
    width:100% !important;
  }

  .sidebar .nav a{
    width:100% !important;
    min-height:50px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:0 14px !important;
    font-size:16px !important;
    border-radius:14px !important;
  }

  .sidebar .footer,
  .sidebar .logout{
    margin-top:auto !important;
    width:100% !important;
    border-top:1px solid rgba(120,160,230,.22) !important;
    padding-top:14px !important;
  }

  .tl-logout-btn,
  .sidebar .logout .btn,
  .sidebar .footer .btn,
  #logoutBtn{
    width:100% !important;
    min-height:48px !important;
    font-size:16px !important;
    border-radius:14px !important;
  }
}
