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

.inline--flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; }

.flex--row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

.flex--row--rev { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.flex--col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.flex--col--rev { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }

.flex--nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; }

.flex--wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }

.flex--wrap--rev { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; }

.flex--left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }

.flex--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.flex--right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.flex--justify { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.flex--spaced { -ms-flex-pack: distribute; justify-content: space-around; }

.flex--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

.flex--middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.flex--bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }

.flex--stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

.flex--baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }

.flex--top--multi { -ms-flex-line-pack: start; align-content: flex-start; }

.flex--middle--multi { -ms-flex-line-pack: center; align-content: center; }

.flex--bottom--multi { -ms-flex-line-pack: end; align-content: flex-end; }

.flex--stretch--multi { -ms-flex-line-pack: stretch; align-content: stretch; }

.flex--justify--multi { -ms-flex-line-pack: justify; align-content: space-between; }

.flex--spaced--multi { -ms-flex-line-pack: distribute; align-content: space-around; }

.flex__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.flex__item--msfix { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; }

.flex__item--top { -ms-flex-item-align: start; align-self: flex-start; }

.flex__item--middle { -ms-flex-item-align: center; align-self: center; }

.flex__item--bottom { -ms-flex-item-align: end; align-self: flex-end; }

.flex__item--baseline { -ms-flex-item-align: baseline; align-self: baseline; }

/*------------------------------------*    #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 */
.actionable { height: auto; border: 0; border-radius: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; background: none; white-space: nowrap; line-height: inherit; text-decoration: none; font: inherit; -webkit-font-smoothing: antitodoed; cursor: pointer; outline: none; -webkit-transition: color .4s; transition: color .4s; }

.actionable, .actionable:link, .actionable:visited, .actionable:active, .actionable:focus { color: var(--px-actionable-text-color, #007acc); outline: inherit; }

.actionable:hover { color: var(--px-actionable-text-color--hover, #005c99); }

.actionable:active { color: var(--px-actionable-text-color--active, #003d66); }

.actionable--select, .actionable--select:link, .actionable--select:visited, .actionable--select:active, .actionable--select:focus { color: var(--px-selectable-text-color, #09819c); }

.actionable--select:hover { color: var(--px-selectable-text-color--hover, #065769); }

.actionable--select:active { color: var(--px-selectable-text-color--active, #032c36); }

.actionable--action, .actionable--action:link, .actionable--action:visited, .actionable--action:active, .actionable--action:focus, .actionable--secondary, .actionable--secondary:link, .actionable--secondary:visited, .actionable--secondary:active, .actionable--secondary:focus { color: var(--px-actionable-alt-text-color, #2c404c); }

.actionable--action:hover, .actionable--secondary:hover { color: var(--px-actionable-alt-text-color--hover, #007acc); }

.actionable--action:active, .actionable--secondary:active { color: var(--px-actionable-alt-text-color--active, #003d66); }

.actionable--disabled, .actionable--disabled:link, .actionable--disabled:visited, .actionable--disabled:hover, .actionable--disabled:active, .actionable[disabled], .actionable[disabled]:link, .actionable[disabled]:visited, .actionable[disabled]:hover, .actionable[disabled]:active { cursor: not-allowed; color: var(--px-actionable-disabled-text-color, rgba(0, 0, 0, 0.3)); }

.actionable--small { font-size: 0.8rem; }

.actionable--large { font-size: 1.33333rem; }

.actionable--huge { font-size: 2rem; }

/** 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 */
/** Add tiny paddings. */
.u-p-- { padding: 0.33333rem !important; }

.u-pt-- { padding-top: 0.33333rem !important; }

.u-pr-- { padding-right: 0.33333rem !important; }

.u-pb-- { padding-bottom: 0.33333rem !important; }

.u-pl-- { padding-left: 0.33333rem !important; }

.u-ph-- { padding-right: 0.33333rem !important; padding-left: 0.33333rem !important; }

.u-pv-- { padding-top: 0.33333rem !important; padding-bottom: 0.33333rem !important; }

.accordion--disabled .accordion__header { cursor: not-allowed; pointer-events: none; }

.accordion__header { margin-bottom: 0.3333rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: var(--px-accordion-header-background-color, white); color: var(--px-accordion-header-color, black); }

.accordion__header > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.accordion__icon { width: 1rem; height: 1rem; }

.accordion__body { margin: 0; overflow: auto; }

.accordion__status { margin-right: 1rem; text-transform: none; }

.accordion__expand__collapse { margin-bottom: 1.5rem; }
