Merge pull request #4080 from cisagov/bug/CSET-2863

Next round of Bootstrap class updates
cisagov · Sep 16, 2024 · aedd4e3 · aedd4e3
2 parents ad0b154 + 64ed9bb
commit aedd4e3
Show file tree

Hide file tree

Showing 207 changed files with 994 additions and 993 deletions.
diff --git a/CSETWebNg/src/app/aggregation/aggregation-home/aggregation-home.component.html b/CSETWebNg/src/app/aggregation/aggregation-home/aggregation-home.component.html
@@ -51,14 +51,14 @@ <h3>{{ this.aggregationSvc?.modeDisplay(true) }}</h3>
       <button *ngIf="this.aggregationSvc?.mode === 'TREND'"
         class="m-0 btn btn-primary d-flex align-items-center flex-00a" (click)="newAggregation()"
         matTooltip="Create a new trend">
-        <span class="mr-2 fs-base cset2-icons-trend"></span>
+        <span class="me-2 fs-base cset2-icons-trend"></span>
         <span>New Trend</span>
       </button>
 
       <button *ngIf="this.aggregationSvc?.mode === 'COMPARE'"
         class="m-0 btn btn-primary d-flex align-items-center flex-00a" (click)="newAggregation()"
         matTooltip="Create a new comparison">
-        <span class="mr-2 fs-base cset2-icons-compare"></span>
+        <span class="me-2 fs-base cset2-icons-compare"></span>
         <span>New Comparison</span>
       </button>
 
@@ -94,7 +94,7 @@ <h3>{{ this.aggregationSvc?.modeDisplay(true) }}</h3>
             <button
               class="icon-link-button-dark btn bgc-trans d-flex justify-content-center align-items-center flex-00a"
               (click)="removeAggregation(agg, i)" matTooltip="Permanently remove this trend.">
-              <span class="cset-icons-trash-x fs-base-2 mr-2"></span>
+              <span class="cset-icons-trash-x fs-base-2 me-2"></span>
               <span class="icon-link-button-text-dark">Remove</span>
             </button>
           </td>

diff --git a/CSETWebNg/src/app/aggregation/alias-assessments/alias-assessments.component.html b/CSETWebNg/src/app/aggregation/alias-assessments/alias-assessments.component.html
@@ -21,7 +21,7 @@
   SOFTWARE. 
 -------------------------->
 <div class="wp-0 d-flex flex-column justify-content-start flex-11a trend-table-width">
-  <div class="bgc-trans mt-4 ml-4 pr-4 d-flex flex-column flex-00a max-1200">
+  <div class="bgc-trans mt-4 ms-4 pe-4 d-flex flex-column flex-00a max-1200">
     <h3>{{ this.aggregationSvc?.modeDisplay(false) }} Details</h3>
     <div class="w-100">
       <div class="form-group">
@@ -45,7 +45,7 @@ <h3>{{ this.aggregationSvc?.modeDisplay(false) }} Details</h3>
     </div>
 
     <div class="mt-3 mb-3">
-      <button class="btn btn-primary" (click)="openSelectionDialog()"><i class="far fa-check-square mr-2"></i>Select
+      <button class="btn btn-primary" (click)="openSelectionDialog()"><i class="far fa-check-square me-2"></i>Select
         Assessments</button>
     </div>
   </div>
@@ -67,7 +67,7 @@ <h3>{{ this.aggregationSvc?.modeDisplay(false) }} Details</h3>
           </th>
         </tr>
         <tr *ngFor="let assess of aliasData.assessments">
-          <td class="pr-3">
+          <td class="pe-3">
             <input type="text" [(ngModel)]="assess.alias" class="form-control" maxlength="15"
               (change)="changeAlias(assess)" />
           </td>

diff --git a/CSETWebNg/src/app/aggregation/compare-analytics/compare-analytics.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/compare-analytics.component.html
@@ -51,7 +51,7 @@ <h3 class="mb-4">Compare Assessments</h3>
 
       <hr class="w-100 hr-sal mt-1" />
 
