@charset "UTF-8";
/**
 * Functions borrowed from Foundation.
 */
.alignLeft {
  text-align: left !important; }

.alignCenter {
  text-align: center !important; }

.alignRight {
  text-align: right !important; }

.noMarginTop {
  margin-top: 0 !important; }

.noMarginBottom {
  margin-bottom: 0 !important; }

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

.noMarginLeft {
  margin-left: 0 !important; }

.noMarginRight {
  margin-right: 0 !important; }

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

.noMargin {
  margin: 0 !important; }

.noPaddingTop {
  padding-top: 0 !important; }

.noPaddingBottom {
  padding-bottom: 0 !important; }

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

.noPaddingLeft {
  padding-left: 0 !important; }

.noPaddingRight {
  padding-right: 0 !important; }

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

.noPadding {
  padding: 0 !important; }

.fullHeight {
  height: 100% !important; }

.fullWidth {
  width: 100% !important; }

.inlineBlock {
  display: inline-block !important; }

.invisible {
  visibility: hidden !important; }

/**
 * 1. Support IE10.
 */
/**
 * 1. Support IE10.
 */
/**
 * 1. Support IE10.
 */
/**
 * 1. Support IE10.
 */
/**
 * A container for one or more fixed-width items, and one fluid-width item.
 * The fluid-width item will expand so that the items fill the container.
 */
/**
 * A container that vertically and horizontally centers its child.
 */
/**
 * These colors are all overrideable so that themes that extend this one
 * (e.g. Sun theme) can easily customize the appearance of components in
 * a future-proof manner.
 */
/**
 * Status colors.
 *
 * 1. Gray
 * 2. Blue
 * 3. Green
 * 4. Yellow
 * 5. Red
 */
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/**
 * Old status colors. TODO: Refactor these out of the status namespace.
 */
/**
 * Backgrounds.
 *
 * 1. Default background color.
 * 2. Stand out from the befault background color.
 * 3. Call attention to a component that performs actions, e.g. button.
 */
/* [1] */
/* [2] */
/* [3] */
/* [3] */
/**
 * Typography.
 *
 * 1. Default font color.
 * 2. Sometimes text needs to appear disabled, e.g. disabled table rows.
 * 3. Less noticeable than the default color.
 * 4. Less noticeable than the subdued color.
 */
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/**
 * Lines.
 *
 * Lines that separate content, e.g. horizontal rule, or the lines between
 * items in a list or sections in a view.
 *
 * 1. For containers that enclose content, separated from surrounding content.
 * 2. For headers that appear once on the page.
 * 3. For separating the main sections of content within a view.
 * 4. For separating list items, e.g. menus, dropdowns, grids, tables.
 * 5. For isolating a discrete element, e.g. a form input.
 */
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/**
 * Background states.
 *
 * These colors indicate interactive states.
 */
/**
 * Font states.
 *
 * These colors indicate interactive states.
 */
/**
/**
 * Backgrounds.
 *
 * 1. Default background color.
 * 2. A darker background color for standing out, e.g. dark form inputs.
 * 3. Call attention to a component that performs actions, e.g. button.
 */
/* [1] */
/* [2] */
/* [3] */
/* [3] */
/**
 * Typography.
 *
 * 1. Default font color.
 * 2. Sometimes text needs to appear disabled, e.g. disabled table rows.
 */
/* [1] */
/* [2] */
/**
 * Lines.
 *
 * Lines that separate content, e.g. horizontal rule, or the lines between
 * items in a list or sections in a view.
 *
 * 1. For containers that enclose content, separated from surrounding content.
 * 2. For headers that appear once on the page.
 * 3. For separating the main sections of content within a view.
 * 4. For separating list items, e.g. menus, dropdowns, grids, tables.
 * 5. For isolating a discrete element, e.g. a form input.
 */
/* [1] */
/* [2] */
/* [3] */
/* [4] */
/* [5] */
/**
 * Background states.
 *
 * These colors indicate interactive states.
 */
/**
 * Font states.
 *
 * These colors indicate interactive states.
 */
/**
 * Body colors.
 */
/**
 * Scrollbar colors.
 */
/**
 * Link colors.
 */
/**
 * Shadows.
 *
 * 1. A shadow lying flat on the base surface.
 * 2. Slightly elevated over the base surface.
 * 3. High-altitude.
 */
/* [1] */
/* [2] */
/* [2] */
/* [3] */
/**
 * 1. Provide this variable for components (e.g. pikaday) that need to refer to
 *    it in their styles.
 */
/* [1] */
/**
 * Light theme.
 */
/**
 * Dark theme.
 */
/**
 * Light theme.
 */
/**
 * Dark theme.
 */
/**
 * Light theme.
 */
/**
 * Dark theme.
 */
/**
 * App switcher.
 */
/**
 * Account links.
 *
 * 1. Username.
 * 2. Dropdowm.
 */
/* [1] */
/* [2] */
/* [2] */
/**
 * Light theme.
 */
/**
 * Dark theme.
 */
/**
 * Light theme.
 */
/**
 * Dark theme.
 */
/**
 * Light theme.
 *
 * 1. Header.
 * 2. Body.
 * 3. Disabled rows.
 * 4. Selected rows.
 */
/* [1] */
/* [2] */
/**
 * Dark theme.
 *
 * 1. Header.
 * 2. Body.
 * 3. Disabled rows.
 * 4. Selected rows.
 */
/* 1 */
/* [1] */
/* [1] */
/* [2] */
/* [2] */
/* [3] */
/* [4] */
/**
 * Light theme.
 */
/**
 * Dark theme.
 */
/**
 * 1. Push the sidenav down so it doesn't get hidden behind the global header.
 */
/* [1] */
/**
 * 1. The width of the sidenav for the large breakpoint.
 * 2. The width of the sidenav for the medium breakpoint.
 */
/* [1] */
/* [2] */
/**
 * Width
  *
 * 1. The width of the header for the large breakpoint.
 * 2. The width of the header for the medium breakpoint.
 */
/* [1] */
/* [2] */
/**
 * 1. The left-side offset of the page for the large breakpoint.
 * 2. The left-side offset of the page for the medium breakpoint.
 */
/* [1] */
/* [2] */
/**
 * 1. Push the page down so it doesn't get hidden behind the global header.
 */
/* [1] */
/**
 * 1. The speed of the transition between the wide to medium breakpoints.
 */
/* [1] */
/**
 * 1. The speed of the transition between the wide to medium breakpoints.
 */
/* [1] */
/**
 * 1. The speed of the transition between the wide to medium breakpoints.
 */
/* [1] */
/**
 * 1. Setting this to a whole value (e.g. 12px) will cause it to render as an
 *    oval.
 */
/* [1] */
/**
 * 1. Display higher than other elements.
 * 2. Light theme by default.
 */
/**
 * Use this mixin to create a scrollable content area inside of modals.
 * In situations where there is a sticky action bar, or other sticky UI
 * elements (either above or below the scrollable content area), be sure to
 * specify the aggregate height (in px) of those elements.
 *
 * 1. This content area will expand to occupy the entire height of the viewport,
 *    minus the height of the modal chrome and margin.
 * 2. Let the user scroll to see overflowing content.
 */
/**
 * THESE ARE ALL DEPRECATED 4/1/15.
 */
/**
 * Use this trump to push down the content in an appPage, if there is an
 * action bar present.
 */
.withActionBar {
  margin-top: 47px !important; }

/**
 * Use this trump to push down the content in an appPage, if there is a cozy
 * action bar present.
 */
.withCozyActionBar {
  margin-top: 32px !important; }

.appScrollable {
  overflow-y: auto !important;
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */ }
  .appScrollable::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .appScrollable::-webkit-scrollbar-thumb {
    background-color: #898989;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .appScrollable::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }

/**
 * Import styles in your project like this in your main.scss file:
 *
 * ```
 * // First import layout and tools, for use when building project styles.
 * @import "path/to/bower_components/css-base/src/baseLayout/index";
 * @import "path/to/bower_components/css-base/src/baseTools/index";
 *
 * // Import your theme-specific defaults.
 * @import "src/theme-styles/defaultsFile"
 *
 * // Import the rest of base by importing this file.
 * @import "path/to/bower_components/css-base/src/base";

 * // Lastly, import your theme's styles.
 * @import "src/theme-styles/mainFile"
 * ```
 */
/**
 * Respond to media queries.
 * e.g:
 *
    .full-width-on-mobile-and-bigscreentv {
        width: 50%;
        @include respondTo(small-only xxlarge-only) {
            width: 100%;
        }
    }
 *
 */
/**
 * Hide everything except for
 * .visible--xs, .visible--xsUp, .visible--smDown, .visible--mdDown, .visible--lgDown,
 * .visible--xlgDown
 */
@media only screen and (max-width: 480px) {
  .visible--sm,
  .visible--smUp,
  .visible--md,
  .visible--mdUp,
  .visible--lg,
  .visible--lgUp,
  .visible--xlg,
  .visible--xlgUp,
  .visible--xxlg,
  .visible--xxlgUp {
    display: none !important; } }
/**
 * Hide everything except for
 * .visible--xsUp, .visible--sm, .visible--smUp, .visible--smDown, .visible--mdDown,
 * .visible--lgDown, .visible--xlgDown
 */
@media only screen and (min-width: 481px) and (max-width: 800px) {
  .visible--xs,
  .visible--md,
  .visible--mdUp,
  .visible--lg,
  .visible--lgUp,
  .visible--xlg,
  .visible--xlgUp,
  .visible--xxlg,
  .visible--xxlgUp {
    display: none !important; } }
/**
 * Hide everything except for
 * .visible--xsUp, .visible--smUp, .visible--md, .visible--mdUp, .visible--mdDown,
 * .visible--lgDown, .visible--xlgDown
 */
@media only screen and (min-width: 801px) and (max-width: 1040px) {
  .visible--xs,
  .visible--sm,
  .visible--smDown,
  .visible--lg,
  .visible--lgUp,
  .visible--xlg,
  .visible--xlgUp,
  .visible--xxlg,
  .visible--xxlgUp {
    display: none !important; } }
/**
 * Hide everything except for
 * .visible--xsUp, .visible--smUp, .visible--mdUp, .visible--lg, .visible--lgUp,
 * .visible--lgDown, .visible--xlgDown
 */
@media only screen and (min-width: 1041px) and (max-width: 1440px) {
  .visible--xs,
  .visible--sm,
  .visible--smDown,
  .visible--md,
  .visible--mdDown,
  .visible--xlg,
  .visible--xlgUp,
  .visible--xxlg,
  .visible--xxlgUp {
    display: none !important; } }
/**
 * Hide everything except for
 * .visible--xsUp, .visible--smUp, .visible--mdUp, .visible--lgUp, .visible--xlg,
 * .visible--xlgUp, .visible--xlgDown
 */
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  .visible--xs,
  .visible--sm,
  .visible--smDown,
  .visible--md,
  .visible--mdDown,
  .visible--lg,
  .visible--lgDown,
  .visible--xxlg,
  .visible--xxlgUp {
    display: none !important; } }
/**
 * Hide everything except for
 * .visible--xsUp, .visible--smUp, .visible--mdUp, .visible--lgUp, .visible--xlgUp,
 * .visible--xxlg, .visible-xxlgUp
 */
@media only screen and (min-width: 1921px) and (max-width: 2400px) {
  .visible--xs,
  .visible--sm,
  .visible--smDown,
  .visible--md,
  .visible--mdDown,
  .visible--lg,
  .visible--lgDown,
  .visible--xlg,
  .visible--xlgDown {
    display: none !important; } }
/**
 * Accessible hiding. From Snook Research and the HTML5 boilerplate.
 * http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/
 */
.offstage {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  width: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important; }

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

/*------------------------------------*\
    #ANIMATE ATTENTION SEEKERS
    bounce, flash, pulse, shake
    swing, tada, wobble
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }

  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }

  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); } }

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg); }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); } }

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg); }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg); }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); } }

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

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

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

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

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

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

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

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

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

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

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0); } }

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); } }

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); } }

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

/*------------------------------------*\
    #ANIMATE BOUNCE IN
    bounceIn, bounceInDown, bounceInLeft
    bounceInRight, bounceInUp
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }

  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9); }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }

  70% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9); }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); } }

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px); }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

/*------------------------------------*\
    #ANIMATE BOUNCE OUT
    bounceOut, bounceOutDown,
    bounceOutLeft, bounceOutRight,
    bounceOutUp
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

/*------------------------------------*\
    #ANIMATE FADE IN
    fadeIn, fadeInDown, fadeInDownBig,
    fadeInLeft, fadeInLeftBig,
    fadeInRight, fadeInRightBig,
    fadeInUp, fadeInUpBig
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

/*------------------------------------*\
    #ANIMATE FADE OUT
    fadeOut, fadeOutDown, fadeOutDownBig,
    fadeOutLeft, fadeOutLeftBig,
    fadeOutRight, fadeOutRightBig,
    fadeOutUp, fadeOutUpBig
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); } }

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); } }

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); } }

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); } }

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

/*------------------------------------*\
    #ANIMATE FLIP
    flip, flipInX, flipInY,
    flipOutX, flipOutY
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

/*------------------------------------*\
    #ANIMATE LIGHT SPEED
    lightSpeedIn, lightSpeedOut
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

/*------------------------------------*\
    #ANIMATE ROTATE IN
    rotateIn, rotateInDownLeft,
    rotateInDownRight, rotateInUpLeft,
    rotateInUpRight
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

/*------------------------------------*\
    #ANIMATE ROTATE OUT
    rotateOut, rotateOutDownLeft,
    rotateOutDownRight, rotateOutUpLeft,
    rotateOutUpRight
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

/*------------------------------------*\
    #ANIMATE SLIDER
    slideInDown, slideInLeft, 
    slideInRight, slideOutLeft,
    slideOutRight, slideOutUp
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); } }

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

/*------------------------------------*\
    #ANIMATE SPECIAL
    hinge, rollIn, rollOut
\*------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of 
this software and associated documentation files (the "Software"), to deal in 
the Software without restriction, including without limitation the rights to 
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
of the Software, and to permit persons to whom the Software is furnished to do 
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all 
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 
THE SOFTWARE.
*/
@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); } }

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

/**
 * The avatar component styles images as if they are avatar images. Apply this
 * class either to an element with a background-image.
 *
 * Override the width and height to change its size.
 */
