.page-wrapper {
  padding-top: 0!important;

}


.page-content {
  width: 100%;
  position: relative;
  min-height: calc(100vh - #{$topbar-height});
  padding: 0 15px 60px 15px;
}



.left-sidenav {
  min-width: $leftbar-width;
  max-width: $leftbar-width;
  background-color: $bg-leftbar;
  min-height: calc(100vh);
  box-shadow: $shadow;
  transition: 0.3s;
  padding: 30px 0 30px 0;
}


.left-sidenav-menu {
  padding-left: 0;
  margin-bottom: 0;

  li {
    list-style: none;
    display: block;
    width: 100%;

    > a {
      display: block;
      padding: 12px 30px 12px 27px;
      color: $menu-item-color;
      border-left: 3px solid transparent;
      transition: all 0.3s ease-out;
    font-size:16px;
      &:hover {
        color: $gray-300;
        i {
          color: $gray-300;
        }
      }

      i {
        width: 25px;
        display: inline-block;
        font-size: 20px;
        opacity: 0.8;
        color: $menu-item-color;
        position: relative;
        top: 3px;
        margin-right:10px;


        &.ti-control-record {
          font-size: 8px;
          vertical-align: middle;
        }
      }
    }

    ul {
      padding: 0 0 0 25px;

      li {
        > a {
          padding: 10px 30px;
          color: $menu-sub-item-color;
          font-size: 13.5px;
          border-left: none;

          &:hover {
            color: $menu-sub-item-hover-color;
            i {
              color: $primary;
            }
          }
        }
      }
    }

    &.mm-active {
      .menu-arrow {
        i {
          &:before {
            content: "\F140";
          }
        }
      }
      .mm-active a .menu-arrow.left-has-menu {
        i {
          &:before {
            content: "\F140";
          }
        }
      }
      .menu-arrow.left-has-menu {
        i {
          &:before {
            content: "\F142";
          }
        }
      }
      li a {
        menu-arrow.left-has-menu {
          i {
            &:before {
              content: "\F142";
            }
          }
        }
      }

      .mm-active {
        > a {
          color: $menu-item-hover-color;
          background-color: transparent;
          &.active {
            color: $menu-item-hover-color;
            background-color: transparent;
          }
        }
        .menu-arrow.left-has-menu i:before {
          content: "\F140";
        }
        .mm-show {
          li {
            a.active {
              color: $white;
            }
          }
        }
      }

      > a {
        color: $menu-item-hover-color;
        border-left-color: $menu-item-hover-color;
        background-color: lighten($bg-leftbar, 2%);
        i {
          color: $menu-item-hover-color;
        }
      }
      .nav-item.active {
        a.nav-link.active {
          background-color: transparent;
          color: $menu-item-hover-color;
          i {
            color: $menu-item-hover-color;
          }
        }
      }
    }
    // &.mm-active {
    //     .menu-arrow.left-has-menu{
    //         i {
    //             &:before {
    //                 content: "\F142";
    //             }
    //         }
    //     }
    // }
  }

  .menu-title {
    padding: 10px 30px;
    color: $gray-500;
    font-size: 11px;
    text-transform: uppercase;
  }

  .menu-arrow {
    float: right;
    margin-top: -3px;

    i {
      width: 15px;
    }
  }
}

// Enlarge menu
.enlarge-menu {
  .left-sidenav {
    display: none;
  }
  .topbar {
    .topbar-left {
      background-color: $bg-navbar;
      .logo {
        .logo-lg {
          display: none;
          &.logo-dark {
            display: inline-block;
            height: 14px;
            margin-left: 2px;
          }
        }
      }
    }
  }
}

@media (min-width: 680px) {
  .page-wrapper {
    display: flex;
  }
}

@media (max-width: 1024px) {
  .left-sidenav {
    position: fixed;
    top: $topbar-height;
    overflow-y: auto;
    z-index: 10;
    bottom: 0;
  }
  .page-content {
    min-height: 100vh;
  }
  .enlarge-menu {
    .topbar {
      .topbar-left {
        .logo {
          .logo-lg {
            &.logo-dark {
              display: none;
            }
          }
        }
      }
    }
  }
}