From c39ea3e06cf23a50966a8e1654c59495cbc7938d Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Wed, 22 Nov 2023 14:44:39 -0600
Subject: [PATCH 1/9] task/wg-166-questionnaire-preview-title

---
 .../components/asset-detail/asset-detail.component.html    | 2 +-
 .../app/components/asset-detail/asset-detail.component.ts  | 7 +++++++
 .../app/components/assets-panel/assets-panel.component.ts  | 5 +++++
 .../components/file-tree-node/file-tree-node.component.ts  | 3 +++
 angular/src/app/services/geo-data.service.ts               | 4 +++-
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/angular/src/app/components/asset-detail/asset-detail.component.html b/angular/src/app/components/asset-detail/asset-detail.component.html
index ac8ffc05..852b4ee3 100644
--- a/angular/src/app/components/asset-detail/asset-detail.component.html
+++ b/angular/src/app/components/asset-detail/asset-detail.component.html
@@ -3,7 +3,7 @@
         <div class="asset-detail-header">
             <app-feature-icon [feature]="feature"></app-feature-icon>
             <div class="feature-label">
-                {{ feature.properties.label || feature.properties.title || feature.id }}
+                {{ title }}
             </div>
             <div>
                 <button class="close-button" (click)="close()">
diff --git a/angular/src/app/components/asset-detail/asset-detail.component.ts b/angular/src/app/components/asset-detail/asset-detail.component.ts
index 3b4e2117..b8e4f054 100644
--- a/angular/src/app/components/asset-detail/asset-detail.component.ts
+++ b/angular/src/app/components/asset-detail/asset-detail.component.ts
@@ -9,6 +9,7 @@ import { ModalQuestionnaireViewerComponent } from '../modal-questionnaire-viewer
 import { RemoteFile } from 'ng-tapis';
 import { TapisFilesService } from '../../services/tapis-files.service';
 import { EnvService } from '../../services/env.service';
