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

package/dist/ops-tool-kit.js

@@ -29,11 +29,10 @@ function _interopNamespace(e) {
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$7 = "1.11.4-alpha.2";
+const version$7 = "1.12.0-alpha.1";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -14044,18 +14043,18 @@ PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 /* global Reflect, Promise */
 
-var extendStatics$2 = function (d, b) {
-  extendStatics$2 = Object.setPrototypeOf || {
+var extendStatics$1 = function (d, b) {
+  extendStatics$1 = Object.setPrototypeOf || {
     __proto__: []
   } instanceof Array && function (d, b) {
     d.__proto__ = b;
   } || function (d, b) {
     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
   };
-  return extendStatics$2(d, b);
+  return extendStatics$1(d, b);
 };
-function __extends$2(d, b) {
-  extendStatics$2(d, b);
+function __extends$1(d, b) {
+  extendStatics$1(d, b);
   function __() {
     this.constructor = d;
   }
@@ -14071,21 +14070,6 @@ var __assign$6 = function () {
   };
   return __assign$6.apply(this, arguments);
 };
-function __rest$1(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-function __decorate(decorators, target, key, desc) {
-  var c = arguments.length,
-    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
-    d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
 function __spreadArrays$1() {
   for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
   for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
@@ -14528,11 +14512,11 @@ function provideUnits(rulePairs, index) {
   }
 }
 
-var _a$3;
+var _a;
 var LEFT = 'left';
 var RIGHT = 'right';
 var NO_FLIP = '@noflip';
-var NAME_REPLACEMENTS = (_a$3 = {}, _a$3[LEFT] = RIGHT, _a$3[RIGHT] = LEFT, _a$3);
+var NAME_REPLACEMENTS = (_a = {}, _a[LEFT] = RIGHT, _a[RIGHT] = LEFT, _a);
 var VALUE_REPLACEMENTS = {
   'w-resize': 'e-resize',
   'sw-resize': 'se-resize',
@@ -15042,56 +15026,6 @@ function fontFace(font) {
   Stylesheet.getInstance().insertRule("@font-face{" + serializeRuleEntries(getStyleOptions(), font) + "}", true);
 }
 
-/**
- * Registers keyframe definitions.
- *
- * @public
- */
-function keyframes(timeline) {
-  var stylesheet = Stylesheet.getInstance();
-  var name = stylesheet.getClassName();
-  var rulesArray = [];
-  for (var prop in timeline) {
-    if (timeline.hasOwnProperty(prop)) {
-      rulesArray.push(prop, '{', serializeRuleEntries(getStyleOptions(), timeline[prop]), '}');
-    }
-  }
-  var rules = rulesArray.join('');
-  stylesheet.insertRule("@keyframes " + name + "{" + rules + "}", true);
-  stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);
-  return name;
-}
-
-/**
- * Builds a class names object from a given map.
- *
- * @param styles - Map of unprocessed styles.
- * @returns Map of property name to class name.
- */
-function buildClassMap(styles) {
-  var classes = {};
-  var _loop_1 = function (styleName) {
-    if (styles.hasOwnProperty(styleName)) {
-      var className_1;
-      Object.defineProperty(classes, styleName, {
-        get: function () {
-          if (className_1 === undefined) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            className_1 = mergeStyles(styles[styleName]).toString();
-          }
-          return className_1;
-        },
-        enumerable: true,
-        configurable: true
-      });
-    }
-  };
-  for (var styleName in styles) {
-    _loop_1(styleName);
-  }
-  return classes;
-}
-
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -15557,24 +15491,6 @@ var Async = /** @class */function () {
  *
  * @public
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function shallowCompare(a, b) {
-  for (var propName in a) {
-    if (a.hasOwnProperty(propName)) {
-      if (!b.hasOwnProperty(propName) || b[propName] !== a[propName]) {
-        return false;
-      }
-    }
-  }
-  for (var propName in b) {
-    if (b.hasOwnProperty(propName)) {
-      if (!a.hasOwnProperty(propName)) {
-        return false;
-      }
-    }
-  }
-  return true;
-}
 /**
  * Makes a resulting merge of a bunch of objects. Pass in the target object followed by 1 or more
  * objects as arguments and they will be merged sequentially into the target. Note that this will
@@ -15868,7 +15784,6 @@ function getDocument(rootElement) {
   }
 }
 
-var _scrollbarWidth;
 mergeStyles({
   overflow: 'hidden !important'
 });
@@ -15880,27 +15795,6 @@ mergeStyles({
  * @public
  */
 var DATA_IS_SCROLLABLE_ATTRIBUTE = 'data-is-scrollable';
-/**
- * Calculates the width of a scrollbar for the browser/os.
- *
- * @public
- */
-function getScrollbarWidth() {
-  if (_scrollbarWidth === undefined) {
-    var scrollDiv = document.createElement('div');
-    scrollDiv.style.setProperty('width', '100px');
-    scrollDiv.style.setProperty('height', '100px');
-    scrollDiv.style.setProperty('overflow', 'scroll');
-    scrollDiv.style.setProperty('position', 'absolute');
-    scrollDiv.style.setProperty('top', '-9999px');
-    document.body.appendChild(scrollDiv);
-    // Get the scrollbar width
-    _scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    // Delete the DIV
-    document.body.removeChild(scrollDiv);
-  }
-  return _scrollbarWidth;
-}
 /**
  * Traverses up the DOM for the element with the data-is-scrollable=true attribute, or returns
  * document.body.
@@ -15950,25 +15844,6 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics$1 = function (d, b) {
-  extendStatics$1 = Object.setPrototypeOf || {
-    __proto__: []
-  } instanceof Array && function (d, b) {
-    d.__proto__ = b;
-  } || function (d, b) {
-    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-  };
-  return extendStatics$1(d, b);
-};
-function __extends$1(d, b) {
-  extendStatics$1(d, b);
-  function __() {
-    this.constructor = d;
-  }
-  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
 var __assign$3 = function () {
   __assign$3 = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -16238,62 +16113,6 @@ var KeyCodes = {
   singleQuote: 222
 };
 
-/**
- * Rectangle helper class.
- *
- * @public
- * {@docCategory Rectangle}
- */
-var Rectangle$1 = /** @class */function () {
-  function Rectangle(left, right, top, bottom) {
-    if (left === void 0) {
-      left = 0;
-    }
-    if (right === void 0) {
-      right = 0;
-    }
-    if (top === void 0) {
-      top = 0;
-    }
-    if (bottom === void 0) {
-      bottom = 0;
-    }
-    this.top = top;
-    this.bottom = bottom;
-    this.left = left;
-    this.right = right;
-  }
-  Object.defineProperty(Rectangle.prototype, "width", {
-    /**
-     * Calculated automatically by subtracting the right from left
-     */
-    get: function () {
-      return this.right - this.left;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  Object.defineProperty(Rectangle.prototype, "height", {
-    /**
-     * Calculated automatically by subtracting the bottom from top.
-     */
-    get: function () {
-      return this.bottom - this.top;
-    },
-    enumerable: true,
-    configurable: true
-  });
-  /**
-   * Tests if another rect is approximately equal to this rect (within 4 decimal places.)
-   */
-  Rectangle.prototype.equals = function (rect) {
-    // Fixing to 4 decimal places because it allows enough precision and will handle cases when something
-    // should be rounded, like .999999 should round to 1.
-    return parseFloat(this.top.toFixed(4)) === parseFloat(rect.top.toFixed(4)) && parseFloat(this.bottom.toFixed(4)) === parseFloat(rect.bottom.toFixed(4)) && parseFloat(this.left.toFixed(4)) === parseFloat(rect.left.toFixed(4)) && parseFloat(this.right.toFixed(4)) === parseFloat(rect.right.toFixed(4));
-  };
-  return Rectangle;
-}();
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Returns a single function which will call each of the given functions in the context of the
@@ -16517,13 +16336,6 @@ function elementContainsAttribute(element, attribute) {
 }
 
 var DATA_PORTAL_ATTRIBUTE = 'data-portal-element';
-/**
- * Identify element as a portal by setting an attribute.
- * @param element - Element to mark as a portal.
- */
-function setPortalAttribute(element) {
-  element.setAttribute(DATA_PORTAL_ATTRIBUTE, 'true');
-}
 
 /**
  * Determine whether a target is within a portal from perspective of root or optional parent.
@@ -16540,46 +16352,6 @@ function portalContainsElement(target, parent) {
   return elementMatch !== null && elementMatch.hasAttribute(DATA_PORTAL_ATTRIBUTE);
 }
 
-/**
- * Sets the virtual parent of an element.
- * Pass `undefined` as the `parent` to clear the virtual parent.
- *
- * @public
- */
-function setVirtualParent(child, parent) {
-  var virtualChild = child;
-  var virtualParent = parent;
-  if (!virtualChild._virtual) {
-    virtualChild._virtual = {
-      children: []
-    };
-  }
-  var oldParent = virtualChild._virtual.parent;
-  if (oldParent && oldParent !== parent) {
-    // Remove the child from its old parent.
-    var index = oldParent._virtual.children.indexOf(virtualChild);
-    if (index > -1) {
-      oldParent._virtual.children.splice(index, 1);
-    }
-  }
-  virtualChild._virtual.parent = virtualParent || undefined;
-  if (virtualParent) {
-    if (!virtualParent._virtual) {
-      virtualParent._virtual = {
-        children: []
-      };
-    }
-    virtualParent._virtual.children.push(virtualChild);
-  }
-}
-
-function on(element, eventName, callback, options) {
-  element.addEventListener(eventName, callback, options);
-  return function () {
-    return element.removeEventListener(eventName, callback, options);
-  };
-}
-
 var MAX_CACHE_COUNT = 50;
 var DEFAULT_SPECIFICITY_MULTIPLIER = 5;
 var _memoizedClassNames = 0;
@@ -16716,107 +16488,6 @@ function _normalizeValue(value) {
   }
 }
 
-var _initializedStylesheetResets$1 = false;
-var _resetCounter = 0;
-var _emptyObject = {
-  empty: true
-};
-var _dictionary = {};
-var _weakMap = typeof WeakMap === 'undefined' ? null : WeakMap;
-/**
- * Reset memoizations.
- */
-function resetMemoizations() {
-  _resetCounter++;
-}
-/**
- * Memoizes a function; when you pass in the same parameters multiple times, it returns a cached result.
- * Be careful when passing in objects, you need to pass in the same INSTANCE for caching to work. Otherwise
- * it will grow the cache unnecessarily. Also avoid using default values that evaluate functions; passing in
- * undefined for a value and relying on a default function will execute it the first time, but will not
- * re-evaluate subsequent times which may have been unexpected.
- *
- * By default, the cache will reset after 100 permutations, to avoid abuse cases where the function is
- * unintendedly called with unique objects. Without a reset, the cache could grow infinitely, so we safeguard
- * by resetting. To override this behavior, pass a value of 0 to the maxCacheSize parameter.
- *
- * @public
- * @param cb - The function to memoize.
- * @param maxCacheSize - Max results to cache. If the cache exceeds this value, it will reset on the next call.
- * @param ignoreNullOrUndefinedResult - Flag to decide whether to cache callback result if it is undefined/null.
- * If the flag is set to true, the callback result is recomputed every time till the callback result is
- * not undefined/null for the first time, and then the non-undefined/null version gets cached.
- * @returns A memoized version of the function.
- */
-function memoizeFunction(cb, maxCacheSize, ignoreNullOrUndefinedResult) {
-  if (maxCacheSize === void 0) {
-    maxCacheSize = 100;
-  }
-  if (ignoreNullOrUndefinedResult === void 0) {
-    ignoreNullOrUndefinedResult = false;
-  }
-  // Avoid breaking scenarios which don't have weak map.
-  if (!_weakMap) {
-    return cb;
-  }
-  if (!_initializedStylesheetResets$1) {
-    var stylesheet = Stylesheet.getInstance();
-    if (stylesheet && stylesheet.onReset) {
-      Stylesheet.getInstance().onReset(resetMemoizations);
-    }
-    _initializedStylesheetResets$1 = true;
-  }
-  var rootNode;
-  var cacheSize = 0;
-  var localResetCounter = _resetCounter;
-  return function memoizedFunction() {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-      args[_i] = arguments[_i];
-    }
-    var currentNode = rootNode;
-    if (rootNode === undefined || localResetCounter !== _resetCounter || maxCacheSize > 0 && cacheSize > maxCacheSize) {
-      rootNode = _createNode();
-      cacheSize = 0;
-      localResetCounter = _resetCounter;
-    }
-    currentNode = rootNode;
-    // Traverse the tree until we find the match.
-    for (var i = 0; i < args.length; i++) {
-      var arg = _normalizeArg(args[i]);
-      if (!currentNode.map.has(arg)) {
-        currentNode.map.set(arg, _createNode());
-      }
-      currentNode = currentNode.map.get(arg);
-    }
-    if (!currentNode.hasOwnProperty('value')) {
-      currentNode.value = cb.apply(void 0, args);
-      cacheSize++;
-    }
-    if (ignoreNullOrUndefinedResult && (currentNode.value === null || currentNode.value === undefined)) {
-      currentNode.value = cb.apply(void 0, args);
-    }
-    return currentNode.value;
-  };
-}
-function _normalizeArg(val) {
-  if (!val) {
-    return _emptyObject;
-  } else if (typeof val === 'object' || typeof val === 'function') {
-    return val;
-  } else if (!_dictionary[val]) {
-    _dictionary[val] = {
-      val: val
-    };
-  }
-  return _dictionary[val];
-}
-function _createNode() {
-  return {
-    map: _weakMap ? new _weakMap() : null
-  };
-}
-
 /**
  * Concatination helper, which can merge class names together. Skips over falsey values.
  *
@@ -16937,190 +16608,6 @@ var CustomizerContext = React__namespace.createContext({
   }
 });
 
-/**
- * Merge new and old settings, giving priority to new settings.
- * New settings is optional in which case oldSettings is returned as-is.
- * @param oldSettings - Old settings to fall back to.
- * @param newSettings - New settings that will be merged over oldSettings.
- * @returns Merged settings.
- */
-function mergeSettings(oldSettings, newSettings) {
-  if (oldSettings === void 0) {
-    oldSettings = {};
-  }
-  var mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _settingsMergeWith(newSettings);
-  return mergeSettingsWith(oldSettings);
-}
-function mergeScopedSettings(oldSettings, newSettings) {
-  if (oldSettings === void 0) {
-    oldSettings = {};
-  }
-  var mergeSettingsWith = _isSettingsFunction(newSettings) ? newSettings : _scopedSettingsMergeWith(newSettings);
-  return mergeSettingsWith(oldSettings);
-}
-function _isSettingsFunction(settings) {
-  return typeof settings === 'function';
-}
-function _settingsMergeWith(newSettings) {
-  return function (settings) {
-    return newSettings ? __assign$3(__assign$3({}, settings), newSettings) : settings;
-  };
-}
-function _scopedSettingsMergeWith(scopedSettingsFromProps) {
-  if (scopedSettingsFromProps === void 0) {
-    scopedSettingsFromProps = {};
-  }
-  return function (oldScopedSettings) {
-    var newScopedSettings = __assign$3({}, oldScopedSettings);
-    for (var scopeName in scopedSettingsFromProps) {
-      if (scopedSettingsFromProps.hasOwnProperty(scopeName)) {
-        newScopedSettings[scopeName] = __assign$3(__assign$3({}, oldScopedSettings[scopeName]), scopedSettingsFromProps[scopeName]);
-      }
-    }
-    return newScopedSettings;
-  };
-}
-
-/**
- * Merge props and customizations giving priority to props over context.
- * NOTE: This function will always perform multiple merge operations. Use with caution.
- * @param props - New settings to merge in.
- * @param parentContext - Context containing current settings.
- * @returns Merged customizations.
- */
-function mergeCustomizations(props, parentContext) {
-  var _a = (parentContext || {}).customizations,
-    customizations = _a === void 0 ? {
-      settings: {},
-      scopedSettings: {}
-    } : _a;
-  return {
-    customizations: {
-      settings: mergeSettings(customizations.settings, props.settings),
-      scopedSettings: mergeScopedSettings(customizations.scopedSettings, props.scopedSettings),
-      inCustomizerContext: true
-    }
-  };
-}
-
-/**
- * The Customizer component allows for default props to be mixed into components which
- * are decorated with the customizable() decorator, or use the styled HOC. This enables
- * injection scenarios like:
- *
- * 1. render svg icons instead of the icon font within all buttons
- * 2. inject a custom theme object into a component
- *
- * Props are provided via the settings prop which should be one of the following:
- * - A json map which contains 1 or more name/value pairs representing injectable props.
- * - A function that receives the current settings and returns the new ones that apply to the scope
- *
- * @public
- */
-var Customizer = /** @class */function (_super) {
-  __extends$1(Customizer, _super);
-  function Customizer() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this._onCustomizationChange = function () {
-      return _this.forceUpdate();
-    };
-    return _this;
-  }
-  Customizer.prototype.componentDidMount = function () {
-    Customizations.observe(this._onCustomizationChange);
-  };
-  Customizer.prototype.componentWillUnmount = function () {
-    Customizations.unobserve(this._onCustomizationChange);
-  };
-  Customizer.prototype.render = function () {
-    var _this = this;
-    var contextTransform = this.props.contextTransform;
-    return React__namespace.createElement(CustomizerContext.Consumer, null, function (parentContext) {
-      var newContext = mergeCustomizations(_this.props, parentContext);
-      if (contextTransform) {
-        newContext = contextTransform(newContext);
-      }
-      return React__namespace.createElement(CustomizerContext.Provider, {
-        value: newContext
-      }, _this.props.children);
-    });
-  };
-  return Customizer;
-}(React__namespace.Component);
-
-/**
- * Allows you to hoist static functions in components.
- * Created for the purpose of fixing broken static functions in classes
- * that utilize decorators.
- *
- * @public
- * @param source - The object where the methods are hoisted from.
- * @param dest - The object to hoist the methods onto.
- * @returns The dest object with methods added
- */
-function hoistStatics(source, dest) {
-  for (var name_1 in source) {
-    if (source.hasOwnProperty(name_1)) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      dest[name_1] = source[name_1];
-    }
-  }
-  return dest;
-}
-
-function customizable(scope, fields, concatStyles) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function customizableFactory(ComposedComponent) {
-    var _a;
-    var resultClass = (_a = /** @class */function (_super) {
-      __extends$1(ComponentWithInjectedProps, _super);
-      function ComponentWithInjectedProps(props) {
-        var _this = _super.call(this, props) || this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        _this._styleCache = {};
-        _this._onSettingChanged = _this._onSettingChanged.bind(_this);
-        return _this;
-      }
-      ComponentWithInjectedProps.prototype.componentDidMount = function () {
-        Customizations.observe(this._onSettingChanged);
-      };
-      ComponentWithInjectedProps.prototype.componentWillUnmount = function () {
-        Customizations.unobserve(this._onSettingChanged);
-      };
-      ComponentWithInjectedProps.prototype.render = function () {
-        var _this = this;
-        return React__namespace.createElement(CustomizerContext.Consumer, null, function (context) {
-          var defaultProps = Customizations.getSettings(fields, scope, context.customizations);
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          var componentProps = _this.props;
-          // If defaultProps.styles is a function, evaluate it before calling concatStyleSets
-          if (defaultProps.styles && typeof defaultProps.styles === 'function') {
-            defaultProps.styles = defaultProps.styles(__assign$3(__assign$3({}, defaultProps), componentProps));
-          }
-          // If concatStyles is true and custom styles have been defined compute those styles
-          if (concatStyles && defaultProps.styles) {
-            if (_this._styleCache.default !== defaultProps.styles || _this._styleCache.component !== componentProps.styles) {
-              var mergedStyles = concatStyleSets(defaultProps.styles, componentProps.styles);
-              _this._styleCache.default = defaultProps.styles;
-              _this._styleCache.component = componentProps.styles;
-              _this._styleCache.merged = mergedStyles;
-            }
-            return React__namespace.createElement(ComposedComponent, __assign$3({}, defaultProps, componentProps, {
-              styles: _this._styleCache.merged
-            }));
-          }
-          return React__namespace.createElement(ComposedComponent, __assign$3({}, defaultProps, componentProps));
-        });
-      };
-      ComponentWithInjectedProps.prototype._onSettingChanged = function () {
-        this.forceUpdate();
-      };
-      return ComponentWithInjectedProps;
-    }(React__namespace.Component), _a.displayName = 'Customized' + scope, _a);
-    return hoistStatics(ComposedComponent, resultClass);
-  };
-}
-
 /**
  * Hook to get Customizations settings from Customizations singleton or CustomizerContext.
  * It will trigger component state update on settings change observed.
@@ -17331,19 +16818,6 @@ function isElementFocusZone(element) {
 function isElementFocusSubZone(element) {
   return !!(element && element.getAttribute && element.getAttribute(FOCUSZONE_SUB_ATTRIBUTE) === 'true');
 }
-/**
- * Determines if an element, or any of its children, contain focus.
- *
- * @public
- */
-function doesElementContainFocus(element) {
-  var document = getDocument(element);
-  var currentActiveElement = document && document.activeElement;
-  if (currentActiveElement && elementContains(element, currentActiveElement)) {
-    return true;
-  }
-  return false;
-}
 /**
  * Determines if an, or any of its ancestors, sepcificies that it doesn't want focus to wrap
  * @param element - element to start searching from
@@ -17678,120 +17152,6 @@ function _setComponentRef(componentRef, value) {
   }
 }
 
-var _a$2;
-var DirectionalKeyCodes = (_a$2 = {}, _a$2[KeyCodes.up] = 1, _a$2[KeyCodes.down] = 1, _a$2[KeyCodes.left] = 1, _a$2[KeyCodes.right] = 1, _a$2[KeyCodes.home] = 1, _a$2[KeyCodes.end] = 1, _a$2[KeyCodes.tab] = 1, _a$2[KeyCodes.pageUp] = 1, _a$2[KeyCodes.pageDown] = 1, _a$2);
-/**
- * Returns true if the keycode is a directional keyboard key.
- */
-function isDirectionalKeyCode(which) {
-  return !!DirectionalKeyCodes[which];
-}
-
-var IsFocusVisibleClassName = 'ms-Fabric--isFocusVisible';
-var IsFocusHiddenClassName = 'ms-Fabric--isFocusHidden';
-/**
- * Sets the visibility of focus styling.
- *
- * By default, focus styles (the box surrounding a focused Button, for example) only show up when navigational
- * keypresses occur (through Tab, arrows, PgUp/PgDn, Home and End), and are hidden when mouse interactions occur.
- * This API provides an imperative way to turn them on/off.
- *
- * A use case might be when you have a keypress like ctrl-f6 navigate to a particular region on the page,
- * and want focus to show up.
- *
- * @param enabled - whether to remove or add focus
- * @param target - optional target
- */
-function setFocusVisibility(enabled, target) {
-  var win = target ? getWindow$1(target) : getWindow$1();
-  if (win) {
-    var classList = win.document.body.classList;
-    classList.add(enabled ? IsFocusVisibleClassName : IsFocusHiddenClassName);
-    classList.remove(enabled ? IsFocusHiddenClassName : IsFocusVisibleClassName);
-  }
-}
-
-/**
- * Counter for mounted component that uses focus rectangle.
- * We want to cleanup the listners before last component that uses focus rectangle unmounts.
- */
-var mountCounters = new WeakMap();
-function setMountCounters(key, delta) {
-  var newValue;
-  var currValue = mountCounters.get(key);
-  if (currValue) {
-    newValue = currValue + delta;
-  } else {
-    newValue = 1;
-  }
-  mountCounters.set(key, newValue);
-  return newValue;
-}
-/**
- * Initializes the logic which:
- *
- * 1. Subscribes keydown and mousedown events. (It will only do it once per window,
- *    so it's safe to call this method multiple times.)
- * 2. When the user presses directional keyboard keys, adds the 'ms-Fabric--isFocusVisible' classname
- *    to the document body, removes the 'ms-Fabric-isFocusHidden' classname.
- * 3. When the user clicks a mouse button, adds the 'ms-Fabric-isFocusHidden' classname to the
- *    document body, removes the 'ms-Fabric--isFocusVisible' classname.
- *
- * This logic allows components on the page to conditionally render focus treatments based on
- * the existence of global classnames, which simplifies logic overall.
- *
- * @param rootRef - A Ref object. Focus rectangle can be applied on itself and all its children.
- */
-function useFocusRects(rootRef) {
-  React__namespace.useEffect(function () {
-    var _a, _b;
-    var win = getWindow$1((_a = rootRef) === null || _a === void 0 ? void 0 : _a.current);
-    if (!win || ((_b = win.FabricConfig) === null || _b === void 0 ? void 0 : _b.disableFocusRects) === true) {
-      return undefined;
-    }
-    var count = setMountCounters(win, 1);
-    if (count <= 1) {
-      win.addEventListener('mousedown', _onMouseDown, true);
-      win.addEventListener('pointerdown', _onPointerDown, true);
-      win.addEventListener('keydown', _onKeyDown, true);
-    }
-    return function () {
-      var _a;
-      if (!win || ((_a = win.FabricConfig) === null || _a === void 0 ? void 0 : _a.disableFocusRects) === true) {
-        return;
-      }
-      count = setMountCounters(win, -1);
-      if (count === 0) {
-        win.removeEventListener('mousedown', _onMouseDown, true);
-        win.removeEventListener('pointerdown', _onPointerDown, true);
-        win.removeEventListener('keydown', _onKeyDown, true);
-      }
-    };
-  }, [rootRef]);
-}
-/**
- * Function Component wrapper which enables calling `useFocusRects` hook.
- * Renders nothing.
- */
-var FocusRects = function (props) {
-  useFocusRects(props.rootRef);
-  return null;
-};
-function _onMouseDown(ev) {
-  setFocusVisibility(false, ev.target);
-}
-function _onPointerDown(ev) {
-  if (ev.pointerType !== 'mouse') {
-    setFocusVisibility(false, ev.target);
-  }
-}
-function _onKeyDown(ev) {
-  // eslint-disable-next-line deprecation/deprecation
-  if (isDirectionalKeyCode(ev.which)) {
-    setFocusVisibility(true, ev.target);
-  }
-}
-
 /**
  * Fetches an item from local storage without throwing an exception
  * @param key The key of the item to fetch from local storage
@@ -17965,199 +17325,6 @@ var createMergedRef = function (value) {
   };
 };
 
-/* Register the keyframes */
-var EASING_FUNCTION_1 = 'cubic-bezier(.1,.9,.2,1)';
-var EASING_FUNCTION_2 = 'cubic-bezier(.1,.25,.75,.9)';
-var DURATION_1 = '0.167s';
-var DURATION_2 = '0.267s';
-var DURATION_3 = '0.367s';
-var DURATION_4 = '0.467s';
-var FADE_IN = keyframes({
-  from: {
-    opacity: 0
-  },
-  to: {
-    opacity: 1
-  }
-});
-var FADE_OUT = keyframes({
-  from: {
-    opacity: 1
-  },
-  to: {
-    opacity: 0,
-    visibility: 'hidden'
-  }
-});
-var SLIDE_RIGHT_IN10 = _createSlideInX(-10);
-var SLIDE_RIGHT_IN20 = _createSlideInX(-20);
-var SLIDE_RIGHT_IN40 = _createSlideInX(-40);
-var SLIDE_RIGHT_IN400 = _createSlideInX(-400);
-var SLIDE_LEFT_IN10 = _createSlideInX(10);
-var SLIDE_LEFT_IN20 = _createSlideInX(20);
-var SLIDE_LEFT_IN40 = _createSlideInX(40);
-var SLIDE_LEFT_IN400 = _createSlideInX(400);
-var SLIDE_UP_IN10 = _createSlideInY(10);
-var SLIDE_UP_IN20 = _createSlideInY(20);
-var SLIDE_DOWN_IN10 = _createSlideInY(-10);
-var SLIDE_DOWN_IN20 = _createSlideInY(-20);
-var SLIDE_RIGHT_OUT10 = _createSlideOutX(10);
-var SLIDE_RIGHT_OUT20 = _createSlideOutX(20);
-var SLIDE_RIGHT_OUT40 = _createSlideOutX(40);
-var SLIDE_RIGHT_OUT400 = _createSlideOutX(400);
-var SLIDE_LEFT_OUT10 = _createSlideOutX(-10);
-var SLIDE_LEFT_OUT20 = _createSlideOutX(-20);
-var SLIDE_LEFT_OUT40 = _createSlideOutX(-40);
-var SLIDE_LEFT_OUT400 = _createSlideOutX(-400);
-var SLIDE_UP_OUT10 = _createSlideOutY(-10);
-var SLIDE_UP_OUT20 = _createSlideOutY(-20);
-var SLIDE_DOWN_OUT10 = _createSlideOutY(10);
-var SLIDE_DOWN_OUT20 = _createSlideOutY(20);
-var SCALE_UP100 = keyframes({
-  from: {
-    transform: 'scale3d(.98,.98,1)'
-  },
-  to: {
-    transform: 'scale3d(1,1,1)'
-  }
-});
-var SCALE_DOWN98 = keyframes({
-  from: {
-    transform: 'scale3d(1,1,1)'
-  },
-  to: {
-    transform: 'scale3d(.98,.98,1)'
-  }
-});
-var SCALE_DOWN100 = keyframes({
-  from: {
-    transform: 'scale3d(1.03,1.03,1)'
-  },
-  to: {
-    transform: 'scale3d(1,1,1)'
-  }
-});
-var SCALE_UP103 = keyframes({
-  from: {
-    transform: 'scale3d(1,1,1)'
-  },
-  to: {
-    transform: 'scale3d(1.03,1.03,1)'
-  }
-});
-var ROTATE90 = keyframes({
-  from: {
-    transform: 'rotateZ(0deg)'
-  },
-  to: {
-    transform: 'rotateZ(90deg)'
-  }
-});
-var ROTATE_N90 = keyframes({
-  from: {
-    transform: 'rotateZ(0deg)'
-  },
-  to: {
-    transform: 'rotateZ(-90deg)'
-  }
-});
-/**
- * All Fabric standard animations, exposed as json objects referencing predefined
- * keyframes. These objects can be mixed in with other class definitions.
- */
-var AnimationStyles = {
-  slideRightIn10: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN10, DURATION_3, EASING_FUNCTION_1),
-  slideRightIn20: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN20, DURATION_3, EASING_FUNCTION_1),
-  slideRightIn40: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN40, DURATION_3, EASING_FUNCTION_1),
-  slideRightIn400: _createAnimation(FADE_IN + "," + SLIDE_RIGHT_IN400, DURATION_3, EASING_FUNCTION_1),
-  slideLeftIn10: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN10, DURATION_3, EASING_FUNCTION_1),
-  slideLeftIn20: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN20, DURATION_3, EASING_FUNCTION_1),
-  slideLeftIn40: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN40, DURATION_3, EASING_FUNCTION_1),
-  slideLeftIn400: _createAnimation(FADE_IN + "," + SLIDE_LEFT_IN400, DURATION_3, EASING_FUNCTION_1),
-  slideUpIn10: _createAnimation(FADE_IN + "," + SLIDE_UP_IN10, DURATION_3, EASING_FUNCTION_1),
-  slideUpIn20: _createAnimation(FADE_IN + "," + SLIDE_UP_IN20, DURATION_3, EASING_FUNCTION_1),
-  slideDownIn10: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN10, DURATION_3, EASING_FUNCTION_1),
-  slideDownIn20: _createAnimation(FADE_IN + "," + SLIDE_DOWN_IN20, DURATION_3, EASING_FUNCTION_1),
-  slideRightOut10: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT10, DURATION_3, EASING_FUNCTION_1),
-  slideRightOut20: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT20, DURATION_3, EASING_FUNCTION_1),
-  slideRightOut40: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT40, DURATION_3, EASING_FUNCTION_1),
-  slideRightOut400: _createAnimation(FADE_OUT + "," + SLIDE_RIGHT_OUT400, DURATION_3, EASING_FUNCTION_1),
-  slideLeftOut10: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT10, DURATION_3, EASING_FUNCTION_1),
-  slideLeftOut20: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT20, DURATION_3, EASING_FUNCTION_1),
-  slideLeftOut40: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT40, DURATION_3, EASING_FUNCTION_1),
-  slideLeftOut400: _createAnimation(FADE_OUT + "," + SLIDE_LEFT_OUT400, DURATION_3, EASING_FUNCTION_1),
-  slideUpOut10: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT10, DURATION_3, EASING_FUNCTION_1),
-  slideUpOut20: _createAnimation(FADE_OUT + "," + SLIDE_UP_OUT20, DURATION_3, EASING_FUNCTION_1),
-  slideDownOut10: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT10, DURATION_3, EASING_FUNCTION_1),
-  slideDownOut20: _createAnimation(FADE_OUT + "," + SLIDE_DOWN_OUT20, DURATION_3, EASING_FUNCTION_1),
-  scaleUpIn100: _createAnimation(FADE_IN + "," + SCALE_UP100, DURATION_3, EASING_FUNCTION_1),
-  scaleDownIn100: _createAnimation(FADE_IN + "," + SCALE_DOWN100, DURATION_3, EASING_FUNCTION_1),
-  scaleUpOut103: _createAnimation(FADE_OUT + "," + SCALE_UP103, DURATION_1, EASING_FUNCTION_2),
-  scaleDownOut98: _createAnimation(FADE_OUT + "," + SCALE_DOWN98, DURATION_1, EASING_FUNCTION_2),
-  fadeIn100: _createAnimation(FADE_IN, DURATION_1, EASING_FUNCTION_2),
-  fadeIn200: _createAnimation(FADE_IN, DURATION_2, EASING_FUNCTION_2),
-  fadeIn400: _createAnimation(FADE_IN, DURATION_3, EASING_FUNCTION_2),
-  fadeIn500: _createAnimation(FADE_IN, DURATION_4, EASING_FUNCTION_2),
-  fadeOut100: _createAnimation(FADE_OUT, DURATION_1, EASING_FUNCTION_2),
-  fadeOut200: _createAnimation(FADE_OUT, DURATION_2, EASING_FUNCTION_2),
-  fadeOut400: _createAnimation(FADE_OUT, DURATION_3, EASING_FUNCTION_2),
-  fadeOut500: _createAnimation(FADE_OUT, DURATION_4, EASING_FUNCTION_2),
-  rotate90deg: _createAnimation(ROTATE90, '0.1s', EASING_FUNCTION_2),
-  rotateN90deg: _createAnimation(ROTATE_N90, '0.1s', EASING_FUNCTION_2)
-};
-function _createAnimation(animationName, animationDuration, animationTimingFunction) {
-  return {
-    animationName: animationName,
-    animationDuration: animationDuration,
-    animationTimingFunction: animationTimingFunction,
-    animationFillMode: 'both'
-  };
-}
-function _createSlideInX(fromX) {
-  return keyframes({
-    from: {
-      transform: "translate3d(" + fromX + "px,0,0)",
-      pointerEvents: 'none'
-    },
-    to: {
-      transform: "translate3d(0,0,0)",
-      pointerEvents: 'auto'
-    }
-  });
-}
-function _createSlideInY(fromY) {
-  return keyframes({
-    from: {
-      transform: "translate3d(0," + fromY + "px,0)",
-      pointerEvents: 'none'
-    },
-    to: {
-      transform: "translate3d(0,0,0)",
-      pointerEvents: 'auto'
-    }
-  });
-}
-function _createSlideOutX(toX) {
-  return keyframes({
-    from: {
-      transform: "translate3d(0,0,0)"
-    },
-    to: {
-      transform: "translate3d(" + toX + "px,0,0)"
-    }
-  });
-}
-function _createSlideOutY(toY) {
-  return keyframes({
-    from: {
-      transform: "translate3d(0,0,0)"
-    },
-    to: {
-      transform: "translate3d(0," + toY + "px,0)"
-    }
-  });
-}
-
 // When adding or removing a color, make sure you keep this consistent with IColorClassNames
 // by adding the color variants.
 var DefaultPalette = {
@@ -18457,68 +17624,6 @@ function _getFontBaseUrl() {
  */
 registerDefaultFontFaces(_getFontBaseUrl());
 
-var HighContrastSelector = '@media screen and (-ms-high-contrast: active), screen and (forced-colors: active)';
-
-var ZIndexes;
-(function (ZIndexes) {
-  ZIndexes.Nav = 1;
-  /**
-   * @deprecated ScrollablePane
-   */
-  ZIndexes.ScrollablePane = 1;
-  ZIndexes.FocusStyle = 1;
-  ZIndexes.Coachmark = 1000;
-  ZIndexes.Layer = 1000000;
-  ZIndexes.KeytipLayer = 1000001;
-})(ZIndexes || (ZIndexes = {}));
-
-/**
- * Generates style to clear browser specific focus styles.
- */
-function focusClear() {
-  return {
-    selectors: {
-      '&::-moz-focus-inner': {
-        // Clear the focus border in Firefox. Reference: http://stackoverflow.com/a/199319/1436671
-        border: 0
-      },
-      '&': {
-        // Clear browser specific focus styles and use transparent as placeholder for focus style
-        outline: 'transparent'
-      }
-    }
-  };
-}
-
-/**
- * Internal memoized function which simply takes in the class map and the
- * disable boolean. These immutable values can be memoized.
- */
-var _getGlobalClassNames = memoizeFunction(function (classNames, disableGlobalClassNames) {
-  var styleSheet = Stylesheet.getInstance();
-  if (disableGlobalClassNames) {
-    // disable global classnames
-    return Object.keys(classNames).reduce(function (acc, className) {
-      acc[className] = styleSheet.getClassName(classNames[className]);
-      return acc;
-    }, {});
-  }
-  // use global classnames
-  return classNames;
-});
-/**
- * Checks for the `disableGlobalClassNames` property on the `theme` to determine if it should return `classNames`
- * Note that calls to this function are memoized.
- *
- * @param classNames - The collection of global class names that apply when the flag is false. Make sure to pass in
- * the same instance on each call to benefit from memoization.
- * @param theme - The theme to check the flag on
- * @param disableGlobalClassNames - Optional. Explicitly opt in/out of disabling global classnames. Defaults to false.
- */
-function getGlobalClassNames(classNames, theme, disableGlobalClassNames) {
-  return _getGlobalClassNames(classNames, disableGlobalClassNames !== undefined ? disableGlobalClassNames : theme.disableGlobalClassNames);
-}
-
 // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 // See LICENSE in the project root for license information.
 var __assign$2 = undefined && undefined.__assign || function () {
@@ -19076,1657 +18181,11 @@ function _loadFonts(theme) {
   return lines;
 }
 
-/**
- * {@docCategory AnimationClassNames}
- */
-var AnimationClassNames = buildClassMap(AnimationStyles);
-
 // Do not modify this file; it is generated as part of publish.
 setVersion('@uifabric/styling', '7.25.0');
 
 initializeThemeInCustomizations();
 
-var DirectionalHint = {
-  /**
-   * Appear above the target element, with the left edges of the callout and target aligning.
-   */
-  topLeftEdge: 0,
-  /**
-   * Appear above the target element, with the centers of the callout and target aligning.
-   */
-  topCenter: 1,
-  /**
-   * Appear above the target element, with the right edges of the callout and target aligning.
-   */
-  topRightEdge: 2,
-  /**
-   * Appear above the target element, aligning with the target element such that the callout tends toward
-   * the center of the screen.
-   */
-  topAutoEdge: 3,
-  /**
-   * Appear below the target element, with the left edges of the callout and target aligning.
-   */
-  bottomLeftEdge: 4,
-  /**
-   * Appear below the target element, with the centers of the callout and target aligning.
-   */
-  bottomCenter: 5,
-  /**
-   * Appear below the target element, with the right edges of the callout and target aligning.
-   */
-  bottomRightEdge: 6,
-  /**
-   * Appear below the target element, aligning with the target element such that the callout tends toward
-   * the center of the screen.
-   */
-  bottomAutoEdge: 7,
-  /**
-   * Appear to the left of the target element, with the top edges of the callout and target aligning.
-   */
-  leftTopEdge: 8,
-  /**
-   * Appear to the left of the target element, with the centers of the callout and target aligning.
-   */
-  leftCenter: 9,
-  /**
-   * Appear to the left of the target element, with the bottom edges of the callout and target aligning.
-   */
-  leftBottomEdge: 10,
-  /**
-   * Appear to the right of the target element, with the top edges of the callout and target aligning.
-   */
-  rightTopEdge: 11,
-  /**
-   * Appear to the right of the target element, with the centers of the callout and target aligning.
-   */
-  rightCenter: 12,
-  /**
-   * Appear to the right of the target element, with the bottom edges of the callout and target aligning.
-   */
-  rightBottomEdge: 13
-};
-
-var RectangleEdge;
-(function (RectangleEdge) {
-  RectangleEdge[RectangleEdge["top"] = 1] = "top";
-  RectangleEdge[RectangleEdge["bottom"] = -1] = "bottom";
-  RectangleEdge[RectangleEdge["left"] = 2] = "left";
-  RectangleEdge[RectangleEdge["right"] = -2] = "right";
-})(RectangleEdge || (RectangleEdge = {}));
-var Position;
-(function (Position) {
-  Position[Position["top"] = 0] = "top";
-  Position[Position["bottom"] = 1] = "bottom";
-  Position[Position["start"] = 2] = "start";
-  Position[Position["end"] = 3] = "end";
-})(Position || (Position = {}));
-
-var _a$1;
-var Rectangle = /** @class */function (_super) {
-  __extends$2(Rectangle, _super);
-  function Rectangle() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-  return Rectangle;
-}(Rectangle$1);
-function _createPositionData(targetEdge, alignmentEdge, isAuto) {
-  return {
-    targetEdge: targetEdge,
-    alignmentEdge: alignmentEdge,
-    isAuto: isAuto
-  };
-}
-// Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target
-var DirectionalDictionary = (_a$1 = {}, _a$1[DirectionalHint.topLeftEdge] = _createPositionData(RectangleEdge.top, RectangleEdge.left), _a$1[DirectionalHint.topCenter] = _createPositionData(RectangleEdge.top), _a$1[DirectionalHint.topRightEdge] = _createPositionData(RectangleEdge.top, RectangleEdge.right), _a$1[DirectionalHint.topAutoEdge] = _createPositionData(RectangleEdge.top, undefined, true), _a$1[DirectionalHint.bottomLeftEdge] = _createPositionData(RectangleEdge.bottom, RectangleEdge.left), _a$1[DirectionalHint.bottomCenter] = _createPositionData(RectangleEdge.bottom), _a$1[DirectionalHint.bottomRightEdge] = _createPositionData(RectangleEdge.bottom, RectangleEdge.right), _a$1[DirectionalHint.bottomAutoEdge] = _createPositionData(RectangleEdge.bottom, undefined, true), _a$1[DirectionalHint.leftTopEdge] = _createPositionData(RectangleEdge.left, RectangleEdge.top), _a$1[DirectionalHint.leftCenter] = _createPositionData(RectangleEdge.left), _a$1[DirectionalHint.leftBottomEdge] = _createPositionData(RectangleEdge.left, RectangleEdge.bottom), _a$1[DirectionalHint.rightTopEdge] = _createPositionData(RectangleEdge.right, RectangleEdge.top), _a$1[DirectionalHint.rightCenter] = _createPositionData(RectangleEdge.right), _a$1[DirectionalHint.rightBottomEdge] = _createPositionData(RectangleEdge.right, RectangleEdge.bottom), _a$1);
-function _isRectangleWithinBounds(rect, boundingRect) {
-  if (rect.top < boundingRect.top) {
-    return false;
-  }
-  if (rect.bottom > boundingRect.bottom) {
-    return false;
-  }
-  if (rect.left < boundingRect.left) {
-    return false;
-  }
-  if (rect.right > boundingRect.right) {
-    return false;
-  }
-  return true;
-}
-/**
- * Gets all of the edges of a rectangle that are outside of the given bounds.
- * If there are no out of bounds edges it returns an empty array.
- */
-function _getOutOfBoundsEdges(rect, boundingRect) {
-  var outOfBounds = new Array();
-  if (rect.top < boundingRect.top) {
-    outOfBounds.push(RectangleEdge.top);
-  }
-  if (rect.bottom > boundingRect.bottom) {
-    outOfBounds.push(RectangleEdge.bottom);
-  }
-  if (rect.left < boundingRect.left) {
-    outOfBounds.push(RectangleEdge.left);
-  }
-  if (rect.right > boundingRect.right) {
-    outOfBounds.push(RectangleEdge.right);
-  }
-  return outOfBounds;
-}
-function _getEdgeValue(rect, edge) {
-  return rect[RectangleEdge[edge]];
-}
-function _setEdgeValue(rect, edge, value) {
-  rect[RectangleEdge[edge]] = value;
-  return rect;
-}
-/**
- * Returns the middle value of an edge. Only returns 1 value rather than xy coordinates as
- * the itself already contains the other coordinate.
- * For instance, a bottom edge's current value is it's y coordinate, so the number returned is the x.
- */
-function _getCenterValue(rect, edge) {
-  var edges = _getFlankingEdges(edge);
-  return (_getEdgeValue(rect, edges.positiveEdge) + _getEdgeValue(rect, edges.negativeEdge)) / 2;
-}
-/**
- * Flips the value depending on the edge.
- * If the edge is a "positive" edge, Top or Left, then the value should stay as it is.
- * If the edge is a "negative" edge, Bottom or Right, then the value should be flipped.
- * This is to account for the fact that the coordinates are effectively reveserved in certain cases for the
- * "negative" edges.
- *
- * For example, when testing to see if a bottom edge 1 is within the bounds of another bottom edge 2:
- * If edge 1 is greater than edge 2 then it is out of bounds. This is reversed for top edge 1 and top edge 2.
- * If top edge 1 is less than edge 2 then it is out of bounds.
- */
-function _getRelativeEdgeValue(edge, value) {
-  if (edge > 0) {
-    return value;
-  } else {
-    return value * -1;
-  }
-}
-function _getRelativeRectEdgeValue(edge, rect) {
-  return _getRelativeEdgeValue(edge, _getEdgeValue(rect, edge));
-}
-function _getRelativeEdgeDifference(rect, hostRect, edge) {
-  var edgeDifference = _getEdgeValue(rect, edge) - _getEdgeValue(hostRect, edge);
-  return _getRelativeEdgeValue(edge, edgeDifference);
-}
-/**
- * Moves the edge of a rectangle to the value given. It only moves the edge in a linear direction based on that edge.
- * For example, if it's a bottom edge it will only change y coordinates.
- */
-function _moveEdge(rect, edge, newValue) {
-  var difference = _getEdgeValue(rect, edge) - newValue;
-  rect = _setEdgeValue(rect, edge, newValue);
-  rect = _setEdgeValue(rect, edge * -1, _getEdgeValue(rect, edge * -1) - difference);
-  return rect;
-}
-/**
- * Aligns the edge on the passed in rect to the target. If there is a gap then it will have that space between the two.
- */
-function _alignEdges(rect, target, edge, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-  return _moveEdge(rect, edge, _getEdgeValue(target, edge) + _getRelativeEdgeValue(edge, gap));
-}
-/**
- * Aligns the targetEdge on the passed in target to the rects corresponding opposite edge.
- * For instance if targetEdge is bottom, then the rects top will be moved to match it.
- */
-function _alignOppositeEdges(rect, target, targetEdge, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-  var oppositeEdge = targetEdge * -1;
-  var adjustedGap = _getRelativeEdgeValue(oppositeEdge, gap);
-  return _moveEdge(rect, targetEdge * -1, _getEdgeValue(target, targetEdge) + adjustedGap);
-}
-/**
- * Tests to see if the given edge is within the bounds of the given rectangle.
- */
-function _isEdgeInBounds(rect, bounds, edge) {
-  var adjustedRectValue = _getRelativeRectEdgeValue(edge, rect);
-  return adjustedRectValue > _getRelativeRectEdgeValue(edge, bounds);
-}
-/**
- * Attempts to move the rectangle through various sides of the target to find a place to fit.
- * If no fit is found, the original position should be returned.
- */
-function _flipToFit(rect, target, bounding, positionData, gap) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-  var directions = [RectangleEdge.left, RectangleEdge.right, RectangleEdge.bottom, RectangleEdge.top];
-  // In RTL page, RectangleEdge.right has a higher priority than RectangleEdge.left, so the order should be updated.
-  if (getRTL()) {
-    directions[0] *= -1;
-    directions[1] *= -1;
-  }
-  var currentEstimate = rect;
-  var currentEdge = positionData.targetEdge;
-  var currentAlignment = positionData.alignmentEdge;
-  // Keep switching sides until one is found with enough space.
-  // If all sides don't fit then return the unmodified element.
-  for (var i = 0; i < 4; i++) {
-    if (!_isEdgeInBounds(currentEstimate, bounding, currentEdge)) {
-      directions.splice(directions.indexOf(currentEdge), 1);
-      if (directions.length > 0) {
-        if (directions.indexOf(currentEdge * -1) > -1) {
-          currentEdge = currentEdge * -1;
-        } else {
-          currentAlignment = currentEdge;
-          currentEdge = directions.slice(-1)[0];
-        }
-        currentEstimate = _estimatePosition(rect, target, {
-          targetEdge: currentEdge,
-          alignmentEdge: currentAlignment
-        }, gap);
-      }
-    } else {
-      return {
-        elementRectangle: currentEstimate,
-        targetEdge: currentEdge,
-        alignmentEdge: currentAlignment
-      };
-    }
-  }
-  return {
-    elementRectangle: rect,
-    targetEdge: positionData.targetEdge,
-    alignmentEdge: currentAlignment
-  };
-}
-/**
- * Flips only the alignment edge of an element rectangle. This is used instead of nudging the alignment edges
- * into position, when alignTargetEdge is specified.
- */
-function _flipAlignmentEdge(elementEstimate, target, gap, coverTarget) {
-  var alignmentEdge = elementEstimate.alignmentEdge,
-    targetEdge = elementEstimate.targetEdge,
-    elementRectangle = elementEstimate.elementRectangle;
-  var oppositeEdge = alignmentEdge * -1;
-  var newEstimate = _estimatePosition(elementRectangle, target, {
-    targetEdge: targetEdge,
-    alignmentEdge: oppositeEdge
-  }, gap, coverTarget);
-  return {
-    elementRectangle: newEstimate,
-    targetEdge: targetEdge,
-    alignmentEdge: oppositeEdge
-  };
-}
-/**
- * Adjusts a element rectangle to fit within the bounds given. If directionalHintFixed or covertarget is passed in
- * then the element will not flip sides on the target. They will, however, be nudged to fit within the bounds given.
- */
-function _adjustFitWithinBounds(element, target, bounding, positionData, gap, directionalHintFixed, coverTarget) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-  var alignmentEdge = positionData.alignmentEdge,
-    alignTargetEdge = positionData.alignTargetEdge;
-  var elementEstimate = {
-    elementRectangle: element,
-    targetEdge: positionData.targetEdge,
-    alignmentEdge: alignmentEdge
-  };
-  if (!directionalHintFixed && !coverTarget) {
-    elementEstimate = _flipToFit(element, target, bounding, positionData, gap);
-  }
-  var outOfBounds = _getOutOfBoundsEdges(element, bounding);
-  if (alignTargetEdge) {
-    // The edge opposite to the alignment edge might be out of bounds.
-    // Flip alignment to see if we can get it within bounds.
-    if (elementEstimate.alignmentEdge && outOfBounds.indexOf(elementEstimate.alignmentEdge * -1) > -1) {
-      var flippedElementEstimate = _flipAlignmentEdge(elementEstimate, target, gap, coverTarget);
-      if (_isRectangleWithinBounds(flippedElementEstimate.elementRectangle, bounding)) {
-        return flippedElementEstimate;
-      } else {
-        // If the flipped elements edges are still out of bounds, try nudging it.
-        elementEstimate = _alignOutOfBoundsEdges(_getOutOfBoundsEdges(flippedElementEstimate.elementRectangle, bounding), elementEstimate, bounding);
-      }
-    }
-  } else {
-    elementEstimate = _alignOutOfBoundsEdges(outOfBounds, elementEstimate, bounding);
-  }
-  return elementEstimate;
-}
-/**
- * Iterates through a list of out of bounds edges and tries to nudge and align them.
- * @param outOfBoundsEdges - Array of edges that are out of bounds
- * @param elementEstimate - The current element positioning estimate
- * @param bounding - The current bounds
- */
-function _alignOutOfBoundsEdges(outOfBoundsEdges, elementEstimate, bounding) {
-  for (var _i = 0, outOfBoundsEdges_1 = outOfBoundsEdges; _i < outOfBoundsEdges_1.length; _i++) {
-    var direction = outOfBoundsEdges_1[_i];
-    elementEstimate.elementRectangle = _alignEdges(elementEstimate.elementRectangle, bounding, direction);
-  }
-  return elementEstimate;
-}
-/**
- * Moves the middle point on an edge to the point given.
- * Only moves in one direction. For instance if a bottom edge is passed in, then
- * the bottom edge will be moved in the x axis to match the point.
- */
-function _centerEdgeToPoint(rect, edge, point) {
-  var positiveEdge = _getFlankingEdges(edge).positiveEdge;
-  var elementMiddle = _getCenterValue(rect, edge);
-  var distanceToMiddle = elementMiddle - _getEdgeValue(rect, positiveEdge);
-  return _moveEdge(rect, positiveEdge, point - distanceToMiddle);
-}
-/**
- * Moves the element rectangle to be appropriately positioned relative to a given target.
- * Does not flip or adjust the element.
- */
-function _estimatePosition(elementToPosition, target, positionData, gap, coverTarget) {
-  if (gap === void 0) {
-    gap = 0;
-  }
-  var estimatedElementPosition;
-  var alignmentEdge = positionData.alignmentEdge,
-    targetEdge = positionData.targetEdge;
-  var elementEdge = coverTarget ? targetEdge : targetEdge * -1;
-  estimatedElementPosition = coverTarget ? _alignEdges(elementToPosition, target, targetEdge, gap) : _alignOppositeEdges(elementToPosition, target, targetEdge, gap);
-  // if no alignment edge is provided it's supposed to be centered.
-  if (!alignmentEdge) {
-    var targetMiddlePoint = _getCenterValue(target, targetEdge);
-    estimatedElementPosition = _centerEdgeToPoint(estimatedElementPosition, elementEdge, targetMiddlePoint);
-  } else {
-    estimatedElementPosition = _alignEdges(estimatedElementPosition, target, alignmentEdge);
-  }
-  return estimatedElementPosition;
-}
-/**
- * Returns the non-opposite edges of the target edge.
- * For instance if bottom is passed in then left and right will be returned.
- */
-function _getFlankingEdges(edge) {
-  if (edge === RectangleEdge.top || edge === RectangleEdge.bottom) {
-    return {
-      positiveEdge: RectangleEdge.left,
-      negativeEdge: RectangleEdge.right
-    };
-  } else {
-    return {
-      positiveEdge: RectangleEdge.top,
-      negativeEdge: RectangleEdge.bottom
-    };
-  }
-}
-/**
- * Retrieve the final value for the return edge of elementRectangle. If the elementRectangle is closer to one side
- * of the bounds versus the other, the return edge is flipped to grow inward.
- */
-function _finalizeReturnEdge(elementRectangle, returnEdge, bounds) {
-  if (bounds && Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge)) > Math.abs(_getRelativeEdgeDifference(elementRectangle, bounds, returnEdge * -1))) {
-    return returnEdge * -1;
-  }
-  return returnEdge;
-}
-/**
- * Finalizes the element positon based on the hostElement. Only returns the
- * rectangle values to position such that they are anchored to the target.
- * This helps prevent resizing from looking very strange.
- * For instance, if the target edge is top and aligned with the left side then
- * the bottom and left values are returned so as the callou shrinks it shrinks towards that corner.
- */
-function _finalizeElementPosition(elementRectangle, hostElement, targetEdge, bounds, alignmentEdge, coverTarget, doNotFinalizeReturnEdge) {
-  var returnValue = {};
-  var hostRect = _getRectangleFromElement(hostElement);
-  var elementEdge = coverTarget ? targetEdge : targetEdge * -1;
-  var elementEdgeString = RectangleEdge[elementEdge];
-  var returnEdge = alignmentEdge ? alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge;
-  if (!doNotFinalizeReturnEdge) {
-    returnEdge = _finalizeReturnEdge(elementRectangle, returnEdge, bounds);
-  }
-  returnValue[elementEdgeString] = _getRelativeEdgeDifference(elementRectangle, hostRect, elementEdge);
-  returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(elementRectangle, hostRect, returnEdge);
-  return returnValue;
-}
-// Since the beak is rotated 45 degrees the actual height/width is the length of the diagonal.
-// We still want to position the beak based on it's midpoint which does not change. It will
-// be at (beakwidth / 2, beakwidth / 2)
-function _calculateActualBeakWidthInPixels(beakWidth) {
-  return Math.sqrt(beakWidth * beakWidth * 2);
-}
-/**
- * Returns the appropriate IPositionData based on the props altered for RTL.
- * If directionalHintForRTL is passed in that is used if the page is RTL.
- * If directionalHint is specified, no directionalHintForRTL is available, and the page is RTL, the hint will be
- * flipped (e.g. bottomLeftEdge would become bottomRightEdge).
- *
- * If there is no directionalHint passed in, bottomAutoEdge is chosen automatically.
- */
-function _getPositionData(directionalHint, directionalHintForRTL, previousPositions) {
-  if (directionalHint === void 0) {
-    directionalHint = DirectionalHint.bottomAutoEdge;
-  }
-  if (previousPositions) {
-    return {
-      alignmentEdge: previousPositions.alignmentEdge,
-      isAuto: previousPositions.isAuto,
-      targetEdge: previousPositions.targetEdge
-    };
-  }
-  var positionInformation = __assign$6({}, DirectionalDictionary[directionalHint]);
-  if (getRTL()) {
-    // If alignment edge exists and that alignment edge is -2 or 2, right or left, then flip it.
-    if (positionInformation.alignmentEdge && positionInformation.alignmentEdge % 2 === 0) {
-      positionInformation.alignmentEdge = positionInformation.alignmentEdge * -1;
-    }
-    return directionalHintForRTL !== undefined ? DirectionalDictionary[directionalHintForRTL] : positionInformation;
-  }
-  return positionInformation;
-}
-/**
- * Get's the alignment data for the given information. This only really matters if the positioning is Auto.
- * If it is auto then the alignmentEdge should be chosen based on the target edge's position relative to
- * the center of the page.
- */
-function _getAlignmentData(positionData, target, boundingRect, coverTarget, alignTargetEdge) {
-  if (positionData.isAuto) {
-    positionData.alignmentEdge = getClosestEdge(positionData.targetEdge, target, boundingRect);
-  }
-  positionData.alignTargetEdge = alignTargetEdge;
-  return positionData;
-}
-function getClosestEdge(targetEdge, target, boundingRect) {
-  var targetCenter = _getCenterValue(target, targetEdge);
-  var boundingCenter = _getCenterValue(boundingRect, targetEdge);
-  var _a = _getFlankingEdges(targetEdge),
-    positiveEdge = _a.positiveEdge,
-    negativeEdge = _a.negativeEdge;
-  if (targetCenter <= boundingCenter) {
-    return positiveEdge;
-  } else {
-    return negativeEdge;
-  }
-}
-function _positionElementWithinBounds(elementToPosition, target, bounding, positionData, gap, directionalHintFixed, coverTarget) {
-  var estimatedElementPosition = _estimatePosition(elementToPosition, target, positionData, gap, coverTarget);
-  if (_isRectangleWithinBounds(estimatedElementPosition, bounding)) {
-    return {
-      elementRectangle: estimatedElementPosition,
-      targetEdge: positionData.targetEdge,
-      alignmentEdge: positionData.alignmentEdge
-    };
-  } else {
-    return _adjustFitWithinBounds(elementToPosition, target, bounding, positionData, gap, directionalHintFixed, coverTarget);
-  }
-}
-function _finalizeBeakPosition(elementPosition, positionedBeak, bounds) {
-  var targetEdge = elementPosition.targetEdge * -1;
-  // The "host" element that we will use to help position the beak.
-  var actualElement = new Rectangle(0, elementPosition.elementRectangle.width, 0, elementPosition.elementRectangle.height);
-  var returnValue = {};
-  var returnEdge = _finalizeReturnEdge(elementPosition.elementRectangle, elementPosition.alignmentEdge ? elementPosition.alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge, bounds);
-  returnValue[RectangleEdge[targetEdge]] = _getEdgeValue(positionedBeak, targetEdge);
-  returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(positionedBeak, actualElement, returnEdge);
-  return {
-    elementPosition: __assign$6({}, returnValue),
-    closestEdge: getClosestEdge(elementPosition.targetEdge, positionedBeak, actualElement),
-    targetEdge: targetEdge
-  };
-}
-function _positionBeak(beakWidth, elementPosition) {
-  var target = elementPosition.targetRectangle;
-  /**
-   * Note about beak positioning: The actual beak width only matters for getting the gap between the callout and
-   * target, it does not impact the beak placement within the callout. For example example, if the beakWidth is 8,
-   * then the actual beakWidth is sqrroot(8^2 + 8^2) = 11.31x11.31. So the callout will need to be an extra 3 pixels
-   * away from its target. While the beak is being positioned in the callout it still acts as though it were 8x8.
-   */
-  var _a = _getFlankingEdges(elementPosition.targetEdge),
-    positiveEdge = _a.positiveEdge,
-    negativeEdge = _a.negativeEdge;
-  var beakTargetPoint = _getCenterValue(target, elementPosition.targetEdge);
-  var elementBounds = new Rectangle(beakWidth / 2, elementPosition.elementRectangle.width - beakWidth / 2, beakWidth / 2, elementPosition.elementRectangle.height - beakWidth / 2);
-  var beakPosition = new Rectangle(0, beakWidth, 0, beakWidth);
-  beakPosition = _moveEdge(beakPosition, elementPosition.targetEdge * -1, -beakWidth / 2);
-  beakPosition = _centerEdgeToPoint(beakPosition, elementPosition.targetEdge * -1, beakTargetPoint - _getRelativeRectEdgeValue(positiveEdge, elementPosition.elementRectangle));
-  if (!_isEdgeInBounds(beakPosition, elementBounds, positiveEdge)) {
-    beakPosition = _alignEdges(beakPosition, elementBounds, positiveEdge);
-  } else if (!_isEdgeInBounds(beakPosition, elementBounds, negativeEdge)) {
-    beakPosition = _alignEdges(beakPosition, elementBounds, negativeEdge);
-  }
-  return beakPosition;
-}
-function _getRectangleFromElement(element) {
-  var clientRect = element.getBoundingClientRect();
-  return new Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom);
-}
-function _getRectangleFromIRect(rect) {
-  return new Rectangle(rect.left, rect.right, rect.top, rect.bottom);
-}
-function _getTargetRect(bounds, target) {
-  var targetRectangle;
-  if (target) {
-    if (!!target.preventDefault) {
-      var ev = target;
-      targetRectangle = new Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
-    } else if (!!target.getBoundingClientRect) {
-      targetRectangle = _getRectangleFromElement(target);
-      // HTMLImgElements can have x and y values. The check for it being a point must go last.
-    } else {
-      var point = target;
-      targetRectangle = new Rectangle(point.x, point.x, point.y, point.y);
-    }
-    if (!_isRectangleWithinBounds(targetRectangle, bounds)) {
-      var outOfBounds = _getOutOfBoundsEdges(targetRectangle, bounds);
-      for (var _i = 0, outOfBounds_1 = outOfBounds; _i < outOfBounds_1.length; _i++) {
-        var direction = outOfBounds_1[_i];
-        targetRectangle[RectangleEdge[direction]] = bounds[RectangleEdge[direction]];
-      }
-    }
-  } else {
-    targetRectangle = new Rectangle(0, 0, 0, 0);
-  }
-  return targetRectangle;
-}
-/**
- * If max height is less than zero it returns the bounds height instead.
- */
-function _getMaxHeightFromTargetRectangle(targetRectangle, targetEdge, gapSpace, bounds, coverTarget) {
-  var maxHeight = 0;
-  var directionalHint = DirectionalDictionary[targetEdge];
-  // If cover target is set, then the max height should be calculated using the opposite of the target edge since
-  // that's the direction that the callout will expand in.
-  // For instance, if the directionalhint is bottomLeftEdge then the callout will position so it's bottom edge
-  // is aligned with the bottom of the target and expand up towards the top of the screen and the calculated max height
-  // is (bottom of target) - (top of screen) - gapSpace.
-  var target = coverTarget ? directionalHint.targetEdge * -1 : directionalHint.targetEdge;
-  if (target === RectangleEdge.top) {
-    maxHeight = _getEdgeValue(targetRectangle, directionalHint.targetEdge) - bounds.top - gapSpace;
-  } else if (target === RectangleEdge.bottom) {
-    maxHeight = bounds.bottom - _getEdgeValue(targetRectangle, directionalHint.targetEdge) - gapSpace;
-  } else {
-    maxHeight = bounds.bottom - targetRectangle.top - gapSpace;
-  }
-  return maxHeight > 0 ? maxHeight : bounds.height;
-}
-function _positionElementRelative(props, elementToPosition, boundingRect, previousPositions) {
-  var gap = props.gapSpace ? props.gapSpace : 0;
-  var targetRect = _getTargetRect(boundingRect, props.target);
-  var positionData = _getAlignmentData(_getPositionData(props.directionalHint, props.directionalHintForRTL, previousPositions), targetRect, boundingRect, props.coverTarget, props.alignTargetEdge);
-  var positionedElement = _positionElementWithinBounds(_getRectangleFromElement(elementToPosition), targetRect, boundingRect, positionData, gap, props.directionalHintFixed, props.coverTarget);
-  return __assign$6(__assign$6({}, positionedElement), {
-    targetRectangle: targetRect
-  });
-}
-function _finalizePositionData(positionedElement, hostElement, bounds, coverTarget, doNotFinalizeReturnEdge) {
-  var finalizedElement = _finalizeElementPosition(positionedElement.elementRectangle, hostElement, positionedElement.targetEdge, bounds, positionedElement.alignmentEdge, coverTarget, doNotFinalizeReturnEdge);
-  return {
-    elementPosition: finalizedElement,
-    targetEdge: positionedElement.targetEdge,
-    alignmentEdge: positionedElement.alignmentEdge
-  };
-}
-function _positionCallout(props, hostElement, callout, previousPositions, doNotFinalizeReturnEdge) {
-  var beakWidth = props.isBeakVisible ? props.beakWidth || 0 : 0;
-  var gap = _calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0);
-  var positionProps = props;
-  positionProps.gapSpace = gap;
-  var boundingRect = props.bounds ? _getRectangleFromIRect(props.bounds) : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);
-  var positionedElement = _positionElementRelative(positionProps, callout, boundingRect, previousPositions);
-  var beakPositioned = _positionBeak(beakWidth, positionedElement);
-  var finalizedBeakPosition = _finalizeBeakPosition(positionedElement, beakPositioned, boundingRect);
-  return __assign$6(__assign$6({}, _finalizePositionData(positionedElement, hostElement, boundingRect, props.coverTarget, doNotFinalizeReturnEdge)), {
-    beakPosition: finalizedBeakPosition
-  });
-}
-function _positionCard(props, hostElement, callout, previousPositions) {
-  return _positionCallout(props, hostElement, callout, previousPositions, true);
-}
-function positionCallout(props, hostElement, elementToPosition, previousPositions) {
-  return _positionCallout(props, hostElement, elementToPosition, previousPositions);
-}
-function positionCard(props, hostElement, elementToPosition, previousPositions) {
-  return _positionCard(props, hostElement, elementToPosition, previousPositions);
-}
-/**
- * Get's the maximum height that a rectangle can have in order to fit below or above a target.
- * If the directional hint specifies a left or right edge (i.e. leftCenter) it will limit the height to the topBorder
- * of the target given.
- * If no bounds are provided then the window is treated as the bounds.
- */
-function getMaxHeight(target, targetEdge, gapSpace, bounds, coverTarget) {
-  if (gapSpace === void 0) {
-    gapSpace = 0;
-  }
-  var mouseTarget = target;
-  var elementTarget = target;
-  var pointTarget = target;
-  var targetRect;
-  var boundingRectangle = bounds ? _getRectangleFromIRect(bounds) : new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);
-  if (!!mouseTarget.stopPropagation) {
-    targetRect = new Rectangle(mouseTarget.clientX, mouseTarget.clientX, mouseTarget.clientY, mouseTarget.clientY);
-  } else if (pointTarget.x !== undefined && pointTarget.y !== undefined) {
-    targetRect = new Rectangle(pointTarget.x, pointTarget.x, pointTarget.y, pointTarget.y);
-  } else {
-    targetRect = _getRectangleFromElement(elementTarget);
-  }
-  return _getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle, coverTarget);
-}
-
-/**
- * This adds accessibility to Dialog and Panel controls
- */
-var Popup = /** @class */function (_super) {
-  __extends$2(Popup, _super);
-  function Popup(props) {
-    var _this = _super.call(this, props) || this;
-    _this._root = React__namespace.createRef();
-    _this._disposables = [];
-    _this._onKeyDown = function (ev) {
-      switch (ev.which) {
-        case KeyCodes.escape:
-          if (_this.props.onDismiss) {
-            _this.props.onDismiss(ev);
-            ev.preventDefault();
-            ev.stopPropagation();
-          }
-          break;
-      }
-    };
-    _this._onFocus = function () {
-      _this._containsFocus = true;
-    };
-    _this._onBlur = function (ev) {
-      /** The popup should update this._containsFocus when:
-       * relatedTarget exists AND
-       * the relatedTarget is not contained within the popup.
-       * If the relatedTarget is within the popup, that means the popup still has focus
-       * and focused moved from one element to another within the popup.
-       * If relatedTarget is undefined or null that usually means that a
-       * keyboard event occured and focus didn't change
-       */
-      if (_this._root.current && ev.relatedTarget && !_this._root.current.contains(ev.relatedTarget)) {
-        _this._containsFocus = false;
-      }
-    };
-    _this._async = new Async(_this);
-    _this.state = {
-      needsVerticalScrollBar: false
-    };
-    return _this;
-  }
-  // tslint:disable-next-line function-name
-  Popup.prototype.UNSAFE_componentWillMount = function () {
-    this._originalFocusedElement = getDocument().activeElement;
-  };
-  Popup.prototype.componentDidMount = function () {
-    if (this._root.current) {
-      this._disposables.push(on(this._root.current, 'focus', this._onFocus, true), on(this._root.current, 'blur', this._onBlur, true));
-      var currentWindow = getWindow$1(this._root.current);
-      if (currentWindow) {
-        this._disposables.push(on(currentWindow, 'keydown', this._onKeyDown));
-      }
-      if (doesElementContainFocus(this._root.current)) {
-        this._containsFocus = true;
-      }
-    }
-    this._updateScrollBarAsync();
-  };
-  Popup.prototype.componentDidUpdate = function () {
-    this._updateScrollBarAsync();
-    this._async.dispose();
-  };
-  Popup.prototype.componentWillUnmount = function () {
-    this._disposables.forEach(function (dispose) {
-      return dispose();
-    });
-    if (this.props.shouldRestoreFocus && this._originalFocusedElement && this._containsFocus && this._originalFocusedElement !== window) {
-      // This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
-      // apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
-      // to reset the focus back to the thing it thinks should have been focused.
-      if (this._originalFocusedElement) {
-        this._originalFocusedElement.focus();
-      }
-    }
-    // De-reference DOM Node to avoid retainment via transpiled closure of _onKeyDown
-    delete this._originalFocusedElement;
-  };
-  Popup.prototype.render = function () {
-    var _a = this.props,
-      role = _a.role,
-      className = _a.className,
-      ariaLabel = _a.ariaLabel,
-      ariaLabelledBy = _a.ariaLabelledBy,
-      ariaDescribedBy = _a.ariaDescribedBy,
-      style = _a.style;
-    return React__namespace.createElement("div", __assign$6({
-      ref: this._root
-    }, getNativeProps(this.props, divProperties), {
-      className: className,
-      role: role,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      onKeyDown: this._onKeyDown,
-      style: __assign$6({
-        overflowY: this.state.needsVerticalScrollBar ? 'scroll' : undefined,
-        outline: 'none'
-      }, style)
-    }), this.props.children);
-  };
-  Popup.prototype._updateScrollBarAsync = function () {
-    var _this = this;
-    this._async.requestAnimationFrame(function () {
-      _this._getScrollBar();
-    });
-  };
-  Popup.prototype._getScrollBar = function () {
-    // If overflowY is overriden, don't waste time calculating whether the scrollbar is necessary.
-    if (this.props.style && this.props.style.overflowY) {
-      return;
-    }
-    var needsVerticalScrollBar = false;
-    if (this._root && this._root.current && this._root.current.firstElementChild) {
-      // ClientHeight returns the client height of an element rounded to an
-      // integer. On some browsers at different zoom levels this rounding
-      // can generate different results for the root container and child even
-      // though they are the same height. This causes us to show a scroll bar
-      // when not needed. Ideally we would use BoundingClientRect().height
-      // instead however seems that the API is 90% slower than using ClientHeight.
-      // Therefore instead we will calculate the difference between heights and
-      // allow for a 1px difference to still be considered ok and not show the
-      // scroll bar.
-      var rootHeight = this._root.current.clientHeight;
-      var firstChildHeight = this._root.current.firstElementChild.clientHeight;
-      if (rootHeight > 0 && firstChildHeight > rootHeight) {
-        needsVerticalScrollBar = firstChildHeight - rootHeight > 1;
-      }
-    }
-    if (this.state.needsVerticalScrollBar !== needsVerticalScrollBar) {
-      this.setState({
-        needsVerticalScrollBar: needsVerticalScrollBar
-      });
-    }
-  };
-  Popup.defaultProps = {
-    shouldRestoreFocus: true
-  };
-  return Popup;
-}(React__namespace.Component);
-
-var _a;
-var ANIMATIONS = (_a = {}, _a[RectangleEdge.top] = AnimationClassNames.slideUpIn10, _a[RectangleEdge.bottom] = AnimationClassNames.slideDownIn10, _a[RectangleEdge.left] = AnimationClassNames.slideLeftIn10, _a[RectangleEdge.right] = AnimationClassNames.slideRightIn10, _a);
-var getClassNames$3 = classNamesFunction({
-  disableCaching: true
-});
-var BEAK_ORIGIN_POSITION = {
-  top: 0,
-  left: 0
-};
-// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.
-// To help ensure that edge will respect the offscreen style opacity
-// filter needs to be added as an additional way to set opacity.
-var OFF_SCREEN_STYLE = {
-  opacity: 0,
-  filter: 'opacity(0)'
-};
-// role and role description go hand-in-hand. Both would be included by spreading getNativeProps for a basic element
-// This constant array can be used to filter these out of native props spread on callout root and apply them together on
-// calloutMain (the Popup component within the callout)
-var ARIA_ROLE_ATTRIBUTES = ['role', 'aria-roledescription'];
-var CalloutContentBase = /** @class */function (_super) {
-  __extends$2(CalloutContentBase, _super);
-  function CalloutContentBase(props) {
-    var _this = _super.call(this, props) || this;
-    _this._hostElement = React__namespace.createRef();
-    _this._calloutElement = React__namespace.createRef();
-    _this._hasListeners = false;
-    _this._disposables = [];
-    _this.dismiss = function (ev) {
-      var onDismiss = _this.props.onDismiss;
-      if (onDismiss) {
-        onDismiss(ev);
-      }
-    };
-    _this._dismissOnScroll = function (ev) {
-      var preventDismissOnScroll = _this.props.preventDismissOnScroll;
-      if (_this.state.positions && !preventDismissOnScroll) {
-        _this._dismissOnClickOrScroll(ev);
-      }
-    };
-    _this._dismissOnResize = function (ev) {
-      var preventDismissOnResize = _this.props.preventDismissOnResize;
-      if (!preventDismissOnResize) {
-        _this.dismiss(ev);
-      }
-    };
-    _this._dismissOnLostFocus = function (ev) {
-      var preventDismissOnLostFocus = _this.props.preventDismissOnLostFocus;
-      if (!preventDismissOnLostFocus) {
-        _this._dismissOnClickOrScroll(ev);
-      }
-    };
-    _this._setInitialFocus = function () {
-      if (_this.props.setInitialFocus && !_this._didSetInitialFocus && _this.state.positions && _this._calloutElement.current) {
-        _this._didSetInitialFocus = true;
-        _this._async.requestAnimationFrame(function () {
-          return focusFirstChild(_this._calloutElement.current);
-        }, _this._calloutElement.current);
-      }
-    };
-    _this._onComponentDidMount = function () {
-      _this._addListeners();
-      if (_this.props.onLayerMounted) {
-        _this.props.onLayerMounted();
-      }
-      _this._updateAsyncPosition();
-      _this._setHeightOffsetEveryFrame();
-    };
-    _this._mouseDownOnPopup = function () {
-      _this._isMouseDownOnPopup = true;
-    };
-    _this._mouseUpOnPopup = function () {
-      _this._isMouseDownOnPopup = false;
-    };
-    _this._async = new Async(_this);
-    _this._didSetInitialFocus = false;
-    _this.state = {
-      positions: undefined,
-      slideDirectionalClassName: undefined,
-      // @TODO it looks like this is not even being used anymore.
-      calloutElementRect: undefined,
-      heightOffset: 0
-    };
-    _this._positionAttempts = 0;
-    return _this;
-  }
-  CalloutContentBase.prototype.componentDidUpdate = function () {
-    if (!this.props.hidden) {
-      this._setInitialFocus();
-      if (!this._hasListeners) {
-        this._addListeners();
-      }
-      this._updateAsyncPosition();
-    } else {
-      if (this._hasListeners) {
-        this._removeListeners();
-      }
-    }
-  };
-  CalloutContentBase.prototype.shouldComponentUpdate = function (newProps, newState) {
-    if (!newProps.shouldUpdateWhenHidden && this.props.hidden && newProps.hidden) {
-      // Do not update when hidden.
-      return false;
-    }
-    return !shallowCompare(this.props, newProps) || !shallowCompare(this.state, newState);
-  };
-  // tslint:disable-next-line function-name
-  CalloutContentBase.prototype.UNSAFE_componentWillMount = function () {
-    this._setTargetWindowAndElement(this._getTarget());
-  };
-  CalloutContentBase.prototype.componentWillUnmount = function () {
-    this._async.dispose();
-    this._disposables.forEach(function (dispose) {
-      return dispose();
-    });
-  };
-  // tslint:disable-next-line function-name
-  CalloutContentBase.prototype.UNSAFE_componentWillUpdate = function (newProps) {
-    // If the target element changed, find the new one. If we are tracking target with class name, always find element
-    // because we do not know if fabric has rendered a new element and disposed the old element.
-    var newTarget = this._getTarget(newProps);
-    var oldTarget = this._getTarget();
-    if ((newTarget !== oldTarget || typeof newTarget === 'string' || newTarget instanceof String) && !this._blockResetHeight) {
-      this._maxHeight = undefined;
-      this._setTargetWindowAndElement(newTarget);
-    }
-    if (newProps.gapSpace !== this.props.gapSpace || this.props.beakWidth !== newProps.beakWidth) {
-      this._maxHeight = undefined;
-    }
-    if (newProps.finalHeight !== this.props.finalHeight) {
-      this._setHeightOffsetEveryFrame();
-    }
-    // Ensure positioning is recalculated when we are about to show a persisted menu.
-    if (this._didPositionPropsChange(newProps, this.props)) {
-      this._maxHeight = undefined;
-      // Target might have been updated while hidden.
-      this._setTargetWindowAndElement(newTarget);
-      this.setState({
-        positions: undefined
-      });
-      this._didSetInitialFocus = false;
-      this._bounds = undefined;
-    }
-    this._blockResetHeight = false;
-  };
-  CalloutContentBase.prototype.componentDidMount = function () {
-    if (!this.props.hidden) {
-      this._onComponentDidMount();
-    }
-  };
-  CalloutContentBase.prototype.render = function () {
-    // If there is no target window then we are likely in server side rendering and we should not render anything.
-    if (!this._targetWindow) {
-      return null;
-    }
-    var target = this.props.target;
-    var _a = this.props,
-      styles = _a.styles,
-      style = _a.style,
-      ariaLabel = _a.ariaLabel,
-      ariaDescribedBy = _a.ariaDescribedBy,
-      ariaLabelledBy = _a.ariaLabelledBy,
-      className = _a.className,
-      isBeakVisible = _a.isBeakVisible,
-      children = _a.children,
-      beakWidth = _a.beakWidth,
-      calloutWidth = _a.calloutWidth,
-      calloutMaxWidth = _a.calloutMaxWidth,
-      finalHeight = _a.finalHeight,
-      _b = _a.hideOverflow,
-      hideOverflow = _b === void 0 ? !!finalHeight : _b,
-      backgroundColor = _a.backgroundColor,
-      calloutMaxHeight = _a.calloutMaxHeight,
-      onScroll = _a.onScroll,
-      _c = _a.shouldRestoreFocus,
-      shouldRestoreFocus = _c === void 0 ? true : _c;
-    target = this._getTarget();
-    var positions = this.state.positions;
-    var getContentMaxHeight = this._getMaxHeight() ? this._getMaxHeight() + this.state.heightOffset : undefined;
-    var contentMaxHeight = calloutMaxHeight && getContentMaxHeight && calloutMaxHeight < getContentMaxHeight ? calloutMaxHeight : getContentMaxHeight;
-    var overflowYHidden = hideOverflow;
-    var beakVisible = isBeakVisible && !!target;
-    this._classNames = getClassNames$3(styles, {
-      theme: this.props.theme,
-      className: className,
-      overflowYHidden: overflowYHidden,
-      calloutWidth: calloutWidth,
-      positions: positions,
-      beakWidth: beakWidth,
-      backgroundColor: backgroundColor,
-      calloutMaxWidth: calloutMaxWidth
-    });
-    var overflowStyle = __assign$6(__assign$6(__assign$6({}, style), {
-      maxHeight: contentMaxHeight
-    }), overflowYHidden && {
-      overflowY: 'hidden'
-    });
-    var visibilityStyle = this.props.hidden ? {
-      visibility: 'hidden'
-    } : undefined;
-    // React.CSSProperties does not understand IRawStyle, so the inline animations will need to be cast as any for now.
-    var content = React__namespace.createElement("div", {
-      ref: this._hostElement,
-      className: this._classNames.container,
-      style: visibilityStyle
-    }, React__namespace.createElement("div", __assign$6({}, getNativeProps(this.props, divProperties, ARIA_ROLE_ATTRIBUTES), {
-      className: css(this._classNames.root, positions && positions.targetEdge && ANIMATIONS[positions.targetEdge]),
-      style: positions ? positions.elementPosition : OFF_SCREEN_STYLE,
-      // Safari and Firefox on Mac OS requires this to back-stop click events so focus remains in the Callout.
-      // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-      tabIndex: -1,
-      ref: this._calloutElement
-    }), beakVisible && React__namespace.createElement("div", {
-      className: this._classNames.beak,
-      style: this._getBeakPosition()
-    }), beakVisible && React__namespace.createElement("div", {
-      className: this._classNames.beakCurtain
-    }), React__namespace.createElement(Popup, __assign$6({}, getNativeProps(this.props, ARIA_ROLE_ATTRIBUTES), {
-      ariaLabel: ariaLabel,
-      ariaDescribedBy: ariaDescribedBy,
-      ariaLabelledBy: ariaLabelledBy,
-      className: this._classNames.calloutMain,
-      onDismiss: this.dismiss,
-      onScroll: onScroll,
-      shouldRestoreFocus: shouldRestoreFocus,
-      style: overflowStyle,
-      onMouseDown: this._mouseDownOnPopup,
-      onMouseUp: this._mouseUpOnPopup
-    }), children)));
-    return content;
-  };
-  CalloutContentBase.prototype._dismissOnClickOrScroll = function (ev) {
-    var target = ev.target;
-    var isEventTargetOutsideCallout = this._hostElement.current && !elementContains(this._hostElement.current, target);
-    // If mouse is pressed down on callout but moved outside then released, don't dismiss the callout.
-    if (isEventTargetOutsideCallout && this._isMouseDownOnPopup) {
-      this._isMouseDownOnPopup = false;
-      return;
-    }
-    if (!this._target && isEventTargetOutsideCallout || ev.target !== this._targetWindow && isEventTargetOutsideCallout && (this._target.stopPropagation || !this._target || target !== this._target && !elementContains(this._target, target))) {
-      this.dismiss(ev);
-    }
-  };
-  CalloutContentBase.prototype._addListeners = function () {
-    var _this = this;
-    // This is added so the callout will dismiss when the window is scrolled
-    // but not when something inside the callout is scrolled. The delay seems
-    // to be required to avoid React firing an async focus event in IE from
-    // the target changing focus quickly prior to rendering the callout.
-    this._async.setTimeout(function () {
-      _this._disposables.push(on(_this._targetWindow, 'scroll', _this._dismissOnScroll, true), on(_this._targetWindow, 'resize', _this._dismissOnResize, true), on(_this._targetWindow.document.documentElement, 'focus', _this._dismissOnLostFocus, true), on(_this._targetWindow.document.documentElement, 'click', _this._dismissOnLostFocus, true));
-      _this._hasListeners = true;
-    }, 0);
-  };
-  CalloutContentBase.prototype._removeListeners = function () {
-    this._disposables.forEach(function (dispose) {
-      return dispose();
-    });
-    this._disposables = [];
-    this._hasListeners = false;
-  };
-  CalloutContentBase.prototype._updateAsyncPosition = function () {
-    var _this = this;
-    this._async.requestAnimationFrame(function () {
-      return _this._updatePosition();
-    }, this._calloutElement.current);
-  };
-  CalloutContentBase.prototype._getBeakPosition = function () {
-    var positions = this.state.positions;
-    var beakPostionStyle = __assign$6({}, positions && positions.beakPosition ? positions.beakPosition.elementPosition : null);
-    if (!beakPostionStyle.top && !beakPostionStyle.bottom && !beakPostionStyle.left && !beakPostionStyle.right) {
-      beakPostionStyle.left = BEAK_ORIGIN_POSITION.left;
-      beakPostionStyle.top = BEAK_ORIGIN_POSITION.top;
-    }
-    return beakPostionStyle;
-  };
-  CalloutContentBase.prototype._updatePosition = function () {
-    // Try to update the target, page might have changed
-    this._setTargetWindowAndElement(this._getTarget());
-    var positions = this.state.positions;
-    var hostElement = this._hostElement.current;
-    var calloutElement = this._calloutElement.current;
-    // If we expect a target element to position against, we need to wait until `this._target` is resolved. Otherwise
-    // we can try to position.
-    var expectsTarget = !!this.props.target;
-    if (hostElement && calloutElement && (!expectsTarget || this._target)) {
-      var currentProps = void 0;
-      currentProps = assign(currentProps, this.props);
-      currentProps.bounds = this._getBounds();
-      currentProps.target = this._target;
-      // If there is a finalHeight given then we assume that the user knows and will handle
-      // additional positioning adjustments so we should call positionCard
-      var newPositions = this.props.finalHeight ? positionCard(currentProps, hostElement, calloutElement, positions) : positionCallout(currentProps, hostElement, calloutElement, positions);
-      // Set the new position only when the positions are not exists or one of the new callout positions are different.
-      // The position should not change if the position is within 2 decimal places.
-      if (!positions && newPositions || positions && newPositions && !this._arePositionsEqual(positions, newPositions) && this._positionAttempts < 5) {
-        // We should not reposition the callout more than a few times, if it is then the content is likely resizing
-        // and we should stop trying to reposition to prevent a stack overflow.
-        this._positionAttempts++;
-        this.setState({
-          positions: newPositions
-        });
-      } else if (this._positionAttempts > 0) {
-        // Only call the onPositioned callback if the callout has been re-positioned at least once.
-        this._positionAttempts = 0;
-        if (this.props.onPositioned) {
-          this.props.onPositioned(this.state.positions);
-        }
-      }
-    }
-  };
-  CalloutContentBase.prototype._getBounds = function () {
-    if (!this._bounds) {
-      var bounds = this.props.bounds;
-      var currentBounds = typeof bounds === 'function' ? bounds(this.props.target, this._targetWindow) : bounds;
-      if (!currentBounds) {
-        currentBounds = {
-          top: 0 + this.props.minPagePadding,
-          left: 0 + this.props.minPagePadding,
-          right: this._targetWindow.innerWidth - this.props.minPagePadding,
-          bottom: this._targetWindow.innerHeight - this.props.minPagePadding,
-          width: this._targetWindow.innerWidth - this.props.minPagePadding * 2,
-          height: this._targetWindow.innerHeight - this.props.minPagePadding * 2
-        };
-      }
-      this._bounds = currentBounds;
-    }
-    return this._bounds;
-  };
-  // Max height should remain as synchronous as possible, which is why it is not done using set state.
-  // It needs to be synchronous since it will impact the ultimate position of the callout.
-  CalloutContentBase.prototype._getMaxHeight = function () {
-    var _this = this;
-    if (!this._maxHeight) {
-      if (this.props.directionalHintFixed && this._target) {
-        var beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
-        var gapSpace = this.props.gapSpace ? this.props.gapSpace : 0;
-        // Since the callout cannot measure it's border size it must be taken into account here. Otherwise it will
-        // overlap with the target.
-        var totalGap_1 = gapSpace + beakWidth;
-        this._async.requestAnimationFrame(function () {
-          if (_this._target) {
-            _this._maxHeight = getMaxHeight(_this._target, _this.props.directionalHint, totalGap_1, _this._getBounds(), _this.props.coverTarget);
-            _this._blockResetHeight = true;
-            _this.forceUpdate();
-          }
-        }, this._target);
-      } else {
-        this._maxHeight = this._getBounds().height;
-      }
-    }
-    return this._maxHeight;
-  };
-  CalloutContentBase.prototype._arePositionsEqual = function (positions, newPosition) {
-    return this._comparePositions(positions.elementPosition, newPosition.elementPosition) && this._comparePositions(positions.beakPosition.elementPosition, newPosition.beakPosition.elementPosition);
-  };
-  CalloutContentBase.prototype._comparePositions = function (oldPositions, newPositions) {
-    for (var key in newPositions) {
-      if (newPositions.hasOwnProperty(key)) {
-        var oldPositionEdge = oldPositions[key];
-        var newPositionEdge = newPositions[key];
-        if (oldPositionEdge !== undefined && newPositionEdge !== undefined) {
-          if (oldPositionEdge.toFixed(2) !== newPositionEdge.toFixed(2)) {
-            return false;
-          }
-        } else {
-          return false;
-        }
-      }
-    }
-    return true;
-  };
-  CalloutContentBase.prototype._setTargetWindowAndElement = function (target) {
-    var currentElement = this._calloutElement.current;
-    if (target) {
-      if (typeof target === 'string') {
-        var currentDoc = getDocument(currentElement);
-        this._target = currentDoc ? currentDoc.querySelector(target) : null;
-        this._targetWindow = getWindow$1(currentElement);
-      } else if (!!target.stopPropagation) {
-        this._targetWindow = getWindow$1(target.target);
-        this._target = target;
-      } else if (!!target.getBoundingClientRect) {
-        var targetElement = target;
-        this._targetWindow = getWindow$1(targetElement);
-        this._target = target;
-      } else if (target.current !== undefined) {
-        this._target = target.current;
-        this._targetWindow = getWindow$1(this._target);
-        // HTMLImgElements can have x and y values. The check for it being a point must go last.
-      } else {
-        this._targetWindow = getWindow$1(currentElement);
-        this._target = target;
-      }
-    } else {
-      this._targetWindow = getWindow$1(currentElement);
-    }
-  };
-  CalloutContentBase.prototype._setHeightOffsetEveryFrame = function () {
-    var _this = this;
-    if (this._calloutElement.current && this.props.finalHeight) {
-      this._setHeightOffsetTimer = this._async.requestAnimationFrame(function () {
-        var calloutMainElem = _this._calloutElement.current && _this._calloutElement.current.lastChild;
-        if (!calloutMainElem) {
-          return;
-        }
-        var cardScrollHeight = calloutMainElem.scrollHeight;
-        var cardCurrHeight = calloutMainElem.offsetHeight;
-        var scrollDiff = cardScrollHeight - cardCurrHeight;
-        _this.setState({
-          heightOffset: _this.state.heightOffset + scrollDiff
-        });
-        if (calloutMainElem.offsetHeight < _this.props.finalHeight) {
-          _this._setHeightOffsetEveryFrame();
-        } else {
-          _this._async.cancelAnimationFrame(_this._setHeightOffsetTimer, _this._calloutElement.current);
-        }
-      }, this._calloutElement.current);
-    }
-  };
-  // Whether or not the current positions should be reset
-  CalloutContentBase.prototype._didPositionPropsChange = function (newProps, oldProps) {
-    return !newProps.hidden && newProps.hidden !== oldProps.hidden || newProps.directionalHint !== oldProps.directionalHint;
-  };
-  CalloutContentBase.prototype._getTarget = function (props) {
-    if (props === void 0) {
-      props = this.props;
-    }
-    var target = props.target;
-    return target;
-  };
-  CalloutContentBase.defaultProps = {
-    preventDismissOnLostFocus: false,
-    preventDismissOnScroll: false,
-    preventDismissOnResize: false,
-    isBeakVisible: true,
-    beakWidth: 16,
-    gapSpace: 0,
-    minPagePadding: 8,
-    directionalHint: DirectionalHint.bottomAutoEdge
-  };
-  return CalloutContentBase;
-}(React__namespace.Component);
-
-function getBeakStyle(beakWidth) {
-  return {
-    height: beakWidth,
-    width: beakWidth
-  };
-}
-var GlobalClassNames$2 = {
-  container: 'ms-Callout-container',
-  root: 'ms-Callout',
-  beak: 'ms-Callout-beak',
-  beakCurtain: 'ms-Callout-beakCurtain',
-  calloutMain: 'ms-Callout-main'
-};
-var getStyles$3 = function (props) {
-  var _a;
-  var theme = props.theme,
-    className = props.className,
-    overflowYHidden = props.overflowYHidden,
-    calloutWidth = props.calloutWidth,
-    beakWidth = props.beakWidth,
-    backgroundColor = props.backgroundColor,
-    calloutMaxWidth = props.calloutMaxWidth;
-  var classNames = getGlobalClassNames(GlobalClassNames$2, theme);
-  var semanticColors = theme.semanticColors,
-    effects = theme.effects;
-  return {
-    container: [classNames.container, {
-      position: 'relative'
-    }],
-    root: [classNames.root, theme.fonts.medium, {
-      position: 'absolute',
-      boxSizing: 'border-box',
-      borderRadius: effects.roundedCorner2,
-      boxShadow: effects.elevation16,
-      selectors: (_a = {}, _a[HighContrastSelector] = {
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'WindowText'
-      }, _a)
-    }, focusClear(), className, !!calloutWidth && {
-      width: calloutWidth
-    }, !!calloutMaxWidth && {
-      maxWidth: calloutMaxWidth
-    }],
-    beak: [classNames.beak, {
-      position: 'absolute',
-      backgroundColor: semanticColors.menuBackground,
-      boxShadow: 'inherit',
-      border: 'inherit',
-      boxSizing: 'border-box',
-      transform: 'rotate(45deg)'
-    }, getBeakStyle(beakWidth), backgroundColor && {
-      backgroundColor: backgroundColor
-    }],
-    beakCurtain: [classNames.beakCurtain, {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      backgroundColor: semanticColors.menuBackground,
-      borderRadius: effects.roundedCorner2
-    }],
-    calloutMain: [classNames.calloutMain, {
-      backgroundColor: semanticColors.menuBackground,
-      overflowX: 'hidden',
-      overflowY: 'auto',
-      position: 'relative',
-      borderRadius: effects.roundedCorner2
-    }, overflowYHidden && {
-      overflowY: 'hidden'
-    }, backgroundColor && {
-      backgroundColor: backgroundColor
-    }]
-  };
-};
-
-var CalloutContent = styled(CalloutContentBase, getStyles$3, undefined, {
-  scope: 'CalloutContent'
-});
-
-var inheritFont = {
-  fontFamily: 'inherit'
-};
-var GlobalClassNames$1 = {
-  root: 'ms-Fabric',
-  bodyThemed: 'ms-Fabric-bodyThemed'
-};
-var getStyles$2 = function (props) {
-  var theme = props.theme,
-    className = props.className,
-    applyTheme = props.applyTheme;
-  var classNames = getGlobalClassNames(GlobalClassNames$1, theme);
-  return {
-    root: [classNames.root, theme.fonts.medium, {
-      color: theme.palette.neutralPrimary,
-      selectors: {
-        '& button': inheritFont,
-        '& input': inheritFont,
-        '& textarea': inheritFont
-      }
-    },
-    // apply theme to only if applyTheme is true
-    applyTheme && {
-      color: theme.semanticColors.bodyText,
-      backgroundColor: theme.semanticColors.bodyBackground
-    }, className],
-    bodyThemed: [{
-      backgroundColor: theme.semanticColors.bodyBackground
-    }]
-  };
-};
-
-var getClassNames$2 = classNamesFunction();
-var getFabricTheme = memoizeFunction(function (theme, isRTL) {
-  return createTheme(__assign$6(__assign$6({}, theme), {
-    rtl: isRTL
-  }));
-});
-var getDir = memoizeFunction(function (theme, dir) {
-  if (dir) {
-    return dir;
-  }
-  if (theme && theme.rtl !== undefined) {
-    return theme.rtl ? 'rtl' : 'ltr';
-  }
-  return getRTL() ? 'rtl' : 'ltr';
-});
-var FabricBase = /** @class */function (_super) {
-  __extends$2(FabricBase, _super);
-  function FabricBase() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this._rootElement = React__namespace.createRef();
-    _this._removeClassNameFromBody = undefined;
-    return _this;
-  }
-  FabricBase.prototype.render = function () {
-    var _a = this.props,
-      _b = _a.as,
-      Root = _b === void 0 ? 'div' : _b,
-      theme = _a.theme,
-      dir = _a.dir;
-    var classNames = this._getClassNames();
-    var divProps = getNativeProps(this.props, divProperties, ['dir']);
-    var componentDir = getDir(theme, dir);
-    var parentDir = getDir(theme);
-    var renderedContent = React__namespace.createElement(Root, __assign$6({
-      dir: componentDir
-    }, divProps, {
-      className: classNames.root,
-      ref: this._rootElement
-    }));
-    // Create the contextual theme if component direction does not match parent direction.
-    if (componentDir !== parentDir) {
-      renderedContent = React__namespace.createElement(Customizer, {
-        settings: {
-          theme: getFabricTheme(theme, dir === 'rtl')
-        }
-      }, renderedContent);
-    }
-    return React__namespace.createElement(React__namespace.Fragment, null, renderedContent, React__namespace.createElement(FocusRects, {
-      rootRef: this._rootElement
-    }));
-  };
-  FabricBase.prototype.componentDidMount = function () {
-    this._addClassNameToBody();
-  };
-  FabricBase.prototype.componentWillUnmount = function () {
-    if (this._removeClassNameFromBody) {
-      this._removeClassNameFromBody();
-    }
-  };
-  FabricBase.prototype._getClassNames = function () {
-    var _a = this.props,
-      className = _a.className,
-      theme = _a.theme,
-      applyTheme = _a.applyTheme;
-    var classNames = getClassNames$2(getStyles$2, {
-      theme: theme,
-      applyTheme: applyTheme,
-      className: className
-    });
-    return classNames;
-  };
-  FabricBase.prototype._addClassNameToBody = function () {
-    if (this.props.applyThemeToBody) {
-      var classNames_1 = this._getClassNames();
-      var currentDoc_1 = getDocument(this._rootElement.current);
-      if (currentDoc_1) {
-        currentDoc_1.body.classList.add(classNames_1.bodyThemed);
-        this._removeClassNameFromBody = function () {
-          currentDoc_1.body.classList.remove(classNames_1.bodyThemed);
-        };
-      }
-    }
-  };
-  return FabricBase;
-}(React__namespace.Component);
-
-var Fabric = styled(FabricBase, getStyles$2, undefined, {
-  scope: 'Fabric'
-});
-
-var _layersByHostId = {};
-var _defaultHostSelector;
-/**
- * Register a layer for a given host id
- * @param hostId Id of the layer host
- * @param layer Layer instance
- */
-function registerLayer(hostId, callback) {
-  if (!_layersByHostId[hostId]) {
-    _layersByHostId[hostId] = [];
-  }
-  _layersByHostId[hostId].push(callback);
-}
-/**
- * Unregister a layer for a given host id
- * @param hostId Id of the layer host
- * @param layer Layer instance
- */
-function unregisterLayer(hostId, callback) {
-  if (_layersByHostId[hostId]) {
-    var idx = _layersByHostId[hostId].indexOf(callback);
-    if (idx >= 0) {
-      _layersByHostId[hostId].splice(idx, 1);
-      if (_layersByHostId[hostId].length === 0) {
-        delete _layersByHostId[hostId];
-      }
-    }
-  }
-}
-/**
- * Get the default target selector when determining a host
- */
-function getDefaultTarget() {
-  return _defaultHostSelector;
-}
-
-var getClassNames$1 = classNamesFunction();
-var LayerBase = /** @class */function (_super) {
-  __extends$2(LayerBase, _super);
-  function LayerBase(props) {
-    var _this = _super.call(this, props) || this;
-    _this._rootRef = React__namespace.createRef();
-    _this._createLayerElement = function () {
-      var hostId = _this.props.hostId;
-      var doc = getDocument(_this._rootRef.current);
-      var host = _this._getHost();
-      if (!doc || !host) {
-        return;
-      }
-      // If one was already existing, remove.
-      _this._removeLayerElement();
-      var layerElement = doc.createElement('div');
-      var classNames = _this._getClassNames();
-      layerElement.className = classNames.root;
-      setPortalAttribute(layerElement);
-      setVirtualParent(layerElement, _this._rootRef.current);
-      _this.props.insertFirst ? host.insertBefore(layerElement, host.firstChild) : host.appendChild(layerElement);
-      _this.setState({
-        hostId: hostId,
-        layerElement: layerElement
-      }, function () {
-        // tslint:disable-next-line:deprecation
-        var _a = _this.props,
-          onLayerDidMount = _a.onLayerDidMount,
-          onLayerMounted = _a.onLayerMounted;
-        if (onLayerMounted) {
-          onLayerMounted();
-        }
-        if (onLayerDidMount) {
-          onLayerDidMount();
-        }
-      });
-    };
-    _this.state = {};
-    if (process.env.NODE_ENV !== 'production') {
-      warnDeprecations('Layer', props, {
-        onLayerMounted: 'onLayerDidMount'
-      });
-    }
-    return _this;
-  }
-  LayerBase.prototype.componentDidMount = function () {
-    var hostId = this.props.hostId;
-    this._createLayerElement();
-    if (hostId) {
-      registerLayer(hostId, this._createLayerElement);
-    }
-  };
-  LayerBase.prototype.render = function () {
-    var layerElement = this.state.layerElement;
-    var classNames = this._getClassNames();
-    var eventBubblingEnabled = this.props.eventBubblingEnabled;
-    return React__namespace.createElement("span", {
-      className: "ms-layer",
-      ref: this._rootRef
-    }, layerElement && ReactDOM__namespace.createPortal(React__namespace.createElement(Fabric, __assign$6({}, !eventBubblingEnabled && _getFilteredEvents(), {
-      className: classNames.content
-    }), this.props.children), layerElement));
-  };
-  LayerBase.prototype.componentDidUpdate = function () {
-    if (this.props.hostId !== this.state.hostId) {
-      this._createLayerElement();
-    }
-  };
-  LayerBase.prototype.componentWillUnmount = function () {
-    var hostId = this.props.hostId;
-    this._removeLayerElement();
-    if (hostId) {
-      unregisterLayer(hostId, this._createLayerElement);
-    }
-  };
-  LayerBase.prototype._removeLayerElement = function () {
-    var onLayerWillUnmount = this.props.onLayerWillUnmount;
-    var layerElement = this.state.layerElement;
-    if (onLayerWillUnmount) {
-      onLayerWillUnmount();
-    }
-    if (layerElement && layerElement.parentNode) {
-      var parentNode = layerElement.parentNode;
-      if (parentNode) {
-        parentNode.removeChild(layerElement);
-      }
-    }
-  };
-  LayerBase.prototype._getClassNames = function () {
-    var _a = this.props,
-      className = _a.className,
-      styles = _a.styles,
-      theme = _a.theme;
-    var classNames = getClassNames$1(styles, {
-      theme: theme,
-      className: className,
-      isNotHost: !this.props.hostId
-    });
-    return classNames;
-  };
-  LayerBase.prototype._getHost = function () {
-    var hostId = this.props.hostId;
-    var doc = getDocument(this._rootRef.current);
-    if (!doc) {
-      return undefined;
-    }
-    if (hostId) {
-      return doc.getElementById(hostId);
-    } else {
-      var defaultHostSelector = getDefaultTarget();
-      return defaultHostSelector ? doc.querySelector(defaultHostSelector) : doc.body;
-    }
-  };
-  LayerBase.defaultProps = {
-    onLayerDidMount: function () {
-      return undefined;
-    },
-    onLayerWillUnmount: function () {
-      return undefined;
-    }
-  };
-  LayerBase = __decorate([customizable('Layer', ['theme', 'hostId'])], LayerBase);
-  return LayerBase;
-}(React__namespace.Component);
-var _onFilterEvent = function (ev) {
-  // We should just be able to check ev.bubble here and only stop events that are bubbling up. However, even though
-  // mouseenter and mouseleave do NOT bubble up, they are showing up as bubbling. Therefore we stop events based on
-  // event name rather than ev.bubble.
-  if (ev.eventPhase === Event.BUBBLING_PHASE && ev.type !== 'mouseenter' && ev.type !== 'mouseleave' && ev.type !== 'touchstart' && ev.type !== 'touchend') {
-    ev.stopPropagation();
-  }
-};
-var _filteredEventProps;
-function _getFilteredEvents() {
-  if (!_filteredEventProps) {
-    _filteredEventProps = {};
-    ['onClick', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOver', 'onMouseOut', 'onMouseUp', 'onTouchMove', 'onTouchStart', 'onTouchCancel', 'onTouchEnd', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onFocus', 'onBlur', 'onChange', 'onInput', 'onInvalid', 'onSubmit'].forEach(function (name) {
-      return _filteredEventProps[name] = _onFilterEvent;
-    });
-  }
-  return _filteredEventProps;
-}
-
-var GlobalClassNames = {
-  root: 'ms-Layer',
-  rootNoHost: 'ms-Layer--fixed',
-  content: 'ms-Layer-content'
-};
-var getStyles$1 = function (props) {
-  var className = props.className,
-    isNotHost = props.isNotHost,
-    theme = props.theme;
-  var classNames = getGlobalClassNames(GlobalClassNames, theme);
-  return {
-    root: [classNames.root, theme.fonts.medium, isNotHost && [classNames.rootNoHost, {
-      position: 'fixed',
-      zIndex: ZIndexes.Layer,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      visibility: 'hidden'
-    }], className],
-    content: [classNames.content, {
-      visibility: 'visible'
-    }]
-  };
-};
-
-var Layer = styled(LayerBase, getStyles$1, undefined, {
-  scope: 'Layer',
-  fields: ['hostId', 'theme', 'styles']
-});
-
-var Callout = /** @class */function (_super) {
-  __extends$2(Callout, _super);
-  function Callout() {
-    return _super !== null && _super.apply(this, arguments) || this;
-  }
-  Callout.prototype.render = function () {
-    var _a = this.props,
-      layerProps = _a.layerProps,
-      rest = __rest$1(_a, ["layerProps"]);
-    var content = React__namespace.createElement(CalloutContent, __assign$6({}, rest));
-    return this.props.doNotLayer ? content : React__namespace.createElement(Layer, __assign$6({}, layerProps), content);
-  };
-  return Callout;
-}(React__namespace.Component);
-
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -22266,7 +19725,7 @@ var hiddenParentStyles = {
 };
 var COMPONENT_NAME$1 = 'ResizeGroup';
 var ResizeGroupBase = /** @class */function (_super) {
-  __extends$2(ResizeGroupBase, _super);
+  __extends$1(ResizeGroupBase, _super);
   function ResizeGroupBase(props) {
     var _this = _super.call(this, props) || this;
     _this._nextResizeGroupStateProvider = getNextResizeGroupStateProvider();
@@ -22394,7 +19853,7 @@ var ResizeGroup = ResizeGroupBase;
 var getClassNames = classNamesFunction();
 var COMPONENT_NAME = 'OverflowSet';
 var OverflowSetBase = /** @class */function (_super) {
-  __extends$2(OverflowSetBase, _super);
+  __extends$1(OverflowSetBase, _super);
   function OverflowSetBase(props) {
     var _this = _super.call(this, props) || this;
     _this._focusZone = React__namespace.createRef();
@@ -23822,48 +21281,37 @@ FeedbackDialog.defaultProps = {
   }
 };
 
-var css_248z$j = ".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: 0;\r\n  position: relative;\r\n  width: 48px;\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--yard {\r\n  width: 60px;\r\n  grid-gap: 5px;\r\n  gap: 5px;\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: 16px;\r\n  font-weight: 600;\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\r\n  /* position: relative;\r\n  top: 2px; */\r\n  /* margin-left: 10px; */\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: 0px;\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: 402px;\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: 50px;\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: 40vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 50px);\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: 50vw;\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: 22px;\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: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--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";
+var css_248z$j = ".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  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 50px);\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  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: 22px;\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: 16px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer.utilities_ops-app-frame_AppBarComponent_AppBar--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";
 styleInject(css_248z$j);
 
 var LogOutMenu = function LogOutMenu(_ref) {
-  var items = _ref.items,
-    onItemClick = _ref.onItemClick;
-  React.useEffect(function () {
-    var iconEl = document.querySelector(".ms-Icon.root-37.ms-Icon-placeHolder.placeholder-38.ms-Button-menuIcon.menuIcon-95");
-    if (iconEl) {
-      iconEl.remove();
-    }
-    var icon = document.querySelector(".utilities_ops-app-frame_AppBarComponent_AppBar--item .ms-Button.ms-Button--icon.ms-Button--hasMenu.root-90");
-    if (icon) {
-      icon.style.width = '24px';
-    }
-  }, []);
+  _ref.items;
+    var onItemClick = _ref.onItemClick;
+  // useEffect(()=>{
+  //   const iconEl=document.querySelector(".ms-Icon.root-37.ms-Icon-placeHolder.placeholder-38.ms-Button-menuIcon.menuIcon-95")
+  //   if(iconEl){
+  //     iconEl.remove()
+  //   }
+  //   const icon = document.querySelector(".utilities_ops-app-frame_AppBarComponent_AppBar--item .ms-Button.ms-Button--icon.ms-Button--hasMenu.root-90")
+  //   if(icon){
+  //     icon.style.width='24px'
+  //   }
+  // },[])
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-testid": "Logout",
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--item",
-    "data-e2e": "userMenu"
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconDropdownMenu, {
-    items: items,
-    onItemClick: onItemClick,
-    icon: /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
-      name: "user-circle",
-      variant: "solid",
-      style: {
-        position: "absolute"
-      }
-    }),
-    iconStyle: {
-      fontSize: '30px',
-      color: 'white'
-    },
-    position: 'bottomCenter'
+    "data-e2e": "userMenu",
+    onClick: onItemClick
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+    name: "user-circle",
+    variant: "solid"
   }));
 };
 
 var css_248z$i = ".utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogo {\r\n  max-width: 80px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogoNew {\r\n  max-width: 120px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--logoLink {\r\n  line-height: 0;\r\n}\r\n";
 styleInject(css_248z$i);
 
