predix-ui/catalog/main.css

px-* web components as React styled components

/* TODO: insert main styles of your demo here */
a {
  color: blue;
}

@font-face {
  font-family: "GE Inspira Sans";
  font-weight: normal;
  font-style: normal;
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans.eot");
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans.eot?#iefix") format("embedded-opentype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans.woff") format("woff"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans.ttf") format("truetype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans.svg#GE Inspira Sans") format("svg");
}

@font-face {
  font-family: "GE Inspira Sans";
  font-weight: normal;
  font-style: italic;
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Italic.eot");
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Italic.eot?#iefix") format("embedded-opentype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Italic.woff") format("woff"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Italic.ttf") format("truetype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Italic.svg#GE Inspira Sans") format("svg");
}

@font-face {
  font-family: "GE Inspira Sans";
  font-weight: bold;
  font-style: normal;
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Bold.eot");
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Bold.eot?#iefix") format("embedded-opentype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Bold.woff") format("woff"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Bold.ttf") format("truetype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-Bold.svg#GE Inspira Sans") format("svg");
}

@font-face {
  font-family: "GE Inspira Sans";
  font-weight: bold;
  font-style: italic;
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-BoldItalic.eot");
  src: url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-BoldItalic.eot?#iefix") format("embedded-opentype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-BoldItalic.woff") format("woff"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-BoldItalic.ttf") format("truetype"), url("//dzlpbrbc7yvq0.cloudfront.net/predixdev/fonts/2.0.0/GEInspiraSans-BoldItalic.svg#GE Inspira Sans") format("svg");
}

html {
  font-family: "GE Inspira Sans", sans-serif;
}


/** Font weights */

.weight--normal {
  font-weight: 400 !important;
}

.weight--bold {
  font-weight: 600 !important;
}


/** the html and :host declarations cannot be adjacent to one other or cssmin will combine them into a single rule, breaking in Safari and Firefox. */

:host {
  font-family: "GE Inspira Sans", sans-serif;
}


/* Text-level semantics ========================================================================== */


/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */

abbr[title] {
  border-bottom: 1px dotted;
}


/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */

b, strong {
  font-weight: bold;
}


/** Address styling not present in Safari and Chrome. */

dfn {
  font-style: italic;
}


/** Address styling not present in IE 8/9. */

mark {
  background: #ff0;
  color: #000;
}


/** Address inconsistent and variable font size in all browsers. */

small {
  font-size: 80%;
}


/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