+import { PathTree } from '../../models/path-tree';
 
 @Component({
   selector: 'app-asset-detail',
@@ -21,6 +22,8 @@ export class AssetDetailComponent implements OnInit {
   featureSource: string;
   activeProject: Project;
   safePointCloudUrl: SafeResourceUrl;
+  selectedTreeNode: PathTree<Feature>;
+  title: string;
   constructor(
     private geoDataService: GeoDataService,
     private tapisFilesService: TapisFilesService,
@@ -52,6 +55,10 @@ export class AssetDetailComponent implements OnInit {
     this.projectsService.activeProject.subscribe((current) => {
       this.activeProject = current;
     });
+    this.geoDataService.selectNodeEvent.subscribe((selectedNode: PathTree<Feature>) => {
+      this.selectedTreeNode = selectedNode;
+      this.title = selectedNode.getPath();
+    });
   }
 
   openFileBrowserModal() {
diff --git a/angular/src/app/components/assets-panel/assets-panel.component.ts b/angular/src/app/components/assets-panel/assets-panel.component.ts
index 0c0a62bf..3385b1b9 100644
--- a/angular/src/app/components/assets-panel/assets-panel.component.ts
+++ b/angular/src/app/components/assets-panel/assets-panel.component.ts
@@ -24,6 +24,7 @@ export class AssetsPanelComponent implements OnInit {
   displayFeatures: Array<Feature>;
   activeProject: Project;
   currentTreeListing: PathTree<Feature>;
+  selectedTreeNode: PathTree<Feature>;
 
   constructor(
     private geoDataService: GeoDataService,
@@ -54,6 +55,9 @@ export class AssetsPanelComponent implements OnInit {
     this.geoDataService.featureTree$.subscribe((next) => {
       this.currentTreeListing = next;
     });
+    this.geoDataService.selectNodeEvent.subscribe((selectedNode) => {
+      this.selectedTreeNode = selectedNode;
+    });
   }
 
   scrollToActiveFeature() {
@@ -94,6 +98,7 @@ export class AssetsPanelComponent implements OnInit {
     } else {
       this.streetviewService.activeAsset = null;
       this.geoDataService.activeFeature = node.getPayload();
+      this.geoDataService.selectNodeEvent.emit(node);
     }
   }
 }
diff --git a/angular/src/app/components/file-tree-node/file-tree-node.component.ts b/angular/src/app/components/file-tree-node/file-tree-node.component.ts
index d5592f62..e3f1a333 100644
--- a/angular/src/app/components/file-tree-node/file-tree-node.component.ts
+++ b/angular/src/app/components/file-tree-node/file-tree-node.component.ts
@@ -26,6 +26,7 @@ export class FileTreeNodeComponent implements OnInit, OnDestroy {
   @Input() isPublicView = false;
   @Input() node: PathTree<Feature>;
   @Output() clickEvent: EventEmitter<PathTree<Feature>> = new EventEmitter<PathTree<Feature>>();
+  @Output() selectNodeEvent: EventEmitter<PathTree<Feature>> = new EventEmitter<PathTree<Feature>>();
   public activeFeature: Feature;
   public activeStreetviewAsset: any;
   private activeFeatureSub: Subscription;
@@ -83,11 +84,13 @@ export class FileTreeNodeComponent implements OnInit, OnDestroy {
       this.displayChildren = !this.displayChildren;
     } else {
       this.clickEvent.emit(node);
+      this.selectNodeEvent.emit(node);
     }
   }
 
   onClickChild(item: PathTree<Feature>) {
     this.clickEvent.emit(item);
+    this.selectNodeEvent.emit(item);
   }
 
   delete(item: PathTree<Feature>) {
diff --git a/angular/src/app/services/geo-data.service.ts b/angular/src/app/services/geo-data.service.ts
index 508b7943..961234ea 100644
--- a/angular/src/app/services/geo-data.service.ts
+++ b/angular/src/app/services/geo-data.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, EventEmitter } from '@angular/core';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
 import { LatLng } from 'leaflet';
@@ -61,6 +61,8 @@ export class GeoDataService {
 
   private _existingFeatureTypes: BehaviorSubject<Record<string, boolean>> = new BehaviorSubject<Record<string, boolean>>(existingFeatures);
   public readonly existingFeatureTypes: Observable<Record<string, boolean>> = this._existingFeatureTypes.asObservable();
+  public readonly selectNodeEvent: EventEmitter<PathTree<Feature>> = new EventEmitter<PathTree<Feature>>();
+
 
   constructor(
     private http: HttpClient,

From c005ba364d158f985d12d78476b865aef03ec14a Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Wed, 22 Nov 2023 15:26:12 -0600
Subject: [PATCH 2/9] Added padding for detail header for long titles

---
 .../src/app/components/asset-detail/asset-detail.component.styl  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/angular/src/app/components/asset-detail/asset-detail.component.styl b/angular/src/app/components/asset-detail/asset-detail.component.styl
index dfe73ab1..b1e6aaf8 100644
--- a/angular/src/app/components/asset-detail/asset-detail.component.styl
+++ b/angular/src/app/components/asset-detail/asset-detail.component.styl
@@ -9,6 +9,7 @@
     .asset-detail-header
       display flex
       align-items center
+      padding 5px
   position fixed
   z-index 5000
   width 35%

From 7d2d6d0d5296f4147c1f3aeb3bd5e92a98d6399b Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Wed, 22 Nov 2023 15:36:38 -0600
Subject: [PATCH 3/9] Linting

---
 .../modal-questionnaire-viewer.component.styl | 2379 +++++++++--------
 1 file changed, 1223 insertions(+), 1156 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 3e9dcf9c..9cc2e2c4 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,1403 +19,1470 @@
 *    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.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;
-}
+::ng-deep p.questionLabel
+::ng-deep p.headerLabel 
+    text-align left
+    font-size 14pt
+    color hsl(0, 0%, 100%)
 
-/***********************************************/
 
-/*INFO PAGE*/
+::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
 
-::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%);
-}
+//INFO PAGE
 
-::ng-deep .disabled div.radioButtonActive {
-    background-color: hsl(0, 0%, 50%) !important;
-}
+::ng-deep div.inlineContainer 
+    width auto
+    display inline-block
 
-::ng-deep .disabled p.questionnaireInfoHeader {
-    color: hsl(0, 0%, 50%) !important;
-}
 
-::ng-deep .disabled div.inlineContainer {
-    pointer-events: none;
-    cursor: default;
-}
+::ng-deep .disabled div.inlineContainer 
+    pointer-events none !important
+    cursor default !important
 
-::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.inlineContainer:hover div.radioButtonQuestionnaire
+::ng-deep div.inlineContainer:hover div.radioButtonQuestionnaireSmall 
+    background-color hsl(0, 0%, 90%)
 
-::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 .disabled div.radioButtonActive 
+    background-color hsl(0, 0%, 50%) !important
 
-::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 .disabled p.questionnaireInfoHeader 
+    color hsl(0, 0%, 50%) !important
 
-::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 .disabled div.inlineContainer 
+    pointer-events none
+    cursor default
 
-::ng-deep div.optionsWrapper p.boldText {
-    font-weight: bold
-}
 
-::ng-deep div.optionsWrapper p.editFieldLabel {
-    line-height: 27px;
-    margin: 0;
-    vertical-align: top;
-}
+::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 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 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 .subQuestion p.questionNumber {
-    font-size: 18pt;
-}
+::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 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 div.radioButtonQuestionnaireSmall 
+    width 25px
+    height 25px
+    margin 0px 8px 0px 20px
 
-::ng-deep p.instructionText {
-    color: hsl(0, 0%, 50%);
-}
 
-::ng-deep p.questionText {
-    color: hsl(195, 100%, 30%);
-}
+::ng-deep div.radioButtonActive 
+    background-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.questionnaireDetailText 
+    position relative
+    display inline-block
+    color hsl(0, 0%, 0%)
+    line-height 60px
+    font-size 15pt
+    vertical-align top
 
-::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.optionsWrapper 
+    position relative
+    text-align left
+    display block
+    padding 20px 10px
 
-::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.optionsWrapper p.redText 
+    color  hsl(0, 100%, 40%)
 
-::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 div.optionsWrapper p.boldText 
+    font-weight bold
 
-::ng-deep p.editFieldLabel p.declineLabel {
-    pointer-events: none;
-    cursor: default;
-}
 
-::ng-deep p.declineLabel {
-    margin-left: 45px;
-}
+::ng-deep div.optionsWrapper p.editFieldLabel 
+    line-height 27px
+    margin 0
+    vertical-align top
 
-/*********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 div.questionHeaderWrapper 
+    display flex
+    flex-direction row
+    justify-content space-between
 
-::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 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 .question-edit-field-container input.optionValueField {
-    margin-left: 50px;
-}
 
-::ng-deep .multi-select textarea.optionField {
-    width: calc(100% - 261px);
-}
 
+::ng-deep .subQuestion p.questionNumber 
+    font-size 18pt
 
-::ng-deep .multi-select .declineOptionWrapper > textarea.optionField {
-    width: calc(100% - 217px);
-}
 
-::ng-deep .declineOptionWrapper > textarea {
-    margin-left: 45px;
-}
+::ng-deep p.questionType 
+    font-size 18pt
+    font-weight bold
+    left unset
+    right 20px
+    top 10px
 
-::ng-deep .declineOption.subQuestionOption .removableAnswer {
-    left: 0px !important;
 
-}
+::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 .subQuestion .declineViewModeOption {
-    padding: 0 !important;
-}
 
-::ng-deep .subQuestion textarea.optionField {
-    width: calc(100% - 93px);
-}
+::ng-deep p.instructionText 
+    color hsl(0, 0%, 50%)
 
-::ng-deep textarea.instructionField {
-    font-style: italic;
-}
 
-::ng-deep div.multiTextField {
-    padding: 80px 0px 10px 0px !important;
-}
+::ng-deep p.questionText 
+    color hsl(195, 100%, 30%)
 
-::ng-deep div.multiTextField p.questionNumber {
-    position: absolute;
-    top: 10px;
-}
 
-::ng-deep .subQuestion p.questionText {
-    font-size: 14pt;
-}
+::ng-deep p.instructionText 
+    font-size 15pt
+    font-style italic
 
-::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;
-}
+::ng-deep p.questionText
+::ng-deep p.headingText
+::ng-deep p.instructionText 
+    padding 20px 10px !important
 
-/************ LOCATION QUESTION MAP ************/
 
-::ng-deep div.locationMapContainer .leaflet-control-container {
-    display: none;
-}
+::ng-deep p.reorderQuestionText 
+    margin-left 80px
+    font-size 12pt
+    line-height 130%
+    padding 10px 10px 10px 5px
 
-::ng-deep div.locationMapContainer {
-    display: block;
-    position: relative;
-    width: 100%;
-    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 p.reorderSectionText 
+    margin-left 40px
+    font-size 16pt
+    color hsl(195, 100%, 35%)
+    padding 0 40px 0px 5px
+    line-height 55px
 
-::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.originalQuestionPlaceholder 
+    border-radius 5px
+    background-color hsl(195, 100%, 40%) !important
 
-::ng-deep div.mapCanvas::-webkit-scrollbar {
-    display: none !important;
-}
 
-::ng-deep textarea.numberField {
-    height: 52px;
-    width: 300px;
-}
+::ng-deep .originalQuestionPlaceholder p.reorderSectionText 
+    color hsl(195, 100%, 90%)
 
 
-::ng-deep input, ::ng-deep textarea {
-    pointer-events: all;
-}
+::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 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 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 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 p.editFieldLabel p.declineLabel 
+    pointer-events none
+    cursor default
 
-::ng-deep textarea.shortAnswer:focus {
-    outline: none;
-}
 
-::ng-deep textarea.shortAnswer {
-    height: 52px !important;
-}
+::ng-deep p.declineLabel 
+    margin-left 45px
 
-::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;
-}
+//********QUESTION TEXT AREAS/INPUTS*********
 
-::ng-deep div.AddQuestionnaire {
-    display: flex;
-    justify-content: space-between;
-}
+::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
 
-::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;
-}
+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 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.optionField 
+    padding 15px 10px
+    font-size 16px
+    width calc(100% - 367px)
+    //max-width: 600px;
+    min-width 120px
+    max-height none
 
-::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 .question-edit-field-container textarea.optionField 
+    width calc(100% - 415px)
 
-::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 .question-edit-field-container input.optionValueField 
+    margin-left 50px
 
-::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 .multi-select textarea.optionField 
+    width calc(100% - 261px)
 
-::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 .multi-select .declineOptionWrapper > textarea.optionField 
+    width calc(100% - 217px)
 
-::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 .declineOptionWrapper > textarea 
+    margin-left 45px
 
-::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 .declineOption.subQuestionOption .removableAnswer 
+    left 0px !important
 
-::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 .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
+
+
+::ng-deep div.locationMapContainer 
+    display block
+    position relative
+    width 100%
+    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 {
 }
 
-/******QUESTION OPTIONS/MODE ********/
+//*****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 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 {
 }
 
-::ng-deep div.multiTextModeSelector {
-    top: 238px;
-    right: unset;
-    left: 40px;
-}
+::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 div.multiTextField div.modeSelector 
+    right unset
+    left 50px
 
-::ng-deep .viewMode div.optionsWrapper {
-    padding: 10px !important;
-    text-align: left;
-}
 
-::ng-deep div.multiTextField div.modeSelector {
-    top: 81px;
-}
+::ng-deep .multiText  div.optionsWrapper 
+    text-align right
+    padding 10px 10px 20px 10px
 
-::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 .viewMode div.optionsWrapper 
+    padding 10px !important
+    text-align left
 
-::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.multiTextField div.modeSelector 
+    top 81px
 
-::ng-deep div.modeOption:hover {
-    background-color: hsl(0, 0%, 90%);
-}
 
+::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.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 div.questionModeWrapper div.modeSelector 
+    display inline-block
+    position relative
+    right unset
+    top unset
 
 
-::ng-deep .multiText p.questionText {
-    padding: 10px;
-}
+::ng-deep div.modeOption:first-child 
+    border-left 1px solid hsl(0, 0%, 70%)
+    border-top-left-radius 5px
+    border-bottom-left-radius 5px
 
 
-/******MULTIPLE CHOICE ANSWER DETAILS********/
+::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.questionModeWrapper {
-    width: 100%;
-    text-align: center;
-    padding: 10px 10px 30px 10px;
-}
 
 ::ng-deep div.declineButton {
 
 }
 
-::ng-deep div.declineOption {
-    padding-top: 0;
-    padding-bottom: 0;
-    /*height: 130px;*/
-}
+::ng-deep div.declineOption 
+    padding-top 0
+    padding-bottom 0
+    //height: 130px;
+
 
 ::ng-deep div.declineViewModeOption {
 
 }
 
-::ng-deep div.addTextFieldWrapper {
-    height: 70px;
-    cursor: pointer;
-    pointer-events: all;
-    display: inline-block;
-    width: auto;
-}
+::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.addTextFieldWrapper 
+    height auto
 
-::ng-deep div.multiChoiceDecline div.buttonAddAnswer {
-    top: 30px;
-}
 
-::ng-deep div.declineOption input.answerVariableName {
-    margin-top: 2px;
-}
+::ng-deep div.addAnswerRow div.MultipleChoiceAnswerField
+    width auto
+    pointer-events all
+    cursor pointer
 
 
-::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 div.multiChoiceDecline div.buttonAddAnswer 
+    top 30px
+
+
+::ng-deep div.declineOption input.answerVariableName 
+    margin-top 2px
+
 
-::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;
-}
 
+::ng-deep p.addNewOptionLabel 
+    text-align left
+    font-size 14pt
+    line-height 52px
+    display inline-block
+    color hsl(0, 0%, 0%)
+    cursor pointer
 
-/*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 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 {
 }
 
-::ng-deep div.questionValueWrapper, ::ng-deep div.optionValueWrapper {
-    display: block;
-    position: relative;
-    margin: 5px 0;
-    text-align: left;
-}
+::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.optionValueWrapper 
+    margin 5px 0px 5px 45px
 
-::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 div.textOption div.optionValueWrapper 
+    margin 5px 0px
 
-::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 div.questionOption 
+    position relative
+    text-align left
+    width 100%
+    color hsl(0, 100%, 100%)
+    display block
+    box-sizing border-box
+    padding 10px
 
-::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 tr.questionOption > td 
+    padding  10px 0
 
-::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 .question-view-mode div.questionOption 
+    display flex
+    flex-direction row
+    flex-wrap wrap
+    width 100%
+    padding 10px 0
 
-::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 .question-view-mode .questionnaireQuestion 
+    left unset
+    padding 0px 10px
+    //display: flex;
+    //flex: 1;
+    //max-width: calc(100% - 116px) !important;
 
-::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 .question-view-mode td 
+    display table-cell
+    vertical-align middle
 
-::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;
-}
+::ng-deep .question-view-mode .questionOptionShape 
+    margin 0
+    display flex
+    top unset
+    position relative
 
-/*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.questionOptionWrapper
+::ng-deep div.declineOptionWrapper 
+    position relative
+    display block
+    width 100%
+    text-align left
 
-::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 input.questionValueField
+::ng-deep input.optionValueField 
+    padding 5px
+    min-width 250px
 
-::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 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.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 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 .section-wrapper .goToContainer, ::ng-deep .section-wrapper .goToMenuButton {
-    width: auto !important;
-    min-width: 90px;
-}
 
-::ng-deep p.section-goto-label {
-    width: auto;
-}
+::ng-deep div.questionnaireOptions div.subQuestion 
+    border none
 
-::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 p.subQuestionLabel 
+    text-align left
+    color white
+    font-size 14px
+    line-height 22px
 
-::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.buttonDeleteSubQuestion p.subQuestionLabel 
+    color hsl(0, 100%, 40%)
 
-::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 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
 
 
-::ng-deep svg.buttonDeleteSubQuestionIcon {
-    height: 20px;
-    width: 20px;
-    fill: hsl(0, 100%, 40%) !important;
-    margin: 5px;
-    padding: 0;
-}
+//GO TO DETAILS
 
-::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.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.buttonDeleteSubQuestion p {
-    color: black !important;
-}
 
-::ng-deep div.buttonDeleteSubQuestion:hover {
-    background-color: hsl(0, 0%, 95%) !important;
-}
+::ng-deep div.goToContainer.redText .buttonDropdown 
+    border-top-color  hsl(0, 100%, 40%)
 
-::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 div.goToContainer.redText svg 
+    fill  hsl(0, 100%, 40%)
 
-::ng-deep .matrixOption > .MultipleChoiceAnswerField {
-    margin-left: 35px;
-}
 
-::ng-deep .matrixOption > .buttonMoveQuestionnaireOption {
-    top: 40px !important;
-    margin-left: 15px;
-}
+::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 .matrixOption .answerVariableName {
-    margin-left: 67px !important;
-}
 
-::ng-deep .matrixOption svg {
-    top: 6px !important;
-    left: 5px !important;
-}
+::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 table.matrixQuestionTable {
 
-    overflow: scroll;
-    max-width: 100%;
-}
+::ng-deep div.buttonDeleteSubQuestionIcon 
+    position absolute
+    top 14px
+    right 20px
+    height 20px
+    width 20px
 
-::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 svg.buttonDeleteSubQuestionIcon 
+    height 20px
+    width 20px
+    fill hsl(0, 100%, 40%) !important
+    margin 5px
+    padding 0
 
-::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 div.buttonDeleteSubQuestion 
+    border solid 1px hsl(0, 0%, 80%) !important
+    background-color hsl(0, 0%, 100%) !important
+    position relative !important
 
-::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 div.buttonDeleteSubQuestion p 
+    color black !important
 
-::ng-deep td.spacer {
-    width: auto;
-    color: white;
-}
 
-::ng-deep p.matrixQuestionValue {
-    color: black;
-    font-size: 14pt;
-}
+::ng-deep div.buttonDeleteSubQuestion:hover 
+    background-color hsl(0, 0%, 95%) !important
 
-::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.buttonAddSubQuestion:hover 
+    background-color hsla(195, 100%, 35%, 0.9) !important
 
-::ng-deep div.newRowWrapper .answerLabel, ::ng-deep div.newColumnWrapper .answerLabel {
-    margin: 7px;
-}
 
-::ng-deep div.newRowWrapper, ::ng-deep div.newColumnWrapper {
-    padding-bottom: 30px !important;
-}
+//**************MATRIX QUESTION*******
 
-::ng-deep div.newColumnWrapper:last-child {
-    padding-bottom: 5px;
-}
+::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 div.variableOptionWrapper {
-    position: relative;
-    width: 100%;
-    color: hsl(0, 100%, 100%);
-    display: block;
-    box-sizing: border-box;
-    padding: 10px;
-    margin: 10px 0px 0px 10px
-}
 
+::ng-deep .matrixOption > .MultipleChoiceAnswerField 
+    margin-left 35px
 
-/*************************** 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 .matrixOption > .buttonMoveQuestionnaireOption 
+    top 40px !important
+    margin-left 15px
 
-::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 .matrixOption .answerVariableName 
+    margin-left 67px !important
 
-::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 .matrixOption svg 
+    top 6px !important
+    left 5px !important
 
-::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 table.matrixQuestionTable 
 
-::ng-deep div.questionnaireSubOption {
-    padding: 10px;
-}
+    overflow scroll
+    max-width 100%
 
-::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 table.matrixQuestionTable td 
+    padding 10px 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;
-}
+::ng-deep td.matrixRow 
+    text-align left
 
 
-/*DROP DOWN MENU VIEW FOR MULTIPLE CHOICE QUESTIONS*/
+::ng-deep p.questionMatrixColumnLabel 
+    font-size 13pt
+    line-height 125%
+    color hsl(0, 0%, 0%)
+    text-align center
+    padding 0px 10px
 
-::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 p.questionMatrixRowLabel 
+    font-size 13pt
+    line-height 125%
+    color hsl(0, 0%, 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.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 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 table.matrixQuestionTable tr:first-child 
+    border-top none
 
-::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;*/
-    border: solid 1px hsl(0, 0%, 10%);
-}
 
-::ng-deep .question-view-mode div.answerBubbleViewMode {
-    margin: 0 !important;
-}
+::ng-deep td.spacer 
+    width auto
+    color white
 
-::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%);
-}
+::ng-deep p.matrixQuestionValue 
+    color black
+    font-size 14pt
 
 
-/*MODIFIERS*/
+::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 textarea.longAnswer {
-    height: 160px !important;
-}
 
