.section-private-messages {
  &.open-message-list {
    overflow: hidden;

    .page-main {
      .col-lg-3 {
        transform: translate(0, -6px);
      }
    }
  }

  .page-main {
    > .container {
      > .row {
        position: relative;
      }
    }

    .col-lg-3 {
      flex: 0 0 33%;
      max-width: 33%;

      @include media-breakpoint-down(lg) {
        flex: 0 0 40%;
        max-width: 40%;
      }

      @include media-breakpoint-down(sm) {
        background: $clr-white;
        flex: 0 0 100%;
        height: 100%;
        max-width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-100vw, -6px);
        transition: transform .3s ease;
        z-index: 1;
      }
    }

    .col-lg-9 {
      flex: 0 0 67%;
      max-width: 67%;

      @include media-breakpoint-down(lg) {
        flex: 0 0 60%;
        max-width: 60%;
      }

      @include media-breakpoint-down(sm) {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }

    .show-message-list-wrapper {
      display: none;

      @include media-breakpoint-down(sm) {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(-35px);
      }
    }

    .show-message-list {
      align-items: center;
      color: $clr-navy;
      display: flex;
      font-size: rem(16);
      text-decoration: none;

      .fi {
        font-size: rem(20);
      }
    }
  }

  .js-filter-wrapper {
    display: none;
  }
}