:root {
  --px-base-text-color: #2c404c;
  --px-base-background-color: white;
  --px-actionable-text-color: #007acc;
  --px-actionable-text-color--hover: #005c99;
  --px-actionable-text-color--active: #003d66;
  --px-selectable-text-color: #09819c;
  --px-selectable-text-color--hover: #065769;
  --px-selectable-text-color--active: #032c36;
  --px-actionable-alt-text-color: #2c404c;
  --px-actionable-alt-text-color--hover: #007acc;
  --px-actionable-alt-text-color--active: #003d66;
  --px-actionable-disabled-text-color: rgba(136, 154, 165, 0.5);
  --px-btn-group-text-color: white;
  --px-btn-group-background-color: #09819c;
  --px-btn-group-background-color--hover: #a3b5bf;
  --px-btn-group-background-color--pressed: #889aa5;
  --px-btn-group-border-color: transparent;
  --px-btn-group-border-color--hover: transparent;
  --px-btn-group-border-color--pressed: transparent;
  --px-btn-color: #2c404c;
  --px-btn-background: #d8e0e5;
  --px-btn-background--hover: #a3b5bf;
  --px-btn-background--pressed: #889aa5;
  --px-btn-border-color: transparent;
  --px-btn-border-color--hover: transparent;
  --px-btn-border-color--pressed: transparent;
  --px-btn-shadow: none;
  --px-btn-shadow--light: none;
  --px-btn-primary-color: white;
  --px-btn-primary-background: #364c59;
  --px-btn-primary-background--hover: #23343f;
  --px-btn-primary-background--pressed: #121f26;
  --px-btn-primary-border-color: transparent;
  --px-btn-tertiary-color: #007acc;
  --px-btn-tertiary-color--hover: #005c99;
  --px-btn-tertiary-color--pressed: #003d66;
  --px-btn-tertiary-background: white;
  --px-btn-tertiary-background--hover: #c5d1d8;
  --px-btn-tertiary-background--pressed: #96a8b2;
  --px-btn-tertiary-border-color: #889aa5;
  --px-btn-disabled-color: rgba(136, 154, 165, 0.5);
  --px-btn-disabled-background: transparent;
  --px-btn-disabled-border-color: rgba(136, 154, 165, 0.4);
  --px-btn-call-to-action-color: white;
  --px-btn-call-to-action-background: #007acc;
  --px-btn-call-to-action-background--hover: #005c99;
  --px-btn-call-to-action-background--pressed: #003d66;
  --px-btn-call-to-action-disabled-color: white;
  --px-btn-call-to-action-disabled-background: #6fc9fa;
  --px-btn-icon-border: 0 solid;
  --px-btn-icon-background: transparent;
  --px-btn-bare-color: #2c404c;
  --px-btn-bare-color--hover: #007acc;
  --px-btn-bare-color--pressed: #003d66;
  --px-btn-primary-bare-color--visited: #007acc;
  --px-btn-primary-bare-color--hover: #005c99;
  --px-btn-primary-bare-color--pressed: #003d66;
  --px-code-text-color: #4056aa;
  --px-code-background-color: #ebeff2;
  --px-code-border-color: transparent;
  --px-input-text-color: #2c404c;
  --px-input-label-text-color: #677e8c;
  --px-input-text-color--placeholder: rgba(136, 154, 165, 0.6);
  --px-input-text-color--placeholder--focused: rgba(136, 154, 165, 0.6);
  --px-input-text-color--help: #677e8c;
  --px-input-background-color: transparent;
  --px-input-background-color--hover: #d8e0e5;
  --px-input-background-color--disabled: transparent;
  --px-input-background-color--focused: #eefbff;
  --px-input-border-color--outer: #889aa5;
  --px-input-border-color--outer--focused: #007acc;
  --px-input-text-color--focused: #2c404c;
  --px-input-text-color--disabled: rgba(136, 154, 165, 0.5);
  --px-input-border-color--disabled: rgba(136, 154, 165, 0.4);
  --px-input-textarea-background--focused: #eefbff;
  --px-select-text-color: #2c404c;
  --px-select-background-color: #d8e0e5;
  --px-select-background-color--hover: #a3b5bf;
  --px-select-background-color--active: #889aa5;
  --px-select-border-color: transparent;
  --px-select-text-color: #2c404c;
  --px-multiselect-background-color: #ebeff2;
  --px-validation-warning-text-color: #ff8b3a;
  --px-validation-warning-background-color: #fff0e6;
  --px-validation-error-text-color: #f34336;
  --px-validation-error-background-color: #ffecec;
  --px-validation-success-text-color: #7fae1b;
  --px-validation-success-background-color: #ecffee;
  --px-headings-heading-page-color: #2c404c;
  --px-headings-heading-section-color: #677e8c;
  --px-headings-heading-subsection-color: #2c404c;
  --px-headings-heading-subsection-background: rgba(136, 154, 165, 0.15);
  --px-headings-label-color: #677e8c;
  --px-headings-value-color: #2c404c;
  --px-list-ui-border-color: #677e8c;
  --px-list-ui-separator-color: #b6c3cc;
  --px-table-border-color: #677e8c;
  --px-table-separator-color: #b6c3cc;
  --px-toggle__background--checked: #007acc;
  --px-toggle__background--checked--hover: #005c99;
  --px-toggle__background--checked--pressed: #003d66;
  --px-toggle__background--checked--disabled: rgba(136, 154, 165, 0.5);
  --px-toggle__background--unchecked: #d8e0e5;
  --px-toggle__background--unchecked--hover: #b6c3cc;
  --px-toggle__background--unchecked--pressed: #748b99;
  --px-toggle__background--unchecked--disabled: white;
  --px-toggle__background-border--unchecked: #889aa5;
  --px-toggle__background-border--unchecked--hover: #677e8c;
  --px-toggle__background-border--unchecked--pressed: #4f6472;
  --px-toggle__background-border--unchecked--disabled: rgba(136, 154, 165, 0.5);
  --px-toggle__switch: white;
  --px-toggle__switch--hover: #c5d1d8;
  --px-toggle__switch--pressed: #96a8b2;
  --px-toggle__switch--disabled: white;
  --px-toggle__switch-border: #889aa5;
  --px-toggle__switch-border--hover: #677e8c;
  --px-toggle__switch-border--pressed: #4f6472;
  --px-toggle__switch-border--disabled: rgba(136, 154, 165, 0.5);
  /***********************************/
  /* Default Theme for Px Components */
  /***********************************/
  --px-alert-label-border-color: transparent;
  --px-alert-label-text-color--important: white;
  --px-alert-label-background-color--important: #f34336;
  --px-alert-label-text-color--warning: white;
  --px-alert-label-background-color--warning: #ff8b3a;
  --px-alert-label-text-color--error: #595502;
  --px-alert-label-background-color--error: #fec600;
  --px-alert-label-text-color--information: white;
  --px-alert-label-background-color--information: #1479c9;
  --px-alert-label-text-color--healthy: white;
  --px-alert-label-background-color--healthy: #7fae1b;
  --px-alert-label-text-color--unknown: white;
  --px-alert-label-background-color--unknown: #b8b8b8;
  --px-alert-message-background-color: white;
  --px-alert-message-text-color: #2c404c;
  --px-alert-message-color--important: #f34336;
  --px-alert-message-color--warning: #ff8b3a;
  --px-alert-message-color--error: #fec600;
  --px-alert-message-color--information: #1479c9;
  --px-alert-message-color--unknown: #b8b8b8;
  --px-alert-message-dismiss-icon-color: #889aa5;
  --px-app-nav-background-color: #e2e8ed;
  --px-app-nav-item-background-color--collapsed: white;
  --px-app-nav-item-background-color--empty: #c5d1d8;
  --px-app-nav-item-background-color--hover: #c5d1d8;
  --px-app-nav-item-background-color--pressed: #b6c3cc;
  --px-app-nav-item-background-color--selected: white;
  --px-app-nav-item-background-color: #e2e8ed;
  --px-app-nav-item-icon-color--collapsed: #2c404c;
  --px-app-nav-item-icon-color--hover: #2c404c;
  --px-app-nav-item-icon-color--pressed: #2c404c;
  --px-app-nav-item-icon-color--selected: #2c404c;
  --px-app-nav-item-icon-color: #2c404c;
  --px-app-nav-item-stripe-color--selected: #09819c;
  --px-app-nav-item-text-color--collapsed: #2c404c;
  --px-app-nav-item-text-color--hover: #2c404c;
  --px-app-nav-item-text-color--pressed: #2c404c;
  --px-app-nav-item-text-color--selected: #2c404c;
  --px-app-nav-item-text-color: #2c404c;
  --px-app-nav-subitem-background-color--hover: #ebeff2;
  --px-app-nav-subitem-background-color--selected: #09819c;
  --px-app-nav-subitem-background-color: white;
  --px-app-nav-subitem-text-color--collapsed: #2c404c;
  --px-app-nav-subitem-text-color--hover: #2c404c;
  --px-app-nav-subitem-text-color--selected: white;
  --px-app-nav-subitem-text-color: #2c404c;
  --px-app-nav-subitem-background-color--collapsed: #e2e8ed;
  --px-app-nav-subitem-background-color--collapsed-hover: #c5d1d8;
  --px-app-nav-subitem-text-color--parent-collapsed-selected: #2c404c;
  --px-app-nav-subitem-background-color--parent-collapsed-selected: #e2e8ed;
  --px-app-nav-subitem-accent-color--parent-collapsed-selected: #09819c;
  --px-app-nav-subitem-background-color--parent-collapsed-hover: #ebeff2;
  --px-app-nav-subitem-background-color--parent-collapsed-selected: #09819c;
  --px-app-nav-subitem-text-color--parent-collapsed-selected: white;
  --px-app-nav-subitem-text-color--parent-collapsed-not-selected: #2c404c;
  --px-app-nav-subitem-background-color--parent-collapsed-not-selected: white;
  --px-ge-svg-logo-color: #889aa5;
  --px-branding-bar-background-color: #1b2a33;
  --px-branding-bar-logo-and-title-text-color: #889aa5;
  --px-card-background-color: #ebeff2;
  --px-card-border-color: #d8e0e5;
  --px-card-header-color: #677e8c;
  --px-card-icon-color: #677e8c;
  --px-card-action-icon-color: #677e8c;
  --px-card-action-icon-color--hover: #007acc;
  --px-card-action-icon-color--pressed: #003d66;
  --px-deck-selector-border-color: #d8e0e5;
  --px-deck-selector-shadow-color: rgba(0, 0, 0, 0.2);
  --px-deck-selector-background-color: white;
  --px-deck-selector-text-color: #2c404c;
  --px-deck-selector-background-color--hover: #ebeff2;
  --px-deck-selector-text-color--hover: #2c404c;
  --px-deck-selector-background-color--selected: #09819c;
  --px-deck-selector-text-color--selected: white;
  --px-deck-selector-li-border: #e2e8ed;
  --px-breadcrumbs-chevron-color: #c5d1d8;
  --px-percent-circle-fill-color: #5abff8;
  --px-percent-circle-background-color: #b6c3cc;
  --px-percent-circle-text-color: #2c404c;
  --px-simple-bar-chart-text-color: #2c404c;
  --px-simple-bar-chart-background-color: transparent;
  --px-simple-bar-chart-axis-color: #677e8c;
  --px-simple-horizontal-bar-chart-background-color: transparent;
  --px-simple-horizontal-bar-chart-legend-text-color: #2c404c;
  --px-simple-horizontal-bar-chart-label-text-color: #2c404c;
  --px-simple-horizontal-bar-chart-axis-color: #677e8c;
  --px-simple-line-chart-background-color: transparent;
  --px-simple-line-chart-border-color: #677e8c;
  --px-simple-line-chart-grid-color: #d8e0e5;
  --px-simple-line-chart-bottom-color: transparent;
  --px-simple-line-chart-axis-bar-color: #ebeff2;
  --px-simple-line-chart-axis-label-color: #677e8c;
  --px-simple-line-chart-axis-label-font-weight: normal;
  --px-simple-line-chart-line-color: #5abff8;
  --px-simple-line-chart-threshold-line-color: #e9a24b;
  --px-win-loss-border-color: #677e8c;
  --px-win-loss-background-color: transparent;
  --px-win-loss-positive-fill-color: #92ce40;
  --px-win-loss-negative-fill-color: #e58189;
  --px-chip-background-color: transparent;
  --px-chip-background-color--hover: rgba(103, 126, 140, 0.2);
  --px-chip-background-color--selected: white;
  --px-chip-border-color: #889aa5;
  --px-chip-border-color--hover: #889aa5;
  --px-chip-border-color--selected: #007acc;
  --px-chip-text-color: #677e8c;
  --px-chip-text-color--selected: #007acc;
  --px-chip-icon-color: #677e8c;
  --px-chip-icon-color--hover: #007acc;
  --px-clipboard-icon-color: #2c404c;
  --px-clipboard-icon-color--hover: #007acc;
  --px-clipboard-icon-color--pressed: #003d66;
  --px-clipboard-icon-color--copied: #7fae1b;
  --px-context-browser-header-background-color: #ebeff2;
  --px-context-browser-header-border-color: #d8e0e5;
  --px-context-browser-header-text-color: #09819c;
  --px-context-browser-icon-stroke: #2c404c;
  --px-context-browser-item-text-color: #2c404c;
  --px-context-browser-item-background-color--hover: #ebeff2;
  --px-context-browser-item-background-color--selected: #09819c;
  --px-context-browser-item-color--selected: white;
  --px-context-browser-item-text-color--selected: white;
  --px-context-browser-icon-stroke--item-selected: white;
  --px-context-browser-panel-border-color: #d8e0e5;
  --px-context-browser-panel-background-color: white;
  --px-context-browser-loading-background-color: #007acc;
  --px-context-browser-loading-foreground-color: #b5e5fd;
  --px-context-browser-icon-select-stroke: #4f7b00;
  --px-context-browser-icon-select-fill: #86c600;
  --px-context-browser-icon-favorite-stroke: #8a8300;
  --px-context-browser-icon-favorite-fill: #dbd139;
  --px-context-browser-trigger-hover-background: #d8e0e5;
  --px-context-browser-trigger-icon-color: #2c404c;
  --px-data-table-border-color: #677e8c;
  --px-data-table-separator-color: #b6c3cc;
  --px-data-table-header-text-color: inherit;
  --px-data-table-header-background-color: inherit;
  --px-data-table-background-color-striped--even: rgba(136, 154, 165, 0.1);
  --px-data-table-cell-border-validation--failed: #f34336;
  --px-data-table-cell-border-color--edit: #007acc;
  --px-data-table-cell-border-color--selected: rgba(136, 154, 165, 0.2);
  --px-data-table-cell-border-validation--failed: #f34336;
  --px-data-table-cell-background-color--selected: rgba(136, 154, 165, 0.2);
  --px-data-table-cell-background-color--edit: transparent;
  --px-data-table-cell-text-color--selected: #2c404c;
  --px-data-table-cell-text-color-validation--failed: #f34336;
  --px-data-table-cell-text-color--sorted: #09819c;
  --px-data-table-cell-text-color--editing: #2c404c;
  --px-data-table-results-text-color--none: #889aa5;
  --px-data-table-insertion-indicator-td-background-color: #007acc;
  --px-data-table-text-input-background-color--filter: white;
  --px-data-table-tr--filter: white;
  --px-data-table-text-color--dragged: #007acc;
  --px-data-table-text-color--hover: #005c99;
  --px-data-table-highlight--high: rgba(243, 67, 54, 0.25);
  --px-data-table-highlight--medium: rgba(254, 198, 0, 0.25);
  --px-data-table-highlight--low: rgba(20, 121, 201, 0.25);
  --px-calendar-background-color--hover: rgba(163, 181, 191, 0.2);
  --px-calendar-background-color--pressed: #032c36;
  --px-calendar-background-color--selected: #09819c;
  --px-calendar-title-color: #677e8c;
  --px-calendar-text-color: #2c404c;
  --px-calendar-text-color--hover: #2c404c;
  --px-calendar-text-color--selected: white;
  --px-calendar-alt-background-color: #e6fbff;
  --px-calendar-sub-labels--text-color: #a3b5bf;
  --px-calendar-today-border: #09819c;
  --px-datetime-icon-color: #677e8c;
  --px-datetime-read-only-text-color: #b6c3cc;
  --px-datetime-entry-selected: #a6dffc;
  --px-datetime-preset-title-color: #677e8c;
  --px-datetime-dropdown-content-color: var(--px-base-text-color);
  --dt-field-background-color-fix: white;
  --px-datetime-picker-border-color: #d8e0e5;
  --px-datetime-picker-background-color: white;
  --px-datetime-range-field-to-color: #677e8c;
  --px-range-panel-border-color: #d8e0e5;
  --px-range-panel-background-color: white;
  --px-demo-snippet-background-color: #e2e8ed;
  --px-dropdown-bg-color: white;
  --px-dropdown-bg-color--hover: #ebeff2;
  --px-dropdown-bg-color--selected: #09819c;
  --px-dropdown-text-color--disabled: #c5d1d8;
  --px-dropdown-text-color--selected: white;
  --px-dropdown-border-color: #d8e0e5;
  --px-dropdown-text-color: #2c404c;
  --px-file-upload-file-list-color: #677e8c;
  --px-file-upload-validation-color: #f34336;
  --px-file-upload-dropzone-background-color: #eefbff;
  --px-heatmap-grid-start-color: #ebeff2;
  --px-heatmap-grid-end-color: #f34336;
  --px-heatmap-grid-table-border-color: #c5d1d8;
  --px-inbox-border-color: #d8e0e5;
  --px-inbox-secondary-text-color: #677e8c;
  --px-inbox-li-background-color: #ebeff2;
  --px-inbox-li-background-color--selected: #09819c;
  --px-inbox-li-text-color--selected: white;
  --px-inbox-icon-outline-color: white;
  --px-inbox-alert-color: #f34336;
  --px-inbox-warning-color: #ff8b3a;
  --px-inbox-error-color: #fec600;
  --px-inbox-information-color: #1479c9;
  --px-inbox-height: 100vh;
  --px-inbox-list-width: 320px;
  --px-kpi-text-color: #2c404c;
  --px-kpi-secondary-text-color: #677e8c;
  --px-kpi-border-color: #677e8c;
  --px-kpi-separator-color: #b6c3cc;
  --px-login-text-color: #b6c3cc;
  --px-map-icon-unknown-color: #8f8f8f;
  --px-map-icon-info-color: #007acc;
  --px-map-icon-warning-color: #ff8b3a;
  --px-map-icon-important-color: #f34336;
  --px-map-icon-border-color: white;
  --px-map-icon-symbol-color: white;
  --px-map-marker-group-cluster-path-size: 10px;
  --px-map-marker-group-cluster-font-size: 15px;
  --px-map-marker-group-cluster-font-color: #007acc;
  --px-map-marker-group-cluster-font-weight: normal;
  --px-map-marker-group-cluster-font-color: inherit;
  --px-map-marker-group-cluster-font-size: inherit;
  --px-map-marker-group-cluster-font-weight: inherit;
  --px-map-marker-group-cluster-line-height: inherit;
  --px-map-marker-group-cluster-border-size: 5px;
  --px-map-marker-group-cluster-border-color: rgba(0, 0, 0, 0.3);
  --px-map-marker-group-cluster-polygon-stroke-color: #adb9ff;
  --px-map-marker-group-cluster-polygon-fill-color: #8098ff;
  --px-map-marker-group-cluster-background-color: white;
  --px-map-control-button-background-color: white;
  --px-map-control-button-text-color: #007acc;
  --px-map-control-button-border-width: 3px;
  --px-map-control-button-border-color: rgba(0, 0, 0, 0.3);
  --px-map-control-button-background-color--hover: #e2e8ed;
  --px-map-control-button-text-color--hover: #005c99;
  --px-map-control-button-border-color--disabled: #c5d1d8;
  --px-map-control-button-text-color--disabled: #c5d1d8;
  --px-map-info-control-background-color: white;
  --px-map-info-control-border-color: #c5d1d8;
  --px-map-data-box-border-color__top: #c5d1d8;
  --px-map-data-box-border-color__left: #c5d1d8;
  --px-map-popup-content-wrapper-border: #a3b5bf;
  --px-map-marker-locate-icon-color: #007acc;
  --px-map-marker-locate-icon-border-color: white;
  --px-map-marker-locate-icon-accuracy-color: black;
  --px-map-marker-locate-icon-accuracy-opacity: 0.3;
  --px-modal-background-color: white;
  --px-modal-overlay-color: rgba(0, 0, 0, 0.7);
  --px-modal-border-color: transparent;
  --px-modal-text-color: #2c404c;
  --px-modal-btn--disabled: #c5d1d8;
  --px-overlay-color: rgba(0, 0, 0, 0.65);
  --px-popover-background-color: white;
  --px-popover-border-color: #d8e0e5;
  --px-popover-text-color: #2c404c;
  --px-popover-shadow-color: rgba(0, 0, 0, 0.15);
  --px-progress-bar-fill-color: #007acc;
  --px-progress-bar-background-color: #b5e5fd;
  --px-slider-border-color: transparent;
  --px-slider-border-color--disabled: rgba(136, 154, 165, 0.5);
  --px-slider-border-color--selected: #007acc;
  --px-slider-background-color: rgba(136, 154, 165, 0.4);
  --px-slider-background-color--disabled: white;
  --px-slider-background-color--selected: #007acc;
  --px-slider-background-color--hover: #005c99;
  --px-slider-background-color--pressed: #003d66;
  --px-slider-progress-border-color--disabled: rgba(136, 154, 165, 0.5);
  --px-slider-progress-background-color--disabled: rgba(136, 154, 165, 0.5);
  --px-handle-stroke-color: #889aa5;
  --px-handle-stroke-color--hover: #889aa5;
  --px-handle-stroke-color--active: #889aa5;
  --px-handle-color--disabled: rgba(136, 154, 165, 0.5);
  --px-handle-background-color: white;
  --px-handle-background-color--hover: #c5d1d8;
  --px-handle-background-color--active: #96a8b2;
  --px-handle-background-color--disabled: white;
  --px-slider-label-color: #2c404c;
  --px-spinner-fill-color: #007acc;
  --px-spinner-background-color: #b5e5fd;
  --px-table-row-color: inherit;
  --px-table-row-background-color: white;
  --px-table-row-selected-background-color: #09819c;
  --px-table-row-selected-color: white;
  --px-table-row-title-color: inherit;
  --px-table-row-subtitle-color: #889aa5;
  --px-table-row-body-color: #677e8c;
  --px-table-row-label-color: #677e8c;
  --px-table-row-header-color: inherit;
  --px-table-row-header-background-color: #e2e8ed;
  --px-table-row-border-color: #677e8c;
  --px-table-row-separator-color: #b6c3cc;
  --px-table-row-button-color-alert: #f34336;
  --px-table-row-button-color-alert-hover: #f9a59f;
  --px-table-row-button-color-alert-pressed: #b40000;
  --px-table-row-button-color-warn: #ff8b3a;
  --px-table-row-button-color-warn-hover: #ffc499;
  --px-table-row-button-color-warn-pressed: #cc5500;
  --px-table-row-button-color-primary: #007acc;
  --px-table-row-button-color-primary-hover: #005c99;
  --px-table-row-button-color-primary-pressed: #003d66;
  --px-table-row-button-color-info: #677e8c;
  --px-table-row-button-color-info-hover: #889aa5;
  --px-table-row-button-color-info-pressed: #4f6472;
  --px-table-row-button-font-color: white;
  --px-tab-color: #677e8c;
  --px-tab-color--hover: #09819c;
  --px-tab-color--active: #032c36;
  --px-tab-color--selected: #09819c;
  --px-tab-border-color: #b6c3cc;
  --px-tile-background-color: #ebeff2;
  --px-tile-thumbnail-background-color: white;
  --px-tile-overlay-background-color: #1b2a33;
  --px-tile-overlay-text-color: #ebeff2;
  --px-timeline-border-color: #677e8c;
  --px-timeline-text-color: #2c404c;
  --px-timeline-alt-text-color: #677e8c;
  --px-timeline-quote-mark-color: #e2e8ed;
  --px-tree-text-color--hover: #2c404c;
  --px-tree-background-color--hover: #ebeff2;
  --px-tree-text-color--selected: white;
  --px-tree-background-color--selected: #09819c;
  --px-tooltip-background-color: white;
  --px-tooltip-text-color: #2c404c;
  --px-tooltip-border-color: #d8e0e5;
  --px-tooltip-shadow-color: rgba(0, 0, 0, 0.15);
  --px-typeahead-background-color: white;
  --px-typeahead-background-color--hover: #ebeff2;
  --px-typeahead-background-color--selected: #09819c;
  --px-typeahead-border-color: #d8e0e5;
  --px-typeahead-box-shadow-color: rgba(0, 0, 0, 0.15);
  --px-typeahead-text-color: #2c404c;
  --px-typeahead-text-color--hover: #2c404c;
  --px-typeahead-text-color--selected: white;
  --px-typeahead-icon-color: #2c404c;
  --px-typeahead-icon-color--disabled: rgba(136, 154, 165, 0.5);
  --px-view-header-background-color: #e2e8ed;
  --px-view-header-title-color: #2c404c;
  --px-view-header-subtitle-color: #677e8c;
  --px-vis-font-family: "GE Inspira Sans";
  --px-vis-axis-brush-outline-color: #007acc;
  --px-vis-axis-brush-fill-color: #96a8b2;
  --px-vis-axis-brush-fill-opacity: 0.3;
  --px-vis-axis-color: #677e8c;
  --px-vis-axis-title-color: #677e8c;
  --px-vis-axis-common-tick-color: #677e8c;
  --px-vis-axis-inline-title-color: #b6c3cc;
  --px-vis-axis-inline-type-color: white;
  --px-vis-axis-inline-box-color: #b6c3cc;
  --px-dynamic-menu-icon-color: #007acc;
  --px-dynamic-menu-background-color: white;
  --px-dynamic-menu-border-color: #d8e0e5;
  --px-dynamic-menu-text-color: #2c404c;
  --px-dynamic-menu-item-background-color: #09819c;
  --px-dynamic-menu-item-text-color: white;
  --px-vis-nav-brush-outline-color: #677e8c;
  --px-vis-nav-brush-fill-color: #677e8c;
  --px-vis-nav-brush-opacity: 0.2;
  --px-vis-nav-brush-gradient-fill-color: #677e8c;
  --px-vis-nav-brush-gradient-opacity-1: 0.1;
  --px-vis-nav-brush-gradient-opacity-2: 0.8;
  --px-vis-nav-brush-handle-fill-color: white;
  --px-vis-nav-brush-handle-lines-color: #677e8c;
  --px-vis-nav-brush-handle-fill-color-hover: #677e8c;
  --px-vis-nav-brush-handle-lines-color-hover: #4f6472;
  --px-vis-nav-brush-handle-fill-color-press: #4f6472;
  --px-vis-nav-brush-handle-lines-color-press: #364c59;
  --px-vis-cursor-line-color: #96a8b2;
  --px-vis-event-line-color: #889aa5;
  --px-vis-event-icon-color: #677e8c;
  --px-vis-gridlines-color: #d8e0e5;
  --px-vis-pie-empty-color: #cccccc;
  --px-vis-threshold-color: #4f6472;
  --px-vis-zoom-brush-outline-color: #96a8b2;
  --px-vis-zoom-brush-fill-color: #e2e8ed;
  --px-vis-zoom-brush-fill-opacity: 0.5;
  --px-vis-lasso-outline-color: #4f6472;
  --px-vis-lasso-fill-color: none;
  --px-vis-lasso-fill-opacity: 0.5;
  --px-vis-pie-title-color: #677e8c;
  --px-vis-pie-title-value-color: #2c404c;
  --px-vis-pie-title-font-size: 45px;
  --px-vis-pie-title-value-font-size: 45px;
  --px-vis-register-series-name: #677e8c;
  --px-vis-register-data-value: #2c404c;
  --px-vis-register-box: #d8e0e5;
  --px-vis-toolbar-icon-color: #2c404c;
  --px-vis-toolbar-selected-color: #007acc;
  --px-vis-toolbar-hover-color: #005c99;
  --px-vis-toolbar-active-color: #007acc;
  --px-vis-toolbar-subrow-background-color: rgba(163, 181, 191, 0.5);
  --px-vis-toolbar-submenu-z-index: 2;
  --px-vis-series-color-0: #5abff8;
  --px-vis-series-color-1: #e28d17;
  --px-vis-series-color-2: #7bbc00;
  --px-vis-series-color-3: #a677ef;
  --px-vis-series-color-4: #ffa076;
  --px-vis-series-color-5: #6184ff;
  --px-vis-series-color-6: #db6abc;
  --px-vis-series-color-7: #4d978b;
  --px-vis-series-color-8: #de4377;
  --px-vis-series-color-9: #659540;
  --px-vis-series-color-10: #e05455;
  --px-vis-series-color-11: #4882a8;
  --px-vis-series-color-12: #d3c800;
  --px-vis-series-color-13: #7a7a7a;
  --px-vis-series-color-14: #b2912e;
  --px-vis-series-color-15: #82d2fb;
  --px-vis-series-color-16: #ecaf68;
  --px-vis-series-color-17: #92ce40;
  --px-vis-series-color-18: #bf9ef4;
  --px-vis-series-color-19: #f2bf9f;
  --px-vis-series-color-20: #95a7ff;
  --px-vis-series-color-21: #e393d2;
  --px-vis-series-color-22: #78baaf;
  --px-vis-series-color-23: #df669b;
  --px-vis-series-color-24: #8eb47c;
  --px-vis-series-color-25: #e58189;
  --px-vis-series-color-26: #7da7c3;
  --px-vis-series-color-27: #e1d75e;
  --px-vis-series-color-28: #a3a3a3;
  --px-vis-series-color-29: #cab272;
  --px-vis-series-color-30: #a6dffc;
  --px-vis-series-color-31: #f2c89a;
  --px-vis-series-color-32: #aedc80;
  --px-vis-series-color-33: #d2bbf9;
  --px-vis-series-color-34: #f6d4bf;
  --px-vis-series-color-35: #b9c3ff;
  --px-vis-series-color-36: #e9b4e0;
  --px-vis-series-color-37: #aed5cf;
  --px-vis-series-color-38: #e594bd;
  --px-vis-series-color-39: #b0cca6;
  --px-vis-series-color-40: #eba9b0;
  --px-vis-series-color-41: #a8c4d6;
  --px-vis-series-color-42: #ebe393;
  --px-vis-series-color-43: #cccccc;
  --px-vis-series-color-44: #dccaa0;
  --px-vis-series-color-45: #3b7ea4;
  --px-vis-series-color-46: #955c11;
  --px-vis-series-color-47: #4f7b00;
  --px-vis-series-color-48: #6b4c9b;
  --px-vis-series-color-49: #9d6c4e;
  --px-vis-series-color-50: #4056aa;
  --px-vis-series-color-51: #90457b;
  --px-vis-series-color-52: #315e57;
  --px-vis-series-color-53: #912948;
  --px-vis-series-color-54: #42622a;
  --px-vis-series-color-55: #903537;
  --px-vis-series-color-56: #2e546d;
  --px-vis-series-color-57: #8a8300;
  --px-vis-series-color-58: #4d4d4d;
  --px-vis-series-color-59: #745e1f;
  --px-vis-series-color-60: #6fc9fa;
  --px-vis-series-color-61: #e9a24b;
  --px-vis-series-color-62: #86c600;
  --px-vis-series-color-63: #b48cf2;
  --px-vis-series-color-64: #f0b38d;
  --px-vis-series-color-65: #8098ff;
  --px-vis-series-color-66: #e081c9;
  --px-vis-series-color-67: #5dac9f;
  --px-vis-series-color-68: #de5288;
  --px-vis-series-color-69: #7ba662;
  --px-vis-series-color-70: #e36e74;
  --px-vis-series-color-71: #6797b8;
  --px-vis-series-color-72: #dbd139;
  --px-vis-series-color-73: #8f8f8f;
  --px-vis-series-color-74: #c0a455;
  --px-vis-series-color-75: #99dafb;
  --px-vis-series-color-76: #f0bf88;
  --px-vis-series-color-77: #a4d76b;
  --px-vis-series-color-78: #ccb1f7;
  --px-vis-series-color-79: #f4ccb4;
  --px-vis-series-color-80: #adb9ff;
  --px-vis-series-color-81: #e7a8db;
  --px-vis-series-color-82: #93c8bf;
  --px-vis-series-color-83: #e284b2;
  --px-vis-series-color-84: #a4c497;
  --px-vis-series-color-85: #e99ba3;
  --px-vis-series-color-86: #99bad0;
  --px-vis-series-color-87: #e8e082;
  --px-vis-series-color-88: #b8b8b8;
  --px-vis-series-color-89: #d6c28f;
  --px-vis-series-color-90: #b5e5fd;
  --px-vis-series-color-91: #f4d2ad;
  --px-vis-series-color-92: #bbe297;
  --px-vis-series-color-93: #d9c6f9;
  --px-vis-series-color-94: #f7dbc9;
  --px-vis-series-color-95: #c5cdff;
  --px-vis-series-color-96: #ecbfe5;
  --px-vis-series-color-97: #c9e3df;
  --px-vis-series-color-98: #e8a5c8;
  --px-vis-series-color-99: #bdd4b5;
  --px-vis-series-color-100: #edb6bd;
  --px-vis-series-color-101: #b6cedd;
  --px-vis-series-color-102: #efe8a5;
  --px-vis-series-color-103: #e0e0e0;
  --px-vis-series-color-104: #e1d3b0;
  --px-vis-series-color-105: #2f6787;
  --px-vis-series-color-106: #7c4d10;
  --px-vis-series-color-107: #406600;
  --px-vis-series-color-108: #594080;
  --px-vis-series-color-109: #815940;
  --px-vis-series-color-110: #36488e;
  --px-vis-series-color-111: #773966;
  --px-vis-series-color-112: #23433e;
  --px-vis-series-color-113: #78213c;
  --px-vis-series-color-114: #355023;
  --px-vis-series-color-115: #782c2e;
  --px-vis-series-color-116: #26455a;
  --px-vis-series-color-117: #736d00;
  --px-vis-series-color-118: #3d3d3d;
  --px-vis-series-color-119: #604e1a;
  --px-vis-series-color-120: #4da4d5;
  --px-vis-series-color-121: #c47a14;
  --px-vis-series-color-122: #679f00;
  --px-vis-series-color-123: #8c65cb;
  --px-vis-series-color-124: #cb8c63;
  --px-vis-series-color-125: #526fda;
  --px-vis-series-color-126: #bb5a9f;
  --px-vis-series-color-127: #3e796f;
  --px-vis-series-color-128: #bc385e;
  --px-vis-series-color-129: #557e36;
  --px-vis-series-color-130: #be4748;
  --px-vis-series-color-131: #3e7091;
  --px-vis-series-color-132: #b4ab00;
  --px-vis-series-color-133: #666666;
  --px-vis-series-color-134: #977b27;
  --px-vis-series-color-135: #245069;
  --px-vis-series-color-136: #613c0d;
  --px-vis-series-color-137: #325000;
  --px-vis-series-color-138: #463266;
  --px-vis-series-color-139: #654632;
  --px-vis-series-color-140: #2b3a72;
  --px-vis-series-color-141: #602e52;
  --px-vis-series-color-142: #152825;
  --px-vis-series-color-143: #5f1830;
  --px-vis-series-color-144: #2a401b;
  --px-vis-series-color-145: #612325;
  --px-vis-series-color-146: #1e3747;
  --px-vis-series-color-147: #595502;
  --px-vis-series-color-148: #292929;
  --px-vis-series-color-149: #4c3e14;
  --px-gauge-fill-error-color: #f34336;
  --px-gauge-fill-anomaly-color: #fec600;
  --px-gauge-fill-abnormal-color: #ff8b3a;
  --px-gauge-fill-normal-color: #1479c9;
  --px-gauge-empty-color: #b6c3cc;
  --px-gauge-needle-color: #2c404c;
}

html {
  font-family: "GE Inspira Sans", sans-serif;
  font-size: 15px;
}

:host {
  font-family: "GE Inspira Sans", sans-serif;
}