/**
 * Default font stacks
 * ------------------------------//
 */
/**
 * Font stack weights
 * -----------------------------//
 * Override with weights provided by the font service.
 * Some fonts use different wording for different weights
 * for example "medium" or "book". These are usually instead
 * of "regular" so seeing as we're abstracting the font-stack
 * usage here it's advised to use the weight names listed here.
 */
/**
* Once you specified your font-stacks and weights
* add them to these map variables
*/
/**
 * Base font-family
 * ------------------------------//
 */
/**
 * Base sizing
 * ------------------------------//
 */
/**
 * Typescale
 * ------------------------------//
 */
/**
 * strip-unit()
 * Remove the unit of a length
 * @param {Number} $number - Number to remove unit from
 * @return {Number} - Unitless number
 * https://css-tricks.com/snippets/sass/strip-unit-function/
 */
/**
 * Color
 * -------------------------------------//
 * Helper for retrieving color values. By default, retrieves
 * the default value of a group like so:
 *
 * background-color: color(action);
 *
 * To retrieve a specific color from the group, pass that as the
 * second parameter:
 *
 * background-color: color(action, create);
 */
/**
 * Global
 * -------------------------------------//
 * Clean helper for handling the globals maps
 */
/**
 * Space
 * -------------------------------------//
 * Clean helper for handling the spacing maps
 */
/**
 * Em
 * -------------------------------------//
 * Pixel to em converter to help readability
 */
/**
 * Rem
 * -------------------------------------//
 * Pixel to rem converter to help readability
 */
/**
 * Media Query
 * -------------------------------------//
 * Use either with a breakpoint from our standard set.
 * e.g. @include media-query(m)
 *
 * Or use directly using a px value.
 * e.g. @include media-query(500px)
 */
/**
 * Font stack mixin
 * -------------------------------------//
 * This mixin abstracts out font family, style and weight declarations
 * so you can use font types (serif, sans-serif etc) instead of font
 * names e.g.

 @include font-stack(); //Use default values

 @include font-stack("bold", "serif", "normal")

 * Becomes:

 font-family: "Verdana", sans-serif;
 font-style: normal;
 font-weight: 400;

 font-family: "Georgia", serif;
 font-style: normal;
 font-weight: 700;

 * The mixin is setup to only apply styles that differ from the base
 * styles. To override this behaviour there's a force option we
 * can be set to true.
 *
 * Credit: http://nodivide.us/ - Ryan Taylor
 */
.scoped a,
.scoped abbr,
.scoped area,
.scoped article,
.scoped aside,
.scoped audio,
.scoped b,
.scoped bdo,
.scoped blockquote,
.scoped body,
.scoped button,
.scoped canvas,
.scoped caption,
.scoped cite,
.scoped code,
.scoped col,
.scoped colgroup,
.scoped datalist,
.scoped dd,
.scoped del,
.scoped details,
.scoped dialog,
.scoped dfn,
.scoped div,
.scoped dl,
.scoped dt,
.scoped em,
.scoped embed,
.scoped fieldset,
.scoped figure,
.scoped form,
.scoped h1,
.scoped h2,
.scoped h3,
.scoped h4,
.scoped h5,
.scoped h6,
.scoped head,
.scoped header,
.scoped hgroup,
.scoped hr,
.scoped html,
.scoped i,
.scoped iframe,
.scoped img,
.scoped input,
.scoped ins,
.scoped keygen,
.scoped kbd,
.scoped label,
.scoped legend,
.scoped li,
.scoped map,
.scoped mark,
.scoped menu,
.scoped meter,
.scoped nav,
.scoped noscript,
.scoped object,
.scoped ol,
.scoped optgroup,
.scoped option,
.scoped output,
.scoped p,
.scoped param,
.scoped pre,
.scoped progress,
.scoped q,
.scoped rp,
.scoped rt,
.scoped ruby,
.scoped samp,
.scoped section,
.scoped select,
.scoped small,
.scoped span,
.scoped strong,
.scoped sub,
.scoped sup,
.scoped table,
.scoped tbody,
.scoped td,
.scoped textarea,
.scoped tfoot,
.scoped th,
.scoped thead,
.scoped time,
.scoped tr,
.scoped ul,
.scoped var,
.scoped video {
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  outline: none;
  padding: 0;
  text-align: left;
  text-decoration: none;
  vertical-align: baseline;
  z-index: auto;
}

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