-      <div class="mt-0 mr-0 d-flex flex-column justify-content-start flex-11a">
+      <div class="mt-0 me-0 d-flex flex-column justify-content-start flex-11a">
         <div *ngIf="this.type === 'maturity-based'; else standardsBased" [ngSwitch]="tab"
           class="d-flex flex-column justify-content-start flex-00a">
           <app-compare-maturity-individual *ngSwitchCase="'INDIVIDUAL'"></app-compare-maturity-individual>

diff --git a/...ation/compare-analytics/maturity-based/compare-bestworst/compare-bestworst.component.html b/...ation/compare-analytics/maturity-based/compare-bestworst/compare-bestworst.component.html
@@ -21,10 +21,10 @@
   SOFTWARE. 
 -------------------------->
 <div class="d-flex flex-row col-12">
-  <div class="col-4 pl-0 pr-0">
-    <ul style="padding-inline-start: 0" class="pr-5">
+  <div class="col-4 ps-0 pe-0">
+    <ul style="padding-inline-start: 0" class="pe-5">
       <li *ngFor="let cat of categories" class="cursor-pointer list-unstyled">
-        <div (click)="selectCategory(cat)" [class.cat-selected]="cat === currentCategory" class="p-1 pl-2 pr-2 w-100">
+        <div (click)="selectCategory(cat)" [class.cat-selected]="cat === currentCategory" class="p-1 ps-2 pe-2 w-100">
           {{ cat.category }}
         </div>
       </li>

diff --git a/...ion/compare-analytics/maturity-based/compare-individual/compare-individual.component.html b/...ion/compare-analytics/maturity-based/compare-individual/compare-individual.component.html
@@ -25,21 +25,21 @@ <h3>Assessment Answer Summary</h3>
   <table class="assessment-summary">
     <tr>
       <th class="text-left p-2">Assessment Alias</th>
-      <th class="text-right p-2 pl-3">Total</th>
-      <th class="text-right p-2 pl-3">Yes</th>
-      <th class="text-right p-2 pl-3">No</th>
-      <th class="text-right p-2 pl-3">NA</th>
-      <th class="text-right p-2 pl-3">Alt</th>
-      <th class="text-right p-2 pl-3">Unanswered</th>
+      <th class="text-right p-2 ps-3">Total</th>
+      <th class="text-right p-2 ps-3">Yes</th>
+      <th class="text-right p-2 ps-3">No</th>
+      <th class="text-right p-2 ps-3">NA</th>
+      <th class="text-right p-2 ps-3">Alt</th>
+      <th class="text-right p-2 ps-3">Unanswered</th>
     </tr>
     <tr *ngFor="let a of answerCounts">
       <td class="text-left p-2">{{ a.alias }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.total }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.y }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.n }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.na }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.a }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.u }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.total }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.y }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.n }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.na }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.a }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.u }}</td>
     </tr>
   </table>
 </div>

diff --git a/...aggregation/compare-analytics/maturity-based/compare-missed/compare-missed.component.html b/...aggregation/compare-analytics/maturity-based/compare-missed/compare-missed.component.html
@@ -26,13 +26,13 @@
   </div>
   <table class="assessment-summary td-p-1 td-text-left mb-5">
     <tr>
-      <th class="pr-5">Category</th>
-      <th class="pr-5">Subcategory</th>
+      <th class="pe-5">Category</th>
+      <th class="pe-5">Subcategory</th>
       <th>Question</th>
     </tr>
     <tr *ngFor="let q of missedQuestions">
-      <td class="pr-5">{{ q.category }}</td>
-      <td class="pr-5">{{ q.subcategory }}</td>
+      <td class="pe-5">{{ q.category }}</td>
+      <td class="pe-5">{{ q.subcategory }}</td>
       <td>{{ q.questionText }}</td>
     </tr>
   </table>