-var _styleModuleImportMap$8 = {
+var _styleModuleImportMap$7 = {
   "./CopartLogo.css": {
     "CopartLogo": "utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogo",
     "CopartLogoNew": "utilities_ops-app-frame_AppBarComponent_CopartLogo_CopartLogo--CopartLogoNew",
@@ -23879,7 +21327,7 @@ var CopartLogo = function CopartLogo() {
     href: "/"
   }, /*#__PURE__*/React__namespace.createElement("img", {
     src: imageSrc,
-    className: _getClassName(enableNewToolkitFeatures ? "CopartLogoNew" : "CopartLogo", _styleModuleImportMap$8, {
+    className: _getClassName(enableNewToolkitFeatures ? "CopartLogoNew" : "CopartLogo", _styleModuleImportMap$7, {
       "handleMissingStyleName": "warn"
     })
   }));
@@ -24081,10 +21529,10 @@ var unEscapeChars = function unEscapeChars(str) {
   }) : null;
 };
 
-var css_248z$h = ".utilities_ops-app-frame_Help_Help--backdrop {\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, 0.5);\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--miHelpSideBar {\r\n  width: 50vw;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 50px);\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  color: #323130;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--title {\r\n  font-weight: 600;\r\n  font-size: 28px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header {\r\n  margin-bottom: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close i,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle .utilities_ops-app-frame_Help_Help--back {\r\n  color: #1d5ab9;\r\n  margin-right: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -5px;\r\n  left: 3px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper {\r\n  margin-top: 20px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3 i {\r\n  color: #1d5ab9;\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -8px;\r\n  cursor: pointer;\r\n  left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul {\r\n  list-style: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  margin: 6px 0;\r\n  display: flex;\r\n  cursor: pointer;\r\n  width: -webkit-fit-content;\r\n  width: -moz-fit-content;\r\n  width: fit-content;\r\n  align-items: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li:hover,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li img,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li img {\r\n  width: 17px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper .utilities_ops-app-frame_Help_Help--viewMore {\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper {\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper span {\r\n  position: absolute;\r\n  width: 29px;\r\n  height: 29px;\r\n  background: #f3f2f1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  bottom: 1.5px;\r\n  right: 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--mihelpSearch {\r\n  width: 100%;\r\n  margin-top: 15px;\r\n  padding: 0px 10px;\r\n  height: 32px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult {\r\n  width: 100%;\r\n  margin-top: 20px;\r\n  border-bottom: 1px solid #dcdcdc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult p {\r\n  margin-top: 13px;\r\n  margin-bottom: 30px;\r\n  text-overflow: ellipsis;\r\n  width: 100%;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--spinnerWrapper {\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_Help_Help--spinnerWrapper svg {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--overFlowHidden {\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--nonInteractive {\r\n  opacity: 0.3;\r\n  pointer-events: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitlewrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeswrapper {\r\n  color: #cbcbcb;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like {\r\n  margin-left: 10px;\r\n  font-size: 10px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like i {\r\n  font-size: 14px;\r\n  margin-right: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle img {\r\n  width: 18px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span {\r\n  font-weight: 600;\r\n  font-size: 18px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper {\r\n  width: 100%;\r\n  margin-top: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper h3 {\r\n  font-weight: 300;\r\n  font-size: 34px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--faqsList {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category h3 {\r\n  color: #1d5ab9;\r\n  font-weight: 600;\r\n  font-size: 24px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian {\r\n  border-top: 1px solid #dcdcdc;\r\n  padding-top: 13px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question {\r\n  font-weight: 400;\r\n  font-size: 20px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question span {\r\n  transition: all 0.2s ease-out;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--answer {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  height: auto;\r\n  max-height: 0;\r\n  transition: max-height 0.2s ease-out;\r\n  overflow: hidden;\r\n  margin-top: 13px;\r\n  white-space: normal;\r\n}\r\n\r\n/* .accordian .answer span {\r\n    white-space: break-spaces;\r\n  } */\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote .utilities_ops-app-frame_Help_Help--releaseNoteContent {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle .utilities_ops-app-frame_Help_Help--helpArticleWrapper {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--articleFooter {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-top: 30px;\r\n  padding-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--likeTxt {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  margin-right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--thanksText {\r\n  color: rgb(45, 206, 137);\r\n  font-weight: bold;\r\n  font-size: 16px;\r\n  margin-left: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper textarea {\r\n  width: 300px;\r\n  height: 100px;\r\n  resize: none;\r\n  display: block;\r\n  margin-bottom: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper h5 {\r\n  font-size: 18px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper span {\r\n  background-color: rgb(29, 90, 185);\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  cursor: pointer;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  color: #2dce89;\r\n  margin-right: 6px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg {\r\n  border: 1px solid #2dce89 !important;\r\n  padding: 5px;\r\n  height: 30px;\r\n  width: 30px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover {\r\n  background-color: #2dce89;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg path,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover path {\r\n  fill: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike {\r\n  color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike svg {\r\n  border: 1px solid #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--dislike svg:hover {\r\n  background-color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper {\r\n  font-style: italic;\r\n  /* font-weight: 700; */\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper b {\r\n  font-weight: 700;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper span {\r\n  font-weight: 400;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper {\r\n  width: 100%;\r\n  border-top: 1px solid #edebe9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper {\r\n  width: 100%;\r\n  border: 1px solid #dcdcdc;\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  margin-top: 50px;\r\n  position: relative;\r\n  text-align: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper.utilities_ops-app-frame_Help_Help--noFlex {\r\n  display: block;\r\n  text-align: left;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h2 {\r\n  font-size: 34px !important;\r\n  margin-bottom: 6px !important;\r\n  margin-top: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p {\r\n  font-size: 14px !important;\r\n  margin-bottom: 3px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p img {\r\n  position: relative;\r\n  top: 2px;\r\n  margin-left: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn {\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n  font-size: 12px;\r\n  cursor: pointer;\r\n  margin-top: 7px;\r\n  border-radius: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn.utilities_ops-app-frame_Help_Help--disable {\r\n  pointer-events: none;\r\n  cursor: default;\r\n  background-color: #ccc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: absolute;\r\n  top: 0px;\r\n  right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h3 {\r\n  font-weight: 800 !important;\r\n  font-size: 20px !important;\r\n  line-height: 27px !important;\r\n  color: #1d5ab9 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper label,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper label {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  color: #000100;\r\n  margin: 10px 0;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper textarea {\r\n  resize: none;\r\n  height: 125px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--highlightRed {\r\n  font-weight: 600;\r\n  color: #f5365c;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--successMsg {\r\n  color: #1d5ab9;\r\n  font-size: 20px !important;\r\n  margin-top: 12px;\r\n  margin-bottom: 20px !important;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent {\r\n  max-width: 700px;\r\n  min-width: 600px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  background: #edebe9;\r\n  padding: 10px 20px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogBody {\r\n  padding: 20px 20px 30px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader h3 {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  -webkit-text-decoration-line: underline;\r\n          text-decoration-line: underline;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -6px;\r\n  right: -1px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive {\r\n  padding: 22px;\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  font-size: 32px !important;\r\n  width: 100% !important;\r\n  border-radius: 10px;\r\n  align-items: center !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive:hover{\r\n  color: #fff !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive img {\r\n  width: 65px !important;\r\n  margin-right: 25px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--releaseTitle {\r\n  flex: 1;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--checkNow {\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n  align-self: end;\r\n}\r\n";
+var css_248z$h = ".utilities_ops-app-frame_Help_Help--backdrop {\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, 0.5);\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--miHelpSideBar {\r\n  width: 400px;\r\n  position: absolute;\r\n  right: 0;\r\n  height: calc(100vh - 50px);\r\n  padding: 15px;\r\n  background-color: white;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  color: #323130;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--title {\r\n  font-weight: 600;\r\n  font-size: 28px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header {\r\n  margin-bottom: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--header .utilities_ops-app-frame_Help_Help--close i,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close i {\r\n  font-size: 14px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeader {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--subHeaderTitle .utilities_ops-app-frame_Help_Help--back {\r\n  color: #1d5ab9;\r\n  margin-right: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--link i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -5px;\r\n  left: 3px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper {\r\n  margin-top: 20px;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper h3 i {\r\n  color: #1d5ab9;\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -8px;\r\n  cursor: pointer;\r\n  left: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul {\r\n  list-style: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  margin: 6px 0;\r\n  display: flex;\r\n  cursor: pointer;\r\n  width: -webkit-fit-content;\r\n  width: -moz-fit-content;\r\n  width: fit-content;\r\n  align-items: flex-start;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li:hover,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper ul li img,\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper ul li img {\r\n  width: 17px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpResourcesWrapper .utilities_ops-app-frame_Help_Help--viewMore {\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper {\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchWrapper span {\r\n  position: absolute;\r\n  width: 29px;\r\n  height: 29px;\r\n  background: #f3f2f1;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  bottom: 1.5px;\r\n  right: 2px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--mihelpSearch {\r\n  width: 100%;\r\n  margin-top: 15px;\r\n  padding: 0px 10px;\r\n  height: 32px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 8px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult {\r\n  width: 100%;\r\n  margin-top: 20px;\r\n  border-bottom: 1px solid #dcdcdc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchResultsWrapper .utilities_ops-app-frame_Help_Help--searchResult p {\r\n  margin-top: 13px;\r\n  margin-bottom: 30px;\r\n  text-overflow: ellipsis;\r\n  width: 100%;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--spinnerWrapper {\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_Help_Help--spinnerWrapper svg {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--overFlowHidden {\r\n  overflow: hidden;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--nonInteractive {\r\n  opacity: 0.3;\r\n  pointer-events: none;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitlewrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeswrapper {\r\n  color: #cbcbcb;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like {\r\n  margin-left: 10px;\r\n  font-size: 10px;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--like i {\r\n  font-size: 14px;\r\n  margin-right: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle {\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle img {\r\n  width: 18px;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span {\r\n  font-weight: 600;\r\n  font-size: 18px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--searchTitle span:hover {\r\n  color: #1d5ab9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper {\r\n  width: 100%;\r\n  margin-top: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper h3 {\r\n  font-weight: 300;\r\n  font-size: 34px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--faqsList {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--faqContentWrapper .utilities_ops-app-frame_Help_Help--category h3 {\r\n  color: #1d5ab9;\r\n  font-weight: 600;\r\n  font-size: 24px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian {\r\n  border-top: 1px solid #dcdcdc;\r\n  padding-top: 13px;\r\n  margin-top: 18px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question {\r\n  font-weight: 400;\r\n  font-size: 20px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--question span {\r\n  transition: all 0.2s ease-out;\r\n  display: flex;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--accordian .utilities_ops-app-frame_Help_Help--answer {\r\n  font-weight: 400;\r\n  font-size: 14px;\r\n  height: auto;\r\n  max-height: 0;\r\n  transition: max-height 0.2s ease-out;\r\n  overflow: hidden;\r\n  margin-top: 13px;\r\n  white-space: normal;\r\n}\r\n\r\n/* .accordian .answer span {\r\n    white-space: break-spaces;\r\n  } */\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNote .utilities_ops-app-frame_Help_Help--releaseNoteContent {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle {\r\n  width: 100%;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n  margin-top: 13px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--helpArticle .utilities_ops-app-frame_Help_Help--helpArticleWrapper {\r\n  margin-top: 10px;\r\n  white-space: normal;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--articleFooter {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-top: 30px;\r\n  padding-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--likeTxt {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  margin-right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--thanksText {\r\n  color: rgb(45, 206, 137);\r\n  font-weight: bold;\r\n  font-size: 16px;\r\n  margin-left: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper textarea {\r\n  width: 300px;\r\n  height: 100px;\r\n  resize: none;\r\n  display: block;\r\n  margin-bottom: 11px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper h5 {\r\n  font-size: 18px;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likeWrapper .utilities_ops-app-frame_Help_Help--feedbackWrapper span {\r\n  background-color: rgb(29, 90, 185);\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  cursor: pointer;\r\n  margin-right: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  color: #2dce89;\r\n  margin-right: 6px;\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg {\r\n  border: 1px solid #2dce89 !important;\r\n  padding: 5px;\r\n  height: 30px;\r\n  width: 30px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover {\r\n  background-color: #2dce89;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper.utilities_ops-app-frame_Help_Help--active svg path,\r\n.utilities_ops-app-frame_Help_Help--likebtnWrapper svg:hover path {\r\n  fill: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike {\r\n  color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike svg {\r\n  border: 1px solid #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dislike.utilities_ops-app-frame_Help_Help--active svg,\r\n.utilities_ops-app-frame_Help_Help--dislike svg:hover {\r\n  background-color: #f5365c !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper {\r\n  font-style: italic;\r\n  /* font-weight: 700; */\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper b {\r\n  font-weight: 700;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--dateWrapper span {\r\n  font-weight: 400;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper {\r\n  width: 100%;\r\n  border-top: 1px solid #edebe9;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--relatedResourcesWrapper h3 {\r\n  font-weight: 400;\r\n  font-size: 24px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper {\r\n  width: 100%;\r\n  border: 1px solid #dcdcdc;\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  margin-top: 50px;\r\n  position: relative;\r\n  text-align: center;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper.utilities_ops-app-frame_Help_Help--noFlex {\r\n  display: block;\r\n  text-align: left;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h2 {\r\n  font-size: 34px !important;\r\n  margin-bottom: 6px !important;\r\n  margin-top: 0 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p {\r\n  font-size: 14px !important;\r\n  margin-bottom: 3px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper p img {\r\n  position: relative;\r\n  top: 2px;\r\n  margin-left: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn {\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  padding: 6px 12px;\r\n  font-weight: 600;\r\n  font-size: 12px;\r\n  cursor: pointer;\r\n  margin-top: 7px;\r\n  border-radius: 2px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--submitBtn.utilities_ops-app-frame_Help_Help--disable {\r\n  pointer-events: none;\r\n  cursor: default;\r\n  background-color: #ccc;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--close {\r\n  position: absolute;\r\n  top: 0px;\r\n  right: 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper h3 {\r\n  font-weight: 800 !important;\r\n  font-size: 20px !important;\r\n  line-height: 27px !important;\r\n  color: #1d5ab9 !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper {\r\n  width: 100%;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--CategoryWrapper label,\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper label {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  color: #000100;\r\n  margin: 10px 0;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--questionWrapper textarea {\r\n  resize: none;\r\n  height: 125px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--highlightRed {\r\n  font-weight: 600;\r\n  color: #f5365c;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--submitQuestionWrapper .utilities_ops-app-frame_Help_Help--successMsg {\r\n  color: #1d5ab9;\r\n  font-size: 20px !important;\r\n  margin-top: 12px;\r\n  margin-bottom: 20px !important;\r\n  font-weight: 600;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent {\r\n  max-width: 700px;\r\n  min-width: 600px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  background: #edebe9;\r\n  padding: 10px 20px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogBody {\r\n  padding: 20px 20px 30px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader h3 {\r\n  font-weight: 600;\r\n  font-size: 20px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span {\r\n  font-weight: 600;\r\n  font-size: 14px;\r\n  -webkit-text-decoration-line: underline;\r\n          text-decoration-line: underline;\r\n  color: #1d5ab9;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseDialogContent .utilities_ops-app-frame_Help_Help--releaseDialogHeader span i {\r\n  font-size: 10px;\r\n  position: relative;\r\n  top: -6px;\r\n  right: -1px;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive {\r\n  padding: 22px;\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  font-size: 32px !important;\r\n  width: 100% !important;\r\n  border-radius: 10px;\r\n  align-items: center !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive:hover{\r\n  color: #fff !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive img {\r\n  width: 65px !important;\r\n  margin-right: 25px !important;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--releaseTitle {\r\n  flex: 1;\r\n}\r\n\r\n.utilities_ops-app-frame_Help_Help--releaseNoteActive .utilities_ops-app-frame_Help_Help--checkNow {\r\n  font-weight: 700;\r\n  font-size: 14px;\r\n  align-self: end;\r\n}\r\n";
 styleInject(css_248z$h);
 
-var _styleModuleImportMap$7 = {
+var _styleModuleImportMap$6 = {
   "../Help.css": {
     "backdrop": "utilities_ops-app-frame_Help_Help--backdrop",
     "miHelpSideBar": "utilities_ops-app-frame_Help_Help--miHelpSideBar",
@@ -24171,7 +21619,7 @@ var ArticleSection = function ArticleSection(_ref) {
       onClick: function onClick() {
         return clickhandler(viewMapper[articleDetails.type], article);
       },
-      className: _getClassName(highlightRelease ? 'releaseNoteActive' : '', _styleModuleImportMap$7, {
+      className: _getClassName(highlightRelease ? 'releaseNoteActive' : '', _styleModuleImportMap$6, {
         "handleMissingStyleName": "warn"
       })
     }, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -24294,7 +21742,7 @@ styleInject(css_248z$e);
 var css_248z$d = "/**\n * Colors\n */\n/**\n * Breakpoints & Media Queries\n */\n/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Dimensions.\n */\n/**\n * Shadows.\n */\n/**\n * Editor widths.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n/**\n*  Converts a hex value into the rgb equivalent.\n*\n* @param {string} hex - the hexadecimal value to convert\n* @return {string} comma separated rgb values\n*/\n/**\n * Breakpoint mixins\n */\n/**\n * Long content fade mixin\n *\n * Creates a fading overlay to signify that the content is longer\n * than the space allows.\n */\n/**\n * Focus styles.\n */\n/**\n * Applies editor left position to the selector passed as argument\n */\n/**\n * Styles that are reused verbatim in a few places\n */\n/**\n * Allows users to opt-out of animations via OS-level preferences.\n */\n/**\n * Reset default styles for JavaScript UI based pages.\n * This is a WP-admin agnostic reset\n */\n/**\n * Reset the WP Admin page styles for Gutenberg-like pages.\n */\n#start-resizable-editor-section {\n  display: none;\n}\n\n.wp-block-audio figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-audio figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-code {\n  font-family: Menlo, Consolas, monaco, monospace;\n  color: #1e1e1e;\n  padding: 0.8em 1em;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.wp-block-embed figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-embed figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.blocks-gallery-caption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .blocks-gallery-caption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-image figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-image figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-pullquote {\n  border-top: 4px solid currentColor;\n  border-bottom: 4px solid currentColor;\n  margin-bottom: 1.75em;\n  color: currentColor;\n}\n.wp-block-pullquote cite,\n.wp-block-pullquote footer, .wp-block-pullquote__citation {\n  color: currentColor;\n  text-transform: uppercase;\n  font-size: 0.8125em;\n  font-style: normal;\n}\n\n.wp-block-quote {\n  border-left: 0.25em solid currentColor;\n  margin: 0 0 1.75em 0;\n  padding-left: 1em;\n}\n.wp-block-quote cite,\n.wp-block-quote footer {\n  color: currentColor;\n  font-size: 0.8125em;\n  position: relative;\n  font-style: normal;\n}\n.wp-block-quote.has-text-align-right {\n  border-left: none;\n  border-right: 0.25em solid currentColor;\n  padding-left: 0;\n  padding-right: 1em;\n}\n.wp-block-quote.has-text-align-center {\n  border: none;\n  padding-left: 0;\n}\n.wp-block-quote.is-style-large, .wp-block-quote.is-large {\n  border: none;\n}\n\n.wp-block-search .wp-block-search__label {\n  font-weight: bold;\n}\n\n.wp-block-group.has-background {\n  padding: 1.25em 2.375em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.wp-block-separator {\n  border: none;\n  border-bottom: 2px solid currentColor;\n  margin-left: auto;\n  margin-right: auto;\n  opacity: 0.4;\n}\n.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {\n  width: 100px;\n}\n.wp-block-separator.has-background:not(.is-style-dots) {\n  border-bottom: none;\n  height: 1px;\n}\n.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {\n  height: 2px;\n}\n\n.wp-block-table thead {\n  border-bottom: 3px solid;\n}\n.wp-block-table tfoot {\n  border-top: 3px solid;\n}\n.wp-block-table td,\n.wp-block-table th {\n  padding: 0.5em;\n  border: 1px solid;\n  word-break: normal;\n}\n.wp-block-table figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-table figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-video figcaption {\n  color: #555;\n  font-size: 13px;\n  text-align: center;\n}\n.is-dark-theme .wp-block-video figcaption {\n  color: rgba(255, 255, 255, 0.65);\n}\n\n.wp-block-template-part.has-background {\n  padding: 1.25em 2.375em;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n#end-resizable-editor-section {\n  display: none;\n}";
 styleInject(css_248z$d);
 
-var _styleModuleImportMap$6 = {
+var _styleModuleImportMap$5 = {
   "../wordpressStyles.css": {
     "helpArticleContent": "utilities_ops-app-frame_Help_wordpressStyles--helpArticleContent",
     "sr-only": "utilities_ops-app-frame_Help_wordpressStyles--sr-only",
@@ -24327,7 +21775,7 @@ function HelpArticleContent(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_Help_wordpressStyles--helpArticleContent"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "elementor-kit-38 " + _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$6, {
+    className: "elementor-kit-38 " + _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$5, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24379,7 +21827,7 @@ var Dislike = function Dislike() {
   }));
 };
 
-var _styleModuleImportMap$5 = {
+var _styleModuleImportMap$4 = {
   "../Help.css": {
     "backdrop": "utilities_ops-app-frame_Help_Help--backdrop",
     "miHelpSideBar": "utilities_ops-app-frame_Help_Help--miHelpSideBar",
@@ -24480,7 +21928,7 @@ var HelpArticle = function HelpArticle(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_Help_Help--helpArticle"
   }, /*#__PURE__*/React__default["default"].createElement("h3", {
-    className: _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$5, {
+    className: _getClassName(showQuestionSection ? 'nonInteractive' : '', _styleModuleImportMap$4, {
       "handleMissingStyleName": "warn"
     })
   }, currentArticle.title), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -24489,7 +21937,7 @@ var HelpArticle = function HelpArticle(_ref) {
     article: currentArticle,
     showQuestionSection: showQuestionSection
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName("articleFooter ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("articleFooter ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$4, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -24497,7 +21945,7 @@ var HelpArticle = function HelpArticle(_ref) {
   }, !currentArticle.showFeedback ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !currentArticle.showThanksText ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: "utilities_ops-app-frame_Help_Help--likeTxt"
   }, "Was this useful?") : null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: _getClassName("likebtnWrapper ".concat(currentArticle.liked ? 'active' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("likebtnWrapper ".concat(currentArticle.liked ? 'active' : ''), _styleModuleImportMap$4, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -24505,7 +21953,7 @@ var HelpArticle = function HelpArticle(_ref) {
       return likeHandler(currentArticle);
     }
   }, /*#__PURE__*/React__default["default"].createElement(Like, null)), /*#__PURE__*/React__default["default"].createElement("span", null, currentArticle.likes)), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: _getClassName("likebtnWrapper dislike ".concat(currentArticle.disliked ? 'active' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("likebtnWrapper dislike ".concat(currentArticle.disliked ? 'active' : ''), _styleModuleImportMap$4, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -24533,7 +21981,7 @@ var HelpArticle = function HelpArticle(_ref) {
   }, "Skip")))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "utilities_ops-app-frame_Help_Help--dateWrapper"
   }, /*#__PURE__*/React__default["default"].createElement("b", null, "Last updated on:"), ' ', /*#__PURE__*/React__default["default"].createElement("span", null, currentArticle.updatedDate ? formatPublishDate(currentArticle.updatedDate) : null))), currentArticle.relatedHelpResources && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName("relatedResourcesWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("relatedResourcesWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$4, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("h3", null, "Related Help Resources"), /*#__PURE__*/React__default["default"].createElement("ul", null, currentArticle.relatedHelpResources.map(function (article) {
@@ -24546,7 +21994,7 @@ var HelpArticle = function HelpArticle(_ref) {
     }), article.post_title);
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: questionSectionRef,
-    className: _getClassName("submitQuestionWrapper ".concat(showQuestionSection && !showSuccessSection ? 'noFlex' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("submitQuestionWrapper ".concat(showQuestionSection && !showSuccessSection ? 'noFlex' : ''), _styleModuleImportMap$4, {
       "handleMissingStyleName": "warn"
     })
   }, !showQuestionSection ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("h2", null, "Got more questions?"), /*#__PURE__*/React__default["default"].createElement("p", null, "If these resources are not enough to satisfy your queries then"), /*#__PURE__*/React__default["default"].createElement("p", null, /*#__PURE__*/React__default["default"].createElement("b", null, "Feel free to submit your question here.")), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -24605,7 +22053,7 @@ var HelpArticle = function HelpArticle(_ref) {
     }
   })), /*#__PURE__*/React__default["default"].createElement("span", {
     onClick: questionSubmitHandler,
-    className: _getClassName("submitBtn ".concat(!question.length || category === 'selectCategory' ? 'disable' : ''), _styleModuleImportMap$5, {
+    className: _getClassName("submitBtn ".concat(!question.length || category === 'selectCategory' ? 'disable' : ''), _styleModuleImportMap$4, {
       "handleMissingStyleName": "warn"
     })
   }, "Submit")) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("img", {
@@ -24739,7 +22187,7 @@ var ReleaseNote = function ReleaseNote(_ref) {
   })));
 };
 
-var _styleModuleImportMap$4 = {
+var _styleModuleImportMap$3 = {
   "./Help.css": {
     "backdrop": "utilities_ops-app-frame_Help_Help--backdrop",
     "miHelpSideBar": "utilities_ops-app-frame_Help_Help--miHelpSideBar",
@@ -24800,8 +22248,8 @@ var _styleModuleImportMap$4 = {
   }
 };
 var HelpSideBar = function HelpSideBar(_ref) {
-  var getNotificationWrapperWidth = _ref.getNotificationWrapperWidth,
-    appTile = _ref.appTile,
+  _ref.getNotificationWrapperWidth;
+    var appTile = _ref.appTile,
     mihelpAppPath = _ref.mihelpAppPath,
     mihelpRef = _ref.mihelpRef,
     setMihelpVisible = _ref.setMihelpVisible,
@@ -24938,7 +22386,7 @@ var HelpSideBar = function HelpSideBar(_ref) {
             _context.prev = 13;
             _context.t0 = _context["catch"](0);
             setLoading(false);
-            console.log('+++fetch error=', _context.t0);
+            console.log('fetch error=', _context.t0);
           case 17:
           case "end":
             return _context.stop();
@@ -25353,11 +22801,9 @@ var HelpSideBar = function HelpSideBar(_ref) {
     className: "utilities_ops-app-frame_Help_Help--backdrop",
     onClick: handleBackDropClick
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      width: getNotificationWrapperWidth()
-    },
+    // style={{ width: getNotificationWrapperWidth() }}
     ref: mihelpRef,
-    className: _getClassName("miHelpSideBar ".concat(!helpContent || isChrome() && overFlowHidden || !isChrome() && showQuestionSection ? 'overFlowHidden' : ''), _styleModuleImportMap$4, {
+    className: _getClassName("miHelpSideBar ".concat(!helpContent || isChrome() && overFlowHidden || !isChrome() && showQuestionSection ? 'overFlowHidden' : ''), _styleModuleImportMap$3, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -25399,7 +22845,7 @@ var HelpSideBar = function HelpSideBar(_ref) {
     name: "open_in_new",
     variant: "material"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: _getClassName("searchWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$4, {
+    className: _getClassName("searchWrapper ".concat(showQuestionSection ? 'nonInteractive' : ''), _styleModuleImportMap$3, {
       "handleMissingStyleName": "warn"
     })
   }, /*#__PURE__*/React__default["default"].createElement("input", {
@@ -25441,166 +22887,6 @@ var FeedbackButton = function FeedbackButton(props) {
   }));
 };
 
-var _styleModuleImportMap$3 = {
-  "../AppBar.css": {
-    "root": "utilities_ops-app-frame_AppBarComponent_AppBar--root",
-    "leftItems": "utilities_ops-app-frame_AppBarComponent_AppBar--leftItems",
-    "appBarIcons": "utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons",
-    "copartLogo": "utilities_ops-app-frame_AppBarComponent_AppBar--copartLogo",
-    "copartLogoNew": "utilities_ops-app-frame_AppBarComponent_AppBar--copartLogoNew",
-    "moduleName": "utilities_ops-app-frame_AppBarComponent_AppBar--moduleName",
-    "flex-grid": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid",
-    "flex-grid-items": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
-    "lightBulbIcon": "utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon",
-    "yard": "utilities_ops-app-frame_AppBarComponent_AppBar--yard",
-    "yardNumber": "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber",
-    "col": "utilities_ops-app-frame_AppBarComponent_AppBar--col",
-    "logo": "utilities_ops-app-frame_AppBarComponent_AppBar--logo",
-    "text": "utilities_ops-app-frame_AppBarComponent_AppBar--text",
-    "iconText": "utilities_ops-app-frame_AppBarComponent_AppBar--iconText",
-    "searchBar": "utilities_ops-app-frame_AppBarComponent_AppBar--searchBar",
-    "placeholderDiv": "utilities_ops-app-frame_AppBarComponent_AppBar--placeholderDiv",
-    "appBarLeft": "utilities_ops-app-frame_AppBarComponent_AppBar--appBarLeft",
-    "appTitle": "utilities_ops-app-frame_AppBarComponent_AppBar--appTitle",
-    "item": "utilities_ops-app-frame_AppBarComponent_AppBar--item",
-    "searchIcon": "utilities_ops-app-frame_AppBarComponent_AppBar--searchIcon",
-    "searchWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--searchWrapper",
-    "phoneDefault": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneDefault",
-    "phoneAvailable": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneAvailable",
-    "phoneUnvailable": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneUnvailable",
-    "light": "utilities_ops-app-frame_AppBarComponent_AppBar--light",
-    "lightDefault": "utilities_ops-app-frame_AppBarComponent_AppBar--lightDefault",
-    "phoneOffline": "utilities_ops-app-frame_AppBarComponent_AppBar--phoneOffline",
-    "lightAvailable": "utilities_ops-app-frame_AppBarComponent_AppBar--lightAvailable",
-    "SpinnerWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper",
-    "roleAndFlag": "utilities_ops-app-frame_AppBarComponent_AppBar--roleAndFlag",
-    "feedback": "utilities_ops-app-frame_AppBarComponent_AppBar--feedback",
-    "overflowItems": "utilities_ops-app-frame_AppBarComponent_AppBar--overflowItems",
-    "mihelp_button": "utilities_ops-app-frame_AppBarComponent_AppBar--mihelp_button",
-    "mihelpDot": "utilities_ops-app-frame_AppBarComponent_AppBar--mihelpDot",
-    "mihelpTooltip": "utilities_ops-app-frame_AppBarComponent_AppBar--mihelpTooltip",
-    "ideaWidgetContainer": "utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer",
-    "ideaWidgetHide": "utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide",
-    "st0": "utilities_ops-app-frame_AppBarComponent_AppBar--st0",
-    "st1": "utilities_ops-app-frame_AppBarComponent_AppBar--st1",
-    "st2": "utilities_ops-app-frame_AppBarComponent_AppBar--st2",
-    "ideaWidgetHideButton": "utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHideButton",
-    "profile": "utilities_ops-app-frame_AppBarComponent_AppBar--profile",
-    "searchContainer": "utilities_ops-app-frame_AppBarComponent_AppBar--searchContainer",
-    "settingsSidebarWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper",
-    "settingsSidebar": "utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebar",
-    "sideBarWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper",
-    "innerNotificationDiv": "utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv",
-    "notificationsHeader": "utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader",
-    "notificationsWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--notificationsWrapper",
-    "notificationCount": "utilities_ops-app-frame_AppBarComponent_AppBar--notificationCount",
-    "twoChars": "utilities_ops-app-frame_AppBarComponent_AppBar--twoChars",
-    "threeChars": "utilities_ops-app-frame_AppBarComponent_AppBar--threeChars",
-    "notificationIconWrapper": "utilities_ops-app-frame_AppBarComponent_AppBar--notificationIconWrapper",
-    "arrowTipContainer": "utilities_ops-app-frame_AppBarComponent_AppBar--arrowTipContainer",
-    "ideaNoteArrow": "utilities_ops-app-frame_AppBarComponent_AppBar--ideaNoteArrow",
-    "mihelpArrow": "utilities_ops-app-frame_AppBarComponent_AppBar--mihelpArrow",
-    "profileArrow": "utilities_ops-app-frame_AppBarComponent_AppBar--profileArrow"
-  }
-};
-var getPhoneStatusStyle = function getPhoneStatusStyle(status, theme) {
-  if (status === PHONE_STATUS.Available) {
-    return theme === 'light' ? 'flex-grid-items lightAvailable' : 'item phoneAvailable';
-  } else if (status === PHONE_STATUS.Offline) {
-    return theme !== 'light' ? 'item phoneUnvailable' : 'flex-grid-items phoneOffline';
-  } else if (theme === 'light') {
-    return 'flex-grid-items lightDefault';
-  } else {
-    return 'item phoneDefault';
-  }
-};
-var PhoneAvailableIcon = function PhoneAvailableIcon(_ref) {
-  var theme = _ref.theme;
-  return /*#__PURE__*/React__default["default"].createElement(coreComponents.Icon, {
-    name: "phone",
-    variant: "material",
-    style: theme === 'light' ? {
-      fontSize: '24px',
-      marginLeft: '5px',
-      marginRight: '5px',
-      color: '#1d5ab9'
-    } : {}
-  });
-};
-var PhoneUnavailableIcon = function PhoneUnavailableIcon(_ref2) {
-  var _ref2$width = _ref2.width,
-    width = _ref2$width === void 0 ? '14px' : _ref2$width,
-    _ref2$height = _ref2.height,
-    height = _ref2$height === void 0 ? '16px' : _ref2$height,
-    _ref2$viewBox = _ref2.viewBox,
-    viewBox = _ref2$viewBox === void 0 ? '0 0 18 18' : _ref2$viewBox;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    width: width,
-    height: height,
-    viewBox: viewBox
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    id: "Cobalt---version-3.0",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    id: "Portal---Phone-Unavailable",
-    transform: "translate(-1142.000000, -22.000000)"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    id: "Group-12",
-    transform: "translate(1127.000000, 14.000000)"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    id: "baseline-local_phone-24px",
-    transform: "translate(12.000000, 6.000000)"
-  }, /*#__PURE__*/React__default["default"].createElement("polygon", {
-    id: "Path",
-    points: "0 0 24 0 24 24 0 24"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M6.62,10.79 C8.06,13.62 10.38,15.93 13.21,17.38 L15.41,15.18 C15.68,14.91 16.08,14.82 16.43,14.94 C17.55,15.31 18.76,15.51 20,15.51 C20.55,15.51 21,15.96 21,16.51 L21,20 C21,20.55 20.55,21 20,21 C10.61,21 3,13.39 3,4 C3,3.45 3.45,3 4,3 L7.5,3 C8.05,3 8.5,3.45 8.5,4 C8.5,5.25 8.7,6.45 9.07,7.57 C9.18,7.92 9.1,8.31 8.82,8.59 L6.62,10.79 Z",
-    id: "Path",
-    fill: "#F71241"
-  }), /*#__PURE__*/React__default["default"].createElement("polygon", {
-    id: "Path",
-    fill: "#F71241",
-    points: "22 3 21 2 17 6 13 2 12 3 16 7 12 11 13 12 17 8 21 12 22 11 18 7"
-  }))))));
-};
-var PhoneStatus = function PhoneStatus(_ref3) {
-  _ref3.config;
-    var phoneNumber = _ref3.phoneNumber,
-    phoneStatusObject = _ref3.phoneStatusObject,
-    togglePhoneAvailability = _ref3.togglePhoneAvailability,
-    _ref3$theme = _ref3.theme,
-    theme = _ref3$theme === void 0 ? 'dark' : _ref3$theme;
-  var _phoneStatusObject$ph = phoneStatusObject.phoneStatus,
-    phoneStatus = _phoneStatusObject$ph === void 0 ? '' : _phoneStatusObject$ph,
-    _phoneStatusObject$ph2 = phoneStatusObject.phoneStatusProcessing,
-    phoneStatusProcessing = _phoneStatusObject$ph2 === void 0 ? false : _phoneStatusObject$ph2;
-  return /*#__PURE__*/React__default["default"].createElement(coreComponents.Tooltip, {
-    content: phoneStatus
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: function onClick() {
-      if (!phoneStatusProcessing) togglePhoneAvailability();
-    },
-    className: _getClassName(getPhoneStatusStyle(phoneStatus, theme), _styleModuleImportMap$3, {
-      "handleMissingStyleName": "warn"
-    })
-  }, phoneStatus === PHONE_STATUS.Available ? /*#__PURE__*/React__default["default"].createElement(PhoneAvailableIcon, {
-    theme: theme
-  }) : null, phoneStatus === PHONE_STATUS.Offline ? /*#__PURE__*/React__default["default"].createElement(PhoneUnavailableIcon, theme === 'light' ? {
-    viewBox: '0 0 24 24',
-    width: '24px',
-    height: '24px'
-  } : {}) : null, !phoneStatus ? /*#__PURE__*/React__default["default"].createElement(PhoneAvailableIcon, {
-    theme: theme
-  }) : null, /*#__PURE__*/React__default["default"].createElement("div", null, phoneNumber), phoneStatusProcessing === true ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_AppBar--SpinnerWrapper"
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Spinner, {
-    size: "xxs"
-  })) : null));
-};
-
 var onRenderItem = function onRenderItem(item) {
   return item.render();
 };
@@ -25658,31 +22944,31 @@ var OverflowMenu = function OverflowMenu(props) {
   });
 };
 
-var defaultAutoSelectProps$1 = {
+var defaultAutoSelectProps = {
   optionStyleProps: {
     rowHeight: 40,
     optionsMinHeight: 200
   },
   width: 200
 };
-var printerFields = [_objectSpread2(_objectSpread2({}, defaultAutoSelectProps$1), {}, {
-  name: 'barcode_label_printers',
-  label: 'Bar Code Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps$1), {}, {
-  name: 'check_printers',
-  label: 'Check Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps$1), {}, {
+var printerFields = [_objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
   name: 'standard_printers',
   label: 'Standard Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps$1), {}, {
+}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
+  name: 'check_printers',
+  label: 'Check Printer'
+}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
   name: 'windshield_label_printers',
   label: 'Wind Shield Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps$1), {}, {
+}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
   name: 'text_printers',
   label: 'Dot Matrix Printers'
+}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
+  name: 'barcode_label_printers',
+  label: 'Bar Code Printer'
 })];
 
-var css_248z$b = ".utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--PrinterSettings {\r\n  padding-right: 0px;\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";
+var css_248z$b = ".utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--PrinterSettings {\r\n  margin: 0 9px;\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";
 styleInject(css_248z$b);
 
 // Properly populate printer options before feeding to autoselect
@@ -25725,7 +23011,7 @@ var PrinterSettings = /*#__PURE__*/function (_React$Component) {
         var printers = getPrinterOptions(printersData[name]);
         return /*#__PURE__*/React__namespace.createElement("div", {
           key: name,
-          className: "utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-5"
+          className: "utilities_ops-app-frame_AppBarComponent_Settings_PrinterSettings_PrinterSettings--col-1-1"
         }, /*#__PURE__*/React__namespace.createElement(coreComponents.AutoSelect, {
           key: name,
           label: printer.label,
@@ -25818,10 +23104,10 @@ var getLanguages = function getLanguages() {
   }[selectedCountry];
 };
 
-var css_248z$a = "/* Simple Grid */\r\n[class*='col-'] {\r\n  float: left;\r\n  min-height: 1px;\r\n  padding-right: 10px; /* column-space */\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}\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; /* column-space */\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  }\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}\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: flex-end;\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: 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$a = "/* 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}";
 styleInject(css_248z$a);
 
-var getDescription$2 = function getDescription(languageOptions) {
+var getDescription$1 = function getDescription(languageOptions) {
   return function (code) {
     return languageOptions[code].description;
   };
@@ -25834,7 +23120,7 @@ var LanguageMenu = function LanguageMenu(props) {
   // TODO: Get stack from env tool. No props required.
   var languageOptions = getLanguages(props.selectedCountry, props.stack);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-4"
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     options: Object.keys(languageOptions),
     selectedOption: props.selectedOption,
@@ -25842,7 +23128,7 @@ var LanguageMenu = function LanguageMenu(props) {
     onChange: function onChange(value) {
       return props.handleChange(value);
     },
-    displayOption: getDescription$2(languageOptions),
+    displayOption: getDescription$1(languageOptions),
     optionStyleProps: STYLES,
     width: 200,
     name: "selectedLanguage",
@@ -25879,7 +23165,7 @@ var RoleSelector$1 = function RoleSelector(_ref) {
     _ref.selectedYard;
     _ref.selectedCountryA3code;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-4"
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
@@ -25905,12 +23191,12 @@ var RoleSelector$1 = function RoleSelector(_ref) {
 };
 
 var _excluded$3 = ["selectedYard", "name", "handleChange", "yardOptions", "label"];
-var getDescription$1 = function getDescription(yardOptions) {
+var getDescription = function getDescription(yardOptions) {
   return function (code) {
     return yardOptions[code].yard_number;
   };
 };
-var optionStyleProps$1 = {
+var optionStyleProps = {
   rowHeight: 40,
   optionsMinHeight: 200
 };
@@ -25922,15 +23208,15 @@ var YardNumberMenu$1 = function YardNumberMenu(_ref) {
     label = _ref.label,
     otherProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-4"
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, _extends$1({}, otherProps, {
     name: name,
     value: selectedYard,
     options: Object.keys(yardOptions),
     label: label || name,
     onChange: handleChange,
-    displayOption: getDescription$1(yardOptions),
-    optionStyleProps: optionStyleProps$1
+    displayOption: getDescription(yardOptions),
+    optionStyleProps: optionStyleProps
   })));
 };
 
@@ -26023,7 +23309,7 @@ var YardNumberContainer = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React__namespace.createElement(YardNumberMenu$1, {
         required: true,
         name: "selectedYard",
-        label: "Yard/Facility",
+        label: "Yard",
         selectedYard: props.selectedYard,
         selectedCountry: props.selectedCountry,
         selectedRole: props.selectedRole,
@@ -26035,50 +23321,28 @@ var YardNumberContainer = /*#__PURE__*/function (_React$Component) {
   return YardNumberContainer;
 }(React__namespace.Component);
 
-// Contains all the currency mappings
-var USD = {
-  code: 'USD',
-  description: 'USD'
-};
-var CAD = {
-  code: 'CAD',
-  description: 'CAD'
-};
-var INR = {
-  code: 'INR',
-  description: 'INR'
-};
-var getCurrencies = function getCurrencies() {
-  return {
-    USD: USD,
-    CAD: CAD,
-    INR: INR
-  };
-};
+var css_248z$9 = ".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}";
+styleInject(css_248z$9);
 
-var CURRENCY_OPTIONS = getCurrencies();
-var CURRENCY_OPTIONS_KEYS = Object.keys(CURRENCY_OPTIONS);
-var getDescription = function getDescription(code) {
-  return CURRENCY_OPTIONS[code].description;
-};
-var optionStyleProps = {
-  rowHeight: 40,
-  optionsMinHeight: 200
-};
-var CurrencyMenu = function CurrencyMenu(props) {
+var ProfileDetails = function ProfileDetails(_ref) {
+  var logout = _ref.logout;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-4"
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
-    required: true,
-    name: "selectedCurrency",
-    label: "Currency for Lot Review",
-    options: CURRENCY_OPTIONS_KEYS,
-    selectedOption: props.selectedOption,
-    value: props.value,
-    onChange: props.handleChange,
-    displayOption: getDescription,
-    optionStyleProps: optionStyleProps
-  }));
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--profileDetails"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--details"
+  }, /*#__PURE__*/React__default["default"].createElement("h3", null, storage$1.userName), /*#__PURE__*/React__default["default"].createElement("p", null, storage$1.userEmail)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_ProfileDetails_ProfileDetails--logoutButton"
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Button, {
+    primary: true,
+    onClick: function onClick() {
+      return logout({}, {
+        key: 'logout'
+      });
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+    name: "arrow-right-from-bracket",
+    variant: "solid"
+  }), /*#__PURE__*/React__default["default"].createElement("span", null, "Logout"))));
 };
 
 var getRCExtensionStatus = /*#__PURE__*/function () {
@@ -26213,190 +23477,8 @@ var getActivePrinters = (function (printersData) {
   return reduceToObject(chooseActive)(toPairs$1(defaultPrinters));
 });
 
-var Container = /*#__PURE__*/function (_React$Component) {
-  _inherits$2(Container, _React$Component);
-  var _super = _createSuper(Container);
-  function Container() {
-    var _this;
-    _classCallCheck$2(this, Container);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty$1(_assertThisInitialized(_this), "state", {
-      number: _this.props.phoneNumber.substr(1),
-      result: 'none',
-      status: 'idle'
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "setResult", function (result) {
-      return _this.setState({
-        result: result
-      });
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "setStatus", function (status) {
-      return _this.setState({
-        status: status
-      });
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "setNumber", function (event, value) {
-      var number = shouldAllowInputValue(value) ? value : _this.state.number;
-      var updatePhoneNumber = function updatePhoneNumber() {
-        return _this.props.updatePhoneNumber("8".concat(number));
-      };
-      return _this.setState({
-        number: number,
-        status: 'idle',
-        result: 'none'
-      }, updatePhoneNumber);
-    });
-    _defineProperty$1(_assertThisInitialized(_this), "testCall", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var yardNumber, extension, testCallUrl, _yield$fetcher$get, data;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _this.setStatus('calling');
-            // TODO: Validation && clean up.
-            yardNumber = Math.floor(Number(_this.state.number.substring(0, 4)));
-            extension = _this.state.number.substr(4);
-            testCallUrl = generateTestCallUrl({
-              yardNumber: yardNumber,
-              extension: extension
-            });
-            _context.prev = 4;
-            _context.next = 7;
-            return fetcher.get(testCallUrl);
-          case 7:
-            _yield$fetcher$get = _context.sent;
-            data = _yield$fetcher$get.data;
-            if (!(_this.state.status === 'idle')) {
-              _context.next = 11;
-              break;
-            }
-            return _context.abrupt("return");
-          case 11:
-            _this.handleTestCallResponse(data);
-            _context.next = 19;
-            break;
-          case 14:
-            _context.prev = 14;
-            _context.t0 = _context["catch"](4);
-            console.error('Failed to test call:', {
-              error: _context.t0
-            });
-            _this.setResult('fail');
-            _this.setStatus('idle');
-          case 19:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[4, 14]]);
-    })));
-    _defineProperty$1(_assertThisInitialized(_this), "handleTestCallResponse", function (data) {
-      if (data.result === 'Success') {
-        _this.setResult('pass');
-        _this.setStatus('idle');
-      }
-      if (data.result === 'Failure') {
-        _this.setResult('fail');
-        _this.setStatus('idle');
-        // This.props.updatePhoneNumber(this.state.number)
-      }
-    });
-    return _this;
-  }
-  _createClass$2(Container, [{
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(newProps) {
-      this.setStatus('idle');
-      this.setState(function (state) {
-        return {
-          number: newProps.phoneNumber.substr(1)
-        };
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children({
-        status: this.state.status,
-        result: this.state.result,
-        number: this.state.number,
-        setNumber: this.setNumber,
-        testCall: this.testCall,
-        ringCentralEnabled: this.props.ringCentralEnabled
-      });
-    }
-  }]);
-  return Container;
-}(React__namespace.Component);
-Container.defaultProps = {
-  number: '',
-  phoneNumber: ''
-};
-var shouldAllowInputValue = function shouldAllowInputValue(value) {
-  return /^\d{0,8}$/.test(value);
-};
-var generateTestCallUrl = function generateTestCallUrl(_ref2) {
-  var _storage$getLocalItem;
-  var yardNumber = _ref2.yardNumber,
-    extension = _ref2.extension;
-  var id = (_storage$getLocalItem = storage$1.getLocalItem('login')) === null || _storage$getLocalItem === void 0 ? void 0 : _storage$getLocalItem.userData.entity_id;
-  var url = storage$1.getItem('config').endpoints.testCall;
-  return frontEndUtils.string.substitute(url, {
-    yardNumber: yardNumber,
-    extension: extension,
-    id: id
-  });
-};
-
-var css_248z$9 = ".utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--title {\r\n  font-weight: 500;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: flex-end;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow .ms-TextField-errorMessage {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--textField {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: flex-end;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix {\r\n  margin: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--testCallButton {\r\n  margin-left: 12px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix8 {\r\n  margin: auto 2px auto 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings input {\r\n  margin-right: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--smallInfo {\r\n  margin-top: 2px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings small {\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator {\r\n  position: absolute;\r\n  right: 5px;\r\n  height: 30px;\r\n  display: flex;\r\n  bottom: 1px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator .ms-Spinner-circle {\r\n  max-width: 20px !important;\r\n  max-height: 20px !important;\r\n  right: 5px;\r\n}\r\n\r\nmaterial-icon[name='check'] {\r\n  color: rgb(100, 181, 10);\r\n  font-size: 12px;\r\n}\r\n\r\nmaterial-icon[name='error_outline'] {\r\n  color: #a80000;\r\n  font-size: 12px;\r\n}\r\n";
-styleInject(css_248z$9);
-
-var PhoneNumberSettings = function PhoneNumberSettings(props) {
-  return /*#__PURE__*/React__namespace.createElement(Container, props, function (store) {
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings"
-    }, /*#__PURE__*/React__namespace.createElement("p", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--title"
-    }, "Phone Number"), /*#__PURE__*/React__namespace.createElement("small", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--smallInfo"
-    }, /*#__PURE__*/React__namespace.createElement("i", null, "Required to enable click to dial feature.")), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow"
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--textField"
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix"
-    }, "8"), /*#__PURE__*/React__namespace.createElement(coreComponents.Input, {
-      required: true,
-      id: "phoneNumber",
-      name: "phoneNumber",
-      placeholder: "xxxxxxx",
-      label: "Phone Number",
-      value: store.number,
-      onChange: store.setNumber,
-      maxLength: "8",
-      onGetErrorMessage: validator
-    }), /*#__PURE__*/React__namespace.createElement("span", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator"
-    }, store.status === 'calling' ? /*#__PURE__*/React__namespace.createElement(coreComponents.Spinner, null) : store.result === 'pass' ? /*#__PURE__*/React__namespace.createElement("material-icon", {
-      name: "check",
-      size: "sm"
-    }) : store.result === 'fail' ? /*#__PURE__*/React__namespace.createElement("material-icon", {
-      name: "error_outline",
-      size: "sm"
-    }) : null)), /*#__PURE__*/React__namespace.createElement("span", {
-      className: "utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--testCallButton"
-    }, /*#__PURE__*/React__namespace.createElement(coreComponents.Button, {
-      disabled: store.number.length < 7,
-      onClick: store.number.length && store.testCall
-    }, "Test call"))));
-  });
-};
-var validator = function validator(value) {
-  // TODO: More detailed error messages.
-
-  return /^\d{8}$/.test(value) ? 'Maximum digits reached.' : '';
-};
+var css_248z$8 = ".utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--title {\r\n  font-weight: 500;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow {\r\n  display: flex;\r\n  width: 100%;\r\n  align-items: flex-end;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--inputRow .ms-TextField-errorMessage {\r\n  position: absolute;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--textField {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: flex-end;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix {\r\n  margin: 5px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--testCallButton {\r\n  margin-left: 12px;\r\n}\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--prefix8 {\r\n  margin: auto 2px auto 0;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings input {\r\n  margin-right: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--smallInfo {\r\n  margin-top: 2px;\r\n  opacity: 0.5;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings small {\r\n  margin-bottom: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator {\r\n  position: absolute;\r\n  right: 5px;\r\n  height: 30px;\r\n  display: flex;\r\n  bottom: 1px;\r\n  align-items: center;\r\n}\r\n\r\n.utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--PhoneNumberSettings .utilities_ops-app-frame_AppBarComponent_Settings_PhoneNumberSettings_styles_PhoneNumberSettings--statusIndicator .ms-Spinner-circle {\r\n  max-width: 20px !important;\r\n  max-height: 20px !important;\r\n  right: 5px;\r\n}\r\n\r\nmaterial-icon[name='check'] {\r\n  color: rgb(100, 181, 10);\r\n  font-size: 12px;\r\n}\r\n\r\nmaterial-icon[name='error_outline'] {\r\n  color: #a80000;\r\n  font-size: 12px;\r\n}\r\n";
+styleInject(css_248z$8);
 
 var EMPTY_PRINTERS$1 = {
   barcode_label_printers: '',
@@ -26417,26 +23499,6 @@ var getHierarchyLevel = function getHierarchyLevel(levelId) {
 };
 var isInvalid = either$1(isNil$1, isEmpty$2);
 var keysToBeDeleted = ['openEmailDialog', 'openPhoneDialog', 'searchParam', 'selectedCountry', 'selectedCountryA3code', 'selectedCurrency', 'selectedRole', 'selectedTimeZone', 'selectedYard', 'showPhoneEntryOnEnter', 'yard'];
-var RingCentralInfo$1 = function RingCentralInfo(_ref) {
-  var phoneNumber = _ref.phoneNumber;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--title"
-  }, "Phone Number"), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--smallInfo"
-  }, /*#__PURE__*/React__default["default"].createElement("i", null, "Required to enable click to dial feature.")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--textField"
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Input, {
-    id: "rcNumber",
-    name: "rcNumber",
-    label: "Ring Central Phone Number",
-    value: phoneNumber,
-    disabled: true
-  }))));
-};
 
 // Handles changes to all inputs.
 var handleInputChange$1 = function handleInputChange(self) {
@@ -26788,20 +23850,19 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--body"
-      }, /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement("p", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--sectionTitle"
-      }, "Location And Language"), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ProfileDetails, {
+        logout: this.props.onLogoutItemClicked
+      }), /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "gear",
+        variant: "solid"
+      }), /*#__PURE__*/React__default["default"].createElement("p", null, "Settings")), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-1-1 utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow",
         "data-e2e": "LocationAndLanguageRow"
