From 9580c63c9d69a59d2eecd344070b851eb29a915a Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Fri, 17 Nov 2023 17:35:35 -0600
Subject: [PATCH 01/12] Initial commit to get the Questionnaire redesign
 rolling. Initial resize of the modal window to begin improving layout and
 styles.

---
 .../modal-questionnaire-viewer.component.styl       | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 3e9dcf9c..5c0672d1 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -1419,3 +1419,16 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep div.hidden {
     display: none;
 }
+
+/******************************************************************************/
+/********** Angular Render Layout & Design Updates for Questionnaire **********/
+
+// Fix modal layout for Questionnaire viewer.
+
+::ng-deep body > modal-container > div.reveal {
+    margin: auto !important;
+    margin-left: 7% !important;
+    margin-right: auto !important;
+    padding: 0 !important;
+    width: 63% !important;
+}
\ No newline at end of file

From 98c5d8ddc3f4397c971b996c799fa1eca02ffe19 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Fri, 17 Nov 2023 17:42:10 -0600
Subject: [PATCH 02/12] Added comment to evolving styles.

---
 .../modal-questionnaire-viewer.component.styl              | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 5c0672d1..dab295de 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -1424,11 +1424,14 @@ textarea.instructionField, textarea.optionField {
 /********** Angular Render Layout & Design Updates for Questionnaire **********/
 
 // Fix modal layout for Questionnaire viewer.
+// Do we want to account for multiple screen render sizes??
+// Testing against 1080px, 1440px and 1920px width.
 
 ::ng-deep body > modal-container > div.reveal {
     margin: auto !important;
-    margin-left: 7% !important;
+    margin-left: 5% !important;
     margin-right: auto !important;
     padding: 0 !important;
     width: 63% !important;
-}
\ No newline at end of file
+}
+

From 6a9eaee5765a3e2b395055f0f6d5c95f2a6c92aa Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Mon, 20 Nov 2023 15:15:41 -0600
Subject: [PATCH 03/12] Initial pass removing all font-sizes and color form the
 questionnair modal. Next is to prune out the margins and spacing. Need clean
 unstyled text in the UI to build new CSS back up on.

---
 .../modal-questionnaire-viewer.component.styl | 182 +++++++++---------
 1 file changed, 90 insertions(+), 92 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index dab295de..5733420a 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -26,15 +26,15 @@
 
 ::ng-deep p.questionLabel,::ng-deep p.headerLabel {
     text-align: left;
-    font-size: 14pt;
-    color: hsl(0, 0%, 100%);
+    //font-size: 14pt;
+    //color: hsl(0, 0%, 100%);
 }
 
 ::ng-deep p.headerLabel {
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     display: block;
     text-align: center;
-    font-size: 25px;
+    //font-size: 25px;
     line-height: 25px;
     margin: 20px 0 10px;
     font-weight: bold;
@@ -64,7 +64,7 @@
 }
 
 ::ng-deep .disabled p.questionnaireInfoHeader {
-    color: hsl(0, 0%, 50%) !important;
+    //color: hsl(0, 0%, 50%) !important;
 }
 
 ::ng-deep .disabled div.inlineContainer {
@@ -77,8 +77,8 @@
     padding: 5px 0;
     position: relative;
     font-family: "StandardFontRegular", "Arial", sans-serif;
-    font-size: 15pt;
-    color: hsl(0, 0%, 10%);
+    //font-size: 15pt;
+    //color: hsl(0, 0%, 10%);
     display: inline-block;
     line-height: 50px;
 }
@@ -90,10 +90,10 @@
     line-height: 50px;
     vertical-align: top;
     font-family: "StandardFontBold", "Arial", sans-serif;
-    font-size: 17pt;
+    //font-size: 17pt;
     letter-spacing: 1px;
     padding: 5px 0px;
