/**
 * XUI main stylesheet
 * ===================
 *
 * These stylesheets are organized in the manner prescribed by the ITCSS
 * (Inverted Triangle CSS) methodology introduced here:
 * http://www.creativebloq.com/web-design/manage-large-scale-web-projects-new-css-architecture-itcss-41514731
 * http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
 *
 * It organizes styles into files for various 'layers', with each layer becoming
 * more and more specific in terms of selector rules:
 *
 * The top layers consist of broad, unopinionated styles and common tooling.
 * These target nothing in particular.
 *
 * The middle layers then add scaffolding for pages, first targeting semantic
 * HTML elements to give pages their structure, followed by common
 * object/component classes that would be familiar if they followed existing CSS
 * methodologies like OOCSS, SMACSS, or BEM.  The Xero theme and components live
 * across these layers
 *
 * The bottom layer is the most specific layer, reserved for page-specific
 * styles and the use of !important.  These rules are prefixed by whatever they
 * wish for the page control, eg: NAB Lending Enquiry screen uses nab-.
 * Utility classes are prefixed by -u-
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * Styles affecting the entire page.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%; }

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

body,
form {
  margin: 0;
  padding: 0; }

main {
  display: block; }

label:hover {
  cursor: pointer; }

/**
 * Most input stylings can be found in objects/_forms.textinputs.scss files.  This
 * file contains just a few element selectors that we either haven't yet decided
 * how to deal with and turn into class selectors, or specific oddities that we
 * want to smooth out.
 */
input[type=number] {
  -moz-appearance: textfield; }

input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

input:-webkit-autofill {
  -webkit-animation-fill-mode: both;
  -webkit-animation-name: xui-animation-autofill; }

textarea {
  overflow-x: hidden; }

table {
  border-collapse: collapse; }

button::-moz-focus-inner {
  border: 0;
  padding: 0; }

