diff --git a/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/portlets/_view-roles.scss b/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/portlets/_view-roles.scss
index 70283bef47cf..b9bede538760 100644
--- a/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/portlets/_view-roles.scss
+++ b/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/portlets/_view-roles.scss
@@ -1,6 +1,7 @@
 .view-roles,
 .view-roles .portlet-sidebar {
     height: 100%;
+    overflow: auto;
 }
 
 .view-roles {
@@ -31,7 +32,8 @@
 }
 
 .view-roles__tree {
-    height: 100%;
+    height: auto;
+    padding-bottom: $spacing-2;
 }
 
 .view-roles__tabs,
diff --git a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css
index 4ce75a31e324..20d5f2b44cd4 100644
--- a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css
+++ b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css
@@ -3060,6 +3060,25 @@
   */
   --color-background: #3a3847;
   --empty-message: "";
+  /* primeflex https://primeflex.org/theming  */
+  --primary-100: var(--color-palette-primary-100);
+  --primary-200: var(--color-palette-primary-200);
+  --primary-300: var(--color-palette-primary-300);
+  --primary-400: var(--color-palette-primary-400);
+  --primary-500: var(--color-palette-primary-500);
+  --primary-600: var(--color-palette-primary-600);
+  --primary-700: var(--color-palette-primary-700);
+  --primary-800: var(--color-palette-primary-800);
+  --primary-900: var(--color-palette-primary-900);
+  --gray-100: #fafafb;
+  --gray-200: #f3f3f4;
+  --gray-300: #ebecef;
+  --gray-400: #d1d4db;
+  --gray-500: #afb3c0;
+  --gray-600: #8d92a5;
+  --gray-700: #6c7389;
+  --gray-800: #515667;
+  --gray-900: #3d404d;
 }
 
 /*
@@ -3184,7 +3203,7 @@
 }
 
 .dijitPlaceHolder {
-  color: #afb3c0;
+  color: var(--gray-500);
   top: 50%;
   transform: translateY(-50%);
   font-style: normal;
@@ -3222,13 +3241,13 @@
 .dijitTextBox {
   background-color: #ffffff;
   padding: 0 0.5rem;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
 }
 .dijitTextBox .dijitArrowButton {
   height: 2.5rem;
   width: 2.5rem;
   background-color: #ffffff;
-  border-left: solid 1.5px #d1d4db;
+  border-left: solid 1.5px var(--gray-400);
 }
 .dijitTextBox .dijitArrowButton:before {
   left: 50%;
@@ -3238,7 +3257,7 @@
   top: 50%;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid #515667;
+  border-top: 5px solid var(--gray-800);
   content: "";
   height: 0;
   width: 0;
@@ -3307,12 +3326,12 @@
   width: 0;
 }
 .dijitTextBoxDisabled, .dijitTextBox:disabled {
-  border: solid 1.5px #f3f3f4;
-  background-color: #fafafb;
+  border: solid 1.5px var(--gray-200);
+  background-color: var(--gray-100);
 }
 .dijitTextBoxDisabled .dijitArrowButton, .dijitTextBox:disabled .dijitArrowButton {
-  background-color: #fafafb;
-  border-left: solid 1.5px #f3f3f4;
+  background-color: var(--gray-100);
+  border-left: solid 1.5px var(--gray-200);
 }
 .dijitTextBoxDisabled .dijitArrowButton:before, .dijitTextBox:disabled .dijitArrowButton:before {
   left: 50%;
@@ -3322,16 +3341,16 @@
   top: 50%;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid #afb3c0;
+  border-top: 5px solid var(--gray-500);
   content: "";
   height: 0;
   width: 0;
 }
 .dijitTextBoxDisabled .dijitPlaceHolder, .dijitTextBox:disabled .dijitPlaceHolder {
-  color: #6c7389;
+  color: var(--gray-700);
 }
 .dijitTextBoxDisabled .dijitInputInner, .dijitTextBox:disabled .dijitInputInner {
-  color: #6c7389;
+  color: var(--gray-700);
 }
 .dijitTextBoxError {
   border: solid 1.5px #f65446;
@@ -3355,7 +3374,7 @@
 
 .dijitTextArea {
   background-color: #ffffff;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   color: #14151a;
   font-family: Assistant, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   padding: 0.5rem;
@@ -3374,26 +3393,26 @@
   color: #14151a;
 }
 .dijitTextAreaDisabled {
-  border: solid 1.5px #f3f3f4;
-  background-color: #fafafb;
-  color: #6c7389;
+  border: solid 1.5px var(--gray-200);
+  background-color: var(--gray-100);
+  color: var(--gray-700);
 }
 
 .dijitSpinner {
   background-color: #ffffff;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   padding: 0 0 0 0.5rem;
 }
 .dijitSpinner .dijitSpinnerButtonContainer {
-  border-left: solid 1.5px #d1d4db;
+  border-left: solid 1.5px var(--gray-400);
   width: 2.5rem;
 }
 .dijitSpinner .dijitSpinnerButtonContainer .dijitDownArrowButton {
-  border-top: solid 1.5px #d1d4db !important;
+  border-top: solid 1.5px var(--gray-400) !important;
 }
 .dijitSpinner .dijitArrowButton {
   height: 100%;
-  border-left: solid 1.5px #d1d4db;
+  border-left: solid 1.5px var(--gray-400);
   background-color: #ffffff;
 }
 .dijitSpinner .dijitArrowButton:before {
@@ -3463,24 +3482,24 @@
   border-top-color: var(--color-palette-primary-500);
 }
 .dijitSpinnerDisabled {
-  background-color: #f3f3f4;
-  border: solid 1.5px #f3f3f4;
+  background-color: var(--gray-200);
+  border: solid 1.5px var(--gray-200);
 }
 .dijitSpinnerDisabled .dijitSpinnerButtonContainer {
-  border-left: solid 1.5px #f3f3f4;
+  border-left: solid 1.5px var(--gray-200);
 }
 .dijitSpinnerDisabled .dijitSpinnerButtonContainer .dijitDownArrowButton {
-  border-top: solid 1.5px #f3f3f4 !important;
+  border-top: solid 1.5px var(--gray-200) !important;
 }
 .dijitSpinnerDisabled .dijitArrowButton {
-  border-left: solid 1.5px #f3f3f4;
-  background-color: #f3f3f4;
+  border-left: solid 1.5px var(--gray-200);
+  background-color: var(--gray-200);
 }
 .dijitSpinnerDisabled .dijitArrowButton:before {
-  border-top-color: #6c7389;
+  border-top-color: var(--gray-700);
 }
 .dijitSpinnerDisabled .dijitInputInner {
-  color: #d1d4db;
+  color: var(--gray-400);
 }
 .dijitSpinnerError {
   border: solid 1.5px #f65446;
@@ -3569,16 +3588,16 @@
   outline: 2.8px solid var(--color-palette-primary-op-20);
 }
 .dijitButtonDisabledFocused {
-  background-color: #f3f3f4;
-  border: solid 1.5px #ebecef;
-  color: #afb3c0;
+  background-color: var(--gray-200);
+  border: solid 1.5px var(--gray-300);
+  color: var(--gray-500);
   box-shadow: 0;
   outline: none;
 }
 .dijitButtonDisabled.dijitDisabled {
-  background-color: #f3f3f4;
-  border: solid 1.5px #ebecef;
-  color: #afb3c0;
+  background-color: var(--gray-200);
+  border: solid 1.5px var(--gray-300);
+  color: var(--gray-500);
   box-shadow: 0;
   outline: none;
 }
@@ -3663,9 +3682,9 @@
   box-shadow: 0;
 }
 .dijitDropDownButtonDisabled {
-  background-color: #f3f3f4;
-  border: solid 1.5px #ebecef;
-  color: #afb3c0;
+  background-color: var(--gray-200);
+  border: solid 1.5px var(--gray-300);
+  color: var(--gray-500);
   box-shadow: 0;
 }
 .dijitDropDownButtonDisabled .dijitArrowButtonInner {
@@ -3679,7 +3698,7 @@
   top: 50%;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid #6c7389;
+  border-top: 5px solid var(--gray-700);
   content: "";
   height: 0;
   width: 0;
@@ -3781,9 +3800,9 @@
   width: 0;
 }
 .dijitComboButtonDisabled {
-  background-color: #f3f3f4;
-  border: solid 1.5px #ebecef;
-  color: #afb3c0;
+  background-color: var(--gray-200);
+  border: solid 1.5px var(--gray-300);
+  color: var(--gray-500);
   box-shadow: 0;
 }
 .dijitComboButtonDisabled .dijitArrowButtonInner {
@@ -3797,7 +3816,7 @@
   top: 50%;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid #6c7389;
+  border-top: 5px solid var(--gray-700);
   content: "";
   height: 0;
   width: 0;
@@ -3827,9 +3846,9 @@
   box-shadow: 0;
 }
 .dijitToggleButtonDisabled {
-  background-color: #f3f3f4;
-  border: solid 1.5px #ebecef;
-  color: #afb3c0;
+  background-color: var(--gray-200);
+  border: solid 1.5px var(--gray-300);
+  color: var(--gray-500);
   box-shadow: 0;
 }
 .dijitDropDownActionButton {
@@ -3865,11 +3884,11 @@
   outline: 2.8px solid var(--color-palette-primary-op-20);
 }
 .dijitDropDownActionButton.dijitDropDownButtonDisabled {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 .dijitDropDownActionButton.dijitDropDownButtonDisabled .actionIcon,
 .dijitDropDownActionButton.dijitDropDownButtonDisabled .fa-plus {
-  color: #afb3c0;
+  color: var(--gray-500);
 }
 .dijitButtonFlat {
   border: 0;
@@ -3943,7 +3962,7 @@
 
 .dijitCheckBox {
   border-radius: 4px;
-  border: solid 2px #afb3c0;
+  border: solid 2px var(--gray-500);
   background-color: #ffffff;
   width: 24px;
   min-width: 24px;
@@ -3967,18 +3986,18 @@
   outline: 1.5px solid var(--color-palette-primary-op-20);
 }
 .dijitCheckBoxDisabled {
-  border: solid 2px #d1d4db;
-  background: #f3f3f4;
+  border: solid 2px var(--gray-400);
+  background: var(--gray-200);
 }
 .dijitCheckBoxCheckedDisabled {
-  border: solid 2px #d1d4db;
-  background: #f3f3f4 url("data:image/svg+xml;base64,PCEtLSBSZXBsYWNlIHRoZSBjb250ZW50cyBvZiB0aGlzIGVkaXRvciB3aXRoIHlvdXIgU1ZHIGNvZGUgLS0+Cgo8c3ZnIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjExLjMxcHgiIHZpZXdCb3g9IjAgMCAxMCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlNoYXBlPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImNoZWNrYm94LWFjdGl2ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNS4wMDAwMDApIiBmaWxsPSIjZDFkNGRiIj4gICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIHBvaW50cz0iNy4zMTA3MjAzMiAxMS40MjI0NDQ5IDQuOTg2MTk1NjMgOS4wOTc5MjAxOSA0LjE5NDYzMDg3IDkuODgzOTEwNTUgNy4zMTA3MjAzMiAxMyAxNCA2LjMxMDcyMDMyIDEzLjIxNDAwOTYgNS41MjQ3Mjk5NiI+PC9wb2x5Z29uPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+") center center no-repeat;
+  border: solid 2px var(--gray-400);
+  background: var(--gray-200) url("data:image/svg+xml;base64,PCEtLSBSZXBsYWNlIHRoZSBjb250ZW50cyBvZiB0aGlzIGVkaXRvciB3aXRoIHlvdXIgU1ZHIGNvZGUgLS0+Cgo8c3ZnIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjExLjMxcHgiIHZpZXdCb3g9IjAgMCAxMCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlNoYXBlPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImNoZWNrYm94LWFjdGl2ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNS4wMDAwMDApIiBmaWxsPSIjZDFkNGRiIj4gICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIHBvaW50cz0iNy4zMTA3MjAzMiAxMS40MjI0NDQ5IDQuOTg2MTk1NjMgOS4wOTc5MjAxOSA0LjE5NDYzMDg3IDkuODgzOTEwNTUgNy4zMTA3MjAzMiAxMyAxNCA2LjMxMDcyMDMyIDEzLjIxNDAwOTYgNS41MjQ3Mjk5NiI+PC9wb2x5Z29uPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+") center center no-repeat;
 }
 
 .dijitRadio {
   border-radius: 12px;
   background-color: #ffffff;
-  border: solid 2px #afb3c0;
+  border: solid 2px var(--gray-500);
   height: 24px;
   width: 24px;
   cursor: pointer;
@@ -4012,12 +4031,12 @@
   outline: 1.5px solid var(--color-palette-primary-op-20);
 }
 .dijitRadioDisabled {
-  background-color: #f3f3f4;
-  border: solid 2px #d1d4db;
+  background-color: var(--gray-200);
+  border: solid 2px var(--gray-400);
   position: relative;
 }
 .dijitRadioDisabled:before {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 
 #select-arrow, .dijitSelectActive .dijitArrowButton > .dijitArrowButtonInner, .dijitSelectOpened .dijitArrowButton > .dijitArrowButtonInner, .dijitSelectHover .dijitArrowButton > .dijitArrowButtonInner, .dijitSelect .dijitArrowButton > .dijitArrowButtonInner {
@@ -4029,7 +4048,7 @@
 
 .dijitSelect {
   background-color: #ffffff;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   color: #14151a;
 }
 .dijitSelect .dijitButtonContents {
@@ -4040,7 +4059,7 @@
   width: auto;
 }
 .dijitSelect .dijitArrowButton {
-  border-left: solid 1.5px #d1d4db;
+  border-left: solid 1.5px var(--gray-400);
   width: 2.5rem;
   background-color: transparent;
 }
@@ -4105,19 +4124,19 @@
   width: 0;
 }
 .dijitSelectDisabled {
-  background-color: #fafafb;
-  border: solid 1.5px #f3f3f4;
-  color: #6c7389;
+  background-color: var(--gray-100);
+  border: solid 1.5px var(--gray-200);
+  color: var(--gray-700);
 }
 .dijitSelectDisabled .dijitButtonContents {
   opacity: 0.5;
 }
 .dijitSelectDisabled .dijitArrowButton {
-  border-left: solid 1.5px #f3f3f4;
-  background-color: #fafafb;
+  border-left: solid 1.5px var(--gray-200);
+  background-color: var(--gray-100);
 }
 .dijitSelectDisabled .dijitArrowButton:before {
-  border-top-color: #6c7389;
+  border-top-color: var(--gray-700);
 }
 .dijitSelect.dijitSelectFixedWidth .dijitButtonContents {
   width: auto;
@@ -4125,7 +4144,7 @@
 
 .dijitComboBox {
   background-color: #ffffff;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   padding: 0 0 0 0.5rem;
   overflow: hidden;
 }
@@ -4136,8 +4155,8 @@
 .dijitComboBox .dijitArrowButton {
   height: 100%;
   width: 2.5rem;
-  background-color: #f3f3f4;
-  border-left: solid 1.5px #d1d4db;
+  background-color: var(--gray-200);
+  border-left: solid 1.5px var(--gray-400);
 }
 .dijitComboBox .dijitArrowButton:before {
   border-top-color: var(--color-palette-primary-500);
@@ -4147,14 +4166,14 @@
   border: solid 1.5px var(--color-palette-primary-400);
 }
 .dijitComboBoxHover .dijitArrowButton, .dijitComboBox:hover .dijitArrowButton {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   border-left: solid 1.5px var(--color-palette-primary-400);
 }
 .dijitComboBoxHover .dijitArrowButton:before, .dijitComboBox:hover .dijitArrowButton:before {
   border-top-color: var(--color-palette-primary-500);
 }
 .dijitComboBoxHover .dijitDownArrowButtonHover, .dijitComboBox:hover .dijitDownArrowButtonHover {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   border-left: solid 1.5px var(--color-palette-primary-400);
 }
 .dijitComboBoxHover .dijitDownArrowButtonHover:before, .dijitComboBox:hover .dijitDownArrowButtonHover:before {
@@ -4170,21 +4189,21 @@
   border-left: solid 1.5px var(--color-palette-primary-400);
 }
 .dijitComboBoxDisabled, .dijitComboBox:disabled {
-  border: solid 1.5px #f3f3f4;
-  background-color: #f3f3f4;
+  border: solid 1.5px var(--gray-200);
+  background-color: var(--gray-200);
 }
 .dijitComboBoxDisabled .dijitArrowButton, .dijitComboBox:disabled .dijitArrowButton {
-  background-color: #f3f3f4;
-  border-left: solid 1.5px #f3f3f4;
+  background-color: var(--gray-200);
+  border-left: solid 1.5px var(--gray-200);
 }
 .dijitComboBoxDisabled .dijitArrowButton:before, .dijitComboBox:disabled .dijitArrowButton:before {
-  border-top-color: #6c7389;
+  border-top-color: var(--gray-700);
 }
 .dijitComboBoxDisabled .dijitPlaceHolder, .dijitComboBox:disabled .dijitPlaceHolder {
-  color: #afb3c0;
+  color: var(--gray-500);
 }
 .dijitComboBoxDisabled .dijitInputInner, .dijitComboBox:disabled .dijitInputInner {
-  color: #afb3c0;
+  color: var(--gray-500);
 }
 .dijitComboBoxError {
   border: solid 1.5px #f65446;
@@ -4199,7 +4218,7 @@
   border-top-color: #d82b2e;
 }
 .dijitComboBox .dijitDownArrowButtonActive {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   border-left: solid 1.5px var(--color-palette-primary-400);
 }
 .dijitComboBox .dijitDownArrowButtonActive:before {
@@ -4214,19 +4233,19 @@
 }
 .dijitRuleLabel {
   transition: color 0.1s;
-  color: #515667;
+  color: var(--gray-800);
 }
 .dijitRuleMark {
   transition: border-color 0.1s;
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
 }
 .dijitSliderProgressBar, .dijitSliderBottomBumper, .dijitSliderLeftBumper {
   background: var(--color-palette-primary-500);
-  border-color: #d1d4db;
+  border-color: var(--gray-400);
 }
 .dijitSliderRemainingBar, .dijitSliderTopBumper, .dijitSliderRightBumper {
   background: #ffffff;
-  border-color: #d1d4db;
+  border-color: var(--gray-400);
 }
 .dijitSliderLeftBumper {
   border-left-width: 1px;
@@ -4300,108 +4319,108 @@
   transition: all 0.1s;
   border-radius: 6.5px;
   background-color: #ffffff;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   height: 13px;
   top: -5px;
   width: 13px;
 }
 .dijitSliderHover .dijitRuleLabel {
-  color: #515667;
+  color: var(--gray-800);
 }
 .dijitSliderHover .dijitRuleMark {
-  border: solid 1px #515667;
+  border: solid 1px var(--gray-800);
 }
 .dijitSliderHover .dijitSliderBottomBumper,
 .dijitSliderHover .dijitSliderProgressBar,
 .dijitSliderHover .dijitSliderLeftBumper {
   background: var(--color-palette-primary-500);
-  border-color: #515667;
+  border-color: var(--gray-800);
 }
 .dijitSliderHover .dijitSliderRemainingBar,
 .dijitSliderHover .dijitSliderTopBumper,
 .dijitSliderHover .dijitSliderRightBumper {
   background: #ffffff;
-  border-color: #515667;
+  border-color: var(--gray-800);
 }
 .dijitSliderHover .dijitSliderImageHandle {
   background-color: #ffffff;
-  border: solid 1.5px #515667;
+  border: solid 1.5px var(--gray-800);
 }
 .dijitSliderHover .dijitSliderThumbFocused {
-  background: #515667;
-  border: solid 1.5px #515667;
+  background: var(--gray-800);
+  border: solid 1.5px var(--gray-800);
 }
 .dijitSliderDisabled .dijitRuleLabel {
-  color: #d1d4db;
+  color: var(--gray-400);
 }
 .dijitSliderDisabled .dijitRuleMark {
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
 }
 .dijitSliderDisabled .dijitSliderBottomBumper,
 .dijitSliderDisabled .dijitSliderProgressBar,
 .dijitSliderDisabled .dijitSliderLeftBumper {
-  background: #f3f3f4;
-  border-color: #f3f3f4;
+  background: var(--gray-200);
+  border-color: var(--gray-200);
 }
 .dijitSliderDisabled .dijitSliderRemainingBar,
 .dijitSliderDisabled .dijitSliderTopBumper,
 .dijitSliderDisabled .dijitSliderRightBumper {
   background: #ffffff;
-  border-color: #f3f3f4;
+  border-color: var(--gray-200);
 }
 .dijitSliderDisabled .dijitSliderImageHandle {
-  background-color: #f3f3f4;
-  border: solid 1.5px #f3f3f4;
+  background-color: var(--gray-200);
+  border: solid 1.5px var(--gray-200);
 }
 .dijitSliderDisabled .dijitSliderDecrementIconH,
 .dijitSliderDisabled .dijitSliderIncrementIconH,
 .dijitSliderDisabled .dijitSliderDecrementIconV,
 .dijitSliderDisabled .dijitSliderIncrementIconV {
-  border: solid 1.5px #ebecef;
+  border: solid 1.5px var(--gray-300);
 }
 .dijitSliderDisabled .dijitSliderDecrementIconV:before {
-  border-top-color: #6c7389;
+  border-top-color: var(--gray-700);
 }
 .dijitSliderDisabled .dijitSliderIncrementIconV:before {
-  border-bottom-color: #6c7389;
+  border-bottom-color: var(--gray-700);
 }
 
 .dijitTimePicker .dijitDownArrowButton,
 .dijitTimePicker .dijitUpArrowButton {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   padding: 0.25rem;
 }
 .dijitTimePicker .dijitDownArrowHover,
 .dijitTimePicker .dijitUpArrowHover {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 
 .dijitAccordionContainer {
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
 }
 .dijitAccordionContainer .dijitAccordionContainer-child {
   padding: 0.5rem;
 }
 .dijitAccordionInnerContainerSelected .dijitAccordionTitleHover {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 .dijitAccordionTitle {
   transition: all 0.1s;
-  background-color: #f3f3f4;
-  border-top: solid 1px #d1d4db;
+  background-color: var(--gray-200);
+  border-top: solid 1px var(--gray-400);
   border-bottom: none;
   height: 2.5rem;
   line-height: 2.5rem;
   padding: 0 0.5rem;
 }
 .dijitAccordionTitle:last-child {
-  border-bottom: solid 1px #d1d4db;
+  border-bottom: solid 1px var(--gray-400);
 }
 .dijitAccordionTitleHover {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 .dijitAccordionTitleSelected {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   font-weight: bold;
 }
 
@@ -4449,7 +4468,7 @@
   top: 50%;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 5px solid #515667;
+  border-top: 5px solid var(--gray-800);
   content: "";
   height: 0;
   width: 0;
@@ -4471,7 +4490,7 @@
 .dijitDialogCloseIcon {
   width: 17px;
   height: 18px;
-  background-color: #515667;
+  background-color: var(--gray-800);
   position: absolute;
   right: 0;
   top: 0;
@@ -4501,11 +4520,11 @@
   padding-top: 0;
 }
 .dijitDialogTitleBar {
-  background-color: #f3f3f4;
-  border-color: transparent transparent #d1d4db transparent;
+  background-color: var(--gray-200);
+  border-color: transparent transparent var(--gray-400) transparent;
   border-style: solid;
   border-width: 0 0 1px 0;
-  color: #515667;
+  color: var(--gray-800);
   font-weight: bold;
   height: 50px;
   line-height: 50px;
@@ -4533,16 +4552,16 @@
   background: var(--color-palette-black-op-50);
 }
 .dijitSplitterHover .dijitSplitterThumb {
-  background: #6c7389;
+  background: var(--gray-700);
 }
 .dijitSplitterActive {
   background-color: var(--color-palette-black-op-20);
 }
 .dijitSplitterActive .dijitSplitterThumb {
-  background: #6c7389;
+  background: var(--gray-700);
 }
 .dijitSplitterThumb {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 .dijitSplitterV {
   width: 6px;
@@ -4601,7 +4620,7 @@
 .dijitTabCloseIcon {
   width: 13px;
   height: 13px;
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   position: absolute;
   right: 0;
   top: 0;
@@ -4629,8 +4648,8 @@
   color: #14151a;
 }
 .dijitTabDisabled {
-  background-color: #fafafb;
-  color: #6c7389;
+  background-color: var(--gray-100);
+  color: var(--gray-700);
 }
 .dijitTab.tabStripButton {
   height: 58px !important;
@@ -4701,17 +4720,17 @@
   border-top-color: var(--color-palette-primary-500);
 }
 .dijitTab.tabStripButtonDisabled {
-  background-color: #fafafb;
-  color: #6c7389;
+  background-color: var(--gray-100);
+  color: var(--gray-700);
 }
 .dijitTab.tabStripButtonDisabled .dijitTabStripSlideLeftIcon:before {
-  border-right-color: #6c7389;
+  border-right-color: var(--gray-700);
 }
 .dijitTab.tabStripButtonDisabled .dijitTabStripSlideRightIcon:before {
-  border-left-color: #6c7389;
+  border-left-color: var(--gray-700);
 }
 .dijitTab.tabStripButtonDisabled .dijitTabStripMenuIcon:before {
-  border-top-color: #6c7389;
+  border-top-color: var(--gray-700);
 }
 .dijitTabContainerBottom-container, .dijitTabContainerTop-container, .dijitTabContainerLeft-container, .dijitTabContainerRight-container {
   border-width: 0;
@@ -4735,7 +4754,7 @@
   box-sizing: "content-box";
   border-width: 0 0 1px;
   border-style: solid;
-  border-color: #d1d4db;
+  border-color: var(--gray-400);
   height: 58px !important;
   overflow: visible;
 }
@@ -4752,7 +4771,7 @@
 }
 .dijitTabContainerNested .dijitTab.dijitTabChecked {
   height: 61px;
-  border-bottom: solid 1px #515667;
+  border-bottom: solid 1px var(--gray-800);
 }
 .dijitTabContainerNested .dijitTabContainerTop-container {
   border: none;
@@ -4764,7 +4783,7 @@
 }
 .dijitTooltipContainer {
   background: #ffffff;
-  border: solid 1px #6c7389;
+  border: solid 1px var(--gray-700);
   color: inherit;
   font-size: inherit;
   padding: 0.5rem;
@@ -4780,8 +4799,8 @@
   left: 3px;
   transform: rotate(-45deg);
   background: #fff;
-  border-left: 1px solid #6c7389;
-  border-top: 1px solid #6c7389;
+  border-left: 1px solid var(--gray-700);
+  border-top: 1px solid var(--gray-700);
 }
 .dijitTooltipFocusNode {
   padding: 0.5rem;
@@ -4890,7 +4909,7 @@
 .dijitCalendarDayLabelTemplate, .dijitCalendarDateTemplate {
   transition: background-color 0.1s;
   background-color: #ffffff;
-  color: #515667;
+  color: var(--gray-800);
   height: 2.5rem;
   text-align: center;
   width: 2.5rem;
@@ -4901,7 +4920,7 @@
   font-weight: bold;
 }
 .dijitCalendarHoveredDate {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   color: #14151a;
 }
 .dijitCalendarIncrementControl {
@@ -4944,7 +4963,7 @@
   width: 0;
 }
 .dijitCalendarMonthContainer {
-  background-color: #515667;
+  background-color: var(--gray-800);
   color: #ffffff;
   height: 2.5rem;
 }
@@ -4982,18 +5001,18 @@
   line-height: 2.5rem;
 }
 .dijitCalendarMonthLabelHover {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 .dijitCalendarMonthLabel:last-child {
   border-bottom: none;
 }
 .dijitCalendarPreviousMonth, .dijitCalendarNextMonth {
-  background-color: #f3f3f4;
-  color: #d1d4db;
+  background-color: var(--gray-200);
+  color: var(--gray-400);
 }
 .dijitCalendarPreviousMonth.dijitCalendarHoveredDate, .dijitCalendarNextMonth.dijitCalendarHoveredDate {
-  background-color: #f3f3f4;
-  color: #6c7389;
+  background-color: var(--gray-200);
+  color: var(--gray-700);
 }
 .dijitCalendarNextYear, .dijitCalendarPreviousYear {
   color: var(--color-palette-white-op-10);
@@ -5012,11 +5031,11 @@
   font-weight: bold;
 }
 .dijitCalendarCurrentDate {
-  background-color: #afb3c0;
+  background-color: var(--gray-500);
   color: #ffffff;
 }
 .dijitCalendarYearLabel {
-  background-color: #515667;
+  background-color: var(--gray-800);
   display: table;
   height: 2.5rem;
   width: 100%;
@@ -5037,7 +5056,7 @@
   gap: 0.25rem;
 }
 .dijitMenu#templateSel_popup .dijitMenuItem small {
-  color: #6c7389;
+  color: var(--gray-700);
 }
 .dijitMenu .dijitMenuItem {
   display: flex;
@@ -5071,7 +5090,7 @@
 .dijitMenuSeparatorTop {
   height: auto;
   margin-top: 1px;
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
 }
 
 .dijitComboBoxMenuPopup#widget_cache_list_dropdown {
@@ -5122,8 +5141,8 @@
   border-bottom: none;
 }
 .dijitTimePickerItemHover {
-  background-color: #f3f3f4;
-  color: #515667;
+  background-color: var(--gray-200);
+  color: var(--gray-800);
 }
 .dijitTimePickerItemSelected .dijitTimePickerItemInner {
   background-color: #d82b2e;
@@ -5134,7 +5153,7 @@
 }
 .dijitTimePickerMarker {
   font-weight: bold;
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 
 .dijitProgressBar {
@@ -5143,7 +5162,7 @@
   height: 30px;
 }
 .dijitProgressBarEmpty {
-  border: solid 1.5px #515667;
+  border: solid 1.5px var(--gray-800);
 }
 .dijitProgressBarFull {
   background: none;
@@ -5153,7 +5172,7 @@
   line-height: 27px;
 }
 .dijitProgressBarTile {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   height: 100%;
 }
 
@@ -5182,7 +5201,7 @@
   background-color: #ffffff !important;
 }
 .dojoxGrid .dojoxGridMasterHeader .dojoxGridHeader {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 .dojoxGrid .dojoxGridMasterHeader .dojoxGridHeader .dojoxGridRowTable .dojoxGridCell {
   background: none;
@@ -5190,7 +5209,7 @@
   font-weight: bold;
 }
 .dojoxGrid .dojoxGridMasterHeader .dojoxGridHeader .dojoxGridRowTable {
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
 }
 .dojoxGrid .dojoxGridMasterHeader .dojoxGridHeader .dojoxGridArrowButtonChar {
   float: left;
@@ -5204,10 +5223,10 @@
 }
 .dojoxGrid .dojoxGridMasterView .dojoxGridRow {
   background-color: #ffffff;
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
 }
 .dojoxGrid .dojoxGridMasterView .dojoxGridRow.dojoxGridRowOdd {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 .dojoxGrid .dojoxGridMasterView .dojoxGridRow.dojoxGridRowOver .dojoxGridCell {
   color: #14151a;
@@ -5223,7 +5242,7 @@
   height: 2.5rem;
 }
 .dojoxGrid .dojoxGridPaginator {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   border: 0px;
 }
 .dojoxGrid .dojoxGridPaginator td {
@@ -5231,7 +5250,7 @@
 }
 
 .dojoxUploaderFileList {
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
 }
 
 /*
@@ -5939,9 +5958,9 @@ acronym {
 }
 
 hr {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   height: 1px;
-  color: #d1d4db;
+  color: var(--gray-400);
   border: 0;
   margin: 1.5rem 0;
 }
@@ -6002,7 +6021,7 @@ hr {
 }
 
 select[multiple] {
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   min-height: 80px;
   width: 100%;
 }
@@ -6126,7 +6145,7 @@ select[multiple]:hover {
   top: 34px;
   width: 225px;
   font-size: 0.75rem;
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
   border-top: 0;
   background: #fff;
   z-index: 9998;
@@ -6156,8 +6175,8 @@ select[multiple]:hover {
 .account-flyout .login-out {
   background: #eee;
   margin: 15px 0 0 0;
-  border-top: 1px solid #d1d4db;
-  border-bottom: 1px solid #d1d4db;
+  border-top: 1px solid var(--gray-400);
+  border-bottom: 1px solid var(--gray-400);
 }
 
 .account-flyout .login-out table {
@@ -6254,7 +6273,7 @@ select[multiple]:hover {
 
 /* TABLE STYLES 2.0 */
 #listing-table, .listingTable, .dojoxUploaderFileListTable {
