/*------------------------------------*    #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 */
.shadow-component { -webkit-box-shadow: 0px 1px 1px var(--px-shadow-component, rgba(0, 0, 0, 0.2)); box-shadow: 0px 1px 1px var(--px-shadow-component, rgba(0, 0, 0, 0.2)); }

.shadow-temporary { -webkit-box-shadow: 0px 1px 3px var(--px-shadow-temporary, rgba(0, 0, 0, 0.2)); box-shadow: 0px 1px 3px var(--px-shadow-temporary, rgba(0, 0, 0, 0.2)); }

.shadow-navigation { -webkit-box-shadow: 0px 2px 4px var(--px-shadow-navigation, rgba(0, 0, 0, 0.2)); box-shadow: 0px 2px 4px var(--px-shadow-navigation, rgba(0, 0, 0, 0.2)); }

.shadow-notification { -webkit-box-shadow: 0px 4px 8px var(--px-shadow-notification, rgba(0, 0, 0, 0.2)); box-shadow: 0px 4px 8px var(--px-shadow-notification, rgba(0, 0, 0, 0.2)); }

.shadow-modal { -webkit-box-shadow: 0px 6px 12px var(--px-shadow-modal, rgba(0, 0, 0, 0.2)); box-shadow: 0px 6px 12px var(--px-shadow-modal, rgba(0, 0, 0, 0.2)); }

/** AppNav styles */
.px-app-nav { height: var(--px-app-nav-height, 4rem); background-color: var(--px-app-nav-background-color, whitesmoke); -webkit-box-shadow: var(--px-app-nav-box-shadow, 0px 2px 4px var(--px-shadow-navigation, rgba(0, 0, 0, 0.2))); box-shadow: var(--px-app-nav-box-shadow, 0px 2px 4px var(--px-shadow-navigation, rgba(0, 0, 0, 0.2))); display: block; width: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

.px-app-nav .app-nav { display: -webkit-box; display: -ms-flexbox; display: flex; }

.px-app-nav .app-nav__items { height: var(--px-app-nav-height, 4rem); -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 100%; }

.px-app-nav.vertical { overflow-x: hidden; overflow-y: hidden; position: var(--px-app-nav-vertical-position, absolute); height: var(--px-app-nav-vertical-height, 100%); left: 0; top: 0; min-width: var(--px-app-nav-vertical-width, 4rem); max-width: var(--px-app-nav-vertical-width, 4rem); -webkit-transition: var(--px-app-nav-vertical-transition, max-width 250ms ease); transition: var(--px-app-nav-vertical-transition, max-width 250ms ease); }

.px-app-nav.vertical.vertical-opened { overflow-y: auto; max-width: var(--px-app-nav-vertical-width--opened, 21.33333rem); }

.px-app-nav.vertical .app-nav { display: block; }

.px-app-nav.vertical .app-nav__items { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; }
