diff --git a/arches/app/media/js/viewmodels/widget.js b/arches/app/media/js/viewmodels/widget.js
index a85b27bd78d..da84027fc79 100644
--- a/arches/app/media/js/viewmodels/widget.js
+++ b/arches/app/media/js/viewmodels/widget.js
@@ -62,6 +62,12 @@ define([
             this.config = ko.observable(this.config);
         }
 
+        this.nodeCssClasses = ko.pureComputed(function() {
+            return [ko.unwrap(self.node?.alias),
+                self.widget?.widgetLookup[ko.unwrap(self.widget?.widget_id)].name
+                ].join(" ").trim();
+        });
+
         this.disposables = [];
 
         var subscribeConfigObservable = function(obs, key) {
diff --git a/arches/app/templates/views/components/widgets/base.htm b/arches/app/templates/views/components/widgets/base.htm
index 9ca49f2a2ae..b781d761238 100644
--- a/arches/app/templates/views/components/widgets/base.htm
+++ b/arches/app/templates/views/components/widgets/base.htm
@@ -9,15 +9,16 @@
 <!-- ko if: !configForm  && state === 'report' -->
 <!-- ko if: !ko.unwrap(hideEmptyNodes) || ko.unwrap(hideEmptyNodes) === true && displayValue() -->
 {% block report %}
-<dt data-bind="text: label"></dt>
-<dd data-bind="text: displayValue() || $root.translations.none"></dd>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<dd data-bind="text: displayValue() || $root.translations.none, class: nodeCssClasses"></dd>
 {% endblock report %}
 <!-- /ko -->
 <!-- /ko -->
 
 <!-- ko if: !configForm  && state === 'display_value' -->
 {% block display_value %}
-<span data-bind="text: displayValue() || $root.translations.none"></span>
+<span data-bind="text: displayValue() || $root.translations.none,
+    class: nodeCssClasses"></span>
 {% endblock display_value %}
 <!-- /ko -->
 
diff --git a/arches/app/templates/views/components/widgets/checkbox.htm b/arches/app/templates/views/components/widgets/checkbox.htm
index db44ee8e4ac..a4dab691810 100644
--- a/arches/app/templates/views/components/widgets/checkbox.htm
+++ b/arches/app/templates/views/components/widgets/checkbox.htm
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-label widget-input-label" data-bind="text:label"></span>
         <!-- ko if: node -->
diff --git a/arches/app/templates/views/components/widgets/concept-select.htm b/arches/app/templates/views/components/widgets/concept-select.htm
index b72ee35fe6e..7e293cfd91e 100644
--- a/arches/app/templates/views/components/widgets/concept-select.htm
+++ b/arches/app/templates/views/components/widgets/concept-select.htm
@@ -2,13 +2,13 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
-        <span class="control-label widget-input-label" data-bind="text:label"></span>
+        <span class="control-label widget-input-label" data-bind="text:label, class: nodeCssClasses"></span>
         <!-- ko if: node -->
         <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
         <!-- /ko -->
-        <div class="col-xs-12 resource-instance-wrapper">
+        <div class="col-xs-12 resource-instance-wrapper" data-bind="class: nodeCssClasses">
             <input style="display:inline-block;"
                 data-bind="
                     value: value,
@@ -29,11 +29,11 @@
         <span data-bind="text: $root.translations.placeholder"></span>
     </div>
     <div class="col-xs-12 pad-no crud-widget-container">
-        <input 
+        <input
             class="form-control input-md widget-input"
             data-bind="
                 attr: {placeholder: $root.translations.placeholder, 'aria-label': $root.translations.placeholder},
-                value: placeholder, 
+                value: placeholder,
                 valueUpdate: 'keyup'
             "
         >
@@ -59,13 +59,13 @@
 {% endblock config_form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 <!-- ko foreach: valueObjects -->
-    <dd data-bind="text: name">
+    <dd data-bind="text: name, class: $parent.nodeCssClasses">
     </dd>
 <!-- /ko -->
 <!-- ko if: valueObjects().length === 0 -->
-<dd>
+<dd data-bind="class: nodeCssClasses">
     <span data-bind="text: $root.translations.none"></span>
 </dd>
 <!-- /ko -->
diff --git a/arches/app/templates/views/components/widgets/datepicker.htm b/arches/app/templates/views/components/widgets/datepicker.htm
index fd4e5344452..7188525128d 100644
--- a/arches/app/templates/views/components/widgets/datepicker.htm
+++ b/arches/app/templates/views/components/widgets/datepicker.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-labx mesel widget-input-label" data-bind="text:label"></span>
         <!-- ko if: node -->
@@ -12,7 +12,7 @@
         <div class="col-xs-12">
             <div>
                 <div class="input-group date">
-                    <input type="text" data-bind="value: value, placeholder: placeholder, disable: disabled, attr: {'aria-label': label}, 
+                    <input type="text" data-bind="value: value, placeholder: placeholder, disable: disabled, attr: {'aria-label': label},
                         datepicker: {format: dateFormat, viewMode: viewMode, maxDate: maxDate, minDate: minDate}" class="form-control input-lg"
                         ><span class="input-group-addon date-icon"><i class="fa fa-calendar fa-lg date-icon"></i></span>
                 </div>
@@ -24,13 +24,13 @@
 {% endblock form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 <!-- ko if: value() !== null -->
-<dd data-bind="date: value(), dateFormat: dateFormat || $root.translations.noDateEntered"></dd>
+<dd data-bind="date: value(), dateFormat: dateFormat || $root.translations.noDateEntered, class: nodeCssClasses"></dd>
 <!-- /ko -->
 <!-- ko if: value() === null -->
 <dd>
-    <span data-bind="text: $root.translations.none"></span>
+    <span data-bind="text: $root.translations.none, class: nodeCssClasses"></span>
 </dd>
 <!-- /ko -->
 {% endblock report %}
@@ -40,12 +40,12 @@
     <span data-bind="text: $root.translations.minimumDate"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        id="datetimepickermin" 
-        class="form-control input-md widget-input" 
+    <input
+        id="datetimepickermin"
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.minimumDate, 'aria-label': $root.translations.minimumDate},
-            value: minDate, 
+            value: minDate,
             datepicker: {format: 'YYYY-MM-DD', viewMode: viewMode, minDate: false, maxDate: false}
         "
     >
@@ -54,12 +54,12 @@
     <span data-bind="text: $root.translations.maximumDate"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        id="datetimepickermax" 
-        class="form-control input-md widget-input" 
+    <input
+        id="datetimepickermax"
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.maximumDate, 'aria-label': $root.translations.maximumDate},
-            value: maxDate, 
+            value: maxDate,
             datepicker: {format: 'YYYY-MM-DD', viewMode: viewMode, minDate: false, maxDate: false}
         "
     >
@@ -68,14 +68,14 @@
     <span data-bind="text: $root.translations.viewMode"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <select 
+    <select
         data-bind="
             attr: {placeholder: $root.translations.viewMode, 'aria-label': $root.translations.viewMode},
-            options:viewModeOptions, 
-            optionsText:'name', 
-            optionsValue:'id', 
-            event: {change: onViewModeSelection}, 
-            value: viewMode, 
+            options:viewModeOptions,
+            optionsText:'name',
+            optionsValue:'id',
+            event: {change: onViewModeSelection},
+            value: viewMode,
             chosen: {width: '100%', disable_search: true}
         "
     ></select>
@@ -94,7 +94,7 @@
         </div>
     </div>
     <div class="toggle-container">
-        <span id="default-date-switcher" class="switch switch-small" data-bind="css: {'on': getdefault}, onEnterkeyClick, onSpaceClick, click: setdefault, 
+        <span id="default-date-switcher" class="switch switch-small" data-bind="css: {'on': getdefault}, onEnterkeyClick, onSpaceClick, click: setdefault,
             attr: {'aria-checked': getdefault, 'aria-labeledby': 'default-date-switcher-label', 'aria-describedby': 'default-date-switcher-context'}" tabindex="0" role="switch"><small></small></span>
             <div style="display:flex; flex-direction:row;">
                 <label id="default-date-switcher-label" class="arches-toggle-sm" data-bind="text: $root.translations.useDateOfDataEntry"></label>
diff --git a/arches/app/templates/views/components/widgets/edtf.htm b/arches/app/templates/views/components/widgets/edtf.htm
index 03b4e4434d2..d13aac10789 100644
--- a/arches/app/templates/views/components/widgets/edtf.htm
+++ b/arches/app/templates/views/components/widgets/edtf.htm
@@ -3,19 +3,19 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper" data-bind="let: {uid: Math.random().toString()}">
+<div class="row widget-wrapper" data-bind="let: {uid: Math.random().toString()}, class: nodeCssClasses">
     <!-- ko if: node -->
     <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
     <!-- /ko -->
     <div class="form-group">
-        <div class="widget-inline-tools-collapser" style="max-width: 600px;" 
-            data-bind="onEnterkeyClick, onSpaceClick, 
+        <div class="widget-inline-tools-collapser" style="max-width: 600px;"
+            data-bind="onEnterkeyClick, onSpaceClick,
                 click: function() { showEDTFFormats(!showEDTFFormats()); },
                 attr: {
-                    'aria-expanded': showEDTFFormats().toString(), 
-                    'aria-label': $root.translations.edtfFormats , 
+                    'aria-expanded': showEDTFFormats().toString(),
+                    'aria-label': $root.translations.edtfFormats ,
                     'aria-controls': uid
-                }" 
+                }"
             tabindex="0" role="button"
         >
             <span class="control-label widget-input-label" data-bind="text:label"></span><span>
@@ -46,7 +46,7 @@
 
                     <dl>
                         <dt>
-                            2021-04-12 
+                            2021-04-12
                             <span class="text-thin" data-bind="text: $root.translations.dayPrecisionEncoding"></span>
                         </dt>
                         <dd class="mar-btm">
@@ -54,7 +54,7 @@
                         </dd>
 
                         <dt>
-                            2021-04 
+                            2021-04
                             <span class="text-thin" data-bind="text: $root.translations.monthPrecisionEncoding"></span>
                         </dt>
                         <dd class="mar-btm">
@@ -62,7 +62,7 @@
                         </dd>
 
                         <dt>
-                            2021 
+                            2021
                             <span class="text-thin" data-bind="text: $root.translations.yearPrecisionEncoding"></span>
                         </dt>
                         <dd class="mar-btm">
@@ -115,8 +115,8 @@
           </div>
         <div class="col-xs-12">
             <input type="text" data-bind="
-                textInput: value, 
-                attr: {placeholder: placeholder, disabled: disabled, 'aria-label': label}" 
+                textInput: value,
+                attr: {placeholder: placeholder, disabled: disabled, 'aria-label': label}"
                 class="form-control input-lg widget-input">
         </div>
         <div class="col-xs-12" data-bind="if: value">
@@ -135,8 +135,8 @@
     <span data-bind="text: $root.translations.placeholder"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        class="form-control input-md widget-input" 
+    <input
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.placeholder, 'aria-label': $root.translations.placeholder},
             textInput: placeholder