-      }, /*#__PURE__*/React__default["default"].createElement(CurrencyMenu, {
-        value: this.state.selectedCurrency,
-        handleChange: this.handleInputChange.selectedCurrency
-      }), /*#__PURE__*/React__default["default"].createElement(YardNumberContainer, {
-        history: this.yardsHistory,
-        selectedYard: this.state.selectedYardNumber,
-        handleChange: this.handleInputChange.selectedYardNumber,
+      }, /*#__PURE__*/React__default["default"].createElement(LanguageMenu, {
+        value: this.state.selectedLanguage,
+        handleChange: this.handleInputChange.selectedLanguage,
         selectedCountry: this.state.selectedCountry
       }), /*#__PURE__*/React__default["default"].createElement(RoleSelector$1, {
         roles: this.state.roles,
@@ -26809,36 +23870,29 @@ var SettingsView$1 = /*#__PURE__*/function (_React$Component) {
         handleChange: this.handleInputChange.selectedRole,
         selectedYard: this.state.selectedYardNumber,
         required: false
-      }), /*#__PURE__*/React__default["default"].createElement(LanguageMenu, {
-        value: this.state.selectedLanguage,
-        handleChange: this.handleInputChange.selectedLanguage,
+      }), /*#__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("hr", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
-      }), /*#__PURE__*/React__default["default"].createElement("p", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--sectionTitle"
-      }, "Printers"), /*#__PURE__*/React__default["default"].createElement(PrinterSettings, {
+      })), /*#__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("hr", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
-      }), this.state.ringCentralEnabled === false ? /*#__PURE__*/React__default["default"].createElement(PhoneNumberSettings, {
-        phoneNumber: this.state.phoneNumber,
-        updatePhoneNumber: this.updatePhoneNumber
-      }) : this.state.ringCentralEnabled === true ? /*#__PURE__*/React__default["default"].createElement(RingCentralInfo$1, {
-        phoneNumber: this.state.phoneNumber
-      }) : null, /*#__PURE__*/React__default["default"].createElement("hr", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
+      })), /*#__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, {
         primary: true,
         type: "submit",
         onClick: this.saveSettings
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "floppy-disk",
+        variant: "regular"
+      }), /*#__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", {
@@ -26864,7 +23918,7 @@ var RoleSelector = function RoleSelector(_ref) {
     required = _ref$required === void 0 ? true : _ref$required;
     _ref.selectedYard;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-3"
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, {
     name: "role",
     label: "Role",
@@ -26957,7 +24011,7 @@ var HierarchySelector = function HierarchySelector(_ref) {
     value = _ref.value,
     onChange = _ref.onChange;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-3"
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, options.length === 0 ? /*#__PURE__*/React__default["default"].createElement(coreComponents.Input, {
     label: "Hierarchy",
     name: "Hierarchy",
@@ -26998,7 +24052,7 @@ var YardNumberMenu = function YardNumberMenu(_ref) {
     var disabled = _ref.disabled,
     otherProps = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-3"
+    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--col-1-1"
   }, /*#__PURE__*/React__default["default"].createElement(coreComponents.AutoSelect, _extends$1({}, otherProps, {
     name: "selectedYard",
     value: value,
@@ -27027,28 +24081,6 @@ var EMPTY_PRINTERS = {
   text_printers: ''
 };
 
-//RC info in settings page
-var RingCentralInfo = function RingCentralInfo(_ref) {
-  var phoneNumber = _ref.phoneNumber;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--RCPhoneNumberSettings"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--title"
-  }, "Phone Number"), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--smallInfo"
-  }, /*#__PURE__*/React__default["default"].createElement("i", null, "Required to enable click to dial feature.")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--textField"
-  }, /*#__PURE__*/React__default["default"].createElement(coreComponents.Input, {
-    id: "rcNumber",
-    name: "rcNumber",
-    label: "Ring Central Phone Number",
-    value: phoneNumber,
-    disabled: true
-  }))));
-};
-
 // Handles changes to all inputs.
 var handleInputChange = function handleInputChange(self) {
   var handleChange = function handleChange(name) {
@@ -27538,11 +24570,14 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
       var disableYardDropDown = propOr$1('country', 'level', selectedHierarchy) === 'yard';
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsForm"
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--body"
-      }, /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement("p", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--sectionTitle"
-      }, "Hierarchy, Role And Yard"), /*#__PURE__*/React__default["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement(ProfileDetails, {
+        logout: this.props.onLogoutItemClicked
+      }), /*#__PURE__*/React__default["default"].createElement("form", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settingsHeader"
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "gear",
+        variant: "solid"
+      }), /*#__PURE__*/React__default["default"].createElement("p", null, "Settings")), /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-1-1 utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--inputRow",
         "data-e2e": "LocationAndLanguageRow"
       }, /*#__PURE__*/React__default["default"].createElement(RoleSelector, {
@@ -27559,33 +24594,20 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
         disabled: disableYardDropDown,
         value: this.state.selectedYardNumber,
         handleChange: this.handleInputChange.selectedYardNumber
-      })), /*#__PURE__*/React__default["default"].createElement("hr", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
-      }), /*#__PURE__*/React__default["default"].createElement("p", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--sectionTitle"
-      }, "Printers"), /*#__PURE__*/React__default["default"].createElement(PrinterSettings, {
+      })), /*#__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("hr", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
-      }), this.state.ringCentralEnabled === false ? /*#__PURE__*/React__default["default"].createElement(PhoneNumberSettings, {
-        phoneNumber: this.state.phoneNumber,
-        updatePhoneNumber: this.updatePhoneNumber
-      }) : this.state.ringCentralEnabled === true ? /*#__PURE__*/React__default["default"].createElement(RingCentralInfo, {
-        phoneNumber: this.state.phoneNumber
-      }) : null, /*#__PURE__*/React__default["default"].createElement("hr", {
-        className: "utilities_ops-app-frame_AppBarComponent_Settings_SettingsView--settings-hr"
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
+      })), /*#__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, {
         primary: true,
         type: "submit",
         onClick: this.saveSettings
-      }, "Save"))), this.state.showLoading && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, "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"
@@ -27597,8 +24619,8 @@ var SettingsView = /*#__PURE__*/function (_React$Component) {
   return SettingsView;
 }(React__default["default"].Component);
 
