.app-container {
  @media (min-width: $screen-sm-min) {
    display: table;
    width: 100%;
  }

  & > aside {
    @include dark-module;

    position: relative;
    font-size: 0.9em;
    z-index: 1;

    @media (min-width: $screen-sm-min) {
      display: table-cell;
      width: 215px;
      vertical-align: top;
      padding-bottom: 2em;

      &::before {
        content: '';
        display: block;
        height: 52px;
        position: absolute;
        top: -52px;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: $dark-grey;
      }
    }

    @media (min-width: $screen-md-min) {
      width: 230px;
    }

    &:empty {
      width: 0;
    }

    * {
      max-width: 100%;
    }

    & > footer {
      color: rgba(#fff, 0.6);
      padding: 14px 21px;

      @media (min-width: $screen-sm-min) {
        position: absolute;
        bottom: 0;
        left: 0;
      }

      a {
        color: inherit;
        text-decoration: none;
        display: table;

        svg {
          width: 16px;
          height: 16px;
          fill: currentColor;
          display: table-cell;
          vertical-align: middle;
          margin-right: $padding-small-horizontal/2;
        }

        span {
          display: table-cell;
          vertical-align: middle;
        }
      }
    }
  }

  .content {
    background-color: $gray-lighter;

    @media (min-width: $screen-sm-min) {
      display: table-cell;
      max-width: 1vw; // arbitrary, prevents h scroll (for some reason)
    }

    & > div {
      padding: $grid-gutter-width 0;

      & > * {
        margin-left: $grid-gutter-width;
        margin-right: $grid-gutter-width;
      }
    }
  }

  //Search
  .app-search {
    label {
      font-size: 20px;
    }

    .search-field {
      @extend .form-control;
      @extend .input-lg;
    }
  }
}