.avatar {
  width: 5em;
  height: 5em;
  background-position: 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.avatar--circle {
  border-radius: 100%; }

/**
 * Buttons can be grouped together when wrapped with the buttonGroup object.
 *
 * 1. Allows vertical alignment and to leverage table-layout:fixed.
 * 2. Creates equally sized buttons inside the buttonGroup.
 * 3. Conforms to full width of parent container.
 * 4. Reset ul styles, which may or may not be present.
 */
.buttonGroup {
  display: table;
  /* [1] */
  table-layout: fixed;
  /* [2] */
  width: 100%;
  /* [3] */
  list-style: none;
  /* [4] */
  margin: 0;
  /* [4] */
  padding: 0;
  /* [4] */
  /**
   * When buttons are inside a buttonGroup they require certian
   * default button styles cleared.
   *
   * 1. Creates equally sized buttons inside the buttonGroup.
   * 2. Remove the shadows from the buttons because they overlap. The theme's
   *    buttonGroup should re-apply this shadow to the buttonGroup element.
   * 3. Buttons should be flush against one another.
   * 4. Buttons in the middle should not have any rounded corners.
   * 5. First and last buttons should only have border radius on outer edges.
   */
  /**
   * 1. Remove doubled-up borders created by buttons being flush up against
   *    one another.
   */ }
  .buttonGroup button,
  .buttonGroup .button {
    display: table-cell;
    /* [1] */
    vertical-align: middle;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /* [2] */ }
    .buttonGroup button:not(:first-child):not(:last-child),
    .buttonGroup .button:not(:first-child):not(:last-child) {
      margin-left: 0;
      /* [3] */
      margin-right: 0;
      /* [3] */
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      -o-border-radius: 0;
      border-radius: 0;
      /* [4] */ }
    .buttonGroup button:first-child,
    .buttonGroup .button:first-child {
      -moz-border-radius-topright: 0;
      -webkit-border-top-right-radius: 0;
      border-top-right-radius: 0;
      -moz-border-radius-bottomright: 0;
      -webkit-border-bottom-right-radius: 0;
      border-bottom-right-radius: 0;
      /* [5] */ }
    .buttonGroup button:last-child,
    .buttonGroup .button:last-child {
      -moz-border-radius-topleft: 0;
      -webkit-border-top-left-radius: 0;
      border-top-left-radius: 0;
      -moz-border-radius-bottomleft: 0;
      -webkit-border-bottom-left-radius: 0;
      border-bottom-left-radius: 0;
      /* [5] */ }
  .buttonGroup li + li button,
  .buttonGroup li + li .button, .buttonGroup li + li.button {
    border-left: 0;
    /* [1] */ }

.buttonGroup--shrink {
  display: block;
  width: auto; }

/**
 * DEPRECATED
 *
 * These children of the buttonGroup provide the layout of individual
 * buttons in the group.
 *
 * 1. Needed in order to take advantage of parent display:table
 */
.buttonGroup__item {
  display: table-cell;
  /* [1] */ }

/**
 * This is the button object. Alone this is not a fully functional
 * button. It should be combined with a class in modules/_button.scss.
 *
 * 1. Margin 0 is needed to reset the HTML button element.
 * 2. Outline none to reset HTML button behaviour.
 */
button,
.button {
  margin: 0;
  /* [1] */
  display: inline-block;
  cursor: pointer;
  font-size: 1rem; }
  button:hover, button:focus,
  .button:hover,
  .button:focus {
    outline: none;
    /* [2] */ }

/**
 * An icon may accompany the button's text. The default
 * accomidates an icon on the left.
 *
 * 1. Vertically align icon with text.
 * 2. Provides space between icon and text when icon is left of text.
 */
.button__icon {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [1] */
  margin-top: -0.14286em;
  /* [1] */
  margin-right: 0.7em;
  /* [2] */ }

/**
 * An icon to the right of button text
 *
 * 1. Undoes margin-right in .button__icon
 * 2. Provides space between icon and text when icon is right of text.
 */
.button__icon--right {
  margin-right: 0;
  /* [1] */
  margin-left: 0.7em;
  /* [2] */ }

.button--full {
  width: 100%; }

/**
 * TODO: generic/clearfix should use this mixin.
 */
/**
 * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * Extend the clearfix class with Sass to avoid the `.clearfix` class appearing over
 * and over in your markup.
 *
 * TODO: Update these classes to use tools/clearfix.
 */
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

/**
 * This is a counter that displays how many of
 * something there is.
 *
 * 1. Makes the container slightly taller than the text inside.
 * 2. Default width is slightly wider than text, but is horizontally
 *    flexible to allow large numbers.
 * 3. Allows usage of table-cell in .count__value.
 */
.count {
  height: 1.6em;
  /* [1] */
  min-width: 1.6em;
  /* [2] */
  display: table;
  /* [3] */
  font-weight: 700;
  line-height: 1em; }

/**
 * The count object is a counter that displays how many of
 * something there is.
 *
 * 1. Table-cell to leverage vertical-align.
 * 2. Centers text
 */
.count__value {
  display: table-cell;
  /* [1] */
  text-align: center;
  /* [2] */
  vertical-align: middle;
  /* [2] */
  padding: 0 .3em;
  /**
   * Removes padding from the counter.
   *
   */ }
  .count--smash .count__value {
    padding: 0; }

/**
 * A counter with round corners.
 */
.count--round {
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -ms-border-radius: 2em;
  -o-border-radius: 2em;
  border-radius: 2em;
  padding: 0 .5ex; }

/**
 * A counter that is positioned to the far right of it's parent.
 *
 * 1. Used instead of float to avoid wrapping.
 * 2. As size increases,
 */
.count--right {
  position: absolute;
  /* [1] */
  right: 0px;
  top: 0px; }

/**
 * A counter that is positioned to the far right of it's parent.
 *
 * 1. Used instead of float to avoid wrapping.
 * 2. Push it towards the outside of its container.
 */
.count--outerRight {
  position: absolute;
  /* [1] */
  right: -10px;
  /* [2] */
  top: -2px; }

/**
 * DEPRECATED 11/17/14
 *
 * The flag object is a design pattern similar to the media object, however it
 * utilises `display: table[-cell];` to give us control over the vertical
 * alignments of the text and image. csswizardry.com/2013/05/the-flag-object
 *
 * 1. Allows us to control vertical alignments
 * 2. Force the object to be the full width of its parent. Combined with [1],
 *    this makes the object behave in a quasi-`display: block;` manner.
 */
.flag {
  display: table;
  /* [1] */
  width: 100%;
  /* [2] */ }

/**
 * Items within a flag object. There should only ever be one of each.
 *
 * 1. Default to aligning content to their middles.
 */
.flag__img,
.flag__body {
  display: table-cell;
  vertical-align: middle;
  /* [1] */ }

/**
 * Flag images have a space between them and the body of the object.
 */
.flag__img {
  padding-right: 0.85714rem; }
  .flag__img > img {
    display: block;
    max-width: none; }

/**
 * The container for the main content of the flag object.
 *
 * 1. Forces the `.flag__body` to take up all remaining space.
 */
.flag__body {
  width: 100%;
  /* [1] */ }

/**
 * Reversed flag objects have their image-content to the right, and text-content
 * to the left.
 *
 * 1. Swap the rendered direction of the object…
 * 2. …and reset it.
 * 3. Reassign margins to the correct sides.
 */
.flag--rev {
  direction: rtl;
  /* [1] */ }
  .flag--rev > .flag__img,
  .flag--rev > .flag__body {
    direction: ltr;
    /* [2] */ }
  .flag--rev > .flag__img {
    padding-right: 0;
    /* [3] */
    padding-left: 0.85714rem;
    /* [3] */ }

/**
 * Size variants.
 */
.flag--small > .flag__img {
  padding-right: 0.42857rem; }
.flag--small.flag--rev > .flag__img {
  padding-right: 0;
  padding-left: 0.42857rem; }

.flag--large > .flag__img {
  padding-right: 1.71429rem; }
.flag--large.flag--rev > .flag__img {
  padding-right: 0;
  padding-left: 1.71429rem; }

/**
 * Vertical alignment variations of the flag object. Either align image- and
 * text-content to the tops of bottoms of each other.
 */
.flag--top > .flag__img,
.flag--top > .flag__body {
  vertical-align: top; }

.flag--bottom > .flag__img,
.flag--bottom > .flag__body {
  vertical-align: bottom; }

/**
 * Flush flag objects have no space between the image- and text-content.
 */
.flag--flush > .flag__img {
  padding-right: 0;
  padding-left: 0; }

.appGlobalSideNav__item, .appInfoBox, .appToast,
.flexFlag {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
  -ms-flex-align: flex-start;
  /* [1] */
  align-items: flex-start; }

.appGlobalSideNav__itemText, .appInfoBox__content, .appToast__content,
.flexFlag__body {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1; }

.flexFlag--centered {
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center; }

.flexFlag--vertical {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

.flexRow {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex; }

.flexRow--alignCenter {
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center; }

.flexCol--1 {
  width: 8.33333%; }

.flexCol--2 {
  width: 16.66667%; }

.flexCol--3 {
  width: 25%; }

.flexCol--4 {
  width: 33.33333%; }

.flexCol--5 {
  width: 41.66667%; }

.flexCol--6 {
  width: 50%; }

.flexCol--7 {
  width: 58.33333%; }

.flexCol--8 {
  width: 66.66667%; }

.flexCol--9 {
  width: 75%; }

.flexCol--10 {
  width: 83.33333%; }

.flexCol--11 {
  width: 91.66667%; }

.flexCol--12 {
  width: 100%; }

/**
 * All inputs except radios and checkboxes, plus textarea and select elements.
 */
/**
 * Radios and checkboxes.
 */
/**
 * All form components.
 */
/**
 * 1. Remove default browser style.
 */
input,
select,
output,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* [1] */ }

input[type="radio"],
input[type="checkbox"] {
  cursor: pointer; }

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

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

.select--full {
  width: 100%; }

.select--flex {
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1; }

select,
input[type="range"] {
  cursor: pointer; }

.input--full {
  width: 100%;
  margin-left: 0; }

.input--flex {
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1; }

output {
  cursor: text; }

.output--full {
  width: 100%; }

.output--flex {
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1; }

.textarea--full {
  width: 100%;
  margin-left: 0; }

.textarea--flex {
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1; }

/**
 * 1. Padding between columns. Gets divided in half for the left and right.
 */
/* [1] */
/* [1] */
.container {
  padding-left: 5px;
  padding-right: 5px;
  *zoom: 1; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }

.container--centered {
  margin-right: auto;
  margin-left: auto; }

.container--responsive {
  max-width: 100%; }
  @media only screen and (min-width: 481px) and (max-width: 800px) {
    .container--responsive {
      max-width: 400px; } }
  @media only screen and (min-width: 801px) and (max-width: 1040px) {
    .container--responsive {
      max-width: 600px; } }
  @media only screen and (min-width: 1041px) and (max-width: 1440px) {
    .container--responsive {
      max-width: 900px; } }
  @media only screen and (min-width: 1441px) and (max-width: 1920px) {
    .container--responsive {
      max-width: 1200px; } }
  @media only screen and (min-width: 1921px) {
    .container--responsive {
      max-width: 1600px; } }

.container--fixed {
  max-width: 960px; }

.container--smash {
  margin: 0;
  padding: 0; }
  .container--smash .row {
    margin: 0;
    padding: 0; }
    .container--smash .row div[class*="col--"] {
      margin: 0;
      padding: 0; }

/**
 * 1. Columns with a comfy margin on the left and right
 */
.container--comfy {
  padding-left: 1.07143rem;
  padding-right: 1.07143rem;
  *zoom: 1;
  /* [1] */
  /* [1] */ }
  .container--comfy:before, .container--comfy:after {
    content: " ";
    display: table; }
  .container--comfy:after {
    clear: both; }
  .container--comfy .row {
    margin-left: -1.07143rem;
    margin-right: -1.07143rem;
    *zoom: 1;
    /* [1] */ }
    .container--comfy .row:before, .container--comfy .row:after {
      content: " ";
      display: table; }
    .container--comfy .row:after {
      clear: both; }
  .container--comfy .col--xs1, .container--comfy .col--sm1, .container--comfy .col--md1, .container--comfy .col--lg1, .container--comfy .col--xlg1, .container--comfy .col--xxlg1, .container--comfy .col--xs2, .container--comfy .col--sm2, .container--comfy .col--md2, .container--comfy .col--lg2, .container--comfy .col--xlg2, .container--comfy .col--xxlg2, .container--comfy .col--xs3, .container--comfy .col--sm3, .container--comfy .col--md3, .container--comfy .col--lg3, .container--comfy .col--xlg3, .container--comfy .col--xxlg3, .container--comfy .col--xs4, .container--comfy .col--sm4, .container--comfy .col--md4, .container--comfy .col--lg4, .container--comfy .col--xlg4, .container--comfy .col--xxlg4, .container--comfy .col--xs5, .container--comfy .col--sm5, .container--comfy .col--md5, .container--comfy .col--lg5, .container--comfy .col--xlg5, .container--comfy .col--xxlg5, .container--comfy .col--xs6, .container--comfy .col--sm6, .container--comfy .col--md6, .container--comfy .col--lg6, .container--comfy .col--xlg6, .container--comfy .col--xxlg6, .container--comfy .col--xs7, .container--comfy .col--sm7, .container--comfy .col--md7, .container--comfy .col--lg7, .container--comfy .col--xlg7, .container--comfy .col--xxlg7, .container--comfy .col--xs8, .container--comfy .col--sm8, .container--comfy .col--md8, .container--comfy .col--lg8, .container--comfy .col--xlg8, .container--comfy .col--xxlg8, .container--comfy .col--xs9, .container--comfy .col--sm9, .container--comfy .col--md9, .container--comfy .col--lg9, .container--comfy .col--xlg9, .container--comfy .col--xxlg9, .container--comfy .col--xs10, .container--comfy .col--sm10, .container--comfy .col--md10, .container--comfy .col--lg10, .container--comfy .col--xlg10, .container--comfy .col--xxlg10, .container--comfy .col--xs11, .container--comfy .col--sm11, .container--comfy .col--md11, .container--comfy .col--lg11, .container--comfy .col--xlg11, .container--comfy .col--xxlg11, .container--comfy .col--xs12, .container--comfy .col--sm12, .container--comfy .col--md12, .container--comfy .col--lg12, .container--comfy .col--xlg12, .container--comfy .col--xxlg12 {
    padding-left: 1.07143rem;
    padding-right: 1.07143rem; }

.row {
  margin-left: -5px;
  margin-right: -5px;
  *zoom: 1; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }

.row--comfy {
  margin-bottom: 1em; }

.row--smash {
  margin: 0;
  padding: 0; }
  .row--smash div[class*="col--"] {
    margin: 0;
    padding: 0; }

.col--xs1, .col--sm1, .col--md1, .col--lg1, .col--xlg1, .col--xxlg1, .col--xs2, .col--sm2, .col--md2, .col--lg2, .col--xlg2, .col--xxlg2, .col--xs3, .col--sm3, .col--md3, .col--lg3, .col--xlg3, .col--xxlg3, .col--xs4, .col--sm4, .col--md4, .col--lg4, .col--xlg4, .col--xxlg4, .col--xs5, .col--sm5, .col--md5, .col--lg5, .col--xlg5, .col--xxlg5, .col--xs6, .col--sm6, .col--md6, .col--lg6, .col--xlg6, .col--xxlg6, .col--xs7, .col--sm7, .col--md7, .col--lg7, .col--xlg7, .col--xxlg7, .col--xs8, .col--sm8, .col--md8, .col--lg8, .col--xlg8, .col--xxlg8, .col--xs9, .col--sm9, .col--md9, .col--lg9, .col--xlg9, .col--xxlg9, .col--xs10, .col--sm10, .col--md10, .col--lg10, .col--xlg10, .col--xxlg10, .col--xs11, .col--sm11, .col--md11, .col--lg11, .col--xlg11, .col--xxlg11, .col--xs12, .col--sm12, .col--md12, .col--lg12, .col--xlg12, .col--xxlg12 {
  position: relative;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px; }

.col--comfy {
  margin-bottom: 1em; }

.col--smash {
  margin: 0;
  padding: 0; }

.col--xs1, .col--xs2, .col--xs3, .col--xs4, .col--xs5, .col--xs6, .col--xs7, .col--xs8, .col--xs9, .col--xs10, .col--xs11, .col--xs12 {
  float: left; }

.col--xs1 {
  width: 8.33333%; }

.col--xs2 {
  width: 16.66667%; }

.col--xs3 {
  width: 25%; }

.col--xs4 {
  width: 33.33333%; }

.col--xs5 {
  width: 41.66667%; }

.col--xs6 {
  width: 50%; }

.col--xs7 {
  width: 58.33333%; }

.col--xs8 {
  width: 66.66667%; }

.col--xs9 {
  width: 75%; }

.col--xs10 {
  width: 83.33333%; }

.col--xs11 {
  width: 91.66667%; }

.col--xs12 {
  width: 100%; }

.col--xsPull0 {
  right: 0%; }

.col--xsPull1 {
  right: 8.33333%; }

.col--xsPull2 {
  right: 16.66667%; }

.col--xsPull3 {
  right: 25%; }

.col--xsPull4 {
  right: 33.33333%; }

.col--xsPull5 {
  right: 41.66667%; }

.col--xsPull6 {
  right: 50%; }

.col--xsPull7 {
  right: 58.33333%; }

.col--xsPull8 {
  right: 66.66667%; }

.col--xsPull9 {
  right: 75%; }

.col--xsPull10 {
  right: 83.33333%; }

.col--xsPull11 {
  right: 91.66667%; }

.col--xsPull12 {
  right: 100%; }

.col--xsPush0 {
  left: 0%; }

.col--xsPush1 {
  left: 8.33333%; }

.col--xsPush2 {
  left: 16.66667%; }

.col--xsPush3 {
  left: 25%; }

.col--xsPush4 {
  left: 33.33333%; }

.col--xsPush5 {
  left: 41.66667%; }

.col--xsPush6 {
  left: 50%; }

.col--xsPush7 {
  left: 58.33333%; }

.col--xsPush8 {
  left: 66.66667%; }

.col--xsPush9 {
  left: 75%; }

.col--xsPush10 {
  left: 83.33333%; }

.col--xsPush11 {
  left: 91.66667%; }

.col--xsPush12 {
  left: 100%; }

.col--xsOffset0 {
  margin-left: 0%; }

.col--xsOffset1 {
  margin-left: 8.33333%; }

.col--xsOffset2 {
  margin-left: 16.66667%; }

.col--xsOffset3 {
  margin-left: 25%; }

.col--xsOffset4 {
  margin-left: 33.33333%; }

.col--xsOffset5 {
  margin-left: 41.66667%; }

.col--xsOffset6 {
  margin-left: 50%; }

.col--xsOffset7 {
  margin-left: 58.33333%; }

.col--xsOffset8 {
  margin-left: 66.66667%; }

.col--xsOffset9 {
  margin-left: 75%; }

.col--xsOffset10 {
  margin-left: 83.33333%; }

.col--xsOffset11 {
  margin-left: 91.66667%; }

.col--xsOffset12 {
  margin-left: 100%; }

@media only screen and (min-width: 481px) {
  .col--sm1, .col--sm2, .col--sm3, .col--sm4, .col--sm5, .col--sm6, .col--sm7, .col--sm8, .col--sm9, .col--sm10, .col--sm11, .col--sm12 {
    float: left; }

  .col--sm1 {
    width: 8.33333%; }

  .col--sm2 {
    width: 16.66667%; }

  .col--sm3 {
    width: 25%; }

  .col--sm4 {
    width: 33.33333%; }

  .col--sm5 {
    width: 41.66667%; }

  .col--sm6 {
    width: 50%; }

  .col--sm7 {
    width: 58.33333%; }

  .col--sm8 {
    width: 66.66667%; }

  .col--sm9 {
    width: 75%; }

  .col--sm10 {
    width: 83.33333%; }

  .col--sm11 {
    width: 91.66667%; }

  .col--sm12 {
    width: 100%; }

  .col--smPull0 {
    right: 0%; }

  .col--smPull1 {
    right: 8.33333%; }

  .col--smPull2 {
    right: 16.66667%; }

  .col--smPull3 {
    right: 25%; }

  .col--smPull4 {
    right: 33.33333%; }

  .col--smPull5 {
    right: 41.66667%; }

  .col--smPull6 {
    right: 50%; }

  .col--smPull7 {
    right: 58.33333%; }

  .col--smPull8 {
    right: 66.66667%; }

  .col--smPull9 {
    right: 75%; }

  .col--smPull10 {
    right: 83.33333%; }

  .col--smPull11 {
    right: 91.66667%; }

  .col--smPull12 {
    right: 100%; }

  .col--smPush0 {
    left: 0%; }

  .col--smPush1 {
    left: 8.33333%; }

  .col--smPush2 {
    left: 16.66667%; }

  .col--smPush3 {
    left: 25%; }

  .col--smPush4 {
    left: 33.33333%; }

  .col--smPush5 {
    left: 41.66667%; }

  .col--smPush6 {
    left: 50%; }

  .col--smPush7 {
    left: 58.33333%; }

  .col--smPush8 {
    left: 66.66667%; }

  .col--smPush9 {
    left: 75%; }

  .col--smPush10 {
    left: 83.33333%; }

  .col--smPush11 {
    left: 91.66667%; }

  .col--smPush12 {
    left: 100%; }

  .col--smOffset0 {
    margin-left: 0%; }

  .col--smOffset1 {
    margin-left: 8.33333%; }

  .col--smOffset2 {
    margin-left: 16.66667%; }

  .col--smOffset3 {
    margin-left: 25%; }

  .col--smOffset4 {
    margin-left: 33.33333%; }

  .col--smOffset5 {
    margin-left: 41.66667%; }

  .col--smOffset6 {
    margin-left: 50%; }

  .col--smOffset7 {
    margin-left: 58.33333%; }

  .col--smOffset8 {
    margin-left: 66.66667%; }

  .col--smOffset9 {
    margin-left: 75%; }

  .col--smOffset10 {
    margin-left: 83.33333%; }

  .col--smOffset11 {
    margin-left: 91.66667%; }

  .col--smOffset12 {
    margin-left: 100%; } }
@media only screen and (min-width: 801px) {
  .col--md1, .col--md2, .col--md3, .col--md4, .col--md5, .col--md6, .col--md7, .col--md8, .col--md9, .col--md10, .col--md11, .col--md12 {
    float: left; }

  .col--md1 {
    width: 8.33333%; }

  .col--md2 {
    width: 16.66667%; }

  .col--md3 {
    width: 25%; }

  .col--md4 {
    width: 33.33333%; }

  .col--md5 {
    width: 41.66667%; }

  .col--md6 {
    width: 50%; }

  .col--md7 {
    width: 58.33333%; }

  .col--md8 {
    width: 66.66667%; }

  .col--md9 {
    width: 75%; }

  .col--md10 {
    width: 83.33333%; }

  .col--md11 {
    width: 91.66667%; }

  .col--md12 {
    width: 100%; }

  .col--mdPull0 {
    right: 0%; }

  .col--mdPull1 {
    right: 8.33333%; }

  .col--mdPull2 {
    right: 16.66667%; }

  .col--mdPull3 {
    right: 25%; }

  .col--mdPull4 {
    right: 33.33333%; }

  .col--mdPull5 {
    right: 41.66667%; }

  .col--mdPull6 {
    right: 50%; }

  .col--mdPull7 {
    right: 58.33333%; }

  .col--mdPull8 {
    right: 66.66667%; }

  .col--mdPull9 {
    right: 75%; }

  .col--mdPull10 {
    right: 83.33333%; }

  .col--mdPull11 {
    right: 91.66667%; }

  .col--mdPull12 {
    right: 100%; }

  .col--mdPush0 {
    left: 0%; }

  .col--mdPush1 {
    left: 8.33333%; }

  .col--mdPush2 {
    left: 16.66667%; }

  .col--mdPush3 {
    left: 25%; }

  .col--mdPush4 {
    left: 33.33333%; }

  .col--mdPush5 {
    left: 41.66667%; }

  .col--mdPush6 {
    left: 50%; }

  .col--mdPush7 {
    left: 58.33333%; }

  .col--mdPush8 {
    left: 66.66667%; }

  .col--mdPush9 {
    left: 75%; }

  .col--mdPush10 {
    left: 83.33333%; }

  .col--mdPush11 {
    left: 91.66667%; }

  .col--mdPush12 {
    left: 100%; }

  .col--mdOffset0 {
    margin-left: 0%; }

  .col--mdOffset1 {
    margin-left: 8.33333%; }

  .col--mdOffset2 {
    margin-left: 16.66667%; }

  .col--mdOffset3 {
    margin-left: 25%; }

  .col--mdOffset4 {
    margin-left: 33.33333%; }

  .col--mdOffset5 {
    margin-left: 41.66667%; }

  .col--mdOffset6 {
    margin-left: 50%; }

  .col--mdOffset7 {
    margin-left: 58.33333%; }

  .col--mdOffset8 {
    margin-left: 66.66667%; }

  .col--mdOffset9 {
    margin-left: 75%; }

  .col--mdOffset10 {
    margin-left: 83.33333%; }

  .col--mdOffset11 {
    margin-left: 91.66667%; }

  .col--mdOffset12 {
    margin-left: 100%; } }
@media only screen and (min-width: 1041px) {
  .col--lg1, .col--lg2, .col--lg3, .col--lg4, .col--lg5, .col--lg6, .col--lg7, .col--lg8, .col--lg9, .col--lg10, .col--lg11, .col--lg12 {
    float: left; }

  .col--lg1 {
    width: 8.33333%; }

  .col--lg2 {
    width: 16.66667%; }

  .col--lg3 {
    width: 25%; }

  .col--lg4 {
    width: 33.33333%; }

  .col--lg5 {
    width: 41.66667%; }

  .col--lg6 {
    width: 50%; }

  .col--lg7 {
    width: 58.33333%; }

  .col--lg8 {
    width: 66.66667%; }

  .col--lg9 {
    width: 75%; }

  .col--lg10 {
    width: 83.33333%; }

  .col--lg11 {
    width: 91.66667%; }

  .col--lg12 {
    width: 100%; }

  .col--lgPull0 {
    right: 0%; }

  .col--lgPull1 {
    right: 8.33333%; }

  .col--lgPull2 {
    right: 16.66667%; }

  .col--lgPull3 {
    right: 25%; }

  .col--lgPull4 {
    right: 33.33333%; }

  .col--lgPull5 {
    right: 41.66667%; }

  .col--lgPull6 {
    right: 50%; }

  .col--lgPull7 {
    right: 58.33333%; }

  .col--lgPull8 {
    right: 66.66667%; }

  .col--lgPull9 {
    right: 75%; }

  .col--lgPull10 {
    right: 83.33333%; }

  .col--lgPull11 {
    right: 91.66667%; }

  .col--lgPull12 {
    right: 100%; }

  .col--lgPush0 {
    left: 0%; }

  .col--lgPush1 {
    left: 8.33333%; }

  .col--lgPush2 {
    left: 16.66667%; }

  .col--lgPush3 {
    left: 25%; }

  .col--lgPush4 {
    left: 33.33333%; }

  .col--lgPush5 {
    left: 41.66667%; }

  .col--lgPush6 {
    left: 50%; }

  .col--lgPush7 {
    left: 58.33333%; }

  .col--lgPush8 {
    left: 66.66667%; }

  .col--lgPush9 {
    left: 75%; }

  .col--lgPush10 {
    left: 83.33333%; }

  .col--lgPush11 {
    left: 91.66667%; }

  .col--lgPush12 {
    left: 100%; }

  .col--lgOffset0 {
    margin-left: 0%; }

  .col--lgOffset1 {
    margin-left: 8.33333%; }

  .col--lgOffset2 {
    margin-left: 16.66667%; }

  .col--lgOffset3 {
    margin-left: 25%; }

  .col--lgOffset4 {
    margin-left: 33.33333%; }

  .col--lgOffset5 {
    margin-left: 41.66667%; }

  .col--lgOffset6 {
    margin-left: 50%; }

  .col--lgOffset7 {
    margin-left: 58.33333%; }

  .col--lgOffset8 {
    margin-left: 66.66667%; }

  .col--lgOffset9 {
    margin-left: 75%; }

  .col--lgOffset10 {
    margin-left: 83.33333%; }

  .col--lgOffset11 {
    margin-left: 91.66667%; }

  .col--lgOffset12 {
    margin-left: 100%; } }
@media only screen and (min-width: 1441px) {
  .col--xlg1, .col--xlg2, .col--xlg3, .col--xlg4, .col--xlg5, .col--xlg6, .col--xlg7, .col--xlg8, .col--xlg9, .col--xlg10, .col--xlg11, .col--xlg12 {
    float: left; }

  .col--xlg1 {
    width: 8.33333%; }

  .col--xlg2 {
    width: 16.66667%; }

  .col--xlg3 {
    width: 25%; }

  .col--xlg4 {
    width: 33.33333%; }

  .col--xlg5 {
    width: 41.66667%; }

  .col--xlg6 {
    width: 50%; }

  .col--xlg7 {
    width: 58.33333%; }

  .col--xlg8 {
    width: 66.66667%; }

  .col--xlg9 {
    width: 75%; }

  .col--xlg10 {
    width: 83.33333%; }

  .col--xlg11 {
    width: 91.66667%; }

  .col--xlg12 {
    width: 100%; }

  .col--xlgPull0 {
    right: 0%; }

  .col--xlgPull1 {
    right: 8.33333%; }

  .col--xlgPull2 {
    right: 16.66667%; }

  .col--xlgPull3 {
    right: 25%; }

  .col--xlgPull4 {
    right: 33.33333%; }

  .col--xlgPull5 {
    right: 41.66667%; }

  .col--xlgPull6 {
    right: 50%; }

  .col--xlgPull7 {
    right: 58.33333%; }

  .col--xlgPull8 {
    right: 66.66667%; }

  .col--xlgPull9 {
    right: 75%; }

  .col--xlgPull10 {
    right: 83.33333%; }

  .col--xlgPull11 {
    right: 91.66667%; }

  .col--xlgPull12 {
    right: 100%; }

  .col--xlgPush0 {
    left: 0%; }

  .col--xlgPush1 {
    left: 8.33333%; }

  .col--xlgPush2 {
    left: 16.66667%; }

  .col--xlgPush3 {
    left: 25%; }

  .col--xlgPush4 {
    left: 33.33333%; }

  .col--xlgPush5 {
    left: 41.66667%; }

  .col--xlgPush6 {
    left: 50%; }

  .col--xlgPush7 {
    left: 58.33333%; }

  .col--xlgPush8 {
    left: 66.66667%; }

  .col--xlgPush9 {
    left: 75%; }

  .col--xlgPush10 {
    left: 83.33333%; }

  .col--xlgPush11 {
    left: 91.66667%; }

  .col--xlgPush12 {
    left: 100%; }

  .col--xlgOffset0 {
    margin-left: 0%; }

  .col--xlgOffset1 {
    margin-left: 8.33333%; }

  .col--xlgOffset2 {
    margin-left: 16.66667%; }

  .col--xlgOffset3 {
    margin-left: 25%; }

  .col--xlgOffset4 {
    margin-left: 33.33333%; }

  .col--xlgOffset5 {
    margin-left: 41.66667%; }

  .col--xlgOffset6 {
    margin-left: 50%; }

  .col--xlgOffset7 {
    margin-left: 58.33333%; }

  .col--xlgOffset8 {
    margin-left: 66.66667%; }

  .col--xlgOffset9 {
    margin-left: 75%; }

  .col--xlgOffset10 {
    margin-left: 83.33333%; }

  .col--xlgOffset11 {
    margin-left: 91.66667%; }

  .col--xlgOffset12 {
    margin-left: 100%; } }
@media only screen and (min-width: 1921px) {
  .col--xxlg1, .col--xxlg2, .col--xxlg3, .col--xxlg4, .col--xxlg5, .col--xxlg6, .col--xxlg7, .col--xxlg8, .col--xxlg9, .col--xxlg10, .col--xxlg11, .col--xxlg12 {
    float: left; }

  .col--xxlg1 {
    width: 8.33333%; }

  .col--xxlg2 {
    width: 16.66667%; }

  .col--xxlg3 {
    width: 25%; }

  .col--xxlg4 {
    width: 33.33333%; }

  .col--xxlg5 {
    width: 41.66667%; }

  .col--xxlg6 {
    width: 50%; }

  .col--xxlg7 {
    width: 58.33333%; }

  .col--xxlg8 {
    width: 66.66667%; }

  .col--xxlg9 {
    width: 75%; }

  .col--xxlg10 {
    width: 83.33333%; }

  .col--xxlg11 {
    width: 91.66667%; }

  .col--xxlg12 {
    width: 100%; }

  .col--xxlgPull0 {
    right: 0%; }

  .col--xxlgPull1 {
    right: 8.33333%; }

  .col--xxlgPull2 {
    right: 16.66667%; }

  .col--xxlgPull3 {
    right: 25%; }

  .col--xxlgPull4 {
    right: 33.33333%; }

  .col--xxlgPull5 {
    right: 41.66667%; }

  .col--xxlgPull6 {
    right: 50%; }

  .col--xxlgPull7 {
    right: 58.33333%; }

  .col--xxlgPull8 {
    right: 66.66667%; }

  .col--xxlgPull9 {
    right: 75%; }

  .col--xxlgPull10 {
    right: 83.33333%; }

  .col--xxlgPull11 {
    right: 91.66667%; }

  .col--xxlgPull12 {
    right: 100%; }

  .col--xxlgPush0 {
    left: 0%; }

  .col--xxlgPush1 {
    left: 8.33333%; }

  .col--xxlgPush2 {
    left: 16.66667%; }

  .col--xxlgPush3 {
    left: 25%; }

  .col--xxlgPush4 {
    left: 33.33333%; }

  .col--xxlgPush5 {
    left: 41.66667%; }

  .col--xxlgPush6 {
    left: 50%; }

  .col--xxlgPush7 {
    left: 58.33333%; }

  .col--xxlgPush8 {
    left: 66.66667%; }

  .col--xxlgPush9 {
    left: 75%; }

  .col--xxlgPush10 {
    left: 83.33333%; }

  .col--xxlgPush11 {
    left: 91.66667%; }

  .col--xxlgPush12 {
    left: 100%; }

  .col--xxlgOffset0 {
    margin-left: 0%; }

  .col--xxlgOffset1 {
    margin-left: 8.33333%; }

  .col--xxlgOffset2 {
    margin-left: 16.66667%; }

  .col--xxlgOffset3 {
    margin-left: 25%; }

  .col--xxlgOffset4 {
    margin-left: 33.33333%; }

  .col--xxlgOffset5 {
    margin-left: 41.66667%; }

  .col--xxlgOffset6 {
    margin-left: 50%; }

  .col--xxlgOffset7 {
    margin-left: 58.33333%; }

  .col--xxlgOffset8 {
    margin-left: 66.66667%; }

  .col--xxlgOffset9 {
    margin-left: 75%; }

  .col--xxlgOffset10 {
    margin-left: 83.33333%; }

  .col--xxlgOffset11 {
    margin-left: 91.66667%; }

  .col--xxlgOffset12 {
    margin-left: 100%; } }
.icon {
  font-family: 'ubnt'; }

.icon--inline {
  display: inline-block;
  margin: 0 0.42857em; }

/**
 * 1. Provide a container around icon text so that it can be aligned left, right
 *    etc, as a single inline element.
 */
.iconTextContainer {
  display: inline-block;
  /* [1] */ }

/**
 * Icon with link text.
 */
/**
 * 1. Space out lists of iconTexts.
 */
.iconText {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center;
  padding-top: 0.3em;
  /* [1] */
  padding-bottom: 0.3em;
  /* [1] */ }

.iconText__icon {
  font-size: 1.5em;
  padding-right: 0.78571rem; }

.iconText--small .iconText__icon {
  font-size: 1em; }

.iconText--medium .iconText__icon {
  font-size: 1.55em; }

.iconText--large .iconText__icon {
  font-size: 2em; }

/**
 * 1. Space out condensed lists of iconTexts.
 */
.iconText--cozy {
  padding-top: 0;
  /* [1] */
  padding-bottom: 0;
  /* [1] */ }

/**
 * 1. Space out expanded lists of iconTexts.
 */
.iconText--comfy {
  padding-top: 0.6em;
  /* [1] */
  padding-bottom: 0.6em;
  /* [1] */ }

/**
 * 1. Position icon above the text.
 * 2. Reset display value.
 * 3. Center everything.
 * 4. Spacing.
 */
.iconText--stacked {
  display: inline-block;
  /* [2] */
  text-align: center;
  /* [3] */ }
  .iconText--stacked .iconText__icon {
    display: block;
    /* [1] */
    padding-right: 0;
    /* [4] */ }
  .iconText--stacked .iconText__text {
    padding-top: 5px;
    /* [4] */
    display: block;
    /* [1] */
    width: auto;
    /* [3] */ }

/**
 * Apply this to a div to size the element to fit the image, and then display
 * a retina image on retina displays.
 */
/**
 * Remove the bullet-points and any indents from lists.
 *
 * @extend this class when creating a list-based component if you want to
 * get rid of the bullets.
 */
.list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .list li,
  .list .list__item,
  .list .appOrgSwitcher__item {
    margin: 0.5em 0;
    padding: 0; }

.list--inline {
  *zoom: 1; }
  .list--inline:before, .list--inline:after {
    content: " ";
    display: table; }
  .list--inline:after {
    clear: both; }
  .list--inline li,
  .list--inline .list__item,
  .list--inline .appOrgSwitcher__item {
    float: left;
    margin: 0 1.5em; }
  .list--inline.list--comfy li,
  .list--inline.list--comfy .list__item,
  .list--inline.list--comfy .appOrgSwitcher__item {
    margin: 0 2em; }
  .list--inline.list--cozy li,
  .list--inline.list--cozy .list__item,
  .list--inline.list--cozy .appOrgSwitcher__item {
    margin: 0 1em; }

.list--comfy li,
.list--comfy .list__item,
.list--comfy .appOrgSwitcher__item {
  margin: 1em 0; }

.list--cozy li,
.list--cozy .list__item,
.list--cozy .appOrgSwitcher__item {
  margin: 0.25em 0; }

.list--smash li,
.list--smash .list__item,
.list--smash .appOrgSwitcher__item {
  margin: 0; }

/**
 * Blackout is for darkening the main UI while presenting
 * a modal or other takeover UI component.
 *
 * 1. Display higher than other elements.
 * 2. 50% opacity black background.
 */
.blackout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* [1] */
  background-color: rgba(0, 0, 0, 0.5);
  /* [2] */ }

/**
 * 1. Use flexbox positioning to center the modal.
 */
.blackout,
.blackout__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  /* [1] */
  /* [1] */ }

/**
 * In case you need to nest a few container elements inside the blackout.
 */
.blackout__inner {
  width: 100%;
  height: 100%; }

/**
 * DEPRECATED 11/18/14
 */
.blackout--absolute {
  position: absolute; }

/**
 * Modal Object.
 *
 * 1. Provides for positioning of modal__close.
 * 2. Hide modal on page-load.
 * 3. Display higher than other elements.
 * 4. Make modal narrow by default.
 */
.modal,
.modal--narrow {
  position: relative;
  /* [1] */
  overflow: hidden;
  /* [2] */
  z-index: 120;
  /* [3] */
  width: calc(100% - 1rem);
  /* [4] */
  max-width: 57.14286rem;
  /* [4] */ }

.modal__header {
  /**
   * DEPRECATED 11/11/14
   */ }
  .modal__header h1, .modal__header h2, .modal__header h3, .modal__header h4, .modal__header h5, .modal__header h6 {
    margin-bottom: 0; }

/**
 * Modal close button
 *
 * 1. Position button at top right of modal.
 */
.modal__close {
  position: absolute;
  /* [1] */
  cursor: pointer; }

/**
 * DEPRECATED
 * 11/11/14
 */
.modal--wide {
  max-width: 100rem; }

/**
 * DEPRECATED
 * 10/31/14
 */
.modal--comfy .modal__header,
.modal--comfy .modal__content {
  padding: 1.71429rem 2.57143rem; }

/**
 * Set the global `box-sizing` state to `border-box`.
 */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/**
 * If we have included this file, set a variable to tell the rest of the
 * framework that global `box-sizing: border-box` has been set.
 */
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/**
 * 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.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

script {
  display: none !important; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after 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; }

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

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

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

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

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

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

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

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

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap; }

/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
 * 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.
 */
img {
  border: 0; }

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

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
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.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

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

/**
 * 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 Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
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: default; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

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

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

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

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

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

/**
 * 1. Hide arrow in IE10.
 */
select::-ms-expand {
  display: none;
  /* [1] */ }

html,
body {
  font-size: 14px; }

/**
 * As well as using normalize.css, it is often advantageous to remove all
 * margins from certain elements.
 */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr {
  margin: 0;
  padding: 0; }

a {
  text-decoration: none;
  color: inherit; }

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title],
dfn[title] {
  cursor: help; }

/**
 * Remove underlines from potentially troublesome elements.
 */
u,
ins {
  text-decoration: none; }

/**
 * Apply faux underlines to inserted text via `border-bottom`.
 */
ins {
  border-bottom: 1px solid; }

/**
 * Always use high-quality bicubic interpolation mode.
 */
img {
  -ms-interpolation-mode: bicubic; }
  a > img {
    border: none; }

/**
 * Address, make non italic and remove bottom margin
 */
address {
  font-style: normal;
  margin-bottom: 0; }

.statusBall {
  width: 0.875em;
  height: 0.875em;
  font-size: inherit;
  display: inline-block;
  border-radius: 100%;
  vertical-align: bottom; }

.statusBar {
  overflow: hidden; }

/**
 * Tables with scrollable content.
 */
.table--scrollable {
  position: relative;
  /**
   * 1. The scroll bar creates some extra padding on the right side of the
   *    header. Add a border to the last th to clearly separate the th from this
   *    extra space.
   */
  /**
  * Scrollable styles
  *
  * NOTE: The cells must have their 'width' attribute set since we are making
  * our sections use display: block.
  *
  * NOTE: The table body will need to have an explicit pixel height set. Tall,
  # medium, and short defaults are available.
  */
  /**
  * Table Header
  *
  * 1. Position it at the top.
  * 2. Give it a full width.
  * 3. Give it an explicit height.
  * 4. Reduce the width of the header to match the reduced width of the tbody
  *    caused by the presence of a scrollbar. This ensures the header cells
  *    align with the row cells.
  */
  /**
   * 1. Give it a full width.
   * 2. Reset the display back to table.
   */
  /**
  * Table Body
  *
  * NOTE: The table body will need to have an explicit pixel height set.
  *
  * 1. Add vertical scrolling. Make sure scrollbar is always visible with scroll
  *    instead of auto, because of the width adjustment we've made to the thead,
  *    which is unconditional.
  */
  /**
  * Table Body
  *
  * NOTE: The table body will need to have an explicit pixel height set.
  *
  * 1. Give it a margin top to push it under the absolutely positioned header.
  */
  /**
   * 1. Give it a full width.
   * 3. Reset the display back to table.
   */ }
  .table--scrollable .th:last-child,
  .table--scrollable th:last-child {
    border-right-width: 1px;
    /* [1] */
    border-right-style: solid;
    /* [1] */ }
  .table--scrollable .thead,
  .table--scrollable thead {
    position: absolute;
    /* [1] */
    display: block;
    left: 0;
    /* [2] */
    right: 0;
    /* [2] */
    height: 3.07143rem;
    /* [3] */
    padding-right: 15px;
    /* [4] */ }
  .table--scrollable .thead .tr,
  .table--scrollable thead tr {
    width: 100%;
    /* [1] */
    display: table;
    /* [2] */ }
  .table--scrollable .tbody,
  .table--scrollable tbody {
    display: block;
    overflow-y: scroll;
    /* [1] */ }
  .table--scrollable .thead + .tbody,
  .table--scrollable thead + tbody {
    margin-top: 3.07143rem;
    /* [1] */ }
  .table--scrollable .tbody .tr,
  .table--scrollable tbody tr {
    width: 100%;
    /* [1] */
    display: table;
    /* [2] */ }

/**
 * Note that these classes must be nested within a .table--scrollable to
 * take effect.
 */
/**
 * Tables with a short height, and scrollable content.
 */
.tbody--short {
  height: 13.71429rem; }

/**
 * Tables with a medium height, and scrollable content.
 */
.tbody--medium {
  height: 34.28571rem; }

/**
 * Tables with a tall height, and scrollable content.
 */
.tbody--tall {
  height: 61.71429rem; }

/**
 * 1. Allow table styles to be applied to non-table elements.
 */
table,
.table {
  display: table;
  /* [1] */
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }

.thead,
thead {
  display: table-header-group;
  /* [1] */ }

.th,
.td,
th,
td {
  display: table-cell;
  /* [1] */
  vertical-align: middle; }

.tbody {
  display: table-row-group;
  /* [1] */ }

.tr {
  display: table-row;
  /* [1] */ }

/**
 * A simple way to force tables to have equal-width columns. Use in conjunction
 * with colspans adding up to 24, as per: csswizardry.com/2013/11/taming-data-tables
 *
 * THIS MODIFIER IS DEPRECATED.
 */
.table--grid {
  table-layout: fixed !important; }

/**
 * Add borders around a table.
 *
 * THIS MODIFIER IS DEPRECATED.
 */
.table--solid .th,
.table--solid .td,
.table--solid th,
.table--solid td {
  border: 1px solid !important; }

/**
 * Add borders only to table’s rows.
 *
 * THIS MODIFIER IS DEPRECATED.
 */
.table--solidRows,
.table--solidRows .th,
.table--solidRows .td,
.table--solidRows th,
.table--solidRows td {
  border-width: 0 !important;
  border-style: solid !important; }
.table--solidRows .tbody .td,
.table--solidRows tbody td {
  border-bottom-width: 1px !important; }
.table--solidRows .tr:last-child .td
tr:last-child td {
  border-bottom-width: 0px !important; }

/**
 * Add borders only to table’s columns.
 *
 * THIS MODIFIER IS DEPRECATED.
 */
.table--solidColumns {
  border-left-width: 1px !important; }
  .table--solidColumns,
  .table--solidColumns .th,
  .table--solidColumns .td,
  .table--solidColumns th,
  .table--solidColumns td {
    border-width: 0 !important;
    border-style: solid !important; }
  .table--solidColumns .th,
  .table--solidColumns .td,
  .table--solidColumns th,
  .table--solidColumns td {
    border-right-width: 1px !important; }

/**
 * Tighly packed tables.
 *
 * THIS MODIFIER IS DEPRECATED.
 */
.table--cozy .th,
.table--cozy .td,
.table--cozy th,
.table--cozy td {
  padding: 0.57143rem !important; }

/**
 * Large-padded tables.
 *
 * THIS MODIFIER IS DEPRECATED.
 */
.table--comfy .th,
.table--comfy .td,
.table--comfy th,
.table--comfy td {
  padding: 1.14286rem !important; }

/**
 * Row padding modifiers.
 *
 * NOTE: Padding adjustments for rows only. To be used with the default header height.
 *
 *
 * 1. Apply padding to just top and bottom padding to keep header and
 *    body cell text aligned.
 *
 * THESE MODIFIERS ARE DEPRECATED.
 */
.table--comfyRows .td,
.table--comfyRows td {
  padding-top: 1.14286rem !important;
  /* [1] */
  padding-bottom: 1.14286rem !important;
  /* [1] */ }

.table--cozyRows .td,
.table--cozyRows td {
  padding-top: 0.57143rem !important;
  /* [1] */
  padding-bottom: 0.57143rem !important;
  /* [1] */ }

/**
 * Tabs object.
 *
 * 1. Reset of table properties
 * 2. Reset of ul properties
 * 3. Make tabs full width of parent container
 * 4. Remove space around tabs (hack to make inline-block work)
 */
.tabs {
  margin: 0;
  /* [1] */
  padding: 0;
  /* [1] */
  list-style: none;
  /* [2] */
  width: 100%;
  /* [3] */
  text-align: center;
  font-size: 0;
  /* [4] */ }

/**
 * Individual tab items.
 *
 * 1. Allow the parents text-align center to center the tabs.
 * 2. Reset font-size.
 * 3. Disabled state for item.
 * 4. This is correct, but doesn't work in Chrome.
 */
.tabs__item {
  cursor: pointer;
  display: inline-block;
  /* [1] */
  width: 100px;
  font-size: 1rem;
  /* [2] */ }
  .tabs__item.is-tab-disabled {
    /* [3] */
    pointer-events: none;
    cursor: not-allowed;
    /* [4] */ }

/**
 * DEPRECATED 10/30/14
 *
 * Tabs are full width and evenly spaced.
 *
 * 1. Provides text alignment and equal spacing of tabs
 * 2. Determines equal widths of tabs
 * 3. Provides equal width of tabs via display:table and
 *    table-layout:fixed properties of parent
 */
.tabs--full {
  display: table;
  /* [1] */
  table-layout: fixed;
  /* [2] */ }
  .tabs--full .tabs__item {
    display: table-cell;
    /* [3] */ }

/**
 * DEPRECATED 10/30/14
 */
.tabs--cozy .tabs__item {
  padding: 0.57143rem; }

/**
 * DEPRECATED 10/30/14
 */
.tabs--comfy .tabs__item {
  padding: 1.14286rem; }

/**
 * 1. Fit into the enclosing block element, e.g. p or h1.
 * 2. Don't word wrap to next line because that would mess up the visual
 *    integrity of the tag.
 * 3. Don't inherit the enclosing element's font weight.
 */
.tag {
  display: inline-block;
  /* [1] */
  line-height: 1;
  /* [1] */
  white-space: nowrap;
  /* [2] */
  font-weight: normal;
  /* [3] */ }