-var css_248z$8 = ".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";
-styleInject(css_248z$8);
+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";
+styleInject(css_248z$7);
 
 var _nodeResolve_empty = {};
 
@@ -34330,7 +31352,9 @@ var _styleModuleImportMap$2 = {
     "moduleName": "utilities_ops-app-frame_AppBarComponent_AppBar--moduleName",
     "flex-grid": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid",
     "flex-grid-items": "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items",
+    "logout": "utilities_ops-app-frame_AppBarComponent_AppBar--logout",
     "lightBulbIcon": "utilities_ops-app-frame_AppBarComponent_AppBar--lightBulbIcon",
+    "language": "utilities_ops-app-frame_AppBarComponent_AppBar--language",
     "yard": "utilities_ops-app-frame_AppBarComponent_AppBar--yard",
     "yardNumber": "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber",
     "col": "utilities_ops-app-frame_AppBarComponent_AppBar--col",
@@ -34444,12 +31468,11 @@ var overflowIconStyles = {
 var generateAppBarElements = function generateAppBarElements(props, showCallout) {
   props.countryCode;
     props.role;
-    var yardNumber = props.yardNumber,
-    phoneNumber = props.phoneNumber,
-    _props$phoneStatusObj = props.phoneStatusObject,
-    phoneStatusObject = _props$phoneStatusObj === void 0 ? {} : _props$phoneStatusObj,
-    _togglePhoneAvailability = props.togglePhoneAvailability,
-    handleHelpClick = props.handleHelpClick;
+    var yardNumber = props.yardNumber;
+    props.phoneNumber;
+    props.phoneStatusObject;
+    props.togglePhoneAvailability;
+    var handleHelpClick = props.handleHelpClick;
     props.type;
     var config = props.config,
     _props$navigateTo = props.navigateTo,
@@ -34474,7 +31497,7 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     props.setSettingsVisible;
     var handleIconClick = props.handleIconClick,
     ideaNoteVisible = props.ideaNoteVisible;
-  var coreAppConfig = storage.getLocalItem('opsportal-core:config');
+  var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
   var enableNewToolkitFeatures = coreAppConfig.enableNewToolkitFeatures,
     showSettingsMenuByTileConfig = coreAppConfig.showSettingsMenuByTileConfig;
   var showSettingsInAppbar = false;
@@ -34517,6 +31540,13 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
       }
     }, text);
   };