@@ -148,8 +148,8 @@
     <span data-bind="text: $root.translations.defaultValue"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        class="form-control input-md widget-input" 
+    <input
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.defaultValue, 'aria-label': $root.translations.defaultValue},
             textInput: defaultValue
diff --git a/arches/app/templates/views/components/widgets/file.htm b/arches/app/templates/views/components/widgets/file.htm
index b0f385a8a7c..fd07db3bf18 100644
--- a/arches/app/templates/views/components/widgets/file.htm
+++ b/arches/app/templates/views/components/widgets/file.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-label widget-input-label" for="" data-bind="text:label"></span>
         <!-- ko if: node -->
@@ -54,13 +54,13 @@
                 <div class="file-upload-options">
                     <div class="file-upload-options-grow list-filter">
                     <!--ko if: filesJSON().length > 1-->
-                    
-                        <input 
+
+                        <input
                             data-bind="
                                 attr: {placeholder: $root.translations.findAFile + '...', 'aria-label': $root.translations.findAFile},
                                 textInput: filter
-                            " 
-                            type="text" 
+                            "
+                            type="text"
                             class="file-upload-filter"
                         >
                         <!-- Clear Search -->
@@ -140,11 +140,11 @@
     <span data-bind="text: $root.translations.acceptedFileTypes"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        class="form-control input-md widget-input" 
+    <input
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.exampleFileTypes, 'aria-label': $root.translations.acceptedFileTypes},
-            value: acceptedFiles, 
+            value: acceptedFiles,
             valueUpdate: 'keyup'
         "
     >
@@ -154,9 +154,9 @@
     <span data-bind="text: $root.translations.maxFileSize"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
-        class="form-control input-md widget-input" 
+    <input
+        type="number"
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.maxFileSize, 'aria-label': $root.translations.maxFileSize},
             value: maxFilesize
