@copart/ops-tool-kit 1.12.0-alpha.2 → 1.12.0-alpha.21

package/dist/ops-tool-kit.js

@@ -32,7 +32,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$7 = "1.12.0-alpha.2";
+const version$7 = "1.12.0-alpha.21";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -86,7 +86,8 @@ const devDependencies$1 = {
   rollup: "^2.22.1",
   "rollup-plugin-analyzer": "^3.3.0",
   "rollup-plugin-filesize": "9.0.2",
-  "rollup-plugin-postcss": "^3.1.3"
+  "rollup-plugin-postcss": "^3.1.3",
+  "@rollup/plugin-replace": "5.0.5"
 };
 const peerDependencies = {
   "@copart/core-components": "2.3.0-alpha.filters.6",
@@ -852,7 +853,7 @@ var b$1 = "function" === typeof Symbol && Symbol.for,
   d = b$1 ? Symbol.for("react.portal") : 60106,
   e = b$1 ? Symbol.for("react.fragment") : 60107,
   f = b$1 ? Symbol.for("react.strict_mode") : 60108,
-  g$1 = b$1 ? Symbol.for("react.profiler") : 60114,
+  g = b$1 ? Symbol.for("react.profiler") : 60114,
   h$1 = b$1 ? Symbol.for("react.provider") : 60109,
   k$1 = b$1 ? Symbol.for("react.context") : 60110,
   l = b$1 ? Symbol.for("react.async_mode") : 60111,
@@ -875,7 +876,7 @@ function z$1(a) {
           case l:
           case m:
           case e:
-          case g$1:
+          case g:
           case f:
           case p:
             return a;
@@ -909,7 +910,7 @@ var Fragment = e;
 var Lazy = t;
 var Memo = r;
 var Portal = d;
-var Profiler = g$1;
+var Profiler = g;
 var StrictMode = f;
 var Suspense = p;
 var isAsyncMode = function (a) {
@@ -941,7 +942,7 @@ var isPortal = function (a) {
   return z$1(a) === d;
 };
 var isProfiler = function (a) {
-  return z$1(a) === g$1;
+  return z$1(a) === g;
 };
 var isStrictMode = function (a) {
   return z$1(a) === f;
@@ -950,7 +951,7 @@ var isSuspense = function (a) {
   return z$1(a) === p;
 };
 var isValidElementType = function (a) {
-  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g$1 || a === f || a === p || a === q$1 || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h$1 || a.$$typeof === k$1 || a.$$typeof === n || a.$$typeof === w$1 || a.$$typeof === x$1 || a.$$typeof === y || a.$$typeof === v);
+  return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q$1 || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h$1 || a.$$typeof === k$1 || a.$$typeof === n || a.$$typeof === w$1 || a.$$typeof === x$1 || a.$$typeof === y || a.$$typeof === v);
 };
 var typeOf = z$1;
 
@@ -2785,6 +2786,12 @@ var createOpsStorage = function createOpsStorage() {
       var appAuthName = appData ? appData.appAuthName : (_window$toolkitEnv4 = window.toolkitEnv) !== null && _window$toolkitEnv4 !== void 0 && _window$toolkitEnv4.APP_AUTH_NAME ? window.toolkitEnv.APP_AUTH_NAME : process.env.APP_AUTH_NAME;
       return appAuthName ? storage$1.getLocalItem("".concat(appAuthName, ":permissions")) : [];
     },
+    get appScopesAndFunctions() {
+      return getLocalItem('appScopesAndFunctions') || [];
+    },
+    get userAppScopes() {
+      return getLocalItem('login', 'userAppScopes') || [];
+    },
     get coreConfig() {
       return getLocalItem('opsportal-core:config');
     },
@@ -3666,12 +3673,12 @@ function nonStandardBrowserEnv() {
 
 // btoa polyfill for IE<10 courtesy https://github.com/davidchambers/Base64.js
 var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
-function E() {
+function E$1() {
   this.message = 'String contains an invalid character';
 }
-E.prototype = new Error();
-E.prototype.code = 5;
-E.prototype.name = 'InvalidCharacterError';
+E$1.prototype = new Error();
+E$1.prototype.code = 5;
+E$1.prototype.name = 'InvalidCharacterError';
 function btoa$2(input) {
   var str = String(input);
   var output = '';
@@ -3686,7 +3693,7 @@ function btoa$2(input) {
   output += map.charAt(63 & block >> 8 - idx % 1 * 8)) {
     charCode = str.charCodeAt(idx += 3 / 4);
     if (charCode > 0xFF) {
-      throw new E();
+      throw new E$1();
     }
     block = block << 8 | charCode;
   }
@@ -5367,40 +5374,46 @@ var getConfig = /*#__PURE__*/function () {
           response = _context.sent;
           config = response.data.data; // Fill in values needed for access checks.
           config.tiles = hydrateTiles(config.tiles);
+          config.tileOverrides = hydrateTiles(config.tileOverrides);
           return _context.abrupt("return", config);
-        case 11:
-          _context.prev = 11;
+        case 12:
+          _context.prev = 12;
           _context.t0 = _context["catch"](0);
           if (!JSON.stringify(_context.t0.response.data).includes('503')) {
-            _context.next = 17;
+            _context.next = 18;
             break;
           }
           return _context.abrupt("return", Promise.reject(new Error('Fetch Error, Please make sure you are on the Copart network')));
-        case 17:
-          Promise.reject(_context.t0);
         case 18:
+          Promise.reject(_context.t0);
+        case 19:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[0, 11]]);
+    }, _callee, null, [[0, 12]]);
   }));
   return function getConfig(_x) {
     return _ref.apply(this, arguments);
   };
 }();
-var findAppData = function findAppData(tiles) {
+var tileFilter = function tileFilter(tile) {
   var _window$toolkitEnv;
   var appName = (_window$toolkitEnv = window.toolkitEnv) !== null && _window$toolkitEnv !== void 0 && _window$toolkitEnv.APP_NAME ? window.toolkitEnv.APP_NAME : process.env.APP_NAME;
   if (window.location.pathname.includes('embedded')) {
     appName = window.location.pathname;
   }
-  var matchingTiles = tiles.filter(function (tile) {
-    if (tile.appName) {
-      return tile.appName === 'embedded' ? tile.path === appName : tile.appName === appName;
-    } else {
-      return tile.path === "/".concat(appName);
-    }
-  });
+  if (tile.appName) {
+    return tile.appName === 'embedded' ? tile.path === appName : tile.appName === appName;
+  } else {
+    return tile.path === "/".concat(appName);
+  }
+};
+var findAppData = function findAppData() {
+  var tiles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var tileOverrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var matchingTiles = [];
+  matchingTiles = matchingTiles.concat(tileOverrides.filter(tileFilter));
+  matchingTiles = matchingTiles.concat(tiles.filter(tileFilter));
   if (matchingTiles.length > 1) {
     var currentLocation = window.location.pathname;
     return matchingTiles.find(function (tile) {
@@ -5423,7 +5436,7 @@ var getAppTileData = /*#__PURE__*/function () {
         case 3:
           config = _context2.sent;
           storage.setLocalItem('opsportal-core:config', config);
-          return _context2.abrupt("return", findAppData(config.tiles || []));
+          return _context2.abrupt("return", findAppData(config.tiles, config.tileOverrides));
         case 6:
         case "end":
           return _context2.stop();
@@ -5446,17 +5459,54 @@ var getHeaders$1 = function getHeaders() {
   };
 };
 var getPermissions = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(appName) {
-    var _storage$getLocalItem, _storage$getLocalItem2, permissions, endpoint, response, appDetails;
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(appName, useAppScopes) {
+    var permissions, userAppScopes, allAppScopesAndFunctions, currentAppScopesAndFunctions, _currentAppScopesAndF, appFunctions, appFunctionsMap, _storage$getLocalItem, _storage$getLocalItem2, endpoint, response, appDetails;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
           permissions = [];
+          if (!useAppScopes) {
+            _context.next = 9;
+            break;
+          }
+          userAppScopes = Array.isArray(storage.userAppScopes) ? storage.userAppScopes : [];
+          allAppScopesAndFunctions = storage.appScopesAndFunctions;
+          currentAppScopesAndFunctions = allAppScopesAndFunctions.find(function (scope) {
+            return scope.appName === appName;
+          });
+          if (currentAppScopesAndFunctions) {
+            appFunctions = {}, appFunctionsMap = {};
+            (_currentAppScopesAndF = currentAppScopesAndFunctions.scopes) === null || _currentAppScopesAndF === void 0 ? void 0 : _currentAppScopesAndF.forEach(function (scope) {
+              var scopeName = scope.appscope;
+              var userHasScope = userAppScopes.find(function (appScope) {
+                return appScope.appName === appName && appScope.scopeName === scopeName;
+              });
+              if (userHasScope) {
+                scope.applicationFunctions.forEach(function (appFunc) {
+                  if (!appFunctionsMap[appFunc]) {
+                    appFunctionsMap[appFunc] = true;
+                    appFunctions[appFunc] = {
+                      name: appFunc,
+                      description: appFunc,
+                      hierarchyDetails: userHasScope.hierarchies
+                    };
+                  } else {
+                    var _appFunctions$appFunc;
+                    (_appFunctions$appFunc = appFunctions[appFunc]) === null || _appFunctions$appFunc === void 0 ? void 0 : _appFunctions$appFunc.hierarchyDetails.concat(userHasScope.hierarchies);
+                  }
+                });
+              }
+            });
+            permissions = Object.values(appFunctions);
+          }
+          _context.next = 15;
+          break;
+        case 9:
           endpoint = (_storage$getLocalItem = storage.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem === void 0 ? void 0 : (_storage$getLocalItem2 = _storage$getLocalItem.endpoints) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.g2AppPermissions;
-          _context.next = 5;
+          _context.next = 12;
           return fetcher.get("".concat(endpoint).concat(appName), getHeaders$1());
-        case 5:
+        case 12:
           response = _context.sent;
           appDetails = response.data.applications.find(function (app) {
             return app.name === appName;
@@ -5464,25 +5514,26 @@ var getPermissions = /*#__PURE__*/function () {
           if (appDetails) {
             permissions = appDetails.applicationFunctions;
           }
+        case 15:
           storage.setLocalItem("".concat(appName, ":permissions"), permissions);
           return _context.abrupt("return", permissions);
-        case 12:
-          _context.prev = 12;
+        case 19:
+          _context.prev = 19;
           _context.t0 = _context["catch"](0);
           if (!(_context.t0.response && JSON.stringify(_context.t0.response.data).includes('503'))) {
-            _context.next = 18;
+            _context.next = 25;
             break;
           }
           return _context.abrupt("return", Promise.reject(new Error('Fetch Error, Please make sure you are on the Copart network')));
-        case 18:
+        case 25:
           Promise.reject(_context.t0);
-        case 19:
+        case 26:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[0, 12]]);
+    }, _callee, null, [[0, 19]]);
   }));
-  return function getPermissions(_x) {
+  return function getPermissions(_x, _x2) {
     return _ref.apply(this, arguments);
   };
 }();
@@ -5589,17 +5640,17 @@ var getDefaultYard = function getDefaultYard(country) {
   var stack = (_window$toolkitEnv = window.toolkitEnv) !== null && _window$toolkitEnv !== void 0 && _window$toolkitEnv.STACK ? window.toolkitEnv.STACK : process.env.STACK;
   if (stack === 'uk') {
     return {
-      name: "COPART UK",
+      name: 'COPART UK',
       number: 400,
-      userSecurityLevel: "1",
+      userSecurityLevel: '1',
       address: {
-        city: "WOOTTON",
-        country: "GBR",
-        line1: "ACREY FIELDS",
-        state: "GB",
+        city: 'WOOTTON',
+        country: 'GBR',
+        line1: 'ACREY FIELDS',
+        state: 'GB',
         zip: {
-          zip1: "MK43",
-          zip2: ""
+          zip1: 'MK43',
+          zip2: ''
         }
       }
     };
@@ -5607,60 +5658,60 @@ var getDefaultYard = function getDefaultYard(country) {
     switch (country) {
       case 'IN':
         return {
-          name: "CITC",
+          name: 'CITC',
           number: 8003,
           address: {
-            city: "HYDERABAD",
-            country: "IND",
-            line1: "PSR PRIME TOWERS 5TH FLOOR",
-            line2: "SURVEY NO 126P, GACHIBOWLI",
-            state: "TS",
+            city: 'HYDERABAD',
+            country: 'IND',
+            line1: 'PSR PRIME TOWERS 5TH FLOOR',
+            line2: 'SURVEY NO 126P, GACHIBOWLI',
+            state: 'TS',
             zip: {
-              zip1: "500032"
+              zip1: '500032'
             }
           }
         };
       case 'US':
         return {
-          name: "CORPORATE",
+          name: 'CORPORATE',
           number: 700,
           address: {
-            city: "DALLAS",
-            country: "USA",
-            line1: "14185 DALLAS PARKWAY #300",
-            state: "TX",
+            city: 'DALLAS',
+            country: 'USA',
+            line1: '14185 DALLAS PARKWAY #300',
+            state: 'TX',
             zip: {
-              zip1: "75254"
+              zip1: '75254'
             }
           }
         };
       case 'UK':
         return {
-          name: "COPART UK",
+          name: 'COPART UK',
           number: 400,
-          userSecurityLevel: "1",
+          userSecurityLevel: '1',
           address: {
-            city: "WOOTTON",
-            country: "GBR",
-            line1: "ACREY FIELDS",
-            state: "GB",
+            city: 'WOOTTON',
+            country: 'GBR',
+            line1: 'ACREY FIELDS',
+            state: 'GB',
             zip: {
-              zip1: "MK43",
-              zip2: ""
+              zip1: 'MK43',
+              zip2: ''
             }
           }
         };
       default:
         return {
-          name: "CORPORATE",
+          name: 'CORPORATE',
           number: 700,
           address: {
-            city: "DALLAS",
-            country: "USA",
-            line1: "14185 DALLAS PARKWAY #300",
-            state: "TX",
+            city: 'DALLAS',
+            country: 'USA',
+            line1: '14185 DALLAS PARKWAY #300',
+            state: 'TX',
             zip: {
-              zip1: "75254"
+              zip1: '75254'
             }
           }
         };
@@ -5735,13 +5786,14 @@ var storeLoginData = function storeLoginData(data) {
     redirectTo: 'home',
     attemptFailed: false,
     sessionExpired: false,
-    hasCasAccess: data.hasCasAccess
+    hasCasAccess: data.hasCasAccess,
+    entity_auth_scope: data.entity_auth_scope
   });
 };
 var setupLogin = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(loginData) {
     var _window$toolkitEnv3;
-    var stack, hasCasAccess, yardList, entitySamID, entityID, entityCasID, userDetails, noCasAccess, userCountryCode, defaultYard;
+    var stack, hasCasAccess, yardList, entitySamID, entityID, entityCasID, userDetails, noCasAccess, userCountryCode, defaultYard, _storage$getLocalItem, _storage$getLocalItem2, endpoint, appFunctions;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
@@ -5813,11 +5865,26 @@ var setupLogin = /*#__PURE__*/function () {
           loginData.hasCasAccess = hasCasAccess;
         case 44:
           storeLoginData(loginData);
-        case 45:
+          _context2.prev = 45;
+          endpoint = (_storage$getLocalItem = storage$1.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem === void 0 ? void 0 : (_storage$getLocalItem2 = _storage$getLocalItem.endpoints) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.appScopesAWS;
+          _context2.next = 49;
+          return fetcher.get(endpoint).then(function (res) {
+            return res.data;
+          });
+        case 49:
+          appFunctions = _context2.sent;
+          storage$1.setLocalItem('appScopesAndFunctions', appFunctions);
+          _context2.next = 56;
+          break;
+        case 53:
+          _context2.prev = 53;
+          _context2.t1 = _context2["catch"](45);
+          console.log(_context2.t1);
+        case 56:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[17, 27]]);
+    }, _callee2, null, [[17, 27], [45, 53]]);
   }));
   return function setupLogin(_x) {
     return _ref2.apply(this, arguments);
@@ -9270,6 +9337,81 @@ var getInnovationHubToken = /*#__PURE__*/function () {
   };
 }();
 
+var getHierarchyDetails = function getHierarchyDetails(hierarchies, hierarchyId) {
+  var hierarchy = hierarchies[hierarchyId];
+  var isHierarchyFromCurrentCountry = hierarchy && hierarchy.countryCode === storage.getSessionItem('dashboard', 'selectedCountryA3code');
+  return isHierarchyFromCurrentCountry ? {
+    id: hierarchy.hierarchyId,
+    level: hierarchy.levelName,
+    name: hierarchy.hierarchyName
+  } : null;
+};
+var getUserScopes = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _storage$getLocalItem, _storage$getLocalItem2;
+    var endpoint, hierarchies, scopeData, scopeList, filteredScopeList;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          endpoint = (_storage$getLocalItem = storage.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem === void 0 ? void 0 : (_storage$getLocalItem2 = _storage$getLocalItem.endpoints) === null || _storage$getLocalItem2 === void 0 ? void 0 : _storage$getLocalItem2.hierarchiesAWS;
+          _context.prev = 1;
+          _context.next = 4;
+          return fetcher.get(endpoint).then(function (res) {
+            return res.data;
+          });
+        case 4:
+          hierarchies = _context.sent;
+          storage.setLocalItem('hierarchies', hierarchies);
+          _context.next = 12;
+          break;
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](1);
+          console.log(_context.t0);
+          hierarchies = storage.getLocalItem('hierarchies');
+        case 12:
+          scopeData = storage.getLocalItem('login', 'entity_auth_scope');
+          scopeList = typeof scopeData === 'string' ? scopeData === null || scopeData === void 0 ? void 0 : scopeData.split(',') : [];
+          scopeList = scopeList.filter(function (scope) {
+            return typeof scope === 'string' && scope.trim() !== '';
+          });
+          filteredScopeList = [];
+          scopeList.forEach(function (scope) {
+            var _storage$getLocalItem3;
+            var scopeInfo = scope === null || scope === void 0 ? void 0 : scope.split('|');
+            var appScopeEnv = (_storage$getLocalItem3 = storage.getLocalItem('opsportal-core:config')) === null || _storage$getLocalItem3 === void 0 ? void 0 : _storage$getLocalItem3.appScopeEnv;
+            var isScopeForCurrentEnv = scopeInfo[0] && scopeInfo[0] === appScopeEnv;
+            if (isScopeForCurrentEnv) {
+              var _scopeInfo$;
+              var hierarchyList = ((_scopeInfo$ = scopeInfo[3]) === null || _scopeInfo$ === void 0 ? void 0 : _scopeInfo$.split(':')) || [];
+              var hierarchiesWithDetails = [];
+              hierarchyList.forEach(function (hierarchy) {
+                var details = getHierarchyDetails(hierarchies, Number(hierarchy));
+                if (details) {
+                  hierarchiesWithDetails.push(details);
+                }
+              });
+              if (hierarchiesWithDetails.length > 0) {
+                filteredScopeList.push({
+                  appName: scopeInfo[1],
+                  scopeName: scopeInfo[2],
+                  hierarchies: hierarchiesWithDetails
+                });
+              }
+            }
+          });
+          return _context.abrupt("return", filteredScopeList);
+        case 18:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 8]]);
+  }));
+  return function getUserScopes() {
+    return _ref.apply(this, arguments);
+  };
+}();
+
 fetcher.login = login;
 fetcher.oktaLogin = oktaLogin;
 fetcher.getConfig = getConfig;
