/* desktop card look */
    .sidebar-card{background:#f8fafb;border:1px solid #e9ecef;border-radius:.75rem}
    .sidebar-title{position:relative;font-weight:700;font-size:1.25rem;color:#1e6b86;padding:1rem 1rem .75rem;margin:0}
    .sidebar-title::before,.sidebar-title::after{content:"";position:absolute;top:50%;width:28px;border-top:3px dotted #cfd8dc;transform:translateY(-50%)}
    .sidebar-title::before{left:.75rem}.sidebar-title::after{right:.75rem}
    .topic-item{background:#f3f6f8;border:0;border-top:1px solid #e9eff3;padding:.65rem 1rem}
    .topic-item:first-child{border-top:0}
    .hash{font-weight:700;margin-right:.4rem}
    .count{color:#6c757d;font-weight:600}

    /* mobile offcanvas dark style like your second screenshot */
    .offcanvas-dark{background:#2f3a42;color:#fff}
    .offcanvas-dark .list-group-item{
      background:transparent;border-color:#3c4750;color:#fff;padding:.8rem 1rem
    }
    .offcanvas-dark .list-group-item .count{color:#c7ced4}
    .offcanvas-dark .list-group-item + .list-group-item{border-top-width:1px}
    
 
    
    
.menu-box{padding:.7rem 1rem;border:1px solid #dee2e6;border-radius:.5rem;background:#fff;color:#201547}
  .menu-box:hover{background:#f5f7fa}
  .menu-icon{font-size:1.2rem;line-height:1}
  .offcanvas-dark{background:#2f3a42;color:#fff}
  .offcanvas-dark .list-group-item{background:transparent;color:#fff;border-color:#3c4750}