next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss

::ng-deep .setting-frame {
  padding: 16px;
  height: 100%;
  min-width: 500px;
  position: relative;

  .mat-dialog-container {
    position: relative;
  }

  .mat-card-header {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #dddddd;
    margin-bottom: 12px;

    .btn-dialog-close {
      font-size: 20px;
      display: flex;
      margin-left: auto;
      align-self: flex-start;
      color: #444444;
    }
  }
  .mat-card-content {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    height: calc(100% - 100px);
    border-bottom: 1px solid #dddddd;
    .setting-tab {
      position: relative;
      width: 100%;
      height: 100%;
      .mat-tab-group {
        flex-direction: row;
        .mat-tab-header {
          width: 160px;
          .mat-tab-labels {
            flex-direction: column;
            .mat-tab-label {
              padding: 0 10px;
              align-content: flex-start;
              text-align: left;
              align-items: center;
              justify-content: flex-start;
            }
          }
          .mat-ink-bar {
            display: none;
          }
        }
      }
    }
  }

  .button-farm {
    text-align: right;
    position: absolute;
    width: 100%;
    bottom: 10px;
    .mat-primary {
      margin-left: 4px;
    }
  }
}

::ng-deep .setting-tab {
  .mat-tab-group {
    position: relative;
    height: 100%;
    width: 100%;

    .mat-tab-header {
      width: 160px;
      flex-flow: column;
      border-right: 1px solid #dddddd;
      .mat-tab-label-container {
        .mat-tab-list {
          .mat-tab-labels {
            border-bottom: 0;
            padding-right: 10px;
            .mat-tab-label {
              padding: 0 10px;
            }
          }
        }
      }
    }

    .mat-tab-body-wrapper {
      .mat-tab-body {
        .mat-tab-body-conten {
          position: relative;
          width: 100%;
          height: 100%;
          .mat-list-base {
            position: relative;
          }
        }
      }
    }
  }
}

::ng-deep .setting-category {
  .mat-list-base {
    position: relative;
    .mat-list-item {
      font-size: 15px;
      .mat-tab-header {
        border-right: none;
      }
    }
    .mat-divider {
      //margin-top: 10px;
    }
    .mat-subheader {
      font-weight: 600;
    }
  }
}