@@ -9285,6 +9427,7 @@ fetcher.getPrintersForYard = getPrintersForYard;
 fetcher.getPermissions = getPermissions;
 fetcher.getCoreAppPermissions = getCoreAppPermissions;
 fetcher.getInnovationHubToken = getInnovationHubToken;
+fetcher.getUserScopes = getUserScopes;
 
 var getRouteName = function getRouteName() {
   return window.location.pathname.split('/').splice(1)[0];
@@ -21281,7 +21424,7 @@ FeedbackDialog.defaultProps = {
   }
 };
 
-var css_248z$k = ".utilities_ops-app-frame_AppBarComponent_AppBar--root {\r\n  background-color: var(--blue);\r\n  background-color: var(--blue);\r\n  height: 48px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--leftItems {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: start;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons {\r\n  margin: 0 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogo {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  margin-left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogoNew {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 3px 0 0 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--moduleName {\r\n  color: white;\r\n  font-size: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items {\r\n  color: white;\r\n  cursor: pointer;\r\n  font-size: 18px;\r\n  display: flex;\r\n  justify-content: center;\r\n  margin: 8px !important;\r\n  position: relative;\r\n  width: 25px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--logout {\r\n  margin-right: 24px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items i {\r\n  color: #fff;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon i {\r\n  color: #ffff00;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--language {\r\n  width: auto;\r\n  grid-gap: 4px;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  display: flex;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard {\r\n  width: auto;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  background: #fff;\r\n  color: #1D5AB9;\r\n  font-weight: 600;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  grid-gap: 8px;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  padding: 2px 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard span i {\r\n  color: #1D5AB9;\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard .utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber {\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col svg {\r\n  color: white;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  width: 6rem;\r\n  margin-top: 0rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--text {\r\n  margin-top: 0.6rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--iconText {\r\n  margin-top: 0.4rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchBar,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--placeholderDiv {\r\n  margin-top: -0.2rem;\r\n  margin-left: 2rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft > img.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Open Sans';\r\n  font-style: italic;\r\n  font-weight: 600;\r\n  src: url(https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKXGUdhmIqOjjg.woff2)\r\n    format('woff2');\r\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appTitle {\r\n  color: #fff;\r\n  font-family: 'Open Sans', sans-serif;\r\n  font-weight: 600;\r\n  font-style: italic;\r\n  font-size: 14px;\r\n  position: relative;\r\n  left: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--item {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon {\r\n  /* margin-left: 10px;\r\n  margin-right: 7px; */\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  background: #fff;\r\n  color: #1D5AB9;\r\n  font-weight: 600;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.4), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13), 0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10);\r\n  font-size: 14px;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  margin: 0 8px;\r\n  padding: 6px 20px 7px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span i {\r\n  font-size: 18px;\r\n  color: #1D5AB9;\r\n}\r\n\r\n/* .searchIcon > div {\r\n  margin-left: 7px;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper i {\r\n  color: #fff;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault {\r\n  color: white;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  margin: 5px;\r\n  padding: 0px 10px;\r\n  height: 25px;\r\n  font-weight: bold;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--light {\r\n  border: 1px solid #1d5ab9;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightDefault {\r\n  color: black;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable i {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline {\r\n  color: red;\r\n  margin: 5px 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline svg {\r\n  margin-right: 5px;\r\n  margin-left: 5px;\r\n  width: 24px;\r\n  height: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper {\r\n  margin-left: 5px;\r\n  display: inline-flex;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i {\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i {\r\n  line-height: unset;\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable {\r\n  color: green;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  color: red;\r\n}\r\n\r\n/* .userMenu {\r\n  margin-left: 10px !important;\r\n  margin-right: 5px !important;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n  margin-left: 10px !important;\r\n  margin-right: 10px !important;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n  margin-left: 7px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--feedback {\r\n  margin: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--overflowItems {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button {\r\n  cursor: pointer;\r\n  position: relative;\r\n  top: -2px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button i {\r\n  color: #fff;\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpDot {\r\n  background-color: #ef5350;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: 3px;\r\n  left: 13px;\r\n  width: 10px;\r\n  height: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip{\r\n  position: absolute;\r\n  background: #fff;\r\n  padding: 8px;\r\n  right: 30px;\r\n  top: -2px;\r\n  border-radius: 2px;\r\n  font-weight: 400;\r\n  font-size: 12px;\r\n  cursor: auto;\r\n  color: #000;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 100%;\r\n  margin-top: -5px;\r\n  border-width: 5px;\r\n  border-style: solid;\r\n  border-color: transparent transparent transparent #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip i{\r\n  color: #000;\r\n  font-size: 12px;\r\n  margin-left: 5px;\r\n  position: relative;\r\n  top: 1px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer {\r\n  position: absolute;\r\n  display: flex;\r\n  height: calc(100vh - 48px);\r\n  width: 100vw;\r\n  bottom: 0;\r\n  z-index: 10000;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide {\r\n  background-color: rgba(0,0,0,.5);\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st0{fill:#0075E6;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st1{fill:#6A819C;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st2{fill:#FFFFFF;}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  top: 2px;\r\n  right: 358px;\r\n  height: 38px;\r\n  width: 38px;\r\n  background-color: white;\r\n  z-index: 11000;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--profile {\r\n  padding: 5px 7px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  font-weight: 600;\r\n  color: #1d5ab9;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchContainer {\r\n  background: rgba(255, 255, 255, 0.40);\r\n  -webkit-backdrop-filter: blur(20px);\r\n          backdrop-filter: blur(20px);\r\n  position: absolute;\r\n  top: 50px;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 999;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper{\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 48px;\r\n  width: 100vw;\r\n  background-color: rgba(0,0,0,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\r\n  width: 400px;\r\n  max-width: 400px;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 48px);\r\n  /* padding: 15px; */\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n@media only screen and (max-width: 1024px) {\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  /* .searchIcon {\r\n    margin-left: 5px;\r\n    margin-right: 2px;\r\n  }\r\n\r\n  .searchIcon > div {\r\n    margin-left: 2px;\r\n  } */\r\n\r\n  /* .userMenu {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  } */\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n    margin-left: 2px;\r\n  }\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper\r\n{\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 48px;\r\n  width: 100vw;\r\n  background-color: rgba(0,0,0,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv\r\n{\r\n  width: 400px;\r\n  max-width: 400px;\r\n  position: absolute;\r\n  right: 0;\r\n  height: 100%;\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader{\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsWrapper{\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\r\n  background-color: #ef5350;\r\n  color: white;\r\n  font-size: 12px;\r\n  width: 1rem;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: -5px;\r\n  left: 11px;\r\n  height: 1rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--twoChars {\r\n  width: 1.1rem;\r\n  height: 1.1rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--threeChars {\r\n  width: 1.3rem;\r\n  height: 1.3rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--notificationIconWrapper {\r\n  cursor: pointer;\r\n  margin-left: 12px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 11px solid white;\r\n  position: absolute;\r\n  bottom: -13px;\r\n  right: 5px;\r\n}\r\n\r\n/* .arrowTipContainer.ideaNoteArrow {\r\n  right: 16px;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpArrow {\r\n  right: 3px;\r\n  bottom: -9px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--profileArrow {\r\n  bottom: -12px;\r\n  right: 8px;\r\n  border-left: 7px solid transparent;\r\n  border-right: 7px solid transparent;\r\n  border-bottom: 10px solid white;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv {\r\n    width: 85%;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\r\n    left: 12px;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\r\n    right: 5px;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer iframe {\r\n    width: 85% !important;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\r\n    display: none;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\r\n    width: 85%;\r\n  }\r\n}";
+var css_248z$k = ".utilities_ops-app-frame_AppBarComponent_AppBar--root {\r\n  background-color: var(--blue);\r\n  background-color: var(--blue);\r\n  height: 48px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  white-space: nowrap;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--leftItems {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: start;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons {\r\n  margin: 0 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogo {\r\n  display: flex;\r\n  align-items: center;\r\n  flex-direction: column;\r\n  margin-left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--copartLogoNew {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin: 3px 0 0 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--moduleName {\r\n  color: white;\r\n  font-size: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items {\r\n  color: white;\r\n  cursor: pointer;\r\n  font-size: 18px;\r\n  display: flex;\r\n  justify-content: center;\r\n  margin: 8px !important;\r\n  position: relative;\r\n  width: 25px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--logout {\r\n  margin-right: 24px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items i {\r\n  color: #fff;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon i {\r\n  color: #ffff00;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--language {\r\n  width: auto;\r\n  grid-gap: 4px;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  display: flex;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard {\r\n  width: auto;\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  background: #fff;\r\n  color: #1D5AB9;\r\n  font-weight: 600;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  grid-gap: 8px;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  padding: 2px 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard span i {\r\n  color: #1D5AB9;\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--yard .utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber {\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid .utilities_ops-app-frame_AppBarComponent_AppBar--col svg {\r\n  color: white;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  width: 6rem;\r\n  margin-top: 0rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--text {\r\n  margin-top: 0.6rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--iconText {\r\n  margin-top: 0.4rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchBar,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--placeholderDiv {\r\n  margin-top: -0.2rem;\r\n  margin-left: 2rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft > img.utilities_ops-app-frame_AppBarComponent_AppBar--logo {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Open Sans';\r\n  font-style: italic;\r\n  font-weight: 600;\r\n  src: url(https://fonts.gstatic.com/s/opensans/v18/memnYaGs126MiZpBA-UFUKXGUdhmIqOjjg.woff2)\r\n    format('woff2');\r\n  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--appTitle {\r\n  color: #fff;\r\n  font-family: 'Open Sans', sans-serif;\r\n  font-weight: 600;\r\n  font-style: italic;\r\n  font-size: 14px;\r\n  position: relative;\r\n  left: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--item {\r\n  display: flex;\r\n  color: white;\r\n  font-size: 13px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon {\r\n  /* margin-left: 10px;\r\n  margin-right: 7px; */\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  background: #fff;\r\n  color: #1D5AB9;\r\n  font-weight: 600;\r\n  border-radius: 4px;\r\n  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.4), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13), 0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10);\r\n  font-size: 14px;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  margin: 0 8px;\r\n  padding: 6px 20px 7px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon span i {\r\n  font-size: 18px;\r\n  color: #1D5AB9;\r\n}\r\n\r\n/* .searchIcon > div {\r\n  margin-left: 7px;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper i {\r\n  color: #fff;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper span {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault {\r\n  color: white;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  margin: 5px;\r\n  padding: 0px 10px;\r\n  height: 25px;\r\n  font-weight: bold;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--light {\r\n  border: 1px solid #1d5ab9;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightDefault {\r\n  color: black;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  background-color: white;\r\n  border-radius: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable i {\r\n  color: green;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline {\r\n  color: red;\r\n  margin: 5px 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline svg {\r\n  margin-right: 5px;\r\n  margin-left: 5px;\r\n  width: 24px;\r\n  height: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper {\r\n  margin-left: 5px;\r\n  display: inline-flex;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i {\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i {\r\n  line-height: unset;\r\n  font-size: 16px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable {\r\n  color: green;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable {\r\n  color: red;\r\n}\r\n\r\n/* .userMenu {\r\n  margin-left: 10px !important;\r\n  margin-right: 5px !important;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n  margin: 8px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n  margin-left: 7px;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--feedback {\r\n  margin: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--overflowItems {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button {\r\n  cursor: pointer;\r\n  position: relative;\r\n  top: -2px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button i {\r\n  color: #fff;\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpDot {\r\n  background-color: #ef5350;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: 3px;\r\n  left: 13px;\r\n  width: 10px;\r\n  height: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip{\r\n  position: absolute;\r\n  background: #fff;\r\n  padding: 8px;\r\n  right: 30px;\r\n  top: -2px;\r\n  border-radius: 2px;\r\n  font-weight: 400;\r\n  font-size: 12px;\r\n  cursor: auto;\r\n  color: #000;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip::before{\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 100%;\r\n  margin-top: -5px;\r\n  border-width: 5px;\r\n  border-style: solid;\r\n  border-color: transparent transparent transparent #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip i{\r\n  color: #000;\r\n  font-size: 12px;\r\n  margin-left: 5px;\r\n  position: relative;\r\n  top: 1px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer {\r\n  position: absolute;\r\n  display: flex;\r\n  height: calc(100vh - 48px);\r\n  width: 100vw;\r\n  bottom: 0;\r\n  z-index: 10000;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide {\r\n  background-color: rgba(0,0,0,.5);\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st0{fill:#0075E6;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st1{fill:#6A819C;}\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--st2{fill:#FFFFFF;}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: absolute;\r\n  top: 2px;\r\n  right: 358px;\r\n  height: 38px;\r\n  width: 38px;\r\n  background-color: white;\r\n  z-index: 11000;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--profile {\r\n  padding: 5px 7px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  font-weight: 600;\r\n  color: #1d5ab9;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--searchContainer {\r\n  background: rgba(255, 255, 255, 0.40);\r\n  -webkit-backdrop-filter: blur(20px);\r\n          backdrop-filter: blur(20px);\r\n  position: absolute;\r\n  top: 50px;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 999;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper{\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 48px;\r\n  width: 100vw;\r\n  background-color: rgba(0,0,0,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\r\n  width: 400px;\r\n  max-width: 400px;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 48px);\r\n  /* padding: 15px; */\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n@media only screen and (max-width: 1024px) {\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable i,\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable svg {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  /* .searchIcon {\r\n    margin-left: 5px;\r\n    margin-right: 2px;\r\n  }\r\n\r\n  .searchIcon > div {\r\n    margin-left: 2px;\r\n  } */\r\n\r\n  /* .userMenu {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  } */\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag {\r\n    margin-left: 3px !important;\r\n    margin-right: 3px !important;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag > div {\r\n    margin-left: 2px;\r\n  }\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper\r\n{\r\n  position: absolute;\r\n  z-index: 10000;\r\n  height: 100vh;\r\n  top: 48px;\r\n  width: 100vw;\r\n  background-color: rgba(0,0,0,.5);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv\r\n{\r\n  width: 400px;\r\n  max-width: 400px;\r\n  position: absolute;\r\n  right: 0;\r\n  height: 100%;\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader{\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  padding-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationsWrapper{\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\r\n  background-color: #ef5350;\r\n  color: white;\r\n  font-size: 12px;\r\n  width: 1rem;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  top: -5px;\r\n  left: 11px;\r\n  height: 1rem;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--twoChars {\r\n  width: 1.1rem;\r\n  height: 1.1rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount.utilities_ops-app-frame_AppBarComponent_AppBar--threeChars {\r\n  width: 1.3rem;\r\n  height: 1.3rem;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items.utilities_ops-app-frame_AppBarComponent_AppBar--notificationIconWrapper {\r\n  cursor: pointer;\r\n  margin-left: 12px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 11px solid white;\r\n  position: absolute;\r\n  bottom: -13px;\r\n  right: 5px;\r\n}\r\n\r\n/* .arrowTipContainer.ideaNoteArrow {\r\n  right: 16px;\r\n} */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--mihelpArrow {\r\n  right: 3px;\r\n  bottom: -9px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--profileArrow {\r\n  bottom: -12px;\r\n  right: 8px;\r\n  border-left: 7px solid transparent;\r\n  border-right: 7px solid transparent;\r\n  border-bottom: 10px solid white;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv {\r\n    width: 85%;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount{\r\n    left: 12px;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer {\r\n    right: 5px;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer iframe {\r\n    width: 85% !important;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide .utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton {\r\n    display: none;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper .utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar {\r\n    width: 85%;\r\n  }\r\n}";
 styleInject(css_248z$k);
 
 var LogOutMenu = function LogOutMenu(_ref) {
@@ -21308,7 +21451,7 @@ var LogOutMenu = function LogOutMenu(_ref) {
   }));
 };
 