@@ -167,16 +167,16 @@
 {% endblock config_form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 
 <!-- ko if: uploadedFiles().length === 0 -->
-<dd>
+<dd data-bind="class: nodeCssClasses">
     <span data-bind="text: $root.translations.none"></span>
 </dd>
 <!-- /ko -->
 
 <!-- ko foreach: reportFiles() -->
-<dd>
+<dd data-bind="class: $parent.nodeCssClasses">
     <a data-bind="attr: {href: $parent.getFileUrl(url)}" target="_blank">
         <i class="ion ion-forward"></i>
         <span data-bind="text: name"></span>
@@ -185,7 +185,7 @@
 <!-- /ko -->
 
 <!-- ko if: reportImages().length > 0 -->
-<dd>
+<dd data-bind="class: nodeCssClasses">
     <div id="report-image-grid" class="report-image-grid">
         <!-- ko foreach: reportImages() -->
         <div class="rp-image-grid-item">
@@ -200,5 +200,5 @@
 {% endblock report %}
 
 {% block display_value %}
-<span data-bind="text: Number.isInteger(displayValue()) ? displayValue() + $root.translations.filesUploaded : displayValue()"></span>
+<span data-bind="text: Number.isInteger(displayValue()) ? displayValue() + $root.translations.filesUploaded : displayValue(), class: nodeCssClasses"></span>
 {% endblock display_value %}
diff --git a/arches/app/templates/views/components/widgets/iiif.htm b/arches/app/templates/views/components/widgets/iiif.htm
index 664c795ec2b..e4e917f4422 100644
--- a/arches/app/templates/views/components/widgets/iiif.htm
+++ b/arches/app/templates/views/components/widgets/iiif.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <label class="control-label widget-input-label" for="" data-bind="text:label"></label>
         <!-- ko if: node -->
@@ -21,10 +21,10 @@
     <span data-bind="text: $root.translations.defaultManifestUrl"></span>
 </div>
 <div class="col-xs-12 crud-widget-container">
-    <input 
-        type="" 
-        id="" 
-        class="form-control input-md widget-input" 
+    <input
+        type=""
+        id=""
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.enterManifestUrl},
             textInput: defaultManifest
@@ -34,12 +34,12 @@
 {% endblock config_form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 <!-- ko if: canvasConfigs.length === 0 -->
-<dd data-bind="text: displayValue() || $root.translations.none"></dd>
+<dd data-bind="text: displayValue() || $root.translations.none, class: nodeCssClasses"></dd>
 <!-- /ko -->
 <!-- ko if: canvasConfigs.length > 0 -->
-<div class="iiif-widget-report">
+<div class="iiif-widget-report" data-bind="class: nodeCssClasses">
 <!-- ko foreach: canvasConfigs -->
     <div class="iiif-leaflet" data-bind="leaflet: $data"></div>
 <!-- /ko -->
@@ -48,6 +48,6 @@
 {% endblock report %}
 
 {% block display_value %}
-<span data-bind="text: displayValue()"></span>
-<span data-bind="text: $root.translations.annotations"></span>
+<span data-bind="text: displayValue(), class: nodeCssClasses"></span>
+<span data-bind="text: $root.translations.annotations, class: nodeCssClasses"></span>
 {% endblock display_value %}
diff --git a/arches/app/templates/views/components/widgets/map.htm b/arches/app/templates/views/components/widgets/map.htm
index 0adce2e3a40..60f0c2c00da 100644
--- a/arches/app/templates/views/components/widgets/map.htm
+++ b/arches/app/templates/views/components/widgets/map.htm
@@ -3,7 +3,7 @@
 {% load template_tags %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <label class="control-label widget-input-label" for="" data-bind="text:label"></label>
         <!-- ko if: node -->
@@ -17,14 +17,14 @@
 {% endblock form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 <!-- ko if: summaryDetails.length === 0 -->
-<dd>
+<dd data-bind="class: nodeCssClasses">
     <span data-bind="text: $root.translations.none"></span>
 </dd>
 <!-- /ko -->
 <!-- ko ifnot: summaryDetails.length === 0  -->
-<dd data-bind="foreach: summaryDetails">
+<dd data-bind="foreach: summaryDetails, class: nodeCssClasses">
     <div style='margin-bottom:2px' data-bind="text: JSON.stringify($data.geometry)"></div>
 </dd>
 <!-- /ko -->
@@ -61,13 +61,13 @@
     <span data-bind="text: $root.translations.mapCenterLongitude"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
-        id="" 
-        class="form-control input-md widget-input" 
+    <input
+        type="number"
+        id=""
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.longitudeXCoordinate},
-            value: centerX, 
+            value: centerX,
             valueUpdate: 'keyup'
         "
     >
@@ -76,13 +76,13 @@
     <span data-bind="text: $root.translations.mapCenterLatitude"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
-        id="" 
-        class="form-control input-md widget-input" 
+    <input
+        type="number"
+        id=""
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.latitudeYCoordinate},
-            value: centerY, 
+            value: centerY,
             valueUpdate: 'keyup'
         "
     >
@@ -91,15 +91,15 @@
     <span data-bind="text: $root.translations.defaultZoom"></span>
 </div>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
-        min=1 
-        max=20 
-        id="" 
-        class="form-control input-md widget-input" 
+    <input
+        type="number"
+        min=1
+        max=20
+        id=""
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.zoomLevel},
-            value: zoom, 
+            value: zoom,
             valueUpdate: 'keyup'
         "
     >
@@ -107,6 +107,6 @@
 {% endblock config_form %}
 
 {% block display_value %}
-<span data-bind="text: displayValue()"></span>
-<span data-bind="text: $root.translations.features"></span>
+<span data-bind="text: displayValue(), class: nodeCssClasses"></span>
+<span data-bind="text: $root.translations.features, class: nodeCssClasses"></span>
 {% endblock display_value %}
diff --git a/arches/app/templates/views/components/widgets/node-value-select.htm b/arches/app/templates/views/components/widgets/node-value-select.htm
index 70cd53167a5..153086eeebe 100644
--- a/arches/app/templates/views/components/widgets/node-value-select.htm
+++ b/arches/app/templates/views/components/widgets/node-value-select.htm
@@ -3,7 +3,7 @@
 
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <label class="control-label widget-input-label" data-bind="text:label">
         </label>
@@ -32,11 +32,11 @@
     </div>
     <div class="col-xs-12 pad-no crud-widget-container">
         <div class='node-config-item'>
-        <input 
+        <input
             class="form-control input-md widget-input"
             data-bind="
                 attr: {placeholder: $root.translations.placeholder},
-                value: placeholder, 
+                value: placeholder,
                 valueUpdate: 'keyup'
             "
         >
