@charset "UTF-8";
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
main {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

/**
 * 1. 1em equals 10px, instead of the default 16px, so font-size: 2.4em = 24px
 * 2. Prevent certain mobile browsers from automatically zooming fonts.
 * 3. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing.
 */
html {
  overflow-y: initial;
  font-size: 62.5%; /* [1] */
  -webkit-text-size-adjust: 100%; /* [2] */
  -ms-text-size-adjust: 100%; /* [2] */
  text-size-adjust: 100%; /* [2] */
  -webkit-text-size-adjust: 100%; /* [2] */
  -ms-text-size-adjust: 100%; /* [2] */
}

body {
  margin: 0;
  line-height: 1;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

/* Type
------------------------------------------------------------------------------------------- */
/*
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
 Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
 "Helvetica Neue", Arial, sans-serif,
 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

 */
/* text
------------------------------------------------------------------------------------------- */
/* Links
------------------------------------------------------------------------------------------- */
/* Border radius and box shadows
------------------------------------------------------------------------------------------- */
/* Status Color (Red, Amber, green)
------------------------------------------------------------------------------------------- */
/* Product branding colors
------------------------------------------------------------------------------------------- */
/* Generic Color
------------------------------------------------------------------------------------------- */
/* MODULE Margin
------------------------------------------------------------------------------------------- */
/**
 *
 *  FORMS - VALIDATION
 */
/**
 * Module Vars
 */
/* RED MODULE MODIFIER (E.G. errors or failure) */
/* AMBER MODULE MODIFIER (E.G. reboot required) */
/* GREEN MODULE MODIFIER (E.G. success message) */
/* CALLOUT MODULE MODIFIER (E.G. Protips Module) */
/* BLUE MODULE */
/* Very light bg e.g. module header backgrounds */
/* DARK THEME (used by rack pages - top navigation header etc)
------------------------------------------------------------------------------------------- */
:root {
  --form-element-height: 36px;
  --form-element-border: 1px solid #c1c1c1;
  --form-element-border-rad: 4px;
  --form-element-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --form-element-background-color: #fff;
  --form-element-background-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  --form-element-color: #000;
  --form-element-small-height: 27px;
  --form-element-small-padding: 4px 6px;
}

/* =Mixins
================================================== */
/*
    This is a legacy mixin ported from bourbon, please don't use
    in any new code
 */
/*
    .element p {
        @include vertical-align;
    }

*/
/*

    .node:after {
         @include circleCreator( 12px, 1.1, #f8f8f8 );
    }

*/
/*
    .dark-cap-right:after {
        content: "";
        position: absolute;
        top: 6px;
        right: -8px;
        @include triangle( right, $darkCapBg, 8px )
    }
*/
/*
    div.logo {
      background: url("logo.png") no-repeat;
      @include image-2x("logo2x.png", 100px, 25px);
    }
*/
/* ===========================================================================================
    BREAKPOINTS
============================================================================================== */
/* Define breakpoints - http://screensiz.es/phone

 * palm     --  palm-based devices, like phones and small tablets
 * lap      --  lap-based devices, like iPads or laptops
 * portable --  all of the above
 * desk     --  stationary devices, like desktop computers
 * regular  --  any/all types of device

----------------------------------------------------------------------------------------------- */
/* iPhone 4/5                                            */
/* Galaxy Note, Lumina, Nexus and other large            */
/* iPad                                                  */
/* Laptop normal desktop                                 */
/* large eg. Cinema display etc                          */
/* -------------------------------------------------------------------------------------------- */
/*  breakpoint mixin usage example:

    .my-example-el {
        width: 75%;

        @include breakpoint(xlarge) {} // Desktop
        @include breakpoint(large)  { width: 60%; }
        @include breakpoint(medium) { width: 80%; } //iPad
        @include breakpoint(small)  { width: 95%; } //Phablet
        @include breakpoint(phone) {}
    }
*/
/*
 *   Responsive utility classes
 */
/*
 *   Add this class to hide an element on mobile/phone/620px
 */
@media (max-width: 620px) {
  .m-phoneHide {
    display: none !important;
  }
}

/*------------------------------------*\
    $INTRODUCTION
    http://csswizardry.com/csswizardry-grids/
\*------------------------------------*/
/**
 * csswizardry grids provides you with widths to suit a number of breakpoints
 * designed around devices of a size you specify. Out of the box, csswizardry
 * grids caters to the following types of device:
 *
 * palm     --  palm-based devices, like phones and small tablets
 * lap      --  lap-based devices, like iPads or laptops
 * portable --  all of the above
 * desk     --  stationary devices, like desktop computers
 * regular  --  any/all types of device
 *
 * These namespaces are then used in the library to give you the ability to
 * manipulate your layouts based around them, for example:
 *
   <div class="grid__item  one-whole  lap--one-half  desk--one-third">
 *
 * This would give you a grid item which is 100% width unless it is on a lap
 * device, at which point it become 50% wide, or it is on a desktop device, at
 * which point it becomes 33.333% width.
 *
 * csswizardry grids also has push and pull classes which allow you to nudge
 * grid items left and right by a defined amount. These follow the same naming
 * convention as above, but are prepended by either `push--` or `pull--`, for
 * example:
 *
   `class="grid__item  one-half  push--one-half"`
 *
 * This would give you a grid item which is 50% width and pushed over to the
 * right by 50%.
 *
 * All classes in csswizardry grids follow this patten, so you should fairly
 * quickly be able to piece together any combinations you can imagine, for
 * example:
 *
   `class="grid__item  one-whole  lap--one-half  desk--one-third  push--desk--one-third"`
 *
   `class="grid__item  one-quarter  palm--one-half  push--palm--one-half"`
 *
   `class="grid__item  palm--one-third  desk--five-twelfths"`
 */
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * If you are building a non-responsive site but would still like to use
 * csswizardry-grids, set this to ‘false’:
 */
/**
 * Is this build mobile first? Setting to ‘true’ means that all grids will be
 * 100% width if you do not apply a more specific class to them.
 */
/**
 * Set the spacing between your grid items.
 */
/**
 * Would you like Sass’ silent classes, or regular CSS classes?
 */
/**
 * Would you like push and pull classes enabled?
 */
/**
 * Using `inline-block` means that the grid items need their whitespace removing
 * in order for them to work correctly. Set the following to true if you are
 * going to achieve this by manually removing/commenting out any whitespace in
 * your HTML yourself.
 *
 * Setting this to false invokes a hack which cannot always be guaranteed,
 * please see the following for more detail:
 *
 * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
 */
/**
 * Define your breakpoints. The first value is the prefix that shall be used for
 * your classes (e.g. `.palm--one-half`), the second value is the media query
 * that the breakpoint fires at.
 */
/**
 * Define which namespaced breakpoints you would like to generate for each of
 * widths, push and pull. This is handy if you only need pull on, say, desk, or
 * you only need a new width breakpoint at mobile sizes. It allows you to only
 * compile as much CSS as you need. All are turned on by default, but you can
 * add and remove breakpoints at will.
 *
 * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
 * have been set to ‘true’.
 */
/**
 * You do not need to edit anything from this line onward; csswizardry-grids is
 * good to go. Happy griddin’!
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * These mixins are for the library to use only, you should not need to modify
 * them at all.
 *
 * Enclose a block of code with a media query as named in `$breakpoints`.
 */
/**
 * Drop relative positioning into silent classes which can’t take advantage of
 * the `[class*="push--"]` and `[class*="pull--"]` selectors.
 */
/*------------------------------------*\
    $GRID SETUP
\*------------------------------------*/
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
 */
.grid {
  list-style: none; /* [1] */
  margin: 0; /* [2] */
  padding: 0; /* [2] */
  margin-left: -26px; /* [3] */
  letter-spacing: -0.31em;
}

/* Opera hack */
.opera:-o-prefocus,
.grid {
  word-spacing: -0.43em;
}

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
.grid__item {
  display: inline-block; /* [1] */
  padding-left: 26px; /* [2] */
  vertical-align: top; /* [3] */
  width: 100%; /* [4] */
  -webkit-box-sizing: border-box; /* [5] */
  -moz-box-sizing: border-box; /* [5] */
  box-sizing: border-box; /* [5] */
  letter-spacing: normal;
  word-spacing: normal;
}

/**
 * Reversed grids allow you to structure your source in the opposite order to
 * how your rendered layout will appear. Extends `.grid`.
 */
.grid--rev {
  direction: rtl;
  text-align: left;
}
.grid--rev > .grid__item {
  direction: ltr;
  text-align: left;
}

/**
 * Gutterless grids have all the properties of regular grids, minus any spacing.
 * Extends `.grid`.
 */
.grid--full {
  margin-left: 0;
}
.grid--full > .grid__item {
  padding-left: 0;
}

/**
 * Align the entire grid to the right. Extends `.grid`.
 */
.grid--right {
  text-align: right;
}
.grid--right > .grid__item {
  text-align: left;
}

/**
 * Centered grids align grid items centrally without needing to use push or pull
 * classes. Extends `.grid`.
 */
.grid--center {
  text-align: center;
}
.grid--center > .grid__item {
  text-align: left;
}

/**
 * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
 * `.grid`.
 */
.grid--middle > .grid__item {
  vertical-align: middle;
}

.grid--bottom > .grid__item {
  vertical-align: bottom;
}

/**
 * Create grids with narrower gutters. Extends `.grid`.
 */
.grid--narrow {
  margin-left: -13px;
}
.grid--narrow > .grid__item {
  padding-left: 13px;
}

/**
 * Create grids with wider gutters. Extends `.grid`.
 */
.grid--wide {
  margin-left: -52px;
}
.grid--wide > .grid__item {
  padding-left: 52px;
}

/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * Create our width classes, prefixed by the specified namespace.
 */
/**
 * Our regular, non-responsive width classes.
 */
/**
 * Whole
 */
.one-whole {
  width: 100%;
}

/**
 * Halves
 */
.one-half, .six-twelfths, .five-tenths, .four-eighths, .three-sixths, .two-quarters {
  width: 50%;
}

/**
 * Thirds
 */
.one-third, .four-twelfths, .two-sixths {
  width: 33.333%;
}

.two-thirds, .eight-twelfths, .four-sixths {
  width: 66.666%;
}

/**
 * Quarters
 */
.one-quarter, .three-twelfths, .two-eighths {
  width: 25%;
}

.three-quarters, .nine-twelfths, .six-eighths {
  width: 75%;
}

/**
 * Fifths
 */
.one-fifth, .two-tenths {
  width: 20%;
}

.two-fifths, .four-tenths {
  width: 40%;
}

.three-fifths, .six-tenths {
  width: 60%;
}

.four-fifths, .eight-tenths {
  width: 80%;
}

/**
 * Sixths
 */
.one-sixth, .two-twelfths {
  width: 16.666%;
}

.five-sixths, .ten-twelfths {
  width: 83.333%;
}

/**
 * Eighths
 */
.one-eighth {
  width: 12.5%;
}

.three-eighths {
  width: 37.5%;
}

.five-eighths {
  width: 62.5%;
}

.seven-eighths {
  width: 87.5%;
}

/**
 * Tenths
 */
.one-tenth {
  width: 10%;
}

.three-tenths {
  width: 30%;
}

.seven-tenths {
  width: 70%;
}

.nine-tenths {
  width: 90%;
}

/**
 * Twelfths
 */
.one-twelfth {
  width: 8.333%;
}

.five-twelfths {
  width: 41.666%;
}

.seven-twelfths {
  width: 58.333%;
}

.eleven-twelfths {
  width: 91.666%;
}

/**
 * Our responsive classes, if we have enabled them.
 */
@media only screen and (max-width: 480px) {
  /**
   * Whole
   */
  .palm--one-whole {
    width: 100%;
  }
  /**
   * Halves
   */
  .palm--one-half, .palm--six-twelfths, .palm--five-tenths, .palm--four-eighths, .palm--three-sixths, .palm--two-quarters {
    width: 50%;
  }
  /**
   * Thirds
   */
  .palm--one-third, .palm--four-twelfths, .palm--two-sixths {
    width: 33.333%;
  }
  .palm--two-thirds, .palm--eight-twelfths, .palm--four-sixths {
    width: 66.666%;
  }
  /**
   * Quarters
   */
  .palm--one-quarter, .palm--three-twelfths, .palm--two-eighths {
    width: 25%;
  }
  .palm--three-quarters, .palm--nine-twelfths, .palm--six-eighths {
    width: 75%;
  }
  /**
   * Fifths
   */
  .palm--one-fifth, .palm--two-tenths {
    width: 20%;
  }
  .palm--two-fifths, .palm--four-tenths {
    width: 40%;
  }
  .palm--three-fifths, .palm--six-tenths {
    width: 60%;
  }
  .palm--four-fifths, .palm--eight-tenths {
    width: 80%;
  }
  /**
   * Sixths
   */
  .palm--one-sixth, .palm--two-twelfths {
    width: 16.666%;
  }
  .palm--five-sixths, .palm--ten-twelfths {
    width: 83.333%;
  }
  /**
   * Eighths
   */
  .palm--one-eighth {
    width: 12.5%;
  }
  .palm--three-eighths {
    width: 37.5%;
  }
  .palm--five-eighths {
    width: 62.5%;
  }
  .palm--seven-eighths {
    width: 87.5%;
  }
  /**
   * Tenths
   */
  .palm--one-tenth {
    width: 10%;
  }
  .palm--three-tenths {
    width: 30%;
  }
  .palm--seven-tenths {
    width: 70%;
  }
  .palm--nine-tenths {
    width: 90%;
  }
  /**
   * Twelfths
   */
  .palm--one-twelfth {
    width: 8.333%;
  }
  .palm--five-twelfths {
    width: 41.666%;
  }
  .palm--seven-twelfths {
    width: 58.333%;
  }
  .palm--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
  /**
   * Whole
   */
  .lap--one-whole {
    width: 100%;
  }
  /**
   * Halves
   */
  .lap--one-half, .lap--six-twelfths, .lap--five-tenths, .lap--four-eighths, .lap--three-sixths, .lap--two-quarters {
    width: 50%;
  }
  /**
   * Thirds
   */
  .lap--one-third, .lap--four-twelfths, .lap--two-sixths {
    width: 33.333%;
  }
  .lap--two-thirds, .lap--eight-twelfths, .lap--four-sixths {
    width: 66.666%;
  }
  /**
   * Quarters
   */
  .lap--one-quarter, .lap--three-twelfths, .lap--two-eighths {
    width: 25%;
  }
  .lap--three-quarters, .lap--nine-twelfths, .lap--six-eighths {
    width: 75%;
  }
  /**
   * Fifths
   */
  .lap--one-fifth, .lap--two-tenths {
    width: 20%;
  }
  .lap--two-fifths, .lap--four-tenths {
    width: 40%;
  }
  .lap--three-fifths, .lap--six-tenths {
    width: 60%;
  }
  .lap--four-fifths, .lap--eight-tenths {
    width: 80%;
  }
  /**
   * Sixths
   */
  .lap--one-sixth, .lap--two-twelfths {
    width: 16.666%;
  }
  .lap--five-sixths, .lap--ten-twelfths {
    width: 83.333%;
  }
  /**
   * Eighths
   */
  .lap--one-eighth {
    width: 12.5%;
  }
  .lap--three-eighths {
    width: 37.5%;
  }
  .lap--five-eighths {
    width: 62.5%;
  }
  .lap--seven-eighths {
    width: 87.5%;
  }
  /**
   * Tenths
   */
  .lap--one-tenth {
    width: 10%;
  }
  .lap--three-tenths {
    width: 30%;
  }
  .lap--seven-tenths {
    width: 70%;
  }
  .lap--nine-tenths {
    width: 90%;
  }
  /**
   * Twelfths
   */
  .lap--one-twelfth {
    width: 8.333%;
  }
  .lap--five-twelfths {
    width: 41.666%;
  }
  .lap--seven-twelfths {
    width: 58.333%;
  }
  .lap--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (max-width: 1023px) {
  /**
   * Whole
   */
  .portable--one-whole {
    width: 100%;
  }
  /**
   * Halves
   */
  .portable--one-half, .portable--six-twelfths, .portable--five-tenths, .portable--four-eighths, .portable--three-sixths, .portable--two-quarters {
    width: 50%;
  }
  /**
   * Thirds
   */
  .portable--one-third, .portable--four-twelfths, .portable--two-sixths {
    width: 33.333%;
  }
  .portable--two-thirds, .portable--eight-twelfths, .portable--four-sixths {
    width: 66.666%;
  }
  /**
   * Quarters
   */
  .portable--one-quarter, .portable--three-twelfths, .portable--two-eighths {
    width: 25%;
  }
  .portable--three-quarters, .portable--nine-twelfths, .portable--six-eighths {
    width: 75%;
  }
  /**
   * Fifths
   */
  .portable--one-fifth, .portable--two-tenths {
    width: 20%;
  }
  .portable--two-fifths, .portable--four-tenths {
    width: 40%;
  }
  .portable--three-fifths, .portable--six-tenths {
    width: 60%;
  }
  .portable--four-fifths, .portable--eight-tenths {
    width: 80%;
  }
  /**
   * Sixths
   */
  .portable--one-sixth, .portable--two-twelfths {
    width: 16.666%;
  }
  .portable--five-sixths, .portable--ten-twelfths {
    width: 83.333%;
  }
  /**
   * Eighths
   */
  .portable--one-eighth {
    width: 12.5%;
  }
  .portable--three-eighths {
    width: 37.5%;
  }
  .portable--five-eighths {
    width: 62.5%;
  }
  .portable--seven-eighths {
    width: 87.5%;
  }
  /**
   * Tenths
   */
  .portable--one-tenth {
    width: 10%;
  }
  .portable--three-tenths {
    width: 30%;
  }
  .portable--seven-tenths {
    width: 70%;
  }
  .portable--nine-tenths {
    width: 90%;
  }
  /**
   * Twelfths
   */
  .portable--one-twelfth {
    width: 8.333%;
  }
  .portable--five-twelfths {
    width: 41.666%;
  }
  .portable--seven-twelfths {
    width: 58.333%;
  }
  .portable--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
   * Whole
   */
  .desk--one-whole {
    width: 100%;
  }
  /**
   * Halves
   */
  .desk--one-half, .desk--six-twelfths, .desk--five-tenths, .desk--four-eighths, .desk--three-sixths, .desk--two-quarters {
    width: 50%;
  }
  /**
   * Thirds
   */
  .desk--one-third, .desk--four-twelfths, .desk--two-sixths {
    width: 33.333%;
  }
  .desk--two-thirds, .desk--eight-twelfths, .desk--four-sixths {
    width: 66.666%;
  }
  /**
   * Quarters
   */
  .desk--one-quarter, .desk--three-twelfths, .desk--two-eighths {
    width: 25%;
  }
  .desk--three-quarters, .desk--nine-twelfths, .desk--six-eighths {
    width: 75%;
  }
  /**
   * Fifths
   */
  .desk--one-fifth, .desk--two-tenths {
    width: 20%;
  }
  .desk--two-fifths, .desk--four-tenths {
    width: 40%;
  }
  .desk--three-fifths, .desk--six-tenths {
    width: 60%;
  }
  .desk--four-fifths, .desk--eight-tenths {
    width: 80%;
  }
  /**
   * Sixths
   */
  .desk--one-sixth, .desk--two-twelfths {
    width: 16.666%;
  }
  .desk--five-sixths, .desk--ten-twelfths {
    width: 83.333%;
  }
  /**
   * Eighths
   */
  .desk--one-eighth {
    width: 12.5%;
  }
  .desk--three-eighths {
    width: 37.5%;
  }
  .desk--five-eighths {
    width: 62.5%;
  }
  .desk--seven-eighths {
    width: 87.5%;
  }
  /**
   * Tenths
   */
  .desk--one-tenth {
    width: 10%;
  }
  .desk--three-tenths {
    width: 30%;
  }
  .desk--seven-tenths {
    width: 70%;
  }
  .desk--nine-tenths {
    width: 90%;
  }
  /**
   * Twelfths
   */
  .desk--one-twelfth {
    width: 8.333%;
  }
  .desk--five-twelfths {
    width: 41.666%;
  }
  .desk--seven-twelfths {
    width: 58.333%;
  }
  .desk--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 1230px) {
  /**
   * Whole
   */
  .wide--one-whole {
    width: 100%;
  }
  /**
   * Halves
   */
  .wide--one-half, .wide--six-twelfths, .wide--five-tenths, .wide--four-eighths, .wide--three-sixths, .wide--two-quarters {
    width: 50%;
  }
  /**
   * Thirds
   */
  .wide--one-third, .wide--four-twelfths, .wide--two-sixths {
    width: 33.333%;
  }
  .wide--two-thirds, .wide--eight-twelfths, .wide--four-sixths {
    width: 66.666%;
  }
  /**
   * Quarters
   */
  .wide--one-quarter, .wide--three-twelfths, .wide--two-eighths {
    width: 25%;
  }
  .wide--three-quarters, .wide--nine-twelfths, .wide--six-eighths {
    width: 75%;
  }
  /**
   * Fifths
   */
  .wide--one-fifth, .wide--two-tenths {
    width: 20%;
  }
  .wide--two-fifths, .wide--four-tenths {
    width: 40%;
  }
  .wide--three-fifths, .wide--six-tenths {
    width: 60%;
  }
  .wide--four-fifths, .wide--eight-tenths {
    width: 80%;
  }
  /**
   * Sixths
   */
  .wide--one-sixth, .wide--two-twelfths {
    width: 16.666%;
  }
  .wide--five-sixths, .wide--ten-twelfths {
    width: 83.333%;
  }
  /**
   * Eighths
   */
  .wide--one-eighth {
    width: 12.5%;
  }
  .wide--three-eighths {
    width: 37.5%;
  }
  .wide--five-eighths {
    width: 62.5%;
  }
  .wide--seven-eighths {
    width: 87.5%;
  }
  /**
   * Tenths
   */
  .wide--one-tenth {
    width: 10%;
  }
  .wide--three-tenths {
    width: 30%;
  }
  .wide--seven-tenths {
    width: 70%;
  }
  .wide--nine-tenths {
    width: 90%;
  }
  /**
   * Twelfths
   */
  .wide--one-twelfth {
    width: 8.333%;
  }
  .wide--five-twelfths {
    width: 41.666%;
  }
  .wide--seven-twelfths {
    width: 58.333%;
  }
  .wide--eleven-twelfths {
    width: 91.666%;
  }
}
/*------------------------------------*\
    $PUSH
\*------------------------------------*/
/**
 * Push classes, to move grid items over to the right by certain amounts.
 */
/*------------------------------------*\
    $PULL
\*------------------------------------*/
/**
 * Pull classes, to move grid items back to the left by certain amounts.
 */
/* ==========================================================================
   BUTTON CLASS
   ========================================================================== */
/*
    References for BEM & SUIT SYNTAX
    --------------------------------
    https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
    http://www.integralist.co.uk/posts/maintainable-css-with-bem/

*/
/**
 * The button classes are best applied to links, buttons, and submit inputs.
 * These components can be used in forms, as calls to action, or as part of the
 * general UI of the site/app.
 *
 * Recommended use:
 *
 * <a class="Button [Button--modifier]" role="button" href="[url]">Button text</a>
 * <button class="Button [Button--modifier]" type="submit">Button text</button>
 * <input class="Button [Button--modifier]" type="submit" value="Button text">
 */
/**
 * 1. Corrects inability to style clickable `input` types in iOS.
 * 2. Normalize `box-sizing` across all elements that this component could be
 *    applied to.
 * 3. Inherit text color from ancestor.
 * 4. Inherit font styles from ancestor.
 * 5. Normalize `line-height`. For `input`, it can't be changed from `normal` in Firefox 4+.
 * 6. Prevent button text from being selectable.
 * 7. Make sure `input` will wrap text across multiple lines.
 */
.Button {
  box-sizing: border-box;
  -webkit-appearance: none;
  /* 1 */
  background: transparent;
  border-color: #CECECE;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  box-sizing: border-box;
  /* 2 */
  color: inherit;
  color: #777;
  /* 3 */
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 600;
  /* 4 */
  line-height: normal;
  /* 5 */
  margin: 0;
  padding: 1em 1.2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 6 */
  white-space: normal;
  /* 7 */
  font-size: 12px;
  text-decoration: none !important;
  transition: background-color 0.3s linear, border-color 0.3s linear;
  transition: color none;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.Button-ico {
  font-size: 12px !important;
  margin: 0 4px 0 0;
  position: relative;
}

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

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */
.Button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

/**
 * UI states
 */
.Button:hover,
.Button:focus,
.Button:active {
  text-decoration: none;
}
.Button:hover .caret,
.Button:focus .caret,
.Button:active .caret {
  opacity: 1;
}

.Form-actions .Button:active,
.Form-modalActions .Button:active,
.Drawer-footer .Button:active {
  transform: translateY(2px) !important;
}

.Button.is-clickable:active {
  transform: translateY(2px) !important;
}

.Button:disabled,
.Button.is-disabled {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  color: #999 !important;
  border: 1px solid #BFBFBF !important;
  background: #FCFCFC !important;
  box-shadow: none;
}
.Button:disabled:focus,
.Button.is-disabled:focus {
  color: #9e9e9e !important;
}

.Button:disabled:hover,
.Button.is-disabled:hover {
  cursor: default;
  opacity: 0.6;
  color: #666;
  background: #eee;
}

.Button.all-disabled:not(.Button--spinner) {
  cursor: not-allowed !important;
  opacity: 0.3 !important;
  color: #999 !important;
  border: 1px solid #BFBFBF !important;
  background: #FCFCFC !important;
  pointer-events: none !important;
}

.Button.all-disabled:hover {
  cursor: not-allowed !important;
  opacity: 0.4;
  color: #999;
  background: #eee;
  pointer-events: none !important;
}

.all-disabled,
.is-disabled {
  cursor: not-allowed !important;
}
.all-disabled label, .all-disabled input, .all-disabled textarea,
.is-disabled label,
.is-disabled input,
.is-disabled textarea {
  cursor: not-allowed !important;
}

.all-disabled {
  pointer-events: none !important;
}

/*

    <a class="Button" href="{{url}}">Sign up</a>
    <button class="Button Button--default is-disabled" type="button">Close</button>
    <input class="Button Button--primary is-pressed" type="submit" value="Submit">

*/
/**
 * Button Default: GREY
 *
 */
.Button--default {
  font-weight: bold;
  text-shadow: none;
  color: #5a6870;
  border: 1px solid #617077;
}

.Button--default:hover,
.Button--default:focus,
.Button--default:active,
.Button--default.is-pressed {
  background-color: #FAFAFA;
  border-color: #bcbcbc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}

.Button--default:focus {
  outline: 0;
}

.Button--default:active,
.Button--default.is-pressed {
  border-color: #bcbcbc;
}

.Button .caret {
  vertical-align: middle;
  border-top-color: #999;
  border-bottom-color: #999;
  opacity: 0.85;
}

/**
 * Button appears inside a module header
 *
 */
.Button.Button--moduleHeader {
  padding: 7px 12px;
  box-shadow: none;
  border-color: transparent;
  font-size: 12px;
  text-shadow: none;
  font-weight: 500;
  background-color: transparent;
  color: #54676d;
}
.Button.Button--moduleHeader:hover, .Button.Button--moduleHeader:focus, .Button.Button--moduleHeader:active {
  color: #4c5e63;
  background-color: #fff;
  border-color: #ddd;
  outline: none;
}
.Button.Button--moduleHeader .Button--moduleHeaderIcon {
  margin-right: 3px;
  font-size: 11px;
  color: rgb(40, 167, 69);
}
.Button.Button--moduleHeader .Button--moduleHeaderIcon--svg {
  position: relative;
  top: 2px;
}
.Button.Button--moduleHeader .Button--moduleHeaderCaret {
  border-top-color: #54676d;
  border-bottom-color: #54676d;
  margin-left: 2px;
}

.Button.Button--moduleFooter {
  padding: 9px 12px;
  box-shadow: none;
  border-color: transparent;
  font-size: 13px !important;
  text-shadow: none;
  font-weight: 500;
  background-color: transparent;
  color: #54676d;
}

.Button.Button--destructive:hover i, .Button.Button--destructive:focus i, .Button.Button--destructive:active i {
  color: #cc3333;
}

.Button.Button--moduleHeader.is-disabled,
.Button.Button--moduleHeader.all-disabled {
  border: 1px solid transparent !important;
}
.Button.Button--moduleHeader.is-disabled *,
.Button.Button--moduleHeader.all-disabled * {
  color: #8c8c8c !important;
}

/**
 * Button Primary Action: GREEN
 *
 */
.Button--pri {
  background-color: #42ca49;
  color: #fff;
  border-color: #42ca49;
}
.Button--pri .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
  margin-left: 1px;
  opacity: 0.85;
}

.Button--pri:hover,
.Button--pri:focus,
.Button--pri:active,
.Button--pri.is-pressed {
  background-color: #3cba43;
  border-color: #3cba43;
  color: #fff;
}

.Button--pri:focus {
  background-color: #42ca49;
  border-color: #42ca49;
  outline: 0;
}

.Button--pri:active,
.Button--pri.is-pressed {
  transition: none;
  background-color: #5AB55A;
  color: #fff;
}

/**
 * Button Secondary Action: BLUE
 *
 */
.Button--sec {
  background-color: #0D99FF;
  color: #fff;
  border-color: #0D99FF;
  box-shadow: none !important;
}

.Button--sec:hover,
.Button--sec:focus,
.Button--sec:active,
.Button--sec.is-pressed {
  background-color: #0e93ed;
  border-color: #0e93ed !important;
  color: #fff;
}

.Button--sec:focus {
  background-color: #0e93ed;
  outline: 0;
}

.Button--sec:active,
.Button--sec.is-pressed {
  background-color: #0e93ed;
}

.Button--outlined {
  color: #427dc4;
  font-weight: bold;
  text-shadow: none !important;
  box-shadow: none;
}

.Button--outlined:hover {
  background-color: #fff;
}

/**
 * Button BLUE OUTLINED
 *
 */
.Button--secOutlined {
  transition: none !important;
  border: 1px solid rgba(41, 150, 204, 0.9);
  color: #0D99FF;
  font-weight: normal;
  text-shadow: none;
  box-shadow: none;
}

.Button--secOutlined:hover,
.Button--secOutlined:focus,
.Button--secOutlined:active,
.Button--secOutlined.is-pressed {
  border: 1px solid #0D99FF;
  background: #0D99FF;
  color: #fff;
}

.Button--secOutlined:focus {
  outline: 0;
}

/**
 * Outlined button appearing within a
 * callout module.
 */
/* Outlined */
.Button--callout {
  border: 1px solid #D8C9A2;
  color: #222;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0.8em 1em;
}

.Button--callout:hover,
.Button--calloutfocus,
.Button--callout:active,
.Button--callout.is-pressed {
  color: #000;
}

.Button--callout:focus {
  outline: 0;
}

/**
 * Button Negative Action: RED
 *
 */
.Button--delete {
  background-color: rgb(204, 51, 51);
  color: #fff;
  border-color: #ce0000;
}

.Button--delete:hover,
.Button--delete:focus,
.Button--delete:active,
.Button--delete.is-pressed {
  background-color: #cc3333;
  border-color: #cc3333;
  color: #fff;
}

.Button--delete:focus {
  background-color: #AF2B2B;
  outline: 0;
}

.Button--delete:active,
.Button--delete.is-pressed {
  background-color: #AF2B2B;
}

/**
 * Button Negative Action: Red OUTLINED
 *
 */
.Button--deleteOutlined {
  background-color: transparent;
  color: #cc3333;
  border: 1px solid rgba(204, 51, 51, 0.7) !important;
  text-shadow: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.Button--deleteOutlined:hover,
.Button--deleteOutlined:focus,
.Button--deleteOutlined:active,
.Button--deleteOutlined.is-pressed {
  color: #fff !important;
  border-color: #cc3333;
  background-color: #cc3333;
}

.Button--deleteOutlined:focus {
  color: #fff;
  border-color: #cc3333;
  background-color: #cc3333;
}

.Button--deleteOutlined:active,
.Button--deleteOutlined.is-pressed {
  color: #fff;
  border-color: #b22c2c;
  background-color: #b22c2c;
}

/*
  Secondary delete button
*/
.Button--deleteLink {
  background-color: transparent;
  color: #cc3333;
  border: 1px solid transparent !important;
  text-shadow: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.Button--deleteLink:hover {
  color: #cc3333 !important;
  background-color: #fff !important;
  border: 1px solid rgba(204, 51, 51, 0.7) !important;
}

.Button--deleteLink:active,
.Button--deleteLink:focus {
  color: #fff !important;
  border-color: #cc3333 !important;
  background-color: #cc3333 !important;
}

/**
 * Button POSITIVE Action: green OUTLINED
 *
 */
.Button--greenOutlined {
  background-color: #fff;
  color: #62c462;
  border: 1px solid #62c462;
  text-shadow: none !important;
  transition: none !important;
  box-shadow: none;
}

.Button--greenOutlined:hover,
.Button--greenOutlined:focus,
.Button--greenOutlined:active,
.Button--greenOutlined.is-pressed {
  background-color: #62c462;
  border-color: #62c462;
  color: #fff;
}

.Button--greenOutlined:focus {
  outline: 0;
}

.Button--greenOutlined:active,
.Button--greenOutlined.is-pressed {
  border-color: #62c462;
  background-color: #56ad56;
}

/**
 * Button Cancel: Cancel
 *
 */
.Button.Button--cancel {
  position: relative;
  top: 2px;
  margin-left: 1.2em;
  background: transparent;
  color: #777;
  border-color: transparent;
  text-shadow: none;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.Button--cancel:hover,
.Button--cancel:focus,
.Button--cancel:active,
.Button--cancel.is-pressed {
  background-color: transparent;
  color: #666;
}

.Button--cancel:focus {
  background-color: transparent;
  outline: 0;
}

.Button--cancel:active,
.Button--cancel.is-pressed {
  background-color: transparent;
}

.Button.Button--cancelEdit {
  position: relative;
  background: transparent;
  color: #999;
  font-weight: 500;
  border: 1px solid transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin-left: -2px;
}
.Button.Button--cancelEdit:hover {
  color: #555;
}
.Button.Button--cancelEdit:active {
  outline: none;
}

/**
 * Modifier: mini buttons
 * E.g. module toolbars
 */
.Button--mini {
  font-weight: 400;
  font-size: 0.9rem;
  padding: 0.5em 0.55em;
  text-transform: uppercase;
  color: #222;
  box-shadow: none !important;
}
.Button--mini:hover {
  border-color: #B7B7B7;
}
.Button--mini .Button-icon {
  font-size: 8px;
  margin-right: 2px;
}

/**
 * Modifier: small buttons
 */
.Button--dropDown {
  font-weight: 500;
  font-size: 1.1rem;
  padding: 8px;
  width: 100%;
}

.Button--small {
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.6em 0.8em;
}

.Button--formInput {
  vertical-align: top;
  font-weight: 500;
  font-size: 23px;
  padding: 3px 12px;
  margin-left: 2px;
  color: #748b93;
}
.Button--formInput:hover {
  color: #427dc4;
}

.Button--smallInlined {
  font-weight: 500;
  font-size: 1.1rem;
  padding: 8px 10px;
  margin-left: 3px;
}

.Button--micro {
  font-weight: 500;
  font-size: 1.1rem;
  text-shadow: none;
  padding: 0.4em 0.6em;
}

.Button--nano {
  font-weight: 500;
  font-size: 1.1rem;
  text-shadow: none;
  padding: 3px 3px;
  min-width: 54px;
  box-shadow: none;
}
.Button--nano:hover {
  color: #000;
}

.Button--eip {
  font-weight: 500;
  font-size: 12px;
  text-shadow: none;
  padding: 3px 9px;
  min-width: 52px;
  box-shadow: none;
  margin-left: 1.2rem;
  color: #427dc4;
  border: none;
}
.Button--eip:hover {
  color: #000;
}
.Button--eip .caret {
  margin-top: 0;
}

.Button--thead {
  font-weight: 500;
  font-size: 12px;
  text-shadow: none;
  padding: 5px 8px;
  min-width: 52px;
  box-shadow: none;
  margin-left: 8px;
  color: #48595e;
  border: none;
}
.Button--thead:hover {
  background: #FAFBFC;
  color: #000;
}
.Button--thead:focus {
  background: #f4f4f4;
  color: #000;
  outline: none;
}
.Button--thead .caret {
  margin-top: 0;
  border-top-color: #54676d;
  border-bottom-color: #54676d;
  margin-left: 2px;
}

.Button--card {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.9em 1.1em;
  box-shadow: none;
}

.Button--field {
  font-weight: bold;
  font-size: 1.1rem;
  padding: 0.8em 0.8em;
}

.Button--proTip {
  font-weight: 600 !important;
  font-size: 1.4rem;
  padding: 0.8em 1.1em;
  border-color: #5dbf5d;
}

/**
 * used in the header to switch orgs
 */
.Button.Button--header {
  padding: 0.7em 1.2em;
  text-shadow: none;
  border-color: #e0e0e0;
  white-space: nowrap;
  box-shadow: none;
  color: #24292e;
  font-weight: normal;
}
.Button.Button--header:hover {
  background: linear-gradient(#FCFCFC, #F9F9F9);
}
.Button.Button--header .caret {
  margin-left: 2px;
  border-top-color: #999;
  border-bottom-color: #999;
  opacity: 0.85;
}

.Button--dropdown {
  background: linear-gradient(#FCFCFC, #F9F9F9);
  color: #3a72b7;
  font-size: 1.3rem;
  border: 1px solid #c1c1c1;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
  background: #fcfcfc;
}
.Button--dropdown .caret {
  position: absolute;
  top: 14px;
  right: 10px;
  border-top-color: #666;
  border-bottom-color: #666;
  opacity: 0.85;
}
.Button--dropdown .caret-select {
  position: absolute;
  top: 16px;
  right: 10px;
}

/**
 * Modifier: Medium buttons
 */
.Button--medium {
  font-size: 12px;
  font-weight: 500;
  padding: 10px 16px;
}

/**
 * Modifier: wide buttons
 */
.Button--wide {
  padding: 1em 2.6em;
}

/**
 * Modifier: large buttons
 */
.Button--large {
  font-size: 1.5rem;
  padding: 1.1em 1.6em;
}

.Button--chunky {
  padding: 1.3em 1.2em;
}

/**
 * Modifier: xlarge buttons
 */
.Button--xlarge {
  padding: 1.6em;
  border-width: 2px;
  border-radius: 4px;
}

.Button--Xxlarge {
  font-size: 2rem;
  padding: 0.75em 1.6em;
}

/**
 * Button: within main page content
    e.g. New Stencil Group
 */
.Button--secondary {
  padding: 0.9em 1em;
  font-size: 12px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.095);
}

.Button--tertiary {
  padding: 0.9em 1em;
  font-size: 11px;
  background-color: #FCFCFC;
  text-shadow: none;
}
.Button--tertiary:hover {
  background-color: #FAFBFC;
}
.Button--tertiary:active {
  transform: translateY(2px) !important;
}

/**
 * Modifier: action e.g. buttons, forms <input type="submit">
 */
.Button--action {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/**
 * Modifier: button contains a spinner and needs additionl lef/right padding to accomodate
 */
/**
 * Modifier: Actions e.g. sidebar Deploy button and dropdown
 */
.Button--headerAction {
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 500;
  padding: 11px 12px;
  transition: all 0.35s ease-in-out !important;
  z-index: 1;
}
.Button--headerAction:hover, .Button--headerAction:active, .Button--headerAction:focus {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.09), 0 4px 6px rgba(0, 0, 0, 0.09), 0 12px 16px rgba(0, 0, 0, 0.09);
}
@media (max-width: 620px) {
  .Button--headerAction {
    padding: 11px 8px;
  }
  .Button--headerAction .Button-ico {
    display: none;
  }
}

.Button--sideAction {
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 13px 4px;
  transition: all 0.35s ease-in-out !important;
}
.Button--sideAction:hover, .Button--sideAction:active, .Button--sideAction:focus {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.09), 0 4px 6px rgba(0, 0, 0, 0.09), 0 12px 16px rgba(0, 0, 0, 0.09);
}

.Button--sideAction.Button--deleteOutlined,
.Button--sideAction.Button--secOutlined,
.Button--sideAction.is-disabled,
.Button--sideAction.all-disabled {
  box-shadow: none !important;
}

.Button--sideAction--primary {
  padding: 14px 4px;
  font-size: 1.2rem;
}

.Button--spaced {
  margin-right: 2px;
}

.Button--spaced02 {
  margin-right: 12px;
}

.Button--spaced02:last-child {
  margin-right: 0;
}

.Button-icon {
  font-size: 12px !important;
  width: 12px !important;
  margin-right: 6px;
}

.ButtonMenu-image,
.Button-image {
  display: inline-block;
  margin-right: 9px;
  vertical-align: middle;
  width: 18px;
}

.Button--left {
  position: relative;
  text-align: left;
}
.Button--left .Button-text {
  padding-left: 2.2em;
}
.Button--left .Button-image,
.Button--left .ButtonMenu-image {
  position: absolute;
  top: 0.9em;
  left: 1em;
}

.ButtonMenu-listItem .ButtonMenu-image {
  position: relative;
  top: -2px;
}

/**
 *  Button List
 *  Usecase: List of sidebar action buttons
 */
.ButtonList,
.ButtonListContainer {
  margin-bottom: 26px;
}

.ButtonList-item {
  margin-bottom: 1.2em;
}

.ButtonList-item--division {
  padding-top: 0.95em;
}

/**
 *  Inline Button List
 *  Usecase: stack detail page
 *  Note - this is now deprecated in favour of the generic grid system
 */
.ButtonList--inline .ButtonList-item {
  margin-bottom: 0.9em;
  width: auto;
}
@media (min-width: 1024px) {
  .ButtonList--inline .ButtonList-item {
    width: 90px;
    overflow: hidden;
  }
}
@media (min-width: 1024px) {
  .ButtonList--inline .ButtonList-item:nth-child(odd) {
    float: left;
  }
}
@media (min-width: 1024px) {
  .ButtonList--inline .ButtonList-item:nth-child(even) {
    float: right;
  }
}
@media (min-width: 1024px) {
  .ButtonList--inline .Button {
    display: block;
    text-align: left;
    padding-left: 1em;
  }
}

.Button--red {
  color: rgb(203, 36, 49);
}
.Button--red:hover {
  color: rgb(203, 36, 49);
}

/**
 * Modifier: buttons without button style
 * By default they will appear as links
 */
.Button--clear {
  border: none !important;
  background: transparent !important;
  padding: 0;
  margin: 0;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: normal;
}

.Button--clear.all-disabled {
  border: none !important;
}

.Button--formRow {
  margin: -0.25em 0 0 0.5em;
}

.Button--link {
  background: #FCFCFC;
  color: #427dc4;
  font-weight: 500;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.Button--link i {
  margin-right: 2px;
}
.Button--link:hover, .Button--link:focus {
  background: #f4f4f4;
}
.Button--link:active {
  color: #000;
}

.is-disabled,
.all-disabled {
  opacity: 0.6 !important;
}
.is-disabled:hover,
.all-disabled:hover {
  color: #a0a0a0 !important;
  cursor: not-allowed;
}
.is-disabled:active, .is-disabled:focus,
.all-disabled:active,
.all-disabled:focus {
  outline: none;
}

.Button--text {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: left;
  line-height: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border: none;
  font-weight: 500;
  margin-left: 4px;
}
.Button--text:hover {
  color: inherit;
  background: transparent;
}

.Button.Button--link--mini {
  font-weight: normal !important;
  font-size: 1.2rem !important;
}

.Button--linkPositive {
  font-weight: bold;
  color: rgb(40, 167, 69);
}

.Button--linkPositive:hover {
  color: rgb(40, 167, 69);
}

.Button--linkNegative {
  font-weight: bold;
  color: rgb(203, 36, 49);
}

.Button--linkNegative:hover {
  color: rgb(203, 36, 49);
}

.Button--linkSecondary {
  color: #999;
  font-size: 1.2rem !important;
}

.Button-label {
  position: relative;
  top: -1px;
  font-size: 13px;
}

/*
    Sign-up Form Buttons
    E.g. sign in with google github
    --------------------------------

*/
.Button--signup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: white;
  color: #4f566b;
  text-shadow: none;
  font-weight: 400;
  font-size: 14px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06);
}
.Button--signup:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}
.Button--signup:active {
  box-shadow: none;
  outline: none;
}

@media only screen and (max-width: 480px) {
  .Button--githubSignUp {
    margin-bottom: 18px;
  }
}

.Button--maestro {
  background: #9f7aea;
  border-color: #9f7aea;
}
.Button--maestro:hover {
  background: #9f7aea;
  border-color: #9f7aea;
  filter: brightness(105%);
}

.Button--skycap {
  background: #667eea;
  border-color: #667eea;
}
.Button--skycap:hover {
  border-color: #667eea;
  background: #667eea;
  filter: brightness(105%);
}

.Button--kubernetes {
  background: #326DE6;
  border-color: #326DE6;
}
.Button--kubernetes:hover {
  background: #326DE6;
  border-color: #326DE6;
  filter: brightness(105%);
}

.Button--prepress {
  background: #047857;
  border-color: #047857;
  color: #fff;
}
.Button--prepress:hover {
  background: #047857;
  border-color: #047857;
  filter: brightness(105%);
  color: #fff;
}

/*
  Wrapper for buttons used as navigation elements
  within primary content e.g. load more within a timeline
  or activity stream
*/
.ButtonContainer {
  padding: 3em;
  text-align: center;
}

/*
    CtaBlankSlate
    --------------------------------
    CTA button modules
    e.g. stack blank slate cta for rack or docker based stack
*/
.CtaBlankSlate {
  margin: 5em 0 5em 0;
}

@media only screen and (min-width: 1024px) {
  .CtaBlankSlate-left {
    margin-right: 2em;
  }
}
@media only screen and (max-width: 480px) {
  .CtaBlankSlate-left {
    padding: 1em 0;
  }
}

@media only screen and (min-width: 1024px) {
  .CtaBlankSlate-right {
    margin-left: 2em;
  }
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
  .CtaBlankSlate-right {
    padding: 1.5em 0;
  }
}

.CtaBlankSlate-primary {
  display: block;
  margin-bottom: 0.4em;
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 1px;
}
@media only screen and (min-width: 1024px) {
  .CtaBlankSlate-primary {
    font-size: 1.9rem;
  }
}

.CtaBlankSlate-secondary {
  font-weight: 400;
  font-size: 1.4rem;
}
@media only screen and (min-width: 1024px) {
  .CtaBlankSlate-secondary {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 480px) {
  .CtaBlankSlate-secondary {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
 *  Ajax Toggle Buttons (on off state)
----------------------------------------------------------------------------- */
.btn-toggle-group {
  box-sizing: border-box;
}
.btn-toggle-group .btn-toggle {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  background: #ddd;
  border: none;
  min-height: 24px;
  min-width: 40px;
  border-radius: 5px 0 0 5px;
  vertical-align: bottom;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.3rem;
  color: #666;
}
.btn-toggle-group .btn-toggle:hover {
  background: #ccc;
  color: #000;
}
.btn-toggle-group .btn-toggle.working {
  background: #f0f0f0;
}
.btn-toggle-group .btn-toggle--lrg {
  min-height: 3em;
  min-width: 6em;
}
.btn-toggle-group .btn-toggle + .btn-toggle {
  left: -4px;
  border-radius: 0 5px 5px 0;
}
.btn-toggle-group .toggled {
  background: linear-gradient(#62c462, #5BB75B);
  color: #fff;
  font-weight: bolder;
  cursor: default;
}
.btn-toggle-group .toggled:hover {
  background: linear-gradient(#62c462, #5BB75B);
  color: #fff;
}

.Button-logo {
  position: relative;
  width: 15px;
  height: 15px;
  top: 2px;
  left: -1px;
  margin-right: 2px;
}
@media (max-width: 620px) {
  .Button-logo {
    display: none;
  }
}

.Button-logoLabel {
  position: relative;
  top: -1px;
}

.List-identicon {
  position: relative;
  top: 3px;
  left: 0;
  margin-right: 4px;
  width: 14px;
  height: 14px;
}

button.Button--inField {
  position: absolute;
  right: 0;
  top: 0;
  min-height: var(--form-element-height);
  padding: 4px 14px;
  border-radius: 0 3px 3px 0 !important;
  border-top: none;
  border-right: none;
  border-bottom: none;
  color: #427dc4;
  background: #FAFBFC;
  text-shadow: none;
  box-shadow: none;
}
button.Button--inField:hover {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}
button.Button--inField:focus {
  outline: none;
}
button.Button--inField:active {
  box-shadow: none;
  color: #000;
}

.webkit button.Button--inField,
.chrome button.Button--inField {
  top: -1px;
  right: -1px;
}

button.Button--inField--primary {
  background: #339900;
  background: #62c462;
  color: #fff;
}

button.Button--inField--normal {
  border: 1px solid #CECECE !important;
}

button.Button--rowField {
  position: absolute;
  right: 0;
  top: 0;
  min-height: var(--form-element-height);
  padding: 4px 14px;
  border-radius: 3px !important;
  border: 1px solid #62c462;
  color: #62c462;
  text-transform: uppercase;
  text-shadow: none !important;
}
button.Button--rowField:hover, button.Button--rowField:focus {
  outline: none;
  color: #fff;
  background: #62c462;
}

/* button with spinner */
.Button--spinner {
  text-align: center;
  min-width: 100px;
}

/* disabled while deploying */
body.is-deploying #js_apply_rules {
  cursor: not-allowed !important;
  opacity: 0.3 !important;
  color: #999 !important;
  border: 1px solid #BFBFBF !important;
  background: #FCFCFC !important;
  pointer-events: none !important;
}
body.is-deploying #js-clone-row {
  pointer-events: none !important;
}
body.is-deploying #js-clone-row * {
  cursor: not-allowed !important;
  opacity: 0.3 !important;
  color: #999 !important;
  pointer-events: none !important;
}

.Button-textLabel {
  font-size: 13px !important;
}

.Button--spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.Button--spinner .Spinner {
  display: none;
}

.Button--spinner.is-active .Spinner {
  display: inline-block;
}
.Button--spinner.is-active .Button-textLabel,
.Button--spinner.is-active .Button-icon {
  display: none;
}

.Button--noBorders {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ==========================================================================
   FORM CLASS
   ========================================================================== */
/*
    DESCRIPTION
    -----------
    Forms and form element styling

    References for BEM & SUIT SYNTAX & CSS ARCHITECTURE
    ----------------------------------------------------

    https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md


    Markup Example
    --------------

    <div class="Module-formContainer">
        <%= form_tag(analyze_docker_stacks_path,
             :class => 'Form',
             :id => 'js_',
             :'data-submitlabel' => 'Verifying') do %>
            <fieldset class="Form-fieldset Form-fieldset--divider">
                <ul class="List Form-listStacked  Form-listStacked--spaced js_service_form_list">
                    <li class="Form-item">
                        <label for="service_name" class="Form-label Form-label--primary">
                            What&#8217;s the Service Name?
                        </label>
                        <input type="text"
                               class="Form-input input-xlarge js_service_name    required"
                               data-msg-required="Required"
                               id="service_name"
                               name="service"
                               value="<%= %>">
                        <span id="js_service_name_msg" class="Form-fieldText"></span>
                    </li>
                </ul>
            </fieldset>
            <div class="Form-actions">
                <a href="#" class="Button Button--clear Button--link Button--linkPositive  js_add_service">
                    <i class="icon-plus-alt ico--mini"></i> <span class="Button-label">Add Another Service</span>
                </a>
            </div>
        <% end %>
    </div>

    MODIFIERS
    ---------

    Form--stacked {}
    Form--inline {}
*/
/**
 * Form base
 */
.Form {
  margin-bottom: 0;
}
.Form .form-actions {
  margin-bottom: 0;
  padding-bottom: 18px;
}
.Form p {
  line-height: 1.5;
}

/*
 * Default form input styling
 * ti-input is the class used by a Vue.js Tagging component
 */
.Form-input,
.ti-input {
  box-sizing: border-box;
  min-height: var(--form-element-height);
  box-shadow: var(--form-element-box-shadow);
  background: var(--form-element-background-color);
  border: var(--form-element-border);
  border-radius: var(--form-element-border-rad);
  transition: var(--form-element-background-transition);
  color: var(--form-element-color);
}

/* Field with errors  */
.field_with_errors .Form-input,
.Form-input.field-error {
  box-shadow: none !important;
  background: white !important;
  color: black !important;
  font-weight: 500 !important;
}

/*
  smaller input field variations
  used inside property tables (edit in place) and other compact form elements
*/
input.Form-input.Form-input--smaller {
  min-height: var(--form-element-small-height);
  padding: var(--form-element-small-padding);
}

input.Form-input.Form-input--sml {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.055);
  border: 1px solid #d7dbe0;
  min-height: 24px;
  margin: 0 !important;
  font-size: 12px;
}

/*
  Number fields - with counter
  container scaling field - needs high specificity selector
*/
form table input[type=number].Form-inputCounter {
  position: relative;
  top: -1px;
  border: 1px solid #e8e8e8;
  margin: 0;
  font-weight: 500;
  font-size: 1.2rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  border-radius: 7px;
  background-color: #efefef;
  text-align: center;
  padding: 4px;
}
form table input[type=number].Form-inputCounter:focus {
  border: 1px solid #d6d6d6;
  box-shadow: none;
}

input[type=number].Form-inputCounter.is-hidden {
  display: none;
  opacity: 0;
}

/* Form-inputWrap is used for buttons within inputs */
.Form-inputWrap {
  box-sizing: border-box;
  min-height: var(--form-element-height);
  box-shadow: var(--form-element-box-shadow);
  background: #fcfcfc;
  border: var(--form-element-border);
  border-radius: var(--form-element-border-rad);
  padding-left: 2px;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  color: #000;
  margin-bottom: 8px !important;
}

.Form-inputWrap.Form-inputWrap--Focused {
  border: 1px solid rgba(82, 168, 236, 0.8);
}

.Form-inputWrap--tall {
  min-height: 46px;
  font-size: 13px;
}

.Form-inputWrap {
  position: relative;
  height: 36px;
  display: table;
}
.Form-inputWrap .Form-select {
  position: relative;
  top: 1px;
  border: none;
  box-shadow: none;
  margin: 0;
  width: 86%;
  height: 34px !important;
  min-height: 34px !important;
}
.Form-inputWrap .Form-select:focus {
  box-shadow: none;
}

.Form-inputWrap--small {
  width: 82% !important;
}
.Form-inputWrap--small .Form-select {
  width: 75%;
}

.Form-inputWrap--medium {
  width: 200px !important;
}
@media only screen and (max-width: 1023px) {
  .Form-inputWrap--medium {
    width: 100% !important;
  }
}
.Form-inputWrap--medium .Form-select {
  width: 75%;
}
@media only screen and (max-width: 1023px) {
  .Form-inputWrap--medium .Form-select {
    width: 90% !important;
  }
}

input.Form-inputClear {
  width: 65%;
  /* the button takes x amount of space & parent is percentage */
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent !important;
  margin: 0 !important;
  min-height: 28px;
  border-radius: 0;
  border: none !important;
}
input.Form-inputClear:focus {
  box-shadow: none !important;
}

input.Form-inputClear.Form-inputClear--lrg {
  width: 480px;
}

.Form-inputWrap > .Form-inputInvisible {
  display: table-cell !important;
  vertical-align: middle !important;
  border: none;
  width: 56px !important;
  box-shadow: none !important;
  background: transparent;
  border-radius: 0 !important;
  padding: 0 !important;
  line-height: 1.8;
  margin: 0 6px 0 0 !important;
  font-size: 13px;
}

.Form-inputWrap > * {
  position: relative;
  top: 5px;
}

.Form-inputWrap > .Form-inputInvisible:last-child {
  border-right: 0 !important;
}

.Form-inputWrap > .Form-inputInvisible:first-child {
  border: none;
}

.Form-inputInvisible:focus {
  border: none !important;
}

.Form-input--normal {
  width: 228px;
}

.Form-input--modalSmall {
  width: 230px !important;
}

input.Form-input--modalSmall {
  width: 220px;
}

.Form-input--modalSmallWide {
  width: 510px !important;
}

.Form-input--noShade {
  background: #fff !important;
  border-color: #bbb !important;
}

.Form-input--monoSpaced {
  font-size: 12px;
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important !important;
}

.Form-input--noRadLeft {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.Form-input--noRadRight {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.Form-input--noBorderLeft {
  border-left: none !important;
}

.Form-input--noBorderRight {
  border-right: none !important;
}

/* these are edit in place like inputs with no borders */
input.Form-inputText {
  border: 1px solid #F1F7FA !important;
  box-shadow: none !important;
  background: #F1F7FA !important;
  color: #13437d !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 #fff !important;
  margin: 0 !important;
  padding: 1px !important;
  width: 20em !important;
}
input.Form-inputText:hover, input.Form-inputText:focus {
  cursor: text;
  background: #fff !important;
}

.Form-inputText.Form-inputText--readonly {
  opacity: 1 !important;
}
.Form-inputText.Form-inputText--readonly:hover {
  cursor: default !important;
  background: transparent !important;
}

input[type=text].Form-inputTableRow {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
  height: 14px !important;
  padding: 3px !important;
  border: 1px solid #ddd;
}

.u-hoverParent:hover .Form-inputTableRow {
  border: 1px solid #c6c6c6 !important;
}
.u-hoverParent:hover .Form-inputTableRow:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.2) !important;
  /* blue box-shadow */
  border: 1px solid rgba(82, 168, 236, 0.8) !important;
}

input[type=text].Form-inputTableRow:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.2) !important;
  /* blue box-shadow */
}

.Form-textArea {
  box-sizing: border-box;
  box-shadow: var(--form-element-box-shadow);
  background: #fcfcfc;
  border: 1px solid #C1C1C1;
  border-radius: 3px;
  padding: 6px;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  color: #000;
}

input.Form-NumberNoChrome {
  -moz-appearance: textfield !important;
  -webkit-appearance: none;
}

.Form-radioCheck--sml {
  width: 15px !important;
  height: 15px !important;
}

.Form-radioCheck--med {
  width: 16px !important;
  height: 16px !important;
}

.Form-radioCheck--lrg {
  width: 18px !important;
  height: 18px !important;
}

/**
 * Form Labels
 */
.Form-label {
  color: #2f373f;
  font-size: 1.4rem;
  font-weight: 500;
}
.Form-label .u-textMuted {
  line-height: 1;
}
.Form-label .Form-labelSub {
  display: block;
  line-height: 1.2;
  font-weight: 400;
  font-size: 13px;
  padding-top: 2px;
  padding-bottom: 6px;
}

.Form-label.is-disabled {
  opacity: 0.5 !important;
}

.Form-label--primary {
  color: #000;
}

.Form-label--padded {
  margin-bottom: 1em;
}

.Form-label--normal {
  font-weight: normal;
}

.Form-label--secondary {
  color: #333;
}

.Form-label--inline {
  position: relative;
  padding: 0 0 0 4px;
  display: inline-block !important;
  line-height: 1;
  cursor: pointer;
}

.Form-label--inlineWide {
  padding: 0 0 0 7px;
}

.Form-label--mini {
  font-size: 1.1rem;
  font-weight: normal;
  margin-bottom: 1px !important;
  color: #999;
}

.Form-labelSidebar {
  font-size: 1.2rem;
  color: #666;
}

/* Usecase - label contains a sentance with an input */
.Form-labelText {
  display: inline-block !important;
  line-height: 1;
}

/* labels with multi-line additional text
   e.g. saved deployment options */
.Form-labelXtra {
  display: block;
  padding: 0.3em 0 0.75em 0;
  color: #606872;
  font-weight: normal;
  line-height: 1.4;
  font-size: 1.3rem;
}
@media only screen and (min-width: 1230px) {
  .Form-labelXtra {
    padding-right: 12em;
  }
}
.Form-labelXtra .u-code {
  font-size: 12px;
  padding: 1px 3px !important;
}

.modal .Form-labelXtra {
  padding-right: 0;
}

.dropdown-menu .Form-labelXtra,
.Drawer-body .Form-labelXtra {
  padding-right: 0;
}

.Form-label--wrap {
  line-height: 1;
}
.Form-label--wrap .Form-labelWrapInner {
  position: relative;
  top: 2px;
  padding: 0 0 0 0.27em;
}

.Form-infieldLabel::-webkit-input-placeholder {
  opacity: 1;
  color: #4f566b;
  font-weight: normal;
}

.Form-infieldLabel::-moz-placeholder {
  opacity: 1;
  color: #4f566b;
  font-weight: normal;
}

.Form-label--clean {
  font-weight: 400;
  margin-bottom: 0;
  line-height: 1;
}
.Form-label--clean:hover {
  color: #000;
}

/**
 * Fieldsets and Field Lists
 */
.Form-fieldset--containsSpinner {
  position: relative;
}

.Form-fieldset {
  background: #fff;
  margin: 0;
  padding: 20px 26px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* fieldset heading h5 or h6 */
.Form-fieldsetTitle {
  color: #000;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}

.Form-fieldsetTextIntro {
  font-size: 14px;
  margin: -6px 0 13px !important;
  color: #4b545b;
}

.Form-fieldsetTitle--topBorder {
  border-top: 1px solid #eee;
  padding-top: 14px;
  line-height: 1.5;
}

.Form-legend {
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 1.2em;
  border-bottom: 1px solid #eee;
}

.Form-fieldsetLegend {
  color: #000;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  padding-bottom: 10px;
  margin-top: 6px;
  margin-bottom: 1.2em;
  border-bottom: 1px solid #eee;
}
.Form-fieldsetLegend .Form-fieldsetLegendNumber {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-left: 1px;
  margin-right: 5px;
}

.Form-fieldset--withTopMargin {
  margin-top: 20px;
}

.Form-fieldset--expandable .Form-fieldsetLegend {
  cursor: pointer;
}
.Form-fieldset--expandable .Form-fieldsetLegend .Icon-expander {
  position: relative;
  top: 2px;
  width: 12px;
  margin-right: 6px;
  transition: 0.25s ease-in-out;
}
.Form-fieldset--expandable .Form-fieldsetGroup {
  display: none;
}

.Form-fieldset--expandable.fieldset-is-expanded .Form-fieldsetLegend {
  border-bottom: 1px solid #ddd;
}
.Form-fieldset--expandable.fieldset-is-expanded .Form-fieldsetLegend .Icon-expander {
  transform: rotate(90deg);
}
.Form-fieldset--expandable.fieldset-is-expanded .Form-fieldsetGroup {
  display: block;
}

.Form-fieldsetGroupActions {
  padding-top: 2px;
  padding-bottom: 18px;
}

.Form-fieldset--expandable.is-disabled .Form-fieldsetLegend {
  color: #999;
  font-weight: 500;
  pointer-events: none;
  cursor: not-allowed;
}
.Form-fieldset--expandable.is-disabled .Form-fieldsetLegendNumber {
  background: #c4c4c4 !important;
}

.Form-fieldset:first-child .Form-fieldsetLegend:first-child {
  margin-top: 0;
}

.Form-fieldset--compact {
  margin: 0;
  padding: 14px 24px !important;
}

.Form-fieldset--wide {
  padding: 16px !important;
}

.Form-fieldset--noPadding {
  margin: 0;
  padding-bottom: 0;
}

.Form-fieldset--related {
  padding-top: 0.5em;
  padding-bottom: 1.2em;
}

.Form-fieldset--tabbed {
  padding: 1em 1.6em;
}

.Form-fieldset--modalSubSection {
  /* eg. inner modal fieldset e.g. new/existing server toggle */
  margin: 0;
  padding: 0 0 6px 0;
}

.Form-fieldset--noBorderRadius {
  border-radius: 0 !important;
}

.Form-fieldset--collapsible {
  border-radius: 0 !important;
}
.Form-fieldset--collapsible .Form-fieldsetTitle {
  margin-bottom: 0;
}
.Form-fieldset--collapsible .Form-listRadioCheck li.Form-listRadioCheck-item:first-child {
  margin-top: 10px;
}

.Form-fieldsetHeading {
  margin: 0.3em 0 1.25em;
  line-height: 1;
  font-size: 1.5rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
}

.Form-fieldsetHeading--flush {
  margin: 0.3em 0 0.5em;
}

.Form-fieldset--divider {
  border-bottom: 1px dashed #D1D1D1;
}

.Form-fieldset--dividerSolid {
  border-bottom: 1px solid #eee;
  border-radius: 0 !important;
}

.Form-fieldset--inRolloutState {
  border: none !important;
}

.Form-fieldset--dividerTopSolid {
  border-top: 1px solid #eee;
}

.Form-fieldsetHeading--dividerTop {
  padding-top: 1.2em;
  margin: 1.2em 0 1em 0;
  border-top: 1px solid #ddd;
}

.Form-fieldset--radioCheck {
  padding-top: 0 !important;
}

/* Nested groups within fieldsets */
.Form-group {
  position: relative;
  padding: 14px 16px 1px 16px;
  background-color: #FAFBFC;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  margin-bottom: 8px;
}
.Form-group .Form-groupControls {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 8px;
}

.Form-listStacked {
  list-style: none;
  margin: 0;
  padding: 0;
}
.Form-listStacked .Form-item {
  box-sizing: border-box;
  margin-bottom: 24px;
}
.Form-listStacked .Form-item.Form-item--withMargin {
  margin-bottom: 24px !important;
}
.Form-listStacked .Form-item.Form-item--withTopMargin {
  margin-top: 18px !important;
}
.Form-listStacked .Form-item--related {
  margin-top: -6px;
}
.Form-listStacked .Form-label {
  display: block;
  margin-bottom: 5px;
}
.Form-listStacked .Form-item:last-child,
.Form-listStacked .Form-item:only-child {
  margin-bottom: 0;
}

.Form-row {
  padding-bottom: 18px;
}
.Form-row input {
  margin-bottom: 0 !important;
}

.Form-item--half {
  width: 50% !important;
}

@media only screen and (max-width: 1126px) {
  .Form-item--half {
    width: 100% !important;
  }
}
li.Form-item.Form-item--padded {
  margin-bottom: 20px !important;
}

.Form-listStacked--compact .Form-item {
  box-sizing: border-box;
  margin-bottom: 10px;
}

.Form-listStacked--compressed .Form-item {
  box-sizing: border-box;
  margin-bottom: 14px;
}
.Form-listStacked--compressed .Form-item:only-child {
  box-sizing: border-box;
  margin-bottom: 0;
}

.Form-listStacked--spaced .Form-item {
  margin-bottom: 25px;
}

.Form-listStacked--spacedXtra .Form-item {
  margin-bottom: 35px;
}

.Form-listStacked--padded {
  padding-bottom: 1.2em !important;
}

.Form--single .Form-input {
  margin: 0 !important;
}

.Form-item.is-collapsed {
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  margin-bottom: 0;
}

.Form-item.is-collapsed.open {
  max-height: 66px;
  margin-bottom: 16px;
  overflow: visible;
}

/*
    if a grid is applied to form list items
    additional el is needed for vertical spacing
*/
.Form-grid {
  padding: 0.65em 0;
}

.Form-gridItem {
  padding: 12px 0;
}

/*
    wrapper for form elements
    eg. forms with infield labels
*/
.Form-fieldContainer {
  padding: 0.15em 0;
}

/*
    Modal Forms
*/
.Form-fieldset--modal {
  max-height: 400px;
  /* allow the modal body to scroll */
  overflow-y: auto;
}

.Form-modalActions {
  padding: 1.4em 1.7em;
}

.Form-modalActions--divider {
  border-top: 1px solid #e0e0e0;
  /* remove need for hr */
}

/**
 * RADIO & CHECKBOX LIST ITEMS
 */
/*
    <ul class="List Form-listRadioCheck  js_source_radio">
        <li class="Form-listRadioCheck-item">
            <input type="radio" name="radio"> -->
            <label class="Form-label Form-label--inline">
                option 1
            </label>
        </li>
        <li class="Form-listRadioCheck-item">
            <input type="radio" name="radio">
            <label class="Form-label Form-label--inline">
                option 2
            </label>
        </li>
    </ul>
*/
.Form-listRadioCheck {
  position: relative;
  padding-top: 8px;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  /*
    Used for a radio button variation in Rails form 2
    Used to modify non standard padding and margins on that page
  */
}
.Form-listRadioCheck .Form-label--inline {
  top: 1px;
}
.Form-listRadioCheck .Form-listRadioCheck-item {
  position: relative;
  padding-top: 1px;
  padding-bottom: 1px;
}
.Form-listRadioCheck .Form-listRadioCheck-item > input[type=checkbox],
.Form-listRadioCheck .Form-listRadioCheck-item > input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
}
.Form-listRadioCheck .Form-listRadioCheck-item > .Form-label {
  padding-left: 24px;
}
.Form-listRadioCheck .Form-listRadioCheck-item .Form-listRadioCheck-textInput {
  padding-left: 26px;
  padding-top: 2px;
}
.Form-listRadioCheck .Form-listRadioCheck-item .Form-listRadioCheck-textInput span.field-error {
  display: block;
  padding-left: 0;
  padding-top: 5px;
}
.Form-listRadioCheck .Form-listRadioCheck-item .Form-listRadioCheck-textInput--padded {
  padding-top: 8px;
}
.Form-listRadioCheck .Form-listRadioCheck-item .Form-listRadioCheck-hint {
  padding-top: 1px;
  font-size: 12px;
}
.Form-listRadioCheck .Form-listRadioCheck-item--indented {
  margin-left: 26px;
}
.Form-listRadioCheck .Form-listRadioCheck-item--singleLine {
  padding-bottom: 14px;
}
.Form-listRadioCheck .Form-listRadioCheck-item.is-disabled * {
  opacity: 0.95;
}
.Form-listRadioCheck .Form-listRadioCheck-item--withXtra {
  margin-top: 3px;
  margin-bottom: 0;
}
.Form-listRadioCheck .Form-listRadioCheck-item--withXtra .Form-radioCheck--sml {
  top: 3px !important;
}
.Form-listRadioCheck .Form-listRadioCheck-item--withXtra .Form-labelXtra {
  font-size: 13px;
  padding-top: 1px;
  padding-bottom: 0;
}

/* Used in onboarding large radio button variation */
.Form-listRadioCheck.Form-listRadioCheck--lrg .Form-listRadioCheck-item {
  border-radius: 6px;
  padding-left: 24px;
}
.Form-listRadioCheck.Form-listRadioCheck--lrg .Form-radioCheck {
  left: 16px !important;
  width: 18px;
  height: 18px;
}
.Form-listRadioCheck.Form-listRadioCheck--lrg .Form-label {
  color: #000;
  font-weight: 600;
}
.Form-listRadioCheck.Form-listRadioCheck--lrg .Form-labelXtra {
  font-size: 14px;
  font-weight: normal;
  padding-right: 0;
  color: #333;
}

.Form-listRadioCheck-hint {
  padding-top: 1px;
  font-size: 12px;
}

.Form-listRadioCheck-item--indented {
  margin-left: 26px;
}

.Form-listRadioCheck-item--topPadded {
  padding-top: 1em;
}

.Form-listRadioCheck-item--related {
  margin-top: -4px;
}

.Form-listRadioCheck-textInput.all-disabled * {
  opacity: 0.6;
}

.Form-listRadioCheck-textInput.Form-listRadioCheck-textInput--indented {
  padding-left: 44px;
}

.Form-listRadioCheck--singleRow .Form-listRadioCheck-item {
  padding-top: 3px;
  padding-bottom: 3px;
}
.Form-listRadioCheck--singleRow .Form-listRadioCheck-item .Form-label--inline {
  padding-bottom: 0;
}
.Form-listRadioCheck--singleRow .Form-listRadioCheck-item > input[type=checkbox],
.Form-listRadioCheck--singleRow .Form-listRadioCheck-item > input[type=radio] {
  top: 3px;
}

.Form-listRadioCheck--padded .Form-listRadioCheck-item {
  padding-top: 6px;
  padding-bottom: 6px;
}
.Form-listRadioCheck--padded .Form-listRadioCheck-item > input[type=checkbox],
.Form-listRadioCheck--padded .Form-listRadioCheck-item > input[type=radio] {
  top: 6px;
}

.Form-listRadioCheck--inline li {
  display: inline-block;
  padding-right: 3em !important;
}
.Form-listRadioCheck--inline li .Form-label--inline {
  position: relative;
  top: 2px;
  margin-bottom: 0 !important;
  font-size: 14px;
}

.Form-listRadioCheck.Form-listRadioCheck--indented {
  padding-left: 28px;
  padding-bottom: 16px;
}

.Form-list-relatedItem {
  padding-top: 0.65em;
}

.Form-listCompact .Form-listCompact-item {
  line-height: 1;
  padding: 0.5em 0;
}

/**
 *  RADIO BUTTONS WITH NESTED TEXT INPUTS
 */
.RadioTextInputList .RadioTextInputList-item {
  padding-top: 10px;
  padding-bottom: 10px;
}
.RadioTextInputList .RadioTextInputList-item [type=radio] {
  margin: 0 0 2px 0;
}
.RadioTextInputList .Form-label {
  padding-left: 4px;
}
.RadioTextInputList .RadioTextInputList-textInput {
  padding-left: 26px;
  padding-top: 2px;
}
.RadioTextInputList .RadioTextInputList-hint {
  padding-top: 1px;
  font-size: 12px;
}

.RadioTextInputList-textInput.all-disabled * {
  opacity: 0.6;
}

/**
 *  RADIO BUTTONS WITH NESTED TEXT INPUTS
 */
.RadioTextInputList .RadioTextInputList-item {
  padding-top: 10px;
  padding-bottom: 10px;
}
.RadioTextInputList .RadioTextInputList-item .Form-label {
  padding-left: 4px;
}
.RadioTextInputList .RadioTextInputList-textInput {
  padding-left: 26px;
  padding-top: 2px;
}
.RadioTextInputList .RadioTextInputList-hint {
  padding-top: 1px;
  font-size: 12px;
}

.RadioTextInputList-textInput.all-disabled * {
  opacity: 0.6;
}

/**
 *  FIELD MODIFIERS
 */
.Form-input--fullWidth,
.Form-select--fullWidth {
  width: 100% !important;
  box-sizing: border-box;
}

.twitter-typeahead {
  width: 100% !important;
}

.Form-input--large {
  width: 380px;
}

.Form-input--single {
  height: 35px !important;
}

/*
  Disabled form input
  same visual style as a disabled attribute on an input.
  use if an empty value needs to be submitted
*/
.Form-input--disabled {
  pointer-events: none !important;
  cursor: not-allowed;
  background-color: #eeeeee !important;
  border-color: #ddd !important;
  opacity: 0.6 !important;
}

/**
 * FORM OPTION
 */
.Form-option {
  margin: 0.75em 0 0;
}
.Form-option .Form-field {
  margin: 0.5em 0;
}

.Form-optionIntro {
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 1.6em;
  min-height: 122px;
}

.Form-optionIntro:hover {
  cursor: pointer;
}

.Form-optionIntro-title {
  color: #666;
  font-size: 1.3rem;
  margin: 0 0 0.25em;
}

.Form-optionIntro-text {
  color: #427dc4;
  font-size: 1.3rem;
  padding: 0 3em;
}

.Form-optionIntro:hover .Form-optionIntro-text {
  color: #427dc4;
}

/**
 * FORM ACTIONS
 */
.Form-actions {
  overflow: hidden;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #fff;
  padding: 20px 26px;
  border-top: 1px solid #eee;
}

.Form-actions--compact {
  padding: 2em 1.6em;
}

.Form-actions--table {
  padding: 1.2em 1.4em;
}

.Form-actions--noDivider {
  border: none;
  padding-top: 0;
}

.Form-fieldsetActions {
  padding: 20px 26px;
}

/**
 * Form column
 * class for form container
 * <li class="Form-column">
 */
.Form-column {
  box-sizing: border-box;
  padding: 0 2em 1em 0 !important;
}

/**
 * FORM FIELD HELPER STYLES
 */
.Form-textIntro {
  margin: 0 0 18px 0 !important;
  font-size: 14px;
  line-height: 1.5;
}

.Form-text {
  font-size: 13px;
  color: #777;
}

.Form-text--spaced {
  margin-top: 0.75em;
}

.Form-fieldText {
  position: relative;
  top: -1px;
  display: inline-block;
  font-size: 1.2rem;
  padding: 0 0.8em;
  color: #999;
}

.Form-belowHint {
  padding: 2px 0 0 0;
  font-size: 12px;
  color: #4b545b;
}

.Form-sideHint {
  position: relative;
  margin: 33px 0 0 -9px;
  font-weight: 500;
  font-size: 14px;
}

.Form-fieldText--col {
  padding-left: 20px;
}

.Form-fieldText.has-error {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  color: #CC3333 !important;
}

.Form-fieldTextCta {
  padding-top: 8px;
  font-weight: 500;
}

.Form-fieldTextCta--action {
  padding-top: 34px;
}

.ErrorText {
  color: #a52727;
}

.ErrorRegion {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  margin-bottom: 16px;
  color: #a52727;
  background-color: #FFF5F5;
  border-radius: 4px;
}
.ErrorRegion p {
  line-height: 1.5;
}
.ErrorRegion p:only-child,
.ErrorRegion p:last-child {
  margin: 0 !important;
}

.ErrorRegion--bordered {
  border: 1px solid #FED7D7;
}

.ErrorRegion--borderLeft {
  border-left: 4px solid #FEB2B2;
}

/* Used for multicol field messages
   e.g. docker services validation spans both cols.
*/
.Form-rowText {
  padding: 0.25em 0 0 1px;
  margin: 0 0 1em;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: bold;
}

.Form-rowTextIcon {
  margin-right: 3px;
}

.Form-rowTextLink {
  display: inline-block;
  margin-top: 4px;
  font-weight: 800 !important;
}

/**
 *  FORM MODIFIER
 *  A utility to disable all child form elements
 */
.Form * {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* This disables all controls within the form */
.Form.is-disabled,
.Form-fieldset.is-disabled {
  opacity: 1 !important;
}
.Form.is-disabled .Button,
.Form-fieldset.is-disabled .Button {
  color: #999 !important;
  border: 1px solid #ddd !important;
  background: #FCFCFC !important;
  box-shadow: none;
}
.Form.is-disabled .fieldset *,
.Form.is-disabled .Form-fieldsetGroup *,
.Form.is-disabled .Form-item,
.Form.is-disabled textarea,
.Form.is-disabled input[type],
.Form.is-disabled select,
.Form.is-disabled label,
.Form.is-disabled h3,
.Form.is-disabled h4,
.Form.is-disabled p,
.Form-fieldset.is-disabled .fieldset *,
.Form-fieldset.is-disabled .Form-fieldsetGroup *,
.Form-fieldset.is-disabled .Form-item,
.Form-fieldset.is-disabled textarea,
.Form-fieldset.is-disabled input[type],
.Form-fieldset.is-disabled select,
.Form-fieldset.is-disabled label,
.Form-fieldset.is-disabled h3,
.Form-fieldset.is-disabled h4,
.Form-fieldset.is-disabled p {
  pointer-events: none;
  opacity: 0.7;
}
.Form.is-disabled .Message--activity,
.Form-fieldset.is-disabled .Message--activity {
  opacity: 1 !important;
}

.Form.is-disabled .TabMini * {
  opacity: 1;
  pointer-events: auto;
}

ul.Form-listStacked.is-disabled .Form-item * {
  pointer-events: none;
  opacity: 0.6;
}

/*
    Disables form submission but allows interaction with controls within the form.
    Can be used for feature upselling so users can see what they are missing out on.
*/
.Form.feature-disabled .Message {
  display: none;
}
.Form.feature-disabled .Message--activity {
  opacity: 1;
}
.Form.feature-disabled .Button[type=submit] {
  color: #999 !important;
  border: 1px solid #ddd !important;
  background: #FCFCFC !important;
  box-shadow: none;
  pointer-events: none;
}
.Form.feature-disabled input[type=checkbox],
.Form.feature-disabled label.Form-label {
  pointer-events: none;
  opacity: 0.65;
}
.Form.feature-disabled * {
  opacity: 0.85;
}

.Module--disabled * {
  opacity: 0.85;
}
.Module--disabled .Button {
  color: #999 !important;
  border: 1px solid #ddd !important;
  background: #FCFCFC !important;
  box-shadow: none;
  pointer-events: none;
}

.FormEditInPlace-form.feature-disabled * {
  opacity: 0.5;
  pointer-events: none;
}
.FormEditInPlace-form.feature-disabled .Button[type=submit] {
  color: #999 !important;
  background: #FCFCFC !important;
  box-shadow: none;
  pointer-events: none;
}

body.is-sample-app .Form.feature-disabled * {
  opacity: 1;
}

/**
 *  This is used to block Maestro deployments
 *  if there are unvalidated image sources
 */
form.deploy-is-disabled #js_deployment_target *,
form.deploy-is-disabled .Module.js_server_module *,
form.deploy-is-disabled #js_add_server {
  pointer-events: none;
  opacity: 0.75;
}

.Form.is-disabled .spinner-svg {
  opacity: 1 !important;
}

.section-disabled * {
  pointer-events: none;
  opacity: 0.85 !important;
}

#js_app.js-ui-is-busy a.Module-LineItemAction {
  pointer-events: none !important;
}
#js_app.js-ui-is-busy a.Module-LineItemAction i {
  opacity: 0.9 !important;
  color: #eee !important;
}
#js_app.js-ui-is-busy #js_ob_spinner {
  display: block;
}

#vue_manage_services.js-ui-is-busy * {
  pointer-events: none;
  opacity: 0.9 !important;
  color: #eee !important;
}

/**
 *  FORM FIELDS WITH INNER ACTION BUTTONS
 *  E.G. Search fields
 */
.InputAddOn {
  position: relative;
  overflow: hidden;
  border: 1px solid #bbb;
  border-radius: 3px;
}

.InputAddOn--sidebar {
  width: 100%;
  height: 40px;
}

.InputAddOn-field {
  border: none !important;
  background: #fff !important;
  margin-bottom: 0 !important;
  box-shadow: none;
  margin-top: 2px;
  height: 33px !important;
  min-height: 33px !important;
}

.InputAddOn-field--sidebar {
  width: 69%;
  height: 28px !important;
}

@media (min-width: 1024px) and (max-width: 1218px) {
  .InputAddOn-field--sidebar {
    width: 64%;
  }
}
input.InputAddOn-field:focus,
input.InputAddOn-field:active {
  box-shadow: none !important;
  border: none !important;
}

.InputAddOn-button {
  position: absolute;
  right: 0;
  top: 0;
  background: #FCFCFC;
  padding: 0.65em 0.95em;
  border: none;
  border-left: 1px solid #bbb;
  border-radius: 0 !important;
  font-size: 1.3rem;
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
}

.InputAddOn-button--sidebar {
  padding: 1px;
  height: 39px;
  width: 40px;
  border-radius: 0;
}

.InputAddOnSelect {
  height: 36px;
  margin: 0;
}

.InputAddOn ::-webkit-input-placeholder {
  color: #BCBCBC;
  font-weight: 200;
}
.InputAddOn ::-moz-placeholder {
  color: #7C7C7C;
  font-weight: normal;
}

.u-strongPlaceholderText::-webkit-input-placeholder {
  color: #777 !important;
  font-weight: normal !important;
}

.u-strongPlaceholderText::-moz-placeholder {
  color: #777 !important;
  font-weight: normal !important;
}

/**
 *  FORM - TWO COL GRID
 *
 */
.Form-2col.grid {
  margin-left: -25px;
}
@media only screen and (max-width: 1023px) {
  .Form-2col.grid .grid__item {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
  }
}

@media (min-width: 1024px) {
  .Form-inputText {
    width: 94%;
  }
  .Form-select {
    width: 97%;
  }
}
/**
 *  FORM - VALIDATION
 *  Inline error message styles
 */
.Form-error {
  padding-top: 2px;
  color: #CC3333;
  font-weight: 500;
  font-size: 1.3rem;
}

/**
 * hint text styles
 */
.Form-fieldHint {
  padding-top: 2px;
  font-size: 12px;
  color: rgba(88, 97, 105, 0.8);
}
.Form-fieldHint p {
  font-size: 12px;
  margin-bottom: 5px !important;
}

.Form-fieldInfo {
  padding-top: 10px;
  padding-bottom: 3px;
  font-size: 14px;
  color: #606872;
}

.has-error {
  color: #CC3333 !important;
}
.has-error code {
  font-weight: normal;
}
.has-error a {
  color: #CC3333 !important;
  text-decoration: underline;
}

.is-fine {
  color: #468847 !important;
  font-weight: 400 !important;
}
.is-fine code {
  font-weight: normal;
  color: #468847 !important;
}
.is-fine a {
  color: #468847 !important;
  text-decoration: underline;
}

/*
  Still used by CSv1 onboarding pages
*/
.error-warning::before {
  position: relative;
  left: -5px;
  font-family: "cloud66-icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "[";
}

.error-warning {
  padding-left: 6px;
}

.success-checked,
.label-text {
  display: inline-block;
  padding-left: 6px;
}

/**
* Input field error styles
*/
.field-error .selectize-input,
input.field-error,
textarea.field-error,
select.field-error,
.Form-input.error,
.Form-inputWrap.field-error,
.Form-selectSource.field-error,
.field_with_errors input {
  border: 2px solid #CC3333 !important;
}

.field-successful {
  border: 1px solid rgb(40, 167, 69) !important;
}

.readonly {
  pointer-events: none;
  opacity: 0.6;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

/**
* Cross browser select styling
* Remove default browser styling for selects
*/
.Form-select:not([multiple]) {
  height: 36px;
  vertical-align: middle;
}

.Form-select--secondary {
  height: 30px !important;
  min-height: 30px !important;
  border: 1px solid #e0e0e0 !important;
}

.Form-select--secondary:focus,
.Form-select--secondary:active {
  box-shadow: none !important;
  border: 1px solid #bababa !important;
}

/*
    .Form-selectWrap is a hack used to style selects in jobs pages,
    it's needed as I have no idea what helper generates this markup
*/
.Form-selectWrap select {
  width: 100%;
}

.Form-selectWrap select,
.Form-select {
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  max-width: 100%;
  min-height: var(--form-element-height);
  padding-right: 24px;
  padding-left: 8px;
  vertical-align: middle;
  background: #fcfcfc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
  background-size: 8px 10px;
  box-shadow: var(--form-element-box-shadow);
  border: var(--form-element-border);
  border-radius: var(--form-element-border-rad);
  line-height: normal;
}

.Form-select--large {
  min-height: 42px;
  color: #3a72b7;
  font-weight: 500;
}

.Form-select--noShade {
  background-color: #fff;
  box-shadow: none;
}

.Form-select--normal {
  width: 300px;
}

.Form-select--small {
  width: 180px !important;
}

.Form-select--half {
  width: 50%;
}

.Form-select:focus {
  outline: none;
  border-color: #51a7e8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5);
}

.Form-select::-ms-expand {
  opacity: 0;
}

.Form-select-sml {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 12px;
}

.Form-select-sml:not([multiple]) {
  height: 26px;
  min-height: 26px;
}

.Form-selectInvisible {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 13px;
  box-shadow: none;
}

.Form-selectInvisible:active,
.Form-selectInvisible:focus {
  outline: none !important;
  box-shadow: none !important;
}

.Form-selectInvisibleWrap {
  border-left: 1px solid #c1c1c1;
}

.chrome #js_public_port_select {
  margin-left: 2px;
}

.icon--formWrap {
  margin: 0 4px 0 6px;
}

.mozilla #container_port {
  padding-left: 4px !important;
}

.Module--onboardingEnvVar label[for=envfile] {
  font-size: 1.3rem !important;
  color: #000;
  font-weight: 700;
  margin: 0 0 1rem;
}
.Module--onboardingEnvVar .padded-fieldset {
  padding: 0 9px !important;
}

.js_container_port_overlay_form .field-success,
.js_container_port_overlay_form .field-success:focus {
  border-color: #339900;
}

/**
*  ModuleFilter
*  Selectize filters to be applied within
*  the caption of a tabular Module
*/
/*
        <caption class="Table-caption">
            <div class="ModuleFilter">
                <div class="grid">
                    <div class="grid__item one-half">
                          <select multiple="multiple"
                                  id="filter_server"
                                  name="filter_server"
                                  class="ModuleFilter-select Form-input--fullWidth    js_selectize_select"
                                  placeholder="Filter by Server...">
                            <option value="Alpha">Alpha</option>
                            <option value="Beta">Beta</option>
                          </select>
                    </div>
                    <div class="grid__item one-half">
                          <select multiple="multiple" id="filter_services" name="filter_services" class="ModuleFilter-select Form-input--fullWidth    js_selectize_select">
                            <option name="" value="">Filter by Services</option>
                            <option name="" value="">world</option>
                          </select>
                    </div>
                </div>
            </div>
        </caption>
*/
.ModuleFilter {
  padding: 0;
}

.ModuleFilter-select {
  margin-top: 4px;
  margin-bottom: 0;
}

.Form-textAreaSingleLine {
  min-height: 30px;
}

/**
*  TAGS
*  Tags within a normal form element
*
*/
.Form-tags .tag-editor {
  margin: 0;
  min-height: 34px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  background: #fcfcfc;
  border: 1px solid #C1C1C1;
  border-radius: 3px;
  padding-left: 2px;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  color: #000;
}
.Form-tags .tag-editor li {
  position: relative;
  top: 2px;
}

/**
*  HeaderInput
*  An input that appears in a module header
*  E.g. input to filter a module table.
*/
.HeaderInput {
  position: relative;
  display: inline-block;
}
.HeaderInput .HeaderInput-field {
  position: relative;
  top: -2px;
  min-height: 26px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  background: #fff;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  color: #000;
}
.HeaderInput .HeaderInput-clear {
  position: absolute;
  top: 1px;
  right: 4px;
}

.HeaderLabel {
  display: inline-block;
}
.HeaderLabel a {
  position: relative;
  top: -5px;
  right: 4px;
  color: #555;
  font-size: 1.2rem;
  font-weight: 500;
}
.HeaderLabel a:hover {
  color: #000;
  text-decoration: none;
}

/**
*  Icons
*  Inputs with icons in background
*/
.Form-input.Form-input--search {
  background-image: url("/assets/ico/search-cde31ddf8cc976e72dcf244cfc18d725b5595292.svg");
  background-position: left 8px bottom 50% !important;
  background-repeat: no-repeat !important;
  padding-left: 28px !important;
  background-size: 16px 16px !important;
  border: 1px solid #bcbcbc;
  min-height: 32px;
}

.HeaderNav--dark .Form-input--search {
  background-image: url("/assets/ico/search_dark-e22f67e768ecc40d0578e450a025ec9453d81347.svg") !important;
  background-position: 5px 7px !important;
}

/* Filter Tables
 * Filter a tabular page e.g. configStore or Environment variables
 */
.TableFilter {
  display: inline-block;
  position: relative;
  width: 260px;
}
.TableFilter .TableFilter-input {
  min-height: 33px !important;
}
.TableFilter .TableFilter-clearBtn {
  position: absolute;
  right: 6px;
  top: 2px;
  font-size: 24px;
  color: #ddd;
  padding: 0 !important;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  line-height: 27px;
}
.TableFilter .TableFilter-clearBtn:hover {
  color: #666;
}

/**
*  Tabular Items
*  tabular form
*  e.g. permissions form grid: view, edit, delete etc
*
*/
.TabularFormList .TabularFormList-item {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dotted #e0e0e0;
  vertical-align: middle;
}
.TabularFormList .TabularFormList-item .Form-select {
  margin-bottom: 0;
}
.TabularFormList .TabularFormList-item--error {
  background-color: #FFF2F2;
}
.TabularFormList .TabularFormList-content {
  padding-top: 8px;
}
.TabularFormList .TabularFormList-item:last-child,
.TabularFormList .TabularFormList-item:only-child {
  border-bottom: none;
}
.TabularFormList .TabularFormList-action {
  padding-left: 16px;
}
.TabularFormList .TabularFormList-errors {
  padding-top: 0.75em;
  padding-left: 1em;
  font-size: 1.2rem;
  font-weight: bold;
}

.Form-infieldIcon {
  position: absolute;
  right: 3px;
  top: 8px;
  background: #fff;
  width: 28px;
  height: 25px;
}
.Form-infieldIcon .Form-infieldIcon-ico {
  color: #427dc4;
}
.Form-infieldIcon .Form-infieldIcon-ico.icon-checkmark {
  color: rgb(40, 167, 69) !important;
}

.FormWrap {
  padding: 16px 0;
}
.FormWrap .FormWrap-title {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 12px;
}

.FormWrap--padded {
  padding: 30px 0;
}

/**
*  Hacks
*  Positioning hacks to work around plug-ins
*/
#time_zone_select_chosen {
  margin: 0;
}

.FormHeader {
  margin-top: -8px;
  padding-bottom: 12px;
}
.FormHeader .FormHeader-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 8px;
}
.FormHeader .FormHeader-text {
  font-size: 14px;
}

/**
*  Muted form styles
*  These are form elements styled as text content to reduce visual noise.
*  When they have focus/hover they will be normal form elements
*/
.u-mutedForm .field-is-Focused .Form-label {
  color: #000;
  font-weight: 500;
}
.u-mutedForm .Form-input--service {
  font-weight: 700;
  font-size: 15px !important;
}
.u-mutedForm .Form-label {
  font-weight: normal;
  color: #607282;
  margin-bottom: 2px;
  font-size: 13px;
}
.u-mutedForm .Form-input {
  background-color: #f9fafc;
  border: #f9fafc;
  box-shadow: none;
  font-size: 14px;
  padding-left: 1px;
  transition: all ease-in 0.1s;
}
.u-mutedForm .Form-input:hover {
  border: 1px solid rgba(82, 168, 236, 0.8);
  background-color: #fff;
  padding-left: 6px;
}
.u-mutedForm .Form-input:focus {
  padding-left: 6px;
}
.u-mutedForm .Form-input.field-error {
  padding-left: 6px;
}
.u-mutedForm .Form-select {
  border: none;
  background-color: #f9fafc;
  box-shadow: none;
  font-size: 14px;
  padding-left: 0;
  position: relative;
  /* NOTE: Mozilla needs it's own positioning applied via a body class. Look at body.mozilla below */
  transition: padding-left 0.1s ease-in;
}
.u-mutedForm .Form-select:hover, .u-mutedForm .Form-select:focus {
  border: 1px solid rgba(82, 168, 236, 0.8);
  background-color: #fff;
  background-size: 8px 10px;
  padding-left: 6px;
}
.u-mutedForm .Form-inputWrap {
  background-color: #f9fafc;
  border: none;
  box-shadow: none;
  padding-left: 0 !important;
}
.u-mutedForm .Form-inputWrap .Form-inputClear {
  transition: all linear 0.1s;
  font-size: 15px;
  padding-left: 0;
}
.u-mutedForm .Form-inputWrap .Form-inputClear:hover, .u-mutedForm .Form-inputWrap .Form-inputClear:focus {
  padding-left: 6px;
}
.u-mutedForm .Form-inputWrap .Button--inField {
  display: none;
}
.u-mutedForm .Form-inputWrap:hover {
  border: 1px solid rgba(82, 168, 236, 0.8);
  background-color: #fff;
}
.u-mutedForm .Form-inputWrap.Form-inputWrap--Focused {
  background-color: #fff;
  border: 1px solid rgba(82, 168, 236, 0.8);
}
.u-mutedForm .Form-inputWrap.Form-inputWrap--Focused .Button--inField {
  display: block;
}
.u-mutedForm .js_service_port_btn {
  display: none;
}
.u-mutedForm .Form-input--monoSpaced {
  font-size: 12px !important;
}
.u-mutedForm input[disabled],
.u-mutedForm .visually-disabled {
  color: #999 !important;
}

/* repositioning for firefox */
body.mozilla .u-mutedForm .Form-select {
  left: -3px;
}

/**
*  SelectConfirm
*  Dropdown select element with confirmation on change
*  e.g. change the deployment type
*
*/
.SelectConfirm {
  padding: 0;
  margin: 0;
}
.SelectConfirm .SelectConfirm-select {
  margin: 0;
  width: 200px;
  min-height: 27px !important;
  height: 27px !important;
}
.SelectConfirm .SelectConfirm-default {
  display: inline-block;
  position: relative;
  top: 2px;
  padding-left: 8px;
  font-size: 13px;
}
.SelectConfirm .SelectConfirm-info {
  display: none;
  padding-left: 2px;
}
.SelectConfirm .SelectConfirm-text {
  color: #000;
  position: relative;
  top: 2px;
  padding-left: 4px;
  display: none;
  font-size: 13px;
}

/**
*  Checkbox form that needs confirmation with apply button
*  e.g. Putting application into maintenance mode
*
*/
.Form--checkboxApply .Form--checkboxApply-action {
  padding-top: 8px;
  padding-left: 24px;
}

.Form-select--narrow {
  margin: 0;
  width: 208px;
  min-height: 28px !important;
  height: 28px !important;
}

/**
*  Checkbox superimposed on a field to save space in a tabular form e.g. env vars
*
*/
.Form-fieldInnerLabel {
  position: absolute;
  top: 9px;
  right: 6px;
  z-index: 1;
  background: #fff;
  font-size: 11px;
}
.Form-fieldInnerLabel .Form-fieldInnerLabel-text {
  position: relative;
  top: 1px;
}

/* label underneath the textarea e.g: env vars */
.Form-fieldUnderLabel {
  margin-top: 1px;
  margin-bottom: 0;
}
.Form-fieldUnderLabel [type=checkbox] {
  width: 12px;
  height: 12px;
}
.Form-fieldUnderLabel .Form-fieldInnerLabel-text {
  position: relative;
  font-size: 11px;
  color: #666;
}

/**
*  Styling <input type="file">
*  Hide the input and style the label
*
*
*/
/* hide the form element as we cant reliably style it in most browsers */
.type-file,
.Form-upload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.Form-fieldHelp {
  padding-top: 4px;
  font-size: 13px;
}

/*
    .FilterTable this is injected into the page abive the table that is filters
*/
.FilterTable {
  padding: 12px 12px;
  border-bottom: 1px solid #e0e0e0;
}

.InputGroup {
  position: relative;
  width: 100%;
}
.InputGroup .InputGroup-prepend {
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  border: 1px solid #C1C1C1;
  border-right: 1px solid #C1C1C1;
  border-right: none;
  border-radius: 4px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  display: inline-block;
  background: #f2f2f2;
  min-height: var(--form-element-height);
  vertical-align: middle;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 32px;
  font-size: 13px;
}
.InputGroup input {
  position: relative;
  display: inline-block;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin: 0 0 0 -4px !important;
}

.InputGroup .Form-input + .field-error {
  margin-top: 4px;
}

/*
    Form 2  Server Size select element width depends on the cloud provider that is selected.
    This overrides the default utility class on the element.
*/
/* Clouds dropdown - this is a styled selectize control, background images for cloud providers */
.selectize-control.all-disabled .selectize-input {
  background-color: #f2f2f2;
}

.selectize-control {
  /* selected item */
  /* dropdown items */
}
.selectize-control [data-target*=aws],
.selectize-control [data-target*="amazon web services"] {
  background: transparent url("/assets/logo/clouds/aws-d4cfe95bf4e1d34ba28f19c657304729ee1bf67a.svg") no-repeat 6px -1px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=digitalocean] {
  background: transparent url("/assets/logo/clouds/digitalocean-fb48a26c72eb6bf59933b4e1c65f16c435a2bbcc.svg") no-repeat 6px -1px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=googlecloud],
.selectize-control [data-target*="google compute engine"] {
  background: transparent url("/assets/logo/clouds/gce-6f56bc773ec2dd97fe02985d85e322aa7231fb43.svg") no-repeat 6px -2px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=linode] {
  background: transparent url("/assets/logo/clouds/linode-914e9b47ffc7be0d32b9b882e270a6520dd71e0e.svg") no-repeat 6px -1px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=hetzner] {
  background: transparent url("/assets/logo/clouds/hetzner-e3b3f733ed4eeeb494871b407398424e32dd2562.svg") no-repeat 6px 0;
  background-size: 18px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=ovh] {
  background: transparent url("/assets/logo/clouds/ovh-f2bea2db975ac7c5427c65cc069be798755b5fba.svg") no-repeat 6px 3px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=vultr] {
  background: transparent url("/assets/logo/clouds/vultr-1fc182fb01cf36980d9a31a7a532f27c25dc8699.svg") no-repeat 6px -1px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=azure_rm],
.selectize-control [data-target*=azure],
.selectize-control [data-target*="Microsoft Azure"] {
  background: transparent url("/assets/logo/clouds/azure-aa8d6ee6ad5edce20f4fe379fa8aa6963e9dff93.svg") no-repeat 6px -1px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=registered_server] {
  background: transparent url("/assets/logo/clouds/registered_server-68c8bd24ff24b4bb5b008f9ba4abe5fde812024b.svg") no-repeat 6px -1px;
  background-size: 20px auto;
  padding-left: 34px !important;
}
.selectize-control [data-target*=maestro] {
  background: transparent url("/assets/logo/maestro_logo-8b95724851a63ba30e544af7f37ebbf080fb5417.svg") no-repeat 6px 0;
  background-size: 16px auto;
  padding-left: 34px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=aws],
.selectize-control .selectize-dropdown [data-cloud*="amazon web services"] {
  background: transparent url("/assets/logo/clouds/aws-d4cfe95bf4e1d34ba28f19c657304729ee1bf67a.svg") no-repeat 12px 6px;
  background-size: 16px auto;
  padding-left: 40px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=digitalocean] {
  background: transparent url("/assets/logo/clouds/digitalocean-fb48a26c72eb6bf59933b4e1c65f16c435a2bbcc.svg") no-repeat 12px 5px;
  background-size: 16px auto;
  padding-left: 40px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=googlecloud],
.selectize-control .selectize-dropdown [data-cloud*="google compute engine"] {
  background: transparent url("/assets/logo/clouds/gce-6f56bc773ec2dd97fe02985d85e322aa7231fb43.svg") no-repeat 12px 5px;
  background-size: 16px auto;
  padding-left: 40px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=linode] {
  background: transparent url("/assets/logo/clouds/linode-914e9b47ffc7be0d32b9b882e270a6520dd71e0e.svg") no-repeat 12px 6px;
  background-size: 16px auto;
  padding-left: 40px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=hetzner] {
  background: transparent url("/assets/logo/clouds/hetzner-e3b3f733ed4eeeb494871b407398424e32dd2562.svg") no-repeat 12px 5px;
  background-size: 16px auto;
  padding-left: 40px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=ovh] {
  background: transparent url("/assets/logo/clouds/ovh-f2bea2db975ac7c5427c65cc069be798755b5fba.svg") no-repeat 12px 9px;
  background-size: 16px auto;
  padding-left: 40px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=vultr] {
  background: transparent url("/assets/logo/clouds/vultr-1fc182fb01cf36980d9a31a7a532f27c25dc8699.svg") no-repeat 12px 5px;
  background-size: 16px auto;
  padding-left: 40px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=azure_rm],
.selectize-control .selectize-dropdown [data-cloud*=azure],
.selectize-control .selectize-dropdown [data-cloud*="Microsoft Azure"] {
  background: transparent url("/assets/logo/clouds/azure-aa8d6ee6ad5edce20f4fe379fa8aa6963e9dff93.svg") no-repeat 12px 6px;
  background-size: 16px auto;
  padding-left: 38px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=maestro] {
  background: transparent url("/assets/logo/maestro_logo-8b95724851a63ba30e544af7f37ebbf080fb5417.svg") no-repeat 12px 6px;
  background-size: 14px auto;
  padding-left: 38px !important;
}
.selectize-control .selectize-dropdown [data-cloud*=registered_server] {
  background: transparent url("/assets/logo/clouds/registered_server-68c8bd24ff24b4bb5b008f9ba4abe5fde812024b.svg") no-repeat 12px 6px;
  background-size: 16px auto;
  padding-left: 38px !important;
}

.selectize-control.clouds-selectize .cloud-item {
  margin-top: 2px;
  margin-bottom: 2px;
}
.selectize-control.clouds-selectize .cloud-item:hover {
  background-color: #F5FAFD;
}

/* Dark theme form styles */
.Module--dark .Module-headerGroup .Form-input {
  box-shadow: none !important;
  background-color: #333f51;
  border: 1px solid #3D4A60 !important;
  color: #fff !important;
}
.Module--dark .Module-headerGroup .Module-headerGroupInput {
  background-color: #333f51;
  border-color: #3D4A60;
  color: #fff;
}
.Module--dark .Module-headerGroup .Module-headerGroupInput--search {
  background-image: url("/assets/ico/search_dark-e22f67e768ecc40d0578e450a025ec9453d81347.svg");
}

.SearchTools {
  position: relative;
  /* next / prev search nav */
}
@media (max-width: 800px) {
  .SearchTools {
    display: none !important;
  }
}
.SearchTools .SearchTools-input {
  width: 224px !important;
  padding-right: 40px;
}
.SearchTools .SearchTools-message {
  position: absolute !important;
  left: 188px;
  top: 6px;
  font-size: 11px;
  color: white;
  font-weight: 500;
}
.SearchTools .SearchTools-controls {
  position: absolute !important;
  left: 173px;
  top: 3px;
}
.SearchTools .SearchTools-counter {
  font-size: 10px;
  position: relative;
  top: -1px;
  padding-right: 3px;
}
.SearchTools .SearchTools-button {
  position: relative;
  top: 2px;
}

body.env_vars_deployment_blocker_opened #js-upload-config-vars-form,
body.env_vars_deployment_blocker_opened #js_download_env_vars {
  display: none;
}

.EndpointControl .EndpointControl-subdomain {
  position: relative;
  margin-right: -22px;
  background: #FCFCFC;
  z-index: 2;
  box-shadow: none;
  width: 11%;
  text-align: right;
  font-size: 12px;
  border-color: #C1C1C1;
}
.EndpointControl .EndpointControl-subdomain:focus, .EndpointControl .EndpointControl-subdomain:active {
  border: 1px solid #C1C1C1;
  background: #FCFCFC;
  box-shadow: none !important;
}
.EndpointControl .EndpointControl-dropdown {
  width: auto;
  z-index: 1;
  box-shadow: none;
  padding-right: 25px;
  font-size: 12px;
}
.EndpointControl .EndpointControl-dropdown:focus, .EndpointControl .EndpointControl-dropdown:active {
  border: 1px solid #d6d6d6;
  box-shadow: none !important;
}
.EndpointControl .EndpointControl-path {
  position: relative;
  font-size: 12px;
}

.EndpointControl.all-disabled {
  opacity: 0.5;
}
.EndpointControl.all-disabled .Form-select,
.EndpointControl.all-disabled .EndpointControl-subdomain {
  border-color: #e0e0e0;
}

div.selectize-control.js_status_codes .item {
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
}

/**
 * Contain floats
 *
 * Make an element expand to contain floated children.
 * Uses pseudo-elements (micro clearfix).
 *
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of the
 *    element.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.u-cf:before,
.u-cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.u-cf:after {
  clear: both;
}

/**
 * New block formatting context
 *
 * This affords some useful properties to the element. It won't wrap under
 * floats. Will also contain any floated children.

 * N.B. This will clip overflow. Use the alternative method below if this is
 * problematic.
 */
.u-nbfc {
  overflow: hidden !important;
}

/**
 * New block formatting context (alternative)
 *
 * Alternative method when overflow must not be clipped.
 *
 * 1. Create a new block formatting context (NBFC).
 * 2. Avoid shrink-wrap behaviour of table-cell.
 *
 * N.B. This breaks down in some browsers when elements within this element
 * exceed its width.
 */
.u-nbfcAlt {
  display: table-cell !important; /* 1 */
  width: 10000px !important; /* 2 */
}

/**
 * Floats
 */
.u-floatLeft {
  float: left !important;
}

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

/**
 * Full width element
 */
.u-fullWidth {
  width: 100% !important;
  box-sizing: border-box;
}

.u-fullHeight {
  height: 100% !important;
}

/**
 * Vertical centering utility
 * add to parent of centered items
 */
.u-vc {
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-vc2 {
  height: auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*
  Aligner
  Flexbox based layout utility https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
*/
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item {
  max-width: 50%;
}

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

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

.u-positionRelative {
  position: relative;
}

/*
    Flexbox utility
*/
.FlexRow {
  display: flex;
  align-items: stretch;
}

.FlexRow-item {
  display: inline-flex;
}

.FlexRow-item--center {
  align-self: center;
}

/*
    Flexbox utility class
    based on https://primer.style/css/utilities/flexbox
 */
.u-flex {
  display: flex; /* The element behaves like a block and lays out its content using the flexbox model. */
}

.u-flexInline {
  display: inline-flex; /* The element behaves like an inline element and lays out its content using the flexbox model. */
}

.u-flexRowReverse {
  flex-direction: row-reverse;
}

.u-flexRow {
  flex-direction: row;
}

.u-flexColumn {
  flex-direction: column;
}

/* Justify content */
.u-flexJustifyStart {
  justify-content: flex-start;
}

/* left align */
.u-flexJustifyEnd {
  justify-content: flex-end;
}

/* right align */
.u-flexJustifyCenter {
  justify-content: center;
}

.u-flexJustifyBetween {
  justify-content: space-between;
}

/* distribute items evenly in the container. */
.u-flexJustifyAround {
  justify-content: space-around;
}

/* Align items */
.u-flexItemsStart {
  align-items: flex-start;
}

.u-flexItemsEnd {
  align-items: flex-end;
}

.u-flexItemsCenter {
  align-items: center;
}

.u-flexItemsBaseline {
  align-items: baseline;
}

.u-flexItemsStretch {
  align-items: stretch;
}

.u-flexRight {
  margin-left: auto !important;
}

/* column gap utilities */
.u-flexGap4 {
  gap: 4px;
}

.u-flexGap6 {
  gap: 6px;
}

.u-flexGap8 {
  gap: 8px;
}

.u-flexGap10 {
  gap: 10px;
}

.u-flexGap14 {
  gap: 14px;
}

/* row gap utilities */
.u-flexRowGap2 {
  row-gap: 2px;
}

.u-flexRowGap4 {
  row-gap: 4px;
}

.u-flexRowGap6 {
  row-gap: 6px;
}

.u-flexRowGap8 {
  row-gap: 8px;
}

.u-marginBot3 {
  margin-bottom: 3px;
}

.u-marginBot4 {
  margin-bottom: 4px;
}

.u-marginBot5 {
  margin-bottom: 4px;
}

.u-flexItem {
  padding-right: 8px;
}

/* Align content */
/* ==========================================================================
   LINKS
   ========================================================================== */
/**
 * Base - links
 */
.u-linkStyle,
a {
  transition: color 0.3s ease 0s, border-color 0.3s ease 0s;
  color: #427dc4;
  text-decoration: none;
}
.u-linkStyle:hover,
a:hover {
  color: #427dc4;
  text-decoration: none;
}

/* fake links, use in emergency only! */
.u-linkStyle:hover {
  cursor: pointer;
}

/**
 * Error - links & CTA's within Log lists
 */
.log-severity-4 a {
  color: rgb(203, 36, 49);
}

.log-list a {
  font-weight: 500;
}
.log-list a:hover {
  color: inherit;
}
.log-list .log-list-cta {
  display: inline-block;
  margin: 0.15em 0;
  font-weight: bolder;
  font-family: "Helvetica Neue", Helvetica, sans-serif !important;
  font-size: 1.3rem;
}
.log-list .log-list-cta::after {
  content: "";
  display: inline-block;
  font-size: 0;
  margin-left: 4px;
  height: 0;
  width: 0;
  border-bottom: 4px solid transparent;
  border-left: 4px solid rgb(203, 36, 49);
  border-top: 4px solid transparent;
}

/**
 * Red, Amber, Green CTA links
 */
.link-error {
  color: rgb(203, 36, 49) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-error:hover {
  color: rgb(203, 36, 49);
  text-decoration: underline;
}
.link-error .Card-listTitle,
.link-error .Module--cardInfo,
.link-error .Card-contentInfo,
.link-error .u-circleSeperator {
  color: rgb(203, 36, 49) !important;
}

.link-error-timeline {
  color: rgb(203, 36, 49) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-error-timeline:hover {
  color: rgb(203, 36, 49);
  text-decoration: underline !important;
}

.link-amber {
  color: #EA8407 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-amber:hover {
  text-decoration: underline;
}

.link-success {
  color: rgb(40, 167, 69);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-success:hover {
  color: rgb(40, 167, 69);
  text-decoration: underline;
}

.link-undefined {
  border-bottom: 1px solid;
  padding-bottom: 1px;
}
.link-undefined:hover {
  text-decoration: none;
}

/**
 * External Links
 */
.link-external {
  background: url("data:image/gif;base64,R0lGODlhCAAHAIABAJO42f///yH5BAEAAAEALAAAAAAIAAcAAAINjAMJd5q2HoSLzUadKQA7") no-repeat right 5px rgba(0, 0, 0, 0);
  padding-right: 12px !important;
}

/**
 * Icon Links
 */
.Link-ico {
  border-bottom: 0 !important;
  color: #999;
}

.Link-ico:hover {
  border-bottom: 0 !important;
  text-decoration: none !important;
  color: #427dc4;
}

.Link-icoCta {
  display: inline-block;
  vertical-align: middle;
  color: #6f8189;
  font-size: 12px;
}

.Link-icoCta:hover {
  text-decoration: none;
  color: #427dc4;
}

.Link-overlay {
  position: relative;
  top: 0.5px;
  left: 4px;
  font-size: 16.5px;
}

/**
 *  Add triangle after the link.
 */
.link-more {
  color: inherit;
  cursor: pointer;
}
.link-more:hover {
  color: inherit;
}

.link-more::after {
  content: "";
  display: inline-block;
  font-size: 0;
  margin-left: 3px;
  height: 0;
  width: 0;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #000;
  border-top: 4px solid transparent;
  transition: transform 0.5s;
}

.link-more.is-open::after {
  transform: rotateY(0deg) rotate(90deg);
  /* needs Y at 0 deg to behave properly*/
}

.link-showMore {
  font-size: 13px;
}
.link-showMore:hover, .link-showMore:focus {
  outline: none;
  text-decoration: none;
}

/**
 *  Underlined cta links
 */
.link-underline {
  text-decoration: underline !important;
  color: #427dc4 !important;
}
.link-underline:hover {
  color: #005580 !important;
  text-decoration: underline !important;
}

.u-highlightBlueLink {
  background-color: rgb(232, 245, 250);
  padding: 3px;
  line-height: 1;
  border-radius: 3px;
  white-space: nowrap;
}
.u-highlightBlueLink:hover {
  text-decoration: none;
}
.u-highlightBlueLink:focus {
  outline: none;
}
.u-highlightBlueLink .Icon {
  position: relative;
  top: 1px;
}

.u-highlightBlueLink--card {
  padding: 2px;
}

.u-linkClean,
.u-linkClean:hover,
.u-linkClean:focus,
.u-linkClean:active {
  text-decoration: none !important;
  border-bottom: none !important;
}
.u-linkClean .Icon,
.u-linkClean:hover .Icon,
.u-linkClean:focus .Icon,
.u-linkClean:active .Icon {
  position: relative;
  top: 1px;
}

.u-linkUnderline,
.u-linkUnderline:focus,
.u-linkUnderline,
.u-linkUnderline:active {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.u-linkBorderCta,
.u-linkBorderCta:focus,
.u-linkBorderCta,
.u-linkBorderCta:active {
  padding-bottom: 1px;
  border-bottom: 1px solid;
  text-decoration: none !important;
}

.u-linkCancel,
.u-linkCancel:focus,
.u-linkCancel:active {
  color: #666;
  font-weight: 500;
  border-bottom: 1px solid #999;
  text-decoration: none !important;
}

.u-linkCancel:hover {
  color: #000;
}

.u-codeLink,
.u-codeLink:hover,
.u-codeLink:focus,
.u-codeLink:active {
  text-decoration: none !important;
  border-bottom: none !important;
  color: #427dc4;
}

.u-linkDestructive:hover {
  color: #e01f22 !important;
}
.u-linkDestructive:hover path {
  fill: #e01f22 !important;
}

/*
  normal text color (muted links)
  default link style when hovered
*/
.u-linkMuted,
.u-linkMuted:focus,
.u-linkMuted:active {
  text-decoration: none;
  border-bottom: none;
  color: inherit;
}
.u-linkMuted:hover,
.u-linkMuted:focus:hover,
.u-linkMuted:active:hover {
  color: #427dc4 !important;
  text-decoration: none !important;
}

.u-multiLinks:hover * {
  color: #427dc4 !important;
}

.u-clusterLink {
  padding-left: 22px;
  background-image: url("/assets/ico/clusters-ea98ca5cc350a1f27d723263b32a8d81f12f0393.svg");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  height: 16px;
  width: 16px;
}

.u-linkNormal,
.u-linkColor {
  color: #427dc4 !important;
}

.u-linkDisabled {
  color: #999 !important;
  opacity: 0.4 !important;
  cursor: default;
}

/* Contextual help is open, disable link */
body.help-side-panel-is-active .js_show_getting_started_component,
body.help-side-panel-is-active .js_open_help_side_panel {
  color: #999 !important;
  opacity: 0.2 !important;
}
body.help-side-panel-is-active .js_show_getting_started_component strong,
body.help-side-panel-is-active .js_open_help_side_panel strong {
  font-weight: 300 !important;
}

/**
* LINK STATES
* ----------------------------------------------------------
*/
/**
 * Current page selected state
 */
a.is-active {
  color: #000;
  font-weight: 600;
  text-decoration: none;
}

a.is-red {
  color: rgb(203, 36, 49) !important;
  font-weight: 500 !important;
}
a.is-red i {
  color: rgb(203, 36, 49) !important;
}

a.is-amber {
  color: #EA8407 !important;
  font-weight: 500 !important;
}
a.is-amber i {
  color: #EA8407 !important;
}

span.is-disabled,
span.is-disabled:hover,
a.all-disabled,
a.all-disabled:hover,
a.is-disabled,
a.is-disabled:hover {
  color: #B2B2B2;
}

.CircleLink {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  background-color: transparent;
  vertical-align: middle;
  text-decoration: none;
}
.CircleLink:hover {
  background: #f2f2f2;
  text-decoration: none;
}

/* ==========================================================================
   LINKS (older styles needs review)
   ========================================================================== */
.more-link:after {
  content: "";
  position: relative;
  top: -4px;
  left: 4px;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #008DD3;
}

.actions a {
  display: inline-block;
  padding: 0 6px;
  transition: none;
}

.strong-link {
  color: #CC3333 !important;
  font-weight: 500;
}
.strong-link:hover {
  cursor: pointer;
}

.status-red {
  text-decoration: none;
}

.cancel-link:hover {
  border-bottom-color: #b3b3b3;
}

.cancel-link:active {
  top: -1px;
}

/* overides for cloud modal within onboarding */
[data-controller=pages] .heading-divider {
  padding: 0 0 12px;
  border: none;
  margin: 0;
}

.is-clickable {
  cursor: pointer;
}

td.messages {
  color: #999;
}
td.messages a {
  line-height: 1.4;
}

/*
   ICON LINKS
   -------------------------------------------------------------------------- */
.negative-action {
  color: rgb(88, 96, 105);
  text-decoration: none !important;
}
.negative-action:hover {
  text-decoration: none;
  border: none;
  color: #e01f22;
}

.negative-action.is-disabled:hover {
  color: #666 !important;
}
.negative-action.is-disabled:hover i,
.negative-action.is-disabled:hover .Icon {
  color: #666;
}

.UnitScalers .negative-action {
  color: #e01f22;
}

.negative-action:hover {
  color: #B52B2B !important;
  text-decoration: none;
}

.has-negative-state {
  color: #B52B2B !important;
}

.positive-action {
  color: rgb(40, 167, 69) !important;
}
.positive-action i {
  color: rgb(40, 167, 69) !important;
}

.positive-action:hover {
  border: none;
  text-decoration: none;
}

.has-positive-state {
  color: rgb(40, 167, 69) !important;
}

.negative-action-show i {
  color: #B52B2B !important;
}

.negative-action-show:hover i {
  color: #B52B2B !important;
}

.positive-action-show:hover {
  text-decoration: none;
  color: #5B9900;
}

.positive-action-show i {
  color: #339900 !important;
}

.positive-action-show:hover i {
  color: #339900 !important;
}

.warning {
  font-size: 1.7rem;
  color: #EA8407;
  padding: 0 4px;
}

.cta {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cta:hover {
  text-decoration: underline;
}

/* ==========================================================================
   LISTS
   ========================================================================== */
/*

    BASE
    --------------

    <ul class="List">
        <li></li>
    </ul>

    MODIFIERS
    ---------

    <ul class="List List--bullets">
        <li></li>
    </ul>
*/
/**
 * Default List object - not styled
 */
.List {
  list-style: none;
  margin: 0;
  padding: 0;
}

.List--dividerTop {
  border-bottom: 1px solid #efefef;
}
.List--dividerTop:last-child {
  border-bottom: none;
}

/**
 * Bulletd List
 */
.List--bullets {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}

.List--bullets > li {
  margin-left: 2em;
  list-style: disc;
}

/**
 * Numbered List
 */
.List--numbered {
  margin-bottom: 1em !important;
  list-style: decimal !important;
}

.List--numbered > li {
  margin-left: 1.2em;
}

.List--spadded > li {
  padding: 0.15em 0;
}

.List--padded > li {
  padding: 0.25em 0;
}

.List--XPadded > li {
  padding: 0.35em 0 !important;
}

.List-icon {
  margin-right: 10px;
}

.List--striped > li {
  padding: 5px;
}
.List--striped li:nth-child(odd) {
  background: #FAFBFC;
}
.List--striped li:nth-child(even) {
  background: #fff;
}

.List--withHover li:hover {
  background: #FFFBF2 !important;
  color: #000;
}

.List--iconLinks > li {
  padding: 0.2em 0;
}
.List--iconLinks > li a:hover {
  text-decoration: none;
}
.List--iconLinks .List--iconLinks-icon {
  font-size: 14px;
  margin-right: 3px;
}

/**
 *  List Steps
 *  Styled sequence list with circular number style
 *  - Completed steps Green
 *  - Current Step black
 *  - uncompleted steps grey
 */
.Steps {
  padding: 0 0 20px 0;
}
.Steps .Steps-title {
  font-size: 15px;
  margin-bottom: 0;
}
.Steps .StepsListRoundedNos {
  margin-top: 0;
  margin-left: 36px;
}

.StepsListRoundedNos {
  margin: 2.2rem 0 2.2rem 3.4em;
  list-style: none;
  counter-reset: li;
}
.StepsListRoundedNos > .StepsListRoundedNos-item {
  vertical-align: middle;
  position: relative;
  margin: 2rem 0;
  padding: 1px 0 0 0.5em;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.5;
  color: #666;
}
.StepsListRoundedNos > li:before {
  background: #eee;
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
  color: #333;
  content: counter(li, decimal);
  counter-increment: li;
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;
  text-align: center;
  top: -0.25rem;
  left: -3.3rem;
}

.List--twoCol {
  column-count: 2;
  column-gap: 20px;
}

.List--threeCol {
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

/* in a checklist default items are muted */
.StepsListRoundedNos--checkList > .StepsListRoundedNos-item {
  color: #9B9B9B;
  opacity: 0.9;
}

/* Number styling Rounded bullet numbers - colors */
.StepsListRoundedNos--black > li:before {
  background: #333;
  color: #fff;
}

.StepsListRoundedNos--grey > li:before {
  background: #999;
  color: #fff;
}

.StepsListRoundedNos--green > li:before {
  background: #43A238;
  color: #fff;
}

.StepsListRoundedNos--red > li:before {
  background: #b52b2b;
  color: #fff;
}

/* List item styling - text and icon */
.StepsListRoundedNos li.StepsListRoundedNos-current {
  color: #000;
}
.StepsListRoundedNos li.StepsListRoundedNos-current:before {
  background: #333;
}
.StepsListRoundedNos li.StepsListRoundedNos-muted:before {
  background: #999;
  color: #fff;
}
.StepsListRoundedNos li.StepsListRoundedNos-done {
  color: #43A238;
}
.StepsListRoundedNos li.StepsListRoundedNos-done:before {
  background: #43A238;
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
  color: #fff;
  font: 12px/26px "cloud66-icons";
  content: "/";
  font-weight: bold;
  position: absolute;
  text-align: center;
  top: -0.25rem;
  left: -3.3rem;
}
.StepsListRoundedNos li.StepsListRoundedNos-fail {
  color: #b52b2b;
}
.StepsListRoundedNos li.StepsListRoundedNos-fail:before {
  background: #b52b2b;
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
  color: #fff;
  font: 12px/26px "cloud66-icons";
  content: "1";
  font-weight: bold;
  position: absolute;
  text-align: center;
  top: -0.25rem;
  left: -3.3rem;
}

/* Display after list item
   - meta data
   - time stamp / spinner etc
*/
.StepsListRoundedNos-meta {
  display: inline-block;
  margin: 0 0.35em;
  font-weight: normal;
  color: #444;
}
.StepsListRoundedNos-meta .LoadingBubbles {
  top: 5px;
}

.StepsListRoundedNos-meta--med {
  font-size: 15px;
  position: relative;
  color: #000;
  line-height: 1;
}

/**
 *  Build Steps Page
 *
 */
.BuildSteps {
  margin-top: 34px;
  margin-bottom: 34px;
  padding-left: 1em;
  padding-right: 1em;
}
.BuildSteps > li:before {
  top: 0rem;
  left: -3.3rem;
}
.BuildSteps > .BuildSteps-item {
  word-break: break-all;
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}
.BuildSteps .BuildSteps-name {
  font-size: 1.6rem;
  font-weight: 500;
  color: #000;
}
.BuildSteps .BuildSteps-step,
.BuildSteps .BuildSteps-command {
  font-weight: normal;
  font-size: 1.4rem;
}
.BuildSteps .BuildSteps-commandText {
  font-size: 1.2rem;
}

/**
 *  List spacing
 *  A list within a Module E.G. List of commits within an image history Module.
 */
.List--small > li {
  padding: 0.9em;
}
.List--small .List--small-action {
  font-size: 1.2rem;
}
.List--small .List-lead {
  margin-bottom: 0;
  padding-right: 14em;
}

/**
 *  List item dividers
 */
.List--divided > li {
  border-bottom: 1px dotted #ddd;
}
.List--divided > li:last-child,
.List--divided > li:only-child {
  border-bottom: 0;
}

.List--divided--solid > li {
  border-bottom: 1px solid #ddd;
}

.List--inline > li {
  display: inline-block;
}

.List--inlineSpaced li {
  margin-left: 3px;
}
.List--inlineSpaced li:first-child {
  margin-left: 0;
}

/**
 *  List item modifiers
 */
.List-item--solid {
  border-bottom: 1px solid #ddd !important;
}

.List-item--highLight {
  background: #FFFFEE !important;
}

.List--tools > li {
  margin: 0 4px;
}
.List--tools > li i {
  display: inline-block;
  font-size: 16px;
  vertical-align: middle;
}

.item-is-read * {
  color: #999 !important;
  opacity: 0.95;
}
.item-is-read .Notifications-icon {
  color: #999 !important;
}
.item-is-read .js_item_action {
  display: none;
}

/**
 *  Pager
 *  Pager component for .Module content
 */
/*

   <div class="Pager">
       <ul class="Pager-list">
           <li class="List Pager-listItem">
               <a class="Pager-link" href="#">
               </a>
           </li>
       </ul>
   </div>

*/
.Pager-list {
  overflow: hidden;
  display: inline-block;
  margin: 0;
}

.Pager-listItem {
  text-align: center;
  display: inline;
}

.Pager-link {
  float: left;
  padding: 0 14px;
  border-left: 1px solid #E2E2E2;
}
.Pager-link:hover {
  color: #000;
  text-decoration: none;
  background-color: #f5f5f5;
}

.Pager-list li:first-child a {
  border-left: none;
}

.Pager-link.is-active {
  color: #000;
  cursor: default;
}
.Pager-link.is-active:hover {
  background: #fff;
}

/**
 *  Pager Modifier
 *  Bordered Paging component
 */
.Pager--bordered .Pager-list {
  border: 1px solid #E2E2E2;
  border-radius: 4px;
}
.Pager--bordered .Pager-link {
  line-height: 2.6em;
  font-size: 14px;
}
.Pager--bordered .Pager-link:hover {
  color: #427dc4;
}

/**
 *  Search
 *  Search Results
 */
.SearchSummary {
  color: #999;
  line-height: 1;
  margin: -0.75em 0 1em 0;
  padding: 0 1px;
  font-size: 1.2rem;
}

.SearchList {
  list-style: none;
  margin: 0;
}

.SearchList-item {
  padding: 0.8em 0.05em;
  color: #333;
  border-top: 1px dotted rgba(0, 0, 0, 0.09);
}
.SearchList-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.SearchList-excerpt {
  color: #222;
  margin: 0.4em 0 0;
  font-size: 1.2rem;
}

.SearchList-title {
  margin: 0;
  line-height: 1;
  font-weight: 400;
  font-size: 1.4rem;
}

.SearchList-title + .Tag--searchResults {
  margin: 0.5em 0 0 -1px;
}

.Tag--searchResults {
  margin-top: 0.4em;
}

.SearchList-link:hover .SearchList-titleAside {
  color: #005580;
}

.SearchList-link .u-highlight {
  color: inherit;
}

.SearchList-titleAside {
  font-size: 1.3rem;
  color: #999;
  font-weight: 350;
}

.SidebarCheckboxListTitle {
  padding: 0 0 6px 0;
  margin: 1.8em 0 3px 0;
  font-weight: 500;
  font-size: 12px;
  color: #000;
  line-height: 1;
  border-bottom: 1px dotted #ccc;
}

.SidebarCheckboxList {
  margin: 0.75em 1em;
}
.SidebarCheckboxList li {
  padding: 0;
  margin: 0;
}
.SidebarCheckboxList .SidebarCheckboxList-checkbox {
  display: inline;
}
.SidebarCheckboxList label.Form-labelSidebar {
  margin: 2px 0 0 1px;
  display: inline;
  position: relative;
  top: 1px;
}
.SidebarCheckboxList .is-disabled .SidebarCheckboxList-checkbox {
  display: inline;
  opacity: 0.5;
  pointer-events: none !important;
}
.SidebarCheckboxList .is-disabled .Form-labelSidebar {
  color: #aaa;
  opacity: 0.7;
}

/**
 * Wrapper element
 * The sidebar container
 */
.LogSidebarListWrap {
  position: relative;
  margin: 0;
  padding-top: 1px;
  padding-bottom: 3px;
  max-height: 80vh;
  overflow-y: auto;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10px, black calc(100% - 10px), transparent 100%);
}

/**
 * .LogSidebarList
 * The sidebar containing checkboxes for log inclusion
 */
.LogSidebarList {
  margin: 0;
}

.LogSidebarList-title {
  padding: 6px 0 6px 0;
  margin: 0 0 3px 0;
  font-weight: bold;
  font-size: 12px;
  color: #000;
  line-height: 1;
  border-bottom: 1px dotted #ccc;
}

.LogSidebarList-subTitle {
  margin: 6px 0 3px 0;
  text-transform: none;
  font-size: 11px;
  font-weight: 500;
  color: #333;
}

.LogSidebarList-title + .LogSidebarList-subTitle {
  margin-top: 0;
}

.LogSidebarList-link {
  position: absolute;
  right: 4px;
  letter-spacing: 0.25px;
  font-weight: bold;
  font-size: 11px;
}
.LogSidebarList-link:hover {
  text-decoration: none;
}

.LogSidebarList-item {
  position: relative;
  padding: 0 0 0 0;
  margin: 0;
}

.LogSidebarList-label {
  color: #666;
}
.LogSidebarList-label:hover {
  color: #000;
}

.LogSidebarList-level-1 {
  padding: 0;
}

.LogSidebarList-level-2 {
  padding: 0;
}

.LogSidebarList-level-3 {
  font-size: 0.9rem;
}
.LogSidebarList-level-3:hover {
  background: #FAFBFC;
}

.LogSidebarList-containerId {
  font-family: Monaco, Consolas, "Courier New", monospace;
}

.LogSidebarList-label {
  display: inline-block;
  margin: 0;
  padding-top: 1px;
  line-height: 1.7;
  width: 95%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/**
 * Indicator for item activity
 */
.indicatorItem {
  opacity: 1;
  position: relative;
  top: 1px;
  left: -2px;
  display: inline-block;
  width: 6px;
  height: 7px;
  border-radius: 2px;
  margin: 0 0 0 4px;
}

/*
.indicatorItem--flash {
    -webkit-animation-name: blink;
    animation-name: blink;

    -webkit-animation-direction: normal;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-name: blink;
    -webkit-animation-timing-function: ease;

    animation-direction: normal;
    animation-duration: 0.4s;
    animation-iteration-count: 2;
    animation-name: blink;
    animation-timing-function: ease;
}


@-webkit-keyframes blink {
    0%   { background: #fff }
    100% { background: #6BC343; }
}

@keyframes blink {
    0%   { background: #fff }
    100% { background: #6BC343; }
}*/
/**
 * Log Checkboxes
 */
.LogSidebarList-checkbox {
  position: absolute;
  top: 1px;
  right: 5px;
  font-size: 1.2rem; /* make sure checkbox size is consistent in chrome */
}

.LogSidebarList-checkbox--title {
  border: 1px solid #000;
}

.log-item:hover .LiveLog-source {
  text-decoration: underline;
}

.LiveLog-source {
  display: inline;
  text-decoration: none;
}

.LiveLog-message {
  display: inline;
}

/**
 * Search text highlight
 */
.LiveLog-highlight {
  background: #FFFF0B;
  color: #000;
  padding: 1px 1px;
  font-weight: 600;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

/**
 * context row highlight
 */
.LiveLog-contextRow {
  background: #ECFAFF !important;
  color: #000;
  font-weight: 500;
}

/* ==========================================================================
   MODULE MEDIA CLASS
   ========================================================================== */
/*

    https://github.com/suitcss/suit/blob/master/doc/design-principles.md

    BASE MARKUP
    -----------

    <div class="Media">
      <div class="Media-object">
        <img src="" alt="">
      </div>
      <div class="Media-body">
        <h2 class="Media-heading">Heading</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>



    MODIFIERS
    ---------

    Module--medium {}     Medium sized media grid
*/
/**
* Local Vars
*/
/**
* Clear floats
*/
.Media,
.Media-body {
  overflow: hidden;
  zoom: 1;
}
.Media p,
.Media-body p {
  font-size: 1.3rem;
  color: #666;
}

/**
* For images and video, set to block
*/
.Media-object img,
.Media-object video,
.Media-object iframe {
  display: block;
}

.Media-heading {
  margin: 0 0 6px;
  font-size: 1.4rem;
  color: #000;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
}

.Media-subHeading {
  margin: 0;
  font-size: 1.2rem;
  color: #000;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
}

.Media-heading--spacer {
  margin: 0.95em 0 0.25em;
}

.Media-meta {
  font-size: 1.3rem;
  line-height: 1.3;
  color: #999;
}

.Media-leadMessage {
  margin: 1em 0 0;
  line-height: 1.4;
}

.Media-item {
  margin: 0;
}

/**
* Float the object to the left by default
*/
.Media-object {
  float: left;
  margin-right: 12px;
}

.Media--alignRight .Media-object {
  float: right;
  margin-left: 12px;
}

.Media--medium .Media-object {
  float: left;
  margin-right: 18px;
}

/* ==========================================================================
   MODULE MEDIA CLASS - Medium sized media object eg. Large add-in grid
   ========================================================================== */
/*

    <div class="Media    Media--medium ">
      <div class="Media-object">
        <img src="" alt="">
      </div>
      <div class="Media-body">
        <h2 class="Media-heading">Heading</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
    </div>

*/
/**
* mediumHeading modifier - e.g. install add-ins page on h2
*/
.gridOuter-h2 {
  margin: 1.2em 0 1.4em 0;
  color: #49545B;
}
@media only screen and (max-width: 480px) {
  .gridOuter-h2 {
    text-align: center;
    font-size: 1.4em;
  }
}

.Media--medium .Media-heading {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #444;
  line-height: 1;
}
.Media--medium .Media-body p {
  font-size: 1.4rem;
  color: #666;
}
.Media--medium .Media-lead {
  color: #000;
}
.Media--medium .link-more {
  color: #999;
  margin-top: 0.55em;
  text-decoration: underline;
  font-size: 1.2rem;
}
.Media--medium .link-more:hover {
  text-decoration: none;
  color: #444;
}

/* Modifiers */
.Media-heading--compact {
  margin: 0 0 2px;
}

.Media--medium--gutterRight {
  padding-right: 2.6em;
}

.Media--medium--gutterBottom {
  margin: 0 0 1.2em;
}

/* ==========================================================================
   Avatar
   ========================================================================== */
.Avatar {
  border-radius: 3px;
}

.Avatar--round {
  border-radius: 50%;
}

/**
 * CrossSell
 * ******************************************************
 */
.CrossSell {
  border: 1px solid;
  border-radius: 4px;
  padding: 1em;
  margin: 1em 0;
}
.CrossSell .Media-image {
  width: 34px;
  margin-top: 26px;
}
.CrossSell .Media-heading {
  font-weight: bold;
  font-size: 1.6rem;
  color: #4b728c;
}
.CrossSell p {
  padding-right: 14em;
  font-size: 1.4rem;
  line-height: 1.5;
}
.CrossSell a {
  text-decoration: underline;
}
.CrossSell .Button {
  margin-top: 0.5em;
  padding: 1em 1.1em;
}

.CrossSell--yellow {
  border-color: #E5D6B0;
  background-color: #fff9ea;
  color: #333;
}
.CrossSell--yellow .Media-heading {
  color: #000;
}
.CrossSell--yellow p {
  color: #333;
}

.CrossSell--blue {
  border-color: #d3dfe7;
  background-color: #f4f7f9;
  color: #547e9a;
}
.CrossSell--blue .Media-heading {
  color: #4b728c;
}
.CrossSell--blue p {
  color: #547e9a;
}

.CrossSell--red {
  border-color: #e2b5ba;
  background-color: #FFF2F2;
  color: #a52727;
}
.CrossSell--red .Media-heading {
  color: #a52727;
}
.CrossSell--red p {
  color: #a52727;
}

.Video {
  width: 360px;
  margin: 60px auto 20px auto;
}
.Video .Video-title {
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 16px 0;
  line-height: 1;
}
.BlankSlate--video {
  margin-top: -42px;
}

/* ==========================================================================
   MODULE BASE CLASS
   ========================================================================== */
/*
    DESCRIPTION
    -----------
    This is the Default block level outlined unit of content.
    E.G. Stack container or server detail property list container.

    If SASS nesting is used - nest only a SINGLE level deep.
    --------------------------------------------------------

    References for BEM & SUIT SYNTAX & CSS ARCHITECTURE
    ----------------------------------------------------

    https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
    http://cssguidelin.es/
    https://github.com/davidtheclark/scalable-css-reading-list

    BEM/SUIT CSS SYNTAX
    -------------------

    .BlockName {}
    .BlockName--modifierName {}
    .BlockName-elementName {}


    global utility classes can be abstracted out e.g:
    .u-textRight { text-align: right; }

    Markup Example
    --------------

    <section class="Module [Module--modifier]">
        <header class="Module-header Module-header--pri">
            <h1 class="Module-title">
                Module Heading
                <span class="Module-titleSub">Subhead</span>
            </h1>
        </header>
        <div class="Module-body">
            module content
        </div>
        <footer class="Module-footer">
        </footer>
    </section>


    MODIFIERS
    ---------

    Module--callout {}     E.g. a protip module
*/
/**
 * Mod - Wrapper block with no styling
 */
.Mod {
  margin-bottom: 22px;
}

/**
 * Module Vars
 */
/**
 *  Base Module
 *  Default block level outlined unit of content
 */
.Module {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: #dadee5;
  border-radius: 6px;
  margin-bottom: 28px;
  color: #333;
  background-clip: padding-box;
  box-sizing: border-box;
  background: #fff;
  /* this needs to be set specifically as with clusters we have background shading on body/main element */
}

.Module--related {
  margin-bottom: 22px;
}

.Module--spaced {
  margin-bottom: 54px;
}

/**
 *  Grey BG Panel Module
 *  Use case Audit filter form controls
 */
.Module--fill {
  padding: 16px;
  background: #FFF;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
}
.Module--fill::after {
  clear: both;
  content: "";
  display: block;
}

.Module--fillBorderLight {
  padding: 0 18px;
  background: #FCFCFC;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
  margin: 20px 0;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.Module--modalScroll {
  height: 200px;
  overflow: auto;
}

.Module--BottomPadded {
  padding-bottom: 24px;
}

.Module-header {
  position: relative;
  padding: 16px;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e0e0e0;
  background-color: #FAFBFC;
}
.Module-header .Module-close {
  position: absolute;
  top: 13px;
  right: 10px;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.Module-header--clear {
  background: transparent !important;
}

.Module-header--logs {
  padding: 12px;
  min-height: 51px;
}

.Module-header--sec {
  background: #F7F8F9;
}

.Module-headerItem {
  margin: 0 3px;
  line-height: 19px;
}

.Module-headerItem--spaced {
  margin: 0 3px 0 20px;
}

.Module-headerItem--related {
  margin: 0 3px 0 8px;
}

.Module-headerItemUser {
  min-width: 180px;
}

.Module-control {
  position: absolute;
  top: 8px;
  right: 6px;
}
.Module-control .close {
  font-size: 34px;
}

/**
 * Module Title
 */
.Module-titleIcon {
  position: absolute;
  top: 11px;
  left: 13px;
}

.Module-svgIcon {
  position: absolute;
  top: 15px;
  left: 13px;
  stroke: #616f77;
  fill: #616f77;
}

.Module-icon {
  margin: 0 3px 0 -1px;
  font-size: 1.4rem;
  color: #343b44;
}

.Module-iconSprite {
  margin-right: 4px;
  position: relative;
  top: 1px;
  color: #343b44;
}

.Module-image {
  position: absolute;
  top: 16px;
  left: 12px;
  width: 16px;
}

.Module-imageText {
  padding-left: 20px;
}

.Module-image.docker_cluster {
  top: 18px;
  width: 16px;
}

.Module-image.redis_servers {
  top: 17px;
}

.Module-image.mysql_servers {
  width: 15px;
}

.Module-image.rabbitmq_servers {
  width: 14px;
}

.Module-image.rack_servers {
  top: 17px;
}

.Module-image.node_servers {
  top: 14px;
}

.Module-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #121519;
  margin: 0 !important;
}
@media (max-width: 620px) {
  .Module-title {
    font-size: 1.3rem;
  }
}
.Module-title .Module-subTitle {
  font-size: 14px;
  margin: 0;
}
.Module-title .Module-titleText {
  padding-left: 20px;
}

.Module-titleClearLink {
  color: #2f373f;
}
.Module-titleClearLink:hover {
  color: #427dc4;
  text-decoration: none;
}

.Module-h3 {
  margin: 0 0 0.7em 0;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
  color: #000;
}

.Module-logo {
  margin: 0.8em 0;
  height: 60px;
}

.Module-logoWrap {
  box-sizing: border-box;
  padding-top: 0.5em;
  margin: 0 auto;
  width: 4.2em;
  height: 4.2em;
  line-height: 4.2em;
  background: #F9F9F9;
  border: 1px solid #eee;
  text-align: center;
}

.Module-btnTxt {
  display: inline-block;
  padding-left: 16px;
  line-height: 1;
  font-size: 1.3rem;
}

/**
  * Generic no logo placeholder
  * <div class="Module-logo Module-logo--missing"></div>
  */
.Module-logo--missing {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  margin: 0.8em auto;
  background-color: #F9F9F9;
  border-radius: 50%;
  border: 2px solid #efefef;
}

.Module-descSmall {
  margin: 0.5em 0 0;
  padding: 0 0.5em;
  font-size: 1.3rem;
  color: #666;
}

.Module-title.is-green {
  color: inherit;
}

.Module-title.is-amber {
  color: #EA8407;
}

.Module-title.is-red {
  color: rgb(203, 36, 49);
}

.Module-titleAside {
  font-size: 1.3rem;
}

.Module-titleSub {
  font-weight: 500;
  font-size: 13px;
}
.Module-titleSub a {
  color: #427dc4;
}

.Module-titleSubBlock {
  font-weight: 400;
  font-size: 13px;
  display: block;
  padding-top: 6px;
}

.Module-titleLink {
  text-decoration: none !important;
  color: #427dc4;
}

.Module-headerTools {
  position: absolute;
  top: 13px;
  right: 14px;
  vertical-align: middle;
}
.Module-headerTools .Button {
  position: relative;
  margin-left: 4px;
  border-radius: 3px !important;
  font-weight: 500;
}

.Module-headerTool {
  position: relative;
  top: 2px;
}

.Module-headerToolsLabel {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -5px;
  font-size: 1.2rem;
  text-shadow: 0 1px 0 #fff;
  color: #999;
  margin-right: 0.5em;
  line-height: 1.5;
}

.Module-footerTools {
  position: absolute;
  top: 8px;
  left: 12px;
}

.Module-headerGroup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1;
  background-color: #FAFBFC;
  top: 0;
  right: 3px;
  height: 100%;
  /* newer version uses image instead of utf8 character */
}
.Module-headerGroup .Module-headerGroupItem {
  position: relative;
  margin-right: 4px;
}
.Module-headerGroup .Module-headerGroupItem:last-child {
  margin-right: 8px;
}
.Module-headerGroup .Module-headerGroupItem--spacedRight {
  margin-right: 18px;
}
.Module-headerGroup .Module-headerGroupItem--spacedLeft {
  margin-left: 18px;
}
.Module-headerGroup .Module-headerGroupInput {
  width: 122px;
  background: #fff;
  border-color: #dadee5;
  border-radius: 4px;
  margin: 0 !important;
}
.Module-headerGroup .Module-headerGroupInput:hover, .Module-headerGroup .Module-headerGroupInput:focus, .Module-headerGroup .Module-headerGroupInput:active {
  box-shadow: none !important;
}
.Module-headerGroup .Module-headerGroupInput--normal {
  width: 123px;
}
.Module-headerGroup .Module-headerGroupInput--wide {
  width: 192px;
}
.Module-headerGroup .Module-headerGroupInput--extraWide {
  width: 440px;
}
.Module-headerGroup .Module-headerGroupInput::-webkit-input-placeholder,
.Module-headerGroup .Module-headerGroupInput::-moz-input-placeholder {
  font-size: 9px;
}
.Module-headerGroup .Module-headerGroupInput--search {
  background-image: url("/assets/ico/search-cde31ddf8cc976e72dcf244cfc18d725b5595292.svg");
  background-position: left 8px bottom 50% !important;
  background-repeat: no-repeat !important;
  padding-left: 28px !important;
  background-size: 14px 14px !important;
}
.Module-headerGroup .Module-headerGroupBtn {
  position: absolute;
  right: 6px;
  top: 7px;
  color: #ddd;
  padding: 0 !important;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  line-height: 1;
}
.Module-headerGroup .Module-headerGroupBtn:hover {
  color: #999;
}
.Module-headerGroup .Module-headerGroupButton {
  -webkit-appearance: none;
  position: absolute;
  right: 6px;
  top: 7px;
  z-index: 1;
  color: #c4c4c4;
  padding: 0 !important;
  cursor: pointer;
  background: transparent;
  border: 0;
  line-height: 1;
}
.Module-headerGroup .Module-headerGroupButton:hover {
  color: #999;
}
.Module-headerGroup .Module-headerGroupButton .Module-headerGroupIcon {
  width: 16px;
  height: 16px;
}

.Module--callout .Module-headerGroupInput {
  border-color: #eadbb4 !important;
}

.Module-headerClose {
  font-size: 26px !important;
}

.Module-helpText {
  position: relative;
  top: 1px;
  margin-right: 0.4em;
  font-size: 1.2rem;
}

.Module-body {
  position: relative;
  background: transparent;
  box-sizing: border-box;
  padding: 18px;
  background: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.Module-body p {
  line-height: 1.5;
  margin-bottom: 12px;
}
.Module-body p:first-child {
  margin-top: -4px;
}
.Module-body p:only-child,
.Module-body p:last-child {
  margin-bottom: 0 !important;
}

.Module-body--padded {
  padding: 22px !important;
}

.Module-body--paddedContent {
  padding: 28px 28px 3px 28px !important;
}

.Module-body--message {
  background: #FFF3DB;
  border-bottom: 1px solid #DBCAA0;
}

.Module-section {
  margin-bottom: 8px;
}
.Module-section:last-child {
  margin-bottom: 0;
}

.Module-code {
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  padding: 0;
  line-height: 1 !important;
  word-break: break-all;
  word-wrap: break-word;
}

.Module-bodyPad {
  padding: 18px 22px;
}

.Module-item {
  padding: 12px;
}

/**
 * Module container
 * wrapping element with no padding e.g. loging modules
 */
.Module-container {
  background: #fff;
  padding: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/**
 * Scrolling within modules
 * scrolling with an overflow within a module container
 * <div class="Module-container Module-container--scroll">
 */
.Module-container--scroll {
  height: 75vh;
  overflow: auto;
}

/*
 *  The logs area is 47% of the container height
 *  this takes into account the filtering controls that appear before the logs.
 */
.Module-container--scrollWithFilters {
  height: 60vh;
  overflow: auto;
}

.Module-container--scrolls .log-list .log-item {
  padding: 5px 6px;
}

.Module-container--scroll::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.Module-container--scroll::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/**
 * Module with footer
 */
.Module-footer {
  position: relative;
  /* overflow: hidden; */
  min-height: 1.2em;
  padding: 12px 12px;
  font-size: 1.2rem;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.Module-footer::after {
  clear: both;
  content: "";
  display: block;
}

.Module-footer--extraPadding {
  padding: 20px;
}

.Module-footer--withBorder {
  border-top: 1px solid #efefef;
}

.Module-footer--alt {
  background: #FCFCFC;
  border-top: 1px solid #e8e8e8;
}

.Module-footerActions {
  padding: 12px 12px;
  padding-top: 0;
}

.Module-footerAlerts {
  display: inline-block;
}

.Module-footerAlertsCompact {
  display: inline-block;
}

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

.Module-footerAlertsItem--warning .icon-warning {
  color: #EA8407;
}

.Module-footerAlertsItem--error .icon-warning {
  color: #E01F22;
}

.Module-footerAlertsItemIcon {
  position: relative;
  top: 3px;
  margin-left: 6px;
}

/**
 * Base Module with copy
 */
.Module-copy {
  padding: 4px 14px;
}
.Module-copy .Module-copyHeading {
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 1em 0 0.4em 0;
  color: #444;
}
.Module-copy .command-eg {
  font-size: 1.2rem;
  margin-bottom: 14px;
  color: #666;
  line-height: 1;
  margin: 1em 0;
}
.Module-copy .Module-copyHeading:last-child,
.Module-copy .Module-copyHeading:only-child {
  margin-bottom: 0;
}
.Module-copy .Module-copyHeading:first-child {
  margin-top: 0;
}

.Module-content {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 18px;
  padding-right: 18px;
}
.Module-content p:last-child {
  margin-bottom: 0;
}
.Module-content .Module-contentTitle {
  line-height: 1;
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1.4rem;
}
.Module-content h4,
.Module-content h5 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.Module-content ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

.Module-blankSlate {
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 18px;
  padding-right: 18px;
}

/**
 * MODULE MODIFIERS
 * ****************************************************************
 */
/**
* STACK SPECIFIC MODULE MODIFIER
*/
/*
    Reverse the row striping as stacks include a table caption
    TODO - fix for modules with tags as they contain a hidden row.
*/
/**
 * NEGATIVE MODULE MODIFIER (E.G. Failed component, component contains error state)
 */
.Module--negative {
  border: 1px solid #e2b5ba;
  background: #FFF2F2;
  font-size: 14px;
}
.Module--negative .Module-header {
  background: #FFF2F2;
  border-bottom: 1px solid #e2b5ba;
}
.Module--negative .Module-title,
.Module--negative .Module-titleSub {
  color: rgb(203, 36, 49) !important;
}
.Module--negative .Module-icon {
  color: #a52727 !important;
}
.Module--negative .Module-body--negative {
  overflow: hidden;
  background: #FFF2F2;
  color: rgb(203, 36, 49) !important;
}
.Module--negative .Module-body--negative a:not(.Button) {
  color: rgb(203, 36, 49);
  text-decoration: underline;
}
.Module--negative .Module-content--negative {
  color: rgb(203, 36, 49);
}
.Module--negative .Module-content--negative h5, .Module--negative .Module-content--negative h6 {
  color: rgb(203, 36, 49);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}
.Module--negative .Module-content--negative a:not(.Button) {
  color: rgb(203, 36, 49);
  text-decoration: underline;
}
.Module--negative .Module-listItem {
  color: rgb(203, 36, 49);
}
.Module--negative .Module-footer--withBorder {
  border-top: 1px solid #F7D9DC !important;
}
.Module--negative .Module-footer {
  color: rgb(203, 36, 49);
}
.Module--negative .Module-footer a {
  color: rgb(203, 36, 49);
  text-decoration: underline;
}
.Module--negative .Module-footer--dotted {
  border-top: 1px dotted #F7D7D9 !important;
}
.Module--negative .Button:not(.Button--pri) {
  text-shadow: 0 1px 0 #fff;
  border-color: #e2b5ba;
  color: rgb(203, 36, 49);
}
.Module--negative .Button:not(.Button--pri):hover {
  border-color: #C6858B;
}
.Module--negative .Module-link {
  color: rgb(203, 36, 49);
  text-decoration: underline;
}

.Module--negativeOutlined {
  border: 1px solid #e2b5ba;
}
.Module--negativeOutlined .Module-header {
  background: #FFF2F2;
  border-bottom: 1px solid #e2b5ba;
}
.Module--negativeOutlined .Module-title,
.Module--negativeOutlined .Module-titleSub {
  color: #a52727 !important;
}
.Module--negativeOutlined .Module-icon {
  color: #a52727 !important;
}

/**
 * AMBER MODULE MODIFIER (E.G. reboot required)
 */
.Module--amber {
  border: 1px solid #FFBE75;
}
.Module--amber .Module-header {
  background: #FFF7EA;
  border-bottom: 1px solid #FFBE75;
}
.Module--amber .Module-title,
.Module--amber .Module-titleSub {
  color: #D87700 !important;
}
.Module--amber .Module-icon {
  color: #D87700 !important;
}
.Module--amber .Module-body--amber {
  background: #FFF7EA;
  color: #D87700 !important;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.Module--amber .Module-content--amber {
  color: #D87700;
}
.Module--amber .Module-listItem {
  color: #D87700;
}
.Module--amber .Module-footer--dotted {
  border-top: 1px dotted #FFD8B2 !important;
}
.Module--amber .Button {
  text-shadow: 0 1px 0 #fff;
  border-color: #FFD2A5;
  color: #D87700;
}
.Module--amber .Button:hover {
  border-color: #FFBE75;
}
.Module--amber .Module-link {
  color: #D87700;
  text-decoration: underline;
}

/**
 * RED MODULE MODIFIER (E.G. server failure)
 */
.Module--red,
.Module--failed {
  overflow: hidden;
  border: 1px solid #e2b5ba;
}
.Module--red .ico--mini,
.Module--failed .ico--mini {
  color: rgb(203, 36, 49);
}
.Module--red .Module-header,
.Module--failed .Module-header {
  background: #FFF2F2;
  border-bottom: 1px solid #e2b5ba;
}
.Module--red .Module-title,
.Module--red .Module-titleSub,
.Module--failed .Module-title,
.Module--failed .Module-titleSub {
  color: rgb(203, 36, 49) !important;
}
.Module--red .Module-title *,
.Module--failed .Module-title * {
  color: rgb(203, 36, 49) !important;
}
.Module--red .Module-icon,
.Module--failed .Module-icon {
  color: rgb(203, 36, 49) !important;
}
.Module--red .Module-body,
.Module--failed .Module-body {
  background: #FFF2F2;
  color: rgb(203, 36, 49) !important;
}
.Module--red .Module-body a,
.Module--red .Module-body .Module-link,
.Module--failed .Module-body a,
.Module--failed .Module-body .Module-link {
  color: rgb(203, 36, 49);
  text-decoration: underline;
}
.Module--red .Module-content--red,
.Module--failed .Module-content--red {
  color: rgb(203, 36, 49);
}
.Module--red .Module-listItem,
.Module--failed .Module-listItem {
  color: rgb(203, 36, 49);
}
.Module--red .Module-footer--dotted,
.Module--failed .Module-footer--dotted {
  border-top: 1px dotted #FFD8B2 !important;
}
.Module--red .Button,
.Module--failed .Button {
  text-shadow: 0 1px 0 #fff;
  border-color: #FFD2A5;
  color: rgb(203, 36, 49);
}
.Module--red .Button:hover,
.Module--failed .Button:hover {
  border-color: #e2b5ba;
}

/**
 * INTERNAL MODULE ERROR - e.g. history diff modules
 * Legacy module for versioned files, depreacted in favour
 * of Module--negative
 */
.Module-error {
  background: rgba(234, 131, 145, 0.1) !important;
  color: #AA4442;
  padding: 1em;
  margin: -10px -11px 1.6em -11px;
  border-bottom: 1px solid rgba(234, 131, 145, 0.4);
}
.Module-error .Module-errorTitle {
  color: #aa4442;
}
.Module-error p {
  font-size: 1.3rem;
}

/**
 * POSITIVE MODULE MODIFIER (E.G. Success component and state)
 */
.Module--positive {
  border: 1px solid #BDDBA2;
}
.Module--positive .Module-header {
  background: #F4FFEF;
  border-bottom: 1px solid #BDDBA2;
}
.Module--positive .Module-icon {
  color: #339900 !important;
}
.Module--positive .Module-footer--withBorder {
  border-top: 1px solid #BDDBA2 !important;
}
.Module--positive .Module-footer--dotted {
  border-top: 1px dotted #D3E8BE !important;
}
.Module--positive .Module-title,
.Module--positive .Module-titleSub {
  color: rgb(40, 167, 69);
}
.Module--positive .Button {
  text-shadow: 0 1px 0 #fff;
  border-color: #BDDBA2;
  color: rgb(40, 167, 69);
  box-shadow: none;
}
.Module--positive .Button:hover {
  border-color: #97BF72;
  color: #318901;
}

.Module--heroku {
  border: 1px solid #8A7EB1;
  color: #6e5baa !important;
}
.Module--heroku .Module-header {
  background: #E4DEF4;
  border-color: #8A7EB1;
}
.Module--heroku .Module-title {
  color: #545386;
}
.Module--heroku .Module-body li,
.Module--heroku .Module-body p {
  font-size: 1.4rem;
}
.Module--heroku .Module-body p {
  padding-top: 0.5em;
}
.Module--heroku .Module-body a {
  text-decoration: underline;
  color: #6e5baa;
}

.Module--medium .Module-title {
  font-size: 1.5rem;
}
.Module--medium .Module-body {
  font-size: 1.5rem;
  line-height: 1.3;
}

/**
 * CALLOUT MODULE MODIFIER (E.G. Protips Module)
 */
.Module--callout {
  border: 1px solid #eadbb4;
  background: #fcf7ea;
  overflow: hidden;
  box-shadow: none !important;
}
.Module--callout .Module-header {
  background: #fcf7ea;
}
.Module--callout .Module-header .Module-close {
  color: #eadbb4;
}
.Module--callout .Module-header .Module-close:hover {
  color: #d6c395;
}
.Module--callout .Module-body {
  background: #fcf7ea;
  color: #000;
  padding: 14px;
}
.Module--callout .Module-body p {
  font-size: 1.3rem;
  color: #333;
}
.Module--callout .Module-body a {
  text-decoration: underline;
}
.Module--callout .Module-content--divider {
  border-bottom: 1px solid #eadab4;
}
.Module--callout .Module-header {
  border-bottom: 1px solid #eadbb4;
}
.Module--callout .Module-footer {
  border-color: #eadbb4;
}
.Module--callout .Module-title {
  text-shadow: none;
}
.Module--callout .Module-titleSub {
  font-size: 1.3rem;
}
.Module--callout .Button--outlined {
  border: 1px solid #c9bc9b;
  background: transparent;
}
.Module--callout .Button--outlined:hover {
  background: #fff;
}

.Module--padded .Module-header {
  padding: 16px;
}
.Module--padded .Module-body {
  padding: 16px;
}

.Module-subTitle {
  font-weight: 500;
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.Module-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.Module-list li {
  font-size: 1.4rem;
  padding: 0.4rem 0;
  line-height: 1.3;
}

.Module-list--sml li {
  font-size: 1.3rem;
  padding: 0.11rem 0;
}

.Module-list--spaced li {
  padding: 0.15rem 0;
}

/**
 * CALLOUT SIDEBAR MODULE MODIFIER
 */
/*
    <section class="Module Module--callout Module--sidebar">
        <header class="Module-header">
            <h2 class="Module-title">
                Working with Services
            </h2>
        </header>
        <div class="Module-body">
            <p><a href="">Docker Services Help</a></p>
        </div>
    </section>

*/
.Module--sidebar,
.Module--secondary {
  /* < 1024px grid - linearised layout */
  box-shadow: none;
}
@media only screen and (max-width: 1023px) {
  .Module--sidebar,
  .Module--secondary {
    display: none;
  }
}
.Module--sidebar .Module-title,
.Module--secondary .Module-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #000;
  line-height: 1.1;
}
.Module--sidebar p,
.Module--secondary p {
  font-size: 1.3rem;
}
.Module--sidebar .Module-subTitle,
.Module--secondary .Module-subTitle {
  font-weight: 600;
  font-size: 1.3rem;
}

/**
 * INFO MODULE MODIFIER (E.G. Accessing Git in form 2 - Pale Blue filled Module)
 */
.Module--info {
  overflow: hidden;
  color: #4b545b;
  font-size: 1.4rem;
}
.Module--info .Module-titleSub {
  font-weight: 400;
  color: #666;
  font-size: 1.4rem;
}
.Module--info .form-actions {
  border-top: 1px solid #C0CACE;
}
.Module--info .Module-infoSubheading {
  color: #00354C !important;
}
.Module--info ul {
  margin: 6px 0 14px 18px;
}
.Module--info ul li {
  line-height: 1.8em;
}
.Module--info textarea {
  width: 99% !important;
  overflow-y: hidden;
  box-shadow: none;
}
.Module--info .Module-subTitle {
  color: #000;
  font-weight: bold;
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.Module-col {
  padding: 14px 18px 18px 14px;
}

.Module-infoSubheading {
  font-size: inherit;
  font-weight: bold;
  color: inherit;
}

.Module-infoList {
  font-size: 1.5rem;
  margin: 6px 0 14px 18px;
}
.Module-infoList li {
  line-height: 1.2em;
  padding: 0.25em 0;
}

.Module-lead {
  line-height: 2;
  font-size: 2rem;
  color: #999;
  font-weight: 400;
  padding-top: 1.4em;
  padding-bottom: 1.4em;
}

/**
 *  MODULE FORM (E.G. Dashboard)
 */
.Module-formContainer {
  position: relative;
  color: #666;
}

.Module-loading {
  background: transparent url("/assets/loading/spinner-02760f17683383d78db54c5350c8711c5f6f8a45.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  animation: rotate 1.5s infinite steps(12);
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/**
 *  MODULE STEP NAVIGATION (E.G. Multiple step top nav like 2FA)
 */
.Module--stepNav {
  border: none;
  box-shadow: none;
}
.Module--stepNav .Module-container {
  border: 1px solid #dadee5;
  border-top: none;
}
.Module--stepNav .Module-header {
  padding: 0;
}

/**
 *  preformatted e.g. code blocks with a module.
 */
.Module .Module-pre {
  padding: 2em;
  line-height: 22px;
}

/**
* UI STATES FOR MODULES
* ******************************************************
*/
.Module.is-closed {
  border-bottom: none !important;
}
.Module.is-closed .Module-body {
  display: none;
}

.Module.is-disabled {
  border: 1px solid #ddd;
}
.Module.is-disabled .Module-title {
  opacity: 0.75;
  color: #777;
}
.Module.is-disabled .circle {
  background-color: #E0E0E0;
}
.Module.is-disabled .Module-header {
  background: transparent;
  border-bottom: 1px solid #ddd;
}
.Module.is-disabled .Module-title,
.Module.is-disabled .Module-titleSub {
  color: #999;
}

.Module.is-hidden {
  display: none;
}

@media (max-width: 620px) {
  .Module-filter {
    display: none !important;
  }
}

/**
 * DARK THEMED Modules
 * E.g. if you want dark background logs e.g. halo
 * ******************************************************
 */
.Module--dark {
  border-color: #c0ccd8;
  border: none;
}
.Module--dark .Button {
  border: 1px solid transparent;
  color: #c5c9cf;
}
.Module--dark .Button:hover {
  background: #333f51;
  border: 1px solid transparent;
  color: #fff;
}
.Module--dark .Button:focus, .Module--dark .Button:active {
  background: #2e3949;
  color: #fff;
  border: 1px solid #404e66 !important;
  outline: none;
}
.Module--dark .Button--bordered {
  color: #fff;
  border: 1px solid #45546d !important;
  font-weight: 500;
}
.Module--dark .Button--yellow {
  border: 1px solid rgb(255, 228, 132) !important;
  color: rgb(255, 228, 132);
  font-weight: 500;
  min-width: 88px;
}
.Module--dark .Button--yellow:hover, .Module--dark .Button--yellow:active, .Module--dark .Button--yellow:focus {
  color: rgb(255, 228, 132) !important;
  border: 1px solid rgb(255, 228, 132) !important;
}
.Module--dark .Button--red {
  border: 1px solid rgb(255, 131, 131) !important;
  color: rgb(255, 131, 131) !important;
  font-weight: 500;
  min-width: 88px;
}
.Module--dark .Button--delete {
  margin-left: 8px;
  color: rgb(255, 131, 131) !important;
  font-weight: 500;
  min-width: 88px;
}
.Module--dark .Button--green {
  border: 1px solid rgb(181, 244, 165) !important;
  color: rgb(181, 244, 165) !important;
  font-weight: 500;
  min-width: 88px;
}
.Module--dark .Button--green:hover, .Module--dark .Button--green:active, .Module--dark .Button--green:focus {
  color: rgb(181, 244, 165) !important;
  border: 1px solid rgb(181, 244, 165) !important;
}
.Module--dark .Module-header {
  background: rgb(45, 55, 72);
  border-bottom: 1px solid #3D4A60;
}
.Module--dark .Module-header .Module-headerGroup {
  background: rgb(45, 55, 72);
}
.Module--dark .Module-header .Module-title {
  color: #fff;
  text-shadow: none;
}
.Module--dark .Module-header .Module-title .Module-titleSub {
  color: #c5c9cf;
}
.Module--dark .Module-header .Module-title.is-failed {
  color: #ff8383;
}
.Module--dark .Module-header .Module-titleSubBlock {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.Module--dark .Module-header .Button.Button--moduleHeader {
  min-width: 88px;
}
.Module--dark .Module-header .Button.Button--icon {
  min-width: 12px;
  padding: 0;
  line-height: 1;
  color: #c5c9cf;
}
.Module--dark .Module-header .Button.Button--icon:hover {
  background: #333f51;
  border: 1px solid transparent;
  color: #fff;
}
.Module--dark .Module-header .Button.Button--icon:focus, .Module--dark .Module-header .Button.Button--icon:active {
  background: #333f51;
  color: #fff;
  border: 1px solid transparent;
  outline: none;
}
.Module--dark .Module-footer {
  background: rgb(45, 55, 72);
  color: #c5c9cf;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid #3D4A60;
}
.Module--dark .Module-footer b {
  color: #fff;
}
.Module--dark .Module-title {
  text-shadow: none;
}
.Module--dark .is-red .HeaderMessages-title {
  color: rgb(255, 131, 131);
}
.Module--dark .is-green .HeaderMessages-title {
  color: rgb(181, 244, 165) !important;
}
.Module--dark .highlight {
  margin: 0;
  color: #000 !important;
  background: #feff00 !important;
  padding: 1px 2px;
  border-radius: 2px;
  display: inline !important;
  font-weight: 600;
}
.Module--dark .Tag {
  color: #fff;
  background: rgba(45, 55, 72, 0.75);
}
.Module--dark ::-webkit-scrollbar {
  background: rgb(45, 55, 72);
}
.Module--dark ::-webkit-scrollbar-thumb {
  background: #4b5c77;
}

/* Positioin stcky module headers. E.g: prepress logs */
.Module--fixedHeader .Module-header {
  z-index: 1;
  position: sticky;
  top: 55px;
}

.Drawer .Module--fixedHeader .Module-header {
  z-index: 1;
  position: sticky;
  top: -16px;
}

/**
 * MISC MODIFIER CLASSES
 * ******************************************************
 */
/*
    Used with outer title -pushes sidebar module down to
    align with first module within the main content.
*/
.Module--lowerSidebar {
  margin-top: 64px;
}

/*
   Wrapper to hide module contents
   E.G. Form 1 Git details
*/
.section-is-hidden {
  height: 0;
  overflow: hidden;
}

.Module-cta {
  font-weight: bold;
  font-size: 1.4rem;
  color: #427dc4;
}

/*  Use Case
    A module that contains tab navigation appearing directly after the title
    E.g. Services edit view contains 'Normal' and 'Advanced Tabs'
*/
.Module--hasTabs .TabMini {
  padding-top: 12px;
}

/**
 * SideCta
 * ******************************************************
 */
.SideCta {
  color: #547e9a;
  display: none;
  /* greater than 1024 assume multi col layout */
  margin: 0 0 2em;
  padding: 1.5em 0;
  text-align: center;
  cursor: pointer;
  padding: 1.8em 0;
  border-radius: 3px;
}
@media (min-width: 1024px) {
  .SideCta {
    display: block;
  }
}

.SideCta--filled {
  border: 1px solid #d3dfe7;
  background: #F7FAFC;
}

.SideCta--dividerTop {
  border-top: 1px solid rgba(0, 0, 0, 0.085);
}

.SideCta--dividerBottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.085);
}

.SideCta-link {
  display: block;
  outline: none !important;
  cursor: pointer;
}
.SideCta-link:hover {
  text-decoration: none;
}

.SideCta-icon {
  display: block;
  font-size: 2.9rem;
  color: #427dc4;
}

.SideCta-title {
  display: block;
  margin: 1em 0 0.5em 0;
  line-height: 1;
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: none;
  color: #59626a;
}

.SideCta-lead {
  font-size: 1.2rem;
  color: #59626a;
}

/**
 * Bulk Ops on table modules e.g. filtering rows, multiple selection
 * of rows is hidden
 * **************************************************************
 */
.bulk-ops-disabled .HeaderInput,
.bulk-ops-disabled .Table-headerControls,
.bulk-ops-disabled .js_multi_ops_check {
  display: none !important;
}

/**
 * Sidebar containing module
 * No outline or background e.g. help CTA Rails Form 2
 * **************************************************************
 */
.Module--transparent {
  border: none !important;
  background: transparent !important;
}
.Module--transparent .Module-body {
  background: transparent !important;
}

/**
 * Service centric Stack Overview Page
 * App and Data sources
 * **************************************************************
 */
.js_service_item .Module-footer {
  display: none;
}

.Module--isActive .Module-footer {
  display: block;
}

/*
 * Textual introductory help at the top of pages
 */
.TextIntro {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 2px;
  padding-right: 2px;
}
.TextIntro .TextIntro-title {
  color: #444d56;
  font-size: 16px;
  font-weight: 800;
}
.TextIntro p.TextIntro-text {
  color: #6c757f;
  font-size: 15px;
  font-weight: normal;
}
.TextIntro .TextIntro-heading {
  color: #444d56;
  font-size: 22px;
  font-weight: 800;
  padding-bottom: 10px;
}
.TextIntro .TextIntro-lead {
  color: #444d56;
  font-size: 18px;
  font-weight: 500;
}

.ProductsModules {
  margin-top: 1.2em;
}

.ProductsModules.ProductsModules--primary .ButtonTxt,
.ProductsModules.ProductsModules--primary .ProductModule-link {
  display: none;
}
.ProductsModules.ProductsModules--primary .ProductModule {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.085);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ProductsModules.ProductsModules--primary .ProductModule:hover {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.125);
}
.ProductsModules.ProductsModules--primary .ProductModule .Media-body {
  min-height: 12.4em;
}
.ProductsModules.ProductsModules--primary .ProductModule p {
  color: #4c585e !important;
}
.ProductsModules.ProductsModules--primary .ProductModule h2 {
  font-size: 2rem !important;
  margin: 0 0 1em !important;
}
.ProductsModules.ProductsModules--primary .ProductModule .ProductModule-image {
  margin-bottom: 22px;
}
.ProductsModules.ProductsModules--primary .ProductModule .ProductModule-welcomeTxt {
  display: inline;
}
.ProductsModules.ProductsModules--primary .ProductModule .ProductModule-title {
  font-weight: 800;
}
.ProductsModules.ProductsModules--primary .ProductModule .ProductModule-text {
  font-size: 16px !important;
}
.ProductsModules.ProductsModules--primary .ProductModule .Button {
  padding: 1.1em 1.4em;
  font-size: 1.4rem;
  font-weight: 900;
}

.ProductModule-linkMuted {
  color: #a0a0a0 !important;
  font-weight: normal !important;
}
.ProductModule-linkMuted:hover {
  color: #427dc4;
}

.ProductsModules-link {
  position: relative;
  top: -12px;
  font-size: 14px;
}

.ProductsModules-footer {
  padding-top: 30px;
  margin-top: 6px;
}

.ProductsModules.ProductsModules--secondary .ProductModule {
  box-shadow: none !important;
}
.ProductsModules.ProductsModules--secondary .ProductModule:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 0, 0, 0.125) !important;
}
.ProductsModules.ProductsModules--secondary .u-ProductBar {
  background: transparent;
}
.ProductsModules.ProductsModules--secondary .ProductModule p {
  color: #999 !important;
}
.ProductsModules.ProductsModules--secondary .ProductModule-welcomeTxt {
  display: none;
}
.ProductsModules.ProductsModules--secondary .Button {
  background-color: #fff;
  color: #62c462;
  border: 1px solid #62c462;
  text-shadow: none;
  transition: none;
}
.ProductsModules.ProductsModules--secondary .Button:hover {
  background: #62c462;
  color: #fff;
}

.ProductModule {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.065);
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 2.4em;
  transition: all 0.2s ease-in-out;
  color: #888 !important;
}
.ProductModule .ProductModule-inner {
  padding: 2.4em 2.2em;
}
.ProductModule:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.125);
}
.ProductModule .Media-image {
  margin-top: 0;
}
.ProductModule .Media-body {
  min-height: 11.5em;
}
.ProductModule h2 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 1.2em;
  color: #4c585e;
}
.ProductModule li {
  font-size: 1.5rem !important;
  padding-bottom: 8px;
}
.ProductModule .ico--listItem {
  margin-right: 7px;
  color: #6c7d84;
}
.ProductModule p {
  font-size: 1.6rem !important;
  line-height: 1.5;
  margin: 0 0 2em;
  color: #888 !important;
  font-weight: 400;
}
.ProductModule .Button {
  padding: 1em 1.1em;
}
.ProductModule .ButtonTxt {
  display: inline-block;
  margin: 0 0.4em;
  color: #999;
}
.ProductModule .ProductModule-link {
  position: relative;
  top: 1px;
}

/*
    Generic boxed out content container to group related UI elements
    can contain form elements
    Eg. The deploy new cluster elements in the Form S2 sidebar.
*/
.Well {
  background-color: #FAFBFC;
  padding: 1.2em;
  border-radius: 6px;
  border: 1px solid #efefef;
  margin-bottom: 26px;
  color: #777 !important;
}
.Well .Well-title {
  line-height: 1;
  margin: 0 0 8px 0;
  font-weight: 600;
  color: #000;
  font-size: 14px;
}
.Well .Form-labelXtra {
  color: #888;
}
.Well [type=text] {
  background: #fff;
}
.Well .Form-label {
  color: #000;
}

.Well--dashedBorder {
  border: 1px dashed #ddd;
}

.Well--padded {
  padding: 30px;
}

.Well--xPadded {
  padding: 36px;
}

.Well--form {
  padding: 20px;
}

.Well--transparent {
  background-color: transparent;
}

.Well--callout {
  background-color: #fcf7ea;
  border-color: #eadbb4;
}

.Well--module {
  border-color: #dadee5;
}

.Well--withShadow {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06);
}

/*
    MultiModule - Generic utility for multiple module selection
    multiple modules containing a file.
    E.g. Formations - File download page
*/
.MultiModuleTitle {
  font-weight: 700;
  line-height: 1;
  font-size: 16px;
  padding-bottom: 16px;
  padding-left: 4px;
}

.MultiModule input.MultiModule-check {
  position: relative;
  top: -1px;
  display: inline;
  margin: 0;
  margin-right: 3px;
}
.MultiModule label.MultiModule-label {
  display: inline;
  font-weight: 500;
  margin: 0 !important;
  line-height: 1 !important;
}
.MultiModule .MultiModule-content {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 10px;
}
.MultiModule .MultiModule-messages {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 8px;
  padding-right: 8px;
}
.MultiModule .MultiModule-messagesTitle {
  font-size: 12px;
  font-weight: 500;
  padding-top: 18px;
  padding-bottom: 0;
  margin-bottom: -6px;
  line-height: 1;
}
.MultiModule .MultiModule-file {
  position: relative;
}
.MultiModule .MultiModule-file--minimised {
  height: 80px;
}
.MultiModule .MultiModule-pre {
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
}
.MultiModule .MultiModule-fileControls {
  position: relative;
  padding-left: 10px;
  padding-top: 6px;
  user-select: none;
}
.MultiModule .MultiModule-gradient {
  position: absolute;
  top: -20px;
  height: 2rem;
  width: 100%;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}

/* color modifiers for errors and warning messages */
.MultiModule-messages--errors {
  color: rgb(203, 36, 49);
}
.MultiModule-messages--errors .MultiModule-messagesTitle {
  color: rgb(203, 36, 49);
}

.MultiModule-messages--amber {
  color: #EA8407;
}
.MultiModule-messages--amber .MultiModule-messagesTitle {
  color: #EA8407;
}

.MultiModule.is-maximised .MultiModule-gradient {
  display: none;
}

/*
    CommandBlock
    Use case: the list of commands and copy control, eg. the list of commands used to deploy formations and Helm charts
 */
.CommandBlock {
  padding-bottom: 18px;
}
.CommandBlock .CommandBlock-title {
  line-height: 1;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 1.2rem;
}
.CommandBlock .CommandBlock-code {
  float: left;
  width: 90%;
  min-height: 30px;
}
.CommandBlock .CommandBlock-button {
  float: right;
  margin-top: 0;
  padding: 0.75em 1em;
}

.CommandBlock--helmRelease .CommandBlock-button {
  margin-top: 18px;
}

.CommandBlock:last-child {
  padding-bottom: 0;
}

.prettyprint {
  border: none !important;
}

.Module-file {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: auto;
}

.ModuleControls {
  padding-bottom: 8px;
}

.GroupContainer {
  position: relative;
  padding-bottom: 4px;
  padding-right: 3em;
  font-size: 1.3rem;
}
.GroupContainer .GroupContainer-item:first-child {
  left: -2px;
}
.GroupContainer .GroupContainer-item {
  position: relative;
  min-width: 80px;
  margin: 4px 2px;
  border: 1px solid #d2d7dd;
  border-radius: 3px;
  padding: 4px 12px;
  color: #586069;
  background: #f6f8fa;
  display: inline-block;
  font-size: 12px;
}
.GroupContainer .GroupContainer-text {
  display: inline-block;
  padding: 0 6px;
  font-weight: 500;
}
.GroupContainer .GroupContainer-item:hover {
  background: #e8eff7;
}
.GroupContainer .GroupContainer-item:hover .GroupContainer-text {
  color: #000;
}

/* Application Migration block */
.Migration .Migration-block {
  padding: 12px 4px 26px 4px;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}
.Migration .Migration-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.Migration .Migration-block:first-child {
  padding-top: 0;
}
.Migration .Migration-title {
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 12px 0;
}
.Migration .Migration-description {
  font-size: 14px;
  margin-bottom: 18px;
}
.Migration .Migration-item {
  font-size: 14px;
  margin-bottom: 13px;
  margin-top: 13px;
  padding-left: 28px;
}
.Migration .Migration-item--strong {
  font-weight: 500;
  color: #000;
}
.Migration .Migration-icon {
  position: relative;
  top: 2px;
  font-size: 14px;
  margin-right: 12px;
}
.Migration .Migration-action {
  padding-top: 22px;
  padding-bottom: 0;
  font-size: 14px;
}

.HeaderMessages .HeaderMessages-icon {
  position: relative;
  top: 1px;
  vertical-align: middle !important;
  margin-right: 8px;
}
.HeaderMessages .HeaderMessages-spinner {
  position: relative;
  top: 2px;
}
.HeaderMessages .HeaderMessages-title {
  font-size: 14px;
  vertical-align: middle;
  line-height: 1;
}
.HeaderMessages .HeaderMessages-subTitle {
  line-height: 1;
  padding-left: 28px;
  font-weight: 400;
  font-size: 11px;
  display: block;
  padding-top: 6px;
}
.HeaderMessages .HeaderMessages-subTitleInline {
  font-weight: 300;
  display: inline-block;
}

.HeaderInfo {
  line-height: 1;
  padding-left: 29px;
  font-size: 11px;
  padding-top: 6px;
}

.Module--dark .HeaderMessages-subTitle {
  color: rgba(255, 255, 255, 0.8);
}
.Module--dark .HeaderInfo {
  color: #fff;
}

.Module--clusterPreparation .Module-header--logs {
  min-height: auto;
}

.ModuleContent .ModuleContent-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 14px 0;
  color: #000;
}
.ModuleContent .ModuleContent-heading {
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 12px 0;
  color: #000;
}
.ModuleContent .ModuleContent-text {
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.ModuleContent ul.ModuleContent-list {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 16px;
  margin-left: 26px;
}
.ModuleContent ul.ModuleContent-list li {
  margin-bottom: 5px;
}

/*
  dismissible items: protips etc hidden by default
*/
.js_dismissible {
  display: none;
}

/* ==========================================================================
   MODULE CARD MODIFIER
   ========================================================================== */
/*
    References for BEM & SUIT SYNTAX & CSS ARCHITECTURE
    ----------------------------------------------------

    https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
    http://www.integralist.co.uk/posts/maintainable-css-with-bem/
    http://cssguidelin.es/

    Markup Example
    --------------

    <section class="Module Module--card">
        <header class="Module-header Module-header--pri">
            <h1 class="Module-title">Module Heading</h1>
        </header>
        <div class="Module-body">
            module content
        </div>
        <footer class="Module-footer">
        </footer>
    </section>

*/
/**
 * DASHBOARD CARD
 * CARD MODULE MODIFIER (E.G. Dashboard)
 */
.StackCardLists-divider {
  margin: -6px 0 16px 0;
}

/* Dashboard cards */
.Module.Module--ds {
  transition: all 0.25s ease-in-out;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.Module.Module--ds:hover {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.16);
}

.Module.Module--card {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.075);
  border: 1px solid #e5e5e5;
}
.Module.Module--card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.Module.Module--cardCallOut {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.Module--card {
  border-radius: 5px;
  background: #fff;
}
.Module--card .Module-header {
  border-color: #f2f2f2;
  padding: 17px 13px 12px 13px;
  min-height: 16px;
}
.Module--card .Module-header--pri {
  background: #fff;
}
.Module--card .Module-title {
  font-size: 1.5rem;
  font-weight: bold;
}
.Module--card .Module-title .Module-titleSub {
  display: none;
}
@media only screen and (min-width: 1230px) {
  .Module--card .Module-title {
    font-size: 1.4rem;
  }
}
.Module--card .Module-titleLink {
  padding-bottom: 1px;
}
.Module--card .Module-titleSub {
  color: inherit;
  font-size: 1.4rem;
}
@media only screen and (min-width: 1230px) {
  .Module--card .Module-titleSub {
    font-size: 1.3rem;
  }
}
.Module--card .Module-headerTools {
  top: 14px !important;
  right: 12px;
}
.Module--card .Module-body {
  padding: 18px;
  /* greater than 1024 assume multi col layout */
  overflow: auto;
  padding: 12px;
}
@media (min-width: 1024px) {
  .Module--card .Module-body {
    height: 126px;
  }
}
.Module--card .Module-footer {
  border: none;
  min-height: 22px;
  padding: 10px 12px;
  overflow: hidden;
}
.Module--card .Module-footerLink {
  position: relative;
  top: 1px;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.3rem;
  text-decoration: none;
}

.Module--cardDashboard {
  min-height: 217px;
}
.Module--cardDashboard .Module-body {
  /* greater than 1024 assume multi col layout */
}
@media (min-width: 1024px) {
  .Module--cardDashboard .Module-body {
    height: 126px;
  }
}

.Module--blankSlateCard {
  border: 2px dashed #ddd !important;
  box-shadow: none !important;
  color: #59626b;
  line-height: 1.5;
}
.Module--blankSlateCard div {
  color: #427dc4;
}
.Module--blankSlateCard:hover {
  border: 2px dashed #bbb !important;
}

/* RAG Status indicator */
.Module-status,
.StatusBar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: transparent;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.StatusBar--default {
  background: #758891;
}

.stackCardListsWrap.is-minimal .Module-titleSub {
  display: inline;
}

.Module-footerAlertsCompact .Module-footerAlertsItem {
  display: none;
}

.Module-footerAlertsCompact {
  /* show on maximised cards */
}
.Module-footerAlertsCompact .Module-footerAlertsItem--showMaximised {
  display: inline-block;
}

.Module-footerAlerts .sample {
  display: none;
}

.stackCardListsWrap.is-minimal .Module--cardDashboard {
  min-height: auto !important;
  height: auto !important;
}
.stackCardListsWrap.is-minimal .Module-body {
  display: none;
}
.stackCardListsWrap.is-minimal .Module-footer {
  border: none;
}
.stackCardListsWrap.is-minimal .Module-title {
  font-size: 1.4rem;
}
.stackCardListsWrap.is-minimal .Module-footerLink {
  font-size: 1.1rem;
}
.stackCardListsWrap.is-minimal .Module-footerAlertsCompact .Module-footerAlertsItem {
  display: inline-block;
}
.stackCardListsWrap.is-minimal .Module-cardScore {
  display: none;
}
.stackCardListsWrap.is-minimal .Module-footerSpinner {
  display: block;
}
.stackCardListsWrap.is-minimal .Module--blankSlateCard {
  display: none;
}
.stackCardListsWrap.is-minimal .Module--cardTip {
  display: none;
}
.stackCardListsWrap.is-minimal .Module-footerAlerts .sample {
  display: inline-block;
}

.Module--cardTip {
  background: #FFFCF7 !important;
  /* greater than 1024 assume multi col layout */
  border: 1px solid #E2D3AC !important;
  background: #FFFCF7;
}
@media (min-width: 1024px) {
  .Module--cardTip {
    overflow: hidden;
    height: 217px;
  }
}
.Module--cardTip .Module-header {
  min-height: 16px;
  padding: 18px 13px 13px 13px;
  background: #FFFCF7;
  border-bottom: 1px solid #f7f2e6;
}
.Module--cardTip .Module-body {
  background: #FFFCF7;
}

/* ==========================================================================
   CARD MODULE CONTENT ELEMENTS
   ========================================================================== */
/**
 * Module Vars
 */
.CardArticle {
  padding: 12px;
}
.CardArticle .CardArticle-icon {
  margin-right: 10px;
}
.CardArticle .CardArticle-title {
  color: #000;
  font-size: 13px;
  font-weight: 500;
}
.CardArticle .CardArticle-content {
  padding: 3px 0 0 30px;
}

/**
 * CONTENT
 */
.Card-content {
  line-height: 1;
  font-size: 13px;
  margin-bottom: 8px;
}
.Card-content .Card-contentTitle {
  color: #6a737d;
  font-weight: 400 !important;
  font-size: 13px;
}
.Card-content .Card-contentInfo {
  color: #32383f;
}

/*
  Card list
  Display git repo info, status, issues, failover groups etc
  on the stack card
*/
.Card-list {
  margin: 4px 0 0 0 !important;
}
.Card-list li {
  font-size: 12px;
  line-height: 1.2;
  padding-top: 2px;
  padding-bottom: 2px;
}
.Card-list .Module--cardInfo {
  color: #32383f;
}
.Card-list .Module--cardIcon {
  font-size: 11px;
  margin-right: 3px;
}

.Module-cardSubnav {
  font-size: 1.2rem;
}

/*
 *  CARD TIPS LIST
 * --------------------------------------------------------------------------------- */
.List--tips li {
  line-height: 1.8;
  font-size: 1.3rem;
}

.List--tipsCard {
  margin-top: -6px;
}

.tips-p {
  margin-top: 0.5em;
  font-size: 1.3rem;
}
.tips-p .tips-strong {
  color: #000;
}

/*
 *  CARD STATUS (RED, AMBER, GREEN)
 * --------------------------------------------------------------------------------- */
.stack-is-red .Module-status {
  background: rgb(203, 36, 49);
}
.stack-is-red .Module-title a {
  color: rgb(203, 36, 49) !important;
  border-bottom: 1px solid #FFCCCC;
  transition: border-color 0.3s ease 0s;
}
.stack-is-red .Module-title a:hover {
  border-bottom: 1px solid rgb(203, 36, 49);
  color: rgb(203, 36, 49) !important;
}
.stack-is-red .StackInfo-logo.maestro rect, .stack-is-red .StackInfo-logo.maestro path,
.stack-is-red .Card-logo.maestro rect,
.stack-is-red .Card-logo.maestro path,
.stack-is-red .Table-cellLogo.maestro rect,
.stack-is-red .Table-cellLogo.maestro path {
  fill: rgb(203, 36, 49);
}
.stack-is-red .StackInfo-logo.skycap .layer,
.stack-is-red .Card-logo.sykcap .layer {
  stroke: rgb(203, 36, 49);
}
.stack-is-red .ruby_logo {
  stroke: rgb(203, 36, 49);
}
.stack-is-red .node_logo_square {
  fill: rgb(203, 36, 49);
}
.stack-is-red .docker_logo {
  fill: rgb(203, 36, 49);
}
.stack-is-red .Card-logo.prepress rect, .stack-is-red .Card-logo.prepress path {
  fill: rgb(203, 36, 49);
}

.stack-is-amber .Module-status {
  background: #EA8407;
}
.stack-is-amber .Module-title a {
  color: #EA8407 !important;
  border-bottom: 1px solid #F7DDBE;
  transition: border-color 0.3s ease 0s;
}
.stack-is-amber .Module-title a:hover {
  border-bottom: 1px solid #EA8407;
  color: #EA8407 !important;
}
.stack-is-amber .status-red.cta {
  font-weight: normal !important;
}
.stack-is-amber .StackInfo-logo rect, .stack-is-amber .StackInfo-logo path,
.stack-is-amber .Card-logo.maestro rect,
.stack-is-amber .Card-logo.maestro path {
  fill: #EA8407;
}
.stack-is-amber .StackInfo-logo .layer,
.stack-is-amber .Card-logo.sykcap .layer {
  stroke: #EA8407;
}
.stack-is-amber .ruby_logo {
  stroke: #EA8407;
}
.stack-is-amber .node_logo_square {
  fill: #EA8407;
}
.stack-is-amber .docker_logo {
  fill: #EA8407;
}

.stack-is .Module-status {
  background: #546168;
}
.stack-is .Module-title a {
  color: #546168;
  border-bottom: 1px solid #b3cbd3;
  transition: border-color 0.3s ease 0s;
}
.stack-is .Module-title a:hover {
  border-color: #546168;
}
.stack-is .Card-logo.maestro rect, .stack-is .Card-logo.maestro path {
  fill: #546168;
}
.stack-is .Card-logo.sykcap .layer {
  stroke: #546168;
}
.stack-is .ruby_logo {
  stroke: #546168;
}
.stack-is .node_logo_square {
  fill: #546168;
}
.stack-is .docker_logo {
  fill: #546168;
}

.stack-is-green .Module-status {
  background: rgb(40, 167, 69);
}
.stack-is-green .Module-title a {
  color: rgb(40, 167, 69) !important;
  border-bottom: 1px solid #b8ea9a;
  transition: border-color 0.3s ease 0s;
}
.stack-is-green .Module-title a:hover {
  border-bottom: 1px solid rgb(40, 167, 69);
  color: rgb(40, 167, 69) !important;
}
.stack-is-green .Card-logo.maestro rect, .stack-is-green .Card-logo.maestro path {
  fill: rgb(40, 167, 69);
}
.stack-is-green .Card-logo.sykcap .layer {
  stroke: rgb(40, 167, 69);
}
.stack-is-green .ruby_logo {
  stroke: rgb(40, 167, 69);
}
.stack-is-green .node_logo_square {
  fill: rgb(40, 167, 69);
}
.stack-is-green .docker_logo {
  fill: rgb(40, 167, 69);
}

.Card-logo {
  position: relative;
  left: -1px;
  top: -1px;
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

.Card-heading {
  color: #32383f !important;
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1;
  margin-bottom: 6px;
}

.Card-heading--strong {
  font-weight: 550;
}

.js_card_is_disabled .Module-body {
  overflow: hidden;
}

/*
 *  CARD WITH MESSAGE
 *  E.g. Product trial expired or stack blocked
 * --------------------------------------------------------------------------------- */
.CardMessage {
  padding-top: 12px;
}
.CardMessage .CardMessage-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.CardMessage .CardMessage-text {
  padding-bottom: 8px;
}
/*
 *  FORMATIONS CARDS
 *  The mini carrds used at the top of the Skycap overview page
 * --------------------------------------------------------------------------------- */
.Module--formationCard {
  min-height: 40px !important;
}
.Module--formationCard .Module-title {
  font-weight: 600;
  font-size: 13px;
}
.Module--formationCard .Module-body {
  height: 74px;
}

.Module--formationCard.is-deleting .Module-body,
.Module--formationCard.is-busy .Module-body {
  height: 117px;
}

.is-forked-card .Module-title {
  font-weight: 500;
  font-size: 12px;
}

.Module--formationCardBlankSlate {
  height: 166px;
}

.Module--formationCardBlankSlate--first .Module-body {
  transition: all 0.25s ease-in-out;
  background: #fffcf7;
}
.Module--formationCardBlankSlate--first .Module-body:hover {
  background: #fff9ef;
}
.Module--formationCardBlankSlate--first .u-textXmuted {
  color: #59626b !important;
}

.Module--formationCardBlankSlate--first.u-dottedBorder {
  border-color: #ddcfaa;
}
.Module--formationCardBlankSlate--first.u-dottedBorder:hover {
  border-color: #cebf9a;
}

/* ==========================================================================
   NAVIGATION LISTS
   ========================================================================== */
/**
 * Base navigation list block
 */
.Nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.Nav a {
  text-decoration: none;
}

/**
 * Modifier: Sidebar navigation
 */
/* Enclosed sidebar sections e.g. Account Settings left hand sidebar nav */
.Nav--sidebar {
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 24px;
  background-color: #fff;
}
.Nav--sidebar > .Nav-item:last-child {
  border-bottom: none;
  padding-bottom: 6px;
}
.Nav--sidebar > .Nav-item:only-child {
  padding-bottom: 0;
}
.Nav--sidebar .Nav-item--borderNone {
  border: none !important;
}
.Nav--sidebar .Nav-item--titleShaded {
  background: #FAFBFC;
}
.Nav--sidebar .Nav-item--title {
  border-bottom: 1px solid #eaeaea;
  padding: 12px 4px 12px 14px;
  font-weight: 600;
  font-size: 1.4rem;
  color: #24292e;
  line-height: 1;
}
.Nav--sidebar .Nav-item--title .Nav-ico {
  color: #000;
  font-size: 1.2rem !important;
}
.Nav--sidebar .Nav-item--title + .Nav-item {
  padding-top: 8px;
}
.Nav--sidebar .Nav-item:last-child {
  padding-bottom: 8px;
}
.Nav--sidebar .Nav-item--titleWithIcon {
  position: relative;
  padding-left: 34px !important;
}
.Nav--sidebar .Nav-item--titleIcon {
  position: absolute;
  top: 8px;
  left: 12px;
}
.Nav--sidebar .Nav-item--titleIcon path {
  fill: #546168;
}
.Nav--sidebar .Nav-link {
  position: relative;
  transition: background-color 0.15s ease-in;
  outline: 0;
  padding: 6px 4px 6px 40px;
  display: block;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  color: #4b535b;
}
.Nav--sidebar .Nav-link:hover {
  color: #333;
}
.Nav--sidebar .Nav-link:hover .Nav-ico {
  color: #000;
}
.Nav--sidebar .Nav-link:hover .Nav-ico path {
  fill: #000;
}
.Nav--sidebar .Nav-link--textOnly {
  padding-left: 13px;
}
.Nav--sidebar .Nav-item.is-disabled {
  opacity: 0.7;
}
.Nav--sidebar .Nav-item.is-disabled .Nav-link {
  color: #b2b2b2;
  cursor: default;
  pointer-events: none;
}
.Nav--sidebar .Nav-item.is-disabled .Nav-link:hover {
  background: #fff;
}
.Nav--sidebar .Nav-item.is-disabled .Nav-ico {
  color: #BABABA;
}
.Nav--sidebar .Nav-count {
  margin-right: 6px;
  color: #ADADAD;
  font-size: 10px;
}
.Nav--sidebar .Nav-link.is-active {
  color: #000000;
  font-weight: 500;
  background-color: #fff;
}
.Nav--sidebar .Nav-link.is-active .Nav-ico {
  color: #427dc4;
}
.Nav--sidebar .Nav-link.is-active .Nav-count {
  font-weight: normal;
  color: #666;
}
.Nav--sidebar .Nav-link.is-active .Nav-icoInlineSvg path {
  fill: #000;
  fill: #427dc4;
}
.Nav--sidebar .Nav-ico {
  font-size: 1.3rem !important;
  position: absolute;
  top: 8px;
  left: 14px;
}
.Nav--sidebar .Nav-icoSvg {
  width: 13px;
  top: 10px;
  left: 14px;
}
.Nav--sidebar .Nav-icoSvg path {
  fill: #4b535b;
}
.Nav--sidebar .Nav-icoInlineSvg {
  top: 9px;
  left: 12px;
}

.Nav-badge {
  top: -1px;
  margin-left: 3px;
  font-size: 10px;
}

/* styling for inline SVG's */
.Nav-ico--red path {
  fill: rgb(203, 36, 49) !important;
}

.Nav-ico--amber path {
  fill: #EA8407 !important;
}

/*
    input to filter a long navigation list e.g. stack navigation in racks sidebar
*/
.NavFilter {
  overflow: hidden;
  background: #fafafa;
  border-radius: 6px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding: 10px;
}
.NavFilter .NavFilter-header {
  padding: 2px 0 0 0;
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  margin-bottom: 5px;
}
.NavFilter .NavFilter-form {
  background: #fcfcfc;
  padding: 0;
  margin: 0 0 8px 0;
}
.NavFilter .NavFilter-list {
  padding: 0;
  margin: 0 !important;
}
.NavFilter .NavFilter-list .NavFilter-listItem {
  padding: 2px 0;
}
.NavFilter .NavFilter-list .NavFilter-listItem:last-child {
  padding-bottom: 0;
}
.NavFilter .NavFilter-link {
  display: block;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1;
}
.NavFilter .NavFilter-link:hover {
  text-decoration: none;
}
.NavFilter .NavFilter-msg {
  color: #999;
  font-size: 1.2rem;
  line-height: 2;
  margin-bottom: 0;
}

.NavFilter--divider {
  margin-top: 8px;
  padding-top: 20px;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid #eaeaea;
}

.dark-block, .Nav--sidebar.Nav--dark .Nav-item--title, .NavFilter--dark .NavFilter-header {
  background: #4d6377;
  color: #fff;
  text-shadow: none;
  border-bottom: 1px solid #4b5f72;
}

.Nav--sidebar.Nav--dark {
  border-color: #4d6377;
}
.Nav--sidebar.Nav--dark .Nav-item--title {
  position: relative;
}
.Nav--sidebar.Nav--dark .Nav-item {
  border-color: #e1e4e8;
}
.Nav--sidebar.Nav--dark .Nav-ico {
  color: #77868c;
}
.Nav--sidebar.Nav--dark .Nav-link {
  background: transparent;
  color: #51687c;
}
.Nav--sidebar.Nav--dark .Nav-link.is-active {
  color: #000 !important;
  font-weight: 600;
}
.Nav--sidebar.Nav--dark .Nav-link.is-active .Nav-ico {
  color: #427dc4 !important;
}
.Nav--sidebar.Nav--dark .Nav-link:hover .Nav-ico {
  color: #283340 !important;
}
.Nav--sidebar.Nav--dark .AsideNav-itemSecondary {
  padding-left: 12px;
}

@media (min-width: 1024px) and (max-width: 1220px) {
  .Nav-link {
    font-size: 1.1rem;
  }
}
/**
 * Modifier: Inline nav
 * Navigation list e.g. global header and footer nav inline lists
 */
.Nav--inline {
  display: inline-block;
}
.Nav--inline > .Nav-link,
.Nav--inline > .status-link {
  display: inline-block;
  line-height: 1;
  padding: 0 0.8em;
  font-size: 1.4rem;
}

.Nav--footer > .Nav-link,
.Nav--footer > .status-link {
  font-size: 13px;
}
@media (max-width: 620px) {
  .Nav--footer > .Nav-link,
  .Nav--footer > .status-link {
    display: none;
    padding: 2px 0;
    margin: 16px 0;
    border: none !important;
  }
  .Nav--footer > .Nav-link .HW_badge_cont,
  .Nav--footer > .Nav-link #HW_badge_cont,
  .Nav--footer > .status-link .HW_badge_cont,
  .Nav--footer > .status-link #HW_badge_cont {
    display: none !important;
  }
}

.Nav--withSeparator > .Nav-link,
.Nav--withSeparator > .status-link {
  border-right: 1px solid #d1d1d1;
}
.Nav--withSeparator :first-child {
  padding-left: 0;
}
.Nav--withSeparator .Nav-link:only-child,
.Nav--withSeparator .Nav-link:last-child {
  border-right: none;
  padding-right: 0;
}
.Nav--withSeparator .Nav-link--noBorder {
  border: none;
}
.Nav--withSeparator .Nav-link--withLeftBorder,
.Nav--withSeparator .status-link {
  border-left: 1px solid #d1d1d1;
}

/**
 * GlobalNav
 * Responsive breakpoints - hide extra nav options on mobile
 */
/* Global Nav Left */
.GlobalNavPrimary .Nav-link {
  color: #4b535b;
  padding: 0 6px;
}
.GlobalNavPrimary .Nav-link:hover {
  color: #427dc4;
}
.GlobalNavPrimary .Nav-link:first-child {
  padding-left: 0;
}
.GlobalNavPrimary .Nav-link:last-child {
  padding-right: 0;
}
@media (max-width: 620px) {
  .GlobalNavPrimary .Nav-link {
    font-size: 1.4rem;
    font-weight: normal;
  }
}
.GlobalNavPrimary .Nav-link.is-active {
  color: #000000;
  font-weight: 500;
}

/* Global Nav Right */
.GlobalNavSecondary .Nav-link {
  color: #586069;
}
.GlobalNavSecondary .Nav-link:hover {
  color: #427dc4;
}
.GlobalNavSecondary .Nav-link.is-active {
  color: #2f373f;
  font-weight: 500;
}
@media (max-width: 620px) {
  .GlobalNavSecondary .status-link {
    border-right: none !important;
  }
}

.AdminPanel {
  z-index: 1000;
  position: absolute;
  margin-top: -14px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  width: 780px;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.13);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.AdminPanel .AdminPanel-body {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.9);
  color: rgba(0, 0, 0, 0.6);
  font-size: 11px;
}
.AdminPanel .AdminPanel-body b {
  color: rgb(0, 0, 0);
  font-weight: normal;
}
.AdminPanel .AdminPanel-body h6 {
  font-weight: 500;
  font-size: 11px;
  color: #000;
  letter-spacing: 1px;
}
.AdminPanel .AdminPanel-header {
  padding: 3px 8px;
  background: rgba(201, 0, 15, 0.8);
  color: #ffdbdd;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-size: 12px;
}
.AdminPanel .AdminPanel-header strong {
  font-weight: bold;
  color: #fff;
}
.AdminPanel .AdminPanel-header a {
  color: #fff;
  font-weight: bolder;
}
.AdminPanel .AdminPanel-header #js_show_admin_btn {
  margin-top: 1px;
  margin-left: 1.2em;
}

/*
    .AdminPanel--developers Modifier
    Extends the Admin panel top component to show information in the dev only.
    Different color coding and positioning off screen so that it's less obtrusive.
 */
.AdminPanel--developers {
  box-shadow: none;
  transition: margin-top 0.2s linear;
  margin-top: -32px;
}
.AdminPanel--developers:hover {
  margin-top: -14px;
}
.AdminPanel--developers .AdminPanel-header {
  background: rgba(0, 177, 201, 0.8);
  color: #dbf5ff;
}

/**
 * Modifier: Top breadcrumb navigation styles
 */
.Breadcrumb {
  font-size: 15px;
  font-weight: normal;
  color: #444;
  line-height: 1.4;
  /* environment text color */
}
@media (max-width: 620px) {
  .Breadcrumb {
    font-size: 12px;
  }
  .Breadcrumb #logo {
    width: 30px;
    height: 35px;
  }
  .Breadcrumb #logo img {
    width: 28px;
    height: 28px;
  }
}
.Breadcrumb a .Nav-divider {
  color: #4b535b;
  font-weight: normal;
}
.Breadcrumb a:hover {
  text-decoration: none;
}
.Breadcrumb .Nav-divider {
  padding-right: 2px;
  padding-left: 2px;
  color: #A0A0A0;
}
.Breadcrumb .lighter {
  margin-left: 0.15em;
  color: #999;
}
.Breadcrumb .is-active {
  color: #000000;
  font-weight: 500 !important;
}

body.getting-started .Breadcrumb .is-active {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .Breadcrumb-applications {
    display: none;
  }
}

.t-dark .is-active {
  color: #303E4D;
}

.BreadcrumbSec {
  position: relative;
  z-index: 1;
  margin-top: -10px;
  padding-bottom: 20px;
  padding-left: 2px;
  font-size: 13px;
  font-weight: 400;
}
.BreadcrumbSec .BreadcrumbSec-divider {
  display: inline-block;
  padding-right: 1px;
  padding-left: 1px;
  color: #A0A0A0;
}
.BreadcrumbSec a {
  text-decoration: none;
}
.BreadcrumbSec strong {
  font-weight: 500;
}

.BreadcrumbSec + .u-textModuleLead {
  margin-top: 0;
}

.BreadcrumbSec.BreadcrumbSec--noPadding {
  padding-bottom: 6px;
}

.BreadcrumbSec.BreadcrumbSec--flushTop {
  margin-top: 0;
}

.BackLink {
  padding-bottom: 20px;
  padding-left: 2px;
  font-size: 13px;
}

/**
 * NavBar
 */
/*
    <ul class="List NavBar">
        <li class="NavBar-item">
            <a class="NavBar-link">
                Pull from Git
            </a>
        </li>
        <li class="NavBar-item">
            <a class="NavBar-link">
                Build from image
            </a>
        </li>
    </ul>
*/
.NavBar {
  overflow: hidden;
  display: inline-block;
  margin: 0.5em 0 0 0;
  border-bottom: 1px solid #0A92D6;
}

.NavBar-item {
  float: left;
}

.NavBar-link {
  display: inline-block;
  padding: 0.6em 1.15em;
  font-size: 1.3rem;
  font-weight: normal;
  cursor: pointer;
}

.is-selected .NavBar-link {
  color: #fff !important;
  background: #0A92D6;
  border-radius: 1px 1px 0 0;
  font-weight: 500;
}

.NavBar-link:hover {
  color: #0A92D6;
}

.NavBar-link:hover {
  text-decoration: none;
}

/**
 * Ungrouped sidebar links
 * Usecase: Dashboard failover group link
 */
.SideLink {
  padding: 0 0.25em;
  margin-top: 4px;
}

.SideLink-ico {
  position: relative;
  top: 1px;
  margin: 0 1px 0 0;
  font-size: 1.3rem;
  color: #9B9B9B;
}

.SideLink-item {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 500;
}

/**
 * Tabstrip
 * Usecase e.g: live logs column switch between server and services list
 *
 * component example

    <div class="js_tabs_container">
        <ul class="TabStrip grid    js_tabs">
            <li class="grid__item one-half TabStrip-item">
                <a class="TabStrip-link js_tabs_link" href="#servers">Servers</a>
            </li><!--
         --><li class="grid__item one-half TabStrip-item">
                <a class="TabStrip-link js_tabs_link" href="#services">Services</a>
            </li>
        </ul>

        <div class="js_tab_content" id="servers">
        </div>
        <div class="js_tab_content is-hidden" id="services">
        </div>
    </div>

 */
.TabStrip {
  overflow: hidden;
  list-style: none;
  margin: 0 0 1.4em 0;
  padding: 0 !important;
  font-size: 0;
  /* avoid need for comments in html white space */
}

.TabStrip-item {
  display: inline-block;
  list-style: none;
  line-height: 1;
  padding: 0;
}

.TabStrip-link {
  background: #fff;
  box-sizing: border-box;
  display: block;
  line-height: 2.55;
  border: 1px solid #427dc4;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
.TabStrip-link:hover {
  text-decoration: none;
  color: #427dc4;
}

.TabStrip-link + .TabStrip-link {
  margin-left: -1px;
}

.TabStrip-item:last-child .TabStrip-link {
  border-left: none;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.TabStrip-item:first-child .TabStrip-link {
  border-right: none;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.TabStrip--medium .TabStrip-link {
  font-size: 1.7rem;
  font-weight: bold;
}

.TabStrip--large .TabStrip-link {
  border-width: 2px;
}
.TabStrip--large .TabStrip-link {
  border-right: 2px solid #427dc4;
  font-size: 2rem;
  font-weight: 500;
}

/* TabStrip states */
.TabStrip-link.is-active {
  outline: none !important;
  background: #427dc4;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.DashboardNav {
  padding-top: 68px;
}

.u-posAbsolute {
  position: absolute !important;
}

/**
 * Pins to all corners by default. But when a width and/or height are
 * provided, the element will be centered in its nearest relatively-positioned
 * ancestor.
 */
.u-posAbsoluteCenter {
  bottom: 0 !important;
  left: 0 !important;
  margin: auto !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

/**
 * 1. Make sure fixed elements are promoted into a new layer, for performance
 *    reasons.
 */
.u-posFixed {
  position: fixed !important;
  backface-visibility: hidden; /* 1 */
}

.u-posRelative {
  position: relative !important;
}

.u-posStatic {
  position: static !important;
}

/* ==========================================================================
   SPINNER
   ========================================================================== */
/*


/**
 * Spinner-container
 */
/*  */
/*
   <div class="Spinner-container js_spinner_container Spinner">
     Loading...
   </div>

   $('.js_spinner_container').addClass('Spinner');
*/
.Spinner-container {
  overflow: hidden;
  display: inline-block;
  text-indent: -9999em;
}

/**
 *  Spinner
 */
.Spinner {
  display: inline-block;
  overflow: hidden;
  position: relative;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  border-right: 2px solid rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-left: 2px solid #0088cc;
  -webkit-animation: rotater 1.1s infinite linear;
  animation: rotater 1.1s infinite linear;
}

.Spinner.Spinner--dark {
  border-top: 2px solid rgba(255, 255, 255, 0.9);
  border-right: 2px solid rgba(255, 255, 255, 0.9);
  border-bottom: 2px solid rgba(255, 255, 255, 0.9);
  border-left: 2px solid #2D3748;
}

.Spinner--btn {
  border-color: rgba(0, 0, 0, 0.2);
  border-color: #ffffff;
  border-left: 2px solid transparent;
}

.Spinner--global {
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 50%;
  margin-left: -20px;
}

/**
 *  Spinner - Default 16 * 16px
 */
.Spinner,
.Spinner:after {
  border-radius: 50%;
  width: 16px;
  height: 16px;
}

.Spinner--btn,
.Spinner--btn:after {
  display: inline-block;
  width: 11px !important;
  height: 11px !important;
}

.Spinner--tableRow {
  top: 3px;
}

.Spinner--withMessage {
  margin-right: 9px;
}

.Spinner--8 {
  width: 8px;
  height: 8px;
}

.Spinner.Spinner--8 {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid #0088cc;
}

.Spinner.Spinner--dark.Spinner--8 {
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid #2D3748;
}

.Spinner--10 {
  width: 10px;
  height: 10px;
}

.Spinner--11 {
  width: 11px;
  height: 11px;
}

.Spinner--12 {
  width: 12px;
  height: 12px;
}

.Spinner--14 {
  width: 14px;
  height: 14px;
}

.Spinner--16 {
  width: 16px;
  height: 16px;
}

.Spinner--18 {
  width: 18px;
  height: 18px;
}

.Spinner--20 {
  width: 20px;
  height: 20px;
}

.Spinner--25 {
  width: 25px;
  height: 25px;
}

.Spinner--32 {
  width: 32px;
  height: 32px;
}

.Spinner.Spinner--32 {
  border-top: 4px solid rgba(0, 0, 0, 0.1);
  border-right: 4px solid rgba(0, 0, 0, 0.1);
  border-bottom: 4px solid rgba(0, 0, 0, 0.1);
  border-left: 4px solid #0088cc;
}

.Spinner--46 {
  width: 46px;
  height: 46px;
}

.Spinner.Spinner--46 {
  border-top: 5px solid rgba(0, 0, 0, 0.1);
  border-right: 5px solid rgba(0, 0, 0, 0.1);
  border-bottom: 5px solid rgba(0, 0, 0, 0.1);
  border-left: 5px solid #0088cc;
}

.Spinner--64 {
  width: 64px;
  height: 64px;
}

.Spinner.Spinner--64 {
  border-top: 5px solid rgba(0, 0, 0, 0.1);
  border-right: 5px solid rgba(0, 0, 0, 0.1);
  border-bottom: 5px solid rgba(0, 0, 0, 0.1);
  border-left: 5px solid #0088cc;
}

.SpinnerLabel {
  position: relative;
  margin-left: 3px;
}

/**
 *  Container for spinner & loading message on an empty page
 */
.Loader {
  text-align: center;
  padding: 2em 0;
}

.Loader-msg {
  padding-top: 1em;
  font-size: 1.6rem;
  color: #a0a0a0;
  font-weight: normal;
  line-height: 1.5;
}

/*
 * LABELS
 */
.SpinnerLabel {
  display: inline-block;
  vertical-align: middle;
  padding-left: 2px;
  font-weight: normal;
  font-size: 13px;
}

.Module-header--spinner {
  position: relative;
  margin-left: 5px;
  top: 2px;
}

/**
 * Animation to rotate spinner
 */
@-webkit-keyframes rotater {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-backface-visibility: hidden;
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotater {
  0% {
    -webkit-transform: rotate(0deg);
    -webkit-backface-visibility: hidden;
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -webkit-backface-visibility: hidden;
    transform: rotate(360deg);
  }
}
.Spinner--cardItem {
  position: relative;
  top: 1px;
  margin-right: 4px;
}

/* Absolute Center Spinner */
/* ==========================================================================
   TABLE BASE CLASS
   ========================================================================== */
/*

    References for BEM & SUIT SYNTAX & CSS ARCHITECTURE
    ----------------------------------------------------

    https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md
    http://www.integralist.co.uk/posts/maintainable-css-with-bem/
    http://cssguidelin.es/

    Markup Example
    --------------
    <table class="Table Table--module Table--striped">
        <colgroup>
        </colgroup>
        <tbody class="Table-body">
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

    <table class="Table Table--module Table--striped Table--keyVal">
        <colgroup>
            <col class="Table-keyCol">
            <col>
        </colgroup>
        <tbody class="Table-body">
            <tr>
                <td class="Table-key">
                </td>
                <td class="Table-val">
                </td>
            </tr>
        </tbody>
    </table>

    MODIFIERS
    ---------

    .Table--stripe {}     E.g. a striped
*/
/*
    Responsive Tables
    Allow table to scroll along x-axis instead of squishing it on mobiles
    Wrap in a div with the following class
*/
@media (max-width: 620px) {
  /* can't use if there is a dropdown in table */
  .TableWrap,
  .u-overflowTable {
    max-width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
  }
}
.Table {
  table-layout: fixed;
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}
.Table tr {
  background: #fff;
}
.Table td {
  padding: 14px;
  font-size: 1.4rem;
  word-wrap: break-word;
  color: #666;
}

.Table--compactCell td {
  padding: 10px 11px;
}

.Table-caption {
  vertical-align: middle;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 13px;
  padding-right: 13px;
  font-weight: 500;
  font-size: 14px;
  border-bottom: 1px solid #efefef;
  text-align: left;
}

.Table-caption--divider {
  border-top: 1px solid #efefef;
}

.Table-caption--Header {
  border-top: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  background: #FcFcFc;
  font-weight: bold;
}

.ModuleMultiTables table:first-child .Table-caption--Header {
  border-top: none;
}

/**
 * TABLE MODIFIERS
 * ****************************************************************
 */
/**
 * Table--striped
 */
.Table--compressed td {
  padding: 9px 13px;
}

.Table--vertCompressed td {
  padding: 5px 12px;
}

.Table--striped tr:nth-child(even) {
  background: #FAFBFC;
}
.Table--striped tr:nth-child(odd) {
  background: #fff;
}
.Table--striped .Table-body tr:hover td,
.Table--striped .Table-body tr:hover th {
  background: #FFFBF2;
  color: #333;
}

.Table--stripedAlt tr:nth-child(odd) {
  background: #FAFBFC;
}
.Table--stripedAlt tr:nth-child(even) {
  background: #fff;
}
.Table--stripedAlt .Table-body tr:hover td,
.Table--stripedAlt .Table-body tr:hover th {
  background: #FFFBF2;
  color: #333;
}

table.Table--stripedAlt.is-filtered tr:nth-child(odd),
table.Table--stripedAlt.is-filtered tr:nth-child(even) {
  background: #fff;
}

.Table--rowHover .Table-body tr:hover td,
.Table--rowHover .Table-body tr:hover th {
  background: #FFFBF2;
  color: #333;
}

.Table--padded td {
  height: 30px;
  vertical-align: middle !important;
}

.Table--fat td {
  height: 60px;
  vertical-align: middle !important;
}

.Table--vatop td,
.Table--vatop th {
  vertical-align: top;
}

.Table--vaMiddle td,
.Table--vaMiddle th {
  vertical-align: middle !important;
}

.Table-cellVaMiddle {
  vertical-align: middle !important;
}

.Table-cellTile {
  padding-left: 5px !important;
  font-weight: 500;
}

.Table-cellIcon {
  padding: 0 0 0 9px !important;
}

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

.Table-RowIcon {
  margin-right: 3px;
}

.Table--divider tr:last-child td,
.Table--divider tr:last-child th {
  border-bottom: 1px solid #ddd;
}

.Table-noRowShade td,
.Table-noRowShade th {
  background: #fff;
}

.Table-cellList p:last-child,
.Table-cellList ul:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.Table--dotted tr td {
  border-bottom: 1px dotted #e0e0e0;
}
.Table--dotted tr:last-child td {
  border-bottom: none;
}

.Table--borderTop {
  border-top: 1px solid #eee;
}

.Table .Table-CellPadded {
  padding: 2.2em 1.2em;
}

/**
 * Table--module
 */
.Table--module {
  width: 100%;
  /*
      Tables within module containers e.g. stacks server groups etc.
      A border collapse and transparent border used here to stop clipping
      of the rounded corners by the parent module.
      NOTE: 'Overflow: hidden' on parent cannot be used as dropdowns, popovers etc must
      be allowed to overflow the parent element.
   */
  border: 1px solid transparent;
  border-collapse: separate;
  border-radius: 3px;
}

.Table-header {
  background: #FAFBFC;
  color: #000;
  padding-top: 8px;
}
.Table-header th {
  background: #FAFBFC;
  padding: 10px 12px;
  font-size: 1.2rem;
  text-align: left;
  border-bottom: 1px solid #efefef !important;
  text-shadow: 0 1px 0 #fff;
  font-weight: 500;
  color: #000;
}

.Table-header--transparent {
  background: transparent;
}
.Table-header--transparent th {
  background: transparent;
}

.Table-header--enclosed {
  background: #fff;
}
.Table-header--enclosed th {
  background: #fff;
  font-weight: 500;
  color: #4a4a4a;
}

.Table-header--enclosedShaded th {
  background: #FCFCFC;
}

.Table-header--noBorder th {
  border-bottom: none !important;
  background: transparent !important;
}

.Table-header--muted {
  border-bottom: 1px solid #efefef;
}
.Table-header--muted th {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  background: #fff;
  font-weight: normal;
  font-size: 10px;
  color: rgba(88, 97, 105, 0.7);
}

.InnerCell {
  padding-right: 1px;
  padding-left: 1px;
}
.InnerCell .InnerCell-title {
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 10px;
  color: rgba(88, 97, 105, 0.7);
}
.InnerCell .InnerCell-icon {
  padding-left: 2px;
  padding-right: 2px;
}

.InnerCell--paddedRight {
  padding-right: 8px;
}

.Table-body td,
.Table-body th {
  border-top: 1px solid #efefef;
}

.Table-body tr:first-child td,
.Table-body tr:only-child td {
  border-top: none;
}

.Table-body--isDivider tr:first-child td,
.Table-body--isDivider tr:only-child td {
  border-top: 1px solid #efefef;
}

.Table-body--isDividerBottom tr:last-child td,
.Table-body--isDividerBottom tr:only-child td {
  border-bottom: 1px solid #efefef;
}

.Table-body--noRowStripe tr td {
  background: #fff !important;
}
.Table-body--noRowStripe tr:hover td {
  background: #FFFBF2 !important;
  color: #333 !important;
}

tr.is-collapsed + tr td {
  border-top: none;
}

.Table--rowSelect {
  border: 1px solid transparent;
  border-collapse: separate;
  border-radius: 3px;
}
.Table--rowSelect .row-select-box {
  visibility: hidden;
}
.Table--rowSelect tr:hover .row-select-box {
  visibility: visible;
}
.Table--rowSelect .DropdownGroup {
  visibility: hidden;
}

.Table--rowSelect.multi-select_active .row-select-box {
  visibility: visible !important;
}
.Table--rowSelect.multi-select_active .Table-header {
  display: table-row-group;
}
.Table--rowSelect.multi-select_active .DropdownGroup {
  visibility: visible;
}

/**
 * Table--keyVal
 *
 */
.Table--keyVal td {
  vertical-align: top;
}
.Table--keyVal .Table-key {
  font-weight: 400;
  vertical-align: middle;
  color: #252c33;
}
@media (max-width: 620px) {
  .Table--keyVal .Table-key {
    font-weight: 400;
    font-size: 13px;
  }
}
.Table--keyVal .Table-val {
  font-weight: normal;
  position: relative;
  color: #4e5860;
  word-wrap: break-word;
}
.Table--keyVal .Table-val code,
.Table--keyVal .Table-val kbd {
  color: #4e5860;
}
@media (max-width: 620px) {
  .Table--keyVal .Table-val {
    font-size: 13px;
  }
}
@media (max-width: 620px) {
  .Table--keyVal .Table-val .Form-label {
    font-size: 13px;
  }
}
.Table--keyVal .Table-valRow {
  padding: 0.25em 0;
}

/**
 * Table--modal
 * Full width tables within modal
 */
.Table--modal {
  margin-bottom: 0.25em;
}
.Table--modal td {
  padding: 10px 16px;
  font-size: 1.15rem;
}

/**
 * Table--modal Form
 * Table containing checkboxes, compact for usage
 * within modal. eg. custom service deploy
 */
.Table--modalForm {
  width: 100%;
  font-size: 13px;
}
.Table--modalForm td,
.Table--modalForm th {
  font-weight: 500;
}
.Table--modalForm .Table--modalForm-leftPad {
  padding-left: 8px !important;
}
.Table--modalForm .Table-header th {
  padding: 2px 4px 6px 4px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #f2f2f2 !important;
  font-weight: 500;
  font-size: 1.3rem;
  color: #000;
}
.Table--modalForm .Table-body tr:nth-child(odd) {
  background: #FCFCFC;
}
.Table--modalForm .Table-body th,
.Table--modalForm .Table-body td {
  padding: 2px 4px;
  border-top: 1px solid #efefef;
}
.Table--modalForm .Table-body th {
  font-weight: normal;
  color: rgba(0, 0, 0, 0.75);
}
.Table--modalForm .Table-body tr:hover td,
.Table--modalForm .Table-body tr:hover th {
  background: #FFFAEF;
  color: #000;
}

.Table--noRowBorders tr,
.Table--noRowBorders td,
.Table--noRowBorders th,
.Table--noRowBorders .Table-header th {
  border: none !important;
}
.Table--noRowBorders tr:nth-child(odd) {
  background: #F6F8FA !important;
}

.Table--compact .Table-header th {
  padding: 8px 0;
}
.Table--compact .Table-body th,
.Table--compact .Table-body td {
  padding: 1px;
}
.Table--compact .Table-body tr:first-child td,
.Table--compact .Table-body tr:first-child th {
  padding: 1px;
}

.Table--moduleCompact {
  margin-top: 8px;
  margin-bottom: 8px;
}
.Table--moduleCompact .Table-body th,
.Table--moduleCompact .Table-body td {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 14px;
  padding-right: 14px;
  border: none;
}
.Table--moduleCompact .Table-body tr:only-child td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.Table--moduleCompact .Table-body tr:last-child td:first-child {
  border-radius: 0 0 0 4px;
}

.Table--smallerText .Table-header th {
  font-size: 12px;
}
.Table--smallerText .Table-body th,
.Table--smallerText .Table-body td {
  font-size: 12px;
}

/**
 * Predifined table column widths
 *
 */
.Table-keyCol {
  width: 20%;
}
@media only screen and (max-width: 900px) {
  .Table-keyCol {
    width: 30%;
  }
}

.Table-valCol {
  width: 80%;
}
@media only screen and (max-width: 900px) {
  .Table-valCol {
    width: 70%;
  }
}

.Table-keyColWide {
  width: 245px;
}

.Table-keyColXtraWide {
  width: 400px;
}

.Table-ColHalf {
  width: 50%;
}

/**
 *  Table-formContainer
 *  Table that contains form elements: e.g. environment variables
 */
.Table--formContainer {
  width: 100%;
}
.Table--formContainer td,
.Table--formContainer th {
  vertical-align: top;
}
.Table--formContainer td input,
.Table--formContainer td select {
  margin: 0;
}

.Table-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 12px 0;
  color: #000;
}

.Table--callout td,
.Table--callout th {
  background: #FCF7EA;
}
.Table--callout span.field-error {
  display: block;
  top: 0;
  margin: 2px 0 0 0;
  padding: 0;
  line-height: 1;
}

.Table--drawerForm thead th {
  padding-bottom: 2px;
}
.Table--drawerForm td {
  padding: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: middle;
}

.Table--form {
  background: #fff;
}
.Table--form .form-fields-row td {
  padding: 16px 9px 0 9px !important;
}

/*
    Position sticky table headers
*/
.Table--stickyHeaderGeneric .Table-header th {
  position: sticky;
  top: 54px;
  /* adjust for page */
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #efefef !important;
  padding: 6px 12px !important;
}

.Table--stickyHeaderCheckBox .Table-header th {
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #efefef !important;
  padding: 6px 12px !important;
}

.Table--stickyHeaderCheckBox.multi-select_active th {
  position: sticky;
  top: 54px;
}

/**
 *  Table utility classes
 *  E.g. light blue row highlight in payments table
 */
.Table-rowHighlight td {
  font-weight: 500;
  color: #000;
  background: #F7F7F7;
  text-shadow: 0 1px 0 #fff;
  border-top: 1px solid #ddd;
}

.Table-activeRow td {
  background-color: #F3FFEF;
}
.Table-activeRow td .Table-activeItem {
  color: #339900;
}

.Table-highlightRow td {
  background-color: #FFF3DB;
  color: #000;
}
.Table-highlightRow td .hide {
  display: block;
}

.Table .Table-icoCell {
  text-align: right;
  padding-right: 1.4em;
  vertical-align: middle;
}

/**
 *  Table utility classes
 *
 */
.Table-subDivider td {
  padding-top: 1.2em !important;
}

.Table-cellHeading {
  color: #000;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 2px;
}

.Table-cellSubHeading {
  color: #000;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 2px;
}

.Table-cellMessage {
  font-size: 12px;
  margin: 0 0 2px 0;
}
.Table-cellMessage p {
  margin: 0 0 4px 0;
}
.Table-cellMessage ul {
  margin: 3px 0 6px 0;
}
.Table-cellMessage li {
  margin-left: 18px;
}

.Table-cellError {
  border-left: 4px solid #B52B2B;
}

.Table .Table-rowTitle,
.Table strong.Table-rowTitle {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #2f373f;
}
.Table .Table-rowTitle a,
.Table strong.Table-rowTitle a {
  color: #427dc4;
}

/**
* UI STATES
* ******************************************************
*/
.is-busy {
  pointer-events: none;
}
.is-busy tr td {
  opacity: 0.5;
  color: #999;
}

.row-hidden {
  display: none;
}

table.hidden-rows-are-shown .row-hidden {
  display: table-row;
}

/*
    Rows Marked for deletion with .is-marked-for-deletion class
    u-undeleteMsg class can be used to contain a restore action if we ever support undelete
    <td>
        <div class="u-undeleteMsg">
            <span class="u-undeleteTip js_tip" title="Permanently Deleted in 3:59">Deleting &hellip;</span>
            <span class="u-circleSeperator">·</span>
            <a class="u-undeleteLink js_tip js_restore_item" href="#" title="Restore this server">Restore</a>
        </div>
    </td>
 */
.is-marked-for-deletion .u-undeleteMsg {
  color: #000;
  font-weight: 500;
}
.is-marked-for-deletion .u-undeleteLink {
  font-weight: bold;
  border-bottom: 1px solid #0088cc;
}
.is-marked-for-deletion .u-undeleteLink:hover {
  text-decoration: none;
}
.is-marked-for-deletion td *:not(.u-undeleteMsg):not(.u-undeleteLink):not(.u-undeleteTip) {
  opacity: 0.4;
  pointer-events: none;
}

/*  HIDING UTILS
    ------------
    Wrap controls that you want hidden until
    a parent element is hovered
*/
/* hide controls */
.hidden-controls {
  transition: opacity 0.17s linear;
  opacity: 0;
}

/* Add this class to the parent element of hidden controls */
.contains-hidden-controls:hover .hidden-controls {
  opacity: 1 !important;
}

.Table-subHeading td {
  background: #fff;
  border-top: 1px solid #ddd !important;
  border-bottom: 1px solid #ddd !important;
  color: #4a4a4a;
}

.Table-subHeading--top td {
  border-top: none !important;
}

.Table-subHeading + tr td {
  border: none !important;
}

/**
* LOGS TABLES
* ******************************************************
*/
.Table--log-colTime {
  width: 20%;
}

.Table--log-colServer {
  width: 20%;
}

.Table--log-colMessage {
  width: 60%;
}

.Table--log {
  width: 100%;
}
.Table--log td {
  vertical-align: top;
  font-family: Monaco, Consolas, "Courier New", monospace;
  line-height: 1.5;
  font-size: 0.95rem;
  color: #5b7084;
  border-top: 1px dotted #E0E0E0;
  padding: 9px 12px;
}
.Table--log .Table--log-help {
  padding: 1.8rem;
  text-align: center;
  font-size: 1.4rem;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  color: #666;
}
.Table--log .Table--log-time {
  padding: 6px 4px 6px 11px !important;
}
.Table--log .Table--log-server {
  padding: 6px 4px 6px 4px !important;
}
.Table--log .Table--log-message {
  padding: 6px 11px 6px 4px !important;
  color: #0077aa;
  word-break: break-all;
  word-wrap: break-word;
}

/**
* Yellow fade animation for highlighting links to an
* html fragment identifer: eg. /stacks/25/environment_variables#cvid_4286
* ******************************************************
*/
.Table tr:target {
  -webkit-animation: targetRowHighlight 3s 1;
  animation: targetRowHighlight 3s 1;
}

@-webkit-keyframes targetRowHighlight {
  0% {
    background-color: rgba(0, 0, 0, 0.1);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
@keyframes targetRowHighlight {
  0% {
    background-color: rgba(255, 246, 0, 0.2);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
/* ==========================================================================
   TABLESORTER
   ==========================================================================
*/
th.tablesorter-header {
  outline: none;
}

.tablesorter-header-inner {
  display: inline-block;
  padding-right: 20px;
}

th.tablesorter-header .tablesorter-header-inner {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="11px" height="11px"><path d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"/></svg>');
  background-position: right 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}

th.tablesorter-headerAsc .tablesorter-header-inner {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="11px" height="11px"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"/></svg>');
  background-position: right 4px !important;
}

th.tablesorter-headerDesc .tablesorter-header-inner {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="11px" height="11px"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>');
  background-position: right 4px !important;
}

.TableSorter-noLabel .tablesorter-header-inner {
  padding-right: 10px;
}

/**
 *  Table rows checkboxes
 *  check boxes for multiple table rows
 *  Usecase bulk ops on multiple table rows
 */
/* Generic column width applied to any table with a checkbox column */
.Table-colCheckBox {
  width: 3%;
}

.Table-check {
  text-align: center;
  padding-left: 10px !important;
}
.Table-check input[type=checkbox] {
  margin: 2px 0 0 0;
  display: none;
}

.Table-checkLabel {
  padding-left: 3px !important;
}

.Table-icon {
  padding-left: 9px !important;
}

.js_multi_ops tr:hover input[type=checkbox] {
  display: block;
}

.Form.js_multi_ops_is_active input[type=checkbox] {
  display: block;
}

.Table-headerControls {
  /* additional wrapper is needed for transition, as you cant slideDown display: table-cell */
  /*
      Table header actions for bulk ops / bulk deletes / filtering controls
  */
  /* The select all checkbox */
  /* The container for the bulk operation buttons, Delete button etc */
}
.Table-headerControls th {
  padding: 0;
}
.Table-headerControls .Table-headerControlsWrap {
  position: relative;
  color: #666;
  border-bottom: 1px solid #D8D8D8;
  font-size: 1.3rem;
  font-weight: 500;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.Table-headerControls .Table-headerControlsSelectAll {
  position: absolute;
  top: 34%;
  left: 7px;
}
.Table-headerControls .Table-headerLabel {
  position: absolute;
  top: 34%;
  left: 26px;
}
.Table-headerControls .Table-headerControlsFilterActions {
  position: absolute;
  top: 34%;
  left: 8px;
}
.Table-headerControls .Table-headerControlsFilterActions a {
  color: #333;
}
.Table-headerControls .Table-headerControlsFilterActions a:hover {
  text-decoration: none;
}
.Table-headerControls .Table-headerControlsActions {
  position: absolute;
  top: 10px;
  right: 6px;
}

/* The centered message number of rows selected and cancel link */
.Table-headerControlsMsg {
  display: inline-block;
  line-height: 27px;
}

/*
 *  Table row that contains a link that is used to toggle expanding and collapsing rows
 *  E.G The Skycap Services table.
 */
table.Table tr.TableExpander td {
  padding: 0 !important;
}
table.Table tr.TableExpander td .TableExpander-link {
  background-color: #FAFBFC;
  padding: 18px 0;
  display: block;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
table.Table tr.TableExpander td .TableExpander-link:hover {
  background-color: #f7fbff;
}
table.Table tr.TableExpander td .TableExpander-link:focus {
  outline: none;
}
table.Table tr.TableExpander td .TableExpander-icon {
  margin-left: 2px;
  position: relative;
  top: 2px;
  color: #a0a0a0;
}
table.Table tr.TableExpander td strong {
  font-weight: 800;
  font-size: 1.3rem;
}

/* ==========================================================================
   COLUMN WIDTHS
   classes control column widths within modules that contain tabular data
   ==========================================================================
*/
/**
 *  Server group cols
 */
.Table-colGroupA {
  width: 18%;
}

.Table-colGroupB {
  width: 18%;
}

.Table-colGroupC {
  width: 15%;
}

.Table-colGroupD {
  width: 19%;
}

.Table-colGroupE {
  width: 25%;
}

.Table-colGroupF {
  width: 5%;
}

/**
 *  Scale units on cluster
 */
.Table-colGroupServiceA {
  width: 32%;
}

.Table-colGroupServiceB {
  width: 40%;
}

.Table-colGroupServiceC {
  width: 9%;
}

.Table-colGroupServiceD {
  width: 8%;
}

.Table-colGroupServiceE {
  width: 11%;
}

/**
 *  Failover group index table
 */
.Table-colConnStatusA {
  width: 20%;
}

.Table-colConnStatusB {
  width: 20%;
}

.Table-colConnStatusC {
  width: 10%;
}

.Table-colConnStatusD {
  width: 50%;
}

/**
 *  Firewall rules (Editable Tab)
 */
.Table-colFirewallA {
  width: 0%;
}

.Table-colFirewallB {
  width: 35%;
}

.Table-colFirewallC {
  width: 18%;
}

.Table-colFirewallD {
  width: 8%;
}

.Table-colFirewallE {
  width: 16%;
}

.Table-colFirewallF {
  width: 7%;
}

/**
 *  Firewall rules (Static Tab)
 */
.Table-colFirewallStaticC {
  width: 90px;
}

.Table-colFirewallStaticD {
  width: 200px;
}

/**
 *  Payments Table
 *
 */
.Table--payments th:nth-child(3) {
  text-align: right;
  padding-right: 25px;
}
.Table--payments td:nth-child(3) {
  text-align: right;
  padding-right: 25px;
}

.Table--volumes th:nth-child(5) {
  text-align: center;
}
.Table--volumes td:nth-child(5) {
  text-align: center;
}

/**
 *  Dragable table rows
 *  E.g. Stencils
 */
.Table-body--dragableRows td {
  cursor: move !important;
}
.Table-body--dragableRows tr.ui-sortable-helper {
  overflow: hidden;
  border: 1px solid #d8d8d8;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.075);
  background: #FFFBF2 !important;
}
.Table-body--dragableRows tr.ui-sortable-helper .u-dragable {
  fill: #000;
}

.Table-dragable {
  padding: 6px 0 0 8px !important;
  vertical-align: middle !important;
}

/* table sorting */
th.sorted.ascending:after {
  content: "  ↑";
}

th.sorted.descending:after {
  content: " ↓";
}

/*
 Dashboard tabular view
*/
.Table-cellDivider {
  padding-bottom: 2px;
  font-size: 12px;
}
.Table-cellDivider .state-label {
  float: none !important;
  font-size: 10px !important;
  font-weight: normal !important;
}

.Table-cellSmallIcon {
  margin-right: 4px;
  font-size: 12px;
}

.Table-cellLogo {
  position: relative;
  top: 3px;
  width: 15px;
  height: 15px;
}

.Table-cellLogo.ruby {
  top: 4px;
}

.Table-cellLogo.skycap {
  top: 2px;
}

.Table-cellLogo.prepress {
  top: 2px;
}

/* td containing a checkbox for row selection */
table.Table .Table-checkboxCell {
  text-align: center;
  vertical-align: top;
  padding: 14px 8px;
}
table.Table .Table-checkboxCell .row-select-box {
  width: 13px;
  height: 13px;
}

.Table-checkbox {
  width: 13px;
  height: 13px;
}

/* dashboard tabular specific */
.Table--dashboard tr td {
  height: 40px;
}

tr.u-rowDisabled td * {
  opacity: 0.65;
}
tr.u-rowDisabled td.Table-actions * {
  opacity: 1 !important;
}
tr.u-rowDisabled .u-opacity1 * {
  opacity: 1 !important;
}
tr.u-rowDisabled .mark-for-delete-message {
  display: block;
}

.mark-for-delete-message {
  display: none;
}

.Excerpt {
  display: block;
  height: 40px;
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
}
.Excerpt pre,
.Excerpt code {
  line-height: 1.2;
}

.Excerpt--4 {
  height: 48px;
}

.Excerpt.Excerpt--expanded {
  height: auto;
}

.Table.is-disabled * {
  opacity: 0.85;
  pointer-events: none;
}

.image-is-expanded td {
  border-top: 1px solid #f0f0f0 !important;
  background-color: white !important;
}

.Table-withCheckbox {
  display: flex;
  align-items: center;
}
.Table-withCheckbox label {
  padding-left: 7px;
  margin-bottom: 0;
}

td.Table-cellFlush {
  padding: 0;
}

.Table--servicesOnboarding tr.image-is-expanded td {
  border-top: 1px solid #dadee5 !important;
}

.Table-logs {
  padding: 1px 10px 1px 10px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10px, black calc(100% - 10px), transparent 100%);
}

.Table-logs--dark {
  background: rgb(45, 55, 72);
}

/** ******************************
 *  Services Table
 *  Responsive columns js_services_table
 */
.Table--csv3-services #services-col-expander {
  width: 2%;
}
@media only screen and (max-width: 760px) {
  .Table--csv3-services #services-col-expander {
    width: 6%;
  }
}
.Table--csv3-services #services-col-icon {
  width: 2%;
}
.Table--csv3-services #services-col-service-name {
  width: 24%;
}
.Table--csv3-services #services-col-apply-changes {
  width: 8%;
}
.Table--csv3-services #services-col-instances-current {
  width: 10%;
}
.Table--csv3-services #services-col-instances-desired {
  width: 10%;
}
.Table--csv3-services #services-col-network {
  width: 18%;
}
@media only screen and (max-width: 760px) {
  .Table--csv3-services #services-col-network {
    width: 34%;
  }
}
.Table--csv3-services #services-col-storage {
  width: 22%;
}
.Table--csv3-services #services-col-actions {
  width: 8%;
}
@media only screen and (max-width: 760px) {
  .Table--csv3-services #js_services_table #services-col-icon,
  .Table--csv3-services #js_services_table #services-col-icon-header,
  .Table--csv3-services #js_services_table .services-col-icon-data,
  .Table--csv3-services #js_services_table #services-col-storage,
  .Table--csv3-services #js_services_table #services-col-storage-header,
  .Table--csv3-services #js_services_table .services-col-storage-data,
  .Table--csv3-services #js_services_table #build_information {
    display: none;
  }
}

#services-col-expander {
  width: 2%;
}
@media only screen and (max-width: 760px) {
  #services-col-expander {
    width: 6%;
  }
}

#services-col-icon {
  width: 2%;
}

#services-col-service-name {
  width: 24%;
}

#services-col-apply-changes {
  width: 8%;
}

#services-col-instances-current {
  width: 10%;
}

#services-col-instances-desired {
  width: 10%;
}

#services-col-network {
  width: 18%;
}
@media only screen and (max-width: 760px) {
  #services-col-network {
    width: 34%;
  }
}

#services-col-storage {
  width: 22%;
}

#services-col-actions {
  width: 8%;
}

@media only screen and (max-width: 760px) {
  #js_services_table #services-col-icon,
  #js_services_table #services-col-icon-header,
  #js_services_table .services-col-icon-data,
  #js_services_table #services-col-storage,
  #js_services_table #services-col-storage-header,
  #js_services_table .services-col-storage-data,
  #js_services_table #build_information {
    display: none;
  }
}

/** ******************************
 *  Maestro Servers Table
 *  Responsive columns
 */
#maestro-servers-col-checkbox {
  width: 2%;
}

#maestro-servers-col-server-name {
  width: 18%;
}

#maestro-servers-col-server-status {
  width: 23%;
}

#maestro-servers-col-server-info {
  width: 16%;
}

#maestro-servers-col-server-auxiliaries {
  width: 16%;
}
@media only screen and (max-width: 760px) {
  #maestro-servers-col-server-auxiliaries {
    width: 30%;
  }
}

#maestro-servers-col-server-dropdown {
  width: 22%;
}

#maestro-servers-col-server-actions {
  width: 3%;
}
@media only screen and (max-width: 760px) {
  #maestro-servers-col-server-actions {
    width: 7%;
  }
}

@media only screen and (max-width: 760px) {
  .maestro-servers-table #maestro-servers-col-server-info,
  .maestro-servers-table .maestro-servers-data-server-info,
  .maestro-servers-table #maestro-servers-col-checkbox,
  .maestro-servers-table .maestro-servers-data-checkbox {
    display: none;
  }
}

/** ******************************
 *  Web Servers Table (Rails)
 *  Responsive columns
 */
#web-servers-col-checkbox {
  width: 3%;
}

#web-servers-col-server-name {
  width: 15%;
}

#web-servers-col-server-name-busy {
  width: 18%;
}

#web-servers-col-server-status {
  width: 13%;
}
@media only screen and (max-width: 760px) {
  #web-servers-col-server-status {
    width: 20%;
  }
}

#web-servers-col-toggle-web {
  width: 7%;
}

#web-servers-col-toggle-web-label {
  width: 13%;
}

#web-servers-col-deployment-groups {
  width: 9%;
}

#web-servers-col-auxiliaries {
  width: 15%;
}

#web-servers-col-messages {
  width: 20%;
}

#web-servers-col-actions {
  width: 5%;
}
@media only screen and (max-width: 760px) {
  #web-servers-col-actions {
    width: 9%;
  }
}

@media only screen and (max-width: 760px) {
  .web-servers-table #web-servers-col-checkbox,
  .web-servers-table .checkbox_container,
  .web-servers-table #web-servers-col-deployment-groups,
  .web-servers-table .deployment_group_tags {
    display: none;
  }
}

/** ******************************
 *  Database Servers Table
 *  Responsive columns
 */
#db-servers-col-server-name {
  width: 17%;
}
@media only screen and (max-width: 760px) {
  #db-servers-col-server-name {
    width: 22%;
  }
}

#db-servers-col-server-status {
  width: 21%;
}

#db-servers-col-deployment-groups {
  width: 10%;
}

#db-servers-col-auxiliaries {
  width: 13%;
}

#db-servers-col-messages {
  width: 33%;
}

#db-servers-col-actions {
  width: 6%;
}
@media only screen and (max-width: 760px) {
  #db-servers-col-actions {
    width: 10%;
  }
}

@media only screen and (max-width: 760px) {
  .db-servers-table #db-servers-col-deployment-groups,
  .db-servers-table .deployment_group_tags {
    display: none;
  }
}

/** ******************************
 *  Databases Table
 *  Responsive columns
 */
#databases-col-name {
  width: 30%;
}

#databases-col-info {
  width: 20%;
}

#databases-col-messages {
  width: 30%;
}

#databases-col-actions {
  width: 10%;
}

/** ******************************
 *  Database Users Table
 *  Responsive columns
 */
#db-users-col-name {
  width: 20%;
}

#db-users-col-from {
  width: 17%;
}

#db-users-col-rights {
  width: 17%;
}

#db-users-col-password {
  width: 19%;
}

#db-users-col-messages {
  width: 19%;
}

#db-users-col-actions {
  width: 8%;
}

@media only screen and (max-width: 760px) {
  .db-users-table #db-users-col-password {
    display: none;
  }
}

/* ******************************
 *  Pods Table
 *  Responsive columns
 */
#pods-col-status {
  width: 2%;
}

#pods-col-id {
  width: 20%;
}

#pods-col-created {
  width: 20%;
}

#pods-col-restarts {
  width: 10%;
}

#pods-col-ip {
  width: 15%;
}
@media only screen and (max-width: 760px) {
  #pods-col-ip {
    width: 25%;
  }
}

#pods-col-server {
  width: 10%;
}
@media only screen and (max-width: 760px) {
  #pods-col-server {
    width: 18%;
  }
}

#pods-col-cta {
  width: 19%;
}

#pods-col-actions {
  width: 4%;
}
@media only screen and (max-width: 760px) {
  #pods-col-actions {
    width: 6%;
  }
}

@media only screen and (max-width: 760px) {
  .pods-table-header {
    display: none;
  }
}

@media only screen and (max-width: 760px) {
  .pods-table .pods-created-col,
  .pods-table #pods-col-created {
    display: none;
  }
}

/* ******************************
 *  Jobs Table
 *  Responsive columns
 */
#jobs-col-name {
  width: 25%;
}

#jobs-col-type {
  width: 13%;
}
@media only screen and (max-width: 760px) {
  #jobs-col-type {
    width: 19%;
  }
}

#jobs-col-schedule {
  width: 25%;
}

#jobs-col-status {
  width: 17%;
}

#jobs-col-histogram {
  width: 12%;
}

#jobs-col-actions {
  width: 10%;
}

@media only screen and (max-width: 760px) {
  .jobs-table #jobs-col-histogram,
  .jobs-table .jobs-col-histogram {
    display: none;
  }
}

/* ******************************
 *  Jobs Table
 *  Responsive columns
 */
#jobs-csv3-col-name {
  width: 20%;
}

#jobs-csv3-col-service {
  width: 12%;
}

#jobs-csv3-col-schedule {
  width: 18%;
}

#jobs-csv3-col-status {
  width: 15%;
}

#jobs-csv3-col-histogram {
  width: 25%;
}

#jobs-csv3-col-actions {
  width: 10%;
}

/* ******************************
 *  Autoscalers Table
 *  Responsive columns
 */
#autoscaler-name {
  width: 32%;
}
@media only screen and (max-width: 760px) {
  #autoscaler-name {
    width: 27%;
  }
}

#autoscaler-description {
  width: 25%;
}
@media only screen and (max-width: 760px) {
  #autoscaler-description {
    width: 30%;
  }
}

#autoscaler-tags {
  width: 10%;
}

#autoscaler-messages {
  width: 23%;
}

#autoscaler-actions {
  width: 10%;
}

/* ******************************
 *  Loadbalancers Table
 *  Responsive columns
 */
#lb-col-server-name {
  width: 20%;
}

#lb-col-switch-control {
  width: 6%;
}
@media only screen and (max-width: 760px) {
  #lb-col-switch-control {
    width: 7%;
  }
}

#lb-col-status {
  width: 30%;
}

#lb-col-info {
  width: 44%;
}
@media only screen and (max-width: 760px) {
  #lb-col-info {
    width: 74%;
  }
}

@media only screen and (max-width: 760px) {
  .lb-servers-table .lb-col-info,
  .lb-servers-table #lb-col-info {
    display: none;
  }
}

/* ******************************
 *  Notifications Table
 *  Responsive columns
 */
#notification-col-name {
  width: 60%;
}
@media only screen and (max-width: 1143px) {
  #notification-col-name {
    width: 52%;
  }
}

#notification-col-slack {
  width: 10%;
}
@media only screen and (max-width: 1143px) {
  #notification-col-slack {
    width: 12%;
  }
}

#notification-col-email {
  width: 10%;
}
@media only screen and (max-width: 1143px) {
  #notification-col-email {
    width: 12%;
  }
}

#notification-col-webhook {
  width: 10%;
}
@media only screen and (max-width: 1143px) {
  #notification-col-webhook {
    width: 12%;
  }
}

#notification-col-browser {
  width: 10%;
}
@media only screen and (max-width: 1143px) {
  #notification-col-browser {
    width: 12%;
  }
}

/* ******************************
 *  Delete Account Table
 *  Responsive columns
 */
#delete-account-copy {
  width: 80%;
}
@media only screen and (max-width: 760px) {
  #delete-account-copy {
    width: 70%;
  }
}

#delete-account-actions {
  width: 20%;
}
@media only screen and (max-width: 760px) {
  #delete-account-actions {
    width: 30%;
  }
}

/** ******************************
 *  Settings - Application & Servers Table
 *  Responsive columns
 */
#settings-app-col-key {
  width: 22%;
}
@media only screen and (max-width: 1230px) {
  #settings-app-col-key {
    width: 24%;
  }
}

#settings-app-col-val {
  width: 78%;
}
@media only screen and (max-width: 1230px) {
  #settings-app-col-val {
    width: 76%;
  }
}

/** ******************************
 *  Deployment - Build & Deployment Table
 *  Responsive columns
 */
#settings-deployment-col-key {
  width: 23%;
}
@media only screen and (max-width: 1300px) {
  #settings-deployment-col-key {
    width: 25%;
  }
}

#settings-deployment-col-val {
  width: 77%;
}
@media only screen and (max-width: 1230px) {
  #settings-deployment-col-val {
    width: 75%;
  }
}

/**********************************************************************
 *  Table Content
 *  Content within table cells
 */
@media (max-width: 620px) {
  .shared-server,
  .r-worker-count {
    margin: 2px 0 0 0 !important;
    display: table;
  }
}

.Billing {
  padding: 20px 0;
}
.Billing .Billing-block {
  width: 60%;
  padding: 14px 22px;
  border-radius: 4px;
  margin: 2px 0;
}
.Billing .Billing-product:nth-child(odd) {
  background: #FAFAFA;
  border: 1px solid #efefef;
}
.Billing .Billing-product--single {
  background: #FFF;
  border: none;
}
.Billing .Billing-product--text {
  background: #fff;
}
.Billing .Billing-product--divider {
  border-top: 3px solid #f2f2f2;
  border-bottom: none;
  border-right: none;
  border-left: none;
  border-radius: 0 !important;
  background: #fff;
  margin-bottom: 16px;
  padding: 20px 22px;
}
.Billing .Billing-logo {
  position: relative;
  top: 3px;
  left: 2px;
  margin-right: 14px;
  width: 20px;
  height: 20px;
}
.Billing .Billing-data {
  margin-left: 14px;
}
.Billing .Billing-title {
  margin: 0;
  line-height: 1;
  font-size: 17px;
  font-weight: 700;
  padding-bottom: 5px;
}
.Billing .Billing-subTitle {
  color: #6a737d;
  font-size: 12px;
  font-weight: 500;
  padding-bottom: 2px;
}
.Billing .Billing-number {
  color: #24292e;
  font-size: 18px;
  font-weight: 500;
}
.Billing .Billing-number--strong {
  font-weight: 600;
}
.Billing .Billing-currency {
  color: #6a737d;
  position: relative;
  top: -4px;
  right: 0px;
  font-size: 1.2rem;
  font-weight: normal;
  margin-right: 4px;
}

/* ==========================================================================
 *	Pagination
 * ========================================================================== */
.pagination {
  height: 36px;
  margin: 18px 0;
}

.pagination ul {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 0;
  border-radius: 4px;
}

.pagination li {
  display: inline;
}

.pagination a {
  float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #e5e5e5;
  border-left-width: 0;
  font-weight: 400;
}

.pagination a:hover {
  background-color: #fff;
}

.pagination .active a {
  color: #000;
  cursor: default;
  background-color: #FAFBFC;
  font-weight: 500;
  outline: none;
}
.pagination .active a:hover {
  background-color: #FAFBFC !important;
}

.pagination .active a:hover {
  background: #fff;
}

.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
  color: #a0a0a0;
  cursor: default;
  background-color: transparent;
  opacity: 0.6;
}

.pagination li:first-child a {
  border-left-width: 1px;
  border-radius: 6px 0 0 6px;
}

.pagination li:last-child a {
  border-radius: 0 6px 6px 0;
}

.pagination-centered {
  text-align: center;
}

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

.pager {
  margin-bottom: 18px;
  margin-left: 0;
  text-align: center;
  list-style: none;
}

.pager:before,
.pager:after {
  display: table;
  content: "";
}

.pager:after {
  clear: both;
}

.pager li {
  display: inline;
}

.pager a {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}

.pager a:hover {
  text-decoration: none;
  background-color: #f5f5f5;
}

.pager .next a {
  float: right;
}

.pager .previous a {
  float: left;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
/* ===========================================================================================
 *  ALERTS FOR MULTI COMMUNICATION CHANNELS
 *  Email, iOS etc
============================================================================================== */
/* ===========================================================================================
 *  NAV LIST
============================================================================================== */
.alerts-list {
  top: -2px;
}
.alerts-list .stack-tool i {
  color: #a5a5a5;
  font-size: 15px;
}
.alerts-list a.stack-tool {
  transition: color 0.3s ease-in-out;
  font-size: 16px;
  line-height: 1;
  color: #a0a0a0;
}
.alerts-list a.stack-tool.active {
  color: rgb(40, 167, 69) !important;
}
.alerts-list a.stack-tool.active i {
  color: rgb(40, 167, 69) !important;
}
.alerts-list a.stack-tool.active svg,
.alerts-list a.stack-tool.active path {
  fill: rgb(40, 167, 69) !important;
}
.alerts-list a.stack-tool.active:hover {
  color: rgb(203, 36, 49) !important;
}
.alerts-list a.stack-tool.active:hover i {
  color: rgb(203, 36, 49) !important;
}
.alerts-list a.stack-tool.active:hover svg,
.alerts-list a.stack-tool.active:hover path {
  fill: rgb(203, 36, 49) !important;
}

.disabled-item path {
  opacity: 15 !important;
}

.modal-switch {
  position: relative;
  margin: 0 0 0.85em -0.8em;
}

#params_webhook_payload {
  min-height: 120px;
}

#params_webhook_response {
  min-height: 120px;
}

/* Fadein flash notifications
--------------------------------------------- */
/* fadein */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* fadein down*/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

/* Yellow fadein
--------------------------------------------- */
@keyframes yellowFadeIn {
  0% {
    background-color: rgba(255, 246, 0, 0.2);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
.yellowFadeIn {
  animation-name: yellowFadeIn;
}

@keyframes yellowSearchFadeIn {
  0% {
    background-color: rgba(255, 246, 0, 0.2);
  }
  100% {
    background-color: rgba(255, 246, 0, 0.08);
    color: rgb(0, 0, 0) !important;
  }
}
.yellowSearchFadeIn {
  animation-name: yellowSearchFadeIn;
}

/* Rotate
----------------------------------------------- */
.rotate {
  display: inline-block !important;
  padding: 0 !important;
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.rotate:focus {
  outline: none !important;
}

.icon-loop {
  outline: 1px solid transparent;
  line-height: 1;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* PULSE
----------------------------------------------- */
.scale-pulse {
  position: relative;
  -webkit-animation-name: scalePulse;
  -webkit-animation-duration: 1.6s;
  -webkit-animation-iteration-count: infinate;
  -moz-animation-name: scalePulse;
  -moz-animation-duration: 1.6s;
  -moz-animation-iteration-count: infinate;
}

@-webkit-keyframes scalePulse {
  from {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes scalePulse {
  from {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.2);
  }
  to {
    -moz-transform: scale(1);
  }
}
.field-pulse {
  -webkit-animation-name: fieldPulse;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinate;
  -moz-animation-name: fieldPulse;
  -moz-animation-duration: 0.5s;
  -moz-animation-iteration-count: infinate;
}

@-webkit-keyframes fieldPulse {
  from {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.02);
  }
  to {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes scalePulse {
  from {
    -moz-transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.02);
  }
  to {
    -moz-transform: scale(1);
  }
}
/* Color fader */
/* Fades the color of an SVG in and out in an infinate loop */
@keyframes color-fader {
  from {
    fill: #eeeeee;
  }
  50% {
    fill: #748b93;
  }
  to {
    fill: #eeeeee;
  }
}
.color-fader {
  animation-name: color-fader;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

/* Pulse Grow */
@-webkit-keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-animation-name: pulse-grow;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

/*
 *  Failover -- The primary stack has Failed over! running in failover mode
 *
 */
/* Amber */
.Pulser {
  margin: 0 2px;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EA8407;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(234, 132, 7, 0.4);
  animation: pulse_animation 4s infinite;
}

@-webkit-keyframes pulse_animation {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(234, 132, 7, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(234, 132, 7, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(234, 132, 7, 0);
  }
}
@keyframes pulse_animation {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(234, 132, 7, 0.4);
    box-shadow: 0 0 0 0 rgba(234, 132, 7, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(234, 132, 7, 0);
    box-shadow: 0 0 0 10px rgba(234, 169, 7, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(234, 132, 7, 0);
    box-shadow: 0 0 0 0 rgba(234, 132, 7, 0);
  }
}
/*
 *  Green box-shadow pulse
 *
 */
.Pulser--green {
  background: rgb(40, 167, 69) !important;
  box-shadow: 0 0 0 rgba(51, 153, 0, 0.4);
  animation: pulse_animation_green 2s infinite;
}

@-webkit-keyframes pulse_animation_green {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(51, 153, 0, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 11px rgba(51, 153, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(51, 153, 0, 0);
  }
}
@keyframes pulse_animation_green {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(51, 153, 0, 0.4);
    box-shadow: 0 0 0 0 rgba(51, 153, 0, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 11px rgba(51, 153, 0, 0);
    box-shadow: 0 0 0 10px rgba(51, 153, 0, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(51, 153, 0, 0);
    box-shadow: 0 0 0 0 rgba(51, 153, 0, 0);
  }
}
.animated05 {
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated2 {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated3 {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -ms-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated4 {
  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -ms-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

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

@-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
  animated2 pulse
*/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background-color: rgba(255, 246, 0, 0.2);
  }
  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.04);
    -ms-transform: scale(1.04);
    transform: scale(1.04);
    background-color: rgba(255, 246, 0, 0.2);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }
  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-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;
}

@-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% {
    opacity: 1;
    -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% {
    opacity: 1;
    -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;
}

@-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;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-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);
  }
}
@-moz-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(25px);
    -ms-transform: translateY(25px);
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-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;
}

@-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;
}

@-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;
}

@-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;
}

@-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;
}

@-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;
}

@-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;
}

@-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;
}

/* 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;
}

/* ===========================================================================================
 *  Application Header Area
 *  Stack name and Deployment details - date & time / Git info
============================================================================================== */
.StackInfo {
  padding-bottom: 10px;
  position: relative;
}
.StackInfo .StackInfo-activity {
  font-weight: 400;
  padding: 0 0 6px 0;
  font-size: 14px;
}
@media (max-width: 620px) {
  .StackInfo .StackInfo-activity {
    font-size: 12px;
  }
}
.StackInfo .StackInfo-details {
  font-size: 14px;
  font-weight: normal;
  padding: 0 0 8px 0;
  line-height: 1;
}
@media (max-width: 620px) {
  .StackInfo .StackInfo-details {
    font-size: 13px;
  }
}
.StackInfo .StackInfo-deployed {
  color: #59626b;
  font-weight: 500;
}
.StackInfo .StackInfo-deployedDate {
  color: #000;
  font-weight: 500;
}
.StackInfo .StackInfo-cloud {
  color: #59626b;
}
.StackInfo .StackInfo-error {
  line-height: 1;
  padding: 0 0 8px 0;
  font-size: 13px;
  font-weight: 400;
  color: rgb(203, 36, 49);
}
@media (max-width: 620px) {
  .StackInfo .StackInfo-error {
    font-size: 12px;
  }
}
.StackInfo .StackInfo-error a {
  color: inherit;
  text-decoration: none;
}
.StackInfo .StackInfo-detailsSecondary {
  font-weight: 400;
  padding: 0 0 6px 0;
  line-height: 1;
  font-size: 14px;
}
@media (max-width: 620px) {
  .StackInfo .StackInfo-detailsSecondary {
    font-size: 12px;
  }
}
.StackInfo .StackInfo-operations {
  font-size: 1.3rem;
  padding-top: 8px;
}
.StackInfo .StackInfo-score {
  position: relative;
  top: -1px;
  display: inline-block;
  margin-left: 8px;
}
.StackInfo .StackInfo-failoverLink {
  font-size: 13px;
}
.StackInfo .StackInfo-deploy {
  position: absolute;
  right: 0;
  top: 0;
  width: 220px;
}
.StackInfo .StackInfo-deploy .Button {
  min-width: 108px;
  position: absolute;
  right: 0;
  top: 0;
}
.StackInfo .StackInfo-deploy.StackInfo-deploy--preview {
  width: 240px;
}
.StackInfo .StackInfo-utils {
  float: right;
  /* < 1024px grid - linearised layout */
}
@media only screen and (max-width: 1023px) {
  .StackInfo .StackInfo-utils {
    float: left;
    padding-top: 14px;
    padding-right: 0;
    padding-bottom: 12px;
  }
}
.StackInfo .StackInfo-utils--topPadding {
  padding-top: 46px;
}
@media only screen and (max-width: 1023px) {
  .StackInfo .StackInfo-utils--topPadding {
    padding-top: 0;
  }
}
.StackInfo .StackInfo-notice {
  text-align: right;
  padding-top: 4px;
}
.StackInfo .StackInfo-notice .state-label {
  margin-bottom: 4px;
}
.StackInfo .StackInfoLinks {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  font-size: 12px;
  line-height: 1;
}
.StackInfo .StackInfoLinks .StackInfoLinks-health {
  margin-left: 10px;
}

/*
  CSV3 - Cluster header
 */
.StackInfo.StackInfo--clusterPreparation {
  padding-bottom: 26px;
}

.StackInfo.StackInfo--csv3 {
  padding-left: 2px;
}
.StackInfo.StackInfo--csv3 .Stackinfo-name {
  line-height: 1;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #000;
}
.StackInfo.StackInfo--csv3 .Stackinfo-name .StackInfo-cloud {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
.StackInfo.StackInfo--csv3 .StackInfo-deployed {
  color: #59626b;
  font-weight: 400;
}

.StackScoreIndicator {
  position: relative;
  top: -1px;
  margin-left: 6px;
}

.GitInfo {
  flex-direction: row;
  display: inline-flex;
  align-items: baseline;
  align-content: flex-start;
  flex-wrap: nowrap;
  font-size: 12px;
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
  line-height: 1;
}
.GitInfo .GitInfo-branch {
  margin-right: 6px;
}
.GitInfo .GitInfo-commit {
  color: #59626b;
}
.GitInfo .GitInfo-compare {
  margin-left: 8px;
}

.ActivityDropMenu.DropMenu .dropdown-menu {
  max-width: 380px;
}
.ActivityDropMenu.DropMenu .dropdown-menu li a {
  white-space: normal !important;
  color: #427dc4 !important;
}

.StackInfo--prepress .StackInfo-title {
  line-height: 1.2;
}

.StackInfo-tags {
  display: none;
}
.StackInfo-tags .Tag-item {
  font-size: 11px;
}

/* application level (common header tags are displayed only on the home page) */
.NGLayout[data-controller=application_timeline] .StackInfo-tags,
.NGLayout[data-controller=preview_variants] .StackInfo-tags,
.NGLayout[data-action=previews] .StackInfo-tags,
.NGLayout.js-ActiveProtect-page .StackInfo-tags {
  padding-top: 0;
  display: block;
}

.StackInfo--padded {
  padding-bottom: 26px;
}
@media only screen and (max-width: 1023px) {
  .StackInfo--padded {
    padding-bottom: 4px;
  }
}

#js_app_header_ng + .TabMini {
  margin-top: -6px;
  padding-top: 0;
}

/*
    Save some header space on full screen pages - e.g. operations, live logs
*/
body[data-controller=operations] .StackInfo-details,
body[data-controller=operations] .DeployStatus-activity,
body[data-controller=live_logs] .StackInfo-details,
body[data-controller=live_logs] .DeployStatus-activity {
  font-size: 13px !important;
}
body[data-controller=operations] .StackInfo--padded,
body[data-controller=live_logs] .StackInfo--padded {
  padding-bottom: 14px;
}
body[data-controller=operations] .u-hideOnMinimalHeader,
body[data-controller=live_logs] .u-hideOnMinimalHeader {
  display: none;
}

body[data-controller=operations] .StackInfo-activity,
body[data-controller=operations] .StackInfo-error,
body[data-controller=operations] #js_cancel_deployment_btn {
  display: none;
}

.Icon--header {
  margin-right: 4px;
}

.HeaderLinks {
  position: relative;
}
.HeaderLinks .HeaderLinks-top {
  font-size: 13px;
}
.HeaderLinks .HeaderLinks-cta {
  display: inline-block;
  position: absolute;
  top: -1px;
  right: -28px;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
}
.HeaderLinks .HeaderLinks-cta:hover {
  background-color: #eee;
}
.HeaderLinks .HeaderLinks-cta .caret {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.HeaderLinks .HeaderLinks-menu a {
  color: #427dc4 !important;
}

/* ==========================================================================
 *	DeployStatus - CSv3 deployment date and activity links merged into one
 * ========================================================================== */
.DeployStatus {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}
.DeployStatus .DeployStatus-time .StackInfo-details {
  padding-bottom: 0;
}
.DeployStatus .DeployStatus-activity {
  font-size: 14px;
}

/*
    ROLLOUT
    Dropdown
    Green, Blue, Canary deployment switching
*/
:root {
  --rollout-green: #339900;
  --rollout-bg-green: #edfcf1;
  --rollout-blue: #254187;
  --rollout-bg-blue: rgb(239, 246, 255);
  --rollout-canary: #000;
  --rollout-bg-canary: #FFFBEB;
}

.Rollout {
  display: inline-block;
  padding-right: 8px;
}
.Rollout .Rollout-item {
  display: inline-block;
  position: relative;
  margin-left: -4px;
  padding: 3px 4px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 13px;
}
@media (max-width: 620px) {
  .Rollout .Rollout-item {
    font-size: 12px;
    font-weight: normal;
  }
}
.Rollout .Rollout-item--blue {
  background-color: var(--rollout-bg-blue);
  color: var(--rollout-blue);
}
.Rollout .Rollout-item--green {
  background: var(--rollout-bg-green);
  color: var(--rollout-green);
}
.Rollout .Rollout-item--canary {
  color: var(--rollout-canary);
  background-color: var(--rollout-bg-canary);
}
.Rollout .dropdown-menu {
  width: 400px;
}

.Rollout--wide .dropdown-menu {
  width: 450px;
}

.Rollout--right {
  padding-right: 0;
}
.Rollout--right .dropdown-menu {
  top: 20px;
  left: -380px !important;
}
.Rollout--right .dropdown-menu:before {
  left: 378px !important;
}
.Rollout--right .dropdown-menu:after {
  left: 379px !important;
}

.Rollout.DropMenu .caret {
  vertical-align: middle;
}

/*
    VARIANTS
    Maestro deployment preview variant dropdown
    Common across Maestro pages within shared header
*/
.Variants {
  line-height: 1;
  padding: 0px 12px 0 1px;
  /*
      The selected preview deployment in header
  */
  /*
      Start the dropdown list of Variant info
  */
  /* Dropdown menu width and positioning */
  /* Heading and form filter input */
  /*
      List of preview links
  */
  /*
      Variant details
      Icon for branch, PR, tag.
      Short name title and branch name
  */
}
.Variants .DropMenu {
  margin-top: 0;
}
.Variants .Variants-selected {
  line-height: 1;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  padding: 0;
}
.Variants .Variants-selected:hover {
  color: #000;
}
.Variants .Variants-selected .Variants-selectedIcon {
  position: relative;
  top: 1px;
  width: 13px;
  height: 13px;
  margin-right: 4px;
}
.Variants .Variants-selected .Variants-defaultIcon {
  position: relative;
  top: 1px;
  width: 13px;
  height: 13px;
  margin-right: 4px;
}
.Variants .Variants-list {
  top: 20px;
  width: 420px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  /* list items */
}
.Variants .Variants-heading {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}
.Variants .Variants-filter {
  margin-top: -6px;
  padding: 6px 16px 8px 16px;
}
.Variants .Variants-link:hover {
  color: #000;
}
.Variants .Variants-list--filterable {
  mask-image: linear-gradient(to bottom, transparent 0%, black 6px, black calc(100% - 6px), transparent 100%);
}
.Variants .Variants-details {
  position: relative;
  display: flex;
  /* slected item indicator */
}
.Variants .Variants-details .Variants-icon {
  position: relative;
  top: 1px;
  margin-right: 10px;
}
.Variants .Variants-details .Variants-icon--preview {
  top: 1px;
}
.Variants .Variants-details .Variants-nameDefault {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 13px;
}
.Variants .Variants-details .Variants-name {
  font-size: 12px;
  padding-bottom: 3px;
}
.Variants .Variants-details .Variants-branch,
.Variants .Variants-details .Variants-info {
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
  color: #222;
  font-size: 12px;
}
.Variants .Variants-details .Variants-text {
  font-size: 13px;
}
.Variants .Variants-details .Variants-tick {
  position: absolute;
  top: 1px;
  right: 4px;
  color: #000;
}
.Variants .Variants-link--default .Variants-tick {
  top: 2px;
}
.Variants .Variants-link.Variants-link--selected {
  cursor: default;
}
.Variants .Variants-link.Variants-link--selected:hover {
  background: transparent !important;
}
.Variants .Variants-link.Variants-link--selected .Variants-name {
  font-weight: bold;
  color: #000;
}
.Variants .Variants-link.Variants-link--selected .Variants-branch {
  font-weight: bold;
  color: #000;
}

.label,
.badge {
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  vertical-align: middle;
  background: #f4f4f4;
  margin: 0 3px;
  text-transform: capitaize;
}
.label:hover,
.badge:hover {
  color: inherit;
}

@media (max-width: 620px) {
  .badge--table {
    display: table;
    margin: 0;
    padding: 1px 4px 1px 4px !important;
  }
}

.badge--light {
  font-weight: normal;
}

.label--small,
.badge-small {
  font-size: 11px;
}

.unit-count.badge-info {
  color: #fff;
}

.label {
  padding: 1px 4px 2px;
  border-radius: 3px;
}

.badge {
  padding: 1px 7px 2px 7px;
  border-radius: 9px;
  line-height: 1;
}

.badge-nav {
  position: relative;
  top: -1px;
  padding: 1px 6px 2px 6px;
}

.badge-tabNav {
  position: absolute;
  top: -9px;
  right: -8px;
  font-size: 8px;
  font-weight: 400;
  padding: 2px 6px 2px 6px;
}

.badge--small {
  display: inline-block;
  padding: 2px 4px !important;
  border-radius: 20px;
  font-weight: normal;
}

a.label:hover,
a.badge:hover {
  text-decoration: none;
  cursor: pointer;
}

.label-important,
.badge-important {
  background-color: #CC3333;
}

.label-important[href],
.badge-important[href] {
  background-color: #953b39;
}

.label-warning,
.badge-warning {
  background-color: #f89406;
  color: #fff;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #c67605;
}

.label--success,
.badge-success {
  background-color: #F0FFF4;
}

.label-success[href],
.badge-success[href] {
  background-color: #356635;
}

.label-green,
.badge-green {
  background-color: #62c462;
  color: #fff;
}
.label-green:hover,
.badge-green:hover {
  color: #fff;
}

.label-blue,
.badge-blue {
  background-color: #2d74c4;
  color: #fff;
}
.label-blue:hover,
.badge-blue:hover {
  color: #fff;
}

.label-red,
.badge-red {
  background-color: #E01F22;
  color: #fff !important;
  text-shadow: none;
}

.label-amber,
.badge-amber {
  background-color: #EA8407;
  color: #fff !important;
}

.label--red {
  background: #FFF5F7;
}

.label--bluerollout {
  background-color: var(--rollout-bg-blue);
  color: var(--rollout-blue);
}

.label--greenrollout {
  background: var(--rollout-bg-green);
  color: var(--rollout-green);
}

.label--canaryrollout {
  color: var(--rollout-canary);
  background-color: var(--rollout-bg-canary);
}

.label--card {
  position: relative;
  font-weight: 400;
  margin-left: 0;
}

.badge-info {
  background-color: #505c63;
  color: #fff;
}
.badge-info:hover {
  color: #fff;
}

.label-inverse,
.badge-inverse {
  background-color: #333333;
}

.label-inverse[href],
.badge-inverse[href] {
  background-color: #1a1a1a;
}

/**
 * BADGE
 */
.Counter {
  position: relative;
  display: inline-block;
  min-width: 12px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 500;
  line-height: 15px;
  color: #000;
  text-align: center;
  background-color: rgba(175, 184, 193, 0.2);
  border-radius: 2em;
}

.Counter--nav {
  top: -1px;
  margin-left: 3px;
}

.Counter--red {
  background-color: #e01f22;
  color: #fff !important;
  font-weight: 400;
}

.Counter--subNav {
  top: -1px;
  font-size: 9px;
  margin-left: 3px;
}

.Badge {
  display: inline-block;
  position: relative;
  line-height: 11px;
  font-size: 11px;
  vertical-align: baseline;
  padding: 1px 4px 2px 4px;
  border-radius: 9px;
  text-align: center;
  white-space: nowrap;
}

.Badge--red,
.badge--red {
  background-color: #e01f22;
  text-shadow: none;
  color: #fff !important;
}

.Badge--amber {
  background-color: #EA8407;
  text-shadow: none;
  color: #fff !important;
}

.badge--grey {
  background-color: #d8d8d8;
  color: #5c6e72 !important;
}

.TabMini-badge {
  position: absolute;
  top: -10px;
  right: -8px;
  min-width: 8px;
  line-height: 11px;
  font-size: 8px;
  font-weight: 500;
}

.badge.TabMini-badge {
  position: absolute;
  top: -9px;
  right: -12px;
  font-size: 9px;
  padding: 1px 4px 2px 6px;
}

/**
 * CONTAINER BAR
 * Use Case: Scaling Kubes containers
 */
.ContainerStatus {
  box-sizing: border-box;
  overflow: hidden;
  font-size: 1.1rem;
}
.ContainerStatus .ContainerStatus-label {
  font-size: 1.2rem;
  padding: 0 0 4px 0;
  color: #999;
  line-height: 1;
}
.ContainerStatus .ContainerStatus-label b {
  font-weight: bold;
  color: #666;
}

a .ContainerStatus .ContainerStatus-label {
  color: #427dc4 !important;
}
a .ContainerStatus .ContainerStatus-label b {
  color: #007dbc !important;
}

.ContainerBar {
  display: flex;
  width: 14em;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 4px;
}

.ContainerBar-item {
  display: inline-flex;
  box-sizing: border-box;
  background: linear-gradient(#eceeef, #e2e2e2);
  transition: width 0.5s ease-in-out;
  height: 3px;
  font-size: 0;
}

.ContainerBar-item--green {
  background: #6AC343;
}

.ContainerBar-item--red {
  background: #c62f2f;
}

.ContainerBar-item--grey {
  background: linear-gradient(#eceeef, #e2e2e2);
}

/**
 * PODS DETAILS
 *
 */
.PodStatus {
  font-size: 1.1rem;
  line-height: 1;
  margin-right: 2.4em;
  min-width: 110px;
}
@media (max-width: 620px) {
  .PodStatus {
    padding: 1em 0;
  }
}

.PodStatus-title {
  font-size: 10px;
  line-height: 1;
  color: #a5a5a5;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 4px;
}

.PodStatus-detail {
  line-height: 1;
}

.PodStatus-count {
  font-weight: 600 !important;
}

.PodStatus-link .PodStatus-title {
  color: #427dc4;
}

/**
 * PROGRESS BAR OR USAGE METER
 * Use Case:
 */
/*
    <div class="Tabular-meter">
        <div class="Meter">
            <div class="Meter-bar" style="width:50%"></div>
        </div>
    </div>

 */
.Meter {
  display: flex;
  overflow: hidden;
  vertical-align: middle;
  width: 6em;
  background: linear-gradient(#eceeef, #e2e2e2);
  border-radius: 9px;
}

.Meter-bar {
  box-sizing: border-box;
  background: #6AC343;
  height: 3px;
  color: #fff;
  transition: width 0.5s ease-in-out;
}

.Meter--animated .Progress-bar {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}
.Meter--red .Progress-bar {
  background: rgb(203, 36, 49);
}

.Meter--amber .Progress-bar {
  background: #e29222;
}

.Meter--green .Progress-bar {
  background: #339900;
}

.Meter--striped .Progress-bar {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.MeterLabel {
  line-height: 1.5em;
  padding: 1px 0 0 2px;
  font-size: 1.1rem;
}

/**
 *
 *
 */
/* ==========================================================================
 *  SIMPLE CSS BAR CHART
============================================================================= */
.BarMetric {
  margin-bottom: 12px;
}
.BarMetric .BarMetric-item {
  margin-bottom: 30px;
}
.BarMetric .BarMetric-title {
  padding: 0;
  line-height: 1;
  font-size: 13px;
  color: #5e6670;
  font-weight: 500;
}
.BarMetric .BarMetric-metric {
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: #eee;
  border-radius: 3px;
}
.BarMetric .BarMetric-bar {
  padding: 4px 8px;
  background-color: #47B649;
  text-align: right;
  color: #f2f2f2;
  font-size: 10px;
  font-weight: 200;
  width: 0;
  transition: width 1s ease-in-out;
}
.BarMetric .BarMetric-bar--thin {
  padding: 2px 4px;
}
.BarMetric .BarMetric--orange {
  background-color: #EA8407;
}
.BarMetric .BarMetric-actions {
  position: relative;
  top: -20px;
  font-size: 12px;
}
.BarMetric .BarMetric-alert {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  border-left: 2px solid #e84c85;
  height: 40px;
}
.BarMetric .BarMetric-actionsIcon {
  position: relative;
  top: 1px;
  margin-right: 4px;
  color: #5e6670;
}

body {
  background: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.5rem;
  line-height: 18px;
  color: #24292e;
}

::-moz-selection {
  background: #DEFFD6;
  text-shadow: none;
  padding: 2px;
  color: #000;
}

::selection {
  background: #DEFFD6;
  text-shadow: none;
  padding: 2px;
  color: #000;
}

.inverted-selection {
  /* Invert color of selected text - eg. Heroku help commands selection */
}
.inverted-selection ::-moz-selection {
  background: #CDFFC1;
  text-shadow: none;
  padding: 2px;
  color: #000;
}
.inverted-selection ::selection {
  background: #CDFFC1;
  text-shadow: none;
  padding: 2px;
  color: #000;
}

/* ==========================================================================
   ELEMENTS
   ========================================================================== */
/*
   TYPE
   -------------------------------------------------------------------------- */
p {
  margin: 0 0 16px;
  line-height: 1.6;
}

p small {
  font-size: 1.1rem;
  color: #999999;
}

/*
   HEADINGS
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: 500;
  color: inherit;
  color: #333;
  -webkit-font-smoothing: subpixel-antialiased;
}

h1 {
  font-size: 2.2rem;
  line-height: 36px;
}

h2 {
  font-size: 2rem;
  line-height: 36px;
}

h3 {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 8px;
}

h4,
h5,
h6 {
  line-height: 18px;
}

h4 {
  font-size: 1.4rem;
}

h4 small {
  font-size: 1.2rem;
}

h5 {
  font-size: 1.2rem;
}

h6 {
  font-size: 1.1rem;
  color: #999999;
  text-transform: uppercase;
}

.AppH1 {
  line-height: 1;
  font-size: 16px;
  font-weight: 600;
  padding: 0 0 8px 7px;
}

.AppH2 {
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
  padding: 0 0 14px 2px;
}

.heading-lead {
  line-height: 1 !important;
  color: #2f373f;
  font-size: 15px;
  font-weight: 600;
  padding-top: 10px;
  margin: 0 0 16px !important;
}

sub,
sup {
  position: relative;
  font-size: 0.9rem;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.6rem;
}

sub {
  bottom: -0.25em;
}

ul,
ol {
  padding: 0;
  margin: 0 0 9px 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  line-height: 18px;
}

dl {
  margin-bottom: 18px;
}

dt {
  font-weight: bold;
  line-height: 17px;
}

dd {
  margin-left: 9px;
}

.dl-horizontal dt {
  float: left;
  width: 120px;
  overflow: hidden;
  clear: left;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-horizontal dd {
  margin-left: 130px;
}

hr {
  clear: both;
  float: none;
  margin: 6px 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #ffffff;
}

hr.spacer {
  margin: 28px 0 !important;
}

strong,
b {
  font-weight: 600;
}

em {
  font-style: italic;
}

abbr[title] {
  cursor: help;
  padding-bottom: 1px;
  border-bottom: 1px dotted #eee;
}

abbr[title]:hover {
  border-bottom: 1px dotted #BABABA;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}

address {
  display: block;
  margin-bottom: 18px;
  font-style: normal;
  line-height: 18px;
}

small {
  font-size: 100%;
}

cite {
  font-style: normal;
}

code,
kbd,
pre {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 1.15rem;
  color: #333333;
}

code {
  padding: 2px 1px;
}

.code-inline {
  border: none;
}

.u-pre {
  display: block;
  padding: 1em;
  margin: 0 0 9px;
  font-size: 1.2rem;
  line-height: 18px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
}

.u-pre--section {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

pre code {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
}

/* --------------------------------------------------------------------------
 *  MISC
----------------------------------------------------------------------------- */
.chart {
  clear: both;
  margin: 22px 0;
}

#js-job-chart {
  width: 100%;
}

/* horizontal rule divider */
.divider {
  clear: both;
  margin-top: 20px;
  border: 0;
  height: 1px;
  background: #333;
  background: linear-gradient(to right, #ccc, #ddd, #ccc);
}

.help-popover {
  display: inline-block;
  margin: 0 2px;
}

/* Right facing expander arrow
------------------------------------  */
.expander {
  cursor: pointer;
  color: #427dc4 !important;
  padding-bottom: 1px;
  border-bottom: 1px solid #ddd;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  user-select: none;
}

.expander::after {
  display: inline-block;
  content: "";
  position: relative;
  top: 0;
  font-size: 0px;
  line-height: 0;
  width: 0px;
  margin-left: 4px;
  /* border triangle */
  border-color: transparent transparent transparent #666;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  /* animate the rotation */
  -moz-transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.expander::after:hover {
  border-color: #000;
}

.expander.expanded::after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

.Expander {
  margin: 2em 0 0;
}

.Expander-content {
  margin: 1.4em 0;
}

/* --------------------------------------------------------------------------
 *  HELPER CLASSES - insemantic classes to do odd jobs.
----------------------------------------------------------------------------- */
.outer-title {
  line-height: 1;
  font-weight: 500;
  font-size: 1.9rem;
  margin: 0 0 1em 0.05em;
  color: #666;
}
.outer-title strong {
  color: #000;
}

.outer-subTitle {
  margin: 0.4em 0 0.8em 0.05em;
  padding: 0 0 2px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #222;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

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

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

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

.strong {
  font-weight: 700 !important;
}

.lighter {
  font-weight: 400;
  color: #707070;
}

.password-mask-wrap {
  display: inline-block;
  min-width: 136px;
}

.js_password_mask {
  display: inline-block;
  margin-right: 4px;
}

.js_password_text,
.js_password_copy {
  display: none;
}

.js_show_password_txt_row .js_password_mask {
  display: none;
}
.js_show_password_txt_row .js_password_text {
  display: inline-block;
}
.js_show_password_txt_row .js_password_copy {
  display: inline-block;
}

#js-rebuild {
  display: inline-block;
  min-width: 60px;
}

.js-undo-msg:hover {
  cursor: pointer;
}

#js-update-count {
  padding-left: 6px;
}

#js-open-cloud-platforms-modal {
  outline: 1px solid transparent;
}

#js-open-cloud-platforms-modal b {
  text-decoration: underline;
}

.manifest-value {
  transition: background;
  display: inline-block;
  line-height: 1;
  color: #fff;
  font-size: 9px;
  text-transform: uppercase;
  background: #8C8C8C;
  padding: 2px;
  border-radius: 1px;
}

.manifest-value:hover {
  background: #666;
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
 *  Leagal copy
----------------------------------------------------------------------------- */
.legal {
  color: #A3A3A3;
}
.legal a {
  color: #A3A3A3;
}

/* --------------------------------------------------------------------------
 *  Additional meta info - can be hidden on smaller displays
----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .meta-xtra {
    display: none;
  }
}

/* --------------------------------------------------------------------------
 *  SECTIONS
----------------------------------------------------------------------------- */
.Sidebar-heading {
  color: #666;
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 0.8em;
  letter-spacing: 1px;
}

.Sidebar-rule {
  border-top: 1px solid #e2e2e2;
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}

/* --------------------------------------------------------------------------
 *  SECTION
 *  Used by Account views
----------------------------------------------------------------------------- */
.Section-divider {
  overflow: hidden;
  margin-bottom: 1em;
}

.Section-title {
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
}

.Section-title--action {
  margin-top: 1em;
}

/* --------------------------------------------------------------------------
 *  Article
 *  Text only content
 *  Use Case:  Error pages, 404, 500, permissions etc
----------------------------------------------------------------------------- */
.Article {
  padding: 18px;
}
.Article .Article-h1 {
  color: #000;
  font-size: 2.4rem;
  font-weight: 800;
}
@media only screen and (min-width: 1024px) {
  .Article .Article-h1 {
    line-height: 2.8;
  }
}
.Article .Article-lead {
  font-size: 1.9rem;
  margin-bottom: 1em;
  line-height: 1.6;
  color: #37434f;
}
@media only screen and (min-width: 1024px) {
  .Article .Article-lead {
    padding-right: 8em;
  }
}
.Article .Article-h2 {
  font-size: 1.9rem;
  font-weight: 700;
  color: #000;
}
.Article .Article-text {
  font-size: 1.9rem;
  line-height: 1.6;
  color: #455566;
}
@media only screen and (min-width: 1024px) {
  .Article .Article-text {
    padding-right: 8em;
  }
}

/* ==========================================================================
   BUTTON RELATED RUES
   ========================================================================== */
.close {
  float: right;
  font-size: 20px;
  font-weight: 100 !important;
  line-height: 18px;
  color: #000000;
  text-decoration: none !important;
  border: none !important;
  opacity: 0.3;
}

.close:hover {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.6;
}

.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.btn {
  display: inline-block;
  padding: 7px 10px 7px;
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #555;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background: linear-gradient(#FCFCFC, #F2F2F2);
  border: 1px solid #cccccc;
  border-radius: 5px;
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
  background-color: #fff;
}

.btn:active,
.btn.active {
  position: relative;
}

.btn:hover {
  color: #333333;
  text-decoration: none;
  background-color: #FCFCFC;
}

.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn.active,
.btn:active {
  background-color: #e6e6e6;
  background-image: none;
  outline: 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.btn-large,
form .btn {
  padding: 8px 16px;
  font-size: 1.5rem;
  line-height: 1;
}

.btn-sign {
  padding: 12px 10px 12px !important;
  font-weight: bold;
  font-size: 1.8rem;
}

.btn-large [class^=icon-] {
  margin-top: 1px;
}

form .btn-small,
.btn-small {
  padding: 5px 9px;
  font-size: 13px;
  line-height: 16px;
}

.btn-small [class^=icon-] {
  margin-top: -1px;
}

.btn-mini {
  padding: 2px 6px;
  font-size: 11px !important;
  line-height: 14px;
  text-shadow: none !important;
}

.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
  color: #ffffff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
  color: rgba(255, 255, 255, 0.75);
}

.btn-primary {
  background-color: linear-gradient(#0088cc, #004BB5);
  background-repeat: repeat-x;
  border-color: #0055cc #0055cc #003580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: #004BB5;
}

.btn-primary:active,
.btn-primary.active {
  background-color: #004099 \9 ;
}

.btn-warning {
  background-color: #faa732;
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
  background-color: #f89406;
}

.btn-warning:active,
.btn-warning.active {
  background-color: #c67605 \9 ;
}

.btn-danger {
  background-color: linear-gradient(#ee5f5b, #bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
  background-color: #bd362f;
}

.btn-danger:active,
.btn-danger.active {
  background-color: #942a25 \9 ;
}

.btn-success {
  background: linear-gradient(#62c462, #50A050);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
  background-color: #51a351;
}

.btn-success:active,
.btn-success.active {
  background-color: #408140 \9 ;
}

.btn-info {
  background-color: #49afcd;
  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
  background-color: #2f96b4;
}

.btn-info:active,
.btn-info.active {
  background-color: #24748c \9 ;
}

.btn-inverse {
  background-color: #414141;
  background-image: linear-gradient(to bottom, #555555, #222222);
  background-repeat: repeat-x;
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn-inverse:hover,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  background-color: #222222;
}

.btn-inverse:active,
.btn-inverse.active {
  background-color: #080808 \9 ;
}

button.btn::-moz-focus-inner,
input[type=submit].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.btn-group {
  position: relative;
}

.btn-group:before,
.btn-group:after {
  display: table;
  content: "";
}

.btn-group:after {
  clear: both;
}

.btn-group + .btn-group {
  margin-left: 5px;
}

.btn-toolbar {
  margin-top: 9px;
  margin-bottom: 9px;
}

.btn-toolbar .btn-group {
  display: inline-block;
}

.btn-group > .btn {
  position: relative;
  float: left;
  margin-left: -1px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.dropdown-toggle-header {
  overflow: hidden;
  min-width: 138px;
  max-width: 138px;
  font-weight: 500;
  color: #555;
}
@media (max-width: 620px) {
  .dropdown-toggle-header {
    font-size: 10px;
    font-weight: normal;
  }
}

.btn-group > .btn:first-child {
  margin-left: 0;
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}

.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.btn-group > .btn.large:first-child {
  margin-left: 0;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}

.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
  z-index: 2;
}

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}

.btn-group > .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}

.btn-group > .btn-mini.dropdown-toggle {
  padding-right: 5px;
  padding-left: 5px;
}

.btn-group > .btn-large.dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}

.btn-group.open .dropdown-toggle {
  background-image: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-group.open .btn.dropdown-toggle {
  background-color: #e6e6e6;
}

.btn-group.open .btn-primary.dropdown-toggle {
  background-color: #0055cc;
}

.btn-group.open .btn-warning.dropdown-toggle {
  background-color: #f89406;
}

.btn-group.open .btn-danger.dropdown-toggle {
  background-color: #bd362f;
}

.btn-group.open .btn-success.dropdown-toggle {
  background-color: #51a351;
}

.btn-group.open .btn-info.dropdown-toggle {
  background-color: #2f96b4;
}

.btn-group.open .btn-inverse.dropdown-toggle {
  background-color: #222222;
}

.btn .caret {
  margin-top: 7px;
  margin-left: 0;
}

.btn:hover .caret,
.open.btn-group .caret {
  opacity: 1;
}

.btn-mini .caret {
  margin-top: 5px;
}

.btn-small .caret {
  margin-top: 6px;
}

.btn-large .caret {
  margin-top: 6px;
  border-top-width: 5px;
  border-right-width: 5px;
  border-left-width: 5px;
}

.btn-side {
  box-sizing: border-box;
  font-weight: bold;
  color: #fff !important;
  padding: 8px;
  margin-bottom: 2.5rem;
  font-size: 1.35rem;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
}

.dropup .btn-large .caret {
  border-top: 0;
  border-bottom: 5px solid #000000;
}

.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
  opacity: 0.75;
}

/* Hack to fix current chrome release - not needed by canary */
.js-editable-text {
  float: left;
  outline: 1px solid transparent;
}

/*
    10/09/20 .button conflicts with Monaco buttons 
    was used for edit-in-place. should no longer be used
*/
.button:hover {
  border-color: #999;
  color: #000;
}

.button-positive {
  color: #48A055;
  border-color: #48A055;
}

button.button-positive:hover {
  border-color: #48A055 !important;
  color: #48A055 !important;
}

.js-make-editable.is-disabled {
  opacity: 0.3;
  pointer-events: none !important;
}

.in-place-editing {
  line-height: 1;
  padding: 2px 0;
  background: #DEFFD6;
  outline: none;
  color: #000;
  border-bottom: 1px dotted #333;
}

.js-save-make-editable .spinner-svg {
  position: relative;
  top: 1px;
  left: 3px;
}

/* --------------------------------------------------------------------------
 *  JS Toggle state buttons (Notifications)
----------------------------------------------------------------------------- */
.js-btn-hovers .btn {
  min-width: 20px;
}

.btn-cancel {
  margin-left: 6px;
  opacity: 0.6;
  font-weight: normal !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.btn-cancel:hover {
  opacity: 1;
}

.btn-cancel.btn-danger {
  color: #cc3333;
  opacity: 1;
  text-shadow: none;
  transition: none;
}

.btn-cancel.btn-danger:hover {
  color: #fff;
}

.btn-img-cap {
  margin: 0 1rem;
  position: relative;
  top: -6px;
  font-weight: 500;
  font-size: 1.65rem;
}

/* Other button states
----------------------------------------------------------------------------- */
.button-small {
  padding: 5px 7px;
}

.button-submitting {
  opacity: 0.75;
}

/* CTA Butons outside of a form
----------------------------------------------------------------------------- */
.ActionGroup {
  font-size: 1.6rem;
  color: #777;
}
.ActionGroup a {
  margin: 0 1.2rem;
}
.ActionGroup a:first-child {
  margin-left: 0 !important;
}
.ActionGroup .action-separator {
  display: inline-block;
  margin: 0 0.65em;
}

.CardDetail {
  display: flex;
  min-height: 73px;
  padding: 16px;
  text-align: left;
}
@media only screen and (max-width: 1023px) {
  .CardDetail {
    min-height: auto;
  }
}
.CardDetail:hover .CardDetail-title {
  color: #0969DA !important;
}
.CardDetail .CardDetail-logo {
  width: 40px;
  height: 40px;
}
.CardDetail .CardDetail-text {
  padding-left: 12px;
  font-size: 13px;
}
.CardDetail .CardDetail-textColumn {
  padding-left: 25px;
  font-size: 13px;
}
.CardDetail .CardDetail-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1;
  color: #000;
}

/**
 * CARD's
 * Starting to abstract cards out of module
 */
.CardsIntro {
  margin-bottom: 30px;
}
.CardsIntro .CardsIntro-heading {
  font-size: 16px;
  font-weight: bold;
}
.CardsIntro p.CardsIntro-text {
  font-size: 15px;
  color: #000;
  margin: 0 0 14px;
}

.CardHeading {
  line-height: 1;
  margin: -4px 0 16px 0;
  padding-left: 2px;
  font-weight: 500;
  font-size: 15px;
  color: #32383f;
}

.CardSubHeading {
  line-height: 1;
  margin: 6px 0 10px 0;
  padding-left: 2px;
  font-weight: 500;
  font-size: 14px;
  color: #32383f;
}

/* ===========================================================================================
 *  Carousel
 *  Use cases: Onboarding modal for vimeo iframes
============================================================================================== */
/*
    Main carousel containing slides
 */
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner > .item {
  position: relative;
  display: none;
  transition: 0.6s ease-in-out left;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    transition: transform 0.6s ease-in-out;
    backface-visibility: hidden;
    perspective: 1000px;
  }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
    left: 0;
    transform: translate3d(100%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
    left: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .carousel-inner > .item.next.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    left: 0;
    transform: translate3d(0, 0, 0);
  }
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}

.carousel-inner > .active {
  left: 0;
}

.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}

.carousel-inner > .next {
  left: 100%;
}

.carousel-inner > .prev {
  left: -100%;
}

.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}

.carousel-inner > .active.left {
  left: -100%;
}

.carousel-inner > .active.right {
  left: 100%;
}

/*
    Slide left / right controls
 */
.carousel-control {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5%;
  font-size: 24px;
  color: #999;
  text-align: center;
  outline: none;
}
.carousel-control .chevron-right,
.carousel-control .chevron-left {
  position: absolute;
  top: 55%;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
}
.carousel-control .chevron-left {
  left: 5px;
}
.carousel-control .chevron-right {
  right: 5px;
}

.carousel-control.right {
  right: 0;
  left: auto;
}

.carousel-control:hover {
  color: #000;
  text-decoration: none;
  outline: 0;
}

.carousel-control:focus {
  outline: none;
}

/*
    Bottom slide position indicator and control
 */
.carousel-indicators {
  position: absolute;
  bottom: -70px;
  left: 50%;
  z-index: 15;
  width: 60%;
  padding-left: 0;
  margin-left: -30%;
  text-align: center;
  list-style: none;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.carousel-indicators li.active {
  width: 12px;
  height: 12px;
  margin: 0;
  background-color: #000;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.carousel-caption .btn {
  text-shadow: none;
}

@media screen and (min-width: 768px) {
  .carousel-control .chevron-left,
  .carousel-control .chevron-right {
    width: 30px;
    height: 30px;
    margin-top: -10px;
    font-size: 30px;
  }
  .carousel-control .chevron-left {
    margin-left: -10px;
  }
  .carousel-control .chevron-right {
    margin-right: -10px;
  }
  .carousel-caption {
    right: 20%;
    left: 20%;
    padding-bottom: 30px;
  }
}
.Slide {
  overflow: hidden;
  height: 500px;
}
.Slide .Slide-title {
  margin: 1.6em 2.4em 2em 2.4em;
  line-height: 1;
}
.Slide .Slide-heading {
  font-size: 1.6rem;
}
.Slide .Slide-heading, .Slide h4 {
  font-weight: 500;
  color: #000;
  padding: 0 0 0.4em 0;
}
.Slide h4 {
  font-size: 1.5rem;
}
.Slide .Slide-lead {
  font-size: 1.7rem;
  color: #999;
}
.Slide strong {
  color: #000;
  font-weight: 600;
}
.Slide p {
  font-size: 1.5rem;
  line-height: 1.5;
  color: #666;
  padding-right: 1em;
  margin-bottom: 1.3em;
}
.Slide .Slide-textLrg {
  font-size: 1.6rem;
  margin-bottom: 1.4em;
}
.Slide li {
  color: #777;
  font-size: 1.4rem;
  padding: 2px 0;
}
.Slide li p {
  font-size: 1.4rem;
  margin-bottom: 1.2em;
}

.Slide-content {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 3.8em;
  padding-right: 3.8em;
}

.ChartNav {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 22px;
  background: #FAFBFC;
  line-height: 1;
  border: 1px solid #efefef;
  border-radius: 6px;
  line-height: 1;
  font-size: 14px;
}
.ChartNav .ChartNav-link {
  position: relative;
  top: 2px;
  display: inline-block;
  text-decoration: none;
  margin: 0 20px 0 0;
  color: #0a2540;
  font-size: 13px;
}
.ChartNav .ChartNav-link:hover {
  color: #427dc4;
}
.ChartNav .ChartNav-link--active {
  padding-bottom: 4px;
  border-bottom: 2px solid #000;
  color: #000;
  outline: none;
}
.ChartNav .ChartNav-link--active:hover {
  color: #000;
}
.ChartNav .ChartNav-icon {
  margin-left: 6px;
}

.Chart {
  padding: 0 8px;
}
.Chart .Chart-item {
  margin-bottom: 16px;
}
.Chart .Chart-item .Chart-title {
  font-size: 14px;
  font-weight: 600;
}

/* SWITCH - Style a checkbox as a switch
   ========================================================================== */
.SwitchWrap {
  display: inline-block;
  vertical-align: middle;
}

.SwitchWrap-label {
  cursor: pointer;
  padding: 0 0.7em;
  display: inline-block;
  vertical-align: middle;
  color: #b2b2b2;
  font-weight: 500;
}

.SwitchWrap--a .SwitchWrap-label--a {
  color: #41b545;
}

.SwitchWrap--b .SwitchWrap-label--b {
  color: #41b545;
}

/* The Switch - the box around the slider */
.Switch {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 34px;
  vertical-align: middle;
}

/* Hide default HTML checkbox */
.Switch-input {
  display: none;
}

/* The slider */
.Switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #43ba47;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.Switch-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.Switch-input:checked + .Switch-slider {
  background-color: #43ba47;
}

.Switch-input:focus + .Switch-slider {
  box-shadow: 0 0 1px #43ba47;
}

.Switch-input:checked + .Switch-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.Switch-slider--round {
  border-radius: 34px;
}

.Switch-slider--round:before {
  border-radius: 50%;
}

/* Used by monthly / Annual price comparison */
.js_annual {
  display: none;
}

.Billing.is-annual .js_annual {
  display: block;
}
.Billing.is-annual .js_monthly {
  display: none;
}

/* ==========================================================================
   iOS like switch
   ========================================================================== */
.FormSwitch {
  display: inline-block;
  cursor: pointer;
  margin: 0 4px 0 0;
  -webkit-tap-highlight-color: transparent;
}
.FormSwitch .FormSwitch-checkbox {
  display: none !important;
}

.FormSwitch i.FormSwitch-switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6; /* border color disabled */
  border-radius: 23px;
  transition: all 0.3s linear;
}

.FormSwitch i.FormSwitch-switch::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #f4f4f4 !important; /* disabled control background color */
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.FormSwitch i.FormSwitch-switch::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
}

.FormSwitch:active i.FormSwitch-switch::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}

/* Checked state of switch */
.FormSwitch:active input:checked + i.FormSwitch-switch::after {
  transform: translate3d(16px, 2px, 0);
}

.FormSwitch input:checked + i.FormSwitch-switch {
  background-color: #4BD763;
}

.FormSwitch input:checked + i.FormSwitch-switch::before {
  transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}

.FormSwitch input:checked + i.FormSwitch-switch::after {
  transform: translate3d(22px, 2px, 0);
}

.FormSwitch-label {
  position: relative;
  top: 1px;
  padding-left: 4px;
  font-size: 11px;
}

/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.4.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2015 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/
/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.chosen-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}

.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}

.chosen-container a {
  cursor: pointer;
}

.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
  color: #999999;
}

.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single {
  margin-bottom: 12px;
}

.chosen-container-single .chosen-single {
  min-height: 32px;
  background: #fcfcfc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
  box-sizing: border-box;
  background-size: 8px 10px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  border: 1px solid #C1C1C1;
  border-radius: 3px;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  padding: 0 0 0 12px;
  position: relative;
  display: block;
  overflow: hidden;
  background-clip: padding-box;
  color: #444;
  text-decoration: none;
  white-space: nowrap;
  line-height: 32px;
}

.chosen-container-single .chosen-default {
  color: #999;
}

.chosen-container-single .chosen-single span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chosen-container-single .chosen-single-with-deselect span {
  margin-right: 38px;
}

.chosen-container-single .chosen-single abbr {
  position: absolute;
  top: 6px;
  right: 26px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("/assets/app/chosen-sprite-c0507d435c14daf69c535cca437ddacd5ea8469a.png") -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-single .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
  background-position: -42px -10px;
}

.chosen-container-single .chosen-single div {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 18px;
  height: 100%;
}

.chosen-container-single .chosen-search {
  position: relative;
  z-index: 1010;
  margin: 0;
  padding: 3px 4px;
  white-space: nowrap;
}

.chosen-container-single .chosen-search input[type=text] {
  margin: 1px 0;
  padding: 4px 20px 4px 5px;
  width: 100%;
  height: auto;
  outline: 0;
  border: 1px solid #aaa;
  background: white url("/assets/app/chosen-sprite-c0507d435c14daf69c535cca437ddacd5ea8469a.png") no-repeat 100% -20px;
  background: url("/assets/app/chosen-sprite-c0507d435c14daf69c535cca437ddacd5ea8469a.png") no-repeat 100% -20px;
  font-size: 1em;
  line-height: normal;
  border-radius: 2px;
}

.chosen-container-single .chosen-drop {
  margin-top: -1px;
  border-radius: 0 0 3px 3px;
  background-clip: padding-box;
}

.chosen-container-single.chosen-container-single-nosearch .chosen-search {
  position: absolute;
  left: -9999px;
}

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  color: #444;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  line-height: 15px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
}

.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
}

.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}

.chosen-container .chosen-results li.highlighted {
  color: #fff;
  text-decoration: none;
  background: #0088cc;
  background-repeat: repeat-x;
  color: #fff;
}

.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}

.chosen-container .chosen-results li.group-result {
  display: list-item;
  font-weight: bold;
  cursor: default;
}

.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}

.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  background-color: #fcfcfc;
  border: 1px solid #C1C1C1;
  border-radius: 3px;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  color: #000;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 2px 5px;
  width: 100%;
  height: auto !important;
  height: 1%;
  cursor: text;
}

.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  margin: 1px 0;
  padding: 0;
  height: 25px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #999;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}

.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 3px 5px 3px 0;
  padding: 4px 20px 4px 5px;
  border: 1px solid rgba(188, 214, 244, 0.7333333333);
  max-width: 100%;
  border-radius: 3px;
  background-color: #F1F8FF;
  background-size: 100% 19px;
  background-repeat: repeat-x;
  background-clip: padding-box;
  box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #555;
  line-height: 13px;
  cursor: default;
  font-size: 1.2rem;
}

.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 5px;
  right: 3px;
  display: block;
  width: 11px;
  height: 11px;
  background: url("/assets/app/chosen-sprite-c0507d435c14daf69c535cca437ddacd5ea8469a.png") -42px 1px no-repeat;
  font-size: 1px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  border: 1px solid #ccc;
  background-color: #e4e4e4;
  color: #666;
}

.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}

.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}

/* @end */
/* @group Active  */
.chosen-container-active .chosen-single {
  background-color: #fff;
  border: 1px solid rgba(82, 168, 236, 0.8);
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.2); /* blue box-shadow */
}

.chosen-container-active.chosen-with-drop .chosen-single {
  border: 1px solid #aaa;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
  box-shadow: 0 1px 0 #fff inset;
}

.chosen-container-active.chosen-with-drop .chosen-single div {
  border-left: none;
  background: transparent;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
  background-position: -18px 2px;
}

.chosen-container-active .chosen-choices {
  border: 1px solid rgba(82, 168, 236, 0.8);
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.2); /* blue box-shadow */
}

.chosen-container-active .chosen-choices li.search-field input[type=text] {
  color: #222 !important;
}

/* @end */
/* @group Disabled Support */
.chosen-disabled {
  opacity: 0.5 !important;
  cursor: default;
}

.chosen-disabled .chosen-single {
  cursor: default;
}

.chosen-disabled .chosen-choices .search-choice .search-choice-close {
  cursor: default;
}

/* @end */
/* @group Right to Left */
.chosen-rtl {
  text-align: right;
}

.chosen-rtl .chosen-single {
  overflow: visible;
  padding: 0 8px 0 0;
}

.chosen-rtl .chosen-single span {
  margin-right: 0;
  margin-left: 26px;
  direction: rtl;
}

.chosen-rtl .chosen-single-with-deselect span {
  margin-left: 38px;
}

.chosen-rtl .chosen-single div {
  right: auto;
  left: 3px;
}

.chosen-rtl .chosen-single abbr {
  right: auto;
  left: 26px;
}

.chosen-rtl .chosen-choices li {
  float: right;
}

.chosen-rtl .chosen-choices li.search-field input[type=text] {
  direction: rtl;
}

.chosen-rtl .chosen-choices li.search-choice {
  margin: 3px 5px 3px 0;
  padding: 3px 5px 3px 19px;
}

.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
  right: auto;
  left: 4px;
}

.chosen-rtl.chosen-container-single-nosearch .chosen-search,
.chosen-rtl .chosen-drop {
  left: 9999px;
}

.chosen-rtl.chosen-container-single .chosen-results {
  margin: 0 0 4px 4px;
  padding: 0 4px 0 0;
}

.chosen-rtl .chosen-results li.group-option {
  padding-right: 15px;
  padding-left: 0;
}

.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
  border-right: none;
}

.chosen-rtl .chosen-search input[type=text] {
  padding: 4px 5px 4px 20px;
  background: white url("/assets/app/chosen-sprite-c0507d435c14daf69c535cca437ddacd5ea8469a.png") no-repeat -30px -20px;
  background: url("/assets/app/chosen-sprite-c0507d435c14daf69c535cca437ddacd5ea8469a.png") no-repeat -30px -20px;
  direction: rtl;
}

.chosen-rtl.chosen-container-single .chosen-single div b {
  background-position: 6px 2px;
}

.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
  background-position: -12px 2px;
}

/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .chosen-rtl .chosen-search input[type=text],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type=text],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url("/assets/app/chosen-sprite@2x-91db8c19c925e07f034e2ccef204c30b1b3c2b7d.png") !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}
/* @end */
.chosen--error {
  border: 1px solid #cc3333;
  border-radius: 2px;
}
.chosen--error .default {
  color: #cc3333;
}

.Form-item--multiple .chosen-container-multi .chosen-choices {
  padding: 8px;
}

.Form-item--multiple .chosen-container-multi .chosen-choices li.search-choice {
  line-height: 18px;
  margin: 3px 5px 3px 0;
  padding: 8px 20px 8px 8px;
  border: 1px solid #bbb;
  border-radius: 3px;
  background-color: #fafafa;
  background-color: #fff;
  font-size: 1.3rem;
  background-size: auto;
  padding-left: 30px !important;
}
.Form-item--multiple .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  background: rgba(0, 0, 0, 0) url("/assets/app/chosen-sprite.png") no-repeat scroll -42px 1px;
  position: absolute;
  right: 4px;
  top: 13px;
  width: 12px;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  font-size: 1.3rem;
}

.Form-item--multiple .chosen-container-multi li.search-field input[type=text] {
  height: 42px;
}

/* read-only chosen e.g. user permissions show view */
.chosen--readOnly .chosen-choices {
  padding: 0;
  border: none !important;
  box-shadow: none !important;
}
.chosen--readOnly .chosen-choices:hover {
  background-color: transparent !important;
}
.chosen--readOnly li.search-choice {
  padding-right: 6px !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.chosen--readOnly .search-choice-close {
  display: none !important;
}

.Module--fill .chosen-container-single {
  margin-bottom: 0;
}
.Module--fill .chosen-container-single .chosen-single {
  background-color: #fff;
}

/**
 * CLUSTERS THEME
 * Rack pages use a darker UI theme. This is a visual cue that acts as a differentiator.
 * Individual components can use a modifier e.g. .Nav--dark or .HeaderNav--dark.
 * There is also a global body class .t-dark. This can use used override ALL components
 */
/**
 * Global Vars
 */
/**
 * Theme Dark body class
 * t-dark is a global body class that can be used to override all components
 * only used for cluster pages
 */
.t-dark .Tabs-item.active .Tabs-link,
.t-dark .Main {
  background: #fcfeff;
}
.t-dark .Cluster {
  border-color: #d0dce0;
}
.t-dark .Module:not(.Module--callout):not(.Module--positive):not(.Module--negative):not(.Module--amber):not(.Module--dark) {
  border-color: #d0dce0;
}
.t-dark .Module:not(.Module--callout):not(.Module--positive):not(.Module--negative):not(.Module--amber):not(.Module--dark) .Module-title {
  color: #283340;
}
.t-dark .Module:not(.Module--callout):not(.Module--positive):not(.Module--negative):not(.Module--amber):not(.Module--dark) .Module-header,
.t-dark .Module:not(.Module--callout):not(.Module--positive):not(.Module--negative):not(.Module--amber):not(.Module--dark) .Form-actions,
.t-dark .Module:not(.Module--callout):not(.Module--positive):not(.Module--negative):not(.Module--amber):not(.Module--dark) .form-actions {
  border-color: #d0dce0;
}
.t-dark .Module:not(.Module--callout):not(.Module--positive):not(.Module--negative):not(.Module--amber):not(.Module--dark) .Module-header.Module-header--pri {
  background-color: #F6F8FA;
}
.t-dark .Button--deleteOutlined {
  background: #fcfeff;
}
.t-dark .Button--deleteOutlined:hover, .t-dark .Button--deleteOutlined:focus {
  background-color: #cc3333;
}

/**
 * Cluster Component (Clusters Index)
 *
 * Cluster can be combined with generic tabular layout component
 * Use Case: Used for Cluster specific styling in the Cluster Dashboard
 */
.Cluster {
  overflow: hidden;
  position: relative;
  padding: 12px;
}

.ModuleStatus {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background: transparent;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.ModuleStatus--left {
  z-index: 10;
  height: 100%;
  top: 0;
  bottom: 0;
  width: 3px;
}

.Cluster-header {
  padding-left: 5px;
}

.Cluster-titleMsg {
  font-size: 11px;
}

.Cluster-apps {
  column-count: 2;
  column-gap: 0;
}
.Cluster-apps li {
  line-height: 1.1;
}

/*
    Cluster Status RAG
*/
.Cluster- .ModuleStatus {
  background: #546168;
}

.Cluster--red .Tabular-titleInline {
  color: rgb(203, 36, 49);
}
.Cluster--red .ModuleStatus {
  background: #E01F22;
}

.Cluster--amber .Tabular-titleInline {
  color: #EA8407;
}
.Cluster--amber .ModuleStatus {
  background: #EA8407;
}

.Cluster--green .ModuleStatus {
  background: rgb(40, 167, 69);
}

/*
 Generic Module status
*/
.ModuleStatus--Failed {
  background: #E01F22;
}

/*
    Additional Cluster Components
*/
.Cluster-spinner {
  top: 2px;
}

.Cluster-score {
  top: 3px;
}

/* ==========================================================================
 *  COMMON MIXINS AND INCLUDES
========================================================================== */
/* =============================================================================
   COPY TYPOGRAPHY
   Styles for text articles and modules
   ========================================================================== */
pre, code, kbd, samp, .samp, .code {
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
}

.kbd,
.samp {
  padding: 1px 2px;
  font-weight: 500;
  color: #000;
  background: #EFEFEF;
  border-radius: 3px;
}

.samp--dark {
  background: #1E293B;
  color: #fff;
}

.code-small {
  font-size: 0.9rem;
}
.code-small p {
  font-size: 0.9rem;
  line-height: 1;
}

.code-para {
  margin: 1.75em 0;
}

.code-dark {
  background: #4B555D;
  padding: 0.3em;
  border-radius: 2px;
  color: #f8f8f8;
}

.code--lighter {
  color: #ccc;
}

.code--hilited {
  color: #f9fe64;
}

.page-header h1 {
  font-size: 26px;
  font-weight: 400;
  color: #333;
  text-shadow: 0 1px 0 #fff;
  text-rendering: optimizeLegibility;
}

.page-header h1 small {
  text-shadow: none;
  font-weight: 200;
  font-size: 28px;
  color: #333;
  letter-spacing: 0;
}

.small-print {
  color: #666;
  font-size: 12px;
}

.tiny {
  font-size: 11px;
}

hr.padded-division {
  margin: 2em 0 !important;
}

hr.form-rule {
  background-color: #EDEDED;
  height: 1px;
}

.text-article.legal p:not(.lead) {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.text-article.legal li {
  font-size: 14px;
}

.em-divider {
  padding: 0 2px;
  font-weight: 500;
  letter-spacing: 0.55px;
}

.text-article {
  color: #555;
  /*--- HEADINGS ---*/
}
.text-article p {
  color: #555;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 14px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
.text-article p.small {
  font-size: 14px !important;
  color: #666;
}
.text-article .lead {
  font-size: 2.2rem;
  color: #666;
}
.text-article .lead-sub {
  font-size: 16px;
}
.text-article .list-lower-divider li {
  border-bottom: 1px solid #E5E5E5;
  border-top: 1px solid #fff;
  margin-bottom: 0;
  padding: 4px 0;
}
.text-article img {
  vertical-align: middle;
  border: 0;
}
.text-article ul {
  margin: 22px 0 22px 18px;
}
.text-article ul ul {
  margin: 12px 0;
}
.text-article ul li {
  list-style-type: disc;
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}
.text-article ul li li {
  list-style-type: circle;
}
.text-article .primary-list li {
  margin: 0 0 1.8rem;
}
.text-article .primary-list-item--wide {
  padding-right: 20em;
}
.text-article ol {
  margin: 8px 0 14px 18px;
}
.text-article ol li {
  list-style-type: decimal;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 6px;
}
.text-article .structural {
  margin: 0;
}
.text-article .structural li {
  list-style: none;
}
.text-article li {
  display: list-item;
}
.text-article h2, .text-article h2, .text-article h3 {
  font-family: "Helvetica Neue", Helvetica Neue, Helvetica, arial, sans-serif;
  color: #111;
  font-weight: 400;
}
.text-article h1, .text-article .alpha {
  margin-bottom: 16px;
  font-weight: 200;
  font-size: 36px;
  line-height: 1;
  color: #000;
}
.text-article .divider-title {
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
}
.text-article .doc-title {
  border-bottom: 1px solid #ddd;
  padding-bottom: 2px;
}
.text-article .section-title {
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  margin-bottom: 0;
}
.text-article h1.doc-title {
  padding-bottom: 12px;
}
.text-article h2, .text-article .beta {
  font-size: 26px;
  line-height: 1.6;
}
.text-article h3, .text-article .gamma {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 4px;
}
.text-article h4, .text-article .delta {
  font-size: 18px; /* 18px */
  line-height: 1.333; /* 24px */
  margin-bottom: 8px;
}
.text-article h5, .text-article .epsilon {
  font-weight: bold;
}
.text-article h5, .text-article .epsilon,
.text-article h6, .text-article .zeta {
  font-size: 1em; /* 16px */
  line-height: 1.5; /* 24px */
}

.text-article h2:target,
.text-article h3:target,
.text-article h4:target {
  -webkit-animation: target-fade 2s 1;
  -moz-animation: target-fade 2s 1;
}

@-webkit-keyframes target-fade {
  0% {
    background-color: rgba(0, 0, 0, 0.1);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
@-moz-keyframes target-fade {
  0% {
    background-color: rgba(255, 246, 0, 0.2);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
@keyframes target-fade {
  0% {
    background-color: rgba(255, 246, 0, 0.2);
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
  }
}
.text-module {
  color: #444;
  font-size: 14px;
}
.text-module .darker {
  color: #000;
}
.text-module .lighter {
  color: #999;
}
.text-module h1, .text-module h2, .text-module h2, .text-module h3 {
  font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
  color: #49545B;
  font-weight: 300;
}
.text-module .media-header {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 16px;
}
.text-module .lead-sub {
  font-size: 16px;
}
.text-module p {
  color: #555;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.sub-text-module {
  font-size: 1.4rem;
  color: #666;
}
.sub-text-module p {
  font-size: 1.4rem;
}
.sub-text-module p:only-child {
  margin-bottom: 0;
}
.sub-text-module .sub-lead {
  font-size: 1.6rem;
  font-weight: 215;
}
.sub-text-module h4 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  color: #555;
}
.sub-text-module ul, .sub-text-module ol {
  margin: 4px 0 14px 14px;
}
.sub-text-module ul li, .sub-text-module ol li {
  list-style-type: disc;
  line-height: 1.4;
  font-size: 1.4rem;
}
.sub-text-module strong {
  color: #555;
}

.text-footer {
  padding-top: 22px;
}

/*  Tabular dashboard
----------------------------------------------------- */
.js_dropdown_spinner {
  display: none;
}

table.multi-select_active li.js_dropdown_text {
  display: none;
  background: red;
}
table.multi-select_active li.js_dropdown_spinner {
  display: block;
}

/*
----------------------------------------------------- */
/* =====================================================================================
   SKYCAP SNAPSHOTS v2 (Oct 2019) - Still used
   ====================================================================================== */
.ModuleSectionTitle {
  font-size: 14px;
  margin-bottom: 14px !important;
}

.PagerLinks {
  padding-top: 18px;
  padding-bottom: 18px;
}
.PagerLinks .PagerLinks-seperator {
  margin-right: 9px;
  margin-left: 9px;
  color: rgba(88, 97, 105, 0.6);
}
.PagerLinks a:hover {
  text-decoration: none;
}

.Snap-statusIcon {
  position: relative;
  top: 3px;
}

.Snap-icon {
  position: relative;
  top: 3px;
  display: inline-block;
  margin-right: 3px;
}

/*  Left Drawer Component
 *  Add 'Drawer--open' to display the content
----------------------------------------------------- */
:root {
  --drawer-title-color: #13161b;
  --drawer-title-bg-color: #FAFBFC;
}

.Drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  height: 100%;
  visibility: hidden;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.85rem 0 rgba(0, 0, 0, 0.3);
  transition-property: all;
  transition-duration: 400ms;
  transition-timing-function: ease-out;
  transform: translateX(-880px);
  width: 51%;
  max-width: 900px;
}
@media only screen and (max-width: 1260px) {
  .Drawer {
    width: 100%;
  }
}

.Drawer--small {
  max-width: 680px;
  transform: translateX(-680px);
}

.Drawer--medium {
  width: 60%;
  max-width: 950px;
  transform: translateX(-950px);
}
@media only screen and (max-width: 1023px) {
  .Drawer--medium {
    width: 100% !important;
  }
}

.Drawer--wide {
  width: 70%;
  max-width: 1023px;
  transform: translateX(-1023px);
}
@media only screen and (max-width: 1023px) {
  .Drawer--wide {
    width: 100% !important;
  }
}

.Drawer--fullWidth {
  width: 100%;
  max-width: 100%;
  transform: translateX(-100%);
}
@media only screen and (max-width: 1023px) {
  .Drawer--fullWidth {
    width: 100% !important;
  }
}

.Drawer--fullScreen {
  width: 100%;
  max-width: 100%;
  opacity: 0;
  transition: visibility 0.3s linear, opacity 0.3s linear;
}

.Drawer--open {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}

.Drawer-header {
  position: relative;
  padding: 19px 20px;
  background-color: #FAFBFC;
  border-bottom: 1px solid #efefef;
  color: #13161b;
}
.Drawer-header .Drawer-close {
  line-height: 1 !important;
  position: absolute;
  top: 6px;
  right: 16px;
  font-size: 34px;
  font-weight: 100 !important;
  color: #ccc;
}
.Drawer-header .Drawer-close:hover {
  text-decoration: none;
  color: #999;
}

.Drawer-close {
  position: absolute;
  top: 16px;
  font-size: 16px;
  font-weight: 500;
}

.Drawer-body {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 22px;
  padding-left: 22px;
  height: 85vh;
  /* take into account fixed position area for the heading*/
  overflow: auto;
}
.Drawer-body .Form-fieldset {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 20px;
}
.Drawer-body fieldset:first-of-type {
  padding-top: 0 !important;
}
.Drawer-body p {
  margin: 0 0 10px 0;
}

.Drawer-body--padded {
  padding: 32px;
}

.Drawer-title {
  margin: 0;
  line-height: 1;
  font-size: 16px;
  font-weight: bold;
  color: var(--drawer-title-color);
}

.Drawer-heading {
  line-height: 1.1;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
}

.Drawer-MainHeading {
  line-height: 1.3;
  padding-top: 10px;
  padding-bottom: 22px;
  font-size: 15px;
  font-weight: 700;
}

.Drawer-help {
  position: absolute;
  top: 17px;
  right: 54px;
  font-size: 12px;
}
.Drawer-help .Drawer-helpIcon {
  position: relative;
  top: 2px;
}
.Drawer-help .Drawer-helpText {
  padding-left: 2px;
  line-height: 1;
  font-weight: 500;
}

.Drawer-subHeading {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 8px;
}

.Drawer-MainHeadingImage {
  position: relative;
  top: 3px;
  margin-right: 14px;
}

.Drawer-section {
  padding-bottom: 16px;
}

.Drawer-footer {
  border-top: 1px solid #eee;
  margin-top: 12px;
  padding-top: 26px;
}
@media (max-width: 620px) {
  .Drawer-footer {
    padding-bottom: 44px;
  }
}

.Drawer-footer--lessMargin {
  margin-top: 6px;
}

.Drawer-footer--noDivider {
  border-top: none;
  padding-top: 16px;
}

.Drawer-divider {
  margin-top: 0 !important;
  margin-bottom: 18px;
}

.Drawer .Form-listStacked .Form-item {
  margin-bottom: 16px;
}

/* stop page beneath overlay scrolling */
body.body-draw-open {
  overflow-y: hidden;
}

/* fully blocking overlay */
body.body-draw-block .Drawer-header .js_close_drawer {
  display: none;
}

/* Text article content within a drawer overlay */
article.DrawerArticle {
  padding: 28px 0;
}
article.DrawerArticle p {
  margin: 0 0 14px 0;
}

.DeploymentTargetDrawer .Form-fieldHelp--onboarding {
  margin-top: 8px;
  margin-bottom: 18px;
}

/* ==========================================================================
   SIDEBAR DROPDOWN
   ========================================================================== */
.ButtonMenuLabel {
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 0.6em;
}

.ButtonMenu {
  position: relative;
}
.ButtonMenu .Button:focus {
  outline: none;
}

.ButtonMenu--bottomMargin {
  margin-bottom: 12px;
}

.ButtonMenu-arrow {
  position: absolute;
  right: 10px;
  top: -14px;
  clip: rect(0px, 18px, 14px, -4px);
}

.ButtonMenu-arrow::after {
  background: #fff;
  content: "";
  display: block;
  height: 14px;
  width: 14px;
  box-shadow: -1px -1px 1px -1px rgba(0, 0, 0, 0.55);
  transform: rotate(45deg) translate(6px, 6px);
  -webkit-transform: rotate(45deg) translate(6px, 6px);
}

.ButtonMenu-dropDown {
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  width: 100%;
  position: absolute;
  top: 3.7em;
  right: 0px;
  padding: 0.35em 0 0.35em 0;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.45);
  transition: all 0.1s ease-in-out;
  transform: scale(0.8);
}

.ButtonMenu-dropDown.ButtonMenu-dropDown--header {
  top: 3.3em;
}

.ButtonMenu--link .ButtonMenu-dropDown {
  top: 34px;
}
.ButtonMenu--link .ButtonMenu--linkIcon {
  margin-right: 3px;
}

.ButtonMenu-icon {
  position: relative;
  top: 1px;
  width: 12px !important;
  height: 12px !important;
  margin-right: 5px;
  color: #546168;
}

.Button--pri .ButtonMenu-icon {
  color: #fff;
}

.webkit .ButtonMenu-dropDown {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 0, 0, 0.45);
}

.ButtonMenu-dropDown--wide {
  width: 150%;
}
.ButtonMenu-dropDown--wide .ButtonMenu-field {
  width: 233px;
}

.ButtonMenu-dropDown.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.ButtonMenu-dropDown.is-active.draw-attention {
  transform: scale(1.1);
  z-index: 99999999;
}

.ButtonMenu-dropDown.is-active.draw-attention-done {
  transform: scale(1);
}

.ButtonMenu-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.ButtonMenu-list--scroll {
  max-height: 360px;
  overflow: auto;
}

.ButtonMenu-list--compact {
  padding: 4px 0;
}

/*
    Nested list of menu items
    E.g. Formation & stencil groups dropdown
 */
.ButtonMenu-textItem {
  margin: 0;
  padding: 6px 13px;
  color: #666;
  font-size: 1.3rem;
  color: #666;
}

.ButtonMenu-listItem {
  margin: 0;
  padding: 6px 0;
  color: #666;
  font-size: 13px;
}
.ButtonMenu-listItem:hover {
  color: #000;
  background: #f6f7fa;
}

.ButtonMenu-listItem.ButtonMenu-listItem--subItem {
  padding: 0 13px;
}

.ButtonMenu-link--titleWrap .ButtonMenu-copyIcon {
  display: none;
}

.ButtonMenu-link--titleWrap:hover .ButtonMenu-copyIcon {
  display: inline-block;
}

a.ButtonMenu-link.ButtonMenu-link--title {
  display: inline !important;
}

.Circle.ButtonMenu-circle {
  margin-left: 3px;
}

.ButtonMenuListIndented {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ButtonMenuListIndented .ButtonMenuListIndented-item {
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 8px;
  line-height: 1;
}
.ButtonMenuListIndented .ButtonMenuListIndented-item .ButtonMenu-link {
  display: inline;
  font-size: 1.2rem !important;
}
.ButtonMenuListIndented .ButtonMenuListIndented-item .ButtonMenu-copyIcon {
  display: none;
}
.ButtonMenuListIndented .ButtonMenuListIndented-item:hover .ButtonMenu-copyIcon {
  display: inline-block;
}

.ButtonMenu.ButtonMenu--org {
  min-width: 365px;
  max-width: 365px;
}
.ButtonMenu.ButtonMenu--org .Button {
  float: right;
  min-width: 130px;
  max-width: 310px;
  padding: 9px;
  color: #4b545b;
  font-size: 13px;
  font-weight: 500;
}
@media (max-width: 620px) {
  .ButtonMenu.ButtonMenu--org .Button {
    min-width: 115px;
    max-width: 305px;
    font-size: 11px;
  }
}
.ButtonMenu.ButtonMenu--org .ButtonMenu-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 1px;
  padding-bottom: 1px;
}
.ButtonMenu.ButtonMenu--org .ButtonMenu-dropDown {
  top: 3.3em;
}

.ButtonMenu--org.is-open .Button {
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

/*
     Nested list of menu item for stack card
 */
.DropdownMenu-item {
  padding-top: 2px;
  padding-bottom: 2px;
}
.DropdownMenu-item .ButtonMenuListIndented {
  padding-bottom: 6px;
}

/*
    Padded variation of ButtonMenu-list
 */
.ButtonMenu-groupTitle {
  font-weight: bold;
  padding-left: 14px;
  padding-bottom: 4px;
  padding-top: 6px;
}

.ButtonMenu-list--noHover .ButtonMenu-listItem:hover {
  color: #666;
}
.ButtonMenu-list--noHover .ButtonMenu-listItem .is-clickable:hover {
  color: #000;
}

.ButtonMenu-listItemChild {
  list-style: none;
  padding-top: 6px;
  padding-bottom: 6px;
}

.ButtonMenu-listItemChild:empty {
  display: none;
}

.ButtonMenu-listItem--spacer {
  margin-top: 6px;
}

.ButtonMenu-list--sub .ButtonMenu-listItem {
  padding: 1px 0;
}
.ButtonMenu-list--sub .ButtonMenu-link {
  font-size: 1.2rem;
  color: #777;
}

.ButtonMenu-link {
  padding-left: 16px;
  padding-right: 16px;
  display: block;
  color: #555;
  font-size: 13px;
}
.ButtonMenu-link:hover {
  text-decoration: none;
  color: #000;
}
.ButtonMenu-link:active, .ButtonMenu-link:focus {
  outline: none;
}

.ButtonMenu-link.is-active {
  font-weight: 500;
  color: #000;
}

.ButtonMenu-link--sml {
  font-size: 1.15rem;
}

.ButtonMenu-activeIco {
  display: inline-block;
  margin-right: 6px;
}

.ButtonMenu-title {
  margin: 0;
  line-height: 1;
  padding: 12px 12px 4px 13px;
  color: #000;
  font-weight: 600;
  font-size: 13px;
}

.ButtonMenu-title--indented {
  padding-left: 32px;
}

.ButtonMenu-heading {
  margin: 0;
  padding: 4px 0 0 15px;
  color: #000;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1px;
}

.ButtonMenu-item {
  padding: 3px 0;
}

.ButtonMenu-divider {
  border-top: 1px solid #efefef;
  margin: 2px 30px 2px 30px;
}

.ButtonMenu-divider-dropdown {
  margin: 8px 2px;
}

.ButtonMenu-cta {
  display: block;
  color: #427dc4 !important;
  text-decoration: none;
}

.ButtonMenu-form {
  margin: 0;
  padding: 4px 12px 0 12px;
}

.ButtonMenu-fieldContainer {
  padding: 0.45em 0 1.2em 0;
}

.ButtonMenu-field {
  transition: width 0.05s linear;
  width: 140px;
  width: 74%;
  height: 18px !important;
  margin: 0 !important;
  line-height: normal !important;
  background-color: #fff !important;
  border: 1px solid #D1D1D1;
  border-radius: 2px 0 0 2px !important;
}
.ButtonMenu-field:focus {
  border: 1px solid #ccc !important;
  box-shadow: none !important;
}

.ButtonMenu-btn {
  margin: 0;
  position: relative;
  z-index: 1;
  top: 0;
  left: -6px;
}

/* ==========================================================================
   DROPDOWN MENU
   ========================================================================== */
.dropup,
.dropdown {
  position: relative;
}

.dropdown-toggle:active,
.open .dropdown-toggle {
  outline: 0;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  opacity: 0.5;
}

.caret--med {
  border-top: 5px solid #000000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.caret--small {
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.caret--ico {
  vertical-align: middle;
}

.caret--forward {
  transform: rotate(-90deg);
}

.dropdown .caret {
  margin-left: 2px;
}

.dropdown:hover .caret,
.open .caret {
  opacity: 1;
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

/* Main dropdown menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 180px;
  padding: 14px 0;
  margin: 8px 0 0 !important;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  box-shadow: 0 0 7px rgba(34, 25, 25, 0.2);
  background-clip: padding-box;
  transition: all 0.08s ease-in-out;
  transform: scale(0.9);
}

/*
    This is used for the filterable dropdown of Stencils.
    Should be refactored at the moment it extends the dropdown menu. should be separate
*/
.dropdown-menu--filterable {
  padding-top: 0 !important;
}
.dropdown-menu--filterable a.js-deployment-action {
  padding: 8px 15px !important;
}
.dropdown-menu--filterable .Tag-list > li {
  padding-bottom: 0;
}

.dropdown-menu-title {
  font-size: 13px;
  padding-left: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 500;
  color: #000;
}

.dropdown-form-item {
  position: sticky;
  top: 0;
  padding: 12px;
  margin: -8px 0 0 0;
  background-color: #fff;
  z-index: 2;
}

.dropdown-menu.dropdown-menu--wide {
  min-width: 230px;
}

.dropdown-menu.dropdown-menu--wider {
  min-width: 300px;
}

.menu-divider {
  height: 1px;
  margin: 10px 1px;
  overflow: hidden;
  background-color: #E2E2E2;
  border-bottom: 1px solid #ffffff;
}

.menu-info {
  padding: 0 15px !important;
  color: #aaa;
  font-size: 1.3rem;
}

.menu-text {
  padding: 5px 15px;
  color: #000;
  font-weight: normal;
  font-size: 1.3rem;
  text-align: left;
}

.menu-text-title {
  margin-bottom: 0.5em;
  font-size: 1.3rem;
  font-weight: 500;
  color: rgb(203, 36, 49);
  text-align: left;
}

.menu-action-primary a {
  font-weight: 500 !important;
  color: #000 !important;
  text-align: left;
}

.menu-action {
  text-align: left;
}

.menu-label {
  padding-left: 4px;
}

.menu-action-primary--red a {
  color: rgb(203, 36, 49) !important;
}

.menu-action-primary--green a {
  color: rgb(40, 167, 69) !important;
}

.dropdown-menu .dropdown-menu-item,
.dropdown-menu a:not(.link-external):not(.dropdown-menu-link):not(.Button) {
  display: block;
  padding: 6px 15px;
  clear: both;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.3;
  color: #555;
  white-space: nowrap;
  text-decoration: none !important;
}
.dropdown-menu .dropdown-menu-item:hover,
.dropdown-menu a:not(.link-external):not(.dropdown-menu-link):not(.Button):hover {
  background: #F6F7FA;
  color: #000;
}
.dropdown-menu .dropdown-menu-padded-item a {
  display: block;
  padding: 6px 15px 12px 15px;
  font-size: 13px;
}
.dropdown-menu a.all-disabled {
  color: #ccc !important;
}
.dropdown-menu a.all-disabled i {
  color: #ccc !important;
}
.dropdown-menu a.menu-link {
  color: #427dc4 !important;
}
.dropdown-menu .dropdown-header {
  overflow: hidden;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  font-size: 1.3rem;
  color: #000;
  border-bottom: 1px solid #E2E2E2;
  background: #FCFCFC;
  padding: 10px 15px 10px 15px;
  margin-bottom: 6px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
.dropdown-menu .dropdown-content {
  display: inline-block;
  padding: 5px 15px;
  font-size: 13px;
}
.dropdown-menu .menu-title {
  display: block;
  padding: 10px 15px 4px 15px;
  clear: both;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.3;
  color: #000;
  white-space: nowrap;
  text-transform: uppercase;
}
.dropdown-menu .dropdown-divider {
  margin-top: 10px;
  border-top: 1px solid #E0E0E0;
  display: block;
}
.dropdown-menu .menuitem-link-secondary {
  display: block;
  font-size: 1.2rem !important;
  color: #666 !important;
}
.dropdown-menu .menuitem-link-secondary:hover {
  color: #000 !important;
}
.dropdown-menu li.profile-item a.profile-link {
  padding: 4px 15px !important;
}
.dropdown-menu .dropdown-text {
  font-size: 13px;
  line-height: 1.5;
  padding-bottom: 4px;
  padding-top: 4px;
}
.dropdown-menu .dropdown-title {
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 4px;
  color: #000;
}

.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
  transition: none;
}

.typeahead.dropdown-menu .active > a,
.typeahead.dropdown-menu > li > a:hover,
.typeahead.dropdown-menu > li > a:focus {
  color: #fff;
  text-decoration: none;
  background: #0088cc;
  background-repeat: repeat-x;
}

.typeahead.dropdown-menu .active > a strong {
  color: #fff !important;
  font-weight: bolder;
}

.open > .dropdown-menu {
  display: block;
  transform: scale(1);
}

.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}

.dropdown-menu-nested {
  text-align: left;
}
.dropdown-menu-nested .dropdown-menu-nested-item a {
  font-size: 1.3rem !important;
  padding: 1px 3px 1px 26px !important;
}

/* ==========================================================================
   Stack tools drop-down menu
   ========================================================================== */
.tool-list,
.DropMenu {
  position: relative;
  display: inline-block;
}
.tool-list .DropMenu-link,
.DropMenu .DropMenu-link {
  position: relative;
  top: 2px;
  color: #748b93;
  line-height: 1;
  outline: none;
}
.tool-list .DropMenu-icon,
.DropMenu .DropMenu-icon {
  width: 16px;
  height: 16px;
}
.tool-list .dropdown-menu,
.DropMenu .dropdown-menu {
  margin-top: 10px !important;
}
.tool-list .dropdown-menu::before,
.DropMenu .dropdown-menu::before {
  position: absolute;
  top: -7px;
  left: 159px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: "";
}
.tool-list .dropdown-menu::after,
.DropMenu .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 160px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: "";
}

.DropMenu--icon .dropdown-menu {
  margin-top: 6px !important;
}

.DropMenu--inline {
  display: inline-block;
}

.DropMenu--noPointer .dropdown-menu::before {
  display: none;
}
.DropMenu--noPointer .dropdown-menu::after {
  display: none;
}
.DropMenu--noPointer .dropdown-menu {
  margin-top: 6px !important;
}

.DropMenu.DropMenu--text .dropdown-menu {
  margin-top: 3px !important;
  left: 0;
}
.DropMenu.DropMenu--text .caret {
  vertical-align: middle;
  margin-left: 0;
}

.DropMenu.DropMenu--arrowLeft .dropdown-menu {
  top: 24px;
  left: 0;
}
.DropMenu.DropMenu--arrowLeft .dropdown-menu:before {
  left: 7px;
}
.DropMenu.DropMenu--arrowLeft .dropdown-menu:after {
  left: 8px;
}

body.chrome .DropMenu-delete {
  position: relative;
}

/* POSITIONING FOR DIFFERENT DROP DOWN MENU LAYOUTS
  e.g. cog button with drop down menu
  used by stack score
*/
.tool-list.tools-button .dropdown-menu {
  left: -10px;
}
.tool-list.tools-button .dropdown-menu:before {
  left: 7px;
}
.tool-list.tools-button .dropdown-menu:after {
  left: 8px;
}

/* delete confirm - small button */
/* pointer is on the left e.g. regenerate on information page */
.tool-list.tools-button.tools-small-button .dropdown-menu {
  top: 20px;
  left: 9px;
}

.tools-small-button-right .dropdown-menu {
  top: 20px;
  left: 1px;
}
.tools-small-button-right .dropdown-menu:before {
  left: 7px;
}
.tools-small-button-right .dropdown-menu:after {
  left: 8px;
}

/* delete confirm - icon e.g. scale down */
.tool-list.tools-button.tools-icon-button .dropdown-menu {
  top: 20px;
  left: -6px;
}

/* DropDown menu containing the Avatar - positioning */
.tool-list.tools-nav {
  position: relative;
  top: -2px;
}
.tool-list.tools-nav .dropdown-menu {
  left: -154px;
}

/*
  wide drop down container with pointer on right side of the menu.
  E.g. delete confirmation for cloud keys clicking on trash icon.
*/
.DropMenu--rightPointer .dropdown-menu,
.drop-down-container--rightPointer .dropdown-menu {
  left: -200px;
}
.DropMenu--rightPointer .dropdown-menu:before,
.drop-down-container--rightPointer .dropdown-menu:before {
  left: 200px;
}
.DropMenu--rightPointer .dropdown-menu:after,
.drop-down-container--rightPointer .dropdown-menu:after {
  left: 201px;
}

.drop-down-container--wider .dropdown-menu {
  min-width: 280px;
}
.drop-down-container--wider .dropdown-menu {
  left: -258px;
}
.drop-down-container--wider .dropdown-menu:before {
  left: 259px;
}
.drop-down-container--wider .dropdown-menu:after {
  left: 260px;
}

/* account settings */
.tools-nav .dropdown-menu {
  min-width: 220px;
  left: -194px !important;
}
.tools-nav .dropdown-menu:before {
  left: 197px;
}
.tools-nav .dropdown-menu:after {
  left: 198px;
}

.AccountSettings {
  display: inline-block;
}
.AccountSettings .caret {
  position: relative;
  top: 1px;
}

.drop-down-container--sidebar .dropdown-menu {
  left: -5px;
}
.drop-down-container--sidebar .dropdown-menu:before {
  left: 194px;
}
.drop-down-container--sidebar .dropdown-menu:after {
  left: 195px;
}

.BlankSlate-dropdown .dropdown-menu {
  width: 280px;
  left: -110px;
  top: 34px;
}
.BlankSlate-dropdown .dropdown-menu:before {
  left: 250px;
}
.BlankSlate-dropdown .dropdown-menu:after {
  left: 251px;
}

/* used for delete confirmation from small button e.g. organisations page */
.DropMenu--rightPointerSmallBtn .Button--small {
  min-width: 65px;
}
.DropMenu--rightPointerSmallBtn .dropdown-menu {
  min-width: 235px !important;
  top: 20px;
  left: -172px;
}
.DropMenu--rightPointerSmallBtn .dropdown-menu:before {
  left: 212px;
}
.DropMenu--rightPointerSmallBtn .dropdown-menu:after {
  left: 213px;
}

/*
    Dropdown confirmation for sidebar buttons
    Delete load balancer / SSL cert
 */
.tool-list.sidebar-button.drop-down-container .dropdown-menu {
  top: 28px;
  left: -1px;
}

/* --------------------------------------------------------------------------
 *  DROPDOWN
----------------------------------------------------------------------------- */
.drop-down-container {
  position: relative;
  display: inline;
}
.drop-down-container > a .caret {
  vertical-align: middle;
}
.drop-down-container a:hover {
  text-decoration: none;
}

.redeploy-dropdown i {
  font-size: 14px !important;
}
.redeploy-dropdown .caret {
  position: relative;
  top: 1px !important;
}

.stack-tool {
  outline: none;
  transition: none;
  line-height: 1;
}
.stack-tool:hover {
  text-decoration: none;
  color: #222;
}
.stack-tool:focus {
  outline: none;
}
.stack-tool i,
.stack-tool .Icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #748b93;
}
.stack-tool .stack-tool-txt {
  position: relative;
  line-height: 1;
}

.negative-action i:hover {
  color: rgb(203, 36, 49);
}

.stack-tool.all-disabled i {
  color: #999;
  opacity: 0.5;
}

@media (max-width: 620px) {
  a.dropdown-toggle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
 *  STACK DROPDOWN
----------------------------------------------------------------------------- */
.Module-headerGroupDropdown .dropdown-menu {
  left: -257px !important;
  width: 285px !important;
  max-width: 485px;
}
.Module-headerGroupDropdown .dropdown-menu:before {
  left: 256px;
}
.Module-headerGroupDropdown .dropdown-menu:after {
  left: 257px;
}

.Module-headerTools .dropdown-menu {
  left: -159px !important;
}

.Module-headerGroupDropdown .dropdown-menu {
  left: -170px !important;
}
.Module-headerGroupDropdown .dropdown-menu:before {
  left: 256px;
}
.Module-headerGroupDropdown .dropdown-menu:after {
  left: 257px;
}

.Module-headerTools {
  /* medium width */
  /* Modifier to make a wide variation of the dropdown.
     Eg. Formations new stencil dropdown will contain a description and filter control.
   */
}
.Module-headerTools .Module-headerToolsMenu .dropdown-menu {
  left: -225px !important;
  max-width: 245px;
}
.Module-headerTools .Module-headerToolsMenu .dropdown-menu:before {
  left: 223px;
}
.Module-headerTools .Module-headerToolsMenu .dropdown-menu:after {
  left: 224px;
}
.Module-headerTools .Module-headerToolsMenu.Module-headerToolsMenu--medium .dropdown-menu {
  left: -257px !important;
  width: 285px !important;
  max-width: 485px;
}
.Module-headerTools .Module-headerToolsMenu.Module-headerToolsMenu--medium .dropdown-menu:before {
  left: 256px;
}
.Module-headerTools .Module-headerToolsMenu.Module-headerToolsMenu--medium .dropdown-menu:after {
  left: 257px;
}
.Module-headerTools .Module-headerToolsMenu.Module-headerToolsMenu--wide .dropdown-menu {
  left: -457px !important;
  width: 485px !important;
  max-width: 485px;
}
.Module-headerTools .Module-headerToolsMenu.Module-headerToolsMenu--wide .dropdown-menu:before {
  left: 456px;
}
.Module-headerTools .Module-headerToolsMenu.Module-headerToolsMenu--wide .dropdown-menu:after {
  left: 457px;
}

.Module-headerTools.Module-headerTools--card .dropdown-menu {
  left: -181px !important;
  width: 206px !important;
}
.Module-headerTools.Module-headerTools--card .dropdown-menu:before {
  left: 179px;
}
.Module-headerTools.Module-headerTools--card .dropdown-menu:after {
  left: 180px;
}

.Module-headerGroupItem {
  /* medium width */
  /* larger width */
  /* medium width */
}
.Module-headerGroupItem .Module-headerGroupMenu .dropdown-menu {
  left: -215px !important;
  max-width: 245px;
}
.Module-headerGroupItem .Module-headerGroupMenu .dropdown-menu:before {
  left: 213px;
}
.Module-headerGroupItem .Module-headerGroupMenu .dropdown-menu:after {
  left: 214px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--medium .dropdown-menu {
  left: -176px !important;
  width: 285px !important;
  max-width: 485px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--medium .dropdown-menu:before {
  left: 256px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--medium .dropdown-menu:after {
  left: 257px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--large .dropdown-menu {
  left: -375px !important;
  width: 485px !important;
  max-width: 485px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--large .dropdown-menu:before {
  left: 460px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--large .dropdown-menu:after {
  left: 461px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--small .dropdown-menu {
  left: -89px !important;
  width: 215px !important;
  max-width: 385px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--small .dropdown-menu:before {
  left: 196px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--small .dropdown-menu:after {
  left: 197px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--more .dropdown-menu {
  left: -139px !important;
  width: 215px !important;
  max-width: 385px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--more .dropdown-menu:before {
  left: 196px;
}
.Module-headerGroupItem .Module-headerGroupMenu.Module-headerGroupMenu--more .dropdown-menu:after {
  left: 197px;
}

.DropdownContainer .dropdown-menu {
  left: -159px !important;
}

/* --------------------------------------------------------------------------
 *  typeahead
----------------------------------------------------------------------------- */
.tt-query {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.tt-hint {
  color: #999;
}

.tt-menu {
  width: 340px;
  max-height: 250px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin: -3px 0 0 0;
  padding: 6px 0;
}

.tt-suggestion {
  font-size: 1.2rem;
  line-height: 1.3;
  padding: 3px 12px;
}

.tt-suggestion:hover {
  background-color: #0088cc;
  color: #eee;
  cursor: pointer;
}
.tt-suggestion:hover .tt-highlight {
  color: #fff;
}

.tt-cursor .tt-highlight {
  color: #fff;
}

.tt-suggestion.tt-cursor {
  background-color: #0088cc;
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

.tt-highlight {
  color: #333;
  text-decoration: underline;
}

.tt-header {
  padding: 0 12px;
}

.tt-empty {
  padding: 2px 12px;
}

/*
    Truncate the text in the cloud cluster dropdown
 */
.js_deploy_menu .ButtonMenu-listItem {
  max-width: 100%;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
}

.DropMenuForm {
  margin: 0;
  padding: 8px 15px;
}
.DropMenuForm .DropMenuForm-item {
  padding-bottom: 12px;
}
.DropMenuForm .DropMenuForm-label {
  font-size: 13px;
  font-weight: 500;
}
.DropMenuForm .DropMenuForm-info {
  padding: 6px 0 20px 0;
  font-size: 12px;
}
.DropMenuForm .DropMenuForm-action {
  padding-top: 14px;
  padding-left: 24px;
}
.DropMenuForm .DropMenuForm-buttons {
  padding-top: 14px;
}

.Module--dark .caret {
  border-top: 4px solid #3D4A60;
}
.Module--dark .dropdown-menu {
  background: #333F51;
  border-color: #3d4a60;
  box-shadow: 0 0 7px rgba(34, 25, 25, 0.3);
}
.Module--dark .dropdown-menu li a {
  color: #fff !important;
}
.Module--dark .dropdown-menu li a:hover {
  background: #3d4c63 !important;
}
.Module--dark .dropdown-menu li .u-textLightRed {
  color: #ff8383 !important;
}
.Module--dark .dropdown-menu::before {
  border-right: 7px solid transparent;
  border-bottom: 7px solid #3d4a60;
  border-left: 7px solid transparent;
  border-bottom-color: #3d4a60;
}
.Module--dark .dropdown-menu::after {
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333F51;
  border-left: 6px solid transparent;
}

body[data-controller=deployment_profiles][data-action=new] #new_profile_link,
body[data-controller=deployment_profiles][data-action=edit] #new_profile_link {
  display: none;
}
body[data-controller=deployment_profiles][data-action=new] a.js_populate_deploy_options_modal,
body[data-controller=deployment_profiles][data-action=edit] a.js_populate_deploy_options_modal {
  pointer-events: none;
  color: #ccc;
}

@media (max-width: 620px) {
  .Table-rowActions {
    vertical-align: middle;
  }
}

@media (max-width: 620px) {
  .Table-rowActions .tool-list [data-toggle=dropdown] {
    padding: 3px;
  }
}

/*
    Group of dropdown menu items
    e.g. tabular dashboard dropdowns that appear in the fixed table header for bulk ops on applications.
*/
.DropdownGroupLabel {
  padding: 5px 8px;
  font-weight: normal;
  font-size: 12px;
  line-height: normal;
  color: #54676d;
}

/* ==========================================================================
   FORMS BASED EDIT IN PLACE
   ========================================================================== */
form.FormEditInPlace-form {
  margin: 0;
  padding: 0;
}
form.FormEditInPlace-form .Form-input {
  margin-bottom: 0;
}

/* Default state - form is hidden */
.js_edit_in_place_region .js_edit_in_place_text {
  display: block;
}
.js_edit_in_place_region .js_edit_in_place_form {
  display: none;
}

.js_edit_in_place_region.js_in_edit_mode .js_edit_in_place_text {
  display: none;
}
.js_edit_in_place_region.js_in_edit_mode .js_edit_in_place_form {
  display: block;
}
.js_edit_in_place_region.js_in_edit_mode #js_domain_to_verify_msg {
  display: none;
}

.FormEditInPlace .FormEditInPlace-editButton {
  font-size: 13px;
}
.FormEditInPlace .FormEditInPlace-editButton:hover {
  text-decoration: none;
}
.FormEditInPlace .FormEditInPlace-warning {
  position: relative;
  top: 2px;
  display: inline-block;
  font-size: 13px;
  padding-left: 6px;
  color: #000;
}

.FiltersBlankSlate {
  margin-top: -18px;
  padding-bottom: 26px;
  font-size: 13px;
}

.Filters {
  margin-top: -14px;
  padding-bottom: 16px;
}
.Filters .Filters-item--filter {
  width: 206px;
}
.Filters .Filters-item--filter .Form {
  width: 100%;
}
.Filters .selectize-input {
  width: 100%;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: none !important;
  padding: 3px 8px;
  min-height: 32px;
}
.Filters ::-webkit-input-placeholder,
.Filters ::-moz-placeholder {
  color: #667382;
}
.Filters .selectize-input.focus {
  border: 1px solid #d6d6d6;
}
.Filters .Filters-applied {
  position: relative;
  top: -3px;
  border-color: #fcebc2;
  border-radius: 3px;
  padding: 8px 12px;
  background: #fcebc2;
  color: #000;
}
.Filters .Filters-action a {
  color: #000;
}
.Filters .Filters-action a:hover {
  color: #427dc4;
}

.Filters-text {
  display: inline-block;
  padding-left: 10px;
  padding-top: 8px;
  font-size: 13px;
}

/*
 * body class applied when there are active filters across a formation.
 */
.formation-filter-applied .u-dragable,
.formation-filter-applied .ModuleControls {
  display: none;
}
.formation-filter-applied .Table-body--dragableRows td {
  cursor: default !important;
}

.Firewall--editable {
  /*
      The hidden 'read-only' form rows
      the last one is cloned to add new firewall rules.
  */
}
.Firewall--editable .read-only-row {
  display: none;
}

/* The firewall row has an error */
.fields-have-error input[type=text],
.fields-have-error select {
  background: #FFF2F2;
  border-color: #CC3333;
}

/* The firewall row has a warning */
.fields-have-warning input[type=text],
.fields-have-warning select {
  background: #FFF6ED;
  border-color: #EA8407;
}

.is-temp-rule input,
.is-temp-rule select,
.is-temp-rule .btn {
  pointer-events: none;
  opacity: 0.55;
}
.is-temp-rule .btn {
  opacity: 0.8;
}

.Table--form tr.form-fields-row.temp-rule-divider td {
  border-bottom: 1px dashed #ddd;
  padding-bottom: 14px !important;
}

/* ===========================================================================================
 *  Base form html elements
 *  legacy form layout and some bootstrap derived styles are still used in some places:
 *
 *
============================================================================================== */
form {
  margin: 0 0 18px;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 27px;
  font-size: 19.5px;
  line-height: 36px;
  color: #333333;
  border: 0;
}

label,
input,
button,
select,
textarea {
  font-weight: normal;
  line-height: 18px;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

label {
  display: block;
  margin-bottom: 5px;
}

.label--sub {
  display: block;
}

select,
textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
  display: inline-block;
  height: 20px;
  padding: 4px;
  margin-bottom: 2px;
  font-size: 14px;
  color: #444;
}

.Form-text--secondary {
  height: 17px !important;
}

input,
textarea {
  width: 210px;
}

textarea {
  height: auto;
}

textarea,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color],
.uneditable-input {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  padding-left: 8px;
}

textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=color]:focus,
.uneditable-input:focus {
  background-color: #fff;
  border: 1px solid rgba(82, 168, 236, 0.8);
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(82, 168, 236, 0.2);
  /* blue box-shadow */
}

input[type=radio],
input[type=checkbox] {
  margin: 3px 0;
  line-height: normal;
  cursor: pointer;
}

input[type=submit],
input[type=reset],
input[type=button],
input[type=radio],
input[type=checkbox] {
  width: auto;
}

.uneditable-textarea {
  width: auto;
  height: auto;
}

select,
input[type=file] {
  height: 30px;
  line-height: 28px;
  border-radius: 2px;
}

select {
  width: 220px;
  border: 1px solid #bbb;
  border-radius: 2px;
  position: relative;
}

select:focus {
  background-color: #fff;
}

.form-side-by-side select {
  top: 2px;
}
.form-side-by-side .form-actions {
  padding-bottom: 1em;
}

/*
select[multiple] {
   height: auto;
}
*/
select[size] {
  height: auto;
}

select:focus,
input[type=file]:focus,
input[type=radio]:focus,
input[type=checkbox]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.radio,
.checkbox {
  min-height: 18px;
  padding-left: 18px;
}

.radio input[type=radio],
.checkbox input[type=checkbox] {
  float: left;
  margin-left: -18px;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px;
}

.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}

.input-micro {
  width: 58px;
}

.input-mini {
  width: 60px;
}

.input-small {
  width: 90px;
}

.input-medium {
  width: 150px;
}

.input-large {
  width: 210px;
}

.input-xlarge {
  width: 305px;
}

select.input-xlarge {
  width: 390px;
}

.input-vxlarge {
  width: 375px;
}

select.input-vxlarge {
  width: 390px;
}

.input-xxlarge {
  width: 480px;
}

select.input-xxlarge {
  width: 494px;
}

.full-width {
  width: 100% !important;
  box-sizing: border-box;
}

.modal-textarea {
  overflow: auto;
  height: 70px;
  font-family: Monaco, "DejaVu Sans Mono", Consolas, "Liberation Mono", "Courier New", Courier, monospace;
  font-size: 10px;
  line-height: 1.7;
}

.input-append input[class*=span],
.input-append .uneditable-input[class*=span],
.input-prepend input[class*=span],
.input-prepend .uneditable-input[class*=span],
.row-fluid .input-prepend [class*=span],
.row-fluid .input-append [class*=span] {
  display: inline-block;
}

input,
textarea,
.uneditable-input {
  margin-left: 0;
}

.visually-disabled,
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly] {
  cursor: not-allowed;
  background-color: #eeeeee !important;
  border-color: #ddd !important;
}

input[readonly=readonly]:focus {
  background: #eee;
  border: 1px solid #C1C1C1;
  cursor: not-allowed;
}

input[type=radio][disabled],
input[type=checkbox][disabled],
input[type=radio][readonly],
input[type=checkbox][readonly] {
  background-color: transparent;
}

.control-group.warning > label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
  color: #c09853;
}

.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  color: #c09853;
  border-color: #c09853;
}

.control-group.warning .checkbox:focus,
.control-group.warning .radio:focus,
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
  border-color: #a47e3c;
  box-shadow: 0 0 6px #dbc59e;
}

.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #c09853;
}

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline {
  color: #b94a48;
}

.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  color: #b94a48;
  border-color: #b94a48;
}

.control-group.error .checkbox:focus,
.control-group.error .radio:focus,
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
  border-color: #953b39;
  box-shadow: 0 0 6px #d59392;
}

.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #b94a48;
}

.control-group.success > label,
.control-group.success .help-block,
.control-group.success .help-inline {
  color: #468847;
}

.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  color: #468847;
  border-color: #468847;
}

.control-group.success .checkbox:focus,
.control-group.success .radio:focus,
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
  border-color: #356635;
  box-shadow: 0 0 6px #7aba7b;
}

.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
  color: #468847;
  background-color: #dff0d8;
  border-color: #468847;
}

input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
  color: #b94a48;
  border-color: #cc3333 !important;
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
  border-color: #cc3333 !important;
}

.form-actions {
  padding: 17px 20px 18px;
  margin-top: 18px;
  background-color: #fff;
  border-top: 1px solid #E0E0E0;
}
.form-actions .action-separator {
  display: inline-block;
  margin: 0 9px;
}

.form-actions-inline form {
  display: inline-block;
  margin: 0;
}

.form-actions:before,
.form-actions:after {
  display: table;
  content: "";
}

.form-actions:after {
  clear: both;
}

.uneditable-input {
  overflow: hidden;
  white-space: nowrap;
  cursor: not-allowed;
  background-color: #ffffff;
  border-color: #eee;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
}

/*
    Default input placeholders
    This is overridden on some specific syles by prefixing the element.
    IMPORTANT NOTE: there is a bug in firefox styling input[type="number"]
    https://bugzilla.mozilla.org/show_bug.cgi?id=1004130
*/
/* Firefox */
::-moz-placeholder {
  color: #c1c1c1;
  opacity: 1;
}

:-moz-placeholder {
  color: #c1c1c1;
  font-style: italic;
  opacity: 1;
}

/* IE 10+ */
:-ms-input-placeholder {
  color: #c1c1c1;
}

/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
  color: #c1c1c1;
}

.help-inline {
  display: inline-block;
  padding-left: 5px;
  vertical-align: middle;
}

.form-help-block {
  margin: 12px 0;
  padding-left: 176px;
}

.input-prepend,
.input-append {
  margin-bottom: 5px;
}

.input-prepend input,
.input-append input,
.input-prepend select,
.input-append select,
.input-prepend .uneditable-input,
.input-append .uneditable-input {
  position: relative;
  margin-bottom: 0;
  vertical-align: middle;
  border-radius: 0 3px 3px 0;
}

.input-prepend input:focus,
.input-append input:focus,
.input-prepend select:focus,
.input-append select:focus,
.input-prepend .uneditable-input:focus,
.input-append .uneditable-input:focus {
  z-index: 2;
}

.input-prepend .uneditable-input,
.input-append .uneditable-input {
  border-left-color: #ccc;
}

.input-prepend .add-on,
.input-append .add-on {
  display: inline-block;
  width: auto;
  height: 18px;
  min-width: 16px;
  padding: 4px 5px;
  font-weight: normal;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 1px 0 #ffffff;
  vertical-align: middle;
  background-color: #eeeeee;
  border: 1px solid #ccc;
}

.input-prepend .add-on,
.input-append .add-on,
.input-prepend .btn,
.input-append .btn {
  margin-left: -1px;
  border-radius: 0;
}

.input-prepend .active,
.input-append .active {
  background-color: #a9dba9;
  border-color: #46a546;
}

.input-prepend .add-on,
.input-prepend .btn {
  margin-right: -1px;
}

.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
  border-radius: 3px 0 0 3px;
}

.input-append input,
.input-append select,
.input-append .uneditable-input {
  border-radius: 3px 0 0 3px;
}

.input-append .uneditable-input {
  border-right-color: #ccc;
  border-left-color: #eee;
}

.input-append .add-on:last-child,
.input-append .btn:last-child {
  border-radius: 0 3px 3px 0;
}

.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
  border-radius: 0;
}

.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
  margin-right: -1px;
  border-radius: 3px 0 0 3px;
}

.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
  margin-left: -1px;
  border-radius: 0 3px 3px 0;
}

.search-query {
  padding-right: 14px;
  padding-right: 4px \9 ;
  padding-left: 14px;
  padding-left: 4px \9 ;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  border-radius: 14px;
}

.form-search input,
.form-inline input,
.form-horizontal input,
.form-search textarea,
.form-inline textarea,
.form-horizontal textarea,
.form-search select,
.form-inline select,
.form-horizontal select,
.form-search .help-inline,
.form-inline .help-inline,
.form-horizontal .help-inline,
.form-search .uneditable-input,
.form-inline .uneditable-input,
.form-horizontal .uneditable-input,
.form-search .input-prepend,
.form-inline .input-prepend,
.form-horizontal .input-prepend,
.form-search .input-append,
.form-inline .input-append,
.form-horizontal .input-append {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  *zoom: 1;
}

.form-search .hide,
.form-inline .hide,
.form-horizontal .hide {
  display: none;
}

.form-search label,
.form-inline label {
  display: inline-block;
}

.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
  margin-bottom: 0;
}

.form-search .radio,
.form-search .checkbox,
.form-inline .radio,
.form-inline .checkbox {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle;
}

.form-search .radio input[type=radio],
.form-search .checkbox input[type=checkbox],
.form-inline .radio input[type=radio],
.form-inline .checkbox input[type=checkbox] {
  float: left;
  margin-right: 3px;
  margin-left: 0;
}

.form-controls {
  padding: 6px 2px 8px 9px;
}

.control-group {
  margin-bottom: 9px;
}

legend + .control-group {
  margin-top: 18px;
  -webkit-margin-top-collapse: separate;
}

.form-horizontal .control-group {
  margin-bottom: 18px;
  *zoom: 1;
}

.form-horizontal .control-group:before,
.form-horizontal .control-group:after {
  display: table;
  content: "";
}

.form-horizontal .control-group:after {
  clear: both;
}

.form-horizontal .control-label {
  float: left;
  width: 140px;
  padding-top: 5px;
  text-align: right;
  font-size: 1.3rem;
}

.wide-label .control-label {
  width: 185px !important;
}
.wide-label .form-actions {
  padding-left: 215px !important;
}

.form-horizontal .controls {
  margin-left: 160px;
}

.form-horizontal .controls:first-child {
  *padding-left: 160px;
}

.form-horizontal .help-block {
  margin-top: 9px;
  margin-bottom: 0;
}

.form-horizontal .form-actions {
  padding-left: 160px;
  padding-bottom: 20px;
}

.modal .modal-body .form-stacked .form-actions,
.form-stacked .form-actions {
  padding-left: 0 !important;
}

/* this is a hack to fudge positioning of an element that appears outside the cloud links partial */
.form-xtra-item {
  position: relative;
  margin: -6px 0 2em 0;
}

/* ==========================================================================
   FORM LAYOUTS
   ========================================================================== */
.form-side-by-side ul,
.form-side-by-side ol {
  margin: 18px 0 22px;
}
.form-side-by-side ul > li,
.form-side-by-side ol > li {
  position: relative;
  line-height: 1;
  padding: 8px 0;
}
.form-side-by-side .item-divider {
  border-bottom: 1px solid #F2F2F2;
}
.form-side-by-side .item-divider-top {
  padding-top: 8px;
  border-top: 1px solid #F2F2F2;
}
.form-side-by-side .item-divider-top:first-child {
  border-top: none;
}
.form-side-by-side .control-label {
  position: relative;
  float: left;
  width: 160px;
  text-align: right;
  padding: 7px 16px 0 0;
}
.form-side-by-side label.req::after,
.form-side-by-side label.required::after {
  content: "*";
  font-weight: bold;
  font-size: 18px;
  color: #CC3333;
  position: absolute;
  right: 4px;
  top: 9px;
  white-space: nowrap;
}

.form-side-by-side ul :only-child {
  border-top: none !important;
}

.control-value {
  font-weight: normal;
  padding-top: 10px;
  color: #999;
}

.control-input {
  padding-top: 6px;
}

.form-stacked li {
  position: relative;
  margin: 8px 0;
}
.form-stacked li:first-child {
  margin-top: 0;
}

/*
 * Override generated variables - allow editing of textarea
-------------------------------------------------------------------- */
.js_override_label {
  display: none;
}

.js_textarea {
  z-index: 1;
}

.js_override_generated_var:hover {
  text-decoration: none;
}

.js_cancel_editing_generated_var {
  position: absolute;
  top: 2px;
  right: 5px;
  z-index: 1;
  background-color: #fff;
  font-size: 12px;
}
.js_cancel_editing_generated_var:hover {
  text-decoration: none;
}

.generated-hidden-textarea .js_variable_container {
  display: none;
}
.generated-hidden-textarea .js_override_label {
  display: block;
}

/*
 * STACKED FORMS
-------------------------------------------------------------------- */
.mod-article-form-stacked .form-stacked-fields {
  margin-top: 4px;
  padding: 16px;
}
.mod-article-form-stacked .form-actions {
  margin-top: 12px;
  padding-left: 16px !important;
}
.mod-article-form-stacked ul {
  margin-bottom: 0;
}

.mod-table-form .form-actions {
  margin-top: 12px;
  padding-left: 16px !important;
}

.form-stacked-fields input[type=text],
.form-stacked-fields select {
  margin-bottom: 0;
}
.form-stacked-fields li {
  box-sizing: border-box;
  padding: 12px 0;
}
.form-stacked-fields li:first-child {
  padding-top: 0;
}
.form-stacked-fields li label {
  font-weight: bold;
  color: #666;
  font-size: 1.3rem;
}
.form-stacked-fields li > .inline-label {
  vertical-align: middle;
  padding: 1px 0 0 2px;
  margin: 0;
}

.modal .form-stacked-fields .form-fields-list {
  padding: 1rem 0 1.5rem;
}

.manifest-label {
  padding-left: 0 !important;
  color: #666;
  cursor: help;
}

/* ==========================================================================
   CHUNKY - login forms etc
   ========================================================================== */
.form-chunky .Button--large,
.Form--largeFields .Button--large {
  margin-top: 0.6em;
}
.form-chunky li,
.Form--largeFields li {
  position: relative;
  margin-bottom: 12px;
}
.form-chunky .form-actions,
.Form--largeFields .form-actions {
  background: none;
  margin: 0;
  padding: 0px 0 16px;
  border: none;
}
.form-chunky input[type=text],
.form-chunky input[type=password],
.Form--largeFields input[type=text],
.Form--largeFields input[type=password] {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  font-size: 16px;
  border-color: #AFAFAF;
  padding-left: 12px;
}
.form-chunky input[type=text]:focus,
.form-chunky input[type=password]:focus,
.Form--largeFields input[type=text]:focus,
.Form--largeFields input[type=password]:focus {
  border-color: #5695DB;
}

.form-chunky span.field-error {
  position: absolute;
  top: 18px;
  right: 6px;
  margin: 0;
  padding: 0;
  background-image: none;
  font-size: 12px;
}

.field-extras {
  margin-top: -8px;
  min-height: 20px;
  padding-bottom: 8px;
  font-size: 1.3rem;
}

#remember-me {
  position: absolute;
  top: 0;
  left: 4px;
  width: 220px;
  height: auto;
}

#forgot {
  position: absolute;
  top: 0;
  right: 4px;
}

.radio-list > li {
  padding: 8px 2px;
}
.radio-list > li.narrow {
  padding-top: 1px;
}
.radio-list .li-spacer {
  padding-bottom: 16px;
}
.radio-list .inline-label {
  padding-top: 0;
}
.radio-list select,
.radio-list input[type=text],
.radio-list input[type=number],
.radio-list .inline-label,
.radio-list .field-after-help {
  vertical-align: middle;
  margin: 0 0 0 0.3rem;
  line-height: 1;
}
.radio-list input[type=checkbox] {
  vertical-align: middle;
}
.radio-list .inline-label {
  color: #666666;
}
.radio-list .field-after-help {
  padding-left: 0.4rem;
}
.radio-list .radio-list-text {
  padding-left: 22px;
}

.radio-list-padded li {
  padding: 8px 16px !important;
}

.radio-list-narrow > li {
  padding: 3px 2px !important;
}

.radio-heading,
.label-heading {
  line-height: 1 !important;
  font-weight: 500;
  font-size: 1.4rem !important;
  margin: 0 0 1.2rem 0 !important;
}

.label-heading {
  font-weight: 500;
  line-height: 1;
  font-size: 1.4rem;
  margin-bottom: 7px;
  padding-left: 1px;
}

.label-sub-heading {
  font-size: 1.2rem;
  letter-spacing: 0.8px;
  color: #444;
  margin: 0.95rem 0 1rem;
}

.bordered-divider {
  border-bottom: 1px solid #E8E8E8 !important;
  margin-bottom: 9px !important;
}

.bordered-solid li {
  border-bottom: 1px dotted #ddd;
}

.bordered-solid li:last-child {
  border: none;
}

.label-medium {
  width: 110px;
}

.label-large {
  width: 298px;
}

.label-medium-non-radio {
  width: 115px;
  font-weight: bold;
}

.input-spaced {
  margin-left: 38px !important;
}

.input-spaced-inline-label {
  display: inline;
}

.single-control {
  margin-top: 22px;
}

/* ----  Single row forms  ---- */
.form-single {
  margin: 0;
  padding: 0;
}
.form-single select {
  margin-bottom: 0;
}
.form-single .button {
  margin-top: 0.3rem;
}

.form-key-val select {
  overflow: hidden;
}

#time-zone-select {
  font-size: 1.1rem;
}

/* ==========================================================================
   EXTEND BOOTSTRAP FORMS
   ========================================================================== */
/* Some of these are way over specific to overide the bootstrap base styles
   -------------------------------------------------------------------------- */
.control-label {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.inline-label {
  font-size: 14px !important;
}

.form-content {
  margin: 16px 0 0 0;
}
.form-content label {
  font-size: 14px;
}

[disabled],
input.visually-disabled {
  opacity: 0.7 !important;
}

.control-group-narrow {
  margin-top: -8px;
}

form .inline-label {
  box-sizing: border-box;
  display: inline-block;
  padding: 6px 0 0 2px;
  margin-right: 4px;
}

.inline-label-outside {
  position: relative;
  top: 1px;
  display: inline;
  font-size: 11px;
  font-weight: 500;
}

.inline-label-radio-outside {
  vertical-align: middle;
}

form .radio-row {
  margin: 0 0 6px;
}

form .radio-row [type=radio],
form .radio-row [type=checkbox] {
  vertical-align: baseline;
}

form .inline-label-col {
  min-width: 62px;
}

form.field-dividers .control-label {
  width: 160px;
  /* additional width for app labels */
  font-weight: 500;
  color: #666;
}

#ad-form-step-two .control-label {
  font-weight: bold;
  padding-top: 8px !important;
}
#ad-form-step-two .inline-label {
  padding-left: 0.25em;
}

form.field-dividers .controls {
  margin-left: 176px;
}

/* Required field (*) indicator */
label.req {
  position: relative;
}

label.req::after {
  content: "*";
  font-weight: bold;
  font-size: 18px;
  color: #CC3333;
  position: absolute;
  right: -10px;
  top: 8px;
  white-space: nowrap;
}

.input-inline {
  display: inline-block;
}

::-webkit-autofill {
  color: #fff !important;
}

::-webkit-input-placeholder {
  color: #999;
  font-weight: 400;
}

label.txt-left {
  text-align: left !important;
}

.text-field {
  width: 460px;
}

.modal .text-field {
  width: 440px;
}

.text-field:-webkit-placeholder,
.text-field:focus:-webkit-placeholder {
  font-size: 13px;
}

.text-field-small {
  font-size: 11px;
}

.text-field-short {
  height: 25px;
}

.stand-alone {
  width: auto !important;
}

#js-key {
  background: #fff;
  height: 166px;
}

.git-ssh-key {
  font-size: 1.1rem;
  height: 176px !important;
}

/* Yellow inline field help
------------------------------------------- */
.controls {
  position: relative;
}

form div.help-inline {
  opacity: 0;
  position: relative;
  margin-left: 16px;
  line-height: 1;
  padding: 8px;
  background-color: #FCF8E3;
  border: 1px solid #FFD389;
  color: #222;
}

form div.help-inline.shown {
  opacity: 1;
}

/* left triangle - border */
form .help-inline::before {
  border-color: transparent #FFD389 transparent transparent;
  border-style: solid;
  border-width: 10px 11px;
  content: " ";
  display: block;
  height: 0;
  left: -22px;
  position: absolute;
  top: 5px;
  width: 0;
}

/* left triangle - fill */
form .help-inline::after {
  border-color: transparent #FCF8E3 transparent transparent;
  border-style: solid;
  border-width: 9px 10px;
  content: " ";
  display: block;
  height: 0;
  left: -19px;
  position: absolute;
  top: 6px;
  width: 0;
}

/* Boxed out fieldsets
   -------------------------------------------------------------------------- */
.field-divider {
  margin-bottom: 22px;
  border-radius: 2px;
  border: 1px solid #E0E0E0;
}
.field-divider h2.fieldset {
  color: #444;
  text-shadow: 0 1px 0 #fff;
  color: #333;
  background: linear-gradient(#fdfdfd, #F5F5F5);
  border-radius: 2px 2px 0 0;
  margin: 0;
  padding: 11px 4px 13px 12px;
  border-bottom: 1px solid #ddd;
  font: 500 14px/1 "Helvetica Neue", Helvetica Neue, Helvetica, arial, sans-serif;
  color: 0;
  text-shadow: 0 1px 0 #fff;
}
.field-divider h2.fieldset span {
  color: #666;
  font-size: 17px;
}

.field-divider.field-list .control-group {
  padding: 0 12px;
  margin-top: -8px;
}

.field-text {
  padding: 4px 28px;
}

.field-intro {
  font-size: 18px;
  font-weight: 200;
}
.field-intro p {
  line-height: 1;
  margin: 0;
}

/* separate internal fieldsets with borders */
.field-divider .control-group-divider {
  padding-bottom: 14px;
  border-bottom: 1px solid #EAEAEA;
}

.field-divider .field-divider-inner {
  padding-top: 18px;
}

.advanced-fields .field-divider-inner:last-child {
  border-top: 1px solid #EAEAEA;
}

.read-only-field-text {
  line-height: 18px;
  padding-top: 5px;
  color: #000;
}

/* overide the bootstrap actions container */
.form-horizontal .form-actions {
  padding: 18px 0 18px 176px;
}

.field-dividers fieldset.form-actions {
  margin: 0 0 28px;
  padding-left: 178px;
}

#ad-form-step-two fieldset.form-actions {
  margin-bottom: 0 !important;
}

/* Always display validation errors underneath textareas */
textarea + .field-error {
  display: block;
}

/* HIDES the inline help if the filed has an inline error message */
span.field-error + .help-inline {
  display: none !important;
}

/* Form submit
   -------------------------------------------------------------------------- */
.submitting {
  opacity: 0.8;
  pointer-events: none;
}
.submitting [type=submit] {
  position: static;
}

.submitting-spinner {
  position: relative;
  top: 4px;
  display: inline-block;
  margin-left: 8px;
}

/* Extend the bootstrap alert blocks
   -------------------------------------------------------------------------- */
.alert-primary-section {
  margin: 1em 0;
}

/* ==========================================================================
   Text within forms
   ========================================================================== */
/* field is not actually disabled but muted */
.field-muted {
  opacity: 0.75;
  background-color: #eeeeee !important;
  border-color: #ddd !important;
}

/* ==========================================================================
   WARNING REGIONS - Within forms
   ========================================================================== */
.form-help {
  color: #333;
  margin: 0 0 12px;
  font-size: 1.3rem;
  line-height: 1.4;
  padding-right: 2em;
}

.msg-warn {
  color: #DD7D06;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.3rem;
  margin-right: 0.25em;
  letter-spacing: 0.55px;
}

/* ==========================================================================
   OVERIDES - FORM SPECIFIC RULES
   ========================================================================== */
.add-on-form-pad {
  padding: 0 12px 12px 12px;
}

#new_database_backup .add-on-form ul {
  margin-top: 0;
}

#new_database_backup .add-on-form ul li:first-child {
  padding-bottom: 12px;
  border: none;
}

/* ==========================================================================
   WEBKIT file uploads
   ========================================================================== */
input[type=file] {
  -webkit-appearance: none;
  line-height: 1.7;
  font-size: 1.2rem;
  color: #999;
}

input[type=file]::-webkit-file-upload-button {
  -webkit-appearance: none;
  background-color: #A4ACB6;
  color: #fff;
  border-color: #A4ACB6;
  font-weight: bold;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

input[type=file]::-webkit-file-upload-button:hover {
  background-color: #A3A3A3;
}

input[type=file]::-webkit-file-upload-button:focus {
  outline: none;
}

/* ==========================================================================
   FORM ELS - AJAX LOADING
   ========================================================================== */
.table-form-submit {
  padding: 12px;
  background: #FCFCFC;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
  border-radius: 2px;
  border: 1px solid #eee;
  margin-bottom: 26px;
}
.table-form-submit::after {
  clear: both;
  content: "";
  display: block;
}
.table-form-submit form {
  margin: 0;
}
.table-form-submit form select {
  margin: 0;
}
.table-form-submit .spinner-svg {
  position: relative;
  top: 10px;
}

.table-form-submit-single,
.Module-inner {
  margin-top: 5px;
}

.tabular-form-action {
  margin: 30px 0 0;
}

.date-range-spinner {
  position: relative;
  top: 4px;
}

/* ==========================================================================
   FORM 2 SPECIFIC OVERIDES
   ========================================================================== */
.read-only-option {
  display: inline-block;
  margin: 8px 0;
}

#where-to-deploy a {
  font-weight: bold;
}
#where-to-deploy .control-label {
  color: #000;
  font-weight: bold;
}

#selected-cloud-platforms {
  margin-bottom: 14px;
}

.deployment-list li {
  padding: 12px 0 !important;
}
.deployment-list li:first-child {
  padding-top: 0 !important;
}
.deployment-list li:last-child {
  border-bottom: none;
}

.mod-fieldset ul {
  margin-bottom: 0;
}

.inner-fieldset ul {
  margin: 0 !important;
}

.input-info {
  padding-left: 0.5em;
}

.mixed-manifest-input {
  margin-top: 16px;
}
.mixed-manifest-input .control-label {
  margin-top: 6px;
}
.mixed-manifest-input [type=text] {
  margin-bottom: 0;
  margin-left: 8px;
}

.field-hint {
  font-size: 1.2rem;
  padding: 0 1rem;
  color: #999;
}

.inline-label a.field-hint {
  color: #427dc4;
}

/* ==========================================================================
   ENVIRONMENT VARIABLE TABULAR FORMS
   ========================================================================== */
.extra-fields {
  position: relative;
  padding: 0 6px 14px 0;
}
.extra-fields label {
  font-weight: bold;
}
.extra-fields .m-help-link {
  position: absolute;
  right: 30px;
}

.environment-vars-page .padded-fieldset {
  padding: 0 24px;
}
.environment-vars-page .m-help-link {
  display: none;
}

/* ==========================================================================
   FILE UPLOAD FORMS
   ========================================================================== */
.form-file-upload {
  padding: 0 0 6px 0;
}
.form-file-upload label {
  margin: 0 0 1.6rem;
}

.form-file-upload-divider {
  border-bottom: 1px dotted #D3D3D3;
}

.drop-target {
  padding: 2.5rem;
  position: relative;
  border: 2px dashed #E2E2E2;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 0px;
}
.drop-target #envfile {
  position: absolute;
  left: 18px;
  top: 24px;
}

.drop-target:hover {
  border: 2px dashed #BCBCBC;
}

.drop-msg {
  padding-top: 6px;
  font-weight: 500;
  line-height: 0;
  color: #A0A0A0;
  font-size: 1.5rem;
}

.drop-target:hover:after {
  color: #999;
}

.drop-target.hovered {
  color: #000 !important;
  background: #F7F7F7;
  border: 2px dashed #ADABAB;
}
.drop-target.hovered span {
  color: #666;
}

#js_support_ticket_dropzone.drop-target {
  margin-right: 0;
}

.Module--onboardingEnvVar #envfile {
  position: absolute;
  top: 18px;
  left: 20px;
}

.form-btn-link {
  position: relative;
  top: -4.2rem;
  font-size: 1.3rem;
}

.inline-field-long-desc {
  font-size: 1.2rem;
  padding: 2.2rem 6rem 0 0;
}

/* ==========================================================================
   LRG INPUTS EG. TELL A FRIEND
   ========================================================================== */
.input-lrg {
  width: 80%;
  font-size: 2rem !important;
  height: auto !important;
  padding: 1.4rem !important;
  text-align: center;
  color: #666 !important;
}

/* ==========================================================================
   Styled radio's
   ========================================================================== */
.c-control {
  box-sizing: border-box;
  /* Hover state */
  /* Focus */
  /* Checked state */
  /* Active */
  /* Radio modifiers */
}
.c-control .control {
  position: relative;
  display: inline-block;
  padding: 0.1rem 0 0.1rem 1.6rem;
  color: #555;
  cursor: pointer;
}
.c-control .control-block {
  display: block;
}
.c-control .control-block .show-tip {
  display: inline-block;
  padding-left: 0.15rem;
}
.c-control .control-block .show-tip-right {
  display: inline-block;
  padding-left: 0.15rem;
}
.c-control .control input {
  position: absolute;
  opacity: 0;
  z-index: -1;
  /* Put the input behind the label so it doesn't overlay text */
}
.c-control .control-indicator {
  position: absolute;
  top: 0.35rem;
  left: -0.3rem;
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1rem;
  color: #ddd;
  border: 1px solid #999;
  text-align: center;
  background-color: #eee;
  background-size: 50% 50%;
  background-position: center center;
  background-repeat: no-repeat;
  -moz-user-select: -moz- none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.c-control .control:hover .control-indicator {
  color: #fff;
  background-color: #ddd;
}
.c-control .control input:checked ~ .control-indicator {
  color: #fff;
  border-color: transparent;
  background: #62c462;
}
.c-control .control input:active ~ .control-indicator {
  color: #fff;
  background-color: #84c6ff;
}
.c-control .radio .control-indicator {
  border-radius: 50%;
}

/*
    Disable the failover group radio's
    These are styled radio's
 */
.c-control--disabled .control-indicator,
.c-control--disabled .control input:active ~ .control-indicator,
.c-control--disabled .control input:checked ~ .control-indicator {
  background: #eee !important;
  border: 1px solid #eee !important;
}
.c-control--disabled label *,
.c-control--disabled strong.u-textB {
  color: #bababa !important;
  font-weight: normal;
  opacity: 0.75;
}

/* ==========================================================================
   FORM 2 - Inline Help Modules
   ========================================================================== */
.mod-ob-help {
  position: relative;
  z-index: 2;
  width: 14em;
  margin: 6px 16px 12px 0;
}

/**
 * StripeElement
 * used for credit card Details. Markup injected by JS
 */
.StripeElement {
  box-sizing: border-box;
  height: 40px;
  padding: 10px 12px;
  border: 1px solid #C1C1C1;
  border-radius: 4px;
  background-color: white;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
.StripeElement .InputElement {
  font-size: 15px !important;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #CC3333;
  border-width: 2px;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

/**
 * End StripeElement
 */
.GPT {
  margin-bottom: 24px;
  font-size: 13px;
}
.GPT h1 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.GPT h2 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.5;
  color: #000;
}
.GPT h3, .GPT h4, .GPT h5, .GPT h6 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.5;
  color: #000;
}
.GPT p {
  line-height: 1.5;
  font-size: 13px;
  margin-bottom: 12px;
}
.GPT p code {
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
  font-weight: 500;
  background: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  color: #000;
}
.GPT p strong {
  font-weight: 600;
  color: #000;
}
.GPT li code {
  font-weight: 600;
}
.GPT ul > li {
  margin-bottom: 8px;
}
.GPT pre {
  margin: 6px 0;
  background: #FAFBFC;
  border: 1px solid #efefef;
  border-radius: 6px;
  padding: 8px 12px !important;
  color: #000;
}

/* Global vars for breakpoints */
/* Mobile first break points */
.u-full {
  width: 100% !important;
  flex: none !important;
}

.u-1of2 {
  width: 50% !important;
  flex: none !important;
}

.u-1of3 {
  width: 33.3333% !important;
  flex: none !important;
}

.u-2of3 {
  width: 66.6667% !important;
  flex: none !important;
}

.u-1of4 {
  width: 25% !important;
  flex: none !important;
}

.u-3of4 {
  width: 75% !important;
  flex: none !important;
}

.u-1of5 {
  width: 20% !important;
  flex: none !important;
}

.u-2of5 {
  width: 40% !important;
  flex: none !important;
}

.u-3of5 {
  width: 60% !important;
  flex: none !important;
}

.u-4of5 {
  width: 80% !important;
  flex: none !important;
}

/* Apply to small screen devices */
@media (min-width: 384px) {
  .u-small-full {
    width: 100% !important;
    flex: none !important;
  }
  .u-small-1of2 {
    width: 50% !important;
    flex: none !important;
  }
  .u-small-1of3 {
    width: 33.3333% !important;
    flex: none !important;
  }
  .u-small-2of3 {
    width: 66.6667% !important;
    flex: none !important;
  }
  .u-small-1of4 {
    width: 25% !important;
    flex: none !important;
  }
  .u-small-3of4 {
    width: 75% !important;
    flex: none !important;
  }
}
/* Apply to medium screen devices */
@media (min-width: 600px) {
  .u-med-full {
    width: 100% !important;
    flex: none !important;
  }
  .u-med-1of2 {
    width: 50% !important;
    flex: none !important;
  }
  .u-med-1of3 {
    width: 33.3333% !important;
    flex: none !important;
  }
  .u-med-2of3 {
    width: 66.6667% !important;
    flex: none !important;
  }
  .u-med-1of4 {
    width: 25% !important;
    flex: none !important;
  }
  .u-med-3of4 {
    width: 75% !important;
    flex: none !important;
  }
}
/*
    Apply to large screen devices
    Desktop > 1024 res devices
 */
@media (min-width: 1024px) {
  .u-large-full {
    width: 100% !important;
    flex: none !important;
  }
  .u-large-1of2 {
    width: 50% !important;
    flex: none !important;
  }
  .u-large-1of3 {
    width: 33.3333% !important;
    flex: none !important;
  }
  .u-large-2of3 {
    width: 66.6667% !important;
    flex: none !important;
  }
  .u-large-1of4 {
    width: 25% !important;
    flex: none !important;
  }
  .u-large-3of4 {
    width: 75% !important;
    flex: none !important;
  }
}
/*
  This is a flexbox Grid based system it can be used as an alternative to the existing inline-block grid.
  use cases e.g. having cells auto fit available width, more examples:
  https://philipwalton.github.io/solved-by-flexbox/demos/grids/
 */
.Grid {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Grid-cell {
  flex: 1;
}

.Grid--flexCells > .Grid-cell {
  display: flex;
}

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

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

.Grid--center {
  align-items: center;
}

.Grid--justifyCenter {
  justify-content: center;
}

.Grid-cell--top {
  align-self: flex-start;
}

.Grid-cell--bottom {
  align-self: flex-end;
}

.Grid-cell--center {
  align-self: center;
}

.Grid-cell--autoSize {
  flex: none;
}

.Grid--fit > .Grid-cell {
  flex: 1;
}

.Grid--full > .Grid-cell {
  flex: 0 0 100%;
}

.Grid--1of2 > .Grid-cell {
  flex: 0 0 50%;
}

.Grid--1of3 > .Grid-cell {
  flex: 0 0 33.3333%;
}

.Grid--1of4 > .Grid-cell {
  flex: 0 0 25%;
}

@media (min-width: 384px) {
  .small-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .small-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .small-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .small-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .small-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}
@media (min-width: 600px) {
  .med-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .med-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .med-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .med-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .med-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}
/* Apply to Large screens 1024 and above */
@media (min-width: 1024px) {
  .large-Grid--fit > .Grid-cell {
    flex: 1;
  }
  .large-Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  .large-Grid--1of2 > .Grid-cell {
    flex: 0 0 50%;
  }
  .large-Grid--1of3 > .Grid-cell {
    flex: 0 0 33.3333%;
  }
  .large-Grid--1of4 > .Grid-cell {
    flex: 0 0 25%;
  }
}
/*
    Gutters between columns
*/
.Grid--gutters {
  margin: -1em 0 1em -1em;
}

.Grid--gutters > .Grid-cell {
  padding: 1em 0 0 1em;
}

.Grid--guttersLg {
  margin: -1.5em 0 1.5em -1.5em;
}

.Grid--guttersLg > .Grid-cell {
  padding: 1.5em 0 0 1.5em;
}

.Grid--guttersXl {
  margin: -2em 0 2em -2em;
}

.Grid--guttersXl > .Grid-cell {
  padding: 2em 0 0 2em;
}

@media (min-width: 384px) {
  .small-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .small-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .small-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .small-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .small-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .small-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
}
@media (min-width: 600px) {
  .med-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .med-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .med-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .med-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .med-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .med-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
}
@media (min-width: 1024px) {
  .large-Grid--gutters {
    margin: -1em 0 1em -1em;
  }
  .large-Grid--gutters > .Grid-cell {
    padding: 1em 0 0 1em;
  }
  .large-Grid--guttersLg {
    margin: -1.5em 0 1.5em -1.5em;
  }
  .large-Grid--guttersLg > .Grid-cell {
    padding: 1.5em 0 0 1.5em;
  }
  .large-Grid--guttersXl {
    margin: -2em 0 2em -2em;
  }
  .large-Grid--guttersXl > .Grid-cell {
    padding: 2em 0 0 2em;
  }
}
/* ===========================================================================================
 *   HACKS
 *   Misc CSS Hacks
============================================================================================== */
/*   NOTE
 *   -------------------------------------------------------------
 *   Browser specific hacks should NOT be placed in
 *   this file. This file is intended for generic workarounds
 *   that may be required due to third party components
----------------------------------------------------------------- */
/* ===========================================================================================
 *   DOORKEEPER
 *   This is required to work around hard coded HTML strings generated by the Doorkeeper GEM
 *
 *   Overide validation error messages:   <span class="error help-inline">
============================================================================================== */
body[data-controller=custom_doorkeepers] form .help-inline:before {
  border: none !important;
}
body[data-controller=custom_doorkeepers] form .help-inline:after {
  border: none !important;
}
body[data-controller=custom_doorkeepers] .error {
  vertical-align: middle;
  margin: 0 0 0 4px;
  padding-left: 16px;
  font-weight: bold;
  line-height: 1;
  color: #CC3333;
}

.morelink {
  font-weight: 300;
  font-size: 1.4em;
}

/* ===========================================================================================
 *   END
============================================================================================== */
/*
    The list of regions where application is accessible from.
    Used on support ticket form
 */
.HealthCheck .HealthCheck-item .HealthCheck-icon {
  vertical-align: middle;
}
.HealthCheck .HealthCheck-item .HealthCheck-label {
  font-size: 12px;
  padding-left: 4px;
  display: inline-block;
  vertical-align: middle;
}
.HealthCheck .HealthCheck-item--error {
  color: #e01f22;
}
.HealthCheck .HealthCheck-item--ok {
  color: #35B46E;
}
.HealthCheck .HealthCheck-item--partial {
  color: #EA8407;
}
.HealthCheck .HealthCheck-item--partial .HealthCheck-icon {
  top: 0;
}

.HealthCheck--padded .HealthCheck-item {
  padding: 6px 0;
}

/* Health check within the drawer component overlay */
.HealthCheckOverlay .HealthCheck-item {
  padding: 3px 0;
  cursor: help;
}

.HealthCheckOverlay .js_open_help_side_panel {
  display: none;
}

.HealthCheck-region {
  width: 280px;
  flex: none !important;
}

/* Cloud 66 font built with - Icon Moon
============================================================================================== */
@font-face {
  font-family: "cloud66-icons";
  src: url("/assets/c66-59931dadd94dfcfb93495af0f4d899713a56317a.eot");
  src: url("/assets/c66-59931dadd94dfcfb93495af0f4d899713a56317a.eot?#iefix") format("embedded-opentype"), url("/assets/c66-b88989a9a7d7d46360a1228125b8b518ae61f5d4.svg#icomoon") format("svg"), url("/assets/c66-6f20531f057ab20f1bb17d680bf4aae6ac78aa51.woff") format("woff"), url("/assets/c66-a403ba87e3aa884b24b7a1b3c2a2986deb257bb3.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Icon Classes
============================================================================================== */
[class^=icon-],
[class*=" icon-"] {
  position: relative;
  font-family: "cloud66-icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  user-select: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Gradient text */
.grad:before {
  background: -webkit-linear-gradient(#333, #eee) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------- */
.ico--action {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.6rem;
  line-height: 1;
}

/**
 * ICON SIZE MODIFIERS
 */
.ico--micro,
.ico--8px {
  font-size: 0.8rem;
}

.ico--Xsml,
.ico--10px {
  font-size: 1rem;
}

.ico--sml,
.ico--11px {
  font-size: 11px;
}

.ico--listItem {
  font-size: 12px;
  width: 12px;
  margin-right: 2px;
}

.ico--mini {
  font-size: 15px;
}

.ico--16px {
  font-size: 16px;
}

.ico--17px {
  font-size: 17px;
}

.ico--18px {
  font-size: 18px;
}

.ico--med {
  font-size: 16px;
}

.ico--lrg {
  font-size: 2.1rem;
}

.ico--cell {
  position: relative;
  top: 1px;
}

.ico--popOver {
  margin: 0 2px;
  vertical-align: text-bottom;
  color: #427dc4;
}
.ico--popOver:hover {
  cursor: help;
}

.ico-strong {
  color: #333;
}

.ico--modal {
  color: #427dc4;
}

/**
 * ICON COLOR MODIFIERS
 */
.ico--normal {
  color: #555;
}

.ico--muted {
  color: #999;
}

.ico-links {
  display: inline-block;
  line-height: 1;
}
.ico-links:hover {
  text-decoration: none;
}

.ico-link:hover {
  text-decoration: none;
}

.ico-link i {
  position: relative;
  top: 3px;
  margin: 0 3px 0 1px;
  font-size: 15px;
}

.ico-link:focus {
  outline: none;
}

.ico-title {
  display: inline-block;
  padding: 0 0.15em;
  position: relative;
  top: 2px;
}

.ico-heading {
  font-size: 1.2rem;
  display: inline-block;
  vertical-align: baseline;
  padding: 0 1px 0 0;
  color: #666;
}

[class^=icon-].is-disabled,
[class*=" icon-"].is-disabled {
  color: #999 !important;
  opacity: 0.6 !important;
}

.icon-has-error {
  color: #e01f22 !important;
}

.icon-has-warning {
  color: #EA8407 !important;
}

.icon-is-fine {
  color: rgb(40, 167, 69) !important;
}

.icon-card {
  font-size: 1.8rem;
}

/* ===================================================================================
    MAIN CLOUD66 - APP ICON LIBRARY
======================================================================================  */
.icon-plus:before {
  content: "!";
}

.icon-plus-alt:before {
  content: '"';
}

.icon-minus:before {
  content: "#";
}

.icon-minus-alt:before {
  content: "$";
}

.icon-play:before {
  content: "%";
}

.icon-pause:before {
  content: "&";
}

.icon-stop:before {
  content: "'";
}

.icon-play-alt:before {
  content: "(";
}

.icon-arrowup:before {
  content: ")";
}

.icon-pen-alt-stroke:before {
  content: "+";
}

.icon-arrow-left-alt1:before {
  content: ",";
}

.icon-arrow-right-alt1:before {
  content: "-";
}

.icon-cog:before {
  content: ".";
}

.icon-checkmark:before {
  content: "/";
}

.icon-check-alt:before {
  content: "0";
}

.icon-x:before {
  content: "1";
}

.icon-remove-x:before {
  content: "2";
}

.icon-undo:before {
  content: "3";
}

.icon-star:before {
  content: "4";
}

.icon-arrow-left:before {
  content: "5";
}

.icon-arrow-right:before {
  content: "6";
}

.icon-spin:before {
  content: "7";
}

.icon-eye:before {
  content: "8";
}

.icon-replication_master:before,
.icon-database:before {
  content: "9";
}

.icon-replication_slave:before,
.icon-database-slave:before {
  font-weight: 200;
  content: ":";
}

.icon-db:before,
.icon-database-3:before {
  content: ";";
}

.icon-comments:before {
  content: "=";
}

.icon-loading:before {
  content: "<";
}

.icon-loading-2:before {
  content: ">";
}

.icon-loading-3:before {
  content: "?";
}

.icon-key:before {
  content: "@";
}

.icon-ssl_certificate:before,
.icon-locked:before {
  content: "A";
}

.icon-wrench:before {
  content: "B";
}

.icon-cog-2:before {
  content: "C";
}

.icon-cog-3:before {
  content: "D";
}

.icon-cogs:before {
  content: "E";
}

.icon-wrench-2:before {
  content: "F";
}

.icon-stats-up:before {
  content: "G";
}

.icon-stairs:before {
  content: "H";
}

.icon-rating:before {
  content: "I";
}

.icon-rails_stack:before,
.icon-diamond:before {
  content: "J";
}

.icon-diamond-2:before {
  content: "K";
}

.icon-atom:before {
  content: "L";
}

.icon-remove:before {
  content: "M";
}

.icon-switch:before {
  content: "N";
}

.icon-grid:before {
  content: "O";
}

.icon-grid-view:before {
  content: "P";
}

.icon-menu:before {
  content: "Q";
}

.icon-menu-2:before {
  content: "R";
}

.icon-list-view:before,
.icon-stacks:before {
  content: "S";
}

.icon-menu-4:before {
  content: "T";
}

.icon-menu-5:before {
  content: "U";
}

.icon-cloud:before {
  content: "V";
}

.icon-cloud-down:before {
  content: "W";
  font-size: 20px;
  top: 2px;
}

td .icon-cloud-down:before {
  position: relative;
  top: 2px;
}

.icon-eye-2:before {
  content: "X";
}

.icon-eye-3:before {
  content: "Y";
}

.icon-eye-blocked:before {
  content: "Z";
}

.icon-warning:before {
  content: "[";
}

.icon-warning-2:before {
  content: "\\";
}

.icon-notification:before {
  content: "]";
}

.icon-info:before {
  content: "^";
}

.icon-info-2:before {
  content: "_";
}

.icon-cancel:before {
  content: "`";
}

.icon-checkmark-2:before {
  content: "a";
}

.icon-minus-2:before {
  content: "b";
}

.icon-plus-2:before {
  content: "c";
}

.icon-minus-3:before {
  content: "d";
}

.icon-plus-3:before {
  content: "e";
}

.icon-enter:before {
  content: "f";
}

.icon-exit:before {
  content: "g";
}

.icon-play-2:before {
  content: "h";
}

.icon-pause-2:before {
  content: "i";
}

.icon-stop-2:before {
  content: "j";
}

.icon-volume-high:before {
  content: "k";
}

.icon-volume-medium:before {
  content: "l";
}

.icon-volume-increase:before {
  content: "m";
}

.icon-volume-decrease:before {
  content: "n";
}

.icon-mute:before {
  content: "o";
}

.icon-unmute:before {
  content: "p";
}

.icon-volume-low:before {
  content: "q";
}

.icon-loop:before {
  content: "r";
}

.icon-loop:focus {
  outline: none;
}

.icon-shuffle:before {
  content: "s";
}

.icon-arrow-first:before {
  content: "t";
}

.icon-arrow-last:before {
  content: "u";
}

.icon-arrow-up:before {
  content: "v";
}

.icon-arrow-right-2:before {
  content: "w";
}

.icon-arrow-down:before {
  content: "x";
}

.icon-arrow-left-2:before {
  content: "y";
}

.icon-arrow-up-2:before {
  content: "z";
}

.icon-arrow-right-3:before {
  content: "{";
}

.icon-arrow-down-2:before {
  content: "|";
}

.icon-arrow-left-3:before {
  content: "}";
}

.icon-arrow-up-3:before {
  content: "\e000";
}

.icon-arrow-down-3:before {
  content: "\e001";
}

.icon-arrow-right-4:before {
  content: "\e002";
}

.icon-arrow-left-4:before {
  content: "\e003";
}

.icon-arrow-up-left:before {
  content: "\e004";
}

.icon-arrow-up-4:before {
  content: "\e005";
}

.icon-arrow-up-right:before {
  content: "\e006";
}

.icon-arrow-down-right:before {
  content: "\e007";
}

.icon-arrow-down-4:before {
  content: "\e008";
}

.icon-arrow-down-left:before {
  content: "\e009";
}

.icon-menu-close:before {
  content: "\e00a";
}

.icon-menu-6:before {
  content: "\e00b";
}

.icon-menu-7:before {
  content: "\e00c";
}

.icon-tab:before {
  content: "\e00d";
}

.icon-radio-checked:before {
  content: "\e00e";
}

.icon-facebook:before {
  content: "\e010";
}

.icon-twitter:before {
  content: "\e011";
}

.icon-feed:before {
  content: "\e012";
}

.icon-github:before {
  content: "\e013";
}

.icon-github-2:before {
  content: "\e014";
}

.icon-git-branch:before {
  content: "\e015";
}

.icon-apple:before {
  content: "\e016";
}

.icon-finder:before {
  content: "\e017";
}

.icon-linux:before {
  content: "\e018";
}

.icon-windows:before {
  content: "\e019";
}

.icon-pencil:before {
  content: "\e01a";
}

.icon-pencil-2:before {
  content: "\e01b";
}

.icon-pencil-3:before {
  content: "\e01c";
}

.icon-file-add:before {
  content: "\e01d";
}

.icon-file-remove:before {
  content: "\e01e";
}

.icon-file-download:before {
  content: "\e01f";
}

.icon-copy:before {
  content: "\e020";
}

.icon-mobile:before {
  content: "\e021";
}

.icon-tablet:before {
  content: "\e022";
}

.icon-file:before {
  content: "\e023";
}

.icon-drive:before {
  content: "\e024";
}

.icon-calendar:before {
  content: "\e025";
}

.icon-locked-2:before {
  content: "\e026";
}

.icon-unlocked:before {
  content: "\e027";
}

.icon-remove-2:before {
  content: "\e028";
}

.icon-next:before {
  content: "\e029";
}

.icon-previous:before {
  content: "\e02a";
}

.icon-first:before {
  content: "\e02b";
}

.icon-last:before {
  content: "\e02c";
}

.icon-loop-2:before {
  content: "\e02d";
}

.icon-loop-3:before {
  content: "\e02e";
}

.icon-file-pdf:before {
  content: "\e00f";
}

.icon-file-excel:before {
  content: "\e02f";
}

.icon-file-xml:before {
  content: "\e030";
}

.icon-file-code:before {
  content: "\e031";
}

.icon-users:before {
  content: "\e033";
}

.icon-users-2:before {
  content: "\e034";
}

.icon-user-remove:before {
  content: "\e035";
}

.icon-user-add:before {
  content: "\e036";
}

.icon-user:before {
  content: "\e037";
}

.icon-pen:before {
  content: "\e032";
}

.icon-mail:before {
  content: "\e038";
}

.icon-load_balancer:before,
.icon-share:before {
  content: "\e039";
}

.icon-mail-2:before {
  content: "\e03a";
}

.icon-mail-3:before {
  content: "\e03b";
}

.icon-new-tab:before {
  content: "\e03c";
}

.icon-quote:before {
  content: "\e03d";
}

.icon-quote-2:before {
  content: "\e03e";
}

.icon-stats-down:before {
  content: "\e03f";
}

.icon-stairs-2:before {
  content: "\e040";
}

.icon-rating-2:before {
  content: "\e041";
}

.icon-rating-3:before {
  content: "\e042";
}

.icon-storage:before {
  content: "\e043";
}

.icon-equalizer:before {
  content: "\e044";
}

.icon-bug:before {
  content: "\e045";
}

.icon-graph:before {
  content: "\e046";
}

.icon-lab:before {
  content: "\e047";
}

.icon-bomb:before {
  content: "\e048";
}

.icon-meter-slow:before {
  content: "\e049";
}

.icon-meter-medium:before {
  content: "\e04a";
}

.icon-meter-fast:before {
  content: "\e04b";
}

.icon-lamp:before {
  content: "\e04c";
}

.icon-trash:before {
  content: "\e04d";
}

.icon-remove-4:before {
  content: "\e04e";
}

.icon-recycle:before {
  content: "\e04f";
}

.icon-home:before {
  content: "\e050";
}

.icon-pencil-4:before {
  content: "\e051";
}

.icon-new:before {
  content: "\e052";
}

.icon-file-2:before {
  content: "\e053";
}

.icon-docs:before {
  content: "\e054";
}

.icon-stack-2:before {
  content: "\e055";
}

.icon-folder-add:before {
  content: "\e056";
}

.icon-folder-remove:before {
  content: "\e057";
}

.icon-folder-download:before {
  content: "\e058";
}

.icon-folder-upload:before {
  content: "\e059";
}

.icon-tag:before {
  content: "\e05a";
}

.icon-download:before {
  content: "\e05b";
}

.icon-upload:before {
  content: "\e05c";
}

.icon-undo:before {
  content: "\e05d";
}

.icon-redo:before {
  content: "\e05e";
}

.icon-rotate:before {
  content: "\e05f";
}

.icon-rotate-2:before {
  content: "\e060";
}

.icon-comments-2:before {
  content: "\e061";
}

.icon-comments-3:before {
  content: "\e062";
}

.icon-refresh:before {
  content: "\e063";
}

.icon-fire:before {
  content: "\e064";
}

.icon-lightning:before {
  content: "\e065";
}

.icon-signup:before {
  content: "\e066";
}

.icon-clipboard:before {
  content: "\e067";
}

.icon-list:before {
  content: "\e068";
}

.icon-grid-view-alt:before {
  content: "\e069";
}

.icon-download-2:before {
  content: "\e06a";
}

.icon-globe:before {
  content: "\e06b";
}

.icon-link:before {
  content: "\e06c";
}

.icon-flag:before {
  content: "\e06d";
}

.icon-bookmark:before {
  content: "\e06e";
}

.icon-bookmark-2:before {
  content: "\e06f";
}

.icon-cancel-2:before {
  content: "\e070";
}

.icon-help:before {
  content: "\e071";
}

.icon-volume:before {
  content: "\e072";
}

.icon-mute-3:before {
  content: "\e073";
}

.icon-key-right:before {
  content: "\e074";
}

.icon-broadcast:before {
  content: "\e075";
}

.icon-blocked:before {
  content: "\e076";
}

.icon-power-cord:before {
  content: "\e077";
}

.icon-volume5:before {
  content: "\e078";
}

.icon-volume4:before {
  content: "\e079";
}

.icon-volume3:before {
  content: "\e07a";
}

.icon-volume2:before {
  content: "\e07b";
}

.icon-volume1:before {
  content: "\e07c";
}

.icon-library:before {
  content: "\e07e";
}

.icon-mail-4:before {
  content: "\e07d";
}

.icon-balance:before {
  content: "\e07f";
}

.icon-equalizer:before {
  content: "\e080";
}

.icon-agents:before,
.icon-shield:before {
  content: "[";
}

.icon-protect:before {
  content: "\e081";
}

.icon-shield-2:before {
  content: "\e082";
}

.icon-backup:before {
  content: "\e000";
}

.icon-file-pdf:before {
  content: "\e082";
}

.icon-add:before {
  content: "!";
}

.icon-linkedin:before {
  content: "*";
}

.icon-cloud-download:before {
  content: "\e082";
}

.icon-cloud-upload:before {
  content: "\e083";
}

.icon-console:before {
  content: "\e605";
}

.icon-disk:before {
  content: "\e606";
}

.icon-square:before {
  content: "\ea53";
}

.icon-cancel-circle:before {
  content: "\ea0d";
}

.icon-blocked:before {
  content: "\ea0e";
}

.icon-compass:before {
  content: "\e94a";
}

.icon-sphere:before {
  content: "\e9c9";
}

.icon-earth:before {
  content: "\e9ca";
}

.icon-servers:before {
  content: "\e608";
}

.icon-traffic:before {
  content: "\e604";
}

.icon-play-1:before {
  content: "\e912";
}

.icon-video-camera:before {
  content: "\e914";
}

.icon-file-play:before {
  content: "\e929";
}

.icon-file-video:before {
  content: "\e92a";
}

.icon-clipboard-1:before {
  content: "\e9b8";
}

.icon-file-text:before {
  content: "\e922";
}

.icon-credit-card:before {
  content: "\e93f";
}

.icon-lifebuoy:before {
  content: "\e941";
}

.icon-hammer:before {
  content: "\e996";
}

.icon-table2:before {
  content: "\ea71";
}

.icon-checkbox-checked:before {
  content: "\e603";
}

.icon-coin-dollar:before {
  content: "\e93b";
}

.icon-cloud-check:before {
  content: "\e9c4";
}

.icon-banknote:before {
  content: "\e606";
}

.icon-dimage:before {
  content: "\e603";
}

.icon-error:before {
  content: "\e601";
}

.icon-clock:before {
  content: "\e600";
}

.icon-container {
  background-color: #F9F9F9;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
  position: relative;
  top: 1px;
  display: inline-block;
  vertical-align: baseline;
  width: 15px;
  height: 10px;
  border: 1px solid #D1D1D1;
  border-radius: 2px;
}

.disabled-item {
  opacity: 0.2 !important;
}

.icon-spaced {
  margin-left: 8px;
}

.stack-info {
  position: relative;
  top: 3px;
  display: inline-block;
  margin: 0 0.2em;
  color: #F99422 !important;
}
.stack-info:hover {
  cursor: help;
}

.btn [class^=icon-]:before,
.btn [class*=" icon-"]:before {
  font-size: 10px;
}

/* ===================================================================================
    POSITIONING HACKS
======================================================================================  */
/* ----------------------------------------------------------------------------------------
 * SVG Paths
 * ---------------------------------------------------------------------------------------- */
.icon-svg-mini {
  display: inline-block;
  width: 14px;
  height: 14px;
  color: #758088;
}

.icon-svg-medium {
  display: inline-block;
  width: 24px;
  height: 24px;
  color: #7A868E;
}

.icon-svg-large {
  display: inline-block;
  width: 26px;
  height: 26px;
  color: #7A868E;
}

.has-error .add-in-ico-path {
  fill: rgb(203, 36, 49) !important;
}
.has-error .media-list-mini-cta {
  color: rgb(203, 36, 49) !important;
  text-decoration: underline !important;
}
.has-error path {
  fill: rgb(203, 36, 49);
}

.has-warning .add-in-ico-path {
  fill: #EA8407 !important;
}
.has-warning .media-list-mini-cta {
  color: #EA8407 !important;
  text-decoration: underline !important;
}

/* ----------------------------------------------------------------------------------------
 * Background image icons
 * ---------------------------------------------------------------------------------------- */
/* image replacement */
/* show spinner
-------------------------------------------------------------------------------- */
.is-loading {
  padding-left: 22px !important;
  background: transparent url("/assets/loading/loading-59e5dd8b54b5f94d9ed02748006ecce9dc18c26d.gif") no-repeat center left !important;
}

.is-loading-after {
  padding-right: 22px !important;
  background: transparent url("/assets/loading/loading-59e5dd8b54b5f94d9ed02748006ecce9dc18c26d.gif") no-repeat center right !important;
  background-size: 16px 16px !important;
}

/* Retina media query
-------------------------------------------------------------------------------- */
@media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
  /* Supply 2x sized background images for retina display and reduce size by half */
  .is-loading-after {
    background: transparent url("/assets/loading/loading32-9914823f45d314c076f9d27ef45706328a74640c.gif") no-repeat center right !important;
    background-size: 16px 16px !important;
  }
  .status-is-loading,
  .is-loading {
    background: transparent url("/assets/loading/loading32-9914823f45d314c076f9d27ef45706328a74640c.gif") no-repeat center left !important;
    background-size: 16px 16px !important;
  }
}
/* SVG spinner
-------------------------------------------------------------------------------- */
.spinner-svg {
  display: inline-block;
  background: transparent url("/assets/loading/spinner-02760f17683383d78db54c5350c8711c5f6f8a45.svg");
  width: 16px;
  height: 16px;
  background-size: contain;
  position: relative;
  opacity: 0.8;
  animation: rotate 1.5s infinite steps(12);
}

.spinner-svg-med {
  width: 32px;
  height: 32px;
}

.spinner-center {
  display: block !important;
  margin: 0 auto;
}

.spinner-svg-sml {
  width: 13px;
  height: 13px;
  vertical-align: middle;
}

.spinner-svg-sml--leftMargin {
  margin-left: 3px;
}

.spinner-input {
  margin-left: 0.5rem;
}

@keyframes "rotate" {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes "rotate" {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes "rotate" {
  from {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.bubbles-svg {
  display: inline-block;
  background: transparent url("/assets/loading/bubbles-066e1af376c724741f148255553fa3ddd4b51ab5.svg") no-repeat;
  width: 16px;
  height: 16px;
  background-size: contain;
  position: relative;
  opacity: 0.8;
}

.bubbles-svg-sml {
  width: 18px;
  height: 12px;
  vertical-align: middle;
}

.bubbles-svg-sml--marginLeft {
  margin-left: 3px;
}

.LoadingBubbles {
  display: inline-block;
  background: transparent url("/assets/loading/bubbles_black-fbacc627056b388d6a9eeba7abe3e7974042ca62.svg") no-repeat;
  width: 22px;
  height: 16px;
  background-size: contain;
  position: relative;
  opacity: 0.8;
}

/* Icon ( start to refactor icons to BEM )
============================================================================================== */
/*
    Use only for SVG sprite icons
*/
.Icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.Icon--muted {
  stroke: #B6B8BB;
  fill: #B6B8BB;
}

.Icon--red {
  color: rgb(203, 36, 49);
  stroke: rgb(203, 36, 49);
  fill: rgb(203, 36, 49);
}

.Icon--green {
  color: rgb(40, 167, 69);
}

.Icon--amber {
  color: #EA8407;
}

.Icon--normal {
  color: #4b545b;
  fill: #4b545b;
}

.Icon-label {
  display: inline-block;
  margin-left: 3px;
}

/*
    Icon Sizes
 */
.u-iconBlue path {
  fill: #546168 !important;
}

.Icon--tableRow {
  position: relative;
  top: 2px;
  left: 3px;
}

.Icon--tableRowPadded {
  position: relative;
  top: 2px;
  margin-right: 6px;
}

.Icon--tableRowPadded4 {
  position: relative;
  top: 2px;
  margin-right: 4px;
}
@media (max-width: 620px) {
  .Icon--tableRowPadded4 {
    display: none;
  }
}

.Icon--10 {
  width: 10px !important;
  height: 10px !important;
}

.Icon--xxsmall,
.Icon--11 {
  width: 11px !important;
  height: 11px !important;
}

.Icon--xsmall,
.Icon--12 {
  width: 12px !important;
  height: 12px !important;
}

.Icon.Icon--nav,
.Icon--13 {
  width: 13px !important;
  height: 13px !important;
}

.Icon--small,
.Icon--14 {
  width: 14px !important;
  height: 14px !important;
}

.Icon--15 {
  width: 15px !important;
  height: 15px !important;
}

.Icon--16 {
  width: 16px !important;
  height: 16px !important;
}

.Icon--17 {
  width: 17px !important;
  height: 17px !important;
}

.Icon--18 {
  width: 18px !important;
  height: 18px !important;
}

.Icon--19 {
  width: 19px !important;
  height: 19px !important;
}

.Icon--20 {
  width: 20px !important;
  height: 20px !important;
}

.Icon--22 {
  width: 22px !important;
  height: 22px !important;
}

.Icon--23 {
  width: 23px !important;
  height: 23px !important;
}

.Icon--26 {
  width: 26px !important;
  height: 26px !important;
}

.Icon--30 {
  width: 30px !important;
  height: 30px !important;
}

.Icon--36 {
  width: 36px !important;
  height: 36px !important;
}

.Icon--40 {
  width: 40px !important;
  height: 40px !important;
}

.Icon--46 {
  width: 46px !important;
  height: 46px !important;
}

.Icon--54 {
  width: 54px !important;
  height: 54px !important;
}

.Icon--upshift {
  position: relative;
  top: -1px;
}

.Icon--title {
  position: relative;
  top: 1px;
  margin-right: 4px;
  color: #748b93 !important;
}

.Icon--message {
  position: relative;
  margin-right: 4px;
}

.Icon--table {
  position: relative;
  top: 3px;
}

.Icon--toolBarItem {
  position: relative;
  top: 2px;
}

.Icon--popover {
  position: relative;
  top: 2px;
  margin-right: 2px;
}

.IconSmallWrap {
  display: inline-block;
  min-width: 16px;
}

.Icon--singleRowActionMiddle {
  position: relative;
  vertical-align: middle;
  top: 10px;
}

.icon--formWrap {
  top: 3px;
}

.Icon--downShift1 {
  position: relative;
  top: 1px;
}

.Icon--downShift {
  position: relative;
  top: 2px;
}

/*
    SVG Logo colors
    set common logo colors
*/
/* default rails red */
.logo-rails rect,
.logo-rails path {
  fill: #cc0000;
}

/* default node green */
.logo-node rect,
.logo-node path {
  fill: #80be42;
}

option#icon-github {
  background: transparent url("/assets/logo/github_mark-ed44a5240eb83d70b9ba955790b79347b9d9991b.svg") no-repeat 0 1px;
  background-repeat: no-repeat;
  padding-left: 17px;
  background-size: 13px 13px;
}

option#icon-git-repo {
  background: transparent url("/assets/logo/git_icon-b414a2798a7a99feb5275cccf03289cbb9503977.png") no-repeat 0 1px;
  background-repeat: no-repeat;
  padding-left: 17px;
  background-size: 13px 13px;
}

option#icon-docker-image {
  background: transparent url("/assets/logo/docker_logo_black-4135a22938c69e6872d691d46a729e82610e372a.svg") no-repeat 0 1px;
  background-repeat: no-repeat;
  padding-left: 17px;
  background-size: 13px 13px;
}

/* jquery ui generated styles
----------------------------------*/
.ui-autocomplete {
  padding: 3px 0;
  min-width: 9em;
  z-index: 999999 !important;
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: none;
}

.ui-menu .ui-menu {
  position: absolute;
}

.ui-menu .ui-menu-item {
  position: relative;
  margin: 0;
  cursor: pointer;
}

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

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

/* Theme: Component containers
----------------------------------*/
.ui-widget-content {
  background-clip: padding-box;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(34, 25, 25, 0.2);
}

.ui-widget-content a {
  padding: 2px 6px;
  display: block;
  text-decoration: none;
  font-size: 1.2rem;
  color: #333;
}

.ui-state-focus {
  transition: none;
  background: #0088cc;
  color: #fff !important;
}

/* ===========================================================================================
 *  LAYOUT
 *  Primary Layout - August 2013 Redesign.
============================================================================================== */
/*  GLobals
    Applying border-box to all el's causes an issue
    with input's in chrome
----------------------------------------------------- */
/*  LAYOUT VARIABLES
----------------------------------------------------- */
/* ===========================================================================================
 *  PRIMARY LAYOUT COMPONENTS
============================================================================================== */
html,
body {
  height: 100%;
}

/*  AppContainer - Primary centered wrapper
============================================================================================== */
.AppContainer {
  margin: 0 auto;
  width: var(--layout-container-percent);
  max-width: var(--layout-container-maxwidth);
  /* < 1024px grid - linearised layout */
}
.AppContainer::after {
  clear: both;
  content: "";
  display: block;
}
@media only screen and (max-width: 1023px) {
  .AppContainer {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.AppContainer--topNav {
  width: 92%;
  max-width: 112em;
}

#emc-logo {
  width: 70px;
  position: absolute;
  right: 150px;
  top: -2px;
}

/*  Product Grid
    This is a different layout variation used for blank slate users. I.E no dashboard yet
    CTA's for start trial
    Use case is products grid blank slate.
============================================================================================== */
/* Choose containers or native products */
.l-products .AppContainer {
  max-width: 62em;
}
.l-products .Sidebar {
  display: none;
}
.l-products .Content {
  width: 100%;
}

/*  Wider Dashboard Layout
    Layout can contain 3*3 responsive grid
============================================================================================== */
.l-wideCardsView .AppContainer {
  width: var(--layout-container-percent);
  max-width: var(--layout-container-maxwidth);
}
.l-wideCardsView .Content {
  width: calc(100% - 236px);
}
@media only screen and (max-width: 1023px) {
  .l-wideCardsView .Content {
    width: 100%;
  }
}
.l-wideCardsView .Sidebar {
  width: 236px;
  padding-left: 26px;
  /* Gutter width */
}
@media only screen and (max-width: 1023px) {
  .l-wideCardsView .Sidebar {
    padding-left: 0;
  }
}

body.l-wideCardsView.l-wideCardsView--noSidebar .AppContainer {
  max-width: 1024px;
}
body.l-wideCardsView.l-wideCardsView--noSidebar .Content {
  width: 100%;
}
body.l-wideCardsView.l-wideCardsView--noSidebar .Sidebar {
  display: none;
}

.l-pinnedStacks .Sidebar {
  padding-top: 23px;
}

/*  Wide Page Layout
    A wider percentage based two column layout.
    Use-case is formations show page. i.e. displaying very wide tabular data
============================================================================================== */
@media all and (max-width: 1280px) {
  .u-fullWidthLayout .AppContainer--main {
    width: 93% !important;
  }
}
.u-fullWidthLayout .AppContainer {
  max-width: 90%;
}
@media all and (max-width: 1280px) {
  .u-fullWidthLayout .AppContainer {
    max-width: 100%;
  }
}
@media all and (min-width: 1281px) {
  .u-fullWidthLayout .AppContainer {
    max-width: 1260px;
  }
}
.u-fullWidthLayout .Content {
  width: calc(100% - 240px);
}
@media only screen and (max-width: 1023px) {
  .u-fullWidthLayout .Content {
    width: 100%;
  }
}
.u-fullWidthLayout .Sidebar {
  width: 240px;
  padding-left: 26px;
  /* Gutter width */
}
@media only screen and (max-width: 1023px) {
  .u-fullWidthLayout .Sidebar {
    padding-left: 0;
  }
}

.u-fullWidthWide .AppContainer {
  max-width: 90%;
}
.u-fullWidthWide .Content {
  width: 100%;
}
.u-fullWidthWide .Sidebar {
  display: none;
}

/*  Hide the footer & don't set a min-height on the main element
    This is useful if you need an element that takes up full viewport height and you don't
    want the conataining page to scroll. E.G text editor

============================================================================================== */
.u-fullHeightComponent #page-footer {
  display: none !important;
}
.u-fullHeightComponent .Main {
  min-height: auto !important;
}

/*  Wide Page Layout
    This is a wider percentage based two column layout.
    Initial use case: LiveLog
============================================================================================== */
.l-widePage .AppContainer {
  max-width: 1320px;
}
.l-widePage .Content {
  width: calc(100% - 320px);
}
@media only screen and (max-width: 1023px) {
  .l-widePage .Content {
    width: 100%;
  }
}
.l-widePage .Sidebar {
  width: 320px;
  padding-left: 14px;
  /* Gutter width */
}
@media only screen and (max-width: 1023px) {
  .l-widePage .Sidebar {
    padding-left: 0;
  }
}

/*  Fixed width page: use case: docker onboarding first step
============================================================================================== */
.l-fixed .AppContainer {
  width: 1084px;
}
.l-fixed .Content {
  width: 700px;
}
.l-fixed .Sidebar {
  width: 360px;
}

/*  =FORM 1 AND 2 OR NARROWER WIDTH LAYOUT REQUIREMENTS
============================================================================================== */
.full-width-wide .Content {
  width: 100%;
}
.full-width-wide .Sidebar {
  display: none;
}

.full-width-wide-medium .AppContainer {
  max-width: 1100px;
}
.full-width-wide-medium .Content {
  width: 100%;
}
.full-width-wide-medium .Sidebar {
  display: none;
}

.full-width-wide-narrow .AppContainer {
  max-width: 960px;
}
.full-width-wide-narrow .Content {
  width: 100%;
}
.full-width-wide-narrow .Sidebar {
  display: none;
}

.full-width-wide-1024 .AppContainer {
  max-width: 1024px;
}
.full-width-wide-1024 .Content {
  width: 100%;
}
.full-width-wide-1024 .Sidebar {
  display: none;
}

.full-width-widest .AppContainer {
  max-width: 1380px;
}
.full-width-widest .Content {
  width: 100%;
}
.full-width-widest .Sidebar {
  display: none;
}

.wide-sidebar .Content {
  width: calc(100% - 400px);
}
.wide-sidebar .Sidebar {
  width: 400px;
  padding-left: 26px;
  /* Gutter width */
}
@media only screen and (max-width: 1023px) {
  .wide-sidebar .Sidebar {
    padding-left: 0;
  }
}

/*  =MAIN - the main content begins
============================================================================================== */
.Main {
  min-height: 88%;
  /* Note: causes issues with position: sticky elements, needs refactoring */
  background: #fff;
}

/* Darker Grey Background option */
body.body-loggedOut.t-BgShaded {
  background: #FDFDFD;
}

body.t-BgShaded .Main {
  background: #FDFDFD;
  /* lightest shade of bg */
}

body.body-loggedOut.t-BgLgrey {
  background: #fafafa;
}

body.t-BgLgrey .Main {
  background: #FAFBFC;
  /* bluer tint */
}

body.t-BgGrey .Main {
  background: #f9f9f9;
}

body.t-BgWhite .Main {
  background: white;
}

body.empty-dashboard .Main {
  background: #fff;
}

body.formations-dashboard .Main {
  background: #f7f8f9;
}

/*  =SIDEBAR - Left hand side navigation
============================================================================================== */
.Sidebar {
  box-sizing: border-box;
  float: right;
  width: 230px;
  /* this width is used by the calc for .Content (LINE 205) */
  padding-left: 26px;
  padding-bottom: 1.4em;
}
@media only screen and (max-width: 1023px) {
  .Sidebar {
    float: none !important;
    width: auto !important;
    padding: 0;
    padding-bottom: 0.5em;
  }
}

.Sidebar-subSection {
  margin: 0 0 12px 0;
}

/*  =MAIN CONTENT - The primary content area
============================================================================================== */
.Content {
  position: relative;
  /* Relative positioning context for top notifications */
  float: left;
  width: calc(100% - 230px);
  margin-bottom: 2em;
}
@media only screen and (max-width: 1023px) {
  .Content {
    float: none;
    width: auto;
  }
}

/*  =LAYOUT MODIFIER CLASS
/*   Left hand sidebar (Account Settings)
/*
============================================================================================== */
.sidebar-l .AppContainer {
  width: var(--layout-container-percent);
  max-width: var(--layout-container-maxwidth);
}
.sidebar-l .Sidebar {
  float: left;
  padding: 0 25px 0 0;
  width: 228px;
}
@media only screen and (max-width: 1023px) {
  .sidebar-l .Sidebar {
    padding: 0;
  }
}
.sidebar-l .Content {
  float: right;
  width: calc(100% - 228px);
}
@media only screen and (max-width: 1023px) {
  .sidebar-l .Content {
    float: none;
    width: auto;
  }
}

/*  =LAYOUT SINGLE COLUMN FULL WIDTH
/*
============================================================================================== */
.full-width-l .Sidebar {
  display: none;
}
.full-width-l .Content {
  width: 100%;
}

/*  =FOOTER
============================================================================================== */
.Footer {
  padding: 2.8em 0;
  border-top: 1px solid #ededed;
}
@media (max-width: 620px) {
  .Footer {
    padding: 0.8em 0;
  }
}
.Footer .small-print {
  color: #9B9B9B;
}
@media only screen and (max-width: 1023px) {
  .Footer .small-print {
    display: none;
  }
}
.Footer .GlobalNavSecondary {
  float: right;
}
@media only screen and (max-width: 1023px) {
  .Footer .GlobalNavSecondary {
    float: none;
  }
}
.Footer .Whats-New {
  position: absolute !important;
  margin-left: -27px;
  margin-top: -9px;
}

/*  =MISC ARTICLES
============================================================================================== */
.article-a {
  padding: 0 2em 0 0.6em;
}

/*  =Onboarding
    Hide non critical common nav elements to reduce distraction
============================================================================================== */
body.onboarding .GlobalSearchMenu,
body.onboarding .Messages,
body.onboarding .Icon-messages {
  visibility: hidden;
}
body.onboarding .status-link,
body.onboarding #page-footer {
  display: none;
}

/*  Data attribute to determine if the account is onboarding i.e no stack count
============================================================================================== */
body[data-onboarding=true] .Nav-link--clusters,
body[data-onboarding=true] .GlobalSearchMenu,
body[data-onboarding=true] .Messages-badge {
  visibility: hidden !important;
}
body[data-onboarding=true] a[href="/custom_environments"],
body[data-onboarding=true] a[href="/buildgrid_settings"] {
  display: none;
}

/* ===========================================================================================
 *  LAYOUT
 *  Top Header navigation bar
=============================================================================================== */
/**
 *  Top global site nav bar - containing global nav.
 */
.HeaderNav {
  box-sizing: border-box;
  position: relative;
  padding: 0.8em 0;
  background: #FAFBFC;
  box-shadow: inset 0px 0px 0px 1px #e2e2e2, 1px 1px 6px rgba(0, 0, 0, 0.045);
}

/**
 *  Color coding for dev/staging environments.
 */
.HeaderNav--development {
  border-top: 3px solid #00b9fe;
  background: rgba(122, 216, 254, 0.3) !important;
}

.HeaderNav--staging {
  border-top: 3px solid #00b9fe;
  background: rgba(160, 145, 242, 0.3) !important;
}

/**
 *  Alternative dark color scheme for infrastructure dashboard differentiation
 */
.HeaderNav--dark {
  background: #303E4D;
}
.HeaderNav--dark .Nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.HeaderNav--dark .caret {
  border-top-color: rgba(255, 255, 255, 0.85) !important;
}
.HeaderNav--dark .status-link {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.HeaderNav--dark .status-green,
.HeaderNav--dark .status-green:hover {
  color: #6ce890 !important;
}
.HeaderNav--dark .status-green::before {
  background: #6ce890 !important;
}
.HeaderNav--dark .status-red,
.HeaderNav--dark .status-red:hover {
  color: #ff4f68 !important;
}
.HeaderNav--dark .status-red::before {
  background-color: #ff4f68 !important;
}
.HeaderNav--dark .Nav-link:hover {
  color: #fff !important;
}
.HeaderNav--dark .Messages-icon {
  fill: #ddd !important;
}
.HeaderNav--dark .MobileNav-icon {
  fill: #ddd !important;
  color: #ddd !important;
  outline: 1px solid red;
}
.HeaderNav--dark .Form-inputGlobal {
  background-color: rgba(255, 255, 255, 0.09) !important;
  border: none;
  transition: all 0.3s linear;
}
.HeaderNav--dark .Form-inputGlobal:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
}
.HeaderNav--dark .is-active {
  color: #fff !important;
}
.HeaderNav--dark .GlobalSearchMenu-spinner {
  display: none;
}

/**
 *  Global nav lists
 */
.GlobalNav {
  padding-top: 6px !important;
}
@media only screen and (max-width: 1023px) {
  .GlobalNav {
    margin-top: 0;
  }
}

/**
 *  Fixed position header modifier
 */
.HeaderNav--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1039;
}

.HeaderNav--fixed.HeaderNav--nojs {
  z-index: 10;
  background: rgb(252, 234, 156);
  padding: 18px 0.5em;
}

/**
 *  FORM - GlobalSearch
 */
.GlobalSearch {
  /* < 1024px grid */
  display: inline-block;
  float: left;
  margin: 0 0 0 1.8em;
}
@media only screen and (max-width: 1023px) {
  .GlobalSearch {
    display: none;
  }
}
.GlobalSearch .Form-inputGlobal {
  min-height: 31px;
  background-color: #fff;
  transition: width 0.25s ease;
}
.GlobalSearch .Form-inputGlobal:focus {
  box-shadow: none;
}

/**
 *  GlobalSearchMenu
 *  This is GlobalSearch dropdown menu - container and list of items that are rendered from json
 *  contains Lunr stacks and the navigation shortcuts
 */
.GlobalSearchMenu {
  position: relative;
}
.GlobalSearchMenu .GlobalSearchMenu-kbhint {
  font-size: 10px;
  width: 10px;
  height: 10px;
  border: 1px solid #eee;
  color: #ddd;
  padding: 2px;
  border-radius: 2px;
  text-align: center;
  line-height: 8px;
  position: absolute;
  right: 7px;
  top: 7px;
}
.GlobalSearchMenu .GlobalSearchMenu-spinner {
  position: absolute;
  right: 7px;
  top: 8px;
}
.GlobalSearchMenu .GlobalSearchMenu-dropdown {
  position: absolute;
  top: 31px;
  left: 0px;
  display: none;
  overflow: auto;
  width: 600px;
  min-height: 20px;
  max-height: 660px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 0 6px 6px 6px;
  box-shadow: 0 0 4px rgba(34, 25, 25, 0.2);
}
.GlobalSearchMenu .GlobalSearchMenu-item {
  font-size: 12px;
}
.GlobalSearchMenu .GlobalSearchMenu-item .GlobalSearchMenu-link {
  padding: 5px 8px;
  display: block;
  text-decoration: none;
  color: #57606a;
}
.GlobalSearchMenu .GlobalSearchMenu-item .GlobalSearchMenu-icon {
  position: relative;
  top: 2px;
  margin-right: 3px;
}
.GlobalSearchMenu .GlobalSearchMenu-item .GlobalSearchMenu-logo {
  position: relative;
  left: -1px;
  top: -2px;
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
}
.GlobalSearchMenu .GlobalSearchMenu-item .GlobalSearchMenu-logo.ruby {
  top: -1px;
}
.GlobalSearchMenu .GlobalSearchMenu-subTitle {
  font-size: 11px;
  color: #666;
}
.GlobalSearchMenu .GlobalSearchMenu-metaKey {
  font-size: 11px;
}
.GlobalSearchMenu .GlobalSearchMenu-metaVal {
  font-size: 11px;
}
.GlobalSearchMenu .GlobalSearchMenu-item.active {
  background: #F6F8FA;
}
.GlobalSearchMenu .GlobalSearchMenu-item.active .GlobalSearchMenu-link {
  color: #000;
  text-decoration: none;
}
.GlobalSearchMenu .GlobalSearchMenu-item.active .u-highlight {
  background: transparent;
  color: inherit !important;
  font-weight: inherit !important;
}
.GlobalSearchMenu .GlobalSearchMenu-title {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #000;
}
.GlobalSearchMenu .GlobalSearchMenu-metaKey {
  color: #999;
}
.GlobalSearchMenu .GlobalSearchMenu-metaVal {
  color: #555;
}
.GlobalSearchMenu .GlobalSearchMenu-message {
  padding: 8px;
  color: #999;
  font-size: 13px;
}

.GlobalSearchMenu.is-active .GlobalSearchMenu-kbhint {
  display: none;
}

/*  Header bar - inner container
=============================================================================================== */
/* Logo
------------------------------------------------------------------------------------------------ */
/*
    Note: 15/03/15
    Background image moved in-line to support white labeling
    TODO - Refactor css to handle responsive images with an inline image.
*/
#logo {
  position: relative;
  top: -6px;
  margin-right: 0.25em;
  display: inline-block;
  width: 40px;
  height: 40px;
}
#logo:focus {
  outline: none;
}
#logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
}

/* Cloud Status link & color indicator
------------------------------------------------------------------------------------------------ */
.status-link:before {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  margin-left: -1px;
  margin-right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-link.status-green:before {
  background: linear-gradient(#6CC644, #68BF41);
}

.status-link.status-green:hover {
  color: #339900;
}

.status-link.status-amber:before {
  background-color: #EA8407;
}

.status-link.status-amber:hover {
  color: #EA8407;
}

.status-link.status-red:before {
  background-color: rgb(203, 36, 49);
}

.status-link.status-red:hover {
  color: rgb(203, 36, 49);
}

.status-link.status-unknown:before {
  background-color: #777777;
}

.status-link.status-unknown:hover {
  color: #777777;
}

/* Whats New Link & indicator
------------------------------------------------------------------------------------------------ */
.NoticeCount {
  display: inline-block;
  position: relative;
  top: -6px;
  left: 0;
  line-height: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: #fff;
  background: #e01f22;
  font-size: 1.1rem;
  text-align: center;
  margin-left: 0.5rem;
  padding: 3px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.NoticeCount--long {
  border-radius: 20px;
  padding: 3px 6px 4px 6px !important;
  min-width: 20px;
  font-size: 1rem;
}

.NoticeCount--green {
  background: rgb(40, 167, 69);
}

.NoticeCount--amber {
  background: #EA8407;
}

.NoticeCount--red {
  background: rgb(203, 36, 49);
}

/*  Header Area and Breadcrumb trail
=============================================================================================== */
.HeaderPrimary {
  background: #fff;
  position: relative;
  line-height: 1;
  border-bottom: 1px solid #eaeaea;
  padding: 5.3em 0 0.5em;
  margin: 0 0 18px;
  position: relative;
}
.HeaderPrimary .AppContainer {
  position: relative;
}
.HeaderPrimary .HeaderPrimary-orgs {
  position: absolute;
  top: -7px;
  right: 0;
}
@media only screen and (max-width: 1023px) {
  .HeaderPrimary .HeaderPrimary-orgs {
    right: 12px;
  }
}
.HeaderPrimary .dropdown-menu {
  width: 300px;
  margin: 3px 0;
}
.HeaderPrimary .dropdown-menu li.org-item {
  width: 282px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 2px;
  padding-bottom: 2px;
}
.HeaderPrimary .dropdown-menu li.org-item:last-child,
.HeaderPrimary .dropdown-menu li.org-item:only-child {
  padding-bottom: 6px;
}
.HeaderPrimary .tool-list.tools-header .dropdown-menu {
  left: -158px;
}
.HeaderPrimary .tool-list.tools-header .dropdown-menu:before {
  left: 269px;
}
.HeaderPrimary .tool-list.tools-header .dropdown-menu:after {
  left: 270px;
}

/* Overides for logged out app store
------------------------------------------------------------------------------------------------ */
.u-bodyLoggedOut .HeaderPrimary {
  padding: 2em 0 1em 0;
}

/* ==========================================================================
   GLOBAL NOTICICATION
   ========================================================================== */
/*
    DESCRIPTION
    -----------
    Notification, top left of global nav

*/
.Messages {
  position: relative;
  padding-right: 7px;
}
.Messages .Messages-icon {
  color: #606972;
  position: relative;
  top: 3px;
}
.Messages .Messages-badge {
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 6px;
  padding: 1px 6px 2px 6px;
}

.Messages.u-textWeighted .Messages-icon {
  color: #000;
}

/**
 * Global top message
 * - removes fixed position global top nav
 * - Adds static positioned message
 * - Use case trial info expiration / payment issues
 */
body.has-global-top-msg .HeaderNav--fixed {
  position: relative;
}
body.has-global-top-msg .HeaderPrimary {
  padding: 1.5em 0 0.5em;
}
body.has-global-top-msg .GlobalTopMsg {
  position: relative;
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 1;
  background: linear-gradient(#feeeb0, #FBE89F);
}
body.has-global-top-msg .GlobalTopMsg .close {
  position: absolute;
  top: 12px;
  right: 10px;
  font-size: 4.7rem;
  font-weight: 100 !important;
}
body.has-global-top-msg .HeaderNotificationBar.HeaderNav--fixed {
  position: fixed;
}

/* ==========================================================================
    LISTS
   ========================================================================== */
/*  BASE LISTS
   ========================================================================== */
.structural {
  list-style: none;
  margin: 0;
  padding: 0;
}

.structural.inline > li {
  display: inline;
  padding: 1px;
}

/*  STEP 1 - Yellow list
   ========================================================================== */
.steps {
  margin: 0;
  padding: 8px 14px;
  color: #000;
  list-style-position: inside;
}
.steps a {
  text-decoration: underline;
}

.steps-primary {
  counter-reset: li;
}

.steps-primary li {
  list-style: none;
  font-weight: 400;
  font-size: 2.3rem;
  line-height: 1;
  position: relative;
  padding: 8px;
  color: #000;
}

.steps-primary li:last-child {
  margin-bottom: 0;
}

.steps-primary li strong {
  font-weight: bolder;
  color: #000;
}

.steps-numbered {
  padding: 6px 0 6px 34px;
}

.steps-numbered li:before {
  background: #222;
  border-radius: 28px;
  color: #FFFFFF;
  content: counter(li, decimal);
  counter-increment: li;
  font-size: 16px;
  font-weight: bold;
  width: 28px;
  height: 28px;
  line-height: 28px;
  position: absolute;
  text-align: center;
  top: 4px;
  left: -1px;
}

.step-done {
  color: #007A00;
}

.step-done:after {
  border-radius: 28px;
  width: 28px;
  height: 28px;
  display: inline-block;
  text-align: center;
  margin-left: 6px;
  background: #007A00;
  color: #fff;
  text-shadow: 0 1px #444;
  font: 22px/29px "ModernPictogramsNormal", Arial, sans-serif;
  content: "%";
  vertical-align: baseline;
}

.smal-tick:after {
  position: relative;
  left: -3px;
  border-radius: 16px;
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 1px;
  text-align: center;
  background: #007A00;
  color: #fff;
  font: 13px/17px "ModernPictogramsNormal", Arial, sans-serif;
  content: "%";
  vertical-align: baseline;
}

.steps-sub {
  margin: 0 0 2rem 0 !important;
}
.steps-sub li {
  font-size: 1.7rem !important;
  line-height: 2 !important;
}

/*  Numbered steps list
   ========================================================================== */
.numbered {
  margin: 2.6rem 0 2.6rem 3.4em;
  list-style: none;
  counter-reset: li;
}
.numbered > li {
  position: relative;
  margin: 2rem 0;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.2;
}
.numbered > li:before {
  background: #eee;
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  line-height: 2.3rem;
  color: #333;
  content: counter(li, decimal);
  counter-increment: li;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: absolute;
  text-align: center;
  top: -0.25rem;
  left: -3.3rem;
}

.numbered-inverse > li:before {
  background: #333;
  color: #fff;
}

.numbered-positive > li:before {
  background: #00bd3c;
  color: #fff;
}

/*  State List ( replaced javascript sparkline tri-state )
   ========================================================================== */
/*
        <ul class="state-list">
            <li class="state-list-up  show-tip" title="Up">Up</li>
            <li class="state-list-intermediate  show-tip" title="Intermediate">intermediate</li>
            <li class="state-list-down  show-tip" title="Down">Down</li>
            <li class="state-list-unknown  show-tip" title="Unknown">Unknown</li>
        </ul>

 */
.state-list {
  margin: 0 !important;
  position: relative;
  display: inline-block;
}
.state-list li {
  text-indent: -9999px;
  position: relative;
  display: inline-block;
  width: 3px;
  height: 6px;
  margin: 0;
  line-height: 1;
  vertical-align: middle;
  transition: height 0.3s linear;
}
.state-list .state-list-unknown {
  background: #aaa;
}
.state-list .state-list-down {
  background: rgb(203, 36, 49);
  height: 12px;
}
.state-list .state-list-intermediate {
  background: #EA8407;
}
.state-list .state-list-up {
  background: #35B46E;
  height: 12px;
}

.state-list.state-list--larger li {
  width: 3px;
  height: 16px;
}
.state-list.state-list--larger .state-list-down {
  height: 14px;
}
.state-list.state-list--larger .state-list-up {
  height: 14px;
}

/* ==========================================================================
   Media element - link blocks e.g. Toolbelt download
   ========================================================================== */
.windows .dl-win {
  background: #F5FBFF;
  border: 1px solid #E4F0FF;
}
.windows .dl-win [class*=icon-] {
  color: #132B42;
}
.windows .dl-win .media-val-heading {
  color: #132B42;
}
.windows .dl-win .media-hero {
  color: #333 !important;
}
.windows .dl-win .media-val-cta {
  font-weight: bold;
}

.media-list {
  margin: -2rem 0 2rem;
}
.media-list li {
  position: relative;
  padding: 2.2rem 0;
}
.media-list .media-key {
  margin: 0 0 0 1rem;
  display: inline-block;
  vertical-align: top;
}
.media-list .media-key .media-hero {
  transition: color 0.4s ease-in-out;
  font-size: 2.8rem;
  color: #666;
}
.media-list .media-val {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin-left: 2rem;
}
.media-list .media-val-heading {
  transition: color 0.25s ease-in-out;
  margin: 0 0 1rem;
  line-height: 1;
  color: #7A7A7A;
}
.media-list a:hover {
  text-decoration: none;
}
.media-list p {
  font-size: 1.5rem;
}
.media-list .media-val-cta {
  margin-bottom: 0;
}

.media-list-dividers li {
  border-bottom: 1px solid #eee;
}

.media-list-hover li:hover [class*=icon-] {
  color: #333;
}
.media-list-hover li:hover .media-val-heading {
  color: #333;
}

.media-val-cta:hover {
  text-decoration: underline;
}

.media-footer {
  padding: 0.4rem 2rem;
}

/* ==========================================================================
   LIST LAYOUT - TWO COLUMN
   ========================================================================== */
.list-two-col-f {
  overflow: hidden;
}
.list-two-col-f li {
  box-sizing: border-box;
  width: 50%;
  float: left;
}
@media (max-width: 1024px) {
  .list-two-col-f li {
    float: none;
    width: auto;
    height: auto;
    padding: 1rem 0.5rem;
  }
}

.list-two-col {
  column-count: 2;
  column-gap: 20px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  -ms-column-count: 2;
  -ms-column-gap: 20px;
}

.list-three-col {
  column-count: 3;
  column-gap: 20px;
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  -ms-column-count: 3;
  -ms-column-gap: 20px;
}

.list-two-col-a {
  width: 25%;
}

.list-two-col-b {
  width: 55%;
}

/* ==========================================================================
   LIST LAYOUT - TWO COLUMN
   ========================================================================== */
/* ---------------------------
   LIST BASE
   --------------------------- */
.sequence-list {
  margin: 3em 0;
}
.sequence-list > li {
  border-bottom: 1px solid #eee;
  padding-bottom: 0.8em;
  margin-bottom: 1.6em;
}
.sequence-list :last-child {
  border: none;
}

.sequence-list--p {
  line-height: 1.6rem;
  font-size: 1.7rem;
}

.sequence-list--lead {
  font-weight: 800;
  color: #000;
}

.sequence-list--kbd .code-dark {
  border-radius: 3px;
  font-size: 13px !important;
}

/* ---------------------------
   NUMBERED LIST
   --------------------------- */
.sequence-numbered {
  list-style: none;
  counter-reset: li;
}
.sequence-numbered > li {
  position: relative;
  margin-left: 4.4rem;
  padding-left: 1.8rem;
}
.sequence-numbered > li:before {
  background: rgb(40, 167, 69);
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  line-height: 2.6rem;
  color: #fff;
  content: counter(li, decimal);
  counter-increment: li;
  font-size: 1.1rem;
  font-weight: bold;
  position: absolute;
  text-align: center;
  top: 0;
  left: -3.8rem;
}

.u-numberedList {
  list-style: none;
  counter-reset: li;
}
.u-numberedList > li {
  position: relative;
  margin-left: 0;
  padding-left: 38px;
  padding-top: 9px;
  padding-bottom: 9px;
  line-height: 20px;
}
.u-numberedList > li:before {
  background: rgb(40, 167, 69);
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  line-height: 2.3rem;
  color: #fff;
  content: counter(li, decimal);
  counter-increment: li;
  font-size: 1.1rem;
  font-weight: bold;
  position: absolute;
  text-align: center;
  top: 7px;
  left: 0px;
}

.u-numberedList--small > li {
  padding-left: 32px;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 20px;
  font-size: 14px;
}
.u-numberedList--small > li:before {
  width: 2.1rem;
  height: 2.1rem;
  line-height: 2.1rem;
  font-weight: bold;
  font-size: 11px;
  position: absolute;
  text-align: center;
  top: 4px;
  left: 0px;
}

.u-numberedList--padded > li {
  margin-top: 6px;
  margin-bottom: 6px;
}

.NotificationList-heading a i,
.NotificationList-heading a .Icon {
  color: #4b545b !important;
}

.NotificationList > li {
  margin: 0 12px !important;
}
@media (max-width: 620px) {
  .NotificationList > li {
    margin: 0 !important;
  }
}
.NotificationList .is-disabled {
  opacity: 0.25 !important;
}
.NotificationList .not-enabled {
  visibility: hidden;
}
.NotificationList .NotificationList-label {
  display: inline-block;
  font-size: 10px;
  min-width: 20px;
}
@media (max-width: 620px) {
  .NotificationList .NotificationList-label {
    margin-top: 4px;
    display: block;
    text-align: center;
  }
}

#js-alerts-table.is-filtered .js_notification_toggle_list {
  display: none;
}

/* ==========================================================================
    PLACEHOLDER FOR LOADING CONTENT

   ========================================================================== */
/*

/*
    Show a wireframe content while we are waiting for the ajaz content to load.
    Usecase is the contextual help sidebar
*/
.timeline-item {
  background: transparent;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-right: auto;
  margin-left: auto;
  max-width: 472px;
  min-height: 200px;
}

@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  height: 96px;
  position: relative;
}

.background-masker {
  background: #fff;
  position: absolute;
}

/* Every thing below this is just positioning */
.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
  top: 0;
  left: 40px;
  right: 0;
  height: 10px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
  top: 10px;
  left: 40px;
  height: 8px;
  width: 10px;
}

.background-masker.header-bottom {
  top: 18px;
  height: 6px;
}

.background-masker.subheader-left,
.background-masker.subheader-right {
  top: 24px;
  height: 6px;
}

.background-masker.header-right,
.background-masker.subheader-right {
  width: auto;
  left: 300px;
  right: 0;
}

.background-masker.subheader-right {
  left: 230px;
}

.background-masker.subheader-bottom {
  top: 30px;
  height: 10px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
  top: 40px;
  left: 0;
  right: 0;
  height: 6px;
}

.background-masker.content-top {
  height: 20px;
}

.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end {
  width: auto;
  left: 380px;
  right: 0;
  top: 60px;
  height: 8px;
}

.background-masker.content-second-line {
  top: 68px;
}

.background-masker.content-second-end {
  left: 420px;
  top: 74px;
}

.background-masker.content-third-line {
  top: 82px;
}

.background-masker.content-third-end {
  left: 300px;
  top: 88px;
}

/* ==========================================================================
   LOGIN - 'Dialog' (Used by Login, signup, devise based forms)
   ========================================================================== */
.Brand {
  font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  color: #444;
}

.dialog,
.dialog-header,
.dialog-xtra {
  width: 440px;
}
@media (max-width: 620px) {
  .dialog,
  .dialog-header,
  .dialog-xtra {
    width: 95%;
  }
}

/* Container for Logo */
.dialog-header {
  margin: 12rem auto 12px auto;
  text-align: center;
}
@media (max-width: 620px) {
  .dialog-header {
    margin: 6rem auto 12px auto;
  }
}

/* --------------------------------------------------------------------------
 *  Dialog Core
 * -------------------------------------------------------------------------- */
.dialog {
  box-sizing: border-box;
  margin: 18px auto;
  background: #fff;
  border: 1px solid #bbb;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.dialog .legal {
  margin-bottom: 1em;
}

.dialog-inner {
  padding: 24px 16px 0 16px;
  border-bottom: 1px solid #E5E5E5;
  background: #FAFAFA;
  border-radius: 0 0 6px 6px;
}
.dialog-inner form {
  margin: 0;
}

.dialog-text {
  padding: 0 12px 10px 12px;
  font-size: 17px;
}

.dialog-title {
  text-align: center;
  font-weight: 700;
  color: #333;
  padding: 4px 12px;
  font-size: 17px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  background: linear-gradient(#EDEDED, #dddddd);
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #aaa;
}

.dialog-footer {
  padding: 12px;
  border-radius: 0 0 6px 6px;
  border-top: 1px solid #fff;
  background: #F7F7F7;
}

.dialog-xtra {
  text-align: center;
  box-sizing: border-box;
  margin: 28px auto 12px auto;
  padding: 12px;
  background: #F7F7F7;
  border-radius: 6px;
  border: 1px solid #E5E5E5;
  font-size: 14px;
}
@media (max-width: 620px) {
  .dialog-xtra {
    font-size: 13px;
  }
}
.dialog-xtra a:hover {
  text-decoration: none;
}
.dialog-xtra b {
  text-decoration: underline;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
 *  login footer ( Absolutely positioned bottom message )
 * -------------------------------------------------------------------------- */
.footer-msg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.1);
  padding: 14px;
  font-size: 17px;
}
.footer-msg a {
  color: #444;
}
.footer-msg a b {
  text-decoration: underline;
}
.footer-msg a:hover {
  text-decoration: none;
}
.footer-msg a:hover b {
  color: #0088CC;
}

/* --------------------------------------------------------------------------
 *  Dialog Messages
 * -------------------------------------------------------------------------- */
.dlg-messages {
  width: 440px;
  margin: 0 auto;
}
.dlg-messages div {
  padding: 6px;
  border-radius: 6px;
  line-height: 1.2;
}
.dlg-messages div h2 {
  display: none;
}
.dlg-messages div * {
  margin: 0;
  list-style: none;
}

/* --------------------------------- */
.login-provider {
  float: right;
}
@media (max-width: 620px) {
  .login-provider {
    float: none;
    padding-top: 20px;
  }
}

.dialog .form-actions {
  padding: 0px 0 12px;
}

/* --------------------------------------------------------------------------
 *  Signup Layout - Jul 2019
 * -------------------------------------------------------------------------- */
.AccountLogo {
  display: block;
  margin-bottom: 18px;
}

.AccountWrap {
  margin: 80px auto 0 auto;
  max-width: 1020px;
}
@media only screen and (max-width: 1023px) {
  .AccountWrap {
    margin: 6rem auto 12px auto;
    width: 95%;
  }
}

.SignUpOa .SignUpOa-label {
  line-height: 1;
  font-size: 16px;
  margin-left: 8px;
}

/* column to the right of sign up form */
.AccountAside {
  /* benefits content */
}
.AccountAside .AccountAside-article {
  padding-top: 50px;
  padding-left: 20px;
}
.AccountAside .AccountAside-content {
  padding: 0 0 0 14px;
}
.AccountAside .AccountAside-logo {
  display: block;
  margin-bottom: 24px;
  margin-left: 28px;
  width: 50px;
}
.AccountAside .AccountAside-icon {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 10px;
}
.AccountAside .AccountAside-title {
  color: rgb(42, 47, 69);
  font-size: 15px !important;
  font-weight: 600;
  line-height: 34px;
  margin-bottom: 0;
}
.AccountAside .AccountAside-text {
  font-size: 14px !important;
  color: #4f566b;
  padding-bottom: 6px;
  padding-right: 10px;
  line-height: 1.5;
}

.AccountFooter {
  padding-top: 14px;
}

.AccountBox {
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 6px;
  box-shadow: 0 15px 35px 0 rgba(60, 66, 87, 0.1), 0 5px 15px 0 rgba(0, 0, 0, 0.07);
}
.AccountBox .AccountBox-title {
  text-align: center;
  font-weight: 700;
  color: #333;
  padding: 4px 12px;
  font-size: 17px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  background: linear-gradient(#EDEDED, #dddddd);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: 1px solid #aaa;
}
.AccountBox .AccountBox-instructions {
  margin: 1.4em 0;
  font-size: 1.6rem;
  text-align: center;
  color: #000;
}
.AccountBox .AccountBox-inner {
  background: #FAFAFA;
  padding: 22px 32px 30px 32px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.AccountBox .AccountBox-inner--padded {
  padding: 34px;
}
.AccountBox .AccountBox-fieldset {
  padding-top: 18px;
  padding-bottom: 0;
}
.AccountBox .AccountBox-message {
  padding-top: 4px;
  font-weight: 500;
}
.AccountBox .AccountBox-legal {
  color: #aaa;
  text-align: center;
  font-size: 10px;
}
.AccountBox .AccountBox-legal a {
  color: #aaa;
}
.AccountBox .AccountBox-login {
  padding-top: 6px;
  text-align: center;
  font-size: 14px;
}

/*
    This is used for a devise layout but when a user is still logged in
    E.g. Resend account confirmation email from the Account settings page
*/
body.devise-logged-in .Content {
  width: 100%;
}
body.devise-logged-in .Sidebar {
  display: none;
}
body.devise-logged-in .dialog-wrap {
  margin: 40px auto 180px auto !important;
  border: 1px solid #c6c6c6;
  overflow: hidden;
  border-radius: 6px;
  max-width: 540px;
}

/* NEW LOG PAGE LAYOUT - Simplified HTML (no lists)
   .HaloLogs--dark is used for logs dark theme.
   Colors defined after layout
============================================================================================== */
.groupWrap-1 .Log-message {
  margin-left: 30px !important;
}

.groupWrap-2 .Log-message {
  margin-left: 50px !important;
}

.groupWrap-3 .Log-message {
  margin-left: 70px !important;
}

.Log {
  font-family: Menlo, Mono, Consolas, monospace, Courier;
  /* Timestamps */
}
.Log .Log-line {
  border-radius: 2px;
  display: flex;
  padding: 1px 2px;
  line-height: 20px;
  font-size: 12px;
}
.Log .Log-line--selected {
  outline: 1px solid rgba(255, 255, 255, 0.3);
  background: #333F51;
  color: white;
}
.Log .Log-line--severity5.Log-line--selected {
  outline: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 500;
}
.Log .Log-line--severity5.Log-line--selected .Log-time,
.Log .Log-line--severity5.Log-line--selected .Log-timeFull {
  color: #ff8383;
}
.Log .Log-time {
  display: inline-block;
  white-space: nowrap;
}
.Log .Log-time:hover {
  color: #4FA4F1;
}
.Log .Log-time--indented {
  padding-left: 10px;
}
.Log .Log-timeFullSummary {
  white-space: nowrap;
  display: none;
}
.Log .Log-timeFull {
  display: none;
  font-weight: 400;
}
.Log .Log-message {
  width: 100%;
  word-break: break-all; /* force break as the layout can be broken by long strings ssh keys on the ssl page */
  margin-left: 14px;
}

/* links to line id's named anchors */
.Log-line:target {
  background: #333F51;
  outline: 1px solid rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
.Log-line:target .Log-time,
.Log-line:target .Log-timeFull {
  color: #4FA4F1;
}

/* HALO / DARK THEME MODULE
============================================================================================== */
.HaloLogs {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-left: 10px;
  padding-right: 14px;
  padding-top: 6px;
  padding-bottom: 8px;
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
}
.HaloLogs p {
  line-height: 1;
  margin-top: 4px;
  margin-bottom: 4px;
  padding: 0;
  color: #000;
}

.HaloLogs--scrolling {
  max-height: 50vh;
  overflow: auto;
}

.HaloLogs--withFooter {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.Module-footer {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.HaloLogs--dark {
  background: rgb(45, 55, 72);
}

.Log--dark {
  background: rgb(45, 55, 72);
  /*
    Log Line Severity Level styling
  */
  /*
    Log Line Severity Level styling
  */
}
.Log--dark .Log-line:hover {
  background: #333F51;
}
.Log--dark .Log-time,
.Log--dark .Log-timeFull,
.Log--dark .Log-timeFullSummary {
  color: rgba(255, 255, 255, 0.6);
}
.Log--dark .Log-source {
  color: rgba(255, 255, 255, 0.6);
}
.Log--dark .Log-message {
  color: rgba(255, 255, 255, 0.95);
}
.Log--dark a {
  color: rgb(150, 203, 254);
  padding-bottom: 1px;
  border-bottom: 1px solid;
  text-decoration: none;
}
.Log--dark .red,
.Log--dark .bright-red {
  color: rgb(255, 131, 131) !important;
}
.Log--dark .red-highlight {
  color: #ff8383 !important;
  font-weight: 800;
}
.Log--dark .amber {
  color: rgb(246, 173, 85) !important;
}
.Log--dark .yellow {
  color: rgb(255, 228, 132) !important;
}
.Log--dark .green {
  color: rgb(181, 244, 165) !important;
}
.Log--dark .blue {
  color: rgb(150, 203, 254) !important;
}
.Log--dark .Log-line--severity0 .Log-message {
  color: rgba(255, 255, 255, 0.6);
}
.Log--dark .Log-line--severity1 .Log-message {
  color: rgba(255, 255, 255, 0.9);
}
.Log--dark .Log-line--severity2 .Log-message {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.Log--dark .Log-line--severity3 .Log-message {
  color: rgb(150, 203, 254);
}
.Log--dark .Log-line--severity4 .Log-message {
  color: rgb(246, 173, 85);
}
.Log--dark .Log-line--severity5 .Log-message {
  color: rgb(255, 131, 131);
}
.Log--dark .Log-line--severity5 .Log-message a {
  color: rgb(255, 131, 131);
  padding-bottom: 1px;
  border-bottom: 1px solid;
  text-decoration: none;
}
.Log--dark b, .Log--dark strong {
  color: rgb(255, 255, 255);
  font-weight: 500;
}
.Log--dark .Tag-item {
  position: relative;
  top: -1px;
  padding: 2px;
  border-radius: 3px;
  background: #333F51;
  font-weight: 400;
  color: #fff;
  border: none;
  text-shadow: none;
  margin: 0;
  text-transform: capitalize;
}
.Log--dark .Tag-item--yellow,
.Log--dark .Tag-item--canary {
  color: #f8ed98;
}
.Log--dark .Tag-item--green {
  color: rgb(181, 244, 165);
}
.Log--dark .Tag-item--blue {
  color: #7DD3FC;
}
.Log--dark .Tag-item--pink {
  color: #F472B6;
}

.Log-groupLoadingMsg {
  display: inline-block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding-left: 88px;
}

/* Show / hide toggle
   Logline Display based on severity level
   Show full time stamps
============================================================================================== */
/* hide these log lines by default */
/* show all the log lines */
.Content.show-all-logs .Log .Log-line.log-line-warn,
.Content.show-all-logs .Log .Log-line.log-line-info,
.Content.show-all-logs .Log .Log-line.log-line-norm,
.Content.show-all-logs .Log .Log-line.Log-line--severity0,
.Content.show-all-logs .Log .Log-line.Log-line--severity1 {
  display: flex;
}

.show_log_timestamps .Log-time {
  display: none;
}
.show_log_timestamps .Log-timeFull {
  display: flex;
}
.show_log_timestamps .Log-timeFullSummary {
  display: inline-block;
}

@media only screen and (max-width: 1023px) {
  .Module-headerGroupItem--errors {
    display: none;
  }
}

body[data-action=stack_progress] .ButtonMenu--org {
  display: none;
}
body[data-action=stack_progress] .Breadcrumb {
  font-size: 14px !important;
}

/*  NOTE
    Moved old logs and liveLogs moved into separate old_logs.scss file
============================================================================================== */
/*
  Light logs
*/
.Log--light .Log-line {
  border-radius: 2px;
  padding: 1px 2px;
  line-height: 20px;
}
.Log--light .Log-line:hover {
  background: #f4f6f7;
  color: #000 !important;
}
.Log--light .Log-time {
  color: rgba(89, 89, 107, 0.75);
}
.Log--light .Log-message {
  color: rgb(48, 48, 61);
}
.Log--light .red,
.Log--light .bright-red {
  color: rgb(203, 36, 49) !important;
}
.Log--light .amber {
  color: #EA8407 !important;
}
.Log--light .yellow {
  color: #EA8407 !important;
}
.Log--light .green {
  color: #35B46E !important;
}
.Log--light .blue {
  color: #3498DB !important;
}
.Log--light .Log-line--severity2 .Log-message {
  color: #000;
}
.Log--light .Log-line--severity3 .Log-message {
  color: black;
  font-weight: 500;
}
.Log--light .Log-line--severity4 .Log-message {
  color: #EA8407;
}
.Log--light .Log-line--severity5 .Log-message {
  color: rgb(203, 36, 49);
}
.Log--light .Log-line--severity5 .Log-message a {
  color: rgb(203, 36, 49);
  padding-bottom: 1px;
  border-bottom: 1px solid;
  text-decoration: none;
}
.Log--light b, .Log--light strong {
  color: black;
  font-weight: 500;
}

/*
  Preformatted content
*/
.Log-preformatted {
  white-space: pre;
  margin: 0;
  padding: 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.Log-withOverflow {
  width: 100%;
  max-height: 160px;
  overflow: auto;
  padding-bottom: 5px;
}
.Log-withOverflow .Button--logs {
  margin: -4px 0 0 8px;
  font-size: 10px !important;
  font-weight: 400;
  color: #f5f5f5;
}

/*
  Logs are embedded within the table eg. onboarding services build logs
*/
.Log--table {
  overflow: auto;
  max-height: 54vh;
}
.Log--table .Log-line {
  font-size: 12px !important;
  overflow-anchor: none;
}
.Log--table .anchor {
  overflow-anchor: auto;
  height: 1px;
}

/*
    Maestro Dashboard 2 - 2021
    ----------------------------
*/
/*
    Ajax tab loading - descendant selector tabs
*/
/*
    Body class
*/
body.maestroJobs #js-add-in-module {
  display: none !important;
}

/*
    Inner content
*/
/*
    Maestro onboarding 2021
*/
.MaestroOnboarding .MaestroOnboarding-introText {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 13px;
}
.MaestroOnboarding .MaestroOnboarding-heading {
  font-weight: 500;
  line-height: 1;
  font-size: 14px;
  margin: 0 0 24px 0;
  color: #000;
}
.MaestroOnboarding .MaestroOnboarding-summary {
  line-height: 1;
  font-size: 13px;
  margin: 0 0 26px 0;
}
.MaestroOnboarding .MaestroOnboarding-section {
  margin: 0;
}

/*
    Services drawer
*/
.StorageVolIco {
  position: relative;
  top: 2px;
}
.StorageVolIco .StorageVolIco-left {
  position: relative;
  right: -2px;
}
.StorageVolIco .StorageVolIco-right {
  position: relative;
  left: -2px;
}

tr.is-read-only .StorageVolIco-right {
  display: none;
}
tr.is-read-only .StorageVolIco-left {
  right: 0;
}

/* ==========================================================================
   MESSAGE REGIONS
   ========================================================================== */
/* Form error regions and alerts
   -------------------------------------------------------------------------- */
/* CLIENT SIDE - INLINE FORM
   -------------------------------------------------------------------------- */
/*
 base positioning is for the old forms
 messages to the right of the field.
 note: newer forms use a block level message beneath the field

 */
span.field-error {
  position: relative;
  top: -3px; /* for right of field positioning */
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.1;
  color: #CC3333;
  padding-left: 6px; /* for right of field positioning */
}

div.field-error {
  color: #CC3333;
  font-size: 1.2rem;
  font-weight: 500;
}

.field-error.field-error--topPadding {
  position: static;
  top: 0 !important;
  padding-top: 3px;
}

.Form-listStacked span.field-error,
.Drawer-body .Form span.field-error {
  position: static;
  display: block;
  padding-left: 0;
  padding-top: 2px;
}
.Form-listStacked span.field-error + span.field-error,
.Drawer-body .Form span.field-error + span.field-error {
  padding-top: 5px;
}

/* when form is inside a grid layout error messages are displayed beneath fields */
.Form-item--half span.field-error,
.grid__item span.field-error {
  top: -4px;
}

.Form--modalCols span.field-error {
  top: -4px;
  margin: 0;
}

span.field-error:empty {
  display: none !important;
}

span.field-checked {
  margin-left: 8px;
  padding-left: 16px;
}

input.field-error,
textarea.field-error {
  border-color: #CC3333 !important;
}

/*
    jquery validate plugin with data-msg-required="Branch is required"
    uses a label element to display message
*/
label.error {
  position: relative;
  top: -2px;
  color: #CC3333;
  font-weight: 500;
  font-size: 1.2rem;
  display: block;
}

label.error + span.Form-fieldText {
  padding-left: 0 !important;
}

.rails-error-field {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 500;
}

.login-provider img {
  margin-left: 8px;
  vertical-align: middle;
}
@media (max-width: 620px) {
  .login-provider img {
    margin-left: 18px;
  }
}

.login-provider-label {
  position: relative;
  font-size: 1.2rem;
}

.Button--google {
  position: relative;
  top: -3px;
}

.Button--github {
  position: relative;
  top: -2px;
}

/* Message regions used by the login pages 'dialog module'
   -------------------------------------------------------------------------- */
.msg {
  padding: 6px;
  border-radius: 6px;
  line-height: 1.2;
}

.msg-modal {
  margin: 0 0 1em 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.form-stacked-fields .msg-modal {
  position: relative;
  margin-top: -8px;
  background: transparent;
  border: none;
  padding-left: 0;
  font-weight: bold;
}

.msg-error {
  color: rgb(203, 36, 49);
  font-weight: 500;
}

.msg-success {
  color: #3F7A3F;
  background: #dff0d8;
  box-shadow: inset 0 0 10px rgba(200, 229, 174, 0.9);
  border: 1px solid #C8E5AE;
}

.msg-info {
  color: #3a87ad;
  background: #d9edf7;
  border: 1px solid #bce8f1;
}

.msg-warning {
  color: #EA8407;
  background: #FFEDDB;
  box-shadow: inset 0 0 10px rgba(244, 218, 172, 0.9);
  border: 1px solid #FCDAAB;
}
.msg-warning h6 {
  color: #EA8407;
}

/* inline editing warning */
.msg-txt-inline {
  display: inline-block;
  margin: 0 2rem;
  color: #000;
  font-weight: 500;
  font-size: 13px;
}

.msg-txt-select {
  position: relative;
  top: 2px;
}

/*
    InfoText
    typography color and margin Block for messages that convey status.
    NOTE: This is separate from validation and error regions.
    An example of the use case is Formations status at the top of the page.
 */
.InfoText {
  font-weight: normal;
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  display: table;
  margin-bottom: 0;
}

.InfoText-col {
  display: table-cell;
}

.InfoText-col--padded {
  padding-left: 8px;
}

.InfoText-cirlce {
  text-align: center;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 17px;
  border-radius: 50%;
  padding: 5px;
  margin-right: 6px;
}

.InfoText-cirlce--green {
  background-color: rgb(40, 167, 69);
}

.InfoText-icon {
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
  color: #fff !important;
  font-size: 12px !important;
}

/* Color modifiers */
.InfoText--green {
  color: rgb(40, 167, 69) !important;
}
.InfoText--green .InfoText-cirlce {
  background-color: rgb(40, 167, 69);
}

.InfoText--red {
  color: #e01f22 !important;
}
.InfoText--red .InfoText-cirlce {
  background-color: #e01f22;
}

.InfoText--amber {
  color: #EA8407 !important;
}
.InfoText--amber .InfoText-cirlce {
  background-color: #EA8407;
}

/*
    PageMsg
    This is a large typographic message
    USE CASE:  Trial expired on the dashboard
 */
.PageMsg {
  margin-bottom: 30px;
}
.PageMsg .PageMsg-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.PageMsg .PageMsg-text {
  font-size: 15px;
  color: #586069;
}
.PageMsg .PageMsg-cta {
  padding: 20px 0;
}
.PageMsg .PageMsg-button {
  padding: 1.1em 1.4em;
}

.ModuleHelpText {
  padding-left: 6px;
  font-size: 13px;
}

/*
 * Expandable error region
 * E.g. displaying longer form error in limited space e.g. a tables based index view
 */
.TruncatedError .morelink {
  font-size: 12px;
  font-weight: normal;
}
.TruncatedError strong {
  font-weight: normal !important;
}
.TruncatedError .shortcontent {
  padding-top: 3px;
  display: inline-block;
  font-size: 12px;
}
.TruncatedError .allcontent {
  line-height: 1.5;
  font-size: 12px;
  color: rgb(203, 36, 49);
}

.Message {
  position: relative;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
}
.Message .Message-titleIcon {
  position: relative;
  margin-right: 4px;
  font-size: 14px;
}
.Message .Message-icon {
  margin-right: 8px;
  position: relative;
  font-size: 14px;
}
.Message .Message-iconBlock {
  position: relative;
  top: 2px;
  margin-right: 8px;
  font-size: 14px;
}
.Message .Message-spinner {
  margin-right: 12px;
}
.Message .Message-checkbox {
  display: inline;
  margin-top: -1px;
}
.Message .Message-copy {
  margin-left: 6px;
}
.Message .Message-label {
  margin-bottom: 0;
  color: #000;
  font-size: 13px;
}
.Message .Message-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1;
  color: #000;
}
.Message .Message-text {
  font-size: 14px;
  margin: 0 0 8px;
}
.Message .Message-actions {
  padding-top: 6px;
}
.Message > p:only-child {
  margin-bottom: 0 !important;
}
.Message h3 {
  line-height: 1;
  margin-bottom: 14px;
}
.Message .Message-dropdown {
  position: relative;
  top: 1px;
}
.Message .Message-close {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #ddd;
}
.Message .Message-close:hover, .Message .Message-close:focus, .Message .Message-close:active {
  color: #aaa;
}
.Message .Message-divider {
  margin: 3px 0;
}

.Message.Message--narrow {
  padding: 8px 12px;
}

.Message.Message--padded {
  padding: 14px 16px !important;
}

.Message.Message--subtle {
  padding: 4px 6px;
  border: none;
}

.Message.Message--noBorder {
  border: none !important;
}

.Message--hint {
  margin-top: 12px;
  margin-bottom: 0;
}

.Message.Message--table {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
}

.Message.Message--module {
  background-color: #FAFBFC;
  border: 1px solid #e0e0e0;
  margin-bottom: 28px;
}

.Message--greyModule {
  background-color: #FAFBFC;
  border: 1px solid #e0e0e0;
}

.Message--grey {
  background-color: #FAFBFC;
  border: 1px solid #eaeaea;
}

.Message--red {
  border: 1px solid #e2b5ba;
  color: rgb(203, 36, 49);
  background: #FFF2F2;
}
.Message--red .Message-icon {
  color: rgb(203, 36, 49);
}
.Message--red a {
  color: rgb(203, 36, 49);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.Message--yellow {
  border: 1px solid #eadbb4;
  color: #000;
  background: #fcf7ea;
}
.Message--yellow .Message-icon {
  color: #d37706;
}
.Message--yellow a {
  text-decoration: underline;
}
.Message--yellow .Message-close {
  color: #eadbb4;
}
.Message--yellow .Message-close:hover, .Message--yellow .Message-close:focus, .Message--yellow .Message-close:active {
  color: #e0cfa6;
}

.Message--amber {
  border: 1px solid #FFBE75;
  background: #FFF7EA;
  color: #D87700;
}

.Message--green {
  border: 1px solid #BDDBA2;
  background: #F4FFEF;
  color: #339900;
}

.Message--blue {
  border: 1px solid #dce8f7;
  background: #EFF6FF;
  color: #1F2328;
}

.Message--disabled {
  opacity: 0.5;
}
.Message--disabled .Button {
  color: #999 !important;
  border: 1px solid #ddd !important;
  background: #FCFCFC !important;
  box-shadow: none;
  pointer-events: none;
}

.SidebarPromo {
  position: relative;
  background: #fcf8ef;
  margin-top: 30px;
  border-radius: 4px;
  padding: 9px;
  font-size: 12px;
}
.SidebarPromo .SidebarPromo-close {
  position: absolute;
  top: 9px;
  right: 4px;
  color: #aaa;
  font-size: 12px;
  cursor: pointer;
}
.SidebarPromo .SidebarPromo-title {
  font-weight: 500;
  margin-bottom: 5px;
}
.SidebarPromo .SidebarPromo-text {
  color: #000;
}
.SidebarPromo .SidebarPromo-cta {
  font-weight: 500;
  margin-top: 8px;
}

.NGLayout--wideWithIconNav .SidebarPromo {
  display: none !important;
}

.ScheduleFields span.field-error {
  top: 0;
}

/* ==========================================================================
    MISC

    Use for temp rules - e.g. Ad campaigns etc
   ========================================================================== */
/* ===========================================================================================
 *  MODAL
============================================================================================== */
/*  .modal-open body class
    z-index so modal overlays are always on top
------------------------------------------------------- */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.modal-open .dropdown-menu {
  z-index: 2050;
}

.modal-open .popover {
  z-index: 1000;
}

.modal-open .tooltip {
  z-index: 2070;
}

/*  modal background
------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.5;
}

.body-draw-open {
  overscroll-behavior: contain;
}
.body-draw-open .modal-backdrop.fade.in {
  opacity: 0.15;
}

/*  MODAL OVERLAY POSITION
------------------------------------------------------- */
.modal,
.Modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10000;
  width: 560px;
  margin: -230px 0 0 -280px;
  overflow: auto;
  background: #fff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
}

/*
  This can be used where you may need a long selectize dropdown
  that overflow's the wrapper of the modal window.
 */
.Modal.Modal--noOverflow {
  overflow: visible;
}

/*  TRANSITION - Animation from top and opacity
------------------------------------------------------- */
.modal.fade {
  top: -25%;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 50%;
}

/*  ALTERNATIVE MODAL STYLES
------------------------------------------------------- */
/*  MODAL HEADER
    New BEM/SUIT Modal conventions
------------------------------------------------------- */
.Modal-header {
  background: #FCFCFC;
  padding: 18px 24px;
  border-bottom: 1px solid #eaeaea;
}

.Modal-title {
  font-size: 1.7rem;
  font-weight: 600;
  color: #222;
  text-shadow: 0 1px 0 #fff;
  margin: 0 !important;
}

.Modal-subTitle {
  font-size: 1.5rem;
  font-weight: bold;
  color: #000;
  line-height: 1;
  margin: 0 0 1em;
}

.Modal-heading {
  font-size: 1.3rem;
  font-weight: 500;
  color: #000;
  line-height: 1;
  margin: 0 0 1.2em;
}

.Modal-close {
  line-height: 1;
  margin-top: -6px;
  font-size: 3.4rem;
}

.modal-header {
  background: #FCFCFC;
  padding: 22px 15px;
  border-bottom: 1px solid #eaeaea;
}
.modal-header h3 {
  margin-bottom: 0 !important;
  font-size: 1.6rem;
  font-weight: bold;
  color: #222;
  text-shadow: 0 1px 0 #fff;
  line-height: 1;
}
.modal-header .modal-sub-head {
  color: #000 !important;
}
.modal-header .close {
  line-height: 1;
  margin-top: -11px;
  font-size: 34px;
}

/*  MODAL BODY
------------------------------------------------------- */
.modal-body {
  position: relative;
  padding: 18px 15px;
  max-height: 460px;
  overflow-y: auto;
  font-size: 1.4rem;
}

.modal-body--scrolling {
  max-height: 380px;
  overflow-y: auto;
}

/* used by alerts: slack etc. Needs review */
.modal-help-link {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
}

.modal-body-inner {
  padding: 0.25em 0 1em;
}

.modal-form {
  margin-bottom: 0;
}

.Modal-body {
  padding: 0;
  /*
    surpress in-line error messages in Modal forms
    NOTE: the span element prefix IS required for
    this use case.
  */
}
.Modal-body span.field-error {
  display: none !important;
}

.Modal-body--padded {
  padding: 0 24px;
}

.Modal-body--paddedForm {
  padding: 30px;
}

.modal-section-padded {
  padding: 0 16px;
}

.modal-section-padded-inner {
  padding: 0 24px 0 24px;
}

.modal-section-padded-content {
  padding: 14px 8px 6px 8px;
}

.modal-section-item {
  padding: 6px 8px 0 8px;
}

/*  MODAL FOOTER
------------------------------------------------------- */
.modal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right;
  border-top: 1px solid #eee;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 1px 0 #ffffff;
}
.modal-footer::after {
  clear: both;
  content: "";
  display: block;
}

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

/* --------------------------------------------------------------------------
 *  MODAL OVERLAYS - Overide bootstrap modals
----------------------------------------------------------------------------- */
.modal .close {
  background: none;
  border: none;
}

.modal .modal-body .form-actions {
  margin: 0 -14px;
}

/* --------------------------------------------------------------------------
 *  MODAL SIZE MODIFIERS
----------------------------------------------------------------------------- */
.modal-wide {
  width: 698px !important;
  margin: -250px 0 0 -349px !important;
  word-break: break-word;
}

.modal--xWide {
  width: 800px !important;
  margin: -250px 0 0 -400px !important;
}

/* Use case - Modal window containing on-boarding videos */
.modal--xxWide {
  width: 1024px;
  height: 600px;
  margin: -300px 0 0 -512px !important;
}

.modal--small {
  width: 460px;
  margin: -280px 0 0 -230px !important;
}

.modal .form-side-by-side {
  padding-top: 0;
}

/*
    Simple Modal Overlay
    E.g. Container for video iframe
*/
.Modal--simple .Modal-header {
  background: transparent !important;
  border: none;
}
.Modal--simple .Modal-close {
  position: relative;
  top: 10px;
  right: 16px;
  z-index: 99999;
}

.modal .modal-body {
  margin: 0;
  border: none;
  box-shadow: none;
  padding-bottom: 0;
}
.modal .modal-body fieldset {
  padding: 0;
}
.modal .modal-body fieldset textarea + .field-error {
  margin-left: 180px;
}
.modal .modal-body .mod-article-pri-body {
  background: transparent;
}
.modal .modal-body .mod-article-pri-body li:last-child {
  margin-bottom: 36px;
}
.modal .modal-body .mod-article-pri-header {
  display: none;
}
.modal .modal-body .form-actions {
  padding: 18px 0 18px 190px;
}

/*
  Force visible custom scrollbars in overlays webkit (safari/chrome)
  ----------------------------------------------------------------------
  This is to work around the usability issue where scrollbars
  are hidden by default on OSX, therefore there is little affordance that
  the user can scroll.

  Currently can't find solution in recent firefox OSX versions.
*/
.modal ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.modal ::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
 *  RED MODAL OVERLAY
 *  Destructive actions e.g. server delete confirmation
----------------------------------------------------------------------------- */
.Modal--red .Form-fieldset,
.Modal--red .Modal-body {
  background: #ce0000 !important;
  color: #fff !important;
}
.Modal--red .Form-modalActions {
  background: #fff !important;
}
.Modal--red .u-textWeighted, .Modal--red a {
  color: #fff !important;
}
.Modal--red .Button--deleteOutlined {
  color: rgb(203, 36, 49) !important;
}
.Modal--red .Button--deleteOutlined:hover {
  color: #fff !important;
}
.Modal--red .Button--cancel {
  color: #000 !important;
}

.Modal--destructive h3 {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  padding: 0 0.25em;
  line-height: 1;
}
.Modal--destructive .modal-body {
  background: #ce0000;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1.8em;
  color: #fcfcfc;
  font-size: 18px;
}
.Modal--destructive .modal-body #js-del-target {
  font-weight: 600;
  color: #fff;
}
.Modal--destructive .modal-body .delete-confirm {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.Modal--destructive .modal-body .delete-confirm b {
  letter-spacing: -0.5px;
}
.Modal--destructive .modal-body .delete-warning {
  font-size: 15px;
  font-weight: 500;
}
.Modal--destructive .modal-body .delete-message {
  font-size: 14px;
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 12px;
}
.Modal--destructive .modal-body .delete-message code {
  padding: 2px 6px;
  background-color: #fff;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
 *  WARNING MODAL OVERLAY (amber)
    Differentiate actions with potentially destructive outcomes
    e.g. data replication overlay
----------------------------------------------------------------------------- */
.Modal--warning {
  background: transparent !important;
}
.Modal--warning .modal-header {
  background: linear-gradient(#E59732, #E89933);
  border-bottom: 1px solid #E5880D;
  border-radius: 2px 2px 0 0;
}
.Modal--warning .modal-header h3 {
  color: #fff;
  text-shadow: none !important;
}
.Modal--warning .modal-header h3:before {
  font-family: "cloud66-icons";
  content: "[";
  margin-right: 0.35em;
  margin-top: -1px;
  font-size: 1.6rem;
  color: #fff;
}
.Modal--warning .modal-header .close {
  color: #f0f0f0;
  text-shadow: none;
  opacity: 0.65;
}
.Modal--warning .modal-header .close:hover {
  opacity: 0.9;
}
.Modal--warning .modal-body {
  background: #FCF8F2;
  border-radius: 0 0 2px 2px;
}
.Modal--warning .form-help {
  color: #222;
  font-size: 1.2rem;
}

/* --------------------------------------------------------------------------
 *  Typography within modal overlays
----------------------------------------------------------------------------- */
.modal h4 {
  line-height: 1.8;
}
.modal .modal-links {
  margin: 1.2em 0;
}
.modal .modal-links > li {
  padding-left: 2em;
  line-height: 1;
  list-style-position: inside;
  list-style: none;
  padding-left: 0.25em;
  color: #444;
}
.modal .modal-links > li:before {
  display: inline-block;
  content: "»";
  margin-right: 0.35em;
  color: #0078B5;
}

.modal-copy {
  margin: 0;
}
.modal-copy h4 {
  margin: 0 0 0.8rem;
  font-size: 1.4rem;
  line-height: 1;
  color: #000;
  font-weight: 500;
}
.modal-copy ul {
  margin: 0 0 2.4rem 1.6rem;
}
.modal-copy ul li {
  padding: 0.25rem 4rem 0.2rem 0;
  font-size: 1.4rem;
}
.modal-copy p {
  font-size: 1.3rem;
  color: #444;
  margin-bottom: 1.2em;
}

/* Older Modal actions */
.modal-actions {
  padding: 6px 0 4px 0;
}
.modal-actions hr {
  margin: 8px 0;
}
.modal-actions .btn-primary {
  margin-left: 4px;
}

/**
 *
 *  Delete Confirmation Modal
 *  Checkbox
 */
.Modal-checkboxContainer {
  padding-top: 3px;
}

.Modal-checkbox {
  display: inline-block;
  transform: scale(1.15);
}

.Modal-label {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  padding-left: 0.5em;
  padding-bottom: 1em;
}

.Modal-labelSmall {
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-top: 24px;
}

.Modal-input {
  width: 360px;
  font-weight: bold !important;
  color: #000 !important;
}

/**
 *
 * ******************************************************
 */
.ScreenList {
  padding: 8px;
}

.ScreenList-item {
  margin-bottom: 20px;
  width: 100%;
  height: 180px;
}

.ScreenList-cta {
  transition: background-color 0.4s ease;
  overflow: hidden;
  width: 100%;
  height: 180px;
  border: 1px solid #D1D1D1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  background-color: rgba(255, 255, 255, 0.5);
}
.ScreenList-cta:hover {
  border-color: #BFBFBF;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.01);
}
.ScreenList-cta:hover .ScreenList-icon {
  color: #000;
}

.ScreenList-title {
  margin: 1em 0 0.5em 0;
}

.ScreenList-desc {
  padding-right: 3em;
  font-size: 1.3rem;
  color: #777;
  line-height: 1.5;
}

.ScreenList-icon {
  transition: color 0.4s ease;
  display: block;
  font-size: 3.8rem;
}

.ScreenList-item--livelogs {
  background: url("/assets/app/live_logs_screen-efc0e10c69d9b8b32610306af45c861c5b7ce7c8.png") no-repeat 0 3px;
}

.ScreenList-item--cx {
  background: url("/assets/app/cx_screen-8f89a054d0ac6b81937dc88476e69be44ed1df22.png") no-repeat 4px 4px;
}

.Modal-error {
  color: rgb(203, 36, 49);
  font-size: 1.4rem;
  line-height: 1.2;
  padding-bottom: 2px;
}

.mod-article {
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
 *  Legacy classes 
 *  Still used in managed backup modal overlay and git file history pages for now
 * -------------------------------------------------------------------------- */
.mod-article-pri {
  border: 1px solid #CECECE;
  border-radius: 6px;
}

.mod-article-pri-header {
  position: relative;
  border-radius: 6px 6px 0 0;
  padding: 14px 14px;
  color: #333;
  border-bottom: 1px solid #CACACA;
  background: linear-gradient(#FAFAFA, #F2F2F2);
}
.mod-article-pri-header h1 {
  font-size: 1.5rem;
  line-height: 1;
  color: #444;
  text-shadow: 0 1px 0 #fff;
}
.mod-article-pri-header h1 a {
  color: #0088CC;
}

.mod-article-form {
  margin-bottom: 0;
}
.mod-article-form .form-actions {
  margin-bottom: 0;
  padding-bottom: 18px;
}

/* --------------------------------------------------------------------------
 *  Core - Secondary module e.g. add-ins
 * -------------------------------------------------------------------------- */
/* Expand and collapse article module body */
/* ==========================================================================
   NAVIGATION LISTS
   ========================================================================== */
/* --------------------------------------------------------------------------
 *  RIGHT CONTEXTUAL NAV
----------------------------------------------------------------------------- */
/* Account - Side Nav Icons
--------------------------------------------------- */
.mod-nav > li > a:before {
  position: relative;
  top: 0px;
  font-family: "cloud66-icons";
  font-style: normal;
  speak: none;
  font-weight: normal;
  display: inline-block;
  margin: 0 8px 0 0px;
  font-size: 11px;
  color: #777;
}

.mod-nav > li:hover > a:before {
  color: #444;
}

.mod-nav > li.active > a:before {
  color: #222;
}

/* Icons
------------------------------------ */
#side-nav-account > a:before {
  content: "B";
}

#side-nav-dev > a:before {
  content: "J";
  content: "E";
}

#side-nav-admin > a:before {
  content: "L";
}

/* --------------------------------------------------------------------------
 *  Installed Add-In Icons and status colors
 *  Auxileries list
----------------------------------------------------------------------------- */
.AddInList {
  position: relative;
}
.AddInList .AddInList-link {
  display: inline-block;
  color: rgba(88, 97, 105, 0.7);
}
.AddInList .AddInList-link:hover {
  text-decoration: none;
  color: #427dc4;
}
.AddInList .AddInList-icon {
  position: relative;
  top: 2px;
  font-size: 11px;
}
.AddInList .AddInList-label {
  display: inline-block;
  font-size: 11px;
  color: rgba(88, 97, 105, 0.7);
}
.AddInList .AddInList-label:hover {
  color: #427dc4;
}
.AddInList .AddInList-labelInlineBlock {
  display: inline-block;
  font-size: 11px;
  margin-left: 2px;
}

.AddInList--block .AddInList-label {
  padding-left: 3px;
}

.AddInList--inline .AddInList-item {
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
  padding-left: 2px;
  padding-right: 2px;
}
@media (max-width: 620px) {
  .AddInList--inline .AddInList-item {
    display: block;
    padding: 0;
    margin: 0;
  }
}
.AddInList--inline .AddInList-item:only-child,
.AddInList--inline .AddInList-item:first-child {
  padding-left: 0 !important;
}
.AddInList--inline .AddInList-label {
  padding-right: 4px;
}

.AddInList-item.health-3 {
  color: rgb(40, 167, 69);
}

.AddInList-item.health-2 {
  color: rgb(203, 36, 49);
}

/* STATES for auxileries icons
------------------------------------ */
/* grey */
.health-0,
.health-0 a,
.health-0 .sub-ico {
  color: #999 !important;
}

/* red error status */
.health-2 .AddInList-icon,
.health-2 .AddInList-label,
.health-2 .sub-ico {
  color: #e01f22 !important;
}
.health-2 .AddInList-label {
  text-decoration: underline;
}

.health-3 .AddInList-icon {
  color: rgb(40, 167, 69) !important;
}

/* amber aux status */
.health-99,
.health-99 a,
.health-99 .sub-ico {
  color: #EA8407 !important;
}

.icon-balance:before {
  content: "\e07f";
}

/* impaired - amber */
.health-4 .AddInList-icon,
.health-4 .AddInList-label {
  color: #EA8407 !important;
}
.health-4 .AddInList-label {
  text-decoration: underline;
}

.sub-ico i {
  color: #666;
}

.sub-ico:hover i {
  color: #0088CC;
}

.sub-ico.error i {
  color: #B52B2B;
}

/* --------------------------------------------------------------------------
 *  Top right module - list of tool icons
----------------------------------------------------------------------------- */
.Toolbar {
  display: inline-block;
}
.Toolbar li {
  display: inline-block;
  margin: 0 2px;
  vertical-align: middle;
}
.Toolbar li:last-child {
  margin-right: 0;
}
.Toolbar .Icon {
  position: relative;
  top: 2px;
}

.tool-list,
.List--icons {
  position: relative;
}
.tool-list > li,
.List--icons > li {
  margin: 0 5px;
  padding: 0;
}
.tool-list .stack-tool-txt,
.List--icons .stack-tool-txt {
  padding-left: 2px;
}
.tool-list li:last-child,
.List--icons li:last-child {
  margin-right: 0;
}

/* Webkit only - workaround for issue where position is 1px out  */
@supports selector(::-webkit-scrollbar) {
  .List--icons .icon-pencil {
    top: 1px;
  }
}
@media only screen and (max-width: 800px) {
  ul.tool-list--responsive > li {
    display: block !important;
    margin: 0 0 3px 0;
    opacity: 1 !important;
  }
}
.tool-colAction {
  right: 8px;
  top: 0px;
}

.tool-linkPrimary {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none !important;
}
.tool-linkPrimary:hover {
  color: black;
}

.tool-list-dropdown a i {
  color: #546168;
}

.tool-list .drop-down-container > a {
  display: inline-block;
}

.tool-list .drop-down-container > a i {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
 *  Toggle List (e.g. logging toggle - summary debug)
----------------------------------------------------------------------------- */
/* The toggle nav list
--------------------------- */
/* states to toggle both display of the link and the list items
------------------------------------------------------------------ */
.js-show-log-show-all #js-show-log-all-btn {
  display: none;
}

.js-show-log-show-summary #js-show-log-summary-btn {
  display: none;
}

/* BREADCRUMB TRAIL
------------------------------------------------------------------ */
.bread-crumbs {
  box-sizing: border-box;
  background: linear-gradient(#fff, #FCFCFC);
  position: absolute;
  border-bottom: 1px solid #EFEFEF;
  z-index: 1;
  top: 50px;
  left: 0px;
  width: 100%;
  padding: 4px 20px 6px 22px;
}
.bread-crumbs .bread-crumbs-list a:after {
  color: #444;
  padding: 0 0 0 6px;
  content: "»";
  font-size: 14px;
}
.bread-crumbs a:hover {
  text-decoration: none;
  color: #000;
}
.bread-crumbs li:last-child {
  color: #000;
}

/* Horizontal Navigation list
-----------------------------------  */
.horizontal {
  list-style: none;
  margin: 0;
}
.horizontal > li {
  float: left;
  border-right: 1px solid #BFBFBF;
  border-left: 1px solid #F9F9F9;
  line-height: 1.1;
  padding: 0 10px;
}
.horizontal > li:last-child {
  border-right: none;
  padding-right: 0;
}
.horizontal > li:first-child {
  border-left: none;
  padding-left: 0;
}
.horizontal > li:only-child {
  border-right: none;
}

.pager-links.initial-state li {
  border: none;
}
.pager-links.initial-state .next {
  display: none;
}

.nav-outlined a {
  background: #fff !important;
}
.nav-outlined a:hover {
  background: #f5f5f5 !important;
}

/* ==========================================================================
 *  ALERT NOTIFICATIONS (Fixed position top)
============================================================================= */
/* Fixed top Notifications
------------------------------------------------------------------------------------------------ */
.HeaderNotificationBar {
  box-sizing: border-box;
  overflow: hidden;
  z-index: 999999 !important;
  /* above .modal-backdrop in the stack order */
  color: #4c4a42;
  background: #FFF9EA;
  background: rgba(255, 249, 234, 0.99);
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.09);
  border: 1px solid #E5D6B0;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 12px 1.2em;
  font-size: 12px;
  line-height: 1.1;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: 60%;
}
@media (max-width: 620px) {
  .HeaderNotificationBar {
    width: 95%;
  }
}
.HeaderNotificationBar .close {
  pointer-events: auto !important;
  position: relative;
  top: -3px;
  right: -3px;
  font-size: 30px;
  font-weight: 100 !important;
}
.HeaderNotificationBar .header-notification-cancel-msg {
  position: absolute;
  top: 0.8em;
  right: 0.7em;
}
.HeaderNotificationBar i {
  position: relative;
  top: 1px;
  margin-right: 0.25rem;
}
.HeaderNotificationBar a {
  text-decoration: underline;
}

.HeaderNotificationBar-link {
  pointer-events: auto !important;
  text-decoration: none !important;
  border-bottom: 1px solid;
  padding-bottom: 1px;
}

.notification-active .whats-new-count {
  opacity: 0.3;
}

.HeaderNotificationBar--error .close,
.HeaderNotificationBar.alert-error .close {
  color: #FFEAEA;
  opacity: 0.75;
}
.HeaderNotificationBar--error .close:hover,
.HeaderNotificationBar.alert-error .close:hover {
  color: #FFEFEF;
  opacity: 1;
}

/*  RED NOTIFICATION BAR FOR ERRORS
------------------------------------------------------------------------------------------------ */
.HeaderNotificationBar--error,
.alert-destructive,
.alert-error {
  color: #F2F2F2 !important;
  background: #FCDEDE !important;
  border-top: none;
  border: 1px solid #d2b2b2;
  color: #911 !important;
}
.HeaderNotificationBar--error a,
.HeaderNotificationBar--error .close,
.alert-destructive a,
.alert-destructive .close,
.alert-error a,
.alert-error .close {
  color: #911 !important;
}

/*  ORANGE WARNING NOTIFICATION BAR
------------------------------------------------------------------------------------------------ */
.HeaderNotificationBar--warning {
  color: #BF6900 !important;
  background: #FFE6C1 !important;
  border-top: none;
  border: 1px solid #FFBE75;
  box-shadow: none !important;
}
.HeaderNotificationBar--warning .HeaderNotificationBar-icon {
  margin-right: 6px;
  top: 0;
}
.HeaderNotificationBar--warning .HeaderNotificationBar-link {
  color: #BF6900 !important;
  border-color: #BF6900;
}
.HeaderNotificationBar--warning a.close {
  color: #BF6900 !important;
}

/*  ORANGE SUCCESS NOTIFICATION BAR
------------------------------------------------------------------------------------------------ */
.HeaderNotificationBar--success {
  color: #468847;
  background: rgba(223, 240, 216, 0.99);
  border-top: none;
  border: 1px solid #bbcea9;
  box-shadow: none !important;
}
.HeaderNotificationBar--success a,
.HeaderNotificationBar--success .close {
  color: #468847;
}

/* ==========================================================================
 *  INFO CALLOUTS - FORM STEP 2 ETC
============================================================================= */
.check-list li {
  padding-left: 6px;
  padding: 2px 0 2px 6px;
  font-size: 1.4rem;
}
.check-list label {
  display: inline;
  margin: 0;
  line-height: 1;
  vertical-align: middle;
  padding-left: 4px;
}
.check-list .text-indented {
  padding-left: 26px;
}

/* YELLOW INFO BOX - eg form step 2 */
.info {
  font-size: 1.4rem;
  padding: 8px;
  padding-top: 16px;
}
.info .info-list {
  margin: 4px 23px;
  padding-right: 6em;
}
.info .info-list li {
  line-height: 1.5;
  margin-bottom: 0.6em;
}
.info .form-controls {
  padding-top: 0;
}
.info .info-divider {
  margin-bottom: 1em;
}
.info label {
  font-size: 13px;
}

/*  OLD LOGS STRUCRURE
    Don't remove yet - as some of this is used by the LiveLogs page
============================================================================================== */
.log-list {
  background: #fff;
  list-style: none;
  counter-reset: li; /* Initiate a counter */
  margin: 0;
  padding: 0;
}
.log-list .log-item {
  position: relative;
  padding: 6px;
  border-bottom: 1px dotted #eaeaea;
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
  font-size: 12px;
  line-height: 1.7;
  word-break: break-all; /* force break as the layout can be broken by long strings ssh keys on the ssl page */
}
.log-list .log-item:first-child {
  padding-top: 10px;
}
.log-list .log-item:last-child {
  border-bottom: none;
  padding-bottom: 10px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.log-list .log-item .log-key-val:hover .log-time {
  display: block;
}
.log-list .log-time,
.log-list .log-server {
  color: #637893;
  font-weight: 400;
}
.log-list .log-server {
  display: inline-block;
  min-width: 25px;
}
.log-list .log-message {
  color: #323B49;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  word-wrap: break-word;
  line-height: 1.3;
}
.log-list .log-message a {
  color: #427dc4;
  padding-bottom: 1px;
  border-bottom: 1px solid;
  text-decoration: none;
}
.log-list .log-message .blue {
  color: #0077AA;
}
.log-list .log-message .green {
  color: #35B46E;
}
.log-list .log-message .yellow {
  color: #EA8407;
}
.log-list .log-message .red {
  color: rgb(203, 36, 49);
}
.log-list .log-item-module {
  border-bottom: none;
  line-height: 1;
  padding: 0px 20px 0px 0px;
}
.log-list .log-item-module .log-message-module {
  line-height: 1.9;
  border-bottom: none;
}
.log-list .log-item-module:last-child {
  padding-bottom: 0;
  padding-top: 0;
}
.log-list .log-item-module:first-child {
  padding-top: 0;
}
.log-list .log-list-child {
  margin: 6px 0 0 0;
}
.log-list .log-list-child .log-time {
  font-size: 11px;
  display: none;
  line-height: 1;
  padding-left: 5px;
}
.log-list .log-list-child .log-message {
  line-height: 1;
}

.log-message-strong {
  color: #35B46E !important;
  font-weight: 500;
}

.log-message-module-strong {
  color: #DD7600 !important;
  line-height: 2.1;
}

/*  LOG ERRORS
------------------------------------------------------- */
li.log-item.log-severity-4 .log-message {
  color: rgb(203, 36, 49);
}
li.log-item.log-severity-4 a {
  color: rgb(203, 36, 49);
  font-weight: 500;
  padding-bottom: 1px;
  border-bottom: 1px solid;
  text-decoration: none;
}

/*
    log-list--compact
    compacted logs used by LiveLogs
------------------------------------------------------- */
.log-list--compact {
  padding: 6px 0;
}
.log-list--compact .log-item {
  position: relative;
  line-height: 1.7;
  padding: 1px 6px;
  font-size: 0.9rem;
  border: none;
}
.log-list--compact .log-item:hover {
  background: #FFFDF2;
}
.log-list--compact .LiveLog-gutter {
  margin: 0 2px 0 0;
  display: inline-block;
  width: 6px;
  height: 7px;
  border-radius: 2px;
}
.log-list--compact .log-item-link {
  display: block;
  margin: 0.25em 0;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1rem;
  text-decoration: none;
}
.log-list--compact .log-item-link:hover {
  text-decoration: underline;
}
.log-list--compact .log-item--context {
  background: #F2F9FC;
  color: #000;
  border-top: 1px dotted #F2F9FC;
  border-bottom: 1px dotted #F2F9FC;
  -webkit-animation-name: contextFade;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  animation-name: contextFade;
  animation-direction: normal;
  animation-duration: 10s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
}

@-webkit-keyframes contextFade {
  0% {
    background: #DDF4FF;
    border-color: #F2F9FC;
  }
  100% {
    background: #F2F9FC;
    border-color: #F2F9FC;
  }
}
@keyframes contextFade {
  0% {
    background: #DDF4FF;
    border-color: #F2F9FC;
  }
  100% {
    background: #F2F9FC;
    border-color: #F2F9FC;
  }
}
/*  LOG TOGGLE DEBUG VISIBILITY
============================================================================================== */
.js-show-log-show-all .log-message-module, .js-show-log-show-all .log-list-child, .js-show-log-show-all .log-severity-1 {
  display: block;
}

/*  LOG NESTED KEY VAL STRUCTURE
============================================================================================== */
.log-key-val {
  margin: 0 0 0 6px;
}
.log-key-val dl {
  display: table;
}
.log-key-val dl * {
  box-sizing: border-box;
}
.log-key-val dt {
  display: table-cell;
  margin-bottom: 0;
  min-width: 74px;
  line-height: 1;
}
.log-key-val dd {
  margin: 0;
  display: table-cell;
  margin-bottom: 0;
  line-height: 1;
}
.log-key-val .Tag-item {
  position: relative;
  top: -1px;
  min-width: 48px;
  font-size: 11px;
  font-weight: 400;
}

/* End old logs
============================================================================================== */
/* ==========================================================================
   Onboarding
   ==========================================================================
*/
/**
 * StepsNav
 * Maestro Onboarding navigation
 *
 */
.StepsNav {
  display: flex;
  align-items: stretch;
  padding: 8px 0 0 0;
  margin: 0px 0 20px 0;
  border-bottom: 3px solid #efefef;
  /* Disabled state */
}
.StepsNav .StepsNav-link {
  flex: 1;
  position: relative;
  top: 3px;
  padding: 0 20px 13px 20px;
  outline: none;
  text-decoration: none;
  transition: none;
}
.StepsNav .StepsNav-link:hover .StepsNav-title {
  color: #000;
}
.StepsNav .StepsNav-link:hover .StepsNav-text {
  color: #333;
}
.StepsNav .StepsNav-content {
  display: flex;
}
.StepsNav .StepsNav-number {
  display: inline-block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 34px;
  text-align: center;
  margin: 4px 14px 0 0;
  font-size: 14px;
  font-weight: bold;
  background-color: #eee;
  color: #000;
}
@media only screen and (max-width: 1023px) {
  .StepsNav .StepsNav-number {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 24px;
    font-size: 12px;
  }
}
@media only screen and (max-width: 480px) {
  .StepsNav .StepsNav-number {
    font-size: 10px;
  }
}
.StepsNav .StepsNav-title {
  font-size: 15px;
  display: block;
  font-weight: 600;
  color: #333;
  padding-bottom: 4px;
}
@media only screen and (max-width: 1023px) {
  .StepsNav .StepsNav-title {
    font-size: 13px;
    font-weight: 500;
  }
}
@media only screen and (max-width: 480px) {
  .StepsNav .StepsNav-title {
    font-size: 12px;
  }
}
.StepsNav .StepsNav-text {
  display: block;
  font-weight: normal;
  font-size: 13px;
  padding-bottom: 6px;
  color: #666;
}
@media only screen and (max-width: 1023px) {
  .StepsNav .StepsNav-text {
    font-size: 11px;
  }
}
.StepsNav .StepsNav-link.is-active {
  border-bottom: 3px solid #42ca49;
  cursor: auto;
}
.StepsNav .StepsNav-link.is-active .StepsNav-title,
.StepsNav .StepsNav-link.is-active .StepsNav-text {
  color: #000;
}
.StepsNav .StepsNav-link.is-active .StepsNav-number {
  background-color: #42ca49;
  color: #fff;
}
.StepsNav .StepsNav-link.is-disabled {
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.5;
}
.StepsNav .StepsNav-link.is-disabled .StepsNav-title,
.StepsNav .StepsNav-link.is-disabled .StepsNav-text {
  color: #919191;
}

.StepsNav--onboarding {
  z-index: 10;
  background: white;
  position: sticky;
  top: 80px;
}

/* -------------------------------------------------- */
@media only screen and (min-width: 1024px) {
  .SourceProviderWrap {
    min-height: 530px;
  }
}

.SourceProvider {
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;
  max-width: 680px;
}
@media only screen and (max-width: 1023px) {
  .SourceProvider {
    max-width: 100%;
  }
}
.SourceProvider .SourceProvider-header {
  margin-bottom: 38px;
}
.SourceProvider .SourceProvider-header .SourceProvider-headerTitle {
  margin-bottom: 6px;
  color: #000;
}
.SourceProvider .SourceProvider-header .SourceProvider-headerText {
  color: #000;
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
}
@media only screen and (max-width: 1023px) {
  .SourceProvider .SourceProvider-header .SourceProvider-headerText {
    max-width: 100%;
  }
}
.SourceProvider .SourceProvider-item {
  text-align: center;
}
.SourceProvider .SourceProvider-icon {
  width: 70px;
  height: 70px;
}
.SourceProvider .SourceProvider-heading {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.SourceProvider .SourceProvider-footer {
  padding-top: 14px;
}
.SourceProvider .SourceProvider-secondary {
  padding-top: 8px;
}
.SourceProvider .SourceProvider-key {
  display: block;
  margin-top: 16px;
  margin-bottom: 26px;
  height: 110px;
}

.SourceProviderBenefits {
  width: 384px;
  margin: 0 auto 38px auto;
  background: #F6F8FC;
  color: #323b44;
  padding: 18px;
  border-radius: 14px;
  text-align: left;
  transition: background-color 0.25s ease;
}
.SourceProviderBenefits:hover {
  background: #f2f4f9;
}
.SourceProviderBenefits:hover .SourceProviderBenefits-item {
  color: #000;
}
.SourceProviderBenefits p.SourceProviderBenefits-text {
  color: #323b44;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}
.SourceProviderBenefits .SourceProviderBenefits-list {
  list-style: none;
  margin: 0;
}
.SourceProviderBenefits .SourceProviderBenefits-list .SourceProviderBenefits-item {
  font-size: 13px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 4px;
}
.SourceProviderBenefits .SourceProviderBenefits-list .SourceProviderBenefits-item .SourceProviderBenefits-icon {
  position: relative;
  top: 1px;
  margin-right: 4px;
}

/**
 * WIZARD STEPS NAV
 * Horizontal wizard navigation
 */
.StepsList {
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075);
  width: 100%;
  display: table;
  border: 1px solid #C1C1C1;
  border-radius: 3px;
  margin: 0 0 28px 0;
}

.StepsList-item {
  display: table-cell;
  width: 16.666%;
  background: #fafafa;
  border-right: 1px solid #C1C1C1;
  transition: background 0.3s;
}
.StepsList-item:last-child {
  border-right: none;
}
.StepsList-item * {
  transition: all 0.3s;
}
.StepsList-item .StepsList-title {
  color: #427dc4;
}

.StepsList-item.is-complete:hover {
  background: #fff;
}
.StepsList-item.is-complete:hover .StepsList-link {
  cursor: pointer;
}
.StepsList-item.is-complete:hover .StepsList-icon {
  opacity: 1;
}
.StepsList-item.is-complete:hover .StepsList-description {
  color: #999;
  opacity: 1;
}

.StepsList-link {
  display: block;
  padding: 16px 13px;
}
.StepsList-link:hover {
  text-decoration: none;
}

.StepsList-icon {
  float: left;
  font-size: 2rem;
  margin: 2px 10px 0 0;
  color: #0088cc;
}

.StepsList-icon--lrg {
  font-size: 2.4rem;
}

.StepsList-title {
  color: #666;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: bold;
}

.StepsList-description {
  font-size: 1.2rem;
  font-weight: normal;
  color: #999;
}

/**
 * StepsList Modifiers
 *
 */
/*
    Use for small amount of steps
    e.g. advanced docker deployments services, manifest config
*/
.StepsList--compact .StepsList-description {
  margin-top: 3px;
  font-size: 1.4rem;
}

/**
 * WIZARD STEPS NAV
 * TAB States
 */
.StepsList-item.is-complete {
  background: #fafafa;
}
.StepsList-item.is-complete * {
  opacity: 1;
}
.StepsList-item.is-complete .StepsList-icon {
  color: rgb(40, 167, 69);
}
.StepsList-item.is-complete .StepsList-title {
  color: rgb(40, 167, 69);
}

.StepsList-item.is-active {
  background: #fff;
}
.StepsList-item.is-active * {
  opacity: 1;
}
.StepsList-item.is-active .StepsList-icon {
  color: #000;
}
.StepsList-item.is-active .StepsList-title {
  color: #000;
}
.StepsList-item.is-active .StepsList-description {
  color: #373c42;
}

.StepsList-item.is-active.is-complete {
  background: #fff;
}

/**
 * Description Lead
 * Simple description of the step
 */
.OnBoarding-leadText {
  margin: 0 0 26px;
  font-size: 1.6rem;
  font-weight: 350;
  color: #777;
  line-height: 1.5;
}

.datasource-mysql {
  background: transparent url("/assets/logo/mysql-bb347340b6446224bf6bc010981e8a438b67d0d2.png") no-repeat 6px 7px !important;
}

.datasource-postgres {
  background: transparent url("/assets/logo/postgres-82d0f4b4f3ab5be81d2057e4091758900e7b5cc7.png") no-repeat 6px 7px !important;
}

.datasource-mongodb {
  background: transparent url("/assets/logo/mongodb-28f1c94e80ef06673a710c5dc77ca2deb6952ece.png") no-repeat 6px 7px !important;
}

.datasource-elasticsearch {
  background: transparent url("/assets/logo/elasticsearch-b0c28b95bf54a4efb2f19add9d0b7b7764cb8f73.png") no-repeat 6px 7px !important;
}

.datasource-redis {
  background: transparent url("/assets/logo/redis-53f81ba775641ff49b8f0ff6441819a75e863a95.png") no-repeat 6px 7px !important;
}

.datasource-rabbitmq {
  background: transparent url("/assets/logo/rabbitmq-e136134e1ba3ea2ffe8539deab8ec6bfe72373aa.png") no-repeat 6px 7px !important;
}

.datasource-gluster {
  background: transparent url("/assets/logo/gluster-2a4636407d51be9289ea2b5ce5660f3cefc4ec0d.png") no-repeat 6px 7px !important;
}

.datasource-influxdb {
  background: transparent url("/assets/logo/influxdb-0d1be264aac91a883cd31a3229704344b9499d1d.png") no-repeat 6px 7px !important;
}

/* ==========================================================================
   Split onboarding - Oct 2016
   ==========================================================================
*/
/**
 * Step 1
 * Service cloning form
 * ******************************************************
 */
.ServiceFieldset {
  padding-top: 10px;
  position: relative;
}
.ServiceFieldset .ServiceFieldset-item {
  min-height: 93px;
  margin-top: 2px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 22px;
}
@media only screen and (max-width: 1023px) {
  .ServiceFieldset .ServiceFieldset-item {
    padding-bottom: 28px;
    padding-top: 10px;
  }
}
.ServiceFieldset .ServiceFieldset-item:last-child,
.ServiceFieldset .ServiceFieldset-item:only-child {
  border: none;
  margin-bottom: 0;
}

.ServiceFieldset-control {
  position: absolute;
  right: -4px;
  top: 33px;
}

.Form-selectSource {
  width: 92%;
  margin: 0 0 8px 0 !important;
}
@media only screen and (max-width: 1023px) {
  .Form-selectSource {
    width: 100%;
  }
}

.ServiceFieldset-spinner {
  position: relative;
  top: -3px;
  left: 3px;
}

/* < 1024px grid - linearised layout */
@media only screen and (max-width: 1023px) {
  .ObStepOne .Form-label {
    margin-top: 0.6em;
  }
}
@media only screen and (max-width: 1023px) {
  .ObStepOne .Form-inputWrap.Form-inputWrap--small {
    width: 100% !important;
  }
}
@media only screen and (max-width: 1023px) {
  .ObStepOne .ServiceFieldset-control {
    right: 0;
    top: -150px;
  }
}
@media only screen and (max-width: 1023px) {
  .ObStepOne .ico--med {
    font-size: 2rem !important;
  }
}
@media only screen and (max-width: 1023px) {
  .ObStepOne .Form-rowText {
    padding-top: 16px;
  }
}

/**
 * Services - post starter analysis
 * Added fields for: Command and Port
 * ******************************************************
 */
.ServiceFieldset-extra {
  padding-top: 6px;
  padding-bottom: 22px;
}

.ServiceFieldset-extra + .AnalysisMesasge {
  margin-top: -10px;
  padding-bottom: 10px;
}

/**
 * Onboarding Module's
 * extends standard modules for server boxes
 * ******************************************************
 */
/* Container */
.StackServersContainer {
  width: 410px;
}

.ServerActions {
  padding: 16px 0 22px;
}

.DeployActions {
  padding: 22px 0;
}

/* Globals */
.Module--blue {
  border-radius: 5px;
  border-width: 2px;
  border-color: rgb(192, 206, 211);
}
.Module--blue .Module-header {
  background: #f1f7fa;
  border-color: #C0CED3;
  border-width: 2px;
  color: #3a72b7;
  padding: 15px;
  min-height: 18px;
}
.Module--blue .Module-title {
  color: #13437d;
}
.Module--blue .Module-headerTools {
  top: 16px;
}

.Module-LineItem {
  position: relative;
  border-bottom: 1px solid rgba(192, 206, 211, 0.6);
  padding: 13px;
  font-size: 1.2rem;
}

.Module-LineItem--service:first-child .Module-LineItemAction {
  display: none;
}

.Module-LineItemContent:hover .Module-LineItemAction {
  opacity: 1;
}

.Module .Module-LineItem:first-child {
  border-top: none;
}

.Module-LineItemTitle {
  font-size: 1.2rem;
  font-weight: 500;
  color: #555;
  text-transform: none;
}

.Module-LineItemTitle--indented {
  padding-left: 27px;
}

.SourceGit {
  background: transparent url("/assets/ico/git_icon-493b9c8bfe3dc2eb35b6123218cf7054dd0c6a5b.svg") no-repeat 0 0;
  background-size: 18px auto;
  padding: 1px 0 1px 26px;
}

.SourceGitHub {
  background: transparent url("/assets/ico/github-ed44a5240eb83d70b9ba955790b79347b9d9991b.svg") no-repeat 0 0;
  background-size: 18px auto;
  padding: 1px 0 1px 26px;
}

.SourceImage {
  background: transparent url("/assets/logo/docker_logo_blue-9946e53a5307901e1601f005130b75790855863c.svg") no-repeat 0 4px;
  background-size: 18px auto;
  padding: 1px 0 1px 26px;
}

.Module-LineItemTitle.MySQL {
  background: transparent url("/assets/ico/mysql_servers-c78094e07096b4e977c3bb52dd5b8da34d59cf2e.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemTitle.PostgreSQL {
  background: transparent url("/assets/ico/postgresql_servers-bbefb528e7ce03d59f92035da5e70e61e3203f19.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemTitle.Elasticsearch {
  background: transparent url("/assets/ico/elasticsearch_cluster-91d570d3155be5d756ed198ee6e1d840058894fc.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemTitle.MongoDB {
  background: transparent url("/assets/ico/mongodb_servers-c124c9539226e46af2dad1f71be6efd5c5874238.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemTitle.RabbitMQ {
  background: transparent url("/assets/ico/rabbitmq_servers-90cced33be94e1248365b04d9995c43375ba8767.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemTitle.InfluxDB {
  background: transparent url("/assets/ico/influxdb_servers-a9bb824bf58672fcacbb604d2c417cf5bebe9ebc.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemTitle.Redis {
  background: transparent url("/assets/ico/redis_servers-1309dee7f3e61e4c8ec984816836333008b99527.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemTitle.GlusterFS {
  background: transparent url("/assets/ico/glusterfs_servers-909a4e40c9e1f9ec3740c9f20380a26a7948bdf6.svg") no-repeat 0 2px;
  background-size: 18px auto;
  padding: 2px 0 2px 26px;
}

.Module-LineItemNode {
  position: absolute;
  right: -5px;
  top: 30px;
  border-radius: 50%;
  background: rgb(192, 206, 211);
  width: 8px;
  height: 8px;
}

.Module-LineItemAction {
  opacity: 0;
  position: absolute;
  right: 16px;
  top: 32%;
}

.Module-LineItemAction--service {
  top: 38%;
}

.Module-primaryCta {
  padding: 16px;
}

.Module-LineItemConnector {
  position: absolute;
  right: -28px;
  top: 33px;
  width: 28px;
  border-top: 2px solid rgb(192, 206, 211);
}

.Module-LineItemIcon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: block;
  padding: 2px;
  position: absolute;
  top: 23px;
  right: -50px;
  z-index: 1;
}
.Module-LineItemIcon:hover {
  text-decoration: none;
}
.Module-LineItemIcon [class^=icon-] {
  color: #0088cc;
  font-size: 18px;
}
.Module-LineItemIcon [class^=icon-]:hover {
  color: #0088cc;
}
.Module-LineItemIcon .icon-servers-svg {
  position: relative;
  top: -1px;
  width: 18px;
}
.Module-LineItemIcon .icon-servers-svg path {
  fill: #0088cc;
}
.Module-LineItemIcon .icon-power-cord {
  top: -2px;
}
.Module-LineItemIcon [class^=icon-].is-disabled {
  color: #98A6AA;
}

.Module-LineItemJoiner {
  position: absolute;
  right: -202px;
  top: 33px;
  height: 70px;
  border-right: 2px solid rgb(192, 206, 211);
}

.Services {
  position: relative;
}

/* configure service networking popover positioning */
.Services-internet {
  background: #fff;
  display: block;
  padding: 4px 0 3px 5px;
  position: absolute;
  top: 26px;
  right: -60px;
  z-index: 1;
}
.Services-internet:hover {
  text-decoration: none;
}

.Services-internet--single {
  top: 16px;
}

.Services-icon {
  color: #0088cc;
  font-size: 30px;
}
.Services-icon:hover {
  color: #0088cc;
}

.Module-LineItems > .Module-LineItem:last-child .Module-LineItemJoiner {
  display: none;
}

/*
    Color coding for port state
    Web frameworks with no port info should be orange other services
    with no connection will have opacity style only.
*/
.ports-disabled .Module-LineItemIcon:hover [class^=icon-] {
  color: #0088cc;
}

/* warning styles for web services without port settings */
.ports-alert .Module-LineItemConnector,
.ports-alert .Module-LineItemJoiner,
.ports-alert .Module-LineItemNode {
  opacity: 0.4;
  border-color: #EA8407;
  background: #EA8407;
}
.ports-alert .Module-LineItemIcon [class^=icon-] {
  color: #EA8407;
}
.ports-alert .Module-LineItemIcon:hover [class^=icon-] {
  color: #0088cc;
}

/* Port Modal */
.Connector {
  position: relative;
  top: 24px;
}

.Connector-line {
  background: #c0ced3;
  position: absolute;
  top: 17px;
  width: 100%;
  border-top: 1px solid #c0ced3;
}

.Connector-lineLeft {
  background: #c0ced3;
  position: absolute;
  top: 17px;
  width: 40px;
  border-top: 1px solid #c0ced3;
}

.Connector-lineRight {
  background: #c0ced3;
  position: absolute;
  top: 17px;
  right: 0;
  width: 40px;
  border-top: 1px solid #c0ced3;
}

.Connector-label {
  position: relative;
  top: 11px;
  text-align: center;
  font-size: 11px;
  line-height: 1;
  color: #c0ced3;
}

.Connector-node {
  position: absolute;
  top: 12px;
  border-radius: 50%;
  background: #c0ced3;
  width: 10px;
  height: 10px;
}

.Connector-node--outline {
  background: #fff;
  border: 1px solid #c0ced3;
}

.Connector-node--left {
  left: 0;
}

.Connector-node--right {
  right: 0;
}

.Connector-internal {
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: -14px;
  padding: 0 2px 0 0;
  width: 20px;
  z-index: 2;
}
.Connector-internal path {
  fill: #339900;
}

.Connector-iconPlug {
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: -2px;
  width: 20px;
  z-index: 2;
}
.Connector-iconPlug .Connector-plug {
  font-size: 16px;
}

.Connector-iconInternet {
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 140px;
  padding: 0 0 0 1px;
  width: 20px;
  z-index: 2;
}
.Connector-iconInternet .Connector-internet {
  font-size: 21px;
}

/* Connected to internet */
.Connector--connected .Connector-line,
.Connector--connected .Connector-node {
  background: #339900;
  border-color: #339900;
}
.Connector--connected .Connector-plug,
.Connector--connected .Connector-internet {
  color: #339900;
}

.Connector--connectedContainer .Connector-plug {
  color: #798F96;
}
.Connector--connectedContainer .Connector-internet {
  color: #c0ced3;
}
.Connector--connectedContainer .Connector-lineLeft {
  width: 22px;
  left: 15px;
}

/* Server module warning state e.g. too many data sources */
.Module--warn {
  border-color: #EA8E1E;
}
.Module--warn .Module-header {
  border-color: #EA8E1E;
}
.Module--warn .Module-LineItem {
  border-color: #EA8E1E;
}
.Module--warn .Module-header {
  border-color: #EA8E1E;
  background: #FFF6ED;
}

.ClusterInfo {
  margin-top: -1.4em;
  padding-left: 1px;
}

.ClusterInfo-text {
  font-size: 1.2rem;
  margin-bottom: 6px;
  color: #666;
}

#js_deployment_target_radio_list li:last-child .Form-labelXtra {
  padding-bottom: 0;
}

.OverlayFull {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  height: 100%;
  width: 100%;
  max-width: 100%;
  visibility: hidden;
  opacity: 0;
  background-color: #fff;
  transition: visibility 0.3s linear, opacity 0.3s linear;
  transition-timing-function: ease-out;
}

.OverlayFull--open {
  visibility: visible;
  opacity: 1;
}

body.body-fulloverlay-open {
  overflow-y: hidden;
}

/* ==========================================================================
 *  PAYMENT PAGE
============================================================================= */
.CreditCard {
  position: relative;
  top: 2px;
  margin: 0 4px 0 0;
}

/*
 *  Input field indicator
----------------------------------------------------------------------------- */
.visa {
  background: transparent url("/assets/creditcards/visa-6c226f4ee08c88cc41e0a8bc0ac934542fb82a6b.png") no-repeat 164px 9px !important;
}

.mastercard {
  background: transparent url("/assets/creditcards/mastercard-ed18b22ba859b0be083769230fe42c7789882dda.png") no-repeat 164px 9px !important;
}

.amex {
  background: transparent url("/assets/creditcards/american_express-0f098c6e1010aa32551aaa3be235f2630616ae30.png") no-repeat 164px 9px !important;
}

/*
 *  Card list
----------------------------------------------------------------------------- */
.ccards {
  margin: 1em 0;
}
.ccards > li {
  display: inline-block;
  vertical-align: middle;
}
.ccards .card {
  text-indent: -9999px;
  height: 31px;
  width: 47px;
  background: transparent url("/assets/creditcards/cc_sprite-e8b475276eedc584c8059790fb4f881d77a7c0ac.png");
}
.ccards .visa-card {
  background-position: 0 0;
}
.ccards .amex-card {
  background-position: -50px 0;
}
.ccards .master-card {
  background-position: -100px 0;
}

/* ==========================================================================
   PRICING PLANS
   Used for selecting and switching between plans
   Full page and overlay variations
   ========================================================================== */
/*
    Plan Intro - heading and text intro
    --------------------------------
*/
.PlanIntro {
  text-align: center;
}
.PlanIntro .PlanIntro-title {
  color: #000;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 16px;
}
.PlanIntro strong {
  color: #333;
  font-weight: 500 !important;
}

/*
    Plan Nav Monthly/Annually
    --------------------------------
*/
.PlanNav {
  display: flex;
  width: 150px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  margin: 0 auto 22px auto;
  padding: 4px;
}
.PlanNav .PlanNav-item {
  flex-basis: 50%;
  border-radius: 20px;
  padding: 6px 7px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}
.PlanNav .PlanNav-item.is-selected {
  background: #43BA47;
  color: #fff;
  pointer-events: none;
}

/*
    Monthly/Annual Price Toggle
    --------------------------------
*/
.Plans .js_plan_annual {
  display: none;
}
.Plans .js_plan_monthly {
  display: block;
}

.Plans.is-annual .js_plan_annual {
  display: block;
}
.Plans.is-annual .js_plan_monthly {
  display: none;
}

@media (max-width: 620px) {
  .Plans {
    padding-left: 12px;
    padding-right: 12px;
  }
}

:root {
  --plan-selected-color: #43BA47;
}

.PlansContainer {
  margin: 0 auto;
  max-width: 1500px;
}

.Plan {
  position: relative;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 5px 17px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  transition: box-shadow 0.3s ease;
}
.Plan:hover {
  box-shadow: 0 5px 16px 2px rgba(0, 0, 0, 0.1);
}

.Plan.is-selected {
  border: 2px solid var(--plan-selected-color);
  transform: scale(1) translateY(-1px);
  box-shadow: none;
}
.Plan.is-selected .Plan-title .Plan-titleIcon {
  display: inline-block;
}

.Plan.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.Plan.is-disabled * {
  color: #999 !important;
}

.Plan-header {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 16px;
  padding-bottom: 16px;
}

.Plan-info {
  position: relative;
  left: 2px;
  font-size: 12px;
  color: #0969DA;
}

.Plan-title {
  margin: 0;
  line-height: 1;
  padding: 4px 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: #28a745;
}
.Plan-title .Plan-titleIcon {
  display: none;
  position: relative;
  top: 2px;
  left: 2px;
}

.Plan-price {
  display: block;
  line-height: 1;
  font-weight: normal;
  font-size: 15px;
  padding: 0;
  margin: 0;
}
.Plan-price strong {
  font-size: 30px;
  color: #000;
  font-weight: 700 !important;
}

.Plan-subTitle {
  line-height: 1;
  margin: 14px 0 6px 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.Plan-item {
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  padding-top: 5px;
  padding-bottom: 5px;
}
.Plan-item .Plan-icon {
  position: relative;
  top: 4px;
  font-size: 11px;
  margin-right: 7px;
  color: #28a745;
}
.Plan-item strong {
  color: #333;
  font-size: 1.45rem;
}
.Plan-item .Plan-overage {
  color: #66717a;
  font-size: 12px;
}

.PlanAction {
  margin-top: 12px;
  margin-bottom: 8px;
  text-align: center;
}
.PlanAction .PlanAction-secondary {
  padding-top: 16px;
}

.PlanActionMessage {
  text-align: center;
  margin: 0 auto 0 auto !important;
  font-size: 14px;
}

/*
    Full Screen Overlay
    --------------------------------
*/
.Drawer--fullScreen,
.OverlayFull {
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.925) !important;
}
.Drawer--fullScreen .Message,
.OverlayFull .Message {
  margin-top: 38px;
}
.Drawer--fullScreen .pricingPlans,
.OverlayFull .pricingPlans {
  padding-top: 24px;
  position: relative;
  display: flex;
  align-items: center;
}
.Drawer--fullScreen .pricingPlans-close,
.OverlayFull .pricingPlans-close {
  position: absolute;
  top: 24px;
  right: 40px;
  font-size: 50px;
}
.Drawer--fullScreen .PlansForm,
.OverlayFull .PlansForm {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
}

.OverlayFull-content {
  width: 60%;
  margin: 0 auto;
  padding-top: 24px;
  text-align: center;
}
.OverlayFull-content .OverlayFull-close {
  position: absolute;
  top: 24px;
  right: 40px;
  font-size: 50px;
}
.OverlayFull-content .OverlayFull-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #000;
}
.OverlayFull-content .OverlayFull-subtitle {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 24px;
  padding-left: 40px;
  padding-right: 40px;
}
.OverlayFull-content .OverlayFull-video {
  padding-top: 24px;
}

.LegacyPlans {
  margin: -10px auto 0 auto;
  width: 660px;
}
.LegacyPlans .LegacyPlans-summary {
  text-align: center;
  font-weight: 500;
}

.LegacyPlans--single {
  max-width: 330px;
}

.LegacyPlanContainer {
  position: relative;
  margin: 20px auto 20px auto;
}
.LegacyPlanContainer .Plan-header {
  margin-bottom: 24px !important;
}
.LegacyPlanContainer .Plan-icon {
  top: 0 !important;
}
.LegacyPlanContainer .LegacyPlanContainer-label {
  position: absolute;
  top: 20px;
  right: 16px;
  z-index: 10;
  padding: 1px 6px;
  background: #43BA47;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  border-radius: 3px;
  font-weight: 500;
}
.LegacyPlanContainer .LegacyPlanContainer-expander {
  position: absolute;
  bottom: 18px;
  left: 22px;
  z-index: 10;
  font-size: 13px;
  color: #59626b;
}
.LegacyPlanContainer .LegacyPlanContainer-expander:hover {
  color: #427dc4;
}
.LegacyPlanContainer .Plan-item,
.LegacyPlanContainer .Plan-subTitle {
  display: none;
}

.LegacyPlanContainer--disabled .Plan {
  border-color: #ddd !important;
}
.LegacyPlanContainer--disabled .Plan-title {
  color: #555 !important;
}
.LegacyPlanContainer--disabled .Plan-price {
  color: #333 !important;
}
.LegacyPlanContainer--disabled .Plan * {
  opacity: 0.9;
}
.LegacyPlanContainer--disabled .LegacyPlanContainer-label {
  background: #ddd;
}
.LegacyPlanContainer--disabled .Plan-icon {
  color: #999;
}

.LegacyPlans-text {
  text-align: center;
  margin-bottom: 20px;
}

.AddOn {
  font-size: 14px;
}
.AddOn .AddOn-title {
  line-height: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* ===========================================================================================
 *  POPOVER - legacy
 *  Styles for tags popover editor, tables in popovers, code blocks are still required
 *  JQuery UI popovers commented out for now
 *  popover-content is still used by the popover tags editor
============================================================================================== */
/* BASE
-------------------------------------------------- */
/*
  Still used by tags editor
  --------------------------------------------------------------------------------
 */
.popover-content {
  padding: 4px 9px;
  font-size: 1.1rem;
  color: #666;
  background: #FCFCFC;
  white-space: normal;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.popover-content p,
.popover-content ul,
.popover-content ol {
  margin: 0 0 4px;
}
.popover-content ul {
  padding-left: 12px;
}
.popover-content ul li {
  line-height: 1.2;
  padding: 2px 0;
}
.popover-content ul li b {
  color: #000;
  font-weight: 500;
}
.popover-content b {
  font-weight: normal;
  color: #000;
}

/* Tags editor - still used */
.popover-actions {
  margin: 4px 9px;
  padding: 6px 6px;
  font-size: 1.1rem;
  color: #999;
}

/* Tags editor popover - still used
-------------------------------------------------- */
.popover--actions h4 {
  font-weight: 500;
  padding-top: 0.4em;
  padding-bottom: 1em;
}
.popover--actions .popover-inner {
  padding: 8px 6px;
}
.popover--actions .Button {
  font-size: 1.3rem;
}

/* popover tables
   tabular key/value data within a popover
   STILL USED FOR FAIL OVER GROUP POPOVERS
-------------------------------------------------- */
.popover-table--bordered {
  border-collapse: collapse;
  width: 100%;
  margin-top: 4px;
}
.popover-table--bordered td {
  border-bottom: 1px dotted #ddd;
  padding: 4px 0;
}
.popover-table--bordered tr:last-child td {
  border: none;
}

td.popover-tableKey {
  font-weight: 500;
  color: #222;
}

td.popover-tableVal {
  line-height: 1.2;
  padding: 2px;
}

/*
  STILL USED - SERVICES POPOVERS
  Popover containing preformatted code blocks e.g. service.yml snippet for storage info
  can be used for any preformatted code blocks including prism.js styled html
*/
.popOver--codePreview {
  width: 350px;
}
.popOver--codePreview .popover-content {
  padding-top: 2px !important;
  padding-bottom: 8px !important;
}
.popOver--codePreview .popover-content p,
.popOver--codePreview .popover-content pre,
.popOver--codePreview .popover-content code {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent;
  line-height: 1.2;
}

/* Disabled primary actions within popover in sample apps
   disable tags editor action buttons in sample apps
-------------------------------------------------------------- */
body.is-sample-app .tippy-content .Button--pri,
body.is-sample-app .popover .Button--pri {
  pointer-events: none;
  cursor: not-allowed !important;
  opacity: 0.3 !important;
  color: #999 !important;
  border: 1px solid #BFBFBF !important;
  background: #FCFCFC !important;
  box-shadow: none;
}

/*
    PrismJS & prettify.css syntax highlighting styles
 */
.pln {
  color: #000;
}

@media screen {
  .str {
    color: #080;
  }
  .kwd {
    color: #008;
  }
  .com {
    color: #800;
  }
  .typ {
    color: #606;
  }
  .lit {
    color: #066;
  }
  .clo, .opn, .pun {
    color: #660;
  }
  .tag {
    color: #008;
  }
  .atn {
    color: #606;
  }
  .atv {
    color: #080;
  }
  .dec, .var {
    color: #606;
  }
  .fun {
    color: red;
  }
}
@media print, projection {
  .kwd, .tag, .typ {
    font-weight: 700;
  }
  .str {
    color: #060;
  }
  .kwd {
    color: #006;
  }
  .com {
    color: #600;
    font-style: italic;
  }
  .typ {
    color: #404;
  }
  .lit {
    color: #044;
  }
  .clo, .opn, .pun {
    color: #440;
  }
  .tag {
    color: #006;
  }
  .atn {
    color: #404;
  }
  .atv {
    color: #060;
  }
}
pre.prettyprint {
  padding: 2px;
}

ol.linenums {
  margin-top: 0;
  margin-bottom: 0;
}

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
  list-style-type: none;
}

li.L1, li.L3, li.L5, li.L7, li.L9 {
  background: transparent !important;
}

/*
   Override the line numbering
 */
.prettyprint ol.linenums li {
  margin-left: 3px;
  padding-left: 4px;
  color: #a0a0a0 !important;
  background: transparent !important;
  list-style-type: decimal !important;
  font-size: 11px !important;
}

/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*=language-],
pre[class*=language-] {
  color: black;
  background: none;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*=language-]::-moz-selection,
pre[class*=language-] ::-moz-selection,
code[class*=language-]::-moz-selection,
code[class*=language-] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre[class*=language-]::selection,
pre[class*=language-] ::selection,
code[class*=language-]::selection,
code[class*=language-] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*=language-],
  pre[class*=language-] {
    text-shadow: none;
  }
}
/* Code blocks */
pre[class*=language-] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: transparent;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #999;
}

.token.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #9a6e3a;
  /* This background color was intended by the author of this theme. */
  background: hsla(0, 0%, 100%, 0.5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}

.token.function,
.token.class-name {
  color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* ===========================================================================================
 *  PRICING PLANS
 *  Pricing plan comparison table
============================================================================================== */
/* ===========================================================================================
 *  MAIN TABLE
============================================================================================== */
.plans-wrap {
  margin: 30px 0 20px 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.plans-table {
  width: 100%;
  margin: 0 !important;
  font-size: 1.3rem;
  border: none !important;
}
.plans-table colgroup.selected {
  background: rgb(244, 247, 251);
}
.plans-table th, .plans-table td {
  padding: 16px 0;
}
.plans-table .highlighter {
  background: #FFFDF2 !important;
}
.plans-table .highlighter td {
  background: #FFFDF2 !important;
  color: #000 !important;
}
.plans-table thead th {
  color: #000;
  border-bottom: 1px solid #ededed;
  border-right: 1px solid #ededed;
  padding-left: 8px;
  padding-right: 8px;
  font-weight: 500;
  background: #FAFBFC !important;
}
.plans-table thead .header-title {
  font-size: 1.5rem;
  letter-spacing: 0.025em;
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.plans-table thead .bill-time {
  font-weight: normal;
  font-size: 1.3rem;
}
.plans-table thead .header-currency {
  position: relative;
  top: -4px;
  left: -2px;
  font-size: 1.1rem;
}
.plans-table thead .header-price {
  font-size: 1.5rem;
  font-weight: 500;
  color: #000;
}
.plans-table thead tr :last-child {
  border-right: none;
}
.plans-table tbody th {
  padding-left: 12px;
  padding-right: 12px;
  text-align: left;
  font-size: 1.3rem;
}
.plans-table tbody th, .plans-table tbody td {
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
}
.plans-table tbody td {
  text-align: center;
  font-size: 13px;
  color: #59626b;
}
.plans-table tbody tr :last-child {
  border-right: none;
}
.plans-table tfoot td {
  padding-top: 18px;
  padding-bottom: 18px;
  text-align: center;
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
}
.plans-table tfoot tr :last-child {
  border-right: none;
}
.plans-table .plan-feature {
  color: #000;
  font-weight: 500;
}
.plans-table .icon-checkmark {
  color: #339900 !important;
}
.plans-table .icon-x {
  color: #B52B2B !important;
}
.plans-table abbr {
  font-variant: small-caps;
}

/* ==========================================================================
 *  RESET ALL PROGRESS ELEMENTS
 * ========================================================================== */
/* All Progress Bars */
progress {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* Determinate */
progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Indeterminate */
progress:not([value]) {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ------------------------------------------- */
/* Webkit */
progress::-webkit-progress-bar {
  border: 1px solid #5CB85C;
  background: #fff;
  border-radius: 2px;
}

progress::-webkit-progress-value {
  background: #5CB85C;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
}

/* firefox */
progress {
  border: 1px solid #5CB85C;
  background: #fff;
  border-radius: 2px;
}

progress::-moz-progress-bar {
  background: #5CB85C;
  -moz-transition: width 0.5s ease;
  transition: width 0.5s ease;
}

:root {
  --progress-bg-col: #f5f5f5;
  --progress-fill-col: #2CC156;
  --progress-box-rad: 18px ;
}

.ProgressBarWrap {
  position: relative;
}

.ProgressBarWrap:empty {
  display: none;
}

.ProgressBarWrap--withLabels {
  margin-bottom: 12px;
}

.ProgressBar {
  display: flex;
  position: relative;
  border-radius: var(--progress-box-rad);
  overflow: hidden;
  height: 2px;
  width: 100%;
  background: linear-gradient(#eceeef, #e2e2e2);
  margin: 2px 4px 0 0;
}
.ProgressBar .ProgressBar-value {
  background-color: var(--progress-fill-col);
  border-radius: var(--progress-box-rad);
  display: inline-block;
  height: 100%;
  transition: width 0.5s ease-in-out; /* Smooth transition */
}
.ProgressBar .ProgressBar-item {
  height: 100%;
}

.ProgressBarLabel {
  position: absolute;
  color: #adadad;
  font-size: 9px;
  border-left: 1px solid #ddd;
  padding-top: 6px;
  padding-bottom: 0;
  line-height: 1;
}
.ProgressBarLabel .ProgressBarLabel-inner {
  position: relative;
  background: #fff;
  left: -26px;
}
@media only screen and (max-width: 1023px) {
  .ProgressBarLabel {
    display: none;
  }
}

.ProgressBarLabel--end {
  position: absolute;
  right: 0;
  border-left: 0;
  border-right: 1px solid #ddd;
}
.ProgressBarLabel--end .ProgressBarLabel-inner {
  position: relative;
  background: #fff;
  left: 2px;
}

.ProgressBarLabel-link {
  text-decoration: none !important;
}
.ProgressBarLabel-link:hover {
  color: #427dc4;
}
@media only screen and (max-width: 1023px) {
  .ProgressBarLabel-link {
    display: none;
  }
}

.ProgressBar--4pxHeight {
  height: 6px;
}

.ProgressBar--6pxHeight {
  height: 6px;
}

.QuickStart {
  padding-top: 12px;
}
.QuickStart .QuickStart-item {
  text-align: center;
}
.QuickStart .QuickStart-item .QuickStart-title {
  font-size: 14px;
  font-weight: normal;
  padding-top: 6px;
}
.QuickStart .js_quick_start_link {
  outline: none;
}
.QuickStart .js_quick_start_link h6.QuickStart-title {
  color: #427dc4;
}
.QuickStart .js_quick_start_link:hover h6.QuickStart-title {
  color: #005580;
}
.QuickStart .js_quick_start_link:focus h6.QuickStart-title, .QuickStart .js_quick_start_link:active h6.QuickStart-title {
  color: black;
  font-weight: 600;
}
.QuickStart .QuickStart-content {
  padding-top: 38px;
}

/*
    simple input.simple_range_range type range slider used by canary deployments
*/
input.simple_range[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 3px 0;
}

input.simple_range[type=range]::-webkit-slider-runnable-track {
  height: 3px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input.simple_range[type=range]::-webkit-fill-lower {
  background: #777;
}

input.simple_range[type=range]::-webkit-fill-upper {
  background: #ddd;
}

input.simple_range[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #fff;
  border: 9px solid #4BD763;
  margin-top: -10px;
}

input.simple_range[type=range]:focus {
  outline: none;
}

input.simple_range[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input.simple_range[type=range] {
  border: 1px solid white;
}

input.simple_range[type=range]::-moz-fill-lower {
  background: #777;
}

input.simple_range[type=range]::-moz-fill-upper {
  background: #ddd;
}

input.simple_range[type=range]::-moz-range-track {
  height: 3px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input.simple_range[type=range]::-moz-range-thumb {
  box-sizing: border-box;
  border: none;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #fff;
  border: 9px solid #4BD763;
}

input.simple_range[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1;
}

input.simple_range[type=range]::-moz-focus-outer {
  border: 0;
}

input.simple_range[type=range]:focus::-moz-range-track {
  background: #ccc;
  outline: none;
}

input.simple_range[type=range]::-moz-range-progress {
  background-color: #4BD763;
}

/*
    Autoscaling Range Slider
*/
.AutoScaleRange {
  /* common styles across moz webkit */
  /* Chrome, Safari, Webkit based */
  /* Firefox */
}
.AutoScaleRange .AutoScaleRange-container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.AutoScaleRange .AutoScaleRange-control {
  position: relative;
  margin-top: 12px;
  margin-bottom: 12px;
  /* band positioned behind range */
}
.AutoScaleRange .AutoScaleRange-control #js_simple_slider {
  z-index: 2;
}
.AutoScaleRange .AutoScaleRange-control .AutoScaleRange-marker {
  z-index: 3;
  top: -10px;
  left: 3px;
  position: absolute;
  width: 3px;
  height: 24px;
  background-color: #e01f22;
  border-radius: 3px;
  cursor: help;
}
.AutoScaleRange .AutoScaleRange-control .AutoScaleRange-tolerance {
  position: absolute;
  z-index: 1;
  background: #f9f9f9;
  border-radius: 30px;
  top: -10px;
  height: 23px;
}
.AutoScaleRange input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  width: 100%;
  position: absolute;
  background-color: #ddd;
  border-radius: 6px;
  pointer-events: none;
}
.AutoScaleRange input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  box-sizing: border-box;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #fff;
  border: 9px solid #4BD763;
  cursor: pointer;
}
.AutoScaleRange input[type=range]::-webkit-slider-thumb:hover {
  border-color: #4BD763;
}
.AutoScaleRange input[type=range]::-webkit-slider-thumb:active {
  box-shadow: inset 0 0 3px #C6C6C6, 0 0 9px #C6C6C6;
}
.AutoScaleRange input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  pointer-events: all;
  box-sizing: border-box;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: #fff;
  border: 9px solid #4BD763;
  cursor: pointer;
}
.AutoScaleRange input[type=range]::-moz-range-thumb:hover {
  border-color: #4BD763;
}
.AutoScaleRange #fromSlider {
  height: 0;
  z-index: 1;
}

/* Hidden in sample stacks */
body.is-sample-app .js_toggle_module_tags,
body.is-sample-app .StackInfo-tags {
  display: none !important;
}

/* Sample stack indicator */
.sample-container {
  position: absolute;
  top: 15px;
  right: 0;
}

.sample {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 22px;
  background-color: #FFEA9A;
  color: #000;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  padding-right: 5px;
  cursor: help;
}

.sample--owner {
  background-color: darkred;
  color: #fff;
}

.sample--owner:before {
  border-right: 11px solid darkred !important;
}

.sample:before,
.sample:after {
  content: "";
  position: absolute;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

/* left arrow */
.sample:before {
  right: 100%;
  border-right: 11px solid #FFEA9A;
}

.sample--header {
  margin-left: 18px;
  font-size: 13px;
  font-weight: 500;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.sample--header:hover {
  cursor: help;
}

.sample--message {
  font-size: 12px;
  background: #FFEA9A;
  color: #000;
  padding-left: 8px;
  padding-right: 8px;
  display: inline-block;
  width: auto;
  height: auto;
  text-weight: 400;
  text-transform: none;
  margin-left: 20px;
  text-align: left;
}
.sample--message:hover {
  cursor: default;
}

.sample--messageRight {
  margin-right: 16px;
}

.sample--messageRight:after {
  left: 100%;
  border-left: 11px solid #FFEA9A;
  margin-right: 16px;
}

.sample--messageRight:before {
  border: none;
}

.sample--label:before {
  border: none;
}

.sample--label {
  margin-left: 0;
  border-radius: 2px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.sample--rightArrow:before {
  border: none;
}

/**
 * Selection Blocks title
 * Options CTA
 * These are the button-like controls
 * initial use case: used to select between maestro & formations in the deployment setup modal
 */
.SelectionBlocks {
  padding: 2em;
  padding-bottom: 2.6em;
}

.SelectionBlocks *:hover {
  text-decoration: none;
}

.SelectionBlock {
  margin-bottom: 0;
  padding-top: 1.8em;
  padding-bottom: 2.4em;
  padding-left: 1em;
  padding-right: 1em;
}

.SelectionBlock-title {
  padding-top: 0.6em;
  padding-bottom: 0.3em;
  font-size: 1.3rem;
}

.SelectionBlock-text {
  font-size: 1.2rem;
}

.SelectionBlock-link {
  color: #427dc4;
}

.SelectionBlock.SelectionBlock--isDisabled {
  padding-bottom: 0;
  padding-left: 0.25em;
  padding-right: 0.25em;
  background-color: #FAFAFA;
  border: none;
  box-shadow: none;
}
.SelectionBlock.SelectionBlock--isDisabled p {
  color: #999 !important;
}

/**
 * selectize
 * note - updated for cloud 66 design
 * don't just replace with selectize default styles
 */
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
  box-shadow: inset 0 0 12px 4px #ffffff;
}

.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}

.selectize-control.plugin-drag_drop .ui-sortable-helper {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.selectize-dropdown-header {
  position: relative;
  padding: 5px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

.selectize-dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 12px !important;
}

.selectize-dropdown-header-close:hover {
  color: #000000;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}

.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.selectize-control.plugin-remove_button [data-value] {
  position: relative;
  padding-right: 24px !important;
}

.selectize-control.plugin-remove_button [data-value] .remove {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 17px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 2px 0 0 0;
  -webkit-border-radius: 0 2px 2px 0;
  -moz-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.selectize-control.plugin-remove_button [data-value] .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
  background: none;
}

.selectize-control.plugin-remove_button .disabled [data-value] .remove {
  border-left-color: #aaaaaa;
}

.selectize-control {
  position: relative;
}

.selectize-dropdown,
.selectize-input {
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  -webkit-font-smoothing: inherit;
}

.selectize-input input {
  font-size: 14px;
}

.selectize-input.full {
  font-size: 14px;
}

.selectize-input,
.selectize-control.single .selectize-input.input-active {
  background: #ffffff;
  cursor: text;
  display: inline-block;
}

.selectize-input {
  box-sizing: border-box;
  background: #fcfcfc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 8px center;
  background-size: 8px 10px;
  border: var(--form-element-border);
  padding: 4px 8px;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: var(--form-element-box-shadow);
  border-radius: var(--form-element-border-rad);
  min-height: var(--form-element-height);
}
.selectize-input > div.selectize-input,
.selectize-input > input {
  position: relative;
  top: 2px;
}

.selectize-control.multi .selectize-input.has-items {
  padding: 5px 8px 2px;
}

.selectize-input.full {
  background-color: #ffffff;
}

.selectize-input.disabled,
.selectize-input.disabled * {
  cursor: default !important;
}

.selectize-input.focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.selectize-input.dropdown-active {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

.selectize-input > * {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.selectize-control.multi .selectize-input > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #1da7ee;
  color: #ffffff;
  border: 1px solid #52A852;
}

.selectize-control.multi .selectize-input > div.active {
  background: #bcd6f4;
  font-weight: 500;
}

.selectize-control.multi .selectize-input.disabled > div,
.selectize-control.multi .selectize-input.disabled > div.active {
  color: #ffffff;
  background: #d2d2d2;
  border: 1px solid #aaaaaa;
}

.selectize-control .selectize-input > input {
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 1px !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  position: relative;
  top: 2px;
}

.selectize-input > input::-ms-clear {
  display: none;
}

.selectize-input > input:focus {
  outline: none !important;
}

.selectize-input::after {
  content: " ";
  display: block;
  clear: left;
}

.selectize-input.dropdown-active::before {
  content: " ";
  display: block;
  position: absolute;
  background: #f0f0f0;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 0;
}

.selectize-dropdown {
  position: absolute;
  z-index: 1000;
  border: 1px solid #d0d0d0;
  background: #ffffff;
  margin: -1px 0 0 0;
  border-top: 0 none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}
.selectize-dropdown .option {
  color: #59626b !important;
}

.selectize-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}

.selectize-dropdown [data-selectable] .highlight {
  background: #FFFFCC;
  border-radius: 1px;
  padding: 0;
}

.selectize-dropdown [data-selectable],
.selectize-dropdown .optgroup-header {
  padding: 3px 8px;
}

.selectize-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}

.selectize-dropdown .optgroup-header {
  color: #303030;
  background: #ffffff;
  cursor: default;
  pointer-events: none;
}

.selectize-dropdown .active {
  background-color: #F5FAFD;
}

.selectize-dropdown .active.create {
  color: #495c68;
}

.selectize-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}

.selectize-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 250px;
}
.selectize-dropdown-content .s-avatar {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}
.selectize-dropdown-content .s-label {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  margin: 0 4px;
}
.selectize-dropdown-content .s-caption {
  display: inline-block;
  vertical-align: middle;
  color: #555;
  margin: 0 4px;
}

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
  cursor: pointer;
}

.selectize-control.single .selectize-input.input-active,
.selectize-control.single .selectize-input.input-active input {
  cursor: text;
}

.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #808080 transparent;
}

.selectize-control.rtl.single .selectize-input:after {
  left: 15px;
  right: auto;
}

.selectize-control.rtl .selectize-input > input {
  margin: 0 4px 0 -2px !important;
}

.selectize-control .selectize-input.disabled {
  opacity: 0.5;
  background-color: #fafafa;
}

.selectize-control.multi .selectize-input.has-items {
  padding-left: 5px;
  padding-right: 5px;
}

.selectize-control.multi .selectize-input.disabled [data-value] {
  color: #999;
  text-shadow: none;
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.selectize-control.multi .selectize-input.disabled [data-value],
.selectize-control.multi .selectize-input.disabled [data-value] .remove {
  border-color: #e6e6e6;
}

.selectize-control.multi .selectize-input.disabled [data-value] .remove {
  background: none;
}

.selectize-control.multi .selectize-input [data-value] {
  border-radius: 3px;
  background: #F1F8FF;
  color: #6a737d;
  border-color: #bcd6f4;
}

.selectize-control.single .selectize-input,
.selectize-dropdown.single {
  border-color: #b8b8b8;
}

.selectize-dropdown .optgroup-header {
  padding-top: 4px;
  font-weight: 700;
  font-size: 12px;
}

.selectize-dropdown .optgroup .option {
  padding-left: 16px;
}

.selectize-dropdown .optgroup:first-child {
  border-top: 0 none;
}

.selectize-control.single .selectize-input > div {
  position: relative;
  top: 3px;
}

.selectize-input [placeholder] {
  position: relative !important;
  top: 2px !important;
}

/* Github repo selection dropdown form 1 */
.SelectizeItem {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}
.SelectizeItem .SelectizeTitle {
  color: #000;
  font-weight: 500;
  padding-right: 3px;
}
.SelectizeItem .SelectizeSubTitle {
  padding-left: 3px;
  color: #000;
  font-size: 11px;
  font-weight: 400;
}
.SelectizeItem .SelectizeText {
  color: #666;
  font-weight: 400;
}
.SelectizeItem .SelectizeItem-key {
  font-size: 11px;
  color: #666;
  font-weight: normal;
}
.SelectizeItem .SelectizeItem-val {
  display: inline-block;
  margin: 0 12px 0 3px;
  font-size: 11px;
  font-weight: 500;
  color: #222;
}
.SelectizeItem .SelectizeOptionIcon {
  position: relative;
  top: 2px;
  margin-right: 4px;
  font-size: 14px;
}
.SelectizeItem .SelectizeItem-strong {
  font-weight: 500;
  color: #000;
}

.SelectizeItem--divider {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px dotted #e5e5e5;
}

.SelectizeInputIcon {
  position: relative;
  top: 2px;
  left: 0;
}

/* Selectize control modifiers used for clusters list */
.StatSection {
  display: flex;
  gap: 0.5rem; /* or use justify-content: space-between */
  align-items: center;
  flex-wrap: wrap;
}

.Stat {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.Stat-value {
  font-size: 12px;
  font-weight: 500;
  min-width: 1ch;
}

.Stat-label {
  font-size: 11px;
  color: #666; /* or your muted text color */
}

/*
    Modifier for smaller selectized controls
    E.g. select dropdown in a settings table
*/
div.selectize-control.Selectize--inline {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

div.selectize-control.Selectize--small {
  position: relative;
  top: 1px;
}
div.selectize-control.Selectize--small .item {
  font-size: 12px;
}
div.selectize-control.Selectize--small .selectize-input {
  padding: 3px 8px;
  min-height: 30px;
}
div.selectize-control.Selectize--small .selectize-input > div {
  top: 0;
}
div.selectize-control.Selectize--small .selectize-input.has-items {
  padding: 4px 8px 1px;
}
div.selectize-control.Selectize--small .selectize-input input[type=select-one] {
  position: relative !important;
  top: 0 !important;
}

div.selectize-control.Selectize--rightMargin {
  margin-right: 20px;
}

/* Smaller multi select element */
div.selectize-control.Selectize--small.multi .item {
  padding: 0 4px;
  font-size: 11px;
}
div.selectize-control.Selectize--small.multi .remove {
  top: 0px;
  padding: 0;
  font-size: 11px;
}
div.selectize-control.Selectize--small.multi [type=select-multiple] {
  top: 1px !important;
}

.Module--dark .Module-headerGroupItem .selectize-control .selectize-input {
  min-height: 30px;
  background: #333f51 !important;
  border: 1px solid #3D4A60;
  box-shadow: none;
}
.Module--dark .Module-headerGroupItem .selectize-control .selectize-input.dropdown-active::before {
  background: transparent;
}
.Module--dark .Module-headerGroupItem .selectize-control .item,
.Module--dark .Module-headerGroupItem .selectize-control .item.active {
  background: #1E293B;
  color: #fff;
  border: none;
}
.Module--dark .Module-headerGroupItem .selectize-control .selectize-dropdown {
  border: 1px solid #3D4A60;
  background: #333f51 !important;
}
.Module--dark .Module-headerGroupItem .selectize-control .selectize-dropdown-content {
  background: #333f51 !important;
}
.Module--dark .Module-headerGroupItem .selectize-control .selectize-dropdown-content .option,
.Module--dark .Module-headerGroupItem .selectize-control .selectize-dropdown-content .option.active {
  color: #fff;
  background: #333f51;
}
.Module--dark .Module-headerGroupItem .selectize-control .selectize-dropdown-content .option:hover,
.Module--dark .Module-headerGroupItem .selectize-control .selectize-dropdown-content .option.active:hover {
  background: #2D3748;
}
.Module--dark .Module-headerGroupItem .selectize-control input#js_filter_logs-selectized {
  top: 0 !important;
  color: #fff;
}

.selectize-control.js_selectize_tags .selectize-input input[type=text] {
  background: red;
  top: -1px;
}

/*
 * classes used by selectize render functions
 * E.G: helm releases - 'Recommended release template'
 */
.Selectise-name {
  font-size: 13px;
  font-weight: 500;
}

.Selectise-item {
  padding-top: 5px;
  padding-bottom: 5px;
  transition: all 0.1s ease-in-out;
}
.Selectise-item:hover {
  background: #f4f9ff;
}

.Selectise-separator {
  margin-left: 6px !important;
  margin-right: 6px !important;
}

/*



*/
/*
    Service Account Manager Page
 */
/*
    Filter Control
 */
.TagFilterContainer {
  padding-top: 6px;
}

.TagFilter {
  height: 36px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  background: #fcfcfc;
  border: 1px solid #C1C1C1;
  border-radius: 4px;
  padding-left: 2px;
  padding-top: 4px;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  color: #000;
}
.TagFilter ul.tag-editor {
  margin-top: 0 !important;
}
.TagFilter ul.tag-editor li.placeholder div {
  position: relative;
  top: -6px;
}
.TagFilter ul.tag-editor * {
  box-shadow: none !important;
}

/*
    Application webhook and slack notification tables
 */
.ServiceAccountNotifications {
  padding-top: 6px;
}
.ServiceAccountNotifications .ServiceAccountNotifications-title {
  line-height: 1;
  font-weight: 700;
  font-size: 15px;
  color: #32383f;
  margin-bottom: 18px;
  margin-top: 20px;
}
.ServiceAccountNotifications .ServiceAccountNotifications-module {
  margin-bottom: 14px !important;
}

/* --------------------------------------------------------------------------
 *  STACK RELIABILITY SCORE
----------------------------------------------------------------------------- */
.status-notice {
  position: relative;
  float: right;
  display: inline-block;
}

/* round symbol */
.circle {
  box-sizing: border-box;
  transition: none;
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
.circle:hover {
  text-decoration: none;
  color: #fff;
}

.circle--sml {
  width: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
  font-weight: 500;
  font-size: 9px;
}

.score-disable {
  display: inline-block;
  background-color: #ddd;
  margin-left: 4px;
  font-weight: 300;
}

.score-disable:hover {
  background-color: #BCBCBC;
}

.circle--bordered {
  border: 1px solid;
  width: 22px;
  height: 22px;
  line-height: 20px;
}

.negative-bordered,
.red-bordered {
  border-color: #e01f22 !important;
  color: #e01f22 !important;
  font-weight: bold;
}

.amber-bordered {
  border-color: #EA8407;
  color: #EA8407 !important;
  font-weight: bold;
}

.positive-bordered,
.green-bordered {
  border-color: #339900;
  color: #339900 !important;
  font-weight: bold;
}

.red-bg,
.negative-bg {
  background: #E01F22;
}

.amber-bg {
  background: #F59E0B;
}

.green-bg,
.positive-bg {
  background: #339900;
}

.grey-bg {
  background: #eee;
}

/* ==========================================================================
   StackScore
   This is the list containing each score item
   ========================================================================== */
/**
 * The StackScore list
 */
.StackScore {
  margin: 0;
  padding: 0;
}

.StackScore-item {
  padding: 0.65em 0.15em;
  line-height: 1;
  font-size: 1.3rem;
  color: #666;
}

.StackScore-MessageTitle {
  display: inline-block;
  margin: 0.1em 0 0.25em 0;
  font-weight: 600;
  font-size: 1.35rem;
  color: #333;
  border-bottom: 1px dotted #D3D3D3;
  line-height: 1.2;
  padding-left: 2px;
}
.StackScore-MessageTitle:hover {
  border-solid: 1px dotted #ccc;
}

.StackScore-indicator {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.25em 0 0;
}

.StackScore-indicator:only-child {
  margin-right: 0;
}

.StackScore-action {
  position: relative;
  top: -2px;
  display: inline-block;
  margin: 0.25em 0 0 0.35em;
}

/**
 * STATES
 */
.StackScore-item.is-disabled .StackScore-subItem {
  color: #aaa;
  opacity: 0.65;
}
.StackScore-item.is-disabled .StackScore-MessageTitle,
.StackScore-item.is-disabled [href^="http://"] {
  color: #aaa;
}
.StackScore-item.is-disabled .circle {
  background-color: #aaa;
  opacity: 0.5;
}
.StackScore-item.is-disabled a.dropdown-toggle {
  opacity: 1 !important;
}

.StackScore-subItem {
  margin-left: 2em;
}

/* ===========================================================================================
 *  STACK RELATED RULES
 *  Stack specific rules - applied on top of the base module should be migrated to this file
============================================================================================== */
/*  This is used for BOTH trial expired & disabled cards due to payment issues
    Be careful!
-------------------------------------------------------------------------------- */
.account-is-restricted .Module-header {
  background: #fff;
}
.account-is-restricted .Module-title {
  color: #586069;
}
.account-is-restricted .Module-footer {
  opacity: 0;
}
.account-is-restricted .Module-body {
  overflow: hidden;
}
/* ===========================================================================================
 *  STACK MAIN
============================================================================================== */
/* ===========================================================================================
 *  STACK STATE - LABELS
 *  Security Notice, In Maintenance etc
============================================================================================== */
.StatesContainer {
  display: inline-block;
  vertical-align: middle;
}

.state-label {
  display: inline-block;
  vertical-align: middle;
  color: #000;
  padding: 4px;
  font-size: 11px;
  text-transform: uppercase;
  background: rgba(209, 213, 218, 0.5);
  border-radius: 3px;
  line-height: 1;
}

.state-label--instance {
  line-height: 1;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
}

.state-label--med {
  font-weight: 600;
  border-radius: 12px;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.25px;
}

.state-label--sml {
  font-weight: 500;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 9px;
  letter-spacing: 0.25px;
}

.state-label--xSmall {
  font-weight: normal;
  border-radius: 12px;
  padding: 3px 5px;
  font-size: 8px;
}

.state-info {
  background: #F4F4F4;
  color: #777;
  border: 1px solid #EDEDED;
}

.state-label-- {
  background: #fcfcfc !important;
  color: #768391 !important;
  font-weight: 400;
}

.state-label--red {
  background: #ffdbdd !important;
  color: #602126 !important;
  font-weight: 500;
}

.state-label--yellow {
  background: #FFEA9A !important;
  color: #000 !important;
  font-weight: 500;
}

.state-label--green {
  background: #edfcf1 !important;
  color: #339900 !important;
}

.state-label--blue {
  background: #e5f6ff !important;
  color: #427dc4 !important;
}

.state-label--leftMargin {
  margin-left: 2px;
}

.state-label--sampleDash {
  margin-top: 8px;
}

.state-label--sampleHeader {
  margin-top: 8px;
}

.state-label--sampleTilte {
  position: relative;
  top: -1px;
  margin-left: 10px;
  font-size: 12px;
  color: #000;
}

span.state-label--instance.state-label--green:hover {
  background: #EAF5FF !important;
  border-color: #cfe4f9 !important;
  color: #427dc4 !important;
}
span.state-label--instance.state-label--green:focus {
  outline: none;
}

/* testing subtle border style for container count */
.state-label--green.state-label--instance {
  border: 1px solid #c7eadd;
}

.state-label--lightGrey {
  background: #f2f3f4 !important;
  color: #2f373f !important;
}

.state-label--desired {
  background: #FAFBFC !important;
}
.state-label--desired:hover {
  background: #EAF5FF !important;
  border-color: #cfe4f9 !important;
  color: #427dc4 !important;
}
.state-label--desired:focus {
  outline: none;
}

.state-label--amber,
.state-warning {
  background: #fcebc2;
  color: #542d12 !important;
}

.state-error {
  background: #E01F22;
}

.state-label--link:hover {
  text-decoration: none;
  transition: none;
  color: #fff;
  cursor: pointer;
}

/* ===========================================================================================
 *  Area for multiple async stack events
 *  Operations on the stack that can run in parallel to deployments
 *  E.g Adding load balancer / letsEncrypt operations etc
============================================================================================== */
.StackOperations .StackOperations-spinner {
  margin-left: 1px;
  margin-right: 4px;
}

.Instances:hover {
  text-decoration: none;
  border: none;
}
.Instances .Instances-pending {
  color: #427dc4;
}
.Instances .Instances-failed:hover {
  color: #427dc4;
}

.Storage-item {
  font-size: 11px;
  text-align: left;
  margin-bottom: 6px;
  line-height: 1.3;
}
.Storage-item:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   STATUS - COLORS & INDICATORS
   ========================================================================== */
/* --------------------------------------------------------------------------
 *  Messages & colors
 * -------------------------------------------------------------------------- */
.status {
  font-size: 12px;
}

.status-green {
  color: rgb(40, 167, 69);
}

.status-red,
.status-important {
  color: rgb(203, 36, 49) !important;
}
.status-red a,
.status-important a {
  transition: none;
  color: rgb(203, 36, 49) !important;
}
.status-red a:hover,
.status-important a:hover {
  color: inherit;
}
.status-red strong,
.status-important strong {
  color: rgb(203, 36, 49) !important;
}

a.failed:hover {
  text-decoration: none;
}

.status-amber {
  color: #EA8407;
}
.status-amber:hover {
  color: #EA8407 !important;
}

.status-unknown {
  color: #777777;
}

/* --------------------------------------------------------------------------
 *  Stack status indicator lights
 * -------------------------------------------------------------------------- */
.inicator-circle::before {
  position: relative;
  top: -1px;
  content: "";
  display: inline-block;
  position: relative;
  margin-left: -1px;
  margin-right: 3px;
  border-radius: 50%;
  line-height: 1;
  width: 7px;
  height: 7px;
  background: linear-gradient(#aaa, #ccc);
}

.inicator-circle.is-green:before,
.inicator-circle.inicator-circle--green:before {
  background: linear-gradient(#6CC644, #68BF41);
}

.inicator-circle.is-red:before {
  background: #e01f22;
}

.inicator-circle.is-yellow:before {
  background: #FADB14;
}

.inicator-circle.is-amber:before {
  background: linear-gradient(#EA8407, #EA8407);
}

.inicator-circle.is-blue:before,
.inicator-circle.inicator-circle--blue:before {
  background: linear-gradient(#1b79fc, #1677FF);
}

.inicator-circle--small:before {
  width: 6px !important;
  height: 6px !important;
}

.inicator-circle--tableRow {
  margin: 0 4px 0 0;
}

.inicator-circle--after {
  margin-left: 6px;
}

/* --------------------------------------------------------------------------
 *  indicator light - Colors
 * -------------------------------------------------------------------------- */
.indicator-red {
  background: #FF6666;
}

.indicator-green {
  background: #96D16F;
}

.indicator-amber {
  background: #fdd382;
}

/* --------------------------------------------------------------------------
 *  indicator blocks ( eg. primary and backup elastic addresses )
 * -------------------------------------------------------------------------- */
.indicator-block {
  line-height: 1.6;
}

/* Primary and Backup indicator */
.indicator-link:before {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  margin-left: -1px;
  margin-right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.indicator-on {
  font-weight: 500;
}

.indicator-on:before {
  background: linear-gradient(#919191, #7C7C7C);
}

.indicator-off:before {
  border: 1px solid #999;
}

/* --------------------------------------------------------------------------
 *
 * -------------------------------------------------------------------------- */
.toggle-link:before {
  box-sizing: border-box;
  content: "";
  display: inline-block;
  margin-left: -1px;
  margin-right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.toggle-on {
  font-weight: 500;
}

.toggle-on:before {
  background: linear-gradient(#919191, #7C7C7C);
}

.toggle-off:before {
  border: 1px solid #999;
}

.StatusBlock {
  display: inline-block;
  margin: 0 2.2em;
}

.RowLabels .Tag-item {
  font-size: 10px;
  min-width: 48px;
  text-align: center;
}

/* ==========================================================================
   STEPS
   Navigation & Status completion component that guides users
   through the steps to complete a task.

   USECASE E.G: Getting Started with Formations
   ========================================================================== */
/*

/*
    MARKUP e.g. render_formation_cta
    ------
    <section class="StepsComponent">
    </section>

*/
/* Component Vars */
:root {
  --Steps-BorderColor: #ebedf0;
  --Steps-BorderColorCallout: #dfd8c2;
  --Steps-BorderColorCalloutBgColor: #fff9ea;
  --Steps-margin: 28px;
  --Steps-borderRad: 4px;
  --Steps-bodyPadding: 18px 18px;
  --Steps-padding: 22px 18px;
  --Steps-headerPadding: 12px 16px;
  --Steps-listItemPaddingBottom: 25px;
  --Steps-color: rgba(0,0,0, 1) !important;
  --Steps-colorMuted: rgba(0,0,0, 0.75) !important;
  --Steps-colorDone: rgba(0,0,0, 0.25) !important;
}

/*
    StepsComponent Container
*/
.StepsComponent {
  overflow: hidden;
  background-color: var(--Steps-BorderColorCalloutBgColor);
  margin-bottom: var(--Steps-margin);
  color: var(--Steps-color) !important;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: none !important;
}

.StepsComponent--sidebar {
  padding-top: 14px;
  height: 112vh;
}

/*
    StepsComponent Header
*/
.StepsComponent-header {
  background-color: var(--Steps-BorderColorCalloutBgColor);
  display: flex;
  justify-content: space-between;
  padding: var(--Steps-headerPadding);
  font-weight: 600;
  font-size: 1.5rem;
  color: #514f46;
}
.StepsComponent-header .StepsComponent-headerIcon {
  position: relative;
  left: -3px;
  top: 1px;
}
.StepsComponent-header .StepsComponent-headerCompleted {
  font-weight: normal;
  font-size: 1.3rem;
  color: rgba(0, 0, 0, 0.65) !important;
  padding-top: 4px;
}
.StepsComponent-header .StepsComponent-headerCompleted strong {
  color: rgba(0, 0, 0, 0.75) !important;
  font-weight: 600;
}
.StepsComponent-header .StepsComponent-controls {
  vertical-align: middle;
}
.StepsComponent-header .StepsComponent-close {
  position: relative;
  top: -3px;
  right: -4px;
  font-size: 3.5rem;
}

/*
    StepsComponent body
*/
.StepsComponent-body {
  padding: var(--Steps-bodyPadding);
  padding-bottom: 0 !important;
}

.StepsComponent-message {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.5em;
  padding-left: 1em;
}

.StepsComponent-messageIcon {
  margin-top: 6px;
}

.StepsComponent-messageButton {
  font-size: 13px;
}

/*
    StepsComponent List
*/
.StepsComponent-list {
  vertical-align: middle;
  /* STATE MODIFIERS
  ----------------------------------- */
  /*
      The BUSY state (show spinner)
  */
  /*
      The ACTIVE state
  */
  /*
      The COMPLETE state
  */
  /*
      The FAILED/WARNING state
  */
}
.StepsComponent-list .StepsComponent-item {
  position: relative;
  vertical-align: middle;
  display: block;
  padding-bottom: var(--Steps-listItemPaddingBottom);
}
.StepsComponent-list .StepsComponent-circle {
  position: relative;
  display: inline-block;
  border: 1px solid #999;
  color: #999;
  text-align: center;
  width: 28px;
  height: 28px;
  line-height: 15px;
  border-radius: 50%;
  padding: 5px;
  margin-right: 6px;
  font-weight: 600;
  font-size: 13px;
}
.StepsComponent-list .StepsComponent-spinner {
  position: absolute;
  top: 0;
  left: 0;
}
.StepsComponent-list .StepsComponent-icon {
  font-size: 14px;
}
.StepsComponent-list .StepsComponent-title {
  font-size: 14px;
  display: inline-block;
  font-weight: 500;
  color: var(--Steps-color);
}
.StepsComponent-list .StepsComponent-description {
  padding-left: 40px;
  font-size: 1.2rem;
  color: var(--Steps-color);
}
.StepsComponent-list .StepsComponent-item--busy .StepsComponent-spinner {
  display: block;
}
.StepsComponent-list .StepsComponent-item--busy .StepsComponent-circle {
  visibility: hidden;
}
.StepsComponent-list .StepsComponent-item--busy .StepsComponent-title {
  color: black;
  font-weight: 800;
}
.StepsComponent-list .StepsComponent-item--busy .StepsComponent-description {
  color: black;
  font-weight: 800;
}
.StepsComponent-list .StepsComponent-item--active .StepsComponent-circle {
  border: 1px solid black;
  background: black;
  color: white;
  font-weight: 900;
}
.StepsComponent-list .StepsComponent-item--active .StepsComponent-title {
  color: black;
  font-weight: 900;
}
.StepsComponent-list .StepsComponent-item--active .StepsComponent-description {
  color: black;
  font-weight: 800;
}
.StepsComponent-list .StepsComponent-item--complete {
  border-color: rgb(40, 167, 69);
}
.StepsComponent-list .StepsComponent-item--complete .StepsComponent-circle {
  border-color: rgb(40, 167, 69);
  background-color: rgb(40, 167, 69);
}
.StepsComponent-list .StepsComponent-item--complete .StepsComponent-icon {
  color: #fff !important;
}
.StepsComponent-list .StepsComponent-item--complete .StepsComponent-title {
  color: rgb(40, 167, 69);
}
.StepsComponent-list .StepsComponent-item--complete .StepsComponent-description {
  color: var(--Steps-colorDone);
  text-decoration: line-through;
}
.StepsComponent-list .StepsComponent-item--failed .StepsComponent-circle {
  border-color: #EA8407;
}
.StepsComponent-list .StepsComponent-item--failed .StepsComponent-icon {
  color: #EA8407;
}
.StepsComponent-list .StepsComponent-item--failed .StepsComponent-title {
  color: #EA8407;
}
.StepsComponent-list .StepsComponent-item--failed .StepsComponent-description {
  color: var(--Steps-colorMuted);
}
.StepsComponent-list .StepsComponent-item--failed a {
  color: #EA8407 !important;
  border-bottom: 1px solid !important;
  padding-bottom: 1px #EA8407 !important;
}
.StepsComponent-list .StepsComponent-item--failed a:hover {
  color: #EA8407;
  text-decoration: none;
}

.StepsComponent-intro {
  padding-bottom: 10px;
}

.StepsComponent-content {
  padding-bottom: 15px;
  font-size: 13px;
}
.StepsComponent-content .StepsComponent-leadText {
  line-height: 1.6;
  margin-bottom: 6px;
  padding-right: 2em;
}
.StepsComponent-content h2 {
  margin: -5px 0 12px 0;
  font-weight: 800;
  line-height: 1;
}
.StepsComponent-content h3 {
  margin-top: 16px;
  font-weight: 800;
}
.StepsComponent-content h4 {
  margin-top: 16px;
  margin-bottom: 12px;
  font-weight: 700;
}

/*
    Footer
*/
.StepsComponent-footer {
  vertical-align: middle;
  padding: var(--Steps-padding);
  padding-top: 0;
}
.StepsComponent-footer .StepsComponent-button {
  padding: 0.8em 1.1em;
  font-size: 1.4rem;
  font-weight: 700;
  width: 100%;
}
.StepsComponent-footer .StepsComponent-footerText {
  display: inline-block;
  padding-top: 1em;
  color: black;
  font-weight: 500;
  font-size: 1.2rem;
}

/*
    Generic Circle

    <div class="Circle Circle--greenFill Circle--34px">
        <i class="InfoText-icon icon-checkmark"></i>
    </div>

*/
.Circle {
  display: inline-block;
  border: 1px solid #999;
  color: #999;
  text-align: center;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 50%;
  padding: 5px;
  margin-right: 6px;
  font-weight: 600;
}

.Circle--greenOutlined {
  border-color: rgb(40, 167, 69);
}

.Circle--greenFill {
  border-color: rgb(40, 167, 69);
  background-color: rgb(40, 167, 69);
  color: white;
}

.Circle--green {
  border: none;
  background: linear-gradient(#6CC644, #68BF41);
}

.Circle--blue {
  border: none;
  background: linear-gradient(#007BC1, #108EE9);
}

.Circle--8px {
  width: 8px;
  height: 8px;
  line-height: 8px;
  padding: 0;
  margin: 0;
}

.Circle--6px {
  width: 6px;
  height: 6px;
  line-height: 6px;
  padding: 0;
  margin: 0;
}

.Circle--16px {
  width: 16px;
  height: 16px;
  line-height: 16px;
}

.Circle--22px {
  width: 22px;
  height: 22px;
  line-height: 22px;
}

.Circle--26px {
  width: 26px;
  height: 26px;
  line-height: 26px;
}

.Circle--30px {
  width: 26px;
  height: 26px;
  line-height: 26px;
}

.Circle--34px {
  width: 34px;
  height: 34px;
  line-height: 34px;
}

.Circle--44px {
  width: 44px;
  height: 44px;
  line-height: 44px;
}

.Circle--48px {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

/* ==========================================================================
   TABLES
   ========================================================================== */
/* BASE TABLES - deprecated for SUIT .Table component
   This file contains code for legacy pages. DO NOT mix with any new
   SUIT methodology pages.
----------------------------------------------------------------------------- */
/* legacy table code - dont use for anything new! */
/* used by provprocs/history view */
.table-mod-article-pri {
  width: 100%;
}
.table-mod-article-pri th {
  padding: 8px;
  font-size: 1.4rem;
  font-size: 1.35rem;
}
.table-mod-article-pri td {
  padding: 9px 12px;
  font-size: 1.3rem;
  word-wrap: break-word;
  color: #666;
}
.table-mod-article-pri thead th {
  text-align: left;
  border-bottom: 1px solid #CACACA !important;
  text-shadow: 0 1px 0 #fff;
  font-weight: 350;
  color: #444;
}
.table-mod-article-pri .strong th {
  font-weight: bold;
}
.table-mod-article-pri tbody td,
.table-mod-article-pri tbody th {
  border-top: 1px solid #ddd;
}
.table-mod-article-pri tbody th {
  text-align: left;
}
.table-mod-article-pri tbody tr:last-child td,
.table-mod-article-pri tbody tr:only-child {
  border-bottom: none;
}
.table-mod-article-pri tr:nth-child(even) {
  background: #f7f8f9;
}
.table-mod-article-pri tr:nth-child(odd) {
  background: #fff;
}
.table-mod-article-pri tbody tr:hover td,
.table-mod-article-pri tbody tr:hover th {
  background: #FFFCF7;
}
.table-mod-article-pri .row-highlight td,
.table-mod-article-pri .row-highlight th {
  font-weight: bold;
  background: #f2f9fc;
}
.table-mod-article-pri tfoot {
  border-top: 1px solid #CACACA;
}

/* Primary Caption
----------------------------------------------------------------------------- */
.process-server-status tr:first-child td {
  border-top: none;
  background: #fff;
}

.negative-row td {
  color: #CC3333;
}

.positive-row td {
  color: #339900;
}

.muted-row td {
  color: #999;
}

.row-call-out td,
.row-call-out th {
  color: #222;
  background-color: #FFFDF2;
  font-size: 15px;
  font-weight: bold;
}

.active-row td,
.active-row th {
  background-color: #F9FFF7;
  font-weight: 500;
}

.row-is-active td {
  background: #F4FBFF !important;
}

/* Stand-alone 'enclosed' tables outside of stacks eg. apps
----------------------------------------------------------------------------- */
.table-enclosed {
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-bottom: 18px;
}
.table-enclosed thead th {
  background: #FcFcFc;
  font-weight: bold;
}

/* TOP BORDER WITH MARGIN */
.mod-article-pri .table-divider thead th {
  border-top: 1px solid #D1D1D1;
  margin-top: 8px;
  padding-top: 8px;
}

table .table-head th {
  font-weight: bold;
  font-size: 20px;
  font-weight: 600;
}

/* Two column form
----------------------------------------------------------------------------- */
.form-cols td,
.form-cols th {
  padding: 6px;
}

.form-cols-full {
  box-sizing: border-box;
  background-color: #fff;
  margin: 0 !important;
  min-height: 28px !important;
  width: 100%;
}

.form-cols-lrg,
.Form-variable {
  min-height: 46px !important;
  font-size: 12px !important;
}

.form-cols-lrg:not([readonly=readonly]) {
  background: #fff;
}

.form-cols-full-select {
  box-sizing: border-box;
  margin: 0 !important;
  height: 28px !important;
  width: 86%;
  width: 196px;
}

.btn-select,
.btn-select:active,
.btn-select:focus {
  position: relative;
  z-index: 1;
  top: 0;
  left: -8px;
  border-color: #ccc;
  border-radius: 0 4px 4px 0;
}

.link-actions {
  background: #fff;
  padding: 16px 6px;
  font-size: 14px;
}
.link-actions [class^=icon-] {
  position: relative;
  top: 1px;
  margin-right: 3px;
}
.link-actions a {
  font-weight: 500;
}

.form-cols-submit {
  padding: 6px 0 20px 0;
}
.form-cols-submit hr {
  margin: 18px 0;
}
.form-cols-submit .btn-primary {
  margin-left: 4px;
}

table.form-cols-numbered tbody {
  counter-reset: row;
}

tr {
  counter-increment: row;
}

.row-count:before {
  content: counter(row);
  display: table-cell;
}

.rounded-no {
  display: inline-block;
  font-size: 9px;
  font-weight: 200;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  padding: 2px 4px;
  background: linear-gradient(#A3A3A3, #666);
  background: #A3A3A3;
  color: #fff;
  border-radius: 10px;
  margin-top: -2px;
  display: none;
}

.form-cols-numbered-action {
  margin: 16px 0 14px 4px;
}
.form-cols-numbered-action b {
  padding-left: 4px;
}

.warning-row .rounded-no {
  background: #EA8400;
}
.warning-row input,
.warning-row select {
  border-color: #EA8400;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(234, 132, 0, 0.25);
}

.form-col-contains-read-only th {
  color: #000;
  border-bottom: 1px solid #ddd;
  padding: 11px 14px;
  line-height: 1;
  font-weight: 500;
  font-size: 1.3rem;
}

.cell-padRight {
  padding-right: 7px !important;
}

.cell-padLeft {
  padding-left: 9px !important;
}

/* Misc
----------------------------------------------------------------------------- */
/* Misc table cell rules */
.UnitScalers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.UnitScalers li {
  display: inline;
  padding: 0;
  margin: 0 0 0 6px;
  line-height: 1;
}
@media (max-width: 620px) {
  .UnitScalers li {
    text-align: left;
    display: block;
    margin-left: 0;
    margin-right: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.disabled-row {
  pointer-events: none;
}
.disabled-row .UnitScalers {
  display: none;
}
.disabled-row td {
  opacity: 0.4;
}
.disabled-row td.not-disabled {
  opacity: 1;
}

.paused-row td {
  background: #FCFCFC;
}
.paused-row td * {
  opacity: 0.5;
}
.paused-row td.unit-cell * {
  opacity: 1;
}
.paused-row td .js-unit-count {
  opacity: 1;
}

.job-history-message p {
  margin: 0;
  line-height: 1.3;
}
.job-history-message samp {
  font-size: 12px;
}

.tbody-divider td {
  border-bottom: 1px solid #E2E2E2 !important;
}

.tbody-divider-top tr:first-child td {
  border-top: 1px solid #E2E2E2 !important;
}

/* Tabular Paging Module
----------------------------------------------------- */
.tabular-paging {
  padding: 16px;
  font-size: 1.5rem;
}

#managed-backups .tabular-paging:last-child {
  border-bottom: none;
}

/* ==========================================================================
 *  TABS COMPONENT
========================================================================== */
.Tabs {
  margin-bottom: 26px;
}

.Tabs-list {
  border-bottom: 1px solid #ddd;
  padding-left: 12px;
}
.Tabs-list > .Tabs-item {
  display: inline-block;
  padding: 0;
}
.Tabs-list .Tabs-link {
  position: relative;
  display: inline-block;
  padding: 12px 18px;
  margin-bottom: -1px;
  font-size: 1.3rem;
  font-weight: normal;
  border: 1px solid transparent;
  border-bottom: none;
  outline: none;
  color: #427dc4;
}
.Tabs-list .Tabs-link:hover {
  color: #427dc4;
  text-decoration: none;
}

.Tabs-item.active .Tabs-link {
  border: 1px solid #ddd;
  outline: none;
  border-radius: 6px 6px 0 0;
  border-bottom: none;
  background: #fff;
  color: #000;
  cursor: default;
  font-weight: 500;
}

.Tabs.Tabs--subNav {
  overflow: hidden;
  display: inline-block;
  border: 1px solid #427dc4;
  border-radius: 4px;
  margin-left: 12px;
}
.Tabs.Tabs--subNav .Tabs-list {
  padding-left: 0;
  padding-right: 0;
  display: inline-block;
  border: none;
  font-size: 0;
}
.Tabs.Tabs--subNav .Tabs-link {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: normal;
  border: none;
  border-radius: none !important;
  color: #427dc4;
  border-radius: 0 0 0 0;
  min-width: 34px;
  text-align: center;
}
.Tabs.Tabs--subNav .Tabs-item:last-child .Tabs-link {
  border-right: none;
}

.Tabs.Tabs--subNav .Tabs-item.active .Tabs-link {
  color: white;
  background: #427dc4;
  border-radius: 0 0 0 0 !important;
  font-weight: 500;
}

/* Jobs filtering */
.Tabs.Tabs--subNav.Tabs--inlined {
  margin-top: 10;
  margin-bottom: -11px;
}
.Tabs.Tabs--subNav.Tabs--inlined .Tabs-link {
  padding: 6px 13px;
  font-size: 12px;
}

/* Step by step tabs
----------------------------------------------- */
.Tabs-list.tabs-numbered {
  border-bottom: none;
  padding-left: 0;
}

.tabs-steps li {
  display: inline-block;
}
.tabs-steps li a {
  transition: none;
  position: relative;
  top: 1px;
  z-index: 1;
  display: inline-block;
  padding: 24px 30px;
  font-size: 1.5rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.tabs-steps li a b {
  font-weight: 500;
}
.tabs-steps li :hover, .tabs-steps li :focus {
  text-decoration: none;
  outline: none;
}
.tabs-steps .active a {
  color: #000;
  background: #fff;
  border-left: none;
  cursor: default;
  border: 1px solid #dadee5;
  border-bottom: 1px solid #fff;
}
.tabs-steps .active a b {
  font-weight: 800;
}
.tabs-steps li.active {
  border-bottom: none;
}

.tab-article-content {
  padding: 14px 18px;
}
.tab-article-content .img-right {
  margin: 12px 78px 68px 68px;
}

.tabs-steps .Tabs-list {
  counter-reset: step;
}

.tabs-steps .Tabs-list li {
  counter-increment: step;
}

.tabs-steps .Tabs-list li b:before {
  content: counter(step);
  vertical-align: middle;
  display: inline-block;
  font-weight: 500;
  text-align: center;
  font-size: 12px;
  width: 12px;
  height: 12px;
  line-height: 12px;
  padding: 6px;
  background: #ADADAD;
  color: #fff;
  border-radius: 50%;
  margin: -4px 10px 0 0;
}

.tabs-steps .Tabs-list .active b:before {
  background: #52B54A;
}

/* Content area
----------------------------------------------- */
.tab-intro-content {
  margin-bottom: 28px;
}
.tab-intro-content p {
  font-size: 1.4rem;
}

/**
 * Tabular definition
 *
 * A generic layout component for building a horizontal tabular layout (not data tables)
 * Use Cases: Racks Dashboard
 */
/**
 * Tabular Container element
 */
.Tabular {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 1.4em;
}
.Tabular a:hover {
  text-decoration: none;
}

.Tabular-item {
  padding: 0 16px;
  font-size: 1.2rem;
}

.Tabular-meter {
  padding-top: 0.6em;
  padding-right: 4em;
}

/**
 * Tabular Headings
 */
.Tabular-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: #427dc4;
}

.Tabular-subTitle {
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  color: #575f68;
  margin-bottom: 4px;
}

.Tabular-data {
  color: #999;
  line-height: 1;
}

.Tabular-number {
  color: #24292e;
  font-size: 1.6rem;
  font-weight: 500;
}

.Tabular-link {
  color: #427dc4;
}

.Tabular-subText {
  padding-top: 0.75em;
  color: #6a737d;
}

/**
 * Tabular Lists
 */
/**
 * Filterable search
 * show stack list within the matched racks
 */
.js_filter_item.is-shown .Tabular-subText {
  display: block;
}

/* filterable list items */
.hide-item {
  display: none;
}

.hide-item.is-shown {
  display: block;
}

/* ==========================================================================
   TAG LIST
   List of an objects current tags with CTA to view more & add/edit
   ==========================================================================

    <div class="Tag js_tag_container">
        <ul class="List List--inline Tag-list    js_tag_list">
            <li><span class="Tag-item">TagMe</span></li>
        </ul>
        <div title="More Tags" class="u-inlineBlock js_tip">
            <a class="Tag-cta    js_show_popover_tag_editor"
               href="#"
               data-tags='["TagMe","Foo"]'
               data-set="<%= tags_set_path( :entity_type => 'test entity', :id => 1 ) %>"
               data-limit="1"
               data-toggle="popover">...</a>
        </div>
    </div>

*/
/* common tag props */
.Tag {
  display: inline-block;
  vertical-align: middle;
}

.Tag-list {
  display: inline-block;
}
.Tag-list > li {
  margin: 0 1px;
  padding-bottom: 5px;
}

.Tag-list--small .Tag-item {
  font-size: 11px;
}

.Tag-item {
  display: inline-block;
  vertical-align: middle;
  padding: 3px 6px;
  margin-right: 2px;
  background: #F1F8FF;
  border: 1px solid #e5f2ff;
  border-radius: 3px;
  color: #636d77;
  text-shadow: 0 1px 0 #fff;
  font-size: 1.2rem;
  line-height: 1;
}

.Tag-item--small {
  padding: 1px;
}

.Tag-item--muted {
  background: #F9F9F9;
  border-color: #ddd;
  color: #999;
}

.Tag-item--reserved {
  background: rgba(234, 131, 145, 0.1);
  border-color: rgba(234, 131, 145, 0.4);
  color: #aa4442;
}

.Tag-item--sync {
  border-color: #b1d4ef;
  background: #E4EDF4;
  color: #43719A;
}

.Tag-item--highlight,
.Tag-item--paleYellow {
  border-color: #eadbb4;
  background: #FCF7EA;
  color: #777;
}

.Tag-item--yellow {
  border-color: #F6E05E;
  background: #F6E05E;
  color: #000;
}

.Tag-item a {
  color: inherit !important;
}

.Tag-itm--label {
  border-radius: 12px;
  text-align: center;
  padding: 3px 12px;
}

/*
    tag colors
*/
.Tag-item--green {
  background: #F0FFF4;
  border-color: #C6F6D5;
  color: #38A169;
}

.Tag-item--orange {
  background: #FFFAF0;
  border-color: #FBD38D;
  color: #F6AD55;
}

.Tag-item--blue {
  background: #EBF8FF;
  border-color: #BEE3F8;
  color: #2B6CB0;
}

.Tag-item--red {
  background: #FFF5F5;
  border-color: #FEB2B2;
  color: #E53E3E;
}

.Tag-item--teal {
  background: #E6FFFA;
  border-color: #B2F5EA;
  color: #38B2AC;
}

.Tag-item--lightRed {
  background: #f8a396;
  border-color: #e27a6c;
  color: #000;
}

.Tag-item--indigo {
  background: #EBF4FF;
  border-color: #C3DAFE;
  color: #5A67D8;
}

.Tag-item--grey {
  background: #F7FAFC;
  border-color: #EDF2F7;
  color: #A0AEC0;
}

.Tag-item--grey-dark {
  background: #F5F5F5;
  border-color: rgba(5, 5, 5, 0.08);
  color: #222;
}

.Tag-item--purple {
  background: #FAF5FF;
  border-color: #E9D8FD;
  color: #805AD5;
}

.Tag-item--pink {
  background: #FFF5F7;
  border-color: #FED7E2;
  color: #D53F8C;
}

.Tag-item--canary {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: inherit;
}

.Tag-item--inline {
  min-width: auto !important;
}

.Tag-item--logline {
  position: relative;
  left: -2px;
}

/*
    high contrast reversed out tag colors - white on colored bg
*/
.Tag-item.Tag-item--buildDeploy {
  min-width: 62px !important;
  text-align: center;
}

.Tag-item--0 {
  background: #3d4a60; /* dark */
  border-color: #3d4a60;
  color: #fff;
  text-shadow: none;
}

.Tag-item--1 {
  background: #718096; /* Gray */
  border-color: #718096;
  color: #fff;
  text-shadow: none;
}

.Tag-item--2 {
  background: #DD6B20; /* orange */
  border-color: #DD6B20;
  color: #fff;
  text-shadow: none;
}

.Tag-item--3 {
  background: #38A169; /* green */
  border-color: #38A169;
  color: #fff;
  text-shadow: none;
}

.Tag-item--4 {
  background: #975A16; /* brown */
  border-color: #975A16;
  color: #fff;
  text-shadow: none;
}

.Tag-item--5 {
  background: #319795; /* Teal */
  border-color: #319795;
  color: #fff;
  text-shadow: none;
}

.Tag-item--6 {
  background: #3182CE; /* Blue */
  border-color: #3182CE;
  color: #fff;
  text-shadow: none;
}

.Tag-item--7 {
  background: #4C51BF; /* Indigo */
  border-color: #4C51BF;
  color: #fff;
  text-shadow: none;
}

.Tag-item--8 {
  background: #D53F8C; /* pink */
  border-color: #D53F8C;
  color: #fff;
  text-shadow: none;
}

.Tag-item--9 {
  background: #6B46C1; /* Purple */
  border-color: #6B46C1;
  color: #fff;
  text-shadow: none;
}

.Tag-item--10 {
  background: #9B2C2C; /* dark red saturated */
  border-color: #9B2C2C;
  color: #fff;
  text-shadow: none;
}

.Tag-item--11 {
  background: #22543D; /* dark green */
  border-color: #22543D;
  color: #fff;
  text-shadow: none;
}

.Tag-item--12 {
  background: #702459; /* dark purple */
  border-color: #702459;
  color: #fff;
  text-shadow: none;
}

.Tag-item--13 {
  border-color: #F6E05E; /* yellow */
  background: #F6E05E;
  color: #000;
  text-shadow: none;
}

.Tag-item--14 {
  border-color: #64c964; /* bright green */
  background: #64c964;
  color: #fff;
  text-shadow: none;
}

.Tag-ctaWithIcon {
  display: inline-block;
  position: relative;
  top: 0;
  margin: 0 0 0 3px;
  vertical-align: middle;
  width: 16px;
  height: 16px;
}
.Tag-ctaWithIcon .icon-tag {
  font-size: 1.4rem;
  color: #bcbcbc !important;
}
.Tag-ctaWithIcon .icon-tag:hover {
  color: #005580 !important;
}
.Tag-ctaWithIcon:hover {
  text-decoration: none !important;
}

.Tag-cta {
  display: inline-block;
  position: relative;
  top: 0;
  margin: 0;
  vertical-align: middle;
  width: 17px;
  height: 17px;
  line-height: 10px;
  border-radius: 50%;
  border: 1px solid #427dc4;
  font-size: 1.4rem;
  font-weight: bolder;
  text-align: center;
  color: #427dc4;
}
.Tag-cta:hover, .Tag-cta:focus, .Tag-cta:active {
  text-decoration: none;
  outline: none;
}

.Tag-cta--icon {
  width: auto;
  height: auto;
  border: none;
}
.Tag-cta--icon:hover {
  border: none;
}

.Tag-count {
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  font-size: 1rem;
}

.Tag-itemCta {
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.Tag-itemCta:hover {
  color: #427dc4;
}

/*
    Modifiers
    Tagging component with small space e.g. custom variables
 */
.Tag--small .Tag-itemCta {
  display: none;
}

.Tag--form {
  padding-left: 11px;
}

.Tag-dividerTop {
  border-top: 1px solid #eaeaea !important;
}

/* ==========================================================================
   TAG POPOVER
   Modify the default popover to accommodate the tag editor
   ==========================================================================
*/
.popover--tags {
  width: 265px;
  margin-top: 0;
  z-index: 999999 !important;
}
.popover--tags .popover-content {
  min-height: 35px;
  padding-top: 0;
}
.popover--tags .popover-content ul {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

body[data-action=environment_variables] .popover--tags {
  width: 240px;
}

/* ==========================================================================
   TAG EDITOR
   Tag editor appears
   ==========================================================================
*/
ul.tag-editor {
  list-style-type: none;
  padding: 0 0 0 2px !important;
  margin: 1em 0 0 0 !important;
  overflow: hidden;
  cursor: text;
  font-size: 1.2rem;
  color: #555;
}
ul.tag-editor > li {
  display: inline-block;
  overflow: hidden;
  margin: 2px 3px;
  line-height: 1.9;
}
ul.tag-editor li:first-child {
  margin-left: 0;
}
ul.tag-editor li:nth-child(2) {
  margin-left: 0;
}
ul.tag-editor div {
  float: left;
  padding: 0 4px;
}
ul.tag-editor .placeholder {
  padding: 6px 0 0 0;
  color: #bbb;
}
ul.tag-editor .tag-editor-spacer {
  display: none;
  padding: 0;
  width: 8px;
  overflow: hidden;
  color: transparent;
  background: none;
}
ul.tag-editor input.tag-input {
  line-height: 1;
  position: relative;
  box-shadow: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 1.2rem;
}
ul.tag-editor input.tag-input:focus {
  box-shadow: none;
  margin: 0 !important;
  padding: 0 !important;
}
ul.tag-editor .tag-editor-tag {
  min-height: 14px;
  line-height: 1.2;
  padding: 3px 6px;
  color: #636d77;
  text-shadow: 0 1px 0 #fff;
  background: #F1F8FF;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px 0 0 2px;
  border: 1px solid #e5f2ff;
  border-right: 0;
  font-size: 1.2rem;
}
ul.tag-editor .tag-editor-tag.active,
ul.tag-editor .tag-editor-tag.active + .tag-editor-delete {
  border: none;
}
ul.tag-editor .tag-editor-tag.active + .tag-editor-delete {
  display: none;
}
ul.tag-editor .tag-editor-delete {
  min-height: 14px;
  line-height: 1.2;
  background: #F1F8FF;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 0 2px 2px 0;
  border: 1px solid #e5f2ff;
  border-left: 0;
  font-size: 1.2rem;
}
ul.tag-editor .tag-editor-delete i {
  display: inline-block;
  color: #333;
  text-shadow: 0 1px 0 #fff;
  font-style: normal !important;
}
ul.tag-editor .tag-editor-delete:hover i {
  color: #555;
}
ul.tag-editor .tag-editor-tag.active + .tag-editor-delete,
ul.tag-editor .tag-editor-tag.active + .tag-editor-delete i {
  background: none;
  cursor: text;
}
ul.tag-editor .tag-editor-tag.active {
  padding: 0 !important;
  background: none !important;
}

.reserved-tag .tag-editor-tag,
.reserved-tag .tag-editor-delete {
  border-color: rgba(234, 131, 145, 0.4);
  background: rgba(234, 131, 145, 0.1);
  color: #aa4442;
}
.reserved-tag .tag-editor-delete i {
  color: #aa4442;
}

.synchronise-tag .tag-editor-tag,
.synchronise-tag .tag-editor-delete {
  border-color: #b1d4ef;
  background: #E4EDF4;
  color: #43719A;
}
.synchronise-tag .tag-editor-delete i {
  color: #43719A;
}

/* hide original input field or textarea visually to allow tab navigation */
.tag-editor-hidden-src {
  position: absolute !important;
  left: -99999px;
}

/* hide IE10 "clear field" X */
.tag-editor ::-ms-clear {
  display: none;
}

/*
 Control e.g. service Accounts
 */
.ServiceAccountNotifications {
  padding-top: 16px;
}

.TagFilterContainer {
  padding-top: 6px;
}

.TagFilter {
  height: 36px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  background: #fcfcfc;
  border: 1px solid #C1C1C1;
  border-radius: 4px;
  padding-left: 2px;
  padding-top: 4px;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  color: #000;
}
.TagFilter ul.tag-editor {
  margin-top: 0 !important;
}
.TagFilter ul.tag-editor li.placeholder div {
  position: relative;
  top: -6px;
}

/* workaround for css issue in env vars & firewall page.
   don't show the tags after updating as there is no space inside the table cell!
   They can only fit in the popover.
*/
#js-config-vars-table .js_tag_list,
#firewall-table .js_tag_list {
  display: none;
}

/* ================================================================================
 *  TeXT EDITOR
 *  Overides for editor chrome and styles to embed within a c66 Module component
 * ================================================================================ */
/* Template Page - Ace editor within module
------------------------------------------------------ */
.Drawer-body .monaco-editor {
  position: relative;
  margin-left: -20px;
}

.mod-article-editor,
.Module-editor {
  position: relative;
  overflow: hidden;
}
.mod-article-editor .editor,
.Module-editor .editor {
  box-sizing: border-box;
  width: 100%;
  height: 55vh;
  border: none;
}
.mod-article-editor .editor ::-webkit-scrollbar,
.Module-editor .editor ::-webkit-scrollbar {
  -webkit-appearance: none;
}
.mod-article-editor .form-actions,
.Module-editor .form-actions {
  overflow: hidden;
  margin-top: 0 !important;
}
.mod-article-editor .spinner-svg,
.Module-editor .spinner-svg {
  display: none;
  opacity: 0;
  z-index: 666;
  position: absolute;
  top: 20%;
  left: calc(50% - 16px);
}

.mod-article-editor.loading {
  opacity: 0.5;
}
.mod-article-editor.loading .spinner-svg {
  display: block;
  opacity: 1;
}

.Form-fieldset--containsSpinner .spinner-svg {
  opacity: 0;
  z-index: 666;
  position: absolute;
  top: 50%;
  left: 50%;
}

.Form-fieldset--containsSpinner.Form-fieldset--showSpinner .spinner-svg {
  opacity: 1 !important;
}

.Module--editor .Form-fieldset {
  padding: 16px 20px;
}

/* Preview page - read-only editor
------------------------------------------------------ */
.editor-wrap {
  padding: 4px;
  background: #F9F9F9;
  border: 1px solid #ddd;
}

.editor-preview {
  width: 100%;
  min-height: 450px !important;
  /* read-only editor styles */
}
.editor-preview .monaco-editor,
.editor-preview .view-lines,
.editor-preview .view-line,
.editor-preview .margin-view-overlays,
.editor-preview .invisible.scrollbar {
  background: #F9F9F9;
}
.editor-preview .cursors-layer,
.editor-preview .cursor {
  display: none;
}

.editor--disabled {
  /* disabled editor styles */
}
.editor--disabled .monaco-editor,
.editor--disabled .view-lines,
.editor--disabled .view-line,
.editor--disabled .margin-view-overlays,
.editor--disabled .invisible.scrollbar {
  background: #FAFAFA;
  opacity: 0.75;
}
.editor--disabled .cursors-layer,
.editor--disabled .cursor {
  display: none;
}

/* Template Page Editor - set to 'readonly' mode
------------------------------------------------------ */
.is-readonly-editor .mod-article-editor,
.is-readonly-editor .editor {
  background: #FCFCFC;
}
.is-readonly-editor .ace_content {
  background: #FCFCFC;
}
.is-readonly-editor .ace_content * {
  color: #999;
}

.monaco-read-only-row {
  background: #eee !important;
  pointer-events: none !important;
  cursor: not-allowed;
}

/* Body class to make a text editor module full screen
------------------------------------------------------ */
.EditorTools {
  display: none;
  position: absolute;
  right: 20px;
  top: 4px;
  z-index: 9;
  background: #fff;
  padding-top: 4px;
  padding-right: 4px;
  padding-left: 4px;
  padding-bottom: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.EditorTools .Icon--toolBar {
  width: 16px;
  height: 16px;
}
.EditorTools #minimise-icon {
  display: none;
}
.EditorTools #maximise-icon {
  display: block;
}

.full-screen-editor-view-active {
  overflow-y: hidden !important; /* Hide vertical scrollbar */
  /* Resize the editor container to full screen */
}
.full-screen-editor-view-active #minimise-icon {
  display: block;
}
.full-screen-editor-view-active #maximise-icon {
  display: none;
}
.full-screen-editor-view-active .EditorTools {
  display: block;
  position: fixed;
  top: 26px;
  right: 38px;
  z-index: 100501;
}
.full-screen-editor-view-active .EditorTools .Icon--toolBar {
  width: 22px;
  height: 22px;
}
.full-screen-editor-view-active #js-editor,
.full-screen-editor-view-active #js_monaco_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 12px;
  bottom: 0;
  z-index: 100500;
  height: 100%;
}

/* demo classes for marking errors in the monaco editor margin and line  */
.monaco-error-in-line {
  background: rgba(224, 31, 34, 0.125) !important;
}

.monaco-error-in-editor-margin:before {
  position: relative;
  left: 12px;
  content: "[";
  font-family: "cloud66-icons";
  line-height: 1;
  color: #e01f22;
}

/* ==========================================================================
   Timeline
   ========================================================================== */
.TimeLine {
  margin-bottom: 40px;
  border-left: 3px solid #efefef;
  padding-left: 36px;
  padding-top: 1px;
}
@media only screen and (max-width: 1023px) {
  .TimeLine {
    padding-left: 0;
    border-left: none;
    margin-bottom: 10px;
  }
}
.TimeLine .TimeLine-title {
  line-height: 1;
  margin: 24px 0 18px 0;
  font-size: 13px;
  font-weight: 600;
  color: #444d56;
}
.TimeLine .TimeLine-title:first-child {
  margin-top: 12px;
}
.TimeLine .TimeLine-title::before {
  position: relative;
  top: 1px;
  content: "";
  display: inline-block;
  position: relative;
  margin-left: -44px;
  margin-right: 24px;
  border-radius: 50%;
  line-height: 1;
  width: 7px;
  height: 7px;
  border: 3px solid #efefef;
  background: #fff;
}
@media only screen and (max-width: 1023px) {
  .TimeLine .TimeLine-title::before {
    display: none;
  }
}

.TimeLineModule {
  border-width: 1px;
  border-style: solid;
  border-color: #dadee5;
  border-radius: 6px;
  margin-bottom: 16px;
}
.TimeLineModule a:hover {
  text-decoration: none;
}
.TimeLineModule .TimeLineModule-items {
  position: relative;
  padding: 16px;
  border-radius: 6px;
  background-color: #FAFBFC;
}
.TimeLineModule .TimeLineModule-items:hover {
  background: #fcfeff;
}
.TimeLineModule .Module-header--primary {
  border-radius: 6px;
  border-bottom: none;
}
.TimeLineModule .TimeLineModule-title {
  min-width: 58px;
}
.TimeLineModule .TimeLineModule-headerDateTime {
  min-width: 54px;
}
.TimeLineModule .TimeLineModule-headerMessage {
  padding-left: 16px;
}
.TimeLineModule .TimeLineModule-body {
  display: none;
}
.TimeLineModule .TimeLineModule-label {
  font-size: 11px;
  line-height: 1.1;
}
.TimeLineModule .TimeLineModule-rowDivider {
  margin-top: 8px;
}

.TimeLineModule-headerItem {
  margin: 0 3px;
  line-height: 19px;
}

.TimeLineModule-headerItem--spaced {
  margin: 0 3px 0 20px;
}

.TimeLineModule-headerItem--related {
  margin: 0 3px 0 8px;
}

.TimeLineModule-headerItemUser {
  font-size: 12px;
  min-width: 180px;
}

/* Application level timeline page */
.TimeLine--application .TimeLineModule-title {
  font-size: 12px;
  width: 20%;
}
@media only screen and (min-width: 1230px) {
  .TimeLine--application .TimeLineModule-title {
    width: 212px;
  }
}
@media (max-width: 620px) {
  .TimeLine--application .TimeLineModule-title {
    min-width: 190px;
    font-size: 12px !important;
  }
}
.TimeLine--application .TimeLineModule-details {
  font-size: 12px;
  width: 40%;
}
.TimeLine--application .TimeLineModule-detailTitle {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: #000;
  margin-bottom: 3px;
}
.TimeLine--application .TimeLineModule-detailItem {
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.TimeLine--application .TimeLineModule-detailItem:last-child {
  margin-bottom: 0;
}

.TimeLineModule.has-errors .TimeLineModule-body {
  display: block;
}

.TimeLineModule-icon {
  position: relative;
  top: 3px;
  margin-right: 3px;
  color: #708187;
}

.TimeLineModule-spinner {
  position: relative;
  margin-left: 1px;
  margin-right: 4px;
  top: 3px;
}

.TimeLineModule-avatar {
  position: relative;
  top: 3px;
}

.TimeLineModule--green .TimeLineModule-icon {
  color: #35B46E !important;
}

.TimeLineModule--amber .TimeLineModule-icon {
  color: #EA8407 !important;
}

.TimeLineModule.TimeLineModule--yellow {
  border-color: #eadbb4;
}
.TimeLineModule.TimeLineModule--yellow .TimeLineModule-items {
  background: #fcf9f2;
}

.TimeLineModule--red .TimeLineModule-icon {
  color: #e01f22 !important;
}

.TimeLineModule-icon--green {
  color: #35B46E !important;
}

.TimeLineModule-icon--amber {
  color: #EA8407 !important;
}

.TimeLineModule-icon--grey {
  color: #999 !important;
}

/*
    Timeline messages: pending deploy requests etc.
*/
.Message--timeline {
  margin: 60px 0 10px 0 !important;
}

/* ===========================================================================================
 *  TOOLTIPS & POPOVERS
============================================================================================== */
/* ===========================================================================================
 *  LEGACY TOOLTIP - jquery.tooltip plugin
 *  $().tooltip() still called internally so can't be removed completely yet
 *  should be removed in future, once jquery.plugins is safely removed
============================================================================================== */
/*

.tooltip {
  position: absolute;
  z-index: 91020;
  display: block;
  padding: 5px;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0;
  visibility: visible;
  border-radius: 6px;
  pointer-events: none;


  h6,
  h5,
  .tooltip-heading {
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-top: 3px;
    margin-bottom: 6px;
    color: white;
  }
}

.tooltip.in {
  opacity: 0.8;
}

.tooltip.top {
  margin-top: -4px;
}

.tooltip.right {
  margin-left: 2px;
}

.tooltip.bottom {
  margin-top: 2px;
}

.tooltip.left {
  margin-left: -2px;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top: 5px solid rgba(0, 0, 0, 0.8);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid rgba(0, 0, 0, 0.8);
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 0, 0, 0.8);
  border-left: 5px solid transparent;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 5px solid rgba(0, 0, 0, 0.8);
  border-bottom: 5px solid transparent;
}

.tooltip-inner {
  max-width: 200px;
  padding: 4px 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  word-wrap: break-word;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

*/
/* -------------------------------------------------------------------------------------------
  The '?' icon to indicate tooltip hover
  Used in some form labels for additional information
  ------------------------------------------------------------------------------------------- */
.has-tooltip::after {
  background-color: #52B54A;
  border: 1px solid #52B54A;
  border-radius: 50%;
  color: #fff;
  content: "?";
  display: inline-block;
  font-size: 9px;
  height: 13px;
  line-height: 13px;
  position: relative;
  right: -3px;
  text-align: center;
  top: -3px;
  width: 13px;
}

.has-tooltip.has-tooltip--red::after {
  background-color: #e01f22;
  border-color: #e01f22;
}

.has-tooltip.has-tooltip--amber::after {
  background-color: #EA8407;
  border-color: #EA8407;
}

/* icon to indicate tooltip hover */
.has-tooltipInfo::after {
  background-color: #52B54A;
  border: 1px solid #52B54A;
  border-radius: 50%;
  color: #fff;
  content: "i";
  display: inline-block;
  font-size: 9px;
  height: 13px;
  line-height: 13px;
  position: relative;
  right: -2px;
  text-align: center;
  top: -3px;
  width: 13px;
}

@media (max-width: 800px) {
  .has-tooltipInfo {
    display: none;
  }
}
/* has-tooltip positioning when nested within tags (.Tag-item) e.g. BETA tags */
.Tag-item.has-tooltip {
  margin: 0 4px;
  padding-right: 11px;
  line-height: 1.3;
}

.Tag-item.has-tooltip::after {
  top: -1px;
  right: -6px;
}

/* -------------------------------------------------------------------------------------------
  Tippy.js Tooltips
  Standard tooltips used throughout the app
  White text on a dark background
  ------------------------------------------------------------------------------------------- */
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 6px 9px;
  z-index: 1;
  text-align: center;
}
.tippy-content h6 {
  text-transform: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 4px;
}
.tippy-content p {
  margin-bottom: 8px;
  line-height: 1.3;
}
.tippy-content p:last-child {
  margin-bottom: 0;
}
.tippy-content a {
  color: #fff !important;
  text-decoration: underline;
}
.tippy-content a:hover {
  color: #fff !important;
}

/*
  Popovers
  Used for more detailed information, can contain complex markup.
*/
.js_popover_help:hover {
  cursor: help;
}

a > .js_popover:hover {
  cursor: pointer;
}

/*
 Light theme
*/
.tippy-box[data-theme~=light] {
  color: #26323d;
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.25), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
  background-color: #fff;
}
.tippy-box[data-theme~=light] .tippy-content {
  padding: 6px 12px;
  text-align: left;
}
.tippy-box[data-theme~=light] .tippy-content h6 {
  color: #000;
}
.tippy-box[data-theme~=light] .tippy-content a {
  color: #427dc4;
  text-decoration: none;
}

.tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow:before {
  border-top-color: #fff;
}

.tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow:before {
  border-bottom-color: #fff;
}

.tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow:before {
  border-left-color: #fff;
}

.tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow:before {
  border-right-color: #fff;
}

.tippy-box[data-theme~=light] > .tippy-backdrop {
  background-color: #fff;
}

.tippy-box[data-theme~=light] > .tippy-svg-arrow {
  fill: #fff;
}

/*
  light bordered theme
  used for popovers
*/
.tippy-box[data-theme~=light-border] {
  background-color: #fff;
  background-clip: padding-box;
  color: #222;
  border-radius: 6px;
  border: 1px solid rgba(0, 8, 16, 0.18);
  box-shadow: 0 4px 14px -2px rgba(0, 8, 16, 0.15);
}
.tippy-box[data-theme~=light-border] .tippy-content {
  overflow: hidden;
  padding: 12px;
  text-align: left;
}
.tippy-box[data-theme~=light-border] .tippy-content h6 {
  color: #000;
  text-align: left;
  line-height: 1;
  margin-bottom: 6px;
}
.tippy-box[data-theme~=light-border] .tippy-content p {
  text-align: left;
  line-height: 1.4;
}
.tippy-box[data-theme~=light-border] .tippy-content .tippy-content-small {
  font-size: 12px !important;
}
.tippy-box[data-theme~=light-border] .tippy-content .tippy-content-xsmall {
  font-size: 10px !important;
}
.tippy-box[data-theme~=light-border] .tippy-content a {
  display: inline !important;
  color: #427dc4 !important;
  padding: 0 !important;
  text-decoration: none;
}
.tippy-box[data-theme~=light-border] .tippy-content a:hover {
  color: #427dc4 !important;
  background: transparent !important;
}
.tippy-box[data-theme~=light-border] .tippy-content .link-external {
  background: url("data:image/gif;base64,R0lGODlhCAAHAIABAJO42f///yH5BAEAAAEALAAAAAAIAAcAAAINjAMJd5q2HoSLzUadKQA7") no-repeat right 4px rgba(0, 0, 0, 0) !important;
  padding-right: 12px !important;
}
.tippy-box[data-theme~=light-border] .tippy-content .link-external:hover {
  background: url("data:image/gif;base64,R0lGODlhCAAHAIABAJO42f///yH5BAEAAAEALAAAAAAIAAcAAAINjAMJd5q2HoSLzUadKQA7") no-repeat right 4px rgba(0, 0, 0, 0) !important;
  text-decoration: none !important;
}
.tippy-box[data-theme~=light-border] .tippy-content pre {
  padding: 0;
  margin: 0;
}
.tippy-box[data-theme~=light-border] .tippy-content code {
  padding: 0;
  margin: 0;
}

.tippy-box[data-theme~=light-border] > .tippy-backdrop {
  background-color: #fff;
}

.tippy-box[data-theme~=light-border] > .tippy-arrow:after,
.tippy-box[data-theme~=light-border] > .tippy-svg-arrow:after {
  content: "";
  position: absolute;
  z-index: -1;
}

.tippy-box[data-theme~=light-border] > .tippy-arrow:after {
  border-color: transparent;
  border-style: solid;
}

.tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-arrow:before {
  border-top-color: #fff;
}

.tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-arrow:after {
  border-top-color: rgba(0, 8, 16, 0.2);
  border-width: 7px 7px 0;
  top: 17px;
  left: 1px;
}

.tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-svg-arrow > svg {
  top: 16px;
}

.tippy-box[data-theme~=light-border][data-placement^=top] > .tippy-svg-arrow:after {
  top: 17px;
}

.tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-arrow:before {
  border-bottom-color: #fff;
  bottom: 16px;
}

.tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-arrow:after {
  border-bottom-color: rgba(0, 8, 16, 0.2);
  border-width: 0 7px 7px;
  bottom: 17px;
  left: 1px;
}

.tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-svg-arrow > svg {
  bottom: 16px;
}

.tippy-box[data-theme~=light-border][data-placement^=bottom] > .tippy-svg-arrow:after {
  bottom: 17px;
}

.tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-arrow:before {
  border-left-color: #fff;
}

.tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-arrow:after {
  border-left-color: rgba(0, 8, 16, 0.2);
  border-width: 7px 0 7px 7px;
  left: 17px;
  top: 1px;
}

.tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-svg-arrow > svg {
  left: 11px;
}

.tippy-box[data-theme~=light-border][data-placement^=left] > .tippy-svg-arrow:after {
  left: 12px;
}

.tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-arrow:before {
  border-right-color: #fff;
  right: 16px;
}

.tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-arrow:after {
  border-width: 7px 7px 7px 0;
  right: 17px;
  top: 1px;
  border-right-color: rgba(0, 8, 16, 0.2);
}

.tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-svg-arrow > svg {
  right: 11px;
}

.tippy-box[data-theme~=light-border][data-placement^=right] > .tippy-svg-arrow:after {
  right: 12px;
}

.tippy-box[data-theme~=light-border] > .tippy-svg-arrow {
  fill: #fff;
}

.tippy-box[data-theme~=light-border] > .tippy-svg-arrow:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA2czEuNzk2LS4wMTMgNC42Ny0zLjYxNUM1Ljg1MS45IDYuOTMuMDA2IDggMGMxLjA3LS4wMDYgMi4xNDguODg3IDMuMzQzIDIuMzg1QzE0LjIzMyA2LjAwNSAxNiA2IDE2IDZIMHoiIGZpbGw9InJnYmEoMCwgOCwgMTYsIDAuMikiLz48L3N2Zz4=);
  background-size: 16px 6px;
  width: 16px;
  height: 6px;
}

/* ===========================================================================================
 *  Avoid unwanted transitions onload - class is removed with js
============================================================================================== */
.preLoad * {
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

/* ===========================================================================================
 *  FADE IN
============================================================================================== */
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.17s linear;
  -moz-transition: opacity 0.17s linear;
  -ms-transition: opacity 0.17s linear;
  -o-transition: opacity 0.17s linear;
  transition: opacity 0.17s linear;
}

.fade.in {
  opacity: 1;
}

/* ===========================================================================================
 *  COLLAPSE IN
============================================================================================== */
.collapse {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -ms-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.in {
  height: auto;
}

/* ===========================================================================================
 *  FADE IN - TIMED ANIMATION
============================================================================================== */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-pre {
  opacity: 0;
}

.fade-in {
  opacity: 0;
  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat once */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 0.4s;
  -moz-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.fade-in.one {
  -webkit-animation-delay: 0.025s;
  -moz-animation-delay: 0.025s;
  animation-delay: 0.025s;
}

.fade-in.two {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

/* ==========================================================================
   non-semantic helper utility classes
   ========================================================================== */
.hide,
.is-hidden {
  display: none;
}

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

.show {
  display: block;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none !important;
  visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.u-visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Extends the .u-visuallyHidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.u-visuallyHidden.focusable:active,
.u-visuallyHidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible,
.is-invisible {
  visibility: hidden;
}

.make-visable {
  visibility: visible;
}

/* Contain floats: h5bp.com/q */
.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

/* ==========================================================================
   Display-type utilities
   ========================================================================== */
.u-inline {
  display: inline !important;
}

/**
* 1. Fix for Firefox bug: an image styled `max-width:100%` within an
* inline-block will display at its default size, and not limit its width to
* 100% of an ancestral container.
*/
.u-inlineBlock {
  display: inline-block !important;
  max-width: 100%;
  /* 1 */
}

.u-block,
.u-displayBlock {
  display: block !important;
}

.u-table {
  display: table !important;
}

.u-tableCell {
  display: table-cell !important;
}

/* ==========================================================================
   Vertical alignment utilities
   Depends on an appropriate `display` value.
   ========================================================================== */
/**
 * Word breaking
 *
 * Break strings when their length exceeds the width of their container.
 */
.u-textBreak {
  word-wrap: break-word !important;
}

/**
 * Inherit the ancestor's text color.
 */
.u-textInheritColor {
  color: inherit !important;
}

/**
 * Color Utitlites
 */
.u-alertColor {
  color: #e84c85;
}

.u-textRed {
  color: rgb(203, 36, 49) !important;
}
.u-textRed path {
  fill: rgb(203, 36, 49) !important;
}
.u-textRed kbd {
  color: inherit !important;
  font-size: inherit !important;
}

.u-textLightRed {
  color: #ff8383 !important;
}
.u-textLightRed path {
  fill: #ff8383 !important;
}

.u-textAmber {
  color: #EA8407 !important;
}
.u-textAmber a {
  color: #EA8407;
  border-bottom: 1px solid #EA8407;
  text-decoration: none;
}

.u-textGreen {
  color: rgb(40, 167, 69) !important;
}

.u-textLightestGreen {
  color: rgb(181, 244, 165) !important;
  fill: rgb(181, 244, 165) !important;
}
.u-textLightestGreen path {
  fill: rgb(181, 244, 165) !important;
}

.u-textLightGreen {
  color: #35B46E !important;
}

.u-textDark {
  color: #555 !important;
}

.u-textBlack {
  color: #24292e !important;
}

.u-textBlue {
  color: #0969DA !important;
}

.u-textLinkBlue {
  color: #427dc4 !important;
}

.u-colorIcon {
  color: #748b93;
}
.u-colorIcon:hover {
  color: #427dc4;
}

.u-colorIcon.is-disabled {
  color: #748b93 !important;
}
.u-colorIcon.is-disabled:hover {
  color: inherit;
}

.u-colorDarkAmber {
  color: #542d12;
}

.u-colorWhite {
  color: #fff;
}

.u-positionRelative {
  position: relative !important;
}

.u-positionAbsolute {
  position: absolute !important;
}

/**
 * Enables font kerning in all browsers.
 * http://blog.typekit.com/2014/02/05/kerning-on-the-web/
 *
 * 1. Chrome (not Windows), Firefox, Safari 6+, iOS, Android
 * 2. Chrome (not Windows), Firefox, IE 10+
 * 3. Safari 7 and future browsers
 */
.u-textKern {
  text-rendering: optimizeLegibility;
  /* 1 */
  font-feature-settings: "kern" 1;
  /* 2 */
  font-kerning: normal;
  /* 3 */
}

/**
 * Prevent whitespace wrapping
 */
.u-textNoWrap {
  white-space: nowrap !important;
}

/**
 * Text truncation
 *
 * Prevent text from wrapping onto multiple lines, and truncate with an
 * ellipsis.
 *
 * 1. Ensure that the node has a maximum width after which truncation can
 *    occur.
 * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
 *    nodes.
 */
.u-textTruncate {
  max-width: 100%;
  /* 1 */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  /* 2 */
}

/**
 * Overflow auto utils
 */
.u-overflowAuto {
  overflow: auto;
}

.u-overflowYauto {
  overflow-y: auto;
  overflow-x: hidden;
}

.u-overflowVisible {
  overflow: visible !important;
}

/**
 * Global text utilities
 */
.u-monoSpacedFont {
  font-family: Menlo, Consolas, "Liberation Mono", monospace, Courier !important;
}

.u-sourceMonoSpacedFont {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

.u-code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  padding: 0.2em 0.4em;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(5, 5, 5, 0.025);
  border-radius: 4px;
  color: #000;
}

.u-textSize28 {
  font-size: 2.8rem !important;
}

.u-sansFont {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.u-textSize26 {
  font-size: 2.6rem !important;
}

.u-textSize24 {
  font-size: 2.4rem !important;
}

.u-textSize22 {
  font-size: 2.2rem !important;
}

.u-textSize20 {
  font-size: 2rem !important;
}

.u-textSize18 {
  font-size: 1.8rem !important;
}

.u-textSize19 {
  font-size: 1.9rem !important;
}

.u-textSize17 {
  font-size: 1.7rem !important;
}

.u-textBaseSize,
.u-textSize16 {
  font-size: 1.6rem !important;
}

.u-textLarger,
.u-textSize15 {
  font-size: 1.5rem !important;
}

.u-textLarge,
.u-textSize14 {
  font-size: 1.4rem !important;
}

.u-textSize13,
.u-textMedium {
  font-size: 1.3rem !important;
}

.u-textSmall,
.u-textSize12 {
  font-size: 12px !important;
}

.u-textXsmall,
.u-textSize11 {
  font-size: 11px !important;
}

.u-textXxsmall,
.u-textSize10 {
  font-size: 10px !important;
}

.u-textSize9 {
  font-size: 9px !important;
}

.u-textXxxsmall,
.u-textSize8 {
  font-size: 8px !important;
}

.u-textSize7 {
  font-size: 7px !important;
}

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

.u-textNormal {
  color: #59626b !important;
  line-height: 1.5;
}

.u-textDefault {
  color: #59626b !important;
}

.u-textMuted {
  color: rgba(88, 97, 105, 0.7);
}

.u-textDisabled {
  color: rgba(88, 97, 105, 0.9) !important;
}

.u-textXmuted {
  color: #adadad !important;
}

.u-textXxmuted {
  color: #d1d1d1 !important;
}

.u-colorLightGrey {
  color: #ccc !important;
}

.u-textImportant {
  color: #d14;
}

.u-textSemiB {
  font-weight: 500;
  color: #333 !important;
  font-style: normal;
}

.u-textSemiBLight {
  font-weight: normal;
  color: #333 !important;
}

.u-textWeightNormal {
  font-weight: normal !important;
}

.u-fontWeight200 {
  font-weight: 200 !important;
}

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

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

.u-fontWeight500 {
  font-weight: 500 !important;
}

.u-fontWeight600 {
  font-weight: 600 !important;
}

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

.u-fontWeight800 {
  font-weight: 800 !important;
}

.u-textB {
  font-weight: 500;
  color: #32383f !important;
}

.u-textWeighted {
  color: #000 !important;
}

.u-textCaps {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.u-weightedSemi {
  font-weight: 500;
}

.u-lineHeight1 {
  line-height: 1 !important;
}

.u-lineHeight1-2 {
  line-height: 1.2 !important;
}

.u-lineHeight1-3 {
  line-height: 1.3 !important;
}

.u-lineHeight1-5 {
  line-height: 1.5 !important;
}

.u-lineHeight1-6 {
  line-height: 1.6 !important;
}

.u-lineHeight1-8 {
  line-height: 1.8 !important;
}

.u-textModule {
  margin: 0 0 2.2em;
  font-size: 1.5rem;
}

.u-textModuleLead {
  padding: 0 0 8px 2px;
  font-size: 13px;
  color: #4b545b;
  line-height: 1.5;
}

.heading-lead + .u-textModuleLead {
  margin-top: -2px;
}

.u-textSubLead {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 27px;
  color: #555;
}

.u-textLead {
  margin-bottom: 24px;
  margin-left: 4px;
  line-height: 27px;
}

.u-circleSeperator {
  display: inline-block;
  margin: 0 3px;
  color: #999;
  line-height: 1;
}

.u-separator {
  display: inline-block;
  line-height: 1;
  color: #C1C1C1 !important;
  margin: 0 0.45em;
}

.u-separator--smallMargin {
  margin: 0 0.25em;
}

.u-clearBg {
  background: #fff !important;
}

.u-alignTop {
  vertical-align: top !important;
}

.u-alignMiddle {
  vertical-align: middle !important;
}

.u-alignBaseline {
  vertical-align: baseline !important;
}

.u-alignBottom {
  vertical-align: bottom !important;
}

.u-objLeft {
  float: left !important;
}

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

.u-textCentered {
  text-align: center !important;
}

.u-textRight {
  text-align: right !important;
}

.u-textLeft {
  text-align: left !important;
}

.u-textBold {
  font-weight: bolder !important;
}

.u-textHighlight {
  background: #FFFFCC;
  padding: 2px 0;
  color: #000;
}

.u-objLeft img,
.u-objRight img {
  display: block;
  max-width: none;
}

.u-flush {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.u-flush-top,
.u-flushTop {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.u-flushBottom,
.u-flush-bottom {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.u-flush-right,
.u-flushRight {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.u-flushLeft,
.u-flush-left {
  left: 0 !important;
  padding-left: 0 !important;
}

.u-noPadding {
  padding: 0 !important;
}

.u-noMargin {
  margin: 0 !important;
}

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

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

.u-marginBottom16 {
  margin-bottom: 16px !important;
}

.u-marginBottom24 {
  margin-bottom: 24px !important;
}

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

/*
 * Default boxShadow utility
 * Use cases: Dashboard Cards / E.g. Modules on a light Grey backgrounds
 */
.u-boxShadow {
  transition: all 0.25s ease-in-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06);
}

.u-boxShadow--withHover {
  transition: all 0.25s ease-in-out;
}
.u-boxShadow--withHover:hover {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06);
}

/*
 * Subtle boxShadow utility
 * Use case: Module on a white background.
 */
.u-boxShadowLight {
  transition: all 0.25s ease-in-out;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.u-boxShadowDispersed {
  box-shadow: 0px 10px 40px -10px rgba(0, 64, 128, 0.4);
}

.u-noBoxShadow {
  box-shadow: none !important;
}

.u-noBoxShadow:focus {
  box-shadow: none !important;
}

/*
 *  Color Utilities
 *  Very light Grey background.
 */
.u-colorBgLightGrey {
  background-color: #FAFBFC !important;
}

.u-colorBgBlack {
  background-color: #000;
}

.u-colorBgGrey {
  background-color: #FAFAFA;
}

.u-colorBgWHite {
  background-color: white !important;
}

.u-colorBgError {
  background-color: #FFF5F5 !important;
}

.u-colorBgGreen {
  background-color: rgb(40, 167, 69) !important;
}

.u-colorBgYellow {
  background-color: #f1e05a !important;
}

.u-colorBgPaleGreen {
  background-color: #76D0BD !important;
}

.u-colorBgAqua {
  background-color: #1CD6CD !important;
}

.u-colorBgCyan {
  background-color: #00E3F7 !important;
}

.u-colorBgLilac {
  background-color: #8985C1 !important;
}

.u-colorBgLightBlue {
  background-color: #67B8DE !important;
}

.u-colorBgBlue {
  background-color: #439BD6 !important;
}

.u-colorBgDarkBlue {
  background-color: #024193 !important;
}

.u-colorBgPurple {
  background-color: #563D7C !important;
}

.u-colorBgPink {
  background-color: #C6538C !important;
}

.u-colorBgBrown {
  background-color: #D19E73 !important;
}

.u-colorBgGrey {
  background-color: #969CA1 !important;
}

.u-colorBgRed {
  background-color: #e01f22 !important;
}

/*
 *  Press-able utility
 *  buttons-like cta's
 */
.u-pressable {
  transition: all 0.15s ease;
}
.u-pressable:hover {
  transform: translateY(-2px);
}
.u-pressable:active, .u-pressable:focus {
  transform: translateY(0);
}

/* ==========================================================================
   utility margins - use with caution
   ========================================================================== */
.u-m-top-0 {
  margin-top: 1rem !important;
}

.u-m-top-1 {
  margin-top: 2rem !important;
}

.u-m-top {
  margin-top: 4rem !important;
}

.u-m-top-2 {
  margin-top: 6rem !important;
}

.u-m-bot-0 {
  margin-bottom: 1rem !important;
}

.u-m-bot {
  margin-bottom: 2rem !important;
}

.u-m-bot-1 {
  margin-bottom: 4rem !important;
}

.u-m-bot-2 {
  margin-bottom: 6rem !important;
}

.u-paddedBottom {
  padding-bottom: 1em;
}

.u-unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* ==========================================================================
   Dividers
   ========================================================================== */
.u-borderTop {
  border-top: 1px solid #EAEAEA;
}

.u-borderBottom {
  border-bottom: 1px solid #EAEAEA;
}

/* New dividers */
.u-dividerTopSolid {
  border-top: 1px solid #ddd;
}

.u-dividerTop {
  border-top: 1px dotted #C4C4C4;
}

.u-dividerBottom {
  border-bottom: 1px dotted #d3d3d3;
}

.u-dividerTopDashed {
  border-top: 1px dashed #C4C4C4;
}

.u-dividerBottomDashed {
  border-bottom: 1px dashed #C4C4C4;
}

.u-noBorder {
  border: none !important;
}

.u-noBorderBottom {
  border-bottom: none !important;
}

.u-noBorderTop {
  border-top: none !important;
}

.u-redBordered {
  border: 2px solid #CC3333 !important;
}

/*
 * Global width utility classes
 */
.u-fullWidth,
.u-width100 {
  width: 100% !important;
  box-sizing: border-box;
}

.u-width90 {
  width: 90% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width90 {
    width: 100% !important;
  }
}

.u-width85 {
  width: 85% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width85 {
    width: 100% !important;
  }
}

.u-width80 {
  width: 80% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width80 {
    width: 100% !important;
  }
}

.u-width75 {
  width: 75% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width75 {
    width: 100% !important;
  }
}

.u-width70 {
  width: 70% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width70 {
    width: 100% !important;
  }
}

.u-width60 {
  width: 60% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width60 {
    width: 100% !important;
  }
}

.u-width66 {
  width: 66.6% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width66 {
    width: 100% !important;
  }
}

.u-width50 {
  width: 50% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width50 {
    width: 100% !important;
  }
}

.u-width55 {
  width: 55% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width55 {
    width: 100% !important;
  }
}

.u-width40 {
  width: 40% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width40 {
    width: 100% !important;
  }
}

.u-width45 {
  width: 45% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width45 {
    width: 100% !important;
  }
}

.u-width30 {
  width: 30% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width30 {
    width: 100% !important;
  }
}

.u-width25 {
  width: 25% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width25 {
    width: 100% !important;
  }
}

.u-width20 {
  width: 20% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width20 {
    width: 100% !important;
  }
}

.u-width18 {
  width: 18% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width18 {
    width: 100% !important;
  }
}

.u-width15 {
  width: 15% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width15 {
    width: 100% !important;
  }
}

.u-width16 {
  width: 16% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width16 {
    width: 100% !important;
  }
}

.u-width13 {
  width: 13% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width13 {
    width: 100% !important;
  }
}

.u-width12 {
  width: 12% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width12 {
    width: 100% !important;
  }
}

.u-width10 {
  width: 10% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width10 {
    width: 100% !important;
  }
}

.u-width5 {
  width: 5% !important;
}
@media only screen and (max-width: 1023px) {
  .u-width5 {
    width: 100% !important;
  }
}

.u-centeredBlock {
  margin: 0 auto;
}

/*
 * Borders
 */
.u-borderedBottom {
  border-bottom: 1px solid #EAEAEA;
}

.u-dottedBorder {
  border-width: 3px;
  border-style: dotted;
  border-color: #ddd;
}
.u-dottedBorder:hover {
  border-color: #cecece;
}
.u-dottedBorder:hover .u-linkOnHover {
  color: #427dc4;
}

/* ==========================================================================
   TYPE
   ========================================================================== */
.abbr {
  border-bottom: 1px dotted #e0e0e0;
  padding-bottom: 1px;
  font-size: 1.1rem;
  cursor: help;
}
.abbr:hover {
  border-bottom: 1px solid #e0e0e0;
}

.u-abbr {
  border-bottom: 1px dotted #D3D3D3;
  cursor: help;
  line-height: 1;
  padding-bottom: 1px;
}

.u-cursorHelp {
  cursor: help;
}

.u-cursorLink {
  cursor: pointer;
}

.u-cursorDisabled {
  cursor: not-allowed;
}

.is-popover {
  border-bottom: 1px dotted #e0e0e0;
  padding-bottom: 1px;
  cursor: help;
}
.is-popover:hover {
  border-bottom: 1px solid #e0e0e0;
}

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

.u-noBorderRad {
  border-radius: 0 !important;
}

.u-opacity0 {
  transition: opacity 0.3s ease-in-out;
  opacity: 0 !important;
}

.u-opacity025 {
  transition: opacity 0.3s ease-in-out;
  opacity: 0.25 !important;
}

.u-opacity05 {
  transition: opacity 0.3s ease-in-out;
  opacity: 0.5 !important;
}

.u-opacity1 {
  opacity: 1 !important;
}

.u-visibilityHidden {
  visibility: hidden;
}

/*
    This class is used to work around a problem with the Monaco Editor
    The editor will not work if you initialize it in a containing
    element that has display: none;
 */
.u-specialHidden {
  overflow: hidden;
  height: 0;
}

.u-overflowHidden {
  overflow: hidden !important;
}

/**
 * Highlighting
 * Utilities
 * ******************************************************
 */
.u-highlight {
  background: #FFFFCC;
  padding: 2px 0;
  font-weight: 500;
  color: #000;
}

.u-highlightSubtle {
  background: #FCF7EA;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 400;
  color: #000;
}

.u-highlightLabel {
  color: #999;
  padding: 2px 2px 2px 1px;
  border-radius: 3px;
}

.u-highlightBlue {
  background-color: rgba(209, 227, 237, 0.35);
  color: #3A72B7;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ==========================================================================
   LAYOUT UTILS
   ========================================================================== */
.l-width-01 {
  display: inline-block;
  width: 36px;
}

.l-width-02 {
  display: inline-block;
  width: 88px;
}

.u-verticalCentered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-fullHeight {
  height: 100%;
}

.u-spaceBetween {
  justify-content: space-between;
}

/* ==========================================================================
   MISC UTILS
   ========================================================================== */
.u-enable-pointer-events {
  pointer-events: all !important;
}

.u-disablePoinerEvents {
  pointer-events: none !important;
}

.u-noOutline {
  outline: none !important;
}

.u-BgWhite {
  background: #fff !important;
  background-color: #fff !important;
}

.u-rotate45 {
  position: absolute;
  z-index: -1;
  left: 20%;
  bottom: 42%;
  font-size: 38px;
  font-weight: 800;
  color: #eee;
  letter-spacing: 2px;
  transform: rotate(-45deg);
}

.u-rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.js_table_row_expander {
  outline: none !important;
}
.js_table_row_expander .Icon {
  transition: 0.25s ease-in-out;
}

.u-expanded .Icon {
  transform: rotate(90deg);
  color: #59626b !important;
}

.u-rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.u-rotate180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.u-iconLeft {
  margin-right: 4px;
}

/* ==========================================================================
   Utility class for product color bars
   ========================================================================== */
.u-ProductBar {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #546168;
  height: 5px;
}

.u-ProductBar--empty {
  background: transparent !important;
}

.u-ProductBar--skycap {
  background: #667eea;
}

.u-ProductBar--maestro {
  background: #9f7aea;
}

.u-ProductBar--rails {
  background: #CC0000;
}

.u-ProductBar--node {
  background: #80BE42;
}

.u-ProductBar--infra {
  background: #303E4D;
}

.u-ProductBar--kubernetes {
  background: #326DE6;
}

.u-ProductBar--prepress {
  background: #047857;
}

/* ==========================================================================
   Hover states
   ========================================================================== */
.u-hoverParent:hover .u-hoverTarget {
  opacity: 1;
}

.u-hoverTarget {
  opacity: 0;
  transition: all 0.3s linear;
}

.u-dragable {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: #999;
  cursor: move;
}

.u-noPaddingMargin {
  margin: 0 !important;
  padding: 0 !important;
}

.u-highlightMenuItem {
  margin-right: 8px;
  font-weight: 600;
  color: black;
  background: #f2e187;
  text-decoration: underline;
}

.u-noTextDecoration {
  text-decoration: none !important;
}

.u-listStyleNone {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.u-listStyleNone li {
  padding-left: 2px !important;
  margin-left: 0 !important;
}

/*
 *   Add this class to hide an element on mobile/phone/620px
 */
@media (max-width: 620px) {
  .u-hideOnMobile {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .u-hideColumnOnMobile {
    visibility: collapse;
  }
}

.u-showOnMobile {
  display: none;
}
@media (max-width: 620px) {
  .u-showOnMobile {
    display: block !important;
  }
}

/*
 *   hide on resolutions < 1024px
 */
@media only screen and (max-width: 1023px) {
  .u-hideOnPortable {
    display: none !important;
  }
}

.u-showOnPortable {
  display: none;
}
@media only screen and (max-width: 1023px) {
  .u-showOnPortable {
    display: block !important;
  }
}

/*
 *  style for ONLY c66 developers
 */
.u-c66Only {
  padding-left: 18px;
  color: #999 !important;
  opacity: 0.75;
}

.u-simpleField {
  display: inline !important;
  width: 20px !important;
  margin: 0 !important;
}

.u-horizontalRule {
  margin: 16px 0;
}

/* utility used to remove spaces from inline-block elements, should be replaced with display: flex now. */
.u-fontSize0 {
  font-size: 0;
}

/* generic back page link */
.u-backLink {
  font-size: 14px;
  padding-bottom: 20px;
}
.u-backLink a:hover {
  text-decoration: none;
}

.u-backLink--secondary {
  margin-top: -14px;
  padding-bottom: 16px;
}

.u-allUnset {
  all: unset !important;
}

.u-whiteSpaceNoWrap {
  white-space: nowrap;
}

/* Generic ▶ expander utility */
.u-expanderArrow {
  color: inherit;
  cursor: pointer;
}
.u-expanderArrow:hover {
  color: inherit;
}

.u-expanderArrow::before {
  position: relative;
  top: -1px;
  content: "";
  display: inline-block;
  margin-right: 5px;
  content: "▶";
  font-size: 11px;
  transition: transform 0.15s;
}

.u-expanderArrow.open::before {
  position: relative;
  top: 0;
  transform: rotateY(0deg) rotate(90deg);
  /* needs Y at 0 deg to behave properly*/
}

.u-positionSticky {
  position: sticky;
  z-index: 2;
}

.u-maskFade {
  mask-image: linear-gradient(to bottom, transparent 0px, black 24px, black calc(100% - 16px), transparent 100%);
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* Dark Theme Overides
   ========================================================================== */
.Module--dark .u-textMuted {
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   File History diff
   ========================================================================== */
.commit-msg {
  color: #333;
  margin-bottom: 12px;
  font-size: 1.2rem !important;
  font-style: italic;
}

.diff {
  margin-top: 6px;
}
.diff ul {
  margin-left: 0;
  list-style: none;
  color: #555;
}
.diff ul li {
  font-size: 1.2rem;
  font-family: Monaco, "DejaVu Sans Mono", Consolas, "Liberation Mono", "Courier New", Courier, monospace;
  padding: 1px 8px;
  margin: 0 0;
}
.diff ul strong {
  font-weight: normal;
}
.diff ul .ins {
  background: #edfff1;
}
.diff ul .ins .symbol {
  color: rgb(40, 167, 69);
}
.diff ul ins {
  text-decoration: none !important;
  color: #222;
}
.diff ul .del {
  background: #FFEBE9;
}
.diff ul .del .symbol {
  color: rgb(203, 36, 49);
}
.diff ul del {
  color: #000;
  text-decoration: none !important;
}
.diff ul .symbol {
  color: #555;
  padding-right: 6px;
  font-size: 1.3rem;
}
.diff ul .unchanged {
  padding-left: 22px;
}

body[data-action=history] .mod-article-pri:last-child .commit-division,
body[data-action=history] .mod-article-pri:only-child .commit-division {
  border-bottom: none;
}

/*  -------------------------------------------------------
    Positioning hack for left padding of unchanged margin
    equalise the space between moz and webkit
    ------------------------------------------------------- */
@-moz-document url-prefix() {
  .unchanged {
    padding-left: 16px !important;
  }
}
.iti {
  position: relative;
  display: inline-block;
}
.iti * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.iti__hide {
  display: none;
}
.iti__v-hide {
  visibility: hidden;
}
.iti input, .iti input[type=text], .iti input[type=tel] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: 36px;
  margin-right: 0;
}
.iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}
.iti__selected-flag {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px 0 8px;
}
.iti__arrow {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
}
.iti__arrow--up {
  border-top: none;
  border-bottom: 4px solid #555;
}
.iti__country-list {
  position: absolute;
  z-index: 2;
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 0 -1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #CCC;
  white-space: nowrap;
  max-height: 200px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.iti__country-list--dropup {
  bottom: 100%;
  margin-bottom: -1px;
}
@media (max-width: 500px) {
  .iti__country-list {
    white-space: normal;
  }
}
.iti__flag-box {
  display: inline-block;
  width: 20px;
}
.iti__divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #CCC;
}
.iti__country {
  padding: 5px 10px;
  outline: none;
}
.iti__dial-code {
  color: #999;
}
.iti__country.iti__highlight {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti__flag-box, .iti__country-name, .iti__dial-code {
  vertical-align: middle;
}
.iti__flag-box, .iti__country-name {
  margin-right: 6px;
}
.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
  right: auto;
  left: 0;
}
.iti--allow-dropdown .iti__flag-container:hover {
  cursor: pointer;
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
  cursor: default;
}
.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
  background-color: transparent;
}
.iti--separate-dial-code .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti--separate-dial-code .iti__selected-dial-code {
  margin-left: 6px;
}
.iti--container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}
.iti--container:hover {
  cursor: pointer;
}

.iti-mobile .iti--container {
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
  position: fixed;
}
.iti-mobile .iti__country-list {
  max-height: 100%;
  width: 100%;
}
.iti-mobile .iti__country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti__flag {
  width: 20px;
}
.iti__flag.iti__be {
  width: 18px;
}
.iti__flag.iti__ch {
  width: 15px;
}
.iti__flag.iti__mc {
  width: 19px;
}
.iti__flag.iti__ne {
  width: 18px;
}
.iti__flag.iti__np {
  width: 13px;
}
.iti__flag.iti__va {
  width: 15px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-size: 5652px 15px;
  }
}
.iti__flag.iti__ac {
  height: 10px;
  background-position: 0px 0px;
}
.iti__flag.iti__ad {
  height: 14px;
  background-position: -22px 0px;
}
.iti__flag.iti__ae {
  height: 10px;
  background-position: -44px 0px;
}
.iti__flag.iti__af {
  height: 14px;
  background-position: -66px 0px;
}
.iti__flag.iti__ag {
  height: 14px;
  background-position: -88px 0px;
}
.iti__flag.iti__ai {
  height: 10px;
  background-position: -110px 0px;
}
.iti__flag.iti__al {
  height: 15px;
  background-position: -132px 0px;
}
.iti__flag.iti__am {
  height: 10px;
  background-position: -154px 0px;
}
.iti__flag.iti__ao {
  height: 14px;
  background-position: -176px 0px;
}
.iti__flag.iti__aq {
  height: 14px;
  background-position: -198px 0px;
}
.iti__flag.iti__ar {
  height: 13px;
  background-position: -220px 0px;
}
.iti__flag.iti__as {
  height: 10px;
  background-position: -242px 0px;
}
.iti__flag.iti__at {
  height: 14px;
  background-position: -264px 0px;
}
.iti__flag.iti__au {
  height: 10px;
  background-position: -286px 0px;
}
.iti__flag.iti__aw {
  height: 14px;
  background-position: -308px 0px;
}
.iti__flag.iti__ax {
  height: 13px;
  background-position: -330px 0px;
}
.iti__flag.iti__az {
  height: 10px;
  background-position: -352px 0px;
}
.iti__flag.iti__ba {
  height: 10px;
  background-position: -374px 0px;
}
.iti__flag.iti__bb {
  height: 14px;
  background-position: -396px 0px;
}
.iti__flag.iti__bd {
  height: 12px;
  background-position: -418px 0px;
}
.iti__flag.iti__be {
  height: 15px;
  background-position: -440px 0px;
}
.iti__flag.iti__bf {
  height: 14px;
  background-position: -460px 0px;
}
.iti__flag.iti__bg {
  height: 12px;
  background-position: -482px 0px;
}
.iti__flag.iti__bh {
  height: 12px;
  background-position: -504px 0px;
}
.iti__flag.iti__bi {
  height: 12px;
  background-position: -526px 0px;
}
.iti__flag.iti__bj {
  height: 14px;
  background-position: -548px 0px;
}
.iti__flag.iti__bl {
  height: 14px;
  background-position: -570px 0px;
}
.iti__flag.iti__bm {
  height: 10px;
  background-position: -592px 0px;
}
.iti__flag.iti__bn {
  height: 10px;
  background-position: -614px 0px;
}
.iti__flag.iti__bo {
  height: 14px;
  background-position: -636px 0px;
}
.iti__flag.iti__bq {
  height: 14px;
  background-position: -658px 0px;
}
.iti__flag.iti__br {
  height: 14px;
  background-position: -680px 0px;
}
.iti__flag.iti__bs {
  height: 10px;
  background-position: -702px 0px;
}
.iti__flag.iti__bt {
  height: 14px;
  background-position: -724px 0px;
}
.iti__flag.iti__bv {
  height: 15px;
  background-position: -746px 0px;
}
.iti__flag.iti__bw {
  height: 14px;
  background-position: -768px 0px;
}
.iti__flag.iti__by {
  height: 10px;
  background-position: -790px 0px;
}
.iti__flag.iti__bz {
  height: 14px;
  background-position: -812px 0px;
}
.iti__flag.iti__ca {
  height: 10px;
  background-position: -834px 0px;
}
.iti__flag.iti__cc {
  height: 10px;
  background-position: -856px 0px;
}
.iti__flag.iti__cd {
  height: 15px;
  background-position: -878px 0px;
}
.iti__flag.iti__cf {
  height: 14px;
  background-position: -900px 0px;
}
.iti__flag.iti__cg {
  height: 14px;
  background-position: -922px 0px;
}
.iti__flag.iti__ch {
  height: 15px;
  background-position: -944px 0px;
}
.iti__flag.iti__ci {
  height: 14px;
  background-position: -961px 0px;
}
.iti__flag.iti__ck {
  height: 10px;
  background-position: -983px 0px;
}
.iti__flag.iti__cl {
  height: 14px;
  background-position: -1005px 0px;
}
.iti__flag.iti__cm {
  height: 14px;
  background-position: -1027px 0px;
}
.iti__flag.iti__cn {
  height: 14px;
  background-position: -1049px 0px;
}
.iti__flag.iti__co {
  height: 14px;
  background-position: -1071px 0px;
}
.iti__flag.iti__cp {
  height: 14px;
  background-position: -1093px 0px;
}
.iti__flag.iti__cr {
  height: 12px;
  background-position: -1115px 0px;
}
.iti__flag.iti__cu {
  height: 10px;
  background-position: -1137px 0px;
}
.iti__flag.iti__cv {
  height: 12px;
  background-position: -1159px 0px;
}
.iti__flag.iti__cw {
  height: 14px;
  background-position: -1181px 0px;
}
.iti__flag.iti__cx {
  height: 10px;
  background-position: -1203px 0px;
}
.iti__flag.iti__cy {
  height: 14px;
  background-position: -1225px 0px;
}
.iti__flag.iti__cz {
  height: 14px;
  background-position: -1247px 0px;
}
.iti__flag.iti__de {
  height: 12px;
  background-position: -1269px 0px;
}
.iti__flag.iti__dg {
  height: 10px;
  background-position: -1291px 0px;
}
.iti__flag.iti__dj {
  height: 14px;
  background-position: -1313px 0px;
}
.iti__flag.iti__dk {
  height: 15px;
  background-position: -1335px 0px;
}
.iti__flag.iti__dm {
  height: 10px;
  background-position: -1357px 0px;
}
.iti__flag.iti__do {
  height: 14px;
  background-position: -1379px 0px;
}
.iti__flag.iti__dz {
  height: 14px;
  background-position: -1401px 0px;
}
.iti__flag.iti__ea {
  height: 14px;
  background-position: -1423px 0px;
}
.iti__flag.iti__ec {
  height: 14px;
  background-position: -1445px 0px;
}
.iti__flag.iti__ee {
  height: 13px;
  background-position: -1467px 0px;
}
.iti__flag.iti__eg {
  height: 14px;
  background-position: -1489px 0px;
}
.iti__flag.iti__eh {
  height: 10px;
  background-position: -1511px 0px;
}
.iti__flag.iti__er {
  height: 10px;
  background-position: -1533px 0px;
}
.iti__flag.iti__es {
  height: 14px;
  background-position: -1555px 0px;
}
.iti__flag.iti__et {
  height: 10px;
  background-position: -1577px 0px;
}
.iti__flag.iti__eu {
  height: 14px;
  background-position: -1599px 0px;
}
.iti__flag.iti__fi {
  height: 12px;
  background-position: -1621px 0px;
}
.iti__flag.iti__fj {
  height: 10px;
  background-position: -1643px 0px;
}
.iti__flag.iti__fk {
  height: 10px;
  background-position: -1665px 0px;
}
.iti__flag.iti__fm {
  height: 11px;
  background-position: -1687px 0px;
}
.iti__flag.iti__fo {
  height: 15px;
  background-position: -1709px 0px;
}
.iti__flag.iti__fr {
  height: 14px;
  background-position: -1731px 0px;
}
.iti__flag.iti__ga {
  height: 15px;
  background-position: -1753px 0px;
}
.iti__flag.iti__gb {
  height: 10px;
  background-position: -1775px 0px;
}
.iti__flag.iti__gd {
  height: 12px;
  background-position: -1797px 0px;
}
.iti__flag.iti__ge {
  height: 14px;
  background-position: -1819px 0px;
}
.iti__flag.iti__gf {
  height: 14px;
  background-position: -1841px 0px;
}
.iti__flag.iti__gg {
  height: 14px;
  background-position: -1863px 0px;
}
.iti__flag.iti__gh {
  height: 14px;
  background-position: -1885px 0px;
}
.iti__flag.iti__gi {
  height: 10px;
  background-position: -1907px 0px;
}
.iti__flag.iti__gl {
  height: 14px;
  background-position: -1929px 0px;
}
.iti__flag.iti__gm {
  height: 14px;
  background-position: -1951px 0px;
}
.iti__flag.iti__gn {
  height: 14px;
  background-position: -1973px 0px;
}
.iti__flag.iti__gp {
  height: 14px;
  background-position: -1995px 0px;
}
.iti__flag.iti__gq {
  height: 14px;
  background-position: -2017px 0px;
}
.iti__flag.iti__gr {
  height: 14px;
  background-position: -2039px 0px;
}
.iti__flag.iti__gs {
  height: 10px;
  background-position: -2061px 0px;
}
.iti__flag.iti__gt {
  height: 13px;
  background-position: -2083px 0px;
}
.iti__flag.iti__gu {
  height: 11px;
  background-position: -2105px 0px;
}
.iti__flag.iti__gw {
  height: 10px;
  background-position: -2127px 0px;
}
.iti__flag.iti__gy {
  height: 12px;
  background-position: -2149px 0px;
}
.iti__flag.iti__hk {
  height: 14px;
  background-position: -2171px 0px;
}
.iti__flag.iti__hm {
  height: 10px;
  background-position: -2193px 0px;
}
.iti__flag.iti__hn {
  height: 10px;
  background-position: -2215px 0px;
}
.iti__flag.iti__hr {
  height: 10px;
  background-position: -2237px 0px;
}
.iti__flag.iti__ht {
  height: 12px;
  background-position: -2259px 0px;
}
.iti__flag.iti__hu {
  height: 10px;
  background-position: -2281px 0px;
}
.iti__flag.iti__ic {
  height: 14px;
  background-position: -2303px 0px;
}
.iti__flag.iti__id {
  height: 14px;
  background-position: -2325px 0px;
}
.iti__flag.iti__ie {
  height: 10px;
  background-position: -2347px 0px;
}
.iti__flag.iti__il {
  height: 15px;
  background-position: -2369px 0px;
}
.iti__flag.iti__im {
  height: 10px;
  background-position: -2391px 0px;
}
.iti__flag.iti__in {
  height: 14px;
  background-position: -2413px 0px;
}
.iti__flag.iti__io {
  height: 10px;
  background-position: -2435px 0px;
}
.iti__flag.iti__iq {
  height: 14px;
  background-position: -2457px 0px;
}
.iti__flag.iti__ir {
  height: 12px;
  background-position: -2479px 0px;
}
.iti__flag.iti__is {
  height: 15px;
  background-position: -2501px 0px;
}
.iti__flag.iti__it {
  height: 14px;
  background-position: -2523px 0px;
}
.iti__flag.iti__je {
  height: 12px;
  background-position: -2545px 0px;
}
.iti__flag.iti__jm {
  height: 10px;
  background-position: -2567px 0px;
}
.iti__flag.iti__jo {
  height: 10px;
  background-position: -2589px 0px;
}
.iti__flag.iti__jp {
  height: 14px;
  background-position: -2611px 0px;
}
.iti__flag.iti__ke {
  height: 14px;
  background-position: -2633px 0px;
}
.iti__flag.iti__kg {
  height: 12px;
  background-position: -2655px 0px;
}
.iti__flag.iti__kh {
  height: 13px;
  background-position: -2677px 0px;
}
.iti__flag.iti__ki {
  height: 10px;
  background-position: -2699px 0px;
}
.iti__flag.iti__km {
  height: 12px;
  background-position: -2721px 0px;
}
.iti__flag.iti__kn {
  height: 14px;
  background-position: -2743px 0px;
}
.iti__flag.iti__kp {
  height: 10px;
  background-position: -2765px 0px;
}
.iti__flag.iti__kr {
  height: 14px;
  background-position: -2787px 0px;
}
.iti__flag.iti__kw {
  height: 10px;
  background-position: -2809px 0px;
}
.iti__flag.iti__ky {
  height: 10px;
  background-position: -2831px 0px;
}
.iti__flag.iti__kz {
  height: 10px;
  background-position: -2853px 0px;
}
.iti__flag.iti__la {
  height: 14px;
  background-position: -2875px 0px;
}
.iti__flag.iti__lb {
  height: 14px;
  background-position: -2897px 0px;
}
.iti__flag.iti__lc {
  height: 10px;
  background-position: -2919px 0px;
}
.iti__flag.iti__li {
  height: 12px;
  background-position: -2941px 0px;
}
.iti__flag.iti__lk {
  height: 10px;
  background-position: -2963px 0px;
}
.iti__flag.iti__lr {
  height: 11px;
  background-position: -2985px 0px;
}
.iti__flag.iti__ls {
  height: 14px;
  background-position: -3007px 0px;
}
.iti__flag.iti__lt {
  height: 12px;
  background-position: -3029px 0px;
}
.iti__flag.iti__lu {
  height: 12px;
  background-position: -3051px 0px;
}
.iti__flag.iti__lv {
  height: 10px;
  background-position: -3073px 0px;
}
.iti__flag.iti__ly {
  height: 10px;
  background-position: -3095px 0px;
}
.iti__flag.iti__ma {
  height: 14px;
  background-position: -3117px 0px;
}
.iti__flag.iti__mc {
  height: 15px;
  background-position: -3139px 0px;
}
.iti__flag.iti__md {
  height: 10px;
  background-position: -3160px 0px;
}
.iti__flag.iti__me {
  height: 10px;
  background-position: -3182px 0px;
}
.iti__flag.iti__mf {
  height: 14px;
  background-position: -3204px 0px;
}
.iti__flag.iti__mg {
  height: 14px;
  background-position: -3226px 0px;
}
.iti__flag.iti__mh {
  height: 11px;
  background-position: -3248px 0px;
}
.iti__flag.iti__mk {
  height: 10px;
  background-position: -3270px 0px;
}
.iti__flag.iti__ml {
  height: 14px;
  background-position: -3292px 0px;
}
.iti__flag.iti__mm {
  height: 14px;
  background-position: -3314px 0px;
}
.iti__flag.iti__mn {
  height: 10px;
  background-position: -3336px 0px;
}
.iti__flag.iti__mo {
  height: 14px;
  background-position: -3358px 0px;
}
.iti__flag.iti__mp {
  height: 10px;
  background-position: -3380px 0px;
}
.iti__flag.iti__mq {
  height: 14px;
  background-position: -3402px 0px;
}
.iti__flag.iti__mr {
  height: 14px;
  background-position: -3424px 0px;
}
.iti__flag.iti__ms {
  height: 10px;
  background-position: -3446px 0px;
}
.iti__flag.iti__mt {
  height: 14px;
  background-position: -3468px 0px;
}
.iti__flag.iti__mu {
  height: 14px;
  background-position: -3490px 0px;
}
.iti__flag.iti__mv {
  height: 14px;
  background-position: -3512px 0px;
}
.iti__flag.iti__mw {
  height: 14px;
  background-position: -3534px 0px;
}
.iti__flag.iti__mx {
  height: 12px;
  background-position: -3556px 0px;
}
.iti__flag.iti__my {
  height: 10px;
  background-position: -3578px 0px;
}
.iti__flag.iti__mz {
  height: 14px;
  background-position: -3600px 0px;
}
.iti__flag.iti__na {
  height: 14px;
  background-position: -3622px 0px;
}
.iti__flag.iti__nc {
  height: 10px;
  background-position: -3644px 0px;
}
.iti__flag.iti__ne {
  height: 15px;
  background-position: -3666px 0px;
}
.iti__flag.iti__nf {
  height: 10px;
  background-position: -3686px 0px;
}
.iti__flag.iti__ng {
  height: 10px;
  background-position: -3708px 0px;
}
.iti__flag.iti__ni {
  height: 12px;
  background-position: -3730px 0px;
}
.iti__flag.iti__nl {
  height: 14px;
  background-position: -3752px 0px;
}
.iti__flag.iti__no {
  height: 15px;
  background-position: -3774px 0px;
}
.iti__flag.iti__np {
  height: 15px;
  background-position: -3796px 0px;
}
.iti__flag.iti__nr {
  height: 10px;
  background-position: -3811px 0px;
}
.iti__flag.iti__nu {
  height: 10px;
  background-position: -3833px 0px;
}
.iti__flag.iti__nz {
  height: 10px;
  background-position: -3855px 0px;
}
.iti__flag.iti__om {
  height: 10px;
  background-position: -3877px 0px;
}
.iti__flag.iti__pa {
  height: 14px;
  background-position: -3899px 0px;
}
.iti__flag.iti__pe {
  height: 14px;
  background-position: -3921px 0px;
}
.iti__flag.iti__pf {
  height: 14px;
  background-position: -3943px 0px;
}
.iti__flag.iti__pg {
  height: 15px;
  background-position: -3965px 0px;
}
.iti__flag.iti__ph {
  height: 10px;
  background-position: -3987px 0px;
}
.iti__flag.iti__pk {
  height: 14px;
  background-position: -4009px 0px;
}
.iti__flag.iti__pl {
  height: 13px;
  background-position: -4031px 0px;
}
.iti__flag.iti__pm {
  height: 14px;
  background-position: -4053px 0px;
}
.iti__flag.iti__pn {
  height: 10px;
  background-position: -4075px 0px;
}
.iti__flag.iti__pr {
  height: 14px;
  background-position: -4097px 0px;
}
.iti__flag.iti__ps {
  height: 10px;
  background-position: -4119px 0px;
}
.iti__flag.iti__pt {
  height: 14px;
  background-position: -4141px 0px;
}
.iti__flag.iti__pw {
  height: 13px;
  background-position: -4163px 0px;
}
.iti__flag.iti__py {
  height: 11px;
  background-position: -4185px 0px;
}
.iti__flag.iti__qa {
  height: 8px;
  background-position: -4207px 0px;
}
.iti__flag.iti__re {
  height: 14px;
  background-position: -4229px 0px;
}
.iti__flag.iti__ro {
  height: 14px;
  background-position: -4251px 0px;
}
.iti__flag.iti__rs {
  height: 14px;
  background-position: -4273px 0px;
}
.iti__flag.iti__ru {
  height: 14px;
  background-position: -4295px 0px;
}
.iti__flag.iti__rw {
  height: 14px;
  background-position: -4317px 0px;
}
.iti__flag.iti__sa {
  height: 14px;
  background-position: -4339px 0px;
}
.iti__flag.iti__sb {
  height: 10px;
  background-position: -4361px 0px;
}
.iti__flag.iti__sc {
  height: 10px;
  background-position: -4383px 0px;
}
.iti__flag.iti__sd {
  height: 10px;
  background-position: -4405px 0px;
}
.iti__flag.iti__se {
  height: 13px;
  background-position: -4427px 0px;
}
.iti__flag.iti__sg {
  height: 14px;
  background-position: -4449px 0px;
}
.iti__flag.iti__sh {
  height: 10px;
  background-position: -4471px 0px;
}
.iti__flag.iti__si {
  height: 10px;
  background-position: -4493px 0px;
}
.iti__flag.iti__sj {
  height: 15px;
  background-position: -4515px 0px;
}
.iti__flag.iti__sk {
  height: 14px;
  background-position: -4537px 0px;
}
.iti__flag.iti__sl {
  height: 14px;
  background-position: -4559px 0px;
}
.iti__flag.iti__sm {
  height: 15px;
  background-position: -4581px 0px;
}
.iti__flag.iti__sn {
  height: 14px;
  background-position: -4603px 0px;
}
.iti__flag.iti__so {
  height: 14px;
  background-position: -4625px 0px;
}
.iti__flag.iti__sr {
  height: 14px;
  background-position: -4647px 0px;
}
.iti__flag.iti__ss {
  height: 10px;
  background-position: -4669px 0px;
}
.iti__flag.iti__st {
  height: 10px;
  background-position: -4691px 0px;
}
.iti__flag.iti__sv {
  height: 12px;
  background-position: -4713px 0px;
}
.iti__flag.iti__sx {
  height: 14px;
  background-position: -4735px 0px;
}
.iti__flag.iti__sy {
  height: 14px;
  background-position: -4757px 0px;
}
.iti__flag.iti__sz {
  height: 14px;
  background-position: -4779px 0px;
}
.iti__flag.iti__ta {
  height: 10px;
  background-position: -4801px 0px;
}
.iti__flag.iti__tc {
  height: 10px;
  background-position: -4823px 0px;
}
.iti__flag.iti__td {
  height: 14px;
  background-position: -4845px 0px;
}
.iti__flag.iti__tf {
  height: 14px;
  background-position: -4867px 0px;
}
.iti__flag.iti__tg {
  height: 13px;
  background-position: -4889px 0px;
}
.iti__flag.iti__th {
  height: 14px;
  background-position: -4911px 0px;
}
.iti__flag.iti__tj {
  height: 10px;
  background-position: -4933px 0px;
}
.iti__flag.iti__tk {
  height: 10px;
  background-position: -4955px 0px;
}
.iti__flag.iti__tl {
  height: 10px;
  background-position: -4977px 0px;
}
.iti__flag.iti__tm {
  height: 14px;
  background-position: -4999px 0px;
}
.iti__flag.iti__tn {
  height: 14px;
  background-position: -5021px 0px;
}
.iti__flag.iti__to {
  height: 10px;
  background-position: -5043px 0px;
}
.iti__flag.iti__tr {
  height: 14px;
  background-position: -5065px 0px;
}
.iti__flag.iti__tt {
  height: 12px;
  background-position: -5087px 0px;
}
.iti__flag.iti__tv {
  height: 10px;
  background-position: -5109px 0px;
}
.iti__flag.iti__tw {
  height: 14px;
  background-position: -5131px 0px;
}
.iti__flag.iti__tz {
  height: 14px;
  background-position: -5153px 0px;
}
.iti__flag.iti__ua {
  height: 14px;
  background-position: -5175px 0px;
}
.iti__flag.iti__ug {
  height: 14px;
  background-position: -5197px 0px;
}
.iti__flag.iti__um {
  height: 11px;
  background-position: -5219px 0px;
}
.iti__flag.iti__un {
  height: 14px;
  background-position: -5241px 0px;
}
.iti__flag.iti__us {
  height: 11px;
  background-position: -5263px 0px;
}
.iti__flag.iti__uy {
  height: 14px;
  background-position: -5285px 0px;
}
.iti__flag.iti__uz {
  height: 10px;
  background-position: -5307px 0px;
}
.iti__flag.iti__va {
  height: 15px;
  background-position: -5329px 0px;
}
.iti__flag.iti__vc {
  height: 14px;
  background-position: -5346px 0px;
}
.iti__flag.iti__ve {
  height: 14px;
  background-position: -5368px 0px;
}
.iti__flag.iti__vg {
  height: 10px;
  background-position: -5390px 0px;
}
.iti__flag.iti__vi {
  height: 14px;
  background-position: -5412px 0px;
}
.iti__flag.iti__vn {
  height: 14px;
  background-position: -5434px 0px;
}
.iti__flag.iti__vu {
  height: 12px;
  background-position: -5456px 0px;
}
.iti__flag.iti__wf {
  height: 14px;
  background-position: -5478px 0px;
}
.iti__flag.iti__ws {
  height: 10px;
  background-position: -5500px 0px;
}
.iti__flag.iti__xk {
  height: 15px;
  background-position: -5522px 0px;
}
.iti__flag.iti__ye {
  height: 14px;
  background-position: -5544px 0px;
}
.iti__flag.iti__yt {
  height: 14px;
  background-position: -5566px 0px;
}
.iti__flag.iti__za {
  height: 14px;
  background-position: -5588px 0px;
}
.iti__flag.iti__zm {
  height: 14px;
  background-position: -5610px 0px;
}
.iti__flag.iti__zw {
  height: 10px;
  background-position: -5632px 0px;
}

.iti__flag {
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("/images/flags/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("/images/flags/flags@2x.png");
  }
}

.iti__flag.iti__np {
  background-color: transparent;
}

.iti {
  width: 100% !important;
}

.iti__flag {
  width: 20px;
}
.iti__flag.iti__be {
  width: 18px;
}
.iti__flag.iti__ch {
  width: 15px;
}
.iti__flag.iti__mc {
  width: 19px;
}
.iti__flag.iti__ne {
  width: 18px;
}
.iti__flag.iti__np {
  width: 13px;
}
.iti__flag.iti__va {
  width: 15px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-size: 5652px 15px;
  }
}
.iti__flag.iti__ac {
  height: 10px;
  background-position: 0px 0px;
}
.iti__flag.iti__ad {
  height: 14px;
  background-position: -22px 0px;
}
.iti__flag.iti__ae {
  height: 10px;
  background-position: -44px 0px;
}
.iti__flag.iti__af {
  height: 14px;
  background-position: -66px 0px;
}
.iti__flag.iti__ag {
  height: 14px;
  background-position: -88px 0px;
}
.iti__flag.iti__ai {
  height: 10px;
  background-position: -110px 0px;
}
.iti__flag.iti__al {
  height: 15px;
  background-position: -132px 0px;
}
.iti__flag.iti__am {
  height: 10px;
  background-position: -154px 0px;
}
.iti__flag.iti__ao {
  height: 14px;
  background-position: -176px 0px;
}
.iti__flag.iti__aq {
  height: 14px;
  background-position: -198px 0px;
}
.iti__flag.iti__ar {
  height: 13px;
  background-position: -220px 0px;
}
.iti__flag.iti__as {
  height: 10px;
  background-position: -242px 0px;
}
.iti__flag.iti__at {
  height: 14px;
  background-position: -264px 0px;
}
.iti__flag.iti__au {
  height: 10px;
  background-position: -286px 0px;
}
.iti__flag.iti__aw {
  height: 14px;
  background-position: -308px 0px;
}
.iti__flag.iti__ax {
  height: 13px;
  background-position: -330px 0px;
}
.iti__flag.iti__az {
  height: 10px;
  background-position: -352px 0px;
}
.iti__flag.iti__ba {
  height: 10px;
  background-position: -374px 0px;
}
.iti__flag.iti__bb {
  height: 14px;
  background-position: -396px 0px;
}
.iti__flag.iti__bd {
  height: 12px;
  background-position: -418px 0px;
}
.iti__flag.iti__be {
  height: 15px;
  background-position: -440px 0px;
}
.iti__flag.iti__bf {
  height: 14px;
  background-position: -460px 0px;
}
.iti__flag.iti__bg {
  height: 12px;
  background-position: -482px 0px;
}
.iti__flag.iti__bh {
  height: 12px;
  background-position: -504px 0px;
}
.iti__flag.iti__bi {
  height: 12px;
  background-position: -526px 0px;
}
.iti__flag.iti__bj {
  height: 14px;
  background-position: -548px 0px;
}
.iti__flag.iti__bl {
  height: 14px;
  background-position: -570px 0px;
}
.iti__flag.iti__bm {
  height: 10px;
  background-position: -592px 0px;
}
.iti__flag.iti__bn {
  height: 10px;
  background-position: -614px 0px;
}
.iti__flag.iti__bo {
  height: 14px;
  background-position: -636px 0px;
}
.iti__flag.iti__bq {
  height: 14px;
  background-position: -658px 0px;
}
.iti__flag.iti__br {
  height: 14px;
  background-position: -680px 0px;
}
.iti__flag.iti__bs {
  height: 10px;
  background-position: -702px 0px;
}
.iti__flag.iti__bt {
  height: 14px;
  background-position: -724px 0px;
}
.iti__flag.iti__bv {
  height: 15px;
  background-position: -746px 0px;
}
.iti__flag.iti__bw {
  height: 14px;
  background-position: -768px 0px;
}
.iti__flag.iti__by {
  height: 10px;
  background-position: -790px 0px;
}
.iti__flag.iti__bz {
  height: 14px;
  background-position: -812px 0px;
}
.iti__flag.iti__ca {
  height: 10px;
  background-position: -834px 0px;
}
.iti__flag.iti__cc {
  height: 10px;
  background-position: -856px 0px;
}
.iti__flag.iti__cd {
  height: 15px;
  background-position: -878px 0px;
}
.iti__flag.iti__cf {
  height: 14px;
  background-position: -900px 0px;
}
.iti__flag.iti__cg {
  height: 14px;
  background-position: -922px 0px;
}
.iti__flag.iti__ch {
  height: 15px;
  background-position: -944px 0px;
}
.iti__flag.iti__ci {
  height: 14px;
  background-position: -961px 0px;
}
.iti__flag.iti__ck {
  height: 10px;
  background-position: -983px 0px;
}
.iti__flag.iti__cl {
  height: 14px;
  background-position: -1005px 0px;
}
.iti__flag.iti__cm {
  height: 14px;
  background-position: -1027px 0px;
}
.iti__flag.iti__cn {
  height: 14px;
  background-position: -1049px 0px;
}
.iti__flag.iti__co {
  height: 14px;
  background-position: -1071px 0px;
}
.iti__flag.iti__cp {
  height: 14px;
  background-position: -1093px 0px;
}
.iti__flag.iti__cr {
  height: 12px;
  background-position: -1115px 0px;
}
.iti__flag.iti__cu {
  height: 10px;
  background-position: -1137px 0px;
}
.iti__flag.iti__cv {
  height: 12px;
  background-position: -1159px 0px;
}
.iti__flag.iti__cw {
  height: 14px;
  background-position: -1181px 0px;
}
.iti__flag.iti__cx {
  height: 10px;
  background-position: -1203px 0px;
}
.iti__flag.iti__cy {
  height: 14px;
  background-position: -1225px 0px;
}
.iti__flag.iti__cz {
  height: 14px;
  background-position: -1247px 0px;
}
.iti__flag.iti__de {
  height: 12px;
  background-position: -1269px 0px;
}
.iti__flag.iti__dg {
  height: 10px;
  background-position: -1291px 0px;
}
.iti__flag.iti__dj {
  height: 14px;
  background-position: -1313px 0px;
}
.iti__flag.iti__dk {
  height: 15px;
  background-position: -1335px 0px;
}
.iti__flag.iti__dm {
  height: 10px;
  background-position: -1357px 0px;
}
.iti__flag.iti__do {
  height: 14px;
  background-position: -1379px 0px;
}
.iti__flag.iti__dz {
  height: 14px;
  background-position: -1401px 0px;
}
.iti__flag.iti__ea {
  height: 14px;
  background-position: -1423px 0px;
}
.iti__flag.iti__ec {
  height: 14px;
  background-position: -1445px 0px;
}
.iti__flag.iti__ee {
  height: 13px;
  background-position: -1467px 0px;
}
.iti__flag.iti__eg {
  height: 14px;
  background-position: -1489px 0px;
}
.iti__flag.iti__eh {
  height: 10px;
  background-position: -1511px 0px;
}
.iti__flag.iti__er {
  height: 10px;
  background-position: -1533px 0px;
}
.iti__flag.iti__es {
  height: 14px;
  background-position: -1555px 0px;
}
.iti__flag.iti__et {
  height: 10px;
  background-position: -1577px 0px;
}
.iti__flag.iti__eu {
  height: 14px;
  background-position: -1599px 0px;
}
.iti__flag.iti__fi {
  height: 12px;
  background-position: -1621px 0px;
}
.iti__flag.iti__fj {
  height: 10px;
  background-position: -1643px 0px;
}
.iti__flag.iti__fk {
  height: 10px;
  background-position: -1665px 0px;
}
.iti__flag.iti__fm {
  height: 11px;
  background-position: -1687px 0px;
}
.iti__flag.iti__fo {
  height: 15px;
  background-position: -1709px 0px;
}
.iti__flag.iti__fr {
  height: 14px;
  background-position: -1731px 0px;
}
.iti__flag.iti__ga {
  height: 15px;
  background-position: -1753px 0px;
}
.iti__flag.iti__gb {
  height: 10px;
  background-position: -1775px 0px;
}
.iti__flag.iti__gd {
  height: 12px;
  background-position: -1797px 0px;
}
.iti__flag.iti__ge {
  height: 14px;
  background-position: -1819px 0px;
}
.iti__flag.iti__gf {
  height: 14px;
  background-position: -1841px 0px;
}
.iti__flag.iti__gg {
  height: 14px;
  background-position: -1863px 0px;
}
.iti__flag.iti__gh {
  height: 14px;
  background-position: -1885px 0px;
}
.iti__flag.iti__gi {
  height: 10px;
  background-position: -1907px 0px;
}
.iti__flag.iti__gl {
  height: 14px;
  background-position: -1929px 0px;
}
.iti__flag.iti__gm {
  height: 14px;
  background-position: -1951px 0px;
}
.iti__flag.iti__gn {
  height: 14px;
  background-position: -1973px 0px;
}
.iti__flag.iti__gp {
  height: 14px;
  background-position: -1995px 0px;
}
.iti__flag.iti__gq {
  height: 14px;
  background-position: -2017px 0px;
}
.iti__flag.iti__gr {
  height: 14px;
  background-position: -2039px 0px;
}
.iti__flag.iti__gs {
  height: 10px;
  background-position: -2061px 0px;
}
.iti__flag.iti__gt {
  height: 13px;
  background-position: -2083px 0px;
}
.iti__flag.iti__gu {
  height: 11px;
  background-position: -2105px 0px;
}
.iti__flag.iti__gw {
  height: 10px;
  background-position: -2127px 0px;
}
.iti__flag.iti__gy {
  height: 12px;
  background-position: -2149px 0px;
}
.iti__flag.iti__hk {
  height: 14px;
  background-position: -2171px 0px;
}
.iti__flag.iti__hm {
  height: 10px;
  background-position: -2193px 0px;
}
.iti__flag.iti__hn {
  height: 10px;
  background-position: -2215px 0px;
}
.iti__flag.iti__hr {
  height: 10px;
  background-position: -2237px 0px;
}
.iti__flag.iti__ht {
  height: 12px;
  background-position: -2259px 0px;
}
.iti__flag.iti__hu {
  height: 10px;
  background-position: -2281px 0px;
}
.iti__flag.iti__ic {
  height: 14px;
  background-position: -2303px 0px;
}
.iti__flag.iti__id {
  height: 14px;
  background-position: -2325px 0px;
}
.iti__flag.iti__ie {
  height: 10px;
  background-position: -2347px 0px;
}
.iti__flag.iti__il {
  height: 15px;
  background-position: -2369px 0px;
}
.iti__flag.iti__im {
  height: 10px;
  background-position: -2391px 0px;
}
.iti__flag.iti__in {
  height: 14px;
  background-position: -2413px 0px;
}
.iti__flag.iti__io {
  height: 10px;
  background-position: -2435px 0px;
}
.iti__flag.iti__iq {
  height: 14px;
  background-position: -2457px 0px;
}
.iti__flag.iti__ir {
  height: 12px;
  background-position: -2479px 0px;
}
.iti__flag.iti__is {
  height: 15px;
  background-position: -2501px 0px;
}
.iti__flag.iti__it {
  height: 14px;
  background-position: -2523px 0px;
}
.iti__flag.iti__je {
  height: 12px;
  background-position: -2545px 0px;
}
.iti__flag.iti__jm {
  height: 10px;
  background-position: -2567px 0px;
}
.iti__flag.iti__jo {
  height: 10px;
  background-position: -2589px 0px;
}
.iti__flag.iti__jp {
  height: 14px;
  background-position: -2611px 0px;
}
.iti__flag.iti__ke {
  height: 14px;
  background-position: -2633px 0px;
}
.iti__flag.iti__kg {
  height: 12px;
  background-position: -2655px 0px;
}
.iti__flag.iti__kh {
  height: 13px;
  background-position: -2677px 0px;
}
.iti__flag.iti__ki {
  height: 10px;
  background-position: -2699px 0px;
}
.iti__flag.iti__km {
  height: 12px;
  background-position: -2721px 0px;
}
.iti__flag.iti__kn {
  height: 14px;
  background-position: -2743px 0px;
}
.iti__flag.iti__kp {
  height: 10px;
  background-position: -2765px 0px;
}
.iti__flag.iti__kr {
  height: 14px;
  background-position: -2787px 0px;
}
.iti__flag.iti__kw {
  height: 10px;
  background-position: -2809px 0px;
}
.iti__flag.iti__ky {
  height: 10px;
  background-position: -2831px 0px;
}
.iti__flag.iti__kz {
  height: 10px;
  background-position: -2853px 0px;
}
.iti__flag.iti__la {
  height: 14px;
  background-position: -2875px 0px;
}
.iti__flag.iti__lb {
  height: 14px;
  background-position: -2897px 0px;
}
.iti__flag.iti__lc {
  height: 10px;
  background-position: -2919px 0px;
}
.iti__flag.iti__li {
  height: 12px;
  background-position: -2941px 0px;
}
.iti__flag.iti__lk {
  height: 10px;
  background-position: -2963px 0px;
}
.iti__flag.iti__lr {
  height: 11px;
  background-position: -2985px 0px;
}
.iti__flag.iti__ls {
  height: 14px;
  background-position: -3007px 0px;
}
.iti__flag.iti__lt {
  height: 12px;
  background-position: -3029px 0px;
}
.iti__flag.iti__lu {
  height: 12px;
  background-position: -3051px 0px;
}
.iti__flag.iti__lv {
  height: 10px;
  background-position: -3073px 0px;
}
.iti__flag.iti__ly {
  height: 10px;
  background-position: -3095px 0px;
}
.iti__flag.iti__ma {
  height: 14px;
  background-position: -3117px 0px;
}
.iti__flag.iti__mc {
  height: 15px;
  background-position: -3139px 0px;
}
.iti__flag.iti__md {
  height: 10px;
  background-position: -3160px 0px;
}
.iti__flag.iti__me {
  height: 10px;
  background-position: -3182px 0px;
}
.iti__flag.iti__mf {
  height: 14px;
  background-position: -3204px 0px;
}
.iti__flag.iti__mg {
  height: 14px;
  background-position: -3226px 0px;
}
.iti__flag.iti__mh {
  height: 11px;
  background-position: -3248px 0px;
}
.iti__flag.iti__mk {
  height: 10px;
  background-position: -3270px 0px;
}
.iti__flag.iti__ml {
  height: 14px;
  background-position: -3292px 0px;
}
.iti__flag.iti__mm {
  height: 14px;
  background-position: -3314px 0px;
}
.iti__flag.iti__mn {
  height: 10px;
  background-position: -3336px 0px;
}
.iti__flag.iti__mo {
  height: 14px;
  background-position: -3358px 0px;
}
.iti__flag.iti__mp {
  height: 10px;
  background-position: -3380px 0px;
}
.iti__flag.iti__mq {
  height: 14px;
  background-position: -3402px 0px;
}
.iti__flag.iti__mr {
  height: 14px;
  background-position: -3424px 0px;
}
.iti__flag.iti__ms {
  height: 10px;
  background-position: -3446px 0px;
}
.iti__flag.iti__mt {
  height: 14px;
  background-position: -3468px 0px;
}
.iti__flag.iti__mu {
  height: 14px;
  background-position: -3490px 0px;
}
.iti__flag.iti__mv {
  height: 14px;
  background-position: -3512px 0px;
}
.iti__flag.iti__mw {
  height: 14px;
  background-position: -3534px 0px;
}
.iti__flag.iti__mx {
  height: 12px;
  background-position: -3556px 0px;
}
.iti__flag.iti__my {
  height: 10px;
  background-position: -3578px 0px;
}
.iti__flag.iti__mz {
  height: 14px;
  background-position: -3600px 0px;
}
.iti__flag.iti__na {
  height: 14px;
  background-position: -3622px 0px;
}
.iti__flag.iti__nc {
  height: 10px;
  background-position: -3644px 0px;
}
.iti__flag.iti__ne {
  height: 15px;
  background-position: -3666px 0px;
}
.iti__flag.iti__nf {
  height: 10px;
  background-position: -3686px 0px;
}
.iti__flag.iti__ng {
  height: 10px;
  background-position: -3708px 0px;
}
.iti__flag.iti__ni {
  height: 12px;
  background-position: -3730px 0px;
}
.iti__flag.iti__nl {
  height: 14px;
  background-position: -3752px 0px;
}
.iti__flag.iti__no {
  height: 15px;
  background-position: -3774px 0px;
}
.iti__flag.iti__np {
  height: 15px;
  background-position: -3796px 0px;
}
.iti__flag.iti__nr {
  height: 10px;
  background-position: -3811px 0px;
}
.iti__flag.iti__nu {
  height: 10px;
  background-position: -3833px 0px;
}
.iti__flag.iti__nz {
  height: 10px;
  background-position: -3855px 0px;
}
.iti__flag.iti__om {
  height: 10px;
  background-position: -3877px 0px;
}
.iti__flag.iti__pa {
  height: 14px;
  background-position: -3899px 0px;
}
.iti__flag.iti__pe {
  height: 14px;
  background-position: -3921px 0px;
}
.iti__flag.iti__pf {
  height: 14px;
  background-position: -3943px 0px;
}
.iti__flag.iti__pg {
  height: 15px;
  background-position: -3965px 0px;
}
.iti__flag.iti__ph {
  height: 10px;
  background-position: -3987px 0px;
}
.iti__flag.iti__pk {
  height: 14px;
  background-position: -4009px 0px;
}
.iti__flag.iti__pl {
  height: 13px;
  background-position: -4031px 0px;
}
.iti__flag.iti__pm {
  height: 14px;
  background-position: -4053px 0px;
}
.iti__flag.iti__pn {
  height: 10px;
  background-position: -4075px 0px;
}
.iti__flag.iti__pr {
  height: 14px;
  background-position: -4097px 0px;
}
.iti__flag.iti__ps {
  height: 10px;
  background-position: -4119px 0px;
}
.iti__flag.iti__pt {
  height: 14px;
  background-position: -4141px 0px;
}
.iti__flag.iti__pw {
  height: 13px;
  background-position: -4163px 0px;
}
.iti__flag.iti__py {
  height: 11px;
  background-position: -4185px 0px;
}
.iti__flag.iti__qa {
  height: 8px;
  background-position: -4207px 0px;
}
.iti__flag.iti__re {
  height: 14px;
  background-position: -4229px 0px;
}
.iti__flag.iti__ro {
  height: 14px;
  background-position: -4251px 0px;
}
.iti__flag.iti__rs {
  height: 14px;
  background-position: -4273px 0px;
}
.iti__flag.iti__ru {
  height: 14px;
  background-position: -4295px 0px;
}
.iti__flag.iti__rw {
  height: 14px;
  background-position: -4317px 0px;
}
.iti__flag.iti__sa {
  height: 14px;
  background-position: -4339px 0px;
}
.iti__flag.iti__sb {
  height: 10px;
  background-position: -4361px 0px;
}
.iti__flag.iti__sc {
  height: 10px;
  background-position: -4383px 0px;
}
.iti__flag.iti__sd {
  height: 10px;
  background-position: -4405px 0px;
}
.iti__flag.iti__se {
  height: 13px;
  background-position: -4427px 0px;
}
.iti__flag.iti__sg {
  height: 14px;
  background-position: -4449px 0px;
}
.iti__flag.iti__sh {
  height: 10px;
  background-position: -4471px 0px;
}
.iti__flag.iti__si {
  height: 10px;
  background-position: -4493px 0px;
}
.iti__flag.iti__sj {
  height: 15px;
  background-position: -4515px 0px;
}
.iti__flag.iti__sk {
  height: 14px;
  background-position: -4537px 0px;
}
.iti__flag.iti__sl {
  height: 14px;
  background-position: -4559px 0px;
}
.iti__flag.iti__sm {
  height: 15px;
  background-position: -4581px 0px;
}
.iti__flag.iti__sn {
  height: 14px;
  background-position: -4603px 0px;
}
.iti__flag.iti__so {
  height: 14px;
  background-position: -4625px 0px;
}
.iti__flag.iti__sr {
  height: 14px;
  background-position: -4647px 0px;
}
.iti__flag.iti__ss {
  height: 10px;
  background-position: -4669px 0px;
}
.iti__flag.iti__st {
  height: 10px;
  background-position: -4691px 0px;
}
.iti__flag.iti__sv {
  height: 12px;
  background-position: -4713px 0px;
}
.iti__flag.iti__sx {
  height: 14px;
  background-position: -4735px 0px;
}
.iti__flag.iti__sy {
  height: 14px;
  background-position: -4757px 0px;
}
.iti__flag.iti__sz {
  height: 14px;
  background-position: -4779px 0px;
}
.iti__flag.iti__ta {
  height: 10px;
  background-position: -4801px 0px;
}
.iti__flag.iti__tc {
  height: 10px;
  background-position: -4823px 0px;
}
.iti__flag.iti__td {
  height: 14px;
  background-position: -4845px 0px;
}
.iti__flag.iti__tf {
  height: 14px;
  background-position: -4867px 0px;
}
.iti__flag.iti__tg {
  height: 13px;
  background-position: -4889px 0px;
}
.iti__flag.iti__th {
  height: 14px;
  background-position: -4911px 0px;
}
.iti__flag.iti__tj {
  height: 10px;
  background-position: -4933px 0px;
}
.iti__flag.iti__tk {
  height: 10px;
  background-position: -4955px 0px;
}
.iti__flag.iti__tl {
  height: 10px;
  background-position: -4977px 0px;
}
.iti__flag.iti__tm {
  height: 14px;
  background-position: -4999px 0px;
}
.iti__flag.iti__tn {
  height: 14px;
  background-position: -5021px 0px;
}
.iti__flag.iti__to {
  height: 10px;
  background-position: -5043px 0px;
}
.iti__flag.iti__tr {
  height: 14px;
  background-position: -5065px 0px;
}
.iti__flag.iti__tt {
  height: 12px;
  background-position: -5087px 0px;
}
.iti__flag.iti__tv {
  height: 10px;
  background-position: -5109px 0px;
}
.iti__flag.iti__tw {
  height: 14px;
  background-position: -5131px 0px;
}
.iti__flag.iti__tz {
  height: 14px;
  background-position: -5153px 0px;
}
.iti__flag.iti__ua {
  height: 14px;
  background-position: -5175px 0px;
}
.iti__flag.iti__ug {
  height: 14px;
  background-position: -5197px 0px;
}
.iti__flag.iti__um {
  height: 11px;
  background-position: -5219px 0px;
}
.iti__flag.iti__un {
  height: 14px;
  background-position: -5241px 0px;
}
.iti__flag.iti__us {
  height: 11px;
  background-position: -5263px 0px;
}
.iti__flag.iti__uy {
  height: 14px;
  background-position: -5285px 0px;
}
.iti__flag.iti__uz {
  height: 10px;
  background-position: -5307px 0px;
}
.iti__flag.iti__va {
  height: 15px;
  background-position: -5329px 0px;
}
.iti__flag.iti__vc {
  height: 14px;
  background-position: -5346px 0px;
}
.iti__flag.iti__ve {
  height: 14px;
  background-position: -5368px 0px;
}
.iti__flag.iti__vg {
  height: 10px;
  background-position: -5390px 0px;
}
.iti__flag.iti__vi {
  height: 14px;
  background-position: -5412px 0px;
}
.iti__flag.iti__vn {
  height: 14px;
  background-position: -5434px 0px;
}
.iti__flag.iti__vu {
  height: 12px;
  background-position: -5456px 0px;
}
.iti__flag.iti__wf {
  height: 14px;
  background-position: -5478px 0px;
}
.iti__flag.iti__ws {
  height: 10px;
  background-position: -5500px 0px;
}
.iti__flag.iti__xk {
  height: 15px;
  background-position: -5522px 0px;
}
.iti__flag.iti__ye {
  height: 14px;
  background-position: -5544px 0px;
}
.iti__flag.iti__yt {
  height: 14px;
  background-position: -5566px 0px;
}
.iti__flag.iti__za {
  height: 14px;
  background-position: -5588px 0px;
}
.iti__flag.iti__zm {
  height: 14px;
  background-position: -5610px 0px;
}
.iti__flag.iti__zw {
  height: 10px;
  background-position: -5632px 0px;
}

/* ===========================================================================================
 *  LAYOUT
 *  New Layout - Fixed left hand navigation
 *  December 14, 2022
 *  body class: body.NGLayout can be used for overrides
============================================================================================== */
/* Primary layout parameters */
:root {
  --layout-sidebar-width: 230px;
  --layout-sidebar-width-narrow: 50px;
  --layout-sidebar-padding-right: 25px;
  --layout-container-percent: 90%;
  --layout-container-maxwidth: 1350px;
  --sidebar-background-color: #fff;
  --mobile-padding: 12px;
}

/*  Define a CSS grid layout to wrap the sidebar and main content area
============================================================================================== */
.GridContainer {
  padding-left: var(--mobile-padding);
  padding-right: var(--mobile-padding);
}

@media only screen and (min-width: 1023px) {
  .GridContainer {
    margin: 0 auto;
    width: var(--layout-container-percent);
    max-width: var(--layout-container-maxwidth);
    padding-left: 0;
    padding-right: 0;
  }
}
/* Mobile Grid Layout - Just linearize everything for now    */
.GridLayout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "sidebar" "main" "footer";
  height: auto;
}

/* hamburger menu button */
.MobileNav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1060;
  padding-left: 12px;
  padding-top: 18px;
}
@media only screen and (max-width: 1023px) {
  .MobileNav {
    display: block;
  }
}

.MobileNav--dark .MobileNav-icon {
  fill: #ddd !important;
}

/* sidebar is hidden on mobile by default */
.GridLayout-sidebar {
  grid-area: sidenav;
  display: none;
}
@media only screen and (max-width: 1023px) {
  .GridLayout-sidebar {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    height: 100%;
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-shadow: inset 0px 0px 0px 1px #e2e2e2, 1px 1px 6px rgba(0, 0, 0, 0.045);
    z-index: 2;
    background: #FAFBFC;
    padding-top: 60px;
    padding-left: 14px;
    padding-right: 14px;
    /* Needs to sit above the hamburger menu icon */
    transform: translateX(-300px);
    transition: all 0.25s ease-in-out;
  }
}

.GridLayout-sidebar.is-active {
  transform: translateX(0);
}

/* Desktop Grid Layout - 750px breakpoint */
@media only screen and (min-width: 1023px) {
  /* Define the two column layout */
  .GridLayout {
    display: grid;
    grid-template-columns: var(--layout-sidebar-width) 1fr;
    grid-template-rows: 1fr 50px;
    grid-template-areas: "sidenav main" "sidenav footer";
    height: 100vh;
  }
  /* Left hand navigation container */
  /* Will be hidden on mobile */
  .GridLayout-sidebar {
    grid-area: sidenav;
    display: flex;
    flex-direction: column;
    background: var(--sidebar-background-color);
    padding-right: var(--layout-sidebar-padding-right);
  }
}
.GridLayout-main {
  grid-area: main;
}

.GridLayout-footer {
  grid-area: footer;
  display: flex;
}

@media only screen and (min-width: 1023px) {
  .GridLayout-footer {
    padding-top: 26px;
    padding-bottom: 88px;
    justify-content: center;
  }
}
@media only screen and (min-width: 1023px) {
  .MainContentContainer {
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}
/* left hand sticky container for navigation */
@media only screen and (min-width: 1023px) {
  .SideBar {
    position: sticky;
    top: 60px;
    overflow: hidden;
  }
}
/* Main content area and optional sidebar */
/* still needed /*
//.MainContent {
//  padding-top: 4px;
//}

/* Pages with fixed width right column e.g: LiveLogs */
@media only screen and (min-width: 1023px) {
  .PageContent {
    display: flex;
    flex-direction: row-reverse;
  }
  .PageContent-main {
    flex: 1;
  }
  .PageContent-aside {
    flex: 0 0 280px;
    /* fix the sidebar width */
    padding-left: 16px;
  }
}
/*  body.NGLayout - override legacy components from the new layout
============================================================================================== */
@media only screen and (max-width: 1023px) {
  body.NGLayout .HeaderPrimary .AppContainer {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-left: var(--mobile-padding);
    padding-right: var(--mobile-padding);
  }
}

@media only screen and (min-width: 1023px) {
  body.NGLayout {
    /* top fixed position nav bar */
    /* old breadcrumbs and title area */
  }
  body.NGLayout .AppContainer {
    width: var(--layout-container-percent);
    max-width: var(--layout-container-maxwidth);
  }
  body.NGLayout .HeaderPrimary .AppContainer {
    width: var(--layout-container-percent);
    max-width: var(--layout-container-maxwidth);
  }
}
@media only screen and (min-width: 1023px) and (max-width: 1023px) {
  body.NGLayout .HeaderNav .AppContainer {
    padding-left: 20px;
  }
}
@media only screen and (max-width: 1023px) {
  body.NGLayout .HeaderNav .AppContainer {
    padding-left: 44px;
  }
}

/* This is a wider layout variation - displays sidebar icons with no labels */
/* Can be applied to pages that require wide primary content areas e.g. LiveLogs / Deployment logs pages */
@media only screen and (min-width: 1023px) {
  body.NGLayout.NGLayout--wideWithIconNav .GridLayout {
    grid-template-columns: var(--layout-sidebar-width-narrow) 1fr;
  }
  body.NGLayout.NGLayout--wideWithIconNav .GridLayout-sidebar {
    padding-right: 23px;
  }
  body.NGLayout.NGLayout--wideWithIconNav .AsideNav-list .AsideNav-link {
    display: block;
    background: transparent !important;
    margin-bottom: 16px;
  }
  body.NGLayout.NGLayout--wideWithIconNav .AsideNav-list #livelogs_nav {
    padding-bottom: 20px;
  }
  body.NGLayout.NGLayout--wideWithIconNav .AsideNav-list .AsideNav-label {
    display: none;
  }
  body.NGLayout.NGLayout--wideWithIconNav .AsideNav-list .AsideNav-icon {
    width: 18px !important;
    height: 18px !important;
  }
  body.NGLayout.NGLayout--wideWithIconNav .AsideNav-list .badge {
    display: none;
  }
  body.NGLayout.NGLayout--wideWithIconNav .AsideNav-item--divider,
  body.NGLayout.NGLayout--wideWithIconNav .AsideNav-listSecondary,
  body.NGLayout.NGLayout--wideWithIconNav .u-hideOnMinimalNav {
    display: none;
  }
}
/* Hide header on all screen sizes */
body.NGLayout.NGLayout--hideHeader #js_app_header_ng {
  display: none;
}

/* Hide footer on all screen sizes */
body.NGLayout.NGLayout--hideFooter .GridLayout-footer {
  display: none;
}

/* Features hidden from new layout */
body.NGLayout .js_toggle_full_screen_editor {
  display: none;
}

/* If a stack hasn't been deployed, hide sidebar icon navigation */
body.NGLayout--wideWithIconNav[data-deployed=false] .GridLayout {
  grid-template-columns: 0 1fr;
}
body.NGLayout--wideWithIconNav[data-deployed=false] .GridLayout-sidebar {
  display: none;
}

body[data-controller=general_notifications] .AppContainer,
body[data-controller=support_tickets] .AppContainer {
  width: var(--layout-container-percent);
  max-width: var(--layout-container-maxwidth);
}

.FilterMenu .FilterMenu-list {
  padding: 12px 3px;
}
.FilterMenu .FilterMenu-icon {
  position: relative;
  top: 1px;
}
.FilterMenu .FilterMenu-label {
  font-weight: 500;
  cursor: pointer;
}

#js_stack_filter_dropdown.open .badge,
#js_stack_filter_dropdown:hover .badge {
  display: none !important;
}

.Module.Module--notifications {
  border: none;
  border-radius: 0;
}
.Module.Module--notifications .Module-header {
  border-radius: 0;
}

.Notifications .Notifications-body {
  height: 95vh;
  overflow: auto;
  padding: 4px 0 0 0;
}
.Notifications .Notifications-icon {
  font-size: 15px;
  position: relative;
  top: 2px;
}
.Notifications .Notifications-close {
  font-size: 34px;
  font-weight: 100 !important;
  position: relative;
  padding-right: 10px;
  padding-left: 8px;
  text-decoration: none;
  color: #ccc !important;
}
.Notifications .Notifications-close:hover {
  color: #999 !important;
}
.Notifications .Notifications-clear {
  font-size: 11px;
  font-weight: 400;
}
.Notifications .Table--notifications {
  width: 100%;
}
.Notifications .Table--notifications td {
  padding: 10px;
}
.Notifications .morelink {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
}
.Notifications .morelink strong {
  font-weight: normal;
}

/* --------------------------------------------------------------------------
 *  Blank Slate - Generic blank slate pages
 * -------------------------------------------------------------------------- */
.BlankSlate {
  padding-top: 4em;
  padding-bottom: 8em;
  text-align: center;
}
.BlankSlate .BlankSlate-icon {
  position: relative;
  top: 4px;
  width: 30px;
  height: 30px;
  color: rgb(40, 167, 69);
}
.BlankSlate .BlankSlate-title {
  margin: 1em 0 0.6em 0;
  font-weight: 700;
  font-size: 18px;
  color: #49545B;
}
@media only screen and (max-width: 480px) {
  .BlankSlate .BlankSlate-title {
    font-size: 1.8rem;
  }
}
.BlankSlate .BlankSlate-subTitle {
  font-size: 20px;
  font-weight: 500;
}
.BlankSlate .BlankSlate-lead {
  font-size: 14px;
  padding: 0 6.4em;
  margin-bottom: 1.7em;
  margin-left: auto;
  margin-right: auto;
  max-width: 32em;
  color: #555;
  line-height: 1.8;
  /* < 1024px grid */
}
.BlankSlate .BlankSlate-lead strong {
  font-weight: 600 !important;
}
@media only screen and (max-width: 1023px) {
  .BlankSlate .BlankSlate-lead {
    font-size: 13px;
    padding: 0 0.4em;
  }
}
.BlankSlate .BlankSlate-button {
  font-size: 13px;
}
.BlankSlate .BlankSlate-button .Button-icon {
  width: 11px;
  height: 11px;
  position: relative;
}
.BlankSlate .BlankSlate-small {
  margin-top: 4em;
  margin-bottom: 2em;
  font-size: 1em;
}
.BlankSlate i {
  font-size: 2.2rem;
}
.BlankSlate .ico-lrg {
  font-size: 3rem;
  color: #DFE2E7;
  position: relative;
  top: 0.4rem;
}

.BlankSlate--drawer {
  padding-top: 24px;
  padding-bottom: 24px;
}
.BlankSlate--drawer .BlankSlate-title {
  line-height: 1;
  margin-top: 0;
}

.BlankSlate--fullScreen {
  padding-top: 10px;
  width: 800px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
 *  fixed width circle, content has limited width
 * -------------------------------------------------------------------------- */
.CircleNo {
  display: inline-block;
  width: 21px;
  height: 21px;
  line-height: 21px;
  border-radius: 21px;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  background-color: #eee;
  color: #59626b;
}

.CircleNoWide {
  display: inline-block;
  min-width: 14px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  color: #59626b;
  text-align: center;
  background-color: #eee;
  border: 1px solid #eee;
  border-radius: 2em;
}

.SocialProof {
  margin: 38px 0 0 0;
  overflow: hidden;
}
@media (max-width: 620px) {
  .SocialProof {
    display: none !important;
  }
}
.SocialProof .SocialProof-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(88, 97, 105, 0.7);
  margin-bottom: 14px;
}

.SocialLogos {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 66px;
}

.SocialLogos--signUp {
  justify-content: center;
}

.Testimonial {
  padding-top: 20px;
}
.Testimonial .Testimonial-blockquote {
  margin: 0 0 0 0;
  padding-left: 30px;
}
.Testimonial .Testimonial-quote {
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  color: #585f69;
  margin-bottom: 8px;
  line-height: 24px;
  quotes: "“" "”" "‘" "’";
  quotes: initial;
}
.Testimonial .Testimonial-quote:before {
  content: open-quote;
  margin-right: -3px;
  font-size: 18px;
}
.Testimonial .Testimonial-quote:after {
  content: close-quote;
  margin-left: -3px;
  font-size: 18px;
}
.Testimonial .Testimonial-cite {
  padding-top: 4px;
  padding-left: 4px;
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #585f69;
}
.Testimonial .Testimonial-image {
  width: 32px;
  overflow: hidden;
  border-radius: 50%;
}
.Testimonial .Testimonial-name {
  margin-left: 14px;
}

iframe[title="Chatbot Playground"] {
  inset: auto 10px 10px auto !important;
}

/* ===========================================================================================
 *  CSV3 Cluster
 *  Clusters/show
============================================================================================== */
/* body class */
body[data-version=csv3-cluster] .MainContent {
  padding-top: 4px;
}

/*
  Cluster show header
*/
.ClusterHeader {
  position: relative;
  padding: 2px 2px 34px 2px;
}
.ClusterHeader .ClusterHeader-status {
  position: absolute;
  top: 5px;
  right: 0;
}
@media (max-width: 620px) {
  .ClusterHeader .ClusterHeader-status {
    display: none;
  }
}

/*
  Summary of cluster components (number of servers, applications, memory, etc.)
*/
.Summary .Summary-item .Summary-number {
  position: relative;
  top: 1px;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
  color: #59626b;
}
.Summary .Summary-item .Summary-text {
  position: relative;
  top: 0;
  font-size: 16px;
  line-height: 1.2;
  color: #59626b;
}
.Summary .Summary-link:hover * {
  color: #427dc4 !important;
}

/* ===========================================================================================
 *  Sidebar filter styles
 *  Used on dashboard pages to filter content
============================================================================================== */
.SideFilter {
  position: relative;
  margin-bottom: 22px;
}
.SideFilter .SideFilter-field {
  box-sizing: border-box;
  transition: border-color 0.4s ease 0s;
  margin-bottom: 0;
  min-height: 2.6em;
  width: 100%;
  padding: 0.9rem;
  font-size: 14px;
  border-color: #ccc;
  background-color: #fff;
}
.SideFilter .SideFilter-field:focus, .SideFilter .SideFilter-field:hover {
  box-shadow: none !important;
}
.SideFilter .SideFilter-field::-webkit-input-placeholder {
  color: #aaa;
  font-size: 13px;
}
.SideFilter .SideFilter-field::-moz-placeholder {
  color: #aaa;
  font-size: 13px;
}
.SideFilter .SideFilter-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 6px;
  top: 7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #ddd;
  padding: 0 !important;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  line-height: 1;
}
.SideFilter .SideFilter-clear:hover {
  color: #999;
  background-color: #f4f4f4;
}
.SideFilter .SideFilter-clear:focus, .SideFilter .SideFilter-clear:active {
  outline: none;
  background-color: #f5f5f5;
  color: #666;
}

@keyframes autofillPulse {
  0% {
    background-color: #fff7cc;
  }
  100% {
    background-color: transparent;
  }
}
.SideFilter--highlight .SideFilter-field {
  animation: autofillPulse 2s ease-out;
}

.RadioButtonImages {
  list-style: none;
  margin: 0;
  padding: 0;
}
.RadioButtonImages .RadioButtonImages-item {
  width: 22%;
  padding: 0 16px;
  margin: 2px 0;
  border-radius: 6px;
}
.RadioButtonImages .RadioButtonImages-item:hover {
  background-color: #FAFBFC;
}
.RadioButtonImages .RadioButtonImages-input {
  width: 18px;
  height: 18px;
  margin: 0;
}
.RadioButtonImages .RadioButtonImages-input:focus, .RadioButtonImages .RadioButtonImages-input:active {
  outline: none;
}
.RadioButtonImages .RadioButtonImages-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 7px 0 7px 0;
}
.RadioButtonImages .RadioButtonImages-logo {
  width: 26px;
  height: 26px;
}

.RadioButtonImages-item:has(.RadioButtonImages-input:checked) {
  background-color: #f2f6f9;
}
.RadioButtonImages-item:has(.RadioButtonImages-input:checked) .RadioButtonImages-label {
  font-weight: 500;
  color: #000;
}

/**
 * TabMini
 * Secondary inner page nav
 * e.g. files
 */
.TabMini {
  display: flex;
  position: relative;
  list-style: none;
  padding: 0 0 0 2px;
  margin: 8px 0 28px 0;
  border-bottom: 2px solid #efefef;
}

.TabMini-item {
  display: inline-flex;
  list-style: none;
}

.TabMini-link {
  color: #4b535b;
  text-rendering: optimizelegibility;
  position: relative;
  top: 2px;
  display: block;
  padding: 0 2px 14px 2px;
  font-size: 14px;
  font-weight: 400;
  margin: 0 24px 0 0;
  outline: none !important;
  transition: none;
}
.TabMini-link:hover {
  text-decoration: none;
  color: #427dc4;
}
@media only screen and (max-width: 1023px) {
  .TabMini-link {
    font-size: 13px;
  }
}
@media only screen and (max-width: 480px) {
  .TabMini-link {
    font-size: 12px;
  }
}

.TabMini-addIcon {
  color: rgb(40, 167, 69) !important;
  position: relative;
  top: 0;
  margin-right: 3px;
}

.TabMini .TabMini-item .TabMini-link--more {
  color: #555;
}

.TabMini-item--add {
  margin-left: 1px;
}
.TabMini-item--add .TabMini-link:hover, .TabMini-item--add .TabMini-link:focus {
  color: #000;
}

@media only screen and (min-width: 1024px) {
  .TabMini-item--right {
    margin-left: auto;
  }
}

.TabMini-badgeCount {
  position: absolute;
  top: 3px;
  right: -14px;
}

.TabMini-linkXtra {
  display: block;
  font-weight: 400;
  font-size: 1.2rem;
  color: #999;
  padding-top: 2px;
}

.TabMini-icon {
  position: relative;
  top: 1px;
  font-size: 15px;
  color: rgba(27, 31, 35, 0.3);
  margin-right: 3px;
}

.TabMini-img {
  display: inline-block;
  position: relative;
  top: 4px;
  stroke: #666;
}

.TabMini-svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  stroke-width: 0;
  stroke: #999;
  fill: #999;
}

.TabMini-icon--Lrg {
  position: relative;
  top: 0.5px;
  font-size: 1.5rem;
}

.TabMini-link.is-active {
  border-bottom: 2px solid #427dc4;
  color: #000000;
  cursor: auto;
  font-weight: 500;
}
.TabMini-link.is-active .TabMini-icon {
  color: #427dc4;
}
.TabMini-link.is-active .TabMini-svg {
  stroke: #555;
  fill: #555;
}

.TabMini + p {
  margin-top: -5px;
}

.TabMini + .Tabs {
  margin-top: -5px;
}

/*
    Error or Warning state in tabbed navigation
    E.g. Log errors or Cluster server errors
    Also includes a badge with counter for accessibility
 */
.TabMini-link.is-active.is-red {
  border-color: rgb(203, 36, 49);
}

.TabMini-link.is-active.is-amber {
  border-color: #EA8407;
}

/**
 * TabMini--narrow
 * Can be used to fit more tabs into a single row
 * e.g. Configuration Files navigation
 */
.TabMini--main .TabMini-link.is-active {
  cursor: pointer;
}
.TabMini--main .TabMini-link.is-active:hover {
  text-decoration: none;
  color: #427dc4;
}

.TabMini--narrow .TabMini-link {
  margin: 0 16px 0 0;
  padding: 0 0 14px 0;
  font-size: 13px;
}
.TabMini--narrow .TabMini-link.is-active {
  font-weight: normal;
}

.TabMini.TabMini--dash {
  padding-top: 0;
  margin-top: 8px;
}

/* tabs inside the drawer component */
.TabMini--drawer {
  margin: 16px 0 18px 0;
}
.TabMini--drawer .TabMini-item.active a {
  font-weight: 500;
}

.TabMini--sticky {
  position: sticky;
  z-index: 2;
  background: #fff;
}

/**
 * TabMini--related
 * Tabbed navigation within fieldsets, this can also replace
 * traditional radio groups via js.
 * e.g. server deployment options
 */
.TabMini.TabMini--related {
  padding-left: 17px;
}

.TabMini--related {
  margin-top: 24px;
  margin-bottom: 12px;
}
.TabMini--related .TabMini-link {
  font-size: 1.4rem;
}

/**
 * TabMini--small
 * Smaller version of the secondaary navigation
 * e.g. small tabs within a modal dialog
 */
.TabMini.TabMini--modal {
  margin-bottom: 2px;
  padding: 0;
}
.TabMini.TabMini--modal .TabMini-link {
  font-size: 1.3rem;
}
.TabMini.TabMini--modal .TabMini-link {
  padding: 4px 8px 6px;
}

.TabMini.TabMini--modalFullWidth {
  padding: 0 16px;
}

/**
 * TabMini--sidebar
 * e.g. LiveLogs Page
 */
.TabMini.TabMini--sidebar {
  margin-bottom: 8px !important;
}
.TabMini.TabMini--sidebar .TabMini-link {
  padding: 0 2px 10px 2px;
  margin: 0 18px 0 0;
  font-size: 14px;
}

.TabMini-item.is-active .TabMini-link,
.TabMini-item.active .TabMini-link {
  border-bottom: 2px solid #427dc4;
  color: #000;
  cursor: auto;
  font-weight: 500;
}
.TabMini-item.is-active .TabMini-link .TabMini-icon,
.TabMini-item.active .TabMini-link .TabMini-icon {
  color: #000;
}

.TabMini + .NavPills {
  margin-top: -4px;
}

.TabMini + .Message {
  margin-top: -4px;
}

.TabMini + .BackLink,
nav + .BackLink {
  margin-top: -6px;
}

/**
 * Main Sidebar Navigation
 */
.AsideNav-title {
  color: #526372;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 4px;
  padding-bottom: 10px;
  margin-bottom: 0;
  line-height: 1;
}

.AsideNav-heading {
  color: #2f3942;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-top: 6px;
  padding-bottom: 15px;
  margin-bottom: 0;
  line-height: 1;
}

.AsideNav {
  margin-bottom: 18px;
}

.AsideNav--actions {
  padding-left: 4px;
}
.AsideNav--actions .AsideNav-link {
  margin-bottom: 0;
}

.AsideNav-list {
  margin: 0;
  padding: 0;
}
.AsideNav-list .AsideNav-item {
  position: relative;
  list-style: none;
  line-height: 1;
}
.AsideNav-list .AsideNav-item--divider hr {
  margin: 9px 0;
}

.AsideNav-link {
  color: #4b535b;
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 34px;
  border-radius: 6px;
  margin-bottom: 3px;
}
.AsideNav-link:hover {
  text-decoration: none;
}
.AsideNav-link:hover .AsideNav-icon {
  color: #427dc4;
}
.AsideNav-link:focus, .AsideNav-link:active {
  outline: none;
}
.AsideNav-link:hover {
  background: #fafafa;
}
.AsideNav-link .AsideNav-icon {
  position: absolute;
  top: 10px;
  left: 9px;
  font-size: 1.4rem;
  color: #748b93;
}

.AsideNav-link.is-disabled {
  color: #aaa;
}
.AsideNav-link.is-disabled .AsideNav-icon {
  color: #aaa;
}

.AsideNav-link.is-active {
  color: #000;
  font-weight: 600 !important;
  background: #F9FAFB;
}
.AsideNav-link.is-active .AsideNav-icon {
  color: #427dc4;
}

.AsideNav-count {
  position: relative;
  top: 2px;
  color: #999;
  font-size: 0.9rem;
}

.AsideNav-checkbox {
  display: inline-block;
  padding-top: 4px;
  padding-bottom: 4px;
}
.AsideNav-checkbox input[type=checkbox] {
  position: relative;
  top: -1px;
}
.AsideNav-checkbox .Form-label {
  padding-left: 28px !important;
  color: #4b535b;
  font-weight: 500;
}
.AsideNav-checkbox .Form-label:hover {
  color: black;
}

.AsideNav--checkboxes .AsideNav-icon {
  left: 8px;
}

.AsideNav--ng {
  position: relative;
}

.AsideNav-listSecondary {
  list-style: none;
  padding-left: 20px;
  margin-bottom: 1px;
}
.AsideNav-listSecondary .AsideNav-itemSecondary {
  line-height: 1;
}
.AsideNav-listSecondary .AsideNav-group {
  font-weight: normal;
}
.AsideNav-listSecondary .AsideNav-linkSecondary {
  position: relative;
  display: block;
  padding: 8px 0;
  color: #4b535b;
  text-decoration: none;
  font-size: 14px;
}
.AsideNav-listSecondary .AsideNav-linkSecondary:hover {
  color: #427dc4;
}
.AsideNav-listSecondary .AsideNav-linkSecondary:focus, .AsideNav-listSecondary .AsideNav-linkSecondary:active {
  color: #000;
  outline: none;
}
.AsideNav-listSecondary .AsideNav-linkSecondary.is-active {
  color: #000;
  font-weight: 500;
}
.AsideNav-listSecondary .AsideNav-linkSecondary.is-active::before {
  position: absolute;
  top: 8px;
  left: -10px;
  display: inline-block;
  width: 2px;
  height: 14px;
  background: #427dc4;
  content: "";
}

.AsideNav-itemSecondary--orphaned {
  /* Orphaned db backup items  */
}
.AsideNav-itemSecondary--orphaned .AsideNav-orphaneddb {
  display: inline-block;
  margin-bottom: 1px;
}
.AsideNav-itemSecondary--orphaned .AsideNav-orphaned {
  font-size: 11px;
  white-space: nowrap; /* Prevents the text from breaking unless necessary */
}

/* expand mobile nav */
.AsideNav--mobile .AsideNav-listSecondary {
  display: block;
}

.AsideNav--dash .AsideNav-link.is-active {
  background: #f7f7f7;
}

.SidebarSection {
  background: #FAFAFA;
  padding: 10px;
  margin: 14px 0;
  font-size: 12px;
}
.SidebarSection .SidebarSection-title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 10px;
}

.SidebarItem {
  color: #59626b;
  padding-top: 24px;
  border-top: 1px solid #eee;
  font-size: 12px;
}
.SidebarItem .SidebarItem-link {
  color: #59626b;
}
.SidebarItem .SidebarItem-link:hover {
  color: #427dc4;
}
.SidebarItem .SidebarItem-link:hover * {
  color: #427dc4 !important;
}

.NavPills {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.NavPills .NavPills-item {
  line-height: 1;
  display: block;
  padding: 6px 9px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  margin-right: 8px;
  color: #4b535b;
}
.NavPills .NavPills-item:hover {
  background: #FAFBFC;
  color: #427dc4;
}
.NavPills .NavPills-item:active, .NavPills .NavPills-item:focus {
  outline: none;
}
.NavPills .NavPills-add {
  line-height: 1;
  display: block;
  padding: 6px 9px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  margin-right: 8px;
  color: #4b535b;
}
.NavPills .NavPills-add:hover {
  background: #FAFBFC;
  color: #427dc4;
}
.NavPills .NavPills-add:active, .NavPills .NavPills-add:focus {
  outline: none;
}
.NavPills .NavPills-icon {
  position: relative;
  margin-right: 3px;
}
.NavPills .is-active {
  font-weight: 500;
  color: #000 !important;
  background: #F3F4F6;
  cursor: default;
}
.NavPills .is-active:hover {
  background: #F3F4F6;
  color: #000;
}

.BreadcrumbSec + .NavPills {
  margin-top: -4px;
}

.NavPills--topSpaced {
  margin-top: 3px;
}