-    color: hsl(0, 0%, 25%);
+    //color: hsl(0, 0%, 25%);
 }
 
 ::ng-deep div.radioButtonQuestionnaire,::ng-deep div.radioButtonQuestionnaireSmall {
@@ -119,9 +119,9 @@
 ::ng-deep p.questionnaireDetailText {
     position: relative;
     display: inline-block;
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     line-height: 60px;
-    font-size: 15pt;
+    //font-size: 15pt;
     vertical-align: top;
 }
 
@@ -133,7 +133,7 @@
 }
 
 ::ng-deep div.optionsWrapper p.redText {
-    color:  hsl(0, 100%, 40%);
+    //color:  hsl(0, 100%, 40%);
 }
 
 ::ng-deep div.optionsWrapper p.boldText {
@@ -155,22 +155,22 @@
 ::ng-deep p.questionNumber, ::ng-deep p.questionType {
     position: relative;
     text-align: left;
-    color: hsl(150, 100%, 46%);
+    //color: hsl(150, 100%, 46%);
     padding: 20px 10px;
     top: 0;
     left: 0px;
     right: 50px;
-    font-size: 25pt;
+    //font-size: 25pt;
     font-weight: bold
 }
 
 
 ::ng-deep .subQuestion p.questionNumber {
-    font-size: 18pt;
+    //font-size: 18pt;
 }
 
 ::ng-deep p.questionType {
-    font-size: 18pt;
+    //font-size: 18pt;
     font-weight: bold;
     left: unset;
     right: 20px;
@@ -178,9 +178,9 @@
 }
 
 ::ng-deep p.questionText, ::ng-deep p.headingText, ::ng-deep p.reorderQuestionText, ::ng-deep p.reorderSectionText, ::ng-deep p.instructionText {
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     text-align: left;
-    font-size: 17pt;
+    //font-size: 17pt;
     letter-spacing: 1px;
     font-weight: bold;
     padding: 20px 5px;
@@ -188,15 +188,15 @@
 }
 
 ::ng-deep p.instructionText {
-    color: hsl(0, 0%, 50%);
+    //color: hsl(0, 0%, 50%);
 }
 
 ::ng-deep p.questionText {
-    color: hsl(195, 100%, 30%);
+    //color: hsl(195, 100%, 30%);
 }
 
 ::ng-deep p.instructionText {
-    font-size: 15pt;
+    //font-size: 15pt;
     font-style: italic;
 }
 
@@ -206,33 +206,33 @@
 
 ::ng-deep p.reorderQuestionText {
     margin-left: 80px;
-    font-size: 12pt;
+    //font-size: 12pt;
     line-height: 130%;
     padding: 10px 10px 10px 5px;
 }
 
 ::ng-deep p.reorderSectionText {
     margin-left: 40px;
-    font-size: 16pt;
-    color: hsl(195, 100%, 35%);
+    //font-size: 16pt;
+    //color: hsl(195, 100%, 35%);
     padding: 0 40px 0px 5px;
     line-height: 55px;
 }
 
 ::ng-deep div.originalQuestionPlaceholder {
     border-radius: 5px;
-    background-color: hsl(195, 100%, 40%) !important;
+    //background-color: hsl(195, 100%, 40%) !important;
 }
 
 ::ng-deep .originalQuestionPlaceholder p.reorderSectionText {
-    color: hsl(195, 100%, 90%);
+    //color: hsl(195, 100%, 90%);
 }
 
 ::ng-deep div.reorderItemClone {
     position: absolute;
     display: block;
     height: 50px;
-    background-color: hsl(195, 45%, 65%) !important;
+    //background-color: hsl(195, 45%, 65%) !important;
     opacity: 0.4 !important;
     border-radius: 5px;
 }
@@ -241,8 +241,8 @@
     position: relative;
     margin-bottom: 2px;
     text-align: left;
-    font-size: 12pt;
-    color: hsl(0, 0%, 25%);
+    //font-size: 12pt;
+    //color: hsl(0, 0%, 25%);
 }
 
 ::ng-deep p.editFieldLabel p.declineLabel {
@@ -261,7 +261,7 @@
     -moz-appearance: none;
     border: 1px solid hsl(0, 0%, 0%);
     border-radius: 5px;
-    color: hsl(195, 100%, 30%);
+    //color: hsl(195, 100%, 30%);
     width: 100%;
     line-height: 135%;
     text-align: left;
@@ -276,7 +276,7 @@
 textarea.shortAnswer, textarea.mediumAnswer, textarea.longAnswer,
 textarea.textFieldPlaceHolder, textarea.numberField, input.locationLatLon, textarea.locationAddress, textarea.questionField,
 textarea.instructionField, textarea.optionField {
-    color: hsl(195, 100%, 30%);
+    //color: hsl(195, 100%, 30%);
     padding: 10px;
     border: 1px solid hsl(0, 0%, 0%);
     border-radius: 5px;
@@ -291,7 +291,7 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep textarea.optionField {
     padding: 15px 10px;
-    font-size: 16px;
+    //font-size: 16px;
     width: calc(100% - 367px);
     /*max-width: 600px;*/
     min-width: 120px;
@@ -346,7 +346,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .subQuestion p.questionText {
-    font-size: 14pt;
+    //font-size: 14pt;
 }
 
 ::ng-deep input.locationLatLon {
@@ -381,10 +381,10 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep p.locationQuestionDetails {
     text-align: left;
-    font-size: 13pt;
+    //font-size: 13pt;
     letter-spacing: 1px;
     margin: 20px 0px;
-    color: hsl(0, 0%, 25%);
+    //color: hsl(0, 0%, 25%);
 }
 
 ::ng-deep div.mapSelectionIcon {
@@ -418,7 +418,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep input.shortAnswer, ::ng-deep input.Standard {
-    color: hsl(195, 100%, 30%);
+    //color: hsl(195, 100%, 30%);
     padding: 10px;
     border: 1px solid hsl(0, 0%, 0%);
     border-radius: 5px;
@@ -433,7 +433,7 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep textarea.textFieldPlaceHolder {
     height: 52px !important;
     overflow-y: hidden;
-    background-color: hsl(0, 0%, 80%);
+    //background-color: hsl(0, 0%, 80%);
     border: solid 1px hsl(0, 0%, 50%);
     pointer-events: none;
 }
@@ -458,7 +458,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.AddQuestionTemplate {
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     height: 75px;
     box-sizing: border-box;
 }
@@ -480,7 +480,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.AddQuestionnaireTemplate {
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     z-index: 5000;
     display: none;
     width: 100%;
@@ -503,13 +503,13 @@ textarea.instructionField, textarea.optionField {
     /*pointer-events: none;*/
     /*user-select: none;*/
 
-    color: hsl(195, 100%, 30%);
+    //color: hsl(195, 100%, 30%);
     cursor: text;
     display: inline-block;
     width: 400px;
     height: 100%;
     padding: 5px;
-    font-size: 16px;
+    //font-size: 16px;
     border: 1px solid hsl(0, 0%, 0%);
     border-radius: 5px;
 }
@@ -520,7 +520,7 @@ textarea.instructionField, textarea.optionField {
     -moz-appearance: none;
     border: 1px solid hsl(0, 0%, 0%);
     border-radius: 5px;
-    color: hsl(195, 100%, 30%);
+    //color: hsl(195, 100%, 30%);
     width: 400px;
     text-align: left;
     padding: 10px;
@@ -549,7 +549,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep input.YesOrNoInput {
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     pointer-events:none;
     border: transparent;
     width: 50px
@@ -562,7 +562,7 @@ textarea.instructionField, textarea.optionField {
 /********RANGE QUESTION*********/
 
 ::ng-deep input.RangeAnswerField {
-    color: hsl(180, 100%, 32%);
+    //color: hsl(180, 100%, 32%);
     width: 30px;
     margin: 0 10px;
     text-align: center
@@ -582,13 +582,13 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.rangeAnswer {
     position: relative;
-    color: grey;
+    //color: grey;
     margin: 5px 20px;
 }
 
 ::ng-deep p.rangeAnswer, ::ng-deep p.rangeAnswerDoubleDigit {
-    font-size: 16px;
-    color: hsl(0, 0%, 60%);
+    //font-size: 16px;
+    //color: hsl(0, 0%, 60%);
 }
 
 ::ng-deep p.rangeAnswerDoubleDigit {
@@ -617,7 +617,7 @@ textarea.instructionField, textarea.optionField {
 /******QUESTION OPTIONS/MODE ********/
 
 ::ng-deep div.modeSelector, ::ng-deep div.multiTextModeSelector {
-    /*background-color: hsl(0, 0% ,100%);*/
+    //background-color: hsl(0, 0% ,100%);
     z-index: 100;
     position: absolute;
     right: 20px;
@@ -697,12 +697,12 @@ textarea.instructionField, textarea.optionField {
     border-top: 1px solid hsl(0, 0%, 70%);
     position: relative;
     display: inline-block;
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     cursor: pointer;
     pointer-events: all;
     font-weight: bold;
     padding: 15px 20px;
-    font-size: 18px;
+    //font-size: 18px;
 }
 
 /* MULTI TEXT*/
@@ -764,16 +764,16 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep p.addNewOptionLabel {
     text-align: left;
-    font-size: 14pt;
+    //font-size: 14pt;
     line-height: 52px;
     display: inline-block;
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     cursor: pointer;
 }
 
 ::ng-deep input.answerVariableName, ::ng-deep input.questionValueField, ::ng-deep input.optionValueField {
-    font-size: 14px;
-    color: hsl(180, 100%, 32%);
+    //font-size: 14px;
+    //color: hsl(180, 100%, 32%);
     pointer-events: all;
     cursor: text;
     border: none;
@@ -811,7 +811,7 @@ textarea.instructionField, textarea.optionField {
     position: relative;
     text-align: left;
     width: 100%;
-    color: hsl(0, 100%, 100%);
+    //color: hsl(0, 100%, 100%);
     display: block;
     box-sizing: border-box;
     padding: 10px;
@@ -880,13 +880,13 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep p.subQuestionLabel {
     text-align: left;
-    color: white;
-    font-size: 14px;
+    //color: white;
+    //font-size: 14px;
     line-height: 22px;
 }
 
 ::ng-deep div.buttonDeleteSubQuestion p.subQuestionLabel {
-    color: hsl(0, 100%, 40%);
+    //color: hsl(0, 100%, 40%);
 }
 
 ::ng-deep div.buttonAddSubQuestionIcon {
@@ -907,8 +907,8 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.goToContainer {
     background-color: hsl(0, 0%, 100%);
-    color: black;
-    font-size: 14pt;
+    //color: black;
+    //font-size: 14pt;
     margin: 0 20px;
     position: relative;
     display: inline-block;
@@ -930,8 +930,8 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.goToMenuButton {
     background-color: hsl(0, 0%, 100%);
-    color: black;
-    font-size: 14pt;
+    //color: black;
+    //font-size: 14pt;
     /*margin: 0 20px;*/
     position: relative;
     border: solid 1px hsl(0, 0%, 80%);
@@ -949,7 +949,7 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.goToContainer.redText p.menuButtonLabel {
     font-weight: bolder;
-    color: hsl(0, 100%, 40%);
+    //color: hsl(0, 100%, 40%);
 }
 
 ::ng-deep div.goToContainer.redText div.goToMenuButton {
@@ -963,8 +963,8 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep p.menuButtonLabel, ::ng-deep p.section-goto-label {
     text-align: center;
     pointer-events: none;
-    color: black;
-    font-size: 14px;
+    //color: black;
+    //font-size: 14px;
     width: 40px;
     margin-right: 10px;
 }
@@ -985,8 +985,8 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.sectionMenuItem, ::ng-deep div.sectionMenuItemActive, ::ng-deep div.questionMenuItem {
-    font-size: 16px;
-    color: hsl(0, 0%, 0%);
+    //font-size: 16px;
+    //color: hsl(0, 0%, 0%);
     border-radius: 5px;
     padding: 12px;
     line-height: 23px;
@@ -1043,7 +1043,7 @@ textarea.instructionField, textarea.optionField {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    color: hsl(0, 0%, 100%) !important;
+    //color: hsl(0, 0%, 100%) !important;
     background-color: hsl(195, 100%, 35%) !important;
     border: solid 1px hsl(195, 100%, 35%) !important;
 }
@@ -1072,7 +1072,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.buttonDeleteSubQuestion p {
-    color: black !important;
+    //color: black !important;
 }
 
 ::ng-deep div.buttonDeleteSubQuestion:hover {
@@ -1132,17 +1132,17 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep p.questionMatrixColumnLabel {
-    font-size: 13pt;
+    //font-size: 13pt;
     line-height: 125%;
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     text-align: center;
     padding: 0px 10px;
 }
 
 ::ng-deep p.questionMatrixRowLabel {
-    font-size: 13pt;
+    //font-size: 13pt;
     line-height: 125%;
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
 }
 
 ::ng-deep div.addItemRow {
@@ -1162,12 +1162,12 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep td.spacer {
     width: auto;
-    color: white;
+    //color: white;
 }
 
 ::ng-deep p.matrixQuestionValue {
-    color: black;
-    font-size: 14pt;
+    //color: black;
+    //font-size: 14pt;
 }
 
 ::ng-deep div.matrixOptionBubble, ::ng-deep div.matrixMultiOptionBubble {
@@ -1200,7 +1200,7 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep div.variableOptionWrapper {
     position: relative;
     width: 100%;
-    color: hsl(0, 100%, 100%);
+    //color: hsl(0, 100%, 100%);
     display: block;
     box-sizing: border-box;
     padding: 10px;
@@ -1211,10 +1211,10 @@ textarea.instructionField, textarea.optionField {
 /*************************** QUESTIONNAIRE VIEWER ITEMS *******************************/
 
 ::ng-deep p.ownerLabel {
-    font-size: 20pt;
+    //font-size: 20pt;
     line-height: 40px;
     letter-spacing: 0;
-    color: hsl(195, 100%, 50%);
+    //color: hsl(195, 100%, 50%);
     text-align: left;
     font-family: "StandardFontBold", "Arial", sans-serif;
 }
@@ -1224,9 +1224,9 @@ textarea.instructionField, textarea.optionField {
     display: flex;
     align-items: center;
     min-height: 50px;
-    font-size: 16pt;
+    //font-size: 16pt;
     line-height: 135%;
-    color: hsl(0, 0%, 0%);
+    //color: hsl(0, 0%, 0%);
     pointer-events: none;
     padding: 0 5px;
 }
@@ -1239,9 +1239,9 @@ textarea.instructionField, textarea.optionField {
     min-height: 50px;
     width: auto;
     justify-content: flex-end;
-    font-size: 16pt;
+    //font-size: 16pt;
     line-height: 135%;
-    color: hsl(0, 0%, 70%);
+    //color: hsl(0, 0%, 70%);
     pointer-events: none;
     margin-left: 50px;
     white-space: nowrap;
@@ -1270,8 +1270,8 @@ textarea.instructionField, textarea.optionField {
     position: relative;
     min-height: 50px;
     display: block;
-    font-size: 14pt;
-    color: hsl(0, 0%, 20%);
+    //font-size: 14pt;
+    //color: hsl(0, 0%, 20%);
     vertical-align: middle;
 }
 
@@ -1340,8 +1340,6 @@ textarea.instructionField, textarea.optionField {
     display: none;
 }
 
-
-
 ::ng-deep div.questionnairePlaceholder {
     padding: 0 10px;
     border-radius: 5px;
@@ -1350,8 +1348,8 @@ textarea.instructionField, textarea.optionField {
     min-height: 50px;
     min-width: 400px;
     display: block;
-    font-size: 14pt;
-    color: hsl(0, 0%, 20%);
+    //font-size: 14pt;
+    //color: hsl(0, 0%, 20%);
     vertical-align: middle;
     margin-bottom: 10px;
 }
@@ -1428,10 +1426,10 @@ textarea.instructionField, textarea.optionField {
 // Testing against 1080px, 1440px and 1920px width.
 
 ::ng-deep body > modal-container > div.reveal {
+    z-index: 8000 !important;
     margin: auto !important;
-    margin-left: 5% !important;
+    margin-left: 10% !important;
     margin-right: auto !important;
     padding: 0 !important;
-    width: 63% !important;
+    width: 53% !important;
 }
-

From b78c1be590a71433390a000ab82de529b16731ae Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Mon, 20 Nov 2023 19:42:12 -0600
Subject: [PATCH 04/12] Removed all font weighting, font type assignments and
 font size assignments from selectors in questionnaire modal.

---
 .../modal-questionnaire-viewer.component.styl | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 5733420a..14b80c7f 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -37,7 +37,7 @@
     //font-size: 25px;
     line-height: 25px;
     margin: 20px 0 10px;
-    font-weight: bold;
+    //font-weight: bold;
 }
 
 /***********************************************/
@@ -76,7 +76,7 @@
     margin-left: 20px;
     padding: 5px 0;
     position: relative;
-    font-family: "StandardFontRegular", "Arial", sans-serif;
+    //font-family: "StandardFontRegular", "Arial", sans-serif;
     //font-size: 15pt;
     //color: hsl(0, 0%, 10%);
     display: inline-block;
@@ -89,7 +89,7 @@
     display: inline-block;
     line-height: 50px;
     vertical-align: top;
-    font-family: "StandardFontBold", "Arial", sans-serif;
+    //font-family: "StandardFontBold", "Arial", sans-serif;
     //font-size: 17pt;
     letter-spacing: 1px;
     padding: 5px 0px;
@@ -137,7 +137,7 @@
 }
 
 ::ng-deep div.optionsWrapper p.boldText {
-    font-weight: bold
+    //font-weight: bold
 }
 
 ::ng-deep div.optionsWrapper p.editFieldLabel {
@@ -161,7 +161,7 @@
     left: 0px;
     right: 50px;
     //font-size: 25pt;
-    font-weight: bold
+    //font-weight: bold
 }
 
 
@@ -171,7 +171,7 @@
 
 ::ng-deep p.questionType {
     //font-size: 18pt;
-    font-weight: bold;
+    //font-weight: bold;
     left: unset;
     right: 20px;
     top: 10px;
@@ -182,7 +182,7 @@
     text-align: left;
     //font-size: 17pt;
     letter-spacing: 1px;
-    font-weight: bold;
+    //font-weight: bold;
     padding: 20px 5px;
     line-height: 130%;
 }
@@ -700,7 +700,7 @@ textarea.instructionField, textarea.optionField {
     //color: hsl(0, 0%, 0%);
     cursor: pointer;
     pointer-events: all;
-    font-weight: bold;
+    //font-weight: bold;
     padding: 15px 20px;
     //font-size: 18px;
 }
@@ -1030,7 +1030,7 @@ textarea.instructionField, textarea.optionField {
     display: inline-block;
     vertical-align: top;
     text-align: center;
-    font-size: 14px;
+    //font-size: 14px;
     line-height: 14px;
     white-space: nowrap;
     padding: 15px;
@@ -1118,7 +1118,6 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep table.matrixQuestionTable {
-
     overflow: scroll;
     max-width: 100%;
 }
@@ -1216,7 +1215,7 @@ textarea.instructionField, textarea.optionField {
     letter-spacing: 0;
     //color: hsl(195, 100%, 50%);
     text-align: left;
-    font-family: "StandardFontBold", "Arial", sans-serif;
+    //font-family: "StandardFontBold", "Arial", sans-serif;
 }
 
 ::ng-deep p.questionnaireQuestion {
@@ -1256,7 +1255,7 @@ textarea.instructionField, textarea.optionField {
     position: relative;
     display: table-cell;
     vertical-align: middle;
-    font-family: "StandardFontRegular", "Arial", sans-serif;
+    //font-family: "StandardFontRegular", "Arial", sans-serif;
 }
 
 ::ng-deep div.questionnaireOptions, ::ng-deep div.subQuestionOptions {

From 84635b8c70310eb1a71017dde8bd3803e5007018 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Tue, 21 Nov 2023 01:12:40 -0600
Subject: [PATCH 05/12] Commented out most of the styling in the quesitonnaire
 at this point.

---
 .../modal-questionnaire-viewer.component.styl | 492 ++++++++++--------
 1 file changed, 261 insertions(+), 231 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 14b80c7f..1e329891 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -35,8 +35,8 @@
     display: block;
     text-align: center;
     //font-size: 25px;
-    line-height: 25px;
-    margin: 20px 0 10px;
+    //line-height: 25px;
+    //margin: 20px 0 10px;
     //font-weight: bold;
 }
 
@@ -73,43 +73,43 @@
 }
 
 ::ng-deep p.questionnaireInfo {
-    margin-left: 20px;
-    padding: 5px 0;
+    //margin-left: 20px;
+    //padding: 5px 0;
     position: relative;
     //font-family: "StandardFontRegular", "Arial", sans-serif;
     //font-size: 15pt;
     //color: hsl(0, 0%, 10%);
     display: inline-block;
-    line-height: 50px;
+    //line-height: 50px;
 }
 
 ::ng-deep p.questionnaireInfoHeader {
     /*text-align: right;*/
     width: 210px;
     display: inline-block;
-    line-height: 50px;
+    //line-height: 50px;
     vertical-align: top;
     //font-family: "StandardFontBold", "Arial", sans-serif;
     //font-size: 17pt;
-    letter-spacing: 1px;
-    padding: 5px 0px;
+    //letter-spacing: 1px;
+    //padding: 5px 0px;
     //color: hsl(0, 0%, 25%);
 }
 
 ::ng-deep div.radioButtonQuestionnaire,::ng-deep div.radioButtonQuestionnaireSmall {
     cursor: pointer;
     display: inline-block;
-    border: 1px solid hsl(0, 0%, 0%);
-    border-radius: 20px;
+    //border: 1px solid hsl(0, 0%, 0%);
+    //border-radius: 20px;
     width: 35px;
     height: 35px;
-    margin: 12px 15px 0px 30px;
+    //margin: 12px 15px 0px 30px;
 }
 
 ::ng-deep div.radioButtonQuestionnaireSmall {
     width: 25px;
     height: 25px;
-    margin: 0px 8px 0px 20px;
+    //margin: 0px 8px 0px 20px;
 }
 
 ::ng-deep div.radioButtonActive {
@@ -120,7 +120,7 @@
     position: relative;
     display: inline-block;
     //color: hsl(0, 0%, 0%);
-    line-height: 60px;
+    //line-height: 60px;
     //font-size: 15pt;
     vertical-align: top;
 }
@@ -129,7 +129,7 @@
     position: relative;
     text-align: left;
     display: block;
-    padding: 20px 10px;
+    //padding: 20px 10px;
 }
 
 ::ng-deep div.optionsWrapper p.redText {
@@ -141,8 +141,8 @@
 }
 
 ::ng-deep div.optionsWrapper p.editFieldLabel {
-    line-height: 27px;
-    margin: 0;
+    //line-height: 27px;
+    //margin: 0;
     vertical-align: top;
 }
 
@@ -156,7 +156,7 @@
     position: relative;
     text-align: left;
     //color: hsl(150, 100%, 46%);
-    padding: 20px 10px;
+    //padding: 20px 10px;
     top: 0;
     left: 0px;
     right: 50px;
@@ -181,10 +181,10 @@
     //color: hsl(0, 0%, 0%);
     text-align: left;
     //font-size: 17pt;
-    letter-spacing: 1px;
+    //letter-spacing: 1px;
     //font-weight: bold;
-    padding: 20px 5px;
-    line-height: 130%;
+    //padding: 20px 5px;
+    //line-height: 130%;
 }
 
 ::ng-deep p.instructionText {
@@ -201,26 +201,26 @@
 }
 
 ::ng-deep p.questionText, ::ng-deep p.headingText, ::ng-deep p.instructionText {
-    padding: 20px 10px !important;
+    //padding: 20px 10px !important;
 }
 
 ::ng-deep p.reorderQuestionText {
-    margin-left: 80px;
+    //margin-left: 80px;
     //font-size: 12pt;
-    line-height: 130%;
-    padding: 10px 10px 10px 5px;
+    //line-height: 130%;
+    //padding: 10px 10px 10px 5px;
 }
 
 ::ng-deep p.reorderSectionText {
-    margin-left: 40px;
+    //margin-left: 40px;
     //font-size: 16pt;
     //color: hsl(195, 100%, 35%);
-    padding: 0 40px 0px 5px;
-    line-height: 55px;
+    //padding: 0 40px 0px 5px;
+    //line-height: 55px;
 }
 
 ::ng-deep div.originalQuestionPlaceholder {
-    border-radius: 5px;
+    //border-radius: 5px;
     //background-color: hsl(195, 100%, 40%) !important;
 }
 
@@ -231,15 +231,15 @@
 ::ng-deep div.reorderItemClone {
     position: absolute;
     display: block;
-    height: 50px;
+    //height: 50px;
     //background-color: hsl(195, 45%, 65%) !important;
     opacity: 0.4 !important;
-    border-radius: 5px;
+    //border-radius: 5px;
 }
 
 ::ng-deep p.editFieldLabel, ::ng-deep p.requiredLabel, ::ng-deep p.declineLabel {
     position: relative;
-    margin-bottom: 2px;
+    //margin-bottom: 2px;
     text-align: left;
     //font-size: 12pt;
     //color: hsl(0, 0%, 25%);
@@ -251,7 +251,7 @@
 }
 
 ::ng-deep p.declineLabel {
-    margin-left: 45px;
+    //margin-left: 45px;
 }
 
 /*********QUESTION TEXT AREAS/INPUTS**********/
@@ -259,15 +259,15 @@
 ::ng-deep textarea.questionHeading, ::ng-deep textarea.questionField, ::ng-deep textarea.instructionField, ::ng-deep textarea.optionField {
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: 1px solid hsl(0, 0%, 0%);
-    border-radius: 5px;
+    //border: 1px solid hsl(0, 0%, 0%);
+    //border-radius: 5px;
     //color: hsl(195, 100%, 30%);
     width: 100%;
-    line-height: 135%;
+    //line-height: 135%;
     text-align: left;
-    padding: 10px;
-    height: 42px;
-    min-height: 52px;
+    //padding: 10px;
+    //height: 42px;
+    //min-height: 52px;
     overflow: hidden;
     resize: none;
     box-sizing: border-box;
@@ -277,9 +277,9 @@ textarea.shortAnswer, textarea.mediumAnswer, textarea.longAnswer,
 textarea.textFieldPlaceHolder, textarea.numberField, input.locationLatLon, textarea.locationAddress, textarea.questionField,
 textarea.instructionField, textarea.optionField {
     //color: hsl(195, 100%, 30%);
-    padding: 10px;
-    border: 1px solid hsl(0, 0%, 0%);
-    border-radius: 5px;
+    //padding: 10px;
+    //border: 1px solid hsl(0, 0%, 0%);
+   //border-radius: 5px;
     width: 100%;
     /*transition: width 0.3s linear;*/
     text-align: left;
@@ -290,7 +290,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep textarea.optionField {
-    padding: 15px 10px;
+    //padding: 15px 10px;
     //font-size: 16px;
     width: calc(100% - 367px);
     /*max-width: 600px;*/
@@ -325,7 +325,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .subQuestion .declineViewModeOption {
-    padding: 0 !important;
+    //padding: 0 !important;
 }
 
 ::ng-deep .subQuestion textarea.optionField {
@@ -337,7 +337,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.multiTextField {
-    padding: 80px 0px 10px 0px !important;
+    //padding: 80px 0px 10px 0px !important;
 }
 
 ::ng-deep div.multiTextField p.questionNumber {
@@ -350,8 +350,8 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep input.locationLatLon {
-    padding: 3px;
-    margin: 20px 30px 20px 10px;
+    //padding: 3px;
+    //margin: 20px 30px 20px 10px;
     background-color: hsl(0, 0%, 100%);
     pointer-events: none;
     max-width: 120px;
@@ -362,7 +362,7 @@ textarea.instructionField, textarea.optionField {
     background-color: hsl(0, 0%, 100%);
     pointer-events: none;
     display: block;
-    height: 100px !important;
+    //height: 100px !important;
     width: 400px;
 }
 
@@ -382,8 +382,8 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep p.locationQuestionDetails {
     text-align: left;
     //font-size: 13pt;
-    letter-spacing: 1px;
-    margin: 20px 0px;
+    //letter-spacing: 1px;
+    //margin: 20px 0px;
     //color: hsl(0, 0%, 25%);
 }
 
@@ -391,12 +391,12 @@ textarea.instructionField, textarea.optionField {
     z-index: 1000;
     top: 235px;
     left: 50%;
-    margin-left: -15px;
+    //margin-left: -15px;
     position: absolute;
-    height: 30px;
+    //height: 30px;
     width: 30px;
     background-color: transparent;
-    border: 2px solid hsl(0 , 0%, 100%);
+    //border: 2px solid hsl(0 , 0%, 100%);
 }
 
 ::ng-deep div.mapContainer::-webkit-scrollbar {
@@ -408,7 +408,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep textarea.numberField {
-    height: 52px;
+    //height: 52px;
     width: 300px;
 }
 
@@ -419,9 +419,9 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep input.shortAnswer, ::ng-deep input.Standard {
     //color: hsl(195, 100%, 30%);
-    padding: 10px;
-    border: 1px solid hsl(0, 0%, 0%);
-    border-radius: 5px;
+    //padding: 10px;
+    //border: 1px solid hsl(0, 0%, 0%);
+    //border-radius: 5px;
     width: 100%;
     transition: width 0.3s linear;
     text-align: left;
@@ -431,10 +431,10 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep textarea.textFieldPlaceHolder {
-    height: 52px !important;
+    //height: 52px !important;
     overflow-y: hidden;
     //background-color: hsl(0, 0%, 80%);
-    border: solid 1px hsl(0, 0%, 50%);
+    //border: solid 1px hsl(0, 0%, 50%);
     pointer-events: none;
 }
 
@@ -445,7 +445,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.wrapperNoPad > input.shortAnswer {
-    margin: 5px 10px;
+    //margin: 5px 10px;
     width: calc(100% - 230px);
 }
 
@@ -454,18 +454,18 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep textarea.shortAnswer {
-    height: 52px !important;
+    //height: 52px !important;
 }
 
 ::ng-deep div.AddQuestionTemplate {
     //color: hsl(0, 0%, 0%);
-    height: 75px;
+    //height: 75px;
     box-sizing: border-box;
 }
 
 ::ng-deep div.AddQuestionTemplate, ::ng-deep div.AddQuestionnaire, ::ng-deep div.AddQuestionnaireToDOM {
     /*min-height: 60px;*/
-    margin: 0;
+    //margin: 0;
     transition: height 0.3s linear;
 }
 
@@ -475,7 +475,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.AddQuestionnaireToDOM {
-    padding-top: 20px;
+    //padding-top: 20px;
     text-align: center;
 }
 
@@ -484,10 +484,10 @@ textarea.instructionField, textarea.optionField {
     z-index: 5000;
     display: none;
     width: 100%;
-    height: 100%;
+    //height: 100%;
     background-color: hsl(0, 100%, 100%);
-    border-radius: 5px;
-    padding: 10px;
+    //border-radius: 5px;
+    //padding: 10px;
 }
 
 ::ng-deep div.MultipleChoiceAnswerField {
@@ -495,7 +495,7 @@ textarea.instructionField, textarea.optionField {
     display: inline-block;
     /*min-width: 200px;*/
     width: 100%;
-    height: 40px;
+    //height: 40px;
     /*margin: 0 20px;*/
 }
 
@@ -507,26 +507,26 @@ textarea.instructionField, textarea.optionField {
     cursor: text;
     display: inline-block;
     width: 400px;
-    height: 100%;
-    padding: 5px;
+    //height: 100%;
+    //padding: 5px;
     //font-size: 16px;
-    border: 1px solid hsl(0, 0%, 0%);
-    border-radius: 5px;
+    //border: 1px solid hsl(0, 0%, 0%);
+    //border-radius: 5px;
 }
 
 ::ng-deep textarea.MultipleChoiceInput {
 
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: 1px solid hsl(0, 0%, 0%);
-    border-radius: 5px;
+    //border: 1px solid hsl(0, 0%, 0%);
+    //border-radius: 5px;
     //color: hsl(195, 100%, 30%);
     width: 400px;
     text-align: left;
-    padding: 10px;
-    min-height: 52px;
-    line-height: 175%;
-    /*min-height: 52px;*/
+    //padding: 10px;
+    //min-height: 52px;
+    //line-height: 175%;
+    //min-height: 52px;
     overflow: hidden;
     resize: none;
     box-sizing: border-box;
@@ -545,13 +545,13 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep textarea.MultipleChoiceInput.questionError {
     background-color: hsla(0, 100%, 70%, 0.8);
-    border: 1px solid hsl(0, 100%, 40%);
+    //border: 1px solid hsl(0, 100%, 40%);
 }
 
 ::ng-deep input.YesOrNoInput {
     //color: hsl(0, 0%, 0%);
     pointer-events:none;
-    border: transparent;
+    //border: transparent;
     width: 50px
 }
 
@@ -564,26 +564,26 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep input.RangeAnswerField {
     //color: hsl(180, 100%, 32%);
     width: 30px;
-    margin: 0 10px;
+    //margin: 0 10px;
     text-align: center
 }
 
 ::ng-deep div.MultipleChoiceBubble, ::ng-deep div.MultipleSelectionBubble, ::ng-deep div.removableAnswer,
 ::ng-deep div.rangeAnswer {
     display: inline-block;
-    border: 1px solid hsl(0, 0%, 0%);
+    //border: 1px solid hsl(0, 0%, 0%);
     width: 15px;
-    height: 15px;
-    padding: 10px;
-    border-radius: 20px;
-    margin: 7px 7px 7px 0;
+    //height: 15px;
+    //padding: 10px;
+    //border-radius: 20px;
+    //margin: 7px 7px 7px 0;
     cursor: default;
 }
 
 ::ng-deep div.rangeAnswer {
     position: relative;
     //color: grey;
-    margin: 5px 20px;
+    //margin: 5px 20px;
 }
 
 ::ng-deep p.rangeAnswer, ::ng-deep p.rangeAnswerDoubleDigit {
@@ -595,7 +595,7 @@ textarea.instructionField, textarea.optionField {
     top: 10px;
     left: 8px;
     position: absolute;
-    margin-right: 3px;
+    //margin-right: 3px;
 }
 
 ::ng-deep div.removableAnswer {
@@ -603,7 +603,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.MultipleSelectionBubble {
-    border-radius: 5px !important;
+    //border-radius: 5px !important;
 }
 
 ::ng-deep div.selected {
@@ -622,7 +622,7 @@ textarea.instructionField, textarea.optionField {
     position: absolute;
     right: 20px;
     top: 22px;
-    border-radius: 5px;
+    //border-radius: 5px;
 }
 
 ::ng-deep .subQuestion div.modeSelector {
@@ -641,11 +641,11 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep .multiText  div.optionsWrapper {
     text-align: right;
-    padding: 10px 10px 20px 10px;
+    //padding: 10px 10px 20px 10px;
 }
 
 ::ng-deep .viewMode div.optionsWrapper {
-    padding: 10px !important;
+    //padding: 10px !important;
     text-align: left;
 }
 
@@ -660,12 +660,12 @@ textarea.instructionField, textarea.optionField {
     top: 80px;
     left: 2px;
     display: inline-block;
-    border: 1px solid hsl(0, 0%, 0%);
+    //border: 1px solid hsl(0, 0%, 0%);
     width: 15px;
-    height: 15px;
-    padding: 10px;
-    border-radius: 20px;
-    margin: 7px;
+    //height: 15px;
+    //padding: 10px;
+    //border-radius: 20px;
+    //margin: 7px;
 }
 
 ::ng-deep div.questionModeWrapper div.modeSelector {
@@ -676,15 +676,15 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.modeOption:first-child {
-    border-left: 1px solid hsl(0, 0%, 70%);
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
+    //border-left: 1px solid hsl(0, 0%, 70%);
+    //border-top-left-radius: 5px;
+    //border-bottom-left-radius: 5px;
 }
 
 ::ng-deep div.modeOption:last-child {
-    border-right: 1px solid hsl(0, 0%, 70%);
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+    //border-right: 1px solid hsl(0, 0%, 70%);
+    //border-top-right-radius: 5px;
+    //border-bottom-right-radius: 5px;
 }
 
 ::ng-deep div.modeOption:hover {
@@ -693,15 +693,15 @@ textarea.instructionField, textarea.optionField {
 
 
 ::ng-deep div.modeOption {
-    border-bottom: 1px solid hsl(0, 0%, 70%);
-    border-top: 1px solid hsl(0, 0%, 70%);
+    //border-bottom: 1px solid hsl(0, 0%, 70%);
+    //border-top: 1px solid hsl(0, 0%, 70%);
     position: relative;
     display: inline-block;
     //color: hsl(0, 0%, 0%);
     cursor: pointer;
     pointer-events: all;
     //font-weight: bold;
-    padding: 15px 20px;
+    //padding: 15px 20px;
     //font-size: 18px;
 }
 
@@ -709,7 +709,7 @@ textarea.instructionField, textarea.optionField {
 
 
 ::ng-deep .multiText p.questionText {
-    padding: 10px;
+    //padding: 10px;
 }
 
 
@@ -718,7 +718,7 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep div.questionModeWrapper {
     width: 100%;
     text-align: center;
-    padding: 10px 10px 30px 10px;
+    //padding: 10px 10px 30px 10px;
 }
 
 ::ng-deep div.declineButton {
@@ -726,9 +726,9 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.declineOption {
-    padding-top: 0;
-    padding-bottom: 0;
-    /*height: 130px;*/
+    //padding-top: 0;
+    //padding-bottom: 0;
+    //height: 130px;
 }
 
 ::ng-deep div.declineViewModeOption {
@@ -736,7 +736,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.addTextFieldWrapper {
-    height: 70px;
+    //height: 70px;
     cursor: pointer;
     pointer-events: all;
     display: inline-block;
@@ -744,7 +744,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.addTextFieldWrapper {
-    height: auto;
+    //height: auto;
 }
 
 ::ng-deep div.addAnswerRow div.MultipleChoiceAnswerField{
@@ -758,14 +758,14 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.declineOption input.answerVariableName {
-    margin-top: 2px;
+    //margin-top: 2px;
 }
 
 
 ::ng-deep p.addNewOptionLabel {
     text-align: left;
     //font-size: 14pt;
-    line-height: 52px;
+    //line-height: 52px;
     display: inline-block;
     //color: hsl(0, 0%, 0%);
     cursor: pointer;
@@ -776,8 +776,8 @@ textarea.instructionField, textarea.optionField {
     //color: hsl(180, 100%, 32%);
     pointer-events: all;
     cursor: text;
-    border: none;
-    border-radius: 5px;
+    //border: none;
+    //border-radius: 5px;
     min-width: 250px;
     width: auto;
 }
@@ -795,16 +795,16 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep div.questionValueWrapper, ::ng-deep div.optionValueWrapper {
     display: block;
     position: relative;
-    margin: 5px 0;
+    //margin: 5px 0;
     text-align: left;
 }
 
 ::ng-deep div.optionValueWrapper {
-    margin: 5px 0px 5px 45px;
+    //margin: 5px 0px 5px 45px;
 }
 
 ::ng-deep div.textOption div.optionValueWrapper {
-    margin: 5px 0px;
+    //margin: 5px 0px;
 }
 
 ::ng-deep div.questionOption {
@@ -814,11 +814,11 @@ textarea.instructionField, textarea.optionField {
     //color: hsl(0, 100%, 100%);
     display: block;
     box-sizing: border-box;
-    padding: 10px;
+    //padding: 10px;
 }
 
 ::ng-deep tr.questionOption > td {
-    padding:  10px 0;
+    //padding:  10px 0;
 }
 
 ::ng-deep .question-view-mode div.questionOption {
@@ -826,15 +826,15 @@ textarea.instructionField, textarea.optionField {
     flex-direction: row;
     flex-wrap: wrap;
     width: 100%;
-    padding: 10px 0;
+    //padding: 10px 0;
 }
 
 ::ng-deep .question-view-mode .questionnaireQuestion {
     left: unset;
-    padding: 0px 10px;
-    /*display: flex;*/
-    /*flex: 1;*/
-    /*max-width: calc(100% - 116px) !important;*/
+    //padding: 0px 10px;
+    //display: flex;
+    //flex: 1;
+    //max-width: calc(100% - 116px) !important;
 }
 
 ::ng-deep .question-view-mode td {
@@ -843,7 +843,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .question-view-mode .questionOptionShape {
-    margin: 0;
+    //margin: 0;
     display: flex;
     top: unset;
     position: relative;
@@ -857,7 +857,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep input.questionValueField, ::ng-deep input.optionValueField {
-    padding: 5px;
+    //padding: 5px;
     min-width: 250px;
 }
 
@@ -868,21 +868,21 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.subQuestion {
     width: calc(100% - 130px) !important;
-    margin-left: 125px;
-    padding: 10px;
-    border-radius: 0px !important;
-    border-left: 3px solid hsl(195, 100%, 35%);
+    //margin-left: 125px;
+    //padding: 10px;
+    //border-radius: 0px !important;
+    //border-left: 3px solid hsl(195, 100%, 35%);
 }
 
 ::ng-deep div.questionnaireOptions div.subQuestion {
-    border: none;
+    //border: none;
 }
 
 ::ng-deep p.subQuestionLabel {
     text-align: left;
     //color: white;
     //font-size: 14px;
-    line-height: 22px;
+    //line-height: 22px;
 }
 
 ::ng-deep div.buttonDeleteSubQuestion p.subQuestionLabel {
@@ -891,15 +891,15 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.buttonAddSubQuestionIcon {
     width: 38px;
-    height: 38px;
-    padding: 10px;
+    //height: 38px;
+    //padding: 10px;
     border-radius: 20px;
     position: absolute;
     top: -1px;
     box-sizing: border-box;
     right: 0;
-    border: 1px solid hsl(0, 100%, 100%);
-    margin: 7px 10px;
+    //border: 1px solid hsl(0, 100%, 100%);
+    //margin: 7px 10px;
     text-align: center;
 }
 
@@ -909,11 +909,11 @@ textarea.instructionField, textarea.optionField {
     background-color: hsl(0, 0%, 100%);
     //color: black;
     //font-size: 14pt;
-    margin: 0 20px;
+    //margin: 0 20px;
     position: relative;
     display: inline-block;
     vertical-align: top;
-    height: auto;
+    //height: auto;
     box-sizing: border-box;
     width: 110px;
     cursor: pointer;
@@ -921,7 +921,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.goToContainer.redText .buttonDropdown {
-    border-top-color:  hsl(0, 100%, 40%);
+    //border-top-color:  hsl(0, 100%, 40%);
 }
 
 ::ng-deep div.goToContainer.redText svg {
@@ -934,14 +934,14 @@ textarea.instructionField, textarea.optionField {
     //font-size: 14pt;
     /*margin: 0 20px;*/
     position: relative;
-    border: solid 1px hsl(0, 0%, 80%);
+    //border: solid 1px hsl(0, 0%, 80%);
     display: inline-block;
     vertical-align: top;
-    height: 52px;
-    border-radius: 4px;
+    //height: 52px;
+    //border-radius: 4px;
     box-sizing: border-box;
     width: 110px;
-    padding: 10px;
+    //padding: 10px;
     cursor: pointer;
     pointer-events: all;
     flex: 0 1 auto;
@@ -953,7 +953,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.goToContainer.redText div.goToMenuButton {
-    border: 1px solid hsl(0, 100%, 40%);
+    //border: 1px solid hsl(0, 100%, 40%);
 }
 
 ::ng-deep div.goToMenuButton:hover {
@@ -966,7 +966,7 @@ textarea.instructionField, textarea.optionField {
     //color: black;
     //font-size: 14px;
     width: 40px;
-    margin-right: 10px;
+    //margin-right: 10px;
 }
 
 ::ng-deep .section-wrapper .goToContainer, ::ng-deep .section-wrapper .goToMenuButton {
@@ -987,9 +987,9 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep div.sectionMenuItem, ::ng-deep div.sectionMenuItemActive, ::ng-deep div.questionMenuItem {
     //font-size: 16px;
     //color: hsl(0, 0%, 0%);
-    border-radius: 5px;
-    padding: 12px;
-    line-height: 23px;
+    //border-radius: 5px;
+    //padding: 12px;
+    //line-height: 23px;
     word-break: normal;
     /*white-space: nowrap;*/
     cursor: pointer;
@@ -1000,30 +1000,30 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.goToDropDownMenu {
-    margin-top: 55px;
-    margin-bottom: 20px;
+    //margin-top: 55px;
+    //margin-bottom: 20px;
     width: 100%;
     left: -1px;
     top: 0px;
     z-index: 10000;
     overflow-y: scroll;
-    min-height: 40px;
-    max-height: 40vh;
+    //min-height: 40px;
+    //max-height: 40vh;
     box-sizing: border-box;
     opacity: 1;
     display: none;
     transition: top 0.5s ease-out;
     position: absolute;
     background-color: hsl(0, 0%, 100%);
-    border-radius: 5px;
-    padding: 10px;
+    //border-radius: 5px;
+    //padding: 10px;
     box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.35);
     pointer-events: all;
     cursor: default;
 }
 
 ::ng-deep div.buttonAddSubQuestion, ::ng-deep div.buttonDeleteSubQuestion {
-    height: 20px;
+    //height: 20px;
     width: 130px;
     margin-left: 10px;
     position: relative;
@@ -1033,7 +1033,7 @@ textarea.instructionField, textarea.optionField {
     //font-size: 14px;
     line-height: 14px;
     white-space: nowrap;
-    padding: 15px;
+    //padding: 15px;
     border-radius: 5px;
     overflow: hidden;
     cursor: pointer;
@@ -1045,7 +1045,7 @@ textarea.instructionField, textarea.optionField {
     user-select: none;
     //color: hsl(0, 0%, 100%) !important;
     background-color: hsl(195, 100%, 35%) !important;
-    border: solid 1px hsl(195, 100%, 35%) !important;
+    //border: solid 1px hsl(195, 100%, 35%) !important;
 }
 
 ::ng-deep div.buttonDeleteSubQuestionIcon {
@@ -1061,12 +1061,12 @@ textarea.instructionField, textarea.optionField {
     height: 20px;
     width: 20px;
     fill: hsl(0, 100%, 40%) !important;
-    margin: 5px;
-    padding: 0;
+    //margin: 5px;
+    //padding: 0;
 }
 
 ::ng-deep div.buttonDeleteSubQuestion {
-    border: solid 1px hsl(0, 0%, 80%) !important;
+    //border: solid 1px hsl(0, 0%, 80%) !important;
     background-color: hsl(0, 0%, 100%) !important;
     position: relative !important;
 }
@@ -1087,12 +1087,12 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep .matrixOption div.MultipleChoiceBubble, ::ng-deep .matrixOption div.MultipleSelectionBubble {
     display: inline-block;
-    border: 1px solid hsl(0, 0%, 0%);
+    //border: 1px solid hsl(0, 0%, 0%);
     width: 15px;
-    height: 15px;
-    padding: 10px;
-    border-radius: 20px;
-    margin: 7px;
+    //height: 15px;
+    //padding: 10px;
+    //border-radius: 20px;
+    //margin: 7px;
     pointer-events: all;
     cursor: pointer;
     position: relative;
@@ -1100,16 +1100,16 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .matrixOption > .MultipleChoiceAnswerField {
-    margin-left: 35px;
+    //margin-left: 35px;
 }
 
 ::ng-deep .matrixOption > .buttonMoveQuestionnaireOption {
     top: 40px !important;
-    margin-left: 15px;
+    //margin-left: 15px;
 }
 
 ::ng-deep .matrixOption .answerVariableName {
-    margin-left: 67px !important;
+    //margin-left: 67px !important;
 }
 
 ::ng-deep .matrixOption svg {
@@ -1123,7 +1123,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep table.matrixQuestionTable td {
-    padding: 10px 5px;
+    //padding: 10px 5px;
 }
 
 ::ng-deep td.matrixRow {
@@ -1132,15 +1132,15 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep p.questionMatrixColumnLabel {
     //font-size: 13pt;
-    line-height: 125%;
+    //line-height: 125%;
     //color: hsl(0, 0%, 0%);
     text-align: center;
-    padding: 0px 10px;
+    //padding: 0px 10px;
 }
 
 ::ng-deep p.questionMatrixRowLabel {
     //font-size: 13pt;
-    line-height: 125%;
+    //line-height: 125%;
     //color: hsl(0, 0%, 0%);
 }
 
@@ -1148,15 +1148,15 @@ textarea.instructionField, textarea.optionField {
     pointer-events: all;
     cursor: pointer;
     display: inline-block;
-    height: 40px;
+    //height: 40px;
 }
 
 ::ng-deep table.matrixQuestionTable tr {
-    border-top: 1px solid hsl(0, 0%, 90%);
+    //border-top: 1px solid hsl(0, 0%, 90%);
 }
 
 ::ng-deep table.matrixQuestionTable tr:first-child {
-    border-top: none
+    //border-top: none
 }
 
 ::ng-deep td.spacer {
@@ -1171,29 +1171,29 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.matrixOptionBubble, ::ng-deep div.matrixMultiOptionBubble {
     display: inline-block;
-    border: 1px solid hsl(0, 0%, 0%);
+    //border: 1px solid hsl(0, 0%, 0%);
     width: 15px;
-    height: 15px;
-    padding: 7px;
-    border-radius: 20px;
-    margin: 7px;
+    //height: 15px;
+    //padding: 7px;
+    //border-radius: 20px;
+    //margin: 7px;
     cursor: default;
 }
 
 ::ng-deep div.matrixMultiOptionBubble {
-    border-radius: 0px;
+    //border-radius: 0px;
 }
 
 ::ng-deep div.newRowWrapper .answerLabel, ::ng-deep div.newColumnWrapper .answerLabel {
-    margin: 7px;
+    //margin: 7px;
 }
 
 ::ng-deep div.newRowWrapper, ::ng-deep div.newColumnWrapper {
-    padding-bottom: 30px !important;
+    //padding-bottom: 30px !important;
 }
 
 ::ng-deep div.newColumnWrapper:last-child {
-    padding-bottom: 5px;
+    //padding-bottom: 5px;
 }
 
 ::ng-deep div.variableOptionWrapper {
@@ -1202,8 +1202,8 @@ textarea.instructionField, textarea.optionField {
     //color: hsl(0, 100%, 100%);
     display: block;
     box-sizing: border-box;
-    padding: 10px;
-    margin: 10px 0px 0px 10px
+    //padding: 10px;
+    //margin: 10px 0px 0px 10px
 }
 
 
@@ -1211,8 +1211,8 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep p.ownerLabel {
     //font-size: 20pt;
-    line-height: 40px;
-    letter-spacing: 0;
+    //line-height: 40px;
+    //letter-spacing: 0;
     //color: hsl(195, 100%, 50%);
     text-align: left;
     //font-family: "StandardFontBold", "Arial", sans-serif;
@@ -1222,12 +1222,12 @@ textarea.instructionField, textarea.optionField {
     position: relative;
     display: flex;
     align-items: center;
-    min-height: 50px;
+    //min-height: 50px;
     //font-size: 16pt;
-    line-height: 135%;
+    //line-height: 135%;
     //color: hsl(0, 0%, 0%);
     pointer-events: none;
-    padding: 0 5px;
+    //padding: 0 5px;
 }
 
 ::ng-deep p.goto-label {
@@ -1235,20 +1235,20 @@ textarea.instructionField, textarea.optionField {
     display: inline-flex;
     align-items: center;
     font-style: italic;
-    min-height: 50px;
+    //min-height: 50px;
     width: auto;
     justify-content: flex-end;
     //font-size: 16pt;
-    line-height: 135%;
+    //line-height: 135%;
     //color: hsl(0, 0%, 70%);
     pointer-events: none;
-    margin-left: 50px;
+    //margin-left: 50px;
     white-space: nowrap;
 }
 
 ::ng-deep .section-wrapper p.goto-label {
     width: auto;
-    margin: 0 2px;
+    //margin: 0 2px;
 }
 
 ::ng-deep div.questionnaireSelector {
@@ -1259,7 +1259,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.questionnaireOptions, ::ng-deep div.subQuestionOptions {
-    padding: 0px 15px;
+    //padding: 0px 15px;
     text-align: left;
     /*padding-left: 20px;*/
     /*padding-bottom: 5px;*/
@@ -1275,21 +1275,21 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.questionnaireSubOption {
-    padding: 10px;
+    //padding: 10px;
 }
 
 ::ng-deep div.questionOption, ::ng-deep div.subQuestionOption {
-    padding: 10px;
+    //padding: 10px;
     display: block;
 }
 
 ::ng-deep div.questionOption.selected, ::ng-deep div.subQuestionOption.selected {
     background-color: hsl(190, 100%, 40%) !important;
-    border-radius: 5px;
+    //border-radius: 5px;
 }
 
 ::ng-deep div.addOptionWrapper, ::ng-deep div.addDeclineOptionWrapper {
-    padding: 10px;
+    //padding: 10px;
     text-align: left;
     width: auto;
     pointer-events: all;
@@ -1311,13 +1311,13 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.dropDownViewQuestionContainer {
-    padding: 10px !important;
+    //padding: 10px !important;
     position: relative;
     display: inline-block;
     width: auto;
     min-width: 400px;
-    border: 1px solid hsl(0, 0%, 80%);
-    border-radius: 5px;
+    //border: 1px solid hsl(0, 0%, 80%);
+    //border-radius: 5px;
     left: 0;
 }
 
@@ -1329,10 +1329,10 @@ textarea.instructionField, textarea.optionField {
     cursor: default;
     pointer-events: none;
     width: 0;
-    height: 0;
-    border-left: 7px solid transparent;
-    border-right: 7px solid transparent;
-    border-top: 10px solid hsl(0, 0%, 0%);
+    //height: 0;
+    //border-left: 7px solid transparent;
+    //border-right: 7px solid transparent;
+    //border-top: 10px solid hsl(0, 0%, 0%);
 }
 
 ::ng-deep .question-view-mode div.div.buttonQuestionnaireDropDown {
@@ -1340,50 +1340,50 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.questionnairePlaceholder {
-    padding: 0 10px;
-    border-radius: 5px;
-    border: 1px solid hsl(0, 0%, 80%);
+    //padding: 0 10px;
+    //border-radius: 5px;
+    //border: 1px solid hsl(0, 0%, 80%);
     position: relative;
-    min-height: 50px;
+    //min-height: 50px;
     min-width: 400px;
     display: block;
     //font-size: 14pt;
     //color: hsl(0, 0%, 20%);
     vertical-align: middle;
-    margin-bottom: 10px;
+    //margin-bottom: 10px;
 }
 
 ::ng-deep div.dropDownViewModeQuestion {
     display: inline-block !important;
     width: auto;
-    padding: 5px !important;
-    border-radius: 5px !important;
-    border:  1px solid hsl(0, 0%, 0%) !important;
+    //padding: 5px !important;
+    //border-radius: 5px !important;
+    //border:  1px solid hsl(0, 0%, 0%) !important;
 }
 
 ::ng-deep div.answerBubbleViewMode, ::ng-deep div.answerBubbleViewModeSelected, ::ng-deep div.questionOptionShape {
     position: relative;
-    line-height: 50px;
+    //line-height: 50px;
     display: inline-block;
     width: 24px;
-    height: 24px;
-    /*margin-top: 13px;*/
-    border: solid 1px hsl(0, 0%, 10%);
+    //height: 24px;
+    //margin-top: 13px;
+    //border: solid 1px hsl(0, 0%, 10%);
 }
 
 ::ng-deep .question-view-mode div.answerBubbleViewMode {
-    margin: 0 !important;
+    //margin: 0 !important;
 }
 
 ::ng-deep div.questionOptionShape {
     position: absolute;
     display: inline-block;
     border-radius: 15px;
-    height: 28px;
+    //height: 28px;
     width: 28px;
-    margin-right: 3px;
+    //margin-right: 3px;
     top: 50%;
-    margin-top: -14px
+    //margin-top: -14px
 }
 
 ::ng-deep div.answerBubbleViewModeSelected {
@@ -1394,15 +1394,15 @@ textarea.instructionField, textarea.optionField {
 /*MODIFIERS*/
 
 ::ng-deep textarea.longAnswer {
-    height: 160px !important;
+    //height: 160px !important;
 }
 
 ::ng-deep textarea.mediumAnswer {
-    height: 100px !important;
+    //height: 100px !important;
 }
 
 ::ng-deep textarea.shortAnswer {
-    height: 52px !important;
+    //height: 52px !important;
 }
 
 
@@ -1427,8 +1427,38 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep body > modal-container > div.reveal {
     z-index: 8000 !important;
     margin: auto !important;
-    margin-left: 10% !important;
+    margin-left: 8% !important;
     margin-right: auto !important;
-    padding: 0 !important;
-    width: 53% !important;
+    padding: 2% !important;
+    //padding-left: 2%;
+    width: 57% !important;
+    line-height: auto !important;
+}
+
+::ng-deep body > modal-container > div > div > * {
+    margin: 10px !important;
+    padding: 20px !important;
+    line-height: auto !important;
+}
+
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions.alignLeft > tr > * {
+    vertical-align: middle !important;
+}
+
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > tr > td:nth-child(1) > div.answerBubbleViewMode,
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > tr > td:nth-child(1) > div.questionOptionShape,
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > div > div > div > tr > td:nth-child(1) > div.questionOptionShape {
+    width: 15px !important;
+    height: 15px !important;
+}
+
+// Images.
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
+    margin-bottom: 10px;
+}
+
+// Images and Maps
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.wrapper > div.locationMapContainer,
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
+    border: 1px solid #000000;
 }

From e42c2154976ed157b8ce22ec9d3465b47a5c84a8 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Tue, 21 Nov 2023 02:46:32 -0600
Subject: [PATCH 06/12] Have now commented out all styles that are not required
 for basic structure. Purging unused code next.

---
 .../modal-questionnaire-viewer.component.styl | 852 +++++++++---------
 1 file changed, 422 insertions(+), 430 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 1e329891..79dba268 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -20,20 +20,20 @@
 */
 
 ::ng-deep p.questionnaireTitle {
-    position: absolute;
-    text-align: center;
+    //position: absolute;
+    //text-align: center;
 }
 
 ::ng-deep p.questionLabel,::ng-deep p.headerLabel {
-    text-align: left;
+    //text-align: left;
     //font-size: 14pt;
     //color: hsl(0, 0%, 100%);
 }
 
 ::ng-deep p.headerLabel {
     //color: hsl(0, 0%, 0%);
-    display: block;
-    text-align: center;
+    //display: block;
+    //text-align: center;
     //font-size: 25px;
     //line-height: 25px;
     //margin: 20px 0 10px;
@@ -45,22 +45,22 @@
 /*INFO PAGE*/
 
 ::ng-deep div.inlineContainer {
-    width: auto;
-    display: inline-block;
+    //width: auto;
+    //display: inline-block;
 }
 
 ::ng-deep .disabled div.inlineContainer {
-    pointer-events: none !important;
-    cursor: default !important;
+    //pointer-events: none !important;
+    //cursor: default !important;
 }
 
 ::ng-deep div.inlineContainer:hover div.radioButtonQuestionnaire,
 ::ng-deep div.inlineContainer:hover div.radioButtonQuestionnaireSmall {
-    background-color: hsl(0, 0%, 90%);
+    //background-color: hsl(0, 0%, 90%);
 }
 
 ::ng-deep .disabled div.radioButtonActive {
-    background-color: hsl(0, 0%, 50%) !important;
+    //background-color: hsl(0, 0%, 50%) !important;
 }
 
 ::ng-deep .disabled p.questionnaireInfoHeader {
@@ -68,27 +68,27 @@
 }
 
 ::ng-deep .disabled div.inlineContainer {
-    pointer-events: none;
-    cursor: default;
+    //pointer-events: none;
+    //cursor: default;
 }
 
 ::ng-deep p.questionnaireInfo {
     //margin-left: 20px;
     //padding: 5px 0;
-    position: relative;
+    //position: relative;
     //font-family: "StandardFontRegular", "Arial", sans-serif;
     //font-size: 15pt;
     //color: hsl(0, 0%, 10%);
-    display: inline-block;
+    //display: inline-block;
     //line-height: 50px;
 }
 
 ::ng-deep p.questionnaireInfoHeader {
-    /*text-align: right;*/
-    width: 210px;
-    display: inline-block;
+    //text-align: right;
+    //width: 210px;
+    //display: inline-block;
     //line-height: 50px;
-    vertical-align: top;
+    //vertical-align: top;
     //font-family: "StandardFontBold", "Arial", sans-serif;
     //font-size: 17pt;
     //letter-spacing: 1px;
@@ -97,38 +97,38 @@
 }
 
 ::ng-deep div.radioButtonQuestionnaire,::ng-deep div.radioButtonQuestionnaireSmall {
-    cursor: pointer;
-    display: inline-block;
+    //cursor: pointer;
+    //display: inline-block;
     //border: 1px solid hsl(0, 0%, 0%);
     //border-radius: 20px;
-    width: 35px;
-    height: 35px;
+    //width: 35px;
+    //height: 35px;
     //margin: 12px 15px 0px 30px;
 }
 
 ::ng-deep div.radioButtonQuestionnaireSmall {
-    width: 25px;
-    height: 25px;
+    //width: 25px;
+    //height: 25px;
     //margin: 0px 8px 0px 20px;
 }
 
 ::ng-deep div.radioButtonActive {
-    background-color: hsl(195, 100%, 30%);
+    //background-color: hsl(195, 100%, 30%);
 }
 
 ::ng-deep p.questionnaireDetailText {
-    position: relative;
-    display: inline-block;
+    //position: relative;
+    //display: inline-block;
     //color: hsl(0, 0%, 0%);
     //line-height: 60px;
     //font-size: 15pt;
-    vertical-align: top;
+    //vertical-align: top;
 }
 
 ::ng-deep div.optionsWrapper {
-    position: relative;
-    text-align: left;
-    display: block;
+    //position: relative;
+    //text-align: left;
+    //display: block;
     //padding: 20px 10px;
 }
 
@@ -143,7 +143,7 @@
 ::ng-deep div.optionsWrapper p.editFieldLabel {
     //line-height: 27px;
     //margin: 0;
-    vertical-align: top;
+    //vertical-align: top;
 }
 
 ::ng-deep div.questionHeaderWrapper {
@@ -153,18 +153,17 @@
 }
 
 ::ng-deep p.questionNumber, ::ng-deep p.questionType {
-    position: relative;
-    text-align: left;
+    //position: relative;
+    //text-align: left;
     //color: hsl(150, 100%, 46%);
     //padding: 20px 10px;
-    top: 0;
-    left: 0px;
-    right: 50px;
+    //top: 0;
+    //left: 0px;
+    //right: 50px;
     //font-size: 25pt;
     //font-weight: bold
 }
 
-
 ::ng-deep .subQuestion p.questionNumber {
     //font-size: 18pt;
 }
@@ -172,14 +171,14 @@
 ::ng-deep p.questionType {
     //font-size: 18pt;
     //font-weight: bold;
-    left: unset;
-    right: 20px;
-    top: 10px;
+    //left: unset;
+    //right: 20px;
+    //top: 10px;
 }
 
 ::ng-deep p.questionText, ::ng-deep p.headingText, ::ng-deep p.reorderQuestionText, ::ng-deep p.reorderSectionText, ::ng-deep p.instructionText {
     //color: hsl(0, 0%, 0%);
-    text-align: left;
+    //text-align: left;
     //font-size: 17pt;
     //letter-spacing: 1px;
     //font-weight: bold;
@@ -229,25 +228,25 @@
 }
 
 ::ng-deep div.reorderItemClone {
-    position: absolute;
-    display: block;
+    //position: absolute;
+    //display: block;
     //height: 50px;
     //background-color: hsl(195, 45%, 65%) !important;
-    opacity: 0.4 !important;
+    //opacity: 0.4 !important;
     //border-radius: 5px;
 }
 
 ::ng-deep p.editFieldLabel, ::ng-deep p.requiredLabel, ::ng-deep p.declineLabel {
-    position: relative;
+    //position: relative;
     //margin-bottom: 2px;
-    text-align: left;
+    //text-align: left;
     //font-size: 12pt;
     //color: hsl(0, 0%, 25%);
 }
 
 ::ng-deep p.editFieldLabel p.declineLabel {
-    pointer-events: none;
-    cursor: default;
+    //pointer-events: none;
+    //cursor: default;
 }
 
 ::ng-deep p.declineLabel {
@@ -257,20 +256,20 @@
 /*********QUESTION TEXT AREAS/INPUTS**********/
 
 ::ng-deep textarea.questionHeading, ::ng-deep textarea.questionField, ::ng-deep textarea.instructionField, ::ng-deep textarea.optionField {
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    //-webkit-appearance: none;
+    //-moz-appearance: none;
     //border: 1px solid hsl(0, 0%, 0%);
     //border-radius: 5px;
     //color: hsl(195, 100%, 30%);
-    width: 100%;
+    //width: 100%;
     //line-height: 135%;
-    text-align: left;
+    //text-align: left;
     //padding: 10px;
     //height: 42px;
     //min-height: 52px;
-    overflow: hidden;
-    resize: none;
-    box-sizing: border-box;
+    //overflow: hidden;
+    //resize: none;
+    //box-sizing: border-box;
 }
 
 textarea.shortAnswer, textarea.mediumAnswer, textarea.longAnswer,
@@ -279,48 +278,48 @@ textarea.instructionField, textarea.optionField {
     //color: hsl(195, 100%, 30%);
     //padding: 10px;
     //border: 1px solid hsl(0, 0%, 0%);
-   //border-radius: 5px;
-    width: 100%;
-    /*transition: width 0.3s linear;*/
-    text-align: left;
-    max-width: 100%;
-    max-height: 100%;
-    resize: none;
-    box-sizing: border-box;
+    //border-radius: 5px;
+    //width: 100%;
+    //transition: width 0.3s linear;
+    //text-align: left;
+    //max-width: 100%;
+    //max-height: 100%;
+    //resize: none;
+    //box-sizing: border-box;
 }
 
 ::ng-deep textarea.optionField {
     //padding: 15px 10px;
     //font-size: 16px;
-    width: calc(100% - 367px);
+    //width: calc(100% - 367px);
     /*max-width: 600px;*/
-    min-width: 120px;
-    max-height: none;
+    //min-width: 120px;
+    //max-height: none;
 }
 
 ::ng-deep .question-edit-field-container textarea.optionField {
-    width: calc(100% - 415px);
+    //width: calc(100% - 415px);
 }
 
 ::ng-deep .question-edit-field-container input.optionValueField {
-    margin-left: 50px;
+    //margin-left: 50px;
 }
 
 ::ng-deep .multi-select textarea.optionField {
-    width: calc(100% - 261px);
+    //width: calc(100% - 261px);
 }
 
 
 ::ng-deep .multi-select .declineOptionWrapper > textarea.optionField {
-    width: calc(100% - 217px);
+    //width: calc(100% - 217px);
 }
 
 ::ng-deep .declineOptionWrapper > textarea {
-    margin-left: 45px;
+    //margin-left: 45px;
 }
 
 ::ng-deep .declineOption.subQuestionOption .removableAnswer {
-    left: 0px !important;
+    //left: 0px !important;
 
 }
 
@@ -329,7 +328,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .subQuestion textarea.optionField {
-    width: calc(100% - 93px);
+    //width: calc(100% - 93px);
 }
 
 ::ng-deep textarea.instructionField {
@@ -341,8 +340,8 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.multiTextField p.questionNumber {
-    position: absolute;
-    top: 10px;
+    //position: absolute;
+    //top: 10px;
 }
 
 ::ng-deep .subQuestion p.questionText {
@@ -352,18 +351,18 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep input.locationLatLon {
     //padding: 3px;
     //margin: 20px 30px 20px 10px;
-    background-color: hsl(0, 0%, 100%);
-    pointer-events: none;
-    max-width: 120px;
-    display: inline-block;
+    //background-color: hsl(0, 0%, 100%);
+    //pointer-events: none;
+    //max-width: 120px;
+    //display: inline-block;
 }
 
 ::ng-deep textarea.locationAddress {
-    background-color: hsl(0, 0%, 100%);
-    pointer-events: none;
-    display: block;
+    //background-color: hsl(0, 0%, 100%);
+    //pointer-events: none;
+    //display: block;
     //height: 100px !important;
-    width: 400px;
+    //width: 400px;
 }
 
 /************ LOCATION QUESTION MAP ************/
@@ -380,7 +379,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep p.locationQuestionDetails {
-    text-align: left;
+    //text-align: left;
     //font-size: 13pt;
     //letter-spacing: 1px;
     //margin: 20px 0px;
@@ -388,33 +387,32 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.mapSelectionIcon {
-    z-index: 1000;
-    top: 235px;
-    left: 50%;
+    //z-index: 1000;
+    //top: 235px;
+    //left: 50%;
     //margin-left: -15px;
-    position: absolute;
+    //position: absolute;
     //height: 30px;
-    width: 30px;
-    background-color: transparent;
+    //width: 30px;
+    //background-color: transparent;
     //border: 2px solid hsl(0 , 0%, 100%);
 }
 
 ::ng-deep div.mapContainer::-webkit-scrollbar {
-    display: none !important;
+    //display: none !important;
 }
 
 ::ng-deep div.mapCanvas::-webkit-scrollbar {
-    display: none !important;
+    //display: none !important;
 }
 
 ::ng-deep textarea.numberField {
     //height: 52px;
-    width: 300px;
+    //width: 300px;
 }
 
-
 ::ng-deep input, ::ng-deep textarea {
-    pointer-events: all;
+    //pointer-events: all;
 }
 
 ::ng-deep input.shortAnswer, ::ng-deep input.Standard {
@@ -422,35 +420,35 @@ textarea.instructionField, textarea.optionField {
     //padding: 10px;
     //border: 1px solid hsl(0, 0%, 0%);
     //border-radius: 5px;
-    width: 100%;
-    transition: width 0.3s linear;
-    text-align: left;
-    max-width: 100%;
-    max-height: 100%;
-    resize: none;
+    //width: 100%;
+    //transition: width 0.3s linear;
+    //text-align: left;
+    //max-width: 100%;
+    //max-height: 100%;
+    //resize: none;
 }
 
 ::ng-deep textarea.textFieldPlaceHolder {
     //height: 52px !important;
-    overflow-y: hidden;
+    //overflow-y: hidden;
     //background-color: hsl(0, 0%, 80%);
     //border: solid 1px hsl(0, 0%, 50%);
-    pointer-events: none;
+    //pointer-events: none;
 }
 
 ::ng-deep textarea.questionHeading:focus, ::ng-deep textarea.shortAnswer:focus, ::ng-deep textarea.longAnswer:focus, ::ng-deep input.MultipleChoiceInput:focus, ::ng-deep textarea.MultipleChoiceInput:focus,
 ::ng-deep input.RangeAnswerField:focus, ::ng-deep input.shortAnswer:focus, ::ng-deep textarea.mediumAnswer:focus, ::ng-deep textarea:focus {
-    outline: none;
-    box-shadow: 0px 0px 0px 4px hsl(195, 100%, 60%) !important;
+    //outline: none;
+    //box-shadow: 0px 0px 0px 4px hsl(195, 100%, 60%) !important;
 }
 
 ::ng-deep div.wrapperNoPad > input.shortAnswer {
     //margin: 5px 10px;
-    width: calc(100% - 230px);
+    //width: calc(100% - 230px);
 }
 
 ::ng-deep textarea.shortAnswer:focus {
-    outline: none;
+    //outline: none;
 }
 
 ::ng-deep textarea.shortAnswer {
@@ -460,53 +458,52 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep div.AddQuestionTemplate {
     //color: hsl(0, 0%, 0%);
     //height: 75px;
-    box-sizing: border-box;
+    //box-sizing: border-box;
 }
 
 ::ng-deep div.AddQuestionTemplate, ::ng-deep div.AddQuestionnaire, ::ng-deep div.AddQuestionnaireToDOM {
-    /*min-height: 60px;*/
+    //min-height: 60px;
     //margin: 0;
-    transition: height 0.3s linear;
+    //transition: height 0.3s linear;
 }
 
 ::ng-deep div.AddQuestionnaire {
-    display: flex;
-    justify-content: space-between;
+    //display: flex;
+    //justify-content: space-between;
 }
 
 ::ng-deep div.AddQuestionnaireToDOM {
     //padding-top: 20px;
-    text-align: center;
+    //text-align: center;
 }
 
 ::ng-deep div.AddQuestionnaireTemplate {
     //color: hsl(0, 0%, 0%);
-    z-index: 5000;
-    display: none;
-    width: 100%;
+    //z-index: 5000;
+    //display: none;
+    //width: 100%;
     //height: 100%;
-    background-color: hsl(0, 100%, 100%);
+    //background-color: hsl(0, 100%, 100%);
     //border-radius: 5px;
     //padding: 10px;
 }
 
 ::ng-deep div.MultipleChoiceAnswerField {
-    cursor: pointer;
-    display: inline-block;
-    /*min-width: 200px;*/
-    width: 100%;
+    //cursor: pointer;
+    //display: inline-block;
+    //min-width: 200px;
+    //width: 100%;
     //height: 40px;
-    /*margin: 0 20px;*/
+    //margin: 0 20px;
 }
 
 ::ng-deep input.MultipleChoiceInput, ::ng-deep input.RangeAnswerField, ::ng-deep input.YesOrNoInput, ::ng-deep input.goToInput, ::ng-deep textarea.MultipleChoiceInput {
-    /*pointer-events: none;*/
-    /*user-select: none;*/
-
+    //pointer-events: none;
+    //user-select: none;
     //color: hsl(195, 100%, 30%);
-    cursor: text;
-    display: inline-block;
-    width: 400px;
+    //cursor: text;
+    //display: inline-block;
+    //width: 400px;
     //height: 100%;
     //padding: 5px;
     //font-size: 16px;
@@ -515,73 +512,71 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep textarea.MultipleChoiceInput {
-
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    //-webkit-appearance: none;
+    //-moz-appearance: none;
     //border: 1px solid hsl(0, 0%, 0%);
     //border-radius: 5px;
     //color: hsl(195, 100%, 30%);
-    width: 400px;
-    text-align: left;
+    //width: 400px;
+    //text-align: left;
     //padding: 10px;
     //min-height: 52px;
     //line-height: 175%;
     //min-height: 52px;
-    overflow: hidden;
-    resize: none;
-    box-sizing: border-box;
-
+    //overflow: hidden;
+    //resize: none;
+    //box-sizing: border-box;
 }
 
 ::ng-deep input.MultipleChoiceInput, ::ng-deep input.YesOrNoInput, ::ng-deep textarea.MultipleChoiceInput {
-    width: calc(100% - 70px);
-    max-width: 500px;
+    //width: calc(100% - 70px);
+    //max-width: 500px;
 }
 
 ::ng-deep textarea.questionError {
-    background-color: hsla(0, 100%, 70%, 0.8);
-    border: 1px solid hsl(0, 100%, 40%);
+    //background-color: hsla(0, 100%, 70%, 0.8);
+    //border: 1px solid hsl(0, 100%, 40%);
 }
 
 ::ng-deep textarea.MultipleChoiceInput.questionError {
-    background-color: hsla(0, 100%, 70%, 0.8);
+    //background-color: hsla(0, 100%, 70%, 0.8);
     //border: 1px solid hsl(0, 100%, 40%);
 }
 
 ::ng-deep input.YesOrNoInput {
     //color: hsl(0, 0%, 0%);
-    pointer-events:none;
+    //pointer-events:none;
     //border: transparent;
-    width: 50px
+    //width: 50px
 }
 
 ::ng-deep input.goToInput {
-    width: 200px;
+    //width: 200px;
 }
 
 /********RANGE QUESTION*********/
 
 ::ng-deep input.RangeAnswerField {
     //color: hsl(180, 100%, 32%);
-    width: 30px;
+    //width: 30px;
     //margin: 0 10px;
-    text-align: center
+    //text-align: center
 }
 
 ::ng-deep div.MultipleChoiceBubble, ::ng-deep div.MultipleSelectionBubble, ::ng-deep div.removableAnswer,
 ::ng-deep div.rangeAnswer {
-    display: inline-block;
+    //display: inline-block;
     //border: 1px solid hsl(0, 0%, 0%);
-    width: 15px;
+    //width: 15px;
     //height: 15px;
     //padding: 10px;
     //border-radius: 20px;
     //margin: 7px 7px 7px 0;
-    cursor: default;
+    //cursor: default;
 }
 
 ::ng-deep div.rangeAnswer {
-    position: relative;
+    //position: relative;
     //color: grey;
     //margin: 5px 20px;
 }
@@ -592,14 +587,14 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep p.rangeAnswerDoubleDigit {
-    top: 10px;
-    left: 8px;
-    position: absolute;
+    //top: 10px;
+    //left: 8px;
+    //position: absolute;
     //margin-right: 3px;
 }
 
 ::ng-deep div.removableAnswer {
-    cursor: pointer;
+    //cursor: pointer;
 }
 
 ::ng-deep div.MultipleSelectionBubble {
@@ -607,61 +602,64 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.selected {
-    background-color: hsl(0, 100%, 40%);
+    //background-color: hsl(0, 100%, 40%);
 }
+
 /******INPUT FIELDS ********/
 
 ::ng-deep input.numberField {
+    // TBD.
 }
 
 /******QUESTION OPTIONS/MODE ********/
 
 ::ng-deep div.modeSelector, ::ng-deep div.multiTextModeSelector {
     //background-color: hsl(0, 0% ,100%);
-    z-index: 100;
-    position: absolute;
-    right: 20px;
-    top: 22px;
+    //z-index: 100;
+    //position: absolute;
+    //right: 20px;
+    //top: 22px;
     //border-radius: 5px;
 }
 
 ::ng-deep .subQuestion div.modeSelector {
+    // TBD.
 }
 
 ::ng-deep div.multiTextModeSelector {
-    top: 238px;
-    right: unset;
-    left: 40px;
+    //top: 238px;
+    //right: unset;
+    //left: 40px;
 }
 
 ::ng-deep div.multiTextField div.modeSelector {
-    right: unset;
-    left: 50px;
+    //right: unset;
+    //left: 50px;
 }
 
 ::ng-deep .multiText  div.optionsWrapper {
-    text-align: right;
+    //text-align: right;
     //padding: 10px 10px 20px 10px;
 }
 
 ::ng-deep .viewMode div.optionsWrapper {
     //padding: 10px !important;
-    text-align: left;
+    //text-align: left;
 }
 
 ::ng-deep div.multiTextField div.modeSelector {
-    top: 81px;
+    //top: 81px;
 }
 
 ::ng-deep div.buttonRemoveField {
-    pointer-events: all;
-    cursor: pointer;
-    position: absolute;
-    top: 80px;
-    left: 2px;
-    display: inline-block;
+    //pointer-events: all;
+    //cursor: pointer;
+    //position: absolute;
+    //top: 80px;
+    //left: 2px;
+    //display: inline-block;
     //border: 1px solid hsl(0, 0%, 0%);
-    width: 15px;
+    //width: 15px;
     //height: 15px;
     //padding: 10px;
     //border-radius: 20px;
@@ -669,10 +667,10 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.questionModeWrapper div.modeSelector {
-    display: inline-block;
-    position: relative;
-    right: unset;
-    top: unset;
+    //display: inline-block;
+    //position: relative;
+    //right: unset;
+    //top: unset;
 }
 
 ::ng-deep div.modeOption:first-child {
@@ -688,18 +686,18 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.modeOption:hover {
-    background-color: hsl(0, 0%, 90%);
+    //background-color: hsl(0, 0%, 90%);
 }
 
 
 ::ng-deep div.modeOption {
     //border-bottom: 1px solid hsl(0, 0%, 70%);
     //border-top: 1px solid hsl(0, 0%, 70%);
-    position: relative;
-    display: inline-block;
+    //position: relative;
+    //display: inline-block;
     //color: hsl(0, 0%, 0%);
-    cursor: pointer;
-    pointer-events: all;
+    //cursor: pointer;
+    //pointer-events: all;
     //font-weight: bold;
     //padding: 15px 20px;
     //font-size: 18px;
@@ -716,13 +714,13 @@ textarea.instructionField, textarea.optionField {
 /******MULTIPLE CHOICE ANSWER DETAILS********/
 
 ::ng-deep div.questionModeWrapper {
-    width: 100%;
-    text-align: center;
+    //width: 100%;
+    //text-align: center;
     //padding: 10px 10px 30px 10px;
 }
 
 ::ng-deep div.declineButton {
-
+    // TBD
 }
 
 ::ng-deep div.declineOption {
@@ -732,15 +730,15 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.declineViewModeOption {
-
+    // TBD
 }
 
 ::ng-deep div.addTextFieldWrapper {
     //height: 70px;
-    cursor: pointer;
-    pointer-events: all;
-    display: inline-block;
-    width: auto;
+    //cursor: pointer;
+    //pointer-events: all;
+    //display: inline-block;
+    //width: auto;
 }
 
 ::ng-deep div.addTextFieldWrapper {
@@ -748,41 +746,39 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.addAnswerRow div.MultipleChoiceAnswerField{
-    width: auto;
-    pointer-events: all;
-    cursor: pointer;
+    //width: auto;
+    //pointer-events: all;
+    //cursor: pointer;
 }
 
 ::ng-deep div.multiChoiceDecline div.buttonAddAnswer {
-    top: 30px;
+    //top: 30px;
 }
 
 ::ng-deep div.declineOption input.answerVariableName {
     //margin-top: 2px;
 }
 
-
 ::ng-deep p.addNewOptionLabel {
-    text-align: left;
+    //text-align: left;
     //font-size: 14pt;
     //line-height: 52px;
-    display: inline-block;
+    //display: inline-block;
     //color: hsl(0, 0%, 0%);
-    cursor: pointer;
+    //cursor: pointer;
 }
 
 ::ng-deep input.answerVariableName, ::ng-deep input.questionValueField, ::ng-deep input.optionValueField {
     //font-size: 14px;
     //color: hsl(180, 100%, 32%);
-    pointer-events: all;
-    cursor: text;
+    //pointer-events: all;
+    //cursor: text;
     //border: none;
     //border-radius: 5px;
-    min-width: 250px;
-    width: auto;
+    //min-width: 250px;
+    //width: auto;
 }
 
-
 /*QUESTION OPTION DIVS*/
 
 /*question classes pertain to question.label*/
@@ -790,13 +786,14 @@ textarea.instructionField, textarea.optionField {
 /*value classes pertain to value property for either questions or options*/
 
 ::ng-deep div.questionOptionsWrapper {
+    // TBD
 }
 
 ::ng-deep div.questionValueWrapper, ::ng-deep div.optionValueWrapper {
-    display: block;
-    position: relative;
+    //display: block;
+    //position: relative;
     //margin: 5px 0;
-    text-align: left;
+    //text-align: left;
 }
 
 ::ng-deep div.optionValueWrapper {
@@ -808,12 +805,12 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.questionOption {
-    position: relative;
-    text-align: left;
-    width: 100%;
+    //position: relative;
+    //text-align: left;
+    //width: 100%;
     //color: hsl(0, 100%, 100%);
-    display: block;
-    box-sizing: border-box;
+    //display: block;
+    //box-sizing: border-box;
     //padding: 10px;
 }
 
@@ -822,15 +819,15 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .question-view-mode div.questionOption {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 100%;
+    //display: flex;
+    //flex-direction: row;
+    //flex-wrap: wrap;
+    //width: 100%;
     //padding: 10px 0;
 }
 
 ::ng-deep .question-view-mode .questionnaireQuestion {
-    left: unset;
+    //left: unset;
     //padding: 0px 10px;
     //display: flex;
     //flex: 1;
@@ -838,36 +835,36 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .question-view-mode td {
-    display: table-cell;
-    vertical-align: middle;
+    //display: table-cell;
+    //vertical-align: middle;
 }
 
 ::ng-deep .question-view-mode .questionOptionShape {
     //margin: 0;
-    display: flex;
-    top: unset;
+    //display: flex;
+    //top: unset;
     position: relative;
 }
 
 ::ng-deep div.questionOptionWrapper, ::ng-deep div.declineOptionWrapper {
-    position: relative;
-    display: block;
-    width: 100%;
-    text-align: left;
+    //position: relative;
+    //display: block;
+    //width: 100%;
+    //text-align: left;
 }
 
 ::ng-deep input.questionValueField, ::ng-deep input.optionValueField {
     //padding: 5px;
-    min-width: 250px;
+    //min-width: 250px;
 }
 
 ::ng-deep input.answerVariableName:focus, ::ng-deep input.questionValueField:focus, ::ng-deep input.optionValueField:focus {
-    outline: none;
-    box-shadow: 0px 0px 0px 2px hsl(195, 100%, 60%) !important;
+    //outline: none;
+    //box-shadow: 0px 0px 0px 2px hsl(195, 100%, 60%) !important;
 }
 
 ::ng-deep div.subQuestion {
-    width: calc(100% - 130px) !important;
+    //width: calc(100% - 130px) !important;
     //margin-left: 125px;
     //padding: 10px;
     //border-radius: 0px !important;
@@ -890,34 +887,34 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.buttonAddSubQuestionIcon {
-    width: 38px;
+    //width: 38px;
     //height: 38px;
     //padding: 10px;
-    border-radius: 20px;
-    position: absolute;
-    top: -1px;
-    box-sizing: border-box;
-    right: 0;
+    //border-radius: 20px;
+    //position: absolute;
+    //top: -1px;
+    //box-sizing: border-box;
+    //right: 0;
     //border: 1px solid hsl(0, 100%, 100%);
     //margin: 7px 10px;
-    text-align: center;
+    //text-align: center;
 }
 
 /*GO TO DETAILS*/
 
 ::ng-deep div.goToContainer {
-    background-color: hsl(0, 0%, 100%);
+    //background-color: hsl(0, 0%, 100%);
     //color: black;
     //font-size: 14pt;
     //margin: 0 20px;
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
+    //position: relative;
+    //display: inline-block;
+    //vertical-align: top;
     //height: auto;
-    box-sizing: border-box;
-    width: 110px;
-    cursor: pointer;
-    pointer-events: all;
+    //box-sizing: border-box;
+    //width: 110px;
+    //cursor: pointer;
+    //pointer-events: all;
 }
 
 ::ng-deep div.goToContainer.redText .buttonDropdown {
@@ -925,30 +922,30 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.goToContainer.redText svg {
-    fill:  hsl(0, 100%, 40%);
+    //fill:  hsl(0, 100%, 40%);
 }
 
 ::ng-deep div.goToMenuButton {
-    background-color: hsl(0, 0%, 100%);
+    //background-color: hsl(0, 0%, 100%);
     //color: black;
     //font-size: 14pt;
-    /*margin: 0 20px;*/
-    position: relative;
+    //margin: 0 20px;
+    //position: relative;
     //border: solid 1px hsl(0, 0%, 80%);
-    display: inline-block;
-    vertical-align: top;
+    //display: inline-block;
+    //vertical-align: top;
     //height: 52px;
     //border-radius: 4px;
-    box-sizing: border-box;
-    width: 110px;
+    //box-sizing: border-box;
+    //width: 110px;
     //padding: 10px;
-    cursor: pointer;
-    pointer-events: all;
-    flex: 0 1 auto;
+    //cursor: pointer;
+    //pointer-events: all;
+    //flex: 0 1 auto;
 }
 
 ::ng-deep div.goToContainer.redText p.menuButtonLabel {
-    font-weight: bolder;
+    //font-weight: bolder;
     //color: hsl(0, 100%, 40%);
 }
 
@@ -957,31 +954,31 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.goToMenuButton:hover {
-    background-color: hsl(0, 0%, 95%);
+    //background-color: hsl(0, 0%, 95%);
 }
 
 ::ng-deep p.menuButtonLabel, ::ng-deep p.section-goto-label {
-    text-align: center;
-    pointer-events: none;
+    //text-align: center;
+    //pointer-events: none;
     //color: black;
     //font-size: 14px;
-    width: 40px;
+    //width: 40px;
     //margin-right: 10px;
 }
 
 ::ng-deep .section-wrapper .goToContainer, ::ng-deep .section-wrapper .goToMenuButton {
-    width: auto !important;
-    min-width: 90px;
+    //width: auto !important;
+    //min-width: 90px;
 }
 
 ::ng-deep p.section-goto-label {
-    width: auto;
+    //width: auto;
 }
 
 ::ng-deep table.fullSize {
-    pointer-events: none;
-    height: 100%;
-    width: 100%;
+    //pointer-events: none;
+    //height: 100%;
+    //width: 100%;
 }
 
 ::ng-deep div.sectionMenuItem, ::ng-deep div.sectionMenuItemActive, ::ng-deep div.questionMenuItem {
@@ -990,85 +987,84 @@ textarea.instructionField, textarea.optionField {
     //border-radius: 5px;
     //padding: 12px;
     //line-height: 23px;
-    word-break: normal;
-    /*white-space: nowrap;*/
-    cursor: pointer;
+    //word-break: normal;
+    //white-space: nowrap;
+    //cursor: pointer;
 }
 
 ::ng-deep div.sectionMenuItem:hover, ::ng-deep div.questionMenuItem:hover {
-    background-color: hsl(0, 0%, 95%);
+    //background-color: hsl(0, 0%, 95%);
 }
 
 ::ng-deep div.goToDropDownMenu {
     //margin-top: 55px;
     //margin-bottom: 20px;
-    width: 100%;
-    left: -1px;
-    top: 0px;
-    z-index: 10000;
-    overflow-y: scroll;
+    //width: 100%;
+    //left: -1px;
+    //top: 0px;
+    //z-index: 10000;
+    //overflow-y: scroll;
     //min-height: 40px;
     //max-height: 40vh;
-    box-sizing: border-box;
-    opacity: 1;
-    display: none;
-    transition: top 0.5s ease-out;
-    position: absolute;
-    background-color: hsl(0, 0%, 100%);
+    //box-sizing: border-box;
+    //opacity: 1;
+    //display: none;
+    //transition: top 0.5s ease-out;
+    //position: absolute;
+    //background-color: hsl(0, 0%, 100%);
     //border-radius: 5px;
     //padding: 10px;
-    box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.35);
-    pointer-events: all;
-    cursor: default;
+    //box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.35);
+    //pointer-events: all;
+    //cursor: default;
 }
 
 ::ng-deep div.buttonAddSubQuestion, ::ng-deep div.buttonDeleteSubQuestion {
     //height: 20px;
-    width: 130px;
-    margin-left: 10px;
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    text-align: center;
+    //width: 130px;
+    //margin-left: 10px;
+    //position: relative;
+    //display: inline-block;
+    //vertical-align: top;
+    //text-align: center;
     //font-size: 14px;
-    line-height: 14px;
-    white-space: nowrap;
+    //line-height: 14px;
+    //white-space: nowrap;
     //padding: 15px;
-    border-radius: 5px;
-    overflow: hidden;
-    cursor: pointer;
-    pointer-events: all;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+    //border-radius: 5px;
+    //overflow: hidden;
+    //cursor: pointer;
+    //pointer-events: all;
+    //-webkit-touch-callout: none;
+    //-webkit-user-select: none;
+    //-moz-user-select: none;
+    //-ms-user-select: none;
+    //user-select: none;
     //color: hsl(0, 0%, 100%) !important;
-    background-color: hsl(195, 100%, 35%) !important;
+    //background-color: hsl(195, 100%, 35%) !important;
     //border: solid 1px hsl(195, 100%, 35%) !important;
 }
 
 ::ng-deep div.buttonDeleteSubQuestionIcon {
-    position: absolute;
-    top: 14px;
-    right: 20px;
-    height: 20px;
-    width: 20px;
+    //position: absolute;
+    //top: 14px;
+    //right: 20px;
+    //height: 20px;
+    //width: 20px;
 }
 
-
 ::ng-deep svg.buttonDeleteSubQuestionIcon {
-    height: 20px;
-    width: 20px;
-    fill: hsl(0, 100%, 40%) !important;
+    //height: 20px;
+    //width: 20px;
+    //fill: hsl(0, 100%, 40%) !important;
     //margin: 5px;
     //padding: 0;
 }
 
 ::ng-deep div.buttonDeleteSubQuestion {
     //border: solid 1px hsl(0, 0%, 80%) !important;
-    background-color: hsl(0, 0%, 100%) !important;
-    position: relative !important;
+    //background-color: hsl(0, 0%, 100%) !important;
+    //position: relative !important;
 }
 
 ::ng-deep div.buttonDeleteSubQuestion p {
@@ -1076,27 +1072,27 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.buttonDeleteSubQuestion:hover {
-    background-color: hsl(0, 0%, 95%) !important;
+    //background-color: hsl(0, 0%, 95%) !important;
 }
 
 ::ng-deep div.buttonAddSubQuestion:hover {
-    background-color: hsla(195, 100%, 35%, 0.9) !important
+    //background-color: hsla(195, 100%, 35%, 0.9) !important
 }
 
 /***************MATRIX QUESTION********/
 
 ::ng-deep .matrixOption div.MultipleChoiceBubble, ::ng-deep .matrixOption div.MultipleSelectionBubble {
-    display: inline-block;
+    //display: inline-block;
     //border: 1px solid hsl(0, 0%, 0%);
-    width: 15px;
+    //width: 15px;
     //height: 15px;
     //padding: 10px;
     //border-radius: 20px;
     //margin: 7px;
-    pointer-events: all;
-    cursor: pointer;
-    position: relative;
-    top: 3px;
+    //pointer-events: all;
+    //cursor: pointer;
+    //position: relative;
+    //top: 3px;
 }
 
 ::ng-deep .matrixOption > .MultipleChoiceAnswerField {
@@ -1104,7 +1100,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .matrixOption > .buttonMoveQuestionnaireOption {
-    top: 40px !important;
+    //top: 40px !important;
     //margin-left: 15px;
 }
 
@@ -1113,13 +1109,13 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .matrixOption svg {
-    top: 6px !important;
-    left: 5px !important;
+    //top: 6px !important;
+    //left: 5px !important;
 }
 
 ::ng-deep table.matrixQuestionTable {
-    overflow: scroll;
-    max-width: 100%;
+    //overflow: scroll;
+    //max-width: 100%;
 }
 
 ::ng-deep table.matrixQuestionTable td {
@@ -1127,14 +1123,14 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep td.matrixRow {
-    text-align: left;
+    //text-align: left;
 }
 
 ::ng-deep p.questionMatrixColumnLabel {
     //font-size: 13pt;
     //line-height: 125%;
     //color: hsl(0, 0%, 0%);
-    text-align: center;
+    //text-align: center;
     //padding: 0px 10px;
 }
 
@@ -1145,9 +1141,9 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.addItemRow {
-    pointer-events: all;
-    cursor: pointer;
-    display: inline-block;
+    //pointer-events: all;
+    //cursor: pointer;
+    //display: inline-block;
     //height: 40px;
 }
 
@@ -1160,7 +1156,7 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep td.spacer {
-    width: auto;
+    //width: auto;
     //color: white;
 }
 
@@ -1170,14 +1166,14 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.matrixOptionBubble, ::ng-deep div.matrixMultiOptionBubble {
-    display: inline-block;
+    //display: inline-block;
     //border: 1px solid hsl(0, 0%, 0%);
-    width: 15px;
+    //width: 15px;
     //height: 15px;
     //padding: 7px;
     //border-radius: 20px;
     //margin: 7px;
-    cursor: default;
+    //cursor: default;
 }
 
 ::ng-deep div.matrixMultiOptionBubble {
@@ -1197,16 +1193,15 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.variableOptionWrapper {
-    position: relative;
-    width: 100%;
+    //position: relative;
+    //width: 100%;
     //color: hsl(0, 100%, 100%);
-    display: block;
-    box-sizing: border-box;
+    //display: block;
+    //box-sizing: border-box;
     //padding: 10px;
     //margin: 10px 0px 0px 10px
 }
 
-
 /*************************** QUESTIONNAIRE VIEWER ITEMS *******************************/
 
 ::ng-deep p.ownerLabel {
@@ -1214,64 +1209,64 @@ textarea.instructionField, textarea.optionField {
     //line-height: 40px;
     //letter-spacing: 0;
     //color: hsl(195, 100%, 50%);
-    text-align: left;
+    //text-align: left;
     //font-family: "StandardFontBold", "Arial", sans-serif;
 }
 
 ::ng-deep p.questionnaireQuestion {
-    position: relative;
-    display: flex;
-    align-items: center;
+    //position: relative;
+    //display: flex;
+    //align-items: center;
     //min-height: 50px;
     //font-size: 16pt;
     //line-height: 135%;
     //color: hsl(0, 0%, 0%);
-    pointer-events: none;
+    //pointer-events: none;
     //padding: 0 5px;
 }
 
 ::ng-deep p.goto-label {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    font-style: italic;
+    //position: relative;
+    //display: inline-flex;
+    //align-items: center;
+    //font-style: italic;
     //min-height: 50px;
-    width: auto;
-    justify-content: flex-end;
+    //width: auto;
+    //justify-content: flex-end;
     //font-size: 16pt;
     //line-height: 135%;
     //color: hsl(0, 0%, 70%);
-    pointer-events: none;
+    //pointer-events: none;
     //margin-left: 50px;
-    white-space: nowrap;
+    //white-space: nowrap;
 }
 
 ::ng-deep .section-wrapper p.goto-label {
-    width: auto;
+    //width: auto;
     //margin: 0 2px;
 }
 
 ::ng-deep div.questionnaireSelector {
-    position: relative;
-    display: table-cell;
-    vertical-align: middle;
+    //position: relative;
+    //display: table-cell;
+    //vertical-align: middle;
     //font-family: "StandardFontRegular", "Arial", sans-serif;
 }
 
 ::ng-deep div.questionnaireOptions, ::ng-deep div.subQuestionOptions {
     //padding: 0px 15px;
-    text-align: left;
-    /*padding-left: 20px;*/
-    /*padding-bottom: 5px;*/
+    //text-align: left;
+    //padding-left: 20px;
+    //padding-bottom: 5px;
 }
 
 ::ng-deep div.questionnaireOption, ::ng-deep div.infoPanelQuestionnaireOption, ::ng-deep div.questionnaireSubOption {
-    position: relative;
-    min-height: 50px;
-    display: block;
+    //position: relative;
+    //min-height: 50px;
+    //display: block;
     //font-size: 14pt;
     //color: hsl(0, 0%, 20%);
-    vertical-align: middle;
+    //vertical-align: middle;
 }
 
 ::ng-deep div.questionnaireSubOption {
@@ -1280,55 +1275,54 @@ textarea.instructionField, textarea.optionField {
 
 ::ng-deep div.questionOption, ::ng-deep div.subQuestionOption {
     //padding: 10px;
-    display: block;
+    //display: block;
 }
 
 ::ng-deep div.questionOption.selected, ::ng-deep div.subQuestionOption.selected {
-    background-color: hsl(190, 100%, 40%) !important;
+    //background-color: hsl(190, 100%, 40%) !important;
     //border-radius: 5px;
 }
 
 ::ng-deep div.addOptionWrapper, ::ng-deep div.addDeclineOptionWrapper {
     //padding: 10px;
-    text-align: left;
-    width: auto;
-    pointer-events: all;
-    cursor: pointer;
-    position: relative;
+    //text-align: left;
+    //width: auto;
+    //pointer-events: all;
+    //cursor: pointer;
+    //position: relative;
 }
 
 ::ng-deep div.addDeclineOptionWrapper {
-    cursor: default;
+    //cursor: default;
 }
 
-
 /*DROP DOWN MENU VIEW FOR MULTIPLE CHOICE QUESTIONS*/
 
 ::ng-deep div.dropDownViewModeContainer {
-    position: relative;
-    display: block;
-    text-align: left;
+    //position: relative;
+    //display: block;
+    //text-align: left;
 }
 
 ::ng-deep div.dropDownViewQuestionContainer {
     //padding: 10px !important;
-    position: relative;
-    display: inline-block;
-    width: auto;
-    min-width: 400px;
+    //position: relative;
+    //display: inline-block;
+    //width: auto;
+    //min-width: 400px;
     //border: 1px solid hsl(0, 0%, 80%);
     //border-radius: 5px;
-    left: 0;
+    //left: 0;
 }
 
 ::ng-deep div.buttonQuestionnaireDropDown {
-    display: inline-block;
-    position: absolute;
-    top: 20px;
-    right: 20px;
-    cursor: default;
-    pointer-events: none;
-    width: 0;
+    //display: inline-block;
+    //position: absolute;
+    //top: 20px;
+    //right: 20px;
+    //cursor: default;
+    //pointer-events: none;
+    //width: 0;
     //height: 0;
     //border-left: 7px solid transparent;
     //border-right: 7px solid transparent;
@@ -1336,39 +1330,39 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep .question-view-mode div.div.buttonQuestionnaireDropDown {
-    display: none;
+    //display: none;
 }
 
 ::ng-deep div.questionnairePlaceholder {
     //padding: 0 10px;
     //border-radius: 5px;
     //border: 1px solid hsl(0, 0%, 80%);
-    position: relative;
+    //position: relative;
     //min-height: 50px;
-    min-width: 400px;
-    display: block;
+    //min-width: 400px;
+    //display: block;
     //font-size: 14pt;
     //color: hsl(0, 0%, 20%);
-    vertical-align: middle;
+    //vertical-align: middle;
     //margin-bottom: 10px;
 }
 
 ::ng-deep div.dropDownViewModeQuestion {
-    display: inline-block !important;
-    width: auto;
+    //display: inline-block !important;
+    //width: auto;
     //padding: 5px !important;
     //border-radius: 5px !important;
     //border:  1px solid hsl(0, 0%, 0%) !important;
 }
 
 ::ng-deep div.answerBubbleViewMode, ::ng-deep div.answerBubbleViewModeSelected, ::ng-deep div.questionOptionShape {
-    position: relative;
+    //position: relative;
     //line-height: 50px;
-    display: inline-block;
-    width: 24px;
+    //display: inline-block;
+    //width: 24px;
     //height: 24px;
     //margin-top: 13px;
-    //border: solid 1px hsl(0, 0%, 10%);
+    border: solid 1px hsl(0, 0%, 10%);
 }
 
 ::ng-deep .question-view-mode div.answerBubbleViewMode {
@@ -1376,21 +1370,20 @@ textarea.instructionField, textarea.optionField {
 }
 
 ::ng-deep div.questionOptionShape {
-    position: absolute;
-    display: inline-block;
+    //position: absolute;
+    //display: inline-block;
     border-radius: 15px;
-    //height: 28px;
+    height: 28px;
     width: 28px;
     //margin-right: 3px;
-    top: 50%;
+    //top: 50%;
     //margin-top: -14px
 }
 
 ::ng-deep div.answerBubbleViewModeSelected {
-    background-color: hsl(200, 100%, 55%);
+    //background-color: hsl(200, 100%, 55%);
 }
 
-
 /*MODIFIERS*/
 
 ::ng-deep textarea.longAnswer {
@@ -1405,51 +1398,46 @@ textarea.instructionField, textarea.optionField {
     //height: 52px !important;
 }
 
-
 /* QUESTION SELECTION CLASSES*/
 
 ::ng-deep .optionSelected {
     background-color: rgb(51, 204, 255) !important;
 }
 
-
 ::ng-deep div.hidden {
-    display: none;
+    //display: none;
 }
 
-/******************************************************************************/
-/********** Angular Render Layout & Design Updates for Questionnaire **********/
+/* Angular Render Layout & Design Updates for Questionnaire */
 
 // Fix modal layout for Questionnaire viewer.
-// Do we want to account for multiple screen render sizes??
-// Testing against 1080px, 1440px and 1920px width.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
 
 ::ng-deep body > modal-container > div.reveal {
-    z-index: 8000 !important;
-    margin: auto !important;
-    margin-left: 8% !important;
-    margin-right: auto !important;
-    padding: 2% !important;
-    //padding-left: 2%;
-    width: 57% !important;
-    line-height: auto !important;
+    margin: 0;
+    margin-left: 8%;
+    margin-right: auto;
+    padding: 2%;
+    width: 57%;
+    line-height: auto;
 }
 
 ::ng-deep body > modal-container > div > div > * {
-    margin: 10px !important;
-    padding: 20px !important;
-    line-height: auto !important;
+    margin: 10px;
+    padding: 20px;
+    line-height: auto;
 }
 
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions.alignLeft > tr > * {
-    vertical-align: middle !important;
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions.alignLeft > tr {
+    height: 30px;
+    vertical-align: middle;
 }
 
 ::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > tr > td:nth-child(1) > div.answerBubbleViewMode,
 ::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > tr > td:nth-child(1) > div.questionOptionShape,
 ::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > div > div > div > tr > td:nth-child(1) > div.questionOptionShape {
-    width: 15px !important;
-    height: 15px !important;
+    width: 15px;
+    height: 15px;
 }
 
 // Images.
@@ -1462,3 +1450,7 @@ textarea.instructionField, textarea.optionField {
 ::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
     border: 1px solid #000000;
 }
+
+body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions.alignLeft > tr > td > * {
+    vertical-align: middle; // !important;
+}
\ No newline at end of file

From 766f8c0c98b4dfdfe4c920038880530ac22b3278 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Tue, 21 Nov 2023 03:05:52 -0600
Subject: [PATCH 07/12] Removed all unused selectors from the .styl document
 for questionnaire viewer. Ready to rebuild the style back up now.

---
 .../modal-questionnaire-viewer.component.styl | 1368 +----------------
 1 file changed, 10 insertions(+), 1358 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 79dba268..52342e8b 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -19,354 +19,21 @@
 *    by accessing https://rapid.apl.uw.edu/rapp/ and retreiving the code as the code is not minimized.
 */
 
-::ng-deep p.questionnaireTitle {
-    //position: absolute;
-    //text-align: center;
-}
-
-::ng-deep p.questionLabel,::ng-deep p.headerLabel {
-    //text-align: left;
-    //font-size: 14pt;
-    //color: hsl(0, 0%, 100%);
-}
-
-::ng-deep p.headerLabel {
-    //color: hsl(0, 0%, 0%);
-    //display: block;
-    //text-align: center;
-    //font-size: 25px;
-    //line-height: 25px;
-    //margin: 20px 0 10px;
-    //font-weight: bold;
-}
-
-/***********************************************/
-
-/*INFO PAGE*/
-
-::ng-deep div.inlineContainer {
-    //width: auto;
-    //display: inline-block;
-}
-
-::ng-deep .disabled div.inlineContainer {
-    //pointer-events: none !important;
-    //cursor: default !important;
-}
-
-::ng-deep div.inlineContainer:hover div.radioButtonQuestionnaire,
-::ng-deep div.inlineContainer:hover div.radioButtonQuestionnaireSmall {
-    //background-color: hsl(0, 0%, 90%);
-}
-
-::ng-deep .disabled div.radioButtonActive {
-    //background-color: hsl(0, 0%, 50%) !important;
-}
-
-::ng-deep .disabled p.questionnaireInfoHeader {
-    //color: hsl(0, 0%, 50%) !important;
-}
-
-::ng-deep .disabled div.inlineContainer {
-    //pointer-events: none;
-    //cursor: default;
-}
-
-::ng-deep p.questionnaireInfo {
-    //margin-left: 20px;
-    //padding: 5px 0;
-    //position: relative;
-    //font-family: "StandardFontRegular", "Arial", sans-serif;
-    //font-size: 15pt;
-    //color: hsl(0, 0%, 10%);
-    //display: inline-block;
-    //line-height: 50px;
-}
-
-::ng-deep p.questionnaireInfoHeader {
-    //text-align: right;
-    //width: 210px;
-    //display: inline-block;
-    //line-height: 50px;
-    //vertical-align: top;
-    //font-family: "StandardFontBold", "Arial", sans-serif;
-    //font-size: 17pt;
-    //letter-spacing: 1px;
-    //padding: 5px 0px;
-    //color: hsl(0, 0%, 25%);
-}
-
-::ng-deep div.radioButtonQuestionnaire,::ng-deep div.radioButtonQuestionnaireSmall {
-    //cursor: pointer;
-    //display: inline-block;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //border-radius: 20px;
-    //width: 35px;
-    //height: 35px;
-    //margin: 12px 15px 0px 30px;
-}
-
-::ng-deep div.radioButtonQuestionnaireSmall {
-    //width: 25px;
-    //height: 25px;
-    //margin: 0px 8px 0px 20px;
-}
-
-::ng-deep div.radioButtonActive {
-    //background-color: hsl(195, 100%, 30%);
-}
-
-::ng-deep p.questionnaireDetailText {
-    //position: relative;
-    //display: inline-block;
-    //color: hsl(0, 0%, 0%);
-    //line-height: 60px;
-    //font-size: 15pt;
-    //vertical-align: top;
-}
-
-::ng-deep div.optionsWrapper {
-    //position: relative;
-    //text-align: left;
-    //display: block;
-    //padding: 20px 10px;
-}
-
-::ng-deep div.optionsWrapper p.redText {
-    //color:  hsl(0, 100%, 40%);
-}
-
-::ng-deep div.optionsWrapper p.boldText {
-    //font-weight: bold
-}
-
-::ng-deep div.optionsWrapper p.editFieldLabel {
-    //line-height: 27px;
-    //margin: 0;
-    //vertical-align: top;
-}
-
+/****** SELECTORS USED ACROSS QUESTIONNAIRE ******/
 ::ng-deep div.questionHeaderWrapper {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 
-::ng-deep p.questionNumber, ::ng-deep p.questionType {
-    //position: relative;
-    //text-align: left;
-    //color: hsl(150, 100%, 46%);
-    //padding: 20px 10px;
-    //top: 0;
-    //left: 0px;
-    //right: 50px;
-    //font-size: 25pt;
-    //font-weight: bold
-}
-
-::ng-deep .subQuestion p.questionNumber {
-    //font-size: 18pt;
-}
-
-::ng-deep p.questionType {
-    //font-size: 18pt;
-    //font-weight: bold;
-    //left: unset;
-    //right: 20px;
-    //top: 10px;
-}
-
-::ng-deep p.questionText, ::ng-deep p.headingText, ::ng-deep p.reorderQuestionText, ::ng-deep p.reorderSectionText, ::ng-deep p.instructionText {
-    //color: hsl(0, 0%, 0%);
-    //text-align: left;
-    //font-size: 17pt;
-    //letter-spacing: 1px;
-    //font-weight: bold;
-    //padding: 20px 5px;
-    //line-height: 130%;
-}
-
 ::ng-deep p.instructionText {
-    //color: hsl(0, 0%, 50%);
-}
-
-::ng-deep p.questionText {
-    //color: hsl(195, 100%, 30%);
-}
-
-::ng-deep p.instructionText {
-    //font-size: 15pt;
     font-style: italic;
 }
 
-::ng-deep p.questionText, ::ng-deep p.headingText, ::ng-deep p.instructionText {
-    //padding: 20px 10px !important;
-}
-
-::ng-deep p.reorderQuestionText {
-    //margin-left: 80px;
-    //font-size: 12pt;
-    //line-height: 130%;
-    //padding: 10px 10px 10px 5px;
-}
-
-::ng-deep p.reorderSectionText {
-    //margin-left: 40px;
-    //font-size: 16pt;
-    //color: hsl(195, 100%, 35%);
-    //padding: 0 40px 0px 5px;
-    //line-height: 55px;
-}
-
-::ng-deep div.originalQuestionPlaceholder {
-    //border-radius: 5px;
-    //background-color: hsl(195, 100%, 40%) !important;
-}
-
-::ng-deep .originalQuestionPlaceholder p.reorderSectionText {
-    //color: hsl(195, 100%, 90%);
-}
-
-::ng-deep div.reorderItemClone {
-    //position: absolute;
-    //display: block;
-    //height: 50px;
-    //background-color: hsl(195, 45%, 65%) !important;
-    //opacity: 0.4 !important;
-    //border-radius: 5px;
-}
-
-::ng-deep p.editFieldLabel, ::ng-deep p.requiredLabel, ::ng-deep p.declineLabel {
-    //position: relative;
-    //margin-bottom: 2px;
-    //text-align: left;
-    //font-size: 12pt;
-    //color: hsl(0, 0%, 25%);
-}
-
-::ng-deep p.editFieldLabel p.declineLabel {
-    //pointer-events: none;
-    //cursor: default;
-}
-
-::ng-deep p.declineLabel {
-    //margin-left: 45px;
-}
-
-/*********QUESTION TEXT AREAS/INPUTS**********/
-
-::ng-deep textarea.questionHeading, ::ng-deep textarea.questionField, ::ng-deep textarea.instructionField, ::ng-deep textarea.optionField {
-    //-webkit-appearance: none;
-    //-moz-appearance: none;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //border-radius: 5px;
-    //color: hsl(195, 100%, 30%);
-    //width: 100%;
-    //line-height: 135%;
-    //text-align: left;
-    //padding: 10px;
-    //height: 42px;
-    //min-height: 52px;
-    //overflow: hidden;
-    //resize: none;
-    //box-sizing: border-box;
-}
-
-textarea.shortAnswer, textarea.mediumAnswer, textarea.longAnswer,
-textarea.textFieldPlaceHolder, textarea.numberField, input.locationLatLon, textarea.locationAddress, textarea.questionField,
-textarea.instructionField, textarea.optionField {
-    //color: hsl(195, 100%, 30%);
-    //padding: 10px;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //border-radius: 5px;
-    //width: 100%;
-    //transition: width 0.3s linear;
-    //text-align: left;
-    //max-width: 100%;
-    //max-height: 100%;
-    //resize: none;
-    //box-sizing: border-box;
-}
-
-::ng-deep textarea.optionField {
-    //padding: 15px 10px;
-    //font-size: 16px;
-    //width: calc(100% - 367px);
-    /*max-width: 600px;*/
-    //min-width: 120px;
-    //max-height: none;
-}
-
-::ng-deep .question-edit-field-container textarea.optionField {
-    //width: calc(100% - 415px);
-}
-
-::ng-deep .question-edit-field-container input.optionValueField {
-    //margin-left: 50px;
-}
-
-::ng-deep .multi-select textarea.optionField {
-    //width: calc(100% - 261px);
-}
-
-
-::ng-deep .multi-select .declineOptionWrapper > textarea.optionField {
-    //width: calc(100% - 217px);
-}
-
-::ng-deep .declineOptionWrapper > textarea {
-    //margin-left: 45px;
-}
-
-::ng-deep .declineOption.subQuestionOption .removableAnswer {
-    //left: 0px !important;
-
-}
-
-::ng-deep .subQuestion .declineViewModeOption {
-    //padding: 0 !important;
-}
-
-::ng-deep .subQuestion textarea.optionField {
-    //width: calc(100% - 93px);
-}
-
 ::ng-deep textarea.instructionField {
     font-style: italic;
 }
 
-::ng-deep div.multiTextField {
-    //padding: 80px 0px 10px 0px !important;
-}
-
-::ng-deep div.multiTextField p.questionNumber {
-    //position: absolute;
-    //top: 10px;
-}
-
-::ng-deep .subQuestion p.questionText {
-    //font-size: 14pt;
-}
-
-::ng-deep input.locationLatLon {
-    //padding: 3px;
-    //margin: 20px 30px 20px 10px;
-    //background-color: hsl(0, 0%, 100%);
-    //pointer-events: none;
-    //max-width: 120px;
-    //display: inline-block;
-}
-
-::ng-deep textarea.locationAddress {
-    //background-color: hsl(0, 0%, 100%);
-    //pointer-events: none;
-    //display: block;
-    //height: 100px !important;
-    //width: 400px;
-}
-
-/************ LOCATION QUESTION MAP ************/
-
 ::ng-deep div.locationMapContainer .leaflet-control-container {
     display: none;
 }
@@ -378,1038 +45,25 @@ textarea.instructionField, textarea.optionField {
     height: 500px;
 }
 
-::ng-deep p.locationQuestionDetails {
-    //text-align: left;
-    //font-size: 13pt;
-    //letter-spacing: 1px;
-    //margin: 20px 0px;
-    //color: hsl(0, 0%, 25%);
-}
-
-::ng-deep div.mapSelectionIcon {
-    //z-index: 1000;
-    //top: 235px;
-    //left: 50%;
-    //margin-left: -15px;
-    //position: absolute;
-    //height: 30px;
-    //width: 30px;
-    //background-color: transparent;
-    //border: 2px solid hsl(0 , 0%, 100%);
-}
-
-::ng-deep div.mapContainer::-webkit-scrollbar {
-    //display: none !important;
-}
-
-::ng-deep div.mapCanvas::-webkit-scrollbar {
-    //display: none !important;
-}
-
-::ng-deep textarea.numberField {
-    //height: 52px;
-    //width: 300px;
-}
-
-::ng-deep input, ::ng-deep textarea {
-    //pointer-events: all;
-}
-
-::ng-deep input.shortAnswer, ::ng-deep input.Standard {
-    //color: hsl(195, 100%, 30%);
-    //padding: 10px;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //border-radius: 5px;
-    //width: 100%;
-    //transition: width 0.3s linear;
-    //text-align: left;
-    //max-width: 100%;
-    //max-height: 100%;
-    //resize: none;
-}
-
-::ng-deep textarea.textFieldPlaceHolder {
-    //height: 52px !important;
-    //overflow-y: hidden;
-    //background-color: hsl(0, 0%, 80%);
-    //border: solid 1px hsl(0, 0%, 50%);
-    //pointer-events: none;
-}
-
-::ng-deep textarea.questionHeading:focus, ::ng-deep textarea.shortAnswer:focus, ::ng-deep textarea.longAnswer:focus, ::ng-deep input.MultipleChoiceInput:focus, ::ng-deep textarea.MultipleChoiceInput:focus,
-::ng-deep input.RangeAnswerField:focus, ::ng-deep input.shortAnswer:focus, ::ng-deep textarea.mediumAnswer:focus, ::ng-deep textarea:focus {
-    //outline: none;
-    //box-shadow: 0px 0px 0px 4px hsl(195, 100%, 60%) !important;
-}
-
-::ng-deep div.wrapperNoPad > input.shortAnswer {
-    //margin: 5px 10px;
-    //width: calc(100% - 230px);
-}
-
-::ng-deep textarea.shortAnswer:focus {
-    //outline: none;
-}
-
-::ng-deep textarea.shortAnswer {
-    //height: 52px !important;
-}
-
-::ng-deep div.AddQuestionTemplate {
-    //color: hsl(0, 0%, 0%);
-    //height: 75px;
-    //box-sizing: border-box;
-}
-
-::ng-deep div.AddQuestionTemplate, ::ng-deep div.AddQuestionnaire, ::ng-deep div.AddQuestionnaireToDOM {
-    //min-height: 60px;
-    //margin: 0;
-    //transition: height 0.3s linear;
-}
-
-::ng-deep div.AddQuestionnaire {
-    //display: flex;
-    //justify-content: space-between;
-}
-
-::ng-deep div.AddQuestionnaireToDOM {
-    //padding-top: 20px;
-    //text-align: center;
-}
-
-::ng-deep div.AddQuestionnaireTemplate {
-    //color: hsl(0, 0%, 0%);
-    //z-index: 5000;
-    //display: none;
-    //width: 100%;
-    //height: 100%;
-    //background-color: hsl(0, 100%, 100%);
-    //border-radius: 5px;
-    //padding: 10px;
-}
-
-::ng-deep div.MultipleChoiceAnswerField {
-    //cursor: pointer;
-    //display: inline-block;
-    //min-width: 200px;
-    //width: 100%;
-    //height: 40px;
-    //margin: 0 20px;
-}
-
-::ng-deep input.MultipleChoiceInput, ::ng-deep input.RangeAnswerField, ::ng-deep input.YesOrNoInput, ::ng-deep input.goToInput, ::ng-deep textarea.MultipleChoiceInput {
-    //pointer-events: none;
-    //user-select: none;
-    //color: hsl(195, 100%, 30%);
-    //cursor: text;
-    //display: inline-block;
-    //width: 400px;
-    //height: 100%;
-    //padding: 5px;
-    //font-size: 16px;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //border-radius: 5px;
-}
-
-::ng-deep textarea.MultipleChoiceInput {
-    //-webkit-appearance: none;
-    //-moz-appearance: none;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //border-radius: 5px;
-    //color: hsl(195, 100%, 30%);
-    //width: 400px;
-    //text-align: left;
-    //padding: 10px;
-    //min-height: 52px;
-    //line-height: 175%;
-    //min-height: 52px;
-    //overflow: hidden;
-    //resize: none;
-    //box-sizing: border-box;
-}
-
-::ng-deep input.MultipleChoiceInput, ::ng-deep input.YesOrNoInput, ::ng-deep textarea.MultipleChoiceInput {
-    //width: calc(100% - 70px);
-    //max-width: 500px;
-}
-
-::ng-deep textarea.questionError {
-    //background-color: hsla(0, 100%, 70%, 0.8);
-    //border: 1px solid hsl(0, 100%, 40%);
-}
-
-::ng-deep textarea.MultipleChoiceInput.questionError {
-    //background-color: hsla(0, 100%, 70%, 0.8);
-    //border: 1px solid hsl(0, 100%, 40%);
-}
-
-::ng-deep input.YesOrNoInput {
-    //color: hsl(0, 0%, 0%);
-    //pointer-events:none;
-    //border: transparent;
-    //width: 50px
-}
-
-::ng-deep input.goToInput {
-    //width: 200px;
-}
-
-/********RANGE QUESTION*********/
-
-::ng-deep input.RangeAnswerField {
-    //color: hsl(180, 100%, 32%);
-    //width: 30px;
-    //margin: 0 10px;
-    //text-align: center
-}
-
-::ng-deep div.MultipleChoiceBubble, ::ng-deep div.MultipleSelectionBubble, ::ng-deep div.removableAnswer,
-::ng-deep div.rangeAnswer {
-    //display: inline-block;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //width: 15px;
-    //height: 15px;
-    //padding: 10px;
-    //border-radius: 20px;
-    //margin: 7px 7px 7px 0;
-    //cursor: default;
-}
-
-::ng-deep div.rangeAnswer {
-    //position: relative;
-    //color: grey;
-    //margin: 5px 20px;
-}
-
-::ng-deep p.rangeAnswer, ::ng-deep p.rangeAnswerDoubleDigit {
-    //font-size: 16px;
-    //color: hsl(0, 0%, 60%);
-}
-
-::ng-deep p.rangeAnswerDoubleDigit {
-    //top: 10px;
-    //left: 8px;
-    //position: absolute;
-    //margin-right: 3px;
-}
-
-::ng-deep div.removableAnswer {
-    //cursor: pointer;
-}
-
-::ng-deep div.MultipleSelectionBubble {
-    //border-radius: 5px !important;
-}
-
-::ng-deep div.selected {
-    //background-color: hsl(0, 100%, 40%);
-}
-
-/******INPUT FIELDS ********/
-
-::ng-deep input.numberField {
-    // TBD.
-}
-
-/******QUESTION OPTIONS/MODE ********/
-
-::ng-deep div.modeSelector, ::ng-deep div.multiTextModeSelector {
-    //background-color: hsl(0, 0% ,100%);
-    //z-index: 100;
-    //position: absolute;
-    //right: 20px;
-    //top: 22px;
-    //border-radius: 5px;
-}
-
-::ng-deep .subQuestion div.modeSelector {
-    // TBD.
-}
-
-::ng-deep div.multiTextModeSelector {
-    //top: 238px;
-    //right: unset;
-    //left: 40px;
-}
-
-::ng-deep div.multiTextField div.modeSelector {
-    //right: unset;
-    //left: 50px;
-}
-
-::ng-deep .multiText  div.optionsWrapper {
-    //text-align: right;
-    //padding: 10px 10px 20px 10px;
-}
-
-::ng-deep .viewMode div.optionsWrapper {
-    //padding: 10px !important;
-    //text-align: left;
-}
-
-::ng-deep div.multiTextField div.modeSelector {
-    //top: 81px;
-}
-
-::ng-deep div.buttonRemoveField {
-    //pointer-events: all;
-    //cursor: pointer;
-    //position: absolute;
-    //top: 80px;
-    //left: 2px;
-    //display: inline-block;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //width: 15px;
-    //height: 15px;
-    //padding: 10px;
-    //border-radius: 20px;
-    //margin: 7px;
-}
-
-::ng-deep div.questionModeWrapper div.modeSelector {
-    //display: inline-block;
-    //position: relative;
-    //right: unset;
-    //top: unset;
-}
-
-::ng-deep div.modeOption:first-child {
-    //border-left: 1px solid hsl(0, 0%, 70%);
-    //border-top-left-radius: 5px;
-    //border-bottom-left-radius: 5px;
-}
-
-::ng-deep div.modeOption:last-child {
-    //border-right: 1px solid hsl(0, 0%, 70%);
-    //border-top-right-radius: 5px;
-    //border-bottom-right-radius: 5px;
-}
-
-::ng-deep div.modeOption:hover {
-    //background-color: hsl(0, 0%, 90%);
-}
-
-
-::ng-deep div.modeOption {
-    //border-bottom: 1px solid hsl(0, 0%, 70%);
-    //border-top: 1px solid hsl(0, 0%, 70%);
-    //position: relative;
-    //display: inline-block;
-    //color: hsl(0, 0%, 0%);
-    //cursor: pointer;
-    //pointer-events: all;
-    //font-weight: bold;
-    //padding: 15px 20px;
-    //font-size: 18px;
-}
-
-/* MULTI TEXT*/
-
-
-::ng-deep .multiText p.questionText {
-    //padding: 10px;
-}
-
-
-/******MULTIPLE CHOICE ANSWER DETAILS********/
-
-::ng-deep div.questionModeWrapper {
-    //width: 100%;
-    //text-align: center;
-    //padding: 10px 10px 30px 10px;
-}
-
-::ng-deep div.declineButton {
-    // TBD
-}
-
-::ng-deep div.declineOption {
-    //padding-top: 0;
-    //padding-bottom: 0;
-    //height: 130px;
-}
-
-::ng-deep div.declineViewModeOption {
-    // TBD
-}
-
-::ng-deep div.addTextFieldWrapper {
-    //height: 70px;
-    //cursor: pointer;
-    //pointer-events: all;
-    //display: inline-block;
-    //width: auto;
-}
-
-::ng-deep div.addTextFieldWrapper {
-    //height: auto;
-}
-
-::ng-deep div.addAnswerRow div.MultipleChoiceAnswerField{
-    //width: auto;
-    //pointer-events: all;
-    //cursor: pointer;
-}
-
-::ng-deep div.multiChoiceDecline div.buttonAddAnswer {
-    //top: 30px;
-}
-
-::ng-deep div.declineOption input.answerVariableName {
-    //margin-top: 2px;
-}
-
-::ng-deep p.addNewOptionLabel {
-    //text-align: left;
-    //font-size: 14pt;
-    //line-height: 52px;
-    //display: inline-block;
-    //color: hsl(0, 0%, 0%);
-    //cursor: pointer;
-}
-
-::ng-deep input.answerVariableName, ::ng-deep input.questionValueField, ::ng-deep input.optionValueField {
-    //font-size: 14px;
-    //color: hsl(180, 100%, 32%);
-    //pointer-events: all;
-    //cursor: text;
-    //border: none;
-    //border-radius: 5px;
-    //min-width: 250px;
-    //width: auto;
-}
-
-/*QUESTION OPTION DIVS*/
-
-/*question classes pertain to question.label*/
-/*option classes pertain to question.options*/
-/*value classes pertain to value property for either questions or options*/
-
-::ng-deep div.questionOptionsWrapper {
-    // TBD
-}
-
-::ng-deep div.questionValueWrapper, ::ng-deep div.optionValueWrapper {
-    //display: block;
-    //position: relative;
-    //margin: 5px 0;
-    //text-align: left;
-}
-
-::ng-deep div.optionValueWrapper {
-    //margin: 5px 0px 5px 45px;
-}
-
-::ng-deep div.textOption div.optionValueWrapper {
-    //margin: 5px 0px;
-}
-
-::ng-deep div.questionOption {
-    //position: relative;
-    //text-align: left;
-    //width: 100%;
-    //color: hsl(0, 100%, 100%);
-    //display: block;
-    //box-sizing: border-box;
-    //padding: 10px;
-}
-
-::ng-deep tr.questionOption > td {
-    //padding:  10px 0;
-}
-
-::ng-deep .question-view-mode div.questionOption {
-    //display: flex;
-    //flex-direction: row;
-    //flex-wrap: wrap;
-    //width: 100%;
-    //padding: 10px 0;
-}
-
-::ng-deep .question-view-mode .questionnaireQuestion {
-    //left: unset;
-    //padding: 0px 10px;
-    //display: flex;
-    //flex: 1;
-    //max-width: calc(100% - 116px) !important;
-}
-
-::ng-deep .question-view-mode td {
-    //display: table-cell;
-    //vertical-align: middle;
-}
-
-::ng-deep .question-view-mode .questionOptionShape {
-    //margin: 0;
-    //display: flex;
-    //top: unset;
-    position: relative;
-}
-
-::ng-deep div.questionOptionWrapper, ::ng-deep div.declineOptionWrapper {
-    //position: relative;
-    //display: block;
-    //width: 100%;
-    //text-align: left;
-}
-
-::ng-deep input.questionValueField, ::ng-deep input.optionValueField {
-    //padding: 5px;
-    //min-width: 250px;
-}
-
-::ng-deep input.answerVariableName:focus, ::ng-deep input.questionValueField:focus, ::ng-deep input.optionValueField:focus {
-    //outline: none;
-    //box-shadow: 0px 0px 0px 2px hsl(195, 100%, 60%) !important;
-}
-
-::ng-deep div.subQuestion {
-    //width: calc(100% - 130px) !important;
-    //margin-left: 125px;
-    //padding: 10px;
-    //border-radius: 0px !important;
-    //border-left: 3px solid hsl(195, 100%, 35%);
-}
-
-::ng-deep div.questionnaireOptions div.subQuestion {
-    //border: none;
-}
-
-::ng-deep p.subQuestionLabel {
-    text-align: left;
-    //color: white;
-    //font-size: 14px;
-    //line-height: 22px;
-}
-
-::ng-deep div.buttonDeleteSubQuestion p.subQuestionLabel {
-    //color: hsl(0, 100%, 40%);
-}
-
-::ng-deep div.buttonAddSubQuestionIcon {
-    //width: 38px;
-    //height: 38px;
-    //padding: 10px;
-    //border-radius: 20px;
-    //position: absolute;
-    //top: -1px;
-    //box-sizing: border-box;
-    //right: 0;
-    //border: 1px solid hsl(0, 100%, 100%);
-    //margin: 7px 10px;
-    //text-align: center;
-}
-
-/*GO TO DETAILS*/
-
-::ng-deep div.goToContainer {
-    //background-color: hsl(0, 0%, 100%);
-    //color: black;
-    //font-size: 14pt;
-    //margin: 0 20px;
-    //position: relative;
-    //display: inline-block;
-    //vertical-align: top;
-    //height: auto;
-    //box-sizing: border-box;
-    //width: 110px;
-    //cursor: pointer;
-    //pointer-events: all;
-}
-
-::ng-deep div.goToContainer.redText .buttonDropdown {
-    //border-top-color:  hsl(0, 100%, 40%);
-}
-
-::ng-deep div.goToContainer.redText svg {
-    //fill:  hsl(0, 100%, 40%);
-}
-
-::ng-deep div.goToMenuButton {
-    //background-color: hsl(0, 0%, 100%);
-    //color: black;
-    //font-size: 14pt;
-    //margin: 0 20px;
-    //position: relative;
-    //border: solid 1px hsl(0, 0%, 80%);
-    //display: inline-block;
-    //vertical-align: top;
-    //height: 52px;
-    //border-radius: 4px;
-    //box-sizing: border-box;
-    //width: 110px;
-    //padding: 10px;
-    //cursor: pointer;
-    //pointer-events: all;
-    //flex: 0 1 auto;
-}
-
-::ng-deep div.goToContainer.redText p.menuButtonLabel {
-    //font-weight: bolder;
-    //color: hsl(0, 100%, 40%);
-}
-
-::ng-deep div.goToContainer.redText div.goToMenuButton {
-    //border: 1px solid hsl(0, 100%, 40%);
-}
-
-::ng-deep div.goToMenuButton:hover {
-    //background-color: hsl(0, 0%, 95%);
-}
-
-::ng-deep p.menuButtonLabel, ::ng-deep p.section-goto-label {
-    //text-align: center;
-    //pointer-events: none;
-    //color: black;
-    //font-size: 14px;
-    //width: 40px;
-    //margin-right: 10px;
-}
-
-::ng-deep .section-wrapper .goToContainer, ::ng-deep .section-wrapper .goToMenuButton {
-    //width: auto !important;
-    //min-width: 90px;
-}
-
-::ng-deep p.section-goto-label {
-    //width: auto;
-}
-
-::ng-deep table.fullSize {
-    //pointer-events: none;
-    //height: 100%;
-    //width: 100%;
-}
-
-::ng-deep div.sectionMenuItem, ::ng-deep div.sectionMenuItemActive, ::ng-deep div.questionMenuItem {
-    //font-size: 16px;
-    //color: hsl(0, 0%, 0%);
-    //border-radius: 5px;
-    //padding: 12px;
-    //line-height: 23px;
-    //word-break: normal;
-    //white-space: nowrap;
-    //cursor: pointer;
-}
-
-::ng-deep div.sectionMenuItem:hover, ::ng-deep div.questionMenuItem:hover {
-    //background-color: hsl(0, 0%, 95%);
-}
-
-::ng-deep div.goToDropDownMenu {
-    //margin-top: 55px;
-    //margin-bottom: 20px;
-    //width: 100%;
-    //left: -1px;
-    //top: 0px;
-    //z-index: 10000;
-    //overflow-y: scroll;
-    //min-height: 40px;
-    //max-height: 40vh;
-    //box-sizing: border-box;
-    //opacity: 1;
-    //display: none;
-    //transition: top 0.5s ease-out;
-    //position: absolute;
-    //background-color: hsl(0, 0%, 100%);
-    //border-radius: 5px;
-    //padding: 10px;
-    //box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.35);
-    //pointer-events: all;
-    //cursor: default;
-}
-
-::ng-deep div.buttonAddSubQuestion, ::ng-deep div.buttonDeleteSubQuestion {
-    //height: 20px;
-    //width: 130px;
-    //margin-left: 10px;
-    //position: relative;
-    //display: inline-block;
-    //vertical-align: top;
-    //text-align: center;
-    //font-size: 14px;
-    //line-height: 14px;
-    //white-space: nowrap;
-    //padding: 15px;
-    //border-radius: 5px;
-    //overflow: hidden;
-    //cursor: pointer;
-    //pointer-events: all;
-    //-webkit-touch-callout: none;
-    //-webkit-user-select: none;
-    //-moz-user-select: none;
-    //-ms-user-select: none;
-    //user-select: none;
-    //color: hsl(0, 0%, 100%) !important;
-    //background-color: hsl(195, 100%, 35%) !important;
-    //border: solid 1px hsl(195, 100%, 35%) !important;
-}
-
-::ng-deep div.buttonDeleteSubQuestionIcon {
-    //position: absolute;
-    //top: 14px;
-    //right: 20px;
-    //height: 20px;
-    //width: 20px;
-}
-
-::ng-deep svg.buttonDeleteSubQuestionIcon {
-    //height: 20px;
-    //width: 20px;
-    //fill: hsl(0, 100%, 40%) !important;
-    //margin: 5px;
-    //padding: 0;
-}
-
-::ng-deep div.buttonDeleteSubQuestion {
-    //border: solid 1px hsl(0, 0%, 80%) !important;
-    //background-color: hsl(0, 0%, 100%) !important;
-    //position: relative !important;
-}
-
-::ng-deep div.buttonDeleteSubQuestion p {
-    //color: black !important;
-}
-
-::ng-deep div.buttonDeleteSubQuestion:hover {
-    //background-color: hsl(0, 0%, 95%) !important;
-}
-
-::ng-deep div.buttonAddSubQuestion:hover {
-    //background-color: hsla(195, 100%, 35%, 0.9) !important
-}
-
-/***************MATRIX QUESTION********/
-
-::ng-deep .matrixOption div.MultipleChoiceBubble, ::ng-deep .matrixOption div.MultipleSelectionBubble {
-    //display: inline-block;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //width: 15px;
-    //height: 15px;
-    //padding: 10px;
-    //border-radius: 20px;
-    //margin: 7px;
-    //pointer-events: all;
-    //cursor: pointer;
-    //position: relative;
-    //top: 3px;
-}
-
-::ng-deep .matrixOption > .MultipleChoiceAnswerField {
-    //margin-left: 35px;
-}
-
-::ng-deep .matrixOption > .buttonMoveQuestionnaireOption {
-    //top: 40px !important;
-    //margin-left: 15px;
-}
-
-::ng-deep .matrixOption .answerVariableName {
-    //margin-left: 67px !important;
-}
-
-::ng-deep .matrixOption svg {
-    //top: 6px !important;
-    //left: 5px !important;
-}
-
-::ng-deep table.matrixQuestionTable {
-    //overflow: scroll;
-    //max-width: 100%;
-}
-
-::ng-deep table.matrixQuestionTable td {
-    //padding: 10px 5px;
-}
-
-::ng-deep td.matrixRow {
-    //text-align: left;
-}
-
-::ng-deep p.questionMatrixColumnLabel {
-    //font-size: 13pt;
-    //line-height: 125%;
-    //color: hsl(0, 0%, 0%);
-    //text-align: center;
-    //padding: 0px 10px;
-}
-
-::ng-deep p.questionMatrixRowLabel {
-    //font-size: 13pt;
-    //line-height: 125%;
-    //color: hsl(0, 0%, 0%);
-}
-
-::ng-deep div.addItemRow {
-    //pointer-events: all;
-    //cursor: pointer;
-    //display: inline-block;
-    //height: 40px;
-}
-
-::ng-deep table.matrixQuestionTable tr {
-    //border-top: 1px solid hsl(0, 0%, 90%);
-}
-
-::ng-deep table.matrixQuestionTable tr:first-child {
-    //border-top: none
-}
-
-::ng-deep td.spacer {
-    //width: auto;
-    //color: white;
-}
-
-::ng-deep p.matrixQuestionValue {
-    //color: black;
-    //font-size: 14pt;
-}
-
-::ng-deep div.matrixOptionBubble, ::ng-deep div.matrixMultiOptionBubble {
-    //display: inline-block;
-    //border: 1px solid hsl(0, 0%, 0%);
-    //width: 15px;
-    //height: 15px;
-    //padding: 7px;
-    //border-radius: 20px;
-    //margin: 7px;
-    //cursor: default;
-}
-
-::ng-deep div.matrixMultiOptionBubble {
-    //border-radius: 0px;
-}
-
-::ng-deep div.newRowWrapper .answerLabel, ::ng-deep div.newColumnWrapper .answerLabel {
-    //margin: 7px;
-}
-
-::ng-deep div.newRowWrapper, ::ng-deep div.newColumnWrapper {
-    //padding-bottom: 30px !important;
-}
-
-::ng-deep div.newColumnWrapper:last-child {
-    //padding-bottom: 5px;
-}
-
-::ng-deep div.variableOptionWrapper {
-    //position: relative;
-    //width: 100%;
-    //color: hsl(0, 100%, 100%);
-    //display: block;
-    //box-sizing: border-box;
-    //padding: 10px;
-    //margin: 10px 0px 0px 10px
-}
-
-/*************************** QUESTIONNAIRE VIEWER ITEMS *******************************/
-
-::ng-deep p.ownerLabel {
-    //font-size: 20pt;
-    //line-height: 40px;
-    //letter-spacing: 0;
-    //color: hsl(195, 100%, 50%);
-    //text-align: left;
-    //font-family: "StandardFontBold", "Arial", sans-serif;
-}
-
-::ng-deep p.questionnaireQuestion {
-    //position: relative;
-    //display: flex;
-    //align-items: center;
-    //min-height: 50px;
-    //font-size: 16pt;
-    //line-height: 135%;
-    //color: hsl(0, 0%, 0%);
-    //pointer-events: none;
-    //padding: 0 5px;
-}
-
-::ng-deep p.goto-label {
-    //position: relative;
-    //display: inline-flex;
-    //align-items: center;
-    //font-style: italic;
-    //min-height: 50px;
-    //width: auto;
-    //justify-content: flex-end;
-    //font-size: 16pt;
-    //line-height: 135%;
-    //color: hsl(0, 0%, 70%);
-    //pointer-events: none;
-    //margin-left: 50px;
-    //white-space: nowrap;
-}
-
-::ng-deep .section-wrapper p.goto-label {
-    //width: auto;
-    //margin: 0 2px;
-}
-
-::ng-deep div.questionnaireSelector {
-    //position: relative;
-    //display: table-cell;
-    //vertical-align: middle;
-    //font-family: "StandardFontRegular", "Arial", sans-serif;
-}
-
-::ng-deep div.questionnaireOptions, ::ng-deep div.subQuestionOptions {
-    //padding: 0px 15px;
-    //text-align: left;
-    //padding-left: 20px;
-    //padding-bottom: 5px;
-}
-
-::ng-deep div.questionnaireOption, ::ng-deep div.infoPanelQuestionnaireOption, ::ng-deep div.questionnaireSubOption {
-    //position: relative;
-    //min-height: 50px;
-    //display: block;
-    //font-size: 14pt;
-    //color: hsl(0, 0%, 20%);
-    //vertical-align: middle;
-}
-
-::ng-deep div.questionnaireSubOption {
-    //padding: 10px;
-}
-
-::ng-deep div.questionOption, ::ng-deep div.subQuestionOption {
-    //padding: 10px;
-    //display: block;
-}
-
-::ng-deep div.questionOption.selected, ::ng-deep div.subQuestionOption.selected {
-    //background-color: hsl(190, 100%, 40%) !important;
-    //border-radius: 5px;
-}
-
-::ng-deep div.addOptionWrapper, ::ng-deep div.addDeclineOptionWrapper {
-    //padding: 10px;
-    //text-align: left;
-    //width: auto;
-    //pointer-events: all;
-    //cursor: pointer;
-    //position: relative;
-}
-
-::ng-deep div.addDeclineOptionWrapper {
-    //cursor: default;
-}
-
-/*DROP DOWN MENU VIEW FOR MULTIPLE CHOICE QUESTIONS*/
-
-::ng-deep div.dropDownViewModeContainer {
-    //position: relative;
-    //display: block;
-    //text-align: left;
-}
-
-::ng-deep div.dropDownViewQuestionContainer {
-    //padding: 10px !important;
-    //position: relative;
-    //display: inline-block;
-    //width: auto;
-    //min-width: 400px;
-    //border: 1px solid hsl(0, 0%, 80%);
-    //border-radius: 5px;
-    //left: 0;
-}
-
-::ng-deep div.buttonQuestionnaireDropDown {
-    //display: inline-block;
-    //position: absolute;
-    //top: 20px;
-    //right: 20px;
-    //cursor: default;
-    //pointer-events: none;
-    //width: 0;
-    //height: 0;
-    //border-left: 7px solid transparent;
-    //border-right: 7px solid transparent;
-    //border-top: 10px solid hsl(0, 0%, 0%);
-}
-
-::ng-deep .question-view-mode div.div.buttonQuestionnaireDropDown {
-    //display: none;
-}
-
-::ng-deep div.questionnairePlaceholder {
-    //padding: 0 10px;
-    //border-radius: 5px;
-    //border: 1px solid hsl(0, 0%, 80%);
-    //position: relative;
-    //min-height: 50px;
-    //min-width: 400px;
-    //display: block;
-    //font-size: 14pt;
-    //color: hsl(0, 0%, 20%);
-    //vertical-align: middle;
-    //margin-bottom: 10px;
-}
-
-::ng-deep div.dropDownViewModeQuestion {
-    //display: inline-block !important;
-    //width: auto;
-    //padding: 5px !important;
-    //border-radius: 5px !important;
-    //border:  1px solid hsl(0, 0%, 0%) !important;
-}
-
-::ng-deep div.answerBubbleViewMode, ::ng-deep div.answerBubbleViewModeSelected, ::ng-deep div.questionOptionShape {
-    //position: relative;
-    //line-height: 50px;
-    //display: inline-block;
-    //width: 24px;
-    //height: 24px;
-    //margin-top: 13px;
+::ng-deep div.answerBubbleViewMode,
+::ng-deep div.answerBubbleViewModeSelected,
+::ng-deep div.questionOptionShape {
     border: solid 1px hsl(0, 0%, 10%);
 }
 
-::ng-deep .question-view-mode div.answerBubbleViewMode {
-    //margin: 0 !important;
-}
-
 ::ng-deep div.questionOptionShape {
-    //position: absolute;
-    //display: inline-block;
     border-radius: 15px;
     height: 28px;
     width: 28px;
-    //margin-right: 3px;
-    //top: 50%;
-    //margin-top: -14px
 }
 
-::ng-deep div.answerBubbleViewModeSelected {
-    //background-color: hsl(200, 100%, 55%);
-}
-
-/*MODIFIERS*/
-
-::ng-deep textarea.longAnswer {
-    //height: 160px !important;
-}
-
-::ng-deep textarea.mediumAnswer {
-    //height: 100px !important;
-}
-
-::ng-deep textarea.shortAnswer {
-    //height: 52px !important;
-}
-
-/* QUESTION SELECTION CLASSES*/
-
 ::ng-deep .optionSelected {
     background-color: rgb(51, 204, 255) !important;
 }
 
-::ng-deep div.hidden {
-    //display: none;
-}
-
-/* Angular Render Layout & Design Updates for Questionnaire */
+/****** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER ******/
 
+// NOV 2023 Redesign for Hazmapper Integration.
 // Fix modal layout for Questionnaire viewer.
 // Testing against 1080px, 1280px, 1440px and 1920px widths.
 
@@ -1428,7 +82,7 @@ textarea.instructionField, textarea.optionField {
     line-height: auto;
 }
 
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions.alignLeft > tr {
+::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions > tr {
     height: 30px;
     vertical-align: middle;
 }
@@ -1440,17 +94,15 @@ textarea.instructionField, textarea.optionField {
     height: 15px;
 }
 
-// Images.
 ::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
     margin-bottom: 10px;
 }
 
-// Images and Maps
 ::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.wrapper > div.locationMapContainer,
 ::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
     border: 1px solid #000000;
 }
 
-body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions.alignLeft > tr > td > * {
-    vertical-align: middle; // !important;
-}
\ No newline at end of file
+body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions > tr > * {
+    vertical-align: middle !important;
+}

From 881d423ca536f1324b611bb47bc8c2aaf29b65b4 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Wed, 22 Nov 2023 14:45:45 -0600
Subject: [PATCH 08/12] COmpleted intiial rebuild of the Questionnaire viewer
 styles to integrate with the Hazmapper design aesthetic. Still working on a
 few question types - ranged options specifically - but otherwise clean layout
 now.

---
 .../modal-questionnaire-viewer.component.styl | 150 +++++++++++++-----
 1 file changed, 106 insertions(+), 44 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 52342e8b..a9601d17 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -19,30 +19,88 @@
 *    by accessing https://rapid.apl.uw.edu/rapp/ and retreiving the code as the code is not minimized.
 */
 
-/****** SELECTORS USED ACROSS QUESTIONNAIRE ******/
+/****** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER ******/
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal {
+    margin: 0;
+    margin-left: 8%;
+    margin-right: auto;
+    padding: 2%;
+    width: 57%;
+}
+
+::ng-deep body > modal-container > div.reveal * {
+    margin: 0;
+    padding: 0;
+    line-height: auto;
+}
+
+::ng-deep div.questionWrapper {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important;
+    border-top: 1px solid #333333;
+}
+
 ::ng-deep div.questionHeaderWrapper {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    padding-top: 10px !important;
 }
 
-::ng-deep p.instructionText {
+::ng-deep p.questionNumber {
+    font-weight: bold;
+    font-size: 1.2rem;
+}
+
+::ng-deep p.questionType {
     font-style: italic;
+    font-size: 0.8rem;
+    color: #666666;
 }
 
-::ng-deep textarea.instructionField {
+::ng-deep p.questionType:before {
+    content:"Question Type: ";
+}
+
+::ng-deep p.editFieldLabel {
+    font-size: 0.8rem;
+    color: #666666;
+}
+
+::ng-deep p.headingText {
+    margin-top: 6px !important;
+    font-weight: bold;
+}
+
+::ng-deep p.questionText {
+    margin-top: 4px !important;
+}
+
+::ng-deep p.instructionText {
     font-style: italic;
+    font-size: 0.9rem;
+    margin-top: 6px !important;
+    margin-left: 10px !important;
 }
 
-::ng-deep div.locationMapContainer .leaflet-control-container {
-    display: none;
+// On the fence between labelling this vs hiding it.
+::ng-deep p.instructionText:before {
+    content:"Instructions: ";
 }
 
-::ng-deep div.locationMapContainer {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 500px;
+::ng-deep div.dropDownViewModeContainer {
+    margin-top: 10px !important;
+    margin-left: 20px !important;
+}
+
+::ng-deep textarea.instructionField {
+    font-style: italic;
 }
 
 ::ng-deep div.answerBubbleViewMode,
@@ -51,58 +109,62 @@
     border: solid 1px hsl(0, 0%, 10%);
 }
 
+::ng-deep div.answerBubbleViewMode,
+::ng-deep div.questionOptionShape {
+    margin-right: 4px !important;
+    height: 15px;
+    width: 15px;
+}
+
 ::ng-deep div.questionOptionShape {
-    border-radius: 15px;
-    height: 28px;
-    width: 28px;
+    border-radius: 50%;
 }
 
-::ng-deep .optionSelected {
+::ng-deep .optionSelected,
+::ng-deep .answerBubbleViewModeSelected {
     background-color: rgb(51, 204, 255) !important;
 }
 
-/****** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER ******/
+::ng-deep .questionnaireQuestion {
+    margin-top: 2px !important;
+}
 
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
+::ng-deep div.buttonDecline {
+    display: none;
+    font-style: italic;
+    font-size: 0.9rem;
+    font-color: #660000 !important;
+    margin-top: 6px !important;
+    margin-left: 4px !important;
+}
 
-::ng-deep body > modal-container > div.reveal {
-    margin: 0;
-    margin-left: 8%;
-    margin-right: auto;
-    padding: 2%;
-    width: 57%;
-    line-height: auto;
+::ng-deep div.locationMapContainer .leaflet-control-container {
+    display: none;
 }
 
-::ng-deep body > modal-container > div > div > * {
-    margin: 10px;
-    padding: 20px;
-    line-height: auto;
+::ng-deep div.locationMapContainer {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 500px;
 }
 
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions > tr {
-    height: 30px;
-    vertical-align: middle;
+::ng-deep p.locationQuestionDetails {
+    font-weight: bold;
 }
 
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > tr > td:nth-child(1) > div.answerBubbleViewMode,
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > tr > td:nth-child(1) > div.questionOptionShape,
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div > div > div > div > tr > td:nth-child(1) > div.questionOptionShape {
-    width: 15px;
-    height: 15px;
+::ng-deep textarea.locationAddress {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 80px;
 }
 
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
+::ng-deep app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
     margin-bottom: 10px;
 }
 
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.wrapper > div.locationMapContainer,
-::ng-deep body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
+::ng-deep div.locationMapContainer,
+::ng-deep img {
     border: 1px solid #000000;
 }
-
-body > modal-container > div > div > app-modal-questionnaire-viewer > div.view-only-questionnaire-container > div > div.dropDownViewModeContainer > div.questionnaireOptions > tr > * {
-    vertical-align: middle !important;
-}

From 81b6d7f56a2b5979e96a3b0d777f4b3bc010760e Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Wed, 22 Nov 2023 15:29:33 -0600
Subject: [PATCH 09/12] Added styling for the rangeAnswer elements. None of the
 questionnaire content indicates a selected state so I set a value anyway in
 case we update the view code to include that attribute.

---
 .../modal-questionnaire-viewer.component.styl | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index a9601d17..166afca1 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -89,7 +89,6 @@
     margin-left: 10px !important;
 }
 
-// On the fence between labelling this vs hiding it.
 ::ng-deep p.instructionText:before {
     content:"Instructions: ";
 }
@@ -129,6 +128,29 @@
     margin-top: 2px !important;
 }
 
+::ng-deep input.RangeAnswerField {
+    color: hsl(180, 100%, 32%);
+    width: 30px;
+    margin: 0 10px;
+    text-align: center
+}
+
+::ng-deep .rangeAnswers {
+    margin-left: 20px !important;
+}
+
+::ng-deep p.rangeAnswer,
+::ng-deep p.rangeAnswerDoubleDigit {
+    margin: 0px 10px 0px !important;
+    padding: 0px 10px 0px !important;
+}
+
+::ng-deep p.rangeAnswer.selected,
+::ng-deep p.rangeAnswerDoubleDigit.selected {
+    border: 3px solid #1779ba;
+    border-radius: 50%;
+}
+
 ::ng-deep div.buttonDecline {
     display: none;
     font-style: italic;

From 1182942a90f65bbb85a6816696d8b4c31621cd59 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Wed, 29 Nov 2023 15:57:47 -0600
Subject: [PATCH 10/12] Change sthe scope of image selectors in the
 quesitonnaire to only style images embedded within the quesitonnaire modal.
 Added support for rangeSelect quesitons and for matrixTable question styling.
 Adjusted overall font sizes and layout for better legibility an duse of
 white-space.

---
 .../modal-questionnaire-viewer.component.styl | 404 +++++++++++-------
 1 file changed, 239 insertions(+), 165 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 166afca1..7426a703 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -19,174 +19,248 @@
 *    by accessing https://rapid.apl.uw.edu/rapp/ and retreiving the code as the code is not minimized.
 */
 
-/****** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER ******/
+//***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
 
 // NOV 2023 Redesign for Hazmapper Integration.
 // Fix modal layout for Questionnaire viewer.
 // Testing against 1080px, 1280px, 1440px and 1920px widths.
 
 // Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal {
-    margin: 0;
-    margin-left: 8%;
-    margin-right: auto;
-    padding: 2%;
-    width: 57%;
-}
-
-::ng-deep body > modal-container > div.reveal * {
-    margin: 0;
-    padding: 0;
-    line-height: auto;
-}
-
-::ng-deep div.questionWrapper {
-    margin-top: 10px !important;
-    margin-bottom: 10px !important;
-    border-top: 1px solid #333333;
-}
-
-::ng-deep div.questionHeaderWrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-top: 10px !important;
-}
-
-::ng-deep p.questionNumber {
-    font-weight: bold;
-    font-size: 1.2rem;
-}
-
-::ng-deep p.questionType {
-    font-style: italic;
-    font-size: 0.8rem;
-    color: #666666;
-}
-
-::ng-deep p.questionType:before {
-    content:"Question Type: ";
-}
-
-::ng-deep p.editFieldLabel {
-    font-size: 0.8rem;
-    color: #666666;
-}
-
-::ng-deep p.headingText {
-    margin-top: 6px !important;
-    font-weight: bold;
-}
-
-::ng-deep p.questionText {
-    margin-top: 4px !important;
-}
-
-::ng-deep p.instructionText {
-    font-style: italic;
-    font-size: 0.9rem;
-    margin-top: 6px !important;
-    margin-left: 10px !important;
-}
-
-::ng-deep p.instructionText:before {
-    content:"Instructions: ";
-}
-
-::ng-deep div.dropDownViewModeContainer {
-    margin-top: 10px !important;
-    margin-left: 20px !important;
-}
-
-::ng-deep textarea.instructionField {
-    font-style: italic;
-}
-
-::ng-deep div.answerBubbleViewMode,
-::ng-deep div.answerBubbleViewModeSelected,
-::ng-deep div.questionOptionShape {
-    border: solid 1px hsl(0, 0%, 10%);
-}
-
-::ng-deep div.answerBubbleViewMode,
-::ng-deep div.questionOptionShape {
-    margin-right: 4px !important;
-    height: 15px;
-    width: 15px;
-}
-
-::ng-deep div.questionOptionShape {
-    border-radius: 50%;
-}
-
-::ng-deep .optionSelected,
-::ng-deep .answerBubbleViewModeSelected {
-    background-color: rgb(51, 204, 255) !important;
-}
-
-::ng-deep .questionnaireQuestion {
-    margin-top: 2px !important;
-}
-
-::ng-deep input.RangeAnswerField {
-    color: hsl(180, 100%, 32%);
-    width: 30px;
-    margin: 0 10px;
-    text-align: center
-}
-
-::ng-deep .rangeAnswers {
-    margin-left: 20px !important;
-}
-
-::ng-deep p.rangeAnswer,
-::ng-deep p.rangeAnswerDoubleDigit {
-    margin: 0px 10px 0px !important;
-    padding: 0px 10px 0px !important;
-}
-
-::ng-deep p.rangeAnswer.selected,
-::ng-deep p.rangeAnswerDoubleDigit.selected {
-    border: 3px solid #1779ba;
-    border-radius: 50%;
-}
-
-::ng-deep div.buttonDecline {
-    display: none;
-    font-style: italic;
-    font-size: 0.9rem;
-    font-color: #660000 !important;
-    margin-top: 6px !important;
-    margin-left: 4px !important;
-}
-
-::ng-deep div.locationMapContainer .leaflet-control-container {
-    display: none;
-}
-
-::ng-deep div.locationMapContainer {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 500px;
-}
-
-::ng-deep p.locationQuestionDetails {
-    font-weight: bold;
-}
-
-::ng-deep textarea.locationAddress {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 80px;
-}
-
-::ng-deep app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img {
-    margin-bottom: 10px;
-}
-
-::ng-deep div.locationMapContainer,
-::ng-deep img {
-    border: 1px solid #000000;
-}
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+::ng-deep div.dropDownViewModeContainer 
+    margin-left 20px !important
+    margin-top 10px !important
+
+
+::ng-deep textarea.instructionField 
+    font-style italic
+
+
+::ng-deep div.answerBubbleViewMode
+::ng-deep div.answerBubbleViewModeSelected
+::ng-deep div.questionOptionShape 
+::ng-deep div.matrixOptionBubble.optionSelected 
+    border solid 1px hsl(0, 0%, 10%)
+
+
+::ng-deep div.answerBubbleViewMode
+::ng-deep div.questionOptionShape 
+::ng-deep div.matrixOptionBubble.optionSelected 
+    height 0.5rem
+    margin-right 4px !important
+    width 0.5rem
+
+
+::ng-deep div.questionOptionShape 
+    border-radius 50%
+
+
+::ng-deep .optionSelected
+::ng-deep .answerBubbleViewModeSelected 
+    background-color rgb(51, 204, 255) !important
+
+
+::ng-deep .questionnaireQuestion 
+    margin-top 2px !important
+
+
+::ng-deep input.RangeAnswerField 
+    color hsl(180, 100%, 32%)
+    margin 0 10px
+    text-align center
+    width 30px
+
+
+::ng-deep .rangeAnswers 
+    margin-left 20px !important
+
+
+::ng-deep p.rangeAnswer
+::ng-deep p.rangeAnswerDoubleDigit
+    font-weight bold
+    margin 2px 4px !important
+    padding 0 5px 2px 3px !important
+
+
+::ng-deep p.rangeAnswer.selected
+::ng-deep p.rangeAnswerDoubleDigit.selected 
+    border 2px solid #1779ba
+    border-radius 50%
+
+
+::ng-deep p.questionMatrixColumnLabel 
+    font-weight bold
+    text-decoration underline
+
+
+::ng-deep table.matrixQuestionTable > tr 
+    margin-bottom 3px !important
+
+
+::ng-deep table.matrixQuestionTable > tr:not(:first-child) 
+    border-bottom 1px solid #dedede
+
+
+::ng-deep td.spacer 
+    visibility: hidden
+
+
+::ng-deep div.buttonDecline 
+    display none
+    font-color #660000 !important
+    font-size 0.9rem
+    font-style italic    
+    margin-left 4px !important
+    margin-top 6px !important
+
+
+::ng-deep div.locationMapContainer .leaflet-control-container 
+    display none
+
+
+::ng-deep div.locationMapContainer 
+    display block
+    height 500px
+    position relative
+    width 100%
+
+
+::ng-deep p.locationQuestionDetails 
+    font-weight bold
+    margin-bottom 5px !important
+    margin-left 10px !important
+    margin-top 5px !important
+
+
+::ng-deep input.locationLatLon
+    margin-left 10px !important
+
+
+::ng-deep textarea.locationAddress 
+    display block
+    height auto
+    margin-bottom 5px !important
+    margin-left 10px !important
+    margin-top 5px !important
+    position relative
+    width 100%
+
+
+::ng-deep div.locationMapContainer
+::ng-deep app-modal-questionnaire-viewer > div.view-only-questionnaire-container > img
+    border 1px solid #777777
+    margin-top 5px !important
+
+
+::ng-deep p.blackText
+    font-weight bold
+    margin-left 10px !important
+    margin-top 10px !important
+

From f33b35dce3835898bb187fc5eb8ad113b28c3949 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Wed, 29 Nov 2023 15:59:38 -0600
Subject: [PATCH 11/12] Ran linting on the css.

---
 .../modal-questionnaire-viewer.component.styl | 7707 ++++++++++++++++-
 1 file changed, 7704 insertions(+), 3 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 7426a703..2a53eb6e 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -19,7 +19,7709 @@
 *    by accessing https://rapid.apl.uw.edu/rapp/ and retreiving the code as the code is not minimized.
 */
 
-//***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**/
+
+
+     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+
+// NOV 2023 Redesign for Hazmapper Integration.
+// Fix modal layout for Questionnaire viewer.
+// Testing against 1080px, 1280px, 1440px and 1920px widths.
+
+// Positions the parent modal and adjusts the entire questionnaire.
+::ng-deep body > modal-container > div.reveal 
+    margin 0
+    margin-left 8%
+    margin-right auto
+    padding 2%
+    width 57%
+
+
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+    cursor default
+    font-size 0.8rem
+    line-height normal
+    margin 0
+    padding 0
+    pointer-events none
+
+
+::ng-deep div.questionWrapper 
+    border-top 2px solid #cccccc
+
+
+::ng-deep div.subQuestion 
+    border-top 1px solid #aaaaaa
+    margin-left 30px !important
+
+
+::ng-deep div.subQuestion:before
+    color #999999
+    content " (sub-question)"
+    font-size 0.6rem
+    font-style italic
+    font-weight bold
+
+
+::ng-deep div.subQuestionOptions
+    margin-left 20px !important
+
+
+::ng-deep div.questionWrapper 
+::ng-deep div.subQuestion
+    margin-top 10px !important
+    margin-bottom 10px !important
+
+
+::ng-deep div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
+    padding-top 10px !important
+
+
+::ng-deep p.questionNumber
+    font-size 1.2rem !important
+    font-weight bold
+
+
+::ng-deep p.questionType
+    color #444444
+    font-size 0.7rem !important
+    font-style normal
+    font-weight bold
+
+
+::ng-deep p.questionType:before
+    color #999999
+    content "Question Type:  "
+    font-size 0.7rem
+    font-style italic
+    font-weight bold
+    margin-right 4px !important
+
+
+// This is the "Required" tag on questions.
+::ng-deep p.editFieldLabel
+    color #660000
+    font-size 0.6rem !important
+    font-style italic
+    font-weight bold
+    margin-top 4px !important
+
+
+::ng-deep p.headingText 
+    font-weight bold
+    margin-bottom 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.questionText 
+    margin-bottom 10px !important
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+::ng-deep p.instructionText 
+    font-size 0.9rem
+    margin-left 10px !important
+    margin-top 10px !important
+
+
+/**
+::ng-deep p.instructionText:before
+    content "Instructions "
+    display block
+    text-decoration underline
+    margin-bottom 4px !important
+**//***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
 
 // NOV 2023 Redesign for Hazmapper Integration.
 // Fix modal layout for Questionnaire viewer.
@@ -209,7 +7911,7 @@
 
 
 ::ng-deep td.spacer 
-    visibility: hidden
+    visibility hidden
 
 
 ::ng-deep div.buttonDecline 
@@ -263,4 +7965,3 @@
     font-weight bold
     margin-left 10px !important
     margin-top 10px !important
-

From 96efcd84d5be57b38b966964d3d6a5cdc7757ff1 Mon Sep 17 00:00:00 2001
From: taoteg <taoteg@gmail.com>
Date: Wed, 29 Nov 2023 16:10:44 -0600
Subject: [PATCH 12/12] Cleanedup mistake in css. Linting seems to regenerate
 unused style code locally. Investigating, but this commit is clean.

---
 .../modal-questionnaire-viewer.component.styl | 7767 +----------------
 1 file changed, 33 insertions(+), 7734 deletions(-)

diff --git a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
index 2a53eb6e..3e9aa97c 100644
--- a/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
+++ b/angular/src/app/components/modal-questionnaire-viewer/modal-questionnaire-viewer.component.styl
@@ -19,14 +19,14 @@
 *    by accessing https://rapid.apl.uw.edu/rapp/ and retreiving the code as the code is not minimized.
 */
 
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
+//***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
 
 // NOV 2023 Redesign for Hazmapper Integration.
 // Fix modal layout for Questionnaire viewer.
 // Testing against 1080px, 1280px, 1440px and 1920px widths.
 
 // Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
+::ng-deep body > modal-container > div.reveal
     margin 0
     margin-left 8%
     margin-right auto
@@ -34,7 +34,7 @@
     width 57%
 
 
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
+::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *
     cursor default
     font-size 0.8rem
     line-height normal
@@ -43,7713 +43,11 @@
     pointer-events none
 
 
-::ng-deep div.questionWrapper 
+::ng-deep div.questionWrapper
     border-top 2px solid #cccccc
 
 
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-/***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
-::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**/
-
-
-     /***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
-    border-top 1px solid #aaaaaa
-    margin-left 30px !important
-
-
-::ng-deep div.subQuestion:before
-    color #999999
-    content " (sub-question)"
-    font-size 0.6rem
-    font-style italic
-    font-weight bold
-
-
-::ng-deep div.subQuestionOptions
-    margin-left 20px !important
-
-
-::ng-deep div.questionWrapper 
 ::ng-deep div.subQuestion
-    margin-top 10px !important
-    margin-bottom 10px !important
-
-
-::ng-deep div.questionHeaderWrapper 
-    display flex
-    flex-direction row
-    justify-content space-between
-    padding-top 10px !important
-
-
-::ng-deep p.questionNumber
-    font-size 1.2rem !important
-    font-weight bold
-
-
-::ng-deep p.questionType
-    color #444444
-    font-size 0.7rem !important
-    font-style normal
-    font-weight bold
-
-
-::ng-deep p.questionType:before
-    color #999999
-    content "Question Type:  "
-    font-size 0.7rem
-    font-style italic
-    font-weight bold
-    margin-right 4px !important
-
-
-// This is the "Required" tag on questions.
-::ng-deep p.editFieldLabel
-    color #660000
-    font-size 0.6rem !important
-    font-style italic
-    font-weight bold
-    margin-top 4px !important
-
-
-::ng-deep p.headingText 
-    font-weight bold
-    margin-bottom 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.questionText 
-    margin-bottom 10px !important
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-::ng-deep p.instructionText 
-    font-size 0.9rem
-    margin-left 10px !important
-    margin-top 10px !important
-
-
-/**
-::ng-deep p.instructionText:before
-    content "Instructions "
-    display block
-    text-decoration underline
-    margin-bottom 4px !important
-**//***** CUSTOM SELECTORS FOR HAZMAPPER QUESTIONNAIRE VIEWER *****
-
-// NOV 2023 Redesign for Hazmapper Integration.
-// Fix modal layout for Questionnaire viewer.
-// Testing against 1080px, 1280px, 1440px and 1920px widths.
-
-// Positions the parent modal and adjusts the entire questionnaire.
-::ng-deep body > modal-container > div.reveal 
-    margin 0
-    margin-left 8%
-    margin-right auto
-    padding 2%
-    width 57%
-
-
-::ng-deep body > modal-container > div.reveal > div.modal-content >  app-modal-questionnaire-viewer > div.view-only-questionnaire-container *  
-    cursor default
-    font-size 0.8rem
-    line-height normal
-    margin 0
-    padding 0
-    pointer-events none
-
-
-::ng-deep div.questionWrapper 
-    border-top 2px solid #cccccc
-
-
-::ng-deep div.subQuestion 
     border-top 1px solid #aaaaaa
     margin-left 30px !important
 
@@ -7766,13 +64,13 @@
     margin-left 20px !important
 
 
-::ng-deep div.questionWrapper 
+::ng-deep div.questionWrapper
 ::ng-deep div.subQuestion
     margin-top 10px !important
     margin-bottom 10px !important
 
 
-::ng-deep div.questionHeaderWrapper 
+::ng-deep div.questionHeaderWrapper
     display flex
     flex-direction row
     justify-content space-between
@@ -7809,19 +107,19 @@
     margin-top 4px !important
 
 
-::ng-deep p.headingText 
+::ng-deep p.headingText
     font-weight bold
     margin-bottom 10px !important
     margin-top 10px !important
 
 
-::ng-deep p.questionText 
+::ng-deep p.questionText
     margin-bottom 10px !important
     margin-left 10px !important
     margin-top 10px !important
 
 
-::ng-deep p.instructionText 
+::ng-deep p.instructionText
     font-size 0.9rem
     margin-left 10px !important
     margin-top 10px !important
@@ -7836,51 +134,51 @@
 **/
 
 
-::ng-deep div.dropDownViewModeContainer 
+::ng-deep div.dropDownViewModeContainer
     margin-left 20px !important
     margin-top 10px !important
 
 
-::ng-deep textarea.instructionField 
+::ng-deep textarea.instructionField
     font-style italic
 
 
 ::ng-deep div.answerBubbleViewMode
 ::ng-deep div.answerBubbleViewModeSelected
-::ng-deep div.questionOptionShape 
-::ng-deep div.matrixOptionBubble.optionSelected 
+::ng-deep div.questionOptionShape
+::ng-deep div.matrixOptionBubble.optionSelected
     border solid 1px hsl(0, 0%, 10%)
 
 
 ::ng-deep div.answerBubbleViewMode
-::ng-deep div.questionOptionShape 
-::ng-deep div.matrixOptionBubble.optionSelected 
+::ng-deep div.questionOptionShape
+::ng-deep div.matrixOptionBubble.optionSelected
     height 0.5rem
     margin-right 4px !important
     width 0.5rem
 
 
-::ng-deep div.questionOptionShape 
+::ng-deep div.questionOptionShape
     border-radius 50%
 
 
 ::ng-deep .optionSelected
-::ng-deep .answerBubbleViewModeSelected 
+::ng-deep .answerBubbleViewModeSelected
     background-color rgb(51, 204, 255) !important
 
 
-::ng-deep .questionnaireQuestion 
+::ng-deep .questionnaireQuestion
     margin-top 2px !important
 
 
-::ng-deep input.RangeAnswerField 
+::ng-deep input.RangeAnswerField
     color hsl(180, 100%, 32%)
     margin 0 10px
     text-align center
     width 30px
 
 
-::ng-deep .rangeAnswers 
+::ng-deep .rangeAnswers
     margin-left 20px !important
 
 
@@ -7892,29 +190,30 @@
 
 
 ::ng-deep p.rangeAnswer.selected
-::ng-deep p.rangeAnswerDoubleDigit.selected 
+::ng-deep p.rangeAnswerDoubleDigit.selected
     border 2px solid #1779ba
     border-radius 50%
 
 
-::ng-deep p.questionMatrixColumnLabel 
+::ng-deep p.questionMatrixColumnLabel
     font-weight bold
     text-decoration underline
 
 
-::ng-deep table.matrixQuestionTable > tr 
-    margin-bottom 3px !important
+::ng-deep table.matrixQuestionTable > tr
+    margin-bottom 4px !important
+    margin-top 4px !important
 
 
-::ng-deep table.matrixQuestionTable > tr:not(:first-child) 
+::ng-deep table.matrixQuestionTable > tr:not(:first-child)
     border-bottom 1px solid #dedede
 
 
-::ng-deep td.spacer 
-    visibility hidden
+::ng-deep td.spacer
+    visibility: hidden
 
 
-::ng-deep div.buttonDecline 
+::ng-deep div.buttonDecline
     display none
     font-color #660000 !important
     font-size 0.9rem
@@ -7923,18 +222,18 @@
     margin-top 6px !important
 
 
-::ng-deep div.locationMapContainer .leaflet-control-container 
+::ng-deep div.locationMapContainer .leaflet-control-container
     display none
 
 
-::ng-deep div.locationMapContainer 
+::ng-deep div.locationMapContainer
     display block
     height 500px
     position relative
     width 100%
 
 
-::ng-deep p.locationQuestionDetails 
+::ng-deep p.locationQuestionDetails
     font-weight bold
     margin-bottom 5px !important
     margin-left 10px !important
@@ -7945,7 +244,7 @@
     margin-left 10px !important
 
 
-::ng-deep textarea.locationAddress 
+::ng-deep textarea.locationAddress
     display block
     height auto
     margin-bottom 5px !important