html {
  background: @body-bg;
}

html,
body {
  height: 100%;
  width: 100%;
}

a:focus {
  outline: 0 none;
}

.overall-wrapper {
  height: 100%;

  @media (max-width: @screen-sm) {
    height: auto;
  }
}

.panels-wrapper {
  width: 100%;
  height: 100%;
  display: table;

  @media (max-width: @screen-sm) {
    height: auto;
    display: block;
  }
}

//
// Mobile
// --------------------------------------------------


.m-header {
  display: block;
  .clearfix();
  background: @main-nav-bg;
  padding-left: 10px;
  padding-right: 10px;

  @media (min-width: @screen-sm) {
    display: none;
  }

  &__brand {
    width: 80px;
    height: 60px;
    line-height: 60px;
    float: left;

    img {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  }

  &__toggle {
    float: right;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    width: 50px;
    color: #fff;
    margin-right: -10px;
  }
}

// first we hide panels and after enquire.js kicks in, we are showing them back
@media (max-width: @screen-sm) {
  #panel-left,
  #panel-center {
    display: none !important;
  }

  .m-wrp #panel-left,
  .m-wrp #panel-center {
    display: block !important;
  }
}

.m-wrp {
  display: none;
  background: @sub-nav-bg;
  .clearfix();
  height: 320px;
  overflow: hidden;

  #panel-left {
    float: left;
    width: 80px;
    height: 320px;
    overflow: auto;

    .nav-main {
      width: 80px;

      > li {

        > a {
          padding: 10px 0;

          i {
            font-size: 16px;
          }
        }

        &.active > a,
        &.active > a:focus {

          i {
            font-size: 20px;
          }
        }
      }
    }
  }

  #panel-center {
    height: 320px;
    overflow: auto;
    padding-bottom: 35px;
  }
}