.scoped body {
  line-height: 1;
}

.scoped ol,
.scoped ul {
  list-style: none;
}

.scoped blockquote,
.scoped q {
  quotes: none;
}

.scoped blockquote::before,
.scoped blockquote::after,
.scoped q::before,
.scoped q::after {
  content: "";
  content: none;
}

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

.scoped abbr,
.scoped abbr[title] {
  text-decoration: none;
}

@font-face {
  font-display: fallback;
  font-family: "prenton";
  src: url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-regular.woff2") format("woff2"), url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-display: optional;
  font-family: "prenton";
  src: url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-italic.woff2") format("woff2"), url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
}
@font-face {
  font-display: fallback;
  font-family: "prenton";
  src: url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-medium.woff2") format("woff2"), url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-display: optional;
  font-family: "prenton";
  src: url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-medium-italic.woff2") format("woff2"), url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-medium-italic.woff") format("woff");
  font-style: italic;
  font-weight: 500;
}
@font-face {
  font-display: fallback;
  font-family: "prenton";
  src: url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-bold.woff2") format("woff2"), url("https://static.snyk.io/prod/static-assets/style/build/fonts/prenton-bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
}
.scoped .highlight {
  background-color: #ffcf99;
}

.scoped .dimmed {
  color: #727184;
}

.scoped .critical-severity {
  color: #910851;
}

.scoped .high-severity {
  color: #b31a6b;
}

.scoped .medium-severity {
  color: #df8620;
}

.scoped .low-severity {
  color: #595775;
}

.scoped * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.scoped svg:not(:root) {
  display: inline-block;
  fill: currentColor;
  overflow: hidden;
  vertical-align: middle;
}

.scoped .margin--xxxl {
  margin: 85.3333333333px;
}

.scoped .margin-top--xxxl {
  margin-top: 85.3333333333px;
}

.scoped .margin-right--xxxl {
  margin-right: 85.3333333333px;
}

.scoped .margin-bottom--xxxl {
  margin-bottom: 85.3333333333px;
}

.scoped .margin-left--xxxl {
  margin-left: 85.3333333333px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--xxxl {
    margin: 128px;
  }

  .scoped .margin-top--xxxl {
    margin-top: 128px;
  }

  .scoped .margin-right--xxxl {
    margin-right: 128px;
  }

  .scoped .margin-bottom--xxxl {
    margin-bottom: 128px;
  }

  .scoped .margin-left--xxxl {
    margin-left: 128px;
  }
}
.scoped .margin--xxl {
  margin: 42.6666666667px;
}

.scoped .margin-top--xxl {
  margin-top: 42.6666666667px;
}

.scoped .margin-right--xxl {
  margin-right: 42.6666666667px;
}

.scoped .margin-bottom--xxl {
  margin-bottom: 42.6666666667px;
}

.scoped .margin-left--xxl {
  margin-left: 42.6666666667px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--xxl {
    margin: 64px;
  }

  .scoped .margin-top--xxl {
    margin-top: 64px;
  }

  .scoped .margin-right--xxl {
    margin-right: 64px;
  }

  .scoped .margin-bottom--xxl {
    margin-bottom: 64px;
  }

  .scoped .margin-left--xxl {
    margin-left: 64px;
  }
}
.scoped .margin--xl {
  margin: 32px;
}

.scoped .margin-top--xl {
  margin-top: 32px;
}

.scoped .margin-right--xl {
  margin-right: 32px;
}

.scoped .margin-bottom--xl {
  margin-bottom: 32px;
}

