::ng-deep .cdk-overlay-pane { width: 600px; max-height: 90%; height:800px; } ::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{ } } }