/*------------------------------------*\
    PROSPECTEYE
    LOGIN.CSS
    Version: 1.0.0
    Author: HPE
\*------------------------------------*/
/**
 * TABLE OF CONTENTS
 *
 *
 * SETTINGS
 * Variables........Global variables for the visitlist
 * Colors...........Variables containg all standard colors
 * Z-index..........A handy reference for z-indexing in the application
 *
 *
 * IMPORTS
 * Bower............Component library for SASS
 *
 *
 * TOOLS
 * Functions........Useful SASS functions
 * Mixins...........Useful SASS mixins
 * Animations.......Pretty CSS animations
 *
 *
 * FOUNDATION
 * Reset............SASS port of Eric Meyer's CSS Reset
 *
 *
 * ATOMS
 * Body.............Styling of the body
 * Typography.......
 * Icon font........Setup ProspectIcons
 * Icon.............
 * Images...........
 * Input............
 * Headings.........
 *
 *
 * MOLECULES
 * Buttons...........
 * CompatibilityList.
 * InlineList........
 * MediaObject.......
 * Modal.............
 *
 * CATALYSTS
 * States...........
 * Text.............
 *
 */
/*------------------------------------*\
    #SETTINGS

    Files with no other purpose than to set up variables for other files.

\*------------------------------------*/
/**
 * FONT VARIABLES
 *
 * The variables are to be used through out the application when referencing font
 * properties.
 */
/**
 * HEADING FONTS
 */
/**
 * TEXT FONT
 */
/**
 * OTHER VARIABLES
 */
/**
 * Modular scale, based on Perfect Fourth, with 16 as base.
 *
 * See http://modularscale.com/scale/?px1=16&ra1=1.333&ra2=0 for full calculation.
 *
 * Pixels    Rems    Rounded px
 * 212.612   13.288  213
 * 159.499   9.969   159
 * 119.654   7.478   120
 * 89.763    5.61    90
 * 67.339    4.209   67
 * 50.517    3.157   51
 * 37.897    2.369   38
 * 28.43     1.777   28
 * 21.328    1.333   21
 * 16        1       16
 * 12.003    0.75    12
 * 9.005     0.563   9
 * 6.755     0.422   7
 * 5.068     0.317   5
 * 3.802     0.238   4
 * 2.852     0.178   3
 * 2.14      0.134   2
 * 1.605     0.1     2
 * 1.204     0.075   1
 */
/* The scale we're using is Perfect Fourth (4/3) */
/* COLORS */
/* All colors are structure like maps, from light to dark. */
/* Index 3 is always the main nuance of the color */
/* For text with an alpha value, this list is used */
/* WAITING TO BE UPDATED */
/* BRAND COLORS */
/* Z-INDEX */
.z0 {
  z-index: 0 !important; }

/*------------------------------------*\
    #IMPORTS

    External libraries that can be called and used. Try not to include anything
    that outputs content when not asked to do so by someone depending on it.

\*------------------------------------*/
* {
  box-sizing: border-box; }

/*------------------------------------*\
    #TOOLS

    Various tools that make developing for the front-end easier and more
    pleasant.

\*------------------------------------*/
/**
 * Takes any given value and returns it withour its unit.
 *
 * EXAMPLE
 *
 * 10px => 10
 * 4rem => 4
 *
 * AUTHOR HPE
 */
/**
 * RGBALPHA
 *
 * Takes a color and an alpha percentage and returns the closest possible non-rgba
 * match to what the rgba-color would look like, alas without the transparency.
 *
 * $color can be any color - hex, hsl or rgb
 * $percentage should be a value between 0 and 1 (0-100)
 *
 * AUTHOR HPE
 */
/**
 * Calculates font-size according to modular scale
 * @param  {[type]} $size [description]
 * @return {[type]}       [description]
 */
/**
 * REMS
 *
 * Takes a property and 1-n values and returns the values in pixels as well as
 * rems. Browsers that support rems will use that value, legacy browsers will
 * fall back to the pixel value.
 *
 * ARGUMENTS
 * $property: a valid css property
 * $values: a list of values, given in pixels
 *
 * DEPENDENCIES
 * @function strip-unit()
 *
 * EXAMPLE (given that 1px is the base font size)
 * @include rems(margin, 32px 16px):
 *
 * margin: 32px 16px;
 * margin: 2rem 1rem;
 *
 * AUTHOR HPE
 */
/**
 * COLOR
 *
 * Takes a color and a alpha percentage and returns a "closest match" to browsers
 * that doesn't support rgba, as well as a rgba proerty for supported browsers.
 *
 * ARGUMENTS
 * $color: can be any color - hex, hsl or rgb
 * $percentage: should be a value between 0 and 1 (0-100)
 *
 * DEPENDENCIES
 * @function rgbalpha()
 *
 * EXAMPLE
 * @include color(nth($c-blacks, 3), .8):
 *
 * color: #363636;
 * color: rgb(51, 51, 51, .8)
 *
 * AUTHOR HPE
 */
/**
 * SHADOW
 *
 * Takes a depth of field and reuturns a shadow, which's size is based on that DOF.
 *
 * ARGUMENTS
 * $depth: an integer from 1 to 5
 *
 * AUTHOR HPE
 */
/**
 * Animation keyframes for various use cases. Use directly in your atoms /
 * molecules or, which should be preferred, via the keyfram mixin.
 */
/*------------------------------------*\
    # KEYFRAMES
\*------------------------------------*/
@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg); }

  10% {
    -webkit-transform: skewX(-8deg);
    transform: skewX(-8deg); }

  20% {
    -webkit-transform: skewX(7deg);
    transform: skewX(7deg); }

  30% {
    -webkit-transform: skewX(-6deg);
    transform: skewX(-6deg); }

  40% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg); }

  50% {
    -webkit-transform: skewX(-4deg);
    transform: skewX(-4deg); }

  60% {
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg); }

  70% {
    -webkit-transform: skewX(-2deg);
    transform: skewX(-2deg); }

  80% {
    -webkit-transform: skewX(1deg);
    transform: skewX(1deg); }

  90% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg); }

  100% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg); } }
