html,
body {
  height: 100%;
}

.dialog-off-canvas-main-canvas {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: filter .3s ease-out;

  .page-main {
    flex: 1 1 auto;

    @include media-breakpoint-down(md) {
      padding-top: rem(40);
    }

    > .container {
      padding-top: rem(60);
      position: relative;

      @include media-breakpoint-down(md) {
        padding-top: rem(20);
      }
    }
  }
}

.three-col-layout {
  @include media-breakpoint-down(sm) {
    flex-direction: column;
  }

  @include media-breakpoint-down(lg) {
    .col-left {
      display: flex;
      flex-direction: column;

      .link-box-container {
        order: 2;

        ~ .dashboard-drupal-block {
          order: 3;
        }

        + .dashboard-drupal-block {
          order: 1;
        }
      }
    }
  }

  &:not(.panel-open) {
    .col-center {
      @include media-breakpoint-down(lg) {
        background: $clr-white;
        display: flex;
        flex-direction: column;
        padding-bottom: rem(15);
        position: absolute;
        left: 0;
        top: 0;
        height: calc(100vh - 80px);
        transform: translateX(100vw);
        width: 100%;
        z-index: 1;

        .actions-wrapper {
          margin-top: auto;
        }
      }
    }
  }
}

.menu-open {
  overflow: hidden;

  header.page-header {
    min-height: 100vh;
  }
}

.open-filter {
  overflow: hidden;

  .views-exposed-form {
    position: static;
  }
}

.open-feed {
  overflow: hidden;

  .page-main {
    > .container {
      transform: translateX(-100vw);
    }
  }
}

.page-main {
  > .container {
    transition: transform .3s ease-out;
  }
}
