The Accordion control is a container used to show content within collapsible panels. Each accordion segment has a labeled header that when clicked expands or collapses the corresponding panel within the available space.
\\r\\n\\r\\n
Usage:
\\r\\n
To use an accordion, simpy require the accordion component within your HTML template with the following: <require from=\\\"components/accordion/accordion\\\"></require>. You may then add as many accordions as you would like within the template. See the HTML below for an example of the accordion control markup.
\\r\\n\\r\\n
Notes:
\\r\\n
An accordion may contain any HTML content. You may place any valid HTML within the <accordion> </accordion> tags. By default, an accordion's content does not contain any padding that would space itself from the outer edge of the control, so you may want to add padding via CSS to the parent element of the any content that's added to achieve your desired layout objectives.
\\r\\n\\r\\n
The content of the accordion control can be styled to match the needs of the screen being developed. Any custom CSS for these styles should reside within the views associated CSS file. Do not add screen specific styles to accordion.css.
These buttons will allow for most use cases within the app and should be used in favor of building custom buttons. If you need a button style that isn't listed here please consult with Darran or Scott.
\\r\\n\\r\\n
Usage:
\\r\\n
Import button styles within your view's css file with the following @import 'buttons/buttons.css';.
\\r\\n\\r\\n
Note: Button composition within our app
\\r\\n
Most buttons inherit styles from others via the composes feature. For example: .btn--flat composes it's main styles from: .btn. When using composes all styles will be inherited from the composed CSS class, this includes any styles allready composed from within the class you are composing from.
\\r\\n\\r\\n
Note: Add `title` tag to buttons
\\r\\n
Remember to add the `title` tag to each button within our app title=\\\"button title here\\\"
Cards are a core part of the structure of our screens. They act as containers for most of our content as well as\\r\\n building blocks for some of our components.\\r\\n\\r\\n
This is an emerging guide that will grow over time…
\\r\\n
\\r\\n
If Scott Criswell is around, ask and you shall receive. Seriously, no need to style anything custom unless you are feeling like CSS is your new favourite thing and Darran feels the same way. Feel free to ask for help on layout and styles. CSS nerdery is Scott’s job and he being odd as he is likes it.
\\r\\n
Do not add, remove or alter any of the CSS variables within global-variables.css without first consulting with Scott Criswell or Darran Courtney. It is essential that these variables stay consistent throughout the app. This is one example of :root or global styles that we need to keep within the app for shared styles.
\\r\\n
Do not add, remove or alter any styles within buttons.css, cards.css, input-controls.css, ia-tab.css, ia-tab-vertical.css, or ia-table.css without first consulting with Scott Criswell or Darran Courtney.
\\r\\n
If a current .css file exists within src/components its best to ask first before altering it, especially if its any of the files listed above ^^.
\\r\\n
Composition is your friend. If you feel like you need to add a new button style for example you most likely don’t need to add it to button.css (also don’t do that, see above ^^) and can instead compose the styles from button.css within the .css file of your custom control.
\\r\\n
Try not to add position or scale (width/height/margin) code directly to a custom component. Instead allow its parent container within a given page view to determine its position and layout on screen. (This is a general best practice but is not always possible).
\\r\\n
While we do not need to use BEM styles for our CSS it can still be useful in understanding more complex layouts. Use at your discretion.
\\r\\n
For our current use of CSS Modules, we need to load the CSS from the .ts file. Any other method will cause the CSS Modules to fail and cause code bleed (global CSS) within our app. Future versions of Aurelia (coming soon(ish)…) may remove this requirement. Your component CSS file may @import additional styles as needed to support the component feature requirements.
\\r\\n
\\r\\n\\r\\n
Example:
\\r\\n \\r\\n \\r\\n import styles from './component-name.css';\\r\\n\\r\\n export class componentName {\\r\\n public styles = styles;\\r\\n }\\r\\n \\r\\n \\r\\n\\r\\n
Note: Button composition within our app:
\\r\\n
Most buttons inherit styles from others via the composes feature. For example: .btn--flat composes it's main styles from: .btn. When using composes all styles will be inherited from the composed CSS class, this includes any styles allready composed from within the class you are composing from.
\\r\\n\\r\\n
Note: Add `title` tag to buttons
\\r\\n
Remember to add the `title` tag to each button within our app title=\\\"button title here\\\"
While we compile to pure CSS and we use the .css file type during development we are writing PostCSS code within our project. In practice this code looks like CSS or Sass and accepts all parts of the CSS standard. PostCSS allows for code transformation of CSS via JavaScript. As mentioned this code is delivered as pure standards based CSS but with some strong development enhancements including the ability to use emerging features of CSS that are not yet fully supported by todays browsers, and most importantly we have the ability to give our “CSS” scope and encapsulation, allowing us to prevent CSS code bleed throughout our project with the use of CSS Modules. We can also use features like code composition of css selectors. The main goals at the outset were to have scoped, modular, and reusable CSS. Apart from a few edge cases that we are in the process of correcting we have accomplished this goal with the combination of PostCSS and CSS Modules within this project.
\\r\\n\\r\\n
Core benefits of PostCSS:
\\r\\n
\\r\\n
Allows for use of CSS Modules
\\r\\n
Extensive pluggable architecture (we have several plugins installed currently)
\\r\\n
Polyfills allowing tomorrows CSS today (for example, our use of the CSS color-mod feature set)
\\r\\n
Auto prefixing, no more need to write browser specific prefixes
\\r\\n
Ability to use stylelint for CSS
\\r\\n
\\r\\n\\r\\n
Core benefits of CSS Modules:
\\r\\n
\\r\\n
No more CSS code conflicts
\\r\\n
Explicit dependencies
\\r\\n
No global scope (unless explicitly requested – Note: While this is something we do in places within the app today these are known edge cases and working with global scope it is strongly discouraged. We are looking to refactor our code to remove any use of global scope when and where we can.)
\\r\\n
\\r\\n\\r\\n
Currently installed PostCSS plugins (see package.json):
\\r\\n
Additional plugins may be added to further enhance our development experience once vetted and approved. Note: Be careful when adding plugins to the project, some plugins prevent others from working correctly or have dependencies that we may not want to support at this time. Available PostCSS plugins can be searched here: https://www.postcss.parts/
\\r\\n As the name implies our Empty State component is used to show when a section within our app contains no content. This control is generally reserved for top level notifications of an empty section of the app for example when a client has no policies. This component can and should be customized with a unique message and icon for each section that it is placed within, the steps required to add this customization are detailed here.\\r\\n
\\r\\n\\r\\n
HTML template for layout:
\\r\\n
\\r\\n Remember to require the component at the top of the HTML template to allow access to empty-state.\\r\\n
\\r\\n
\\r\\n This component contains an attribute to add a custom icon. Label this attribute to match your screen. For example, if you are working on the 'Policies' screen you would add icon=\\\"policies\\\" as the icon attribute.\\r\\n
\\r\\n\\r\\n
Note:
\\r\\n
\\r\\n Remember to add a conditional check within empty-state to determine when the component should be displayed (i.e. when the screen is empty).\\r\\n That check is in the form of an if.bind=\\\"\\\" binding. In this case it checks for empty state as follows: if.bind=\\\"showEmptyState\\\" by referencing \\\"showEmptyState\\\" within the related policies.ts file.\\r\\n
\\r\\n Open empty-state.css. Add the class for your custom icon as follows. This class name should match the icon=\\\"icon-name\\\" attribute within the emty-state component you placed in the HTML template.\\r\\n
\\r\\n
\\r\\n For the creation of a new icon see Darran or Scott.\\r\\n
Translation code for custom empty state messaging:
\\r\\n
\\r\\n Open translation.json. Add your tailored message within the \\\"emptyState\\\": {} node, and structure as follows.\\r\\n
\\r\\n \\r\\n \\\"emptyState\\\": {\\r\\n \\\"clientPolicies\\\": {\\r\\n \\\"heading\\\": \\\"There are no policies for this client\\\"\\r\\n },\\r\\n }\\r\\n \\r\\n\\r\\n
Empty state example:
\\r\\n
\\r\\n \\r\\n There are no policies for this client\\r\\n \\r\\n
The variables listed below represent the global variables that are free to use within the app. While the global-variables.css file contains some additional variables only the variables documented here should be used in general development without consulting Darran or Scott
\\r\\n\\r\\n
Usage:
\\r\\n
Import global variables within your view's css file with the following @import 'global-variables.css';.
\\r\\n\\r\\n
Note:
\\r\\n
In practice importing global-variables.css shouldn't be required but our current build process requires it in some cases. Do not import global varables within a new view unless you note build errors relating to missing global variables.
\\r\\n
\\r\\n\\r\\n \\r\\n \\r\\n
\\r\\n
Brand Colors
\\r\\n
\\r\\n \\r\\n
\\r\\n
--color-brand
\\r\\n
--color-brand--dark
\\r\\n
--color-brand--vibrant
\\r\\n
--color-brand--bright
\\r\\n
--color-brand--light
\\r\\n
--color-brand--extra-light
\\r\\n
--color-secondary
\\r\\n
--color-secondary--dark
\\r\\n
--color-secondary--extra-dark
\\r\\n
--color-secondary--light
\\r\\n
--color-secondary--extra-light
\\r\\n
\\r\\n\\r\\n \\r\\n Main brand color - from our logo and used sparingly as an accent color\\r\\n \\r\\n var(--color-brand);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a darker hue\\r\\n \\r\\n var(--color-brand--dark);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a more vibrant hue\\r\\n \\r\\n var(--color-brand--vibrant);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a brighter hue\\r\\n \\r\\n var(--color-brand--bright);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with a lighter hue\\r\\n \\r\\n var(--color-brand--light);\\r\\n \\r\\n\\r\\n \\r\\n Main brand color with an extra light hue\\r\\n \\r\\n var(--color-brand--extra-light);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color - used as an accent color, can be used more frequently than --color-brand\\r\\n \\r\\n var(--color-secondary);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with a darker hue\\r\\n \\r\\n var(--color-secondary--dark);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with an extra dark hue\\r\\n \\r\\n var(--color-secondary--extra-dark);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with a light hue\\r\\n \\r\\n var(--color-secondary--light);\\r\\n \\r\\n\\r\\n \\r\\n Secondary brand color with an extra light hue - Nearly white\\r\\n \\r\\n var(--color-secondary--extra-light);\\r\\n \\r\\n \\r\\n \\r\\n\\r\\n \\r\\n \\r\\n
\\r\\n
General Colors
\\r\\n
\\r\\n \\r\\n
\\r\\n
--color-white
\\r\\n
--color-black
\\r\\n
--color-grey--light
\\r\\n
--color-body-background
\\r\\n
--color-text-body
\\r\\n
--color-highlight
\\r\\n
--color-highlight--bright
\\r\\n
--color-highlight--extra-bright
\\r\\n
--color-alert
\\r\\n
--color-alert--bright
\\r\\n
--color-alert--medium
\\r\\n
--color-alert--light
\\r\\n
--color-alert--success
\\r\\n
--color-alert--warning
\\r\\n
--color-prospect
\\r\\n
\\r\\n\\r\\n \\r\\n White - Having no hue. Like --color-black it is a foundational colour in design\\r\\n \\r\\n var(--color-white);\\r\\n \\r\\n\\r\\n \\r\\n Black - The darkest color. Like --color-white it is a foundational colour in design\\r\\n \\r\\n var(--color-black);\\r\\n \\r\\n\\r\\n \\r\\n Used to define the main background color of the application\\r\\n \\r\\n var(--color-grey--light);\\r\\n \\r\\n\\r\\n \\r\\n Used to define the main background color of the application\\r\\n \\r\\n var(--color-body-background);\\r\\n \\r\\n\\r\\n \\r\\n Used to define the main background color of the application\\r\\n \\r\\n var(--color-text-body);\\r\\n \\r\\n\\r\\n \\r\\n Used to highlight elements of the UI, for example: used for subtle highlights\\r\\n \\r\\n var(--color-highlight);\\r\\n \\r\\n\\r\\n \\r\\n Used to highlight elements of the UI, for example: hover interactions\\r\\n \\r\\n var(--color-highlight--bright);\\r\\n \\r\\n\\r\\n \\r\\n Used to highlight elements of the UI, for example: primary interactions\\r\\n \\r\\n var(--color-highlight--extra-bright);\\r\\n \\r\\n\\r\\n \\r\\n Used to get the users attention, for example: delete buttons and errors\\r\\n \\r\\n var(--color-alert);\\r\\n \\r\\n\\r\\n \\r\\n Alert color with a brighter hue, used as an accent for --color-alert\\r\\n \\r\\n var(--color-alert--bright);\\r\\n \\r\\n\\r\\n \\r\\n Alert color with a more muted hue, used as an accent for --color-alert\\r\\n \\r\\n var(--color-alert--medium);\\r\\n \\r\\n\\r\\n \\r\\n Alert color with a lighter hue, used as an accent for --color-alert\\r\\n \\r\\n var(--color-alert--light);\\r\\n \\r\\n\\r\\n \\r\\n When things are good and you need to show it, this is the color for you! ;)\\r\\n \\r\\n var(--color-success);\\r\\n \\r\\n\\r\\n \\r\\n Use this color to get the attention of the user within the UI\\r\\n \\r\\n var(--color-warning);\\r\\n \\r\\n\\r\\n \\r\\n Used when you want to highlight a prospect within the UI\\r\\n \\r\\n var(--color-prospect);\\r\\n \\r\\n \\r\\n \\r\\n\\r\\n\";\n// Exports\nexport default code;","// Module\nvar code = \"\\r\\n
These icon buttons will allow for most use cases within the app and should be used in favor of building custom icon buttons. If you need an icon button style/type that isn't listed here please consult with Darran or Scott.
\\r\\n
Many icon buttons have alternates without a border for the initial UI state (btn--icon-name-alt). These are used primarily when nested within other controls.
\\r\\n\\r\\n
Usage:
\\r\\n
Import button styles within your view's css file with the following @import 'buttons/buttons.css';
\\r\\n\\r\\n
Note: Add `title` tag to buttons
\\r\\n
Remember to add the `title` tag to each button within our app title=\\\"button title here\\\"
This guide will review how we use CSS and related HTML markup within our application. This is a living document that will be updated and revised as needed and as our application continues to mature.
\\r\\n\\r\\n
Guide contents
\\r\\n
\\r\\n
CSS and our use of PostCSS and CSS Modules
\\r\\n
CSS best practices within our projects
\\r\\n
Documented component library
\\r\\n
External reference
\\r\\n
State of the union
\\r\\n
Some minor typos. ;)
\\r\\n
\\r\\n\\r\\n
Table of contents are to the left. Enjoy the CSS documentation goodness (\\\"goodness\\\" being loosely defined of course)...
The current state of our CSS in development is in reasonably good shape. We have a reliable codebase with very few exceptions. That said code can always be improved, and we have a list of items we would like to clean up and refactor. The code has grown and expanded in scope quite a bit since beginning the design phase of the project several years ago. This growth has seen some accrued code debt that we will be addressing as time and resources allow. Listed below are some notable areas where we would like to review our current CSS, and related implementation.
\\r\\n\\r\\n
\\r\\n
Our current build process is not as efficient as we would like it to be. For example: We render quite a bit of duplicative CSS styles to the browser. Ideally, we would be able to reduce this with some review of our webpack build process and some related refactoring on how we @import CSS files within our app screen views and perhaps some of our components as well.
\\r\\n
We need to review our CSS Modules feature support and its implementation within our build process. For example: we are currently using a base level of the compose feature set but not the more specific compose: class-name from “./style.css” syntax which allows composition of the exact class we need while not needing @import entire CSS files. We currently rely too heavily on using the more general @import method of including items we want to compose from. This is causing unneeded code bloat as we are bringing in entire stylesheets when we only need to reference a few specific classes. These refinements will help with the efficiency enhancements already mentioned
\\r\\n
In general, we can make better use of the power of the CSS Module composes feature. We know this could be even better and gradual refactoring will allow for an even more streamlined and reusable CSS codebase.
\\r\\n
button.css has grown quite a bit and could use some refactoring. For example: we could easily separate all icon buttons into their own icon-buttons.css file. We could also review the styles to see if any of the button classes could be refined, refactored or even in some cases deprecated and removed from the project.
\\r\\n
We may no longer need all the variables within global-variables.css. This should be reviewed and refactored accordingly.
\\r\\n
Some css naming conventions are inconsistent which provides us an opportunity for refinement, code polish and general readability.
\\r\\n
We have some legacy components and controls that are still in use but nearly ready to be removed from the project or otherwise refactored. One example is the use of the modal vs ia-modal components.
\\r\\n
All graphics are either CSS driven or SVG vector files. Some of the .svg images may no longer be needed within the project and/or are not being used. These files can be removed and deprecated when time allows for a proper review.
\\r\\n
We have been forced in places to use global CSS as a temporary workaround. This is a problem that has caused difficulty with our development and caused unwanted code bleed. We need to address this on a case by case bases. Hopefully, we will be able to remove all global references apart from those found within global-variables.css.
\\r\\n
Things can be improved from here and we likely do not have everything listed that could be refined or enhanced in some way. If you have an idea of how we can improve any area of our CSS codebase, please share it with Scott Criswell or Darran Courtney.
\\r\\n
\\r\\n
\\r\\n\\r\\n\";\n// Exports\nexport default code;","// Imports\nimport ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \"../../../../../node_modules/html-loader/dist/runtime/getUrl.js\";\nvar ___HTML_LOADER_IMPORT_0___ = new URL(\"img/logo-home.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_1___ = new URL(\"img/logo-home--hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_2___ = new URL(\"img/iadviser-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_3___ = new URL(\"img/ibroker-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_4___ = new URL(\"img/admin-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_5___ = new URL(\"img/accounts-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_6___ = new URL(\"img/reports-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_7___ = new URL(\"img/lmi-bicalculator-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_8___ = new URL(\"img/lmi-policy-coach-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_9___ = new URL(\"img/lmi-policy-comparison-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_10___ = new URL(\"img/lmirc-logo.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_11___ = new URL(\"img/eclipse-loader.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_12___ = new URL(\"img/ring-loader.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_13___ = new URL(\"img/add.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_14___ = new URL(\"img/add-blue.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_15___ = new URL(\"img/add-blue-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_16___ = new URL(\"img/info-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_17___ = new URL(\"img/questions-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_18___ = new URL(\"img/questions-nav-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_19___ = new URL(\"img/alert-icon--white.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_20___ = new URL(\"img/alert-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_21___ = new URL(\"img/arrow-forward.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_22___ = new URL(\"img/arrow-forward-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_23___ = new URL(\"img/arrow-forward-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_24___ = new URL(\"img/arrow-left-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_25___ = new URL(\"img/arrow-left-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_26___ = new URL(\"img/arrow-left-icon--large.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_27___ = new URL(\"img/arrow-right-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_28___ = new URL(\"img/arrow-right-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_29___ = new URL(\"img/associated-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_30___ = new URL(\"img/associated-nav-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_31___ = new URL(\"img/branch-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_32___ = new URL(\"img/branch-nav-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_33___ = new URL(\"img/close.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_34___ = new URL(\"img/close-white.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_35___ = new URL(\"img/check-white.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_36___ = new URL(\"img/check-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_37___ = new URL(\"img/client-nav--home.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_38___ = new URL(\"img/client-nav--home-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_39___ = new URL(\"img/client-nav--kyc-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_40___ = new URL(\"img/client-nav--kyc.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_41___ = new URL(\"img/client-nav--kyc-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_42___ = new URL(\"img/client-nav--kyc-hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_43___ = new URL(\"img/client-nav--advice-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_44___ = new URL(\"img/client-nav--advice.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_45___ = new URL(\"img/client-nav--advice-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_46___ = new URL(\"img/client-nav--advice-hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_47___ = new URL(\"img/client-nav--insured-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_48___ = new URL(\"img/client-nav--insured.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_49___ = new URL(\"img/client-nav--insured-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_50___ = new URL(\"img/client-nav--insured-hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_51___ = new URL(\"img/client-nav--quotes-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_52___ = new URL(\"img/client-nav--quotes.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_53___ = new URL(\"img/client-nav--quotes-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_54___ = new URL(\"img/client-nav--quotes-hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_55___ = new URL(\"img/client-nav--policies-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_56___ = new URL(\"img/client-nav--policies.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_57___ = new URL(\"img/client-nav--policies-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_58___ = new URL(\"img/client-nav--policies-hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_59___ = new URL(\"img/client-nav--claims-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_60___ = new URL(\"img/client-nav--claims.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_61___ = new URL(\"img/client-nav--claims-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_62___ = new URL(\"img/client-nav--claims-hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_63___ = new URL(\"img/client-nav--tasks-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_64___ = new URL(\"img/client-nav--tasks.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_65___ = new URL(\"img/client-nav--tasks-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_66___ = new URL(\"img/client-nav--documents-active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_67___ = new URL(\"img/client-nav--documents.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_68___ = new URL(\"img/client-nav--documents-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_69___ = new URL(\"img/client-sales-nav-icon--active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_70___ = new URL(\"img/client-sales-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_71___ = new URL(\"img/client-sales-nav-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_72___ = new URL(\"img/close-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_73___ = new URL(\"img/close-nav-icon--hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_74___ = new URL(\"img/close-icon--light.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_75___ = new URL(\"img/close-icon--hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_76___ = new URL(\"img/close-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_77___ = new URL(\"img/contact-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_78___ = new URL(\"img/contact-nav-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_79___ = new URL(\"img/delete-icon-outlined.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_80___ = new URL(\"img/delete-icon--hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_81___ = new URL(\"img/delete-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_82___ = new URL(\"img/delete-icon-blue.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_83___ = new URL(\"img/delete-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_84___ = new URL(\"img/delete-icon-blue--hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_85___ = new URL(\"img/download-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_86___ = new URL(\"img/download-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_87___ = new URL(\"img/upload-solid.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_88___ = new URL(\"img/edit-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_89___ = new URL(\"img/edit-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_90___ = new URL(\"img/email-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_91___ = new URL(\"img/email-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_92___ = new URL(\"img/filter-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_93___ = new URL(\"img/folder-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_94___ = new URL(\"img/folder-locked-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_95___ = new URL(\"img/folder-locked-active-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_96___ = new URL(\"img/folder-locked-icon--hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_97___ = new URL(\"img/fsg-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_98___ = new URL(\"img/fsg-icon--alert.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_99___ = new URL(\"img/fsg-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_100___ = new URL(\"img/mandatory-document-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_101___ = new URL(\"img/mandatory-document-icon--alert.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_102___ = new URL(\"img/general-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_103___ = new URL(\"img/general-nav-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_104___ = new URL(\"img/general-nav-icon-inactive.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_105___ = new URL(\"img/history-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_106___ = new URL(\"img/history-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_107___ = new URL(\"img/recent-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_108___ = new URL(\"img/link-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_109___ = new URL(\"img/map-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_110___ = new URL(\"img/map-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_111___ = new URL(\"img/message-read-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_112___ = new URL(\"img/message-unread-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_113___ = new URL(\"img/money-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_114___ = new URL(\"img/more-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_115___ = new URL(\"img/more-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_116___ = new URL(\"img/more-tabs-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_117___ = new URL(\"img/more-tabs-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_118___ = new URL(\"img/notes-nav-icon--active.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_119___ = new URL(\"img/notes-nav-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_120___ = new URL(\"img/notes-nav-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_121___ = new URL(\"img/notification-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_122___ = new URL(\"img/open-new-window.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_123___ = new URL(\"img/open-new-window--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_124___ = new URL(\"img/outline-search.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_125___ = new URL(\"img/pagination-arrow-right-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_126___ = new URL(\"img/paperclip-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_127___ = new URL(\"img/paperclip-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_128___ = new URL(\"img/person-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_129___ = new URL(\"img/preview-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_130___ = new URL(\"img/preview-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_131___ = new URL(\"img/pre-printed-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_132___ = new URL(\"img/pre-printed-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_133___ = new URL(\"img/print-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_134___ = new URL(\"img/print-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_135___ = new URL(\"img/reports-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_136___ = new URL(\"img/save.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_137___ = new URL(\"img/save-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_138___ = new URL(\"img/select-down-arrow.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_139___ = new URL(\"img/select-down-arrow-enhanced-table.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_140___ = new URL(\"img/settings-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_141___ = new URL(\"img/settings-icon-disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_142___ = new URL(\"img/show-details-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_143___ = new URL(\"img/show-details-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_144___ = new URL(\"img/show-summary-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_145___ = new URL(\"img/show-summary-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_146___ = new URL(\"img/star-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_147___ = new URL(\"img/star-icon-selected.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_148___ = new URL(\"img/stats-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_149___ = new URL(\"img/message-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_150___ = new URL(\"img/message-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_151___ = new URL(\"img/message-icon--new.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_152___ = new URL(\"img/profile-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_153___ = new URL(\"img/table-back-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_154___ = new URL(\"img/table-back-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_155___ = new URL(\"img/tag-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_156___ = new URL(\"img/tag-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_157___ = new URL(\"img/task-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_158___ = new URL(\"img/toggle-arrow.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_159___ = new URL(\"img/toggle-arrow-open.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_160___ = new URL(\"img/undo-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_161___ = new URL(\"img/undo-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_162___ = new URL(\"img/unlink-icon--hover.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_163___ = new URL(\"img/unlink-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_164___ = new URL(\"img/unlink-icon--disabled.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_165___ = new URL(\"img/advanced-search-icon.svg\", import.meta.url);\nvar ___HTML_LOADER_IMPORT_166___ = new URL(\"img/advanced-search-icon--disabled.svg\", import.meta.url);\n// Module\nvar ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);\nvar ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);\nvar ___HTML_LOADER_REPLACEMENT_2___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_2___);\nvar ___HTML_LOADER_REPLACEMENT_3___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_3___);\nvar ___HTML_LOADER_REPLACEMENT_4___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_4___);\nvar ___HTML_LOADER_REPLACEMENT_5___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_5___);\nvar ___HTML_LOADER_REPLACEMENT_6___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_6___);\nvar ___HTML_LOADER_REPLACEMENT_7___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_7___);\nvar ___HTML_LOADER_REPLACEMENT_8___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_8___);\nvar ___HTML_LOADER_REPLACEMENT_9___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_9___);\nvar ___HTML_LOADER_REPLACEMENT_10___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_10___);\nvar ___HTML_LOADER_REPLACEMENT_11___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_11___);\nvar ___HTML_LOADER_REPLACEMENT_12___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_12___);\nvar ___HTML_LOADER_REPLACEMENT_13___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_13___);\nvar ___HTML_LOADER_REPLACEMENT_14___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_14___);\nvar ___HTML_LOADER_REPLACEMENT_15___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_15___);\nvar ___HTML_LOADER_REPLACEMENT_16___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_16___);\nvar ___HTML_LOADER_REPLACEMENT_17___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_17___);\nvar ___HTML_LOADER_REPLACEMENT_18___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_18___);\nvar ___HTML_LOADER_REPLACEMENT_19___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_19___);\nvar ___HTML_LOADER_REPLACEMENT_20___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_20___);\nvar ___HTML_LOADER_REPLACEMENT_21___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_21___);\nvar ___HTML_LOADER_REPLACEMENT_22___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_22___);\nvar ___HTML_LOADER_REPLACEMENT_23___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_23___);\nvar ___HTML_LOADER_REPLACEMENT_24___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_24___);\nvar ___HTML_LOADER_REPLACEMENT_25___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_25___);\nvar ___HTML_LOADER_REPLACEMENT_26___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_26___);\nvar ___HTML_LOADER_REPLACEMENT_27___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_27___);\nvar ___HTML_LOADER_REPLACEMENT_28___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_28___);\nvar ___HTML_LOADER_REPLACEMENT_29___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_29___);\nvar ___HTML_LOADER_REPLACEMENT_30___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_30___);\nvar ___HTML_LOADER_REPLACEMENT_31___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_31___);\nvar ___HTML_LOADER_REPLACEMENT_32___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_32___);\nvar ___HTML_LOADER_REPLACEMENT_33___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_33___);\nvar ___HTML_LOADER_REPLACEMENT_34___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_34___);\nvar ___HTML_LOADER_REPLACEMENT_35___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_35___);\nvar ___HTML_LOADER_REPLACEMENT_36___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_36___);\nvar ___HTML_LOADER_REPLACEMENT_37___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_37___);\nvar ___HTML_LOADER_REPLACEMENT_38___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_38___);\nvar ___HTML_LOADER_REPLACEMENT_39___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_39___);\nvar ___HTML_LOADER_REPLACEMENT_40___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_40___);\nvar ___HTML_LOADER_REPLACEMENT_41___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_41___);\nvar ___HTML_LOADER_REPLACEMENT_42___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_42___);\nvar ___HTML_LOADER_REPLACEMENT_43___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_43___);\nvar ___HTML_LOADER_REPLACEMENT_44___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_44___);\nvar ___HTML_LOADER_REPLACEMENT_45___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_45___);\nvar ___HTML_LOADER_REPLACEMENT_46___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_46___);\nvar ___HTML_LOADER_REPLACEMENT_47___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_47___);\nvar ___HTML_LOADER_REPLACEMENT_48___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_48___);\nvar ___HTML_LOADER_REPLACEMENT_49___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_49___);\nvar ___HTML_LOADER_REPLACEMENT_50___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_50___);\nvar ___HTML_LOADER_REPLACEMENT_51___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_51___);\nvar ___HTML_LOADER_REPLACEMENT_52___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_52___);\nvar ___HTML_LOADER_REPLACEMENT_53___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_53___);\nvar ___HTML_LOADER_REPLACEMENT_54___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_54___);\nvar ___HTML_LOADER_REPLACEMENT_55___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_55___);\nvar ___HTML_LOADER_REPLACEMENT_56___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_56___);\nvar ___HTML_LOADER_REPLACEMENT_57___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_57___);\nvar ___HTML_LOADER_REPLACEMENT_58___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_58___);\nvar ___HTML_LOADER_REPLACEMENT_59___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_59___);\nvar ___HTML_LOADER_REPLACEMENT_60___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_60___);\nvar ___HTML_LOADER_REPLACEMENT_61___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_61___);\nvar ___HTML_LOADER_REPLACEMENT_62___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_62___);\nvar ___HTML_LOADER_REPLACEMENT_63___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_63___);\nvar ___HTML_LOADER_REPLACEMENT_64___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_64___);\nvar ___HTML_LOADER_REPLACEMENT_65___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_65___);\nvar ___HTML_LOADER_REPLACEMENT_66___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_66___);\nvar ___HTML_LOADER_REPLACEMENT_67___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_67___);\nvar ___HTML_LOADER_REPLACEMENT_68___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_68___);\nvar ___HTML_LOADER_REPLACEMENT_69___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_69___);\nvar ___HTML_LOADER_REPLACEMENT_70___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_70___);\nvar ___HTML_LOADER_REPLACEMENT_71___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_71___);\nvar ___HTML_LOADER_REPLACEMENT_72___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_72___);\nvar ___HTML_LOADER_REPLACEMENT_73___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_73___);\nvar ___HTML_LOADER_REPLACEMENT_74___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_74___);\nvar ___HTML_LOADER_REPLACEMENT_75___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_75___);\nvar ___HTML_LOADER_REPLACEMENT_76___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_76___);\nvar ___HTML_LOADER_REPLACEMENT_77___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_77___);\nvar ___HTML_LOADER_REPLACEMENT_78___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_78___);\nvar ___HTML_LOADER_REPLACEMENT_79___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_79___);\nvar ___HTML_LOADER_REPLACEMENT_80___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_80___);\nvar ___HTML_LOADER_REPLACEMENT_81___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_81___);\nvar ___HTML_LOADER_REPLACEMENT_82___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_82___);\nvar ___HTML_LOADER_REPLACEMENT_83___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_83___);\nvar ___HTML_LOADER_REPLACEMENT_84___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_84___);\nvar ___HTML_LOADER_REPLACEMENT_85___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_85___);\nvar ___HTML_LOADER_REPLACEMENT_86___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_86___);\nvar ___HTML_LOADER_REPLACEMENT_87___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_87___);\nvar ___HTML_LOADER_REPLACEMENT_88___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_88___);\nvar ___HTML_LOADER_REPLACEMENT_89___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_89___);\nvar ___HTML_LOADER_REPLACEMENT_90___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_90___);\nvar ___HTML_LOADER_REPLACEMENT_91___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_91___);\nvar ___HTML_LOADER_REPLACEMENT_92___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_92___);\nvar ___HTML_LOADER_REPLACEMENT_93___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_93___);\nvar ___HTML_LOADER_REPLACEMENT_94___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_94___);\nvar ___HTML_LOADER_REPLACEMENT_95___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_95___);\nvar ___HTML_LOADER_REPLACEMENT_96___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_96___);\nvar ___HTML_LOADER_REPLACEMENT_97___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_97___);\nvar ___HTML_LOADER_REPLACEMENT_98___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_98___);\nvar ___HTML_LOADER_REPLACEMENT_99___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_99___);\nvar ___HTML_LOADER_REPLACEMENT_100___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_100___);\nvar ___HTML_LOADER_REPLACEMENT_101___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_101___);\nvar ___HTML_LOADER_REPLACEMENT_102___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_102___);\nvar ___HTML_LOADER_REPLACEMENT_103___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_103___);\nvar ___HTML_LOADER_REPLACEMENT_104___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_104___);\nvar ___HTML_LOADER_REPLACEMENT_105___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_105___);\nvar ___HTML_LOADER_REPLACEMENT_106___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_106___);\nvar ___HTML_LOADER_REPLACEMENT_107___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_107___);\nvar ___HTML_LOADER_REPLACEMENT_108___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_108___);\nvar ___HTML_LOADER_REPLACEMENT_109___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_109___);\nvar ___HTML_LOADER_REPLACEMENT_110___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_110___);\nvar ___HTML_LOADER_REPLACEMENT_111___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_111___);\nvar ___HTML_LOADER_REPLACEMENT_112___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_112___);\nvar ___HTML_LOADER_REPLACEMENT_113___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_113___);\nvar ___HTML_LOADER_REPLACEMENT_114___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_114___);\nvar ___HTML_LOADER_REPLACEMENT_115___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_115___);\nvar ___HTML_LOADER_REPLACEMENT_116___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_116___);\nvar ___HTML_LOADER_REPLACEMENT_117___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_117___);\nvar ___HTML_LOADER_REPLACEMENT_118___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_118___);\nvar ___HTML_LOADER_REPLACEMENT_119___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_119___);\nvar ___HTML_LOADER_REPLACEMENT_120___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_120___);\nvar ___HTML_LOADER_REPLACEMENT_121___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_121___);\nvar ___HTML_LOADER_REPLACEMENT_122___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_122___);\nvar ___HTML_LOADER_REPLACEMENT_123___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_123___);\nvar ___HTML_LOADER_REPLACEMENT_124___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_124___);\nvar ___HTML_LOADER_REPLACEMENT_125___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_125___);\nvar ___HTML_LOADER_REPLACEMENT_126___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_126___);\nvar ___HTML_LOADER_REPLACEMENT_127___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_127___);\nvar ___HTML_LOADER_REPLACEMENT_128___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_128___);\nvar ___HTML_LOADER_REPLACEMENT_129___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_129___);\nvar ___HTML_LOADER_REPLACEMENT_130___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_130___);\nvar ___HTML_LOADER_REPLACEMENT_131___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_131___);\nvar ___HTML_LOADER_REPLACEMENT_132___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_132___);\nvar ___HTML_LOADER_REPLACEMENT_133___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_133___);\nvar ___HTML_LOADER_REPLACEMENT_134___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_134___);\nvar ___HTML_LOADER_REPLACEMENT_135___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_135___);\nvar ___HTML_LOADER_REPLACEMENT_136___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_136___);\nvar ___HTML_LOADER_REPLACEMENT_137___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_137___);\nvar ___HTML_LOADER_REPLACEMENT_138___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_138___);\nvar ___HTML_LOADER_REPLACEMENT_139___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_139___);\nvar ___HTML_LOADER_REPLACEMENT_140___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_140___);\nvar ___HTML_LOADER_REPLACEMENT_141___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_141___);\nvar ___HTML_LOADER_REPLACEMENT_142___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_142___);\nvar ___HTML_LOADER_REPLACEMENT_143___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_143___);\nvar ___HTML_LOADER_REPLACEMENT_144___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_144___);\nvar ___HTML_LOADER_REPLACEMENT_145___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_145___);\nvar ___HTML_LOADER_REPLACEMENT_146___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_146___);\nvar ___HTML_LOADER_REPLACEMENT_147___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_147___);\nvar ___HTML_LOADER_REPLACEMENT_148___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_148___);\nvar ___HTML_LOADER_REPLACEMENT_149___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_149___);\nvar ___HTML_LOADER_REPLACEMENT_150___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_150___);\nvar ___HTML_LOADER_REPLACEMENT_151___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_151___);\nvar ___HTML_LOADER_REPLACEMENT_152___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_152___);\nvar ___HTML_LOADER_REPLACEMENT_153___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_153___);\nvar ___HTML_LOADER_REPLACEMENT_154___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_154___);\nvar ___HTML_LOADER_REPLACEMENT_155___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_155___);\nvar ___HTML_LOADER_REPLACEMENT_156___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_156___);\nvar ___HTML_LOADER_REPLACEMENT_157___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_157___);\nvar ___HTML_LOADER_REPLACEMENT_158___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_158___);\nvar ___HTML_LOADER_REPLACEMENT_159___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_159___);\nvar ___HTML_LOADER_REPLACEMENT_160___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_160___);\nvar ___HTML_LOADER_REPLACEMENT_161___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_161___);\nvar ___HTML_LOADER_REPLACEMENT_162___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_162___);\nvar ___HTML_LOADER_REPLACEMENT_163___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_163___);\nvar ___HTML_LOADER_REPLACEMENT_164___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_164___);\nvar ___HTML_LOADER_REPLACEMENT_165___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_165___);\nvar ___HTML_LOADER_REPLACEMENT_166___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_166___);\nvar code = \"\\r\\n
\\r\\n
SVG Graphics and Icons
\\r\\n
All graphics and icons within our app should be in the SVG vector format. This graphics format will allow for optimal image scalling for various screen types and resolution densities. Do not add additional graphics or icons without consulting Darran or Scott.
\\r\\n\\r\\n
Usage:
\\r\\n
To add an image reference it with the following ~img/image-name.svg within your CSS file (preferably), or alternatively via an <img> tag within your HTML template. You may also reference images within a .ts file if required to accomplish specific development goals.
\\r\\n\\r\\n
Note:
\\r\\n
Currently, we have some inconsistencies with image naming conventions. We will be working to refactor and correct this in future builds.
![](\\\"\")
logo-home.svg\\r\\n