diff --git a/...tion/compare-analytics/standards-based/compare-bestworst/compare-bestworst.component.html b/...tion/compare-analytics/standards-based/compare-bestworst/compare-bestworst.component.html
@@ -21,10 +21,10 @@
   SOFTWARE. 
 -------------------------->
 <div class="d-flex flex-row col-12">
-  <div class="col-4 pl-0 pr-0">
-    <ul style="padding-inline-start: 0" class="pr-5">
+  <div class="col-4 ps-0 pe-0">
+    <ul style="padding-inline-start: 0" class="pe-5">
       <li *ngFor="let cat of categories" class="cursor-pointer list-unstyled">
-        <div (click)="selectCategory(cat)" [class.cat-selected]="cat === currentCategory" class="p-1 pl-2 pr-2 w-100">
+        <div (click)="selectCategory(cat)" [class.cat-selected]="cat === currentCategory" class="p-1 ps-2 pe-2 w-100">
           {{ cat.category }}
         </div>
       </li>

diff --git a/...on/compare-analytics/standards-based/compare-individual/compare-individual.component.html b/...on/compare-analytics/standards-based/compare-individual/compare-individual.component.html
@@ -25,21 +25,21 @@ <h3>Assessment Answer Summary</h3>
   <table class="assessment-summary">
     <tr>
       <th class="text-left p-2">Assessment Alias</th>
-      <th class="text-right p-2 pl-3">Total</th>
-      <th class="text-right p-2 pl-3">Yes</th>
-      <th class="text-right p-2 pl-3">No</th>
-      <th class="text-right p-2 pl-3">NA</th>
-      <th class="text-right p-2 pl-3">Alt</th>
-      <th class="text-right p-2 pl-3">Unanswered</th>
+      <th class="text-right p-2 ps-3">Total</th>
+      <th class="text-right p-2 ps-3">Yes</th>
+      <th class="text-right p-2 ps-3">No</th>
+      <th class="text-right p-2 ps-3">NA</th>
+      <th class="text-right p-2 ps-3">Alt</th>
+      <th class="text-right p-2 ps-3">Unanswered</th>
     </tr>
     <tr *ngFor="let a of answerCounts">
       <td class="text-left p-2">{{ a.alias }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.total }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.y }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.n }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.na }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.a }}</td>
-      <td class="text-right p-2 pl-3" style="width: 10%">{{ a.u }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.total }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.y }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.n }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.na }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.a }}</td>
+      <td class="text-right p-2 ps-3" style="width: 10%">{{ a.u }}</td>
     </tr>
   </table>
 </div>

diff --git a/...ggregation/compare-analytics/standards-based/compare-missed/compare-missed.component.html b/...ggregation/compare-analytics/standards-based/compare-missed/compare-missed.component.html
@@ -26,13 +26,13 @@
   </div>
   <table class="assessment-summary td-p-1 td-text-left mb-5">
     <tr>
-      <th class="pr-5">Category</th>
-      <th class="pr-5">Subcategory</th>
+      <th class="pe-5">Category</th>
+      <th class="pe-5">Subcategory</th>
       <th>Question</th>
     </tr>
     <tr *ngFor="let q of missedQuestions">
-      <td class="pr-5">{{ q.category }}</td>
-      <td class="pr-5">{{ q.subcategory }}</td>
+      <td class="pe-5">{{ q.category }}</td>
+      <td class="pe-5">{{ q.subcategory }}</td>
       <td>{{ q.questionText }}</td>
     </tr>
   </table>

diff --git a/CSETWebNg/src/app/aggregation/merge/merge.component.html b/CSETWebNg/src/app/aggregation/merge/merge.component.html
@@ -46,7 +46,7 @@ <h3>Questions</h3>
           </div>
 
           <div class="question-row" *ngFor="let q of cat.questions">
-            <div style="width: 100%;" class="d-flex flex-row pr-2">
+            <div style="width: 100%;" class="d-flex flex-row pe-2">
               <div [style.word-break]="applyWordBreak(q)" [innerHTML]="assessmentSvc.formatLinebreaks(q.questionText)"
                 (click)="questionTextClicked(q, $event)">
               </div>

