/*
* mobile.css
* For optimization on mobile view
******************************************************************************/

/*
*
* Hide elements from mobile view to desktop view
**/

@media (max-width: 767px) {

  /**
  *
  * Body
  */
  body {
    background: #ffffff;
  }

  .drag-target {
    width: 10px;
  }

  /**
  *
  * Menu & Navbar
  */
  nav#layout-navbar {
    flex-wrap: wrap;
    height: 5.875rem;
  }

  div#navbar-collapse {
    flex: 1 0 0%;
  }

  .layout-menu-100vh .layout-menu, .layout-menu-100vh .layout-overlay,
  .menu-vertical {
    width: 100%;
  }

  .menu-vertical .menu-block, .menu-vertical .menu-inner > .menu-item, .menu-vertical .menu-inner > .menu-header {
    width: 90%;
  }

  .btn-sm-primary {
    color: #1d5056 ;
    background-color: #fff;
    border-color: #1d5056 !important;
  }

  .menu-vertical .menu-item .menu-link {
    font-size: 1rem;
    color: #1d5056;
  }

  .menu-toggle::after {
    transform: translateY(-50%) rotate(135deg);
  }

  .menu-item.open:not(.menu-item-closing) > .menu-toggle::after {
    transform: translateY(-50%) rotate(-45deg);
  }

  .bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
    display: none;
  }

  .bg-menu-theme {
    background-color: #ffffff !important;
  }

  /**
  *
  * Dashboard
  */

  .sm-border-bottom {
    border-bottom: #d4d8dd 1px solid;
    margin-bottom: 1rem !important;
  }

  .sm-d-none {
    display: none !important;
  }

  .sm-w-100 {
    width: 100% !important;
  }

  /**
  *
  * Modal
  */

  .modal .modal-dialog.modal-fullscreen-md-down {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .scrollable-content-modal {
    max-height: unset !important;
  }
  
} 

/* @media (min-width: 768px) {

} */