/* Include this file in your html if you are using the CSP mode. */

@charset "UTF-8";

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide:not(.ng-hide-animate) {
  display: none !important;
}

ng\:form {
  display: block;
}

.ng-animate-shim {
  visibility:hidden;
}

.ng-anchor {
  position:absolute;
}

/* ************************************** */
/* Mandatory CSS required for ng-sortable */
/* ************************************** */

.as-sortable-item, .as-sortable-placeholder {
    display: block;
}

.as-sortable-item {
    -ms-touch-action: none;
    touch-action: none;
    /* to disable context menu on iOS devices */
    -webkit-touch-callout: none;
}

.as-sortable-item-handle {
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

.as-sortable-placeholder {
}

.as-sortable-drag {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.as-sortable-hidden {
    display: none !important;
}

.as-sortable-un-selectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@charset "UTF-8";
/**
 * Foundation for Sites by ZURB
 * Version 6.2.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.row.debug .column:before, .row.debug .columns:before, .styleguide__color-box--x-light-gray:before, .sg.sg-section[id^='section-1.2']:before {
  content: '';
  position: absolute; }

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
   * 1. Set default font family to sans-serif.
   * 2. Prevent iOS and IE text size adjust after device orientation change,
   *    without disabling user zoom.
   */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
   * Remove default margin.
   */
body {
  margin: 0; }

/* HTML5 display definitions
     ========================================================================== */
/**
   * Correct `block` display not defined for any HTML5 element in IE 8/9.
   * Correct `block` display not defined for `details` or `summary` in IE 10/11
   * and Firefox.
   * Correct `block` display not defined for `main` in IE 11.
   */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
   * 1. Correct `inline-block` display not defined in IE 8/9.
   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
   */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
   * Prevent modern browsers from displaying `audio` without controls.
   * Remove excess height in iOS 5 devices.
   */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
   * Address `[hidden]` styling not present in IE 8/9/10.
   * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
   */
[hidden],
template {
  display: none; }

/* Links
     ========================================================================== */
/**
   * Remove the gray background color from active links in IE 10.
   */
a, .link {
  background-color: transparent; }

/**
   * Improve readability of focused elements when they are also in an
   * active/hover state.
   */
a:active, .link:active,
a:hover,
.link:hover {
  outline: 0; }

/* Text-level semantics
     ========================================================================== */
/**
   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
   */
abbr[title] {
  border-bottom: 1px dotted; }

/**
   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
   */
b,
strong {
  font-weight: bold; }

/**
   * Address styling not present in Safari and Chrome.
   */
dfn {
  font-style: italic; }

/**
   * Address variable `h1` font-size and margin within `section` and `article`
   * contexts in Firefox 4+, Safari, and Chrome.
   */
h1, .heading-style--h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
   * Address styling not present in IE 8/9.
   */
mark {
  background: #ff0;
  color: #000; }

/**
   * Address inconsistent and variable font size in all browsers.
   */
small {
  font-size: 80%; }

/**
   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
     ========================================================================== */
/**
   * Remove border when inside `a` element in IE 8/9/10.
   */
img {
  border: 0; }

/**
   * Correct overflow not hidden in IE 9/10/11.
   */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
     ========================================================================== */
/**
   * Address margin not present in IE 8/9 and Safari.
   */
figure {
  margin: 1em 40px; }

/**
   * Address differences between Firefox and other browsers.
   */
hr {
  box-sizing: content-box;
  height: 0; }

/**
   * Contain overflow in all browsers.
   */
pre {
  overflow: auto; }

/**
   * Address odd `em`-unit font size rendering in all browsers.
   */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
     ========================================================================== */
/**
   * Known limitation: by default, Chrome and Safari on OS X allow very limited
   * styling of `select`, unless a `border` property is set.
   */
/**
   * 1. Correct color not being inherited.
   *    Known issue: affects color of disabled elements.
   * 2. Correct font properties not being inherited.
   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
   */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
   * Address `overflow` set to `hidden` in IE 8/9/10/11.
   */
button {
  overflow: visible; }

/**
   * Address inconsistent `text-transform` inheritance for `button` and `select`.
   * All other form control elements do not inherit `text-transform` values.
   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
   * Correct `select` style inheritance in Firefox.
   */
button,
select {
  text-transform: none; }

/**
   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
   *    and `video` controls.
   * 2. Correct inability to style clickable `input` types in iOS.
   * 3. Improve usability and consistency of cursor style between image-type
   *    `input` and others.
   */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
   * Re-set default cursor for disabled elements.
   */
button[disabled],
html input[disabled] {
  cursor: not-allowed; }

/**
   * Remove inner padding and border in Firefox 4+.
   */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
   * the UA stylesheet.
   */
input {
  line-height: normal; }

/**
   * It's recommended that you don't attempt to style these elements.
   * Firefox's implementation doesn't respect box-sizing, padding, or width.
   *
   * 1. Address box sizing set to `content-box` in IE 8/9/10.
   * 2. Remove excess padding in IE 8/9/10.
   */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
   * `font-size` values of the `input`, it causes the cursor style of the
   * decrement button to change from `default` to `text`.
   */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
   */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
   * Safari (but not Chrome) clips the cancel button when the search input has
   * padding (and `textfield` appearance).
   */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
   * Define consistent border, margin, and padding.
   * [NOTE] We don't enable this ruleset in Foundation, because we want the <fieldset> element to have plain styling.
   */
/* fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  } */
/**
   * 1. Correct `color` not being inherited in IE 8/9/10/11.
   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
   */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
   * Remove default vertical scrollbar in IE 8/9/10/11.
   */
textarea {
  overflow: auto; }

/**
   * Don't inherit the `font-weight` (applied by a rule above).
   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
   */
optgroup {
  font-weight: bold; }

/* Tables
     ========================================================================== */
/**
   * Remove most spacing between table cells.
   */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

.foundation-mq {
  font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; }

html {
  font-size: 16px;
  box-sizing: border-box; }

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

body {
  padding: 0;
  margin: 0;
  font-family: "Nordea Sans", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: #000000;
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
  display: inline-block;
  vertical-align: middle; }

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 0; }

select {
  width: 100%;
  border-radius: 0; }

#map_canvas img,
#map_canvas embed,
#map_canvas object,
.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important; }

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: 1; }
  [data-whatinput='mouse'] button {
    outline: 0; }

.is-visible {
  display: block !important; }

.is-hidden {
  display: none !important; }

.row {
  max-width: 105rem;
  margin-left: auto;
  margin-right: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; }
  .row .row {
    max-width: none;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    max-width: none; }
    @media screen and (min-width: 40em) {
      .row .row {
        margin-left: -0.75rem;
        margin-right: -0.75rem; } }
  .row.expanded {
    max-width: none; }
  .row.collapse > .column, .row.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }

.column, .columns {
  -ms-flex: 1 1 0px;
      flex: 1 1 0px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  min-width: 0; }
  @media screen and (min-width: 40em) {
    .column, .columns {
      padding-left: 0.75rem;
      padding-right: 0.75rem; } }

.column.row.row, .row.row.columns {
  float: none;
  display: block; }
  .row .column.row.row, .row .row.row.columns {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0; }

