@charset "UTF-8";
/**
 * COMPASS / VARIABLES / FUNCTIONS / MIXINS
 */
/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
/**
 * Global - less specific
 */
.ms-color-red {
  color: #cc5a5a !important; }

.ms-color-dark-blue {
  color: #002b51 !important; }

.ms-color-light-blue {
  color: #0f8ec7 !important; }

.ms-color-seafoam {
  color: #6fc8cb !important; }

.ms-color-pale-blue {
  color: #b9e8fe !important; }

.ms-color-jade {
  color: #3eb661 !important; }

.ms-color-lilac {
  color: #675882 !important; }

.ms-color-orange {
  color: #f9ae22 !important; }

.ms-color-black {
  color: #333 !important; }

.ms-color-real-black {
  color: #000 !important; }

.ms-color-gray-1 {
  color: #666 !important; }

.ms-color-gray-2 {
  color: #999 !important; }

.ms-color-gray-3 {
  color: #b7b7b7 !important; }

.ms-color-gray-4 {
  color: #dadada !important; }

.ms-color-gray-5 {
  color: #e9e9e9 !important; }

.ms-color-gray-6 {
  color: #f5f5f5 !important; }

.ms-color-white {
  color: #fff !important; }

.ms-icon-activity::before, .ms-icon-advisor::before, .ms-icon-alert::before, .ms-icon-announcement::before, .ms-icon-arrow::before, .ms-icon-attachment::before, .ms-icon-back::before, .ms-icon-backspace::before, .ms-icon-calendar::before, .ms-icon-carat_down::before, .ms-icon-carat_left::before, .ms-icon-carat_menu_left::before, .ms-icon-carat_menu_up::before, .ms-icon-carat_right::before, .ms-icon-carat_sorting_down::before, .ms-icon-carat_sorting_up::before, .ms-icon-cardpoint::before, .ms-icon-cashmanagement::before, .ms-icon-check::before, .ms-icon-checkbox_checked::before, .ms-icon-checkbox_unchecked::before, .ms-icon-checkmark_circle::before, .ms-icon-clock::before, .ms-icon-close::before, .ms-icon-collapse::before, .ms-icon-delete::before, .ms-icon-deposits::before, .ms-icon-deposits_big::before, .ms-icon-devices::before, .ms-icon-documents::before, .ms-icon-ebill::before, .ms-icon-ebill_filled::before, .ms-icon-error::before, .ms-icon-expand::before, .ms-icon-expand_down::before, .ms-icon-expand_right::before, .ms-icon-fast::before, .ms-icon-feedback::before, .ms-icon-help::before, .ms-icon-holdings::before, .ms-icon-holdings_big::before, .ms-icon-info::before, .ms-icon-information::before, .ms-icon-legal::before, .ms-icon-linkedin::before, .ms-icon-list::before, .ms-icon-location::before, .ms-icon-location_filled::before, .ms-icon-lock::before, .ms-icon-mailbox::before, .ms-icon-maintenance::before, .ms-icon-menu::before, .ms-icon-money_lock::before, .ms-icon-nearby::before, .ms-icon-payments::before, .ms-icon-payments_big::before, .ms-icon-pdf::before, .ms-icon-pdf_insert::before, .ms-icon-people::before, .ms-icon-people_solid::before, .ms-icon-phone::before, .ms-icon-plus::before, .ms-icon-privacy::before, .ms-icon-push::before, .ms-icon-quotes::before, .ms-icon-radio_checked::before, .ms-icon-radio_unchecked::before, .ms-icon-reply::before, .ms-icon-recurring::before, .ms-icon-rotate_device::before, .ms-icon-search::before, .ms-icon-settings::before, .ms-icon-share::before, .ms-icon-sms::before, .ms-icon-star::before, .ms-icon-star_filled::before, .ms-icon-square_checkbox_checked::before, .ms-icon-square_checkbox_unchecked::before, .ms-icon-success::before, .ms-icon-thumbs::before, .ms-icon-tick::before, .ms-icon-touch_id::before, .ms-icon-transfers::before, .ms-icon-transfers_big::before, .ms-icon-trash::before, .ms-icon-twitter::before, .ms-flavor_android .ms-icon-carat_down::before, .ms-flavor_android .ms-icon-checkbox_checked::before, .ms-flavor_android .ms-icon-checkbox_unchecked::before, .ms-flavor_android .ms-icon-nearby::before {
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none; }

/*
	Windows Font Rendering Fix

	Windows 7
	In a basic Windows VM installation DirectWrite is disabled due to lack of hardware support. Firefox then falls back to GDI rendering.
	The default behavior of GDI rendering in Windows applications is to adhere to the OS setting for ClearType.
	And in most VM installs it will be turned off by default.
	Hence all the jagged edges in Firefox on both the icon font and the normal text.

	IE though, while it will also not have DirectWrite, will by default override the OS level setting for ClearType and will render with
	ClearType enabled, so in IE's case the normal text will be ok, and only the icon font will be jaggy because the icon font is not
	properly hinted. (Sidenote: hinting is actually much more important for GDI rendering than it is for DirectWrite rendering.)

	Chrome will, when DirectWrite is not available, fall back to its own internal font renderer which will render with full geometric
	precision when no hinting (or broken hinting, or an unapplicable type of hinting) is present.

	Windows 10 should be fine, Mac OS X does not suffer from this.
*/
.ms-icon-activity::before, .ms-icon-advisor::before, .ms-icon-alert::before, .ms-icon-announcement::before, .ms-icon-arrow::before, .ms-icon-attachment::before, .ms-icon-back::before, .ms-icon-backspace::before, .ms-icon-calendar::before, .ms-icon-carat_down::before, .ms-icon-carat_left::before, .ms-icon-carat_menu_left::before, .ms-icon-carat_menu_up::before, .ms-icon-carat_right::before, .ms-icon-carat_sorting_down::before, .ms-icon-carat_sorting_up::before, .ms-icon-cardpoint::before, .ms-icon-cashmanagement::before, .ms-icon-check::before, .ms-icon-checkbox_checked::before, .ms-icon-checkbox_unchecked::before, .ms-icon-checkmark_circle::before, .ms-icon-clock::before, .ms-icon-close::before, .ms-icon-collapse::before, .ms-icon-delete::before, .ms-icon-deposits::before, .ms-icon-deposits_big::before, .ms-icon-devices::before, .ms-icon-documents::before, .ms-icon-ebill::before, .ms-icon-ebill_filled::before, .ms-icon-error::before, .ms-icon-expand::before, .ms-icon-expand_down::before, .ms-icon-expand_right::before, .ms-icon-fast::before, .ms-icon-feedback::before, .ms-icon-help::before, .ms-icon-holdings::before, .ms-icon-holdings_big::before, .ms-icon-info::before, .ms-icon-information::before, .ms-icon-legal::before, .ms-icon-linkedin::before, .ms-icon-list::before, .ms-icon-location::before, .ms-icon-location_filled::before, .ms-icon-lock::before, .ms-icon-mailbox::before, .ms-icon-maintenance::before, .ms-icon-menu::before, .ms-icon-money_lock::before, .ms-icon-nearby::before, .ms-icon-payments::before, .ms-icon-payments_big::before, .ms-icon-pdf::before, .ms-icon-pdf_insert::before, .ms-icon-people::before, .ms-icon-people_solid::before, .ms-icon-phone::before, .ms-icon-plus::before, .ms-icon-privacy::before, .ms-icon-push::before, .ms-icon-quotes::before, .ms-icon-radio_checked::before, .ms-icon-radio_unchecked::before, .ms-icon-reply::before, .ms-icon-recurring::before, .ms-icon-rotate_device::before, .ms-icon-search::before, .ms-icon-settings::before, .ms-icon-share::before, .ms-icon-sms::before, .ms-icon-star::before, .ms-icon-star_filled::before, .ms-icon-square_checkbox_checked::before, .ms-icon-square_checkbox_unchecked::before, .ms-icon-success::before, .ms-icon-thumbs::before, .ms-icon-tick::before, .ms-icon-touch_id::before, .ms-icon-transfers::before, .ms-icon-transfers_big::before, .ms-icon-trash::before, .ms-icon-twitter::before, .ms-hero-icon-arrow-down-s::before, .ms-hero-icon-arrow-down-thin::before, .ms-hero-icon-arrow-down::before, .ms-hero-icon-arrow-left-thin::before, .ms-hero-icon-arrow-left::before, .ms-hero-icon-arrow-right-thin::before, .ms-hero-icon-arrow-right::before, .ms-hero-icon-arrow-up::before, .ms-hero-icon-binder::before, .ms-hero-icon-book::before, .ms-hero-icon-briefcase::before, .ms-hero-icon-cap::before, .ms-hero-icon-chart::before, .ms-hero-icon-checkmark::before, .ms-hero-icon-close-button::before, .ms-hero-icon-close-overlay::before, .ms-hero-icon-currency::before, .ms-hero-icon-directors::before, .ms-hero-icon-down-nav::before, .ms-hero-icon-easel::before, .ms-hero-icon-edit::before, .ms-hero-icon-email-small-inverse::before, .ms-hero-icon-email-small::before, .ms-hero-icon-email::before, .ms-hero-icon-envelope::before, .ms-hero-icon-external-link::before, .ms-hero-icon-facebook::before, .ms-hero-icon-file-text::before, .ms-hero-icon-graph::before, .ms-hero-icon-hamburger::before, .ms-hero-icon-hand-heart::before, .ms-hero-icon-handshake::before, .ms-hero-icon-instagram::before, .ms-hero-icon-light-bulb::before, .ms-hero-icon-linkedin::before, .ms-hero-icon-logo-icon::before, .ms-hero-icon-mail::before, .ms-hero-icon-media-browser::before, .ms-hero-icon-media-tablet::before, .ms-hero-icon-message-small-inverse::before, .ms-hero-icon-message-small-p2::before, .ms-hero-icon-message-small::before, .ms-hero-icon-message::before, .ms-hero-icon-newsroom::before, .ms-hero-icon-p2p::before, .ms-hero-icon-p2p-mobile::before, .ms-hero-icon-pdf::before, .ms-hero-icon-people::before, .ms-hero-icon-person2::before, .ms-hero-icon-person::before, .ms-hero-icon-phone-small-inverse::before, .ms-hero-icon-phone-small::before, .ms-hero-icon-phone::before, .ms-hero-icon-play-link::before, .ms-hero-icon-play::before, .ms-hero-icon-plus-sign::before, .ms-hero-icon-presenter::before, .ms-hero-icon-print::before, .ms-hero-icon-professionals::before, .ms-hero-icon-quote::before, .ms-hero-icon-relations::before, .ms-hero-icon-report::before, .ms-hero-icon-screen::before, .ms-hero-icon-search::before, .ms-hero-icon-shield::before, .ms-hero-icon-twitter::before, .ms-hero-icon-up-nav::before, .ms-hero-icon-video::before, .ms-hero-icon-wealthmgmt::before, .ms-hero-icon-zelle::before, .ms-theme-icon-add-account::before, .ms-theme-icon-add::before, .ms-theme-icon-back-arrow::before, .ms-theme-icon-bar-graph::before, .ms-theme-icon-calendar::before, .ms-theme-icon-check::before, .ms-theme-icon-close-arrow::before, .ms-theme-icon-close::before, .ms-theme-icon-cloud-upload::before, .ms-theme-icon-contact-email::before, .ms-theme-icon-contact-phone-xl::before, .ms-theme-icon-delete::before, .ms-theme-icon-document-review-xl::before, .ms-theme-icon-document-sign-xl::before, .ms-theme-icon-document-upload::before, .ms-theme-icon-document::before, .ms-theme-icon-down-arrow-fill::before, .ms-theme-icon-down-arrow::before, .ms-theme-icon-dropdown-arrow::before, .ms-theme-icon-edit-xl::before, .ms-theme-icon-edit::before, .ms-theme-icon-ehl-logo::before, .ms-theme-icon-error-inline::before, .ms-theme-icon-error-light::before, .ms-theme-icon-error::before, .ms-theme-icon-folder-move::before, .ms-theme-icon-folder-share::before, .ms-theme-icon-folder-upload::before, .ms-theme-icon-folder::before, .ms-theme-icon-forward-arrow::before, .ms-theme-icon-handshake-xl::before, .ms-theme-icon-hide::before, .ms-theme-icon-homeloan-xl::before, .ms-theme-icon-image-file::before, .ms-theme-icon-info-xl::before, .ms-theme-icon-info::before, .ms-theme-icon-link::before, .ms-theme-icon-loading::before, .ms-theme-icon-monte-carlo-graph::before, .ms-theme-icon-no-files-xl::before, .ms-theme-icon-phone::before, .ms-theme-icon-pledge-xl::before, .ms-theme-icon-print::before, .ms-theme-icon-refresh::before, .ms-theme-icon-remove::before, .ms-theme-icon-return-arrow::before, .ms-theme-icon-rounded-right-arrow::before, .ms-theme-icon-rounded-left-arrow::before, .ms-theme-icon-save::before, .ms-theme-icon-secure-xl::before, .ms-theme-icon-settings::before, .ms-theme-icon-show::before, .ms-theme-icon-single-document-xl::before, .ms-theme-icon-soft-warning-inline::before, .ms-theme-icon-soft-warning::before, .ms-theme-icon-status-task-xl::before, .ms-theme-icon-submit-xl::before, .ms-theme-icon-subtract::before, .ms-theme-icon-success::before, .ms-theme-icon-support-xl::before, .ms-theme-icon-task-complete::before, .ms-theme-icon-tooltip::before, .ms-theme-icon-trash::before, .ms-theme-icon-up-arrow-fill::before, .ms-theme-icon-up-arrow::before, .ms-theme-icon-vacation-home-xl::before, .ms-theme-icon-vertical-pagination-desktop::before, .ms-theme-icon-vertical-pagination::before, .ms-theme-icon-wait::before {
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block; }

.ms-icon-activity::before {
  content: ""; }

.ms-icon-advisor::before {
  content: ""; }

.ms-icon-alert::before {
  content: ""; }

.ms-icon-announcement::before {
  content: ""; }

.ms-icon-arrow::before {
  content: ""; }

.ms-icon-attachment::before {
  content: ""; }

.ms-icon-back::before {
  content: ""; }

.ms-icon-backspace::before {
  content: ""; }

.ms-icon-calendar::before {
  content: ""; }

.ms-icon-carat_down::before {
  content: ""; }

.ms-icon-carat_left::before {
  content: ""; }

.ms-icon-carat_menu_left::before {
  content: ""; }

.ms-icon-carat_menu_up::before {
  content: ""; }

.ms-icon-carat_right::before {
  content: ""; }

.ms-icon-carat_sorting_down::before {
  content: ""; }

.ms-icon-carat_sorting_up::before {
  content: ""; }

.ms-icon-cardpoint::before {
  content: ""; }

.ms-icon-cashmanagement::before {
  content: ""; }

.ms-icon-check::before {
  content: ""; }

.ms-icon-checkbox_checked::before {
  content: ""; }

.ms-icon-checkbox_unchecked::before {
  content: ""; }

.ms-icon-checkmark_circle::before {
  content: ""; }

.ms-icon-clock::before {
  content: ""; }

.ms-icon-close::before {
  content: ""; }

.ms-icon-collapse::before {
  content: ""; }

.ms-icon-delete::before {
  content: ""; }

.ms-icon-deposits::before {
  content: ""; }

.ms-icon-deposits_big::before {
  content: ""; }

.ms-icon-devices::before {
  content: ""; }

.ms-icon-documents::before {
  content: ""; }

.ms-icon-ebill::before {
  content: ""; }

.ms-icon-ebill_filled::before {
  content: ""; }

.ms-icon-error::before {
  content: ""; }

.ms-icon-expand::before {
  content: ""; }

.ms-icon-expand_down::before {
  content: ""; }

.ms-icon-expand_right::before {
  content: ""; }

.ms-icon-fast::before {
  content: ""; }

.ms-icon-feedback::before {
  content: ""; }

.ms-icon-help::before {
  content: ""; }

.ms-icon-holdings::before {
  content: ""; }

.ms-icon-holdings_big::before {
  content: ""; }

.ms-icon-info::before {
  content: ""; }

.ms-icon-information::before {
  content: ""; }

.ms-icon-legal::before {
  content: ""; }

.ms-icon-linkedin::before {
  content: ""; }

.ms-icon-list::before {
  content: ""; }

.ms-icon-location::before {
  content: ""; }

.ms-icon-location_filled::before {
  content: ""; }

.ms-icon-lock::before {
  content: ""; }

.ms-icon-mailbox::before {
  content: ""; }

.ms-icon-maintenance::before {
  content: ""; }

.ms-icon-menu::before {
  content: ""; }

.ms-icon-money_lock::before {
  content: ""; }

.ms-icon-nearby::before {
  content: ""; }

.ms-icon-payments::before {
  content: ""; }

.ms-icon-payments_big::before {
  content: ""; }

.ms-icon-pdf::before {
  content: ""; }

.ms-icon-pdf_insert::before {
  content: ""; }

.ms-icon-people::before {
  content: ""; }

.ms-icon-people_solid::before {
  content: ""; }

.ms-icon-phone::before {
  content: ""; }

.ms-icon-plus::before {
  content: ""; }

.ms-icon-privacy::before {
  content: ""; }

.ms-icon-push::before {
  content: ""; }

.ms-icon-quotes::before {
  content: ""; }

.ms-icon-radio_checked::before {
  content: ""; }

.ms-icon-radio_unchecked::before {
  content: ""; }

.ms-icon-reply::before {
  content: ""; }

.ms-icon-recurring::before {
  content: ""; }

.ms-icon-rotate_device::before {
  content: ""; }

.ms-icon-search::before {
  content: ""; }

.ms-icon-settings::before {
  content: ""; }

.ms-icon-share::before {
  content: ""; }

.ms-icon-sms::before {
  content: ""; }

.ms-icon-star::before {
  content: ""; }

.ms-icon-star_filled::before {
  content: ""; }

.ms-icon-square_checkbox_checked::before {
  content: ""; }

.ms-icon-square_checkbox_unchecked::before {
  content: ""; }

.ms-icon-success::before {
  content: ""; }

.ms-icon-thumbs::before {
  content: ""; }

.ms-icon-tick::before {
  content: ""; }

.ms-icon-touch_id::before {
  content: ""; }

.ms-icon-transfers::before {
  content: ""; }

.ms-icon-transfers_big::before {
  content: ""; }

.ms-icon-trash::before {
  content: ""; }

.ms-icon-twitter::before {
  content: ""; }

.ms-flavor_android .ms-icon-carat_down::before {
  content: ""; }

.ms-flavor_android .ms-icon-checkbox_checked::before {
  content: ""; }

.ms-flavor_android .ms-icon-checkbox_unchecked::before {
  content: ""; }

.ms-flavor_android .ms-icon-nearby::before {
  content: ""; }

.ms-hero-icon-arrow-down-s::before, .ms-hero-icon-arrow-down-thin::before, .ms-hero-icon-arrow-down::before, .ms-hero-icon-arrow-left-thin::before, .ms-hero-icon-arrow-left::before, .ms-hero-icon-arrow-right-thin::before, .ms-hero-icon-arrow-right::before, .ms-hero-icon-arrow-up::before, .ms-hero-icon-binder::before, .ms-hero-icon-book::before, .ms-hero-icon-briefcase::before, .ms-hero-icon-cap::before, .ms-hero-icon-chart::before, .ms-hero-icon-checkmark::before, .ms-hero-icon-close-button::before, .ms-hero-icon-close-overlay::before, .ms-hero-icon-currency::before, .ms-hero-icon-directors::before, .ms-hero-icon-down-nav::before, .ms-hero-icon-easel::before, .ms-hero-icon-edit::before, .ms-hero-icon-email-small-inverse::before, .ms-hero-icon-email-small::before, .ms-hero-icon-email::before, .ms-hero-icon-envelope::before, .ms-hero-icon-external-link::before, .ms-hero-icon-facebook::before, .ms-hero-icon-file-text::before, .ms-hero-icon-graph::before, .ms-hero-icon-hamburger::before, .ms-hero-icon-hand-heart::before, .ms-hero-icon-handshake::before, .ms-hero-icon-instagram::before, .ms-hero-icon-light-bulb::before, .ms-hero-icon-linkedin::before, .ms-hero-icon-logo-icon::before, .ms-hero-icon-mail::before, .ms-hero-icon-media-browser::before, .ms-hero-icon-media-tablet::before, .ms-hero-icon-message-small-inverse::before, .ms-hero-icon-message-small-p2::before, .ms-hero-icon-message-small::before, .ms-hero-icon-message::before, .ms-hero-icon-newsroom::before, .ms-hero-icon-p2p::before, .ms-hero-icon-p2p-mobile::before, .ms-hero-icon-pdf::before, .ms-hero-icon-people::before, .ms-hero-icon-person2::before, .ms-hero-icon-person::before, .ms-hero-icon-phone-small-inverse::before, .ms-hero-icon-phone-small::before, .ms-hero-icon-phone::before, .ms-hero-icon-play-link::before, .ms-hero-icon-play::before, .ms-hero-icon-plus-sign::before, .ms-hero-icon-presenter::before, .ms-hero-icon-print::before, .ms-hero-icon-professionals::before, .ms-hero-icon-quote::before, .ms-hero-icon-relations::before, .ms-hero-icon-report::before, .ms-hero-icon-screen::before, .ms-hero-icon-search::before, .ms-hero-icon-shield::before, .ms-hero-icon-twitter::before, .ms-hero-icon-up-nav::before, .ms-hero-icon-video::before, .ms-hero-icon-wealthmgmt::before, .ms-hero-icon-zelle::before {
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block;
  font-family: 'icomoon'; }

.ms-hero-icon-arrow-down-s::before {
  content: ""; }

.ms-hero-icon-arrow-down-thin::before {
  content: ""; }

.ms-hero-icon-arrow-down::before {
  content: ""; }

.ms-hero-icon-arrow-left-thin::before {
  content: ""; }

.ms-hero-icon-arrow-left::before {
  content: ""; }

.ms-hero-icon-arrow-right-thin::before {
  content: ""; }

.ms-hero-icon-arrow-right::before {
  content: ""; }

.ms-hero-icon-arrow-up::before {
  content: ""; }

.ms-hero-icon-binder::before {
  content: ""; }

.ms-hero-icon-book::before {
  content: ""; }

.ms-hero-icon-briefcase::before {
  content: ""; }

.ms-hero-icon-cap::before {
  content: ""; }

.ms-hero-icon-chart::before {
  content: ""; }

.ms-hero-icon-checkmark::before {
  content: ""; }

.ms-hero-icon-close-button::before {
  content: ""; }

.ms-hero-icon-close-overlay::before {
  content: ""; }

.ms-hero-icon-currency::before {
  content: ""; }

.ms-hero-icon-directors::before {
  content: ""; }

.ms-hero-icon-down-nav::before {
  content: ""; }

.ms-hero-icon-easel::before {
  content: ""; }

.ms-hero-icon-edit::before {
  content: ""; }

.ms-hero-icon-email-small-inverse::before {
  content: ""; }

.ms-hero-icon-email-small::before {
  content: ""; }

.ms-hero-icon-email::before {
  content: ""; }

.ms-hero-icon-envelope::before {
  content: ""; }

.ms-hero-icon-external-link::before {
  content: ""; }

.ms-hero-icon-facebook::before {
  content: ""; }

.ms-hero-icon-file-text::before {
  content: ""; }

.ms-hero-icon-graph::before {
  content: ""; }

.ms-hero-icon-hamburger::before {
  content: ""; }

.ms-hero-icon-hand-heart::before {
  content: ""; }

.ms-hero-icon-handshake::before {
  content: ""; }

.ms-hero-icon-instagram::before {
  content: ""; }

.ms-hero-icon-light-bulb::before {
  content: ""; }

.ms-hero-icon-linkedin::before {
  content: ""; }

.ms-hero-icon-logo-icon::before {
  content: ""; }

.ms-hero-icon-mail::before {
  content: ""; }

.ms-hero-icon-media-browser::before {
  content: ""; }

.ms-hero-icon-media-tablet::before {
  content: ""; }

.ms-hero-icon-message-small-inverse::before {
  content: ""; }

.ms-hero-icon-message-small-p2::before {
  content: ""; }

.ms-hero-icon-message-small::before {
  content: ""; }

.ms-hero-icon-message::before {
  content: ""; }

.ms-hero-icon-newsroom::before {
  content: ""; }

.ms-hero-icon-p2p::before {
  content: "";
  padding-left: 10px; }

.ms-hero-icon-p2p-mobile::before {
  content: ""; }

.ms-hero-icon-pdf::before {
  content: ""; }

.ms-hero-icon-people::before {
  content: ""; }

.ms-hero-icon-person2::before {
  content: ""; }

.ms-hero-icon-person::before {
  content: ""; }

.ms-hero-icon-phone-small-inverse::before {
  content: ""; }

.ms-hero-icon-phone-small::before {
  content: ""; }

.ms-hero-icon-phone::before {
  content: ""; }

.ms-hero-icon-play-link::before {
  content: ""; }

.ms-hero-icon-play::before {
  content: ""; }

.ms-hero-icon-plus-sign::before {
  content: ""; }

.ms-hero-icon-presenter::before {
  content: ""; }

.ms-hero-icon-print::before {
  content: ""; }

.ms-hero-icon-professionals::before {
  content: ""; }

.ms-hero-icon-quote::before {
  content: "“"; }

.ms-hero-icon-relations::before {
  content: ""; }

.ms-hero-icon-report::before {
  content: ""; }

.ms-hero-icon-screen::before {
  content: ""; }

.ms-hero-icon-search::before {
  content: ""; }

.ms-hero-icon-shield::before {
  content: ""; }

.ms-hero-icon-twitter::before {
  content: ""; }

.ms-hero-icon-up-nav::before {
  content: ""; }

.ms-hero-icon-video::before {
  content: ""; }

.ms-hero-icon-wealthmgmt::before {
  content: ""; }

.ms-hero-icon-zelle::before {
  content: ""; }

.ms-theme-icon-add-account::before, .ms-theme-icon-add::before, .ms-theme-icon-back-arrow::before, .ms-theme-icon-bar-graph::before, .ms-theme-icon-calendar::before, .ms-theme-icon-check::before, .ms-theme-icon-close-arrow::before, .ms-theme-icon-close::before, .ms-theme-icon-cloud-upload::before, .ms-theme-icon-contact-email::before, .ms-theme-icon-contact-phone-xl::before, .ms-theme-icon-delete::before, .ms-theme-icon-document-review-xl::before, .ms-theme-icon-document-sign-xl::before, .ms-theme-icon-document-upload::before, .ms-theme-icon-document::before, .ms-theme-icon-down-arrow-fill::before, .ms-theme-icon-down-arrow::before, .ms-theme-icon-dropdown-arrow::before, .ms-theme-icon-edit-xl::before, .ms-theme-icon-edit::before, .ms-theme-icon-ehl-logo::before, .ms-theme-icon-error-inline::before, .ms-theme-icon-error-light::before, .ms-theme-icon-error::before, .ms-theme-icon-folder-move::before, .ms-theme-icon-folder-share::before, .ms-theme-icon-folder-upload::before, .ms-theme-icon-folder::before, .ms-theme-icon-forward-arrow::before, .ms-theme-icon-handshake-xl::before, .ms-theme-icon-hide::before, .ms-theme-icon-homeloan-xl::before, .ms-theme-icon-image-file::before, .ms-theme-icon-info-xl::before, .ms-theme-icon-info::before, .ms-theme-icon-link::before, .ms-theme-icon-loading::before, .ms-theme-icon-monte-carlo-graph::before, .ms-theme-icon-no-files-xl::before, .ms-theme-icon-phone::before, .ms-theme-icon-pledge-xl::before, .ms-theme-icon-print::before, .ms-theme-icon-refresh::before, .ms-theme-icon-remove::before, .ms-theme-icon-return-arrow::before, .ms-theme-icon-rounded-right-arrow::before, .ms-theme-icon-rounded-left-arrow::before, .ms-theme-icon-save::before, .ms-theme-icon-secure-xl::before, .ms-theme-icon-settings::before, .ms-theme-icon-show::before, .ms-theme-icon-single-document-xl::before, .ms-theme-icon-soft-warning-inline::before, .ms-theme-icon-soft-warning::before, .ms-theme-icon-status-task-xl::before, .ms-theme-icon-submit-xl::before, .ms-theme-icon-subtract::before, .ms-theme-icon-success::before, .ms-theme-icon-support-xl::before, .ms-theme-icon-task-complete::before, .ms-theme-icon-tooltip::before, .ms-theme-icon-trash::before, .ms-theme-icon-up-arrow-fill::before, .ms-theme-icon-up-arrow::before, .ms-theme-icon-vacation-home-xl::before, .ms-theme-icon-vertical-pagination-desktop::before, .ms-theme-icon-vertical-pagination::before, .ms-theme-icon-wait::before {
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block;
  font-family: 'MSTheme'; }

.ms-theme-icon-add-account::before {
  content: ""; }

.ms-theme-icon-add::before {
  content: ""; }

.ms-theme-icon-back-arrow::before {
  content: ""; }

.ms-theme-icon-bar-graph::before {
  content: ""; }

.ms-theme-icon-calendar::before {
  content: ""; }

.ms-theme-icon-check::before {
  content: ""; }

.ms-theme-icon-close-arrow::before {
  content: ""; }

.ms-theme-icon-close::before {
  content: ""; }

.ms-theme-icon-cloud-upload::before {
  content: ""; }

.ms-theme-icon-contact-email::before {
  content: ""; }

.ms-theme-icon-contact-phone-xl::before {
  content: ""; }

.ms-theme-icon-delete::before {
  content: ""; }

.ms-theme-icon-document-review-xl::before {
  content: ""; }

.ms-theme-icon-document-sign-xl::before {
  content: ""; }

.ms-theme-icon-document-upload::before {
  content: ""; }

.ms-theme-icon-document::before {
  content: ""; }

.ms-theme-icon-down-arrow-fill::before {
  content: ""; }

.ms-theme-icon-down-arrow::before {
  content: ""; }

.ms-theme-icon-dropdown-arrow::before {
  content: ""; }

.ms-theme-icon-edit-xl::before {
  content: ""; }

.ms-theme-icon-edit::before {
  content: ""; }

.ms-theme-icon-ehl-logo::before {
  content: ""; }

.ms-theme-icon-error-inline::before {
  content: ""; }

.ms-theme-icon-error-light::before {
  content: ""; }

.ms-theme-icon-error::before {
  content: ""; }

.ms-theme-icon-folder-move::before {
  content: ""; }

.ms-theme-icon-folder-share::before {
  content: ""; }

.ms-theme-icon-folder-upload::before {
  content: ""; }

.ms-theme-icon-folder::before {
  content: ""; }

.ms-theme-icon-forward-arrow::before {
  content: ""; }

.ms-theme-icon-handshake-xl::before {
  content: ""; }

.ms-theme-icon-hide::before {
  content: ""; }

.ms-theme-icon-homeloan-xl::before {
  content: ""; }

.ms-theme-icon-image-file::before {
  content: ""; }

.ms-theme-icon-info-xl::before {
  content: ""; }

.ms-theme-icon-info::before {
  content: ""; }

.ms-theme-icon-link::before {
  content: ""; }

.ms-theme-icon-loading::before {
  content: ""; }

.ms-theme-icon-monte-carlo-graph::before {
  content: ""; }

.ms-theme-icon-no-files-xl::before {
  content: ""; }

.ms-theme-icon-phone::before {
  content: ""; }

.ms-theme-icon-pledge-xl::before {
  content: ""; }

.ms-theme-icon-print::before {
  content: ""; }

.ms-theme-icon-refresh::before {
  content: ""; }

.ms-theme-icon-remove::before {
  content: ""; }

.ms-theme-icon-return-arrow::before {
  content: ""; }

.ms-theme-icon-rounded-right-arrow::before {
  content: ""; }

.ms-theme-icon-rounded-left-arrow::before {
  content: ""; }

.ms-theme-icon-save::before {
  content: ""; }

.ms-theme-icon-secure-xl::before {
  content: ""; }

.ms-theme-icon-settings::before {
  content: ""; }

.ms-theme-icon-show::before {
  content: ""; }

.ms-theme-icon-single-document-xl::before {
  content: ""; }

.ms-theme-icon-soft-warning-inline::before {
  content: ""; }

.ms-theme-icon-soft-warning::before {
  content: ""; }

.ms-theme-icon-status-task-xl::before {
  content: ""; }

.ms-theme-icon-submit-xl::before {
  content: ""; }

.ms-theme-icon-subtract::before {
  content: ""; }

.ms-theme-icon-success::before {
  content: ""; }

.ms-theme-icon-support-xl::before {
  content: ""; }

.ms-theme-icon-task-complete::before {
  content: ""; }

.ms-theme-icon-tooltip::before {
  content: ""; }

.ms-theme-icon-trash::before {
  content: ""; }

.ms-theme-icon-up-arrow-fill::before {
  content: ""; }

.ms-theme-icon-up-arrow::before {
  content: ""; }

.ms-theme-icon-vacation-home-xl::before {
  content: ""; }

.ms-theme-icon-vertical-pagination-desktop::before {
  content: ""; }

.ms-theme-icon-vertical-pagination::before {
  content: ""; }

.ms-theme-icon-wait::before {
  content: ""; }

.ms-theme-icon-calendar {
  position: relative; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_1::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "1";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_2::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "2";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_3::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "3";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_4::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "4";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_5::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "5";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_6::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "6";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_7::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "7";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_8::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "8";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_9::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "9";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_10::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "10";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_11::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "11";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_12::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "12";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_13::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "13";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_14::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "14";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_15::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "15";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_16::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "16";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_17::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "17";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_18::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "18";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_19::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "19";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_20::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "20";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_21::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "21";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_22::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "22";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_23::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "23";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_24::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "24";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_25::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "25";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_26::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "26";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_27::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "27";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_28::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "28";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_29::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "29";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_30::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "30";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }
  .ms-theme-icon-calendar.ms-theme-icon-calendar_31::after {
    font-family: "Karla Bold";
    font-weight: 600;
    -webkit-transform: translate(-50%, -42%);
    transform: translate(-50%, -42%);
    content: "31";
    font-size: 60%;
    left: 50%;
    position: absolute;
    top: 50%; }

.ms-hero-icon_on-dark,
.ms-icon_on-dark {
  color: #bbb; }

.ms-hero-icon_on-dark,
.ms-icon_on-light {
  color: #777; }

.ms-icon_circle-dark {
  background-color: #1574b1;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 25px; }

@media (max-width: 767px) {
  .ms-icon-sizing_list,
  .ms-icon-sizing_list-left,
  .ms-icon-sizing_list-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 19px;
    line-height: 19px; }
  .ms-icon-sizing_list-left {
    margin-right: 5px; }
  .ms-icon-sizing_list-right {
    margin-left: 5px; } }

@media (max-width: 767px) {
  .ms-icon-sizing_form,
  .ms-icon-sizing_form-left,
  .ms-icon-sizing_form-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 19px;
    line-height: 19px; }
  .ms-icon-sizing_form-left {
    margin-right: 5px; }
  .ms-icon-sizing_form-right {
    margin-left: 5px; } }

@media (max-width: 767px) {
  .ms-icon-sizing_table-grid,
  .ms-icon-sizing_table-grid-left,
  .ms-icon-sizing_table-grid-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 19px;
    line-height: 19px; }
  .ms-icon-sizing_table-grid-left {
    margin-right: 5px; }
  .ms-icon-sizing_table-grid-right {
    margin-left: 5px; } }

@media (max-width: 767px) {
  .ms-icon-sizing_small-table,
  .ms-icon-sizing_small-table-left,
  .ms-icon-sizing_small-table-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 19px;
    line-height: 19px; }
  .ms-icon-sizing_small-table-left {
    margin-right: 5px; }
  .ms-icon-sizing_small-table-right {
    margin-left: 5px; } }

@media (max-width: 767px) {
  .ms-icon-sizing_small,
  .ms-icon-sizing_small-left,
  .ms-icon-sizing_small-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 12px;
    line-height: 12px; }
  .ms-icon-sizing_small-left {
    margin-right: 3px; }
  .ms-icon-sizing_small-right {
    margin-left: 3px; } }

@media (min-width: 768px) {
  .ms-icon-sizing_txn-card,
  .ms-icon-sizing_txn-card-left,
  .ms-icon-sizing_txn-card-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 16px;
    line-height: 16px; }
  .ms-icon-sizing_txn-card-left {
    margin-right: 10px; }
  .ms-icon-sizing_txn-card-right {
    margin-left: 10px; } }

@media (min-width: 768px) {
  .ms-icon-sizing_list,
  .ms-icon-sizing_list-left,
  .ms-icon-sizing_list-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 19px;
    line-height: 19px; }
  .ms-icon-sizing_list-left {
    margin-right: 5px; }
  .ms-icon-sizing_list-right {
    margin-left: 5px; } }

@media (min-width: 768px) {
  .ms-icon-sizing_form,
  .ms-icon-sizing_form-left,
  .ms-icon-sizing_form-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 19px;
    line-height: 19px; }
  .ms-icon-sizing_form-left {
    margin-right: 5px; }
  .ms-icon-sizing_form-right {
    margin-left: 5px; } }

@media (min-width: 768px) {
  .ms-icon-sizing_table-grid,
  .ms-icon-sizing_table-grid-left,
  .ms-icon-sizing_table-grid-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 19px;
    line-height: 19px; }
  .ms-icon-sizing_table-grid-left {
    margin-right: 5px; }
  .ms-icon-sizing_table-grid-right {
    margin-left: 5px; } }

@media (min-width: 768px) {
  .ms-icon-sizing_small-table,
  .ms-icon-sizing_small-table-left,
  .ms-icon-sizing_small-table-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 16px;
    line-height: 16px; }
  .ms-icon-sizing_small-table-left {
    margin-right: 4px; }
  .ms-icon-sizing_small-table-right {
    margin-left: 4px; } }

@media (min-width: 768px) {
  .ms-icon-sizing_small,
  .ms-icon-sizing_small-left,
  .ms-icon-sizing_small-right {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 12px;
    line-height: 12px; }
  .ms-icon-sizing_small-left {
    margin-right: 3px; }
  .ms-icon-sizing_small-right {
    margin-left: 3px; } }

[class*="-icon-"].no-icon::after {
  content: '' !important; }

a[class^="ms-theme-icon-"] {
  text-decoration: none; }

.ms-icon-2x {
  font-size: 2em; }

.ms-icon-3x {
  font-size: 3em; }

.ms-icon-4x {
  font-size: 4em; }

.ms-icon-5x {
  font-size: 5em; }

.ms-icon-rotate-90 {
  display: inline-block;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); }

.ms-icon-rotate-180 {
  display: inline-block;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.ms-icon-rotate-270 {
  display: inline-block;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg); }

.ms-icon-rotate-horizontal {
  display: inline-block;
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1); }

.ms-icon-rotate-vertical {
  display: inline-block;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1); }

body {
  margin: 0; }

.ms-theme {
  /**
	* This will speed up any delay that might exist for touch users.
	* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
	*/ }
  .ms-theme * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-font-smoothing: antialiased; }
  .ms-theme button {
    text-transform: none;
    background: none;
    border: 0;
    outline: none; }
  .ms-theme button,
  .ms-theme html input[type="button"],
  .ms-theme input[type="reset"],
  .ms-theme input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer; }
  .ms-theme button,
  .ms-theme input,
  .ms-theme select,
  .ms-theme textarea {
    -webkit-tap-highlight-color: transparent; }
  .ms-theme a,
  .ms-theme area,
  .ms-theme button,
  .ms-theme [role="button"],
  .ms-theme input:not([type="range"]),
  .ms-theme label,
  .ms-theme select,
  .ms-theme summary,
  .ms-theme textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation; }

.h1 {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 28px;
  line-height: 33px; }

.h2 {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 22px;
  line-height: 27px; }

.h3 {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 18px;
  line-height: 19px; }

.h4 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 18px;
  line-height: normal; }

.h5 {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 16px;
  line-height: 19px; }

.h6 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 16px;
  line-height: 19px; }

.h7 {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 14px;
  line-height: 19px; }

.h8 {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 13px;
  line-height: 18px; }

.h9 {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 11px;
  line-height: 14px; }

.h0 {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 10px;
  line-height: normal; }

.t1 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 13px;
  line-height: 18px; }

.t2 {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 13px;
  line-height: 18px; }

.t3 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px; }