diff --git a/CSETWebNg/src/app/assessment/diagram/diagram-info/diagram-info.component.html b/CSETWebNg/src/app/assessment/diagram/diagram-info/diagram-info.component.html
@@ -43,7 +43,7 @@ <h4>Network Diagram</h4>
     </div>
     <div class="mt-3 mb-5" style="display: flex; justify-content: space-between;">
         <button class="btn btn-primary" (click)="navToDiagram('')"><i
-                class="fas fa-project-diagram mr-2"></i>{{buttonText}}</button>
+                class="fas fa-project-diagram me-2"></i>{{buttonText}}</button>
 
         <span *ngIf="configSvc.installationMode == 'RENEW'">
             <button class="btn btn-primary" (click)="openMalcolmInstructionsDialog()">

diff --git a/CSETWebNg/src/app/assessment/diagram/diagram-inventory/diagram-inventory.component.html b/CSETWebNg/src/app/assessment/diagram/diagram-inventory/diagram-inventory.component.html
@@ -26,12 +26,12 @@ <h5>Component Inventory</h5>
   <div *ngIf="componentsExist">
     <div class="d-flex justify-content-between mb-3 mt-4">
       <button class="btn btn-primary" (click)="getExport()">
-        <i class="cset-icons-export-excel mr-2"></i>
+        <i class="cset-icons-export-excel me-2"></i>
         Export to Excel</button>
 
       <button *ngIf="showCsafUploadButton()" class="btn btn-primary" (click)="openFileBrowserForCsafUpload()"
         matTooltip="Select CSAF JSON files to upload.">
-        <i class="cset-icons-import mr-2"></i>
+        <i class="cset-icons-import me-2"></i>
         Update Vulnerabilities Database</button>
       <input id="csafUpload" type="file" accept=".json" multiple (change)="fileSelect($event)" class="display-none">
     </div>

diff --git a/...nerabilities/diagram-vulnerabilities-dialog/diagram-vulnerabilities-dialog.component.html b/...nerabilities/diagram-vulnerabilities-dialog/diagram-vulnerabilities-dialog.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="cset-icons-exclamation-triangle fs-base-6 mr-3"></span>
+    <span class="cset-icons-exclamation-triangle fs-base-6 me-3"></span>
     <span>Common Vulnerabilities and Exposures (CVE)</span>
   </div>
 
-  <mat-dialog-content class="p-3 pr-0 mt-2 oy-auto d-flex flex-column flex-11a">
+  <mat-dialog-content class="p-3 pe-0 mt-2 oy-auto d-flex flex-column flex-11a">
     <div class="disclaimer-blurb">
       Disclaimer: The following affects this Vendor and Product, but might not affect your exact device based on Version
       or Serial Number.

diff --git a/...sessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities.component.html b/...sessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities.component.html
@@ -47,7 +47,7 @@
               <span>
                 {{ vendor.name }}
               </span>
-              <button class="btn bgc-trans ml-3 mt-1 p-0" mat-icon-button aria-label="Delete Vendor"
+              <button class="btn bgc-trans ms-3 mt-1 p-0" mat-icon-button aria-label="Delete Vendor"
                 (click)="deleteVendor(vendor.name)">
                 <mat-icon matTooltip="Delete Vendor" matTooltipPosition="right" class="delete-button">close</mat-icon>
               </button>
@@ -66,7 +66,7 @@
               <span>
                 {{ product.name }}
               </span>
-              <button class="btn bgc-trans ml-3 mt-1 p-0" mat-icon-button aria-label="Delete Product"
+              <button class="btn bgc-trans ms-3 mt-1 p-0" mat-icon-button aria-label="Delete Product"
                 (click)="deleteProduct(component.vendorName, product.name)">
                 <mat-icon matTooltip="Delete Product" matTooltipPosition="right" class="delete-button">close</mat-icon>
               </button>