+  var getLanguage = function getLanguage(language) {
+    var languageMapper = {
+      en: 'English',
+      fr: 'French'
+    };
+    return languageMapper[language];
+  };
   var items = [{
     key: 'search',
     name: 'Search',
@@ -34542,66 +31572,6 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
         variant: "solid"
       }), /*#__PURE__*/React__default["default"].createElement("div", null, "Search"));
     }
-  }, {
-    key: 'facility',
-    name: yardNumber,
-    renderIf: config.includes('yard'),
-    onRender: function onRender(_, dismissMenu) {
-      return /*#__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: "domain"
-      }), /*#__PURE__*/React__default["default"].createElement(OverFlowText, {
-        text: "Yard ".concat(yardNumber)
-      }));
-    },
-    render: function render() {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        id: "yardItem",
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items utilities_ops-app-frame_AppBarComponent_AppBar--yard",
-        onClick: showSettingsInAppbar ? function () {
-          return showCallout('yardItem');
-        } : navigateTo('/settings')
-      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
-        name: "buildings",
-        variant: "solid"
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
-        "data-testid": "yardNumber",
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber"
-      }, yardNumber));
-    }
-  },
-  // add margin 0 12px to all icons in the right
-  {
-    key: 'phoneStatus',
-    name: phoneNumber,
-    onRender: function onRender(_, dismissMenu) {
-      return /*#__PURE__*/React__default["default"].createElement(PhoneStatus, {
-        config: config,
-        theme: "light",
-        phoneNumber: phoneNumber,
-        phoneStatusObject: phoneStatusObject,
-        togglePhoneAvailability: function togglePhoneAvailability() {
-          _togglePhoneAvailability();
-          dismissMenu();
-        }
-      });
-    },
-    renderIf: config.includes('phone') && phoneNumber,
-    render: function render() {
-      return /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--appBarIcons"
-      }, /*#__PURE__*/React__default["default"].createElement(PhoneStatus, {
-        config: config,
-        phoneNumber: phoneNumber,
-        phoneStatusObject: phoneStatusObject,
-        togglePhoneAvailability: _togglePhoneAvailability
-      }));
-    }
   }, {
     key: 'feedback',
     name: 'Feedback',
@@ -34713,6 +31683,82 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
       });
     }
   }, {
+    key: 'language',
+    name: 'Language',
+    renderIf: process.env.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",
+        onClick: function onClick() {
+          return handleIconClick(ICONS.SETTINGS);
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "earth-americas",
+        variant: "regular"
+      }), " ", /*#__PURE__*/React__default["default"].createElement("span", null, getLanguage(storage$1.activeLanguage)));
+    }
+  }, {
+    key: 'facility',
+    name: yardNumber,
+    renderIf: config.includes('yard'),
+    onRender: function onRender(_, dismissMenu) {
+      return /*#__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: "domain"
+      }), /*#__PURE__*/React__default["default"].createElement(OverFlowText, {
+        text: "Yard ".concat(yardNumber)
+      }));
+    },
+    render: function render() {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        id: "yardItem",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items utilities_ops-app-frame_AppBarComponent_AppBar--yard",
+        onClick: showSettingsInAppbar ? function () {
+          return handleIconClick(ICONS.SETTINGS);
+        } : navigateTo('/settings')
+      }, /*#__PURE__*/React__default["default"].createElement(coreComponents.IconV2, {
+        name: "buildings",
+        variant: "regular"
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        "data-testid": "yardNumber",
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--yardNumber"
+      }, "Yard ", yardNumber));
+    }
+  },
+  // add margin 0 12px to all icons in the right
+  // {
+  //   key: 'phoneStatus',
+  //   name: phoneNumber,
+  //   onRender: (_, dismissMenu) => (
+  //     <PhoneStatus
+  //       config={config}
+  //       theme="light"
+  //       phoneNumber={phoneNumber}
+  //       phoneStatusObject={phoneStatusObject}
+  //       togglePhoneAvailability={() => {
+  //         togglePhoneAvailability()
+  //         dismissMenu()
+  //       }}
+  //     />
+  //   ),
+  //   renderIf: config.includes('phone') && phoneNumber,
+  //   render: () => (
+  //     <span styleName='appBarIcons'>
+  //       <PhoneStatus
+  //         config={config}
+  //         phoneNumber={phoneNumber}
+  //         phoneStatusObject={phoneStatusObject}
+  //         togglePhoneAvailability={togglePhoneAvailability}
+  //       />
+  //     </span>
+  //   )
+  // },
+  {
     key: 'logout',
     name: 'Logout',
     renderIf: true,
@@ -34751,10 +31797,15 @@ var generateAppBarElements = function generateAppBarElements(props, showCallout)
     },
     render: function render() {
       return /*#__PURE__*/React__default["default"].createElement("span", {
-        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items"
+        className: "utilities_ops-app-frame_AppBarComponent_AppBar--flex-grid-items utilities_ops-app-frame_AppBarComponent_AppBar--logout",
+        style: {
+          marginRight: '24px !important'
+        }
       }, /*#__PURE__*/React__default["default"].createElement(LogOutMenu, {
         items: props.logoutItems,
-        onItemClick: props.onLogoutItemClicked,
+        onItemClick: function onItemClick() {
+          return handleIconClick(ICONS.SETTINGS);
+        },
         settingsVisible: settingsVisible
       }));
     }
