novo-elements
Version:
113 lines (112 loc) • 105 kB
JavaScript
import * as i0 from '@angular/core';
import { computed, signal, HostListener, HostBinding, Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { Helpers, BooleanInput } from 'novo-elements/utils';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
var __decorate = (this && this.__decorate) || function (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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
class NovoButtonElement {
/**
* Optionally display `bullhorn-icon` with the button along with the text.
*/
set icon(icon) {
if (icon) {
this._icon.set(`bhi-${icon}`);
}
}
get icon() {
return this._icon();
}
/**
* A second icon can be specified, and it will take the opposite side of the primary icon.
*/
set secondIcon(icon) {
if (icon) {
this._secondIcon.set(`bhi-${icon}`);
}
}
get secondIcon() {
return this._secondIcon();
}
constructor(element) {
this.element = element;
/**
* The side of the button to display the icon.
*/
this.side = 'right';
/**
* If a second icon is specified it will default to the opposite side as the primary icon.
*/
this.secondSide = computed(() => this.side === 'right' ? 'left' : 'right', ...(ngDevMode ? [{ debugName: "secondSide" }] : []));
/**
* The base styling to apply to the button.
*/
this.theme = 'dialogue';
this.leftSideIconClass = computed(() => this.side === 'left' ? this._icon() : this._secondIcon(), ...(ngDevMode ? [{ debugName: "leftSideIconClass" }] : []));
this.rightSideIconClass = computed(() => this.side === 'right' ? this._icon() : this._secondIcon(), ...(ngDevMode ? [{ debugName: "rightSideIconClass" }] : []));
/**
* Make the button non-interactive.
*/
this.disabled = false;
this.disabledAttr = undefined;
this._icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
this._secondIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_secondIcon" }] : []));
}
ngOnChanges(changes) {
if (changes.disabled && this.element.nativeElement.tagName === 'BUTTON') {
this.disabledAttr = changes.disabled.currentValue ? '' : undefined;
}
}
handleKeydown(event) {
if (("Enter" /* Key.Enter */ === event.key || " " /* Key.Space */ === event.key) && (this.disabled || this.loading)) {
Helpers.swallowEvent(event);
}
}
/** Focuses the input. */
focus(options) {
this.element.nativeElement.focus(options);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NovoButtonElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.19", type: NovoButtonElement, isStandalone: false, selector: "novo-button,button[theme]", inputs: { color: "color", side: "side", size: "size", theme: "theme", loading: "loading", icon: "icon", secondIcon: "secondIcon", disabled: "disabled" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.theme": "theme", "attr.color": "color", "attr.icon": "icon", "attr.loading": "loading", "attr.side": "side", "attr.size": "size", "attr.role": "'button'", "class.novo-button-disabled": "this.disabled", "attr.disabled": "this.disabledAttr" }, classAttribute: "novo-button" }, usesOnChanges: true, ngImport: i0, template: `
<!--Left Icon-->
<i *ngIf="((icon && side === 'left') || (secondIcon && secondSide() === 'left')) && !loading" [ngClass]="leftSideIconClass()" class="novo-button-icon novo-button-icon-left"></i>
<!--Transcluded Content-->
<span #textContent class="button-contents"><ng-content></ng-content></span>
<!--Right Icon-->
<i *ngIf="((icon && side === 'right') || (secondIcon && secondSide() === 'right')) && !loading" [ngClass]="rightSideIconClass()" class="novo-button-icon novo-button-icon-right"></i>
<!--Loading-->
<i *ngIf="loading" class="loading novo-button-loading">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px"
y="0px"
width="18.2px"
height="18.5px"
viewBox="0 0 18.2 18.5"
style="enable-background:new 0 0 18.2 18.5;"
xml:space="preserve"
>
<style type="text/css">
.spinner {
fill: #ffffff;
}
</style>
<path
class="spinner"
d="M9.2,18.5C4.1,18.5,0,14.4,0,9.2S4.1,0,9.2,0c0.9,0,1.9,0.1,2.7,0.4c0.8,0.2,1.2,1.1,1,1.9
c-0.2,0.8-1.1,1.2-1.9,1C10.5,3.1,9.9,3,9.2,3C5.8,3,3,5.8,3,9.2s2.8,6.2,6.2,6.2c2.8,0,5.3-1.9,6-4.7c0.2-0.8,1-1.3,1.8-1.1
c0.8,0.2,1.3,1,1.1,1.8C17.1,15.7,13.4,18.5,9.2,18.5z"
/>
</svg>
</i>
`, isInline: true, styles: [":host{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;padding:0 1rem;font-size:var(--font-size-button);height:3rem;border:none;color:var(--text-main, #3d464d);background:transparent;border-radius:3px;text-transform:uppercase;transition:all .2s ease-in-out;gap:1rem;cursor:pointer;-webkit-user-select:none;user-select:none;text-overflow:clip;white-space:nowrap;overflow:hidden;flex:0 0 auto}:host .button-contents{height:var(--font-size-button);display:inline-flex;align-items:center;line-height:1;font-size:inherit;color:inherit;text-transform:uppercase}:host i{height:var(--font-size-button);font-size:inherit;line-height:1}:host[size=small],:host[size=sm]{font-size:1rem;padding:0 1rem;height:2.4rem;gap:.5rem}:host[size=small] .button-contents,:host[size=small] i,:host[size=sm] .button-contents,:host[size=sm] i{height:1rem}:host[size=large],:host[size=lg]{font-size:1.6rem;padding:0 1.25rem;height:3.6rem;gap:1.25rem}:host[size=large] .button-contents,:host[size=large] i,:host[size=lg] .button-contents,:host[size=lg] i{height:1.6rem}:host:focus{outline:none}:host[disabled],:host.novo-button-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:host[disabled=false]{opacity:1;cursor:pointer;pointer-events:auto}:host[loading=true]{opacity:.5;cursor:not-allowed;pointer-events:none}:host[loading=true] i.loading{display:flex;align-items:center;justify-content:center;animation:rotate 1.2s linear infinite}:host[loading=true] i.loading svg{width:100%;height:100%;max-width:15px;max-height:15px}:host[loading=true] i.loading svg .spinner{fill:currentColor}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n", ":host[theme=standard]{color:var(--button-text);background:var(--button-background)}:host[theme=standard][color=black]{color:#fff;background:#000}:host[theme=standard][color=white]{color:#3d464d;background:#fff}:host[theme=standard][color=gray]{color:#3d464d;background:#9e9e9e}:host[theme=standard][color=grey]{color:#3d464d;background:#9e9e9e}:host[theme=standard][color=offWhite]{color:#3d464d;background:#f7f7f7}:host[theme=standard][color=bright]{color:#3d464d;background:#f7f7f7}:host[theme=standard][color=light]{color:#3d464d;background:#dbdbdb}:host[theme=standard][color=neutral]{color:#fff;background:#4f5361}:host[theme=standard][color=dark]{color:#fff;background:#3d464d}:host[theme=standard][color=orange]{color:#3d464d;background:#ff6900}:host[theme=standard][color=navigation]{color:#fff;background:#202945}:host[theme=standard][color=skyBlue]{color:#fff;background:#009bdf}:host[theme=standard][color=steel]{color:#fff;background:#5b6770}:host[theme=standard][color=metal]{color:#fff;background:#637893}:host[theme=standard][color=sand]{color:#3d464d;background:#f4f4f4}:host[theme=standard][color=silver]{color:#3d464d;background:#e2e2e2}:host[theme=standard][color=stone]{color:#3d464d;background:#bebebe}:host[theme=standard][color=ash]{color:#3d464d;background:#a0a0a0}:host[theme=standard][color=slate]{color:#fff;background:#707070}:host[theme=standard][color=onyx]{color:#fff;background:#526980}:host[theme=standard][color=charcoal]{color:#fff;background:#282828}:host[theme=standard][color=moonlight]{color:#fff;background:#1a242f}:host[theme=standard][color=midnight]{color:#fff;background:#202945}:host[theme=standard][color=darkness]{color:#fff;background:#161f27}:host[theme=standard][color=navy]{color:#fff;background:#0d2d42}:host[theme=standard][color=aqua]{color:#3d464d;background:#3bafda}:host[theme=standard][color=ocean]{color:#fff;background:#4a89dc}:host[theme=standard][color=mint]{color:#3d464d;background:#37bc9b}:host[theme=standard][color=grass]{color:#fff;background:#8cc152}:host[theme=standard][color=sunflower]{color:#fff;background:#f6b042}:host[theme=standard][color=bittersweet]{color:#fff;background:#eb6845}:host[theme=standard][color=grapefruit]{color:#fff;background:#da4453}:host[theme=standard][color=carnation]{color:#fff;background:#d770ad}:host[theme=standard][color=lavender]{color:#fff;background:#967adc}:host[theme=standard][color=mountain]{color:#fff;background:#9678b6}:host[theme=standard][color=info]{color:#fff;background:#4a89dc}:host[theme=standard][color=positive]{color:#fff;background:#4a89dc}:host[theme=standard][color=success]{color:#fff;background:#8cc152}:host[theme=standard][color=negative]{color:#fff;background:#da4453}:host[theme=standard][color=danger]{color:#fff;background:#da4453}:host[theme=standard][color=error]{color:#fff;background:#da4453}:host[theme=standard][color=warning]{color:#fff;background:#f6b042}:host[theme=standard][color=empty]{color:#3d464d;background:#cccdcc}:host[theme=standard][color=disabled]{color:#3d464d;background:#bebebe}:host[theme=standard][color=background]{color:#3d464d;background:#f7f7f7}:host[theme=standard][color=backgroundDark]{color:#3d464d;background:#e2e2e2}:host[theme=standard][color=presentation]{color:#fff;background:#5b6770}:host[theme=standard][color=bullhorn]{color:#3d464d;background:#ff6900}:host[theme=standard][color=pulse]{color:#3d464d;background:#3bafda}:host[theme=standard][color=company]{color:#fff;background:#39d}:host[theme=standard][color=candidate]{color:#fff;background:#4b7}:host[theme=standard][color=lead]{color:#fff;background:#a69}:host[theme=standard][color=contact]{color:#fff;background:#fa4}:host[theme=standard][color=clientcontact]{color:#fff;background:#fa4}:host[theme=standard][color=opportunity]{color:#fff;background:#625}:host[theme=standard][color=job]{color:#fff;background:#b56}:host[theme=standard][color=joborder]{color:#fff;background:#b56}:host[theme=standard][color=submission]{color:#3d464d;background:#a9adbb}:host[theme=standard][color=sendout]{color:#fff;background:#747884}:host[theme=standard][color=placement]{color:#fff;background:#0b344f}:host[theme=standard][color=note]{color:#fff;background:#747884}:host[theme=standard][color=contract]{color:#fff;background:#454ea0}:host[theme=standard][color=task]{color:#fff;background:#4f5361}:host[theme=standard][color=jobCode]{color:#fff;background:#696d79}:host[theme=standard][color=earnCode]{color:#fff;background:#696d79}:host[theme=standard][color=invoiceStatement]{color:#fff;background:#696d79}:host[theme=standard][color=billableCharge]{color:#fff;background:#696d79}:host[theme=standard][color=payableCharge]{color:#fff;background:#696d79}:host[theme=standard][color=user]{color:#fff;background:#696d79}:host[theme=standard][color=corporateUser]{color:#fff;background:#696d79}:host[theme=standard][color=distributionList]{color:#fff;background:#696d79}:host[theme=standard][color=credential]{color:#fff;background:#696d79}:host[theme=standard][color=person]{color:#fff;background:#696d79}:host[theme=standard]:hover,:host[theme=standard]:focus{box-shadow:0 3px 7px #00000026,0 1px 2px #00000026}:host[theme=standard]:active{box-shadow:0 1px 2px #00000026}\n", ":host[theme=primary]{background:#4a89dc;color:#fff;text-align:left}:host[theme=primary][color=black]{color:#fff;background:#000}:host[theme=primary][color=white]{color:#3d464d;background:#fff}:host[theme=primary][color=gray]{color:#3d464d;background:#9e9e9e}:host[theme=primary][color=grey]{color:#3d464d;background:#9e9e9e}:host[theme=primary][color=offWhite]{color:#3d464d;background:#f7f7f7}:host[theme=primary][color=bright]{color:#3d464d;background:#f7f7f7}:host[theme=primary][color=light]{color:#3d464d;background:#dbdbdb}:host[theme=primary][color=neutral]{color:#fff;background:#4f5361}:host[theme=primary][color=dark]{color:#fff;background:#3d464d}:host[theme=primary][color=orange]{color:#3d464d;background:#ff6900}:host[theme=primary][color=navigation]{color:#fff;background:#202945}:host[theme=primary][color=skyBlue]{color:#fff;background:#009bdf}:host[theme=primary][color=steel]{color:#fff;background:#5b6770}:host[theme=primary][color=metal]{color:#fff;background:#637893}:host[theme=primary][color=sand]{color:#3d464d;background:#f4f4f4}:host[theme=primary][color=silver]{color:#3d464d;background:#e2e2e2}:host[theme=primary][color=stone]{color:#3d464d;background:#bebebe}:host[theme=primary][color=ash]{color:#3d464d;background:#a0a0a0}:host[theme=primary][color=slate]{color:#fff;background:#707070}:host[theme=primary][color=onyx]{color:#fff;background:#526980}:host[theme=primary][color=charcoal]{color:#fff;background:#282828}:host[theme=primary][color=moonlight]{color:#fff;background:#1a242f}:host[theme=primary][color=midnight]{color:#fff;background:#202945}:host[theme=primary][color=darkness]{color:#fff;background:#161f27}:host[theme=primary][color=navy]{color:#fff;background:#0d2d42}:host[theme=primary][color=aqua]{color:#3d464d;background:#3bafda}:host[theme=primary][color=ocean]{color:#fff;background:#4a89dc}:host[theme=primary][color=mint]{color:#3d464d;background:#37bc9b}:host[theme=primary][color=grass]{color:#fff;background:#8cc152}:host[theme=primary][color=sunflower]{color:#fff;background:#f6b042}:host[theme=primary][color=bittersweet]{color:#fff;background:#eb6845}:host[theme=primary][color=grapefruit]{color:#fff;background:#da4453}:host[theme=primary][color=carnation]{color:#fff;background:#d770ad}:host[theme=primary][color=lavender]{color:#fff;background:#967adc}:host[theme=primary][color=mountain]{color:#fff;background:#9678b6}:host[theme=primary][color=info]{color:#fff;background:#4a89dc}:host[theme=primary][color=positive]{color:#fff;background:#4a89dc}:host[theme=primary][color=success]{color:#fff;background:#8cc152}:host[theme=primary][color=negative]{color:#fff;background:#da4453}:host[theme=primary][color=danger]{color:#fff;background:#da4453}:host[theme=primary][color=error]{color:#fff;background:#da4453}:host[theme=primary][color=warning]{color:#fff;background:#f6b042}:host[theme=primary][color=empty]{color:#3d464d;background:#cccdcc}:host[theme=primary][color=disabled]{color:#3d464d;background:#bebebe}:host[theme=primary][color=background]{color:#3d464d;background:#f7f7f7}:host[theme=primary][color=backgroundDark]{color:#3d464d;background:#e2e2e2}:host[theme=primary][color=presentation]{color:#fff;background:#5b6770}:host[theme=primary][color=bullhorn]{color:#3d464d;background:#ff6900}:host[theme=primary][color=pulse]{color:#3d464d;background:#3bafda}:host[theme=primary][color=company]{color:#fff;background:#39d}:host[theme=primary][color=candidate]{color:#fff;background:#4b7}:host[theme=primary][color=lead]{color:#fff;background:#a69}:host[theme=primary][color=contact]{color:#fff;background:#fa4}:host[theme=primary][color=clientcontact]{color:#fff;background:#fa4}:host[theme=primary][color=opportunity]{color:#fff;background:#625}:host[theme=primary][color=job]{color:#fff;background:#b56}:host[theme=primary][color=joborder]{color:#fff;background:#b56}:host[theme=primary][color=submission]{color:#3d464d;background:#a9adbb}:host[theme=primary][color=sendout]{color:#fff;background:#747884}:host[theme=primary][color=placement]{color:#fff;background:#0b344f}:host[theme=primary][color=note]{color:#fff;background:#747884}:host[theme=primary][color=contract]{color:#fff;background:#454ea0}:host[theme=primary][color=task]{color:#fff;background:#4f5361}:host[theme=primary][color=jobCode]{color:#fff;background:#696d79}:host[theme=primary][color=earnCode]{color:#fff;background:#696d79}:host[theme=primary][color=invoiceStatement]{color:#fff;background:#696d79}:host[theme=primary][color=billableCharge]{color:#fff;background:#696d79}:host[theme=primary][color=payableCharge]{color:#fff;background:#696d79}:host[theme=primary][color=user]{color:#fff;background:#696d79}:host[theme=primary][color=corporateUser]{color:#fff;background:#696d79}:host[theme=primary][color=distributionList]{color:#fff;background:#696d79}:host[theme=primary][color=credential]{color:#fff;background:#696d79}:host[theme=primary][color=person]{color:#fff;background:#696d79}:host[theme=primary]:hover,:host[theme=primary]:focus{box-shadow:0 3px 7px #00000026,0 1px 2px #00000026;filter:brightness(1.15)}:host[theme=primary]:active{filter:brightness(.85);box-shadow:0 1px 2px #00000026}:host[theme=primary][color=white]{background:#fff;color:#4a89dc}:host[theme=primary][color=white]:hover,:host[theme=primary][color=white]:focus{background:#f7f7f7}:host[theme=primary][color=white]:active{background:#eaeaea}:host[theme=primary][color=white] i{background:#0000000d}:host[theme=primary][size=large] i{margin-left:3px}\n", ":host[theme=secondary]{text-align:left;align-items:center;background:#fff;color:#4a89dc;border:1px solid #4a89dc;padding:0 calc(1rem - 1px)}:host[theme=secondary][color=black]{color:#000}:host[theme=secondary][color=black] i{color:#000}:host[theme=secondary][color=white]{color:#fff}:host[theme=secondary][color=white] i{color:#fff}:host[theme=secondary][color=gray]{color:#9e9e9e}:host[theme=secondary][color=gray] i{color:#9e9e9e}:host[theme=secondary][color=grey]{color:#9e9e9e}:host[theme=secondary][color=grey] i{color:#9e9e9e}:host[theme=secondary][color=offWhite]{color:#f7f7f7}:host[theme=secondary][color=offWhite] i{color:#f7f7f7}:host[theme=secondary][color=bright]{color:#f7f7f7}:host[theme=secondary][color=bright] i{color:#f7f7f7}:host[theme=secondary][color=light]{color:#dbdbdb}:host[theme=secondary][color=light] i{color:#dbdbdb}:host[theme=secondary][color=neutral]{color:#4f5361}:host[theme=secondary][color=neutral] i{color:#4f5361}:host[theme=secondary][color=dark]{color:#3d464d}:host[theme=secondary][color=dark] i{color:#3d464d}:host[theme=secondary][color=orange]{color:#ff6900}:host[theme=secondary][color=orange] i{color:#ff6900}:host[theme=secondary][color=navigation]{color:#202945}:host[theme=secondary][color=navigation] i{color:#202945}:host[theme=secondary][color=skyBlue]{color:#009bdf}:host[theme=secondary][color=skyBlue] i{color:#009bdf}:host[theme=secondary][color=steel]{color:#5b6770}:host[theme=secondary][color=steel] i{color:#5b6770}:host[theme=secondary][color=metal]{color:#637893}:host[theme=secondary][color=metal] i{color:#637893}:host[theme=secondary][color=sand]{color:#f4f4f4}:host[theme=secondary][color=sand] i{color:#f4f4f4}:host[theme=secondary][color=silver]{color:#e2e2e2}:host[theme=secondary][color=silver] i{color:#e2e2e2}:host[theme=secondary][color=stone]{color:#bebebe}:host[theme=secondary][color=stone] i{color:#bebebe}:host[theme=secondary][color=ash]{color:#a0a0a0}:host[theme=secondary][color=ash] i{color:#a0a0a0}:host[theme=secondary][color=slate]{color:#707070}:host[theme=secondary][color=slate] i{color:#707070}:host[theme=secondary][color=onyx]{color:#526980}:host[theme=secondary][color=onyx] i{color:#526980}:host[theme=secondary][color=charcoal]{color:#282828}:host[theme=secondary][color=charcoal] i{color:#282828}:host[theme=secondary][color=moonlight]{color:#1a242f}:host[theme=secondary][color=moonlight] i{color:#1a242f}:host[theme=secondary][color=midnight]{color:#202945}:host[theme=secondary][color=midnight] i{color:#202945}:host[theme=secondary][color=darkness]{color:#161f27}:host[theme=secondary][color=darkness] i{color:#161f27}:host[theme=secondary][color=navy]{color:#0d2d42}:host[theme=secondary][color=navy] i{color:#0d2d42}:host[theme=secondary][color=aqua]{color:#3bafda}:host[theme=secondary][color=aqua] i{color:#3bafda}:host[theme=secondary][color=ocean]{color:#4a89dc}:host[theme=secondary][color=ocean] i{color:#4a89dc}:host[theme=secondary][color=mint]{color:#37bc9b}:host[theme=secondary][color=mint] i{color:#37bc9b}:host[theme=secondary][color=grass]{color:#8cc152}:host[theme=secondary][color=grass] i{color:#8cc152}:host[theme=secondary][color=sunflower]{color:#f6b042}:host[theme=secondary][color=sunflower] i{color:#f6b042}:host[theme=secondary][color=bittersweet]{color:#eb6845}:host[theme=secondary][color=bittersweet] i{color:#eb6845}:host[theme=secondary][color=grapefruit]{color:#da4453}:host[theme=secondary][color=grapefruit] i{color:#da4453}:host[theme=secondary][color=carnation]{color:#d770ad}:host[theme=secondary][color=carnation] i{color:#d770ad}:host[theme=secondary][color=lavender]{color:#967adc}:host[theme=secondary][color=lavender] i{color:#967adc}:host[theme=secondary][color=mountain]{color:#9678b6}:host[theme=secondary][color=mountain] i{color:#9678b6}:host[theme=secondary][color=info]{color:#4a89dc}:host[theme=secondary][color=info] i{color:#4a89dc}:host[theme=secondary][color=positive]{color:#4a89dc}:host[theme=secondary][color=positive] i{color:#4a89dc}:host[theme=secondary][color=success]{color:#8cc152}:host[theme=secondary][color=success] i{color:#8cc152}:host[theme=secondary][color=negative]{color:#da4453}:host[theme=secondary][color=negative] i{color:#da4453}:host[theme=secondary][color=danger]{color:#da4453}:host[theme=secondary][color=danger] i{color:#da4453}:host[theme=secondary][color=error]{color:#da4453}:host[theme=secondary][color=error] i{color:#da4453}:host[theme=secondary][color=warning]{color:#f6b042}:host[theme=secondary][color=warning] i{color:#f6b042}:host[theme=secondary][color=empty]{color:#cccdcc}:host[theme=secondary][color=empty] i{color:#cccdcc}:host[theme=secondary][color=disabled]{color:#bebebe}:host[theme=secondary][color=disabled] i{color:#bebebe}:host[theme=secondary][color=background]{color:#f7f7f7}:host[theme=secondary][color=background] i{color:#f7f7f7}:host[theme=secondary][color=backgroundDark]{color:#e2e2e2}:host[theme=secondary][color=backgroundDark] i{color:#e2e2e2}:host[theme=secondary][color=presentation]{color:#5b6770}:host[theme=secondary][color=presentation] i{color:#5b6770}:host[theme=secondary][color=bullhorn]{color:#ff6900}:host[theme=secondary][color=bullhorn] i{color:#ff6900}:host[theme=secondary][color=pulse]{color:#3bafda}:host[theme=secondary][color=pulse] i{color:#3bafda}:host[theme=secondary][color=company]{color:#39d}:host[theme=secondary][color=company] i{color:#39d}:host[theme=secondary][color=candidate]{color:#4b7}:host[theme=secondary][color=candidate] i{color:#4b7}:host[theme=secondary][color=lead]{color:#a69}:host[theme=secondary][color=lead] i{color:#a69}:host[theme=secondary][color=contact]{color:#fa4}:host[theme=secondary][color=contact] i{color:#fa4}:host[theme=secondary][color=clientcontact]{color:#fa4}:host[theme=secondary][color=clientcontact] i{color:#fa4}:host[theme=secondary][color=opportunity]{color:#625}:host[theme=secondary][color=opportunity] i{color:#625}:host[theme=secondary][color=job]{color:#b56}:host[theme=secondary][color=job] i{color:#b56}:host[theme=secondary][color=joborder]{color:#b56}:host[theme=secondary][color=joborder] i{color:#b56}:host[theme=secondary][color=submission]{color:#a9adbb}:host[theme=secondary][color=submission] i{color:#a9adbb}:host[theme=secondary][color=sendout]{color:#747884}:host[theme=secondary][color=sendout] i{color:#747884}:host[theme=secondary][color=placement]{color:#0b344f}:host[theme=secondary][color=placement] i{color:#0b344f}:host[theme=secondary][color=note]{color:#747884}:host[theme=secondary][color=note] i{color:#747884}:host[theme=secondary][color=contract]{color:#454ea0}:host[theme=secondary][color=contract] i{color:#454ea0}:host[theme=secondary][color=task]{color:#4f5361}:host[theme=secondary][color=task] i{color:#4f5361}:host[theme=secondary][color=jobCode]{color:#696d79}:host[theme=secondary][color=jobCode] i{color:#696d79}:host[theme=secondary][color=earnCode]{color:#696d79}:host[theme=secondary][color=earnCode] i{color:#696d79}:host[theme=secondary][color=invoiceStatement]{color:#696d79}:host[theme=secondary][color=invoiceStatement] i{color:#696d79}:host[theme=secondary][color=billableCharge]{color:#696d79}:host[theme=secondary][color=billableCharge] i{color:#696d79}:host[theme=secondary][color=payableCharge]{color:#696d79}:host[theme=secondary][color=payableCharge] i{color:#696d79}:host[theme=secondary][color=user]{color:#696d79}:host[theme=secondary][color=user] i{color:#696d79}:host[theme=secondary][color=corporateUser]{color:#696d79}:host[theme=secondary][color=corporateUser] i{color:#696d79}:host[theme=secondary][color=distributionList]{color:#696d79}:host[theme=secondary][color=distributionList] i{color:#696d79}:host[theme=secondary][color=credential]{color:#696d79}:host[theme=secondary][color=credential] i{color:#696d79}:host[theme=secondary][color=person]{color:#696d79}:host[theme=secondary][color=person] i{color:#696d79}:host[theme=secondary][color=black]{border:1px solid #000000}:host[theme=secondary][color=white]{border:1px solid #ffffff}:host[theme=secondary][color=gray]{border:1px solid #9e9e9e}:host[theme=secondary][color=grey]{border:1px solid #9e9e9e}:host[theme=secondary][color=offWhite]{border:1px solid #f7f7f7}:host[theme=secondary][color=bright]{border:1px solid #f7f7f7}:host[theme=secondary][color=light]{border:1px solid #dbdbdb}:host[theme=secondary][color=neutral]{border:1px solid #4f5361}:host[theme=secondary][color=dark]{border:1px solid #3d464d}:host[theme=secondary][color=orange]{border:1px solid #ff6900}:host[theme=secondary][color=navigation]{border:1px solid #202945}:host[theme=secondary][color=skyBlue]{border:1px solid #009bdf}:host[theme=secondary][color=steel]{border:1px solid #5b6770}:host[theme=secondary][color=metal]{border:1px solid #637893}:host[theme=secondary][color=sand]{border:1px solid #f4f4f4}:host[theme=secondary][color=silver]{border:1px solid #e2e2e2}:host[theme=secondary][color=stone]{border:1px solid #bebebe}:host[theme=secondary][color=ash]{border:1px solid #a0a0a0}:host[theme=secondary][color=slate]{border:1px solid #707070}:host[theme=secondary][color=onyx]{border:1px solid #526980}:host[theme=secondary][color=charcoal]{border:1px solid #282828}:host[theme=secondary][color=moonlight]{border:1px solid #1a242f}:host[theme=secondary][color=midnight]{border:1px solid #202945}:host[theme=secondary][color=darkness]{border:1px solid #161f27}:host[theme=secondary][color=navy]{border:1px solid #0d2d42}:host[theme=secondary][color=aqua]{border:1px solid #3bafda}:host[theme=secondary][color=ocean]{border:1px solid #4a89dc}:host[theme=secondary][color=mint]{border:1px solid #37bc9b}:host[theme=secondary][color=grass]{border:1px solid #8cc152}:host[theme=secondary][color=sunflower]{border:1px solid #f6b042}:host[theme=secondary][color=bittersweet]{border:1px solid #eb6845}:host[theme=secondary][color=grapefruit]{border:1px solid #da4453}:host[theme=secondary][color=carnation]{border:1px solid #d770ad}:host[theme=secondary][color=lavender]{border:1px solid #967adc}:host[theme=secondary][color=mountain]{border:1px solid #9678b6}:host[theme=secondary][color=info]{border:1px solid #4a89dc}:host[theme=secondary][color=positive]{border:1px solid #4a89dc}:host[theme=secondary][color=success]{border:1px solid #8cc152}:host[theme=secondary][color=negative]{border:1px solid #da4453}:host[theme=secondary][color=danger]{border:1px solid #da4453}:host[theme=secondary][color=error]{border:1px solid #da4453}:host[theme=secondary][color=warning]{border:1px solid #f6b042}:host[theme=secondary][color=empty]{border:1px solid #cccdcc}:host[theme=secondary][color=disabled]{border:1px solid #bebebe}:host[theme=secondary][color=background]{border:1px solid #f7f7f7}:host[theme=secondary][color=backgroundDark]{border:1px solid #e2e2e2}:host[theme=secondary][color=presentation]{border:1px solid #5b6770}:host[theme=secondary][color=bullhorn]{border:1px solid #ff6900}:host[theme=secondary][color=pulse]{border:1px solid #3bafda}:host[theme=secondary][color=company]{border:1px solid #3399dd}:host[theme=secondary][color=candidate]{border:1px solid #44bb77}:host[theme=secondary][color=lead]{border:1px solid #aa6699}:host[theme=secondary][color=contact]{border:1px solid #ffaa44}:host[theme=secondary][color=clientcontact]{border:1px solid #ffaa44}:host[theme=secondary][color=opportunity]{border:1px solid #662255}:host[theme=secondary][color=job]{border:1px solid #bb5566}:host[theme=secondary][color=joborder]{border:1px solid #bb5566}:host[theme=secondary][color=submission]{border:1px solid #a9adbb}:host[theme=secondary][color=sendout]{border:1px solid #747884}:host[theme=secondary][color=placement]{border:1px solid #0b344f}:host[theme=secondary][color=note]{border:1px solid #747884}:host[theme=secondary][color=contract]{border:1px solid #454ea0}:host[theme=secondary][color=task]{border:1px solid #4f5361}:host[theme=secondary][color=jobCode]{border:1px solid #696d79}:host[theme=secondary][color=earnCode]{border:1px solid #696d79}:host[theme=secondary][color=invoiceStatement]{border:1px solid #696d79}:host[theme=secondary][color=billableCharge]{border:1px solid #696d79}:host[theme=secondary][color=payableCharge]{border:1px solid #696d79}:host[theme=secondary][color=user]{border:1px solid #696d79}:host[theme=secondary][color=corporateUser]{border:1px solid #696d79}:host[theme=secondary][color=distributionList]{border:1px solid #696d79}:host[theme=secondary][color=credential]{border:1px solid #696d79}:host[theme=secondary][color=person]{border:1px solid #696d79}:host[theme=secondary] i.loading{margin-left:.8rem}:host[theme=secondary] i.loading svg .spinner{fill:#4a89dc}:host[theme=secondary]:hover,:host[theme=secondary]:focus{box-shadow:0 3px 7px #00000026,0 1px 2px #00000026;background:#fff}:host[theme=secondary]:active{box-shadow:0 1px 2px #00000026}:host[theme=secondary][inverse]{background:#00000040;color:#fff;border:1px solid #fff}:host[theme=secondary][inverse]:hover,:host[theme=secondary][inverse]:focus{background:#00000059}:host[theme=secondary][inverse]:active{background:#00000073}:host[theme=secondary][inverse] i.loading svg .spinner{fill:#fff}\n", ":host[theme=fab]{border-radius:50%!important;padding:0;font-size:1.2rem;width:3.2rem;height:3.2rem;display:inline-flex;align-items:center;justify-content:center}:host[theme=fab][color=black]{color:#fff;background:#000}:host[theme=fab][color=white]{color:#3d464d;background:#fff}:host[theme=fab][color=gray]{color:#3d464d;background:#9e9e9e}:host[theme=fab][color=grey]{color:#3d464d;background:#9e9e9e}:host[theme=fab][color=offWhite]{color:#3d464d;background:#f7f7f7}:host[theme=fab][color=bright]{color:#3d464d;background:#f7f7f7}:host[theme=fab][color=light]{color:#3d464d;background:#dbdbdb}:host[theme=fab][color=neutral]{color:#fff;background:#4f5361}:host[theme=fab][color=dark]{color:#fff;background:#3d464d}:host[theme=fab][color=orange]{color:#3d464d;background:#ff6900}:host[theme=fab][color=navigation]{color:#fff;background:#202945}:host[theme=fab][color=skyBlue]{color:#fff;background:#009bdf}:host[theme=fab][color=steel]{color:#fff;background:#5b6770}:host[theme=fab][color=metal]{color:#fff;background:#637893}:host[theme=fab][color=sand]{color:#3d464d;background:#f4f4f4}:host[theme=fab][color=silver]{color:#3d464d;background:#e2e2e2}:host[theme=fab][color=stone]{color:#3d464d;background:#bebebe}:host[theme=fab][color=ash]{color:#3d464d;background:#a0a0a0}:host[theme=fab][color=slate]{color:#fff;background:#707070}:host[theme=fab][color=onyx]{color:#fff;background:#526980}:host[theme=fab][color=charcoal]{color:#fff;background:#282828}:host[theme=fab][color=moonlight]{color:#fff;background:#1a242f}:host[theme=fab][color=midnight]{color:#fff;background:#202945}:host[theme=fab][color=darkness]{color:#fff;background:#161f27}:host[theme=fab][color=navy]{color:#fff;background:#0d2d42}:host[theme=fab][color=aqua]{color:#3d464d;background:#3bafda}:host[theme=fab][color=ocean]{color:#fff;background:#4a89dc}:host[theme=fab][color=mint]{color:#3d464d;background:#37bc9b}:host[theme=fab][color=grass]{color:#fff;background:#8cc152}:host[theme=fab][color=sunflower]{color:#fff;background:#f6b042}:host[theme=fab][color=bittersweet]{color:#fff;background:#eb6845}:host[theme=fab][color=grapefruit]{color:#fff;background:#da4453}:host[theme=fab][color=carnation]{color:#fff;background:#d770ad}:host[theme=fab][color=lavender]{color:#fff;background:#967adc}:host[theme=fab][color=mountain]{color:#fff;background:#9678b6}:host[theme=fab][color=info]{color:#fff;background:#4a89dc}:host[theme=fab][color=positive]{color:#fff;background:#4a89dc}:host[theme=fab][color=success]{color:#fff;background:#8cc152}:host[theme=fab][color=negative]{color:#fff;background:#da4453}:host[theme=fab][color=danger]{color:#fff;background:#da4453}:host[theme=fab][color=error]{color:#fff;background:#da4453}:host[theme=fab][color=warning]{color:#fff;background:#f6b042}:host[theme=fab][color=empty]{color:#3d464d;background:#cccdcc}:host[theme=fab][color=disabled]{color:#3d464d;background:#bebebe}:host[theme=fab][color=background]{color:#3d464d;background:#f7f7f7}:host[theme=fab][color=backgroundDark]{color:#3d464d;background:#e2e2e2}:host[theme=fab][color=presentation]{color:#fff;background:#5b6770}:host[theme=fab][color=bullhorn]{color:#3d464d;background:#ff6900}:host[theme=fab][color=pulse]{color:#3d464d;background:#3bafda}:host[theme=fab][color=company]{color:#fff;background:#39d}:host[theme=fab][color=candidate]{color:#fff;background:#4b7}:host[theme=fab][color=lead]{color:#fff;background:#a69}:host[theme=fab][color=contact]{color:#fff;background:#fa4}:host[theme=fab][color=clientcontact]{color:#fff;background:#fa4}:host[theme=fab][color=opportunity]{color:#fff;background:#625}:host[theme=fab][color=job]{color:#fff;background:#b56}:host[theme=fab][color=joborder]{color:#fff;background:#b56}:host[theme=fab][color=submission]{color:#3d464d;background:#a9adbb}:host[theme=fab][color=sendout]{color:#fff;background:#747884}:host[theme=fab][color=placement]{color:#fff;background:#0b344f}:host[theme=fab][color=note]{color:#fff;background:#747884}:host[theme=fab][color=contract]{color:#fff;background:#454ea0}:host[theme=fab][color=task]{color:#fff;background:#4f5361}:host[theme=fab][color=jobCode]{color:#fff;background:#696d79}:host[theme=fab][color=earnCode]{color:#fff;background:#696d79}:host[theme=fab][color=invoiceStatement]{color:#fff;background:#696d79}:host[theme=fab][color=billableCharge]{color:#fff;background:#696d79}:host[theme=fab][color=payableCharge]{color:#fff;background:#696d79}:host[theme=fab][color=user]{color:#fff;background:#696d79}:host[theme=fab][color=corporateUser]{color:#fff;background:#696d79}:host[theme=fab][color=distributionList]{color:#fff;background:#696d79}:host[theme=fab][color=credential]{color:#fff;background:#696d79}:host[theme=fab][color=person]{color:#fff;background:#696d79}:host[theme=fab][inverse]{color:#fff}:host[theme=fab]:focus,:host[theme=fab]:hover{box-shadow:0 1px 2px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[theme=fab]:active{box-shadow:0 1px 2px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}:host[theme=fab] .button-contents{display:contents}:host[theme=fab] i{margin:0;padding:0}:host[theme=fab] i:before{display:block}\n", ":host[theme=icon]{padding:.5rem;font-size:1.4rem;height:2.4rem}:host[theme=icon][color=black]{color:#000}:host[theme=icon][color=black] i{color:#000}:host[theme=icon][color=white]{color:#fff}:host[theme=icon][color=white] i{color:#fff}:host[theme=icon][color=gray]{color:#9e9e9e}:host[theme=icon][color=gray] i{color:#9e9e9e}:host[theme=icon][color=grey]{color:#9e9e9e}:host[theme=icon][color=grey] i{color:#9e9e9e}:host[theme=icon][color=offWhite]{color:#f7f7f7}:host[theme=icon][color=offWhite] i{color:#f7f7f7}:host[theme=icon][color=bright]{color:#f7f7f7}:host[theme=icon][color=bright] i{color:#f7f7f7}:host[theme=icon][color=light]{color:#dbdbdb}:host[theme=icon][color=light] i{color:#dbdbdb}:host[theme=icon][color=neutral]{color:#4f5361}:host[theme=icon][color=neutral] i{color:#4f5361}:host[theme=icon][color=dark]{color:#3d464d}:host[theme=icon][color=dark] i{color:#3d464d}:host[theme=icon][color=orange]{color:#ff6900}:host[theme=icon][color=orange] i{color:#ff6900}:host[theme=icon][color=navigation]{color:#202945}:host[theme=icon][color=navigation] i{color:#202945}:host[theme=icon][color=skyBlue]{color:#009bdf}:host[theme=icon][color=skyBlue] i{color:#009bdf}:host[theme=icon][color=steel]{color:#5b6770}:host[theme=icon][color=steel] i{color:#5b6770}:host[theme=icon][color=metal]{color:#637893}:host[theme=icon][color=metal] i{color:#637893}:host[theme=icon][color=sand]{color:#f4f4f4}:host[theme=icon][color=sand] i{color:#f4f4f4}:host[theme=icon][color=silver]{color:#e2e2e2}:host[theme=icon][color=silver] i{color:#e2e2e2}:host[theme=icon][color=stone]{color:#bebebe}:host[theme=icon][color=stone] i{color:#bebebe}:host[theme=icon][color=ash]{color:#a0a0a0}:host[theme=icon][color=ash] i{color:#a0a0a0}:host[theme=icon][color=slate]{color:#707070}:host[theme=icon][color=slate] i{color:#707070}:host[theme=icon][color=onyx]{color:#526980}:host[theme=icon][color=onyx] i{color:#526980}:host[theme=icon][color=charcoal]{color:#282828}:host[theme=icon][color=charcoal] i{color:#282828}:host[theme=icon][color=moonlight]{color:#1a242f}:host[theme=icon][color=moonlight] i{color:#1a242f}:host[theme=icon][color=midnight]{color:#202945}:host[theme=icon][color=midnight] i{color:#202945}:host[theme=icon][color=darkness]{color:#161f27}:host[theme=icon][color=darkness] i{color:#161f27}:host[theme=icon][color=navy]{color:#0d2d42}:host[theme=icon][color=navy] i{color:#0d2d42}:host[theme=icon][color=aqua]{color:#3bafda}:host[theme=icon][color=aqua] i{color:#3bafda}:host[theme=icon][color=ocean]{color:#4a89dc}:host[theme=icon][color=ocean] i{color:#4a89dc}:host[theme=icon][color=mint]{color:#37bc9b}:host[theme=icon][color=mint] i{color:#37bc9b}:host[theme=icon][color=grass]{color:#8cc152}:host[theme=icon][color=grass] i{color:#8cc152}:host[theme=icon][color=sunflower]{color:#f6b042}:host[theme=icon][color=sunflower] i{color:#f6b042}:host[theme=icon][color=bittersweet]{color:#eb6845}:host[theme=icon][color=bittersweet] i{color:#eb6845}:host[theme=icon][color=grapefruit]{color:#da4453}:host[theme=icon][color=grapefruit] i{color:#da4453}:host[theme=icon][color=carnation]{color:#d770ad}:host[theme=icon][color=carnation] i{color:#d770ad}:host[theme=icon][color=lavender]{color:#967adc}:host[theme=icon][color=lavender] i{color:#967adc}:host[theme=icon][color=mountain]{color:#9678b6}:host[theme=icon][color=mountain] i{color:#9678b6}:host[theme=icon][color=info]{color:#4a89dc}:host[theme=icon][color=info] i{color:#4a89dc}:host[theme=icon][color=positive]{color:#4a89dc}:host[theme=icon][color=positive] i{color:#4a89dc}:host[theme=icon][color=success]{color:#8cc152}:host[theme=icon][color=success] i{color:#8cc152}:host[theme=icon][color=negative]{color:#da4453}:host[theme=icon][color=negative] i{color:#da4453}:host[theme=icon][color=danger]{color:#da4453}:host[theme=icon][color=danger] i{color:#da4453}:host[theme=icon][color=error]{color:#da4453}:host[theme=icon][color=error] i{color:#da4453}:host[theme=icon][color=warning]{color:#f6b042}:host[theme=icon][color=warning] i{color:#f6b042}:host[theme=icon][color=empty]{color:#cccdcc}:host[theme=icon][color=empty] i{color:#cccdcc}:host[theme=icon][color=disabled]{color:#bebebe}:host[theme=icon][color=disabled] i{color:#bebebe}:host[theme=icon][color=background]{color:#f7f7f7}:host[theme=icon][color=background] i{color:#f7f7f7}:host[theme=icon][color=backgroundDark]{color:#e2e2e2}:host[theme=icon][color=backgroundDark] i{color:#e2e2e2}:host[theme=icon][color=presentation]{color:#5b6770}:host[theme=icon][color=presentation] i{color:#5b6770}:host[theme=icon][color=bullhorn]{color:#ff6900}:host[theme=icon][color=bullhorn] i{color:#ff6900}:host[theme=icon][color=pulse]{color:#3bafda}:host[theme=icon][color=pulse] i{color:#3bafda}:host[theme=icon][color=company]{color:#39d}:host[theme=icon][color=company] i{color:#39d}:host[theme=icon][color=candidate]{color:#4b7}:host[theme=icon][color=candidate] i{color:#4b7}:host[theme=icon][color=lead]{color:#a69}:host[theme=icon][color=lead] i{color:#a69}:host[theme=icon][color=contact]{color:#fa4}:host[theme=icon][color=contact] i{color:#fa4}:host[theme=icon][color=clientcontact]{color:#fa4}:host[theme=icon][color=clientcontact] i{color:#fa4}:host[theme=icon][color=opportunity]{color:#625}:host[theme=icon][color=opportunity] i{color:#625}:host[theme=icon][color=job]{color:#b56}:host[theme=icon][color=job] i{color:#b56}:host[theme=icon][color=joborder]{color:#b56}:host[theme=icon][color=joborder] i{color:#b56}:host[theme=icon][color=submission]{color:#a9adbb}:host[theme=icon][color=submission] i{color:#a9adbb}:host[theme=icon][color=sendout]{color:#747884}:host[theme=icon][color=sendout] i{color:#747884}:host[theme=icon][color=placement]{color:#0b344f}:host[theme=icon][color=placement] i{color:#0b344f}:host[theme=icon][color=note]{color:#747884}:host[theme=icon][color=note] i{color:#747884}:host[theme=icon][color=contract]{color:#454ea0}:host[theme=icon][color=contract] i{color:#454ea0}:host[theme=icon][color=task]{color:#4f5361}:host[theme=icon][color=task] i{color:#4f5361}:host[theme=icon][color=jobCode]{color:#696d79}:host[theme=icon][color=jobCode] i{color:#696d79}:host[theme=icon][color=earnCode]{color:#696d79}:host[theme=icon][color=earnCode] i{color:#696d79}:host[theme=icon][color=invoiceStatement]{color:#696d79}:host[theme=icon][color=invoiceStatement] i{color:#696d79}:host[theme=icon][color=billableCharge]{color:#696d79}:host[theme=icon][color=billableCharge] i{color:#696d79}:host[theme=icon][color=payableCharge]{color:#696d79}:host[theme=icon][color=payableCharge] i{color:#696d79}:host[theme=icon][color=user]{color:#696d79}:host[theme=icon][color=user] i{color:#696d79}:host[theme=icon][color=corporateUser]{color:#696d79}:host[theme=icon][color=corporateUser] i{color:#696d79}:host[theme=icon][color=distributionList]{color:#696d79}:host[theme=icon][color=distributionList] i{color:#696d79}:host[theme=icon][color=credential]{color:#696d79}:host[theme=icon][color=credential] i{color:#696d79}:host[theme=icon][color=person]{color:#696d79}:host[theme=icon][color=person] i{color:#696d79}:host[theme=icon][inverse]{color:#fff}:host[theme=icon] i{display:contents;margin:0!important}:host[theme=icon]:focus,:host[theme=icon]:hover{background:#0000001a}:host[theme=icon]:active{background:#00000040}:host[theme=icon] .button-contents{display:contents}:host[theme=icon][size=small]{padding:.5rem;font-size:1.2rem;height:2rem}:host[theme=icon][size=medium]{font-size:1.6rem}:host[theme=icon][size=large]{font-size:2rem;height:2.8rem;padding:1rem}\n", ":host[theme=dialogue]{background:transparent;color:#4a89dc}:host[theme=dialogue][color=black]{color:#000}:host[theme=dialogue][color=black] i{color:#000}:host[theme=dialogue][color=white]{color:#fff}:host[theme=dialogue][color=white] i{color:#fff}:host[theme=dialogue][color=gray]{color:#9e9e9e}:host[theme=dialogue][color=gray] i{color:#9e9e9e}:host[theme=dialogue][color=grey]{color:#9e9e9e}:host[theme=dialogue][color=grey] i{color:#9e9e9e}:host[theme=dialogue][color=offWhite]{color:#f7f7f7}:host[theme=dialogue][color=offWhite] i{color:#f7f7f7}:host[theme=dialogue][color=bright]{color:#f7f7f7}:host[theme=dialogue][color=bright] i{color:#f7f7f7}:host[theme=dialogue][color=light]{color:#dbdbdb}:host[theme=dialogue][color=light] i{color:#dbdbdb}:host[theme=dialogue][color=neutral]{color:#4f5361}:host[theme=dialogue][color=neutral] i{color:#4f5361}:host[theme=dialogue][color=dark]{color:#3d464d}:host[theme=dialogue][color=dark] i{color:#3d464d}:host[theme=dialogue][color=orange]{color:#ff6900}:host[theme=dialogue][color=orange] i{color:#ff6900}:host[theme=dialogue][color=navigation]{color:#202945}:host[theme=dialogue][color=navigation] i{color:#202945}:host[theme=dialogue][color=skyBlue]{color:#009bdf}:host[theme=dialogue][color=skyBlue] i{color:#009bdf}:host[theme=dialogue][color=steel]{color:#5b6770}:host[theme=dialogue][color=steel] i{color:#5b6770}:host[theme=dialogue][color=metal]{color:#637893}:host[theme=dialogue][color=metal] i{color:#637893}:host[theme=dialogue][color=sand]{color:#f4f4f4}:host[theme=dialogue][color=sand] i{color:#f4f4f4}:host[theme=dialogue][color=silver]{color:#e2e2e2}:host[theme=dialogue][color=silver] i{color:#e2e2e2}:host[theme=dialogue][color=stone]{color:#bebebe}:host[theme=dialogue][color=stone] i{color:#bebebe}:host[theme=dialogue][color=ash]{color:#a0a0a0}:host[theme=dialogue][color=ash] i{color:#a0a0a0}:host[theme=dialogue][color=slate]{color:#707070}:host[theme=dialogue][color=slate] i{color:#707070}:host[theme=dialogue][color=onyx]{color:#526980}:host[theme=dialogue][color=onyx] i{color:#526980}:host[theme=dialogue][color=charcoal]{color:#282828}:host[theme=dialogue][color=charcoal] i{color:#282828}:host[theme=dialogue][color=moonlight]{color:#1a242f}:host[theme=dialogue][color=moonlight] i{color:#1a242f}:host[theme=dialogue][color=midnight]{color:#202945}:host[theme=dialogue][color=midnight] i{color:#202945}:host[theme=dialogue][color=darkness]{color:#161f27}:host[theme=dialogue][color=darkness] i{color:#161f27}:host[theme=dialogue][color=navy]{color:#0d2d42}:host[theme=dialogue][color=navy] i{color:#0d2d42}:host[theme=dialogue][color=aqua]{color:#3bafda}:host[theme=dialogue][color=aqua] i{color:#3bafda}:host[theme=dialogue][color=ocean]{color:#4a89dc}:host[theme=dialogue][color=ocean] i{color:#4a89dc}:host[theme=dialogue][color=mint]{color:#37bc9b}:host[theme=dialogue][color=mint] i{color:#37bc9b}:host[theme=dialogue][color=grass]{color:#8cc152}:host[theme=dialogue][color=grass] i{color:#8cc152}:host[theme=dialogue][color=sunflower]{color:#f6b042}:host[theme=dialogue][color=sunflower] i{color:#f6b042}:host[theme=dialogue][color=bittersweet]{color:#eb6845}:host[theme=dialogue][color=bittersweet] i{color:#eb6845}:host[theme=dialogue][color=grapefruit]{color:#da4453}:host[theme=dialogue][color=grapefruit] i{color:#da4453}:host[theme=dialogue][color=carnation]{color:#d770ad}:host[theme=dialogue][color=carnation] i{color:#d770ad}:host[theme=dialogue][color=lavender]{color:#967adc}:host[theme=dialogue][color=lavender] i{color:#967adc}:host[theme=dialogue][color=mountain]{color:#9678b6}:host[theme=dialogue][color=mountain] i{color:#9678b6}:host[theme=dialogue][color=info]{color:#4a89dc}:host[theme=dialogue][color=info] i{color:#4a89dc}:host[theme=dialogue][color=positive]{color:#4a89dc}:host[theme=dialogue][color=positive] i{color:#4a89dc}:host[theme=dialogue][color=success]{color:#8cc152}:host[theme=dialogue][color=success] i{color:#8cc152}:host[theme=dialogue][color=negative]{color:#da4453}:host[theme=dialogue][color=negative] i{color:#da4453}:host[theme=dialogue][color=danger]{color:#da4453}:host[theme=dialogue][color=danger] i{color:#da4453}:host[theme=dialogue][color=error]{color:#da4453}:host[theme=dialogue][color=error] i{color:#da4453}:host[theme=dialogue][color=warning]{color:#f6b042}:host[theme=dialogue][color=warning] i{color:#f6b042}:host[theme=dialogue][color=empty]{color:#cccdcc}:host[theme=dialogue][color=empty] i{color:#cccdcc}:host[theme=dialogue][color=disabled]{color:#bebebe}:host[theme=dialogue][color=disabled] i{color:#bebebe}:host[theme=dialogue][color=background]{color:#f7f7f7}:host[theme=dialogue][color=background] i{color:#f7f7f7}:host[theme=dialogue][color=backgroundDark]{color:#e2e2e2}:host[theme=dialogue][color=backgroundDark] i{color:#e2e2e2}:host[theme=dialogue][color=presentation]{color:#5b6770}:host[theme=dialogue][color=presentation] i{color:#5b6770}:host[theme=dialogue][color=bullhorn]{color:#ff6900}:host[theme=dialogue][color=bullhorn] i{color:#ff6900}:host[theme=dialogue][color=pulse]{color:#3bafda}:host[theme=dialogue][color=pulse] i{color:#3bafda}:host[theme=dialogue][color=company]{color:#39d}:host[theme=dialogue][color=company] i{color:#39d}:host[theme=dialogue][color=candidate]{color:#4b7}:host[theme=dialogue][color=candidate] i{color:#4b7}:host[theme=dialogue][color=lead]{color:#a69}:host[theme=dialogue][color=lead] i{color:#a69}:host[theme=dialogue][color=contact]{color:#fa4}:host[theme=dialogue][color=contact] i{color:#fa4}:host[theme=dialogue][color=clientcontact]{color:#fa4}:host[theme=dialogue][color=clientcontact] i{color:#fa4}:host[theme=dialogue][color=opportunity]{color:#625}:host[theme=dialogue][color=opportunity] i{color:#625}:host[theme=dialogue][color=job]{color:#b56}:host[theme=dialogue][color=job] i{color:#b56}:host[theme=dialogue][color=joborder]{color:#b56}:host[theme=dialogue][color=joborder] i{color:#b56}:host[theme=dialogue][color=submission]{color:#a9adbb}:host[theme=dialogue][color=submission] i{color:#a9adbb}:host[theme=dialogue][color=sendout]{colo