.small-1 {
  -ms-flex: 0 0 8.33333%;
      flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.small-offset-0 {
  margin-left: 0%; }

.small-2 {
  -ms-flex: 0 0 16.66667%;
      flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.small-offset-1 {
  margin-left: 8.33333%; }

.small-3 {
  -ms-flex: 0 0 25%;
      flex: 0 0 25%;
  max-width: 25%; }

.small-offset-2 {
  margin-left: 16.66667%; }

.small-4 {
  -ms-flex: 0 0 33.33333%;
      flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.small-offset-3 {
  margin-left: 25%; }

.small-5 {
  -ms-flex: 0 0 41.66667%;
      flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.small-offset-4 {
  margin-left: 33.33333%; }

.small-6 {
  -ms-flex: 0 0 50%;
      flex: 0 0 50%;
  max-width: 50%; }

.small-offset-5 {
  margin-left: 41.66667%; }

.small-7 {
  -ms-flex: 0 0 58.33333%;
      flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.small-offset-6 {
  margin-left: 50%; }

.small-8 {
  -ms-flex: 0 0 66.66667%;
      flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.small-offset-7 {
  margin-left: 58.33333%; }

.small-9 {
  -ms-flex: 0 0 75%;
      flex: 0 0 75%;
  max-width: 75%; }

.small-offset-8 {
  margin-left: 66.66667%; }

.small-10 {
  -ms-flex: 0 0 83.33333%;
      flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.small-offset-9 {
  margin-left: 75%; }

.small-11 {
  -ms-flex: 0 0 91.66667%;
      flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.small-offset-10 {
  margin-left: 83.33333%; }

.small-12 {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%;
  max-width: 100%; }

.small-offset-11 {
  margin-left: 91.66667%; }

.small-order-1 {
  -ms-flex-order: 1;
      order: 1; }

.small-order-2 {
  -ms-flex-order: 2;
      order: 2; }

.small-order-3 {
  -ms-flex-order: 3;
      order: 3; }

.small-order-4 {
  -ms-flex-order: 4;
      order: 4; }

.small-order-5 {
  -ms-flex-order: 5;
      order: 5; }

.small-order-6 {
  -ms-flex-order: 6;
      order: 6; }

.small-up-1 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-1 > .column, .small-up-1 > .columns {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }

.small-up-2 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-2 > .column, .small-up-2 > .columns {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }

.small-up-3 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-3 > .column, .small-up-3 > .columns {
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }

.small-up-4 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-4 > .column, .small-up-4 > .columns {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }

.small-up-5 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-5 > .column, .small-up-5 > .columns {
    -ms-flex: 0 0 20%;
        flex: 0 0 20%;
    max-width: 20%; }

.small-up-6 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-6 > .column, .small-up-6 > .columns {
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }

.small-up-7 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-7 > .column, .small-up-7 > .columns {
    -ms-flex: 0 0 14.28571%;
        flex: 0 0 14.28571%;
    max-width: 14.28571%; }

.small-up-8 {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  .small-up-8 > .column, .small-up-8 > .columns {
    -ms-flex: 0 0 12.5%;
        flex: 0 0 12.5%;
    max-width: 12.5%; }

.small-collapse > .column, .small-collapse > .columns {
  padding-left: 0;
  padding-right: 0; }

.small-uncollapse > .column, .small-uncollapse > .columns {
  padding-left: 0.75rem;
  padding-right: 0.75rem; }

@media screen and (min-width: 40em) {
  .medium-1 {
    -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .medium-offset-0 {
    margin-left: 0%; }
  .medium-2 {
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .medium-offset-1 {
    margin-left: 8.33333%; }
  .medium-3 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }
  .medium-offset-2 {
    margin-left: 16.66667%; }
  .medium-4 {
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .medium-offset-3 {
    margin-left: 25%; }
  .medium-5 {
    -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .medium-offset-4 {
    margin-left: 33.33333%; }
  .medium-6 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }
  .medium-offset-5 {
    margin-left: 41.66667%; }
  .medium-7 {
    -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .medium-offset-6 {
    margin-left: 50%; }
  .medium-8 {
    -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .medium-offset-7 {
    margin-left: 58.33333%; }
  .medium-9 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%; }
  .medium-offset-8 {
    margin-left: 66.66667%; }
  .medium-10 {
    -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .medium-offset-9 {
    margin-left: 75%; }
  .medium-11 {
    -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .medium-offset-10 {
    margin-left: 83.33333%; }
  .medium-12 {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .medium-offset-11 {
    margin-left: 91.66667%; }
  .medium-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .medium-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .medium-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .medium-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .medium-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .medium-order-6 {
    -ms-flex-order: 6;
        order: 6; }
  .medium-up-1 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-1 > .column, .medium-up-1 > .columns {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
  .medium-up-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-2 > .column, .medium-up-2 > .columns {
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
      max-width: 50%; }
  .medium-up-3 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-3 > .column, .medium-up-3 > .columns {
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%; }
  .medium-up-4 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-4 > .column, .medium-up-4 > .columns {
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
      max-width: 25%; }
  .medium-up-5 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-5 > .column, .medium-up-5 > .columns {
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
      max-width: 20%; }
  .medium-up-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-6 > .column, .medium-up-6 > .columns {
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
      max-width: 16.66667%; }
  .medium-up-7 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-7 > .column, .medium-up-7 > .columns {
      -ms-flex: 0 0 14.28571%;
          flex: 0 0 14.28571%;
      max-width: 14.28571%; }
  .medium-up-8 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .medium-up-8 > .column, .medium-up-8 > .columns {
      -ms-flex: 0 0 12.5%;
          flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media screen and (min-width: 40em) and (min-width: 40em) {
  .medium-expand {
    -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }

.row.medium-unstack > .column, .row.medium-unstack > .columns {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%; }
  @media screen and (min-width: 40em) {
    .row.medium-unstack > .column, .row.medium-unstack > .columns {
      -ms-flex: 1 1 0px;
          flex: 1 1 0px; } }

@media screen and (min-width: 40em) {
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-left: 0.75rem;
    padding-right: 0.75rem; } }

@media screen and (min-width: 64em) {
  .large-1 {
    -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .large-offset-0 {
    margin-left: 0%; }
  .large-2 {
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .large-offset-1 {
    margin-left: 8.33333%; }
  .large-3 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }
  .large-offset-2 {
    margin-left: 16.66667%; }
  .large-4 {
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .large-offset-3 {
    margin-left: 25%; }
  .large-5 {
    -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .large-offset-4 {
    margin-left: 33.33333%; }
  .large-6 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }
  .large-offset-5 {
    margin-left: 41.66667%; }
  .large-7 {
    -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .large-offset-6 {
    margin-left: 50%; }
  .large-8 {
    -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .large-offset-7 {
    margin-left: 58.33333%; }
  .large-9 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%; }
  .large-offset-8 {
    margin-left: 66.66667%; }
  .large-10 {
    -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .large-offset-9 {
    margin-left: 75%; }
  .large-11 {
    -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .large-offset-10 {
    margin-left: 83.33333%; }
  .large-12 {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .large-offset-11 {
    margin-left: 91.66667%; }
  .large-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .large-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .large-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .large-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .large-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .large-order-6 {
    -ms-flex-order: 6;
        order: 6; }
  .large-up-1 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-1 > .column, .large-up-1 > .columns {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
  .large-up-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-2 > .column, .large-up-2 > .columns {
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
      max-width: 50%; }
  .large-up-3 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-3 > .column, .large-up-3 > .columns {
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%; }
  .large-up-4 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-4 > .column, .large-up-4 > .columns {
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
      max-width: 25%; }
  .large-up-5 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-5 > .column, .large-up-5 > .columns {
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
      max-width: 20%; }
  .large-up-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-6 > .column, .large-up-6 > .columns {
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
      max-width: 16.66667%; }
  .large-up-7 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-7 > .column, .large-up-7 > .columns {
      -ms-flex: 0 0 14.28571%;
          flex: 0 0 14.28571%;
      max-width: 14.28571%; }
  .large-up-8 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .large-up-8 > .column, .large-up-8 > .columns {
      -ms-flex: 0 0 12.5%;
          flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media screen and (min-width: 64em) and (min-width: 64em) {
  .large-expand {
    -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }

.row.large-unstack > .column, .row.large-unstack > .columns {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%; }
  @media screen and (min-width: 64em) {
    .row.large-unstack > .column, .row.large-unstack > .columns {
      -ms-flex: 1 1 0px;
          flex: 1 1 0px; } }

@media screen and (min-width: 64em) {
  .large-collapse > .column, .large-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .large-uncollapse > .column, .large-uncollapse > .columns {
    padding-left: 0.75rem;
    padding-right: 0.75rem; } }

@media screen and (min-width: 75em) {
  .xlarge-1 {
    -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .xlarge-offset-0 {
    margin-left: 0%; }
  .xlarge-2 {
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .xlarge-offset-1 {
    margin-left: 8.33333%; }
  .xlarge-3 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }
  .xlarge-offset-2 {
    margin-left: 16.66667%; }
  .xlarge-4 {
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .xlarge-offset-3 {
    margin-left: 25%; }
  .xlarge-5 {
    -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .xlarge-offset-4 {
    margin-left: 33.33333%; }
  .xlarge-6 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }
  .xlarge-offset-5 {
    margin-left: 41.66667%; }
  .xlarge-7 {
    -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .xlarge-offset-6 {
    margin-left: 50%; }
  .xlarge-8 {
    -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .xlarge-offset-7 {
    margin-left: 58.33333%; }
  .xlarge-9 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%; }
  .xlarge-offset-8 {
    margin-left: 66.66667%; }
  .xlarge-10 {
    -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .xlarge-offset-9 {
    margin-left: 75%; }
  .xlarge-11 {
    -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .xlarge-offset-10 {
    margin-left: 83.33333%; }
  .xlarge-12 {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .xlarge-offset-11 {
    margin-left: 91.66667%; }
  .xlarge-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .xlarge-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .xlarge-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .xlarge-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .xlarge-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .xlarge-order-6 {
    -ms-flex-order: 6;
        order: 6; }
  .xlarge-up-1 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-1 > .column, .xlarge-up-1 > .columns {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
  .xlarge-up-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-2 > .column, .xlarge-up-2 > .columns {
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
      max-width: 50%; }
  .xlarge-up-3 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-3 > .column, .xlarge-up-3 > .columns {
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%; }
  .xlarge-up-4 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-4 > .column, .xlarge-up-4 > .columns {
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
      max-width: 25%; }
  .xlarge-up-5 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-5 > .column, .xlarge-up-5 > .columns {
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
      max-width: 20%; }
  .xlarge-up-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-6 > .column, .xlarge-up-6 > .columns {
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
      max-width: 16.66667%; }
  .xlarge-up-7 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-7 > .column, .xlarge-up-7 > .columns {
      -ms-flex: 0 0 14.28571%;
          flex: 0 0 14.28571%;
      max-width: 14.28571%; }
  .xlarge-up-8 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xlarge-up-8 > .column, .xlarge-up-8 > .columns {
      -ms-flex: 0 0 12.5%;
          flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media screen and (min-width: 75em) and (min-width: 75em) {
  .xlarge-expand {
    -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }

.row.xlarge-unstack > .column, .row.xlarge-unstack > .columns {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%; }
  @media screen and (min-width: 75em) {
    .row.xlarge-unstack > .column, .row.xlarge-unstack > .columns {
      -ms-flex: 1 1 0px;
          flex: 1 1 0px; } }

@media screen and (min-width: 75em) {
  .xlarge-collapse > .column, .xlarge-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .xlarge-uncollapse > .column, .xlarge-uncollapse > .columns {
    padding-left: 0.75rem;
    padding-right: 0.75rem; } }

@media screen and (min-width: 90em) {
  .xxlarge-1 {
    -ms-flex: 0 0 8.33333%;
        flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .xxlarge-offset-0 {
    margin-left: 0%; }
  .xxlarge-2 {
    -ms-flex: 0 0 16.66667%;
        flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .xxlarge-offset-1 {
    margin-left: 8.33333%; }
  .xxlarge-3 {
    -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    max-width: 25%; }
  .xxlarge-offset-2 {
    margin-left: 16.66667%; }
  .xxlarge-4 {
    -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .xxlarge-offset-3 {
    margin-left: 25%; }
  .xxlarge-5 {
    -ms-flex: 0 0 41.66667%;
        flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .xxlarge-offset-4 {
    margin-left: 33.33333%; }
  .xxlarge-6 {
    -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    max-width: 50%; }
  .xxlarge-offset-5 {
    margin-left: 41.66667%; }
  .xxlarge-7 {
    -ms-flex: 0 0 58.33333%;
        flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .xxlarge-offset-6 {
    margin-left: 50%; }
  .xxlarge-8 {
    -ms-flex: 0 0 66.66667%;
        flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .xxlarge-offset-7 {
    margin-left: 58.33333%; }
  .xxlarge-9 {
    -ms-flex: 0 0 75%;
        flex: 0 0 75%;
    max-width: 75%; }
  .xxlarge-offset-8 {
    margin-left: 66.66667%; }
  .xxlarge-10 {
    -ms-flex: 0 0 83.33333%;
        flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .xxlarge-offset-9 {
    margin-left: 75%; }
  .xxlarge-11 {
    -ms-flex: 0 0 91.66667%;
        flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .xxlarge-offset-10 {
    margin-left: 83.33333%; }
  .xxlarge-12 {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    max-width: 100%; }
  .xxlarge-offset-11 {
    margin-left: 91.66667%; }
  .xxlarge-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .xxlarge-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .xxlarge-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .xxlarge-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .xxlarge-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .xxlarge-order-6 {
    -ms-flex-order: 6;
        order: 6; }
  .xxlarge-up-1 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-1 > .column, .xxlarge-up-1 > .columns {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
  .xxlarge-up-2 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-2 > .column, .xxlarge-up-2 > .columns {
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
      max-width: 50%; }
  .xxlarge-up-3 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-3 > .column, .xxlarge-up-3 > .columns {
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
      max-width: 33.33333%; }
  .xxlarge-up-4 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-4 > .column, .xxlarge-up-4 > .columns {
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
      max-width: 25%; }
  .xxlarge-up-5 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-5 > .column, .xxlarge-up-5 > .columns {
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
      max-width: 20%; }
  .xxlarge-up-6 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-6 > .column, .xxlarge-up-6 > .columns {
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
      max-width: 16.66667%; }
  .xxlarge-up-7 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-7 > .column, .xxlarge-up-7 > .columns {
      -ms-flex: 0 0 14.28571%;
          flex: 0 0 14.28571%;
      max-width: 14.28571%; }
  .xxlarge-up-8 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .xxlarge-up-8 > .column, .xxlarge-up-8 > .columns {
      -ms-flex: 0 0 12.5%;
          flex: 0 0 12.5%;
      max-width: 12.5%; } }

@media screen and (min-width: 90em) and (min-width: 90em) {
  .xxlarge-expand {
    -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }

.row.xxlarge-unstack > .column, .row.xxlarge-unstack > .columns {
  -ms-flex: 0 0 100%;
      flex: 0 0 100%; }
  @media screen and (min-width: 90em) {
    .row.xxlarge-unstack > .column, .row.xxlarge-unstack > .columns {
      -ms-flex: 1 1 0px;
          flex: 1 1 0px; } }

@media screen and (min-width: 90em) {
  .xxlarge-collapse > .column, .xxlarge-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .xxlarge-uncollapse > .column, .xxlarge-uncollapse > .columns {
    padding-left: 0.75rem;
    padding-right: 0.75rem; } }

.shrink {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  max-width: 100%; }

.column.align-top, .align-top.columns {
  -ms-flex-item-align: start;
      align-self: flex-start; }

.column.align-bottom, .align-bottom.columns {
  -ms-flex-item-align: end;
      align-self: flex-end; }

.column.align-middle, .align-middle.columns {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center; }

.column.align-stretch, .align-stretch.columns {
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch; }

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
.heading-style--h1,
h2,
.heading-style--h2,
h3,
.heading-style--h3,
h4,
.heading-style--h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }

p {
  font-size: inherit;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  text-rendering: optimizeLegibility; }

em,
i {
  font-style: italic;
  line-height: inherit; }

strong,
b {
  font-weight: bold;
  line-height: inherit; }

small {
  font-size: 80%;
  line-height: inherit; }

h1, .heading-style--h1,
h2,
.heading-style--h2,
h3,
.heading-style--h3,
h4,
.heading-style--h4,
h5,
h6 {
  font-family: "Nordea Sans", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #000000;
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: 2rem;
  line-height: 1.4; }
  h1 small, .heading-style--h1 small,
  h2 small, .heading-style--h2 small,
  h3 small, .heading-style--h3 small,
  h4 small, .heading-style--h4 small,
  h5 small,
  h6 small {
    color: #8b8a8d;
    line-height: 0; }

h1, .heading-style--h1 {
  font-size: 2rem; }

h2, .heading-style--h2 {
  font-size: 1.5rem; }

h3, .heading-style--h3 {
  font-size: 1.25rem; }

h4, .heading-style--h4 {
  font-size: 1rem; }

a, .link {
  color: #0000ff;
  text-decoration: none;
  line-height: inherit;
  cursor: pointer; }
  a:hover, .link:hover, a:focus, .link:focus {
    color: #0000ff;
    text-decoration: underline; }
  a img, .link img {
    border: 0; }

hr {
  max-width: 105rem;
  height: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid #8b8a8d;
  border-left: 0;
  margin: 1.25rem auto;
  clear: both; }

ul,
ol,
dl {
  line-height: 1.5;
  margin-bottom: 1.5rem;
  list-style-position: outside; }

li {
  font-size: inherit; }

ul {
  list-style-type: disc;
  margin-left: 1.25rem; }

ol {
  margin-left: 1.25rem; }

ul ul, ol ul, ul ol, ol ol {
  margin-left: 1.25rem;
  margin-bottom: 0; }

dl {
  margin-bottom: 1rem; }
  dl dt {
    margin-bottom: 0.3rem;
    font-weight: bold; }

blockquote {
  margin: 0 0 1.5rem;
  padding: 0.5625rem 1.25rem 0 1.1875rem;
  border-left: 1px solid #8b8a8d; }
  blockquote, blockquote p {
    line-height: 1.5;
    color: #8b8a8d; }

cite {
  display: block;
  font-size: 0.8125rem;
  color: #8b8a8d; }
  cite:before {
    content: '\2014 \0020'; }

abbr {
  color: #000000;
  cursor: help;
  border-bottom: 1px dotted #000000; }

code {
  font-family: Consolas, "Liberation Mono", Courier, monospace;
  font-weight: normal;
  color: #000000;
  background-color: #e6e4e3;
  border: 1px solid #8b8a8d;
  padding: 0.125rem 0.3125rem 0.0625rem; }

kbd {
  padding: 0.125rem 0.25rem 0;
  margin: 0;
  background-color: #e6e4e3;
  color: #000000;
  font-family: Consolas, "Liberation Mono", Courier, monospace; }

.subheader {
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
  line-height: 1.4;
  color: #8b8a8d; }

.lead {
  font-size: 20px;
  line-height: 1.6; }

.stat {
  font-size: 2.5rem;
  line-height: 1; }
  p + .stat {
    margin-top: -1rem; }

.no-bullet {
  margin-left: 0;
  list-style: none; }

.text-left, .text--left {
  text-align: left; }

.text-right, .text--right {
  text-align: right; }

.text-center, .text--center {
  text-align: center; }

.text-justify, .text--justify {
  text-align: justify; }

@media screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left; }
  .medium-text-right {
    text-align: right; }
  .medium-text-center {
    text-align: center; }
  .medium-text-justify {
    text-align: justify; } }

@media screen and (min-width: 64em) {
  .large-text-left {
    text-align: left; }
  .large-text-right {
    text-align: right; }
  .large-text-center {
    text-align: center; }
  .large-text-justify {
    text-align: justify; } }

@media screen and (min-width: 75em) {
  .xlarge-text-left {
    text-align: left; }
  .xlarge-text-right {
    text-align: right; }
  .xlarge-text-center {
    text-align: center; }
  .xlarge-text-justify {
    text-align: justify; } }

@media screen and (min-width: 90em) {
  .xxlarge-text-left {
    text-align: left; }
  .xxlarge-text-right {
    text-align: right; }
  .xxlarge-text-center {
    text-align: center; }
  .xxlarge-text-justify {
    text-align: justify; } }

.show-for-print {
  display: none !important; }

@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important; }
  .show-for-print {
    display: block !important; }
  .hide-for-print {
    display: none !important; }
  table.show-for-print {
    display: table !important; }
  thead.show-for-print {
    display: table-header-group !important; }
  tbody.show-for-print {
    display: table-row-group !important; }
  tr.show-for-print {
    display: table-row !important; }
  td.show-for-print {
    display: table-cell !important; }
  th.show-for-print {
    display: table-cell !important; }
  a, .link,
  a:visited,
  .link:visited {
    text-decoration: underline; }
  a[href]:after, [href].link:after {
    content: " (" attr(href) ")"; }
  .ir a:after, .ir .link:after,
  a[href^='javascript:']:after,
  [href^='javascript:'].link:after,
  a[href^='#']:after,
  [href^='#'].link:after {
    content: ''; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  pre,
  blockquote {
    border: 1px solid #8b8a8d;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  tr,
  img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p,
  h2,
  .heading-style--h2,
  h3,
  .heading-style--h3 {
    orphans: 3;
    widows: 3; }
  h2, .heading-style--h2,
  h3,
  .heading-style--h3 {
    page-break-after: avoid; } }

/**
Visibility classes

Foundation for sites <a href="http://http://foundation.zurb.com/sites/docs/visibility.html">visibility classes</a> are included.
See the link for details. Not all modifers are listed here.

Additionally, we have borrowed `.text--hidden` and `.text--squished` from Compass libraries, which use different methods to hide elements.

.hide           - Hides an element, `display: none`
.invisible      - Makes an element invisible but keeps its size,  display: hidden`
.show-on-focus - Hides an element except when it has focus. This is used for creating skip links for screen readers, can be focused by keyboard navigation.
.text--hidden  - Hides an element with `text-indent` so you can see the background. If a text element, element will retain the height of one line of text.
.text--squished  - Hides text in an element by squishing the text into oblivion. Use this if you need to hide text contained in an inline element but still have it read by a screen reader. Height of text elements will be 0.

Markup: <a href="http://www.nordea.fi" class="{$modifiers}">A link to Nordea FI home</a>

Styleguide 3.3
*/
.hide {
  display: none !important; }

.invisible {
  visibility: hidden; }

@media screen and (max-width: 39.9375em) {
  .hide-for-small-only {
    display: none !important; } }

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important; } }

@media screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important; } }

@media screen and (max-width: 39.9375em) {
  .show-for-medium {
    display: none !important; } }

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .hide-for-medium-only {
    display: none !important; } }

@media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
  .show-for-medium-only {
    display: none !important; } }

@media screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important; } }

@media screen and (max-width: 63.9375em) {
  .show-for-large {
    display: none !important; } }

@media screen and (min-width: 64em) and (max-width: 74.9375em) {
  .hide-for-large-only {
    display: none !important; } }

@media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
  .show-for-large-only {
    display: none !important; } }

@media screen and (min-width: 75em) {
  .hide-for-xlarge {
    display: none !important; } }

@media screen and (max-width: 74.9375em) {
  .show-for-xlarge {
    display: none !important; } }

@media screen and (min-width: 75em) and (max-width: 89.9375em) {
  .hide-for-xlarge-only {
    display: none !important; } }

@media screen and (max-width: 74.9375em), screen and (min-width: 90em) {
  .show-for-xlarge-only {
    display: none !important; } }

@media screen and (min-width: 90em) {
  .hide-for-xxlarge {
    display: none !important; } }

@media screen and (max-width: 89.9375em) {
  .show-for-xxlarge {
    display: none !important; } }

@media screen and (min-width: 90em) {
  .hide-for-xxlarge-only {
    display: none !important; } }

@media screen and (max-width: 89.9375em) {
  .show-for-xxlarge-only {
    display: none !important; } }

.show-for-sr,
.show-on-focus {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); }

.show-on-focus:active, .show-on-focus:focus {
  position: static !important;
  height: auto;
  width: auto;
  overflow: visible;
  clip: auto; }

.show-for-landscape,
.hide-for-portrait {
  display: block !important; }
  @media screen and (orientation: landscape) {
    .show-for-landscape,
    .hide-for-portrait {
      display: block !important; } }
  @media screen and (orientation: portrait) {
    .show-for-landscape,
    .hide-for-portrait {
      display: none !important; } }

.hide-for-landscape,
.show-for-portrait {
  display: none !important; }
  @media screen and (orientation: landscape) {
    .hide-for-landscape,
    .show-for-portrait {
      display: none !important; } }
  @media screen and (orientation: portrait) {
    .hide-for-landscape,
    .show-for-portrait {
      display: block !important; } }

/**
Float classes

Foundation for sites <a href="http://foundation.zurb.com/sites/docs/float-classes.html">float classes</a> are included.
See the link for details.

.float-left   - Float an element on the left
.float-right  - Float an element on the right
.float-center - Center an element. Will only work on block elements with absolute width.

Markup: <div class="clearfix"><div style="display: block;" class="styleguide__color-box--nordea-blue {$modifiers}"></div></div>

Styleguide 3.4
*/
/**
Clearfix

Use this class on the parent element of floating elements to ensure correct container size.

Markup:
<div class="callout" style="margin-bottom: 150px;"><div style="width: 100px; height: 100px;" class="float-left styleguide__color-box--nordea-blue"></div><div class="float-right">Without clearfix</div></div>
<div class="callout clearfix"><div style="width: 100px; height: 100px;" class="float-left styleguide__color-box--nordea-blue"></div><div class="float-right">With clearfix</div></div>

Styleguide 3.4.1
*/
.float-left {
  float: left !important; }

.float-right {
  float: right !important; }

.float-center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.clearfix::before, .clearfix::after {
  content: ' ';
  display: table;
  -ms-flex-preferred-size: 0;
      flex-basis: 0;
  -ms-flex-order: 1;
      order: 1; }

.clearfix::after {
  clear: both; }

.button-group {
  margin-bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: stretch;
      align-items: stretch; }
  .button-group::before, .button-group::after {
    content: ' ';
    display: table;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -ms-flex-order: 1;
        order: 1; }
  .button-group::after {
    clear: both; }
  .button-group .button {
    margin: 0;
    font-size: 1rem;
    -ms-flex: 0 0 auto;
        flex: 0 0 auto; }
    .button-group .button:not(:last-child) {
      margin-right: -1px; }
  .button-group.large .button {
    font-size: 1.25rem; }
  .button-group.expanded .button {
    -ms-flex: 1 1 0px;
        flex: 1 1 0px; }
  .button-group.primary .button {
    background-color: #0000a0;
    color: #fdece4; }
    .button-group.primary .button:hover, .button-group.primary .button:focus {
      background-color: navy;
      color: #fdece4; }
  .button-group.secondary .button {
    background-color: #3399ff;
    color: #fdece4; }
    .button-group.secondary .button:hover, .button-group.secondary .button:focus {
      background-color: #007af5;
      color: #fdece4; }
  .button-group.success .button {
    background-color: #006060;
    color: #fdece4; }
    .button-group.success .button:hover, .button-group.success .button:focus {
      background-color: #004d4d;
      color: #fdece4; }
  .button-group.alert .button {
    background-color: #b00000;
    color: #fdece4; }
    .button-group.alert .button:hover, .button-group.alert .button:focus {
      background-color: #8d0000;
      color: #fdece4; }
  .button-group.warning .button {
    background-color: #ffe183;
    color: #0000ff; }
    .button-group.warning .button:hover, .button-group.warning .button:focus {
      background-color: #ffce36;
      color: #0000ff; }
  .button-group.stacked, .button-group.stacked-for-small, .button-group.stacked-for-medium {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .button-group.stacked .button, .button-group.stacked-for-small .button, .button-group.stacked-for-medium .button {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      margin-right: 0; }
      .button-group.stacked .button:not(:last-child), .button-group.stacked-for-small .button:not(:last-child), .button-group.stacked-for-medium .button:not(:last-child) {
        margin-bottom: -1px; }
  @media screen and (min-width: 40em) {
    .button-group.stacked-for-small .button {
      -ms-flex: 1 1 0px;
          flex: 1 1 0px; }
      .button-group.stacked-for-small .button:not(:last-child) {
        margin-right: -1px; } }
  @media screen and (min-width: 64em) {
    .button-group.stacked-for-medium .button {
      -ms-flex: 1 1 0px;
          flex: 1 1 0px; }
      .button-group.stacked-for-medium .button:not(:last-child) {
        margin-right: -1px; } }
  @media screen and (max-width: 39.9375em) {
    .button-group.stacked-for-small.expanded {
      display: block; }
      .button-group.stacked-for-small.expanded .button {
        display: block;
        margin-right: 0; } }

.close-button {
  position: absolute;
  color: #8a8a8a;
  right: 0.5rem;
  top: 0.5rem;
  font-size: 2rem;
  line-height: 0.5;
  cursor: pointer; }
  [data-whatinput='mouse'] .close-button {
    outline: 0; }
  .close-button:hover, .close-button:focus {
    color: #0a0a0a; }

.menu {
  margin: 0;
  list-style-type: none;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: center;
      align-items: center;
  flex-wrap: nowrap; }
  .menu > li {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto; }
    [data-whatinput='mouse'] .menu > li {
      outline: 0; }
  .menu > li > a, .menu > li > .link {
    display: block;
    padding: 0.7rem 1rem;
    line-height: 1; }
  .menu input,
  .menu a,
  .menu .link,
  .menu button {
    margin-bottom: 0; }
  .menu > li > a, .menu > li > .link {
    display: -ms-flexbox;
    display: flex; }
  .menu > li > a, .menu > li > .link {
    -ms-flex-flow: row nowrap;
        flex-flow: row nowrap; }
    .menu > li > a img, .menu > li > .link img,
    .menu > li > a i,
    .menu > li > .link i {
      margin-right: 0.25rem; }
  .menu > li {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto; }
  .menu.vertical {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .menu.vertical > li {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
    .menu.vertical > li > a, .menu.vertical > li > .link {
      -ms-flex-align: start;
          align-items: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start; }
  @media screen and (min-width: 40em) {
    .menu.medium-horizontal {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
      .menu.medium-horizontal > li {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
    .menu.medium-vertical {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      .menu.medium-vertical > li {
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%; }
      .menu.medium-vertical > li > a, .menu.medium-vertical > li > .link {
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }
  @media screen and (min-width: 64em) {
    .menu.large-horizontal {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
      .menu.large-horizontal > li {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
    .menu.large-vertical {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      .menu.large-vertical > li {
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%; }
      .menu.large-vertical > li > a, .menu.large-vertical > li > .link {
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }
  @media screen and (min-width: 75em) {
    .menu.xlarge-horizontal {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
      .menu.xlarge-horizontal > li {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
    .menu.xlarge-vertical {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      .menu.xlarge-vertical > li {
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%; }
      .menu.xlarge-vertical > li > a, .menu.xlarge-vertical > li > .link {
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }
  @media screen and (min-width: 90em) {
    .menu.xxlarge-horizontal {
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
      .menu.xxlarge-horizontal > li {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto; }
    .menu.xxlarge-vertical {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
      .menu.xxlarge-vertical > li {
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%; }
      .menu.xxlarge-vertical > li > a, .menu.xxlarge-vertical > li > .link {
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; } }
  .menu.simple li {
    line-height: 1;
    display: inline-block;
    margin-right: 1rem; }
  .menu.simple a, .menu.simple .link {
    padding: 0; }
  .menu.align-right {
    -ms-flex-pack: end;
        justify-content: flex-end; }
  .menu.expanded > li {
    -ms-flex: 1 1 0px;
        flex: 1 1 0px; }
  .menu.expanded > li:first-child:last-child {
    width: 100%; }
  .menu.icon-top > li > a, .menu.icon-top > li > .link {
    -ms-flex-flow: column nowrap;
        flex-flow: column nowrap; }
    .menu.icon-top > li > a img, .menu.icon-top > li > .link img,
    .menu.icon-top > li > a i,
    .menu.icon-top > li > .link i {
      -ms-flex-item-align: stretch;
          -ms-grid-row-align: stretch;
          align-self: stretch;
      text-align: center;
      margin-bottom: 0.25rem; }
  .menu.nested {
    margin-left: 1rem; }
  .menu .active > a, .menu .active > .link {
    color: #0000ff;
    background: transparent; }

.menu-text {
  font-weight: bold;
  color: inherit;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  padding: 0.7rem 1rem; }

.menu-centered {
  text-align: center; }
  .menu-centered > .menu {
    display: inline-block; }

.no-js [data-responsive-menu] ul {
  display: none; }

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

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

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

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

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

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

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

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

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

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

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

.align-self-stretch {
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch; }

.small-order-1 {
  -ms-flex-order: 1;
      order: 1; }

.small-order-2 {
  -ms-flex-order: 2;
      order: 2; }

.small-order-3 {
  -ms-flex-order: 3;
      order: 3; }

.small-order-4 {
  -ms-flex-order: 4;
      order: 4; }

.small-order-5 {
  -ms-flex-order: 5;
      order: 5; }

.small-order-6 {
  -ms-flex-order: 6;
      order: 6; }

@media screen and (min-width: 40em) {
  .medium-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .medium-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .medium-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .medium-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .medium-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .medium-order-6 {
    -ms-flex-order: 6;
        order: 6; } }

@media screen and (min-width: 64em) {
  .large-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .large-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .large-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .large-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .large-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .large-order-6 {
    -ms-flex-order: 6;
        order: 6; } }

@media screen and (min-width: 75em) {
  .xlarge-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .xlarge-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .xlarge-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .xlarge-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .xlarge-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .xlarge-order-6 {
    -ms-flex-order: 6;
        order: 6; } }

@media screen and (min-width: 90em) {
  .xxlarge-order-1 {
    -ms-flex-order: 1;
        order: 1; }
  .xxlarge-order-2 {
    -ms-flex-order: 2;
        order: 2; }
  .xxlarge-order-3 {
    -ms-flex-order: 3;
        order: 3; }
  .xxlarge-order-4 {
    -ms-flex-order: 4;
        order: 4; }
  .xxlarge-order-5 {
    -ms-flex-order: 5;
        order: 5; }
  .xxlarge-order-6 {
    -ms-flex-order: 6;
        order: 6; } }

/**
Base

Base styles, settings, mixins.

Styleguide 1
*/
body {
  direction: ltr;
  position: relative;
  padding: 0;
  margin: 0; }

html, body {
  height: 100%; }

[data-whatinput="mouse"] *:focus {
  outline: none; }

/*
Icons

This bundle comes with an SVG icon sprite file <code>icons/icon-pack.svg</code>. There are two ways of using it.

Inline SVG: Inject the contents of the file as the first element in the document's <code>body</code> element. Then reference an icon as in
<pre>
  &lt;svg class="icon" focusable="false"&gt;
    &lt;use xlink:href="#icon_name"&gt;&lt;/use&gt;
  &lt;/svg&gt;
</pre>

<strong>Note:</strong> `focusable="false"` prevents tab navigation focus on the SVG icon in Internet Explorer. This is important for correct tab navigation order.

External resource: Use <a href="https://github.com/jonathantneal/svg4everybody">svg4everybody</a> to ensure cross-browser support.
Then reference an icon as in
<pre>
  &lt;svg class="icon" focusable="false"&gt;
    &lt;use xlink:href="path/to/icon-pack.svg#icon_name"&gt;&lt;/use&gt;
  &lt;/svg&gt;
</pre>

The examples below use the second method. <a href="https://github.com/jonathantneal/svg4everybody">svg4everybody</a> is included for the style guide only.

Styleguide 1.5
*/
/*
Icon accessibility

<h3>Icon is a decorative element inside a container that has a descriptive text</h3>

The icon should have aria-hidden="true" defined to it.

Example:
<pre>
  &lt;a href=".../new_payment..."&gt;
    &lt;svg class="icon" focusable="false" aria-hidden=”true"&gt;
      &lt;use xlink:href="path/to/icon-pack.svg#icon_name"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    New payment
  &lt;/a&gt;
</pre>

<h3>Icon is the only content of a link or a button</h3>

Add aria-label to the element containing the icon.
The icon should have aria-hidden="true" defined to it.

Example:
<pre>
  &lt;a href=".../new_payment..." aria-label="New payment"&gt;
    &lt;svg class="icon" focusable="false" aria-hidden=”true"&gt;
      &lt;use xlink:href="path/to/icon-pack.svg#icon_name"&gt;&lt;/use&gt;
    &lt;/svg&gt;
  &lt;/a&gt;
</pre>

<h3>Icon is purely decorative or an empty element</h3>

Add role="presentation" to the icon.

<pre>
   &lt;svg class="icon" focusable="false" role="presentation"&gt;
     &lt;use xlink:href="path/to/icon-pack.svg#icon_name"&gt;&lt;/use&gt;
   &lt;/svg&gt;
</pre>

<h3>Image or graphic conveys some content that is not conveyed elsewhere in the text</h3>

Add role="img", title and/or description.

<pre>
   &lt;svg class="icon" focusable="false" role="img" aria-labeledby=”title1 dsc1”&gt;
    &lt;title id=”title1”&gt;Descriptive title
    &lt;/title&gt;
    &lt;desc id=”dsc1”&gt;Longer description here….
    &lt;/desc&gt;
       &lt;use xlink:href="path/to/icon-pack.svg#icon_name"&gt;&lt;/use&gt;
   &lt;/svg&gt;
</pre>


Styleguide 1.5.1
*/
/*
Icon sizes

.icon - Default icon
.icon.icon--small - Small icon
.icon.icon--smallish - Smallish icon
.icon.icon--medium - Medium icon
.icon.icon--large - Large icon
.icon.icon--xlarge - Extra large icon

Markup:
<svg class="{$modifiers}" focusable="false">
    <use xlink:href="/build/icons/icon-pack.svg#home"></use>
</svg>

Styleguide 1.5.2

*/
/*
Icon colors

You can override the default icon color using the CSS attribute <code>color</code>.
Below are just some examples.

.icon.text--success - Icon with "success" color
.icon.text--error - Icon with "error" color

Markup:
<svg class="{$modifiers}" focusable="false">
    <use xlink:href="/build/icons/icon-pack.svg#home"></use>
</svg>

Styleguide 1.5.3

*/
/*
List of standard-sized icons

accounts - icon
addBeneficiary - icon
additionalInfo - icon
addressBook - icon
advice - icon
alert - icon
arrowDown - icon
arrowLeft - icon
arrowRight - icon
arrowUp - icon
attachment - icon
authenticate - icon
beneficiary - icon
boat - icon
buy - icon
calendar - icon
cards - icon
cart - icon
carTransport - icon
cashSavings - icon
changeOrder - icon
chat - icon
chatBubble - icon
chatBubbleNot - icon
checkAndPay - icon
checkMarkSmall - icon
children - icon
close - icon
closeProductCard - icon
clothing - icon
codesApp - icon
coins - icon
companies - icon
company - icon
confirmSign - icon
contactUs - icon
crossborder - icon
dashboard - icon
education - icon
empty - icon
entertainment - icon
envelope - icon
error - icon
exclude - icon
family - icon
familyHousehold - icon
favorite - icon
fill - icon
financialServices - icon
flashOff - icon
flashOn - icon
food - icon
foodDrink - icon
forecast - icon
friendsAndFamily - icon
grid - icon
groceries - icon
health - icon
hideChat - icon
hobbies - icon
hobbiesInterests - icon
home - icon
homeHouse - icon
house - icon
household - icon
income - icon
incomeCoins - icon
incomingPayment - icon
internationalCheck - icon
internetCall - icon
investmentSavings - icon
leisure - icon
list - icon
liquidityThreshold - icon
logout - icon
loans - icon
location - icon
login - icon
manageFinances - icon
maximise - icon
mic - icon
micNot - icon
minimise - icon
moneyOrder - icon
mysteryCategory - icon
nextProductCard - icon
noConnection - icon
ok - icon
openInNewWindow - icon
outgoingPayment - icon
owners - icon
pay - icon
payments - icon
pdf - icon
pension - icon
percentage - icon
personalInformation - icon
phoneCall - icon
phoneHandle - icon
portfolio - icon
previousProductCard - icon
priorityPass - icon
products - icon
profile - icon
ratingStar - icon
reoccurring - icon
reply - icon
savings - icon
savingsInvestments - icon
scanInvoice - icon
search - icon
sell - icon
settingsCog - icon
shopping - icon
shoppingServices - icon
subscriptions - icon
summerhomeBoat - icon
swap - icon
switchoff - icon
tags - icon
tickMark - icon
tickMarkBig - icon
tools - icon
transfer - icon
trashcan - icon
travelVacation - icon
tvPhoneInternet - icon
uncategorized - icon
videoCall - icon
videoCallNot - icon
visa - icon


Markup: <svg class="icon" focusable="false"> <use xlink:href="/build/icons/icon-pack.svg&#x23;{$modifiers}"></use> </svg> {$modifiers}

Styleguide 1.5.4

*/
/*
List of small icons

alert_sml - icon
arrow_down_sml - icon
arrow_left_sml - icon
arrow_right_sml - icon
arrow_up_sml - icon
close_x_sml - icon
error_sml - icon
fullArrowDown_sml - icon
fullArrowLeft_sml - icon
fullArrowRight_sml - icon
fullArrowUp_sml - icon
info_sml - icon
plus_sml - icon

Markup: <svg class="icon icon--small" focusable="false"> <use xlink:href="/build/icons/icon-pack.svg&#x23;{$modifiers}"></use> </svg> {$modifiers}

Styleguide 1.5.5

*/
.icon {
  box-sizing: content-box;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  color: #0000ff;
  fill: none; }
  .icon, .icon * {
    stroke: currentColor; }
  .icon use {
    pointer-events: none; }

.icon, .icon svg {
  height: 2rem;
  width: 2rem; }

.icon--small, .icon--small svg {
  width: 1rem;
  height: 1rem; }

.icon--smallish, .icon--smallish svg {
  width: 1.5rem;
  height: 1.5rem; }

.icon--medium, .icon--medium svg {
  width: 2rem;
  height: 2rem; }

.icon--large, .icon--large svg {
  width: 4rem;
  height: 4rem; }

.icon--xlarge, .icon--xlarge svg {
  width: 8rem;
  height: 8rem; }

.vertical-dots-icon--css-fallback {
  display: inline-block;
  width: 4px;
  height: 1.5rem;
  background-image: radial-gradient(circle at center, #0000ff 0.125rem, transparent 0.125rem);
  background-size: 0.25rem 0.5rem;
  background-repeat: repeat-y;
  vertical-align: middle; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-Light.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-Light.woff2") format("woff2"), url("fonts/NordeaSansSmall-Light.woff") format("woff"), url("fonts/NordeaSansSmall-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-LightItalic.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-LightItalic.woff2") format("woff2"), url("fonts/NordeaSansSmall-LightItalic.woff") format("woff"), url("fonts/NordeaSansSmall-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-Regular.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-Regular.woff2") format("woff2"), url("fonts/NordeaSansSmall-Regular.woff") format("woff"), url("fonts/NordeaSansSmall-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-Medium.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-Medium.woff2") format("woff2"), url("fonts/NordeaSansSmall-Medium.woff") format("woff"), url("fonts/NordeaSansSmall-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-MediumItalic.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-MediumItalic.woff2") format("woff2"), url("fonts/NordeaSansSmall-MediumItalic.woff") format("woff"), url("fonts/NordeaSansSmall-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-Bold.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-Bold.woff2") format("woff2"), url("fonts/NordeaSansSmall-Bold.woff") format("woff"), url("fonts/NordeaSansSmall-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-BoldItalic.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-BoldItalic.woff2") format("woff2"), url("fonts/NordeaSansSmall-BoldItalic.woff") format("woff"), url("fonts/NordeaSansSmall-BoldItalic.ttf") format("truetype");
  font-weight: bold;
  font-style: italic; }

@font-face {
  font-family: 'Nordea Sans';
  src: url("fonts/NordeaSansSmall-Black.eot");
  src: local("☺"), url("fonts/NordeaSansSmall-Black.woff2") format("woff2"), url("fonts/NordeaSansSmall-Black.woff") format("woff"), url("fonts/NordeaSansSmall-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal; }

/**
Typography

The default font is Nordea Sans.

Styleguide 1.4
*/
/**
Headings

Heading tags to more than style text, they are critical to screen readers for accessibility, so make sure to use them correctly. Assistive technologies and other browsers rely upon the literal markup of the page to determine structure. Items that are bolded or display in a bigger font are not interpreted to be structural elements.

- Headings should be used to define the hierarchical structure of the content on a page and not for anything else.
- Do not use text formatting, such as font size or bold to give the visual appearance of headings - use actual heading (```<h1> - <h6>```) for all content headings.
- Use headings for headings only. Do not use headers to achieve visual results only on text that does not define the structure of the page.
- The page title should be an ```<h1>``` heading. You can use the ```.invisible```, ```.text--hidden``` or ```.text--squished``` classes to hide the title if necessary, but every page must have one. Additionally every page should only have one ```<h1>``` heading. Do not use this tag for text that is not actually the title of the page.
- Subsections under this should be ```<h2>``` headings.
- The ```.heading-style--h1``` classes can be used to emulate the appearance of heading tags on other elements, in cases where it is inappropriate to use an actual heading tag but the style should look the same.

h1 - Page headlines only.

- Each page should have a clear, short h1 headline copy that will describe the purpose of the page, e.g. "Financial contacts".
- h1: is specified separately as largest headline style 1, that is set 2.0 rem in terms of size. Color is always $black.
- Clear space top: h1 is located 3.0 rem under the navigation bar level 2
- Clear space bottom: 1.647 rem until other elements appear.

h2 - Page subheading.

- Use h2 as titles for the sub-features or panels. This element can be used in more versatile manner.
- h2: is specified separately as basic heading, that is set 1.2x5 rem in terms of size. Color is always $black.
- Clear space top: at least 3.0 rem clear space on top.
- Clear space bottom: at least 2.0 rem clear space at bottom.

h3 - Panel heading.

- Use h3 as headings within panels.
- Clear space top: at least 2.0 rem of clear space on top
- Clear space top: at least 2.0 rem of clear space at bottom

Markup:
<h1>Heading 1 - For page titles only</h1>
<h2>Heading 2 - Second level heading</h2>
<h3>Heading 3 - Third level navigation</h3>
<h4>Heading 4 - Captions</h4>
<div class="heading-style--h1">.heading-style--h1 - h1 heading style text</div>
<div class="heading-style--h2">.heading-style--h2 - h2 heading style text</div>
<div class="heading-style--h3">.heading-style--h3 - h3 heading style text</div>
<div class="heading-style--h4">.heading-style--h1 - h4 heading style text</div>

Styleguide 1.4.1
*/
h1, .heading-style--h1 {
  color: #000000;
  margin-bottom: 1.647rem;
  font-weight: lighter; }

h4, .heading-style--h4 {
  text-transform: uppercase;
  color: #000000; }

/**
Paragraph margins

You can adjust paragraphs and headers to have smaller margins for short pieces of text by wrapping them in a container with ```text-short``` class.

.text--long    - normal paragraph, default
.text--short   - Short text paragraph

Markup:
<div class="{$modifiers}">
<h2>Second level heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non orci sit amet libero mattis hendrerit ut ut felis. Lectus turpis, vitae molestie est feugiat laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non orci sit amet libero mattis hendrerit ut ut felis. Lectus turpis, vitae molestie est feugiat laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>

Styleguide 1.4.2
*/
.text--short h1, .text--short .heading-style--h1,
.text--short h2,
.text--short .heading-style--h2,
.text--short h3,
.text--short .heading-style--h3,
.text--short h4,
.text--short .heading-style--h4,
.text--short h5,
.text--short h6 {
  margin-bottom: 1rem; }

.text--short p,
.text--short blockquote {
  margin-bottom: 2rem; }

/**
Text sizes and colors

You can adjust text to be larger or smaller than normal text or give it a color based on a semantic class.

.text          - normal text, default
.text--large   - large text
.text--small   - small text
.text--smallcaps - small, capitalized text
.text--success - success text color
.text--error   - error text color
.text--caption - caption text color ($nordea-x-dark-grey)
.text--small.text--error  - combine the modifiers to get e.g. small error text

Markup:
<p class="{$modifiers}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non orci sit amet libero mattis hendrerit ut ut felis. Lectus turpis, vitae molestie est feugiat laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

Styleguide 1.4.3
*/
.text--large, .text-large {
  font-size: 1.25rem; }

.text--small, .text-small, .link--small, .link-small {
  font-size: 0.8125rem; }

.text--success, .text-success {
  color: #006060; }

.text--error, .text-error {
  color: #b00000; }

.text--caption {
  color: #474748; }

.text--smallcaps, .text-smallcaps {
  font-size: 0.8125rem;
  text-transform: uppercase; }

.text--capitalize, .text-capitalize {
  text-transform: capitalize; }

.text--uppercase, .text-uppercase {
  text-transform: uppercase; }

.text--lowercase, .text-lowercase {
  text-transform: lowercase; }

.text--transform-none, .text-transform-none {
  text-transform: none; }

/**
Text visibility classes

Please see section [Layout > Visibility](#/section/3.3) for helper visibility classes, useful for accessibility navigation skip-links, etc.

Markup: -

Styleguide 1.4.4
*/
.text--hidden {
  display: block;
  text-indent: -119988px;
  overflow: hidden;
  text-align: left; }

.text--squished {
  display: inline-block;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent; }

/**
Links

Anchor elements have the `.link` style by default. Use the `.link` class when you need to style a clickable element as a link. In the latter case, if the element is not natively clickable, add the aria attribute `role="button"` and a `tabindex` attribute.

.link             - Link, default style of `<a>` elements
.link.link--small - Small text link
.link:hover       - Link hover state

Markup:
<a href="http://www.wikipedia.org/wiki/Lorem_ipsum" class="{$modifiers}">Anchor</a>
<span role="button" tabindex="0" class="{$modifiers}">Span</span>
<button type="button" class="{$modifiers}">Button</button>

Styleguide 1.4.5
*/
.colors-negative a, .colors-negative .link, .colors-negative .link {
  color: #e5f2ff; }
  .colors-negative a:hover, .colors-negative .link:hover, .colors-negative a:focus, .colors-negative .link:focus, .colors-negative .link:hover, .colors-negative .link:focus {
    color: #e5f2ff; }

/**
Text alignment

You can change the text alignment of an element by adding <code>.text-left</code>, <code>.text-right</code>, <code>.text-center</code> or <code>.text-justify</code> to an element.

.text--left    - left-aligned text, default
.text--right   - right-aligned text
.text--center  - centered text
.text--justify - justified text

Markup: <p class="{$modifiers}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non orci sit amet libero mattis hendrerit ut ut felis. Lectus turpis, vitae molestie est feugiat laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

Styleguide 1.4.6
*/
/**
Numbers

By default numbers are not monospaced. You can set monospaced numbers by using classes `.numbers--monospaced`. For displaying monetary amounts the [`.amount`](#/section/2.9) class is recommended.

Note that this style is not supported in all browsers.

.default - Default numbers
.numbers--monospaced - Monospaced numbers

Markup:
<table class="text--right {$modifiers}">
  <tr>
      <td>123,45</td>
  </tr>
  <tr>
      <td>123 456,78</td>
  </tr>
  <tr>
      <td>123 456 789,00</td>
  </tr>
</table>

Styleguide 1.4.7
*/
.numbers--monospaced {
  font-feature-settings: 'tnum'; }

/*
Negative colors

<p>
Class <code>colors-negative</code> is a global class that converts elements within a container to have
colors that are better visible against a dark background. The class does not itself change the background color
because there is not a single dark background color.
</p>
<p>
Below is an example text elements with negative colors. Buttons, inputs etc. with negative colors are documented in other sections.
</p>

.colors-negative - Sets negative colors to child elements inside a container

Markup: _typography-negative.html

sg-wrapper:
<div class="styleguide__colors-negative">
  <sg-wrapper-content/>
</div>

Styleguide 1.3
*/
.colors-negative {
  color: #ffffff; }
  .colors-negative h1, .colors-negative .heading-style--h1,
  .colors-negative h2,
  .colors-negative .heading-style--h2,
  .colors-negative h3,
  .colors-negative .heading-style--h3 {
    color: #ffffff; }
  .colors-negative h4, .colors-negative .heading-style--h4,
  .colors-negative h5,
  .colors-negative h6 {
    color: #ffffff; }
  .colors-negative a, .colors-negative .link {
    color: #e5f2ff; }
  .colors-negative .icon,
  .colors-negative .close-button {
    color: #f0c1ae; }
  .colors-negative .text-success, .colors-negative .text--success, .colors-negative .text-success {
    color: #40bfa3; }
  .colors-negative .text-error, .colors-negative .text--error, .colors-negative .text-error {
    color: #fc6161; }

/**
Layout

Styleguide 3
*/
/**
Fluid container

Sets minimum and maximum width of the content as 980px and 1680px and adds padding on the sides.

Use the `.fluid-container` nested inside a <a href="#/section/3.2.1">.fluid-container-background</a> element. This ensures that all the `.fluid-container` elements on the page get the same padding and align nicely in all viewport sizes.

Do not use multiple fluid-container classes in a nested way. This class is meant to be used on a high-level container, e.g. all application content, or main content and navigation bar separately.

This example best viewed in full screen mode. Try also resizing the browser window until a horizontal scrollbar appears.

.fluid-container - A container with minimum and maximum width plus padding

Markup:
<div class="fluid-container-background">
  <div class="fluid-container">
    <div class="callout callout--success">fluid-container in a .fluid-container-background</div>
  </div>
</div>
<div class="fluid-container-background">
  <div class="fluid-container">
    <div class="callout callout--info">.fluid-container in a .fluid-container-background</div>
  </div>
</div>
<div class="fluid-container">
  <div class="callout callout--warning">.fluid-container without a .fluid-container-background</div>
</div>

Styleguide 3.2
*/
/**
Fluid container background

This is a wrapper meant to be used with the <code>.fluid-container</code> class. It creates an element which has a minimum width so that it fits in the smallest viewport we support without a horizontal scrollbar, taking the space taken by a vertical scrollbar into account. It has no maximum width, so it can also be used when setting a background color spanning the entire page width (including scrollable area). This class itself does not change the background color.

Note that there is also a mixin <a href="#/section/4.2.10">fluid-container-background</a> for creating your own fluid container background class.

This example best viewed in full screen mode. Try also resizing the browser window to see how the container behaves when the vertical and/or the horizontal scrollbar appears.

.fluid-container-background - Helper class for wrapping .fluid-container

Markup: _fluid-container-background.html

Styleguide 3.2.1
*/
/**
Grid overlay()

Use <code>.debug</code> on any <code>.row</code> element to display a column overlay as a helper.

4.2.1
*/
/*
Panel layout style

The panel style, similar to a card, defines layout and padding for a block of content and optionally a header. Note that any direct children of the last child of the panel will have margin stripped, so if you have a row of buttons or other elements that include bottom margin placed inline at the bottom of the panel, make sure they are wrapped inside a single `<div>`, `<p>`, or other block element. In the same sense, if you have multiple rows of inline elements at the bottom of the panel, make sure each row is wrapped in a separate `<div>` or other block element to preserve the bottom margin of the second to last row. See 3.6.5 for how not to do it.

Styleguide 3.6
*/
/*
Panel layout style detailed example

Markup:
<p>Lorem dizzle dolizzle sit amizzle, mammasay mammasa mamma oo sa adipiscing crunk. Nullizzle sapizzle velit, owned volutpat, suscipit sure, for sure vizzle, arcu. Pellentesque egizzle tortor. Sed erizzle. Crazy dope dope dapibus turpizzle tempizzle tempor. Mauris shizznit nibh et turpizzle. Vestibulum izzle tortizzle.</p>
<div class="panel">
    <div class="panel__header"><h2>h2 - Panel header</h2></div>
    <div class="panel__content">
      <p>Pellentesque egizzle tortor. Sed erizzle. Crazy dope dope dapibus turpizzle tempizzle tempor. Mauris shizznit nibh et turpizzle. Vestibulum izzle tortizzle. Pellentesque izzle rhoncizzle break yo neck, yall. In hac cool platea dictumst. Ass dapibizzle. </p>
      <p class="button-row text--right">
          <button type="button" class="button button--secondary">Cancel</button>
          <button type="button" class="button button--primary">Confirm</button>
      </p>
      <p>Break it down sapien nulla, iaculizzle dope, molestie sizzle, gangsta izzle, erizzle. Fo shizzle vitae turpis that's the shizzle nibh bibendizzle i saw beyonces tizzles and my pizzle went crizzle. Away dizzle consectetizzle the bizzle. Aliquam erat volutpizzle. Bizzle ut leo izzle lectus break it down faucibus. Crizzle stuff lacizzle brizzle dui condimentum ultricies. Get down get down nisl. Dizzle izzle urna. Integizzle ma nizzle ipsizzle we gonna chung mi. Donec izzle turpis.</p>
      <p class="button-row text--right">
          <button type="button" class="button button--secondary">Cancel</button>
          <button type="button" class="button button--primary">Confirm</button>
      </p>
    </div>
</div>
<p>Vestibulum izzle tortizzle. Pellentesque izzle rhoncizzle break yo neck, yall. In hac cool platea dictumst. Ass dapibizzle. Own yo' tellus urna, pretizzle funky fresh, mattizzle ac, eleifend vitae, nunc. Bizzle suscipizzle. Integizzle nizzle ass sizzle sizzle.</p>

Styleguide 3.6.1
*/
/*
Simple panel layout style

If you have multiple elements, it is safer to use `.panel__header` and `.panel__content` wrappers inside the panel, however if you have a very simple panel with only block elements, it is also possible to use only a `.panel` wrapper.

Markup:
<div class="panel">
  <p>Lorem dizzle dolizzle sit amizzle, mammasay mammasa mamma oo sa adipiscing crunk. Nullizzle sapizzle velit, owned volutpat, suscipit sure, for sure vizzle, arcu. Pellentesque egizzle tortor. Sed erizzle.</p>
</div>

Styleguide 3.6.2
*/
/*
Panel layout style with simplified markup

Not quite as simple as the previous example, but still uses simple block elements and no header, so `.panel__header` and `.panel__content` are not necessary.

Markup:
<div class="panel">
      <p>Lorem dizzle dolizzle sit amizzle, mammasay mammasa mamma oo sa adipiscing crunk. Nullizzle sapizzle velit, owned volutpat, suscipit sure, for sure vizzle, arcu. Pellentesque egizzle tortor. Sed erizzle.</p>
      <p class="button-row text--right">
          <button type="button" class="button button--secondary">Cancel</button>
          <button type="button" class="button button--primary">Confirm</button>
      </p>
      <p>Fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo urna ut nisl. Sed quis arcu. Bizzle stuff, ipsizzle malesuada malesuada shizzle my nizzle crocodizzle, funky fresh purizzle break yo neck, yall funky fresh, fizzle shut the shizzle up ghetto nulla izzle sizzle. Vivamizzle ullamcorpizzle, tortor ma nizzle varizzle bizzle, nibh nunc ultricizzle turpis, in dawg leo elit tellivizzle dawg.</p>
      <p class="button-row text--right">
          <button type="button" class="button button--secondary">Cancel</button>
          <button type="button" class="button button--primary">Confirm</button>
      </p>
</div>

Styleguide 3.6.3
*/
/*
Panel layout style, poor man's header

Here, we have put the `.panel__header` class directly on the `<h2>` element as it is simple enough that wrapper classes are not needed.

Markup:
<div class="panel">
    <h2 class="panel__header">h2 - Panel header</h2>
    <div class="panel__content">
      <p>Fo shizzle mah nizzle fo rizzle, mah home g-dizzle yo urna ut nisl. Sed quis arcu. Bizzle stuff, ipsizzle malesuada malesuada shizzle my nizzle crocodizzle, funky fresh purizzle break yo neck, yall funky fresh, fizzle shut the shizzle up ghetto nulla izzle sizzle. Vivamizzle ullamcorpizzle, tortor ma nizzle varizzle bizzle, nibh nunc ultricizzle turpis, in dawg leo elit tellivizzle dawg. Mauris we gonna chung, orci vizzle shizzlin dizzle yo, sem augue luctizzle shiz, at things enim fo shizzle izzle for sure.</p>
      <p class="button-row text--right">
          <button type="button" class="button button--secondary">Cancel</button>
          <button type="button" class="button button--primary">Confirm</button>
      </p>
    </div>
</div>

Styleguide 3.6.4
*/
/*
Panel layout style with incorrect markup structure

Markup:
<div class="panel">
    <h2 class="panel__header">h2 - Panel header</h2>
    <div class="panel__content"><p>This is incorrect markup structure because the two inline buttons at the bottom are not wrapped together inside a parent element.
      <button type="button" class="button button--secondary">Cancel</button>
      <button type="button" class="button button--primary">Confirm</button>
    </div>
  </div>
</div>

Styleguide 3.6.5
*/
/*
Table within panel

Section 10 of the Styleguide contains code snippets that are used to insert into other styleguide sections, but by not including the Styleguide 10 section, these 10.n sections are visually hidden from the generated styleguide output since they are not useful on their own. If changing these secion numbers, take extra care to update everywhere they are used, also.

Markup:
<table>
  <thead>
    <tr class="expand-row__preview--header text--smallcaps">
      <th>Header col 1</th>
      <th>Header col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td col 1</td>
      <td>td col 2</td>
    </tr>
    <tr>
      <td>td col 1</td>
      <td>td col 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer col 1</td>
      <td>Footer col 2</td>
    </tr>
  </tfoot>
</table>

Styleguide 10.1
*/
/*
Panel layout with settings cog

Markup:
<div class="panel">
    <div class="panel__header">
      <h2>h2 - Panel header</h2>
<svg class="icon" focusable="false">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/icons/icon-pack.svg#settingsCog"></use>
</svg>
    </div>
    <div class="panel__content">
      <sg-insert>10.1</sg-insert>
    </div>
</div>

Styleguide 3.6.7
*/
/*
Panel layout with button (tertiary)

Markup:
<div class="panel">
    <div class="panel__header"><h2 class="">Messages</h2><button type="button" class="button button--tertiary">See all</button></div>
    <div class="panel__content">
      <sg-insert>10.1</sg-insert>
    </div>
</div>

Styleguide 3.6.8
*/
.fluid-container {
  box-sizing: content-box;
  min-width: 61.25rem;
  max-width: 105rem;
  padding: 0 1.25%;
  margin: 0 auto; }

.fluid-container > * {
  box-sizing: border-box; }

.fluid-container-background {
  min-width: 62.9375rem;
  width: 100%; }

.row.debug .column, .row.debug .columns,
.row.debug .columns {
  position: relative; }
  .row.debug .column:before, .row.debug .columns:before,
  .row.debug .columns:before {
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.05);
    height: 100%;
    box-shadow: 0.75rem 0 0 rgba(255, 255, 255, 0.25) inset, -0.75rem 0 0 rgba(255, 255, 255, 0.25) inset;
    left: 0;
    pointer-events: none; }

.group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start; }
  .group > * {
    margin: 0; }

.group--vertical {
  -ms-flex-direction: column;
      flex-direction: column; }
  .group--vertical > * + * {
    margin-top: 0.75rem; }

.group--horizontal {
  -ms-flex-direction: row;
      flex-direction: row; }
  .group--horizontal > * + * {
    margin-left: 0.75rem; }

.panel {
  border: 1px solid #e6e4e3;
  padding: 1.5rem;
  margin: 0 0 1.5rem 0;
  background: #ffffff; }
  .panel__header {
    padding-bottom: 1.5rem;
    margin: 0; }
    .panel__header > * {
      margin: 0; }
  .panel__content {
    margin: 0; }
    .panel__content > *:first-child {
      margin-top: 0; }
    .panel__content > *:last-child {
      margin-bottom: 0; }
      .panel__content > *:last-child > * {
        margin-bottom: 0; }
  .panel > *:first-child {
    margin-top: 0; }
  .panel > *:last-child {
    margin-bottom: 0; }
    .panel > *:last-child:not(.panel__content) > * {
      margin-bottom: 0; }
  .panel__header {
    position: relative; }
    .panel__header > .button,
    .panel__header > .icon {
      position: absolute;
      right: 0;
      top: 0; }

/**
Components

Styleguide 2
*/
/**
Primary buttons

Primary is the default button style.

.button - Primary button [default], is required to apply styles common to all buttons, will default to primary button style if no other style is given
.button.button--primary - Primary button [default], use for main actions in a page
.button.button--primary:hover - Primary button, hover state
.button.button--primary.disabled - Primary button, disabled state. Automatically applied to buttons with the <code>disabled</code> attribute.
.button.button--primary.button--large - Primary button, large

Markup: _button.html

Styleguide 2.1.1
*/
/**
Secondary style buttons

Use for links and secondary actions.

.button.button--secondary - Secondary button
.button.button--secondary:hover - Secondary button, hover state
.button.button--secondary.disabled - Secondary button, disabled state. Automatically applied to buttons with the <code>disabled</code> attribute.
.button.button--secondary.button--large - Secondary button, large

Markup: _button.html

Styleguide 2.1.3
*/
/**
Tertiary buttons

Use for supplementary actions on the view, as rarely as possible.

.button.button--tertiary - Tertiary button
.button.button--tertiary:hover - Tertiary button, hover state
.button.button--tertiary.disabled - Tertiary button, disabled state. Automatically applied to buttons with the <code>disabled</code> attribute.
.button.button--tertiary.button--large - Tertiary button, large

Markup: _button.html

Styleguide 2.1.4
*/
/**
Buttons with icons

With normal-sized buttons use the small <a href="#/section/1.5.2">icon size</a>, preferably <a href="#/section/1.5.5">small svg icons</a> only. With large buttons you can use <a href="#/section/1.5.2">icon sizes</a> up to medium (default), preferably <a href="#/section/1.5.4">standard-sized svg icons</a> only.

You can have at most two icons inside a button, one per side. If you have two icons, use both of the modifier classes.

.button--icon-left - Icon inside button on the left side
.button--icon-right - Icon inside button on the right side

Markup: _button--icon.html

Styleguide 2.1.5
*/
/**
Buttons with icons only

Each row in the examples below demonstrates a button style applied to buttons with ```.icon .icon--small```, ```.icon .icon--smallish```, ```.icon``` and a disabled button. Hover and focus styles behave the same as with text buttons.

.button--primary.button--icon - Primary button with icon only
.button--secondary.button--icon - Secondary button with icon only
.button--tertiary.button--icon - Tertiary button with icon only

Markup:
<button type="button" class="button {$modifiers}">
  <svg class="icon icon--small" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#arrow_up_sml"></use></svg>
</button>
<button type="button" class="button {$modifiers}">
  <svg class="icon icon--smallish" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#calendar"></use></svg>
</button>
<button type="button" class="button {$modifiers}">
  <svg class="icon" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#home"></use></svg>
</button>
<button type="button" class="button {$modifiers}" disabled>
  <svg class="icon" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#chatBubble"></use></svg>
</button>

Styleguide 2.1.5.1
*/
/*
Button Rows

Below are examples of how to create grouped rows of buttons inside of other wrapper elements. There are no additional styles involved, so you can use any wrapper. Use the .button--large class on buttons within for larger style.
- Use helper classes on the wrapper if you need, e.g. ```.text--center```.
- The default order of the buttons should place positive (confirm, primary) button on the right and negative (cancel, secondary) button on the left side.

.button       - Normal button group
.button.button--large - Large button group

Markup:
<p class="text--center">
  <button type="button" class="{$modifiers} button--primary">button 1</button>
  <button type="button" class="{$modifiers} button--primary">button 2</button>
  <button type="button" class="{$modifiers} button--primary">button 3</button>
</p>
<p class="text--center">
  <button type="button" class="{$modifiers} button--secondary">Cancel</button>
  <button type="button" class="{$modifiers} button--primary">Confirm</button>
</p>
<p class="text--center">
  <button type="button" class="{$modifiers} button--primary">Action 1</button>
  <button type="button" class="{$modifiers} button--primary">Action 2</button>
  <button type="button" class="{$modifiers} button--primary disabled">disabled</button>
</p>

Styleguide 2.1.6
*/
/*
Buttons in container

Buttons should be located on the right side of a container, e.g. in notification bar.

Markup:
<div class="container row align-middle">
  <div class="column">
    TextLabel (body style)
  </div>
  <div class="column shrink">
    <button type="button" class="button button--secondary">Secondary</button>
    <button type="button" class="button button--primary">Primary</button>
  </div>
</div>

Styleguide 2.1.7
*/
/*
Safe zone

Buttons should have a minimum clear space of 0.75rem ($nordea-safe-zone) around them. This is a UI design guideline and its implementation may vary. The safe zone is not a simple, fixed margin around a button, but the clear space of other elements may provide it. For example if a container may provide enough padding so a button never touches the container border, or buttons may be center-aligned in a row that has a minimum width so the buttons always have enough clear space.

Markup:
<div class="float-left styleguide__color-box--nordea-pink styleguide__safe-zone">
  <button type="button" class="button button--primary">Button</button>
</div>

Styleguide 2.1.8
*/
/*
Button Groups

Use the ```.button-group``` class to group buttons together visually. This can be used in combination with the ```.button-multiselect``` component.

.button-group - Default button group

Markup:
<div class="{$modifiers}">
  <button type="button" class="button">button 1</button>
  <button type="button" class="button">button 2</button>
  <button type="button" class="button">button 3</button>
</div>
<div class="{$modifiers}">
  <button type="button" class="button button--tertiary">button 1</button>
  <button type="button" class="button button--tertiary">button 2</button>
  <button type="button" class="button button--tertiary">button 3</button>
</div>

Styleguide 2.2
*/
/*
Multiselect

<p>Usage of the multiselect component is discouraged, it may be removed in the future.</p>

<p>This collection of styles changes the look and feel of standard checkboxes and radio buttons to button-like. Please see the markup section for details.</p>
<p>To really use the styles, you need Javascript to dynamically set the <code>is-active</code> class on labels of the checked inputs. See AngularJS examples <a href="../../index.html#/home#multiselect">here</a>.</p>

Markup: _button-multiselect.html

Styleguide 2.3
*/
/**
Labels

Below are examples of how to use labels. Use ```.label--secondary``` for smaller, secondary text or table headers, optionally in conjunction with ```.text--smallcaps``` to make it easier to read and create typographic contrast between different text styles. Secondary labels have $x-dark-gray color by default.

.label                  - Default label
.label.label--primary   - Primary label
.label.label--secondary - Secondary label
.label.label--secondary.text--smallcaps - Secondary label, capitalized
.label.label--xlarge    - Extra large label

Markup: <span class="{$modifiers}">.{$modifiers} text label</span>

Styleguide 2.8
*/
/**
Amount

Amount labels are created using <span> elements to separate the parts of the integers and decimals.

.amount                   - Default amount label
.amount.amount--primary   - Primary amount label
.amount.amount--secondary - Secondary amount label
.amount.amount--plain     - Amount with the same font style as in its container
.amount.positive          - Positive amount label
.amount.negative          - Negative amount label

Markup:
<span class="{$modifiers}" aria-label="1234.56">
  <span class="amount__integers" aria-hidden="true">1234</span><span class="amount__decimal-symbol" aria-hidden="true">,</span><span class="amount__decimals" aria-hidden="true">56</span>
</span>

Styleguide 2.9
*/
/**
Currency amount

Add the currency symbol in a `.amount__decimals` element as shown in the markup example.

.amount                   - Default amount label
.amount.amount--primary   - Primary amount label
.amount.amount--secondary - Secondary amount label
.amount.amount--plain     - Amount with the same font style as in its container
.amount.positive          - Positive amount label
.amount.negative          - Negative amount label

Markup:
<span class="{$modifiers}" aria-label="0.10 USD">
  <span class="amount__integers" aria-hidden="true">0</span><span class="amount__decimal-symbol" aria-hidden="true">,</span><span class="amount__decimals" aria-hidden="true">10</span><span class="amount__currency" aria-hidden="true">&nbsp;USD</span>
</span>

Styleguide 2.9.1
*/
/*
Amount number spacing

When using the `.amount` style, numbers are rendered monospaced.

.dummy  - No style
.amount - Amount

Markup: _table-of-numbers.html

Styleguide 2.9.2
*/
/**
Dividers

Dividers between chunks of content. Elements such as labels and buttons that are displayed with dividers do not take any additional space of their own or change the dimensions or margins of the divider, they are simply overlaid around the divider. Block modifier classnames for these elements specified in examples below do not do anything by themselves, they are merely to identify divider blocks that contain additional elements.

Markup:
<sg-insert>1.4.4</sg-insert>
<sg-insert>2.10.1-1</sg-insert>
<sg-insert>1.4.4</sg-insert>
<sg-insert>2.10.2-3</sg-insert>
<sg-insert>1.4.4</sg-insert>
<sg-insert>2.10.4</sg-insert>
<sg-insert>1.4.4</sg-insert>

Styleguide 2.10
*/
/**
Simple divider

.divider - Simple divider line

Markup: <div class="{$modifiers}"></div>

Styleguide 2.10.1
*/
/**
Divider with section label (example)

See Label section for more information. Use helper classes ```.text-left``` and ```.text-right``` to control alignment of the label.

.divider - Container for a label within a divider
.divider.text-left - Container for a left-aligned label within a divider
.divider.text-right - Container for a right-aligned label within a divider

Markup:
<div class="{$modifiers}">
  <sg-insert>2.8-1</sg-insert>
</div>

Styleguide 2.10.2
*/
/**
Divider with button (example)

Buttons within dividers will be automatically adjusted to be inline with the divider.

Markup:
<div class="divider">
  <sg-insert>2.1.1-3</sg-insert>
</div>

Styleguide 2.10.3
*/
/**
Divider with button group (example)

Add additional buttons within the divider to create a button row. See button rows for more information.

Markup:
<div class="divider">
  <sg-insert>2.1.1-2</sg-insert>
</div>

Styleguide 2.10.4
*/
/*
 Badges

 The badge is a basic component that displays a number. It's useful for calling out a number of unread items.
 See also <a href="http://foundation.zurb.com/sites/docs/badge.html">Foundation for Sites badge</a>.

 .badge - Default badge
 .badge.badge--primary - Primary badge
 .badge.badge--secondary - Secondary badge
 .badge.badge--info - Info badge
 .badge.badge--success - Success badge
 .badge.badge--warning - Warning badge
 .badge.badge--alert - Alert badge

 Markup:
 <span class="{$modifiers}">1 <span class="show-for-sr">unread messages</span></span>

 Styleguide 2.11
*/
/*
Callouts (notifications)

This section describes different types callouts, also known as notifications. They are based on the <a href="http://foundation.zurb.com/sites/docs/callout.html">Foundation for Sites callout</a> style.

For accessibility, you may need to set the appropriate role on the callout element:

* `role="alert"`: When the callout appears dynamically (e.g. error message), or it is static but contains an alert the user should be aware of.
* `role="alertdialog"`: Like `role="alert"` but additionally the callout contains control elements (like navigation links).
* No role: When the callout static page content and it is not something that the user needs to be especially aware of (the callout is for decorational purposes).

With `role="alert"` or `role="alertdialog"` a screen reader reads the content to the user when entering the page or when the callout appears.

Styleguide 2.7
*/
/*
Basic callout

This is a basic callout. The modifier styles are available for all types of callouts.

.callout - No background color
.callout.callout--primary - Primary
.callout.callout--secondary - Secondary
.callout.callout--info - Info
.callout.callout--success - Success
.callout.callout--warning - Warning
.callout.callout--alert - Alert

Markup:
<div class="{$modifiers}">This is a basic callout</div>

Styleguide 2.7.1
*/
/*
Closeable callout

The closeable callout uses <a href="#/section/2.4">close button</a>.

Markup:
<div class="callout callout--success" data-closable>
  This is a closeable callout
  <button class="close-button" aria-label="Close alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Styleguide 2.7.1.1
*/
/*
Contextual notifications

Contextual notifications are meant to be used within the main content, close their context. Note the use of Foundation grid classes in the markup.

Only the following colors are approved by UI designers for contextual notifications.

.callout.callout--contextual.callout--error - Error
.callout.callout--contextual.callout--warning - Warning
.callout.callout--contextual.callout--success - Success

Markup:
<div class="{$modifiers}" role="alert">
    <div class="row align-middle">
        <div class="columns callout__content">
          <strong>{$modifiers}:</strong> Notification text
        </div>
    </div>
</div>

Styleguide 2.7.2
*/
/*
Contextual notifications with icon and flat (secondary) button

Contextual callouts with icon and button are created using Foundation grid classes. The button and icon should be in their own columns as specified in the markup below, use the <code>.button--secondary</code> style.

.callout.callout--contextual.callout--error - Error
.callout.callout--contextual.callout--warning - Warning
.callout.callout--contextual.callout--success - Success

Markup:
<div class="{$modifiers}" role="alertdialog">
    <div class="row align-middle">
        <div class="columns shrink callout__icon">
            <svg class="icon icon--medium"><use xlink:href="/build/icons/icon-pack.svg#ok"></use></svg>
        </div>
        <div class="columns callout__content">
            <strong>{$modifiers}:</strong> Notification text
        </div>
        <div class="columns shrink callout__button">
            <button type="button" class="button button--secondary">
                .button--secondary
            </button>
        </div>
    </div>
</div>

Styleguide 2.7.2.1
*/
/*
Contextual notifications with icon and close button

Contextual callouts with icon and/or close button can be created using Foundation grid classes. The icon and close button should be in their own column as specified in the markup below.

.callout.callout--contextual.callout--error - Error
.callout.callout--contextual.callout--warning - Warning
.callout.callout--contextual.callout--success - Success

Markup:
<div class="{$modifiers}" role="alertdialog" data-closable>
    <div class="row align-middle">
        <div class="columns shrink callout__icon">
            <svg class="icon icon--medium"><use xlink:href="/build/icons/icon-pack.svg#ok"></use></svg>
        </div>
        <div class="columns callout__content">
            <strong>{$modifiers}:</strong> Notification text on two lines<br/>This is the second line.
        </div>
        <div class="columns shrink callout__button">
            <button type="button" class="close-button" aria-label="Close" data-close>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>

Styleguide 2.7.2.2
*/
/*
Top notifications

Top notifications are meant to be displayed at the top of the page and used for important notifications and notifications for which there is no context on the page.

Using Foundation grid classes, make sure to reserve 1 column on both left and right sides for navigation icons, <em>regardless of whether or not navigation icons are actually present</em>. (See below)

Only the following colors are approved by UI designers for contextual notifications.

.callout.callout--top.callout--error - Error
.callout.callout--top.callout--warning - Warning
.callout.callout--top.callout--success - Success
.callout.callout--top.callout--info - Info

Markup:
<div class="{$modifiers}" role="alert">
    <div class="row align-middle">
        <div class="small-1 columns callout__nav callout__nav--left">1 col</div>
        <div class="columns callout__content"><strong>{$modifiers}:</strong> Notification text</div>
        <div class="small-1 columns callout__button callout__nav callout__nav--right">1 col</div>
    </div>
</div>

Styleguide 2.7.3
*/
/*
Top notifications with navigation, icon, close button and/or tertiary button

Top callouts with navigation, icon, button and/or close button can be created using Foundation grid classes. Each of these 3 element types should be in it's own column as specified in the markup below. If using a button, use the <code>.button--tertiary</code> style.

.callout.callout--top.callout--error - Error
.callout.callout--top.callout--warning - Warning
.callout.callout--top.callout--success - Success
.callout.callout--top.callout--info - Info

Markup:
<div class="{$modifiers}" role="alertdialog" data-closable>
    <div class="row align-middle">
        <div class="columns small-1 callout__nav callout__nav--left">
          <svg class="icon icon--medium"><use xlink:href="/build/icons/icon-pack.svg#summerhomeBoat"></use></svg>
        </div>
        <div class="columns shrink callout__icon">
            <svg class="icon icon--medium"><use xlink:href="/build/icons/icon-pack.svg#ok"></use></svg>
        </div>
        <div class="columns callout__content">
            <strong>{$modifiers}:</strong> Notification text
        </div>
        <div class="columns shrink callout__button">
            <button type="button" class="button button--tertiary">
                .button--tertiary
            </button>
        </div>
        <div class="small-1 columns callout__button  callout__nav callout__nav--right">
            <button type="button" class="close-button" aria-label="Close" data-close>
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </div>
</div>

Styleguide 2.7.3.1
*/
/*
Top notifications that span the scrollable width (usage with .fluid-container)

In the example above, the top notification spans the visible width. If you are using the <a href="#/section/3.2">.fluid-container</a> style to set a minimum and maximum width to the content, you will need to make top notifications span the entire scrollable width. See the markup below for how this is done.

This example is best viewed by opening it in full screen.

Markup:
<div class="callout callout--top callout--fluid-container-background callout--success" role="alertdialog">
    <div class="fluid-container">
        <div class="row align-middle">
            <div class="columns small-1 callout__nav callout__nav--left">
              <svg class="icon icon--medium"><use xlink:href="/build/icons/icon-pack.svg#summerhomeBoat"></use></svg>
            </div>
            <div class="columns shrink callout__icon">
                <svg class="icon icon--medium"><use xlink:href="/build/icons/icon-pack.svg#ok"></use></svg>
            </div>
            <div class="columns callout__content">
                Content
            </div>
            <div class="columns shrink callout__button">
                <button type="button" class="button button--tertiary">
                    .button--tertiary
                </button>
            </div>
            <div class="small-1 columns callout__button  callout__nav callout__nav--right">
                <button type="button" class="close-button" aria-label="Close" data-close>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </div>
</div>

Styleguide 2.7.3.2
*/
/**
Spike box

Replace the following variables with wanted values:
$spikebox-width - will set the width of the div without the spike
$spikebox-bg-color - will set the color
$spikebox-left - will set the spike to point to left if value is > 0
$spikebox-right - will set the spike point to right if value is > 0: Either $spikebox-left or $spikebox-right is required to have value 0.
$spikebox-height - will set the height of the spikebox: In order to calculate the spike size correctly give the $spikebox-height value as rems.

<pre>
@include nordea-spikebox ($spikebox-width, $spikebox-bg-color, $spikebox-left, $spikebox-right, $spikebox-height);
</pre>

<h3>Examples</h3>

.spikebox--default - using default values
.spikebox--left - yellow with spike to the left
.spikebox--right - blue with spike to the right
.spikebox--large - large version

Markup:
<div class="{$modifiers}"></div>

Styleguide 2.12
*/
.spikebox--default {
  background-color: #fbc557;
  position: relative;
  height: 4rem;
  width: 100%; }
  .spikebox--default::after {
    border-color: transparent #fbc557;
    border-style: solid;
    border-width: 2rem 0 2rem 1rem;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -1rem; }

.spikebox--left {
  background-color: #fbc557;
  position: relative;
  height: 4rem;
  width: 100%; }
  .spikebox--left::after {
    border-color: transparent #fbc557;
    border-style: solid;
    border-width: 2rem 1rem 2rem 0;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -1rem; }

.spikebox--right {
  background-color: #54abdb;
  position: relative;
  height: 4rem;
  width: 100%; }
  .spikebox--right::after {
    border-color: transparent #54abdb;
    border-style: solid;
    border-width: 2rem 0 2rem 1rem;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -1rem; }

.spikebox--large {
  background-color: #fc6161;
  position: relative;
  height: 14rem;
  width: 100%; }
  .spikebox--large::after {
    border-color: transparent #fc6161;
    border-style: solid;
    border-width: 7rem 0 7rem 1rem;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -1rem; }

/*
Lists

These block list styles are the same styles that should also be used for <a ui-sref="home#mdSelect">md-select</a> and <a ui-sref="home#mdMenu">md-menu</a>. See "Show markup" below for how to use `.block-list` and `.block-list-item` classes.

Based on https://confluence.oneadr.net:8443/display/DBNS/6.+Lists+and+tables?preview=/124225308/125013341/lists_02.pdf , this may still be a work in progress, as block lists for different components are currently each defining these styles separately.

Markup:
<div class="row">
  <div class="column small-4">
    <div class="panel">
      <ul class="block-list">
        <li class="block-list-item">
          <div class="row align-bottom">
            <div class="column">Body</div>
            <div class="amount column shrink" aria-label="1234.56">
              <span class="amount__integers" aria-hidden="true">1234</span><span class="amount__decimal-symbol" aria-hidden="true">,</span><span class="amount__decimals" aria-hidden="true">56</span>
            </div>
          </div>
        </li>
        <li class="block-list-item">
          <div>Body</div>
          <div class="label label--secondary">Small label `.label--secondary`</div>
        </li>
        <li class="block-list-item">
          <div>Body</div>
          <div class="label label--secondary">Small label</div>
          <div class="label label--secondary">Small label</div>
        </li>
        <li class="block-list-item">
          <div>Body</div>
          <div class="label label--secondary float-left">Small label</div>
          <div class="label label--secondary float-right">Small label</div>
        </li>
      </ul>
    </div>
  </div>
</div>

Styleguide 2.13
*/
/*
Tables

Markup: placeholder for tables

Styleguide 2.14
*/
.button {
  display: inline-block;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 0.4375rem 1.75rem;
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  [data-whatinput='mouse'] .button {
    outline: 0; }
  .button:hover, .button:focus {
    text-decoration: none; }
  .button::-moz-focus-inner {
    border: 0; }
  .button--large {
    padding: 0.6875rem 2.5rem;
    font-size: 1.25rem; }
  .button + .button {
    margin-left: 0.75rem; }
  .button .icon {
    color: currentColor;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    top: 0; }
  .button--icon {
    padding-left: 0.4375rem;
    padding-right: 0.4375rem; }
  .button--icon-right, .button--icon-left {
    padding-left: 3.75rem;
    padding-right: 3.75rem; }
    .button--icon-right .icon, .button--icon-left .icon {
      position: absolute;
      height: 100%; }
    .button--icon-right.button--large, .button--icon-left.button--large {
      padding-left: 4.5rem;
      padding-right: 4.5rem; }
  .button--icon-right .icon:last-of-type {
    right: 1rem; }
  .button--icon-left .icon:first-of-type {
    left: 1rem; }
  .button, .button--primary {
    background-color: #0000ff;
    color: #ffffff ;
    border-color: #0000ff ; }
  .button--secondary {
    background-color: #ffffff;
    color: #0000ff ;
    border-color: #0000ff ; }
  .button--tertiary {
    background-color: transparent;
    color: #0000ff ;
    border-color: transparent ; }
  .button:hover, .button:focus {
    background-color: #e5f2ff !important;
    color: #0000ff  !important;
    border-color: #e5f2ff  !important; }
  .button.disabled, .button[disabled] {
    pointer-events: none; }
    .button.disabled, .button.disabled.button--primary, .button[disabled], .button[disabled].button--primary {
      background-color: #8b8a8d;
      color: #fafafa ;
      border-color: #8b8a8d ; }
    .button.disabled.button--secondary, .button[disabled].button--secondary {
      background-color: #fafafa;
      color: #8b8a8d ;
      border-color: #8b8a8d ; }
    .button.disabled.button--tertiary, .button[disabled].button--tertiary {
      background-color: transparent;
      color: #8b8a8d ;
      border-color: transparent ; }
  .colors-negative .button, .colors-negative .button--primary, .button.colors-negative, .button.colors-negative--primary {
    background-color: #fbd9ca;
    color: #0000a0 ;
    border-color: #fbd9ca ; }
  .colors-negative .button--secondary, .button.colors-negative--secondary {
    background-color: #0000a0;
    color: #fbd9ca ;
    border-color: #fbd9ca ; }
  .colors-negative .button--tertiary, .button.colors-negative--tertiary {
    background-color: transparent;
    color: #fbd9ca ;
    border-color: transparent ; }
  .colors-negative .button.disabled, .colors-negative .button.disabled.button--primary, .colors-negative .button[disabled], .colors-negative .button[disabled].button--primary, .button.colors-negative.disabled, .button.colors-negative.disabled.button--primary, .button.colors-negative[disabled], .button.colors-negative[disabled].button--primary {
    background-color: #474748;
    color: #0000a0 ;
    border-color: #474748 ; }
  .colors-negative .button.disabled.button--secondary, .colors-negative .button[disabled].button--secondary, .button.colors-negative.disabled.button--secondary, .button.colors-negative[disabled].button--secondary {
    background-color: #0000a0;
    color: #8b8a8d ;
    border-color: #8b8a8d ; }
  .colors-negative .button.disabled.button--tertiary, .colors-negative .button[disabled].button--tertiary, .button.colors-negative.disabled.button--tertiary, .button.colors-negative[disabled].button--tertiary {
    background-color: transparent;
    color: #8b8a8d ;
    border-color: transparent ; }

.button-group .button {
  margin: 0; }
  .button-group .button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .button-group .button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }

.button-multiselect input[type="radio"], .button-multiselect input[type="checkbox"] {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); }

.button-multiselect .button {
  background-color: transparent;
  border: 1px solid #0000ff;
  color: #0000ff; }
  .button-multiselect .button:hover {
    background-color: #ffffff; }
  .button-multiselect .button.is-active, .button-multiselect .button.is-selected {
    background-color: #0000ff;
    color: #ffffff; }

.colors-negative .button-multiselect .button, .button-multiselect.colors-negative .button {
  border-color: #fbd9ca;
  color: #fbd9ca; }
  .colors-negative .button-multiselect .button:hover, .button-multiselect.colors-negative .button:hover {
    color: #0000a0; }
  .colors-negative .button-multiselect .button.is-active, .colors-negative .button-multiselect .button.is-selected, .button-multiselect.colors-negative .button.is-active, .button-multiselect.colors-negative .button.is-selected {
    background-color: #fbd9ca;
    color: #0000a0; }

.label {
  font-size: 1rem;
  line-height: 1.5; }

.label--primary {
  font-size: 1.25rem; }

.label--secondary {
  font-size: 0.8125rem;
  color: #474748; }

.label--xlarge {
  font-size: 3rem; }

.amount {
  white-space: nowrap;
  font-feature-settings: 'tnum'; }
  .amount .amount__integers {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: bold; }
  .amount.amount--secondary .amount__integers {
    font-size: 1rem; }
  .amount.amount--primary {
    font-size: 1.25rem;
    line-height: 1.25rem;
    color: #000000; }
    .amount.amount--primary .amount__integers {
      font-size: 3rem;
      line-height: 3rem; }
  .amount.amount--plain {
    font-size: inherit;
    line-height: inherit; }
    .amount.amount--plain .amount__integers {
      font-size: inherit;
      line-height: inherit;
      font-weight: inherit; }
  .amount.positive {
    color: #006060; }
  .amount.negative {
    color: #b00000; }

.colors-negative .amount.amount--primary, .colors-negative.amount.amount--primary {
  color: #ffffff; }

.colors-negative .amount.positive, .colors-negative.amount.positive {
  color: #40bfa3; }

.colors-negative .amount.negative, .colors-negative.amount.negative {
  color: #fc6161; }

.divider {
  border-bottom: 1px solid #e6e4e3;
  height: 0;
  margin-top: 2.75rem;
  margin-bottom: 2.25rem;
  text-align: center; }
  .divider::before, .divider::after {
    content: ' ';
    display: table;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -ms-flex-order: 1;
        order: 1; }
  .divider::after {
    clear: both; }
  .divider .label {
    display: block;
    position: relative;
    margin-top: -1.25rem; }
  .divider .button, .divider .md-button {
    position: relative;
    top: -0.9375rem; }
    .divider .button.large, .divider .button--large, .divider .md-button.large, .divider .md-button--large {
      top: -1.3125rem; }

.badge {
  display: inline-block;
  padding: 0.3em;
  min-width: 2.1em;
  font-size: 0.6rem;
  text-align: center;
  border-radius: 50%;
  line-height: 1.5;
  background: #3399ff;
  color: #ffffff;
  vertical-align: middle; }
  .badge.badge--primary, .badge.primary {
    background: #0000a0;
    color: #ffffff; }
  .badge.badge--secondary, .badge.secondary {
    background: #3399ff;
    color: #0000a0; }
  .badge.badge--success, .badge.success {
    background: #40bfa3;
    color: #000000; }
  .badge.badge--info, .badge.info {
    background: #3399ff;
    color: #ffffff; }
  .badge.badge--warning, .badge.warning {
    background: #ffe183;
    color: #000000; }
  .badge.badge--alert, .badge.alert {
    background: #fc6161;
    color: #ffffff; }
  .badge.badge--error, .badge.error {
    background: #fc6161;
    color: #ffffff; }

.close-button:hover {
  text-decoration: none; }

.callout {
  margin: 0;
  padding: 1.5rem 0.75rem;
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: 0;
  position: relative;
  color: #0a0a0a;
  border: 0;
  font-size: 1rem;
  line-height: 1; }
  .callout > :first-child {
    margin-top: 0; }
  .callout > :last-child {
    margin-bottom: 0; }
  .callout--primary {
    background-color: #0000a0; }
    .callout--primary,
    .callout--primary .icon,
    .callout--primary button:not(.button--secondary) {
      color: #ffffff;
      border-color: #ffffff; }
    .callout--primary .close-button:hover,
    [data-whatinput=keyboard] .callout--primary .close-button:focus {
      color: #e5f2ff; }
  .callout--secondary {
    background-color: #3399ff; }
    .callout--secondary,
    .callout--secondary .icon,
    .callout--secondary button:not(.button--secondary) {
      color: #0000a0;
      border-color: #0000a0; }
    .callout--secondary .close-button:hover,
    [data-whatinput=keyboard] .callout--secondary .close-button:focus {
      color: #e5f2ff; }
  .callout--success {
    background-color: #40bfa3; }
    .callout--success,
    .callout--success .icon,
    .callout--success button:not(.button--secondary) {
      color: #000000;
      border-color: #000000; }
    .callout--success .close-button:hover,
    [data-whatinput=keyboard] .callout--success .close-button:focus {
      color: #e5f2ff; }
  .callout--info {
    background-color: #3399ff; }
    .callout--info,
    .callout--info .icon,
    .callout--info button:not(.button--secondary) {
      color: #ffffff;
      border-color: #ffffff; }
    .callout--info .close-button:hover,
    [data-whatinput=keyboard] .callout--info .close-button:focus {
      color: #e5f2ff; }
  .callout--warning {
    background-color: #ffe183; }
    .callout--warning,
    .callout--warning .icon,
    .callout--warning button:not(.button--secondary) {
      color: #000000;
      border-color: #000000; }
    .callout--warning .close-button:hover,
    [data-whatinput=keyboard] .callout--warning .close-button:focus {
      color: #e5f2ff; }
  .callout--alert {
    background-color: #fc6161; }
    .callout--alert,
    .callout--alert .icon,
    .callout--alert button:not(.button--secondary) {
      color: #ffffff;
      border-color: #ffffff; }
    .callout--alert .close-button:hover,
    [data-whatinput=keyboard] .callout--alert .close-button:focus {
      color: #e5f2ff; }
  .callout--error {
    background-color: #fc6161; }
    .callout--error,
    .callout--error .icon,
    .callout--error button:not(.button--secondary) {
      color: #ffffff;
      border-color: #ffffff; }
    .callout--error .close-button:hover,
    [data-whatinput=keyboard] .callout--error .close-button:focus {
      color: #e5f2ff; }
  .callout .button.button--tertiary {
    border-color: transparent; }
  .callout.default {
    background-color: #bfd994; }
  .callout.accounts {
    background-color: #40bfa3; }
  .callout.cards {
    background-color: #a6d6bd; }
  .callout.cards-credit {
    background-color: #a6d6bd; }
  .callout.cards-debit {
    background-color: #a6d6bd; }
  .callout.cards-combined {
    background-color: #a6d6bd; }
  .callout.is-inactive {
    background-color: #ffe183; }
  .callout.is-blocked {
    background-color: #fc6161; }
  .callout.is-new {
    background-color: #40bfa3; }
  .callout.status-inactive {
    background-color: #fbd9ca; }
  .callout.status-blocked {
    background-color: #fbd9ca; }
  .callout.loans {
    background-color: #a6d6bd; }
  .callout.loans-credit {
    background-color: #a6d6bd; }
  .callout.row,
  .callout .row {
    max-width: initial; }

.callout__button button,
.callout__button .button {
  margin: 0; }

.callout__button .close-button {
  position: static;
  line-height: 1em; }

.callout__nav--right {
  text-align: right; }

.callout--fluid-container-background {
  min-width: 62.9375rem;
  width: 100%;
  padding-left: 0;
  padding-right: 0; }

.menu.vertical > li > a, .menu.vertical > li > .link {
  -ms-flex-align: center;
      align-items: center; }

.menu-text {
  font-weight: normal; }

.block-list {
  list-style: none;
  margin-left: 0; }
  .block-list .block-list-item, .block-list > li,
  .block-list > * {
    padding: 0.75rem 1.5rem; }
    .block-list .block-list-item::before,
    .block-list > ::before, .block-list .block-list-item::after,
    .block-list > ::after {
      content: ' ';
      display: table;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
      -ms-flex-order: 1;
          order: 1; }
    .block-list .block-list-item::after,
    .block-list > ::after {
      clear: both; }
    .block-list .block-list-item .column > *, .block-list > li .column > *,
    .block-list > * .column > *, .block-list .block-list-item .columns > *, .block-list > li .columns > *,
    .block-list > * .columns > *,
    .block-list .block-list-item > *:not(.column):not(.columns), .block-list > li > *:not(.column):not(.columns),
    .block-list > * > *:not(.column):not(.columns) {
      margin-top: 0.25rem;
      margin-bottom: 0.25rem; }
    .block-list .block-list-item:hover,
    .block-list > :hover {
      background-color: #fdece4; }

.panel .block-list {
  margin-left: -1.5rem;
  margin-right: -1.5rem; }

.panel.block-list {
  padding-left: 0;
  padding-right: 0; }

.styleguide {
  box-sizing: border-box; }

.styleguide__safe-zone {
  padding: 0.75rem; }

.styleguide__grid-example .row {
  border: 1px solid #8b8a8d; }

.styleguide__grid-example .column:nth-child(odd), .styleguide__grid-example .columns:nth-child(odd), .styleguide__grid-example .columns:nth-child(odd) {
  background-color: #8b8a8d; }

.styleguide__grid-example .column:nth-child(even), .styleguide__grid-example .columns:nth-child(even), .styleguide__grid-example .columns:nth-child(even) {
  background-color: #e6e4e3; }

.styleguide__color-box {
  height: 100px;
  width: 100px;
  display: inline-block; }
  .styleguide__color-box--x-light-gray {
    position: relative; }
    .styleguide__color-box--x-light-gray:before {
      width: 100%;
      height: 100%;
      content: "Trust me, it's there.";
      font-size: 40%;
      padding: 1.5rem 1rem; }

.sg.sg-section[id^='section-1.2'] {
  position: relative; }
  .sg.sg-section[id^='section-1.2']:before {
    width: 100%;
    height: 100%;
    border-right: 1px solid #e6e4e3;
    border-left: 1px solid #e6e4e3;
    display: block; }
  .sg.sg-section[id^='section-1.2'].sg-section {
    clear: both; }
  .sg.sg-section[id^='section-1.2'] .sg.sg-section-partial {
    float: left;
    width: auto;
    border-left: none; }
    .sg.sg-section[id^='section-1.2'] .sg.sg-section-partial:first-of-type, .sg.sg-section[id^='section-1.2'] .sg.sg-section-partial.sg-code-listing {
      float: none;
      clear: both; }

.styleguide__color-box--deep-blue {
  background-color: #00005e; }

.styleguide__color-box--nordea-blue {
  background-color: #0000a0; }

.styleguide__color-box--vivid-blue {
  background-color: #0000ff; }

.styleguide__color-box--medium-blue {
  background-color: #3399ff; }

.styleguide__color-box--light-blue {
  background-color: #99ccff; }

.styleguide__color-box--x-light-blue {
  background-color: #e5f2ff; }

.styleguide__color-box--dark-pink {
  background-color: #f0c1ae; }

.styleguide__color-box--nordea-pink {
  background-color: #fbd9ca; }

.styleguide__color-box--light-pink {
  background-color: #fdece4; }

.styleguide__color-box--red {
  background-color: #fc6161; }

.styleguide__color-box--dark-red {
  background-color: #b00000; }

.styleguide__color-box--green {
  background-color: #40bfa3; }

.styleguide__color-box--dark-green {
  background-color: #006060; }

.styleguide__color-box--yellow {
  background-color: #ffe183; }

.styleguide__color-box--black {
  background-color: #000000; }

.styleguide__color-box--x-dark-gray {
  background-color: #474748; }

.styleguide__color-box--nordea-gray {
  background-color: #8b8a8d; }

.styleguide__color-box--medium-gray {
  background-color: #8b8a8d; }

.styleguide__color-box--light-gray {
  background-color: #e6e4e3; }

.styleguide__color-box--x-light-gray {
  background-color: #fafafa; }

.styleguide__color-box--white {
  background-color: #ffffff; }

.styleguide__color-box.green--dark {
  background-color: #93ba5f; }

.styleguide__color-box.green--base {
  background-color: #a7c975; }

.styleguide__color-box.green--light {
  background-color: #bfd994; }

.styleguide__color-box.brown--dark {
  background-color: #9e592b; }

.styleguide__color-box.brown--base {
  background-color: #b8662e; }

.styleguide__color-box.brown--light {
  background-color: #c78759; }

.styleguide__color-box.orange--dark {
  background-color: #f97a3e; }

.styleguide__color-box.orange--base {
  background-color: #ff944d; }

.styleguide__color-box.orange--light {
  background-color: #fca66b; }

.styleguide__color-box.pink--dark {
  background-color: #c14d7d; }

.styleguide__color-box.pink--base {
  background-color: #cf659d; }

.styleguide__color-box.pink--light {
  background-color: #de85b0; }

.styleguide__color-box.sienna--dark {
  background-color: #a48051; }

.styleguide__color-box.sienna--base {
  background-color: #b7976a; }

.styleguide__color-box.sienna--light {
  background-color: #ccb28a; }

.styleguide__color-box.yellow--dark {
  background-color: #fbc557; }

.styleguide__color-box.yellow--base {
  background-color: #ffd879; }

.styleguide__color-box.yellow--light {
  background-color: #fae3a6; }

.styleguide__color-box.violet--dark {
  background-color: #b56dc1; }

.styleguide__color-box.violet--base {
  background-color: #c585cf; }

.styleguide__color-box.violet--light {
  background-color: #d6a3de; }

.styleguide__color-box.brick--dark {
  background-color: #ee512f; }

.styleguide__color-box.brick--base {
  background-color: #f56b45; }

.styleguide__color-box.brick--light {
  background-color: #f59d83; }

.styleguide__color-box.jeans--dark {
  background-color: #6380c9; }

.styleguide__color-box.jeans--base {
  background-color: #6e8ce0; }

.styleguide__color-box.jeans--light {
  background-color: #a1b0e5; }

.styleguide__color-box.chocolate--dark {
  background-color: #75402b; }

.styleguide__color-box.chocolate--base {
  background-color: #8a4730; }

.styleguide__color-box.chocolate--light {
  background-color: #a3705c; }

.styleguide__color-box.blue--dark {
  background-color: #3289c8; }

.styleguide__color-box.blue--base {
  background-color: #54abdb; }

.styleguide__color-box.blue--light {
  background-color: #8fc4e1; }

.styleguide__color-box.emerald--dark {
  background-color: #71b58f; }

.styleguide__color-box.emerald--base {
  background-color: #89c5a4; }

.styleguide__color-box.emerald--light {
  background-color: #a6d6bd; }

.styleguide__color-box.skin--dark {
  background-color: #ba9675; }

.styleguide__color-box.skin--base {
  background-color: #dbb28c; }

.styleguide__color-box.skin--light {
  background-color: #ebccb5; }

.styleguide__color-box.grey--dark {
  background-color: #7d7873; }

.styleguide__color-box.grey--base {
  background-color: #948c87; }

.styleguide__color-box.grey--light {
  background-color: #b3aba5; }

.styleguide__color-name {
  margin-left: 20px;
  vertical-align: middle; }

code {
  background-color: transparent;
  border: 0px; }

.styleguide__colors-negative, .styleguide__negative, .styleguide__contrast-region, .styleguide--dark-background {
  background-color: #0000a0; }

.styleguide__colors-negative, .styleguide__negative, .styleguide__contrast-region {
  display: inline-block;
  padding: 1rem; }

.sg .sg.sg-section .sg.sg-section-partial {
  background: 0 none; }

.sg .sg-section-description .sg {
  white-space: pre-wrap; }

/**
Functions and Mixins

Styleguide 4
*/
.text-left, .text--left {
  text-align: left; }

.text-right, .text--right {
  text-align: right; }

.text-center, .text--center {
  text-align: center; }

.text-justify, .text--justify {
  text-align: justify; }

@media screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left; }
  .medium-text-right {
    text-align: right; }
  .medium-text-center {
    text-align: center; }
  .medium-text-justify {
    text-align: justify; } }

@media screen and (min-width: 64em) {
  .large-text-left {
    text-align: left; }
  .large-text-right {
    text-align: right; }
  .large-text-center {
    text-align: center; }
  .large-text-justify {
    text-align: justify; } }

@media screen and (min-width: 75em) {
  .xlarge-text-left {
    text-align: left; }
  .xlarge-text-right {
    text-align: right; }
  .xlarge-text-center {
    text-align: center; }
  .xlarge-text-justify {
    text-align: justify; } }

@media screen and (min-width: 90em) {
  .xxlarge-text-left {
    text-align: left; }
  .xxlarge-text-right {
    text-align: right; }
  .xxlarge-text-center {
    text-align: center; }
  .xxlarge-text-justify {
    text-align: justify; } }

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.1.0-rc.5
 */
/*  Only used with Theme processes */
html.md-THEME_NAME-theme, body.md-THEME_NAME-theme {
  color: '{{foreground-1}}';
  background-color: '{{background-color}}'; }

@keyframes md-tab-content-hide {
  0% {
    opacity: 1; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0; } }

md-tab-data {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  opacity: 0; }

md-tabs {
  display: block;
  margin: 0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0; }
  md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
    min-height: 248px; }
  md-tabs[md-align-tabs="bottom"] {
    padding-bottom: 48px; }
    md-tabs[md-align-tabs="bottom"] md-tabs-wrapper {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      z-index: 2; }
    md-tabs[md-align-tabs="bottom"] md-tabs-content-wrapper {
      top: 0;
      bottom: 48px; }
  md-tabs.md-dynamic-height md-tabs-content-wrapper {
    min-height: 0;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    overflow: visible; }
  md-tabs.md-dynamic-height md-tab-content.md-active {
    position: relative; }
  md-tabs[md-border-bottom] md-tabs-wrapper {
    border-width: 0 0 1px;
    border-style: solid; }
  md-tabs[md-border-bottom]:not(.md-dynamic-height) md-tabs-content-wrapper {
    top: 49px; }

md-tabs-wrapper {
  display: block;
  position: relative;
  transform: translate3d(0, 0, 0); }
  md-tabs-wrapper md-prev-button, md-tabs-wrapper md-next-button {
    height: 100%;
    width: 32px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1em;
    z-index: 2;
    cursor: pointer;
    font-size: 16px;
    background: transparent no-repeat center center;
    transition: all 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
    md-tabs-wrapper md-prev-button:focus, md-tabs-wrapper md-next-button:focus {
      outline: none; }
    md-tabs-wrapper md-prev-button.md-disabled, md-tabs-wrapper md-next-button.md-disabled {
      opacity: 0.25;
      cursor: default; }
    md-tabs-wrapper md-prev-button.ng-leave, md-tabs-wrapper md-next-button.ng-leave {
      transition: none; }
    md-tabs-wrapper md-prev-button md-icon, md-tabs-wrapper md-next-button md-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0); }
  md-tabs-wrapper md-prev-button {
    left: 0;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMjA4IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTUuNCw3LjQgMTQsNiA4LDEyIDE0LDE4IDE1LjQsMTYuNiAxMC44LDEyIAkJIiBzdHlsZT0iZmlsbDp3aGl0ZTsiLz4gPHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+IDwvZz4gPC9nPiA8ZyBpZD0iR3JpZCIgZGlzcGxheT0ibm9uZSI+IDxnIGRpc3BsYXk9ImlubGluZSI+IDwvZz4gPC9nPiA8L3N2Zz4NCg=="); }
    [dir=rtl] md-tabs-wrapper md-prev-button {
      left: 0;
      left: auto;
      left: initial;
      right: 0; }
  md-tabs-wrapper md-next-button {
    right: 0;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPiA8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPiA8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIHhtbDpzcGFjZT0icHJlc2VydmUiPiA8ZyBpZD0iSGVhZGVyIj4gPGc+IDxyZWN0IHg9Ii02MTgiIHk9Ii0xMzM2IiBmaWxsPSJub25lIiB3aWR0aD0iMTQwMCIgaGVpZ2h0PSIzNjAwIi8+IDwvZz4gPC9nPiA8ZyBpZD0iTGFiZWwiPiA8L2c+IDxnIGlkPSJJY29uIj4gPGc+IDxwb2x5Z29uIHBvaW50cz0iMTAsNiA4LjYsNy40IDEzLjIsMTIgOC42LDE2LjYgMTAsMTggMTYsMTIgCQkiIHN0eWxlPSJmaWxsOndoaXRlOyIvPiA8cmVjdCBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4gPC9nPiA8L2c+IDxnIGlkPSJHcmlkIiBkaXNwbGF5PSJub25lIj4gPGcgZGlzcGxheT0iaW5saW5lIj4gPC9nPiA8L2c+IDwvc3ZnPg0K"); }
    [dir=rtl] md-tabs-wrapper md-next-button {
      right: 0;
      right: auto;
      right: initial;
      left: 0; }
    md-tabs-wrapper md-next-button md-icon {
      transform: translate3d(-50%, -50%, 0) rotate(180deg); }
  md-tabs-wrapper.md-stretch-tabs md-pagination-wrapper {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row; }
    md-tabs-wrapper.md-stretch-tabs md-pagination-wrapper md-tab-item {
      -ms-flex-positive: 1;
          flex-grow: 1; }

md-tabs-canvas {
  position: relative;
  overflow: hidden;
  display: block;
  height: 48px; }
  md-tabs-canvas:after {
    content: '';
    display: table;
    clear: both; }
  md-tabs-canvas .md-dummy-wrapper {
    position: absolute;
    top: 0;
    left: 0; }
    [dir=rtl] md-tabs-canvas .md-dummy-wrapper {
      left: 0;
      left: auto;
      left: initial;
      right: 0; }
  md-tabs-canvas.md-paginated {
    margin: 0 32px; }
  md-tabs-canvas.md-center-tabs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    text-align: center; }
    md-tabs-canvas.md-center-tabs .md-tab {
      float: none;
      display: inline-block; }

md-pagination-wrapper {
  height: 48px;
  display: block;
  transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
  position: absolute;
  width: 999999px;
  left: 0;
  transform: translate3d(0, 0, 0); }
  md-pagination-wrapper:after {
    content: '';
    display: table;
    clear: both; }
  [dir=rtl] md-pagination-wrapper {
    left: 0;
    left: auto;
    left: initial;
    right: 0; }
  md-pagination-wrapper.md-center-tabs {
    position: relative;
    width: initial;
    margin: 0 auto; }

md-tabs-content-wrapper {
  display: block;
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; }

md-tab-content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.5s cubic-bezier(0.35, 0, 0.25, 1);
  overflow: auto;
  transform: translate3d(0, 0, 0); }
  md-tab-content.md-no-scroll {
    bottom: auto;
    overflow: hidden; }
  md-tab-content.ng-leave, md-tab-content.md-no-transition {
    transition: none; }
  md-tab-content.md-left:not(.md-active) {
    transform: translateX(-100%);
    animation: 1s md-tab-content-hide;
    opacity: 0; }
    [dir=rtl] md-tab-content.md-left:not(.md-active) {
      transform: translateX(100%); }
    md-tab-content.md-left:not(.md-active) * {
      transition: visibility 0s linear;
      transition-delay: 0.5s;
      visibility: hidden; }
  md-tab-content.md-right:not(.md-active) {
    transform: translateX(100%);
    animation: 1s md-tab-content-hide;
    opacity: 0; }
    [dir=rtl] md-tab-content.md-right:not(.md-active) {
      transform: translateX(-100%); }
    md-tab-content.md-right:not(.md-active) * {
      transition: visibility 0s linear;
      transition-delay: 0.5s;
      visibility: hidden; }
  md-tab-content > div.ng-leave {
    animation: 1s md-tab-content-hide; }

md-ink-bar {
  position: absolute;
  left: auto;
  right: auto;
  bottom: 0;
  height: 2px; }
  md-ink-bar.md-left {
    transition: left 0.125s cubic-bezier(0.35, 0, 0.25, 1), right 0.25s cubic-bezier(0.35, 0, 0.25, 1); }
  md-ink-bar.md-right {
    transition: left 0.25s cubic-bezier(0.35, 0, 0.25, 1), right 0.125s cubic-bezier(0.35, 0, 0.25, 1); }

md-tab {
  position: absolute;
  z-index: -1;
  left: -9999px; }

.md-tab {
  font-size: 14px;
  text-align: center;
  line-height: 24px;
  padding: 12px 24px;
  transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  text-transform: uppercase;
  float: left;
  font-weight: 500;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis; }
  [dir=rtl] .md-tab {
    float: right; }
  .md-tab.md-focused {
    box-shadow: none;
    outline: none; }
  .md-tab.md-active {
    cursor: default; }
  .md-tab.md-disabled {
    pointer-events: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
    opacity: 0.5;
    cursor: default; }
  .md-tab.ng-leave {
    transition: none; }

md-toolbar + md-tabs {
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.1.0-rc.5
 */
/*  Only used with Theme processes */
html.md-THEME_NAME-theme, body.md-THEME_NAME-theme {
  color: '{{foreground-1}}';
  background-color: '{{background-color}}'; }

.md-panel-outer-wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }

._md-panel-hidden {
  display: none; }

._md-panel-fullscreen {
  border-radius: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0; }

._md-panel-shown .md-panel {
  opacity: 1;
  transition: none; }

.md-panel {
  opacity: 0;
  position: fixed; }
  .md-panel._md-panel-shown {
    opacity: 1;
    transition: none; }
  .md-panel._md-panel-animate-enter {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1); }
  .md-panel._md-panel-animate-leave {
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 1, 1); }
  .md-panel._md-panel-animate-scale-out, .md-panel._md-panel-animate-fade-out {
    opacity: 0; }
  .md-panel._md-panel-backdrop {
    height: 100%;
    position: absolute;
    width: 100%; }
  .md-panel._md-opaque-enter {
    opacity: .48;
    transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1); }
  .md-panel._md-opaque-leave {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1); }

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.1.0-rc.5
 */
/*  Only used with Theme processes */
html.md-THEME_NAME-theme, body.md-THEME_NAME-theme {
  color: '{{foreground-1}}';
  background-color: '{{background-color}}'; }

md-radio-button {
  box-sizing: border-box;
  display: block;
  margin-bottom: 16px;
  white-space: nowrap;
  cursor: pointer;
  position: relative; }
  md-radio-button[disabled] {
    cursor: default; }
    md-radio-button[disabled] ._md-container {
      cursor: default; }
  md-radio-button ._md-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    left: 0;
    right: auto; }
    [dir=rtl] md-radio-button ._md-container {
      left: auto; }
    [dir=rtl] md-radio-button ._md-container {
      right: 0; }
    md-radio-button ._md-container .md-ripple-container {
      position: absolute;
      display: block;
      width: auto;
      height: auto;
      left: -15px;
      top: -15px;
      right: -15px;
      bottom: -15px; }
    md-radio-button ._md-container:before {
      box-sizing: border-box;
      background-color: transparent;
      border-radius: 50%;
      content: '';
      position: absolute;
      display: block;
      height: auto;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transition: all 0.5s;
      width: auto; }
  md-radio-button.md-align-top-left > div._md-container {
    top: 12px; }
  md-radio-button ._md-off {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    transition: border-color ease 0.28s; }
  md-radio-button ._md-on {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: transform ease 0.28s;
    transform: scale(0); }
  md-radio-button.md-checked ._md-on {
    transform: scale(0.5); }
  md-radio-button ._md-label {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    margin-left: 30px;
    margin-right: 0;
    vertical-align: middle;
    white-space: normal;
    pointer-events: none;
    width: auto; }
    [dir=rtl] md-radio-button ._md-label {
      margin-left: 0; }
    [dir=rtl] md-radio-button ._md-label {
      margin-right: 30px; }

md-radio-group.layout-column md-radio-button, md-radio-group.layout-xs-column md-radio-button, md-radio-group.layout-gt-xs-column md-radio-button, md-radio-group.layout-sm-column md-radio-button, md-radio-group.layout-gt-sm-column md-radio-button, md-radio-group.layout-md-column md-radio-button, md-radio-group.layout-gt-md-column md-radio-button, md-radio-group.layout-lg-column md-radio-button, md-radio-group.layout-gt-lg-column md-radio-button, md-radio-group.layout-xl-column md-radio-button {
  margin-bottom: 16px; }

md-radio-group.layout-row md-radio-button, md-radio-group.layout-xs-row md-radio-button, md-radio-group.layout-gt-xs-row md-radio-button, md-radio-group.layout-sm-row md-radio-button, md-radio-group.layout-gt-sm-row md-radio-button, md-radio-group.layout-md-row md-radio-button, md-radio-group.layout-gt-md-row md-radio-button, md-radio-group.layout-lg-row md-radio-button, md-radio-group.layout-gt-lg-row md-radio-button, md-radio-group.layout-xl-row md-radio-button {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 16px; }
  [dir=rtl] md-radio-group.layout-row md-radio-button, [dir=rtl] md-radio-group.layout-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-md-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-md-row md-radio-button, [dir=rtl] md-radio-group.layout-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-xl-row md-radio-button {
    margin-left: 16px; }
  [dir=rtl] md-radio-group.layout-row md-radio-button, [dir=rtl] md-radio-group.layout-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-xs-row md-radio-button, [dir=rtl] md-radio-group.layout-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-sm-row md-radio-button, [dir=rtl] md-radio-group.layout-md-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-md-row md-radio-button, [dir=rtl] md-radio-group.layout-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-gt-lg-row md-radio-button, [dir=rtl] md-radio-group.layout-xl-row md-radio-button {
    margin-right: 0; }
  md-radio-group.layout-row md-radio-button:last-of-type, md-radio-group.layout-xs-row md-radio-button:last-of-type, md-radio-group.layout-gt-xs-row md-radio-button:last-of-type, md-radio-group.layout-sm-row md-radio-button:last-of-type, md-radio-group.layout-gt-sm-row md-radio-button:last-of-type, md-radio-group.layout-md-row md-radio-button:last-of-type, md-radio-group.layout-gt-md-row md-radio-button:last-of-type, md-radio-group.layout-lg-row md-radio-button:last-of-type, md-radio-group.layout-gt-lg-row md-radio-button:last-of-type, md-radio-group.layout-xl-row md-radio-button:last-of-type {
    margin-left: 0;
    margin-right: 0; }

md-radio-group:focus {
  outline: none; }

md-radio-group.md-focused .md-checked ._md-container:before {
  left: -8px;
  top: -8px;
  right: -8px;
  bottom: -8px; }

.md-inline-form md-radio-group {
  margin: 18px 0 19px; }
  .md-inline-form md-radio-group md-radio-button {
    display: inline-block;
    height: 30px;
    padding: 2px;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0; }

@media screen and (-ms-high-contrast: active) {
  md-radio-button.md-default-theme ._md-on {
    background-color: #fff; } }

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.1.0-rc.5
 */
/*  Only used with Theme processes */
html.md-THEME_NAME-theme, body.md-THEME_NAME-theme {
  color: '{{foreground-1}}';
  background-color: '{{background-color}}'; }

md-icon {
  margin: auto;
  background-repeat: no-repeat no-repeat;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  height: 24px;
  width: 24px;
  min-height: 24px;
  min-width: 24px; }
  md-icon svg {
    pointer-events: none;
    display: block; }
  md-icon[md-font-icon] {
    line-height: 24px;
    width: auto; }

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.1.0-rc.5
 */
/*  Only used with Theme processes */
html.md-THEME_NAME-theme, body.md-THEME_NAME-theme {
  color: '{{foreground-1}}';
  background-color: '{{background-color}}'; }

@keyframes md-autocomplete-list-out {
  0% {
    animation-timing-function: linear; }
  50% {
    opacity: 0;
    height: 40px;
    animation-timing-function: ease-in; }
  100% {
    height: 0;
    opacity: 0; } }

@keyframes md-autocomplete-list-in {
  0% {
    opacity: 0;
    height: 0;
    animation-timing-function: ease-out; }
  50% {
    opacity: 0;
    height: 40px; }
  100% {
    opacity: 1;
    height: 40px; } }

md-autocomplete {
  border-radius: 2px;
  display: block;
  height: 40px;
  position: relative;
  overflow: visible;
  min-width: 190px; }
  md-autocomplete[disabled] input {
    cursor: default; }
  md-autocomplete[md-floating-label] {
    border-radius: 0;
    background: transparent;
    height: auto; }
    md-autocomplete[md-floating-label] md-input-container {
      padding-bottom: 0px; }
    md-autocomplete[md-floating-label] md-autocomplete-wrap {
      height: auto; }
    md-autocomplete[md-floating-label] button {
      position: absolute;
      top: auto;
      bottom: 0;
      right: 0;
      width: 30px;
      height: 30px; }
  md-autocomplete md-autocomplete-wrap {
    display: block;
    position: relative;
    overflow: visible;
    height: 40px; }
    md-autocomplete md-autocomplete-wrap.md-menu-showing {
      z-index: 51; }
    md-autocomplete md-autocomplete-wrap md-progress-linear {
      position: absolute;
      bottom: -2px;
      left: 0; }
      md-autocomplete md-autocomplete-wrap md-progress-linear.md-inline {
        bottom: 40px;
        right: 2px;
        left: 2px;
        width: auto; }
      md-autocomplete md-autocomplete-wrap md-progress-linear ._md-mode-indeterminate {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        transition: none; }
        md-autocomplete md-autocomplete-wrap md-progress-linear ._md-mode-indeterminate .md-container {
          transition: none;
          height: 3px; }
        md-autocomplete md-autocomplete-wrap md-progress-linear ._md-mode-indeterminate.ng-enter {
          transition: opacity 0.15s linear; }
          md-autocomplete md-autocomplete-wrap md-progress-linear ._md-mode-indeterminate.ng-enter.ng-enter-active {
            opacity: 1; }
        md-autocomplete md-autocomplete-wrap md-progress-linear ._md-mode-indeterminate.ng-leave {
          transition: opacity 0.15s linear; }
          md-autocomplete md-autocomplete-wrap md-progress-linear ._md-mode-indeterminate.ng-leave.ng-leave-active {
            opacity: 0; }
  md-autocomplete input:not(.md-input) {
    font-size: 14px;
    box-sizing: border-box;
    border: none;
    box-shadow: none;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 0 15px;
    line-height: 40px;
    height: 40px; }
    md-autocomplete input:not(.md-input)::-ms-clear {
      display: none; }
  md-autocomplete button {
    position: relative;
    line-height: 20px;
    text-align: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    padding: 0;
    font-size: 12px;
    background: transparent;
    margin: auto 5px; }
    md-autocomplete button:after {
      content: '';
      position: absolute;
      top: -6px;
      right: -6px;
      bottom: -6px;
      left: -6px;
      border-radius: 50%;
      transform: scale(0);
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
    md-autocomplete button:focus {
      outline: none; }
      md-autocomplete button:focus:after {
        transform: scale(1);
        opacity: 1; }
    md-autocomplete button md-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0) scale(0.9); }
      md-autocomplete button md-icon path {
        stroke-width: 0; }
    md-autocomplete button.ng-enter {
      transform: scale(0);
      transition: transform 0.15s ease-out; }
      md-autocomplete button.ng-enter.ng-enter-active {
        transform: scale(1); }
    md-autocomplete button.ng-leave {
      transition: transform 0.15s ease-out; }
      md-autocomplete button.ng-leave.ng-leave-active {
        transform: scale(0); }
  @media screen and (-ms-high-contrast: active) {
    md-autocomplete input {
      border: 1px solid #fff; }
    md-autocomplete li:focus {
      color: #fff; } }

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
  position: absolute;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  height: 225.5px;
  max-height: 225.5px;
  z-index: 100; }

.md-virtual-repeat-container.md-not-found {
  height: 48px; }

.md-autocomplete-suggestions {
  margin: 0;
  list-style: none;
  padding: 0; }
  .md-autocomplete-suggestions li {
    font-size: 14px;
    overflow: hidden;
    padding: 0 15px;
    line-height: 48px;
    height: 48px;
    transition: background 0.15s linear;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis; }
    .md-autocomplete-suggestions li:focus {
      outline: none; }
    .md-autocomplete-suggestions li:not(.md-not-found-wrapper) {
      cursor: pointer; }

@media screen and (-ms-high-contrast: active) {
  md-autocomplete,
  .md-autocomplete-suggestions {
    border: 1px solid #fff; } }

/* TRANSFORM / TRANSITION MIXINS */
/* Adds -webkit- prefix for transform (of 2d transformation) */
/* Adds -webkit- prefix for transition-duration */
/* Adds -webkit- prefix for transition timing function */
/* ANIMATIONS MIXINS */
/* SOME BASIC KEYFRAMES AND ANIMATIONS */

@keyframes keyframes-flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    transform: perspective(400px) rotateX(10deg); }
  100% {
    transform: perspective(400px) rotateX(0);
    opacity: 1; } }

@keyframes keyframes-flipOutX {
  0% {
    transform: perspective(400px) rotateX(0);
    opacity: 1; }
  40% {
    transform: perspective(400px) rotateX(10deg); }
  70% {
    transform: perspective(400px) rotateX(-10deg); }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
    display: none; } }

@keyframes keyframes-fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/* Animations */

@keyframes keyframes-fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes keyframes-fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(8px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

/**
 * Foundation for Sites by ZURB
 * Version 6.2.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.expand-row--expanded:before, .expand-row__preview__content:before, .header-row .expand-row__preview--header:before, .footer-row .expand-row__preview--footer:before {
  content: '';
  position: absolute; }

meta.foundation-version {
  font-family: "1.2.0"; }

meta.foundation-mq {
  font-family: "small=0&medium=640px&large=1024px&xlarge=1200px&xxlarge=1440px"; }

/*
  GLOBAL
  ------

  Global styles and settings for Foundation for Apps are stored here. This file must always
  be imported, no matter what.

  Includes:
   -
*/
@keyframes shake {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    transform: translateX(7%); }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    transform: translateX(-7%); }
  100% {
    transform: translateX(0); } }

@keyframes spin-cw {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes spin-ccw {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }

@keyframes wiggle {
  40%, 50%, 60% {
    transform: rotate(7deg); }
  35%, 45%, 55%, 65% {
    transform: rotate(-7deg); }
  0%, 30%, 70%, 100% {
    transform: rotate(0); } }

/*
    Transitions
  */
.slideInUp.ng-enter, .slideInUp.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateY(100%); }

.slideInUp.ng-enter.ng-enter-active, .slideInUp.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideInRight.ng-enter, .slideInRight.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateX(-100%); }

.slideInRight.ng-enter.ng-enter-active, .slideInRight.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideInDown.ng-enter, .slideInDown.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateY(-100%); }

.slideInDown.ng-enter.ng-enter-active, .slideInDown.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideInLeft.ng-enter, .slideInLeft.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateX(100%); }

.slideInLeft.ng-enter.ng-enter-active, .slideInLeft.ng-hide-remove.ng-hide-remove-active {
  transform: translateX(0) translateY(0); }

.slideOutUp.ng-leave, .slideOutUp.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutUp.ng-leave.ng-leave-active, .slideOutUp.ng-hide-add.ng-hide-add-active {
  transform: translateY(-100%); }

.slideOutRight.ng-leave, .slideOutRight.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutRight.ng-leave.ng-leave-active, .slideOutRight.ng-hide-add.ng-hide-add-active {
  transform: translateX(100%); }

.slideOutDown.ng-leave, .slideOutDown.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutDown.ng-leave.ng-leave-active, .slideOutDown.ng-hide-add.ng-hide-add-active {
  transform: translateY(100%); }

.slideOutLeft.ng-leave, .slideOutLeft.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateX(0) translateY(0); }

.slideOutLeft.ng-leave.ng-leave-active, .slideOutLeft.ng-hide-add.ng-hide-add-active {
  transform: translateX(-100%); }

.fadeIn.ng-enter, .fadeIn.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: opacity;
  opacity: 0; }

.fadeIn.ng-enter.ng-enter-active, .fadeIn.ng-hide-remove.ng-hide-remove-active {
  opacity: 1; }

.fadeOut.ng-leave, .fadeOut.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: opacity;
  opacity: 1; }

.fadeOut.ng-leave.ng-leave-active, .fadeOut.ng-hide-add.ng-hide-add-active {
  opacity: 0; }

.hingeInFromTop.ng-enter, .hingeInFromTop.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: top;
  opacity: 0; }

.hingeInFromTop.ng-enter.ng-enter-active, .hingeInFromTop.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromRight.ng-enter, .hingeInFromRight.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: right;
  opacity: 0; }

.hingeInFromRight.ng-enter.ng-enter-active, .hingeInFromRight.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromBottom.ng-enter, .hingeInFromBottom.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateX(90deg);
  transform-origin: bottom;
  opacity: 0; }

.hingeInFromBottom.ng-enter.ng-enter-active, .hingeInFromBottom.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromLeft.ng-enter, .hingeInFromLeft.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateY(90deg);
  transform-origin: left;
  opacity: 0; }

.hingeInFromLeft.ng-enter.ng-enter-active, .hingeInFromLeft.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromMiddleX.ng-enter, .hingeInFromMiddleX.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateX(-90deg);
  transform-origin: center;
  opacity: 0; }

.hingeInFromMiddleX.ng-enter.ng-enter-active, .hingeInFromMiddleX.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeInFromMiddleY.ng-enter, .hingeInFromMiddleY.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: perspective(2000px) rotateY(-90deg);
  transform-origin: center;
  opacity: 0; }

.hingeInFromMiddleY.ng-enter.ng-enter-active, .hingeInFromMiddleY.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0deg);
  opacity: 1; }

.hingeOutFromTop.ng-leave, .hingeOutFromTop.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: top;
  opacity: 1; }

.hingeOutFromTop.ng-leave.ng-leave-active, .hingeOutFromTop.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hingeOutFromRight.ng-leave, .hingeOutFromRight.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: right;
  opacity: 1; }

.hingeOutFromRight.ng-leave.ng-leave-active, .hingeOutFromRight.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.hingeOutFromBottom.ng-leave, .hingeOutFromBottom.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: bottom;
  opacity: 1; }

.hingeOutFromBottom.ng-leave.ng-leave-active, .hingeOutFromBottom.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0; }

.hingeOutFromLeft.ng-leave, .hingeOutFromLeft.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: left;
  opacity: 1; }

.hingeOutFromLeft.ng-leave.ng-leave-active, .hingeOutFromLeft.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0; }

.hingeOutFromMiddleX.ng-leave, .hingeOutFromMiddleX.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: center;
  opacity: 1; }

.hingeOutFromMiddleX.ng-leave.ng-leave-active, .hingeOutFromMiddleX.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0; }

.hingeOutFromMiddleY.ng-leave, .hingeOutFromMiddleY.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0deg);
  transform-origin: center;
  opacity: 1; }

.hingeOutFromMiddleY.ng-leave.ng-leave-active, .hingeOutFromMiddleY.ng-hide-add.ng-hide-add-active {
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0; }

.zoomIn.ng-enter, .zoomIn.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, property;
  transform: scale(1.5);
  opacity: 0; }

.zoomIn.ng-enter.ng-enter-active, .zoomIn.ng-hide-remove.ng-hide-remove-active {
  transform: scale(1);
  opacity: 1; }

.zoomOut.ng-leave, .zoomOut.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, property;
  transform: scale(0.5);
  opacity: 1; }

.zoomOut.ng-leave.ng-leave-active, .zoomOut.ng-hide-add.ng-hide-add-active {
  transform: scale(1);
  opacity: 0; }

.spinIn.ng-enter, .spinIn.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(-270deg);
  opacity: 0; }

.spinIn.ng-enter.ng-enter-active, .spinIn.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0);
  opacity: 1; }

.spinOut.ng-leave, .spinOut.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0);
  opacity: 1; }

.spinOut.ng-leave.ng-leave-active, .spinOut.ng-hide-add.ng-hide-add-active {
  transform: rotate(270deg);
  opacity: 0; }

.spinInCCW.ng-enter, .spinInCCW.ng-hide-remove {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(270deg);
  opacity: 0; }

.spinInCCW.ng-enter.ng-enter-active, .spinInCCW.ng-hide-remove.ng-hide-remove-active {
  transform: rotate(0);
  opacity: 1; }

.spinOutCCW.ng-leave, .spinOutCCW.ng-hide-add {
  transition-duration: 500ms;
  transition-timing-function: ease;
  transition-delay: 0;
  transition-property: transform, opacity;
  transform: rotate(0);
  opacity: 1; }

.spinOutCCW.ng-leave.ng-leave-active, .spinOutCCW.ng-hide-add.ng-hide-add-active {
  transform: rotate(-270deg);
  opacity: 0; }

/*
    Transition modifiers
  */
.slow {
  transition-duration: 750ms !important; }

.fast {
  transition-duration: 250ms !important; }

.linear {
  transition-timing-function: linear !important; }

.ease {
  transition-timing-function: ease !important; }

.easeIn {
  transition-timing-function: ease-in !important; }

.easeOut {
  transition-timing-function: ease-out !important; }

.easeInOut {
  transition-timing-function: ease-in-out !important; }

.bounceIn {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.bounceOut {
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.bounceInOut {
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.delay {
  transition-delay: 300ms !important; }

.long-delay {
  transition-delay: 700ms !important; }

/*
    Animations
  */
.shake {
  animation-name: shake;
  animation-duration: 500ms;
  animation-timing-function: ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

.spin-cw {
  animation-name: spin-cw;
  animation-duration: 500ms;
  animation-timing-function: ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

.spin-ccw {
  animation-name: spin-ccw;
  animation-duration: 500ms;
  animation-timing-function: ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

.wiggle {
  animation-name: wiggle;
  animation-duration: 500ms;
  animation-timing-function: ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  animation-delay: 0; }

/*
    Animation modifiers
  */
.shake.infinite,
.spin-cw.infinite,
.spin-ccw.infinite,
.wiggle.infinite {
  animation-iteration-count: infinite; }

.shake.linear,
.spin-cw.linear,
.spin-ccw.linear,
.wiggle.linear {
  animation-timing-function: linear !important; }

.shake.ease,
.spin-cw.ease,
.spin-ccw.ease,
.wiggle.ease {
  animation-timing-function: ease !important; }

.shake.easeIn,
.spin-cw.easeIn,
.spin-ccw.easeIn,
.wiggle.easeIn {
  animation-timing-function: ease-in !important; }

.shake.easeOut,
.spin-cw.easeOut,
.spin-ccw.easeOut,
.wiggle.easeOut {
  animation-timing-function: ease-out !important; }

.shake.easeInOut,
.spin-cw.easeInOut,
.spin-ccw.easeInOut,
.wiggle.easeInOut {
  animation-timing-function: ease-in-out !important; }

.shake.bounceIn,
.spin-cw.bounceIn,
.spin-ccw.bounceIn,
.wiggle.bounceIn {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important; }

.shake.bounceOut,
.spin-cw.bounceOut,
.spin-ccw.bounceOut,
.wiggle.bounceOut {
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important; }

.shake.bounceInOut,
.spin-cw.bounceInOut,
.spin-ccw.bounceInOut,
.wiggle.bounceInOut {
  animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important; }

.shake.slow,
.spin-cw.slow,
.spin-ccw.slow,
.wiggle.slow {
  animation-duration: 750ms !important; }

.shake.fast,
.spin-cw.fast,
.spin-ccw.fast,
.wiggle.fast {
  animation-duration: 250ms !important; }

.shake.delay,
.spin-cw.delay,
.spin-ccw.delay,
.wiggle.delay {
  animation-delay: 300ms !important; }

.shake.long-delay,
.spin-cw.long-delay,
.spin-ccw.long-delay,
.wiggle.long-delay {
  animation-delay: 700ms !important; }

.stagger {
  transition-delay: 150ms;
  transition-duration: 0; }

.stort-stagger {
  transition-delay: 150ms;
  transition-duration: 0; }

.long-stagger {
  transition-delay: 150ms;
  transition-duration: 0; }

.position-absolute {
  overflow: hidden;
  position: relative; }

[ui-view].ng-enter-active, [ui-view].ng-leave-active {
  position: absolute !important;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

/*
  MODAL
  -----

  The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it.

  Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same.
*/
.modal {
  position: relative;
  z-index: 1101;
  background: #fafafa;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  width: 100%;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
  padding: 1rem; }
  @media only screen and (min-width: 40em) {
    .modal {
      height: auto;
      max-width: 600px; } }
  .modal .grid-content, .modal .grid-block {
    margin: 0; }
  .modal .close-button, .modal [fa-close] {
    z-index: 1101; }

.modal {
  max-width: 600px; }
  .tiny > .modal {
    max-width: 300px; }
  .small > .modal {
    max-width: 500px; }
  .large > .modal {
    max-width: 100%; }
  .dialog > .modal {
    height: auto; }
  .collapse > .modal {
    padding: 0; }

.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: none;
  background-color: rgba(51, 51, 51, 0.7);
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  -webkit-transform: translate3d(0, 0, 0); }
  .modal-overlay.is-active {
    display: -ms-flexbox;
    display: flex; }

/*
  NOTIFICATION
  ------------

  An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well.

  Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.
*/
.notification, .static-notification {
  z-index: 1000;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin-top: .5rem;
  margin-bottom: .5rem;
  display: none; }
  .notification h1, .static-notification h1 {
    font-size: 1.25em;
    margin: 0; }
  .notification p, .static-notification p {
    margin: 0; }
  .is-active.notification, .is-active.static-notification {
    display: -ms-flexbox;
    display: flex; }
  .notification .close-button, .static-notification .close-button {
    color: white; }

.notification-container {
  z-index: 3000;
  position: fixed;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column; }

/*
  CSS Output
*/
.notification {
  background: #3399ff;
  padding: 1rem;
  border-radius: 0; }
  .notification, .notification h1, .notification h2, .notification h3, .notification h4, .notification h5, .notification h6 {
    color: #ffffff; }
  .notification.success {
    background: #3adb76;
    padding: 1rem;
    border-radius: 0; }
    .notification.success, .notification.success h1, .notification.success h2, .notification.success h3, .notification.success h4, .notification.success h5, .notification.success h6 {
      color: #ffffff; }
  .notification.warning {
    background: #ffae00;
    padding: 1rem;
    border-radius: 0; }
    .notification.warning, .notification.warning h1, .notification.warning h2, .notification.warning h3, .notification.warning h4, .notification.warning h5, .notification.warning h6 {
      color: #ffffff; }
  .notification.alert {
    background: #ec5840;
    padding: 1rem;
    border-radius: 0; }
    .notification.alert, .notification.alert h1, .notification.alert h2, .notification.alert h3, .notification.alert h4, .notification.alert h5, .notification.alert h6 {
      color: #ffffff; }
  .notification.dark {
    background: #232323;
    padding: 1rem;
    border-radius: 0; }
    .notification.dark, .notification.dark h1, .notification.dark h2, .notification.dark h3, .notification.dark h4, .notification.dark h5, .notification.dark h6 {
      color: #fff; }

.static-notification {
  background: #3399ff;
  padding: 1rem;
  border-radius: 0;
  position: fixed !important; }
  .static-notification, .static-notification h1, .static-notification h2, .static-notification h3, .static-notification h4, .static-notification h5, .static-notification h6 {
    color: #ffffff; }
  .static-notification.top-right {
    width: 25rem;
    right: 0;
    top: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .static-notification.top-right {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .static-notification.top-left {
    width: 25rem;
    left: 0;
    top: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .static-notification.top-left {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .static-notification.top-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .static-notification.top-middle {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .static-notification.bottom-right {
    width: 25rem;
    right: 0;
    top: auto;
    bottom: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .static-notification.bottom-right {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .static-notification.bottom-left {
    width: 25rem;
    left: 0;
    top: auto;
    bottom: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .static-notification.bottom-left {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .static-notification.bottom-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: auto;
    bottom: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .static-notification.bottom-middle {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .static-notification.success {
    background: #3adb76;
    padding: 1rem;
    border-radius: 0; }
    .static-notification.success, .static-notification.success h1, .static-notification.success h2, .static-notification.success h3, .static-notification.success h4, .static-notification.success h5, .static-notification.success h6 {
      color: #ffffff; }
  .static-notification.warning {
    background: #ffae00;
    padding: 1rem;
    border-radius: 0; }
    .static-notification.warning, .static-notification.warning h1, .static-notification.warning h2, .static-notification.warning h3, .static-notification.warning h4, .static-notification.warning h5, .static-notification.warning h6 {
      color: #ffffff; }
  .static-notification.alert {
    background: #ec5840;
    padding: 1rem;
    border-radius: 0; }
    .static-notification.alert, .static-notification.alert h1, .static-notification.alert h2, .static-notification.alert h3, .static-notification.alert h4, .static-notification.alert h5, .static-notification.alert h6 {
      color: #ffffff; }
  .static-notification.dark {
    background: #232323;
    padding: 1rem;
    border-radius: 0; }
    .static-notification.dark, .static-notification.dark h1, .static-notification.dark h2, .static-notification.dark h3, .static-notification.dark h4, .static-notification.dark h5, .static-notification.dark h6 {
      color: #fff; }

.notification-container {
  width: 25rem;
  right: 0;
  top: 0; }
  @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
    .notification-container {
      width: auto;
      left: 0;
      right: 0;
      margin-left: 0; } }
  .notification-container.top-right {
    width: 25rem;
    right: 0;
    top: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .notification-container.top-right {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .notification-container.top-left {
    width: 25rem;
    left: 0;
    top: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .notification-container.top-left {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .notification-container.top-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .notification-container.top-middle {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .notification-container.bottom-right {
    width: 25rem;
    right: 0;
    top: auto;
    bottom: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .notification-container.bottom-right {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .notification-container.bottom-left {
    width: 25rem;
    left: 0;
    top: auto;
    bottom: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .notification-container.bottom-left {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }
  .notification-container.bottom-middle {
    width: 25rem;
    left: 50%;
    margin-left: -12.5rem;
    top: auto;
    bottom: 0; }
    @media only screen and (min-width: 0em) and (max-width: 639.9375px) {
      .notification-container.bottom-middle {
        width: auto;
        left: 0;
        right: 0;
        margin-left: 0; } }

.notification-icon {
  -ms-flex: 0 0 60px;
      flex: 0 0 60px;
  margin-right: 1rem;
  -ms-flex-item-align: start;
      align-self: flex-start; }
  .notification-icon img {
    width: 100%;
    height: auto; }

.notification-content {
  -ms-flex: 1;
      flex: 1; }

[zf-open],
[zf-close],
[zf-toggle] {
  cursor: pointer; }

.notification-container {
  z-index: 2000; }

.avatar {
  position: relative;
  display: inline-block;
  width: 4.625rem;
  height: 4.625rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: #40bfa3; }

.avatar__wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
  height: 100%; }

.avatar__image {
  width: 4.625rem; }

.avatar__name {
  color: #ffffff;
  font-size: 2rem; }

.avatar__icon {
  margin: 0 !important; }
  .avatar__icon.icon {
    color: #ffffff;
    width: 86.48649%;
    height: 86.48649%; }
  .avatar__icon.icon svg {
    width: 100%;
    height: 100%; }

.moneybar .row.divider {
  margin-top: 0;
  margin-bottom: 0; }

.moneybar__fill-container {
  background-color: #bfd994; }

.moneybar__fill {
  background-color: #a7c975; }

.accounts .moneybar__fill-container {
  background-color: #40bfa3; }

.accounts .moneybar__fill {
  background-color: #40bfa3; }

.cards .moneybar__fill-container {
  background-color: #a6d6bd; }

.cards .moneybar__fill {
  background-color: #89c5a4; }

.cards-credit .moneybar__fill-container {
  background-color: #a6d6bd; }

.cards-credit .moneybar__fill {
  background-color: #89c5a4; }

.cards-debit .moneybar__fill-container {
  background-color: #a6d6bd; }

.cards-debit .moneybar__fill {
  background-color: #89c5a4; }

.cards-combined .moneybar__fill-container {
  background-color: #a6d6bd; }

.cards-combined .moneybar__fill {
  background-color: #89c5a4; }

.is-inactive .moneybar__fill-container {
  background-color: #ffe183; }

.is-inactive .moneybar__fill {
  background-color: #000000; }

.is-blocked .moneybar__fill-container {
  background-color: #fc6161; }

.is-blocked .moneybar__fill {
  background-color: #ffffff; }

.is-new .moneybar__fill-container {
  background-color: #40bfa3; }

.is-new .moneybar__fill {
  background-color: #000000; }

.status-inactive .moneybar__fill-container {
  background-color: #fbd9ca; }

.status-inactive .moneybar__fill {
  background-color: #f0c1ae; }

.status-blocked .moneybar__fill-container {
  background-color: #fbd9ca; }

.status-blocked .moneybar__fill {
  background-color: #f0c1ae; }

.loans .moneybar__fill-container {
  background-color: #a6d6bd; }

.loans .moneybar__fill {
  background-color: #89c5a4; }

.loans-credit .moneybar__fill-container {
  background-color: #a6d6bd; }

.loans-credit .moneybar__fill {
  background-color: #89c5a4; }

.moneybar {
  cursor: pointer; }
  .moneybar__content.ng-enter-prepare {
    display: none; }
  .moneybar__content.ng-enter, .moneybar__content.ng-enter-active {
    display: initial; }
  .moneybar__fill-container {
    position: relative; }
  .moneybar__fill {
    height: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    display: block;
    position: absolute; }
  .moneybar .column {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
    .moneybar .column.row {
      overflow: visible; }
  .moneybar__card-image {
    border-radius: 5px;
    position: relative;
    overflow: hidden; }
    .moneybar__card-image img {
      height: 75px;
      width: auto; }
    .moneybar__card-image .moneybar__card-status {
      position: absolute;
      bottom: 0.5rem;
      width: 100%;
      padding: 0.25rem 0;
      font-size: 0.8125rem;
      color: #ffffff; }
      .moneybar__card-image .moneybar__card-status.is-new {
        background-color: #40bfa3;
        color: #000000; }
      .moneybar__card-image .moneybar__card-status.is-blocked {
        background-color: #fc6161;
        color: #ffffff; }
      .moneybar__card-image .moneybar__card-status.is-inactive, .moneybar__card-image .moneybar.is-inactive .moneybar__card-status, .moneybar.is-inactive .moneybar__card-image .moneybar__card-status {
        background-color: #ffe183;
        color: #000000; }
  .moneybar__details-container {
    background-color: #ffffff; }
  .moneybar h2,
  .moneybar span.label,
  .moneybar .compact .label {
    margin-right: 0.5rem; }
  .moneybar .label {
    overflow: hidden;
    text-overflow: ellipsis; }
  .moneybar--expanded .moneybar__fill-container {
    height: 11rem;
    -ms-flex-line-pack: justify;
        align-content: space-between; }
  .moneybar--expanded .moneybar__subcontent--topleft {
    height: 1px;
    overflow: visible;
    float: left; }
  .moneybar--expanded .divider {
    border: 0;
    margin-top: 0;
    margin-bottom: 0; }
  .moneybar--expanded h2 {
    display: inline; }
  .moneybar--collapsed .moneybar__fill-container {
    padding: 0.25rem 0;
    margin: 0.3125rem 0; }
  .moneybar--collapsed .moneybar__content {
    padding: 1.5rem 0; }
  .moneybar__content {
    padding: 1rem 0; }
    .moneybar__content.compact {
      -ms-flex-align: center;
          align-items: center;
      padding: 1rem 0; }
  .moneybar .compact .moneybar__fill-container, .moneybar .compact .moneybar__card-image {
    display: none; }
  .moneybar .compact .label {
    display: inline; }

.month-calendar-header {
  font-size: 1.25rem;
  background-color: #0000a0;
  height: 3.25rem;
  line-height: 3.25rem;
  text-align: center;
  color: #fdece4; }
  .month-calendar-header .icon {
    color: #fdece4; }
  .month-calendar-header span {
    display: inline-block; }
  .month-calendar-header__content {
    width: 100%;
    position: relative; }
  .month-calendar-header__nav {
    position: absolute;
    cursor: pointer;
    min-width: 1rem;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; }
    .month-calendar-header__nav:hover {
      color: #3399ff; }
    .month-calendar-header__nav--previous {
      top: 18px;
      left: 24px; }
    .month-calendar-header__nav--next {
      top: 18px;
      right: 24px; }
    .month-calendar-header__nav--invisible {
      opacity: 0;
      cursor: auto; }
  .month-calendar-header__title {
    min-width: 9rem; }
  .month-calendar-header__month-name {
    text-transform: capitalize; }
  .month-calendar-header__close {
    height: 2rem;
    position: absolute;
    top: 0.625rem;
    right: 1rem;
    cursor: pointer; }
  .month-calendar-header--dark-pink {
    background-color: #f0c1ae;
    color: #000000; }
    .month-calendar-header--dark-pink .icon {
      color: #0000a0; }
    .month-calendar-header--dark-pink .month-calendar-header__nav:hover {
      color: #3399ff; }
    .month-calendar-header--dark-pink .month-calendar-header__nav--invisible {
      opacity: 0;
      cursor: auto; }

.month-calendar {
  text-align: center;
  margin-left: auto;
  margin-right: auto; }
  .month-calendar__title {
    text-align: left;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
    padding-left: 0.75rem; }
  .month-calendar__title-cell {
    color: #8b8a8d;
    padding: 1rem 0.25rem 0.25rem; }
  .month-calendar__value-cell {
    color: #000000;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem; }
    .month-calendar__value-cell.month-calendar__value-cell--highlighted {
      background-color: #fbd9ca; }
    .month-calendar__value-cell.month-calendar__value-cell--highlighted-start {
      background: linear-gradient(to right, white 0%, white 50%, #fbd9ca 50%); }
    .month-calendar__value-cell.month-calendar__value-cell--highlighted-end {
      background: linear-gradient(to right, #fbd9ca 50%, white 50%, white 0%); }
  .month-calendar__day {
    cursor: pointer;
    font-weight: bold;
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 50%; }
    .month-calendar__day:hover:not(.month-calendar__day--disabled), .month-calendar__day.month-calendar__day--selected, .month-calendar__day.month-calendar__day--selected.month-calendar__day--today {
      color: #fdece4;
      background-color: #0000a0; }
    .month-calendar__day.month-calendar__day--today {
      background-color: #ffffff;
      border: 1px solid #0000a0; }
    .month-calendar__day.month-calendar__day--disabled {
      color: #8b8a8d;
      cursor: default; }
    .month-calendar__day.month-calendar__day--sunday {
      color: #fc6161; }

.colors-negative .month-calendar-header {
  background-color: #f0c1ae;
  color: #000000; }
  .colors-negative .month-calendar-header .icon {
    color: #0000a0; }
  .colors-negative .month-calendar-header .month-calendar-header__nav:hover {
    color: #3399ff; }
  .colors-negative .month-calendar-header .month-calendar-header__nav--invisible {
    opacity: 0;
    cursor: auto; }

.datePicker {
  display: inline-block;
  position: relative; }
  .datePicker td {
    outline: none; }

.colors-negative .datePicker-opened .icon {
  background-color: #f0c1ae;
  color: #0000a0;
  border-radius: 50%; }

.datePicker-panel {
  opacity: 0;
  background-color: #ffffff;
  position: absolute;
  z-index: 100;
  display: none; }
  .datePicker-panel:last-child {
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); }
  .datePicker-panel--visible {
    display: block;
    animation-delay: 0;
    animation-duration: 0.5s;
    animation-iteration-count: initial;
    animation-name: keyframes-fadeIn;
    animation-direction: initial;
    animation-fill-mode: both; }
  .datePicker-panel--single {
    width: 19rem; }
    .datePicker-panel--single .datePicker-month {
      width: 100%; }
  .datePicker-panel--double {
    width: 38rem; }
    .datePicker-panel--double .datePicker-month {
      width: 50%; }
  .datePicker-panel--top-left {
    top: 0;
    left: 0; }
  .datePicker-panel--top-right {
    top: 0;
    right: 0; }
  .datePicker-panel--bottom-left {
    bottom: 0;
    left: 0; }
  .datePicker-panel--bottom-right {
    bottom: 0;
    right: 0; }
  .datePicker-panel--static {
    position: static; }

md-input-container .datePicker-panel--top-left {
  top: 40px;
  left: 0; }

md-input-container .datePicker-panel--top-right {
  top: 40px;
  right: 0; }

.datePicker-month {
  display: inline-block; }

.datePicker-buttons {
  text-align: center;
  cursor: pointer;
  padding: 0 0 1rem 0;
  color: #0000a0; }
  .datePicker-buttons span {
    padding: 0 0.75rem; }
    .datePicker-buttons span:hover {
      color: #3399ff; }

md-input-container.nd-icon-right-inside > nd-date-picker.icon:last-of-type {
  left: 0; }

.md-panel-outer-wrapper .nd-panel__wrapper {
  transform: scale(0.1);
  transform-origin: left top 0;
  background: white;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
  padding: 1rem; }

.md-panel-outer-wrapper .nd-panel__wrapper:focus {
  outline: none; }

.md-panel-outer-wrapper .nd-panel__animation-open {
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  transition-duration: 100ms; }
  .md-panel-outer-wrapper .nd-panel__animation-open > .nd-panel__wrapper {
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 250ms; }

.md-panel-outer-wrapper .nd-panel__animation-close {
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  transition-duration: 200ms; }
  .md-panel-outer-wrapper .nd-panel__animation-close > .nd-panel__wrapper {
    transform: scale(1); }

.md-panel-outer-wrapper .md-scroll-mask {
  pointer-events: none; }

.nd-panel__button {
  -webkit-appearance: button;
  -moz-appearance: button; }

.nd-panel__button {
  font-size: inherit;
  line-height: inherit; }

.nd-panel__button:focus {
  outline: 2px solid #3399ff; }

@media (-webkit-min-device-pixel-ratio: 0) {
  .nd-panel__button:focus {
    outline: -webkit-focus-ring-color auto; } }

[data-whatinput='mouse'] .nd-panel__button {
  outline: none; }

@keyframes sliderFocusThumb {
  0% {
    transform: scale(0.7); }
  30% {
    transform: scale(1); }
  100% {
    transform: scale(0.7); } }

@keyframes sliderDiscreteFocusThumb {
  0% {
    transform: scale(0.7); }
  50% {
    transform: scale(0.8); }
  100% {
    transform: scale(0); } }

@keyframes sliderDiscreteFocusRing {
  0% {
    transform: scale(0.7);
    opacity: 0; }
  50% {
    transform: scale(1);
    opacity: 1; }
  100% {
    transform: scale(0); } }

nd-range-slider {
  height: 48px;
  min-width: 128px;
  position: relative;
  margin-left: 4px;
  margin-right: 4px;
  padding: 0;
  display: block;
  -ms-flex-direction: row;
      flex-direction: row;
  /**
  * Track
  */
  /**
  * Slider thumb
  */
  /* The sign that's focused in discrete mode */
  /**
  * The border/background that comes in when focused in non-discrete mode
  */
  /* Don't animate left/right while panning */ }
  nd-range-slider *,
  nd-range-slider *::after {
    box-sizing: border-box; }
  nd-range-slider ._md-slider-wrapper {
    outline: none;
    width: 100%;
    height: 100%; }
  nd-range-slider ._md-slider-content {
    position: relative; }
  nd-range-slider ._md-track-container {
    width: 100%;
    position: absolute;
    top: 23px;
    height: 2px; }
  nd-range-slider ._md-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%; }
  nd-range-slider ._md-track-fill {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: width, height; }
  nd-range-slider ._md-track-ticks {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%; }
  nd-range-slider ._md-track-ticks canvas {
    width: 100%;
    height: 100%; }
  nd-range-slider ._md-thumb-container {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: left, bottom; }
  nd-range-slider ._md-thumb {
    z-index: 1;
    position: absolute;
    left: -10px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    transform: scale(0.7);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
    nd-range-slider ._md-thumb::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      border-width: 3px;
      border-style: solid;
      transition: inherit; }
  nd-range-slider ._md-thumb2 {
    z-index: 1;
    position: absolute;
    left: -10px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    transform: scale(0.7);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
    nd-range-slider ._md-thumb2::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      border-width: 3px;
      border-style: solid;
      transition: inherit; }
  nd-range-slider ._md-sign {
    /* Center the children (slider-thumb-text) */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    position: absolute;
    left: -14px;
    top: -17px;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    transform: scale(0.4) translate3d(0, 67.5px, 0);
    transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    /* The arrow pointing down under the sign */ }
    nd-range-slider ._md-sign::after {
      position: absolute;
      content: '';
      left: 0px;
      border-radius: 16px;
      top: 19px;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-top-width: 16px;
      border-top-style: solid;
      opacity: 0;
      transform: translate3d(0, -8px, 0);
      transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1); }
    nd-range-slider ._md-sign ._md-thumb-text {
      z-index: 1;
      font-size: 12px;
      font-weight: bold; }
  nd-range-slider ._md-focus-ring {
    position: absolute;
    left: -17px;
    top: 7px;
    width: 34px;
    height: 34px;
    border-radius: 34px;
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1); }
  nd-range-slider ._md-disabled-thumb {
    position: absolute;
    left: -14px;
    top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    transform: scale(0.5);
    border-width: 4px;
    border-style: solid;
    display: none; }
  nd-range-slider._md-min ._md-sign {
    opacity: 0; }
  nd-range-slider:focus {
    outline: none; }
  nd-range-slider._md-dragging ._md-thumb-container,
  nd-range-slider._md-dragging ._md-track-fill {
    transition: none; }
  nd-range-slider:not([md-discrete]) {
    /* Hide the sign and ticks in non-discrete mode */ }
    nd-range-slider:not([md-discrete]) ._md-track-ticks,
    nd-range-slider:not([md-discrete]) ._md-sign {
      display: none; }
    nd-range-slider:not([md-discrete]):not([disabled]) ._md-slider-wrapper ._md-thumb:hover {
      transform: scale(0.8); }
    nd-range-slider:not([md-discrete]):not([disabled]) ._md-slider-wrapper.md-focused ._md-focus-ring {
      transform: scale(1);
      opacity: 1; }
    nd-range-slider:not([md-discrete]):not([disabled]) ._md-slider-wrapper.md-focused ._md-thumb {
      animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1); }
    nd-range-slider:not([md-discrete]):not([disabled])._md-active ._md-slider-wrapper ._md-thumb {
      transform: scale(1); }
  nd-range-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-focus-ring {
    transform: scale(0);
    animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
  nd-range-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-thumb {
    animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
  nd-range-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-thumb, nd-range-slider[md-discrete]:not([disabled])._md-active ._md-thumb {
    transform: scale(0); }
  nd-range-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-sign,
  nd-range-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-sign:after, nd-range-slider[md-discrete]:not([disabled])._md-active ._md-sign,
  nd-range-slider[md-discrete]:not([disabled])._md-active ._md-sign:after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1); }
  nd-range-slider[md-discrete][disabled][readonly] ._md-thumb {
    transform: scale(0); }
  nd-range-slider[md-discrete][disabled][readonly] ._md-sign,
  nd-range-slider[md-discrete][disabled][readonly] ._md-sign::after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1); }
  nd-range-slider[disabled] ._md-track-fill {
    display: none; }
  nd-range-slider[disabled] ._md-track-ticks {
    opacity: 0; }
  nd-range-slider[disabled]:not([readonly]) ._md-sign {
    opacity: 0; }
  nd-range-slider[disabled] ._md-thumb {
    transform: scale(0.5); }
  nd-range-slider[disabled] ._md-disabled-thumb {
    display: block; }
  nd-range-slider[md-vertical] {
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 128px;
    min-width: 0; }
    nd-range-slider[md-vertical] ._md-slider-wrapper {
      -ms-flex: 1;
          flex: 1;
      padding-top: 12px;
      padding-bottom: 12px;
      width: 48px;
      -ms-flex-item-align: center;
          align-self: center;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center; }
    nd-range-slider[md-vertical] ._md-track-container {
      height: 100%;
      width: 2px;
      top: 0;
      left: calc(50% - (2px / 2)); }
    nd-range-slider[md-vertical] ._md-thumb-container {
      top: auto;
      margin-bottom: 23px;
      left: calc(50% - 1px);
      bottom: 0; }
      nd-range-slider[md-vertical] ._md-thumb-container ._md-thumb::after {
        left: 1px; }
      nd-range-slider[md-vertical] ._md-thumb-container ._md-focus-ring {
        left: -16px; }
    nd-range-slider[md-vertical] ._md-track-fill {
      bottom: 0; }
    nd-range-slider[md-vertical][md-discrete] ._md-sign {
      left: -40px;
      top: 9.5px;
      transform: scale(0.4) translate3d(67.5px, 0, 0);
      /* The arrow pointing left next the sign */ }
      nd-range-slider[md-vertical][md-discrete] ._md-sign::after {
        top: 9.5px;
        left: 19px;
        border-top: 14px solid transparent;
        border-right: 0;
        border-bottom: 14px solid transparent;
        border-left-width: 16px;
        border-left-style: solid;
        opacity: 0;
        transform: translate3d(0, -8px, 0);
        transition: all 0.2s ease-in-out; }
      nd-range-slider[md-vertical][md-discrete] ._md-sign ._md-thumb-text {
        z-index: 1;
        font-size: 12px;
        font-weight: bold; }
    nd-range-slider[md-vertical][md-discrete]._md-active ._md-sign::after,
    nd-range-slider[md-vertical][md-discrete] .md-focused ._md-sign::after, nd-range-slider[md-vertical][md-discrete][disabled][readonly] ._md-sign::after {
      top: 0; }
    nd-range-slider[md-vertical][disabled][readonly] ._md-thumb {
      transform: scale(0); }
    nd-range-slider[md-vertical][disabled][readonly] ._md-sign,
    nd-range-slider[md-vertical][disabled][readonly] ._md-sign::after {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1); }
  nd-range-slider[md-invert]:not([md-vertical]) ._md-track-fill {
    left: auto;
    right: 0; }
  nd-range-slider[md-invert][md-vertical] ._md-track-fill {
    bottom: auto;
    top: 0; }

md-slider-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-direction: row;
      flex-direction: row; }
  md-slider-container > *:first-child:not(md-slider),
  md-slider-container > *:last-child:not(md-slider) {
    min-width: 25px;
    max-width: 42px;
    height: 25px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: color, max-width; }
  md-slider-container > *:first-child:not(md-slider) {
    margin-right: 16px; }
  md-slider-container > *:last-child:not(md-slider) {
    margin-left: 16px; }
  md-slider-container[md-vertical] {
    -ms-flex-direction: column;
        flex-direction: column; }
    md-slider-container[md-vertical] > *:first-child:not(md-slider),
    md-slider-container[md-vertical] > *:last-child:not(md-slider) {
      margin-right: 0;
      margin-left: 0;
      text-align: center; }
  md-slider-container md-input-container input[type='number'] {
    text-align: center;
    padding-left: 15px;
    height: 50px;
    margin-top: -25px; }

@media screen and (-ms-high-contrast: active) {
  md-slider.md-default-theme ._md-track {
    border-bottom: 1px solid #fff; } }

nd-range-slider ._md-track-container {
  height: 6px; }

nd-range-slider ._md-track {
  background-color: #e6e4e3;
  border-radius: 3px; }

nd-range-slider ._md-track-fill {
  background-color: #0000a0;
  transition-property: width, height, left, top; }

nd-range-slider[disabled] ._md-track-fill {
  display: block;
  background: #8b8a8d; }

nd-range-slider .nd-range-slider-track-label {
  position: absolute;
  top: 10px;
  font-size: 0.8125rem; }

nd-range-slider .nd-range-slider-track-label-min {
  left: 0; }

nd-range-slider .nd-range-slider-track-label-max {
  right: 0; }

nd-range-slider[disabled] ._md-thumb {
  transform: scale(0.7); }

nd-range-slider[disabled] ._md-thumb::after {
  background: #8b8a8d;
  border-color: #8b8a8d; }

nd-range-slider ._md-disabled-thumb {
  border-color: #8b8a8d; }

nd-range-slider ._md-focus-ring {
  background-color: rgba(0, 0, 160, 0.4);
  top: 8px;
  left: -18px; }

nd-range-slider ._md-slider-wrapper.md-focused ._md-focus-ring {
  display: none; }

nd-range-slider ._md-slider-wrapper.md-focused ._md-thumb {
  transform: scale(1);
  animation: none !important; }

nd-range-slider ._md-slider-wrapper.md-focused ._md-thumb::after {
  background: #ffffff; }

nd-range-slider ._md-thumb {
  width: 28px;
  height: 28px;
  left: -14px;
  top: 12px; }
  nd-range-slider ._md-thumb::after {
    background-color: #0000a0;
    border-color: #0000a0;
    border-width: 5px;
    width: 28px;
    height: 28px; }

nd-range-slider._md-active ._md-slider-wrapper ._md-thumb::after {
  background: #ffffff; }

nd-range-slider ._md-sign {
  transform: none;
  text-align: center;
  top: -4px; }
  nd-range-slider ._md-sign ._md-thumb-text {
    font-size: 1rem;
    font-weight: inherit; }

nd-range-slider._md-min ._md-thumb-container ._md-sign,
nd-range-slider._md-max ._md-thumb-container ._md-sign {
  opacity: 1; }

nd-range-slider:not([md-discrete]) {
  /* do not hide the sign and ticks in non-discrete mode */ }
  nd-range-slider:not([md-discrete]) ._md-track-ticks,
  nd-range-slider:not([md-discrete]) ._md-sign {
    display: inline-block; }

nd-range-slider.colors-negative ._md-track,
.colors-negative nd-range-slider ._md-track {
  background-color: #e6e4e3; }

nd-range-slider.colors-negative ._md-track-fill,
.colors-negative nd-range-slider ._md-track-fill {
  background-color: #ffffff; }

nd-range-slider.colors-negative ._md-thumb::after,
.colors-negative nd-range-slider ._md-thumb::after {
  background-color: #ffffff;
  border-color: #ffffff; }

nd-range-slider.colors-negative[disabled] ._md-track-fill,
.colors-negative nd-range-slider[disabled] ._md-track-fill {
  background: #e6e4e3; }

nd-range-slider.colors-negative[disabled] ._md-thumb::after,
.colors-negative nd-range-slider[disabled] ._md-thumb::after {
  background: #e6e4e3;
  border-color: #e6e4e3; }

nd-range-slider.colors-negative._md-active ._md-slider-wrapper ._md-thumb::after,
.colors-negative nd-range-slider._md-active ._md-slider-wrapper ._md-thumb::after {
  background: #e6e4e3; }

.nd-spinner {
  width: 100%;
  position: relative;
  pointer-events: none; }
  .nd-spinner:focus {
    outline: none; }

.nd-spinner__progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }
  .nd-spinner__progress:focus {
    outline: none; }

.button--expand {
  vertical-align: middle; }

.button--expand__text {
  display: inline-block;
  vertical-align: middle; }

.modal {
  overflow: auto;
  max-height: calc(100vh - 210px); }
  .large > .modal {
    min-height: 100%;
    -ms-flex-item-align: start;
        align-self: flex-start; }
  .modal__header {
    color: #ffffff;
    background-color: #0000a0;
    box-sizing: content-box;
    text-align: center;
    padding: 1rem;
    margin: -1rem;
    margin-bottom: 1rem;
    width: 100%; }
    .modal__header > * {
      color: #ffffff;
      margin-bottom: 0; }
    .modal__header .close-button {
      right: 1.5rem;
      top: 1.5rem; }

.timePicker__header, .timePicker__arrows-top, .timePicker__arrows-bottom, .timePicker__numbers, .timePicker__controls {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center; }

.timePicker {
  display: inline-block;
  position: relative; }
  .timePicker input:focus {
    outline: none; }
  .timePicker__header {
    height: 48px;
    width: 11.875rem;
    padding: 0;
    background-color: #0000a0;
    color: #ffffff;
    font-size: 1.25rem; }
  .timePicker__main {
    height: 228px;
    width: 11.875rem;
    line-height: 1;
    top: 0;
    left: 0;
    display: inline-block;
    position: absolute;
    border: 1px #e6e4e3;
    color: #000000;
    padding: 0;
    background: #ffffff;
    z-index: 200;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); }
  .timePicker__input {
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #e6e4e3;
    font-size: 2rem;
    width: 45px; }
  .timePicker__inputSign {
    font-size: 2rem; }
  .timePicker__buttons {
    color: #0000a0;
    margin-top: 0.5rem; }
    .timePicker__buttons:hover {
      color: #3399ff; }
  .timePicker__arrows-top {
    height: 16px; }
    .timePicker__arrows-top button {
      margin-top: -0.5rem; }
      .timePicker__arrows-top button .icon {
        margin-top: -1.5rem;
        margin-bottom: -0.8rem; }
  .timePicker__arrows-bottom {
    height: 16px; }
    .timePicker__arrows-bottom button {
      margin-top: -1.5rem; }
      .timePicker__arrows-bottom button .icon {
        margin-top: -1.5rem;
        margin-bottom: -1.5rem; }
  .timePicker__numbers {
    margin-top: 0.5rem;
    margin-bottom: 1rem; }
  .timePicker__controls {
    margin-top: 1rem; }
  .timePicker__actionarea {
    height: 180px;
    margin: 1.5rem; }
    .timePicker__actionarea .icon--small,
    .timePicker__actionarea .icon--small svg {
      width: 3rem;
      height: 3rem; }
      .timePicker__actionarea .icon--small:hover,
      .timePicker__actionarea .icon--small svg:hover {
        color: #3399ff; }

.colors-negative .timePicker__header {
  background-color: #f0c1ae;
  color: #000000; }

.colors-negative .timePicker__icons {
  color: #0000a0; }

.nd-steps {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap; }
  .nd-steps__step {
    -ms-flex: 1 1;
        flex: 1 1;
    text-align: center;
    display: -ms-flexbox;
    display: flex; }
    .nd-steps__step--active .nd-steps__step-bubble {
      width: 4rem;
      height: 4rem;
      line-height: 4rem;
      margin: 0;
      margin-bottom: 0.5rem; }
    .nd-steps__step--done .nd-steps__step-bubble {
      background: #006060;
      border: none; }
  .nd-steps__checkmark-icon {
    width: 1rem; }
    .nd-steps__checkmark-icon g {
      fill: #ffffff; }
  .nd-steps__step-line {
    -ms-flex-positive: 1;
        flex-grow: 1;
    height: 1px;
    border-bottom: 1px solid #f0c1ae;
    margin: 0;
    margin-top: 2rem; }
  .nd-steps__step-line--hidden {
    border: none; }
  .nd-steps__step-line--left {
    margin-right: 0.5rem; }
  .nd-steps__step-line--right {
    margin-left: 0.5rem; }
  .nd-steps__step-content-wrapper {
    -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    outline: none; }
  .nd-steps__step-bubble-wrapper {
    display: -ms-flexbox;
    display: flex; }
  .nd-steps__step-bubble {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    color: #000000;
    border: 1px solid #f0c1ae;
    border-radius: 50%;
    line-height: 2rem;
    vertical-align: middle;
    font-weight: 400;
    font-size: 1.25rem;
    margin: 1rem;
    margin-bottom: 1.5rem;
    transition-timing-function: ease-in-out;
    transition-property: all, background-color, border;
    transition-duration: 0.15s, 0.075s, 0.225s; }
  .nd-steps__step-label {
    display: inline-block;
    margin: 0 0.5rem;
    font-size: 0.8125rem; }
  .nd-steps--interactive .nd-steps__step-bubble {
    outline: none; }
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active) .nd-steps__step-bubble {
    color: #0000ff;
    cursor: pointer; }
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active) .nd-steps__step-label {
    cursor: pointer; }
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active) .nd-steps__step-bubble:hover,
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active) .nd-steps__step-bubble:focus {
    color: #0000ff;
    background: #ffffff;
    border-color: #ffffff;
    transition-duration: 0.15s, 0.225s, 0.075s; }
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active).nd-steps__step--done .nd-steps__step-bubble:hover,
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active).nd-steps__step--done .nd-steps__step-bubble:focus {
    background: #ffffff; }
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active).nd-steps__step--done .nd-steps__step-bubble:hover .nd-steps__checkmark-icon g,
  .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active).nd-steps__step--done .nd-steps__step-bubble:focus .nd-steps__checkmark-icon g {
    fill: #0000a0; }
  .colors-negative .nd-steps__step--done .nd-steps__step-bubble {
    background: #40bfa3; }
  .colors-negative .nd-steps__step--line {
    background: #f0c1ae; }
  .colors-negative .nd-steps__step-bubble {
    border-color: #f0c1ae;
    color: #ffffff;
    transition-duration: 0.15s; }
  .colors-negative .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active) .nd-steps__step-bubble {
    color: #f0c1ae; }
  .colors-negative .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active) .nd-steps__step-bubble:hover,
  .colors-negative .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active) .nd-steps__step-bubble:focus {
    color: #0000a0;
    background: #ffffff;
    border-color: #ffffff;
    transition-duration: 0.15s; }
  .colors-negative .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active).nd-steps__step--done .nd-steps__step-bubble:hover,
  .colors-negative .nd-steps--interactive .nd-steps__step:not(.nd-steps__step--active).nd-steps__step--done .nd-steps__step-bubble:focus {
    background: #ffffff; }

.nd-pagination {
  outline-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .nd-pagination a.nd-pagination-button {
    text-decoration: none; }

.nd-pagination-button {
  color: #0000a0;
  font-size: 1.25rem;
  margin: 0 5px;
  cursor: pointer; }
  .nd-pagination-button--selected {
    outline: none;
    background-color: #f0c1ae;
    border-radius: 50%; }
  .nd-pagination-button--disabled .icon {
    color: #8b8a8d;
    cursor: default; }
  .nd-pagination-button--page {
    display: inline-block;
    height: 30px;
    width: 30px;
    text-align: center; }
    .nd-pagination-button--page:hover, .nd-pagination-button--page:focus {
      outline: none;
      background-color: #f0c1ae;
      border-radius: 50%; }
  .nd-pagination-button--previous {
    margin-right: 15px; }
  .nd-pagination-button--next {
    margin-left: 15px; }
  .nd-pagination-button--more {
    cursor: default; }
    .nd-pagination-button--more:hover, .nd-pagination-button--more:focus {
      outline: inherit;
      background-color: inherit;
      border-radius: inherit; }
  .nd-pagination-button--hidden {
    visibility: hidden; }

.colors-negative .nd-pagination-button {
  color: #ffffff; }
  .colors-negative .nd-pagination-button--disabled .icon {
    color: #8b8a8d; }
  .colors-negative .nd-pagination-button--selected {
    color: #0000a0; }
  .colors-negative .nd-pagination-button--page:hover, .colors-negative .nd-pagination-button--page:focus {
    color: #0000a0; }
  .colors-negative .nd-pagination-button--first:hover, .colors-negative .nd-pagination-button--first:focus, .colors-negative .nd-pagination-button--last:hover, .colors-negative .nd-pagination-button--last:focus {
    color: #ffffff; }
  .colors-negative .nd-pagination-button--more:hover, .colors-negative .nd-pagination-button--more:focus {
    color: #ffffff; }

nd-icon {
  color: #0000ff;
  position: relative; }
  nd-icon .icon {
    color: currentColor; }
  nd-icon ng-transclude {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.nd-notification {
  opacity: 0;
  transition: opacity 0.5s ease-in-out; }
  .nd-notification--active {
    opacity: 1;
    transition: opacity 0.5s ease-in-out; }

.expand-row__preview {
  cursor: pointer; }

.expand-row__preview:not(.expand-row__preview--header):hover {
  color: #000000;
  background-color: #fdece4; }

.expand-row__details:not(.expand-row__details--header):hover {
  color: #000000;
  background-color: #fdece4; }

.expand-row:hover .expand-row__details__content::before {
  background-color: transparent; }

.expand-row__preview--header {
  text-transform: uppercase;
  cursor: default; }

.expand-row__preview--footer {
  cursor: default; }

.expand-row__preview__content,
.expand-row__details__content,
.expand-row__details__actions {
  padding: 1rem 0; }

.expand-row__details__content--separated,
.expand-row__details__actions--separated {
  border-top: 1px solid #e6e4e3; }

.expand-row__side--selector md-radio-button,
.expand-row__side--selector md-checkbox {
  padding: 0;
  margin: 0;
  width: 32px; }

.row .row.expand-row {
  margin-left: 0;
  margin-right: 0; }

.expand-row-container {
  border: 1px solid #e6e4e3; }

.expand-row {
  position: relative; }
  .expand-row--expanded:before {
    width: 100%;
    height: 1px;
    background-color: #e6e4e3;
    top: 0; }

.expand-row__preview__content {
  position: relative; }
  .expand-row__preview__content:before {
    width: 100%;
    height: 1px;
    background-color: #e6e4e3;
    top: 100%;
    left: 0; }

.footer-row .expand-row__preview__content::before {
  top: 0; }

.footer-row .expand-row__preview__content,
.header-row .expand-row__preview__content {
  position: static; }

.header-row {
  position: relative; }
  .header-row .expand-row__preview--header {
    position: relative; }
    .header-row .expand-row__preview--header:before {
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0; }

.footer-row .expand-row__preview--footer {
  position: relative; }
  .footer-row .expand-row__preview--footer:before {
    width: 100%;
    height: 1px;
    top: 0;
    left: 0; }

.expand-row--expanded {
  position: relative; }
  .expand-row--expanded .expand-row__preview__content {
    position: static; }
    .expand-row--expanded .expand-row__preview__content:before {
      background-color: #e6e4e3; }

.expand-row-container--white {
  background-color: #ffffff; }
  .expand-row-container--white .expand-row__preview--header {
    background-color: #fafafa; }

.nd-slide-up-down.ng-enter-prepare {
  display: none; }

/**
 * Foundation for Sites by ZURB
 * Version 6.2.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
md-option[selected]:not(._md-checkbox-enabled):after, md-select-menu[multiple] md-option._md-checkbox-enabled:after, md-select-menu[multiple] md-option._md-checkbox-enabled[selected]:after {
  content: '';
  position: absolute; }

/**
Primary buttons

Primary is the default button style.

.button - Primary button [default], is required to apply styles common to all buttons, will default to primary button style if no other style is given
.button.button--primary - Primary button [default], use for main actions in a page
.button.button--primary:hover - Primary button, hover state
.button.button--primary.disabled - Primary button, disabled state. Automatically applied to buttons with the <code>disabled</code> attribute.
.button.button--primary.button--large - Primary button, large

Markup: _button.html

Styleguide 2.1.1
*/
/**
Secondary style buttons

Use for links and secondary actions.

.button.button--secondary - Secondary button
.button.button--secondary:hover - Secondary button, hover state
.button.button--secondary.disabled - Secondary button, disabled state. Automatically applied to buttons with the <code>disabled</code> attribute.
.button.button--secondary.button--large - Secondary button, large

Markup: _button.html

Styleguide 2.1.3
*/
/**
Tertiary buttons

Use for supplementary actions on the view, as rarely as possible.

.button.button--tertiary - Tertiary button
.button.button--tertiary:hover - Tertiary button, hover state
.button.button--tertiary.disabled - Tertiary button, disabled state. Automatically applied to buttons with the <code>disabled</code> attribute.
.button.button--tertiary.button--large - Tertiary button, large

Markup: _button.html

Styleguide 2.1.4
*/
/**
Buttons with icons

With normal-sized buttons use the small <a href="#/section/1.5.2">icon size</a>, preferably <a href="#/section/1.5.5">small svg icons</a> only. With large buttons you can use <a href="#/section/1.5.2">icon sizes</a> up to medium (default), preferably <a href="#/section/1.5.4">standard-sized svg icons</a> only.

You can have at most two icons inside a button, one per side. If you have two icons, use both of the modifier classes.

.button--icon-left - Icon inside button on the left side
.button--icon-right - Icon inside button on the right side

Markup: _button--icon.html

Styleguide 2.1.5
*/
/**
Buttons with icons only

Each row in the examples below demonstrates a button style applied to buttons with ```.icon .icon--small```, ```.icon .icon--smallish```, ```.icon``` and a disabled button. Hover and focus styles behave the same as with text buttons.

.button--primary.button--icon - Primary button with icon only
.button--secondary.button--icon - Secondary button with icon only
.button--tertiary.button--icon - Tertiary button with icon only

Markup:
<button type="button" class="button {$modifiers}">
  <svg class="icon icon--small" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#arrow_up_sml"></use></svg>
</button>
<button type="button" class="button {$modifiers}">
  <svg class="icon icon--smallish" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#calendar"></use></svg>
</button>
<button type="button" class="button {$modifiers}">
  <svg class="icon" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#home"></use></svg>
</button>
<button type="button" class="button {$modifiers}" disabled>
  <svg class="icon" focusable="false"><use xlink:href="/build/icons/icon-pack.svg#chatBubble"></use></svg>
</button>

Styleguide 2.1.5.1
*/
/*
Button Rows

Below are examples of how to create grouped rows of buttons inside of other wrapper elements. There are no additional styles involved, so you can use any wrapper. Use the .button--large class on buttons within for larger style.
- Use helper classes on the wrapper if you need, e.g. ```.text--center```.
- The default order of the buttons should place positive (confirm, primary) button on the right and negative (cancel, secondary) button on the left side.

.button       - Normal button group
.button.button--large - Large button group

Markup:
<p class="text--center">
  <button type="button" class="{$modifiers} button--primary">button 1</button>
  <button type="button" class="{$modifiers} button--primary">button 2</button>
  <button type="button" class="{$modifiers} button--primary">button 3</button>
</p>
<p class="text--center">
  <button type="button" class="{$modifiers} button--secondary">Cancel</button>
  <button type="button" class="{$modifiers} button--primary">Confirm</button>
</p>
<p class="text--center">
  <button type="button" class="{$modifiers} button--primary">Action 1</button>
  <button type="button" class="{$modifiers} button--primary">Action 2</button>
  <button type="button" class="{$modifiers} button--primary disabled">disabled</button>
</p>

Styleguide 2.1.6
*/
/*
Buttons in container

Buttons should be located on the right side of a container, e.g. in notification bar.

Markup:
<div class="container row align-middle">
  <div class="column">
    TextLabel (body style)
  </div>
  <div class="column shrink">
    <button type="button" class="button button--secondary">Secondary</button>
    <button type="button" class="button button--primary">Primary</button>
  </div>
</div>

Styleguide 2.1.7
*/
/*
Safe zone

Buttons should have a minimum clear space of 0.75rem ($nordea-safe-zone) around them. This is a UI design guideline and its implementation may vary. The safe zone is not a simple, fixed margin around a button, but the clear space of other elements may provide it. For example if a container may provide enough padding so a button never touches the container border, or buttons may be center-aligned in a row that has a minimum width so the buttons always have enough clear space.

Markup:
<div class="float-left styleguide__color-box--nordea-pink styleguide__safe-zone">
  <button type="button" class="button button--primary">Button</button>
</div>

Styleguide 2.1.8
*/
a._md-no-style,
button._md-no-style {
  font-weight: normal;
  background-color: inherit;
  text-align: left;
  border: none;
  padding: 0;
  margin: 0; }

._md-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 1px; }

.md-shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: inherit;
  pointer-events: none; }

.md-shadow-bottom-z-1 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }

.md-shadow-bottom-z-2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); }

.md-shadow-animated.md-shadow {
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); }

/*
 * A container inside of a rippling element (eg a button),
 * which contains all of the individual ripples
 */
.md-ripple-container {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1); }

.md-ripple {
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  opacity: 0;
  border-radius: 50%; }
  .md-ripple.md-ripple-placed {
    transition: margin 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), border 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .md-ripple.md-ripple-scaled {
    transform: translate(-50%, -50%) scale(1); }
  .md-ripple.md-ripple-active, .md-ripple.md-ripple-full, .md-ripple.md-ripple-visible {
    opacity: 0.20; }

.md-padding {
  padding: 8px; }

.md-margin {
  margin: 8px; }

.md-scroll-mask {
  position: absolute;
  background-color: transparent;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 600; }
  .md-scroll-mask > .md-scroll-mask-bar {
    display: block;
    position: absolute;
    background-color: #fafafa;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 800;
    box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.3); }

@media (min-width: 960px) {
  .md-padding {
    padding: 16px; } }

md-autocomplete md-autocomplete-wrap.md-menu-showing {
  z-index: 501; }

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
  z-index: 1800; }

md-autocomplete {
  border-radius: 0; }
  md-autocomplete:focus {
    outline: none; }
  md-autocomplete button {
    position: absolute;
    right: 0;
    top: 0.25rem;
    color: #0000ff;
    margin: auto 1rem; }
    md-autocomplete button md-icon svg {
      stroke-width: 1.5; }
  md-autocomplete input:not(.md-input) {
    border-bottom: #c9c7c7 solid 2px;
    font-size: 1.25rem;
    color: #000000;
    width: 100%;
    box-sizing: border-box;
    padding: 0 3.5rem 0 1rem; }
    md-autocomplete input:not(.md-input)::-webkit-input-placeholder {
      color: #8b8a8d; }
    md-autocomplete input:not(.md-input):-moz-placeholder {
      color: #8b8a8d; }
    md-autocomplete input:not(.md-input)::-moz-placeholder {
      color: #8b8a8d; }
    md-autocomplete input:not(.md-input):-ms-input-placeholder {
      color: #8b8a8d; }
    md-autocomplete input:not(.md-input)::-webkit-input-placeholder {
      color: #8b8a8d; }
    md-autocomplete input:not(.md-input).ng-invalid.ng-touched {
      border-bottom-color: #b00000; }
  md-autocomplete input:not(.md-input):focus,
  md-autocomplete .md-menu-showing input:not(.md-input) {
    border-color: #0000ff;
    outline: none; }
  md-autocomplete[disabled] input:not(.md-input) {
    color: #8b8a8d;
    border-bottom-color: #e6e4e3;
    border-bottom-style: dotted; }
  md-autocomplete md-input-container {
    display: block; }

.md-autocomplete-suggestions-container {
  background: #ffffff; }
  .md-autocomplete-suggestions-container li {
    color: #000000; }
    .md-autocomplete-suggestions-container li .highlight {
      font-weight: 700; }
    .md-autocomplete-suggestions-container li:hover, .md-autocomplete-suggestions-container li.selected {
      background: #fdece4; }

.md-virtual-repeat-container.md-autocomplete-suggestions-container {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }

md-backdrop {
  transition: opacity 450ms;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500; }
  md-backdrop._md-menu-backdrop {
    position: fixed !important;
    z-index: 1699; }
  md-backdrop._md-select-backdrop {
    z-index: 1201;
    transition-duration: 0; }
  md-backdrop._md-dialog-backdrop {
    z-index: 1199; }
  md-backdrop._md-bottom-sheet-backdrop {
    z-index: 899; }
  md-backdrop._md-sidenav-backdrop {
    z-index: 699; }
  md-backdrop._md-click-catcher {
    position: absolute; }
  md-backdrop.md-opaque {
    opacity: .48; }
    md-backdrop.md-opaque.ng-enter {
      opacity: 0; }
    md-backdrop.md-opaque.ng-enter.md-opaque.ng-enter-active {
      opacity: .48; }
    md-backdrop.md-opaque.ng-leave {
      opacity: .48;
      transition: opacity 400ms; }
    md-backdrop.md-opaque.ng-leave.md-opaque.ng-leave-active {
      opacity: 0; }

/**
- Variables defined here have kept the original names from Angular material.
- Commented variables are defined originally in AM but we do not need them.
- Variable values have been set to values defined in Foundation.
- Line comments demonstrate the values used to define Foundation variables.
*/
.md-button {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  overflow: hidden; }
  .md-button::-moz-focus-inner {
    border: 0; }
  .md-button.ng-hide, .md-button.ng-leave {
    transition: none; }
  .md-button.md-icon {
    padding: 0;
    background: none; }
  .md-button .md-ripple-container {
    border-radius: 50px;
    background-clip: padding-box;
    overflow: hidden;
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }

md-radio-button {
  margin: 0; }
  md-radio-button ._md-container {
    width: 20px;
    height: 20px; }
  md-radio-button ._md-off {
    width: 20px;
    height: 20px;
    border: 2px solid #0000ff;
    transition: none; }
  md-radio-button ._md-on {
    width: 20px;
    height: 20px;
    border: 2px solid #0000ff;
    background-color: #0000ff; }
  md-radio-button.md-checked ._md-on {
    transform: none; }
  md-radio-button .md-ink-ripple {
    color: #3399ff; }
  md-radio-button:not([disabled]):hover ._md-off {
    border: 2px solid #3399ff;
    background: #fdece4; }
  md-radio-button:not([disabled]):hover ._md-on {
    border: 2px solid #3399ff; }

md-radio-group > * + * {
  margin-top: 0.75rem; }

md-radio-group[disabled],
md-radio-button[disabled] {
  color: #8b8a8d; }
  md-radio-group[disabled] ._md-container ._md-off,
  md-radio-button[disabled] ._md-container ._md-off {
    border: 2px solid #8b8a8d; }
  md-radio-group[disabled] ._md-container ._md-on,
  md-radio-button[disabled] ._md-container ._md-on {
    border: 2px solid #8b8a8d;
    background-color: #8b8a8d; }

md-radio-group.md-focused:not(:empty) .md-checked ._md-container:before {
  background-color: rgba(127, 191, 255, 0.3); }

md-radio-group.md-focused.ng-empty md-radio-button:not([disabled]) ._md-container:before {
  left: -8px;
  top: -8px;
  right: -8px;
  bottom: -8px;
  background-color: rgba(127, 191, 255, 0.3); }

md-radio-group.md-focused.ng-empty md-radio-button:not([disabled]) ~ md-radio-button:not([disabled]) ._md-container:before {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent; }

.nd-radio-group--horizontal {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: start;
      align-items: flex-start; }
  .nd-radio-group--horizontal > * {
    margin-top: 0; }
  .nd-radio-group--horizontal > * + * {
    margin-left: 0.75rem; }

.md-inline-form md-checkbox {
  margin: 19px 0 18px; }

md-checkbox {
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 0;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
  min-width: 20px;
  min-height: 20px;
  margin-left: 0;
  margin-right: 0; }
  [dir=rtl] md-checkbox {
    margin-left: 0; }
  [dir=rtl] md-checkbox {
    margin-right: 0; }
  md-checkbox.md-focused:not([disabled]) ._md-container:before {
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px;
    background-color: rgba(127, 191, 255, 0.3); }
  md-checkbox.md-focused:not([disabled]) ._md-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #0000ff; }
  md-checkbox.md-focused:not([disabled]):not(.md-checked) ._md-icon {
    background: #fdece4; }
  md-checkbox.md-align-top-left > div._md-container {
    top: 12px; }
  md-checkbox ._md-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: 0;
    right: auto; }
    [dir=rtl] md-checkbox ._md-container {
      left: auto; }
    [dir=rtl] md-checkbox ._md-container {
      right: 0; }
    md-checkbox ._md-container:before {
      box-sizing: border-box;
      background-color: transparent;
      border-radius: 50%;
      content: '';
      position: absolute;
      display: block;
      height: auto;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transition: all 0.5s;
      width: auto; }
    md-checkbox ._md-container:after {
      box-sizing: border-box;
      content: '';
      position: absolute;
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px; }
    md-checkbox ._md-container .md-ripple-container {
      position: absolute;
      display: block;
      width: auto;
      height: auto;
      left: -15px;
      top: -15px;
      right: -15px;
      bottom: -15px; }
  md-checkbox ._md-icon {
    box-sizing: border-box;
    transition: 240ms;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 0; }
  md-checkbox.md-checked ._md-icon {
    border: none; }
    md-checkbox.md-checked ._md-icon:after {
      box-sizing: border-box;
      position: absolute;
      display: table;
      width: 100%;
      height: 100%;
      content: '';
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2060%2060%22%20enable%2Dbackground%3D%22new%200%200%2060%2060%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke%2Dwidth%3D%226%22%20stroke%2Dlinecap%3D%22round%22%20stroke%2Dlinejoin%3D%22round%22%20stroke%2Dmiterlimit%3D%2210%22%20points%3D%22%207%2032%2021%2046%2053%2014%20%22%2F%3E%3C%2Fsvg%3E"); }
  md-checkbox[disabled] {
    cursor: default; }
  md-checkbox.md-indeterminate ._md-icon:after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: table;
    width: 12px;
    height: 2px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: ''; }
  md-checkbox ._md-label {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    -webkit-user-select: text;
       -moz-user-select: text;
        -ms-user-select: text;
            user-select: text;
    margin-left: 30px;
    margin-right: 0; }
    [dir=rtl] md-checkbox ._md-label {
      margin-left: 0; }
    [dir=rtl] md-checkbox ._md-label {
      margin-right: 30px; }
  md-checkbox .md-ripple {
    color: #3399ff; }
  md-checkbox.md-checked .md-ripple {
    color: #3399ff; }
  md-checkbox .md-ink-ripple {
    color: #3399ff; }
  md-checkbox.md-checked .md-ink-ripple {
    color: #3399ff; }
  md-checkbox ._md-icon {
    border: 2px solid #0000ff;
    transition: none; }
  md-checkbox.md-checked ._md-icon {
    background-color: #0000ff;
    border: 2px solid #0000ff; }
  md-checkbox[disabled] ._md-icon {
    border: 2px solid #8b8a8d; }
  md-checkbox[disabled].md-checked ._md-icon {
    background-color: #8b8a8d; }
  md-checkbox[disabled] ._md-label {
    color: #8b8a8d; }
  md-checkbox:not([disabled]):hover ._md-icon {
    border: 2px solid #3399ff; }
  md-checkbox:not([disabled]):hover:not(.md-checked) ._md-icon {
    border: 2px solid #3399ff;
    background: #fdece4; }

md-checkbox.nd-checkbox--align-top ._md-container {
  top: 0.25rem;
  transform: none; }

/*
 * This mixin makes it possible to horizontally align a label in another div
 * with the baseline of the text in an input field of different font-size, regardless of how
 * many lines either one has.
 */
.nd-input__inline-label {
  display: inline-block;
  margin-top: -0.8125rem;
  vertical-align: middle;
  margin-right: 1rem; }

md-input-container {
  display: inline-block;
  position: relative;
  padding: 0;
  margin-top: 1.3125rem;
  margin-bottom: 0.5rem;
  vertical-align: middle;
  /*
   * The .md-input class is added to the input/textarea
   */ }
  md-input-container:after {
    content: '';
    display: table;
    clear: both; }
  md-input-container.md-block {
    display: block; }
  md-input-container .md-errors-spacer {
    float: right;
    min-height: 24px;
    min-width: 1px; }
    [dir=rtl] md-input-container .md-errors-spacer {
      float: left; }
  md-input-container .md-resize-handle {
    position: absolute;
    bottom: 20px;
    left: 0;
    height: 10px;
    background: transparent;
    width: 100%;
    cursor: ns-resize; }
  md-input-container textarea,
  md-input-container input[type="text"],
  md-input-container input[type="password"],
  md-input-container input[type="datetime"],
  md-input-container input[type="datetime-local"],
  md-input-container input[type="date"],
  md-input-container input[type="month"],
  md-input-container input[type="time"],
  md-input-container input[type="week"],
  md-input-container input[type="number"],
  md-input-container input[type="email"],
  md-input-container input[type="url"],
  md-input-container input[type="search"],
  md-input-container input[type="tel"],
  md-input-container input[type="color"] {
    /* remove default appearance from all input/textarea */
    -moz-appearance: none;
    -webkit-appearance: none; }
  md-input-container input[type="date"],
  md-input-container input[type="datetime-local"],
  md-input-container input[type="month"],
  md-input-container input[type="time"],
  md-input-container input[type="week"] {
    min-height: 16px; }
  md-input-container input[type=number] {
    -moz-appearance: textfield; }
    md-input-container input[type=number]::-webkit-inner-spin-button, md-input-container input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0; }
  md-input-container input::-ms-clear {
    display: none; }
  md-input-container textarea {
    resize: none;
    overflow: hidden; }
    md-input-container textarea.md-input {
      min-height: 26px;
      -ms-flex-preferred-size: auto; }
    md-input-container textarea[md-no-autogrow] {
      height: auto;
      overflow: auto; }
  md-input-container label, md-input-container ._md-placeholder {
    font-size: 16px;
    line-height: 16px;
    color: #8b8a8d; }
  md-input-container label:not(._md-container-ignore) {
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: auto; }
    [dir=rtl] md-input-container label:not(._md-container-ignore) {
      left: auto; }
    [dir=rtl] md-input-container label:not(._md-container-ignore) {
      right: 0; }
  md-input-container label:not(.md-no-float):not(._md-container-ignore),
  md-input-container ._md-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    -ms-flex-order: 1;
        order: 1;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    padding-left: 16px;
    padding-right: 0;
    z-index: 1;
    transform: translate3d(0, 16px, 0) scale(1);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-width: 100%;
    transform-origin: left top; }
    [dir=rtl] md-input-container label:not(.md-no-float):not(._md-container-ignore), [dir=rtl]
    md-input-container ._md-placeholder {
      padding-left: 0; }
    [dir=rtl] md-input-container label:not(.md-no-float):not(._md-container-ignore), [dir=rtl]
    md-input-container ._md-placeholder {
      padding-right: 17px; }
    [dir=rtl] md-input-container label:not(.md-no-float):not(._md-container-ignore), [dir=rtl]
    md-input-container ._md-placeholder {
      transform-origin: right top; }
  md-input-container ._md-placeholder {
    position: absolute;
    top: 0;
    opacity: 0;
    transition-property: opacity, transform;
    transform: translate3d(0, 18px, 0); }
  md-input-container.md-input-focused ._md-placeholder {
    opacity: 1;
    transform: translate3d(0, 12px, 0); }
  md-input-container.md-input-has-value ._md-placeholder {
    transition: none;
    opacity: 0; }
  md-input-container:not(.md-input-has-value) input:not(:focus),
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-ampm-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-day-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-hour-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-millisecond-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-minute-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-month-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-second-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-week-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-year-field,
  md-input-container:not(.md-input-has-value) input:not(:focus)::-webkit-datetime-edit-text {
    color: transparent; }
  md-input-container .md-input {
    -ms-flex-order: 2;
        order: 2;
    display: block;
    color: #000000;
    border-color: #c9c7c7;
    font-size: 16px;
    background: none;
    padding: 0 16px 8px 16px;
    padding-left: 16px !important;
    margin-top: 0.5rem;
    border-width: 0 0 2px 0;
    line-height: 16px;
    height: 26px;
    -ms-flex-preferred-size: 26px;
    border-radius: 0;
    border-style: solid;
    width: 100%;
    box-sizing: border-box;
    float: left; }
    md-input-container .md-input::-moz-placeholder {
      opacity: 1; }
    md-input-container .md-input::-webkit-input-placeholder {
      color: #8b8a8d; }
    md-input-container .md-input:-moz-placeholder {
      color: #8b8a8d; }
    md-input-container .md-input::-moz-placeholder {
      color: #8b8a8d; }
    md-input-container .md-input:-ms-input-placeholder {
      color: #8b8a8d; }
    md-input-container .md-input::-webkit-input-placeholder {
      color: #8b8a8d; }
    [dir=rtl] md-input-container .md-input {
      float: right; }
    md-input-container .md-input:focus {
      outline: none; }
    md-input-container .md-input:invalid {
      outline: none;
      box-shadow: none; }
    md-input-container .md-input.md-no-flex {
      -ms-flex: none !important;
          flex: none !important; }
  md-input-container .md-char-counter {
    text-align: right;
    padding-right: 0;
    padding-left: 0; }
    [dir=rtl] md-input-container .md-char-counter {
      text-align: left; }
    [dir=rtl] md-input-container .md-char-counter {
      padding-right: 0; }
    [dir=rtl] md-input-container .md-char-counter {
      padding-left: 0; }
  md-input-container .md-input-messages-animation,
  md-input-container .input-container__error {
    position: relative;
    -ms-flex-order: 4;
        order: 4;
    overflow: hidden;
    clear: left; }
    [dir=rtl] md-input-container .md-input-messages-animation, [dir=rtl]
    md-input-container .input-container__error {
      clear: right; }
    md-input-container .md-input-messages-animation.ng-enter .md-input-message-animation,
    md-input-container .input-container__error.ng-enter .md-input-message-animation {
      opacity: 0;
      margin-top: -100px; }
  md-input-container .md-input-message-animation,
  md-input-container .md-char-counter,
  md-input-container .input-container__error {
    font-size: 13px;
    line-height: 15px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    opacity: 1;
    margin-top: 0;
    padding-top: 0.25rem;
    padding-left: 16px; }
    md-input-container .md-input-message-animation:last-child,
    md-input-container .md-char-counter:last-child,
    md-input-container .input-container__error:last-child {
      padding-bottom: 0.25rem; }
  md-input-container .md-char-counter {
    color: #474748;
    padding-left: 16px;
    padding-right: 16px; }
  md-input-container .md-input-messages-animation.input-container__error,
  md-input-container .input-container__error .md-input-messages-animation,
  md-input-container .md-input-messages-animation .input-container__error {
    padding-top: 0; }
  md-input-container .md-input-messages-animation,
  md-input-container .md-input-message-animation,
  md-input-container .input-container__error {
    color: #b00000; }
  md-input-container:not(.md-input-invalid).md-input-has-value label {
    color: #474748; }
  md-input-container:not(.md-input-invalid).md-input-focused .md-input, md-input-container:not(.md-input-invalid).md-input-resized .md-input {
    border-color: #0000ff; }
  md-input-container:not(.md-input-invalid).nd-disabled label, md-input-container:not(.md-input-invalid).nd-disabled.md-input-has-value label {
    color: #8b8a8d; }
  md-input-container:not(.md-input-invalid).nd-disabled input::-webkit-input-placeholder, md-input-container:not(.md-input-invalid).nd-disabled.md-input-has-value input::-webkit-input-placeholder {
    color: #8b8a8d; }
  md-input-container:not(.md-input-invalid).nd-disabled input:-moz-placeholder, md-input-container:not(.md-input-invalid).nd-disabled.md-input-has-value input:-moz-placeholder {
    color: #8b8a8d; }
  md-input-container:not(.md-input-invalid).nd-disabled input::-moz-placeholder, md-input-container:not(.md-input-invalid).nd-disabled.md-input-has-value input::-moz-placeholder {
    color: #8b8a8d; }
  md-input-container:not(.md-input-invalid).nd-disabled input:-ms-input-placeholder, md-input-container:not(.md-input-invalid).nd-disabled.md-input-has-value input:-ms-input-placeholder {
    color: #8b8a8d; }
  md-input-container:not(.md-input-invalid).nd-disabled input::-webkit-input-placeholder, md-input-container:not(.md-input-invalid).nd-disabled.md-input-has-value input::-webkit-input-placeholder {
    color: #8b8a8d; }
  md-input-container:not(.md-input-invalid).md-input-focused label, md-input-container:not(.md-input-invalid).nd-input-focused label {
    color: #474748; }
  md-input-container:not(.md-input-invalid) .input-container__error {
    display: none; }
  md-input-container.md-input-invalid .md-input {
    border-color: #b00000; }
  md-input-container.md-input-invalid label {
    color: #b00000; }
  md-input-container.md-input-invalid .md-char-counter {
    color: #b00000; }
  md-input-container.md-input-invalid .input-container__error {
    display: block; }
  md-input-container.md-input-invalid:not(.md-auto-hide) .md-input-message-animation {
    opacity: 1;
    margin-top: 0; }
  md-input-container:not(.md-input-invalid) .md-auto-hide .md-input-message-animation {
    opacity: 0;
    margin-top: -100px; }
  md-input-container .md-input-message-animation:not(.ng-animate) {
    opacity: 0;
    margin-top: -100px; }
  md-input-container .md-input-message-animation.ng-enter {
    opacity: 0;
    margin-top: -100px; }
  md-input-container.md-input-focused:not(.nd-readonly) label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
    padding-left: 19.69231px;
    padding-right: 0;
    transform: translate3d(0, 0, 0) scale(0.8125);
    transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
    top: -13px; }
    [dir=rtl] md-input-container.md-input-focused:not(.nd-readonly) label:not(.md-no-float), [dir=rtl] md-input-container.md-input-has-placeholder label:not(.md-no-float), [dir=rtl] md-input-container.md-input-has-value label:not(.md-no-float) {
      padding-left: 0; }
    [dir=rtl] md-input-container.md-input-focused:not(.nd-readonly) label:not(.md-no-float), [dir=rtl] md-input-container.md-input-has-placeholder label:not(.md-no-float), [dir=rtl] md-input-container.md-input-has-value label:not(.md-no-float) {
      padding-right: 19.69231px; }
  md-input-container.md-input-has-value label {
    transition: none; }
  md-input-container .md-input[disabled],
  [disabled] md-input-container .md-input {
    border-bottom-color: #e6e4e3;
    border-style: dotted;
    color: #8b8a8d;
    background-position: bottom -2px left 0;
    background-size: 4px 1px;
    background-repeat: repeat-x; }
  md-input-container > md-icon, md-input-container > .icon {
    color: #0000ff;
    position: absolute;
    top: -4px;
    left: 2px;
    right: auto; }
    [dir=rtl] md-input-container > md-icon, [dir=rtl] md-input-container > .icon {
      left: auto; }
    [dir=rtl] md-input-container > md-icon, [dir=rtl] md-input-container > .icon {
      right: 2px; }
  md-input-container.md-icon-left > .icon--small, md-input-container.md-icon-right > .icon--small, md-input-container.nd-icon-left-inside > .icon--small, md-input-container.nd-icon-right-inside > .icon--small {
    top: -2px;
    padding: 8px;
    padding-left: 24px; }
  md-input-container.md-icon-float {
    transition: margin-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
    md-input-container.md-icon-float > label {
      pointer-events: none;
      position: absolute; }
    md-input-container.md-icon-float > md-icon, md-input-container.md-icon-float > .icon {
      top: -4px;
      left: 2px;
      right: auto; }
      [dir=rtl] md-input-container.md-icon-float > md-icon, [dir=rtl] md-input-container.md-icon-float > .icon {
        left: auto; }
      [dir=rtl] md-input-container.md-icon-float > md-icon, [dir=rtl] md-input-container.md-icon-float > .icon {
        right: 2px; }
  md-input-container.md-icon-left > label:not(.md-no-float):not(._md-container-ignore),
  md-input-container.md-icon-left > label ._md-placeholder, md-input-container.md-icon-right > label:not(.md-no-float):not(._md-container-ignore),
  md-input-container.md-icon-right > label ._md-placeholder {
    width: calc(100% - 32px - 16px); }
  md-input-container.md-icon-left {
    padding-left: 32px;
    padding-right: 0; }
    [dir=rtl] md-input-container.md-icon-left {
      padding-left: 0; }
    [dir=rtl] md-input-container.md-icon-left {
      padding-right: 32px; }
    md-input-container.md-icon-left > label {
      left: 32px;
      right: auto; }
      [dir=rtl] md-input-container.md-icon-left > label {
        left: auto; }
      [dir=rtl] md-input-container.md-icon-left > label {
        right: 32px; }
  md-input-container.md-icon-right {
    padding-left: 0;
    padding-right: 32px; }
    [dir=rtl] md-input-container.md-icon-right {
      padding-left: 32px; }
    [dir=rtl] md-input-container.md-icon-right {
      padding-right: 0; }
    md-input-container.md-icon-right > md-icon:last-of-type, md-input-container.md-icon-right > .icon:last-of-type {
      margin: 0;
      right: 2px;
      left: auto; }
      [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type, [dir=rtl] md-input-container.md-icon-right > .icon:last-of-type {
        right: auto; }
      [dir=rtl] md-input-container.md-icon-right > md-icon:last-of-type, [dir=rtl] md-input-container.md-icon-right > .icon:last-of-type {
        left: 2px; }
  md-input-container.md-icon-left.md-icon-right {
    padding-left: 32px;
    padding-right: 32px; }
    md-input-container.md-icon-left.md-icon-right > label:not(.md-no-float):not(._md-container-ignore),
    md-input-container.md-icon-left.md-icon-right > label ._md-placeholder {
      width: calc(100% - (32px * 2)); }
  md-input-container.nd-icon-left-inside > md-icon, md-input-container.nd-icon-left-inside > .icon {
    left: 2px;
    right: auto;
    padding-left: 16px; }
    [dir=rtl] md-input-container.nd-icon-left-inside > md-icon, [dir=rtl] md-input-container.nd-icon-left-inside > .icon {
      left: auto; }
    [dir=rtl] md-input-container.nd-icon-left-inside > md-icon, [dir=rtl] md-input-container.nd-icon-left-inside > .icon {
      right: 2px; }
  md-input-container.nd-icon-left-inside .md-input {
    padding-left: 64px !important; }
  md-input-container.nd-icon-left-inside > label {
    left: 48px;
    right: auto; }
    [dir=rtl] md-input-container.nd-icon-left-inside > label {
      left: auto; }
    [dir=rtl] md-input-container.nd-icon-left-inside > label {
      right: 48px; }
  md-input-container.nd-icon-right-inside > md-icon:last-of-type, md-input-container.nd-icon-right-inside > .icon:last-of-type {
    right: 2px;
    left: auto;
    margin: 0;
    padding-right: 16px; }
    [dir=rtl] md-input-container.nd-icon-right-inside > md-icon:last-of-type, [dir=rtl] md-input-container.nd-icon-right-inside > .icon:last-of-type {
      right: auto; }
    [dir=rtl] md-input-container.nd-icon-right-inside > md-icon:last-of-type, [dir=rtl] md-input-container.nd-icon-right-inside > .icon:last-of-type {
      left: 2px; }
  md-input-container.nd-icon-right-inside .md-input {
    padding-right: 64px; }

.ng-pristine.ng-invalid md-input-container .md-input-messages-animation:not(.md-auto-hide) .md-input-message-animation:not(.ng-animate) {
  opacity: 1;
  margin-top: 0; }

.nd-input__inline-label--single-line {
  display: inline-block;
  margin-top: -0.8125rem;
  vertical-align: middle;
  margin-right: 1rem; }

md-input-container[md-no-float] {
  margin-top: -3px; }
  md-input-container[md-no-float] .md-errors-spacer {
    min-height: 0; }

.nd-input-container--no-error-spacer .md-errors-spacer {
  display: none; }

.nd-input-container--error-spacer .md-errors-spacer, .nd-input-container--error-spacer[md-no-float] .md-errors-spacer {
  float: right;
  min-height: 24px;
  min-width: 1px; }
  [dir=rtl] .nd-input-container--error-spacer .md-errors-spacer, [dir=rtl] .nd-input-container--error-spacer[md-no-float] .md-errors-spacer {
    float: left; }

._md-select-menu-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1500;
  opacity: 0;
  display: none; }
  ._md-select-menu-container:not(._md-clickable) {
    pointer-events: none; }
  ._md-select-menu-container md-progress-circular {
    display: table;
    margin: 24px auto !important; }
  ._md-select-menu-container._md-active {
    display: block;
    opacity: 1; }
    ._md-select-menu-container._md-active md-select-menu {
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      transition-duration: 150ms; }
      ._md-select-menu-container._md-active md-select-menu > * {
        opacity: 1;
        transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
        transition-duration: 150ms;
        transition-delay: 100ms; }
  ._md-select-menu-container._md-leave {
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 250ms; }

md-input-container > md-select {
  margin: 0;
  -ms-flex-order: 2;
      order: 2;
  margin-top: 0; }

md-select {
  display: -ms-flexbox;
  display: flex;
  margin: 1.3125rem 0 26px 0;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: #c9c7c7;
  padding-top: 0.5rem;
  min-height: 34px; }
  md-select:focus {
    outline: none; }
  md-select[disabled] {
    border-bottom-color: #e6e4e3;
    border-bottom-style: dotted; }
    md-select[disabled] ._md-select-value {
      color: #8b8a8d; }
    md-select[disabled] ._md-select-icon:after {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%238b8a8d%22%20stroke%2Dwidth%3D%222%22%20stroke%2Dlinecap%3D%22round%22%20stroke%2Dlinejoin%3D%22round%22%20points%3D%2212%2E5%205%2E8%208%2010%2E3%203%2E5%205%2E8%22%2F%3E%3C%2Fsvg%3E"); }
    md-select[disabled]:hover {
      cursor: not-allowed; }
  md-select:not([disabled]):hover {
    cursor: pointer; }
  md-select:not([disabled]).ng-invalid.ng-dirty {
    border-color: #b00000; }
  md-select:not([disabled]):focus {
    border-color: #0000ff; }

._md-select-value {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 16px 8px 16px;
  color: #000000;
  font-size: 16px;
  line-height: 16px;
  background-color: transparent;
  position: relative;
  box-sizing: content-box;
  min-width: 64px;
  -ms-flex-positive: 1;
      flex-grow: 1; }
  ._md-select-value > span:not(._md-select-icon) {
    max-width: 100%;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
    ._md-select-value > span:not(._md-select-icon) ._md-text {
      display: inline; }
  ._md-select-value ._md-select-icon {
    width: 1rem;
    height: 1rem;
    margin-left: 4px;
    position: relative; }
  ._md-select-value ._md-select-icon:after {
    display: block;
    content: '';
    position: relative;
    width: 1rem;
    height: 1rem;
    speak: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%230000ff%22%20stroke%2Dwidth%3D%222%22%20stroke%2Dlinecap%3D%22round%22%20stroke%2Dlinejoin%3D%22round%22%20points%3D%2212%2E5%205%2E8%208%2010%2E3%203%2E5%205%2E8%22%2F%3E%3C%2Fsvg%3E"); }
  ._md-select-value._md-select-placeholder {
    color: #8b8a8d;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-order: 1;
        order: 1;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    padding: 0 16px 8px 16px;
    z-index: 1; }

md-select-menu {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  border: 1px solid #e6e4e3;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
  max-height: 256px;
  min-height: 48px;
  overflow-y: hidden;
  transform-origin: left top;
  transform: scale(1); }
  md-select-menu.md-reverse {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse; }
  md-select-menu:not(._md-overflow) md-content {
    padding-top: 8px;
    padding-bottom: 8px; }
  [dir=rtl] md-select-menu {
    transform-origin: right top; }
  md-select-menu md-content {
    min-width: 136px;
    min-height: 48px;
    max-height: 256px;
    overflow-y: auto;
    background-color: #ffffff; }
  md-select-menu > * {
    opacity: 0; }

md-option {
  cursor: pointer;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  width: auto;
  transition: background 0.15s linear;
  color: #000000;
  padding: 0 16px 0 48px;
  height: 48px;
  border-bottom: #e6e4e3 2px solid; }
  md-option[disabled] {
    cursor: default; }
    md-option[disabled] ._md-text {
      color: #8b8a8d; }
  md-option:focus {
    outline: none; }
  md-option:not([disabled]):focus, md-option:not([disabled]):hover {
    background: #fdece4; }
  md-option ._md-text {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.25rem; }
  md-option[selected]:not(._md-checkbox-enabled):after {
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2060%2060%22%20enable%2Dbackground%3D%22new%200%200%2060%2060%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%230000ff%22%20stroke%2Dwidth%3D%226%22%20stroke%2Dlinecap%3D%22round%22%20stroke%2Dlinejoin%3D%22round%22%20stroke%2Dmiterlimit%3D%2210%22%20points%3D%22%207%2032%2021%2046%2053%2014%20%22%2F%3E%3C%2Fsvg%3E");
    top: 14px;
    left: 16px; }

md-optgroup {
  display: block;
  color: #000000; }
  md-optgroup label {
    display: block;
    font-size: 1.25rem;
    padding: 1rem;
    font-weight: bold; }
  md-optgroup md-option {
    padding-left: 32px;
    padding-right: 32px; }

@media screen and (-ms-high-contrast: active) {
  ._md-select-backdrop {
    background-color: transparent; }
  md-select-menu {
    border: 1px solid #fff; } }

md-select-menu[multiple] md-option._md-checkbox-enabled {
  padding-left: 48px;
  padding-right: 16px; }
  [dir=rtl] md-select-menu[multiple] md-option._md-checkbox-enabled {
    padding-left: 16px; }
  [dir=rtl] md-select-menu[multiple] md-option._md-checkbox-enabled {
    padding-right: 48px; }
  md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 20px;
    left: 0;
    right: auto; }
    [dir=rtl] md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container {
      left: auto; }
    [dir=rtl] md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container {
      right: 0; }
    md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container:before {
      box-sizing: border-box;
      background-color: transparent;
      border-radius: 50%;
      content: '';
      position: absolute;
      display: block;
      height: auto;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transition: all 0.5s;
      width: auto; }
    md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container:after {
      box-sizing: border-box;
      content: '';
      position: absolute;
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px; }
    md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container .md-ripple-container {
      position: absolute;
      display: block;
      width: auto;
      height: auto;
      left: -15px;
      top: -15px;
      right: -15px;
      bottom: -15px; }
  md-select-menu[multiple] md-option._md-checkbox-enabled ._md-icon {
    box-sizing: border-box;
    transition: 240ms;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-style: solid;
    border-radius: 0; }
  md-select-menu[multiple] md-option._md-checkbox-enabled[selected] ._md-icon {
    border: none; }
    md-select-menu[multiple] md-option._md-checkbox-enabled[selected] ._md-icon:after {
      box-sizing: border-box;
      position: absolute;
      display: table;
      width: 100%;
      height: 100%;
      content: '';
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2060%2060%22%20enable%2Dbackground%3D%22new%200%200%2060%2060%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke%2Dwidth%3D%226%22%20stroke%2Dlinecap%3D%22round%22%20stroke%2Dlinejoin%3D%22round%22%20stroke%2Dmiterlimit%3D%2210%22%20points%3D%22%207%2032%2021%2046%2053%2014%20%22%2F%3E%3C%2Fsvg%3E"); }
  md-select-menu[multiple] md-option._md-checkbox-enabled[disabled] {
    cursor: default; }
  md-select-menu[multiple] md-option._md-checkbox-enabled.md-indeterminate ._md-icon:after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: table;
    width: 12px;
    height: 2px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: ''; }
  md-select-menu[multiple] md-option._md-checkbox-enabled ._md-icon {
    display: none; }
  md-select-menu[multiple] md-option._md-checkbox-enabled:after {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #0000ff;
    top: 14px;
    left: 16px; }
  md-select-menu[multiple] md-option._md-checkbox-enabled[selected]:after {
    width: 1.25rem;
    height: 1.25rem;
    background-color: #0000ff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2060%2060%22%20enable%2Dbackground%3D%22new%200%200%2060%2060%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%22%3E%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke%2Dwidth%3D%226%22%20stroke%2Dlinecap%3D%22round%22%20stroke%2Dlinejoin%3D%22round%22%20stroke%2Dmiterlimit%3D%2210%22%20points%3D%22%207%2032%2021%2046%2053%2014%20%22%2F%3E%3C%2Fsvg%3E");
    top: 14px;
    left: 16px; }
  md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container {
    margin-left: 10.66667px;
    margin-right: auto; }
    [dir=rtl] md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container {
      margin-left: auto; }
    [dir=rtl] md-select-menu[multiple] md-option._md-checkbox-enabled ._md-container {
      margin-right: 10.66667px; }

md-input-container.nd-icon-left-inside ._md-select-value {
  padding-left: 64px; }

md-input-container.nd-icon-right-inside ._md-select-value {
  padding-right: 64px; }

.md-inline-form md-switch {
  margin-top: 18px;
  margin-bottom: 19px; }

md-switch {
  margin: 1rem 0;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  height: 30px;
  line-height: 28px;
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  margin-left: inherit;
  margin-right: 1rem; }
  [dir=rtl] md-switch {
    margin-left: 1rem; }
  [dir=rtl] md-switch {
    margin-right: inherit; }
  md-switch:last-of-type {
    margin-left: inherit;
    margin-right: 0; }
    [dir=rtl] md-switch:last-of-type {
      margin-left: 0; }
    [dir=rtl] md-switch:last-of-type {
      margin-right: inherit; }
  md-switch[disabled] {
    cursor: default; }
    md-switch[disabled] ._md-container {
      cursor: default; }
  md-switch ._md-container {
    cursor: -webkit-grab;
    cursor: grab;
    width: 40px;
    height: 24px;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    margin-right: 8px;
    float: left; }
    [dir=rtl] md-switch ._md-container {
      margin-right: 0;
      margin-right: auto;
      margin-right: initial;
      margin-left: 8px; }
  md-switch:not([disabled]) ._md-dragging,
  md-switch:not([disabled])._md-dragging ._md-container {
    cursor: -webkit-grabbing;
    cursor: grabbing; }
  md-switch.md-focused:not([disabled]) ._md-thumb:before {
    left: -8px;
    top: -8px;
    right: -8px;
    bottom: -8px; }
  md-switch.md-focused:not([disabled]):not(.md-checked) ._md-thumb:before {
    background-color: rgba(0, 0, 0, 0.12); }
  md-switch ._md-label {
    border-color: transparent;
    border-width: 0;
    float: left; }
  md-switch ._md-bar {
    left: 1px;
    width: 38px;
    top: 8px;
    height: 8px;
    border-radius: 8px;
    position: absolute; }
  md-switch ._md-thumb-container {
    top: 2px;
    left: 0;
    width: 20px;
    position: absolute;
    transform: translate3d(0, 0, 0);
    z-index: 1; }
  md-switch.md-checked ._md-thumb-container {
    transform: translate3d(100%, 0, 0); }
  md-switch ._md-thumb {
    position: absolute;
    margin: 0;
    left: 0;
    top: 0;
    outline: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
    md-switch ._md-thumb:before {
      background-color: transparent;
      border-radius: 50%;
      content: '';
      position: absolute;
      display: block;
      height: auto;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transition: all 0.5s;
      width: auto; }
    md-switch ._md-thumb .md-ripple-container {
      position: absolute;
      display: block;
      width: auto;
      height: auto;
      left: -20px;
      top: -20px;
      right: -20px;
      bottom: -20px; }
  md-switch:not(._md-dragging) ._md-bar,
  md-switch:not(._md-dragging) ._md-thumb-container,
  md-switch:not(._md-dragging) ._md-thumb {
    transition: all 0.08s linear;
    transition-property: transform, background-color; }
  md-switch:not(._md-dragging) ._md-bar,
  md-switch:not(._md-dragging) ._md-thumb {
    transition-delay: 0.05s; }

@media screen and (-ms-high-contrast: active) {
  md-switch.md-default-theme ._md-bar {
    background-color: #666; }
  md-switch.md-default-theme.md-checked ._md-bar {
    background-color: #9E9E9E; }
  md-switch.md-default-theme ._md-thumb {
    background-color: #fff; } }

md-switch {
  display: inline-block;
  height: 30px;
  line-height: 28px;
  margin: 0; }
  md-switch ._md-thumb {
    box-shadow: none;
    background-color: #0000ff; }
  md-switch ._md-bar {
    background-color: #8b8a8d;
    opacity: 0.5; }
  md-switch .md-ink-ripple {
    color: #3399ff; }
  md-switch.md-focused:not([disabled]).md-checked ._md-thumb::before, md-switch.md-focused:not([disabled]):not(.md-checked) ._md-thumb::before {
    background-color: rgba(127, 191, 255, 0.3); }
  md-switch.md-checked ._md-thumb {
    background-color: #40bfa3; }
  md-switch[disabled] ._md-thumb {
    background-color: #8b8a8d; }
  md-switch[disabled] ._md-bar {
    background-color: #8b8a8d; }
  .colors-negative md-switch ._md-thumb, md-switch.colors-negative ._md-thumb {
    background-color: #f0c1ae; }
  .colors-negative md-switch.md-checked ._md-thumb, md-switch.colors-negative.md-checked ._md-thumb {
    background-color: #40bfa3; }
  .colors-negative md-switch[disabled], md-switch.colors-negative[disabled] {
    opacity: 0.5; }

._md-open-menu-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1700;
  opacity: 0;
  border-radius: 2px; }
  ._md-open-menu-container md-menu-divider {
    margin-top: 4px;
    margin-bottom: 4px;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
    width: 100%; }
  ._md-open-menu-container md-menu-content > * {
    opacity: 0; }
  ._md-open-menu-container:not(._md-clickable) {
    pointer-events: none; }
  ._md-open-menu-container._md-active {
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 200ms; }
    ._md-open-menu-container._md-active > md-menu-content > * {
      opacity: 1;
      transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
      transition-duration: 200ms;
      transition-delay: 100ms; }
  ._md-open-menu-container._md-leave {
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    transition-duration: 250ms; }

md-menu-content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding: 8px 0;
  max-height: 304px;
  overflow-y: auto; }
  md-menu-content.md-dense {
    max-height: 208px; }
    md-menu-content.md-dense md-menu-item {
      height: 32px;
      min-height: 0px; }

md-menu-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  min-height: 48px;
  height: 48px;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-pack: start;
      justify-content: flex-start; }
  md-menu-item > * {
    width: 100%;
    margin: auto 0;
    padding-left: 16px;
    padding-right: 16px; }
  md-menu-item > .md-button {
    border-radius: 0;
    margin: auto 0;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    text-align: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
        align-items: baseline;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    width: 100%; }
    [dir=rtl] md-menu-item > .md-button {
      text-align: right; }
    md-menu-item > .md-button md-icon {
      margin: auto 16px auto 0; }
      [dir=rtl] md-menu-item > .md-button md-icon {
        margin: auto 0 auto 16px; }
    md-menu-item > .md-button p {
      display: inline-block;
      margin: auto; }
    md-menu-item > .md-button span {
      margin-top: auto;
      margin-bottom: auto; }
    md-menu-item > .md-button .md-ripple-container {
      border-radius: inherit; }

.md-menu {
  padding: 8px 0; }

md-toolbar .md-menu {
  height: auto;
  margin: auto;
  padding: 0; }

@media (max-width: 959px) {
  md-menu-content {
    min-width: 112px; }
  md-menu-content[width="3"] {
    min-width: 168px; }
  md-menu-content[width="4"] {
    min-width: 224px; }
  md-menu-content[width="5"] {
    min-width: 280px; }
  md-menu-content[width="6"] {
    min-width: 336px; }
  md-menu-content[width="7"] {
    min-width: 392px; } }

@media (min-width: 960px) {
  md-menu-content {
    min-width: 96px; }
  md-menu-content[width="3"] {
    min-width: 192px; }
  md-menu-content[width="4"] {
    min-width: 256px; }
  md-menu-content[width="5"] {
    min-width: 320px; }
  md-menu-content[width="6"] {
    min-width: 384px; }
  md-menu-content[width="7"] {
    min-width: 448px; } }

md-menu-content {
  background-color: #ffffff;
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid #e6e4e3; }
  md-menu-content md-menu-item {
    border-top: #e6e4e3 2px solid;
    color: #000000; }
    md-menu-content md-menu-item:first-child {
      border-top: none;
      margin-top: 0; }
    md-menu-content md-menu-item md-icon, md-menu-content md-menu-item .icon {
      color: #e6e4e3; }
    md-menu-content md-menu-item .md-button {
      background-color: transparent;
      color: inherit;
      border: 0;
      padding: 0 1.5rem 0 1.5rem;
      font-size: 1rem;
      -ms-flex-align: center;
          align-items: center; }
      md-menu-content md-menu-item .md-button > md-icon, md-menu-content md-menu-item .md-button .icon {
        color: #000000;
        margin: auto 1rem auto 0; }
    md-menu-content md-menu-item .md-button:not([disabled]):focus, md-menu-content md-menu-item .md-button:not([disabled]):hover {
      color: inherit;
      outline: none;
      background: #f0c1ae; }
    md-menu-content md-menu-item .md-button[disabled] {
      color: #8b8a8d; }
      md-menu-content md-menu-item .md-button[disabled] md-icon, md-menu-content md-menu-item .md-button[disabled] .icon {
        color: #8b8a8d; }
  md-menu-content md-menu-divider {
    background-color: #e6e4e3; }
  md-menu-content md-menu-divider + md-menu-item {
    border-top: none; }

.md-panel:focus {
  outline: none; }

body .md-panel-outer-wrapper {
  position: fixed; }

@keyframes indeterminate-rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

md-progress-circular {
  position: relative; }
  md-progress-circular._md-progress-circular-disabled {
    visibility: hidden; }
  md-progress-circular._md-mode-indeterminate svg {
    animation: indeterminate-rotate 2.9s linear infinite; }
  md-progress-circular svg {
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0; }
  md-progress-circular path {
    stroke: #0000a0; }

@keyframes sliderFocusThumb {
  0% {
    transform: scale(0.7); }
  30% {
    transform: scale(1); }
  100% {
    transform: scale(0.7); } }

@keyframes sliderDiscreteFocusThumb {
  0% {
    transform: scale(0.7); }
  50% {
    transform: scale(0.8); }
  100% {
    transform: scale(0); } }

@keyframes sliderDiscreteFocusRing {
  0% {
    transform: scale(0.7);
    opacity: 0; }
  50% {
    transform: scale(1);
    opacity: 1; }
  100% {
    transform: scale(0); } }

md-slider {
  height: 48px;
  min-width: 128px;
  position: relative;
  margin-left: 4px;
  margin-right: 4px;
  padding: 0;
  display: block;
  -ms-flex-direction: row;
      flex-direction: row;
  /**
   * Track
   */
  /**
   * Slider thumb
   */
  /* The sign that's focused in discrete mode */
  /**
   * The border/background that comes in when focused in non-discrete mode
   */
  /* Don't animate left/right while panning */ }
  md-slider *, md-slider *:after {
    box-sizing: border-box; }
  md-slider ._md-slider-wrapper {
    outline: none;
    width: 100%;
    height: 100%; }
  md-slider ._md-slider-content {
    position: relative; }
  md-slider ._md-track-container {
    width: 100%;
    position: absolute;
    top: 23px;
    height: 2px; }
  md-slider ._md-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%; }
  md-slider ._md-track-fill {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: width, height; }
  md-slider ._md-track-ticks {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%; }
  md-slider ._md-track-ticks canvas {
    width: 100%;
    height: 100%; }
  md-slider ._md-thumb-container {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: left, bottom; }
  md-slider ._md-thumb {
    z-index: 1;
    position: absolute;
    left: -10px;
    top: 14px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    transform: scale(0.7);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
    md-slider ._md-thumb:after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      border-width: 3px;
      border-style: solid;
      transition: inherit; }
  md-slider ._md-sign {
    /* Center the children (slider-thumb-text) */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    position: absolute;
    left: -14px;
    top: -17px;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    transform: scale(0.4) translate3d(0, 67.5px, 0);
    transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    /* The arrow pointing down under the sign */ }
    md-slider ._md-sign:after {
      position: absolute;
      content: '';
      left: 0px;
      border-radius: 16px;
      top: 19px;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-top-width: 16px;
      border-top-style: solid;
      opacity: 0;
      transform: translate3d(0, -8px, 0);
      transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1); }
    md-slider ._md-sign ._md-thumb-text {
      z-index: 1;
      font-size: 12px;
      font-weight: bold; }
  md-slider ._md-focus-ring {
    position: absolute;
    left: -17px;
    top: 7px;
    width: 34px;
    height: 34px;
    border-radius: 34px;
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.35, 0, 0.25, 1); }
  md-slider ._md-disabled-thumb {
    position: absolute;
    left: -14px;
    top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 28px;
    transform: scale(0.5);
    border-width: 4px;
    border-style: solid;
    display: none; }
  md-slider._md-min ._md-sign {
    opacity: 0; }
  md-slider:focus {
    outline: none; }
  md-slider._md-dragging ._md-thumb-container,
  md-slider._md-dragging ._md-track-fill {
    transition: none; }
  md-slider:not([md-discrete]) {
    /* Hide the sign and ticks in non-discrete mode */ }
    md-slider:not([md-discrete]) ._md-track-ticks,
    md-slider:not([md-discrete]) ._md-sign {
      display: none; }
    md-slider:not([md-discrete]):not([disabled]) ._md-slider-wrapper ._md-thumb:hover {
      transform: scale(0.8); }
    md-slider:not([md-discrete]):not([disabled]) ._md-slider-wrapper.md-focused ._md-focus-ring {
      transform: scale(1);
      opacity: 1; }
    md-slider:not([md-discrete]):not([disabled]) ._md-slider-wrapper.md-focused ._md-thumb {
      animation: sliderFocusThumb 0.7s cubic-bezier(0.35, 0, 0.25, 1); }
    md-slider:not([md-discrete]):not([disabled])._md-active ._md-slider-wrapper ._md-thumb {
      transform: scale(1); }
  md-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-focus-ring {
    transform: scale(0);
    animation: sliderDiscreteFocusRing 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
  md-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-thumb {
    animation: sliderDiscreteFocusThumb 0.5s cubic-bezier(0.35, 0, 0.25, 1); }
  md-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-thumb, md-slider[md-discrete]:not([disabled])._md-active ._md-thumb {
    transform: scale(0); }
  md-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-sign,
  md-slider[md-discrete]:not([disabled]) ._md-slider-wrapper.md-focused ._md-sign:after, md-slider[md-discrete]:not([disabled])._md-active ._md-sign,
  md-slider[md-discrete]:not([disabled])._md-active ._md-sign:after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1); }
  md-slider[md-discrete][disabled][readonly] ._md-thumb {
    transform: scale(0); }
  md-slider[md-discrete][disabled][readonly] ._md-sign,
  md-slider[md-discrete][disabled][readonly] ._md-sign:after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1); }
  md-slider[disabled] ._md-track-fill {
    display: none; }
  md-slider[disabled] ._md-track-ticks {
    opacity: 0; }
  md-slider[disabled]:not([readonly]) ._md-sign {
    opacity: 0; }
  md-slider[disabled] ._md-thumb {
    transform: scale(0.5); }
  md-slider[disabled] ._md-disabled-thumb {
    display: block; }
  md-slider[md-vertical] {
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 128px;
    min-width: 0; }
    md-slider[md-vertical] ._md-slider-wrapper {
      -ms-flex: 1;
          flex: 1;
      padding-top: 12px;
      padding-bottom: 12px;
      width: 48px;
      -ms-flex-item-align: center;
          align-self: center;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center; }
    md-slider[md-vertical] ._md-track-container {
      height: 100%;
      width: 2px;
      top: 0;
      left: calc(50% - (2px / 2)); }
    md-slider[md-vertical] ._md-thumb-container {
      top: auto;
      margin-bottom: 23px;
      left: calc(50% - 1px);
      bottom: 0; }
      md-slider[md-vertical] ._md-thumb-container ._md-thumb:after {
        left: 1px; }
      md-slider[md-vertical] ._md-thumb-container ._md-focus-ring {
        left: -16px; }
    md-slider[md-vertical] ._md-track-fill {
      bottom: 0; }
    md-slider[md-vertical][md-discrete] ._md-sign {
      left: -40px;
      top: 9.5px;
      transform: scale(0.4) translate3d(67.5px, 0, 0);
      /* The arrow pointing left next the sign */ }
      md-slider[md-vertical][md-discrete] ._md-sign:after {
        top: 9.5px;
        left: 19px;
        border-top: 14px solid transparent;
        border-right: 0;
        border-bottom: 14px solid transparent;
        border-left-width: 16px;
        border-left-style: solid;
        opacity: 0;
        transform: translate3d(0, -8px, 0);
        transition: all 0.2s ease-in-out; }
      md-slider[md-vertical][md-discrete] ._md-sign ._md-thumb-text {
        z-index: 1;
        font-size: 12px;
        font-weight: bold; }
    md-slider[md-vertical][md-discrete]._md-active ._md-sign:after,
    md-slider[md-vertical][md-discrete] .md-focused ._md-sign:after, md-slider[md-vertical][md-discrete][disabled][readonly] ._md-sign:after {
      top: 0; }
    md-slider[md-vertical][disabled][readonly] ._md-thumb {
      transform: scale(0); }
    md-slider[md-vertical][disabled][readonly] ._md-sign,
    md-slider[md-vertical][disabled][readonly] ._md-sign:after {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1); }
  md-slider[md-invert]:not([md-vertical]) ._md-track-fill {
    left: auto;
    right: 0; }
  md-slider[md-invert][md-vertical] ._md-track-fill {
    bottom: auto;
    top: 0; }

md-slider-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-direction: row;
      flex-direction: row; }
  md-slider-container > *:first-child:not(md-slider),
  md-slider-container > *:last-child:not(md-slider) {
    min-width: 25px;
    max-width: 42px;
    height: 25px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: color, max-width; }
  md-slider-container > *:first-child:not(md-slider) {
    margin-right: 16px; }
  md-slider-container > *:last-child:not(md-slider) {
    margin-left: 16px; }
  md-slider-container[md-vertical] {
    -ms-flex-direction: column;
        flex-direction: column; }
    md-slider-container[md-vertical] > *:first-child:not(md-slider),
    md-slider-container[md-vertical] > *:last-child:not(md-slider) {
      margin-right: 0;
      margin-left: 0;
      text-align: center; }
  md-slider-container md-input-container input[type="number"] {
    text-align: center;
    padding-left: 15px;
    height: 50px;
    margin-top: -25px; }

@media screen and (-ms-high-contrast: active) {
  md-slider.md-default-theme ._md-track {
    border-bottom: 1px solid #fff; } }

md-slider ._md-track-container {
  height: 4px; }

md-slider ._md-track {
  background-color: rgba(0, 0, 160, 0.4); }

md-slider ._md-track-fill {
  background-color: #0000a0;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); }

md-slider ._md-focus-ring {
  background-color: rgba(0, 0, 160, 0.4);
  top: 8px;
  left: -18px; }

md-slider ._md-thumb {
  width: 26px;
  height: 26px;
  left: -14px;
  top: 12px; }
  md-slider ._md-thumb::after {
    background-color: #0000a0;
    border-color: #0000a0;
    width: 26px;
    height: 26px;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2); }

md-slider-container > span:first-child {
  height: 48px;
  line-height: 48px; }

md-slider-container .input-container:last-child {
  padding: 0;
  height: 48px;
  margin-top: 0;
  margin-bottom: 1rem; }

md-tooltip {
  position: absolute;
  z-index: 1800;
  overflow: hidden;
  pointer-events: none;
  border-radius: 2px; }
  md-tooltip .md-content {
    position: relative;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: center top;
    transform: scale(0);
    opacity: 0;
    max-width: 314px;
    font-size: 1rem;
    color: #000000;
    background-color: #f0c1ae;
    padding: 1rem; }
    md-tooltip .md-content.md-show-add {
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      transition-duration: .2s;
      transform: scale(0);
      opacity: 0; }
    md-tooltip .md-content.md-show, md-tooltip .md-content.md-show-add-active {
      transform: scale(1);
      opacity: 1;
      transform-origin: center top; }
    md-tooltip .md-content.md-show-remove {
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      transition-duration: .2s; }
      md-tooltip .md-content.md-show-remove.md-show-remove-active {
        transform: scale(0);
        opacity: 0; }
  md-tooltip.md-hide {
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  md-tooltip.md-show {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: auto; }

md-tabs md-tabs-dummy-wrapper md-dummy-tab[aria-selected="true"] span {
  font-weight: 700;
  padding-right: 1px; }

md-tabs md-tabs-wrapper {
  background-color: transparent;
  border-color: #e6e4e3; }

md-tabs md-ink-bar {
  height: 4px;
  color: #e6e4e3;
  background: #e6e4e3; }

md-tabs .md-tab {
  text-transform: none;
  font-weight: inherit; }
  md-tabs .md-tab:focus {
    outline: none; }
  md-tabs .md-tab[disabled], md-tabs .md-tab[disabled] md-icon {
    color: #8b8a8d;
    opacity: 1; }
  md-tabs .md-tab.md-active {
    font-weight: 700; }
    md-tabs .md-tab.md-active, md-tabs .md-tab.md-active md-icon {
      font-weight: 700; }
  md-tabs .md-tab.md-focused {
    background: #ffffff; }
  md-tabs .md-tab .badge {
    line-height: 1.5; }

md-tabs.colors-negative .md-tab[disabled], md-tabs.colors-negative .md-tab[disabled] md-icon, .colors-negative md-tabs .md-tab[disabled], .colors-negative md-tabs .md-tab[disabled] md-icon {
  opacity: 0.5; }

md-tabs.colors-negative .md-tab.md-focused, .colors-negative md-tabs .md-tab.md-focused {
  color: #000000; }

md-dummy-tab {
  font-weight: 900 !important; }

.md-virtual-repeat-container {
  box-sizing: border-box;
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative; }
  .md-virtual-repeat-container .md-virtual-repeat-scroller {
    bottom: 0;
    box-sizing: border-box;
    left: 0;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0; }
  .md-virtual-repeat-container .md-virtual-repeat-sizer {
    box-sizing: border-box;
    height: 1px;
    display: block;
    margin: 0;
    padding: 0;
    width: 1px; }
  .md-virtual-repeat-container .md-virtual-repeat-offsetter {
    box-sizing: border-box;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0; }

.md-virtual-repeat-container.md-orient-horizontal .md-virtual-repeat-scroller {
  overflow-x: auto;
  overflow-y: hidden; }

.md-virtual-repeat-container.md-orient-horizontal .md-virtual-repeat-offsetter {
  bottom: 16px;
  right: auto;
  white-space: nowrap; }
  [dir=rtl] .md-virtual-repeat-container.md-orient-horizontal .md-virtual-repeat-offsetter {
    right: 0;
    right: auto;
    right: initial;
    left: auto; }

md-icon, md-icon * {
  stroke: currentColor; }

/*# sourceMappingURL=vendor.css.map */