@charset "UTF-8";
/** A tiny subset of the Predix UI normalize Sass module that is meant for use when building components that don't need a ton of resets. These styles are all scope to `:host` so they will work inside the Shadow DOM of a component that imports them. Only does the following 1. Sets the component text color based on $inuit-base-text-color. 2. Sets the component text line-height based on $inuit-base-line-height and $inuit-base-font-size. 3. Prevent certain mobile browsers from automatically zooming fonts. 4. Fonts on OSX will look more consistent with other systems that do not render text using sub-pixel anti-aliasing. Some rules based on normalize.css v3.0.2 | MIT License | git.io/normalize */
:host { color: var(--px-base-text-color, #2c404c); /* [1] */ line-height: 1.33333; /* [2] */ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; /* [3] */ -moz-osx-font-smoothing: grayscale; /* [4] */ -webkit-font-smoothing: antialiased; /* [4] */ }

/** Sets the global `box-sizing` state to `border-box`. css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice paulirish.com/2012/box-sizing-border-box-ftw */
html { -webkit-box-sizing: border-box; box-sizing: border-box; }

*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; }

/** 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 { /*! Comment to prevent cssmin munging this rule with html above and borking Safari */ -webkit-box-sizing: border-box; box-sizing: border-box; }

/** A series of helper classes to use arbitrarily. Only use a helper class if an element/component doesn’t already have a class to which you could apply this styling, e.g. if you need to float `.main-nav` left then add `float:left;` to that ruleset as opposed to adding the `.float--left` class to the markup. A lot of these classes carry `!important` as you will always want them to win out over other selectors. */
/*------------------------------------*    #PX-COLORS-DESIGN
\*------------------------------------*/
/** Neutral Palette (gray20 is darkest, gray1 is lightest) */
/** Define grey = gray to avoid dev typos */
/** Actionable Palette */
/** Selection Palette */
/** Dark Actionable Palette */
/** Alerts and Status */
/** Data Visualization */
/** Orange */
/** Yellow */
/** Yellow Green */
/** Green */
/** Teal */
/** Aqua */
/** Cyan */
/** Blue */
/** Violet */
/** Purple */
/** Pink */
/** Red */
/** Brown */
/** Gray */
/** Define grey = gray to avoid dev typos */
/** Salmon */
/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; /** Default link colors */ /** Improve readability when focused and also mouse hovered in all browsers. */ }