@@ -34805,7 +31856,7 @@ var ICONS = {
 };
 var AppBar$1 = function AppBar(props) {
   var _window$toolkitEnv3;
-  var coreAppConfig = storage.getLocalItem('opsportal-core:config');
+  var coreAppConfig = storage$1.getLocalItem('opsportal-core:config');
   var enableNewToolkitFeatures = coreAppConfig.enableNewToolkitFeatures,
     ideaNoteUri = coreAppConfig.ideaNoteUri;
   var _useState = React.useState(false),
@@ -34817,13 +31868,13 @@ var AppBar$1 = function AppBar(props) {
     settingsVisible = _useState4[0],
     setSettingsVisible = _useState4[1];
   var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isCalloutVisible = _useState6[0],
-    setCalloutVisible = _useState6[1];
+    _useState6 = _slicedToArray(_useState5, 2);
+    _useState6[0];
+    var setCalloutVisible = _useState6[1];
   var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    calloutTarget = _useState8[0],
-    setCalloutTarget = _useState8[1];
+    _useState8 = _slicedToArray(_useState7, 2);
+    _useState8[0];
+    var setCalloutTarget = _useState8[1];
   var _useState9 = React.useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
     notificationsVisible = _useState10[0],
@@ -34854,12 +31905,13 @@ var AppBar$1 = function AppBar(props) {
     notifications = props.notifications,
     onDismiss = props.onDismiss,
     ActionComponent = props.ActionComponent,
-    saveActionComponentState = props.saveActionComponentState;
-    props.onLogoutItemClicked;
-    var mihelpAppPath = props.mihelpAppPath,
+    saveActionComponentState = props.saveActionComponentState,
+    onLogoutItemClicked = props.onLogoutItemClicked,
+    mihelpAppPath = props.mihelpAppPath,
     showMihelpDot = props.showMihelpDot;
   var _useWindowSize = useWindowSize(),
     width = _useWindowSize.width;
+    _useWindowSize.height;
   var _useState19 = React.useState(0),
     _useState20 = _slicedToArray(_useState19, 2),
     count = _useState20[0],
@@ -34874,6 +31926,13 @@ var AppBar$1 = function AppBar(props) {
       setNotificationsVisible(false);
     }
   }, [mihelpVisible]);
+
+  // useEffect(()=>{
+  //   if(isCalloutVisible){
+  //     setViewPortHeight(height)
+  //   }
+  // },[isCalloutVisible])
+
   React.useEffect(function () {
     if (ideaNoteVisible) {
       setMihelpVisible(false);
@@ -35040,7 +32099,7 @@ var AppBar$1 = function AppBar(props) {
       setSettingsVisible(false);
     }
   };
-  var stack = (_window$toolkitEnv3 = window.toolkitEnv) !== null && _window$toolkitEnv3 !== void 0 && _window$toolkitEnv3.STACK ? window.toolkitEnv.STACK : process.env.STACK;
+  (_window$toolkitEnv3 = window.toolkitEnv) !== null && _window$toolkitEnv3 !== void 0 && _window$toolkitEnv3.STACK ? window.toolkitEnv.STACK : process.env.STACK;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-e2e": "cc-AppBar",
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--root"
@@ -35074,14 +32133,7 @@ var AppBar$1 = function AppBar(props) {
       setSettingsVisible: setSettingsVisible,
       handleIconClick: handleIconClick,
       ideaNoteVisible: ideaNoteVisible
-    }), function (target) {
-      setCalloutTarget(target);
-      setCalloutVisible(true);
-      setNotificationsVisible(false);
-      setIdeaNoteVisible(false);
-      setMihelpVisible(false);
-      setShowSearchContainer(false);
-    }),
+    })),
     overflowSetStyles: overflowSetStyles,
     overflowIcon: "CollapseMenu",
     overflowIconStyles: overflowIconStyles