-var css_248z$j = ".utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails {\r\n  width: 100%;\r\n  display: flex;\r\n  padding: 36px 48px;\r\n  border-bottom: 1px solid #EDEBE9;\r\n  margin-bottom: 12px;\r\n  grid-gap: 24px;\r\n  gap: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--details {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--details h3 {\r\n  font-size: 16px;\r\n  font-style: normal;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--details p {\r\n  font-size: 12px;\r\n  font-style: normal;\r\n  font-weight: 350;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 7px 20px;\r\n  grid-gap: 6px;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton i {\r\n  color: #FFF;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton span button {\r\n  padding: 7px 25px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton span button span {\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails {\r\n    padding: 24px 36px;\r\n    flex-direction: column;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton {\r\n    padding: 0;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton > span {\r\n    width: 100%;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton > span > button {\r\n    width: 100%;\r\n  }\r\n}";
+var css_248z$j = ".utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: space-around;\r\n  padding: 20px 0;\r\n  border-bottom: 1px solid #EDEBE9;\r\n  grid-gap: 24px;\r\n  gap: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--details {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--details h3 {\r\n  font-size: 16px;\r\n  font-style: normal;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--details p {\r\n  font-size: 12px;\r\n  font-style: normal;\r\n  font-weight: 350;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 7px 20px;\r\n  grid-gap: 6px;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton i {\r\n  color: #FFF;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton span button {\r\n  padding: 7px 25px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton span button span {\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails {\r\n    padding: 24px 36px;\r\n    flex-direction: column;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton {\r\n    padding: 0;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton > span {\r\n    width: 100%;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails .utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton > span > button {\r\n    width: 100%;\r\n  }\r\n}";
 styleInject(css_248z$j);
 
 var ProfileDetails = function ProfileDetails(_ref) {
@@ -22945,18 +23088,47 @@ var FeedbackButton = function FeedbackButton(props) {
   }));
 };
 
