/*!
 * defaultTheme.css
 * Copyright 2017 - 2020 by ChartIQ, Inc.
 * All rights reserved.
 */

:root {
	/* Color Variables:  Use these variables to make broad-sweeping changes to the colors throughout the application. */
	--core-primary: #22262f;
	--core-primary-1: #171a20;
	--core-primary-2: #373b43;
	--core-primary-3: #3d4455;
	--core-primary-4: #5b606f;
	--core-primary-5: #acb2c0;
	--accent-primary: #42a5ba;
	--accent-primary-1: #36788b;
	--accent-positive: #2cc13f;
	--accent-positive-1: #27ae38;
	--accent-aware: #f5a623;
	--accent-aware-1: #dc951f;
	--accent-aware-2: #f0e400d9;
	--accent-negative: #f26666;
	--accent-negative-1: #b54f4f;
	--scrollbar-color: #fff;

	/* Font Variables:  Use these variables to make changes to the global font styles. */
	--font-family: "OpenSans", sans-serif;
	--font-color: #fff;
	--font-color-1: var(--core-primary-5);
	--font-color-1-shadow: rgb(172 178 192 / 80%); /* 172, 178, 19 same as --font-color-1: var(--core-primary-5);  */
	--font-color-2: #000;
	--font-shadow: rgb(0 0 0 / 50%);
	--font-shadow-light: rgb(255 255 255 / 40%);
	--font-color-3: rgb(10 140 244);
	--font-weight: 600;
	--font-weight-1: 400;
	--font-weight-2: bold;
	--font-size: 12px;
	--font-size-large: 14px;
	--font-size-larger: 16px;
	--font-size-xl: 21px;

	/* Component Variables:  Use these variables to make granular changes to specific components. */

	/* Toolbar */
	--toolbar-font-size: var(--font-size);
	--toolbar-font-color: var(--font-color);
	--toolbar-font-weight: var(--font-weight);
	--toolbar-height: 39px;
	--toolbar-brand-logo-width: 14px;
	--toolbar-brand-logo-height: 16px;
	--toolbar-favorite-delete-icon: var(--core-primary-5);
	--toolbar-favorite-delete-icon-hover: var(--accent-negative);
	--toolbar-background-color: var(--core-primary);
	--toolbar-button-hover-color: var(--core-primary-3);
	--toolbar-resize-area-color: var(--core-primary-3);
	--toolbar-icon-workspace-color: var(--accent-aware);
	--toolbar-icon-app-color: var(--accent-primary);
	--toolbar-icon-font-size: 13px;
	--toolbar-icon-color: var(--font-color);
	--toolbar-separator: 1px solid rgb(255 255 255 / 30%);
	--dashbar-divider-color: var(--toolbar-font-color);

	/* Window Title bar */
	--titleBar-height: 25px;
	--titleBar-font-size: var(--font-size);
	--titleBar-icon-font-size: 8px;
	--titleBar-font-weight: var(--font-weight);
	--titleBar-active-font-color: var(--font-color); /* Not in use by default */
	--titleBar-inactive-font-color: var(--font-color-1);
	--titleBar-linker-font-color: var(--font-color-2);
	--titleBar-linker-font-color-blur: var(--font-color);
	--titleBar-background-inactive-color: var(--core-primary);
	--titleBar-background-active-color: var(--core-primary);
	--titlebar-tab-active-font-color: var(--font-color);
	--titlebar-tab-inactive-font-color: var(--font-color-1);
	--titlebar-tab-hover-font-color: var(--font-color);
	--titlebar-tab-icon-font-color: var(--accent-primary);
	--titlebar-tab-hover-background-color: var(--core-primary-2);
	--titlebar-tab-active-background-color: var(--core-primary-3);
	--titlebar-tab-inactive-background-color: var(--core-primary-1);
	--titlebar-tab-ghost-background-color: var(--accent-primary-1);
	--titlebar-tab-ghost-border-color: var(--accent-primary);
	--titlebar-icon-color: var(--font-color-1);
	--titlebar-icon-hover-color: var(--font-color);
	--titleBar-button-hover-active-color: var(--core-primary-4);
	--titleBar-button-hover-inactive-color: var(--core-primary-3);
	--titleBar-button-highlight-active-color: var(--accent-primary);
	--titleBar-button-highlight-inactive-color: var(--accent-primary-1);
	--titleBar-button-hover-negative-color: var(--accent-negative);
	--titleBar-button-hover-linker-group: var(--core-primary-3);

	/* Dialogs (e.g., singleInput and yesNo) */
	--dialog-title-font-size: 21px;
	--dialog-title-font-weight: var(--font-weight-1);
	--dialog-title-font-family: var(--font-family);
	--dialog-title-font-color: var(--font-color);
	--dialog-question-font-size: var(--font-size);
	--dialog-question-font-weight: var(--font-weight-1);
	--dialog-question-font-color: var(--font-color-1);
	--dialog-background-color: var(--core-primary);
	--dialog-font-color: var(--font-color);
	--dialog-input-font-size: var(--font-size);
	--dialog-input-font-color: var(--font-color);
	--dialog-input-font-weight: var(--font-weight-1);
	--dialog-input-background-color: transparent;
	--dialog-input-border-color: var(--core-primary-3);
	--dialog-input-border-focus-color: var(--accent-primary-1);
	--dialog-input-border-error-color: var(--accent-negative);

	/* Buttons and Inputs */
	--button-font-size: var(--font-size);
	--button-font-weight: var(--font-weight);
	--button-affirmative-background-color: var(--accent-primary);
	--button-affirmative-border-color: transparent;
	--button-affirmative-background-hover-color: var(--accent-primary-1);
	--button-affirmative-border-hover-color: transparent;
	--button-neutral-background-color: transparent;
	--button-neutral-border-color: transparent;
	--button-neutral-border-hover-color: var(--core-primary-5);
	--button-negative-background-color: var(--accent-negative);
	--button-negative-border-color: var(--accent-negative-1);
	--button-negative-background-hover-color: var(--accent-negative-1);
	--button-negative-border-hover-color: var(--accent-negative-1);
	--button-disabled-color: var(--core-primary-4);
	--input-negative-border-color: var(--accent-negative); /* Currently not in use */

	/* Menus */
	--menu-font-size: var(--font-size);
	--menu-font-icon-size: 13px;
	--menu-action-icon-color: var(--core-primary-5);
	--menu-font-weight: var(--font-weight);
	--menu-font-color: var(--font-color);
	--menu-active-workspace-font-weight: var(--font-weight-2);
	--menu-active-workspace-font-color: var(--accent-aware);
	--menu-background-color: var(--core-primary);
	--menu-dragHandle-color: var(--core-primary-4);
	--menu-actions-background-color: var(--core-primary);
	--menu-actions-hover-color: var(--core-primary-3);
	--menu-content-background-color: var(--core-primary);
	--menu-content-hover-color: var(--core-primary-3);
	--menu-favorite-hover-color: var(--accent-primary);
	--menu-favorite-active-hover-color: var(--accent-primary-1);
	--menu-delete-background-hover-color: var(--accent-negative);
	--menu-linker-selected-font-color: var(--font-color);
	--menu-linker-selected-font-size: var(--font-size);
	--icon-avatar-default-background-color: var(--accent-aware);
	--icon-avatar-workspace-background-color: var(--accent-positive);
	--icon-avatar-component-background-color: var(--accent-primary);
	--icon-avatar-component-inactive-background-color: var(--accent-primary-1);
	--icon-avatar-application-background-color: var(--icon-avatar-component-background-color);
	--icon-avatar-layout-background-color: var(--icon-avatar-workspace-background-color);
	--icon-avatar-swimlane-background-color: var(--accent-aware);
	--icon-avatar-action-background-color: var(--accent-negative);

	/* Search Menu */
	--search-menu-font-size: var(--font-size);
	--search-menu-font-color: var(--core-primary-5);
	--search-input-font-color: black;
	--search-input-background-color: white;
	--search-input-border-color: var(--core-primary-3);
	--search-input-focused-border-color: var(--accent-primary);
	--search-input-clear-search-color: var(--core-primary-5);
	--search-input-clear-search-hover-color: var(--menu-font-color);
	--search-menu-header-color: var(--accent-primary);
	--search-hover-background-color: var(--core-primary-3);
	--search-header-font-size: 14px;
	--search-header-font-color: var(--accent-primary);
	--search-header-font-weight: var(--font-weight-2);
	--search-result-font-color: var(--core-primary-5);
	--search-result-font-weight: var(--font-weight-1);
	--search-result-highlighter-color: var(--menu-font-color);
	--search-result-selected-color: var(--core-primary-3);

	/* Window Frame */
	--window-frame-inactive-color: var(--core-primary);
	--window-frame-active-color: var(--core-primary-2);
	--window-border-color: rgb(61 69 85 / 20%);

	/* Window Scrims and Masks */
	--groupMask-background-color: var(--accent-primary);
	--groupMask-border-color: var(--accent-primary-1);
	--scrim-icon-font-color: var(--font-color);
	--scrim-icon-font-size: 100px;
	--scrim-positive-background-color: var(--accent-primary-1);
	--scrim-negative-background-color: var(--accent-negative);

	/* User Preferences */
	--content-font-size: var(--font-size);
	--content-header-font-size: 16px;
	--content-header-font-color: var(--accent-primary);
	--content-font-color: var(--font-color);
	--content-font-weight: var(--font-weight);
	--content-nav-header-font-size: 16px;
	--content-nav-header-font-weight: var(--font-weight);
	--content-nav-header-background-color: var(--core-primary-2);
	--content-nav-background-color: var(--core-primary);
	--content-nav-highlighter: var(--core-primary-3);
	--content-nav-highlighter-hover: var(--core-primary-2);
	--content-background-color: var(--core-primary-1);
	--content-hint-font-color: var(--font-color-1);
	--content-component-list-font-size: var(--font-size);
	--content-list-border-color: var(--core-primary-5);
	--content-list-highlighter: var(--core-primary-3);
	--content-list-drag-icon-color: var(--core-primary-4);
	--content-list-item-flagged-color: var(--accent-primary);
	--content-list-editor-font-color: var(--font-color);
	--content-list-editor-highlighted-text: var(--accent-primary);
	--content-button-label-font-size: var(--font-size);
	--content-button-disabled-border-color: var(--core-primary-2);
	--content-button-icon-color: var(--font-color-1);
	--content-button-neutral-hover-color: var(--core-primary-4);
	--content-checkbox-check-color: var(--font-color);
	--content-checkbox-background-color: var(--accent-primary);
	--content-checkbox-unchecked-border-color: var(--core-primary-5);
	--content-card-background-color: var(--core-primary-2);
	--content-card-bestMatch-background-color: var(--core-primary-2);
	--content-card-icon-background-color: var(--accent-primary-1);
	--content-card-icon-font-size: 20px;
	--content-card-title-font-size: var(--font-size);
	--content-back-font-size: 13px;
	--content-close-hover-color: var(--accent-negative);
	--content-warning-text: var(--accent-aware);
	--content-restart-button-color: var(--accent-primary-1);

	/* Notifications */
	--notification-body-background-color: var(--toolbar-background-color);
	--notification-body-font-color: var(--font-color);
	--notification-body-font-family: var(--font-family);
	--notification-logo-width: 14px;
	--notification-title-font-size: 13px;
	--notification-title-font-weight: var(--font-weight);
	--notification-close-icon-hover-color: var(--accent-negative);
	--notification-description-font-size: 13px;

	/* Process Monitor */
	--procMonitor-font-color: var(--font-color);
	--procMonitor-font-size: var(--font-size);
	--procMonitor-font-weight: var(--font-weight-1);
	--procMonitor-component-name-font-weight: var(--font-weight-1);
	--procMonitor-process-name-font-weight: var(--font-weight);
	--procMonitor-background-color: var(--core-primary);
	--procMonitor-list-border-color: var(--core-primary-3);
	--procMonitor-close-component-font-color: var(--font-color-1);
	--procMonitor-warning-background-color: var(--accent-aware-1);
	--procMonitor-negative-border-color: var(--accent-negative-1);
	--procMonitor-negative-background-color: var(--accent-negative);
	--procMonitor-close-hover-color: var(--accent-negative);

	/* App Catalog */
	--catalog-font-size-header: 14px;
	--catalog-font-size-text: var(--font-size);
	--catalog-font-weight: var(--font-weight);
	--catalog-carousel-font-weight: var(--font-weight-2);
	--catalog-font-color: var(--font-color);
	--catalog-tag-font-color: var(--core-primary-5);
	--catalog-toast-background-color: var(--core-primary);
	--catalog-background-color: var(--core-primary-1);
	--catalog-pagination-dots-color: var(--core-primary-3);
	--catalog-pagination-dots-active-color: var(--core-primary-4);
	--catalog-hero-border-color: transparent;
	--catalog-hero-background-color: var(--core-primary-2);
	--catalog-card-background-color: var(--core-primary);
	--catalog-card-checkmark-unselected-color: var(--core-primary-4);
	--catalog-card-checkmark-selected-color: var(--accent-positive);
	--catalog-section-header-font-color: var(--accent-primary);
	--catalog-search-border-color: var(--core-primary-4);
	--catalog-search-active-border-color: var(--accent-primary-1);
	--catalog-disabled-button-background-color: var(--core-primary-3);

	/* Shared Tag Styles */
	--tag-font-size: 11px;
	--tag-background-color: var(--core-primary-2);
	--tag-background-hover-color: var(--core-primary-3);
	--tag-font-color: var(--font-color);
	--tag-font-weight: var(--font-weight-1);
	--tag-close-icon-hover-color: var(--accent-negative);
	--tag-checkmark-icon-color: var(--accent-positive);

	/* App Menu */
	--appMenu-font-size: var(--font-size);
	--appMenu-font-weight: var(--font-weight);
	--appMenu-tag-font-weight: var(--font-weight-1);
	--appMenu-font-color: var(--font-color);
	--appMenu-leftNav-background-color: var(--core-primary);
	--appMenu-close-hover-color: var(--accent-negative);
	--appMenu-leftNav-highlighter-hover: var(--core-primary-2);
	--appMenu-leftNav-highlighter: var(--core-primary-3);
	--appMenu-leftNav-icon-color: var(--core-primary-4);
	--appMenu-leftNav-contextMenu-background-color: var(--core-primary-3);
	--appMenu-background-color: var(--core-primary-1);
	--appMenu-actions-menu-background-color: var(--core-primary-2);
	--appMenu-app-item-hover-background-color: var(--core-primary-3);
	--appMenu-app-favorite-color: var(--accent-primary);
	--appMenu-app-icon-color: var(--accent-primary);
	--appMenu-sort-inactive-border-color: var(--core-primary-5);
	--appMenu-sort-active-color: var(--accent-primary-1);
	--appMenu-search-input-inactive-color: var(--core-primary-3);
	--appMenu-search-input-active-color: var(--accent-primary-1);
	--appMenu-search-input-error-color: var(--accent-negative);
	--appMenu-edit-icon-hover-color: var(--core-primary-4);
	--appMenu-separator-color: var(--core-primary-3);
	--appMenu-icon-color: var(--font-color-1);

	/* Notifications */
	--notification-primary-color: var(--core-primary);
	--notification-secondary-color: var(--core-primary-5);
	--notification-contrast-color: var(--accent-primary);
	--notification-secondary-contrast-color: var(--core-primary-1);
	--notification-background-color: var(--notification-primary-color);
	--notification-drawer-background-color: var(--notification-secondary-contrast-color);
	--notification-font-family: var(--font-family);
	--notification-font-color: var(--font-color);
	--notification-alert-dot-color: var(--accent-negative-1);
	--notification-highlight-border-color: var(--accent-aware-2);
}