a:link, a:visited { color: #007acc; }

a:hover { color: #005c99; }

a:active { color: #003d66; }

a:active, a:hover { outline: 0; }

/** Add/remove floats */
.float--right { float: right !important; }

.float--left { float: left !important; }

.float--none { float: none !important; }

/** Text alignment */
.text--left { text-align: left !important; }

.text--center { text-align: center !important; }

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

/** Full height element */
.full-height { height: 100% !important; }

/** Add a help cursor to any element that gives the user extra information on `:hover`. */
.informative { cursor: help !important; }

/** Add a pointer cursor to any element, useful for on-click events */
.pointer { cursor: pointer !important; }

/** Mute an object by reducing its opacity. */
.muted { opacity: 0.5 !important; }

/** Align items to the right where they imply progression/movement forward, e.g.: <p class=proceed><a href=#>Read more...</a></p> */
.proceed { text-align: right !important; }

/** Apply capital case to an element (usually a `strong`). */
.caps { text-transform: uppercase !important; }

/** Hide visually and from screen readers: http://juicystudio.com/article/screen-readers-display-none.php */
.hidden { display: none !important; visibility: hidden; }

/** Hide content off-screen without resorting to `display:none;` */
.a11y, .visuallyhidden { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; }

.a11y.focusable:active, .a11y.focusable:focus, .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { position: static; overflow: visible; width: auto; height: auto; margin: 0; clip: auto; }

@media screen and (min-width: 45em) and (max-width: 63.9375em) { .a11y-lap, .visuallyhidden-lap { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

@media screen and (max-width: 63.9375em) { .a11y-portable, .visuallyhidden-portable { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

@media screen and (min-width: 64em) { .a11y-desk, .visuallyhidden-desk { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

@media screen and (max-width: 44.9375em) { .a11y-palm, .visuallyhidden-palm { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

@media screen and (min-width: 45em) { .a11y-lap-and-up, .visuallyhidden-lap-and-up { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

@media screen and (min-width: 64em) { .a11y-desk-and-up, .visuallyhidden-desk-and-up { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

@media screen and (min-width: 120em) { .a11y-large-and-up, .visuallyhidden-large-and-up { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .a11y-retina, .visuallyhidden-retina { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; border: 0 !important; padding: 0 !important; clip: rect(0 0 0 0) !important; } }

/** Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden !important; }

/** Truncate text with an ellipsis */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.alpha { font-size: 5rem; line-height: 1.06667; font-weight: normal; }

.beta { font-size: 4rem; line-height: 1; font-weight: normal; }

.gamma { font-size: 3rem; line-height: 1.33333; font-weight: normal; }

.delta { font-size: 2rem; line-height: 1.33333; font-weight: normal; }

.epsilon { font-size: 1.33333rem; line-height: 1; font-weight: normal; }

.zeta { font-size: 0.8rem; line-height: 1.66667; font-weight: normal; }

.heading--page { font-size: 2rem; line-height: 1.33333; color: var(--px-headings-heading-page-color, #2c404c); }

.heading--section { font-size: 1.33333rem; line-height: 1; color: var(--px-headings-heading-section-color, #677e8c); text-transform: uppercase; }

.heading--subsection { font-size: 1rem; line-height: 1.33333; color: var(--px-headings-heading-subsection-color, #2c404c); background-color: var(--px-headings-heading-subsection-background, rgba(136, 154, 165, 0.15)); text-transform: uppercase; letter-spacing: var(--px-headings-letter-spacing, 0.3px); display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 5px; padding-right: 5px; }

.label { font-size: 0.8rem; line-height: 1.66667; color: var(--px-headings-label-color, #677e8c); text-transform: uppercase; letter-spacing: var(--px-headings-letter-spacing, 0.3px); }

.value { font-size: 1rem; line-height: 1.33333; color: var(--px-headings-value-color, #2c404c); }

.btn { display: inline-block; overflow: visible; height: var(--px-btn-height, 2em); min-width: var(--px-btn-min-width, 4.66667em); margin: 0; border: 1px solid var(--px-btn-border-color, transparent); border-radius: 0 !important; padding: 0 calc(var(--px-btn-height, 2em) / 2); -webkit-box-shadow: var(--px-btn-shadow--light, none); box-shadow: var(--px-btn-shadow--light, none); font: inherit; line-height: calc(var(--px-btn-height, 2em) - 2px); -webkit-font-smoothing: antialiased; cursor: pointer; text-align: center; text-decoration: none; text-transform: none; white-space: nowrap; background-color: var(--px-btn-background, #d8e0e5); -webkit-transition: background .4s, border-color .4s, color .4s; transition: background .4s, border-color .4s, color .4s; }

.btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: var(--px-btn-color, #2c404c); }

.btn:hover, .btn:focus { border-color: var(--px-btn-border-color--hover, transparent); -webkit-box-shadow: var(--px-btn-shadow, none); box-shadow: var(--px-btn-shadow, none); background-color: var(--px-btn-background--hover, #a3b5bf); }

.btn:active { border-color: var(--px-btn-border-color--pressed, transparent); -webkit-box-shadow: none; box-shadow: none; background-color: var(--px-btn-background--pressed, #889aa5); }

.btn:active { outline: none; }

@-moz-document url-prefix() { .btn:not(button) { line-height: 1.8em; } }

button.btn { -webkit-appearance: button; }

.btn + .btn { margin-left: 0.66667rem; }

.btn--bare { height: var(--px-btn-height, 2em); border: 0 !important; border-radius: 0 !important; line-height: inherit; padding-left: 0; padding-right: 0; -webkit-box-shadow: none; box-shadow: none; background: none; outline: none; }

.btn--bare, .btn--bare:link, .btn--bare:visited, .btn--bare:hover, .btn--bare:active, .btn--bare:focus { -webkit-box-shadow: none; box-shadow: none; background: none; outline: none; }

.btn--bare, .btn--bare:link, .btn--bare:visited { color: var(--px-btn-bare-color, #2c404c); }

.btn--bare:hover, .btn--bare:focus { color: var(--px-btn-bare-color--hover, #007acc); }

.btn--bare:active { color: var(--px-btn-bare-color--pressed, #003d66); }

.btn--icon { height: var(--px-btn-height, 2em); width: var(--px-btn-height, 2em); min-width: var(--px-btn-height, 2em); padding-right: 0; padding-left: 0; border: var(--px-btn-icon-border, 0px solid) !important; background-color: var(--px-btn-icon-background, transparent) !important; }

/** Workaround for FF since it does not support calc(). */
@-moz-document url-prefix() { .btn--icon { line-height: 1.8em; } }

:host { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 1rem; padding-right: 1rem; width: inherit; opacity: 0; height: 0; -webkit-transition: height .5s ease-in-out, opacity .5s ease-in-out; transition: height .5s ease-in-out, opacity .5s ease-in-out; }

:host([opened]) { opacity: 1; }

:host([opened]) { font-size: 1rem; height: var(--px-notification-height, 5.33333rem); }

@media screen and (min-width: 45em) { :host([opened]) { height: var(--px-notification-height, 2.66667rem); } }

:host([opened][small]) { font-size: 0.8rem; height: var(--px-notification-height, 2.66667rem); }

@media screen and (min-width: 45em) { :host([opened][small]) { height: var(--px-notification-height, 1.33333rem); } }

.notification-content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 0; margin-top: 0.66667rem; margin-bottom: 0.66667rem; }

.notification-left { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 0.33333rem; }

.notification-right { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 1rem; cursor: pointer; }

.notification-icon { color: white; width: 1.06667rem; height: 1.06667rem; --iron-icon-width: 100%; --iron-icon-height: 100%; }

:host([type="error"]) .notification-icon { color: var(--px-alert-label-text-color--error, black); }

:host([type="important"]) { background-color: var(--px-alert-label-background-color--important, red); color: var(--px-alert-label-text-color--important, white); }

:host([type="warning"]) { background-color: var(--px-alert-label-background-color--warning, orange); color: var(--px-alert-label-text-color--warning, white); }

:host([type="error"]) { background-color: var(--px-alert-label-background-color--error, yellow); color: var(--px-alert-label-text-color--error, black); }

:host([type="info"]), :host([type="information"]) { background-color: var(--px-alert-label-background-color--information, blue); color: var(--px-alert-label-text-color--information, white); }

:host([type="healthy"]) { background-color: var(--px-alert-label-background-color--healthy, green); color: var(--px-alert-label-text-color--healthy, white); }

:host([type="unknown"]) { background-color: var(--px-alert-label-background-color--unknown, gray); color: var(--px-alert-label-text-color--unknown, white); }

/** Margin and padding helper classes. Use these to tweak layout on a micro level. `.u-(m|p)(t|r|b|l|h|v)(-|+|0) {}` = utility - margin/padding top/right/bottom/left/horizontal/vertical less/more/none */
/** Margin helper classes. Add margins. */
.u-m { margin: 1rem !important; }

.u-mt { margin-top: 1rem !important; }

.u-mr { margin-right: 1rem !important; }

.u-mb { margin-bottom: 1rem !important; }

.u-ml { margin-left: 1rem !important; }

.u-mh { margin-right: 1rem !important; margin-left: 1rem !important; }

.u-mv { margin-top: 1rem !important; margin-bottom: 1rem !important; }
