From 64ed9bbd50083994b3682b5ac2bcc565d8458451 Mon Sep 17 00:00:00 2001
From: Randy Woods <randy1@radiorandy.com>
Date: Mon, 16 Sep 2024 10:32:01 -0600
Subject: [PATCH] Next round of Bootstrap class updates

---
 .../aggregation-home.component.html           |   6 +-
 .../alias-assessments.component.html          |   6 +-
 .../compare-analytics.component.html          |   2 +-
 .../compare-bestworst.component.html          |   6 +-
 .../compare-individual.component.html         |  24 +-
 .../compare-missed.component.html             |   8 +-
 .../compare-bestworst.component.html          |   6 +-
 .../compare-individual.component.html         |  24 +-
 .../compare-missed.component.html             |   8 +-
 .../aggregation/merge/merge.component.html    |   2 +-
 .../diagram-info/diagram-info.component.html  |   2 +-
 .../diagram-inventory.component.html          |   4 +-
 ...gram-vulnerabilities-dialog.component.html |   4 +-
 .../diagram-vulnerabilities.component.html    |   4 +-
 .../merge-cie-analysis.component.html         |  12 +-
 .../merge/merge-examinations.component.html   |  10 +-
 .../assessment-config-cie.component.html      |   2 +-
 .../feature-option-ncua.component.html        |   2 +-
 .../feature-option.component.html             |   2 +-
 .../assessment-contacts.component.html        |   2 +-
 .../contact-item/contact-item.component.html  |   8 +-
 .../demographics-extended.component.html      |  20 +-
 .../demographics-iod.component.html           |  31 ++-
 .../csi-service-composition.component.html    |  18 +-
 .../csi-service-demographics.component.html   |  56 ++--
 .../irp-ise-summary.component.html            |   6 +-
 .../irp-summary/irp-summary.component.html    |   8 +-
 .../irp/irp-tabs/irp-tabs.component.html      |   6 +-
 .../assessment/prepare/irp/irp.component.html |   2 +-
 .../config-cis/config-cis.component.html      |   2 +-
 .../model-select/model-select.component.html  |  10 +-
 .../sals/sal-gen/sal-gen.component.html       |   2 +-
 .../sals/sal-nist/sal-nist.component.html     |  20 +-
 .../sals/sal-simple/sal-simple.component.html |   8 +-
 .../prepare/sals/sals.component.html          |  16 +-
 .../awwa-standard.component.html              |   8 +-
 .../standards/standards.component.html        |   4 +-
 .../questions/issues/issues.component.html    |   2 +-
 .../maturity-questions.component.html         |   2 +-
 .../grouping-block-nested.component.html      |   2 +-
 .../option-block-nested.component.html        |  20 +-
 .../question-block-nested.component.html      |  10 +-
 .../observations/observations.component.html  |   4 +-
 .../question-block-cie.component.html         |  14 +-
 .../question-block-ise.component.html         |  14 +-
 .../question-block-maturity.component.html    |  22 +-
 .../question-block-vadr.component.html        |  28 +-
 .../question-block.component.html             |  32 +--
 .../question-extras-dialog.component.html     |   2 +-
 .../question-extras.component.html            |   8 +-
 .../questions/questions.component.html        |   6 +-
 .../acet-detail/acet-detail.component.html    |   6 +-
 .../results/admin/admin.component.html        |   8 +-
 .../analytics-login.component.html            |   4 +-
 .../ranked-questions.component.html           |   8 +-
 .../cpg-cost-impact-complexity.component.html |   6 +-
 .../cpg-practice-table.component.html         |   4 +-
 .../crr-results-detail.component.html         |   2 +-
 .../dashboard/acet-dashboard.component.html   |   8 +-
 .../hydro-action-item.component.html          |   6 +-
 .../cmmc-level-drilldown.component.html       |   4 +-
 .../cmmc2-level-results.component.html        |   2 +-
 .../cmmc2-results.component.html              |   2 +-
 .../ise-warnings/ise-warnings.component.html  |  16 +-
 .../report-list/report-list.component.html    |   2 +-
 .../results/reports/reports.component.html    |  10 +-
 .../add-question/add-question.component.html  |  12 +-
 .../builder-breadcrumbs.component.html        |   2 +-
 .../custom-set-list.component.html            |   4 +-
 .../question-list.component.html              |  10 +-
 .../ref-document/ref-document.component.html  |   2 +-
 .../requirement-detail.component.html         |  28 +-
 .../requirement-list.component.html           |   8 +-
 .../set-detail/set-detail.component.html      |   6 +-
 .../standard-documents.component.html         |   6 +-
 .../about-acet/about-acet.component.html      |   8 +-
 .../dialogs/about-cf/about-cf.component.html  |   6 +-
 .../about-cie/about-cie.component.html        |   6 +-
 .../about-cset/about-cset.component.html      |   6 +-
 .../about-renew/about-renew.component.html    |   4 +-
 .../about-rra/about-rra.component.html        |   6 +-
 .../about-tsa/about-tsa.component.html        |   6 +-
 .../accessibility-statement.component.html    |   6 +-
 .../add-requirement.component.html            |   4 +-
 .../dialogs/advisory/advisory.component.html  |   4 +-
 .../app/dialogs/alert/alert.component.html    |   6 +-
 .../assessment-documents.component.html       |   8 +-
 .../export-password.component.html            |   6 +-
 .../import-password.component.html            |   6 +-
 .../change-password.component.html            |  38 +--
 .../charter-mismatch.component.html           |   4 +-
 .../cie-documents.component.html              |   8 +-
 .../component-override.component.html         |   2 +-
 .../dialogs/confirm/confirm.component.html    |   8 +-
 .../edit-user/edit-user.component.html        |   6 +-
 .../dialogs/ejection/ejection.component.html  |   6 +-
 .../app/dialogs/email/email.component.html    |   6 +-
 .../enable-protected.component.html           |   6 +-
 .../excel-export/excel-export.component.html  |   6 +-
 .../ncua-excel-export.component.html          |   8 +-
 .../global-configuration.component.html       |   4 +-
 .../global-parameters.component.html          |   6 +-
 .../import-demographics.component.html        |  10 +-
 .../inline-parameter.component.html           |   4 +-
 .../ise-merit/merit-check.component.html      |   2 +-
 .../keyboard-shortcuts.component.html         |   6 +-
 .../dialogs/license/license.component.html    |   4 +-
 .../malcolm-instructions.component.html       |   8 +-
 .../malcolm-upload-error.component.html       |  10 +-
 .../merge-question-detail.component.html      |   4 +-
 .../new-assessment-dialog.component.html      |   4 +-
 .../src/app/dialogs/okay/okay.component.html  |   6 +-
 .../online-disclaimer.component.html          |   4 +-
 .../question-filters-reports.component.html   |   6 +-
 .../question-filters.component.html           |   6 +-
 .../rra-mini-user-guide.component.html        |   4 +-
 .../sector-help/sector-help.component.html    |   6 +-
 .../select-assessments.component.html         |  12 +-
 .../terms-of-use/terms-of-use.component.html  |   6 +-
 .../upload-export.component.html              |  10 +-
 .../user-language.component.html              |   4 +-
 .../src/app/import/import.component.html      |  24 +-
 ...ssment-comparison-analytics.component.html |   4 +-
 ...sessment-comparison-analytics.component.ts |   2 +-
 .../login-access-key.component.html           |  12 +-
 .../login-acet/login-acet.component.html      |   8 +-
 .../initial/login-cf/login-cf.component.html  |  16 +-
 .../login-cset/login-cset.component.html      |  12 +-
 .../login-renew/login-renew.component.html    |  16 +-
 .../login-rra/login-rra.component.html        |   4 +-
 .../login-tsa/login-tsa.component.html        |  10 +-
 .../reset-pass/reset-pass.component.html      |   4 +-
 .../acet-layout-main.component.html           |   6 +-
 .../cf-layout-main.component.html             |  12 +-
 .../cie-layout-main.component.html            |  20 +-
 .../iod-layout/iod-layout.component.html      |   8 +-
 .../layout-main/layout-main.component.html    |   6 +-
 .../renew-layout-main.component.html          |  14 +-
 .../rra-layout-main.component.html            |  16 +-
 .../tsa-layout-main.component.html            |  16 +-
 .../acet-answeredquestions.component.html     |  10 +-
 .../acet-commentsmarked.component.html        |   8 +-
 .../acet-compensatingcontrols.component.html  |   4 +-
 .../acet-deficency.component.html             |   8 +-
 .../acet-executive.component.html             |   4 +-
 CSETWebNg/src/app/reports/acet-reports.scss   |   4 +-
 ...analysis-network-components.component.html |   2 +-
 .../c2m2-detailed-results.component.html      |   8 +-
 .../cie-all-questions.component.html          |  26 +-
 .../cie-mfr-report.component.html             |  26 +-
 .../cie-not-applicable.component.html         |  26 +-
 .../cie-principle-only.component.html         |  12 +-
 .../cie-principle-phase.component.html        |  18 +-
 .../cis-commentsmarked.component.html         |   8 +-
 ...rouping-block-nested-report.component.html |   2 +-
 .../option-block-nested-report.component.html |  24 +-
 ...uestion-block-nested-report.component.html |   8 +-
 .../executive-cmmc2.component.html            |   2 +-
 .../cmu-domain-detail-table.component.html    |   2 +-
 .../cmu-goal-perf-stacked-bar.component.html  |   2 +-
 ...mu-nist-csf-cat-performance.component.html |   2 +-
 .../cmu-nist-csf-cat-summary.component.html   |   2 +-
 .../cmu-performance.component.html            |   2 +-
 .../commentsmfr/commentsmfr.component.html    |  10 +-
 .../comparereport.component.html              |  24 +-
 .../cpg-deficiency.component.html             |   4 +-
 .../crr-nist-csf-cat-summary.component.html   |   2 +-
 .../crr-results-summary.component.html        |   4 +-
 .../edm-commentsmarked.component.html         |   8 +-
 .../edm-deficiency.component.html             |   2 +-
 .../edm-domain-detail.component.html          |   2 +-
 .../edm-legend-subquestions.component.html    |   2 +-
 .../edm/edm-toc/edm-toc.component.html        |   2 +-
 .../eval-against-standards.component.html     |   2 +-
 .../executive-summary.component.html          |   2 +-
 .../general-deficiency.component.html         |   2 +-
 .../hydro-action-items-report.component.html  |   4 +-
 .../info-block/info-block.component.html      |   2 +-
 .../src/app/reports/irp/irp.component.html    |   2 +-
 .../ise-answeredquestions.component.html      |  12 +-
 .../reports/ise-data/ise-data.component.html  |  24 +-
 .../ise-examination.component.html            |  26 +-
 .../ise-examiner/ise-examiner.component.html  |  10 +-
 .../ise-merit/ise-merit.component.html        |  10 +-
 .../logo-for-reports.component.html           |   2 +-
 .../mc-grouping/mc-grouping.component.html    |   4 +-
 .../model/mc-option/mc-option.component.html  |   2 +-
 .../mc-question/mc-question.component.html    |   6 +-
 .../module-content-model.component.html       |   2 +-
 .../module-content-launch.component.html      |   4 +-
 .../module-content-standard.component.html    |   2 +-
 .../module-content.component.html             |   2 +-
 .../references-block.component.html           |   8 +-
 .../related-q-block.component.html            |   2 +-
 CSETWebNg/src/app/reports/reports2.scss       | 260 +++++++++---------
 .../rra-deficiency.component.html             |   2 +-
 .../sd-owner-comments-mfr.component.html      |  10 +-
 .../sd-owner-deficiency.component.html        |   6 +-
 .../securityplan/securityplan.component.html  |   2 +-
 .../site-detail/site-detail.component.html    |   6 +-
 .../site-summary/site-summary.component.html  |   4 +-
 .../trendreport/trendreport.component.html    |  24 +-
 .../app/reports/tsa-sd/tsa-sd.component.html  |   4 +-
 .../open-ended-questions.component.html       |  24 +-
 .../vadr-deficiency.component.html            |   2 +-
 .../resource-library.component.html           |  30 +-
 CSETWebNg/src/assets/app-startup-error.html   |   4 +-
 207 files changed, 994 insertions(+), 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
index d295ffb28e..237d5411ff 100644
--- 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
index 8a1d5fa548..df7e78c25a 100644
--- 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
index eadb3e84dd..c02a916993 100644
--- 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/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-bestworst/compare-bestworst.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-bestworst/compare-bestworst.component.html
index bafb771379..8e22c80cc8 100644
--- a/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-bestworst/compare-bestworst.component.html
+++ b/CSETWebNg/src/app/aggregation/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/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-individual/compare-individual.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-individual/compare-individual.component.html
index ca5a7271a9..671991b21b 100644
--- a/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-individual/compare-individual.component.html
+++ b/CSETWebNg/src/app/aggregation/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/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-missed/compare-missed.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-missed/compare-missed.component.html
index 0a941c43ae..655b02a60f 100644
--- a/CSETWebNg/src/app/aggregation/compare-analytics/maturity-based/compare-missed/compare-missed.component.html
+++ b/CSETWebNg/src/app/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/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-bestworst/compare-bestworst.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-bestworst/compare-bestworst.component.html
index bafb771379..8e22c80cc8 100644
--- a/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-bestworst/compare-bestworst.component.html
+++ b/CSETWebNg/src/app/aggregation/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/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-individual/compare-individual.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-individual/compare-individual.component.html
index c9d20f2ecc..11c5373e27 100644
--- a/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-individual/compare-individual.component.html
+++ b/CSETWebNg/src/app/aggregation/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/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-missed/compare-missed.component.html b/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-missed/compare-missed.component.html
index 0a941c43ae..655b02a60f 100644
--- a/CSETWebNg/src/app/aggregation/compare-analytics/standards-based/compare-missed/compare-missed.component.html
+++ b/CSETWebNg/src/app/aggregation/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
index 9228cf04d1..cec5281249 100644
--- 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
index 92d8fb67a2..23fda8bbca 100644
--- 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
index 3942f0535d..77dff88ac7 100644
--- 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/CSETWebNg/src/app/assessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities-dialog/diagram-vulnerabilities-dialog.component.html b/CSETWebNg/src/app/assessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities-dialog/diagram-vulnerabilities-dialog.component.html
index 800f8700f6..014e01c36d 100644
--- a/CSETWebNg/src/app/assessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities-dialog/diagram-vulnerabilities-dialog.component.html
+++ b/CSETWebNg/src/app/assessment/diagram/diagram-inventory/vulnerabilities/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/CSETWebNg/src/app/assessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities.component.html b/CSETWebNg/src/app/assessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities.component.html
index f33dead316..540ae223b9 100644
--- a/CSETWebNg/src/app/assessment/diagram/diagram-inventory/vulnerabilities/diagram-vulnerabilities.component.html
+++ b/CSETWebNg/src/app/assessment/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
index c1b22a75b1..691057c27f 100644
--- 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,7 +23,7 @@
 <!--
 <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>
@@ -31,11 +31,11 @@
 </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
index 451ead4bc2..f0e27c274a 100644
--- a/CSETWebNg/src/app/assessment/merge/merge-examinations.component.html
+++ b/CSETWebNg/src/app/assessment/merge/merge-examinations.component.html
@@ -23,7 +23,7 @@
 <!--
 <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>
@@ -31,11 +31,11 @@
 </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/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config-cie/assessment-config-cie.component.html b/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config-cie/assessment-config-cie.component.html
index 9d93d8b0af..d65f2ee4d5 100644
--- a/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config-cie/assessment-config-cie.component.html
+++ b/CSETWebNg/src/app/assessment/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/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config-ncua/feature-option-ncua/feature-option-ncua.component.html b/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config-ncua/feature-option-ncua/feature-option-ncua.component.html
index 44504ebdcf..1de7d511b2 100644
--- a/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config-ncua/feature-option-ncua/feature-option-ncua.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/assessment-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/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config/feature-option/feature-option.component.html b/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config/feature-option/feature-option.component.html
index 8b51fd9f4d..9382a77834 100644
--- a/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-config/feature-option/feature-option.component.html
+++ b/CSETWebNg/src/app/assessment/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/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/assessment-contacts.component.html b/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/assessment-contacts.component.html
index 1d91608a4f..9d29cad12f 100644
--- a/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/assessment-contacts.component.html
+++ b/CSETWebNg/src/app/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
diff --git a/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/contact-item/contact-item.component.html b/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/contact-item/contact-item.component.html
index 2c32dae083..6b5a24044f 100644
--- a/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/contact-item/contact-item.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/assessment-info/assessment-contacts/contact-item/contact-item.component.html
@@ -134,7 +134,7 @@
         <div class="d-flex flex-column flex-11a">
           <div class="d-flex flex-wrap flex-11a">
 
-            <div class="form-group me-0 mr-sm-2 d-flex flex-column flex-11a">
+            <div class="form-group me-0 me-sm-2 d-flex flex-column flex-11a">
               <label class="mb-1" for="fName">{{ t('contact.first name') }}</label>
               <input class="form-control" autocomplete="off" type="text" maxlength="150" name="fName" id="fName"
                 [(ngModel)]="contact.firstName" #fName="ngModel" [placeholder]="t('contact.first name')"
@@ -153,7 +153,7 @@
             </div>
           </div>
           <div class="d-flex flex-wrap flex-11a">
-            <div class="form-group me-0 mr-sm-2 d-flex flex-column flex-11a">
+            <div class="form-group me-0 me-sm-2 d-flex flex-column flex-11a">
               <label class="mb-1" for="title">{{ t('contact.title') }}</label>
               <input class="form-control" autocomplete="off" type="text" maxlength="150" name="title" id="title"
                 [(ngModel)]="contact.title" #title="ngModel" [placeholder]="t('contact.title')"
@@ -168,7 +168,7 @@
             </div>
           </div>
           <div class="d-flex flex-wrap flex-11a">
-            <div class="form-group me-0 mr-sm-2 d-flex flex-column flex-11a">
+            <div class="form-group me-0 me-sm-2 d-flex flex-column flex-11a">
               <label class="mb-1" for="title">{{ t('contact.organization') }}</label>
               <input class="form-control" autocomplete="off" type="text" maxlength="150" name="Organization"
                 id="organization" [(ngModel)]="contact.organizationName" #organization="ngModel"
@@ -183,7 +183,7 @@
             </div>
           </div>
           <div class="d-flex flex-wrap flex-11a">
-            <div class="form-group me-0 mr-sm-2 d-flex flex-column flex-11a">
+            <div class="form-group me-0 me-sm-2 d-flex flex-column flex-11a">
               <label class="mb-1" for="title">{{ t('contact.cell phone') }}</label>
               <input class="form-control" autocomplete="off" type="text" maxlength="150" name="cellPhone" id="cellPhone"
                 [(ngModel)]="contact.cellPhone" #cellPhone="ngModel" [placeholder]="t('contact.cell phone')"
diff --git a/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-extended/demographics-extended.component.html b/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-extended/demographics-extended.component.html
index a958e3b6a7..e28c942f7d 100644
--- a/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-extended/demographics-extended.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-extended/demographics-extended.component.html
@@ -40,7 +40,7 @@ <h4>Infrastructure Taxonomy</h4>
             <label>
                 Sector
                 <button (click)="launchSectorHelp()" style="background-color: transparent; border: none">
-                    <span class="cset-icons-question-circle-outline fs-base-4 mr-2 align-middle"></span>
+                    <span class="cset-icons-question-circle-outline fs-base-4 me-2 align-middle"></span>
                 </button>
             </label>
             <select class="form-control" id="sector" name="sector" tabindex="0" [(ngModel)]="demographicData.sectorId"
@@ -76,7 +76,7 @@ <h4>Infrastructure Taxonomy</h4>
             <a href="https://www.flsenate.gov/Committees/billsummaries/2022/html/2864" target="_blank">Florida House
                 Bill 7055</a>?
         </p>
-        <div class="d-flex flex-column ml-3">
+        <div class="d-flex flex-column ms-3">
             <input class="radio-custom" style="visibility: visible" name="HB7055No" id="HB7055No" type="radio"
                 autocomplete="off" tabindex="1" (click)="setHb7055('N')" [checked]="demographicData.hb7055 == 'N'">
             <label class="radio-custom-label" for="HB7055No">No</label>
@@ -84,7 +84,7 @@ <h4>Infrastructure Taxonomy</h4>
                 autocomplete="off" tabindex="0" (click)="setHb7055('Y')" [checked]="demographicData.hb7055 == 'Y'">
             <label class="radio-custom-label" for="HB7055Yes">Yes</label>
         </div>
-        <div *ngIf="demographicData.hb7055 == 'Y'" class="ml-5 mt-3">
+        <div *ngIf="demographicData.hb7055 == 'Y'" class="ms-5 mt-3">
             <p>
                 Are you intending to apply for the State of Florida Local Cybersecurity Grant Program? The full
                 assessments completes the requirements for house bill 7055?
@@ -113,12 +113,12 @@ <h4>Infrastructure Taxonomy</h4>
             (IT) or Operational Technology (OT) systems?
         </p>
 
-        <div class="d-flex flex-column ml-3">
+        <div class="d-flex flex-column ms-3">
             <input class="radio-custom" style="visibility: visible" name="primaryType" id="primaryIT" type="radio"
                 autocomplete="off" tabindex="0" (click)="setInfrastructureItOt('IT')"
                 [checked]="demographicData.infrastructureItOt == 'IT'">
             <label class="radio-custom-label" for="primaryIT">
-                <strong class="mr-4">Information Technology (IT)</strong>
+                <strong class="me-4">Information Technology (IT)</strong>
                 <div>
                     <div>
                         Any equipment or interconnected system or
@@ -126,7 +126,7 @@ <h4>Infrastructure Taxonomy</h4>
                         management,
                         movement, control, display, switching, interchange, transmission, or reception of data or
                         information.
-                        <div class="fst-italic mt-2 ml-4 mb-4">
+                        <div class="fst-italic mt-2 ms-4 mb-4">
                             Examples include the internet, mobile phones, business operations support, computers,
                             content management and performance software, and software and support for office automation
                             systems such as email, word processing and spreadsheets.
@@ -138,13 +138,13 @@ <h4>Infrastructure Taxonomy</h4>
                 autocomplete="off" tabindex="0" (click)="setInfrastructureItOt('OT')"
                 [checked]="demographicData.infrastructureItOt == 'OT'">
             <label class="radio-custom-label" for="primaryOT">
-                <strong class="mr-4">Operational Technology (OT)</strong>
+                <strong class="me-4">Operational Technology (OT)</strong>
                 <div>
                     Programmable systems or devices that interact
                     with the physical environment (or manage devices that interact with the physical environment). These
                     systems/devices detect or cause a direct change through the monitoring and/or control of devices,
                     processes, and events.
-                    <div class="fst-italic mt-2 ml-4">
+                    <div class="fst-italic mt-2 ms-4">
                         Examples include industrial control systems, plant floor controls, hospital diagnostic and
                         monitoring systems, transportation control systems, building management systems, fire control
                         systems, and physical access control mechanisms.
@@ -166,7 +166,7 @@ <h4>Geographic</h4>
     </p>
 
     <div class="mb-4 d-flex flex-row" style="align-items: center">
-        <h5 class="mb-0 mr-5">Statewide</h5>
+        <h5 class="mb-0 me-5">Statewide</h5>
         <button class="btn btn-link" (click)="selectAllCounties(true)">Select All</button>
         <button class="btn btn-link" (click)="selectAllCounties(false)">Select None</button>
     </div>
@@ -326,7 +326,7 @@ <h5>
             no-cost analysis, interested participants must fully complete their CSET risk assessment.
         </p>
         <p class="fst-italic">Are you interested in being considered for this free assessment follow-on service?</p>
-        <div class="d-flex flex-column ml-3">
+        <div class="d-flex flex-column ms-3">
             <input class="radio-custom" style="visibility: visible" name="FreeAssessYes" id="FreeAssessYes" type="radio"
                 autocomplete="off" tabindex="0" (click)="setCyberRisk('Y')"
                 [checked]="demographicData.cyberRiskService == 'Y'">
diff --git a/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-iod/demographics-iod.component.html b/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-iod/demographics-iod.component.html
index 375a220d0b..3a8ba2b256 100644
--- a/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-iod/demographics-iod.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/assessment-info/demographics-iod/demographics-iod.component.html
@@ -97,17 +97,12 @@ <h6 class="p-3 mb-4 alert-warning">
   </div>
 
   <!-- #2 -->
-  <div>
-    <ng-container *ngIf="demographicData.organizationType == 1">
-      <label for="numberEmployeesUnit" class="form-label"> Number of employees in the business unit? </label>
-      <div class="fst-italic my-2">
-        Please select N/A if the business unit and the overall organization are the same.
-      </div>
-    </ng-container>
-    <ng-container *ngIf="demographicData.organizationType != 1">
-      <label for="numberEmployeesUnit" class="form-label"> Number of employees in the department? </label>
-      <div class="fst-italic my-2">Please select N/A if the department and the overall organization are the same.</div>
-    </ng-container>
+  <div class="mb-3">
+    <label for="numberEmployeesUnit" *ngIf="demographicData.organizationType == 1" class="form-label"> Number of
+      employees in the business unit? </label>
+    <label for="numberEmployeesUnit" *ngIf="demographicData.organizationType != 1" class="form-label"> Number of
+      employees in the department? </label>
+
     <select [ngClass]="{ 'alert-danger' : !demographicData.numberEmployeesUnit }" class="form-select"
       id="numberEmployeesUnit" tabindex="0" name="numberEmployeesUnit" [(ngModel)]="demographicData.numberEmployeesUnit"
       (change)="newUpdate('NUM-EMP-UNIT', $event, 'int')">
@@ -117,6 +112,12 @@ <h6 class="p-3 mb-4 alert-warning">
         {{ i.optionText }}
       </option>
     </select>
+
+    <div *ngIf="demographicData.organizationType == 1" class="fst-italic my-2">Please select N/A if the department and
+      the overall organization are the same.</div>
+    <div *ngIf="demographicData.organizationType == 1" class="fst-italic my-2">
+      Please select N/A if the business unit and the overall organization are the same.
+    </div>
   </div>
 
   <!-- #3 -->
@@ -168,7 +169,7 @@ <h6 class="p-3 mb-4 alert-warning">
       </label>
     </div>
 
-    <div *ngIf="demographicData.usesStandard ?? false" class="ml-5">
+    <div *ngIf="demographicData.usesStandard ?? false" class="ms-5">
       <div class="fst-italic my-2">
         Please select the two most important resources or bodies of practice used. If the name of the resource is not
         listed please enter it directly into each box as applicable.
@@ -214,7 +215,7 @@ <h6 class="p-3 mb-4 alert-warning">
       </label>
     </div>
 
-    <div *ngIf="demographicData.requiredToComply" class="ml-5">
+    <div *ngIf="demographicData.requiredToComply" class="ms-5">
       <p class="fst-italic">
         Please select the two primary regulation types. If known, please enter the name of each regulation in the spaces
         provided.
@@ -259,7 +260,7 @@ <h6 class="p-3 mb-4 alert-warning">
     <label for="assetValue" class="form-label">
       Please indicate the group(s) that your organization shares with or obtains cybersecurity-related information from.
     </label>
-    <div class="ml-5">
+    <div class="ms-5">
       <div class="fst-italic my-2">Check all that apply.</div>
       <div class="mb-3">
         <ng-container *ngFor="let org of demographicData.listShareOrgs">
@@ -285,7 +286,7 @@ <h6 class="p-3 mb-4 alert-warning">
       Please select the two most significant barriers or concerns limiting your organization's participation in
       cybersecurity information sharing groups or initiatives.
     </label>
-    <div class="ml-5">
+    <div class="ms-5">
       <div class="fst-italic my-2">
         If the name of the barrier is not listed please enter it directly into each box as applicable.
       </div>
diff --git a/CSETWebNg/src/app/assessment/prepare/csi/csi-service-composition/csi-service-composition.component.html b/CSETWebNg/src/app/assessment/prepare/csi/csi-service-composition/csi-service-composition.component.html
index 983faae35a..6fd9986b23 100644
--- a/CSETWebNg/src/app/assessment/prepare/csi/csi-service-composition/csi-service-composition.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/csi/csi-service-composition/csi-service-composition.component.html
@@ -33,16 +33,16 @@ <h5>General Critical Services Description</h5>
       }
     </style>
 
-    <div class="form-group">
-      <label for="networksDescription">Networks (wireless networks, wired networks, etc.)</label>
+    <div>
+      <label for="networksDescription" class="form-label">Networks (wireless networks, wired networks, etc.)</label>
       <textarea [ngClass]="{
           'alert-danger': !serviceComposition.networksDescription && showErrors()
         }" class="form-control" tabindex="0" type="text" maxlength="400" name="networksDescription"
         id="networksDescription" [(ngModel)]="serviceComposition.networksDescription" placeholder="Networks Description"
         (change)="update()"></textarea>
     </div>
-    <div class="form-group">
-      <label for="servicesDescription">Services (computer services, e-mail servers, web servers, control services,
+    <div>
+      <label for="servicesDescription" class="form-label">Services (computer services, e-mail servers, web servers, control services,
         etc.)</label>
       <textarea [ngClass]="{
           'alert-danger': !serviceComposition.servicesDescription && showErrors()
@@ -50,8 +50,8 @@ <h5>General Critical Services Description</h5>
         id="servicesDescription" [(ngModel)]="serviceComposition.servicesDescription" placeholder="Servers Description"
         (change)="update()"></textarea>
     </div>
-    <div class="form-group">
-      <label for="applicationsDescription">Applications (computer programs, ERP software, shareware user-added
+    <div>
+      <label for="applicationsDescription" class="form-label">Applications (computer programs, ERP software, shareware user-added
         non-company software, etc.)</label>
       <textarea [ngClass]="{
           'alert-danger': !serviceComposition.applicationsDescription && showErrors()
@@ -59,8 +59,8 @@ <h5>General Critical Services Description</h5>
         id="applicationsDescription" [(ngModel)]="serviceComposition.applicationsDescription"
         placeholder="Applications Description" (change)="update()"></textarea>
     </div>
-    <div class="form-group">
-      <label for="connectionsDescription">Connections (VPN access by subcontractors, portable devices connected to
+    <div>
+      <label for="connectionsDescription" class="form-label">Connections (VPN access by subcontractors, portable devices connected to
         organization services,
         interconnections between networks, connection of a Critical Service to the Internet, etc.)</label>
       <textarea [ngClass]="{
@@ -70,7 +70,7 @@ <h5>General Critical Services Description</h5>
         placeholder="Connections Description" (change)="update()"></textarea>
     </div>
     <div class="form-group" *ngIf="showCriticalServiceIdentifyingInfo()">
-      <label for="personnelDescription">Individuals (key IT/OT security professionals, including administrators, users,
+      <label for="personnelDescription" class="form-label">Individuals (key IT/OT security professionals, including administrators, users,
         and third-party vendors)</label>
       <textarea [ngClass]="{
           'alert-danger': !serviceComposition.personnelDescription && showErrors()
diff --git a/CSETWebNg/src/app/assessment/prepare/csi/csi-service-demographics/csi-service-demographics.component.html b/CSETWebNg/src/app/assessment/prepare/csi/csi-service-demographics/csi-service-demographics.component.html
index 897603ef95..97b194de2a 100644
--- a/CSETWebNg/src/app/assessment/prepare/csi/csi-service-demographics/csi-service-demographics.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/csi/csi-service-demographics/csi-service-demographics.component.html
@@ -25,37 +25,37 @@ <h4>{{t('titles.service demographics')}}</h4>
 
   <form class="mb-3">
     <ng-container *ngIf="showCriticalServiceIdentifyingInfo()">
-      <div class="form-group">
-        <label for="criticalServiceName">{{t('critical service name')}}</label>
+      <div>
+        <label for="criticalServiceName" class="form-label">{{t('critical service name')}}</label>
         <input [ngClass]="{ 'alert-danger': !demographics.criticalService && showErrors() }" class="form-control"
           tabindex="0" type="text" maxlength="50" name="criticalServiceName" id="criticalServiceName"
           [(ngModel)]="demographics.criticalService" placeholder="{{t('critical service name')}}"
           (change)="updateBaseDemographics()" />
       </div>
-      <div class="form-group">
-        <label for="criticalServiceDescription">{{t('critical service description')}}</label>
+      <div>
+        <label for="criticalServiceDescription" class="form-label">{{t('critical service description')}}</label>
         <input [ngClass]="{
           'alert-danger': !csiServiceDemographic.criticalServiceDescription && showErrors()
         }" class="form-control" tabindex="0" type="text" maxlength="150" name="criticalServiceDescription"
           id="criticalServiceDescription" [(ngModel)]="csiServiceDemographic.criticalServiceDescription"
           placeholder="{{t('critical service description')}}" (change)="update()" />
       </div>
-      <div class="form-group">
-        <label for="itIcsName">Name of IT/ICS System (supporting the Critical Service)</label>
+      <div>
+        <label for="itIcsName" class="form-label">Name of IT/ICS System (supporting the Critical Service)</label>
         <input [ngClass]="{ 'alert-danger': !csiServiceDemographic.itIcsName && showErrors() }" class="form-control"
           tabindex="0" type="text" maxlength="50" name="itIcsName" id="itIcsName"
           [(ngModel)]="csiServiceDemographic.itIcsName"
           placeholder="Name of IT/ICS System (supporting the Critical Service)" (change)="update()" />
       </div>
-      <div class="form-group">
-        <label class="mb-1" for="multisiteService">Multi-site Service?</label>
+      <div>
+        <label class="form-label" for="multisiteService">Multi-site Service?</label>
         <div class="btn-group btn-group-toggle d-block mb-2" id="multisiteService" data-toggle="buttons" ngbRadioGroup>
           <label ngbButtonLabel class="btn btn-level border-2 mb-1" [class.active]="csiServiceDemographic.multiSite">
-            <input ngbButton type="radio" autocomplete="off" name="multisiteService"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="multisiteService"
               [(ngModel)]="csiServiceDemographic.multiSite"
               (change)="csiServiceDemographic.multiSiteDescription = null; update()" [value]="true" />Yes</label>
           <label ngbButtonLabel class="btn btn-level border-2 mb-1" [class.active]="!csiServiceDemographic.multiSite">
-            <input ngbButton type="radio" autocomplete="off" name="multisiteService"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="multisiteService"
               [(ngModel)]="csiServiceDemographic.multiSite"
               (change)="csiServiceDemographic.multiSiteDescription = null; update()" [value]="false" />No</label>
         </div>
@@ -70,15 +70,15 @@ <h4>{{t('titles.service demographics')}}</h4>
       </div>
     </ng-container>
     <div class="mb-3">
-      <div class="form-group">
-        <label class="mb-1" for="budgetBasis">What is the basis of the cybersecurity budget for this Critical
+      <div>
+        <label class="form-label" for="budgetBasis">What is the basis of the cybersecurity budget for this Critical
           Service?</label>
         <div class="btn-group btn-group-toggle d-block button-container" id="budgetBasis" data-toggle="buttons"
           ngbRadioGroup>
           <label ngbButtonLabel class="btn btn-level border-2 mb-1" *ngFor="let budgetB of budgetBasisList"
             [class.active]="budgetB.budget_Basis === csiServiceDemographic.budgetBasis"
             [ngClass]="{ 'alert-danger': !csiServiceDemographic.budgetBasis && showErrors() }">
-            <input ngbButton type="radio" autocomplete="off" name="budgetBasis"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="budgetBasis"
               [(ngModel)]="csiServiceDemographic.budgetBasis" (change)="update()" [value]="budgetB.budget_Basis" />
             {{ budgetB.budget_Basis }}
           </label>
@@ -86,8 +86,8 @@ <h4>{{t('titles.service demographics')}}</h4>
       </div>
     </div>
     <div class="mb-3">
-      <div class="form-group">
-        <label class="mb-1" for="totalITStaff1">Total # of IT/ICS management and staff (i.e., technologists) assigned
+      <div>
+        <label class="form-label" for="totalITStaff1">Total # of IT/ICS management and staff (i.e., technologists) assigned
           and/or dedicated to the Critical
           Service?</label>
         <div class="btn-group btn-group-toggle d-block button-container" id="totalITStaff1" data-toggle="buttons"
@@ -95,7 +95,7 @@ <h4>{{t('titles.service demographics')}}</h4>
           <label ngbButtonLabel class="btn btn-level mb-1" *ngFor="let totalITStaffItem of itIcsStaffCountList"
             [class.active]="totalITStaffItem.staff_Count === csiServiceDemographic.itIcsStaffCount"
             [ngClass]="{ 'alert-danger': !csiServiceDemographic.itIcsStaffCount && showErrors() }">
-            <input ngbButton type="radio" autocomplete="off" name="totalITStaff1"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="totalITStaff1"
               [(ngModel)]="csiServiceDemographic.itIcsStaffCount" (change)="update()"
               [value]="totalITStaffItem.staff_Count" />
             {{ totalITStaffItem.staff_Count }}
@@ -104,8 +104,8 @@ <h4>{{t('titles.service demographics')}}</h4>
       </div>
     </div>
     <div class="mb-3">
-      <div class="form-group">
-        <label class="mb-1" for="totalITStaff2">Total # of IT/ICS cybersecurity management and staff (i.e.,
+      <div>
+        <label class="form-label" for="totalITStaff2">Total # of IT/ICS cybersecurity management and staff (i.e.,
           technologists) assigned and/or dedicated to the
           Critical Service?</label>
         <div class="btn-group btn-group-toggle d-block button-container" id="totalITStaff2" data-toggle="buttons"
@@ -114,7 +114,7 @@ <h4>{{t('titles.service demographics')}}</h4>
             *ngFor="let totalITStaffItem of cyberSecurityItIcsStaffCountList"
             [class.active]="totalITStaffItem.staff_Count === csiServiceDemographic.cybersecurityItIcsStaffCount"
             [ngClass]="{ 'alert-danger': !csiServiceDemographic.cybersecurityItIcsStaffCount && showErrors() }">
-            <input ngbButton type="radio" autocomplete="off" name="totalITStaff2"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="totalITStaff2"
               [(ngModel)]="csiServiceDemographic.cybersecurityItIcsStaffCount" (change)="update()"
               [value]="totalITStaffItem.staff_Count" />
             {{ totalITStaffItem.staff_Count }}
@@ -123,8 +123,8 @@ <h4>{{t('titles.service demographics')}}</h4>
       </div>
     </div>
     <div class="mb-3">
-      <div class="form-group">
-        <label class="mb-1" for="authorizedOrganizationalUserCount">How many authorized, organizational users access and
+      <div>
+        <label class="form-label" for="authorizedOrganizationalUserCount">How many authorized, organizational users access and
           interact (i.e., operate, perform data entry, etc., as end
           users) with the Critical Service?</label>
         <div class="btn-group btn-group-toggle d-block button-container" id="authorizedOrganizationalUserCount"
@@ -133,7 +133,7 @@ <h4>{{t('titles.service demographics')}}</h4>
             *ngFor="let authorizedOrganizationalUserCountItem of authorizedOrganizationalUserCountList" [class.active]="
             authorizedOrganizationalUserCountItem.user_Count === csiServiceDemographic.authorizedOrganizationalUserCount
           " [ngClass]="{ 'alert-danger': !csiServiceDemographic.authorizedOrganizationalUserCount && showErrors() }">
-            <input ngbButton type="radio" autocomplete="off" name="authorizedOrganizationalUserCount"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="authorizedOrganizationalUserCount"
               [(ngModel)]="csiServiceDemographic.authorizedOrganizationalUserCount" (ngModelChange)="update()"
               [value]="authorizedOrganizationalUserCountItem.user_Count" />
             {{ authorizedOrganizationalUserCountItem.user_Count }}
@@ -142,8 +142,8 @@ <h4>{{t('titles.service demographics')}}</h4>
       </div>
     </div>
     <div class="mb-3">
-      <div class="form-group">
-        <label class="mb-1" for="authorizedNonOrganizationUserCount">How many authorized, non-organizational users
+      <div>
+        <label class="form-label" for="authorizedNonOrganizationUserCount">How many authorized, non-organizational users
           access and interact (i.e., operate, perform data entry, etc., as
           end users) with the Critical Service?</label>
         <div class="btn-group btn-group-toggle d-block button-container" id="authorizedNonOrganizationUserCount"
@@ -155,7 +155,7 @@ <h4>{{t('titles.service demographics')}}</h4>
             csiServiceDemographic.authorizedNonOrganizationalUserCount
           "
             [ngClass]="{ 'alert-danger': !csiServiceDemographic.authorizedNonOrganizationalUserCount && showErrors() }">
-            <input ngbButton type="radio" autocomplete="off" name="authorizedNonOrganizationUserCount"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="authorizedNonOrganizationUserCount"
               [(ngModel)]="csiServiceDemographic.authorizedNonOrganizationalUserCount" (change)="update()"
               [value]="authorizedNonOrganizationalUserCountItem.user_Count" />
             {{ authorizedNonOrganizationalUserCountItem.user_Count }}
@@ -164,8 +164,8 @@ <h4>{{t('titles.service demographics')}}</h4>
       </div>
     </div>
     <div class="mb-3">
-      <div class="form-group">
-        <label class="mb-1" for="customersCount">How many customers (i.e., individuals and/ or organizations) benefit
+      <div>
+        <label class="form-label" for="customersCount">How many customers (i.e., individuals and/ or organizations) benefit
           from, depend on, and/or otherwise make use
           of the Critical Service?</label>
         <div class="btn-group btn-group-toggle d-block button-container" id="customersCount" data-toggle="buttons"
@@ -173,7 +173,7 @@ <h4>{{t('titles.service demographics')}}</h4>
           <label ngbButtonLabel class="btn btn-level mb-1" *ngFor="let customersCountItem of customersCountList"
             [class.active]="customersCountItem.customer_Count === csiServiceDemographic.customersCount"
             [ngClass]="{ 'alert-danger': !csiServiceDemographic.customersCount && showErrors() }">
-            <input ngbButton type="radio" autocomplete="off" name="customersCount" (change)="update()"
+            <input ngbButton type="radio" class="btn-check" autocomplete="off" name="customersCount" (change)="update()"
               [(ngModel)]="csiServiceDemographic.customersCount" [value]="customersCountItem.customer_Count" />
             {{ customersCountItem.customer_Count }}
           </label>
diff --git a/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-ise-summary.component.html b/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-ise-summary.component.html
index 9e9a769daf..08612143f3 100644
--- a/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-ise-summary.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-ise-summary.component.html
@@ -27,12 +27,12 @@ <h4>Exam Profile Summary</h4>
 
         <div class="d-table w-100">
             <div class="d-table-row">
-                <div class="d-table-cell pl-3 pb-3">
+                <div class="d-table-cell ps-3 pb-3">
                     Overall Exam Profile Level: <span class="blue-text font-weight-bold">{{ overrideLabel }}</span>
                 </div>
             </div>
             <div class="d-table-row">
-                <div class="d-table-cell pl-3 align-top">
+                <div class="d-table-cell ps-3 align-top">
                     Manual Override
                 </div>
 
@@ -49,7 +49,7 @@ <h4>Exam Profile Summary</h4>
 
             <!--<div class="d-table-row"
                 *ngIf="!!acetDashboard?.override && acetDashboard?.override != '' && acetDashboard?.override !== 0">
-                <div class="d-table-cell pl-3 align-top">
+                <div class="d-table-cell ps-3 align-top">
                     Override Reason
                 </div>
                 <div class="d-table-cell align-top">
diff --git a/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-summary.component.html b/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-summary.component.html
index 0b1ed97b94..8b4ac99b96 100644
--- a/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-summary.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/irp-summary/irp-summary.component.html
@@ -28,7 +28,7 @@ <h4>{{ t('inherent risk profile summary') }}</h4>
 
         <div *ngIf="!layoutSvc.hp" class="d-table w-100">
             <div class="d-table-row">
-                <div class="d-table-cell pl-3 pb-3">
+                <div class="d-table-cell ps-3 pb-3">
                     <!-- below is .substring(4) to allow Transloco to remain DRY (ex. "1 - Least" turns into "Least") -->
                     {{ t('override risk level is') }}
                     <span class="blue-text font-weight-bold">
@@ -37,7 +37,7 @@ <h4>{{ t('inherent risk profile summary') }}</h4>
                 </div>
             </div>
             <div class="d-table-row">
-                <div class="d-table-cell pl-3 align-top">
+                <div class="d-table-cell ps-3 align-top">
                     {{ t('override risk level') }}
                 </div>
                 <div class="d-table-cell align-top pb-3">
@@ -54,7 +54,7 @@ <h4>{{ t('inherent risk profile summary') }}</h4>
             </div>
             <div class="d-table-row"
                 *ngIf="!!acetDashboard?.override && acetDashboard?.override != '' && acetDashboard?.override !== 0">
-                <div class="d-table-cell pl-3 align-top">
+                <div class="d-table-cell ps-3 align-top">
                     {{ t('override reason') }}
                 </div>
                 <div class="d-table-cell align-top">
@@ -65,7 +65,7 @@ <h4>{{ t('inherent risk profile summary') }}</h4>
             </div>
         </div>
 
-        <div *ngIf="layoutSvc.hp" class="ml-3 w-100">
+        <div *ngIf="layoutSvc.hp" class="ms-3 w-100">
             <div class="pb-3">
                 {{ t('override risk level is') }} &quot;<span class="blue-text font-weight-bold">{{
                     t(overrideLabel).toLowerCase() }}&quot;</span>
diff --git a/CSETWebNg/src/app/assessment/prepare/irp/irp-tabs/irp-tabs.component.html b/CSETWebNg/src/app/assessment/prepare/irp/irp-tabs/irp-tabs.component.html
index b3be36df77..a9480d4ed5 100644
--- a/CSETWebNg/src/app/assessment/prepare/irp/irp-tabs/irp-tabs.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/irp/irp-tabs/irp-tabs.component.html
@@ -22,7 +22,7 @@
 -------------------------->
 <div *transloco="let t; read: 'tooltip'" class="mb-5">
 
-    <button class="extras-button cursor-pointer ml-3" [class.active]="mode == 'DETAIL'" (click)="toggleExtras('DETAIL')"
+    <button class="extras-button cursor-pointer ms-3" [class.active]="mode == 'DETAIL'" (click)="toggleExtras('DETAIL')"
         [matTooltip]="t('risk description')" matTooltipPosition="above">
         <svg style="height: 31px; margin-left: 4px; margin-right: 4px" viewBox="0 0 21 28">
             <path fill="#044" stroke="transparent" stroke-width="0" transform="scale(.75)"
@@ -55,12 +55,12 @@
     <div class="question-extras" [class.extras-open]="expanded">
 
         <div *ngIf="mode == 'DETAIL'">
-            <div class="mb-4 ml-3" [innerHTML]="assessSvc.formatLinebreaks(irp.descriptionComment)">
+            <div class="mb-4 ms-3" [innerHTML]="assessSvc.formatLinebreaks(irp.descriptionComment)">
             </div>
         </div>
 
         <div *ngIf="mode == 'APPROACH'">
-            <div class="mb-4 ml-3">{{ irp.validation_Approach }}
+            <div class="mb-4 ms-3">{{ irp.validation_Approach }}
             </div>
         </div>
 
diff --git a/CSETWebNg/src/app/assessment/prepare/irp/irp.component.html b/CSETWebNg/src/app/assessment/prepare/irp/irp.component.html
index 623ba92236..4eefa9205c 100644
--- a/CSETWebNg/src/app/assessment/prepare/irp/irp.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/irp/irp.component.html
@@ -42,7 +42,7 @@ <h4 class="irp-header"> {{ iHeader.header }}</h4>
         <div *ngFor="let irp of iHeader.irpList" class="mb-4">
             <div *ngIf="(irp.risk_Type === 'IRP')">
                 <div class="lead mb-3">{{ irp.item_Number }}. {{ irp.description }}</div>
-                <label class="ml-1 font-weight-bold">{{ t('irp.risk levels') }}</label>
+                <label class="ms-1 font-weight-bold">{{ t('irp.risk levels') }}</label>
                 <div class="mb-4">
                     <div (click)="setResponse(irp, 1);" (keyup.enter)="setResponse(irp, 1);" tabindex="0"
                         class="irp-risk cursor-pointer" [ngClass]="{'irp-selected': irp.response==1}">
diff --git a/CSETWebNg/src/app/assessment/prepare/maturity/config-cis/config-cis.component.html b/CSETWebNg/src/app/assessment/prepare/maturity/config-cis/config-cis.component.html
index 23476e8662..29f7b80ba8 100644
--- a/CSETWebNg/src/app/assessment/prepare/maturity/config-cis/config-cis.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/maturity/config-cis/config-cis.component.html
@@ -72,7 +72,7 @@ <h4>Import CIS Answers</h4>
         </p>
 
         <div class="d-flex flex-row">
-            <select class="form-control mr-1" #import>
+            <select class="form-control me-1" #import>
                 <option value="">-- Select Survey to Import --</option>
                 <option *ngFor="let c of importSourceCandidates" [value]="c.id">
                     {{c.assessmentName}} [{{c.assessmentDate | localizeDate}}]
diff --git a/CSETWebNg/src/app/assessment/prepare/maturity/model-select/model-select.component.html b/CSETWebNg/src/app/assessment/prepare/maturity/model-select/model-select.component.html
index 4340cf3922..58e7cd058e 100644
--- a/CSETWebNg/src/app/assessment/prepare/maturity/model-select/model-select.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/maturity/model-select/model-select.component.html
@@ -31,7 +31,7 @@ <h4 class="wrap-text">Maturity Models</h4>
     <h4>{{getModelTitle('ACET')}}</h4>
     <div class="d-flex flex-row">
       <div [innerHTML]="getModelDescription('ACET') | safe"></div>
-      <div style="max-width: 50%; min-width: 10rem" class="text-center pl-3">
+      <div style="max-width: 50%; min-width: 10rem" class="text-center ps-3">
         <img src="assets/images/ACET/ACET_shield_only.png" alt="acet" style="width: 100%" />
       </div>
     </div>
@@ -56,7 +56,7 @@ <h4>{{getModelTitle('CMMC2')}}</h4>
     </div>
     <div class="d-flex flex-row">
       <div style="max-width: 100%" [innerHTML]="getModelDescription('CMMC2') | safe"></div>
-      <div style="max-width: 50%" class="text-center pl-3">
+      <div style="max-width: 50%" class="text-center ps-3">
         <img src="assets/images/CMMC/Levels_cmmc2_200px.png" alt="CMMC levels" style="height: 210px; width: auto" />
       </div>
     </div>
@@ -68,7 +68,7 @@ <h4>{{getModelTitle('CMMC2')}}</h4>
     <h4>{{getModelTitle('CRR')}}</h4>
     <div class="d-flex flex-row">
       <div class="w-100" [innerHTML]="getModelDescription('CRR') | safe"></div>
-      <div style="max-width: 50%" class="text-center pl-3">
+      <div style="max-width: 50%" class="text-center ps-3">
         <img src="assets/images/CRR/CRR_logo.png" alt="CRR logo" style="width: 100%" />
       </div>
     </div>
@@ -79,7 +79,7 @@ <h4>{{getModelTitle('CRR')}}</h4>
     <h4>{{getModelTitle('EDM')}}</h4>
     <div class="d-flex flex-row">
       <div class="w-100" [innerHTML]="getModelDescription('EDM') | safe"></div>
-      <div style="max-width: 50%" class="text-center pl-3">
+      <div style="max-width: 50%" class="text-center ps-3">
         <img src="assets/images/EDM/EDM_logo.png" alt="EDM logo" style="width: 100%" />
       </div>
     </div>
@@ -94,7 +94,7 @@ <h4 class="wrap-text">Best Practices and Critical Infrastructure/Industry</h4>
     <h4>{{getModelTitle('CIS')}}</h4>
     <div class="d-flex flex-row">
       <div style="max-width: 100%" [innerHTML]="getModelDescription('CIS') | safe"></div>
-      <div style="max-width: 50%" class="text-center pl-3">
+      <div style="max-width: 50%" class="text-center ps-3">
         <img src="assets/images/CIS/CISA_Infrastructure_Security.png" alt="Cyber Infrastructure Survey logo"
           style="height: 102px; width: auto" />
       </div>
diff --git a/CSETWebNg/src/app/assessment/prepare/sals/sal-gen/sal-gen.component.html b/CSETWebNg/src/app/assessment/prepare/sals/sal-gen/sal-gen.component.html
index 3f77670cdc..45202b98e7 100644
--- a/CSETWebNg/src/app/assessment/prepare/sals/sal-gen/sal-gen.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/sals/sal-gen/sal-gen.component.html
@@ -28,7 +28,7 @@ <h4>{{t('titles.sal.overall sal')}}</h4>
                 <label [attr.csetid]="'OverallSAL' + level.value" class="btn btn-level btn-rounded form-check-label"
                     [class.active]="level.value === this.salsSvc.selectedSAL?.selected_Sal_Level"
                     (click)="saveLevel(level.value,'std')">
-                    <input class="form-check-input" tabindex="0" type="radio" autocomplete="off" name="sal_main"
+                    <input class="btn-check" tabindex="0" type="radio" autocomplete="off" name="sal_main"
                         [checked]="level.value === this.salsSvc.selectedSAL?.selected_Sal_Level">
                     {{t('titles.sal.level.' + level.value.toLowerCase())}}
                 </label>
diff --git a/CSETWebNg/src/app/assessment/prepare/sals/sal-nist/sal-nist.component.html b/CSETWebNg/src/app/assessment/prepare/sals/sal-nist/sal-nist.component.html
index 0ffaa18f47..50ba83feb0 100644
--- a/CSETWebNg/src/app/assessment/prepare/sals/sal-nist/sal-nist.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/sals/sal-nist/sal-nist.component.html
@@ -30,7 +30,7 @@ <h4>{{t('titles.sal.overall sal')}}</h4>
           <label [attr.csetid]="'OverallSAL' + level.value" class="btn btn-level btn-rounded form-check-label"
             [class.active]="level.value === this.salsSvc.selectedSAL?.selected_Sal_Level"
             (click)="saveLevel(level.value,'std')">
-            <input class="form-check-input" tabindex="0" type="radio" autocomplete="off" name="sal_main"
+            <input class="btn-check" tabindex="0" type="radio" autocomplete="off" name="sal_main"
               [checked]="level.value === this.salsSvc.selectedSAL?.selected_Sal_Level"> {{t('titles.sal.level.' +
             level.value.toLowerCase())}}
           </label>
@@ -48,7 +48,7 @@ <h4>{{t('titles.sal.confidentiality')}}</h4>
           <ng-template ngFor let-level [ngForOf]="salsSvc.levels">
             <label [attr.csetid]="'Confidentiality' + level.value" class="btn btn-level btn-rounded form-check-label"
               [class.active]="level.value === this.salsSvc.selectedSAL?.cLevel" (click)="saveLevel(level.value,'C')">
-              <input class="form-check-input" type="radio" autocomplete="off" name="sal_confidentiality"
+              <input class="btn-check" type="radio" autocomplete="off" name="sal_confidentiality"
                 [checked]="level.value === this.salsSvc.selectedSAL?.cLevel"> {{t('titles.sal.level.' +
               level.value.toLowerCase())}}
             </label>
@@ -67,7 +67,7 @@ <h4>{{t('titles.sal.integrity')}}</h4>
           <ng-template ngFor let-level [ngForOf]="salsSvc.levels">
             <label [attr.csetid]="'Integrity' + level.value" class="btn btn-level btn-rounded form-check-label"
               [class.active]="level.value === this.salsSvc.selectedSAL?.iLevel" (click)="saveLevel(level.value,'I')">
-              <input class="form-check-input" type="radio" tabindex="0" autocomplete="off" name="sal_integrity"
+              <input class="btn-check" type="radio" tabindex="0" autocomplete="off" name="sal_integrity"
                 [checked]="level.value === this.salsSvc.selectedSAL?.iLevel"> {{t('titles.sal.level.' +
               level.value.toLowerCase())}}
             </label>
@@ -86,7 +86,7 @@ <h4>{{t('titles.sal.availability')}}</h4>
           <ng-template ngFor let-level [ngForOf]="salsSvc.levels">
             <label [attr.csetid]="'Availability' + level.value" class="btn btn-level btn-rounded form-check-label"
               [class.active]="level.value === this.salsSvc.selectedSAL?.aLevel" (click)="saveLevel(level.value,'A')">
-              <input class="form-check-input" type="radio" tabindex="0" autocomplete="off" name="sal_availability"
+              <input class="btn-check" type="radio" tabindex="0" autocomplete="off" name="sal_availability"
                 [checked]="level.value === this.salsSvc.selectedSAL?.aLevel"> {{t('titles.sal.level.' +
               level.value.toLowerCase())}}
             </label>
@@ -103,16 +103,16 @@ <h4>{{t('titles.sal.availability')}}</h4>
       <div class="fips-reference">
         <a href="{{configSvc.docUrl}}ApplicationDocuments/FIPS199Language.html" tabindex="0" rel="noopener noreferrer"
           target="_blank">
-          <i class="icon icon-openbookicon vmiddle mr-1"></i>FIPS 199 SAL Selection Guidance</a>
+          <i class="icon icon-openbookicon vmiddle me-1"></i>FIPS 199 SAL Selection Guidance</a>
       </div>
       <p>{{t('titles.sal.nist.fips other guides')}}</p>
       <div class="fips-reference">
         <a href="{{configSvc.apiUrl}}library/doc/511" tabindex="0" rel="noopener noreferrer" target="_blank">
-          <i class="icon icon-openbookicon vmiddle mr-1"></i>FIPS 199</a>
+          <i class="icon icon-openbookicon vmiddle me-1"></i>FIPS 199</a>
         <a href="{{configSvc.apiUrl}}library/doc/2081" tabindex="0" rel="noopener noreferrer" target="_blank">
-          <i class="icon icon-openbookicon vmiddle mr-1"></i>NIST SP800-60 Vol I</a>
+          <i class="icon icon-openbookicon vmiddle me-1"></i>NIST SP800-60 Vol I</a>
         <a href="{{configSvc.apiUrl}}library/doc/2116" tabindex="0" rel="noopener noreferrer" target="_blank">
-          <i class="icon icon-openbookicon vmiddle mr-1"></i>NIST SP800-60 Vol II</a>
+          <i class="icon icon-openbookicon vmiddle me-1"></i>NIST SP800-60 Vol II</a>
       </div>
     </div>
   </div>
@@ -179,13 +179,13 @@ <h4>{{t('titles.sal.nist.answer questions')}}</h4>
             <div class="btn-group btn-group-toggle" style="white-space: nowrap" data-toggle="buttons">
               <label [attr.csetid]="question.question_Text + 'Yes'" class="btn btn-level btn-rounded form-check-label"
                 [class.active]="question.question_Answer === 'Yes'" (click)="saveQuestionChanged(question,'Yes')">
-                <input class="form-check-input" type="radio" autocomplete="off"
+                <input class="btn-check" type="radio" autocomplete="off"
                   name="options{{question.question_Number}}"
                   [checked]="question.question_Answer === 'Yes'">{{t('answer-options.labels.yes')}}
               </label>
               <label [attr.csetid]="question.question_Text + 'No'" class="btn btn-level btn-rounded form-check-label"
                 [class.active]="question.question_Answer === 'No'" (click)="saveQuestionChanged(question,'No')">
-                <input class="form-check-input" type="radio" autocomplete="off"
+                <input class="btn-check" type="radio" autocomplete="off"
                   name="options{{question.question_Number}}"
                   [checked]="question.question_Answer === 'No'">{{t('answer-options.labels.no')}}
               </label>
diff --git a/CSETWebNg/src/app/assessment/prepare/sals/sal-simple/sal-simple.component.html b/CSETWebNg/src/app/assessment/prepare/sals/sal-simple/sal-simple.component.html
index 40691c1124..7ff6fda7c7 100644
--- a/CSETWebNg/src/app/assessment/prepare/sals/sal-simple/sal-simple.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/sals/sal-simple/sal-simple.component.html
@@ -29,7 +29,7 @@ <h4>{{t('titles.sal.overall sal')}}</h4>
           [class.active]="level.value === this.salsSvc.selectedSAL?.selected_Sal_Level"
           (click)="saveLevel(level.value,'std')">
 
-          <input class="form-check-input" tabindex="0" type="radio" autocomplete="off" name="sal_main"
+          <input class="btn-check" tabindex="0" type="radio" autocomplete="off" name="sal_main"
             [checked]="level.value === this.salsSvc.selectedSAL?.selected_Sal_Level">
           {{t('titles.sal.level.' + level.value.toLowerCase())}}
         </label>
@@ -46,7 +46,7 @@ <h4>{{t('titles.sal.confidentiality')}}</h4>
       <ng-template ngFor let-level [ngForOf]="salsSvc.levels">
         <label [attr.csetid]="'Confidentiality' + level.value" class="btn btn-level btn-rounded form-check-label"
           [class.active]="level.value === this.salsSvc.selectedSAL?.cLevel" (click)="saveLevel(level.value,'C')">
-          <input class="form-check-input" tabindex="0" type="radio" autocomplete="off" name="sal_confidentiality"
+          <input class="btn-check" tabindex="0" type="radio" autocomplete="off" name="sal_confidentiality"
             [checked]="level.value === this.salsSvc.selectedSAL?.cLevel">
           {{t('titles.sal.level.' + level.value.toLowerCase())}}
         </label>
@@ -63,7 +63,7 @@ <h4>{{t('titles.sal.integrity')}}</h4>
       <ng-template ngFor let-level [ngForOf]="salsSvc.levels">
         <label [attr.csetid]="'Integrity' + level.value" class="btn btn-level btn-rounded form-check-label"
           [class.active]="level.value === this.salsSvc.selectedSAL?.iLevel" (click)="saveLevel(level.value,'I')">
-          <input class="form-check-input" type="radio" tabindex="0" autocomplete="off" name="sal_integrity"
+          <input class="btn-check" type="radio" tabindex="0" autocomplete="off" name="sal_integrity"
             [checked]="level.value === this.salsSvc.selectedSAL?.iLevel">
           {{t('titles.sal.level.' + level.value.toLowerCase())}}
         </label>
@@ -80,7 +80,7 @@ <h4>{{t('titles.sal.availability')}}</h4>
       <ng-template ngFor let-level [ngForOf]="salsSvc.levels">
         <label [attr.csetid]="'Availability' + level.value" class="btn btn-level btn-rounded form-check-label"
           [class.active]="level.value === this.salsSvc.selectedSAL?.aLevel" (click)="saveLevel(level.value,'A')">
-          <input class="form-check-input" type="radio" tabindex="0" autocomplete="off" name="sal_availability"
+          <input class="btn-check" type="radio" tabindex="0" autocomplete="off" name="sal_availability"
             [checked]="level.value === this.salsSvc.selectedSAL?.aLevel">
           {{t('titles.sal.level.' + level.value.toLowerCase())}}
         </label>
diff --git a/CSETWebNg/src/app/assessment/prepare/sals/sals.component.html b/CSETWebNg/src/app/assessment/prepare/sals/sals.component.html
index edb8dccd34..47c7ebdf14 100644
--- a/CSETWebNg/src/app/assessment/prepare/sals/sals.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/sals/sals.component.html
@@ -23,7 +23,7 @@
 <ng-container *transloco="let t">
   <div class="white-panel d-flex flex-column justify-content-start flex-11a">
     <h3 class="mb-3">{{t('titles.sal.security assurance level (sal)')}}</h3>
-    <div class="mr-0 d-flex flex-column flex-00a">
+    <div class="me-0 d-flex flex-column flex-00a">
       <div class="mb-3">
         {{t('titles.sal.sal intro1')}}
         {{t('titles.sal.sal intro2')}}
@@ -45,20 +45,20 @@ <h3 class="mb-3">{{t('titles.sal.security assurance level (sal)')}}</h3>
         </div>
         <div class="d-flex flex-nowrap justify-content-center flex-11a mb-2" *ngIf="selectedMethodology != 'GENERAL'">
 
-          <div [class.ml-2]="!layoutSvc.hp"
+          <div [class.ms-2]="!layoutSvc.hp"
             class="p-2 quick-info-container d-flex justify-content-center flex-column flex-11a">
             <div class="ws-no-wrap d-flex justify-content-center align-items-center flex-11a">{{t('titles.sal.confidentiality')}}</div>
             <div class="p-2 quick-info-stats-container mt-1 d-flex justify-content-center flex-11a">
               {{ salsSvc.selectedSAL?.cLevel != null ? t('titles.sal.level.' + salsSvc.selectedSAL.cLevel.toLowerCase()) : '' }}</div>
           </div>
 
-          <div class="ml-2 p-2 quick-info-container d-flex flex-column justify-content-center flex-11a">
+          <div class="ms-2 p-2 quick-info-container d-flex flex-column justify-content-center flex-11a">
             <div class="ws-no-wrap d-flex justify-content-center align-items-center">{{t('titles.sal.integrity')}}</div>
             <div class="p-2 quick-info-stats-container mt-1 d-flex justify-content-center flex-11a">
               {{ salsSvc.selectedSAL?.iLevel != null ? t('titles.sal.level.' + salsSvc.selectedSAL.iLevel.toLowerCase()) : '' }}</div>
           </div>
 
-          <div class="ml-2 p-2 quick-info-container d-flex flex-column justify-content-center flex-11a">
+          <div class="ms-2 p-2 quick-info-container d-flex flex-column justify-content-center flex-11a">
             <div class="ws-no-wrap d-flex justify-content-center align-items-center">{{t('titles.sal.availability')}}</div>
             <div class="p-2 quick-info-stats-container mt-1 d-flex justify-content-center flex-11a">
               {{ salsSvc.selectedSAL?.aLevel != null ? t('titles.sal.level.' + salsSvc.selectedSAL.aLevel.toLowerCase()) : '' }}</div>
@@ -73,25 +73,25 @@ <h3 class="mb-3">{{t('titles.sal.security assurance level (sal)')}}</h3>
       <div class="btn-group-toggle" data-toggle="buttons">
         <label csetid="SimpleSalLevelSelector" class="btn btn-sal-select btn-rounded form-check-label"
           [class.active]="selectedMethodology === 'Simple'" (click)="changeMethodology('Simple')">
-          <input class="form-check-input" type="radio" autocomplete="off" name="sal_type_selector"
+          <input class="btn-check" type="radio" autocomplete="off" name="sal_type_selector"
             [checked]="selectedMethodology === 'Simple'">{{t('titles.sal.simple')}}
         </label>
 
         <label csetid="GeneralRiskSalLevelSelector" class="btn btn-sal-select btn-rounded form-check-label"
           [class.active]="selectedMethodology === 'GENERAL'" (click)="changeMethodology('GENERAL')">
-          <input class="form-check-input" type="radio" autocomplete="off" name="sal_type_selector"
+          <input class="btn-check" type="radio" autocomplete="off" name="sal_type_selector"
             [checked]="selectedMethodology === 'GENERAL'">{{t('titles.sal.general risk based')}}
         </label>
 
         <label csetid="NistSalLevelSelector" class="btn btn-sal-select btn-rounded form-check-label"
           [class.active]="selectedMethodology === 'NIST'" (click)="changeMethodology('NIST')">
-          <input class="form-check-input" type="radio" autocomplete="off" name="sal_type_selector"
+          <input class="btn-check" type="radio" autocomplete="off" name="sal_type_selector"
             [checked]="selectedMethodology === 'NIST'">{{t('titles.sal.nist 60 fips 199')}}
         </label>
       </div>
       <hr class="w-100 hr-sal mt-1 mb-5" />
 
-      <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 [ngSwitch]="selectedMethodology" class="d-flex flex-column justify-content-start flex-00a">
           <app-sal-simple *ngSwitchCase="'Simple'"></app-sal-simple>
           <app-sal-gen *ngSwitchCase="'GENERAL'"></app-sal-gen>
diff --git a/CSETWebNg/src/app/assessment/prepare/standards/awwa-standard/awwa-standard.component.html b/CSETWebNg/src/app/assessment/prepare/standards/awwa-standard/awwa-standard.component.html
index aed29790a5..10cf566d45 100644
--- a/CSETWebNg/src/app/assessment/prepare/standards/awwa-standard/awwa-standard.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/standards/awwa-standard/awwa-standard.component.html
@@ -25,7 +25,7 @@
     <span>AWWA Cybersecurity Tool</span>
   </div>
 
-  <mat-dialog-content class="p-3 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
+  <mat-dialog-content class="p-3 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
     <div *ngIf="importStatus === 1">
       <div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}}</div>
       <div class="mb-3">
@@ -40,7 +40,7 @@
             <input id="awwaUpload" type="file" accept=".csv,.xls,.xlsx" (change)="fileSelectAwwa($event)"
               class="d-none" />
           </td>
-          <td class="pl-3 py-2">
+          <td class="ps-3 py-2">
             I'm ready to upload an AWWA Cyber Tool sheet.
           </td>
         </tr>
@@ -50,7 +50,7 @@
               No
             </button>
           </td>
-          <td class="pl-3 py-2">
+          <td class="ps-3 py-2">
             Clicking 'No' will take you to the AWWA site to complete the AWWA Cyber Tool sheet.
             <a href='{{awwaSvc.url}}' tabindex="0" target='_bank'>{{awwaSvc.url}}</a>
           </td>
@@ -61,7 +61,7 @@
               Continue Anyway
             </button>
           </td>
-          <td class="pl-3 py-2">
+          <td class="ps-3 py-2">
             This option will ask all questions related to the AWWA tool.
           </td>
         </tr>
diff --git a/CSETWebNg/src/app/assessment/prepare/standards/standards.component.html b/CSETWebNg/src/app/assessment/prepare/standards/standards.component.html
index 072c166d4a..3c9a248c08 100644
--- a/CSETWebNg/src/app/assessment/prepare/standards/standards.component.html
+++ b/CSETWebNg/src/app/assessment/prepare/standards/standards.component.html
@@ -24,7 +24,7 @@
   <h3 class="wrap-text">Cybersecurity Standards Selection</h3>
 
   <div class="d-flex flex-row align-items-start flex-00a">
-    <div class="mr-2 d-flex flex-column">
+    <div class="me-2 d-flex flex-column">
       <p class="m-0 mb-3">
         Select a standard from the list below to define the questions you will answer during the assessment. Standards
         in bold text are recommended based on your demographic information.
@@ -37,7 +37,7 @@ <h3 class="wrap-text">Cybersecurity Standards Selection</h3>
     </div>
 
     <div class="d-flex" [ngClass]="{'flex-row': !layoutSvc.hp, 'flex-column': layoutSvc.hp }">
-      <div class="quick-info-container p-2" [class.mr-2]="!layoutSvc.hp" [class.mb-2]="layoutSvc.hp">
+      <div class="quick-info-container p-2" [class.me-2]="!layoutSvc.hp" [class.mb-2]="layoutSvc.hp">
         <div class="text-nowrap text-center">Requirements</div>
         <div class="bgc-gray-50 c-gray-900 standards-stats mt-1">{{
           standards?.requirementCount }}</div>
diff --git a/CSETWebNg/src/app/assessment/questions/issues/issues.component.html b/CSETWebNg/src/app/assessment/questions/issues/issues.component.html
index 8741f7e898..92eab90e66 100644
--- a/CSETWebNg/src/app/assessment/questions/issues/issues.component.html
+++ b/CSETWebNg/src/app/assessment/questions/issues/issues.component.html
@@ -28,7 +28,7 @@
 
 <ng-template #mainContent>
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="mr-3 fs-base-6 cset-icons-light-bulb"></span>
+    <span class="me-3 fs-base-6 cset-icons-light-bulb"></span>
     <h2 style="color: white;">Issues</h2>
   </div>
 
diff --git a/CSETWebNg/src/app/assessment/questions/maturity-questions/maturity-questions.component.html b/CSETWebNg/src/app/assessment/questions/maturity-questions/maturity-questions.component.html
index 480b6cb962..daba554aef 100644
--- a/CSETWebNg/src/app/assessment/questions/maturity-questions/maturity-questions.component.html
+++ b/CSETWebNg/src/app/assessment/questions/maturity-questions/maturity-questions.component.html
@@ -25,7 +25,7 @@
   <div class="flex-column flex-wrap justify-content-between align-items-start flex-11a mb-4">
 
     <div class="d-flex flex-row flex-wrap sticky-sal w-100 justify-content-end align-items-start flex-11a pb-3">
-      <div class="mr-3 answered-count" *ngIf="!!groupings" matTooltip="{{t('tooltip.answered count')}}">
+      <div class="me-3 answered-count" *ngIf="!!groupings" matTooltip="{{t('tooltip.answered count')}}">
         {{ completionSvc.answeredCount }}/{{ completionSvc.totalCount }}
       </div>
       <div>
diff --git a/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/grouping-block-nested/grouping-block-nested.component.html b/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/grouping-block-nested/grouping-block-nested.component.html
index a0d4bdf5a3..c44771beb6 100644
--- a/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/grouping-block-nested/grouping-block-nested.component.html
+++ b/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/grouping-block-nested/grouping-block-nested.component.html
@@ -27,7 +27,7 @@ <h4 class="mb-3">{{title}}</h4>
     [innerHTML]="grouping.description"></div>
 </div>
 
-<div *ngFor="let g of grouping.groupings" class="pl-3 mb-5">
+<div *ngFor="let g of grouping.groupings" class="ps-3 mb-5">
   <app-grouping-block-nested [grouping]="g"></app-grouping-block-nested>
 </div>
 <div>
diff --git a/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/option-block-nested/option-block-nested.component.html b/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/option-block-nested/option-block-nested.component.html
index f1d31f7f76..f93971ab5a 100644
--- a/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/option-block-nested/option-block-nested.component.html
+++ b/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/option-block-nested/option-block-nested.component.html
@@ -21,8 +21,8 @@
   SOFTWARE.
 -------------------------->
 
-<div *ngFor="let o of optRadio" id="oo{{o.optionId}}" class="nested-option-block mb-1" [class.ml-2]="layoutSvc.hp"
-    [class.ml-4]="!layoutSvc.hp">
+<div *ngFor="let o of optRadio" id="oo{{o.optionId}}" class="nested-option-block mb-1" [class.ms-2]="layoutSvc.hp"
+    [class.ms-4]="!layoutSvc.hp">
     <input #rb class="radio-custom" type="radio" [name]="optionGroupName" [id]="optionGroupName + '-' + o.optionId"
         (click)="changeRadio(o, $event)" [checked]="o.selected"
         (keydown.Space)="catchSpace($event, optionGroupName + '-' + o.optionId)">
@@ -53,8 +53,8 @@
         <input *ngIf="o.hasAnswerText" type="text" [value]="o.answerText" (change)="changeText(o, $event)"
             class="form-control">
 
-        <div *ngIf="!!o.followups && o.followups.length > 0" class="mt-3" [class.ml-2]="layoutSvc.hp"
-            [class.ml-4]="!layoutSvc.hp">
+        <div *ngIf="!!o.followups && o.followups.length > 0" class="mt-3" [class.ms-2]="layoutSvc.hp"
+            [class.ms-4]="!layoutSvc.hp">
             <app-question-block-nested #questionBlock [questions]="o.followups"></app-question-block-nested>
         </div>
 
@@ -66,8 +66,8 @@
 
 
 
-<div *ngFor="let o of optCheckbox" id="oo{{o.optionId}}" class="nested-option-block mb-1" [class.ml-2]="layoutSvc.hp"
-    [class.ml-4]="!layoutSvc.hp">
+<div *ngFor="let o of optCheckbox" id="oo{{o.optionId}}" class="nested-option-block mb-1" [class.ms-2]="layoutSvc.hp"
+    [class.ms-4]="!layoutSvc.hp">
     <input #cb class="checkbox-custom" type="checkbox" [value]="o.optionId" [id]="optionGroupName + '-cb-' + o.optionId"
         (change)="changeCheckbox(o, $event, optCheckbox)" [checked]="o.selected"
         (keydown.Space)="catchSpace($event, optionGroupName + '-cb-' + o.optionId)">
@@ -85,7 +85,7 @@
         <input *ngIf="o.hasAnswerText" type="text" [value]="o.answerText" (change)="changeText(o, $event)"
             class="form-control my-2">
 
-        <div *ngIf="!!o.followups && o.followups.length > 0" class="ml-4 mt-3">
+        <div *ngIf="!!o.followups && o.followups.length > 0" class="ms-4 mt-3">
             <app-question-block-nested #questionBlock [questions]="o.followups"></app-question-block-nested>
         </div>
 
@@ -97,9 +97,9 @@
 
 
 
-<div *ngFor="let o of optOther" id="oo{{o.optionId}}" class="nested-option-block mb-1" [class.ml-2]="layoutSvc.hp"
-    [class.ml-4]="!layoutSvc.hp">
-    <input type="text" *ngIf="o.optionType == 'text-first'" class="form-control mr-1 mb-1" maxlength="100"
+<div *ngFor="let o of optOther" id="oo{{o.optionId}}" class="nested-option-block mb-1" [class.ms-2]="layoutSvc.hp"
+    [class.ms-4]="!layoutSvc.hp">
+    <input type="text" *ngIf="o.optionType == 'text-first'" class="form-control me-1 mb-1" maxlength="100"
         style="width: 6rem; display: inline" [value]="o.answerText" (change)="changeText(o, $event)">
 
     <span class="nested-option" [innerHTML]="o.optionText"></span>
diff --git a/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/question-block-nested/question-block-nested.component.html b/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/question-block-nested/question-block-nested.component.html
index ec586de08a..9304b298d2 100644
--- a/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/question-block-nested/question-block-nested.component.html
+++ b/CSETWebNg/src/app/assessment/questions/maturity-questions/nested/question-block-nested/question-block-nested.component.html
@@ -22,7 +22,7 @@
 -------------------------->
 <div *ngFor="let q of questionList" class="mb-5" id="mq{{q.questionId}}">
     <div class="d-flex flex-row">
-        <div *ngIf="q.displayNumber?.length > 0" class="font-weight-bold mr-4">
+        <div *ngIf="q.displayNumber?.length > 0" class="font-weight-bold me-4">
             {{ q.displayNumber }}
         </div>
         <div *ngIf="showQuestionLevel" class="question-mat-level-name">
@@ -34,14 +34,14 @@
             <span class="nested-question-text" [innerHTML]="q.questionText | safe: 'html'"></span>
         </span>
         <span class="align-top" (click)="openExtras(q)" matTooltip="Question Details">
-            <svg viewBox="0 0 30 30" class="ml-1 cursor-pointer" style="height: 31px; width: 45px; margin-top: 4px">
+            <svg viewBox="0 0 30 30" class="ms-1 cursor-pointer" style="height: 31px; width: 45px; margin-top: 4px">
                 <path fill="#044" stroke="transparent" stroke-width="0" transform="scale(.75)"
                     d="M18.879,29.328C17.64,29.934 16.341,30.24 14.986,30.24 14.044,30.24 13.424,29.824 13.125,28.99 12.927,28.434 13.014,27.26 13.386,25.472L15.071,17.634C15.214,16.934 15.287,16.422 15.287,16.09 15.287,15.614 15.063,15.364 14.615,15.336L13.088,15.228C12.989,15.05 12.945,14.794 12.958,14.466 12.972,14.134 13.039,13.892 13.164,13.74 15.756,13.402 17.941,13.236 19.718,13.236 20.239,13.236 20.499,13.506 20.499,14.044 20.499,14.24 20.462,14.516 20.384,14.868 20.308,15.22 20.206,15.686 20.077,16.27 19.949,16.85 19.846,17.31 19.772,17.65L18.119,25.136C17.758,26.69 17.807,27.464 18.263,27.464 18.49,27.464 18.877,27.294 19.429,26.954 19.981,26.612 20.487,26.19 20.948,25.682 21.171,25.682 21.391,25.802 21.608,26.042 21.825,26.286 21.971,26.518 22.045,26.74 21.175,27.856 20.121,28.718 18.879,29.328 M16.841,5.47C17.307,4.998 17.962,4.764 18.804,4.764 19.538,4.764 20.133,5.024 20.592,5.546 21.052,6.068 21.281,6.652 21.281,7.296 21.281,7.856 21.028,8.388 20.518,8.896 20.008,9.406 19.363,9.66 18.582,9.66 17.849,9.66 17.26,9.404 16.812,8.888 16.365,8.374 16.142,7.788 16.142,7.126 16.142,6.496 16.375,5.942 16.841,5.47 M17.5,0C7.835,0 0,7.834 0,17.5 0,27.164 7.835,35 17.5,35 27.166,35 35,27.164 35,17.5 35,7.834 27.166,0 17.5,0" />
                 <circle cx="27" cy="7" r="6" stroke="#fff" stroke-width="1" fill="#900" [style.display]="hasDetails(q)"
                     class="test" />
             </svg>
         </span>
-        <span *ngIf="q.failedIntegrityCheckOptions?.length" class="ml-1 fs-base-8 cset-icons-exclamation-triangle"
+        <span *ngIf="q.failedIntegrityCheckOptions?.length" class="ms-1 fs-base-8 cset-icons-exclamation-triangle"
             style="vertical-align: middle; color: #856404;"
             [matTooltip]="getIntegrityCheckErrors(q.failedIntegrityCheckOptions)"></span>
         <span *ngIf="showIdTag" class="debug-highlight">q:{{q.questionId}}</span>
@@ -58,7 +58,7 @@
         </div>
 
         <div *ngIf="q.questionType == 'min-hr-day'">
-            <input type="text" class="form-control mr-2" style="width: 6rem; display: inline" maxlength="5" #tsNumber
+            <input type="text" class="form-control me-2" style="width: 6rem; display: inline" maxlength="5" #tsNumber
                 digitsOnly [value]="getMhdNum(q.answerMemo)" (change)="changeMinHrDay(tsNumber, tsUnit, q)">
             <select class="form-control d-inline" style="width: 30%;" #tsUnit [value]="getMhdUnit(q.answerMemo)"
                 (change)="changeMinHrDay(tsNumber, tsUnit, q)">
@@ -71,7 +71,7 @@
 
         <app-option-block-nested [q]="q" [opts]="q.options" [malcolmInfo]="malcolmInfo"></app-option-block-nested>
 
-        <div *ngIf="q.followups?.length > 0" class="pl-5 pt-5">
+        <div *ngIf="q.followups?.length > 0" class="ps-5 pt-5">
             <app-question-block-nested #questionBlock [questions]="q.followups"></app-question-block-nested>
         </div>
     </div>
diff --git a/CSETWebNg/src/app/assessment/questions/observations/observations.component.html b/CSETWebNg/src/app/assessment/questions/observations/observations.component.html
index 265ada54fb..e68cc25e07 100644
--- a/CSETWebNg/src/app/assessment/questions/observations/observations.component.html
+++ b/CSETWebNg/src/app/assessment/questions/observations/observations.component.html
@@ -22,7 +22,7 @@
 -------------------------->
 <div *transloco="let t" 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="mr-3 fs-base-6 cset-icons-light-bulb"></span>
+    <span class="me-3 fs-base-6 cset-icons-light-bulb"></span>
     <span>{{ t('observation.observation details') }}</span>
   </div>
 
@@ -82,7 +82,7 @@
         <button class="btn-link fs-smaller" (click)="clearMulti()">{{ t('observation.clear selections') }}</button>
       </div>
 
-      <div class="pl-3">
+      <div class="ps-3">
         <div *ngFor="let contact of observation.observation_Contacts" class="py-1">
           <input class="checkbox-custom d-none" type="checkbox" id="{{contact.assessment_Contact_Id}}"
             (change)="updateContact(contact)" [(ngModel)]="contact.selected">
diff --git a/CSETWebNg/src/app/assessment/questions/question-block-cie/question-block-cie.component.html b/CSETWebNg/src/app/assessment/questions/question-block-cie/question-block-cie.component.html
index abcdfe0433..c149922237 100644
--- a/CSETWebNg/src/app/assessment/questions/question-block-cie/question-block-cie.component.html
+++ b/CSETWebNg/src/app/assessment/questions/question-block-cie/question-block-cie.component.html
@@ -36,23 +36,23 @@
                     <span [class.display-hidden]="!myGrouping.hasReviewItems"
                         class="d-flex justify-content-center align-items-center flex-00a"
                         matTooltip="{{ t('tooltip.category requires review') }}">
-                        <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                        <span class="me-1 cset-icons-flag-dark fs-small"></span>
                         <span class="mb-1 fs-small">{{ t('requires review') }}</span>
                     </span>
-                    <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                    <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                     <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
                 </div>
 
                 <!-- layoutSvc.hp === true -->
                 <div class="d-flex flex-column justify-content-end align-items-end flex-00a" *ngIf="layoutSvc.hp">
                     <div>
-                        <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                        <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                         <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
                     </div>
                     <span [class.display-hidden]="!myGrouping.hasReviewItems"
                         class="d-flex justify-content-center align-items-center flex-00a"
                         matTooltip="{{ t('tooltip.category requires review') }}">
-                        <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                        <span class="me-1 cset-icons-flag-dark fs-small"></span>
                     </span>
                 </div>
 
@@ -91,7 +91,7 @@
                 </div>
                 <div *ngIf="q.displayNumber != 'Question K'">
                     <div class="d-flex flex-row">
-                        <div *ngIf="q.displayNumber?.length > 0" class="font-weight-bold mr-4">
+                        <div *ngIf="q.displayNumber?.length > 0" class="font-weight-bold me-4">
                             {{ q.displayNumber }}
                         </div>
                         <div *ngIf="showQuestionLevel" class="question-mat-level-name">
@@ -103,7 +103,7 @@
                             <span class="nested-question-text" [innerHTML]="q.questionText | safe: 'html'"></span>
                         </span>
                         <!-- <span class="align-top" (click)="openExtras(q)" matTooltip="Question Details">
-                            <svg viewBox="0 0 30 30" class="ml-1 cursor-pointer" style="height: 31px; width: 45px; margin-top: 4px">
+                            <svg viewBox="0 0 30 30" class="ms-1 cursor-pointer" style="height: 31px; width: 45px; margin-top: 4px">
                                 <path fill="#044" stroke="transparent" stroke-width="0" transform="scale(.75)"
                                     d="M18.879,29.328C17.64,29.934 16.341,30.24 14.986,30.24 14.044,30.24 13.424,29.824 13.125,28.99 12.927,28.434 13.014,27.26 13.386,25.472L15.071,17.634C15.214,16.934 15.287,16.422 15.287,16.09 15.287,15.614 15.063,15.364 14.615,15.336L13.088,15.228C12.989,15.05 12.945,14.794 12.958,14.466 12.972,14.134 13.039,13.892 13.164,13.74 15.756,13.402 17.941,13.236 19.718,13.236 20.239,13.236 20.499,13.506 20.499,14.044 20.499,14.24 20.462,14.516 20.384,14.868 20.308,15.22 20.206,15.686 20.077,16.27 19.949,16.85 19.846,17.31 19.772,17.65L18.119,25.136C17.758,26.69 17.807,27.464 18.263,27.464 18.49,27.464 18.877,27.294 19.429,26.954 19.981,26.612 20.487,26.19 20.948,25.682 21.171,25.682 21.391,25.802 21.608,26.042 21.825,26.286 21.971,26.518 22.045,26.74 21.175,27.856 20.121,28.718 18.879,29.328 M16.841,5.47C17.307,4.998 17.962,4.764 18.804,4.764 19.538,4.764 20.133,5.024 20.592,5.546 21.052,6.068 21.281,6.652 21.281,7.296 21.281,7.856 21.028,8.388 20.518,8.896 20.008,9.406 19.363,9.66 18.582,9.66 17.849,9.66 17.26,9.404 16.812,8.888 16.365,8.374 16.142,7.788 16.142,7.126 16.142,6.496 16.375,5.942 16.841,5.47 M17.5,0C7.835,0 0,7.834 0,17.5 0,27.164 7.835,35 17.5,35 27.166,35 35,27.164 35,17.5 35,7.834 27.166,0 17.5,0" />
                                 <circle cx="27" cy="7" r="6" stroke="#fff" stroke-width="1" fill="#900" [style.display]="hasDetails(q)"
@@ -112,7 +112,7 @@
                         </span> -->
 
 
-                        <span *ngIf="q.failedIntegrityCheckOptions?.length" class="ml-1 fs-base-8 cset-icons-exclamation-triangle"
+                        <span *ngIf="q.failedIntegrityCheckOptions?.length" class="ms-1 fs-base-8 cset-icons-exclamation-triangle"
                             style="vertical-align: middle; color: #856404;"
                             [matTooltip]="getIntegrityCheckErrors(q.failedIntegrityCheckOptions)"></span>
                         <span *ngIf="showIdTag" class="debug-highlight">q:{{q.questionId}}</span>
diff --git a/CSETWebNg/src/app/assessment/questions/question-block-ise/question-block-ise.component.html b/CSETWebNg/src/app/assessment/questions/question-block-ise/question-block-ise.component.html
index 8b3a53dfe2..1b42c2866e 100644
--- a/CSETWebNg/src/app/assessment/questions/question-block-ise/question-block-ise.component.html
+++ b/CSETWebNg/src/app/assessment/questions/question-block-ise/question-block-ise.component.html
@@ -36,23 +36,23 @@
                     <span [class.display-hidden]="!myGrouping.hasReviewItems"
                         class="d-flex justify-content-center align-items-center flex-00a"
                         matTooltip="{{ t('tooltip.category requires review') }}">
-                        <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                        <span class="me-1 cset-icons-flag-dark fs-small"></span>
                         <span class="mb-1 fs-small">{{ t('requires review') }}</span>
                     </span>
-                    <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                    <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                     <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
                 </div>
 
                 <!-- layoutSvc.hp === true -->
                 <div class="d-flex flex-column justify-content-end align-items-end flex-00a" *ngIf="layoutSvc.hp">
                     <div>
-                        <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                        <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                         <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
                     </div>
                     <span [class.display-hidden]="!myGrouping.hasReviewItems"
                         class="d-flex justify-content-center align-items-center flex-00a"
                         matTooltip="{{ t('tooltip.category requires review') }}">
-                        <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                        <span class="me-1 cset-icons-flag-dark fs-small"></span>
                     </span>
                 </div>
 
@@ -139,7 +139,7 @@
                                 </label>
 
                                 <!-- Mark For Review Flag  -->
-                                <label class="mr-0 ml-2 btn form-check-label btn-mfr"
+                                <label class="me-0 ms-2 btn form-check-label btn-mfr"
                                     [class.answer-selected]="q.markForReview === true"
                                     matTooltip="This control requires further review.">
                                     <input name="q_{{ q.questionId }}_F" type="checkbox"
@@ -213,13 +213,13 @@
                                 <td>
                                     <button class="icon-button fs-base cursor-pointer" aria-label="Edit"
                                         (click)="addEditIssue(q.parentQuestionId, obs.observation_Id)">
-                                        <span class="mr-1 cset-icons-pencil"></span>
+                                        <span class="me-1 cset-icons-pencil"></span>
                                     </button>
                                 </td>
                                 <td>
                                     <button class="icon-button fs-base cursor-pointer" aria-label="Delete"
                                         (click)="deleteIssue(obs.observation_Id, false)">
-                                        <span class="mr-1 cset-icons-trash-can"></span>
+                                        <span class="me-1 cset-icons-trash-can"></span>
                                     </button>
                                 </td>
                             </tr>
diff --git a/CSETWebNg/src/app/assessment/questions/question-block-maturity/question-block-maturity.component.html b/CSETWebNg/src/app/assessment/questions/question-block-maturity/question-block-maturity.component.html
index 33def5d9d0..0f45e0ef36 100644
--- a/CSETWebNg/src/app/assessment/questions/question-block-maturity/question-block-maturity.component.html
+++ b/CSETWebNg/src/app/assessment/questions/question-block-maturity/question-block-maturity.component.html
@@ -33,22 +33,22 @@
                 <span [class.display-hidden]="!myGrouping.hasReviewItems"
                     class="d-flex justify-content-center align-items-center flex-00a"
                     matTooltip="{{ t('tooltip.category requires review') }}">
-                    <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                    <span class="me-1 cset-icons-flag-dark fs-small"></span>
                     <span class="mb-1 fs-small">{{ t('requires review') }}</span>
                 </span>
-                <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                 <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
             </div>
 
             <div class="d-flex flex-column justify-content-end align-items-end flex-00a" *ngIf="layoutSvc.hp">
                 <div>
-                    <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                    <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                     <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
                 </div>
                 <span [class.display-hidden]="!myGrouping.hasReviewItems"
                     class="d-flex justify-content-center align-items-center flex-00a"
                     matTooltip="{{ t('tooltip.category requires review') }}">
-                    <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                    <span class="me-1 cset-icons-flag-dark fs-small"></span>
                 </span>
             </div>
         </div>
@@ -103,15 +103,15 @@
                             [class]="questionsSvc.answerOptionCss(maturityModelName, option)"
                             [class.answer-selected]="q.answer === option"
                             [matTooltip]="questionsSvc.answerButtonTooltip(maturityModelName, option)">
-                            <input name="q_{{q.questionId}}" class="form-check-input" type="radio" autocomplete="off"
+                            <input name="q_{{q.questionId}}" class="btn-check" type="radio" autocomplete="off"
                                 (click)="storeAnswer(q, option)" [checked]="q.answer === option"
                                 (keydown)="checkAnswerKeyPress($event, q, option)">
                             {{questionsSvc.answerButtonLabel(maturityModelName, option)}}
                         </label>
                         <!-- Mark For Review Flag  -->
-                        <label class="mr-0 ml-2 btn form-check-label btn-mfr d-flex align-items-center"
+                        <label class="me-0 ms-2 btn form-check-label btn-mfr d-flex align-items-center"
                             [class.answer-selected]="q.markForReview === true" [matTooltip]="t('tooltip.mfr-flag')">
-                            <input name="q_{{q.questionId}}_F" type="checkbox" (click)="saveMFR(q);"
+                            <input name="q_{{q.questionId}}_F" type="checkbox" (click)="saveMFR(q);" class="btn-check"
                                 (keydown)="checkReviewKeyPress($event, q)" tabindex="0"
                                 checked="{{q.markForReview === true}}">
                             <span class="cset-icons-flag-dark fs-base"></span>
@@ -137,7 +137,7 @@
                         <span class="font-weight-bold">
                             {{ q.displayNumber }}
                         </span>
-                        <span class="question-mat-level-name ml-4" *ngIf="showLevelIndicator(q)">
+                        <span class="question-mat-level-name ms-4" *ngIf="showLevelIndicator(q)">
                             {{ 'level.' + q.maturityLevelName.toLowerCase() | transloco }}
                         </span>
                     </div>
@@ -164,18 +164,18 @@
 
                 <div *ngIf="!q.isParentQuestion">
                     <!-- build the list of answer options -->
-                    <div class="btn-group btn-group-toggle answer-group ml-0" data-toggle="buttons">
+                    <div class="btn-group btn-group-toggle answer-group ms-0" data-toggle="buttons">
                         <label *ngFor="let option of answerOptions" class="btn form-check-label"
                             [class]="questionsSvc.answerOptionCss(maturityModelName, option)"
                             [class.answer-selected]="q.answer === option"
                             [matTooltip]="questionsSvc.answerButtonTooltip(maturityModelName, option)">
-                            <input name="q_{{q.questionId}}" class="form-check-input" type="radio" autocomplete="off"
+                            <input name="q_{{q.questionId}}" class="btn-check" type="radio" autocomplete="off"
                                 (click)="storeAnswer(q, option)" [checked]="q.answer === option">
                             {{questionsSvc.answerButtonLabel(maturityModelName, option)}}
                         </label>
 
                         <!-- Mark For Review Flag  -->
-                        <label class="mr-0 ml-2 btn form-check-label btn-mfr"
+                        <label class="me-0 ms-2 btn form-check-label btn-mfr"
                             [class.answer-selected]="q.markForReview === true"
                             matTooltip="This control requires further review.">
                             <input name="q_{{q.questionId}}_F" type="checkbox" (click)="saveMFR(q);" tabindex="0"
diff --git a/CSETWebNg/src/app/assessment/questions/question-block-vadr/question-block-vadr.component.html b/CSETWebNg/src/app/assessment/questions/question-block-vadr/question-block-vadr.component.html
index 32832ee1b1..516681909c 100644
--- a/CSETWebNg/src/app/assessment/questions/question-block-vadr/question-block-vadr.component.html
+++ b/CSETWebNg/src/app/assessment/questions/question-block-vadr/question-block-vadr.component.html
@@ -35,22 +35,22 @@
                     <span [class.display-hidden]="!myGrouping.hasReviewItems"
                         class="d-flex justify-content-center align-items-center flex-00a"
                         matTooltip="{{ t('tooltip.category requires review') }}">
-                        <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                        <span class="me-1 cset-icons-flag-dark fs-small"></span>
                         <span class="mb-1 fs-small">{{ t('requires review') }}</span>
                     </span>
-                    <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                    <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                     <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
                 </div>
 
                 <div class="d-flex flex-column justify-content-end align-items-end flex-00a" *ngIf="layoutSvc.hp">
                     <div>
-                        <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+                        <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
                         <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="myGrouping.expanded"></i>
                     </div>
                     <span [class.display-hidden]="!myGrouping.hasReviewItems"
                         class="d-flex justify-content-center align-items-center flex-00a"
                         matTooltip="{{ t('tooltip.category requires review') }}">
-                        <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+                        <span class="me-1 cset-icons-flag-dark fs-small"></span>
                     </span>
                 </div>
             </div>
@@ -80,7 +80,7 @@
                     <div class="w-100 d-flex flex-row">
                         <div class="number-and-text mt-2">
                             <!-- Display level  and name for parent question-->
-                            <div [class.ml-5.mb-2]="openEndedQuestion && !!q.parentQuestionId"
+                            <div [class.ms-5.mb-2]="openEndedQuestion && !!q.parentQuestionId"
                                 style="font-weight: bold;margin-top: 0.5rem; margin-right: 2rem; white-space: nowrap;">
                                 {{ q.displayNumber }}
                             </div>
@@ -121,7 +121,7 @@
 
 
                                 <!-- Mark For Review Flag  -->
-                                <label class="mr-0 ml-2 btn form-check-label btn-mfr"
+                                <label class="me-0 ms-2 btn form-check-label btn-mfr"
                                     [class.answer-selected]="q.markForReview === true"
                                     matTooltip="This control requires further review.">
                                     <input name="q_{{q.questionId}}_F" type="checkbox" (click)="saveMFR(q);"
@@ -142,10 +142,10 @@
                         </div>
                     </div>
 
-                    <div [class.pl-5]="openEndedQuestion && !!q.parentQuestionId"
-                        class="w-100 d-flex flex-row ml-5 pl-2">
+                    <div [class.ps-5]="openEndedQuestion && !!q.parentQuestionId"
+                        class="w-100 d-flex flex-row ms-5 ps-2">
                         <app-question-extras *ngIf="!q.isParentQuestion || q.parentQuestionId !==null" #extrasComponent
-                            [myQuestion]="q" class="w-100 mb-3 text-left ml-3 pl-5 text-nowrap"
+                            [myQuestion]="q" class="w-100 mb-3 text-left ms-3 ps-5 text-nowrap"
                             (changeExtras)="refreshReviewIndicator()" (changeComponents)="refreshComponentOverrides()">
                         </app-question-extras>
                     </div>
@@ -163,12 +163,12 @@
                     <div class="w-100 mt-3">
                         <div>
                             <!-- Display level  and name for parent question-->
-                            <div [class.ml-3.mb-2]="openEndedQuestion && !!q.parentQuestionId"
+                            <div [class.ms-3.mb-2]="openEndedQuestion && !!q.parentQuestionId"
                                 class="font-weight-bold text-nowrap div1">
                                 {{ q.displayNumber }}
                             </div>
 
-                            <div [class.ml-3.mb-2]="openEndedQuestion && !!q.parentQuestionId" class="w-100 div2">
+                            <div [class.ms-3.mb-2]="openEndedQuestion && !!q.parentQuestionId" class="w-100 div2">
                                 <div *ngIf="!!q.shortName" class="mb-1 fst-italic font-weight-bold"
                                     style="color: #666; font-size: .8rem; white-space: normal;">
                                     <p>{{ q.shortName }}</p>
@@ -189,7 +189,7 @@
                         <div *ngIf="showYNQuestions && !q.parentQuestionId">
 
                             <!-- build the list of answer options -->
-                            <div class="btn-group btn-group-toggle answer-group ml-0 mt-2" data-toggle="buttons">
+                            <div class="btn-group btn-group-toggle answer-group ms-0 mt-2" data-toggle="buttons">
                                 <label *ngFor="let option of answerOptions" class="btn form-check-label"
                                     [class]="questionsSvc.answerOptionCss(maturityModelName, option)"
                                     [class.answer-selected]="q.answer === option"
@@ -202,7 +202,7 @@
 
 
                                 <!-- Mark For Review Flag  -->
-                                <label class="mr-0 ml-2 btn form-check-label btn-mfr"
+                                <label class="me-0 ms-2 btn form-check-label btn-mfr"
                                     [class.answer-selected]="q.markForReview === true"
                                     matTooltip="This control requires further review.">
                                     <input name="q_{{q.questionId}}_F" type="checkbox" (click)="saveMFR(q);"
@@ -222,7 +222,7 @@
                         </div>
                     </div>
 
-                    <div [class.ml-3]="openEndedQuestion && !!q.parentQuestionId" class="w-100__ d-flex__ flex-row__">
+                    <div [class.ms-3]="openEndedQuestion && !!q.parentQuestionId" class="w-100__ d-flex__ flex-row__">
                         <app-question-extras *ngIf="!q.isParentQuestion || q.parentQuestionId !==null" #extrasComponent
                             [myQuestion]="q" class="w-100 mb-3 text-left" (changeExtras)="refreshReviewIndicator()"
                             (changeComponents)="refreshComponentOverrides()">
diff --git a/CSETWebNg/src/app/assessment/questions/question-block/question-block.component.html b/CSETWebNg/src/app/assessment/questions/question-block/question-block.component.html
index fc707e620f..e619f2e7da 100644
--- a/CSETWebNg/src/app/assessment/questions/question-block/question-block.component.html
+++ b/CSETWebNg/src/app/assessment/questions/question-block/question-block.component.html
@@ -36,22 +36,22 @@
           <span [class.display-hidden]="!mySubCategory.hasReviewItems"
             class="d-flex justify-content-center align-items-center flex-00a"
             matTooltip="{{ t('tooltip.category requires review') }}">
-            <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+            <span class="me-1 cset-icons-flag-dark fs-small"></span>
             <span class="mb-1 fs-small">{{ t('requires review') }}</span>
           </span>
-          <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+          <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
           <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="mySubCategory.expanded"></i>
         </div>
 
         <div class="d-flex flex-column justify-content-end align-items-end flex-00a" *ngIf="layoutSvc.hp">
           <div>
-            <app-progress [value]="percentAnswered" class="mr-2 ml-2"></app-progress>
+            <app-progress [value]="percentAnswered" class="me-2 ms-2"></app-progress>
             <i class="cset-icons-chevron-down q-expand" [class.expand-flip]="mySubCategory.expanded"></i>
           </div>
           <span [class.display-hidden]="!mySubCategory.hasReviewItems"
             class="d-flex justify-content-center align-items-center flex-00a"
             matTooltip="{{ t('tooltip.category requires review') }}">
-            <span class="mr-1 cset-icons-flag-dark fs-small"></span>
+            <span class="me-1 cset-icons-flag-dark fs-small"></span>
           </span>
         </div>
       </div>
@@ -64,27 +64,27 @@
         </div>
         <div [class.display-none]="filterSvc.isFilterEngaged()">
           <!-- this is the header answer block -->
-          <div class="btn-group btn-group-toggle answer-group" data-toggle="buttons">
+          <div class="btn-group answer-group" role="group">
             <label *ngIf="showThisOption('Y')" class="btn btn-yes form-check-label"
               [class.answer-selected]="mySubCategory.subCategoryAnswer === 'Y'">
-              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="form-check-input" type="radio"
+              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="btn-check" type="radio"
                 autocomplete="off" (click)="setBlockAnswer('Y')" tabindex="0"
                 [checked]="mySubCategory.subCategoryAnswer === 'Y'">{{questionsSvc.answerButtonLabel('', 'Y')}}
             </label>
             <label *ngIf="showThisOption('N')" class="btn btn-no form-check-label"
               [class.answer-selected]="mySubCategory.subCategoryAnswer === 'N'">
-              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="form-check-input" type="radio"
+              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="btn-check" type="radio"
                 autocomplete="off" (click)="setBlockAnswer('N')" tabindex="0"
                 [checked]="mySubCategory.subCategoryAnswer === 'N'">{{questionsSvc.answerButtonLabel('', 'N')}}
             </label>
             <label *ngIf="showThisOption('NA')" class="btn btn-na form-check-label"
               [class.answer-selected]="mySubCategory.subCategoryAnswer === 'NA'">
-              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="form-check-input" type="radio"
+              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="btn-check" type="radio"
                 autocomplete="off" (click)="setBlockAnswer('NA')" tabindex="0"
                 [checked]="mySubCategory.subCategoryAnswer === 'NA'">{{questionsSvc.answerButtonLabel('', 'NA')}}
             </label>
             <label *ngIf="showThisOption('A')" class="btn btn-na form-check-label" style="visibility: hidden;">
-              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="form-check-input" type="radio" tabindex="0"
+              <input name="subcat_{{ mySubCategory.subCategoryId }}" class="btn-check" type="radio" tabindex="0"
                 autocomplete="off">XX
             </label>
           </div>
@@ -111,19 +111,19 @@
 
 
           <div>
-            <div class="btn-group btn-group-toggle answer-group" data-toggle="buttons">
+            <div class="btn-group answer-group" role="group">
               <label *ngFor="let option of answerOptions" class="btn form-check-label"
                 [class]="questionsSvc.answerOptionCss('', option)" [class.answer-selected]="q.answer === option"
                 [matTooltip]="questionsSvc.answerButtonTooltip(maturityModelId, option)">
-                <input name="q_{{q.questionId}}" class="form-check-input" type="radio" autocomplete="off"
+                <input name="q_{{q.questionId}}" class="btn-check" type="radio" autocomplete="off"
                   (click)="storeAnswer(q, option)" [checked]="q.answer === option">
                 {{questionsSvc.answerButtonLabel(maturityModelName, option)}}
               </label>
 
               <!-- Mark For Review Flag  -->
-              <label class="mr-0 ml-2 btn form-check-label btn-mfr" [class.answer-selected]="q.markForReview === true"
+              <label class="me-0 ms-2 btn btn-mfr" [class.answer-selected]="q.markForReview === true"
                 [matTooltip]="('tooltip.mfr-flag' | transloco)">
-                <input name="q_{{q.questionId}}_F" type="checkbox" (click)="saveMFR(q);" tabindex="0"
+                <input name="q_{{q.questionId}}_F" type="checkbox" class="btn-check" (click)="saveMFR(q);" tabindex="0"
                   checked="{{q.markForReview === true}}">
                 <span class="cset-icons-flag-dark fs-base"></span>
               </label>
@@ -158,17 +158,17 @@
           </div>
 
           <div>
-            <div class="btn-group btn-group-toggle answer-group ml-0" data-toggle="buttons">
+            <div class="btn-group btn-group-toggle answer-group ms-0" data-toggle="buttons">
               <label *ngFor="let option of answerOptions" class="btn form-check-label align-items-center"
                 [class]="questionsSvc.answerOptionCss('', option)" [class.answer-selected]="q.answer === option"
                 [matTooltip]="questionsSvc.answerButtonTooltip(maturityModelId, option)">
-                <input name="q_{{q.questionId}}" class="form-check-input" type="radio" autocomplete="off"
+                <input name="q_{{q.questionId}}" class="btn-check" type="radio" autocomplete="off"
                   (click)="storeAnswer(q, option)" [checked]="q.answer === option">
                 {{questionsSvc.answerButtonLabel(maturityModelName, option)}}
               </label>
 
               <!-- Mark For Review Flag  -->
-              <label class="mr-0 ml-2 btn form-check-label btn-mfr align-items-center"
+              <label class="me-0 ms-2 btn form-check-label btn-mfr align-items-center"
                 [class.answer-selected]="q.markForReview === true" [matTooltip]="('tooltip.mfr-flag' | transloco)">
                 <input name="q_{{q.questionId}}_F" type="checkbox" (click)="saveMFR(q);" tabindex="0"
                   checked="{{q.markForReview === true}}">
diff --git a/CSETWebNg/src/app/assessment/questions/question-extras-dialog/question-extras-dialog.component.html b/CSETWebNg/src/app/assessment/questions/question-extras-dialog/question-extras-dialog.component.html
index f18cd6c90c..a34639fb21 100644
--- a/CSETWebNg/src/app/assessment/questions/question-extras-dialog/question-extras-dialog.component.html
+++ b/CSETWebNg/src/app/assessment/questions/question-extras-dialog/question-extras-dialog.component.html
@@ -29,7 +29,7 @@
         </div>
     </mat-dialog-content>
 
-    <mat-dialog-actions class="pl-4 p-1" style="margin-bottom:15px;">
+    <mat-dialog-actions class="ps-4 p-1" style="margin-bottom:15px;">
         <button class="btn btn-secondary" (click)="close()">{{t('buttons.ok')}}</button>
     </mat-dialog-actions>
 </ng-container>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/assessment/questions/question-extras/question-extras.component.html b/CSETWebNg/src/app/assessment/questions/question-extras/question-extras.component.html
index b26bc67fc8..8b39f0e191 100644
--- a/CSETWebNg/src/app/assessment/questions/question-extras/question-extras.component.html
+++ b/CSETWebNg/src/app/assessment/questions/question-extras/question-extras.component.html
@@ -146,7 +146,7 @@
         </span>
 
         <span class="btn-group-toggle">
-            <label *ngIf="showMfr" class="mr-0 ml-2 btn form-check-label btn-mfr"
+            <label *ngIf="showMfr" class="me-0 ms-2 btn form-check-label btn-mfr"
                 [class.answer-selected]="myQuestion.markForReview === true"
                 matTooltip="This control requires further review.">
                 <input name="q_{{myQuestion.questionId}}_F" type="checkbox"
@@ -259,7 +259,7 @@
                     <div class="sub-header-1">
                         {{t('extras.implementation guidance')}}
                     </div>
-                    <div [innerHTML]="myQuestion.implementationGuides" class="ml-3">
+                    <div [innerHTML]="myQuestion.implementationGuides" class="ms-3">
                     </div>
                 </div>
 
@@ -426,13 +426,13 @@
                         <td>
                             <button class="icon-button fs-base cursor-pointer" aria-label="Edit"
                                 (click)="addEditObservation(obs.observation_Id)">
-                                <span class="mr-1 cset-icons-pencil"></span>
+                                <span class="me-1 cset-icons-pencil"></span>
                             </button>
                         </td>
                         <td>
                             <button class="icon-button fs-base cursor-pointer" aria-label="Delete"
                                 (click)="deleteObservation(obs)">
-                                <span class="mr-1 cset-icons-trash-can"></span>
+                                <span class="me-1 cset-icons-trash-can"></span>
                             </button>
                         </td>
                     </tr>
diff --git a/CSETWebNg/src/app/assessment/questions/questions.component.html b/CSETWebNg/src/app/assessment/questions/questions.component.html
index 69c95649cc..fab762f21a 100644
--- a/CSETWebNg/src/app/assessment/questions/questions.component.html
+++ b/CSETWebNg/src/app/assessment/questions/questions.component.html
@@ -27,21 +27,21 @@
       <label *ngIf="showQuestionsToggle" class="btn btn-app-mode form-check-label"
         [class.active]="assessSvc.applicationMode == 'Q'" (click)="setMode('Q')"
         matTooltip="{{t('tooltip.questions mode')}}">
-        <input name="app_mode" class="form-check-input" type="radio" autocomplete="off"
+        <input name="app_mode" class="btn-check" type="radio" autocomplete="off"
           [checked]="assessSvc.applicationMode == 'Q'">
         {{t('buttons.questions mode')}}
       </label>
       <label *ngIf="showRequirementsToggle" class="btn btn-app-mode form-check-label"
         [class.active]="assessSvc.applicationMode == 'R'" (click)="setMode('R')"
         matTooltip="{{t('tooltip.requirements mode')}}">
-        <input name="app_mode" class="form-check-input" type="radio" autocomplete="off"
+        <input name="app_mode" class="btn-check" type="radio" autocomplete="off"
           [checked]="assessSvc.applicationMode == 'R'">
         {{t('buttons.requirements mode')}}
       </label>
     </div>
 
     <div class="d-flex flex-row">
-      <div class="mr-3 answered-count" *ngIf="!!categories" matTooltip="{{t('tooltip.answered count')}}">
+      <div class="me-3 answered-count" *ngIf="!!categories" matTooltip="{{t('tooltip.answered count')}}">
         {{ completionSvc.answeredCount }}/{{ completionSvc.totalCount }}
       </div>
       <div class="d-flex flex-column align-items-start flex-00a">
diff --git a/CSETWebNg/src/app/assessment/results/acet-detail/acet-detail.component.html b/CSETWebNg/src/app/assessment/results/acet-detail/acet-detail.component.html
index e1837fd246..093d4184e0 100644
--- a/CSETWebNg/src/app/assessment/results/acet-detail/acet-detail.component.html
+++ b/CSETWebNg/src/app/assessment/results/acet-detail/acet-detail.component.html
@@ -39,12 +39,12 @@ <h3>{{ t('acet.maturity results') }}</h3>
 
         <div class="d-table mb-4" style="min-width: 50%;">
             <div class="d-table-row">
-                <div class="d-table-cell pr-3 label-cell">IRP:</div>
+                <div class="d-table-cell pe-3 label-cell">IRP:</div>
                 <!-- <div class="d-table-cell">{{ t('irp.' + overallIrp) }}</div> -->
                 <div *ngIf="overallIrp" class="d-table-cell">{{ t('irp.' + overallIrp.toLowerCase()) }}</div>
             </div>
             <div class="d-table-row">
-                <div class="d-table-cell pr-3 label-cell">{{ t('acet.target maturity range') }}:</div>
+                <div class="d-table-cell pe-3 label-cell">{{ t('acet.target maturity range') }}:</div>
                 <!-- <div class="d-table-cell">{{matRangeString}}</div> -->
                 <div *ngIf="matRangeStartString" class="d-table-cell">{{ t('level.' + matRangeStartString) + ' - ' +
                     t('level.' + matRangeEndString) }}</div>
@@ -164,7 +164,7 @@ <h1 class="item-title" style="text-indent: 0">{{comp.name}}
                                                             </div>
                                                         </div>
                                                     </div>
-                                                    <div class="ml-3 mr-3 form">
+                                                    <div class="ms-3 me-3 form">
                                                         <table class="label-value mx-auto">
                                                             <tbody>
                                                                 <tr class="item-row">
diff --git a/CSETWebNg/src/app/assessment/results/admin/admin.component.html b/CSETWebNg/src/app/assessment/results/admin/admin.component.html
index a5ff6ba784..bc8e12c3a7 100644
--- a/CSETWebNg/src/app/assessment/results/admin/admin.component.html
+++ b/CSETWebNg/src/app/assessment/results/admin/admin.component.html
@@ -50,14 +50,14 @@ <h3>Administration - Review Hours</h3>
         </tr>
         <tr class="total-row">
             <td>Total Review Hours</td>
-            <td class="text-right pr-4">{{ documentationTotal }}</td>
-            <td class="text-right pr-4">{{ interviewTotal }}</td>
+            <td class="text-right pe-4">{{ documentationTotal }}</td>
+            <td class="text-right pe-4">{{ interviewTotal }}</td>
             <td class="text-right"></td>
         </tr>
         <tr class="total-row">
             <td>Grand Totals</td>
-            <td class="text-right pr-4" colspan="2">{{ grandTotal }}</td>
-            <td class="text-right pr-3">{{ reviewedStatementTotal }}</td>
+            <td class="text-right pe-4" colspan="2">{{ grandTotal }}</td>
+            <td class="text-right pe-3">{{ reviewedStatementTotal }}</td>
         </tr>
     </table>
 
diff --git a/CSETWebNg/src/app/assessment/results/analysis/analytics-login/analytics-login.component.html b/CSETWebNg/src/app/assessment/results/analysis/analytics-login/analytics-login.component.html
index 45b0ae3b24..3ce52f7560 100644
--- a/CSETWebNg/src/app/assessment/results/analysis/analytics-login/analytics-login.component.html
+++ b/CSETWebNg/src/app/assessment/results/analysis/analytics-login/analytics-login.component.html
@@ -1,9 +1,9 @@
 <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-key-shield fs-base-6 mr-3"></span>
+      <span class="cset-icons-key-shield fs-base-6 me-3"></span>
       <span>Login to Data Submission</span>
     </div>
-    <mat-dialog-content class="p-3 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
+    <mat-dialog-content class="p-3 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
   
       <div class="container">
         <form [formGroup]="dataloginForm">
diff --git a/CSETWebNg/src/app/assessment/results/analysis/ranked-questions/ranked-questions.component.html b/CSETWebNg/src/app/assessment/results/analysis/ranked-questions/ranked-questions.component.html
index 1ba6c60513..0274e61cd0 100644
--- a/CSETWebNg/src/app/assessment/results/analysis/ranked-questions/ranked-questions.component.html
+++ b/CSETWebNg/src/app/assessment/results/analysis/ranked-questions/ranked-questions.component.html
@@ -39,17 +39,17 @@ <h3 class="mb-2 flex-00a">{{t('titles.control priorities')}}</h3>
         <div class="d-flex flex-column justify-content-start flex-11a">
           <div class="mb-2 d-flex justify-content-start flex-11a">
             <label id="rq-standard-label" for="rq-category-text"
-              class="rq-label-min-width m-0 mr-2 fs-base fw-600">{{t('reports.standard')}}:</label>
+              class="rq-label-min-width m-0 me-2 fs-base fw-600">{{t('reports.standard')}}:</label>
             <span id="rq-category-text" class="fs-base">{{row.standard}}</span>
           </div>
           <div class="mb-2 d-flex justify-content-start flex-11a">
             <label id="rq-category-label" for="rq-category-text"
-              class="rq-label-min-width m-0 mr-2 fs-base fw-600">{{t('reports.category')}}:</label>
+              class="rq-label-min-width m-0 me-2 fs-base fw-600">{{t('reports.category')}}:</label>
             <span id="rq-category-text" class="fs-base">{{row.category}}</span>
           </div>
           <div class="d-flex justify-content-start flex-11a">
             <label id="rq-answer-label" for="rq-answer-text"
-              class="rq-label-min-width m-0 mr-2 fs-base fw-600">{{t('reports.answer')}}:</label>
+              class="rq-label-min-width m-0 me-2 fs-base fw-600">{{t('reports.answer')}}:</label>
             <span id="rq-answer-text" name="rq-answer-text" class="fs-base">{{row.displayAnswer}}</span>
           </div>
         </div>
@@ -69,7 +69,7 @@ <h3 class="mb-2 flex-00a">{{t('titles.control priorities')}}</h3>
               class="rq-label-min-width m-0 mb-1 fs-base fw-600">{{t('reports.question')}}:</label>
             <div class="mb-2 d-flex justify-content-start flex-00a">
               <label id="rq-question-reference-label" for="rq-question-reference-text"
-                class="rq-label-min-width m-0 mr-2 fs-base fw-600">{{t('reports.reference number')}}</label>
+                class="rq-label-min-width m-0 me-2 fs-base fw-600">{{t('reports.reference number')}}</label>
               <span id="rq-question-reference-text" name="rq-question-reference-text"
                 class="fs-base">{{row.questionRef}}</span>
             </div>
diff --git a/CSETWebNg/src/app/assessment/results/cpg/cpg-cost-impact-complexity/cpg-cost-impact-complexity.component.html b/CSETWebNg/src/app/assessment/results/cpg/cpg-cost-impact-complexity/cpg-cost-impact-complexity.component.html
index 284eb32a7e..c218f187bd 100644
--- a/CSETWebNg/src/app/assessment/results/cpg/cpg-cost-impact-complexity/cpg-cost-impact-complexity.component.html
+++ b/CSETWebNg/src/app/assessment/results/cpg/cpg-cost-impact-complexity/cpg-cost-impact-complexity.component.html
@@ -21,8 +21,8 @@
   SOFTWARE. 
 -------------------------->
 <div class="d-flex flex-row pb-3 align-items-center">
-  <div class="mr-3 text-nowrap align-middle">{{'reports.core.cpg.report.cost' | transloco | uppercase}}: <span class="green-dollars align-middle">{{greenDollars}}</span><span
+  <div class="me-3 text-nowrap align-middle">{{'reports.core.cpg.report.cost' | transloco | uppercase}}: <span class="green-dollars align-middle">{{greenDollars}}</span><span
       class="gray-dollars align-middle">{{grayDollars}}</span></div>
-  <div class="mr-3 text-nowrap">{{'reports.core.cpg.report.impact' | transloco | uppercase}}: <span [class]="lowMedHigh(impact)">{{impactWord | uppercase}}</span></div>
-  <div class="mr-3 text-nowrap">{{'reports.core.cpg.report.complexity' | transloco | uppercase}}: <span [class]="lowMedHigh(complexity)">{{complexityWord | uppercase}}</span></div>
+  <div class="me-3 text-nowrap">{{'reports.core.cpg.report.impact' | transloco | uppercase}}: <span [class]="lowMedHigh(impact)">{{impactWord | uppercase}}</span></div>
+  <div class="me-3 text-nowrap">{{'reports.core.cpg.report.complexity' | transloco | uppercase}}: <span [class]="lowMedHigh(complexity)">{{complexityWord | uppercase}}</span></div>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/assessment/results/cpg/cpg-practice-table/cpg-practice-table.component.html b/CSETWebNg/src/app/assessment/results/cpg/cpg-practice-table/cpg-practice-table.component.html
index 1a41405329..40a426e8f8 100644
--- a/CSETWebNg/src/app/assessment/results/cpg/cpg-practice-table/cpg-practice-table.component.html
+++ b/CSETWebNg/src/app/assessment/results/cpg/cpg-practice-table/cpg-practice-table.component.html
@@ -33,14 +33,14 @@
                     [style.background-color]="backgroundColor(d.groupingId)">
                     <div class="d-flex flex-row justify-content-between">
                         <div class="d-flex flex-row">
-                            <div class="mr-2 font-weight-bold">
+                            <div class="me-2 font-weight-bold">
                                 {{q.displayNumber}}
                             </div>
                             <div class="font-weight-normal">
                                 <span [innerHTML]="q.securityPractice"></span>
                             </div>
                         </div>
-                        <div class="text-right ml-4 font-weight-normal">
+                        <div class="text-right ms-4 font-weight-normal">
                             <span *ngFor="let c of q.csfMappings; let l = last" class="text-nowrap">
                                 {{c}}{{ l ? '' : ', '}}
                             </span>
diff --git a/CSETWebNg/src/app/assessment/results/crr/crr-results-detail/crr-results-detail.component.html b/CSETWebNg/src/app/assessment/results/crr/crr-results-detail/crr-results-detail.component.html
index 7769cf86c8..fdd56c2d42 100644
--- a/CSETWebNg/src/app/assessment/results/crr/crr-results-detail/crr-results-detail.component.html
+++ b/CSETWebNg/src/app/assessment/results/crr/crr-results-detail/crr-results-detail.component.html
@@ -35,7 +35,7 @@
         </td>
     </tr>
     <tr *ngFor="let q of goal.Question">
-        <td colspan="2" [innerHTML]="q?.questiontext" [class.pl-5]="!!q?.parentquestionid">
+        <td colspan="2" [innerHTML]="q?.questiontext" [class.ps-5]="!!q?.parentquestionid">
         </td>
         <td *ngIf="q?.isparentquestion != 'true'" [class]="answerCellClass(q?.answer)">
             <div class="text-center" style="width: 7rem">
diff --git a/CSETWebNg/src/app/assessment/results/dashboard/acet-dashboard.component.html b/CSETWebNg/src/app/assessment/results/dashboard/acet-dashboard.component.html
index b35d78e3e7..6fdc7c086a 100644
--- a/CSETWebNg/src/app/assessment/results/dashboard/acet-dashboard.component.html
+++ b/CSETWebNg/src/app/assessment/results/dashboard/acet-dashboard.component.html
@@ -25,7 +25,7 @@
         <h3>{{ t('titles.acet dashboard') }}</h3>
         <div class="d-table mb-4" style="min-width: 50%;">
             <div class="d-table-row">
-                <div class="d-table-cell pr-3 label-cell">{{ t('acet.credit union name') }}:</div>
+                <div class="d-table-cell pe-3 label-cell">{{ t('acet.credit union name') }}:</div>
                 <div class="d-table-cell">{{ acetDashboard?.creditUnionName }}</div>
             </div>
             <div class="d-table-row mb-3">
@@ -43,7 +43,7 @@ <h4>{{ t('irp.inherent risk profiles') }}</h4>
 
             <div class="d-table w-100">
                 <div class="d-table-row">
-                    <div class="d-table-cell pb-3 pl-3">
+                    <div class="d-table-cell pb-3 ps-3">
                         {{ t('irp.overall risk level is') }}
                         <span class="blue-text font-weight-bold">
                             {{ overrideLabel.includes('-') ? overrideLabel.substring(0, 4) +
@@ -53,7 +53,7 @@ <h4>{{ t('irp.inherent risk profiles') }}</h4>
                     </div>
                 </div>
                 <div class="d-table-row">
-                    <div class="d-table-cell pl-3 align-top">
+                    <div class="d-table-cell ps-3 align-top">
                         {{ t('irp.override risk level is') }}
                         <span class="blue-text font-weight-bold">
                             {{ overriddenLabel.includes('-') ? overriddenLabel.substring(0, 4) +
@@ -65,7 +65,7 @@ <h4>{{ t('irp.inherent risk profiles') }}</h4>
                 </div>
                 <div class="d-table-row"
                     *ngIf="!!acetDashboard?.override && acetDashboard?.override != '' && acetDashboard?.override !== 0">
-                    <div class="d-table-cell pl-3 align-top">
+                    <div class="d-table-cell ps-3 align-top">
                         {{ t('irp.override reason') }}: <span>{{acetDashboard.overrideReason}}</span>
                     </div>
                 </div>
diff --git a/CSETWebNg/src/app/assessment/results/hydro/hydro-actions/hydro-action-item/hydro-action-item.component.html b/CSETWebNg/src/app/assessment/results/hydro/hydro-actions/hydro-action-item/hydro-action-item.component.html
index 48c0a872ea..b5b028d0af 100644
--- a/CSETWebNg/src/app/assessment/results/hydro/hydro-actions/hydro-action-item/hydro-action-item.component.html
+++ b/CSETWebNg/src/app/assessment/results/hydro/hydro-actions/hydro-action-item/hydro-action-item.component.html
@@ -27,17 +27,17 @@
         <div class="d-flex flex-column justify-content-start flex-11a">
             <div class="mb-2 d-flex justify-content-start flex-11a">
                 <label id="rq-standard-label" for="rq-category-text"
-                    class="rq-label-min-width m-0 mr-2 fs-base fw-600">Domain:</label>
+                    class="rq-label-min-width m-0 me-2 fs-base fw-600">Domain:</label>
                 <span id="rq-category-text" class="fs-base">{{item.question.category}}</span>
             </div>
             <div class="mb-2 d-flex justify-content-start flex-11a">
                 <label id="rq-category-label" for="rq-category-text"
-                    class="rq-label-min-width m-0 mr-2 fs-base fw-600">Category:</label>
+                    class="rq-label-min-width m-0 me-2 fs-base fw-600">Category:</label>
                 <span id="rq-category-text" class="fs-base">{{item.question.sub_Category}}</span>
             </div>
             <div class="d-flex justify-content-start flex-11a">
                 <label id="rq-answer-label" for="rq-answer-text"
-                    class="rq-label-min-width m-0 mr-2 fs-base fw-600">Question:</label>
+                    class="rq-label-min-width m-0 me-2 fs-base fw-600">Question:</label>
                 <span id="rq-answer-text" name="rq-answer-text" class="fs-base">{{item.question.question_Text}}</span>
             </div>
         </div>
diff --git a/CSETWebNg/src/app/assessment/results/mat-cmmc/cmmc-level-drilldown/cmmc-level-drilldown.component.html b/CSETWebNg/src/app/assessment/results/mat-cmmc/cmmc-level-drilldown/cmmc-level-drilldown.component.html
index b37747d0b8..af3275dace 100644
--- a/CSETWebNg/src/app/assessment/results/mat-cmmc/cmmc-level-drilldown/cmmc-level-drilldown.component.html
+++ b/CSETWebNg/src/app/assessment/results/mat-cmmc/cmmc-level-drilldown/cmmc-level-drilldown.component.html
@@ -35,7 +35,7 @@ <h4>Compliance by Level</h4>
         </div>
         <div *ngIf="initialized && !dataError" class="mb-5">
             <div class="d-flex" [class.flex-row]="!layoutSvc.hp" [class.flex-column]="layoutSvc.hp">
-                <div class="d-flex align-items-center justify-content-center" [class.mr-5]="!layoutSvc.hp"
+                <div class="d-flex align-items-center justify-content-center" [class.me-5]="!layoutSvc.hp"
                     [class.mb-3]="layoutSvc.hp">
                     <div style="border-radius: .5rem; padding: 1.5rem; text-align: center; font-weight: bold; background-color: #1f5284; color: #fff;"
                         [class.p-2]="layoutSvc.hp">
@@ -57,7 +57,7 @@ <h4>Compliance Detail</h4>
             <h5 *ngIf="isWithinModelLevel(l)" [innerHTML]="levelDescriptions[l.modelLevel]"></h5>
             <div *ngIf="isWithinModelLevel(l)" class="d-flex mb-4" [class.flex-row]="!layoutSvc.hp"
                 [class.flex-column]="layoutSvc.hp">
-                <div class="d-flex align-items-center justify-content-center" [class.mr-5]="!layoutSvc.hp"
+                <div class="d-flex align-items-center justify-content-center" [class.me-5]="!layoutSvc.hp"
                     [class.mb-3]="layoutSvc.hp">
                     <div style="border-radius: .5rem; padding: 1.5rem; text-align: center; font-weight: bold; background-color: #1f5284; color: #fff;"
                         [class.p-2]="layoutSvc.hp">
diff --git a/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-level-results/cmmc2-level-results.component.html b/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-level-results/cmmc2-level-results.component.html
index 2e25412fde..b603f896e3 100644
--- a/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-level-results/cmmc2-level-results.component.html
+++ b/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-level-results/cmmc2-level-results.component.html
@@ -36,7 +36,7 @@ <h3>Performance by Level</h3>
         <div class="d-flex mb-4" [class.flex-row]="!layoutSvc.hp" [class.flex-column]="layoutSvc.hp"
             *ngFor="let l of response">
             <!-- pie charts for compliance at each level -->
-            <div class="d-flex" [class.mr-5]="!layoutSvc.hp" [class.mb-3]="layoutSvc.hp"
+            <div class="d-flex" [class.me-5]="!layoutSvc.hp" [class.mb-3]="layoutSvc.hp"
                 style="align-items: center; justify-content: center;">
                 <div style="border-radius: .5rem; padding: 1.5rem; text-align: center; font-weight: bold"
                     [class]="'cmmc2-level-' + l.levelValue" [class.p-2]="layoutSvc.hp">
diff --git a/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-results/cmmc2-results.component.html b/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-results/cmmc2-results.component.html
index d4d7d117f7..b86ba3a50e 100644
--- a/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-results/cmmc2-results.component.html
+++ b/CSETWebNg/src/app/assessment/results/mat-cmmc2/cmmc2-results/cmmc2-results.component.html
@@ -35,7 +35,7 @@ <h3>Performance by Level</h3>
         </p>
         <div class="d-flex flex-row" *ngFor="let l of response">
             <!-- pie charts for compliance at each level -->
-            <div class="mr-5 d-flex" style="align-items: center; justify-content: center;">
+            <div class="me-5 d-flex" style="align-items: center; justify-content: center;">
                 <div style="border-radius: .5rem; padding: 1.5rem; text-align: center; font-weight: bold"
                     [class]="'cmmc2-level-' + l.levelValue">
                     {{l.name}}
diff --git a/CSETWebNg/src/app/assessment/results/reports/ise-warnings/ise-warnings.component.html b/CSETWebNg/src/app/assessment/results/reports/ise-warnings/ise-warnings.component.html
index 76b9d6e595..dcae6a677a 100644
--- a/CSETWebNg/src/app/assessment/results/reports/ise-warnings/ise-warnings.component.html
+++ b/CSETWebNg/src/app/assessment/results/reports/ise-warnings/ise-warnings.component.html
@@ -30,10 +30,10 @@
             <span class="fs-base-2 p-2 d-flex flex-column justify-content-center flex-11a">
                 <!-- below are commented out in case clients change their minds -->
 <!-- 
-                <div class="mt-2 mr-4">Some reports are disabled until all items are resolved.</div>
+                <div class="mt-2 me-4">Some reports are disabled until all items are resolved.</div>
                 <br />
 
-                <div class="mt-2 mr-4" *ngIf="!isAssessmentPageFilled()">
+                <div class="mt-2 me-4" *ngIf="!isAssessmentPageFilled()">
                     The following required fields are missing from the "Demographics" page:
                     <ul class="list-type">
                         <span *ngFor="let field of missingFields; let i = index">
@@ -42,12 +42,12 @@
                     </ul>
                 </div> -->
 
-                <div class="mt-2 mr-4" *ngIf="disableIseReportLinks">
+                <div class="mt-2 me-4" *ngIf="disableIseReportLinks">
                     There are unanswered statements. Some domains will be incomplete.
                     <br /><br />
                 </div>
 <!-- 
-                <div class="mt-2 mr-4" *ngIf="ncuaSvc.unassignedIssues">
+                <div class="mt-2 me-4" *ngIf="ncuaSvc.unassignedIssues">
                     Some reports are disabled until all Issues have
                     an "Issue Type" assigned.<br /><br />
 
@@ -72,10 +72,10 @@
             <span class="p-md-3 p-2 fs-medium cset-icons-exclamation-triangle"></span>
             <span class="fs-base-2 p-2 d-flex flex-column justify-content-center flex-11a">
 
-                <div class="mt-2 mr-4">"Submit" button and some reports are disabled until all items are resolved.</div>
+                <div class="mt-2 me-4">"Submit" button and some reports are disabled until all items are resolved.</div>
                 <br />
 
-                <div class="mt-2 mr-4" *ngIf="!isAssessmentPageFilled()">
+                <div class="mt-2 me-4" *ngIf="!isAssessmentPageFilled()">
                     The following required fields are missing from the "Demographics" page:
                     <ul class="list-type">
                         <span *ngFor="let field of missingFields; let i = index">
@@ -84,12 +84,12 @@
                     </ul>
                 </div>
 
-                <div class="mt-2 mr-4" *ngIf="disableIseReportLinks">
+                <div class="mt-2 me-4" *ngIf="disableIseReportLinks">
                     There are unanswered examination statements that need to be answered.
                     <br /><br />
                 </div>
 
-                <div class="mt-2 mr-4" *ngIf="ncuaSvc.unassignedIssues">
+                <div class="mt-2 me-4" *ngIf="ncuaSvc.unassignedIssues">
                     All Issues require an "Issue Type" to be assigned. Assign an "Issue Type" <br />
                     to the following issues which were generated on the "Statements" page:
                     <ul class="list-type">
diff --git a/CSETWebNg/src/app/assessment/results/reports/report-list/report-list.component.html b/CSETWebNg/src/app/assessment/results/reports/report-list/report-list.component.html
index 225ad8b7a5..1091a6ff78 100644
--- a/CSETWebNg/src/app/assessment/results/reports/report-list/report-list.component.html
+++ b/CSETWebNg/src/app/assessment/results/reports/report-list/report-list.component.html
@@ -13,7 +13,7 @@ <h4>{{sectionTitle}}</h4>
                          {{ t('reports.launch.' + sectionId.toLowerCase() + '.' + (i+1) + '.title') }}
                     </button>
                </div>
-               <div class="ml-4" *ngIf="rl.securityPicker">
+               <div class="ms-4" *ngIf="rl.securityPicker">
                     <label class="mb-1" for="securityId">Confidentiality</label>
                     <select class="form-control" [(ngModel)]="confidentiality" id="securityId" name="securityId"
                          tabindex="0" (change)="onSelectSecurity($event.target.value)">
diff --git a/CSETWebNg/src/app/assessment/results/reports/reports.component.html b/CSETWebNg/src/app/assessment/results/reports/reports.component.html
index 1e139c2475..32fdd40ee2 100644
--- a/CSETWebNg/src/app/assessment/results/reports/reports.component.html
+++ b/CSETWebNg/src/app/assessment/results/reports/reports.component.html
@@ -74,7 +74,7 @@ <h3>{{ 'titles.reports' | transloco }}</h3>
   <!-- ISE Merit Buttons -->
   <div *ngIf="assessSvc.isISE()" class="my-5">
 
-    <button class="btn mr-2" style="background-color: #3b68aa; color: white;" (click)="navSvc.navBack('reports')"
+    <button class="btn me-2" style="background-color: #3b68aa; color: white;" (click)="navSvc.navBack('reports')"
       tabindex="0" aria-label="Back">
       Back
     </button>
@@ -136,7 +136,7 @@ <h4>Cyber-Informed Engineering (CIE)</h4>
 
 
       <div>
-        <div class="ml-2" *ngIf="isConfigChainEqual">
+        <div class="ms-2" *ngIf="isConfigChainEqual">
           <button tabindex="0" (click)="clickReportLink('appkeyreport')" class="btn btn-link btn-link-dark text-left"
             matTooltip="Used to associate identifiable information with an Anonymous Key" matTooltipPosition="right">
             Anonymous Key Report
@@ -146,18 +146,18 @@ <h4>Cyber-Informed Engineering (CIE)</h4>
 
         <div class="mt-5 d-flex flex-row" *ngIf="this.configSvc.behaviors.showExportOnReports">
           <button tabindex="0"
-            class="icon-button-dark btn btn-secondary d-flex justify-content-center align-items-center flex-00a mr-2"
+            class="icon-button-dark btn btn-secondary d-flex justify-content-center align-items-center flex-00a me-2"
             (click)="clickExport()" matTooltip="{{ 'tooltip.export assessment' | transloco }} ({{
               exportExtension
             }}).">
-            <span class="cset-icons-export-up fs-base-2 mr-2"></span>
+            <span class="cset-icons-export-up fs-base-2 me-2"></span>
             <span>{{assessSvc.usesMaturityModel('CIE') ? 'CSET FILE' : ''}} {{ 'buttons.export' | transloco }}</span>
           </button>
 
           <button *ngIf="configSvc.cisaAssessorWorkflow" tabindex="0"
             class="icon-button-dark btn btn-secondary d-flex justify-content-center align-items-center flex-00a"
             (click)="clickExport(true)" matTooltip="{{ 'tooltip.export assessment json' | transloco }}">
-            <span class="cset-icons-export-up fs-base-2 mr-2"></span>
+            <span class="cset-icons-export-up fs-base-2 me-2"></span>
             <span>{{ 'buttons.export json' | transloco }}</span>
           </button>
         </div>
diff --git a/CSETWebNg/src/app/builder/add-question/add-question.component.html b/CSETWebNg/src/app/builder/add-question/add-question.component.html
index 5fbf13b9ad..17e9c80490 100644
--- a/CSETWebNg/src/app/builder/add-question/add-question.component.html
+++ b/CSETWebNg/src/app/builder/add-question/add-question.component.html
@@ -56,7 +56,7 @@ <h5>Write New Question</h5>
 
       <h5>Categorization</h5>
       <div class="d-flex flex-row">
-        <div class="form-group mr-2">
+        <div class="form-group me-2">
           <label>Question Group Heading
             <select class="form-control" id="category" name="category" [(ngModel)]="selectedGHId">
               <option value="0">--Select Heading--</option>
@@ -126,9 +126,9 @@ <h5>
         </div>
         <div>
           <button type="submit"
-            class="btn btn-primary search-btn ml-2 d-flex justify-content-start align-items-center flex-00a"
+            class="btn btn-primary search-btn ms-2 d-flex justify-content-start align-items-center flex-00a"
             matTooltip="Search questions" (click)="search()">
-            <mat-icon class="mr-1">search</mat-icon>Search
+            <mat-icon class="me-1">search</mat-icon>Search
           </button>
         </div>
       </div>
@@ -155,7 +155,7 @@ <h5>
 
         <div *ngFor="let q of searchHits; let i = index">
           <div class="d-flex flex-row justify-content-between">
-            <div class="ml-2 mr-3 w-100">
+            <div class="ms-2 me-3 w-100">
               <div [innerHTML]="q.questionText" class="mt-2 mb-4">
               </div>
               <div>
@@ -204,11 +204,11 @@ <h6 class="mt-3 font-weight-bold">
     </div>
 
     <div class="d-flex flex-row mt-3 mb-3">
-      <button *ngIf="!!(setBuilderSvc.activeRequirement)" class="btn btn-link mr-3"
+      <button *ngIf="!!(setBuilderSvc.activeRequirement)" class="btn btn-link me-3"
         (click)="setBuilderSvc.navRequirementDetail(setBuilderSvc.activeRequirement.requirementID)">
         &laquo; Back to Requirement
       </button>
-      <button *ngIf="!(setBuilderSvc.activeRequirement)" class="btn btn-link mr-3"
+      <button *ngIf="!(setBuilderSvc.activeRequirement)" class="btn btn-link me-3"
         (click)="setBuilderSvc.navQuestionList()" style="margin-right:auto">
         &laquo; Back to Question List
       </button>
diff --git a/CSETWebNg/src/app/builder/builder-breadcrumbs/builder-breadcrumbs.component.html b/CSETWebNg/src/app/builder/builder-breadcrumbs/builder-breadcrumbs.component.html
index 2eb0cbbf96..dda048c454 100644
--- a/CSETWebNg/src/app/builder/builder-breadcrumbs/builder-breadcrumbs.component.html
+++ b/CSETWebNg/src/app/builder/builder-breadcrumbs/builder-breadcrumbs.component.html
@@ -26,7 +26,7 @@
     <button *ngIf="i < breadcrumbs.length - 1" (click)="navToCrumb(breadcrumb)" class="btn btn-link">
       {{ breadcrumb.displayName }}
     </button>
-    <span *ngIf="i < breadcrumbs.length - 1" class="ml-1 mr-1">&raquo;</span>
+    <span *ngIf="i < breadcrumbs.length - 1" class="ms-1 me-1">&raquo;</span>
     <span *ngIf="i === breadcrumbs.length - 1" class="btn disabled">{{ breadcrumb.displayName }}</span>
   </li>
 </ol>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/builder/custom-set-list/custom-set-list.component.html b/CSETWebNg/src/app/builder/custom-set-list/custom-set-list.component.html
index e867a544ab..228f04e7de 100644
--- a/CSETWebNg/src/app/builder/custom-set-list/custom-set-list.component.html
+++ b/CSETWebNg/src/app/builder/custom-set-list/custom-set-list.component.html
@@ -31,7 +31,7 @@ <h3>
     </p>
     <div>
       <button class="btn btn-primary" (click)="setBuilderSvc.newCustomSet()">
-        <span class="cset-icons-plus fs-base mr-2"></span>
+        <span class="cset-icons-plus fs-base me-2"></span>
         Create Module
       </button>
     </div>
@@ -52,7 +52,7 @@ <h3>
               </button>
             </td>
             <td>
-              <button type="button" class="p-0 mr-3 btn icon-button d-flex flex-column align-items-center flex-00a"
+              <button type="button" class="p-0 me-3 btn icon-button d-flex flex-column align-items-center flex-00a"
                 (click)="this.cloneSet(s.setName)">
                 <span class="fa fa-clone fs-base-2"></span>
                 <span class="d-none d-md-flex fs-smaller">Clone</span>
diff --git a/CSETWebNg/src/app/builder/question-list/question-list.component.html b/CSETWebNg/src/app/builder/question-list/question-list.component.html
index 95fa741051..434f392a2e 100644
--- a/CSETWebNg/src/app/builder/question-list/question-list.component.html
+++ b/CSETWebNg/src/app/builder/question-list/question-list.component.html
@@ -28,7 +28,7 @@ <h3>
       Question Listing
     </h3>
     <div class="card p-3 mb-3">
-      <button class="btn btn-link text-left pl-0" style="white-space: normal;" (click)="setBuilderSvc.navSetDetail()">
+      <button class="btn btn-link text-left ps-0" style="white-space: normal;" (click)="setBuilderSvc.navSetDetail()">
         <h4>
           {{questionResponse?.setFullName}}
         </h4>
@@ -37,7 +37,7 @@ <h4>
     </div>
 
     <button class="btn btn-primary" (click)="setBuilderSvc.navAddQuestion()">
-      <span class="cset-icons-plus fs-base mr-2"></span>
+      <span class="cset-icons-plus fs-base me-2"></span>
       Add Question
     </button>
 
@@ -85,9 +85,9 @@ <h4>
             {{ q.title }}
           </div>
           <div class="d-flex flex-row justify-content-between flex-11a w-100 align-items-start">
-            <div class="d-flex flex-column mb-3 mr-3 w-100">
+            <div class="d-flex flex-column mb-3 me-3 w-100">
               <div *ngIf="questionBeingEdited !== q" class="d-flex flex-row align-items-start">
-                <div class="font-weight-bold mr-2">{{q.displayNumber}}</div>
+                <div class="font-weight-bold me-2">{{q.displayNumber}}</div>
                 <div [innerHTML]="setBuilderSvc.formatLinebreaks(q.questionText)"></div>
               </div>
               <div class="alert alert-danger" *ngIf="duplicateTextQuestion === q">
@@ -105,7 +105,7 @@ <h4>
             </div>
             <span class="d-flex align-items-end justify-content-between flex-00a">
               <button *ngIf="q.isCustom" type="button" (click)="startQuestionEdit(q)"
-                class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a mr-2">
+                class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a me-2">
                 <span class="cset-icons-pencil fs-base-2"></span>
                 <span class="d-none d-md-flex fs-smaller">Edit</span>
               </button>
diff --git a/CSETWebNg/src/app/builder/ref-document/ref-document.component.html b/CSETWebNg/src/app/builder/ref-document/ref-document.component.html
index f67e3a2b3f..ba0e724804 100644
--- a/CSETWebNg/src/app/builder/ref-document/ref-document.component.html
+++ b/CSETWebNg/src/app/builder/ref-document/ref-document.component.html
@@ -69,7 +69,7 @@ <h3>
     </div>
 
     <div class="d-flex flex-row mt-3 mb-3">
-      <button class="btn btn-link mr-3" (click)="navStandardDocuments()">
+      <button class="btn btn-link me-3" (click)="navStandardDocuments()">
         &laquo; Back to Reference Document List
       </button>
     </div>
diff --git a/CSETWebNg/src/app/builder/requirement-detail/requirement-detail.component.html b/CSETWebNg/src/app/builder/requirement-detail/requirement-detail.component.html
index 4ffeaf1926..c438d94a68 100644
--- a/CSETWebNg/src/app/builder/requirement-detail/requirement-detail.component.html
+++ b/CSETWebNg/src/app/builder/requirement-detail/requirement-detail.component.html
@@ -28,7 +28,7 @@ <h3>
       Requirement Detail
     </h3>
 
-    <div class="form-row ml-0 mr-0">
+    <div class="form-row ms-0 me-0">
       <div class="form-group p-0 col-md-6">
         <label>Category</label>
         <div class="font-weight-bold">
@@ -116,11 +116,11 @@ <h4>References</h4>
       </div>
       <table class="builder-requirement-docs">
         <tr>
-          <th class="pr-4">{{t('extras.source documents')}}</th>
+          <th class="pe-4">{{t('extras.source documents')}}</th>
           <th>Bookmark</th>
         </tr>
         <tr *ngFor="let ref of r.sourceDocs">
-          <td class="pr-4">
+          <td class="pe-4">
             {{ref.title}}
           </td>
           <td>
@@ -130,12 +130,12 @@ <h4>References</h4>
             <button class="icon-button btn bgc-trans d-flex justify-content-center align-items-center flex-00a"
               (click)="addDeleteReference(r.requirementID, ref.id, true, ref.sectionRef, false)"
               matTooltip="Delete reference">
-              <span class="cset-icons-trash-can fs-base-2 mr-2"></span>
+              <span class="cset-icons-trash-can fs-base-2 me-2"></span>
             </button>
           </td>
         </tr>
         <tr>
-          <td class="pr-2">
+          <td class="pe-2">
             <select id="newSourceDoc" name="newSourceDoc" class="form-control" [(ngModel)]="newSourceDocId">
               <option value=""></option>
               <option *ngFor="let o of refDocOptions" [value]="o.id">{{ o.title }}</option>
@@ -149,16 +149,16 @@ <h4>References</h4>
             <button class="icon-button btn bgc-trans d-flex justify-content-center align-items-center flex-00a"
               (click)="addDeleteReference(r.requirementID, newSourceDocId, true, newSourceSectionRef, true)"
               matTooltip="Add reference">
-              <span class="cset-icons-plus fs-base-2 mr-2"></span>
+              <span class="cset-icons-plus fs-base-2 me-2"></span>
             </button>
           </td>
         </tr>
         <tr>
-          <th class="pt-2 pr-4">{{t('extras.additional documents')}}</th>
+          <th class="pt-2 pe-4">{{t('extras.additional documents')}}</th>
           <th class="pt-2">Bookmark</th>
         </tr>
         <tr *ngFor="let ref of r.additionalDocs">
-          <td class="pr-4">
+          <td class="pe-4">
             {{ref.title}}
           </td>
           <td>
@@ -168,12 +168,12 @@ <h4>References</h4>
             <button class="icon-button btn bgc-trans d-flex justify-content-center align-items-center flex-00a"
               (click)="addDeleteReference(r.requirementID, ref.id, false, ref.sectionRef, false)"
               matTooltip="Delete reference">
-              <span class="cset-icons-trash-can fs-base-2 mr-2"></span>
+              <span class="cset-icons-trash-can fs-base-2 me-2"></span>
             </button>
           </td>
         </tr>
         <tr>
-          <td class="pr-2">
+          <td class="pe-2">
             <select id="newAdditionalDoc" name="newAdditionalDoc" class="form-control" [(ngModel)]="newAdditionalDocId">
               <option value=""></option>
               <option *ngFor="let o of refDocOptions" [value]="o.id">{{ o.title }}</option>
@@ -188,7 +188,7 @@ <h4>References</h4>
             <button class="icon-button btn bgc-trans d-flex justify-content-center align-items-center flex-00a"
               (click)="addDeleteReference(r.requirementID, newAdditionalDocId, false, newAdditionalSectionRef, true)"
               matTooltip="Add reference">
-              <span class="cset-icons-plus fs-base-2 mr-2"></span>
+              <span class="cset-icons-plus fs-base-2 me-2"></span>
             </button>
           </td>
         </tr>
@@ -203,7 +203,7 @@ <h4>Related Questions</h4>
       </p>
 
       <button id="addQuestion" (click)="addQuestion()" class="btn btn-primary">
-        <span class="cset-icons-plus fs-base mr-2"></span>
+        <span class="cset-icons-plus fs-base me-2"></span>
         Add Question
       </button>
 
@@ -213,7 +213,7 @@ <h4>Related Questions</h4>
           {{ q.title }}
         </div>
         <div class="d-flex flex-row justify-content-between flex-11a w-100 align-items-start">
-          <div class="d-flex flex-column mb-3 mr-3 w-100">
+          <div class="d-flex flex-column mb-3 me-3 w-100">
             <div *ngIf="questionBeingEdited !== q" [innerHTML]="formatLinebreaks(q.questionText)">
             </div>
             <div class="alert alert-danger" *ngIf="duplicateTextQuestion === q">
@@ -231,7 +231,7 @@ <h4>Related Questions</h4>
           </div>
           <span class="d-flex align-items-end justify-content-between flex-00a">
             <button *ngIf="q.isCustom" type="button" (click)="startQuestionEdit(q)"
-              class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a mr-2">
+              class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a me-2">
               <span class="cset-icons-pencil fs-base-2"></span>
               <span class="d-none d-md-flex fs-smaller">Change</span>
             </button>
diff --git a/CSETWebNg/src/app/builder/requirement-list/requirement-list.component.html b/CSETWebNg/src/app/builder/requirement-list/requirement-list.component.html
index d4d177b613..79dad2c75e 100644
--- a/CSETWebNg/src/app/builder/requirement-list/requirement-list.component.html
+++ b/CSETWebNg/src/app/builder/requirement-list/requirement-list.component.html
@@ -28,7 +28,7 @@ <h3>
       Requirement Listing
     </h3>
     <div class="card p-3 mb-3">
-      <button class="btn btn-link text-left pl-0" style="white-space: normal;" (click)="setBuilderSvc.navSetDetail()">
+      <button class="btn btn-link text-left ps-0" style="white-space: normal;" (click)="setBuilderSvc.navSetDetail()">
         <h4>
           {{requirementResponse?.setFullName}}
         </h4>
@@ -48,7 +48,7 @@ <h4>
     </div>
 
     <button class="btn btn-primary mb-4" (click)="addRequirementDialog()">
-      <span class="cset-icons-plus fs-base mr-2"></span>
+      <span class="cset-icons-plus fs-base me-2"></span>
       Create Requirement
     </button>
 
@@ -70,13 +70,13 @@ <h4>
             {{ r.title }}
           </div>
           <div class="d-flex flex-row justify-content-between flex-11a w-100 align-items-start">
-            <div class="d-flex flex-column mb-3 mr-3 w-100">
+            <div class="d-flex flex-column mb-3 me-3 w-100">
               <div [innerHTML]="setBuilderSvc.formatLinebreaks(r.requirementText)">
               </div>
             </div>
             <span class="d-flex align-items-end justify-content-between flex-00a">
               <button type="button" (click)="editRequirement(r)"
-                class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a mr-2">
+                class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a me-2">
                 <span class="cset-icons-pencil fs-base-2"></span>
                 <span class="d-none d-md-flex fs-smaller">Edit</span>
               </button>
diff --git a/CSETWebNg/src/app/builder/set-detail/set-detail.component.html b/CSETWebNg/src/app/builder/set-detail/set-detail.component.html
index adffcf98c5..6d98e997c4 100644
--- a/CSETWebNg/src/app/builder/set-detail/set-detail.component.html
+++ b/CSETWebNg/src/app/builder/set-detail/set-detail.component.html
@@ -75,11 +75,11 @@ <h3>
 
 
     <div class="d-flex flex-row mt-3 mb-3 justify-content-end">
-      <button class="btn btn-primary mr-2" [disabled]="!isSetReady()" (click)="setBuilderSvc.navReqList()">
+      <button class="btn btn-primary me-2" [disabled]="!isSetReady()" (click)="setBuilderSvc.navReqList()">
         <span class="cset-icons-books-stack-2"></span>
         Requirements
       </button>
-      <button class="btn btn-primary mr-2" [disabled]="!isSetReady()" (click)="setBuilderSvc.navQuestionList()">
+      <button class="btn btn-primary me-2" [disabled]="!isSetReady()" (click)="setBuilderSvc.navQuestionList()">
         <span class="cset-icons-question-mark"></span>
         Questions
       </button>
@@ -91,7 +91,7 @@ <h3>
     </div>
 
     <div class="d-flex flex-row mt-3 mb-3">
-      <button class="btn btn-link mr-3" (click)="setBuilderSvc.navSetList()">
+      <button class="btn btn-link me-3" (click)="setBuilderSvc.navSetList()">
         &laquo; Back to Module List
       </button>
     </div>
diff --git a/CSETWebNg/src/app/builder/standard-documents/standard-documents.component.html b/CSETWebNg/src/app/builder/standard-documents/standard-documents.component.html
index ec5869210c..ba2aa99adb 100644
--- a/CSETWebNg/src/app/builder/standard-documents/standard-documents.component.html
+++ b/CSETWebNg/src/app/builder/standard-documents/standard-documents.component.html
@@ -31,12 +31,12 @@ <h5>
       {{ standardTitle }}
     </h5>
     <div class="d-flex flex-row w-100 justify-content-between align-items-start">
-      <p class="mr-3">Select or upload any reference documents applicable to the standard. This will
+      <p class="me-3">Select or upload any reference documents applicable to the standard. This will
         make them available for attaching to the requirements in the standard. Enter a string in the
         Filter field to narrow down candidates.
       </p>
       <button class="btn btn-primary add" (click)="openFileBrowser($event)">
-        <span class="cset-icons-import fs-base-1 mr-2"></span>
+        <span class="cset-icons-import fs-base-1 me-2"></span>
         Import a Document
       </button>
       <input id="docUpload" type="file" (change)="fileSelect($event)" class="display-none">
@@ -69,7 +69,7 @@ <h5>
         </td>
         <td>
           <button *ngIf="doc.isCustom" type="button" (click)="setBuilderSvc.navRefDocDetail(doc.id)"
-            class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a ml-4 mr-4">
+            class="p-0 btn icon-button d-flex flex-column align-items-center flex-00a ms-4 me-4">
             <span class="cset-icons-pencil fs-base-2"></span>
             <span class="d-none d-md-flex fs-smaller">Edit</span>
           </button>
diff --git a/CSETWebNg/src/app/dialogs/about-acet/about-acet.component.html b/CSETWebNg/src/app/dialogs/about-acet/about-acet.component.html
index 0f3c648600..aa647720c5 100644
--- a/CSETWebNg/src/app/dialogs/about-acet/about-acet.component.html
+++ b/CSETWebNg/src/app/dialogs/about-acet/about-acet.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <div *transloco="let t; read: 'about.acet'" class="about 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="cset2-icons-acet-shield fs-base-6 mr-3"></span>
+    <span class="cset2-icons-acet-shield fs-base-6 me-3"></span>
     <span>{{ 'about.dialog title' | transloco }}</span>
   </div>
-  <mat-dialog-content class="p-4 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-    <section class="pr-4 d-flex flex-11a flex-row flex-wrap">
+  <mat-dialog-content class="p-4 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+    <section class="pe-4 d-flex flex-11a flex-row flex-wrap">
       <article class="mb-6 d-flex flex-column flex-11a w-100">
         <div class="d-flex flex-column justify-content-start flex-00a">
           <img src="assets/images/NCUA/logo_blue.png">
@@ -39,7 +39,7 @@
         <hr>
         <div class="d-flex justify-content-start align-items-center flex-00a">
           <img style="width: 60px" src="assets/images/NCUA/ncua_seal_blue.svg" alt="ncua">
-          <div class="c-primary ml-3 d-flex flex-column justify-content-start">
+          <div class="c-primary ms-3 d-flex flex-column justify-content-start">
             <div class="h4">National Credit Union Administration</div>
           </div>
         </div>
diff --git a/CSETWebNg/src/app/dialogs/about-cf/about-cf.component.html b/CSETWebNg/src/app/dialogs/about-cf/about-cf.component.html
index dd6da3ea92..7f486128d8 100644
--- a/CSETWebNg/src/app/dialogs/about-cf/about-cf.component.html
+++ b/CSETWebNg/src/app/dialogs/about-cf/about-cf.component.html
@@ -21,11 +21,11 @@
   SOFTWARE. 
 -------------------------->
 <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-  <span class="mr-3 fs-base-6 cset-icons-cset-lock"></span>
+  <span class="me-3 fs-base-6 cset-icons-cset-lock"></span>
   <span>About</span>
 </div>
-<mat-dialog-content class="p-4 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-  <section class="pr-4 d-flex flex-11a flex-row flex-wrap">
+<mat-dialog-content class="p-4 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+  <section class="pe-4 d-flex flex-11a flex-row flex-wrap">
     <article class="mb-4 d-flex flex-column flex-11a w-100">
       <div class="d-flex flex-column justify-content-start flex-00a">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/CSETWebNg/src/app/dialogs/about-cie/about-cie.component.html b/CSETWebNg/src/app/dialogs/about-cie/about-cie.component.html
index c129057629..7eb75248b4 100644
--- a/CSETWebNg/src/app/dialogs/about-cie/about-cie.component.html
+++ b/CSETWebNg/src/app/dialogs/about-cie/about-cie.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <ng-container *transloco="let t">
     <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-      <span class="mr-3 fs-base-6 cset-icons-cset-lock"></span>
+      <span class="me-3 fs-base-6 cset-icons-cset-lock"></span>
       <span>{{ t('about.dialog title') }}</span>
     </div>
-    <mat-dialog-content class="p-4 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-      <section class="pr-4 d-flex flex-11a flex-row flex-wrap">
+    <mat-dialog-content class="p-4 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+      <section class="pe-4 d-flex flex-11a flex-row flex-wrap">
         <article class="mb-4 d-flex flex-column flex-11a w-100">
           <div class="d-flex flex-column justify-content-start flex-00a">
             <img src="assets/images/CIE/CIE_Logo_Blue_Standard.png" alt="CIE LOGO" class="img-fluid">
diff --git a/CSETWebNg/src/app/dialogs/about-cset/about-cset.component.html b/CSETWebNg/src/app/dialogs/about-cset/about-cset.component.html
index 28a73c43bd..549c310469 100644
--- a/CSETWebNg/src/app/dialogs/about-cset/about-cset.component.html
+++ b/CSETWebNg/src/app/dialogs/about-cset/about-cset.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <ng-container *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="mr-3 fs-base-6 cset-icons-cset-lock"></span>
+    <span class="me-3 fs-base-6 cset-icons-cset-lock"></span>
     <span>{{ t('about.dialog title') }}</span>
   </div>
-  <mat-dialog-content class="p-4 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-    <section class="pr-4 d-flex flex-11a flex-row flex-wrap">
+  <mat-dialog-content class="p-4 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+    <section class="pe-4 d-flex flex-11a flex-row flex-wrap">
       <article class="mb-4 d-flex flex-column flex-11a w-100">
         <div class="d-flex flex-column justify-content-start flex-00a">
           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/CSETWebNg/src/app/dialogs/about-renew/about-renew.component.html b/CSETWebNg/src/app/dialogs/about-renew/about-renew.component.html
index fbc2de60c3..090166e700 100644
--- a/CSETWebNg/src/app/dialogs/about-renew/about-renew.component.html
+++ b/CSETWebNg/src/app/dialogs/about-renew/about-renew.component.html
@@ -21,10 +21,10 @@
   SOFTWARE. 
 -------------------------->
 <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-  <span class="mr-3 fs-base-6 cset-icons-cset-lock"></span>
+  <span class="me-3 fs-base-6 cset-icons-cset-lock"></span>
   <span>About</span>
 </div>
-<mat-dialog-content class="p-4 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
+<mat-dialog-content class="p-4 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
   <section style="width: 30rem;" class="ox-hidden">
     <div class="mb-4">
       <div class="justify-content-start flex-00a">
diff --git a/CSETWebNg/src/app/dialogs/about-rra/about-rra.component.html b/CSETWebNg/src/app/dialogs/about-rra/about-rra.component.html
index 9ffd6fdbda..41ee8ba4d6 100644
--- a/CSETWebNg/src/app/dialogs/about-rra/about-rra.component.html
+++ b/CSETWebNg/src/app/dialogs/about-rra/about-rra.component.html
@@ -21,11 +21,11 @@
   SOFTWARE.
 -------------------------->
 <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-  <img src="/assets/images/RRA/hex_bug1.png" class="mr-3" style="height: 2rem;">
+  <img src="/assets/images/RRA/hex_bug1.png" class="me-3" style="height: 2rem;">
   <span>About</span>
 </div>
-<mat-dialog-content class="p-4 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-  <section class="pr-4">
+<mat-dialog-content class="p-4 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+  <section class="pe-4">
     <article class="mb-4 d-flex flex-column flex-11a w-100">
       <div class="d-flex flex-column justify-content-start flex-00a">
         <app-logo-rra></app-logo-rra>
diff --git a/CSETWebNg/src/app/dialogs/about-tsa/about-tsa.component.html b/CSETWebNg/src/app/dialogs/about-tsa/about-tsa.component.html
index cf072da2b8..b0508f64ba 100644
--- a/CSETWebNg/src/app/dialogs/about-tsa/about-tsa.component.html
+++ b/CSETWebNg/src/app/dialogs/about-tsa/about-tsa.component.html
@@ -21,11 +21,11 @@
   SOFTWARE.
 -------------------------->
 <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-  <span class="mr-3 fs-base-6 cset-icons-cset-lock"></span>
+  <span class="me-3 fs-base-6 cset-icons-cset-lock"></span>
   <span>About</span>
 </div>
-<mat-dialog-content class="p-4 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-  <section class="pr-4 d-flex flex-11a flex-row flex-wrap">
+<mat-dialog-content class="p-4 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+  <section class="pe-4 d-flex flex-11a flex-row flex-wrap">
     <article class="mb-4 d-flex flex-column flex-11a w-100">
       <div class="d-flex flex-column justify-content-start flex-00a">
         <!-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
diff --git a/CSETWebNg/src/app/dialogs/accessibility-statement/accessibility-statement.component.html b/CSETWebNg/src/app/dialogs/accessibility-statement/accessibility-statement.component.html
index 202678d3f6..ad7779d76e 100644
--- a/CSETWebNg/src/app/dialogs/accessibility-statement/accessibility-statement.component.html
+++ b/CSETWebNg/src/app/dialogs/accessibility-statement/accessibility-statement.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div class="accessibility-dialog d-flex flex-column justify-content-center flex-11a" *transloco="let t">
     <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a w-100">
-        <span class="cset-icons-document mr-3 fs-base-6"></span>
+        <span class="cset-icons-document me-3 fs-base-6"></span>
         <span>{{t('menu.help.legal.accessibility statement.accessibility statement')}}</span>
     </div>
 
-    <mat-dialog-content class="oy-auto p-3 pr-0 d-flex flex-column flex-11a w-100">
-        <div class="pr-3 d-flex flex-column align-items-start flex-11a">
+    <mat-dialog-content class="oy-auto p-3 pe-0 d-flex flex-column flex-11a w-100">
+        <div class="pe-3 d-flex flex-column align-items-start flex-11a">
             <p class="w-100" [innerHTML]="t('menu.help.legal.accessibility statement.p.1')"></p>
             <h5>{{t('menu.help.legal.accessibility statement.htag.adobe acrobat pdf files')}}</h5>
             <p class="w-100" [innerHTML]="t('menu.help.legal.accessibility statement.p.2')"></p>
diff --git a/CSETWebNg/src/app/dialogs/add-requirement/add-requirement/add-requirement.component.html b/CSETWebNg/src/app/dialogs/add-requirement/add-requirement/add-requirement.component.html
index 152d839f1e..45cb7a0d71 100644
--- a/CSETWebNg/src/app/dialogs/add-requirement/add-requirement/add-requirement.component.html
+++ b/CSETWebNg/src/app/dialogs/add-requirement/add-requirement/add-requirement.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <div class="advisory-dialog 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="mr-3 fs-base-6 cset-icons-books-stack-2"></span>
+    <span class="me-3 fs-base-6 cset-icons-books-stack-2"></span>
     <span>Add Requirement</span>
   </div>
 
-  <form class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <form class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     <mat-dialog-content>
       <p>
         Category and Subcategory are used to group Requirements in CSET. Question Group Heading and Subcategory are
diff --git a/CSETWebNg/src/app/dialogs/advisory/advisory.component.html b/CSETWebNg/src/app/dialogs/advisory/advisory.component.html
index d6cedd933d..223ecc48b0 100644
--- a/CSETWebNg/src/app/dialogs/advisory/advisory.component.html
+++ b/CSETWebNg/src/app/dialogs/advisory/advisory.component.html
@@ -23,11 +23,11 @@
 <div *transloco="let t">
   <div class="advisory-dialog 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="mr-3 fs-base-6 cset-icons-advisory"></span>
+      <span class="me-3 fs-base-6 cset-icons-advisory"></span>
       <span>{{t('advisory.title')}}</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="px-3">
         <h4>{{appLongName}}</h4>
diff --git a/CSETWebNg/src/app/dialogs/alert/alert.component.html b/CSETWebNg/src/app/dialogs/alert/alert.component.html
index 697cfb3487..a68cb3af44 100644
--- a/CSETWebNg/src/app/dialogs/alert/alert.component.html
+++ b/CSETWebNg/src/app/dialogs/alert/alert.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div class="alert-dialog d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span [ngClass]="iconClass" class="fs-base-6 mr-3"></span>
+    <span [ngClass]="iconClass" class="fs-base-6 me-3"></span>
     <span>{{ data.title | titlecase }}</span>
   </div>
 
-  <div class="p-3 pb-0 pr-0 mt-2 oy-auto d-flex flex-column flex-11a">
-    <mat-dialog-content class="p-0 pr-3">
+  <div class="p-3 pb-0 pe-0 mt-2 oy-auto d-flex flex-column flex-11a">
+    <mat-dialog-content class="p-0 pe-3">
       <div [innerHTML]="data.messageText | safe">
       </div>
     </mat-dialog-content>
diff --git a/CSETWebNg/src/app/dialogs/assessment-documents/assessment-documents.component.html b/CSETWebNg/src/app/dialogs/assessment-documents/assessment-documents.component.html
index 9eb48e0709..3cb0e68f8d 100644
--- a/CSETWebNg/src/app/dialogs/assessment-documents/assessment-documents.component.html
+++ b/CSETWebNg/src/app/dialogs/assessment-documents/assessment-documents.component.html
@@ -22,19 +22,19 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="cset-icons-books-stack-1 fs-base-6 mr-3"></span>
+    <span class="cset-icons-books-stack-1 fs-base-6 me-3"></span>
     <span>Assessment Documents</span>
   </div>
 
-  <mat-dialog-content class="p-3 pb-0 pr-0 mt-2 oy-auto d-flex flex-column flex-11a">
-    <div class="pr-3">
+  <mat-dialog-content class="p-3 pb-0 pe-0 mt-2 oy-auto d-flex flex-column flex-11a">
+    <div class="pe-3">
       <div *ngIf="documents === null" class="spinner-container" style="margin: .5em auto">
         <div style="max-width: 30px; max-height: 30px;"></div>
       </div>
       <div *ngIf="documents?.length === 0" class="d-flex flex-11a">
         This assessment has no documents.
       </div>
-      <div *ngIf="documents?.length > 0" class="pr-3 d-flex flex-11a">
+      <div *ngIf="documents?.length > 0" class="pe-3 d-flex flex-11a">
         <table class="assessment-documents">
           <tr>
             <th style="width:50%;">Document Title</th>
diff --git a/CSETWebNg/src/app/dialogs/assessment-encryption/export-password/export-password.component.html b/CSETWebNg/src/app/dialogs/assessment-encryption/export-password/export-password.component.html
index 1840acca9a..58c67e91a1 100644
--- a/CSETWebNg/src/app/dialogs/assessment-encryption/export-password/export-password.component.html
+++ b/CSETWebNg/src/app/dialogs/assessment-encryption/export-password/export-password.component.html
@@ -22,15 +22,15 @@
 -------------------------->
 <div *transloco="let t" 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="mr-3 fs-base-6 cset-icons-exclamation-triangle" aria-label="charter-warning"></span>
+    <span class="me-3 fs-base-6 cset-icons-exclamation-triangle" aria-label="charter-warning"></span>
     <span>{{ dialogTitle }}</span>
   </div>
 
-  <mat-dialog-content class="pt-3 pl-3 pr-3 d-flex flex-column flex-11a">
+  <mat-dialog-content class="pt-3 ps-3 pe-3 d-flex flex-column flex-11a">
     <p>To encrypt your assessment, please enter a password.</p>
     <p>If you proceed without entering a password, no encryption will be used.</p>
 
-    <div class="input-container ml-1 mr-1">
+    <div class="input-container ms-1 me-1">
       <input [type]="showPassword ? 'text' : 'password'" tabindex="0" class="form-control mt-2" name="password"
         placeholder="Password" [(ngModel)]="password" />
       <div *ngIf="!showPassword" class="input-icon" (click)="togglePasswordVisibility()" matTooltip="Show password">
diff --git a/CSETWebNg/src/app/dialogs/assessment-encryption/import-password/import-password.component.html b/CSETWebNg/src/app/dialogs/assessment-encryption/import-password/import-password.component.html
index 88043b3246..a0918ca93d 100644
--- a/CSETWebNg/src/app/dialogs/assessment-encryption/import-password/import-password.component.html
+++ b/CSETWebNg/src/app/dialogs/assessment-encryption/import-password/import-password.component.html
@@ -22,15 +22,15 @@
 -------------------------->
 <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="mr-3 fs-base-6 cset-icons-exclamation-triangle" aria-label="charter-warning"></span>
+    <span class="me-3 fs-base-6 cset-icons-exclamation-triangle" aria-label="charter-warning"></span>
     <span>{{ dialogTitle }}</span>
   </div>
 
-  <mat-dialog-content class="pt-3 pl-3 pr-3 d-flex flex-column flex-11a">
+  <mat-dialog-content class="pt-3 ps-3 pe-3 d-flex flex-column flex-11a">
     <p>It appears that one, or more of your assessment(s) is encrypted.</p>
     <p>Please enter the password to proceed.</p>
 
-    <div class="input-container ml-1 mr-1">
+    <div class="input-container ms-1 me-1">
       <input [type]="showPassword ? 'text' : 'password'" tabindex="0" class="form-control mt-2" name="password"
         placeholder="Password" [(ngModel)]="password" />
       <div *ngIf="!showPassword" class="input-icon" (click)="togglePasswordVisibility()" matTooltip="Show password">
diff --git a/CSETWebNg/src/app/dialogs/change-password/change-password.component.html b/CSETWebNg/src/app/dialogs/change-password/change-password.component.html
index 915ead3551..dfcee391f8 100644
--- a/CSETWebNg/src/app/dialogs/change-password/change-password.component.html
+++ b/CSETWebNg/src/app/dialogs/change-password/change-password.component.html
@@ -22,45 +22,45 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="mr-3 fs-base-6 cset-icons-key"></span>
+    <span class="me-3 fs-base-6 cset-icons-key"></span>
     <div>{{ t('change password.dialog title') }}</div>
   </div>
-  <mat-dialog-content class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <mat-dialog-content class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     <div class="alert alert-default">
       <ul class="list-group list-group-flush">
         <li class="list-group-item"><span *ngIf="passwordResponse.passwordLengthMet"><i
-              class='fa-solid fa-square-check mr-2'></i></span><span *ngIf="!passwordResponse.passwordLengthMet"><i
-              class='fa-solid fa-square-xmark mr-2'></i></span>{{ t('change password.rules.length between', {lengthMin:
+              class='fa-solid fa-square-check me-2'></i></span><span *ngIf="!passwordResponse.passwordLengthMet"><i
+              class='fa-solid fa-square-xmark me-2'></i></span>{{ t('change password.rules.length between', {lengthMin:
           passwordResponse.passwordLengthMin, lengthMax: passwordResponse.passwordLengthMax}) }}</li>
         <li class="list-group-item"><span *ngIf="passwordResponse.passwordContainsNumbers"><i
-              class='fa-solid fa-square-check mr-2'></i></span><span *ngIf="!passwordResponse.passwordContainsNumbers"><i
-              class='fa-solid fa-square-xmark mr-2'></i></span>{{ t('change password.rules.required numbers') }}</li>
+              class='fa-solid fa-square-check me-2'></i></span><span *ngIf="!passwordResponse.passwordContainsNumbers"><i
+              class='fa-solid fa-square-xmark me-2'></i></span>{{ t('change password.rules.required numbers') }}</li>
         <li class="list-group-item"><span *ngIf="passwordResponse.passwordContainsLower"><i
-              class='fa-solid fa-square-check mr-2'></i></span><span *ngIf="!passwordResponse.passwordContainsLower"><i
-              class='fa-solid fa-square-xmark mr-2'></i></span>{{ t('change password.rules.required lowercase') }}</li>
+              class='fa-solid fa-square-check me-2'></i></span><span *ngIf="!passwordResponse.passwordContainsLower"><i
+              class='fa-solid fa-square-xmark me-2'></i></span>{{ t('change password.rules.required lowercase') }}</li>
         <li class="list-group-item"><span *ngIf="passwordResponse.passwordContainsUpper"><i
-              class='fa-solid fa-square-check mr-2'></i></span><span *ngIf="!passwordResponse.passwordContainsUpper"><i
-              class='fa-solid fa-square-xmark mr-2'></i></span>{{ t('change password.rules.required uppercase') }}</li>
+              class='fa-solid fa-square-check me-2'></i></span><span *ngIf="!passwordResponse.passwordContainsUpper"><i
+              class='fa-solid fa-square-xmark me-2'></i></span>{{ t('change password.rules.required uppercase') }}</li>
         <li class="list-group-item"><span *ngIf="passwordResponse.passwordContainsSpecial"><i
-              class='fa-solid fa-square-check mr-2'></i></span><span *ngIf="!passwordResponse.passwordContainsSpecial"><i
-              class='fa-solid fa-square-xmark mr-2'></i></span>{{ t('change password.rules.required special') }}</li>
+              class='fa-solid fa-square-check me-2'></i></span><span *ngIf="!passwordResponse.passwordContainsSpecial"><i
+              class='fa-solid fa-square-xmark me-2'></i></span>{{ t('change password.rules.required special') }}</li>
         <li class="list-group-item"><span *ngIf="passwordResponse.passwordNotReused"><i
-              class='fa-solid fa-square-check mr-2'></i></span><span *ngIf="!passwordResponse.passwordNotReused"><i
-              class='fa-solid fa-square-xmark mr-2'></i></span>{{ t('change password.rules.previous count', {count:
+              class='fa-solid fa-square-check me-2'></i></span><span *ngIf="!passwordResponse.passwordNotReused"><i
+              class='fa-solid fa-square-xmark me-2'></i></span>{{ t('change password.rules.previous count', {count:
           passwordResponse.numberOfHistoricalPasswords}) }}</li>
       </ul>
     </div>
     <div class="alert alert-danger" *ngIf="message?.length > 0" [innerHTML]="message"></div>
 
-    <form #fReg="ngForm" (ngSubmit)="onPasswordChangeClick(fReg)" class="pr-3">
+    <form #fReg="ngForm" (ngSubmit)="onPasswordChangeClick(fReg)" class="pe-3">
       <div class="form-group">
         <div class="d-flex justify-content-between">
           <label required for="currentPassword">{{ t('change password.current password') }}</label>
           <div *ngIf="!showPassword" class="show-hide-password" (click)="togglePasswordVisibility()">
-            {{ t('change password.show passwords') }}<i class="fas fa-eye ml-1"></i>
+            {{ t('change password.show passwords') }}<i class="fas fa-eye ms-1"></i>
           </div>
           <div *ngIf="showPassword" class="show-hide-password" (click)="togglePasswordVisibility()">
-            {{ t('change password.hide passwords') }}<i class="fas fa-eye-slash ml-1"></i>
+            {{ t('change password.hide passwords') }}<i class="fas fa-eye-slash ms-1"></i>
           </div>
         </div>
         <input [type]="showPassword ? 'text' : 'password'" id="currentPassword" name="currentPassword"
@@ -85,8 +85,8 @@
         {{ t('change password.new and confirmation required') }}</div>
 
       <mat-dialog-actions class="p-3 pt-0 mb-0 d-flex justify-content-between flex-11a">
-        <button class="btn btn-primary m-0 mr-1">{{ t('buttons.change password') }}</button>
-        <button class="btn btn-secondary mr-1" (click)="cancel()">{{ t('buttons.cancel') }}</button>
+        <button class="btn btn-primary m-0 me-1">{{ t('buttons.change password') }}</button>
+        <button class="btn btn-secondary me-1" (click)="cancel()">{{ t('buttons.cancel') }}</button>
       </mat-dialog-actions>
     </form>
   </mat-dialog-content>
diff --git a/CSETWebNg/src/app/dialogs/charter-mistmatch/charter-mismatch.component.html b/CSETWebNg/src/app/dialogs/charter-mistmatch/charter-mismatch.component.html
index 3d113530fa..7555ccfb91 100644
--- a/CSETWebNg/src/app/dialogs/charter-mistmatch/charter-mismatch.component.html
+++ b/CSETWebNg/src/app/dialogs/charter-mistmatch/charter-mismatch.component.html
@@ -22,10 +22,10 @@
 -------------------------->
 <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="mr-3 fs-base-6 cset-icons-exclamation-triangle" aria-label="charter-warning"></span>
+        <span class="me-3 fs-base-6 cset-icons-exclamation-triangle" aria-label="charter-warning"></span>
         <span>Examination Mismatch Warning</span>
     </div>
-    <mat-dialog-content class="pt-3 pl-3 pr-3 d-flex flex-column flex-11a">
+    <mat-dialog-content class="pt-3 ps-3 pe-3 d-flex flex-column flex-11a">
         <div class="">
             <p>You are attempting to merge examinations that appear to be different.</p>
             <p>If you continue, the first exam's demographic details will be used.</p>
diff --git a/CSETWebNg/src/app/dialogs/cie-documents/cie-documents.component.html b/CSETWebNg/src/app/dialogs/cie-documents/cie-documents.component.html
index 0e80d32a0a..84d877b0a9 100644
--- a/CSETWebNg/src/app/dialogs/cie-documents/cie-documents.component.html
+++ b/CSETWebNg/src/app/dialogs/cie-documents/cie-documents.component.html
@@ -22,19 +22,19 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a" *transloco="let t">
     <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-      <span class="cset-icons-books-stack-1 fs-base-6 mr-3"></span>
+      <span class="cset-icons-books-stack-1 fs-base-6 me-3"></span>
       <span>Assessment Documents</span>
     </div>
   
-    <mat-dialog-content class="p-3 pb-0 pr-0 mt-2 oy-auto d-flex flex-column flex-11a">
-      <div class="pr-3">
+    <mat-dialog-content class="p-3 pb-0 pe-0 mt-2 oy-auto d-flex flex-column flex-11a">
+      <div class="pe-3">
         <div *ngIf="documents === null" class="spinner-container" style="margin: .5em auto">
           <div style="max-width: 30px; max-height: 30px;"></div>
         </div>
         <div *ngIf="documents?.length === 0" class="d-flex flex-11a">
           This assessment has no documents.
         </div>
-        <div *ngIf="documents?.length > 0" class="pr-3 d-flex flex-11a">
+        <div *ngIf="documents?.length > 0" class="pe-3 d-flex flex-11a">
           <table class="assessment-documents">
             <tr>
                 <th style="width:35%;">Question Title</th>
diff --git a/CSETWebNg/src/app/dialogs/component-override/component-override.component.html b/CSETWebNg/src/app/dialogs/component-override/component-override.component.html
index c88a0abb85..a8ba158275 100644
--- a/CSETWebNg/src/app/dialogs/component-override/component-override.component.html
+++ b/CSETWebNg/src/app/dialogs/component-override/component-override.component.html
@@ -86,7 +86,7 @@
       </div>
     </div>
   </mat-dialog-content>
-  <mat-dialog-actions class="pl-4 p-1" style="margin-bottom:15px;">
+  <mat-dialog-actions class="ps-4 p-1" style="margin-bottom:15px;">
     <button class="btn btn-secondary" (click)="close()">{{t('buttons.ok')}}</button>
   </mat-dialog-actions>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/dialogs/confirm/confirm.component.html b/CSETWebNg/src/app/dialogs/confirm/confirm.component.html
index a64447dc7d..236409c9d3 100644
--- a/CSETWebNg/src/app/dialogs/confirm/confirm.component.html
+++ b/CSETWebNg/src/app/dialogs/confirm/confirm.component.html
@@ -22,17 +22,17 @@
 -------------------------->
 <div *transloco="let t" class="confirm-dialog 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="mr-3 fs-base-6 cset-icons-check-circle"></span>
+    <span class="me-3 fs-base-6 cset-icons-check-circle"></span>
     <span>{{ t('dialogs.please confirm') }}</span>
   </div>
 
-  <div class="p-3 pb-0 pr-0 mt-2 oy-auto d-flex flex-column flex-11a">
-    <mat-dialog-content class="p-0 pr-3 d-flex flex-column flex-11a text-center" [innerHtml]="confirmMessage | safe">
+  <div class="p-3 pb-0 pe-0 mt-2 oy-auto d-flex flex-column flex-11a">
+    <mat-dialog-content class="p-0 pe-3 d-flex flex-column flex-11a text-center" [innerHtml]="confirmMessage | safe">
     </mat-dialog-content>
   </div>
 
   <mat-dialog-actions class="p-3 mb-0 d-flex justify-content-start flex-00a">
-    <button class=" btn btn-primary m-0 mr-2" (click)="dialogRef.close(true)">{{ t('answer-options.button-labels.yes')
+    <button class=" btn btn-primary m-0 me-2" (click)="dialogRef.close(true)">{{ t('answer-options.button-labels.yes')
       }}</button>
     <button class="btn btn-secondary" (click)="dialogRef.close(false)">{{ t('answer-options.button-labels.no')
       }}</button>
diff --git a/CSETWebNg/src/app/dialogs/edit-user/edit-user.component.html b/CSETWebNg/src/app/dialogs/edit-user/edit-user.component.html
index e58fb53710..5ff87e2f83 100644
--- a/CSETWebNg/src/app/dialogs/edit-user/edit-user.component.html
+++ b/CSETWebNg/src/app/dialogs/edit-user/edit-user.component.html
@@ -22,13 +22,13 @@
 -------------------------->
 <div *transloco="let t" class="edit-user-dialog 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-profile fs-base-6 mr-3"></span>
+    <span class="cset-icons-profile fs-base-6 me-3"></span>
     <span>{{t('user profile.dialog title')}}</span>
   </div>
 
-  <mat-dialog-content class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <mat-dialog-content class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     <form name="form" #userForm="ngForm" (ngSubmit)="save(userForm)">
-      <div class="pr-3">
+      <div class="pe-3">
 
         <div class="form-group" [ngClass]="{ 'has-error': !firstName.valid }">
           <label required for="firstName">{{t('user profile.first name')}}</label>
diff --git a/CSETWebNg/src/app/dialogs/ejection/ejection.component.html b/CSETWebNg/src/app/dialogs/ejection/ejection.component.html
index 887e77e78e..89c0975085 100644
--- a/CSETWebNg/src/app/dialogs/ejection/ejection.component.html
+++ b/CSETWebNg/src/app/dialogs/ejection/ejection.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <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>Access Denied</span>
   </div>
-  <mat-dialog-content class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
-    <p class="pr-3">Your session has expired, a connection error has occurred, or you are no longer authorized to access
+  <mat-dialog-content class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
+    <p class="pe-3">Your session has expired, a connection error has occurred, or you are no longer authorized to access
       that
       assessment.</p>
     <p>Please log in again.</p>
diff --git a/CSETWebNg/src/app/dialogs/email/email.component.html b/CSETWebNg/src/app/dialogs/email/email.component.html
index 509222ed4f..1b435c77c2 100644
--- a/CSETWebNg/src/app/dialogs/email/email.component.html
+++ b/CSETWebNg/src/app/dialogs/email/email.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="mr-3 fs-base-6 cset-icons-envelope"></span>
+    <span class="me-3 fs-base-6 cset-icons-envelope"></span>
     <span>Invitation Email</span>
   </div>
 
-  <form class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <form class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     <mat-dialog-content>
       <div class="mt-3">
         <label>From:</label> {{from.firstName}} {{from.lastName}} &lt;{{from.primaryEmail}}&gt;
@@ -47,7 +47,7 @@
       <div class="mt-3 d-flex flex-column flex-11a">
         <label for="subj">Subject:</label>
         <input type="text" maxlength="250" name="subj" id="subj" placeholder="Subject" [(ngModel)]="subject"
-          class="pl-2 d-flex flex-11a" style="min-width: 50vw">
+          class="ps-2 d-flex flex-11a" style="min-width: 50vw">
       </div>
 
       <div class="mt-3">
diff --git a/CSETWebNg/src/app/dialogs/enable-protected/enable-protected.component.html b/CSETWebNg/src/app/dialogs/enable-protected/enable-protected.component.html
index 18dadf0117..195b55ad84 100644
--- a/CSETWebNg/src/app/dialogs/enable-protected/enable-protected.component.html
+++ b/CSETWebNg/src/app/dialogs/enable-protected/enable-protected.component.html
@@ -22,10 +22,10 @@
 -------------------------->
 <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-key-shield fs-base-6 mr-3"></span>
+    <span class="cset-icons-key-shield fs-base-6 me-3"></span>
     <span>Protected Features</span>
   </div>
-  <mat-dialog-content class="pb-0 p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <mat-dialog-content class="pb-0 p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     <table class="mt-2 mb-4 mx-2" *ngIf="modulesList?.length > 0">
       <tr>
         <th style="width: 25%">Module Name</th>
@@ -58,7 +58,7 @@
     <div *ngIf="showCisaAssessorWorkflowSwitch()"
       class="form-group d-flex align-items-center justify-content-between mt-4 mx-2">
       <label for="csaToggle" class="font-weight-bold">CISA Assessor Workflow </label>
-      <div id="csaToggle" class="btn-group btn-group-toggle w-50 ml-2" data-toggle="buttons">
+      <div id="csaToggle" class="btn-group btn-group-toggle w-50 ms-2" data-toggle="buttons">
         <label class="btn btn-level btn-rounded form-check-label" [class.active]="cisaWorkflowEnabled"
           (change)="toggleCisaAssessorWorkflow()">
           <input class="form-check-input" name="csaModeYes" id="csaModeYes" type="radio" autocomplete="off" tabindex="0"
diff --git a/CSETWebNg/src/app/dialogs/excel-export/excel-export.component.html b/CSETWebNg/src/app/dialogs/excel-export/excel-export.component.html
index 8b56e5de78..8a4b661059 100644
--- a/CSETWebNg/src/app/dialogs/excel-export/excel-export.component.html
+++ b/CSETWebNg/src/app/dialogs/excel-export/excel-export.component.html
@@ -22,7 +22,7 @@
 -------------------------->
 
 <div mat-dialog-title class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span style="color: white;" class="mr-2 cset-icons-export-excel"></span>
+    <span style="color: white;" class="me-2 cset-icons-export-excel"></span>
     <span style="color: white;">Excel Export</span>
 </div>
 <mat-dialog-content>
@@ -35,7 +35,7 @@
 
             </div>
             <div class="row">
-                <div class="col-12 ml-4 mb-2">
+                <div class="col-12 ms-4 mb-2">
                     <input type="checkbox" name="doNotShowAgain" class="mt-1" autocomplete="off"
                         (change)="setDoNotShow()" [(ngModel)]="doNotShow" [checked]="doNotShow">
                     <label for="doNotShowAgain">&nbsp;Do not show this message again</label>
@@ -45,7 +45,7 @@
     </div>
 </mat-dialog-content>
 
-<mat-dialog-actions class="pl-4 p-1" style="margin-bottom:15px;">
+<mat-dialog-actions class="ps-4 p-1" style="margin-bottom:15px;">
     <button class="btn btn-primary" (click)="exportToExcel()">Export</button>
     <button class="btn btn-secondary" (click)="close()">Cancel</button>
 </mat-dialog-actions>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/dialogs/excel-export/ncua-export/ncua-excel-export.component.html b/CSETWebNg/src/app/dialogs/excel-export/ncua-export/ncua-excel-export.component.html
index 91242bfdf3..6b4d937b45 100644
--- a/CSETWebNg/src/app/dialogs/excel-export/ncua-export/ncua-excel-export.component.html
+++ b/CSETWebNg/src/app/dialogs/excel-export/ncua-export/ncua-excel-export.component.html
@@ -22,7 +22,7 @@
 -------------------------->
 
 <div mat-dialog-title class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span style="color: white;" class="mr-2 cset-icons-export-excel"></span>
+    <span style="color: white;" class="me-2 cset-icons-export-excel"></span>
     <span style="color: white;">Excel Export</span>
 </div>
 <mat-dialog-content>
@@ -39,10 +39,10 @@
     </div>
 </mat-dialog-content>
 
-<mat-dialog-actions class="pl-4 p-1" style="margin-bottom:15px;">
-    <button class="btn btn-secondary mr-4" (click)="close()">Cancel</button>
+<mat-dialog-actions class="ps-4 p-1" style="margin-bottom:15px;">
+    <button class="btn btn-secondary me-4" (click)="close()">Cancel</button>
 
-    <button [matTooltip]="getAcetTooltip()" class="btn btn-primary mr-1" [disabled]="this.acetCount == 0"
+    <button [matTooltip]="getAcetTooltip()" class="btn btn-primary me-1" [disabled]="this.acetCount == 0"
         (click)="exportAcetToExcel()">Export ACET Assessments</button>
 
     <button [matTooltip]="getIseTooltip()" class="btn btn-primary" [disabled]="this.iseCount == 0"
diff --git a/CSETWebNg/src/app/dialogs/global-configuration/global-configuration.component.html b/CSETWebNg/src/app/dialogs/global-configuration/global-configuration.component.html
index c0424e9f2e..39beb033f6 100644
--- a/CSETWebNg/src/app/dialogs/global-configuration/global-configuration.component.html
+++ b/CSETWebNg/src/app/dialogs/global-configuration/global-configuration.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a" style="min-width: 300px;">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="cset-icons-cog fs-base-6 mr-3"></span>
+    <span class="cset-icons-cog fs-base-6 me-3"></span>
     <span>Submission Export Path</span>
   </div>
   <div class="m-2" style="color:red;">{{errorMessage}} </div>
-  <mat-dialog-content class="pb-0 p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <mat-dialog-content class="pb-0 p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     UNC Path:
     <textarea [(ngModel)]='uncPath'>
 
diff --git a/CSETWebNg/src/app/dialogs/global-parameters/global-parameters.component.html b/CSETWebNg/src/app/dialogs/global-parameters/global-parameters.component.html
index 2b61a334fb..0abfa18e35 100644
--- a/CSETWebNg/src/app/dialogs/global-parameters/global-parameters.component.html
+++ b/CSETWebNg/src/app/dialogs/global-parameters/global-parameters.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div class="global-parameters-dialog d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="cset-icons-puzzle fs-base-6 mr-3"></span>
+    <span class="cset-icons-puzzle fs-base-6 me-3"></span>
     <span>Parameter Editor</span>
   </div>
 
-  <mat-dialog-content class="p-3 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-    <div (keydown.enter)="handleEnter($event)" class="pr-3">
+  <mat-dialog-content class="p-3 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+    <div (keydown.enter)="handleEnter($event)" class="pe-3">
       <p>
         Many Standards in 'Requirements Mode' contain parameters that you can change to match your
         specific situation. The table below allows you to change the parameter values for the indicated
diff --git a/CSETWebNg/src/app/dialogs/import demographics/import-demographics.component.html b/CSETWebNg/src/app/dialogs/import demographics/import-demographics.component.html
index 064b3abe03..d93ebdc669 100644
--- a/CSETWebNg/src/app/dialogs/import demographics/import-demographics.component.html	
+++ b/CSETWebNg/src/app/dialogs/import demographics/import-demographics.component.html	
@@ -25,18 +25,18 @@
   <div class="mat-dialog-header p-3 d-flex justify-content-start flex-11a">{{ appName }} File Import</div>
   <h4 style="position: sticky; top: 0; padding-top: 15px; padding-left: 15px;" class="mb-2 c-primary">Uploading Files
   </h4>
-  <mat-dialog-content class="oy-auto p-3 pr-0 d-flex flex-column flex-00a">
-    <div class="pr-3">
+  <mat-dialog-content class="oy-auto p-3 pe-0 d-flex flex-column flex-00a">
+    <div class="pe-3">
       <mat-list class="pt-1">
         <mat-list-item *ngFor="let file of files; let i = index">
           <label mat-line class="mt-1 fs-base-5">{{file.name}}</label>
           <ng-container
             *ngIf="(configSvc.installationMode !== 'ACET' || !ncuaSvc.switchStatus) && getAssessmentHint(file.name)">
-            <label mat-line class="ml-2 pt=1 pb-2 h6">Hint: <i>{{ getAssessmentHint(file.name) }}</i></label>
+            <label mat-line class="ms-2 pt=1 pb-2 h6">Hint: <i>{{ getAssessmentHint(file.name) }}</i></label>
           </ng-container>
           <mat-progress-bar *ngIf="progress && !progress[file.name].progress.source.hasError" style="width: 65%"
             mode="determinate" [value]="progress[file.name].progress | async"></mat-progress-bar>
-          <i *ngIf="progress[file.name].progress.source.hasError && xCount == 0" class="fa-solid fa-xmark ml-1"
+          <i *ngIf="progress[file.name].progress.source.hasError && xCount == 0" class="fa-solid fa-xmark ms-1"
             style="color: red"></i>
         </mat-list-item>
       </mat-list>
@@ -46,7 +46,7 @@ <h4 style="position: sticky; top: 0; padding-top: 15px; padding-left: 15px;" cla
   <div style="position: sticky; bottom: 0; padding-bottom: 15px; padding-left: 15px;">
     <label style="padding-right: 15px;" class="mt-4">{{statusText}}</label>
 
-    <mat-dialog-actions class="mr-3 p-0 mb-0 d-flex justify-content-between flex-00a">
+    <mat-dialog-actions class="me-3 p-0 mb-0 d-flex justify-content-between flex-00a">
       <!-- <button class="btn btn-primary" [disabled]="!canBeClosed" (click)="closeDialog()">{{primaryButtonText}}</button>
       <button class="btn btn-secondary" *ngIf="showCancelButton" mat-dialog-close>Cancel</button> -->
       <button class="btn btn-secondary" *ngIf="showCancelButton && data.isCsafUpload" (click)="cancelUpload()"
diff --git a/CSETWebNg/src/app/dialogs/inline-parameter/inline-parameter.component.html b/CSETWebNg/src/app/dialogs/inline-parameter/inline-parameter.component.html
index c20b5b1820..ec76513ffb 100644
--- a/CSETWebNg/src/app/dialogs/inline-parameter/inline-parameter.component.html
+++ b/CSETWebNg/src/app/dialogs/inline-parameter/inline-parameter.component.html
@@ -22,8 +22,8 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a">
   <div class="mat-dialog-header p-3 d-flex justify-content-start flex-11a">Define Parameter Value</div>
-  <mat-dialog-content class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
-    <div class="pr-3">
+  <mat-dialog-content class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
+    <div class="pe-3">
       <p>
         Define the input value for the selected parameter.
       </p>
diff --git a/CSETWebNg/src/app/dialogs/ise-merit/merit-check.component.html b/CSETWebNg/src/app/dialogs/ise-merit/merit-check.component.html
index 05e1b4bd3e..d2f7ec5220 100644
--- a/CSETWebNg/src/app/dialogs/ise-merit/merit-check.component.html
+++ b/CSETWebNg/src/app/dialogs/ise-merit/merit-check.component.html
@@ -21,7 +21,7 @@
   SOFTWARE.
 -------------------------->
 <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="mr-3 fs-base-6 cset-icons-light-bulb"></span>
+    <span class="me-3 fs-base-6 cset-icons-light-bulb"></span>
     <h2 style="color: white;">{{dialogTitle}}</h2>
 </div>
 
diff --git a/CSETWebNg/src/app/dialogs/keyboard-shortcuts/keyboard-shortcuts.component.html b/CSETWebNg/src/app/dialogs/keyboard-shortcuts/keyboard-shortcuts.component.html
index 727bee7b41..f8d81c4742 100644
--- a/CSETWebNg/src/app/dialogs/keyboard-shortcuts/keyboard-shortcuts.component.html
+++ b/CSETWebNg/src/app/dialogs/keyboard-shortcuts/keyboard-shortcuts.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div class="keyboard-shortcut-dialog d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="mr-3 fs-base-6 cset-icons-keyboard-shortcuts-key"></span>
+    <span class="me-3 fs-base-6 cset-icons-keyboard-shortcuts-key"></span>
     <span>{{ t('keyboard.dialog title') }}</span>
   </div>
 
-  <mat-dialog-content class="p-3 pr-0 pb-0 oy-auto d-flex flex-column flex-11a">
-    <div class="pr-3">
+  <mat-dialog-content class="p-3 pe-0 pb-0 oy-auto d-flex flex-column flex-11a">
+    <div class="pe-3">
       <ul class="keyboard-shortcuts">
         <li>
           <dl>
diff --git a/CSETWebNg/src/app/dialogs/license/license.component.html b/CSETWebNg/src/app/dialogs/license/license.component.html
index bb6e10dbb5..7517e9a993 100644
--- a/CSETWebNg/src/app/dialogs/license/license.component.html
+++ b/CSETWebNg/src/app/dialogs/license/license.component.html
@@ -24,8 +24,8 @@
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
     <span>The MIT License (MIT)</span>
   </div>
-  <mat-dialog-content class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
-    <div class="pr-3">
+  <mat-dialog-content class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
+    <div class="pe-3">
       <p>
         Copyright 2024 Battelle Energy Alliance, LLC
       </p>
diff --git a/CSETWebNg/src/app/dialogs/malcolm/malcolm-instructions/malcolm-instructions.component.html b/CSETWebNg/src/app/dialogs/malcolm/malcolm-instructions/malcolm-instructions.component.html
index 29c921fcf2..64eb9d2de0 100644
--- a/CSETWebNg/src/app/dialogs/malcolm/malcolm-instructions/malcolm-instructions.component.html
+++ b/CSETWebNg/src/app/dialogs/malcolm/malcolm-instructions/malcolm-instructions.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a" style="width:800px;">
     <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-        <span class="mr-3 fs-base-6 {{iconClass}}"></span>
+        <span class="me-3 fs-base-6 {{iconClass}}"></span>
         <span>Malcolm Instructions</span>
     </div>
   
-    <mat-dialog-content class="p-3 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-        <div class="pr-3">
+    <mat-dialog-content class="p-3 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+        <div class="pe-3">
             Enter the IP address of the Malcolm instance to attempt to pull data from Malcolm directly.
             <div class="d-flex" style="justify-content: space-between;">
                 <div class="d-flex flex-column">
@@ -68,7 +68,7 @@
         </div>
     </mat-dialog-content>
   
-    <mat-dialog-actions class="p-3 pt-3 mb-0 d-flex ml-auto flex-00a">
+    <mat-dialog-actions class="p-3 pt-3 mb-0 d-flex ms-auto flex-00a">
         <button class="btn btn-secondary" (click)="dialogRef.close(true)">Close</button>
     </mat-dialog-actions>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/dialogs/malcolm/malcolm-upload-error.component.html b/CSETWebNg/src/app/dialogs/malcolm/malcolm-upload-error.component.html
index 71f778bb72..4be766e17e 100644
--- a/CSETWebNg/src/app/dialogs/malcolm/malcolm-upload-error.component.html
+++ b/CSETWebNg/src/app/dialogs/malcolm/malcolm-upload-error.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div class="ok-dialog 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="mr-3 fs-base-6 {{iconClass}}"></span>
+    <span class="me-3 fs-base-6 {{iconClass}}"></span>
     <span>{{dialogTitle}}</span>
   </div>
 
-  <mat-dialog-content class="p-3 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-    <div *ngIf="isFileMode" class="pr-3">
+  <mat-dialog-content class="p-3 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+    <div *ngIf="isFileMode" class="pe-3">
       <p>It appears one or more errors occured during the Malcolm data upload process.<br></p>
 
       <div *ngIf="have400errors">
@@ -43,13 +43,13 @@
       </div>
 
     </div>
-    <div *ngIf="!isFileMode" class="pr-3">
+    <div *ngIf="!isFileMode" class="pe-3">
       <p>It appears one or more errors occured during the Malcolm data retrieval and upload process.<br></p>
       <li *ngFor="let error of errors"><i>{{ error.message}}</i></li><br>
     </div>
   </mat-dialog-content>
 
-  <mat-dialog-actions class="p-3 pt-3 mb-0 d-flex ml-auto flex-00a">
+  <mat-dialog-actions class="p-3 pt-3 mb-0 d-flex ms-auto flex-00a">
     <button class="btn btn-secondary" (click)="dialogRef.close(true)">OK</button>
   </mat-dialog-actions>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/dialogs/merge-question-detail/merge-question-detail.component.html b/CSETWebNg/src/app/dialogs/merge-question-detail/merge-question-detail.component.html
index 7e95f12f34..c043700474 100644
--- a/CSETWebNg/src/app/dialogs/merge-question-detail/merge-question-detail.component.html
+++ b/CSETWebNg/src/app/dialogs/merge-question-detail/merge-question-detail.component.html
@@ -22,13 +22,13 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a" style="min-width: 50vw">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="mr-3 fs-base-6">
+    <span class="me-3 fs-base-6">
       <img width="30px" height="30px" src="./../../../assets/images/merge.svg" alt="merge">
     </span>
     <span>Merge Question Detail</span>
   </div>
 
-  <form class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <form class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     <mat-dialog-content>
       <div class="form-group">
         <label for="ReconciledComments">
diff --git a/CSETWebNg/src/app/dialogs/new-assessment-dialog/new-assessment-dialog.component.html b/CSETWebNg/src/app/dialogs/new-assessment-dialog/new-assessment-dialog.component.html
index 92c4d51adf..9d69467ddc 100644
--- a/CSETWebNg/src/app/dialogs/new-assessment-dialog/new-assessment-dialog.component.html
+++ b/CSETWebNg/src/app/dialogs/new-assessment-dialog/new-assessment-dialog.component.html
@@ -22,10 +22,10 @@
 -------------------------->
 <div class="d-flex flex-column justify-content-center flex-11a h-100 w-100" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <span class="fs-base-6 mr-3"><i class="fa-solid fa-file"></i></span>
+    <span class="fs-base-6 me-3"><i class="fa-solid fa-file"></i></span>
     <span>{{t('titles.assessment description')}}</span>
   </div>
-  <mat-dialog-content class="pb-0 p-3 pr-0 oy-auto d-flex flex-column flex-11a h-100"
+  <mat-dialog-content class="pb-0 p-3 pe-0 oy-auto d-flex flex-column flex-11a h-100"
     style="position:relative; overflow-x:hidden;">
     <div class="p-4" style="z-index: 100">
       <h3 class="mb-4">{{ data.title }}</h3>
diff --git a/CSETWebNg/src/app/dialogs/okay/okay.component.html b/CSETWebNg/src/app/dialogs/okay/okay.component.html
index ae1436cfa3..dcfb2ec1b1 100644
--- a/CSETWebNg/src/app/dialogs/okay/okay.component.html
+++ b/CSETWebNg/src/app/dialogs/okay/okay.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <div class="ok-dialog d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a" *ngIf="hasHeader">
-    <span class="mr-3 fs-base-6 {{iconClass}}"></span>
+    <span class="me-3 fs-base-6 {{iconClass}}"></span>
     <span>{{dialogTitle}}</span>
   </div>
-  <mat-dialog-content class="p-3 pb-0 pr-0 oy-auto d-flex flex-column flex-11a">
-    <div class="pr-3" *ngIf="data.messageText" [innerHTML]="data.messageText | safe">
+  <mat-dialog-content class="p-3 pb-0 pe-0 oy-auto d-flex flex-column flex-11a">
+    <div class="pe-3" *ngIf="data.messageText" [innerHTML]="data.messageText | safe">
     </div>
   </mat-dialog-content>
   <mat-dialog-actions class="p-3 pt-3 mb-0 d-flex justify-content-between flex-00a">
diff --git a/CSETWebNg/src/app/dialogs/online-disclaimer/online-disclaimer.component.html b/CSETWebNg/src/app/dialogs/online-disclaimer/online-disclaimer.component.html
index 570c4b89ee..50ac6c3687 100644
--- a/CSETWebNg/src/app/dialogs/online-disclaimer/online-disclaimer.component.html
+++ b/CSETWebNg/src/app/dialogs/online-disclaimer/online-disclaimer.component.html
@@ -22,11 +22,11 @@
 -------------------------->
 <div class="advisory-dialog 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="mr-3 fs-base-6 cset-icons-advisory"></span>
+    <span class="me-3 fs-base-6 cset-icons-advisory"></span>
     <span>INL Privacy & Accessibility Notice</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="px-3">
       <h2>Accessibility</h2>
       <p>
diff --git a/CSETWebNg/src/app/dialogs/question-filters-reports/question-filters-reports.component.html b/CSETWebNg/src/app/dialogs/question-filters-reports/question-filters-reports.component.html
index a848dbbfe3..087bb546f9 100644
--- a/CSETWebNg/src/app/dialogs/question-filters-reports/question-filters-reports.component.html
+++ b/CSETWebNg/src/app/dialogs/question-filters-reports/question-filters-reports.component.html
@@ -22,13 +22,13 @@
 -------------------------->
 <div *transloco="let t; read: 'filter-menu'" class="d-flex flex-column justify-content-center flex-11a">
   <div class="p-3 d-flex justify-content-start align-items-center flex-00a" style="color:white; background-color: #094997;">
-    <!-- <span class="mr-3 fs-base-6 cset-icons-filter" aria-label="{{ 'buttons.filter' | transloco }}"></span> -->
+    <!-- <span class="me-3 fs-base-6 cset-icons-filter" aria-label="{{ 'buttons.filter' | transloco }}"></span> -->
     <img src="assets/images/icons/filter.svg">
     <span>{{ t(skin + '.dialog title') }}</span>
   </div>
 
-  <mat-dialog-content class="pt-3 pl-3 pr-0 oy-auto d-flex flex-column flex-11a">
-    <div class="question-filters pr-3 form-check">
+  <mat-dialog-content class="pt-3 ps-3 pe-0 oy-auto d-flex flex-column flex-11a">
+    <div class="question-filters pe-3 form-check">
       <div>
         <input placeholder="{{ t('search') }}" class="form-control" [value]="filterSvc.filterSearchString"
           (keyup)="updateFilterString($event)" />
diff --git a/CSETWebNg/src/app/dialogs/question-filters/question-filters.component.html b/CSETWebNg/src/app/dialogs/question-filters/question-filters.component.html
index 0e8a98dffe..8fa6f5763b 100644
--- a/CSETWebNg/src/app/dialogs/question-filters/question-filters.component.html
+++ b/CSETWebNg/src/app/dialogs/question-filters/question-filters.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div *transloco="let t; read: 'filter-menu'" 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="mr-3 fs-base-6 cset-icons-filter" aria-label="{{ 'buttons.filter' | transloco }}"></span>
+    <span class="me-3 fs-base-6 cset-icons-filter" aria-label="{{ 'buttons.filter' | transloco }}"></span>
     <span>{{ t(skin + '.dialog title') }}</span>
   </div>
 
-  <mat-dialog-content class="pt-3 pl-3 pr-0 oy-auto d-flex flex-column flex-11a">
-    <div class="question-filters pr-3 form-check">
+  <mat-dialog-content class="pt-3 ps-3 pe-0 oy-auto d-flex flex-column flex-11a">
+    <div class="question-filters pe-3 form-check">
       <div>
         <input placeholder="{{ t('search') }}" class="form-control" [value]="filterSvc.filterSearchString"
           (keyup)="updateFilterString($event)" />
diff --git a/CSETWebNg/src/app/dialogs/rra-mini-user-guide/rra-mini-user-guide.component.html b/CSETWebNg/src/app/dialogs/rra-mini-user-guide/rra-mini-user-guide.component.html
index e3b501a99d..1706bd68c2 100644
--- a/CSETWebNg/src/app/dialogs/rra-mini-user-guide/rra-mini-user-guide.component.html
+++ b/CSETWebNg/src/app/dialogs/rra-mini-user-guide/rra-mini-user-guide.component.html
@@ -23,11 +23,11 @@
 <div class="about 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 w-100">
-        <span class="cset-icons-book-open mr-3 fs-base-6"></span>
+        <span class="cset-icons-book-open me-3 fs-base-6"></span>
         <span>Ransomware Readiness Tutorial</span>
     </div>
 
-    <mat-dialog-content class="oy-auto p-3 pr-0 d-flex flex-column flex-11a w-100">
+    <mat-dialog-content class="oy-auto p-3 pe-0 d-flex flex-column flex-11a w-100">
 
         <div style="max-width: 50rem">
             <h3 class="wrap-text mb-3">Ransomware Readiness Tutorial</h3>
diff --git a/CSETWebNg/src/app/dialogs/sector-help/sector-help.component.html b/CSETWebNg/src/app/dialogs/sector-help/sector-help.component.html
index da10251d58..5b002f3729 100644
--- a/CSETWebNg/src/app/dialogs/sector-help/sector-help.component.html
+++ b/CSETWebNg/src/app/dialogs/sector-help/sector-help.component.html
@@ -22,12 +22,12 @@
 -------------------------->
 <div class="alert-dialog d-flex flex-column justify-content-center flex-11a" *transloco="let t">
     <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-        <span class="fs-base-6 mr-3"></span>
+        <span class="fs-base-6 me-3"></span>
         <span>Sector Descriptions</span>
     </div>
 
-    <div class="p-3 pb-0 pr-0 mt-2 oy-auto d-flex flex-column flex-11a">
-        <mat-dialog-content class="p-0 pr-3 d-flex flex-row">
+    <div class="p-3 pb-0 pe-0 mt-2 oy-auto d-flex flex-column flex-11a">
+        <mat-dialog-content class="p-0 pe-3 d-flex flex-row">
             <div class="p-2" style="border-right: 1px double rgba(0, 0, 0, .1); overflow-y: auto; width: 30%">
                 <button *ngFor="let s of sectors" (click)="scrollTo(s.sectorId)"
                     class="btn btn-link d-block text-left">{{s.sectorName}}</button>
diff --git a/CSETWebNg/src/app/dialogs/select-assessments/select-assessments.component.html b/CSETWebNg/src/app/dialogs/select-assessments/select-assessments.component.html
index 3c09c9668b..0c70bcdfb7 100644
--- a/CSETWebNg/src/app/dialogs/select-assessments/select-assessments.component.html
+++ b/CSETWebNg/src/app/dialogs/select-assessments/select-assessments.component.html
@@ -23,23 +23,23 @@
 <div class="edit-user-dialog d-flex flex-column justify-content-center flex-11a" 
     style="max-width: 50vw; min-width: 50vw" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a">
-    <i class="far fa-check-square mr-3 fs-base-6"></i>
+    <i class="far fa-check-square me-3 fs-base-6"></i>
     <span>Select Assessments</span>
   </div>
 
-  <div class="p-3 pr-0 oy-auto d-flex flex-column flex-11a bgc-primary-200">
+  <div class="p-3 pe-0 oy-auto d-flex flex-column flex-11a bgc-primary-200">
     <app-trend-compare-compatibility #refreshComponent> </app-trend-compare-compatibility>
   </div>
   
-  <mat-dialog-content class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+  <mat-dialog-content class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
     <form name="form" #userForm="ngForm">
-      <div class="mt-0 mr-3 ml=3 mb-3">
+      <div class="mt-0 me-3 ml=3 mb-3">
         <table>
           <tr *ngFor="let a of assessments">
             <td class="align-top">
-              <input type="checkbox" [id]="'assess-' + a.assessmentId" class="checkbox-custom mr-2"
+              <input type="checkbox" [id]="'assess-' + a.assessmentId" class="checkbox-custom me-2"
                 (change)="toggleSelection($event, a)" [checked]="a.selected" [disabled]="a.disabled">
-              <label [for]="'assess-' + a.assessmentId" class="checkbox-custom-label mb-0 pr-5"
+              <label [for]="'assess-' + a.assessmentId" class="checkbox-custom-label mb-0 pe-5"
                 [class.o45]="a.disabled">
                 {{ a.assessmentName }}</label>
             </td>
diff --git a/CSETWebNg/src/app/dialogs/terms-of-use/terms-of-use.component.html b/CSETWebNg/src/app/dialogs/terms-of-use/terms-of-use.component.html
index c59b263f47..3b72ddec0a 100644
--- a/CSETWebNg/src/app/dialogs/terms-of-use/terms-of-use.component.html
+++ b/CSETWebNg/src/app/dialogs/terms-of-use/terms-of-use.component.html
@@ -22,13 +22,13 @@
 -------------------------->
 <div class="terms-dialog d-flex flex-column justify-content-center flex-11a" *transloco="let t">
   <div class="mat-dialog-header p-3 d-flex justify-content-start align-items-center flex-00a w-100">
-    <span class="cset-icons-handshake mr-3 fs-base-6"></span>
+    <span class="cset-icons-handshake me-3 fs-base-6"></span>
     <span *ngIf="configSvc.installationMode !=='ACET'">CSET {{t('menu.help.legal.terms of use.terms of use')}}</span>
     <span *ngIf="configSvc.installationMode === 'ACET'">ACET {{t('menu.help.legal.terms of use.terms of use')}}</span>
   </div>
 
-  <mat-dialog-content class="oy-auto p-3 pr-0 d-flex flex-column flex-11a w-100">
-    <div class="pr-3 d-flex flex-column align-items-start flex-11a">
+  <mat-dialog-content class="oy-auto p-3 pe-0 d-flex flex-column flex-11a w-100">
+    <div class="pe-3 d-flex flex-column align-items-start flex-11a">
       <p class="w-100">
         {{t('menu.help.legal.terms of use.description')}}
       </p>
diff --git a/CSETWebNg/src/app/dialogs/upload-export/upload-export.component.html b/CSETWebNg/src/app/dialogs/upload-export/upload-export.component.html
index 28908ffd04..aa759cfdba 100644
--- a/CSETWebNg/src/app/dialogs/upload-export/upload-export.component.html
+++ b/CSETWebNg/src/app/dialogs/upload-export/upload-export.component.html
@@ -25,18 +25,18 @@
   <div class="mat-dialog-header p-3 d-flex justify-content-start flex-11a">{{ appName }} File Import</div>
   <h4 style="position: sticky; top: 0; padding-top: 15px; padding-left: 15px;" class="mb-2 c-primary">Uploading Files
   </h4>
-  <mat-dialog-content class="oy-auto p-3 pr-0 d-flex flex-column flex-00a">
-    <div class="pr-3">
+  <mat-dialog-content class="oy-auto p-3 pe-0 d-flex flex-column flex-00a">
+    <div class="pe-3">
       <mat-list class="pt-1">
         <mat-list-item *ngFor="let file of files; let i = index">
           <label mat-line class="mt-1 fs-base-5">{{file.name}}</label>
           <ng-container
             *ngIf="(configSvc.installationMode !== 'ACET' || !ncuaSvc.switchStatus) && getAssessmentHint(file.name)">
-            <label mat-line class="ml-2 pt=1 pb-2 h6">Hint: <i>{{ getAssessmentHint(file.name) }}</i></label>
+            <label mat-line class="ms-2 pt=1 pb-2 h6">Hint: <i>{{ getAssessmentHint(file.name) }}</i></label>
           </ng-container>
           <mat-progress-bar *ngIf="progress && !progress[file.name].progress.source.hasError" style="width: 65%"
             mode="determinate" [value]="progress[file.name].progress | async"></mat-progress-bar>
-          <i *ngIf="progress[file.name].progress.source.hasError && xCount == 0" class="fa-solid fa-xmark ml-1"
+          <i *ngIf="progress[file.name].progress.source.hasError && xCount == 0" class="fa-solid fa-xmark ms-1"
             style="color: red"></i>
         </mat-list-item>
       </mat-list>
@@ -46,7 +46,7 @@ <h4 style="position: sticky; top: 0; padding-top: 15px; padding-left: 15px;" cla
   <div style="position: sticky; bottom: 0; padding-bottom: 15px; padding-left: 15px;">
     <label style="padding-right: 15px;" class="mt-4">{{statusText}}</label>
 
-    <mat-dialog-actions class="mr-3 p-0 mb-0 d-flex justify-content-between flex-00a">
+    <mat-dialog-actions class="me-3 p-0 mb-0 d-flex justify-content-between flex-00a">
       <!-- <button class="btn btn-primary" [disabled]="!canBeClosed" (click)="closeDialog()">{{primaryButtonText}}</button>
       <button class="btn btn-secondary" *ngIf="showCancelButton" mat-dialog-close>Cancel</button> -->
       <button class="btn btn-secondary" *ngIf="showCancelButton && data.isCsafUpload" (click)="cancelUpload()"
diff --git a/CSETWebNg/src/app/dialogs/user-language/user-language.component.html b/CSETWebNg/src/app/dialogs/user-language/user-language.component.html
index 69ffed5ce5..2b4a494154 100644
--- a/CSETWebNg/src/app/dialogs/user-language/user-language.component.html
+++ b/CSETWebNg/src/app/dialogs/user-language/user-language.component.html
@@ -23,11 +23,11 @@
 
 <div *transloco="let t" class="edit-user-dialog 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="fas fa-language fs-base-6 mr-3"></span>
+        <span class="fas fa-language fs-base-6 me-3"></span>
         <span>{{t('user language')}}</span>
     </div>
 
-    <mat-dialog-content class="p-3 pr-0 oy-auto d-flex flex-column flex-11a">
+    <mat-dialog-content class="p-3 pe-0 oy-auto d-flex flex-column flex-11a">
         <form name="form" #userForm="ngForm">
             <div class="p-3">
                 <p>
diff --git a/CSETWebNg/src/app/import/import.component.html b/CSETWebNg/src/app/import/import.component.html
index fe7819a0cb..1bdfb5ceda 100644
--- a/CSETWebNg/src/app/import/import.component.html
+++ b/CSETWebNg/src/app/import/import.component.html
@@ -21,10 +21,10 @@
   SOFTWARE.
 -------------------------->
 <div class="bgc-gray50 d-flex flex-11a w-100">
-    <div class="p-4 pb-0 pr-0 d-flex flex-column flex-11a w-100">
+    <div class="p-4 pb-0 pe-0 d-flex flex-column flex-11a w-100">
         <h3 class="mb-4">Import New Module (Question/Requirements Set)</h3>
-        <div class="pr-4 oy-auto d-flex flex-11a w-100 h-0">
-            <div class="p-0 mr-4 col-md-4 d-flex flex-column flex-11a w-100" style="overflow:auto;">
+        <div class="pe-4 oy-auto d-flex flex-11a w-100 h-0">
+            <div class="p-0 me-4 col-md-4 d-flex flex-column flex-11a w-100" style="overflow:auto;">
                 <h4>Export</h4>
                 <ul class="list-group">
                     <ng-container *ngFor="let set of sets">
@@ -34,7 +34,7 @@ <h6>{{set.name}}</h6>
                                 <div class="d-flex mt-2">
                                     <span class="flex-11a mb-1">
                                         <button (click)="clickXMLLink(set.setName)"
-                                            class="btn btn-secondary mr-1">XML</button>
+                                            class="btn btn-secondary me-1">XML</button>
                                         <button (click)="clickJSONLink(set.setName)"
                                             class="btn btn-secondary">JSON</button>
                                     </span>
@@ -106,7 +106,7 @@ <h6>{{set.name}}</h6>
                             <h4>Drop code file here</h4>
                         </div>
                         <h4 class="d-flex" style="align-items:center">Module Code
-                            <div class="btn-group ml-3 mr-3 flex-11a" role="group" aria-label="...">
+                            <div class="btn-group ms-3 me-3 flex-11a" role="group" aria-label="...">
                                 <button (click)="switchToJson()" type="button" class="btn btn-secondary"
                                     [ngClass]="{'active': this.lang=='json'}">JSON</button>
                                 <button (click)="switchToXml()" type="button" class="btn btn-secondary"
@@ -119,7 +119,7 @@ <h4 class="d-flex" style="align-items:center">Module Code
                                 | <a style="font-size:12px;font-weight:normal;" role="button"
                                     (click)="getJsonSchema()">JSON</a>
                             </span>
-                            <button class="btn btn-secondary flex-01a ml-3" type="button" (click)="this.fullScreen()">
+                            <button class="btn btn-secondary flex-01a ms-3" type="button" (click)="this.fullScreen()">
                                 <span
                                     [ngClass]="{'cset-icons-resize-small':getFullScreen(), 'cset-icons-resize-full':!getFullScreen()}"></span>
                             </button>
@@ -189,10 +189,10 @@ <h4>Supporting Documents</h4>
                                     <ng-container *ngFor="let item of uploader.queue; index as i">
                                         <tr [ngClass]="{'danger': item.isError, 'success': item.isSuccess }">
                                             <td style="vertical-align:middle">
-                                                <span class="cset-icons-check-circle text-success pr-1"
+                                                <span class="cset-icons-check-circle text-success pe-1"
                                                     title="The file was uploaded successfully"
                                                     *ngIf="item.isSuccess"></span>
-                                                <span class="cset-icons-exclamation-triangle text-danger pr-1"
+                                                <span class="cset-icons-exclamation-triangle text-danger pe-1"
                                                     title="There was an error uploading the file.  Please try again."
                                                     *ngIf="item.isError"></span>
                                                 <strong>{{ item?.file?.name }}</strong>
@@ -228,13 +228,13 @@ <h4>Supporting Documents</h4>
                     </div>
                     <div style="margin: .5em 0">
                         <button [attr.disabled]="state=='Processing'||!importNgForm.valid?true:null" type="submit"
-                            class="btn btn-success btn-s mr-2" *ngIf="state!='Succeeded'"
-                            [ngClass]="{'p-0': state=='Processing', 'pr-2':state=='Processing'}"
+                            class="btn btn-success btn-s me-2" *ngIf="state!='Succeeded'"
+                            [ngClass]="{'p-0': state=='Processing', 'pe-2':state=='Processing'}"
                             style="display:inline-flex;align-items:center">
                             <span class="spinner-container" style="display:inline-block" *ngIf="state=='Processing'">
                                 <div class="spinner" style="max-width: 20px; max-height: 20px;"></div>
                             </span>
-                            <span class="cset-icons-import mr-1" *ngIf="state!='Processing'"></span>
+                            <span class="cset-icons-import me-1" *ngIf="state!='Processing'"></span>
                             <span *ngIf="state=='Failed'">Retry Import</span>
                             <span *ngIf="state=='Processing'">Processing</span>
                             <span *ngIf="state=='Ready'">Import</span>
@@ -243,7 +243,7 @@ <h4>Supporting Documents</h4>
                           <button class="btn btn-primary"
                               (click)="clearForm()">Import another module
                           </button>
-                          <div style="margin-bottom: 0" class="alert alert-warning ml-3">
+                          <div style="margin-bottom: 0" class="alert alert-warning ms-3">
                             Warning: This will clear the code editor
                           </div>
                         </div>
diff --git a/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.html b/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.html
index 4bb7eb16ec..36971fade0 100644
--- a/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.html
+++ b/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.html
@@ -41,7 +41,7 @@ <h3>Assessment Comparison</h3>
         <div class="card-body text-wrap">
           <div *ngIf="isMaturity" class="mb-4">
             <h6> {{"Comparing Maturity Model " + maturityModelName}}</h6>
-            <input #s type="checkbox" class="checkbox-custom mr-2" id="{{maturityModelName}}"
+            <input #s type="checkbox" class="checkbox-custom me-2" id="{{maturityModelName}}"
               name="{{maturityModelName}}" value="{{maturityModelName}}" checked>
             <label [for]="maturityModelName" class="checkbox-custom-label">{{maturityModelName}}</label>
           </div>
@@ -49,7 +49,7 @@ <h6> {{"Comparing Maturity Model " + maturityModelName}}</h6>
             <div *ngIf="isStandard" class="col-12 mt-2" id="chart" class="mb-3">
               <h6>Choose the standards you would like to compare </h6>
               <div *ngFor="let s of standards" class="checkboxes">
-                <input #s type="checkbox" class="checkbox-custom mr-2" id="{{s.full_Name}}" name="{{s.full_Name}}"
+                <input #s type="checkbox" class="checkbox-custom me-2" id="{{s.full_Name}}" name="{{s.full_Name}}"
                   (change)="onChange($event)" value="{{s.short_Name}}"><label [for]="s.full_Name"
                   class="checkbox-custom-label">{{s.full_Name}}</label>
               </div>
diff --git a/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.ts b/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.ts
index aa59e68fe9..d80d5ca7b6 100644
--- a/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.ts
+++ b/CSETWebNg/src/app/initial/assessmenet-comparison-analytics/assessment-comparison-analytics.component.ts
@@ -239,7 +239,7 @@ export class AssessmentComparisonAnalyticsComponent implements OnInit {
         x.label +
         "' class='mt-2'> Model name: " +
         x.label +
-        "<tr><td><div><p class='ml-3'>" + this.answerStandard + "</p></div><canvas id='canvas" +
+        "<tr><td><div><p class='ms-3'>" + this.answerStandard + "</p></div><canvas id='canvas" +
         x.label +
         "'></canvas></td></tr></div>"
       );
diff --git a/CSETWebNg/src/app/initial/login-access-key/login-access-key.component.html b/CSETWebNg/src/app/initial/login-access-key/login-access-key.component.html
index ed80a431c0..eaa0e12bf0 100644
--- a/CSETWebNg/src/app/initial/login-access-key/login-access-key.component.html
+++ b/CSETWebNg/src/app/initial/login-access-key/login-access-key.component.html
@@ -21,18 +21,18 @@
   SOFTWARE.
 -------------------------->
 <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 ">
 
         <!-- Logo and Name -->
         <div *ngIf="skin === 'CSET'" class="my-4 d-flex align-items-end flex-00a flex-nowrap">
             <app-logo-cset logoHeight="60"></app-logo-cset>
-            <span class="align-bottom ml-3 fst-italic"
+            <span class="align-bottom ms-3 fst-italic"
                 style="font-size: 37px; margin-bottom: -.5rem; color: #666">Online</span>
         </div>
 
         <div *ngIf="skin === 'TSA'" class="d-flex align-items-end flex-00a">
             <app-logo-tsa mode="white" logoHeight="60"></app-logo-tsa>
-            <span class="align-bottom ml-3 fst-italic"
+            <span class="align-bottom ms-3 fst-italic"
                 style="font-size: 30px; margin-top: 8px; color: #666">Online</span>
         </div>
 
@@ -46,14 +46,14 @@
             </div>
 
             <div class="mb-3 d-flex flex-row">
-                <div class="mr-3 container">
+                <div class="me-3 container">
                     <label>
                         If you have used <em>{{ title1[skin] }}</em> before and already have an Access Key, enter it
                         here and
                         click Login.
                     </label>
                     <div class="input-group mb-2">
-                        <input class="form-control mr-2" [(ngModel)]="loginAccessKey" (keyup.enter)="login()"
+                        <input class="form-control me-2" [(ngModel)]="loginAccessKey" (keyup.enter)="login()"
                             placeholder="Enter Access Key">
                         <button (click)="login()" class="input-group-append btn btn-primary mt-0">Login</button>
                     </div>
@@ -63,7 +63,7 @@
                 </div>
 
                 <div class="container">
-                    <label class="mr-3">
+                    <label class="me-3">
                         If it is your first time using <em>{{ title1[skin] }}</em> click this button to generate a new
                         Access
                         Key.
diff --git a/CSETWebNg/src/app/initial/login-acet/login-acet.component.html b/CSETWebNg/src/app/initial/login-acet/login-acet.component.html
index b770bec11a..07affb3e82 100644
--- a/CSETWebNg/src/app/initial/login-acet/login-acet.component.html
+++ b/CSETWebNg/src/app/initial/login-acet/login-acet.component.html
@@ -24,7 +24,7 @@
   [ngClass]="{'login-background':mode == 'LOGIN'}">
   <div class="p-0 d-flex flex-column flex-10a w-100 login-margin">
 
-    <div class="mr-4 ml-4 p-3 bgc-secondary c-white" *ngIf="mode !== 'LOGIN'">
+    <div class="me-4 ms-4 p-3 bgc-secondary c-white" *ngIf="mode !== 'LOGIN'">
       <div *ngIf="mode === 'LOCAL'">
         ACET is running locally. No login is required.
       </div>
@@ -36,7 +36,7 @@
 
     <div *ngIf="mode === 'LOCAL'">
       <form name="form" (ngSubmit)="refreshWindow()" #f="ngForm" novalidate>
-        <div class="d-flex flex-nowrap pl-3 pr-3">
+        <div class="d-flex flex-nowrap ps-3 pe-3">
           <button type="submit" [disabled]="loading" class="btn btn-primary btn-lg">Continue</button>
           <div class="spinner-container" *ngIf="loading">
             <div style="max-width: 30px; max-height: 30px;"></div>
@@ -45,14 +45,14 @@
       </form>
     </div>
 
-    <div class="mr-4 ml-4 p-3 bgc-validation c-white" *ngIf="mode === 'LOGIN' && isRunningInElectron">
+    <div class="me-4 ms-4 p-3 bgc-validation c-white" *ngIf="mode === 'LOGIN' && isRunningInElectron">
       An error was encountered while running ACET.
     </div>
 
     <!-- If we reach the login page while running in electron, we can assume there was an error getting
       the standalone status from the API; prompt for exiting the application -->
     <div *ngIf="mode === 'LOGIN' && isRunningInElectron">
-      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="mr-4 ml-2 p-3" novalidate>
+      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="me-4 ms-2 p-3" novalidate>
         <div class="d-flex flex-nowrap">
           <button type="submit" class="btn btn-primary btn-lg">Exit</button>
         </div>
diff --git a/CSETWebNg/src/app/initial/login-cf/login-cf.component.html b/CSETWebNg/src/app/initial/login-cf/login-cf.component.html
index 0ebb5c9552..55a35a84eb 100644
--- a/CSETWebNg/src/app/initial/login-cf/login-cf.component.html
+++ b/CSETWebNg/src/app/initial/login-cf/login-cf.component.html
@@ -28,7 +28,7 @@
       <app-logo-cset logoHeight="50"></app-logo-cset>
     </div>
 
-    <div [ngClass]="isRunningInElectron ? 'bgc-validation' : 'bgc-secondary'" class="mr-4 ml-4 p-3 c-white mb-lg-4">
+    <div [ngClass]="isRunningInElectron ? 'bgc-validation' : 'bgc-secondary'" class="me-4 ms-4 p-3 c-white mb-lg-4">
       <div *ngIf="mode === 'LOCAL'">
         CSET is running locally. No login is required.
       </div>
@@ -45,7 +45,7 @@
 
     <div *ngIf="mode === 'LOCAL'">
       <form name="form" (ngSubmit)="refreshWindow()" #f="ngForm" novalidate>
-        <div class="d-flex flex-nowrap pl-3 pr-3 ml-2 mt-2">
+        <div class="d-flex flex-nowrap ps-3 pe-3 ms-2 mt-2">
           <button type="submit" [disabled]="loading" class="btn btn-primary btn-lg">Continue</button>
           <div class="spinner-container" *ngIf="loading">
             <div style="max-width: 30px; max-height: 30px;"></div>
@@ -57,22 +57,22 @@
     <!-- If we reach the login page while running in electron, we can assume there was an error getting
       the standalone status from the API; prompt for exiting the application -->
     <div *ngIf="mode === 'LOGIN' && isRunningInElectron">
-      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="mr-4 ml-2 p-3" novalidate>
+      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="me-4 ms-2 p-3" novalidate>
         <div class="d-flex flex-nowrap">
           <button type="submit" class="btn btn-primary btn-lg">Exit</button>
         </div>
       </form>
     </div>
 
-    <div class="m-4 d-flex flex-column flex-lg-row justify-content-center flex-00a ml-lg-auto mr-lg-auto"
+    <div class="m-4 d-flex flex-column flex-lg-row justify-content-center flex-00a ms-lg-auto me-lg-auto"
       *ngIf="(mode === 'LOGIN' || mode === 'REGISTERED') && !isRunningInElectron">
-      <div class="float-left ml-3">
-        <img class="mt-4 mr-4" src="./assets/images/CF/CyberSecureFlorida_logo_color-1.png" width="auto" height="125"
+      <div class="float-left ms-3">
+        <img class="mt-4 me-4" src="./assets/images/CF/CyberSecureFlorida_logo_color-1.png" width="auto" height="125"
           alt="Cyber Florida">
       </div>
       <div>
         <form name="form" (ngSubmit)="email.valid && f.form.valid && login()" #f="ngForm" novalidate
-          class="d-flex flex-column justify-content-between flex-00a mt-3 mt-lg-0 ml-3">
+          class="d-flex flex-column justify-content-between flex-00a mt-3 mt-lg-0 ms-3">
           <div *ngIf="incorrect">
             <div class="alert alert-danger">Incorrect Username or Password</div>
           </div>
@@ -120,7 +120,7 @@
       <app-register (modeChanged)="setMode($event)" class="d-flex flex-column flex-00a"></app-register>
     </div>
 
-    <div class="mt-4 mb-4 mr-4 ml-4 d-flex flex-column justify-content-start align-items-center flex-11a">
+    <div class="mt-4 mb-4 me-4 ms-4 d-flex flex-column justify-content-start align-items-center flex-11a">
       <p class="c-gray-600 m-5 w-70" style=" max-width:1200px">
         <strong>
         <span style="color:#11B3BA">
diff --git a/CSETWebNg/src/app/initial/login-cset/login-cset.component.html b/CSETWebNg/src/app/initial/login-cset/login-cset.component.html
index 3d00b3187f..cf17a9cd41 100644
--- a/CSETWebNg/src/app/initial/login-cset/login-cset.component.html
+++ b/CSETWebNg/src/app/initial/login-cset/login-cset.component.html
@@ -29,13 +29,13 @@
       <app-logo-cset logoHeight="50"></app-logo-cset>
     </div>
 
-    <div *ngIf="configSvc.isRunningAnonymous" class="ml-4 my-4 d-flex align-items-end flex-00a flex-nowrap">
+    <div *ngIf="configSvc.isRunningAnonymous" class="ms-4 my-4 d-flex align-items-end flex-00a flex-nowrap">
       <app-logo-cset logoHeight="50"></app-logo-cset>
-      <span class="align-bottom ml-3 fst-italic"
+      <span class="align-bottom ms-3 fst-italic"
         style="font-size: 37px; line-height: normal; margin-bottom: -.5rem; color: #666">Online</span>
     </div>
 
-    <div [ngClass]="isRunningInElectron ? 'bgc-validation' : 'bgc-secondary'" class="mr-4 ml-4 p-3 c-white">
+    <div [ngClass]="isRunningInElectron ? 'bgc-validation' : 'bgc-secondary'" class="me-4 ms-4 p-3 c-white">
       <div *ngIf="mode === 'LOCAL'">
         {{t('login.running locally')}}
       </div>
@@ -52,7 +52,7 @@
 
     <div *ngIf="mode === 'LOCAL'">
       <form name="form" (ngSubmit)="refreshWindow()" #f="ngForm" novalidate>
-        <div class="d-flex flex-nowrap pl-3 pr-3 ml-2 mt-2">
+        <div class="d-flex flex-nowrap ps-3 pe-3 ms-2 mt-2">
           <button type="submit" [disabled]="loading" class="btn btn-primary btn-lg">{{t('buttons.continue')}}</button>
           <div class="spinner-container" *ngIf="loading">
             <div style="max-width: 30px; max-height: 30px;"></div>
@@ -64,7 +64,7 @@
     <!-- If we reach the login page while running in electron, we can assume there was an error getting
       the standalone status from the API; prompt for exiting the application -->
     <div *ngIf="mode === 'LOGIN' && isRunningInElectron">
-      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="mr-4 ml-2 p-3" novalidate>
+      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="me-4 ms-2 p-3" novalidate>
         <div class="d-flex flex-nowrap">
           <button type="submit" class="btn btn-primary btn-lg">{{t('buttons.exit')}}</button>
         </div>
@@ -118,7 +118,7 @@
       <app-register (modeChanged)="setMode($event)" class="d-flex flex-column flex-00a"></app-register>
     </div>
 
-    <div class="mt-4 mb-4 mr-4 ml-4 d-flex flex-column justify-content-start align-items-center flex-11a">
+    <div class="mt-4 mb-4 me-4 ms-4 d-flex flex-column justify-content-start align-items-center flex-11a">
       <p class="c-gray-600 mb-4 w-100">
         <app-cset-origin></app-cset-origin>
       </p>
diff --git a/CSETWebNg/src/app/initial/login-renew/login-renew.component.html b/CSETWebNg/src/app/initial/login-renew/login-renew.component.html
index 9a28dbd498..1d267e4fcc 100644
--- a/CSETWebNg/src/app/initial/login-renew/login-renew.component.html
+++ b/CSETWebNg/src/app/initial/login-renew/login-renew.component.html
@@ -25,11 +25,11 @@
 
     <!-- CSET Logo and Name -->
     <div class="m-4 d-flex justify-content-start flex-00a">
-      <app-logo-cset logoHeight="50"></app-logo-cset> <span class="c-primary ml-3"
+      <app-logo-cset logoHeight="50"></app-logo-cset> <span class="c-primary ms-3"
         style="padding-top: .3rem; font-size: 40px;">Renewables</span>
     </div>
 
-    <div [ngClass]="isRunningInElectron ? 'bgc-validation' : 'bgc-secondary'" class="mr-4 ml-4 p-3 c-white mb-lg-4">
+    <div [ngClass]="isRunningInElectron ? 'bgc-validation' : 'bgc-secondary'" class="me-4 ms-4 p-3 c-white mb-lg-4">
       <div *ngIf="mode === 'LOCAL'">
         CSET is running locally. No login is required.
       </div>
@@ -46,7 +46,7 @@
 
     <div *ngIf="mode === 'LOCAL'">
       <form name="form" (ngSubmit)="refreshWindow()" #f="ngForm" novalidate>
-        <div class="d-flex flex-nowrap pl-3 pr-3 ml-2 mt-2">
+        <div class="d-flex flex-nowrap ps-3 pe-3 ms-2 mt-2">
           <button type="submit" [disabled]="loading" class="btn btn-primary btn-lg">Continue</button>
           <div class="spinner-container" *ngIf="loading">
             <div style="max-width: 30px; max-height: 30px;"></div>
@@ -58,7 +58,7 @@
     <!-- If we reach the login page while running in electron, we can assume there was an error getting
       the standalone status from the API; prompt for exiting the application -->
     <div *ngIf="mode === 'LOGIN' && isRunningInElectron">
-      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="mr-4 ml-2 p-3" novalidate>
+      <form name="form" (ngSubmit)="exit()" #f="ngForm" class="me-4 ms-2 p-3" novalidate>
         <div class="d-flex flex-nowrap">
           <button type="submit" class="btn btn-primary btn-lg">Exit</button>
         </div>
@@ -68,13 +68,13 @@
     <div class="d-flex flex-column mx-lg-auto">
       <div class="m-4 d-flex flex-column flex-lg-row justify-content-center flex-00a"
         *ngIf="(mode === 'LOGIN' || mode === 'REGISTERED') && !isRunningInElectron">
-        <div class="float-left ml-3">
-          <img class="mr-4" src="./assets/images/RENEW/inl_cyber_shield.png" width="auto" height="400px"
+        <div class="float-left ms-3">
+          <img class="me-4" src="./assets/images/RENEW/inl_cyber_shield.png" width="auto" height="400px"
             alt="INL Cyber SHIELD">
         </div>
         <div>
           <form name="form" (ngSubmit)="email.valid && f.form.valid && login()" #f="ngForm" novalidate
-            class="d-flex flex-column justify-content-between flex-00a mt-3 mt-lg-0 ml-3">
+            class="d-flex flex-column justify-content-between flex-00a mt-3 mt-lg-0 ms-3">
             <div *ngIf="incorrect">
               <div class="alert alert-danger">Incorrect Username or Password</div>
             </div>
@@ -101,7 +101,7 @@
             <div *ngIf="f.submitted && !password.valid" class="alert alert-danger mt-1">A valid password is required
             </div>
             <div class="mt-2 d-flex justify-content-between flex-00a">
-              <div class="d-flex flex-nowrap flex-00a mr-3">
+              <div class="d-flex flex-nowrap flex-00a me-3">
                 <button type="submit" [disabled]="loading" class="btn btn-primary">Login</button>
                 <div class="spinner-container" *ngIf="loading">
                   <div style="max-width: 30px; max-height: 30px;"></div>
diff --git a/CSETWebNg/src/app/initial/login-rra/login-rra.component.html b/CSETWebNg/src/app/initial/login-rra/login-rra.component.html
index 06b6bd51ec..57167db616 100644
--- a/CSETWebNg/src/app/initial/login-rra/login-rra.component.html
+++ b/CSETWebNg/src/app/initial/login-rra/login-rra.component.html
@@ -28,7 +28,7 @@
       <app-logo-rra></app-logo-rra>
     </div>
 
-    <div class="mr-4 ml-4 p-3 bgc-black c-white">
+    <div class="me-4 ms-4 p-3 bgc-black c-white">
       <div *ngIf="mode === 'LOCAL'">
         RRA is running locally. No login is required.
       </div>
@@ -42,7 +42,7 @@
 
     <div *ngIf="mode === 'LOCAL'">
       <form name="form" (ngSubmit)="continueStandAlone()" #f="ngForm" novalidate>
-        <div class="d-flex flex-nowrap pl-3 pr-3">
+        <div class="d-flex flex-nowrap ps-3 pe-3">
           <button type="submit" [disabled]="loading" class="btn btn-primary btn-lg">Continue</button>
           <div class="spinner-container" *ngIf="loading">
             <div style="max-width: 30px; max-height: 30px;"></div>
diff --git a/CSETWebNg/src/app/initial/login-tsa/login-tsa.component.html b/CSETWebNg/src/app/initial/login-tsa/login-tsa.component.html
index 9adac5db2b..d1b1e87963 100644
--- a/CSETWebNg/src/app/initial/login-tsa/login-tsa.component.html
+++ b/CSETWebNg/src/app/initial/login-tsa/login-tsa.component.html
@@ -33,7 +33,7 @@
       </div>
       <div *ngIf="configSvc.isRunningAnonymous" class="d-flex flex-row align-items-end mt-5 mb-4">
         <app-logo-tsa mode="white" logoHeight="60"></app-logo-tsa>
-        <span class="align-bottom ml-3 fst-italic" style="font-size: 30px; margin-top: 8px; color: #666">Online</span>
+        <span class="align-bottom ms-3 fst-italic" style="font-size: 30px; margin-top: 8px; color: #666">Online</span>
       </div>
 
 
@@ -123,7 +123,7 @@
             <div *ngIf="mode === 'LOCAL'">
               <p class="c-white">CSET TSA is running locally. No login is required.</p>
               <form name="form" (ngSubmit)="refreshWindow()" #f="ngForm" novalidate>
-                <div class="d-flex flex-nowrap pl-3 pr-3 ml-2 mt-2 justify-content-center">
+                <div class="d-flex flex-nowrap ps-3 pe-3 ms-2 mt-2 justify-content-center">
                   <button type="submit" [disabled]="loading" class="btn btn-secondary btn-lg">Continue</button>
                   <div class="spinner-container" *ngIf="loading">
                     <div style="max-width: 30px; max-height: 30px;"></div>
@@ -136,7 +136,7 @@
             the standalone status from the API; prompt for exiting the application -->
             <div *ngIf="mode === 'LOGIN' && isRunningInElectron" class="text-center">
               <p class="c-white p-2">An error was encountered while running CSET TSA.</p>
-              <form name="form" (ngSubmit)="exit()" #f="ngForm" class="mr-4 ml-2 p-3" novalidate>
+              <form name="form" (ngSubmit)="exit()" #f="ngForm" class="me-4 ms-2 p-3" novalidate>
                 <div class="d-flex flex-nowrap justify-content-center">
                   <button type="submit" class="btn btn-secondary btn-lg">Exit</button>
                 </div>
@@ -202,7 +202,7 @@
                   <div *ngIf="mode === 'LOCAL'">
                     <p class="c-white">CSET TSA is running locally. No login is required.</p>
                     <form name="form" (ngSubmit)="refreshWindow()" #f="ngForm" novalidate>
-                      <div class="d-flex flex-nowrap pl-3 pr-3 ml-2 mt-2 justify-content-center">
+                      <div class="d-flex flex-nowrap ps-3 pe-3 ms-2 mt-2 justify-content-center">
                         <button type="submit" [disabled]="loading" class="btn btn-secondary btn-lg">Continue</button>
                         <div class="spinner-container" *ngIf="loading">
                           <div style="max-width: 30px; max-height: 30px;"></div>
@@ -212,7 +212,7 @@
                   </div>
                   <div *ngIf="mode === 'LOGIN' && isRunningInElectron">
                     <p class="c-white p-2">An error was encountered while running CSET TSA.</p>
-                    <form name="form" (ngSubmit)="exit()" #f="ngForm" class="mr-4 ml-2 p-3 " novalidate>
+                    <form name="form" (ngSubmit)="exit()" #f="ngForm" class="me-4 ms-2 p-3 " novalidate>
                       <div class="d-flex flex-nowrap justify-content-center">
                         <button type="submit" class="btn btn-secondary btn-lg">Exit</button>
                       </div>
diff --git a/CSETWebNg/src/app/initial/reset-pass/reset-pass.component.html b/CSETWebNg/src/app/initial/reset-pass/reset-pass.component.html
index 99ec271818..2592c0b07e 100644
--- a/CSETWebNg/src/app/initial/reset-pass/reset-pass.component.html
+++ b/CSETWebNg/src/app/initial/reset-pass/reset-pass.component.html
@@ -31,7 +31,7 @@
             <app-logo-rra></app-logo-rra>
         </div>
 
-        <div class="mb-4 mr-4 ml-4 p-3 bgc-black c-white"
+        <div class="mb-4 me-4 ms-4 p-3 bgc-black c-white"
             [ngClass]="{'login-margin' : (configSvc.installationMode === 'ACET') }">
             <div *ngIf="configSvc.installationMode === 'CSET' || configSvc.installationMode === ''">
                 {{t('change password.enter email cset')}}
@@ -118,7 +118,7 @@
         </div>
         <div class="mx-4 alert alert-danger" *ngIf="errorMsg">{{warning}}</div>
 
-        <div class="mt-4 mb-4 mr-4 ml-4 d-flex flex-column justify-content-start align-items-center flex-00a">
+        <div class="mt-4 mb-4 me-4 ms-4 d-flex flex-column justify-content-start align-items-center flex-00a">
             <div class="c-gray-600 mb-4">
                 <app-cset-origin *ngIf="showOrigin">
                 </app-cset-origin>
diff --git a/CSETWebNg/src/app/layout/acet-layout-main/acet-layout-main.component.html b/CSETWebNg/src/app/layout/acet-layout-main/acet-layout-main.component.html
index 7fc8044841..ddc4934760 100644
--- a/CSETWebNg/src/app/layout/acet-layout-main/acet-layout-main.component.html
+++ b/CSETWebNg/src/app/layout/acet-layout-main/acet-layout-main.component.html
@@ -23,7 +23,7 @@
 <div class="bgc-page d-flex flex-column flex-11a w-100">
   <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
     <div class="sticky-navbar">
-      <div class="row no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
+      <div class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
         *ngIf="auth.isLocal && devMode">
         <span class="col-sm-12">Local Installation</span>
       </div>
@@ -58,7 +58,7 @@
   </div>
 
     <!-- Body -->
-    <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+    <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
       <!-- [ngClass]="(this.router.url=='/home/login' || this.router.url=='/home/reset-pass') ? 'c' : 'col-md-12 col-lg-8'" -->
       <div class="p-0 d-flex col-xl-12 bgc-gray-50">
         <router-outlet></router-outlet>
@@ -68,7 +68,7 @@
     <!-- Footer -->
     <!-- Commenting out. Removing per client request during demo, but they might change their minds. 11/21/2022
 
-  <ngb-accordion #acc="ngbAccordion" type="primary" class="footer row no-gutters ncua-header sticky-footer"
+  <ngb-accordion #acc="ngbAccordion" type="primary" class="footer no-gutters ncua-header sticky-footer"
     *ngIf="(this.router.url!='/home/login' && this.router.url!='/home/reset-pass')">
     <ngb-panel id="footerPanel">
       <ng-template ngbPanelTitle>
diff --git a/CSETWebNg/src/app/layout/cf-layout-main/cf-layout-main.component.html b/CSETWebNg/src/app/layout/cf-layout-main/cf-layout-main.component.html
index ab7c36e8c7..b356f10f96 100644
--- a/CSETWebNg/src/app/layout/cf-layout-main/cf-layout-main.component.html
+++ b/CSETWebNg/src/app/layout/cf-layout-main/cf-layout-main.component.html
@@ -24,7 +24,7 @@
     <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
       <div class="sticky-navbar">
         <div
-          class="row no-gutters local-install mt-0 pl-0 d-flex justify-content-center align-items-center flex-00a"
+          class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
           *ngIf="auth.isLocal && devMode">
           <span class="col-sm-12">Local Installation</span>
         </div>
@@ -43,7 +43,7 @@
           </span>
 
           <!-- Navbar Toggler Button (only renders when screen is narrow enough) -->
-          <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ml-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger" tabindex="0">
+          <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ms-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger" tabindex="0">
             <span class="navbar-toggler-icon fs-base-5 c-gray-150"></span>
           </button>
 
@@ -58,14 +58,14 @@
       </div>
 
       <!-- Body -->
-      <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+      <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
         <div class="p-0 d-flex col-xl-12 bgc-gray-50">
           <router-outlet></router-outlet>
         </div>
       </div>
 
       <!-- Footer -->
-      <div ngbAccordion type="primary" class="footer row no-gutters sticky-footer"
+      <div ngbAccordion type="primary" class="footer no-gutters sticky-footer"
       *ngIf="layoutSvc.isFooterShown(this.router.url)">
       <div ngbAccordionItem id="footerPanel" [collapsed]="footerClosed">
         <h4 ngbAccordionHeader>
@@ -79,9 +79,9 @@ <h4 ngbAccordionHeader>
                 <div class="footer-section-2 p-2">
                   <div class="d-flex flex-row flex-wrap justify-content-center flex-11a">
                     Agency cybersecurity information, exempt pursuant to Florida Statute Chapter 119 Section 119.0725
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                     <a target="_blank" rel="noopener noreferrer" href="https://cyberflorida.org/">Cyber Florida</a>
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                     <a href="mailto:secureflorida@cyberflorida.org">Contact Cyber Florida at: secureflorida@cyberflorida.org</a>
                   </div>
                 </div>
diff --git a/CSETWebNg/src/app/layout/cie-layout-main/cie-layout-main.component.html b/CSETWebNg/src/app/layout/cie-layout-main/cie-layout-main.component.html
index c5bc834f12..12eaf045e8 100644
--- a/CSETWebNg/src/app/layout/cie-layout-main/cie-layout-main.component.html
+++ b/CSETWebNg/src/app/layout/cie-layout-main/cie-layout-main.component.html
@@ -23,7 +23,7 @@
 <div class="bgc-page d-flex flex-column flex-11a w-100" *transloco="let t">
     <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
       <div class="sticky-navbar">
-        <div class="row no-gutters local-install mt-0 pl-0 d-flex justify-content-center align-items-center flex-00a"
+        <div class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
           *ngIf="auth.isLocal && devMode">
           <span class="col-sm-12">{{t('local installation')}} </span>
         </div>
@@ -44,7 +44,7 @@
           </span>
 
           <!-- Navbar Toggler Button (only renders when screen is narrow enough) -->
-          <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ml-auto" [matMenuTriggerFor]="topMenus"
+          <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ms-auto" [matMenuTriggerFor]="topMenus"
             #topMenusTrigger="matMenuTrigger" tabindex="0">
             <span class="navbar-toggler-icon fs-base-5 c-gray-150"></span>
           </button>
@@ -58,14 +58,14 @@
       </div>
 
       <!-- Body -->
-      <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+      <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
         <div class="p-0 d-flex col-xl-12 bgc-gray-50">
           <router-outlet></router-outlet>
         </div>
       </div>
 
       <!-- Footer -->
-      <div ngbAccordion type="primary" class="footer row no-gutters sticky-footer"
+      <div ngbAccordion type="primary" class="footer no-gutters sticky-footer"
         *ngIf="layoutSvc.isFooterShown(this.router.url)">
         <div ngbAccordionItem id="footerPanel" [collapsed]="footerClosed">
           <h4 ngbAccordionHeader>
@@ -81,23 +81,23 @@ <h4 ngbAccordionHeader>
                     <ng-container *ngIf="isRunningAnonymous()">
                       <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                         (click)="showDisclaimer()">INL Privacy & Accessibility</a>
-                      <span class="mr-2 ml-2">|</span>
+                      <span class="me-2 ms-2">|</span>
                       <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                         href=" https://doe.responsibledisclosure.com/hc/en-us">Vulnerability Disclosure Program</a>
-                      <span class="mr-2 ml-2">|</span>
+                      <span class="me-2 ms-2">|</span>
                     </ng-container>
                     <!-- <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                       href="https://www.us-cert.gov/ics/Frequently-Asked-Questions">{{t('footer.faq')}}</a> -->
-                    <!-- <span class="mr-2 ml-2">|</span> -->
+                    <!-- <span class="me-2 ms-2">|</span> -->
                     <!-- <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                       href="http://www.us-cert.gov/tlp/">{{t('footer.traffic light protocol')}}</a> -->
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                     <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                       href="https://www.energy.gov/cio/privacy-program">{{t('footer.privacy and use')}}</a>
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                     <a target="_blank" rel="noopener noreferrer"
                       href="https://www.energy.gov/cio/accessibility-standard-statement">{{t('footer.accessibility')}}</a>
-                      <span class="mr-2 ml-2">|</span>
+                      <span class="me-2 ms-2">|</span>
                   </div>
                   <div class="d-flex flex-row flex-wrap justify-content-center align-items-baseline flex-11a" [innerHTML]="t('footer.cie website') | safe">
                   </div>
diff --git a/CSETWebNg/src/app/layout/iod-layout/iod-layout.component.html b/CSETWebNg/src/app/layout/iod-layout/iod-layout.component.html
index c72fabf11b..b62df34cc9 100644
--- a/CSETWebNg/src/app/layout/iod-layout/iod-layout.component.html
+++ b/CSETWebNg/src/app/layout/iod-layout/iod-layout.component.html
@@ -24,12 +24,12 @@
   <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
     <div class="sticky-navbar">
 
-      <div class="row no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
+      <div class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
         *ngIf="auth.isLocal && devMode">
         <span class="col-sm-12">Local Installation</span>
       </div>
 
-      <div class="row no-gutters pcii-header mt-0 ps-3 d-flex flex-00a"
+      <div class="no-gutters pcii-header mt-0 ps-3 d-flex flex-00a"
         *ngIf="assessSvc.isPcii()">
         <span class="col-12">Warning: Data contained in this assessment is Protected Critical Infrastructure
           Information <a href="https://www.cisa.gov/resources-tools/programs/protected-critical-infrastructure-information-pcii-program"
@@ -66,14 +66,14 @@
     </div>
 
     <!-- Body -->
-    <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+    <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
       <div class="p-0 d-flex col-xl-12 bgc-gray-50">
         <router-outlet></router-outlet>
       </div>
     </div>
 
     <!-- Footer -->
-    <div ngbAccordion type="primary" class="footer row no-gutters sticky-footer"
+    <div ngbAccordion type="primary"  class="footer no-gutters sticky-footer"
     *ngIf="layoutSvc.isFooterShown(this.router.url)">
     <div ngbAccordionItem id="footerPanel" [collapsed]="footerClosed">
       <h4 ngbAccordionHeader>
diff --git a/CSETWebNg/src/app/layout/layout-main/layout-main.component.html b/CSETWebNg/src/app/layout/layout-main/layout-main.component.html
index 7e8c4cca0e..a6bf4c02f1 100644
--- a/CSETWebNg/src/app/layout/layout-main/layout-main.component.html
+++ b/CSETWebNg/src/app/layout/layout-main/layout-main.component.html
@@ -23,7 +23,7 @@
 <div class="bgc-page d-flex flex-column flex-11a w-100" *transloco="let t">
   <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
     <div class="sticky-navbar">
-      <div class="row no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
+      <div class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
         *ngIf="auth.isLocal && devMode">
         <span class="col-sm-12">{{t('local installation')}}</span>
       </div>
@@ -63,14 +63,14 @@
     </div>
 
     <!-- Body -->
-    <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+    <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
       <div class="p-0 d-flex col-xl-12 bgc-gray-50">
         <router-outlet></router-outlet>
       </div>
     </div>
 
     <!-- Footer -->
-    <div ngbAccordion type="primary" class="footer row no-gutters sticky-footer"
+    <div ngbAccordion type="primary" class="footer no-gutters sticky-footer"
       *ngIf="layoutSvc.isFooterShown(this.router.url)">
       <div ngbAccordionItem id="footerPanel" [collapsed]="footerClosed">
         <h4 ngbAccordionHeader>
diff --git a/CSETWebNg/src/app/layout/renew-layout-main/renew-layout-main.component.html b/CSETWebNg/src/app/layout/renew-layout-main/renew-layout-main.component.html
index 964f5f7953..d686d5be58 100644
--- a/CSETWebNg/src/app/layout/renew-layout-main/renew-layout-main.component.html
+++ b/CSETWebNg/src/app/layout/renew-layout-main/renew-layout-main.component.html
@@ -23,7 +23,7 @@
 <div class="bgc-page d-flex flex-column flex-11a w-100">
   <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
     <div class="sticky-navbar">
-      <div class="row no-gutters local-install mt-0 pl-0 d-flex justify-content-center align-items-center flex-00a"
+      <div class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
         *ngIf="auth.isLocal && devMode">
         <span class="col-sm-12">Local Installation</span>
       </div>
@@ -43,7 +43,7 @@
         </span>
 
         <!-- Navbar Toggler Button (only renders when screen is narrow enough) -->
-        <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ml-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger"
+        <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ms-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger"
           *ngIf="auth.userToken() && auth.userToken() !== 'null'" tabindex="0">
           <span class="navbar-toggler-icon fs-base-5 c-gray-150"></span>
         </button>
@@ -59,14 +59,14 @@
     </div>
 
     <!-- Body -->
-    <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+    <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
       <div class="p-0 d-flex col-xl-12 bgc-gray-50">
         <router-outlet></router-outlet>
       </div>
     </div>
 
     <!-- Footer -->
-    <div ngbAccordion type="primary" class="footer row no-gutters sticky-footer"
+    <div ngbAccordion type="primary" class="footer no-gutters sticky-footer"
       *ngIf="layoutSvc.isFooterShown(this.router.url)">
       <div ngbAccordionItem id="footerPanel" [collapsed]="footerClosed">
         <h4 ngbAccordionHeader>
@@ -83,14 +83,14 @@ <h4 ngbAccordionHeader>
                     <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                       (click)="showDisclaimer()">INL
                       Privacy & Accessibility</a>
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                     <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                       href=" https://doe.responsibledisclosure.com/hc/en-us">Vulnerability Disclosure Program</a>
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                   </ng-container>
                   <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                     href="http://www.us-cert.gov/tlp/">Traffic Light Protocol</a>
-                  <span class="mr-2 ml-2">|</span>
+                  <span class="me-2 ms-2">|</span>
                   <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                     href="https://www.cisa.gov/topics/industrial-control-systems">FAQ</a>
                 </div>
diff --git a/CSETWebNg/src/app/layout/rra-layout-main/rra-layout-main.component.html b/CSETWebNg/src/app/layout/rra-layout-main/rra-layout-main.component.html
index dd4003cc1f..2af77411a3 100644
--- a/CSETWebNg/src/app/layout/rra-layout-main/rra-layout-main.component.html
+++ b/CSETWebNg/src/app/layout/rra-layout-main/rra-layout-main.component.html
@@ -23,7 +23,7 @@
 <div class="bgc-page d-flex flex-column flex-11a w-100">
     <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
       <div
-        class="row no-gutters local-install mt-0 pl-0 d-flex justify-content-center align-items-center flex-00a"
+        class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
         *ngIf="auth.isLocal && devMode">
         <span class="col-sm-12">Local Installation</span>
       </div>
@@ -177,7 +177,7 @@
         </span>
 
         <!-- Navbar Toggler Button (only renders when screen is narrow enough) -->
-        <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ml-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger" tabindex="0">
+        <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ms-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger" tabindex="0">
           <span class="navbar-toggler-icon fs-base-5 c-gray-150"></span>
         </button>
 
@@ -191,14 +191,14 @@
       </nav>
 
       <!-- Body -->
-      <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+      <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
         <div class="p-0 d-flex col-xl-12 bgc-gray-50">
           <router-outlet></router-outlet>
         </div>
       </div>
 
       <!-- Footer -->
-      <div ngbAccordion type="primary" class="footer row no-gutters sticky-footer"
+      <div ngbAccordion type="primary" class="footer no-gutters sticky-footer"
       *ngIf="layoutSvc.isFooterShown(this.router.url)">
       <div ngbAccordionItem id="footerPanel" [collapsed]="footerClosed">
         <h4 ngbAccordionHeader>
@@ -211,15 +211,15 @@ <h4 ngbAccordionHeader>
             <ng-template>
               <div class="footer-section-2 p-2">
                 <div class="d-flex flex-row flex-wrap justify-content-center flex-11a">
-                  <a class="mr-2" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
+                  <a class="me-2" target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                     href="https://www.us-cert.gov/ics/Frequently-Asked-Questions">FAQ</a>
-                  <span class="mr-2 ml-2">|</span>
+                  <span class="me-2 ms-2">|</span>
                   <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                     href="http://www.us-cert.gov/tlp/">Traffic Light Protocol</a>
-                  <span class="mr-2 ml-2">|</span>
+                  <span class="me-2 ms-2">|</span>
                   <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                     href="http://www.us-cert.gov/privacy/">Privacy &amp; Use</a>
-                  <span class="mr-2 ml-2">|</span>
+                  <span class="me-2 ms-2">|</span>
                   <a target="_blank" rel="noopener noreferrer"
                     href="http://www.us-cert.gov/accessibility/">Accessibility</a>
                 </div>
diff --git a/CSETWebNg/src/app/layout/tsa-layout-main/tsa-layout-main.component.html b/CSETWebNg/src/app/layout/tsa-layout-main/tsa-layout-main.component.html
index 6acd0cb668..fc642e354b 100644
--- a/CSETWebNg/src/app/layout/tsa-layout-main/tsa-layout-main.component.html
+++ b/CSETWebNg/src/app/layout/tsa-layout-main/tsa-layout-main.component.html
@@ -23,7 +23,7 @@
 <div class="bgc-page d-flex flex-column flex-11a w-100">
   <div class="container-fluid no-gutters d-flex flex-column justify-content-start flex-11a w-100" id="cset-app">
     <div class="sticky-navbar">
-      <div class="row no-gutters local-install mt-0 pl-0 d-flex justify-content-center align-items-center flex-00a"
+      <div class="no-gutters local-install mt-0 ps-0 d-flex justify-content-center align-items-center flex-00a"
         *ngIf="auth.isLocal && devMode">
         <span class="col-sm-12">Local Installation</span>
       </div>
@@ -42,7 +42,7 @@
         </span>
 
         <!-- Navbar Toggler Button (only renders when screen is narrow enough) -->
-        <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ml-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger"
+        <button mat-button class="navbar-menu-header navbar-toggler c-gray-150 ms-auto" [matMenuTriggerFor]="topMenus" #topMenusTrigger="matMenuTrigger"
           *ngIf="auth.userToken() && auth.userToken() !== 'null'" tabindex="0">
           <span class="navbar-toggler-icon fs-base-5 c-gray-150"></span>
         </button>
@@ -56,14 +56,14 @@
     </div>
 
     <!-- Body -->
-    <div class="row no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
+    <div class="no-gutters d-flex flex-nowrap justify-content-between flex-11a w-100">
       <div class="p-0 d-flex col-xl-12 bgc-gray-50">
         <router-outlet></router-outlet>
       </div>
     </div>
 
     <!-- Footer -->
-    <div ngbAccordion type="primary" class="footer row no-gutters sticky-footer"
+    <div ngbAccordion type="primary" class="footer no-gutters sticky-footer"
       *ngIf="layoutSvc.isFooterShown(this.router.url)">
       <div ngbAccordionItem id="footerPanel" [collapsed]="footerClosed">
         <h4 ngbAccordionHeader>
@@ -79,17 +79,17 @@ <h4 ngbAccordionHeader>
                   <ng-container *ngIf="isRunningAnonymous()">
                     <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                       (click)="showDisclaimer()">INL Privacy & Accessibility</a>
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                     <a target="_blank" rel="noopener noreferrer"
                       href=" https://doe.responsibledisclosure.com/hc/en-us">Vulnerability Disclosure Program</a>
-                    <span class="mr-2 ml-2">|</span>
+                    <span class="me-2 ms-2">|</span>
                   </ng-container>
                   <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                     href="https://www.tsa.gov/travel/frequently-asked-questions">FAQ</a>
-                  <span class="mr-2 ml-2">|</span>
+                  <span class="me-2 ms-2">|</span>
                   <a target="_blank" rel="noopener noreferrer" rel="noopener noreferrer"
                     href="https://www.tsa.gov/privacy-policy">Privacy &amp; Use</a>
-                  <span class="mr-2 ml-2">|</span>
+                  <span class="me-2 ms-2">|</span>
                   <a target="_blank" rel="noopener noreferrer"
                     href="https://www.tsa.gov/accessibility">Accessibility</a>
                 </div>
diff --git a/CSETWebNg/src/app/reports/acet-answeredquestions/acet-answeredquestions.component.html b/CSETWebNg/src/app/reports/acet-answeredquestions/acet-answeredquestions.component.html
index 80cac23a05..7c817cd82a 100644
--- a/CSETWebNg/src/app/reports/acet-answeredquestions/acet-answeredquestions.component.html
+++ b/CSETWebNg/src/app/reports/acet-answeredquestions/acet-answeredquestions.component.html
@@ -104,21 +104,21 @@ <h1 class="page-title">{{ t('answered statements') }}</h1>
                     </tr>
                     <ng-container *ngFor="let f of d.assessmentFactors">
                         <tr>
-                            <td colspan="5" class="background-2 font-weight-bold pl-4">{{f.title}} - {{
+                            <td colspan="5" class="background-2 font-weight-bold ps-4">{{f.title}} - {{
                                 'reports.assessment factor' | transloco }}
                             </td>
                         </tr>
                         <ng-container *ngFor="let c of f.components">
                             <tr>
-                                <td colspan="5" class="background-3 pl-5">{{c.title}} - {{ 'reports.component' |
+                                <td colspan="5" class="background-3 ps-5">{{c.title}} - {{ 'reports.component' |
                                     transloco }}</td>
                             </tr>
                             <ng-container *ngFor="let q of c.questions">
                                 <tr>
                                     <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                    <td class="pr-3" [innerHTML]="q.questionText"></td>
-                                    <td class="pr-3">{{questionsSvc.answerDisplayLabel('ACET', q.answerText)}}</td>
-                                    <td class="pr-3">{{acetSvc.getAbbrev(q.maturityLevel)}}</td>
+                                    <td class="pe-3" [innerHTML]="q.questionText"></td>
+                                    <td class="pe-3">{{questionsSvc.answerDisplayLabel('ACET', q.answerText)}}</td>
+                                    <td class="pe-3">{{acetSvc.getAbbrev(q.maturityLevel)}}</td>
                                     <td>{{q.comments}}</td>
                                 </tr>
                             </ng-container>
diff --git a/CSETWebNg/src/app/reports/acet-commentsmarked/acet-commentsmarked.component.html b/CSETWebNg/src/app/reports/acet-commentsmarked/acet-commentsmarked.component.html
index 0fc914ce58..dc3337f4a9 100644
--- a/CSETWebNg/src/app/reports/acet-commentsmarked/acet-commentsmarked.component.html
+++ b/CSETWebNg/src/app/reports/acet-commentsmarked/acet-commentsmarked.component.html
@@ -62,7 +62,7 @@
         </div>
 
         <ng-template #mainContent>
-            <div class="ml-3 mr-3 form">
+            <div class="ms-3 me-3 form">
                 <div class="d-flex flex-row justify-content-between align-items-end">
                     <h1 class="page-title">{{ t('statements mfr') }}</h1>
                     <p style="color: #de761c;text-align: right;">{{ 'reports.marked for review' | transloco }} - <img
@@ -80,7 +80,7 @@ <h1 class="page-title">{{ t('statements mfr') }}</h1>
                                     {{ questionsSvc.answerDisplayLabel('ACET', s.answer.answer_Text)}}
                                 </div>
                             </td>
-                            <td class="deficiencies-list-flag"><img title="marked for review" class="MarkedFlag ml-2"
+                            <td class="deficiencies-list-flag"><img title="marked for review" class="MarkedFlag ms-2"
                                     *ngIf="s.answer.mark_For_Review" src="assets/images/icons/MarkedFlag.png"></td>
                         </tr>
                         <div *ngIf="s.answer.comment;then c_comments_given"></div>
@@ -117,7 +117,7 @@ <h1 class="page-title">{{ t('statements mfr') }}</h1>
                 </div>
             </div>
 
-            <div class="ml-3 mr-3 form">
+            <div class="ms-3 me-3 form">
                 <div class="d-flex flex-row justify-content-between align-items-end">
                     <h1 class="page-title">{{ t('statement comments') }}</h1>
                     <p style="color: #de761c;text-align: right;">{{ 'reports.marked for review' | transloco }} - <img
@@ -135,7 +135,7 @@ <h1 class="page-title">{{ t('statement comments') }}</h1>
                                     {{questionsSvc.answerDisplayLabel('ACET', s.answer.answer_Text)}}
                                 </div>
                             </td>
-                            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2"
+                            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2"
                                     *ngIf="s.answer.mark_For_Review" src="assets/images/icons/MarkedFlag.png">
                             </td>
                         </tr>
diff --git a/CSETWebNg/src/app/reports/acet-compensatingcontrols/acet-compensatingcontrols.component.html b/CSETWebNg/src/app/reports/acet-compensatingcontrols/acet-compensatingcontrols.component.html
index 5b8f28050a..f97a442c9f 100644
--- a/CSETWebNg/src/app/reports/acet-compensatingcontrols/acet-compensatingcontrols.component.html
+++ b/CSETWebNg/src/app/reports/acet-compensatingcontrols/acet-compensatingcontrols.component.html
@@ -58,7 +58,7 @@
         </div>
     </div>
     <div class="page-break">
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <div>
                     <h1 class="page-title">{{ t('compensating controls') }}</h1>
@@ -77,7 +77,7 @@ <h1 class="page-title">{{ t('compensating controls') }}</h1>
                             <td class="deficiencies-list-comment">{{s.mat.question_Text}}</td>
                             <td style="padding-top: 1rem; padding-left: 5rem; vertical-align: top; color: #555555">
                                 {{questionsSvc.answerDisplayLabel('ACET', s.answer.answer_Text)}}</td>
-                            <td class="deficiencies-list-flag"><img title="marked for review" class="MarkedFlag ml-2"
+                            <td class="deficiencies-list-flag"><img title="marked for review" class="MarkedFlag ms-2"
                                     *ngIf="s.answer.mark_For_Review" src="assets/images/icons/MarkedFlag.png"></td>
                         </tr>
                         <div *ngIf="s.answer.comment;then show_comments else no_comments">
diff --git a/CSETWebNg/src/app/reports/acet-deficency/acet-deficency.component.html b/CSETWebNg/src/app/reports/acet-deficency/acet-deficency.component.html
index 1571ee29e9..14d8486ef8 100644
--- a/CSETWebNg/src/app/reports/acet-deficency/acet-deficency.component.html
+++ b/CSETWebNg/src/app/reports/acet-deficency/acet-deficency.component.html
@@ -90,26 +90,26 @@ <h1 class="page-title">{{ t('gaps') }}</h1>
           </tr>
           <ng-container *ngFor="let f of d.assessmentFactors">
             <tr *ngIf="f.isDeficient">
-              <td colspan="5" class="background-2 font-weight-bold pl-4" style="padding:.5rem">{{f.title}} -
+              <td colspan="5" class="background-2 font-weight-bold ps-4" style="padding:.5rem">{{f.title}} -
                 {{ 'acet.assessment factor' | transloco }}
               </td>
             </tr>
             <ng-container *ngFor="let c of f.components">
               <tr *ngIf="c.isDeficient">
-                <td colspan="5" class="background-3 pl-5" style="padding:.5rem">{{c.title}} - {{ 'acet.component' |
+                <td colspan="5" class="background-3 ps-5" style="padding:.5rem">{{c.title}} - {{ 'acet.component' |
                   transloco }}</td>
               </tr>
               <ng-container *ngFor="let q of c.questions">
                 <tr *ngIf="c.isDeficient && q.answerText == 'N'">
                   <td class="deficiencies-list-item font-weight-bold text-nowrap">{{q.title}}</td>
-                  <td class="deficiencies-list-comment pr-3" [innerHTML]="q.questionText"></td>
+                  <td class="deficiencies-list-comment pe-3" [innerHTML]="q.questionText"></td>
                   <td style="padding-top: 1rem; padding-left: 1rem; vertical-align: top; color: #555555">
                     <div style="width: 7rem">
                       {{ 'answer-options.button-labels.' + questionsSvc.answerDisplayLabel('ACET', q.answerText).toLowerCase() |
                       transloco }}
                     </div>
                   </td>
-                  <td class="deficiencies-list-flag"><img title="marked for review" class="MarkedFlag ml-2"
+                  <td class="deficiencies-list-flag"><img title="marked for review" class="MarkedFlag ms-2"
                       *ngIf="q.markForReview" src="assets/images/icons/MarkedFlag.png"></td>
                 </tr>
                 <div *ngIf="q.comment && c.isDeficient && q.answerText == 'N';then c_comments_given"></div>
diff --git a/CSETWebNg/src/app/reports/acet-executive/acet-executive.component.html b/CSETWebNg/src/app/reports/acet-executive/acet-executive.component.html
index 105f5d6404..3f90b4ea34 100644
--- a/CSETWebNg/src/app/reports/acet-executive/acet-executive.component.html
+++ b/CSETWebNg/src/app/reports/acet-executive/acet-executive.component.html
@@ -58,7 +58,7 @@
     </div>
     <div class="page-break"></div>
     <!---->
-    <div class="ml-3 mr-3 form">
+    <div class="ms-3 me-3 form">
         <h1 class="page-header">
             {{ t('site information') }}
         </h1>
@@ -139,7 +139,7 @@ <h1 class="item-title m-0">{{comp.name}}</h1>
                                 {{ 'level.' + comp.levelDisplay.toLowerCase() | transloco }}</div>
                         </div>
                     </div>
-                    <div class="ml-3 mr-3 form">
+                    <div class="ms-3 me-3 form">
                         <table class="label-value mx-auto">
                             <tbody>
                                 <tr class="item-row">
diff --git a/CSETWebNg/src/app/reports/acet-reports.scss b/CSETWebNg/src/app/reports/acet-reports.scss
index 2f576de528..adf4b619d7 100644
--- a/CSETWebNg/src/app/reports/acet-reports.scss
+++ b/CSETWebNg/src/app/reports/acet-reports.scss
@@ -62,7 +62,7 @@ $active-text-color: $white;
     margin-bottom: 1.5rem !important;
   }
 
-  .mr-3,
+  .me-3,
   .mx-3 {
     margin-right: 1rem !important;
   }
@@ -72,7 +72,7 @@ $active-text-color: $white;
     margin-bottom: 1rem !important;
   }
 
-  .ml-3,
+  .ms-3,
   .mx-3 {
     margin-left: 1rem !important;
   }
diff --git a/CSETWebNg/src/app/reports/analysis-network-components/analysis-network-components.component.html b/CSETWebNg/src/app/reports/analysis-network-components/analysis-network-components.component.html
index e9ea0c2c62..95092ecae8 100644
--- a/CSETWebNg/src/app/reports/analysis-network-components/analysis-network-components.component.html
+++ b/CSETWebNg/src/app/reports/analysis-network-components/analysis-network-components.component.html
@@ -38,7 +38,7 @@ <h2>{{t('reports.core.executive summary.combined component summary')}}</h2>
         </div>
     </div>
 
-    <div class="pl-3">
+    <div class="ps-3">
         <p>{{t('reports.core.executive summary.identified warnings', {count: warningCount})}}
         </p>
         <p> {{t('reports.core.executive summary.see network details')}}
diff --git a/CSETWebNg/src/app/reports/c2m2/c2m2-report/c2m2-detailed-results/c2m2-detailed-results.component.html b/CSETWebNg/src/app/reports/c2m2/c2m2-report/c2m2-detailed-results/c2m2-detailed-results.component.html
index 9db75fb2c4..5b78b7a511 100644
--- a/CSETWebNg/src/app/reports/c2m2/c2m2-report/c2m2-detailed-results/c2m2-detailed-results.component.html
+++ b/CSETWebNg/src/app/reports/c2m2/c2m2-report/c2m2-detailed-results/c2m2-detailed-results.component.html
@@ -47,12 +47,12 @@ <h1>4.{{domain.sequence}} Domain: {{domain.title}} ({{domain.shortTitle}})</h1>
 
     <!-- start of the donut box -->
     <div style="position: relative; border: 1px solid rgb(179, 179, 179);">
-      <div class="color-legend ml-3 mt-1" style="width: 60%; flex-wrap: wrap;">
-        <div class="row d-flex align-items-center mr-4">
+      <div class="color-legend ms-3 mt-1" style="width: 60%; flex-wrap: wrap;">
+        <div class="row d-flex align-items-center me-4">
           <span class="legend-color-box" style="background-color: #265B94;"></span>
           <span style="font-size: 0.8em;">Fully Implemented (FI)</span>
         </div>
-        <div class="row d-flex align-items-center mr-4" style="padding-left: 14px;">
+        <div class="row d-flex align-items-center me-4" style="padding-left: 14px;">
           <span class="legend-color-box" style="background-color: #F5DA8C;"></span>
           <span style="font-size: 0.8em;">Partially Implemented (PI)</span>
         </div>
@@ -60,7 +60,7 @@ <h1>4.{{domain.sequence}} Domain: {{domain.title}} ({{domain.shortTitle}})</h1>
           <span class="legend-color-box all-borders" style="background-color: #E6E6E6;"></span>
           <span style="font-size: 0.8em;">Unanswered (U)</span>
         </div>
-        <div class="row d-flex align-items-center mr-4">
+        <div class="row d-flex align-items-center me-4">
           <span class="legend-color-box" style="background-color: #90A5C7;"></span>
           <span style="font-size: 0.8em;">Largely Implemented (LI)</span>
         </div>
diff --git a/CSETWebNg/src/app/reports/cie/cie-all-questions/cie-all-questions.component.html b/CSETWebNg/src/app/reports/cie/cie-all-questions/cie-all-questions.component.html
index f76f9346ef..33b8c8f3b3 100644
--- a/CSETWebNg/src/app/reports/cie/cie-all-questions/cie-all-questions.component.html
+++ b/CSETWebNg/src/app/reports/cie/cie-all-questions/cie-all-questions.component.html
@@ -59,7 +59,7 @@
 
     <ng-template #mainContent>
         <div class="page-break"></div>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row" style="justify-content: space-between">
                 <div style="align-self: flex-end;">
                     <div class="h2 report-text-blue">Demographics</div>
@@ -138,18 +138,18 @@
                             <ng-container *ngFor="let q of f.questions">
                                 <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Principle_' + f.title) && q.maturityLevel == '5'">
                                     <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                    <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                    <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
+                                    <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                    <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
                                 </tr>
                                 <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Principle_' + f.title) && q.maturityLevel == '5' && q.freeResponseText != null"
                                     >
                                     <td></td>
-                                    <td class="pr-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
+                                    <td class="pe-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
                                 </tr>
                                 <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Principle_' + f.title)
                                     && q.maturityLevel == '5' && q.documents != null">
                                     <td></td>
-                                    <td class="pr-5" colspan="3" style="white-space: pre-wrap;">
+                                    <td class="pe-5" colspan="3" style="white-space: pre-wrap;">
                                         Documents:
                                         <ul *ngFor="let doc of q.documents">
                                             <li> 
@@ -228,7 +228,7 @@
                                 <ng-container *ngIf="!c.isDeficient">
                                     <!-- <tr *ngIf="shouldExpand('Phase_' + f.title) && !c.isDeficient"> -->
                                     <tr *ngIf="shouldExpand('Phase_' + f.title) && !c.isDeficient">
-                                        <td colspan="4" class="background-2 pl-4 font-weight-bold">{{c.title}} - Phase
+                                        <td colspan="4" class="background-2 ps-4 font-weight-bold">{{c.title}} - Phase
                                             <label class="btn form-check-label" style="float: right">{{
                                                 this.expandedOptions.get('Phase_' + f.title + '_' + c.title) ? '-' : '+' }}
                                                 <input class="hide" name="nameExample" type="checkbox"
@@ -239,13 +239,13 @@
                                     <ng-container *ngFor="let q of c.questions">
                                         <ng-container *ngIf="c.title == 'Controlling Processes' && q.title != 'Question K' && shouldExpand('Phase_' + f.title) && shouldExpand('Phase_' + f.title + '_' + c.title) && q.maturityLevel != '5'">
                                             <tr class="background-3 font-weight-bold">
-                                                <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                     Project Management
                                                 </td>
-                                                <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                     Change/Configuration Management
                                                 </td>
-                                                <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                     Risk Management
                                                 </td>
                                             </tr>
@@ -255,20 +255,20 @@
                                             [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''"
                                             >
                                             <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                            <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                            <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
+                                            <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                            <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
                                         </tr>
                                         <tr *ngIf="q.title != 'Question K' && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) && q.maturityLevel != '5' && q.freeResponseText != null && q.visible"
                                             [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                             <td></td>
-                                            <td class="pr-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
+                                            <td class="pe-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
                                         </tr>
 
                                         <tr *ngIf="q.title != 'Question K' && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) 
                                             && q.maturityLevel != '5' && q.documents != null && q.visible"
                                             [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                             <td></td>
-                                            <td class="pr-5" colspan="3" style="white-space: pre-wrap;">
+                                            <td class="pe-5" colspan="3" style="white-space: pre-wrap;">
                                                 Documents:
                                                 <ul *ngFor="let doc of q.documents">
                                                     <li> 
diff --git a/CSETWebNg/src/app/reports/cie/cie-mfr-report/cie-mfr-report.component.html b/CSETWebNg/src/app/reports/cie/cie-mfr-report/cie-mfr-report.component.html
index 2119a2c5d3..caa790c981 100644
--- a/CSETWebNg/src/app/reports/cie/cie-mfr-report/cie-mfr-report.component.html
+++ b/CSETWebNg/src/app/reports/cie/cie-mfr-report/cie-mfr-report.component.html
@@ -58,7 +58,7 @@
 
     <ng-template #mainContent>
         <div class="page-break"></div>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row" style="justify-content: space-between">
                 <div style="align-self: flex-end;">
                     <div class="h2 report-text-blue">Demographics</div>
@@ -142,17 +142,17 @@
                                     <!-- the [class] check sees if it is a parent or a child -->
                                     <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Principle_' + f.title) && q.maturityLevel == '5'">
                                         <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                        <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                        <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
+                                        <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                        <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
                                     </tr>
                                     <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Principle_' + f.title) && q.maturityLevel == '5' && q.freeResponseText != null">
                                         <td></td>
-                                        <td class="pr-5" colspan="2" style="white-space: pre-wrap;" [innerHTML]="q.freeResponseText"></td>
+                                        <td class="pe-5" colspan="2" style="white-space: pre-wrap;" [innerHTML]="q.freeResponseText"></td>
                                         <td></td>
                                     </tr>
                                     <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Principle_' + f.title) && q.maturityLevel == '5' && q.documents != null">
                                         <td></td>
-                                        <td class="pr-5" colspan="2">
+                                        <td class="pe-5" colspan="2">
                                             Documents:
                                             <ul *ngFor="let doc of q.documents">
                                                 <li> 
@@ -237,7 +237,7 @@
                                 <ng-container *ngFor="let c of f.components">
                                     <ng-container *ngIf="!c.isDeficient">
                                         <tr *ngIf="shouldExpand('Phase_' + f.title)">
-                                            <td colspan="4" class="background-2 pl-4 font-weight-bold">{{c.title}} - Phase
+                                            <td colspan="4" class="background-2 ps-4 font-weight-bold">{{c.title}} - Phase
                                                 <label class="btn form-check-label" style="float: right">{{
                                                     this.expandedOptions.get('Phase_' + f.title + '_' + c.title) ? '-' : '+' }}
                                                     <input class="hide" name="nameExample" type="checkbox"
@@ -249,13 +249,13 @@
                                             <!-- the [class] check sees if it is a parent or a child -->
                                             <ng-container *ngIf="c.title == 'Controlling Processes' && q.title != 'Question K' && shouldExpand('Phase_' + f.title) && shouldExpand('Phase_' + f.title + '_' + c.title) && q.maturityLevel != '5'">
                                                 <tr class="background-3 font-weight-bold">
-                                                    <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                    <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                         Project Management
                                                     </td>
-                                                    <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                    <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                         Change/Configuration Management
                                                     </td>
-                                                    <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                    <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                         Risk Management
                                                     </td>
                                                 </tr>
@@ -264,20 +264,20 @@
                                                 [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''"
                                                 >
                                                 <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                                <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                                <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
+                                                <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                                <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
                                             </tr>
                                             <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) && q.maturityLevel != '5' && q.freeResponseText != null"
                                                 [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                                 <td></td>
-                                                <td class="pr-5" colspan="2" style="white-space: pre-wrap;" [innerHTML]="q.freeResponseText"></td>
+                                                <td class="pe-5" colspan="2" style="white-space: pre-wrap;" [innerHTML]="q.freeResponseText"></td>
                                                 <td></td>
                                             </tr>
                                             <!--  -->
                                             <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) && q.maturityLevel != '5' && q.documents != null"
                                                 [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                                 <td></td>
-                                                <td class="pr-5" colspan="2" style="white-space: pre-wrap;">
+                                                <td class="pe-5" colspan="2" style="white-space: pre-wrap;">
                                                     Documents:
                                                     <ul *ngFor="let doc of q.documents">
                                                         <li> 
diff --git a/CSETWebNg/src/app/reports/cie/cie-not-applicable/cie-not-applicable.component.html b/CSETWebNg/src/app/reports/cie/cie-not-applicable/cie-not-applicable.component.html
index cf0e094e8f..026bf7cd9a 100644
--- a/CSETWebNg/src/app/reports/cie/cie-not-applicable/cie-not-applicable.component.html
+++ b/CSETWebNg/src/app/reports/cie/cie-not-applicable/cie-not-applicable.component.html
@@ -58,7 +58,7 @@
 
     <ng-template #mainContent>
         <div class="page-break"></div>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row" style="justify-content: space-between">
                 <div style="align-self: flex-end;">
                     <div class="h2 report-text-blue">Demographics</div>
@@ -137,18 +137,18 @@
                                     <!-- the [class] check sees if it is a parent or a child -->
                                     <tr *ngIf="q.title != 'Question K' && shouldExpand('Principle_' + f.title) && q.maturityLevel == '5'">
                                         <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                        <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                        <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
+                                        <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                        <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
                                     </tr>
                                     <tr *ngIf="q.title != 'Question K' && shouldExpand('Principle_' + f.title) && q.maturityLevel == '5' && q.freeResponseText != null"
                                         >
                                         <td></td>
-                                        <td class="pr-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
+                                        <td class="pe-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
                                     </tr>
                                     <tr *ngIf="q.title != 'Question K' && shouldExpand('Principle_' + f.title)
                                         && q.maturityLevel == '5' && q.documents != null">
                                         <td></td>
-                                        <td class="pr-5" colspan="3" style="white-space: pre-wrap;">
+                                        <td class="pe-5" colspan="3" style="white-space: pre-wrap;">
                                             Documents:
                                             <ul *ngFor="let doc of q.documents">
                                                 <li> 
@@ -232,7 +232,7 @@
                                 <ng-container *ngFor="let c of f.components">
                                     <ng-container *ngIf="!c.isDeficient">
                                         <tr *ngIf="shouldExpand('Phase_' + f.title)">
-                                            <td colspan="4" class="background-2 pl-4 font-weight-bold">{{c.title}} - Phase
+                                            <td colspan="4" class="background-2 ps-4 font-weight-bold">{{c.title}} - Phase
                                                 <label class="btn form-check-label" style="float: right">{{
                                                     this.expandedOptions.get('Phase_' + f.title + '_' + c.title) ? '-' : '+' }}
                                                     <input class="hide" name="nameExample" type="checkbox"
@@ -244,13 +244,13 @@
                                             <!-- the [class] check sees if it is a parent or a child -->
                                             <ng-container *ngIf="c.title == 'Controlling Processes' && q.title != 'Question K' && shouldExpand('Phase_' + f.title) && shouldExpand('Phase_' + f.title + '_' + c.title) && q.maturityLevel != '5'">
                                                 <tr class="background-3 font-weight-bold">
-                                                    <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                    <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                         Project Management
                                                     </td>
-                                                    <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                    <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                         Change/Configuration Management
                                                     </td>
-                                                    <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                    <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                         Risk Management
                                                     </td>
                                                 </tr>
@@ -259,20 +259,20 @@
                                                 [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''"
                                                 >
                                                 <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                                <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                                <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? '' : 'NA')"></td>
+                                                <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                                <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? '' : 'NA')"></td>
                                             </tr>
                                             <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) && q.maturityLevel != '5' && q.freeResponseText != null"
                                                 [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                                 <td></td>
-                                                <td class="pr-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
+                                                <td class="pe-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
                                             </tr>
 
                                             <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) 
                                                 && q.maturityLevel != '5' && q.documents != null"
                                                 [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                                 <td></td>
-                                                <td class="pr-5" colspan="3" style="white-space: pre-wrap;">
+                                                <td class="pe-5" colspan="3" style="white-space: pre-wrap;">
                                                     Documents:
                                                     <ul *ngFor="let doc of q.documents">
                                                         <li> 
diff --git a/CSETWebNg/src/app/reports/cie/cie-principle-only/cie-principle-only.component.html b/CSETWebNg/src/app/reports/cie/cie-principle-only/cie-principle-only.component.html
index 5514d661f0..8e9256f6f8 100644
--- a/CSETWebNg/src/app/reports/cie/cie-principle-only/cie-principle-only.component.html
+++ b/CSETWebNg/src/app/reports/cie/cie-principle-only/cie-principle-only.component.html
@@ -58,7 +58,7 @@
 
     <ng-template #mainContent>
         <div class="page-break"></div>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row" style="justify-content: space-between">
                 <div style="align-self: flex-end;">
                     <div class="h2 report-text-blue">Demographics</div>
@@ -125,7 +125,7 @@
                         <ng-container *ngFor="let f of d.assessmentFactors">
                             <ng-container *ngIf="!f.areQuestionsDeficient">
                                 <tr class="rkw-domain">
-                                    <td colspan="4" class="background-2 pl-4 font-weight-bold" style="width: 100%">{{f.title}} - Principle
+                                    <td colspan="4" class="background-2 ps-4 font-weight-bold" style="width: 100%">{{f.title}} - Principle
                                         <label class="btn form-check-label" style="float: right;">{{
                                             this.expandedOptions.get(f.title) ? '-' : '+' }}
                                             <input class="hide" name="nameExample" type="checkbox"
@@ -136,17 +136,17 @@
                                 <ng-container *ngFor="let q of f.questions">
                                         <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand(f.title) && q.maturityLevel == '5'">
                                             <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                            <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                            <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
+                                            <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                            <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
                                         </tr>
                                         <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand(f.title) && q.maturityLevel == '5' && q.freeResponseText != null">
                                             <td></td>
-                                            <td class="pr-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
+                                            <td class="pe-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
                                         </tr>
                                         <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand(f.title)
                                             && q.maturityLevel == '5' && q.documents != null">
                                             <td></td>
-                                            <td class="pr-5" colspan="3" style="white-space: pre-wrap;">
+                                            <td class="pe-5" colspan="3" style="white-space: pre-wrap;">
                                                 Documents:
                                                 <ul *ngFor="let doc of q.documents">
                                                     <li> 
diff --git a/CSETWebNg/src/app/reports/cie/cie-principle-phase/cie-principle-phase.component.html b/CSETWebNg/src/app/reports/cie/cie-principle-phase/cie-principle-phase.component.html
index e4d6c5882a..bea0c243a7 100644
--- a/CSETWebNg/src/app/reports/cie/cie-principle-phase/cie-principle-phase.component.html
+++ b/CSETWebNg/src/app/reports/cie/cie-principle-phase/cie-principle-phase.component.html
@@ -58,7 +58,7 @@
 
     <ng-template #mainContent>
         <div class="page-break"></div>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row" style="justify-content: space-between">
                 <div style="align-self: flex-end;">
                     <div class="h2 report-text-blue">Demographics</div>
@@ -135,7 +135,7 @@
                                 <ng-container *ngIf="!c.isDeficient">
 
                                     <tr *ngIf="shouldExpand('Phase_' + f.title)">
-                                        <td colspan="4" class="background-2 pl-4 font-weight-bold">{{c.title}} - Phase
+                                        <td colspan="4" class="background-2 ps-4 font-weight-bold">{{c.title}} - Phase
                                             <label class="btn form-check-label" style="float: right">{{
                                                 this.expandedOptions.get('Phase_' + f.title + '_' + c.title) ? '-' : '+' }}
                                                 <input class="hide" name="nameExample" type="checkbox"
@@ -147,13 +147,13 @@
 
                                         <ng-container *ngIf="c.title == 'Controlling Processes' && q.title != 'Question K' && shouldExpand('Phase_' + f.title) && shouldExpand('Phase_' + f.title + '_' + c.title) && q.maturityLevel != '5'">
                                             <tr class="background-3 font-weight-bold">
-                                                <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                <td *ngIf="q.maturityLevel == '2' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                     Project Management
                                                 </td>
-                                                <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                <td *ngIf="q.maturityLevel == '3' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                     Change/Configuration Management
                                                 </td>
-                                                <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pr-5">
+                                                <td *ngIf="q.maturityLevel == '4' && q.title == 'Question 1'" colspan="4" style="font-size: large;" class="pe-5">
                                                     Risk Management
                                                 </td>
                                             </tr>
@@ -164,19 +164,19 @@
                                             [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''"
                                             >
                                             <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                            <td class="pr-5" colspan="2" [innerHTML]="q.questionText"></td>
-                                            <td class="pr-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
+                                            <td class="pe-5" colspan="2" [innerHTML]="q.questionText"></td>
+                                            <td class="pe-5" [innerHTML]="(q.answerText == 'U' ? (q.freeResponseText != null ? 'Yes' : 'No') : 'NA')"></td>
                                         </tr>
                                         <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) && q.maturityLevel != '5' && q.freeResponseText != null"
                                             [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                             <td></td>
-                                            <td class="pr-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
+                                            <td class="pe-5" colspan="3" style="white-space: pre-wrap;" [innerHTML]="'Explanation: \n' + q.freeResponseText"></td>
                                         </tr>
                                         <tr *ngIf="q.title != 'Question K' && q.visible && shouldExpand('Phase_' + f.title + '_' + c.title) && shouldExpand('Phase_' + f.title) 
                                             && q.maturityLevel != '5' && q.documents != null"
                                             [class]="q.title.length == 10 || q.title.charAt(q.title.length - 1) == '0' ? 'background-3' : ''">
                                             <td></td>
-                                            <td class="pr-5" colspan="3" style="white-space: pre-wrap;">
+                                            <td class="pe-5" colspan="3" style="white-space: pre-wrap;">
                                                 Documents:
                                                 <ul *ngFor="let doc of q.documents">
                                                     <li> 
diff --git a/CSETWebNg/src/app/reports/cis-commentsmarked/cis-commentsmarked.component.html b/CSETWebNg/src/app/reports/cis-commentsmarked/cis-commentsmarked.component.html
index 21f772f0fb..753a1974ef 100644
--- a/CSETWebNg/src/app/reports/cis-commentsmarked/cis-commentsmarked.component.html
+++ b/CSETWebNg/src/app/reports/cis-commentsmarked/cis-commentsmarked.component.html
@@ -47,7 +47,7 @@
     </div>
 
     <ng-template #mainContent>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">Practices Marked for Review</h1>
                 <p style="color: #de761c;text-align: right;">Marked for Review - <img class="MarkedFlag"
@@ -60,7 +60,7 @@ <h1 class="page-title">Practices Marked for Review</h1>
                         <td class="deficiencies-list-item"><b>Practice {{s.mat.question_Title}}</b></td>
                         <td class="deficiencies-list-comment"
                             [innerHTML]="reportSvc.scrubGlossaryMarkup(s.mat.question_Text)"></td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png">
                         </td>
                     </tr>
@@ -86,7 +86,7 @@ <h1 class="page-title">Practices Marked for Review</h1>
             </div>
         </div>
 
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">Practice Comments</h1>
                 <p style="color: #de761c;text-align: right;">Marked for Review - <img class="MarkedFlag"
@@ -99,7 +99,7 @@ <h1 class="page-title">Practice Comments</h1>
                         <td class="deficiencies-list-item"><b>Practice {{s.mat.question_Title}}</b></td>
                         <td class="deficiencies-list-comment"
                             [innerHTML]="reportSvc.scrubGlossaryMarkup(s.mat.question_Text)"></td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png"></td>
                     </tr>
                     <div *ngIf="s.answer.comment;then sc_comments_given"></div>
diff --git a/CSETWebNg/src/app/reports/cis/grouping-block-nested-report/grouping-block-nested-report.component.html b/CSETWebNg/src/app/reports/cis/grouping-block-nested-report/grouping-block-nested-report.component.html
index 2edd604426..1d33e26f9e 100644
--- a/CSETWebNg/src/app/reports/cis/grouping-block-nested-report/grouping-block-nested-report.component.html
+++ b/CSETWebNg/src/app/reports/cis/grouping-block-nested-report/grouping-block-nested-report.component.html
@@ -26,7 +26,7 @@ <h4>{{title}}</h4>
   {{description}}
 </div>
 
-<div *ngFor="let g of grouping.groupings" class="ml-3 mb-4">
+<div *ngFor="let g of grouping.groupings" class="ms-3 mb-4">
   <app-grouping-block-nested-report [grouping]="g"></app-grouping-block-nested-report>
 </div>
 <div>
diff --git a/CSETWebNg/src/app/reports/cis/option-block-nested-report/option-block-nested-report.component.html b/CSETWebNg/src/app/reports/cis/option-block-nested-report/option-block-nested-report.component.html
index 28f2e0030c..debd9aa764 100644
--- a/CSETWebNg/src/app/reports/cis/option-block-nested-report/option-block-nested-report.component.html
+++ b/CSETWebNg/src/app/reports/cis/option-block-nested-report/option-block-nested-report.component.html
@@ -20,13 +20,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
   SOFTWARE.
 -------------------------->
-<div class="ml-4 nested-option-block-report" *ngFor="let o of optRadio">
+<div class="ms-4 nested-option-block-report" *ngFor="let o of optRadio">
     <div class="d-flex flex-row" style="break-inside: avoid">
         <i *ngIf="o.selected" class="far fa-lg fa-check-square"></i>
         <i *ngIf="!o.selected" class="far fa-lg fa-square"></i>
-        <div class="ml-2" style="white-space: normal">
+        <div class="ms-2" style="white-space: normal">
             <span [innerHTML]="o.optionText"></span>
-            <i *ngIf="o.baselineSelected" class="ml-2 fa fa-star"></i>
+            <i *ngIf="o.baselineSelected" class="ms-2 fa fa-star"></i>
         </div>
     </div>
 
@@ -35,11 +35,11 @@
         <div *ngIf="o.hasAnswerText" [innerHTML]="o.answerText" class="form-control my-2"></div>
         <div *ngIf="o.hasAnswerText && cisSvc.hasBaseline()" class="d-flex flex-row mt-1 mb-2">
             <div class="form-control w-100" [innerHTML]="o.baselineAnswerText"></div>
-            <i class="fa fa-star ml-1"></i>
+            <i class="fa fa-star ms-1"></i>
         </div>
 
 
-        <div *ngIf="!!o.followups && o.followups.length > 0" class="ml-4 mt-3">
+        <div *ngIf="!!o.followups && o.followups.length > 0" class="ms-4 mt-3">
             <app-question-block-nested-report #questionBlockR [questions]="o.followups">
             </app-question-block-nested-report>
         </div>
@@ -52,13 +52,13 @@
 
 
 
-<div class="ml-4 nested-option-block-report" *ngFor="let o of optCheckbox">
+<div class="ms-4 nested-option-block-report" *ngFor="let o of optCheckbox">
     <div class="d-flex flex-row" style="break-inside: avoid">
         <i *ngIf="o.selected" class="far fa-lg fa-check-square"></i>
         <i *ngIf="!o.selected" class="far fa-lg fa-square"></i>
-        <div class="ml-2" style="white-space: normal">
+        <div class="ms-2" style="white-space: normal">
             <span [innerHTML]="o.optionText"></span>
-            <i *ngIf="o.baselineSelected" class="ml-2 fa fa-star"></i>
+            <i *ngIf="o.baselineSelected" class="ms-2 fa fa-star"></i>
         </div>
     </div>
 
@@ -67,10 +67,10 @@
         <div *ngIf="o.hasAnswerText && cisSvc.hasBaseline() && o.baselineAnswerText?.length > 0"
             class="d-flex flex-row mt-1 mb-2">
             <div class="form-control w-100" [innerHTML]="o.baselineAnswerText"></div>
-            <i class="fa fa-star ml-1"></i>
+            <i class="fa fa-star ms-1"></i>
         </div>
 
-        <div *ngIf="!!o.followups && o.followups.length > 0" class="ml-4 mt-3">
+        <div *ngIf="!!o.followups && o.followups.length > 0" class="ms-4 mt-3">
             <app-question-block-nested-report #questionBlockC [questions]="o.followups">
             </app-question-block-nested-report>
         </div>
@@ -83,8 +83,8 @@
 
 
 
-<div *ngFor="let o of optOther" class="ml-4 break-inside-avoid nested-option-block-report">
-    <input type="text" *ngIf="o.optionType == 'text-first'" class="form-control mr-1"
+<div *ngFor="let o of optOther" class="ms-4 break-inside-avoid nested-option-block-report">
+    <input type="text" *ngIf="o.optionType == 'text-first'" class="form-control me-1"
         style="width: 6rem; display: inline" [value]="o.answerText" (change)="changeText(o, $event)">
 
     <span [innerHTML]="o.optionText"></span>
diff --git a/CSETWebNg/src/app/reports/cis/question-block-nested-report/question-block-nested-report.component.html b/CSETWebNg/src/app/reports/cis/question-block-nested-report/question-block-nested-report.component.html
index c2207eb5d2..1aa51583fc 100644
--- a/CSETWebNg/src/app/reports/cis/question-block-nested-report/question-block-nested-report.component.html
+++ b/CSETWebNg/src/app/reports/cis/question-block-nested-report/question-block-nested-report.component.html
@@ -34,7 +34,7 @@
                 <div class="form-control w-100 h-5" [innerHTML]="q.answerMemo"></div>
                 <div *ngIf="cisSvc.hasBaseline() && q.baselineAnswerMemo?.length > 0" class="d-flex flex-row mt-1 mb-2">
                     <div class="form-control w-100 h-5" [innerHTML]="q.baselineAnswerMemo"></div>
-                    <i class="fa fa-star ml-1"></i>
+                    <i class="fa fa-star ms-1"></i>
                 </div>
             </div>
 
@@ -42,7 +42,7 @@
                 <div class="form-control w-100" [innerHTML]="q.answerMemo"></div>
                 <div *ngIf="cisSvc.hasBaseline() && q.baselineAnswerMemo?.length > 0" class="d-flex flex-row mt-1 mb-2">
                     <div class="form-control w-100" [innerHTML]="q.baselineAnswerMemo"></div>
-                    <i class="fa fa-star ml-1"></i>
+                    <i class="fa fa-star ms-1"></i>
                 </div>
             </div>
 
@@ -52,14 +52,14 @@
                 <div *ngIf="cisSvc.hasBaseline() && q.baselineAnswerMemo?.length > 0" class="d-flex flex-row mt-1 mb-2">
                     <div class="form-control" maxlength="5" #tsNumber
                         [innerHTML]="getTimespanDisplay(q.baselineAnswerMemo)"></div>
-                    <i class="fa fa-star ml-1"></i>
+                    <i class="fa fa-star ms-1"></i>
                 </div>
             </div>
         </div>
 
         <app-option-block-nested-report [q]="q" [opts]="q.options"></app-option-block-nested-report>
 
-        <div *ngIf="q.followups?.length > 0" class="pl-4 pt-4">
+        <div *ngIf="q.followups?.length > 0" class="ps-4 pt-4">
             <app-question-block-nested-report #questionBlock
                 [questions]="q.followups"></app-question-block-nested-report>
         </div>
diff --git a/CSETWebNg/src/app/reports/cmmc2/executive-cmmc2/executive-cmmc2.component.html b/CSETWebNg/src/app/reports/cmmc2/executive-cmmc2/executive-cmmc2.component.html
index 12ca526e33..eb3871b641 100644
--- a/CSETWebNg/src/app/reports/cmmc2/executive-cmmc2/executive-cmmc2.component.html
+++ b/CSETWebNg/src/app/reports/cmmc2/executive-cmmc2/executive-cmmc2.component.html
@@ -72,7 +72,7 @@ <h1 class="pageHeader">
 
     <div class="d-flex flex-row" *ngFor="let l of responseLevels">
       <!-- pie charts for compliance at each level -->
-      <div class="mr-5 d-flex" style="align-items: center; justify-content: center;">
+      <div class="me-5 d-flex" style="align-items: center; justify-content: center;">
         <div style="border-radius: .5rem; padding: 1.5rem; text-align: center; font-weight: bold"
           [class]="'cmmc2-level-' + l.levelValue">
           {{l.name}}
diff --git a/CSETWebNg/src/app/reports/cmu/cmu-domain-detail-table/cmu-domain-detail-table.component.html b/CSETWebNg/src/app/reports/cmu/cmu-domain-detail-table/cmu-domain-detail-table.component.html
index 0b81fb82e7..76a9265390 100644
--- a/CSETWebNg/src/app/reports/cmu/cmu-domain-detail-table/cmu-domain-detail-table.component.html
+++ b/CSETWebNg/src/app/reports/cmu/cmu-domain-detail-table/cmu-domain-detail-table.component.html
@@ -48,7 +48,7 @@ <h1>{{domain?.title}}</h1>
         </td>
     </tr>
     <tr *ngFor="let q of goal.questions">
-        <td colspan="2" [innerHTML]="q?.questionText" [class.pl-5]="!!q?.parentQuestionId">
+        <td colspan="2" [innerHTML]="q?.questionText" [class.ps-5]="!!q?.parentQuestionId">
         </td>
         <td *ngIf="q?.isParentQuestion != 'true'" [class]="answerCellClass(q?.answerText)">
             <div class="text-center" style="width: 7rem">
diff --git a/CSETWebNg/src/app/reports/cmu/cmu-goal-perf-stacked-bar/cmu-goal-perf-stacked-bar.component.html b/CSETWebNg/src/app/reports/cmu/cmu-goal-perf-stacked-bar/cmu-goal-perf-stacked-bar.component.html
index 0a0b8899c7..9f65043c56 100644
--- a/CSETWebNg/src/app/reports/cmu/cmu-goal-perf-stacked-bar/cmu-goal-perf-stacked-bar.component.html
+++ b/CSETWebNg/src/app/reports/cmu/cmu-goal-perf-stacked-bar/cmu-goal-perf-stacked-bar.component.html
@@ -79,7 +79,7 @@ <h3 class="depiction-title">{{ moduleName }} Performance <br /> Summary
             <div *ngFor="let goal of filterMilDomainGoals(domain.groupings); let j = index" class="row goalrow"
                 style="margin-right: 0.05rem"
                 [style.border-bottom]="j + 1 != filterMilDomainGoals(domain.groupings).length ? '0.5px solid black' : '0px'">
-                <div class="col-6 p-0 pr-3 text-1">
+                <div class="col-6 p-0 pe-3 text-1">
                     <div class="goalrow-text">
                         <b>{{ goal.title.split('-')[0] }} -</b>
                         {{ stringSplitter(goal.title) }}
diff --git a/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-performance/cmu-nist-csf-cat-performance.component.html b/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-performance/cmu-nist-csf-cat-performance.component.html
index 8a47aa3556..5c6d7e1768 100644
--- a/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-performance/cmu-nist-csf-cat-performance.component.html
+++ b/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-performance/cmu-nist-csf-cat-performance.component.html
@@ -82,7 +82,7 @@ <h3 class="depiction-title">NIST Cybersecurity Framework<br />Category Performan
                         <table class="m-0 border-0">
                             <tr *ngFor="let subCat of cat.subCats; let i = index" style="padding: 1rem; border: none;"
                                 [ngClass]="i + 1 != cat.subCats.length ? 'bb-1' : ''">
-                                <td class="pr-3 py-1 border-0 align-top text-1" style="width: 210px;">
+                                <td class="pe-3 py-1 border-0 align-top text-1" style="width: 210px;">
                                     <b>{{ subCat.subCat.Subcategory.title }}:</b> {{ subCat.subCat.Subcategory.desc }}
                                 </td>
                                 <td class="references py-1 border-0" style="width: 280px;">
diff --git a/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-summary/cmu-nist-csf-cat-summary.component.html b/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-summary/cmu-nist-csf-cat-summary.component.html
index 1493f16540..c20f30522c 100644
--- a/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-summary/cmu-nist-csf-cat-summary.component.html
+++ b/CSETWebNg/src/app/reports/cmu/cmu-nist-csf-cat-summary/cmu-nist-csf-cat-summary.component.html
@@ -82,7 +82,7 @@ <h3 class="depiction-title">NIST Cybersecurity Framework<br />Category Summary</
                                     <b>{{ subCat.subCat.Subcategory.title }}:</b> {{ subCat.subCat.Subcategory.desc }}
                                 </td>
                                 <td class="align-top pb-3" style="width: 280px; border: none;">
-                                    <div [innerHtml]="subCat.chartSubCat | safe" class="ml-1"></div>
+                                    <div [innerHtml]="subCat.chartSubCat | safe" class="ms-1"></div>
                                 </td>
                             </tr>
                         </table>
diff --git a/CSETWebNg/src/app/reports/cmu/cmu-performance/cmu-performance.component.html b/CSETWebNg/src/app/reports/cmu/cmu-performance/cmu-performance.component.html
index bef4522c3e..60686245d5 100644
--- a/CSETWebNg/src/app/reports/cmu/cmu-performance/cmu-performance.component.html
+++ b/CSETWebNg/src/app/reports/cmu/cmu-performance/cmu-performance.component.html
@@ -78,7 +78,7 @@ <h3 class="depiction-title" style="padding-bottom: 1rem;">{{ moduleName }} Perfo
         <div class="col-10" style="width: 85%; padding: 0 0 0 0.75rem;">
             <div *ngFor="let goal of domain.groupings; let j = index" class="row goalrow" style="margin-right: 0.05rem"
                 [style.border-bottom]="j + 1 != domain.groupings.length ? '0.5px solid black' : '0px'">
-                <div class="col-6 p-0 pr-3 text-1">
+                <div class="col-6 p-0 pe-3 text-1">
                     <div class="goalrow-text">
                         <b>{{ goal.title.split('-')[0] }} -</b>
                         {{ stringSplitter(goal.title) }}
diff --git a/CSETWebNg/src/app/reports/commentsmfr/commentsmfr.component.html b/CSETWebNg/src/app/reports/commentsmfr/commentsmfr.component.html
index ce3efdca1f..3d9fa25c31 100644
--- a/CSETWebNg/src/app/reports/commentsmfr/commentsmfr.component.html
+++ b/CSETWebNg/src/app/reports/commentsmfr/commentsmfr.component.html
@@ -48,7 +48,7 @@
     <ng-template #mainContent>
 
         <!-- "Comments" -->
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">
                     {{t('reports.core.rra.cmfr.with comments', {alias: aliasTranslated})}}
@@ -69,7 +69,7 @@ <h1 class="page-title">
                                 {{questionsSvc.answerDisplayLabel(s.mat.maturity_Model_Id, s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png">
                         </td>
                     </tr>
@@ -108,7 +108,7 @@ <h1 class="page-title">
 
 
         <!-- "Other Remarks"-->
-        <div *ngIf="remarks?.length > 0" class="ml-3 mr-3 form">
+        <div *ngIf="remarks?.length > 0" class="ms-3 me-3 form">
             <h1 class="page-title">{{t('reports.core.rra.cmfr.other remarks')}}</h1>
             <hr class="page-line m-0">
             <div class="my-3" [innerHTML]="remarks | linebreakplain">
@@ -117,7 +117,7 @@ <h1 class="page-title">{{t('reports.core.rra.cmfr.other remarks')}}</h1>
 
 
         <!-- "Marked for Review" -->
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">
                     {{t('reports.core.rra.cmfr.marked for review', {alias: aliasTranslated})}}
@@ -138,7 +138,7 @@ <h1 class="page-title">
                                 {{questionsSvc.answerDisplayLabel(s.mat.maturity_Model_Id, s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png">
                         </td>
                     </tr>
diff --git a/CSETWebNg/src/app/reports/comparereport/comparereport.component.html b/CSETWebNg/src/app/reports/comparereport/comparereport.component.html
index 0606bd2b17..e0b122b43d 100644
--- a/CSETWebNg/src/app/reports/comparereport/comparereport.component.html
+++ b/CSETWebNg/src/app/reports/comparereport/comparereport.component.html
@@ -102,21 +102,21 @@ <h1>Assessment Answer Summary</h1>
       <table class="cset-table table-bordered 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/CSETWebNg/src/app/reports/cpg/cpg-deficiency/cpg-deficiency.component.html b/CSETWebNg/src/app/reports/cpg/cpg-deficiency/cpg-deficiency.component.html
index 646c5c950d..d4adaf05cc 100644
--- a/CSETWebNg/src/app/reports/cpg/cpg-deficiency/cpg-deficiency.component.html
+++ b/CSETWebNg/src/app/reports/cpg/cpg-deficiency/cpg-deficiency.component.html
@@ -43,7 +43,7 @@ <h1 class="page-title">{{t('reports.core.cpg.deficiency.deficiencies')}}</h1>
         <table role="presentation" class="w-100">
             <ng-template ngFor let-s [ngForOf]="def">
                 <tr>
-                    <td class="deficiencies-list-item pr-3" style="font-weight: bold; width: 50px;">{{s.mat.question_Title}}
+                    <td class="deficiencies-list-item pe-3" style="font-weight: bold; width: 50px;">{{s.mat.question_Title}}
                     </td>
                     <td class="deficiencies-list-comment">{{s.mat.security_Practice}}</td>
                     <td style="padding-top: 1rem; padding-left: 1rem; vertical-align: top; color: #555555">
@@ -51,7 +51,7 @@ <h1 class="page-title">{{t('reports.core.cpg.deficiency.deficiencies')}}</h1>
                             {{questionsSvc.answerDisplayLabel(11, s.answer.answer_Text)}}
                         </div>
                     </td>
-                    <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                    <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                             src="assets/images/icons/MarkedFlag.png"></td>
                 </tr>
 
diff --git a/CSETWebNg/src/app/reports/crr/crr-report/crr-nist-csf-cat-summary/crr-nist-csf-cat-summary.component.html b/CSETWebNg/src/app/reports/crr/crr-report/crr-nist-csf-cat-summary/crr-nist-csf-cat-summary.component.html
index 0483124986..fa7395de0d 100644
--- a/CSETWebNg/src/app/reports/crr/crr-report/crr-nist-csf-cat-summary/crr-nist-csf-cat-summary.component.html
+++ b/CSETWebNg/src/app/reports/crr/crr-report/crr-nist-csf-cat-summary/crr-nist-csf-cat-summary.component.html
@@ -75,7 +75,7 @@ <h3 class="depiction-title">NIST Cybersecurity Framework<br />Category Summary</
                                     <b>{{ subCat.subCat.Subcategory.title }}:</b> {{ subCat.subCat.Subcategory.desc }}
                                 </td>
                                 <td class="align-top pb-3" style="width: 280px; border: none;">
-                                    <div [innerHtml]="subCat.chartSubCat | safe" class="ml-1"></div>
+                                    <div [innerHtml]="subCat.chartSubCat | safe" class="ms-1"></div>
                                 </td>
                             </tr>
                         </table>
diff --git a/CSETWebNg/src/app/reports/crr/crr-report/crr-results-summary/crr-results-summary.component.html b/CSETWebNg/src/app/reports/crr/crr-report/crr-results-summary/crr-results-summary.component.html
index 6364f01f16..4af29d4dd4 100644
--- a/CSETWebNg/src/app/reports/crr/crr-report/crr-results-summary/crr-results-summary.component.html
+++ b/CSETWebNg/src/app/reports/crr/crr-report/crr-results-summary/crr-results-summary.component.html
@@ -51,7 +51,7 @@ <h3 class="depiction-title">Summary of CRR Results</h3>
                     <div class="crrResultsProgressBar" [style]="'width:' + domain.widthValpx + 'px;'"></div>
                 </div>
                 <div style="margin-left:1px" class="crrResultsTableRow crrResultsTableLabelRow">
-                    <div class="crrResultsLabelCell pr-2 pe-2">
+                    <div class="crrResultsLabelCell pe-2 pe-2">
                         Maturity&nbsp;Indicator&nbsp;Level&nbsp;<strong style="font-size: 18;">0</strong>
                     </div>
                     <div class="crrTableLabel mil-1-grid">
@@ -89,7 +89,7 @@ <h3 class="depiction-title">Summary of CRR Results</h3>
                     <div class="crrTableLabel mil-upper-grid ccrLastLabel">
                         <p class="mil-number-labels">5</p>
                         <p class="upper-mil-label-bold">MIL-5 Defined</p>
-                        <p class="upper-mil-label-desc pe-0 pr-0">Domain practices are supported by enterprise
+                        <p class="upper-mil-label-desc pe-0 pe-0">Domain practices are supported by enterprise
                             standardization and analysis of lessons learned.</p>
                     </div>
                 </div>
diff --git a/CSETWebNg/src/app/reports/edm-commentsmarked/edm-commentsmarked.component.html b/CSETWebNg/src/app/reports/edm-commentsmarked/edm-commentsmarked.component.html
index 37f2027950..055f5bd7a1 100644
--- a/CSETWebNg/src/app/reports/edm-commentsmarked/edm-commentsmarked.component.html
+++ b/CSETWebNg/src/app/reports/edm-commentsmarked/edm-commentsmarked.component.html
@@ -46,7 +46,7 @@
     </div>
 
     <ng-template #mainContent>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">Practices Marked for Review</h1>
                 <p style="color: #de761c;text-align: right;">Marked for Review - <img class="MarkedFlag"
@@ -64,7 +64,7 @@ <h1 class="page-title">Practices Marked for Review</h1>
                                 {{questionsSvc.answerDisplayLabel(3, s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png">
                         </td>
                     </tr>
@@ -90,7 +90,7 @@ <h1 class="page-title">Practices Marked for Review</h1>
             </div>
         </div>
 
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">Practice Comments</h1>
                 <p style="color: #de761c;text-align: right;">Marked for Review - <img class="MarkedFlag"
@@ -108,7 +108,7 @@ <h1 class="page-title">Practice Comments</h1>
                                 {{questionsSvc.answerDisplayLabel(3, s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png"></td>
                     </tr>
                     <div *ngIf="s.answer.comment;then sc_comments_given"></div>
diff --git a/CSETWebNg/src/app/reports/edm-deficiency/edm-deficiency.component.html b/CSETWebNg/src/app/reports/edm-deficiency/edm-deficiency.component.html
index e1d78c6183..1cffd2e380 100644
--- a/CSETWebNg/src/app/reports/edm-deficiency/edm-deficiency.component.html
+++ b/CSETWebNg/src/app/reports/edm-deficiency/edm-deficiency.component.html
@@ -79,7 +79,7 @@ <h1 class="page-title">Deficiencies</h1>
                                 {{questionsSvc.answerDisplayLabel(3, s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png"></td>
                     </tr>
                     <tr *ngIf="s.answer.comment">
diff --git a/CSETWebNg/src/app/reports/edm/edm-domain-detail/edm-domain-detail.component.html b/CSETWebNg/src/app/reports/edm/edm-domain-detail/edm-domain-detail.component.html
index 229571dd7b..4fdd8441a8 100644
--- a/CSETWebNg/src/app/reports/edm/edm-domain-detail/edm-domain-detail.component.html
+++ b/CSETWebNg/src/app/reports/edm/edm-domain-detail/edm-domain-detail.component.html
@@ -44,7 +44,7 @@ <h1 class="pageHeader">
     </tr>
     <tr *ngFor="let q of goal.questions">
         <td colspan="2" class="font-weight-bold" [innerHTML]="reportSvc.scrubGlossaryMarkup(q?.questionText)"
-            [class.pl-5]="!!q?.parentQuestionId">
+            [class.ps-5]="!!q?.parentQuestionId">
         </td>
         <td *ngIf="!q?.isParentQuestion" [class]="answerCellClass(q?.answer)">
             <div class="text-center font-weight-bold" style="width: 7rem">
diff --git a/CSETWebNg/src/app/reports/edm/edm-legend-subquestions/edm-legend-subquestions.component.html b/CSETWebNg/src/app/reports/edm/edm-legend-subquestions/edm-legend-subquestions.component.html
index 0c43d69023..ba026270db 100644
--- a/CSETWebNg/src/app/reports/edm/edm-legend-subquestions/edm-legend-subquestions.component.html
+++ b/CSETWebNg/src/app/reports/edm/edm-legend-subquestions/edm-legend-subquestions.component.html
@@ -24,7 +24,7 @@
     <h5>Legend</h5>
     <p>1(X) = Question Number (Subquestion Abbreviation)</p>
     <div class="d-flex flex-row">
-        <div class="mr-5">
+        <div class="me-5">
             <div class="d-flex flex-row">
                 <div style="width: 1rem; height: 1rem; margin: .2rem" class="green-score"></div> = Performed
             </div>
diff --git a/CSETWebNg/src/app/reports/edm/edm-toc/edm-toc.component.html b/CSETWebNg/src/app/reports/edm/edm-toc/edm-toc.component.html
index c50af1bd53..63ac27a24c 100644
--- a/CSETWebNg/src/app/reports/edm/edm-toc/edm-toc.component.html
+++ b/CSETWebNg/src/app/reports/edm/edm-toc/edm-toc.component.html
@@ -48,7 +48,7 @@ <h1 *ngIf="usage == 'main'">Table of Contents</h1>
             <button class="btn btn-link" (click)="scroll('toc_rf')">Detailed Results and Options for
                 Consideration</button>
         </div>
-        <div class="pl-3">
+        <div class="ps-3">
             <div>
                 <button class="btn btn-link" (click)="scroll('toc_rf')">1 Relationship Formation</button>
             </div>
diff --git a/CSETWebNg/src/app/reports/eval-against-standards/eval-against-standards.component.html b/CSETWebNg/src/app/reports/eval-against-standards/eval-against-standards.component.html
index 9ece426e05..41b5658425 100644
--- a/CSETWebNg/src/app/reports/eval-against-standards/eval-against-standards.component.html
+++ b/CSETWebNg/src/app/reports/eval-against-standards/eval-against-standards.component.html
@@ -32,7 +32,7 @@ <h2>{{t('reports.core.executive summary.standards summary')}}</h2>
       <div style="max-width: 50px; max-height: 50px;"></div>
     </div>
   </div>
-  <div *ngIf="!loading1" style="max-width: 20rem" class="ml-auto mr-auto">
+  <div *ngIf="!loading1" style="max-width: 20rem" class="ms-auto me-auto">
     <canvas id="canvasStandardSummary"></canvas>
   </div>
 </div>
diff --git a/CSETWebNg/src/app/reports/executive-summary/executive-summary.component.html b/CSETWebNg/src/app/reports/executive-summary/executive-summary.component.html
index b019a07f0f..ac8f094ac6 100644
--- a/CSETWebNg/src/app/reports/executive-summary/executive-summary.component.html
+++ b/CSETWebNg/src/app/reports/executive-summary/executive-summary.component.html
@@ -87,7 +87,7 @@ <h1>
   <div class="page-break" *ngIf="reportSvc.isInstallation('ACET')">
     <div class="mt-3 mb-3">
       <h1>Inherent Risk Profile</h1>
-      <div class="ml-3 mr-3 form">
+      <div class="ms-3 me-3 form">
         <table class="label-value">
           <tr>
             <td>Calculated Overall Risk Level:</td>
diff --git a/CSETWebNg/src/app/reports/general-deficiency/general-deficiency.component.html b/CSETWebNg/src/app/reports/general-deficiency/general-deficiency.component.html
index d2c32df861..e0b67be4e4 100644
--- a/CSETWebNg/src/app/reports/general-deficiency/general-deficiency.component.html
+++ b/CSETWebNg/src/app/reports/general-deficiency/general-deficiency.component.html
@@ -74,7 +74,7 @@ <h1 class="page-title">Deficiencies</h1>
                                 {{questionsSvc.answerDisplayLabel(3, s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png"></td>
                     </tr>
                     <tr *ngIf="s.answer.comment">
diff --git a/CSETWebNg/src/app/reports/hydro/hydro-action-items-report/hydro-action-items-report.component.html b/CSETWebNg/src/app/reports/hydro/hydro-action-items-report/hydro-action-items-report.component.html
index 82f7a8cc35..aa165a9c8f 100644
--- a/CSETWebNg/src/app/reports/hydro/hydro-action-items-report/hydro-action-items-report.component.html
+++ b/CSETWebNg/src/app/reports/hydro/hydro-action-items-report/hydro-action-items-report.component.html
@@ -59,7 +59,7 @@
         </div>
 
         <ng-template #mainContent>
-            <div class="ml-3 mr-3 form">
+            <div class="ms-3 me-3 form">
                 <div class="d-flex flex-row" style="justify-content: space-between">
                     <div style="align-self: flex-end;">
                         <div class="h2 report-text-blue">Demographics</div>
@@ -92,7 +92,7 @@
 
             <div class="page-break">
                 <br>
-                <div class="ml-3 mr-3">
+                <div class="ms-3 me-3">
                     <div class="d-flex flex-row" style="justify-content: space-between">
                         <div style="align-self: flex-end;">
                             <div class="h2 report-text-blue">Action Items</div>
diff --git a/CSETWebNg/src/app/reports/info-block/info-block.component.html b/CSETWebNg/src/app/reports/info-block/info-block.component.html
index 5b95d92a73..79dd3b5dce 100644
--- a/CSETWebNg/src/app/reports/info-block/info-block.component.html
+++ b/CSETWebNg/src/app/reports/info-block/info-block.component.html
@@ -1,4 +1,4 @@
-<div style="line-height: 150%; padding-right: 2em" class="flex-column mr-4 text-left">
+<div style="line-height: 150%; padding-right: 2em" class="flex-column me-4 text-left">
     <div>{{response?.information?.assessment_Name}}</div>
     <div>
         {{response?.information?.assessment_Date | localizeDate}}
diff --git a/CSETWebNg/src/app/reports/irp/irp.component.html b/CSETWebNg/src/app/reports/irp/irp.component.html
index c8e6264282..a6bcf63d61 100644
--- a/CSETWebNg/src/app/reports/irp/irp.component.html
+++ b/CSETWebNg/src/app/reports/irp/irp.component.html
@@ -23,7 +23,7 @@
 <div *transloco="let t; read: 'irp'" class="mt-3 mb-4">
     <app-inherent-risk-profile [acetDashboard]="acetDashboard"></app-inherent-risk-profile>
 
-    <div class="ml-3">
+    <div class="ms-3">
         <div>{{ t('overall risk level is') }} <span class="blue-text font-weight-bold">
                 {{ acetSvc.interpretRiskLevel(acetDashboard?.sumRiskLevel).substring(0, 4) +
                 t(acetSvc.interpretRiskLevel(acetDashboard?.sumRiskLevel).substring(4).toLowerCase()) }}
diff --git a/CSETWebNg/src/app/reports/ise-answeredquestions/ise-answeredquestions.component.html b/CSETWebNg/src/app/reports/ise-answeredquestions/ise-answeredquestions.component.html
index f2e5749c99..9d6e2e84b9 100644
--- a/CSETWebNg/src/app/reports/ise-answeredquestions/ise-answeredquestions.component.html
+++ b/CSETWebNg/src/app/reports/ise-answeredquestions/ise-answeredquestions.component.html
@@ -90,22 +90,22 @@ <h1 class="page-title">Answered Statements</h1>
                     </tr>
                     <ng-container *ngFor="let f of d.assessmentFactors">
                         <tr>
-                            <td colspan="5" class="background-2 font-weight-bold pl-4">{{f.title}} - Assessment Factor
+                            <td colspan="5" class="background-2 font-weight-bold ps-4">{{f.title}} - Assessment Factor
                             </td>
                         </tr>
                         <ng-container *ngFor="let c of f.components">
                             <ng-container *ngIf="this.showSubcats.get(c.title)">
                                 <tr>
-                                    <td colspan="5" class="background-3 pl-5">{{c.title}} - Component</td>
+                                    <td colspan="5" class="background-3 ps-5">{{c.title}} - Component</td>
                                 </tr>
                                 <ng-container *ngFor="let q of c.questions">
                                     <tr *ngIf="this.requiredQuestion(q) || this.ncuaSvc.isParentQuestion(q.title)">
                                         <td class="font-weight-bold text-nowrap">{{q.title}}</td>
-                                        <td class="pr-3" [innerHTML]="q.questionText"></td>
-                                        <td *ngIf="!this.ncuaSvc.isParentQuestion(q.title)" class="pr-3">{{
+                                        <td class="pe-3" [innerHTML]="q.questionText"></td>
+                                        <td *ngIf="!this.ncuaSvc.isParentQuestion(q.title)" class="pe-3">{{
                                             questionsSvc.answerButtonLabel('ISE', q.answerText) }}</td>
-                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="pr-3"> </td>
-                                        <td class="pr-3">{{acetSvc.getAbbrev(q.maturityLevel)}}</td>
+                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="pe-3"> </td>
+                                        <td class="pe-3">{{acetSvc.getAbbrev(q.maturityLevel)}}</td>
                                     </tr>
                                 </ng-container>
                             </ng-container>
diff --git a/CSETWebNg/src/app/reports/ise-data/ise-data.component.html b/CSETWebNg/src/app/reports/ise-data/ise-data.component.html
index a434b26eae..33af0072e2 100644
--- a/CSETWebNg/src/app/reports/ise-data/ise-data.component.html
+++ b/CSETWebNg/src/app/reports/ise-data/ise-data.component.html
@@ -102,9 +102,9 @@
                                 <td *ngIf="!isParentQuestion(q.title) && shouldExpand(getParentQuestionTitle(q.title))"
                                     class="font-weight-bold text-nowrap">{{q.title}}</td>
 
-                                <td *ngIf="isParentQuestion(q.title)" class="background-3 pr-3"> </td>
+                                <td *ngIf="isParentQuestion(q.title)" class="background-3 pe-3"> </td>
                                 <td *ngIf="!isParentQuestion(q.title) && shouldExpand(getParentQuestionTitle(q.title))"
-                                    class="pr-3">{{ answerToNumber(q.answerText) }}</td>
+                                    class="pe-3">{{ answerToNumber(q.answerText) }}</td>
 
                                 <td *ngIf="isParentQuestion(q.title)" class="background-3">
                                     <label class="btn form-check-label" style="float: right">{{
@@ -127,43 +127,43 @@
             <ng-container *ngFor="let d of response?.matAnsweredQuestions">
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 1</td>
-                    <td class=" pr-3">5</td>
+                    <td class=" pe-3">5</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 2</td>
-                    <td class=" pr-3">2</td>
+                    <td class=" pe-3">2</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 3</td>
-                    <td class=" pr-3">3</td>
+                    <td class=" pe-3">3</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 4</td>
-                    <td class=" pr-3">2</td>
+                    <td class=" pe-3">2</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 5</td>
-                    <td class=" pr-3">1</td>
+                    <td class=" pe-3">1</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 6</td>
-                    <td class=" pr-3">3</td>
+                    <td class=" pe-3">3</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 7</td>
-                    <td class=" pr-3">2</td>
+                    <td class=" pe-3">2</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 8</td>
-                    <td class=" pr-3">1</td>
+                    <td class=" pe-3">1</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 9</td>
-                    <td class=" pr-3">4</td>
+                    <td class=" pe-3">4</td>
                 </tr>
                 <tr>
                     <td class=" font-weight-bold text-nowrap">Profile 10</td>
-                    <td class=" pr-3">5</td>
+                    <td class=" pe-3">5</td>
                 </tr>
             </ng-container>
         </table>
diff --git a/CSETWebNg/src/app/reports/ise-examination/ise-examination.component.html b/CSETWebNg/src/app/reports/ise-examination/ise-examination.component.html
index df0de99773..dd64cf4d29 100644
--- a/CSETWebNg/src/app/reports/ise-examination/ise-examination.component.html
+++ b/CSETWebNg/src/app/reports/ise-examination/ise-examination.component.html
@@ -66,7 +66,7 @@
 
         <ng-template #mainContent>
             <!-- <div class="page-break"> -->
-            <div class="ml-3 mr-3 form">
+            <div class="ms-3 me-3 form">
                 <div class="d-flex flex-row" style="justify-content: space-between">
                     <div style="align-self: flex-end;">
                         <div class="h2 report-text-blue">Demographics</div>
@@ -181,13 +181,13 @@
                     </tr>
                     <ng-container *ngFor="let f of d.assessmentFactors">
                         <tr>
-                            <td colspan="5" class="background-1 color-white font-weight-bold pl-4">{{f.title}} -
+                            <td colspan="5" class="background-1 color-white font-weight-bold ps-4">{{f.title}} -
                                 Assessment Factor</td>
                         </tr>
                         <ng-container *ngFor="let c of f.components">
                             <ng-container *ngIf="this.showSubcats.get(c.title)">
                                 <tr>
-                                    <td colspan="5" class="background-2 pl-5">{{c.title}} - Component
+                                    <td colspan="5" class="background-2 ps-5">{{c.title}} - Component
                                         <label class="btn form-check-label" style="float: right">{{
                                             this.expandedOptions.get(c.title) ? '-' : '+' }}
                                             <input class="hide" name="nameExample" type=checkbox
@@ -203,17 +203,17 @@
                                         <td *ngIf="!this.ncuaSvc.isParentQuestion(q.title) && shouldExpand(getParentQuestionTitle(q.title))"
                                             class="font-weight-bold text-nowrap">{{q.title}}</td>
 
-                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="background-3 pr-3"
+                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="background-3 pe-3"
                                             [innerHTML]="q.questionText"></td>
                                         <td *ngIf="!this.ncuaSvc.isParentQuestion(q.title) && shouldExpand(getParentQuestionTitle(q.title))"
-                                            class="pr-3" [innerHTML]="q.questionText"></td>
+                                            class="pe-3" [innerHTML]="q.questionText"></td>
 
-                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="background-3 pr-3">
+                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="background-3 pe-3">
                                         </td>
                                         <td *ngIf="!this.ncuaSvc.isParentQuestion(q.title) && shouldExpand(getParentQuestionTitle(q.title))"
-                                            class="pr-3">{{ questionsSvc.answerButtonLabel('ISE', q.answerText) }}</td>
+                                            class="pe-3">{{ questionsSvc.answerButtonLabel('ISE', q.answerText) }}</td>
 
-                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="background-3 pr-3">
+                                        <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="background-3 pe-3">
                                             {{acetSvc.getAbbrev(q.maturityLevel)}}
                                         </td>
                                         <td *ngIf="this.ncuaSvc.isParentQuestion(q.title)" class="background-3">
@@ -224,7 +224,7 @@
                                             </label>
                                         </td>
                                         <td *ngIf="!this.ncuaSvc.isParentQuestion(q.title) && shouldExpand(getParentQuestionTitle(q.title))"
-                                            class="pr-3">{{acetSvc.getAbbrev(q.maturityLevel)}}</td>
+                                            class="pe-3">{{acetSvc.getAbbrev(q.maturityLevel)}}</td>
                                     </tr>
                                 </ng-container>
                             </ng-container>
@@ -248,16 +248,16 @@
                             <div *ngIf="this.ncuaSvc.isParentQuestion(q.title)">
                                 <div>
                                     <span class="font-weight-bold">Title: </span>
-                                    <span class="pr-3">{{ q.title }}</span>
+                                    <span class="pe-3">{{ q.title }}</span>
                                 </div>
                                 <div>
                                     <span class="font-weight-bold">Statement Text: </span>
-                                    <span class="pr-3">{{ q.questionText }}</span>
+                                    <span class="pe-3">{{ q.questionText }}</span>
                                 </div>
                                 <div>
                                     <span class="font-weight-bold">Statement Summary: </span>
                                     <br>
-                                    <span class="pr-3" style="white-space: pre-wrap;"
+                                    <span class="pe-3" style="white-space: pre-wrap;"
                                         [innerHTML]="q.comments === 'Yes' ? q.comment : '[ No Statement Summary given. ]'"></span>
                                 </div>
 
@@ -271,7 +271,7 @@
 
             <div class="page-break"></div>
 
-            <div class="ml-3 mr-3">
+            <div class="ms-3 me-3">
                 <div class="d-flex flex-row" style="justify-content: space-between">
                     <div style="align-self: flex-end;">
                         <div class="h2 report-text-blue">Issues</div>
diff --git a/CSETWebNg/src/app/reports/ise-examiner/ise-examiner.component.html b/CSETWebNg/src/app/reports/ise-examiner/ise-examiner.component.html
index e6929c7361..4dc229b2d2 100644
--- a/CSETWebNg/src/app/reports/ise-examiner/ise-examiner.component.html
+++ b/CSETWebNg/src/app/reports/ise-examiner/ise-examiner.component.html
@@ -63,7 +63,7 @@
 
     <ng-template #mainContent>
         <!-- <div class="page-break"> -->
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row" style="justify-content: space-between">
                 <div style="align-self: flex-end;">
                     <div class="h2 report-text-blue">Demographics</div>
@@ -121,20 +121,20 @@
             <div *ngFor="let q of this.hasComments">
                 <div>
                     <span class="font-weight-bold">Title: </span>
-                    <span class="pr-3">{{ q.title }}</span>
+                    <span class="pe-3">{{ q.title }}</span>
                 </div>
                 <div>
                     <span class="font-weight-bold">Statement Text: </span>
-                    <span class="pr-3">{{ q.questionText }}</span>
+                    <span class="pe-3">{{ q.questionText }}</span>
                 </div>
                 <div>
                     <span class="font-weight-bold">Response: </span>
-                    <span class="pr-3">{{ !this.ncuaSvc.isParentQuestion(q.title) ?
+                    <span class="pe-3">{{ !this.ncuaSvc.isParentQuestion(q.title) ?
                         questionsSvc.answerButtonLabel('ISE', q.answerText) : ' ' }}</span>
                 </div>
                 <div>
                     <div class="font-weight-bold">Notes: </div>
-                    <span class="pr-3" style="white-space: pre-wrap;" [innerHTML]="q.comment"></span>
+                    <span class="pe-3" style="white-space: pre-wrap;" [innerHTML]="q.comment"></span>
                 </div>
 
                 <hr class="page-line">
diff --git a/CSETWebNg/src/app/reports/ise-merit/ise-merit.component.html b/CSETWebNg/src/app/reports/ise-merit/ise-merit.component.html
index ff3d0c676f..e03573374c 100644
--- a/CSETWebNg/src/app/reports/ise-merit/ise-merit.component.html
+++ b/CSETWebNg/src/app/reports/ise-merit/ise-merit.component.html
@@ -63,7 +63,7 @@
 
         <ng-template #mainContent>
             <!-- <div class="page-break"> -->
-            <div class="ml-3 mr-3 form">
+            <div class="ms-3 me-3 form">
                 <div class="d-flex flex-row" style="justify-content: space-between">
                     <div style="align-self: flex-end;">
                         <div class="h2 report-text-blue">Demographics</div>
@@ -112,7 +112,7 @@
             <!-- </div> -->
 
             <div class="page-break">
-                <div class="ml-3 mr-3">
+                <div class="ms-3 me-3">
                     <div class="d-flex flex-row" style="justify-content: space-between">
                         <div style="align-self: flex-end;">
                             <div class="h2 report-text-blue">Instructions</div>
@@ -130,7 +130,7 @@
             </div>
 
             <div class="page-break">
-                <div class="ml-3 mr-3">
+                <div class="ms-3 me-3">
                     <div class="d-flex flex-row" style="justify-content: space-between">
                         <div style="align-self: flex-end;">
                             <div class="h2 report-text-blue">Work Performed
@@ -150,7 +150,7 @@
             </div>
 
             <div class="page-break">
-                <div class="ml-3 mr-3">
+                <div class="ms-3 me-3">
                     <div class="d-flex flex-row" style="justify-content: space-between">
                         <div style="align-self: flex-end;">
                             <div class="h2 report-text-blue">Results of Review
@@ -207,7 +207,7 @@
             </div>
 
             <div class="page-break">
-                <div class="ml-3 mr-3">
+                <div class="ms-3 me-3">
                     <div class="d-flex flex-row" style="justify-content: space-between">
                         <div style="align-self: flex-end;">
                             <div class="h2 report-text-blue">Issues</div>
diff --git a/CSETWebNg/src/app/reports/logo-for-reports/logo-for-reports.component.html b/CSETWebNg/src/app/reports/logo-for-reports/logo-for-reports.component.html
index a2b59b68a8..c31629d6b9 100644
--- a/CSETWebNg/src/app/reports/logo-for-reports/logo-for-reports.component.html
+++ b/CSETWebNg/src/app/reports/logo-for-reports/logo-for-reports.component.html
@@ -20,7 +20,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 
   SOFTWARE. 
 -------------------------->
-<div class="ml-4">
+<div class="ms-4">
   <img [src]="sourceImage" [style.height]="heightStyle" [alt]="LogoAlt" *ngIf="showRaster">
   <app-logo-cyber-shield height="8rem" *ngIf="showVector"></app-logo-cyber-shield>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/reports/module-content/model/mc-grouping/mc-grouping.component.html b/CSETWebNg/src/app/reports/module-content/model/mc-grouping/mc-grouping.component.html
index 4b723e57e4..6df237780a 100644
--- a/CSETWebNg/src/app/reports/module-content/model/mc-grouping/mc-grouping.component.html
+++ b/CSETWebNg/src/app/reports/module-content/model/mc-grouping/mc-grouping.component.html
@@ -26,13 +26,13 @@ <h5 class="font-weight-bold">{{g.title}}</h5>
     <div *ngIf="g.description?.length > 0" class="alert alert-dark" [innerHTML]="g.description">
     </div>
 
-    <div class="ml-3">
+    <div class="ms-3">
 
         <app-mc-grouping *ngFor="let sg of g.groupings" [g]="sg"></app-mc-grouping>
     </div>
 
 
-    <div class="ml-3">
+    <div class="ms-3">
         <app-mc-question *ngFor="let q of g.questions" [q]="q"></app-mc-question>
     </div>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/reports/module-content/model/mc-option/mc-option.component.html b/CSETWebNg/src/app/reports/module-content/model/mc-option/mc-option.component.html
index 093771cbd4..365776e4c0 100644
--- a/CSETWebNg/src/app/reports/module-content/model/mc-option/mc-option.component.html
+++ b/CSETWebNg/src/app/reports/module-content/model/mc-option/mc-option.component.html
@@ -23,6 +23,6 @@
 <div [innerHTML]="o.optionText">
 </div>
 
-<div class="ml-4">
+<div class="ms-4">
   <app-mc-question *ngFor="let f of o.followups" [q]="f"></app-mc-question>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/reports/module-content/model/mc-question/mc-question.component.html b/CSETWebNg/src/app/reports/module-content/model/mc-question/mc-question.component.html
index a55d928569..85133d9ca7 100644
--- a/CSETWebNg/src/app/reports/module-content/model/mc-question/mc-question.component.html
+++ b/CSETWebNg/src/app/reports/module-content/model/mc-question/mc-question.component.html
@@ -26,7 +26,7 @@
     </div>
 
     <div class="d-flex flex-row">
-        <div *ngIf="q.displayNumber?.length > 0" class="font-weight-bold mr-4">
+        <div *ngIf="q.displayNumber?.length > 0" class="font-weight-bold me-4">
             {{q.displayNumber}}
         </div>
         <div>
@@ -54,7 +54,7 @@
         [referenceText]="q.referenceText" *ngIf="reportSvc.showReferences"></app-references-block>
 
 
-    <div class="ml-4" *ngIf="q.options.length > 0">
+    <div class="ms-4" *ngIf="q.options.length > 0">
         <ul>
             <li *ngFor="let o of q.options">
                 <app-mc-option [o]="o"></app-mc-option>
@@ -62,7 +62,7 @@
         </ul>
     </div>
 
-    <div class="ml-4" *ngIf="q.followups.length > 0">
+    <div class="ms-4" *ngIf="q.followups.length > 0">
         <app-mc-question *ngFor="let f of q.followups" [q]="f"></app-mc-question>
     </div>
 </div>
\ No newline at end of file
diff --git a/CSETWebNg/src/app/reports/module-content/model/module-content-model/module-content-model.component.html b/CSETWebNg/src/app/reports/module-content/model/module-content-model/module-content-model.component.html
index a79ebd684f..a6f944ccac 100644
--- a/CSETWebNg/src/app/reports/module-content/model/module-content-model/module-content-model.component.html
+++ b/CSETWebNg/src/app/reports/module-content/model/module-content-model/module-content-model.component.html
@@ -22,7 +22,7 @@
 -------------------------->
 <h3><em>{{model?.modelTitle}}</em></h3>
 
-<div class="ml-4">
+<div class="ms-4">
     <div *ngFor="let g of model.groupings">
         <app-mc-grouping [g]="g"></app-mc-grouping>
     </div>
diff --git a/CSETWebNg/src/app/reports/module-content/module-content-launch/module-content-launch.component.html b/CSETWebNg/src/app/reports/module-content/module-content-launch/module-content-launch.component.html
index 078fc95733..9ea4b14c23 100644
--- a/CSETWebNg/src/app/reports/module-content/module-content-launch/module-content-launch.component.html
+++ b/CSETWebNg/src/app/reports/module-content/module-content-launch/module-content-launch.component.html
@@ -38,7 +38,7 @@ <h5>Select a Standard</h5>
             <select class="form-control mb-3" tabindex="0" [(ngModel)]="selectedStandard">
                 <option *ngFor="let s of standards" [value]="s.setName">{{s.fullName}}</option>
             </select>
-            <button class="btn btn-primary text-nowrap ml-3" (click)="launchStandardReport()"
+            <button class="btn btn-primary text-nowrap ms-3" (click)="launchStandardReport()"
                 [disabled]="!selectedStandard">Launch Report</button>
         </div>
 
@@ -48,7 +48,7 @@ <h5>Select a Model</h5>
                 <option *ngFor="let m of models" [value]="m.modelId">{{m.modelTitle}}</option>
             </select>
 
-            <button class="btn btn-primary text-nowrap ml-3" (click)="launchModelReport()"
+            <button class="btn btn-primary text-nowrap ms-3" (click)="launchModelReport()"
                 [disabled]="!selectedModel">Launch Report</button>
         </div>
 
diff --git a/CSETWebNg/src/app/reports/module-content/module-content-standard/module-content-standard.component.html b/CSETWebNg/src/app/reports/module-content/module-content-standard/module-content-standard.component.html
index f733fd8fd9..17e74b18e6 100644
--- a/CSETWebNg/src/app/reports/module-content/module-content-standard/module-content-standard.component.html
+++ b/CSETWebNg/src/app/reports/module-content/module-content-standard/module-content-standard.component.html
@@ -24,7 +24,7 @@ <h3><em>{{set?.setFullName}}</em></h3>
 
 <div *ngFor="let cat of set?.categories">
     <div *ngFor="let subcat of cat.subcategories">
-        <div *ngFor="let req of subcat.requirements" class="ml-4 mb-5">
+        <div *ngFor="let req of subcat.requirements" class="ms-4 mb-5">
             <h4>{{cat.categoryName}}</h4>
 
             <h5>{{subcat.subcategoryName}}</h5>
diff --git a/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.html b/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.html
index 08f12d969c..1cf787b0a3 100644
--- a/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.html
+++ b/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.html
@@ -25,7 +25,7 @@
 
         <h1 class="mt-3">Module Content Report</h1>
 
-        <div class="flex-column pr-4 mb-3 noprint">
+        <div class="flex-column pe-4 mb-3 noprint">
             <div>
                 <input id="cbGuidance" type="checkbox" class="checkbox-custom" [checked]="reportSvc.showGuidance"
                     (change)="toggleShowGuidance($event)">
diff --git a/CSETWebNg/src/app/reports/module-content/references-block/references-block.component.html b/CSETWebNg/src/app/reports/module-content/references-block/references-block.component.html
index 7c52beb2c9..3a8c5118b2 100644
--- a/CSETWebNg/src/app/reports/module-content/references-block/references-block.component.html
+++ b/CSETWebNg/src/app/reports/module-content/references-block/references-block.component.html
@@ -35,7 +35,7 @@
                 <td class="w-75">
                     <strong>{{'extras.source documents' | transloco}}</strong>
                 </td>
-                <td class="pl-3">
+                <td class="ps-3">
                     <strong>{{'extras.section' | transloco}}</strong>
                 </td>
             </tr>
@@ -43,7 +43,7 @@
                 <td class="align-top">
                     {{d.title}}
                 </td>
-                <td class="pl-3 section-ref text-nowrap align-top">
+                <td class="ps-3 section-ref text-nowrap align-top">
                     {{d.sectionRef}}
                 </td>
             </tr>
@@ -51,7 +51,7 @@
                 <td class="w-75" [class.pt-4]="sourceDocs.length > 0">
                     <strong>{{'extras.additional documents' | transloco}}</strong>
                 </td>
-                <td class="pl-3" [class.pt-4]="sourceDocs.length > 0">
+                <td class="ps-3" [class.pt-4]="sourceDocs.length > 0">
                     <strong>{{'extras.section' | transloco}}</strong>
                 </td>
             </tr>
@@ -59,7 +59,7 @@
                 <td class="align-top">
                     {{d.title}}
                 </td>
-                <td class="pl-3 section-ref text-nowrap align-top">
+                <td class="ps-3 section-ref text-nowrap align-top">
                     {{d.sectionRef}}
                 </td>
             </tr>
diff --git a/CSETWebNg/src/app/reports/module-content/related-q-block/related-q-block.component.html b/CSETWebNg/src/app/reports/module-content/related-q-block/related-q-block.component.html
index b90c58468a..fef89a8f7a 100644
--- a/CSETWebNg/src/app/reports/module-content/related-q-block/related-q-block.component.html
+++ b/CSETWebNg/src/app/reports/module-content/related-q-block/related-q-block.component.html
@@ -28,7 +28,7 @@
         <div *ngIf="questions.length === 0" style="font-style: italic">
             (No related questions)
         </div>
-        <ul class="ml-2">
+        <ul class="ms-2">
             <li *ngFor="let q of questions" class="mb-1">
                 {{q.questionText}}
             </li>
diff --git a/CSETWebNg/src/app/reports/reports2.scss b/CSETWebNg/src/app/reports/reports2.scss
index 77d516ab65..9518df2ce4 100644
--- a/CSETWebNg/src/app/reports/reports2.scss
+++ b/CSETWebNg/src/app/reports/reports2.scss
@@ -6988,7 +6988,7 @@ button.bg-dark:hover {
   margin-top: 0 !important;
 }
 
-.mr-0,
+.me-0,
 .mx-0 {
   margin-right: 0 !important;
 }
@@ -6998,7 +6998,7 @@ button.bg-dark:hover {
   margin-bottom: 0 !important;
 }
 
-.ml-0,
+.ms-0,
 .mx-0 {
   margin-left: 0 !important;
 }
@@ -7012,7 +7012,7 @@ button.bg-dark:hover {
   margin-top: 0.25rem !important;
 }
 
-.mr-1,
+.me-1,
 .mx-1 {
   margin-right: 0.25rem !important;
 }
@@ -7022,7 +7022,7 @@ button.bg-dark:hover {
   margin-bottom: 0.25rem !important;
 }
 
-.ml-1,
+.ms-1,
 .mx-1 {
   margin-left: 0.25rem !important;
 }
@@ -7036,7 +7036,7 @@ button.bg-dark:hover {
   margin-top: 0.5rem !important;
 }
 
-.mr-2,
+.me-2,
 .mx-2 {
   margin-right: 0.5rem !important;
 }
@@ -7046,7 +7046,7 @@ button.bg-dark:hover {
   margin-bottom: 0.5rem !important;
 }
 
-.ml-2,
+.ms-2,
 .mx-2 {
   margin-left: 0.5rem !important;
 }
@@ -7060,7 +7060,7 @@ button.bg-dark:hover {
   margin-top: 1rem !important;
 }
 
-.mr-3,
+.me-3,
 .mx-3 {
   margin-right: 1rem !important;
 }
@@ -7070,7 +7070,7 @@ button.bg-dark:hover {
   margin-bottom: 1rem !important;
 }
 
-.ml-3,
+.ms-3,
 .mx-3 {
   margin-left: 1rem !important;
 }
@@ -7084,7 +7084,7 @@ button.bg-dark:hover {
   margin-top: 1.5rem !important;
 }
 
-.mr-4,
+.me-4,
 .mx-4 {
   margin-right: 1.5rem !important;
 }
@@ -7094,7 +7094,7 @@ button.bg-dark:hover {
   margin-bottom: 1.5rem !important;
 }
 
-.ml-4,
+.ms-4,
 .mx-4 {
   margin-left: 1.5rem !important;
 }
@@ -7108,7 +7108,7 @@ button.bg-dark:hover {
   margin-top: 3rem !important;
 }
 
-.mr-5,
+.me-5,
 .mx-5 {
   margin-right: 3rem !important;
 }
@@ -7118,7 +7118,7 @@ button.bg-dark:hover {
   margin-bottom: 3rem !important;
 }
 
-.ml-5,
+.ms-5,
 .mx-5 {
   margin-left: 3rem !important;
 }
@@ -7132,7 +7132,7 @@ button.bg-dark:hover {
   padding-top: 0 !important;
 }
 
-.pr-0,
+.pe-0,
 .px-0 {
   padding-right: 0 !important;
 }
@@ -7142,7 +7142,7 @@ button.bg-dark:hover {
   padding-bottom: 0 !important;
 }
 
-.pl-0,
+.ps-0,
 .px-0 {
   padding-left: 0 !important;
 }
@@ -7156,7 +7156,7 @@ button.bg-dark:hover {
   padding-top: 0.25rem !important;
 }
 
-.pr-1,
+.pe-1,
 .px-1 {
   padding-right: 0.25rem !important;
 }
@@ -7166,7 +7166,7 @@ button.bg-dark:hover {
   padding-bottom: 0.25rem !important;
 }
 
-.pl-1,
+.ps-1,
 .px-1 {
   padding-left: 0.25rem !important;
 }
@@ -7180,7 +7180,7 @@ button.bg-dark:hover {
   padding-top: 0.5rem !important;
 }
 
-.pr-2,
+.pe-2,
 .px-2 {
   padding-right: 0.5rem !important;
 }
@@ -7190,7 +7190,7 @@ button.bg-dark:hover {
   padding-bottom: 0.5rem !important;
 }
 
-.pl-2,
+.ps-2,
 .px-2 {
   padding-left: 0.5rem !important;
 }
@@ -7204,7 +7204,7 @@ button.bg-dark:hover {
   padding-top: 1rem !important;
 }
 
-.pr-3,
+.pe-3,
 .px-3 {
   padding-right: 1rem !important;
 }
@@ -7214,7 +7214,7 @@ button.bg-dark:hover {
   padding-bottom: 1rem !important;
 }
 
-.pl-3,
+.ps-3,
 .px-3 {
   padding-left: 1rem !important;
 }
@@ -7228,7 +7228,7 @@ button.bg-dark:hover {
   padding-top: 1.5rem !important;
 }
 
-.pr-4,
+.pe-4,
 .px-4 {
   padding-right: 1.5rem !important;
 }
@@ -7238,7 +7238,7 @@ button.bg-dark:hover {
   padding-bottom: 1.5rem !important;
 }
 
-.pl-4,
+.ps-4,
 .px-4 {
   padding-left: 1.5rem !important;
 }
@@ -7252,7 +7252,7 @@ button.bg-dark:hover {
   padding-top: 3rem !important;
 }
 
-.pr-5,
+.pe-5,
 .px-5 {
   padding-right: 3rem !important;
 }
@@ -7262,7 +7262,7 @@ button.bg-dark:hover {
   padding-bottom: 3rem !important;
 }
 
-.pl-5,
+.ps-5,
 .px-5 {
   padding-left: 3rem !important;
 }
@@ -7276,7 +7276,7 @@ button.bg-dark:hover {
   margin-top: auto !important;
 }
 
-.mr-auto,
+.me-auto,
 .mx-auto {
   margin-right: auto !important;
 }
@@ -7286,7 +7286,7 @@ button.bg-dark:hover {
   margin-bottom: auto !important;
 }
 
-.ml-auto,
+.ms-auto,
 .mx-auto {
   margin-left: auto !important;
 }
@@ -7480,7 +7480,7 @@ button.bg-dark:hover {
     margin-top: 0 !important;
   }
 
-  .mr-sm-0,
+  .me-sm-0,
   .mx-sm-0 {
     margin-right: 0 !important;
   }
@@ -7490,7 +7490,7 @@ button.bg-dark:hover {
     margin-bottom: 0 !important;
   }
 
-  .ml-sm-0,
+  .ms-sm-0,
   .mx-sm-0 {
     margin-left: 0 !important;
   }
@@ -7504,7 +7504,7 @@ button.bg-dark:hover {
     margin-top: 0.25rem !important;
   }
 
-  .mr-sm-1,
+  .me-sm-1,
   .mx-sm-1 {
     margin-right: 0.25rem !important;
   }
@@ -7514,7 +7514,7 @@ button.bg-dark:hover {
     margin-bottom: 0.25rem !important;
   }
 
-  .ml-sm-1,
+  .ms-sm-1,
   .mx-sm-1 {
     margin-left: 0.25rem !important;
   }
@@ -7528,7 +7528,7 @@ button.bg-dark:hover {
     margin-top: 0.5rem !important;
   }
 
-  .mr-sm-2,
+  .me-sm-2,
   .mx-sm-2 {
     margin-right: 0.5rem !important;
   }
@@ -7538,7 +7538,7 @@ button.bg-dark:hover {
     margin-bottom: 0.5rem !important;
   }
 
-  .ml-sm-2,
+  .ms-sm-2,
   .mx-sm-2 {
     margin-left: 0.5rem !important;
   }
@@ -7552,7 +7552,7 @@ button.bg-dark:hover {
     margin-top: 1rem !important;
   }
 
-  .mr-sm-3,
+  .me-sm-3,
   .mx-sm-3 {
     margin-right: 1rem !important;
   }
@@ -7562,7 +7562,7 @@ button.bg-dark:hover {
     margin-bottom: 1rem !important;
   }
 
-  .ml-sm-3,
+  .ms-sm-3,
   .mx-sm-3 {
     margin-left: 1rem !important;
   }
@@ -7576,7 +7576,7 @@ button.bg-dark:hover {
     margin-top: 1.5rem !important;
   }
 
-  .mr-sm-4,
+  .me-sm-4,
   .mx-sm-4 {
     margin-right: 1.5rem !important;
   }
@@ -7586,7 +7586,7 @@ button.bg-dark:hover {
     margin-bottom: 1.5rem !important;
   }
 
-  .ml-sm-4,
+  .ms-sm-4,
   .mx-sm-4 {
     margin-left: 1.5rem !important;
   }
@@ -7600,7 +7600,7 @@ button.bg-dark:hover {
     margin-top: 3rem !important;
   }
 
-  .mr-sm-5,
+  .me-sm-5,
   .mx-sm-5 {
     margin-right: 3rem !important;
   }
@@ -7610,7 +7610,7 @@ button.bg-dark:hover {
     margin-bottom: 3rem !important;
   }
 
-  .ml-sm-5,
+  .ms-sm-5,
   .mx-sm-5 {
     margin-left: 3rem !important;
   }
@@ -7624,7 +7624,7 @@ button.bg-dark:hover {
     padding-top: 0 !important;
   }
 
-  .pr-sm-0,
+  .pe-sm-0,
   .px-sm-0 {
     padding-right: 0 !important;
   }
@@ -7634,7 +7634,7 @@ button.bg-dark:hover {
     padding-bottom: 0 !important;
   }
 
-  .pl-sm-0,
+  .ps-sm-0,
   .px-sm-0 {
     padding-left: 0 !important;
   }
@@ -7648,7 +7648,7 @@ button.bg-dark:hover {
     padding-top: 0.25rem !important;
   }
 
-  .pr-sm-1,
+  .pe-sm-1,
   .px-sm-1 {
     padding-right: 0.25rem !important;
   }
@@ -7658,7 +7658,7 @@ button.bg-dark:hover {
     padding-bottom: 0.25rem !important;
   }
 
-  .pl-sm-1,
+  .ps-sm-1,
   .px-sm-1 {
     padding-left: 0.25rem !important;
   }
@@ -7672,7 +7672,7 @@ button.bg-dark:hover {
     padding-top: 0.5rem !important;
   }
 
-  .pr-sm-2,
+  .pe-sm-2,
   .px-sm-2 {
     padding-right: 0.5rem !important;
   }
@@ -7682,7 +7682,7 @@ button.bg-dark:hover {
     padding-bottom: 0.5rem !important;
   }
 
-  .pl-sm-2,
+  .ps-sm-2,
   .px-sm-2 {
     padding-left: 0.5rem !important;
   }
@@ -7696,7 +7696,7 @@ button.bg-dark:hover {
     padding-top: 1rem !important;
   }
 
-  .pr-sm-3,
+  .pe-sm-3,
   .px-sm-3 {
     padding-right: 1rem !important;
   }
@@ -7706,7 +7706,7 @@ button.bg-dark:hover {
     padding-bottom: 1rem !important;
   }
 
-  .pl-sm-3,
+  .ps-sm-3,
   .px-sm-3 {
     padding-left: 1rem !important;
   }
@@ -7720,7 +7720,7 @@ button.bg-dark:hover {
     padding-top: 1.5rem !important;
   }
 
-  .pr-sm-4,
+  .pe-sm-4,
   .px-sm-4 {
     padding-right: 1.5rem !important;
   }
@@ -7730,7 +7730,7 @@ button.bg-dark:hover {
     padding-bottom: 1.5rem !important;
   }
 
-  .pl-sm-4,
+  .ps-sm-4,
   .px-sm-4 {
     padding-left: 1.5rem !important;
   }
@@ -7744,7 +7744,7 @@ button.bg-dark:hover {
     padding-top: 3rem !important;
   }
 
-  .pr-sm-5,
+  .pe-sm-5,
   .px-sm-5 {
     padding-right: 3rem !important;
   }
@@ -7754,7 +7754,7 @@ button.bg-dark:hover {
     padding-bottom: 3rem !important;
   }
 
-  .pl-sm-5,
+  .ps-sm-5,
   .px-sm-5 {
     padding-left: 3rem !important;
   }
@@ -7768,7 +7768,7 @@ button.bg-dark:hover {
     margin-top: auto !important;
   }
 
-  .mr-sm-auto,
+  .me-sm-auto,
   .mx-sm-auto {
     margin-right: auto !important;
   }
@@ -7778,7 +7778,7 @@ button.bg-dark:hover {
     margin-bottom: auto !important;
   }
 
-  .ml-sm-auto,
+  .ms-sm-auto,
   .mx-sm-auto {
     margin-left: auto !important;
   }
@@ -7954,7 +7954,7 @@ button.bg-dark:hover {
     margin-top: 0 !important;
   }
 
-  .mr-md-0,
+  .me-md-0,
   .mx-md-0 {
     margin-right: 0 !important;
   }
@@ -7964,7 +7964,7 @@ button.bg-dark:hover {
     margin-bottom: 0 !important;
   }
 
-  .ml-md-0,
+  .ms-md-0,
   .mx-md-0 {
     margin-left: 0 !important;
   }
@@ -7978,7 +7978,7 @@ button.bg-dark:hover {
     margin-top: 0.25rem !important;
   }
 
-  .mr-md-1,
+  .me-md-1,
   .mx-md-1 {
     margin-right: 0.25rem !important;
   }
@@ -7988,7 +7988,7 @@ button.bg-dark:hover {
     margin-bottom: 0.25rem !important;
   }
 
-  .ml-md-1,
+  .ms-md-1,
   .mx-md-1 {
     margin-left: 0.25rem !important;
   }
@@ -8002,7 +8002,7 @@ button.bg-dark:hover {
     margin-top: 0.5rem !important;
   }
 
-  .mr-md-2,
+  .me-md-2,
   .mx-md-2 {
     margin-right: 0.5rem !important;
   }
@@ -8012,7 +8012,7 @@ button.bg-dark:hover {
     margin-bottom: 0.5rem !important;
   }
 
-  .ml-md-2,
+  .ms-md-2,
   .mx-md-2 {
     margin-left: 0.5rem !important;
   }
@@ -8026,7 +8026,7 @@ button.bg-dark:hover {
     margin-top: 1rem !important;
   }
 
-  .mr-md-3,
+  .me-md-3,
   .mx-md-3 {
     margin-right: 1rem !important;
   }
@@ -8036,7 +8036,7 @@ button.bg-dark:hover {
     margin-bottom: 1rem !important;
   }
 
-  .ml-md-3,
+  .ms-md-3,
   .mx-md-3 {
     margin-left: 1rem !important;
   }
@@ -8050,7 +8050,7 @@ button.bg-dark:hover {
     margin-top: 1.5rem !important;
   }
 
-  .mr-md-4,
+  .me-md-4,
   .mx-md-4 {
     margin-right: 1.5rem !important;
   }
@@ -8060,7 +8060,7 @@ button.bg-dark:hover {
     margin-bottom: 1.5rem !important;
   }
 
-  .ml-md-4,
+  .ms-md-4,
   .mx-md-4 {
     margin-left: 1.5rem !important;
   }
@@ -8074,7 +8074,7 @@ button.bg-dark:hover {
     margin-top: 3rem !important;
   }
 
-  .mr-md-5,
+  .me-md-5,
   .mx-md-5 {
     margin-right: 3rem !important;
   }
@@ -8084,7 +8084,7 @@ button.bg-dark:hover {
     margin-bottom: 3rem !important;
   }
 
-  .ml-md-5,
+  .ms-md-5,
   .mx-md-5 {
     margin-left: 3rem !important;
   }
@@ -8098,7 +8098,7 @@ button.bg-dark:hover {
     padding-top: 0 !important;
   }
 
-  .pr-md-0,
+  .pe-md-0,
   .px-md-0 {
     padding-right: 0 !important;
   }
@@ -8108,7 +8108,7 @@ button.bg-dark:hover {
     padding-bottom: 0 !important;
   }
 
-  .pl-md-0,
+  .ps-md-0,
   .px-md-0 {
     padding-left: 0 !important;
   }
@@ -8122,7 +8122,7 @@ button.bg-dark:hover {
     padding-top: 0.25rem !important;
   }
 
-  .pr-md-1,
+  .pe-md-1,
   .px-md-1 {
     padding-right: 0.25rem !important;
   }
@@ -8132,7 +8132,7 @@ button.bg-dark:hover {
     padding-bottom: 0.25rem !important;
   }
 
-  .pl-md-1,
+  .ps-md-1,
   .px-md-1 {
     padding-left: 0.25rem !important;
   }
@@ -8146,7 +8146,7 @@ button.bg-dark:hover {
     padding-top: 0.5rem !important;
   }
 
-  .pr-md-2,
+  .pe-md-2,
   .px-md-2 {
     padding-right: 0.5rem !important;
   }
@@ -8156,7 +8156,7 @@ button.bg-dark:hover {
     padding-bottom: 0.5rem !important;
   }
 
-  .pl-md-2,
+  .ps-md-2,
   .px-md-2 {
     padding-left: 0.5rem !important;
   }
@@ -8170,7 +8170,7 @@ button.bg-dark:hover {
     padding-top: 1rem !important;
   }
 
-  .pr-md-3,
+  .pe-md-3,
   .px-md-3 {
     padding-right: 1rem !important;
   }
@@ -8180,7 +8180,7 @@ button.bg-dark:hover {
     padding-bottom: 1rem !important;
   }
 
-  .pl-md-3,
+  .ps-md-3,
   .px-md-3 {
     padding-left: 1rem !important;
   }
@@ -8194,7 +8194,7 @@ button.bg-dark:hover {
     padding-top: 1.5rem !important;
   }
 
-  .pr-md-4,
+  .pe-md-4,
   .px-md-4 {
     padding-right: 1.5rem !important;
   }
@@ -8204,7 +8204,7 @@ button.bg-dark:hover {
     padding-bottom: 1.5rem !important;
   }
 
-  .pl-md-4,
+  .ps-md-4,
   .px-md-4 {
     padding-left: 1.5rem !important;
   }
@@ -8218,7 +8218,7 @@ button.bg-dark:hover {
     padding-top: 3rem !important;
   }
 
-  .pr-md-5,
+  .pe-md-5,
   .px-md-5 {
     padding-right: 3rem !important;
   }
@@ -8228,7 +8228,7 @@ button.bg-dark:hover {
     padding-bottom: 3rem !important;
   }
 
-  .pl-md-5,
+  .ps-md-5,
   .px-md-5 {
     padding-left: 3rem !important;
   }
@@ -8242,7 +8242,7 @@ button.bg-dark:hover {
     margin-top: auto !important;
   }
 
-  .mr-md-auto,
+  .me-md-auto,
   .mx-md-auto {
     margin-right: auto !important;
   }
@@ -8252,7 +8252,7 @@ button.bg-dark:hover {
     margin-bottom: auto !important;
   }
 
-  .ml-md-auto,
+  .ms-md-auto,
   .mx-md-auto {
     margin-left: auto !important;
   }
@@ -8428,7 +8428,7 @@ button.bg-dark:hover {
     margin-top: 0 !important;
   }
 
-  .mr-lg-0,
+  .me-lg-0,
   .mx-lg-0 {
     margin-right: 0 !important;
   }
@@ -8438,7 +8438,7 @@ button.bg-dark:hover {
     margin-bottom: 0 !important;
   }
 
-  .ml-lg-0,
+  .ms-lg-0,
   .mx-lg-0 {
     margin-left: 0 !important;
   }
@@ -8452,7 +8452,7 @@ button.bg-dark:hover {
     margin-top: 0.25rem !important;
   }
 
-  .mr-lg-1,
+  .me-lg-1,
   .mx-lg-1 {
     margin-right: 0.25rem !important;
   }
@@ -8462,7 +8462,7 @@ button.bg-dark:hover {
     margin-bottom: 0.25rem !important;
   }
 
-  .ml-lg-1,
+  .ms-lg-1,
   .mx-lg-1 {
     margin-left: 0.25rem !important;
   }
@@ -8476,7 +8476,7 @@ button.bg-dark:hover {
     margin-top: 0.5rem !important;
   }
 
-  .mr-lg-2,
+  .me-lg-2,
   .mx-lg-2 {
     margin-right: 0.5rem !important;
   }
@@ -8486,7 +8486,7 @@ button.bg-dark:hover {
     margin-bottom: 0.5rem !important;
   }
 
-  .ml-lg-2,
+  .ms-lg-2,
   .mx-lg-2 {
     margin-left: 0.5rem !important;
   }
@@ -8500,7 +8500,7 @@ button.bg-dark:hover {
     margin-top: 1rem !important;
   }
 
-  .mr-lg-3,
+  .me-lg-3,
   .mx-lg-3 {
     margin-right: 1rem !important;
   }
@@ -8510,7 +8510,7 @@ button.bg-dark:hover {
     margin-bottom: 1rem !important;
   }
 
-  .ml-lg-3,
+  .ms-lg-3,
   .mx-lg-3 {
     margin-left: 1rem !important;
   }
@@ -8524,7 +8524,7 @@ button.bg-dark:hover {
     margin-top: 1.5rem !important;
   }
 
-  .mr-lg-4,
+  .me-lg-4,
   .mx-lg-4 {
     margin-right: 1.5rem !important;
   }
@@ -8534,7 +8534,7 @@ button.bg-dark:hover {
     margin-bottom: 1.5rem !important;
   }
 
-  .ml-lg-4,
+  .ms-lg-4,
   .mx-lg-4 {
     margin-left: 1.5rem !important;
   }
@@ -8548,7 +8548,7 @@ button.bg-dark:hover {
     margin-top: 3rem !important;
   }
 
-  .mr-lg-5,
+  .me-lg-5,
   .mx-lg-5 {
     margin-right: 3rem !important;
   }
@@ -8558,7 +8558,7 @@ button.bg-dark:hover {
     margin-bottom: 3rem !important;
   }
 
-  .ml-lg-5,
+  .ms-lg-5,
   .mx-lg-5 {
     margin-left: 3rem !important;
   }
@@ -8572,7 +8572,7 @@ button.bg-dark:hover {
     padding-top: 0 !important;
   }
 
-  .pr-lg-0,
+  .pe-lg-0,
   .px-lg-0 {
     padding-right: 0 !important;
   }
@@ -8582,7 +8582,7 @@ button.bg-dark:hover {
     padding-bottom: 0 !important;
   }
 
-  .pl-lg-0,
+  .ps-lg-0,
   .px-lg-0 {
     padding-left: 0 !important;
   }
@@ -8596,7 +8596,7 @@ button.bg-dark:hover {
     padding-top: 0.25rem !important;
   }
 
-  .pr-lg-1,
+  .pe-lg-1,
   .px-lg-1 {
     padding-right: 0.25rem !important;
   }
@@ -8606,7 +8606,7 @@ button.bg-dark:hover {
     padding-bottom: 0.25rem !important;
   }
 
-  .pl-lg-1,
+  .ps-lg-1,
   .px-lg-1 {
     padding-left: 0.25rem !important;
   }
@@ -8620,7 +8620,7 @@ button.bg-dark:hover {
     padding-top: 0.5rem !important;
   }
 
-  .pr-lg-2,
+  .pe-lg-2,
   .px-lg-2 {
     padding-right: 0.5rem !important;
   }
@@ -8630,7 +8630,7 @@ button.bg-dark:hover {
     padding-bottom: 0.5rem !important;
   }
 
-  .pl-lg-2,
+  .ps-lg-2,
   .px-lg-2 {
     padding-left: 0.5rem !important;
   }
@@ -8644,7 +8644,7 @@ button.bg-dark:hover {
     padding-top: 1rem !important;
   }
 
-  .pr-lg-3,
+  .pe-lg-3,
   .px-lg-3 {
     padding-right: 1rem !important;
   }
@@ -8654,7 +8654,7 @@ button.bg-dark:hover {
     padding-bottom: 1rem !important;
   }
 
-  .pl-lg-3,
+  .ps-lg-3,
   .px-lg-3 {
     padding-left: 1rem !important;
   }
@@ -8668,7 +8668,7 @@ button.bg-dark:hover {
     padding-top: 1.5rem !important;
   }
 
-  .pr-lg-4,
+  .pe-lg-4,
   .px-lg-4 {
     padding-right: 1.5rem !important;
   }
@@ -8678,7 +8678,7 @@ button.bg-dark:hover {
     padding-bottom: 1.5rem !important;
   }
 
-  .pl-lg-4,
+  .ps-lg-4,
   .px-lg-4 {
     padding-left: 1.5rem !important;
   }
@@ -8692,7 +8692,7 @@ button.bg-dark:hover {
     padding-top: 3rem !important;
   }
 
-  .pr-lg-5,
+  .pe-lg-5,
   .px-lg-5 {
     padding-right: 3rem !important;
   }
@@ -8702,7 +8702,7 @@ button.bg-dark:hover {
     padding-bottom: 3rem !important;
   }
 
-  .pl-lg-5,
+  .ps-lg-5,
   .px-lg-5 {
     padding-left: 3rem !important;
   }
@@ -8716,7 +8716,7 @@ button.bg-dark:hover {
     margin-top: auto !important;
   }
 
-  .mr-lg-auto,
+  .me-lg-auto,
   .mx-lg-auto {
     margin-right: auto !important;
   }
@@ -8726,7 +8726,7 @@ button.bg-dark:hover {
     margin-bottom: auto !important;
   }
 
-  .ml-lg-auto,
+  .ms-lg-auto,
   .mx-lg-auto {
     margin-left: auto !important;
   }
@@ -8902,7 +8902,7 @@ button.bg-dark:hover {
     margin-top: 0 !important;
   }
 
-  .mr-xl-0,
+  .me-xl-0,
   .mx-xl-0 {
     margin-right: 0 !important;
   }
@@ -8912,7 +8912,7 @@ button.bg-dark:hover {
     margin-bottom: 0 !important;
   }
 
-  .ml-xl-0,
+  .ms-xl-0,
   .mx-xl-0 {
     margin-left: 0 !important;
   }
@@ -8926,7 +8926,7 @@ button.bg-dark:hover {
     margin-top: 0.25rem !important;
   }
 
-  .mr-xl-1,
+  .me-xl-1,
   .mx-xl-1 {
     margin-right: 0.25rem !important;
   }
@@ -8936,7 +8936,7 @@ button.bg-dark:hover {
     margin-bottom: 0.25rem !important;
   }
 
-  .ml-xl-1,
+  .ms-xl-1,
   .mx-xl-1 {
     margin-left: 0.25rem !important;
   }
@@ -8950,7 +8950,7 @@ button.bg-dark:hover {
     margin-top: 0.5rem !important;
   }
 
-  .mr-xl-2,
+  .me-xl-2,
   .mx-xl-2 {
     margin-right: 0.5rem !important;
   }
@@ -8960,7 +8960,7 @@ button.bg-dark:hover {
     margin-bottom: 0.5rem !important;
   }
 
-  .ml-xl-2,
+  .ms-xl-2,
   .mx-xl-2 {
     margin-left: 0.5rem !important;
   }
@@ -8974,7 +8974,7 @@ button.bg-dark:hover {
     margin-top: 1rem !important;
   }
 
-  .mr-xl-3,
+  .me-xl-3,
   .mx-xl-3 {
     margin-right: 1rem !important;
   }
@@ -8984,7 +8984,7 @@ button.bg-dark:hover {
     margin-bottom: 1rem !important;
   }
 
-  .ml-xl-3,
+  .ms-xl-3,
   .mx-xl-3 {
     margin-left: 1rem !important;
   }
@@ -8998,7 +8998,7 @@ button.bg-dark:hover {
     margin-top: 1.5rem !important;
   }
 
-  .mr-xl-4,
+  .me-xl-4,
   .mx-xl-4 {
     margin-right: 1.5rem !important;
   }
@@ -9008,7 +9008,7 @@ button.bg-dark:hover {
     margin-bottom: 1.5rem !important;
   }
 
-  .ml-xl-4,
+  .ms-xl-4,
   .mx-xl-4 {
     margin-left: 1.5rem !important;
   }
@@ -9022,7 +9022,7 @@ button.bg-dark:hover {
     margin-top: 3rem !important;
   }
 
-  .mr-xl-5,
+  .me-xl-5,
   .mx-xl-5 {
     margin-right: 3rem !important;
   }
@@ -9032,7 +9032,7 @@ button.bg-dark:hover {
     margin-bottom: 3rem !important;
   }
 
-  .ml-xl-5,
+  .ms-xl-5,
   .mx-xl-5 {
     margin-left: 3rem !important;
   }
@@ -9046,7 +9046,7 @@ button.bg-dark:hover {
     padding-top: 0 !important;
   }
 
-  .pr-xl-0,
+  .pe-xl-0,
   .px-xl-0 {
     padding-right: 0 !important;
   }
@@ -9056,7 +9056,7 @@ button.bg-dark:hover {
     padding-bottom: 0 !important;
   }
 
-  .pl-xl-0,
+  .ps-xl-0,
   .px-xl-0 {
     padding-left: 0 !important;
   }
@@ -9070,7 +9070,7 @@ button.bg-dark:hover {
     padding-top: 0.25rem !important;
   }
 
-  .pr-xl-1,
+  .pe-xl-1,
   .px-xl-1 {
     padding-right: 0.25rem !important;
   }
@@ -9080,7 +9080,7 @@ button.bg-dark:hover {
     padding-bottom: 0.25rem !important;
   }
 
-  .pl-xl-1,
+  .ps-xl-1,
   .px-xl-1 {
     padding-left: 0.25rem !important;
   }
@@ -9094,7 +9094,7 @@ button.bg-dark:hover {
     padding-top: 0.5rem !important;
   }
 
-  .pr-xl-2,
+  .pe-xl-2,
   .px-xl-2 {
     padding-right: 0.5rem !important;
   }
@@ -9104,7 +9104,7 @@ button.bg-dark:hover {
     padding-bottom: 0.5rem !important;
   }
 
-  .pl-xl-2,
+  .ps-xl-2,
   .px-xl-2 {
     padding-left: 0.5rem !important;
   }
@@ -9118,7 +9118,7 @@ button.bg-dark:hover {
     padding-top: 1rem !important;
   }
 
-  .pr-xl-3,
+  .pe-xl-3,
   .px-xl-3 {
     padding-right: 1rem !important;
   }
@@ -9128,7 +9128,7 @@ button.bg-dark:hover {
     padding-bottom: 1rem !important;
   }
 
-  .pl-xl-3,
+  .ps-xl-3,
   .px-xl-3 {
     padding-left: 1rem !important;
   }
@@ -9142,7 +9142,7 @@ button.bg-dark:hover {
     padding-top: 1.5rem !important;
   }
 
-  .pr-xl-4,
+  .pe-xl-4,
   .px-xl-4 {
     padding-right: 1.5rem !important;
   }
@@ -9152,7 +9152,7 @@ button.bg-dark:hover {
     padding-bottom: 1.5rem !important;
   }
 
-  .pl-xl-4,
+  .ps-xl-4,
   .px-xl-4 {
     padding-left: 1.5rem !important;
   }
@@ -9166,7 +9166,7 @@ button.bg-dark:hover {
     padding-top: 3rem !important;
   }
 
-  .pr-xl-5,
+  .pe-xl-5,
   .px-xl-5 {
     padding-right: 3rem !important;
   }
@@ -9176,7 +9176,7 @@ button.bg-dark:hover {
     padding-bottom: 3rem !important;
   }
 
-  .pl-xl-5,
+  .ps-xl-5,
   .px-xl-5 {
     padding-left: 3rem !important;
   }
@@ -9190,7 +9190,7 @@ button.bg-dark:hover {
     margin-top: auto !important;
   }
 
-  .mr-xl-auto,
+  .me-xl-auto,
   .mx-xl-auto {
     margin-right: auto !important;
   }
@@ -9200,7 +9200,7 @@ button.bg-dark:hover {
     margin-bottom: auto !important;
   }
 
-  .ml-xl-auto,
+  .ms-xl-auto,
   .mx-xl-auto {
     margin-left: auto !important;
   }
diff --git a/CSETWebNg/src/app/reports/rra/rra-deficiency/rra-deficiency.component.html b/CSETWebNg/src/app/reports/rra/rra-deficiency/rra-deficiency.component.html
index b69787c05f..21dd71dfdf 100644
--- a/CSETWebNg/src/app/reports/rra/rra-deficiency/rra-deficiency.component.html
+++ b/CSETWebNg/src/app/reports/rra/rra-deficiency/rra-deficiency.component.html
@@ -92,7 +92,7 @@ <h2>{{getStringLevel(s.mat.maturity_Level_Id)}}</h2>
                 {{questionsSvc.answerDisplayLabel(5, s.answer.answer_Text)}}
               </div>
             </td>
-            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                 src="assets/images/icons/MarkedFlag.png"></td>
           </tr>
           <tr *ngIf="s.answer.comment">
diff --git a/CSETWebNg/src/app/reports/sd-owner/sd-owner-comments/sd-owner-comments-mfr.component.html b/CSETWebNg/src/app/reports/sd-owner/sd-owner-comments/sd-owner-comments-mfr.component.html
index cab4870a11..696f315151 100644
--- a/CSETWebNg/src/app/reports/sd-owner/sd-owner-comments/sd-owner-comments-mfr.component.html
+++ b/CSETWebNg/src/app/reports/sd-owner/sd-owner-comments/sd-owner-comments-mfr.component.html
@@ -46,7 +46,7 @@
     </div>
 
     <ng-template #mainContent>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">
                     {{t('reports.core.rra.cmfr.marked for review', {alias: aliasTranslated})}}
@@ -67,7 +67,7 @@ <h1 class="page-title">
                                 {{questionsSvc.answerDisplayLabel('', s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png">
                         </td>
                     </tr>
@@ -105,7 +105,7 @@ <h1 class="page-title">
         </div>
 
         <br>
-        <div class="ml-3 mr-3 form">
+        <div class="ms-3 me-3 form">
             <div class="d-flex flex-row justify-content-between align-items-end">
                 <h1 class="page-title">
                     {{t('reports.core.rra.cmfr.with comments', {alias: aliasTranslated})}}
@@ -126,7 +126,7 @@ <h1 class="page-title">
                                 {{questionsSvc.answerDisplayLabel('', s.answer.answer_Text)}}
                             </div>
                         </td>
-                        <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+                        <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                                 src="assets/images/icons/MarkedFlag.png">
                         </td>
                     </tr>
@@ -163,7 +163,7 @@ <h1 class="page-title">
             </div>
         </div>
 
-        <div *ngIf="remarks?.length > 0" class="ml-3 mr-3 form">
+        <div *ngIf="remarks?.length > 0" class="ms-3 me-3 form">
             <h1 class="page-title">{{t('reports.core.rra.cmfr.other remarks')}}</h1>
             <hr class="page-line m-0">
             <div class="my-3" [innerHTML]="remarks | linebreakplain">
diff --git a/CSETWebNg/src/app/reports/sd-owner/sd-owner-deficiency/sd-owner-deficiency.component.html b/CSETWebNg/src/app/reports/sd-owner/sd-owner-deficiency/sd-owner-deficiency.component.html
index 6d5a28880b..3d146d0870 100644
--- a/CSETWebNg/src/app/reports/sd-owner/sd-owner-deficiency/sd-owner-deficiency.component.html
+++ b/CSETWebNg/src/app/reports/sd-owner/sd-owner-deficiency/sd-owner-deficiency.component.html
@@ -101,7 +101,7 @@ <h2>{{s.displayNumber}}</h2>
                                     {{s.answerText}}
                                 </div>
                             </td>
-                            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.markForReview"
+                            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.markForReview"
                                     src="assets/images/icons/MarkedFlag.png"></td>
                         </tr>
 
@@ -136,7 +136,7 @@ <h2>{{s.displayNumber}}</h2>
                                     {{s.answerText}}
                                 </div>
                             </td>
-                            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.markForReview"
+                            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.markForReview"
                                     src="assets/images/icons/MarkedFlag.png"></td>
                         </tr>
 
@@ -171,7 +171,7 @@ <h2>{{s.displayNumber}}</h2>
                                     {{s.answerText}}
                                 </div>
                             </td>
-                            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.markForReview"
+                            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.markForReview"
                                     src="assets/images/icons/MarkedFlag.png"></td>
                         </tr>
 
diff --git a/CSETWebNg/src/app/reports/securityplan/securityplan.component.html b/CSETWebNg/src/app/reports/securityplan/securityplan.component.html
index af07538401..570637b054 100644
--- a/CSETWebNg/src/app/reports/securityplan/securityplan.component.html
+++ b/CSETWebNg/src/app/reports/securityplan/securityplan.component.html
@@ -363,7 +363,7 @@ <h2>
                 <h2>Inherent Risk Profile</h2>
                 <app-inherent-risk-profile [acetDashboard]="acetDashboard"></app-inherent-risk-profile>
 
-                <div class="ml-3">
+                <div class="ms-3">
                     <div>Overall Risk Level is <span class="blue-text font-weight-bold">
                             {{ acetSvc.interpretRiskLevel(acetDashboard?.sumRiskLevel) }}
                         </span>
diff --git a/CSETWebNg/src/app/reports/site-detail/site-detail.component.html b/CSETWebNg/src/app/reports/site-detail/site-detail.component.html
index 607fd7ce78..6526477022 100644
--- a/CSETWebNg/src/app/reports/site-detail/site-detail.component.html
+++ b/CSETWebNg/src/app/reports/site-detail/site-detail.component.html
@@ -137,7 +137,7 @@ <h1>
     <div class="page-break" *ngIf="reportSvc.isInstallation('ACET')">
         <h1>{{t('reports.core.site detail report.maturity detail')}}</h1>
 
-        <div *ngFor="let domain of matDetails" class="pl-3 pr-3 mb-5 w-100 domain-section card">
+        <div *ngFor="let domain of matDetails" class="ps-3 pe-3 mb-5 w-100 domain-section card">
             <h2>{{domain.DomainName}}</h2>
 
             <div *ngFor="let factor of domain.assessments" class="factor-section">
@@ -160,7 +160,7 @@ <h6>{{ comp.componentName }}</h6>
                         </div>
                     </div>
 
-                    <div class="row m-0 ml-5">
+                    <div class="row m-0 ms-5">
                         <div class="w-20pct text-center">
                             Baseline
                             <br />
@@ -272,7 +272,7 @@ <h1>
         <div class="mt-3 mb-4">
             <app-inherent-risk-profile [acetDashboard]="acetDashboard"></app-inherent-risk-profile>
 
-            <div class="ml-3">
+            <div class="ms-3">
                 <div>Overall Risk Level is <span class="blue-text font-weight-bold">
                         {{ acetSvc.interpretRiskLevel(acetDashboard?.SumRiskLevel) }}
                     </span>
diff --git a/CSETWebNg/src/app/reports/site-summary/site-summary.component.html b/CSETWebNg/src/app/reports/site-summary/site-summary.component.html
index 7bbd856b7e..09e8c78330 100644
--- a/CSETWebNg/src/app/reports/site-summary/site-summary.component.html
+++ b/CSETWebNg/src/app/reports/site-summary/site-summary.component.html
@@ -145,7 +145,7 @@ <h1>
     <div class="page-break" *ngIf="reportSvc.isInstallation('ACET')">
         <h1>Maturity Detail</h1>
 
-        <div *ngFor="let domain of matDetails" class="pl-3 pr-3 mb-5 w-100 domain-section card">
+        <div *ngFor="let domain of matDetails" class="ps-3 pe-3 mb-5 w-100 domain-section card">
             <h2>{{domain.domainName}}</h2>
 
             <div *ngFor="let factor of domain.assessments" class="factor-section">
@@ -168,7 +168,7 @@ <h6>{{ comp.componentName }}</h6>
                         </div>
                     </div>
 
-                    <div class="row m-0 ml-5">
+                    <div class="row m-0 ms-5">
                         <div class="w-20pct text-center">
                             Baseline
                             <br />
diff --git a/CSETWebNg/src/app/reports/trendreport/trendreport.component.html b/CSETWebNg/src/app/reports/trendreport/trendreport.component.html
index cf434b707a..3b710b2312 100644
--- a/CSETWebNg/src/app/reports/trendreport/trendreport.component.html
+++ b/CSETWebNg/src/app/reports/trendreport/trendreport.component.html
@@ -92,21 +92,21 @@ <h1>Assessment Answer Summary</h1>
       <table class="cset-table table-bordered 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/CSETWebNg/src/app/reports/tsa-sd/tsa-sd.component.html b/CSETWebNg/src/app/reports/tsa-sd/tsa-sd.component.html
index d96baa389a..cf2cb7f64b 100644
--- a/CSETWebNg/src/app/reports/tsa-sd/tsa-sd.component.html
+++ b/CSETWebNg/src/app/reports/tsa-sd/tsa-sd.component.html
@@ -74,7 +74,7 @@ <h2>{{s.displayNumber}}</h2>
                                     {{s.answerText}}
                                 </div>
                             </td>
-                            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.markForReview"
+                            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.markForReview"
                                     src="assets/images/icons/MarkedFlag.png"></td>
                         </tr>
 
@@ -107,7 +107,7 @@ <h2>{{s.displayNumber}}</h2>
                                     {{s.answerText}}
                                 </div>
                             </td>
-                            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.markForReview"
+                            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.markForReview"
                                     src="assets/images/icons/MarkedFlag.png"></td>
                         </tr>
 
diff --git a/CSETWebNg/src/app/reports/vadr/open-ended-questions/open-ended-questions.component.html b/CSETWebNg/src/app/reports/vadr/open-ended-questions/open-ended-questions.component.html
index 9bf16e0b28..b3552c5ecc 100644
--- a/CSETWebNg/src/app/reports/vadr/open-ended-questions/open-ended-questions.component.html
+++ b/CSETWebNg/src/app/reports/vadr/open-ended-questions/open-ended-questions.component.html
@@ -100,10 +100,10 @@ <h2 class="m-3 subcat-header" *ngIf="onlyOpenQuestionData.questions.length>1">{{
         </h2>
         <div *ngFor="let q of onlyOpenQuestionData.questions">
 
-          <div class="row" [class.mt-3]="!q.parentQuestionId" [class.ml-3.mb-2]="!!q.parentQuestionId"
+          <div class="row" [class.mt-3]="!q.parentQuestionId" [class.ms-3.mb-2]="!!q.parentQuestionId"
             [class.border-bottom]="!!q.parentQuestionId">
             <!-- [class.d-none]="q.parentQuestionId==null && !q.isParentQuestion"> -->
-            <div class="col-sm-2 ml-4">
+            <div class="col-sm-2 ms-4">
               {{q.displayNumber}}
             </div>
             <div class="col-sm-8">
@@ -112,7 +112,7 @@ <h2 class="m-3 subcat-header" *ngIf="onlyOpenQuestionData.questions.length>1">{{
                 <p class="m-2" *ngIf="!q.parentQuestionId ">Your Answer: <span *ngIf="q.answer=='Y'">Yes</span>
                   <span *ngIf="q.answer=='N'">No</span>
                   <span *ngIf="q.answer=='U'">Unanswered</span>
-                  <span *ngIf="!q.parentQuestionId && q.answer=='A'"> Alternate <p class="overflow-auto pl-0 col-12">
+                  <span *ngIf="!q.parentQuestionId && q.answer=='A'"> Alternate <p class="overflow-auto ps-0 col-12">
                       {{q.altAnswerText}}</p></span>
                 </p>
 
@@ -120,7 +120,7 @@ <h2 class="m-3 subcat-header" *ngIf="onlyOpenQuestionData.questions.length>1">{{
               </div>
               <div class="mt-3" [class.d-none]="!q.parentQuestionId">
                 <h6>Your Answer:</h6>
-                <p class="overflow-auto pl-0 col-12"><span *ngIf="q.freeResponseAnswer">{{q.freeResponseAnswer}}</span>
+                <p class="overflow-auto ps-0 col-12"><span *ngIf="q.freeResponseAnswer">{{q.freeResponseAnswer}}</span>
                   <span *ngIf="!q.freeResponseAnswer">Unanswered</span> </p>
               </div>
             </div>
@@ -134,10 +134,10 @@ <h6>Your Answer:</h6>
         <h2 class="m-3 subcat-header">{{data2.title}}</h2>
         <div *ngFor="let q of data2.myArray">
 
-          <div class="row" [class.mt-3]="!q.parentQuestionId" [class.ml-3.mb-2]="!!q.parentQuestionId"
+          <div class="row" [class.mt-3]="!q.parentQuestionId" [class.ms-3.mb-2]="!!q.parentQuestionId"
             [class.border-bottom]="!!q.parentQuestionId"
             [class.d-none]="q.parentQuestionId==null && !q.isParentQuestion">
-            <div class="col-sm-2 ml-4">
+            <div class="col-sm-2 ms-4">
               {{q.displayNumber}}
             </div>
             <div class="col-sm-8">
@@ -147,14 +147,14 @@ <h2 class="m-3 subcat-header">{{data2.title}}</h2>
                 <p class="m-2" *ngIf="!q.parentQuestionId ">Your Answer: <span *ngIf="q.answer=='Y'">Yes</span>
                   <span *ngIf="q.answer=='N'">No</span>
                   <span *ngIf="q.answer=='U'">Unanswered</span>
-                  <span *ngIf="!q.parentQuestionId && q.answer=='A'"> Alternate <p class="overflow-auto pl-0 col-12"
+                  <span *ngIf="!q.parentQuestionId && q.answer=='A'"> Alternate <p class="overflow-auto ps-0 col-12"
                       [class.d-none]="!q.altAnswerText">{{q.altAnswerText}}</p></span>
                 </p>
 
               </div>
               <div class="mt-3" [class.d-none]="!q.parentQuestionId">
                 <h6>Your Answer:</h6>
-                <p class="overflow-auto pl-0 col-12">{{q.freeResponseAnswer}}</p>
+                <p class="overflow-auto ps-0 col-12">{{q.freeResponseAnswer}}</p>
               </div>
             </div>
           </div>
@@ -167,8 +167,8 @@ <h6>Your Answer:</h6>
         <h2 class="m-3 subcat-header">{{data2.title}}</h2>
         <div *ngFor="let q of data2.myArray">
 
-          <div class="row"[class.mt-3]="!q.parentQuestionId" [class.ml-3.mb-2]="!!q.parentQuestionId" [class.border-bottom]="!!q.parentQuestionId"   [class.d-none]="q.parentQuestionId==null && !q.isParentQuestion">
-            <div class="col-sm-2 ml-4">
+          <div class="row"[class.mt-3]="!q.parentQuestionId" [class.ms-3.mb-2]="!!q.parentQuestionId" [class.border-bottom]="!!q.parentQuestionId"   [class.d-none]="q.parentQuestionId==null && !q.isParentQuestion">
+            <div class="col-sm-2 ms-4">
              {{q.displayNumber}}
            </div>
            <div class="col-sm-8" >
@@ -189,8 +189,8 @@ <h2 class="m-3 subcat-header">{{data2.title}}</h2>
         <h2 class="m-3 subcat-header"  *ngIf="onlyOpenQuestionData.questions.length>=1">{{onlyOpenQuestionData.title}}</h2>
         <div *ngFor="let q of onlyOpenQuestionData.questions">
 
-          <div class="row"[class.mt-3]="!q.parentQuestionId" [class.ml-3.mb-2]="!!q.parentQuestionId" [class.border-bottom]="!!q.parentQuestionId"   [class.d-none]="q.parentQuestionId==null && !q.isParentQuestion">
-            <div class="col-sm-2 ml-4">
+          <div class="row"[class.mt-3]="!q.parentQuestionId" [class.ms-3.mb-2]="!!q.parentQuestionId" [class.border-bottom]="!!q.parentQuestionId"   [class.d-none]="q.parentQuestionId==null && !q.isParentQuestion">
+            <div class="col-sm-2 ms-4">
              {{q.displayNumber}}
            </div>
            <div class="col-sm-8" >
diff --git a/CSETWebNg/src/app/reports/vadr/vadr-deficiency/vadr-deficiency.component.html b/CSETWebNg/src/app/reports/vadr/vadr-deficiency/vadr-deficiency.component.html
index cc86579844..908a1a3ca7 100644
--- a/CSETWebNg/src/app/reports/vadr/vadr-deficiency/vadr-deficiency.component.html
+++ b/CSETWebNg/src/app/reports/vadr/vadr-deficiency/vadr-deficiency.component.html
@@ -80,7 +80,7 @@ <h1 class="page-title">Deficiencies</h1>
                 {{questionsSvc.answerDisplayLabel(7, s.answer.answer_Text)}}
               </div>
             </td>
-            <td class="deficiencies-list-flag"><img class="MarkedFlag ml-2" *ngIf="s.answer.mark_For_Review"
+            <td class="deficiencies-list-flag"><img class="MarkedFlag ms-2" *ngIf="s.answer.mark_For_Review"
                 src="assets/images/icons/MarkedFlag.png"></td>
           </tr>
           <tr>
diff --git a/CSETWebNg/src/app/resource-library/resource-library.component.html b/CSETWebNg/src/app/resource-library/resource-library.component.html
index e1f76f29fb..7a2c1f1a2c 100644
--- a/CSETWebNg/src/app/resource-library/resource-library.component.html
+++ b/CSETWebNg/src/app/resource-library/resource-library.component.html
@@ -27,15 +27,15 @@
     <li style="margin-left: 45px;" [class.active]="selectedPane === 'search'" (click)="selectedPane = 'search'"
       class="d-flex align-items-center flex-00a">
       <button class="btn bgc-trans d-flex align-items-center flex-11a" matTooltip="Search the resource library">
-        <span class="mr-2 fs-base-6 cset-icons-magnify-glass"></span>
-        <span class="nav-tab-text ml-1">Search</span>
+        <span class="me-2 fs-base-6 cset-icons-magnify-glass"></span>
+        <span class="nav-tab-text ms-1">Search</span>
       </button>
     </li>
     <li [class.active]="selectedPane === 'browse'" (click)="selectedPane = 'browse'"
       class="d-flex align-items-center flex-00a">
       <button class="btn bgc-trans d-flex align-items-center flex-11a" matTooltip="Browse the resource library">
-        <span class="mr-2 fs-base-6 cset-icons-browse"></span>
-        <span class="nav-tab-text ml-1">Browse</span>
+        <span class="me-2 fs-base-6 cset-icons-browse"></span>
+        <span class="nav-tab-text ms-1">Browse</span>
       </button>
     </li>
   </ul>
@@ -43,7 +43,7 @@
   <div class="bgc-gray-50 d-flex flex-11a w-100">
 
     <!-- Tree (Browse) -->
-    <div class="d-flex flex-column justify-content-start flex-11a w-100 p-4 pr-5" *ngIf="selectedPane === 'browse'">
+    <div class="d-flex flex-column justify-content-start flex-11a w-100 p-4 pe-5" *ngIf="selectedPane === 'browse'">
       <span class="c-gray-900 rl-title d-flex justify-content-start align-items-baseline flex-00a">
         <h3>Resource Library</h3>
       </span>
@@ -55,7 +55,7 @@ <h3>Resource Library</h3>
       <div class="tree-page-header mb-4">
         <div class="col-12 col-lg-6 d-flex flex-row p-0">
           <div class="w-100">
-            <input type="text" class="form-control mr-2" placeholder="Filter" name="filterTerm" id="filterTerm"
+            <input type="text" class="form-control me-2" placeholder="Filter" name="filterTerm" id="filterTerm"
               [(ngModel)]="filter" (ngModelChange)="setFilterDebounced.next($event)" autocomplete="off">
             <button class="btn btn-filter-clear" mat-icon-button *ngIf="!!filter" aria-label="Clear"
               (click)="this.setFilter('')">
@@ -63,10 +63,10 @@ <h3>Resource Library</h3>
             </button>
           </div>
 
-          <button class="btn btn-primary ml-1" (click)="navTreeSvc.tocControl.collapseAll()"
+          <button class="btn btn-primary ms-1" (click)="navTreeSvc.tocControl.collapseAll()"
             matTooltip="{{t('buttons.collapse all')}}" aria-label="{{t('buttons.collapse all')}}">
             <i class="fas fa-compress-alt"></i></button>
-          <button class="btn btn-primary ml-1" (click)="navTreeSvc?.tocControl.expandAll()"
+          <button class="btn btn-primary ms-1" (click)="navTreeSvc?.tocControl.expandAll()"
             matTooltip="{{t('buttons.expand all')}}" aria-label="{{t('buttons.expand all')}}"><i
               class="fas fa-expand-alt"></i></button>
         </div>
@@ -79,7 +79,7 @@ <h3>Resource Library</h3>
       </div>
 
       <div class="row flex-column" *ngIf="!isLoading">
-        <mat-tree #tree class="ml-4 oy-auto bgc-trans example-tree" style="margin-bottom:1rem;"
+        <mat-tree #tree class="ms-4 oy-auto bgc-trans example-tree" style="margin-bottom:1rem;"
           [dataSource]="navTreeSvc?.dataSource" [treeControl]="navTreeSvc?.tocControl">
           <mat-tree-node *matTreeNodeDef="let node; when: !navTreeSvc?.hasNestedChild"
             [style.display]="(node.visible == null ? true : node.visible) ? 'flex' : 'none!important'"
@@ -106,7 +106,7 @@ <h5><span class="btn-link mb-3">
           <mat-nested-tree-node *matTreeNodeDef="let node; when: navTreeSvc?.hasNestedChild"
             [style.display]="(node.visible == null ? true : node.visible) ? 'block' : 'none!important'">
             <div class="d-flex justify-content-start flex-00a nestedsection mb-2">
-              <button class="fs-smaller btn btn-link mr-2 p-0 b-none" matIconButton matTreeNodeToggle
+              <button class="fs-smaller btn btn-link me-2 p-0 b-none" matIconButton matTreeNodeToggle
                 *ngIf="!navTreeSvc?.disableCollapse">
                 <span class="cset-icons-chevron-down" *ngIf="navTreeSvc?.tocControl?.isExpanded(node)"></span>
                 <span class="cset-icons-chevron-right" *ngIf="!navTreeSvc?.tocControl?.isExpanded(node)"></span>
@@ -129,7 +129,7 @@ <h5><span class="btn-link mb-3">
     </div>
 
     <!-- Search -->
-    <div class="d-flex flex-column justify-content-start flex-11a w-100 p-4 pr-5" *ngIf="selectedPane === 'search'">
+    <div class="d-flex flex-column justify-content-start flex-11a w-100 p-4 pe-5" *ngIf="selectedPane === 'search'">
       <span class="c-gray-900 rl-title d-flex justify-content-start align-items-baseline flex-00a">
         <h3>Resource Library</h3>
       </span>
@@ -140,9 +140,9 @@ <h3>Resource Library</h3>
             id="searchTerm" [(ngModel)]="searchTerm">
 
           <button type="submit"
-            class="btn btn-primary search-btn ml-2 d-flex justify-content-start align-items-center flex-00a"
+            class="btn btn-primary search-btn ms-2 d-flex justify-content-start align-items-center flex-00a"
             matTooltip="Search the resource library" (click)="search(searchTerm)">
-            <span class="mr-2 fs-base-2 cset-icons-magnify-glass"></span>
+            <span class="me-2 fs-base-2 cset-icons-magnify-glass"></span>
             <span>Search</span>
           </button>
 
@@ -153,11 +153,11 @@ <h3>Resource Library</h3>
         </form>
       </div>
 
-      <div class="ml-4 mt-4 pr-2 oy-auto h-0 d-flex flex-column flex-11a">
+      <div class="ms-4 mt-4 pe-2 oy-auto h-0 d-flex flex-column flex-11a">
         <h4 *ngIf="results" class="mb-0">Search Results</h4>
         <p *ngIf="results && !(results.length > 0)">There are no documents in the resource library that match your
           search. Please adjust your search keywords and try again.</p>
-        <div *ngFor="let result of results" class="pr-4">
+        <div *ngFor="let result of results" class="pe-4">
           <hr />
 
           <div class="mb-2" *ngIf="isProcurementOrCatalog(result)">
diff --git a/CSETWebNg/src/assets/app-startup-error.html b/CSETWebNg/src/assets/app-startup-error.html
index ef052715be..888d2e6076 100644
--- a/CSETWebNg/src/assets/app-startup-error.html
+++ b/CSETWebNg/src/assets/app-startup-error.html
@@ -56,14 +56,14 @@
 
 <body>
   <div class="center">
-    <div class='bgc-validation' class="mr-4 ml-4 p-3 c-white">
+    <div class='bgc-validation' class="me-4 ms-4 p-3 c-white">
       <p>
         An error occurred while starting the application.
       </p>
     </div>
 
     <div>
-      <form onsubmit="exit();" class="mr-4 ml-2 p-3">
+      <form onsubmit="exit();" class="me-4 ms-2 p-3">
         <div class="d-flex flex-nowrap">
           <button type="submit" class="btn btn-primary btn-lg" style="width: 100px; height: 50px;">Exit</button>
         </div>