diff --git a/CSETWebNg/src/app/assessment/merge/merge-cie-analysis/merge-cie-analysis.component.html b/CSETWebNg/src/app/assessment/merge/merge-cie-analysis/merge-cie-analysis.component.html
@@ -23,19 +23,19 @@
 <!--
 <ng-container *ngIf="this.pageLoading === false">
     <div class="p-0 d-flex flex-column justify-content-start flex-11a">
-        <div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a ">
+        <div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a ">
             <div class="text-right"><input type="button" class="btn btn-primary" value="Merge Options"
                 (click)="showMergeOptions()"></div>
         </div>
     </div>
 </ng-container>
 -->
 
-<div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a">
+<div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a">
     <h2 class="mt-0">Merge Analyses</h2>
 </div>
 
-<div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a ">
+<div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a ">
     <div *ngIf="this.pageLoading === true">
         <div class="spinner-container m-0 d-flex justify-content-center align-items-center flex-11a">
             <div class="spinner-size-50"></div>
@@ -45,7 +45,7 @@ <h2 class="mt-0">Merge Analyses</h2>
 </div>
 
 <div class="p-0 d-flex flex-column justify-content-start flex-11a">
-    <div class="bgc-trans mt-2 mx-4 pr-4 d-flex flex-column flex-00a ">
+    <div class="bgc-trans mt-2 mx-4 pe-4 d-flex flex-column flex-00a ">
         <ng-container *ngIf="this.mergeConflicts.length > 0 && this.pageLoading === false">
 
             <button class="btn btn-primary" matTooltip="Cancel merging and return to the assessment screen"
@@ -169,7 +169,7 @@ <h2 class="mt-0">Merge Analyses</h2>
                 [disabled]="(this.mergeRadioSelections.length !== this.mergeConflicts.length) || (this.attemptingToMerge === true)"
                 (click)="createMergedAssessment()">Merge Analyses</button>
             <ng-container *ngIf="this.attemptingToMerge === true">
-                <div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a ">
+                <div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a ">
                     <div class="spinner-container m-0 d-flex justify-content-center align-items-center flex-11a">
                         <div class="spinner-size-50"></div>
                         <p style="padding-left: 20px;">Merging in progress, please wait...</p>
@@ -197,7 +197,7 @@ <h2 class="mt-0">Merge Analyses</h2>
                 </div>
             </ng-container>
             <ng-container *ngIf="this.attemptingToMerge === true">
-                <div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a ">
+                <div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a ">
                     <div class="spinner-container m-0 d-flex justify-content-center align-items-center flex-11a">
                         <div class="spinner-size-50"></div>
                         <p style="padding-left: 20px;">Merging in progress, please wait...</p>

diff --git a/CSETWebNg/src/app/assessment/merge/merge-examinations.component.html b/CSETWebNg/src/app/assessment/merge/merge-examinations.component.html
@@ -23,19 +23,19 @@
 <!--
 <ng-container *ngIf="this.pageLoading === false">
     <div class="p-0 d-flex flex-column justify-content-start flex-11a">
-        <div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a ">
+        <div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a ">
             <div class="text-right"><input type="button" class="btn btn-primary" value="Merge Options"
                 (click)="showMergeOptions()"></div>
         </div>
     </div>
 </ng-container>
 -->
 
-<div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a">
+<div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a">
     <h2 class="mt-0">Merge Examinations</h2>
 </div>
 
-<div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a ">
+<div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a ">
     <div *ngIf="this.pageLoading === true">
         <div class="spinner-container m-0 d-flex justify-content-center align-items-center flex-11a">
             <div class="spinner-size-50"></div>
@@ -45,7 +45,7 @@ <h2 class="mt-0">Merge Examinations</h2>
 </div>
 
 <div class="p-0 d-flex flex-column justify-content-start flex-11a">