a {
  color: #0078c8;
  cursor: pointer; }
  a:hover {
    color: #003c64; }
  a:active {
    color: #002a46; }
  a:focus {
    color: #003c64; }

.xui-html {
  height: 100%;
  min-height: 100%; }

.xui-body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  box-sizing: border-box;
  color: #000a1e;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  background-color: #f2f3f4;
  min-height: 100%;
  overflow-y: scroll; }

.xui-container {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  box-sizing: border-box;
  color: #000a1e;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5; }

/*
Should work with or without the xui-html class on the html element so long as xui-html has
a min-height and not a height.
*/
html.xui-u-lockscroll {
  overflow: hidden;
  /*
	We have to set overflow: hidden on both the body and html elements.  If only the body
	or html element is set by itself, then dropdown lists with no header or footer may cause excessive
	whitespace above or below the dropdown body in Android Chrome (which seems to depend on whether or
	not the address bar is open when you open the dropdown).  That causes lots of scrolling
	and/or content not being visible when the dropdown/modal opens.

	@author dev-johnsanders
	*/ }
  html.xui-u-lockscroll.xui-html {
    height: auto; }
  html.xui-u-lockscroll body {
    overflow: hidden; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-page-width-standard {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }

.xui-page-width-large {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }

.xui-page-layout-sidebar-right--main {
  width: 66.66%;
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-right--main {
      width: 100%; } }

.xui-page-layout-sidebar-right--sidebar {
  margin-left: 20px;
  width: calc(33.33% - 20px);
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-right--sidebar {
      margin-left: 0;
      width: 100%; } }

.xui-page-layout-sidebar-right--main-small {
  width: 77.77%;
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-right--main-small {
      width: 100%; } }

.xui-page-layout-sidebar-right--sidebar-small {
  margin-left: 20px;
  width: calc(22.22% - 20px);
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-right--sidebar-small {
      margin-left: 0;
      width: 100%; } }

.xui-page-layout-sidebar-left--sidebar {
  margin-right: 20px;
  width: calc(33.33% - 20px);
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-left--sidebar {
      margin-right: 0;
      width: 100%; } }

.xui-page-layout-sidebar-left--main {
  width: 66.66%;
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-left--main {
      width: 100%; } }

.xui-page-layout-sidebar-left--sidebar-small {
  margin-right: 20px;
  width: calc(22.22% - 20px);
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-left--sidebar-small {
      margin-right: 0;
      width: 100%; } }

.xui-page-layout-sidebar-left--main-small {
  width: 77.77%;
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 520px) {
    .xui-page-layout-sidebar-left--main-small {
      width: 100%; } }

.xui-page-layout-split-left {
  margin-right: 10px;
  width: calc(49.99% - 10px);
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 940px) {
    .xui-page-layout-split-left {
      margin-right: 0;
      width: 100%; } }

.xui-page-layout-split-right {
  margin-left: 10px;
  width: calc(49.99% - 10px);
  display: inline-block;
  vertical-align: top; }
  @media screen and (max-width: 940px) {
    .xui-page-layout-split-right {
      margin-left: 0;
      width: 100%; } }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-panel {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2); }

.xui-panel--header {
  min-height: 60px; }

.xui-panel--heading {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 1.0625rem;
  margin: 0; }

.xui-panel--heading-layout {
  padding: 20px;
  align-items: center;
  display: flex;
  justify-content: space-between; }

.xui-panel--section {
  border-top: 1px solid #ccced2;
  margin: 0; }
  .xui-panel--section:first-child {
    border-top: 0; }

.xui-panel--section--header {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 0;
  text-align: center; }
  @media (min-width: 600px) {
    .xui-panel--section--header {
      margin-left: auto;
      margin-right: auto; } }

.xui-panel--footer {
  border-top: 1px solid #ccced2;
  display: flex;
  min-height: 60px; }
  .xui-panel--footer:first-child {
    border-top: 0; }
  .xui-panel--footer .xui-actions {
    width: 100%; }

.xui-panel--sidebar {
  border-right: 1px solid #ccced2;
  flex: 0 0 220px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/* xui-iconsymbol is added to the icon blob produced by the xui-icon repository */
.xui-iconsymbol {
  fill-rule: evenodd;
  shape-rendering: auto; }

.xui-iconwrapper {
  align-items: center;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px; }

.xui-iconwrapper-large {
  height: 40px;
  width: 40px; }

.xui-iconwrapper-xlarge {
  height: 60px;
  width: 60px; }

.xui-icon {
  display: inline-block;
  fill: currentColor;
  fill-rule: evenodd;
  flex: none;
  pointer-events: none; }

.xui-icon-color-standard {
  fill: rgba(0, 10, 30, 0.75); }

.xui-icon-color-black {
  fill: #000a1e; }

.xui-icon-color-black-muted {
  fill: rgba(0, 10, 30, 0.75); }

.xui-icon-color-black-faint {
  fill: rgba(0, 10, 30, 0.65); }

.xui-icon-color-white {
  fill: #fff; }

.xui-icon-color-white-muted {
  fill: rgba(255, 255, 255, 0.75); }

.xui-icon-color-white-faint {
  fill: rgba(255, 255, 255, 0.65); }

.xui-icon-color-blue {
  fill: #0078c8; }

.xui-icon-color-dark-blue {
  fill: #002a46; }

.xui-icon-color-red {
  fill: #dc3246; }

.xui-icon-color-green {
  fill: #00823c; }

.xui-icon-color-orange {
  fill: #fa8200; }

.xui-icon-color-yellow {
  fill: #faaa00; }

.xui-icon-color-mint {
  fill: #50dcaa; }

.xui-icon-color-turquoise {
  fill: #3cdcfa; }

.xui-icon-color-violet {
  fill: #5a5ae6; }

.xui-icon-color-grape {
  fill: #b446c8; }

.xui-icon-color-pink {
  fill: #ff6496; }

.xui-icon-color-file-spreadsheet {
  fill: #0f9d58; }

.xui-icon-color-file-pdf {
  fill: #db4437; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  text-decoration: none; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-button-standard {
  background-color: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px;
  color: #0078c8;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.1s;
  transition-property: color, background, box-shadow;
  transition-timing-function: ease; }
  .xui-button-standard:hover {
    background-color: #f2f3f4;
    color: #0073c0; }
  .xui-button-standard:active {
    background-color: #e6e7e9;
    color: #006db7; }
  .xui-button-standard:focus {
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    text-decoration: none;
    z-index: 2; }

.xui-button-main {
  background-color: #0078c8;
  border: 1px solid #0078c8;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.1s;
  transition-property: color, background, box-shadow;
  transition-timing-function: ease; }
  .xui-button-main:hover {
    background-color: #006db7;
    color: #fff; }
  .xui-button-main:active {
    background-color: #0062a6;
    color: #fff; }
  .xui-button-main:focus {
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    text-decoration: none;
    z-index: 2; }

.xui-button-create {
  background-color: #00823c;
  border: 1px solid #00823c;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.1s;
  transition-property: color, background, box-shadow;
  transition-timing-function: ease; }
  .xui-button-create:hover {
    background-color: #007639;
    color: #fff; }
  .xui-button-create:active {
    background-color: #006a36;
    color: #fff; }
  .xui-button-create:focus {
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    text-decoration: none;
    z-index: 2; }

.xui-button-negative {
  background-color: #dc3246;
  border: 1px solid #dc3246;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.1s;
  transition-property: color, background, box-shadow;
  transition-timing-function: ease; }
  .xui-button-negative:hover {
    background-color: #c62e42;
    color: #fff; }
  .xui-button-negative:active {
    background-color: #b02a3e;
    color: #fff; }
  .xui-button-negative:focus {
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    text-decoration: none;
    z-index: 2; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-button-borderless-standard {
  background: transparent;
  border-radius: 3px;
  color: #000a1e;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  transition-duration: 0.1s;
  transition-property: color, background;
  transition-timing-function: ease; }
  .xui-button-borderless-standard:hover {
    background: rgba(0, 10, 30, 0.05);
    color: #0073c0; }
  .xui-button-borderless-standard:focus {
    background: rgba(0, 10, 30, 0.05);
    color: #0073c0; }
  .xui-button-borderless-standard:active {
    background: rgba(0, 10, 30, 0.1);
    color: #006db7; }
  .xui-button-borderless-standard.xui-button-is-disabled {
    background-color: none;
    border-color: #80858f;
    box-shadow: none;
    color: rgba(0, 10, 30, 0.5);
    cursor: not-allowed; }
    .xui-button-borderless-standard.xui-button-is-disabled:hover, .xui-button-borderless-standard.xui-button-is-disabled:active {
      background-color: initial; }

.xui-button-borderless-muted {
  background: transparent;
  border-radius: 3px;
  color: rgba(0, 10, 30, 0.65);
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  transition-duration: 0.1s;
  transition-property: color, background;
  transition-timing-function: ease; }
  .xui-button-borderless-muted:hover {
    background: rgba(0, 10, 30, 0.05);
    color: rgba(0, 10, 30, 0.75); }
  .xui-button-borderless-muted:focus {
    background: rgba(0, 10, 30, 0.05);
    color: rgba(0, 10, 30, 0.75); }
  .xui-button-borderless-muted:active {
    background: rgba(0, 10, 30, 0.1);
    color: #000a1e; }
  .xui-button-borderless-muted.xui-button-is-disabled {
    background-color: none;
    border-color: #80858f;
    box-shadow: none;
    color: rgba(0, 10, 30, 0.5);
    cursor: not-allowed; }
    .xui-button-borderless-muted.xui-button-is-disabled:hover, .xui-button-borderless-muted.xui-button-is-disabled:active {
      background-color: initial; }

.xui-button-borderless-main {
  background: transparent;
  border-radius: 3px;
  color: #0078c8;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  transition-duration: 0.1s;
  transition-property: color, background;
  transition-timing-function: ease; }
  .xui-button-borderless-main:hover {
    background: rgba(0, 10, 30, 0.05);
    color: #0073c0; }
  .xui-button-borderless-main:focus {
    background: rgba(0, 10, 30, 0.05);
    color: #0073c0; }
  .xui-button-borderless-main:active {
    background: rgba(0, 10, 30, 0.1);
    color: #006db7; }
  .xui-button-borderless-main.xui-button-is-disabled {
    background-color: none;
    border-color: #80858f;
    box-shadow: none;
    color: rgba(0, 10, 30, 0.5);
    cursor: not-allowed; }
    .xui-button-borderless-main.xui-button-is-disabled:hover, .xui-button-borderless-main.xui-button-is-disabled:active {
      background-color: initial; }

.xui-button-borderless-create {
  background: transparent;
  border-radius: 3px;
  color: #00823c;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  transition-duration: 0.1s;
  transition-property: color, background;
  transition-timing-function: ease; }
  .xui-button-borderless-create:hover {
    background: rgba(0, 10, 30, 0.05);
    color: #007c3b; }
  .xui-button-borderless-create:focus {
    background: rgba(0, 10, 30, 0.05);
    color: #007c3b; }
  .xui-button-borderless-create:active {
    background: rgba(0, 10, 30, 0.1);
    color: #007639; }
  .xui-button-borderless-create.xui-button-is-disabled {
    background-color: none;
    border-color: #80858f;
    box-shadow: none;
    color: rgba(0, 10, 30, 0.5);
    cursor: not-allowed; }
    .xui-button-borderless-create.xui-button-is-disabled:hover, .xui-button-borderless-create.xui-button-is-disabled:active {
      background-color: initial; }

.xui-button-borderless-negative {
  background: transparent;
  border-radius: 3px;
  color: #dc3246;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  transition-duration: 0.1s;
  transition-property: color, background;
  transition-timing-function: ease; }
  .xui-button-borderless-negative:hover {
    background: rgba(0, 10, 30, 0.05);
    color: #d13044; }
  .xui-button-borderless-negative:focus {
    background: rgba(0, 10, 30, 0.05);
    color: #d13044; }
  .xui-button-borderless-negative:active {
    background: rgba(0, 10, 30, 0.1);
    color: #c62e42; }
  .xui-button-borderless-negative.xui-button-is-disabled {
    background-color: none;
    border-color: #80858f;
    box-shadow: none;
    color: rgba(0, 10, 30, 0.5);
    cursor: not-allowed; }
    .xui-button-borderless-negative.xui-button-is-disabled:hover, .xui-button-borderless-negative.xui-button-is-disabled:active {
      background-color: initial; }

.xui-button-borderless-inverted {
  background: transparent;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  transition-duration: 0.1s;
  transition-property: color, background;
  transition-timing-function: ease; }
  .xui-button-borderless-inverted:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff; }
  .xui-button-borderless-inverted:focus {
    background: rgba(255, 255, 255, 0.2);
    color: #fff; }
  .xui-button-borderless-inverted:active {
    background: rgba(255, 255, 255, 0.35);
    color: #fff; }
  .xui-button-borderless-inverted.xui-button-is-disabled {
    background-color: none;
    border-color: #80858f;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed; }
    .xui-button-borderless-inverted.xui-button-is-disabled:hover, .xui-button-borderless-inverted.xui-button-is-disabled:active {
      background-color: initial; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
@media screen and (max-width: 520px) {
  .xui-button-fullwidth-layout {
    display: block;
    width: 100%; } }

.xui-button-small {
  min-height: 30px;
  padding: 6px 10px; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-buttongroup {
  display: inline-flex; }

.xui-button-grouped {
  border-radius: 0; }
  .xui-button-grouped:hover {
    z-index: 2; }
  .xui-button-grouped:focus, .xui-button-grouped:active {
    z-index: 3; }
  .xui-button-grouped:first-of-type {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .xui-button-grouped:nth-child(n+2) {
    border-left: 0;
    margin-left: 1px; }
    .xui-button-grouped:nth-child(n+2).xui-button-standard {
      margin-left: 0; }
  .xui-button-grouped:last-of-type {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-button--caret {
  margin-left: 5px;
  vertical-align: middle; }
  .xui-button-split .xui-button--caret {
    margin-left: 10px;
    margin-right: 10px; }
  .xui-button--caret.xui-blobicon {
    margin-top: -7px;
    margin-left: -6px;
    margin-right: -10px;
    margin-bottom: -11px; }

.xui-button-split {
  flex-shrink: 0;
  min-width: 0;
  padding: 0; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-button-icon {
  align-items: center;
  border-radius: 50%;
  color: rgba(0, 10, 30, 0.65);
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px; }
  .xui-button-icon:hover {
    background-color: rgba(0, 10, 30, 0.05);
    color: #000a1e; }
  .xui-button-icon:focus {
    background: rgba(0, 10, 30, 0.05);
    color: #000a1e;
    outline: none; }
  .xui-button-icon:active {
    background: rgba(0, 10, 30, 0.1);
    color: #000a1e;
    outline: none; }
  .xui-button-icon .xui-icon {
    display: block; }
  .xui-button-icon.xui-button-is-disabled {
    background-color: none;
    border-color: #80858f;
    box-shadow: none;
    color: rgba(0, 10, 30, 0.5);
    cursor: not-allowed; }
    .xui-button-icon.xui-button-is-disabled:hover, .xui-button-icon.xui-button-is-disabled:active {
      background-color: initial; }
  .xui-button-icon-inverted {
    color: rgba(255, 255, 255, 0.75); }
    .xui-button-icon-inverted:hover {
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff; }
    .xui-button-icon-inverted:focus {
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      outline: none; }
    .xui-button-icon-inverted:active {
      background: rgba(255, 255, 255, 0.35);
      color: #fff;
      outline: none; }
    .xui-button-icon-inverted.xui-button-is-disabled {
      background-color: none;
      border-color: #80858f;
      box-shadow: none;
      color: rgba(255, 255, 255, 0.65);
      cursor: not-allowed; }
      .xui-button-icon-inverted.xui-button-is-disabled:hover, .xui-button-icon-inverted.xui-button-is-disabled:active {
        background-color: initial; }

.xui-button-icon-large {
  height: 40px;
  width: 40px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-button:disabled {
  cursor: not-allowed; }

.xui-button-is-disabled {
  border-color: #80858f;
  box-shadow: none;
  color: #80858f;
  cursor: not-allowed; }
  .xui-button-is-disabled:hover, .xui-button-is-disabled:focus {
    background-color: #fff;
    border-color: #80858f;
    box-shadow: none;
    color: #80858f;
    cursor: not-allowed; }
  .xui-button-is-disabled.xui-button-main {
    background-color: #80858f;
    border-color: #80858f;
    box-shadow: none;
    color: #fff;
    cursor: not-allowed; }
  .xui-button-is-disabled.xui-button-create {
    background-color: #80858f;
    border-color: #80858f;
    box-shadow: none;
    color: #fff;
    cursor: not-allowed; }
  .xui-button-is-disabled.xui-button-negative {
    background-color: #80858f;
    border-color: #80858f;
    box-shadow: none;
    color: #fff;
    cursor: not-allowed; }

.xui-button-min-loader-width {
  min-width: 75px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-toggle-fullwidth-layout .xui-toggle--label,
.xui-toggle-fullwidth-layout .xui-toggle-option {
  flex-basis: 100%;
  flex-grow: 1;
  min-height: 40px; }

.xui-toggle-fullwidth-layout .xui-toggle--text {
  display: block;
  width: 100%; }

.xui-toggle-small .xui-toggle--label {
  padding-bottom: 4px;
  padding-top: 4px; }

.xui-toggle-small .xui-toggle--label,
.xui-toggle-small .xui-toggle-option {
  min-height: 30px; }

.xui-toggle {
  align-items: stretch;
  color: #404756;
  display: flex; }

.xui-toggle--input {
  display: inline;
  flex: none;
  height: 30px;
  left: 0 !important;
  margin: 0 -4px 0 -9px;
  opacity: 0.01;
  padding: 0;
  position: relative !important;
  width: 13px;
  z-index: -1; }

.xui-toggle--input:hover + .xui-toggle--label {
  background-color: rgba(0, 10, 30, 0.05); }

.xui-toggle--input:active + .xui-toggle--label {
  background-color: rgba(0, 10, 30, 0.1); }

.xui-toggle--input:checked + .xui-toggle--label {
  background-color: #000a1e;
  border-color: #404756;
  color: #fff;
  z-index: 1; }

.xui-toggle--input:checked + .xui-toggle--label:hover {
  background-color: #404756; }

.xui-toggle--input:checked:active + .xui-toggle--label {
  background-color: #59606d; }

.xui-toggle--input:focus:not(:hover) + .xui-toggle--label {
  box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2); }

.xui-toggle-is-disabled {
  cursor: not-allowed; }
  .xui-toggle-is-disabled:hover, .xui-toggle-is-disabled:active {
    cursor: not-allowed; }
    .xui-toggle-is-disabled:hover .xui-toggle--label, .xui-toggle-is-disabled:active .xui-toggle--label {
      background: none; }
  .xui-toggle-is-disabled .xui-toggle--label {
    background-color: #e6e7e9;
    border-color: #80858f;
    color: #59606d; }
    .xui-toggle-is-disabled .xui-toggle--label:hover {
      background-color: #e6e7e9;
      border-color: #80858f;
      color: #59606d; }
  .xui-toggle-is-disabled .xui-toggle--input:checked:disabled + .xui-toggle--label {
    background-color: #80858f;
    border-color: #80858f;
    color: #fff; }

.xui-toggle--label {
  align-items: center;
  border: 1px solid #a6a9b0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -1px;
  min-height: 40px;
  min-width: 40px;
  position: relative;
  text-align: center;
  transition: all 0.1s ease; }

.xui-toggle-inverted {
  color: #fff; }
  .xui-toggle-inverted .xui-toggle--label {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff; }
  .xui-toggle-inverted .xui-toggle--label:hover {
    background-color: rgba(255, 255, 255, 0.1); }
  .xui-toggle-inverted .xui-toggle--input:active + .xui-toggle--label {
    background-color: rgba(255, 255, 255, 0.2); }
  .xui-toggle-inverted .xui-toggle--input:checked + .xui-toggle--label {
    background-color: #fff;
    border-color: #fff;
    color: #404756;
    z-index: 1; }
  .xui-toggle-inverted .xui-toggle--input:checked + .xui-toggle--label:hover {
    background-color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.75); }
  .xui-toggle-inverted .xui-toggle--input:checked:active + .xui-toggle--label {
    background-color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.65); }
  .xui-toggle-inverted .xui-toggle--input:focus:not(:hover) + .xui-toggle--label {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
  .xui-toggle-inverted .xui-toggle--input:checked:disabled + .xui-toggle--label {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: transparent;
    color: #000a1e; }
  .xui-toggle-inverted:hover .xui-toggle--input:checked:disabled + .xui-toggle--label, .xui-toggle-inverted:active .xui-toggle--input:checked:disabled + .xui-toggle--label {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: transparent;
    color: #000a1e; }
  .xui-toggle-inverted .xui-toggle--input:disabled + .xui-toggle--label,
  .xui-toggle-inverted .xui-toggle--input:disabled + .xui-toggle--label:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
    cursor: not-allowed; }

.xui-toggle-option {
  display: flex; }
  .xui-toggle-option:nth-of-type(n+2) .xui-toggle--label {
    border-left: none; }
  .xui-toggle-option:first-of-type .xui-toggle--label {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px; }
  .xui-toggle-option:last-of-type .xui-toggle--label {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px; }

.xui-button-inverted:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  outline: none;
  transition: box-shadow 0.1s; }

.xui-button-inverted.xui-button-standard {
  border-color: #fff; }
  .xui-button-inverted.xui-button-standard.xui-button-grouped:nth-child(n+2) {
    border-left: 1px solid #a6a9b0; }

.xui-button-inverted:focus:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  text-decoration: none;
  z-index: 2; }

.xui-button-inverted:hover {
  box-shadow: inherit; }

.xui-button-inverted:active {
  box-shadow: inherit; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-accordion {
  width: 100%; }

.xui-accordion--emptystate {
  color: rgba(0, 10, 30, 0.75);
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 140px;
  justify-content: center; }

.xui-accordionwrapper {
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
  outline: 0;
  position: relative;
  transition-duration: 0.1s;
  transition-property: width, margin, padding;
  width: 100%;
  -ms-transition: none; }
  @media screen and (min-width: 940px) {
    .xui-accordionwrapper:first-child {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px; }
    .xui-accordionwrapper:last-child {
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px; } }

.xui-accordionwrapper--content {
  opacity: 0; }

.xui-accordionwrapper--content-is-open {
  border-top: 1px solid #e6e7e9;
  opacity: 1;
  transition: opacity 0.1s ease-in-out 0.1s;
  -ms-transition: none; }

.xui-accordionwrapper-no-pop {
  border-radius: 0; }
  .xui-accordionwrapper-no-pop:before {
    background-color: #0078c8;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 4px; }

.xui-accordionwrapper-is-open {
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
  z-index: 1; }

.xui-accordionwrapper-pop {
  border-radius: 3px;
  margin-left: -8px;
  width: calc(100% + 16px); }
  .xui-accordionwrapper-pop .xui-accordiontrigger-is-open {
    padding-left: 8px;
    padding-right: 8px; }

.xui-accordiontrigger {
  align-items: center;
  border-top: 1px solid #e6e7e9;
  cursor: pointer;
  display: flex;
  margin: 0;
  transition-duration: 0.1s;
  transition-property: width, margin, padding;
  -ms-transition: none; }
  .xui-accordiontrigger:first-child {
    border-top: 0; }
  .xui-accordiontrigger:hover {
    background: rgba(0, 10, 30, 0.05); }
  .xui-accordiontrigger:active {
    background: rgba(0, 10, 30, 0.1); }

.xui-accordiontrigger--arrow {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 5px;
  width: 60px; }
  @media screen and (max-width: 520px) {
    .xui-accordiontrigger--arrow {
      align-self: flex-start; } }

.xui-accordiontrigger--arrow .xui-icon {
  transition-duration: 0.1s;
  transition-property: all; }

.xui-accordiontrigger--rightcontent {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-shrink: 0;
  padding: 5px 20px 5px 5px; }
  @media screen and (max-width: 520px) {
    .xui-accordiontrigger--rightcontent {
      align-self: flex-start; } }

.xui-accordiontrigger--content {
  align-items: center;
  display: flex;
  flex-basis: auto;
  flex-grow: 1; }

.xui-accordiontrigger--headings {
  flex-basis: auto;
  flex-grow: 1;
  padding: 15px 0; }

.xui-accordiontrigger--primaryheading {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 0.9375rem;
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  word-wrap: break-word; }

.xui-accordiontrigger--secondaryheading {
  color: rgba(0, 10, 30, 0.75);
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  word-wrap: break-word; }

.xui-accordiontrigger--pinnedvalue {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 0.9375rem;
  font-weight: 400;
  padding: 10px 0; }

.xui-accordiontrigger--overflowcontent .xui-button-icon {
  margin-right: -10px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; }
  .xui-actions-linear {
    justify-content: space-between; }
  @media screen and (max-width: 520px) {
    .xui-actions-layout {
      flex-direction: column; }
      .xui-actions-layout .xui-actions--primary {
        margin: 0;
        order: 0; }
      .xui-actions-layout .xui-actions--secondary {
        margin: 15px 0 0;
        order: 1; } }
  @media screen and (min-width: 520px) and (max-width: 940px) {
    .xui-actions-layout .xui-actions--primary {
      margin-left: 10px; } }
  @media screen and (min-width: 520px) {
    .xui-actions-layout .xui-actions--primary {
      margin-left: 10px; } }
  .xui-actions--primary {
    order: 1; }
  .xui-actions--secondary {
    order: 0; }
  .xui-actions--button-spacing {
    margin-left: 10px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/* doiuse-disable object-fit*/
.xui-avatar {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  cursor: default;
  display: inline-flex;
  flex: none;
  font-size: 0.6875rem;
  font-weight: bold;
  height: 32px;
  justify-content: center;
  line-height: 0.8125rem;
  object-fit: contain;
  overflow: hidden;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 32px; }

/* doiuse-enable object-fit*/
img.xui-avatar {
  display: inline; }

.xui-avatar-xsmall {
  font-size: 8px;
  height: 18px;
  line-height: 8px;
  width: 18px; }

.xui-avatar-small {
  font-size: 0.625rem;
  height: 24px;
  line-height: 0.625rem;
  width: 24px; }

.xui-avatar-large {
  font-size: 0.875rem;
  height: 48px;
  line-height: 0.875rem;
  width: 48px; }

.xui-avatar-xlarge {
  font-size: 1.3125rem;
  height: 80px;
  line-height: 1.3125rem;
  width: 80px; }

.xui-avatar-2xlarge {
  font-size: 36px;
  height: 120px;
  line-height: 36px;
  width: 120px; }

.xui-avatar-business {
  border-radius: 9.375%; }

.xui-avatar-color-1 {
  background-color: #ee99a3;
  color: #4d1219;
  fill: #ee99a3; }
  .xui-avatar-color-1 + text * {
    fill: #4d1219; }

.xui-avatar-color-2 {
  background-color: #fdc180;
  color: #582e00;
  fill: #fdc180; }
  .xui-avatar-color-2 + text * {
    fill: #582e00; }

.xui-avatar-color-3 {
  background-color: #fdd580;
  color: #583c00;
  fill: #fdd580; }
  .xui-avatar-color-3 + text * {
    fill: #583c00; }

.xui-avatar-color-4 {
  background-color: #80c19e;
  color: #002e15;
  fill: #80c19e; }
  .xui-avatar-color-4 + text * {
    fill: #002e15; }

.xui-avatar-color-5 {
  background-color: #a8eed5;
  color: #1c4d3c;
  fill: #a8eed5; }
  .xui-avatar-color-5 + text * {
    fill: #1c4d3c; }

.xui-avatar-color-6 {
  background-color: #9eeefd;
  color: #154d58;
  fill: #9eeefd; }
  .xui-avatar-color-6 + text * {
    fill: #154d58; }

.xui-avatar-color-7 {
  background-color: #80bce4;
  color: #002a46;
  fill: #80bce4; }
  .xui-avatar-color-7 + text * {
    fill: #002a46; }

.xui-avatar-color-8 {
  background-color: #adadf3;
  color: #202051;
  fill: #adadf3; }
  .xui-avatar-color-8 + text * {
    fill: #202051; }

.xui-avatar-color-9 {
  background-color: #daa3e4;
  color: #3f1946;
  fill: #daa3e4; }
  .xui-avatar-color-9 + text * {
    fill: #3f1946; }

.xui-avatar-color-10 {
  background-color: #ffb2cb;
  color: #592335;
  fill: #ffb2cb; }
  .xui-avatar-color-10 + text * {
    fill: #592335; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-avatargroup {
  display: flex; }
  .xui-avatargroup .xui-avatar:nth-child(n+2) {
    box-shadow: -2px 0 0 0 rgba(0, 10, 30, 0.2);
    margin-left: -1.25em; }

.xui-avatar-counter {
  background-color: #ccced2;
  color: #404756; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-datepicker {
  border: none;
  font-size: 0.9375rem;
  padding-bottom: 10px;
  position: relative;
  width: 100%; }
  .xui-datepicker.xui-datepicker-compact {
    padding-bottom: 5px; }

.xui-datepicker--header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
  padding: 10px; }
  .xui-datepicker-compact .xui-datepicker--header {
    padding: 5px; }

.xui-datepicker--monthselect-layout {
  right: 0;
  text-align: right;
  text-align-last: right; }

.xui-datepicker--monthoption-layout {
  text-align: left;
  text-align-last: left; }

.xui-datepicker--prevbutton {
  margin-left: 5px;
  min-width: 40px; }
  .xui-datepicker-compact .xui-datepicker--prevbutton {
    min-width: 30px; }

.xui-datepicker--nextbutton {
  margin-right: 5px;
  min-width: 40px; }
  .xui-datepicker-compact .xui-datepicker--nextbutton {
    min-width: 30px; }

.xui-datepicker--button-is-disabled {
  cursor: default; }
  .xui-datepicker--button-is-disabled::before {
    color: #a6a9b0; }

.xui-datepicker--heading {
  line-height: 1.3077;
  position: relative; }

.xui-datepicker--heading-month {
  font-weight: 700; }

.xui-datepicker--yearselect-layout {
  left: 0;
  text-align: left; }

.xui-datepicker--heading--selection {
  pointer-events: none; }

.xui-datepicker--heading-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1em;
  height: 100%;
  left: 0;
  opacity: 0.01;
  position: absolute;
  top: 0;
  width: 100%; }
  .xui-datepicker--heading-select:focus + .xui-datepicker--heading-label {
    background: rgba(0, 10, 30, 0.1); }
  .xui-datepicker--heading-select:active + .xui-datepicker--heading-label {
    background: rgba(0, 10, 30, 0.2); }
  .xui-datepicker--heading-select:hover + .xui-datepicker--heading-label {
    color: #0078c8; }

.xui-datepicker--heading-label {
  border-radius: 3px;
  font-family: inherit;
  padding: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .xui-datepicker--heading-label:hover {
    cursor: default; }

.xui-datepicker--heading--selection-bold {
  font-weight: bold; }

.xui-datepicker--heading-dates {
  align-items: center;
  display: flex;
  justify-content: center; }

.xui-datepicker--body {
  border: 0;
  margin: 0;
  overflow: hidden;
  width: 100%; }
  .xui-datepicker--body:focus {
    outline: none; }

.xui-datepicker--week {
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px; }
  .xui-datepicker-compact .xui-datepicker--week {
    padding-left: 5px;
    padding-right: 5px; }

.xui-datepicker--weekdays {
  border-bottom: 1px solid #e6e7e9;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px; }
  .xui-datepicker-compact .xui-datepicker--weekdays {
    margin-bottom: 5px;
    padding: 5px; }

.xui-datepicker--day {
  border: 0;
  box-sizing: content-box;
  cursor: pointer;
  display: flex;
  flex: 1 0 auto;
  font-size: inherit;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: relative;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 40px;
  z-index: 0; }
  .xui-datepicker--day::after, .xui-datepicker--day::before {
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    width: 50%; }
  .xui-datepicker--day::after {
    left: 50%; }
  .xui-datepicker--day::before {
    right: 50%; }
  .xui-datepicker--day:active, .xui-datepicker--day:focus {
    outline: none; }
  .xui-datepicker-compact .xui-datepicker--day {
    height: 30px;
    width: 30px; }

.xui-datepicker--day-selectable:not(.xui-datepicker--day-is-in-range):active .xui-datepicker--day--time, .xui-datepicker--day-selectable:not(.xui-datepicker--day-is-in-range):focus .xui-datepicker--day--time {
  background-color: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day-selectable:not(.xui-datepicker--day-is-in-selected-range):active .xui-datepicker--day--time {
  background-color: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day--time {
  align-items: center;
  display: flex;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  height: 40px;
  pointer-events: none;
  position: relative;
  width: 40px;
  z-index: 1; }
  .xui-datepicker-compact .xui-datepicker--day--time {
    height: 30px;
    width: 30px; }

.xui-datepicker--weekday {
  color: rgba(0, 10, 30, 0.75);
  cursor: default;
  font-size: 0.6875rem;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.xui-datepicker--weekdaywrapper {
  flex: 1;
  text-align: center; }

.xui-datepicker--day-is-othermonth {
  color: rgba(0, 10, 30, 0.65); }

.xui-datepicker--day-is-today {
  color: #0078c8;
  font-weight: bold; }

.xui-datepicker--day-is-selected:not(.xui-datepicker--day-is-selected-middle) .xui-datepicker--day--time {
  background: #0078c8;
  box-shadow: 0 0 0 0 #0078c8;
  color: #fff;
  transition: box-shadow 0.1s ease; }

.xui-datepicker--day-is-selected:focus .xui-datepicker--day--time {
  background: #002a46; }

.xui-datepicker--day-is-selected:active .xui-datepicker--day--time, .xui-datepicker--day-is-selected:active:focus .xui-datepicker--day--time {
  box-shadow: 0 0 0 2px #002a46; }

.xui-datepicker--day-is-disabled {
  cursor: not-allowed; }
  .xui-datepicker--day-is-disabled .xui-datepicker--day--time {
    color: rgba(0, 10, 30, 0.5); }

.xui-datepicker--day-is-hovered-start::before {
  background: rgba(0, 10, 30, 0.1);
  border-radius: 20px 0 0 20px;
  width: 20px; }
  .xui-datepicker-compact .xui-datepicker--day-is-hovered-start::before {
    border-radius: 15px 0 0 15px;
    width: 15px; }

.xui-datepicker--day-is-hovered-start::after {
  background: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day-is-hovered-middle::before {
  background: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day-is-hovered-middle::after {
  background: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day-is-hovered-end::before {
  background: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day-is-hovered-end::after {
  background: rgba(0, 10, 30, 0.1);
  border-radius: 0 20px 20px 0;
  width: 20px; }
  .xui-datepicker-compact .xui-datepicker--day-is-hovered-end::after {
    border-radius: 0 15px 15px 0;
    width: 15px; }

.xui-datepicker--day-is-selected-start::before {
  background: #0078c8;
  border-radius: 20px 0 0 20px;
  width: 20px; }
  .xui-datepicker-compact .xui-datepicker--day-is-selected-start::before {
    border-radius: 15px 0 0 15px;
    width: 15px; }

.xui-datepicker--day-is-selected-start::after {
  background: #0078c8; }

.xui-datepicker--day-is-selected-start .xui-datepicker--day--time {
  color: #fff; }

.xui-datepicker--day-is-selected-middle::before {
  background: #0078c8; }

.xui-datepicker--day-is-selected-middle::after {
  background: #0078c8; }

.xui-datepicker--day-is-selected-middle .xui-datepicker--day--time {
  color: #fff; }

.xui-datepicker--day-is-selected-end::before {
  background: #0078c8; }

.xui-datepicker--day-is-selected-end::after {
  background: #0078c8;
  border-radius: 0 20px 20px 0;
  width: 20px; }
  .xui-datepicker-compact .xui-datepicker--day-is-selected-end::after {
    border-radius: 0 15px 15px 0;
    width: 15px; }

.xui-datepicker--day-is-selected-end .xui-datepicker--day--time {
  color: #fff; }

.xui-datepicker--day-is-selected-hovered-start::before {
  background: rgba(0, 10, 30, 0.1);
  border-radius: 20px 0 0 20px;
  width: 20px; }
  .xui-datepicker-compact .xui-datepicker--day-is-selected-hovered-start::before {
    border-radius: 15px 0 0 15px;
    width: 15px; }

.xui-datepicker--day-is-selected-hovered-start::after {
  background: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day-is-selected-hovered-end::before {
  background: rgba(0, 10, 30, 0.1); }

.xui-datepicker--day-is-selected-hovered-end::after {
  background: rgba(0, 10, 30, 0.1);
  border-radius: 0 20px 20px 0;
  width: 20px; }
  .xui-datepicker-compact .xui-datepicker--day-is-selected-hovered-end::after {
    border-radius: 0 15px 15px 0;
    width: 15px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-popover {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
  position: relative; }

.xui-popover--arrow {
  display: inline-block;
  fill: #fff;
  font-size: 1px;
  height: 16px;
  left: 15px;
  opacity: 1;
  position: absolute;
  top: -8px;
  vertical-align: middle;
  width: 16px; }
  .xui-popover--arrow-topleft {
    left: 15px;
    top: -8px; }
  .xui-popover--arrow-topcenter {
    left: 50%;
    transform: translateX(-50%); }
  .xui-popover--arrow-topright {
    left: auto;
    right: 15px; }
  .xui-popover--arrow-bottomleft {
    bottom: -8px;
    top: auto;
    transform: rotate(180deg); }
  .xui-popover--arrow-bottomcenter {
    bottom: -8px;
    left: 50%;
    top: auto;
    transform: translateX(-50%) rotate(180deg); }
  .xui-popover--arrow-bottomright {
    bottom: -8px;
    left: auto;
    right: 15px;
    top: auto;
    transform: rotate(180deg); }
  .xui-popover--arrow-lefttop {
    left: -8px;
    top: 15px;
    transform: rotate(270deg); }
  .xui-popover--arrow-leftcenter {
    left: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(270deg); }
  .xui-popover--arrow-leftbottom {
    bottom: 15px;
    left: -8px;
    top: auto;
    transform: rotate(270deg); }
  .xui-popover--arrow-righttop {
    left: auto;
    right: -8px;
    top: 15px;
    transform: rotate(90deg); }
  .xui-popover--arrow-rightcenter {
    left: auto;
    right: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg); }
  .xui-popover--arrow-rightbottom {
    bottom: 15px;
    left: auto;
    right: -8px;
    top: auto;
    transform: rotate(90deg); }
  .xui-popover--arrow--border {
    stroke: rgba(0, 10, 30, 0.35); }

.xui-popover-arrow:before {
  border-bottom: 8px solid rgba(0, 10, 30, 0.35);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  content: '';
  left: 15px;
  position: absolute;
  top: -9px; }

.xui-popover-arrow:after {
  border-bottom: 8px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  content: '';
  left: 15px;
  position: absolute;
  top: -7px; }

.xui-popover-arrow-topleft:before {
  left: 15px;
  top: -9px; }

.xui-popover-arrow-topcenter:before {
  left: 50%;
  transform: translateX(-50%); }

.xui-popover-arrow-topright:before {
  left: auto;
  right: 15px; }

.xui-popover-arrow-bottomleft:before {
  bottom: -9px;
  top: auto;
  transform: rotate(180deg); }

.xui-popover-arrow-bottomcenter:before {
  bottom: -9px;
  left: 50%;
  top: auto;
  transform: translateX(-50%) rotate(180deg); }

.xui-popover-arrow-bottomright:before {
  bottom: -9px;
  left: auto;
  right: 15px;
  top: auto;
  transform: rotate(180deg); }

.xui-popover-arrow-lefttop:before {
  left: -13px;
  top: 15px;
  transform: rotate(270deg); }

.xui-popover-arrow-leftcenter:before {
  left: -13px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg); }

.xui-popover-arrow-leftbottom:before {
  bottom: 15px;
  left: -13px;
  top: auto;
  transform: rotate(270deg); }

.xui-popover-arrow-righttop:before {
  left: auto;
  right: -13px;
  top: 15px;
  transform: rotate(90deg); }

.xui-popover-arrow-rightcenter:before {
  left: auto;
  right: -13px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg); }

.xui-popover-arrow-rightbottom:before {
  bottom: 15px;
  left: auto;
  right: -13px;
  top: auto;
  transform: rotate(90deg); }

.xui-popover-arrow-topleft:after {
  left: 15px;
  top: -7px; }

.xui-popover-arrow-topcenter:after {
  left: 50%;
  transform: translateX(-50%); }

.xui-popover-arrow-topright:after {
  left: auto;
  right: 15px; }

.xui-popover-arrow-bottomleft:after {
  bottom: -7px;
  top: auto;
  transform: rotate(180deg); }

.xui-popover-arrow-bottomcenter:after {
  bottom: -7px;
  left: 50%;
  top: auto;
  transform: translateX(-50%) rotate(180deg); }

.xui-popover-arrow-bottomright:after {
  bottom: -7px;
  left: auto;
  right: 15px;
  top: auto;
  transform: rotate(180deg); }

.xui-popover-arrow-lefttop:after {
  left: -11px;
  top: 15px;
  transform: rotate(270deg); }

.xui-popover-arrow-leftcenter:after {
  left: -11px;
  top: 50%;
  transform: translateY(-50%) rotate(270deg); }

.xui-popover-arrow-leftbottom:after {
  bottom: 15px;
  left: -11px;
  top: auto;
  transform: rotate(270deg); }

.xui-popover-arrow-righttop:after {
  left: auto;
  right: -11px;
  top: 15px;
  transform: rotate(90deg); }

.xui-popover-arrow-rightcenter:after {
  left: auto;
  right: -11px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg); }

.xui-popover-arrow-rightbottom:after {
  bottom: 15px;
  left: auto;
  right: -11px;
  top: auto;
  transform: rotate(90deg); }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-contentblock {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%; }

.xui-contentblockitem {
  border-top: 1px solid #ccced2;
  list-style: none;
  min-height: inherit;
  position: relative; }
  .xui-contentblockitem:first-of-type {
    border-top: 0; }

.xui-contentblockitem-rowlink {
  color: inherit;
  text-decoration: none; }
  .xui-contentblockitem-rowlink:hover, .xui-contentblockitem-rowlink:focus {
    background-color: #f2f3f4; }
  .xui-contentblockitem-rowlink:active {
    background-color: #e6e7e9; }

.xui-contentblockitem-has-top-radius {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px; }

.xui-contentblockitem-has-bottom-radius {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }

.xui-contentblockitem--links {
  color: inherit;
  cursor: pointer;
  display: block;
  text-decoration: none; }
  .xui-contentblockitem--links:hover {
    color: inherit; }

.xui-contentblockitem-layout {
  align-items: center;
  display: flex; }
  .xui-contentblockitem-layout .xui-contentblockitem--actions {
    margin-right: 10px; }
  .xui-contentblockitem-layout .xui-contentblockitem--rightcontent {
    align-items: center;
    display: flex;
    margin-left: 10px;
    margin-right: 10px; }
  .xui-contentblockitem-layout .xui-contentblockitem--leftcontent {
    min-width: 69px;
    align-items: center;
    display: flex;
    justify-content: center; }
  .xui-contentblockitem-layout .xui-contentblockitem--links {
    flex: 1;
    padding-bottom: 15px;
    padding-top: 15px; }
  .xui-contentblockitem-layout .xui-contentblockitem--links:first-child {
    padding-left: 20px; }
  .xui-contentblockitem-layout .xui-contentblockitem--links:last-child {
    padding-right: 20px; }
  .xui-contentblockitem-layout .xui-contentblockitem--toplinks {
    align-items: center; }
  .xui-contentblockitem-layout .xui-contentblockitem--pinnedvalue {
    margin-right: 10px;
    text-align: right; }
  .xui-contentblockitem-layout .xui-contentblockitem--pinnedvalue:nth-last-child(odd) {
    margin-right: 20px; }

.xui-contentblockitem--toplinks {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }

.xui-contentblockitem--primaryheading {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3077; }

.xui-contentblockitem--secondaryheading {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  color: rgba(0, 10, 30, 0.75); }

.xui-contentblockitem--pinnedvalue {
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3077; }

.xui-rowlink {
  color: inherit;
  display: block; }

.xui-table {
  border-radius: 3px;
  position: relative; }

.xui-table-responsive .xui-table-wrapper {
  overflow-x: auto; }

.xui-table-element {
  width: 100%; }

.xui-table-element > *:nth-child(1) > tr:nth-child(1) > *:nth-child(1) {
  border-top-left-radius: 3px; }

.xui-table-element > *:nth-child(1) > tr:nth-child(1) > *:nth-last-child(1) {
  border-top-right-radius: 3px; }

.xui-table-element > *:nth-last-child(1) > tr:nth-last-child(1) > *:nth-child(1) {
  border-bottom-left-radius: 3px; }

.xui-table-element > *:nth-last-child(1) > tr:nth-last-child(1) > *:nth-last-child(1) {
  border-bottom-right-radius: 3px; }

.xui-table-pinleft .xui-table-element:before,
.xui-table-pinright .xui-table-element:after {
  background: #fff;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 50px;
  z-index: 1; }

.xui-table-pinleft .xui-table-element:before {
  border-radius: 3px 0 0 3px;
  border-right: 1px solid transparent;
  left: 0; }

.xui-table-pinright .xui-table-element:after {
  border-left: 1px solid transparent;
  border-radius: 0 3px 3px 0;
  right: 0; }

.xui-table-overflowleft .xui-table-element:before,
.xui-table-overflowright .xui-table-element:after {
  border-color: #ccced2;
  box-sizing: content-box; }

.xui-table-withtruncation .xui-table-element {
  table-layout: fixed; }

.xui-table--row {
  background: #fff;
  transition-duration: 0.1s;
  transition-property: background; }

.xui-table--row-link {
  cursor: pointer;
  outline: 0; }
  .xui-table--row-link:focus {
    background: #f2f3f4; }

.xui-table-nopointerevents .xui-table--row-link:hover, .xui-table-pinleft.xui-table-nopointerevents .xui-table--row-link, .xui-table--row-hasprecedence.xui-table--row-link:hover .xui-table--cell-action, .xui-table-pinright.xui-table-nopointerevents .xui-table--row-link, .xui-table--row-hasprecedence.xui-table--row-link:hover .xui-table--cell-action,
.xui-table--row-hasprecedence.xui-table--row-link:hover {
  background: #f2f3f4; }

.xui-table-nopointerevents .xui-table--row-link:active, .xui-table-pinleft.xui-table-nopointerevents .xui-table--row-link, .xui-table--row-hasprecedence.xui-table--row-link:active .xui-table--cell-action, .xui-table-pinright.xui-table-nopointerevents .xui-table--row-link, .xui-table--row-hasprecedence.xui-table--row-link:active .xui-table--cell-action,
.xui-table--row-hasprecedence.xui-table--row-link:active {
  background: #e6e7e9; }

.xui-table-nopointerevents .xui-table--row-link:focus, .xui-table-pinleft.xui-table-nopointerevents .xui-table--row-link, .xui-table--row-hasprecedence.xui-table--row-link:focus .xui-table--cell-action, .xui-table-pinright.xui-table-nopointerevents .xui-table--row-link, .xui-table--row-hasprecedence.xui-table--row-link:focus .xui-table--cell-action,
.xui-table--row-hasprecedence.xui-table--row-link:focus {
  outline: 0; }

.xui-table--sortbutton {
  background: #fff;
  cursor: pointer;
  height: 40px;
  outline: 0;
  overflow: hidden;
  text-align: left;
  transition-duration: 0.1s;
  transition-property: background;
  width: 100%; }
  .xui-table--sortbutton:hover {
    color: #003c64; }
  .xui-table--sortbutton:focus {
    background: #f2f3f4; }
  .xui-table--sortbutton:active {
    background: #e6e7e9; }

.xui-table--cell-last.xui-table--sortbutton:not(.xui-table--sortbutton-active) > * {
  transform: translateX(15px); }

.xui-table--sortbutton * {
  transition-duration: 0.1s;
  transition-property: color, transform; }

.xui-table--sortbutton-icon {
  margin-left: 8px;
  opacity: 0;
  vertical-align: middle; }

.xui-table--sortbutton-active .xui-table--sortbutton-icon {
  opacity: 1; }

.xui-table-withtruncation .xui-table--cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.xui-table-pinleft .xui-table--cell-second {
  border-left: 50px solid transparent; }

.xui-table-pinright .xui-table--cell-secondtolast {
  border-right: 50px solid transparent; }

.xui-table-pinleft .xui-table--cell-first,
.xui-table-pinright .xui-table--cell-last {
  position: absolute;
  z-index: 2; }

.xui-table-pinleft .xui-table--cell-first {
  left: 0; }

.xui-table-pinright .xui-table--cell-last {
  right: 0; }

.xui-table--checkbox-body,
.xui-table--checkbox-head {
  left: 10px;
  position: absolute;
  top: 10px; }

.xui-table--checkbox-head {
  left: 0;
  padding: 0;
  top: -5px; }

.xui-table--overflowmenu-body {
  position: absolute;
  right: 5px;
  top: 5px; }

.xui-table--customheader,
.xui-table--customfooter {
  position: relative;
  z-index: 3; }

.xui-table--customheader {
  border-bottom: 1px solid #ccced2; }

.xui-table--customfooter {
  border-top: 1px solid #ccced2; }

.xui-table--alert {
  min-height: 140px;
  position: relative;
  z-index: 4; }

.xui-table-hasheader .xui-table--alert {
  border-top: 1px solid #e6e7e9; }

.xui-table--cell-divider:after {
  background: #ccced2;
  content: "";
  display: block;
  height: 1px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%; }

.xui-table--cell {
  background: inherit;
  position: relative;
  text-align: left;
  vertical-align: middle; }

.xui-table--cell > * {
  text-align: left; }

.xui-table--cell-last,
.xui-table--cell-last > * {
  text-align: right; }

.xui-table--body .xui-table--cell {
  height: 50px;
  min-height: 50px; }

.xui-table--head .xui-table--cell {
  height: 40px;
  min-height: 40px;
  padding: 0; }

.xui-table--head .xui-table--cell > * {
  padding: 10px;
  white-space: nowrap; }

.xui-table--cell-singleline {
  white-space: nowrap; }

.xui-table--cell:not(.xui-table--cell-singleline) {
  max-width: 300px;
  overflow-wrap: break-word; }

.xui-table--cell-link {
  cursor: pointer;
  outline: 0;
  transition-duration: 0.1s;
  transition-property: background; }
  .xui-table--cell-link:focus {
    background: #f2f3f4; }

.xui-table-nopointerevents .xui-table--cell-link:hover,
.xui-table--cell-hasprecedence.xui-table--cell-link:hover {
  background: #f2f3f4; }

.xui-table-nopointerevents .xui-table--cell-link:active,
.xui-table--cell-hasprecedence.xui-table--cell-link:active {
  background: #e6e7e9; }

.xui-table--cell-action {
  min-width: 50px;
  width: 50px; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * An aggregator stylesheet of input elements that can be found in forms.
 */
/*
Applies hover button styling and given contents on hover.
*/
.xui-form-layout {
  margin-left: auto;
  margin-right: auto;
  max-width: 400px; }

.xui-validation-layout {
  margin-bottom: 10px;
  min-height: 20px;
  padding-top: 5px; }

.xui-field-layout {
  margin-bottom: 30px; }
  .xui-field-layout .xui-validation {
    margin-bottom: -21px; }

.xui-validation {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.6875rem; }

.xui-validation-is-invalid {
  color: #dc3246; }

.xui-form-inline {
  margin: auto;
  max-width: 400px; }
  @media screen and (min-width: 520px) {
    .xui-form-inline {
      max-width: none; }
      .xui-form-inline .xui-field-layout {
        display: inline-block;
        vertical-align: bottom; } }

.xui-fieldlabel-layout {
  display: inline-block;
  line-height: 1.3077;
  padding-bottom: 4px; }

.xui-verticalinputgroup .xui-textinput:first-of-type,
.xui-verticalinputgroup .xui-textinputwrapper:first-of-type > .xui-textinput {
  border-radius: 3px 3px 0 0; }

.xui-verticalinputgroup .xui-textinput:nth-of-type(n+2),
.xui-verticalinputgroup .xui-textinputwrapper:nth-of-type(n+2) > .xui-textinput {
  margin-top: -1px; }

.xui-verticalinputgroup .xui-textinput:nth-of-type(n+2):nth-last-of-type(n+2),
.xui-verticalinputgroup .xui-textinputwrapper:nth-of-type(n+2):nth-last-of-type(n+2) > .xui-textinput {
  border-radius: 0; }

.xui-verticalinputgroup .xui-textinput:last-of-type,
.xui-verticalinputgroup .xui-textinputwrapper:last-of-type > .xui-textinput {
  border-radius: 0 0 3px 3px; }

.xui-inputgroup > .xui-textinput,
.xui-inputgroup > .xui-button,
.xui-inputgroup .xui-select--control {
  border-radius: 0; }
  .xui-inputgroup > .xui-textinput:nth-child(n+2),
  .xui-inputgroup > .xui-button:nth-child(n+2),
  .xui-inputgroup .xui-select--control:nth-child(n+2) {
    border-left: 0; }

.xui-inputgroup > .xui-textinputwrapper > .xui-textinput,
.xui-inputgroup > .xui-textinputwrapper .xui-button {
  border-radius: 0; }

.xui-inputgroup > .xui-textinputwrapper:nth-child(n+2) > .xui-textinput {
  border-left: 0; }

.xui-inputgroup > .xui-select:nth-child(n+2) .xui-select--control {
  border-left: 0; }

.xui-inputgroup > .xui-textinput:first-child,
.xui-inputgroup > .xui-textinputwrapper:first-child > .xui-textinput,
.xui-inputgroup > .xui-textinputwrapper:first-child .xui-button,
.xui-inputgroup > .xui-button:first-child,
.xui-inputgroup > .xui-select:first-child > .xui-select--control {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px; }

.xui-inputgroup > .xui-textinput:last-child,
.xui-inputgroup > .xui-textinputwrapper:last-child > .xui-textinput,
.xui-inputgroup > .xui-button:last-child,
.xui-inputgroup > .xui-select:last-child > .xui-select--control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px; }

.xui-inputgroup::after {
  clear: both;
  content: "";
  display: table; }

.xui-inputgroup .xui-textinput-is-invalid:nth-child(n+2),
.xui-inputgroup .xui-textinputwrapper:nth-child(n+2) .xui-textinput-is-invalid,
.xui-inputgroup .xui-select:nth-child(n+2) > .xui-select--control.xui-textinput-is-invalid {
  border-left: 1px solid #dc3246;
  margin-left: -1px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-styledcheckboxradio-group {
  background: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px; }
  .xui-styledcheckboxradio-group .xui-styledcheckboxradio {
    display: flex;
    padding: 4px; }
  .xui-styledcheckboxradio-group .xui-styledcheckboxradio:nth-last-of-type(n+2) {
    border-bottom: 1px solid #a6a9b0; }
  .xui-styledcheckboxradio-group .xui-styledcheckboxradio-reversed .xui-styledcheckboxradio--label {
    padding: 6px 3px 3px 6px; }

.xui-styledcheckboxradio--label {
  flex-grow: 1;
  padding: 6px 6px 3px 3px; }
  .xui-styledcheckboxradio-is-disabled .xui-styledcheckboxradio--label {
    color: rgba(0, 10, 30, 0.5); }

.xui-styledcheckboxradio-reversed {
  flex-direction: row-reverse;
  justify-content: space-between; }

.xui-styledcheckboxradio {
  line-height: 1.5;
  align-items: flex-start;
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .xui-styledcheckboxradio .xui-iconwrapper {
    flex-shrink: 0;
    pointer-events: none; }
  .xui-styledcheckboxradio .xui-icon {
    overflow: visible; }
  .xui-styledcheckboxradio.xui-styledcheckboxradio-is-disabled {
    cursor: auto;
    fill: #e6e7e9; }

.xui-styledcheckboxradio--focus,
.xui-styledcheckboxradio--main,
.xui-styledcheckboxradio--check,
.xui-styledcheckboxradio--indeterminate {
  transition: all 0.1s ease; }

.xui-styledcheckboxradio--focus {
  opacity: 0;
  stroke: transparent;
  stroke-linejoin: round;
  stroke-width: 6; }

.xui-styledcheckboxradio--main {
  fill: #fff;
  stroke: #a6a9b0;
  stroke-linejoin: round; }

.xui-styledcheckboxradio--check,
.xui-styledcheckboxradio--indeterminate {
  fill: transparent;
  opacity: 0; }

.xui-styledcheckboxradio--input {
  display: inline;
  flex: none;
  height: 30px;
  left: 0 !important;
  margin: 0 -4px 0 -9px;
  opacity: 0.01;
  padding: 0;
  position: relative !important;
  width: 13px;
  z-index: -1; }
  .xui-styledcheckboxradio--input:hover + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #f2f3f4;
    stroke: #80858f; }
  .xui-styledcheckboxradio--input:focus:not(:hover) + .xui-iconwrapper .xui-styledcheckboxradio--focus {
    opacity: 1;
    stroke: rgba(0, 10, 30, 0.2); }
  .xui-styledcheckboxradio--input:focus:not(:hover) + .xui-iconwrapper .xui-styledcheckboxradio--main {
    stroke: #80858f; }
  .xui-styledcheckboxradio--input:active + .xui-iconwrapper .xui-styledcheckboxradio--focus {
    opacity: 0;
    stroke: transparent; }
  .xui-styledcheckboxradio--input:active + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #e6e7e9;
    stroke: #59606d; }
  .xui-styledcheckboxradio--input:checked + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #0078c8;
    stroke: #0078c8; }
  .xui-styledcheckboxradio--input:checked + .xui-iconwrapper .xui-styledcheckboxradio--check {
    fill: #fff;
    opacity: 1; }
  .xui-styledcheckboxradio--input:checked:hover + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #006db7;
    stroke: #006db7; }
  .xui-styledcheckboxradio--input:checked:active + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #0062a6;
    stroke: #0062a6; }
  .xui-styledcheckboxradio--input[type=checkbox]:indeterminate + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #0078c8;
    stroke: #0078c8; }
  .xui-styledcheckboxradio--input:indeterminate + .xui-iconwrapper .xui-styledcheckboxradio--check {
    fill: transparent;
    opacity: 0; }
  .xui-styledcheckboxradio--input:indeterminate + .xui-iconwrapper .xui-styledcheckboxradio--indeterminate {
    fill: #fff;
    opacity: 1; }
  .xui-styledcheckboxradio--input:indeterminate:hover + .xui-iconwrapper .xui-styledcheckboxradio--main {
    stroke: #80858f; }
    .xui-styledcheckboxradio--input:indeterminate:hover + .xui-iconwrapper .xui-styledcheckboxradio--main[type=checkbox] {
      fill: #006db7;
      stroke: #006db7; }
  .xui-styledcheckboxradio--input:indeterminate:active + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #0062a6;
    stroke: #0062a6; }
  .xui-styledcheckboxradio--input:disabled + .xui-iconwrapper .xui-styledcheckboxradio--main,
  .xui-styledcheckboxradio--input:disabled:hover + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #e6e7e9;
    stroke: rgba(0, 10, 30, 0.5); }
  .xui-styledcheckboxradio--input:disabled + .xui-iconwrapper .xui-styledcheckboxradio--check,
  .xui-styledcheckboxradio--input:disabled + .xui-iconwrapper .xui-styledcheckboxradio--indeterminate,
  .xui-styledcheckboxradio--input:disabled:hover + .xui-iconwrapper .xui-styledcheckboxradio--check,
  .xui-styledcheckboxradio--input:disabled:hover + .xui-iconwrapper .xui-styledcheckboxradio--indeterminate {
    fill: #80858f; }
  .xui-styledcheckboxradio--input:disabled:checked + .xui-iconwrapper .xui-styledcheckboxradio--main {
    fill: #80858f; }
  .xui-styledcheckboxradio--input:hover + .xui-styledcheckboxradio--checkbox,
  .xui-styledcheckboxradio--input:hover + .xui-styledcheckboxradio--radio {
    border-color: #80858f; }
  .xui-styledcheckboxradio--input:hover + .xui-styledcheckboxradio--radio:after {
    background-color: #f2f3f4; }
  .xui-styledcheckboxradio--input:focus:not(:hover) + .xui-styledcheckboxradio--checkbox,
  .xui-styledcheckboxradio--input:focus:not(:hover) + .xui-styledcheckboxradio--radio {
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2); }
  .xui-styledcheckboxradio--input:active + .xui-styledcheckboxradio--checkbox,
  .xui-styledcheckboxradio--input:active + .xui-styledcheckboxradio--radio {
    border-color: #59606d; }
  .xui-styledcheckboxradio--input:active + .xui-styledcheckboxradio--radio:after {
    background-color: #e6e7e9; }
  .xui-styledcheckboxradio--input:checked + .xui-styledcheckboxradio--checkbox, .xui-styledcheckboxradio--input:indeterminate + .xui-styledcheckboxradio--checkbox {
    background-color: #0078c8;
    border-color: #0078c8; }
  .xui-styledcheckboxradio--input:checked:hover + .xui-styledcheckboxradio--checkbox, .xui-styledcheckboxradio--input:indeterminate:hover + .xui-styledcheckboxradio--checkbox {
    background-color: #006db7;
    border-color: #006db7; }
  .xui-styledcheckboxradio--input:checked:active + .xui-styledcheckboxradio--checkbox, .xui-styledcheckboxradio--input:indeterminate:active + .xui-styledcheckboxradio--checkbox {
    background-color: #0062a6;
    border-color: #0062a6; }
  .xui-styledcheckboxradio--input:checked + .xui-styledcheckboxradio--radio {
    background-color: #0078c8;
    border-color: #0078c8; }
    .xui-styledcheckboxradio--input:checked + .xui-styledcheckboxradio--radio:after {
      border-width: 5px; }
    .xui-styledcheckboxradio--input:checked + .xui-styledcheckboxradio--radio:hover + .xui-styledcheckboxradio--radio {
      background-color: #e6e7e9;
      border-color: #006db7; }
    .xui-styledcheckboxradio--input:checked + .xui-styledcheckboxradio--radio:active + .xui-styledcheckboxradio--radio {
      background-color: #e6e7e9;
      border-color: #0062a6; }
  .xui-styledcheckboxradio--input:checked:not(:disabled) + .xui-styledcheckboxradio--checkbox:after {
    animation: xui-tick-checkbox 0.3s ease both;
    opacity: 1; }
  .xui-styledcheckboxradio--input:indeterminate:not(:disabled) + .xui-styledcheckboxradio--checkbox:before {
    animation: xui-indeterminate-checkbox 0.3s ease both;
    opacity: 1; }
  .xui-styledcheckboxradio--input:disabled + .xui-styledcheckboxradio--checkbox,
  .xui-styledcheckboxradio--input:disabled + .xui-styledcheckboxradio--radio, .xui-styledcheckboxradio--input:disabled:hover + .xui-styledcheckboxradio--checkbox,
  .xui-styledcheckboxradio--input:disabled:hover + .xui-styledcheckboxradio--radio {
    background-color: #e6e7e9;
    border-color: rgba(0, 10, 30, 0.5); }
    .xui-styledcheckboxradio--input:disabled + .xui-styledcheckboxradio--checkbox:after, .xui-styledcheckboxradio--input:disabled + .xui-styledcheckboxradio--checkbox:before,
    .xui-styledcheckboxradio--input:disabled + .xui-styledcheckboxradio--radio:after,
    .xui-styledcheckboxradio--input:disabled + .xui-styledcheckboxradio--radio:before, .xui-styledcheckboxradio--input:disabled:hover + .xui-styledcheckboxradio--checkbox:after, .xui-styledcheckboxradio--input:disabled:hover + .xui-styledcheckboxradio--checkbox:before,
    .xui-styledcheckboxradio--input:disabled:hover + .xui-styledcheckboxradio--radio:after,
    .xui-styledcheckboxradio--input:disabled:hover + .xui-styledcheckboxradio--radio:before {
      background-color: transparent;
      border-color: transparent; }
  .xui-styledcheckboxradio--input:disabled:checked + .xui-styledcheckboxradio--checkbox:after, .xui-styledcheckboxradio--input:disabled:hover:checked + .xui-styledcheckboxradio--checkbox:after {
    border-color: #80858f;
    opacity: 1; }
  .xui-styledcheckboxradio--input:disabled:indeterminate + .xui-styledcheckboxradio--checkbox:before, .xui-styledcheckboxradio--input:disabled:hover:indeterminate + .xui-styledcheckboxradio--checkbox:before {
    background-color: #80858f;
    opacity: 1; }
  .xui-styledcheckboxradio--input:disabled:checked + .xui-styledcheckboxradio--radio:after, .xui-styledcheckboxradio--input:disabled:hover:checked + .xui-styledcheckboxradio--radio:after {
    background-color: #80858f;
    border-color: #e6e7e9; }

.xui-styledcheckboxradio--checkbox {
  align-self: flex-start;
  background-color: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  height: 19px;
  margin: 6px 5px 4px 6px;
  position: relative;
  transition: background-color 0.1s ease;
  width: 19px; }
  .xui-styledcheckboxradio--checkbox:before, .xui-styledcheckboxradio--checkbox:after {
    content: '';
    opacity: 0;
    position: absolute; }
  .xui-styledcheckboxradio-is-disabled .xui-styledcheckboxradio--checkbox {
    cursor: not-allowed; }

.xui-styledcheckboxradio--checkbox:after {
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  box-sizing: border-box;
  height: 38%;
  left: 14%;
  top: 55%;
  transform: rotate(-46deg);
  transform-origin: 0 0;
  width: 74%; }

.xui-styledcheckboxradio--checkbox:before {
  background-color: #fff;
  height: 2px;
  left: 49%;
  margin-left: -25%;
  top: 48%;
  transform-origin: 50% 50%;
  width: 53%; }

@keyframes xui-tick-checkbox {
  0% {
    height: 0%;
    opacity: 0;
    width: 0%; }
  50% {
    height: 38%;
    opacity: 1;
    width: 0%; }
  100% {
    height: 38%;
    opacity: 1;
    width: 74%; } }

@keyframes xui-indeterminate-checkbox {
  0% {
    transform: scale(0, 1); }
  100% {
    transform: scale(1, 1); } }

.xui-styledcheckboxradio--radio {
  align-self: flex-start;
  background-color: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 19px;
  justify-content: center;
  margin: 6px 5px 4px 6px;
  position: relative;
  transition: all 0.1s ease;
  width: 19px; }
  .xui-styledcheckboxradio--radio:after {
    align-self: center;
    background-color: #fff;
    border-color: #0078c8;
    border-radius: 50%;
    border-style: solid;
    border-width: 0px;
    box-sizing: border-box;
    content: '';
    height: 100%;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1.2);
    width: 100%; }
    .xui-styledcheckboxradio-is-disabled .xui-styledcheckboxradio--radio:after {
      cursor: not-allowed; }
  .xui-styledcheckboxradio-is-disabled .xui-styledcheckboxradio--radio {
    cursor: not-allowed; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/*
 * Custom styling for `<input type="range">`
 * After Ana Tudor:
 * https://codepen.io/thebabydino/pen/qVQLzm
 */
.xui-range-slider {
  -webkit-appearance: none;
  background: transparent;
  height: 25px;
  margin: 0;
  padding: 0;
  width: 100%; }
  .xui-range-slider.xui-range-slider-is-invalid::-webkit-slider-thumb {
    border-color: #dc3246; }
  .xui-range-slider.xui-range-slider-is-invalid::-moz-range-thumb {
    border-color: #dc3246; }
  .xui-range-slider.xui-range-slider-is-invalid::-ms-thumb {
    border-color: #dc3246; }
  .xui-range-slider.xui-range-slider-is-invalid::-webkit-slider-runnable-track {
    background: #dc3246; }
  .xui-range-slider.xui-range-slider-is-invalid::-moz-range-track {
    background: #dc3246; }
  .xui-range-slider.xui-range-slider-is-invalid::-ms-track {
    background: #dc3246;
    color: #dc3246; }
  .xui-range-slider:disabled {
    cursor: not-allowed; }
    .xui-range-slider:disabled::-webkit-slider-thumb {
      background: #e6e7e9; }
    .xui-range-slider:disabled::-moz-range-thumb {
      background: #e6e7e9; }
    .xui-range-slider:disabled::-ms-thumb {
      background: #e6e7e9; }
  .xui-range-slider::-webkit-slider-runnable-track {
    background: #a6a9b0;
    border: none;
    box-sizing: border-box;
    height: 2px;
    width: 100%; }
  .xui-range-slider::-moz-range-track {
    background: #a6a9b0;
    border: none;
    box-sizing: border-box;
    height: 2px;
    width: 100%; }
  .xui-range-slider::-ms-track {
    background: #a6a9b0;
    border: none;
    box-sizing: border-box;
    height: 2px;
    width: 100%;
    color: #a6a9b0; }
  .xui-range-slider::-ms-fill-lower, .xui-range-slider::-ms-fill-upper {
    background-color: #a6a9b0; }
  .xui-range-slider::-webkit-slider-thumb {
    background: #fff;
    border: 1px solid #a6a9b0;
    border-radius: 50%;
    box-sizing: border-box;
    height: 25px;
    width: 25px;
    -webkit-appearance: none;
    margin-top: -11.5px; }
  .xui-range-slider::-moz-range-thumb {
    background: #fff;
    border: 1px solid #a6a9b0;
    border-radius: 50%;
    box-sizing: border-box;
    height: 25px;
    width: 25px; }
  .xui-range-slider::-ms-thumb {
    background: #fff;
    border: 1px solid #a6a9b0;
    border-radius: 50%;
    box-sizing: border-box;
    height: 25px;
    width: 25px;
    margin-top: 0; }
  .xui-range-slider:hover:not(:disabled) {
    cursor: pointer; }
  .xui-range-slider:focus {
    outline: none; }
    .xui-range-slider:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2); }
    .xui-range-slider:focus::-moz-range-thumb {
      box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2); }
    .xui-range-slider:focus::-ms-thumb {
      box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2); }
  .xui-range-slider:hover:not(:disabled):not(.xui-range-slider-is-invalid)::-webkit-slider-thumb {
    border-color: #80858f; }
  .xui-range-slider:hover:not(:disabled):not(.xui-range-slider-is-invalid)::-moz-range-thumb {
    border-color: #80858f; }
  .xui-range-slider:hover:not(:disabled):not(.xui-range-slider-is-invalid)::-ms-thumb {
    border-color: #80858f; }
  .xui-range-slider:focus:not(:disabled):not(.xui-range-slider-is-invalid)::-webkit-slider-thumb {
    border-color: #80858f; }
  .xui-range-slider:focus:not(:disabled):not(.xui-range-slider-is-invalid)::-moz-range-thumb {
    border-color: #80858f; }
  .xui-range-slider:focus:not(:disabled):not(.xui-range-slider-is-invalid)::-ms-thumb {
    border-color: #80858f; }
  .xui-range-slider:active:not(:disabled):not(.xui-range-slider-is-invalid)::-webkit-slider-thumb {
    border-color: #59606d; }
  .xui-range-slider:active:not(:disabled):not(.xui-range-slider-is-invalid)::-moz-range-thumb {
    border-color: #59606d; }
  .xui-range-slider:active:not(:disabled):not(.xui-range-slider-is-invalid)::-ms-thumb {
    border-color: #59606d; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-switch {
  align-items: center;
  display: inline-flex;
  position: relative; }

.xui-switch-is-disabled {
  cursor: not-allowed; }

.xui-switch--control {
  background-color: rgba(0, 10, 30, 0.5);
  border-radius: 40px;
  cursor: pointer;
  display: inline-block;
  height: 22px;
  position: relative;
  transition: all 0.1s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  width: 40px; }
  .xui-switch--control::before {
    background-color: #fff;
    border-radius: 50%;
    content: " ";
    display: inline-block;
    height: 18px;
    margin: 2px;
    position: absolute;
    transition: all 0.1s ease;
    width: 18px; }
  .xui-switch-is-disabled .xui-switch--control {
    background: rgba(0, 10, 30, 0.2);
    cursor: not-allowed; }

.xui-switch--checkbox {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  left: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  white-space: nowrap !important;
  width: 1px !important; }
  .xui-switch--checkbox:focus + .xui-switch--control {
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2); }
  .xui-switch--checkbox:checked + .xui-switch--control {
    background: #0078c8; }
    .xui-switch-is-disabled .xui-switch--checkbox:checked + .xui-switch--control {
      background: #a6d0ec; }
    .xui-switch--checkbox:checked + .xui-switch--control::before {
      left: auto;
      transform: translate(18px); }

.xui-switch--label {
  flex-grow: 1; }
  .xui-switch:not(.xui-switch-reversed) .xui-switch--label {
    padding-left: 8px; }
  .xui-switch-is-disabled .xui-switch--label {
    color: rgba(0, 10, 30, 0.5);
    cursor: not-allowed; }

.xui-switch-reversed {
  flex-direction: row-reverse;
  justify-content: space-between; }
  .xui-switch-reversed .xui-switch--label {
    padding-right: 8px; }

.xui-switch-group {
  background: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px; }
  .xui-switch-group .xui-switch {
    display: flex;
    padding: 4px; }
  .xui-switch-group .xui-switch:nth-last-of-type(n+2) {
    border-bottom: 1px solid #a6a9b0; }
  .xui-switch-group .xui-switch:not(.xui-switch-reversed) .xui-switch--label {
    padding: 5px 6px 4px 3px; }
  .xui-switch-group .xui-switch-reversed .xui-switch--label {
    padding: 5px 3px 4px 6px; }
  .xui-switch-group .xui-switch--control {
    align-self: flex-start;
    flex-shrink: 0;
    margin: 4px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-select--control {
  line-height: 1.5;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  min-height: 40px;
  outline: none;
  padding: 8px 15px;
  position: relative;
  width: 100%;
  cursor: pointer;
  padding-right: 35px; }
  .xui-select--control:focus {
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    outline: none;
    transition: box-shadow 0.1s; }
  .xui-select--control:hover {
    border-color: #80858f; }
  .xui-select--control:disabled {
    background-color: rgba(0, 10, 30, 0.1);
    border-color: rgba(0, 10, 30, 0.5);
    color: rgba(0, 10, 30, 0.75);
    cursor: not-allowed;
    -webkit-text-fill-color: rgba(0, 10, 30, 0.75); }
  .xui-select--control *::-webkit-input-placeholder, .xui-select--control::-webkit-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--control *:-ms-input-placeholder, .xui-select--control:-ms-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--control *::-ms-input-placeholder, .xui-select--control::-ms-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--control *::placeholder, .xui-select--control::placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--control::-ms-clear, .xui-select--control::-ms-reveal {
    display: none;
    height: 0;
    width: 0; }
  .xui-select--control::-ms-expand {
    display: none; }
  .xui-select--control:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000a1e; }
  .xui-select--control:focus ~ .xui-select--caret {
    z-index: 3; }
  .xui-select--control ~ .xui-select--caret {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translate(0, -50%); }

.xui-select {
  position: relative; }

.xui-select--caret {
  align-self: center;
  fill: #404756; }

.xui-select--content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }

.xui-select--button {
  line-height: 1.5;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  min-height: 40px;
  outline: none;
  padding: 8px 15px;
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px;
  color: #000a1e;
  display: flex;
  font-weight: normal;
  min-height: 40px;
  padding: 8px 15px 8px 15px;
  text-align: left; }
  .xui-select--button:focus {
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    outline: none;
    transition: box-shadow 0.1s; }
  .xui-select--button:hover {
    border-color: #80858f; }
  .xui-select--button:disabled {
    background-color: rgba(0, 10, 30, 0.1);
    border-color: rgba(0, 10, 30, 0.5);
    color: rgba(0, 10, 30, 0.75);
    cursor: not-allowed;
    -webkit-text-fill-color: rgba(0, 10, 30, 0.75); }
  .xui-select--button *::-webkit-input-placeholder, .xui-select--button::-webkit-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--button *:-ms-input-placeholder, .xui-select--button:-ms-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--button *::-ms-input-placeholder, .xui-select--button::-ms-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--button *::placeholder, .xui-select--button::placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-select--button::-ms-clear, .xui-select--button::-ms-reveal {
    display: none;
    height: 0;
    width: 0; }

.xui-dropdownmenu-select {
  border-radius: 0 0 3px 3px;
  border-top: 0; }

.xui-select-layout .xui-dropdown--body {
  border-top: 0; }
  @media screen and (max-width: 520px) {
    .xui-select-layout .xui-dropdown--body {
      border: 0;
      border-radius: 0; } }

.xui-select-layout .xui-select--button {
  width: 100%; }

/**
 * Styles for form text inputs.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-textinput--input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border-radius: 3px;
  color: inherit;
  font: inherit;
  outline: none;
  border: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; }

.xui-textinput {
  line-height: 1.5;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border: 1px solid #a6a9b0;
  border-radius: 3px;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  min-height: 40px;
  outline: none;
  padding: 8px 15px;
  position: relative;
  width: 100%;
  align-items: center;
  cursor: text;
  display: flex;
  padding: 0; }
  .xui-textinput:focus {
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    outline: none;
    transition: box-shadow 0.1s; }
  .xui-textinput:hover {
    border-color: #80858f; }
  .xui-textinput:disabled {
    background-color: rgba(0, 10, 30, 0.1);
    border-color: rgba(0, 10, 30, 0.5);
    color: rgba(0, 10, 30, 0.75);
    cursor: not-allowed;
    -webkit-text-fill-color: rgba(0, 10, 30, 0.75); }
  .xui-textinput *::-webkit-input-placeholder, .xui-textinput::-webkit-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-textinput *:-ms-input-placeholder, .xui-textinput:-ms-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-textinput *::-ms-input-placeholder, .xui-textinput::-ms-input-placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-textinput *::placeholder, .xui-textinput::placeholder {
    color: rgba(0, 10, 30, 0.65);
    opacity: 1; }
  .xui-textinput::-ms-clear, .xui-textinput::-ms-reveal {
    display: none;
    height: 0;
    width: 0; }

.xui-textinputwrapper {
  display: block; }

/* stylelint-disable no-duplicate-selectors  */
.xui-textinput--input {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 15px;
  padding-right: 15px; }

/* stylelint-enable no-duplicate-selectors  */
.xui-textinput-focus {
  box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
  outline: none;
  transition: box-shadow 0.1s;
  z-index: 2; }

.xui-textinput-is-disabled {
  background-color: rgba(0, 10, 30, 0.1);
  border-color: rgba(0, 10, 30, 0.5);
  color: rgba(0, 10, 30, 0.75);
  cursor: not-allowed;
  -webkit-text-fill-color: rgba(0, 10, 30, 0.75); }
  .xui-textinput-is-disabled .xui-textinput--input {
    cursor: not-allowed; }

.xui-textinput--sideelement {
  align-self: stretch;
  cursor: text;
  display: flex;
  flex-shrink: 0;
  margin: -1px; }

.xui-textinput--sideelement-icon {
  padding: 5px; }

.xui-textinput--sideelement-text {
  padding: 10px 15px;
  pointer-events: none; }

.xui-textinput--sideelement-avatar {
  padding: 8px;
  pointer-events: none; }

.xui-textinput--sideelement-button {
  padding-top: 5px;
  padding-bottom: 5px; }
  .xui-textinput--sideelement-button:first-child {
    padding-left: 5px;
    padding-right: 15px; }
  .xui-textinput--sideelement-button:last-child {
    padding-left: 15px;
    padding-right: 5px; }

.xui-textinput--sideelement-has-background:first-child {
  border-radius: 3px 0 0 3px;
  margin-right: 15px; }

.xui-textinput--sideelement-has-background:last-child {
  border-radius: 0 3px 3px 0;
  margin-left: 15px; }

.xui-textinput--sideelement-twitter {
  background-color: #1dadea;
  color: #fff; }

.xui-textinput--sideelement-facebook {
  background-color: #3c5a96;
  color: #fff; }

.xui-textinput--sideelement-linkedin {
  background-color: #1178b3;
  color: #fff; }

.xui-textinput-borderless {
  border: 0; }
  .xui-textinput-borderless:focus {
    box-shadow: none; }

.xui-textinput-borderless-transparent {
  background-color: transparent; }
  .xui-textinput-borderless-transparent.xui-textinput-focus {
    background-color: rgba(0, 10, 30, 0.05);
    box-shadow: none; }
  .xui-textinput-borderless-transparent.xui-textinput-borderless-inverted.xui-textinput-focus {
    background-color: rgba(255, 255, 255, 0.05); }

.xui-textinput-borderless-solid {
  background-color: rgba(0, 10, 30, 0.05); }
  .xui-textinput-borderless-solid.xui-textinput-focus {
    background-color: rgba(0, 10, 30, 0.1);
    box-shadow: none; }
  .xui-textinput-borderless-solid.xui-textinput-borderless-inverted {
    background-color: rgba(255, 255, 255, 0.1); }
    .xui-textinput-borderless-solid.xui-textinput-borderless-inverted.xui-textinput-focus {
      background-color: rgba(255, 255, 255, 0.2); }

.xui-textinput-borderless-inverted {
  color: #fff; }
  .xui-textinput-borderless-inverted.xui-textinput--input,
  .xui-textinput-borderless-inverted .xui-textinput--input {
    color: #fff; }
    .xui-textinput-borderless-inverted.xui-textinput--input::-webkit-input-placeholder,
    .xui-textinput-borderless-inverted .xui-textinput--input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.65); }
    .xui-textinput-borderless-inverted.xui-textinput--input:-ms-input-placeholder,
    .xui-textinput-borderless-inverted .xui-textinput--input:-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.65); }
    .xui-textinput-borderless-inverted.xui-textinput--input::-ms-input-placeholder,
    .xui-textinput-borderless-inverted .xui-textinput--input::-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.65); }
    .xui-textinput-borderless-inverted.xui-textinput--input::placeholder,
    .xui-textinput-borderless-inverted .xui-textinput--input::placeholder {
      color: rgba(255, 255, 255, 0.65); }

.xui-verticaltextinputgroup > .xui-textinput:first-of-type,
.xui-verticaltextinputgroup .xui-textinputwrapper:first-of-type > .xui-textinput {
  border-radius: 3px 3px 0 0; }
  .xui-verticaltextinputgroup > .xui-textinput:first-of-type > .xui-textinput--sideelement:first-child,
  .xui-verticaltextinputgroup .xui-textinputwrapper:first-of-type > .xui-textinput > .xui-textinput--sideelement:first-child {
    border-radius: 3px 0 0 0; }
  .xui-verticaltextinputgroup > .xui-textinput:first-of-type > .xui-textinput--sideelement:last-child,
  .xui-verticaltextinputgroup .xui-textinputwrapper:first-of-type > .xui-textinput > .xui-textinput--sideelement:last-child {
    border-radius: 0 3px 0 0; }

.xui-verticaltextinputgroup .xui-textinput:nth-of-type(n+2),
.xui-verticaltextinputgroup .xui-textinputwrapper:nth-of-type(n+2) > .xui-textinput {
  margin-top: -1px; }

.xui-verticaltextinputgroup .xui-textinput:nth-of-type(n+2):nth-last-of-type(n+2),
.xui-verticaltextinputgroup .xui-textinputwrapper:nth-of-type(n+2):nth-last-of-type(n+2) > .xui-textinput {
  border-radius: 0; }

.xui-verticaltextinputgroup > .xui-textinput:last-of-type,
.xui-verticaltextinputgroup .xui-textinputwrapper:last-of-type .xui-textinput {
  border-radius: 0 0 3px 3px; }
  .xui-verticaltextinputgroup > .xui-textinput:last-of-type > .xui-textinput--sideelement:first-child,
  .xui-verticaltextinputgroup .xui-textinputwrapper:last-of-type .xui-textinput > .xui-textinput--sideelement:first-child {
    border-radius: 0 0 0 3px; }
  .xui-verticaltextinputgroup > .xui-textinput:last-of-type > .xui-textinput--sideelement:last-child,
  .xui-verticaltextinputgroup .xui-textinputwrapper:last-of-type .xui-textinput > .xui-textinput--sideelement:last-child {
    border-radius: 0 0 3px 0; }

.xui-textinputgroup > .xui-textinputwrapper,
.xui-textinputgroup > .xui-textinputwrapper > .xui-button,
.xui-textinputgroup > .xui-textinput,
.xui-textinputgroup > .xui-button,
.xui-textinputgroup .xui-select--control {
  border-radius: 0; }
  .xui-textinputgroup > .xui-textinputwrapper:nth-child(n+2),
  .xui-textinputgroup > .xui-textinputwrapper > .xui-button:nth-child(n+2),
  .xui-textinputgroup > .xui-textinput:nth-child(n+2),
  .xui-textinputgroup > .xui-button:nth-child(n+2),
  .xui-textinputgroup .xui-select--control:nth-child(n+2) {
    border-left: 0; }

.xui-textinputgroup > .xui-textinputwrapper > .xui-textinput {
  border-radius: 0; }
  .xui-textinputgroup > .xui-textinputwrapper > .xui-textinput .xui-textinput--sideelement {
    border-radius: 0; }

.xui-textinputgroup > .xui-textinputwrapper:nth-child(n+2) > .xui-textinput {
  border-left: 0; }

.xui-textinputgroup .xui-select:nth-child(n+2) .xui-select--control {
  border-left: 0; }

.xui-textinputgroup > .xui-textinput:first-child,
.xui-textinputgroup > .xui-textinput:first-child > .xui-textinput--sideelement:first-child,
.xui-textinputgroup > .xui-textinputwrapper:first-child > .xui-textinput,
.xui-textinputgroup > .xui-textinputwrapper:first-child .xui-textinput--sideelement:first-child,
.xui-textinputgroup > .xui-textinputwrapper:first-child > .xui-button,
.xui-textinputgroup > .xui-button:first-child,
.xui-textinputgroup > .xui-select:first-child > .xui-select--control {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px; }

.xui-textinputgroup > .xui-textinput:last-child,
.xui-textinputgroup > .xui-textinput:last-child > .xui-textinput--sideelement:last-child,
.xui-textinputgroup > .xui-textinputwrapper:last-child > .xui-textinput,
.xui-textinputgroup > .xui-textinputwrapper:last-child > .xui-textinput--sideelement:last-child,
.xui-textinputgroup > .xui-textinputwrapper:last-child > .xui-button,
.xui-textinputgroup > .xui-button:last-child,
.xui-textinputgroup > .xui-select:last-child > .xui-select--control {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px; }

.xui-textinputgroup::after {
  clear: both;
  content: "";
  display: table; }

.xui-textinputgroup .xui-textinput-is-invalid:nth-child(n+2),
.xui-textinputgroup .xui-textinputwrapper:nth-child(n+2) .xui-textinput-is-invalid,
.xui-textinputgroup .xui-select:nth-child(n+2) > .xui-select--control.xui-textinput-is-invalid {
  border-left: 1px solid #dc3246;
  margin-left: -1px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-input-is-invalid, .xui-textinput-is-invalid {
  border-color: #dc3246;
  z-index: 1; }
  .xui-input-is-invalid:focus, .xui-input-is-invalid:hover, .xui-textinput-is-invalid:focus, .xui-textinput-is-invalid:hover {
    border-color: #dc3246; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-loader {
  align-items: center;
  color: rgba(0, 10, 30, 0.65);
  display: flex;
  justify-content: center; }

.xui-button--loader {
  color: inherit; }

.xui-loader-inverted {
  color: rgba(255, 255, 255, 0.65); }

.xui-loader-retain-layout {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.xui-loader-layout {
  min-height: 140px;
  padding: 20px; }

.xui-loader--dot {
  animation: xui-loader-animation 1.3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-fill-mode: both;
  background-color: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 1px currentColor;
  display: inline-block;
  height: 12px;
  transform-style: preserve-3d;
  vertical-align: middle;
  width: 12px; }
  .xui-loader--dot:nth-child(1) {
    animation-delay: -0.32s; }
  .xui-loader--dot:nth-child(2) {
    animation-delay: -0.16s; }
  .xui-loader--dot:nth-child(3) {
    animation-delay: 0s; }
  .xui-loader-small .xui-loader--dot {
    height: 10px;
    width: 10px; }
  .xui-loader .xui-loader--dot {
    margin-right: 2px; }
  .xui-loader-large .xui-loader--dot {
    height: 14px;
    margin-right: 3px;
    width: 14px; }

@keyframes xui-loader-animation {
  0%,
  80%,
  100% {
    transform: scale(0.5) rotate(0deg); }
  40% {
    transform: scale(1) rotate(0.02deg); } }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-isolationheader {
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 10, 30, 0.2), 0 3px 0 0 rgba(0, 10, 30, 0.05);
  color: #000a1e;
  display: flex;
  height: 60px;
  overflow: hidden;
  padding: 0 10px;
  white-space: nowrap; }

.xui-isolationheader-fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 0; }

.xui-isolationheader-inverted {
  background: #404756;
  color: #fff; }

.xui-isolationheader--navigation,
.xui-isolationheader--actions {
  align-items: center;
  align-self: stretch;
  display: flex;
  overflow: hidden;
  white-space: nowrap; }

.xui-isolationheader--navigation {
  padding-right: 10px; }

.xui-isolationheader--actions {
  flex-shrink: 0;
  margin-left: auto; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-pageheading {
  align-items: stretch;
  background-color: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 10, 30, 0.2);
  display: flex;
  flex-wrap: nowrap;
  min-height: 60px;
  overflow: hidden; }

.xui-pageheading--content {
  align-items: stretch;
  display: flex;
  justify-content: space-between;
  min-height: inherit; }

.xui-pageheading--content-layout {
  flex-flow: row wrap;
  width: 100%;
  margin-left: 10px;
  margin-right: 10px; }
  @media (min-width: 960px) {
    .xui-pageheading--content-layout.xui-page-width-standard {
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 1180px) {
    .xui-pageheading--content-layout.xui-page-width-large {
      margin-left: auto;
      margin-right: auto; } }
  .xui-pageheading--content-layout .xui-pageheading--title {
    padding-left: 10px; }
    @media (min-width: 960px) {
      .xui-pageheading--content-layout .xui-pageheading--title.xui-page-width-standard {
        padding-left: 0; } }
    @media (min-width: 1180px) {
      .xui-pageheading--content-layout .xui-pageheading--title.xui-page-width-large {
        padding-left: 0; } }

.xui-pageheading--breadcrumbs,
.xui-breadcrumbs {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  list-style-type: none;
  margin: 0;
  padding: 0; }

.xui-breadcrumb {
  font-size: 1.0625rem;
  font-weight: bold; }

.xui-breadcrumb-arrow {
  align-items: flex-end;
  display: flex; }

.xui-breadcrumb--link {
  background: transparent;
  border-radius: 3px;
  color: #0078c8;
  font-weight: bold;
  line-height: 1rem;
  min-height: 40px;
  padding: 11px 15px;
  transition-duration: 0.1s;
  transition-property: color, background;
  transition-timing-function: ease;
  display: block;
  line-height: inherit;
  min-height: 30px;
  outline: none;
  padding: 6px 10px;
  text-decoration: none; }
  .xui-breadcrumb--link:hover {
    background: rgba(0, 10, 30, 0.05);
    color: #0073c0; }
  .xui-breadcrumb--link:focus {
    background: rgba(0, 10, 30, 0.05);
    color: #0073c0; }
  .xui-breadcrumb--link:active {
    background: rgba(0, 10, 30, 0.1);
    color: #006db7; }
  .xui-breadcrumb:first-of-type .xui-breadcrumb--link {
    margin-right: -10px; }
  .xui-breadcrumb:nth-of-type(n+2) .xui-breadcrumb--link {
    margin-left: -10px;
    margin-right: -10px; }

.xui-breadcrumb--icon {
  color: rgba(0, 10, 30, 0.75);
  margin-top: 3px; }

.xui-pageheading--title {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  font-size: 1.0625rem;
  font-weight: bold;
  margin: 10px 0; }

.xui-pageheading--tabs {
  align-items: stretch;
  display: flex; }
  .xui-pageheading--tabs .xui-picklist-horizontal {
    margin-left: 30px; }

.xui-pageheading--actions {
  align-items: center;
  /* Required for button height not to stretch */
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end; }
  .xui-pageheading--actions > .xui-button {
    margin-left: 10px; }
  .xui-pageheading--actions > .xui-buttongroup {
    margin-left: 10px; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-picklist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative; }
  .xui-picklist + .xui-picklist {
    border-top: 1px solid rgba(0, 10, 30, 0.2); }

.xui-picklist-layout {
  padding: 10px 0; }

.xui-pickitem {
  flex-grow: 1000000;
  outline: none;
  position: relative; }
  .xui-pickitem:hover, .xui-pickitem:active, .xui-pickitem:focus {
    background: transparent; }

.xui-pickitem--body {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
  min-height: 40px;
  outline: none;
  padding-left: 20px;
  padding-right: 0;
  text-align: left;
  text-decoration: none;
  width: 100%; }
  .xui-pickitem--body:hover, .xui-pickitem--body:focus {
    background: rgba(0, 10, 30, 0.05); }
  .xui-pickitem--body:active {
    background: rgba(0, 10, 30, 0.1); }
  .xui-pickitem--body > .xui-submenu-uicontrol--icon {
    align-self: center;
    flex: 0 0 30px; }

.xui-pickitem--text {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  word-wrap: break-word;
  padding-bottom: 10px;
  padding-right: 20px;
  padding-top: 10px;
  width: 100%; }

.xui-pickitem-is-hovered {
  background: rgba(0, 10, 30, 0.05); }
  .xui-pickitem-is-hovered:hover, .xui-pickitem-is-hovered:focus {
    background: rgba(0, 10, 30, 0.05); }
  .xui-pickitem-is-hovered:active {
    background: rgba(0, 10, 30, 0.1); }

.xui-pickitem-is-hovered > .xui-pickitem--body {
  background: transparent; }
  .xui-pickitem-is-hovered > .xui-pickitem--body:focus, .xui-pickitem-is-hovered > .xui-pickitem--body:hover, .xui-pickitem-is-hovered > .xui-pickitem--body:active {
    background: transparent; }

.xui-pickitem-is-selected:not(.xui-pickitem--multiselect):not(.xui-pickitem-multiselect) > .xui-pickitem--body {
  color: #0078c8; }
  .xui-pickitem-is-selected:not(.xui-pickitem--multiselect):not(.xui-pickitem-multiselect) > .xui-pickitem--body::before {
    border-left: 3px solid currentColor;
    bottom: 0;
    content: " ";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
    z-index: 1; }
  .xui-pickitem-is-selected:not(.xui-pickitem--multiselect):not(.xui-pickitem-multiselect) > .xui-pickitem--body:hover, .xui-pickitem-is-selected:not(.xui-pickitem--multiselect):not(.xui-pickitem-multiselect) > .xui-pickitem--body:focus {
    color: #0073c0; }
  .xui-pickitem-is-selected:not(.xui-pickitem--multiselect):not(.xui-pickitem-multiselect) > .xui-pickitem--body:active {
    color: #006db7; }

.xui-picklist--nestedcontainer {
  display: flex;
  flex-wrap: wrap; }
  .xui-picklist--nestedcontainer > .xui-pickitem--split,
  .xui-picklist--nestedcontainer > .xui-pickitem-split {
    border-right: 1px solid rgba(0, 10, 30, 0.1); }

.xui-picklist-horizontal {
  display: inline-flex;
  flex-direction: row;
  max-width: 100%;
  min-height: inherit; }
  .xui-picklist-horizontal .xui-pickitem {
    min-width: 0; }
  .xui-picklist-horizontal .xui-pickitem--text {
    padding: 0; }
  .xui-picklist-horizontal .xui-pickitem--body {
    height: 100%;
    min-height: 40px;
    padding: 10px 15px;
    text-align: center; }
  .xui-picklist-horizontal .xui-pickitem-is-selected:not(.xui-pickitem--multiselect):not(.xui-pickitem-multiselect) .xui-pickitem--body:before {
    border-bottom: 3px solid currentColor;
    /* Remove default left border */
    border-left: none;
    width: 100%; }

.xui-submenu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: none;
  transition: all 0.1s ease; }
  .xui-submenu .xui-pickitem--body {
    padding-left: 40px; }
  .xui-submenu .xui-pickitem--icon + .xui-pickitem--body {
    padding-left: 105px; }
  .xui-submenu .xui-pickitem--body .xui-pickitem--multiselect-checkbox,
  .xui-submenu .xui-pickitem--body .xui-pickitem-multiselect--checkbox {
    padding-left: 20px; }
  .xui-submenu .xui-pickitem--icon {
    left: 45px; }

.xui-submenu-layout {
  flex: 0 0 auto;
  max-height: 0;
  overflow: hidden;
  width: 100%; }

.xui-submenu-uicontrol--label, .xui-submenu-uicontrol {
  display: flex;
  outline: none; }
  .xui-submenu-uicontrol--label:hover, .xui-submenu-uicontrol--label:focus, .xui-submenu-uicontrol:hover, .xui-submenu-uicontrol:focus {
    background: rgba(0, 10, 30, 0.05); }
  .xui-submenu-uicontrol--label:active, .xui-submenu-uicontrol:active {
    background: rgba(0, 10, 30, 0.1); }

.xui-submenu-uicontrol--icon {
  align-self: center;
  color: rgba(0, 10, 30, 0.75);
  margin: 5px;
  transition: all 0.1s ease; }
  .xui-pickitem--text + .xui-submenu-uicontrol--icon {
    margin-left: auto; }

.xui-pickitem--submenucontrol {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  left: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
  flex-grow: 0; }
  .xui-pickitem--submenucontrol:checked + .xui-pickitem--split .xui-submenu-uicontrol--icon,
  .xui-pickitem--submenucontrol:checked + .xui-pickitem-split .xui-submenu-uicontrol--icon {
    transform: rotate(180deg); }
  .xui-pickitem--submenucontrol:checked + .xui-submenu-uicontrol--label .xui-submenu-uicontrol--icon {
    transform: rotate(180deg); }
  .xui-pickitem--submenucontrol:checked ~ .xui-submenu-uicontrol .xui-submenu-uicontrol--icon {
    transform: rotate(180deg); }
  .xui-pickitem--submenucontrol:checked ~ .xui-submenu-layout {
    max-height: 100vh;
    overflow: auto;
    padding: 10px 0; }

.xui-pickitem--split,
.xui-pickitem-split {
  align-items: stretch;
  display: flex;
  flex-flow: row nowrap; }
  .xui-pickitem--split .xui-pickitem,
  .xui-pickitem-split .xui-pickitem {
    border-right: 1px solid rgba(0, 10, 30, 0.1);
    flex: 1 1 auto; }

.xui-submenu-uicontrol {
  display: flex;
  flex: 0 0 auto; }

.xui-pickitem--uicontrol {
  align-items: center;
  display: flex;
  padding: 3px; }
  .xui-pickitem--uicontrol:hover, .xui-pickitem--uicontrol:focus {
    background: rgba(0, 10, 30, 0.05); }
  .xui-pickitem--uicontrol:active {
    background: rgba(0, 10, 30, 0.1); }

.xui-pickitem--input {
  align-self: flex-start;
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 20px;
  margin-top: 10px; }

.xui-pickitem--multiselect-label,
.xui-pickitem-multiselect--label {
  width: 100%; }

.xui-pickitem--multiselect-checkbox,
.xui-pickitem-multiselect--checkbox {
  min-width: 0; }

.xui-pickitem--multiselect .xui-styledcheckboxradio--label,
.xui-pickitem-multiselect .xui-styledcheckboxradio--label {
  min-width: 0;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 20px;
  padding-top: 10px;
  width: 100%; }

.xui-pickitem--icon {
  margin: 0 15px;
  pointer-events: none;
  position: absolute;
  top: 5px; }

.xui-pickitem--icon ~ .xui-pickitem--body {
  padding-left: 60px; }

.xui-dropdown--footer--picklist .xui-pickitem--body {
  color: #0078c8; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-mask {
  align-items: center;
  background-color: rgba(0, 10, 30, 0.7);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  padding: 15px;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  visibility: hidden;
  z-index: 10; }

.xui-mask-is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible; }

.xui-unmask {
  background-color: rgba(0, 10, 30, 0); }

.xui-modal {
  align-self: flex-start;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 8px 16px 0 rgba(0, 10, 30, 0.2);
  margin-bottom: 15px;
  outline: none;
  position: relative; }

.xui-modal-layout {
  max-width: calc(100vw - 2.5rem);
  width: 380px; }
  .xui-modal-layout .xui-modal--header {
    align-content: stretch;
    align-items: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    padding: 10px 20px; }
  .xui-modal-layout .xui-modal--close {
    align-self: flex-start;
    margin-left: auto;
    margin-right: -10px; }
  .xui-modal-layout .xui-modal--heading ~ .xui-modal--close {
    margin-left: 20px; }
  .xui-modal-layout .xui-modal--body {
    padding: 10px 20px; }
  .xui-modal-layout .xui-modal--footer {
    padding: 20px; }

.xui-modal--body-layout {
  background: linear-gradient(#fff, #fff) 100% 0/100% 3px local no-repeat, linear-gradient(#fff, #fff) 0 100%/100% 3px local no-repeat, linear-gradient(rgba(0, 10, 30, 0.2), rgba(0, 10, 30, 0.2)) 100% 0/100% 1px scroll no-repeat, linear-gradient(rgba(0, 10, 30, 0.2), rgba(0, 10, 30, 0.2)) 0 100%/100% 1px scroll no-repeat, linear-gradient(rgba(0, 10, 30, 0.1), rgba(0, 10, 30, 0.1)) 100% 0/100% 3px scroll no-repeat, linear-gradient(rgba(0, 10, 30, 0.1), rgba(0, 10, 30, 0.1)) 0 100%/100% 3px scroll no-repeat, #fff;
  max-height: 45vh;
  overflow-y: scroll; }

.xui-modal-width-small {
  width: 300px; }

.xui-modal-width-default {
  width: 380px; }

.xui-modal-width-medium {
  width: 460px; }

.xui-modal-width-large {
  width: 620px; }

.xui-modal-width-xlarge {
  width: 860px; }

.xui-modal-fullscreen {
  border-radius: 0;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  left: 0;
  max-height: 100%;
  max-width: 100vw;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100vw; }

.xui-modal--heading {
  font-size: 0.9375rem;
  font-weight: bold; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-transition-scaleup {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition-duration: 0.1s;
  transition-property: transform, opacity;
  transition-timing-function: ease-in; }

.xui-transition-scaledown {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition-duration: 0.1s;
  transition-property: transform, opacity;
  transition-timing-function: ease-out; }

.xui-transition-fadein {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0.1s;
  transition-property: opacity;
  transition-timing-function: ease-in; }

.xui-transition-fadeout {
  opacity: 0;
  pointer-events: none;
  transition-duration: 0.1s;
  transition-property: opacity;
  transition-timing-function: ease-out; }

.xui-transition-grow {
  max-height: 100vh;
  opacity: 1;
  overflow: hidden;
  pointer-events: auto;
  transition-duration: 0.1s;
  transition-property: max-height, opacity;
  transition-timing-function: ease-in; }

.xui-transition-shrink {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition-duration: 0.1s;
  transition-property: max-height, opacity;
  transition-timing-function: ease-out; }

.xui-transition {
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: ease; }

.xui-transition-speed-fast {
  transition-duration: 0.1s; }

.xui-transition-speed-medium {
  transition-duration: 0.3s; }

.xui-transition-speed-slow {
  transition-duration: 0.5s; }

.xui-transition-curve-standard {
  transition-timing-function: ease; }

.xui-transition-curve-enter {
  transition-timing-function: ease-in; }

.xui-transition-curve-exit {
  transition-timing-function: ease-out; }

.xui-transition-delay-short {
  transition-delay: 0.1s; }

.xui-transition-delay-medium {
  transition-delay: 0.3s; }

.xui-transition-delay-long {
  transition-delay: 0.5s; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-pill {
  align-items: center;
  background-color: rgba(0, 10, 30, 0.1);
  border-radius: 20px;
  cursor: default;
  display: inline-flex; }

.xui-pill-layout {
  height: 30px;
  max-width: 100%;
  padding-right: 10px;
  position: relative; }

.xui-pill-maxwidth {
  max-width: 200px; }

.xui-pill-interactive:hover {
  background-color: rgba(0, 10, 30, 0.2); }

.xui-pill-interactive:active {
  background-color: rgba(0, 10, 30, 0.35); }

.xui-pill-interactive:focus {
  box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
  outline: none; }

.xui-pill-is-invalid.xui-pill-interactive:hover {
  background-color: #c62e42; }

.xui-pill-is-invalid.xui-pill-interactive:active {
  background-color: #b02a3e; }

.xui-pill-is-invalid.xui-pill-interactive:focus {
  background-color: #c62e42;
  box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2); }

.xui-pill--content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  display: flex;
  min-height: 30px;
  padding: 5px 5px 5px 15px; }

.xui-pill--text,
.xui-pill--secondary {
  align-self: center;
  line-height: 1.3077;
  vertical-align: middle; }

.xui-pill--secondary {
  color: #000a1e;
  font-weight: bold;
  margin-right: 5px; }

.xui-pill--avatar {
  margin-left: -12px;
  margin-right: 5px;
  pointer-events: none; }

.xui-pill--link {
  outline: none; }
  .xui-pill--link .xui-pill--text {
    color: #000a1e; }

.xui-pill--button-icon {
  bottom: 0;
  position: absolute;
  right: 0; }

.xui-pill-is-focused {
  background-color: rgba(0, 10, 30, 0.2); }

.xui-pill-is-deleteable {
  padding-right: 30px; }

.xui-pill-is-invalid {
  background-color: #dc3246;
  color: #fff; }
  .xui-pill-is-invalid.xui-pill-is-focused {
    background-color: #c62e42; }
  .xui-pill-is-invalid .xui-pill--button-icon,
  .xui-pill-is-invalid .xui-pill--content {
    color: #fff; }
  .xui-pill-is-invalid .xui-pill--text {
    color: #fff; }
  .xui-pill-is-invalid .xui-pill--secondary {
    color: #fff;
    font-weight: bold; }

.xui-pill--button {
  border-radius: 20px;
  color: #000a1e;
  text-align: left; }
  .xui-pill--button:hover, .xui-pill--button:active, .xui-pill--button:focus {
    color: #000a1e; }
  .xui-pill--button .xui-pill--text {
    text-decoration: underline; }

.xui-pill-single {
  align-items: center;
  background-color: #fff;
  bottom: 0;
  display: flex;
  left: 5px;
  position: absolute;
  right: 5px;
  top: 0; }
  .xui-pill-single.xui-pill-is-invalid .xui-pill--text {
    color: #dc3246; }
  .xui-pill-single.xui-pill-is-invalid .xui-pill--secondary {
    color: rgba(0, 10, 30, 0.75); }
  .xui-pill-single.xui-pill-is-invalid.xui-pill-is-focused {
    background: #fff; }

.xui-pill--erroricon {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  height: 20px;
  justify-content: center;
  margin-left: -10px;
  margin-right: 5px;
  width: 20px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-progress {
  outline: 0;
  position: relative; }
  .xui-progress:not(.xui-progress-overflow) .xui-progress-linear-track {
    background: rgba(0, 10, 30, 0.1); }
  .xui-progress:not(.xui-progress-overflow) .xui-progress-circular-track {
    stroke: rgba(0, 10, 30, 0.1); }
  .xui-progress.xui-progress-complete .xui-progress-icon,
  .xui-progress:not(.xui-progress-error-soft) .xui-progress-linear-current {
    background: #0078c8; }
  .xui-progress:not(.xui-progress-error-soft) .xui-progress-circular-current {
    stroke: #0078c8; }

.xui-progress-circular {
  height: auto;
  width: 20px; }

.xui-progress-circular.xui-progress-grow {
  min-width: 20px;
  width: 100%; }

.xui-progress-circular-scaler {
  display: block;
  height: auto;
  width: 100%; }

.xui-progress-circular-wrapper {
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
  width: 100%; }

.xui-progress-circular-track,
.xui-progress-circular-current {
  fill: none; }

.xui-progress-overflow .xui-progress-circular-track,
.xui-progress-error-soft .xui-progress-circular-current {
  stroke: #dc3246; }

.xui-progress-circular-current {
  transition-duration: 0.3s;
  transition-property: background, stroke-dashoffset; }

.xui-progress-circular-mask {
  fill: black;
  stroke: white; }

.xui-progress-circular-content {
  border-radius: 50%;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0; }

.xui-progress-linear {
  width: 100%; }

.xui-progress-linear-wrapper,
.xui-progress-linear-track,
.xui-progress-linear-current {
  border-radius: 9999px;
  width: 100%; }

.xui-progress-linear-wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
  overflow: hidden; }

.xui-progress-linear-track,
.xui-progress-linear-current {
  height: 4px; }

.xui-progress-linear.xui-progress-grow,
.xui-progress-linear.xui-progress-grow [class*="progress"] {
  height: 100%; }

.xui-progress-overflow .xui-progress-linear-track,
.xui-progress-error-soft .xui-progress-linear-current,
.xui-progress-error-hard .xui-progress-linear-current {
  background: #dc3246; }

.xui-progress-linear-current {
  will-change: width;
  transition-duration: 0.3s;
  transition-property: background, width; }

.xui-progress-linear-segment {
  margin: 0 4px; }
  .xui-progress-linear-segment:first-child {
    margin-left: 0; }
  .xui-progress-linear-segment:last-child {
    margin-right: 0; }

.xui-progress-linear-dot {
  position: relative;
  width: 0; }

.xui-progress-linear-dot .xui-progress-linear-current,
.xui-progress-linear-dot .xui-progress-linear-track {
  height: 100%;
  position: absolute;
  top: 0; }

.xui-progress-linear .xui-progress-icon {
  display: none; }

.xui-progress-roundcap {
  stroke-linecap: round; }

.xui-progress-hitbox {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

.xui-progress .xui-progress--tooltip {
  display: block;
  height: 100%;
  line-height: 1;
  width: 100%; }

.xui-progress-complete .xui-progress-icon,
.xui-progress-error-hard .xui-progress-icon {
  opacity: 1;
  transform: scale(1); }

.xui-progress-error-hard .xui-progress-icon {
  background: #dc3246; }

.xui-progress-icon {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transform: scale(0.5);
  transition-duration: 0.3s;
  transition-property: opacity, transform;
  width: 100%; }

.xui-progress-icon-complete,
.xui-progress-icon-error {
  display: block;
  fill: currentColor; }

.xui-progress-icon-complete {
  height: 8px;
  width: 10px; }

.xui-progress-grow .xui-progress-icon-complete {
  height: auto;
  width: 50%; }

.xui-progress-icon-error {
  height: 7px;
  width: 2px; }

.xui-progress-grow .xui-progress-icon-error {
  height: 30%;
  width: auto; }

[data-xui-progress-total-color="orange"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #fa8200; }

[data-xui-progress-total-color="orange"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #fa8200; }

[data-xui-progress-current-color="orange"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="orange"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #fa8200; }

[data-xui-progress-current-color="orange"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #fa8200; }

[data-xui-progress-total-color="yellow"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #faaa00; }

[data-xui-progress-total-color="yellow"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #faaa00; }

[data-xui-progress-current-color="yellow"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="yellow"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #faaa00; }

[data-xui-progress-current-color="yellow"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #faaa00; }

[data-xui-progress-total-color="green"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #00823c; }

[data-xui-progress-total-color="green"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #00823c; }

[data-xui-progress-current-color="green"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="green"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #00823c; }

[data-xui-progress-current-color="green"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #00823c; }

[data-xui-progress-total-color="mint"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #50dcaa; }

[data-xui-progress-total-color="mint"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #50dcaa; }

[data-xui-progress-current-color="mint"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="mint"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #50dcaa; }

[data-xui-progress-current-color="mint"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #50dcaa; }

[data-xui-progress-total-color="turquoise"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #3cdcfa; }

[data-xui-progress-total-color="turquoise"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #3cdcfa; }

[data-xui-progress-current-color="turquoise"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="turquoise"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #3cdcfa; }

[data-xui-progress-current-color="turquoise"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #3cdcfa; }

[data-xui-progress-total-color="blue"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #0078c8; }

[data-xui-progress-total-color="blue"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #0078c8; }

[data-xui-progress-current-color="blue"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="blue"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #0078c8; }

[data-xui-progress-current-color="blue"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #0078c8; }

[data-xui-progress-total-color="violet"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #5a5ae6; }

[data-xui-progress-total-color="violet"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #5a5ae6; }

[data-xui-progress-current-color="violet"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="violet"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #5a5ae6; }

[data-xui-progress-current-color="violet"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #5a5ae6; }

[data-xui-progress-total-color="grape"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #b446c8; }

[data-xui-progress-total-color="grape"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #b446c8; }

[data-xui-progress-current-color="grape"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="grape"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #b446c8; }

[data-xui-progress-current-color="grape"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #b446c8; }

[data-xui-progress-total-color="pink"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #ff6496; }

[data-xui-progress-total-color="pink"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #ff6496; }

[data-xui-progress-current-color="pink"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="pink"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #ff6496; }

[data-xui-progress-current-color="pink"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #ff6496; }

[data-xui-progress-total-color="grey"]:not(.xui-progress-overflow) .xui-progress-linear-track {
  background: #000a1e; }

[data-xui-progress-total-color="grey"]:not(.xui-progress-overflow) .xui-progress-circular-track {
  stroke: #000a1e; }

[data-xui-progress-current-color="grey"].xui-progress-complete .xui-progress-icon,
[data-xui-progress-current-color="grey"]:not(.xui-progress-error-soft) .xui-progress-linear-current {
  background: #000a1e; }

[data-xui-progress-current-color="grey"]:not(.xui-progress-error-soft) .xui-progress-circular-current {
  stroke: #000a1e; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-stepper-wrapper {
  display: flex;
  flex-direction: column; }

.xui-stepper-inline {
  display: flex;
  flex-flow: row wrap;
  justify-content: center; }

@supports (display: grid) {
  .xui-stepper-sidebar {
    display: grid;
    grid-template-columns: auto 1fr; } }

.xui-stepper-tests {
  height: 0;
  overflow: hidden;
  visibility: hidden; }

.xui-stepper-tab {
  position: relative; }
  .xui-stepper-tab:before, .xui-stepper-tab:after {
    background: #ccced2;
    content: '';
    display: block;
    height: calc(50% - 20px);
    left: 30px;
    position: absolute;
    top: 0;
    width: 1px; }
  .xui-stepper-tab:after {
    bottom: 0;
    top: initial; }

.xui-stepper-tab-first {
  padding-top: 0; }

.xui-stepper-tab-last {
  padding-bottom: 0; }

@supports (display: grid) {
  .xui-stepper-sidebar .xui-stepper-tab {
    order: 0 !important; } }

.xui-stepper-inline .xui-stepper-tab {
  order: 0 !important;
  padding: 0 30px; }
  .xui-stepper-inline .xui-stepper-tab:before, .xui-stepper-inline .xui-stepper-tab:after {
    height: 1px;
    left: 0;
    top: 50%;
    width: 30px; }
  .xui-stepper-inline .xui-stepper-tab:after {
    left: inherit;
    right: 0; }

.xui-stepper-inline .xui-stepper-tab-first {
  padding-left: 0; }

.xui-stepper-inline .xui-stepper-tab-last {
  padding-right: 0; }

.xui-stepper-tab-first:before,
.xui-stepper-tab-last:after {
  display: none; }

.xui-stepper-section {
  order: 0;
  padding-left: 60px;
  position: relative;
  width: 100%; }
  .xui-stepper-section:before {
    background: #ccced2;
    bottom: 0;
    content: '';
    display: block;
    left: 30px;
    position: absolute;
    top: 0;
    width: 1px; }

@supports (display: grid) {
  .xui-stepper-sidebar .xui-stepper-section {
    grid-column-end: -1;
    grid-column-start: 2;
    grid-row-end: -1;
    grid-row-start: 1;
    padding: 0 0 0 30px; }
    .xui-stepper-sidebar .xui-stepper-section:before {
      display: none; } }

.xui-stepper-inline .xui-stepper-section {
  padding: 30px 0 0; }
  .xui-stepper-inline .xui-stepper-section:before {
    display: none; }

.xui-stepper-link {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  text-decoration: none;
  color: #000a1e;
  align-items: center;
  display: block;
  height: 100%;
  padding: 10px;
  width: 100%; }
  .xui-stepper-link .xui-stepper-link-icon:before {
    background: #000a1e; }
  .xui-stepper-link .xui-stepper-link-progress .xui-progress-circular-current {
    stroke: #000a1e; }
  .xui-stepper-link.xui-stepper-link-active:hover, .xui-stepper-link.xui-stepper-link-standard:hover {
    color: #003c64;
    background: rgba(0, 10, 30, 0.05); }
    .xui-stepper-link.xui-stepper-link-active:hover .xui-stepper-link-icon:before, .xui-stepper-link.xui-stepper-link-standard:hover .xui-stepper-link-icon:before {
      background: #003c64; }
    .xui-stepper-link.xui-stepper-link-active:hover .xui-stepper-link-progress .xui-progress-circular-current, .xui-stepper-link.xui-stepper-link-standard:hover .xui-stepper-link-progress .xui-progress-circular-current {
      stroke: #003c64; }
  .xui-stepper-link.xui-stepper-link-active:focus, .xui-stepper-link.xui-stepper-link-standard:focus {
    color: #002a46;
    background: rgba(0, 10, 30, 0.1); }
    .xui-stepper-link.xui-stepper-link-active:focus .xui-stepper-link-icon:before, .xui-stepper-link.xui-stepper-link-standard:focus .xui-stepper-link-icon:before {
      background: #002a46; }
    .xui-stepper-link.xui-stepper-link-active:focus .xui-stepper-link-progress .xui-progress-circular-current, .xui-stepper-link.xui-stepper-link-standard:focus .xui-stepper-link-progress .xui-progress-circular-current {
      stroke: #002a46; }
  .xui-stepper-link.xui-stepper-link-standard:active {
    color: #002a46;
    background: rgba(0, 10, 30, 0.2); }
    .xui-stepper-link.xui-stepper-link-standard:active .xui-stepper-link-icon:before {
      background: #002a46; }
    .xui-stepper-link.xui-stepper-link-standard:active .xui-stepper-link-progress .xui-progress-circular-current {
      stroke: #002a46; }
  .xui-stepper-link.xui-stepper-link-error:hover {
    color: #6e1923;
    background: rgba(0, 10, 30, 0.05); }
    .xui-stepper-link.xui-stepper-link-error:hover .xui-stepper-link-icon:before {
      background: #6e1923; }
    .xui-stepper-link.xui-stepper-link-error:hover .xui-stepper-link-progress .xui-progress-circular-current {
      stroke: #6e1923; }
  .xui-stepper-link.xui-stepper-link-error:focus {
    color: #6e1923;
    background: rgba(0, 10, 30, 0.1); }
    .xui-stepper-link.xui-stepper-link-error:focus .xui-stepper-link-icon:before {
      background: #6e1923; }
    .xui-stepper-link.xui-stepper-link-error:focus .xui-stepper-link-progress .xui-progress-circular-current {
      stroke: #6e1923; }
  .xui-stepper-link.xui-stepper-link-error:active {
    color: #4d1219;
    background: rgba(0, 10, 30, 0.2); }
    .xui-stepper-link.xui-stepper-link-error:active .xui-stepper-link-icon:before {
      background: #4d1219; }
    .xui-stepper-link.xui-stepper-link-error:active .xui-stepper-link-progress .xui-progress-circular-current {
      stroke: #4d1219; }
  .xui-stepper-link.xui-stepper-link-disabled:hover, .xui-stepper-link.xui-stepper-link-disabled:focus {
    color: #80858f;
    background: transparent; }
    .xui-stepper-link.xui-stepper-link-disabled:hover .xui-stepper-link-icon:before, .xui-stepper-link.xui-stepper-link-disabled:focus .xui-stepper-link-icon:before {
      background: #80858f; }
    .xui-stepper-link.xui-stepper-link-disabled:hover .xui-stepper-link-progress .xui-progress-circular-current, .xui-stepper-link.xui-stepper-link-disabled:focus .xui-stepper-link-progress .xui-progress-circular-current {
      stroke: #80858f; }

.xui-stepper-link,
.xui-stepper-link-icon,
.xui-stepper-link-icon:before,
.xui-stepper-link-progress {
  transition-duration: 0.1s;
  transition-property: background, color; }

.xui-stepper-inline .xui-stepper-link {
  border-radius: 9999px;
  padding: 0; }

.xui-stepper-link-wrapper {
  align-items: center;
  display: flex;
  padding-right: 15px;
  text-align: left; }

.xui-stepper-stacked-links {
  align-items: start; }
  .xui-stepper-stacked-links .xui-stepper-tab:before,
  .xui-stepper-stacked-links .xui-stepper-tab:after {
    top: 16px;
    width: calc(50% - 20px); }
  .xui-stepper-stacked-links .xui-stepper-tab-first:after,
  .xui-stepper-stacked-links .xui-stepper-tab-last:before {
    width: calc(50% - 5px); }
  .xui-stepper-stacked-links .xui-stepper-link {
    background: transparent;
    border-radius: 0;
    margin-top: -3px; }
    .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-active:hover, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:hover, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:hover {
      background: transparent; }
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-active:hover .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-active:hover .xui-stepper-link-progress, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:hover .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:hover .xui-stepper-link-progress, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:hover .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:hover .xui-stepper-link-progress {
        background: rgba(0, 10, 30, 0.05); }
    .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-active:focus, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:focus, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:focus {
      background: transparent; }
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-active:focus .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-active:focus .xui-stepper-link-progress, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:focus .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:focus .xui-stepper-link-progress, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:focus .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:focus .xui-stepper-link-progress {
        background: rgba(0, 10, 30, 0.1); }
    .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:active, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:active {
      background: transparent; }
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:active .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-standard:active .xui-stepper-link-progress, .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:active .xui-stepper-link-icon,
      .xui-stepper-stacked-links .xui-stepper-link.xui-stepper-link-error:active .xui-stepper-link-progress {
        background: rgba(0, 10, 30, 0.2); }
  .xui-stepper-stacked-links .xui-stepper-link-disabled:focus .xui-stepper-link-icon,
  .xui-stepper-stacked-links .xui-stepper-link-disabled:focus .xui-stepper-link-progress {
    background: transparent; }
  .xui-stepper-stacked-links .xui-stepper-link-wrapper {
    display: block;
    padding: 0 10px;
    text-align: center; }
  .xui-stepper-stacked-links .xui-stepper-link-icon,
  .xui-stepper-stacked-links .xui-stepper-link-progress {
    border-radius: 50%; }
  .xui-stepper-stacked-links .xui-stepper-link-active .xui-stepper-link-icon,
  .xui-stepper-stacked-links .xui-stepper-link-active .xui-stepper-link-progress {
    background: transparent; }

.xui-stepper-link-icon,
.xui-stepper-link-progress {
  display: inline-block;
  flex-shrink: 0;
  height: 40px;
  position: relative;
  width: 40px; }
  .xui-stepper-link-icon:before,
  .xui-stepper-link-progress:before {
    border-radius: 50%;
    bottom: 10px;
    content: '';
    display: block;
    left: 10px;
    position: absolute;
    right: 10px;
    top: 10px; }

.xui-stepper-icon-complete,
.xui-stepper-link-step {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); }

.xui-stepper-link-step {
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  margin-top: -1px; }

.xui-stepper-icon-complete,
.xui-stepper-icon-error {
  fill: #fff; }

.xui-stepper-icon-complete {
  height: 8px;
  width: 10px; }

.xui-stepper-icon-error {
  height: 7px;
  left: calc(50% - 1px);
  position: absolute;
  top: calc(50% - 3px);
  transform: initial;
  width: 2px; }

.xui-stepper-link-progress {
  padding: 10px; }

.xui-stepper-link-heading,
.xui-stepper-link-description {
  color: inherit;
  display: block; }

.xui-stepper-link-description {
  font-size: 0.6875rem; }

.xui-stepper-link-error {
  color: #dc3246; }
  .xui-stepper-link-error .xui-stepper-link-icon:before {
    background: #dc3246; }
  .xui-stepper-link-error .xui-stepper-link-progress .xui-progress-circular-current {
    stroke: #dc3246; }

.xui-stepper-link-active {
  color: #0078c8;
  background: transparent; }
  .xui-stepper-link-active .xui-stepper-link-icon:before {
    background: #0078c8; }
  .xui-stepper-link-active .xui-stepper-link-progress .xui-progress-circular-current {
    stroke: #0078c8; }

.xui-stepper-link-disabled {
  color: #80858f;
  cursor: not-allowed; }
  .xui-stepper-link-disabled .xui-stepper-link-icon:before {
    background: #80858f; }
  .xui-stepper-link-disabled .xui-stepper-link-progress .xui-progress-circular-current {
    stroke: #80858f; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-banner {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
  color: #000a1e;
  opacity: 1;
  position: relative;
  transition: opacity 0.1s ease; }

.xui-banner-positive:before {
  border-radius: 3px 0 0 3px;
  background-color: #00823c;
  bottom: -1px;
  content: "";
  left: -1px;
  position: absolute;
  top: -1px;
  width: 4px; }

.xui-banner-negative:before {
  border-radius: 3px 0 0 3px;
  background-color: #dc3246;
  bottom: -1px;
  content: "";
  left: -1px;
  position: absolute;
  top: -1px;
  width: 4px; }

.xui-banner-layout {
  padding: 10px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  width: 100%; }
  @media screen and (max-width: 520px) {
    .xui-banner-layout {
      border-left: 0;
      border-right: 0;
      border-top: 0;
      margin-top: 0;
      width: 100%; }
      .xui-banner-layout::before {
        border-radius: 0; } }
  .xui-banner-layout .xui-banner--message {
    margin: 5px 10px 7px 5px; }
  .xui-banner-layout .xui-banner--messagedetail {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px; }
  .xui-banner-layout .xui-banner--actions {
    margin: 0; }
  .xui-banner-layout .xui-banner--link {
    display: inline-block;
    padding: 5px 10px; }
    .xui-banner-layout .xui-banner--link:hover {
      color: #002a46; }
    .xui-banner-layout .xui-banner--link:focus {
      background-color: rgba(0, 10, 30, 0.1);
      border-radius: 3px; }
    .xui-banner-layout .xui-banner--link:active {
      background-color: rgba(0, 10, 30, 0.2);
      border-radius: 3px; }
  .xui-banner-layout .xui-banner--close ~ .xui-banner--message {
    max-width: calc(100% - 50px); }
  .xui-banner-layout .xui-banner--close ~ .xui-banner--messagedetail {
    max-width: calc(100% - 50px); }

.xui-banner--message,
.xui-banner--actions {
  display: inline-block; }

.xui-banner--messagedetail {
  color: rgba(0, 10, 30, 0.75); }

.xui-banner--actions,
.xui-banner--close {
  float: right; }

.xui-banner--action {
  display: inline-block;
  font-weight: bold; }

@keyframes xui-banner-animation {
  0% {
    margin-top: -20px;
    opacity: 0; }
  100% {
    margin-top: 0;
    opacity: 1; } }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-toast {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
  color: #000a1e;
  display: inline-block;
  max-width: 400px;
  opacity: 1;
  position: relative;
  transition: opacity 0.1s ease;
  z-index: 10; }
  .xui-toast::after {
    clear: both;
    content: "";
    display: table; }
  @media screen and (max-width: 520px) {
    .xui-toast {
      border-radius: 0; } }

@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .xui-toast {
    width: 400px; } }

.xui-toast-positive:before {
  border-radius: 3px 0 0 3px;
  background-color: #00823c;
  bottom: -1px;
  content: "";
  left: -1px;
  position: absolute;
  top: -1px;
  width: 4px; }

.xui-toast-negative:before {
  border-radius: 3px 0 0 3px;
  background-color: #dc3246;
  bottom: -1px;
  content: "";
  left: -1px;
  position: absolute;
  top: -1px;
  width: 4px; }

.xui-toast-layout {
  margin: 0 20px 20px 20px;
  padding: 10px 10px 10px 5px; }
  @media screen and (max-width: 520px) {
    .xui-toast-layout {
      margin: 0;
      max-width: none;
      width: 100%; }
      .xui-toast-layout::before {
        border-radius: 0; } }
  .xui-toast-layout .xui-toast--message {
    float: initial;
    margin: 0;
    padding: 6px 10px 7px; }
  .xui-toast-layout .xui-toast--actions {
    line-height: initial;
    margin: 0;
    padding: 0; }
  .xui-toast-layout .xui-toast--message,
  .xui-toast-layout .xui-toast--action {
    line-height: 1.3077; }
  .xui-toast-layout .xui-toast--close ~ .xui-toast--message {
    max-width: calc(400px - 50px); }

.xui-toastwrapper {
  bottom: 0;
  display: flex;
  flex-flow: column nowrap;
  left: 0;
  position: fixed;
  z-index: 8000; }
  @media screen and (max-width: 520px) {
    .xui-toastwrapper {
      width: 100%; } }

.xui-toast--message,
.xui-toast--actions,
.xui-toast--action {
  display: inline-block; }

.xui-toast--message {
  float: left; }

.xui-toast--close,
.xui-toast--actions {
  float: right; }

.xui-toast-is-hidden {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-tooltip {
  cursor: pointer;
  display: inline-block;
  overflow: hidden; }
  .xui-tooltip.xui-tooltip-tipopen, .xui-tooltip.xui-tooltip-tipanimating, .xui-tooltip.xui-has-focused-trigger {
    overflow: visible; }
  .xui-tooltip.xui-has-inline-trigger {
    vertical-align: bottom; }
    .xui-tooltip.xui-has-inline-trigger > *:first-child {
      display: block; }

.xui-positioningInline {
  align-content: center;
  display: flex;
  height: 0;
  justify-content: center;
  position: relative;
  width: 100%; }

.xui-tooltip--tip {
  background-color: #000a1e;
  border-radius: 3px;
  bottom: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
  color: #fff;
  cursor: auto;
  display: block;
  line-height: 1.5;
  opacity: 0;
  overflow-wrap: break-word;
  padding: 5px 10px;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  transition: opacity 0.1s linear;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  width: intrinsic;
  z-index: 3; }
  .xui-tooltip--tip > * {
    box-sizing: border-box; }
  .xui-tooltip--tip.xui-tooltip--tip-open {
    opacity: 1;
    pointer-events: auto; }
  .xui-tooltip--tip.xui-tooltip--tip-animating {
    pointer-events: auto; }
  .xui-tooltip--tip:after {
    background: #000a1e;
    box-shadow: 1px 1px 0 0 rgba(0, 10, 30, 0.2);
    content: '';
    height: 10px;
    position: absolute;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin: center;
    width: 10px;
    z-index: -1; }

.xui-positioningInline--content-topleft,
.xui-positioningInline--content-topcenter,
.xui-positioningInline--content-topright {
  bottom: 100%; }
  .xui-positioningInline--content-topleft:after,
  .xui-positioningInline--content-topcenter:after,
  .xui-positioningInline--content-topright:after {
    bottom: -10px; }

.xui-positioningInline--content-bottomleft,
.xui-positioningInline--content-bottomcenter,
.xui-positioningInline--content-bottomright {
  bottom: auto;
  top: 100%; }
  .xui-positioningInline--content-bottomleft:after,
  .xui-positioningInline--content-bottomcenter:after,
  .xui-positioningInline--content-bottomright:after {
    box-shadow: -1px -1px 0 0 rgba(0, 10, 30, 0.2);
    top: 0px; }

.xui-positioningInline--content-topleft,
.xui-positioningInline--content-bottomleft {
  left: 0;
  right: auto; }
  .xui-positioningInline--content-topleft:after,
  .xui-positioningInline--content-bottomleft:after {
    left: 15px; }

.xui-positioningInline--content-topcenter,
.xui-positioningInline--content-bottomcenter {
  left: 50%;
  right: auto;
  transform: translateX(-50%); }
  .xui-positioningInline--content-topcenter:after,
  .xui-positioningInline--content-bottomcenter:after {
    left: 50%; }

.xui-positioningInline--content-topright,
.xui-positioningInline--content-bottomright {
  right: 0px; }
  .xui-positioningInline--content-topright:after,
  .xui-positioningInline--content-bottomright:after {
    right: 5px; }

.xui-positioningInline--content-righttop,
.xui-positioningInline--content-rightcenter,
.xui-positioningInline--content-rightbottom {
  left: calc(100% + 10px);
  right: auto; }
  .xui-positioningInline--content-righttop:after,
  .xui-positioningInline--content-rightcenter:after,
  .xui-positioningInline--content-rightbottom:after {
    box-shadow: -1px 1px 0 0 rgba(0, 10, 30, 0.2);
    left: 0px; }

.xui-positioningInline--content-lefttop,
.xui-positioningInline--content-leftcenter,
.xui-positioningInline--content-leftbottom {
  right: calc(100% + 10px); }
  .xui-positioningInline--content-lefttop:after,
  .xui-positioningInline--content-leftcenter:after,
  .xui-positioningInline--content-leftbottom:after {
    box-shadow: 1px -1px 0 0 rgba(0, 10, 30, 0.2);
    right: -10px; }

.xui-positioningInline--content-righttop,
.xui-positioningInline--content-lefttop {
  bottom: auto;
  top: 0; }
  .xui-positioningInline--content-righttop:after,
  .xui-positioningInline--content-lefttop:after {
    top: 15px; }

.xui-positioningInline--content-rightcenter,
.xui-positioningInline--content-leftcenter {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%); }
  .xui-positioningInline--content-rightcenter:after,
  .xui-positioningInline--content-leftcenter:after {
    top: 50%; }

.xui-positioningInline--content-rightbottom,
.xui-positioningInline--content-leftbottom {
  bottom: -100%; }
  .xui-positioningInline--content-rightbottom:after,
  .xui-positioningInline--content-leftbottom:after {
    bottom: 5px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-overview {
  background-color: rgba(0, 10, 30, 0.05);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
  display: flex;
  width: 100%; }

.xui-overview--section {
  display: flex;
  flex: 1 0 auto;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center; }

.xui-overview--label {
  color: rgba(0, 10, 30, 0.75); }

.xui-overview--value {
  font-size: 1.3125rem;
  font-weight: 700; }

.xui-overview--section:nth-child(n+2) {
  box-shadow: -1px 0 0 0 rgba(0, 10, 30, 0.2); }

.xui-overview-layout {
  margin-left: auto;
  margin-right: auto; }
  @media screen and (max-width: 520px) {
    .xui-overview-layout {
      border-left: 0;
      border-radius: 0;
      border-right: 0; } }
  .xui-overview-layout .xui-overview--section {
    padding-top: 20px;
    padding-bottom: 20px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
@keyframes xui-dropdown-mobile-show {
  0% {
    transform: translateY(100%); }
  100% {
    transform: translateY(0); } }

@keyframes xui-dropdown-mobile-hide {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(100%); } }

.xui-dropdown-layout {
  border-color: transparent;
  border-style: solid;
  border-width: 0px 1px;
  display: none;
  flex-direction: column;
  min-width: 140px;
  outline: none;
  position: absolute;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content; }
  @media screen and (min-width: 520px) {
    .xui-dropdown-layout {
      z-index: 1000; }
      .xui-dropdown-layout .xui-dropdown--body {
        max-height: inherit;
        overflow: hidden;
        transform-origin: top; } }
  .xui-dropdown-layout.xui-dropdown--force-desktop {
    z-index: 1000; }
    .xui-dropdown-layout.xui-dropdown--force-desktop .xui-dropdown--body {
      overflow: hidden;
      transform-origin: top; }
  @media screen and (max-width: 520px) {
    .xui-dropdown-layout .xui-dropdown--mask {
      /*
		  Top and bottom are supposed to be -60px;  If they're not, unmasked content may become visible
		  while the address bar slides out of view on Android Chrome, Android Opera, and iOS Safari.
		  */
      bottom: -60px;
      left: 0;
      position: absolute;
      top: -60px;
      width: 100%; }
    .xui-dropdown-layout:not(.xui-dropdown--force-desktop) {
      height: 100%;
      left: 0;
      position: fixed;
      width: 100%;
      z-index: 9999; }
      .xui-dropdown-layout:not(.xui-dropdown--force-desktop) .xui-dropdown--body {
        bottom: 0;
        left: 0;
        max-width: 100%;
        position: absolute;
        transform: translateY(0);
        width: 100%; }
      .xui-dropdown-layout:not(.xui-dropdown--force-desktop) .xui-dropdown--header {
        display: block;
        flex-grow: 0; }
    .xui-dropdown-layout.xui-dropdown-fullheight:not(.xui-dropdown--force-desktop) {
      height: 100%; }
      .xui-dropdown-layout.xui-dropdown-fullheight:not(.xui-dropdown--force-desktop) .xui-dropdown--body {
        height: 100%;
        max-height: 100%; } }
  .xui-dropdown-layout .xui-dropdown--panel {
    outline: none; }
  .xui-dropdown-layout .xui-dropdown--scrollable-container {
    max-height: inherit;
    overflow: hidden; }
  .xui-dropdown-layout .xui-dropdown--header-container {
    align-items: center;
    box-shadow: 0 1px 0 0 rgba(0, 10, 30, 0.2);
    display: flex;
    height: 60px;
    justify-content: space-between;
    min-height: 60px;
    padding-left: 10px;
    padding-right: 10px; }
  .xui-dropdown-layout .xui-dropdown--header-leftcontent {
    align-items: center;
    display: flex;
    flex: 1;
    overflow: hidden;
    padding-right: 10px; }
  .xui-dropdown-layout .xui-dropdown--header-rightcontent {
    align-items: center;
    display: flex; }
  .xui-dropdown-layout .xui-dropdown--footer {
    box-shadow: 0 -1px 0 0 rgba(0, 10, 30, 0.2);
    flex-grow: 0;
    width: 100%; }

.xui-dropdown--mask {
  background-color: rgba(0, 10, 30, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease; }

.xui-dropdown--body {
  background-color: #fff;
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 520px) {
    .xui-dropdown--body {
      border-radius: 3px;
      box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2); } }
  .xui-dropdown--force-desktop .xui-dropdown--body {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2); }
  .xui-dropdown--body .xui-dropdown--scrollable-content {
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    transform: translate3d(0, 0, 0); }

.xui-dropdown-is-open {
  display: flex; }
  @media screen and (max-width: 520px) {
    .xui-dropdown-is-open:not(.xui-dropdown--force-desktop) .xui-dropdown--mask {
      flex-grow: 1;
      opacity: 1;
      pointer-events: auto;
      width: 100vw; }
    .xui-dropdown-is-open:not(.xui-dropdown--force-desktop) .xui-dropdown--body {
      flex-grow: 0;
      max-height: 100%;
      opacity: 1; } }

@media screen and (max-width: 520px) {
  .xui-dropdown-is-opening:not(.xui-dropdown--force-desktop) .xui-dropdown--body {
    animation: xui-dropdown-mobile-show 0.3s ease forwards; } }

.xui-dropdown-is-closing {
  display: flex; }
  @media screen and (max-width: 520px) {
    .xui-dropdown-is-closing:not(.xui-dropdown--force-desktop) .xui-dropdown--mask {
      opacity: 0; }
    .xui-dropdown-is-closing:not(.xui-dropdown--force-desktop) .xui-dropdown--body {
      animation: xui-dropdown-mobile-hide 0.3s ease forwards; } }

@media screen and (min-width: 520px) {
  .xui-dropdown-small {
    max-width: 140px; }
  .xui-dropdown-fixed-small {
    width: 140px; } }

@media screen and (max-width: 520px) {
  .xui-dropdown-small.xui-dropdown--force-desktop {
    max-width: 140px; }
  .xui-dropdown-fixed-small.xui-dropdown--force-desktop {
    width: 140px; } }

@media screen and (min-width: 520px) {
  .xui-dropdown-medium {
    max-width: 220px; }
  .xui-dropdown-fixed-medium {
    width: 220px; } }

@media screen and (max-width: 520px) {
  .xui-dropdown-medium.xui-dropdown--force-desktop {
    max-width: 220px; }
  .xui-dropdown-fixed-medium.xui-dropdown--force-desktop {
    width: 220px; } }

@media screen and (min-width: 520px) {
  .xui-dropdown-large {
    max-width: 300px; }
  .xui-dropdown-fixed-large {
    width: 300px; } }

@media screen and (max-width: 520px) {
  .xui-dropdown-large.xui-dropdown--force-desktop {
    max-width: 300px; }
  .xui-dropdown-fixed-large.xui-dropdown--force-desktop {
    width: 300px; } }

@media screen and (min-width: 520px) {
  .xui-dropdown-xlarge {
    max-width: 380px; }
  .xui-dropdown-fixed-xlarge {
    width: 380px; } }

@media screen and (max-width: 520px) {
  .xui-dropdown-xlarge.xui-dropdown--force-desktop {
    max-width: 380px; }
  .xui-dropdown-fixed-xlarge.xui-dropdown--force-desktop {
    width: 380px; } }

.xui-dropdown-positionright {
  right: 0; }

.xui-dropdown-positionleft {
  left: 0; }

.xui-dropdown-positionabove {
  bottom: 100%; }

.xui-dropdown-positionunder {
  top: 100%; }

.xui-dropdown-input-layout-match {
  border: 1px solid transparent; }

.xui-dropdownToggled--innerWrap {
  display: inline-table; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-background-white {
  background-color: #fff; }

.xui-background-grey-1 {
  background-color: #000a1e; }

.xui-background-grey-2 {
  background-color: #404756; }

.xui-background-grey-3 {
  background-color: #59606d; }

.xui-background-grey-4 {
  background-color: #80858f; }

.xui-background-grey-5 {
  background-color: #a6a9b0; }

.xui-background-grey-6 {
  background-color: #ccced2; }

.xui-background-grey-7 {
  background-color: #e6e7e9; }

.xui-background-grey-8 {
  background-color: #f2f3f4; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-chart--position,
.xui-chart--base {
  position: relative; }

.xui-chart--position * {
  display: block !important; }

.xui-chart--base {
  height: 400px; }

.xui-chart--content,
.xui-chart--shadows {
  left: 0;
  overflow-x: auto;
  overflow-y: hidden;
  position: absolute;
  right: 0;
  top: 0; }

.xui-chart--content {
  height: 100%; }

.xui-chart--shadows {
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 1; }
  .xui-chart--shadows:before, .xui-chart--shadows:after {
    content: '';
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: 0.1s;
    width: 100px; }

.xui-chart--shadows:before {
  box-shadow: 1px 0 0 0 rgba(0, 10, 30, 0.2), 3px 0 0 0 rgba(0, 10, 30, 0.05);
  right: 100%; }

.xui-chart--shadows:after {
  box-shadow: -1px 0 0 0 rgba(0, 10, 30, 0.2), -3px 0 0 0 rgba(0, 10, 30, 0.05);
  left: 100%; }

.xui-chart-has-left-shadow .xui-chart--shadows:before,
.xui-chart-has-right-shadow .xui-chart--shadows:after {
  opacity: 1; }

.xui-chart-has-pagination .xui-chart--content {
  overflow-x: hidden; }

.xui-chart--header {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 30px; }

.xui-chart-has-multiline-header .xui-chart--header {
  flex-wrap: wrap; }

.xui-chart--title {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 0.9375rem;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.xui-chart-has-multiline-header .xui-chart--title {
  width: calc(100% - 40px); }

.xui-chart--pagination {
  align-items: center;
  display: flex;
  justify-content: center;
  white-space: nowrap; }

.xui-chart-has-multiline-header .xui-chart--pagination {
  justify-content: space-between;
  order: 1;
  width: 100%; }

.xui-chart--scroll {
  height: 100%;
  position: relative; }

.xui-chart-has-pagination .xui-chart--scroll {
  transition: 0.3s; }

.xui-chart-is-loading {
  align-items: center;
  display: flex;
  height: 400px;
  justify-content: center; }

.xui-chart-is-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  text-align: center; }

.xui-chart--tooltip {
  background: transparent;
  height: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 0; }

.xui-chart .xui-tooltip {
  display: block; }

.xui-chart .xui-tooltip--tip {
  cursor: initial;
  pointer-events: none; }

.xui-chart--key {
  padding: 10px; }

.xui-chart--key-title {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.6875rem;
  padding: 10px; }

.xui-chart--key-list {
  list-style-type: none;
  margin: 0;
  padding: 0; }

.xui-chart--key-item {
  padding: 10px 10px 10px 40px;
  position: relative; }

.xui-chart--key-icon {
  background: #a6a9b0;
  border-radius: 50%;
  height: 10px;
  left: 10px;
  position: absolute;
  top: 15px;
  width: 10px; }

.xui-chart--empty {
  color: rgba(0, 10, 30, 0.75);
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-text-label {
  font-weight: 700;
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.8125rem; }

.xui-text-secondary {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.8125rem; }

.xui-text-minor {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.6875rem; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-capsule {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.35);
  display: inline;
  padding: 0.01em 0.1em; }
  .xui-capsule .xui-icon {
    vertical-align: bottom; }
  .xui-capsule:hover {
    box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.5); }
  .xui-capsule:focus {
    background: #0078c8;
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    color: #fff; }

.xui-capsule-interactive {
  color: #0078c8; }

.xui-capsule-invalid {
  background: #dc3246;
  color: #fff; }
  .xui-capsule-invalid:hover {
    background-color: #6e1923;
    color: #fff; }
  .xui-capsule-invalid:focus {
    background-color: #dc3246;
    box-shadow: 0 0 0 3px rgba(0, 10, 30, 0.2);
    color: #fff; }

.xui-heading-panel {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 1.0625rem; }

.xui-heading-section {
  color: #000a1e;
  font-size: 0.9375rem;
  font-weight: 400; }

.xui-heading-modal {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 1.0625rem; }

.xui-heading-item {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 0.9375rem; }

.xui-heading-separator {
  line-height: 1.3077;
  font-weight: 400;
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.8125rem; }

.xui-heading-xsmall {
  line-height: 1.3077;
  font-weight: 400;
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.8125rem; }

.xui-heading-small {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 0.9375rem; }

.xui-heading {
  line-height: 1.3077;
  font-weight: 700;
  font-size: 1.0625rem; }

.xui-heading-large {
  line-height: 1.3077;
  font-feature-settings: "pnum" 1;
  font-variant-numeric: proportional-nums;
  font-weight: 700;
  font-size: 1.3125rem; }

.xui-heading-xlarge {
  letter-spacing: -0.005em;
  font-weight: 700;
  line-height: 1.15;
  font-feature-settings: "pnum" 1;
  font-variant-numeric: proportional-nums;
  font-size: 1.625rem; }
  @media screen and (min-width: 520px) {
    .xui-heading-xlarge {
      font-size: 2rem; } }
  @media screen and (min-width: 1160px) {
    .xui-heading-xlarge {
      font-size: 2.25rem; } }

.xui-heading-2xlarge {
  letter-spacing: -0.005em;
  font-weight: 700;
  line-height: 1.15;
  font-feature-settings: "pnum" 1;
  font-variant-numeric: proportional-nums;
  font-size: 2rem; }
  @media screen and (min-width: 520px) {
    .xui-heading-2xlarge {
      font-size: 2.25rem; } }
  @media screen and (min-width: 1160px) {
    .xui-heading-2xlarge {
      font-size: 48px; } }

.xui-heading-3xlarge {
  letter-spacing: -0.005em;
  font-weight: 700;
  line-height: 1.15;
  font-feature-settings: "pnum" 1;
  font-variant-numeric: proportional-nums;
  font-size: 48px; }
  @media screen and (min-width: 520px) {
    .xui-heading-3xlarge {
      font-size: 5vw; } }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-textcontent {
  line-height: 1.5;
  font-size: 0.9375rem; }
  .xui-textcontent * {
    margin: 1em 0 0; }
  .xui-textcontent h1,
  .xui-textcontent h2,
  .xui-textcontent h3,
  .xui-textcontent h4,
  .xui-textcontent h5,
  .xui-textcontent h6 {
    margin-top: 2em; }
  .xui-textcontent h1 {
    letter-spacing: -0.005em;
    font-weight: 700;
    line-height: 1.15;
    font-feature-settings: "pnum" 1;
    font-variant-numeric: proportional-nums;
    font-size: 2rem; }
  .xui-textcontent h2 {
    letter-spacing: -0.005em;
    line-height: 1.3077;
    font-feature-settings: "pnum" 1;
    font-variant-numeric: proportional-nums;
    font-weight: 700;
    font-size: 1.3125rem; }
  .xui-textcontent h3 {
    line-height: 1.3077;
    font-weight: 700;
    font-size: 1.0625rem; }
  .xui-textcontent h4 {
    line-height: 1.3077;
    font-weight: 700;
    font-size: 0.9375rem; }
  .xui-textcontent h5 {
    line-height: 1.3077;
    color: rgba(0, 10, 30, 0.75);
    font-weight: 400;
    font-size: 0.9375rem; }
  .xui-textcontent h6 {
    line-height: 1.3077;
    font-weight: 400;
    color: rgba(0, 10, 30, 0.75);
    font-size: 0.8125rem; }
  .xui-textcontent hr {
    background: #ccced2;
    border: 0;
    height: 1px;
    margin: 3rem 0;
    width: 100%; }
  .xui-textcontent dt {
    font-weight: bold; }
    .xui-textcontent dt::after {
      content: ":"; }
  .xui-textcontent dd {
    margin-left: 1em; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-text-minorlink {
  color: inherit; }
  .xui-text-minorlink:hover, .xui-text-minorlink:focus {
    color: #0078c8; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-text-align-left {
  text-align: left; }

.xui-text-align-center {
  text-align: center; }

.xui-text-align-right {
  text-align: right; }

.xui-text-truncated {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; }

.xui-isolationheader .xui-text-truncated {
  width: auto; }

/* doiuse-disable */
.xui-text-wordbreak {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  word-wrap: break-word; }

/* doiuse-enable */
.xui-text-emphasis {
  font-weight: 700; }

.xui-text-deemphasis {
  font-weight: 400; }

.xui-text-spacing-tight {
  letter-spacing: -0.005em; }

.xui-text-spacing-loose {
  letter-spacing: 0.01em; }

.xui-text-reset {
  line-height: 1; }

.xui-text-tight {
  line-height: 1.15; }

.xui-text-compact {
  line-height: 1.3077; }

.xui-textcolor-standard {
  color: #000a1e; }

.xui-textcolor-muted {
  color: rgba(0, 10, 30, 0.75); }

.xui-text-placeholder,
.xui-textcolor-faint {
  color: rgba(0, 10, 30, 0.65); }

.xui-textcolor-icon {
  color: rgba(0, 10, 30, 0.75); }

.xui-textcolor-positive {
  color: #00823c; }

.xui-textcolor-negative {
  color: #dc3246; }

.xui-textcolor-inverted {
  color: #fff; }

.xui-textcolor-inverted-muted {
  color: rgba(255, 255, 255, 0.75); }

.xui-textcolor-inverted-faint {
  color: rgba(255, 255, 255, 0.65); }

.xui-tag {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 10, 30, 0.5);
  color: rgba(0, 10, 30, 0.75);
  display: inline-block;
  font-size: 0.6875rem;
  line-height: 0.6875rem;
  padding: 4px 6px;
  vertical-align: middle; }

.xui-tag-neutral {
  background-color: rgba(0, 10, 30, 0.2);
  box-shadow: inset 0 0 0 1px rgba(0, 10, 30, 0.2); }

.xui-tag-positive {
  background-color: #a6d3bb;
  box-shadow: inset 0 0 0 1px #80c19e;
  color: #002e15; }

.xui-tag-warning {
  background-color: #fdd3a6;
  box-shadow: inset 0 0 0 1px #fdc180;
  color: #582e00; }

.xui-tag-negative {
  background-color: #f3b7be;
  box-shadow: inset 0 0 0 1px #ee99a3;
  color: #4d1219; }

.xui-is-disabled {
  cursor: default;
  opacity: 0.4;
  pointer-events: none; }
  .xui-is-disabled:hover, .xui-is-disabled:active, .xui-is-disabled:focus {
    background-color: inherit; }
  .xui-is-disabled > * {
    cursor: default;
    pointer-events: none; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
.xui-autocompleter--textinputplaceholder {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden; }

.xui-autocompleter--trigger-pillwrap {
  display: flex;
  flex-flow: row wrap;
  padding-left: 5px; }
  .xui-autocompleter--trigger-pillwrap > .xui-textinput--input {
    padding-left: 5px; }

.xui-autocompleter--pills-nopillwrap {
  display: flex;
  flex-flow: row nowrap;
  flex-shrink: 1;
  overflow-x: auto;
  padding-left: 5px; }
  .xui-autocompleter--pills-nopillwrap ~ .xui-textinput--input {
    padding-left: 10px; }

.xui-autocompleter--pill {
  flex: 0 0 auto;
  margin-bottom: 2px;
  margin-right: 5px;
  margin-top: 2px; }

.xui-autocompleter--textinput {
  flex-shrink: 0;
  max-width: 100%; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-rollovercheckbox {
  display: flex;
  justify-content: center;
  min-width: 50px;
  overflow: hidden;
  position: relative; }

.xui-rollovercheckbox--target {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  min-height: 50px;
  width: 50px; }

.xui-rollovercheckbox--target-disabled {
  cursor: not-allowed; }

.xui-rollovercheckbox-small {
  min-height: 40px;
  width: 40px; }

.xui-rollovercheckbox-large {
  min-height: 60px;
  width: 60px; }

.xui-rollovercheckbox-xlarge {
  min-height: 70px;
  width: 70px; }

.xui-rollovercheckbox--checkbox {
  margin-top: 5px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
@keyframes xui-animation-autofill {
  to {
    background: #fff; } }

/**
 * A collection of general-purpose utility rules.
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-u-flex {
  display: flex; }

.xui-u-flex-inline {
  display: inline-flex; }

.xui-u-flex-none {
  flex: none; }

.xui-u-flex-1 {
  flex: 1; }

.xui-u-flex-grow {
  flex-basis: auto;
  flex-grow: 1; }

.xui-u-flex-inherit {
  align-items: inherit;
  display: inherit;
  flex-direction: inherit;
  justify-content: inherit;
  width: inherit; }

.xui-u-flex-align-start {
  align-items: flex-start; }

.xui-u-flex-align-end {
  align-items: flex-end; }

.xui-u-flex-align-stretch {
  align-items: stretch; }

.xui-u-flex-align-center {
  align-items: center; }

.xui-u-flex-row {
  flex-direction: row; }

.xui-u-flex-column {
  flex-direction: column; }

.xui-u-flex-justify-space-between {
  justify-content: space-between; }

.xui-u-flex-justify-space-around {
  justify-content: space-around; }

.xui-u-flex-justify-start {
  justify-content: flex-start; }

.xui-u-flex-justify-end {
  justify-content: flex-end; }

.xui-u-flex-justify-center {
  justify-content: center; }

@media screen and (max-width: 520px) {
  .xui-u-flex-align-start-narrow {
    align-items: flex-start; }
  .xui-u-flex-align-end-narrow {
    align-items: flex-end; }
  .xui-u-flex-align-stretch-narrow {
    align-items: stretch; }
  .xui-u-flex-align-center-narrow {
    align-items: center; }
  .xui-u-flex-row-narrow {
    flex-direction: row; }
  .xui-u-flex-column-narrow {
    flex-direction: column; }
  .xui-u-flex-justify-space-between-narrow {
    justify-content: space-between; }
  .xui-u-flex-justify-space-around-narrow {
    justify-content: space-around; }
  .xui-u-flex-justify-start-narrow {
    justify-content: flex-start; }
  .xui-u-flex-justify-end-narrow {
    justify-content: flex-end; }
  .xui-u-flex-justify-center-narrow {
    justify-content: center; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-u-flex-align-start-medium {
    align-items: flex-start; }
  .xui-u-flex-align-end-medium {
    align-items: flex-end; }
  .xui-u-flex-align-stretch-medium {
    align-items: stretch; }
  .xui-u-flex-align-center-medium {
    align-items: center; }
  .xui-u-flex-row-medium {
    flex-direction: row; }
  .xui-u-flex-column-medium {
    flex-direction: column; }
  .xui-u-flex-justify-space-between-medium {
    justify-content: space-between; }
  .xui-u-flex-justify-space-around-medium {
    justify-content: space-around; }
  .xui-u-flex-justify-start-medium {
    justify-content: flex-start; }
  .xui-u-flex-justify-end-medium {
    justify-content: flex-end; }
  .xui-u-flex-justify-center-medium {
    justify-content: center; } }

@media screen and (min-width: 940px) {
  .xui-u-flex-align-start-wide {
    align-items: flex-start; }
  .xui-u-flex-align-end-wide {
    align-items: flex-end; }
  .xui-u-flex-align-stretch-wide {
    align-items: stretch; }
  .xui-u-flex-align-center-wide {
    align-items: center; }
  .xui-u-flex-row-wide {
    flex-direction: row; }
  .xui-u-flex-column-wide {
    flex-direction: column; }
  .xui-u-flex-justify-space-between-wide {
    justify-content: space-between; }
  .xui-u-flex-justify-space-around-wide {
    justify-content: space-around; }
  .xui-u-flex-justify-start-wide {
    justify-content: flex-start; }
  .xui-u-flex-justify-end-wide {
    justify-content: flex-end; }
  .xui-u-flex-justify-center-wide {
    justify-content: center; } }

.xui-u-display-block {
  display: block; }

.xui-u-display-inline-block {
  display: inline-block; }

.xui-u-display-inline {
  display: inline; }

.xui-u-hidden {
  display: none !important;
  visibility: hidden !important; }

.xui-u-hidden-visually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  left: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  white-space: nowrap !important;
  width: 1px !important; }

.xui-u-hidden-content {
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

@media screen and (max-width: 520px) {
  .xui-u-hidden-narrow {
    display: none !important; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-u-hidden-medium {
    display: none !important; } }

@media screen and (min-width: 940px) {
  .xui-u-hidden-wide {
    display: none !important; } }

.xui-u-overflow-hidden {
  overflow: hidden !important; }

.xui-u-fullwidth {
  display: block;
  width: 100%; }

.xui-u-noselect {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }

.xui-u-resize-none {
  resize: none; }

.xui-u-resize-vertical {
  resize: vertical; }

.xui-u-rotate-90 {
  transform: rotate(90deg); }

.xui-u-rotate-180 {
  transform: rotate(180deg); }

.xui-u-rotate-270 {
  transform: rotate(-90deg); }

.xui-u-position-fixed {
  position: fixed; }

.xui-u-position-relative {
  position: relative; }

/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
.xui-margin-auto {
  margin: auto; }

.xui-margin-vertical-auto {
  margin-top: auto;
  margin-bottom: auto; }

.xui-margin-horizontal-auto {
  margin-left: auto;
  margin-right: auto; }

.xui-margin-top-auto {
  margin-top: auto; }

.xui-margin-right-auto {
  margin-right: auto; }

.xui-margin-bottom-auto {
  margin-bottom: auto; }

.xui-margin-left-auto {
  margin-left: auto; }

.xui-margin-none {
  margin: 0; }

.xui-margin-vertical-none {
  margin-top: 0;
  margin-bottom: 0; }

.xui-margin-horizontal-none {
  margin-left: 0;
  margin-right: 0; }

.xui-margin-top-none {
  margin-top: 0; }

.xui-margin-right-none {
  margin-right: 0; }

.xui-margin-bottom-none {
  margin-bottom: 0; }

.xui-margin-left-none {
  margin-left: 0; }

.xui-margin {
  margin: 15px; }

.xui-margin-vertical {
  margin-top: 15px;
  margin-bottom: 15px; }

.xui-margin-horizontal {
  margin-left: 15px;
  margin-right: 15px; }

.xui-margin-top {
  margin-top: 15px; }

.xui-margin-right {
  margin-right: 15px; }

.xui-margin-bottom {
  margin-bottom: 15px; }

.xui-margin-left {
  margin-left: 15px; }

.xui-margin-small {
  margin: 10px; }

.xui-margin-vertical-small {
  margin-top: 10px;
  margin-bottom: 10px; }

.xui-margin-horizontal-small {
  margin-left: 10px;
  margin-right: 10px; }

.xui-margin-top-small {
  margin-top: 10px; }

.xui-margin-right-small {
  margin-right: 10px; }

.xui-margin-bottom-small {
  margin-bottom: 10px; }

.xui-margin-left-small {
  margin-left: 10px; }

.xui-margin-xsmall {
  margin: 5px; }

.xui-margin-vertical-xsmall {
  margin-top: 5px;
  margin-bottom: 5px; }

.xui-margin-horizontal-xsmall {
  margin-left: 5px;
  margin-right: 5px; }

.xui-margin-top-xsmall {
  margin-top: 5px; }

.xui-margin-right-xsmall {
  margin-right: 5px; }

.xui-margin-bottom-xsmall {
  margin-bottom: 5px; }

.xui-margin-left-xsmall {
  margin-left: 5px; }

.xui-margin-large {
  margin: 20px; }

.xui-margin-vertical-large {
  margin-top: 20px;
  margin-bottom: 20px; }

.xui-margin-horizontal-large {
  margin-left: 20px;
  margin-right: 20px; }

.xui-margin-top-large {
  margin-top: 20px; }

.xui-margin-right-large {
  margin-right: 20px; }

.xui-margin-bottom-large {
  margin-bottom: 20px; }

.xui-margin-left-large {
  margin-left: 20px; }

.xui-margin-xlarge {
  margin: 25px; }

.xui-margin-vertical-xlarge {
  margin-top: 25px;
  margin-bottom: 25px; }

.xui-margin-horizontal-xlarge {
  margin-left: 25px;
  margin-right: 25px; }

.xui-margin-top-xlarge {
  margin-top: 25px; }

.xui-margin-right-xlarge {
  margin-right: 25px; }

.xui-margin-bottom-xlarge {
  margin-bottom: 25px; }

.xui-margin-left-xlarge {
  margin-left: 25px; }

.xui-margin-2xlarge {
  margin: 30px; }

.xui-margin-vertical-2xlarge {
  margin-top: 30px;
  margin-bottom: 30px; }

.xui-margin-horizontal-2xlarge {
  margin-left: 30px;
  margin-right: 30px; }

.xui-margin-top-2xlarge {
  margin-top: 30px; }

.xui-margin-right-2xlarge {
  margin-right: 30px; }

.xui-margin-bottom-2xlarge {
  margin-bottom: 30px; }

.xui-margin-left-2xlarge {
  margin-left: 30px; }

.xui-margin-3xlarge {
  margin: 35px; }

.xui-margin-vertical-3xlarge {
  margin-top: 35px;
  margin-bottom: 35px; }

.xui-margin-horizontal-3xlarge {
  margin-left: 35px;
  margin-right: 35px; }

.xui-margin-top-3xlarge {
  margin-top: 35px; }

.xui-margin-right-3xlarge {
  margin-right: 35px; }

.xui-margin-bottom-3xlarge {
  margin-bottom: 35px; }

.xui-margin-left-3xlarge {
  margin-left: 35px; }

.xui-margin-4xlarge {
  margin: 40px; }

.xui-margin-vertical-4xlarge {
  margin-top: 40px;
  margin-bottom: 40px; }

.xui-margin-horizontal-4xlarge {
  margin-left: 40px;
  margin-right: 40px; }

.xui-margin-top-4xlarge {
  margin-top: 40px; }

.xui-margin-right-4xlarge {
  margin-right: 40px; }

.xui-margin-bottom-4xlarge {
  margin-bottom: 40px; }

.xui-margin-left-4xlarge {
  margin-left: 40px; }

.xui-margin-5xlarge {
  margin: 50px; }

.xui-margin-vertical-5xlarge {
  margin-top: 50px;
  margin-bottom: 50px; }

.xui-margin-horizontal-5xlarge {
  margin-left: 50px;
  margin-right: 50px; }

.xui-margin-top-5xlarge {
  margin-top: 50px; }

.xui-margin-right-5xlarge {
  margin-right: 50px; }

.xui-margin-bottom-5xlarge {
  margin-bottom: 50px; }

.xui-margin-left-5xlarge {
  margin-left: 50px; }

.xui-margin-6xlarge {
  margin: 60px; }

.xui-margin-vertical-6xlarge {
  margin-top: 60px;
  margin-bottom: 60px; }

.xui-margin-horizontal-6xlarge {
  margin-left: 60px;
  margin-right: 60px; }

.xui-margin-top-6xlarge {
  margin-top: 60px; }

.xui-margin-right-6xlarge {
  margin-right: 60px; }

.xui-margin-bottom-6xlarge {
  margin-bottom: 60px; }

.xui-margin-left-6xlarge {
  margin-left: 60px; }

.xui-padding-none {
  padding: 0; }

.xui-padding-vertical-none {
  padding-top: 0;
  padding-bottom: 0; }

.xui-padding-horizontal-none {
  padding-left: 0;
  padding-right: 0; }

.xui-padding-top-none {
  padding-top: 0; }

.xui-padding-right-none {
  padding-right: 0; }

.xui-padding-bottom-none {
  padding-bottom: 0; }

.xui-padding-left-none {
  padding-left: 0; }

.xui-padding {
  padding: 15px; }

.xui-padding-vertical {
  padding-top: 15px;
  padding-bottom: 15px; }

.xui-padding-horizontal {
  padding-left: 15px;
  padding-right: 15px; }

.xui-padding-top {
  padding-top: 15px; }

.xui-padding-right {
  padding-right: 15px; }

.xui-padding-bottom {
  padding-bottom: 15px; }

.xui-padding-left {
  padding-left: 15px; }

.xui-padding-small {
  padding: 10px; }

.xui-padding-vertical-small {
  padding-top: 10px;
  padding-bottom: 10px; }

.xui-padding-horizontal-small {
  padding-left: 10px;
  padding-right: 10px; }

.xui-padding-top-small {
  padding-top: 10px; }

.xui-padding-right-small {
  padding-right: 10px; }

.xui-padding-bottom-small {
  padding-bottom: 10px; }

.xui-padding-left-small {
  padding-left: 10px; }

.xui-padding-xsmall {
  padding: 5px; }

.xui-padding-vertical-xsmall {
  padding-top: 5px;
  padding-bottom: 5px; }

.xui-padding-horizontal-xsmall {
  padding-left: 5px;
  padding-right: 5px; }

.xui-padding-top-xsmall {
  padding-top: 5px; }

.xui-padding-right-xsmall {
  padding-right: 5px; }

.xui-padding-bottom-xsmall {
  padding-bottom: 5px; }

.xui-padding-left-xsmall {
  padding-left: 5px; }

.xui-padding-large {
  padding: 20px; }

.xui-padding-vertical-large {
  padding-top: 20px;
  padding-bottom: 20px; }

.xui-padding-horizontal-large {
  padding-left: 20px;
  padding-right: 20px; }

.xui-padding-top-large {
  padding-top: 20px; }

.xui-padding-right-large {
  padding-right: 20px; }

.xui-padding-bottom-large {
  padding-bottom: 20px; }

.xui-padding-left-large {
  padding-left: 20px; }

.xui-padding-xlarge {
  padding: 25px; }

.xui-padding-vertical-xlarge {
  padding-top: 25px;
  padding-bottom: 25px; }

.xui-padding-horizontal-xlarge {
  padding-left: 25px;
  padding-right: 25px; }

.xui-padding-top-xlarge {
  padding-top: 25px; }

.xui-padding-right-xlarge {
  padding-right: 25px; }

.xui-padding-bottom-xlarge {
  padding-bottom: 25px; }

.xui-padding-left-xlarge {
  padding-left: 25px; }

.xui-padding-2xlarge {
  padding: 30px; }

.xui-padding-vertical-2xlarge {
  padding-top: 30px;
  padding-bottom: 30px; }

.xui-padding-horizontal-2xlarge {
  padding-left: 30px;
  padding-right: 30px; }

.xui-padding-top-2xlarge {
  padding-top: 30px; }

.xui-padding-right-2xlarge {
  padding-right: 30px; }

.xui-padding-bottom-2xlarge {
  padding-bottom: 30px; }

.xui-padding-left-2xlarge {
  padding-left: 30px; }

.xui-padding-3xlarge {
  padding: 35px; }

.xui-padding-vertical-3xlarge {
  padding-top: 35px;
  padding-bottom: 35px; }

.xui-padding-horizontal-3xlarge {
  padding-left: 35px;
  padding-right: 35px; }

.xui-padding-top-3xlarge {
  padding-top: 35px; }

.xui-padding-right-3xlarge {
  padding-right: 35px; }

.xui-padding-bottom-3xlarge {
  padding-bottom: 35px; }

.xui-padding-left-3xlarge {
  padding-left: 35px; }

.xui-padding-4xlarge {
  padding: 40px; }

.xui-padding-vertical-4xlarge {
  padding-top: 40px;
  padding-bottom: 40px; }

.xui-padding-horizontal-4xlarge {
  padding-left: 40px;
  padding-right: 40px; }

.xui-padding-top-4xlarge {
  padding-top: 40px; }

.xui-padding-right-4xlarge {
  padding-right: 40px; }

.xui-padding-bottom-4xlarge {
  padding-bottom: 40px; }

.xui-padding-left-4xlarge {
  padding-left: 40px; }

.xui-padding-5xlarge {
  padding: 50px; }

.xui-padding-vertical-5xlarge {
  padding-top: 50px;
  padding-bottom: 50px; }

.xui-padding-horizontal-5xlarge {
  padding-left: 50px;
  padding-right: 50px; }

.xui-padding-top-5xlarge {
  padding-top: 50px; }

.xui-padding-right-5xlarge {
  padding-right: 50px; }

.xui-padding-bottom-5xlarge {
  padding-bottom: 50px; }

.xui-padding-left-5xlarge {
  padding-left: 50px; }

.xui-padding-6xlarge {
  padding: 60px; }

.xui-padding-vertical-6xlarge {
  padding-top: 60px;
  padding-bottom: 60px; }

.xui-padding-horizontal-6xlarge {
  padding-left: 60px;
  padding-right: 60px; }

.xui-padding-top-6xlarge {
  padding-top: 60px; }

.xui-padding-right-6xlarge {
  padding-right: 60px; }

.xui-padding-bottom-6xlarge {
  padding-bottom: 60px; }

.xui-padding-left-6xlarge {
  padding-left: 60px; }

/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds the given value as margin-top

$margin - Value to be applied to margin top
*/
/*
Adds the given value as margin-right

$margin - Value to be applied to margin right
*/
/*
Adds the given value as margin-bottom

$margin - Value to be applied to margin bottom
*/
/*
Adds the given value as margin-left

$margin - Value to be applied to margin left
*/
/*
Adds the given value as vertical margin

$margin - Value to be applied to top and bottom margins
*/
/*
Adds the given value as horizontal margins

$margin - Value to be applied to left and right margins
*/
/*
Adds the given value as margin (all)

$margin - Value to be applied to margin
*/
/*
For generating a collection of XUI layout classes with a given $margin and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-margin-vertical$suffix`

$margin - Value to be applied to each margin size
$suffix - Suffix to add for each generated class
*/
/*
Adds the given value as padding-top

$padding - Value to be applied to padding-top
*/
/*
Adds the given value as padding-right

$padding - Value to be applied to padding-right
*/
/*
Adds the given value as padding-bottom

$padding - Value to be applied to padding-bottom
*/
/*
Adds the given value as padding-left

$padding - Value to be applied to padding-left
*/
/*
Adds the given value as vertical padding

$padding - Value to be applied to top and bottom padding
*/
/*
Adds the given value as horizontal padding

$padding - Value to be applied to top and bottom
*/
/*
Adds the given value as padding

$padding - Value to be applied to padding
*/
/*
For generating a collection of XUI layout classes with a given $padding and $suffix. Will create a `-vertical`, `-horizontal`, `-top`, `-right`,
`-bottom`, `-left`, and standard variants. Renders as `.$ns-padding-vertical$suffix`.

$padding - Value to be applied to each padding size
$suffix - Suffix to add for each generated class
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Provides reset for button styles applied by the browser
*/
/*
Standard XUI button shadow

$color - alpha value for the box shadow to be applied with
*/
/*
Applies focus button styling on focus

$shadow - `box-shadow` to apply on hover
*/
/*
Provides disabled button styling

$bg-color - Background color to use
$bg-color - Text color to use
$hover-bg-color - Background color to use on hover
*/
/*
Used to create the variants of xui buttons

$bg-color - Background color to use
$bg-hover-color - Background color to use on hover
$bg-active-color - Background color to use on active
$color - Text color to use
$hover-color - Text color to use on hover
$active-color - Text color to use on active
$border-color - Border color to use
*/
/*
Used to create the borderless variants of XUI button

$text-color - Text color to use
$text-hover-color - Text color to use on hover
$background-focus - Background color to use on focus
$background-active - Background color to use while active
*/
/*
Creates the state variant modifiers for XUI icon buttons

$text-color - Text color to use when hovered or active
$focus-bg-color - Background color to use when focused
$active-bg-color - Background color to use when active
$hover-bg-color - Background color to use when hovered
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
Adds a before selector which is used to highlight the left side of a component with a certain colour

$bg-color - The colour to use for the highlight
$left-border-radius - Border radius to use - should match the border radius of the element using this
$has-border - Whether the element using this has a border
*/
/*
Flex aligns children

$align - Property to use for align-items
$justify - Property to use for justify-content
*/
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * forward-thinking and opt for relative units such as rem or em instead.
 *
 * See: http://www.w3.org/Style/Examples/007/units.en.html
 */
/*
	Mixins for line-heights

	Dev notes: Multiple mixins have been chosen due to the cognitive burden of
	a single mixin and a map.

	To use these, an example

	.xui-some-class {
		@include @xui-text-lineheight-tight;
	}
*/
/*
Grid types
*/
.xui-row::after,
.xui-row-grid::after {
  clear: both;
  content: "";
  display: table; }

.xui-row-flex {
  display: flex;
  flex-flow: row wrap; }

/*
Generate Regular columns, 1 to 12 with responsive variants
Responsive variants are : -medium, -wide
*/
.xui-column-1-of-12 {
  float: left;
  width: 8.33%; }

.xui-column-2-of-12 {
  float: left;
  width: 16.66%; }

.xui-column-3-of-12 {
  float: left;
  width: 25%; }

.xui-column-4-of-12 {
  float: left;
  width: 33.33%; }

.xui-column-5-of-12 {
  float: left;
  width: 41.66%; }

.xui-column-6-of-12 {
  float: left;
  width: 50%; }

.xui-column-7-of-12 {
  float: left;
  width: 58.33%; }

.xui-column-8-of-12 {
  float: left;
  width: 66.66%; }

.xui-column-9-of-12 {
  float: left;
  width: 75%; }

.xui-column-10-of-12 {
  float: left;
  width: 83.33%; }

.xui-column-11-of-12 {
  float: left;
  width: 91.66%; }

.xui-column-12-of-12 {
  float: left;
  width: 100%; }

/*
Setting up the parent class for padded columns
This is our "Grid" since we want a nice even space between the columns
*/
.xui-row-grid {
  margin-left: -10px;
  margin-right: -10px; }
  .xui-row-grid > [class*="xui-column"] {
    margin-left: 10px;
    margin-right: 10px; }

/*
Generate padded columns, 1 to 12 with responsive variants
Responsive variants are : -medium, -wide
*/
.xui-row-grid > .xui-column-1-of-12 {
  width: calc( (100% - (12/1) * 20px) / 12 * 1 - 0.05px); }

.xui-row-grid > .xui-column-2-of-12 {
  width: calc( (100% - (12/2) * 20px) / 12 * 2 - 0.05px); }

.xui-row-grid > .xui-column-3-of-12 {
  width: calc( (100% - (12/3) * 20px) / 12 * 3 - 0.05px); }

.xui-row-grid > .xui-column-4-of-12 {
  width: calc( (100% - (12/4) * 20px) / 12 * 4 - 0.05px); }

.xui-row-grid > .xui-column-5-of-12 {
  width: calc( (100% - (12/5) * 20px) / 12 * 5 - 0.05px); }

.xui-row-grid > .xui-column-6-of-12 {
  width: calc( (100% - (12/6) * 20px) / 12 * 6 - 0.05px); }

.xui-row-grid > .xui-column-7-of-12 {
  width: calc( (100% - (12/7) * 20px) / 12 * 7 - 0.05px); }

.xui-row-grid > .xui-column-8-of-12 {
  width: calc( (100% - (12/8) * 20px) / 12 * 8 - 0.05px); }

.xui-row-grid > .xui-column-9-of-12 {
  width: calc( (100% - (12/9) * 20px) / 12 * 9 - 0.05px); }

.xui-row-grid > .xui-column-10-of-12 {
  width: calc( (100% - (12/10) * 20px) / 12 * 10 - 0.05px); }

.xui-row-grid > .xui-column-11-of-12 {
  width: calc( (100% - (12/11) * 20px) / 12 * 11 - 0.05px); }

.xui-row-grid > .xui-column-12-of-12 {
  width: calc( 100% - 20px); }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-1-of-12-medium {
    float: left;
    width: 8.33%; } }

@media screen and (min-width: 940px) {
  .xui-column-1-of-12-wide {
    float: left;
    width: 8.33%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-2-of-12-medium {
    float: left;
    width: 16.66%; } }

@media screen and (min-width: 940px) {
  .xui-column-2-of-12-wide {
    float: left;
    width: 16.66%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-3-of-12-medium {
    float: left;
    width: 25%; } }

@media screen and (min-width: 940px) {
  .xui-column-3-of-12-wide {
    float: left;
    width: 25%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-4-of-12-medium {
    float: left;
    width: 33.33%; } }

@media screen and (min-width: 940px) {
  .xui-column-4-of-12-wide {
    float: left;
    width: 33.33%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-5-of-12-medium {
    float: left;
    width: 41.66%; } }

@media screen and (min-width: 940px) {
  .xui-column-5-of-12-wide {
    float: left;
    width: 41.66%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-6-of-12-medium {
    float: left;
    width: 50%; } }

@media screen and (min-width: 940px) {
  .xui-column-6-of-12-wide {
    float: left;
    width: 50%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-7-of-12-medium {
    float: left;
    width: 58.33%; } }

@media screen and (min-width: 940px) {
  .xui-column-7-of-12-wide {
    float: left;
    width: 58.33%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-8-of-12-medium {
    float: left;
    width: 66.66%; } }

@media screen and (min-width: 940px) {
  .xui-column-8-of-12-wide {
    float: left;
    width: 66.66%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-9-of-12-medium {
    float: left;
    width: 75%; } }

@media screen and (min-width: 940px) {
  .xui-column-9-of-12-wide {
    float: left;
    width: 75%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-10-of-12-medium {
    float: left;
    width: 83.33%; } }

@media screen and (min-width: 940px) {
  .xui-column-10-of-12-wide {
    float: left;
    width: 83.33%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-11-of-12-medium {
    float: left;
    width: 91.66%; } }

@media screen and (min-width: 940px) {
  .xui-column-11-of-12-wide {
    float: left;
    width: 91.66%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-column-12-of-12-medium {
    float: left;
    width: 100%; } }

@media screen and (min-width: 940px) {
  .xui-column-12-of-12-wide {
    float: left;
    width: 100%; } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-1-of-12-medium {
    float: left;
    width: calc( (100% - (12/1) * 20px) / 12 * 1); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-1-of-12-wide {
    float: left;
    width: calc( (100% - (12/1) * 20px) / 12 * 1); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-2-of-12-medium {
    float: left;
    width: calc( (100% - (12/2) * 20px) / 12 * 2); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-2-of-12-wide {
    float: left;
    width: calc( (100% - (12/2) * 20px) / 12 * 2); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-3-of-12-medium {
    float: left;
    width: calc( (100% - (12/3) * 20px) / 12 * 3); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-3-of-12-wide {
    float: left;
    width: calc( (100% - (12/3) * 20px) / 12 * 3); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-4-of-12-medium {
    float: left;
    width: calc( (100% - (12/4) * 20px) / 12 * 4); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-4-of-12-wide {
    float: left;
    width: calc( (100% - (12/4) * 20px) / 12 * 4); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-5-of-12-medium {
    float: left;
    width: calc( (100% - (12/5) * 20px) / 12 * 5); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-5-of-12-wide {
    float: left;
    width: calc( (100% - (12/5) * 20px) / 12 * 5); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-6-of-12-medium {
    float: left;
    width: calc( (100% - (12/6) * 20px) / 12 * 6); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-6-of-12-wide {
    float: left;
    width: calc( (100% - (12/6) * 20px) / 12 * 6); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-7-of-12-medium {
    float: left;
    width: calc( (100% - (12/7) * 20px) / 12 * 7); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-7-of-12-wide {
    float: left;
    width: calc( (100% - (12/7) * 20px) / 12 * 7); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-8-of-12-medium {
    float: left;
    width: calc( (100% - (12/8) * 20px) / 12 * 8); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-8-of-12-wide {
    float: left;
    width: calc( (100% - (12/8) * 20px) / 12 * 8); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-9-of-12-medium {
    float: left;
    width: calc( (100% - (12/9) * 20px) / 12 * 9); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-9-of-12-wide {
    float: left;
    width: calc( (100% - (12/9) * 20px) / 12 * 9); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-10-of-12-medium {
    float: left;
    width: calc( (100% - (12/10) * 20px) / 12 * 10); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-10-of-12-wide {
    float: left;
    width: calc( (100% - (12/10) * 20px) / 12 * 10); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-11-of-12-medium {
    float: left;
    width: calc( (100% - (12/11) * 20px) / 12 * 11); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-11-of-12-wide {
    float: left;
    width: calc( (100% - (12/11) * 20px) / 12 * 11); } }

@media screen and (min-width: 520px) and (max-width: 940px) {
  .xui-row-grid > .xui-column-12-of-12-medium {
    float: left;
    width: calc( (100% - (12/12) * 20px) / 12 * 12); } }

@media screen and (min-width: 940px) {
  .xui-row-grid > .xui-column-12-of-12-wide {
    float: left;
    width: calc( (100% - (12/12) * 20px) / 12 * 12); } }
/*# sourceMappingURL=xui.css.map */