@ux-aspects/ux-aspects/less/ux-aspects.less

Open source user interface framework for building modern, responsive, mobile big data applications

.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;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1)}@media(prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media(forced-colors: active){.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,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.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 {
    con