-  border-bottom: 1px solid #f3f3f4;
+  border-bottom: 1px solid var(--gray-200);
   border-collapse: collapse;
   margin: 0 auto 3rem auto;
   width: 100%;
@@ -6273,7 +6292,7 @@ select[multiple]:hover {
 #listing-table td,
 .listingTable td,
 .dojoxUploaderFileListTable td {
-  border-bottom: 1px solid #f3f3f4;
+  border-bottom: 1px solid var(--gray-200);
   vertical-align: middle;
   height: 2.5rem !important;
   padding: 0.5rem;
@@ -6302,7 +6321,7 @@ select[multiple]:hover {
   padding-right: 3rem;
 }
 #listing-table th, .listingTable th, .dojoxUploaderFileListTable th {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 
 .listingTable table,
@@ -6329,7 +6348,7 @@ select[multiple]:hover {
 
 /* CONTENT TYPE TABLE */
 .sTypeTable {
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
   border-collapse: collapse;
   margin: 0 auto;
 }
@@ -6339,15 +6358,15 @@ select[multiple]:hover {
   min-width: 225px;
   white-space: nowrap;
   padding: 0;
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
 }
 
 .sTypeHeader {
   font-weight: bold;
   padding: 3px 10px;
-  background: #f3f3f4;
-  border-bottom: 1px solid #d1d4db;
-  border-top: 1px solid #d1d4db;
+  background: var(--gray-200);
+  border-bottom: 1px solid var(--gray-400);
+  border-top: 1px solid var(--gray-400);
 }
 .sTypeHeader:first-child {
   border-top: 0;
@@ -6367,7 +6386,7 @@ select[multiple]:hover {
 }
 
 .myVarTable {
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
   border-collapse: collapse;
   width: 100%;
 }
@@ -7757,7 +7776,7 @@ div#_dotHelpMenu {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f054";
-  color: #afb3c0;
+  color: var(--gray-500);
   font-size: 0.625rem;
   position: absolute;
   right: 5px;
@@ -8709,7 +8728,7 @@ div#_dotHelpMenu {
 
 .greyDotIcon {
   opacity: 1 !important;
-  color: #d1d4db;
+  color: var(--gray-400);
 }
 
 .archivedIcon {
@@ -8725,7 +8744,7 @@ div#_dotHelpMenu {
 }
 
 .hostStoppedIcon {
-  color: #afb3c0;
+  color: var(--gray-500);
 }
 
 .filter-tasks-frm {
@@ -8742,9 +8761,9 @@ Styles for commons fields along the backend
 */
 .glossaryTermPopup {
   border-radius: 0.125rem;
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   padding: 0.25rem 0.5rem;
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
   position: absolute;
 }
 
@@ -8760,7 +8779,7 @@ Styles for commons fields along the backend
   height: 36px;
 }
 .fileAjaxUploader .fileAjaxUploaderForm {
-  border: solid 1px #afb3c0;
+  border: solid 1px var(--gray-500);
   width: 100%;
 }
 .fileAjaxUploader input[type=file]::-webkit-file-upload-button {
@@ -8799,16 +8818,16 @@ Styles for commons fields along the backend
 .catPreview {
   background-color: #ffffff;
   border-radius: 0.125rem;
-  border: solid 1px #afb3c0;
+  border: solid 1px var(--gray-500);
   margin-top: 0.5rem;
   max-width: 1100px;
   min-height: 38px;
   padding: 0.25rem;
 }
 .catPreview li {
-  background: #f3f3f4;
+  background: var(--gray-200);
   border-radius: 0.125rem;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   display: inline-block;
   font-size: 0.625rem;
   margin: 2px 5px 2px 0px;
@@ -8829,9 +8848,9 @@ Styles for commons fields along the backend
 }
 
 .lineDividerTitle {
-  color: #6c7389;
+  color: var(--gray-700);
   font-size: 1.25rem;
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
   padding-bottom: 1rem;
   margin: 3rem 0 1.5rem;
 }
@@ -8889,7 +8908,7 @@ Styles for commons fields along the backend
 
 .tagsOptions {
   background: #ffffff;
-  border: solid 1.5px #d1d4db;
+  border: solid 1.5px var(--gray-400);
   min-width: 175px;
   padding-top: 7px;
   position: absolute;
@@ -8897,8 +8916,8 @@ Styles for commons fields along the backend
 }
 .tagsOptions:before {
   background-color: #ffffff;
-  border-left: solid 1.5px #d1d4db;
-  border-top: solid 1.5px #d1d4db;
+  border-left: solid 1.5px var(--gray-400);
+  border-top: solid 1.5px var(--gray-400);
   content: "";
   height: 10px;
   left: 5px;
@@ -8913,13 +8932,13 @@ Styles for commons fields along the backend
   opacity: 0.7;
 }
 .tagsOptions h3 {
-  background-color: #afb3c0;
-  border-bottom: solid 1.5px #d1d4db;
+  background-color: var(--gray-500);
+  border-bottom: solid 1.5px var(--gray-400);
   margin-bottom: 0;
   padding: 5px 10px;
 }
 .tagsOptions a {
-  border-bottom: solid 1.5px #d1d4db;
+  border-bottom: solid 1.5px var(--gray-400);
   cursor: pointer;
   display: block;
   padding: 5px 10px;
@@ -8927,13 +8946,13 @@ Styles for commons fields along the backend
   white-space: nowrap;
 }
 .tagsOptions a:hover {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 .tagsOptions a:last-child {
   border-bottom: none;
 }
 .tagsOptions .suggestedTagFocus {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   box-shadow: none;
   outline: 0;
 }
@@ -9227,7 +9246,7 @@ dd .buttonCaption {
 }
 
 .who-can-use {
-  border: solid 1px #afb3c0;
+  border: solid 1px var(--gray-500);
   height: 90px;
   margin-top: 0.5rem;
   padding: 0.5rem;
@@ -9250,8 +9269,8 @@ dd .buttonCaption {
   padding: 1.5rem 1rem 0 1rem;
 }
 .portlet-sidebar-wrapper {
-  background-color: #fafafb;
-  border-right: solid 1px #d1d4db;
+  background-color: var(--gray-100);
+  border-right: solid 1px var(--gray-400);
 }
 .portlet-wrapper {
   height: 100%;
@@ -9317,9 +9336,9 @@ dd .buttonCaption {
 }
 
 .hintBox {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   border-radius: 0.125rem;
-  border: solid 1px #afb3c0;
+  border: solid 1px var(--gray-500);
   padding: 1rem;
   position: absolute;
   right: 1rem;
@@ -9337,9 +9356,9 @@ dd .buttonCaption {
 }
 
 .callOutBox2 {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   border-radius: 0.125rem;
-  border: 1px solid #afb3c0;
+  border: 1px solid var(--gray-500);
   padding: 0.5rem;
   text-align: center;
 }
@@ -9369,7 +9388,7 @@ dd .buttonCaption {
 
 .calendar-events__list-items,
 .calendar-events__list-ongoing {
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
 }
 
 .calendar-events__list-items {
@@ -9383,8 +9402,8 @@ dd .buttonCaption {
 }
 
 .calendar-events__recurence-box {
-  background-color: #f3f3f4;
-  border: solid 1px #d1d4db;
+  background-color: var(--gray-200);
+  border: solid 1px var(--gray-400);
   border-radius: 0.375rem;
   display: inline-block;
   margin-top: 0.5rem;
@@ -9408,9 +9427,9 @@ dd .buttonCaption {
 /* DAY VIEW STYLES */
 #dailyEvents h3,
 #ongoingEvents h3 {
-  background: #f3f3f4;
+  background: var(--gray-200);
   padding: 0.5rem;
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
   margin: 0;
 }
 #dailyEvents ul,
@@ -9426,7 +9445,7 @@ dd .buttonCaption {
 #ongoingEvents li {
   padding: 0.5rem;
   margin: 0;
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
 }
 #dailyEvents li [class$=Icon],
 #dailyEvents li [class*=Icon],
@@ -9443,12 +9462,12 @@ dd .buttonCaption {
   height: 100px;
   vertical-align: top;
   padding: 0;
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
   border-collapse: collapse;
 }
 
 .emptyDay {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 
 .selectedDay {
@@ -9593,7 +9612,7 @@ dd .buttonCaption {
   width: 400px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
 }
 
 #categoriesFilterBox,
@@ -9668,7 +9687,7 @@ a.category_higlighted, a.tag_higlighted {
 
 .network-action {
   background: #ffffff;
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
   bottom: 0;
   position: fixed;
   right: 0;
@@ -9715,7 +9734,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .aceText {
-  border: 1px solid #afb3c0;
+  border: 1px solid var(--gray-500);
   max-width: 1100px;
   width: 100%;
   height: 100%;
@@ -9732,7 +9751,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .widgetAceText {
-  border: 1px solid #afb3c0;
+  border: 1px solid var(--gray-500);
   max-height: 600px;
   min-height: 300px;
   max-width: 900px;
@@ -9766,8 +9785,8 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .content-edit__sidebar {
-  background-color: #fafafb;
-  border-left: solid 1px #d1d4db;
+  background-color: var(--gray-100);
+  border-left: solid 1px var(--gray-400);
   height: 100%;
   padding: 1rem;
   position: fixed;
@@ -9788,7 +9807,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .content-edit-actions {
-  border: solid 1px #afb3c0;
+  border: solid 1px var(--gray-500);
   background-color: #ffffff;
   border-radius: 0.125rem;
 }
@@ -9811,7 +9830,7 @@ a.category_higlighted, a.tag_higlighted {
   display: none;
 }
 .content-edit-actions a:hover {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   color: #14151a;
 }
 .content-edit-actions a:last-of-type {
@@ -9831,7 +9850,7 @@ a.category_higlighted, a.tag_higlighted {
   padding-right: 0.5rem;
 }
 .content-edit-workflow table tr {
-  border-bottom: solid 1px #d1d4db;
+  border-bottom: solid 1px var(--gray-400);
 }
 
 .content-edit__dialog-error {
@@ -9872,7 +9891,7 @@ a.category_higlighted, a.tag_higlighted {
 
 .advanced-search-button {
   display: block;
-  background: #d1d4db;
+  background: var(--gray-400);
   padding: 0.5rem;
   text-align: center;
   text-decoration: none;
@@ -9880,7 +9899,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .contentlet-results {
-  color: #6c7389;
+  color: var(--gray-700);
 }
 
 .contentlet-selection {
@@ -9938,14 +9957,14 @@ a.category_higlighted, a.tag_higlighted {
 .import-preview {
   margin: 50px auto;
   border: solid 1px var(--color-palette-secondary-500);
-  border-color: #d1d4db;
+  border-color: var(--gray-400);
   border-radius: 0.25rem;
 }
 .import-preview .import-preview__heading {
-  background-color: #d1d4db;
-  border-color: #d1d4db;
+  background-color: var(--gray-400);
+  border-color: var(--gray-400);
   padding: 10px 1rem;
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
 }
 .import-preview .import-preview__body {
   padding: 1rem;
@@ -9963,12 +9982,12 @@ a.category_higlighted, a.tag_higlighted {
   white-space: nowrap;
 }
 .content-type__fields-list-header, .content-type__fields-list-row {
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
   display: flex;
   justify-content: space-between;
 }
 .content-type__fields-list-header {
-  background: #f3f3f4;
+  background: var(--gray-200);
   font-weight: bold;
   width: 100%;
 }
@@ -10046,7 +10065,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .log-files__iframe {
-  border: 1px solid #afb3c0;
+  border: 1px solid var(--gray-500);
   overflow: auto;
   height: 100%;
   width: 100%;
@@ -10077,6 +10096,7 @@ a.category_higlighted, a.tag_higlighted {
 .view-roles,
 .view-roles .portlet-sidebar {
   height: 100%;
+  overflow: auto;
 }
 
 .view-roles .dijitTabPaneWrapper .dijitContentPane {
@@ -10093,9 +10113,9 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .view-roles__heading {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   border-radius: 0.125rem;
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
   display: flex;
   justify-content: space-between;
   margin-bottom: 2rem;
@@ -10104,7 +10124,8 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .view-roles__tree {
-  height: 100%;
+  height: auto;
+  padding-bottom: 0.75rem;
 }
 
 .view-roles__tabs,
@@ -10122,7 +10143,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .view-roles__portlets-list {
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
   border-radius: 0.125rem;
   margin: 0 0 0.5rem;
   height: 175px;
@@ -10136,7 +10157,7 @@ a.category_higlighted, a.tag_higlighted {
   display: flex;
   justify-content: space-between;
   padding: 0.5rem;
-  border-bottom: solid 1px #d1d4db;
+  border-bottom: solid 1px var(--gray-400);
   align-items: center;
 }
 
@@ -10163,10 +10184,10 @@ a.category_higlighted, a.tag_higlighted {
   width: 100%;
 }
 .view-users .view-users__users-list .dojoxGridRow:nth-child(even) {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 .view-users .view-users__users-list .dojoxGridHeader {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
 }
 .view-users .view-users__users-list .dojoxGridRow .dojoxGridRowTable .dojoxGridCell,
 .view-users .view-users__users-list .dojoxGridHeader .dojoxGridRowTable .dojoxGridCell {
@@ -10213,7 +10234,7 @@ a.category_higlighted, a.tag_higlighted {
   text-align: center;
 }
 .view-users__additional-info .view-user__form {
-  border-bottom: solid 1px #d1d4db;
+  border-bottom: solid 1px var(--gray-400);
   margin-bottom: 1.5rem;
   padding-bottom: 1.5rem;
 }
@@ -10242,7 +10263,7 @@ a.category_higlighted, a.tag_higlighted {
 
 .view-users__roles-container-item {
   border-radius: 0.125rem;
-  border: solid 1px #afb3c0;
+  border: solid 1px var(--gray-500);
   height: 300px;
   overflow: auto;
 }
@@ -10314,20 +10335,20 @@ a.category_higlighted, a.tag_higlighted {
   margin: 2rem 0;
 }
 .view-actions__sub-actions tr:first-child td {
-  border-top: 1px solid #d1d4db;
+  border-top: 1px solid var(--gray-400);
 }
 
 .view-actions__permissions,
 .view-actions__sub-actions,
 .view-actions__workflow-actions {
   position: relative;
-  border-left: 1px solid #d1d4db;
+  border-left: 1px solid var(--gray-400);
   padding-left: 1.5rem;
 }
 
 .view-actions__permissions h3,
 .view-actions__sub-actions h3 {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   line-height: 40px;
   padding-left: 1rem;
   margin-bottom: 2rem;
@@ -10338,7 +10359,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .view-actions__workflow-actions {
-  border-left: 1px solid #d1d4db;
+  border-left: 1px solid var(--gray-400);
   height: 100%;
 }
 
@@ -10348,7 +10369,7 @@ a.category_higlighted, a.tag_higlighted {
   left: -7px;
   top: 10px;
   background: #ffffff;
-  color: #afb3c0;
+  color: var(--gray-500);
 }
 
 @media only screen and (max-width: 40em) {
@@ -10402,16 +10423,16 @@ a.category_higlighted, a.tag_higlighted {
   box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06);
   position: absolute;
   background: #ffffff;
-  border: 1px solid #d1d4db;
+  border: 1px solid var(--gray-400);
   min-width: 200px;
 }
 .context-menu .pop_divider {
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
   background-color: #ffffff;
 }
 
 .context-menu__item {
-  color: #515667;
+  color: var(--gray-800);
   cursor: pointer;
   display: block;
   font-size: 0.875rem;
@@ -10422,7 +10443,7 @@ a.category_higlighted, a.tag_higlighted {
   text-decoration: none;
 }
 .context-menu__item:hover {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
 }
 .context-menu__item [class$=Icon],
 .context-menu__item [class*=Icon] {
@@ -10521,7 +10542,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .file-selector-tree__toolbar {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   margin: 0;
   padding: 1rem;
 }
@@ -10608,7 +10629,7 @@ a.category_higlighted, a.tag_higlighted {
   color: var(--color-palette-primary-500);
 }
 .host-list__item .hostStoppedIcon + a {
-  color: #afb3c0;
+  color: var(--gray-500);
 }
 
 .permission__host-selector {
@@ -10658,9 +10679,9 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .permissions__bar-user-role {
-  background-color: #f3f3f4;
+  background-color: var(--gray-200);
   border-radius: 0.125rem;
-  border: solid 1px #d1d4db;
+  border: solid 1px var(--gray-400);
   display: flex;
   justify-content: space-between;
   margin-bottom: 1rem;
@@ -10790,7 +10811,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 .related-content-form .portlet-toolbar {
   background-color: white;
-  border-bottom: 1px solid #d1d4db;
+  border-bottom: 1px solid var(--gray-400);
   margin: 0;
   padding: 1.5rem 1rem 1rem;
   position: sticky;
@@ -10810,7 +10831,7 @@ a.category_higlighted, a.tag_higlighted {
   font-weight: bold;
 }
 .history .history__divider {
-  background-color: #d1d4db;
+  background-color: var(--gray-400);
   margin: 1.5rem 0;
 }
 .history .history__status {
@@ -11028,7 +11049,7 @@ a.category_higlighted, a.tag_higlighted {
 }
 
 .thumbnailDiv {
-  border: solid 2px #d1d4db;
+  border: solid 2px var(--gray-400);
   box-sizing: content-box;
   cursor: pointer;
   min-height: 120px;
@@ -11037,7 +11058,7 @@ a.category_higlighted, a.tag_higlighted {
   position: relative;
 }
 .thumbnailDivHover {
-  border: solid 2px #afb3c0;
+  border: solid 2px var(--gray-500);
   box-sizing: content-box;
   padding: 1rem;
   position: relative;
@@ -11049,7 +11070,7 @@ a.category_higlighted, a.tag_higlighted {
 .editImageText {
   background: white;
   border-radius: 0.125rem;
-  border: 1.5px solid #6c7389;
+  border: 1.5px solid var(--gray-700);
   bottom: 0.5rem;
   cursor: pointer;
   opacity: 0.5;
@@ -11111,7 +11132,7 @@ Resize Handle
 }
 
 .dijitMenuItemSeparator {
-  border-bottom: solid 1px #ebecef;
+  border-bottom: solid 1px var(--gray-300);
   margin: 0 -0.5rem;
   padding: 0 0.5rem;
 }
@@ -11159,10 +11180,10 @@ Resize Handle
 }
 
 .input-text-naked {
-  background-color: #fafafb;
-  border: solid 1px #f3f3f4;
+  background-color: var(--gray-100);
+  border: solid 1px var(--gray-200);
   border-radius: 0.375rem;
-  color: #6c7389;
+  color: var(--gray-700);
   font-family: Assistant, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-size: 0.875rem;
   line-height: 2.5rem;
@@ -11205,7 +11226,7 @@ Resize Handle
 }
 
 #structure_inode_popup .dijitMenuItem:has(> .separator) {
-  border-top: 1px solid #d1d4db;
+  border-top: 1px solid var(--gray-400);
 }
 
 html {