@media only screen {
  .sidebar {
    height: 100%;
    width: 240px;
    padding-top: 0;
    position: fixed;
    background: #49565e;
    z-index: 300;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
  }
  .sidebar .ii-sidebar-header {
    display: flex;
    justify-content: space-between;
  }
  .sidebar .ii-sidebar-header .ii-header-panel {
    position: relative;
  }
  .sidebar .ii-sidebar-menu-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) #49565e;
    align-self: flex-start;
    display: flex;
    flex-flow: column nowrap;
  }
  .sidebar .ii-sidebar-version {
    width: 100%;
    height: 50px;
    padding: 0 15px;
    margin-top: auto;
    display: flex;
    text-align: left;
    background: #343d43;
    align-self: flex-end;
    transition: width 0.3s ease-in-out 0s;
  }
  .sidebar .ii-sidebar-version p {
    opacity: 1;
    margin: 10px 0;
    color: #8e9195;
    font-size: 10px;
  }
  .sidebar .ii-sidebar-version .version-text-small {
    top: 7px;
    left: 9px;
    opacity: 0;
    transition: opacity 0.1s ease-in-out 0s;
  }
  .sidebar .ii-sidebar-version .version-text-big {
    opacity: 1;
    z-index: 10;
    transition: opacity 0.3s ease-in-out 0.2s;
  }
  #container .main-content-wrapper {
    margin-left: 240px;
    -webkit-transition: margin-left 0.3s ease-in-out;
    -moz-transition: margin-left 0.3s ease-in-out;
    -o-transition: margin-left 0.3s ease-in-out;
    transition: margin-left 0.3s ease-in-out;
  }
  #container.sidebar-mini .main-content-wrapper {
    margin-left: 50px;
  }
  .sidebar-mini .sidebar {
    padding-top: 0;
    -webkit-transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
  }
  .sidebar-mini .sidebar .ii-sidebar-menu-wrapper {
    overflow: visible;
  }
  .sidebar-mini .sidebar .nav > li.nav-dropdown-open a,
  .sidebar-mini .sidebar .nav > li:hover a {
    background-color: #343d43;
  }
  .sidebar-mini .ii-sidebar-version {
    align-self: flex-end;
    width: 50px;
    transition: width 0.3s ease-in-out 0s;
  }
  .sidebar-mini .ii-sidebar-version .version-text-small {
    opacity: 1;
    z-index: 20;
    transition: opacity 0.3s ease-in-out 0.2s;
  }
  .sidebar-mini .ii-sidebar-version .version-text-big {
    display: none;
    transition: opacity 0.1s ease-in-out 0s;
  }
}
@media only screen and (min-width: 1px) and (max-width: 767px) {
  .sidebar {
    left: 0;
    width: 100%;
    height: auto;
    margin-left: 0;
    position: static;
  }
  .sidebar .main-content-wrapper,
  .sidebar .ii-sidebar-menu-wrapper {
    width: 100%;
  }
  #container .main-content-wrapper,
  #container.sidebar-mini .main-content-wrapper {
    margin-left: 0;
  }
}