.scoped .margin-left--xl {
  margin-left: 32px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--xl {
    margin: 48px;
  }

  .scoped .margin-top--xl {
    margin-top: 48px;
  }

  .scoped .margin-right--xl {
    margin-right: 48px;
  }

  .scoped .margin-bottom--xl {
    margin-bottom: 48px;
  }

  .scoped .margin-left--xl {
    margin-left: 48px;
  }
}
.scoped .margin--l {
  margin: 21.3333333333px;
}

.scoped .margin-top--l {
  margin-top: 21.3333333333px;
}

.scoped .margin-right--l {
  margin-right: 21.3333333333px;
}

.scoped .margin-bottom--l {
  margin-bottom: 21.3333333333px;
}

.scoped .margin-left--l {
  margin-left: 21.3333333333px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--l {
    margin: 32px;
  }

  .scoped .margin-top--l {
    margin-top: 32px;
  }

  .scoped .margin-right--l {
    margin-right: 32px;
  }

  .scoped .margin-bottom--l {
    margin-bottom: 32px;
  }

  .scoped .margin-left--l {
    margin-left: 32px;
  }
}
.scoped .margin--m {
  margin: 16px;
}

.scoped .margin-top--m {
  margin-top: 16px;
}

.scoped .margin-right--m {
  margin-right: 16px;
}

.scoped .margin-bottom--m {
  margin-bottom: 16px;
}

.scoped .margin-left--m {
  margin-left: 16px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--m {
    margin: 24px;
  }

  .scoped .margin-top--m {
    margin-top: 24px;
  }

  .scoped .margin-right--m {
    margin-right: 24px;
  }

  .scoped .margin-bottom--m {
    margin-bottom: 24px;
  }

  .scoped .margin-left--m {
    margin-left: 24px;
  }
}
.scoped .margin--default {
  margin: 10.6666666667px;
}

.scoped .margin-top--default {
  margin-top: 10.6666666667px;
}

.scoped .margin-right--default {
  margin-right: 10.6666666667px;
}

.scoped .margin-bottom--default {
  margin-bottom: 10.6666666667px;
}

.scoped .margin-left--default {
  margin-left: 10.6666666667px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--default {
    margin: 16px;
  }

  .scoped .margin-top--default {
    margin-top: 16px;
  }

  .scoped .margin-right--default {
    margin-right: 16px;
  }

  .scoped .margin-bottom--default {
    margin-bottom: 16px;
  }

  .scoped .margin-left--default {
    margin-left: 16px;
  }
}
.scoped .margin--s {
  margin: 8px;
}

.scoped .margin-top--s {
  margin-top: 8px;
}

.scoped .margin-right--s {
  margin-right: 8px;
}

.scoped .margin-bottom--s {
  margin-bottom: 8px;
}

.scoped .margin-left--s {
  margin-left: 8px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--s {
    margin: 12px;
  }

  .scoped .margin-top--s {
    margin-top: 12px;
  }

  .scoped .margin-right--s {
    margin-right: 12px;
  }

  .scoped .margin-bottom--s {
    margin-bottom: 12px;
  }

  .scoped .margin-left--s {
    margin-left: 12px;
  }
}
.scoped .margin--xs {
  margin: 5.3333333333px;
}

.scoped .margin-top--xs {
  margin-top: 5.3333333333px;
}

.scoped .margin-right--xs {
  margin-right: 5.3333333333px;
}

.scoped .margin-bottom--xs {
  margin-bottom: 5.3333333333px;
}

.scoped .margin-left--xs {
  margin-left: 5.3333333333px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--xs {
    margin: 8px;
  }

  .scoped .margin-top--xs {
    margin-top: 8px;
  }

  .scoped .margin-right--xs {
    margin-right: 8px;
  }

  .scoped .margin-bottom--xs {
    margin-bottom: 8px;
  }

  .scoped .margin-left--xs {
    margin-left: 8px;
  }
}
.scoped .margin--xxs {
  margin: 2.6666666667px;
}