+var FLAG_URL_PREFIX = '/images/flag_icons/flag_';
+var HEIGHT_22PX = {
+  height: '22px'
+};
+var HEIGHT_30PX = {
+  height: '30px'
+};
+var COUNTRY_CODES = {
+  ca: 'canada'
+};
+
+var code = function code(countryCode) {
+  return COUNTRY_CODES[countryCode] || countryCode;
+};
+var flagUrl = function flagUrl(countryCode) {
+  return "".concat(FLAG_URL_PREFIX).concat((code(countryCode) || 'us').toLowerCase(), ".png");
+};
+var heightStyle = function heightStyle(type) {
+  return type !== 'cas' ? HEIGHT_22PX : HEIGHT_30PX;
+};
+
+var Flag$1 = function Flag(props) {
+  return /*#__PURE__*/React__namespace.createElement("img", {
+    "data-testid": "flag",
+    alt: "Flag",
+    src: flagUrl(props.countryCode),
+    style: heightStyle(props.type),
+    "data-e2e": "cc-Flag"
+  });
+};
+
 var onRenderItem = function onRenderItem(item) {
   return item.render();
 };
 var OverflowMenu = function OverflowMenu(props) {
-  console.log('***props=', props);
   var dataToRender = {
     primary: props.items,
     overflow: []
   };
   var clickHandler = props.clickHandler;
   var onReduceData = function onReduceData(currentData) {
-    console.log('***currentData=', currentData);
     if (currentData.primary.length === 0) {
       return undefined;
     }
@@ -22965,10 +23137,6 @@ var OverflowMenu = function OverflowMenu(props) {
     var primary = currentData.primary.filter(function (item) {
       return item.key === 'notifications';
     });
-    console.log('***onReduceData', {
-      primary: primary,
-      overflow: overflow
-    });
     return {
       primary: primary,
       overflow: overflow
@@ -22980,10 +23148,6 @@ var OverflowMenu = function OverflowMenu(props) {
     }
     var overflow = currentData.overflow.slice(1);
     var primary = [].concat(_toConsumableArray(currentData.primary), _toConsumableArray(currentData.overflow.slice(0, 1)));
-    console.log('***onGrowData', {
-      primary: primary,
-      overflow: overflow
-    });
     return {
       primary: primary,
       overflow: overflow
@@ -23050,7 +23214,7 @@ var printerFields = [_objectSpread2(_objectSpread2({}, defaultAutoSelectProps),
   label: 'Bar Code Printer'
 })];
 
-var css_248z$a = ".utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--PrinterSettings {\r\n  margin: 0 9px !important;\r\n  padding-right: 0;\r\n  width: 100% !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-5 {\r\n  width: 20%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-2 {\r\n  width: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-1 {\r\n  width: 100%;\r\n  margin: 8px 0;\r\n}\r\n";
+var css_248z$a = ".utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--PrinterSettings {\r\n  padding-right: 0;\r\n  width: 100% !important;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-5 {\r\n  width: 20%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-2 {\r\n  width: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-1 {\r\n  width: 100%;\r\n  margin: 6px 0;\r\n}\r\n";
 styleInject(css_248z$a);
 
 // Properly populate printer options before feeding to autoselect
@@ -23186,7 +23350,7 @@ var getLanguages = function getLanguages() {
   }[selectedCountry];
 };
 
-var css_248z$9 = "/* Simple Grid */\r\n[class*='col-'] {\r\n  float: left;\r\n  min-height: 1px;\r\n  /* padding-right: 10px; */\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid {\r\n  width: 100%;\r\n  max-width: 1300px;\r\n  min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */\r\n  margin: 0 auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid:after {\r\n  content: '';\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid-pad {\r\n  padding-top: 20px;\r\n  padding-left: 20px; /* grid-space to left */\r\n  padding-right: 0; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-right {\r\n  float: right;\r\n}\r\n\r\n/* Content Columns */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1 {\r\n  width: 100%;\r\n  margin: 8px 0;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-2-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-8-12 {\r\n  width: 66.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-2,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-6-12 {\r\n  width: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-4-12 {\r\n  width: 33.33%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-4,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-12 {\r\n  width: 25%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-5 {\r\n  width: 20%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-6,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-2-12 {\r\n  width: 16.667%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-7 {\r\n  width: 14.28%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-2-7 {\r\n  width: 28.56%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-4 {\r\n  width: 75%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-7 {\r\n  width: 42.84%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-4-7 {\r\n  width: 57.12%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-8 {\r\n  width: 12.5%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-9 {\r\n  width: 11.1%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-10 {\r\n  width: 10%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-10 {\r\n  width: 30%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-11 {\r\n  width: 9.09%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-12 {\r\n  width: 8.33%;\r\n}\r\n\r\n/* Layout Columns */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-11-12 {\r\n  width: 91.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-10-12 {\r\n  width: 83.333%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-9-12 {\r\n  width: 75%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-5-12 {\r\n  width: 41.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-7-12 {\r\n  width: 58.33%;\r\n}\r\n\r\n/* Pushing blocks */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-2-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-8-12 {\r\n  margin-left: 66.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-2,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-6-12 {\r\n  margin-left: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-4-12 {\r\n  margin-left: 33.33%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-4,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-3-12 {\r\n  margin-left: 25%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-5 {\r\n  margin-left: 20%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-6,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-2-12 {\r\n  margin-left: 16.667%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-7 {\r\n  margin-left: 14.28%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-8 {\r\n  margin-left: 12.5%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-9 {\r\n  margin-left: 11.1%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-10 {\r\n  margin-left: 10%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-11 {\r\n  margin-left: 9.09%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-12 {\r\n  margin-left: 8.33%;\r\n}\r\n\r\n@media handheld, only screen and (max-width: 767px) {\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid {\r\n    width: 100%;\r\n    min-width: 0;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    padding-left: 20px; /* grid-space to left */\r\n    padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */\r\n  }\r\n\r\n  [class*='col-'] {\r\n    width: auto;\r\n    float: none;\r\n    margin: 0;\r\n    padding-left: 0;\r\n    /* padding-right: 10px; */\r\n  }\r\n\r\n  /* Mobile Layout */\r\n\r\n  [class*='mobile-col-'] {\r\n    float: left;\r\n    margin: 0 0 10px;\r\n    padding-left: 0;\r\n    padding-right: 10px; /* column-space */\r\n    padding-bottom: 0;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-1 {\r\n    width: 100%;\r\n    margin: 8px 0;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-2-3,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-8-12 {\r\n    width: 66.66%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-2,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-6-12 {\r\n    width: 50%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-3,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-4-12 {\r\n    width: 33.33%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-4,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-3-12 {\r\n    width: 25%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-5 {\r\n    width: 20%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-6,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-2-12 {\r\n    width: 16.667%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-7 {\r\n    width: 14.28%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-8 {\r\n    width: 12.5%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-9 {\r\n    width: 11.1%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-10 {\r\n    width: 10%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-11 {\r\n    width: 9.09%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-12 {\r\n    width: 8.33%;\r\n  }\r\n\r\n  /* Layout Columns */\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-11-12 {\r\n    width: 91.66%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-10-12 {\r\n    width: 83.333%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-9-12 {\r\n    width: 75%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-5-12 {\r\n    width: 41.66%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-7-12 {\r\n    width: 58.33%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--hide-on-mobile {\r\n    display: none !important;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n}\r\n\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--SettingsView {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 0 20px 20px;\r\n  margin-top: 65px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm {\r\n  width: 100%;\r\n  max-width: 1300px;\r\n  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; */\r\n  max-width: 800px;\r\n  margin: 0 auto;\r\n  height: 100%;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm form {\r\n  margin: 0 15px;\r\n  height: 70%;\r\n  overflow-y: auto;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader {\r\n  display: flex;\r\n  align-items: end;\r\n  margin: 16px 0 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader i{\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader p {\r\n  font-size: 18px;\r\n  font-weight: 400;\r\n  margin-left: 15px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--header {\r\n  width: 100%;\r\n  height: 40px;\r\n  padding: 0 15px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background: var(--primaryBlue);\r\n  background: var(--primaryBlue);\r\n  outline: 1px solid var(--primaryBlue);\r\n  outline: 1px solid var(--primaryBlue);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--title {\r\n  font-size: 15.9px;\r\n  font-weight: 500;\r\n  color: var(--white);\r\n  color: var(--white);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--sectionTitle {\r\n  font-weight: 500;\r\n  margin-top: 8px;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--body {\r\n  padding: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: center;\r\n  position: absolute;\r\n  bottom: 25px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span {\r\n  width: 80%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button span {\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button span i {\r\n  color: #fff;\r\n  font-size: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button span .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--saveTxt {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow {\r\n  padding-right: 0px;\r\n  width: 100%;\r\n  margin: 0 9px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--labeledGhost {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings {\r\n  padding-right: 0px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--title {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  font-weight: 500;\r\n  color: black;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--smallInfo {\r\n  margin-top: 2px;\r\n  margin-bottom: 12px;\r\n  font-size: 14px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--textField {\r\n  position: relative;\r\n  width: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--backdrop{\r\n  width: 100%;\r\n  height: 100%;\r\n  position: fixed;\r\n  z-index: 100;\r\n  left:0;\r\n  top:0;\r\n  background-color: rgba(0,0,0,0.1);\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--spinner{\r\n  position: fixed;\r\n  z-index: 500;\r\n  left: calc(50% - 30px);\r\n  top: calc(50% - 30px);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr{\r\n  padding: 10px;\r\n  margin-bottom: 5px;\r\n  width: 100%;\r\n  outline: none;\r\n  border: none;\r\n  border-bottom: 1px solid #ddd;\r\n  overflow: auto;\r\n}";
+var css_248z$9 = "/* Simple Grid */\r\n[class*='col-'] {\r\n  float: left;\r\n  min-height: 1px;\r\n  /* padding-right: 10px; */\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid {\r\n  width: 100%;\r\n  max-width: 1300px;\r\n  min-width: 748px; /* when using padded grid on ipad in portrait mode, width should be viewport-width - padding = (768 - 20) = 748. actually, it should be even smaller to allow for padding of grid containing element */\r\n  margin: 0 auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid:after {\r\n  content: '';\r\n  display: table;\r\n  clear: both;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid-pad {\r\n  padding-top: 20px;\r\n  padding-left: 20px; /* grid-space to left */\r\n  padding-right: 0; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-right {\r\n  float: right;\r\n}\r\n\r\n/* Content Columns */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1 {\r\n  width: 100%;\r\n  margin: 6px 0;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-2-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-8-12 {\r\n  width: 66.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-2,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-6-12 {\r\n  width: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-4-12 {\r\n  width: 33.33%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-4,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-12 {\r\n  width: 25%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-5 {\r\n  width: 20%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-6,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-2-12 {\r\n  width: 16.667%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-7 {\r\n  width: 14.28%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-2-7 {\r\n  width: 28.56%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-4 {\r\n  width: 75%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-7 {\r\n  width: 42.84%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-4-7 {\r\n  width: 57.12%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-8 {\r\n  width: 12.5%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-9 {\r\n  width: 11.1%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-10 {\r\n  width: 10%;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-3-10 {\r\n  width: 30%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-11 {\r\n  width: 9.09%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-12 {\r\n  width: 8.33%;\r\n}\r\n\r\n/* Layout Columns */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-11-12 {\r\n  width: 91.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-10-12 {\r\n  width: 83.333%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-9-12 {\r\n  width: 75%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-5-12 {\r\n  width: 41.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-7-12 {\r\n  width: 58.33%;\r\n}\r\n\r\n/* Pushing blocks */\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-2-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-8-12 {\r\n  margin-left: 66.66%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-2,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-6-12 {\r\n  margin-left: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-3,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-4-12 {\r\n  margin-left: 33.33%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-4,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-3-12 {\r\n  margin-left: 25%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-5 {\r\n  margin-left: 20%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-6,\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-2-12 {\r\n  margin-left: 16.667%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-7 {\r\n  margin-left: 14.28%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-8 {\r\n  margin-left: 12.5%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-9 {\r\n  margin-left: 11.1%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-10 {\r\n  margin-left: 10%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-11 {\r\n  margin-left: 9.09%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--push-1-12 {\r\n  margin-left: 8.33%;\r\n}\r\n\r\n@media handheld, only screen and (max-width: 767px) {\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--grid {\r\n    width: 100%;\r\n    min-width: 0;\r\n    margin-left: 0;\r\n    margin-right: 0;\r\n    padding-left: 20px; /* grid-space to left */\r\n    padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */\r\n  }\r\n\r\n  [class*='col-'] {\r\n    width: auto;\r\n    float: none;\r\n    margin: 0;\r\n    padding-left: 0;\r\n    /* padding-right: 10px; */\r\n  }\r\n\r\n  /* Mobile Layout */\r\n\r\n  [class*='mobile-col-'] {\r\n    float: left;\r\n    margin: 0 0 10px;\r\n    padding-left: 0;\r\n    padding-right: 10px; /* column-space */\r\n    padding-bottom: 0;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-1 {\r\n    width: 100%;\r\n    margin: 8px 0;\r\n  }\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-2-3,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-8-12 {\r\n    width: 66.66%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-2,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-6-12 {\r\n    width: 50%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-3,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-4-12 {\r\n    width: 33.33%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-4,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-3-12 {\r\n    width: 25%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-5 {\r\n    width: 20%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-6,\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-2-12 {\r\n    width: 16.667%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-7 {\r\n    width: 14.28%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-8 {\r\n    width: 12.5%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-9 {\r\n    width: 11.1%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-10 {\r\n    width: 10%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-11 {\r\n    width: 9.09%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-1-12 {\r\n    width: 8.33%;\r\n  }\r\n\r\n  /* Layout Columns */\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-11-12 {\r\n    width: 91.66%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-10-12 {\r\n    width: 83.333%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-9-12 {\r\n    width: 75%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-5-12 {\r\n    width: 41.66%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--mobile-col-7-12 {\r\n    width: 58.33%;\r\n  }\r\n\r\n  .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--hide-on-mobile {\r\n    display: none !important;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n}\r\n\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--SettingsView {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  padding: 0 20px 20px;\r\n  margin-top: 65px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px; */\r\n  max-width: 800px;\r\n  margin: 0 auto;\r\n  height: 100%;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm form {\r\n  margin: 0 15px;\r\n  flex: 1 1 0;\r\n  overflow-y: auto;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader {\r\n  display: flex;\r\n  align-items: end;\r\n  margin: 12px 0 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader i{\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader p {\r\n  font-size: 18px;\r\n  font-weight: 400;\r\n  margin-left: 15px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--header {\r\n  width: 100%;\r\n  height: 40px;\r\n  padding: 0 15px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background: var(--primaryBlue);\r\n  background: var(--primaryBlue);\r\n  outline: 1px solid var(--primaryBlue);\r\n  outline: 1px solid var(--primaryBlue);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--title {\r\n  font-size: 15.9px;\r\n  font-weight: 500;\r\n  color: var(--white);\r\n  color: var(--white);\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--sectionTitle {\r\n  font-weight: 500;\r\n  margin-top: 8px;\r\n  margin-bottom: 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--body {\r\n  padding: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: center;\r\n  margin: 20px 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span {\r\n  width: 80%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button span {\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button span i {\r\n  color: #fff;\r\n  font-size: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox span button span .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--saveTxt {\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow {\r\n  padding-right: 0px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--labeledGhost {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings {\r\n  padding-right: 0px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--title {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  font-weight: 500;\r\n  color: black;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--smallInfo {\r\n  margin-top: 2px;\r\n  margin-bottom: 12px;\r\n  font-size: 14px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow .utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--textField {\r\n  position: relative;\r\n  width: 50%;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--backdrop{\r\n  width: 100%;\r\n  height: 100%;\r\n  position: fixed;\r\n  z-index: 100;\r\n  left:0;\r\n  top:0;\r\n  background-color: rgba(0,0,0,0.1);\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--spinner{\r\n  position: absolute;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr{\r\n  padding: 0 !important;\r\n  width: 100%;\r\n  outline: none;\r\n  border: none;\r\n  border-bottom: 1px solid #EDEBE9;\r\n  overflow: auto;\r\n}";
 styleInject(css_248z$9);
 
 var getDescription$1 = function getDescription(languageOptions) {
@@ -23621,7 +23785,7 @@ var saveSettings$1 = function saveSettings(self) {
   return /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
       var _yard$yard_country_co, _yard$yard_country_co2;
-      var printers, dashboardSessionState, oldSettings, dashboardState, cleanedDashboardState, _self$state, selectedYard, selectedRole, selectedLanguage, selectedCurrency, roles, roleOptionFromState, roleName, _roleOptionFromState$, levelId, _roleOptionFromState$2, hierarchyId, yard, securityLevel, newSettings;
+      var printers, dashboardSessionState, oldSettings, dashboardState, cleanedDashboardState, _self$state, selectedYard, selectedRole, selectedLanguage, selectedCurrency, roles, roleOptionFromState, roleName, _roleOptionFromState$, levelId, _roleOptionFromState$2, hierarchyId, yard, securityLevel, userScopes, newSettings;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -23694,8 +23858,13 @@ var saveSettings$1 = function saveSettings(self) {
             storage$1.setLocalItem('dashboard', selectedCurrency || yard.yard_currency, 'selectedCurrency');
             securityLevel = pickUserSecurityLevel(getSelectedYard(selectedYard));
             storage$1.setSessionItem('securityLevel', Number(securityLevel));
-            // persist user preferences
             _context.next = 24;
+            return fetcher.getUserScopes();
+          case 24:
+            userScopes = _context.sent;
+            storage$1.setLocalItem('login', userScopes, 'userAppScopes');
+            // persist user preferences
+            _context.next = 28;
             return fetcher.setUserPreferences('oph', {
               selectedCurrency: selectedCurrency || yard.yard_currency,
               language: selectedLanguage || 'en',
@@ -23705,7 +23874,7 @@ var saveSettings$1 = function saveSettings(self) {
               yard: yard,
               securityLevel: securityLevel
             }, 'USA');
-          case 24:
+          case 28:
             self.setState({
               oldActivePrinters: printers
             });
@@ -23718,7 +23887,7 @@ var saveSettings$1 = function saveSettings(self) {
               activePrinters: self.activePrinters
             };
             self.props.onSave(oldSettings, newSettings);
-          case 27:
+          case 31:
           case "end":
             return _context.stop();
         }
@@ -23922,24 +24091,26 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
         value: this.state.selectedLanguage,
         handleChange: this.handleInputChange.selectedLanguage,
         selectedCountry: this.state.selectedCountry
+      }), /*#__PURE__*/React__default["default"].createElement(YardNumberContainer, {
+        history: this.yardsHistory,
+        selectedYard: this.state.selectedYardNumber,
+        handleChange: this.handleInputChange.selectedYardNumber,
+        selectedCountry: this.state.selectedCountry
       }), /*#__PURE__*/React__default["default"].createElement(RoleSelector$1, {
         roles: this.state.roles,
         value: this.state.selectedRole,
         handleChange: this.handleInputChange.selectedRole,
         selectedYard: this.state.selectedYardNumber,
         required: false
-      }), /*#__PURE__*/React__default["default"].createElement(YardNumberContainer, {
-        history: this.yardsHistory,
-        selectedYard: this.state.selectedYardNumber,
-        handleChange: this.handleInputChange.selectedYardNumber,
-        selectedCountry: this.state.selectedCountry
       })), /*#__PURE__*/React__default["default"].createElement(PrinterSettings, {
         activePrinters: this.activePrinters,
         setPrinterData: this.setPrinterData,
         selectedYard: this.state.selectedYardNumber,
         selectedPrinterData: this.selectedPrinterData,
         printersData: this.state.printersData
-      })), /*#__PURE__*/React__default["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("hr", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox",
         "data-e2e": "saveButton"
       }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Button, {
@@ -23952,12 +24123,10 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--saveTxt"
       }, "Save"))), this.state.showLoading && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--backdrop"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--spinner"
       }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
         size: "60px"
-      }))));
+      })));
     }
   }]);
   return SettingsView;
@@ -24272,7 +24441,7 @@ var saveSettings = function saveSettings(self) {
   return /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
       var _yard$yard_country_co, _storage$getLocalItem, _yard$yard_country_co2;
-      var dashboardSessionState, settingsLocalStorageState, oldSettings, printers, _self$state, selectedYard, _self$state$selectedH, selectedHierarchyOption, selectedRole, _self$state$roles, roles, roleOptionFromState, yardNumbers, yard, selectedHierarchy, getSelectedYard, pickUserSecurityLevel, securityLevel, newSettings;
+      var dashboardSessionState, settingsLocalStorageState, oldSettings, printers, _self$state, selectedYard, _self$state$selectedH, selectedHierarchyOption, selectedRole, _self$state$roles, roles, roleOptionFromState, yardNumbers, yard, selectedHierarchy, userScopes, getSelectedYard, pickUserSecurityLevel, securityLevel, newSettings;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -24339,6 +24508,11 @@ var saveSettings = function saveSettings(self) {
             storage$1.setLocalItem('settings', selectedHierarchyOption, 'selectedHierarchyOption');
             storage$1.setLocalItem('settings', selectedHierarchy, 'selectedHierarchy');
             storage$1.setLocalItem('lastSelectedYard', yard);
+            _context2.next = 23;
+            return fetcher.getUserScopes();
+          case 23:
+            userScopes = _context2.sent;
+            storage$1.setLocalItem('login', userScopes, 'userAppScopes');
             getSelectedYard = function getSelectedYard() {
               var yardList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
               return yardList.find(function (yard) {
@@ -24351,7 +24525,7 @@ var saveSettings = function saveSettings(self) {
             securityLevel = compose(pickUserSecurityLevel, getSelectedYard)((_storage$getLocalItem = storage$1.getLocalItem('login')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.yardList);
             storage$1.setSessionItem('securityLevel', securityLevel);
             // persist user preferences
-            _context2.next = 27;
+            _context2.next = 31;
             return fetcher.setUserPreferences('oph', {
               selectedCurrency: yard.yard_currency,
               language: 'en',
@@ -24363,7 +24537,7 @@ var saveSettings = function saveSettings(self) {
               yard: yard,
               securityLevel: securityLevel
             }, 'GBR');
-          case 27:
+          case 31:
             self.setState({
               oldActivePrinters: printers
             });
@@ -24377,7 +24551,7 @@ var saveSettings = function saveSettings(self) {
               activePrinters: printers
             };
             self.props.onSave(oldSettings, newSettings);
-          case 30:
+          case 34:
           case "end":
             return _context2.stop();
         }
@@ -24658,7 +24832,9 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
         selectedYard: this.state.selectedYardNumber,
         selectedPrinterData: this.selectedPrinterData,
         printersData: this.state.printersData
-      })), /*#__PURE__*/React__default["default"].createElement("div", {
+      })), /*#__PURE__*/React__default["default"].createElement("hr", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--buttonBox",
         "data-e2e": "saveButton"
       }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Button, {
@@ -24666,18 +24842,16 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
         type: "submit",
         onClick: this.saveSettings
       }, "Save")), this.state.showLoading && /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--backdrop"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--spinner"
       }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
         size: "60px"