.t4 {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 11px;
  line-height: 16px; }

.t5 {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 11px;
  line-height: 13px; }

.t6 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 14px;
  line-height: 22px; }

.t7 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 14px;
  line-height: 19px; }

.t8 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 22px;
  line-height: normal; }

.t9 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 28px;
  line-height: normal; }

.t0 {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 10px;
  line-height: normal; }

.t12 {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 11px;
  line-height: 15px; }

b,
.b,
strong {
  font-family: "Open Sans Semibold";
  font-weight: 600; }

i,
.i {
  font-style: italic; }

.u {
  text-decoration: underline; }

.type-h1 {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 35px;
  line-height: 40px; }
  @media (min-width: 768px) {
    .type-h1 {
      font-size: 46px;
      line-height: 52px; } }

@media (max-width: 767px) {
  .type-h1-small {
    font-family: "MS Gloriola II Display Thin";
    font-weight: 300;
    font-size: 35px;
    line-height: 40px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-h1-small {
      font-size: 46px;
      line-height: 52px; } }

@media (min-width: 768px) {
  .type-h1-large {
    font-family: "MS Gloriola II Display Thin";
    font-weight: 300;
    font-size: 35px;
    line-height: 40px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-h1-large {
      font-size: 46px;
      line-height: 52px; } }

.type-h2 {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 25px;
  line-height: 30px; }
  @media (min-width: 768px) {
    .type-h2 {
      font-size: 30px;
      line-height: 36px; } }

@media (max-width: 767px) {
  .type-h2-small {
    font-family: "MS Gloriola II Std Light";
    font-weight: normal;
    font-size: 25px;
    line-height: 30px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-h2-small {
      font-size: 30px;
      line-height: 36px; } }

@media (min-width: 768px) {
  .type-h2-large {
    font-family: "MS Gloriola II Std Light";
    font-weight: normal;
    font-size: 25px;
    line-height: 30px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-h2-large {
      font-size: 30px;
      line-height: 36px; } }

.type-h3 {
  font-family: "Karla Bold";
  font-weight: 600;
  font-size: 18px;
  line-height: 24px; }
  @media (min-width: 768px) {
    .type-h3 {
      font-size: 20px;
      line-height: 28px; } }

@media (max-width: 767px) {
  .type-h3-small {
    font-family: "Karla Bold";
    font-weight: 600;
    font-size: 18px;
    line-height: 24px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-h3-small {
      font-size: 20px;
      line-height: 28px; } }

@media (min-width: 768px) {
  .type-h3-large {
    font-family: "Karla Bold";
    font-weight: 600;
    font-size: 18px;
    line-height: 24px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-h3-large {
      font-size: 20px;
      line-height: 28px; } }

.type-header-xl {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 45px;
  line-height: 50px; }
  @media (min-width: 768px) {
    .type-header-xl {
      font-size: 72px;
      line-height: 74px; } }

@media (max-width: 767px) {
  .type-header-xl-small {
    font-family: "MS Gloriola II Display Thin";
    font-weight: 300;
    font-size: 45px;
    line-height: 50px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-header-xl-small {
      font-size: 72px;
      line-height: 74px; } }

@media (min-width: 768px) {
  .type-header-xl-large {
    font-family: "MS Gloriola II Display Thin";
    font-weight: 300;
    font-size: 45px;
    line-height: 50px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-header-xl-large {
      font-size: 72px;
      line-height: 74px; } }

.type-body {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px; }
  @media (min-width: 768px) {
    .type-body {
      font-size: 16px;
      line-height: 24px; } }

@media (max-width: 767px) {
  .type-body-small {
    font-family: "Karla Regular";
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-body-small {
      font-size: 16px;
      line-height: 24px; } }

@media (min-width: 768px) {
  .type-body-large {
    font-family: "Karla Regular";
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-body-large {
      font-size: 16px;
      line-height: 24px; } }

.type-body-bold {
  font-family: "Karla Bold";
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px; }
  @media (min-width: 768px) {
    .type-body-bold {
      font-size: 16px;
      line-height: 24px; } }

@media (max-width: 767px) {
  .type-body-bold-small {
    font-family: "Karla Bold";
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-body-bold-small {
      font-size: 16px;
      line-height: 24px; } }

@media (min-width: 768px) {
  .type-body-bold-large {
    font-family: "Karla Bold";
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.2px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-body-bold-large {
      font-size: 16px;
      line-height: 24px; } }

.type-body-xs {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px; }
  @media (min-width: 768px) {
    .type-body-xs {
      font-size: 14px;
      line-height: 20px; } }

@media (max-width: 767px) {
  .type-body-xs-small {
    font-family: "Karla Regular";
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.2px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-body-xs-small {
      font-size: 14px;
      line-height: 20px; } }

@media (min-width: 768px) {
  .type-body-xs-large {
    font-family: "Karla Regular";
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.2px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-body-xs-large {
      font-size: 14px;
      line-height: 20px; } }

.type-body-xl {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.2px; }
  @media (min-width: 768px) {
    .type-body-xl {
      font-size: 20px;
      line-height: 28px; } }

@media (max-width: 767px) {
  .type-body-xl-small {
    font-family: "Karla Regular";
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.2px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-body-xl-small {
      font-size: 20px;
      line-height: 28px; } }

@media (min-width: 768px) {
  .type-body-xl-large {
    font-family: "Karla Regular";
    font-weight: normal;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.2px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-body-xl-large {
      font-size: 20px;
      line-height: 28px; } }

.type-body-xl-bold {
  font-family: "Karla Bold";
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0.2px; }
  @media (min-width: 768px) {
    .type-body-xl-bold {
      font-size: 20px;
      line-height: 28px; } }

@media (max-width: 767px) {
  .type-body-xl-bold-small {
    font-family: "Karla Bold";
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.2px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-body-xl-bold-small {
      font-size: 20px;
      line-height: 28px; } }

@media (min-width: 768px) {
  .type-body-xl-bold-large {
    font-family: "Karla Bold";
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.2px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-body-xl-bold-large {
      font-size: 20px;
      line-height: 28px; } }

.type-input {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 20px;
  line-height: 26px; }
  @media (min-width: 768px) {
    .type-input {
      font-size: 20px;
      line-height: 26px; } }

@media (max-width: 767px) {
  .type-input-small {
    font-family: "MS Gloriola II Std Light";
    font-weight: normal;
    font-size: 20px;
    line-height: 26px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-input-small {
      font-size: 20px;
      line-height: 26px; } }

@media (min-width: 768px) {
  .type-input-large {
    font-family: "MS Gloriola II Std Light";
    font-weight: normal;
    font-size: 20px;
    line-height: 26px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-input-large {
      font-size: 20px;
      line-height: 26px; } }

.type-label {
  font-family: "PF Din Text Cond Pro Bold";
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1px; }
  @media (min-width: 768px) {
    .type-label {
      font-size: 12px;
      line-height: 18px; } }

@media (max-width: 767px) {
  .type-label-small {
    font-family: "PF Din Text Cond Pro Bold";
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-label-small {
      font-size: 12px;
      line-height: 18px; } }

@media (min-width: 768px) {
  .type-label-large {
    font-family: "PF Din Text Cond Pro Bold";
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-label-large {
      font-size: 12px;
      line-height: 18px; } }

.type-progress-label {
  font-family: "PF Din Text Cond Pro Bold";
  font-weight: 600;
  font-size: 16px;
  line-height: 24px; }
  @media (min-width: 768px) {
    .type-progress-label {
      font-size: 16px;
      line-height: 24px; } }

@media (max-width: 767px) {
  .type-progress-label-small {
    font-family: "PF Din Text Cond Pro Bold";
    font-weight: 600;
    font-size: 16px;
    line-height: 24px; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .type-progress-label-small {
      font-size: 16px;
      line-height: 24px; } }

@media (min-width: 768px) {
  .type-progress-label-large {
    font-family: "PF Din Text Cond Pro Bold";
    font-weight: 600;
    font-size: 16px;
    line-height: 24px; } }
  @media (min-width: 768px) and (min-width: 768px) {
    .type-progress-label-large {
      font-size: 16px;
      line-height: 24px; } }

.ms-theme b,
.ms-theme .b,
.ms-theme strong {
  font-family: "Karla Bold";
  font-weight: 600; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-headline-large {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 6vh;
  line-height: 7.5vh; }
  @media (min-width: 768px) {
    .ms-headline-large {
      font-size: 80px;
      line-height: 70px; } }

.ms-headline-medium {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 5.25vh;
  line-height: 6vh;
  margin-top: 3vh; }
  @media (min-width: 768px) {
    .ms-headline-medium {
      font-size: 52px;
      line-height: 65px; } }
  .ms-headline-medium:first-child {
    margin-top: 0; }

.ms-headline-medium_normal {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal; }

.ms-headline-small {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 3.75vh;
  line-height: 4.5vh; }
  @media (min-width: 768px) {
    .ms-headline-small {
      font-size: 34px;
      line-height: 40px; } }

.ms-headline-small_thin {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300; }

.ms-headline-small_nm {
  margin: 0; }

.ms-headline_ms-blue {
  color: #0f8ec7; }

.ms-headline_ms-gray {
  color: #666; }

.ms-headline-small_dark-blue {
  color: #002b51; }

.ms-headline-tiny {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 2.85vh;
  line-height: 3.27vh; }
  @media (min-width: 768px) {
    .ms-headline-tiny {
      font-size: 20px;
      line-height: 30px; } }

.ms-headline-tiny_nm {
  margin: 0; }

.ms-headline-tiny_dark-blue {
  color: #002b51; }

@-webkit-keyframes ms-highcharts__column-data-label_load {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes ms-highcharts__column-data-label_load {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.ms-highcharts__column-data-label {
  -webkit-animation: ms-highcharts__column-data-label_load 1s ease-in;
  animation: ms-highcharts__column-data-label_load 1s ease-in;
  text-align: center; }

.ms-highcharts__range-chart-tooltip {
  font-size: 14px;
  line-height: normal;
  font-family: "MS Gloriola II Std Light";
  font-weight: normal; }
  .ms-highcharts__range-chart-tooltip .ms-highcharts__range-chart-tooltip-title {
    font-family: "Karla Bold";
    font-weight: 600;
    margin: 5px;
    padding: 5px;
    border-bottom: 1px solid #dadada; }
  .ms-highcharts__range-chart-tooltip .ms-highcharts__range-chart-tooltip-subtitle {
    text-transform: uppercase;
    color: #666; }
  .ms-highcharts__range-chart-tooltip .ms-highcharts__range-chart-tooltip-subtitle-value {
    color: #002b51;
    margin-bottom: 5px; }
  .ms-highcharts__range-chart-tooltip .ms-highcharts__range-chart-tooltip-subtitle-value-2 {
    color: #002b51; }
  .ms-highcharts__range-chart-tooltip .ms-highcharts__range-chart-tooltip-market-values {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    padding-left: 5px;
    text-align: center;
    -ms-flex-preferred-size: auto; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-highcharts__range-chart-tooltip .ms-highcharts__range-chart-tooltip-market-values {
        -ms-flex: 1 1 0%; } }

@media screen and (-ms-high-contrast: none) and (min-width: 768px), (-ms-high-contrast: active) and (min-width: 768px) {
  .ms-highcharts__range-chart-tooltip {
    width: 400px; } }

@media (max-width: 767px) {
  .highcharts-tooltip span {
    width: 100vw; } }

.ms-theme {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
  /*
		I'm unsure if we even need this?
		Regardless these should be considered @deprecated
	*/ }
  @media (min-width: 768px) {
    .ms-theme {
      font-size: 16px;
      line-height: 24px; } }
  .ms-theme input.text-extra-large {
    font-family: "MS Gloriola II Display Thin";
    font-weight: 300;
    font-size: 16vw;
    line-height: 7.5vh; }
  .ms-theme input.text-medium {
    font-family: "Karla Regular";
    font-weight: normal;
    color: #fff;
    font-size: 12vw;
    line-height: 13.33vw; }
  .ms-theme input.black {
    color: #333; }
  .ms-theme .input-help {
    font-family: "Karla Regular";
    font-weight: normal;
    font-size: 3.2vw;
    line-height: 2.25vh; }

.h100pct {
  height: 100%; }

.ms-bg-white {
  background-color: #fff; }

.ms-bg-blue {
  background-color: #0f8ec7; }

.ms-bg-teal {
  background-color: #6fc8cb; }

.ms-bg-light-gray {
  background-color: #f5f5f5; }

.ms-footnote {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 11px;
  line-height: 18px;
  color: #666;
  padding: 5px 0; }

.ms-graph-label {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 3.2vw;
  line-height: 3.3vh; }

.ms-tooltip-label {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 2.4vw;
  line-height: 1.8vh; }

/*
 * Multi-column layout on large screens and 1 column-layout on smaller ones
 */
/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-theme-layout {
  height: 100%; }
  @media (max-width: 767px) {
    .ms-theme-layout {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch; } }
  @media screen and (max-width: 767px) and (-ms-high-contrast: none), (max-width: 767px) and (-ms-high-contrast: active) {
    .ms-theme-layout {
      -ms-flex: 1 1 0%; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .ms-theme-layout {
      min-height: 0; } }
  @media (min-width: 768px) {
    .ms-theme-layout {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      min-width: 0;
      min-height: 0; } }
  @media screen and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
    .ms-theme-layout {
      -ms-flex: 1 1 0%; } }
  @media (max-width: 359px) {
    .ms-theme-layout.ms-theme-layout_no-padding-xs .ms-theme-layout__inner,
    .ms-theme-layout.ms-theme-layout_no-padding-xs .ms-theme-layout__secondary {
      padding: 0; } }

@media (max-width: 767px) {
  .ms-theme-layout__main {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    padding: 4vw 10vw; } }
  @media screen and (max-width: 767px) and (-ms-high-contrast: none), (max-width: 767px) and (-ms-high-contrast: active) {
    .ms-theme-layout__main {
      -ms-flex: 1 1 0%; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .ms-theme-layout__main {
      min-height: 0; } }

@media (max-width: 767px) {
    .ms-theme-layout__main .ms-theme-layout__inner {
      padding-top: 2vh; }
    .ms-theme-layout__main.ms-theme-layout__main_no-side-padding-small {
      padding-left: 0;
      padding-right: 0; } }

@media (min-width: 768px) {
  .ms-theme-layout__main {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-flex: 2 0 66%; } }
  @media screen and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
    .ms-theme-layout__main {
      -ms-flex: 2 1 0%; } }

@media (min-width: 768px) {
    .ms-theme-layout__main .ms-theme-layout__inner {
      padding-left: 15%;
      padding-right: 15%; }
      .ms-theme-layout__main .ms-theme-layout__inner.ms-theme-layout__inner_no-padding {
        padding: 0; } }

@media (max-width: 767px) {
  .ms-theme-layout__main.ms-theme-layout__main_theme-padding {
    padding: 4vw 10vw 5.55vh; } }

.ms-theme-layout__main.ms-theme-layout__main_no-padding {
  padding: 0; }

.ms-theme-layout__main .ms-theme-layout__inner.ms-theme-layout__inner_no-right-padding {
  padding-right: 0; }

.ms-theme-layout__main .ms-theme-layout__inner.ms-theme-layout__inner_25-right-padding {
  padding-right: 25px; }

@media (max-width: 767px) {
  .ms-theme-layout__secondary {
    padding: 0 10vw; }
    .ms-theme-layout__secondary .ms-theme-layout__inner {
      padding-top: 5vh; } }

@media (min-width: 768px) {
  .ms-theme-layout__secondary {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    -ms-flex: 1 0 33%; } }
  @media screen and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
    .ms-theme-layout__secondary {
      -ms-flex: 1 1 0%; } }

@media (min-width: 768px) {
    .ms-theme-layout__secondary .ms-theme-layout__inner {
      padding-left: 15%;
      padding-right: 15%; }
    .ms-theme-layout__secondary.ms-theme-layout__secondary_bg-light-gray-large {
      background-color: #f5f5f5; } }

.ms-theme-layout__secondary .ms-theme-layout__inner.ms-theme-layout__inner_no-left-padding {
  padding-left: 0; }

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ms-theme-layout__secondary {
    display: block; } }

@media (min-width: 768px) {
  .ms-theme-layout__inner {
    padding-top: 7.5vh; }
  .ms-theme-layout__secondary_bg-light-gray {
    background-color: #e9e9e9; } }

@media (min-width: 1140px) {
  .ms-theme-layout__main,
  .ms-theme-layout__secondary {
    -webkit-box-sizing: content-box;
            box-sizing: content-box; }
  .ms-theme-layout__main {
    padding-right: calc((100vw - 1140px) / 2); }
  .ms-theme-layout__secondary {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    padding-left: calc((100vw - 1140px) / 2); } }
  @media screen and (min-width: 1140px) and (-ms-high-contrast: none), (min-width: 1140px) and (-ms-high-contrast: active) {
    .ms-theme-layout__secondary {
      -ms-flex: 1 1 0%; } }

@media (min-width: 1140px) {
  .ms-theme-layout_non-full-screen .ms-theme-layout__main,
  .ms-theme-layout_non-full-screen .ms-theme-layout__secondary {
    padding: 0; } }

@media (min-width: 768px) {
  .ms-theme-layout_non-full-screen .ms-theme-layout__inner {
    padding: 30px; } }

/**
Base style component for onboarding pages
**/
/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-theme-page {
  padding: 5.25vh 8vw 5.55vh; }

.ms-theme-page-container {
  max-width: 1140px; }

.ms-theme-page-text-wrap-helper {
  max-width: 100vw;
  padding: 0 20px; }
  @media (min-width: 1140px) {
    .ms-theme-page-text-wrap-helper {
      max-width: 1140px; } }

.ms-theme-page_centered {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-theme-page_centered {
      -ms-flex: 1 1 0%; } }
  @media (min-width: 768px) {
    .ms-theme-page_centered {
      min-height: 0; } }

@media (max-width: 767px) {
  .ms-theme-page_with-keypad {
    padding-top: 3.5vh;
    padding-bottom: 4.5vh; } }

@media (max-width: 767px) {
  .ms-theme-page_with-information {
    padding-bottom: 2.5vh; } }

.ms-theme-page_wide {
  padding-left: 6.66vw;
  padding-right: 6.66vw; }

.ms-theme-page_no-vertical-padding {
  padding-top: 0;
  padding-bottom: 0; }

.ms-theme-page_no-padding {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0; }

.ms-theme-page_no-left-right-padding {
  padding-left: 0;
  padding-right: 0; }

.ms-theme-page-border-top::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 auto;
  background-color: rgba(214, 214, 214, 0.7);
  width: calc(100% - 30px); }
  @media (min-width: 768px) {
    .ms-theme-page-border-top::before {
      width: calc(100% - 40px); } }
  @media (min-width: 1024px) {
    .ms-theme-page-border-top::before {
      width: calc(100% - 80px); } }

.ms-theme-page_blue-gradient {
  background-image: -owg-linear-gradient(to bottom, #0f8ec7, #4c94c9);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0f8ec7), to(#4c94c9));
  background-image: linear-gradient(to bottom, #0f8ec7, #4c94c9);
  color: #fff; }
  @media (min-width: 768px) {
    .ms-theme-page_blue-gradient {
      background: #0f8ec7; } }

.ms-theme-page_gradient-to-white {
  color: #fff;
  background-image: -owg-linear-gradient(to bottom, #0f8ec7, #4c94c9);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0f8ec7), to(#4c94c9));
  background-image: linear-gradient(to bottom, #0f8ec7, #4c94c9); }
  @media (min-width: 768px) {
    .ms-theme-page_gradient-to-white {
      background-image: -owg-linear-gradient(to bottom, #0f8ec7 0%, #0f8ec7 75%, #fff 75%, #fff 100%);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#0f8ec7), color-stop(75%, #0f8ec7), color-stop(75%, #fff), to(#fff));
      background-image: linear-gradient(to bottom, #0f8ec7 0%, #0f8ec7 75%, #fff 75%, #fff 100%); } }

.ms-theme-page__inner {
  padding-left: 8vw;
  padding-right: 8vw; }

.ms-theme-page__keypad {
  width: 100%; }

.ms-theme-page-interstitial_padding-thin {
  padding-top: 8.55vh; }

.ms-theme-page_white {
  background-color: #fff;
  color: #0f8ec7; }

.ms-theme-page-scroll {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-theme-page-scroll {
      -ms-flex: 1 1 0%; } }
  @media (min-width: 768px) {
    .ms-theme-page-scroll {
      min-height: 0; } }

.ms-text-superscript {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 8px;
  line-height: normal;
  vertical-align: top; }
  .ms-theme .ms-text-superscript {
    font-family: inherit;
    font-size: .6em; }

.ms-force-no-scroll,
.ms-responsive-modal-force-no-scroll,
.ms-tutorial-overlay-force-no-scroll {
  overflow: hidden !important; }

@media (max-width: 767px) {
  _::-webkit-full-page-media, _:future, :root .ms-safari-menu-bar {
    height: calc(100vh - 68px) !important; } }
  @media only screen and (max-width: 767px) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    _::-webkit-full-page-media, _:future, :root .ms-safari-menu-bar {
      height: calc(100vh - 117px) !important; } }

/**
 * CSS COMPONENTS
 */
.ms-box {
  border-radius: 0;
  color: #fff;
  overflow: hidden; }

.ms-box__header {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(1, 52, 97, 0.4);
  font-size: 15px;
  padding: 10px; }

.ms-box__icon {
  font-size: 27px; }

.ms-box_light {
  color: #333; }
  .ms-box_light .ms-box__header {
    background-color: #fff; }
  .ms-box_light .ms-box__icon {
    color: #1574b1; }
  .ms-box_light .ms-box__content {
    background-color: #fff;
    border-top: 1px solid #cacaca;
    margin-top: 0; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.msm-theme .ms-btn {
  color: #fff;
  font-size: 13px;
  min-height: 44px;
  border-radius: 5px; }
  .msm-theme .ms-btn.ms-btn_primary {
    font-family: "Open Sans Semibold";
    font-weight: 600;
    font-size: 18px;
    line-height: 44px;
    border-radius: 5px; }
  .msm-theme .ms-btn.ms-btn_secondary, .msm-theme .ms-btn.ms-btn_secondary-on-white {
    font-family: "Open Sans";
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    background-color: #022644;
    border-radius: 5px; }
    .msm-theme .ms-btn.ms-btn_secondary.active, .msm-theme .ms-btn.active.ms-btn_secondary-on-white, .msm-theme .ms-btn.ms-btn_secondary:active, .msm-theme .ms-btn.ms-btn_secondary-on-white:active {
      background-color: rgba(3, 44, 76, 0.575); }
    .msm-theme .ms-btn.ms-btn_secondary.disabled, .msm-theme .ms-btn.disabled.ms-btn_secondary-on-white, .msm-theme .ms-btn.ms-btn_secondary[disabled], .msm-theme .ms-btn[disabled].ms-btn_secondary-on-white {
      background-color: rgba(2, 38, 68, 0.5);
      color: rgba(255, 255, 255, 0.5); }
  .msm-theme .ms-btn.ms-btn_secondary-on-white.active, .msm-theme .ms-btn.ms-btn_secondary-on-white:active {
    background-color: #bbb; }
  .msm-theme .ms-btn.ms-btn_secondary-on-white.disabled, .msm-theme .ms-btn.ms-btn_secondary-on-white[disabled] {
    background-color: #bbb;
    color: rgba(255, 255, 255, 0.5); }
  .msm-theme .ms-btn.ms-btn_tertiary {
    font-size: 18px;
    line-height: 44px;
    min-height: 44px;
    background-color: #022644; }
    .msm-theme .ms-btn.ms-btn_tertiary.active, .msm-theme .ms-btn.ms-btn_tertiary:active {
      background-color: #bbb; }
    .msm-theme .ms-btn.ms-btn_tertiary.disabled, .msm-theme .ms-btn.ms-btn_tertiary[disabled] {
      background-color: #bbb; }
  @media (max-width: 767px) {
    .msm-theme .ms-btn.ms-btn_action-text {
      color: #fff; } }

.ms-flavor_android .ms-btn {
  border-radius: 2px;
  min-height: 36px;
  line-height: 36px;
  text-transform: uppercase;
  /**
		 * Action/Menu Button
		 */ }
  .ms-flavor_android .ms-btn.ms-btn_primary {
    font-family: "Open Sans Semibold";
    font-weight: 600;
    font-size: 13px;
    line-height: 36px;
    border-radius: 2px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
            box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37); }
    .ms-flavor_android .ms-btn.ms-btn_primary.disabled, .ms-flavor_android .ms-btn.ms-btn_primary[disabled] {
      color: #bbb;
      background-color: #efefef; }
  .ms-flavor_android .ms-btn.ms-btn_secondary, .ms-flavor_android .ms-btn.ms-btn_secondary-on-white {
    font-family: "Open Sans Semibold";
    font-weight: 600;
    font-size: 13px;
    line-height: 28px;
    background-color: #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
            box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
    color: #1574b1; }
    .ms-flavor_android .ms-btn.ms-btn_secondary.active, .ms-flavor_android .ms-btn.active.ms-btn_secondary-on-white, .ms-flavor_android .ms-btn.ms-btn_secondary:active, .ms-flavor_android .ms-btn.ms-btn_secondary-on-white:active {
      background-color: rgba(237, 245, 249, 0.575); }
    .ms-flavor_android .ms-btn.ms-btn_secondary.disabled, .ms-flavor_android .ms-btn.disabled.ms-btn_secondary-on-white, .ms-flavor_android .ms-btn.ms-btn_secondary[disabled], .ms-flavor_android .ms-btn[disabled].ms-btn_secondary-on-white {
      background-color: rgba(2, 38, 68, 0.5);
      color: #bbb; }
  .ms-flavor_android .ms-btn.ms-btn_tertiary {
    font-family: "Open Sans Semibold";
    font-weight: 600;
    font-size: 13px;
    line-height: 34px;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
            box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
    color: #1574b1;
    min-height: 34px; }
    .ms-flavor_android .ms-btn.ms-btn_tertiary.active, .ms-flavor_android .ms-btn.ms-btn_tertiary:active {
      background-color: rgba(237, 245, 249, 0.575); }
    .ms-flavor_android .ms-btn.ms-btn_tertiary.disabled, .ms-flavor_android .ms-btn.ms-btn_tertiary[disabled] {
      background-color: rgba(2, 38, 68, 0.5);
      color: #bbb; }
  .ms-flavor_android .ms-btn.ms-btn_action, .ms-flavor_android .ms-btn.ms-btn_action-on-white, .ms-flavor_android .ms-btn.ms-btn_action-solid {
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
            box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37); }
    .ms-flavor_android .ms-btn.ms-btn_action.disabled, .ms-flavor_android .ms-btn.disabled.ms-btn_action-on-white, .ms-flavor_android .ms-btn.disabled.ms-btn_action-solid, .ms-flavor_android .ms-btn.ms-btn_action[disabled], .ms-flavor_android .ms-btn[disabled].ms-btn_action-on-white, .ms-flavor_android .ms-btn[disabled].ms-btn_action-solid {
      color: #bbb;
      border-color: #efefef;
      background-color: #efefef; }
  .ms-flavor_android .ms-btn.ms-btn_action-on-white {
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
            box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37); }
    .ms-flavor_android .ms-btn.ms-btn_action-on-white.disabled, .ms-flavor_android .ms-btn.ms-btn_action-on-white[disabled] {
      color: #bbb;
      border-color: #efefef;
      background-color: #efefef; }
  .ms-flavor_android .ms-btn.ms-btn_action-solid {
    border-radius: 2px;
    border: none;
    -webkit-box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37);
            box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.37); }
    .ms-flavor_android .ms-btn.ms-btn_action-solid.disabled, .ms-flavor_android .ms-btn.ms-btn_action-solid[disabled] {
      color: #bbb;
      border-color: #efefef;
      background-color: #efefef; }
  .ms-flavor_android .ms-btn.ms-btn_action-text.disabled, .ms-flavor_android .ms-btn.ms-btn_action-text[disabled] {
    color: #bbb;
    background-color: #efefef; }
  .ms-flavor_android .ms-btn.ms-btn_secondary.ms-btn_focused, .ms-flavor_android .ms-btn.ms-btn_focused.ms-btn_secondary-on-white, .ms-flavor_android .ms-btn.ms-btn_secondary:focus, .ms-flavor_android .ms-btn.ms-btn_secondary-on-white:focus {
    color: #1574b1; }
  .ms-flavor_android .ms-btn.ms-btn_tertiary.ms-btn_focused, .ms-flavor_android .ms-btn.ms-btn_tertiary:focus {
    color: #fff; }

.ms-theme .ms-btn {
  font-family: "Karla Bold";
  font-weight: 600;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 16px;
  line-height: 24px;
  border-radius: 24px;
  color: #0f8ec7;
  height: 48px;
  text-transform: lowercase; }
  .ms-theme .ms-btn.ms-btn_disabled, .ms-theme .ms-btn[disabled] {
    color: #dadada; }
  .ms-theme .ms-btn.ms-btn_small-height {
    height: 30px; }

.ms-theme .ms-btn_no-text-transform {
  text-transform: none; }

.ms-btn {
  font-family: "Open Sans";
  font-weight: normal;
  background-color: transparent;
  border: 0;
  border-radius: 3px;
  color: #115e92;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  min-height: 34px;
  line-height: 34px;
  outline: none;
  padding: 0;
  text-align: center;
  text-transform: none;
  /**
	 * Action/Menu Button
	 */ }
  .ms-btn.disabled, .ms-btn[disabled] {
    -webkit-box-shadow: none;
    box-shadow: none;
    pointer-events: none; }
  .ms-btn.ms-btn_no-height {
    height: auto; }
  .ms-btn.ms-btn_thin {
    height: 35px;
    min-height: 35px;
    line-height: 35px; }
  .ms-btn.ms-btn_small, .ms-btn.ms-btn_medium, .ms-btn.ms-btn_large {
    max-width: 100%;
    padding: 0 15px; }
  .ms-btn.ms-btn_small {
    width: 136px; }
  .ms-btn.ms-btn_medium {
    width: 192px; }
  .ms-btn.ms-btn_large {
    width: 272px; }
  .ms-btn.ms-btn_extra-large {
    width: 240px; }
    @media (min-width: 768px) {
      .ms-btn.ms-btn_extra-large {
        width: 295px; } }
  .ms-btn.ms-btn_blue {
    color: #fff;
    background-color: #0f8ec7; }
    .ms-btn.ms-btn_blue.ms-btn_disabled, .ms-btn.ms-btn_blue[disabled] {
      color: #b7b7b7;
      background-color: #e9e9e9; }
    .ms-btn.ms-btn_blue.ms-btn_active, .ms-btn.ms-btn_blue:active, .ms-btn.ms-btn_blue:focus, .ms-btn.ms-btn_blue.ms-btn_focused {
      background-color: #002b51; }
  .ms-btn.ms-btn_white {
    color: #0f8ec7;
    background-color: #fff; }
    .ms-btn.ms-btn_white.ms-btn_disabled, .ms-btn.ms-btn_white[disabled] {
      color: #b7b7b7;
      background-color: #e9e9e9; }
    .ms-btn.ms-btn_white.ms-btn_active, .ms-btn.ms-btn_white:active, .ms-btn.ms-btn_white:focus, .ms-btn.ms-btn_white.ms-btn_focused {
      border: 1px solid #b7b7b7; }
  .ms-btn.ms-btn_toggle {
    border: 1px solid #0f8ec7; }
    .ms-btn.ms-btn_toggle.ms-btn_active, .ms-btn.ms-btn_toggle:active, .ms-btn.ms-btn_toggle:focus, .ms-btn.ms-btn_toggle.ms-btn_focused {
      border: 1px solid #b7b7b7; }
    .ms-btn.ms-btn_toggle.ms-btn_toggle-on {
      color: #fff;
      background-color: #0f8ec7; }
      .ms-btn.ms-btn_toggle.ms-btn_toggle-on.ms-btn_active, .ms-btn.ms-btn_toggle.ms-btn_toggle-on:active, .ms-btn.ms-btn_toggle.ms-btn_toggle-on:focus, .ms-btn.ms-btn_toggle.ms-btn_toggle-on.ms-btn_focused {
        background-color: #002b51; }
  .ms-btn.ms-btn_toggle-white {
    background: transparent;
    border: 1px solid #fff;
    color: #fff; }
  .ms-btn.ms-btn_primary {
    font-family: "Open Sans Light";
    font-weight: 300;
    font-size: 13px;
    line-height: 34px;
    background-color: #1574b1;
    border-radius: 3px;
    -webkit-box-shadow: none;
            box-shadow: none;
    color: #fff;
    min-width: 0;
    padding: 0 20px; }
    .ms-btn.ms-btn_primary.active, .ms-btn.ms-btn_primary:active {
      background-color: rgba(39, 126, 183, 0.575); }
    .ms-btn.ms-btn_primary.disabled, .ms-btn.ms-btn_primary[disabled] {
      color: rgba(255, 255, 255, 0.5);
      background-color: rgba(21, 116, 177, 0.5); }
      .ms-btn.ms-btn_primary.disabled.ms-btn_fake-disabled, .ms-btn.ms-btn_primary[disabled].ms-btn_fake-disabled {
        pointer-events: auto; }
  .ms-btn.ms-btn_secondary, .ms-flavor_android .ms-btn.ms-btn_secondary-on-white, .ms-btn.ms-btn_secondary-on-white {
    font-size: 13px;
    line-height: 28px;
    background-color: #b2b2b2;
    border-radius: 3px;
    -webkit-box-shadow: none;
            box-shadow: none;
    color: #fff;
    min-width: 0;
    padding: 0 20px; }
    .ms-btn.ms-btn_secondary.active, .ms-btn.active.ms-btn_secondary-on-white, .ms-btn.ms-btn_secondary:active, .ms-btn.ms-btn_secondary-on-white:active {
      background-color: #b2b2b2; }
    .ms-btn.ms-btn_secondary.disabled, .ms-btn.disabled.ms-btn_secondary-on-white, .ms-btn.ms-btn_secondary[disabled], .ms-btn[disabled].ms-btn_secondary-on-white {
      background-color: #b2b2b2;
      color: #fff; }
  .ms-btn.ms-btn_secondary-on-white {
    background-color: #b2b2b2;
    color: #fff; }
    .ms-btn.ms-btn_secondary-on-white.active, .ms-btn.ms-btn_secondary-on-white:active {
      background-color: #b2b2b2; }
    .ms-btn.ms-btn_secondary-on-white.disabled, .ms-btn.ms-btn_secondary-on-white[disabled] {
      background-color: #b2b2b2;
      color: #fff; }
  .ms-btn.ms-btn_tertiary {
    font-family: "Open Sans";
    font-weight: normal;
    font-size: 12px;
    line-height: 24px;
    background-color: #1574b1;
    -webkit-box-shadow: none;
            box-shadow: none;
    color: #fff;
    min-width: 0;
    min-height: 24px;
    padding: 0 20px; }
    .ms-btn.ms-btn_tertiary.active, .ms-btn.ms-btn_tertiary:active {
      background-color: rgba(39, 126, 183, 0.575); }
    .ms-btn.ms-btn_tertiary.disabled, .ms-btn.ms-btn_tertiary[disabled] {
      background-color: rgba(21, 116, 177, 0.5);
      color: rgba(255, 255, 255, 0.5); }
  .ms-btn.ms-btn_action, .ms-btn.ms-btn_action-on-white, .ms-btn.ms-btn_action-solid {
    font-family: "Open Sans";
    font-weight: normal;
    font-size: 13px;
    line-height: 28px;
    border-radius: 15px;
    border: 1px solid #1574b1;
    -webkit-box-shadow: none;
            box-shadow: none;
    color: #fff;
    min-height: 30px;
    padding: 0 20px; }
    .ms-btn.ms-btn_action.active, .ms-btn.active.ms-btn_action-on-white, .ms-btn.active.ms-btn_action-solid, .ms-btn.ms-btn_action:active, .ms-btn.ms-btn_action-on-white:active, .ms-btn.ms-btn_action-solid:active {
      background-color: rgba(21, 116, 177, 0.3); }
    .ms-btn.ms-btn_action.disabled, .ms-btn.disabled.ms-btn_action-on-white, .ms-btn.disabled.ms-btn_action-solid, .ms-btn.ms-btn_action[disabled], .ms-btn[disabled].ms-btn_action-on-white, .ms-btn[disabled].ms-btn_action-solid {
      color: rgba(255, 255, 255, 0.5);
      border-color: rgba(21, 116, 177, 0.5);
      background-color: transparent; }
  .ms-btn.ms-btn_action-on-white {
    color: #1574b1; }
    .ms-btn.ms-btn_action-on-white.active, .ms-btn.ms-btn_action-on-white:active {
      background-color: rgba(21, 116, 177, 0.3); }
    .ms-btn.ms-btn_action-on-white.disabled, .ms-btn.ms-btn_action-on-white[disabled] {
      color: rgba(21, 116, 177, 0.5);
      background-color: transparent; }
  .ms-btn.ms-btn_action-solid {
    border: 0;
    background-color: #1574b1; }
    .ms-btn.ms-btn_action-solid.active, .ms-btn.ms-btn_action-solid:active {
      background-color: rgba(39, 126, 183, 0.575); }
    .ms-btn.ms-btn_action-solid.disabled, .ms-btn.ms-btn_action-solid[disabled] {
      border: 0;
      background-color: rgba(21, 116, 177, 0.5); }
  .ms-btn.ms-btn_action-text {
    color: #1574b1; }
    .ms-btn.ms-btn_action-text.active, .ms-btn.ms-btn_action-text:active {
      background-color: rgba(21, 116, 177, 0.3); }
    .ms-btn.ms-btn_action-text.disabled, .ms-btn.ms-btn_action-text[disabled] {
      color: rgba(21, 116, 177, 0.5);
      background-color: transparent; }
  .ms-btn.ms-btn_primary.ms-btn_focused, .ms-btn.ms-btn_primary:focus, .ms-btn.ms-btn_secondary.ms-btn_focused, .ms-btn.ms-btn_focused.ms-btn_secondary-on-white, .ms-btn.ms-btn_secondary:focus, .ms-btn.ms-btn_secondary-on-white:focus, .ms-btn.ms-btn_secondary-on-white.ms-btn_focused, .ms-btn.ms-btn_secondary-on-white:focus, .ms-btn.ms-btn_tertiary.ms-btn_focused, .ms-btn.ms-btn_tertiary:focus {
    color: #fff; }
    .mso-app .ms-btn.ms-btn_primary.ms-btn_focused, .mso-app .ms-btn.ms-btn_primary:focus, .mso-app .ms-btn.ms-btn_secondary.ms-btn_focused, .mso-app .ms-btn.ms-btn_focused.ms-btn_secondary-on-white, .mso-app .ms-btn.ms-btn_secondary:focus, .mso-app .ms-btn.ms-btn_secondary-on-white:focus, .mso-app .ms-btn.ms-btn_secondary-on-white.ms-btn_focused, .mso-app .ms-btn.ms-btn_secondary-on-white:focus, .mso-app .ms-btn.ms-btn_tertiary.ms-btn_focused, .mso-app .ms-btn.ms-btn_tertiary:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px; }
  .ms-btn.ms-btn_primary.ms-btn_focused, .ms-btn.ms-btn_primary:focus, .ms-btn.ms-btn_tertiary.ms-btn_focused, .ms-btn.ms-btn_tertiary:focus {
    background-color: #0f8ec7; }

.ms-caret {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-transform-origin: 50% 55%;
  transform-origin: 50% 55%;
  display: inline-block;
  font-size: 13px;
  margin-left: 10px; }
  .ms-caret::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none; }
  .ms-caret.ms-caret_up {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg); }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-checkbox {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  display: inline-block;
  position: relative;
  color: #0f8ec7;
  margin: 10px 0 5px;
  padding: 0 0 0 30px;
  cursor: pointer;
  text-align: left; }
  .ms-checkbox input[type="radio"] {
    opacity: 0;
    position: absolute; }
    .ms-checkbox input[type="radio"]:disabled:checked + .ms-checkbox__indicator {
      background: radial-gradient(circle at center, #666 40%, #fff 45%); }
    .ms-checkbox input[type="radio"]:disabled + .ms-checkbox__indicator::after {
      background: #666; }
  .ms-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute; }
    .ms-checkbox input[type="checkbox"]:disabled + .ms-checkbox__indicator::after {
      border-color: #666; }
    .ms-checkbox input[type="checkbox"]:checked + .ms-checkbox__indicator::after {
      display: block; }
    .ms-checkbox input[type="checkbox"]:not(:checked) + .ms-checkbox__indicator::before {
      -webkit-animation: ms-unchecked 1s 1 forwards;
              animation: ms-unchecked 1s 1 forwards; }
  .ms-checkbox input:focus + .ms-checkbox__indicator {
    outline: 1px dotted currentColor; }
    .ms-checkbox input:focus + .ms-checkbox__indicator:checked + .ms-checkbox__indicator {
      background: #fff; }
  .ms-checkbox input:checked + .ms-checkbox__indicator {
    background: #fff; }
    .ms-checkbox input:checked + .ms-checkbox__indicator::before {
      -webkit-animation: ms-checked 1s 1 forwards;
              animation: ms-checked 1s 1 forwards; }
    .ms-checkbox input:checked + .ms-checkbox__indicator::after {
      display: block; }
  .ms-checkbox input:disabled + .ms-checkbox__indicator {
    pointer-events: none;
    opacity: .6;
    border: 2px solid #666;
    background: #fff; }
  .msm-app .ms-checkbox input[type="radio"], .msm-app .ms-checkbox input[type="checkbox"] {
    display: none; }
  .ms-checkbox.ms-checkbox_large {
    font-size: 36px;
    line-height: 26px; }
  .ms-checkbox.ms-checkbox_small-font {
    font-size: 16px;
    line-height: 24px; }
  .ms-checkbox.ms-checkbox_disabled {
    color: #666; }
  .ms-checkbox.ms-checkbox_error {
    color: #cc5a5a; }
    .ms-checkbox.ms-checkbox_error .ms-checkbox__indicator {
      border: 2px solid #cc5a5a; }
    .ms-checkbox.ms-checkbox_error.ms-checkbox_radio .ms-checkbox__indicator {
      border: 2px solid #cc5a5a; }
      .ms-checkbox.ms-checkbox_error.ms-checkbox_radio .ms-checkbox__indicator::after {
        background: #cc5a5a; }
    .ms-checkbox.ms-checkbox_error.ms-checkbox_checkbox .ms-checkbox__indicator::after {
      border: solid #cc5a5a;
      border-width: 0 2px 2px 0; }
  .ms-checkbox.ms-checkbox_radio .ms-checkbox__indicator {
    border-radius: 50%; }
    .ms-checkbox.ms-checkbox_radio .ms-checkbox__indicator::after {
      background: #0f8ec7;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0; }
  .ms-checkbox.ms-checkbox_checkbox .ms-checkbox__indicator::after {
    margin: 0;
    left: 6px;
    top: 1px;
    width: 3px;
    height: 10px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    border: solid #0f8ec7;
    border-width: 0 2px 2px 0; }

.ms-checkbox__indicator {
  position: absolute;
  margin-top: 2px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #0f8ec7; }
  .ms-checkbox__indicator::before {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    z-index: 10;
    -webkit-animation: initial;
            animation: initial; }
  .ms-checkbox__indicator::after {
    display: none;
    position: absolute;
    content: ""; }

.ms-checkbox__small {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 13px;
  line-height: 17px;
  display: block;
  padding-top: 3px; }

.ms-checkbox:hover input:not([disabled]):active + .ms-checkbox__indicator,
.ms-checkbox input:not([disabled]):active + .ms-checkbox__indicator {
  background: rgba(15, 142, 199, 0.3); }

.ms-checkbox_error:hover input:not([disabled]):active + .ms-checkbox__indicator,
.ms-checkbox_error input:not([disabled]):active + .ms-checkbox__indicator {
  background: rgba(204, 90, 90, 0.3); }

@-webkit-keyframes ms-checked {
  0% {
    background: #0f8ec7;
    width: 0;
    height: 0; }
  50% {
    background: rgba(15, 142, 199, 0.2);
    width: 45px;
    height: 45px; }
  100% {
    background: rgba(15, 142, 199, 0); } }

@keyframes ms-checked {
  0% {
    background: #0f8ec7;
    width: 0;
    height: 0; }
  50% {
    background: rgba(15, 142, 199, 0.2);
    width: 45px;
    height: 45px; }
  100% {
    background: rgba(15, 142, 199, 0); } }

@-webkit-keyframes ms-unchecked {
  0% {
    background: #b7b7b7;
    width: 0;
    height: 0; }
  50% {
    background: rgba(183, 183, 183, 0.2);
    width: 45px;
    height: 45px; }
  100% {
    background: rgba(183, 183, 183, 0); } }

@keyframes ms-unchecked {
  0% {
    background: #b7b7b7;
    width: 0;
    height: 0; }
  50% {
    background: rgba(183, 183, 183, 0.2);
    width: 45px;
    height: 45px; }
  100% {
    background: rgba(183, 183, 183, 0); } }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-checkmark {
  overflow: visible; }

.ms-checkmark__path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
  -webkit-animation: ms-checkmark-draw 0.5s 1 cubic-bezier(0.65, 0, 0.45, 1) forwards;
          animation: ms-checkmark-draw 0.5s 1 cubic-bezier(0.65, 0, 0.45, 1) forwards; }

@-webkit-keyframes ms-checkmark-draw {
  from {
    stroke-dashoffset: 180; }
  to {
    stroke-dashoffset: 0; } }

@keyframes ms-checkmark-draw {
  from {
    stroke-dashoffset: 180; }
  to {
    stroke-dashoffset: 0; } }

/* IE10+ workarounds */
@media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) {
  .ms-checkmark__path {
    /* IE does not like animating stroke-dashoffset */
    stroke-dashoffset: 0; } }

.ms-drag-drop {
  opacity: .7;
  /**
    * The elements where below classes are getting attached may have the same properties applied already in the consumer component.
    * to override those properties we have added !important
    */ }
  .ms-drag-drop.ms-drag-drop_drag-start {
    background-color: #ff6950 !important; }
  .ms-drag-drop.ms-drag-drop_drag-enter {
    border: 2px inset #fa9100 !important; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-eyebrow {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 4vw;
  line-height: 5.33vw; }

.ms-eyebrow_blue {
  color: #bbe3f9; }

.ms-eyebrow_white {
  color: #fff; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-flex-table {
  padding: 0 10px;
  text-align: left; }
  @media (min-width: 768px) {
    .ms-flex-table {
      padding: 0 20px; } }

.ms-flex-table__row {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px 0;
  min-height: 55px; }

.ms-flex-table__cell {
  min-width: 0;
  overflow: hidden;
  margin-right: 3px; }

.ms-flex-table__cell_overflow {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  white-space: normal;
  text-overflow: ellipsis; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-flex-table__cell_overflow {
      -ms-flex: 1 1 0%; } }

.ms-flex-table__cell_align-right {
  text-align: right; }

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

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-footer {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
  background-color: #002b51;
  color: #fff;
  width: 100%; }
  @media (min-width: 768px) {
    .ms-footer {
      font-size: 16px;
      line-height: 24px; } }

.ms-footer__content {
  margin: 0 auto;
  padding: 20px 24px;
  width: 100%; }
  @media (min-width: 768px) {
    .ms-footer__content {
      padding: 32px 64px 60px;
      max-width: 1268px; } }

@media (min-width: 768px) {
  .ms-footer__columns {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox; } }

.ms-footer__column {
  padding-bottom: 40px; }
  @media (min-width: 768px) {
    .ms-footer__column {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      min-width: 0;
      padding-bottom: 80px; } }
  @media screen and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
    .ms-footer__column {
      -ms-flex: 1 1 0%; } }
  @media (min-width: 768px) {
      .ms-footer__column.ms-footer__column_big {
        -webkit-box-flex: 2;
            -ms-flex: 2;
                flex: 2;
        min-width: 0; } }
    @media screen and (min-width: 768px) and (-ms-high-contrast: none), (min-width: 768px) and (-ms-high-contrast: active) {
      .ms-footer__column.ms-footer__column_big {
        -ms-flex: 2 1 0%; } }
  @media (min-width: 1024px) {
    .ms-footer__column.ms-footer__column_big .ms-footer__column-content {
      -webkit-column-count: 2;
      -ms-column-count: 2;
      -o-column-count: 2;
      column-count: 2;
      -webkit-column-width: 50%;
      -ms-column-width: 50%;
      -o-column-width: 50%;
      column-width: 50%; } }

.ms-footer__title {
  font-family: "Karla Bold";
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  padding-bottom: 20px;
  text-transform: uppercase; }
  @media (min-width: 768px) {
    .ms-footer__title {
      font-size: 20px;
      line-height: 28px; } }

.ms-footer__link {
  color: #fff;
  display: block;
  padding-bottom: 16px;
  text-decoration: none; }
  .ms-footer__link:hover {
    color: #b7b7b7; }
  .ms-footer__link:visited {
    color: #fff; }

.ms-footer__text .ms-footer__text-link {
  color: #fff;
  text-decoration: underline; }
  .ms-footer__text .ms-footer__text-link:hover {
    color: #b7b7b7; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.mso-theme .ms-form__row {
  display: inline-block;
  width: 100%; }
  .mso-theme .ms-form__row.ms-form__row_toggle .ms-form__label,
  .mso-theme .ms-form__row.ms-form__row_toggle .ms-form__input {
    display: inline-block; }
  .mso-theme .ms-form__row.ms-form__row_radio-group .ms-form__radio-group {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; }

.mso-theme .ms-form__label {
  letter-spacing: -.21px; }

.mso-theme .ms-form__input.ms-form__input_dropdown .ms-form__dropdown-field {
  position: relative;
  border: 1px solid #bbb;
  background-color: #fff;
  padding: 5px 30px 5px 5px;
  min-height: 30px;
  color: #333;
  font-size: 13px;
  cursor: pointer; }
  .mso-theme .ms-form__input.ms-form__input_dropdown .ms-form__dropdown-field::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    float: right;
    position: absolute;
    top: 3px;
    right: 10px;
    color: #1574b1; }

.msm-theme .ms-form {
  background-color: #fff;
  border-radius: 5px;
  margin: 0 0 10px;
  padding: 0 0 0 10px; }
  @media (min-width: 768px) {
    .msm-theme .ms-form {
      margin: 0 0 20px; }
      .msm-theme .ms-form:not(.ms-form_reduced-padding) {
        padding: 0 0 0 20px; } }
  .msm-theme .ms-form:last-child {
    margin-bottom: 0; }
  .msm-theme .ms-form.ms-form_no-margin {
    margin: 0; }

.msm-theme .ms-form__row {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 49px;
  border-bottom: 1px solid rgba(187, 187, 187, 0.5); }
  .msm-theme .ms-form__row.ms-form__row_selected:first-child {
    border-radius: 0 5px 0 0; }
  .msm-theme .ms-form__row:last-child {
    border-bottom: 0; }
    .msm-theme .ms-form__row:last-child.ms-form__row_selected .ms-form__input {
      border-radius: 0 0 5px; }
  .msm-theme .ms-form__row.ms-form__row_border {
    border-bottom: 1px solid rgba(187, 187, 187, 0.5); }
  .msm-theme .ms-form__row[disabled], .msm-theme .ms-form__row.disabled {
    pointer-events: none; }
    .msm-theme .ms-form__row[disabled] .ms-form__label, .msm-theme .ms-form__row.disabled .ms-form__label {
      color: #bbb; }
    .msm-theme .ms-form__row[disabled] .ms-form__input, .msm-theme .ms-form__row.disabled .ms-form__input {
      color: rgba(21, 116, 177, 0.3); }
      .msm-theme .ms-form__row[disabled] .ms-form__input .ms-form__input-dark,
      .msm-theme .ms-form__row[disabled] .ms-form__input .ms-form__input-right,
      .msm-theme .ms-form__row[disabled] .ms-form__input .ms-form__input-secondary, .msm-theme .ms-form__row.disabled .ms-form__input .ms-form__input-dark,
      .msm-theme .ms-form__row.disabled .ms-form__input .ms-form__input-right,
      .msm-theme .ms-form__row.disabled .ms-form__input .ms-form__input-secondary {
        color: #bbb; }
  .msm-theme .ms-form__row.ms-form__row_toggle .ms-form__label {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    width: 65px; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .msm-theme .ms-form__row.ms-form__row_toggle .ms-form__label {
        -ms-flex: 1 1 0%; } }
  .msm-theme .ms-form__row.ms-form__row_toggle .ms-form__input {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    min-width: 0;
    width: auto; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .msm-theme .ms-form__row.ms-form__row_toggle .ms-form__input {
        -ms-flex: 0 0 auto; } }

.msm-theme .ms-form__label {
  font-size: 13px;
  line-height: 18px;
  width: 65px; }
  .msm-theme .ms-form__label[disabled], .msm-theme .ms-form__label.disabled {
    color: #bbb; }

.msm-theme .ms-form__input {
  font-family: "Open Sans";
  font-weight: normal;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -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-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  background-color: transparent;
  border: 0;
  color: #1574b1;
  font-size: 15px;
  outline: 0;
  padding: 0 10px 0 5px;
  position: relative; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .msm-theme .ms-form__input {
      -ms-flex: 1 1 0%; } }
  .msm-theme .ms-form__input.ms-form-date {
    min-width: 180px; }
  .msm-theme .ms-form__input[disabled],
  .msm-theme .ms-form__input [disabled], .msm-theme .ms-form__input.disabled {
    color: rgba(21, 116, 177, 0.3);
    pointer-events: none; }
  .msm-theme .ms-form__input:only-child {
    padding-left: 0; }
  .msm-theme .ms-form__input.ms-form__input_list-value {
    color: #333;
    text-align: right; }
  .msm-theme .ms-form__input.ms-form__input_break-word {
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto; }
  .msm-theme .ms-form__input.ms-form__input_flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
  .msm-theme .ms-form__input.ms-form__input_flex-row-center {
    -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; }
    .msm-theme .ms-form__input.ms-form__input_flex-row-center .ms-form__input-left {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
  .msm-theme .ms-form__input.ms-form__input_multi {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .msm-theme .ms-form__input.ms-form__input_flex {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .msm-theme .ms-form__input.ms-form__input_flex {
        -ms-flex: 1 1 0%; } }
  .msm-theme .ms-form__input.ms-form__input_icon {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    min-width: 0;
    font-size: 25px;
    width: 44px; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .msm-theme .ms-form__input.ms-form__input_icon {
        -ms-flex: 0 0 auto; } }

.msm-theme .ms-form__input-primary {
  line-height: 20px; }

.msm-theme .ms-form__input-secondary {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777; }

.msm-theme .ms-form__input-left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .msm-theme .ms-form__input-left {
      -ms-flex: 1 1 0%; } }

.msm-theme .ms-form__input-right {
  color: #333;
  text-align: right; }

.msm-theme .ms-form__input-notification {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 13px;
  line-height: 18px;
  color: #fa9100; }

.msm-theme .ms-form__input-counter {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #bbb;
  position: absolute;
  text-align: right;
  right: 12px;
  bottom: 12px; }

.msm-theme .ms-form__input-inline {
  font-family: "Open Sans";
  font-weight: normal;
  background-color: #efefef;
  border: 0;
  width: 100%; }
  .msm-theme .ms-form__input-inline:focus {
    outline: none; }

.msm-theme .ms-form__input-dark {
  color: #333; }

.msm-theme .ms-form__row_selected:first-of-type .ms-form__input {
  border-top-right-radius: 5px; }

.msm-theme .ms-form__input-light {
  border: 0;
  outline: none;
  width: 90%; }

.msm-theme .ms-form__row_selected .ms-form__input {
  background-color: #efefef;
  min-height: 48px; }

.msm-theme .ms-form__input-placeholder {
  font-family: "Open Sans Light";
  font-weight: 300;
  color: #999; }

.msm-theme .ms-form__row-notification {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: initial;
      -ms-flex-align: initial;
          align-items: initial;
  border-bottom: 0;
  padding: 0;
  padding-right: 10px;
  min-height: 0; }

.msm-theme .ms-form__row-top-label {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: initial;
      -ms-flex-align: initial;
          align-items: initial; }
  .msm-theme .ms-form__row-top-label .ms-form__label {
    width: 100%; }

.msm-theme .ms-form__row-tip {
  margin-top: -1px;
  background-color: #fff; }
  .msm-theme .ms-form__row-tip:last-child {
    border-bottom-right-radius: 5px; }

.msm-theme .ms-form__input-tip {
  border-radius: 5px; }

.msm-theme .ms-form__row_checkbox .ms-form__label, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__label,
.msm-theme .ms-form__row_radio .ms-form__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  width: auto;
  font-size: 15px;
  margin-right: 5px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .msm-theme .ms-form__row_checkbox .ms-form__label, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__label,
    .msm-theme .ms-form__row_radio .ms-form__label {
      -ms-flex: 1 1 0%; } }

.msm-theme .ms-form__row_checkbox .ms-form__input, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input,
.msm-theme .ms-form__row_radio .ms-form__input {
  border-bottom: 1px solid #fff;
  top: 1px;
  max-width: 30px;
  padding: 0; }
  .msm-theme .ms-form__row_checkbox .ms-form__input::before, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before,
  .msm-theme .ms-form__row_radio .ms-form__input::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    font-size: 26px; }

.msm-theme .ms-form__row_checkbox:last-child .ms-form__input, .msm-theme .ms-form__row.ms-form__row_checkbox-inner:last-child .ms-form__input,
.msm-theme .ms-form__row_radio:last-child .ms-form__input {
  border-bottom: 0;
  top: 0; }

.msm-theme .ms-form__row_checkbox.ms-form__row_selected .ms-form__input, .msm-theme .ms-form__row_selected.ms-form__row.ms-form__row_checkbox-inner .ms-form__input,
.msm-theme .ms-form__row_radio.ms-form__row_selected .ms-form__input {
  background-color: #fff;
  min-height: 0; }
  .msm-theme .ms-form__row_checkbox.ms-form__row_selected .ms-form__input::before, .msm-theme .ms-form__row_selected.ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before,
  .msm-theme .ms-form__row_radio.ms-form__row_selected .ms-form__input::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none; }

.msm-theme .ms-form__row_checkbox .ms-form__input::before, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  font-size: 26px; }

.msm-theme .ms-form__row_checkbox.ms-form__row_selected .ms-form__input::before, .msm-theme .ms-form__row_selected.ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none; }

.msm-theme .ms-form__row_checkbox-dark .ms-form__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  width: auto;
  font-size: 15px;
  margin-right: 20px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .msm-theme .ms-form__row_checkbox-dark .ms-form__label {
      -ms-flex: 1 1 0%; } }
  .msm-theme .ms-form__row_checkbox-dark .ms-form__label:last-child {
    margin-right: 20px; }

.msm-theme .ms-form__row_checkbox-dark .ms-form__input {
  border-bottom: 1px solid #fff;
  top: 1px;
  max-width: 30px;
  padding: 0; }
  .msm-theme .ms-form__row_checkbox-dark .ms-form__input::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    font-size: 26px; }

.msm-theme .ms-form__row_checkbox-dark:last-child .ms-form__input {
  border-bottom: 0;
  top: 0; }

.msm-theme .ms-form__row_checkbox-dark.ms-form__row_selected .ms-form__input {
  background-color: transparent;
  min-height: 0; }
  .msm-theme .ms-form__row_checkbox-dark.ms-form__row_selected .ms-form__input::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    z-index: 1; }
  .msm-theme .ms-form__row_checkbox-dark.ms-form__row_selected .ms-form__input::before {
    content: "";
    width: 18px;
    position: absolute;
    background-color: #fff;
    height: 18px;
    top: 2px;
    border-radius: 50%;
    left: 3px; }

.msm-theme .ms-form__row.ms-form__row_radio-group .ms-form__radio-group {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox; }

.msm-theme .ms-form__row.ms-form__row_radio-group .ms-form__radio-item {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 15px;
  padding: 0 5px 0 10px; }
  .msm-theme .ms-form__row.ms-form__row_radio-group .ms-form__radio-item::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    color: #1574b1;
    font-size: 26px;
    padding-right: 10px; }
  .msm-theme .ms-form__row.ms-form__row_radio-group .ms-form__radio-item.ms-form__radio-item_selected {
    background-color: #fff;
    min-height: 0; }
    .msm-theme .ms-form__row.ms-form__row_radio-group .ms-form__radio-item.ms-form__radio-item_selected::before {
      content: "";
      font-family: "msm-icons";
      font-weight: normal;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      speak: none; }

.msm-theme .ms-form__row.ms-form__row_checkbox-inner {
  background-color: #fff;
  padding: 0 10px 10px 75px;
  margin-top: -1px; }
  .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input {
    min-height: 48px;
    border-bottom: 0;
    top: 0; }
  .msm-theme .ms-form__row.ms-form__row_checkbox-inner.ms-form__row_selected .ms-form__input {
    background-color: initial;
    min-height: 48px; }
  .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input-inner {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #efefef;
    border-radius: 5px;
    color: #777;
    padding: 0 10px; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input-inner {
        -ms-flex: 1 1 0%; } }
    .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input-inner .ms-form__label {
      font-family: "Open Sans";
      font-weight: normal;
      font-size: 11px;
      line-height: 16px; }

.msm-theme .ms-form__row-button {
  font-family: "Open Sans";
  font-weight: normal;
  color: #1574b1;
  font-size: 13px;
  text-align: right;
  width: 60px;
  margin-left: 20px; }

.msm-theme .ms-form__wrapper-compact .ms-form {
  border: 1px solid #bbb; }

.msm-theme .ms-form__wrapper-compact .ms-form__input {
  color: #333;
  padding-left: 0; }

.msm-theme .ms-form__wrapper-compact .ms-form__input-placeholder {
  font-family: "Open Sans Light";
  font-weight: 300;
  color: #999; }

.msm-theme .ms-form__wrapper-compact .ms-form-outer-label {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 13px;
  line-height: 18px; }

.msm-theme .ms-form-standalone-btns {
  margin-top: 20px; }

.msm-theme .ms-form__chars-remaining {
  bottom: 0;
  color: #888;
  font-size: 11px;
  position: absolute; }

.msm-theme .ms-form__row.ms-form__row_header {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-top: 10px;
  min-height: 59px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .msm-theme .ms-form__row.ms-form__row_header {
      -ms-flex: 1 1 0%; } }
  .msm-theme .ms-form__row.ms-form__row_header .ms-form__row-title-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .msm-theme .ms-form__row.ms-form__row_header .ms-form__row-title-wrapper {
        -ms-flex: 1 1 0%; } }
  .msm-theme .ms-form__row.ms-form__row_header .ms-form__row-title {
    color: #333;
    font-size: 15px; }
  .msm-theme .ms-form__row.ms-form__row_header .ms-form__row-action {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #1574b1;
    font-size: 13px;
    min-height: 44px;
    padding: 0 10px 0 20px; }

.msm-theme .ms-form__small-text {
  color: #777;
  font-size: 11px; }
  [disabled] .msm-theme .ms-form__small-text,
  .disabled .msm-theme .ms-form__small-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #bbb; }

.msm-theme .ms-form__btn-primary,
.msm-theme .ms-form__btn-tertiary {
  width: 100%; }

.msm-theme .ms-form__btn-modal-bottom {
  border-radius: 0;
  bottom: 0;
  width: 100%;
  position: absolute;
  margin-left: -5px; }

.msm-theme .ms-form__btns .ms-form__btn-secondary {
  display: none; }

.msm-theme .ms-form__btns .ms-form__btn-tertiary {
  margin-right: 10px;
  width: 130px; }

.ms-theme .ms-form {
  border-radius: 0;
  padding: 20px; }
  .ms-theme .ms-form:not(.ms-form_reduced-padding) {
    padding: 20px; }
  .ms-theme .ms-form.ms-form_no-padding {
    padding: 0; }
  .ms-theme .ms-form.ms-form_white {
    color: #fff; }
    .ms-theme .ms-form.ms-form_white .ms-form__input {
      font-family: "MS Gloriola II Std Light";
      font-weight: normal;
      font-size: 20px;
      line-height: 26px;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
      @media (min-width: 768px) {
        .ms-theme .ms-form.ms-form_white .ms-form__input {
          font-size: 20px;
          line-height: 26px; } }
    .ms-theme .ms-form.ms-form_white .ms-form__label {
      color: #fff; }

@media (max-width: 767px) {
  .ms-theme .ms-form_responsive {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; } }
  @media screen and (max-width: 767px) and (-ms-high-contrast: none), (max-width: 767px) and (-ms-high-contrast: active) {
    .ms-theme .ms-form_responsive {
      -ms-flex: 1 1 0%; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .ms-theme .ms-form_responsive {
      min-height: 0; } }

.ms-theme .ms-form__row {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  border: 0; }
  .ms-theme .ms-form__row[disabled] .ms-form__label, .ms-theme .ms-form__row.disabled .ms-form__label {
    color: #666; }
  .ms-theme .ms-form__row[disabled] .ms-form__input, .ms-theme .ms-form__row.disabled .ms-form__input {
    color: rgba(21, 116, 177, 0.7); }

.ms-theme .ms-form__field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin-right: 15px;
  padding-bottom: 20px;
  position: relative; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-theme .ms-form__field {
      -ms-flex: 1 1 0%; } }
  .ms-theme .ms-form__field:last-child {
    margin-right: 0; }
  .ms-theme .ms-form__field.ms-form__field_reversed {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse; }
  .ms-theme .ms-form__field.ms-form__field_no-flex {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-theme .ms-form__field.ms-form__field_no-flex {
        -ms-flex: 0 0 auto; } }
  .ms-theme .ms-form__field.ms-form__field_error {
    /*
				Unnested to avoid IE issues. More info:
				PR#3574
			*/ }
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__input:not(:disabled) {
      color: #002b51;
      border-bottom: 1px solid #cc5a5a; }
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__input:not([readonly]) + .ms-form__label {
      color: #cc5a5a; }
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__input:focus {
      color: #0f8ec7;
      border-bottom: 1px solid #0f8ec7; }
      .ms-theme .ms-form__field.ms-form__field_error .ms-form__input:focus:not([readonly]) + .ms-form__label {
        color: #0f8ec7; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-theme .ms-form__field.ms-form__field_error .ms-form__input:-ms-input-placeholder {
        color: #999; } }
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__composite-input:not(:disabled) {
      border-bottom: 1px solid #cc5a5a; }
      .ms-theme .ms-form__field.ms-form__field_error .ms-form__composite-input:not(:disabled) .ms-form__input {
        border: 0;
        color: #002b51; }
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__composite-input:not([readonly]) + .ms-form__label .ms-form__input {
      color: #cc5a5a; }
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__composite-input.ms-form__composite-input_focused {
      border-bottom: 1px solid #0f8ec7; }
      .ms-theme .ms-form__field.ms-form__field_error .ms-form__composite-input.ms-form__composite-input_focused .ms-form__input {
        color: #0f8ec7; }
      .ms-theme .ms-form__field.ms-form__field_error .ms-form__composite-input.ms-form__composite-input_focused:not([readonly]) + .ms-form__label .ms-form__input {
        color: #0f8ec7; }
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__label {
      color: #cc5a5a; }
    .ms-theme .ms-form__field.ms-form__field_error.ms-form__field_select::after,
    .ms-theme .ms-form__field.ms-form__field_error .ms-form__select::after {
      color: #cc5a5a; }
  .ms-theme .ms-form__field.ms-form__field_helper-visible {
    padding-bottom: 0; }
  .ms-theme .ms-form__field.ms-form__field_select::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    -webkit-transform: rotate(0.05deg);
    transform: rotate(0.05deg);
    display: inline-block;
    font-family: 'MSTheme';
    color: #b7b7b7;
    display: inline-block;
    font-size: 16px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 0;
    background-color: #fff;
    padding-left: 3px; }
  .ms-theme .ms-form__field.ms-form__field_select:active::after {
    color: #0f8ec7; }
  .ms-theme .ms-form__field.ms-form__field_select .ms-form__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 0;
    outline: 0;
    background: #fff; }
    .ms-theme .ms-form__field.ms-form__field_select .ms-form__input.ms-form__input_has-placeholder {
      color: #b7b7b7; }
    .ms-theme .ms-form__field.ms-form__field_select .ms-form__input::-ms-expand {
      display: none; }
    .ms-theme .ms-form__field.ms-form__field_select .ms-form__input option {
      color: #002b51; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-theme .ms-form__field.ms-form__field_select .ms-form__input option {
        outline: 0; }
        .ms-theme .ms-form__field.ms-form__field_select .ms-form__input option:disabled {
          color: #b7b7b7;
          background: #fff; }
        .ms-theme .ms-form__field.ms-form__field_select .ms-form__input option:hover {
          background: #0f8ec7; }
      .ms-theme .ms-form__field.ms-form__field_select .ms-form__input:focus::-ms-value {
        background-color: transparent;
        color: #0f8ec7; } }

.ms-theme .ms-form__input-group {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox; }
  .ms-theme .ms-form__input-group.ms-form__input-group_vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }

.ms-theme .ms-form__input {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  min-width: 0;
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 20px;
  line-height: 26px;
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
  padding: 0 0 6px;
  margin: 5px 0 10px;
  border-radius: 0;
  color: #002b51; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-theme .ms-form__input {
      -ms-flex: 0 0 auto; } }
  @media (min-width: 768px) {
    .ms-theme .ms-form__input {
      font-size: 20px;
      line-height: 26px; } }
  .ms-theme .ms-form__input::-webkit-input-placeholder {
    color: #666; }
  .ms-theme .ms-form__input:-moz-placeholder {
    color: #666; }
  .ms-theme .ms-form__input::-moz-placeholder {
    color: #666; }
  .ms-theme .ms-form__input:-ms-input-placeholder {
    color: #666; }
  .ms-theme .ms-form__input:focus {
    color: #0f8ec7;
    border-bottom: 1px solid #0f8ec7; }
    .ms-theme .ms-form__input:focus:not([readonly]) + .ms-form__label {
      color: #0f8ec7; }
  .ms-theme .ms-form__input:disabled, .ms-theme .ms-form__input[disabled] {
    background: transparent;
    border-bottom: 0;
    color: #666;
    -webkit-text-fill-color: #666; }
  .ms-theme .ms-form__input[type="number"] {
    -moz-appearance: textfield; }
    .ms-theme .ms-form__input[type="number"]::-webkit-outer-spin-button, .ms-theme .ms-form__input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0; }
  .ms-theme .ms-form__input.ms-form__input_small {
    font-size: 16px;
    line-height: 24px; }

.ms-theme .ms-form__composite-input {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
  padding: 0 0 6px;
  margin: 5px 0 10px;
  border-radius: 0; }
  .ms-theme .ms-form__composite-input .ms-form__input-elements {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .ms-theme .ms-form__composite-input .ms-form__input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0;
    font-family: "MS Gloriola II Std Light";
    font-weight: normal;
    font-family: "MS Gloriola II Std Light";
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    border: 0;
    padding: 0;
    margin: 0;
    color: #002b51; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-theme .ms-form__composite-input .ms-form__input {
        -ms-flex: 1 1 0%; } }
    @media (min-width: 768px) {
      .ms-theme .ms-form__composite-input .ms-form__input {
        font-size: 20px;
        line-height: 26px; } }
    .ms-theme .ms-form__composite-input .ms-form__input::-webkit-input-placeholder {
      color: #999; }
    .ms-theme .ms-form__composite-input .ms-form__input:-moz-placeholder {
      color: #999; }
    .ms-theme .ms-form__composite-input .ms-form__input::-moz-placeholder {
      color: #999; }
    .ms-theme .ms-form__composite-input .ms-form__input:-ms-input-placeholder {
      color: #999; }
    .ms-theme .ms-form__composite-input .ms-form__input:disabled, .ms-theme .ms-form__composite-input .ms-form__input[disabled] {
      background: transparent;
      color: #666;
      -webkit-text-fill-color: #666; }
    .ms-theme .ms-form__composite-input .ms-form__input[type="number"] {
      -moz-appearance: textfield; }
      .ms-theme .ms-form__composite-input .ms-form__input[type="number"]::-webkit-outer-spin-button, .ms-theme .ms-form__composite-input .ms-form__input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0; }
  .ms-theme .ms-form__composite-input:disabled, .ms-theme .ms-form__composite-input[disabled] {
    border-bottom: 0; }
  .ms-theme .ms-form__composite-input.ms-form__composite-input_focused {
    color: #0f8ec7;
    border-bottom: 1px solid #0f8ec7; }
    .ms-theme .ms-form__composite-input.ms-form__composite-input_focused.ms-form__composite-input + .ms-form__label {
      color: #0f8ec7; }

.ms-theme .ms-form__select {
  position: relative; }
  .ms-theme .ms-form__select::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    -webkit-transform: rotate(0.05deg);
    transform: rotate(0.05deg);
    display: inline-block;
    font-family: 'MSTheme';
    color: #b7b7b7;
    display: inline-block;
    font-size: 16px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 0;
    background-color: #fff;
    padding-left: 3px; }
  .ms-theme .ms-form__select.ms-form__select_focused.ms-form__select + .ms-form__label, .ms-theme .ms-form__select.ms-form__select_focused::after {
    color: #0f8ec7; }
  .ms-theme .ms-form__select .ms-form__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 0;
    outline: 0;
    background: #fff; }
    .ms-theme .ms-form__select .ms-form__input.ms-form__input_has-placeholder {
      color: #b7b7b7; }
    .ms-theme .ms-form__select .ms-form__input::-ms-expand {
      display: none; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-theme .ms-form__select .ms-form__input option {
        outline: 0;
        color: #333; }
        .ms-theme .ms-form__select .ms-form__input option:disabled {
          color: #b7b7b7;
          background: #fff; }
        .ms-theme .ms-form__select .ms-form__input option:hover {
          background: #0f8ec7; }
      .ms-theme .ms-form__select .ms-form__input:focus::-ms-value {
        background-color: transparent;
        color: #0f8ec7; } }

.ms-theme .ms-form__input_center {
  text-align: center; }

.ms-theme .ms-form__separator {
  margin: 0 5px; }
  .ms-theme .ms-form__separator::after {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    color: #b7b7b7;
    content: "-";
    display: inline-block; }

.ms-theme .ms-form__header,
.ms-theme .ms-form__label {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
  cursor: text;
  color: #333;
  text-transform: uppercase; }
  @media (min-width: 768px) {
    .ms-theme .ms-form__header,
    .ms-theme .ms-form__label {
      font-size: 16px;
      line-height: 24px; } }

.ms-theme .ms-form__header {
  margin-bottom: 5px; }

.ms-theme .ms-form__label {
  letter-spacing: normal;
  letter-spacing: initial;
  width: auto;
  width: initial; }
  .ms-theme .ms-form__label.ms-form__label_disabled, .ms-theme .ms-form__label[disabled] {
    color: #666; }

.ms-theme .ms-form__input_no-mb {
  margin-bottom: 0; }

.ms-theme .ms-form__helper {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: #999;
  margin: -5px 0 7px;
  min-height: 20px; }
  @media (min-width: 768px) {
    .ms-theme .ms-form__helper {
      font-size: 14px;
      line-height: 20px; } }
  .ms-theme .ms-form__helper.ms-form__helper_success {
    color: #3eb661; }
  .ms-theme .ms-form__helper.ms-form__helper_warning {
    color: #f9ae22; }
  .ms-theme .ms-form__helper.ms-form__helper_error {
    color: #cc5a5a; }
  .ms-theme .ms-form__helper.ms-form__helper_error-icon::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    -webkit-transform: rotate(0.05deg);
    transform: rotate(0.05deg);
    display: inline-block;
    font-family: 'MSTheme'; }
  .ms-theme .ms-form__helper.ms-form__helper_error-icon::before {
    color: #cc5a5a;
    margin: 0 5px 0 0;
    font-weight: bold; }

.ms-theme .ms-form__input-spinner {
  position: absolute;
  right: 0;
  top: 20px; }

.ms-theme .ms-form__btn-group {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox; }
  @media (max-width: 767px) {
    .ms-theme .ms-form__btn-group {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      min-width: 0;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 20px; } }
  @media screen and (max-width: 767px) and (-ms-high-contrast: none), (max-width: 767px) and (-ms-high-contrast: active) {
    .ms-theme .ms-form__btn-group {
      -ms-flex: 1 1 0%; } }
  @media (max-width: 767px) and (min-width: 768px) {
    .ms-theme .ms-form__btn-group {
      min-height: 0; } }
  @media (max-width: 767px) {
      .ms-theme .ms-form__btn-group.ms-form__btn-group_show-large {
        display: none; }
      .ms-theme .ms-form__btn-group.ms-form__btn-group_show-small {
        display: -webkit-box;
        display: flex;
        display: -ms-flexbox;
        padding-top: 20px; }
      .ms-theme .ms-form__btn-group.ms-form__btn-group_theme-margin-bottom {
        margin-bottom: 5.55vh; } }
  @media (min-width: 768px) {
    .ms-theme .ms-form__btn-group {
      margin-top: 20px; }
      .ms-theme .ms-form__btn-group.ms-form__btn-group_show-small {
        display: none; }
      .ms-theme .ms-form__btn-group.ms-form__btn-group_show-large {
        display: -webkit-box;
        display: flex;
        display: -ms-flexbox; }
      .ms-theme .ms-form__btn-group.ms-form__btn-group_theme-margin-bottom {
        margin-bottom: 30px; } }

.ms-form, .msm-theme .ms-form__wrapper-compact .ms-form, .ms-form__wrapper-compact .ms-form {
  background-color: transparent;
  border-radius: 0;
  margin: 0;
  padding: 0; }
  @media (min-width: 768px) {
    .ms-form, .msm-theme .ms-form__wrapper-compact .ms-form, .ms-form__wrapper-compact .ms-form {
      margin: 0; }
      .ms-form:not(.ms-form_reduced-padding) {
        padding: 0; } }
  .ms-form:last-child {
    margin-bottom: 0; }
  .ms-form.ms-form_flat-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0; }
  .ms-form.ms-form_flat-bottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .ms-form.ms-form_no-margin {
    margin: 0; }
  .ms-form.ms-form_transparent {
    background: transparent;
    color: #fff; }

.ms-form__row {
  min-height: 55px;
  border-bottom: none;
  margin-bottom: 0; }
  .ms-form__row.ms-form__row_selected:first-child {
    border-radius: 0 0 0 0; }
  .ms-form__row:last-child {
    border-bottom: 0; }
    .ms-form__row:last-child.ms-form__row_selected .ms-form__input {
      border-radius: 0 0 0; }
  .ms-form__row.ms-form__row_border {
    border-bottom: none; }
  .ms-form__row[disabled], .ms-form__row.disabled {
    pointer-events: none; }
    .ms-form__row[disabled] .ms-form__label, .ms-form__row.disabled .ms-form__label {
      color: #bbb; }
    .ms-form__row[disabled] .ms-form__input, .ms-form__row.disabled .ms-form__input {
      color: rgba(21, 116, 177, 0.3); }
      .ms-form__row[disabled] .ms-form__input .ms-form__input-dark,
      .ms-form__row[disabled] .ms-form__input .ms-form__input-right,
      .ms-form__row[disabled] .ms-form__input .ms-form__input-secondary, .ms-form__row.disabled .ms-form__input .ms-form__input-dark,
      .ms-form__row.disabled .ms-form__input .ms-form__input-right,
      .ms-form__row.disabled .ms-form__input .ms-form__input-secondary {
        color: #bbb; }
  .ms-form__row.ms-form__row_error .ms-form__label {
    color: #f23; }
  .ms-form__row.ms-form__row_error .ms-form__input-tip {
    color: #f23; }
  .ms-form__row.ms-form__row_warning .ms-form__label {
    color: #fa9100; }
  .ms-form__row.ms-form__row_toggle .ms-form__label {
    width: 100%; }
  .ms-form__row.ms-form__row_toggle .ms-form__input {
    width: 100%; }
  .ms-form__row.ms-form__row_full-width {
    width: 100%; }

.ms-form__label {
  font-family: "Open Sans";
  font-weight: normal;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  min-width: 0;
  color: #333;
  font-size: 11px;
  line-height: 20px;
  margin-right: 5px;
  min-width: 0;
  width: 100%; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-form__label {
      -ms-flex: 0 0 auto; } }
  .ms-form__label[disabled], .ms-form__label.disabled {
    color: #bbb;
    pointer-events: none; }

.ms-form__label-small {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777; }

.ms-form__label-medium {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 13px;
  line-height: 18px;
  color: #777; }

.ms-form__input {
  font-family: "Open Sans";
  font-weight: normal;
  background-color: transparent;
  border: 0;
  color: #1574b1;
  font-size: 15px;
  outline: 0;
  padding: 0;
  position: relative; }
  .ms-form__input.ms-form-date {
    min-width: 180px; }
  .ms-form__input[disabled],
  .ms-form__input [disabled], .ms-form__input.disabled {
    color: rgba(21, 116, 177, 0.3);
    pointer-events: none; }
  .ms-form__input:only-child {
    padding-left: 0; }
  .ms-form__input.ms-form__input_list-value {
    color: #333;
    text-align: right; }
  .ms-form__input.ms-form__input_break-word {
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto; }
  .ms-form__input.ms-form__input_flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row; }
  .ms-form__input.ms-form__input_flex-row-center {
    -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; }
    .ms-form__input.ms-form__input_flex-row-center .ms-form__input-left {
      display: -webkit-box;
      display: flex;
      display: -ms-flexbox;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
  .ms-form__input.ms-form__input_multi {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .ms-form__input.ms-form__input_flex {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-form__input.ms-form__input_flex {
        -ms-flex: 1 1 0%; } }
  .ms-form__input.ms-form__input_icon {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    min-width: 0;
    font-size: 25px;
    width: 44px; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-form__input.ms-form__input_icon {
        -ms-flex: 0 0 auto; } }

.ms-form__input-primary {
  line-height: 20px; }

.ms-form__input-secondary {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777; }

.ms-form__input-left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-form__input-left {
      -ms-flex: 1 1 0%; } }

.ms-form__input-right {
  color: #333;
  text-align: right; }

.ms-form__input-notification {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 13px;
  line-height: 18px;
  color: #fa9100; }

.ms-form__input-counter {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #bbb;
  position: absolute;
  text-align: right;
  right: 12px;
  bottom: 12px; }

.ms-form__input-inline {
  font-family: "Open Sans";
  font-weight: normal;
  background-color: #efefef;
  border: 0;
  width: 100%; }
  .ms-form__input-inline:focus {
    outline: none; }

.ms-form__input-dark {
  color: #333; }

.ms-form__row_selected:first-of-type .ms-form__input {
  border-top-right-radius: 0; }

.ms-form__input-light {
  border: 0;
  outline: none;
  width: 90%; }

.ms-form__row_selected .ms-form__input {
  background-color: #efefef;
  min-height: 54px; }

.ms-form__input-placeholder {
  font-family: "Open Sans Light";
  font-weight: 300;
  color: #999; }

.ms-form__row-notification {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: initial;
      -ms-flex-align: initial;
          align-items: initial;
  border-bottom: 0;
  padding: 0;
  padding-right: 10px;
  min-height: 0; }

.ms-form__row-top-label {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: initial;
      -ms-flex-align: initial;
          align-items: initial; }
  .ms-form__row-top-label .ms-form__label {
    width: 100%; }

.ms-form__row-tip {
  margin-top: -1px;
  background-color: #fff; }
  .ms-form__row-tip:last-child {
    border-bottom-right-radius: 0; }

.ms-form__input-tip {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777;
  background-color: #efefef;
  padding: 8px 10px;
  margin-bottom: 10px;
  border-radius: 0;
  letter-spacing: -0.2px; }

.ms-form__row_checkbox .ms-form__label, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__label,
.ms-form__row_radio .ms-form__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  width: auto;
  font-size: 11px;
  margin-right: 5px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-form__row_checkbox .ms-form__label, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__label,
    .ms-form__row_radio .ms-form__label {
      -ms-flex: 1 1 0%; } }

.ms-form__row_checkbox .ms-form__input, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input,
.ms-form__row_radio .ms-form__input {
  border-bottom: 1px solid #fff;
  top: 1px;
  max-width: 30px;
  padding: 0; }
  .ms-form__row_checkbox .ms-form__input::before, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before,
  .ms-form__row_radio .ms-form__input::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    font-size: 26px; }

.ms-form__row_checkbox:last-child .ms-form__input, .msm-theme .ms-form__row.ms-form__row_checkbox-inner:last-child .ms-form__input,
.ms-form__row_radio:last-child .ms-form__input {
  border-bottom: 0;
  top: 0; }

.ms-form__row_checkbox.ms-form__row_selected .ms-form__input, .msm-theme .ms-form__row_selected.ms-form__row.ms-form__row_checkbox-inner .ms-form__input,
.ms-form__row_radio.ms-form__row_selected .ms-form__input {
  background-color: #fff;
  min-height: 0; }
  .ms-form__row_checkbox.ms-form__row_selected .ms-form__input::before, .msm-theme .ms-form__row_selected.ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before,
  .ms-form__row_radio.ms-form__row_selected .ms-form__input::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none; }

.ms-form__row_checkbox .ms-form__input::before, .msm-theme .ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  font-size: 26px; }

.ms-form__row_checkbox.ms-form__row_selected .ms-form__input::before, .msm-theme .ms-form__row_selected.ms-form__row.ms-form__row_checkbox-inner .ms-form__input::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none; }

.ms-form__row_checkbox-dark .ms-form__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  width: auto;
  font-size: 15px;
  margin-right: 20px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-form__row_checkbox-dark .ms-form__label {
      -ms-flex: 1 1 0%; } }
  .ms-form__row_checkbox-dark .ms-form__label:last-child {
    margin-right: 20px; }

.ms-form__row_checkbox-dark .ms-form__input {
  border-bottom: 1px solid #fff;
  top: 1px;
  max-width: 30px;
  padding: 0; }
  .ms-form__row_checkbox-dark .ms-form__input::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    font-size: 26px; }

.ms-form__row_checkbox-dark:last-child .ms-form__input {
  border-bottom: 0;
  top: 0; }

.ms-form__row_checkbox-dark.ms-form__row_selected .ms-form__input {
  background-color: transparent;
  min-height: 0; }
  .ms-form__row_checkbox-dark.ms-form__row_selected .ms-form__input::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    z-index: 1; }
  .ms-form__row_checkbox-dark.ms-form__row_selected .ms-form__input::before {
    content: "";
    width: 18px;
    position: absolute;
    background-color: #fff;
    height: 18px;
    top: 2px;
    border-radius: 50%;
    left: 3px; }

.ms-form__row.ms-form__row_radio-group .ms-form__radio-group {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox; }

.ms-form__row-button {
  font-family: "Open Sans";
  font-weight: normal;
  color: #1574b1;
  font-size: 13px;
  text-align: right;
  width: 60px;
  margin-left: 20px; }

.msm-theme .ms-form__wrapper-compact .ms-form, .ms-form__wrapper-compact .ms-form {
  border: 1px solid #bbb; }

.ms-form__wrapper-compact .ms-form__input {
  color: #333;
  padding-left: 0; }

.ms-form__wrapper-compact .ms-form__input-placeholder {
  font-family: "Open Sans Light";
  font-weight: 300;
  color: #999; }

.ms-form__wrapper-compact .ms-form-outer-label {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 13px;
  line-height: 18px; }

.ms-form-standalone-btns {
  margin-top: 20px; }

.ms-form__chars-remaining {
  bottom: 0;
  color: #888;
  font-size: 11px;
  position: absolute; }

.ms-form__row.ms-form__row_header {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-top: 10px;
  min-height: 65px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-form__row.ms-form__row_header {
      -ms-flex: 1 1 0%; } }
  .ms-form__row.ms-form__row_header .ms-form__row-title-wrapper {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-form__row.ms-form__row_header .ms-form__row-title-wrapper {
        -ms-flex: 1 1 0%; } }
  .ms-form__row.ms-form__row_header .ms-form__row-title {
    color: #333;
    font-size: 15px; }
  .ms-form__row.ms-form__row_header .ms-form__row-action {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #1574b1;
    font-size: 13px;
    min-height: 44px;
    padding: 0 10px 0 20px; }

.ms-form__small-text {
  color: #777;
  font-size: 11px; }
  [disabled] .ms-form__small-text,
  .disabled .ms-form__small-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #bbb; }

.ms-form__btn-primary,
.ms-form__btn-tertiary {
  width: auto; }

.ms-form__btn-modal-bottom {
  border-radius: 0;
  bottom: 0;
  width: auto;
  position: absolute;
  margin-left: -5px; }

.ms-form__btns .ms-form__btn-secondary {
  display: none; }

.ms-form__btns .ms-form__btn-tertiary {
  margin-right: 10px;
  width: 130px; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-info-page_white {
  color: #002b51;
  background: #fff; }

.ms-info-page__title {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.8rem;
  margin: 20px 30px 30px; }

.ms-info-page__icon {
  display: block;
  font-size: 5rem;
  line-height: 5rem;
  margin: 0 0 20px; }

.ms-info-page__icon_light-blue {
  color: #0f8ec7; }

.ms-info-page__subtitle {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: .8rem;
  line-height: 1.1rem;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  background: transparent;
  overflow: hidden;
  margin: 15px 0; }

.ms-info-page__text-wrapper {
  position: relative; }
  .ms-info-page__text-wrapper::before {
    position: absolute;
    content: "";
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 150%;
    display: block;
    top: 50%;
    left: 130%; }
  .ms-info-page__text-wrapper::after {
    position: absolute;
    content: "";
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    width: 150%;
    display: block;
    bottom: 50%;
    right: 130%; }

.ms-info-page__text-wrapper_large-text::before {
  left: 105%; }

.ms-info-page__text-wrapper_large-text::after {
  right: 105%; }

.ms-info-page__text-wrapper_gray::after, .ms-info-page__text-wrapper_gray::before {
  border-bottom: 1px solid #b7b7b7; }

.ms-info-page__section {
  text-align: center;
  margin: 0 20px; }

.ms-info-page__section_top-border {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 0 0;
  margin-top: 20px; }

.ms-info-page__large-text {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 4.5vh;
  color: #0f8ec7; }
  @media (min-width: 768px) {
    .ms-info-page__large-text {
      font-size: 40px; } }

.ms-info-page__content-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - 44px); }
  @media (min-width: 768px) {
    .ms-info-page__content-wrapper {
      padding: 0 50px;
      height: calc(80vh - 44px); } }

.ms-info-page__list {
  margin: 20px 0; }

.ms-info-page__list-item {
  color: #999;
  padding: 10px 0;
  text-align: left;
  border-bottom: 1px solid #e9e9e9; }
  .ms-info-page__list-item:last-child {
    border-bottom: 0; }

.ms-input-clear {
  position: absolute;
  color: #0f8ec7;
  right: 0;
  z-index: 10; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-large-header {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: #0f8ec7;
  width: 100%;
  padding: 40px 0; }
  .ms-large-header.ms-large-header_small {
    padding: 40px 0 10px; }

.ms-large-header__title {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 35px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  margin-top: 0; }
  @media (min-width: 768px) {
    .ms-large-header__title {
      font-size: 46px;
      line-height: 52px; } }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-theme .ms-link {
  font-family: "Karla Bold";
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: #0f8ec7;
  cursor: pointer;
  text-decoration: none; }
  @media (min-width: 768px) {
    .ms-theme .ms-link {
      font-size: 16px;
      line-height: 24px; } }
  .ms-theme .ms-link.ms-link_focus, .ms-theme .ms-link:focus {
    color: rgba(15, 142, 199, 0.7); }
  .ms-theme .ms-link.ms-link_disabled, .ms-theme .ms-link[disabled] {
    color: #b7b7b7; }
  .ms-theme .ms-link.ms-link_small {
    font-size: 14px;
    line-height: 20px;
    display: inline-block; }
  .ms-theme .ms-link.ms-link_button {
    padding: 0;
    text-align: left; }

.ms-theme .ms-link_white {
  color: #fff; }
  .ms-theme .ms-link_white.ms-link_focus, .ms-theme .ms-link_white:focus {
    color: rgba(255, 255, 255, 0.7); }
  .ms-theme .ms-link_white.ms-link_disabled, .ms-theme .ms-link_white[disabled] {
    color: #b7b7b7; }

.ms-theme .ms-link_teal {
  color: #62e1e6; }
  .ms-theme .ms-link_teal.ms-link_focus, .ms-theme .ms-link_teal:focus {
    color: rgba(98, 225, 230, 0.7); }
  .ms-theme .ms-link_teal.ms-link_disabled, .ms-theme .ms-link_teal[disabled] {
    color: #b7b7b7; }

.ms-theme .ms-link_gray {
  color: #999; }

.ms-theme .ms-link_lowercase {
  text-transform: lowercase; }

.ms-theme .ms-link_capitalize {
  text-transform: capitalize; }

.ms-theme .ms-link_help::before, .ms-theme .ms-link_info::before, .ms-theme .ms-link_add::before, .ms-theme .ms-link_refresh::before, .ms-theme .ms-link_save::before {
  display: inline-block;
  font-size: 18px;
  padding-right: 5px;
  position: relative;
  top: 1px; }

.ms-theme .ms-link_help::before,
.ms-theme .ms-link_help::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block;
  font-family: 'MSTheme'; }

.ms-theme .ms-link_info::before,
.ms-theme .ms-link_info::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block;
  font-family: 'MSTheme'; }

.ms-theme .ms-link_add::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block;
  font-family: 'MSTheme'; }

.ms-theme .ms-link_refresh::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block;
  font-family: 'MSTheme';
  font-size: 15px;
  top: 0; }

.ms-theme .ms-link_save::before {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
  display: inline-block;
  font-family: 'MSTheme'; }

.ms-theme .ms-link_big {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 6vh;
  line-height: 6.5vh;
  border-bottom: 1px dashed #0f8ec7;
  display: inline-block;
  padding-bottom: 5px; }
  @media (min-width: 768px) {
    .ms-theme .ms-link_big {
      font-size: 80px;
      line-height: 70px; } }
  @media (min-width: 768px) {
    .ms-theme .ms-link_big {
      padding-bottom: 10px; } }

.ms-theme .ms-link_big-readonly {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 6vh;
  line-height: 6.5vh;
  color: #002b51;
  display: inline-block;
  padding-bottom: 5px; }
  @media (min-width: 768px) {
    .ms-theme .ms-link_big-readonly {
      font-size: 80px;
      line-height: 70px; } }

.ms-theme .ms-bullet-icon::after {
  content: "\2022";
  font-size: 9vw;
  display: block;
  margin-top: 0; }

.ms-theme .ms-subtitle-link {
  display: inline-block;
  margin-top: 10px; }
  @media (min-width: 768px) {
    .ms-theme .ms-subtitle-link {
      margin-top: 20px; } }

.ms-theme .ms-headline-medium-subtitle-link {
  margin-top: 3.97vh;
  display: inline-block; }

.ms-theme a.ms-cta_secondary {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 4.53vw;
  line-height: 2.25vh;
  color: #62e1e6;
  cursor: pointer; }
  @media (min-width: 768px) {
    .ms-theme a.ms-cta_secondary {
      font-size: 18px;
      line-height: 26px; } }
  @media (min-width: 768px) {
    .ms-theme a.ms-cta_secondary:hover {
      text-decoration: underline; } }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.mso-theme .ms-list-menu__item.ms-list-menu__item_selected {
  background-color: #0f8ec7; }

.msm-theme .ms-list-menu {
  background-color: #022644; }

.msm-theme .ms-list-menu__header {
  background-color: #013461; }

.msm-theme .ms-list-menu__item {
  font-size: 15px;
  line-height: 20px;
  min-height: 44px; }
  .msm-theme .ms-list-menu__item.ms-list-menu__item_on-white {
    color: #0f8ec7; }
  .msm-theme .ms-list-menu__item.ms-list-menu__item_on-popover {
    font-size: 16px;
    line-height: 24px;
    min-height: 40px;
    color: #002b51; }

.ms-theme .ms-list-menu__header {
  background: #fff;
  color: #b7b7b7;
  margin-top: 20px;
  text-transform: uppercase; }

.ms-theme .ms-list-menu__item {
  font-size: 15px;
  line-height: 20px;
  background-color: #f5f5f5;
  color: #666;
  min-height: 44px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-theme .ms-list-menu__item {
      padding: 10px; } }
  .ms-theme .ms-list-menu__item:nth-child(2n) {
    background: #fff; }
  .ms-theme .ms-list-menu__item.ms-list-menu__item_selected {
    background-color: #e9e9e9;
    color: #0f8ec7; }
  .ms-theme .ms-list-menu__item.ms-list-menu__item_no-stripes {
    background-color: #fff; }
    .ms-theme .ms-list-menu__item.ms-list-menu__item_no-stripes.ms-list-menu__item_selected {
      background-color: #f5f5f5; }

.ms-list-menu {
  background-color: #013461;
  color: #fff; }
  .ms-list-menu.ms-list-menu_on-white {
    background-color: #fff;
    color: #1574b1; }
    .ms-list-menu.ms-list-menu_on-white .ms-list-menu__item_border {
      border-bottom-color: rgba(202, 202, 202, 0.5); }
      .ms-list-menu.ms-list-menu_on-white .ms-list-menu__item_border:last-child {
        border-bottom: 0; }
  .ms-list-menu ul.ms-list-menu__list {
    margin-left: 0; }

.ms-list-menu__header {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  background-color: #022644;
  color: #fff;
  font-size: 11px;
  line-height: 25px;
  height: 25px;
  text-transform: none;
  padding: 0 10px; }
  @media (min-width: 768px) {
    .ms-list-menu__header {
      padding: 0 20px; } }
  .ms-list-menu__header.ms-list-menu__header_on-white {
    background-color: #fff;
    color: #013461; }
  .ms-list-menu__header.ms-list-menu__header_font-bold {
    font-size: 13px;
    line-height: 18px;
    font-family: "Karla Bold";
    font-weight: 600; }

.ms-list-menu__header-left {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-list-menu__header-left {
      -ms-flex: 1 1 0%; } }
  .ms-list-menu__header-left .ms-list-menu__header-left-label {
    font-family: "Open Sans Semibold";
    font-weight: 600;
    margin-right: 4px; }

.ms-list-menu__header-right {
  text-align: right;
  white-space: nowrap; }
  @media (min-width: 768px) {
    .ms-list-menu__header-right {
      padding-left: 20px; } }

.ms-list-menu__header_sticky {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1; }

.ms-list-menu__items_max-height-300 {
  max-height: 300px; }

.ms-list-menu__item {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 13px;
  line-height: 20px;
  min-height: 30px;
  padding: 0 10px;
  cursor: pointer; }
  @media (min-width: 768px) {
    .ms-list-menu__item {
      padding: 0 20px;
      white-space: nowrap; } }
  .ms-list-menu__item:active {
    background-color: rgba(21, 116, 177, 0.5); }
  .ms-list-menu__item.disabled {
    opacity: .3;
    pointer-events: none; }
    .ms-list-menu__item.disabled:active {
      background-color: inherit; }
  .ms-list-menu__item.ms-list-menu__item_secondary {
    font-family: "Open Sans Light";
    font-weight: 300; }
  .ms-list-menu__item.ms-list-menu__item_info {
    font-family: "Open Sans Light";
    font-weight: 300;
    font-size: 11px;
    line-height: 13px;
    background-color: #022644;
    min-height: 35px; }
  .ms-list-menu__item.ms-list-menu__item_gray-bg {
    background-color: #e5e5e5;
    color: #333; }
  .ms-list-menu__item.ms-list-menu__item_three-lines {
    min-height: 74px; }
  .ms-list-menu__item.ms-list-menu__item_selected {
    background-color: #1574b1; }
  .ms-list-menu__item.ms-list-menu__item_stacked {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    .ms-list-menu__item.ms-list-menu__item_stacked .ms-list-menu__item-right {
      text-align: left;
      padding-left: 0; }
  .ms-list-menu__item.ms-list-menu__item_active {
    background-color: #1574b1; }
  .ms-list-menu__item.ms-list-menu__item_no-active:active {
    background-color: inherit; }
  .ms-list-menu__item.ms-list-menu__item_locked::after {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none;
    padding-right: 10px;
    font-size: 20px;
    color: #bbb; }
  .ms-list-menu__item.ms-list-menu__item_locked:active {
    background-color: inherit; }
  .ms-list-menu__item.ms-list-menu__item_border {
    border-bottom: 1px solid rgba(21, 116, 177, 0.5); }
  .ms-list-menu__item.ms-list-menu__item_border-light {
    border-bottom: 1px solid rgba(21, 116, 177, 0.1); }
  .ms-list-menu__item.ms-list-menu__item_on-white {
    background-color: #fff;
    color: #002b51; }
    .ms-list-menu__item.ms-list-menu__item_on-white:hover, .ms-list-menu__item.ms-list-menu__item_on-white:focus, .ms-list-menu__item.ms-list-menu__item_on-white.ms-list-menu__item_active {
      background-color: #f5f5f5;
      color: #0f8ec7; }
      .ms-list-menu__item.ms-list-menu__item_on-white:hover .ms-list-menu__small, .ms-list-menu__item.ms-list-menu__item_on-white:focus .ms-list-menu__small, .ms-list-menu__item.ms-list-menu__item_on-white.ms-list-menu__item_active .ms-list-menu__small {
        color: #0f8ec7; }
    .ms-list-menu__item.ms-list-menu__item_on-white.ms-list-menu__item_selected {
      background-color: #f5f5f5;
      color: #0f8ec7; }
      .ms-list-menu__item.ms-list-menu__item_on-white.ms-list-menu__item_selected::after {
        content: "";
        margin: 0;
        left: 6px;
        top: 1px;
        width: 3px;
        height: 10px;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        border: solid #0f8ec7;
        border-width: 0 1px 1px 0;
        display: block; }

.ms-list-menu__item-first {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 16px;
  line-height: 19px; }

.ms-list-menu__item-icon {
  padding: 2px;
  width: 40px;
  height: 40px; }
  .ms-list-menu__item-icon.ms-list-menu__item-icon_merchant {
    padding-left: 10px;
    padding-right: 10px;
    width: 70px; }

.ms-list-menu__item-icon__image {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 100px; }

.ms-list-menu__item-icon__ms-icon {
  font-size: 36px;
  line-height: 36px;
  padding-left: 5px;
  padding-top: 2px; }

.ms-list-menu__item-left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  text-align: left; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-list-menu__item-left {
      -ms-flex: 1 1 0%; } }
  .ms-list-menu__item-left:only-child {
    padding-right: 10px; }
    @media (min-width: 768px) {
      .ms-list-menu__item-left:only-child {
        padding-right: 20px; } }
  .ms-list-menu__item-left.ms-list-menu__item-left_no-flex {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-list-menu__item-left.ms-list-menu__item-left_no-flex {
        -ms-flex: 0 0 auto; } }

.ms-list-menu__item-right {
  padding-left: 10px;
  text-align: right;
  white-space: nowrap; }
  @media (min-width: 768px) {
    .ms-list-menu__item-right {
      padding-left: 20px; } }
  .ms-list-menu__item-right:only-child {
    padding-left: 0; }
  .ms-list-menu__item-right.ms-list-menu__item-right_checkbox, .ms-list-menu__item-right.ms-list-menu__item-right_checkbox-checked {
    padding-top: 3px; }
    .ms-list-menu__item-right.ms-list-menu__item-right_checkbox::before, .ms-list-menu__item-right.ms-list-menu__item-right_checkbox-checked::before {
      content: "";
      font-family: "msm-icons";
      font-weight: normal;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      speak: none;
      font-size: 26px; }
  .ms-list-menu__item-right.ms-list-menu__item-right_checkbox-checked::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none; }

.ms-list-menu__items.ms-list-menu__items_left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  text-align: left; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-list-menu__items.ms-list-menu__items_left {
      -ms-flex: 1 1 0%; } }
  .ms-list-menu__items.ms-list-menu__items_left:only-child {
    padding-right: 10px; }
    @media (min-width: 768px) {
      .ms-list-menu__items.ms-list-menu__items_left:only-child {
        padding-right: 20px; } }
  .ms-list-menu__items.ms-list-menu__items_left.ms-list-menu__item-left_no-flex {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-list-menu__items.ms-list-menu__items_left.ms-list-menu__item-left_no-flex {
        -ms-flex: 0 0 auto; } }

.ms-list-menu__items.ms-list-menu__items_right {
  padding-left: 10px;
  text-align: right;
  white-space: nowrap; }
  @media (min-width: 768px) {
    .ms-list-menu__items.ms-list-menu__items_right {
      padding-left: 20px; } }
  .ms-list-menu__items.ms-list-menu__items_right:only-child {
    padding-left: 0; }
  .ms-list-menu__items.ms-list-menu__items_right.ms-list-menu__item-right_checkbox, .ms-list-menu__items.ms-list-menu__items_right.ms-list-menu__item-right_checkbox-checked {
    padding-top: 3px; }
    .ms-list-menu__items.ms-list-menu__items_right.ms-list-menu__item-right_checkbox::before, .ms-list-menu__items.ms-list-menu__items_right.ms-list-menu__item-right_checkbox-checked::before {
      content: "";
      font-family: "msm-icons";
      font-weight: normal;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      speak: none;
      font-size: 26px; }
  .ms-list-menu__items.ms-list-menu__items_right.ms-list-menu__item-right_checkbox-checked::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none; }

.ms-list-menu__items.ms-list-menu__item_align-top {
  -webkit-align-self: start;
  -ms-flex-item-align: start;
      align-self: start; }

.ms-list-menu__label {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 14px; }

.ms-list-menu__edit {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 13px; }

.ms-list-menu__value {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 12px; }

.ms-list-menu__small {
  color: #bbb;
  font-size: 11px;
  line-height: 14px; }

.ms-list-menu__light {
  font-family: "Open Sans Light";
  font-weight: 300; }

.ms-list-menu__error {
  margin: 20px;
  text-align: center; }

.ms-list-menu__error-with-icon {
  background: rgba(51, 51, 51, 0.1);
  margin: 0 0 10px;
  padding: 5px; }

.ms-list-menu__error-with-icon-message {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 13px;
  padding: 0 10px; }
  @media (min-width: 768px) {
    .ms-list-menu__error-with-icon-message {
      padding: 0 20px; } }

.ms-list-menu__error-with-icon-close {
  font-size: 25px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  width: 50px; }
  .ms-list-menu__error-with-icon-close::before {
    content: "";
    font-family: "msm-icons";
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    speak: none; }

.ms-list-menu__search-result-left {
  padding: 10px 10px 10px 0; }
  @media (min-width: 768px) {
    .ms-list-menu__search-result-left {
      padding: 20px 20px 20px 0; } }

.ms-list-menu__search-result-right {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  text-align: right;
  padding: 10px 10px 10px 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-list-menu__search-result-right {
      -ms-flex: 1 1 0%; } }
  @media (min-width: 768px) {
    .ms-list-menu__search-result-right {
      padding: 20px 20px 20px 0; } }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */

@-webkit-keyframes ms-loading-dots--show {
  from {
    background-color: transparent; }
  to {
    background-color: #fff; } }

@keyframes ms-loading-dots--show {
  from {
    background-color: transparent; }
  to {
    background-color: #fff; } }

@-webkit-keyframes ms-loading-dots--pulse {
  0% {
    background-color: #fff; }
  60% {
    background-color: transparent; }
  90% {
    background-color: #fff; }
  100% {
    background-color: #fff; } }

@keyframes ms-loading-dots--pulse {
  0% {
    background-color: #fff; }
  60% {
    background-color: transparent; }
  90% {
    background-color: #fff; }
  100% {
    background-color: #fff; } }

.ms-loading-dots {
  position: relative;
  margin: 0 auto; }
  .ms-loading-dots::before, .ms-loading-dots, .ms-loading-dots::after {
    -webkit-animation: ms-loading-dots--show 0.5s linear forwards, ms-loading-dots--pulse 2s linear infinite;
    animation: ms-loading-dots--show 0.5s linear forwards, ms-loading-dots--pulse 2s linear infinite;
    background-color: transparent;
    width: 15px;
    height: 15px;
    border-radius: 50%; }
  .ms-loading-dots::before, .ms-loading-dots::after {
    content: "";
    position: absolute;
    top: 0; }
  .ms-loading-dots::before {
    -webkit-animation-delay: 0.5s, 2.5s;
    animation-delay: 0.5s, 2.5s;
    left: -33px; }
  .ms-loading-dots {
    -webkit-animation-delay: 1s, 2.8s;
    animation-delay: 1s, 2.8s; }
  .ms-loading-dots::after {
    -webkit-animation-delay: 1.5s, 3.1s;
    animation-delay: 1.5s, 3.1s;
    right: -33px; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.modal-input-secondary {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777; }

.modal-input-message {
  font-size: 14px;
  line-height: 17px;
  font-family: "Open Sans";
  font-weight: normal;
  color: #d6d6d6; }

.modal-input-number, .modal-input-date, .modal-input-text, .modal-input-text-multiline {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -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;
  color: #333;
  background-color: #fff;
  height: 54px;
  padding: 0 15px 0 10px;
  border-left: 5px solid transparent;
  border-bottom: 1px solid #e5e5e5; }
  .warn.modal-input-number, .warn.modal-input-date, .warn.modal-input-text, .warn.modal-input-text-multiline, .warning.modal-input-number, .warning.modal-input-date, .warning.modal-input-text, .warning.modal-input-text-multiline {
    border-left-color: #fa9100; }
    .warn.modal-input-number .modal-input-secondary, .warn.modal-input-date .modal-input-secondary, .warn.modal-input-text .modal-input-secondary, .warn.modal-input-text-multiline .modal-input-secondary, .warning.modal-input-number .modal-input-secondary, .warning.modal-input-date .modal-input-secondary, .warning.modal-input-text .modal-input-secondary, .warning.modal-input-text-multiline .modal-input-secondary {
      color: #fa9100; }
  .estimated.modal-input-number .modal-input-secondary, .estimated.modal-input-date .modal-input-secondary, .estimated.modal-input-text .modal-input-secondary, .estimated.modal-input-text-multiline .modal-input-secondary {
    font-family: "Open Sans";
    font-weight: normal;
    color: #33b057; }
  .error.modal-input-number, .error.modal-input-date, .error.modal-input-text, .error.modal-input-text-multiline, .important.modal-input-number, .important.modal-input-date, .important.modal-input-text, .important.modal-input-text-multiline {
    border-left-color: #f23; }
    .error.modal-input-number .modal-input-secondary, .error.modal-input-date .modal-input-secondary, .error.modal-input-text .modal-input-secondary, .error.modal-input-text-multiline .modal-input-secondary, .important.modal-input-number .modal-input-secondary, .important.modal-input-date .modal-input-secondary, .important.modal-input-text .modal-input-secondary, .important.modal-input-text-multiline .modal-input-secondary {
      color: #f23; }
  .modal-input-number .selected, .modal-input-date .selected, .modal-input-text .selected, .modal-input-text-multiline .selected {
    background-color: rgba(21, 116, 177, 0.3); }

.modal-input-number {
  font-size: 30px;
  text-align: right; }

.modal-input-date {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  font-size: 15px; }

.modal-input-text {
  font-size: 15px; }

.modal-input-text-multiline {
  height: initial;
  font-size: 15px; }

.modal-input-bar {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-transition: opacity 0.24s ease-in-out;
  transition: opacity 0.24s ease-in-out;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 44px; }
  .modal-input-bar.modal-input-bar-disabled {
    opacity: 0;
    pointer-events: none; }
  .modal-input-bar.modal-input-bar_no-transition {
    -webkit-transition: none;
    transition: none; }
  .modal-input-bar .modal-input-bar-btn {
    padding: 0 15px; }
    .modal-input-bar .modal-input-bar-btn:active {
      color: #1574b1; }

.modal-input-banners {
  color: #333;
  background-color: #fff;
  padding: 0 5px 0 0;
  border-left: 5px solid transparent; }
  .modal-input-banners.warning, .modal-input-banners.warn {
    border-left-color: #fa9100; }
  .modal-input-banners.error {
    border-left-color: #f23; }
  .modal-input-banners .modal-input-banners-title {
    font-family: "Open Sans Semibold";
    font-weight: 600;
    font-size: 15px;
    margin: 9px 0 0;
    padding: 0 10px 10px; }
    .modal-input-banners .modal-input-banners-title:empty {
      margin: 0; }
  .modal-input-banners .modal-input-banners-text {
    font-size: 12px;
    margin: 0;
    padding: 0 10px 10px; }
    .modal-input-banners .modal-input-banners-text:empty {
      margin: 0;
      padding: 0; }
    .modal-input-banners .modal-input-banners-text:only-child {
      padding-top: 10px; }

.modal-input__date-container {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .modal-input__date-container {
      -ms-flex: 1 1 0%; } }

.modal-input__calendar-title_landscape {
  display: none; }

.ms-theme .modal-input-date {
  padding: 0;
  border-bottom: 0; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-parameter__name {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  font-size: 20px;
  line-height: 26px;
  color: #0f8ec7;
  border-bottom: 1px dashed #0f8ec7;
  cursor: pointer;
  display: inline-block; }
  @media (min-width: 768px) {
    .ms-parameter__name {
      font-size: 20px;
      line-height: 26px; } }
  .ms-parameter__name.ms-parameter__name_disabled {
    color: #002b51;
    border-bottom: 0;
    pointer-events: none; }
  .ms-parameter__name.ms-parameter__name_xl {
    font-family: "MS Gloriola II Display Thin";
    font-weight: 300;
    font-size: 45px;
    line-height: 50px; }
    @media (min-width: 768px) {
      .ms-parameter__name.ms-parameter__name_xl {
        font-size: 72px;
        line-height: 74px; } }

.ms-parameter__label {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.2px;
  color: #333;
  text-transform: uppercase; }
  @media (min-width: 768px) {
    .ms-parameter__label {
      font-size: 16px;
      line-height: 24px; } }
  .ms-parameter__label.ms-parameter__label_disabled {
    color: #b7b7b7; }

.ms-parameter__helper {
  font-family: "Karla Regular";
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.2px;
  color: #999;
  margin: 5px 0 0; }
  @media (min-width: 768px) {
    .ms-parameter__helper {
      font-size: 14px;
      line-height: 20px; } }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-pill-label {
  font-family: "PF Din Text Cond Pro Bold";
  font-weight: 600;
  font-size: 10px;
  line-height: 26px;
  background-color: #f9ae22;
  border-radius: 13px;
  color: #fff;
  display: inline-block;
  height: 26px;
  padding: 0 15px;
  text-transform: uppercase; }
  .ms-pill-label.ms-pill-label_success {
    background-color: #3eb661; }
  .ms-pill-label.ms-pill-label_fixed-size {
    width: 100px;
    text-align: center; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.msm-theme .ms-small-table {
  background-color: #fff; }
  .msm-theme .ms-small-table.ms-small-table_big-spacing .ms-small-table .ms-small-table__row {
    min-height: 35px; }

.msm-theme .ms-small-table__row {
  min-height: 35px; }
  .msm-theme .ms-small-table__row.ms-small-table__row_detail .ms-small-table__left {
    font-family: "Open Sans";
    font-weight: normal;
    padding-left: 10px; }
  .msm-theme .ms-small-table__row.ms-small-table__row_align-top .ms-small-table__left,
  .msm-theme .ms-small-table__row.ms-small-table__row_align-top .ms-small-table__right {
    padding-top: 2.5px;
    padding-bottom: 2.5px; }

.msm-theme .ms-small-table__left {
  font-size: 15px; }

.msm-theme .ms-small-table__right {
  font-size: 15px; }

.ms-flavor_android .ms-small-table.ms-small-table_flat-bottom {
  border-radius: 2px 2px 0 0; }

.ms-flavor_android .ms-small-table__tip {
  border-radius: 2px; }

.ms-theme .ms-small-table {
  border-radius: 0; }
  .ms-theme .ms-small-table.ms-small-table_border .ms-small-table__row {
    border-bottom: 1px solid rgba(187, 187, 187, 0.3); }
    .ms-theme .ms-small-table.ms-small-table_border .ms-small-table__row:last-child {
      border-bottom: 0; }
  .ms-theme .ms-small-table.ms-small-table_lowercase .ms-small-table__left {
    text-transform: initial;
    text-align: left; }
  .ms-theme .ms-small-table.ms-small-table_regular .ms-small-table__left,
  .ms-theme .ms-small-table.ms-small-table_regular .ms-small-table__right {
    font-family: "Karla Regular";
    font-weight: normal; }
  .ms-theme .ms-small-table.ms-small-table_on-dark, .ms-theme .ms-small-table.ms-small-table_dark-blue, .ms-theme .ms-small-table.ms-small-table_alpha-blue {
    color: #fff;
    background: transparent; }
    .ms-theme .ms-small-table.ms-small-table_on-dark .ms-small-table__right, .ms-theme .ms-small-table.ms-small-table_dark-blue .ms-small-table__right, .ms-theme .ms-small-table.ms-small-table_alpha-blue .ms-small-table__right {
      color: #fff; }
  .ms-theme .ms-small-table.ms-small-table_no-background {
    background: transparent; }

.ms-theme .ms-small-table__row {
  border-bottom: 0;
  min-height: 55px; }
  .ms-theme .ms-small-table__row.ms-small-table__row_secondary {
    min-height: 30px; }
    .ms-theme .ms-small-table__row.ms-small-table__row_secondary .ms-small-table__left {
      text-transform: initial;
      text-align: left;
      padding-left: 25px; }
    .ms-theme .ms-small-table__row.ms-small-table__row_secondary .ms-small-table__right {
      font-size: 13px; }
  .ms-theme .ms-small-table__row.ms-small-table__row_has_secondary {
    margin-bottom: -15px; }

.ms-theme .ms-small-table_np {
  padding: 0;
  margin: 0 20px 20px; }

.ms-theme .ms-small-table__row_small {
  min-height: 47px; }

.ms-theme .ms-small-table__left {
  font-size: 16px;
  text-transform: uppercase; }

.ms-theme .ms-small-table__right {
  font-family: "MS Gloriola II Std Light";
  font-weight: normal;
  color: #333;
  font-size: 16px; }
  .ms-theme .ms-small-table__right.ms-small-table__right_text {
    font-size: 21px;
    padding-bottom: 6px; }
  .ms-theme .ms-small-table__right.ms-small-table__right_link {
    border-bottom: 1px dashed #0f8ec7;
    color: #0f8ec7;
    font-size: 21px;
    padding-bottom: 3px;
    cursor: pointer; }

.ms-small-table {
  color: #333;
  background-color: transparent;
  border-radius: 2px;
  padding-left: 10px;
  padding-right: 10px; }
  @media (min-width: 768px) {
    .ms-small-table {
      padding-left: 20px;
      padding-right: 20px; } }
  .ms-small-table.ms-small-table_avoid-break {
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid; }
    .ms-small-table.ms-small-table_avoid-break .ms-small-table__row {
      -webkit-column-break-inside: avoid;
      column-break-inside: avoid; }
  .ms-small-table.ms-small-table_big-spacing .ms-small-table__row {
    min-height: 10px; }
  .ms-small-table.ms-small-table_big-spacing .ms-small-table .ms-small-table__row {
    min-height: 25px; }
  .ms-small-table.ms-small-table_regular {
    padding-right: 0; }
    .ms-small-table.ms-small-table_regular .ms-small-table__right {
      font-family: "Open Sans";
      font-weight: normal;
      padding-right: 10px; }
  .ms-small-table.ms-small-table_invert-font-weight .ms-small-table__left {
    font-family: "Open Sans Semibold";
    font-weight: 600; }
  .ms-small-table.ms-small-table_invert-font-weight .ms-small-table__right {
    font-family: "Open Sans";
    font-weight: normal; }
  .ms-small-table.ms-small-table_flex-right .ms-small-table__left {
    -webkit-box-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
    min-width: 0;
    white-space: normal; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-small-table.ms-small-table_flex-right .ms-small-table__left {
        -ms-flex: inherit; } }
  .ms-small-table.ms-small-table_flex-right .ms-small-table__right {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-small-table.ms-small-table_flex-right .ms-small-table__right {
        -ms-flex: 1 1 0%; } }
  .ms-small-table.ms-small-table_left-wrap .ms-small-table__left {
    white-space: normal; }
  .ms-small-table.ms-small-table_icon-list {
    margin-bottom: 10px; }
    .ms-small-table.ms-small-table_icon-list .small {
      font-family: "Open Sans Light";
      font-weight: 300;
      font-size: 13px;
      line-height: 18px; }
    .ms-small-table.ms-small-table_icon-list .ms-small-table__left {
      overflow: initial;
      font-size: 32px;
      color: #1574b1;
      padding-right: 5px;
      min-width: 36px;
      text-align: center; }
      .ms-small-table.ms-small-table_icon-list .ms-small-table__left .small-icon {
        font-size: 20px; }
      .ms-small-table.ms-small-table_icon-list .ms-small-table__left .adjusted-icon {
        font-size: 28px;
        line-height: 28px; }
    .ms-small-table.ms-small-table_icon-list .ms-small-table__right {
      text-align: left; }
  .ms-small-table.ms-small-table_flat-bottom {
    border-radius: 0 0 0 0; }
  .ms-small-table.ms-small-table_smaller .ms-small-table__left,
  .ms-small-table.ms-small-table_smaller .ms-small-table__right {
    font-size: 13px; }
  @media (min-width: 768px) {
    .ms-small-table.ms-small-table_smaller-large-only .ms-small-table__left,
    .ms-small-table.ms-small-table_smaller-large-only .ms-small-table__right {
      font-size: 13px; } }
  .ms-small-table.ms-small-table_on-dark, .ms-small-table.ms-small-table_dark-blue, .ms-small-table.ms-small-table_alpha-blue {
    color: #fff; }
    .ms-small-table.ms-small-table_on-dark .ms-small-table__row, .ms-small-table.ms-small-table_dark-blue .ms-small-table__row, .ms-small-table.ms-small-table_alpha-blue .ms-small-table__row {
      border-color: rgba(229, 229, 229, 0.4); }
  .ms-small-table.ms-small-table_dark-blue {
    background-color: #022644; }
  .ms-small-table.ms-small-table_alpha-blue {
    background-color: rgba(2, 38, 68, 0.8); }
    .ms-small-table.ms-small-table_alpha-blue .ms-small-table__row_side-padding {
      padding-left: 10px;
      padding-right: 10px; }
  .ms-small-table.ms-small-table_gray {
    background-color: #f7f7f7; }
  .ms-small-table.ms-small-table_dark-gray {
    background-color: #efefef; }
  .ms-small-table.ms-small-table_side-padding {
    padding-left: 10px;
    padding-right: 10px; }
  .ms-small-table.ms-small-table_no-padding {
    padding: 0; }
  .ms-small-table .ms-small-table {
    padding: 0; }
    .ms-small-table .ms-small-table .ms-small-table__row:first-child {
      border-bottom: 1px solid #e5e5e5; }

.ms-small-table__border {
  border-bottom: 1px solid #e5e5e5; }

.ms-small-table__row {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 25px;
  line-height: 19px;
  padding: 5px 0;
  border-bottom: 1px solid #e5e5e5; }
  .ms-small-table__row:last-child {
    border-bottom-width: 0; }
  .ms-small-table__row.ms-small-table__row_tip {
    margin-top: -1px;
    background: #fff;
    padding: 0 0 10px; }
  .ms-small-table__row.ms-small-table__row_total {
    border-top: 1px solid rgba(229, 229, 229, 0.5); }
    .ms-small-table__row.ms-small-table__row_total .ms-small-table__left,
    .ms-small-table__row.ms-small-table__row_total .ms-small-table__right {
      font-family: "Open Sans Semibold";
      font-weight: 600; }
  .ms-small-table__row.ms-small-table__row_inline-padding {
    padding-bottom: 5px; }
  .ms-small-table__row.ms-small-table__row_detail .ms-small-table__right {
    font-family: "Open Sans";
    font-weight: normal;
    padding-right: 0; }
  .ms-small-table__row.ms-small-table__row_detail .ms-small-table__left {
    font-family: "Open Sans Light";
    font-weight: 300;
    padding-left: 10px; }
  .ms-small-table__row.ms-small-table__row_align-top {
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial; }
    .ms-small-table__row.ms-small-table__row_align-top .ms-small-table__left,
    .ms-small-table__row.ms-small-table__row_align-top .ms-small-table__right {
      padding-top: -2.5px;
      padding-bottom: -2.5px; }
  .ms-small-table__row.ms-small-table__row_no-border {
    border-bottom: 0; }
  .ms-small-table__row.ms-small-table__row_last-child-border:last-child {
    border-bottom-width: 1px; }
  .ms-small-table__row.ms-small-table__row_avoid-break {
    -webkit-column-break-inside: avoid;
    column-break-inside: avoid; }
  .ms-small-table__row.ms-small-table__row_notification {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: initial;
        -ms-flex-align: initial;
            align-items: initial;
    border-bottom: 0;
    line-height: normal;
    padding: 0;
    min-height: 0; }
  .ms-small-table__row.ms-small-table__row_flex-left .ms-small-table__left {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-small-table__row.ms-small-table__row_flex-left .ms-small-table__left {
        -ms-flex: 1 1 0%; } }
  .ms-small-table__row.ms-small-table__row_flex-left .ms-small-table__right {
    -webkit-box-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-small-table__row.ms-small-table__row_flex-left .ms-small-table__right {
        -ms-flex: inherit; } }
  .ms-small-table__row.ms-small-table__row_side-padding {
    padding-left: 10px;
    padding-right: 10px; }
  .ms-small-table__row.ms-small-table__row_flex-right .ms-small-table__left {
    -webkit-box-flex: inherit;
        -ms-flex: inherit;
            flex: inherit;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-small-table__row.ms-small-table__row_flex-right .ms-small-table__left {
        -ms-flex: inherit; } }
  .ms-small-table__row.ms-small-table__row_flex-right .ms-small-table__right {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 0; }
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .ms-small-table__row.ms-small-table__row_flex-right .ms-small-table__right {
        -ms-flex: 1 1 0%; } }

.ms-small-table__tip {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777;
  background-color: #efefef;
  padding: 5px 10px;
  border-radius: 0; }

.ms-small-table__rounded {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 13px;
  line-height: 18px;
  color: #e5e5e5;
  border-radius: 50%;
  text-align: center;
  border: 1px solid #e5e5e5;
  height: 21px;
  width: 21px; }

.ms-small-table__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  margin-right: 3px; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-small-table__left {
      -ms-flex: 1 1 0%; } }
  .ms-small-table__left.ms-small-table__left_highlighted {
    color: #1574b1; }
  .ms-small-table__left.ms-small-table__left_wrap-text {
    white-space: normal; }
  .ms-small-table__left.ms-small-table__left_semibold {
    font-family: "Open Sans Semibold";
    font-weight: 600; }

.ms-small-table__right {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
      hyphens: auto;
  font-size: 13px;
  text-align: right; }
  .ms-small-table__right.ms-small-table__right_disabled {
    color: #b7b7b7;
    pointer-events: none;
    font-size: 21px; }

.ms-small-table__medium {
  font-family: "Open Sans Light";
  font-weight: 300; }

.ms-small-table__small {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 12px; }

.small {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777; }

.ms-small-table__blue {
  color: #1574b1; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-table {
  font-size: 13px;
  line-height: normal;
  width: 100%;
  background-color: #fff;
  color: #333;
  border-collapse: collapse;
  border-spacing: 0; }
  .ms-table.ms-table_no-bg {
    background: none; }

.ms-table__header {
  background-color: #f7f7f7; }

.ms-table__heading {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 11px;
  line-height: 13px;
  text-align: left;
  color: #333;
  padding: 0 10px 5px;
  height: 40px;
  background-color: #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #bbb;
  line-height: 12px;
  vertical-align: bottom; }

.ms-table__heading_right {
  text-align: right; }

.ms-table__heading_first {
  padding-left: 20px; }

.ms-table__heading_last {
  padding-right: 20px; }

.ms-table__heading_sortable {
  background-color: #f7f7f7; }

.ms-table__heading_selected {
  background-color: #efefef; }

.ms-table__heading-secondary {
  font-family: "Open Sans Light";
  font-weight: 300;
  font-size: 11px;
  line-height: 13px;
  line-height: 12px;
  color: #bbb; }

.ms-table__header_asc .ms-table__heading.ms-table__heading_selected::after,
.ms-table__header_asc .ms-table__heading.ms-table__heading_selected-multi-line .ms-table__heading-primary::after,
.ms-table__header_desc .ms-table__heading.ms-table__heading_selected::after,
.ms-table__header_desc .ms-table__heading.ms-table__heading_selected-multi-line .ms-table__heading-primary::after {
  color: #1574b1;
  display: inline-block;
  padding-left: 3px; }

.ms-table__header_asc .ms-table__heading.ms-table__heading_selected::after,
.ms-table__header_asc .ms-table__heading.ms-table__heading_selected-multi-line .ms-table__heading-primary::after {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  position: relative;
  top: 3px; }

.ms-table__header_desc .ms-table__heading.ms-table__heading_selected::after,
.ms-table__header_desc .ms-table__heading.ms-table__heading_selected-multi-line .ms-table__heading-primary::after {
  content: "";
  font-family: "msm-icons";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  speak: none;
  position: relative;
  bottom: 2px; }

.ms-table__cell {
  border-bottom: 1px solid #e5e5e5;
  height: 45px;
  padding: 0 10px; }

.ms-table__cell_right {
  text-align: right; }

.ms-table__cell_first {
  padding-left: 20px;
  position: relative; }
  .ms-table__cell_first::after {
    content: "";
    width: 20px;
    height: 1px;
    background-color: #fff;
    display: block;
    left: 0;
    bottom: -1px;
    position: absolute; }

.ms-table__cell_last {
  padding-right: 20px; }

.ms-table__cell_empty {
  background-color: #f7f7f7; }

.ms-table__cell_blue {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  color: #1574b1;
  margin-bottom: -3px; }

.ms-table__cell_light-blue {
  font-family: "Open Sans Semibold";
  font-weight: 600;
  color: #0f8ec7;
  margin-bottom: -3px; }

.ms-table__cell_secondary {
  font-family: "Open Sans";
  font-weight: normal;
  font-size: 11px;
  line-height: 16px;
  color: #777; }

.ms-table__cell_right-divider {
  border-right-color: #bbb; }

.ms-table__heading_25,
.ms-table__cell_25 {
  width: 25%;
  max-width: 0; }

.ms-table.ms-table_grid .ms-table__heading {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  background-color: #f7f7f7;
  border-bottom: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-table.ms-table_grid .ms-table__heading {
      -ms-flex: 1 1 0%; } }
  .ms-table.ms-table_grid .ms-table__heading.ms-table__heading_multi-line {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end; }
  .ms-table.ms-table_grid .ms-table__heading.ms-table__heading_white {
    background-color: #fff; }

.ms-table.ms-table_grid .ms-table__header {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  position: relative;
  min-height: 44px; }
  .ms-table.ms-table_grid .ms-table__header.ms-table__header_white {
    background-color: #fff; }

.ms-table.ms-table_grid .ms-table__cell {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  border-bottom: 0;
  height: inherit; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-table.ms-table_grid .ms-table__cell {
      -ms-flex: 1 1 0%; } }

.ms-table.ms-table_grid .ms-table__cell_with-icon {
  padding-left: 52px; }

.ms-table.ms-table_grid .ms-table__row {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  min-height: 44px; }

.ms-table.ms-table_grid .ms-table__row::after,
.ms-table.ms-table_grid .ms-table__header::after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: #e5e5e5;
  bottom: 0;
  left: 20px;
  right: 0; }

.ms-table.ms-table_grid.ms-table_grid-centered .ms-table__row::after,
.ms-table.ms-table_grid.ms-table_grid-centered .ms-table__header::after {
  right: 20px; }

.ms-table.ms-table_grid.ms-table_left-align-border .ms-table__row::after,
.ms-table.ms-table_grid.ms-table_left-align-border .ms-table__header::after {
  left: 0; }

.ms-table.ms-table_grid.ms-table_dark-gray-border .ms-table__row::after,
.ms-table.ms-table_grid.ms-table_dark-gray-border .ms-table__header::after {
  background-color: #b7b7b7; }

.ms-table.ms-table_grid .ms-table__collapsable-icon {
  z-index: 1;
  position: absolute;
  left: 15px;
  top: 10px; }

.ms-table__divider {
  border-bottom: 1px solid #dadada;
  margin: 0 20px;
  padding: 5px 0; }
  .ms-table__divider.ms-table__divider_first {
    border-top: 1px solid #dadada; }

.ms-validation-message {
  font-size: 12px;
  line-height: 16px; }
  @media (min-width: 768px) {
    .ms-validation-message {
      font-size: 14px;
      line-height: 18px;
      padding-top: 10px; } }
  .ms-validation-message.ms-validation-message_info {
    color: #3eb661; }
  .ms-validation-message.ms-validation-message_error {
    color: #f9ae22; }
  .ms-validation-message.ms-validation-message_hint {
    color: #666; }

/**
 * `$app`  Produces different results for MS Mobile vs. MS Online.
 *         `MSO`: "MS Online"
 *         `MSM`: "MS Mobile"
 *
 * @deprecated
 */
/**
* Fix for latest issue with flex and ellipsis :
*
* "Basically: flex items will refuse to shrink below
* their minimum intrinsic width, unless you explicitly
* specify "min-width" or "width" or "max-width" on them."
*/
/**
 This mixin normalizes the generation of the -ms-flex tag below. It is recommended that all future calls to flex()
 specify all three parameters because leaving them off causes all sorts of strange behavior in IE. I have included
 warnings (commented out) which can be used to encourage users to avoid leaving the specification of the flex shorthand
 setting with less than 3 parameters.

 Here are the bugs this mixin is meant to address:

	 Declaration             What it should mean    What it means in IE 10
	 (no flex declaration)   flex: 0 1 auto         flex: 0 0 auto
	 flex: 1                 flex: 1 1 0%           flex: 1 0 0px
	 flex: auto              flex: 1 1 auto         flex: 1 0 auto
	 flex: 0 auto            flex: 0 1 auto
	 flex: initial           flex: 0 1 auto         flex: 0 0 auto
	 flex: none              flex: 0 0 auto

	 Declaration             What it should mean    What it means in IE 10/11
	 flex: any any 0         any any 0%             unitless flex-basis values are ignored

*/
/**
 * Animations
 */
/**
 * MS Theme Colors
 *
 * Examples in the Kitchen Sink
 */
/**
 * MSM Theme Colors
 */
/**
 * disabled opacity
 */
/*
 * ms-flavor with apply styles only for a particular app flavor
 * requires flavor context with prefix, example: body.ms-flavor_android
 *
 */
/**
 * Globals
 */
/**
 * Scroll
 */
/**
 * When performing animations, Angular, by default, will set `display: block;`
 * on `.ng-hide-add` and `.ng-hide-remove` classes.
 *
 * This could break the layout, if the element has a different `display` property,
 * so we add this mixin to counterattack the problem.
 */
/**
 * Sliding Panel Animation
 * Based on Angular's new animation API, this mixin will add necessary Angular classes to the targeted selector.
 *
 * @param $direction Direction for the sliding animation. Defaults to "up" (from bottom to top).
 * @param $duration  Duration for the whole animation.
 * @param $easing    Easing function.
 */
/**
 * Sets a specific direction for the Sliding Panel Animation.
 * Needs to be used along with the previous mixin.
 *
 * @param $direction  Sets the direction that the animation should take. Defaults to up (this is from bottom to top).
 */
/**
* This will speed up any delay that might exist for touch users.
* It's kinda like a fastclick but CSS; specially noticeable in checkbox taps
*/
/**
 * Images
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `size/phone/components/_intestitial.scss`, `size/tablet/components/_tutorial-overlay.scss` and `size/tablet/components/_tutorials.scss`.
 */
/**
 * Migrated from Sambuca mixins.
 * Still used in `common/components/_spinner.scss`.
 */
/**
 * Unifies styling for using the background image across the app
 */
/**
*  Unifies styling for using the background image across the app and add Hidpi if needed
*/
/**
 * Layout
 */
/**
 * Adding mixins that don't exist in the `compass-sass-mixins` project.
 */
/**
 * Clear floating elements
 */
/*
 * Media query helper. Includes the content in a media query with
 * `min-width: breakpoint`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-at-least(md) { ... }` translates to:
 *
 *    `@media (min-width: 414px) { ... }`
 *
 */
/*
 * Media query helper. Includes the content in a media query with
 * `max-width: breakpoint - 1`
 * @param `$point` possible values: keys in _breakpoints.scss
 *
 * Example:
 *
 *    `@include ms-media-until(sm) { ... }` translates to:
 *
 *    `@media (max-width: 374px) { ... }`
 *
 */
/* Media query helpers for widescreen devices that have limited height.
 * There are at least two sizes that account for many standard devices: HiDPI (1440x900) and MDPI (1280x800) screens
*/
/*
 * media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles.
 * Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+),
 * it will only be parsed in Internet Explorer 10 and greater.
 */
/*
 * Mixin for Safari 9
 * `overflow:-webkit-marquee` is only available in Safari version < 10,
 * and `@supports` is available in Safari >= 9,
 * It will only be parsed in Safari 9.
 */
/*
* Mixin Safari 10+
* @deprecated, do NOT use, this hack is also targetting Chrome browsers, please use ms-browser-safari71plus
*/
/* 
* This mixin should cover Safari 7.1+, I haven't tested Safari 11 yet.
* The way to use it is a bit different from our previous mixins since SASS will automatically
* add the nested values if we just it with @content only, so we have to pass in the class name to use.
*/
/* 
* @mixin to detect long iPhones
* This mixin will detect devices with an aspect ratio of 19.5:9 which so far the only one being the iPhone X.
*/
/**
 * Import Open Sans font set, with its corresponding weights and styles.
 */
/**
 * MS Theme type sets
 *
 * - name
 * - font face
 * - mobile font size
 * - mobile line height
 * - desktop font size
 * - desktop line height
 * - mobile and desktop letter spacing
 */
/**
 * Sets font family and weight accordingly.
 *
 * @method family
 *
 * @param  {String} [$family]  Optional family value. Valid options are:
 *                             `regular`, `semibold` and `light`.
 *                             Defaults to `regular` if no param passed.
 */
/**
 * Handy Family Mixins
 * Don't use these for MS Theme
 */
/**
 * MS Theme fonts
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 *
 * @deprecated Use ms-font-size instead
 */
/**
 * Sets font size and line height.
 *
 * @param {unit} $size  Font size.
 * @param {unit} [$line-height=normal] Line height, defaults to "normal";
 * @param {unit} [$size-lg=$size]  Font size for large screens only.
 * @param {unit} [$line-height-lg=normal] Line height for large screens only;
 */
/**
 * Sets font family, size, and line height, based on main `$typography` map.
 *
 * @method typeset
 *
 * @param  {String}      $name           Key for the `$typography` map.
 * @param  {String|Unit} [$line-height]  Optional parameter, to override the initial `line-height` value for the passed typography definition.
 */
/**
 * Sets font family, size, and line height, based on main `$ms-typography` map.
 *
 * @param  {String}      $name           Key for the `$ms-typography` map.
 *
 * example: @include ms-typeset(type-body);
 */
.ms-vertical-options__option {
  font-family: "MS Gloriola II Display Thin";
  font-weight: 300;
  font-size: 45px;
  line-height: 50px;
  color: #b7b7b7;
  margin: 2.5vh 0;
  cursor: pointer;
  text-align: center; }
  @media (min-width: 768px) {
    .ms-vertical-options__option {
      font-size: 72px;
      line-height: 74px; } }
  .ms-vertical-options__option.ms-vertical-options__option_selected {
    color: #0f8ec7; }
  .ms-vertical-options__option.ms-vertical-options__option_disabled {
    color: #e9e9e9;
    cursor: not-allowed; }

/**
 * Atoms - more specific
 */
/**
 * Global margin, padding, and border-radius
 * .m*   = margins
 * .p*   = padding
 * .f*   = font-size
 * .br*  = border-radius
 * .w*   = width
 * .mw*  = min-width
 * .mxw* = max-width
 * .ls*  = letter-spacing
 */
.m0 {
  margin: 0px !important; }

.p0 {
  padding: 0px !important; }

.m1 {
  margin: 1px !important; }

.p1 {
  padding: 1px !important; }

.m2 {
  margin: 2px !important; }

.p2 {
  padding: 2px !important; }

.m3 {
  margin: 3px !important; }

.p3 {
  padding: 3px !important; }

.m4 {
  margin: 4px !important; }

.p4 {
  padding: 4px !important; }

.m5 {
  margin: 5px !important; }

.p5 {
  padding: 5px !important; }

.m6 {
  margin: 6px !important; }

.p6 {
  padding: 6px !important; }

.m7 {
  margin: 7px !important; }

.p7 {
  padding: 7px !important; }

.m8 {
  margin: 8px !important; }

.p8 {
  padding: 8px !important; }

.m9 {
  margin: 9px !important; }

.p9 {
  padding: 9px !important; }

.m10 {
  margin: 10px !important; }

.p10 {
  padding: 10px !important; }

.m12 {
  margin: 12px !important; }

.p12 {
  padding: 12px !important; }

.m14 {
  margin: 14px !important; }

.p14 {
  padding: 14px !important; }

.m15 {
  margin: 15px !important; }

.p15 {
  padding: 15px !important; }

.m16 {
  margin: 16px !important; }

.p16 {
  padding: 16px !important; }

.m20 {
  margin: 20px !important; }

.p20 {
  padding: 20px !important; }

.m24 {
  margin: 24px !important; }

.p24 {
  padding: 24px !important; }

.m30 {
  margin: 30px !important; }

.p30 {
  padding: 30px !important; }

.m36 {
  margin: 36px !important; }

.p36 {
  padding: 36px !important; }

.m42 {
  margin: 42px !important; }

.p42 {
  padding: 42px !important; }

.m48 {
  margin: 48px !important; }

.p48 {
  padding: 48px !important; }

.m50 {
  margin: 50px !important; }

.p50 {
  padding: 50px !important; }

.m-global {
  margin: 10px !important; }
  @media (min-width: 768px) {
    .m-global {
      margin: 20px !important; } }

.p-global {
  padding: 10px !important; }
  @media (min-width: 768px) {
    .p-global {
      padding: 20px !important; } }

.mtb0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important; }

.mlr0 {
  margin-left: 0px !important;
  margin-right: 0px !important; }

.mt0 {
  margin-top: 0px !important; }

.mr0 {
  margin-right: 0px !important; }

.mb0 {
  margin-bottom: 0px !important; }

.ml0 {
  margin-left: 0px !important; }

.ptb0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

.plr0 {
  padding-left: 0px !important;
  padding-right: 0px !important; }

.pt0 {
  padding-top: 0px !important; }

.pr0 {
  padding-right: 0px !important; }

.pb0 {
  padding-bottom: 0px !important; }

.pl0 {
  padding-left: 0px !important; }

.mtb1 {
  margin-top: 1px !important;
  margin-bottom: 1px !important; }

.mlr1 {
  margin-left: 1px !important;
  margin-right: 1px !important; }

.mt1 {
  margin-top: 1px !important; }

.mr1 {
  margin-right: 1px !important; }

.mb1 {
  margin-bottom: 1px !important; }

.ml1 {
  margin-left: 1px !important; }

.ptb1 {
  padding-top: 1px !important;
  padding-bottom: 1px !important; }

.plr1 {
  padding-left: 1px !important;
  padding-right: 1px !important; }

.pt1 {
  padding-top: 1px !important; }

.pr1 {
  padding-right: 1px !important; }

.pb1 {
  padding-bottom: 1px !important; }

.pl1 {
  padding-left: 1px !important; }

.mtb2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important; }

.mlr2 {
  margin-left: 2px !important;
  margin-right: 2px !important; }

.mt2 {
  margin-top: 2px !important; }

.mr2 {
  margin-right: 2px !important; }

.mb2 {
  margin-bottom: 2px !important; }

.ml2 {
  margin-left: 2px !important; }

.ptb2 {
  padding-top: 2px !important;
  padding-bottom: 2px !important; }

.plr2 {
  padding-left: 2px !important;
  padding-right: 2px !important; }

.pt2 {
  padding-top: 2px !important; }

.pr2 {
  padding-right: 2px !important; }

.pb2 {
  padding-bottom: 2px !important; }

.pl2 {
  padding-left: 2px !important; }

.mtb3 {
  margin-top: 3px !important;
  margin-bottom: 3px !important; }

.mlr3 {
  margin-left: 3px !important;
  margin-right: 3px !important; }

.mt3 {
  margin-top: 3px !important; }

.mr3 {
  margin-right: 3px !important; }

.mb3 {
  margin-bottom: 3px !important; }

.ml3 {
  margin-left: 3px !important; }

.ptb3 {
  padding-top: 3px !important;
  padding-bottom: 3px !important; }

.plr3 {
  padding-left: 3px !important;
  padding-right: 3px !important; }

.pt3 {
  padding-top: 3px !important; }

.pr3 {
  padding-right: 3px !important; }

.pb3 {
  padding-bottom: 3px !important; }

.pl3 {
  padding-left: 3px !important; }

.mtb4 {
  margin-top: 4px !important;
  margin-bottom: 4px !important; }

.mlr4 {
  margin-left: 4px !important;
  margin-right: 4px !important; }

.mt4 {
  margin-top: 4px !important; }

.mr4 {
  margin-right: 4px !important; }

.mb4 {
  margin-bottom: 4px !important; }

.ml4 {
  margin-left: 4px !important; }

.ptb4 {
  padding-top: 4px !important;
  padding-bottom: 4px !important; }

.plr4 {
  padding-left: 4px !important;
  padding-right: 4px !important; }

.pt4 {
  padding-top: 4px !important; }

.pr4 {
  padding-right: 4px !important; }

.pb4 {
  padding-bottom: 4px !important; }

.pl4 {
  padding-left: 4px !important; }

.mtb5 {
  margin-top: 5px !important;
  margin-bottom: 5px !important; }

.mlr5 {
  margin-left: 5px !important;
  margin-right: 5px !important; }

.mt5 {
  margin-top: 5px !important; }

.mr5 {
  margin-right: 5px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.ml5 {
  margin-left: 5px !important; }

.ptb5 {
  padding-top: 5px !important;
  padding-bottom: 5px !important; }

.plr5 {
  padding-left: 5px !important;
  padding-right: 5px !important; }

.pt5 {
  padding-top: 5px !important; }

.pr5 {
  padding-right: 5px !important; }

.pb5 {
  padding-bottom: 5px !important; }

.pl5 {
  padding-left: 5px !important; }

.mtb6 {
  margin-top: 6px !important;
  margin-bottom: 6px !important; }

.mlr6 {
  margin-left: 6px !important;
  margin-right: 6px !important; }

.mt6 {
  margin-top: 6px !important; }

.mr6 {
  margin-right: 6px !important; }

.mb6 {
  margin-bottom: 6px !important; }

.ml6 {
  margin-left: 6px !important; }

.ptb6 {
  padding-top: 6px !important;
  padding-bottom: 6px !important; }

.plr6 {
  padding-left: 6px !important;
  padding-right: 6px !important; }

.pt6 {
  padding-top: 6px !important; }

.pr6 {
  padding-right: 6px !important; }

.pb6 {
  padding-bottom: 6px !important; }

.pl6 {
  padding-left: 6px !important; }

.mtb7 {
  margin-top: 7px !important;
  margin-bottom: 7px !important; }

.mlr7 {
  margin-left: 7px !important;
  margin-right: 7px !important; }

.mt7 {
  margin-top: 7px !important; }

.mr7 {
  margin-right: 7px !important; }

.mb7 {
  margin-bottom: 7px !important; }

.ml7 {
  margin-left: 7px !important; }

.ptb7 {
  padding-top: 7px !important;
  padding-bottom: 7px !important; }

.plr7 {
  padding-left: 7px !important;
  padding-right: 7px !important; }

.pt7 {
  padding-top: 7px !important; }

.pr7 {
  padding-right: 7px !important; }

.pb7 {
  padding-bottom: 7px !important; }

.pl7 {
  padding-left: 7px !important; }

.mtb8 {
  margin-top: 8px !important;
  margin-bottom: 8px !important; }

.mlr8 {
  margin-left: 8px !important;
  margin-right: 8px !important; }

.mt8 {
  margin-top: 8px !important; }

.mr8 {
  margin-right: 8px !important; }

.mb8 {
  margin-bottom: 8px !important; }

.ml8 {
  margin-left: 8px !important; }

.ptb8 {
  padding-top: 8px !important;
  padding-bottom: 8px !important; }

.plr8 {
  padding-left: 8px !important;
  padding-right: 8px !important; }

.pt8 {
  padding-top: 8px !important; }

.pr8 {
  padding-right: 8px !important; }

.pb8 {
  padding-bottom: 8px !important; }

.pl8 {
  padding-left: 8px !important; }

.mtb9 {
  margin-top: 9px !important;
  margin-bottom: 9px !important; }

.mlr9 {
  margin-left: 9px !important;
  margin-right: 9px !important; }

.mt9 {
  margin-top: 9px !important; }

.mr9 {
  margin-right: 9px !important; }

.mb9 {
  margin-bottom: 9px !important; }

.ml9 {
  margin-left: 9px !important; }

.ptb9 {
  padding-top: 9px !important;
  padding-bottom: 9px !important; }

.plr9 {
  padding-left: 9px !important;
  padding-right: 9px !important; }

.pt9 {
  padding-top: 9px !important; }

.pr9 {
  padding-right: 9px !important; }

.pb9 {
  padding-bottom: 9px !important; }

.pl9 {
  padding-left: 9px !important; }

.mtb10 {
  margin-top: 10px !important;
  margin-bottom: 10px !important; }

.mlr10 {
  margin-left: 10px !important;
  margin-right: 10px !important; }

.mt10 {
  margin-top: 10px !important; }

.mr10 {
  margin-right: 10px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.ml10 {
  margin-left: 10px !important; }

.ptb10 {
  padding-top: 10px !important;
  padding-bottom: 10px !important; }

.plr10 {
  padding-left: 10px !important;
  padding-right: 10px !important; }

.pt10 {
  padding-top: 10px !important; }

.pr10 {
  padding-right: 10px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pl10 {
  padding-left: 10px !important; }

.mtb12 {
  margin-top: 12px !important;
  margin-bottom: 12px !important; }

.mlr12 {
  margin-left: 12px !important;
  margin-right: 12px !important; }

.mt12 {
  margin-top: 12px !important; }

.mr12 {
  margin-right: 12px !important; }

.mb12 {
  margin-bottom: 12px !important; }

.ml12 {
  margin-left: 12px !important; }

.ptb12 {
  padding-top: 12px !important;
  padding-bottom: 12px !important; }

.plr12 {
  padding-left: 12px !important;
  padding-right: 12px !important; }

.pt12 {
  padding-top: 12px !important; }

.pr12 {
  padding-right: 12px !important; }

.pb12 {
  padding-bottom: 12px !important; }

.pl12 {
  padding-left: 12px !important; }

.mtb14 {
  margin-top: 14px !important;
  margin-bottom: 14px !important; }

.mlr14 {
  margin-left: 14px !important;
  margin-right: 14px !important; }

.mt14 {
  margin-top: 14px !important; }

.mr14 {
  margin-right: 14px !important; }

.mb14 {
  margin-bottom: 14px !important; }

.ml14 {
  margin-left: 14px !important; }

.ptb14 {
  padding-top: 14px !important;
  padding-bottom: 14px !important; }

.plr14 {
  padding-left: 14px !important;
  padding-right: 14px !important; }

.pt14 {
  padding-top: 14px !important; }

.pr14 {
  padding-right: 14px !important; }

.pb14 {
  padding-bottom: 14px !important; }

.pl14 {
  padding-left: 14px !important; }

.mtb15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important; }

.mlr15 {
  margin-left: 15px !important;
  margin-right: 15px !important; }

.mt15 {
  margin-top: 15px !important; }

.mr15 {
  margin-right: 15px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.ml15 {
  margin-left: 15px !important; }

.ptb15 {
  padding-top: 15px !important;
  padding-bottom: 15px !important; }

.plr15 {
  padding-left: 15px !important;
  padding-right: 15px !important; }

.pt15 {
  padding-top: 15px !important; }

.pr15 {
  padding-right: 15px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.pl15 {
  padding-left: 15px !important; }

.mtb16 {
  margin-top: 16px !important;
  margin-bottom: 16px !important; }

.mlr16 {
  margin-left: 16px !important;
  margin-right: 16px !important; }

.mt16 {
  margin-top: 16px !important; }

.mr16 {
  margin-right: 16px !important; }

.mb16 {
  margin-bottom: 16px !important; }

.ml16 {
  margin-left: 16px !important; }

.ptb16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important; }

.plr16 {
  padding-left: 16px !important;
  padding-right: 16px !important; }

.pt16 {
  padding-top: 16px !important; }

.pr16 {
  padding-right: 16px !important; }

.pb16 {
  padding-bottom: 16px !important; }

.pl16 {
  padding-left: 16px !important; }

.mtb20 {
  margin-top: 20px !important;
  margin-bottom: 20px !important; }

.mlr20 {
  margin-left: 20px !important;
  margin-right: 20px !important; }

.mt20 {
  margin-top: 20px !important; }

.mr20 {
  margin-right: 20px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.ml20 {
  margin-left: 20px !important; }

.ptb20 {
  padding-top: 20px !important;
  padding-bottom: 20px !important; }

.plr20 {
  padding-left: 20px !important;
  padding-right: 20px !important; }

.pt20 {
  padding-top: 20px !important; }

.pr20 {
  padding-right: 20px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.pl20 {
  padding-left: 20px !important; }

.mtb24 {
  margin-top: 24px !important;
  margin-bottom: 24px !important; }

.mlr24 {
  margin-left: 24px !important;
  margin-right: 24px !important; }

.mt24 {
  margin-top: 24px !important; }

.mr24 {
  margin-right: 24px !important; }

.mb24 {
  margin-bottom: 24px !important; }

.ml24 {
  margin-left: 24px !important; }

.ptb24 {
  padding-top: 24px !important;
  padding-bottom: 24px !important; }

.plr24 {
  padding-left: 24px !important;
  padding-right: 24px !important; }

.pt24 {
  padding-top: 24px !important; }

.pr24 {
  padding-right: 24px !important; }

.pb24 {
  padding-bottom: 24px !important; }

.pl24 {
  padding-left: 24px !important; }

.mtb30 {
  margin-top: 30px !important;
  margin-bottom: 30px !important; }

.mlr30 {
  margin-left: 30px !important;
  margin-right: 30px !important; }

.mt30 {
  margin-top: 30px !important; }

.mr30 {
  margin-right: 30px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.ml30 {
  margin-left: 30px !important; }

.ptb30 {
  padding-top: 30px !important;
  padding-bottom: 30px !important; }

.plr30 {
  padding-left: 30px !important;
  padding-right: 30px !important; }

.pt30 {
  padding-top: 30px !important; }

.pr30 {
  padding-right: 30px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.pl30 {
  padding-left: 30px !important; }

.mtb36 {
  margin-top: 36px !important;
  margin-bottom: 36px !important; }

.mlr36 {
  margin-left: 36px !important;
  margin-right: 36px !important; }

.mt36 {
  margin-top: 36px !important; }

.mr36 {
  margin-right: 36px !important; }

.mb36 {
  margin-bottom: 36px !important; }

.ml36 {
  margin-left: 36px !important; }

.ptb36 {
  padding-top: 36px !important;
  padding-bottom: 36px !important; }

.plr36 {
  padding-left: 36px !important;
  padding-right: 36px !important; }

.pt36 {
  padding-top: 36px !important; }

.pr36 {
  padding-right: 36px !important; }

.pb36 {
  padding-bottom: 36px !important; }

.pl36 {
  padding-left: 36px !important; }

.mtb42 {
  margin-top: 42px !important;
  margin-bottom: 42px !important; }

.mlr42 {
  margin-left: 42px !important;
  margin-right: 42px !important; }

.mt42 {
  margin-top: 42px !important; }

.mr42 {
  margin-right: 42px !important; }

.mb42 {
  margin-bottom: 42px !important; }

.ml42 {
  margin-left: 42px !important; }

.ptb42 {
  padding-top: 42px !important;
  padding-bottom: 42px !important; }

.plr42 {
  padding-left: 42px !important;
  padding-right: 42px !important; }

.pt42 {
  padding-top: 42px !important; }

.pr42 {
  padding-right: 42px !important; }

.pb42 {
  padding-bottom: 42px !important; }

.pl42 {
  padding-left: 42px !important; }

.mtb48 {
  margin-top: 48px !important;
  margin-bottom: 48px !important; }

.mlr48 {
  margin-left: 48px !important;
  margin-right: 48px !important; }

.mt48 {
  margin-top: 48px !important; }

.mr48 {
  margin-right: 48px !important; }

.mb48 {
  margin-bottom: 48px !important; }

.ml48 {
  margin-left: 48px !important; }

.ptb48 {
  padding-top: 48px !important;
  padding-bottom: 48px !important; }

.plr48 {
  padding-left: 48px !important;
  padding-right: 48px !important; }

.pt48 {
  padding-top: 48px !important; }

.pr48 {
  padding-right: 48px !important; }

.pb48 {
  padding-bottom: 48px !important; }

.pl48 {
  padding-left: 48px !important; }

.mtb-global {
  margin-top: 10px !important;
  margin-bottom: 10px !important; }
  @media (min-width: 768px) {
    .mtb-global {
      margin-top: 20px !important;
      margin-bottom: 20px !important; } }

.mlr-global {
  margin-left: 10px !important;
  margin-right: 10px !important; }
  @media (min-width: 768px) {
    .mlr-global {
      margin-left: 20px !important;
      margin-right: 20px !important; } }

.mt-global {
  margin-top: 10px !important; }
  @media (min-width: 768px) {
    .mt-global {
      margin-top: 20px !important; } }

.mr-global {
  margin-right: 10px !important; }
  @media (min-width: 768px) {
    .mr-global {
      margin-right: 20px !important; } }

.mb-global {
  margin-bottom: 10px !important; }
  @media (min-width: 768px) {
    .mb-global {
      margin-bottom: 20px !important; } }

.ml-global {
  margin-left: 10px !important; }
  @media (min-width: 768px) {
    .ml-global {
      margin-left: 20px !important; } }

.ptb-global {
  padding-top: 10px !important;
  padding-bottom: 10px !important; }
  @media (min-width: 768px) {
    .ptb-global {
      padding-top: 20px !important;
      padding-bottom: 20px !important; } }

.plr-global {
  padding-left: 10px !important;
  padding-right: 10px !important; }
  @media (min-width: 768px) {
    .plr-global {
      padding-left: 20px !important;
      padding-right: 20px !important; } }

.pt-global {
  padding-top: 10px !important; }
  @media (min-width: 768px) {
    .pt-global {
      padding-top: 20px !important; } }

.pr-global {
  padding-right: 10px !important; }
  @media (min-width: 768px) {
    .pr-global {
      padding-right: 20px !important; } }

.pb-global {
  padding-bottom: 10px !important; }
  @media (min-width: 768px) {
    .pb-global {
      padding-bottom: 20px !important; } }

.pl-global {
  padding-left: 10px !important; }
  @media (min-width: 768px) {
    .pl-global {
      padding-left: 20px !important; } }

.w100 {
  width: 100% !important; }

.mw100 {
  min-width: 100% !important; }

.mxw100 {
  max-width: 100% !important; }

.w95 {
  width: 95% !important; }

.mw95 {
  min-width: 95% !important; }

.mxw95 {
  max-width: 95% !important; }

.w90 {
  width: 90% !important; }

.mw90 {
  min-width: 90% !important; }

.mxw90 {
  max-width: 90% !important; }

.w85 {
  width: 85% !important; }

.mw85 {
  min-width: 85% !important; }

.mxw85 {
  max-width: 85% !important; }

.w80 {
  width: 80% !important; }

.mw80 {
  min-width: 80% !important; }

.mxw80 {
  max-width: 80% !important; }

.w75 {
  width: 75% !important; }

.mw75 {
  min-width: 75% !important; }

.mxw75 {
  max-width: 75% !important; }

.w70 {
  width: 70% !important; }

.mw70 {
  min-width: 70% !important; }

.mxw70 {
  max-width: 70% !important; }

.w65 {
  width: 65% !important; }

.mw65 {
  min-width: 65% !important; }

.mxw65 {
  max-width: 65% !important; }

.w60 {
  width: 60% !important; }

.mw60 {
  min-width: 60% !important; }

.mxw60 {
  max-width: 60% !important; }

.w55 {
  width: 55% !important; }

.mw55 {
  min-width: 55% !important; }

.mxw55 {
  max-width: 55% !important; }

.w50 {
  width: 50% !important; }

.mw50 {
  min-width: 50% !important; }

.mxw50 {
  max-width: 50% !important; }

.w45 {
  width: 45% !important; }

.mw45 {
  min-width: 45% !important; }

.mxw45 {
  max-width: 45% !important; }

.w40 {
  width: 40% !important; }

.mw40 {
  min-width: 40% !important; }

.mxw40 {
  max-width: 40% !important; }

.w35 {
  width: 35% !important; }

.mw35 {
  min-width: 35% !important; }

.mxw35 {
  max-width: 35% !important; }

.w30 {
  width: 30% !important; }

.mw30 {
  min-width: 30% !important; }

.mxw30 {
  max-width: 30% !important; }

.w25 {
  width: 25% !important; }

.mw25 {
  min-width: 25% !important; }

.mxw25 {
  max-width: 25% !important; }

.w20 {
  width: 20% !important; }

.mw20 {
  min-width: 20% !important; }

.mxw20 {
  max-width: 20% !important; }

.w15 {
  width: 15% !important; }

.mw15 {
  min-width: 15% !important; }

.mxw15 {
  max-width: 15% !important; }

.w10 {
  width: 10% !important; }

.mw10 {
  min-width: 10% !important; }

.mxw10 {
  max-width: 10% !important; }

.w5 {
  width: 5% !important; }

.mw5 {
  min-width: 5% !important; }

.mxw5 {
  max-width: 5% !important; }

.w-third {
  width: 33.33333%; }

.mw-third {
  min-width: 33.33333%; }

.mxw-third {
  max-width: 33.33333%; }

.br0 {
  border-radius: 0px; }

.br1 {
  border-radius: 1px; }

.br2 {
  border-radius: 2px; }

.br3 {
  border-radius: 3px; }

.br5 {
  border-radius: 5px; }

.br6 {
  border-radius: 6px; }

.f10 {
  font-size: 10px; }

.lh10 {
  line-height: 10px; }

.f11 {
  font-size: 11px; }

.lh11 {
  line-height: 11px; }

.f12 {
  font-size: 12px; }

.lh12 {
  line-height: 12px; }

.f13 {
  font-size: 13px; }

.lh13 {
  line-height: 13px; }

.f14 {
  font-size: 14px; }

.lh14 {
  line-height: 14px; }

.f15 {
  font-size: 15px; }

.lh15 {
  line-height: 15px; }

.f16 {
  font-size: 16px; }

.lh16 {
  line-height: 16px; }

.f18 {
  font-size: 18px; }

.lh18 {
  line-height: 18px; }

.f20 {
  font-size: 20px; }

.lh20 {
  line-height: 20px; }

.f24 {
  font-size: 24px; }

.lh24 {
  line-height: 24px; }

.f28 {
  font-size: 28px; }

.lh28 {
  line-height: 28px; }

.f30 {
  font-size: 30px; }

.lh30 {
  line-height: 30px; }

.f32 {
  font-size: 32px; }

.lh32 {
  line-height: 32px; }

.f36 {
  font-size: 36px; }

.lh36 {
  line-height: 36px; }

.ls1 {
  letter-spacing: -0.1px; }

.ls2 {
  letter-spacing: -0.2px; }

.ls3 {
  letter-spacing: -0.3px; }

.ls4 {
  letter-spacing: -0.4px; }

.ls5 {
  letter-spacing: -0.5px; }

.ls6 {
  letter-spacing: -0.6px; }

.ls7 {
  letter-spacing: -0.7px; }

.ls8 {
  letter-spacing: -0.8px; }

.ls9 {
  letter-spacing: -0.9px; }

.ls10 {
  letter-spacing: -1px; }

.ms-block {
  display: block !important; }

.ms-inline {
  display: inline !important; }

.ms-inline-block {
  display: inline-block !important; }

.ms-hidden {
  display: none !important; }

.ms-invisible {
  visibility: hidden !important; }

.ms-clear::before, .ms-clear::after {
  content: " ";
  display: table; }

.ms-clear::after {
  clear: both; }

.ms-disabled {
  color: #b7b7b7; }

.ms-text-left {
  text-align: left !important; }

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

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

@media (max-width: 767px) {
  .ms-text-left-small {
    text-align: left !important; }
  .ms-text-center-small {
    text-align: center !important; } }

@media (min-width: 768px) {
  .ms-text-left-large {
    text-align: left !important; }
  .ms-text-center-large {
    text-align: center !important; } }

.ellipsis,
.ms-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.uppercase,
.ms-uppercase {
  text-transform: uppercase !important; }

.ms-nowrap {
  white-space: nowrap !important; }

.ms-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; }

/**
 * Floats
 * Note: favor the use of `flex` vs floats.
 */
.ms-float-left {
  float: left !important; }

.ms-float-right {
  float: right !important; }

/**
 * Cursor appearance
 */
.ms-pointer {
  cursor: pointer; }
  .ms-pointer.disabled, .ms-pointer[disabled] {
    cursor: default; }

.ms-cursor-move {
  cursor: move; }

.ms-relative {
  position: relative !important; }

.ms-centerer {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%; }

.ms-list-circle {
  list-style-type: circle !important; }
  .ms-list-circle li {
    list-style: circle !important; }

.ms-list-disc {
  list-style-type: disc !important; }
  .ms-list-disc li {
    list-style: disc !important; }

.ms-list-square {
  list-style-type: square !important; }
  .ms-list-square li {
    list-style: square !important; }

.ms-list-inherit {
  list-style-type: inherit !important; }
  .ms-list-inherit li {
    list-style: inherit !important; }

.ms-accessibility-hidden {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 1px;
  height: 1px;
  position: absolute; }

.ms-word-break-all {
  word-break: break-all !important; }

.mso-app .ms-msm,
.mso-app .ms-hidden-mso,
.mso-app .ms-small-msm,
.mso-app .ms-large-msm {
  display: none !important; }

@media (max-width: 767px) {
  .mso-app .ms-large-mso,
  .mso-app .ms-large {
    display: none !important; } }

@media (min-width: 768px) {
  .mso-app .ms-small-mso,
  .mso-app .ms-small {
    display: none !important; } }

.msm-app .ms-mso,
.msm-app .ms-hidden-msm,
.msm-app .ms-small-mso,
.msm-app .ms-large-mso {
  display: none !important; }

@media (max-width: 767px) {
  .msm-app .ms-large-msm,
  .msm-app .ms-hidden-small-msm,
  .msm-app .ms-large {
    display: none !important; } }

@media (min-width: 768px) {
  .msm-app .ms-small-msm,
  .msm-app .ms-hidden-large-msm,
  .msm-app .ms-small {
    display: none !important; } }

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

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

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

.ms-flex-i {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-flex-i {
      -ms-flex: 1 1 0%; } }

.ms-flex-ii {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-flex-ii {
      -ms-flex: 2 1 0%; } }

.ms-flex-iii {
  -webkit-box-flex: 3;
      -ms-flex: 3;
          flex: 3;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-flex-iii {
      -ms-flex: 3 1 0%; } }

.ms-flex-none {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-flex-none {
      -ms-flex: 0 0 auto; } }

.ms-flex-col-i {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-flex-col-i {
      -ms-flex: 1 1 0%; } }
  @media (min-width: 768px) {
    .ms-flex-col-i {
      min-height: 0; } }

.ms-flex-row-i {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0; }
  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ms-flex-row-i {
      -ms-flex: 1 1 0%; } }
  @media (min-width: 768px) {
    .ms-flex-row-i {
      min-height: 0; } }

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

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

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

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

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

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

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

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

.ms-flex-shrink {
  -ms-flex-negative: 1;
      flex-shrink: 1; }

.ms-flex-no-shrink {
  -ms-flex-negative: 0 !important;
      flex-shrink: 0 !important; }

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

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

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

.ms-flex-ie-no-shrink {
  -ms-flex: 1 0 auto; }