.scoped .margin-top--xxs {
  margin-top: 2.6666666667px;
}

.scoped .margin-right--xxs {
  margin-right: 2.6666666667px;
}

.scoped .margin-bottom--xxs {
  margin-bottom: 2.6666666667px;
}

.scoped .margin-left--xxs {
  margin-left: 2.6666666667px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--xxs {
    margin: 4px;
  }

  .scoped .margin-top--xxs {
    margin-top: 4px;
  }

  .scoped .margin-right--xxs {
    margin-right: 4px;
  }

  .scoped .margin-bottom--xxs {
    margin-bottom: 4px;
  }

  .scoped .margin-left--xxs {
    margin-left: 4px;
  }
}
.scoped .margin--xxxs {
  margin: 1.3333333333px;
}

.scoped .margin-top--xxxs {
  margin-top: 1.3333333333px;
}

.scoped .margin-right--xxxs {
  margin-right: 1.3333333333px;
}

.scoped .margin-bottom--xxxs {
  margin-bottom: 1.3333333333px;
}

.scoped .margin-left--xxxs {
  margin-left: 1.3333333333px;
}

@media only screen and (min-width: 40em) {
  .scoped .margin--xxxs {
    margin: 2px;
  }

  .scoped .margin-top--xxxs {
    margin-top: 2px;
  }

  .scoped .margin-right--xxxs {
    margin-right: 2px;
  }

  .scoped .margin-bottom--xxxs {
    margin-bottom: 2px;
  }

  .scoped .margin-left--xxxs {
    margin-left: 2px;
  }
}
.scoped,
.scoped html,
.scoped body,
.scoped input,
.scoped textarea,
.scoped button {
  /**
   * Force apply font-family, font-style, font-weight
   */
  font-family: prenton, "Gill Sans", "Calibri", sans-serif;
  font-style: normal;
  font-weight: 400;
  color: inherit;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-feature-settings: "pnum";
          font-feature-settings: "pnum";
}

.scoped html,
.scoped input,
.scoped textarea {
  color: #393842;
}

.scoped h1 {
  /**
   * Force apply font-family, font-style, font-weight
   */
  font-family: prenton, "Gill Sans", "Calibri", sans-serif;
  font-style: normal;
  font-weight: 400;
}

.scoped h2 {
  /**
   * Force apply font-family, font-style, font-weight
   */
  font-family: prenton, "Gill Sans", "Calibri", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
}

.scoped h3 {
  /**
   * Force apply font-family, font-style, font-weight
   */
  font-family: prenton, "Gill Sans", "Calibri", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.8;
}

.scoped h4,
.scoped h5,
.scoped h6 {
  /**
   * Force apply font-family, font-style, font-weight
   */
  font-family: prenton, "Gill Sans", "Calibri", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
}

.scoped a {
  color: #4b45a1;
  cursor: pointer;
  text-decoration: none;
}
.scoped a:hover {
  color: #4b45a1;
  text-decoration: underline;
}

.scoped p {
  margin: 12px 0;
}
.scoped p:first-child {
  margin-top: 0;
}
.scoped p:last-child {
  margin-bottom: 0;
}

.scoped strong {
  /**
   * Force apply font-family, font-style, font-weight
   */
  /**
   * Selectively apply font-family, font-style and font-weights that differ from
   * the base settings
   */
  font-weight: 500;
}

.scoped em {
  font-style: italic;
}

.scoped hr {
  background-color: #d3d3d9;
  border: none;
  display: block;
  height: 1px;
}

.scoped ol {
  margin: 0;
  padding: 0 0 0 1em;
  list-style: decimal;
  -webkit-font-feature-settings: "pnum";
          font-feature-settings: "pnum";
}
.scoped ol li {
  margin: 8px 0;
}

