/*=========================================================================================
    File Name: laravel-menu.scss
    Description: laravel Specific menu styles
    ----------------------------------------------------------------------------------------
    Item name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*========================================================
        DARK LAYOUT
=========================================================*/

body.vertical-layout.vertical-menu-modern .horizontal-menu-wrapper {
  display: none;
}

.horizontal-menu > .main-menu {
  display: none;
}

.horizontal-menu .fixed-top {
  left: 0;
}

html body.navbar-static .app-content .header-navbar {
  background: transparent;
  box-shadow: none !important;
}
 .modern-nav-toggle{
    margin: 33px -20px 0px 0px;
  }

@media (min-width: 1200px) {
  body.vertical-layout.vertical-menu-modern .header-navbar.floating-nav {
    box-sizing: border-box !important;
    margin: 1.3rem 0 0 0 !important;
    max-width: none !important;
  }

  body.vertical-layout.vertical-menu-modern:not(.menu-collapsed) .header-navbar.floating-nav {
    left: calc(260px + 2.2rem) !important;
    right: 2.2rem !important;
    width: auto !important;
  }

  body.vertical-layout.vertical-menu-modern.menu-collapsed .header-navbar.floating-nav {
    left: calc(80px + 2.2rem) !important;
    right: 2.2rem !important;
    width: auto !important;
  }

  body.vertical-layout.vertical-menu-modern .header-navbar.floating-nav .navbar-wrapper,
  body.vertical-layout.vertical-menu-modern .header-navbar.floating-nav .navbar-container {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (max-width: 575.98px) {

  body.vertical-layout:not(.horizontal-layout).navbar-floating .header-navbar {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
  }
}

@media (max-width: 1199.98px) {
  body.vertical-layout:not(.horizontal-layout).navbar-floating .header-navbar,
  body.vertical-layout.vertical-menu-modern .header-navbar,
  body.vertical-overlay-menu .header-navbar,
  .header-navbar.floating-nav {
    left: 0 !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
    width: calc(100% - 2rem) !important;
  }

  html body.vertical-layout.vertical-menu-modern.navbar-floating .app-content .header-navbar.floating-nav,
  html body.vertical-layout.vertical-menu-modern.menu-collapsed.navbar-floating .app-content .header-navbar.floating-nav,
  html body.vertical-overlay-menu.navbar-floating .app-content .header-navbar.floating-nav {
    margin: 1rem 1rem 0 !important;
    width: calc(100% - 2rem) !important;
  }

  body.vertical-layout.vertical-menu-modern .app-content,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .app-content,
  body.vertical-overlay-menu .app-content,
  .app-content.content {
    margin-left: 0 !important;
  }

  body.vertical-layout.vertical-menu-modern .footer,
  body.vertical-layout.vertical-menu-modern .footer.footer-static,
  body.vertical-layout.vertical-menu-modern.menu-collapsed .footer,
  body.vertical-overlay-menu .footer,
  body.vertical-overlay-menu .footer.footer-static,
  .footer.footer-light.footer-static {
    margin-left: 0 !important;
  }

  body.vertical-layout.vertical-menu-modern .main-menu,
  body.vertical-overlay-menu .main-menu,
  .main-menu.menu-fixed.menu-light {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  .main-menu .navbar-header {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 74px !important;
    height: 74px !important;
    min-height: 74px !important;
  }

  .main-menu .navbar-header .navbar-nav {
    align-items: center !important;
    min-height: 74px !important;
    width: 100%;
  }

  .main-menu .main-menu-content {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: calc(100vh - 74px) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 32px !important;
    -webkit-overflow-scrolling: touch;
  }

  .main-menu .navigation-main {
    overflow: visible !important;
    padding-bottom: 32px !important;
  }

  .main-menu .navbar-header .modern-nav-toggle {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    min-width: 44px;
    position: relative;
    z-index: 20;
  }

  .main-menu .navbar-header .toggle-icon {
    line-height: 1;
    margin-top: 0 !important;
  }

  body.menu-open .main-menu,
  body.vertical-overlay-menu.menu-open .main-menu {
    left: -260px !important;
    opacity: 1 !important;
    transform: translate3d(260px, 0, 0) !important;
    visibility: visible !important;
  }

  body.menu-hide .main-menu,
  body.vertical-overlay-menu.menu-hide .main-menu {
    left: -260px !important;
    opacity: 0 !important;
    transform: translate3d(0, 0, 0) !important;
    visibility: hidden !important;
  }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  html body.vertical-layout.vertical-menu-modern.navbar-floating .app-content .header-navbar.floating-nav,
  html body.vertical-layout.vertical-menu-modern.menu-collapsed.navbar-floating .app-content .header-navbar.floating-nav,
  html body.vertical-overlay-menu.navbar-floating .app-content .header-navbar.floating-nav {
    margin: 1rem 2.2rem 0 !important;
    width: calc(100% - 4.4rem) !important;
  }
}