.toggle {
  width: 100%;
  height: 1em;
  background: #bbb;
  position: relative;
  font-size: 1em; }
  .toggle:after, .toggle:before {
    width: 50%;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.5em;
    line-height: 0.5em;
    position: absolute;
    top: 50%;
    margin-top: -0.25em;
    z-index: 0;
    color: #fff; }
  .toggle:after {
    content: attr(data-off);
    right: 0; }
  .toggle:before {
    content: attr(data-on);
    left: 0; }
  .toggle label {
    width: 100%;
    height: 1em;
    display: block;
    position: absolute;
    cursor: pointer;
    left: 0;
    top: 0;
    z-index: 1; }
    .toggle label:after {
      content: "";
      display: block;
      width: 50%;
      height: 100%;
      position: absolute;
      background-color: #ddd;
      top: 0;
      left: 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease; }
  .toggle input[type="checkbox"] {
    visibility: hidden; }
    .toggle input[type="checkbox"]:checked + label:after {
      left: 50%; }

/**
 * Setting this to hidden will typically solve webkit text flicker issues
 * during transitions.
 */
.type--small {
  font-size: 78.5%; }

.type--large {
  font-size: 114%; }

.type--reverse {
  color: white; }

.uppercase {
  text-transform: uppercase !important; }

.capitalize {
  text-transform: capitalize !important; }

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

html {
  height: 100%;
  position: relative; }

body {
  height: 100%;
  background: white;
  color: black;
  line-height: 1; }

/**
 * Where `margin-bottom` is concerned,this value will be the same as the
 * base line-height. This allows us to keep a consistent vertical rhythm.
 * As per: csswizardry.com/2012/06/single-direction-margin-declarations
 */
hgroup, hr,
ul, ol, dl,
blockquote, address,
table,
fieldset, figure,
pre {
  margin-bottom: 24px; }

/*
 * DEPRECATED 11/3/14 (use @include appVerticalRhythm instead)
 * @extend this class to fit a block element into the vertical rhythm.
 */
.verticalRhythm {
  margin-bottom: 24px !important; }

.verticalRhythmTop {
  margin-top: 24px !important; }

.verticalRhythmPadding {
  padding-bottom: 24px !important; }

.verticalRhythmPaddingTop {
  padding-top: 24px !important; }

.verticalRhythmHalf {
  margin-bottom: 12px !important; }

.verticalRhythmTopHalf {
  margin-top: 12px !important; }

.verticalRhythmPaddingHalf {
  padding-bottom: 12px !important; }

.verticalRhythmPaddingTopHalf {
  padding-top: 12px !important; }

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

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

.verticalRhythmPaddingQuarter {
  padding-bottom: 6px !important; }

.verticalRhythmPaddingTopQuarter {
  padding-top: 6px !important; }

/**
 * 1. Fixes appearance when used within flexFlag--vertical, as is the case
 *    when implementing a table view.
 */
.appActionBar {
  height: 47px;
  padding: 0 24px;
  background-color: #e9eef1;
  border-bottom: 1px solid #bac8cd;
  position: relative;
  /* [1] */
  width: 100%;
  /* [1] */ }

.appActionBar__inner {
  display: table;
  width: 100%;
  height: inherit; }

.appActionBar__left,
.appActionBar__right {
  display: table-cell;
  vertical-align: middle; }

.appActionBar__right {
  text-align: right; }

.appActionBar--cozy {
  height: 32px;
  padding: 0 12px; }

.appActionBar--standalone {
  border-top: 1px solid #bac8cd; }

.appActionBar--dark {
  border-top: 1px solid #272b30;
  background-color: #191c21;
  border-bottom-color: #272b30; }

.appActionBar--detached {
  border: 1px solid #bac8cd;
  border-radius: 4px; }

/**
 * DEPRECATED 4/1/15.
 */
.appActionBar--withSideMenu {
  left: 236px; }

/**
 * DEPRECATED 4/1/15.
 */
.appActionBar--withWideSideMenu {
  left: 276px; }

/**
 * DEPRECATED 4/1/15.
 */
.appActionBar--fixed {
  position: fixed;
  top: 48px;
  left: 56px;
  right: 0;
  z-index: 10; }

/**
 * Action links surface actions performed on granular bodies of content.
 */
.appActionLinkContainer {
  position: relative; }

.appActionLinkList {
  position: absolute;
  top: 0;
  right: 0; }

.appActionLink {
  display: inline-block;
  margin-bottom: 0; }
  .appActionLink + .appActionLink {
    margin-left: 10px; }

.appActionLink--standalone {
  position: absolute;
  top: 0;
  right: 0; }

/**
 * 1. Make the size twice as large as the current font size
 * 2. The padding is just over the size of 1ex, but since we've double the size
 *    we need to compensate by making it smaller than a full ex.
 */
.appAlertIcon {
  font-size: 2em;
  /* [1] */
  padding: .75ex;
  /* [2] */
  display: inline-block;
  vertical-align: middle;
  color: #898989; }

.appAlertIcon--primary {
  color: #00a0df; }

.appAlertIcon--success {
  color: #13bb72; }

.appAlertIcon--warning {
  color: #f09300; }

.appAlertIcon--danger {
  color: #ff3516; }

.appAlertIcon--round {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px; }

.appAlertIcon--outline {
  border-width: 1px;
  border-style: solid;
  border-color: #898989; }
  .appAlertIcon--outline.appAlertIcon--primary {
    border-color: #00a0df; }
  .appAlertIcon--outline.appAlertIcon--success {
    border-color: #13bb72; }
  .appAlertIcon--outline.appAlertIcon--warning {
    border-color: #f09300; }
  .appAlertIcon--outline.appAlertIcon--danger {
    border-color: #ff3516; }

/**
 * 1. Override the color of the icon.
 */
.appAlertIcon--reverse {
  color: white;
  /* [1] */
  background-color: #898989; }
  .appAlertIcon--reverse.appAlertIcon--primary {
    background-color: #00a0df; }
  .appAlertIcon--reverse.appAlertIcon--success {
    background-color: #13bb72; }
  .appAlertIcon--reverse.appAlertIcon--warning {
    background-color: #f09300; }
  .appAlertIcon--reverse.appAlertIcon--danger {
    background-color: #ff3516; }

.is-avatar-disabled {
  background-color: #dddddd !important; }

/**
 * 1. Make border semi-transparent.
 */
/**
 * 1. Move the badge up a bit so that it visually aligns with baseline of text.
 * 2. Scale down the badge proportionate to its container so that it matches
 *    the container's cap-height.
 * 3. Make text heavier so it can be read at small size.
 * 4. Reduce line-height.
 * 5. Don't wrap to next line.
 */
.appBadge {
  display: inline-block;
  position: relative;
  /* [1] */
  top: -0.3em;
  /* [1] */
  border-style: solid;
  border-width: 1px;
  background-color: transparent;
  font-size: 0.6em;
  /* [2] */
  font-weight: 800;
  /* [3] */
  padding: 0.3em 0.6em 0.35em;
  text-transform: uppercase;
  letter-spacing: 0.07143em;
  border-radius: 0.21429rem;
  line-height: 1;
  /* [4] */
  white-space: nowrap;
  /* [5] */
  border-color: rgba(0, 0, 0, 0.5);
  /* [1] */
  color: black; }
  .appBadge + .appBadge {
    margin-left: 0.28571em; }

.appBadge--medium {
  border-color: rgba(170, 170, 170, 0.5);
  /* [1] */
  color: #aaaaaa; }

.appBadge--light {
  border-color: rgba(255, 255, 255, 0.5);
  /* [1] */
  color: white; }

.appBadge--primary {
  border-color: rgba(0, 160, 223, 0.5);
  /* [1] */
  color: #00a0df; }

.appBadge--success {
  border-color: rgba(19, 187, 114, 0.5);
  /* [1] */
  color: #13bb72; }

.appBadge--warning {
  border-color: rgba(240, 147, 0, 0.5);
  /* [1] */
  color: #f09300; }

.appBadge--danger {
  border-color: rgba(255, 53, 22, 0.5);
  /* [1] */
  color: #ff3516; }

.appControlModal__close, .appGlobalSideNavPopover__close, .appPopover__close, .appToast__close, .appViewSidePanelCloseButton,
.appCloseButton {
  cursor: pointer;
  color: #1b262c;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s; }
  .appControlModal__close:hover, .appGlobalSideNavPopover__close:hover, .appPopover__close:hover, .appToast__close:hover, .appViewSidePanelCloseButton:hover,
  .appCloseButton:hover {
    opacity: 0.5; }

.appControlModal__close, .appGlobalSideNavPopover__close, .appToast__close,
.appCloseButton--dark {
  color: white; }

/**
 * Use this mixin to create a scrollable content area inside of modals.
 * In situations where there is a sticky action bar, or other sticky UI
 * elements (either above or below the scrollable content area), be sure to
 * specify the aggregate height (in px) of those elements.
 *
 * 1. This content area will expand to occupy the entire height of the viewport,
 *    minus the height of the modal chrome and margin.
 * 2. Let the user scroll to see overflowing content.
 */
/**
 * 1. Provides for positioning of close button.
 * 2. Hide modal on page-load.
 * 3. Display higher than other elements.
 * 4. Make modal narrow by default.
 */
.appControlModal {
  position: relative;
  /* [1] */
  overflow: hidden;
  /* [2] */
  z-index: 120;
  /* [3] */
  width: calc(100% - 1rem);
  /* [4] */
  max-width: 800px;
  /* [4] */
  color: #a7acb0;
  background-color: #111111;
  border: 2px solid #080808;
  box-shadow: 0 0.71429rem 2.5rem rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  font-size: 14px; }

.appControlModal--tiny {
  max-width: 420px; }

.appControlModal--small {
  max-width: 600px; }

/**
 * 1. Position button at top right of modal.
 */
.appControlModal__close {
  position: absolute;
  cursor: pointer;
  font-size: 12px;
  top: 10px;
  right: 8px; }

.appControlModal__header {
  color: white;
  padding: 10px 12px 8px;
  font-weight: 300;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px; }

.appControlModal__content {
  padding: 10px 12px 12px; }

.appControlModalSpinnerContainer {
  height: 200px;
  font-size: 7em;
  position: relative; }
  .appControlModalSpinnerContainer .appControlModalSpinner {
    position: absolute;
    left: 50%;
    top: 50%; }

/**
 * 1. Create a default scrollable content area.
 */
.appControlModalScrollableContent {
  min-height: 100px;
  max-height: calc(100vh - 95px);
  /* [1] */
  overflow: auto;
  /* [2] */
  border-top: 1px solid #272b30;
  border-bottom: 1px solid #272b30;
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */
  /* [1] */ }
  .appControlModalScrollableContent::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .appControlModalScrollableContent::-webkit-scrollbar-thumb {
    background-color: #aaaaaa;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .appControlModalScrollableContent::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }

.appCount {
  color: white;
  font-size: 1em;
  background-color: #f09300; }

/**
 * A reassuring counter.
 */
.appCount--success {
  background-color: #13bb72; }

/**
 * A counter for alerts. Bright colors.
 */
.appCount--danger {
  background-color: #ff3516; }

/**
 * 1. Shrink to contents.
 */
.appDatepicker {
  display: inline-block;
  /* [1] */
  padding: 0.85714rem 0.35714rem 0.57143rem;
  z-index: 20;
  /* [1] */
  border: 1px solid #bfbfbf;
  /* [2] */
  background-color: white;
  /* [2] */
  color: black;
  /* [2] */
  box-shadow: 0.07143rem 0.07143rem 0.14286rem rgba(0, 0, 0, 0.25);
  /* [2]] */ }

.appDatepicker__title {
  position: relative;
  text-align: center;
  font-size: 0.92857rem;
  margin-bottom: 0.35714rem;
  font-weight: 300; }

.appDatepicker__prev,
.appDatepicker__next {
  position: absolute; }

.appDatepicker__prev {
  left: 0.42857rem; }

.appDatepicker__next {
  right: 0.42857rem; }

/**
 * 1. Separate cells.
 */
.appDatepicker__table {
  border-collapse: separate;
  /* [1] */
  border-spacing: 0.28571rem 0.42857rem;
  /* [1] */
  margin-bottom: 0;
  font-weight: 700; }
  .appDatepicker__table thead {
    font-size: 0.85714rem; }
  .appDatepicker__table th {
    font-weight: 300; }
  .appDatepicker__table tbody {
    font-size: 0.78571rem; }
  .appDatepicker__table td,
  .appDatepicker__table th {
    width: 1.28571rem;
    height: 1.28571rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid transparent; }
  .appDatepicker__table a {
    color: black; }

.appDatepickerDay--past,
.appDatepickerDay--future {
  color: #cccccc;
  font-weight: 300; }

.appDatepickerDay--selected {
  background-color: #e9f0f4; }

.appDatepickerDay--today {
  border-color: rgba(0, 0, 0, 0.2) !important; }

/**
 * Dropdown Object. Originally designed for the Select Object (selectmenu),
 * this is a simple container to toggle display mode.
 *
 * 1. Remove bullets from default list style.
 * 2. Expand to be as wide as the parent element and fit snugly inside.
 * 3. Other box elements will ignore positioning of dropdown.
 * 4. Initially be invisible.
 * 5. Wrap text when it's wider than the containing element.
 * 6. Align left by default.
 */
.appDropdown {
  display: block;
  list-style: none;
  /* [1] */
  box-sizing: content-box;
  /* [2] */
  margin-left: -1px;
  /* [2]*/
  min-width: 100%;
  /* [2] */
  position: absolute;
  /* [3] */
  visibility: hidden;
  /* [4] */
  white-space: normal;
  /* [5] */
  left: 0;
  /* [6] */
  top: 100%;
  /* [6] */
  padding: 0.42857rem 0;
  font-size: 1rem;
  z-index: 20;
  /* [1] */
  border: 1px solid #bfbfbf;
  /* [2] */
  background-color: white;
  /* [2] */
  color: black;
  /* [2] */
  box-shadow: 0.07143rem 0.07143rem 0.14286rem rgba(0, 0, 0, 0.25);
  /* [2]] */
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */ }
  .appDropdown::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .appDropdown::-webkit-scrollbar-thumb {
    background-color: #898989;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .appDropdown::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }
  .appDropdown.is-dropdown-visible {
    visibility: visible; }

/**
 * Dark color dropdown.
 */
.appDropdown--dark {
  border-color: #565f63;
  background-color: #242931;
  color: white;
  box-shadow: 0 0.07143rem 0.14286rem rgba(0, 0, 0, 0.75);
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */ }
  .appDropdown--dark::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .appDropdown--dark::-webkit-scrollbar-thumb {
    background-color: #aaaaaa;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .appDropdown--dark::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }

/**
 * Dropdown aligned to left side of its parent.
 *
 * 1. Extend wider than parent if necessary.
 */
.appDropdown--left {
  white-space: nowrap;
  /* [1] */ }

/**
 * Dropdown aligned to right side of its parent.
 *
 * 1. Extend wider than parent if necessary.
 */
.appDropdown--right {
  white-space: nowrap;
  /* [1] */
  left: auto;
  right: 0;
  margin-right: -1px; }

/**
 * Dropdown inside of an appMainButton.
 *
 * 1. Override styles inherited from parent button.
 * 2. Give a gap between button and dropdown.
 */
.appDropdown--inButton {
  text-transform: none;
  /* [1] */
  text-align: left;
  /* [1] */
  letter-spacing: 0;
  /* [1] */
  margin-top: 0.14286rem;
  /* [2] */ }

.appDropdown--nonMenu .appDropdown__item:hover {
  background-color: transparent; }

.appDropdown--scrollable {
  overflow-y: auto;
  max-height: 13.71429rem; }

.appDropdown--medium {
  max-height: 34.28571rem; }

.appDropdown--tall {
  max-height: 61.71429rem; }

/**
 * List items inside dropdown menu
 */
.appDropdown__item {
  padding: 0.57143rem 0.85714rem;
  cursor: pointer; }
  .appDropdown__item:hover {
    background-color: #f4f4f4; }
  .appDropdown--dark .appDropdown__item:hover {
    background-color: #2b3038; }

.appFeatureIcon {
  width: 5em;
  height: 5em;
  border-radius: 100%;
  background-color: #d9d9d9;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.67);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  /* [1] */ }

.appFeatureIcon__content {
  width: 85%;
  height: 85%;
  border-radius: 100%;
  background-color: #2b3038;
  color: #d9d9d9;
  font-size: 2em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  /* [1] */ }

.appContentWithFooter {
  padding-bottom: 57px;
  min-height: 100%;
  height: auto; }

.appFooter {
  margin-top: -43px;
  background: #f6f6f6;
  border-top: 1px solid #c4c4c4;
  padding: 1rem 0;
  text-align: right; }

.appFooter__item {
  margin: 0 1em; }

/**
 * 1. This shadow can look a little weird because it doens't affect the DOM
 *    flow. So it can get very close to the element that's below this input.
 *    We can't solve this with a margin-bottom or border-bottom because if the
 *    input is in an inline form then its height will get increased, and that
 *    could look weird.
 */
/**
 * 1. Make borders of direct descendents overlap.
 * 2. When a user interacts with an element, its borders should be on top of
 *    its neighbors borders.
 */
.appCompoundInput {
  display: inline-block; }
  .appCompoundInput > * + * {
    margin-left: -1px;
    /* [1] */ }
  .appCompoundInput label,
  .appCompoundInput input,
  .appCompoundInput select,
  .appCompoundInput button,
  .appCompoundInput .appIconInput {
    z-index: 1;
    /* [2] */
    position: relative;
    /* [2] */ }
    .appCompoundInput label:focus, .appCompoundInput label:hover, .appCompoundInput label:active,
    .appCompoundInput input:focus,
    .appCompoundInput input:hover,
    .appCompoundInput input:active,
    .appCompoundInput select:focus,
    .appCompoundInput select:hover,
    .appCompoundInput select:active,
    .appCompoundInput button:focus,
    .appCompoundInput button:hover,
    .appCompoundInput button:active,
    .appCompoundInput .appIconInput:focus,
    .appCompoundInput .appIconInput:hover,
    .appCompoundInput .appIconInput:active {
      z-index: 2;
      /* [2] */ }

/**
 * 1. Give same styles as %flexGroup because if we @extend it then specificity
 *    rules cause the display:flex property to be overridden.
 */
.appCompoundInput--flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
  -ms-flex-align: flex-start;
  /* [1] */
  align-items: flex-start;
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1; }

input,
select,
output,
textarea {
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  -o-transition: border-color 0.3s;
  transition: border-color 0.3s;
  background-color: white; }
  input[disabled], input[disabled]:hover, input.disabled, input.disabled:hover,
  select[disabled],
  select[disabled]:hover,
  select.disabled,
  select.disabled:hover,
  output[disabled],
  output[disabled]:hover,
  output.disabled,
  output.disabled:hover,
  textarea[disabled],
  textarea[disabled]:hover,
  textarea.disabled,
  textarea.disabled:hover {
    cursor: not-allowed;
    opacity: 0.2; }
  input:focus,
  select:focus,
  output:focus,
  textarea:focus {
    outline: none; }

/**
 * 1. Vertically align these elements in case they are being displayed inline
 *    with other elements.
 */
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local "],
input[type="email"],
input[type="file"],
input[type="image"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
output,
textarea {
  padding-top: 0.5rem;
  padding-bottom: 0.57143rem;
  padding-left: 0.57143rem;
  padding-right: 0.57143rem;
  color: black;
  border-width: 1px;
  border-style: solid;
  vertical-align: middle;
  /* [1] */
  border-color: #d7dbdd;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px; }
  input[type="color"]:hover, input[type="color"]:focus,
  input[type="date"]:hover,
  input[type="date"]:focus,
  input[type="datetime"]:hover,
  input[type="datetime"]:focus,
  input[type="datetime-local "]:hover,
  input[type="datetime-local "]:focus,
  input[type="email"]:hover,
  input[type="email"]:focus,
  input[type="file"]:hover,
  input[type="file"]:focus,
  input[type="image"]:hover,
  input[type="image"]:focus,
  input[type="month"]:hover,
  input[type="month"]:focus,
  input[type="number"]:hover,
  input[type="number"]:focus,
  input[type="password"]:hover,
  input[type="password"]:focus,
  input[type="reset"]:hover,
  input[type="reset"]:focus,
  input[type="search"]:hover,
  input[type="search"]:focus,
  input[type="tel"]:hover,
  input[type="tel"]:focus,
  input[type="text"]:hover,
  input[type="text"]:focus,
  input[type="time"]:hover,
  input[type="time"]:focus,
  input[type="url"]:hover,
  input[type="url"]:focus,
  input[type="week"]:hover,
  input[type="week"]:focus,
  output:hover,
  output:focus,
  textarea:hover,
  textarea:focus {
    border-color: black; }
  .appForm--cozy input[type="color"], .appForm--cozy
  input[type="date"], .appForm--cozy
  input[type="datetime"], .appForm--cozy
  input[type="datetime-local "], .appForm--cozy
  input[type="email"], .appForm--cozy
  input[type="file"], .appForm--cozy
  input[type="image"], .appForm--cozy
  input[type="month"], .appForm--cozy
  input[type="number"], .appForm--cozy
  input[type="password"], .appForm--cozy
  input[type="reset"], .appForm--cozy
  input[type="search"], .appForm--cozy
  input[type="tel"], .appForm--cozy
  input[type="text"], .appForm--cozy
  input[type="time"], .appForm--cozy
  input[type="url"], .appForm--cozy
  input[type="week"], .appForm--cozy
  output, .appForm--cozy
  textarea {
    padding-top: 0.21429rem;
    padding-bottom: 0.21429rem;
    padding-left: 0.42857rem;
    padding-right: 0.42857rem; }

select {
  padding-top: 0.5rem;
  padding-bottom: 0.57143rem;
  padding-left: 0.57143rem;
  padding-right: 0.57143rem;
  color: black;
  border-width: 1px;
  border-style: solid;
  vertical-align: middle;
  /* [1] */
  border-color: #d7dbdd;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px; }
  select:hover, select:focus {
    border-color: black; }
  .appForm--cozy select {
    padding-top: 0.21429rem;
    padding-bottom: 0.21429rem;
    padding-left: 0.42857rem; }

/**
 * 1. Set an explicit height to fix bugs in IE10.
 */
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="image"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="reset"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select {
  height: 2.42857rem;
  /* [1] */ }
  .appForm--cozy input[type="color"], .appForm--cozy
  input[type="date"], .appForm--cozy
  input[type="datetime"], .appForm--cozy
  input[type="datetime-local"], .appForm--cozy
  input[type="email"], .appForm--cozy
  input[type="file"], .appForm--cozy
  input[type="image"], .appForm--cozy
  input[type="month"], .appForm--cozy
  input[type="number"], .appForm--cozy
  input[type="password"], .appForm--cozy
  input[type="reset"], .appForm--cozy
  input[type="search"], .appForm--cozy
  input[type="tel"], .appForm--cozy
  input[type="text"], .appForm--cozy
  input[type="time"], .appForm--cozy
  input[type="url"], .appForm--cozy
  input[type="week"], .appForm--cozy
  select {
    height: 1.64286rem;
    /* [1] */ }

/**
 * 1. Position input to fill container.
 * 2. Hide input.
 * 3. Make it appear clickable.
 */
input[type="file"] {
  position: absolute;
  /* [1] */
  top: 0;
  /* [1] */
  left: 0;
  /* [1] */
  right: 0;
  /* [1] */
  bottom: 0;
  /* [1] */
  padding: 0 !important;
  /* [1] */
  margin: 0 !important;
  /* [1] */
  opacity: 0;
  /* [2] */
  cursor: pointer !important;
  /* [3] */ }
  input[type="file"][disabled], input[type="file"][disabled]:hover, input[type="file"].disabled, input[type="file"].disabled:hover {
    cursor: not-allowed !important;
    /* [3] */
    opacity: 0; }

.appForm--cozy {
  font-size: 11px; }

/**
 * 1. Hardcode line-height or else it gets messed up for some reason.
 * 2. Center vertically and horizontally.
 * 3. ubnt-icon--check
 */
input[type="checkbox"] {
  background-color: white;
  border: 1px solid #d7dbdd;
  width: 18px;
  height: 18px;
  line-height: 1.14286em;
  /* [1] */
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease; }
  input[type="checkbox"]:before {
    position: relative;
    /* [2] */
    top: -0.04em;
    /* [2] */
    left: 0.245em;
    /* [2] */
    font-family: 'ubnt';
    /* [3] */
    content: "\e613";
    /* [3] */
    font-size: 0.8em;
    opacity: 0;
    color: #ffffff;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease; }
  input[type="checkbox"]:checked {
    background-color: #00a0df;
    border-color: #00a0df; }
    input[type="checkbox"]:checked:before {
      opacity: 1; }
  .appForm--dark input[type="checkbox"], .appForm--dark input[type="checkbox"]:checked {
    border-color: #454d51;
    background-color: #272b30; }
  .appForm--cozy input[type="checkbox"] {
    width: 15px;
    height: 15px; }
  input[type="checkbox"] + label {
    opacity: 0.6;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease; }
  input[type="checkbox"]:checked + label {
    opacity: 1; }

/**
 * 1. Place form element inline with labels and text.
 * 2. Overcome specificity when within a dark form.
 * 3. Make dot inside a checked radio box bigger for cozy forms.
 */
input[type="radio"] {
  background-color: white;
  border: 1px solid #d7dbdd;
  width: 18px;
  height: 18px;
  vertical-align: sub;
  /* [1] */
  -webkit-box-shadow: 0 0 0 0 #00a0df inset;
  -moz-box-shadow: 0 0 0 0 #00a0df inset;
  box-shadow: 0 0 0 0 #00a0df inset;
  -webkit-border-radius: 18px;
  -moz-border-radius: 18px;
  -ms-border-radius: 18px;
  -o-border-radius: 18px;
  border-radius: 18px;
  -webkit-transition: box-shadow 0.2s linear, background-color 0.1s linear;
  -moz-transition: box-shadow 0.2s linear, background-color 0.1s linear;
  -o-transition: box-shadow 0.2s linear, background-color 0.1s linear;
  transition: box-shadow 0.2s linear, background-color 0.1s linear;
  /* Comes after dark form, so its styles are overridden. */ }
  .appForm--dark input[type="radio"] {
    border-color: #454d51; }
    .appForm--dark input[type="radio"]:checked {
      background-color: white; }
  input[type="radio"]:checked {
    border-color: #00a0df;
    -webkit-box-shadow: 0 0 0 5px #00a0df inset;
    -moz-box-shadow: 0 0 0 5px #00a0df inset;
    box-shadow: 0 0 0 5px #00a0df inset; }
  .appForm--cozy input[type="radio"] {
    width: 15px;
    height: 15px; }
    .appForm--cozy input[type="radio"]:checked {
      -webkit-box-shadow: 0 0 0 4px #00a0df inset;
      -moz-box-shadow: 0 0 0 4px #00a0df inset;
      box-shadow: 0 0 0 4px #00a0df inset;
      /* [3] */ }

/**
 * 1. Make clickable labels appear clickable.
 */
input[type="checkbox"] + label[for],
input[type="radio"] + label[for] {
  cursor: pointer;
  /* 1 */ }
input[type="checkbox"].disabled + label, input[type="checkbox"][disabled] + label,
input[type="radio"].disabled + label,
input[type="radio"][disabled] + label {
  opacity: 0.2;
  cursor: not-allowed; }

/**
 * Textarea elements
 *
 * 1. Limits resizable textareas from expanding beyond their container.
 */
textarea {
  max-width: 100%;
  /* [1] */ }

/**
 * Declare this before the select declaration because the padding-right style
 * needs to override the form box padding.
 *
 * 1. Don't depend on inherited line-height;
 * 2. Applies a default padding that must be overridden by padding-right.
 */
.appFormDropdown {
  cursor: pointer;
  position: relative;
  line-height: normal;
  /* [1] */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding-top: 0.5rem;
  padding-bottom: 0.57143rem;
  padding-left: 0.57143rem;
  padding-right: 0.57143rem;
  color: black;
  border-width: 1px;
  border-style: solid;
  vertical-align: middle;
  /* [1] */
  border-color: #d7dbdd;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
  /* [2] */ }
  .appFormDropdown:hover, .appFormDropdown:focus {
    border-color: black; }

/**
 * Select element specific properties.
 *
 * Declare this after the appFormDropdown declaration because the padding-right
 * style needs to override the form box padding.
 *
 * 1. Base64 SVG image for select arrow. We use background-image because we don't
 *    want to override the light background color of form box component styles.
 * 2. Position arrow at right of select element.
 * 3. Arrow size.
 * 4. Don't overlap text with arrow. Overrides default form box padding.
 */
select,
.appFormDropdown {
  display: inline-block;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNBQUFBQUEiIHBvaW50cz0iNDg0LjY4NywxMTkuMDMgMjU2LDM0Ny43MTYgMjcuMzEzLDExOS4wMyA0LjY4NywxNDEuNjU3IDIzMy4zNzMsMzcwLjM0MyAyNTYsMzkyLjk3IA0KCTI3OC42MjcsMzcwLjM0MyA1MDcuMzEzLDE0MS42NTcgIi8+DQo8L3N2Zz4NCg==");
  /* [1] */
  background-repeat: no-repeat;
  text-indent: 0.01px;
  /* [1] */
  text-overflow: '';
  /* [1] */
  background-position: right 0.71429em top 0.57143em;
  /* [2] */
  background-size: 1.07143em;
  /* [3] */
  padding-right: 2.71429em;
  /* [4] */ }

/**
 * Change background SVG image select arrow for firefox.
 * Unfortunately, firefox doesn't allow its default arrow styling to be altered.
 *
 * 1. Apply CSS to FF only (https://developer.mozilla.org/en-US/docs/Web/CSS/@document).
 * 2. Just use the FF arrow for now.
 */
@-moz-document url-prefix() {
  /* [1] */
  select {
    background: none;
    /* [2] */ } }

/**
 * Output element
 */
output {
  display: inline-block;
  line-height: normal; }

/**
 * Input range specific properties.
 * First, let's define a few settings and reset some properties.
 */
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  padding: 0;
  background: none; }

/**
 * Input range track styling.
 *
 * 1. Unfortunately, we need to duplicate these properties
 *    for each pseudo element. Only Chrome, FF, IE10+
 *    supported.
 */
input[type="range"]::-webkit-slider-runnable-track {
  /* [1] */
  background-color: #e8e8e8;
  height: 6px;
  border-radius: 3px; }

input[type="range"]::-moz-range-track {
  background-color: #e8e8e8;
  height: 6px;
  border-radius: 3px; }

/**
 * 1. Hides tick marks.
 * 2. Reset defaults.
 */
input[type="range"]::-ms-track {
  color: transparent;
  /* [1] */
  border: none;
  /* [2] */
  background: none;
  /* [2] */
  height: 6px; }

/**
 * Track styles for left of thumb.
 */
input[type="range"]::-ms-fill-lower {
  background-color: #e8e8e8;
  border-radius: 3px; }

/**
 * Track styles for right of thumb.
 */
input[type="range"]::-ms-fill-upper {
  background-color: #e8e8e8;
  border-radius: 3px; }

/**
 * IE range tooltip.
 *
 * 1. Hide for now.
 */
input[type="range"]::-ms-tooltip {
  display: none;
  /* [1] */ }

/**
 * Input range thumb styles
 *
 * 1. Vertically center thumb with track.
 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 100%;
  background-color: #898989;
  height: 18px;
  width: 18px;
  margin-top: -6px;
  /* [1] */ }

input[type="range"]:active::-webkit-slider-thumb {
  outline: none; }

/**
 * 1. Reset default styles.
 */
input[type="range"]::-moz-range-thumb {
  border-radius: 100%;
  height: 18px;
  width: 18px;
  border: none;
  /* [1] */
  background: none;
  /* [1] */
  background-color: #898989; }

input[type="range"]::-moz-range-thumb {
  outline: none; }

/**
 * 1. Reset default styles.
 */
input[type="range"]::-ms-thumb {
  border-radius: 100%;
  background-color: #898989;
  height: 18px;
  width: 18px;
  border: none;
  /* [1] */ }

input[type="range"]:active::-ms-thumb {
  border: none; }

/**
 * 1. In aligned forms, the range input needs to be vertically aligned with the
 *    label.
 */
.appInputRange--aligned {
  margin-top: 4px;
  /* [1] */ }

/**
 * 1. Color labels.
 * 2. Override default font color for dark form elements.
 * 3. Explicitly set text color for select options. Windows Chrome 35
 *    uses the custom set text color of the select on a white background
 *    which decreases readability on for light text colors.
 * 4. Explicitly set the select menu dropdown background color so it
 *    behaves consistently across all browsers.
 */
.appForm--dark {
  color: #a7acb0;
  /* [1] */
  /**
   * Input range specific properties.
   * First, let's define a few settings and reset some properties.
   */ }
  .appForm--dark input[type="color"],
  .appForm--dark input[type="date"],
  .appForm--dark input[type="datetime"],
  .appForm--dark input[type="datetime-local "],
  .appForm--dark input[type="email"],
  .appForm--dark input[type="file"],
  .appForm--dark input[type="image"],
  .appForm--dark input[type="month"],
  .appForm--dark input[type="number"],
  .appForm--dark input[type="password"],
  .appForm--dark input[type="reset"],
  .appForm--dark input[type="search"],
  .appForm--dark input[type="tel"],
  .appForm--dark input[type="text"],
  .appForm--dark input[type="time"],
  .appForm--dark input[type="url"],
  .appForm--dark input[type="week"],
  .appForm--dark output,
  .appForm--dark textarea {
    color: #a7acb0;
    border-color: #454d51;
    background-color: #272b30; }
    .appForm--dark input[type="color"]:hover, .appForm--dark input[type="color"]:focus,
    .appForm--dark input[type="date"]:hover,
    .appForm--dark input[type="date"]:focus,
    .appForm--dark input[type="datetime"]:hover,
    .appForm--dark input[type="datetime"]:focus,
    .appForm--dark input[type="datetime-local "]:hover,
    .appForm--dark input[type="datetime-local "]:focus,
    .appForm--dark input[type="email"]:hover,
    .appForm--dark input[type="email"]:focus,
    .appForm--dark input[type="file"]:hover,
    .appForm--dark input[type="file"]:focus,
    .appForm--dark input[type="image"]:hover,
    .appForm--dark input[type="image"]:focus,
    .appForm--dark input[type="month"]:hover,
    .appForm--dark input[type="month"]:focus,
    .appForm--dark input[type="number"]:hover,
    .appForm--dark input[type="number"]:focus,
    .appForm--dark input[type="password"]:hover,
    .appForm--dark input[type="password"]:focus,
    .appForm--dark input[type="reset"]:hover,
    .appForm--dark input[type="reset"]:focus,
    .appForm--dark input[type="search"]:hover,
    .appForm--dark input[type="search"]:focus,
    .appForm--dark input[type="tel"]:hover,
    .appForm--dark input[type="tel"]:focus,
    .appForm--dark input[type="text"]:hover,
    .appForm--dark input[type="text"]:focus,
    .appForm--dark input[type="time"]:hover,
    .appForm--dark input[type="time"]:focus,
    .appForm--dark input[type="url"]:hover,
    .appForm--dark input[type="url"]:focus,
    .appForm--dark input[type="week"]:hover,
    .appForm--dark input[type="week"]:focus,
    .appForm--dark output:hover,
    .appForm--dark output:focus,
    .appForm--dark textarea:hover,
    .appForm--dark textarea:focus {
      border-color: #929698; }
  .appForm--dark select,
  .appForm--dark .appFormDropdown {
    color: #a7acb0;
    border-color: #454d51;
    background-color: #272b30; }
    .appForm--dark select:hover, .appForm--dark select:focus,
    .appForm--dark .appFormDropdown:hover,
    .appForm--dark .appFormDropdown:focus {
      border-color: #929698; }
  .appForm--dark option {
    color: black;
    /* 3 */
    background-color: #f0f0f0;
    /* 4 */ }
  .appForm--dark label {
    color: #b6bac0;
    /* 2 */ }
  .appForm--dark .appSubHeading--standalone {
    border-bottom-color: #272b30; }
  .appForm--dark input[type="radio"],
  .appForm--dark input[type="checkbox"] {
    background-color: #272b30; }
  .appForm--dark input[type="range"]::-webkit-slider-runnable-track {
    background-color: #535860; }
  .appForm--dark input[type="range"]::-moz-range-track {
    background-color: #535860;
    border: none; }
  .appForm--dark input[type="range"]::-ms-fill-lower {
    background-color: #535860; }
  .appForm--dark input[type="range"]::-ms-fill-upper {
    background-color: #535860; }
  .appForm--dark input[type="range"]::-webkit-slider-thumb {
    background-color: #aaaaaa;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
  .appForm--dark input[type="range"]::-moz-range-thumb {
    background-color: #aaaaaa; }
  .appForm--dark input[type="range"]::-ms-thumb {
    background-color: #aaaaaa; }

.appFormFooter {
  height: 47px;
  padding: 0 24px;
  background-color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
  -ms-flex-align: flex-start;
  /* [1] */
  align-items: flex-start;
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center; }

/**
 * 1. The left and right sides should expand to fill the container.
 */
.appFormFooter__left,
.appFormFooter__right {
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1;
  /* [1] */ }

/**
 * 1. Elements within the right side should align right.
 */
.appFormFooter__right {
  text-align: right;
  /* [1] */ }

.appFormFooter--cozy {
  height: 32px;
  padding: 0 12px; }

.appFormFooter--standalone {
  border-top: 1px solid #dddddd; }

.appFormFooter--flush {
  padding: 0; }

.appFormGroup {
  margin-bottom: 24px; }

.appFormGroup--cozy {
  margin-bottom: 1rem; }

.appFormGroup--smash {
  margin-bottom: 0; }

/**
 * Input feedback element. Expected to immediately follow an input.
 *
 * 1. Abide by z-index rules, so this element appears above an input and the
 *    dropshadow it has due to an "invalid" state.
 */
.appInputFeedback {
  position: relative;
  /* [1] */
  width: 100%;
  margin-top: 0.42857rem;
  line-height: 1.3;
  font-size: 0.85714rem;
  color: #616770; }
  .is-validation-hidden ~ .appInputFeedback, .is-validation-hidden .appInputFeedback {
    display: none; }

.appInputFeedback--success {
  color: #13bb72; }

.appInputFeedback--warning {
  color: #f09300; }

.appInputFeedback--danger {
  color: #ff3516; }

.appInputFeedback--dark {
  color: white; }

/**
 * 1. Reset styles that affect position.
 */
.appInputFeedback--simple {
  margin-top: 0;
  line-height: 1; }

/**
 * Create invalid states, specific to form box controls.
 */
input,
select,
output,
textarea {
  /**
   * 1. Show invalid state.
   */ }
  input:invalid, input.is-input-invalid,
  select:invalid,
  select.is-input-invalid,
  output:invalid,
  output.is-input-invalid,
  textarea:invalid,
  textarea.is-input-invalid {
    box-shadow: 0px 4px 0px #ff3516;
    /* [1] */
    /* [1] */ }
  input.is-input-warning,
  select.is-input-warning,
  output.is-input-warning,
  textarea.is-input-warning {
    box-shadow: 0px 4px 0px #f09300;
    /* [1] */ }
  input.is-input-success,
  select.is-input-success,
  output.is-input-success,
  textarea.is-input-success {
    box-shadow: 0px 4px 0px #13bb72;
    /* [1] */ }

/**
 * Hide descendent invalid states.
 * 1. Override invalid states to make them appear valid.
 */
.is-validation-hidden input:invalid, .is-validation-hidden input.is-input-invalid,
.is-validation-hidden select:invalid,
.is-validation-hidden select.is-input-invalid,
.is-validation-hidden output:invalid,
.is-validation-hidden output.is-input-invalid,
.is-validation-hidden textarea:invalid,
.is-validation-hidden textarea.is-input-invalid {
  box-shadow: none;
  /* [1] */ }

/**
 * Hide sibling invalid states.
 * 1. Override invalid states to make them appear valid.
 */
input.is-validation-hidden:invalid, input.is-validation-hidden.is-input-invalid,
select.is-validation-hidden:invalid,
select.is-validation-hidden.is-input-invalid,
output.is-validation-hidden:invalid,
output.is-validation-hidden.is-input-invalid,
textarea.is-validation-hidden:invalid,
textarea.is-validation-hidden.is-input-invalid {
  box-shadow: none;
  /* [1] */ }

.is-form-validation-visible {
  /**
   * Reveal hidden descendent invalid states.
   * 1. Override forced-valid states to make them appear invalid again.
   */
  /**
   * Reveal hidden sibling invalid states.
   * 1. Override forced-valid states to make them appear invalid again.
   */ }
  .is-form-validation-visible .appInputFeedback {
    display: block;
    /* [1] */ }
  .is-form-validation-visible .is-validation-hidden input:invalid, .is-form-validation-visible .is-validation-hidden input.is-input-invalid,
  .is-form-validation-visible .is-validation-hidden select:invalid,
  .is-form-validation-visible .is-validation-hidden select.is-input-invalid,
  .is-form-validation-visible .is-validation-hidden output:invalid,
  .is-form-validation-visible .is-validation-hidden output.is-input-invalid,
  .is-form-validation-visible .is-validation-hidden textarea:invalid,
  .is-form-validation-visible .is-validation-hidden textarea.is-input-invalid {
    box-shadow: 0px 4px 0px #ff3516;
    /* [1] */
    /* [1] */ }
  .is-form-validation-visible input.is-validation-hidden:invalid, .is-form-validation-visible input.is-validation-hidden.is-input-invalid,
  .is-form-validation-visible select.is-validation-hidden:invalid,
  .is-form-validation-visible select.is-validation-hidden.is-input-invalid,
  .is-form-validation-visible output.is-validation-hidden:invalid,
  .is-form-validation-visible output.is-validation-hidden.is-input-invalid,
  .is-form-validation-visible textarea.is-validation-hidden:invalid,
  .is-form-validation-visible textarea.is-validation-hidden.is-input-invalid {
    box-shadow: 0px 4px 0px #ff3516;
    /* [1] */
    /* [1] */ }

.appIconInput {
  position: relative;
  display: inline-block; }

/**
 * 1. Make sure icon is on top of input. Input gains z-index of 2 when focused
 *    so we make this z-index 3.
 * 2. Clicks on icon should pass through to the input.
 */
.appIconInput__icon {
  position: absolute;
  z-index: 3;
  /* [1] */
  top: 0.71429rem;
  color: #969ba3;
  pointer-events: none;
  /* [2] */ }
  .appForm--cozy .appIconInput__icon {
    top: 0.42857rem; }

/**
 * 1. Using an anchor with an icon should make it clickable.
 */
a.appIconInput__icon {
  pointer-events: auto;
  /* [1] */ }

.appIconInput--full {
  display: block; }

.appForm--cozy .appIconInput--right,
.appIconInput--right {
  /**
   * 1. Prevent input text from overlapping with icon.
   */
  /**
   * 1. Prevent select arrow from overlapping with icon.
   */ }
  .appForm--cozy .appIconInput--right .appIconInput__icon,
  .appIconInput--right .appIconInput__icon {
    right: 0.57143em; }
  .appForm--cozy .appIconInput--right .appIconInput__input,
  .appIconInput--right .appIconInput__input {
    padding-right: 1.42857em;
    /* [1] */ }
  .appForm--cozy .appIconInput--right.appIconInput--comfy .appIconInput__input,
  .appIconInput--right.appIconInput--comfy .appIconInput__input {
    padding-right: 1.92857em;
    /* [1] */ }
  .appForm--cozy .appIconInput--right.appIconInput--select .appIconInput__input,
  .appIconInput--right.appIconInput--select .appIconInput__input {
    padding-right: 4.28571em;
    /* [1] */ }
  .appForm--cozy .appIconInput--right.appIconInput--select .appIconInput__icon,
  .appIconInput--right.appIconInput--select .appIconInput__icon {
    right: 2.28571em;
    /* [1] */ }

.appForm--cozy .appIconInput--left,
.appIconInput--left {
  /**
   * 1. Prevent input text from overlapping with icon.
   */ }
  .appForm--cozy .appIconInput--left .appIconInput__icon,
  .appIconInput--left .appIconInput__icon {
    left: 0.57143em; }
  .appForm--cozy .appIconInput--left .appIconInput__input,
  .appIconInput--left .appIconInput__input {
    padding-left: 1.42857em;
    /* [1] */ }
  .appForm--cozy .appIconInput--left.appIconInput--comfy .appIconInput__input,
  .appIconInput--left.appIconInput--comfy .appIconInput__input {
    padding-left: 1.92857em;
    /* [1] */ }

/**
 * 1. Used to position input[type="file"] for file upload components.
 */
.appInputGroup {
  position: relative;
  /* [1] */ }
  .appInputGroup > *:not(:first-child) {
    margin-left: 0.5rem; }
  .appInputGroup > * {
    margin-bottom: 0; }

.appInputGroup--flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-align-items: flex-start;
  -ms-align-items: flex-start;
  -ms-flex-align: flex-start;
  /* [1] */
  align-items: flex-start; }

.appInputGroup--cram {
  margin-bottom: 0.14286rem; }

.appInputGroup--cozy {
  margin-bottom: 0.35714rem; }

/**
 * 1. Push away from the input above.
 */
.appInputHelp {
  margin-top: 0.42857rem;
  /* [1] */
  font-size: 0.85714rem;
  line-height: 1.14286rem;
  color: #969ba3; }

.appInputList li {
  margin-left: 0;
  margin-right: 16px; }

/**
 * 1. Align with label's baseline.
 * 2. Style as "optional" by default.
 */
.appInputNote {
  display: inline-block;
  float: right;
  font-size: .75rem;
  font-weight: normal;
  text-align: right;
  text-transform: uppercase;
  margin-top: 0.14286rem;
  /* [1] */
  color: #969ba3;
  /* [2] */ }
  .appForm--cozy .appInputNote {
    margin-top: 0.28571rem; }

.appInputNote--cozy {
  float: none;
  margin-left: 0.35714rem; }

.appInputNote--aligned,
.appInputNote--alignedRadio {
  display: block;
  float: none;
  text-align: left; }

/**
 * 1. Align with baseline of inputs and selects in aligned form.
 */
.appInputNote--aligned {
  margin-top: 0.92857rem; }

/**
 * 1. Align with baseline of radio buttons and checkboxes in aligned form.
 */
.appInputNote--alignedRadio {
  margin-top: 0.35714rem;
  /* [1] */ }

.appInputNote--primary {
  color: #00a0df; }

.appInputNote--success {
  color: #13bb72; }

.appInputNote--danger {
  color: #ff3516; }

.appInputNote--secondary {
  text-transform: none; }

/**
 * Label element
 *
 * 1. Apply a bottom margin.
 * 2. Give the same line-height as paragraphs.
 */
label {
  display: inline-block;
  /* [1] */
  margin-bottom: 5px;
  /* [1] */
  line-height: 1.28571rem;
  /* [2] */
  /**
   * 1. Put some space between a label and a tooltip.
   */ }
  label[disabled], label[disabled]:hover, label.disabled, label.disabled:hover {
    cursor: not-allowed; }
  label.is-label-disabled {
    opacity: 0.2;
    cursor: not-allowed; }
  label + .appTooltipContainer {
    margin-left: 0.5rem;
    /* [1] */ }

.appLabel--primary {
  font-weight: 700; }

.appForm--dark .appLabel--primary {
  color: #969BA3; }

/**
 * 1. Vertically align with box inputs in an aligned form.
 */
.appLabel--boxAlign {
  position: relative;
  top: 0.57143rem;
  /* [1] */
  /**
   * 1. Line up the label and tooltip.
   */ }
  .appLabel--boxAlign + .appTooltipContainer {
    position: relative;
    top: 0.57143rem;
    /* [1] */ }
  .appForm--cozy .appLabel--boxAlign {
    top: 0.21429rem;
    /* [1] */ }
    .appForm--cozy .appLabel--boxAlign + .appTooltipContainer {
      position: relative;
      top: 0.21429rem;
      /* [1] */ }

/**
 * 1. Vertically align with toggle inputs in an aligned form.
 */
.appLabel--toggleAlign {
  position: relative;
  top: 0.14286rem;
  /* [1] */
  /**
   * 1. Line up the label and tooltip.
   */ }
  .appLabel--toggleAlign + .appTooltipContainer {
    position: relative;
    top: 0.14286rem;
    /* [1] */ }
  .appForm--cozy .appLabel--toggleAlign {
    top: 0.21429rem;
    /* [1] */ }
    .appForm--cozy .appLabel--toggleAlign + .appTooltipContainer {
      position: relative;
      top: 0.21429rem;
      /* [1] */ }

/**
 * 1. Vertically align with box inputs in an inline form.
 */
.appLabel--boxInline {
  position: relative;
  top: 0.07143rem; }

/**
 * 1. Needs a width or else it will collapse.
 */
.appLabel--blank {
  display: inline-block;
  width: 1px;
  /* [1] */
  height: 1.07143rem; }

.appToggle {
  width: 66px;
  font-size: 22px;
  border-radius: 3px;
  border: 1px solid #d7dbdd;
  background-color: white;
  box-sizing: content-box;
  height: 1.64286rem;
  /**
   * 1. Offset border width.
   * 2. Undo "unchecked" transparent style for checkboxes.
   */
  /**
   * 1. Have same height as cozy input and cozy button.
   */ }
  .appToggle:after, .appToggle:before {
    color: black; }
  .appToggle label {
    height: 100%;
    opacity: 1 !important;
    /* 2 */ }
    .appToggle label:after {
      border: 1px solid #d7dbdd;
      background-color: #d7dbdd;
      border-radius: 2px;
      box-sizing: content-box;
      margin-left: -1px;
      /* [1] */
      margin-top: -1px;
      /* [1] */ }
  .appToggle input[type="checkbox"]:checked + label:after {
    background-color: #13bb72;
    border-color: #13bb72; }
  .appToggle.is-toggle-disabled {
    opacity: 0.2; }
    .appToggle.is-toggle-disabled label {
      cursor: not-allowed; }
  .appForm--cozy .appToggle {
    width: 60px;
    height: 21px;
    /* [1] */
    font-size: 20px; }

.appToggle--dark {
  border-color: #535860;
  background-color: #272b30; }
  .appToggle--dark:after, .appToggle--dark:before {
    color: #a7acb0; }
  .appToggle--dark label:after {
    border-color: #535860;
    background-color: #535860; }

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

/**
 * 1. It was a bit diffcult to match the countour shapes of this graphic in pure css.
 *    Using a base64 svg data URI here to get around those limitations.
 *    This will also render nicely on retina and non-retina displays.
 */
/**
 * 1. Position layer.
 * 2. Fixed position.
 * 3. Anchored at top.
 * 4. 100% width.
 */
.appGlobalHeader {
  background-color: #00a0df;
  z-index: 50;
  /* [1] */
  position: fixed;
  /* [2] */
  top: 0;
  /* [3] */
  left: 0;
  /* [4] */
  right: 0;
  /* [4] */
  height: 48px;
  line-height: 44px;
  color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex; }

/*
 * 1. Height can't extend beyond header height.
 * 2. Crop off the icon, so that its hit area doesn't extend below the header.
 */
.appGlobalHeader__logo {
  display: inline-block;
  vertical-align: middle;
  height: inherit;
  /* 1 */
  text-align: center;
  padding-left: 1.71429rem;
  overflow: hidden;
  /* 2 */ }
  .appGlobalHeader__logo .icon {
    color: white; }

.appGlobalHeader__version {
  display: inline-block;
  margin-left: 20px;
  font-size: 8px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase; }

.appGlobalHeader__versionItem {
  display: inline-block; }
  .appGlobalHeader__versionItem + .appGlobalHeader__versionItem {
    margin-left: 10px; }

/**
 * 1. Height can't extend beyond header height.
 */
.appGlobalHeader__content {
  height: inherit;
  /* [1] */ }

/**
  * 1. Making sure left content does not get pushed down byt right content.
  */
.appGlobalHeader__content--left {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  /* [1] */ }

/**
 * 1. Position.
 * 2. Making sure the right content takes up the full available space.
 * 3. Flexbox is used so that items inside this div to reposition when browser is resized.
 */
.appGlobalHeader__content--right {
  text-align: right;
  /* [1] */
  padding-right: 1.71429rem;
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1;
  /* [2] */
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  /* [3] */ }

/**
 * 1. Vertically-align middle of header.
 * 2. Height can't extend beyond header height.
 * 3. This may be applied to a heading tag, so kill the bottom margin.
 */
.appGlobalHeader__item {
  display: inline-block;
  /* [1] */
  line-height: 48px;
  /* [1] */
  height: inherit;
  /* [2] */
  margin-bottom: 0;
  /* [3] */
  font-size: 0.91429rem;
  padding-left: 1.71429rem; }

.appGlobalHeader__menu {
  /**
  * 1. Vertically-align with other content in header.
  * 2. Height can't extend beyond header height.
  */ }
  .appGlobalHeader__menu .appMenu__link {
    display: inline-block;
    /* [1] */
    vertical-align: middle;
    /* [1] */
    height: inherit;
    /* [2] */
    margin-right: 0.85714rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

/**
 * Global App Switcher Object.
 *
 * 1. Unitless line-height to prevent child elements from inheriting an arbitrary
 *    value from a parent that is more likely to need overriding.
 * 2. Hacky solution for misalignment of dropdown with other dropdowns in the
 *    header.
 */
.appSwitcher {
  position: absolute;
  display: block;
  top: 51px;
  text-align: left;
  right: -14px;
  width: 320px;
  background-color: white;
  border: 1px solid #bfbfbf;
  -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  margin-top: -1px;
  /* [2] */
  padding: 0.85714rem;
  padding-left: 0.42857rem;
  padding-right: 0.42857rem; }
  .appSwitcher:after, .appSwitcher:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-color: transparent;
    border-style: outset solid solid; }
  .appSwitcher:before {
    top: -0.92857rem;
    z-index: 1;
    border-width: 0.5rem;
    border-bottom-color: white;
    right: 1.5rem; }
  .appSwitcher:after {
    top: -1.14286rem;
    z-index: 0;
    border-width: 0.57143rem;
    border-bottom-color: #bfbfbf;
    right: 1.42857rem; }
  .appSwitcher ul {
    margin-bottom: 0;
    line-height: 1;
    /* [1] */ }

/**
 * List items inside application switcher.
 *
 * 1. Apply bottom spacing to first 3 items.
 * 2. Bumped the font size for this icon a bit for a better alignment / size match for its svg shadow
 *    that is layered underneath.
 */
.appSwitcher__item {
  display: inline-block;
  width: 100px;
  text-align: center;
  line-height: 1.71429rem; }
  .appSwitcher__item:nth-child(-n+3) {
    margin-bottom: 0.85714rem;
    /* [1] */ }
  .appSwitcher__item .icon {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 1.85714rem; }
    .appSwitcher__item .icon.ubnt-icon--target {
      font-size: 2rem;
      /* [1] */ }

/**
 * 1. Layers this pseudo element underneath the `.appSwitcher__linkContent` element.
 */
.appSwitcher__link {
  position: relative;
  display: block; }
  .appSwitcher__link:after {
    position: absolute;
    content: "";
    top: 3rem;
    left: 50%;
    width: 4.85714rem;
    height: 0.71429rem;
    margin-left: -2.42857rem;
    z-index: 0;
    /* [1] */
    background-image: -webkit-gradient(radial, ellipse at center, 0, ellipse at center, 55, color-stop(0%, #262626), color-stop(30%, rgba(38, 38, 38, 0.3)), color-stop(55%, rgba(38, 38, 38, 0)));
    background-image: -webkit-radial-gradient(ellipse at center, #262626 0%, rgba(38, 38, 38, 0.3) 30%, rgba(38, 38, 38, 0) 55%);
    background-image: -moz-radial-gradient(ellipse at center, #262626 0%, rgba(38, 38, 38, 0.3) 30%, rgba(38, 38, 38, 0) 55%);
    background-image: -o-radial-gradient(ellipse at center, #262626 0%, rgba(38, 38, 38, 0.3) 30%, rgba(38, 38, 38, 0) 55%);
    background-image: radial-gradient(ellipse at center, #262626 0%, rgba(38, 38, 38, 0.3) 30%, rgba(38, 38, 38, 0) 55%); }
  .appSwitcher__link:hover .appSwitcher__itemText {
    color: #13bcff; }

/**
 * 1. Original size is retina, but is constrained to fit within its container.
 * 2. It was a bit diffcult to match the gradients and beveling effects with pure css for this graphic.
 *    Using a base64 png data URI, here, to get around those limitations.
 */
.appSwitcher__linkContent {
  position: relative;
  margin: 0 auto;
  margin-bottom: 0.57143rem;
  width: 3.42857rem;
  height: 3.42857rem;
  overflow: hidden;
  z-index: 1;
  border-radius: 100%;
  background-size: 100%;
  /* [1] */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABgCAYAAAB7YK6NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUQzNzUxODM2NkNCMTFFNEFFRjBEQUIzMEY4MUU0QUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUQzNzUxODQ2NkNCMTFFNEFFRjBEQUIzMEY4MUU0QUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5RDM3NTE4MTY2Q0IxMUU0QUVGMERBQjMwRjgxRTRBRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5RDM3NTE4MjY2Q0IxMUU0QUVGMERBQjMwRjgxRTRBRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pkx3SI4AABStSURBVHja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");
  /* [2] */
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  /* [1] */
  -webkit-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
  /* [1] */
  align-items: center; }

.appSwitcher__iconShadow--billing {
  position: absolute;
  z-index: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0.78571rem;
  left: 0.92857rem;
  width: 2.67857rem;
  height: 2.82143rem;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2075.144%2078.794%22%20enable-background%3D%22new%200%200%2075.144%2078.794%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cdefs%3E%0D%0A%09%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2275.144%22%20height%3D%2278.794%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%09%3C/filter%3E%0D%0A%09%09%3C/defs%3E%0D%0A%09%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2275.144%22%20height%3D%2278.794%22%20id%3D%22SVGID_1_%22%3E%0D%0A%09%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter%29%22%3E%0D%0A%09%09%09%09%3Cg%20enable-background%3D%22new%20%20%20%20%22%3E%0D%0A%09%09%09%09%09%3Crect%20x%3D%22-30.762%22%20y%3D%22-27.092%22%20width%3D%22105.886%22%20height%3D%22105.886%22/%3E%0D%0A%09%09%09%09%09%3Cdefs%3E%0D%0A%09%09%09%09%09%09%0D%0A%09%09%09%09%09%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter_1_%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%22-30.762%22%20y%3D%22-27.092%22%20width%3D%22105.886%22%20height%3D%22105.886%22%3E%0D%0A%09%09%09%09%09%09%09%0D%0A%09%09%09%09%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%09%09%09%09%3C/filter%3E%0D%0A%09%09%09%09%09%3C/defs%3E%0D%0A%09%09%09%09%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%22-30.762%22%20y%3D%22-27.092%22%20width%3D%22105.886%22%20height%3D%22105.886%22%20id%3D%22SVGID_1_%22%3E%0D%0A%09%09%09%09%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter_1_%29%22%3E%0D%0A%09%09%09%09%09%09%09%3Cg%20enable-background%3D%22new%20%20%20%20%22%3E%0D%0A%09%09%09%09%09%09%09%09%3Cg%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cdefs%3E%0D%0A%09%09%09%09%09%09%09%09%09%09%3Crect%20id%3D%22SVGID_2_%22%20x%3D%22-31.383%22%20y%3D%22-27.506%22%20width%3D%22106.921%22%20height%3D%22106.714%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3C/defs%3E%0D%0A%09%09%09%09%09%09%09%09%09%3CclipPath%20id%3D%22SVGID_3_%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%09%3Cuse%20xlink%3Ahref%3D%22%23SVGID_2_%22%20%20overflow%3D%22visible%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3C/clipPath%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cg%20clip-path%3D%22url%28%23SVGID_3_%29%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%09%0D%0A%09%09%09%09%09%09%09%09%09%09%09%3Cimage%20overflow%3D%22visible%22%20width%3D%22517%22%20height%3D%22516%22%20xlink%3Ahref%3D%22817F8836B341728C.jpg%22%20%20transform%3D%22matrix%280.2068%200%200%200.2068%20-31.3827%20-27.5057%29%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%09%3C/image%3E%0D%0A%09%09%09%09%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%09%3C/mask%3E%0D%0A%09%09%09%09%09%3Cg%20mask%3D%22url%28%23SVGID_1_%29%22%3E%0D%0A%09%09%09%09%09%09%3Crect%20x%3D%22-30.762%22%20y%3D%22-27.092%22%20fill%3D%22%23FFFFFF%22%20width%3D%22105.886%22%20height%3D%22105.886%22/%3E%0D%0A%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%3C/g%3E%0D%0A%09%09%09%3C/g%3E%0D%0A%09%09%3C/mask%3E%0D%0A%09%09%3Cg%3E%0D%0A%09%09%09%3Cg%3E%0D%0A%09%09%09%09%3Cdefs%3E%0D%0A%09%09%09%09%09%3Crect%20id%3D%22SVGID_4_%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2275.144%22%20height%3D%2278.794%22/%3E%0D%0A%09%09%09%09%3C/defs%3E%0D%0A%09%09%09%09%3CclipPath%20id%3D%22SVGID_5_%22%3E%0D%0A%09%09%09%09%09%3Cuse%20xlink%3Ahref%3D%22%23SVGID_4_%22%20%20overflow%3D%22visible%22/%3E%0D%0A%09%09%09%09%3C/clipPath%3E%0D%0A%09%09%09%09%3Cdefs%3E%0D%0A%09%09%09%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter_2_%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2275.144%22%20height%3D%2278.794%22%3E%0D%0A%09%09%09%09%09%09%0D%0A%09%09%09%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%09%09%09%3C/filter%3E%0D%0A%09%09%09%09%3C/defs%3E%0D%0A%09%09%09%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2275.144%22%20height%3D%2278.794%22%20id%3D%22SVGID_6_%22%3E%0D%0A%09%09%09%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter_2_%29%22%3E%0D%0A%09%09%09%09%09%09%3Cg%20enable-background%3D%22new%20%20%20%20%22%3E%0D%0A%09%09%09%09%09%09%09%3Cg%3E%0D%0A%09%09%09%09%09%09%09%09%3Cdefs%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cpolygon%20id%3D%22SVGID_7_%22%20points%3D%2244.396%2C2.689%2044.396%2C2.689%2032.823%2C2.689%2031.452%2C0%2012.562%2C0%2011.259%2C2.689%200.052%2C2.689%20%0D%0A%09%09%09%09%09%09%09%09%09%090.052%2C51.702%200.023%2C51.702%200%2C51.728%2027.002%2C78.794%2075.124%2C78.794%2075.124%2C33.317%20%09%09%09%09%09%09%09%09%09%22/%3E%0D%0A%09%09%09%09%09%09%09%09%3C/defs%3E%0D%0A%09%09%09%09%09%09%09%09%3CclipPath%20id%3D%22SVGID_8_%22%20clip-path%3D%22url%28%23SVGID_5_%29%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cuse%20xlink%3Ahref%3D%22%23SVGID_7_%22%20%20overflow%3D%22visible%22/%3E%0D%0A%09%09%09%09%09%09%09%09%3C/clipPath%3E%0D%0A%09%09%09%09%09%09%09%09%0D%0A%09%09%09%09%09%09%09%09%09%3CradialGradient%20id%3D%22SVGID_9_%22%20cx%3D%22-57.9446%22%20cy%3D%22137.1985%22%20r%3D%220.5515%22%20gradientTransform%3D%22matrix%2879.2081%200%200%20-81.0383%204644.7241%2011181.2021%29%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.1322%22%20style%3D%22stop-color%3A%23FBFBFB%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.2586%22%20style%3D%22stop-color%3A%23F0F0F0%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.3827%22%20style%3D%22stop-color%3A%23DCDCDC%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.5055%22%20style%3D%22stop-color%3A%23C1C1C1%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.6273%22%20style%3D%22stop-color%3A%239E9E9E%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.7484%22%20style%3D%22stop-color%3A%23737373%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.8689%22%20style%3D%22stop-color%3A%23414141%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%220.9862%22%20style%3D%22stop-color%3A%23070707%22/%3E%0D%0A%09%09%09%09%09%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%09%09%09%09%09%3C/radialGradient%3E%0D%0A%09%09%09%09%09%09%09%09%3Crect%20x%3D%220%22%20y%3D%220%22%20clip-path%3D%22url%28%23SVGID_8_%29%22%20fill%3D%22url%28%23SVGID_9_%29%22%20width%3D%2275.124%22%20height%3D%2278.794%22/%3E%0D%0A%09%09%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%3C/mask%3E%0D%0A%09%09%09%09%3Cg%20clip-path%3D%22url%28%23SVGID_5_%29%22%20mask%3D%22url%28%23SVGID_6_%29%22%3E%0D%0A%09%09%09%09%09%3Cg%3E%0D%0A%09%09%09%09%09%09%3Cdefs%3E%0D%0A%09%09%09%09%09%09%09%3Crect%20id%3D%22SVGID_10_%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2275.144%22%20height%3D%2278.794%22/%3E%0D%0A%09%09%09%09%09%09%3C/defs%3E%0D%0A%09%09%09%09%09%09%3CclipPath%20id%3D%22SVGID_11_%22%3E%0D%0A%09%09%09%09%09%09%09%3Cuse%20xlink%3Ahref%3D%22%23SVGID_10_%22%20%20overflow%3D%22visible%22/%3E%0D%0A%09%09%09%09%09%09%3C/clipPath%3E%0D%0A%09%09%09%09%09%09%3Cpolygon%20clip-path%3D%22url%28%23SVGID_11_%29%22%20fill%3D%22%230A8CCB%22%20points%3D%2244.406%2C2.689%2044.396%2C2.689%2032.823%2C2.689%2031.452%2C0%2012.562%2C0%20%0D%0A%09%09%09%09%09%09%0911.259%2C2.689%200.052%2C2.689%200.052%2C51.702%200.023%2C51.702%200%2C51.728%2027.002%2C78.794%2075.144%2C78.794%2075.124%2C33.317%20%09%09%09%09%09%09%22/%3E%0D%0A%09%09%09%09%09%3C/g%3E%0D%0A%09%09%09%09%3C/g%3E%0D%0A%09%09%09%3C/g%3E%0D%0A%09%09%3C/g%3E%0D%0A%09%3C/g%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A");
  /* [1] */ }

.appSwitcher__iconShadow--community {
  position: absolute;
  z-index: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0.92857rem;
  left: 0.78571rem;
  width: 2.82143rem;
  height: 2.67857rem;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2078.45%2074.977%22%20enable-background%3D%22new%200%200%2078.45%2074.977%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cdefs%3E%0D%0A%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2278.45%22%20height%3D%2274.977%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%3C/filter%3E%0D%0A%09%3C/defs%3E%0D%0A%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2278.45%22%20height%3D%2274.977%22%20id%3D%22SVGID_1_%22%3E%0D%0A%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter%29%22%3E%0D%0A%09%09%09%3CradialGradient%20id%3D%22SVGID_2_%22%20cx%3D%2270.891%22%20cy%3D%2267.6904%22%20r%3D%2266.4549%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%3C/radialGradient%3E%0D%0A%09%09%09%3Cpath%20fill%3D%22url%28%23SVGID_2_%29%22%20d%3D%22M78.45%2C50.461V39.049l-27.589-27.61l-0.015%2C0.009c-0.911-0.899-2.114-1.437-3.492-1.437h-5.809%0D%0A%09%09%09%09l-8.269-8.269C32.324%2C0.672%2C30.92%2C0%2C29.388%2C0H4.946C2.166%2C0%2C0%2C2.215%2C0%2C4.995v14.552c0%2C1.384%2C0.537%2C2.721%2C1.42%2C3.538l0.005-0.006%0D%0A%09%09%09%09c0.004%2C0.004%2C0.009%2C0.003%2C0.013%2C0.007l6.938%2C6.933v5.361l0.013%2C0.004l-0.024%2C0.013l39.612%2C39.579h5.957%0D%0A%09%09%09%09C67.474%2C74.977%2C78.45%2C64.001%2C78.45%2C50.461z%22/%3E%0D%0A%09%09%3C/g%3E%0D%0A%09%3C/mask%3E%0D%0A%09%3Cpath%20mask%3D%22url%28%23SVGID_1_%29%22%20fill%3D%22%230A8CCB%22%20d%3D%22M78.45%2C50.461V39.049l-27.589-27.61l-0.015%2C0.009%0D%0A%09%09c-0.911-0.899-2.114-1.437-3.492-1.437h-5.809l-8.269-8.269C32.324%2C0.672%2C30.92%2C0%2C29.388%2C0H4.946C2.166%2C0%2C0%2C2.215%2C0%2C4.995v14.552%0D%0A%09%09c0%2C1.384%2C0.537%2C2.721%2C1.42%2C3.538l0.005-0.006c0.004%2C0.004%2C0.009%2C0.003%2C0.013%2C0.007l6.938%2C6.933v5.361l0.013%2C0.004l-0.024%2C0.013%0D%0A%09%09l39.612%2C39.579h5.957C67.474%2C74.977%2C78.45%2C64.001%2C78.45%2C50.461z%22/%3E%0D%0A%09%3Cpath%20fill%3D%22%230A8CCB%22%20d%3D%22M31.053%2C4.995v5.015h-8.141c-2.78%2C0-5.138%2C2.225-5.138%2C5.005v6.231h0.033l-6.162%2C6.135v-6.135H4.946%0D%0A%09%09c-0.954%2C0-1.677-0.748-1.677-1.7V4.995c0-0.954%2C0.723-1.726%2C1.677-1.726h24.442C30.342%2C3.269%2C31.053%2C4.041%2C31.053%2C4.995z%22/%3E%0D%0A%09%3Cpath%20fill%3D%22%230A8CCB%22%20d%3D%22M49.031%2C15.016v14.552c0%2C0.954-0.723%2C1.69-1.677%2C1.69h-6.699v6.145l-6.162-6.145H22.912%0D%0A%09%09c-0.954%2C0-1.665-0.735-1.665-1.69V15.016c0-0.954%2C0.711-1.737%2C1.665-1.737h24.442C48.308%2C13.279%2C49.031%2C14.062%2C49.031%2C15.016z%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A");
  /* [1] */ }

.appSwitcher__iconShadow--control {
  position: absolute;
  z-index: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0.78571rem;
  left: 0.82143rem;
  width: 2.67857rem;
  height: 2.67857rem;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2074.692%2075.483%22%20enable-background%3D%22new%200%200%2074.692%2075.483%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cpath%20fill%3D%22%230A8CCB%22%20d%3D%22M27.176%2C47.375c-0.775%2C0.775-1.805%2C1.201-2.901%2C1.201s-2.127-0.427-2.901-1.201%0D%0A%09%09%09c-1.598-1.6-1.598-4.203%2C0-5.803c0.775-0.775%2C1.805-1.201%2C2.901-1.201s2.127%2C0.427%2C2.901%2C1.201%0D%0A%09%09%09C28.776%2C43.172%2C28.776%2C45.774%2C27.176%2C47.375z%22/%3E%0D%0A%09%09%3Cpath%20fill%3D%22%230A8CCB%22%20d%3D%22M21.373%2C1.201C22.147%2C0.427%2C23.178%2C0%2C24.274%2C0s2.127%2C0.427%2C2.901%2C1.201c1.6%2C1.6%2C1.6%2C4.203%2C0%2C5.803%0D%0A%09%09%09c-0.775%2C0.775-1.805%2C1.201-2.901%2C1.201s-2.127-0.427-2.901-1.201C19.774%2C5.404%2C19.774%2C2.801%2C21.373%2C1.201z%22/%3E%0D%0A%09%09%3Cdefs%3E%0D%0A%09%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%2220.309%22%20y%3D%220.039%22%20width%3D%2228.215%22%20height%3D%2228.308%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%09%3C/filter%3E%0D%0A%09%09%3C/defs%3E%0D%0A%09%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2220.309%22%20y%3D%220.039%22%20width%3D%2228.215%22%20height%3D%2228.308%22%20id%3D%22SVGID_1_%22%3E%0D%0A%09%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter%29%22%3E%0D%0A%09%09%09%09%3ClinearGradient%20id%3D%22SVGID_2_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2224.4493%22%20y1%3D%224.273%22%20x2%3D%2244.4003%22%20y2%3D%2224.224%22%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%3C/linearGradient%3E%0D%0A%09%09%09%09%3Cpath%20fill%3D%22url%28%23SVGID_2_%29%22%20d%3D%22M48.523%2C20.224L28.338%2C0.039l-0.002%2C0.002c2.243%2C2.243%2C2.243%2C5.88%2C0%2C8.123%0D%0A%09%09%09%09%09c-1.122%2C1.122-2.591%2C1.682-4.061%2C1.682c-1.429%2C0-2.857-0.532-3.966-1.591L40.4%2C28.347L48.523%2C20.224z%22/%3E%0D%0A%09%09%09%3C/g%3E%0D%0A%09%09%3C/mask%3E%0D%0A%09%09%3Cpath%20mask%3D%22url%28%23SVGID_1_%29%22%20fill%3D%22%230A8CCB%22%20d%3D%22M48.523%2C20.224L28.338%2C0.039l-0.002%2C0.002c2.243%2C2.243%2C2.243%2C5.88%2C0%2C8.123%0D%0A%09%09%09c-1.122%2C1.122-2.591%2C1.682-4.061%2C1.682c-1.429%2C0-2.857-0.532-3.966-1.591L40.4%2C28.347L48.523%2C20.224z%22/%3E%0D%0A%09%09%3Cdefs%3E%0D%0A%09%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter_1_%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%2239.942%22%20y%3D%2218.878%22%20width%3D%2234.75%22%20height%3D%2242.977%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%09%3C/filter%3E%0D%0A%09%09%3C/defs%3E%0D%0A%09%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2239.942%22%20y%3D%2218.878%22%20width%3D%2234.75%22%20height%3D%2242.977%22%20id%3D%22SVGID_3_%22%3E%0D%0A%09%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter_1_%29%22%3E%0D%0A%09%09%09%09%3ClinearGradient%20id%3D%22SVGID_4_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2240.39%22%20y1%3D%2240.3667%22%20x2%3D%2275.4882%22%20y2%3D%2240.3667%22%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%3C/linearGradient%3E%0D%0A%09%09%09%09%3Cpath%20fill%3D%22url%28%23SVGID_4_%29%22%20d%3D%22M48.757%2C18.878c2.003%2C2.256%2C1.925%2C5.71-0.236%2C7.871c-2.243%2C2.243-5.88%2C2.243-8.123%2C0%0D%0A%09%09%09%09%09l-0.008%2C0.008l35.098%2C35.098V45.609L48.757%2C18.878z%22/%3E%0D%0A%09%09%09%3C/g%3E%0D%0A%09%09%3C/mask%3E%0D%0A%09%09%3Cpath%20mask%3D%22url%28%23SVGID_3_%29%22%20fill%3D%22%230A8CCB%22%20d%3D%22M48.359%2C18.878c2.003%2C2.256%2C2.124%2C5.71-0.037%2C7.871%0D%0A%09%09%09c-2.243%2C2.243-5.78%2C2.243-8.023%2C0l-0.356%2C0.008l34.75%2C35.098V45.609L48.359%2C18.878z%22/%3E%0D%0A%09%09%3Cdefs%3E%0D%0A%09%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter_2_%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%2220.157%22%20y%3D%2240.412%22%20width%3D%2243.259%22%20height%3D%2235.072%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%09%3C/filter%3E%0D%0A%09%09%3C/defs%3E%0D%0A%09%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2220.157%22%20y%3D%2240.412%22%20width%3D%2243.259%22%20height%3D%2235.072%22%20id%3D%22SVGID_5_%22%3E%0D%0A%09%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter_2_%29%22%3E%0D%0A%09%09%09%09%3ClinearGradient%20id%3D%22SVGID_6_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2220.2372%22%20y1%3D%2257.9565%22%20x2%3D%2263.416%22%20y2%3D%2257.9565%22%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%3C/linearGradient%3E%0D%0A%09%09%09%09%3Cpath%20fill%3D%22url%28%23SVGID_6_%29%22%20d%3D%22M28.336%2C40.412c2.243%2C2.243%2C2.243%2C5.88%2C0%2C8.123c-1.122%2C1.122-2.591%2C1.682-4.061%2C1.682%0D%0A%09%09%09%09%09c-1.46%2C0-2.919-0.539-4.037-1.645l26.919%2C26.93h16.26L28.336%2C40.412L28.336%2C40.412z%22/%3E%0D%0A%09%09%09%3C/g%3E%0D%0A%09%09%3C/mask%3E%0D%0A%09%09%3Cpath%20mask%3D%22url%28%23SVGID_5_%29%22%20fill%3D%22%230A8CCB%22%20d%3D%22M27.692%2C40.412c2%2C2.243%2C2.565%2C5.88%2C0.322%2C8.123%0D%0A%09%09%09c-1.122%2C1.122-2.431%2C1.682-3.901%2C1.682c-1.46%2C0-2.838-0.549-3.957-1.654l27%2C26.921h16.26L27.692%2C40.455V40.412z%22/%3E%0D%0A%09%09%3Cdefs%3E%0D%0A%09%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter_3_%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%2220.722%22%20width%3D%2227.841%22%20height%3D%2227.841%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%09%3C/filter%3E%0D%0A%09%09%3C/defs%3E%0D%0A%09%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%2220.722%22%20width%3D%2227.841%22%20height%3D%2227.841%22%20id%3D%22SVGID_7_%22%3E%0D%0A%09%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter_3_%29%22%3E%0D%0A%09%09%09%09%3ClinearGradient%20id%3D%22SVGID_8_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%224.6132%22%20y1%3D%2224.8672%22%20x2%3D%2224.7139%22%20y2%3D%2244.968%22%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%3C/linearGradient%3E%0D%0A%09%09%09%09%3Cpath%20fill%3D%22url%28%23SVGID_8_%29%22%20d%3D%22M8.59%2C20.722c1.791%2C2.255%2C1.645%2C5.543-0.44%2C7.628c-2.243%2C2.243-5.88%2C2.243-8.123%2C0v0L0%2C28.377%0D%0A%09%09%09%09%09l20.185%2C20.185l0.028-0.028c-2.243-2.243-2.243-5.88%2C0-8.123c1.122-1.122%2C2.592-1.682%2C4.061-1.682%0D%0A%09%09%09%09%09c1.263%2C0%2C2.525%2C0.415%2C3.566%2C1.242L8.59%2C20.722z%22/%3E%0D%0A%09%09%09%3C/g%3E%0D%0A%09%09%3C/mask%3E%0D%0A%09%09%3Cpath%20mask%3D%22url%28%23SVGID_7_%29%22%20fill%3D%22%230A8CCB%22%20d%3D%22M8.59%2C20.722c1.791%2C2.255%2C1.645%2C5.543-0.44%2C7.628c-2.243%2C2.243-5.88%2C2.243-8.123%2C0%0D%0A%09%09%09v0L0%2C28.377l20.185%2C20.185l0.028-0.028c-2.243-2.243-2.243-5.88%2C0-8.123c1.122-1.122%2C2.592-1.682%2C4.061-1.682%0D%0A%09%09%09c1.263%2C0%2C2.525%2C0.415%2C3.566%2C1.242L8.59%2C20.722z%22/%3E%0D%0A%09%3C/g%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A");
  /* [1] */ }

.appSwitcher__iconShadow--home {
  position: absolute;
  z-index: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0.78571rem;
  left: 0.85714rem;
  width: 2.89286rem;
  height: 2.78571rem;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2074.701%2078.392%22%20enable-background%3D%22new%200%200%2074.701%2078.392%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cdefs%3E%0D%0A%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%2222.084%22%20width%3D%2274.701%22%20height%3D%2256.308%22%3E%0D%0A%09%09%0D%0A%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%3C/filter%3E%0D%0A%3C/defs%3E%0D%0A%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%2222.084%22%20width%3D%2274.701%22%20height%3D%2256.308%22%20id%3D%22SVGID_1_%22%3E%0D%0A%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter%29%22%3E%0D%0A%09%09%3CradialGradient%20id%3D%22SVGID_2_%22%20cx%3D%2261.9279%22%20cy%3D%2270.9753%22%20r%3D%2267.5045%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0D%0A%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%3Cstop%20%20offset%3D%220.1141%22%20style%3D%22stop-color%3A%23E9E9E9%22/%3E%0D%0A%09%09%09%3Cstop%20%20offset%3D%220.3517%22%20style%3D%22stop-color%3A%23B1B1B1%22/%3E%0D%0A%09%09%09%3Cstop%20%20offset%3D%220.6889%22%20style%3D%22stop-color%3A%23585858%22/%3E%0D%0A%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%3C/radialGradient%3E%0D%0A%09%09%3Cpolyline%20fill%3D%22url%28%23SVGID_2_%29%22%20points%3D%220%2C50.639%2027.753%2C78.392%2074.701%2C78.392%2074.701%2C52.672%2044.114%2C22.084%20%09%09%22/%3E%0D%0A%09%3C/g%3E%0D%0A%3C/mask%3E%0D%0A%3Cpolyline%20mask%3D%22url%28%23SVGID_1_%29%22%20fill%3D%22%230A8CCB%22%20points%3D%220%2C50.639%2027.753%2C78.392%2074.701%2C78.392%2074.701%2C52.672%2044.114%2C22.084%20%22/%3E%0D%0A%3Cpath%20fill%3D%22%230A8CCB%22%20d%3D%22M22.06%2C0l-8.123%2C8.11H6.71v7.215L0%2C22.023v28.616h44.084l0.029-28.555L22.06%2C0L22.06%2C0z%22/%3E%0D%0A%3C/svg%3E%0D%0A");
  /* [1] */ }

.appSwitcher__iconShadow--market {
  position: absolute;
  z-index: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0.71429rem;
  left: 1rem;
  width: 2.39286rem;
  height: 2.64286rem;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2077.177%2085.537%22%20enable-background%3D%22new%200%200%2077.177%2085.537%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20fill%3D%22%230A8CCB%22%20d%3D%22M47.644%2C14.354l8.218-8.216l-5.812-0.325L49.724%2C0l-8.216%2C8.216l0.269%2C4.808l-1.693%2C1.695%0D%0A%09%09c-4.259-4.001-9.986-6.452-16.286-6.452C10.659%2C8.266%2C0%2C18.926%2C0%2C32.064s10.659%2C23.798%2C23.798%2C23.798s23.796-10.659%2C23.796-23.798%0D%0A%09%09c0-6.298-2.45-12.025-6.448-16.284l1.697-1.695L47.644%2C14.354z%22/%3E%0D%0A%09%3Cdefs%3E%0D%0A%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%226.927%22%20y%3D%2214.085%22%20width%3D%2270.249%22%20height%3D%2271.451%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%3C/filter%3E%0D%0A%09%3C/defs%3E%0D%0A%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%226.927%22%20y%3D%2214.085%22%20width%3D%2270.249%22%20height%3D%2271.451%22%20id%3D%22SVGID_1_%22%3E%0D%0A%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter%29%22%3E%0D%0A%09%09%09%3CradialGradient%20id%3D%22SVGID_2_%22%20cx%3D%2276.5511%22%20cy%3D%2284.7026%22%20r%3D%2274.1752%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.1132%22%20style%3D%22stop-color%3A%23FBFBFB%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.2373%22%20style%3D%22stop-color%3A%23EDEDED%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.3667%22%20style%3D%22stop-color%3A%23D7D7D7%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.4997%22%20style%3D%22stop-color%3A%23B9B9B9%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.6356%22%20style%3D%22stop-color%3A%23919191%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.7737%22%20style%3D%22stop-color%3A%23616161%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.9112%22%20style%3D%22stop-color%3A%23282828%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%3C/radialGradient%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22url%28%23SVGID_2_%29%22%20points%3D%2277.177%2C48.42%2042.842%2C14.085%206.927%2C48.844%2043.619%2C85.537%2077.177%2C85.537%20%09%09%09%22/%3E%0D%0A%09%09%3C/g%3E%0D%0A%09%3C/mask%3E%0D%0A%09%3Cpolygon%20mask%3D%22url%28%23SVGID_1_%29%22%20fill%3D%22%230A8CCB%22%20points%3D%2277.177%2C48.42%2042.842%2C14.085%206.927%2C48.844%2043.619%2C85.537%2077.177%2C85.537%20%09%22/%3E%0D%0A%09%3Cdefs%3E%0D%0A%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter_1_%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%2242.842%22%20y%3D%226.138%22%20width%3D%2234.335%22%20height%3D%2242.283%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%3C/filter%3E%0D%0A%09%3C/defs%3E%0D%0A%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2242.842%22%20y%3D%226.138%22%20width%3D%2234.335%22%20height%3D%2242.283%22%20id%3D%22SVGID_3_%22%3E%0D%0A%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter_1_%29%22%3E%0D%0A%09%09%09%3CradialGradient%20id%3D%22SVGID_4_%22%20cx%3D%2277.385%22%20cy%3D%2248.0104%22%20r%3D%2249.9548%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.0878%22%20style%3D%22stop-color%3A%23F8F8F8%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.2165%22%20style%3D%22stop-color%3A%23E4E4E4%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.3705%22%20style%3D%22stop-color%3A%23C4C4C4%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.544%22%20style%3D%22stop-color%3A%23979797%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.7338%22%20style%3D%22stop-color%3A%235D5D5D%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220.9344%22%20style%3D%22stop-color%3A%23181818%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%3C/radialGradient%3E%0D%0A%09%09%09%3Cpolygon%20fill%3D%22url%28%23SVGID_4_%29%22%20points%3D%2255.862%2C6.138%2042.842%2C14.085%2077.177%2C48.42%2077.177%2C27.452%20%09%09%09%22/%3E%0D%0A%09%09%3C/g%3E%0D%0A%09%3C/mask%3E%0D%0A%09%3Cpolygon%20mask%3D%22url%28%23SVGID_3_%29%22%20fill%3D%22%230A8CCB%22%20points%3D%2255.862%2C6.138%2042.842%2C14.085%2077.177%2C48.42%2077.177%2C27.452%20%09%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A");
  /* [1] */ }

.appSwitcher__iconShadow--store {
  position: absolute;
  z-index: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  top: 0.85714rem;
  left: 0.78571rem;
  width: 2.85714rem;
  height: 2.78571rem;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2079.88%2077.76%22%20enable-background%3D%22new%200%200%2079.88%2077.76%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20fill%3D%22%230A8CCB%22%20d%3D%22M51.087%2C0h-5.776c-0.772%2C0-1.444%2C0.529-1.626%2C1.279l-1.709%2C7.064H1.673c-0.501%2C0-0.976%2C0.225-1.293%2C0.612%0D%0A%09%09c-0.318%2C0.388-0.445%2C0.897-0.347%2C1.388l3.851%2C19.253c0.156%2C0.782%2C0.843%2C1.345%2C1.64%2C1.345H36.51l-2.141%2C8.848H8.732%0D%0A%09%09c-0.924%2C0-1.673%2C0.749-1.673%2C1.673s0.749%2C1.673%2C1.673%2C1.673h4.008c-0.861%2C0.5-1.441%2C1.431-1.441%2C2.499%0D%0A%09%09c0%2C1.595%2C1.293%2C2.888%2C2.888%2C2.888c1.595%2C0%2C2.888-1.293%2C2.888-2.888c0-1.068-0.58-1.999-1.441-2.499h13.792%0D%0A%09%09c-0.861%2C0.5-1.441%2C1.431-1.441%2C2.499c0%2C1.595%2C1.293%2C2.888%2C2.888%2C2.888c1.595%2C0%2C2.888-1.293%2C2.888-2.888%0D%0A%09%09c0-1.068-0.58-1.999-1.441-2.499h3.366c0.772%2C0%2C1.444-0.529%2C1.626-1.279l9.317-38.509h4.46c0.924%2C0%2C1.673-0.749%2C1.673-1.673%0D%0A%09%09S52.011%2C0%2C51.087%2C0z%22/%3E%0D%0A%09%3Cdefs%3E%0D%0A%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%224.446%22%20y%3D%2230.547%22%20width%3D%2232.063%22%20height%3D%229.242%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%3C/filter%3E%0D%0A%09%3C/defs%3E%0D%0A%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%224.446%22%20y%3D%2230.547%22%20width%3D%2232.063%22%20height%3D%229.242%22%20id%3D%22SVGID_1_%22%3E%0D%0A%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter%29%22%3E%0D%0A%09%09%09%3ClinearGradient%20id%3D%22SVGID_2_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%2220.2538%22%20y1%3D%2230.3574%22%20x2%3D%2231.383%22%20y2%3D%2249.5155%22%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%3C/linearGradient%3E%0D%0A%09%09%09%3Cpath%20fill%3D%22url%28%23SVGID_2_%29%22%20d%3D%22M36.51%2C30.94H5.523c-0.406%2C0-0.783-0.147-1.077-0.394l9.242%2C9.242h20.681L36.51%2C30.94z%22/%3E%0D%0A%09%09%3C/g%3E%0D%0A%09%3C/mask%3E%0D%0A%09%3Cpath%20mask%3D%22url%28%23SVGID_1_%29%22%20fill%3D%22%230A8CCB%22%20d%3D%22M36.51%2C30.94H5.523c-0.406%2C0-0.783-0.147-1.077-0.394l9.242%2C9.242h20.681%0D%0A%09%09L36.51%2C30.94z%22/%3E%0D%0A%09%3Cdefs%3E%0D%0A%09%09%3Cfilter%20id%3D%22Adobe_OpacityMaskFilter_1_%22%20filterUnits%3D%22userSpaceOnUse%22%20x%3D%2212.147%22%20y%3D%220.479%22%20width%3D%2267.733%22%20height%3D%2277.281%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3CfeColorMatrix%20%20type%3D%22matrix%22%20values%3D%22-1%200%200%200%201%20%200%20-1%200%200%201%20%200%200%20-1%200%201%20%200%200%200%201%200%22%20color-interpolation-filters%3D%22sRGB%22%20result%3D%22source%22/%3E%0D%0A%09%09%3C/filter%3E%0D%0A%09%3C/defs%3E%0D%0A%09%3Cmask%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%2212.147%22%20y%3D%220.479%22%20width%3D%2267.733%22%20height%3D%2277.281%22%20id%3D%22SVGID_3_%22%3E%0D%0A%09%09%3Cg%20filter%3D%22url%28%23Adobe_OpacityMaskFilter_1_%29%22%3E%0D%0A%09%09%09%3Cg%3E%0D%0A%09%09%09%09%3CradialGradient%20id%3D%22SVGID_4_%22%20cx%3D%2270.6849%22%20cy%3D%2267.7292%22%20r%3D%2258.9669%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%220%22%20style%3D%22stop-color%3A%23FFFFFF%22/%3E%0D%0A%09%09%09%09%09%3Cstop%20%20offset%3D%221%22%20style%3D%22stop-color%3A%23000000%22/%3E%0D%0A%09%09%09%09%3C/radialGradient%3E%0D%0A%09%09%09%09%3Cpath%20fill%3D%22url%28%23SVGID_4_%29%22%20d%3D%22M52.259%2C0.479l-5.632%2C2.866l-9.317%2C38.509c-0.182%2C0.751-0.853%2C1.279-1.626%2C1.279h-3.366%0D%0A%09%09%09%09%09c0.861%2C0.5%2C1.441%2C1.431%2C1.441%2C2.499c0%2C1.595-1.293%2C2.888-2.888%2C2.888c-1.595%2C0-2.888-1.293-2.888-2.888%0D%0A%09%09%09%09%09c0-1.068%2C0.58-1.999%2C1.441-2.499H15.634c0.861%2C0.5%2C1.441%2C1.431%2C1.441%2C2.499c0%2C1.595-1.293%2C2.888-2.888%2C2.888%0D%0A%09%09%09%09%09c-0.796%2C0-1.517-0.322-2.04-0.844L42.231%2C77.76H79.88V28.1L52.259%2C0.479z%22/%3E%0D%0A%09%09%09%3C/g%3E%0D%0A%09%09%3C/g%3E%0D%0A%09%3C/mask%3E%0D%0A%09%3Cpath%20mask%3D%22url%28%23SVGID_3_%29%22%20fill%3D%22%230A8CCB%22%20d%3D%22M52.259%2C0.479l-5.632%2C2.866l-9.317%2C38.509c-0.182%2C0.751-0.853%2C1.279-1.626%2C1.279%0D%0A%09%09h-3.366c0.861%2C0.5%2C1.441%2C1.431%2C1.441%2C2.499c0%2C1.595-1.293%2C2.888-2.888%2C2.888c-1.595%2C0-2.888-1.293-2.888-2.888%0D%0A%09%09c0-1.068%2C0.58-1.999%2C1.441-2.499H15.634c0.861%2C0.5%2C1.441%2C1.431%2C1.441%2C2.499c0%2C1.595-1.293%2C2.888-2.888%2C2.888%0D%0A%09%09c-0.796%2C0-1.517-0.322-2.04-0.844L42.231%2C77.76H79.88V28.1L52.259%2C0.479z%22/%3E%0D%0A%09%3Cpolygon%20fill%3D%22%230A8CCB%22%20points%3D%227.538%2C42.632%2011.724%2C46.818%2013.645%2C42.86%20%09%22/%3E%0D%0A%09%3Cline%20fill%3D%22none%22%20x1%3D%2246.628%22%20y1%3D%223.345%22%20x2%3D%2252.259%22%20y2%3D%220.479%22/%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A");
  /* [1] */ }

.appSwitcher__itemText {
  text-transform: uppercase;
  font-size: 0.85714rem;
  letter-spacing: 0.10714em;
  color: #616770;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out; }

/**
 * Global Application Switcher Icon link. Should be applied to a link,
 * and used in combination with the Global Switcher object.
 *
 * 1. Gives the border color a lighter blue color in contrast to the grid icon.
 * 2. Centers the icon vertically as an absolute positioned element.
 * 3. Centers the icon horizontally as an absolute positioned element.
 * 4. Making sure these elements won't get distorted at small screen size.
 *
 */
.appSwitcherButton {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  /* [2] */
  position: relative;
  display: inline-block;
  height: inherit;
  margin-right: 9px; }

.appSwitcherButton__trigger {
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #7fd6ff;
  /* [1] */
  border-radius: 100%; }
  .appSwitcherButton__trigger:hover {
    color: inherit; }
  .appSwitcherButton__trigger .icon {
    position: absolute;
    font-size: 1rem;
    line-height: 1.1;
    color: white;
    top: 50%;
    /* [2] */
    left: 50%;
    /* [3] */
    margin-top: -0.5rem;
    /* [2] */
    margin-left: -0.5rem;
    /* [3] */ }

/**
 * The account links component located within the page’s header/top-bar.
 *
 * We make heavy use of Sass within this component to ensure that the location
 * of the dropdown arrow remains consistent regardless of the size of the avatar.
 *
 * 1. Making sure these elements won't get distorted at small screen size.
 */
.appAccountLinks {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  /* [1] */
  position: relative;
  display: inline-block;
  height: inherit; }

/**
 * 1. Dropdown gets shown (via JS) by clicking trigger, force cursor state
 *    to show user that element is clickable.
 */
.appAccountLinks__trigger {
  cursor: pointer;
  /* [1] */
  height: inherit;
  margin-top: 1px; }

.appAccountLinks__avatar {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.85714rem;
  width: 32px;
  height: 32px; }

.appAccountLinks__username {
  display: inline-block;
  vertical-align: middle;
  height: inherit;
  text-align: right;
  font-weight: 700;
  font-size: 0.91429rem;
  text-transform: uppercase;
  letter-spacing: .25ex;
  line-height: 48px;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.appAccountLinks__dropdown {
  position: absolute;
  display: block;
  top: 51px;
  text-align: left;
  right: -14px;
  width: 17.14286rem;
  background-color: white;
  border: 1px solid #bfbfbf;
  -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  color: #242931;
  line-height: normal;
  padding-top: 1rem;
  padding-bottom: 0.6rem;
  padding-left: 1rem;
  padding-right: 1rem; }
  .appAccountLinks__dropdown:after, .appAccountLinks__dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-color: transparent;
    border-style: outset solid solid; }
  .appAccountLinks__dropdown:before {
    top: -0.92857rem;
    z-index: 1;
    border-width: 0.5rem;
    border-bottom-color: white;
    right: 1.5rem; }
  .appAccountLinks__dropdown:after {
    top: -1.14286rem;
    z-index: 0;
    border-width: 0.57143rem;
    border-bottom-color: #bfbfbf;
    right: 1.42857rem; }

.appAccountLinks__user {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 0.8rem;
  margin-bottom: 0.5rem; }

.appAccountLinks__infoPrimary {
  font-size: 1.28571rem; }

.appAccountLinks__infoSecondary {
  color: #898989;
  font-size: 0.71429rem; }

.appAccountLinks__links {
  text-align: left;
  font-size: 1.14286rem; }

/*
 * The organization switcher component located within the page’s header/top-bar.
 * 1. Making sure the content inside appGlobalHeader__content--right is the full width.
 */
.appOrgSwitcher {
  position: relative;
  display: inline-block;
  margin-right: 1.7rem;
  height: inherit;
  font-weight: 400;
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1;
  /* [1] */ }

/**
 * 1. Because the children of the trigger are a label and an arrow, we need
 *    to set the background to a color to make sure the hit area covers the
 *    entire element.
 * 2. Shrink-wrap content.
 * 3. Don't allow a really long org name to fill up the entire header.
 * 4. Afford interaction.
 */
.appOrgSwitcher__trigger {
  background-color: transparent;
  /* [1] */
  display: inline-block;
  /* [2] */
  max-width: 60%;
  cursor: pointer; }

/**
 * 1. Making sure both elements will align vertically.
 */
.appOrgSwitcher__label,
.appOrgSwitcher__arrow {
  color: #ffffff;
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [1] */ }

/**
 * 1. Max-width ensures that the content is truncated when clipped. Use calc
 *    to allow for the arrow's width and margin.
 */
.appOrgSwitcher__label {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 3.3rem;
  max-width: calc(100% - 22px); }

.appOrgSwitcher__arrow {
  font-size: 14px;
  margin-left: 8px; }

.appOrgSwitcher__dropdown {
  position: absolute;
  display: block;
  top: 51px;
  text-align: left;
  right: -14px;
  width: 17.14286rem;
  background-color: white;
  border: 1px solid #bfbfbf;
  -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15); }
  .appOrgSwitcher__dropdown:after, .appOrgSwitcher__dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-color: transparent;
    border-style: outset solid solid; }
  .appOrgSwitcher__dropdown:before {
    top: -0.92857rem;
    z-index: 1;
    border-width: 0.5rem;
    border-bottom-color: white;
    right: 1.5rem; }
  .appOrgSwitcher__dropdown:after {
    top: -1.14286rem;
    z-index: 0;
    border-width: 0.57143rem;
    border-bottom-color: #bfbfbf;
    right: 1.42857rem; }

/**
 * 1. Let the user scroll to see more orgs when they exceed the dropdown
 *    height.
 * 2. Get rid of list's default bottom margin.
 */
.appOrgSwitcher__list {
  padding: 0.8rem 1.2rem;
  list-style-type: none;
  right: -1.5rem;
  line-height: 1.3;
  max-height: 22.14286rem;
  /* [1] */
  overflow: hidden;
  /* [1] */
  overflow-y: auto;
  /* [1] */
  margin-bottom: 0;
  /* [2] */
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */ }
  .appOrgSwitcher__list::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .appOrgSwitcher__list::-webkit-scrollbar-thumb {
    background-color: #898989;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .appOrgSwitcher__list::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }

/**
 * 1. Prevent text from overlapping with edit icon.
 * 2. Make links take up full width of item.
 */
.appOrgSwitcher__item {
  position: relative; }
  .appOrgSwitcher__item:not(.appOrgSwitcher__add) {
    padding-right: 1.42857rem;
    /* [1] */ }
  .appOrgSwitcher__item a {
    display: block;
    /* [2] */
    padding: 0.4rem 0;
    /* [2] */ }

.appOrgSwitcher__add {
  border-top: 1px solid #dddddd;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  padding-bottom: 0; }

.appOrgSwitcher__addIcon {
  display: inline-block;
  margin-right: 0.71429em; }

/**
 * 1. Make sure tooltips are not cropped off.
 * 2. Nav is perpetually collapsed.
 * 3. Make room for the header.
 */
.appGlobalSideNav {
  overflow: visible;
  width: 56px;
  padding: 13px 0 5px;
  background: #191c21;
  color: #aabbbb;
  font-size: 0.92857rem;
  position: fixed;
  z-index: 40;
  bottom: 0;
  top: 48px;
  /* 3 */
  left: 0;
  /**
   * 1. Position appCount relative to the icon
   */ }
  .appGlobalSideNav .appCount {
    position: absolute;
    /* 1 */
    top: 4px;
    /* 1 */
    left: 27px;
    /* 1 */
    font-size: 0.7rem; }

/**
 * 1. Hardcode the text width to avoid text wrapping as the nav opens and
 *    closes.
 */
.appGlobalSideNav__item {
  min-width: 184px;
  /* [1] */
  color: #aabbbb;
  font-size: 0.92857rem;
  /**
   * Item selected state
   */ }
  .appGlobalSideNav__item + .appGlobalSideNav__item {
    margin-top: 18px; }
  .appGlobalSideNav__item:hover .appGlobalSideNav__itemIcon {
    color: white; }
  .appGlobalSideNav__item:hover .appGlobalSideNav__itemText {
    color: white; }
  .appGlobalSideNav__item.is-item-selected .appGlobalSideNav__itemIcon {
    color: #13bcff; }
  .appGlobalSideNav__item.is-item-selected .appGlobalSideNav__itemText {
    color: #13bcff; }

.appGlobalSideNav__itemIcon {
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  padding: 0;
  font-size: 20px;
  color: #aabbbb; }

/**
 * 1. Vertically center text with icon.
 * 2. Manually align text with the icon.
 */
.appGlobalSideNav__itemText {
  font-size: inherit;
  padding-left: 11px;
  padding-top: 3px;
  /* [2] */
  text-transform: uppercase;
  color: #aabbbb;
  min-height: 15px;
  /* [1] */
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden; }

.appGlobalSideNav__primaryMenu,
.appGlobalSideNav__secondaryMenu {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .appGlobalSideNav__primaryMenu a,
  .appGlobalSideNav__secondaryMenu a {
    color: #aabbbb; }
    .appGlobalSideNav__primaryMenu a:hover,
    .appGlobalSideNav__secondaryMenu a:hover {
      color: white; }

/**
 * 1. Position child tooltip absolutely.
 * 2. Remove original min-width.
 * 3. Remove original margin-top.
 */
.appGlobalSideNav__item {
  cursor: pointer;
  position: relative;
  min-width: 0;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 1.28571rem;
  padding-right: 1.28571rem;
  text-transform: uppercase;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }
  .appGlobalSideNav__item + .appGlobalSideNav__item {
    margin-top: 0; }
  .appGlobalSideNav__item.is-item-disabled {
    opacity: 0.5;
    pointer-events: none; }

/**
 * 1. Act as a hit area for the item, when the item contains other
 *    interactive components, such as popovers.
 * 2. Sit above other components, like appCount.
 */
.appGlobalSideNav__itemTrigger {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100; }

.appGlobalSideNav__secondaryMenu {
  position: absolute;
  bottom: 22px;
  width: 100%; }

/*
 * 1. Mimics size of a list item (when feature flagging sections).
 */
.appGlobalSideNav__listItemPlaceholder {
  height: 28px;
  /* [1] */ }

/**
 * 1. Position popover beyond the right edge of the nav.
 * 2. Position popover to extend upwards above the side nav item.
 * 3. Don't inherit any styles from parent (e.g. a button).
 * 4. Sit on top of appGlobalSideNavTooltip.
 * 5. Default to be hidden.
 */
.appGlobalSideNavPopover {
  display: none;
  position: absolute;
  color: white;
  left: 63px;
  bottom: -5px;
  z-index: 30;
  width: 660px;
  font-size: 11px;
  text-transform: none;
  text-align: left;
  cursor: auto;
  -webkit-font-smoothing: auto; }
  .appGlobalSideNavPopover:before, .appGlobalSideNavPopover:after {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    content: " ";
    border-color: transparent;
    pointer-events: none;
    border-width: 15px;
    bottom: 10px; }
  .appGlobalSideNavPopover:before, .appGlobalSideNavPopover:after {
    border-style: solid solid solid outset; }
  .appGlobalSideNavPopover:after {
    left: -28px;
    border-right-color: #111111; }
  .appGlobalSideNavPopover:before {
    left: -29px;
    border-right-color: #565f63; }

.is-side-nav-popover-visible {
  display: block; }

.appGlobalSideNavPopover--small {
  width: 480px; }

/**
 * 1. Use background color on the inner element so that it gets cropped by
 *    the parent element's overflow: none.
 * 2. Use round corners to clip content.
 */
.appGlobalSideNavPopover__inner {
  background-color: #111111;
  box-shadow: 0 0.71429rem 2.5rem rgba(0, 0, 0, 0.5);
  border: 1px solid #565f63;
  border-radius: 5px;
  overflow: hidden; }

/**
 * 1. Position button at top right of popover.
 */
.appGlobalSideNavPopover__close {
  position: absolute;
  cursor: pointer;
  font-size: 12px;
  top: 10px;
  right: 8px; }

/**
 * 1. Use background color on the inner element so that it gets cropped by
 *    the parent element's overflow: none.
 */
.appGlobalSideNavPopover__header {
  padding: 10px 12px 8px;
  font-weight: 300;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px; }

.appGlobalSideNavPopover__content {
  padding: 10px 12px 12px; }

/**
 * 1. Position tooltip beyond the right edge of the nav.
 * 2. Disallow line-breaks.
 * 3. Sit on top of appGlobalSideNavPopover.
 */
.appGlobalSideNavTooltip {
  position: absolute;
  background-color: #111111;
  border: 1px solid #565f63;
  color: white;
  text-transform: uppercase;
  display: none;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  top: 3px;
  left: 62px;
  white-space: nowrap;
  z-index: 60; }
  .appGlobalSideNavTooltip:before, .appGlobalSideNavTooltip:after {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    content: " ";
    border-color: transparent;
    pointer-events: none;
    border-width: 15px;
    top: -1px; }
  .appGlobalSideNavTooltip:before, .appGlobalSideNavTooltip:after {
    border-style: solid solid solid outset; }
  .appGlobalSideNavTooltip:after {
    left: -28px;
    border-right-color: #111111; }
  .appGlobalSideNavTooltip:before {
    left: -29px;
    border-right-color: #565f63; }

.appGlobalSideNav__item:hover .appGlobalSideNavTooltip {
  display: block; }

.appIconText {
  padding-top: 0;
  padding-bottom: 0; }
  .appIconText .iconText__icon {
    font-size: 1em;
    padding-right: 0;
    margin-right: 0.5em; }

.appInfoBox {
  color: black;
  padding: 24px;
  border-radius: 3px;
  border: 1px solid #bfbfbf; }

/**
* 1. Position icon so it is more visually aligned with the header.
* 2. Primary by default.
*/
.appInfoBox__icon {
  position: relative;
  /* [1] */
  top: -4px;
  /* [1] */
  font-size: 50px;
  color: #00a0df;
  /* [2] */
  width: 80px; }

.appInfoBox__content p {
  margin-bottom: 8px; }

.appInfoBox__header {
  font-size: 18px;
  margin-bottom: 8px; }

/**
 * 1. Push the body down so the first line of text is vertically-
 *    centered with the icon.
 */
.appInfoBox__body {
  margin-top: 10px;
  /* [1] */ }

/**
 * 1. If there is a header, we don't need to push down the body.
 */
.appInfoBox__header +
.appInfoBox__body {
  margin-top: 0;
  /* [1] */ }

.appInfoBox__footer {
  padding-top: 12px;
  text-align: right; }

.appInfoBox--noBorder {
  border: none; }

.appInfoBox--success .appInfoBox__icon {
  color: #13bb72; }

.appInfoBox--warning .appInfoBox__icon {
  color: #f09300; }

.appInfoBox--danger .appInfoBox__icon {
  color: #ff3516; }

.appInfoBox--default .appInfoBox__icon {
  color: black; }

.appInfoBox--dark {
  color: white;
  border-color: #565f63; }

.appInfoBox--cozy {
  padding: 10px;
  /**
   * 1. Don't push down the body in cozy info boxes.
   */
  /**
   * 1. If there is a header, we don't need to push down the body.
   */ }
  .appInfoBox--cozy .appInfoBox__body {
    margin-top: -2px;
    /* [1] */ }
  .appInfoBox--cozy .appInfoBox__header +
  .appInfoBox__body {
    margin-top: 0;
    /* [1] */ }
  .appInfoBox--cozy .appInfoBox__icon {
    font-size: 20px;
    width: 28px; }
  .appInfoBox--cozy .appInfoBox__close {
    top: 8px; }
  .appInfoBox--cozy .appInfoBox__header {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: bold; }
  .appInfoBox--cozy .appInfoBox__content p {
    font-size: 12px;
    margin-bottom: 8px; }

/**
 * 1. When collapsed, the icon should be in the exact middle of the bar.
 * 2. Horizontally center header with icon.
 * 3. In the collapsed state, the entire info box can be clicked to be expanded.
 * 4. In collapsed state, the info box should have an even visual padding.
 */
.appInfoBox--collapsible .appInfoBox__header {
  position: relative; }

.is-app-info-box-collapsed {
  border: 1px solid transparent;
  color: white;
  cursor: pointer;
  /* [3] */
  padding-bottom: 1px;
  /* [4] */
  background-color: #00a0df; }
  .is-app-info-box-collapsed .appInfoBox__icon {
    color: white; }
  .is-app-info-box-collapsed .appInfoBox__body,
  .is-app-info-box-collapsed .appInfoBox__footer {
    display: none; }
  .is-app-info-box-collapsed .appInfoBox__toggle {
    color: white; }
  .is-app-info-box-collapsed.appInfoBox--success {
    background-color: #13bb72; }
  .is-app-info-box-collapsed.appInfoBox--warning {
    background-color: #f09300; }
  .is-app-info-box-collapsed.appInfoBox--danger {
    background-color: #ff3516; }
  .is-app-info-box-collapsed.appInfoBox--default {
    background-color: black; }
  .is-app-info-box-collapsed:hover .appInfoBox__toggle {
    opacity: 0.5; }

/**
 * 1. Prevent rapidly clicking the toggle from accidentally selecting the
 *    alert.
 */
.appInfoBox__toggle {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  color: #1b262c;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* 1 */ }
  .appInfoBox__toggle:hover {
    opacity: 0.5; }
  .appInfoBox--dark .appInfoBox__toggle {
    color: white; }

@media only screen and (max-width: 1040px) {
  .appInfoBox--responsive {
    padding: 12px; }
    .appInfoBox--responsive .appInfoBox__icon {
      font-size: 25px;
      width: 40px; }
    .appInfoBox--responsive .appInfoBox__header {
      font-size: 14px;
      margin-bottom: 8px;
      font-weight: bold; }
    .appInfoBox--responsive .appInfoBox__content p {
      font-size: 12px;
      margin-bottom: 8px; } }

/**
 * Plain link
 */
a,
.appLink {
  color: #00a0df;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out; }
  a:hover, a.is-link-selected,
  .appLink:hover,
  .appLink.is-link-selected {
    color: #13bcff; }
  a:hover, a:focus,
  .appLink:hover,
  .appLink:focus {
    outline: none; }
  a.is-link-disabled,
  .appLink.is-link-disabled {
    cursor: not-allowed;
    color: rgba(140, 140, 140, 0.5); }
    a.is-link-disabled:hover,
    .appLink.is-link-disabled:hover {
      color: rgba(140, 140, 140, 0.5); }

.appLink--secondary {
  color: #969ba3; }
  .appLink--secondary:hover, .appLink--secondary.is-link-selected {
    color: #13bcff; }

.appLink--subtleDanger:hover {
  color: #ff3516; }

.appLink--subtleSuccess:hover {
  color: #13bb72; }

.appLink--dark {
  color: #60c4ff; }
  .appLink--dark:hover {
    color: #a8dfff; }

/**
 * 1. Expand link to horizontally fill container.
 */
.appLink--full {
  display: block;
  /* [1] */ }

/**
 * 1. Maintain button styles even if class is applied to an anchor tag.
 */
/**
 * 1. Vertically align this elements in case it's displayed inline with other
 *    elements.
 * 2. Mimic button behavior when this class is on divs and spans.
 * 3. Retain appearance despite inherited font-size.
 * 4. Readable line-height.
 */
.appMainButton {
  border-style: solid;
  border-width: 1px;
  text-align: center;
  text-transform: uppercase;
  padding: 1em 1.3em;
  vertical-align: middle;
  /* [1] */
  display: inline-block;
  /* [2] */
  cursor: pointer;
  /* [2] */
  font-size: 0.71429rem;
  /* [3] */
  letter-spacing: 0.07143em;
  line-height: normal;
  /* [4] */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: background-color 0.15s;
  -moz-transition: background-color 0.15s;
  -o-transition: background-color 0.15s;
  transition: background-color 0.15s;
  color: white;
  text-decoration: none;
  /* [1] */
  border-color: #848484;
  background-color: #898989; }
  .appMainButton:visited {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton:hover {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #919191; }
  .appMainButton:active {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #818181; }
  .appMainButton[disabled], .appMainButton[disabled]:hover, .appMainButton[disabled]:focus, .appMainButton.is-button-disabled, .appMainButton.is-button-disabled:hover, .appMainButton.is-button-disabled:focus {
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.3;
    border-color: #757575; }
    .appMainButton[disabled]:hover, .appMainButton[disabled]:active, .appMainButton[disabled]:hover:hover, .appMainButton[disabled]:hover:active, .appMainButton[disabled]:focus:hover, .appMainButton[disabled]:focus:active, .appMainButton.is-button-disabled:hover, .appMainButton.is-button-disabled:active, .appMainButton.is-button-disabled:hover:hover, .appMainButton.is-button-disabled:hover:active, .appMainButton.is-button-disabled:focus:hover, .appMainButton.is-button-disabled:focus:active {
      background-color: #898989; }
  .appMainButton[disabled], .appMainButton[disabled]:hover, .appMainButton[disabled]:focus, .appMainButton.is-button-disabled, .appMainButton.is-button-disabled:hover, .appMainButton.is-button-disabled:focus {
    cursor: not-allowed; }
  .appMainButton + .appMainButton {
    margin-left: .5em; }

.appMainButton--primary {
  color: white;
  text-decoration: none;
  /* [1] */
  border-color: #0099d5;
  background-color: #00a0df; }
  .appMainButton--primary:visited {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--primary:hover {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #00abee; }
  .appMainButton--primary:active {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #0095d0; }
  .appMainButton--primary[disabled], .appMainButton--primary[disabled]:hover, .appMainButton--primary[disabled]:focus, .appMainButton--primary.is-button-disabled, .appMainButton--primary.is-button-disabled:hover, .appMainButton--primary.is-button-disabled:focus {
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.3;
    border-color: #0083b6; }
    .appMainButton--primary[disabled]:hover, .appMainButton--primary[disabled]:active, .appMainButton--primary[disabled]:hover:hover, .appMainButton--primary[disabled]:hover:active, .appMainButton--primary[disabled]:focus:hover, .appMainButton--primary[disabled]:focus:active, .appMainButton--primary.is-button-disabled:hover, .appMainButton--primary.is-button-disabled:active, .appMainButton--primary.is-button-disabled:hover:hover, .appMainButton--primary.is-button-disabled:hover:active, .appMainButton--primary.is-button-disabled:focus:hover, .appMainButton--primary.is-button-disabled:focus:active {
      background-color: #00a0df; }

.appMainButton--secondary {
  color: #00a0df;
  text-decoration: none;
  /* [1] */
  border-color: #e3e3e3;
  background-color: #e8e8e8; }
  .appMainButton--secondary:visited {
    color: #00a0df;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--secondary:hover {
    color: #00a0df;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #f0f0f0; }
  .appMainButton--secondary:active {
    color: #00a0df;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #e0e0e0; }
  .appMainButton--secondary[disabled], .appMainButton--secondary[disabled]:hover, .appMainButton--secondary[disabled]:focus, .appMainButton--secondary.is-button-disabled, .appMainButton--secondary.is-button-disabled:hover, .appMainButton--secondary.is-button-disabled:focus {
    color: rgba(112, 112, 112, 0.8);
    opacity: 0.3;
    border-color: #d4d4d4; }
    .appMainButton--secondary[disabled]:hover, .appMainButton--secondary[disabled]:active, .appMainButton--secondary[disabled]:hover:hover, .appMainButton--secondary[disabled]:hover:active, .appMainButton--secondary[disabled]:focus:hover, .appMainButton--secondary[disabled]:focus:active, .appMainButton--secondary.is-button-disabled:hover, .appMainButton--secondary.is-button-disabled:active, .appMainButton--secondary.is-button-disabled:hover:hover, .appMainButton--secondary.is-button-disabled:hover:active, .appMainButton--secondary.is-button-disabled:focus:hover, .appMainButton--secondary.is-button-disabled:focus:active {
      background-color: #e8e8e8; }

.appMainButton--secondaryDark {
  color: white;
  text-decoration: none;
  /* [1] */
  border-color: #4e535b;
  background-color: #535860; }
  .appMainButton--secondaryDark:visited {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--secondaryDark:hover {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #5a6068; }
  .appMainButton--secondaryDark:active {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #4c5058; }
  .appMainButton--secondaryDark[disabled], .appMainButton--secondaryDark[disabled]:hover, .appMainButton--secondaryDark[disabled]:focus, .appMainButton--secondaryDark.is-button-disabled, .appMainButton--secondaryDark.is-button-disabled:hover, .appMainButton--secondaryDark.is-button-disabled:focus {
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.3;
    border-color: #40444a; }
    .appMainButton--secondaryDark[disabled]:hover, .appMainButton--secondaryDark[disabled]:active, .appMainButton--secondaryDark[disabled]:hover:hover, .appMainButton--secondaryDark[disabled]:hover:active, .appMainButton--secondaryDark[disabled]:focus:hover, .appMainButton--secondaryDark[disabled]:focus:active, .appMainButton--secondaryDark.is-button-disabled:hover, .appMainButton--secondaryDark.is-button-disabled:active, .appMainButton--secondaryDark.is-button-disabled:hover:hover, .appMainButton--secondaryDark.is-button-disabled:hover:active, .appMainButton--secondaryDark.is-button-disabled:focus:hover, .appMainButton--secondaryDark.is-button-disabled:focus:active {
      background-color: #535860; }

.appMainButton--success {
  color: white;
  text-decoration: none;
  /* [1] */
  border-color: #12b26c;
  background-color: #13bb72; }
  .appMainButton--success:visited {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--success:hover {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #14c97a; }
  .appMainButton--success:active {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #12ad6a; }
  .appMainButton--success[disabled], .appMainButton--success[disabled]:hover, .appMainButton--success[disabled]:focus, .appMainButton--success.is-button-disabled, .appMainButton--success.is-button-disabled:hover, .appMainButton--success.is-button-disabled:focus {
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.3;
    border-color: #0f965b; }
    .appMainButton--success[disabled]:hover, .appMainButton--success[disabled]:active, .appMainButton--success[disabled]:hover:hover, .appMainButton--success[disabled]:hover:active, .appMainButton--success[disabled]:focus:hover, .appMainButton--success[disabled]:focus:active, .appMainButton--success.is-button-disabled:hover, .appMainButton--success.is-button-disabled:active, .appMainButton--success.is-button-disabled:hover:hover, .appMainButton--success.is-button-disabled:hover:active, .appMainButton--success.is-button-disabled:focus:hover, .appMainButton--success.is-button-disabled:focus:active {
      background-color: #13bb72; }

.appMainButton--warning {
  color: white;
  text-decoration: none;
  /* [1] */
  border-color: #e68d00;
  background-color: #f09300; }
  .appMainButton--warning:visited {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--warning:hover {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #ff9c00; }
  .appMainButton--warning:active {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #e18a00; }
  .appMainButton--warning[disabled], .appMainButton--warning[disabled]:hover, .appMainButton--warning[disabled]:focus, .appMainButton--warning.is-button-disabled, .appMainButton--warning.is-button-disabled:hover, .appMainButton--warning.is-button-disabled:focus {
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.3;
    border-color: #c77a00; }
    .appMainButton--warning[disabled]:hover, .appMainButton--warning[disabled]:active, .appMainButton--warning[disabled]:hover:hover, .appMainButton--warning[disabled]:hover:active, .appMainButton--warning[disabled]:focus:hover, .appMainButton--warning[disabled]:focus:active, .appMainButton--warning.is-button-disabled:hover, .appMainButton--warning.is-button-disabled:active, .appMainButton--warning.is-button-disabled:hover:hover, .appMainButton--warning.is-button-disabled:hover:active, .appMainButton--warning.is-button-disabled:focus:hover, .appMainButton--warning.is-button-disabled:focus:active {
      background-color: #f09300; }

.appMainButton--danger {
  color: white;
  text-decoration: none;
  /* [1] */
  border-color: #ff2c0c;
  background-color: #ff3516; }
  .appMainButton--danger:visited {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--danger:hover {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #ff5035; }
  .appMainButton--danger:active {
    color: white;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: #f62100; }
  .appMainButton--danger[disabled], .appMainButton--danger[disabled]:hover, .appMainButton--danger[disabled]:focus, .appMainButton--danger.is-button-disabled, .appMainButton--danger.is-button-disabled:hover, .appMainButton--danger.is-button-disabled:focus {
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.3;
    border-color: #ec1f00; }
    .appMainButton--danger[disabled]:hover, .appMainButton--danger[disabled]:active, .appMainButton--danger[disabled]:hover:hover, .appMainButton--danger[disabled]:hover:active, .appMainButton--danger[disabled]:focus:hover, .appMainButton--danger[disabled]:focus:active, .appMainButton--danger.is-button-disabled:hover, .appMainButton--danger.is-button-disabled:active, .appMainButton--danger.is-button-disabled:hover:hover, .appMainButton--danger.is-button-disabled:hover:active, .appMainButton--danger.is-button-disabled:focus:hover, .appMainButton--danger.is-button-disabled:focus:active {
      background-color: #ff3516; }

.appMainButton--transparent {
  color: #00a0df;
  text-decoration: none;
  /* [1] */
  border-color: transparent;
  background-color: transparent;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out; }
  .appMainButton--transparent:visited {
    color: #00a0df;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--transparent:hover {
    color: #00a0df;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: transparent; }
  .appMainButton--transparent:active {
    color: #00a0df;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: transparent; }
  .appMainButton--transparent[disabled], .appMainButton--transparent[disabled]:hover, .appMainButton--transparent[disabled]:focus, .appMainButton--transparent.is-button-disabled, .appMainButton--transparent.is-button-disabled:hover, .appMainButton--transparent.is-button-disabled:focus {
    color: rgba(112, 112, 112, 0.8);
    opacity: 0.3;
    border-color: transparent; }
    .appMainButton--transparent[disabled]:hover, .appMainButton--transparent[disabled]:active, .appMainButton--transparent[disabled]:hover:hover, .appMainButton--transparent[disabled]:hover:active, .appMainButton--transparent[disabled]:focus:hover, .appMainButton--transparent[disabled]:focus:active, .appMainButton--transparent.is-button-disabled:hover, .appMainButton--transparent.is-button-disabled:active, .appMainButton--transparent.is-button-disabled:hover:hover, .appMainButton--transparent.is-button-disabled:hover:active, .appMainButton--transparent.is-button-disabled:focus:hover, .appMainButton--transparent.is-button-disabled:focus:active {
      background-color: transparent; }
  .appMainButton--transparent:hover {
    color: #13bcff; }
  .appMainButton--transparent[disabled], .appMainButton--transparent[disabled]:hover, .appMainButton--transparent[disabled]:focus, .appMainButton--transparent.is-button-disabled, .appMainButton--transparent.is-button-disabled:hover, .appMainButton--transparent.is-button-disabled:focus {
    color: #00a0df; }

.appMainButton--transparentDark {
  color: #60c4ff;
  text-decoration: none;
  /* [1] */
  border-color: transparent;
  background-color: transparent;
  -webkit-transition: color 0.2s ease-out;
  -moz-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out; }
  .appMainButton--transparentDark:visited {
    color: #60c4ff;
    /* [1] */
    text-decoration: none;
    /* [1] */ }
  .appMainButton--transparentDark:hover {
    color: #60c4ff;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: transparent; }
  .appMainButton--transparentDark:active {
    color: #60c4ff;
    /* [1] */
    text-decoration: none;
    /* [1] */
    background-color: transparent; }
  .appMainButton--transparentDark[disabled], .appMainButton--transparentDark[disabled]:hover, .appMainButton--transparentDark[disabled]:focus, .appMainButton--transparentDark.is-button-disabled, .appMainButton--transparentDark.is-button-disabled:hover, .appMainButton--transparentDark.is-button-disabled:focus {
    color: rgba(176, 176, 176, 0.8);
    opacity: 0.3;
    border-color: transparent; }
    .appMainButton--transparentDark[disabled]:hover, .appMainButton--transparentDark[disabled]:active, .appMainButton--transparentDark[disabled]:hover:hover, .appMainButton--transparentDark[disabled]:hover:active, .appMainButton--transparentDark[disabled]:focus:hover, .appMainButton--transparentDark[disabled]:focus:active, .appMainButton--transparentDark.is-button-disabled:hover, .appMainButton--transparentDark.is-button-disabled:active, .appMainButton--transparentDark.is-button-disabled:hover:hover, .appMainButton--transparentDark.is-button-disabled:hover:active, .appMainButton--transparentDark.is-button-disabled:focus:hover, .appMainButton--transparentDark.is-button-disabled:focus:active {
      background-color: transparent; }
  .appMainButton--transparentDark:hover {
    color: #a8dfff; }
  .appMainButton--transparentDark[disabled], .appMainButton--transparentDark[disabled]:hover, .appMainButton--transparentDark[disabled]:focus, .appMainButton--transparentDark.is-button-disabled, .appMainButton--transparentDark.is-button-disabled:hover, .appMainButton--transparentDark.is-button-disabled:focus {
    color: #60c4ff; }

/**
 * 1. Retain appearance despite inherited font-size.
 */
.appMainButton--cozy {
  padding: 0.28571rem 0.57143rem 0.35714rem;
  /* [1] */ }

/**
 * 1. Retain appearance despite inherited font-size.
 */
.appMainButton--large {
  padding: 0.57143rem 1rem 0.78571rem;
  /* [1] */
  font-size: 1.14286rem;
  /* [1] */ }

.appMainButton--withDropdown {
  position: relative; }

/**
 * 1. Resize button to expect the only descendent to be an icon, and not text.
 */
.appMainButton--iconOnly {
  font-size: 1.14286rem;
  /* [1] */
  padding-top: 0.42857rem;
  /* [1] */
  padding-bottom: 0.5rem;
  /* [1] */ }
  .appMainButton--iconOnly.appMainButton--cozy {
    font-size: 1.07143rem;
    /* [1] */
    padding-top: 0.07143rem;
    /* [1] */
    padding-bottom: 0.14286rem;
    /* [1] */ }
  .appMainButton--iconOnly.appMainButton--large {
    font-size: 1.42857rem;
    /* [1] */
    padding-top: 0.5rem;
    /* [1] */
    padding-bottom: 0.5rem;
    /* [1] */ }

.appMainButtonGroup {
  margin-bottom: 24px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px; }
  .appMainButtonGroup .appMainButton {
    background-color: transparent;
    color: #00a0df;
    border-color: #00a0df; }
  .appMainButtonGroup .is-button-selected {
    color: white;
    background-color: #00a0df; }

/**
 * Dropdown Object. Originally designed for the Select Object (selectmenu),
 * this is a simple container to toggle display mode.
 *
 * 1. Remove bullets from default list style.
 * 2. Expand to be as wide as the parent element and fit snugly inside.
 * 3. Wrap text when it's wider than the containing element.
 * 4. Undo bottom margin set by normalize.
 */
.appMenu {
  display: block;
  list-style: none;
  /* [1] */
  box-sizing: content-box;
  /* [2] */
  min-width: 100%;
  /* [2] */
  white-space: normal;
  /* [3] */
  color: black;
  margin-bottom: 0;
  /* [4] */
  font-size: 1rem;
  background-color: white; }

.appMenu__item {
  padding: 0.57143rem 0.85714rem; }
  .appMenu__item.is-menu-item-selected {
    background-color: #e9f0f4; }

.appMenu--scrollable {
  overflow-y: auto;
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */ }
  .appMenu--scrollable::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .appMenu--scrollable::-webkit-scrollbar-thumb {
    background-color: #898989;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .appMenu--scrollable::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }

/**
 * 1. Hovering over a selected item should not offer affordance to the user.
 */
.appMenu--clickable .appMenu__item {
  cursor: pointer; }
  .appMenu--clickable .appMenu__item:hover:not(.is-menu-item-selected) {
    /* [1] */
    background-color: #f4f4f4; }

.appMenu--complex .appMenu__item + .appMenu__item {
  border-top: 1px solid #dddddd; }

.is-menu-disabled {
  background-color: #f6f6f6;
  color: #cccccc; }

/**
 * 1. Hide warning by default.
 * 2. Apply this state to force it to be visible for IE9 and under.
 * 3. Fill entire screen and block user interaction with the app.
 */
.appOutdatedBrowserWarning {
  display: none !important;
  /* [1] */
  top: 0 !important;
  /* [3] */
  bottom: 0 !important;
  /* [3] */
  right: 0 !important;
  /* [3] */ }
  .appOutdatedBrowserWarning.is-warning-visible {
    display: block !important;
    /* [2] */ }
  .appOutdatedBrowserWarning .appToast {
    position: absolute;
    /* [3] */
    top: 0;
    /* [3] */
    left: 0;
    /* [3] */
    right: 0;
    /* [3] */
    bottom: 0;
    /* [3] */
    max-width: none;
    /* [3] */
    width: auto;
    /* [3] */ }

/**
 * 1. Display specifically on IE10 and IE11.
 * 2. Then hide for IE11.
 * Reference: http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11/22085269#22085269
 */
@media all and (-ms-high-contrast: none) {
  .appOutdatedBrowserWarning {
    display: block !important;
    /* [1] */ }

  *::-ms-backdrop,
  .appOutdatedBrowserWarning {
    display: none !important;
    /* [2] */ } }
/**
 * 1. Expect developers to position this element absolutely on the screen, or
 *    within the originating element (e.g. a button).
 * 2. Don't inherit any styles from parent (e.g. a button).
 * 3. Use round corners to clip content.
 */
.appPopover {
  position: absolute;
  /* [1] */
  z-index: 80;
  width: 18.57143rem;
  font-size: 1rem;
  color: black;
  /* [2] */
  text-transform: none;
  /* [2] */
  text-align: left;
  /* [2] */ }
  .appPopover:before, .appPopover:after {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    content: " ";
    border-color: transparent;
    pointer-events: none;
    border-width: 0.5rem; }

/**
 * 1. Use background color on the inner element so that it gets cropped by
 *    the parent element's overflow: none.
 */
.appPopover__inner {
  background-color: white;
  /* [1] */
  box-shadow: 0 0.71429rem 2.5rem rgba(0, 0, 0, 0.5);
  border: 1px solid #bfbfbf;
  border-radius: 5px;
  overflow: hidden;
  /* [3] */ }

/**
 * 1. Position button at top right of popover.
 */
.appPopover__close {
  position: absolute;
  /* [1] */
  cursor: pointer;
  font-size: 0.85714rem;
  top: 0.71429rem;
  /* [1] */
  right: 0.57143rem;
  /* [1] */ }

.appPopover__header {
  background-color: #f6f6f6;
  padding: 0.5rem 0.85714rem 0.57143rem;
  font-weight: bold;
  font-size: 1.14286rem;
  border-bottom: 1px solid #c4c4c4; }

.appPopover__section {
  padding: 0.5rem 0.85714rem 0.5rem;
  border-bottom: 1px solid #dddddd; }

.appPopover__content {
  padding: 0.71429rem 0.85714rem 0.85714rem; }

.appPopover--closeable .appPopover__header {
  padding-right: 2rem; }

/**
 * Arrow is on the left.
 */
.appPopover--rightDown,
.appPopover--rightUp {
  left: calc(100% + 0.71429rem); }
  .appPopover--rightDown:before, .appPopover--rightDown:after,
  .appPopover--rightUp:before,
  .appPopover--rightUp:after {
    border-style: solid solid solid outset; }
  .appPopover--rightDown:after,
  .appPopover--rightUp:after {
    left: -0.85714rem;
    border-right-color: white; }
  .appPopover--rightDown:before,
  .appPopover--rightUp:before {
    left: -1rem;
    border-right-color: #bfbfbf; }

/**
 * Arrow is on the right.
 */
.appPopover--leftDown,
.appPopover--leftUp {
  right: calc(100% + 0.71429rem); }
  .appPopover--leftDown:before, .appPopover--leftDown:after,
  .appPopover--leftUp:before,
  .appPopover--leftUp:after {
    border-style: solid outset; }
  .appPopover--leftDown:after,
  .appPopover--leftUp:after {
    right: -0.92857rem;
    border-left-color: white; }
  .appPopover--leftDown:before,
  .appPopover--leftUp:before {
    right: -1rem;
    border-left-color: #bfbfbf; }

/**
 * Arrow is on the left or right top.
 */
.appPopover--rightDown,
.appPopover--leftDown {
  top: 0; }
  .appPopover--rightDown:before, .appPopover--rightDown:after,
  .appPopover--leftDown:before,
  .appPopover--leftDown:after {
    top: 0.71429rem; }

/**
 * Arrow is on the left or right bottom.
 */
.appPopover--rightUp,
.appPopover--leftUp {
  bottom: 0; }
  .appPopover--rightUp:before, .appPopover--rightUp:after,
  .appPopover--leftUp:before,
  .appPopover--leftUp:after {
    bottom: 0.71429rem; }

/**
 * Arrow is on the top.
 */
.appPopover--bottomLeft,
.appPopover--bottomRight {
  top: calc(100% + 0.71429rem); }
  .appPopover--bottomLeft:before, .appPopover--bottomLeft:after,
  .appPopover--bottomRight:before,
  .appPopover--bottomRight:after {
    border-style: outset solid solid; }
  .appPopover--bottomLeft:after,
  .appPopover--bottomRight:after {
    top: -0.85714rem;
    border-bottom-color: white; }
  .appPopover--bottomLeft:before,
  .appPopover--bottomRight:before {
    top: -1rem;
    border-bottom-color: #bfbfbf; }

/**
 * Arrow is on the bottom.
 */
.appPopover--topLeft,
.appPopover--topRight {
  bottom: calc(100% + 0.71429rem); }
  .appPopover--topLeft:before, .appPopover--topLeft:after,
  .appPopover--topRight:before,
  .appPopover--topRight:after {
    border-style: solid solid outset; }
  .appPopover--topLeft:after,
  .appPopover--topRight:after {
    bottom: -0.92857rem;
    border-top-color: white; }
  .appPopover--topLeft:before,
  .appPopover--topRight:before {
    bottom: -1.07143rem;
    border-top-color: #bfbfbf; }

/**
 * Arrow is on the top or bottom right.
 */
.appPopover--bottomLeft,
.appPopover--topLeft {
  right: 0; }
  .appPopover--bottomLeft:before, .appPopover--bottomLeft:after,
  .appPopover--topLeft:before,
  .appPopover--topLeft:after {
    right: 0.71429rem; }

/**
 * Arrow is on the top or bottom left.
 */
.appPopover--bottomRight,
.appPopover--topRight {
  left: 0; }
  .appPopover--bottomRight:before, .appPopover--bottomRight:after,
  .appPopover--topRight:before,
  .appPopover--topRight:after {
    left: 0.71429rem; }

.appPopover--wide {
  width: 44.28571rem; }

.appPopover--withHeader.appPopover--rightDown:after {
  border-right-color: #f6f6f6; }
.appPopover--withHeader.appPopover--leftDown:after {
  border-left-color: #f6f6f6; }
.appPopover--withHeader.appPopover--bottomLeft:after, .appPopover--withHeader.appPopover--bottomRight:after {
  border-bottom-color: #f6f6f6; }

/**
 * 1. Absolutely position the popover.
 * 2. Shrink-wrap.
 */
.appPopoverContainer {
  position: relative;
  /* [1] */
  display: inline-block;
  /* [2] */ }

/**
 * 1. Blue spinner.
 */
.appSpinner {
  width: 1.42857rem;
  height: 1.42857rem;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjM1MEExNzMwMDgwMTFFNDg0ODY5RDMxMUUyNkU2ODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjM1MEExNzQwMDgwMTFFNDg0ODY5RDMxMUUyNkU2ODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MzUwQTE3MTAwODAxMUU0ODQ4NjlEMzExRTI2RTY4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MzUwQTE3MjAwODAxMUU0ODQ4NjlEMzExRTI2RTY4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqJxA68AAAsMSURBVHja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);
  -webkit-animation: appSpinnerAnimation 2s infinite linear;
  -moz-animation: appSpinnerAnimation 2s infinite linear;
  -ms-animation: appSpinnerAnimation 2s infinite linear;
  -o-animation: appSpinnerAnimation 2s infinite linear;
  animation: appSpinnerAnimation 2s infinite linear; }

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

.appSpinner--light {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYjViMzM1OS1kYTgzLTQ0OGEtOWY0ZS0xMTM2OWNkYWM2ZGYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDU0MURGRjAwNTVEMTFFNDhBRjRBNDhFNUVBNTNCOTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDU0MURGRUYwNTVEMTFFNDhBRjRBNDhFNUVBNTNCOTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M2I1YjMzNTktZGE4My00NDhhLTlmNGUtMTEzNjljZGFjNmRmIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNiNWIzMzU5LWRhODMtNDQ4YS05ZjRlLTExMzY5Y2RhYzZkZiIvPiA8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); }

.appSpinner--dark {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYjViMzM1OS1kYTgzLTQ0OGEtOWY0ZS0xMTM2OWNkYWM2ZGYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTlENkQ3OTcwNTYxMTFFNDhBRjRBNDhFNUVBNTNCOTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTlENkQ3OTYwNTYxMTFFNDhBRjRBNDhFNUVBNTNCOTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M2I1YjMzNTktZGE4My00NDhhLTlmNGUtMTEzNjljZGFjNmRmIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNiNWIzMzU5LWRhODMtNDQ4YS05ZjRlLTExMzY5Y2RhYzZkZiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsRCbp0AAAq2SURBVHja7F17jFxVGf9mZ/bZcfuCtpYqIBXcxlLbAkFFqAEjiBqFGkw0/mGK+IePxKhRVIx/GOPrD40YMSJIfEWiaAwG8JFIxYBg0RZatTZCodCSvna7u9Ptzu71+3W+2z1z93zn3pm5d3Ye55f8MtvtzO7d73e/1znnnpNbO7KR2gRnMc8XrmIuF/Yyb5H35JTPBq36R+3dvaPq34UWvc6lzNcLL2GuFxFMo5uvt0Q+n1NegVkRqCVFaiVBLmLewLyWealxbbkUfwd+Vt74mYEINNsqAhVawBPey7yJeXkGAsShR5gTUWaEXScIwtDHmW9n9otBgiaLEQ1vecN7ysLZThfkSubnmFc4vCHIWKBcAk8sSLEAbznVTGGaJcgG5peZV9VhbJtAJea48HgKAmifKQghzFQzhMlaEOSILzE/IOEgzthRoaaZTzL/xtzFfJr5LPNQTHkbRIwbZZJqzOYxU+IxQTsK8m7m15grFKNrXrKf+Rvmg8xHxBsaga3EDZN53nINLpGQ7/rkmsrtIsgg8xvM9yXMC/jeCea9zB+LN2RdgoalblmEKSi2sIkDFsVbSq0uyAjzB8x1MXki/L99zO8wfyr5YCEwK2Fo2ghNPQnyy4C8dzzN3JKmIOglvskcSpAnnmF+hfmLha77I9c5LeyV8BSXX2C/xSLKdKsIggu9lfmJBMkaLv5V8YpT1LqYlnDWZ/RJmjj4epg5wTy50IIgKX5bvCOISd73Mz/NfJ7aA4HkibLkxUJM0i9KqJtcKEFw93yfeX2MGOPSld9H7YkZ+Rv6jXCsibJIRBlvtiDwjDuYb4sRYydzmyTvdseUiFOM9DPR11C0ukTpqTNnfMsQg5TXH1Jl5LYTxAiB8DVqJHCXpxSbJchnmVsdYuCiv8D8lNxVnYawbzqZIKcMZR2yMFT+UaVxy8md8xHmr6jzMSF2WKSEMJLqq1xLRVmLh1wsvUOgeAd+6c1dIkaISRFG6+jBZWQfx2tIkGGpqPoUMWbEM+6n7sOkJHBNlLyIkqog8Iw1jrzxeeavqXsxIcJo+aRfbupUBHmnUBPjbuZd5DEmRYwmymKJMA0JEs5n2MQAH2Pe5rU4g+MSvjVRllPMRFmcIJ8x4l8Q4THmhymlQbUOAUZ9j1oSe/jv3rjQ1RNTVb0nIobpJegzDnkN5mFawlc0uYdfL3ZVXS5BbjWGQKKhCtXUA972Kk5IG2Arg3skFdQkyJuYlyl5Y0LyiocbR0kf8ypK+EosyMeUvAFgHOtFb+9EoesE2RdYwO5LkgqCRWyblFD1DPNOb+uaqq5AyScvI8vQlU2QbYoYwO2U0WqLDq66Ri2hK+SSOEFWMrdYQhX4fJd34400jAHZ14cNv3rdppxLkK3yPZt33OF7jrq9ZEzxkjxF5k16LMMkgSWhIzn90tu2bowqjWIu2iiagmAt1bkWMYDfUQorKroYZZobpo+KsojDVt4myDWKGIHPHak1i6SUwEWbIFcqyfw55hPeng1jwpHc5wmCAcQRxTseoBZ+aLLNkvuk4iVFDltVgmxSOnNwu7dlql5i8xDkkAFTkI2Kd2Dp5w5vx9QFIYsop1eoFIwKyxaWdvneI1WEa4Z7af5E1aDpIRcqwyU7vQ1Tx0nFS84IslKyvK0h/Je3X2aCREUZQGJHyFpN1etxTezz9ksdU2R/jA6JvReCrDE8I4oD3n6p4xTpCx36CtKDBMr4y7i3XyaJXRPktIcsVQQ55m2XCcpGmIoiD0EWKYIc97bLtGsvaB4yqAhS8nbLDNoTyrkC6XtHTXm7NV2QfMFRYXlkh5yW2F0e0uvtlhnyiiCzBckVNkEGvN0yQw/ZtxgJIMiYEraGvd0yQ3RwMcwpMwWaW8wVFWWJt1tmYvQoCb6M/zhM9pHeuh/t9XCin/SFc9MQ5EWyzxSCq739UscA2WcNwZMQ5IBDkPO9/VLHkCLG7N7dO057yBGqDCTawtYF3n6po6iEqxIZyeW/ioes8/ZLHcOKh0yaguxRBLnQN4ipYjCS1E2Om4LsUgSBGBu8HVPDUkdCHzUFeYqqN6k3eYm3Y2pYrohRjoasUUfY2kILswV4pyHvEORoeGyF2TE+qlRaOLfjdd6eDeNsqh5UrBIkfJMpyF8c/cg13p4NY7XWf0jrMU+Q/wltgrxRKgSP+qurZY5wVbYJAvxBEQTt/nXernXjXJobco+ufD9ovjEqyENUWaZiW8V4g+9J6gJs9gqyDyjC1oddghxz5BK43Fu8fWsGxgMLSrg6wOFq1iUI8HNHT3Kj95KagK78PEcyfy76AZsgSOyPKYKskNDlkQwjNDc7GCWmPaaSCAL8jPQd5LBl00pv61ggxK8hfTMz60J2TZD/MP9O+vjWzd7eTsCuG0gft0KoKtUiCHCnjLHYRNlMlS2cPOzAKLk2zF6WG55qFQRnPT1oKX/D0PUhGQ7wmD9EcpHSc+B1Lzk2Vo7bc/FH0tbb+hJMRX7SV11VQAN9aaQJNPuOMSmaqF5BMCT8PbI/oRtO8W7zOpwx+mUyTGIbQIS9/kExy3aT7NuLEviPpA88vpn5Lq/H6UfLV5B+TN+/SSahGhUEwEFfByLeYX59kwjTrcBp1mtJ34n0iOQOSksQPDn6dXm15ZOchK5urLxeS5XFINr2S2j+HqeETxjUcjoCDny83TKsQoYoONf82i4SY7N4h7Y7A+zyKNWwtVWtB7r81ejibZ4CvF9CWCdP+8JumCN6jcMzgCfImHzKQhAAe2c9pIgRfu966VM6sSRGaXs1Va/qtImyU6JKTaj3UDCcL4WRzCsUTwHfQJVpS4S5lzpEjFXyNw9ZbkIzIjwlVVVdrlcPAulPtsd4yiuZXxRx2j1EYaHHW6nyVIDLM54WQepCI+cYzoooJXFhzVPg4h9kXk6VM28PtpkYK+SGWqbcdKZnYC3PnkaVbwS4oLupcqZtoHhKCMwN3CZNZDvklgEp499BlfVU5PAMnBnySKNiNOohJn5LlQmXbTT3bKKtq89LWQxv+T1Vpotb7fFr3CwXC3uVGywwhEGE+HNaeTLN06JR4r1AlcPBVjk8BcAZGjdKTP4T82Fq8AzZFFCUngKe3Kdcf7SUP5j2tefWjmxM+w/DH4PzDq9yjH9FidUXu6kybrabmnekNzzgAuknznF4dpS4vn9KadvQWerhEtIsPCQExvrvYT4pTeKyhJ66XoYhJqRK2SscTfn6sAIdy3IwvXoeVT+rHze8ES77RHV5OIs7JAsPMYFeBduXb5H8ETi6/IDsq10QmzFZdkiM8JIYZSaByIuFZwvPobnd81y/03Ztp+Qm29WoVzTbQ0wgYd8rSW+reAA5QoMNMORZFsNNCkuRz/dLYdHnMLorL1DkPfgsplwfb0aey1qQELirv0uVJZUYVqnlUTlNrEExfNydbhq9lj1d8PP2iRCjTbJT0wQJ8awIgyEVzJ9sssTwJF5Td4hO6NV7JGmfaHap12xBQqA8/glVDjLGE1qbZZhloQDh94sQ8IoFO0WoQAuLklQs26X6WS8l6KuohhOW68SkiLBfRGiJDdsK1Do4Jk3Ww9IfhGUpKqOXk+Psv4T54IjkshckdB6hFkSBWhNoFMMHiMxrXSpE6TpEc9tU9IvRp6QcLtHcsdrYXGesic1mQ/i/AAMAT1B6hGrlpy4AAAAASUVORK5CYII=); }

.appSpinner--centered {
  margin-left: -0.71429rem;
  margin-top: -0.71429rem; }
  .appSpinner--centered.appSpinner--small {
    margin-left: -0.5rem;
    margin-top: -0.5rem; }
  .appSpinner--centered.appSpinner--large {
    margin-left: -3.57143rem;
    margin-top: -3.57143rem; }
  .appSpinner--centered.appSpinner--medium {
    margin-left: -1.78571rem;
    margin-top: -1.78571rem; }

.appSpinner--small {
  width: 1rem;
  height: 1rem; }

.appSpinner--large {
  width: 7.14286rem;
  height: 7.14286rem; }

.appSpinner--medium {
  width: 3.57143rem;
  height: 3.57143rem; }

@-moz-keyframes appSpinnerAnimation {
  0% {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes appSpinnerAnimation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-o-keyframes appSpinnerAnimation {
  0% {
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-ms-keyframes appSpinnerAnimation {
  0% {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }

  100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes appSpinnerAnimation {
  0% {
    transform: rotate(0deg); }

  100% {
    transform: rotate(360deg); } }

.appStatusBall {
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.13); }

.appStatusBall--offline {
  background-color: #cccccc; }

.appStatusBall--dark {
  background-color: #616770; }

.appStatusBall--positive {
  background-color: #13bb72; }

.appStatusBall--warning {
  background-color: #f09300; }

.appStatusBall--danger {
  background-color: #ff3516; }

/**
 * Busy state for status ball.
 */
@-moz-keyframes appStatusBallBusyAnimation {
  0% {
    background-color: #00a0df; }

  100% {
    background-color: rgba(0, 160, 223, 0); } }

@-webkit-keyframes appStatusBallBusyAnimation {
  0% {
    background-color: #00a0df; }

  100% {
    background-color: rgba(0, 160, 223, 0); } }

@-o-keyframes appStatusBallBusyAnimation {
  0% {
    background-color: #00a0df; }

  100% {
    background-color: rgba(0, 160, 223, 0); } }

@-ms-keyframes appStatusBallBusyAnimation {
  0% {
    background-color: #00a0df; }

  100% {
    background-color: rgba(0, 160, 223, 0); } }

@keyframes appStatusBallBusyAnimation {
  0% {
    background-color: #00a0df; }

  100% {
    background-color: rgba(0, 160, 223, 0); } }

/*
 * 1. Since we can't use !important in our animation we make our state more
 *    specific this way.
 */
.appStatusBall.is-status-ball-busy {
  -webkit-animation: appStatusBallBusyAnimation 0.5s alternate infinite;
  -moz-animation: appStatusBallBusyAnimation 0.5s alternate infinite;
  -ms-animation: appStatusBallBusyAnimation 0.5s alternate infinite;
  -o-animation: appStatusBallBusyAnimation 0.5s alternate infinite;
  animation: appStatusBallBusyAnimation 0.5s alternate infinite; }

.appStatusBallLabel {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.57143rem; }

/**
 * 1. Ensure this element appears correctly in a fake table.
 * 2. Background color is semi-transparent so the appStatusBar stands out
 *    against different shades of gray.
 */
.appStatusBar {
  display: inline-block;
  /* [1] */
  vertical-align: middle;
  /* [1] */
  width: 100%;
  /* [1] */
  background-color: rgba(0, 0, 0, 0.1);
  /* [2] */
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  -ms-border-radius: 1em;
  -o-border-radius: 1em;
  border-radius: 1em;
  /* [1] */ }

/**
 * 1. Background color is semi-transparent so the appStatusBar stands out
 *    against different shades of gray.
 */
.appStatusBar--dark {
  background-color: rgba(255, 255, 255, 0.1);
  /* [1] */ }

.appStatusBar--small {
  box-shadow: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none; }
  .appStatusBar--small .statusBar__inner {
    height: 0.21429rem;
    box-shadow: none;
    min-width: 0;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    -ms-border-radius: none;
    -o-border-radius: none;
    border-radius: none; }

/**
 * 1. Speed up animations by entering GPU mode.
 * 2. Minimum width should be 1em, which renders as a circle.
 */
.statusBar__inner {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
  height: 1em;
  min-width: 1em;
  /* [2] */
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  -ms-border-radius: 1em;
  -o-border-radius: 1em;
  border-radius: 1em;
  /* [2] */ }
  .appStatusBar .statusBar__inner {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    /* [1] */
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-transition-duration: 0.4s, 0.2s;
    -moz-transition-duration: 0.4s, 0.2s;
    -o-transition-duration: 0.4s, 0.2s;
    transition-duration: 0.4s, 0.2s; }
  .appStatusBar.is-status-bar-muted .statusBar__inner {
    background-color: #c6c6c6; }
  .appStatusBar--low .statusBar__inner {
    background-color: #ff3516; }
  .appStatusBar--medium .statusBar__inner {
    background-color: #f09300; }
  .appStatusBar--high .statusBar__inner {
    background-color: #13bb72; }

.appTableCell--truncated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/**
 * Disabled state for table row.
 */
.appTable--light .is-row-disabled {
  color: rgba(0, 0, 0, 0.5); }
.appTable--dark .is-row-disabled {
  color: #70757e; }

/**
 * 1. is-row-disabled only applies a disabled appearance, so we need to provide
 *    an additional state for making it non-interactive.
 */
.is-row-inactive {
  pointer-events: none; }

.appTable--light .is-row-selected {
  background-color: #b3dff7; }
.appTable--dark .is-row-selected {
  color: #d7d9dc;
  background-color: #003e58; }

/**
 * 1. Highlight row on hover, unless it's selected. Make it important so it
 *    overrides the striped background color.
 */
.appTable--hoverable .tbody .tr:hover:not(.is-row-selected),
.appTable--hoverable .tbody tr:hover:not(.is-row-selected),
.appTable--hoverable tbody .tr:hover:not(.is-row-selected),
.appTable--hoverable tbody tr:hover:not(.is-row-selected) {
  background-color: #e9f0f4 !important;
  /* [1] */ }
.appTable--hoverable.appTable--dark .tbody .tr:hover:not(.is-row-selected),
.appTable--hoverable.appTable--dark .tbody tr:hover:not(.is-row-selected),
.appTable--hoverable.appTable--dark tbody .tr:hover:not(.is-row-selected),
.appTable--hoverable.appTable--dark tbody tr:hover:not(.is-row-selected) {
  background-color: #272b30 !important;
  color: #b7bbbe; }

/**
 * 1. Keep table columns aligned with headers.
 * 2. Don't allow cells to push tbody wider than table width.
 */
.appTable {
  table-layout: fixed;
  /**
   * 1. Text in headers looks weird when it wraps. Instead, it should just push
   *    the column wider.
   */ }
  .appTable .thead,
  .appTable thead {
    border-bottom: 4px solid black; }
  .appTable .thead .th,
  .appTable thead th {
    white-space: nowrap;
    /* [1] */ }
  .appTable .thead .th,
  .appTable .tfoot .td,
  .appTable thead th,
  .appTable tfoot td {
    text-transform: uppercase;
    font-size: 0.78571rem;
    letter-spacing: 0.07143em;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .appTable .tbody,
  .appTable tbody {
    line-height: 1.25;
    /**
     * 1. Set width and height of scrollbar for webkit browsers.
     */
    /**
     * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
     *    to be thinner.
     * 2. Clip the background to the content-box, instead of the border-box.
     *    This allows the border style (1) to have a visual effect.
     */
    /**
     * 1. We don't want to see the background of the scrollbar.
     */ }
    .appTable .tbody::-webkit-scrollbar,
    .appTable tbody::-webkit-scrollbar {
      width: 12px;
      /* [1] */
      height: 12px;
      /* [1] */ }
    .appTable .tbody::-webkit-scrollbar-thumb,
    .appTable tbody::-webkit-scrollbar-thumb {
      background-color: #898989;
      border: 4px solid transparent;
      /* [1] */
      background-clip: content-box;
      /* [2] */
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border-radius: 10px; }
    .appTable .tbody::-webkit-scrollbar-track,
    .appTable tbody::-webkit-scrollbar-track {
      background-color: transparent;
      /* [1] */ }
  .appTable .tbody .td,
  .appTable tbody td {
    word-break: break-word; }
  .appTable .th,
  .appTable .td,
  .appTable th,
  .appTable td {
    text-align: left;
    padding: 0 12px; }
  .appTable .th,
  .appTable th {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    /**
     * 1. Prevent the header from being selected when the user clicks it.
     */ }
    .appTable .th.is-column-sorted,
    .appTable th.is-column-sorted {
      color: #00a0df; }
    .appTable .th.is-column-sortable,
    .appTable th.is-column-sortable {
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      /* [1] */ }
      .appTable .th.is-column-sortable:hover,
      .appTable th.is-column-sortable:hover {
        color: #aaaaaa; }
  .appTable .td,
  .appTable td {
    padding-top: 0.64286rem;
    padding-bottom: 0.64286rem; }
  .appTable,
  .appTable .th,
  .appTable .td,
  .appTable th,
  .appTable td {
    border-width: 0;
    border-style: solid; }
  .appTable .tbody .td,
  .appTable tbody td {
    border-bottom-width: 1px; }
  .appTable .tr:last-child .td,
  .appTable tr:last-child td {
    border-bottom-width: 0px; }

.appTable--condensed {
  font-size: 11px;
  /**
   * 1. Override inherited fixed height.
   */ }
  .appTable--condensed .thead .th,
  .appTable--condensed .tfoot .td,
  .appTable--condensed thead th,
  .appTable--condensed tfoot td {
    font-size: 9px; }
  .appTable--condensed .th,
  .appTable--condensed th {
    padding-top: 4px;
    padding-bottom: 4px; }
  .appTable--condensed .td,
  .appTable--condensed td {
    padding-top: 4px;
    padding-bottom: 4px; }
  .appTable--condensed.table--scrollable .thead,
  .appTable--condensed.table--scrollable thead {
    height: auto;
    /* [1] */ }
  .appTable--condensed.table--scrollable .thead + .tbody,
  .appTable--condensed.table--scrollable thead + tbody {
    margin-top: 21px;
    /* [1] */ }
  .appTable--condensed.appTable--fullScrollable .tbody,
  .appTable--condensed.appTable--fullScrollable tbody {
    height: calc(100% - 21px);
    /* [3] */ }
  .appTable--condensed.appTable--fullScrollable .thead,
  .appTable--condensed.appTable--fullScrollable thead {
    height: 21px !important; }
  .appTable--condensed .appStatusBall {
    width: 10px !important;
    height: 10px !important; }

/**
 * 1. Darken every other row, unless the row is selected.
 * 2. Remove redundant border.
 */
.appTable--striped .tbody .tr:nth-child(even):not(.is-row-selected),
.appTable--striped .tbody tr:nth-child(even):not(.is-row-selected),
.appTable--striped tbody .tr:nth-child(even):not(.is-row-selected),
.appTable--striped tbody tr:nth-child(even):not(.is-row-selected) {
  background-color: #fafafa;
  /* [1] */ }
.appTable--striped .tbody .td,
.appTable--striped .tbody td,
.appTable--striped tbody .td,
.appTable--striped tbody td {
  border: none;
  /* [2] */ }
.appTable--striped.appTable--dark .tbody .tr:nth-child(even):not(.is-row-selected),
.appTable--striped.appTable--dark .tbody tr:nth-child(even):not(.is-row-selected),
.appTable--striped.appTable--dark tbody .tr:nth-child(even):not(.is-row-selected),
.appTable--striped.appTable--dark tbody tr:nth-child(even):not(.is-row-selected) {
  background-color: #1A1C1F;
  /* [1] */ }
.appTable--striped.appTable--dark .tbody .td,
.appTable--striped.appTable--dark .tbody td,
.appTable--striped.appTable--dark tbody .td,
.appTable--striped.appTable--dark tbody td {
  border: none;
  /* [2] */ }

.appTable--noLines .td,
.appTable--noLines td {
  border: none; }

/**
 * 1. When the table fills its container, it should have extra padding on
 *    each side.
 */
.appTable--full .th:first-child,
.appTable--full .td:first-child,
.appTable--full th:first-child,
.appTable--full td:first-child {
  padding-left: 24px;
  /* [1] */ }
.appTable--full .th:last-child,
.appTable--full .td:last-child,
.appTable--full th:last-child,
.appTable--full td:last-child {
  padding-right: 24px;
  /* [1] */ }

.appTable--cozy {
  font-size: 0.85714rem;
  /**
   * 1. Override inherited fixed height.
   */ }
  .appTable--cozy .thead .th,
  .appTable--cozy .tfoot .td,
  .appTable--cozy thead th,
  .appTable--cozy tfoot td {
    font-size: 0.64286rem; }
  .appTable--cozy .th,
  .appTable--cozy th {
    padding-top: 0.35714rem;
    padding-bottom: 0.35714rem; }
  .appTable--cozy .td,
  .appTable--cozy td {
    padding-top: 0.35714rem;
    padding-bottom: 0.35714rem; }
  .appTable--cozy.table--scrollable .thead,
  .appTable--cozy.table--scrollable thead {
    height: auto;
    /* [1] */ }
  .appTable--cozy.table--scrollable .thead + .tbody,
  .appTable--cozy.table--scrollable thead + tbody {
    margin-top: 21px;
    /* [1] */ }

.appTable--fixed {
  table-layout: fixed; }

.appTable--light {
  color: black;
  background-color: white;
  /**
   * 1. Fix bug that was causing the last cell to have a visible border.
   */ }
  .appTable--light .th:last-child,
  .appTable--light th:last-child {
    border-right: 1px solid white;
    /* [1] */ }
  .appTable--light .td,
  .appTable--light td {
    border-color: #dddddd; }

.appTable--dark {
  color: #a7acb0;
  background-color: transparent;
  /**
   * 1. Fix bug that was causing the last cell to have a visible border.
   */ }
  .appTable--dark .thead,
  .appTable--dark thead {
    border-bottom: 4px solid #454d51; }
  .appTable--dark .th:last-child,
  .appTable--dark th:last-child {
    border-right: 1px solid transparent;
    /* [1] */ }
  .appTable--dark .th.is-column-sorted,
  .appTable--dark th.is-column-sorted {
    color: #60c4ff; }
  .appTable--dark .th.is-column-sortable:hover,
  .appTable--dark th.is-column-sortable:hover {
    color: #a8dfff; }
  .appTable--dark .td,
  .appTable--dark td {
    border-color: #454d51; }
  .appTable--dark .tbody,
  .appTable--dark tbody {
    /**
     * 1. Set width and height of scrollbar for webkit browsers.
     */
    /**
     * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
     *    to be thinner.
     * 2. Clip the background to the content-box, instead of the border-box.
     *    This allows the border style (1) to have a visual effect.
     */
    /**
     * 1. We don't want to see the background of the scrollbar.
     */ }
    .appTable--dark .tbody::-webkit-scrollbar,
    .appTable--dark tbody::-webkit-scrollbar {
      width: 12px;
      /* [1] */
      height: 12px;
      /* [1] */ }
    .appTable--dark .tbody::-webkit-scrollbar-thumb,
    .appTable--dark tbody::-webkit-scrollbar-thumb {
      background-color: #aaaaaa;
      border: 4px solid transparent;
      /* [1] */
      background-clip: content-box;
      /* [2] */
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      border-radius: 10px; }
    .appTable--dark .tbody::-webkit-scrollbar-track,
    .appTable--dark tbody::-webkit-scrollbar-track {
      background-color: transparent;
      /* [1] */ }
  .appTable--dark.appTable--topBorder {
    border-top: 1px solid #272b30; }
  .appTable--dark.appTable--bottomBorder {
    border-bottom: 1px solid #272b30; }

.appTable--standalone.appTable--light .tbody,
.appTable--standalone.appTable--light tbody {
  border-bottom: 4px solid black; }
.appTable--standalone.appTable--dark .tbody,
.appTable--standalone.appTable--dark tbody {
  border-bottom: 4px solid #454d51; }

/**
 * 1. We don't want the flow of the header's content to change when the arrow
 *    is shown on hover or click.
 */
.appTable__sortArrow {
  display: inline-block;
  margin-left: 0.35714rem;
  visibility: hidden;
  /* [1] */ }
  .is-column-sorted .appTable__sortArrow, .is-column-sortable:hover .appTable__sortArrow {
    visibility: visible;
    /* [1] */ }

/**
 * DEPRECATED 1/21/15
 */
.appTable--dark .appTable__text--loud {
  color: white; }

.appTable__image {
  height: 2.14286rem;
  width: auto;
  vertical-align: middle; }

/**
 * 1. Fix display bugs with Firefox.
 * 2. Make sure scrollbar doens't overlap header on IE 11.
 * 3. Muscle layout into place.
 * 4. Make sure columns stay aligned.
 * 5. Use !important to override table--scrollable styles.
 */
.appTable--fullScrollable {
  display: block;
  /* [1] */
  height: 100%; }
  .appTable--fullScrollable .thead,
  .appTable--fullScrollable thead {
    position: static;
    /* [2] */
    height: 43px !important; }
  .appTable--fullScrollable .tbody,
  .appTable--fullScrollable tbody {
    margin-top: 0 !important;
    /* [2] */
    height: calc(100% - 43px);
    /* [3] */ }
  .appTable--fullScrollable.appTable--cozy .tbody,
  .appTable--fullScrollable.appTable--cozy tbody {
    height: calc(100% - 21px);
    /* [3] */ }
  .appTable--fullScrollable.appTable--cozy .thead,
  .appTable--fullScrollable.appTable--cozy thead {
    height: 21px !important; }
  .appTable--fullScrollable .tr,
  .appTable--fullScrollable tr {
    table-layout: fixed;
    /* [4] */ }

.appTableViewContainer {
  position: relative;
  width: 100%; }

.appTableView {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; }

.appSubtabs {
  margin: 0;
  /* [1] */
  padding: 0;
  /* [1] */
  list-style: none;
  /* [2] */
  width: 100%;
  /* [3] */
  text-align: center;
  font-size: 0;
  /* [4] */
  background-color: white;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-top-width: 1px;
  border-top-style: solid;
  color: #616770;
  border-top-color: #c4c4c4;
  border-bottom-color: #c4c4c4;
  /*
   * 1. Override inherited fixed width, and allow tabs to grow wider if
   *    necessary.
   * 2. Create transitions for our font.
   */ }
  .appSubtabs .tabs__item {
    /**
     * This is the selected state for a single tab item.
     *
     * 1. Override children styles
     */
    /**
     * This is the disabled state for a single tab item.
     *
     * 1. Override children styles
     */ }
    .appSubtabs .tabs__item:hover {
      color: #878d97; }
    .appSubtabs .tabs__item.is-tab-selected {
      color: #00a0df; }
      .appSubtabs .tabs__item.is-tab-selected .icon {
        color: #00a0df; }
    .appSubtabs .tabs__item.is-tab-disabled {
      color: rgba(97, 103, 112, 0.25); }
  .appSubtabs .tabs__item {
    font-size: 0.78571rem;
    padding: 1.64286rem 0.57143rem 1.42857rem;
    position: relative;
    line-height: 0;
    width: auto;
    /* [1] */
    min-width: 100px;
    /* [1] */
    -webkit-transition: color 0.2s ease-out;
    -moz-transition: color 0.2s ease-out;
    -o-transition: color 0.2s ease-out;
    transition: color 0.2s ease-out;
    /* [2] */ }
    .appSubtabs .tabs__item .icon {
      font-size: 1.07143rem;
      vertical-align: middle;
      margin-right: 0.42857rem;
      line-height: 0; }
    .appSubtabs .tabs__item.is-tab-selected {
      /**
       * 1. Center arrow horizontally.
      */
      /**
       * 1. Stick the bottom out a little father than the top to make up for
       *    browser antialising.
       */
      /**
       * 1. Stick the bottom out a little father than the top to make up for
       *    browser antialising.
       * 2. Dim the bottom arrow a bit because it's just a little too prominent.
       */ }
      .appSubtabs .tabs__item.is-tab-selected:before, .appSubtabs .tabs__item.is-tab-selected:after {
        position: absolute;
        width: 0;
        height: 0;
        display: block;
        content: " ";
        border-color: transparent;
        pointer-events: none;
        border-width: 0.5rem;
        left: 50%;
        /* [1] */
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        /* [1] */
        border-style: solid solid outset; }
      .appSubtabs .tabs__item.is-tab-selected:after {
        bottom: -0.85714rem;
        /* [1] */
        border-top-color: white; }
      .appSubtabs .tabs__item.is-tab-selected:before {
        bottom: -1rem;
        /* [1] */
        border-top-color: rgba(196, 196, 196, 0.75);
        /* [1] */ }

.appSubtabs--dark {
  background-color: #242931;
  color: #aabbbb;
  border-top-color: #515151;
  border-bottom-color: #515151; }
  .appSubtabs--dark .tabs__item {
    /**
     * This is the selected state for a single tab item.
     *
     * 1. Override children styles
     */
    /**
     * This is the disabled state for a single tab item.
     *
     * 1. Override children styles
     */ }
    .appSubtabs--dark .tabs__item:hover {
      color: #d5dddd; }
    .appSubtabs--dark .tabs__item.is-tab-selected {
      color: white; }
      .appSubtabs--dark .tabs__item.is-tab-selected .icon {
        color: #13bcff; }
    .appSubtabs--dark .tabs__item.is-tab-disabled {
      color: rgba(170, 187, 187, 0.25); }
  .appSubtabs--dark .tabs__item.is-tab-selected {
    /**
     * 1. Dim the bottom arrow a bit because it's just a little too prominent.
     */ }
    .appSubtabs--dark .tabs__item.is-tab-selected:after {
      border-top-color: #242931; }
    .appSubtabs--dark .tabs__item.is-tab-selected:before {
      border-top-color: rgba(81, 81, 81, 0.75);
      /* [1] */ }

.appTabs {
  margin: 0;
  /* [1] */
  padding: 0;
  /* [1] */
  list-style: none;
  /* [2] */
  width: 100%;
  /* [3] */
  text-align: center;
  font-size: 0;
  /* [4] */
  text-transform: uppercase;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  color: #616770;
  border-bottom-color: #c4c4c4;
  /**
   * 1. Set the border as transparent so we can transition it later.
   * 2. Create transitions for our font and border color, match the timing
   *    used for our links.
   * 3. Override inherited fixed width, and allow tabs to grow wider if
   *    necessary.
   */ }
  .appTabs .tabs__item {
    /**
     * This is the selected state for a single tab item.
     *
     * 1. Override children styles
     */
    /**
     * This is the disabled state for a single tab item.
     *
     * 1. Override children styles
     */ }
    .appTabs .tabs__item:hover {
      color: #878d97; }
    .appTabs .tabs__item.is-tab-selected {
      color: #00a0df;
      border-bottom-color: #00a0df; }
    .appTabs .tabs__item.is-tab-disabled {
      color: rgba(97, 103, 112, 0.25); }
  .appTabs .tabs__item {
    font-size: 0.85714rem;
    border-bottom: 3px solid transparent;
    /* [1] */
    padding: 1.14286rem;
    width: auto;
    /* [1] */
    min-width: 100px;
    /* [1] */
    -webkit-transition: color 0.2s ease-out, border-bottom-color 0.2s ease-out;
    -moz-transition: color 0.2s ease-out, border-bottom-color 0.2s ease-out;
    -o-transition: color 0.2s ease-out, border-bottom-color 0.2s ease-out;
    transition: color 0.2s ease-out, border-bottom-color 0.2s ease-out;
    /* [2] */ }

.appTabs--dark {
  color: #aabbbb;
  border-bottom-color: #515151; }
  .appTabs--dark .tabs__item {
    /**
     * This is the selected state for a single tab item.
     *
     * 1. Override children styles
     */
    /**
     * This is the disabled state for a single tab item.
     *
     * 1. Override children styles
     */ }
    .appTabs--dark .tabs__item:hover {
      color: #d5dddd; }
    .appTabs--dark .tabs__item.is-tab-selected {
      color: white;
      border-bottom-color: #00a0df; }
    .appTabs--dark .tabs__item.is-tab-disabled {
      color: rgba(170, 187, 187, 0.25); }

/**
 * 1. Prevent text from wrapping.
 */
.appTabs--cozy .tabs__item {
  padding: 0.64286rem 0.57143rem 0.5rem;
  width: auto;
  /* [1] */ }

.appTag {
  background-color: #f6f6f6;
  border: 1px solid #dddddd;
  color: #616770;
  padding: 0.3em 0.8em 0.4em;
  font-size: 1em;
  margin-bottom: 0.85714rem;
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  -ms-border-radius: 10em;
  -o-border-radius: 10em;
  border-radius: 10em; }
  .appTag + .appTag {
    margin-left: 1ex; }

/**
 * 1. ubnt-icon--x
 */
.appTag__close {
  font-family: 'ubnt';
  display: inline-block;
  color: #00a0df;
  font-size: 0.6em;
  margin-left: 0.8em;
  cursor: pointer; }
  .appTag__close:before {
    content: "\e6cc";
    /* [1] */ }
  .appTag__close:hover {
    color: #13bcff; }

/**
 * A container element for app tags.
 */
.appTags {
  margin-bottom: 24px; }

/**
 * A text only button. Resets all button styles. Overrides OK in the case.
 */
.appTextButton {
  display: inline;
  color: #00a0df;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }
  .appTextButton:hover {
    color: #13bcff; }

/**
 * 1. Position at top of screen, full-width.
 * 2. Display higher than other elements.
 * 3. Don't block user interaction with elements below.
 * 4. Center the toasts.
 * 5. Stack them vertically.
 * 6. Align to the right.
 * 7. Position below the global header.
 */
.appToastContainer {
  position: fixed;
  /* 1 */
  top: 0;
  /* 1 */
  left: 0;
  /* 1 */
  right: 0;
  /* 1 */
  z-index: 140;
  /* 2 */
  pointer-events: none;
  /* 3 */
  padding: 58px 10px 0;
  /* 7 */
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  /* 4 */
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  /* [1] */
  /* 4 */
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  /* 5 */
  -webkit-align-items: flex-end;
  -ms-align-items: flex-end;
  -ms-flex-align: flex-end;
  /* [1] */
  align-items: flex-end;
  /* 6 */ }

/**
 * 1. Relatively position the close button.
 * 2. The container has no pointer-events, so we need to re-enable them.
 */
.appToast {
  background-color: #111111;
  color: #a7acb0;
  border: 1px solid #454d51;
  padding: 10px;
  border-radius: 3px;
  position: relative;
  /* [1] */
  box-shadow: 0 0.71429rem 2.5rem rgba(0, 0, 0, 0.5);
  width: 380px;
  pointer-events: auto;
  /* [2] */ }
  .appToast + .appToast {
    margin-top: 0.35714rem; }

/**
 * 1. Make sure the content doesn't overlap the close button.
 */
.appToast__close {
  position: absolute;
  font-size: 10px;
  /* 1 */
  top: 5px;
  /* 1 */
  right: 5px;
  /* 1 */ }

.appToast__header {
  color: white;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px; }

/**
* 1. Position icon so it is more visually aligned with the header.
* 2. Primary by default.
*/
.appToast__icon {
  position: relative;
  /* [1] */
  color: #00a0df;
  /* [2] */
  font-size: 16px;
  width: 28px;
  top: -2px; }

/**
 * 1. Make sure the content doesn't overlap the close button.
 */
.appToast__content {
  padding-right: 10px;
  /* 1 */ }
  .appToast__content p {
    font-size: 12px;
    margin-bottom: 8px; }

/**
 * 1. If there is no header, the body needs to be moved upwards to align with
 *    the icon.
 */
.appToast__body {
  margin-top: -3px;
  /* 1 */ }
  .appToast__header + .appToast__body {
    margin-top: 10px;
    /* 1 */ }

/**
 * 1. If there is a header, we don't need to push down the body.
 */
.appToast__header +
.appToast__body {
  margin-top: 0;
  /* [1] */ }

.appToast--success .appToast__icon {
  color: #13bb72; }

.appToast--warning .appToast__icon {
  color: #f09300; }

.appToast--danger .appToast__icon {
  color: #ff3516; }

.appToast--default .appToast__icon {
  color: white; }

/**
 * Position the tooltip horizontally.
 *
 * 1. The position is a percentage, based on the width of the tooltip.
 * 2. Move the tooltip so that its left edge is aligned with the center of the
 *    container.
 * 3. Move the tooltip backwards by the percentage amount.
 * 4. Move the arrow forwards by the percentage amount, but offset so that it is
 *    centered over the container's center.
 */
/**
 * 1. Tooltip is a child of this element, and it's absolutely positioned.
 * 2. Since we expect this to encapsulate the "prompt", we should shrink-wrap
 *    to its dimensions.
 */
.appTooltipContainer {
  position: relative;
  /* [1] */
  display: inline-block;
  /* [2] */ }

/*
 * 1. Reveal tooltip on hover.
 */
.appTooltipContainer--hoverable .appTooltip {
  display: none;
  /* [1] */ }
.appTooltipContainer--hoverable:hover .appTooltip {
  display: block;
  /* [1] */ }

/**
 * 1. If we vertically-align to the middle then it looks weird when next to
 *    a blank form label.
 * 2. Retain appearance despite inherited font-size.
 */
.appTooltipContainer--prompt {
  vertical-align: top;
  /* [1] */
  width: 1.14286rem;
  height: 1.14286rem;
  background-color: #00a0df;
  color: white;
  text-align: center;
  padding-top: 0.07143rem;
  cursor: pointer;
  font-size: 1rem;
  /* [2] */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-border-radius: 1.14286rem;
  -moz-border-radius: 1.14286rem;
  -ms-border-radius: 1.14286rem;
  -o-border-radius: 1.14286rem;
  border-radius: 1.14286rem; }
  .appTooltipContainer--prompt:before {
    content: "?"; }

/**
 * 1. Remove spacing when in a columnar form when the input has no label.
 */
.appTooltipContainer--withBlankLabel {
  margin-left: 0 !important;
  /* [1] */ }

/**
 * 1. Override inherited styles.
 * 2. Center tooltip box over arrow.
 */
.appTooltip {
  z-index: 60;
  background-color: white;
  color: black;
  padding: 1rem 1rem;
  font-size: 1rem;
  line-height: 1.42857rem;
  width: 17.14286rem;
  border-width: 1px;
  border-style: solid;
  border-color: #bfbfbf;
  text-align: left;
  cursor: default;
  border-radius: 5px;
  text-transform: none;
  /* [1] */
  box-shadow: 0 0.71429rem 2.5rem rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: calc(100% + 14px);
  /* [2] */
  left: 50%;
  /* [2] */
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  /* [2] */ }
  .appTooltip:before, .appTooltip:after {
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    content: " ";
    border-color: transparent;
    pointer-events: none;
    border-width: 0.78571rem;
    left: calc(50% - 0.78571rem);
    border-style: solid solid outset; }
  .appTooltip:after {
    bottom: -1.42857rem;
    border-top-color: white; }
  .appTooltip:before {
    bottom: -1.57143rem;
    border-top-color: #babfc2; }

.appTooltip__header {
  font-size: 1.28571rem;
  font-weight: 400;
  margin-bottom: 10px; }

/**
 * Position tooltip box to left of arrow.
 */
.appTooltip--right,
.appTooltip--bottomRight {
  left: 0;
  /* [1] */
  -webkit-transform: translateX(-1.07143rem);
  -moz-transform: translateX(-1.07143rem);
  -ms-transform: translateX(-1.07143rem);
  -o-transform: translateX(-1.07143rem);
  transform: translateX(-1.07143rem);
  /* [1] */ }
  .appTooltip--right:before, .appTooltip--right:after,
  .appTooltip--bottomRight:before,
  .appTooltip--bottomRight:after {
    left: 0.78571rem;
    /* [1] */ }

/**
 * Position tooltip box to left of arrow.
 */
.appTooltip--left,
.appTooltip--bottomLeft {
  left: auto;
  right: 0;
  -webkit-transform: translateX(1.07143rem);
  -moz-transform: translateX(1.07143rem);
  -ms-transform: translateX(1.07143rem);
  -o-transform: translateX(1.07143rem);
  transform: translateX(1.07143rem); }
  .appTooltip--left:before, .appTooltip--left:after,
  .appTooltip--bottomLeft:before,
  .appTooltip--bottomLeft:after {
    left: auto;
    right: 0.78571rem; }

/**
 * Position tooltip box below arrow.
 */
.appTooltip--bottom,
.appTooltip--bottomLeft,
.appTooltip--bottomRight {
  top: calc(100% + 14px);
  bottom: auto; }
  .appTooltip--bottom:before, .appTooltip--bottom:after,
  .appTooltip--bottomLeft:before,
  .appTooltip--bottomLeft:after,
  .appTooltip--bottomRight:before,
  .appTooltip--bottomRight:after {
    border-style: outset solid solid; }
  .appTooltip--bottom:after,
  .appTooltip--bottomLeft:after,
  .appTooltip--bottomRight:after {
    top: -1.42857rem;
    border-top-color: transparent;
    border-bottom-color: white; }
  .appTooltip--bottom:before,
  .appTooltip--bottomLeft:before,
  .appTooltip--bottomRight:before {
    top: -1.57143rem;
    border-top-color: transparent;
    border-bottom-color: #babfc2; }

.appTooltip--wide {
  padding: 2rem 2.57143rem;
  width: 34.28571rem; }

/**
 * 1. Override default appTooltip width.
 */
.appTooltip--brief {
  text-align: center;
  width: initial;
  /* [1] */
  white-space: nowrap; }

body {
  font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400; }

h1,
.appH1,
.appAlpha {
  font-size: 2.57143rem;
  line-height: 2.85714rem;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 24px; }

h2,
.appH2,
.appBeta {
  font-size: 2rem;
  line-height: 2.28571rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 24px; }

h3,
.appH3,
.appGamma {
  font-size: 1.57143rem;
  line-height: 1.85714rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 24px; }

h4,
.appH4,
.appDelta {
  font-size: 1.28571rem;
  line-height: 1.71429rem;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 24px; }

h5,
.appH5,
.appEpsilon {
  font-size: 1rem;
  line-height: 1.28571rem;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 24px; }

h6,
.appSubHeading,
.appH6,
.appZeta {
  font-size: 0.85714rem;
  line-height: 1.14286rem;
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 24px; }

p,
.appParagraph {
  font-size: 1rem;
  line-height: 1.28571rem;
  margin-bottom: 24px; }

.appType--micro {
  font-size: 0.85714rem; }

.appType--quiet {
  color: #969ba3; }

.appSubHeading {
  text-transform: uppercase;
  color: #969ba3;
  margin-bottom: 0; }

.appSubHeading--standalone {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 3px; }

hr {
  border-style: solid;
  border-color: #c4c4c4;
  border-bottom-width: 0;
  margin-bottom: 24px; }

.warning {
  color: #f09300 !important; }

.danger {
  color: #ff3516 !important; }

.success {
  color: #13bb72 !important; }

/**
 * 1. Hide panel off-screen by default.
 * 2. Move panel into view.
 * 3. Show shadow only when the panel is open.
 */
/**
 * 1. Clip overflowing content by default. This is so that we can slide side
 *    panels out of sight without affecting the view (with scrollbars or changed
 *    dimensions).
 */
.appView {
  position: fixed;
  top: 48px;
  left: 56px;
  right: 0;
  bottom: 0;
  overflow: hidden;
  /* [1] */ }

/**
 * 1. Use flex layout to position child panels.
 */
.appView--panelLayout {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  /* [1] */
  display: flex;
  /* [1] */ }

/**
 * 1. This panel will grow to fill its parent, while respecting any side
 *    panels present.
 */
.appViewCenterPanel {
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  /* [1] */
  flex-grow: 1;
  /* [1] */ }

/**
 * 1. Light theme by default
 * 2. Don't allow side panels to shrink in narrow windows.
 */
.appViewSidePanel {
  position: relative;
  height: 100%;
  z-index: 35;
  background-color: white;
  /* [1] */
  color: black;
  /* [1] */
  overflow-y: auto;
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */
  /* [1] */
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  /* [2] */ }
  .appViewSidePanel::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .appViewSidePanel::-webkit-scrollbar-thumb {
    background-color: #898989;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .appViewSidePanel::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }

/**
 * 1. Position close button above other content.
 */
.appViewSidePanelCloseButton {
  position: absolute;
  z-index: 1;
  /* [1] */
  top: 12px;
  right: 12px;
  font-size: 12px; }

/**
 * 1. Fixes weird IE11 bug where a scrollbar appears unless there is a clearfix
 *    somewhere in the side panel.
 */
.appViewSidePanel__inner {
  height: 100%;
  *zoom: 1; }
  .appViewSidePanel__inner:before, .appViewSidePanel__inner:after {
    content: " ";
    display: table; }
  .appViewSidePanel__inner:after {
    clear: both; }

.appViewSidePanel--left {
  width: 400px;
  border-right: 1px solid #bfbfbf;
  margin-left: -400px;
  /* [1] */
  -webkit-transition: margin-left 0.3s;
  -moz-transition: margin-left 0.3s;
  -o-transition: margin-left 0.3s;
  transition: margin-left 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }
  .appViewSidePanel--left.is-view-side-panel-open {
    margin-left: 0;
    /* [2] */ }
    .appViewSidePanel--left.is-view-side-panel-open.appViewSidePanel--shadow {
      -webkit-box-shadow: 4px 0 0 rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 4px 0 0 rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.2);
      box-shadow: 4px 0 0 rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.2); }

.appViewSidePanel--right {
  width: 400px;
  border-left: 1px solid #bfbfbf;
  margin-right: -400px;
  /* [1] */
  -webkit-transition: margin-right 0.3s;
  -moz-transition: margin-right 0.3s;
  -o-transition: margin-right 0.3s;
  transition: margin-right 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }
  .appViewSidePanel--right.is-view-side-panel-open {
    margin-right: 0;
    /* [2] */ }
    .appViewSidePanel--right.is-view-side-panel-open.appViewSidePanel--shadow {
      -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, 0.1), -1px 0 1px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, 0.1), -1px 0 1px rgba(0, 0, 0, 0.2);
      box-shadow: -4px 0 0 rgba(0, 0, 0, 0.1), -1px 0 1px rgba(0, 0, 0, 0.2); }

/**
 * 1. Make menu items comfy, and match the height of the action bar, in case
 *    it's used in conjunction with a fixed action bar.
 */
.appViewSidePanel--menu .appMenu__item,
.appViewSidePanel--menuWide .appMenu__item {
  padding: 1.14286rem 1.71429rem;
  /* [1] */ }

.appViewSidePanel--menu {
  width: 180px;
  border-right: 1px solid #bfbfbf;
  -webkit-transition: margin-left 0.3s;
  -moz-transition: margin-left 0.3s;
  -o-transition: margin-left 0.3s;
  transition: margin-left 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.appViewSidePanel--menuWide {
  width: 220px;
  border-right: 1px solid #bfbfbf;
  -webkit-transition: margin-left 0.3s;
  -moz-transition: margin-left 0.3s;
  -o-transition: margin-left 0.3s;
  transition: margin-left 0.3s;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

/**
 * For testing App components against a gray background.
 */
.docAppContainer--gray {
  background-color: #f6f6f6 !important; }

/**
 * For testing App components against a dark background.
 */
.docAppContainer--dark {
  background-color: #111111 !important; }

.docAppModalScrollableContent {
  min-height: 100px;
  max-height: calc(100vh - 127px);
  /* [1] */
  overflow: auto;
  /* [2] */
  border-top: 1px solid #272b30;
  border-bottom: 1px solid #272b30;
  /**
   * 1. Set width and height of scrollbar for webkit browsers.
   */
  /**
   * 1. The border will allow us to visually "squeeze" the scrollbar-thumb
   *    to be thinner.
   * 2. Clip the background to the content-box, instead of the border-box.
   *    This allows the border style (1) to have a visual effect.
   */
  /**
   * 1. We don't want to see the background of the scrollbar.
   */ }
  .docAppModalScrollableContent::-webkit-scrollbar {
    width: 12px;
    /* [1] */
    height: 12px;
    /* [1] */ }
  .docAppModalScrollableContent::-webkit-scrollbar-thumb {
    background-color: #aaaaaa;
    border: 4px solid transparent;
    /* [1] */
    background-clip: content-box;
    /* [2] */
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px; }
  .docAppModalScrollableContent::-webkit-scrollbar-track {
    background-color: transparent;
    /* [1] */ }

.docColorDark {
  background-color: #242931;
  color: white; }

.docColorDarkStandoutBackground {
  background-color: #191c21;
  padding: 20px; }

.docColorDarkActionPrimaryBackground {
  background-color: #aaaaaa;
  padding: 20px; }

.docColorDarkActionSecondaryBackground {
  background-color: #535860;
  padding: 20px; }

.docColorDarkDefaultDisabledFont {
  color: #70757e; }

.docColorDarkContainer {
  border: 1px solid #565f63;
  padding: 20px; }

.docColorDarkHeader {
  border-bottom: 2px solid #454d51;
  margin-top: 10px;
  margin-bottom: 10px; }

.docColorDarkSection {
  border-bottom: 1px solid #515151;
  margin-top: 10px;
  margin-bottom: 10px; }

.docColorDarkItem {
  border-bottom: 1px solid #454d51;
  margin-top: 10px;
  margin-bottom: 10px; }

.docColorDarkInput {
  border: 1px solid #454d51;
  padding: 20px; }

.docColorDarkBackgroundState {
  padding: 20px; }
  .docColorDarkBackgroundState.is-example-color-state-hover {
    background-color: #2b3038; }
  .docColorDarkBackgroundState.is-example-color-state-selected {
    background-color: #454d51; }

.docColorDarkFontState.is-example-color-state-default {
  color: #aabbbb; }
.docColorDarkFontState.is-example-color-state-hover {
  color: #d5dddd; }
.docColorDarkFontState.is-example-color-state-selected {
  color: white; }
.docColorDarkFontState.is-example-color-state-disabled {
  color: rgba(170, 187, 187, 0.25); }

.docColorLight {
  background-color: white;
  color: black; }

.docColorLightStandoutBackground {
  background-color: #f6f6f6;
  padding: 20px; }

.docColorLightActionPrimaryBackground {
  background-color: #898989;
  padding: 20px; }

.docColorLightActionSecondaryBackground {
  background-color: #e8e8e8;
  padding: 20px; }

.docColorLightDefaultDisabledFont {
  color: #cccccc; }

.docColorLightQuietFont {
  color: #616770; }

.docColorLightQuieterFont {
  color: #969ba3; }

.docColorLightContainer {
  border: 1px solid #bfbfbf;
  padding: 20px; }

.docColorLightHeader {
  border-bottom: 2px solid black;
  margin-top: 10px;
  margin-bottom: 10px; }

.docColorLightSection {
  border-bottom: 1px solid #c4c4c4;
  margin-top: 10px;
  margin-bottom: 10px; }

.docColorLightItem {
  border-bottom: 1px solid #dddddd;
  margin-top: 10px;
  margin-bottom: 10px; }

.docColorLightInput {
  border: 1px solid #d7dbdd;
  padding: 20px; }

.docColorLightBackgroundState {
  padding: 20px; }
  .docColorLightBackgroundState.is-example-color-state-hover {
    background-color: #f4f4f4; }
  .docColorLightBackgroundState.is-example-color-state-selected {
    background-color: #e9f0f4; }

.docColorLightFontState.is-example-color-state-default {
  color: #616770; }
.docColorLightFontState.is-example-color-state-hover {
  color: #878d97; }
.docColorLightFontState.is-example-color-state-selected {
  color: #00a0df; }
.docColorLightFontState.is-example-color-state-disabled {
  color: rgba(97, 103, 112, 0.25); }

.docColorStatus {
  padding: 40px;
  border: 1px solid currentColor;
  border-left: 20px solid currentColor; }
  .docColorStatus + .docColorStatus {
    margin-top: 30px; }

.docColorStatus--static {
  color: #cccccc; }

.docColorStatus--primary {
  color: #00a0df; }

.docColorStatus--success {
  color: #13bb72; }

.docColorStatus--warning {
  color: #f09300; }

.docColorStatus--danger {
  color: #ff3516; }

.docTooltipIcon {
  color: red;
  font-size: 30px; }

.docTooltip {
  /* [1] */
  left: 50%;
  /* [2] */
  -webkit-transform: translateX(-30%);
  -moz-transform: translateX(-30%);
  -ms-transform: translateX(-30%);
  -o-transform: translateX(-30%);
  transform: translateX(-30%);
  /* [3] */ }
  .docTooltip:before, .docTooltip:after {
    left: calc(30% - 0.78571rem);
    /* [4] */ }