-::ng-deep textarea.mediumAnswer {
-    height: 100px !important;
-}
+::ng-deep div.matrixMultiOptionBubble 
+    border-radius 0px
 
-::ng-deep textarea.shortAnswer {
-    height: 52px !important;
-}
 
+::ng-deep div.newRowWrapper .answerLabel
+::ng-deep div.newColumnWrapper .answerLabel 
+    margin 7px
 
-/* QUESTION SELECTION CLASSES*/
 
-::ng-deep .optionSelected {
-    background-color: rgb(51, 204, 255) !important;
-}
+::ng-deep div.newRowWrapper
+::ng-deep div.newColumnWrapper 
+    padding-bottom 30px !important
 
 
-::ng-deep div.hidden {
-    display: none;
-}
+::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;
+    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
+

From a2e2a9756d2e46021290bc976b6b3fd1733f964b Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Wed, 22 Nov 2023 15:39:53 -0600
Subject: [PATCH 4/9] Prettier linting

---
 angular/src/app/services/geo-data.service.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/angular/src/app/services/geo-data.service.ts b/angular/src/app/services/geo-data.service.ts
index 961234ea..ad2756b4 100644
--- a/angular/src/app/services/geo-data.service.ts
+++ b/angular/src/app/services/geo-data.service.ts
@@ -63,7 +63,6 @@ export class GeoDataService {
   public readonly existingFeatureTypes: Observable<Record<string, boolean>> = this._existingFeatureTypes.asObservable();
   public readonly selectNodeEvent: EventEmitter<PathTree<Feature>> = new EventEmitter<PathTree<Feature>>();
 
-
   constructor(
     private http: HttpClient,
     private filterService: FilterService,

From e00ffab1e48004d4c0e7921d3eb75a6d84b70afd Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Tue, 28 Nov 2023 13:09:44 -0600
Subject: [PATCH 5/9] Revert style linting

---
 .../modal-questionnaire-viewer.component.styl | 2379 ++++++++---------
 1 file changed, 1156 insertions(+), 1223 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 9cc2e2c4..3e9dcf9c 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,1470 +19,1403 @@
 *    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
-
-
-::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 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 .declineOption.subQuestionOption .removableAnswer 
-    left 0px !important
+::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 .subQuestion .declineViewModeOption 
-    padding 0 !important
+::ng-deep div.inlineContainer {
+    width: auto;
+    display: inline-block;
+}
 
+::ng-deep .disabled div.inlineContainer {
+    pointer-events: none !important;
+    cursor: default !important;
+}
 
-::ng-deep .subQuestion textarea.optionField 
-    width calc(100% - 93px)
+::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 textarea.instructionField 
-    font-style italic
+::ng-deep .disabled p.questionnaireInfoHeader {
+    color: hsl(0, 0%, 50%) !important;
+}
 
+::ng-deep .disabled div.inlineContainer {
+    pointer-events: none;
+    cursor: default;
+}
 
-::ng-deep div.multiTextField 
-    padding 80px 0px 10px 0px !important
+::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.multiTextField p.questionNumber 
-    position absolute
-    top 10px
+::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 .subQuestion p.questionText 
-    font-size 14pt
+::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 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 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 textarea.locationAddress 
-    background-color hsl(0, 0%, 100%)
-    pointer-events none
-    display block
-    height 100px !important
-    width 400px
+::ng-deep div.optionsWrapper p.boldText {
+    font-weight: bold
+}
 
+::ng-deep div.optionsWrapper p.editFieldLabel {
+    line-height: 27px;
+    margin: 0;
+    vertical-align: top;
+}
 
-//*********** LOCATION QUESTION MAP ***********
+::ng-deep div.questionHeaderWrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
 
-::ng-deep div.locationMapContainer .leaflet-control-container 
-    display none
+::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 div.locationMapContainer 
-    display block
-    position relative
-    width 100%
-    height 500px
+::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.locationQuestionDetails 
-    text-align left
-    font-size 13pt
-    letter-spacing 1px
-    margin 20px 0px
-    color hsl(0, 0%, 25%)
+::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 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 p.questionText {
+    color: hsl(195, 100%, 30%);
+}
 
+::ng-deep p.instructionText {
+    font-size: 15pt;
+    font-style: italic;
+}
 
-::ng-deep div.mapContainer::-webkit-scrollbar 
-    display none !important
+::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 div.mapCanvas::-webkit-scrollbar 
-    display none !important
+::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 textarea.numberField 
-    height 52px
-    width 300px
+::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 input
-::ng-deep textarea 
-    pointer-events all
+::ng-deep p.editFieldLabel p.declineLabel {
+    pointer-events: none;
+    cursor: default;
+}
 
+::ng-deep p.declineLabel {
+    margin-left: 45px;
+}
 
-::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
+/*********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.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.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 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 .question-edit-field-container input.optionValueField {
+    margin-left: 50px;
+}
 
+::ng-deep .multi-select textarea.optionField {
+    width: calc(100% - 261px);
+}
 
-::ng-deep div.wrapperNoPad > input.shortAnswer 
-    margin 5px 10px
-    width calc(100% - 230px)
 
+::ng-deep .multi-select .declineOptionWrapper > textarea.optionField {
+    width: calc(100% - 217px);
+}
 
-::ng-deep textarea.shortAnswer:focus 
-    outline none
+::ng-deep .declineOptionWrapper > textarea {
+    margin-left: 45px;
+}
 
+::ng-deep .declineOption.subQuestionOption .removableAnswer {
+    left: 0px !important;
 
-::ng-deep textarea.shortAnswer 
-    height 52px !important
+}
 
+::ng-deep .subQuestion .declineViewModeOption {
+    padding: 0 !important;
+}
 
-::ng-deep div.AddQuestionTemplate 
-    color hsl(0, 0%, 0%)
-    height 75px
-    box-sizing border-box
+::ng-deep .subQuestion textarea.optionField {
+    width: calc(100% - 93px);
+}
 
+::ng-deep textarea.instructionField {
+    font-style: italic;
+}
 
-::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.multiTextField {
+    padding: 80px 0px 10px 0px !important;
+}
 
+::ng-deep div.multiTextField p.questionNumber {
+    position: absolute;
+    top: 10px;
+}
 
-::ng-deep div.AddQuestionnaire 
-    display flex
-    justify-content space-between
+::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 div.AddQuestionnaireToDOM 
-    padding-top 20px
-    text-align center
+::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.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.locationMapContainer .leaflet-control-container {
+    display: none;
+}
 
+::ng-deep div.locationMapContainer {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 500px;
+}
 
-::ng-deep div.MultipleChoiceAnswerField 
-    cursor pointer
-    display inline-block
-    //min-width: 200px;
-    width 100%
-    height 40px
-    //margin: 0 20px;
+::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 input.MultipleChoiceInput
-::ng-deep input.RangeAnswerField
-::ng-deep input.YesOrNoInput
-::ng-deep input.goToInput
-::ng-deep textarea.MultipleChoiceInput 
-    //pointer-events: none;
-    //user-select: none;
+::ng-deep div.mapContainer::-webkit-scrollbar {
+    display: none !important;
+}
 
-    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 div.mapCanvas::-webkit-scrollbar {
+    display: none !important;
+}
 
+::ng-deep textarea.numberField {
+    height: 52px;
+    width: 300px;
+}
 
-::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, ::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 input.MultipleChoiceInput
-::ng-deep input.YesOrNoInput
-::ng-deep textarea.MultipleChoiceInput 
-    width calc(100% - 70px)
-    max-width 500px
+::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.questionError 
-    background-color hsla(0, 100%, 70%, 0.8)
-    border 1px solid hsl(0, 100%, 40%)
+::ng-deep textarea.shortAnswer:focus {
+    outline: none;
+}
 
+::ng-deep textarea.shortAnswer {
+    height: 52px !important;
+}
 
-::ng-deep textarea.MultipleChoiceInput.questionError 
-    background-color hsla(0, 100%, 70%, 0.8)
-    border 1px solid hsl(0, 100%, 40%)
+::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 input.YesOrNoInput 
-    color hsl(0, 0%, 0%)
-    pointer-events none
-    border transparent
-    width 50px
+::ng-deep div.AddQuestionnaire {
+    display: flex;
+    justify-content: space-between;
+}
 
+::ng-deep div.AddQuestionnaireToDOM {
+    padding-top: 20px;
+    text-align: center;
+}
 
-::ng-deep input.goToInput 
-    width 200px
+::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;*/
+}
 
-//*******RANGE QUESTION********
+::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 input.RangeAnswerField 
-    color hsl(180, 100%, 32%)
-    width 30px
-    margin 0 10px
-    text-align center
+::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 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 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 div.rangeAnswer 
-    position relative
-    color grey
-    margin 5px 20px
+::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 p.rangeAnswer
-::ng-deep p.rangeAnswerDoubleDigit 
-    font-size 16px
-    color hsl(0, 0%, 60%)
+::ng-deep input.goToInput {
+    width: 200px;
+}
 
+/********RANGE QUESTION*********/
 
-::ng-deep p.rangeAnswerDoubleDigit 
-    top 10px
-    left 8px
-    position absolute
-    margin-right 3px
+::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.removableAnswer 
-    cursor pointer
+::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 div.MultipleSelectionBubble 
-    border-radius 5px !important
+::ng-deep p.rangeAnswerDoubleDigit {
+    top: 10px;
+    left: 8px;
+    position: absolute;
+    margin-right: 3px;
+}
 
+::ng-deep div.removableAnswer {
+    cursor: pointer;
+}
 
-::ng-deep div.selected 
-    background-color hsl(0, 100%, 40%)
+::ng-deep div.MultipleSelectionBubble {
+    border-radius: 5px !important;
+}
 
-//*****INPUT FIELDS *******
+::ng-deep div.selected {
+    background-color: hsl(0, 100%, 40%);
+}
+/******INPUT FIELDS ********/
 
 ::ng-deep input.numberField {
 }
 
-//*****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
+/******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 {
 }
 
-::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.multiTextModeSelector {
+    top: 238px;
+    right: unset;
+    left: 40px;
+}
 
-::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.multiTextField div.modeSelector {
+    right: unset;
+    left: 50px;
+}
 
+::ng-deep .multiText  div.optionsWrapper {
+    text-align: right;
+    padding: 10px 10px 20px 10px;
+}
 
-::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 .viewMode div.optionsWrapper {
+    padding: 10px !important;
+    text-align: left;
+}
 
+::ng-deep div.multiTextField div.modeSelector {
+    top: 81px;
+}
 
-::ng-deep div.modeOption:hover 
-    background-color hsl(0, 0%, 90%)
+::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 
-    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
+::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%);
+}
 
-// MULTI TEXT
 
+::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;
+}
 
-::ng-deep .multiText p.questionText 
-    padding 10px
+/* 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
+/******MULTIPLE CHOICE ANSWER DETAILS********/
 
+::ng-deep div.questionModeWrapper {
+    width: 100%;
+    text-align: center;
+    padding: 10px 10px 30px 10px;
+}
 
 ::ng-deep div.declineButton {
 
 }
 
-::ng-deep div.declineOption 
-    padding-top 0
-    padding-bottom 0
-    //height: 130px;
-
+::ng-deep div.declineOption {
+    padding-top: 0;
+    padding-bottom: 0;
+    /*height: 130px;*/
+}
 
 ::ng-deep div.declineViewModeOption {
 
 }
 
-::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.addTextFieldWrapper {
+    height: 70px;
+    cursor: pointer;
+    pointer-events: all;
+    display: inline-block;
+    width: auto;
+}
 
-::ng-deep div.declineOption input.answerVariableName 
-    margin-top 2px
+::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 p.addNewOptionLabel 
-    text-align left
-    font-size 14pt
-    line-height 52px
-    display inline-block
-    color hsl(0, 0%, 0%)
-    cursor pointer
+::ng-deep div.declineOption input.answerVariableName {
+    margin-top: 2px;
+}
 
 
-::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
+::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 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
+/*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 {
 }
 
-::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 div.questionValueWrapper, ::ng-deep div.optionValueWrapper {
+    display: block;
+    position: relative;
+    margin: 5px 0;
+    text-align: left;
+}
 
-::ng-deep table.matrixQuestionTable 
+::ng-deep div.optionValueWrapper {
+    margin: 5px 0px 5px 45px;
+}
 
-    overflow scroll
-    max-width 100%
+::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 table.matrixQuestionTable td 
-    padding 10px 5px
+::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 td.matrixRow 
-    text-align left
+::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 p.questionMatrixColumnLabel 
-    font-size 13pt
-    line-height 125%
-    color hsl(0, 0%, 0%)
-    text-align center
-    padding 0px 10px
+::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 p.questionMatrixRowLabel 
-    font-size 13pt
-    line-height 125%
-    color hsl(0, 0%, 0%)
+::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.addItemRow 
-    pointer-events all
-    cursor pointer
-    display inline-block
-    height 40px
+::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 table.matrixQuestionTable tr 
-    border-top 1px solid hsl(0, 0%, 90%)
+::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 table.matrixQuestionTable tr:first-child 
-    border-top none
+::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 td.spacer 
-    width auto
-    color white
+::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 p.matrixQuestionValue 
-    color black
-    font-size 14pt
+::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.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.goToContainer.redText div.goToMenuButton {
+    border: 1px solid hsl(0, 100%, 40%);
+}
 
+::ng-deep div.goToMenuButton:hover {
+    background-color: hsl(0, 0%, 95%);
+}
 
-::ng-deep div.matrixMultiOptionBubble 
-    border-radius 0px
+::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 div.newRowWrapper .answerLabel
-::ng-deep div.newColumnWrapper .answerLabel 
-    margin 7px
+::ng-deep p.section-goto-label {
+    width: auto;
+}
 
+::ng-deep table.fullSize {
+    pointer-events: none;
+    height: 100%;
+    width: 100%;
+}
 
-::ng-deep div.newRowWrapper
-::ng-deep div.newColumnWrapper 
-    padding-bottom 30px !important
+::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.newColumnWrapper:last-child 
-    padding-bottom 5px
+::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.variableOptionWrapper 
-    position relative
-    width 100%
-    color hsl(0, 100%, 100%)
-    display block
-    box-sizing border-box
-    padding 10px
-    margin 10px 0px 0px 10px
+::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;
+}
 
-//************************** QUESTIONNAIRE VIEWER ITEMS ******************************
+::ng-deep div.buttonDeleteSubQuestion {
+    border: solid 1px hsl(0, 0%, 80%) !important;
+    background-color: hsl(0, 0%, 100%) !important;
+    position: relative !important;
+}
 
-::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 div.buttonDeleteSubQuestion p {
+    color: black !important;
+}
 
+::ng-deep div.buttonDeleteSubQuestion:hover {
+    background-color: hsl(0, 0%, 95%) !important;
+}
 
-::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 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 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 .matrixOption > .MultipleChoiceAnswerField {
+    margin-left: 35px;
+}
 
+::ng-deep .matrixOption > .buttonMoveQuestionnaireOption {
+    top: 40px !important;
+    margin-left: 15px;
+}
 
-::ng-deep .section-wrapper p.goto-label 
-    width auto
-    margin 0 2px
+::ng-deep .matrixOption .answerVariableName {
+    margin-left: 67px !important;
+}
 
+::ng-deep .matrixOption svg {
+    top: 6px !important;
+    left: 5px !important;
+}
 
-::ng-deep div.questionnaireSelector 
-    position relative
-    display table-cell
-    vertical-align middle
-    font-family "StandardFontRegular", "Arial", sans-serif
+::ng-deep table.matrixQuestionTable {
 
+    overflow: scroll;
+    max-width: 100%;
+}
 
-::ng-deep div.questionnaireOptions
-::ng-deep div.subQuestionOptions 
-    padding 0px 15px
-    text-align left
-    //padding-left: 20px;
-    //padding-bottom: 5px;
+::ng-deep table.matrixQuestionTable td {
+    padding: 10px 5px;
+}
 
+::ng-deep td.matrixRow {
+    text-align: left;
+}
 
-::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 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.questionnaireSubOption 
-    padding 10px
+::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 div.questionOption
-::ng-deep div.subQuestionOption 
-    padding 10px
-    display block
+::ng-deep table.matrixQuestionTable tr:first-child {
+    border-top: none
+}
 
+::ng-deep td.spacer {
+    width: auto;
+    color: white;
+}
 
-::ng-deep div.questionOption.selected
-::ng-deep div.subQuestionOption.selected 
-    background-color hsl(190, 100%, 40%) !important
-    border-radius 5px
+::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.addOptionWrapper
-::ng-deep div.addDeclineOptionWrapper 
-    padding 10px
-    text-align left
-    width auto
-    pointer-events all
-    cursor pointer
-    position relative
+::ng-deep div.matrixMultiOptionBubble {
+    border-radius: 0px;
+}
 
+::ng-deep div.newRowWrapper .answerLabel, ::ng-deep div.newColumnWrapper .answerLabel {
+    margin: 7px;
+}
 
-::ng-deep div.addDeclineOptionWrapper 
-    cursor default
+::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
+}
 
-//DROP DOWN MENU VIEW FOR MULTIPLE CHOICE QUESTIONS
 
-::ng-deep div.dropDownViewModeContainer 
-    position relative
-    display block
-    text-align left
+/*************************** 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 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 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 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 .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 .question-view-mode div.div.buttonQuestionnaireDropDown 
-    display none
+::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.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.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.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.addDeclineOptionWrapper {
+    cursor: default;
+}
 
 
-::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;
-    border solid 1px hsl(0, 0%, 10%)
+/*DROP DOWN MENU VIEW FOR MULTIPLE CHOICE QUESTIONS*/
 
+::ng-deep div.dropDownViewModeContainer {
+    position: relative;
+    display: block;
+    text-align: left;
+}
 
-::ng-deep .question-view-mode div.answerBubbleViewMode 
-    margin 0 !important
+::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 div.questionOptionShape 
-    position absolute
-    display inline-block
-    border-radius 15px
-    height 28px
-    width 28px
-    margin-right 3px
-    top 50%
-    margin-top -14px
+::ng-deep .question-view-mode div.div.buttonQuestionnaireDropDown {
+    display: none;
+}
 
 
-::ng-deep div.answerBubbleViewModeSelected 
-    background-color hsl(200, 100%, 55%)
 
+::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;
+}
 
