::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; } .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-body-wrapper { border-left: 1px solid #dddddd; position: relative; height: 100%; padding: 0 0 10px 10px; } } } .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 { .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-divider { } } }