@@ -35103,21 +32155,7 @@ var AppBar$1 = function AppBar(props) {
     },
     role: props.selectedRole || props.role,
     yardNumber: props.selectedYard || props.yardNumber
-  })), isCalloutVisible ? /*#__PURE__*/React__default["default"].createElement(Callout, {
-    ariaLabelledBy: "settings",
-    ariaDescribedBy: "settings",
-    role: "dialog",
-    gapSpace: 0,
-    target: "#".concat(calloutTarget),
-    onDismiss: function onDismiss() {
-      return setCalloutVisible(false);
-    },
-    isBeakVisible: false
-  }, /*#__PURE__*/React__default["default"].createElement("div", null, !stack || stack === 'c' ? /*#__PURE__*/React__default["default"].createElement(SettingsView$1, {
-    onSave: onSave
-  }) : null, stack === 'uk' ? /*#__PURE__*/React__default["default"].createElement(SettingsView, {
-    onSave: onSave
-  }) : null)) : null, ideaNoteVisible && /*#__PURE__*/React__default["default"].createElement("div", {
+  })), ideaNoteVisible && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetContainer"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--ideaWidgetHide",
@@ -35141,8 +32179,7 @@ var AppBar$1 = function AppBar(props) {
       bottom: '0',
       right: '0',
       height: '100%',
-      width: '90vw',
-      maxWidth: '443px',
+      width: '400px',
       backgroundColor: 'white'
     },
     src: ideaNoteToken === "TOKEN_ERROR" ? ideaNoteUri : "".concat(ideaNoteUri, "&auth.jwt=").concat(ideaNoteToken)
