#messenger {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height: auto !important;

  .center {
    max-width: 1400px;
    margin: 0 auto;

    .content-card {
      position: relative;
      display: flex;
      flex: 1;
      border-radius: 8px;

      .mat-sidenav-container {
        display: flex;
        flex: 1;
        width: 100%;

        .left-sidenav {
          width: 300px;
        }

        .right-sidenav {
          width: 70px;
        }

        > .mat-sidenav-content,
        > .mat-drawer-content {
          display: flex;
          flex: 1 1 auto;
          min-height: 100%;
          width: auto;
          height: auto;
        }

        > .mat-drawer-content {
          max-width: 100%;
        }

        mat-sidenav {
          display: flex;
          flex-direction: column;
          width: 400px;
          max-width: 90%;
          overflow: hidden;
        }
      }
    }
  }
}