@media (max-width : 576px) {

  .hidden-sm{
    display: none !important;
  }
  .width-100-sm{
    width: 100% !important;
  }
  .notification .badge{
    right: auto !important;
    left: 22% !important;
  }

  .dropdown-menu-sm {
    position: absolute !important;
    background: #fff !important;
  }
  #navbar{
    width:65% !important;
  }

  .navbar-nav{
    width: 35% !important;
  }

  .rtl .sidenav .navbar-nav{
    width: 100% !important;
  }
  

  html{
    overflow:  scroll !important;
  }

  body {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
  }

  @media  (max-width: 400px) and (min-width:0px) {
    #navbar{
      width:100% !important;
    }

  
    .navbar-nav{
      margin-top: 20px;
      width: 100% !important;
    }
  }


}