@@ -58,8 +58,8 @@
 {% endblock config_form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
-<dd>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<dd data-bind="class: nodeCssClasses">
     <a data-bind="attr: { href: '#' + value() }, text: displayValue"></a>
 </dd>
 {% endblock report %}
diff --git a/arches/app/templates/views/components/widgets/number.htm b/arches/app/templates/views/components/widgets/number.htm
index fdfc4c1560c..6a5065c08e4 100644
--- a/arches/app/templates/views/components/widgets/number.htm
+++ b/arches/app/templates/views/components/widgets/number.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-label widget-input-label" data-bind="text:label"></span>
         <!-- ko if: node -->
@@ -30,8 +30,8 @@
 {% endblock form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
-<dd>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<dd data-bind="class: nodeCssClasses">
     <div class='number-widget-report'>
     <!-- ko if: displayValue -->
     <span data-bind="text: prefix(), css: {'number-prefix': prefix()}"></span>
@@ -55,13 +55,13 @@
     <span data-bind="text: $root.translations.placeholder"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="" 
+    <input
+        type=""
         id="input-placeholder"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.placeholder},
-            value: placeholder, 
+            value: placeholder,
             valueUpdate: 'keyup'
         "
     >
@@ -70,13 +70,13 @@
     <span data-bind="text: $root.translations.min"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
+    <input
+        type="number"
         id="input-min"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.min},
-            value: min, 
+            value: min,
             valueUpdate: 'keyup'
         "
     >
@@ -85,13 +85,13 @@
     <span data-bind="text: $root.translations.max"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
+    <input
+        type="number"
         id="input-max"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.max},
-            value: max, 
+            value: max,
             valueUpdate: 'keyup'
         "
     >
@@ -100,14 +100,14 @@
     <span data-bind="text: $root.translations.increment"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container" >
-    <input 
-        type="number" 
+    <input
+        type="number"
         id="input-step"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.incrementSize},
-            value: step, 
-            valueUpdate: 'keyup', 
+            value: step,
+            valueUpdate: 'keyup',
             disable: format
         "
     >
@@ -116,13 +116,13 @@
     <span data-bind="text: $root.translations.decimalPlaces"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
+    <input
+        type="number"
         id="input-precision"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.numberOfDecimalPlaces},
-            value: precision, 
+            value: precision,
             valueUpdate: 'keyup'
         "
     >
@@ -131,13 +131,13 @@
     <span data-bind="text: $root.translations.prefix"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="" 
+    <input
+        type=""
         id="input-prefix"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.fieldPrefix},
-            value: prefix, 
+            value: prefix,
             valueUpdate: 'keyup'
         "
     >
@@ -146,13 +146,13 @@
     <span data-bind="text: $root.translations.suffix"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="" 
+    <input
+        type=""
         id="input-suffix"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.fieldSuffix},
-            value: suffix, 
+            value: suffix,
             valueUpdate: 'keyup'
         "
     >
@@ -161,31 +161,31 @@
     <span data-bind="text: $root.translations.defaultValue"></span>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-    <input 
-        type="number" 
+    <input
+        type="number"
         id="input-defaultValue"
-        class="form-control input-md widget-input" 
+        class="form-control input-md widget-input"
         data-bind="
             attr: {placeholder: $root.translations.defaultValue},
-            value: defaultValue, 
+            value: defaultValue,
             valueUpdate: 'keyup'
         "
     >
 </div>
 <label for="input-format" class="control-label">
-    <span data-bind="text: $root.translations.format"></span> 
+    <span data-bind="text: $root.translations.format"></span>
     <a href="http://numeraljs.com/#format" target="_blank">
         <span data-bind="text: '(' + $root.translations.viewValidFormats + ')'"></span>
     </a>
 </label>
 <div class="col-xs-12 pad-no crud-widget-container">
-  <input 
-    type="" 
+  <input
+    type=""
     id="input-format"
-    class="form-control input-md widget-input" 
+    class="form-control input-md widget-input"
     data-bind="
         attr: {placeholder: $root.translations.format},
-        value: format, 
+        value: format,
         valueUpdate: 'keyup'
     "
 >
@@ -195,14 +195,14 @@
         <span data-bind="text: $root.translations.disabled"></span>
     </div>
     <div class="pad-no">
-        <div 
+        <div
             data-bind="