.scoped ul {
  margin: 0;
  padding: 0 0 0 1em;
  list-style: disc;
  -webkit-font-feature-settings: "pnum";
          font-feature-settings: "pnum";
}
.scoped ul li {
  margin: 8px 0;
}

.scoped .footnote {
  /**
   * Force apply font-family, font-style, font-weight
   */
  /**
   * Selectively apply font-family, font-style and font-weights that differ from
   * the base settings
   */
  font-style: italic;
  color: #727184;
  font-size: 0.875rem;
}

.scoped img {
  max-width: 100%;
}

.scoped code {
  background-color: rgba(57, 56, 66, 0.1);
  border-radius: 4px;
  font-family: "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace;
  -webkit-font-feature-settings: "pnum";
          font-feature-settings: "pnum";
  font-variant: proportional-nums;
  font-size: 90%;
  padding: 2px 4px;
  white-space: pre;
}

.scoped p code {
  white-space: pre-wrap;
}

.scoped .styleguide__block-row > * {
  margin: 6px 12px 6px 0;
}

@media only percy {
  .scoped .hide-in-percy {
    display: none !important;
  }
}
.scoped .table {
  margin-bottom: 12px;
  width: auto;
}
.scoped .table tr {
  border: none;
}
.scoped .table th,
.scoped .table td {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.65;
  text-transform: none;
  color: #393842;
  padding: 0;
  vertical-align: top;
}
.scoped .table th {
  /**
   * Force apply font-family, font-style, font-weight
   */
  /**
   * Selectively apply font-family, font-style and font-weights that differ from
   * the base settings
   */
  font-weight: 500;
}
.scoped .table--basic th {
  text-align: left;
  padding-right: 12px;
}
.scoped .table--basic td {
  padding-right: 12px;
}
.scoped .table--small th,
.scoped .table--small td {
  font-size: 0.875rem;
}

/**
 * Shake (Horizontal)
 * ----------------------------------------
 * Shake left-to-right.
 */
.scoped .shake-horizontal {
  -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@-webkit-keyframes shake-horizontal {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}

@keyframes shake-horizontal {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  80% {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }
  90% {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }
}
/**
 * Shake (Horizontal) "Subtle"
 * ----------------------------------------
 * Shake left-to-right but less aggressive.
 */
.scoped .shake-horizontal-subtle {
  -webkit-animation: shake-horizontal-subtle 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: shake-horizontal-subtle 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@-webkit-keyframes shake-horizontal-subtle {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  90% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
  }
}

@keyframes shake-horizontal-subtle {
  0%, 100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateX(-4px);
            transform: translateX(-4px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  80% {
    -webkit-transform: translateX(2px);
            transform: translateX(2px);
  }
  90% {
    -webkit-transform: translateX(-2px);
            transform: translateX(-2px);
  }
}
/**
 * Shake (Vertibal)
 * ----------------------------------------
 * Shake up-and-down.
 */
.scoped .shake-vertical {
  -webkit-animation: shake-vertical 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: shake-vertical 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@-webkit-keyframes shake-vertical {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}

@keyframes shake-vertical {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
            transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
            transform: translateY(-6.4px);
  }
}
/**
 * Shake (Vertical) "Subtle"
 * ----------------------------------------
 * Shake up-and-down but less aggressive.
 */
.scoped .shake-vertical-subtle {
  -webkit-animation: shake-vertical-subtle 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
          animation: shake-vertical-subtle 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@-webkit-keyframes shake-vertical-subtle {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  80% {
    -webkit-transform: translateY(1.6px);
            transform: translateY(1.6px);
  }
  90% {
    -webkit-transform: translateY(-1.6px);
            transform: translateY(-1.6px);
  }
}

@keyframes shake-vertical-subtle {
  0%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10%, 30%, 50%, 70% {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
  }
  20%, 40%, 60% {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  80% {
    -webkit-transform: translateY(1.6px);
            transform: translateY(1.6px);
  }
  90% {
    -webkit-transform: translateY(-1.6px);
            transform: translateY(-1.6px);
  }
}