-      }))));
+      })));
     }
   }]);
   return SettingsView;
 }(React__default["default"].Component);
 
-var css_248z$7 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 0px 5px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: end;\r\n  grid-gap: 20px;\r\n  gap: 20px\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  font-weight: 600;\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201F1E;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox *{\r\n  display: inline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a{\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  font-weight: 600;\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 6px;\r\n  gap: 6px;\r\n  font-size: 12px;\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i{\r\n  font-size: 16px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i{\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 10px 10px;\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer i{\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--navBtnContainer i{\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding: 0px 5px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}\r\n";
+var css_248z$7 = ".utilities_ops-announcements_Banner--appBarContentBox {\r\n  word-break: break-all;\r\n  white-space: pre-wrap;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContent {\r\n  padding: 10px 10px;\r\n  font-size: 13px;\r\n  width: 95%;\r\n  display: flex;\r\n  align-items: center;\r\n  grid-gap: 20px;\r\n  gap: 20px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar {\r\n  display: flex;\r\n  color: #6c7a89;\r\n  grid-gap: 8px;\r\n  gap: 8px;\r\n  width: 90%;\r\n  font-size: 12px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBar b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationInfoBox {\r\n  color: white;\r\n  width: 31px;\r\n  min-height: 31px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  overflow: hidden;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  color: #201F1E;\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox *{\r\n  display: inline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarContentBox a{\r\n  text-decoration: underline;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--tabNotificationBarContentBox {\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  overflow: hidden;\r\n  width: 95%;\r\n  /* font-weight: 600; */\r\n  /* autoprefixer: off */\r\n  -webkit-box-orient: vertical;\r\n  /* autoprefixer: on */\r\n  font-size: 12px;\r\n  padding: 5px 5px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox i{\r\n  font-size: 20px !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: center;\r\n  grid-gap: 10px;\r\n  gap: 10px;\r\n  font-size: 12px;\r\n  align-items: center;\r\n  padding: 0px 10px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationLeftBtn i{\r\n  position: relative;\r\n  right: -4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer .utilities_ops-announcements_Banner--notificationCountContainer {\r\n  width: 50px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer {\r\n  display: flex;\r\n  flex-direction: row;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 5px;\r\n  gap: 5px;\r\n  min-height: 40px;\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationInfoBox {\r\n  color: white;\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBarBtn {\r\n  width: 52px;\r\n  min-height: 52px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationBtnContainer i{\r\n  font-size: 22px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar {\r\n  flex-direction: column;\r\n  /* padding: 10px 10px; */\r\n  grid-gap: 0px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--notificationContainer.utilities_ops-announcements_Banner--tabNotificationBar i{\r\n  font-size: 16px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--arrowTipContainer {\r\n  width: 0px;\r\n  height: 0px;\r\n  border-left: 8px solid transparent;\r\n  border-right: 8px solid transparent;\r\n  border-bottom: 13px solid white;\r\n  position: absolute;\r\n  top: 51px;\r\n  right: 50px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper {\r\n  padding: 0px 5px;\r\n  font-size: 12px;\r\n  flex: 1 1 0%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  grid-gap: 4px;\r\n  gap: 4px;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--appBarContentWrapper b{\r\n  color: #171717;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl {\r\n  text-decoration: none !important;\r\n}\r\n\r\n.utilities_ops-announcements_Banner--feedUrl i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n  color: #1d5ab9;\r\n  left: 2px;\r\n  position: relative;\r\n  top: 2px;\r\n  margin-right: 3px;\r\n}\r\n";
 styleInject(css_248z$7);
 
 var _nodeResolve_empty = {};
@@ -31046,45 +31220,42 @@ var alertInfoColorMapping = {
   success: 'rgb(50 179 55)'
 };
 var alertToIconMapping = {
-  alert: 'ErrorBadge',
-  warning: 'Warning',
-  information: 'Info',
-  success: 'Accept'
+  alert: 'circle-exclamation',
+  warning: 'triangle-exclamation',
+  information: 'circle-info',
+  success: 'circle-check'
 };
 var Actions = function Actions(_ref) {
   var onLeftButtonClick = _ref.onLeftButtonClick,
     count = _ref.count,
     current = _ref.current,
-    onRightButtonClick = _ref.onRightButtonClick;
+    onRightButtonClick = _ref.onRightButtonClick,
+    isMobileView = _ref.isMobileView;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {}
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-announcements_Banner--navBtnContainer"
+    className: "utilities_ops-announcements_Banner--notificationBtnContainer",
+    style: {
+      gap: isMobileView ? '4px' : '10px'
+    }
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    onClick: onLeftButtonClick,
+    onClick: current > 1 ? onLeftButtonClick : null,
     className: "utilities_ops-announcements_Banner--notificationLeftBtn"
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
-    name: "arrow_back_ios",
-    variant: "material",
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+    disabled: current === 1,
+    name: isMobileView ? 'angle-left' : 'circle-chevron-left',
     style: {
-      fontSize: '16px',
       cursor: 'pointer'
     }
-  })), count > 1 && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("span", {
-    style: {
-      position: 'relative',
-      top: '1px'
-    }
-  }, "".concat(current, "/").concat(count))), /*#__PURE__*/React__default["default"].createElement("span", {
-    onClick: onRightButtonClick
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
-    name: "arrow_forward_ios",
-    variant: "material",
+  })), count > 1 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-announcements_Banner--notificationCountContainer"
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, "".concat(current, "/").concat(count))), /*#__PURE__*/React__default["default"].createElement("span", {
+    onClick: current < count ? onRightButtonClick : null
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+    disabled: current === count,
+    name: isMobileView ? 'angle-right' : 'circle-chevron-right',
     style: {
-      fontSize: '16px',
       cursor: 'pointer'
     }
-  }))));
+  })));
 };
 var Banner = function Banner(props) {
   var count = props.count,
@@ -31133,12 +31304,17 @@ var Banner = function Banner(props) {
       style: {
         backgroundColor: alertBackgroundColorMapping[categoryDescription.toLowerCase()]
       }
-    }, showNavButtons && /*#__PURE__*/React__default["default"].createElement(Actions, {
-      onLeftButtonClick: onLeftButtonClick,
-      count: count,
-      current: current,
-      onRightButtonClick: onRightButtonClick
-    }), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--notificationInfoBox",
+      style: {
+        backgroundColor: alertInfoColorMapping[categoryDescription.toLowerCase()]
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+      name: alertToIconMapping[categoryDescription.toLowerCase()],
+      style: {
+        fontSize: '19px'
+      }
+    }))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--notificationBarContent",
       style: expanded ? {
         flexDirection: 'column',
@@ -31147,20 +31323,12 @@ var Banner = function Banner(props) {
         flexDirection: 'row'
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "utilities_ops-announcements_Banner--notificationInfoBox"
-    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
-      name: alertToIconMapping[categoryDescription.toLowerCase()],
-      style: {
-        fontSize: '19px',
-        color: alertInfoColorMapping[categoryDescription.toLowerCase()]
-      }
-    })), /*#__PURE__*/React__default["default"].createElement("div", null, sourceApplication && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff)), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--notificationBarContentBox",
       ref: contentBarRef,
       style: _objectSpread2({}, expanded && {
         WebkitLineClamp: 'unset'
       })
-    }, /*#__PURE__*/React__default["default"].createElement("span", {
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, sourceApplication && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, " : "), /*#__PURE__*/React__default["default"].createElement("span", {
       onClick: function onClick() {
         return isContentOverFlow && setExpanded(!expanded);
       },
@@ -31178,25 +31346,35 @@ var Banner = function Banner(props) {
       notification: notification,
       saveActionComponentState: saveActionComponentState
     })), isContentOverFlow && /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        cursor: 'pointer'
-      },
+      className: "utilities_ops-announcements_Banner--notificationBarBtn",
       onClick: function onClick() {
         return setExpanded(!expanded);
       }
     }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
-      name: expanded ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down',
-      variant: "material"
-    })), (dismissibleFlag === true || dismissibleFlag === "true") && /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
-        cursor: 'pointer',
-        marginLeft: 'auto'
+        cursor: 'pointer'
       },
+      name: expanded ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down',
+      variant: "material"
+    })), showNavButtons && /*#__PURE__*/React__default["default"].createElement(Actions, {
+      onLeftButtonClick: onLeftButtonClick,
+      count: count,
+      current: current,
+      onRightButtonClick: onRightButtonClick
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--notificationBarBtn",
+      style: dismissibleFlag === true || dismissibleFlag === "true" ? {
+        borderLeft: '2px solid rgb(204, 204, 204)'
+      } : {}
+    }, (dismissibleFlag === true || dismissibleFlag === "true") && /*#__PURE__*/React__default["default"].createElement("div", {
       onClick: onDismiss
     }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
+      style: {
+        cursor: 'pointer'
+      },
       name: "close",
       variant: "material"
-    })));
+    }))));
   };
   var sideNotificationBar = function sideNotificationBar() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -31208,7 +31386,7 @@ var Banner = function Banner(props) {
       style: {
         marginTop: '3px'
       }
-    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
+    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
       name: alertToIconMapping[categoryDescription.toLowerCase()],
       style: {
         fontSize: '16px',
@@ -31260,54 +31438,46 @@ var Banner = function Banner(props) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         display: 'flex',
-        gap: '5px',
-        minHeight: '27px'
+        minHeight: '27px',
+        alignItems: 'center'
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "utilities_ops-announcements_Banner--tabNotificationInfoBox"
-    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
+      className: "utilities_ops-announcements_Banner--tabNotificationInfoBar"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "utilities_ops-announcements_Banner--tabNotificationInfoBox",
+      style: {
+        backgroundColor: alertInfoColorMapping[categoryDescription.toLowerCase()]
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
       name: alertToIconMapping[categoryDescription.toLowerCase()],
       style: {
-        fontSize: '16px',
-        color: alertInfoColorMapping[categoryDescription.toLowerCase()]
+        fontSize: '16px'
       }
-    })), /*#__PURE__*/React__default["default"].createElement("div", null, sourceApplication && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff)), /*#__PURE__*/React__default["default"].createElement("div", null, showNavButtons && /*#__PURE__*/React__default["default"].createElement(Actions, {
+    }))), /*#__PURE__*/React__default["default"].createElement("div", null, sourceApplication && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("b", null, sourceApplication), " -"), " ", timeDiff)), /*#__PURE__*/React__default["default"].createElement("div", null, showNavButtons && /*#__PURE__*/React__default["default"].createElement(Actions, {
       onLeftButtonClick: onLeftButtonClick,
       count: count,
       current: current,
-      onRightButtonClick: onRightButtonClick
+      onRightButtonClick: onRightButtonClick,
+      isMobileView: true
     })), isContentOverFlow && /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         cursor: 'pointer',
-        marginTop: '3px'
+        margin: '-2px 8px 0px 8px'
       },
       onClick: function onClick() {
         return setExpanded(!expanded);
       }
-    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
-      name: expanded ? 'keyboard_double_arrow_up' : 'keyboard_double_arrow_down',
-      variant: "material",
-      style: {
-        fontSize: '15px'
-      }
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        width: '3%'
-      }
-    }, dismissibleFlag && /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+      name: expanded ? 'angles-up' : 'angles-down'
+    })), dismissibleFlag && /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         cursor: 'pointer',
-        marginLeft: 'auto',
-        marginTop: '3px'
+        margin: '-2px 8px 0px 8px'
       },
       onClick: onDismiss
-    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
-      name: "close",
-      variant: "material",
-      style: {
-        fontSize: '15px'
-      }
-    })))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+      name: "xmark"
+    }))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "utilities_ops-announcements_Banner--tabNotificationBarContentBox",
       ref: contentBarRef,
       style: _objectSpread2({}, expanded && {
@@ -31400,6 +31570,18 @@ var Notifications = function Notifications(_ref) {
   }) : null);
 };
 
+var capitalizeAndReplaceUnderscores = function capitalizeAndReplaceUnderscores(role) {
+  return role.split('_').filter(Boolean).map(function (word) {
+    return word[0].toUpperCase() + word.substr(1);
+  }).join(' ');
+};
+var formatUK = function formatUK(role) {
+  return role.startsWith('uk') ? "UK".concat(role.substr(2)) : role;
+};
+var formatRole = function formatRole(role) {
+  return capitalizeAndReplaceUnderscores(formatUK(role));
+};
+
 var _styleModuleImportMap$2 = {
   "./AppBar.css": {
     "root": "utilities_ops-app-frame_AppBarComponent_AppBar--root",
@@ -31523,20 +31705,21 @@ var overflowIconStyles = {
   color: 'white'
 };
 var generateAppBarElements = function generateAppBarElements(props, showCallout) {
-  props.countryCode;
-    props.role;
-    var yardNumber = props.yardNumber;
+  var _window$toolkitEnv2;
+  var countryCode = props.countryCode,
+    role = props.role,
+    yardNumber = props.yardNumber;
     props.phoneNumber;
     props.phoneStatusObject;
     props.togglePhoneAvailability;
-    var handleHelpClick = props.handleHelpClick;
-    props.type;
-    var config = props.config,
+    var handleHelpClick = props.handleHelpClick,
+    type = props.type,
+    config = props.config,
     _props$navigateTo = props.navigateTo,
-    navigateTo = _props$navigateTo === void 0 ? function (url) {} : _props$navigateTo,
-    isMihelpEnabled = props.isMihelpEnabled,
-    isIdeaNoteEnabled = props.isIdeaNoteEnabled,
-    _props$notifications = props.notifications,
+    navigateTo = _props$navigateTo === void 0 ? function (url) {} : _props$navigateTo;
+    props.isMihelpEnabled;
+    props.isIdeaNoteEnabled;
+    var _props$notifications = props.notifications,
     notifications = _props$notifications === void 0 ? [] : _props$notifications;
     props.width;
     var setNotificationsVisible = props.setNotificationsVisible,
@@ -31557,7 +31740,9 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     mobileMenuVisible = props.mobileMenuVisible;
   var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
   var enableNewToolkitFeatures = coreAppConfig.enableNewToolkitFeatures,
-    showSettingsMenuByTileConfig = coreAppConfig.showSettingsMenuByTileConfig;
+    showSettingsMenuByTileConfig = coreAppConfig.showSettingsMenuByTileConfig,
+    enableIdeaNote = coreAppConfig.enableIdeaNote,
+    enableMiHelp = coreAppConfig.enableMiHelp;
   var showSettingsInAppbar = false;
   if (isCoreRoute) {
     showSettingsInAppbar = enableNewToolkitFeatures;
@@ -31605,6 +31790,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     };
     return languageMapper[language];
   };
+  var stack = (_window$toolkitEnv2 = window.toolkitEnv) !== null && _window$toolkitEnv2 !== void 0 && _window$toolkitEnv2.STACK ? window.toolkitEnv.STACK : process.env.STACK;
   var items = [{
     key: 'search',
     name: 'Search',
@@ -31645,7 +31831,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
         text: "Feedback"
       }));
     },