@keyframes wiggle {
  0% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg); }

  10% {
    -webkit-transform: skewX(-8deg);
    transform: skewX(-8deg); }

  20% {
    -webkit-transform: skewX(7deg);
    transform: skewX(7deg); }

  30% {
    -webkit-transform: skewX(-6deg);
    transform: skewX(-6deg); }

  40% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg); }

  50% {
    -webkit-transform: skewX(-4deg);
    transform: skewX(-4deg); }

  60% {
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg); }

  70% {
    -webkit-transform: skewX(-2deg);
    transform: skewX(-2deg); }

  80% {
    -webkit-transform: skewX(1deg);
    transform: skewX(1deg); }

  90% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg); }

  100% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg); } }
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-15deg);
    transform: scale(0.9) rotate(-15deg); }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(15deg);
    transform: scale(1.1) rotate(15deg); }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-15deg);
    transform: scale(1.1) rotate(-15deg); }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-15deg);
    transform: scale(0.9) rotate(-15deg); }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(15deg);
    transform: scale(1.1) rotate(15deg); }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-15deg);
    transform: scale(1.1) rotate(-15deg); }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }
/*------------------------------------*\
    # NAMED ANIMATIONS
\*------------------------------------*/
.anim-tada:hover {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-name: tada;
          animation-name: tada; }

.anim-error {
  -webkit-animation-duration: 0.1s;
          animation-duration: 0.1s;
  -webkit-animation-name: wiggle;
          animation-name: wiggle; }

/*------------------------------------*\
    #FOUNDATION

    Stuff that lays the baseline for evertying else.

\*------------------------------------*/
/**
 * This is the Eric Meyer's CSS reset, "ported" to SCSS. It really shouldn't
 * need any introduction, but if your not familiar you can follow the link below.
 *
 * http://meyerweb.com/eric/tools/css/reset/
 * v2.0 | 20110126
 * License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*------------------------------------*\
    #ATOMS

    The smallest parts of the application. Atoms can be individual elements like
    <a> or <ul> but can also be more abstract units that make out the building
    blocks of molecules.

\*------------------------------------*/
/**
 * BASE BODY STYLING
 *
 * Sets up a sensible default for the body.
 *
 * DEPENDECIES
 * @mixin color();
 */
body {
  height: 100%;
  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 300;
  background-color: #e8e8e8;
  color: #040405;
  color: rgba(2, 2, 3, 0.85);
  overflow: hidden;
  -webkit-font-smoothing: antialiased; }

/**
 * Set the typographic base.
 *
 * Remember that our baseline grid is 6px.
 */
p {
  line-height: 18px;
  line-height: 1.125rem;
  margin-bottom: 18px;
  margin-bottom: 1.125rem; }

/**
 * ICON FONTS
 *
 * Sets up the custom prospecticon font.
 */
/**
 * Setup the base part of the font.
 *
 * Link to the external font files, setup base classes etc.
 */
@font-face {
  font-family: 'prospecticons';
  src: url("/public/fonts/prospecticons.eot?enhky4");
  src: url("/public/fonts/prospecticons.eot?#iefixenhky4") format("embedded-opentype"), url("/public/fonts/prospecticons.woff?enhky4") format("woff"), url("/public/fonts/prospecticons.ttf?enhky4") format("truetype"), url("/public/fonts/prospecticons.svg?enhky4#prospecticons") format("svg");
  font-weight: normal;
  font-style: normal; }
.pe-icon {
  font-family: 'prospecticons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.pe-icon-wrench:before {
  content: '\e600'; }

.pe-icon-users:before {
  content: '\e601'; }

.pe-icon-user:before, .pe-icon-account:before {
  content: '\e602'; }

.pe-icon-timer:before {
  content: '\e603'; }

.pe-icon-target:before, .pe-icon-filter:before {
  content: '\e604'; }

.pe-icon-stock:before, .pe-icon-analysis:before {
  content: '\e605'; }

.pe-icon-skyscrapers:before, .pe-icon-supplier:before {
  content: '\e607'; }

.pe-icon-skull:before, .pe-icon-competitor:before {
  content: '\e608'; }

.pe-icon-price-tag:before {
  content: '\e609'; }

.pe-icon-list-big:before {
  content: '\e60b'; }

.pe-icon-jigsaw:before, .pe-icon-partners:before, .pe-icon-partner:before {
  content: '\e60c'; }

.pe-icon-house:before, .pe-icon-overview:before {
  content: '\e60d'; }

.pe-icon-eye:before, .pe-icon-visits:before {
  content: '\e60e'; }

.pe-icon-excel:before {
  content: '\e60f'; }

.pe-icon-envelope:before, .pe-icon-anp3:before {
  content: '\e610'; }

.pe-icon-curve:before {
  content: '\e611'; }

.pe-icon-cup:before, .pe-icon-customer:before {
  content: '\e612'; }

.pe-icon-cog:before {
  content: '\e613'; }

.pe-icon-clock:before, .pe-icon-reports:before {
  content: '\e614'; }

.pe-icon-bubble:before, .pe-icon-other:before, .pe-icon-others:before {
  content: '\e615'; }

.pe-icon-paw:before {
  content: '\e616'; }

.pe-icon-padlock:before, .pe-icon-login:before {
  content: '\e617'; }

.pe-icon-magnify:before {
  content: '\e618'; }

.pe-icon-list-small:before {
  content: '\e619'; }

.pe-icon-cursor:before {
  content: '\e61a'; }

.pe-icon-automation:before {
  content: '\e62b'; }

.pe-icon-form:before {
  content: '\e61b'; }

.pe-icon-star-empty:before, .pe-icon-star.empty:before {
  content: '\e61c'; }

