diff --git a/uPortal-webapp/src/main/webapp/css/search/autosuggest.css b/uPortal-webapp/src/main/webapp/css/search/autosuggest.css
index 52b1c5a2b48..f3bcc9e0283 100644
--- a/uPortal-webapp/src/main/webapp/css/search/autosuggest.css
+++ b/uPortal-webapp/src/main/webapp/css/search/autosuggest.css
@@ -4,7 +4,7 @@
  * for additional information regarding copyright ownership.
  * Apereo licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file
- * except in compliance with the License.  You may obtain a
+ * except in compliance with the License. You may obtain a
  * copy of the License at the following location:
  *
  *   http://www.apache.org/licenses/LICENSE-2.0
@@ -16,25 +16,35 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+/* Define CSS variables in :root and map them to LESS variables */
+:root {
+    --portlet-header-text-color: @portlet-titlebar-link-color; /* CSS variable that references a LESS variable */
+    --portlet-content-bg-color: #d0d0d0; /* Define background color */
+}
+
+/* UI Autocomplete Styles */
 .ui-autocomplete.ui-menu {
     padding: 0;
     overflow: hidden;
 }
+
 .ui-autocomplete li {
     list-style: none;
-    max-width: 315px; /* Fixes Autocomplete on 1st search after page render would have very wide results box off side of window */
-    /*max-height: 75px;*/ /* Limiting # of chars sent tends to keep description to 2 lines in autocomplete results so don't need max-height. */
-    overflow:hidden;
+    max-width: 315px; /* Fixes wide results box issue */
+    overflow: hidden;
 }
 
 .ui-autocomplete .ui-menu-item a {
-    border-bottom: 1px solid #efefef;
+    border-bottom: 1px solid var(--portlet-header-text-color);
     padding: .5em;
 }
 
 .ui-autocomplete .ui-menu-item a:hover {
     cursor: pointer;
 }
+
+/* focused state styling */
 .ui-autocomplete a.ui-state-focus .autocomplete-header {
     color: #fff;
 }
@@ -44,12 +54,22 @@
     background: rgb(62, 70, 79);
     color: #fff;
 }
+
 .ui-autocomplete a.ui-corner-all {
     -webkit-border-radius: 0 0 0 0;
     border-radius: 0 0 0 0;
 }
+
 .ui-autocomplete .autocomplete-header {
     font-weight: 800;
     color: rgb(123, 34, 64);
 }
 
+/* Link Styles */
+a {
+    color: var(--portlet-header-text-color); /* Link color using the CSS variable */
+}
+
+a:hover {
+    color: darken(var(--portlet-header-text-color), 20%); /* Darken the CSS variable on hover */
+}