/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/*
	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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/*
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
*/
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/*
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
*/
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/*
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
*/
/*
Sorts out alignment for icons in button-like things
*/
/*
Styling for carets in button-like things
*/
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/*
	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;
	}
*/
/*
Applies hover button styling and given contents on hover.
*/
/*
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
*/
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/*
Simulates a border on all sides using box-shadow.

$border-color - The colour of the border
*/
/*
Simulates a border on the top side using box-shadow.

$border-color - The colour of the border
*/
/*
Simulates a border on the right side using box-shadow.

$border-color - The colour of the border
*/
/*
Simulates a border on the bottom side using box-shadow.

$border-color - The colour of the border
*/
/*
Simulates a border on the left side using box-shadow.

$border-color - The colour of the border
*/
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/*
	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;
	}
*/
/*
Should be used with motion animations.
This disables the motion if the user has requested it.

To assess whether or not an animation or transition is a motion animation, see here: https://www.w3.org/TR/WCAG21/#dfn-motion-animation

@param  {Boolean} [$is-motion-essential:false] If set to true, the user's motion preference is always ignored.
  To assess whether or not an animation is essential, see here: https://www.w3.org/TR/WCAG21/#dfn-essential.
@param  {String} [$apply-properties:both] (animation|transition|both) Which css properties should be affected by reduced motion.
*/
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * This source is pre-parsed and looks similar to KSS but is not the same.
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Global animation-related settings.
 */
/* ----- Duration ----- */
/* ----- Easing function ----- */
/* ----- Delay ----- */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * XUI Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
/**
 * Settings for the structure/layout of the Xero design.
 */
/**
 * Typography settings for the Xero design
 * =======================================
 *
 * This file used to have a variety of
 *       measurement units, each for a specific reason:
 *
 *  - rem: unit relative to the user agent's default em.  Used for font sizes to
 *         keep text content relative to browser defaults.
 *  - em: For when we want things relative to the current text context, eg:
 *        margins and line heights (as they are based around the text)
 *  - px: Used for very thin items, like: borders, dividers, radii, and shadows.
 *        ie: scaffolding items that aren't based on text content.
 *
 * We are often given pixel units by design, but for anybody considering the
 * vast array of internet-capable devices out there, we should be more
 * 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 Tokens (v2.2.1)
 * Do not edit directly. Generated on Mon, 11 April 2022, 3:27:04 am UTC
 */
@-webkit-keyframes mp-skeleton-loading {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes mp-skeleton-loading {
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.mp-text-skeleton, .mp-filter-skeleton__control, .mp-card-skeleton__logo, .mp-block-skeleton {
  position: relative;
  background-color: #e6e7e9;
  overflow: hidden;
}
.mp-text-skeleton::after, .mp-filter-skeleton__control::after, .mp-card-skeleton__logo::after, .mp-block-skeleton::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.3)), to(transparent));
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  -webkit-animation: mp-skeleton-loading 1.5s infinite;
          animation: mp-skeleton-loading 1.5s infinite;
}

.mp-data-flow-item--exchange .mp-data-flow-item--three,
.mp-data-flow-item--out .mp-data-flow-item--three, .mp-data-flow-item--exchange .mp-data-flow-item--one,
.mp-data-flow-item--in .mp-data-flow-item--one {
  position: relative;
  margin: 0 12px;
  height: 0;
  border-bottom: 2px solid #80858f;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.mp-data-flow-item--exchange .mp-data-flow-item--three::before,
.mp-data-flow-item--out .mp-data-flow-item--three::before, .mp-data-flow-item--exchange .mp-data-flow-item--one::before,
.mp-data-flow-item--in .mp-data-flow-item--one::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  position: absolute;
  top: -3px;
}
.mp-data-flow-item--exchange .mp-data-flow-item--three::after,
.mp-data-flow-item--out .mp-data-flow-item--three::after, .mp-data-flow-item--exchange .mp-data-flow-item--one::after,
.mp-data-flow-item--in .mp-data-flow-item--one::after {
  content: "";
  display: none;
  position: absolute;
  bottom: calc((100% / 2) - 4px);
  height: 6px;
  width: 6px;
  background: #80858f;
  border-radius: 100%;
}

.mp-data-flow-item--exchange .mp-data-flow-item--one::before,
.mp-data-flow-item--in .mp-data-flow-item--one::before {
  border-right: 8px solid #80858f;
  left: -8px;
}

.mp-data-flow-item--exchange .mp-data-flow-item--three::before,
.mp-data-flow-item--out .mp-data-flow-item--three::before {
  border-left: 8px solid #80858f;
  right: -8px;
}

.mp-data-flow-item--out .mp-data-flow-item--three::after {
  display: block;
  left: 0;
}

.mp-data-flow-item--in .mp-data-flow-item--one::after {
  display: block;
  right: 0;
  left: auto;
}

html,
body,
#mp-root {
  background-color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
}

.mp-root--public {
  margin: 0 auto;
}

.mp-visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

