.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}
textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{padding:2px 0 !important;box-sizing:content-box !important;height:auto !important;overflow:hidden !important}textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0 !important;box-sizing:content-box !important;height:0 !important}@keyframes cdk-text-field-autofill-start{/*!*/}@keyframes cdk-text-field-autofill-end{/*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}
// New Variables

// Typography
@font-family: 'Source Sans Pro';
@font-weight: 400;
@font-weight-bold: 600;

@font-size-base: 16px;

@font-size: 1rem;

@font-size-xxl: 1.875rem;
@font-size-xl: 1.5rem;
@font-size-lg: 1.125rem;
@font-size-md: 0.875rem;
@font-size-sm: 0.75rem;
@font-size-xs: 0.625rem;

@font-size-h1: 2.5rem;
@font-size-h2: 2rem;
@font-size-h3: 1.5rem;
@font-size-h4: 1rem;
@font-size-h5: 0.75rem;
@font-size-h6: 0.75rem;

@font-weight-h1: 200;
@font-weight-h2: 200;
@font-weight-h3: 200;
@font-weight-h4: 600;
@font-weight-h5: 600;
@font-weight-h6: 200;

@font-weight-light: 200;
@font-weight-thin: 300;
@font-weight-regular: 400;
@font-weight-semibold: 600;
@font-weight-bold: 700;

//Spacing Classes
@spacing-xxsTopBottom: 2px;
@spacing-xxsRightLeft: 4px;
@spacing-xs: 5px;
@spacing-sm: 10px;
@spacing: 15px;
@spacing-md: 20px;
@spacing-lg: 30px;
@spacing-xl: 50px;
@spacing-nil: 0;

@headings-font-family: @font-family;
@headings-color: inherit;

@text-color: #676a6c;
@hyperlink-color:#585858;
@border-color: #e7eaec;

// Background
@body-bg: #fafafa;
@body-bg-dark: #001632;

// Accordion
@accordion-outline: #60798d;

// Alerts
@alert-info-bg: rgba(@accent, 0.2);
@alert-info-color: @accent;
@alert-info-border: rgba(@accent, 0.4);

@alert-error-bg: rgba(@critical, 0.2);
@alert-error-color: @critical;
@alert-error-border: rgba(@critical, 0.4);

@alert-success-bg: rgba(@ok, 0.2);
@alert-success-color: @ok;
@alert-success-border: rgba(@ok, 0.4);

@alert-warning-bg: rgba(@warning, 0.2);
@alert-warning-color: @warning;
@alert-warning-border: rgba(@warning, 0.4);

@alert-dark-bg: rgba(@grey2, 0.2);
@alert-dark-color: @grey2;
@alert-dark-border: rgba(@grey2, 0.4);

// Base Colors
@primary: #00a7a2;
@accent: #7b63a3;
@secondary: #fff;
@alternate1: #3baa43;
@alternate2: #025662;
@alternate3: #b08f5c;
@vibrant1: #00cceb;
@vibrant2: #ff9048;
@grey1: #2a2a2a;
@grey2: #333;
@grey3: #666;
@grey4: #999;
@grey5: #ccc;
@grey6: #eee;
@grey7: #f5f5f5;
@grey8: #fafafa;
@white: #fff;
@chart1: @primary;
@chart2: @accent;
@chart3: #3baa43;
@chart4: #025662;
@chart5: #b08f5c;
@chart6: #ccc;
@ok: #3baa43;
@warning: #ff9048;
@critical: #ff454f;

@aspects-outline: @primary;

// Breadcrumb
@breadcrumb-color: fade(@text-color, 70%);
@breadcrumb-hover-color: @primary;
@breadcrumb-separator-color: fade(@text-color, 40%);

// Buttons
@btn-font-family: @font-family;
@btn-font-size: 0.875rem;

@btn-text-transform: uppercase;
@btn-border-radius: 0;
@btn-circular-border-radius: 50%;
@btn-shadow: none;
@btn-hover-shadow: none;
@btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@btn-disabled-shadow: none;
@btn-shadow-dark: 1px 1px 3px #1a1a1a; //dark styling
@btn-hover-shadow-dark: 1px 1px 8px #1a1a1a;

@btn-large-font-size: 1.125rem;
@btn-small-font-size: 0.75rem;

@btn-stroke-hover-shadow: #ccc;

@btn-clear-hover-color: #0096d6;

// Button Primary
@btn-primary-bg: @primary;
@btn-primary-color: @white;
@btn-primary-border: @btn-primary-bg;
@btn-primary-hover-color: @white;
@btn-primary-focus-color: @white;
@btn-primary-focus-color-dark: @white;
@btn-primary-active-color: @white;

@btn-primary-disabled-bg: #ededed;
@btn-primary-disabled-color: #a8a8a8;
@btn-primary-disabled-border: #ededed;
@btn-primary-disabled-bg-dark: #464646;
@btn-primary-disabled-color-dark: #636363;
@btn-primary-disabled-border-dark: #464646;

// Secondary Buttons
@btn-secondary-bg: @white;
@btn-secondary-color: #999;
@btn-secondary-border: #ccc;
@btn-secondary-shadow: none;
@btn-secondary-bg-dark: #575757;
@btn-secondary-color-dark: #fff;
@btn-secondary-border-dark: #666;
@btn-secondary-shadow-dark: #1a1a1a;

@btn-secondary-hover-bg: #f2f2f2;
@btn-secondary-hover-color: @btn-secondary-color;
@btn-secondary-hover-border: #bfbfbf;
@btn-secondary-hover-bg-dark: #4a4a4a;
@btn-secondary-hover-color-dark: #fff;
@btn-secondary-hover-border-dark: #595959;

@btn-secondary-focus-bg: @white;
@btn-secondary-focus-color: @btn-secondary-color;
@btn-secondary-focus-border: @btn-secondary-border;
@btn-secondary-focus-color-dark: #fff;

@btn-secondary-active-bg: #ebebeb;
@btn-secondary-active-color: @btn-secondary-color;
@btn-secondary-active-border: #b8b8b8;
@btn-secondary-active-hover-shadow: #ddd;
@btn-secondary-active-bg-dark: #424242;
@btn-secondary-active-border-dark: #525252;
@btn-secondary-active-hover-bg-dark: #525252;
@btn-secondary-active-hover-shadow-dark: 1px 1px 8px #1a1a1a;

@btn-secondary-disabled-bg: #ededed;
@btn-secondary-disabled-color: #a8a8a8;
@btn-secondary-disabled-border: #ededed;
@btn-secondary-disabled-bg-dark: #464646;
@btn-secondary-disabled-color-dark: #636363;
@btn-secondary-disabled-border-dark: #464646;

@btn-secondary-link-color-dark: #666;
@btn-secondary-link-active-color-dark: #666;

@btn-secondary-stroke-hover-color-dark: #8c8c8c;
@btn-secondary-stroke-active-color-dark: #858585;

// Accent Buttons
@btn-accent-bg: @accent;
@btn-accent-color: @white;
@btn-accent-border: @btn-accent-bg;
@btn-accent-hover-color: @white;
@btn-accent-focus-color: @white;
@btn-accent-active-color: @white;
@btn-accent-active-bg-dark: #445563; //dark styling
@btn-accent-active-color-dark: @white;
@btn-accent-active-border-dark: #445664;

@btn-accent-disabled-bg: #ededed;
@btn-accent-disabled-color: #a8a8a8;
@btn-accent-disabled-border: #ededed;
@btn-accent-disabled-bg-dark: #464646; //dark styling
@btn-accent-disabled-color-dark: #636363;
@btn-accent-disabled-border-dark: #464646;

@btn-accent-link-color-dark: #60798d;
@btn-accent-link-active-color-dark: #60798d;

// Warning Buttons
@btn-warning-bg: @critical;
@btn-warning-color: @white;
@btn-warning-border: @btn-warning-bg;

@btn-warning-hover-bg: #e63e46;
@btn-warning-hover-color: @white;
@btn-warning-hover-border: @btn-warning-hover-bg;

@btn-warning-focus-bg: #ff454f;
@btn-warning-focus-color: @white;
@btn-warning-focus-border: @btn-warning-focus-bg;

@btn-warning-active-bg: #d63a42;
@btn-warning-active-color: @white;
@btn-warning-active-border: @btn-warning-active-bg;
@btn-warning-active-bg-dark: #d63a42; //dark styling
@btn-warning-active-color-dark: @white;
@btn-warning-active-border-dark: #d63a42;

@btn-warning-disabled-bg: #ededed;
@btn-warning-disabled-color: #a8a8a8;
@btn-warning-disabled-border: #ededed;
@btn-warning-disabled-bg-dark: #464646; //dark styling
@btn-warning-disabled-color-dark: #636363;
@btn-warning-disabled-border-dark: #464646;

@btn-warning-link-color-dark: #ff454f;
@btn-warning-link-active-color-dark: #ff454f;

@btn-dark: #222;

@btn-link-hover-bg-dark: #1a4965;
@btn-link-active-bg-dark: #0d3c58;

@floating-action-child-btn-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
@floating-action-child-btn-hover-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);

// Hyperlinks
@hyperlink-color-dark: #ccc; //dark styling
@hyperlink-action-color-dark: @white;
@hyperlink-hover-color: #000;

// Cards
@card-bg: @white;
@card-border: #e7eaec;
@card-border-dark: #444; //dark styling
@card-bg-dark: #2a2a2a;
@card-callout-border-dark: #2a2a2a;
@card-callout-hover-border-dark: #262626;

@card-hover-bg: #f5f5f5;
@card-hover-border: @primary;
@card-hover-bg-dark: #262626; //dark styling

@card-active-bg: #fafafa;
@card-active-border: #e7eaec;

@card-selected-border: @primary;

@card-title-color: @grey2;
@card-subtitle-color: #999;

// Card Tabs
@card-tab-bg: @white;
@card-tab-border: #cecece;
@card-tab-active-border: @primary;
@card-tab-hover-border: @primary;
@card-tab-pagination-bg: rgba(51, 51, 51, 0.5);
@card-tab-pagination-color: @white;
@card-tab-pagination-hover-bg: rgba(51, 51, 51, 0.8);
@card-tab-pagination-hover-color: @white;

// Checkbox
@checkbox-outline: #445664;
@checkbox-simplified-outline: #445664;

// Radio Button
@radio-button-outline: #445664;

// Date Picker
@date-picker-bg-dark: #262626;
@date-picker-color-dark: #999;
@date-picker-border-dark: #666;

@date-picker-active-disabled-bg: #428bca;
@date-picker-active-disabled-border: #357ebd;
@date-picker-active-disabled-hover-border: #285e8e;

@date-picker-today-color: #000;
@date-picker-today-bg: #ffdb99;
@date-picker-today-border: #ffb733;
@date-picker-today-disabled-bg: #ffcd70;
@date-picker-today-disabled-border: #f59e00;

@date-picker-selected-bg: #999;
@date-picker-selected-border: #555;
@date-picker-selected-hover-bg: #858585;
@date-picker-selected-hover-border: #373737;

@date-picker-today-btn-bg: transparent;
@date-picker-today-btn-color: @grey2;
@date-picker-today-btn-hover-bg: #eee;
@date-picker-today-btn-hover-bg-dark: #4a4a4a;
@date-picker-today-btn-hover-border-dark: #595959;

@date-picker-range-today-bg: #f7ca77;
@date-picker-range-today-border: #f1a417;
@date-picker-range-today-hover-bg: #f4bb51;
@date-picker-range-today-hover-border: #bf800c;

@date-picker-dropdown-bg: @white;
@date-picker-dropdown-color: @grey2;
@date-picker-dropdown-border: rgba(0, 0, 0, 0.2);
@date-picker-dropdown-shadow: rgba(0, 0, 0, 0.2);
@date-picker-dropdown-outline: @accent;
@date-picker-dropdown-color-dark: #fafafa;
@date-picker-dropdown-border-dark: #262626;

@date-picker-active-bg: @accent;
@date-picker-active-color: @white;
@date-picker-hover-bg: #eee;
@date-picker-disabled-hover-bg: #999;
@date-picker-hover-bg-dark: #4a4a4a;

// Draggable Cards
@draggable-card-bg: @white;
@draggable-card-shadow: #666;
@draggable-card-border: #ccc;
@draggable-card-bg-dark: #4a4a4a; // dark styling
@draggable-card-border-dark: #666;

@draggable-card-child-bg-dark: #575757;
@draggable-card-child-border-dark: #666;
@draggable-card-child-shadow-dark: #1a1a1a;

@draggable-card-hover-border: @primary;

@draggable-card-active-border: @primary;
@draggable-card-active-shadow: #b8b8b8;

@draggable-card-close-btn-color: @grey2;

@draggable-card-container-bg: #f2f2f2;
@draggable-card-container-border: #e5e5e5;

// Dropzone
@dropzone-image-bg: #999;
@dropzone-upload-bg: #333;
@dropzone-error-bg: #be2626;

// Contacts Control
@contacts-risk-color: @critical;
@contacts-external-color: #ff7d28;
@contacts-label-color: @white;

@contacts-overflow-bg: @grey2;
@contacts-overflow-color: @white;

@contacts-popover-bg: #2a2a2a;
@contacts-popover-border: #3b3d3f;
@contacts-popover-color: @white;

// Display Panel
@display-panel-item-selected: #fdfdfd;
@display-panel-bg: @white;
@display-panel-color: @grey2;
@display-panel-border: rgba(51, 51, 51, 0.4);
@display-panel-shadow: rgba(51, 51, 51, 0.4);
@display-panel-header-shadow: rgba(204, 204, 204, 0.5);
@display-panel-close-color: @text-color;
@display-panel-close-hover-color: @grey2;
@display-panel-footer-bg: @white;
@display-panel-footer-border: rgba(51, 51, 51, 0.1);
@display-panel-item-selected-bg-dark: #262626;
@display-panel-bg-dark: @grey2;
@display-panel-color-dark: @grey5;
@display-panel-modal-color-dark: @white;
@display-panel-footer-bg-dark: @grey2;
@display-panel-modal-button-bg-dark: @grey2;
@display-panel-modal-button-color-dark: #999;

// Dropdowns
@dropdown-bg: @white;
@dropdown-color: @text-color;
@dropdown-shadow: rgba(86, 96, 117, 0.7);
@dropdown-divider: #e5e5e5;

@dropdown-hover-bg: #f5f5f5;
@dropdown-hover-color: @text-color;
@dropdown-divider-bg-dark: #444;

@dropdown-menu-color-dark: #999;
@dropdown-menu-focus-bg-dark: #262626;
@dropdown-menu-shadow: #999;
@dropdown-menu-hover-bg: #ebebeb;
@dropdown-menu-hint: #999;

@dropdown-highlight-bg: @shift-select-selected-light;

@dropdown-bg-dark: @navbar-bg-dark;

// Facets
@facets-container-bg: @white;
@facets-container-bg-dark: #262626;
@facet-header-border: #e5e5e5;
@facet-header-border-dark: #444;
@facet-name-color-dark: #999;
@facet-option-count-color-dark: #777;

@facet-focus-bg-dark: #404040;
@facet-option-color-dark: #999;
@facet-before-after-bg-dark: #262626;

@facet-count-color: #9a9d9f;

@facet-background: @white;

@facet-scroll-bg-dark: #262626;

@facets-clear-border: transparent;
@facets-clear-hover-border: #445664;

@selected-facet-bg: transparent;
@selected-facet-color: @text-color;
@selected-facet-border: #e5e5e5;
@selected-facet-hover-bg: #f5f5f5;
@selected-facet-border-dark: #444;
@selected-facet-color-dark: #999;
@selected-facet-hover-focus-bg-dark: #404040;

@dynamic-facet-divider: #f5f5f5;

@dynamic-facet-active-bg: #f5f5f5;
@dynamic-facet-active-color: inherit;
@dynamic-facet-input-border-dark: #444;

// Filters
@dynamic-filter-divider: #f5f5f5;
@dynamic-filter-option-active: #f5f5f5;

@dynamic-filter-border-dark: #444;
@dynamic-filter-active-bg-dark: #262626;

@filter-selected-bg: #f5f5f5;
@filter-selected-bg-dark: #262626;

@filter-option-hover-bg: #f5f5f5;
@filter-option-focus-bg: #f5f5f5;

@filter-dropdown-hover-bg: #ebebeb;
@filter-dropdown-hover-border: #445664;
@filter-dropdown-hover-focus-bg-dark: #262626;

@filter-dropdown-color-dark: #999;

@filter-dropdown-focus-bg: #ebebeb;
@filter-dropdown-focus-border: #445664;

@filter-sorter-title-color-dark: #999;

// File Upload
@file-upload-dropzone-bg: @white;
@file-upload-dropzone-border: rgba(0, 0, 0, 0.3);
@file-upload-dropzone-color: @text-color;

@file-upload-queue-bg: @tag-input-tag-bg;
@file-upload-queue-border: @tag-input-tag-border;
@file-upload-queue-border-radius: @tag-input-tag-border-radius;
@file-upload-queue-color: @tag-input-tag-color;
@file-upload-queue-active-bg: @accent;
@file-upload-queue-active-border: @accent;
@file-upload-queue-active-color: @white;

// Float Labels
@float-label-border: #e5e6e7;

// Flot Charts
@flot-tooltip-bg: @grey2;
@flot-tooltip-color: @white;
@flot-tooltip-border: @grey2;
@flot-tooltip-shadow: #262626;
@flot-scroll-button-bg: #614767;
@flot-scroll-button-color: @white;

// Forms
@form-control-bg: @white;
@form-control-color: #555;
@form-control-border: #e5e6e7;
@form-control-border-radius: 1px;
@form-control-focus-border: @accent;
@form-control-color-dark: #999;
@form-control-bg-dark: #262626;
@form-control-border-dark: #444;

@form-control-disabled-color: #b3b3b3;
@form-control-placeholder-color: #ccc;

@form-control-validation: @accent;

@form-control-success-color: @primary;
@form-control-invalid-color: @critical;

@form-control-success-border: @primary;
@form-control-invalid-border: @critical;

// Login Form Control
@login-form-bg: transparent;
@login-form-border: #555;

// EBox
@ebox-title-bg: @white;
@ebox-content-bg: @white;
@ebox-border: #e7eaec;
@ebox-heading-bg: #f3f6fb;

@ebox-title-bg-dark: #002f4b;
@ebox-title-color-dark: @grey8;
@ebox-border-dark: rgba(255, 255, 255, 0.08);

@ebox-draghandle-hover-bg-dark: #404040;

// Input Expand
@input-group-button-bg-dark: #262626;
@input-group-button-border-dark: #444;
@input-group-button-color-dark: #999;

// Login Form
@login-form-color: #999;
@login-form-dark-color: @white;
@login-form-light-color: @grey2;
@login-form-border: #999;

// Panels
@draggable-panel-placeholder-bg: #e7eaec;
@draggable-panel-placeholder-border: #cecece;
@draggable-panel-background: @white;
@draggable-panel-border: #ccc;
@draggable-panel-hover-border: @primary;

@draggable-panel-list-bg: @white;
@draggable-panel-list-border: #f2f2f2;
@draggable-panel-list-hover-bg: #f2f2f2;
@draggable-panel-list-gutter-bg: #f2f2f2;
@draggable-panel-highlight: @primary;
@draggable-panel-dragging-bg: #f2f2f2;

@draggable-panel-list-bg-dark: #444;
@draggable-panel-list-border-dark: #4a4a4a;
@draggable-panel-list-hover-bg-dark: #404040;
@draggable-panel-list-gutter-bg-dark: #404040;
@draggable-panel-list-title-color-dark: @white;
@draggable-panel-dragging-bg-dark: #404040;

@draggable-panel-card-border-dark: #666;
@draggable-panel-card-bg-dark: #575757;
@draggable-panel-card-shadow-dark: #1a1a1a;
@draggable-panel-card-hover-border-dark: @primary;
@draggable-panel-card-content-color-dark: @grey8;

@sortable-placeholder-border-dark: #7a7a7a;
@sortable-placeholder-bg-dark: #555;
@sortable-placeholder-bg: #e7eaec;

@side-inset-panel-bg: #eee;

@side-inset-panel-bg-dark: #404040;
@side-inset-panel-title-color-dark: @white;
@side-inset-panel-content-color-dark: @grey5;

@panel-border-dark: #666;
@panel-heading-bg-dark: #4a4a4a;
@panel-heading-color-dark: @grey8;
@panel-body-bg-dark: @grey2;
@panel-body-color-dark: @grey5;
@panel-body-border-dark: #666;

// Multiple Select
@multiple-list-select-color-dark: #ccc;
@multiple-select-link-dark: @primary;
@multiple-select-selecting-hover-bg-dark: #2e2e2e;

// Partition Map
@partition-map-bg: @white;
@partition-map-loading-bg: @white;
@partition-map-root-segment-bg: #60798d;

@partition-map-popover-bg: #363636;
@partition-map-popover-shadow: rgba(54, 54, 54, 0.5);
@partition-map-popover-border: #3b3d3f;
@partition-map-popover-hover-bg: #444;

@partition-map-docked-popover-bg: #363636;
@partition-map-docked-popover-shadow: #363636;
@partition-map-docked-popover-border: #3b3d3f;
@partition-map-docked-popover-hover-bg: #444;

@partition-map-edit-bg: @grey2;
@partition-map-edit-color: @white;
@partition-map-edit-done-btn-bg: rgba(0, 0, 0, 0.2);
@partition-map-edit-done-btn-color: @white;
@partition-map-edit-done-btn-hover-bg: rgba(0, 0, 0, 0.3);
@partition-map-edit-root-segment-bg: #60798d;
@partition-map-edit-segment-shadow: #111;

@partition-map-maximize-btn-bg: #222;
@partition-map-maximize-btn-border: rgba(255, 255, 255, 0.1);
@partition-map-maximize-btn-shadow: rgba(20, 20, 20, 0.8);

@partition-map-maximize-btn-hover-bg: #222;
@partition-map-maximize-btn-hover-border: #222;

@partition-map-maximize-btn-active-border: rgba(255, 255, 255, 0.1);

@partition-map-dragging-shadow: #111;
@partition-map-selection-segment-bg: #fafafa;

@partition1: #635387;
@partition9: #4a4066;
@partition10: #308935;
@partition11: #023e42;
@partition12: #91744d;
@partition13: #999;
@partition14: #294266;

// progress bar
@indicator-primary: @primary;
@indicator-accent: @accent;

@progress-bar-accent: @accent;
@progress-bar-accent-color: @white;
@progress-bar-color: @text-color;

@progress-bar-color-dark: @white;

// Search Builder Modal
@search-builder-modal-close-bg: @grey2;
@search-builder-modal-close-color: #999;
@search-builder-modal-close-hover-bg: #222;

@search-builder-modal-header-bg: #f2f2f2;
@search-builder-modal-header-color: @grey2;

@search-builder-modal-footer-bg: #f2f2f2;

@search-builder-modal-content-bg-dark: #2a2a2a;
@search-builder-modal-header-footer-bg-dark: #262626;
@search-builder-title-color-dark: #fff;

// Single Select
@single-select-selected-bg: #fdfdfd;
@single-select-selected-bg-dark: #262626;
@single-select-td-color-dark: #999;

// Select Table
@select-table-highlight-bg: @table-hover-bg;

@select-table-border-dark: #404040;
@select-table-highlight-bg-dark: #404040;

// Social Chart
@social-chart-node-color: @vibrant1;
@social-chart-edge-color: fade(@social-chart-node-color, 60%);
@social-chart-title-color: @white;
@social-chart-shadow: #222;
@social-chart-maximize-btn-bg: #222;
@social-chart-maximize-btn-border: rgba(255, 255, 255, 0.1);
@social-chart-maximize-btn-shadow: rgba(20, 20, 20, 0.8);
@social-chart-maximize-btn-hover-bg: #222;
@social-chart-maximize-btn-hover-border: #222;
@social-chart-maximize-btn-active-border: rgba(255, 255, 255, 0.1);

@social-chart-popover-bg: #3a3a3a;
@social-chart-popover-border: #3a3a3a;

@social-chart-sigma-title-shadow: #333;

// Side Modal
@side-modal-background: @white;
@side-modal-color: @grey2;
@side-modal-close-color: #999;
@side-modal-close-hover-color: @grey2;
@side-modal-footer-border: rgba(51, 51, 51, 0.1);

@side-modal-bg-dark: @grey2;
@side-modal-color-dark: @grey5;
@side-modal-header-color-dark: @white;
@side-modal-close-btn-bg-dark: @grey2;
@side-modal-close-btn-color-dark: #999;
@side-modal-close-btn-hover-bg-dark: @grey2;
@side-modal-close-btn-hover-color-dark: #999;
@side-modal-footer-border-dark: #444;

// Square modal
@square-modal-close-bg: @grey2;
@square-modal-close-color: #999;
@square-modal-close-hover-bg: #222;

// Spark Charts
@spark-chart1-track: rgba(0, 177, 171, 0.2);
@spark-chart1-fill: @chart1;
@spark-chart2-track: rgba(139, 107, 193, 0.2);
@spark-chart2-fill: @chart2;
@spark-chart3-track: rgba(59, 170, 67, 0.2);
@spark-chart3-fill: @chart3;
@spark-chart4-track: rgba(2, 86, 98, 0.2);
@spark-chart4-fill: @chart4;
@spark-chart5-track: rgba(176, 143, 92, 0.2);
@spark-chart5-fill: @chart5;
@spark-chart6-track: rgba(204, 204, 204, 0.2);
@spark-chart6-fill: @chart6;
@spark-vibrant1-track: rgba(0, 204, 235, 0.2);
@spark-vibrant1-fill: @vibrant1;
@spark-vibrant2-track: rgba(255, 144, 72, 0.2);
@spark-vibrant2-fill: @vibrant2;
@spark-primary-track: rgba(0, 167, 162, 0.2);
@spark-primary-fill: @primary;
@spark-accent-track: rgba(123, 99, 163, 0.2);
@spark-accent-fill: @accent;

@spark-ok-track: rgba(59, 170, 67, 0.2);
@spark-ok-fill: @ok;
@spark-warning-track: rgba(255, 144, 72, 0.2);
@spark-warning-fill: @warning;
@spark-alert-track: rgba(255, 69, 79, 0.2);
@spark-alert-fill: @critical;
@spark-critical-track: rgba(255, 69, 79, 0.2);
@spark-critical-fill: @critical;

// Splitter Control
@splitter-gutter: #f2f2f2;
@splitter-gutter-dark: #444;

// Infinite Scroll Button
@infinite-scroll-load-button-bg: transparent;
@infinite-scroll-load-button-color: @primary;
@infinite-scroll-load-button-border: @primary;

@infinite-scroll-load-button-hover-bg: #f2f2f2;
@infinite-scroll-load-button-hover-color: #018f6e;
@infinite-scroll-load-button-hover-border: #018f6e;

@infinite-scroll-load-button-bg-dark: @grey2;
@infinite-scroll-load-button-hover-bg-dark: #262626;

// Hotkeys
@hotkey-hint-color: #f1f1f1;

// Hover actions
@hover-action-color-dark: #999;

// JScrollPane Control
@scrollbar-drag-bg: rgba(0, 0, 0, 0.4);
@scrollbar-drag-border-radius: 4px;
@scrollbar-jsp-arrow-bg: #50506d;
@scrollbar-jsp-arrow-disabled-bg: #80808d;
@scrollbar-jsp-corner-bg: #eeeef4;

// Time Picker
@timepicker-arrow-color: #ccc;
@timepicker-arrow-hover-color: #e6e6e6;
@timepicker-arrow-color-dark: #999;
@timepicker-arrow-hover-color-dark: #444;

@timepicker-bg-dark: #2a2a2a;
@timepicker-border-dark: #666;

@timepicker-timezone-dropdown-hover-bg-dark: #4a4a4a;

// Labels
@label-size: 0.8125rem;
@label-weight: 400;
@label-bg: @accent;
@label-color: @white;
@label-dark-color: @grey2;

@label-primary: @primary;
@label-accent: @accent;
@label-warning: @critical;
@label-alternate1: @alternate1;
@label-alternate2: @alternate2;
@label-alternate3: @alternate3;
@label-vibrant1: @vibrant1;
@label-vibrant2: @vibrant2;
@label-purple: @alternate1;
@label-lightgray: #999;
@label-darksteel: #5f7a76;
@label-darkbronze: #80746e;
@label-darkgray: @grey2;
@label-midgray: #666;
@label-turquoise: #2ad2c9;
@label-orange: #ff8d6d;
@label-v-light-gray: @grey5;

// Link Buttons
@link-btn-hover: #e6e6e6;
@link-btn-active: #ccc;
@link-btn-disabled-color:#c8c8c8;

@link-btn-border: none;
@link-btn-shadow: none;

@link-btn-hover-shadow: none;
@link-btn-focus-shadow: none;
@link-btn-hover-text-decoration: none;
@link-btn-focus-text-decoration: none;

// Layout Switching
@switchery-border-dark: #666;
@switchery-bg-dark: #2a2a2a;

// Marquee Wizard Control
@marquee-wizard-color: #999;
@marquee-wizard-step-color: @white;
@marquee-wizard-step-complete-color: @marquee-wizard-step-color;

@marquee-wizard-step-active-color: @marquee-wizard-step-color;
@marquee-wizard-step-active-bg: rgba(0, 0, 0, 0.2);
@marquee-wizard-step-hover-bg: rgba(0, 0, 0, 0.2);
@marquee-wizard-step-active-hover-bg: @marquee-wizard-step-hover-bg;
@marquee-wizard-step-error-bg: @critical;

// Marquee Modal
@marquee-modal-close-bg: @grey2;
@marquee-modal-close-color: #999;
@marquee-modal-close-hover-bg: #222;

@marquee-modal-side-panel-bg: @accent;
@marquee-modal-side-panel-color: @white;

@marquee-modal-bg: @white;
@marquee-modal-title-color: @grey2;
@marquee-modal-footer-bg: #f2f2f2;

@marquee-modal-main-panel-bg-dark: #2a2a2a;
@marquee-modal-title-color-dark: @white;
@marquee-modal-footer-bg-dark: @grey2;

// Modals
@modal-content-bg-dark: @grey2;
@modal-header-color-dark: @white;
@modal-header-border-dark: #444;
@modal-body-color-dark: @grey5;
@modal-body-hr-color-border-dark: #444;
@modal-body-bg-dark: #2a2a2a;
@modal-body-form-color-dark: @grey5;
@modal-footer-border-dark: #444;

// Modal Inset Panels
@modal-inset-panel-bg: @white;
@modal-inset-panel-border: #e2e2e2;
@modal-inset-panel-shadow: #c3c3c3;

@modal-inset-panel-close-color: #999;
@modal-inset-panel-close-hover-color: @grey2;

@modal-inset-panel-header-color: @grey2;
@modal-inset-panel-header-border: #e5e5e5;

@modal-inset-panel-bg-dark: @grey2;
@modal-inset-panel-right-left-border-dark: #444;
@modal-inset-panel-right-left-shadow-dark: #1a1a1a;
@modal-inset-panel-header-border-dark: #444;
@modal-inset-panel-user-container-border-dark: #444;

@modal-inset-panel-detail-text-color: #999;

// Preview Pane
@preview-pane-bg: @white;
@preview-pane-shadow: rgba(204, 204, 204, 0.5);
@preview-pane-message-color: #ccc;
@preview-pane-new-window-color: rgba(0, 0, 0, 0.5);
@preview-pane-new-window-hover-color: rgb(0, 0, 0);

@preview-pane-bg-dark: #404040;
@preview-pane-new-window-color-dark: rgba(255, 255, 255, 0.5);
@preview-pane-new-window-hover-color-dark: rgb(255, 255, 255);
@preview-pane-shadow-bg-dark: #404040;
@preview-pane-shadow-display-panel-bg-dark: #333;

// Popover
@popover-bg-border-dark: #2a2a2a;

// Static Tooltip
@static-tooltip-bg: @white;
@static-tooltip-border: #ccc;
@static-tooltip-hover-border: @accent;
@static-tooltip-shadow: #ccc;
@static-tooltip-color: @grey2;
@static-tooltip-hide-tips: #999;
@static-tooltip-bg-dark: #2a2a2a;
@static-tooltip-border-dark: #444;
@static-tooltip-shadow-dark: #444;
@static-tooltip-hover-border-dark: @accent;
@static-tooltip-content-color-dark: @white;

// Navigation
@sidebar-width: 240px;

@affix-shadow: rgba(255, 255, 255, 0.05);
@affix-toolbar-bg-dark: #262626;
@affix-toolbar-multiple-select-mode-bg-dark: #262626;

// Top Nav Bar
@navbar-bg-dark: #0c4751;
@navbar-menu-btn-container-bg-dark: @navbar-bg-dark;
@navbar-side-active-border: #05aba5;
@navbar-side-container-dark: @navbar-bg-dark;
@navbar-app-navigator-dark-bg: #0f3e47;
@navbar-logo-element-text-bg-dark: @white;

@navbar-bg-light: @white;
@navbar-menu-btn-container-bg-light: @white;
@navbar-side-container-light: @white;

@navbar-search-color: @white;
@navbar-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.4);
@navbar-search-expanded-border: #bfbfbf;
@navbar-search-expanded-btn-border: #f2f2f2;

@navbar-back-button-hover: #4d4d4d;

@navbar-tabs-bg: @white;
@navbar-tabs-border: @white;

@navbar-tab-option-selected-color-dark: #666;
@navbar-tabs-bg-dark: #262626;
@navbar-tabs-item-color-dark: #cacaca;
@navbar-tabs-item-focus-bg-dark: #2a2a2a;
@navbar-tabs-item-active-bg-dark: #fff;

@navbar-tabs-affix-toolbar-bg-dark: #2a2a2a;
@navbar-divider-tabs-border: #e2e2e2;
@navbar-divider-tabs-border-dark: #3c3c3c;
@navbar-integrated-tabs-bg-dark: #2a2a2a;
@navbar-integrated-tabs-bg: #fafafa;

@navbar-static-header-shadow: #c3c3c3;

@navbar-fixed-top-border: #e7eaec;

@nav-top-link-width: 100px;
@nav-top-link-width-dropdown: 40px;
@nav-top-link-width-small: 30px;
@nav-fifth-level-color-dark: #999;
@nav-fifth-level-color: #666;

@nav-header-text-muted-color: #8095a8;
@nav-header-color: #dfe4ed;

// Toolbar
@toolbar-bg: #fafafa;

// Tabs
@tabs-color: @text-color;
@tabs-bg: @white;

@tabs-active-bg: transparent;
@tabs-active-color: inherit;
@tabs-active-border: @primary;

@tabs-hover-bg: #f5f5f5;
@tabs-hover-color: #808486;

@tabs-dropdown-selected-color: #ccc;
@tabs-dropdown-arrow-border: #c3c3c3;

// Notifications
@notification-bg: @accent;
@notification-border-radius: 3px;
@notification-color: @white;

@notification-alert-hover-color-dark: @grey5;
@notification-alert-shadow: #000;

// Number Picker
@number-picker-invalid-entry-border: @critical;
@number-picker-icon-color: @grey5;
@number-picker-icon-border: @form-control-border;

// Tag Input Control
@tag-input-border: @form-control-border;
@tag-input-invalid: @critical;
@tag-input-disabled-bg: #eee;
@tag-input-disabled-color: #585858;

@tag-input-tag-bg: #e2e3e5;
@tag-input-tag-border: #d8d9db;
@tag-input-tag-color: #555;
@tag-input-tag-border-radius: 1px;

@tag-input-tag-active-bg: @accent;
@tag-input-tag-active-border: @accent;
@tag-input-tag-active-color: @white;

@tag-input-autocomplete-bg: @white;
@tag-input-autocomplete-border: rgba(0, 0, 0, 0.2);
@tag-input-autocomplete-color: #000;
@tag-input-autocomplete-active-bg: #e7f1f9;
@tag-input-autocomplete-active-color: @grey2;

@tag-input-tag-border-dark: #595959;
@tag-input-tag-bg-dark: #4a4a4a;
@tag-input-tag-color-dark: #999;

@tag-item-remove-button-color: #585858;
@tag-item-remove-button-active-color: #000;

// Tables
@table-border: #e5e5e5;

@table-hover-bg: #f5f5f5;

@table-grid-border: #ddd;
@table-grid-bg: #eee;

@table-sort-hover-bg: #ebebeb;
@table-sort-focus-outline: @accent;

@table-sort-hover-bg-dark: #262626;

@table-border-dark: #444;
@table-color-dark: #999;

@table-hover-bg-dark: #404040;

@table-striped-bg-dark: #4a4a4a;
@table-striped-border-dark: white;

@table-multiple-select-item-hover-bg-dark: #262626;

@table-header-color-dark: #ccc;

// Thumbnails
@thumbnail-border: #e5e5e5;
@thumbnail-bg: #f5f5f5;
@thumbnail-icon-color: #ddd;

// Tree View
@treeview-color: @text-color;
@treeview-icon-color: rgba(95, 120, 140, 0.35);
@treeview-outline: #ccc;
@treeview-hover-bg: #f0f0f0;

@tree-node-color-dark: #ccc;
@tree-node-highlight-color-dark: @white;
@tree-node-hover-focus-bg-dark: #404040;
@tree-node-icon-color: #999;
@tree-node-input-bg-dark: #262626;

@tree-placeholder-bg: #f0f9ff;

@shift-select-hover-light: #f5f5f5;
@shift-select-selected-light: #e7f1f9;
@shift-select-selected-hover-light: #daeaf5;

@shift-select-hover-dark: #404040;
@shift-select-selected-dark: #425563;
@shift-select-selected-hover-dark: #516677;

// Tooltips
@tooltip-bg: @grey2;
@tooltip-shadow: #262626;
@tooltip-black-bg-border: #000;

// List View
@document-bg: #fdfdfd;

// Pgaination
@pagination-color: #999;
@pagination-border: #ccc;
@pagination-shadow: none;

@pagination-hover-bg: #f2f2f2;
@pagination-hover-border: #bfbfbf;
@pagination-hover-color: #999;
@pagination-hover-shadow: none;

@pagination-focus-bg: @white;
@pagination-focus-color: #999;
@pagination-focus-shadow: 0 0 1px 1px @accent;

@pagination-active-bg: @primary;
@pagination-active-border: @primary;
@pagination-active-focus-shadow: none;

// Sankey
@sankey-node-hover-bg: @accent;
@sankey-node-callout-fill: #ccc;

@sankey-label-color: #999;
@sankey-label-hover-color: rgba(255, 255, 255, 0.5);

@sankey-target-node-color: @white;
@sankey-target-node-callout-color: rgba(255, 255, 255, 0.5);
@sankey-target-node-fill: #262626;

@sankey-link-node-unit-color: rgba(255, 255, 255, 0.75);
@sankey-link-node-color: rgba(255, 255, 255, 0.5);

@sankey-link-bg: #a8a8a8;
@sankey-link-hover-bg: @accent;

@sankey-column-bg: #fafafa;
@sankey-column-hover-bg: #f2f2f2;
@sankey-column-hover-fill: #262626;

@sankey-header-color: #666;

@sankey-number-font-size: 2.3125rem;

@sankey-overflow-bg: #ff8d6e;

@sankey-divider: #979797;

@sankey-node-hover-fill-dark: rgba(42, 42, 42, 0.5);
@sankey-link-node-hover-fill-dark: rgba(42, 42, 42, 0.75);
@sankey-column-fill-dark: #2a2a2a;
@sankey-column-header-fill-dark: #ccc;

// Search Builder

@search-builder-group-title-color: @grey2;
@search-builder-operator-border: rgba(1, 169, 130, 0.2);
@search-builder-operator-border: #999;

@search-builder-operator-or-border: #cce3ed;
@search-builder-operator-and-border: #cceee6;
@search-builder-operator-not-border: rgba(255, 69, 79, 0.2);

@search-builder-field-hover: #f7f8f9;
@search-builder-remove-color: #abacad;
@search-builder-add-bg: rgba(123, 99, 163, 0.5);
@search-builder-add-icon-color: @white;
@search-builder-add-color: #999;
@search-builder-add-hover-bg: @accent;
@search-builder-add-disabled-bg: #a8a8a8;
@search-builder-placeholder-border: @accent;

@search-builder-divider: #e5e5e5;

@search-builder-divider-dark: #444;
@search-builder-field-hover-dark: #262626;
@search-builder-component-form-label-dark: #999;
@search-builder-component-icon-dark: #999;

// Timeline Control
@timeline-color: #e5e5e5;
@timeline-bg: #999;
@timeline-panel-bg: @white;
@timeline-panel-border: #d4d4d4;
@timeline-panel-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

@timeline-badge-color: @white;

@timeline-badge-primary: @primary;
@timeline-badge-accent: @accent;
@timeline-badge-alternate1: @alternate1;
@timeline-badge-alternate2: @alternate2;
@timeline-badge-alternate3: @alternate3;
@timeline-badge-vibrant1: @vibrant1;
@timeline-badge-vibrant2: @vibrant2;
@timeline-badge-success: @ok;
@timeline-badge-warning: @warning;
@timeline-badge-critical: @critical;
@timeline-badge-grey1: @grey1;
@timeline-badge-grey2: @grey2;
@timeline-badge-grey3: @grey3;
@timeline-badge-grey4: @grey4;
@timeline-badge-grey5: @grey5;

@timeline-bg-dark: #444;
@timeline-arrow-color-dark: #444;
@timeline-panel-bg-dark: #2a2a2a;
@timeline-panel-border-dark: #444;
@timeline-panel-shadow-dark: #444;

// V separator
@v-separator-border: #d3d3d3;
@v-separator-shadow: #fff;
@v-separator-border-dark: #222;
@v-separator-shadow-dark: #444;

// Wizard Control
@wizard-content-bg: #fafafa;

@wizard-content-bg-dark: #262626;

@wizard-step-active-bg: @accent;
@wizard-step-active-color: @white;

@wizard-step-complete-bg: @accent;
@wizard-step-complete-color: @white;
@wizard-step-complete-opacity: 0.5;

@wizard-step-error-bg: @critical;
@wizard-step-error-color: @white;

@wizard-steps-disabled-bg: #fafafa;
@wizard-steps-disabled-color: #c2c2c2;

@wizard-steps-disabled-bg-dark: #262626;

// Wells
@well-bg-dark: #444;
@well-border-dark: #999;

// Other
@row-divider-bg-dark: #444;
@code-bg-dark: #404040;
@landing-page-shadow: #444;
@show-grid-bg-dark: #4a4a4a;
@selecting-text-color-dark: #ccc;
@hr-dark-border: #555;
@listview-document-bg: #ededed;
@group-title-bg: #687074;
@no-drop-bg: #f2dede;

// Component List
@component-list-field-hover: #f7f8f9;
@component-list-remove-color: #abacad;
@component-list-add-bg: @accent;
@component-list-add-bg-opacity: 0.5;
@component-list-add-icon-color: @white;
@component-list-add-hover-bg: @accent;
@component-list-add-hover-bg-opacity: 1;
@component-list-add-color: #999;

// Organization Chart
@organization-chart-hierarchy-bar-border: @modal-inset-panel-border;
@organization-chart-hierarchy-bar-arrow: #cfcfcf;
@organization-chart-hierarchy-bar-color: #666;
@organization-chart-hierarchy-bar-active-color: @grey2;
@organization-chart-hierarchy-bar-popover-hover: @btn-secondary-hover-bg;

@organization-chart-node-bg: @white;
@organization-chart-node-border: #e7e7e7;
@organization-chart-node-hover-border: @primary;
@organization-chart-node-active-border: @primary;

@organization-chart-link-color: #e5e5e5;

// Page Header
@page-header-bg: @navbar-bg-dark;

@page-header-nav-color: @grey5;
@page-header-nav-active-bg: lighten(@page-header-bg, 5%);
@page-header-nav-active-color: @white;
@page-header-nav-selected-color: @white;
@page-header-nav-selected-shadow: @primary;

@page-header-nav-dropdown-bg: darken(@page-header-bg, 5%);
@page-header-nav-dropdown-color: @grey5;
@page-header-nav-dropdown-icon-color: @grey5;
@page-header-nav-dropdown-hover-bg: @page-header-nav-active-bg;
@page-header-nav-dropdown-hover-color: @grey6;
@page-header-nav-dropdown-selected-color: @white;

@page-header-back-button-color: @primary;
@page-header-back-button-hover-color: @primary;
@page-header-back-button-hover-bg: rgba(0, 0, 0, 0.1);

// Media Player
@mediaplayer-shadow: 0 1px 1px 2px @grey6;
@mediaplayer-play-btn-bg: rgba(0, 0, 0, 0.5);
@mediaplayer-play-btn-color: rgba(255, 255, 255, 0.4);
@mediaplayer-controls-bg: @white;
@mediaplayer-controls-quiet-bg: rgba(0, 0, 0, 0.7);
@mediaplayer-controls-quiet-color: @grey4;
@mediaplayer-controls-quiet-hover-color: @grey6;
@mediaplayer-controls-btn-color: @grey3;
@mediaplayer-controls-btn-hover-color: @grey2;
@mediaplayer-audio-bg: @white;
@mediaplayer-audio-border: @grey8;
@mediaplayer-audio-shadow: inset 0 -2px 3px -1px @grey6;
@mediaplyer-audio-title: @grey3;
@mediaplyer-audio-subtitle: @grey4;
@mediaplayer-volume-slider-track-upper: @grey6;
@mediaplayer-volume-slider-track-lower: @grey3;
@mediaplayer-volume-slider-thumb-bg: @white;
@mediaplayer-volume-slider-thumb-border: @grey3;
@mediaplayer-volume-slider-quiet-track-upper: rgba(207, 207, 207, 0.1);
@mediaplayer-volume-slider-quiet-track-lower: rgba(153, 153, 153, 0.5);
@mediaplayer-volume-slider-quiet-thumb-bg: @white;
@mediaplayer-volume-slider-quiet-thumb-border: @grey3;
@mediaplayer-timeline-bg: @grey6;
@mediaplayer-timeline-buffered-bg: @grey5;
@mediaplayer-timeline-track: @primary;
@mediaplayer-timeline-handle: @grey2;
@mediaplayer-timeline-text: @grey3;
@mediaplayer-timeline-quiet-bg: rgba(232, 232, 232, 0.2);
@mediaplayer-timeline-quiet-buffered-bg: rgba(207, 207, 207, 0.1);
@mediaplayer-timeline-quiet-track: @primary;
@mediaplayer-timeline-quiet-handle: @grey4;
@mediaplayer-timeline-quiet-text: @grey4;
@facet-before-z-index:-1;

@stacking-context-z-index:0;

@pagination-z-index:1;

@facet-z-index:1;

@splitter-toggle-z-index: 1;

@inner-addon-button-z-index: 1;

@button-group-middle-z-index: 2;
@button-group-front-z-index: 3;

@float-label-z-index:3;

@dropzone-image-z-index:10;

@chart-callout-z-index:10;

@dropzone-details-z-index:20;
@dropzone-success-mark-z-index:500;

@display-panel-z-index:999;
@modal-open-z-index:999;

@dropzone-z-index:1000;

@chart-maximise-button-z-index:1004;

@dropdown-menu-z-index:1005;

@select-drop-z-index:1010;

@input-group-addon-z-index:2000;

@affix-toolbar-z-index:9998;
@fixed-display-panel-z-index:9999;
@affix-z-index:9999;

@nav-menu-z-index: 10000;
@nav-side-z-index: 10001;

@popover-z-index: 10019;

@scroll-top-z-index: 10019;

@modal-z-index: 10020;
@modal-dismiss-z-index: 10021;

@static-tooltip-z-index: 10098;
@tooltip-z-index: 10099;

@notications-z-index: 10100;

@overlay-z-index: 10101;

// Placeholder text
.placeholder(@color: @white) {
    &::-moz-placeholder {
        color: @color; // Firefox
        opacity: 1;
    } // See https://github.com/twbs/bootstrap/pull/11526
    &:-ms-input-placeholder {
        color: @color;
    } // Internet Explorer 10+
    &::-webkit-input-placeholder {
        color: @color;
    } // Safari and Chrome
}

.rotate(@deg) {
    transform: rotate(@deg);
}

.opacity(@opacity) {
    opacity: @opacity;
}

.focus-outline {
    outline: 2px dotted;
    outline: auto -webkit-focus-ring-color;
    outline-color: @aspects-outline;
    outline-offset: 0;
}

.native-focus-outline {
    &:not(.ux-focus-indicator) {
        outline: 2px dotted;
        outline: auto -webkit-focus-ring-color;
        outline-color: @aspects-outline;
        outline-offset: 0;
    }
}

.btn-hover-active-color(light, @color, @percent) {
    background-color: darken(@color, @percent);
    border-color: darken(@color, @percent);
}

.btn-hover-active-color(dark, @color, @percent) {
    background-color: lighten(@color, @percent);
    border-color: lighten(@color, @percent);
}
html {
    height: 100%;
    -ms-overflow-style: scrollbar;
    font-size: @font-size-base;
}

body {
    color: @text-color;
    font-size: @font-size;
    font-family: @font-family;
    position: relative;
    font-weight: @font-weight;
}

html,
body,
.wrapper {
    min-height: 100%;
}

code {
    font-size: 75%;
}

td > code {
    word-break: break-word;
}

a {
    &:hover,
    &:focus {
        text-decoration: none;
        cursor: pointer;
    }
}

.page-content {
    margin-left: @sidebar-width;
    min-height: 100%;
}

.container-max {
    max-width: 1000px;
}

.container-left {
    margin-left: 0;
}

.container-right {
    margin-right: 0;
}

.row-divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: @border-color;
}

.form-control,
.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus,
.has-warning .form-control:focus,
.navbar-collapse,
.navbar-form,
.navbar-form-custom .form-control:focus,
.navbar-form-custom .form-control:hover,
.open .btn.dropdown-toggle,
.panel,
.popover,
.progress,
.progress-bar {
    box-shadow: none;
}

.wrapper-content {
    padding: 20px 20px 40px;
}

.page-heading {
    width: 100%;
    padding: 9px 0 2px 23px;
    z-index: @stacking-context-z-index;
}

ul,
ol {
    &.unstyled {
        list-style: none outside none;
        margin-left: 0;
    }
}

.aspects-focus-outline:focus {
    .native-focus-outline;
}

/* Plunker */

body > div#ux-plunker-container {
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
}
// Generated by grunt-webfont


@font-face {
	font-family:"ux-icons";
	src:url("../fonts/ux-icons.woff") format("woff"),
		url("../fonts/ux-icons.ttf") format("truetype");
	font-weight:normal;
	font-style:normal;
}

.ux-icon {
	font-family:"ux-icons";
	display:inline-block;
	vertical-align:middle;
	line-height:1;
	font-weight:normal;
	font-style:normal;
	speak:none;
	text-decoration:inherit;
	text-transform:none;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}


// Icons

.ux-icon-mixin-3d() {
	&:before {
		content:"\f101";
	}
	
}
.ux-icon-3d{
 	.ux-icon-mixin-3d();
}

.ux-icon-mixin-achievement() {
	&:before {
		content:"\f102";
	}
	
}
.ux-icon-achievement{
 	.ux-icon-mixin-achievement();
}

.ux-icon-mixin-action() {
	&:before {
		content:"\f103";
	}
	
}
.ux-icon-action{
 	.ux-icon-mixin-action();
}

.ux-icon-mixin-actions() {
	&:before {
		content:"\f104";
	}
	
}
.ux-icon-actions{
 	.ux-icon-mixin-actions();
}

.ux-icon-mixin-active() {
	&:before {
		content:"\f105";
	}
	
}
.ux-icon-active{
 	.ux-icon-mixin-active();
}

.ux-icon-mixin-add() {
	&:before {
		content:"\f106";
	}
	
}
.ux-icon-add{
 	.ux-icon-mixin-add();
}

.ux-icon-mixin-address-book() {
	&:before {
		content:"\f107";
	}
	
}
.ux-icon-address-book{
 	.ux-icon-mixin-address-book();
}

.ux-icon-mixin-advanced-search() {
	&:before {
		content:"\f108";
	}
	
}
.ux-icon-advanced-search{
 	.ux-icon-mixin-advanced-search();
}

.ux-icon-mixin-aggregate() {
	&:before {
		content:"\f109";
	}
	
}
.ux-icon-aggregate{
 	.ux-icon-mixin-aggregate();
}

.ux-icon-mixin-alarm() {
	&:before {
		content:"\f10a";
	}
	
}
.ux-icon-alarm{
 	.ux-icon-mixin-alarm();
}

.ux-icon-mixin-alert-filled() {
	&:before {
		content:"\f10b";
	}
	
}
.ux-icon-alert-filled{
 	.ux-icon-mixin-alert-filled();
}

.ux-icon-mixin-alert() {
	&:before {
		content:"\f10c";
	}
	
}
.ux-icon-alert{
 	.ux-icon-mixin-alert();
}

.ux-icon-mixin-analytics() {
	&:before {
		content:"\f10d";
	}
	
}
.ux-icon-analytics{
 	.ux-icon-mixin-analytics();
}

.ux-icon-mixin-announcement() {
	&:before {
		content:"\f10e";
	}
	
}
.ux-icon-announcement{
 	.ux-icon-mixin-announcement();
}

.ux-icon-mixin-app() {
	&:before {
		content:"\f10f";
	}
	
}
.ux-icon-app{
 	.ux-icon-mixin-app();
}

.ux-icon-mixin-archive() {
	&:before {
		content:"\f110";
	}
	
}
.ux-icon-archive{
 	.ux-icon-mixin-archive();
}

.ux-icon-mixin-article() {
	&:before {
		content:"\f111";
	}
	
}
.ux-icon-article{
 	.ux-icon-mixin-article();
}

.ux-icon-mixin-ascend() {
	&:before {
		content:"\f112";
	}
	
}
.ux-icon-ascend{
 	.ux-icon-mixin-ascend();
}

.ux-icon-mixin-assistant() {
	&:before {
		content:"\f113";
	}
	
}
.ux-icon-assistant{
 	.ux-icon-mixin-assistant();
}

.ux-icon-mixin-attachment() {
	&:before {
		content:"\f114";
	}
	
}
.ux-icon-attachment{
 	.ux-icon-mixin-attachment();
}

.ux-icon-mixin-bar-chart() {
	&:before {
		content:"\f115";
	}
	
}
.ux-icon-bar-chart{
 	.ux-icon-mixin-bar-chart();
}

.ux-icon-mixin-blog() {
	&:before {
		content:"\f116";
	}
	
}
.ux-icon-blog{
 	.ux-icon-mixin-blog();
}

.ux-icon-mixin-bloomberg() {
	&:before {
		content:"\f117";
	}
	
}
.ux-icon-bloomberg{
 	.ux-icon-mixin-bloomberg();
}

.ux-icon-mixin-book() {
	&:before {
		content:"\f118";
	}
	
}
.ux-icon-book{
 	.ux-icon-mixin-book();
}

.ux-icon-mixin-bookmark-filled() {
	&:before {
		content:"\f119";
	}
	
}
.ux-icon-bookmark-filled{
 	.ux-icon-mixin-bookmark-filled();
}

.ux-icon-mixin-bookmark() {
	&:before {
		content:"\f11a";
	}
	
}
.ux-icon-bookmark{
 	.ux-icon-mixin-bookmark();
}

.ux-icon-mixin-bundle() {
	&:before {
		content:"\f11b";
	}
	
}
.ux-icon-bundle{
 	.ux-icon-mixin-bundle();
}

.ux-icon-mixin-calculator() {
	&:before {
		content:"\f11c";
	}
	
}
.ux-icon-calculator{
 	.ux-icon-mixin-calculator();
}

.ux-icon-mixin-calendar() {
	&:before {
		content:"\f11d";
	}
	
}
.ux-icon-calendar{
 	.ux-icon-mixin-calendar();
}

.ux-icon-mixin-camera-filled() {
	&:before {
		content:"\f11e";
	}
	
}
.ux-icon-camera-filled{
 	.ux-icon-mixin-camera-filled();
}

.ux-icon-mixin-camera() {
	&:before {
		content:"\f11f";
	}
	
}
.ux-icon-camera{
 	.ux-icon-mixin-camera();
}

.ux-icon-mixin-capacity() {
	&:before {
		content:"\f120";
	}
	
}
.ux-icon-capacity{
 	.ux-icon-mixin-capacity();
}

.ux-icon-mixin-caret-down-filled() {
	&:before {
		content:"\f121";
	}
	
}
.ux-icon-caret-down-filled{
 	.ux-icon-mixin-caret-down-filled();
}

.ux-icon-mixin-caret-down() {
	&:before {
		content:"\f122";
	}
	
}
.ux-icon-caret-down{
 	.ux-icon-mixin-caret-down();
}

.ux-icon-mixin-caret-next-filled() {
	&:before {
		content:"\f123";
	}
	
}
.ux-icon-caret-next-filled{
 	.ux-icon-mixin-caret-next-filled();
}

.ux-icon-mixin-caret-next() {
	&:before {
		content:"\f124";
	}
	
}
.ux-icon-caret-next{
 	.ux-icon-mixin-caret-next();
}

.ux-icon-mixin-caret-previous-filled() {
	&:before {
		content:"\f125";
	}
	
}
.ux-icon-caret-previous-filled{
 	.ux-icon-mixin-caret-previous-filled();
}

.ux-icon-mixin-caret-previous() {
	&:before {
		content:"\f126";
	}
	
}
.ux-icon-caret-previous{
 	.ux-icon-mixin-caret-previous();
}

.ux-icon-mixin-caret-up-filled() {
	&:before {
		content:"\f127";
	}
	
}
.ux-icon-caret-up-filled{
 	.ux-icon-mixin-caret-up-filled();
}

.ux-icon-mixin-caret-up() {
	&:before {
		content:"\f128";
	}
	
}
.ux-icon-caret-up{
 	.ux-icon-mixin-caret-up();
}

.ux-icon-mixin-catalog() {
	&:before {
		content:"\f129";
	}
	
}
.ux-icon-catalog{
 	.ux-icon-mixin-catalog();
}

.ux-icon-mixin-change-password() {
	&:before {
		content:"\f12a";
	}
	
}
.ux-icon-change-password{
 	.ux-icon-mixin-change-password();
}

.ux-icon-mixin-chapter-add() {
	&:before {
		content:"\f12b";
	}
	
}
.ux-icon-chapter-add{
 	.ux-icon-mixin-chapter-add();
}

.ux-icon-mixin-chapter-next-filled() {
	&:before {
		content:"\f12c";
	}
	
}
.ux-icon-chapter-next-filled{
 	.ux-icon-mixin-chapter-next-filled();
}

.ux-icon-mixin-chapter-next() {
	&:before {
		content:"\f12d";
	}
	
}
.ux-icon-chapter-next{
 	.ux-icon-mixin-chapter-next();
}

.ux-icon-mixin-chapter-previous-filled() {
	&:before {
		content:"\f12e";
	}
	
}
.ux-icon-chapter-previous-filled{
 	.ux-icon-mixin-chapter-previous-filled();
}

.ux-icon-mixin-chapter-previous() {
	&:before {
		content:"\f12f";
	}
	
}
.ux-icon-chapter-previous{
 	.ux-icon-mixin-chapter-previous();
}

.ux-icon-mixin-chart-organization() {
	&:before {
		content:"\f130";
	}
	
}
.ux-icon-chart-organization{
 	.ux-icon-mixin-chart-organization();
}

.ux-icon-mixin-chart-partition() {
	&:before {
		content:"\f131";
	}
	
}
.ux-icon-chart-partition{
 	.ux-icon-mixin-chart-partition();
}

.ux-icon-mixin-chart-sankey() {
	&:before {
		content:"\f132";
	}
	
}
.ux-icon-chart-sankey{
 	.ux-icon-mixin-chart-sankey();
}

.ux-icon-mixin-chat-attachment() {
	&:before {
		content:"\f133";
	}
	
}
.ux-icon-chat-attachment{
 	.ux-icon-mixin-chat-attachment();
}

.ux-icon-mixin-chat() {
	&:before {
		content:"\f134";
	}
	
}
.ux-icon-chat{
 	.ux-icon-mixin-chat();
}

.ux-icon-mixin-checkbox-selected() {
	&:before {
		content:"\f135";
	}
	
}
.ux-icon-checkbox-selected{
 	.ux-icon-mixin-checkbox-selected();
}

.ux-icon-mixin-checkbox() {
	&:before {
		content:"\f136";
	}
	
}
.ux-icon-checkbox{
 	.ux-icon-mixin-checkbox();
}

.ux-icon-mixin-checkmark() {
	&:before {
		content:"\f137";
	}
	
}
.ux-icon-checkmark{
 	.ux-icon-mixin-checkmark();
}

.ux-icon-mixin-chevron-down() {
	&:before {
		content:"\f138";
	}
	
}
.ux-icon-chevron-down{
 	.ux-icon-mixin-chevron-down();
}

.ux-icon-mixin-chevron-left-double() {
	&:before {
		content:"\f139";
	}
	
}
.ux-icon-chevron-left-double{
 	.ux-icon-mixin-chevron-left-double();
}

.ux-icon-mixin-chevron-left() {
	&:before {
		content:"\f13a";
	}
	
}
.ux-icon-chevron-left{
 	.ux-icon-mixin-chevron-left();
}

.ux-icon-mixin-chevron-right-double() {
	&:before {
		content:"\f13b";
	}
	
}
.ux-icon-chevron-right-double{
 	.ux-icon-mixin-chevron-right-double();
}

.ux-icon-mixin-chevron-right() {
	&:before {
		content:"\f13c";
	}
	
}
.ux-icon-chevron-right{
 	.ux-icon-mixin-chevron-right();
}

.ux-icon-mixin-chevron-up() {
	&:before {
		content:"\f13d";
	}
	
}
.ux-icon-chevron-up{
 	.ux-icon-mixin-chevron-up();
}

.ux-icon-mixin-chorus() {
	&:before {
		content:"\f13e";
	}
	
}
.ux-icon-chorus{
 	.ux-icon-mixin-chorus();
}

.ux-icon-mixin-circular-view() {
	&:before {
		content:"\f13f";
	}
	
}
.ux-icon-circular-view{
 	.ux-icon-mixin-circular-view();
}

.ux-icon-mixin-clipboard() {
	&:before {
		content:"\f140";
	}
	
}
.ux-icon-clipboard{
 	.ux-icon-mixin-clipboard();
}

.ux-icon-mixin-clone() {
	&:before {
		content:"\f141";
	}
	
}
.ux-icon-clone{
 	.ux-icon-mixin-clone();
}

.ux-icon-mixin-close() {
	&:before {
		content:"\f142";
	}
	
}
.ux-icon-close{
 	.ux-icon-mixin-close();
}

.ux-icon-mixin-cloud-computer() {
	&:before {
		content:"\f143";
	}
	
}
.ux-icon-cloud-computer{
 	.ux-icon-mixin-cloud-computer();
}

.ux-icon-mixin-cloud-download() {
	&:before {
		content:"\f144";
	}
	
}
.ux-icon-cloud-download{
 	.ux-icon-mixin-cloud-download();
}

.ux-icon-mixin-cloud-software() {
	&:before {
		content:"\f145";
	}
	
}
.ux-icon-cloud-software{
 	.ux-icon-mixin-cloud-software();
}

.ux-icon-mixin-cloud-upload() {
	&:before {
		content:"\f146";
	}
	
}
.ux-icon-cloud-upload{
 	.ux-icon-mixin-cloud-upload();
}

.ux-icon-mixin-cloud() {
	&:before {
		content:"\f147";
	}
	
}
.ux-icon-cloud{
 	.ux-icon-mixin-cloud();
}

.ux-icon-mixin-cluster() {
	&:before {
		content:"\f148";
	}
	
}
.ux-icon-cluster{
 	.ux-icon-mixin-cluster();
}

.ux-icon-mixin-code() {
	&:before {
		content:"\f149";
	}
	
}
.ux-icon-code{
 	.ux-icon-mixin-code();
}

.ux-icon-mixin-command-line() {
	&:before {
		content:"\f14a";
	}
	
}
.ux-icon-command-line{
 	.ux-icon-mixin-command-line();
}

.ux-icon-mixin-compare() {
	&:before {
		content:"\f14b";
	}
	
}
.ux-icon-compare{
 	.ux-icon-mixin-compare();
}

.ux-icon-mixin-compass() {
	&:before {
		content:"\f14c";
	}
	
}
.ux-icon-compass{
 	.ux-icon-mixin-compass();
}

.ux-icon-mixin-compliance() {
	&:before {
		content:"\f14d";
	}
	
}
.ux-icon-compliance{
 	.ux-icon-mixin-compliance();
}

.ux-icon-mixin-computer-personal() {
	&:before {
		content:"\f14e";
	}
	
}
.ux-icon-computer-personal{
 	.ux-icon-mixin-computer-personal();
}

.ux-icon-mixin-configuration-filled() {
	&:before {
		content:"\f14f";
	}
	
}
.ux-icon-configuration-filled{
 	.ux-icon-mixin-configuration-filled();
}

.ux-icon-mixin-configuration() {
	&:before {
		content:"\f150";
	}
	
}
.ux-icon-configuration{
 	.ux-icon-mixin-configuration();
}

.ux-icon-mixin-confluence() {
	&:before {
		content:"\f151";
	}
	
}
.ux-icon-confluence{
 	.ux-icon-mixin-confluence();
}

.ux-icon-mixin-connect() {
	&:before {
		content:"\f152";
	}
	
}
.ux-icon-connect{
 	.ux-icon-mixin-connect();
}

.ux-icon-mixin-contact-card() {
	&:before {
		content:"\f153";
	}
	
}
.ux-icon-contact-card{
 	.ux-icon-mixin-contact-card();
}

.ux-icon-mixin-contact-us-filled() {
	&:before {
		content:"\f154";
	}
	
}
.ux-icon-contact-us-filled{
 	.ux-icon-mixin-contact-us-filled();
}

.ux-icon-mixin-contact-us() {
	&:before {
		content:"\f155";
	}
	
}
.ux-icon-contact-us{
 	.ux-icon-mixin-contact-us();
}

.ux-icon-mixin-contract() {
	&:before {
		content:"\f156";
	}
	
}
.ux-icon-contract{
 	.ux-icon-mixin-contract();
}

.ux-icon-mixin-copy() {
	&:before {
		content:"\f157";
	}
	
}
.ux-icon-copy{
 	.ux-icon-mixin-copy();
}

.ux-icon-mixin-cube-filled() {
	&:before {
		content:"\f158";
	}
	
}
.ux-icon-cube-filled{
 	.ux-icon-mixin-cube-filled();
}

.ux-icon-mixin-cube() {
	&:before {
		content:"\f159";
	}
	
}
.ux-icon-cube{
 	.ux-icon-mixin-cube();
}

.ux-icon-mixin-cubes() {
	&:before {
		content:"\f15a";
	}
	
}
.ux-icon-cubes{
 	.ux-icon-mixin-cubes();
}

.ux-icon-mixin-cursor-filled() {
	&:before {
		content:"\f15b";
	}
	
}
.ux-icon-cursor-filled{
 	.ux-icon-mixin-cursor-filled();
}

.ux-icon-mixin-cursor() {
	&:before {
		content:"\f15c";
	}
	
}
.ux-icon-cursor{
 	.ux-icon-mixin-cursor();
}

.ux-icon-mixin-cut() {
	&:before {
		content:"\f15d";
	}
	
}
.ux-icon-cut{
 	.ux-icon-mixin-cut();
}

.ux-icon-mixin-cycle() {
	&:before {
		content:"\f15e";
	}
	
}
.ux-icon-cycle{
 	.ux-icon-mixin-cycle();
}

.ux-icon-mixin-dashboard() {
	&:before {
		content:"\f15f";
	}
	
}
.ux-icon-dashboard{
 	.ux-icon-mixin-dashboard();
}

.ux-icon-mixin-database() {
	&:before {
		content:"\f160";
	}
	
}
.ux-icon-database{
 	.ux-icon-mixin-database();
}

.ux-icon-mixin-defect() {
	&:before {
		content:"\f161";
	}
	
}
.ux-icon-defect{
 	.ux-icon-mixin-defect();
}

.ux-icon-mixin-deliver() {
	&:before {
		content:"\f162";
	}
	
}
.ux-icon-deliver{
 	.ux-icon-mixin-deliver();
}

.ux-icon-mixin-deployment() {
	&:before {
		content:"\f163";
	}
	
}
.ux-icon-deployment{
 	.ux-icon-mixin-deployment();
}

.ux-icon-mixin-descend() {
	&:before {
		content:"\f164";
	}
	
}
.ux-icon-descend{
 	.ux-icon-mixin-descend();
}

.ux-icon-mixin-desktop() {
	&:before {
		content:"\f165";
	}
	
}
.ux-icon-desktop{
 	.ux-icon-mixin-desktop();
}

.ux-icon-mixin-detach() {
	&:before {
		content:"\f166";
	}
	
}
.ux-icon-detach{
 	.ux-icon-mixin-detach();
}

.ux-icon-mixin-directions() {
	&:before {
		content:"\f167";
	}
	
}
.ux-icon-directions{
 	.ux-icon-mixin-directions();
}

.ux-icon-mixin-dislike-filled() {
	&:before {
		content:"\f168";
	}
	
}
.ux-icon-dislike-filled{
 	.ux-icon-mixin-dislike-filled();
}

.ux-icon-mixin-dislike() {
	&:before {
		content:"\f169";
	}
	
}
.ux-icon-dislike{
 	.ux-icon-mixin-dislike();
}

.ux-icon-mixin-divide-four() {
	&:before {
		content:"\f16a";
	}
	
}
.ux-icon-divide-four{
 	.ux-icon-mixin-divide-four();
}

.ux-icon-mixin-divide-right() {
	&:before {
		content:"\f16b";
	}
	
}
.ux-icon-divide-right{
 	.ux-icon-mixin-divide-right();
}

.ux-icon-mixin-divide-three() {
	&:before {
		content:"\f16c";
	}
	
}
.ux-icon-divide-three{
 	.ux-icon-mixin-divide-three();
}

.ux-icon-mixin-divide() {
	&:before {
		content:"\f16d";
	}
	
}
.ux-icon-divide{
 	.ux-icon-mixin-divide();
}

.ux-icon-mixin-document-cloud() {
	&:before {
		content:"\f16e";
	}
	
}
.ux-icon-document-cloud{
 	.ux-icon-mixin-document-cloud();
}

.ux-icon-mixin-document-compress() {
	&:before {
		content:"\f16f";
	}
	
}
.ux-icon-document-compress{
 	.ux-icon-mixin-document-compress();
}

.ux-icon-mixin-document-config() {
	&:before {
		content:"\f170";
	}
	
}
.ux-icon-document-config{
 	.ux-icon-mixin-document-config();
}

.ux-icon-mixin-document-csv() {
	&:before {
		content:"\f171";
	}
	
}
.ux-icon-document-csv{
 	.ux-icon-mixin-document-csv();
}

.ux-icon-mixin-document-data() {
	&:before {
		content:"\f172";
	}
	
}
.ux-icon-document-data{
 	.ux-icon-mixin-document-data();
}

.ux-icon-mixin-document-download() {
	&:before {
		content:"\f173";
	}
	
}
.ux-icon-document-download{
 	.ux-icon-mixin-document-download();
}

.ux-icon-mixin-document-excel() {
	&:before {
		content:"\f174";
	}
	
}
.ux-icon-document-excel{
 	.ux-icon-mixin-document-excel();
}

.ux-icon-mixin-document-executable() {
	&:before {
		content:"\f175";
	}
	
}
.ux-icon-document-executable{
 	.ux-icon-mixin-document-executable();
}

.ux-icon-mixin-document-html() {
	&:before {
		content:"\f176";
	}
	
}
.ux-icon-document-html{
 	.ux-icon-mixin-document-html();
}

.ux-icon-mixin-document-image() {
	&:before {
		content:"\f177";
	}
	
}
.ux-icon-document-image{
 	.ux-icon-mixin-document-image();
}

.ux-icon-mixin-document-import() {
	&:before {
		content:"\f178";
	}
	
}
.ux-icon-document-import{
 	.ux-icon-mixin-document-import();
}

.ux-icon-mixin-document-locked() {
	&:before {
		content:"\f179";
	}
	
}
.ux-icon-document-locked{
 	.ux-icon-mixin-document-locked();
}

.ux-icon-mixin-document-missing() {
	&:before {
		content:"\f17a";
	}
	
}
.ux-icon-document-missing{
 	.ux-icon-mixin-document-missing();
}

.ux-icon-mixin-document-notes() {
	&:before {
		content:"\f17b";
	}
	
}
.ux-icon-document-notes{
 	.ux-icon-mixin-document-notes();
}

.ux-icon-mixin-document-outlook() {
	&:before {
		content:"\f17c";
	}
	
}
.ux-icon-document-outlook{
 	.ux-icon-mixin-document-outlook();
}

.ux-icon-mixin-document-pdf() {
	&:before {
		content:"\f17d";
	}
	
}
.ux-icon-document-pdf{
 	.ux-icon-mixin-document-pdf();
}

.ux-icon-mixin-document-performance() {
	&:before {
		content:"\f17e";
	}
	
}
.ux-icon-document-performance{
 	.ux-icon-mixin-document-performance();
}

.ux-icon-mixin-document-powerpoint() {
	&:before {
		content:"\f17f";
	}
	
}
.ux-icon-document-powerpoint{
 	.ux-icon-mixin-document-powerpoint();
}

.ux-icon-mixin-document-rtf() {
	&:before {
		content:"\f180";
	}
	
}
.ux-icon-document-rtf{
 	.ux-icon-mixin-document-rtf();
}

.ux-icon-mixin-document-sound() {
	&:before {
		content:"\f181";
	}
	
}
.ux-icon-document-sound{
 	.ux-icon-mixin-document-sound();
}

.ux-icon-mixin-document-test() {
	&:before {
		content:"\f182";
	}
	
}
.ux-icon-document-test{
 	.ux-icon-mixin-document-test();
}

.ux-icon-mixin-document-text() {
	&:before {
		content:"\f183";
	}
	
}
.ux-icon-document-text{
 	.ux-icon-mixin-document-text();
}

.ux-icon-mixin-document-threat() {
	&:before {
		content:"\f184";
	}
	
}
.ux-icon-document-threat{
 	.ux-icon-mixin-document-threat();
}

.ux-icon-mixin-document-time() {
	&:before {
		content:"\f185";
	}
	
}
.ux-icon-document-time{
 	.ux-icon-mixin-document-time();
}

.ux-icon-mixin-document-transfer() {
	&:before {
		content:"\f186";
	}
	
}
.ux-icon-document-transfer{
 	.ux-icon-mixin-document-transfer();
}

.ux-icon-mixin-document-txt() {
	&:before {
		content:"\f187";
	}
	
}
.ux-icon-document-txt{
 	.ux-icon-mixin-document-txt();
}

.ux-icon-mixin-document-update() {
	&:before {
		content:"\f188";
	}
	
}
.ux-icon-document-update{
 	.ux-icon-mixin-document-update();
}

.ux-icon-mixin-document-upload() {
	&:before {
		content:"\f189";
	}
	
}
.ux-icon-document-upload{
 	.ux-icon-mixin-document-upload();
}

.ux-icon-mixin-document-user() {
	&:before {
		content:"\f18a";
	}
	
}
.ux-icon-document-user{
 	.ux-icon-mixin-document-user();
}

.ux-icon-mixin-document-verified() {
	&:before {
		content:"\f18b";
	}
	
}
.ux-icon-document-verified{
 	.ux-icon-mixin-document-verified();
}

.ux-icon-mixin-document-video() {
	&:before {
		content:"\f18c";
	}
	
}
.ux-icon-document-video{
 	.ux-icon-mixin-document-video();
}

.ux-icon-mixin-document-word() {
	&:before {
		content:"\f18d";
	}
	
}
.ux-icon-document-word{
 	.ux-icon-mixin-document-word();
}

.ux-icon-mixin-document() {
	&:before {
		content:"\f18e";
	}
	
}
.ux-icon-document{
 	.ux-icon-mixin-document();
}

.ux-icon-mixin-domain() {
	&:before {
		content:"\f18f";
	}
	
}
.ux-icon-domain{
 	.ux-icon-mixin-domain();
}

.ux-icon-mixin-down() {
	&:before {
		content:"\f190";
	}
	
}
.ux-icon-down{
 	.ux-icon-mixin-down();
}

.ux-icon-mixin-download() {
	&:before {
		content:"\f191";
	}
	
}
.ux-icon-download{
 	.ux-icon-mixin-download();
}

.ux-icon-mixin-drag() {
	&:before {
		content:"\f192";
	}
	
}
.ux-icon-drag{
 	.ux-icon-mixin-drag();
}

.ux-icon-mixin-drive-cage() {
	&:before {
		content:"\f193";
	}
	
}
.ux-icon-drive-cage{
 	.ux-icon-mixin-drive-cage();
}

.ux-icon-mixin-duplicate() {
	&:before {
		content:"\f194";
	}
	
}
.ux-icon-duplicate{
 	.ux-icon-mixin-duplicate();
}

.ux-icon-mixin-edit-filled() {
	&:before {
		content:"\f195";
	}
	
}
.ux-icon-edit-filled{
 	.ux-icon-mixin-edit-filled();
}

.ux-icon-mixin-edit() {
	&:before {
		content:"\f196";
	}
	
}
.ux-icon-edit{
 	.ux-icon-mixin-edit();
}

.ux-icon-mixin-efax() {
	&:before {
		content:"\f197";
	}
	
}
.ux-icon-efax{
 	.ux-icon-mixin-efax();
}

.ux-icon-mixin-eject-filled() {
	&:before {
		content:"\f198";
	}
	
}
.ux-icon-eject-filled{
 	.ux-icon-mixin-eject-filled();
}

.ux-icon-mixin-eject() {
	&:before {
		content:"\f199";
	}
	
}
.ux-icon-eject{
 	.ux-icon-mixin-eject();
}

.ux-icon-mixin-expand() {
	&:before {
		content:"\f19a";
	}
	
}
.ux-icon-expand{
 	.ux-icon-mixin-expand();
}

.ux-icon-mixin-export() {
	&:before {
		content:"\f19b";
	}
	
}
.ux-icon-export{
 	.ux-icon-mixin-export();
}

.ux-icon-mixin-fan() {
	&:before {
		content:"\f19c";
	}
	
}
.ux-icon-fan{
 	.ux-icon-mixin-fan();
}

.ux-icon-mixin-fast-forward-filled() {
	&:before {
		content:"\f19d";
	}
	
}
.ux-icon-fast-forward-filled{
 	.ux-icon-mixin-fast-forward-filled();
}

.ux-icon-mixin-fast-forward() {
	&:before {
		content:"\f19e";
	}
	
}
.ux-icon-fast-forward{
 	.ux-icon-mixin-fast-forward();
}

.ux-icon-mixin-favorite-filled() {
	&:before {
		content:"\f19f";
	}
	
}
.ux-icon-favorite-filled{
 	.ux-icon-mixin-favorite-filled();
}

.ux-icon-mixin-favorite() {
	&:before {
		content:"\f1a0";
	}
	
}
.ux-icon-favorite{
 	.ux-icon-mixin-favorite();
}

.ux-icon-mixin-filter-filled() {
	&:before {
		content:"\f1a1";
	}
	
}
.ux-icon-filter-filled{
 	.ux-icon-mixin-filter-filled();
}

.ux-icon-mixin-filter() {
	&:before {
		content:"\f1a2";
	}
	
}
.ux-icon-filter{
 	.ux-icon-mixin-filter();
}

.ux-icon-mixin-first-aid() {
	&:before {
		content:"\f1a3";
	}
	
}
.ux-icon-first-aid{
 	.ux-icon-mixin-first-aid();
}

.ux-icon-mixin-flag-filled() {
	&:before {
		content:"\f1a4";
	}
	
}
.ux-icon-flag-filled{
 	.ux-icon-mixin-flag-filled();
}

.ux-icon-mixin-flag() {
	&:before {
		content:"\f1a5";
	}
	
}
.ux-icon-flag{
 	.ux-icon-mixin-flag();
}

.ux-icon-mixin-folder-cycle() {
	&:before {
		content:"\f1a6";
	}
	
}
.ux-icon-folder-cycle{
 	.ux-icon-mixin-folder-cycle();
}

.ux-icon-mixin-folder-open() {
	&:before {
		content:"\f1a7";
	}
	
}
.ux-icon-folder-open{
 	.ux-icon-mixin-folder-open();
}

.ux-icon-mixin-folder() {
	&:before {
		content:"\f1a8";
	}
	
}
.ux-icon-folder{
 	.ux-icon-mixin-folder();
}

.ux-icon-mixin-gallery-filled() {
	&:before {
		content:"\f1a9";
	}
	
}
.ux-icon-gallery-filled{
 	.ux-icon-mixin-gallery-filled();
}

.ux-icon-mixin-gallery() {
	&:before {
		content:"\f1aa";
	}
	
}
.ux-icon-gallery{
 	.ux-icon-mixin-gallery();
}

.ux-icon-mixin-globe() {
	&:before {
		content:"\f1ab";
	}
	
}
.ux-icon-globe{
 	.ux-icon-mixin-globe();
}

.ux-icon-mixin-grid() {
	&:before {
		content:"\f1ac";
	}
	
}
.ux-icon-grid{
 	.ux-icon-mixin-grid();
}

.ux-icon-mixin-group-add() {
	&:before {
		content:"\f1ad";
	}
	
}
.ux-icon-group-add{
 	.ux-icon-mixin-group-add();
}

.ux-icon-mixin-group() {
	&:before {
		content:"\f1ae";
	}
	
}
.ux-icon-group{
 	.ux-icon-mixin-group();
}

.ux-icon-mixin-grow() {
	&:before {
		content:"\f1af";
	}
	
}
.ux-icon-grow{
 	.ux-icon-mixin-grow();
}

.ux-icon-mixin-halt() {
	&:before {
		content:"\f1b0";
	}
	
}
.ux-icon-halt{
 	.ux-icon-mixin-halt();
}

.ux-icon-mixin-help-circle() {
	&:before {
		content:"\f1b1";
	}
	
}
.ux-icon-help-circle{
 	.ux-icon-mixin-help-circle();
}

.ux-icon-mixin-help() {
	&:before {
		content:"\f1b2";
	}
	
}
.ux-icon-help{
 	.ux-icon-mixin-help();
}

.ux-icon-mixin-highlighting-remove() {
	&:before {
		content:"\f1b3";
	}
	
}
.ux-icon-highlighting-remove{
 	.ux-icon-mixin-highlighting-remove();
}

.ux-icon-mixin-highlighting() {
	&:before {
		content:"\f1b4";
	}
	
}
.ux-icon-highlighting{
 	.ux-icon-mixin-highlighting();
}

.ux-icon-mixin-history() {
	&:before {
		content:"\f1b5";
	}
	
}
.ux-icon-history{
 	.ux-icon-mixin-history();
}

.ux-icon-mixin-home-filled() {
	&:before {
		content:"\f1b6";
	}
	
}
.ux-icon-home-filled{
 	.ux-icon-mixin-home-filled();
}

.ux-icon-mixin-home() {
	&:before {
		content:"\f1b7";
	}
	
}
.ux-icon-home{
 	.ux-icon-mixin-home();
}

.ux-icon-mixin-host-maintenance() {
	&:before {
		content:"\f1b8";
	}
	
}
.ux-icon-host-maintenance{
 	.ux-icon-mixin-host-maintenance();
}

.ux-icon-mixin-host() {
	&:before {
		content:"\f1b9";
	}
	
}
.ux-icon-host{
 	.ux-icon-mixin-host();
}

.ux-icon-mixin-image-filled() {
	&:before {
		content:"\f1ba";
	}
	
}
.ux-icon-image-filled{
 	.ux-icon-mixin-image-filled();
}

.ux-icon-mixin-image() {
	&:before {
		content:"\f1bb";
	}
	
}
.ux-icon-image{
 	.ux-icon-mixin-image();
}

.ux-icon-mixin-impact() {
	&:before {
		content:"\f1bc";
	}
	
}
.ux-icon-impact{
 	.ux-icon-mixin-impact();
}

.ux-icon-mixin-import() {
	&:before {
		content:"\f1bd";
	}
	
}
.ux-icon-import{
 	.ux-icon-mixin-import();
}

.ux-icon-mixin-in-progress() {
	&:before {
		content:"\f1be";
	}
	
}
.ux-icon-in-progress{
 	.ux-icon-mixin-in-progress();
}

.ux-icon-mixin-inactive() {
	&:before {
		content:"\f1bf";
	}
	
}
.ux-icon-inactive{
 	.ux-icon-mixin-inactive();
}

.ux-icon-mixin-inbox() {
	&:before {
		content:"\f1c0";
	}
	
}
.ux-icon-inbox{
 	.ux-icon-mixin-inbox();
}

.ux-icon-mixin-indicator-filled() {
	&:before {
		content:"\f1c1";
	}
	
}
.ux-icon-indicator-filled{
 	.ux-icon-mixin-indicator-filled();
}

.ux-icon-mixin-indicator() {
	&:before {
		content:"\f1c2";
	}
	
}
.ux-icon-indicator{
 	.ux-icon-mixin-indicator();
}

.ux-icon-mixin-information-filled() {
	&:before {
		content:"\f1c3";
	}
	
}
.ux-icon-information-filled{
 	.ux-icon-mixin-information-filled();
}

.ux-icon-mixin-information() {
	&:before {
		content:"\f1c4";
	}
	
}
.ux-icon-information{
 	.ux-icon-mixin-information();
}

.ux-icon-mixin-inherit-filled() {
	&:before {
		content:"\f1c5";
	}
	
}
.ux-icon-inherit-filled{
 	.ux-icon-mixin-inherit-filled();
}

.ux-icon-mixin-inherit() {
	&:before {
		content:"\f1c6";
	}
	
}
.ux-icon-inherit{
 	.ux-icon-mixin-inherit();
}

.ux-icon-mixin-input-to-process() {
	&:before {
		content:"\f1c7";
	}
	
}
.ux-icon-input-to-process{
 	.ux-icon-mixin-input-to-process();
}

.ux-icon-mixin-install() {
	&:before {
		content:"\f1c8";
	}
	
}
.ux-icon-install{
 	.ux-icon-mixin-install();
}

.ux-icon-mixin-integration() {
	&:before {
		content:"\f1c9";
	}
	
}
.ux-icon-integration{
 	.ux-icon-mixin-integration();
}

.ux-icon-mixin-iteration-filled() {
	&:before {
		content:"\f1ca";
	}
	
}
.ux-icon-iteration-filled{
 	.ux-icon-mixin-iteration-filled();
}

.ux-icon-mixin-iteration() {
	&:before {
		content:"\f1cb";
	}
	
}
.ux-icon-iteration{
 	.ux-icon-mixin-iteration();
}

.ux-icon-mixin-java-filled() {
	&:before {
		content:"\f1cc";
	}
	
}
.ux-icon-java-filled{
 	.ux-icon-mixin-java-filled();
}

.ux-icon-mixin-java() {
	&:before {
		content:"\f1cd";
	}
	
}
.ux-icon-java{
 	.ux-icon-mixin-java();
}

.ux-icon-mixin-language() {
	&:before {
		content:"\f1ce";
	}
	
}
.ux-icon-language{
 	.ux-icon-mixin-language();
}

.ux-icon-mixin-launch() {
	&:before {
		content:"\f1cf";
	}
	
}
.ux-icon-launch{
 	.ux-icon-mixin-launch();
}

.ux-icon-mixin-license-filled() {
	&:before {
		content:"\f1d0";
	}
	
}
.ux-icon-license-filled{
 	.ux-icon-mixin-license-filled();
}

.ux-icon-mixin-license() {
	&:before {
		content:"\f1d1";
	}
	
}
.ux-icon-license{
 	.ux-icon-mixin-license();
}

.ux-icon-mixin-like-filled() {
	&:before {
		content:"\f1d2";
	}
	
}
.ux-icon-like-filled{
 	.ux-icon-mixin-like-filled();
}

.ux-icon-mixin-like() {
	&:before {
		content:"\f1d3";
	}
	
}
.ux-icon-like{
 	.ux-icon-mixin-like();
}

.ux-icon-mixin-line-chart() {
	&:before {
		content:"\f1d4";
	}
	
}
.ux-icon-line-chart{
 	.ux-icon-mixin-line-chart();
}

.ux-icon-mixin-link-bottom() {
	&:before {
		content:"\f1d5";
	}
	
}
.ux-icon-link-bottom{
 	.ux-icon-mixin-link-bottom();
}

.ux-icon-mixin-link-down() {
	&:before {
		content:"\f1d6";
	}
	
}
.ux-icon-link-down{
 	.ux-icon-mixin-link-down();
}

.ux-icon-mixin-link-next() {
	&:before {
		content:"\f1d7";
	}
	
}
.ux-icon-link-next{
 	.ux-icon-mixin-link-next();
}

.ux-icon-mixin-link-previous() {
	&:before {
		content:"\f1d8";
	}
	
}
.ux-icon-link-previous{
 	.ux-icon-mixin-link-previous();
}

.ux-icon-mixin-link-top() {
	&:before {
		content:"\f1d9";
	}
	
}
.ux-icon-link-top{
 	.ux-icon-mixin-link-top();
}

.ux-icon-mixin-link-up() {
	&:before {
		content:"\f1da";
	}
	
}
.ux-icon-link-up{
 	.ux-icon-mixin-link-up();
}

.ux-icon-mixin-link() {
	&:before {
		content:"\f1db";
	}
	
}
.ux-icon-link{
 	.ux-icon-mixin-link();
}

.ux-icon-mixin-list() {
	&:before {
		content:"\f1dc";
	}
	
}
.ux-icon-list{
 	.ux-icon-mixin-list();
}

.ux-icon-mixin-location-filled() {
	&:before {
		content:"\f1dd";
	}
	
}
.ux-icon-location-filled{
 	.ux-icon-mixin-location-filled();
}

.ux-icon-mixin-location-pin-filled() {
	&:before {
		content:"\f1de";
	}
	
}
.ux-icon-location-pin-filled{
 	.ux-icon-mixin-location-pin-filled();
}

.ux-icon-mixin-location-pin() {
	&:before {
		content:"\f1df";
	}
	
}
.ux-icon-location-pin{
 	.ux-icon-mixin-location-pin();
}

.ux-icon-mixin-location() {
	&:before {
		content:"\f1e0";
	}
	
}
.ux-icon-location{
 	.ux-icon-mixin-location();
}

.ux-icon-mixin-lock() {
	&:before {
		content:"\f1e1";
	}
	
}
.ux-icon-lock{
 	.ux-icon-mixin-lock();
}

.ux-icon-mixin-login() {
	&:before {
		content:"\f1e2";
	}
	
}
.ux-icon-login{
 	.ux-icon-mixin-login();
}

.ux-icon-mixin-logout() {
	&:before {
		content:"\f1e3";
	}
	
}
.ux-icon-logout{
 	.ux-icon-mixin-logout();
}

.ux-icon-mixin-mail-attachment() {
	&:before {
		content:"\f1e4";
	}
	
}
.ux-icon-mail-attachment{
 	.ux-icon-mixin-mail-attachment();
}

.ux-icon-mixin-mail-filled() {
	&:before {
		content:"\f1e5";
	}
	
}
.ux-icon-mail-filled{
 	.ux-icon-mixin-mail-filled();
}

.ux-icon-mixin-mail() {
	&:before {
		content:"\f1e6";
	}
	
}
.ux-icon-mail{
 	.ux-icon-mixin-mail();
}

.ux-icon-mixin-manual() {
	&:before {
		content:"\f1e7";
	}
	
}
.ux-icon-manual{
 	.ux-icon-mixin-manual();
}

.ux-icon-mixin-map-location() {
	&:before {
		content:"\f1e8";
	}
	
}
.ux-icon-map-location{
 	.ux-icon-mixin-map-location();
}

.ux-icon-mixin-map() {
	&:before {
		content:"\f1e9";
	}
	
}
.ux-icon-map{
 	.ux-icon-mixin-map();
}

.ux-icon-mixin-menu() {
	&:before {
		content:"\f1ea";
	}
	
}
.ux-icon-menu{
 	.ux-icon-mixin-menu();
}

.ux-icon-mixin-microphone-filled() {
	&:before {
		content:"\f1eb";
	}
	
}
.ux-icon-microphone-filled{
 	.ux-icon-mixin-microphone-filled();
}

.ux-icon-mixin-microphone() {
	&:before {
		content:"\f1ec";
	}
	
}
.ux-icon-microphone{
 	.ux-icon-mixin-microphone();
}

.ux-icon-mixin-monitor() {
	&:before {
		content:"\f1ed";
	}
	
}
.ux-icon-monitor{
 	.ux-icon-mixin-monitor();
}

.ux-icon-mixin-more() {
	&:before {
		content:"\f1ee";
	}
	
}
.ux-icon-more{
 	.ux-icon-mixin-more();
}

.ux-icon-mixin-multiple() {
	&:before {
		content:"\f1ef";
	}
	
}
.ux-icon-multiple{
 	.ux-icon-mixin-multiple();
}

.ux-icon-mixin-navigate() {
	&:before {
		content:"\f1f0";
	}
	
}
.ux-icon-navigate{
 	.ux-icon-mixin-navigate();
}

.ux-icon-mixin-new-window() {
	&:before {
		content:"\f1f1";
	}
	
}
.ux-icon-new-window{
 	.ux-icon-mixin-new-window();
}

.ux-icon-mixin-new() {
	&:before {
		content:"\f1f2";
	}
	
}
.ux-icon-new{
 	.ux-icon-mixin-new();
}

.ux-icon-mixin-news-aggregation() {
	&:before {
		content:"\f1f3";
	}
	
}
.ux-icon-news-aggregation{
 	.ux-icon-mixin-news-aggregation();
}

.ux-icon-mixin-news-collection() {
	&:before {
		content:"\f1f4";
	}
	
}
.ux-icon-news-collection{
 	.ux-icon-mixin-news-collection();
}

.ux-icon-mixin-news-content() {
	&:before {
		content:"\f1f5";
	}
	
}
.ux-icon-news-content{
 	.ux-icon-mixin-news-content();
}

.ux-icon-mixin-news() {
	&:before {
		content:"\f1f6";
	}
	
}
.ux-icon-news{
 	.ux-icon-mixin-news();
}

.ux-icon-mixin-next() {
	&:before {
		content:"\f1f7";
	}
	
}
.ux-icon-next{
 	.ux-icon-mixin-next();
}

.ux-icon-mixin-notes() {
	&:before {
		content:"\f1f8";
	}
	
}
.ux-icon-notes{
 	.ux-icon-mixin-notes();
}

.ux-icon-mixin-notification-filled() {
	&:before {
		content:"\f1f9";
	}
	
}
.ux-icon-notification-filled{
 	.ux-icon-mixin-notification-filled();
}

.ux-icon-mixin-notification() {
	&:before {
		content:"\f1fa";
	}
	
}
.ux-icon-notification{
 	.ux-icon-mixin-notification();
}

.ux-icon-mixin-optimization() {
	&:before {
		content:"\f1fb";
	}
	
}
.ux-icon-optimization{
 	.ux-icon-mixin-optimization();
}

.ux-icon-mixin-organization() {
	&:before {
		content:"\f1fc";
	}
	
}
.ux-icon-organization{
 	.ux-icon-mixin-organization();
}

.ux-icon-mixin-overview() {
	&:before {
		content:"\f1fd";
	}
	
}
.ux-icon-overview{
 	.ux-icon-mixin-overview();
}

.ux-icon-mixin-pan() {
	&:before {
		content:"\f1fe";
	}
	
}
.ux-icon-pan{
 	.ux-icon-mixin-pan();
}

.ux-icon-mixin-pause-filled() {
	&:before {
		content:"\f1ff";
	}
	
}
.ux-icon-pause-filled{
 	.ux-icon-mixin-pause-filled();
}

.ux-icon-mixin-pause() {
	&:before {
		content:"\f200";
	}
	
}
.ux-icon-pause{
 	.ux-icon-mixin-pause();
}

.ux-icon-mixin-payment-google-wallet() {
	&:before {
		content:"\f201";
	}
	
}
.ux-icon-payment-google-wallet{
 	.ux-icon-mixin-payment-google-wallet();
}

.ux-icon-mixin-payment-mastercard() {
	&:before {
		content:"\f202";
	}
	
}
.ux-icon-payment-mastercard{
 	.ux-icon-mixin-payment-mastercard();
}

.ux-icon-mixin-payment-paypal() {
	&:before {
		content:"\f203";
	}
	
}
.ux-icon-payment-paypal{
 	.ux-icon-mixin-payment-paypal();
}

.ux-icon-mixin-payment-square() {
	&:before {
		content:"\f204";
	}
	
}
.ux-icon-payment-square{
 	.ux-icon-mixin-payment-square();
}

.ux-icon-mixin-payment-visa() {
	&:before {
		content:"\f205";
	}
	
}
.ux-icon-payment-visa{
 	.ux-icon-mixin-payment-visa();
}

.ux-icon-mixin-pin-filled() {
	&:before {
		content:"\f206";
	}
	
}
.ux-icon-pin-filled{
 	.ux-icon-mixin-pin-filled();
}

.ux-icon-mixin-pin() {
	&:before {
		content:"\f207";
	}
	
}
.ux-icon-pin{
 	.ux-icon-mixin-pin();
}

.ux-icon-mixin-plan() {
	&:before {
		content:"\f208";
	}
	
}
.ux-icon-plan{
 	.ux-icon-mixin-plan();
}

.ux-icon-mixin-platform-apple() {
	&:before {
		content:"\f209";
	}
	
}
.ux-icon-platform-apple{
 	.ux-icon-mixin-platform-apple();
}

.ux-icon-mixin-platform-chrome() {
	&:before {
		content:"\f20a";
	}
	
}
.ux-icon-platform-chrome{
 	.ux-icon-mixin-platform-chrome();
}

.ux-icon-mixin-platform-dropbox() {
	&:before {
		content:"\f20b";
	}
	
}
.ux-icon-platform-dropbox{
 	.ux-icon-mixin-platform-dropbox();
}

.ux-icon-mixin-platform-edge() {
	&:before {
		content:"\f20c";
	}
	
}
.ux-icon-platform-edge{
 	.ux-icon-mixin-platform-edge();
}

.ux-icon-mixin-platform-firefox() {
	&:before {
		content:"\f20d";
	}
	
}
.ux-icon-platform-firefox{
 	.ux-icon-mixin-platform-firefox();
}

.ux-icon-mixin-platform-internet-explorer() {
	&:before {
		content:"\f20e";
	}
	
}
.ux-icon-platform-internet-explorer{
 	.ux-icon-mixin-platform-internet-explorer();
}

.ux-icon-mixin-platform-kubernetes() {
	&:before {
		content:"\f20f";
	}
	
}
.ux-icon-platform-kubernetes{
 	.ux-icon-mixin-platform-kubernetes();
}

.ux-icon-mixin-platform-skype() {
	&:before {
		content:"\f210";
	}
	
}
.ux-icon-platform-skype{
 	.ux-icon-mixin-platform-skype();
}

.ux-icon-mixin-platform-windows() {
	&:before {
		content:"\f211";
	}
	
}
.ux-icon-platform-windows{
 	.ux-icon-mixin-platform-windows();
}

.ux-icon-mixin-play-filled() {
	&:before {
		content:"\f212";
	}
	
}
.ux-icon-play-filled{
 	.ux-icon-mixin-play-filled();
}

.ux-icon-mixin-play() {
	&:before {
		content:"\f213";
	}
	
}
.ux-icon-play{
 	.ux-icon-mixin-play();
}

.ux-icon-mixin-power() {
	&:before {
		content:"\f214";
	}
	
}
.ux-icon-power{
 	.ux-icon-mixin-power();
}

.ux-icon-mixin-previous() {
	&:before {
		content:"\f215";
	}
	
}
.ux-icon-previous{
 	.ux-icon-mixin-previous();
}

.ux-icon-mixin-print() {
	&:before {
		content:"\f216";
	}
	
}
.ux-icon-print{
 	.ux-icon-mixin-print();
}

.ux-icon-mixin-quick-view() {
	&:before {
		content:"\f217";
	}
	
}
.ux-icon-quick-view{
 	.ux-icon-mixin-quick-view();
}

.ux-icon-mixin-radial-selected() {
	&:before {
		content:"\f218";
	}
	
}
.ux-icon-radial-selected{
 	.ux-icon-mixin-radial-selected();
}

.ux-icon-mixin-radial() {
	&:before {
		content:"\f219";
	}
	
}
.ux-icon-radial{
 	.ux-icon-mixin-radial();
}

.ux-icon-mixin-redo() {
	&:before {
		content:"\f21a";
	}
	
}
.ux-icon-redo{
 	.ux-icon-mixin-redo();
}

.ux-icon-mixin-refresh() {
	&:before {
		content:"\f21b";
	}
	
}
.ux-icon-refresh{
 	.ux-icon-mixin-refresh();
}

.ux-icon-mixin-resources() {
	&:before {
		content:"\f21c";
	}
	
}
.ux-icon-resources{
 	.ux-icon-mixin-resources();
}

.ux-icon-mixin-reuters() {
	&:before {
		content:"\f21d";
	}
	
}
.ux-icon-reuters{
 	.ux-icon-mixin-reuters();
}

.ux-icon-mixin-rewind-filled() {
	&:before {
		content:"\f21e";
	}
	
}
.ux-icon-rewind-filled{
 	.ux-icon-mixin-rewind-filled();
}

.ux-icon-mixin-rewind() {
	&:before {
		content:"\f21f";
	}
	
}
.ux-icon-rewind{
 	.ux-icon-mixin-rewind();
}

.ux-icon-mixin-risk() {
	&:before {
		content:"\f220";
	}
	
}
.ux-icon-risk{
 	.ux-icon-mixin-risk();
}

.ux-icon-mixin-rss() {
	&:before {
		content:"\f221";
	}
	
}
.ux-icon-rss{
 	.ux-icon-mixin-rss();
}

.ux-icon-mixin-satellite() {
	&:before {
		content:"\f222";
	}
	
}
.ux-icon-satellite{
 	.ux-icon-mixin-satellite();
}

.ux-icon-mixin-save-filled() {
	&:before {
		content:"\f223";
	}
	
}
.ux-icon-save-filled{
 	.ux-icon-mixin-save-filled();
}

.ux-icon-mixin-save() {
	&:before {
		content:"\f224";
	}
	
}
.ux-icon-save{
 	.ux-icon-mixin-save();
}

.ux-icon-mixin-scale-out-repository() {
	&:before {
		content:"\f225";
	}
	
}
.ux-icon-scale-out-repository{
 	.ux-icon-mixin-scale-out-repository();
}

.ux-icon-mixin-schedule-clone() {
	&:before {
		content:"\f226";
	}
	
}
.ux-icon-schedule-clone{
 	.ux-icon-mixin-schedule-clone();
}

.ux-icon-mixin-schedule-new() {
	&:before {
		content:"\f227";
	}
	
}
.ux-icon-schedule-new{
 	.ux-icon-mixin-schedule-new();
}

.ux-icon-mixin-schedule-play() {
	&:before {
		content:"\f228";
	}
	
}
.ux-icon-schedule-play{
 	.ux-icon-mixin-schedule-play();
}

.ux-icon-mixin-schedule() {
	&:before {
		content:"\f229";
	}
	
}
.ux-icon-schedule{
 	.ux-icon-mixin-schedule();
}

.ux-icon-mixin-scorecard() {
	&:before {
		content:"\f22a";
	}
	
}
.ux-icon-scorecard{
 	.ux-icon-mixin-scorecard();
}

.ux-icon-mixin-search() {
	&:before {
		content:"\f22b";
	}
	
}
.ux-icon-search{
 	.ux-icon-mixin-search();
}

.ux-icon-mixin-secure() {
	&:before {
		content:"\f22c";
	}
	
}
.ux-icon-secure{
 	.ux-icon-mixin-secure();
}

.ux-icon-mixin-select-left() {
	&:before {
		content:"\f22d";
	}
	
}
.ux-icon-select-left{
 	.ux-icon-mixin-select-left();
}

.ux-icon-mixin-select() {
	&:before {
		content:"\f22e";
	}
	
}
.ux-icon-select{
 	.ux-icon-mixin-select();
}

.ux-icon-mixin-server-cluster() {
	&:before {
		content:"\f22f";
	}
	
}
.ux-icon-server-cluster{
 	.ux-icon-mixin-server-cluster();
}

.ux-icon-mixin-server-started() {
	&:before {
		content:"\f230";
	}
	
}
.ux-icon-server-started{
 	.ux-icon-mixin-server-started();
}

.ux-icon-mixin-server() {
	&:before {
		content:"\f231";
	}
	
}
.ux-icon-server{
 	.ux-icon-mixin-server();
}

.ux-icon-mixin-servers() {
	&:before {
		content:"\f232";
	}
	
}
.ux-icon-servers{
 	.ux-icon-mixin-servers();
}

.ux-icon-mixin-service-business() {
	&:before {
		content:"\f233";
	}
	
}
.ux-icon-service-business{
 	.ux-icon-mixin-service-business();
}

.ux-icon-mixin-service-start() {
	&:before {
		content:"\f234";
	}
	
}
.ux-icon-service-start{
 	.ux-icon-mixin-service-start();
}

.ux-icon-mixin-share() {
	&:before {
		content:"\f235";
	}
	
}
.ux-icon-share{
 	.ux-icon-mixin-share();
}

.ux-icon-mixin-shield-configure() {
	&:before {
		content:"\f236";
	}
	
}
.ux-icon-shield-configure{
 	.ux-icon-mixin-shield-configure();
}

.ux-icon-mixin-shield-filled() {
	&:before {
		content:"\f237";
	}
	
}
.ux-icon-shield-filled{
 	.ux-icon-mixin-shield-filled();
}

.ux-icon-mixin-shield() {
	&:before {
		content:"\f238";
	}
	
}
.ux-icon-shield{
 	.ux-icon-mixin-shield();
}

.ux-icon-mixin-shift() {
	&:before {
		content:"\f239";
	}
	
}
.ux-icon-shift{
 	.ux-icon-mixin-shift();
}

.ux-icon-mixin-shop-basket() {
	&:before {
		content:"\f23a";
	}
	
}
.ux-icon-shop-basket{
 	.ux-icon-mixin-shop-basket();
}

.ux-icon-mixin-shop-cart() {
	&:before {
		content:"\f23b";
	}
	
}
.ux-icon-shop-cart{
 	.ux-icon-mixin-shop-cart();
}

.ux-icon-mixin-show-less() {
	&:before {
		content:"\f23c";
	}
	
}
.ux-icon-show-less{
 	.ux-icon-mixin-show-less();
}

.ux-icon-mixin-show-more() {
	&:before {
		content:"\f23d";
	}
	
}
.ux-icon-show-more{
 	.ux-icon-mixin-show-more();
}

.ux-icon-mixin-sms() {
	&:before {
		content:"\f23e";
	}
	
}
.ux-icon-sms{
 	.ux-icon-mixin-sms();
}

.ux-icon-mixin-soa() {
	&:before {
		content:"\f23f";
	}
	
}
.ux-icon-soa{
 	.ux-icon-mixin-soa();
}

.ux-icon-mixin-social-cisco-jabber() {
	&:before {
		content:"\f240";
	}
	
}
.ux-icon-social-cisco-jabber{
 	.ux-icon-mixin-social-cisco-jabber();
}

.ux-icon-mixin-social-email() {
	&:before {
		content:"\f241";
	}
	
}
.ux-icon-social-email{
 	.ux-icon-mixin-social-email();
}

.ux-icon-mixin-social-facebook-workplace() {
	&:before {
		content:"\f242";
	}
	
}
.ux-icon-social-facebook-workplace{
 	.ux-icon-mixin-social-facebook-workplace();
}

.ux-icon-mixin-social-facebook() {
	&:before {
		content:"\f243";
	}
	
}
.ux-icon-social-facebook{
 	.ux-icon-mixin-social-facebook();
}

.ux-icon-mixin-social-github() {
	&:before {
		content:"\f244";
	}
	
}
.ux-icon-social-github{
 	.ux-icon-mixin-social-github();
}

.ux-icon-mixin-social-instagram() {
	&:before {
		content:"\f245";
	}
	
}
.ux-icon-social-instagram{
 	.ux-icon-mixin-social-instagram();
}

.ux-icon-mixin-social-instant-message() {
	&:before {
		content:"\f246";
	}
	
}
.ux-icon-social-instant-message{
 	.ux-icon-mixin-social-instant-message();
}

.ux-icon-mixin-social-jira() {
	&:before {
		content:"\f247";
	}
	
}
.ux-icon-social-jira{
 	.ux-icon-mixin-social-jira();
}

.ux-icon-mixin-social-linkedin() {
	&:before {
		content:"\f248";
	}
	
}
.ux-icon-social-linkedin{
 	.ux-icon-mixin-social-linkedin();
}

.ux-icon-mixin-social-medium() {
	&:before {
		content:"\f249";
	}
	
}
.ux-icon-social-medium{
 	.ux-icon-mixin-social-medium();
}

.ux-icon-mixin-social-ms-teams() {
	&:before {
		content:"\f24a";
	}
	
}
.ux-icon-social-ms-teams{
 	.ux-icon-mixin-social-ms-teams();
}

.ux-icon-mixin-social-pinterest() {
	&:before {
		content:"\f24b";
	}
	
}
.ux-icon-social-pinterest{
 	.ux-icon-mixin-social-pinterest();
}

.ux-icon-mixin-social-reddit() {
	&:before {
		content:"\f24c";
	}
	
}
.ux-icon-social-reddit{
 	.ux-icon-mixin-social-reddit();
}

.ux-icon-mixin-social-salesforce-filled() {
	&:before {
		content:"\f24d";
	}
	
}
.ux-icon-social-salesforce-filled{
 	.ux-icon-mixin-social-salesforce-filled();
}

.ux-icon-mixin-social-salesforce() {
	&:before {
		content:"\f24e";
	}
	
}
.ux-icon-social-salesforce{
 	.ux-icon-mixin-social-salesforce();
}

.ux-icon-mixin-social-sharepoint() {
	&:before {
		content:"\f24f";
	}
	
}
.ux-icon-social-sharepoint{
 	.ux-icon-mixin-social-sharepoint();
}

.ux-icon-mixin-social-skype-for-business() {
	&:before {
		content:"\f250";
	}
	
}
.ux-icon-social-skype-for-business{
 	.ux-icon-mixin-social-skype-for-business();
}

.ux-icon-mixin-social-slack() {
	&:before {
		content:"\f251";
	}
	
}
.ux-icon-social-slack{
 	.ux-icon-mixin-social-slack();
}

.ux-icon-mixin-social-tumblr() {
	&:before {
		content:"\f252";
	}
	
}
.ux-icon-social-tumblr{
 	.ux-icon-mixin-social-tumblr();
}

.ux-icon-mixin-social-twitter() {
	&:before {
		content:"\f253";
	}
	
}
.ux-icon-social-twitter{
 	.ux-icon-mixin-social-twitter();
}

.ux-icon-mixin-social-vimeo() {
	&:before {
		content:"\f254";
	}
	
}
.ux-icon-social-vimeo{
 	.ux-icon-mixin-social-vimeo();
}

.ux-icon-mixin-social-we-chat() {
	&:before {
		content:"\f255";
	}
	
}
.ux-icon-social-we-chat{
 	.ux-icon-mixin-social-we-chat();
}

.ux-icon-mixin-social-whats-app() {
	&:before {
		content:"\f256";
	}
	
}
.ux-icon-social-whats-app{
 	.ux-icon-mixin-social-whats-app();
}

.ux-icon-mixin-social-yammer() {
	&:before {
		content:"\f257";
	}
	
}
.ux-icon-social-yammer{
 	.ux-icon-mixin-social-yammer();
}

.ux-icon-mixin-social-youtube() {
	&:before {
		content:"\f258";
	}
	
}
.ux-icon-social-youtube{
 	.ux-icon-mixin-social-youtube();
}

.ux-icon-mixin-social-zoom() {
	&:before {
		content:"\f259";
	}
	
}
.ux-icon-social-zoom{
 	.ux-icon-mixin-social-zoom();
}

.ux-icon-mixin-sort() {
	&:before {
		content:"\f25a";
	}
	
}
.ux-icon-sort{
 	.ux-icon-mixin-sort();
}

.ux-icon-mixin-stakeholder() {
	&:before {
		content:"\f25b";
	}
	
}
.ux-icon-stakeholder{
 	.ux-icon-mixin-stakeholder();
}

.ux-icon-mixin-star-filled() {
	&:before {
		content:"\f25c";
	}
	
}
.ux-icon-star-filled{
 	.ux-icon-mixin-star-filled();
}

.ux-icon-mixin-star-half() {
	&:before {
		content:"\f25d";
	}
	
}
.ux-icon-star-half{
 	.ux-icon-mixin-star-half();
}

.ux-icon-mixin-star() {
	&:before {
		content:"\f25e";
	}
	
}
.ux-icon-star{
 	.ux-icon-mixin-star();
}

.ux-icon-mixin-status-approved-filled() {
	&:before {
		content:"\f25f";
	}
	
}
.ux-icon-status-approved-filled{
 	.ux-icon-mixin-status-approved-filled();
}

.ux-icon-mixin-status-error-filled() {
	&:before {
		content:"\f260";
	}
	
}
.ux-icon-status-error-filled{
 	.ux-icon-mixin-status-error-filled();
}

.ux-icon-mixin-status-information-filled() {
	&:before {
		content:"\f261";
	}
	
}
.ux-icon-status-information-filled{
 	.ux-icon-mixin-status-information-filled();
}

.ux-icon-mixin-status-information() {
	&:before {
		content:"\f262";
	}
	
}
.ux-icon-status-information{
 	.ux-icon-mixin-status-information();
}

.ux-icon-mixin-status-warning-filled() {
	&:before {
		content:"\f263";
	}
	
}
.ux-icon-status-warning-filled{
 	.ux-icon-mixin-status-warning-filled();
}

.ux-icon-mixin-steps-filled() {
	&:before {
		content:"\f264";
	}
	
}
.ux-icon-steps-filled{
 	.ux-icon-mixin-steps-filled();
}

.ux-icon-mixin-steps() {
	&:before {
		content:"\f265";
	}
	
}
.ux-icon-steps{
 	.ux-icon-mixin-steps();
}

.ux-icon-mixin-storage() {
	&:before {
		content:"\f266";
	}
	
}
.ux-icon-storage{
 	.ux-icon-mixin-storage();
}

.ux-icon-mixin-street-view-filled() {
	&:before {
		content:"\f267";
	}
	
}
.ux-icon-street-view-filled{
 	.ux-icon-mixin-street-view-filled();
}

.ux-icon-mixin-street-view() {
	&:before {
		content:"\f268";
	}
	
}
.ux-icon-street-view{
 	.ux-icon-mixin-street-view();
}

.ux-icon-mixin-subtitles() {
	&:before {
		content:"\f269";
	}
	
}
.ux-icon-subtitles{
 	.ux-icon-mixin-subtitles();
}

.ux-icon-mixin-subtract() {
	&:before {
		content:"\f26a";
	}
	
}
.ux-icon-subtract{
 	.ux-icon-mixin-subtract();
}

.ux-icon-mixin-support() {
	&:before {
		content:"\f26b";
	}
	
}
.ux-icon-support{
 	.ux-icon-mixin-support();
}

.ux-icon-mixin-symphony() {
	&:before {
		content:"\f26c";
	}
	
}
.ux-icon-symphony{
 	.ux-icon-mixin-symphony();
}

.ux-icon-mixin-sync() {
	&:before {
		content:"\f26d";
	}
	
}
.ux-icon-sync{
 	.ux-icon-mixin-sync();
}

.ux-icon-mixin-system() {
	&:before {
		content:"\f26e";
	}
	
}
.ux-icon-system{
 	.ux-icon-mixin-system();
}

.ux-icon-mixin-tab-next() {
	&:before {
		content:"\f26f";
	}
	
}
.ux-icon-tab-next{
 	.ux-icon-mixin-tab-next();
}

.ux-icon-mixin-tab-previous() {
	&:before {
		content:"\f270";
	}
	
}
.ux-icon-tab-previous{
 	.ux-icon-mixin-tab-previous();
}

.ux-icon-mixin-tab-up() {
	&:before {
		content:"\f271";
	}
	
}
.ux-icon-tab-up{
 	.ux-icon-mixin-tab-up();
}

.ux-icon-mixin-table-add() {
	&:before {
		content:"\f272";
	}
	
}
.ux-icon-table-add{
 	.ux-icon-mixin-table-add();
}

.ux-icon-mixin-table() {
	&:before {
		content:"\f273";
	}
	
}
.ux-icon-table{
 	.ux-icon-mixin-table();
}

.ux-icon-mixin-tag-filled() {
	&:before {
		content:"\f274";
	}
	
}
.ux-icon-tag-filled{
 	.ux-icon-mixin-tag-filled();
}

.ux-icon-mixin-tag() {
	&:before {
		content:"\f275";
	}
	
}
.ux-icon-tag{
 	.ux-icon-mixin-tag();
}

.ux-icon-mixin-target() {
	&:before {
		content:"\f276";
	}
	
}
.ux-icon-target{
 	.ux-icon-mixin-target();
}

.ux-icon-mixin-task() {
	&:before {
		content:"\f277";
	}
	
}
.ux-icon-task{
 	.ux-icon-mixin-task();
}

.ux-icon-mixin-template() {
	&:before {
		content:"\f278";
	}
	
}
.ux-icon-template{
 	.ux-icon-mixin-template();
}

.ux-icon-mixin-test-desktop() {
	&:before {
		content:"\f279";
	}
	
}
.ux-icon-test-desktop{
 	.ux-icon-mixin-test-desktop();
}

.ux-icon-mixin-test() {
	&:before {
		content:"\f27a";
	}
	
}
.ux-icon-test{
 	.ux-icon-mixin-test();
}

.ux-icon-mixin-text-wrap() {
	&:before {
		content:"\f27b";
	}
	
}
.ux-icon-text-wrap{
 	.ux-icon-mixin-text-wrap();
}

.ux-icon-mixin-threats() {
	&:before {
		content:"\f27c";
	}
	
}
.ux-icon-threats{
 	.ux-icon-mixin-threats();
}

.ux-icon-mixin-ticket() {
	&:before {
		content:"\f27d";
	}
	
}
.ux-icon-ticket{
 	.ux-icon-mixin-ticket();
}

.ux-icon-mixin-tools() {
	&:before {
		content:"\f27e";
	}
	
}
.ux-icon-tools{
 	.ux-icon-mixin-tools();
}

.ux-icon-mixin-tooltip() {
	&:before {
		content:"\f27f";
	}
	
}
.ux-icon-tooltip{
 	.ux-icon-mixin-tooltip();
}

.ux-icon-mixin-transaction-filled() {
	&:before {
		content:"\f280";
	}
	
}
.ux-icon-transaction-filled{
 	.ux-icon-mixin-transaction-filled();
}

.ux-icon-mixin-transaction() {
	&:before {
		content:"\f281";
	}
	
}
.ux-icon-transaction{
 	.ux-icon-mixin-transaction();
}

.ux-icon-mixin-translate() {
	&:before {
		content:"\f282";
	}
	
}
.ux-icon-translate{
 	.ux-icon-mixin-translate();
}

.ux-icon-mixin-trash-filled() {
	&:before {
		content:"\f283";
	}
	
}
.ux-icon-trash-filled{
 	.ux-icon-mixin-trash-filled();
}

.ux-icon-mixin-trash() {
	&:before {
		content:"\f284";
	}
	
}
.ux-icon-trash{
 	.ux-icon-mixin-trash();
}

.ux-icon-mixin-tree() {
	&:before {
		content:"\f285";
	}
	
}
.ux-icon-tree{
 	.ux-icon-mixin-tree();
}

.ux-icon-mixin-trigger() {
	&:before {
		content:"\f286";
	}
	
}
.ux-icon-trigger{
 	.ux-icon-mixin-trigger();
}

.ux-icon-mixin-trophy-filled() {
	&:before {
		content:"\f287";
	}
	
}
.ux-icon-trophy-filled{
 	.ux-icon-mixin-trophy-filled();
}

.ux-icon-mixin-trophy() {
	&:before {
		content:"\f288";
	}
	
}
.ux-icon-trophy{
 	.ux-icon-mixin-trophy();
}

.ux-icon-mixin-troubleshooting() {
	&:before {
		content:"\f289";
	}
	
}
.ux-icon-troubleshooting{
 	.ux-icon-mixin-troubleshooting();
}

.ux-icon-mixin-undo() {
	&:before {
		content:"\f28a";
	}
	
}
.ux-icon-undo{
 	.ux-icon-mixin-undo();
}

.ux-icon-mixin-unlock() {
	&:before {
		content:"\f28b";
	}
	
}
.ux-icon-unlock{
 	.ux-icon-mixin-unlock();
}

.ux-icon-mixin-up() {
	&:before {
		content:"\f28c";
	}
	
}
.ux-icon-up{
 	.ux-icon-mixin-up();
}

.ux-icon-mixin-update() {
	&:before {
		content:"\f28d";
	}
	
}
.ux-icon-update{
 	.ux-icon-mixin-update();
}

.ux-icon-mixin-upgrade-filled() {
	&:before {
		content:"\f28e";
	}
	
}
.ux-icon-upgrade-filled{
 	.ux-icon-mixin-upgrade-filled();
}

.ux-icon-mixin-upgrade() {
	&:before {
		content:"\f28f";
	}
	
}
.ux-icon-upgrade{
 	.ux-icon-mixin-upgrade();
}

.ux-icon-mixin-upload() {
	&:before {
		content:"\f290";
	}
	
}
.ux-icon-upload{
 	.ux-icon-mixin-upload();
}

.ux-icon-mixin-user-add-filled() {
	&:before {
		content:"\f291";
	}
	
}
.ux-icon-user-add-filled{
 	.ux-icon-mixin-user-add-filled();
}

.ux-icon-mixin-user-add() {
	&:before {
		content:"\f292";
	}
	
}
.ux-icon-user-add{
 	.ux-icon-mixin-user-add();
}

.ux-icon-mixin-user-admin() {
	&:before {
		content:"\f293";
	}
	
}
.ux-icon-user-admin{
 	.ux-icon-mixin-user-admin();
}

.ux-icon-mixin-user-expert() {
	&:before {
		content:"\f294";
	}
	
}
.ux-icon-user-expert{
 	.ux-icon-mixin-user-expert();
}

.ux-icon-mixin-user-female-filled() {
	&:before {
		content:"\f295";
	}
	
}
.ux-icon-user-female-filled{
 	.ux-icon-mixin-user-female-filled();
}

.ux-icon-mixin-user-female() {
	&:before {
		content:"\f296";
	}
	
}
.ux-icon-user-female{
 	.ux-icon-mixin-user-female();
}

.ux-icon-mixin-user-filled() {
	&:before {
		content:"\f297";
	}
	
}
.ux-icon-user-filled{
 	.ux-icon-mixin-user-filled();
}

.ux-icon-mixin-user-manager() {
	&:before {
		content:"\f298";
	}
	
}
.ux-icon-user-manager{
 	.ux-icon-mixin-user-manager();
}

.ux-icon-mixin-user-new() {
	&:before {
		content:"\f299";
	}
	
}
.ux-icon-user-new{
 	.ux-icon-mixin-user-new();
}

.ux-icon-mixin-user-police() {
	&:before {
		content:"\f29a";
	}
	
}
.ux-icon-user-police{
 	.ux-icon-mixin-user-police();
}

.ux-icon-mixin-user-settings() {
	&:before {
		content:"\f29b";
	}
	
}
.ux-icon-user-settings{
 	.ux-icon-mixin-user-settings();
}

.ux-icon-mixin-user-worker() {
	&:before {
		content:"\f29c";
	}
	
}
.ux-icon-user-worker{
 	.ux-icon-mixin-user-worker();
}

.ux-icon-mixin-user() {
	&:before {
		content:"\f29d";
	}
	
}
.ux-icon-user{
 	.ux-icon-mixin-user();
}

.ux-icon-mixin-validation-filled() {
	&:before {
		content:"\f29e";
	}
	
}
.ux-icon-validation-filled{
 	.ux-icon-mixin-validation-filled();
}

.ux-icon-mixin-validation() {
	&:before {
		content:"\f29f";
	}
	
}
.ux-icon-validation{
 	.ux-icon-mixin-validation();
}

.ux-icon-mixin-video-filled() {
	&:before {
		content:"\f2a0";
	}
	
}
.ux-icon-video-filled{
 	.ux-icon-mixin-video-filled();
}

.ux-icon-mixin-video() {
	&:before {
		content:"\f2a1";
	}
	
}
.ux-icon-video{
 	.ux-icon-mixin-video();
}

.ux-icon-mixin-view-filled() {
	&:before {
		content:"\f2a2";
	}
	
}
.ux-icon-view-filled{
 	.ux-icon-mixin-view-filled();
}

.ux-icon-mixin-view() {
	&:before {
		content:"\f2a3";
	}
	
}
.ux-icon-view{
 	.ux-icon-mixin-view();
}

.ux-icon-mixin-virtual-machine() {
	&:before {
		content:"\f2a4";
	}
	
}
.ux-icon-virtual-machine{
 	.ux-icon-mixin-virtual-machine();
}

.ux-icon-mixin-vm-maintenance() {
	&:before {
		content:"\f2a5";
	}
	
}
.ux-icon-vm-maintenance{
 	.ux-icon-mixin-vm-maintenance();
}

.ux-icon-mixin-voltage() {
	&:before {
		content:"\f2a6";
	}
	
}
.ux-icon-voltage{
 	.ux-icon-mixin-voltage();
}

.ux-icon-mixin-volume-filled() {
	&:before {
		content:"\f2a7";
	}
	
}
.ux-icon-volume-filled{
 	.ux-icon-mixin-volume-filled();
}

.ux-icon-mixin-volume-low-filled() {
	&:before {
		content:"\f2a8";
	}
	
}
.ux-icon-volume-low-filled{
 	.ux-icon-mixin-volume-low-filled();
}

.ux-icon-mixin-volume-low() {
	&:before {
		content:"\f2a9";
	}
	
}
.ux-icon-volume-low{
 	.ux-icon-mixin-volume-low();
}

.ux-icon-mixin-volume-mute-filled() {
	&:before {
		content:"\f2aa";
	}
	
}
.ux-icon-volume-mute-filled{
 	.ux-icon-mixin-volume-mute-filled();
}

.ux-icon-mixin-volume-mute() {
	&:before {
		content:"\f2ab";
	}
	
}
.ux-icon-volume-mute{
 	.ux-icon-mixin-volume-mute();
}

.ux-icon-mixin-volume() {
	&:before {
		content:"\f2ac";
	}
	
}
.ux-icon-volume{
 	.ux-icon-mixin-volume();
}

.ux-icon-mixin-vulnerability() {
	&:before {
		content:"\f2ad";
	}
	
}
.ux-icon-vulnerability{
 	.ux-icon-mixin-vulnerability();
}

.ux-icon-mixin-waypoint-filled() {
	&:before {
		content:"\f2ae";
	}
	
}
.ux-icon-waypoint-filled{
 	.ux-icon-mixin-waypoint-filled();
}

.ux-icon-mixin-waypoint() {
	&:before {
		content:"\f2af";
	}
	
}
.ux-icon-waypoint{
 	.ux-icon-mixin-waypoint();
}

.ux-icon-mixin-workshop() {
	&:before {
		content:"\f2b0";
	}
	
}
.ux-icon-workshop{
 	.ux-icon-mixin-workshop();
}

.ux-icon-mixin-zoom-in() {
	&:before {
		content:"\f2b1";
	}
	
}
.ux-icon-zoom-in{
 	.ux-icon-mixin-zoom-in();
}

.ux-icon-mixin-zoom-out() {
	&:before {
		content:"\f2b2";
	}
	
}
.ux-icon-zoom-out{
 	.ux-icon-mixin-zoom-out();
}

.ux-icon {
    vertical-align: baseline;
}

.ux-rotate-90 {
    .rotate(90deg);
}

.ux-rotate-180 {
    .rotate(180deg);
}

.ux-rotate-270 {
    .rotate(270deg);
}

.ux-flip-vertical {
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}

.ux-flip-horizontal {
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

.ux-fw {
    width: 1.28571429em;
    text-align: center;
}

.ux-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
}

.ux-2x {
    font-size: 2em;
}

.ux-3x {
    font-size: 3em;
}

.ux-4x {
    font-size: 4em;
}

.ux-5x {
    font-size: 5em;
}

//=================
//helper classes
//=================
.clickable {
    cursor: pointer;
}

//=================
//font classes
//=================
.font-bold {
    font-weight: 600;
}

.font-size-small {
    font-size: @font-size-sm;
}

//================
//text alignment
//================
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

//================
//background-color
//================
.navigation-white-bg {
    background-color: @white !important;
}

.listview-document-th {
    width: 35px;
}

.listview-document-bg {
    color: darken(@grey4, 10%);
    background-color: @listview-document-bg;
}

//=================
//margin classes
//=================
// --- 4 sides
//nill - 0 - no margin
.m-nil {
    .m-t-nil;
    .m-r-nil;
    .m-b-nil;
    .m-l-nil;
}

//EXTRA extra small
.m-xxs {
    .m-t-xxs;
    .m-r-xxs;
    .m-b-xxs;
    .m-l-xxs;
}

// extra small
.m-xs {
    .m-t-xs;
    .m-r-xs;
    .m-b-xs;
    .m-l-xs;
}

//small margin
.m-sm {
    .m-t-sm;
    .m-r-sm;
    .m-b-sm;
    .m-l-sm;
}

//normal margin
.m {
    .m-t;
    .m-r;
    .m-b;
    .m-l;
}

//medium margin
.m-md {
    .m-t-md;
    .m-r-md;
    .m-b-md;
    .m-l-md;
}

//large margin
.m-lg {
    .m-t-lg;
    .m-r-lg;
    .m-b-lg;
    .m-l-lg;
}

//extra large margin
.m-xl {
    .m-t-xl;
    .m-r-xl;
    .m-b-xl;
    .m-l-xl;
}

// --- individual sides
//nill - 0 - no margin
.m-t-nil {
    margin-top: @spacing-nil;
}

.m-r-nil {
    margin-right: @spacing-nil;
}

.m-b-nil {
    margin-bottom: @spacing-nil;
}

.m-l-nil {
    margin-left: @spacing-nil;
}

//EXTRA extra small
.m-t-xxs {
    margin-top: @spacing-xxsTopBottom;
}

.m-r-xxs {
    margin-right: @spacing-xxsRightLeft;
}

.m-b-xxs {
    margin-bottom: @spacing-xxsTopBottom;
}

.m-l-xxs {
    margin-left: @spacing-xxsRightLeft;
}

//extra small
.m-t-xs {
    margin-top: @spacing-xs;
}

.m-r-xs {
    margin-right: @spacing-xs;
}

.m-b-xs {
    margin-bottom: @spacing-xs;
}

.m-l-xs {
    margin-left: @spacing-xs;
}

//small margin
.m-t-sm {
    margin-top: @spacing-sm;
}

.m-r-sm {
    margin-right: @spacing-sm !important;
}

.m-b-sm {
    margin-bottom: @spacing-sm;
}

.m-l-sm {
    margin-left: @spacing-sm;
}

//normal margin
.m-t {
    margin-top: @spacing;
}

.m-r {
    margin-right: @spacing;
}

.m-b {
    margin-bottom: @spacing;
}

.m-l {
    margin-left: @spacing;
}

//medium margin
.m-t-md {
    margin-top: @spacing-md;
}

.m-r-md {
    margin-right: @spacing-md;
}

.m-b-md {
    margin-bottom: @spacing-md;
}

.m-l-md {
    margin-left: @spacing-md;
}

//large margin
.m-t-lg {
    margin-top: @spacing-lg;
}

.m-r-lg {
    margin-right: @spacing-lg;
}

.m-b-lg {
    margin-bottom: @spacing-lg;
}

.m-l-lg {
    margin-left: @spacing-lg;
}

//extra large margin
.m-t-xl {
    margin-top: @spacing-xl;
}

.m-r-xl {
    margin-right: @spacing-xl;
}

.m-b-xl {
    margin-bottom: @spacing-xl;
}

.m-l-xl {
    margin-left: @spacing-xl;
}

//=================
//padding classes
//=================
// --- 4 sides
//nill - 0 - no padding
.p-nil {
    .p-t-nil;
    .p-r-nil;
    .p-b-nil;
    .p-l-nil;
}

//EXTRA extra small
.p-xxs {
    .p-t-xxs;
    .p-r-xxs;
    .p-b-xxs;
    .p-l-xxs;
}

// extra small
.p-xs {
    .p-t-xs;
    .p-r-xs;
    .p-b-xs;
    .p-l-xs;
}

//small padding
.p-sm {
    .p-t-sm;
    .p-r-sm;
    .p-b-sm;
    .p-l-sm;
}

//normal padding
.p {
    .p-t;
    .p-r;
    .p-b;
    .p-l;
}

//medium padding
.p-md {
    .p-t-md;
    .p-r-md;
    .p-b-md;
    .p-l-md;
}

//large padding
.p-lg {
    .p-t-lg;
    .p-r-lg;
    .p-b-lg;
    .p-l-lg;
}

//extra large padding
.p-xl {
    .p-t-xl;
    .p-r-xl;
    .p-b-xl;
    .p-l-xl;
}

// --- individual sides
//nill - 0 - no padding
.p-t-nil {
    padding-top: @spacing-nil;
}

.p-r-nil {
    padding-right: @spacing-nil;
}

.p-b-nil {
    padding-bottom: @spacing-nil;
}

.p-l-nil {
    padding-left: @spacing-nil;
}

//EXTRA extra small
.p-t-xxs {
    padding-top: @spacing-xxsTopBottom;
}

.p-r-xxs {
    padding-right: @spacing-xxsRightLeft;
}

.p-b-xxs {
    padding-bottom: @spacing-xxsTopBottom;
}

.p-l-xxs {
    padding-left: @spacing-xxsRightLeft;
}

.p-t-xs {
    padding-top: @spacing-xs;
}

.p-r-xs {
    padding-right: @spacing-xs;
}

.p-b-xs {
    padding-bottom: @spacing-xs;
}

.p-l-xs {
    padding-left: @spacing-xs;
}

//small padding
.p-t-sm {
    padding-top: @spacing-sm;
}

.p-r-sm {
    padding-right: @spacing-sm;
}

.p-b-sm {
    padding-bottom: @spacing-sm;
}

.p-l-sm {
    padding-left: @spacing-sm;
}

//normal padding
.p-t {
    padding-top: @spacing;
}

.p-r {
    padding-right: @spacing;
}

.p-b {
    padding-bottom: @spacing;
}

.p-l {
    padding-left: @spacing;
}

//medium padding
.p-t-md {
    padding-top: @spacing-md;
}

.p-r-md {
    padding-right: @spacing-md;
}

.p-b-md {
    padding-bottom: @spacing-md;
}

.p-l-md {
    padding-left: @spacing-md;
}

//large padding
.p-t-lg {
    padding-top: @spacing-lg;
}

.p-r-lg {
    padding-right: @spacing-lg;
}

.p-b-lg {
    padding-bottom: @spacing-lg;
}

.p-l-lg {
    padding-left: @spacing-lg;
}

//extra large padding
.p-t-xl {
    padding-top: @spacing-xl;
}

.p-r-xl {
    padding-right: @spacing-xl;
}

.p-b-xl {
    padding-bottom: @spacing-xl;
}

.p-l-xl {
    padding-left: @spacing-xl;
}

//===============
//Angular
//==============
[hidden],
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
    display: none !important;
}

ng\:form {
    display: block;
}

// Support Angular CDK Live Announcer
.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

// Support focus when cdk-keyboard-focus class is present
.ux-keyboard-focus {
    &:focus {
        &:not(.cdk-keyboard-focused) {
            outline: none;
        }

        &.cdk-keyboard-focused {
            .focus-outline();
        }
    }
}

// Support controlled focus using the uxFocus directive
.ux-focus-indicator {
    &:focus {
        &:not(.ux-focus-indicator-active) {
            outline: none;
        }

        &.ux-focus-indicator-active {
            .focus-outline();
        }
    }
}
.nav > li > a {
    font-weight: 600;
    padding: 14px 20px 14px 25px;

    &:focus {
        outline: 0;
    }
}

.navbar-default {
    .nav > li > a {
        font-weight: 300;
        font-size: 0.9375rem;

        span.arrow {
            font-size: 0.625rem;
            line-height: inherit;
            position: relative;
            top: 4px;
            right: 3px;
        }
    }

    .nav-fourth-level > li > a {
        font-size: 0.875rem;
        line-height: 1.2;
    }

    .nav-fifth-level > li > a {
        font-size: 0.8125rem;
        line-height: 0.9;
    }
}

.navbar-default {
    .nav ul > li > a {
        span {
            &.arrow {
                font-size: 0.625rem;
                position: relative;
                line-height: inherit;
                right: 10px;
            }
        }
    }
}

.nav > li > a {
    i {
        margin-right: 6px;
        font-size: 1rem;
    }
}

.heading {
    font-size: 2.5rem;
    margin-top: -8px;
    margin-bottom: 3px;
    word-wrap: break-word;
}

.nav.nav-second-level > li {
    &.active {
        border: none;
    }
}

.nav {
    &.nav-second-level {
        &.collapse[style] {
            height: auto !important;
        }
    }

    &.nav-third-level {
        &.collapse[style] {
            height: auto !important;
        }
    }

    &.nav-fourth-level {
        &.collapse[style] {
            height: auto !important;
        }
    }

    &.nav-fifth-level {
        &.collapse[style] {
            height: auto !important;
        }
    }
}

.nav-second-level,
.nav-third-level,
.nav-fourth-level,
.nav-fifth-level {
    li {
        border-bottom: none !important;
        border-left: 0 !important;
    }
}

.nav-second-level {
    li {
        a {
            padding: 5px 10px;
            padding-left: 52px;
        }
    }
}

.nav-third-level {
    li {
        a {
            padding-left: 62px;
        }
    }
}

.nav-fourth-level {
    li {
        a {
            padding-left: 72px;
        }
    }
}

.nav-fifth-level {
    li {
        a {
            padding-left: 82px;
        }
    }
}

//============================
//panels and tabs
//============================
.panel-heading {
    padding: 10px;
}

.panel-body {
    padding: 15px 10px;
}

h4 {
    &.panel-title {
        font-family: @font-family;
    }
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: @tabs-color;
    background-color: @tabs-bg;
    cursor: default;
}

.nav {
    &.nav-tabs {
        li {
            background: none;
        }
    }
}

.nav-tabs > li > a {
    color: lighten(@tabs-color, 15%);
    border-width: 0 0 3px;
    font-family: @font-family;
    font-weight: @font-weight-semibold;
    padding: 8px 20px 0;
    cursor: pointer;
    height: 40px;

    &:hover,
    &:focus {
        background-color: @tabs-hover-bg;
        color: @tabs-hover-color;
        border-color: transparent;
        border-radius: 0;
    }

    i + span,
    ux-icon + span {
        padding-left: 8px;
    }
}

.outline-tab {
    .nav-tabs > li > a {
        border-width: 1px 1px 2px;
        border-radius: 4px 4px 0 0;

        &:hover,
        &:focus {
            border-bottom-width: 2px;
            border-bottom-color: @tabs-bg;
            border-radius: 4px 4px 0 0;
        }
    }
}

// minimal-tab style for tab with minimal effects
.minimal-tab {
    border-style: none;

    > li {
        padding: 0 10px;

        &.active {
            > a {
                &,
                &:hover,
                &:focus {
                    border-bottom: 3px solid @tabs-active-border;
                    border-left: none;
                    background-color: @tabs-active-bg;
                    border-right: none;
                    border-top: none;
                    cursor: default;
                    color: @tabs-active-color;
                }
            }
        }

        > a {
            padding: 8px 0 0;
        }
    }
}

//left and right stacked tabs
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs,
.tabs-left > .outline-tab > .nav-tabs,
.tabs-right > .outline-tab > .nav-tabs {
    width: 20%;
    border-bottom: 0;

    & > li {
        border-width: 0 0 3px;

        &.active > a {
            &:hover,
            &:focus {
                border-width: 0 0 3px;
                background-color: @tabs-active-bg;
                border-bottom: 3px solid @tabs-active-border;
                color: @tabs-active-color;
                border-left: none;
                border-right: none;
                border-top: none;
                cursor: default;
            }
        }

        float: none;
        text-align: left;
        clear: both;

        & > a {
            min-width: 50px;
            border-width: 0 0 3px;
            display: table;
            margin-right: 0;
            margin-bottom: 30px;
            padding: 10px 0 3px;
            line-height: normal;
            height: 30px;

            .tab-title {
                line-height: normal;
            }

            &:hover,
            &:focus {
                background-color: @tabs-hover-bg;
                border-color: transparent;
            }

            &.text-right {
                float: right;
            }

            &.text-left {
                float: left;
            }
        }
    }
}

.tab-content {
    & > .tab-pane {
        display: none;
    }

    & > .active {
        display: block;
    }
}

.tabs-left > .nav-tabs,
.tabs-left > .outline-tab > .nav-tabs {
    float: left;
    margin-right: 19px;
    border-bottom: none;
}

.tabs-right > .nav-tabs,
.tabs-right > .outline-tab > .nav-tabs {
    float: right;
    margin-left: 19px;
    border-bottom: none;
}

.dropdown-menu {
    border: medium none;
    box-shadow: 0 0 3px @dropdown-shadow;
    color: @dropdown-color;
    background-color: @dropdown-bg;
    display: none;
    float: left;
    font-size: @font-size-sm;
    left: 0;
    list-style: none outside none;
    padding: 0;
    position: absolute;
    text-shadow: none;
    top: 100%;
    z-index: @dropdown-menu-z-index;
    border-radius: 2px;

    li > a {
        color: inherit;
        line-height: 25px;
        padding: 6px 20px;
        text-align: left;
        font-weight: normal;
        font-size: @font-size;
        display: block;

        &:hover {
            text-decoration: none;
            background-color: @dropdown-hover-bg;
            color: @dropdown-hover-color;
        }

        &:focus {
            .native-focus-outline();
        }

        &.font-bold {
            .font-semibold;
        }
    }

    .divider {
        margin: 5px 0;
    }
}

.form-control {
    background-color: @form-control-bg;
    background-image: none;
    border: 1px solid @form-control-border;
    border-radius: @form-control-border-radius;
    display: block;
    font-size: @font-size-lg;
    padding: 4px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    color: @form-control-color;
    box-shadow: none;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    cursor: default;
    color: @form-control-disabled-color;
}

.form-control::-moz-placeholder {
    color: @form-control-placeholder-color;
}

.form-control::-webkit-input-placeholder {
    color: @form-control-placeholder-color;
}

:-ms-input-placeholder.form-control {
    color: @form-control-placeholder-color;
}

input::-ms-clear,
input::-ms-reveal {
    display: none;
}

.input-lg {
    font-size: @font-size-lg;
}

.input-sm {
    font-size: @font-size-sm;
}

textarea {
    resize: none;
}

label {
    font-weight: normal;
    margin-bottom: 0;
}

.form-label {
    .opacity(0.7);
}

.form-information {
    .opacity(0.7);

    float: right;
}

.form-control {
    &:focus {
        border-color: @form-control-focus-border;
        outline: 0;
        box-shadow: none;
    }
}

.form-control-feedback {
    display: none;

    &.ux-icon,
    & ux-icon {
        line-height: 34px;
    }
}

.form-control-validation {
    color: @form-control-validation;
}

.has-error {
    .form-control-validation {
        color: @form-control-invalid-color;
    }
}

.has-error ~ .form-group-validation {
    .form-control-validation {
        color: @form-control-invalid-color;
    }
}

.has-feedback {
    position: relative;

    .form-control-feedback {
        display: block;
    }
}

.has-success,
.has-secondary,
.has-error {
    .form-control:focus {
        box-shadow: none;
    }
}

.has-success {
    .form-control {
        border-color: @form-control-success-color;
    }
}

.has-secondary {
    .form-control {
        border-color: @form-control-focus-border; // not documented / supported
    }
}

.has-error {
    .form-control {
        border-color: @form-control-invalid-border;

        &:focus {
            border-color: @form-control-invalid-border;
        }
    }

    .input-group-addon {
        background-color: @form-control-bg;
        border-color: @form-control-border;
        color: @text-color;
    }
}

.has-success {
    .control-label {
        color: @form-control-success-color;
    }
}

.has-secondary {
    .control-label {
        color: @accent; // not documented / supported
    }
}

.has-error {
    .control-label,
    .help-block,
    .error-text,
    .form-control-feedback {
        color: @form-control-invalid-color;
    }
}

.control-label, .form-label {
    margin-bottom: 5px;
}

.help-block {
    color: #737373;
}

.input-group-addon {
    background-color: @form-control-bg;
    border: 1px solid @form-control-border;
    border-radius: 1px;
    color: inherit;
    font-size: @font-size;
    font-weight: 400;
    line-height: 1;
    padding: 5px 12px;
    text-align: center;
}

.inner-addon {
    position: relative;
}

/* style icon */

.inner-addon {
    .ux-icon,
    ux-icon {
        position: absolute;
        padding: 10px;
        pointer-events: none;
    }
}

.inner-addon-button {
    position: relative;

    .ux-icon,
    ux-icon {
        position: absolute;
        top: 0;
        bottom: 0;
        height: 16px;
        margin: auto 10px;
        cursor: pointer;
        z-index: @inner-addon-button-z-index;
    }
}

/* align icon */

.left-addon {
    .ux-icon,
    ux-icon {
        left: 0;
    }
}

.right-addon {
    .ux-icon,
    ux-icon {
        right: 0;
    }
}

/* add padding  */

.left-addon input {
    padding-left: 30px;
}

.right-addon input {
    padding-right: 30px;
}

.input-group-btn {
    button {
        height: 34px;

        &.button-secondary {
            border-color: @form-control-border;
        }
    }

    &:first-child > .btn,
    &:first-child > .btn-group {
        margin-right: -2px;
    }
}

// Float label (Angular)
.ux-float-label {
    position: relative;
    margin-left: 12px;
    margin-bottom: 0;
    font-size: @font-size-sm;
    color: lighten(@text-color, 30%);
    z-index: @float-label-z-index;

    &:not(.ux-float-label-raised) {
        opacity: 0;
        transform: translateY(16px);
    }

    &.ux-float-label-raised {
        opacity: 1;
        transition: 0.5s ease-in-out;
    }
}

.ux-float-label ~ input,
.ux-float-input {
    border: none;
    border-bottom: 1px solid @float-label-border;
}

.table > thead > tr > th {
    border-bottom-width: 1px;
    .font-semibold;
}

.table > tbody > tr > td {
    border-top-color: @table-border;
}

.table > tbody > tr > th {
    border-top: 0;
}

.table > tbody > tr > td {
    &.vertical-center-icon {
        vertical-align: middle;
    }
}

.table {
    &.ux-resizable-expanding-table {
        td,
        th {
            border: none;
        }
    }
}

// ngx-bootstrap - pagination
.pagination {
    & > li.page-item {
        & > button {
            .btn;
            .button-secondary;

            min-width: 45px;
            padding: 6px 12px;
            border-radius: 0;
            font-size: 0.875rem;
            border: 1px solid #ccc;

            &:hover {
                .button-secondary-hover;
            }
        }

        &.active > button {
            .button-primary-active;

            &:hover {
                .button-primary-hover;
            }

            &:focus {
                .button-primary-active;
            }
        }

        &.disabled {
            & > button {
                .button-secondary-disabled;
            }
        }
    }
}

//pagination
.pagination-details {
    margin: 20px 0;
    padding: 6px 12px;
    vertical-align: top;
    display: inline-block;
}

.pagination > .disabled > span,
.pagination > .disabled > button {
    .button-secondary-disabled;

    &:hover,
    &:focus {
        .button-secondary-disabled;
    }
}

.pagination > li {
    & > button {
        .button-secondary;

        position: relative;
        float: left;
        margin-left: -1px;

        &:hover {
            .button-secondary-hover;
        }
    }

    &.active > button {
        .button-primary-active;

        z-index: 3;
        cursor: default;

        &:hover {
            .button-primary-hover;
        }

        &:focus {
            .button-primary-active;
        }
    }

    &:first-child > button {
        margin-left: 0;
    }
}

.table > tbody > tr {
    .hover-action-btn {
        border: none;
        background-color: transparent;
        padding: 0;

        &:focus {
            .native-focus-outline();
        }
    }
}

.table-hover > tbody > tr {
    &:hover {
        background: @table-hover-bg;
    }
}

.table > tbody > tr {
    &.highlight {
        background-color: @table-hover-bg;
    }
}

// Shift/ctrl select item
.table {
    tr.ux-selection-selected {
        background-color: @shift-select-selected-light;

        & > td.item-actions .list-hover-actions {
            box-shadow: none;
        }

        &:hover {
            background-color: @shift-select-selected-hover-light;

            & > td.item-actions .list-hover-actions {
                box-shadow: none;
            }
        }
    }
}

.table-responsive {
    border: none;
}

.table-header-dark {
    th {
        color: @grey2;
        text-transform: uppercase;
        font-size: 0.875rem;
    }
}

.listview-page-icon {
    background: url('../img/page.png') no-repeat;
    width: 20px;
    height: 23px;
    background-size: contain;
}

.listview-text-emphasis {
    color: @grey2;
}

//sortDirectionToggle
.sort-direction-toggle {
    p {
        float: left;
        padding: 6px;
        margin-bottom: 0;
    }

    .sort-icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 34px;
        margin-right: 1px;
        float: right;
        padding: 6px;
        cursor: pointer;
        border: none;
        background-color: transparent;

        &:hover,
        &:focus {
            background-color: @table-sort-hover-bg;
        }

        &:focus {
            .native-focus-outline();
        }
    }
}

/*
 * Fixed Header Table Styling
 */

.ux-fixed-header-table {
    display: flex;
    flex-direction: column;

    &.ux-resizable-expanding-table {
        thead,
        tbody {
            tr {
                display: flex;
                border-bottom: 1px solid #ddd;
            }
        }
    }

    &.ux-resizable-expanding-table-overflow {
        thead,
        tbody {
            tr {
                border-bottom: 1px solid #ddd;
            }
        }
    }

    thead,
    tbody {
        display: block;

        tr {
            display: flex;

            th,
            td {
                display: block;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    tbody {
        overflow-y: scroll;
        min-height: 1px;
        margin-top: -1px;
    }
}

/*
 * Reorderable Table
 */
.reorderable-row {
    &:focus {
        .native-focus-outline();
    }
}

.label {
    background-color: @label-bg;
    color: @label-color;
    font-size: @label-size;
    font-weight: @label-weight;
    padding: 3px 8px;
    text-shadow: none;
    border-radius: 1.25em;
    text-transform: uppercase;

    &.flat-edge-right {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        text-transform: none;
    }

    &.flat-edge-left {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        text-transform: none;
    }
}

.label-primary {
    background-color: @label-primary;
    color: @label-color;
}

.label-outline-primary {
    background-color: @label-color;
    color: @label-primary;
    border: 1px solid @label-primary;
}

.label-accent {
    background-color: @label-accent;
    color: @label-color;
}

.label-outline-accent {
    background-color: @label-color;
    color: @label-accent;
    border: 1px solid @label-accent;
}

.label-alternate1 {
    background-color: @label-alternate1;
    color: @label-color;
}

.label-outline-alternate1 {
    background-color: @label-color;
    color: @label-alternate1;
    border: 1px solid @label-alternate1;
}

.label-alternate2 {
    background-color: @label-alternate2;
    color: @label-color;
}

.label-outline-alternate2 {
    background-color: @label-color;
    color: @label-alternate2;
    border: 1px solid @label-alternate2;
}

.label-alternate3 {
    background-color: @label-alternate3;
    color: @label-color;
}

.label-outline-alternate3 {
    background-color: @label-color;
    color: @label-alternate3;
    border: 1px solid @label-alternate3;
}

.label-vibrant1 {
    background-color: @label-vibrant1;
    color: @label-color;
}

.label-outline-vibrant1 {
    background-color: @label-color;
    color: @label-vibrant1;
    border: 1px solid @label-vibrant1;
}

.label-vibrant2 {
    background-color: @label-vibrant2;
    color: @label-color;
}

.label-outline-vibrant2 {
    background-color: @label-color;
    color: @label-vibrant2;
    border: 1px solid @label-vibrant2;
}

.label-alert {
    .label-accent;
}

.label-critical {
    background-color: @critical;
    color: @label-color;
}

.label-outline-critical {
    background-color: @label-color;
    color: @critical;
    border: 1px solid @critical;
}

.label-ok {
    background-color: @ok;
    color: @label-color;
}

.label-outline-ok {
    background-color: @label-color;
    color: @ok;
    border: 1px solid @ok;
}

.label-warning {
    background-color: @warning;
    color: @label-color;
}

.label-outline-warning {
    background-color: @label-color;
    color: @warning;
    border: 1px solid @warning;
}

.label-error {
    .label-critical;
}

.label-default {
    .label-accent;
}

.label-grey1 {
    background-color: @grey1;
    color: @label-color;
}

.label-outline-grey1 {
    background-color: @label-color;
    color: @grey1;
    border: 1px solid @grey1;
}

.label-grey2 {
    background-color: @grey2;
    color: @label-color;
}

.label-outline-grey2 {
    background-color: @label-color;
    color: @grey2;
    border: 1px solid @grey2;
}

.label-grey3 {
    background-color: @grey3;
    color: @label-color;
}

.label-outline-grey3 {
    background-color: @label-color;
    color: @grey3;
    border: 1px solid @grey3;
}

.label-grey4 {
    background-color: @grey4;
    color: @label-color;
}

.label-outline-grey4 {
    background-color: @label-color;
    color: @grey4;
    border: 1px solid @grey4;
}

.label-grey5 {
    background-color: @grey5;
    color: @label-color;
}

.label-outline-grey5 {
    background-color: @label-color;
    color: @grey5;
    border: 1px solid @grey5;
}
.panel-title {
    font-size: inherit;
}

.accordion-chevron {
    .panel-heading {
        .ux-icon-previous();

        &:before {
            font-family: 'ux-icons';
            float: right;
            pointer-events: none;
        }
    }

    &.panel-open {
        .panel-heading {
            .ux-icon-down();
        }
    }
}

.panel-heading {
    &:focus,
    a:focus {
        .native-focus-outline;
    }
}

.ebox {
    clear: both;
    margin-bottom: 25px;
    margin-top: 0;
    padding: 0;
}

.ebox {
    &:before,
    &:after {
        display: table;
    }
}

.ebox-title {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: @ebox-title-bg;
    color: inherit;
    margin-bottom: 0;
    overflow: hidden;
    padding: 14px 15px 7px;
    position: relative;

    &.p-l-nil {
        padding-left: 0;
    }
}

.ebox-draghandle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15px;

    &:hover {
        background-color: darken(@ebox-title-bg, 5%);
    }

    &:before,
    &:after {
        content: "";
        left: 5px;
        width: 3px;
        height: 8px;
        border-top: 3px solid;
        border-bottom: 3px solid;
        border-color: darken(@ebox-title-bg, 20%);
        position: absolute;
    }

    &:before {
        top: 18px;
    }

    &:after {
        top: 28px;
    }
}

.ebox-content {
    background-color: @ebox-content-bg;
    color: inherit;
    padding: 15px 20px 20px;
    border-color: @ebox-border;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;

    &.p-l-nil {
        padding-left: 0;
    }

    &.p-r-nil {
        padding-right: 0;
    }
}

.ebox-content {
    clear: both;
}

.ebox-heading {
    background-color: @ebox-heading-bg;
    border-bottom: none;
}

.ebox-heading h3 {
    font-weight: 200;
    font-size: 1.5rem;
}

// Content Box Tools
.ebox-content,
.ebox-title {
    h1,
    h2,
    h3,
    h4,
    h5 {
        margin-top: 0;
    }
}

.ebox-content {
    &.text-box {
        padding-bottom: 0;
        padding-top: 15px;
    }
}

.indicator-alt-sm {
    height: 24px;
}

.indicator-alt {
    height: 40px;
}

.indicator-alt-lg {
    height: 120px;
}

.indicator {
    font-size: 0.2em;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid @progress-bar-accent;
    border-right: 1.1em solid @progress-bar-accent;
    border-bottom: 1.1em solid @progress-bar-accent;
    border-left: 1.1em solid rgba(0, 0, 0, 0);
    transform: translateZ(0);
    animation: load8 1.1s infinite linear;
}

.indicator,
.indicator:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.indicator-primary {
    .indicator;

    border-top: 1.1em solid @indicator-primary;
    border-right: 1.1em solid @indicator-primary;
    border-bottom: 1.1em solid @indicator-primary;
}

.indicator-large {
    .indicator;

    font-size: 0.4em;
}

.indicator-primary-large {
    .indicator-primary;

    font-size: 0.4em;
}

//mini activate spinner
.spinner {
    &.spinner-bounce-middle,
    &.spinner-bounce-bottom,
    &.spinner-bounce-top,
    &.spinner-blink {
        position: relative;
        display: inline-flex;
        margin: 3.5px 6px;
        width: 3px;
        height: 3px;
        animation: bounce-middle 2000ms ease-in 200ms infinite;

        &:before, &:after {
            content: '';
            position: absolute;
            width: 3px;
            height: 3px;
        }

        &:before {
            left: -6px;
            animation: bounce-middle 2000ms ease-in 0ms infinite;
        }

        &:after {
            right: -6px;
            animation: bounce-middle 2000ms ease-in 400ms infinite;
        }
    }
}

.spinner-accent, .spinner-accent:before, .spinner-accent:after {
    background-color: @accent;
}

@keyframes bounce-middle {
    0%, 70%, 100% {
        transform: translateY(0);
    }

    5%, 10% {
        transform: translateY(25%);
    }

    25%, 30% {
        transform: translateY(-75%);
    }

    50%, 55% {
        transform: translateY(50%);
    }
}


/*
    Placeholder file for additional fonts provided by theme.
*/
@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 200;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-ExtraLight.otf') format('opentype') url('../fonts/SourceSansPro-ExtraLight.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Light.otf') format('opentype'), url('../fonts/SourceSansPro-Light.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Regular.otf') format('opentype'), url('../fonts/SourceSansPro-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Semibold.otf') format('opentype'), url('../fonts/SourceSansPro-Semibold.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Bold.otf') format('opentype'), url('../fonts/SourceSansPro-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 900;
    font-style: normal;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-Black.otf') format('opentype'), url('../fonts/SourceSansPro-Black.woff') format('woff');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 200;
    font-style: italic;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-ExtraLightIt.woff') format('woff'), url('../fonts/SourceSansPro-ExtraLightIt.otf') format('opentype');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-It.woff') format('woff'), url('../fonts/SourceSansPro-It.otf') format('opentype');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-SemiboldIt.woff') format('woff'), url('../fonts/SourceSansPro-SemiboldIt.otf') format('opentype');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 700;
    font-style: italic;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-BoldIt.woff') format('woff'), url('../fonts/SourceSansPro-BoldIt.otf') format('opentype');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 900;
    font-style: italic;
    font-stretch: normal;
    src: url('../fonts/SourceSansPro-BlackIt.woff') format('woff'), url('../fonts/SourceSansPro-BlackIt.otf') format('opentype');
}

.font-regular {
    font-family: @font-family;
    font-weight: @font-weight;
    font-style: normal;
}

.font-light {
    font-family: @font-family;
    font-weight: @font-weight-light;
    font-style: normal;
}

.font-semibold,
.font-bold {
    font-family: @font-family;
    font-weight: @font-weight-semibold;
}

small {
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: @headings-color;
    font-family: @headings-font-family;
    font-weight: @font-weight-light;
}

h1 {
    font-size: @font-size-h1;
    font-weight: @font-weight-h1;

    small {
        font-size: 60%;
        margin-left: 10px;
        font-weight: @font-weight-light;
    }
}

h2 {
    font-size: @font-size-h2;
    font-weight: @font-weight-h2;

    small {
        font-size: 65%;
        margin-left: 8px;
        font-weight: @font-weight-light;
    }
}

h3 {
    font-size: @font-size-h3;
    font-weight: @font-weight-h3;

    small {
        font-size: 70%;
        margin-left: 5px;
        font-weight: @font-weight-light;
    }
}

h4 {
    font-size: @font-size-h4;
    font-weight: @font-weight-h4;

    small {
        font-family: @font-family;
        font-weight: @font-weight-light;
        font-size: 100%;
        margin-left: 3px;
    }
}

h5 {
    font-size: @font-size-h5;
    font-weight: @font-weight-h5;

    small {
        font-family: @font-family;
        font-weight: @font-weight-light;
        font-size: 100%;
        margin-left: 3px;
    }
}

h6 {
    font-size: @font-size-h6;
    font-weight: @font-weight-h6;
}

p {
    font-size: @font-size;
}

b {
    font-weight: @font-weight-bold;
}

/* COLORED TEXT */

.text-primary {
    color: @primary;
}

.text-secondary,
.text-accent {
    color: @accent;
}

.text-alternate1 {
    color: @alternate1;
}

.text-alternate2 {
    color: @alternate2;
}

.text-alternate3 {
    color: @alternate3;
}

.text-vibrant1 {
    color: @vibrant1;
}

.text-vibrant2 {
    color: @vibrant2;
}

.text-alert,
.text-error,
.text-warning {
    color: @critical;
}

.text-success {
    color: @ok;
}

.text-white {
    color: @white !important;
}

.text-black {
    color: @grey2 !important;
}

.text-muted {
    color: #888;
}

.align-right {
    float: right;
}

.align-left {
    float: left;
}

/* Modal */
.modal {
    z-index: @modal-z-index;
}

.modal-content {
    .modal-footer {
        .btn {
            min-width: 80px;
        }
    }
}

.modal-backdrop {
    opacity: 0.5;
}

/*
  Marquee Modal
*/

.marquee-modal-window {
    .modal-dialog {
        text-rendering: optimizeLegibility;
        width: 900px;

        &.modal-sm {
            width: 600px;
        }

        &.modal-md {
            width: 900px;
        }

        &.modal-lg {
            width: 1100px;
        }

        .modal-content {
            border-radius: 0;

            .dismiss {
                position: absolute;
                right: 0;

                .btn-close {
                    position: absolute;
                    width: 40px;
                    height: 40px;
                    box-shadow: none;
                    background-color: @marquee-modal-close-bg;
                    outline: none;
                    transform: translateX(-50%) translateY(-50%);
                    z-index: @modal-dismiss-z-index;

                    &:hover {
                        background-color: @marquee-modal-close-hover-bg;
                    }

                    ux-icon {
                        color: @marquee-modal-close-color;
                        font-size: 1.125rem;
                        padding-top: 2px;
                    }
                }
            }

            .side-panel {
                position: absolute;
                width: 240px;
                height: 100%;
                background-color: @marquee-modal-side-panel-bg;

                .marquee-logo {
                    color: @marquee-modal-side-panel-color;
                    padding: 20px;
                    padding-bottom: 5px;
                }

                .marquee-info-panel {
                    font-family: @font-family;
                    font-weight: @font-weight-light;
                    padding: 20px;
                    color: @marquee-modal-side-panel-color;

                    .title {
                        margin-top: 0;
                        margin-bottom: 20px;
                    }

                    .description {
                        margin: 0;
                    }
                }

                .marquee-wizard-info-panel {
                    font-family: @font-family;
                    font-weight: @font-weight-light;
                    padding: 20px;
                    color: @marquee-modal-side-panel-color;
                    padding-bottom: 0;

                    .title {
                        margin-top: 0;
                        margin-bottom: 20px;
                        white-space: nowrap;
                    }

                    .description {
                        max-height: 110px;
                        overflow-y: hidden;

                        p {
                            margin: 0;
                            max-height: 120px;
                        }
                    }
                }
            }

            .main-panel {
                display: inline-block;
                width: ~'calc(100% - 240px)';
                float: right;
                background-color: @marquee-modal-bg;

                .marquee-header {
                    padding: 35px 35px 0;

                    .marquee-title {
                        margin: 0;
                        color: @marquee-modal-title-color;
                    }
                }

                .marquee-body {
                    position: relative;
                    padding: 15px 35px;
                }

                .marquee-footer {
                    width: 100%;
                    height: 60px;
                    background-color: @marquee-modal-footer-bg;
                    text-align: right;
                    padding: 15px;
                }
            }
        }
    }

    .modal-close {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background-color: #333;
        border: none;
        border-radius: 50%;
        transform: translateX(-50%) translateY(-50%);
        font-size: 1.125rem;
        color: #999;
        outline: none;

        i {
            position: relative;
        }

        &:hover {
            background-color: #222;
        }

        &:focus {
            .native-focus-outline();
        }
    }
}

@media (max-width: 1140px) {
    .marquee-modal-window {
        .modal-dialog {
            &.modal-lg {
                width: 900px;
            }
        }
    }
}

@media (max-width: 940px) {
    .marquee-modal-window {
        .modal-dialog {
            width: 730px;

            &.modal-lg,
            &.modal-md {
                width: 730px;
            }
        }
    }
}

@media (max-width: 768px) {
    .marquee-modal-window {
        .modal-dialog {
            width: ~'calc(100% - 20px)';

            &.modal-lg,
            &.modal-md,
            &.modal-sm {
                width: ~'calc(100% - 20px)';
            }
        }
    }
}

@media (max-width: 600px) {
    .marquee-modal-window {
        .modal-dialog {
            &.modal-lg,
            &.modal-md,
            &.modal-sm {
                .side-panel {
                    width: 170px;
                }

                .main-panel {
                    width: ~'calc(100% - 170px)';
                }
            }

            .side-panel {
                width: 170px;
            }

            .main-panel {
                width: ~'calc(100% - 170px)';
            }
        }
    }
}

@media (max-width: 470px) {
    .marquee-modal-window {
        .modal-dialog {
            .side-panel {
                display: none;
            }

            .main-panel {
                width: 100% !important;
            }
        }
    }
}

/* Modal centering */

.modal {
    text-align: center;
    padding: 0 !important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

@media (max-width: 300px) {
    .modal-dialog {
        width: ~'calc(100% - 20px)';
        margin: 10px 0;
    }
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 8px;
    }
}

// Primary mixins
.button-primary-active() {
    background-color: @btn-primary-bg;
    color: @btn-primary-active-color;
    border-color: @btn-primary-bg;
    box-shadow: @btn-active-shadow;
}

.button-primary-hover() {
    .btn-hover-active-color(light, @btn-primary-bg, 5%);

    color: @btn-primary-hover-color;
    box-shadow: @btn-shadow;
}

.button-primary-disabled() {
    background-color: @btn-primary-disabled-bg;
    color: @btn-primary-disabled-color;
    border-color: @btn-primary-disabled-border;
    box-shadow: @btn-disabled-shadow;
}

// Secondary mixins
.button-secondary-active() {
    background-color: @btn-secondary-active-bg;
    color: @btn-secondary-active-color;
    border-color: @btn-secondary-active-border;
    box-shadow: @btn-active-shadow;
}

.button-secondary-hover() {
    background-color: @btn-secondary-hover-bg;
    border: 1px solid @btn-secondary-border;
    color: @btn-secondary-hover-color;
    box-shadow: @btn-shadow;
}

.button-secondary-disabled() {
    background-color: @btn-secondary-disabled-bg;
    color: @btn-secondary-disabled-color;
    border-color: @btn-secondary-disabled-border;
    box-shadow: @btn-disabled-shadow;
}

// Accent mixins
.button-accent-active() {
    background-color: @btn-accent-bg;
    color: @btn-accent-active-color;
    border-color: @btn-accent-bg;
    box-shadow: @btn-active-shadow;
}

.button-accent-hover() {
    .btn-hover-active-color(light, @btn-accent-bg, 5%);

    color: @btn-accent-hover-color;
    box-shadow: @btn-shadow;
}

.button-accent-disabled() {
    background-color: @btn-accent-disabled-bg;
    color: @btn-accent-disabled-color;
    border-color: @btn-accent-disabled-border;
    box-shadow: @btn-disabled-shadow;
}

.btn {
    border-radius: @btn-border-radius;
    font-size: @btn-font-size;
    font-family: @btn-font-family;
    text-transform: @btn-text-transform;
    padding: 4px 15px;
    box-shadow: @btn-shadow;

    &,
    &:active,
    &.active {
        &:focus,
        &.focus {
            outline: none;

            .native-focus-outline();

            &.ux-focus-indicator.ux-focus-indicator-active {
                .focus-outline();
            }
        }
    }

    &:active,
    &.active {
        box-shadow: @btn-active-shadow;
    }

    &:hover {
        box-shadow: @btn-hover-shadow;
    }

    &.btn-lg {
        font-size: @btn-large-font-size;
        padding: 6px 20px;
    }

    &.btn-sm,
    &.btn-xs {
        font-size: @btn-small-font-size;
        padding: 0 10px;
    }

    &.btn-link {
        border: @link-btn-border;
        box-shadow: @link-btn-shadow;

        &:hover {
            text-decoration: @link-btn-hover-text-decoration;
            box-shadow: @link-btn-hover-shadow;
        }

        &:focus {
            text-decoration: @link-btn-focus-text-decoration;
            box-shadow: @link-btn-focus-shadow;
        }
    }

    .ux-icon,
    ux-icon {
        line-height: inherit;

        & + * {
            margin-left: 4px;
        }
    }
}

.float-btn-margins {
    .btn {
        margin-bottom: 5px;
    }
}

.btn-container {
    display: flex;
    align-items: flex-start;

    > .btn + .btn,
    > .btn + .btn-group,
    > .btn-group + .btn,
    > .btn-group + .btn-group {
        margin-left: 8px;

        &.btn-link {
            margin-left: 0;
        }
    }
}

.btn-primary {
    .button-primary;
}

//New primary style
.button-primary,
.btn-primary {
    background-color: @btn-primary-bg;
    border-color: @btn-primary-border;
    color: @btn-primary-color;

    &:hover {
        .button-primary-hover;
    }

    &:focus,
    &.focus {
        .btn-hover-active-color(light, @btn-primary-bg, 5%);

        color: @btn-primary-focus-color;
    }

    .open {
        .dropdown-toggle {
            &.button-primary {
                background-color: @btn-primary-bg;
                color: @btn-primary-color;
            }
        }
    }

    &:active,
    &.active {
        .button-primary-active;
    }

    .button-primary,
    .btn-toggle {
        &.active {
            .button-primary-active;
        }
    }

    &.btn-link {
        color: @btn-primary-bg;
        background-color: transparent;

        &:hover {
            background-color: @link-btn-hover;
        }

        &:focus {
            background-color: transparent;
        }

        &:active {
            color: @btn-primary-bg;
            background-color: @link-btn-active;
        }
    }
}

.button-toggle-primary {
    .button-secondary;

    &:active,
    &.active {
        .button-primary-active;

        &:hover {
            .button-primary-hover;
        }
    }
}

.button-toggle-accent {
    .button-secondary;

    &:active,
    &.active {
        .button-accent-active;

        &:hover {
            .button-accent-hover;
        }
    }
}

.button-primary,
.btn-primary {
    &.disabled,
    &[disabled] {
        .button-primary-disabled;

        &:hover,
        &:focus,
        &:active,
        &.active {
            .button-primary-disabled;
        }
    }

    &.active[disabled] {
        .button-primary-disabled;
    }
}

fieldset[disabled] {
    background-color: @btn-primary-disabled-bg;
    color: @btn-primary-disabled-color;
    border-color: @btn-primary-disabled-border;

    .button-primary,
    .btn-primary {
        background-color: @btn-primary-disabled-bg;
        color: @btn-primary-disabled-color;
        border-color: @btn-primary-disabled-border;

        &:hover,
        &:focus,
        &:active,
        &.active {
            background-color: @btn-primary-disabled-bg;
            color: @btn-primary-disabled-color;
            border-color: @btn-primary-disabled-border;
        }
    }

    .btn-toggle {
        &.active {
            background-color: @btn-primary-disabled-bg;
            color: @btn-primary-disabled-color;
            border-color: @btn-primary-disabled-border;
        }
    }
}

.affix-toolbar {
    &.multiple-select-mode {
        .btn[disabled] {
            opacity: 0.9 !important;
        }
    }
}

//Secondary
.btn-white {
    .button-secondary;
}

//Secondary new style
.button-secondary,
.btn-white {
    color: @btn-secondary-color;
    background: @btn-secondary-bg;
    border: 1px solid @btn-secondary-border;
    box-shadow: @btn-secondary-shadow;

    &:active,
    &.active {
        .button-secondary-active;
    }

    &:focus,
    &.focus {
        background-color: @btn-secondary-focus-bg;
        border-color: @btn-secondary-focus-border;
        color: @btn-secondary-focus-color;
    }

    &:hover {
        .button-secondary-hover;
    }

    &.btn-link {
        color: @btn-secondary-color;
        background-color: transparent;
        border: none;

        &:hover {
            background-color: @link-btn-hover;
        }

        &:focus {
            background-color: transparent;
        }

        &:active {
            color: @btn-secondary-color;
            background-color: @link-btn-active;
        }
    }
}

.button-secondary,
.btn-secondary {
    &.btn-grouped {
        &.active {
            .button-primary-active;

            border-radius: @btn-border-radius;
        }
    }
}

.open {
    .dropdown-toggle {
        &.button-secondary {
            background-color: @btn-secondary-hover-bg;
            color: @btn-secondary-color;
        }
    }
}

.btn-group {
    &.toggle-buttons {
        .button-toggle-accent {
            border-color: @btn-secondary-active-border;

            &.active {
                &:hover {
                    .button-accent-hover;
                }
            }
        }

        .button-toggle-primary {
            border-color: @btn-secondary-active-border;

            &.active {
                &:hover {
                    .button-primary-hover;
                }
            }
        }
    }
}

.button-secondary.disabled,
.button-secondary.disabled:hover,
.button-secondary.disabled:focus,
.button-secondary.disabled:active,
.button-secondary.disabled.active,
.button-secondary[disabled],
.button-secondary[disabled]:hover,
.button-secondary[disabled]:focus,
.button-secondary[disabled]:active,
.button-secondary.active[disabled],
fieldset[disabled] .button-secondary,
fieldset[disabled] .button-secondary:hover,
fieldset[disabled] .button-secondary:focus,
fieldset[disabled] .button-secondary:active,
fieldset[disabled] .button-secondary.active,
.btn-white.disabled,
.btn-white.disabled:hover,
.btn-white.disabled:focus,
.btn-white.disabled:active,
.btn-white.disabled.active,
.btn-white[disabled],
.btn-white[disabled]:hover,
.btn-white[disabled]:focus,
.btn-white[disabled]:active,
.btn-white.active[disabled],
fieldset[disabled] .btn-white,
fieldset[disabled] .btn-white:hover,
fieldset[disabled] .btn-white:focus,
fieldset[disabled] .btn-white:active,
fieldset[disabled] .btn-white.active {
    .button-secondary-disabled;
}

//Accent
.btn-secondary {
    .button-accent;
}

//Accent new stryle
.button-accent,
.btn-secondary {
    background-color: @btn-accent-bg;
    border-color: @btn-accent-border;
    color: @btn-accent-color;

    &:hover {
        .button-accent-hover;
    }

    &:focus,
    &.focus {
        .btn-hover-active-color(light, @btn-accent-bg, 5%);

        color: @btn-accent-focus-color;
    }

    &:active,
    &.active {
        .button-accent-active;
    }

    .open {
        .dropdown-toggle {
            &.button-accent {
                .button-accent-active;
            }
        }
    }

    &.btn-link {
        color: @accent;
        background-color: transparent;

        &:hover {
            background-color: @link-btn-hover;
        }

        &:focus {
            background-color: transparent;
        }

        &:active {
            color: @btn-accent-active-color;
            background-color: @link-btn-active;
        }
    }
}

.button-accent.disabled,
.button-accent.disabled:hover,
.button-accent.disabled:focus,
.button-accent.disabled:active,
.button-accent.disabled.active,
.button-accent[disabled],
.button-accent[disabled]:hover,
.button-accent[disabled]:focus,
.button-accent[disabled]:active,
.button-accent.active[disabled],
fieldset[disabled] .button-accent,
fieldset[disabled] .button-accent:hover,
fieldset[disabled] .button-accent:focus,
fieldset[disabled] .button-accent:active,
fieldset[disabled] .button-accent.active,
.btn-secondary.disabled,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:focus,
.btn-secondary.disabled:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled],
.btn-secondary[disabled]:hover,
.btn-secondary[disabled]:focus,
.btn-secondary[disabled]:active,
.btn-secondary.active[disabled],
fieldset[disabled] .btn-secondary,
fieldset[disabled] .btn-secondary:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary:active,
fieldset[disabled] .btn-secondary.active {
    .button-accent-disabled;
}

// Alert
.btn-alert {
    &.btn-grouped {
        &.active {
            background-color: @btn-warning-bg;
            color: @btn-warning-color;
            border-radius: @btn-border-radius;
        }
    }
}

.btn-alert {
    .button-warning;
}

//Warning new style
.button-warning {
    &.btn-grouped {
        &.active {
            background-color: @btn-warning-bg;
            color: @btn-warning-color;
            border-radius: @btn-border-radius;
        }
    }
}

.button-warning,
.btn-alert {
    background-color: @btn-warning-bg;
    color: @btn-warning-color;

    &:hover {
        background-color: @btn-warning-hover-bg;
        border-color: @btn-warning-hover-border;
        color: @btn-warning-hover-color;
    }

    &:focus,
    &.focus {
        background-color: @btn-warning-focus-bg;
        border-color: @btn-warning-focus-border;
        color: @btn-warning-focus-color;
    }

    &:active,
    &.active {
        background-color: @btn-warning-active-bg;
        border-color: @btn-warning-active-border;
        color: @btn-warning-active-color;
    }

    .button-warning {
        &:active,
        &.active {
            background-color: @btn-warning-focus-bg;
            border-color: @btn-warning-focus-color;
            color: @btn-warning-focus-color;
        }
    }

    .open {
        .dropdown-toggle {
            &.button-warning {
                background-color: @btn-warning-focus-bg;
                border-color: @btn-warning-focus-border;
                color: @btn-warning-focus-color;
            }
        }
    }

    .btn-toggle {
        &.active {
            background-color: @btn-warning-focus-bg;
            border-color: @btn-warning-focus-border;
            color: @btn-warning-focus-color;
        }
    }

    &.btn-link {
        color: @btn-warning-bg;
        background-color: transparent;

        &:hover {
            background-color: @link-btn-hover;
        }

        &:focus {
            background-color: transparent;
        }

        &:active {
            color: @btn-warning-bg;
            background-color: @link-btn-active;
        }
    }
}

.button-warning.disabled,
.button-warning.disabled:hover,
.button-warning.disabled:focus,
.button-warning.disabled:active,
.button-warning.disabled.active,
.button-warning[disabled],
.button-warning[disabled]:hover,
.button-warning[disabled]:focus,
.button-warning[disabled]:active,
.button-warning.active[disabled],
fieldset[disabled] .button-warning,
fieldset[disabled] .button-warning:hover,
fieldset[disabled] .button-warning:focus,
fieldset[disabled] .button-warning:active,
fieldset[disabled] .button-warning.active,
fieldset[disabled] .btn-toggle.active,
.btn-alert.disabled,
.btn-alert.disabled:hover,
.btn-alert.disabled:focus,
.btn-alert.disabled:active,
.btn-alert.disabled.active,
.btn-alert[disabled],
.btn-alert[disabled]:hover,
.btn-alert[disabled]:focus,
.btn-alert[disabled]:active,
.btn-alert.active[disabled],
fieldset[disabled] .btn-alert,
fieldset[disabled] .btn-alert:hover,
fieldset[disabled] .btn-alert:focus,
fieldset[disabled] .btn-alert:active,
fieldset[disabled] .btn-alert.active,
fieldset[disabled] .btn-toggle.active {
    background-color: @btn-warning-disabled-bg;
    color: @btn-warning-disabled-color;
    border-color: @btn-warning-disabled-border;
}

//link disabled style
.btn-link[disabled] {
    border: none;
    background-color: transparent;
    color: @btn-primary-disabled-color;
}

button {
    &.dim {
        &:before {
            font-size: 3.125rem;
            line-height: 1em;
            font-weight: normal;
            color: @white;
            display: block;
            padding-top: 10px;
        }

        &:active {
            &:before {
                top: 7px;
                font-size: 3.125rem;
            }
        }
    }
}

.btn-group {
    .btn-grouped {
        &.button-secondary {
            &:hover {
                .button-secondary-hover;

                &:active,
                &.active {
                    .button-primary-hover;
                }
            }
        }
    }
}

.btn-darker-border {
    border-color: darken(@btn-primary-border, 12%);

    &:hover,
    &:focus {
        border-color: darken(@btn-primary-border, 12%);
    }
}

//Back
.btn-back {
    &:before {
        position: relative;
        top: 4px;
    }
}

.btn-back {
    &:focus {
        .native-focus-outline;
    }
}

//Back for Header
.btn-back-header {
    display: none;
}

.back-button {
    .btn-back-header {
        display: block;
        float: left;
        height: 28px;
        width: 28px;
        margin-top: 24px;
        margin-right: 2px;
        cursor: pointer;

        span {
            width: 100%;
            height: 100%;
            padding: 5.5px 1px 0 5px;

            svg {
                g {
                    path {
                        stroke: @btn-primary-border;
                    }
                }
            }
        }
    }
}

.page-content-navbar-top-light {
    .back-button {
        .btn-back-header {
            &:hover {
                background-color: darken(@white, 3%);
            }
        }
    }
}

.page-content-navbar-top-dark {
    .back-button {
        .btn-back-header {
            &:hover {
                background-color: @navbar-back-button-hover;
            }
        }
    }
}

.affix {
    .btn-back-header {
        display: none;
    }
}

.btn-pair {
    white-space: nowrap;
    margin-right: 16px;
}

.btn-pair button {
    width: 110px;
}

.btn-pair {
    button {
        &:first-child {
            i {
                font-size: @font-size-sm;
                margin-left: -3px;
                margin-right: 5px;
            }
        }

        &:last-child {
            margin-left: 4px;

            i {
                font-size: @font-size-sm;
                margin-left: 5px;
                margin-right: -3px;
            }
        }
    }
}

.btn-group {
    :not(.dropdown-toggle:first-child) {
        &.btn {
            padding: 6px 12px;

            &.btn-sm {
                padding: 4px 8px;
            }
        }
    }

    button {
        &.btn-nav {
            min-width: 45px;
        }
    }

    .dropdown-toggle {
        &:focus {
            .native-focus-outline;

            z-index: @button-group-front-z-index;
        }
    }
}

.dropdown-menu {
    margin-top: 5px;

    &.dropdown-open {
        display: block;
    }
}

.dropdown-icon-inline {
    padding-left: 12px;
}

.dropdown-toggle {
    .ux-icon,
    ux-icon {
        margin-left: 3px;
        line-height: 1;

        &:first-child {
            margin-left: 0;
        }
    }
}

.btn-link.disabled,
.btn-link.disabled:hover,
.btn-link.disabled:focus,
.btn-link.disabled:active,
.btn-link.disabled.active,
.btn-link[disabled],
.btn-link[disabled]:hover,
.btn-link[disabled]:focus,
.btn-link[disabled]:active,
.btn-link.active[disabled],
fieldset[disabled] .btn-link,
fieldset[disabled] .btn-link:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link:active,
fieldset[disabled] .btn-link.active,
fieldset[disabled] .btn-toggle.active {
    color: @link-btn-disabled-color;
}

//addon size
.input-group-btn {
    .btn {
        padding: 6px 15px;
    }

    .btn-sm {
        padding: 5px 10px;
        height: 30px !important;
    }

    .btn-lg {
        padding: 10px 20px;
    }

    > .btn {
        z-index: @button-group-middle-z-index;

        &:hover {
            z-index: @button-group-middle-z-index;
        }

        &:focus.ux-focus-indicator-active {
            outline: none !important;
            z-index: @button-group-front-z-index;
            box-shadow: 0 0 1px 1px @accent;
        }
    }

    .dropdown-toggle {
        &:focus.ux-focus-indicator-active {
            outline: none !important;
            box-shadow: 0 0 1px 1px @accent;
            z-index: @button-group-front-z-index;
        }
    }
}

.input-group-sm {
    .input-group-btn {
        .btn {
            height: 34px;
        }
    }
}

.btn-icon {
    &.btn {
        padding: 4px 7px;
        width: 30px;
    }

    &.btn-lg {
        padding: 6px 10px;
        width: 40px;
    }

    &.btn-sm {
        padding: 0;
        width: 20px;
    }

    &.btn-circular {
        border-radius: @btn-circular-border-radius;

        &.button-dark {
            background: @btn-dark;
        }
    }
}

//Hyperlink styles
.hyperlink {
    &:link {
        color: @hyperlink-color;
        border-bottom: 2px dotted @primary;
    }

    &:hover,
    &:focus {
        color: @grey2;
        border-bottom: 2px solid @primary;
        outline-color: @accent;
    }

    &:active {
        color: @grey2;
        border-bottom: 2px solid @grey2;
    }

    &:visited {
        color: @hyperlink-color;
        border-bottom: 2px solid @hyperlink-color;
    }
}

.hyperlink-toggle {
    .hyperlink();

    &:focus {
        border-bottom: 2px dotted @grey2;

        &:hover {
            border-bottom: 2px solid @primary;
        }
    }

    &:visited {
        color: @hyperlink-color;
        border-bottom: 2px solid @primary;

        &:focus {
            border-bottom: 2px dotted @grey2;

            &:hover {
                border-bottom: 2px solid @primary;
            }
        }
    }
}

.hyperlink.text-primary {
    &:link {
        color: @primary;
    }

    &:hover,
    &:focus {
        color: @primary;
        border-bottom-color: @primary;
    }

    &:active {
        color: @primary;
        border-bottom-color: @primary;
    }

    &:visited {
        color: @primary;
        border-bottom-color: @primary;
    }
}

.hyperlink-hover {
    border-bottom: 2px dotted transparent;

    &:link {
        color: @hyperlink-color;
    }

    &:hover,
    &:focus {
        color: @hyperlink-hover-color;
        border-bottom: 2px dotted @primary;
        outline-color: @accent;
    }

    &:visited {
        color: @hyperlink-color;

        &:hover,
        &:focus {
            color: @hyperlink-hover-color;
            border-bottom: 2px dotted @primary;
        }
    }
}

/*
  Marquee Wizard
*/

.marquee-wizard-side-panel {
    display: flex;
    flex-direction: column;

    .marquee-logo {
        flex: none;
    }
}

.marquee-wizard-steps {
    flex: 1;
    width: 100%;
    list-style-type: none;
    padding: 0;
    margin: 30px 0 0;
    overflow-y: auto;

    .marquee-wizard-step {
        padding: 8px 20px;
        cursor: default;
        transition: background-color 0.3s linear;

        &.visited:hover {
            cursor: pointer;
            background-color: @marquee-wizard-step-hover-bg;
        }

        &.active {
            background-color: @marquee-wizard-step-active-bg;

            &:hover {
                background-color: @marquee-wizard-step-active-hover-bg;
            }

            .step-label {
                color: @marquee-wizard-step-active-color;
            }
        }

        &.error {
            background: @marquee-wizard-step-error-bg;

            &.visited:hover {
                cursor: pointer;
                background: @marquee-wizard-step-error-bg;
            }
        }

        .step-label {
            display: table;
            width: 100%;
            color: @marquee-wizard-step-color;

            .step-title {
                display: table-cell;

                .title {
                    font-family: @font-family;
                    font-weight: @font-weight-light;
                    font-size: 1.125rem;
                }
            }

            .step-complete {
                display: table-cell;
                width: 15px;
                color: @marquee-wizard-step-complete-color;
            }
        }
    }
}

.marquee-wizard-text {
    color: @marquee-wizard-color;
}

.chart-alternate1 {
    color: @alternate1;
}

.spark-label .x-large {
    font-size: 24px;
    max-height: 24px;
    display: inline-block;
}

.spark-label .large {
    font-size: 16px;
}

.spark-label .medium {
    font-size: 14px;
}

.spark-label .small {
    font-size: 11px;
}

.spark-label .light {
    opacity: 0.6;
}

.card-view {
    padding-left: 0;
    margin: 0 auto;

    @media (max-width: 555px) {
        .card {
            width: 95%;
        }
    }

    @media (min-width: 555px) {
        .card {
            width: 46%;
        }
    }

    @media (min-width: 800px) {
        .card {
            width: 30%;
        }
    }

    @media (min-width: 1024px) {
        .card {
            width: 46%;
        }
    }

    @media (min-width: 1305px) {
        .card {
            width: 30%;
        }
    }

    @media (min-width: 1640px) {
        .card {
            width: 23%;
        }
    }

    @media (min-width: 1973px) {
        .card {
            width: 18%;
        }
    }

    @media (min-width: 2307px) {
        .card {
            width: 15%;
        }
    }

    @media (min-width: 2639px) {
        .card {
            width: 255px;
        }
    }

    .card {
        position: relative;
        display: inline-block;
        padding: 20px;
        margin: 7px 10px;
        background-color: @card-bg;
        border: 1px solid @card-border;

        &.outline {
            border: 1px solid @card-selected-border;
        }

        &.callout {
            &.preview-pane-selected-item {
                border: 1px solid @card-selected-border;
            }

            &:after, &:before {
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }

            &:after {
                border-color: rgba(136, 183, 213, 0);
                border-width: 14px;
            }

            &:before {
                border-color: rgba(194, 225, 245, 0);
                border-width: 15px;
            }

            &.top {
                &:after, &:before {
                    bottom: 100%;
                    left: 50%;
                }

                &:after {
                    border-bottom-color: @card-bg;
                    margin-left: -15px;
                }

                &:before {
                    border-bottom-color: @card-border;
                    margin-left: -16px;
                }

                &.outline, &.preview-pane-selected-item {
                    &:before {
                        border-bottom-color: @card-selected-border;
                    }
                }
            }

            &.right {
                &:after, &:before {
                    left: 100%;
                    top: 50%;
                }

                &:after {
                    border-left-color: @card-bg;
                    margin-top: -15px;
                }

                &:before {
                    border-left-color: @card-border;
                    margin-top: -16px;
                }

                &.outline, &.preview-pane-selected-item {
                    &:before {
                        border-left-color: @card-selected-border;
                    }
                }
            }

            &.bottom {
                &:after, &:before {
                    top: 100%;
                    left: 50%;
                }

                &:after {
                    border-top-color: @card-bg;
                    margin-left: -15px;
                }

                &:before {
                    border-top-color: @card-border;
                    margin-left: -16px;
                }

                &.outline, &.preview-pane-selected-item {
                    &:before {
                        border-top-color: @card-selected-border;
                    }
                }
            }

            &.left {
                &:after, &:before {
                    right: 100%;
                    top: 50%;
                }

                &:after {
                    border-right-color: @card-bg;
                    margin-top: -15px;
                }

                &:before {
                    border-right-color: @card-border;
                    margin-top: -16px;
                }

                &.outline, &.preview-pane-selected-item {
                    &:before {
                        border-right-color: @card-selected-border;
                    }
                }
            }
        }

        .card-icon {
            background: url('../img/page.png') no-repeat;
            width: 24px;
            height: 28px;
            background-size: contain;
        }

        .card-detail {
            min-height: 44px;
        }

        .card-label {
            position: absolute;
            top: 0;
            right: 15px;
        }

        .card-text-emphasis {
            font-family: @font-family;
            color: @card-title-color;
        }

        .card-text-subtle {
            color: @card-subtitle-color;
        }

        .overflow-ellipse {
            white-space: nowrap;
            overflow: hidden !important;
            text-overflow: ellipsis;
        }

        &.clickable {
            outline: none;
        }

        &.active {
            background-color: @card-active-bg;
            border-color: @border-color;
            color: inherit;
            z-index: @stacking-context-z-index;
            transition: none;
        }
    }

    &.list-stack {
        .card {
            .card-label {
                top: 15px;
                right: 25px;
            }

            .content {
                .card-text-emphasis {
                    font-size: 1.25rem;
                }
            }
        }
    }

    &.card-hover {
        .card {
            &:hover, &:focus, &.preview-pane-selected-item {
                background-color: @card-hover-bg;

                &.callout {
                    border: 1px solid @card-hover-border;

                    &.top {
                        &:after {
                            border-bottom-color: @card-hover-bg;
                        }

                        &:before {
                            border-bottom-color: @card-hover-border;
                        }
                    }

                    &.right {
                        &:after {
                            border-left-color: @card-hover-bg;
                        }

                        &:before {
                            border-left-color: @card-hover-border;
                        }
                    }

                    &.bottom {
                        &:after {
                            border-top-color: @card-hover-bg;
                        }

                        &:before {
                            border-top-color: @card-hover-border;
                        }
                    }

                    &.left {
                        &:after {
                            border-right-color: @card-hover-bg;
                        }

                        &:before {
                            border-right-color: @card-hover-border;
                        }
                    }
                }

                &.active {
                    border-color: @card-border;
                }
            }
        }
    }
}

//Allow cards to be stacked vertically
&.stacked {
    .card {
        display: block;
        margin-top: 0;
        margin-left: 0;
        margin-bottom: -1px;
        width: 100%;
        padding: 20px 10px;

        .icon {
            display: inline-block;
            vertical-align: top;
            margin: 5px 10px;
        }

        .content {
            display: inline-block;
            width: ~'calc(100% - 50px)';
        }

        &:last-child {
            margin-bottom: 0;
        }
    }
}

/*
  Draggable Cards (Angular)
*/
.ux-draggable-card-container {
    height: 100%;
    padding: 5px 20px;
    background-color: @draggable-card-container-bg;
    border: 1px solid @draggable-card-container-border;
    overflow-y: auto;
}

.ux-draggable-card {
    position: relative;
    width: 100%;
    min-height: 30px;
    background-color: @draggable-card-bg;
    margin: 10px 0;
    border: 1px solid @draggable-card-border;
    box-shadow: 1px 1px 3px @draggable-card-border;
    padding: 5px 10px;
    cursor: pointer;
    transition: border-color 0.5s;

    &.active {
        box-shadow: 1px 1px 3px @draggable-card-active-shadow;
        border-color: @draggable-card-active-border;

        &:before,
        &:after {
            content: " ";
            border: solid transparent;
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            top: 50%;
            transform: translateY(-50%);
        }

        &:before {
            border-width: 10px;
        }

        &:after {
            border-width: 9px;
        }

        &.right {
            &:before,
            &:after {
                left: 100%;
            }

            &:before {
                border-left-color: @draggable-card-active-border;
                filter: drop-shadow(3px 0 2px @draggable-card-active-shadow);
            }

            &:after {
                border-left-color: @draggable-card-bg;
            }
        }

        &.left {
            &:before,
            &:after {
                right: 100%;
            }

            &:before {
                border-right-color: @draggable-card-active-border;
            }

            &:after {
                border-right-color: @draggable-card-bg;
            }
        }
    }

    &:focus {
        outline: none !important;

        &.ux-focus-indicator-active {
            outline: none !important;
            box-shadow: 0 0 1px 1px @aspects-outline;
        }
    }
}
.alert-info {
    color: @alert-info-color;
    background-color: @alert-info-bg;
    border: 1px solid @alert-info-border;
}

.alert-error {
    color: @alert-error-color;
    background-color: @alert-error-bg;
    border: 1px solid @alert-error-border;
}

.alert {
    .close {
        font-size: 0.875rem;
        opacity: 0.5;
        top: 4px;

        &:focus {
            .native-focus-outline;
        }
    }
}

.alert-link,
ux-alert a {
    color: inherit;
    text-decoration: underline;
    font-weight: normal;

    &:hover {
        color: inherit;
        text-decoration: underline;
    }

    &:focus {
        .native-focus-outline;
    }
}

/*
 * Angular Alerts
 */
ux-alert {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid transparent;
    border-radius: 4px;

    .alert-icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: none;
        padding-right: 12px;
    }

    .alert-content {
        flex: 1;
        padding: 2px 0;
    }

    .alert-close {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: none;
        border: none;
        color: inherit;
        background: transparent;

        &:focus {
            .native-focus-outline();
        }
    }

    &.ux-alert-info {
        color: @alert-info-color;
        background-color: @alert-info-bg;
        border: 1px solid @alert-info-border;
    }

    &.ux-alert-error {
        color: @alert-error-color;
        background-color: @alert-error-bg;
        border: 1px solid @alert-error-border;
    }

    &.ux-alert-success {
        color: @alert-success-color;
        background-color: @alert-success-bg;
        border: 1px solid @alert-success-border;
    }

    &.ux-alert-warning {
        color: @alert-warning-color;
        background-color: @alert-warning-bg;
        border: 1px solid @alert-warning-border;
    }

    &.ux-alert-dark {
        color: @alert-dark-color;
        background-color: @alert-dark-bg;
        border: 1px solid @alert-dark-border;
    }
}

/*
 * Badge
 */

.ux-badge {
    position: absolute;
    text-align: center;
    display: inline-block;
    background-color: #000;
    color: #fff;
    text-transform: none;
    font-weight: 700;
    font-family: @font-family;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid transparent;
    padding: 0 3px;

    &.ux-badge-small {
        border-radius: 7px;
        font-size: 11px;
        padding: 0 2px;
        min-height: 12px;
        min-width: 13px;
    }

    &.ux-badge-medium {
        border-radius: 9px;
        font-size: 13px;
        min-height: 16px;
        min-width: 16px;
    }

    &.ux-badge-large {
        border-radius: 11px;
        font-size: 17px;
        min-height: 20px;
        min-width: 20px;
    }
}

.ux-badge-container {
    position: relative;

    &.ux-badge-above {
        .ux-badge {
            top: 0;
        }

        .ux-badge-small {
            top: -7px;
        }

        .ux-badge-medium {
            top: -9px;
        }

        .ux-badge-large {
            top: -11px;
        }
    }

    &.ux-badge-below {
        .ux-badge {
            bottom: 0;
        }

        .ux-badge-small {
            bottom: -7px;
        }

        .ux-badge-medium {
            bottom: -9px;
        }

        .ux-badge-large {
            bottom: -11px;
        }
    }

    &.ux-badge-before .ux-badge {
        left: -3px;
    }

    &.ux-badge-after .ux-badge {
        right: -3px;
    }

    &.ux-badge-before {
        .ux-badge {
            transform: translateX(-100%);
        }

        &.ux-badge-overlap .ux-badge {
            transform: translateX(-50%);
            left: 0;
        }
    }

    &.ux-badge-after {
        .ux-badge {
            transform: translateX(100%);
        }

        &.ux-badge-overlap .ux-badge {
            transform: translateX(50%);
            right: 0;
        }
    }

    &.ux-badge-hidden .ux-badge {
        display: none;
    }

    &:focus-within,
    &:focus {
        .ux-badge {
            outline: none !important;
        }
    }
}

// some slight tweaks for firefox
@-moz-document url-prefix() {
    .ux-badge-container {
        .ux-badge-small {
            min-width: 14px;
            min-height: 13px;
        }

        .ux-badge-large {
            min-width: 21px;
            min-height: 21px;
        }
    }
}

//============================
//Filter Button Styles --- Start
//============================
.btn-group {
    .filter-dropdown {
        padding: 6px;
        padding-right: 7px;
        padding-left: 6px;
    }
}

.btn-group {
    .filter-dropdown,
    .btn-clear {
        border: 0;
        background: none;
        text-transform: none;
        box-shadow: none;
        font-size: @font-size;
    }
}

.filter-dropdown {
    &:hover {
        background-color: @filter-dropdown-hover-bg;
        border-radius: 0;
        border-color: @filter-dropdown-hover-border;
        text-decoration: none;
    }

    &:focus {
        background-color: @filter-dropdown-focus-bg;
        border-radius: 0;
        border-color: @filter-dropdown-focus-border;
        text-decoration: none;
    }
}

.filter {
    .dropdown-toggle {
        > .ux-icon,
        > ux-icon {
            font-size: 0.625rem;
            margin-left: 3px;
        }
    }

    .dropdown-menu > li {
        & > a {
            padding: 6px;

            span {
                margin-left: 10px;
            }

            &:focus,
            &:hover {
                color: inherit;
            }
        }
    }
}

.filter-selected {
    font-family: @font-family;
    font-weight: 600;
}

.filter-selected {
    text-decoration: none;
    background-color: @filter-selected-bg;
}

.filter {
    .dropdown-menu > li > a {
        &:hover {
            text-decoration: none;
            background-color: @filter-option-hover-bg;
        }

        &:focus {
            text-decoration: none;
            background-color: @filter-option-focus-bg;
        }
    }
}

.sorter-container {
    white-space: nowrap;
}

.sorter-title {
    vertical-align: middle;
}

.sorter-icon {
    display: inline-block;
    vertical-align: text-bottom;
}

.sorter-text {
    margin: 0;
    display: inline-block;
    width: ~'calc(100% - 38px)';
}

.sorter-text > span {
    margin-right: 10px;
}

.sorter-option-disabled {
    opacity: 0.5;
}

.form-control {
    &.filter-text {
        opacity: 0.9;
        font-size: @font-size-lg;
        line-height: normal;
    }
}

.preview-no-record {
    text-align: center;
    font-size: 5rem;
    margin-top: 200px;
    color: @preview-pane-message-color;
}

.ux-splitter-toggle-btn {
    position: absolute;
    padding: 4px 6px;

    &.right,
    &.left {
        top: 0;
        width: 32px;
        height: 30px;
    }

    &.top,
    &.bottom {
        right: 0;
        width: 30px;
        height: 32px;
    }

    &.top {
        top: 0;
        border-radius: 0 0 20px 20px;
    }

    &.right {
        right: 0;
        border-radius: 20px 0 0 20px;
    }

    &.bottom {
        bottom: 0;
        border-radius: 20px 20px 0 0;
    }

    &.left {
        left: 0;
        border-radius: 0 20px 20px 0;
    }
}

/*
 * Angular Splitter
 */
as-split {
    .as-split-gutter {
        background-color: #f2f2f2 !important;

        &:focus {
            .native-focus-outline();
        }
    }

    /* Added to fix an issue in IE11 when the last 0 in the flex value was ignored - https://github.com/bertrandg/angular-split/issues/188 */
    .as-split-area {
        &.as-hidden {
            /* stylelint-disable-next-line length-zero-no-unit */
            flex: 0 1 0px !important;
        }
    }
}
form {
    .form-group-validate {
        margin-bottom: 30px;

        input {
            &.ng-invalid {
                &.ng-dirty, &.ng-touched {
                    border: 1px solid @form-control-invalid-border;
                }
            }
        }

        .form-control-feedback {
            color: @form-control-invalid-color;
        }
    }

    .form-group-validate-on-submit {
        margin-bottom: 30px;

        input {
            &.ng-invalid {
                &.on-submit {
                    border: 1px solid @form-control-invalid-border;
                }
            }
        }

        .form-control-feedback {
            color: @form-control-invalid-color;
        }
    }

    .validation-error-text {
        color: @form-control-invalid-color;
        float: left;
        opacity: 0.9;
    }

    .button-primary {
        &.disabled {
            box-shadow: none;
        }
    }
}
.hotkey-group-hint {
    width: auto;
    min-width: 25px;
    padding: 0 2px;
    height: 25px;
    color: inherit;
    border-radius: 2px;
    border: 2px solid @hotkey-hint-color;
    text-align: center;
    text-transform: lowercase;
    transition: opacity 0.2s;

    &:hover {
        .opacity(0.3);
    }
}
// Provide a checkbox/radiobutton layout utility
.checkbox-container,
.radio-button-container,
.toggleswitch-container {
    display: flex;
    flex-direction: column;

    ux-checkbox,
    ux-radio-button,
    ux-toggleswitch {
        margin-bottom: 5px;
    }
}
.component-list-container {
    align-items: flex-end;
    display: flex;

    .component-list {
        flex: 1;

        .component-list-component {
            display: flex;
            padding: 5px;
            transition: background-color 0.3s linear;

            &.hoverable:hover {
                background-color: @component-list-field-hover;

                .component-remove {
                    opacity: 1;

                    ux-icon {
                        cursor: pointer;
                    }

                    &[disabled] {
                        opacity: 0.5;

                        ux-icon {
                            cursor: pointer;
                        }
                    }
                }
            }

            .component-content {
                display: flex;
                flex: 1;

                *:focus ~ .component-remove {
                    opacity: 1;
                }
            }

            .component-remove {
                display: flex;
                justify-content: center;
                align-items: center;
                flex: none;
                opacity: 0;
                transition: opacity 0.3s linear;
                width: 32px;
                border: none;
                background: none;

                &.ux-focus-indicator-active {
                    opacity: 1;
                }

                ux-icon {
                    color: @component-list-remove-color;
                }
            }
        }
    }

    .component-actions {
        align-items: center;
        cursor: pointer;
        display: flex;
        flex: none;
        margin-bottom: 7px;
        margin-left: 48px;
        border: none;
        background-color: transparent;
        padding: 0;

        .component-add-btn {
            align-items: center;
            background-color: @component-list-add-bg;
            opacity: @component-list-add-bg-opacity;
            border-radius: 50%;
            color: @component-list-add-icon-color;
            display: inline-flex;
            height: 30px;
            justify-content: center;
            transition: background-color 0.3s linear;
            width: 30px;
            border: none;
        }

        &:hover {
            .component-add-btn {
                background-color: @component-list-add-hover-bg;
                opacity: @component-list-add-hover-bg-opacity;
            }
        }

        &.ux-focus-indicator-active {
            .component-add-btn {
                background-color: @component-list-add-hover-bg;
                opacity: @component-list-add-hover-bg-opacity;
            }
        }

        .component-add-text {
            color: @component-list-add-color;
            margin-bottom: 0;
            padding-left: 8px;
        }

        &[disabled],
        &.disabled {
            cursor: default;
            opacity: 0.5;
            outline: none;

            &:hover {
                .component-add-btn {
                    background-color: @component-list-add-bg;
                    opacity: 0.5;
                }
            }
        }
    }
}

.treegrid {
    &.table > thead > tr > th {
        border-bottom: none;
    }
}

.treegrid-header {
    th:first-child {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 40px;

        .treegrid-header-text {
            margin-left: 25px;
        }
    }
}

.treegrid-row {
    &:focus {
        .native-focus-outline();
    }

    > td:first-child {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        > ux-checkbox {
            margin-right: 10px;
        }
    }
}

// Angular expander
.treegrid-expander {
    display: inline-block;
    width: 28px;
    margin-left: 2px;
    margin-right: 3px;

    button {
        width: 100%;
        margin: 0;
        border: none;
        background-color: transparent;
        text-align: center;

        &:focus {
            outline: none;
        }

        .treegrid-expander-icon {
            opacity: 0.5;
            transition: transform linear 0.15s;

            &:hover {
                opacity: 1;
            }
        }
    }
}

.treegrid-row-expanded {
    .treegrid-expander-icon {
        transform: rotate(90deg);
    }
}

.treegrid-icon {
    display: inline-block;
    min-width: 20px;
    text-align: center;
    margin-right: 5px;
}

// Angular Tree Component Styling - Third Party Component
.angular-tree-component {
    .tree-node {
        &:hover {
            background-color: transparent;
        }

        > .node-wrapper {
            > ux-checkbox {
                margin-right: 5px;
            }
        }
    }

    // Node Content Outline
    .node-content-wrapper {
        width: 100%;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;

        &:hover {
            background-color: @treeview-hover-bg;
        }

        &.node-content-wrapper-active,
        &.node-content-wrapper-focused {
            background-color: @shift-select-selected-light;
        }
    }

    // Expand/Collapse Arrow
    tree-node-expander {
        .toggle-children-wrapper {
            display: block;
            padding: 0 3px 5px 1px;

            .toggle-children {
                background-image: none;
                font-family: 'ux-icons';
                opacity: 0.5;
                font-size: 12px;
                width: 11px;
                height: 17px;
                .ux-icon-chevron-right();
            }
        }
    }

    .tree-action-button {
        font-size: 0.625rem !important;
        padding: 4px !important;
    }

    .icon {
        margin-right: 3px;
    }

    a:focus,
    span:focus {
        .native-focus-outline;
    }

    a:active,
    a:active:focus {
        .native-focus-outline;
    }

    .toggle {
        &.empty {
            > span {
                color: lighten(@text-color, 50%);
            }
        }
    }
}

.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-family: @font-family;
    font-size: 0.875rem;
    font-weight: 400;
    height: 100%;
    min-height: 22px;

    li {
        a,
        span {
            color: @breadcrumb-color;

            &:focus {
                .native-focus-outline;
            }
        }

        a:hover {
            color: @breadcrumb-hover-color;
        }

        + li {
            .ux-icon-next;

            &:before {
                font-family: "ux-icons";
                display: inline-block;
                padding: 0 0 0 3px;
                font-size: 0.6rem;
                color: @breadcrumb-separator-color;
            }
        }
    }
}

.breadcrumb-inverse {
    background-color: @white;
    color: @grey2;
}
.file-upload-dropzone {
    border: 2px dashed @file-upload-dropzone-border;
    background: @file-upload-dropzone-bg;
    font-size: 18px;
    font-weight: 300;
    width: 100%;
    padding-top: 60px;
    text-align: center;
    min-height: 150px;
    color: @file-upload-dropzone-color;
    cursor: pointer;
    margin-bottom: 24px;

    &:focus {
        .native-focus-outline();
    }
}

.file-upload-progress-indicator {
    margin-top: 8px;
    line-height: 12px;
    margin-bottom: 24px;
}

.file-upload-queue {
    display: flex;
    padding-left: 0;
    list-style: none;
    margin-bottom: 22px;
    flex-wrap: wrap;

    > li {
        max-width: 100%;
        flex: none;

        > a {
            display: flex;
            align-items: center;
            padding-left: 5px;
            border: 1px solid @file-upload-queue-border;
            border-radius: @file-upload-queue-border-radius;
            margin-right: 5px;
            margin-bottom: 5px;
            color: @file-upload-queue-color;
            background-color: @file-upload-queue-bg;

            &:focus {
                outline: none;
                background-color: @file-upload-queue-active-bg;
                border-color: @file-upload-queue-active-border;
                color: @file-upload-queue-active-color;
            }
        }
    }
}

.file-upload-queue-remove {
    display: inline-flex;
    align-items: center;
    border: none;
    background-color: transparent;
    font-size: 80%;
    opacity: 0.7;
    height: 22px;
    padding-top: 4px;

    &:hover,
    &:focus {
        opacity: 1;
    }

    &:focus {
        .native-focus-outline();
    }
}
.tooltip {
    word-wrap: break-word;
    font-size: 0.875rem;
    font-family: @font-family;
    z-index: @tooltip-z-index;
}

.tooltip {
    &.in {
        .opacity(100);
    }
}

.tooltip-inner {
    background-color: @tooltip-bg;
    box-shadow: 1px 1px 2px @tooltip-shadow;
    border-radius: 0;
    text-align: left;
    max-width: 400px;
}

.tooltip {
    &.top {
        .tooltip-arrow {
            border-top-color: @tooltip-bg;
        }
    }
}

.tooltip {
    &.right {
        .tooltip-arrow {
            border-right-color: @tooltip-bg;
        }
    }
}

.tooltip {
    &.bottom {
        .tooltip-arrow {
            border-bottom-color: @tooltip-bg;
        }
    }
}

.tooltip {
    &.left {
        .tooltip-arrow {
            border-left-color: @tooltip-bg;
        }
    }
}

.popover {
    z-index: @popover-z-index;
    font-family: inherit;
}

/*
    Static tooltip styling (Angular)
*/

.ux-static-tooltip {
    background-color: @static-tooltip-bg;
    border: 1px solid @static-tooltip-border;
    box-shadow: 2px 2px 2px @static-tooltip-shadow;
    transition: border-color 0.3s linear;
    border-radius: 0;

    .arrow,
    .popover-arrow {
        transition: border-bottom-color 0.3s linear;
    }

    .popover-content {
        padding: 5px 10px;
    }

    &:hover {
        border-color: @static-tooltip-hover-border;

        .arrow,
        .popover-arrow {
            border-bottom-color: @static-tooltip-hover-border;
        }
    }
}

/*
    Angular CDK Overlay (for tooltips and popovers)
*/

.cdk-overlay-container {
    position: fixed;
    z-index: @overlay-z-index;
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.ux-overlay-pane,
.ux-tooltip-pane {
    position: absolute;
}

.ux-tooltip-pane {
    // We don't want mouse events interacting with a tooltip as it can cause flickering.
    // We need to mark it as important to override inline styles added by the CDK
    pointer-events: none !important;
}

/*
    Tooltip styling for timeline chart
*/

.timeline-chart div.tooltip.timeline-tooltip {
    z-index: 1;
    white-space: nowrap;
    background: rgba(0, 0, 0, 1);
    color: white;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, 0);
    transition: all 0.2s ease;
    padding: 0 5px;

    span {
        display: inline-block;
        border-width: 2px;
        width: 100%;
    }

    div.tooltip-caret {
        position: absolute;
        width: 0;
        height: 0;
        border-color: rgba(0, 0, 0, 0);
        border-top-color: rgba(0, 0, 0, 1);
        left: 50%;
        margin-left: -5px;
        border-width: 5px 5px 0;
        border-style: solid;
    }
}

ux-accordion-panel {
    display: block;
}

ux-accordion {
    display: block;
}
ux-card-tabset {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &.bottom {
        flex-direction: column-reverse;
    }

    .card-tabs {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        padding: 4px 0;
    }

    .card-tabs-list {
        position: relative;
        transition: transform 250ms ease-in-out;

        .card-tab {
            position: relative;
            display: inline-block;
            width: 190px;
            height: 170px;
            background-color: @card-tab-bg;
            box-shadow: @card-tab-border 0 1px 8px;
            cursor: pointer;
            margin: 5px;
            border: 1px solid @card-tab-border;
            transition: border 500ms linear;
            padding: 7px 9px;
            outline: none;

            &:hover,
            &:focus {
                border-color: @card-tab-hover-border;
            }

            &.active {
                border-color: @card-tab-active-border;

                &:before,
                &:after {
                    content: '';
                    border: solid transparent;
                    height: 0;
                    width: 0;
                    position: absolute;
                    pointer-events: none;
                }

                &.top {
                    &:before,
                    &:after {
                        bottom: 100%;
                        left: 50%;
                    }

                    &:before {
                        border-bottom-color: @card-tab-active-border;
                        margin-left: -10px;
                        border-width: 10px;
                    }

                    &:after {
                        border-bottom-color: @card-tab-bg;
                        margin-left: -9px;
                        border-width: 9px;
                    }
                }

                &.bottom {
                    &:before,
                    &:after {
                        top: 100%;
                        left: 50%;
                    }

                    &:before {
                        border-top-color: @card-tab-active-border;
                        margin-left: -10px;
                        border-width: 10px;
                    }

                    &:after {
                        border-top-color: @card-tab-bg;
                        margin-left: -9px;
                        border-width: 9px;
                    }
                }
            }
        }
    }

    .card-tabs-paging-btn {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        top: 50%;
        transform: translateY(-50%);
        color: @card-tab-pagination-color;
        cursor: pointer;
        background-color: @card-tab-pagination-bg;
        border-radius: 50%;
        transition: background-color 250ms linear;
        border: none;
        z-index: 2;

        &:focus {
            .native-focus-outline();
        }

        &:hover {
            background-color: @card-tab-pagination-hover-bg;
        }
    }

    .card-tabs-paging-btn-previous {
        left: 10px;
    }

    .card-tabs-paging-btn-next {
        right: 10px;
    }
}
ux-checkbox {
    display: inline-block;

    &:focus {
        outline: none;
    }

    .ux-checkbox {
        display: inline-flex;
        align-items: baseline;
        margin: 0;
        cursor: pointer;

        &:focus {
            outline: none;
        }

        .ux-checkbox-container {
            display: inline-flex;
            flex: none;
            color: transparent;
            font-family: 'ux-icons';
            width: 24px;
            height: 24px;
            border: 1px solid @grey5;
            font-size: 16px;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;

            .ux-icon-checkmark();

            .ux-checkbox-input {
                position: absolute;
                height: 0;
                width: 0;
                outline: none;
                overflow: hidden;
                border: none;
                clip: rect(0 0 0 0);
                margin: -1px;
                padding: 0;
                -webkit-appearance: none;
                -moz-appearance: none;
            }
        }

        &.ux-checkbox-checked,
        &.ux-checkbox-indeterminate {
            .ux-checkbox-container {
                background-color: @accent;
                color: @white;
                border-color: transparent;
            }

            &.ux-checkbox-disabled {
                .ux-checkbox-container {
                    background-color: @grey6;
                }
            }
        }

        &.ux-checkbox-indeterminate {
            .ux-checkbox-container {
                .ux-icon-subtract();
            }
        }

        .ux-checkbox-label {
            margin-left: 7px;

            &:empty {
                margin-left: 0;
            }
        }

        &.ux-checkbox-disabled {
            .ux-checkbox-container {
                border-color: @grey6;
                cursor: default;
            }
        }

        &.ux-checkbox-simplified {
            .ux-checkbox-container {
                border-color: transparent;
                background-color: transparent;
            }

            &.ux-checkbox-checked,
            &.ux-checkbox-indeterminate {
                .ux-checkbox-container {
                    color: @accent;
                    background-color: transparent;
                    border-color: transparent;
                }

                &.ux-checkbox-disabled {
                    .ux-checkbox-container {
                        color: @grey5;
                    }
                }
            }
        }

        &.ux-checkbox-simplified.ux-checkbox-disabled {
            .ux-checkbox-container {
                color: transparent;
            }
        }

        &:hover {
            .ux-checkbox-container {
                border: 2px solid @accent;
            }

            &.ux-checkbox-disabled {
                cursor: default;

                .ux-checkbox-container {
                    border: 1px solid @grey6;
                }

                &.ux-checkbox-simplified {
                    .ux-checkbox-container {
                        color: transparent;
                    }
                }
            }

            &.ux-checkbox-simplified {
                .ux-checkbox-container {
                    color: @grey5;
                    border-color: transparent;
                    border-width: 1px;
                }

                &.ux-checkbox-checked,
                &.ux-checkbox-indeterminate {
                    .ux-checkbox-container {
                        color: @accent;
                    }

                    &.ux-checkbox-disabled {
                        .ux-checkbox-container {
                            color: @grey5;
                        }
                    }
                }
            }
        }

        &.ux-checkbox-focused {
            .ux-checkbox-container {
                .focus-outline();
            }
        }
    }

    &.ux-checkbox-inline {
        display: inline-flex;
        vertical-align: bottom;
    }
}
ux-color-picker {
    display: block;
}

.ux-color-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    font-size: @font-size;

    .ux-color-picker-swatch {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .ux-color-picker-swatch-row {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .ux-color-picker-color {
        border: 5px solid transparent;
        padding: 3px;

        > button {
            width: 32px;
            height: 32px;
            box-shadow: 0 0 6px 2px #ddd;
            display: flex;
            justify-content: center;
            align-items: center;

            > ux-icon {
                display: none;
            }

            &.ux-focus-indicator-active {
                outline: none !important; // required until we move all focus styling to box-shadows
                box-shadow: 0 0 0 3px fade(@primary, 50%);
            }
        }

        &.ux-small > button {
            width: 26px;
            height: 26px;
        }

        &.ux-large > button {
            width: 40px;
            height: 40px;
        }

        &.ux-circle {
            border-radius: 50%;

            > button {
                border-radius: 50%;
            }
        }

        &.ux-selected {
            > button > ux-icon {
                display: block;
                font-weight: 700;
            }
        }
    }

    .ux-color-picker-input-panel {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 4px;
        border-top: 1px solid @grey5;

        .ux-color-picker-input-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin: 12px 8px 4px;

            label {
                margin: 0;
                text-align: center;
                font-weight: bold;
            }

            .ux-color-picker-input-toggle {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                padding-left: 9px;
                padding-right: 5px;
                font-size: inherit;
            }
        }

        .ux-color-picker-input {
            display: flex;
            flex-direction: column;
            flex: 1;
            position: relative;
            min-width: 10rem;
            margin: 4px 8px 8px;

            input {
                width: 100%;
                height: 32px;
                padding: 2px;
                font-size: 16px;
                text-align: center;
            }
        }
    }

    .ux-color-picker-preview {
        width: 32px;
        height: 32px;
        box-shadow: 0 0 6px 2px #ddd;

        &.ux-circle {
            border-radius: 50%;
        }
    }
}

// Additional class for showing a color preview within a button.
.ux-color-picker-button-preview {
    display: inline-block;
    width: 32px;
    margin-right: 8px;
    border: 1px solid #cbcbcb;
}

.ux-color-picker-dropdown {
    padding: 4px;
}

ux-column-sorting {
    .ux-column-sorting {
        padding-left: 5px;
        display: inline-block;
        width: 36px;
        height: 28px;
        vertical-align: bottom;

        .ux-column-sorting-icon {
            display: inline-block;
            vertical-align: bottom;
            vertical-align: -webkit-baseline-middle;
        }

        .ux-column-sorting-number {
            display: inline-block;
            margin: 0;
            color: @grey4;
            opacity: 0;
            transition: 0.5s;
        }
    }

    .ux-column-sorting-hidden {
        display: none;
    }

    .column-sorting-icon-hidden {
        opacity: 0;
    }
}

tr:hover {
    th {
        ux-column-sorting {
            .ux-column-sorting-number {
                opacity: 1;
            }
        }
    }
}

th:focus {
    ux-column-sorting {
        .ux-column-sorting-number {
            opacity: 1;
        }
    }
}

.column-sorting-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-direction: row;

    p {
        margin-bottom: 0;
        align-self: flex-end;
    }
}

ux-dashboard {
    .dashboard-container {
        position: relative;
        display: block;
        width: 100%;

        .dashboard {
            width: 100%;
            height: 100%;
        }

        .position-indicator {
            position: absolute;
            outline: 1px dashed @primary;
            background-color: rgba(@primary, 0.2);
        }
    }
}

ux-dashboard-widget {
    position: absolute;
    display: inline-block;
    overflow: hidden;
    transition: transform 250ms ease-in-out, top 250ms ease-in-out, left 250ms ease-in-out;

    &.dragging {
        transition: transform 250ms ease-in-out;
    }

    &.grabbing {
        transform: translateX(10px) translateY(10px);
        transition: transform 250ms ease-in-out, top 250ms ease-in-out, left 250ms ease-in-out, width 250ms ease-in-out, height 250ms ease-in-out;
    }

    &.resizing {
        transition: none;
    }

    .widget-content {
        width: 100%;
        height: 100%;
    }

    .resizer-handle {
        position: absolute;
        z-index: 2;

        &.handle-top {
            cursor: n-resize;
            height: 10px;
            left: 10px;
            right: 10px;
            top: 0;
        }

        &.handle-top-right {
            cursor: ne-resize;
            width: 10px;
            height: 10px;
            top: 0;
            right: 0;
            z-index: 3;
        }

        &.handle-right {
            cursor: e-resize;
            width: 10px;
            right: 0;
            top: 10px;
            bottom: 10px;
        }

        &.handle-bottom-right {
            cursor: se-resize;
            width: 10px;
            height: 10px;
            right: 0;
            bottom: 0;
            z-index: 3;
        }

        &.handle-bottom {
            cursor: s-resize;
            height: 10px;
            left: 10px;
            right: 10px;
            bottom: 0;
        }

        &.handle-bottom-left {
            cursor: sw-resize;
            width: 10px;
            height: 10px;
            left: 0;
            bottom: 0;
            z-index: 3;
        }

        &.handle-left {
            cursor: w-resize;
            width: 10px;
            left: 0;
            top: 10px;
            bottom: 10px;
        }

        &.handle-top-left {
            cursor: nw-resize;
            width: 10px;
            height: 10px;
            top: 0;
            left: 0;
            z-index: 3;
        }
    }

    &.ux-dashboard-grabbing {
        opacity: 0.5;
    }

    &.ux-dashboard-grabbing-active {
        opacity: 1;
        box-shadow: 0 0 0 5px rgba(0, 115, 231, 0.5);
    }
}
ux-date-range-picker {
    display: inline-flex;
    flex-direction: column;

    .range-header {
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        height: 72px;
        margin: 0 4px;
    }

    .header-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .header-separator {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 64px;
        flex: none;
        color: @primary;
        padding-top: 2px;

        > ux-icon {
            font-size: 1.5rem;
            margin-bottom: 2px;
        }

        .duration {
            text-align: center;
            margin: 0;
        }
    }

    .date-header,
    .select-header {
        margin: 0 0 8px;
        font-weight: 600;
    }

    .time-header {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 600;
        height: 15px;
    }

    .content {
        display: flex;
    }

    // style the child date pickers
    ux-date-time-picker {
        ux-date-time-picker-day-view,
        ux-date-time-picker-month-view,
        ux-date-time-picker-year-view {
            height: 210px;
        }

        ux-date-time-picker-time-view {
            border-bottom: none;
        }

        &:first-of-type {
            margin-right: 8px;
        }

        &:last-of-type {
            margin-left: 8px;
        }

        .calendar-container {
            ux-date-time-picker-day-view .calendar .date-cell .date-button {
                &.active {
                    background-color: rgba(@primary, 0.1);
                    color: @grey1;

                    &:hover {
                        background-color: rgba(@primary, 0.1);
                        color: @grey1;
                    }
                }

                &.range-start {
                    background-color: rgba(@primary, 0.1);
                    box-shadow: inset 2px 0 @primary;

                    &.preview,
                    &.preview.active {
                        color: #999;
                        box-shadow: inset 2px 0 rgba(@primary, 0.5);
                    }
                }

                &.range-between {
                    background-color: rgba(@primary, 0.05);
                }

                &.range-end {
                    background-color: rgba(@primary, 0.1);
                    box-shadow: inset -2px 0 @primary;

                    &.preview,
                    &.preview.active {
                        color: #999;
                        box-shadow: inset -2px 0 rgba(@primary, 0.5);
                    }
                }

                &.range-start.range-end {
                    box-shadow: inset -2px 0 @primary, inset 2px 0 @primary;

                    &.preview,
                    &.preview.active {
                        color: #999;
                        box-shadow: inset -2px 0 rgba(@primary, 0.5), inset 2px 0 rgba(@primary, 0.5);
                    }
                }
            }
        }
    }
}
ux-date-time-picker {
    display: block;

    .calendar-container {
        padding: 4px;
    }

    .now-button {
        width: 100%;
        padding: 4px 5px;
        text-align: center;
        height: 30px;
        border: none;
        background-color: transparent;
        cursor: pointer;
        outline: none;
        color: @date-picker-today-btn-color;

        &:hover:not(:disabled) {
            background-color: @date-picker-today-btn-hover-bg;
        }

        &:focus {
            .native-focus-outline();
        }

        &:disabled {
            color: #bdbec0;
            cursor: default;
        }
    }
}
ux-date-time-picker-day-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    .calendar {
        width: 100%;

        .weekday {
            text-align: center;
            min-width: 30px;
            height: 30px;
            border: none;
            padding: 4px 5px;
            color: @date-picker-today-btn-color;
            font-size: 14px;
        }

        .date-cell {
            min-width: 30px;
            height: 30px;
        }

        .date-button {
            text-align: center;
            width: 100%;
            height: 100%;
            border: none;
            padding: 4px 5px;
            cursor: pointer;
            font-size: 14px;
            background-color: transparent;

            &:hover:not(:disabled) {
                background-color: @date-picker-hover-bg;
            }

            &:disabled {
                color: #bdbec0;
                cursor: default;
            }

            &.current,
            &.current.preview {
                color: @date-picker-today-color;
                background-color: @date-picker-today-bg;

                &:hover {
                    background-color: @date-picker-range-today-hover-bg;
                }
            }

            &.active,
            &.active.current,
            &.active.preview {
                background-color: @date-picker-active-bg;
                color: @date-picker-active-color;

                &:hover {
                    background-color: @date-picker-active-bg;
                    color: @date-picker-active-color;
                }
            }

            &.preview {
                color: @date-picker-disabled-hover-bg;

                &:disabled {
                    color: #bdbec0;
                }
            }
        }
    }
}
ux-date-time-picker-header {
    .header {
        display: flex;
        width: 100%;
        height: 30px;
        align-items: center;

        .header-navigation {
            display: inline-flex;
            flex: none;
            font-size: 14px;
            padding: 4px 5px;
            width: 30px;
            height: 30px;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: @date-picker-today-btn-color;
            border: none;
            background-color: transparent;

            &:focus {
                .native-focus-outline();
            }

            &:hover:not(:disabled) {
                background-color: @date-picker-today-btn-hover-bg;
            }

            &:disabled {
                cursor: default;
                color: #bdbec0;
            }
        }

        .header-title {
            display: flex;
            flex: 1;
            color: @date-picker-today-btn-color;
            font-size: 14px;
            font-weight: 700;
            padding: 4px 5px;
            height: 30px;
            justify-content: center;
            align-items: center;
            border: none;
            background-color: transparent;

            &:focus {
                .native-focus-outline();
            }

            &.active {
                cursor: pointer;

                &:hover {
                    background-color: @date-picker-today-btn-hover-bg;
                }
            }
        }
    }
}
ux-date-time-picker-month-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    .calendar {
        width: 100%;
        padding: 4px 5px;

        .calendar-row {
            display: flex;

            .calendar-item {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                min-width: 45px;
                width: 24%;
                height: 54px;
                line-height: 54px;
                margin: 2px;
                cursor: pointer;
                font-size: 14px;
                border: none;
                background-color: transparent;
                padding: 0;

                &:first-of-type {
                    margin-left: 0;
                }

                &:last-of-type {
                    margin-right: 0;
                }

                &:hover {
                    background-color: @date-picker-today-btn-hover-bg;
                }

                &:disabled {
                    color: #bdbec0;
                    cursor: default;

                    &:hover:not(.active):not(.current) {
                        background-color: transparent;
                    }
                }

                &.active {
                    background-color: @date-picker-active-bg;
                    color: @date-picker-active-color;
                }
            }
        }
    }
}
ux-date-time-picker-time-view {
    display: flex;
    padding: 12px 4px;
    margin-top: 6px;
    border-top: 1px solid @date-picker-dropdown-border;
    border-bottom: 1px solid @date-picker-dropdown-border;
    align-items: center;
    justify-content: center;

    ux-time-picker {
        &:last-child {
            margin-right: 0;
        }

        .time-picker-meridian {
            margin-left: 22px;
        }
    }

    .time-zone-picker {
        display: inline-flex;
        flex-direction: column;
        flex: none;
        margin-left: 22px;

        .time-zone-spinner {
            width: 60px;
        }

        .time-zone-select {
            width: 72px;
            font-size: 14px;
            padding: 0;
            text-align: center;

            &:focus {
                .native-focus-outline();
            }
        }
    }
}
ux-date-time-picker-year-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;

    .calendar {
        width: 100%;
        padding: 4px 5px;

        .calendar-row {
            display: flex;

            .calendar-item {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                min-width: 45px;
                width: 24%;
                height: 54px;
                line-height: 54px;
                margin: 2px;
                cursor: pointer;
                font-size: 14px;
                border: none;
                background-color: transparent;
                padding: 0;

                &:first-of-type {
                    margin-left: 0;
                }

                &:last-of-type {
                    margin-right: 0;
                }

                &:hover {
                    background-color: @date-picker-today-btn-hover-bg;
                }

                &:disabled {
                    color: #bdbec0;
                    cursor: default;

                    &:hover:not(.active):not(.current) {
                        background-color: transparent;
                    }
                }

                &.active {
                    background-color: @date-picker-active-bg;
                    color: @date-picker-active-color;
                }
            }
        }
    }
}
ux-ebox {
    display: block;

    .ux-ebox-header {
        position: relative;
        background-color: @white;
        margin-bottom: 0;
        overflow: hidden;
        padding: 14px 15px 7px;

        h1, h2, h3, h4, h5, h6 {
            margin-top: 0;
        }
    }

    .ux-ebox-content {
        background-color: @white;
        padding: 15px 20px 20px;
        border-color: @grey6;
        border-image: none;
        border-style: solid solid none;
        border-width: 1px 0;
    }
}
ux-facet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 43px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid @grey6;
    outline: none;
    cursor: pointer;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    &:focus {
        background-color: @grey7;
    }

    .facet-header-title {
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        word-break: break-all;
    }
}
ux-facet-check-list {
    .facet-check-list-container {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;

        &:focus {
            outline: none;
        }

        .facet-check-list-item {
            display: flex;
            flex: none;
            height: 32px;
            align-items: center;
            outline: none;
            cursor: pointer;
            min-width: 100%;
            max-width: 100%;

            &.ux-focus-indicator-active {
                .focus-outline();
            }

            ux-checkbox {
                pointer-events: none;
            }

            .facet-check-list-item-title {
                margin-right: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                white-space: nowrap;
            }

            .facet-check-list-item-count {
                color: @grey4;
            }

            &:hover {
                background-color: @grey7;
            }

            &.disabled {
                opacity: 0.5;
            }

            &.facet-active {
                &:hover,
                &:focus {
                    opacity: 1;
                }
            }
        }

        // Show scrollbars
        &.facet-check-list-scrollbar {
            max-height: 233px;
            overflow-y: auto;

            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            &::-webkit-scrollbar-track {
                background-color: transparent;
            }

            &::-webkit-scrollbar-thumb {
                border: none;
                background-color: transparent;
            }

            &:hover::-webkit-scrollbar-thumb,
            &.facet-check-list-scrollbar-focused::-webkit-scrollbar-thumb {
                border-radius: 6px;
                background-color: @grey4;
            }
        }
    }
}
ux-facet-container {
    display: block;
    background-color: @white;
    padding: 10px;

    .facets-selected-container {
        margin-bottom: 20px;

        .facets-selected-header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;

            .facets-selected-header-label {
                flex: 1;
                font-weight: 700;
            }

            .facets-selected-clear-graphic {
                .dark-grey {
                    fill: @grey2;
                }

                .light-grey {
                    fill: @grey4;
                }
            }

            .btn-icon {
                height: 28px;
            }
        }

        .facets-selected-list {
            display: flex;
            flex-wrap: wrap;

            .facet-selected-tag {
                margin-right: 5px;
                margin-bottom: 5px;
                cursor: pointer;
                outline: none;
                max-width: 100%;
                color: @tag-input-tag-color;
                background-color: @tag-input-tag-bg;
                border: 1px solid @tag-input-tag-border;
                border-radius: 1px;
                padding: 0 5px;
                white-space: nowrap;

                &.ux-reorderable-moving {
                    opacity: 0.5;
                }

                .facet-selected-tag-label {
                    word-break: break-all;
                    pointer-events: none;
                }

                .facet-selected-remove-btn {
                    border: none;
                    background: none;

                    &:focus {
                        .native-focus-outline();
                    }
                }

                ux-icon {
                    font-size: 80%;
                    opacity: 0.7;

                    &:hover {
                        opacity: 1;
                    }
                }

                &:focus {
                    color: @tag-input-tag-active-color;
                    background-color: @tag-input-tag-active-bg;
                    border-color: @tag-input-tag-active-border;
                    outline: none;
                }
            }
        }

        .facets-selected-none-label {
            margin-bottom: 0;
            color: @grey4;
            height: 29px;
        }
    }
}

.facet-drag-item.cdk-drag-preview {
    margin-right: 5px;
    margin-bottom: 5px;
    outline: none;
    max-width: 100%;
    color: @tag-input-tag-color;
    background-color: @tag-input-tag-bg;
    border: 1px solid @tag-input-tag-border;
    border-radius: 1px;
    padding: 0 5px;
    white-space: nowrap;

    .facet-selected-remove-btn {
        display: none;
    }
}

.facet-drag-item.cdk-drag-placeholder {
    outline: none;
    max-width: 100%;
    color: @tag-input-tag-color;
    background-color: @tag-input-tag-bg;
    border-radius: 1px;
    padding: 0 5px;
    white-space: nowrap;

    .facet-selected-remove-btn {
        border: none;
        background: none;

        &:focus {
            .native-focus-outline();
        }
    }
}

ux-facet-typeahead-list {
    .facet-typeahead-list-container {
        .facet-typeahead-list-control {
            position: relative;
            padding: 10px 0;
            border-top: 1px solid @grey7;

            ux-typeahead {
                top: ~'calc(100% - 10px)';

                .ux-typeahead-options {
                    li {
                        padding: 6px 20px;

                        .facet-typeahead-list-option {
                            margin-bottom: 0;

                            .facet-typeahead-highlighted {
                                color: @grey1;
                            }

                            .facet-typeahead-list-option-count {
                                color: @grey4;
                            }
                        }
                    }
                }
            }
        }

        .facet-typeahead-list-selected-container {
            margin-top: 5px;

            .facet-typeahead-list-selected-option {
                display: flex;
                flex: none;
                height: 32px;
                align-items: center;
                outline: none;
                cursor: pointer;
                max-width: 100%;

                &:hover {
                    background-color: @grey7;
                }

                &.ux-focus-indicator-active {
                    .focus-outline();
                }

                ux-checkbox {
                    pointer-events: none;
                }

                .facet-typeahead-list-selected-option-title {
                    margin-right: 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    white-space: nowrap;
                    cursor: pointer;
                }

                .facet-typeahead-list-selected-option-count {
                    color: @grey4;
                    cursor: pointer;
                }
            }
        }
    }
}
ux-filter-container {
    display: flex;
    align-items: center;

    .btn-icon {
        height: 28px;
    }

    .filter-selected-clear-graphic {
        .dark-grey {
            fill: @grey2;
        }

        .light-grey {
            fill: @grey4;
        }
    }

    .filter-header {
        font-weight: 400;
    }

    .table-filter-clear {
        padding: 7px 12px;
    }
}
ux-filter-dropdown {
    .filter-dropdown {
        padding: 6px;
        padding-right: 7px;
        padding-left: 6px;

        &:hover {
            background-color: @filter-dropdown-hover-bg;
            border-radius: 0;
            border-color: @filter-dropdown-hover-border;
            text-decoration: none;
        }

        &:focus.ux-focus-indicator.ux-focus-indicator-active {
            background-color: @filter-dropdown-focus-bg;
            border-radius: 0;
            border-color: @filter-dropdown-focus-border;
            text-decoration: none;
        }

        &.active {
            font-weight: 600;
        }

        ux-icon {
            font-size: 0.625rem;
        }
    }
}

.ux-filter-menu {
    .ux-menu-item {
        padding-left: 10px;

        ux-icon {
            width: 16px;
        }

        .filter-dropdown-title {
            padding-left: 10px;
        }
    }
}
ux-filter-dynamic {
    .filter-dropdown {
        padding: 6px;
        padding-right: 7px;
        padding-left: 6px;

        &:hover {
            background-color: @filter-dropdown-hover-bg;
            border-radius: 0;
            border-color: @filter-dropdown-hover-border;
            text-decoration: none;
        }

        &:focus.ux-focus-indicator.ux-focus-indicator-active {
            background-color: @filter-dropdown-focus-bg;
            border-radius: 0;
            border-color: @filter-dropdown-focus-border;
            text-decoration: none;
        }

        &.active {
            font-weight: 600;
        }

        ux-icon {
            font-size: 0.625rem;
        }
    }
}

.ux-dynamic-filter-menu {
    width: 220px;
    box-shadow: 0 0 3px @grey4;

    .ux-menu-item {
        padding-left: 10px;

        ux-icon {
            width: 16px;
        }

        .filter-dropdown-title {
            padding-left: 10px;
        }
    }

    .typeahead-box {
        padding: 10px;

        ux-typeahead {
            position: static;
            box-shadow: none;
            padding-bottom: 0;
            margin-bottom: 0;

            .ux-typeahead-options {
                li {
                    font-size: 1rem;
                    padding: 6px 10px;

                    .filter-typeahead-highlighted {
                        color: @grey1;
                    }
                }
            }

            .ux-typeahead-no-options {
                font-size: 1rem;
            }
        }
    }
}
ux-flippable-card {
    perspective: 1000px;
    transform-style: preserve-3d;
    display: inline-block;

    &:focus {
        .native-focus-outline();
    }

    .ux-flipper.ux-flip-card {
        transform: none;
    }

    .ux-flipper.ux-flip-card .ux-flippable-card-back {
        transform: rotateY(0deg);
    }

    .ux-flipper.ux-flip-card .ux-flippable-card-front {
        transform: rotateY(180deg);
    }

    &.vertical {
        position: relative;
    }

    &.vertical .ux-flippable-card-back {
        transform: rotateX(180deg);
    }

    &.vertical .ux-flipper.ux-flip-card {
        transform: none;
    }

    &.vertical .ux-flipper.ux-flip-card .ux-flippable-card-back {
        transform: rotateX(0deg);
    }

    &.vertical .ux-flipper.ux-flip-card .ux-flippable-card-front {
        transform: rotateX(-180deg);
    }

    /* flip speed */
    .ux-flipper {
        transition: 0.6s;
        transform-style: preserve-3d;
        position: relative;
    }

    .hover-flipper .ux-flippable-card-front,
    .hover-flipper .ux-flippable-card-back {
        transition-delay: 0.3s;
    }

    /* hide back of pane during swap */
    .ux-flippable-card-front,
    .ux-flippable-card-back {
        backface-visibility: hidden;
        transition: 0.6s;
        transform-style: flat;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0 2px 10px @grey4;
        background-color: @white;
    }

    /* front pane, placed above back */
    .ux-flippable-card-front {
        z-index: 2;
        transform: rotateY(0deg);
    }

    /* back, initially hidden pane */
    .ux-flippable-card-back {
        transform: rotateY(-180deg);
    }
}
.floating-action-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    flex: none;

    &.button-secondary {
        box-shadow: @floating-action-child-btn-shadow;

        &:hover {
            box-shadow: @floating-action-child-btn-hover-shadow;
        }
    }

    .floating-action-button-icon {
        line-height: 1;
        transform: translateX(0.5px) translateY(-0.5px);
    }
}
@fab-button__size: 30px;
@fab-button__margin: 12px;

ux-floating-action-buttons, .floating-action-buttons {
    position: relative;
    display: inline-block;

    .floating-action-button-list {
        position: absolute;
        display: flex;

        &.top {
            flex-direction: column-reverse;
            bottom: @fab-button__size + @fab-button__margin;
        }

        &.right {
            flex-direction: row;
            left: @fab-button__size + @fab-button__margin;
        }

        &.bottom {
            flex-direction: column;
            top: @fab-button__size + @fab-button__margin;
        }

        &.left {
            flex-direction: row-reverse;
            right: @fab-button__size + @fab-button__margin;
        }

        &.top, &.bottom {
            > * {
                margin: @fab-button__margin 0;
            }
        }

        &.left, &.right {
            top: 0;

            > * {
                margin: 0 @fab-button__margin;
            }
        }
    }
}

/*
    AngularJS specific styling
*/
.floating-action-buttons {
    .floating-action-button-list {
        transition: opacity 250ms ease-in-out;

        &.collapsed {
            opacity: 0;
            pointer-events: none;
        }

        &.expanded {
            opacity: 1;
        }
    }
}
ux-hierarchy-bar {
    display: flex;
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid @organization-chart-hierarchy-bar-border;
    box-shadow: 0 0 5px @organization-chart-hierarchy-bar-border;
    align-items: center;
    padding: 0 25px;
    overflow: hidden;
}
ux-hierarchy-bar-node {
    display: block;
    flex: none;

    .hierarchy-bar-node {
        display: inline-flex;
        align-items: center;
        margin-left: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        cursor: pointer;
        max-width: 100%;

        &.hierarchy-bar-node-readonly {
            cursor: default;
        }
    }

    .hierarchy-bar-node-content {
        display: inline-flex;
        align-items: center;
        border: none;
        background: transparent;
        padding: 0;
        width: 100%;

        &:hover > .hierarchy-bar-node-arrow-icon-dropdown:not(.readonly-arrow) {
            color: @primary;
        }

        &:focus > .hierarchy-bar-node-arrow-icon-dropdown:not(.readonly-arrow) {
            color: @primary;
        }

        &:focus {
            .native-focus-outline;
        }
    }

    .hierarchy-bar-node-icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: none;
        max-width: 20px;
        max-height: 18px;
        margin-right: 5px;
    }

    .hierarchy-bar-node-title {
        color: @organization-chart-hierarchy-bar-color;
        white-space: nowrap;
    }

    &:last-of-type {
        .hierarchy-bar-node-title {
            color: @organization-chart-hierarchy-bar-active-color;
            font-weight: 600;
            white-space: nowrap;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .hierarchy-bar-node-arrow, .hierarchy-bar-node-arrow-icon-dropdown {
        color: @organization-chart-hierarchy-bar-arrow;
        margin-left: 5px;
        transition: color 250ms ease-in-out;
        border: none;
        background: transparent;
        padding: 0;

        &:hover:not(:disabled):not(.readonly-arrow) {
            color: @primary;
        }

        &:focus {
            color: @primary;
            .native-focus-outline;
        }
    }
}

.hierarchy-bar-popover {
    border-radius: 0;

    .popover-content {
        padding: 0;
    }

    .hierarchy-bar-node-list {
        margin: 0;
        padding: 0;
        list-style-type: none;

        &.hierarchy-bar-node-list-separator {
            ux-hierarchy-bar-popover-item {
                border-bottom: 1px solid #e2e2e2;

                &:last-of-type {
                    border-bottom: none;
                }
            }
        }
    }

    .hierarchy-bar-loading-indicator {
        display: flex;
        align-items: center;
        padding: 6px 20px;
        font-size: 1rem;
        color: @organization-chart-hierarchy-bar-color;
        cursor: pointer;
    }

    .hierarchy-bar-loading-icon {
        flex: none;
        margin-right: 5px;
        min-width: 16px;
        display: inline-flex;
        justify-content: center;
    }
}
ux-hierarchy-bar-popover-item {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    font-size: 1rem;
    color: @organization-chart-hierarchy-bar-color;
    cursor: pointer;

    &:hover {
        background-color: @organization-chart-hierarchy-bar-popover-hover;
    }

    &:focus.ux-focus-indicator-active {
        background-color: @organization-chart-hierarchy-bar-popover-hover;
        .focus-outline;
    }

    .hierarchy-bar-node-icon {
        flex: none;
        max-width: 20px;
        max-height: 18px;
        margin-right: 5px;
        min-width: 16px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .hierarchy-bar-node-title {
        color: @organization-chart-hierarchy-bar-color;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }
}
ux-hierarchy-bar-standard {
    display: flex;
    flex: 1;
    max-width: 100%;

    .hierarchy-bar-addons {
        display: inline-flex;
        flex: none;
    }

    ux-hierarchy-bar-node:last-of-type {
        .hierarchy-bar-node-title {
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .hierarchy-bar-nodes {
        position: relative;
        display: flex;
        flex: 1;
        height: 100%;
        overflow: hidden;
    }

    .hierarchy-bar-overflow-indicator {
        color: @primary;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0.25rem 0 0.75rem;
        min-width: 70px;

        .overflow-button {
            margin-top: 3px;
            border: none;
            background: transparent;
            padding: 0 2px;

            &:focus {
                .native-focus-outline;
            }

            > ux-icon {
                font-size: 1.5rem;
            }
        }

        .hierarchy-bar-node-arrow {
            display: inline-flex;
            color: @organization-chart-hierarchy-bar-arrow;
            margin-left: 5px;
            transition: color 250ms ease-in-out;
            border: none;
            background: transparent;
            padding: 0;
            height: 16px;

            &:hover:not(:disabled) {
                color: @primary;
            }

            &:focus:not(:disabled) {
                color: @primary;
                .native-focus-outline;
            }
        }
    }
}

ux-hierarchy-bar-collapsed {
    display: flex;
    flex: 1;
    max-width: 100%;

    .hierarchy-bar-addons {
        display: inline-flex;
        flex: none;
    }

    .hierarchy-bar-nodes {
        position: relative;
        display: flex;
        flex: 1;
        height: 100%;
        overflow: hidden;

        &.hierarchy-bar-nodes-overflow {
            ux-hierarchy-bar-node {
                flex: 1 1 auto;
                overflow: hidden;

                .hierarchy-bar-node {
                    .hierarchy-bar-node-title {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: break-all;
                    }

                    .hierarchy-bar-node-content {
                        max-width: ~'calc(100% - 5px)';
                    }

                    &.hierarchy-bar-node-child-indicator {
                        .hierarchy-bar-node-content {
                            max-width: ~'calc(100% - 22px)';
                        }
                    }
                }
            }
        }
    }

    .hierarchy-bar-overflow {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0.25rem 0 0.75rem;
        color: @primary;
        min-width: 70px;

        .hierarchy-bar-overflow-container {
            margin-right: 7px;

            .overflow-button {
                border: none;
                background: transparent;
                padding: 0 2px;

                &:focus {
                    .native-focus-outline;
                }

                > ux-icon {
                    font-size: 1.5rem;
                }
            }
        }

        .hierarchy-bar-node-arrow {
            display: inline-flex;
            color: @organization-chart-hierarchy-bar-arrow;
            margin-left: 5px;
            transition: color 250ms ease-in-out;
            border: none;
            background: transparent;
            padding: 0;
            height: 16px;

            &:hover:not(:disabled) {
                color: @primary;
            }

            &:focus:not(:disabled) {
                color: @primary;
                .native-focus-outline;
            }
        }
    }
}

.ux-side-panel.ux-item-display-panel {
    &.open {
        > .ux-side-panel-host {
            &:not(.box-shadow) {
                border-left: none;
                box-shadow: none;
            }
        }
    }

    > .ux-side-panel-host {
        .ux-side-panel-header {
            &:not(.item-display-panel-shadow) {
                &:before {
                    display: none;
                }
            }
        }

        .ux-side-panel-content {
            padding: 0;
        }

        .ux-side-panel-footer {
            padding: 0;
        }
    }
}

.item-display-panel-inline-container {
    display: flex;
    overflow-x: hidden;
}
ux-marquee-wizard {
    display: flex;
    height: 100%;
    min-height: 500px;

    .as-split-gutter {
        background-color: @marquee-modal-side-panel-bg !important;
    }

    .marquee-wizard-side-panel {
        display: flex;
        flex-direction: column;
        flex: none;
        width: 240px;
        background-color: @marquee-modal-side-panel-bg;

        &.marquee-wizard-side-panel-resize {
            height: 100%;
            width: 100%;
        }

        .marquee-wizard-description-container {
            padding: 20px;
            color: @marquee-wizard-step-color;
        }

        .marquee-wizard-steps {
            display: flex;
            flex-direction: column;
            flex: 1;
            list-style-type: none;
            padding: 0;
            margin-top: 0;
            overflow-y: auto;

            .marquee-wizard-step {
                display: flex;
                color: @marquee-wizard-step-color;
                padding: 8px 20px;
                cursor: default;
                transition: background-color 0.3s linear;
                align-items: center;

                &.active {
                    background-color: rgba(0, 0, 0, 0.2);
                }

                &.active,
                &.visited {
                    cursor: pointer;
                }

                &.invalid {
                    background-color: @marquee-wizard-step-error-bg;
                }

                .marquee-wizard-step-icon {
                    margin-right: 10px;
                    flex: none;
                }

                .marquee-wizard-step-title {
                    flex: 1;
                    pointer-events: none;
                }

                .marquee-wizard-step-status {
                    flex: none;
                }

                &:focus {
                    outline: none;

                    &.cdk-keyboard-focused {
                        .focus-outline();
                    }
                }
            }
        }
    }

    .marquee-wizard-content-panel {
        display: flex;
        flex-direction: column;
        flex: 1;
        background-color: @marquee-modal-bg;

        &.marquee-wizard-content-panel-resize {
            height: 100%;
        }

        .marquee-wizard-content {
            flex: 1;
            padding: 35px;
        }
    }
}
ux-media-player-controls {
    position: relative;
    display: flex;
    padding: 2px 10px;
    align-items: center;
    justify-content: center;
    height: 40px;

    ux-icon {
        flex: none;
        cursor: pointer;
        padding: 2px 5px;
        font-size: 18px;
        transition: color 0.3s ease-in-out;

        &:hover {
            color: @mediaplayer-controls-btn-hover-color;
        }
    }

    .control-button {
        fill: @mediaplayer-controls-btn-color;
        margin: 0 10px;
        cursor: pointer;
        transition: fill 0.3s ease-in-out;
        border: none;
        background-color: transparent;
        padding: 0;
        line-height: 0;

        &:hover {
            fill: @mediaplayer-controls-btn-hover-color;
        }

        &:focus {
            .native-focus-outline();
        }
    }

    .actions-list {
        position: absolute;
        display: inline-flex;
        right: 10px;
        top: 9px;
    }

    .action-button-container {
        position: relative;
        margin-right: 7px;

        &:last-of-type {
            margin-right: 0;
        }
    }

    .action-button {
        color: @mediaplayer-controls-btn-color;
        transition: fill 0.3s ease-in-out;
        border: none;
        background-color: transparent;
        padding: 0;
        line-height: 0;

        &:hover {
            color: @mediaplayer-controls-btn-hover-color;
        }

        &:focus {
            .native-focus-outline();
        }
    }

    .spacer {
        flex: 1;
    }

    &.quiet {
        ux-icon {
            color: @mediaplayer-controls-quiet-color;

            &:hover {
                color: @mediaplayer-controls-quiet-hover-color;
            }
        }

        .control-button {
            fill: @mediaplayer-controls-quiet-color;

            &:hover {
                fill: @mediaplayer-controls-quiet-hover-color;
            }
        }

        .volume-container {
            .volume-slider-container {
                .volume-slider {
                    background-color: @mediaplayer-volume-slider-quiet-track-upper;

                    .volume-track-lower {
                        background-color: @mediaplayer-volume-slider-quiet-track-lower;
                    }

                    .volume-slider-thumb {
                        background-color: @mediaplayer-volume-slider-quiet-thumb-bg;
                        border: 1px solid @mediaplayer-volume-slider-quiet-thumb-border;
                    }
                }
            }
        }
    }

    .volume-container {
        position: absolute;
        height: 28px;
        top: 9px;
        left: 10px;

        .volume-slider-container {
            position: absolute;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 110px;
            top: 0;

            .volume-slider-icon {
                display: flex;
                justify-content: center;
                align-content: center;
                padding: 1px 0 0;
                border: none;
                background-color: transparent;
                width: 27px;
                float: none;

                &:focus {
                    .native-focus-outline();
                }
            }

            .volume-slider-node {
                flex: 1;
                margin-top: 1px;
                margin-left: 10px;

                ux-slider {
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out;
                }
            }

            &.active {
                ux-slider {
                    opacity: 1;
                }
            }
        }
    }

    .media-player-subtitles-popover {
        left: auto;
        right: -35px;

        .popover-title {
            background-color: #fff;
            font-weight: 400;
            font-size: 1rem;
        }

        &.top > .arrow {
            left: auto;
            right: 37px;
        }

        .popover-content {
            padding: 7px;
            max-width: none;

            .subtitles-list {
                margin: 0;
                padding: 0;
                list-style-type: none;
                min-width: 150px;
                font-size: 1rem;

                .subtitles-list-item {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    height: 32px;
                    padding: 0 10px;
                    white-space: nowrap;

                    .subtitles-list-item-checkmark {
                        color: @accent;
                        opacity: 0;
                    }

                    &:hover {
                        background-color: @grey7;
                    }

                    &:focus {
                        .native-focus-outline();
                    }

                    &.active {
                        .subtitles-list-item-checkmark {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
}
ux-media-player-timeline {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 30px;

    .current-time,
    .duration-time {
        margin: 0;
        color: @mediaplayer-timeline-text;
        padding: 0 10px;
    }

    .timeline-bar {
        position: relative;
        flex: 1;
        height: 10px;
        background-color: @mediaplayer-timeline-bg;
        cursor: pointer;

        &:focus {
            .native-focus-outline();
        }

        .buffered-bar {
            position: absolute;
            height: 100%;
            background-color: @mediaplayer-timeline-buffered-bg;
            pointer-events: none;
        }

        .media-progress-bar {
            position: absolute;
            height: 100%;
            background-color: @mediaplayer-timeline-track;

            .media-progress-bar-thumb {
                position: absolute;
                right: 0;
                width: 20px;
                height: 20px;
                background-color: #fff;
                border-radius: 50%;
                border: 1px solid #ddd;
                transform: translateX(50%) translateY(-28%);
                z-index: 10000;
                opacity: 0;
                display: none;

                &:hover, &:active {
                    opacity: 1;
                }
            }
        }

        .scrub-handle {
            position: absolute;
            width: 2px;
            background-color: @mediaplayer-timeline-handle;
            height: 100%;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            pointer-events: none;
        }

        .tooltip {
            pointer-events: none;
        }

        &:hover, &:active, &:hover:active {
            .scrub-handle {
                opacity: 1;

                &.scrub-handle-hidden {
                    opacity: 0;
                }
            }
        }
    }

    // Quiet Mode Styling
    &.quiet {
        .current-time,
        .duration-time {
            color: @mediaplayer-timeline-quiet-text;
        }

        .timeline-bar {
            background-color: @mediaplayer-timeline-quiet-bg;

            .buffered-bar {
                background-color: @mediaplayer-timeline-quiet-buffered-bg;
            }

            .media-progress-bar {
                background-color: @mediaplayer-timeline-quiet-track;
            }

            .scrub-handle {
                background-color: @mediaplayer-timeline-quiet-handle;
            }
        }
    }
}

.ux-media-player-timeline-tooltip {
    pointer-events: none;
}
ux-media-player {
    position: relative;
    display: block;
    box-shadow: @mediaplayer-shadow;
    outline: none;
    background-color: #101010; // Not a variable - matches standard video background color

    &.video {
        height: 500px;
    }

    &.fullscreen {
        width: 100vw;
        height: 100vh;
        border: none;
    }

    &.quiet {
        .control-bar {
            position: absolute;
            background-color: @mediaplayer-controls-quiet-bg;
            bottom: 0;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        &.hover {
            .control-bar {
                opacity: 1;
            }
        }

        .video-player-container {
            height: 100%;
        }
    }

    .player-container {
        height: 100%;

        &:focus {
            outline: none;
        }
    }

    .video-player-container {
        position: relative;
        height: ~'calc(100% - 71px)';

        .video-player {
            width: 100%;
            height: 100%;

            &:focus {
                outline: none;
            }
        }

        .video-overlay {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;

            .play-graphic {
                width: 100px;
                height: 100px;

                .play-circle {
                    fill: @mediaplayer-play-btn-bg;
                }

                .play-triangle {
                    fill: @mediaplayer-play-btn-color;
                }
            }

            &.playing {
                .play-graphic {
                    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
                    opacity: 0;
                    transform: scale(1.2);
                }
            }
        }
    }

    .audio-player {
        display: flex;
        flex-direction: column;
        background-color: @mediaplayer-audio-bg;
        align-items: center;
        padding: 18px 18px 16px;
        border-bottom: 1px solid @mediaplayer-audio-border;
        box-shadow: @mediaplayer-audio-shadow;

        .audio-file-name {
            color: @mediaplyer-audio-title;
            margin-bottom: 0;
            margin-top: 6px;
        }

        .audio-file-format {
            color: @mediaplyer-audio-subtitle;
            margin-bottom: 0;
        }

        .audio-file-size {
            color: @mediaplyer-audio-subtitle;
            margin-bottom: 0;
        }
    }

    .control-bar {
        width: 100%;
        min-height: 71px;
        background-color: @mediaplayer-controls-bg;

        &.control-bar-visible {
            opacity: 1;
        }
    }
}

.ux-menu {
    display: inline-block;
    background-color: @dropdown-bg;
    color: @dropdown-color;
    box-shadow: 0 0 3px @dropdown-shadow;
    border-radius: 2px;
    transform-origin: top center;
    z-index: @dropdown-menu-z-index;
    min-width: 160px;
    overflow: hidden;
    margin-top: 5px;

    &.ux-sub-menu {
        margin-top: 0;
    }
}
ux-menu-divider {
    display: block;
    height: 1px;
    border-bottom: 1px solid @dropdown-divider;
    margin: 5px 0;
}
.ux-menu-item {
    display: flex;
    align-items: center;
    line-height: 25px;
    padding: 6px 20px;
    border: none;
    background-color: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;

    &:hover,
    &:focus.ux-focus-indicator.ux-focus-indicator-active {
        background-color: @dropdown-hover-bg;
        color: @dropdown-hover-color;
        text-decoration: none;
    }

    &.disabled {
        background-color: transparent;
        cursor: not-allowed;
        color: @btn-primary-disabled-color;
    }

    // support existing dropdown styling classes
    .dropdown-menu-icon {
        flex: 0 0 auto;
        width: 20px;
        text-align: center;
        margin-right: 10px;
    }

    .dropdown-menu-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dropdown-menu-right {
        text-align: right;
    }

    .dropdown-menu-hint {
        color: @dropdown-menu-hint;
        font-size: 80%;
        margin-left: 16px;
    }
}
ux-nested-donut-chart {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;

    .ux-nested-donut-chart-content {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }

    .ux-nested-donut-chart-tooltip {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10101;
        pointer-events: none;

        > ux-tooltip {
            position: absolute;
            transform: translateX(-50%) translateY(-100%);

            .ux-nested-donut-chart-tooltip-content {
                white-space: nowrap;
            }
        }
    }
}
ux-notification-list {
    position: fixed;
    width: 300px;
    z-index: @notications-z-index;
    transition: bottom 250ms ease-in-out;

    &.top-right {
        top: 12px;
        right: 12px;
    }

    &.top-left {
        top: 12px;
        left: 12px;
    }

    &.bottom-right {
        bottom: 0;
        right: 12px;
    }

    &.bottom-left {
        bottom: 0;
        left: 12px;
    }

    .notification {
        position: absolute;
        width: 300px;
        padding: 17px 0;
        margin: 0 0 10px;
        background-color: #7b63a3;
        color: #fff;
        border-radius: 3px;
        flex: none;
        transition: top 250ms ease-in-out;

        .dismiss {
            position: absolute;
            color: @notification-color;
            opacity: 1;
            font-size: 0.8125rem;
            right: 5px;
            top: 3px;
            cursor: pointer;
            transition: opacity 0.3s linear;
            background-color: transparent;
            border: none;

            &:hover {
                opacity: 0.8;
            }
        }
    }
}

ux-number-picker,
ux-number-picker-inline {
    display: flex;
    flex-direction: row;
    height: 34px;

    &.ux-number-picker-invalid:not(.ng-invalid) {
        > .number-picker-input {
            border-color: @critical;
        }
    }

    &.ng-invalid {
        > .number-picker-input {
            border-color: @critical;
        }
    }

    > .number-picker-input {
        flex: none;
        text-align: right;
        -moz-appearance: textfield;
        width: ~'calc(100% - 27px)';
        height: 34px;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        &:read-only {
            color: @form-control-color;
            background-color: @form-control-bg;
        }
    }

    > .number-picker-controls {
        display: inline-flex;
        flex-direction: column;
        width: 27px;
        flex: none;

        > .number-picker-control {
            display: flex;
            height: 50%;
            justify-content: center;
            align-items: center;
            font-size: 0.875rem;
            border-right: 1px solid @form-control-border;
            border-bottom: 1px solid @form-control-border;
            cursor: pointer;
            color: @grey5;
            background-color: @white;
            transition: 0.3s color ease-in-out, 0.3s background-color ease-in-out;

            &:hover {
                color: @grey3;
                background-color: @btn-secondary-hover-bg;
            }

            &:active {
                box-shadow: inset 0 0 0 1px gray;
            }

            &.disabled {
                background-color: @btn-secondary-hover-bg;
                cursor: default;
                color: @grey5;
                pointer-events: none;
            }
        }

        > .number-picker-control-up {
            border-top: 1px solid @form-control-border;
        }
    }
}
ux-organization-chart {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: @white;
    overflow: hidden;

    .ux-organization-chart-reveal {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        font-size: 2rem;
        color: @grey4;
        transition: color 0.3s ease-in-out;
        cursor: pointer;
        z-index: 1;
        border: none;
        background-color: transparent;
        padding: 0;
        width: 30px;
        height: 32px;

        &:hover,
        &:focus {
            color: @primary;
            outline: none;
        }
    }

    .ux-organization-chart-links,
    .ux-organization-chart-nodes {
        position: absolute;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .ux-organization-chart-node {
        position: absolute;
        background-color: @white;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
        transition: box-shadow 250ms ease-in-out, border-color 250ms ease-in-out;
        cursor: pointer;

        &.ux-organization-chart-node-selected {
            box-shadow: 2px 2px rgba(0, 0, 0, 0.15), inset 0 0 0 1px @primary;
            border-color: @primary;

            &:focus.ux-focus-indicator-active {
                box-shadow: inset 0 0 0 1px @primary, 0 0 0 1px @grey7, 0 0 0 3px rgba(0, 0, 0, 0.5);
            }
        }

        &:hover {
            box-shadow: 5px 5px rgba(0, 0, 0, 0.05), inset 0 0 0 1px @primary;
            border-color: @primary;
        }

        &:focus.ux-focus-indicator-active {
            box-shadow: 0 0 0 1px @grey7, 0 0 0 3px rgba(0, 0, 0, 0.5);
            outline: none !important;
        }
    }

    .ux-organization-chart-link {
        fill: none;
        stroke: @grey6;
        stroke-width: 1.5px;
    }
}
ux-page-header-icon-menu {
    display: inline-flex;
    cursor: pointer;

    .page-header-icon-menu {
        display: inline-flex;
        position: relative;
        width: 40px;

        .page-header-icon-menu-button {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 100%;
            height: 100%;
            color: #fff;
            background-color: transparent;
            border: none;
            transition: background-color 0.3s ease-in-out;

            &:hover,
            &:focus {
                background-color: rgba(247, 247, 247, 0.1);
            }

            &:focus {
                .native-focus-outline;
            }
        }
    }

    .label {
        line-height: 12px;
        padding: 2px 5px;
        position: absolute;
        right: 6px;
        top: 13px;
    }
}

.ux-page-header-icon-menu {
    width: 310px;

    .ux-menu-item {
        display: flex;
        justify-content: space-between;
        padding: 6px 20px;
        min-height: 0;
        font-size: 1rem;

        &:focus {
            .native-focus-outline;
        }

        .ux-icon,
        ux-icon {
            color: #888;
        }

        .dropdown-item-subtitle {
            font-size: 87%;
            color: #888;
        }
    }

    .dropdown-header {
        padding: 3px 20px 8px;
        margin: 4px;
        font-size: 1rem;
        cursor: default;
    }
}

ux-page-header-horizontal-navigation-item {
    .horizontal-navigation-button {
        position: relative;
        display: block;
        padding: 17px;
        border: none;
        color: @page-header-nav-color;
        background-color: @page-header-bg;
        cursor: pointer;
        white-space: nowrap;

        .navigation-item-icon {
            font-size: 0.875rem;
        }

        .navigation-item-label {
            margin-left: 5px;
            font-size: 0.875rem;
        }

        .navigation-item-dropdown-icon {
            margin-left: 5px;
            font-size: 0.75rem;
        }

        &:hover,
        &:focus {
            color: @page-header-nav-active-color;
            background-color: @page-header-nav-active-bg;
        }

        &:focus {
            .native-focus-outline;
        }

        &.active,
        &.open {
            color: @page-header-nav-active-color;
            background-color: @page-header-nav-active-bg;
        }

        &.selected {
            color: @page-header-nav-selected-color;
        }

        &.disabled {
            cursor: default;
            color: rgba(@page-header-nav-active-color, 0.35);

            &:hover,
            &:focus {
                color: rgba(@page-header-nav-active-color, 0.35);
                background-color: @page-header-bg;
            }
        }
    }
}

// Cannot be scoped to the component selector as it can be appended to body
.horizontal-navigation-dropdown-menu,
.horizontal-navigation-dropdown-submenu {
    background-color: @page-header-nav-dropdown-bg;
    box-shadow: none;
    margin-top: 0;
    border-radius: 0;

    .ux-menu-item {
        display: flex;
        align-items: center;
        color: @page-header-nav-dropdown-color;
        padding: 8px 10px 8px 20px;
        min-width: 200px;
        line-height: inherit;

        &:hover,
        &:focus.ux-focus-indicator.ux-focus-indicator-active {
            background-color: @page-header-nav-dropdown-hover-bg;
            color: @page-header-nav-dropdown-hover-color;

            .dropdown-item-title {
                color: @page-header-nav-dropdown-hover-color;
            }
        }

        &:focus.ux-focus-indicator.ux-focus-indicator-active {
            .native-focus-outline;
        }

        .dropdown-item-title {
            flex: 1;
            font-size: 0.875rem;
            color: @page-header-nav-dropdown-color;
        }

        .dropdown-item-icon {
            color: @page-header-nav-dropdown-icon-color;
            font-size: 0.625rem;
            font-weight: 600;
        }

        &.selected {
            .dropdown-item-title {
                color: @page-header-nav-dropdown-selected-color;
            }
        }

        &.disabled,
        &.disabled .dropdown-item-title {
            color: rgba(@page-header-nav-active-color, 0.35);
            cursor: default;

            &:hover,
            &:focus {
                background-color: transparent;
            }
        }
    }
}

ux-page-header-horizontal-navigation {
    position: relative;
    display: inline-flex;
    justify-content: center;
    height: 57px;

    .selected-indicator {
        height: 3px;
        background-color: @page-header-nav-selected-shadow;
        position: absolute;
        top: 0;
        left: 0;
    }
}

ux-page-header {
    display: block;
    width: 100%;

    .ux-page-header {
        height: 130px;
        width: 100%;
        padding-left: 23px;
        padding-right: 23px;
        background-color: @page-header-bg;
        color: @white;

        .page-header-content {
            position: relative;
            height: 100%;
        }

        .page-header-logo-container {
            position: absolute;
            top: 0;
            left: 0;
            height: 40px;
            overflow: hidden;
            display: none;

            .page-header-logo {
                max-height: 100%;
            }

            .page-header-acronym {
                display: none; // MF only
            }
        }

        .page-header-subtitle-container {
            display: none; // MF only
        }

        .page-header-state-container {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            align-items: center;
            height: 70px;

            .page-header-back-button {
                display: flex;
                height: 28px;
                width: 28px;
                margin-top: 16px;
                margin-right: 2px;
                border: none;
                justify-content: center;
                align-items: center;
                background-color: transparent;
                cursor: pointer;
                transition: background-color 0.3s ease-in-out;

                &:hover,
                &:focus {
                    background-color: @page-header-back-button-hover-bg;
                }

                &:focus {
                    .native-focus-outline;
                }

                & > * {
                    color: @page-header-back-button-color;

                    &:hover {
                        color: @page-header-back-button-hover-color;
                    }
                }
            }

            ux-breadcrumbs {
                height: 22px;

                .breadcrumb {
                    li {
                        a,
                        span {
                            color: @primary;
                        }

                        a:hover {
                            color: @white;
                        }

                        + li {
                            &:before {
                                color: @primary;
                                opacity: 0.8;
                            }
                        }
                    }
                }
            }

            .page-header-title-container {
                display: flex;
                flex-direction: column;
                margin-right: 10px;

                .page-header-title {
                    margin-top: 0;
                    margin-bottom: 8px;
                    line-height: 35px;
                }
            }
        }

        .page-header-navigation {
            display: flex;
            justify-content: center;
            flex: 1;
            margin: 0 120px;

            &.left {
                justify-content: flex-start;
            }

            &.right {
                justify-content: flex-end;
            }
        }

        .page-header-icon-menus {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            height: 60px;
        }

        // Styling For Condensed Header
        &.page-header-condensed {
            height: 57px;

            .page-header-condensed-content {
                position: relative;
                display: flex;

                .page-header-breadcrumbs {
                    display: flex;
                    align-items: center;
                    margin-right: 10px;

                    ux-breadcrumbs {
                        height: 22px;

                        .breadcrumb {
                            li {
                                a,
                                span {
                                    color: @primary;
                                }

                                a:hover {
                                    color: @white;
                                }

                                + li {
                                    &:before {
                                        color: @primary;
                                        opacity: 0.8;
                                    }
                                }
                            }
                        }
                    }

                    .breadcrumb li:last-of-type span {
                        opacity: 1;
                    }
                }

                .page-header-navigation {
                    display: flex;
                    flex: 1;
                    justify-content: center;
                }

                .page-header-icon-menus {
                    position: static;
                }
            }
        }
    }
}
ux-pagination {
    .pagination > li.page-item {
        .page-link {
            user-select: none;
        }
    }
}

ux-partition-map {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: #000;

    .partition-map-segment {
        position: absolute;
        box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
        cursor: pointer;

        &:focus.ux-focus-indicator-active {
            outline: none !important;
            box-shadow: none !important;

            &.partition-map-segment-dark {
                .partition-map-segment-content {
                    box-shadow: inset 0 0 0 3px #000;
                }
            }

            &.partition-map-segment-light {
                .partition-map-segment-content {
                    box-shadow: inset 0 0 0 3px #fff;
                }
            }
        }

        &.partition-map-segment-dark {
            color: #000;
        }

        &.partition-map-segment-light {
            color: #fff;
        }
    }

    .partition-map-segment-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: ~'calc(100% - 4px)';
        height: ~'calc(100% - 4px)';
        transition: box-shadow 250ms ease-in-out, background-color 250ms ease-in-out;
        overflow: hidden;
        user-select: none;
        margin: 2px;
        border-radius: 2px;

        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
        }

        &.partition-map-segment-content-hidden {
            .partition-map-segment-label {
                opacity: 0;
            }
        }
    }

    .partition-map-segment-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        margin: 0 1rem;
        font-size: 1rem;
        cursor: pointer;
        opacity: 1;
        transition: opacity 250ms ease-in-out;
    }
}
ux-popover {
    .popover {
        position: static;

        > .arrow {
            border-width: 8px;

            &:after {
                content: " ";
            }
        }

        &.bottom {
            margin-top: 8px;
            position: relative;

            > .arrow {
                left: 50%;
                border-top-width: 0;
                border-bottom-color: rgba(0, 0, 0, 0.25);
                top: -8px;
                margin-left: 0;
                transform: translateX(-50%);

                &:after {
                    margin-left: 0;
                    top: 1px;
                    border-top-width: 0;
                    border-bottom-color: #fff;
                    transform: translateX(-50%);
                }
            }
        }

        &.top {
            margin-top: -8px;
            transform: translateY(-8px);

            > .arrow {
                left: 50%;
                border-bottom-width: 0;
                border-top-color: rgba(0, 0, 0, 0.25);
                bottom: -8px;
                margin-left: 0;
                transform: translateX(-50%);

                &:after {
                    margin-left: 0;
                    bottom: 1px;
                    border-bottom-width: 0;
                    border-top-color: #fff;
                    transform: translateX(-50%);
                }
            }
        }

        &.top,
        &.bottom {
            &.popover-align-start > .arrow {
                left: 23px;
            }

            &.popover-align-end > .arrow {
                left: auto;
                right: 0;
            }
        }

        &.left {
            transform: translateX(-8px);

            > .arrow {
                right: -8px;
            }
        }

        &.right {
            margin-left: 8px;
            transform: translateX(0);

            > .arrow {
                left: -8px;
            }
        }

        &.left,
        &.right {
            > .arrow {
                margin-top: 0;
                transform: translateY(-50%);
            }

            &.popover-align-start > .arrow {
                top: 15px;
            }

            &.popover-align-end > .arrow {
                top: auto;
                bottom: -5px;
            }
        }
    }

    .ux-popover-no-padding {
        padding: 0;

        .popover-content {
            padding: 0;
        }
    }
}

ux-progress-bar {
    display: block;
    height: 22px;
    overflow: hidden;
    background-color: @grey7;
    border-radius: 4px;

    .progressbar-track {
        float: left;
        width: 0;
        height: 100%;
        line-height: 20px;
        color: @white;
        text-align: center;
        background-color: @accent;
        overflow: hidden;
        font-size: 14px;
        transition: width 0.6s ease;
    }
}
ux-radio-button {
    display: inline-block;

    .ux-radio-button {
        display: inline-flex;
        align-items: baseline;
        margin: 0;
        cursor: pointer;

        .ux-radio-button-container {
            display: inline-flex;
            flex: none;
            color: transparent;
            font-family: 'ux-icons';
            width: 24px;
            height: 24px;
            border: 1px solid @grey5;
            font-size: 16px;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            border-radius: 50%;

            .ux-icon-checkmark();

            .ux-radio-button-input {
                position: absolute;
                height: 0;
                width: 0;
                outline: none;
                overflow: hidden;
                border: none;
                clip: rect(0 0 0 0);
                margin: -1px;
                padding: 0;
                -webkit-appearance: none;
                -moz-appearance: none;
            }
        }

        &.ux-radio-button-checked {
            .ux-radio-button-container {
                background-color: @accent;
                color: @white;
                border-color: transparent;
            }

            &.ux-radio-button-disabled {
                .ux-radio-button-container {
                    background-color: @grey6;
                }
            }
        }

        .ux-radio-button-label {
            margin-left: 7px;

            &:empty {
                margin-left: 0;
            }
        }

        &.ux-radio-button-disabled {
            .ux-radio-button-container {
                border-color: @grey6;
                cursor: default;
            }
        }

        &.ux-radio-button-simplified {
            .ux-radio-button-container {
                border-color: transparent;
                background-color: transparent;
            }

            &.ux-radio-button-checked {
                .ux-radio-button-container {
                    color: @accent;
                    background-color: transparent;
                    border-color: transparent;
                }

                &.ux-radio-button-disabled {
                    .ux-radio-button-container {
                        color: @grey5;
                    }
                }
            }
        }

        &.ux-radio-button-simplified.ux-radio-button-disabled {
            .ux-radio-button-container {
                color: transparent;
            }
        }

        &:hover {
            .ux-radio-button-container {
                border: 2px solid @accent;
            }

            &.ux-radio-button-disabled {
                cursor: default;

                .ux-radio-button-container {
                    border: 1px solid @grey6;
                }

                &.ux-radio-button-simplified {
                    .ux-radio-button-container {
                        color: transparent;
                    }
                }
            }

            &.ux-radio-button-simplified {
                .ux-radio-button-container {
                    color: @grey5;
                    border-color: transparent;
                    border-width: 1px;
                }

                &.ux-radio-button-checked {
                    .ux-radio-button-container {
                        color: @accent;
                    }

                    &.ux-radio-button-disabled {
                        .ux-radio-button-container {
                            color: @grey5;
                        }
                    }
                }
            }
        }

        &.ux-radio-button-focused {
            .ux-radio-button-container {
                .focus-outline();
            }
        }
    }
}
ux-sankey-chart {
    display: block;
    position: relative;
    overflow: hidden;

    .ux-sankey-chart-nodes,
    .ux-sankey-chart-links,
    .ux-sankey-chart-columns {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }

    .ux-sankey-chart-links {
        z-index: 1;
        top: 64px;
    }

    .ux-sankey-chart-nodes {
        z-index: 2;
        top: 64px;
    }

    .ux-sankey-chart-node {
        position: absolute;
        display: inline-block;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
        transition: background-color 0.16s ease-out, color 0.16s ease-out, box-shadow 0.16s ease-out;
        pointer-events: all;
        cursor: default;

        &:hover {
            box-shadow: 5px 5px rgba(0, 0, 0, 0.05);
        }

        &.ux-sankey-chart-node-active {
            background-color: @accent;
            color: #fff;
        }

        &:focus.ux-focus-indicator {
            outline: none;

            &.ux-focus-indicator-active {
                outline: none;
                box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(@accent, 0.5);
            }
        }
    }

    .ux-sankey-chart-columns {
        display: flex;
    }

    .ux-sankey-chart-column {
        flex: none;
        height: 100%;
        box-sizing: border-box;
        padding: 24px;

        &:last-of-type {
            border-right: none;
        }
    }

    .ux-sankey-chart-column-title {
        position: absolute;
        top: 24px;
        font-size: 18px;
        font-weight: 700;
        color: #000;
        margin: 0;
    }

    .ux-sankey-chart-link {
        fill: #000;
        fill-opacity: 0.05;
        transition: fill 0.16s ease-out, fill-opacity 0.16s ease-out;
        pointer-events: all;

        &.ux-sankey-chart-link-active {
            fill: @accent;
            fill-opacity: 0.5;
        }
    }

    .ux-sankey-chart-falloff-indicator {
        fill: url(#falloff-gradient);
        pointer-events: all;
    }

    .ux-sankey-chart-falloff-gradient-start {
        stop-color: @sankey-overflow-bg;
        stop-opacity: 0.75;
    }

    .ux-sankey-chart-falloff-gradient-end {
        stop-color: @sankey-overflow-bg;
        stop-opacity: 0;
    }

    .ux-sankey-tooltip {
        position: absolute;
        z-index: 1;
        transform: translateX(-50%) translateY(-110%);

        .tooltip .tooltip-arrow {
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-style: solid;
            position: absolute;
        }
    }
}
ux-search-builder-group {
    .search-group-title {
        color: @search-builder-group-title-color;
        font-size: 19px;
        margin: 0 0 11px;
        font-weight: 400;
    }

    .search-group-content {
        display: flex;

        .search-group-operator {
            display: flex;
            align-items: center;
            flex: none;
            width: 100px;
            padding-left: 5px;
            text-transform: uppercase;
            color: @search-builder-operator-border;
            transition: opacity 300ms linear;
            border-left-width: 4px;
            border-left-style: solid;
            opacity: 1;

            &.search-group-operator-or {
                border-left-color: @search-builder-operator-or-border;
            }

            &.search-group-operator-and {
                border-left-color: @search-builder-operator-and-border;
            }

            &.search-group-operator-not {
                border-left-color: @search-builder-operator-not-border;
            }

            &.hidden-operator {
                opacity: 0;
            }
        }

        .search-group-items {
            flex: 1;

            .search-group-item-container {
                display: flex;
                padding: 5px;
                margin-right: 10px;
                transition: background-color 300ms linear;

                &:hover,
                &.search-group-item-focus {
                    background-color: @search-builder-field-hover;

                    .search-group-item-remove {
                        opacity: 1;
                    }
                }

                .search-group-item {
                    flex: 1;
                }

                &.placeholder-item {
                    pointer-events: none;

                    .search-group-item {
                        padding-right: 33px;

                        .form-control {
                            height: 34px;
                            border: 1px dashed @search-builder-placeholder-border;
                        }
                    }
                }

                .search-group-item-remove {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex: none;
                    margin: 9px;
                    border: none;
                    padding: 0;
                    opacity: 0;
                    color: @search-builder-remove-color;
                    background-color: transparent;
                    cursor: pointer;
                    transition: opacity 300ms linear;

                    &:focus {
                        .native-focus-outline;
                    }
                }
            }
        }

        .search-builder-group-add-field {
            display: flex;
            flex: none;
            width: 135px;
            height: 30px;
            justify-content: flex-start;
            align-items: center;
            align-self: flex-end;
            cursor: pointer;
            margin-bottom: 5px;
            border: none;
            padding: 0;
            background-color: transparent;

            &:focus {
                .native-focus-outline;
            }

            .search-builder-group-add-field-icon {
                display: flex;
                justify-content: center;
                align-items: center;
                flex: none;
                font-size: 0.875rem;
                width: 30px;
                height: 30px;
                border: none;
                border-radius: 50%;
                color: @search-builder-add-icon-color;
                background-color: @search-builder-add-bg;
                transition: background-color 300ms linear;
            }

            .search-builder-group-add-field-label {
                font-size: 0.9375rem;
                max-width: 120px;
                padding-left: 8px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: @search-builder-add-color;
            }

            &:hover {
                .search-builder-group-add-field-icon {
                    background-color: @search-builder-add-hover-bg;
                }
            }
        }
    }

    .search-builder-group-divider {
        border-top-color: @search-builder-divider;
        margin-top: 30px;
        margin-bottom: 20px;
    }

    &:last-of-type {
        .search-builder-group-divider {
            display: none;
        }
    }
}

.search-builder-modal {
    width: 1100px;
    max-width: ~'calc(100% - 50px)';

    .search-builder-dismiss {
        position: absolute;
        right: 0;

        .btn-close {
            position: absolute;
            width: 40px;
            height: 40px;
            box-shadow: none;
            background-color: #333;
            transform: translateX(-50%) translateY(-50%);
            z-index: 10021;

            &:hover {
                background-color: #222;
            }

            .ux-icon,
            ux-icon {
                color: #999;
                font-size: 1.125rem;
                padding-top: 2px;
            }
        }
    }

    .search-builder-header {
        display: flex;
        padding: 18px 35px 15px;
        background-color: #f2f2f2;

        .search-builder-title {
            margin: 0;
            color: #333;
        }
    }

    .search-builder-body {
        padding: 15px 35px;
        height: 600px;
        overflow-y: auto;
    }

    .search-builder-footer {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        height: 60px;
        padding: 15px;
        background-color: @search-builder-modal-footer-bg;

        .btn + .btn {
            margin-left: 8px;
        }
    }
}

ux-select-list-item {
    display: flex;
    padding: 5px 10px;
    cursor: pointer;
    align-items: center;

    &:hover {
        background-color: #f5f5f5;
    }

    &:focus {
        .native-focus-outline();
    }

    &.selected {
        font-weight: 600;
        background-color: #f5f5f5;
    }
}
ux-select-list {
    display: block;
    border: 2px solid #f5f5f5;
    padding-top: 5px;
    overflow-y: auto;
}
ux-input-dropdown {
    display: inline-block;
    position: relative;

    .form-control {
        padding-right: 60px;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    &.ux-select-disabled .ux-select-container .ux-select-icons {
        .ux-select-icon {
            color: #d8d9db;
        }
    }
}

.select-menu {
    position: relative;
    overflow-y: auto;

    .filter-container {
        position: relative;

        .filter-button {
            position: absolute;
            right: 0;
            top: 0;
            background-color: transparent;
            padding: 8px 8px 5px;
            min-width: auto;
        }
    }
}

ux-select {
    &.ng-invalid.ng-dirty {
        ux-tag-input {
            border-color: @critical;
        }
    }

    ux-tag-input {
        font-size: 1.125rem;

        ux-typeahead {
            font-size: 1rem;
        }
    }

    ux-typeahead {
        .ux-typeahead-options {
            ol {
                li {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
            }
        }
    }

    .ux-select-container {
        > input[readonly]:not(:disabled) {
            background-color: @form-control-bg;
            color: @form-control-color;
            border-color: @form-control-border;
            .placeholder(@form-control-placeholder-color);

            &:focus {
                border-color: @form-control-focus-border;
                .placeholder(@form-control-placeholder-color);
            }
        }
    }
}

ux-select,
ux-input-dropdown,
ux-combobox,
ux-dropdown {
    .ux-select-container {
        position: relative;

        &.disabled {
            .ux-select-icons,
            .ux-tag-icons {
                .ux-select-icon,
                .ux-tag-icon {
                    cursor: default;
                    color: #d8d9db;
                }
            }
        }

        .ux-select-icons {
            display: flex;
            position: absolute;
            align-items: center;
            top: 0;
            right: 0;

            .ux-select-icon {
                cursor: pointer;
                pointer-events: all;
                padding: 9px 5px;

                &:last-of-type {
                    margin-right: 5px;
                }
            }

            .ux-select-icon {
                cursor: pointer;

                > .ux-icon,
                > ux-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 16px;
                    height: 16px;
                    line-height: 16px;
                }
            }

            .ux-custom-icon {
                display: flex;
                align-items: center;
            }
        }

        > input {
            padding-right: 31px;

            &.ux-tag-input-clear-inset {
                padding-right: 57px;
            }
        }
    }

    &.ux-select-disabled .ux-select-container .ux-select-icons {
        .ux-select-icon,
        ux-tag-input .ux-tag-icons .ux-tag-icon,
        ux-tag-input .ux-tag-icons .ux-select-icon {
            cursor: default;
        }
    }
}

.ux-side-panel {
    &.open {
        > .ux-side-panel-host {
            box-shadow: 1px 0 20px 0 @display-panel-shadow;
            border-left: 1px solid @display-panel-border;
        }
    }

    &.inline {
        flex: none;

        &.animate {
            transition: width 0.2s cubic-bezier(0.49, 1, 0.38, 0.98);
        }

        > .ux-side-panel-host {
            height: 100%;
            box-shadow: none;
            overflow-x: hidden;
        }
    }

    &:not(.inline) {
        > .ux-side-panel-host {
            transform: translateX(100%);
        }
    }

    > .ux-side-panel-host {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        color: @display-panel-color;
        background: @display-panel-bg;
        z-index: @display-panel-z-index;

        &:focus {
            outline: none;
        }

        &.modal-panel {
            z-index: @modal-z-index;
        }

        .ux-side-panel-header {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 0 0 auto;
            min-height: 60px;
            width: 100%;
            padding: 0 20px;
            background-color: @display-panel-bg;

            &:before {
                content: "";
                position: absolute;
                left: 10%;
                right: 10%;
                top: 50%;
                bottom: 0;
                border-radius: 50%;
                box-shadow: 0 0 20px @display-panel-header-shadow;
                z-index: -1;
            }

            > * {
                flex: 1;
            }

            > button {
                flex: none;
            }
        }

        .ux-side-panel-content {
            flex: 1 1 auto;
            width: 100%;
            padding: 20px;
            overflow-y: auto;
            /* stylelint-disable-next-line */
            overscroll-behavior: contain;
        }

        .ux-side-panel-footer {
            flex: none;
            width: 100%;
            border-top: 1px solid rgba(51, 51, 51, 0.1);
            padding: 20px;

            &.btn-container {
                justify-content: flex-end;
            }
        }
    }
}

.ux-side-panel-inline-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow-x: hidden;

    > :not(ux-side-panel) {
        flex: 1;
    }
}
ux-slider {
    display: block;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;

    &.disabled {
        .track {
            .thumb.ux-focus-indicator-active {
                box-shadow: none;
            }

            .thumb.button {
                cursor: default;
            }

            .thumb.line {
                cursor: default;
                background-color: rgba(0, 0, 0, 0.4);
            }

            &:not(.range) {
                .track-section.track-lower {
                    background-color: rgba(0, 0, 0, 0.2);
                }
            }

            .track-section {
                &.track-range {
                    background-color: rgba(0, 0, 0, 0.2);
                }
            }
        }
    }

    .track {
        display: flex;
        flex-direction: row;
        position: relative;
        width: 100%;
        background-color: #f2f2f2;
        border-radius: 2px;

        &.wide {
            height: 12px;

            .tooltip {
                &.tooltip-dynamic {
                    top: 18px;
                }
            }
        }

        &.narrow {
            height: 4px;

            .tooltip {
                &.tooltip-dynamic {
                    top: 10px;
                }
            }
        }

        .track-section {
            position: relative;
            flex: 1;
            overflow: hidden;

            &.track-lower {
                border-top-left-radius: 2px;
                border-bottom-left-radius: 2px;
                background: @grey6;
            }

            &.track-higher {
                border-top-right-radius: 2px;
                border-bottom-right-radius: 2px;
                background: @grey6;
            }

            &.track-range {
                background: rgba(@accent, 0.75);
            }
        }

        .thumb {
            flex: none;
            position: absolute;
            cursor: pointer;

            &.ux-focus-indicator-active {
                outline: none !important;
                box-shadow: 0 0 1px 2px @aspects-outline;
            }

            .tooltip {
                top: -37px;
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                pointer-events: none;
                cursor: default;

                &.tooltip-dynamic {
                    .tooltip-arrow {
                        display: none;
                    }

                    .tooltip-inner {
                        background-color: transparent !important;
                        color: #666 !important;
                        box-shadow: none;
                    }
                }
            }

            &.button {
                background-color: #fff;
                border: 1px solid #999;
                border-radius: 50%;
                margin-top: -6px;
                transform: translateX(-50%);

                &:before {
                    content: ' ';
                    position: absolute;
                    height: 100%;
                }

                &.wide {
                    width: 24px;
                    height: 24px;

                    &:before {
                        width: 30px;
                        transform: translateX(-14%);
                    }
                }

                &.narrow {
                    width: 16px;
                    height: 16px;

                    &:before {
                        width: 30px;
                        transform: translateX(-27%);
                    }
                }
            }

            &.line {
                width: 2px;
                background-color: #333;
                transform: translateX(-50%);

                &:before {
                    content: ' ';
                    position: absolute;
                    height: 100%;
                    transform: translateX(-50%);
                }

                &.wide {
                    height: 18px;
                    margin-top: -3px;

                    &:before {
                        width: 20px;
                    }
                }

                &.narrow {
                    height: 12px;
                    margin-top: -4px;

                    &:before {
                        width: 30px;
                    }
                }
            }
        }
    }

    .tick-container {
        position: relative;
        width: ~'calc(100% - 1px)';
        min-height: 8px;
        margin-top: 3px;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;

        &.show-labels {
            height: 25px;
        }

        .tick {
            position: absolute;

            &.major {
                .tick-indicator {
                    height: 8px;
                }
            }

            &.minor {
                .tick-indicator {
                    height: 4px;
                    margin-bottom: 4px;
                }
            }

            .tick-indicator {
                width: 1px;
                background-color: #999;
                top: 0;
            }

            .tick-label {
                cursor: default;
                color: #666;
                text-align: center;
                transform: translateX(-50%);
                font-size: 0.875rem;
            }
        }
    }
}

ux-spark {
    display: block;

    .ux-spark {
        background-color: fade(@primary, 20%);
        overflow: hidden;

        .ux-spark-theme(primary, @primary);
        .ux-spark-theme(accent, @accent);
        .ux-spark-theme(secondary, @secondary);
        .ux-spark-theme(alternate1, @alternate1);
        .ux-spark-theme(alternate2, @alternate2);
        .ux-spark-theme(alternate3, @alternate3);
        .ux-spark-theme(vibrant1, @vibrant1);
        .ux-spark-theme(vibrant2, @vibrant2);
        .ux-spark-theme(grey1, @grey1);
        .ux-spark-theme(grey2, @grey2);
        .ux-spark-theme(grey3, @grey3);
        .ux-spark-theme(grey4, @grey4);
        .ux-spark-theme(grey5, @grey5);
        .ux-spark-theme(grey6, @grey6);
        .ux-spark-theme(grey7, @grey7);
        .ux-spark-theme(grey8, @grey8);
        .ux-spark-theme(white, @white);
        .ux-spark-theme(chart1, @chart1);
        .ux-spark-theme(chart2, @chart2);
        .ux-spark-theme(chart3, @chart3);
        .ux-spark-theme(chart4, @chart4);
        .ux-spark-theme(chart5, @chart5);
        .ux-spark-theme(chart6, @chart6);
        .ux-spark-theme(ok, @ok);
        .ux-spark-theme(warning, @warning);
        .ux-spark-theme(critical, @critical);
    }

    .ux-spark .ux-spark-bar {
        background-color: @primary;
        height: 100%;
    }

    .ux-spark .ux-fill {
        transition: none;
    }

    .ux-spark.ux-inline {
        margin-bottom: 0;
        display: inline-block;
        width: 100%;
        float: left;
    }

    .ux-spark-line {
        flex: 1;
    }

    .ux-spark-inline-label-container {
        display: flex;
        align-items: center;

        .ux-spark-top-container {
            min-height: auto;
        }
    }

    .ux-spark-inline-label-left {
        flex: none;
        text-align: right;
        margin-right: 5px;
    }

    .ux-spark-top-container {
        min-height: 24px;
    }

    .ux-spark-bottom-container {
        min-height: 24px;
        line-height: 22px;
    }

    .ux-spark-label-top-left,
    .ux-spark-label-top-right,
    .ux-spark-label-bottom-left,
    .ux-spark-label-bottom-right {
        display: inline-block;
    }

    .ux-spark-label-top-left,
    .ux-spark-label-bottom-left {
        float: left;
    }

    .ux-spark-label-top-right,
    .ux-spark-label-bottom-right {
        float: right;
        text-align: right;
    }

    .ux-spark-multi-value {
        display: flex;
    }
}

.ux-spark-theme(@themeName, @color) {
    &.ux-spark-theme-@{themeName} {
        background-color: fade(@color, 20%);

        .ux-spark-bar {
            background-color: @color;
        }
    }
}
ux-spin-button {
    display: flex;
    flex-direction: column;

    .spin-button {
        height: 22px;
        text-align: center;
        padding: 0;
        border: none;
        background-color: transparent;

        &:disabled {
            opacity: 0.5;
        }

        &:focus {
            .native-focus-outline();
        }

        ux-icon {
            color: #666;
            font-weight: 900;
            font-size: 14px;
        }
    }

    .form-control {
        text-align: center;
        padding: 0;
        font-size: 14px;
        -moz-appearance: textfield;

        &[readonly] {
            background-color: #fff;
            border-color: #e5e6e7;
            color: #555;
        }

        &:disabled {
            color: #b3b3b3;
        }

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    }
}
ux-column-picker {
    display: flex;
    width: 100%;

    .column-picker-column {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .column-picker-actions-column {
        flex: none;
        width: 130px;
        padding: 30px 16px 0;
    }

    .column-picker-stats {
        flex: none;
        height: 30px;
    }

    .column-picker-list {
        flex: 1;
        border: 1px solid @table-border;
        overflow-y: auto;
        background-color: @table-hover-bg;

        &:focus {
            outline: none;
        }
    }

    .column-picker-list-item {
        padding: 0 16px;
        height: 40px;
        border-bottom: 1px solid @table-border;

        &.ux-focus-indicator-active.cdk-mouse-focused {
            outline: none;
        }
    }

    .column-picker-tree-group-node {
        flex-direction: column;

        .column-picker-group-toggle-btn {
            width: 100%;
            background: none;
            border: none;
            border-bottom: 1px solid @table-border;
            padding-left: 17px;
            height: 40px;

            ux-icon {
                font-size: 12px;
                margin-right: 5px;
                margin-top: 1px;
            }
        }
    }

    .column-picker-tree-node-level-1 {
        padding-left: 50px;
    }

    .column-picker-group-toggle-btn,
    .column-picker-list-group,
    .column-picker-list-item {
        display: flex;
        align-items: center;
        background-color: @white;
        cursor: pointer;
    }

    .column-picker-list-item-hidden {
        display: none;
    }

    .column-picker-list-item.ux-reorderable-moving {
        opacity: 0.5;
    }

    .column-picker-list-item.column-picker-list-item-selected {
        padding: 0 8px;
    }

    .column-picker-list-item.column-picker-list-item-selected .drag-handle-icon {
        margin-right: 6px;
        color: @grey5;
        cursor: move;
    }

    .column-picker-list-item.column-picker-list-item-locked {
        padding: 0 8px 0 28px;
        cursor: default;
    }

    .column-picker-list-item.column-picker-list-item-locked .ux-icon {
        margin-left: auto;
    }

    .column-picker-list-item.ux-selection-selected {
        background-color: @shift-select-selected-light;
        color: @grey1;
    }
}

.column-picker-list-item.cdk-drag-preview {
    display: flex;
    align-items: center;
}

ux-tag-input {
    display: inline-block;
    position: relative;
    width: 100%;
    border: 1px solid @tag-input-border;
    border-radius: 1px;

    & > ol {
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        margin: 0;
        padding: 1px 3px;

        & > li {
            list-style: none;
            margin: 2px 3px;
        }

        & > li.ux-tag {
            flex: 0 1 auto;
            display: flex;
            align-items: baseline;
            color: @tag-input-tag-color;
            background-color: @tag-input-tag-bg;
            border: 1px solid @tag-input-tag-border;
            border-radius: 1px;
            padding: 0 5px;
            cursor: pointer;
            text-overflow: ellipsis;
            overflow: hidden;

            &:focus {
                color: @tag-input-tag-active-color;
                background-color: @tag-input-tag-active-bg;
                border-color: @tag-input-tag-active-border;
                outline: none;
            }

            &.disabled {
                cursor: default;
            }

            & > .ux-tag-remove {
                flex: 0 0 auto;
                font-size: 80%;
                opacity: 0.7;
                background-color: transparent;
                margin-left: 7px;
                border: none;
                padding: 0;

                &:hover:not([disabled]) {
                    opacity: 1;
                }

                &[disabled] {
                    cursor: default;
                }
            }
        }

        & > li.ux-tag-input {
            flex: 1;

            & > input {
                width: 100%;
                background-color: transparent;
                margin: 0;
                border: 1px solid transparent;
                outline: none;
                padding: 0 5px;
                min-width: 140px;

                &::-webkit-input-placeholder {
                    color: @form-control-placeholder-color;
                    opacity: 1;
                }

                &:-moz-placeholder {
                    color: @form-control-placeholder-color;
                    opacity: 1;
                }

                &::-moz-placeholder {
                    color: @form-control-placeholder-color;
                    opacity: 1;
                }

                &:-ms-input-placeholder {
                    color: @form-control-placeholder-color;
                    opacity: 1;
                }

                &[readonly] {
                    cursor: default;
                }
            }
        }

        &.ux-tag-input-icon-inset,
        &.ux-tag-input-clear-inset {
            padding-right: 32px;
        }

        &.ux-tag-input-icon-inset.ux-tag-input-clear-inset {
            padding-right: 64px;
        }
    }

    &.disabled {
        background-color: @tag-input-disabled-bg;

        .ux-tag-icons {
            .ux-tag-icon,
            .ux-select-icon {
                cursor: default;
                color: #d8d9db;
            }
        }
    }

    &.focus {
        border-color: @form-control-focus-border;
    }

    &.invalid,
    &.ng-invalid.ng-touched:not(.focus),
    &.ng-invalid.ng-dirty {
        border-color: @critical;
    }

    .has-error & {
        border-color: @form-control-invalid-color;
    }

    .ux-tag-icons {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;

        .ux-tag-icon,
        .ux-select-icon {
            cursor: pointer;
            pointer-events: all;
            padding: 9px 5px;
            font-size: 16px;
            line-height: 16px;

            &:last-of-type {
                margin-right: 4px;
            }
        }

        .ux-custom-icon {
            display: flex;
            align-items: center;
        }
    }
}
ux-time-picker {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;

    .time-picker {
        display: inline-flex;
    }

    .time-picker-column {
        display: inline-flex;
        flex-direction: column;
        flex: none;
    }

    .time-picker-separator {
        display: inline-flex;
        flex: none;
        width: 14px;
        justify-content: center;
        align-items: center;
    }

    .time-picker-meridian {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-left: 14px;

        .btn-group {
            .btn {
                padding-left: 8px;
                padding-right: 8px;
            }
        }
    }

    .time-spinner {
        width: 33px !important;
    }
}

ux-timeline {
    .timeline {
        margin-top: 50px;
        padding: 0;
        list-style: none;
        position: relative;

        &:before {
            display: none; // prevent AngularJS styles showing
        }

        .timeline-connector {
            top: 0;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 2px;
            background-color: @timeline-color;
            left: 50%;
            margin-left: -1.5px;
        }

        .timeline-arrow {
            position: absolute;
            color: @timeline-color;
            left: 56px;
            bottom: -6px;
            transform: translateX(-0.5px);
        }

        ux-timeline-event {
            margin-bottom: 20px;
            position: relative;
            display: block;

            .timeline-footer {
                margin-top: 10px;
                padding: 10px 0;
            }

            .timeline-title {
                margin-top: 0;
            }

            .timeline-badge {
                &.critical {
                    background-color: @timeline-badge-critical;
                }

                &.success {
                    background-color: @timeline-badge-success;
                }

                &.warning {
                    background-color: @timeline-badge-warning;
                }

                &.info, &.accent {
                    background-color: @timeline-badge-accent;
                }

                &.primary {
                    background-color: @timeline-badge-primary;
                }

                &.alternate1 {
                    background-color: @timeline-badge-alternate1;
                }

                &.alternate2 {
                    background-color: @timeline-badge-alternate2;
                }

                &.alternate3 {
                    background-color: @timeline-badge-alternate3;
                }

                &.vibrant1 {
                    background-color: @timeline-badge-vibrant1;
                }

                &.vibrant2 {
                    background-color: @timeline-badge-vibrant2;
                }

                &.grey1 {
                    background-color: @timeline-badge-grey1;
                }

                &.grey2 {
                    background-color: @timeline-badge-grey2;
                }

                &.grey3 {
                    background-color: @timeline-badge-grey3;
                }

                &.grey4 {
                    background-color: @timeline-badge-grey4;
                }

                &.grey5 {
                    background-color: @timeline-badge-grey5;
                }
            }

            > .timeline-panel {
                background-color: @timeline-panel-bg;
                float: left;
                border: 1px solid @timeline-panel-border;
                border-radius: 2px;
                padding: 12px;
                position: relative;
                box-shadow: @timeline-panel-shadow;
            }

            > .timeline-panel {
                &:before {
                    position: absolute;
                    top: 40px;
                    right: -8px;
                    display: inline-block;
                    border-top: 8px solid transparent;
                    border-left: 8px solid @timeline-panel-border;
                    border-right: 0 solid @timeline-panel-border;
                    border-bottom: 8px solid transparent;
                    content: " ";
                }
            }

            > .timeline-panel {
                &:after {
                    position: absolute;
                    top: 41px;
                    right: -14px;
                    display: inline-block;
                    border-top: 7px solid transparent;
                    border-left: 7px solid @timeline-panel-bg;
                    border-right: 0 solid @timeline-panel-bg;
                    border-bottom: 7px solid transparent;
                    content: " ";
                }
            }

            > .timeline-badge {
                color: @timeline-badge-color;
                width: 100px;
                max-width: 100px;
                max-height: 100px;
                line-height: 25px;
                font-size: 0.9em;
                text-align: center;
                position: absolute;
                top: 26px;
                left: 50%;
                margin-left: -25px;
                padding: 0 15px;
                background-color: @timeline-bg;
                z-index: 100;
                border-radius: 1.25em;
            }

            &:before,
            &:after {
                content: " ";
                display: table;
            }

            &:after {
                clear: both;
            }
        }
    }

    ux-timeline-event {
        .timeline-badge {
            span {
                text-overflow: ellipsis;
                white-space: nowrap;
                display: block;
                overflow: hidden;
            }
        }
    }

    @media only screen and (min-width: 768px) {
        .timeline {
            .timeline-connector {
                left: 64px;
            }

            ux-timeline-event {
                .timeline-badge {
                    left: 15px;
                    margin-left: 0;
                    top: 30px;
                }

                > .timeline-panel {
                    width: ~'calc(100% - 135px)';
                    float: right;

                    &:before {
                        border-left-width: 0;
                        border-right-width: 8px;
                        left: -8px;
                        right: auto;
                        top: 34px;
                    }

                    &:after {
                        border-left-width: 0;
                        border-right-width: 8px;
                        right: auto;
                        left: -7px;
                        top: 35px;
                    }
                }
            }
        }
    }

    @media only screen and (max-width: 767px) {
        .timeline {
            .timeline-connector {
                left: 64px;
            }

            ux-timeline-event {
                > .timeline-badge {
                    left: 15px;
                    margin-left: 0;
                    top: 30px;
                }

                > .timeline-panel {
                    float: right;

                    &:before {
                        border-left-width: 0;
                        border-right-width: 8px;
                        left: -8px;
                        right: auto;
                        top: 34px;
                    }

                    &:after {
                        border-left-width: 0;
                        border-right-width: 8px;
                        right: auto;
                        left: -7px;
                        top: 35px;
                    }
                }
            }
        }
    }
}
ux-toggleswitch {
    display: inline-block;

    .ux-toggleswitch {
        position: relative;
        display: inline-flex;
        cursor: pointer;
        white-space: nowrap;
        margin-bottom: 0;

        .ux-toggleswitch-input {
            position: absolute;
            height: 0;
            width: 0;
            outline: none;
            overflow: hidden;
            border: none;
            clip: rect(0 0 0 0);
            margin: -1px;
            padding: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        .ux-toggleswitch-container {
            position: relative;
        }

        .ux-toggleswitch-bg {
            flex: none;
            width: 44px;
            height: 22px;
            background-color: @white;
            border: 1px solid @grey5;
            border-radius: 999px;
            box-shadow: inset 0 0 0 0 @primary;
            transition: border 0.3s, box-shadow 0.3s, background-color 0s;
        }

        .ux-toggleswitch-nub {
            background-color: @white;
            border: 2px solid @grey5;
            border-radius: 50%;
            height: 22px;
            width: 22px;
            position: absolute;
            top: 0;
            left: 0;
            transition: left 0.15s;
        }

        .ux-toggleswitch-label {
            display: inline-flex;
            align-items: center;
            margin-left: 7px;
            white-space: nowrap;

            &:empty {
                margin-left: 0;
            }
        }

        &.ux-toggleswitch-disabled {
            cursor: default;
            opacity: 0.5;
        }

        &.ux-toggleswitch-checked {
            .ux-toggleswitch-bg {
                background-color: @primary;
                border-color: @primary;
                box-shadow: inset 0 0 0 12px @primary;
                transition: border 0.3s, box-shadow 0.3s, background-color 0s 0.3s;
            }

            .ux-toggleswitch-nub {
                left: 22px;
                border-color: @primary;
            }
        }

        &.ux-toggleswitch-focused {
            .ux-toggleswitch-bg {
                .focus-outline();
            }
        }
    }

    &.toggleswitch-lg {
        .ux-toggleswitch {
            .ux-toggleswitch-bg {
                width: 60px;
                height: 30px;
            }

            &.ux-toggleswitch-checked .ux-toggleswitch-bg {
                box-shadow: inset 0 0 0 16px @primary;
            }

            .ux-toggleswitch-nub {
                height: 30px;
                width: 30px;
            }

            &.ux-toggleswitch-checked .ux-toggleswitch-nub {
                left: 30px;
            }
        }
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* Internet Explorer workaround for border-radius rendering issue. */
        .ux-toggleswitch-nub {
            background-clip: padding-box;
        }
    }
}

ux-toolbar-search {
    display: inline-block;
    top: 0;

    [uxToolbarSearchField] {
        width: 100%;
        height: 36px;
        visibility: hidden;
        transition: visibility 0s 0.3s;
    }

    [uxToolbarSearchButton] {
        position: absolute;
        top: 4px;
        right: 0;
        z-index: 1;
    }

    &.right {
        left: 0;
    }

    &.left {
        right: 0;
    }

    &.expanded {
        &.left {
            right: -4px;
        }

        [uxToolbarSearchField] {
            padding-right: 35px;
            visibility: visible;
            transition: visibility 0s;

            &.ux-toolbar-search-clear-offset {
                padding-right: 67px;
            }
        }

        [uxToolbarSearchButton] {
            right: 4px;
        }
    }

    .ux-toolbar-search-clear {
        position: absolute;
        top: 4px;
        right: 36px;
    }
}

ux-tooltip {
    .tooltip {
        position: static;

        &.right {
            padding: 0 2px;
        }

        &.bottom {
            padding: 2px 0;
        }
    }
}
ux-typeahead {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    overflow-y: auto;
    z-index: @select-drop-z-index;
    padding: 5px 0;
    border: none;
    border-radius: 2px;
    margin: 5px 0;
    background-color: @dropdown-bg;
    box-shadow: 0 0 3px @dropdown-shadow;

    &.open {
        display: block;
    }

    &.drop-up {
        top: auto;
        bottom: 100%;
    }

    ux-typeahead-options-list {
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

    .ux-typeahead-options {
        ol {
            margin-bottom: 0;
            padding: 0;

            li {
                display: list-item;
                list-style: none;
                margin: 0;
                padding: 0 10px;
                line-height: 24px;
                height: 24px;
                cursor: pointer;

                &.active {
                    transition: none;
                }

                &.highlighted {
                    background-color: @dropdown-highlight-bg;
                }

                &.disabled {
                    cursor: default;
                    color: @grey5;
                }

                .ux-filter-match {
                    font-weight: bold;
                    text-decoration: underline;
                }
            }
        }
    }

    .ux-typeahead-loading {
        display: flex;
        align-items: center;
        padding: 0 10px;
        line-height: 24px;
        font-style: italic;

        & > .spinner {
            margin: 0 1em 0 0.5em;
        }
    }

    .ux-typeahead-no-options {
        padding: 0 10px;
        line-height: 24px;
        font-style: italic;
    }

    .ux-typeahead-recent-options {
        border-bottom: solid 1px @dropdown-divider;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
}

ux-virtual-scroll {
    position: relative;
    display: block;
    overflow: auto;

    .virtual-scroll-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        will-change: transform;
    }
}
[uxVirtualForContainer] {
    .ux-virtual-scroll-spacer {
        visibility: hidden;
    }
}
ux-wizard {
    .wizard-body {
        display: flex;
        flex-direction: column;

        .wizard-steps {
            display: flex;
            flex-direction: row;
            flex: none;
            height: 38px;
            margin-bottom: 8px;

            .wizard-step {
                display: flex;
                align-items: center;
                flex: 1;
                max-width: 25%;
                height: 100%;
                padding: 8px;
                background: @wizard-steps-disabled-bg;
                color: @wizard-steps-disabled-color;
                margin: 0 8px;

                &.visited {
                    background-color: @wizard-step-complete-bg;
                    color: @wizard-step-complete-color;
                    opacity: @wizard-step-complete-opacity;
                    cursor: pointer;
                }

                &.active {
                    background-color: @wizard-step-active-bg;
                    color: @wizard-step-active-color;
                    opacity: 1;
                    cursor: default;
                }

                &.invalid {
                    background-color: @wizard-step-error-bg;
                    color: @wizard-step-error-color;
                }

                &:first-of-type {
                    margin-left: 0;
                }

                &:last-of-type {
                    margin-right: 0;
                }

                &:focus {
                    outline: none;

                    &.cdk-keyboard-focused {
                        .focus-outline();
                    }
                }

                .wizard-step-text {
                    flex: 1;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                }

                .wizard-step-icon {
                    flex: none;
                }
            }
        }

        .wizard-content {
            flex: none;
            background-color: @wizard-content-bg;
            margin: 5px 0 10px;
            padding: 20px;
            min-height: 120px;
        }
    }

    .wizard-footer {
        display: flex;
        flex: none;
        justify-content: flex-end;
        margin: 0 20px;

        .btn {
            margin: 0 8px;

            &:last-of-type {
                margin-right: 0;
            }
        }
    }

    /*
    * Support vertical presentation of the wizard
    */
    &.vertical {
        .wizard-body {
            flex-direction: row;

            .wizard-steps {
                flex: 1;
                max-width: 260px;
                flex-direction: column;
                height: auto;

                .wizard-step {
                    flex: none;
                    margin: 0 8px 8px 0;
                    max-width: none;
                    height: 38px;
                }
            }

            .wizard-content {
                flex: 1;
                margin: 0 22px 8px;
            }
        }
    }
}
[uxHoverActionContainer] {
    [uxHoverAction] {
        opacity: 0;

        &.hover-action-active {
            opacity: 0.5;
        }

        &.hover-action-focused,
        &:hover,
        &:focus {
            opacity: 1;
        }
    }
}
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
}

.gu-hide {
    display: none !important;
}

.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.table tr.cdk-drag-placeholder,
.table tr.cdk-drag-placeholder:hover {
    background-color: @table-grid-bg;
}

.table tr.ux-reorderable-moving td {
    position: relative;
    color: transparent;
}

.table tr.ux-reorderable-moving td:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: fade(@primary, 5%);
    border-top: 1px dashed @primary;
    border-bottom: 1px dashed @primary;
}

.table tr.ux-reorderable-moving td:first-of-type:after {
    border-left: 1px dashed @primary;
}

.table tr.ux-reorderable-moving td:last-of-type:after {
    border-right: 1px dashed @primary;
}

.card.cdk-drag-placeholder {
    visibility: hidden;
}

.cdk-drop-list-dragging .cdk-drag {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #fff;
}

.cdk-drag-placeholder {
    opacity: 0.5;
}

.ux-resizable-table {
    table-layout: fixed;

    .ux-resizable-table-column {
        position: relative;
        overflow: hidden;

        &:last-of-type {
            .ux-resizable-table-column-handle {
                display: none;
            }
        }
    }
}

.ux-resizable-expanding-table {
    table-layout: fixed;

    .ux-resizable-table-column {
        position: relative;
        overflow: hidden;
    }
}

.ux-resizable-table-column {
    justify-content: space-between;

    &.cdk-keyboard-focused .ux-resizable-table-column-handle {
        background-color: transparent;
    }
}

.ux-resizable-table-column-handle {
    content: '';
    position: absolute;
    display: flex;
    justify-content: center;
    background-color: #fff;
    align-items: center;
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
    cursor: ew-resize;

    &.cdk-keyboard-focused {
        .focus-outline();
    }

    .ux-resizable-table-column-handle-icon {
        width: 5px;
        height: 24px;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==);
    }

    &:hover,
    &.ux-drag-dragging {
        background-color: @table-hover-bg;
    }
}