@@ -35152,8 +32189,7 @@ var AppBar$1 = function AppBar(props) {
       bottom: '0',
       right: '0',
       height: '100vh',
-      width: '90vw',
-      maxWidth: '443px',
+      width: '400px',
       backgroundColor: 'white'
     }
   })), mihelpVisible && /*#__PURE__*/React__default["default"].createElement(HelpSideBar, {
@@ -35168,10 +32204,7 @@ var AppBar$1 = function AppBar(props) {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--sideBarWrapper",
     onClick: closeSidebar
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv",
-    style: {
-      width: getNotificationWrapperWidth()
-    }
+    className: "utilities_ops-app-frame_AppBarComponent_AppBar--innerNotificationDiv"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "utilities_ops-app-frame_AppBarComponent_AppBar--notificationsHeader"
   }, /*#__PURE__*/React__default["default"].createElement("span", null, "Recent Notifications")), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -35188,20 +32221,26 @@ var AppBar$1 = function AppBar(props) {
     closeSearch: function closeSearch() {
       return setShowSearchContainer(false);
     }
-  })));
+  })), settingsVisible && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "utilities_ops-app-frame_AppBarComponent_AppBar--settingsSidebarWrapper",
+    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, {
+    onSave: onSave,
+    onLogoutItemClicked: onLogoutItemClicked
+  }) : null, process.env.STACK === 'uk' ? /*#__PURE__*/React__default["default"].createElement(SettingsView, {
+    onSave: onSave,
+    onLogoutItemClicked: onLogoutItemClicked
+  }) : null)));
 };
 AppBar$1.defaultProps = {
   config: ['flag', 'role', 'yard'],
   role: ''
 };
 
-var PHONE_STATUS = {
-  Available: 'Available',
-  Offline: 'Offline'
-};
-
-var css_248z$7 = ".utilities_ops-app-frame_Flag_Flag--Flag {\r\n  margin-right: 12px;\r\n  height: 22px;\r\n  /* border-radius: 20px; */\r\n}\r\n\r\n/* HACK: ALL OF THIS CSS IS COMPLETELY UNSTABLE, BUT I HAVE TO SUBMIT A\r\n   PR TO CORE-COMPONENTS TO MAKE IT MORE STABLE WHICH IS A LOT OF WORK\r\n   SO LETS JUST NOT INLINE STYLES ANYMORE K?\r\n*/\r\n\r\n[class*='AppBar-roleAndFlag'] {\r\n  align-items: center;\r\n}\r\n\r\n[class*='AppBar-roleAndFlag'] > .text.role {\r\n  margin: 0 !important;\r\n}\r\n\r\n[class*='AppBar-yardNumber'] {\r\n  align-items: center;\r\n}\r\n\r\n[class*='AppBar-yardNumber'] > .yardNumber {\r\n  margin-left: 8px;\r\n  margin-top: 0px !important;\r\n}\r\n";
-styleInject(css_248z$7);
+var css_248z$6 = ".utilities_ops-app-frame_Flag_Flag--Flag {\r\n  margin-right: 12px;\r\n  height: 22px;\r\n  /* border-radius: 20px; */\r\n}\r\n\r\n/* HACK: ALL OF THIS CSS IS COMPLETELY UNSTABLE, BUT I HAVE TO SUBMIT A\r\n   PR TO CORE-COMPONENTS TO MAKE IT MORE STABLE WHICH IS A LOT OF WORK\r\n   SO LETS JUST NOT INLINE STYLES ANYMORE K?\r\n*/\r\n\r\n[class*='AppBar-roleAndFlag'] {\r\n  align-items: center;\r\n}\r\n\r\n[class*='AppBar-roleAndFlag'] > .text.role {\r\n  margin: 0 !important;\r\n}\r\n\r\n[class*='AppBar-yardNumber'] {\r\n  align-items: center;\r\n}\r\n\r\n[class*='AppBar-yardNumber'] > .yardNumber {\r\n  margin-left: 8px;\r\n  margin-top: 0px !important;\r\n}\r\n";
+styleInject(css_248z$6);
 
 var getFlagUri = function getFlagUri() {
   var countryCode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'US';
@@ -35215,8 +32254,8 @@ var Flag = function Flag(props) {
   });
 };
 
-var css_248z$6 = "#utilities_ops-app-frame_CallCapsule_style--flex-iframe {\r\n  width: '100%';\r\n   height: '100%';\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--flex-bar {\r\n  position: relative;\r\n  z-index: 9999;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iframeSection {\r\n  border: 1px solid #233659;\r\n  border-radius: 8px !important;\r\n  overflow: hidden;\r\n  width: 560px;\r\n  height: 610px;\r\n  position: absolute;\r\n  top: 53px;\r\n  z-index: 100;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--fullScreen{\r\n  border: 1px solid #233659;\r\n  border-radius: 20px !important;\r\n  overflow: hidden;\r\n  width: 98vw;\r\n  height: 610px;\r\n  position: absolute;\r\n  top: 53px;\r\n  left: -8.7em;\r\n  z-index: 100;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--CallerPillCon {\r\n  display: flex;\r\n  background-color: #8eacdc;\r\n  border-radius: 30px;\r\n  justify-content: center;\r\n  padding: 2px 10px;\r\n  min-width: 300px;\r\n  min-height: 37px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--leftPillCon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n  min-width: 125px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading1 {\r\n  font-size: 12px;\r\n  font-weight: bold;\r\n  color: #3c4656;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iframePopUp {\r\n  display: block;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading6 {\r\n  font-size: 10px;\r\n  color: #3c4656;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading7{\r\n  font-size: 12px;\r\n  background: yellow;\r\n  border-radius: 20px;\r\n  padding: 0 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--centerPillCon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 6px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--rightPillCon{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 6px;\r\n  min-width: 152px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--statusIndicator {\r\n  padding: 0 3px 5px 0;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialpadCon {\r\n  position: absolute;\r\n  top: 55px;\r\n  width: 100%;\r\n  left: 5em;\r\n  max-width: 202px;\r\n  padding: 15px;\r\n  background: #263238;\r\n  border-radius: 22.5px;\r\n  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);\r\n  z-index: 10;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon {\r\n  width: 100%;\r\n  margin-bottom: 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon input {\r\n  background: #37474f;\r\n  color: #cfd8dc;\r\n  padding: 5px;\r\n  border: none;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon input:focus {\r\n  outline: none;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--btn {\r\n  display: inline-block;\r\n  width: calc(33.33% - 10px);\r\n  font-size: 14px;\r\n  background: transparent;\r\n  border: none;\r\n  color: #cfd8dc;\r\n  padding: 10px 0;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--btn:hover {\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_CallCapsule_style--btn:nth-child(3n - 1) {\r\n  margin: 0 15px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--visible {\r\n  visibility: visible;\r\n  overflow: hidden;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--hidden {\r\n  visibility: hidden;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--callActionCon {\r\n  display: flex;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--marginLeft {\r\n  margin-left: 40px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--CallerPillCon hr {\r\n  width: 100%;\r\n  margin: 0;\r\n  outline: none;\r\n  border: none;\r\n  border-right: 1px solid #ddd;\r\n}\r\n\r\n@-webkit-keyframes utilities_ops-app-frame_CallCapsule_style--shake {\r\n  0% {\r\n    -webkit-transform: translate(2px, 1px) rotate(0deg);\r\n  }\r\n  10% {\r\n    -webkit-transform: translate(-1px, -2px) rotate(-1deg);\r\n  }\r\n  20% {\r\n    -webkit-transform: translate(-3px, 0px) rotate(1deg);\r\n  }\r\n  30% {\r\n    -webkit-transform: translate(0px, 2px) rotate(0deg);\r\n  }\r\n  40% {\r\n    -webkit-transform: translate(1px, -1px) rotate(1deg);\r\n  }\r\n  50% {\r\n    -webkit-transform: translate(-1px, 2px) rotate(-1deg);\r\n  }\r\n  60% {\r\n    -webkit-transform: translate(-3px, 1px) rotate(0deg);\r\n  }\r\n  70% {\r\n    -webkit-transform: translate(2px, 1px) rotate(-1deg);\r\n  }\r\n  80% {\r\n    -webkit-transform: translate(-1px, -1px) rotate(1deg);\r\n  }\r\n  90% {\r\n    -webkit-transform: translate(2px, 2px) rotate(0deg);\r\n  }\r\n  100% {\r\n    -webkit-transform: translate(1px, -2px) rotate(-1deg);\r\n  }\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--shake {\r\n  -webkit-animation-name: utilities_ops-app-frame_CallCapsule_style--shake;\r\n  -webkit-animation-duration: 1.3s;\r\n  -webkit-transform-origin: 50% 50%;\r\n  -webkit-animation-iteration-count: infinite;\r\n  -webkit-animation-timing-function: linear;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--actionIcon {\r\n  position: relative;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--wrapText {\r\n  font-size: 9px;\r\n  position: absolute;\r\n  top: 22px;\r\n}\r\n\r\n.utilities_ops-app-frame_CallCapsule_style--container {\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  position: relative;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--numberCircle {\r\n  border-radius: 40%;\r\n  cursor: pointer;\r\n  width: 28px;\r\n  height: 18px;\r\n  padding: 0px 11px;\r\n  background: #fff;\r\n  color: #666;\r\n  text-align: center;\r\n  font-size: 12px;\r\n  margin-bottom: 9px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--unreadCircle{\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  width: 16px;\r\n  height: 16px;\r\n  padding: 2px 2px 3px;\r\n  background: #e81010;\r\n  color: #fff;\r\n  text-align: center;\r\n  font-size: 8px;\r\n  position: absolute;\r\n  left: 18px;\r\n  top: -3px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iconBtn{\r\n  margin: 0 5px;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iconBtn:focus{\r\n  outline: none !important\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--icon{\r\n  color: #000;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--disabledIcon svg{\r\n opacity:0.4;\r\n  cursor: not-allowed;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialog{\r\nwidth: 420px;\r\nheight: 115px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogCon{\r\n  position: absolute;\r\n    top: 35%;\r\n    left: 36%;\r\n    border: 1px solid rgb(204, 204, 204);\r\n    background: rgb(255, 255, 255);\r\n    overflow: auto;\r\n    border-radius: 4px;\r\n    outline: none;\r\n    padding: 0px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogHeading{\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  padding: 10px 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogInfo{\r\n padding: 20px 10px;\r\n text-align: center;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogBtn{\r\n  margin: 5px;\r\n  text-align:right;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--warningMsg {\r\n  color: #fff;\r\n  display: flex;\r\n  background-color: #dd392b;\r\n  border-radius: 7px;\r\n  justify-content: center;\r\n  min-width: 300px;\r\n  font-size: 12px;\r\n  margin: 0 25px -1px 25px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--capsuleSpinner{\r\n  position: absolute;\r\n  left:47%;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--opacity{\r\n  opacity: 0.5;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--closeFlexIcon {\r\n  position: absolute;\r\n  right: 2px;\r\n  top: 14px;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--callIndicator{\r\n  margin-top: 7px;\r\n}";
-styleInject(css_248z$6);
+var css_248z$5 = "#utilities_ops-app-frame_CallCapsule_style--flex-iframe {\r\n  width: '100%';\r\n   height: '100%';\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--flex-bar {\r\n  position: relative;\r\n  z-index: 9999;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iframeSection {\r\n  border: 1px solid #233659;\r\n  border-radius: 8px !important;\r\n  overflow: hidden;\r\n  width: 560px;\r\n  height: 610px;\r\n  position: absolute;\r\n  top: 53px;\r\n  z-index: 100;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--fullScreen{\r\n  border: 1px solid #233659;\r\n  border-radius: 20px !important;\r\n  overflow: hidden;\r\n  width: 98vw;\r\n  height: 610px;\r\n  position: absolute;\r\n  top: 53px;\r\n  left: -8.7em;\r\n  z-index: 100;\r\n  background: #fff;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--CallerPillCon {\r\n  display: flex;\r\n  background-color: #8eacdc;\r\n  border-radius: 30px;\r\n  justify-content: center;\r\n  padding: 2px 10px;\r\n  min-width: 300px;\r\n  min-height: 37px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--leftPillCon {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-direction: column;\r\n  min-width: 125px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading1 {\r\n  font-size: 12px;\r\n  font-weight: bold;\r\n  color: #3c4656;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iframePopUp {\r\n  display: block;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading6 {\r\n  font-size: 10px;\r\n  color: #3c4656;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--heading7{\r\n  font-size: 12px;\r\n  background: yellow;\r\n  border-radius: 20px;\r\n  padding: 0 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--centerPillCon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 6px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--rightPillCon{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0 6px;\r\n  min-width: 152px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--statusIndicator {\r\n  padding: 0 3px 5px 0;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialpadCon {\r\n  position: absolute;\r\n  top: 55px;\r\n  width: 100%;\r\n  left: 5em;\r\n  max-width: 202px;\r\n  padding: 15px;\r\n  background: #263238;\r\n  border-radius: 22.5px;\r\n  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.2);\r\n  z-index: 10;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon {\r\n  width: 100%;\r\n  margin-bottom: 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon input {\r\n  background: #37474f;\r\n  color: #cfd8dc;\r\n  padding: 5px;\r\n  border: none;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--inputCon input:focus {\r\n  outline: none;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--btn {\r\n  display: inline-block;\r\n  width: calc(33.33% - 10px);\r\n  font-size: 14px;\r\n  background: transparent;\r\n  border: none;\r\n  color: #cfd8dc;\r\n  padding: 10px 0;\r\n  text-align: center;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--btn:hover {\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_CallCapsule_style--btn:nth-child(3n - 1) {\r\n  margin: 0 15px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--visible {\r\n  visibility: visible;\r\n  overflow: hidden;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--hidden {\r\n  visibility: hidden;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--callActionCon {\r\n  display: flex;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--marginLeft {\r\n  margin-left: 40px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--CallerPillCon hr {\r\n  width: 100%;\r\n  margin: 0;\r\n  outline: none;\r\n  border: none;\r\n  border-right: 1px solid #ddd;\r\n}\r\n\r\n@-webkit-keyframes utilities_ops-app-frame_CallCapsule_style--shake {\r\n  0% {\r\n    -webkit-transform: translate(2px, 1px) rotate(0deg);\r\n  }\r\n  10% {\r\n    -webkit-transform: translate(-1px, -2px) rotate(-1deg);\r\n  }\r\n  20% {\r\n    -webkit-transform: translate(-3px, 0px) rotate(1deg);\r\n  }\r\n  30% {\r\n    -webkit-transform: translate(0px, 2px) rotate(0deg);\r\n  }\r\n  40% {\r\n    -webkit-transform: translate(1px, -1px) rotate(1deg);\r\n  }\r\n  50% {\r\n    -webkit-transform: translate(-1px, 2px) rotate(-1deg);\r\n  }\r\n  60% {\r\n    -webkit-transform: translate(-3px, 1px) rotate(0deg);\r\n  }\r\n  70% {\r\n    -webkit-transform: translate(2px, 1px) rotate(-1deg);\r\n  }\r\n  80% {\r\n    -webkit-transform: translate(-1px, -1px) rotate(1deg);\r\n  }\r\n  90% {\r\n    -webkit-transform: translate(2px, 2px) rotate(0deg);\r\n  }\r\n  100% {\r\n    -webkit-transform: translate(1px, -2px) rotate(-1deg);\r\n  }\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--shake {\r\n  -webkit-animation-name: utilities_ops-app-frame_CallCapsule_style--shake;\r\n  -webkit-animation-duration: 1.3s;\r\n  -webkit-transform-origin: 50% 50%;\r\n  -webkit-animation-iteration-count: infinite;\r\n  -webkit-animation-timing-function: linear;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--actionIcon {\r\n  position: relative;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--wrapText {\r\n  font-size: 9px;\r\n  position: absolute;\r\n  top: 22px;\r\n}\r\n\r\n.utilities_ops-app-frame_CallCapsule_style--container {\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  position: relative;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--numberCircle {\r\n  border-radius: 40%;\r\n  cursor: pointer;\r\n  width: 28px;\r\n  height: 18px;\r\n  padding: 0px 11px;\r\n  background: #fff;\r\n  color: #666;\r\n  text-align: center;\r\n  font-size: 12px;\r\n  margin-bottom: 9px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--unreadCircle{\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  width: 16px;\r\n  height: 16px;\r\n  padding: 2px 2px 3px;\r\n  background: #e81010;\r\n  color: #fff;\r\n  text-align: center;\r\n  font-size: 8px;\r\n  position: absolute;\r\n  left: 18px;\r\n  top: -3px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iconBtn{\r\n  margin: 0 5px;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--iconBtn:focus{\r\n  outline: none !important\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--icon{\r\n  color: #000;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--disabledIcon svg{\r\n opacity:0.4;\r\n  cursor: not-allowed;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialog{\r\nwidth: 420px;\r\nheight: 115px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogCon{\r\n  position: absolute;\r\n    top: 35%;\r\n    left: 36%;\r\n    border: 1px solid rgb(204, 204, 204);\r\n    background: rgb(255, 255, 255);\r\n    overflow: auto;\r\n    border-radius: 4px;\r\n    outline: none;\r\n    padding: 0px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogHeading{\r\n  background-color: #1d5ab9;\r\n  color: #fff;\r\n  padding: 10px 5px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogInfo{\r\n padding: 20px 10px;\r\n text-align: center;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--dialogBtn{\r\n  margin: 5px;\r\n  text-align:right;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--warningMsg {\r\n  color: #fff;\r\n  display: flex;\r\n  background-color: #dd392b;\r\n  border-radius: 7px;\r\n  justify-content: center;\r\n  min-width: 300px;\r\n  font-size: 12px;\r\n  margin: 0 25px -1px 25px;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--capsuleSpinner{\r\n  position: absolute;\r\n  left:47%;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--opacity{\r\n  opacity: 0.5;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--closeFlexIcon {\r\n  position: absolute;\r\n  right: 2px;\r\n  top: 14px;\r\n  cursor: pointer;\r\n}\r\n.utilities_ops-app-frame_CallCapsule_style--callIndicator{\r\n  margin-top: 7px;\r\n}";
+styleInject(css_248z$5);
 
 var tabbable_1 = createCommonjsModule(function (module, exports) {
 
@@ -36676,35 +33715,6 @@ ReactModal.setAppElement('*');
 
 storage$1.flexLoaded;
 
-var defaultAutoSelectProps = {
-  optionStyleProps: {
-    rowHeight: 40,
-    optionsMinHeight: 200
-  },
-  width: 200
-};
-[_objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
-  name: 'barcode_label_printers',
-  label: 'Bar Code Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
-  name: 'check_printers',
-  label: 'Check Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
-  name: 'standard_printers',
-  label: 'Standard Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
-  name: 'windshield_label_printers',
-  label: 'Wind Shield Printer'
-}), _objectSpread2(_objectSpread2({}, defaultAutoSelectProps), {}, {
-  name: 'text_printers',
-  label: 'Dot Matrix Printers'
-})];
-
-propEq$1('is_default', true);
-
-var css_248z$5 = ".utilities_ops-app-frame_PrinterDialog_PrinterDialog--printerSettings {\r\n  width: 700px;\r\n  padding: 10px;\r\n  background: #f1f1f1;\r\n}\r\n\r\n.utilities_ops-app-frame_PrinterDialog_PrinterDialog--buttonBox {\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: flex-end;\r\n  padding-top: 5px;\r\n}";
-styleInject(css_248z$5);
-
 function LatestReleaseDialog(_ref) {
   var release = _ref.release,
     handleClose = _ref.handleClose,
@@ -37053,6 +34063,9 @@ function startWebSocketConnection(updateNotifications, updateAllNotificationsLis
       console.log('WebSocket connection has been opened');
     };
     client.onmessage = function (message) {
+      if ((message === null || message === void 0 ? void 0 : message.data) === '_pong_' || (message === null || message === void 0 ? void 0 : message.data) === '_ping_') {
+        return;
+      }
       var notification = [];
       try {
         var _newNotification$;
@@ -37255,22 +34268,18 @@ var AppBar = function AppBar(_ref) {
     _useState2 = _slicedToArray(_useState, 2);
     _useState2[0];
     var setMounted = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2);
-    _useState4[0];
-    var setPrinterDialogOpen = _useState4[1];
-  var _useState5 = React.useState(null),
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    latestRelease = _useState4[0],
+    setLatestRelease = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    latestRelease = _useState6[0],
-    setLatestRelease = _useState6[1];
+    showMihelpDot = _useState6[0],
+    setShowMihelpDot = _useState6[1];
   var _useState7 = React.useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    showMihelpDot = _useState8[0],
-    setShowMihelpDot = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    showMihelpTooltip = _useState10[0],
-    setShowMihelpTooltip = _useState10[1];
+    showMihelpTooltip = _useState8[0],
+    setShowMihelpTooltip = _useState8[1];
   var tileData = findAppData(coreAppConfig.tiles || []) || {};
   var mihelpAppPath = isCoreRoute && !window.location.pathname.includes('embedded') ? null : tileData.mihelpAppPath;
   var isMihelpEnabled;
@@ -37331,7 +34340,7 @@ var AppBar = function AppBar(_ref) {
           case 8:
             _context.prev = 8;
             _context.t0 = _context["catch"](0);
-            console.log('+++fetch error=', _context.t0);
+            console.log('fetch error=', _context.t0);
           case 11:
           case "end":
             return _context.stop();
@@ -37420,9 +34429,6 @@ var AppBar = function AppBar(_ref) {
       var isCoreApp = (_window$toolkitEnv = window.toolkitEnv) !== null && _window$toolkitEnv !== void 0 && _window$toolkitEnv.IS_CORE_APP ? window.toolkitEnv.IS_CORE_APP : process.env.IS_CORE_APP;
       return isCoreApp ? history.push('/settings') : window.location.assign('/settings');
     }
-    if (item.key === 'printers') {
-      setPrinterDialogOpen(true);
-    }
     if (item.key === 'logout') {
       var _cookies2 = browserCookies.all();
       Object.keys(_cookies2).forEach(function (cookieKey) {
@@ -37456,28 +34462,32 @@ var AppBar = function AppBar(_ref) {
     var event = new Event('togglePhoneAvailability');
     window.dispatchEvent(event);
   };
+  var _useState9 = React.useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    notifications = _useState10[0],
+    setNotifications = _useState10[1];
   var _useState11 = React.useState([]),
     _useState12 = _slicedToArray(_useState11, 2),
-    notifications = _useState12[0],
-    setNotifications = _useState12[1];
+    listOfAllNotifications = _useState12[0],
+    setListOfAllNotifications = _useState12[1];
   var _useState13 = React.useState([]),
     _useState14 = _slicedToArray(_useState13, 2),
-    listOfAllNotifications = _useState14[0],
-    setListOfAllNotifications = _useState14[1];
-  var _useState15 = React.useState([]),
+    listOfAllFirebaseNotifications = _useState14[0],
+    setListOfAllFirebaseNotifications = _useState14[1];
+  var _useState15 = React.useState(),
     _useState16 = _slicedToArray(_useState15, 2),
-    listOfAllFirebaseNotifications = _useState16[0],
-    setListOfAllFirebaseNotifications = _useState16[1];
-  var _useState17 = React.useState(),
+    socketClient = _useState16[0],
+    setSocketClient = _useState16[1];
+  var _useState17 = React.useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    socketClient = _useState18[0],
-    setSocketClient = _useState18[1];
-  var _useState19 = React.useState(false),
-    _useState20 = _slicedToArray(_useState19, 2),
-    firebaseInitialized = _useState20[0],
-    setFirebaseinitialized = _useState20[1];
+    firebaseInitialized = _useState18[0],
+    setFirebaseinitialized = _useState18[1];
   var listOfAllNotificationsRef = React.useRef(listOfAllNotifications);
   var socketRetryCountRef = React.useRef(0);
+  var _useState19 = React.useState(null),
+    _useState20 = _slicedToArray(_useState19, 2),
+    pingInterval = _useState20[0],
+    setPingInterval = _useState20[1];
   React.useEffect(function () {
     listOfAllNotificationsRef.current = listOfAllNotifications;
   }, [listOfAllNotifications]);
@@ -37606,7 +34616,13 @@ var AppBar = function AppBar(_ref) {
     if (socketRetryCountRef.current < 15) {
       socketRetryCountRef.current = socketRetryCountRef.current + 1;
       socketClient && socketClient.close();
-      setSocketClient(startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket));
+      clearTimeout(pingInterval);
+      var client = startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket);
+      var pingIntervalInSec = coreAppConfig.nchanPingIntervalInSec || 30;
+      setPingInterval(setInterval(function () {
+        client.send('_ping_');
+      }, pingIntervalInSec * 1000));
+      setSocketClient(client);
     }
   };
   var handleVisibilityChange = function handleVisibilityChange() {
@@ -37630,6 +34646,7 @@ var AppBar = function AppBar(_ref) {
     setListOfAllNotifications([]);
     setListOfAllFirebaseNotifications([]);
     socketClient && socketClient.close();
+    clearTimeout(pingInterval);
     if (coreAppConfig && coreAppConfig.tiles) {
       var currentApp = window.location.pathname === '/' ? 'Ops Home' : window.location.pathname;
       var currentTile = history.location.pathname !== '/login' && coreAppConfig.tiles.find(function (tile) {
@@ -37643,7 +34660,12 @@ var AppBar = function AppBar(_ref) {
         if (notificationsSource.includes('Nchan')) {
           fetchG2Notifications(updateNotifications, updateAllNotificationsList);
           if (!(window.navigator.userAgent.includes("Chrome") && window.location.href.includes("localhost"))) {
-            setSocketClient(startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket));
+            var client = startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket);
+            var pingIntervalInSec = coreAppConfig.nchanPingIntervalInSec || 30;
+            setPingInterval(setInterval(function () {
+              client.send('_ping_');
+            }, pingIntervalInSec * 1000));
+            setSocketClient(client);
           }
         }
         if (!firebaseInitialized && notificationsSource.includes('Firebase')) {