.pe-icon-star:before {
  content: '\e61d'; }

.pe-icon-phone:before, .pe-icon-prospect:before {
  content: '\e61e'; }

.pe-icon-desktop:before {
  content: '\e61f'; }

.pe-icon-signal:before {
  content: '\e620'; }

.pe-icon-calendar:before {
  content: '\e606'; }

.pe-icon-question-sign:before, .pe-icon-unknown:before {
  content: '\e622'; }

.pe-icon-chevron-right:before {
  content: '\e623'; }

.pe-icon-chevron-left:before {
  content: '\e624'; }

.pe-icon-chevron-down:before {
  content: '\e625'; }

.pe-icon-chevron-up:before {
  content: '\e626'; }

.pe-icon-arrow-right:before {
  content: '\e627'; }

.pe-icon-arrow-left:before {
  content: '\e628'; }

.pe-icon-arrow-up:before {
  content: '\e629'; }

.pe-icon-arrow-down:before {
  content: '\e62a'; }

.pe-icon-info:before {
  content: '\e62c'; }

.pe-icon-sort-by-abc:before, .pe-icon-sort-by-abc-rev.reverse:before, .reverse.pe-icon-sort-by-abc:before {
  content: '\e62d'; }

.pe-icon-sort-by-abc-rev:before, .pe-icon-sort-by-abc.reverse:before, .reverse.pe-icon-sort-by-abc-rev:before {
  content: '\e62e'; }

.pe-icon-sort-by-attr:before, .pe-icon-sort-by-attr-rev.reverse:before, .reverse.pe-icon-sort-by-attr:before {
  content: '\e62f'; }

.pe-icon-sort-by-attr-rev:before, .pe-icon-sort-by-attr.reverse:before, .reverse.pe-icon-sort-by-attr-rev:before {
  content: '\e630'; }

.pe-icon-sort-by-number:before, .pe-icon-sort-by-number-rev.reverse:before, .reverse.pe-icon-sort-by-number:before {
  content: '\e631'; }

.pe-icon-sort-by-number-rev:before, .pe-icon-sort-by-number.reverse:before, .reverse.pe-icon-sort-by-number-rev:before {
  content: '\e632'; }

.pe-icon-sort:before {
  content: '\e633'; }

.pe-icon-sort-down:before {
  content: '\e634'; }

.pe-icon-sort-up:before {
  content: '\e635'; }

.pe-icon-location:before {
  content: '\e621'; }

.pe-icon-fire:before {
  content: '\e60a'; }

/**
 * This section is used to customize the classes above.
 *
 * Set aliases, set default colors etc.
 */