-    renderIf: !isMihelpEnabled,
+    renderIf: !enableMiHelp,
     onClick: function onClick() {
       return props.toggleFeedbackDialog(true);
     },
@@ -31674,7 +31860,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
         text: "MiHelp"
       }));
     },
-    renderIf: isMihelpEnabled,
+    renderIf: enableMiHelp,
     render: function render() {
       return /*#__PURE__*/React__default["default"].createElement("span", {
         className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items"
@@ -31705,7 +31891,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
         text: "Innov8Hub"
       }));
     },
-    renderIf: isIdeaNoteEnabled,
+    renderIf: enableIdeaNote,
     render: function render() {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon",
@@ -31751,7 +31937,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
   }, {
     key: 'language',
     name: 'Language',
-    renderIf: process.env.STACK === 'c',
+    renderIf: stack === 'c',
     render: function render() {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items utilities_ops-app-frame_AppBarComponent_AppBar--language",
@@ -31761,7 +31947,38 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
       }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
         name: "earth-americas",
         variant: "regular"
-      }), " ", /*#__PURE__*/React__default["default"].createElement("span", null, getLanguage(storage$1.activeLanguage)));
+      }), ' ', /*#__PURE__*/React__default["default"].createElement("span", null, getLanguage(storage$1.activeLanguage)));
+    }
+  }, {
+    key: 'roleAndFlag',
+    name: formatRole(role),
+    onRender: function onRender(_, dismissMenu) {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+        onClick: function onClick() {
+          navigateTo('/settings');
+          dismissMenu();
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(OverFlowIcon, {
+        name: "supervised_user_circle"
+      }), /*#__PURE__*/React__default["default"].createElement(OverFlowText, {
+        text: formatRole(role)
+      })));
+    },
+    renderIf: config.includes('role') || config.includes('flag'),
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        id: "roleItem",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--item utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag",
+        onClick: showSettingsInAppbar ? function () {
+          return handleIconClick(ICONS.SETTINGS);
+        } : navigateTo('/settings')
+      }, config.includes('flag') ? /*#__PURE__*/React__default["default"].createElement(Flag$1, {
+        countryCode: countryCode,
+        type: type
+      }) : null, config.includes('role') ? /*#__PURE__*/React__default["default"].createElement("div", {
+        "data-testid": "role"
+      }, formatRole(role)) : null);
     }
   }, {
     key: 'facility',
@@ -31923,7 +32140,7 @@ var ICONS = {
   MOBILE_MENU: 'MOBILE_MENU'
 };
 var AppBar$1 = function AppBar(props) {
-  var _window$toolkitEnv3;
+  var _window$toolkitEnv4;
   var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
   var enableNewToolkitFeatures = coreAppConfig.enableNewToolkitFeatures,
     ideaNoteUri = coreAppConfig.ideaNoteUri;
@@ -31992,7 +32209,6 @@ var AppBar$1 = function AppBar(props) {
     setCount = _useState22[1];
   var mihelpRef = React.useRef(null);
   var mihelpIconRef = React.useRef(null);
-  console.log("***mobileMenuVisible=", mobileMenuVisible);
   React.useLayoutEffect(function () {
     setCount(count + 1);
   }, [width]);
@@ -32032,7 +32248,7 @@ var AppBar$1 = function AppBar(props) {
             case 7:
               _context.prev = 7;
               _context.t0 = _context["catch"](0);
-              setIdeaNoteToken("TOKEN_ERROR");
+              setIdeaNoteToken('TOKEN_ERROR');
               console.log(_context.t0);
             case 11:
             case "end":
@@ -32124,10 +32340,10 @@ var AppBar$1 = function AppBar(props) {
     onSettingsSaved(oldSettings, newSettings);
   };
   var getTile = function getTile() {
-    var _window$toolkitEnv2;
+    var _window$toolkitEnv3;
     var appTiles = coreAppConfig.tiles || [];
     var appTile;
-    var appName = (_window$toolkitEnv2 = window.toolkitEnv) !== null && _window$toolkitEnv2 !== void 0 && _window$toolkitEnv2.APP_NAME ? window.toolkitEnv.APP_NAME : process.env.APP_NAME;
+    var appName = (_window$toolkitEnv3 = window.toolkitEnv) !== null && _window$toolkitEnv3 !== void 0 && _window$toolkitEnv3.APP_NAME ? window.toolkitEnv.APP_NAME : process.env.APP_NAME;
     var matchingTiles = appTiles.filter(function (tile) {
       if (tile.appName) {
         return tile.appName === appName;
@@ -32182,17 +32398,17 @@ var AppBar$1 = function AppBar(props) {
   //   )
 
   var closeSidebar = function closeSidebar(e) {
-    if (e.target.className.includes("sideBarWrapper")) {
+    if (e.target.className.includes('sideBarWrapper')) {
       setNotificationsVisible(false);
     }
-    if (e.target.className.includes("settingsSidebarWrapper")) {
+    if (e.target.className.includes('settingsSidebarWrapper')) {
       setSettingsVisible(false);
     }
-    if (e.target.className.includes("mobileMenuSidebarWrapper")) {
+    if (e.target.className.includes('mobileMenuSidebarWrapper')) {
       setMobileMenuVisible(false);
     }
   };
-  (_window$toolkitEnv3 = window.toolkitEnv) !== null && _window$toolkitEnv3 !== void 0 && _window$toolkitEnv3.STACK ? window.toolkitEnv.STACK : process.env.STACK;
+  var stack = (_window$toolkitEnv4 = window.toolkitEnv) !== null && _window$toolkitEnv4 !== void 0 && _window$toolkitEnv4.STACK ? window.toolkitEnv.STACK : process.env.STACK;
   var mobileMenuItems = [{
     name: 'Help',
     icon: 'question-circle',
@@ -32221,7 +32437,7 @@ var AppBar$1 = function AppBar(props) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--leftItems"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName(enableNewToolkitFeatures ? "copartLogoNew" : "copartLogo", _styleModuleImportMap$2, {
+    className: _getClassName(enableNewToolkitFeatures ? 'copartLogoNew' : 'copartLogo', _styleModuleImportMap$2, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement(CopartLogo, null), !enableNewToolkitFeatures && !isAuthRoute ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -32293,13 +32509,13 @@ var AppBar$1 = function AppBar(props) {
       maxWidth: '400px',
       backgroundColor: 'white'
     },
-    src: ideaNoteToken === "TOKEN_ERROR" ? ideaNoteUri : "".concat(ideaNoteUri, "&auth.jwt=").concat(ideaNoteToken)
+    src: ideaNoteToken === 'TOKEN_ERROR' ? ideaNoteUri : "".concat(ideaNoteUri, "&auth.jwt=").concat(ideaNoteToken)
   }) : /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       bottom: '0',
       right: '0',
-      height: '100vh',
+      height: '100%',
       width: '400px',
       backgroundColor: 'white'
     }
@@ -32337,11 +32553,11 @@ var AppBar$1 = function AppBar(props) {
     onClick: closeSidebar
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar"
-  }, !process.env.STACK || process.env.STACK === 'c' ? /*#__PURE__*/React__default["default"].createElement(SettingsView$1, {
+  }, !stack || stack === 'c' ? /*#__PURE__*/React__default["default"].createElement(SettingsView$1, {
     onSave: onSave,
     onLogoutItemClicked: onLogoutItemClicked,
     width: width
-  }) : null, process.env.STACK === 'uk' ? /*#__PURE__*/React__default["default"].createElement(SettingsView, {
+  }) : null, stack === 'uk' ? /*#__PURE__*/React__default["default"].createElement(SettingsView, {
     onSave: onSave,
     onLogoutItemClicked: onLogoutItemClicked,
     width: width
@@ -33914,7 +34130,7 @@ const author = "Brian McKelvey <theturtle32@gmail.com> (https://github.com/thetu
 const contributors = [
   "Iñaki Baz Castillo <ibc@aliax.net> (http://dev.sipdoc.net)"
 ];
-const version$6 = "1.0.34";
+const version$6 = "1.0.35";
 const repository = {
   type: "git",
   url: "https://github.com/theturtle32/WebSocket-Node.git"
@@ -33926,7 +34142,7 @@ const engines = {
 const dependencies = {
   bufferutil: "^4.0.1",
   debug: "^2.2.0",
-  "es5-ext": "^0.10.50",
+  "es5-ext": "^0.10.63",
   "typedarray-to-buffer": "^3.1.5",
   "utf-8-validate": "^5.0.2",
   yaeti: "^0.0.6"
@@ -34269,13 +34485,22 @@ var emailAddressAllowed = function emailAddressAllowed(emailAddress, tile) {
 
 // permissionIds are for selected role only
 var appFunctionIdAllowed = function appFunctionIdAllowed() {
+  var _window$toolkitEnv;
   var coreAppPermissions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var permissionIds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var tile = arguments.length > 3 ? arguments[3] : undefined;
+  var appScopes = arguments.length > 3 ? arguments[3] : undefined;
+  var tile = arguments.length > 4 ? arguments[4] : undefined;
+  var stack = (_window$toolkitEnv = window.toolkitEnv) !== null && _window$toolkitEnv !== void 0 && _window$toolkitEnv.STACK ? window.toolkitEnv.STACK : process.env.STACK;
+  if (tile.useAppScopes) {
+    var userAppScopes = Array.isArray(appScopes) ? appScopes : [];
+    return tile.appAuthName && userAppScopes.some(function (appScope) {
+      return appScope.appName === tile.appAuthName;
+    });
+  }
   var id = tile.appFunctionId;
   if (!id) {
     return true; // not defined in config so just allow the tile to be viewed for now
-  } else if (process.env.STACK === 'g') {
+  } else if (stack === 'g') {
     return includes$1(id, permissionIds);
   }
   // Check appfunction in opsportal-core permissions
@@ -34305,12 +34530,13 @@ var getUserData = function getUserData() {
     permissionIds: storage$1.permissionIds,
     allPermissionIds: storage$1.allPermissionIds,
     hasCasAccess: storage$1.hasCasAccess,
-    coreAppPermissions: storage$1.coreAppPermissions
+    coreAppPermissions: storage$1.coreAppPermissions,
+    appScopes: storage$1.userAppScopes
   };
 };
 var userHasAccess = function userHasAccess(tile) {
   var user = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getUserData();
-  return allAreTruthy([stackIsAllowed(tile.stack), yardNumberAllowed(user.activeYardNumber, tile), securityLevelAllowed(user.securityLevel, tile), emailAddressAllowed(user.emailAddress, tile), appFunctionIdAllowed(user.coreAppPermissions, user.allPermissionIds, user.permissionIds, tile), casAccessAllowed(user.hasCasAccess, tile.requireCasAccess)]);
+  return allAreTruthy([stackIsAllowed(tile.stack), yardNumberAllowed(user.activeYardNumber, tile), securityLevelAllowed(user.securityLevel, tile), emailAddressAllowed(user.emailAddress, tile), appFunctionIdAllowed(user.coreAppPermissions, user.allPermissionIds, user.permissionIds, user.appScopes, tile), casAccessAllowed(user.hasCasAccess, tile.requireCasAccess)]);
 };
 
 var accessHelpers = /*#__PURE__*/Object.freeze({
@@ -34397,7 +34623,7 @@ var AppBar = function AppBar(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     showMihelpTooltip = _useState8[0],
     setShowMihelpTooltip = _useState8[1];
-  var tileData = findAppData(coreAppConfig.tiles || []) || {};
+  var tileData = findAppData(coreAppConfig.tiles, coreAppConfig.tileOverrides) || {};
   var mihelpAppPath = isCoreRoute && !window.location.pathname.includes('embedded') ? null : tileData.mihelpAppPath;
   var isMihelpEnabled;
   if (isCoreRoute && !window.location.pathname.includes('embedded')) {
@@ -34562,7 +34788,7 @@ var AppBar = function AppBar(_ref) {
   var handleHelpClick = function handleHelpClick() {
     var country = storage$1.getSessionItem('dashboard', 'selectedCountryA3code');
     var uri = mihelpAppPath ? "".concat(coreAppConfig.mihelpUri, "/applications/").concat(mihelpAppPath, "?re=").concat(country.toLowerCase()) : "".concat(coreAppConfig.mihelpUri, "?re=").concat(country.toLowerCase());
-    window.open(uri, "_blank");
+    window.open(uri, '_blank');
   };
   var feedbackConfig = function feedbackConfig() {
     var _storage$coreConfig;
@@ -34642,7 +34868,7 @@ var AppBar = function AppBar(_ref) {
     }
     var check = filterNotifications(newNotifications);
     var newNotification = _objectSpread2({}, newNotifications[0]);
-    var startTime = newNotification.timeZoneType === "RPTZ" ? newNotification.startsAt : moment.utc(newNotification.startsAt).local().format("YYYY-MM-DD HH:mm:ss");
+    var startTime = newNotification.timeZoneType === 'RPTZ' ? newNotification.startsAt : moment.utc(newNotification.startsAt).local().format('YYYY-MM-DD HH:mm:ss');
     // const endTime = newNotification.timeZoneType === "RPTZ" && newNotification.endDateTimeZone !=='UTC' ? newNotification.endsAt : moment.utc(newNotification.endsAt).local().format("YYYY-MM-DD HH:mm:ss")
     var currentDate = new Date();
     if (!check.length) {
@@ -34665,7 +34891,7 @@ var AppBar = function AppBar(_ref) {
       filteredOutNotifications.forEach(function (notification) {
         var _notification$newsTar;
         if (notification !== null && notification !== void 0 && (_notification$newsTar = notification.newsTarget) !== null && _notification$newsTar !== void 0 && _notification$newsTar.audience_value) {
-          var startTime = moment.utc(notification.startsAt).local().format("YYYY-MM-DD HH:mm:ss");
+          var startTime = moment.utc(notification.startsAt).local().format('YYYY-MM-DD HH:mm:ss');
           var currentDate = new Date();
           if (new Date(startTime) > currentDate) {
             setListOfAllFirebaseNotifications(function (notifications) {
@@ -34776,7 +35002,7 @@ var AppBar = function AppBar(_ref) {
       if (history.location.pathname !== '/logout' && history.location.pathname !== '/login' && localStorage.getItem('login') && tileConfigAccess) {
         if (notificationsSource.includes('Nchan')) {
           fetchG2Notifications(updateNotifications, updateAllNotificationsList);
-          if (!(window.navigator.userAgent.includes("Chrome") && window.location.href.includes("localhost"))) {
+          if (!(window.navigator.userAgent.includes('Chrome') && window.location.href.includes('localhost'))) {
             var client = startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket);
             var pingIntervalInSec = coreAppConfig.nchanPingIntervalInSec || 30;
             setPingInterval(setInterval(function () {
@@ -34832,7 +35058,12 @@ var AppBar = function AppBar(_ref) {
       phoneStatus: '',
       phoneStatusProcessing: false
     } : _storage$chromePlugin;
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(AppBar$1, {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Notifications, {
+    notifications: notifications || [],
+    onDismiss: dismissNotification,
+    ActionComponent: ActionComponent,
+    saveActionComponentState: saveActionComponentState
+  }), /*#__PURE__*/React__default["default"].createElement(AppBar$1, {
     moduleName: "OPS PORTAL",
     isLoggedOn: storage$1.isAuthenticated,
     config: APP_BAR_CONFIGS[STACK],
@@ -34871,11 +35102,6 @@ var AppBar = function AppBar(_ref) {
     showMihelpDot: showMihelpDot,
     setShowMihelpTooltip: setShowMihelpTooltip,
     showMihelpTooltip: showMihelpTooltip
-  }), /*#__PURE__*/React__default["default"].createElement(Notifications, {
-    notifications: notifications || [],
-    onDismiss: dismissNotification,
-    ActionComponent: ActionComponent,
-    saveActionComponentState: saveActionComponentState
   }), latestRelease && /*#__PURE__*/React__default["default"].createElement(LatestReleaseDialog, {
     release: latestRelease,
     handleClose: handleReleaseClose,
@@ -34928,8 +35154,8 @@ var AuthGuard = /*#__PURE__*/function (_React$PureComponent) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _window$toolkitEnv;
-        var disableRestrictions, appTile, _window$toolkitEnv2, appAuthName, tileConfigAccess;
+        var _window$toolkitEnv, _window$toolkitEnv3;
+        var disableRestrictions, appTile, _window$toolkitEnv2, appAuthName, stack, tileConfigAccess;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -34987,20 +35213,26 @@ var AuthGuard = /*#__PURE__*/function (_React$PureComponent) {
             case 16:
               return _context.abrupt("return", this.allowAccess(PATH_NOT_FOUND));
             case 17:
-              if (!(process.env.STACK !== 'g')) {
-                _context.next = 23;
+              // Fetch permissions for opsportal-core and the opsportal application
+              // The app functions required for application visibility(when applicable)
+              // will be part of opsportal-core permissions
+              // Permissions for the opsportal-core and the opsportal application will be available in the
+              // local storage
+              stack = (_window$toolkitEnv3 = window.toolkitEnv) !== null && _window$toolkitEnv3 !== void 0 && _window$toolkitEnv3.STACK ? window.toolkitEnv.STACK : process.env.STACK;
+              if (!(stack !== 'g')) {
+                _context.next = 24;
                 break;
               }
-              _context.next = 20;
+              _context.next = 21;
               return fetcher.getCoreAppPermissions();
-            case 20:
+            case 21:
               if (!appTile.appAuthName) {
-                _context.next = 23;
+                _context.next = 24;
                 break;
               }
-              _context.next = 23;
-              return fetcher.getPermissions(appTile.appAuthName);
-            case 23:
+              _context.next = 24;
+              return fetcher.getPermissions(appTile.appAuthName, appTile.useAppScopes);
+            case 24:
               // If there are rules, evaluate and act accordingly.
               tileConfigAccess = userHasAccess(appTile);
               if (tileConfigAccess) {
@@ -35008,7 +35240,7 @@ var AuthGuard = /*#__PURE__*/function (_React$PureComponent) {
               } else {
                 this.denyAccess(NO_TILE_PERMISSION);
               }
-            case 25:
+            case 26:
             case "end":
               return _context.stop();
           }
@@ -45469,7 +45701,7 @@ var formatNumber = function formatNumber(number) {
   return sign * Math.abs(number) + unitlist[unit];
 };
 
-var css_248z$2 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: absolute;\r\n  background: #3A4454;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  height: 100%;\r\n  color: #ffffff;\r\n  font-size: 14px;\r\n  z-index: 101;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts {\r\n  min-width: 100px;\r\n  max-width: 100px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\r\n  max-width: 500px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \r\n  display: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  display: flex;\r\n  width: 100%;\r\n  padding: 6px 12px 6px 12px;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled {\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\r\n  color: #323130;\r\n  background-color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\r\n  background-color: #73A6FF;\r\n  transition: background-color 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\r\n  flex: 1;\r\n  margin: 0 10px 0;\r\n  text-align: right;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  font-size: 14px;\r\n  /* width: 20px; */\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 0px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  margin-top: 2px;\r\n  font-weight: 100;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 2px 10px 0 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 0 5px 0 0;\r\n  font-weight: 600;\r\n  margin-left: 0px;\r\n  cursor: auto;\r\n  cursor: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  margin: 0;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding-left: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\r\n  display: flex;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor {\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 95%;\r\n  left: -13px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 13px;\r\n  margin-left: 1px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 100%;\r\n  margin-left: 1px;\r\n}";
+var css_248z$2 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: absolute;\r\n  background: #3A4454;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  height: 100%;\r\n  color: #ffffff;\r\n  font-size: 14px;\r\n  z-index: 101;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts {\r\n  min-width: 100px;\r\n  max-width: 100px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\r\n  max-width: 500px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton{\r\n  min-width: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \r\n  display: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  display: flex;\r\n  width: 100%;\r\n  padding: 6px 12px 6px 12px;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled {\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\r\n  color: #323130;\r\n  background-color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable:not(:hover) .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: auto;\r\n  text-align: auto;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\r\n  background-color: #73A6FF;\r\n  transition: background-color 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\r\n  margin: 0 10px 0 auto;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  font-size: 14px;\r\n  /* width: 20px; */\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 0px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  margin-top: 2px;\r\n  font-weight: 100;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 2px 10px 0 10px;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 0 5px 0 0;\r\n  font-weight: 600;\r\n  margin-left: 0px;\r\n  cursor: auto;\r\n  cursor: initial;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  margin: 0;\r\n  transition-delay: 0.25s;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding-left: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\r\n  display: flex;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor {\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 95%;\r\n  left: -13px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 13px;\r\n  margin-left: 1px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 100%;\r\n  margin-left: 1px;\r\n  transition-delay: 0.25s;\r\n}";
 styleInject(css_248z$2);
 
 var _styleModuleImportMap$1 = {
@@ -45482,6 +45714,7 @@ var _styleModuleImportMap$1 = {
     "NavItem": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem",
     "disabled": "utilities_ops-app-frame_NavigationBar_NavigationBar--disabled",
     "NavItemSelected": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected",
+    "countsAvailable": "utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable",
     "expandedMenu": "utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu",
     "selected": "utilities_ops-app-frame_NavigationBar_NavigationBar--selected",
     "NavItemCount": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount",
@@ -45545,7 +45778,7 @@ var validateConfig = function validateConfig(navItems) {
     if (!configItem.isLandingPage && mandatoryKeys.every(function (key) {
       return configItem.hasOwnProperty(key);
     }) === false) {
-      console.log("please check and update the navigation config");
+      console.log('please check and update the navigation config');
       return false;
     }
     if (configItem.subMenuItems) {
@@ -45578,7 +45811,8 @@ var NavigationBar = function NavigationBar(_ref2) {
     getCounts = _ref2.getCounts,
     activeSubmenu = _ref2.activeSubmenu,
     setActiveSubmenu = _ref2.setActiveSubmenu,
-    setShowNavigationCounts = _ref2.setShowNavigationCounts;
+    setShowNavigationCounts = _ref2.setShowNavigationCounts,
+    countsRef = _ref2.countsRef;
   // const withCounts = getCounts && typeof getCounts === 'function'
   var navigateFunction = navigateTo || (history === null || history === void 0 ? void 0 : history.push) || defaultRedirect;
   var _useState = React.useState(null),
@@ -45609,7 +45843,7 @@ var NavigationBar = function NavigationBar(_ref2) {
     if (Array.isArray(navItems)) {
       var isValid = validateConfig(navItems);
       if (isValid) {
-        var updatedNavItems = updateRoutes(navItems, "");
+        var updatedNavItems = updateRoutes(navItems, '');
         var depth = getDepth(navItems);
         var _getDefaultSelection = getDefaultSelection(updatedNavItems),
           selectedItem = _getDefaultSelection.selectedItem,
@@ -45636,7 +45870,7 @@ var NavigationBar = function NavigationBar(_ref2) {
     onMouseLeave: function onMouseLeave() {
       return setHover(false);
     },
-    className: _getClassName("NavBarContainer ".concat(activeSubmenu && withCounts ? 'withCounts' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavBarContainer ".concat(activeSubmenu && withCounts ? 'withCounts' : '', " ").concat(getCounts && typeof getCounts === 'function' ? 'countsAvailable' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, isConfigValid ? /*#__PURE__*/React__default["default"].createElement(NavigationMenu, {
@@ -45650,7 +45884,8 @@ var NavigationBar = function NavigationBar(_ref2) {
     setSelected: setSelected,
     getCounts: getCounts,
     setWithCounts: setWithCounts,
-    withCounts: withCounts
+    withCounts: withCounts,
+    countsRef: countsRef
   }) : null, isConfigValid === false ? /*#__PURE__*/React__default["default"].createElement("div", null, "Please check your navigation config") : null);
 };
 var NavigationMenu = function NavigationMenu(_ref3) {
@@ -45664,24 +45899,25 @@ var NavigationMenu = function NavigationMenu(_ref3) {
     setSelected = _ref3.setSelected,
     getCounts = _ref3.getCounts,
     setWithCounts = _ref3.setWithCounts,
-    withCounts = _ref3.withCounts;
+    withCounts = _ref3.withCounts,
+    countsRef = _ref3.countsRef;
   var redirectUrl = window.location.pathname;
   React.useEffect(function () {
-    if (redirectUrl != "/") {
-      var splitUrl = redirectUrl.split("/");
+    if (redirectUrl != '/') {
+      var splitUrl = redirectUrl.split('/');
       if (!process.env.IS_CORE_APP) {
         splitUrl.shift();
       }
       // if (splitUrl.length - 1 === configDepth) {
       if (splitUrl.length - 1) {
         if (configDepth === 3) {
-          setActiveSubmenu("/" + splitUrl[1] + "/" + splitUrl[2]);
-          setSelected("/" + splitUrl[1] + "/" + splitUrl[2] + "/" + splitUrl[3]);
+          setActiveSubmenu('/' + splitUrl[1] + '/' + splitUrl[2]);
+          setSelected('/' + splitUrl[1] + '/' + splitUrl[2] + '/' + splitUrl[3]);
         } else if (configDepth === 2) {
-          setActiveSubmenu("/" + splitUrl[1]);
-          setSelected("/" + splitUrl[1] + "/" + splitUrl[2]);
+          setActiveSubmenu('/' + splitUrl[1]);
+          setSelected('/' + splitUrl[1] + '/' + splitUrl[2]);
         } else {
-          setSelected("/" + splitUrl[1]);
+          setSelected('/' + splitUrl[1]);
         }
       } else {
         setActiveSubmenu(null);
@@ -45693,7 +45929,9 @@ var NavigationMenu = function NavigationMenu(_ref3) {
     className: _getClassName("NavMenu", _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
-  }, navItems.map(function (item) {
+  }, navItems.filter(function (item) {
+    return typeof item.hidden === 'function' ? !item.hidden() : !item.hidden;
+  }).map(function (item) {
     var NavComponent = configDepth === 3 && !item.isLandingPage ? NavigationMenuLevel1 : NavigationMenuLevel2;
     return /*#__PURE__*/React__default["default"].createElement(NavComponent, {
       key: item.name,
@@ -45707,7 +45945,8 @@ var NavigationMenu = function NavigationMenu(_ref3) {
       redirectUrl: redirectUrl,
       getCounts: getCounts,
       setWithCounts: setWithCounts,
-      withCounts: withCounts
+      withCounts: withCounts,
+      countsRef: countsRef
     });
   }));
 };
@@ -45722,7 +45961,8 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
     setSelected = _ref4.setSelected,
     getCounts = _ref4.getCounts,
     setWithCounts = _ref4.setWithCounts,
-    withCounts = _ref4.withCounts;
+    withCounts = _ref4.withCounts,
+    countsRef = _ref4.countsRef;
   var hasSubMenuItems = navItem.subMenuItems && navItem.subMenuItems.length > 0;
   var shortName = navItem.shortName ? navItem.shortName.toUpperCase() : dotIcon;
   var nameText = isHover ? (_navItem$name = navItem.name) === null || _navItem$name === void 0 ? void 0 : _navItem$name.toUpperCase() : shortName;
@@ -45736,9 +45976,11 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
     icon: navItem.icon
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem"
-  }, nameText), navItem.hasOwnProperty("count") && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, nameText), navItem.hasOwnProperty('count') && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount"
-  }, navItem.count)), /*#__PURE__*/React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.map(function (subItem) {
+  }, navItem.count)), /*#__PURE__*/React__default["default"].createElement("div", null, hasSubMenuItems ? navItem.subMenuItems.filter(function (item) {
+    return typeof item.hidden === 'function' ? !item.hidden() : !item.hidden;
+  }).map(function (subItem) {
     return /*#__PURE__*/React__default["default"].createElement(NavigationMenuLevel2, {
       key: subItem.name,
       isHover: isHover,
@@ -45750,7 +45992,8 @@ var NavigationMenuLevel1 = function NavigationMenuLevel1(_ref4) {
       navigateFunction: navigateFunction,
       getCounts: getCounts,
       setWithCounts: setWithCounts,
-      withCounts: withCounts
+      withCounts: withCounts,
+      countsRef: countsRef
     });
   }) : null));
 };
@@ -45764,7 +46007,8 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
     navigateFunction = _ref5.navigateFunction,
     getCounts = _ref5.getCounts,
     setWithCounts = _ref5.setWithCounts,
-    withCounts = _ref5.withCounts;
+    withCounts = _ref5.withCounts,
+    countsRef = _ref5.countsRef;
   var isMenuExpanded = activeSubmenu === navItem.fullRoute;
   var showCounts = isMenuExpanded && getCounts && typeof getCounts === 'function';
   var _useState13 = React.useState(null),
@@ -45783,6 +46027,13 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
     if (showCounts) {
       setCountsLoading(true);
       reloadCounts(navItem.route);
+      if (countsRef && _typeof(countsRef) === 'object') {
+        countsRef.current = {
+          refreshCounts: function refreshCounts() {
+            return reloadCounts(navItem.route);
+          }
+        };
+      }
     }
   }, [activeSubmenu]);
   var reloadCounts = function reloadCounts(menuItemName) {
@@ -45814,7 +46065,7 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
     animate: isMenuExpanded ? 'open' : 'closed'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleItemClick,
-    className: _getClassName("NavItem ".concat(isMenuExpanded ? "expandedMenu" : "", " ").concat(selected === navItem.fullRoute ? "NavItemSelected" : "", " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavItem ".concat(isMenuExpanded ? 'expandedMenu' : '', " ").concat(selected === navItem.fullRoute ? 'NavItemSelected' : '', " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -45846,7 +46097,9 @@ var NavigationMenuLevel2 = function NavigationMenuLevel2(_ref5) {
       backgroundColor: '#232932',
       borderLeft: '1px solid #8A8886'
     }
-  }, hasSubMenuItems && isMenuExpanded ? navItem.subMenuItems.map(function (subItem) {
+  }, hasSubMenuItems && isMenuExpanded ? navItem.subMenuItems.filter(function (item) {
+    return typeof item.hidden === 'function' ? !item.hidden() : !item.hidden;
+  }).map(function (subItem) {
     return /*#__PURE__*/React__default["default"].createElement(NavigationMenuLevel3, {
       key: subItem.fullRoute,
       isHover: isHover,
@@ -45888,7 +46141,7 @@ var NavigationMenuLevel3 = function NavigationMenuLevel3(_ref6) {
     onClick: function onClick() {
       return !isDisabled && navigateToItem(navItem);
     },
-    className: _getClassName("NavItem ".concat(selected === navItem.fullRoute ? "NavItemSelected" : "", " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavItem ".concat(selected === navItem.fullRoute ? 'NavItemSelected' : '', " ").concat(isDisabled ? 'disabled' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -45991,10 +46244,13 @@ var AppFrame = function AppFrame(props) {
     getCounts: props.getCounts,
     activeSubmenu: activeSubmenu,
     setActiveSubmenu: setActiveSubmenu,
-    setShowNavigationCounts: setShowNavigationCounts
+    setShowNavigationCounts: setShowNavigationCounts,
+    countsRef: props.countsRef
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      marginLeft: props.showNavigation ? navigationWidth : '0px'
+      marginLeft: props.showNavigation ? navigationWidth : '0px',
+      height: '100%',
+      transition: 'all 0.5s ease-in-out'
     }
   }, props.children))))));
 };
@@ -46383,12 +46639,21 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
   };
 }
 
@@ -46577,9 +46842,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -47116,6 +47382,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -47149,7 +47417,7 @@ async function convertValueToCoords(state, options) {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = function (options) {
+const offset$1 = function (options) {
   if (options === void 0) {
     options = 0;
   }
@@ -47366,16 +47634,16 @@ const size = function (options) {
         widthSide = side;
         heightSide = alignment === 'end' ? 'top' : 'bottom';
       }
-      const overflowAvailableHeight = height - overflow[heightSide];
-      const overflowAvailableWidth = width - overflow[widthSide];
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
       const noShift = !state.middlewareData.shift;
       let availableHeight = overflowAvailableHeight;
       let availableWidth = overflowAvailableWidth;
       if (isYAxis) {
-        const maximumClippingWidth = width - overflow.left - overflow.right;
         availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
       } else {
-        const maximumClippingHeight = height - overflow.top - overflow.bottom;
         availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
       }
       if (noShift && !alignment) {
@@ -47464,9 +47732,8 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -47657,10 +47924,10 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 const topLayerSelectors = [':popover-open', ':modal'];
-function isTopLayer(floating) {
+function isTopLayer(element) {
   return topLayerSelectors.some(selector => {
     try {
-      return floating.matches(selector);
+      return element.matches(selector);
     } catch (e) {
       return false;
     }
@@ -47844,7 +48111,7 @@ function getClippingRect(_ref) {
     rootBoundary,
     strategy
   } = _ref;
-  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
   const firstClippingAncestor = clippingAncestors[0];
   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
@@ -47903,6 +48170,9 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     height: rect.height
   };
 }
+function isStaticPositioned(element) {
+  return getComputedStyle$1(element).position === 'static';
+}
 function getTrueOffsetParent(element, polyfill) {
   if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
     return null;
@@ -47916,28 +48186,40 @@ function getTrueOffsetParent(element, polyfill) {
 // Gets the closest ancestor positioned element. Handles some edge cases,
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
-  const window = getWindow(element);
-  if (!isHTMLElement(element) || isTopLayer(element)) {
-    return window;
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
   }
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
-    return window;
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
   }
-  return offsetParent || getContainingBlock(element) || window;
+  return offsetParent || getContainingBlock(element) || win;
 }
 const getElementRects = async function (data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
   return {
     reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
     floating: {
       x: 0,
       y: 0,
-      ...(await getDimensionsFn(data.floating))
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
     }
   };
 };
@@ -48005,9 +48287,11 @@ function observeMove(element, onMove) {
           return refresh();
         }
         if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
           timeoutId = setTimeout(() => {
             refresh(false, 1e-7);
-          }, 100);
+          }, 1000);
         } else {
           refresh(false, ratio);
         }
@@ -48111,6 +48395,15 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
 /**
  * Optimizes the visibility of the floating element by choosing the placement
  * that has the most space available automatically, without needing to specify a
@@ -48282,7 +48575,7 @@ function S({
     s = document.createElement("style");
   s.id = t, s.type = "text/css", "top" === c && i.firstChild ? i.insertBefore(s, i.firstChild) : i.appendChild(s), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(document.createTextNode(e)), b[o] = !0;
 }
-const g = async ({
+const E = async ({
     elementReference: e = null,
     tooltipReference: t = null,
     tooltipArrowReference: o = null,
@@ -48467,7 +48760,7 @@ const D = ({
     openOnClick: w = !1,
     positionStrategy: b = "absolute",
     middlewares: S,
-    wrapper: E,
+    wrapper: g,
     delayShow: A = 0,
     delayHide: O = 0,
     float: k = !1,
@@ -48515,9 +48808,9 @@ const D = ({
       be = React.useRef(null),
       {
         anchorRefs: Se,
-        setActiveAnchor: Ee
+        setActiveAnchor: ge
       } = I(r),
-      ge = React.useRef(!1),
+      Ee = React.useRef(!1),
       [Ae, _e] = React.useState([]),
       Oe = React.useRef(!1),
       Te = w || h.includes("click"),
@@ -48614,17 +48907,17 @@ const D = ({
       },
       Ie = (e = O) => {
         se.current && clearTimeout(se.current), se.current = setTimeout(() => {
-          ge.current || xe(!1);
+          Ee.current || xe(!1);
         }, e);
       },
       je = e => {
         var t;
         if (!e) return;
         const o = null !== (t = e.currentTarget) && void 0 !== t ? t : e.target;
-        if (!(null == o ? void 0 : o.isConnected)) return Q(null), void Ee({
+        if (!(null == o ? void 0 : o.isConnected)) return Q(null), void ge({
           current: null
         });
-        A ? $e() : xe(!0), Q(o), Ee({
+        A ? $e() : xe(!0), Q(o), ge({
           current: o
         }), se.current && clearTimeout(se.current);
       },
@@ -48648,7 +48941,7 @@ const D = ({
             bottom: t
           })
         };
-        g({
+        E({
           place: null !== (o = null == ye ? void 0 : ye.place) && void 0 !== o ? o : v,
           offset: m,
           elementReference: r,
@@ -48689,7 +48982,7 @@ const D = ({
       Ve = React.useCallback(() => {
         var e, t;
         const o = null !== (e = null == ye ? void 0 : ye.position) && void 0 !== e ? e : V;
-        o ? ze(o) : k ? be.current && ze(be.current) : (null == J ? void 0 : J.isConnected) && g({
+        o ? ze(o) : k ? be.current && ze(be.current) : (null == J ? void 0 : J.isConnected) && E({
           place: null !== (t = null == ye ? void 0 : ye.place) && void 0 !== t ? t : v,
           offset: m,
           elementReference: J,
@@ -48760,10 +49053,10 @@ const D = ({
         listener: De
       });
       const y = () => {
-          ge.current = !0;
+          Ee.current = !0;
         },
         h = () => {
-          ge.current = !1, Be();
+          Ee.current = !1, Be();
         };
       return N && !ke && (null === (e = ne.current) || void 0 === e || e.addEventListener("mouseenter", y), null === (t = ne.current) || void 0 === t || t.addEventListener("mouseleave", h)), a.forEach(({
         event: e,
@@ -48788,7 +49081,7 @@ const D = ({
     }, [J, Ve, me, Se, Ae, q, H, M, Te, A, O]), React.useEffect(() => {
       var e, t;
       let o = null !== (t = null !== (e = null == ye ? void 0 : ye.anchorSelect) && void 0 !== e ? e : p) && void 0 !== t ? t : "";
-      !o && r && (o = `[data-tooltip-id='${r}']`);
+      !o && r && (o = `[data-tooltip-id='${r.replace(/'/g, "\\'")}']`);
       const l = new MutationObserver(e => {
         const t = [],
           l = [];
@@ -48843,7 +49136,7 @@ const D = ({
     }), []), React.useEffect(() => {
       var e;
       let t = null !== (e = null == ye ? void 0 : ye.anchorSelect) && void 0 !== e ? e : p;
-      if (!t && r && (t = `[data-tooltip-id='${r}']`), t) try {
+      if (!t && r && (t = `[data-tooltip-id='${r.replace(/'/g, "\\'")}']`), t) try {
         const e = Array.from(document.querySelectorAll(t));
         _e(e);
       } catch (e) {
@@ -48869,7 +49162,7 @@ const D = ({
       activeAnchor: J,
       place: ue.place,
       isOpen: Boolean(me && !R && Fe && Ke)
-    })), me && !R && Fe ? React__default["default"].createElement(E, {
+    })), me && !R && Fe ? React__default["default"].createElement(g, {
       id: r,
       role: re,
       className: classnames("react-tooltip", B.tooltip, z.tooltip, z[u], c, `react-tooltip__place-${ue.place}`, B[Ke ? "show" : "closing"], Ke ? "react-tooltip__show" : "react-tooltip__closing", "fixed" === b && B.fixed, N && B.clickable),
@@ -48882,7 +49175,7 @@ const D = ({
         opacity: void 0 !== te && Ke ? te : void 0
       },
       ref: ne
-    }, Fe, React__default["default"].createElement(E, {
+    }, Fe, React__default["default"].createElement(g, {
       className: classnames("react-tooltip-arrow", B.arrow, z.arrow, i, x && B.noArrow),
       style: {
         ...ue.tooltipArrowStyles,
@@ -48915,8 +49208,8 @@ const D = ({
     events: w = ["hover"],
     openOnClick: b = !1,
     positionStrategy: S = "absolute",
-    middlewares: E,
-    delayShow: g = 0,
+    middlewares: g,
+    delayShow: E = 0,
     delayHide: _ = 0,
     float: O = !1,
     hidden: T = !1,
@@ -48947,14 +49240,14 @@ const D = ({
       [oe, re] = React.useState(v),
       [le, ne] = React.useState(p),
       [ce, ie] = React.useState(m),
-      [se, ae] = React.useState(g),
+      [se, ae] = React.useState(E),
       [ue, de] = React.useState(_),
       [pe, ve] = React.useState(O),
       [me, fe] = React.useState(T),
       [ye, he] = React.useState(f),
       [we, be] = React.useState(w),
-      [Se, Ee] = React.useState(S),
-      [ge, Ae] = React.useState(null),
+      [Se, ge] = React.useState(S),
+      [Ee, Ae] = React.useState(null),
       [_e, Oe] = React.useState(null),
       Te = React.useRef(P),
       {
@@ -48997,10 +49290,10 @@ const D = ({
           },
           "position-strategy": e => {
             var t;
-            Ee(null !== (t = e) && void 0 !== t ? t : S);
+            ge(null !== (t = e) && void 0 !== t ? t : S);
           },
           "delay-show": e => {
-            ae(null === e ? g : Number(e));
+            ae(null === e ? E : Number(e));
           },
           "delay-hide": e => {
             de(null === e ? _ : Number(e));
@@ -49031,15 +49324,15 @@ const D = ({
     }, [p]), React.useEffect(() => {
       ie(m);
     }, [m]), React.useEffect(() => {
-      ae(g);
-    }, [g]), React.useEffect(() => {
+      ae(E);
+    }, [E]), React.useEffect(() => {
       de(_);
     }, [_]), React.useEffect(() => {
       ve(O);
     }, [O]), React.useEffect(() => {
       fe(T);
     }, [T]), React.useEffect(() => {
-      Ee(S);
+      ge(S);
     }, [S]), React.useEffect(() => {
       Te.current !== P && console.warn("[react-tooltip] Do not change `disableStyleInjection` dynamically.");
     }, [P]), React.useEffect(() => {
@@ -49053,7 +49346,7 @@ const D = ({
       var e;
       const o = new Set(ke);
       let l = n;
-      if (!l && t && (l = `[data-tooltip-id='${t}']`), l) try {
+      if (!l && t && (l = `[data-tooltip-id='${t.replace(/'/g, "\\'")}']`), l) try {
         document.querySelectorAll(l).forEach(e => {
           o.add({
             current: e
@@ -49110,7 +49403,7 @@ const D = ({
       id: t,
       anchorId: r,
       anchorSelect: n,
-      className: classnames(u, ge),
+      className: classnames(u, Ee),
       classNameArrow: d,
       content: xe,
       contentWrapperRef: Ne,
@@ -49121,7 +49414,7 @@ const D = ({
       events: we,
       openOnClick: b,
       positionStrategy: Se,
-      middlewares: E,
+      middlewares: g,
       delayShow: se,
       delayHide: ue,
       float: pe,
@@ -49174,7 +49467,7 @@ function ContextualHelp(_ref) {
     article = _useState2[0],
     setArticle = _useState2[1];
   var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
-  var tileData = findAppData(coreAppConfig.tiles || []) || {};
+  var tileData = findAppData(coreAppConfig.tiles, coreAppConfig.tileOverrides) || {};
   var mihelpAppPath = !isCoreRoute ? tileData.mihelpAppPath : null;
   var isMihelpEnabled;
   if (isCoreRoute) {
@@ -49251,8 +49544,8 @@ function ContextualHelp(_ref) {
     name: "question-circle",
     variant: "solid",
     style: {
-      color: "#1d5ab9",
-      fontSize: "22px"
+      color: '#1d5ab9',
+      fontSize: '22px'
     }
   })), /*#__PURE__*/React__default["default"].createElement(H, {
     anchorSelect: "#helpSnippet1",