-    <div class="bgc-trans mt-2 mx-4 pr-4 d-flex flex-column flex-00a ">
+    <div class="bgc-trans mt-2 mx-4 pe-4 d-flex flex-column flex-00a ">
         <ng-container *ngIf="this.mergeConflicts.length > 0 && this.pageLoading === false">
 
             <button class="btn btn-primary" matTooltip="Cancel merging and return to the assessment screen"
@@ -131,7 +131,7 @@ <h2 class="mt-0">Merge Examinations</h2>
                 </div>
             </ng-container>
             <ng-container *ngIf="this.attemptingToMerge === true">
-                <div class="bgc-trans mt-4 mx-4 pr-4 d-flex flex-column flex-00a ">
+                <div class="bgc-trans mt-4 mx-4 pe-4 d-flex flex-column flex-00a ">
                     <div class="spinner-container m-0 d-flex justify-content-center align-items-center flex-11a">
                         <div class="spinner-size-50"></div>
                         <p style="padding-left: 20px;">Merging in progress, please wait...</p>

diff --git a/...ssment/prepare/assessment-info/assessment-config-cie/assessment-config-cie.component.html b/...ssment/prepare/assessment-info/assessment-config-cie/assessment-config-cie.component.html
@@ -74,7 +74,7 @@ <h2>Import CIE Answers</h2>
             </option>
         </select> -->
 
-        <select class="form-control mr-1" (change)="changeBaseline($event)" [(ngModel)]="baselineAssessmentId">
+        <select class="form-control me-1" (change)="changeBaseline($event)" [(ngModel)]="baselineAssessmentId">
             <option [ngValue]="null">-- Select Analysis to Import --</option>
             <option *ngFor="let c of importSourceCandidates" [ngValue]="c.id">
                 {{c.assessmentName}} [{{c.assessmentDate | localizeDate}}]

diff --git a/...ssment-info/assessment-config-ncua/feature-option-ncua/feature-option-ncua.component.html b/...ssment-info/assessment-config-ncua/feature-option-ncua/feature-option-ncua.component.html
@@ -40,7 +40,7 @@
 </div>
 
 <div *ngIf="!(this.ncuaSvc.switchStatus)">
-    <div class="d-flex justify-content-between pl-4"
+    <div class="d-flex justify-content-between ps-4"
         *ngIf="feature.code == 'maturity' && (configSvc.installationMode === 'ACET') && assessSvc.assessment?.useMaturity">
         <div>
             <input type="checkbox" tabindex="0" id="acet-only" name="acet-only" class="mt-1"

diff --git a/...nt/prepare/assessment-info/assessment-config/feature-option/feature-option.component.html b/...nt/prepare/assessment-info/assessment-config/feature-option/feature-option.component.html
@@ -38,7 +38,7 @@
   <div class="b-primary-200 br-standard fst-italic" [class.open-desc]="expandedDesc" [class.closed-desc]="!expandedDesc"
     [innerHTML]="feature.description | safe"></div>
 
-  <div class="d-flex justify-content-between pl-4"
+  <div class="d-flex justify-content-between ps-4"
     *ngIf="feature.code == 'maturity' && (configSvc.installationMode === 'ACET') && assessSvc.assessment?.useMaturity">
     <div>
       <input type="checkbox" tabindex="0" id="acet-only" name="acet-only" class="mt-1"

diff --git a/...assessment/prepare/assessment-info/assessment-contacts/assessment-contacts.component.html b/...assessment/prepare/assessment-info/assessment-contacts/assessment-contacts.component.html
@@ -30,7 +30,7 @@ <h4>{{ t('contacts') }}</h4>
       </app-contact-item>
       <span class="mt-2 btn-group" *ngIf="showControls()">
         <button class="btn btn-group d-flex align-items-center flex-00a" (click)="newContact()" [disabled]="adding==1">
-          <span class="cset-icons-plus fs-base mr-2"></span>
+          <span class="cset-icons-plus fs-base me-2"></span>
           <span>{{ t('add contact') }}</span>
         </button>
         <button *ngIf="false" class="btn btn-group cset-icons-envelope" (click)="openEmailDialog()">{{ t('email