-//MODIFIERS
+::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;*/
+    border: solid 1px hsl(0, 0%, 10%);
+}
 
-::ng-deep textarea.longAnswer 
-    height 160px !important
+::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 textarea.mediumAnswer 
-    height 100px !important
+::ng-deep div.answerBubbleViewModeSelected {
+    background-color: hsl(200, 100%, 55%);
+}
 
 
-::ng-deep textarea.shortAnswer 
-    height 52px !important
+/*MODIFIERS*/
 
+::ng-deep textarea.longAnswer {
+    height: 160px !important;
+}
 
+::ng-deep textarea.mediumAnswer {
+    height: 100px !important;
+}
 
-// QUESTION SELECTION CLASSES
+::ng-deep textarea.shortAnswer {
+    height: 52px !important;
+}
 
-::ng-deep .optionSelected 
-    background-color rgb(51, 204, 255) !important
 
+/* QUESTION SELECTION CLASSES*/
 
+::ng-deep .optionSelected {
+    background-color: rgb(51, 204, 255) !important;
+}
 
-::ng-deep div.hidden 
-    display none
 
+::ng-deep div.hidden {
+    display: none;
+}

From 75d255062a2a2f33a4c354fd70c3f08f3ab1f5eb Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Tue, 28 Nov 2023 17:50:55 -0600
Subject: [PATCH 6/9] Remove event emitters, select node event and selected
 tree node property, and use the activeFeature subscription instead to pull
 the file name. Added a function to extract file name from activeFeature
 display_path.