.pe-icon-star:before {
  color: #f7a500; }

.pe-icon-star-empty:before, .pe-icon-star.empty:before {
  color: #ffd278; }

.pe-icon-star.white:before {
  color: white; }

.pe-icon-star.grey:before {
  color: #c6d3d8; }

.pe-icon-star-fillable:hover {
  cursor: pointer; }

.pe-icon-star.pe-icon-star-fillable:hover:before {
  content: '\e61c'; }

.pe-icon-star-empty.pe-icon-star-fillable:hover:before, .pe-icon-star-fillable.pe-icon-star.empty:hover:before {
  content: '\e61d'; }

/**
 * VISITOR STATUS ICONS
 */
.pe-icon-prospect:before {
  color: #72c3b2; }

.pe-icon-customer:before {
  color: #eb974e; }

.pe-icon-partners:before, .pe-icon-partner:before {
  color: #9d244c; }

.pe-icon-competitor:before {
  color: #e26a6a; }

.pe-icon-other:before, .pe-icon-others:before {
  color: #878787; }

.pe-icon-supplier:before {
  color: #eb974e; }

.pe-icon-unknown:before {
  color: #878787; }

.pe-icon-anp3:before {
  font-size: 0.7em; }

/**
 * SORTING ICONS
 */
/**
 * ICON SIZES
 */
.icon-large {
  font-size: 48px; }

/**
 * A little hack to display the apsis icon next to the
 */
.fa-apsis {
  background-image: url("/public/images/svg/apsis-white.svg");
  background-image: url("/public/images/svg/apsis-white.svg");
  background-position: top left;
  background-size: 16px;
  height: 10px;
  background-repeat: no-repeat; }

img {
  max-width: 100%; }

/**
 * INPUT STYLING
 */
input {
  /**
   * Since input, select and button have their own default settings (not
   * inherit) we must set them explicility here.
   */
  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 300; }
  input.full {
    width: 100%; }

.Input {
  margin: 0;
  padding: 8px 6px;
  color: #333;
  background: #FFFFFF;
  border: 1px solid #6A7178;
  outline: none; }
  .Input:focus, .Input:active {
    border-color: #33b2e8;
    box-shadow: 0 0 2px #009fe3; }
  .Input.small {
    padding: 6px; }

.Input-invisible {
  border: none;
  border-radius: 0;
  left: 0;
  width: 100%;
  outline: none;
  position: relative;
  padding: 5px 5px 2px; }
  .Input-invisible.border {
    border-bottom: 1px solid rgba(0, 0, 0, 0.54); }

.InputGroup {
  display: inline-block; }

.Input-radio {
  display: none;
  cursor: pointer; }
  .Input-radio:focus, .Input-radio:active {
    outline: none; }
  .Input-radio + label {
    color: #283236;
    cursor: pointer;
    display: block;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 19px; }
    .Input-radio + label:before, .Input-radio + label:after {
      content: '';
      display: block;
      width: 14px;
      height: 14px;
      left: 0;
      top: 0;
      position: absolute; }
    .Input-radio + label:before {
      background-color: white;
      border-radius: 50%;
      border: 2px solid #e8e8e8; }
    .Input-radio + label:after {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      background-color: white;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transition: all .2s ease-in-out; }
    .Input-radio + label:hover:after {
      background-color: #cfcfcf; }
  .Input-radio:checked + label:before {
    box-shadow: inset 0 0 0 10px white; }
  .Input-radio:checked + label:after, .Input-radio:checked + label:hover:after {
    background-color: #a5cd39; }

/**
 * A prettier checkbox.
 *
 * @example
 * <div>
 *  <input
 *       type="checkbox"
 *       class="Input-checkbox"
 *       id="myCheckbox"
 *   >
 *   <label for="myCheckbox">Text for the label</label>
 * </div>
 */
.Input-checkbox, .Input-checkbox--right {
  display: none;
  cursor: pointer; }
  .Input-checkbox:focus, .Input-checkbox--right:focus, .Input-checkbox:active, .Input-checkbox--right:active {
    outline: none; }
  .Input-checkbox + label, .Input-checkbox--right + label {
    cursor: pointer;
    display: block;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    text-align: left;
    min-height: 16px; }
    .Input-checkbox + label:before, .Input-checkbox--right + label:before, .Input-checkbox + label:after, .Input-checkbox--right + label:after {
      content: '';
      display: block;
      left: 0;
      top: 0;
      position: absolute; }
    .Input-checkbox + label:before, .Input-checkbox--right + label:before {
      background-color: white;
      border: 2px solid #e8e8e8;
      border-radius: 4px;
      width: 15px;
      height: 15px; }
    .Input-checkbox + label:after, .Input-checkbox--right + label:after {
      content: "x";
      color: #a5cd39;
      font-family: sans-serif;
      font-weight: bold;
      height: 14px;
      opacity: 0;
      position: absolute;
      text-align: center;
      top: 1px;
      transition: opacity 100ms ease-in-out;
      width: 19px; }
  .Input-checkbox:checked + label:after, .Input-checkbox--right:checked + label:after, .Input-checkbox:checked + label:hover:after, .Input-checkbox--right:checked + label:hover:after {
    opacity: 1; }

.Input-checkbox--right + label {
  padding-right: 25px;
  padding-left: 0; }
  .Input-checkbox--right + label:before, .Input-checkbox--right + label:after {
    left: auto;
    right: 0; }

.TextboxWithLabel {
  position: relative;
  box-sizing: border-box; }
  .TextboxWithLabel.full {
    width: 100%; }
  .TextboxWithLabel.addPadding {
    padding: 0 12px; }
  .TextboxWithLabel > input[type=text] {
    width: 100%;
    margin-bottom: 0; }
  .TextboxWithLabel > label {
    position: absolute;
    left: 9px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #ccc; }
  .TextboxWithLabel.labelRight > label {
    left: auto;
    right: 18px; }

.Input-withLabel {
  margin-bottom: 18px; }
  .Input-withLabel:last-of-type {
    margin-bottom: 0; }
  .Input-withLabel > label {
    color: #4f5558;
    display: block;
    font-weight: 400;
    padding-bottom: 6px; }

/**
 * HEADINGS
 * To comply with the vertical baseline grid each heading has to have a total height
 * that is a multiple of 6.
 *
 * Root base font size is 16px;
 *
 *      Size    Margin
 * H1:  36px    18px
 * H2:  24px    12px
 * H3:  18px    12px
 * H4:  16px    12px
 *
 *
 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: "Titillium Web", Arial, sans-serif;
  font-weight: 400; }

h1, .h1 {
  font-size: 36px;
  font-size: 2.25rem;
  margin-bottom: 18px;
  margin-bottom: 1.125rem; }

.h1--underlined {
  border-bottom: 1px solid #151a1c; }

h2, .h2 {
  font-size: 24px;
  font-size: 1.5rem;
  margin-bottom: 12px;
  margin-bottom: 0.75rem; }

.h2--underlined {
  border-bottom: 1px solid #151a1c; }

h3, .h3 {
  font-size: 18px;
  font-size: 1.125rem;
  margin-bottom: 12px;
  margin-bottom: 0.75rem; }

.h3--underlined {
  border-bottom: 1px solid #151a1c; }

h4, .h4 {
  font-size: 16px;
  font-size: 1rem;
  margin-bottom: 12px;
  margin-bottom: 0.75rem; }

.h4--underlined {
  border-bottom: 1px solid #151a1c; }

h5, .h5 {
  font-size: 15px;
  font-size: 0.9375rem;
  margin-bottom: 12px;
  margin-bottom: 0.75rem; }

.h5--underlined {
  border-bottom: 1px solid #151a1c; }

h5 {
  color: #040405;
  color: rgba(2, 2, 3, 0.85);
  text-transform: uppercase; }

/*------------------------------------*\
    #MOLECULES

    Molecules are the components and elements of the page. They are made up of
    atoms and of their own properties. A dialog box is a perfect example of a
    molecule, being made up from several other pieces.

    Molecule can override some styling of atoms but you must be careful not to do
    so globally. If links should look different, make sure to namespace that
    change to contain it to the molecule in question.

\*------------------------------------*/
.Button, .Button--invisible, .OK-Cancel .Cancel, .OK-Cancel .Delete, .OK-Cancel .Delete-list, .OK-Cancel .OK, .OK-Cancel .Copy {
  border-radius: 3px;
  border: none;
  display: block;
  font-size: 16px;
  font-weight: 400;
  height: auto;
  outline: none;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  /**
   * Properties to extend for a new button type
   * @type {[type]}
   */
  background-color: #009fe3;
  box-shadow: 0 3px 0 0 #007aae;
  color: #283236;
  margin: 24px auto 3px;
  padding: 1em;
  width: 70%;
  /**
   * Different colors
   */
  /**
   * DIFFERENT SIZES
   */ }
  .Button:hover, .Button--invisible:hover, .OK-Cancel .Cancel:hover, .OK-Cancel .Delete:hover, .OK-Cancel .Delete-list:hover, .OK-Cancel .OK:hover, .OK-Cancel .Copy:hover {
    background-color: #0091cf;
    cursor: pointer; }
  .Button:active, .Button--invisible:active, .OK-Cancel .Cancel:active, .OK-Cancel .Delete:active, .OK-Cancel .Delete-list:active, .OK-Cancel .OK:active, .OK-Cancel .Copy:active {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
    box-shadow: 0 2px 0 0 #007aae; }
  .Button.positive, .positive.Button--invisible, .OK-Cancel .positive.Cancel, .OK-Cancel .positive.Delete, .OK-Cancel .positive.Delete-list, .OK-Cancel .positive.OK, .OK-Cancel .positive.Copy {
    background-color: #a5cd39;
    box-shadow: 0 3px 0 0 #769425; }
    .Button.positive:hover, .positive.Button--invisible:hover, .OK-Cancel .positive.Cancel:hover, .OK-Cancel .positive.Delete:hover, .OK-Cancel .positive.Delete-list:hover, .OK-Cancel .positive.OK:hover, .OK-Cancel .positive.Copy:hover {
      background-color: #9ac131;
      cursor: pointer; }
    .Button.positive:active, .positive.Button--invisible:active, .OK-Cancel .positive.Cancel:active, .OK-Cancel .positive.Delete:active, .OK-Cancel .positive.Delete-list:active, .OK-Cancel .positive.OK:active, .OK-Cancel .positive.Copy:active {
      box-shadow: 0 2px 0 0 #769425; }
  .Button.negative, .negative.Button--invisible, .OK-Cancel .negative.Cancel, .OK-Cancel .negative.Delete, .OK-Cancel .negative.Delete-list, .OK-Cancel .negative.OK, .OK-Cancel .negative.Copy {
    background-color: #cd3939;
    box-shadow: 0 3px 0 0 #942525; }
    .Button.negative:hover, .negative.Button--invisible:hover, .OK-Cancel .negative.Cancel:hover, .OK-Cancel .negative.Delete:hover, .OK-Cancel .negative.Delete-list:hover, .OK-Cancel .negative.OK:hover, .OK-Cancel .negative.Copy:hover {
      background-color: #c13131;
      cursor: pointer; }
    .Button.negative:active, .negative.Button--invisible:active, .OK-Cancel .negative.Cancel:active, .OK-Cancel .negative.Delete:active, .OK-Cancel .negative.Delete-list:active, .OK-Cancel .negative.OK:active, .OK-Cancel .negative.Copy:active {
      box-shadow: 0 2px 0 0 #942525; }
  .Button.grey, .grey.Button--invisible, .OK-Cancel .grey.Cancel, .OK-Cancel .grey.Delete, .OK-Cancel .grey.Delete-list, .OK-Cancel .grey.OK, .OK-Cancel .grey.Copy {
    background-color: #e8e8e8;
    color: #283236;
    box-shadow: 0 3px 0 0 #a7bcc4; }
    .Button.grey:active, .grey.Button--invisible:active, .OK-Cancel .grey.Cancel:active, .OK-Cancel .grey.Delete:active, .OK-Cancel .grey.Delete-list:active, .OK-Cancel .grey.OK:active, .OK-Cancel .grey.Copy:active {
      box-shadow: 0 2px 0 0 #a7bcc4; }
    .Button.grey.small, .grey.small.Button--invisible, .OK-Cancel .grey.small.Cancel, .OK-Cancel .grey.small.Delete, .OK-Cancel .grey.small.Delete-list, .OK-Cancel .grey.small.OK, .OK-Cancel .grey.small.Copy {
      box-shadow: 0 2px 0 0 #a7bcc4; }
      .Button.grey.small:active, .grey.small.Button--invisible:active, .OK-Cancel .grey.small.Cancel:active, .OK-Cancel .grey.small.Delete:active, .OK-Cancel .grey.small.Delete-list:active, .OK-Cancel .grey.small.OK:active, .OK-Cancel .grey.small.Copy:active {
        box-shadow: 0 1px 0 0 #a7bcc4; }
  .Button.invisible, .invisible.Button--invisible, .OK-Cancel .invisible.Cancel, .OK-Cancel .invisible.Delete, .OK-Cancel .invisible.Delete-list, .OK-Cancel .invisible.OK, .OK-Cancel .invisible.Copy {
    background-color: transparent;
    box-shadow: none; }
    .Button.invisible:active, .invisible.Button--invisible:active, .OK-Cancel .invisible.Cancel:active, .OK-Cancel .invisible.Delete:active, .OK-Cancel .invisible.Delete-list:active, .OK-Cancel .invisible.OK:active, .OK-Cancel .invisible.Copy:active {
      box-shadow: none; }
  .Button.small, .small.Button--invisible, .OK-Cancel .small.Cancel, .OK-Cancel .small.Delete, .OK-Cancel .small.Delete-list, .OK-Cancel .small.OK, .OK-Cancel .small.Copy {
    width: auto;
    display: inline-block;
    padding: .7em 2em;
    margin: 0;
    /**
     * To vertical align properly the buttons is offset as much upwards as the
     * shadow is long downwards
     */
    font-size: 13px;
    font-size: 0.8125rem; }
  .Button.medium, .medium.Button--invisible, .OK-Cancel .medium.Cancel, .OK-Cancel .medium.Delete, .OK-Cancel .medium.Delete-list, .OK-Cancel .medium.OK, .OK-Cancel .medium.Copy {
    width: auto;
    display: inline-block;
    padding: .75em 1.25em;
    margin: 0; }
  .Button.full, .full.Button--invisible, .OK-Cancel .full.Cancel, .OK-Cancel .full.Delete, .OK-Cancel .full.Delete-list, .OK-Cancel .full.OK, .OK-Cancel .full.Copy {
    width: 100%; }
  .Button.invisible, .invisible.Button--invisible, .OK-Cancel .invisible.Cancel, .OK-Cancel .invisible.Delete, .OK-Cancel .invisible.Delete-list, .OK-Cancel .invisible.OK, .OK-Cancel .invisible.Copy {
    background-color: transparent;
    box-shadow: none;
    margin: 0; }
    .Button.invisible:active, .invisible.Button--invisible:active, .OK-Cancel .invisible.Cancel:active, .OK-Cancel .invisible.Delete:active, .OK-Cancel .invisible.Delete-list:active, .OK-Cancel .invisible.OK:active, .OK-Cancel .invisible.Copy:active {
      -webkit-transform: none;
              transform: none;
      box-shadow: none;
      background-color: transparent; }
  .Button.no-margin, .no-margin.Button--invisible, .OK-Cancel .no-margin.Cancel, .OK-Cancel .no-margin.Delete, .OK-Cancel .no-margin.Delete-list, .OK-Cancel .no-margin.OK, .OK-Cancel .no-margin.Copy {
    margin: 0; }
  .Button.arrow-right, .arrow-right.Button--invisible, .OK-Cancel .arrow-right.Cancel, .OK-Cancel .arrow-right.Delete, .OK-Cancel .arrow-right.Delete-list, .OK-Cancel .arrow-right.OK, .OK-Cancel .arrow-right.Copy {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased; }
    .Button.arrow-right:before, .arrow-right.Button--invisible:before, .OK-Cancel .arrow-right.Cancel:before, .OK-Cancel .arrow-right.Delete:before, .OK-Cancel .arrow-right.Delete-list:before, .OK-Cancel .arrow-right.OK:before, .OK-Cancel .arrow-right.Copy:before {
      position: absolute;
      content: "\f061";
      height: 100%;
      font-size: 14px;
      line-height: 33px;
      transition: all 0.3s;
      right: -30px;
      top: 0; }
    .Button.arrow-right:hover:before, .arrow-right.Button--invisible:hover:before, .OK-Cancel .arrow-right.Cancel:hover:before, .OK-Cancel .arrow-right.Delete:hover:before, .OK-Cancel .arrow-right.Delete-list:hover:before, .OK-Cancel .arrow-right.OK:hover:before, .OK-Cancel .arrow-right.Copy:hover:before {
      right: 5px; }
  .Button.check-right, .check-right.Button--invisible, .OK-Cancel .check-right.Cancel, .OK-Cancel .check-right.Delete, .OK-Cancel .check-right.Delete-list, .OK-Cancel .check-right.OK, .OK-Cancel .check-right.Copy {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased; }
    .Button.check-right:before, .check-right.Button--invisible:before, .OK-Cancel .check-right.Cancel:before, .OK-Cancel .check-right.Delete:before, .OK-Cancel .check-right.Delete-list:before, .OK-Cancel .check-right.OK:before, .OK-Cancel .check-right.Copy:before {
      position: absolute;
      content: "\f00c";
      height: 100%;
      font-size: 14px;
      line-height: 33px;
      transition: all 0.3s;
      right: -30px;
      top: 0; }
    .Button.check-right:hover:before, .check-right.Button--invisible:hover:before, .OK-Cancel .check-right.Cancel:hover:before, .OK-Cancel .check-right.Delete:hover:before, .OK-Cancel .check-right.Delete-list:hover:before, .OK-Cancel .check-right.OK:hover:before, .OK-Cancel .check-right.Copy:hover:before {
      right: 5px; }

.Button--invisible, .OK-Cancel .Cancel {
  background-color: transparent;
  box-shadow: none; }
  .Button--invisible:active, .OK-Cancel .Cancel:active {
    box-shadow: none;
    background-color: transparent; }

.Button-close {
  position: absolute;
  top: 24px;
  top: 1.5rem;
  right: 24px;
  right: 1.5rem;
  font-size: 24px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #e8e8e8;
  background: none;
  border: none;
  box-shadow: none;
  outline: none; }
  .Button-close:hover {
    color: #a7bcc4; }

.OK-Cancel:after {
  content: "";
  display: table;
  clear: both; }
.OK-Cancel .Cancel {
  display: inline-block;
  width: 100px;
  float: right;
  margin-top: 0;
  font-size: 14px;
  line-height: 24px;
  color: #2d383d;
  color: rgba(40, 50, 54, 0.54); }
  .OK-Cancel .Cancel:active, .OK-Cancel .Cancel:hover, .OK-Cancel .Cancel:focus {
    background-color: transparent;
    box-shadow: none;
    text-decoration: underline; }
.OK-Cancel .Delete, .OK-Cancel .Delete-list {
  color: white;
  background-color: #cd3939;
  box-shadow: 0 3px 0 0 #b83333;
  font-size: 14px;
  display: inline-block;
  width: auto;
  display: inline-block;
  padding: .5em 1em;
  margin: 10px 25px 0 0; }
  .OK-Cancel .Delete:hover, .OK-Cancel .Delete-list:hover {
    background-color: #c13131;
    box-shadow: 0 3px 0 0 #a82f2f; }
  .OK-Cancel .Delete:active, .OK-Cancel .Delete-list:active {
    box-shadow: 0 2px 0 0 #b83333; }
.OK-Cancel .Delete-list {
  padding: 4px 8px;
  margin: 0px; }
.OK-Cancel .OK {
  display: inline-block;
  width: 200px;
  float: right;
  margin-top: 0; }
.OK-Cancel .Copy {
  background-color: #c0c0c0 !important;
  box-shadow: 0 3px 0 0 #a0a0a0;
  display: inline-block;
  width: 200px;
  float: right;
  margin-top: 0; }

.CompatibilityList {
  margin-bottom: 36px; }
  .CompatibilityList > h3 {
    margin-bottom: 18px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0; }
  .CompatibilityList > li {
    width: 100px; }
    .CompatibilityList > li i {
      display: block;
      font-size: 28px;
      margin-bottom: 8px;
      color: #cd3939;
      transition: color 0.3s ease-out; }
      .CompatibilityList > li i.green {
        color: #7c992b; }
      .CompatibilityList > li i.orange {
        color: #f7a500; }

.CL-help {
  color: #91a3ab;
  cursor: pointer; }
  .CL-help:hover {
    color: white;
    -webkit-transform: scale(1.05);
            transform: scale(1.05); }

/**
 * Inline lists
 *
 * A handy little molecule that produces a vertical list. In its standard format
 * each list item will only take up the amount of space its content dictates,
 * but with the *cols classes at the bottom you can set the percentual width of
 * each item.
 */
.InlineList, .CompatibilityList, .InlineList-companyInfo, .InlineList--paddingRight {
  letter-spacing: -0.31em; }

.InlineList-item, .CompatibilityList > li, .InlineList > li, .InlineList-companyInfo > li, .InlineList--paddingRight li {
  display: inline-block;
  letter-spacing: 0;
  text-align: center; }

.InlineList-companyInfo {
  position: relative; }
  .InlineList-companyInfo:before {
    content: attr(data-pseudo);
    position: absolute;
    top: -31px;
    color: #e8e8e8;
    font-size: 33px;
    text-align: right;
    font-weight: 600;
    width: 99%;
    letter-spacing: 0;
    pointer-events: none; }
  .InlineList-companyInfo > li {
    padding: 7px 0;
    background: #e8e8e8;
    border-bottom: 3px solid;
    white-space: nowrap; }
    .InlineList-companyInfo > li:first-of-type {
      border-bottom-color: #33b2e8; }
    .InlineList-companyInfo > li:nth-of-type(2) {
      border-bottom-color: #d76161; }
    .InlineList-companyInfo > li:nth-of-type(3) {
      border-bottom-color: #a5cd39; }
    .InlineList-companyInfo > li:nth-of-type(4) {
      border-bottom-color: #b83333; }

.InlineList-2cols > li {
  width: 50%; }

.InlineList-3cols > li {
  width: 33%; }

.InlineList-4cols > li {
  width: 25%; }

.InlineList--paddingRight li {
  padding-right: 20px; }

/**
 * The media object
 * More info: http://hmps.se/1e0CKLW
 */
.MediaObject, .MO, .personal-visit, .media-object {
  display: block; }
  .MediaObject:after, .MO:after, .personal-visit:after, .media-object:after {
    content: "";
    display: table;
    clear: both; }
  .MediaObject > img, .MediaObject .MediaObject-image, .MediaObject .MO-image, .MediaObject .media-object__img, .MO > img, .MO .MediaObject-image, .MO .MO-image, .MO .media-object__img, .personal-visit > img, .personal-visit .MediaObject-image, .personal-visit .MO-image, .personal-visit .media-object__img, .media-object > img, .media-object .MediaObject-image, .media-object .MO-image, .media-object .media-object__img {
    display: block;
    float: left;
    margin-right: 1em; }
  .MediaObject .MediaObject-body, .MediaObject .MO-body, .MediaObject .media-object__body, .MediaObject .personal-visit__body, .MO .MediaObject-body, .MO .MO-body, .MO .media-object__body, .MO .personal-visit__body, .personal-visit .MediaObject-body, .personal-visit .MO-body, .personal-visit .media-object__body, .personal-visit .personal-visit__body, .media-object .MediaObject-body, .media-object .MO-body, .media-object .media-object__body, .media-object .personal-visit__body {
    overflow: hidden;
    margin-bottom: 0;
    line-height: 1.2; }

.MediaObject--rev, .MO--rev {
  display: block; }
  .MediaObject--rev:after, .MO--rev:after {
    content: "";
    display: table;
    clear: both; }
  .MediaObject--rev > img, .MediaObject--rev .MediaObject-image, .MediaObject--rev .MO-image, .MO--rev > img, .MO--rev .MediaObject-image, .MO--rev .MO-image {
    display: block;
    float: right;
    margin-left: 1em; }
  .MediaObject--rev .MediaObject-body, .MediaObject--rev .MO-body, .MO--rev .MediaObject-body, .MO--rev .MO-body {
    overflow: hidden;
    margin-bottom: 0;
    line-height: 1.2;
    float: left; }

.Modal-open {
  overflow: hidden; }

.Modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 799; }
  .Modal-wrapper.is-hidden {
    display: none; }

.Modal {
  position: relative;
  margin: 100px auto;
  width: 700px;
  z-index: 800;
  background-color: white;
  color: #283236;
  border-radius: 10px;
  transition: visibility 0.1s, opacity 0.2s;
  visibility: hidden;
  opacity: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.05);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%); }
  .Modal.is-visible {
    visibility: visible;
    opacity: 1;
    top: 50%;
    left: 50%;
    margin: auto;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
  .Modal.wide {
    margin-left: -450px;
    width: 900px; }
  .Modal .Button-close {
    line-height: 0; }

.Modal-heading {
  width: 100%;
  background-color: #1b7a91;
  padding: 10px 20px;
  color: white;
  margin-bottom: 18px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }
  .Modal-heading > h1 {
    margin-bottom: 0;
    font-size: 36px; }

.Modal-body {
  width: 100%;
  padding: 0 24px 18px; }
  .Modal-body .a_Select {
    margin-left: 0;
    margin-right: 0; }
  .Modal-body .ModalCTAContainer {
    text-align: right; }
    .Modal-body .ModalCTAContainer button {
      margin-bottom: 0; }

.Modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 799;
  background-color: rgba(37, 43, 51, 0.8);
  visibility: hidden; }
  .Modal-overlay.is-visible {
    visibility: visible; }

.Modal-title {
  font-size: 64px;
  font-size: 4rem;
  margin-bottom: 36px;
  margin-bottom: 2.25rem;
  color: #283236;
  text-align: center; }

.Modal-Excelimage {
  width: 120px;
  height: auto; }
  .Modal-Excelimage .shape {
    fill: #7c992b; }

.Modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10; }

/*------------------------------------*\
    #CATALYSTS

    Catalysts are small helpers and gadgets that take predecence over other styles.
    It can be styling tags that cancel margins or state tags that sets the color
    of text.

\*------------------------------------*/
.is-invisible, .u-invisible {
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.2s linear; }

.is-clickable:hover, .u-clickable:hover {
  cursor: pointer; }

.is-error {
  background-color: #d76161;
  color: white;
  font-weight: 400;
  border-radius: 4px;
  padding: .7em .5em; }
  .is-error > a {
    color: white; }

.is-info {
  font-weight: 400;
  padding: .7em .5em; }

.is-hidden {
  display: none; }

/**
 * Extendable helpers
 */
/**
 * POSITION HELPERS
 *
 * Helpers for position blocks or elements
 */
.u-vam {
  vertical-align: middle; }

.u-noMargin {
  margin: 0; }

.u-textCenter {
  text-align: center; }

/**
 * DISPLAY HELPERS
 */
.u-showOverflow {
  overflow: visible !important; }

.u-floatLeft {
  float: left; }

.u-floatRight {
  float: right; }

.VTc .u-floatRight {
  float: none;
  position: absolute;
  right: 4px; }

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

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

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

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

.mb2 {
  margin-bottom: 2px !important; }

.mr2 {
  margin-right: 2px !important; }

.mt2 {
  margin-top: 2px !important; }

.ml2 {
  margin-left: 2px !important; }

.mb3 {
  margin-bottom: 3px !important; }

.mr3 {
  margin-right: 3px !important; }

.mt3 {
  margin-top: 3px !important; }

.ml3 {
  margin-left: 3px !important; }

.mb4 {
  margin-bottom: 4px !important; }

.mr4 {
  margin-right: 4px !important; }

.mt4 {
  margin-top: 4px !important; }

.ml4 {
  margin-left: 4px !important; }

.mb5 {
  margin-bottom: 5px !important; }

.mr5 {
  margin-right: 5px !important; }

.mt5 {
  margin-top: 5px !important; }

.ml5 {
  margin-left: 5px !important; }

.mb6 {
  margin-bottom: 6px !important; }

.mr6 {
  margin-right: 6px !important; }

.mt6 {
  margin-top: 6px !important; }

.ml6 {
  margin-left: 6px !important; }

.mb7 {
  margin-bottom: 7px !important; }

.mr7 {
  margin-right: 7px !important; }

.mt7 {
  margin-top: 7px !important; }

.ml7 {
  margin-left: 7px !important; }

.mb8 {
  margin-bottom: 8px !important; }

.mr8 {
  margin-right: 8px !important; }

.mt8 {
  margin-top: 8px !important; }

.ml8 {
  margin-left: 8px !important; }

.mb9 {
  margin-bottom: 9px !important; }

.mr9 {
  margin-right: 9px !important; }

.mt9 {
  margin-top: 9px !important; }

.ml9 {
  margin-left: 9px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mr10 {
  margin-right: 10px !important; }

.mt10 {
  margin-top: 10px !important; }

.ml10 {
  margin-left: 10px !important; }

.u-prefix {
  margin-left: 1px; }
  .u-prefix:before {
    content: attr(data-prefix);
    margin-right: 1px; }

.u-db {
  display: block; }

.u-w100p {
  width: 100%; }

.u-br50 {
  border-radius: 50%; }

/**
 * TEXT HELPERS
 */
.u-capitalize {
  text-transform: capitalize; }

.u-huge {
  font-size: 160px;
  font-size: 10rem; }

.u-smallText, .CL-help {
  font-size: 0.875em;
  font-size: 0.875rem; }

.u-miniText {
  font-size: 12px; }

.u-halfSize {
  font-size: .5em; }

.u-underlined {
  border-bottom: 1px solid #e8e8e8; }

.u-centerText {
  text-align: center; }

.u-leftText {
  text-align: left; }

.u-rightText {
  text-align: right; }

.u-redText, .u-negativeText {
  color: #945253 !important; }

.u-blueText {
  color: #009fe3 !important; }

.u-lightText {
  color: rgba(40, 50, 54, 0.54) !important; }

.u-greenText, .u-positiveText {
  color: #769425 !important; }

.u-normalText {
  font-weight: 300 !important; }

.u-boldText {
  font-weight: 400 !important; }

.u-bolderText {
  font-weight: 700 !important; }

.u-italicText {
  font-style: italic !important; }

body {
  background-color: #272727; }

.Login {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  background-color: #ffffff;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 5px;
  padding: 50px 50px 35px; }

.Login input {
  margin-bottom: 18px; }

.Login .Instructions {
  font-size: 12px;
  margin-bottom: 6px; }

.Login input[type=text],
.Login input[type=email],
.Login input[type=password] {
  background-color: #ffffff !important; }

.Login input[type=checkbox] {
  vertical-align: middle; }

.Login input[type=checkbox] + label {
  vertical-align: middle;
  padding-left: 20px; }

.Login .ActionRow {
  position: relative;
  height: 34px; }

.Login button[type=submit] {
  position: absolute;
  right: 0;
  top: 0;
  margin-bottom: 0; }

.Login-textLink {
  display: inline-block;
  line-height: 34px;
  font-size: 12px;
  color: inherit;
  text-decoration: underline; }

.Login-error {
  font-size: 12px;
  margin-bottom: 6px;
  color: #e26a6a;
  font-weight: bold;
  margin-top: 12px; }

.Login-success {
  font-size: 12px;
  margin-bottom: 6px;
  color: #72c3b2;
  font-weight: bold;
  margin-top: 12px; }

.Logo-text {
  text-align: center;
  font-size: 0;
  margin-bottom: 50px; }

.Logo-text img {
  text-align: center;
  width: 65%; }