-                component: { 
-                    name: 'views/components/simple-switch', 
+                component: {
+                    name: 'views/components/simple-switch',
                     params: {
-                        value: uneditable, 
+                        value: uneditable,
                         config:{
-                            label: $root.translations.disableEditing, 
+                            label: $root.translations.disableEditing,
                             subtitle: $root.translations.preventUsersFromEditingValue
                         }
                     }
diff --git a/arches/app/templates/views/components/widgets/radio-boolean.htm b/arches/app/templates/views/components/widgets/radio-boolean.htm
index 17ed799ed81..d176a693b8e 100644
--- a/arches/app/templates/views/components/widgets/radio-boolean.htm
+++ b/arches/app/templates/views/components/widgets/radio-boolean.htm
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
   <div class="form-group">
       <div style="display:flex; flex-direction: row"><div><p class="control-label widget-input-label" data-bind="text:label"></p></div><div>
           <!-- ko if: node -->
@@ -11,11 +11,11 @@
       </div></div>
       <div class="col-xs-12">
         <div class="pad-hor" role="radiogroup" data-bind="attr:{'aria-label': label}">
-            <label data-bind="css: { 'active': value() === true, 'disabled': disabled }, onEnterkeyClick, onSpacekeyClick, click: function(e){setValue(true)}, attr: {'aria-checked': value() === true}" 
+            <label data-bind="css: { 'active': value() === true, 'disabled': disabled }, onEnterkeyClick, onSpacekeyClick, click: function(e){setValue(true)}, attr: {'aria-checked': value() === true}"
                 class="form-radio form-normal form-text" tabindex="0" role="radio">
                 <input type="radio" name="stat-w-label" data-bind="checked: value() === true"><span data-bind="text:node.config.trueLabel"></span>
             </label>
-            <label data-bind="css: { 'active': value() === false, 'disabled': disabled }, onEnterkeyClick, onSpacekeyClick, click: function(e){setValue(false)}, attr: {'aria-checked': value() === false}" 
+            <label data-bind="css: { 'active': value() === false, 'disabled': disabled }, onEnterkeyClick, onSpacekeyClick, click: function(e){setValue(false)}, attr: {'aria-checked': value() === false}"
                 class="form-radio form-normal form-text" tabindex="0" role="radio">
                 <input type="radio" name="stat-w-label" data-bind="checked: value() === false"><span data-bind="text:node.config.falseLabel"></span>
             </label>
@@ -31,11 +31,11 @@
 </div>
 <div class="col-xs-12" style="display:flex; flex-direction: column; height: 50px">
     <div class="pad-hor" role="radiogroup" data-bind="attr:{'aria-label': $root.translations.defaultValue}">
-        <label data-bind="css: { 'active': defaultValue() === true }, onEnterkeyClick, onSpacekeyClick, click: function(e){setDefaultValue(true)}, attr: {'aria-checked': defaultValue() === true}" 
+        <label data-bind="css: { 'active': defaultValue() === true }, onEnterkeyClick, onSpacekeyClick, click: function(e){setDefaultValue(true)}, attr: {'aria-checked': defaultValue() === true}"
             class="form-radio form-normal form-text" tabindex="0" role="radio">
             <input type="radio" name="stat-w-label" data-bind="checked: defaultValue() === true"><span data-bind="text: node.config.trueLabel"></span>
         </label>
-        <label data-bind="css: { 'active': defaultValue() === false }, onEnterkeyClick, onSpacekeyClick, click: function(e){setDefaultValue(false)}, attr: {'aria-checked': defaultValue() === false}" 
+        <label data-bind="css: { 'active': defaultValue() === false }, onEnterkeyClick, onSpacekeyClick, click: function(e){setDefaultValue(false)}, attr: {'aria-checked': defaultValue() === false}"
             class="form-radio form-normal form-text" tabindex="0" role="radio">
             <input type="radio" name="stat-w-label" data-bind="checked: defaultValue() === false"><span data-bind="text: node.config.falseLabel"></span>
         </label>
diff --git a/arches/app/templates/views/components/widgets/radio.htm b/arches/app/templates/views/components/widgets/radio.htm
index 326d1e7c1fc..6f3fff5dddd 100644
--- a/arches/app/templates/views/components/widgets/radio.htm
+++ b/arches/app/templates/views/components/widgets/radio.htm
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <span class="control-label widget-input-label" data-bind="text:label"></span>
         <!-- ko if: node -->
@@ -68,4 +68,4 @@
     </div>
 </div>
 
-{% endblock config_form %}
\ No newline at end of file
+{% endblock config_form %}
diff --git a/arches/app/templates/views/components/widgets/resource-instance-select.htm b/arches/app/templates/views/components/widgets/resource-instance-select.htm
index 643764f42c4..5c9ac3700a6 100644
--- a/arches/app/templates/views/components/widgets/resource-instance-select.htm
+++ b/arches/app/templates/views/components/widgets/resource-instance-select.htm
@@ -5,7 +5,7 @@
 {% block form %}
 <!--ko let: {self: $data} -->
 <!-- ko ifnot: self.displayOntologyTable -->
-<div class="row" style="margin: 0px;">
+<div class="row" style="margin: 0px;" data-bind="class: nodeCssClasses">
     <div class="col-xs-12 resource-instance-wrapper">
         <input style="width:30%; display:inline-block;"
             data-bind="
@@ -17,7 +17,7 @@
 </div>
 <!-- /ko -->
 <!-- ko if: self.displayOntologyTable -->
-<div class="row widget-wrapper" data-bind="visible: !newResourceInstance()">
+<div class="row widget-wrapper" data-bind="visible: !newResourceInstance(), class: nodeCssClasses">
     <div class="form-group">
         <label class="control-label widget-input-label" data-bind="text:label">
         </label>
@@ -42,12 +42,12 @@
         <!-- ko if: !!value() && value().length > 5-->
         <div class="rr-widget-filter-panel">
             <div class="list-filter">
-                <input 
-                    type="text" 
-                    class="form-control" 
-                    style="width: 225px; height:28px;" 
+                <input
+                    type="text"
+                    class="form-control"
+                    style="width: 225px; height:28px;"
                     data-bind="
-                        attr: {placeholder: $root.translations.filter + '...'}, 
+                        attr: {placeholder: $root.translations.filter + '...'},
                         textInput: filter
                     "
                 ></input>
@@ -110,14 +110,14 @@
 
                                     <!-- Property -->
                                     <span class="col-xs-12">
-                                        <input 
-                                            style="max-width:100%; display:inline-block; margin: 3px 0px;" 
+                                        <input
+                                            style="max-width:100%; display:inline-block; margin: 3px 0px;"
                                             data-bind="
                                                 select2Query: {
                                                     select2Config: self.getSelect2ConfigForOntologyProperties(
-                                                        $data.ontologyProperty, 
-                                                        self.rootOntologyClass, 
-                                                        $data.ontologyClass(), 
+                                                        $data.ontologyProperty,
+                                                        self.rootOntologyClass,
+                                                        $data.ontologyClass(),
                                                         $root.translations.selectAnOntologyProperty
                                                     )
                                                 }
@@ -145,14 +145,14 @@
 
                                     <!-- Property -->
                                     <span class="col-xs-12">
-                                        <input 
-                                            style="width:100%; display:inline-block; margin: 3px 0px;" 
+                                        <input
+                                            style="width:100%; display:inline-block; margin: 3px 0px;"
                                             data-bind="
                                                 select2Query: {
                                                     select2Config: self.getSelect2ConfigForOntologyProperties(
-                                                        $data.inverseOntologyProperty, 
-                                                        $data.ontologyClass(), 
-                                                        self.rootOntologyClass, 
+                                                        $data.inverseOntologyProperty,
+                                                        $data.ontologyClass(),
+                                                        self.rootOntologyClass,
                                                         $root.translations.selectAnOntologyProperty
                                                     )
                                                 }
@@ -219,11 +219,11 @@
         <span data-bind="text: $root.translations.placeholder"></span>
     </div>
     <div class="col-xs-12 pad-no crud-widget-container">
-        <input 
+        <input
             class="form-control input-md widget-input"
             data-bind="
                 attr: {placeholder: $root.translations.placeholder},
-                value: placeholder, 
+                value: placeholder,
                 valueUpdate: 'keyup'
             "
         >
@@ -249,7 +249,7 @@
             <div class="row" style="margin: 0px;">
                 <div class="col-xs-12 resource-instance-wrapper">
                     <input style="width:30%; display:inline-block;" data-bind="
-                  
+
                             select2Query: {
                                 select2Config: select2Config
                             }
@@ -257,14 +257,14 @@
                 </div>
             </div>
         </div>
-    
+
         <div class="rr-widget">
             <!-- ko if: !!value() && value().length > 5-->
             <div class="rr-widget-filter-panel">
                 <div class="list-filter">
-                    <input 
-                        type="text" 
-                        class="form-control" 
+                    <input
+                        type="text"
+                        class="form-control"
                         style="width: 225px; height:28px;"
                         data-bind="
                             attr: {placeholder: $root.translations.filter + '...'},
@@ -277,7 +277,7 @@
                 </div>
             </div>
             <!-- /ko -->
-    
+
             <!-- ko if: relationshipsInFilter().length > 0-->
             <div class="rr-table">
                 <div data-bind='foreach: relationshipsInFilter' style="display: flex; flex-direction: column;">
@@ -309,7 +309,7 @@
                         </div>
                         <div class="rr-table-row-panel"
                             data-bind="visible: self.selectedResourceRelationship() === $data, if: self.selectedResourceRelationship() === $data, css: { 'rr-table-border': self.selectedResourceRelationship() === $data} ">
-    
+
                             <div class="row">
                                 <!-- Relationship from instance to rr -->
                                 <div class="row" style="margin-bottom: 10px;">
@@ -317,66 +317,66 @@
                                         <span data-bind="text: $root.translations.resourcesRelationshipTo"></span>
                                         <span data-bind="text: $data.resourceName"></span>
                                     </label>
-    
+
                                     <div class="row" style="padding: 0px 12px; margin-bottom: 10px;">
                                         <!-- Instance name -->
                                         <span class="col-xs-12" style="text-align: left;"
                                             data-bind="text: self.resourceInstanceDisplayName + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'">
                                         </span>
-    
+
                                         <!-- Property -->
                                         <span class="col-xs-12">
-                                            <input 
+                                            <input
                                                 style="max-width:100%; display:inline-block; margin: 3px 0px;"
                                                 data-bind="
                                                     select2Query: {
                                                         select2Config: self.getSelect2ConfigForOntologyProperties(
-                                                            $data.ontologyProperty, 
-                                                            self.rootOntologyClass, 
-                                                            $data.ontologyClass(), 
+                                                            $data.ontologyProperty,
+                                                            self.rootOntologyClass,
+                                                            $data.ontologyClass(),
                                                             $root.translations.selectAnOntologyProperty
                                                         )
                                                     }
                                                 "
                                             >
                                         </span>
-    
+
                                         <!-- rr name -->
                                         <span class="col-xs-12"
                                             data-bind="text: $data.resourceName() + ' (' + self.makeFriendly($data.ontologyClass()) + ')'"></span>
                                     </div>
                                 </div>
-    
+
                                 <!-- Relationship from rr to instance -->
                                 <div class="row">
                                     <label class="col-xs-12" style="font-weight: bold;">
                                         <span data-bind="text: $data.resourceName"></span>
                                         <span data-bind="text: $root.translations.relationshipToResource"></span>
                                     </label>
-    
+
                                     <div class="row" style="padding: 0px 12px; margin-bottom: 10px;">
                                         <!-- rr name -->
                                         <span class="col-xs-12" style="text-align: left;"
                                             data-bind="text: $data.resourceName() + ' (' + self.makeFriendly($data.ontologyClass()) + ')'">
                                         </span>
-    
+
                                         <!-- Property -->
                                         <span class="col-xs-12">
-                                            <input 
+                                            <input
                                                 style="width:100%; display:inline-block; margin: 3px 0px;"
                                                 data-bind="
                                                     select2Query: {
                                                         select2Config: self.getSelect2ConfigForOntologyProperties(
-                                                            $data.inverseOntologyProperty, 
-                                                            $data.ontologyClass(), 
-                                                            self.rootOntologyClass, 
+                                                            $data.inverseOntologyProperty,
+                                                            $data.ontologyClass(),
+                                                            self.rootOntologyClass,
                                                             $root.translations.selectAnOntologyProperty
                                                         )
                                                     }
                                                 "
                                             >
                                         </span>
-    
+
                                         <!-- Instance name -->
                                         <span class="col-xs-12"
                                             data-bind="text: self.resourceInstanceDisplayName + ' (' + self.makeFriendly(self.rootOntologyClass) + ')'">
@@ -390,11 +390,11 @@
             </div>
             <!-- /ko -->
         </div>
-    
+
         <div data-bind="if: !!value() && value().hasOwnProperty('length') && value().length > 1">
             <div class='file-workbench-filecount' data-bind='text: value().length + $root.translations.relationships'></div>
         </div>
-    
+
     </div>
     <!-- /ko -->
     <!-- /ko -->
@@ -402,15 +402,16 @@
 {% endblock config_form %}
 
 {% block report %}
-<dt data-bind="text: label"></dt>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
 <!-- ko foreach: value -->
 <dd>
-    <a data-bind="text: resourceName, attr: { href: $parent.resourceReportUrl+ko.unwrap(resourceId) }" target="_blank"></a>
+    <a data-bind="text: resourceName, attr: { href: $parent.resourceReportUrl+ko.unwrap(resourceId) }
+                  , class: $parent.nodeCssClasses" target="_blank"></a>
 </dd>
 <!-- /ko -->
 <!-- ko if: (!!value() && value().length === 0) || value() === null -->
 <dd>
-    <span data-bind="text: $root.translations.none"></span>
+    <span data-bind="text: $root.translations.none, class: nodeCssClasses"></span>
 </dd>
 <!-- /ko -->
 {% endblock report %}
diff --git a/arches/app/templates/views/components/widgets/rich-text.htm b/arches/app/templates/views/components/widgets/rich-text.htm
index b87c8a80e3a..72417e81df2 100644
--- a/arches/app/templates/views/components/widgets/rich-text.htm
+++ b/arches/app/templates/views/components/widgets/rich-text.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <div class="widget-inline-tools-collapser" data-bind=" click: function() {
             showi18nOptions(!showi18nOptions());
@@ -54,16 +54,16 @@
             </div>
         </div>
         <div class="col-xs-12">
-            <textarea 
-                rows="10" 
-                cols="80" 
+            <textarea
+                rows="10"
+                cols="80"
                 data-bind="
-                    ckeditor: currentText, 
-                    language: currentLanguage.code, 
-                    direction: currentDirection, 
-                    placeholder: placeholder, 
-                    ckeditorOptions: {},  
-                    valueUpdate: 'afterkeydown', 
+                    ckeditor: currentText,
+                    language: currentLanguage.code,
+                    direction: currentDirection,
+                    placeholder: placeholder,
+                    ckeditorOptions: {},
+                    valueUpdate: 'afterkeydown',
                     attr: {disabled: disabled}
                 "></textarea>
         </div>
@@ -76,18 +76,18 @@
     <span data-bind="text: $root.translations.placeholder"></span>
 </div>
 
-<textarea 
-    rows="10" 
-    cols="80" 
-    class="form-control input-md widget-input" 
+<textarea
+    rows="10"
+    cols="80"
+    class="form-control input-md widget-input"
     data-bind="
-        ckeditor: defaultText, 
+        ckeditor: defaultText,
         isConfigForm: true,
-        language: currentLanguage.code, 
+        language: currentLanguage.code,
         direction: currentDirection,
         placeholder: placeholder,
-        ckeditorOptions: {},  
-        valueUpdate: 'afterkeydown', 
+        ckeditorOptions: {},
+        valueUpdate: 'afterkeydown',
         attr: {disabled: disabled}
     "
 ></textarea>
@@ -95,21 +95,21 @@
 
 {% block report %}
 <!-- ko if: !ko.unwrap(hideEmptyNodes) || (ko.unwrap(hideEmptyNodes) === true && !!ko.unwrap(currentText) ) -->
-<dt data-bind="text: label"></dt>
-<dd data-bind="html: strippedValue || $root.translations.none"></dd>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<dd data-bind="html: strippedValue || $root.translations.none, class: nodeCssClasses"></dd>
 <!-- /ko -->
 {% endblock report %}
 
 {% block display_value %}
 <!-- ko if: displayValue() && currentLanguage() && displayValue()[currentLanguage().code] &&  displayValue()[currentLanguage().code]['value'] && !ko.unwrap(displayfullvalue) -->
 <em>
-    <span data-bind="text: '[' + $root.translations.richText + ']'"></span>
+    <span data-bind="text: '[' + $root.translations.richText + ']', class: nodeCssClasses"></span>
 </em>
 <!-- /ko -->
 <!-- ko if: displayValue() && displayValue()[currentLanguage().code] &&  displayValue()[currentLanguage().code]['value'] && ko.unwrap(displayfullvalue) === true -->
-<div data-bind="html: displayValue() && displayValue()[currentLanguage().code] &&  displayValue()[currentLanguage().code]['value'] ? strippedValue : $root.translations.none"></div>
+<div data-bind="html: displayValue() && displayValue()[currentLanguage().code] &&  displayValue()[currentLanguage().code]['value'] ? strippedValue : $root.translations.none, class: nodeCssClasses"></div>
 <!-- /ko -->
 <!-- ko if: !displayValue() || !displayValue()[currentLanguage().code] || !displayValue()[currentLanguage().code]['value'] -->
-<span data-bind="text: $root.translations.none"></span>
+<span data-bind="text: $root.translations.none, class: nodeCssClasses"></span>
 <!-- /ko -->
 {% endblock display_value %}
diff --git a/arches/app/templates/views/components/widgets/select.htm b/arches/app/templates/views/components/widgets/select.htm
index 77156a40e1e..c7fa060fab3 100644
--- a/arches/app/templates/views/components/widgets/select.htm
+++ b/arches/app/templates/views/components/widgets/select.htm
@@ -3,7 +3,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <label class="control-label widget-input-label" data-bind="text:label">
         </label>
@@ -34,11 +34,11 @@
         <span data-bind="text: $root.translations.placeholder"></span>
     </div>
     <div class="col-xs-12 pad-no crud-widget-container">
-        <input 
+        <input
             class="form-control input-md widget-input"
             data-bind="
                 attr: {placeholder: $root.translations.placeholder},
-                value: placeholder, 
+                value: placeholder,
                 valueUpdate: 'keyup'"
             >
     </div>
diff --git a/arches/app/templates/views/components/widgets/switch.htm b/arches/app/templates/views/components/widgets/switch.htm
index d7e2bbfec52..390bf7aa2a8 100644
--- a/arches/app/templates/views/components/widgets/switch.htm
+++ b/arches/app/templates/views/components/widgets/switch.htm
@@ -2,8 +2,8 @@
 {% load i18n %}
 
 {% block form %}
-<div class="toggle-container" data-bind="let: {uid: Math.random().toString()}">
-    <span class="switch switch-small switch-widget" data-bind="css: {'on': getvalue() === true, 'null': getvalue() === null, 'disabled': disabled }, 
+<div class="toggle-container" data-bind="let: {uid: Math.random().toString()}, class: nodeCssClasses">
+    <span class="switch switch-small switch-widget" data-bind="css: {'on': getvalue() === true, 'null': getvalue() === null, 'disabled': disabled },
           onEnterkeyClick, onSpaceClick, click: setvalue, attr: {'aria-checked': getariavalue(), 'aria-label': label() + ', ' + localizedSubtitle()}" tabindex="0" role="checkbox"
     ><small></small></span>
             <div style="display:flex; flex-direction:row;">
@@ -29,8 +29,8 @@
   <span data-bind="text: $root.translations.defaultValue"></span>
 </div>
 <div class="toggle-container" data-bind="let: {uid: Math.random().toString()}">
-    <span class="switch switch-small switch-widget" data-bind="css: {'on': getdefault() === true, 'null': getdefault() === null}, 
-          onEnterkeyClick, onSpaceClick, click: setdefault, attr: {'aria-checked': getariadefault, 'aria-label': label() + ', ' + localizedSubtitle()}" 
+    <span class="switch switch-small switch-widget" data-bind="css: {'on': getdefault() === true, 'null': getdefault() === null},
+          onEnterkeyClick, onSpaceClick, click: setdefault, attr: {'aria-checked': getariadefault, 'aria-label': label() + ', ' + localizedSubtitle()}"
           tabindex="0" tabindex="0" role="checkbox"
     ><small></small></span>
             <div style="display:flex; flex-direction:row;">
diff --git a/arches/app/templates/views/components/widgets/text.htm b/arches/app/templates/views/components/widgets/text.htm
index 9d37b185f32..5fd14a79df5 100644
--- a/arches/app/templates/views/components/widgets/text.htm
+++ b/arches/app/templates/views/components/widgets/text.htm
@@ -3,14 +3,14 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper" data-bind="let: {uid: Math.random().toString()}">
+<div class="row widget-wrapper" data-bind="let: {uid: Math.random().toString()}, class: nodeCssClasses">
     <div class="form-group" style="position: relative;">
         <div style="max-width: 600px; position: relative">
             <div class="widget-inline-tools-collapser" tabindex="0" role="button"
-                data-bind="onEnterkeyClick, onSpaceClick, 
+                data-bind="onEnterkeyClick, onSpaceClick,
                     click: function() { showi18nOptions(!showi18nOptions()); },
                     attr: {
-                        'aria-expanded': showi18nOptions().toString(), 
+                        'aria-expanded': showi18nOptions().toString(),
                         'aria-label': label() + ' ' + $root.translations.languageSettings,
                         'aria-controls': uid
                     },
@@ -31,13 +31,13 @@
                 <div class="i18n-style-tools-panel">
                     <div style="display: flex; flex-direction: column; max-width:600px">
                         <span class="control-label widget-input-label" data-bind="text: $root.translations.language"></span>
-                        <select 
-                            style="flex:1" 
-                            name="language" 
+                        <select
+                            style="flex:1"
+                            name="language"
                             data-bind="
-                                options: languages, 
-                                optionsText: function(item){return item.name + ' (' + item.code + ')'}, 
-                                value: currentLanguage, 
+                                options: languages,
+                                optionsText: function(item){return item.name + ' (' + item.code + ')'},
+                                value: currentLanguage,
                                 chosen: {width:'100%'},
                                 attr: {'aria-label': $root.translations.language}
                             "
@@ -63,8 +63,8 @@
             </div>
             <div class="col-xs-12" style="display:flex;flex-wrap: wrap;flex-direction: column;">
                 <input type="text" style="flex:1" class="form-control input-lg widget-input"
-                    data-bind="textInput: currentText, 
-                        attr: {placeholder: placeholder, maxlength: maxLength, disabled: disable, 'aria-label': label, dir: currentDirection}
+                    data-bind="textInput: currentText,
+                        attr: {placeholder: placeholder, maxlength: maxLength, disabled: disable, 'aria-label': label, dir: currentDirection},
                 ">
             </div>
         </div>
@@ -102,10 +102,10 @@
 <div class="form-group" style="position: relative;" data-bind="let: {uid: Math.random().toString()}">
     <div style="max-width: 600px; position: relative">
     <div class="widget-inline-tools-collapser" tabindex="0" role="button"
-        data-bind="onEnterkeyClick, onSpaceClick, 
+        data-bind="onEnterkeyClick, onSpaceClick,
             click: function() { showi18nOptions(!showi18nOptions()); },
             attr: {
-                'aria-expanded': showi18nOptions().toString(), 
+                'aria-expanded': showi18nOptions().toString(),
                 'aria-label': $root.translations.defaultValue + ' ' + $root.translations.languageSettings,
                 'aria-controls': uid,
             },
@@ -126,13 +126,13 @@
         <div class="i18n-style-tools-panel">
             <div style="display: flex; flex-direction: column; max-width:600px">
                 <span class="widget-input-label" data-bind="text: $root.translations.language"></span>
-                <select 
-                    style="flex:1" 
-                    name="language" 
+                <select
+                    style="flex:1"
+                    name="language"
                     data-bind="
-                        options: languages, 
-                        optionsText: function(item){return item.name + ' (' + item.code + ')'}, 
-                        value: currentDefaultLanguage, 
+                        options: languages,
+                        optionsText: function(item){return item.name + ' (' + item.code + ')'},
+                        value: currentDefaultLanguage,
                         chosen: {width:'100%'},
                         attr: {'aria-label': $root.translations.language}
                     "
@@ -157,8 +157,8 @@
         </div>
     </div>
     <div class="col-xs-12" style="display:flex;flex-wrap: wrap;flex-direction: column;">
-        <input type="text" style="flex:1" id="input-default-value" class="form-control input-lg widget-input" 
-            data-bind="textInput: currentDefaultText, 
+        <input type="text" style="flex:1" id="input-default-value" class="form-control input-lg widget-input"
+            data-bind="textInput: currentDefaultText,
                 attr: {placeholder: placeholder, maxlength: maxLength, disabled: disable, dir: currentDefaultDirection, 'aria-label': $root.translations.defaultValue}
         ">
     </div>
@@ -186,15 +186,17 @@
 
 <!-- ko if: !configForm  && state === 'display_value' -->
 {% block display_value %}
-<span data-bind="text: displayValue && displayValue() && currentLanguage() && displayValue()[currentLanguage().code] && displayValue()[currentLanguage().code]['value'] ? displayValue()[currentLanguage().code]['value'] : '' || $root.translations.none"></span>
+<span data-bind="text: displayValue && displayValue() && currentLanguage() && displayValue()[currentLanguage().code] && displayValue()[currentLanguage().code]['value'] ? displayValue()[currentLanguage().code]['value'] : '' || $root.translations.none
+                 , class: nodeCssClasses"></span>
 {% endblock display_value %}
 <!-- /ko -->
 
 <!-- ko if: !configForm  && state === 'report' -->
 {% block report %}
 <!-- ko if: !ko.unwrap(hideEmptyNodes) || (ko.unwrap(hideEmptyNodes) === true && !!ko.unwrap(currentText) ) -->
-<dt data-bind="text: label"></dt>
-<dd data-bind="text: displayValue() && currentLanguage() && displayValue()[currentLanguage().code] && displayValue()[currentLanguage().code]['value'] ? displayValue()[currentLanguage().code]['value'] : $root.translations.none"></dd>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<dd data-bind="text: displayValue() && currentLanguage() && displayValue()[currentLanguage().code] && displayValue()[currentLanguage().code]['value'] ? displayValue()[currentLanguage().code]['value'] : $root.translations.none
+               , class: nodeCssClasses"></dd>
 <!-- /ko -->
 {% endblock report %}
 <!-- /ko -->
diff --git a/arches/app/templates/views/components/widgets/urldatatype.htm b/arches/app/templates/views/components/widgets/urldatatype.htm
index 79a2c08dc38..4b59a4b3f08 100644
--- a/arches/app/templates/views/components/widgets/urldatatype.htm
+++ b/arches/app/templates/views/components/widgets/urldatatype.htm
@@ -2,7 +2,7 @@
 {% load i18n %}
 
 {% block form %}
-<div class="row widget-wrapper">
+<div class="row widget-wrapper" data-bind="class: nodeCssClasses">
     <div class="form-group">
         <!-- ko if: node -->
         <i data-bind="css: {'ion-asterisk widget-label-required': node.isrequired}"></i>
@@ -65,8 +65,8 @@
 
 
 {% block report %}
-<dt data-bind="text: label"></dt>
-<dd>
+<dt data-bind="text: label, class: nodeCssClasses"></dt>
+<dd data-bind="class: nodeCssClasses">
     <div style='margin-bottom:2px'>
         <a data-bind="attr: {href: url}, style: { color: link_color }">
             <span data-bind="text: urlPreviewText()"></span>
@@ -76,7 +76,7 @@
 {% endblock report %}
 
 {% block display_value %}
-<a data-bind="attr: {href: url}, style: { color: link_color }">
+<a data-bind="attr: {href: url}, style: { color: link_color }, class: nodeCssClasses">
     <span data-bind="text: urlPreviewText()"></span>
 </a>
-{% endblock display_value %}
\ No newline at end of file
+{% endblock display_value %}