::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: self-start; 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; } } }