---
 .../asset-detail/asset-detail.component.ts       | 16 +++++++++++-----
 .../assets-panel/assets-panel.component.ts       |  5 -----
 .../file-tree-node/file-tree-node.component.ts   |  3 ---
 angular/src/app/services/geo-data.service.ts     |  3 +--
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/angular/src/app/components/asset-detail/asset-detail.component.ts b/angular/src/app/components/asset-detail/asset-detail.component.ts
index b8e4f054..21a32378 100644
--- a/angular/src/app/components/asset-detail/asset-detail.component.ts
+++ b/angular/src/app/components/asset-detail/asset-detail.component.ts
@@ -22,7 +22,6 @@ export class AssetDetailComponent implements OnInit {
   featureSource: string;
   activeProject: Project;
   safePointCloudUrl: SafeResourceUrl;
-  selectedTreeNode: PathTree<Feature>;
   title: string;
   constructor(
     private geoDataService: GeoDataService,
@@ -42,6 +41,12 @@ export class AssetDetailComponent implements OnInit {
         featureSource = featureSource.replace(/([^:])(\/{2,})/g, '$1/');
         this.featureSource = featureSource;
 
+        if (this.feature.assets.length && this.feature.assets[0].display_path) {
+          const fileName = this.extractFileName(this.feature.assets[0].display_path);
+          this.title = fileName;
+        } else {
+          this.title = this.feature.id.toString();
+        }
         if (this.feature.featureType() === 'point_cloud') {
           this.safePointCloudUrl = this.sanitizer.bypassSecurityTrustResourceUrl(featureSource + '/preview.html');
         } else {
@@ -55,10 +60,6 @@ export class AssetDetailComponent implements OnInit {
     this.projectsService.activeProject.subscribe((current) => {
       this.activeProject = current;
     });
-    this.geoDataService.selectNodeEvent.subscribe((selectedNode: PathTree<Feature>) => {
-      this.selectedTreeNode = selectedNode;
-      this.title = selectedNode.getPath();
-    });
   }
 
   openFileBrowserModal() {
@@ -88,6 +89,11 @@ export class AssetDetailComponent implements OnInit {
     this.bsModalService.show(ModalQuestionnaireViewerComponent, modalConfig);
   }
 
+  extractFileName(path: string): string {
+    const pathSegments = path.split('/');
+    return pathSegments.pop();
+  }
+
   close() {
     this.geoDataService.activeFeature = null;
   }
diff --git a/angular/src/app/components/assets-panel/assets-panel.component.ts b/angular/src/app/components/assets-panel/assets-panel.component.ts
index 3385b1b9..0c0a62bf 100644
--- a/angular/src/app/components/assets-panel/assets-panel.component.ts
+++ b/angular/src/app/components/assets-panel/assets-panel.component.ts
@@ -24,7 +24,6 @@ export class AssetsPanelComponent implements OnInit {
   displayFeatures: Array<Feature>;
   activeProject: Project;
   currentTreeListing: PathTree<Feature>;
-  selectedTreeNode: PathTree<Feature>;
 
   constructor(
     private geoDataService: GeoDataService,
@@ -55,9 +54,6 @@ export class AssetsPanelComponent implements OnInit {
     this.geoDataService.featureTree$.subscribe((next) => {
       this.currentTreeListing = next;
     });
-    this.geoDataService.selectNodeEvent.subscribe((selectedNode) => {
-      this.selectedTreeNode = selectedNode;
-    });
   }
 
   scrollToActiveFeature() {
@@ -98,7 +94,6 @@ export class AssetsPanelComponent implements OnInit {
     } else {
       this.streetviewService.activeAsset = null;
       this.geoDataService.activeFeature = node.getPayload();
-      this.geoDataService.selectNodeEvent.emit(node);
     }
   }
 }
diff --git a/angular/src/app/components/file-tree-node/file-tree-node.component.ts b/angular/src/app/components/file-tree-node/file-tree-node.component.ts
index e3f1a333..d5592f62 100644
--- a/angular/src/app/components/file-tree-node/file-tree-node.component.ts
+++ b/angular/src/app/components/file-tree-node/file-tree-node.component.ts
@@ -26,7 +26,6 @@ export class FileTreeNodeComponent implements OnInit, OnDestroy {
   @Input() isPublicView = false;
   @Input() node: PathTree<Feature>;
   @Output() clickEvent: EventEmitter<PathTree<Feature>> = new EventEmitter<PathTree<Feature>>();
-  @Output() selectNodeEvent: EventEmitter<PathTree<Feature>> = new EventEmitter<PathTree<Feature>>();
   public activeFeature: Feature;
   public activeStreetviewAsset: any;
   private activeFeatureSub: Subscription;
@@ -84,13 +83,11 @@ export class FileTreeNodeComponent implements OnInit, OnDestroy {
       this.displayChildren = !this.displayChildren;
     } else {
       this.clickEvent.emit(node);
-      this.selectNodeEvent.emit(node);
     }
   }
 
   onClickChild(item: PathTree<Feature>) {
     this.clickEvent.emit(item);
-    this.selectNodeEvent.emit(item);
   }
 
   delete(item: PathTree<Feature>) {
diff --git a/angular/src/app/services/geo-data.service.ts b/angular/src/app/services/geo-data.service.ts
index ad2756b4..508b7943 100644
--- a/angular/src/app/services/geo-data.service.ts
+++ b/angular/src/app/services/geo-data.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, EventEmitter } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { HttpClient, HttpEventType } from '@angular/common/http';
 import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
 import { LatLng } from 'leaflet';
@@ -61,7 +61,6 @@ export class GeoDataService {
 
   private _existingFeatureTypes: BehaviorSubject<Record<string, boolean>> = new BehaviorSubject<Record<string, boolean>>(existingFeatures);
   public readonly existingFeatureTypes: Observable<Record<string, boolean>> = this._existingFeatureTypes.asObservable();
-  public readonly selectNodeEvent: EventEmitter<PathTree<Feature>> = new EventEmitter<PathTree<Feature>>();
 
   constructor(
     private http: HttpClient,

From 4b99d28dfb77804fc5ac5062c6a69f50d1f440d9 Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Wed, 29 Nov 2023 10:31:34 -0600
Subject: [PATCH 7/9] Remove unused import

---
 .../src/app/components/asset-detail/asset-detail.component.ts    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/angular/src/app/components/asset-detail/asset-detail.component.ts b/angular/src/app/components/asset-detail/asset-detail.component.ts
index 21a32378..cc9d2af9 100644
--- a/angular/src/app/components/asset-detail/asset-detail.component.ts
+++ b/angular/src/app/components/asset-detail/asset-detail.component.ts
@@ -9,7 +9,6 @@ import { ModalQuestionnaireViewerComponent } from '../modal-questionnaire-viewer
 import { RemoteFile } from 'ng-tapis';
 import { TapisFilesService } from '../../services/tapis-files.service';
 import { EnvService } from '../../services/env.service';
-import { PathTree } from '../../models/path-tree';
 
 @Component({
   selector: 'app-asset-detail',

From 1bf4d4d7fe6ebd58f612a329a46804ea6ee04869 Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Wed, 29 Nov 2023 13:12:42 -0600
Subject: [PATCH 8/9] Take file naming out of try block

---
 .../asset-detail/asset-detail.component.ts          | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/angular/src/app/components/asset-detail/asset-detail.component.ts b/angular/src/app/components/asset-detail/asset-detail.component.ts
index cc9d2af9..38e3be00 100644
--- a/angular/src/app/components/asset-detail/asset-detail.component.ts
+++ b/angular/src/app/components/asset-detail/asset-detail.component.ts
@@ -39,13 +39,6 @@ export class AssetDetailComponent implements OnInit {
         // Strip out any possible double slashes or wso2 gets messed up
         featureSource = featureSource.replace(/([^:])(\/{2,})/g, '$1/');
         this.featureSource = featureSource;
-
-        if (this.feature.assets.length && this.feature.assets[0].display_path) {
-          const fileName = this.extractFileName(this.feature.assets[0].display_path);
-          this.title = fileName;
-        } else {
-          this.title = this.feature.id.toString();
-        }
         if (this.feature.featureType() === 'point_cloud') {
           this.safePointCloudUrl = this.sanitizer.bypassSecurityTrustResourceUrl(featureSource + '/preview.html');
         } else {
@@ -55,6 +48,12 @@ export class AssetDetailComponent implements OnInit {
         this.featureSource = null;
         this.safePointCloudUrl = null;
       }
+      if (this.feature.assets.length && this.feature.assets[0].display_path) {
+        const fileName = this.extractFileName(this.feature.assets[0].display_path);
+        this.title = fileName;
+      } else {
+        this.title = this.feature.id.toString();
+      }
     });
     this.projectsService.activeProject.subscribe((current) => {
       this.activeProject = current;

From fea1378f489caefd44dbe56e5492117a0244dd00 Mon Sep 17 00:00:00 2001
From: Sophia Massie <smmassie92@gmail.com>
Date: Wed, 29 Nov 2023 13:15:46 -0600
Subject: [PATCH 9/9] Remove diff

---
 .../src/app/components/asset-detail/asset-detail.component.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/angular/src/app/components/asset-detail/asset-detail.component.ts b/angular/src/app/components/asset-detail/asset-detail.component.ts
index 38e3be00..54ab6f90 100644
--- a/angular/src/app/components/asset-detail/asset-detail.component.ts
+++ b/angular/src/app/components/asset-detail/asset-detail.component.ts
@@ -39,6 +39,7 @@ export class AssetDetailComponent implements OnInit {
         // Strip out any possible double slashes or wso2 gets messed up
         featureSource = featureSource.replace(/([^:])(\/{2,})/g, '$1/');
         this.featureSource = featureSource;
+
         if (this.feature.featureType() === 'point_cloud') {
           this.safePointCloudUrl = this.sanitizer.bypassSecurityTrustResourceUrl(featureSource + '/preview.html');
         } else {