@import "mixin.scss";
/*app wrapper*/
@media only screen and (min-width:991px) {
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.hideSidebar {
      .sidebar-container {
        transition: width 0.28s ease-out;
        width: 0;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow-y: auto;
        &::-webkit-scrollbar {display: none}

      }
      .main-container {
        margin-left: 0;
        transition: margin-left 0.28s ease-out;

      }
    }
    .sidebar-container {
      transition: width 0.28s ease-out;
      width: 180px;
      height: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1001;
      overflow-y: auto;
      &::-webkit-scrollbar {display: none}
    }
    .main-container {
      min-height: 100%;
      transition: margin-left 0.28s ease-out;
      margin-left: 180px;
    }
  }
}

@media only screen and (max-width:991px) {
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.hideSidebar {
      .sidebar-container {
        width: 180px;
        overflow: inherit;
        transition: width 0.28s ease-out;
        height: 100%;
        z-index: 1001;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: auto;
        &::-webkit-scrollbar {display: none}
      }
      .main-container {
        margin-left: 180px;
      }
    }
    .sidebar-container {
      width: 0;
      position: fixed;
      z-index: 1001;
      overflow-y: auto;
    }
    .main-container {
      min-height: 100%;
      transition: margin-left 0.28s ease-out;
      margin-left: 0;
    }
  }
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}