.mp-dark-mode {
  background-color: #000a1e !important;
  color: #ffffff;
}
.mp-dark-mode ::-webkit-input-placeholder {
  color: #ffffff;
}
.mp-dark-mode ::-moz-placeholder {
  color: #ffffff;
}
.mp-dark-mode :-ms-input-placeholder {
  color: #ffffff;
}
.mp-dark-mode ::-ms-input-placeholder {
  color: #ffffff;
}
.mp-dark-mode .xui-loader,
.mp-dark-mode .xui-submenu-uicontrol--icon,
.mp-dark-mode .xui-breadcrumb--icon,
.mp-dark-mode .xui-text-minor,
.mp-dark-mode .xui-text-secondary,
.mp-dark-mode .mp-header__title,
.mp-dark-mode .mp-page-title,
.mp-dark-mode .mp-page-description,
.mp-dark-mode .mp-card,
.mp-dark-mode .mp-data-flow__labels,
.mp-dark-mode .mp-error-heading,
.mp-dark-mode .xui-heading-medium,
.mp-dark-mode input,
.mp-dark-mode ::placeholder {
  color: #ffffff;
}
.mp-dark-mode .mp-card-skeleton__logo,
.mp-dark-mode .mp-text-skeleton {
  background-color: #59606d;
}
.mp-dark-mode .mp-card,
.mp-dark-mode .mp-card-skeleton,
.mp-dark-mode .mp-app-listing-details,
.mp-dark-mode .xui-textinput-borderless-solid {
  background-color: rgba(255, 255, 255, 0.2);
}
.mp-dark-mode .mp-app-listing-details {
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.mp-dark-mode .mp-card:hover {
  -webkit-box-shadow: 0 0 0 1px rgba(172, 172, 172, 0.2), 0 8px 16px 0 rgba(255, 255, 255, 0.3);
          box-shadow: 0 0 0 1px rgba(172, 172, 172, 0.2), 0 8px 16px 0 rgba(255, 255, 255, 0.3);
}
.mp-dark-mode .mp-star--empty {
  color: #ccced2;
}
.mp-dark-mode .xui-icon-color-black-faint {
  fill: #ffffff;
}
.mp-dark-mode .mp-section--info {
  background-color: #154d58;
}
.mp-dark-mode .xui-button-standard {
  background-color: #f2f3f4;
}
.mp-dark-mode .xui-select--content {
  color: #000a1e;
}
.mp-dark-mode .xui-pickitem-is-selected:not(.xui-pickitem-multiselect):not(.xui-pickitem-is-invalid):not(.xui-pickitem-is-disabled) > .xui-pickitem--body {
  color: #80bce4;
}
.mp-dark-mode .mp-external-link,
.mp-dark-mode .mp-category-link,
.mp-dark-mode .xui-breadcrumb--link,
.mp-dark-mode .xui-button-borderless-main {
  color: #a6d0ec;
}
.mp-dark-mode .mp-external-link:hover, .mp-dark-mode .mp-external-link:active, .mp-dark-mode .mp-external-link:visited,
.mp-dark-mode .mp-category-link:hover,
.mp-dark-mode .mp-category-link:active,
.mp-dark-mode .mp-category-link:visited,
.mp-dark-mode .xui-breadcrumb--link:hover,
.mp-dark-mode .xui-breadcrumb--link:active,
.mp-dark-mode .xui-breadcrumb--link:visited,
.mp-dark-mode .xui-button-borderless-main:hover,
.mp-dark-mode .xui-button-borderless-main:active,
.mp-dark-mode .xui-button-borderless-main:visited {
  color: #80bce4;
}
.mp-dark-mode .mp-home-section__link {
  color: #ffffff;
}
.mp-dark-mode .mp-home-section__link:hover, .mp-dark-mode .mp-home-section__link:active, .mp-dark-mode .mp-home-section__link:visited {
  color: rgba(255, 255, 255, 0.75);
}
.mp-dark-mode .mp-external-link.xui-button.xui-button-main {
  color: #ffffff;
}
.mp-dark-mode .mp-footer__topbar,
.mp-dark-mode .mp-footer__bottombar {
  background-color: rgba(255, 255, 255, 0.1);
}
.mp-dark-mode .mp-footer {
  background-color: #000a1e;
}
.mp-dark-mode .mp-footer__body {
  background-color: rgba(255, 255, 255, 0.05);
}
.mp-dark-mode .xui-button-borderless-main.xui-button-is-disabled {
  color: #a6a9b0;
}

.mp-button--transparent {
  background-color: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.mp-main-section {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
}

.mp-main-section--small {
  max-width: 800px;
}

.mp-page-section--landing-page .mp-main-section {
  max-width: none;
}

.xui-pickitem-is-hovered {
  background-color: #e6e7e9;
}

.xui-pickitem-is-hovered.xui-pickitem-is-selected:not(.xui-pickitem-multiselect):not(.xui-pickitem-is-invalid):not(.xui-pickitem-is-disabled) > .xui-pickitem--body,
.xui-pickitem-is-hovered.xui-pickitem-is-selected:not(.xui-pickitem-multiselect):not(.xui-pickitem-is-invalid):not(.xui-pickitem-is-disabled),
.xui-pickitem-is-hovered.xui-pickitem-is-selected:not(.xui-pickitem-multiselect):not(.xui-pickitem-is-invalid):not(.xui-pickitem-is-disabled):hover,
.xui-pickitem-is-hovered.xui-pickitem-is-selected:not(.xui-pickitem-multiselect):not(.xui-pickitem-is-invalid):not(.xui-pickitem-is-disabled):focus {
  color: inherit;
}

.xui-pickitem-is-hovered.xui-pickitem-medium:not(.xui-pickitem-is-horizontal):not(.xui-pickitem-multiselect) > .xui-pickitem--body::before {
  border-left-width: 3px;
  width: 3px;
}

.xui-pickitem-is-hovered:not(.xui-pickitem-multiselect) > .xui-pickitem--body::before {
  border-color: #80858f;
  border-right-width: 0;
  border-style: solid;
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

.mp-app-disclaimer {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.8125rem;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 40px;
  padding: 40px 16px 0;
}

.mp-app-group {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, 100%);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  list-style-type: none;
  margin-top: 12px;
  padding: 0;
}
.mp-app-group__item {
  border: 1px solid transparent;
  border-radius: 3px;
  background-color: #ffffff;
}

.mp-app-group--full {
  display: block;
}

@media screen and (min-width: 420px) {
  .mp-app-group {
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  }
}
@media screen and (min-width: 600px) and (max-width: 1000px) {
  .mp-app-group {
    grid-template-columns: repeat(2, minmax(225px, 1fr));
  }
}
.mp-app-listing-additional-info {
  margin-bottom: 40px;
  padding-top: 40px;
}
.mp-app-listing-additional-info__column-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mp-app-listing-additional-info__column-2 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mp-app-listing-additional-info__row {
  display: block;
}
@media screen and (min-width: 420px) {
  .mp-app-listing-additional-info__column-1 {
    margin-right: 20px;
  }
  .mp-app-listing-additional-info__column-2 {
    margin-left: 20px;
  }
  .mp-app-listing-additional-info__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: wrap;
            flex-direction: wrap;
  }
}

.mp-app-listing-banner {
  height: 110px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-app-listing-banner__image {
  display: block;
  max-width: 70%;
  max-height: 90px;
}

@media screen and (max-width: 800px) {
  .mp-app-listing-banner {
    height: 130px;
  }
}
.mp-app-listing-body__tabs {
  display: none;
  border-bottom: 1px solid #e6e7e9;
}
.mp-app-listing-body__title {
  margin-bottom: 16px;
  margin-top: 40px;
  font-size: 1.0625rem;
  font-weight: 700;
}

@media screen and (min-width: 600px) {
  .mp-app-listing-body__tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.mp-app-listing-connected-details {
  text-align: center;
  background-color: #f2f3f4;
  padding: 24px;
}

.mp-app-listing-connected-details__title {
  margin-bottom: 8px;
  font-weight: 700;
}

.mp-app-listing-connected-details__org-details {
  margin-bottom: 20px;
}

.mp-app-listing-getting-started {
  margin-bottom: 40px;
  padding-top: 40px;
}

.mp-app-listing-header__actions {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
  width: 100%;
}
.mp-app-listing-header__actions-connections {
  text-align: center;
  width: 100%;
}
.mp-app-listing-header__actions-visit-app {
  font-weight: normal;
}
.mp-app-listing-header__category-links {
  font-size: 0.8125rem;
}
.mp-app-listing-header__content {
  margin-top: 24px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.mp-app-listing-header__description {
  margin: 24px 0;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.mp-app-listing-header__developer {
  margin-bottom: 8px;
}
.mp-app-listing-header__logo-wrap {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.mp-app-listing-header__logo {
  width: 100%;
}
.mp-app-listing-header__pill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mp-app-listing-header__review-stars {
  font-size: 1.0625rem;
}
.mp-app-listing-header__title {
  margin: 0 16px 0 0;
  font-size: 1.875rem;
  font-weight: 700;
}
.mp-app-listing-header__title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8px;
}
.mp-app-listing-header__wrap {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (min-width: 600px) {
  .mp-app-listing-header {
    margin-bottom: 20px;
  }
  .mp-app-listing-header__description {
    margin: 32px 0 20px 0;
  }
  .mp-app-listing-header__logo-wrap {
    width: auto;
  }
  .mp-app-listing-header__logo {
    border-radius: 3px;
    height: 160px;
    width: 160px;
  }
  .mp-app-listing-header__content {
    margin: 0;
    padding: 0 20px;
  }
}
@media screen and (min-width: 1000px) {
  .mp-app-listing-header {
    margin-bottom: 0;
  }
  .mp-app-listing-header__actions {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    height: 160px;
    width: 230px;
  }
  .mp-app-listing-header__description {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
}
.mp-app-listing-overview {
  margin-bottom: 40px;
  padding-top: 40px;
}
.mp-app-listing-overview__title {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.3125rem;
  font-weight: 700;
}

.mp-app-listing-region-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(50vh - 61px);
  max-width: 474px;
  margin: 0 auto 32px;
  padding: 32px 64px;
  font-size: 0.9375rem;
  text-align: center;
}

.mp-app-listing-region-select--logged-in {
  height: calc(50vh - 120px);
}

.mp-app-listing-region-select__heading {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  margin-bottom: 12px;
}

.mp-app-listing-region-select__content {
  margin: auto;
}

.mp-app-listing-region-select__description {
  margin-bottom: 20px;
}

.mp-app-listing-reviews {
  margin-bottom: 40px;
  padding-top: 40px;
}
.mp-app-listing-reviews__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mp-app-listing-reviews__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.mp-app-listing-suggestions {
  margin: 0 auto;
  margin-top: 64px;
  max-width: 800px;
  padding: 20px;
}

.mp-app-listing {
  font-size: 0.9375rem;
  margin: 0 auto;
  max-width: 800px;
}

.mp-app-listing__search {
  margin-bottom: 48px;
  margin-top: 12px;
}

.mp-app-listing__bottom-search {
  max-width: 800px;
  margin: auto;
  padding: 0 20px 0 20px;
}

@media screen and (min-width: 600px) {
  .mp-app-listing {
    padding: 0 20px;
  }

  .mp-app-listing__search {
    margin-top: 0;
  }
}
.app-management-plan-details {
  padding: 20px;
}
.app-management-plan-details__separator {
  border: 1px solid #e6e7e9;
  margin: 20px 0;
}
.app-management-plan-details__renewal {
  font-size: 0.9375rem;
  color: #59606d;
}
.app-management-plan-details__renewal .xui-text-emphasis {
  color: initial;
}
.app-management-plan-details__tip {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #80858f;
}
.app-management-plan-details__metered-cost-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}
.app-management-plan-details__metered-cost-right > ul {
  padding-left: 0;
  margin: 0;
  text-align: right;
}
.app-management-plan-details__metered-cost-right > ul > li {
  color: #59606d;
  list-style-type: none;
  font-size: 0.6875rem;
}
.app-management-plan-details__metered-cost-right > ul > li:not(:last-child) {
  margin-bottom: 4px;
}
.app-management-plan-details__metered-cost-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
}
.app-management-plan-details__metered-cost-left > ul {
  padding-left: 0;
  margin: 0;
  text-align: left;
}
.app-management-plan-details__metered-cost-left > ul > li {
  color: #59606d;
  list-style-type: none;
  font-size: 0.6875rem;
}
.app-management-plan-details__metered-cost-left > ul > li:not(:last-child) {
  margin-bottom: 4px;
}
.app-management-plan-details__panel-group > :not(:last-child) {
  margin-bottom: 4px;
}
.app-management-plan-details__info {
  background-color: #ffffff;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
}

.mp-app-picklist-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-app-picklist-item__content {
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-app-picklist-item__title,
.mp-app-picklist-item__funktions {
  display: inline-block;
}

.mp-app-picklist-item__title {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}

.mp-app-picklist-item__rating {
  margin-top: 8px;
}

.mp-app-picklist-item__funktions {
  margin-left: 4px;
}

.mp-breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: -4px;
}
.mp-breadcrumbs .mp-breadcrumbs--single .xui-breadcrumb:first-of-type .xui-breadcrumb--link {
  padding-left: 0;
}
.mp-breadcrumbs .xui-breadcrumb,
.mp-breadcrumbs .xui-breadcrumb--link {
  font-weight: 400;
}
.mp-breadcrumbs .xui-breadcrumb--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.0625rem;
}
@media screen and (max-width: 800px) {
  .mp-breadcrumbs .mp-breadcrumbs--non-mobile {
    display: none;
  }
}

.mp-card-logo {
  height: 80px;
  color: #ffffff;
  border-radius: 3px 3px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-card-logo--small {
  height: 100%;
  width: 30%;
  min-width: 80px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 3px 0 0 3px;
}

.mp-card-logo--large {
  height: 145px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mp-card-logo--full {
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-radius: 3px 0 0 3px;
}

.mp-card-logo--square {
  height: 64px;
  width: 80px;
  border-radius: 3px;
}

.mp-card-logo__image {
  margin-left: 16px;
  display: block;
  max-width: 70%;
  max-height: 34px;
}
.mp-card-logo--large .mp-card-logo__image, .mp-card-logo--small .mp-card-logo__image, .mp-card-logo--full .mp-card-logo__image {
  margin-left: 0;
}

@media screen and (max-width: 600px) {
  .mp-card-logo--full {
    width: 30%;
    min-width: 80px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}
@media screen and (max-width: 420px) {
  .mp-card-logo--medium {
    height: 100%;
    width: 30%;
    min-width: 80px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 3px 0 0 3px;
  }
  .mp-card-logo--medium .mp-card-logo__image {
    margin-left: 0;
  }
}
@media screen and (min-width: 600px) and (max-width: 800px) {
  .mp-card-logo--large > .mp-card-logo__image {
    height: 25%;
    max-width: 100%;
    max-height: 48px;
  }
}
@media screen and (min-width: 800px) and (max-width: 1000px) {
  .mp-card-logo--large > .mp-card-logo__image {
    height: 100%;
    max-width: 100%;
    max-height: 48px;
  }

  .mp-card-logo--medium > .mp-card-logo__image {
    max-width: 100%;
    max-height: 48px;
  }
}
.card-radio-expire {
  font-size: 0.9375rem;
  text-align: right;
}

.card-radio-number {
  font-size: 0.9375rem;
}

.card-brand {
  font-size: 32px;
  width: 32px;
}

.mp-card-skeleton {
  height: 282px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
  display: block;
  text-decoration: none;
}

.mp-card-skeleton__logo {
  height: 80px;
  border-radius: 3px 3px 0 0;
}

.mp-card-skeleton__content {
  padding: 16px;
}

.mp-card {
  height: 282px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2);
  display: block;
  text-decoration: none;
  color: #000a1e;
  -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
  cursor: pointer;
}
.mp-card:hover, .mp-card:focus-within {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
}

.mp-card:hover .mp-link,
.mp-card:hover .mp-card__description {
  color: #003c64;
}

.mp-card__review {
  margin-bottom: 8px;
}

.mp-card__container {
  position: relative;
}

.mp-card__content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.mp-card__content {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  padding: 16px;
  height: 202px;
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow: hidden;
}
.mp-card__content .mp-link {
  text-decoration: none;
  color: #000a1e;
}

.mp-card__icon {
  position: absolute;
  top: -20px;
  left: 6px;
}

.mp-card__title,
.mp-card__functions {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.mp-card__functions--mobile {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: none;
}

.mp-card__title {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  margin-top: 0;
}

.mp-card__description {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  font-size: 0.8125rem;
  display: -webkit-box;
  overflow: hidden;
  max-height: 95px;
}

.mp-card--small {
  height: 75px;
}
.mp-card--small .mp-card__content {
  padding: 8px 12px;
  height: 100%;
  width: 145px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mp-card--small .mp-card__icon {
  top: -16px;
  right: -16px;
  left: unset;
}
.mp-card--small .mp-card__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.mp-card--small .mp-card__title,
.mp-card--small .mp-card__functions {
  margin-bottom: 0;
}
@media screen and (max-width: 350px) {
  .mp-card--small {
    height: 75px;
  }
  .mp-card--small .mp-card__content {
    padding-top: 8px;
  }
}
@media screen and (max-width: 420px) {
  .mp-card--small {
    height: 85px;
  }
  .mp-card--small .mp-card__content {
    padding-top: 12px;
  }
}

@media screen and (max-width: 350px) {
  .mp-card--medium {
    height: 75px;
  }
  .mp-card--medium .mp-card__content {
    padding-top: 8px;
  }
}
@media screen and (max-width: 420px) {
  .mp-card--medium {
    height: 85px;
  }
  .mp-card--medium .mp-card__content {
    padding: 12px 12px 8px;
    height: 100%;
    width: 145px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .mp-card--medium .mp-card__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }
  .mp-card--medium .mp-card__title {
    margin-bottom: 0;
  }
  .mp-card--medium .mp-card__functions--mobile {
    display: block;
  }
  .mp-card--medium .mp-card__icon {
    top: -16px;
    right: -16px;
    left: unset;
  }
  .mp-card--medium .mp-card__functions,
.mp-card--medium .mp-card__description {
    display: none;
  }
}

.mp-card--large {
  height: 345px;
}

.mp-card--full {
  display: block;
  height: 90px;
  margin-bottom: 20px;
}
.mp-card--full .mp-card__icon {
  top: -16px;
  right: -16px;
  left: unset;
}
.mp-card--full .mp-card__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.mp-card--full .mp-card__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
}
.mp-card--full .mp-card__content-container {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
  padding: 12px 24px 12px 40px;
  min-width: 0;
}
.mp-card--full .mp-card__content {
  height: unset;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding: 0;
}
.mp-card--full .mp-card__title,
.mp-card--full .mp-card__functions {
  margin-bottom: 0;
}
.mp-card--full .mp-card__functions {
  margin-left: 12px;
}
.mp-card--full .mp-card__review {
  margin-left: 16px;
}
.mp-card--full .mp-card__description {
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 350px) {
  .mp-card--full {
    height: 75px;
  }
}
@media screen and (max-width: 420px) {
  .mp-card--full {
    height: 85px;
  }
}
@media screen and (max-width: 600px) {
  .mp-card--full {
    height: 85px;
  }
  .mp-card--full .mp-card__content-container {
    padding: 8px 12px;
    width: 145px;
  }
  .mp-card--full .mp-card__content {
    display: block;
    margin-bottom: 0;
  }
  .mp-card--full .mp-card__title,
.mp-card--full .mp-card__functions {
    margin-bottom: 0;
    margin-left: 0;
  }
  .mp-card--full .mp-card__functions--mobile {
    display: block;
  }
  .mp-card--full .mp-card__review {
    margin-left: 0;
  }
  .mp-card--full .mp-card__functions,
.mp-card--full .mp-card__description {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .mp-card--full {
    height: 115px;
  }
  .mp-card--full .mp-card__content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .mp-card--full .mp-card__title {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    margin-bottom: 4px;
  }
  .mp-card--full .mp-card__functions {
    margin-left: 0;
  }
}
@media screen and (max-width: 1000px) {
  .mp-card--full .mp-card__content-container {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
  }
}

.mp-carousel-dots,
.mp-carousel-thumbnails {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  list-style: none;
  padding: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mp-carousel-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.mp-carousel-dot {
  display: inline-block;
  background-color: #e6e7e9;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 8px;
  opacity: 0.5;
}
.slick-active .mp-carousel-dot, .mp-carousel-dot:hover {
  opacity: 1;
}

.mp-carousel__image-wrapper {
  height: 400px;
}

.mp-carousel__image {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50%;
     object-position: 50%;
}

.mp-carousel__thumbnail {
  height: 60px;
  width: 80px;
  border: 1px solid #ccced2;
  margin-right: 8px;
  padding: 0;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50%;
     object-position: 50%;
  cursor: pointer;
}
.mp-carousel__thumbnail.mp-last {
  margin-right: 0;
}
.mp-carousel__thumbnail img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50%;
     object-position: 50%;
  opacity: 0.5;
}
.mp-carousel__thumbnail img:hover, .slick-active .mp-carousel__thumbnail img {
  opacity: 1;
}

.mp-change-plan-modal__change-summary {
  background-color: #f2f3f4;
  padding: 15px;
  border-radius: 1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mp-change-plan-modal__change-summary h3 {
  padding: 0;
  margin: 0 0 16px 0;
}
.mp-change-plan-modal__change-summary__plan-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 0.9375rem;
}
.mp-change-plan-modal__change-summary__plan-info__emphasise {
  font-weight: 700;
  line-height: 1.5rem;
}
.mp-change-plan-modal__change-summary__plan-info__total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ccced2;
}
.mp-change-plan-modal__change-summary__plan-info__tax {
  margin-top: 4px;
}
.mp-change-plan-modal__change-summary__plan-info__metered {
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
  line-height: 1.5;
  margin-top: 4px;
}
.mp-change-plan-modal__change-summary__plan-info__metered > ul {
  padding-left: 0;
  margin: 0;
  text-align: right;
}
.mp-change-plan-modal__change-summary__plan-info__metered > ul > li {
  color: #59606d;
  list-style-type: none;
  font-size: 0.8125rem;
}
.mp-change-plan-modal__change-summary__plan-info__metered > ul > li:not(:last-child) {
  margin-bottom: 4px;
}
.mp-change-plan-modal__change-summary__plan-breakdown {
  padding-left: 0;
  margin: 0;
  text-align: right;
}
.mp-change-plan-modal__change-summary__plan-breakdown__line-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #59606d;
  font-size: 0.9375rem;
  margin-top: 4px;
}
.mp-change-plan-modal__change-summary__plan-breakdown > li {
  list-style-type: none;
}
.mp-change-plan-modal__change-summary__plan-breakdown > li:not(:last-child) {
  margin-bottom: 4px;
}
.mp-change-plan-modal__change-summary__current-plan {
  border-right: 1px solid #ccced2;
  padding-right: 40px;
  width: 50%;
}
.mp-change-plan-modal__change-summary__current-plan h3 {
  color: #404756;
}
.mp-change-plan-modal__change-summary__current-plan span {
  color: #59606d;
}
.mp-change-plan-modal__change-summary__current-plan .mp-change-plan-modal__change-summary__plan-info {
  color: #404756;
}
.mp-change-plan-modal__change-summary .xui-iconwrapper {
  background-color: #f2f3f4;
  border: 1px solid #ccced2;
  border-radius: 50%;
  position: absolute;
  margin-top: -36px;
  left: calc(50% - 15px);
  top: calc(50% - 45px);
}
.mp-change-plan-modal__change-summary__new-plan {
  width: 50%;
  padding-left: 40px;
}
.mp-change-plan-modal__change-summary__new-plan h3 {
  color: #000a1e;
}
.mp-change-plan-modal__change-summary__new-plan h3 span.notes {
  margin-left: 8px;
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.8125rem;
  font-weight: 400;
}
.mp-change-plan-modal__change-summary__new-plan span {
  color: #59606d;
}
.mp-change-plan-modal__change-summary__new-plan .mp-change-plan-modal__change-summary__plan-info {
  color: #000a1e;
}
.mp-change-plan-modal__downgrade-warning .xui-banner--message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mp-change-plan-modal__downgrade-warning__banner-icon {
  fill: #59606d;
  margin-right: 12px;
}

.mp-check-circular {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 2px solid #ccced2;
  color: #ffffff;
}

.mp-check-circular--checked {
  background-color: #0078c8;
  border-color: #0078c8;
}

.mp-clamped-text__wrap {
  opacity: 0;
}
.mp-clamped-text__wrap.active {
  opacity: 1;
  -webkit-transition: 0.15s;
  transition: 0.15s;
}
.mp-clamped-text__wrap.contrast .mp-clamped-text__link {
  color: #000a1e;
}
.mp-clamped-text__content {
  overflow-y: hidden;
  overflow-wrap: break-word;
}
.mp-clamped-text__link {
  display: inline-block;
  margin-top: 8px;
}

.mp-collection-section {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-collection-section {
    padding: 128px 20px;
  }
}
@media screen and (min-width: 1600px) {
  .mp-collection-section {
    padding: 128px 0;
  }
}

.mp-collection-section__link {
  font-size: 0.8125rem;
  min-width: 75px;
}

.mp-cookie-banner {
  background-color: #0078c8;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  font-size: 0.8125rem;
}

.mp-cookie-banner__content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: #ffffff;
}

.mp-cookie-banner__description {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  margin-right: 12px;
  font-size: 0.9375rem;
}

@media screen and (max-width: 600px) {
  .mp-cookie-banner__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .mp-cookie-banner__description {
    margin-bottom: 12px;
    padding-right: 0;
  }
}
.country-select {
  font-size: 0.9375rem;
}

.mp-coveo-search {
  width: 100%;
}

.mp-coveo-no-suggestions {
  font-size: 0.8125rem;
}

.credit-card-input .stripeElement {
  border: 1px solid #59606d;
  background-color: transparent;
  border-radius: 3px;
  margin: 0;
  outline: 0;
  padding-top: 10px;
  padding-left: 7px;
  padding-bottom: 10px;
  font-size: 15px;
  line-height: 24px;
  min-height: 40px;
}
.credit-card-input .stripeElement.xui-textinput {
  display: block;
}
.credit-card-input .stripeElement--error {
  border: 1px solid red;
  color: black;
}
.credit-card-input .stripeElement--disabled {
  background-color: #e6e7e9;
}
.credit-card-input .expiry-date-and-cvc-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 20px;
}
.credit-card-input .expiry-date-and-cvc-container > div {
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.credit-card-input .xui-form-inline .xui-validation {
  margin: -30px 0 32px;
}

.mp-data-flow-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-data-flow-item .mp-data-flow-item--one {
  text-align: left;
}
.mp-data-flow-item .mp-data-flow-item--two {
  text-align: center;
}
.mp-data-flow-item .mp-data-flow-item--three {
  text-align: right;
}

.mp-data-flow-item--exchange .mp-data-flow-item--one,
.mp-data-flow-item--in .mp-data-flow-item--one, .mp-data-flow-item--exchange .mp-data-flow-item--three,
.mp-data-flow-item--out .mp-data-flow-item--three {
  position: relative;
  margin: 0 12px;
  height: 0;
  border-bottom: 2px solid #80858f;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.mp-data-flow-item--exchange .mp-data-flow-item--one::before,
.mp-data-flow-item--in .mp-data-flow-item--one::before, .mp-data-flow-item--exchange .mp-data-flow-item--three::before,
.mp-data-flow-item--out .mp-data-flow-item--three::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  position: absolute;
  top: -3px;
}
.mp-data-flow-item--exchange .mp-data-flow-item--one::after,
.mp-data-flow-item--in .mp-data-flow-item--one::after, .mp-data-flow-item--exchange .mp-data-flow-item--three::after,
.mp-data-flow-item--out .mp-data-flow-item--three::after {
  content: "";
  display: none;
  position: absolute;
  bottom: calc((100% / 2) - 4px);
  height: 6px;
  width: 6px;
  background: #80858f;
  border-radius: 100%;
}

.mp-data-flow-item--exchange .mp-data-flow-item--one::before,
.mp-data-flow-item--in .mp-data-flow-item--one::before {
  border-right: 8px solid #80858f;
  left: -8px;
}

.mp-data-flow-item--exchange .mp-data-flow-item--three::before,
.mp-data-flow-item--out .mp-data-flow-item--three::before {
  border-left: 8px solid #80858f;
  right: -8px;
}

.mp-data-flow-item--out .mp-data-flow-item--three::after {
  display: block;
  left: 0;
}

.mp-data-flow-item--in .mp-data-flow-item--one::after {
  display: block;
  right: 0;
  left: auto;
}

.mp-data-flow__labels {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-weight: 700;
  color: rgba(0, 10, 30, 0.75);
}

/*
NOTES - WHY DOES THIS FILE EXIST?
The upstream XLabsSupportingInfoPanel component is not exported as ES5 module, so we can't import it directly.
Tweaking `transpileDependencies` in jest.config.js didn't work either.
And even if the tests are removed, the project still can't be built in the pipeline.
Instead, we have to copy the source code into this file, and then export it as a module.
Once the upstream component is added into XUI, we can remove this file.
 */
.xlabs-supportinginfopanel {
  color: rgba(0, 10, 30, 0.75);
  background-color: #f2f3f4;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 12px;
}
.xlabs-supportinginfopanel a {
  color: inherit;
}
.xlabs-supportinginfopanel a:hover, .xlabs-supportinginfopanel a:focus {
  color: #0078c8;
}

.xlabs-supportinginfopanel-icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-right: 8px;
}

.xlabs-supportinginfopanel-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.xlabs-supportinginfopanel-textcontent--hasicon {
  margin-top: 2px;
}

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

.mp-error-message-content {
  margin: 20px auto;
  padding: 0 16px;
  text-align: center;
  color: #404756;
}

.mp-error-panel {
  height: calc(100vh - 61px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mp-error-panel--logged-in {
  height: calc(100vh - 120px);
}

.mp-error-panel__content {
  max-width: 50%;
  text-align: center;
  padding: 0 16px;
  margin: auto;
}

.mp-error-panel__heading {
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  font-variant-numeric: proportional-nums;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.75rem;
  color: #404756;
  margin-bottom: 20px;
}

.mp-payment-failed-banner {
  padding: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.mp-payment-failed-banner__heading {
  font-weight: bold;
}
.mp-payment-failed-banner__button {
  min-width: 150px;
}
.mp-payment-failed-banner__button a {
  padding: 0;
}

.mp-filter-select {
  font-size: 0.8125rem;
}

.mp-filter-select--disabled,
.mp-filter-select--disabled .xui-select--content {
  color: #a6a9b0;
  -webkit-text-fill-color: #a6a9b0;
}
.mp-filter-select--disabled .xui-select--caret > .xui-icon {
  fill: #a6a9b0;
}

.mp-filter-select__label {
  font-weight: 700;
}

.mp-filter-select__button {
  background-color: rgba(0, 10, 30, 0.05);
  border-color: transparent;
  margin-top: 8px;
}

.mp-filter-select__app-count {
  font-size: 0.6875rem;
  color: #000a1e;
}
.xui-pickitem-is-selected .mp-filter-select__app-count {
  color: #0078c8;
}

.mp-filter-select-dropdown {
  font-size: 0.8125rem;
}
.mp-filter-select-dropdown .xui-pickitem--text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 0.8125rem;
}

.mp-filter-skeleton__control {
  border-radius: 3px;
  margin-top: 8px;
  height: 40px;
}

.mp-footer-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 1200px;
  margin: 0 auto 48px auto;
}

.mp-footer-nav__list {
  width: 100%;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-left: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.mp-footer-nav__list-group {
  margin-right: 20px;
  list-style-type: none;
  min-width: 140px;
}

.mp-footer-nav__list-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.mp-footer-nav__list-items {
  padding: 0;
  color: rgba(255, 255, 255, 0.65);
}

.mp-footer-nav__list-item {
  list-style-type: none;
  margin: 4px 0;
}

.mp-footer-nav__list-item-link {
  color: rgba(255, 255, 255, 0.65);
}
.mp-footer-nav__list-item-link:hover, .mp-footer-nav__list-item-link:active, .mp-footer-nav__list-item-link:focus {
  color: #ffffff;
}

.mp-footer-nav__list-heading-link {
  color: #ffffff;
}
.mp-footer-nav__list-heading-link:hover, .mp-footer-nav__list-heading-link:active, .mp-footer-nav__list-heading-link:focus {
  color: rgba(255, 255, 255, 0.65);
}

.mp-footer-nav__external {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px;
}

.mp-footer-nav__social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 20px;
}

.mp-footer-nav__social-link {
  margin: 0 16px;
}

@media screen and (max-width: 1200px) {
  .mp-footer-nav__list-group {
    min-width: 100px;
  }
}
@media screen and (max-width: 1000px) {
  .mp-footer-nav {
    margin-bottom: 20px;
  }

  .mp-footer-nav__list {
    margin: 0;
  }

  .mp-footer-nav__list-group-external {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 16px;
    margin-right: 0;
  }

  .mp-footer-nav__external {
    margin: 12px 16px 0 16px;
  }
}
@media screen and (max-width: 800px) {
  .mp-footer-nav__list {
    display: grid;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-auto-flow: column;
    grid-template-columns: 50% 50%;
  }

  .mp-footer-nav__list-group {
    margin-right: 0;
  }

  .mp-footer-nav__list-group-external {
    grid-column: 1/span 2;
    grid-row-start: 4;
  }

  .mp-footer-nav__social-link {
    margin: 0 8px;
  }
}
.mp-footer {
  width: 100%;
  font-size: 0.8125rem;
  color: #ffffff;
}

.mp-footer__topbar {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px 0;
  background-color: #2a3b4c;
  min-height: 90px;
}

.mp-footer__body {
  padding: 32px 0;
  background-color: #31465a;
}

.mp-footer__bottombar {
  padding: 20px 0;
  background-color: #2a3b4c;
  min-height: 175px;
}

.mp-footer__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.mp-footer__content--center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-footer__topbar-text {
  margin-right: 16px;
}

.mp-footer__topbar-link {
  color: #80bce4;
}
.mp-footer__topbar-link:hover, .mp-footer__topbar-link:active, .mp-footer__topbar-link:focus {
  color: #a6d0ec;
}

.mp-footer__logo__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 32px 0;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

.mp-footer__logo {
  margin-right: 24px;
}

.mp-footer__title {
  margin: 0;
  margin-left: 12px;
  margin-right: 24px;
}

.mp-footer__title__tagline {
  margin: 8px 0;
}

.mp-footer__disclaimer {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  font-size: 0.8125rem;
  margin-right: 20px;
}

.mp-footer__disclaimer__actions {
  margin-bottom: 16px;
}

.mp-footer__link {
  color: rgba(255, 255, 255, 0.75);
  margin-right: 16px;
}
.mp-footer__link:hover, .mp-footer__link:active, .mp-footer__link:focus {
  color: #ffffff;
}

@media screen and (max-width: 1000px) {
  .mp-footer__logo__content {
    margin: 16px 0;
  }
}
@media screen and (max-width: 800px) {
  .mp-footer__bottombar > .mp-footer__content {
    display: block;
  }

  .mp-footer__region {
    margin-top: 16px;
  }

  .mp-footer__disclaimer {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  .mp-footer__disclaimer__actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 600px) {
  .mp-footer__topbar > .mp-footer__content {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

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

  .mp-footer__disclaimer {
    margin-right: 0;
  }

  .mp-footer__region {
    width: 100%;
  }
}
.mp-get-app-button {
  border: 1px solid #0078c8;
}
.mp-get-app-button__content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-get-app-button__content__logo {
  border-radius: 50%;
  width: 48px;
  -webkit-box-shadow: 0 0 0 2px #ffffff;
          box-shadow: 0 0 0 2px #ffffff;
  background-color: #ffffff;
}
.mp-get-app-button__content__text {
  font-weight: 700;
  margin-left: 8px;
  color: #000a1e;
}
.mp-get-app-button__get-this-app {
  width: 100%;
}

.mp-grid-item--first {
  grid-area: grid-1;
}

.mp-grid-item--second {
  grid-area: grid-2;
}

.mp-grid-item--third {
  grid-area: grid-3;
}

.mp-grid-item--fourth {
  grid-area: grid-4;
}

.mp-grid-item--align-center {
  -ms-flex-item-align: center;
      align-self: center;
}

@media screen and (max-width: 1000px) {
  .mp-grid-item--third,
.mp-grid-item--fourth {
    display: block;
    width: 225px;
  }
}
@media screen and (max-width: 420px) {
  .mp-grid-item--third,
.mp-grid-item--fourth {
    display: block;
    width: 100%;
  }
}
.mp-grid-section {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, minmax(225px, 1fr));
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.mp-grid-section--single {
  grid-template-areas: "grid-1 grid-1 grid-1 grid-4";
}

.mp-grid-section--double {
  grid-template-areas: "grid-1 grid-1 grid-3 grid-4";
}

@media screen and (max-width: 1000px) {
  .mp-grid-section {
    display: block;
  }
}
@media screen and (max-width: 420px) {
  .mp-grid-section {
    display: block;
    width: 100%;
  }
}
.mp-highlight-section {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-highlight-section {
    padding: 128px 20px;
  }
}
@media screen and (min-width: 1600px) {
  .mp-highlight-section {
    padding: 128px 0;
  }
}
.mp-highlight-section__title {
  margin-top: 0;
  margin-bottom: 20px;
}
.mp-highlight-section__description {
  font-size: 1.3125rem;
  color: #59606d;
  margin-bottom: 40px;
}
.mp-highlight-section__list {
  margin-left: 12px;
  padding-left: 0;
}
.mp-highlight-section__list-item {
  font-size: 1.3125rem;
  color: #59606d;
  list-style-type: none;
  margin-top: 20px;
}
.mp-highlight-section__list-item:first-child {
  margin-top: 0;
}
.mp-highlight-section__list-item-icon {
  margin-right: 32px;
}
.mp-highlight-section__image-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-highlight-section__image-column-desktop {
  display: none;
}
@media screen and (min-width: 1000px) {
  .mp-highlight-section__image-column-desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.mp-highlight-section__image-column-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1000px) {
  .mp-highlight-section__image-column-mobile {
    display: none;
  }
}
.mp-highlight-section__image {
  max-width: 100%;
  max-height: 100%;
}

.mp-home-banner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: center;
      align-content: center;
  width: 100%;
  height: 130px;
  margin-right: 20px;
  color: #ffffff;
  text-decoration: none;
  -webkit-transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: -webkit-box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out;
  transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out;
}
.mp-home-banner:hover, .mp-home-banner:focus, .mp-home-banner:active {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
  color: #ffffff;
}
.mp-home-banner:visited {
  color: #ffffff;
}
.mp-home-banner:last-of-type {
  margin-right: 0;
}

.mp-home-banner__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px 20px 20px 32px;
  position: relative;
  width: 60%;
}

.mp-home-banner__description {
  font-size: 14px;
}

.mp-home-banner__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50%;
     object-position: 50%;
}

.mp-home-banner__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-home-banner__logo-image {
  height: 100%;
  padding: 40px;
  max-width: 70%;
}

.mp-home-banner__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

@media screen and (max-width: 800px) {
  .mp-home-banner__details {
    width: 70%;
  }

  .mp-home-banner {
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 420px) {
  .mp-home-banner__details {
    width: 90%;
  }
}
.mp-home-search {
  width: 100%;
  background-color: rgba(166, 208, 236, 0.25);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-home-search__wrapper {
  width: 100%;
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-home-search__content {
  margin: auto;
  text-align: left;
  padding: 48px 20px;
  width: 100%;
}

.mp-home-search__heading {
  font-size: 1.875rem;
  line-height: 2.75rem;
  font-size: 44px;
  line-height: 64px;
  margin-bottom: 16px;
  margin-top: 0;
  color: #003c64;
}

.mp-home-search__sub-heading {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-size: 1.3125rem;
  margin-bottom: 16px;
  margin-top: 0;
  color: #003c64;
}

.mp-home-search__logo {
  display: none;
  width: 50%;
}

@media screen and (min-width: 600px) {
  .mp-home-search__heading {
    font-size: 3rem;
    line-height: 4.5rem;
    margin-bottom: 16px;
  }

  .mp-home-search__sub-heading {
    font-size: 1.0625rem;
    line-height: 1.75rem;
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 800px) {
  .mp-home-search__content {
    padding: 64px 20px 64px 20px;
    text-align: left;
    width: 50%;
  }

  .mp-home-search__heading {
    font-size: 1.875rem;
    line-height: 2.75rem;
    margin-bottom: 8px;
  }

  .mp-home-search__sub-heading {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    margin-bottom: 8px;
  }

  .mp-home-search__logo {
    display: block;
    padding: 32px 20px;
  }
}
@media screen and (min-width: 1000px) {
  .mp-home-search__heading {
    font-size: 3rem;
    line-height: 4.5rem;
    margin-bottom: 0;
  }

  .mp-home-search__sub-heading {
    font-size: 1.0625rem;
    line-height: 1.75rem;
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1200px) {
  .mp-home-search__heading {
    margin-bottom: 16px;
  }

  .mp-home-search__content {
    padding: 64px 12px 64px 20px;
  }

  .mp-home-search__logo {
    padding: 48px 20px 48px 12px;
  }
}
.mp-home-section-skeleton {
  margin-top: 32px;
}
.mp-home-section-skeleton:first-of-type {
  margin-top: 0;
}
.mp-home-section-skeleton__banner-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 800px) {
  .mp-home-section-skeleton__banner-section {
    display: block;
  }
}
.mp-home-section-skeleton__banner {
  width: 100%;
  height: 130px;
  margin-right: 20px;
}
.mp-home-section-skeleton__banner:last-of-type {
  margin-right: 0;
}
@media screen and (max-width: 800px) {
  .mp-home-section-skeleton__banner {
    margin-bottom: 16px;
  }
}
.mp-home-section-skeleton__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.mp-home-section-skeleton__header_title {
  margin: 14px 0;
  height: 20px;
  width: 120px;
}
.mp-home-section-skeleton__header_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-home-section-skeleton__header_link_content {
  height: 15px;
  width: 40px;
}

.mp-home-section--banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.mp-home-section__link {
  font-size: 0.8125rem;
  min-width: 75px;
}

@media screen and (max-width: 800px) {
  .mp-home-section--banner {
    display: block;
  }
}
.mp-icon-skeleton {
  color: #e6e7e9;
}

.invoice-table {
  font-size: 0.9375rem;
}
.invoice-table .xui-readonlytable--sortbutton {
  width: auto;
  min-height: 40px;
}
.invoice-table td:nth-child(2) span:first-child {
  margin-right: 12px;
}
.invoice-table-download {
  text-decoration: none;
  color: #000a1e;
}
.invoice-table-download-items span {
  padding-left: 0 !important;
}
.invoice-table-download-items span div:first-child {
  margin-right: 4px;
}

.mp-landing-page-header {
  background-color: rgba(166, 208, 236, 0.25);
}
.mp-landing-page-header__wrapper {
  max-width: 1200px;
  margin: auto;
}
.mp-landing-page-header__title-column {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-landing-page-header__title-column {
    padding: 64px 20px;
  }
}
@media screen and (min-width: 1000px) and (min-width: 1600px) {
  .mp-landing-page-header__title-column {
    padding: 64px 0;
  }
}
.mp-landing-page-header__title {
  margin-top: 0;
  margin-bottom: 20px;
  color: #003c64;
}
@media screen and (min-width: 1000px) {
  .mp-landing-page-header__title {
    margin-bottom: 32px;
  }
}
.mp-landing-page-header__subtitle {
  font-size: 1.3125rem;
  color: #59606d;
}
.mp-landing-page-header__image-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px 20px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-landing-page-header__image-column {
    padding: 64px;
  }
}
.mp-landing-page-header__image {
  max-height: 100%;
  max-width: 100%;
}

.mp-landing-page-section__blue {
  background-color: rgba(166, 208, 236, 0.25);
}

.mp-page-banner-skeleton {
  margin-top: 16px;
  width: 100%;
  height: 240px;
}

.mp-logged-in-page-header .xui-pageheading--title {
  padding-right: 0;
}
.mp-logged-in-page-header--full-variant {
  display: none;
}
.mp-logged-in-page-header__action--full {
  display: none;
}
@media screen and (min-width: 420px) {
  .mp-logged-in-page-header__action--mobile {
    display: none;
  }
  .mp-logged-in-page-header__action--full {
    display: inline;
  }
}
@media screen and (min-width: 800px) {
  .mp-logged-in-page-header--mobile-variant {
    display: none;
  }
  .mp-logged-in-page-header--full-variant {
    display: block;
  }
}

.mp-longform-content-section {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-longform-content-section {
    padding: 128px 20px;
  }
}
@media screen and (min-width: 1600px) {
  .mp-longform-content-section {
    padding: 128px 0;
  }
}
.mp-longform-content-section h1,
.mp-longform-content-section h2,
.mp-longform-content-section h3,
.mp-longform-content-section h4,
.mp-longform-content-section h5,
.mp-longform-content-section h6 {
  margin-top: 32px;
}
.mp-longform-content-section :first-child {
  margin-top: 0;
}
.mp-longform-content-section p,
.mp-longform-content-section li {
  font-size: 1.0625rem;
  color: #59606d;
}
.mp-longform-content-section img {
  max-width: 100%;
}

.mp-mobile-side-nav__mask {
  -webkit-box-pack: left;
      -ms-flex-pack: left;
          justify-content: left;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
}

.mp-mobile-side-nav__modal {
  min-height: 100%;
  border-radius: 0;
  margin-bottom: 0;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.mp-mobile-side-nav__modal > .xui-modal--header {
  display: none;
}

.mp-motivate-section {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-motivate-section {
    padding: 128px 20px;
  }
}
@media screen and (min-width: 1600px) {
  .mp-motivate-section {
    padding: 128px 0;
  }
}
.mp-motivate-section__title {
  margin-top: 0;
  margin-bottom: 20px;
}
.mp-motivate-section__description {
  font-size: 1.3125rem;
  color: #59606d;
  margin-bottom: 40px;
}
.mp-motivate-section__button {
  margin-bottom: 20px;
}
.mp-motivate-section__button .xui-icon {
  -webkit-transform: rotateZ(270deg);
          transform: rotateZ(270deg);
}
@media screen and (min-width: 1000px) {
  .mp-motivate-section__button {
    margin-bottom: 0;
  }
}
.mp-motivate-section__image-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-motivate-section__image-column-desktop {
  display: none;
}
@media screen and (min-width: 1000px) {
  .mp-motivate-section__image-column-desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.mp-motivate-section__image-column-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 1000px) {
  .mp-motivate-section__image-column-mobile {
    display: none;
  }
}
.mp-motivate-section__image {
  max-width: 100%;
  max-height: 100%;
}

.mp-link--full {
  width: 100%;
  margin-bottom: 3%;
}

.mp-link--block {
  display: block;
}

.mp-link--inverted {
  color: #ffffff;
}
.mp-link--inverted:hover {
  color: #a6d0ec;
}

.mp-link--disabled {
  pointer-events: none;
}

.mp-overflow-dropdown {
  background: white;
  font-size: 0.9375rem;
}
.mp-overflow-dropdown__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.mp-page-banner {
  position: relative;
}

.mp-page-banner--image {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50%;
     object-position: 50%;
}

.mp-page-banner__details {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 40px 0 40px 64px;
  width: 30%;
}

.mp-page-banner__title {
  color: #ffffff;
  font-size: 3rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 1000px) {
  .mp-page-banner__details {
    width: 40%;
  }
}
@media screen and (max-width: 800px) {
  .mp-page-banner__details {
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .mp-page-banner__details {
    width: 70%;
  }
}
@media screen and (max-width: 420px) {
  .mp-page-banner__details {
    padding: 40px 0 40px 32px;
    width: 90%;
  }
}
.mp-page-description {
  font-size: 0.9375rem;
  line-height: 1.3077;
  color: #404756;
}

.mp-page-description--long {
  padding: 0 64px;
  margin: 40px 0;
  color: #000a1e;
}

@media (max-width: 800px) {
  .mp-page-description--long {
    padding: 0;
  }
}
.mp-page-header .xui-pageheading--secondarytitle {
  padding-right: 0;
}
.mp-page-header .xui-pageheading--leftcontent {
  padding-top: 10px;
  padding-bottom: 10px;
}
.mp-page-header .xui-pageheading--title {
  padding-right: 0;
}
.mp-page-header__mobile-action-nav {
  margin-right: 4px;
}
.mp-page-header__logo {
  display: block;
}
.mp-page-header__login-button, .mp-page-header__trial-button, .mp-page-header--full-variant {
  display: none;
}
@media screen and (min-width: 800px) {
  .mp-page-header__mobile-action-overflow, .mp-page-header__mobile-action-nav, .mp-page-header--mobile-variant {
    display: none;
  }
  .mp-page-header__login-button, .mp-page-header__trial-button, .mp-page-header--full-variant {
    display: block;
  }
}

.mp-page-section {
  padding: 20px;
}
.mp-page-section--landing-page {
  padding: 0 0 48px 0;
}

.mp-page-section__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 auto;
  max-width: 1200px;
}

.mp-page-section--landing-page .mp-page-section__wrap {
  max-width: none;
}

.mp-page-title {
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.3077;
  color: #000a1e;
}

.mp-paginated-panel-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mp-paginated-panel-list__pagination-controls {
  border-top: 1px solid #ccced2;
  margin-top: 8px;
  margin-bottom: 8px;
}

.mp-pill-skeleton {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #ffffff;
  border: 1px solid #a6a9b0;
  border-radius: 30px;
  margin: 0 12px 12px 0;
  height: 32px;
  width: 130px;
}
.mp-pill-skeleton .mp-pill-skeleton__text {
  height: 10px;
  width: 80%;
}

.mp-home-pills-section {
  margin-bottom: 24px;
}

.mp-home-pill:nth-of-type(1n + 7),
.mp-pill-skeleton:nth-of-type(1n + 7) {
  display: none;
}

.mp-home-pill {
  background: #ffffff;
  border: 1px solid #a6a9b0;
  margin: 0 12px 12px 0;
}
.mp-home-pill .xui-pill--text {
  color: #0078c8;
  text-decoration: none;
  font-weight: bold;
}
.mp-home-pill:hover {
  background-color: #f2f3f4;
}
.mp-home-pill .xui-pill--button:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.mp-home-pill:focus-within {
  -webkit-transition: -webkit-box-shadow 0.1s;
  transition: -webkit-box-shadow 0.1s;
  transition: box-shadow 0.1s;
  transition: box-shadow 0.1s, -webkit-box-shadow 0.1s;
  -webkit-box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px rgba(0, 10, 30, 0.5);
          box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px rgba(0, 10, 30, 0.5);
  outline: 1px solid transparent;
  text-decoration: none;
  transition: box-shadow 0.1s;
  z-index: 2;
}

@media screen and (min-width: 600px) {
  .mp-home-pill:nth-of-type(1n + 7),
.mp-pill-skeleton:nth-of-type(1n + 7) {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  .mp-home-pill:nth-of-type(1n + 9),
.mp-pill-skeleton:nth-of-type(1n + 9) {
    display: none;
  }
}
@media screen and (min-width: 800px) {
  .mp-home-pill:nth-of-type(n),
.mp-pill-skeleton:nth-of-type(n) {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}
@media screen and (min-width: 1200px) {
  .mp-home-pill:nth-of-type(1n + 9),
.mp-pill-skeleton:nth-of-type(1n + 9) {
    display: none;
  }
}
.mp-permissions-error__banner_body {
  font-size: 0.9375rem;
}

.mp-progress-circular {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.mp-progress-circular-content {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.mp-proof-point-row__proof-point-1 {
  padding-bottom: 32px;
}
@media screen and (min-width: 1000px) {
  .mp-proof-point-row__proof-point-1 {
    padding-bottom: 0;
    padding-right: 12px;
  }
}
.mp-proof-point-row__proof-point-2 {
  padding-bottom: 32px;
}
@media screen and (min-width: 1000px) {
  .mp-proof-point-row__proof-point-2 {
    padding: 0 12px;
  }
}
.mp-proof-point-row__proof-point-3 {
  padding-bottom: 32px;
}
@media screen and (min-width: 1000px) {
  .mp-proof-point-row__proof-point-3 {
    padding-bottom: 0;
    padding-left: 12px;
  }
}
.mp-proof-point-row__title {
  margin: 0;
  padding-bottom: 12px;
}
.mp-proof-point-row__summary {
  margin: 0;
  font-size: 1.0625rem;
  color: #59606d;
}

.mp-proof-point-section {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-proof-point-section {
    padding: 128px 20px;
  }
}
@media screen and (min-width: 1600px) {
  .mp-proof-point-section {
    padding: 128px 0;
  }
}
.mp-proof-point-section__header {
  padding-bottom: 32px;
  text-align: center;
}
@media screen and (min-width: 1000px) {
  .mp-proof-point-section__header {
    padding-bottom: 64px;
  }
}
.mp-proof-point-section__title {
  margin: 0;
}
.mp-proof-point-section.has-summary .mp-proof-point-section__title {
  padding-bottom: 32px;
}
.mp-proof-point-section__summary {
  font-size: 1.3125rem;
  color: #59606d;
}
.mp-proof-point-section .mp-proof-point-row:nth-of-type(n+2) {
  padding-top: 0;
}
@media screen and (min-width: 1000px) {
  .mp-proof-point-section .mp-proof-point-row:nth-of-type(n+2) {
    padding-top: 32px;
  }
}

.mp-recommendation-switch {
  display: block;
}

.mp-recommendation-switch__text {
  font-size: 0.8125rem;
  font-weight: 700;
}

@media screen and (max-width: 800px) {
  .xui-switchwrapper .xui-switch {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}
@media screen and (max-width: 420px) {
  .xui-switchwrapper .xui-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.mp-region-banner {
  padding: 0 20px;
  background-color: #2a3b4c;
  color: #ffffff;
}

.mp-region-banner__content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

.mp-region-banner__description {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  font-size: 1.0625rem;
}

.mp-region-banner__region {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 16px;
  margin-left: 20px;
}

@media screen and (max-width: 800px) {
  .mp-region-banner__description {
    display: none;
  }
}
.mp-region-select {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.mp-region-select--dark .mp-region-select__button {
  background-color: #59606d;
  color: #ffffff;
  border-color: transparent;
}
.mp-region-select--dark .mp-region-select__button:hover {
  background-color: #80858f;
  color: #ffffff;
}
.mp-region-select--dark .mp-region-select__button:focus {
  -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
          box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.mp-region-select--dark .mp-region-select__button > .xui-select--caret > .xui-icon {
  fill: #ffffff;
}

.mp-review-card {
  background: white;
  font-size: 0.9375rem;
  padding: 20px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid #ccced2;
}
.mp-review-card__stars_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-review-card__user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mp-review-card__review-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.mp-review-card__user_avatar {
  margin: 0 16px 16px 0;
  width: 40px;
}
.mp-review-card__user_detail_name {
  font-weight: bold;
}
.mp-review-card__user_detail_review-created {
  font-size: 0.8125rem;
  color: #59606d;
}
.mp-review-card__title {
  font-size: 1.3125rem;
  font-weight: normal;
  margin-bottom: 12px;
}
.mp-review-card__body {
  line-height: 24px;
  margin: 16px 0 12px 0;
  white-space: pre-wrap;
}
.mp-review-card__review_helpful {
  font-size: 0.8125rem;
  font-weight: 700;
  margin-top: 20px;
}

.mp-review-delete-modal__modal-body {
  display: inline-block;
  margin-bottom: 24px;
}

.mp-review-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 24px;
}
.mp-review-header__actions {
  width: 100%;
  margin-top: 20px;
  font-size: 0.9375rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.mp-review-header__actions button {
  width: 100%;
}
.mp-review-header__actions button:first-of-type {
  margin-bottom: 10px;
}
.mp-review-header__logo-wrap {
  height: 80px;
  width: 80px;
}
.mp-review-header__logo {
  border-radius: 3px;
  height: 100%;
  width: 100%;
}
.mp-review-header__content-wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 20px;
}
.mp-review-header__title {
  font-size: 1.3125rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 4px;
}
.mp-review-header__reviews-ratings {
  font-size: 1.0625rem;
}

@media screen and (min-width: 600px) {
  .mp-review-header__actions {
    width: auto;
    margin-top: 0;
  }
  .mp-review-header__actions button {
    width: auto;
  }
}
.mp-review-voted-section {
  font-size: 0.8125rem;
}

.mp-review-list {
  padding: 20px 0;
}

.mp-review-modal__avatar-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 32px;
}
.mp-review-modal__avatar-header .xui-avatar {
  margin-right: 16px;
}
.mp-review-modal__avatar-header-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.mp-review-modal__avatar-header-displayname {
  font-weight: 700;
  font-size: 0.9375rem;
}
.mp-review-modal__avatar-header-disclaimer {
  font-size: 0.8125rem;
  color: #59606d;
}
.mp-review-modal__optional {
  font-weight: normal;
}
.mp-review-modal__terms {
  font-size: 0.6875rem;
}

.mp-review-response-card {
  background: #f2f3f4;
  font-size: 0.9375rem;
  line-height: 24px;
  margin: 20px 0 12px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mp-review-response-card::before {
  border-left: 2px solid #0078c8;
  content: " ";
  z-index: 1;
}
.mp-review-response-card__all_response {
  padding: 20px;
}
.mp-review-response-card__header {
  margin: 0;
}
.mp-review-response-card__title {
  font-weight: 700;
  margin-right: 0.5625rem;
}
.mp-review-response-card__user_detail_review-response-created {
  font-size: 0.8125rem;
  color: #59606d;
}
.mp-review-response-card__body {
  margin: 12px 0 0 0;
  white-space: pre-wrap;
}

.mp-review-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  border: 1px solid transparent;
}
.mp-review-summary__section {
  width: 100%;
}
.mp-review-summary__breakdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.mp-review-summary__breakdown span {
  font-size: 0.9375rem;
  text-align: right;
  width: 2.6em;
}
.mp-review-summary__breakdown_progress {
  width: 75%;
  margin: 12px 0;
}
.mp-review-summary__stars {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px;
}
.mp-review-summary__stars_rating {
  font-size: 28px;
  font-weight: bold;
  line-height: 38px;
}
.mp-review-summary__stars_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-review-summary__count {
  font-size: 0.9375rem;
  line-height: 20px;
  color: #59606d;
  margin-bottom: 20px;
}
.mp-review-summary__empty {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 80px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.mp-review-summary__empty_content {
  color: #59606d;
  line-height: 20px;
  font-size: 0.8125rem;
}

@media screen and (min-width: 800px) {
  .mp-review-summary__section {
    width: 50%;
  }
}
.mp-review {
  color: rgba(0, 10, 30, 0.75);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 110px;
  font-size: 0.6875rem;
}

.mp-review--large {
  font-size: 0.9375rem;
}

.mp-review__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 8px;
}

.mp-review__stars-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 0;
}

.mp-review__stars {
  position: relative;
}

.mp-review__stars-rating {
  position: absolute;
  width: 0;
  top: 0;
  left: 0;
  overflow: hidden;
}

.mp-coveo-search-input.xui-textinput {
  border: 1px solid transparent;
}

.mp-coveo-search-input--tall {
  height: 44px;
}

.mp-coveo-search-input--appstore-header {
  border: 0;
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 10, 30, 0.2);
          box-shadow: 0 8px 16px 0 rgba(0, 10, 30, 0.2);
  color: #000a1e;
}
.mp-coveo-search-input--appstore-header ::-webkit-input-placeholder {
  color: #404756;
}
.mp-coveo-search-input--appstore-header ::-moz-placeholder {
  color: #404756;
}
.mp-coveo-search-input--appstore-header :-ms-input-placeholder {
  color: #404756;
}
.mp-coveo-search-input--appstore-header ::-ms-input-placeholder {
  color: #404756;
}
.mp-coveo-search-input--appstore-header ::placeholder {
  color: #404756;
}
.mp-coveo-search-input--appstore-header.xui-textinput-is-disabled {
  background-color: #ffffff;
}
.mp-coveo-search-input--appstore-header.xui-textinput-focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.mp-search {
  width: 100%;
}

.mp-search--page {
  margin-bottom: 24px;
}

.mp-search-input.xui-textinput {
  border: 0;
}

.mp-search-input--fat {
  height: 44px;
}

.mp-search-no-suggestions-found {
  font-size: 0.8125rem;
}

.mp-search-input--appstore-header {
  border: 0;
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 10, 30, 0.2);
          box-shadow: 0 8px 16px 0 rgba(0, 10, 30, 0.2);
  color: #000a1e;
}
.mp-search-input--appstore-header ::-webkit-input-placeholder {
  color: #404756;
}
.mp-search-input--appstore-header ::-moz-placeholder {
  color: #404756;
}
.mp-search-input--appstore-header :-ms-input-placeholder {
  color: #404756;
}
.mp-search-input--appstore-header ::-ms-input-placeholder {
  color: #404756;
}
.mp-search-input--appstore-header ::placeholder {
  color: #404756;
}
.mp-search-input--appstore-header.xui-textinput-is-disabled {
  background-color: #ffffff;
}
.mp-search-input--appstore-header.xui-textinput-focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.mp-section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.mp-section-heading--info {
  margin-top: 0;
}

.mp-section {
  margin-top: 32px;
}
.mp-section:first-of-type {
  margin-top: 0;
}

.mp-section--large {
  margin-top: 40px;
}

.mp-section--info {
  background-color: rgba(187, 243, 253, 0.5);
  padding: 20px;
  border-left: 3px solid #3cdcfa;
  margin-top: 12px;
}
.mp-section--info .mp-section-heading {
  margin: 0;
}

.mp-section--app-listing-details {
  padding: 0 20px;
}

@media screen and (max-width: 800px) {
  .mp-section {
    margin-top: 20px;
  }

  .mp-section--app-listing-details {
    padding: 0;
  }
}
.mp-showcase-app-group-section {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-showcase-app-group-section {
    padding: 128px 20px;
  }
}
@media screen and (min-width: 1600px) {
  .mp-showcase-app-group-section {
    padding: 128px 0;
  }
}
.mp-showcase-app-group-section__title {
  margin-top: 0;
  margin-bottom: 20px;
}
.mp-showcase-app-group-section__description {
  font-size: 1.3125rem;
  color: #59606d;
}
.mp-showcase-app-group-section__button {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mp-showcase-app-group-section__button .xui-icon {
  -webkit-transform: rotateZ(270deg);
          transform: rotateZ(270deg);
}
@media screen and (min-width: 1000px) {
  .mp-showcase-app-group-section__button {
    margin-top: 32px;
    margin-bottom: 0;
  }
}
.mp-showcase-app-group-section__apps-column {
  display: block;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-showcase-app-group-section__apps-column-desktop {
  display: none;
}
@media screen and (min-width: 1000px) {
  .mp-showcase-app-group-section__apps-column-desktop {
    display: block;
  }
}
.mp-showcase-app-group-section__apps-column-mobile {
  display: block;
}
@media screen and (min-width: 1000px) {
  .mp-showcase-app-group-section__apps-column-mobile {
    display: none;
  }
}
.mp-showcase-app-group-section .mp-app-group {
  margin-top: 0;
}

.mp-showcase-app-section {
  padding: 32px 20px;
}
@media screen and (min-width: 1000px) {
  .mp-showcase-app-section {
    padding: 128px 20px;
  }
}
@media screen and (min-width: 1600px) {
  .mp-showcase-app-section {
    padding: 128px 0;
  }
}
.mp-showcase-app-section__title {
  margin-top: 0;
  margin-bottom: 20px;
}
.mp-showcase-app-section__description {
  font-size: 1.3125rem;
  color: #59606d;
}
.mp-showcase-app-section__app-row {
  padding: 32px 0;
}
@media screen and (min-width: 1000px) {
  .mp-showcase-app-section__app-row {
    padding: 64px 0;
  }
}
.mp-showcase-app-section__app-row:last-of-type {
  padding-bottom: 0;
}
@media screen and (min-width: 800px) {
  .mp-showcase-app-section__app-row__image-column {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .mp-showcase-app-section__app-row__image-column.alternate-display {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .mp-showcase-app-section__app-row__description-column {
    -webkit-box-flex: 3;
        -ms-flex: 3;
            flex: 3;
    margin-left: 12.5%;
  }
  .mp-showcase-app-section__app-row__description-column.alternate-display {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    margin-left: 0;
    margin-right: 12.5%;
  }
}
.mp-showcase-app-section__image-wrapper {
  width: 100%;
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
  border-radius: 3px;
}
@media screen and (min-width: 800px) {
  .mp-showcase-app-section__image-wrapper {
    width: 180px;
  }
}
.mp-showcase-app-section__image {
  max-width: 70%;
  max-height: 90px;
}
.mp-showcase-app-section__get-app-small {
  width: 180px;
  display: none;
}
@media screen and (min-width: 800px) {
  .mp-showcase-app-section__get-app-small {
    display: inline-block;
  }
}
.mp-showcase-app-section__get-app-large {
  width: 100%;
  margin-top: 20px;
  display: inline-block;
}
@media screen and (min-width: 800px) {
  .mp-showcase-app-section__get-app-large {
    display: none;
  }
}
.mp-showcase-app-section__app-name {
  color: #000a1e;
  margin: 0;
}
.mp-showcase-app-section__app-reviews {
  margin: 4px 0 8px;
}
.mp-showcase-app-section__app-categories {
  margin-bottom: 8px;
}
.mp-showcase-app-section__app-description {
  color: #404756;
  size: 1.0625rem;
}
.mp-showcase-app-section__get-image-desktop {
  display: none;
}
@media screen and (min-width: 800px) {
  .mp-showcase-app-section__get-image-desktop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
.mp-showcase-app-section__get-image-mobile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (min-width: 800px) {
  .mp-showcase-app-section__get-image-mobile {
    display: none;
  }
}

.mp-side-nav {
  width: 215px;
  height: 100%;
  margin-right: 0;
  padding-top: 20px;
  background: white;
  border-right: none;
}
.mp-side-nav--logged-in {
  margin-top: 1px;
}

.mp-side-nav-item__nested .xui-pickitem--body {
  padding-left: 16px;
}

.xui-pickitem--submenucontrol:checked ~ .xui-submenu-layout {
  max-height: 100%;
}

.mp-side-nav--full {
  width: 215px;
}

.mp-side-nav-item,
.mp-side-nav-item__container {
  position: relative;
  margin-bottom: 16px;
}

.mp-side-nav-item__title {
  font-weight: 700;
  font-size: 0.8125rem;
}

.mp-side-nav-item__title--static {
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 4px 20px;
}

@media (max-width: 1200px) {
  .mp-side-nav {
    margin-right: 0;
    padding-top: 0;
    width: 100%;
    background-color: #ffffff;
  }

  .mp-side-nav--full {
    display: none;
  }
}
.mp-skip-link__wrapper {
  margin: 12px;
  z-index: 8001;
  -webkit-box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 10, 30, 0.2), 0 3px 6px 0 rgba(0, 10, 30, 0.2);
  padding: 20px;
  position: absolute;
  -webkit-transform: translateY(-300%);
          transform: translateY(-300%);
}
.mp-skip-link__wrapper:focus, .mp-skip-link__wrapper:focus-within {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}

.mp-star-rating-input {
  display: block;
}
.mp-star-rating-input * {
  outline: none;
}
.mp-star-rating-input__star-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 0;
}
.mp-star-rating-input__star-field {
  margin-right: 13px;
}
.mp-star-rating-input__star:hover {
  cursor: pointer;
}
.mp-star-rating-input__input:focus-visible + label {
  outline: solid 3px rgba(0, 10, 30, 0.2);
  display: block;
}
.mp-star-rating-input .xui-tooltip--tip {
  -webkit-box-shadow: none;
          box-shadow: none;
}

.mp-star {
  position: relative;
  color: #e27800;
  line-height: 0;
}

.mp-star--normal {
  margin-right: 3px;
}

.mp-star--large {
  margin-right: 8px;
}

.mp-star--new-large {
  margin-right: 4px;
}

.mp-star--x-large {
  margin: 0 0 0 12px;
  height: 24px;
}

.mp-star--2x-large {
  height: 34px;
}

.mp-star__placeholder {
  color: #929499;
}

.mp-star__rating {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
@media (forced-colors: active) {
  .mp-star__rating svg {
    fill: Highlight;
  }
}

.mp-subscription-cancel-button__plan-details-panel {
  padding: 20px;
}

.mp-subscription-plan-item-heading {
  padding: 16px;
}
.mp-subscription-plan-item-heading__title {
  -webkit-font-feature-settings: "pnum" 1;
          font-feature-settings: "pnum" 1;
  font-variant-numeric: proportional-nums;
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 2rem;
  margin: 0;
  margin-bottom: 4px;
}
.mp-subscription-plan-item-heading__primary-price {
  margin-bottom: 4px;
}
.mp-subscription-plan-item-heading__primary-price-amount {
  color: #404756;
  font-size: 1.0625rem;
  font-weight: bold;
  margin-right: 4px;
}
.mp-subscription-plan-item-heading__primary-price-label {
  color: #404756;
  font-size: 0.6875rem;
}
.mp-subscription-plan-item-heading__add-on-price {
  margin: 0;
  padding: 0;
}
.mp-subscription-plan-item-heading__add-on-price li {
  list-style: none;
}
.mp-subscription-plan-item-heading__add-on-price li:not(:last-child) {
  margin-bottom: 4px;
}
.mp-subscription-plan-item-heading__add-on-price-heading {
  font-size: 0.6875rem;
  color: #59606d;
  font-weight: bold;
  margin-bottom: 4px;
}
.mp-subscription-plan-item-heading__add-on-price-include {
  font-weight: bold;
}
.mp-subscription-plan-item-heading__add-on-price-label {
  font-size: 0.6875rem;
}
.mp-subscription-plan-item-heading__select-btn {
  display: block;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-subscription-plan-item-heading__selected_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 12px;
}
.mp-subscription-plan-item-heading__selected_container .xui-tooltip {
  width: 100%;
}
.mp-subscription-plan-item-heading__selected {
  font-size: 0.9375rem;
  font-weight: bold;
  color: #404756;
}
.mp-subscription-plan-item-heading__metered-costs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 12px;
  color: #404756;
}
.mp-subscription-plan-item-heading__metered-costs > ul {
  padding-left: 0;
  margin: 0;
}
.mp-subscription-plan-item-heading__metered-costs > ul > li {
  list-style-type: none;
  font-size: 0.6875rem;
}
.mp-subscription-plan-item-heading__metered-costs > ul > li:not(:last-child) {
  margin-bottom: 4px;
}

.mp-subscription-plan-item {
  min-width: 280px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 2px solid transparent;
  max-width: none;
  width: 100%;
  margin-right: 20px;
}
.mp-subscription-plan-item:last-child {
  margin-right: 0;
}
@media screen and (min-width: 1000px) {
  .mp-subscription-plan-item {
    min-width: 200px;
    margin-right: 0;
  }
}
.mp-subscription-plan-item__feature-list {
  margin: 0;
  padding: 0;
}
.mp-subscription-plan-item__panel-section {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 16px 16px 8px;
}
.mp-subscription-plan-item__features_container {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.mp-subscription-plan-item__top_line_feature {
  font-size: 0.9375rem;
  margin-bottom: 16px;
}
.mp-subscription-plan-item__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 0.9375rem;
  overflow: hidden;
  word-break: break-all;
}
.mp-subscription-plan-item__feature_tick {
  margin-right: 12px;
}
.mp-subscription-plan-item__feature {
  padding-bottom: 16px;
  word-break: break-word;
}
.mp-subscription-plan-item--selected {
  border: 2px solid #0078c8;
}
.mp-subscription-plan-item--subscribed .mp-subscription-plan-item__select {
  color: #80858f;
}

.subscription-plan-selection {
  overflow-x: auto;
  overflow-y: hidden;
}
.subscription-plan-selection__plan-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-y: hidden;
}
.subscription-plan-selection__banner-icon {
  margin: 0 0 -2px 12px;
}
.subscription-plan-selection__separator {
  border-right: 1px solid #ccced2;
}
.subscription-plan-selection__item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  border-radius: 3px 3px 0 0;
}
.subscription-plan-selection__item--count-1 {
  width: 100%;
  min-width: auto;
  margin-right: 0;
}
@media screen and (min-width: 1000px) {
  .subscription-plan-selection__item--count-1 {
    width: 650px;
  }
}
@media screen and (min-width: 1000px) {
  .subscription-plan-selection__item--count-2 {
    max-width: 50%;
    width: 50%;
  }
}
.subscription-plan-selection__show-more-features {
  border: 1px solid #ccced2;
  border-radius: 0 0 3px 3px;
  margin-bottom: 32px;
}
.subscription-plan-selection__show-more-features-btn {
  bottom: 0;
  width: 100%;
  border: none;
  border-radius: 0;
}
.subscription-plan-selection__show-more-features-btn:hover {
  background-color: #ffffff;
}
.subscription-plan-selection__add-on-panel-empty-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  margin: 32px 0;
}

@media screen and (max-width: 599.98px) {
  .mp-subscription-plan-summary {
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .mp-subscription-plan-summary__information {
    margin-left: 20px;
  }
}
.mp-subscription-plan-summary__plan-name {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding-bottom: 4px;
}
.mp-subscription-plan-summary__plan-name-metered-only {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}
.mp-subscription-plan-summary__plan-name-metered-only-description {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.6875rem;
}
.mp-subscription-plan-summary__plan-total {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 32px;
}
.mp-subscription-plan-summary__plan-total-complex {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 4px;
  margin-bottom: 4px;
}
.mp-subscription-plan-summary__description {
  font-size: 0.8125rem;
}
.mp-subscription-plan-summary__description-complex {
  font-size: 0.8125rem;
  color: rgba(0, 10, 30, 0.75);
  margin-top: 4px;
}
.mp-subscription-plan-summary__separator {
  border: 1px solid #e6e7e9;
  margin: 20px 0;
}
.mp-subscription-plan-summary__separator-complex {
  border: 1px solid #e6e7e9;
  margin: 16px 0;
}
.mp-subscription-plan-summary__tax {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #59606d;
}
.mp-subscription-plan-summary__select {
  display: block;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 20px 0;
}
.mp-subscription-plan-summary__information {
  margin-top: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mp-subscription-plan-summary__information-icon {
  margin-top: 2px;
  padding-right: 16px;
}
.mp-subscription-plan-summary__information-message {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.8125rem;
}
.mp-subscription-plan-summary .mp-subscription-plan-summary-button {
  display: block;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mp-subscription-plan-summary .mp-subscription-plan-summary-button:first-of-type {
  margin-bottom: 8px;
}
.mp-subscription-plan-summary .mp-subscription-plan-summary__container {
  font-size: 0.8125rem;
  padding: 20px 16px;
}
.mp-subscription-plan-summary .mp-subscription-plan-summary__container-text-complex > *:last-child {
  margin-bottom: 16px;
}
.mp-subscription-plan-summary .mp-subscription-plan-summary__container-text-complex .mp-subscription-plan-summary__plan-name {
  padding-bottom: 0;
}
.mp-subscription-plan-summary__plan-metered {
  text-align: right;
  color: rgba(0, 10, 30, 0.75);
  margin-top: 4px;
  font-size: 0.6875rem;
}
.mp-subscription-plan-summary__metered-only-description {
  color: rgba(0, 10, 30, 0.75);
  font-size: 0.6875rem;
}
.mp-subscription-plan-summary__metered-costs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 12px;
  color: #404756;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}
.mp-subscription-plan-summary__metered-costs > ul {
  padding-left: 0;
  margin: 0;
  text-align: right;
}
.mp-subscription-plan-summary__metered-costs > ul > li {
  list-style-type: none;
  font-size: 0.6875rem;
}
.mp-subscription-plan-summary__metered-costs > ul > li:not(:last-child) {
  margin-bottom: 4px;
}
.mp-subscription-plan-summary__add-on > ul {
  padding-left: 0;
  margin: 0;
}
.mp-subscription-plan-summary__add-on > ul > li {
  margin-bottom: 4px;
  list-style-type: none;
}
.mp-subscription-plan-summary__add-on-clause {
  color: #59606d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.subscription-reactivate-modal__date {
  font-weight: bold;
}

.subscription-select-quantity__control-group {
  width: 128px;
}
.subscription-select-quantity__control-group input {
  text-align: center;
}

.mp-subscription-status-banner {
  font-size: 0.8125rem;
}
.mp-subscription-status-banner .xui-banner--message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mp-subscription-status-banner__message {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.mp-subscription-status-banner__action {
  font-weight: 700;
}
.mp-subscription-status-banner__banner-icon {
  margin: 0 16px -2px 0;
}

.subscription-status-banner {
  font-size: 0.8125rem;
}
.subscription-status-banner__icon {
  margin: 0 16px -2px 0;
}
.subscription-status-banner__header {
  display: block;
  margin: 0;
  padding: 8px 12px;
}
.subscription-status-banner__title {
  font-weight: 700;
}

.mp-subscription-wizard-addon-selection__addon-empty {
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.9375rem;
  text-align: center;
  color: #404756;
  padding: 20px;
}

.subscription-wizard-billing-details__panel > .xui-panel--section {
  padding-top: 48px;
}
@media screen and (min-width: 600px) {
  .subscription-wizard-billing-details .xui-form-inline .xui-field-layout {
    width: 50%;
  }
  .subscription-wizard-billing-details .xui-form-inline .xui-field-layout:first-child {
    padding-right: 10px;
  }
  .subscription-wizard-billing-details .xui-form-inline .xui-field-layout:last-child {
    padding-left: 10px;
  }
}

.subscription-wizard-create-subscription {
  padding: 48px 0 32px;
}
.subscription-wizard-create-subscription__progress-indicator, .subscription-wizard-create-subscription__message, .subscription-wizard-create-subscription__progress-message {
  text-align: center;
  margin: auto;
}
.subscription-wizard-create-subscription__progress-indicator {
  width: 80px;
}
.subscription-wizard-create-subscription__progress-indicator .xui-icon {
  height: 20px;
  width: 32px;
}
.subscription-wizard-create-subscription__progress-message {
  margin-top: 24px;
}
.subscription-wizard-create-subscription__message {
  max-width: 810px;
  border-top: solid 1px #e6e7e9;
  margin-top: 24px;
}
.subscription-wizard-create-subscription__message p {
  margin: 20px auto 32px;
  max-width: 520px;
}
.subscription-wizard-create-subscription__actions .xui-button:first-child {
  margin-right: 16px;
}
.subscription-wizard-create-subscription__actions .xui-button {
  min-width: 240px;
}

.subscription-wizard-payment-details {
  font-size: 0.8125rem;
}
.subscription-wizard-payment-details__panel > .xui-panel--section {
  padding-top: 48px;
}
.subscription-wizard-payment-details__form {
  padding: 0;
}
@media screen and (min-width: 1000px) {
  .subscription-wizard-payment-details__form {
    padding: 0 16px 0 0;
  }
}

.subscription-wizard {
  min-height: calc(100vh - 60px);
  font-size: 0.8125rem;
  padding: 32px 16px 0;
  background: #f2f3f4;
}
.subscription-wizard--no-stepper {
  padding-top: 48px;
}
.subscription-wizard .xui-stepper-inline .xui-stepper-section {
  padding: 32px 0 0;
}
.subscription-wizard .xui-banner,
.subscription-wizard .xui-panel {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid #ccced2;
}
.subscription-wizard__container {
  margin: auto;
}
.subscription-wizard__item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}
.subscription-wizard__detail {
  font-size: 0.8125rem;
}
@media screen and (min-width: 1000px) {
  .subscription-wizard__detail {
    padding-right: 16px;
  }
}
.subscription-wizard__detail-heading, .subscription-wizard__summary-heading {
  font-size: 1.0625rem;
  font-weight: bold;
  margin: 0 16px 16px;
}
@media screen and (min-width: 600px) {
  .subscription-wizard__detail-heading, .subscription-wizard__summary-heading {
    margin: 0 0 16px;
  }
}
.subscription-wizard__summary-heading {
  font-size: 1.0625rem;
  font-weight: bold;
  margin-top: 48px;
}
@media screen and (min-width: 1000px) {
  .subscription-wizard__summary-heading {
    margin-top: 0;
  }
}
.subscription-wizard__test-mode-banner {
  margin-right: 0;
}
@media screen and (min-width: 1000px) {
  .subscription-wizard__test-mode-banner {
    width: auto;
  }
}

@media screen and (max-width: 599.98px) {
  .subscription-wizard-stepper .xui-stepper-stacked-links .xui-stepper-tab::before,
.subscription-wizard-stepper .xui-stepper-stacked-links .xui-stepper-tab::after {
    width: 30%;
  }
  .subscription-wizard-stepper .xui-stepper-link-heading {
    font-size: 0.8125rem;
  }
  .subscription-wizard-stepper .xui-stepper-inline .xui-stepper-tab {
    margin: 0;
  }
}

.mp-tax-number-and-type-field-qbr {
  margin-top: 12px;
}
.mp-tax-number-and-type-field-qbr--invalid-tax-number {
  margin-top: 30px;
}
.mp-tax-number-and-type-field-qbr-terms {
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(0, 10, 30, 0.65);
}
.mp-tax-number-and-type-field-qbr-pop-over-trigger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  text-decoration: underline;
  color: #0078c8;
}

.mp-text-skeleton {
  height: 15px;
  margin-top: 8px;
  border-radius: 3px;
}
.mp-text-skeleton:not(.mp-text-skeleton--title):first-of-type {
  margin-top: 0;
}

.mp-text-skeleton--thin {
  height: 10px;
}

.mp-text-skeleton--long-description {
  width: 100%;
  height: 100px;
}

.mp-text-skeleton--page-description,
.mp-text-skeleton--short {
  width: 50%;
}

.mp-text-skeleton--review {
  height: 10px;
  width: 70%;
}

.mp-text-skeleton--title {
  height: 25px;
  width: 30%;
}

.mp-text-skeleton--panel {
  height: 50px;
  width: 100%;
}

.mp-text-skeleton--title,
.mp-text-skeleton--page-description {
  margin: 16px 0;
}

.mp-timeout-modal__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 40px;
}

.mp-timeout-modal__header {
  font-size: 1.3125rem;
  text-align: center;
  margin-bottom: 24px;
  color: #000a1e;
}

.mp-timeout-modal__description {
  text-align: center;
  margin-bottom: 32px;
  color: #404756;
}

.mp-timeout-modal__button {
  margin-bottom: 16px;
}

.mp-top-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.mp-top-nav__trigger {
  height: 100%;
  border-radius: 0;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5rem;
}
.mp-top-nav__trigger--is-active {
  color: #0078c8;
  -webkit-box-shadow: inset 0 -3px 0 #0078c8;
          box-shadow: inset 0 -3px 0 #0078c8;
}

.mp-video-modal {
  padding-top: calc(800px * 0.56);
}
.mp-video-modal .xui-modal--header {
  padding: 0;
}

.mp-video-modal__close {
  position: absolute;
  right: 0;
  top: -40px;
  color: #ffffff;
  opacity: 0.5;
}
.mp-video-modal__close:hover {
  opacity: 1;
  color: #ffffff;
}

.mp-video-modal__player {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
}

@media screen and (max-width: 800px) {
  .mp-video-modal {
    padding-top: calc(100% * 0.56);
  }
}
.mp-video {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.mp-video::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  top: 0;
  left: 0;
  background-color: rgba(0, 10, 30, 0.7);
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}
.mp-video:hover::after {
  opacity: 1;
}
.mp-video:hover .mp-video__placeholder-icon {
  background-color: #ffffff;
}
.mp-video:hover .mp-video__placeholder-icon::after {
  border-left-color: #000a1e;
}

.mp-video__placeholder-image {
  width: 100%;
  vertical-align: top;
}

.mp-video__placeholder-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #ffffff;
  font-size: 0.9375rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}

.mp-video__placeholder-icon {
  position: relative;
  margin-left: 4px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  border: 1px solid #ffffff;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.mp-video__placeholder-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #ffffff;
  left: calc(50% - 3px);
  top: calc(50% - 6px);
}

#mp-xero-navigation {
  min-height: 60px;
  background-color: #0078c8;
}

.mp-logged-in-layout {
  position: relative;
}
.mp-logged-in-layout .mp-logged-in-layout__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.mp-logged-in-layout--page {
  margin-bottom: 24px;
}

.mp-logged-in-layout__search {
  margin: 0 auto;
  max-width: 800px;
  padding: 20px;
}

@media screen and (max-width: 1200px) {
  .mp-logged-in-layout__search {
    display: none;
  }
}
.mp-public-layout {
  position: relative;
}
.mp-public-layout .mp-public-layout__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.mp-app-listing-page-content-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 800px) {
  .mp-app-listing-page-content-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
  }
}
.mp-app-management-page {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 40px;
  font-size: 0.8125rem;
}
.mp-app-management-page__subscription-actions {
  display: block;
  padding: 0 20px 20px;
}
.mp-app-management-page__subscription-actions > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.mp-collection-page__search {
  margin-bottom: 48px;
  margin-top: 12px;
}

@media screen and (min-width: 600px) {
  .mp-collection-page__search {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 600px;
  }
}
.mp-connected-page {
  margin-bottom: 20px;
  font-size: 0.8125rem;
}
.mp-connected-page .mp-connected-apps-list,
.mp-connected-page .mp-subscriptions-list,
.mp-connected-page .payment-method-panel {
  margin-bottom: 20px;
}
.mp-connected-page .mp-connected-apps-list li:first-child,
.mp-connected-page .mp-subscriptions-list li:first-child {
  border-top: 0;
}
.mp-connected-page .mp-connected-apps-list li,
.mp-connected-page .mp-subscriptions-list li {
  border-top: 1px solid #ccced2;
}
.mp-connected-page .mp-connected-apps-list__disconnect,
.mp-connected-page .mp-subscriptions-list__disconnect {
  margin-top: 20px;
}

.mp-connected-search__content {
  max-width: 760px;
  padding: 48px 20px 100px;
  margin: auto;
}

.mp-coveo-search-results-page__search-term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.mp-coveo-search-results-page__search-term__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-coveo-search-results-page__search {
  margin-bottom: 48px;
  margin-top: 12px;
}

@media screen and (min-width: 600px) {
  .mp-coveo-search-results-page__search {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 600px;
  }
}
.mp-custom-page__search {
  margin-bottom: 48px;
  margin-top: 12px;
}

@media screen and (min-width: 600px) {
  .mp-custom-page__search {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 600px;
  }
}
.mp-funktion-page__search {
  margin-bottom: 48px;
  margin-top: 12px;
}

@media screen and (min-width: 600px) {
  .mp-funktion-page__search {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 600px;
  }
}
.mp-home-page__search {
  margin-bottom: 16px;
}

@media (max-width: 1200px) {
  .mp-home-page__search {
    display: none;
  }
}
.mp-industry-page__search {
  margin-bottom: 48px;
  margin-top: 12px;
}

@media screen and (min-width: 600px) {
  .mp-industry-page__search {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 600px;
  }
}
.mp-reviews-page {
  max-width: 760px;
  margin: 0 auto;
}
.mp-reviews-page__content {
  margin-top: 24px;
}

.mp-search-results-page__search-term {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.mp-search-results-page__search-term__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-search-results-page__search {
  margin-bottom: 48px;
  margin-top: 12px;
}

@media screen and (min-width: 600px) {
  .mp-search-results-page__search {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 600px;
  }
}
.mp-single-review-page {
  max-width: 760px;
  margin: 0 auto;
}
.mp-single-review-page__line {
  border-bottom: 1px solid #ccced2;
  margin-top: 40px;
}
.mp-single-review-page__content {
  margin-top: 24px;
}

.mp-ssu-authoriser {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
}

.mp-ssu-authoriser__content {
  max-width: 50%;
  text-align: center;
  margin: auto;
}

.subscribe-page {
  padding-top: 60px;
}

.update-billing-details-page {
  min-height: calc(100vh - 60px);
  padding-top: 156px;
  background: #f2f3f4;
  width: 100%;
  font-size: 0.8125rem;
}

.update-payment-details-page {
  min-height: calc(100vh - 60px);
  padding-top: 156px;
  background: #f2f3f4;
  font-size: 0.8125rem;
  width: 100%;
}