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

body {
  /**
   * Prefer system fonts (ala -apple-system-body)
   * Mac/iOS - SF
   * Chromebook/Android - Roboto
   * Windows - Helvetica
   * Linux - Helvetica, Arial
   **/
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  font-weight: 500;
}

pre {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
}

.badge {
  display: inline-block;
  border-radius: 3px;
  font-size: 85%;
  line-height: 1;
  font-weight: normal;
  padding: 4px 5px;
}

a.badge {
  text-decoration: none;
  color: inherit;
}

a.badge:hover {
  -webkit-box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625);
          box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625);
}

.badge--solid {
  color: #FFFFFF;
  background: #111111;
}

.badge--outline {
  border: 1px solid #DDDDDD;
  color: #444;
  background: #FFFFFF;
}

.btn, .unstyled-button {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  line-height: 1.2;
  padding: .75em 1em;
  margin: 0;
  height: auto;
  border: 1px solid transparent;
  vertical-align: middle;
  -webkit-appearance: none;
  color: inherit;
  background-color: transparent;
}

.btn.-icon-only {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1em;
}

.btn:hover, .btn:active, .btn:focus {
  text-decoration: none;
  outline: none;
}

.btn .emoji {
  margin-top: -4px;
  margin-bottom: -2px;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.unstyled-button {
  padding: 0;
  line-height: inherit;
  border: none;
}

.btn-primary {
  color: #FFFFFF;
  background-color: #14CC80;
  border-radius: 3px;
  font-weight: inherit;
}

/* Since we've got bootstrap.css on the page, we need to re-define this class
with more specificity to target a tags. Bootstrap overrides the base colors for
all a-tags, and .btn-primary can't get it's own styles on there. */

a.btn-primary {
  color: #FFFFFF;
}

.btn-primary:hover {
  -webkit-box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625);
          box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625);
}

.btn-primary:focus {
  border-color: rgba(0, 0, 0, .125);
}

.btn-primary:active {
  outline: 0;
  -webkit-box-shadow: inset 0 0 0 10rem rgba(0, 0, 0, .125),
    inset 0 3px 4px 0 rgba(0, 0, 0, .0625),
    0 0 1px rgba(0, 0, 0, .0625);
          box-shadow: inset 0 0 0 10rem rgba(0, 0, 0, .125),
    inset 0 3px 4px 0 rgba(0, 0, 0, .0625),
    0 0 1px rgba(0, 0, 0, .0625);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-outline {
  border-radius: 3px;
}

/* Keep the focus style on when it's being used on a summary in an open details
 * element */

.btn-outline:hover, details[open] summary.btn-outline {
  -webkit-box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625);
          box-shadow: inset 0 0 0 20rem rgba(0, 0, 0, .0625);
}

.btn-outline:focus {
  border-color: rgba(0, 0, 0, .125);
}

.btn-outline:active {
  outline: 0;
  -webkit-box-shadow: inset 0 0 0 10rem rgba(0, 0, 0, .125),
    inset 0 3px 4px 0 rgba(0, 0, 0, .0625),
    0 0 1px rgba(0, 0, 0, .0625);
          box-shadow: inset 0 0 0 10rem rgba(0, 0, 0, .125),
    inset 0 3px 4px 0 rgba(0, 0, 0, .0625),
    0 0 1px rgba(0, 0, 0, .0625);
}

.btn-outline:disabled,
.btn-outline.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px;
  height: 44px; /* Needed because the badge causes the height to increase */
  border-width: 0 0 3px 0;
  border-color: transparent;
  margin-bottom: -1px;
  -webkit-transition: border-color 90ms;
  transition: border-color 90ms;
}

.btn-tab:hover {
  border-color: #beead8;
  color: currentColor;
}

.btn-tab--active, .btn-tab--active:active, .btn-tab--active:hover {
  border-color: #14CC80;
}

.btn-tab--compact {
  padding: 0 15px;
  height: 37px;
  border-bottom-width: 2px;
}

.btn-tab--monochrome:hover {
  border-color: #8E8E8E;
}

.btn-tab--monochrome.btn-tab--active, .btn-tab--monochrome.btn-tab--active:active, .btn-tab--monochrome.btn-tab--active:hover {
  border-color: #111111;
}

/* Optically adjust the right padding */

.btn-tab--badged {
  padding-right: 15px;
}

.btn-tab--badged.btn-tab--compact {
  padding-right: 10px;
}

.backdrop-blur {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
}

.bg-warning-stripes {
  background: repeating-linear-gradient(
    -55deg,
    #FFF1D9,
    #FFF1D9 10px,
    #FFFFEB 10px,
    #FFFFEB 20px
  );
}

.bg-chevron-right {
  /* This is a URL encoded version of the `chevron-right.svg`:
   *
   * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px">
   *   <polyline points="6.25,2.5 13.75,10 6.25,17.5" stroke="#8E8E8E" fill="none" strokeWidth="4" strokeLinecap="round" strokeMiterlimit="10"/>
   * </svg>
   *
   * It seems really hard to embed this using webpack, so it's hard coded for
   * now (and since this thing will change once in a blue moon...)
   */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%20width=%2220px%22%20height=%2220px%22%3E%3Cpolyline%20points=%226.25,2.5%2013.75,10%206.25,17.5%22%20stroke=%22%238E8E8E%22%20fill=%22none%22%20strokeWidth=%224%22%20strokeLinecap=%22round%22%20strokeMiterlimit=%2210%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 15px 15px;
}

/* Use this suite of background color utilities to directly style elements. */

.bg-black     { background-color: #111111 }

.bg-gray      { background-color: #DDDDDD }

.bg-dark-gray { background-color: #8E8E8E; }

.bg-very-dark-gray { background-color: #444; }

.bg-silver    { background-color: #F9FAFB }

.bg-white     { background-color: #FFFFFF }

.bg-aqua  { background-color: #7FDBFF }

.bg-blue  { background-color: #337ab7 }

.bg-navy  { background-color: #001F3F }

.bg-teal  { background-color: #39CCCC }

.bg-green { background-color: #2ECC40 }

.bg-olive { background-color: #3D9970 }

.bg-lime  { background-color: #14CC80 }

.bg-yellow    { background-color: #FFDC00 }

.bg-orange    { background-color: #FFBA11 }

.bg-light-red { background-color: #D0A9A7 }

.bg-red       { background-color: #F45856 }

.bg-dark-red  { background-color: #a94442 }

.bg-fuchsia   { background-color: #F012BE }

.bg-purple    { background-color: #B10DC9 }

.bg-maroon    { background-color: #85144B }

.bg-denim     { background-color: #202632 }

.bg-dark-denim { background-color: #151921 }

.hover-bg-silver:hover { background-color: #F9FAFB }

.hover-bg-gray:hover { background-color: #DDDDDD }

.hover-bg-dark-gray:hover { background-color: #8E8E8E }

.hover-bg-white:hover { background-color: white; }

.hover-bg-dark-denim:hover { background-color: #151921; }

.hover-bg-denim:hover { background-color: #202632; }

.border-transparent   { border-color: transparent; }

.border-black         { border-color: #111111 }

.border-gray          { border-color: #DDDDDD }

.border-dark-gray     { border-color: #8E8E8E }

.border-silver        { border-color: #F9FAFB }

.border-white         { border-color: #FFFFFF }

.border-aqua          { border-color: #7FDBFF }

.border-blue          { border-color: #337ab7 }

.border-navy          { border-color: #001F3F }

.border-teal          { border-color: #39CCCC }

.border-green         { border-color: #2ECC40 }

.border-olive         { border-color: #3D9970 }

.border-lime          { border-color: #14CC80 }

.border-yellow        { border-color: #FFDC00 }

.border-orange        { border-color: #FFBA11 }

.border-light-red     { border-color: #F45856 }

.border-red           { border-color: #F45856 }

.border-dark-red      { border-color: #F45856 }

.border-fuchsia       { border-color: #F012BE }

.border-purple        { border-color: #B10DC9 }

.border-maroon        { border-color: #85144B }

.border-current-color { border-color: currentColor; }

.border-bottom-child > * {
  border-bottom: 1px solid transparent;
}

.border-bottom-child > *:last-child {
  border-bottom: 0;
}

.border-bottom-child-gray > * {
  border-bottom-color: #DDDDDD;
}

/*
	Classes to use to set SVG color properties

	Create them as you need.
*/

.stroke-black      { stroke: #111111 }

.stroke-gray       { stroke: #DDDDDD }

.stroke-dark-gray  { stroke: #8E8E8E }

.stroke-silver     { stroke: #F9FAFB }

.stroke-white      { stroke: #FFFFFF }

.stroke-lime       { stroke: #14CC80 }

.hover-color-inherit:hover,
.hover-color-inherit-parent:hover .hover-color-inherit { color: inherit }

.hover-green:hover {
  color: #2ECC40;
}

.hover-green:hover .hover-green-child,
.hover-green:active .hover-green-child,
.hover-green:focus .hover-green-child {
  background-color: #2ECC40;
}

.hover-lime:hover {
  color: #14CC80;
}

.hover-lime:hover .hover-lime-child,
.hover-lime:active .hover-lime-child,
.hover-lime:focus .hover-lime-child {
  background-color: #14CC80;
}

.hover-dark-lime:hover,
.hover-dark-lime:active,
.hover-dark-lime:focus {
  color: #00BB64;
}

.hover-white:hover {
  color: #FFFFFF;
}

.hover-white:hover .hover-white-child,
.hover-white:active .hover-white-child,
.hover-white:focus .hover-white-child {
  background-color: #FFFFFF;
}

.hover-gray:hover {
  color: #DDDDDD;
}

.hover-gray:hover .hover-gray-child,
.hover-gray:active .hover-gray-child,
.hover-gray:focus .hover-gray-child {
  background-color: #DDDDDD;
}

.hover-dark-gray:hover {
  color: #8E8E8E;
}

.hover-dark-gray:hover .hover-dark-gray-child,
.hover-dark-gray:active .hover-dark-gray-child,
.hover-dark-gray:focus .hover-dark-gray-child {
  background-color: #8E8E8E;
}

.hover-black:hover {
  color: #111111;
}

.hover-black:hover .hover-black-child,
.hover-black:active .hover-black-child,
.hover-black:focus .hover-black-child {
  background-color: #111111;
}

.hover-blue:hover {
  color: #337ab7;
}

.hover-blue:hover .hover-blue-child,
.hover-blue:active .hover-blue-child,
.hover-blue:focus .hover-blue-child {
  background-color: #337ab7;
}

.hover-navy:hover {
  color: #001F3F;
}

.hover-navy:hover .hover-navy-child,
.hover-navy:active .hover-navy-child,
.hover-navy:focus .hover-navy-child {
  background-color: #001F3F;
}

.hover-faded, .hover-faded-children * {
  opacity: .75;
}

.hover-faded:hover,
.hover-faded-children:hover *,
.hover-faded-children:active *,
.hover-faded-children:focus * {
  opacity: 1;
}

.hover-underline:hover {
  text-decoration: underline;
}

.hover-underline-parent:hover .hover-underline-child {
  text-decoration: underline;
}

.hover-underline-dotted:hover {
  border-bottom: 1px dashed currentColor;
}

.focus-green:focus {
  color: #2ECC40;
}

.focus-lime:focus {
  color: #14CC80;
}

.focus-blue:focus {
  color: #337ab7;
}

.focus-white:focus {
  color: #FFFFFF !important;
}

.focus-black:focus {
  color: #111111;
}

.shadow {
  -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, .3),
  			  0 0 0 1px rgba(0, 0, 0, .03);
          box-shadow: 0 4px 10px rgba(0, 0, 0, .3),
  			  0 0 0 1px rgba(0, 0, 0, .03);
}

.shadow-subtle {
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
          box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}

.rounded-2 { border-radius: 6px; }

.rounded-3 { border-radius: 9px; }

/* transition-appear-pop */

.transition-appear-pop-enter {
  -webkit-transform: scale(0);
          transform: scale(0);
}

.transition-appear-pop-enter.transition-appear-pop-enter-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.transition-appear-pop-exit {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.transition-appear-pop-exit.transition-appear-pop-exit-active {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 120ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: -webkit-transform 120ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: transform 120ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: transform 120ms cubic-bezier(0.6, -0.28, 0.735, 0.045), -webkit-transform 120ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* changelog new button */

.transition-changelog-appear-appear {
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
}

.transition-changelog-appear-appear.transition-changelog-appear-appear-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s;
  transition: -webkit-transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s;
  transition: transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s, -webkit-transform 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s;
}

/* transition opacity */

.transition-opacity-enter {
  opacity: 0;
}

.transition-opacity-enter.transition-opacity-enter-active {
  opacity: 1;
  -webkit-transition: opacity 90ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 90ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 90ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 90ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.transition-opacity-exit {
  opacity: 1;
}

.transition-opacity-exit.transition-opacity-exit-active {
  opacity: 0;
  -webkit-transition: opacity 90ms cubic-bezier(0.6, -0.28, 0.735, 0.045), -webkit-transform 100ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 90ms cubic-bezier(0.6, -0.28, 0.735, 0.045), -webkit-transform 100ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 90ms cubic-bezier(0.6, -0.28, 0.735, 0.045), transform 100ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 90ms cubic-bezier(0.6, -0.28, 0.735, 0.045), transform 100ms cubic-bezier(0.6, -0.28, 0.735, 0.045), -webkit-transform 100ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* transition slide-up */

.transition-slide-up-enter {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}

.transition-slide-up-enter.transition-slide-up-enter-active {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 75ms linear, -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 75ms linear, -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 75ms linear, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 75ms linear, transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.transition-slide-up-exit {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.transition-slide-up-exit.transition-slide-up-exit-active {
  opacity: 0;
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
  -webkit-transition: opacity 200ms linear, -webkit-transform 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 200ms linear, -webkit-transform 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 200ms linear, transform 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 200ms linear, transform 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045), -webkit-transform 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* transition slide-down-fast */

.transition-slide-down-fast-enter {
  opacity: 0;
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}

.transition-slide-down-fast-enter.transition-slide-down-fast-enter-active {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 50ms linear, -webkit-transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 50ms linear, -webkit-transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 50ms linear, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 50ms linear, transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.transition-slide-down-fast-exit {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.transition-slide-down-fast-exit.transition-slide-down-fast-exit-active {
  opacity: 0;
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
  -webkit-transition: opacity 100ms linear, -webkit-transform 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 100ms linear, -webkit-transform 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 100ms linear, transform 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition: opacity 100ms linear, transform 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045), -webkit-transform 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

/* Different animations */

@-webkit-keyframes scale-up {
  from { -webkit-transform: scale(0); transform: scale(0); opacity: .25; }
  to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

@keyframes scale-up {
  from { -webkit-transform: scale(0); transform: scale(0); opacity: .25; }
  to { -webkit-transform: scale(1); transform: scale(1); opacity: 1; }
}

.animation-pop-in {
  will-change: opacity, transform;
  opacity: .25;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: scale-up 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
          animation: scale-up 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@-webkit-keyframes increase-stroke-dashoffset-300 {
  from { stroke-dashoffset: 300; }
  to { stroke-dashoffset: 0; }
}

@keyframes increase-stroke-dashoffset-300 {
  from { stroke-dashoffset: 300; }
  to { stroke-dashoffset: 0; }
}

.animation-stroke-dashoffset-300 {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  -webkit-animation: increase-stroke-dashoffset-300 2s forwards;
          animation: increase-stroke-dashoffset-300 2s forwards;
}

@-webkit-keyframes animation-slide-in-from-right {
  from { -webkit-transform: translate(25px,0px); transform: translate(25px,0px); }
  to { -webkit-transform: translate(0px,0px); transform: translate(0px,0px); }
}

@keyframes animation-slide-in-from-right {
  from { -webkit-transform: translate(25px,0px); transform: translate(25px,0px); }
  to { -webkit-transform: translate(0px,0px); transform: translate(0px,0px); }
}

.animation-slide-in-from-right {
  will-change: transform;
  -webkit-transform: translate(25px,0px);
          transform: translate(25px,0px);
  -webkit-animation: animation-slide-in-from-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
          animation: animation-slide-in-from-right 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@-webkit-keyframes animation-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes animation-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animation-fade-in {
  will-change: opacity;
  opacity: 0;
  -webkit-animation: animation-fade-in 200ms linear forwards;
          animation: animation-fade-in 200ms linear forwards;
}

.animation-height {
  -webkit-transition: height 200ms;
  transition: height 200ms;
}

@-webkit-keyframes animation-loading-bar {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}

@keyframes animation-loading-bar {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  }
}

.animation-loading-bar {
  background: -webkit-gradient(linear, left top, right top, from(#DDDDDD), color-stop(#FFFFFF), color-stop(#DDDDDD), color-stop(#FFFFFF), to(#DDDDDD));
  background: linear-gradient(to right, #DDDDDD, #FFFFFF, #DDDDDD, #FFFFFF, #DDDDDD);
  background-size: 200% 100%;
  -webkit-animation: animation-loading-bar 0.5s infinite linear;
          animation: animation-loading-bar 0.5s infinite linear;
  opacity: 0.5;
}

/* Turn off the animation off for the loading bar when Percy is taking a
 * snapshopt for visual regression testing. Depending on how fast the browser
 * is feeling in CI, it's possible the animation may be at a different stage
 * than last time a snapshopt was taking, leading to flakey Percy tests */

@media only percy {
  .animation-loading-bar {
    -webkit-animation: none;
            animation: none;
  }
}

/* Animation modification utilities */

.animation-delay-1 { -webkit-animation-delay: 1s; animation-delay: 1s; }

.animation-delay-2 { -webkit-animation-delay: 2s; animation-delay: 2s; }

.animation-delay-3 { -webkit-animation-delay: 3s; animation-delay: 3s; }

.animation-delay-4 { -webkit-animation-delay: 4s; animation-delay: 4s; }

.animation-duration-1 { -webkit-animation-duration: 1s; animation-duration: 1s; }

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

.animation-duration-3 { -webkit-animation-duration: 3s; animation-duration: 3s; }

.animation-duration-4 { -webkit-animation-duration: 4s; animation-duration: 4s; }

@-webkit-keyframes animation-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes animation-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

.animation-spin {
  will-change: transform;
  -webkit-animation: animation-spin 0.55s infinite linear;
          animation: animation-spin 0.55s infinite linear;
}

.animation-spin-slow {
  will-change: transform;
  -webkit-animation: animation-spin 1.05s infinite linear;
          animation: animation-spin 1.05s infinite linear;
}

/* Allow CSS animations to be disabled (used in integration tests) */

.animation-disable * {
  -webkit-transition-duration: 0s !important;
          transition-duration: 0s !important;
  -webkit-animation-duration: 0s !important;
          animation-duration: 0s !important;
}

.user-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.pointer-events-none {
  pointer-events: none;
}

.small {
  font-size: 85%;
}

.underline-dotted {
  border-bottom: 1px dashed currentColor;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.wrap-break-word {
  word-wrap: break-word;
}

.uppercase {
  text-transform: uppercase;
}

@media (min-width: 40em) {
  .sm-right-align { text-align: right !important }
}

@media (min-width: 52em) {
  .md-right-align { text-align: right !important }
}

@media (min-width: 1200px) {
  .lg-right-align { text-align: right !important }
}

.grayscale {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.system {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, sans-serif;
}

.monospace {
  /* monospace fonts always render larger than the current font size, so we'll
   * shrink it down a little bit to match the text around it */
  font-size: 90%;
  font-family: "SFMono-Regular", Monaco, Menlo, Consolas, "Liberation Mono", Courier, monospace;
}

.tabular-numerals {
  /* Enables OpenType tabular numerals */
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum"; /* not the "correct" property, but it works in IE10+ */
  font-variant-numeric: tabular-nums;
}

.thin{ font-weight: 200; }

.light{ font-weight: 300; }

.semi-bold{ font-weight: 500; }

.letter-spacing-0 { letter-spacing: 0; }

.letter-spacing-1 { letter-spacing: .025em; }

.letter-spacing-2 { letter-spacing: .5em; }

.letter-spacing-3 { letter-spacing: .1em; }

.icon-ml {
  margin-left: 8px;
}

.icon-mr {
  margin-right: 8px;
}

.input {
  display: block;
  width: 100%;
  padding: .43em .86em;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: .3em;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

  /* disable iOS' extra inner shadows */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none
}

.input::-webkit-input-placeholder {
  color: #8E8E8E;
}

.input:-ms-input-placeholder {
  color: #8E8E8E;
}

.input::-ms-input-placeholder {
  color: #8E8E8E;
}

.input::placeholder {
  color: #8E8E8E;
}

.input:focus {
  border-color: #888;
  outline: 0;
}

.input.borderless {
  border-color: #fff;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.input.borderless:focus {
  border-color: #fff;
}

.input.is-error {
  border-color: #D0A9A7;
}

.input.is-error:focus {
  border-color: #a94442;
}

.input:disabled {
  color: #8E8E8E;
  background-color: #F9FAFB;
}

.select {
  display: block;
  width: 100%;
  padding: .43em .86em;
  font-size: 14px;
  line-height: 1.42857143;
  height: 2.5em;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: .3em;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
}

.select:focus {
  border-color: #888;
  outline: none;
}

.select.is-error {
  border-color: #D0A9A7;
}

.select.is-error:focus {
  border-color: #a94442;
}

.select:disabled {
  color: #8E8E8E;
  background-color: #F9FAFB;
}

/* This prevents a weird flicker when clicking Radio buttons in Safari... I
 * found this answer randomly on StackOverflow. No idea how/why it works... but
 * it does! #programming */

.radio {
  -webkit-transform: translateZ(0);
}

/* This prevents a weird flicker when clicking Radio buttons in Safari... I
 * found this answer randomly on StackOverflow. No idea how/why it works... but
 * it does! #programming */

.checkbox {
  -webkit-transform: translateZ(0);
}

/* Use this suite of color utilities to directly style elements. */

.black          { color: #111111 }

.gray           { color: #DDDDDD }

.dark-gray      { color: #8E8E8E }

.very-dark-gray { color: #444 }

.silver         { color: #F9FAFB }

.white          { color: #FFFFFF }

.aqua       { color: #7FDBFF }

.blue       { color: #337ab7 }

.navy       { color: #001F3F }

.teal       { color: #39CCCC }

.green      { color: #2ECC40 }

.olive      { color: #3D9970 }

.lime       { color: #14CC80 }

.dark-lime  { color: #00BB64 }

.yellow    { color: #FFDC00 }

.orange    { color: #FFBA11 }

.light-red { color: #D0A9A7 }

.red       { color: #F45856 }

.dark-red  { color: #a94442 }

.fuchsia   { color: #F012BE }

.purple    { color: #B10DC9 }

.maroon    { color: #85144B }

.denim     { color: #202632 }

.dark-denim { color: #151921 }

.color-inherit { color: inherit }

.muted { opacity: .5 }

.outline-none {
  outline: 0;
}

/*
  * Styles for annotation bodies
  * Note that this is defined separately for the app and emails,
  * so both places should be kept in sync as much as possible.
  */

.annotation-body dt {
  font-weight: bold;
}

.annotation-body dd {
  margin-left: 0;
}

.annotation-body dd, dt {
  line-height: 1.42857;
}

.annotation-body p {
    margin: 0 0 10px
}

.annotation-body pre {
  font-family: "SFMono-Regular", Monaco, Menlo, Consolas, "Liberation Mono", Courier, monospace;
  font-size: 12px;
  padding: 10px;
  border: 1px solid #DDDDDD;
  background-color: #F9FAFB;
  color: #444;
  margin: 1em 0;
  border-radius: 3px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.annotation-body code {
  font-family: "SFMono-Regular", Monaco, Menlo, Consolas, "Liberation Mono", Courier, monospace;
  font-size: 12px;
  line-height: 17px;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 2px 5px;
  border: 1px solid #DDDDDD;
  color: #8E8E8E;
  border-radius: 3px;
}

.annotation-body pre code {
  color: inherit;
  border: 0;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
}

.annotation-body pre.term {
  background: #171717;
  color: white;
  border-color: transparent;
}

.annotation-body details > summary {
  cursor: pointer;
}

.annotation-body details[open] > summary {
  margin-bottom: 1em;
}

.annotation-body details[open] {
  margin-bottom: 1em;
}

/*
 * table and kbd styles borrowed from GitHub's primer project:
 * https://github.com/primer/primer/blob/df7a882778385c5e1defd190c0e933ff1c591a16/modules/primer-markdown/lib/tables.scss
 */

.annotation-body table {
  display: block;
  width: 100%;
  overflow: auto;
}

.annotation-body table th {
  font-weight: 500; /* equivalent of .semi-bold */
}

.annotation-body table th,
.annotation-body table td {
  padding: 6px 13px;
  border: 1px solid #dddddd; /* equivalent of .border-gray */
}

.annotation-body table tr {
  background-color: #fff;
  border-top: 1px solid #dddddd; /* equivalent of .border-gray */
}

.annotation-body table tr:nth-child(2n) {
  background-color: #f9fafb; /* equivalent of .bg-silver */
}

.annotation-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 #959da5;
          box-shadow: inset 0 -1px 0 #959da5
}

.details-reset > summary {
  /* Hides in Firefox */
  list-style: none

  /* Hide in Safari/Chrome */
}

.details-reset > summary::-webkit-details-marker {
  display: none;
}

/* Popups are positioned relative to the details element (usually right
 * underneath them */

.details-popup {
  position: relative;
}

/* The the popup is showing, stretch an invisible element underneath it to
 * capture clicks for the summary element (which in turn, re-toggles the
 * summary when clicked) */

.details-popup[open] > summary:before {
  background: transparent;
  bottom: 0;
  content: " ";
  cursor: default;
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 80;
}

/* Make sure the details popup is above the secret hidden element */

.details-popup[open] > details-menu, .details-popup[open] > details {
  z-index: 100;
}

.rouge__table td:empty:after {
  content: "\A0";
}

.rouge__lineno {
  vertical-align: top;
  min-width: 25px;
  padding: 0 9px 0 3px;
  text-align: right;
  color: #8E8E8E;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
}

.rouge__lineno::before {
  content: attr(data-line-number);
}

@media (min-width: 1200px) {
  .lg-m0  { margin:        0 }
  .lg-mt0 { margin-top:    0 }
  .lg-mr0 { margin-right:  0 }
  .lg-mb0 { margin-bottom: 0 }
  .lg-ml0 { margin-left:   0 }
  .lg-mx0 { margin-left:   0; margin-right:  0 }
  .lg-my0 { margin-top:    0; margin-bottom: 0 }

  .lg-m1  { margin:        5px }
  .lg-mt1 { margin-top:    5px }
  .lg-mr1 { margin-right:  5px }
  .lg-mb1 { margin-bottom: 5px }
  .lg-ml1 { margin-left:   5px }
  .lg-mx1 { margin-left:   5px; margin-right:  5px }
  .lg-my1 { margin-top:    5px; margin-bottom: 5px }

  .lg-m2  { margin:        10px }
  .lg-mt2 { margin-top:    10px }
  .lg-mr2 { margin-right:  10px }
  .lg-mb2 { margin-bottom: 10px }
  .lg-ml2 { margin-left:   10px }
  .lg-mx2 { margin-left:   10px; margin-right:  10px }
  .lg-my2 { margin-top:    10px; margin-bottom: 10px }

  .lg-m3  { margin:        15px }
  .lg-mt3 { margin-top:    15px }
  .lg-mr3 { margin-right:  15px }
  .lg-mb3 { margin-bottom: 15px }
  .lg-ml3 { margin-left:   15px }
  .lg-mx3 { margin-left:   15px; margin-right:  15px }
  .lg-my3 { margin-top:    15px; margin-bottom: 15px }

  .lg-m4  { margin:        20px }
  .lg-mt4 { margin-top:    20px }
  .lg-mr4 { margin-right:  20px }
  .lg-mb4 { margin-bottom: 20px }
  .lg-ml4 { margin-left:   20px }
  .lg-mx4 { margin-left:   20px; margin-right:  20px }
  .lg-my4 { margin-top:    20px; margin-bottom: 20px }

  .lg-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
  .lg-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
  .lg-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
  .lg-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }

  .lg-ml-auto { margin-left:  auto }
  .lg-mr-auto { margin-right: auto }
  .lg-mx-auto { margin-left: auto; margin-right: auto; }
}

@media (min-width: 52em) {
  .md-m0  { margin:        0 }
  .md-mt0 { margin-top:    0 }
  .md-mr0 { margin-right:  0 }
  .md-mb0 { margin-bottom: 0 }
  .md-ml0 { margin-left:   0 }
  .md-mx0 { margin-left:   0; margin-right:  0 }
  .md-my0 { margin-top:    0; margin-bottom: 0 }

  .md-m1  { margin:        5px }
  .md-mt1 { margin-top:    5px }
  .md-mr1 { margin-right:  5px }
  .md-mb1 { margin-bottom: 5px }
  .md-ml1 { margin-left:   5px }
  .md-mx1 { margin-left:   5px; margin-right:  5px }
  .md-my1 { margin-top:    5px; margin-bottom: 5px }

  .md-m2  { margin:        10px }
  .md-mt2 { margin-top:    10px }
  .md-mr2 { margin-right:  10px }
  .md-mb2 { margin-bottom: 10px }
  .md-ml2 { margin-left:   10px }
  .md-mx2 { margin-left:   10px; margin-right:  10px }
  .md-my2 { margin-top:    10px; margin-bottom: 10px }

  .md-m3  { margin:        15px }
  .md-mt3 { margin-top:    15px }
  .md-mr3 { margin-right:  15px }
  .md-mb3 { margin-bottom: 15px }
  .md-ml3 { margin-left:   15px }
  .md-mx3 { margin-left:   15px; margin-right:  15px }
  .md-my3 { margin-top:    15px; margin-bottom: 15px }

  .md-m4  { margin:        20px }
  .md-mt4 { margin-top:    20px }
  .md-mr4 { margin-right:  20px }
  .md-mb4 { margin-bottom: 20px }
  .md-ml4 { margin-left:   20px }
  .md-mx4 { margin-left:   20px; margin-right:  20px }
  .md-my4 { margin-top:    20px; margin-bottom: 20px }

  .md-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
  .md-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
  .md-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
  .md-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }

  .md-ml-auto { margin-left:  auto }
  .md-mr-auto { margin-right: auto }
  .md-mx-auto { margin-left: auto; margin-right: auto; }
}

@media (min-width: 40em) {
  .sm-m0  { margin:        0 }
  .sm-mt0 { margin-top:    0 }
  .sm-mr0 { margin-right:  0 }
  .sm-mb0 { margin-bottom: 0 }
  .sm-ml0 { margin-left:   0 }
  .sm-mx0 { margin-left:   0; margin-right:  0 }
  .sm-my0 { margin-top:    0; margin-bottom: 0 }

  .sm-m1  { margin:        5px }
  .sm-mt1 { margin-top:    5px }
  .sm-mr1 { margin-right:  5px }
  .sm-mb1 { margin-bottom: 5px }
  .sm-ml1 { margin-left:   5px }
  .sm-mx1 { margin-left:   5px; margin-right:  5px }
  .sm-my1 { margin-top:    5px; margin-bottom: 5px }

  .sm-m2  { margin:        10px }
  .sm-mt2 { margin-top:    10px }
  .sm-mr2 { margin-right:  10px }
  .sm-mb2 { margin-bottom: 10px }
  .sm-ml2 { margin-left:   10px }
  .sm-mx2 { margin-left:   10px; margin-right:  10px }
  .sm-my2 { margin-top:    10px; margin-bottom: 10px }

  .sm-m3  { margin:        15px }
  .sm-mt3 { margin-top:    15px }
  .sm-mr3 { margin-right:  15px }
  .sm-mb3 { margin-bottom: 15px }
  .sm-ml3 { margin-left:   15px }
  .sm-mx3 { margin-left:   15px; margin-right:  15px }
  .sm-my3 { margin-top:    15px; margin-bottom: 15px }

  .sm-m4  { margin:        20px }
  .sm-mt4 { margin-top:    20px }
  .sm-mr4 { margin-right:  20px }
  .sm-mb4 { margin-bottom: 20px }
  .sm-ml4 { margin-left:   20px }
  .sm-mx4 { margin-left:   20px; margin-right:  20px }
  .sm-my4 { margin-top:    20px; margin-bottom: 20px }

  .sm-mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1) }
  .sm-mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2) }
  .sm-mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3) }
  .sm-mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4) }

  .sm-ml-auto { margin-left:  auto }
  .sm-mr-auto { margin-right: auto }
  .sm-mx-auto { margin-left:  auto; margin-right: auto }
}

@media (min-width: 1200px) {
  .lg-p0  { padding:        0 }
  .lg-pt0 { padding-top:    0 }
  .lg-pr0 { padding-right:  0 }
  .lg-pb0 { padding-bottom: 0 }
  .lg-pl0 { padding-left:   0 }
  .lg-px0 { padding-left:   0; padding-right:  0 }
  .lg-py0 { padding-top:    0; padding-bottom: 0 }

  .lg-p1  { padding:        5px }
  .lg-pt1 { padding-top:    5px }
  .lg-pr1 { padding-right:  5px }
  .lg-pb1 { padding-bottom: 5px }
  .lg-pl1 { padding-left:   5px }
  .lg-px1 { padding-left:   5px; padding-right:  5px }
  .lg-py1 { padding-top:    5px; padding-bottom: 5px }

  .lg-p2  { padding:        10px }
  .lg-pt2 { padding-top:    10px }
  .lg-pr2 { padding-right:  10px }
  .lg-pb2 { padding-bottom: 10px }
  .lg-pl2 { padding-left:   10px }
  .lg-px2 { padding-left:   10px; padding-right:  10px }
  .lg-py2 { padding-top:    10px; padding-bottom: 10px }

  .lg-p3  { padding:        15px }
  .lg-pt3 { padding-top:    15px }
  .lg-pr3 { padding-right:  15px }
  .lg-pb3 { padding-bottom: 15px }
  .lg-pl3 { padding-left:   15px }
  .lg-px3 { padding-left:   15px; padding-right:  15px }
  .lg-py3 { padding-top:    15px; padding-bottom: 15px }

  .lg-p4  { padding:        20px }
  .lg-pt4 { padding-top:    20px }
  .lg-pr4 { padding-right:  20px }
  .lg-pb4 { padding-bottom: 20px }
  .lg-pl4 { padding-left:   20px }
  .lg-px4 { padding-left:   20px; padding-right:  20px }
  .lg-py4 { padding-top:    20px; padding-bottom: 20px }
}

@media (min-width: 52em) {
  .md-p0  { padding:        0 }
  .md-pt0 { padding-top:    0 }
  .md-pr0 { padding-right:  0 }
  .md-pb0 { padding-bottom: 0 }
  .md-pl0 { padding-left:   0 }
  .md-px0 { padding-left:   0; padding-right:  0 }
  .md-py0 { padding-top:    0; padding-bottom: 0 }

  .md-p1  { padding:        5px }
  .md-pt1 { padding-top:    5px }
  .md-pr1 { padding-right:  5px }
  .md-pb1 { padding-bottom: 5px }
  .md-pl1 { padding-left:   5px }
  .md-px1 { padding-left:   5px; padding-right:  5px }
  .md-py1 { padding-top:    5px; padding-bottom: 5px }

  .md-p2  { padding:        10px }
  .md-pt2 { padding-top:    10px }
  .md-pr2 { padding-right:  10px }
  .md-pb2 { padding-bottom: 10px }
  .md-pl2 { padding-left:   10px }
  .md-px2 { padding-left:   10px; padding-right:  10px }
  .md-py2 { padding-top:    10px; padding-bottom: 10px }

  .md-p3  { padding:        15px }
  .md-pt3 { padding-top:    15px }
  .md-pr3 { padding-right:  15px }
  .md-pb3 { padding-bottom: 15px }
  .md-pl3 { padding-left:   15px }
  .md-px3 { padding-left:   15px; padding-right:  15px }
  .md-py3 { padding-top:    15px; padding-bottom: 15px }

  .md-p4  { padding:        20px }
  .md-pt4 { padding-top:    20px }
  .md-pr4 { padding-right:  20px }
  .md-pb4 { padding-bottom: 20px }
  .md-pl4 { padding-left:   20px }
  .md-px4 { padding-left:   20px; padding-right:  20px }
  .md-py4 { padding-top:    20px; padding-bottom: 20px }
}

@media (min-width: 40em) {
  .sm-p0  { padding:        0 }
  .sm-pt0 { padding-top:    0 }
  .sm-pr0 { padding-right:  0 }
  .sm-pb0 { padding-bottom: 0 }
  .sm-pl0 { padding-left:   0 }
  .sm-px0 { padding-left:   0; padding-right:  0 }
  .sm-py0 { padding-top:    0; padding-bottom: 0 }

  .sm-p1  { padding:        5px }
  .sm-pt1 { padding-top:    5px }
  .sm-pr1 { padding-right:  5px }
  .sm-pb1 { padding-bottom: 5px }
  .sm-pl1 { padding-left:   5px }
  .sm-px1 { padding-left:   5px; padding-right:  5px }
  .sm-py1 { padding-top:    5px; padding-bottom: 5px }

  .sm-p2  { padding:        10px }
  .sm-pt2 { padding-top:    10px }
  .sm-pr2 { padding-right:  10px }
  .sm-pb2 { padding-bottom: 10px }
  .sm-pl2 { padding-left:   10px }
  .sm-px2 { padding-left:   10px; padding-right:  10px }
  .sm-py2 { padding-top:    10px; padding-bottom: 10px }

  .sm-p3  { padding:        15px }
  .sm-pt3 { padding-top:    15px }
  .sm-pr3 { padding-right:  15px }
  .sm-pb3 { padding-bottom: 15px }
  .sm-pl3 { padding-left:   15px }
  .sm-px3 { padding-left:   15px; padding-right:  15px }
  .sm-py3 { padding-top:    15px; padding-bottom: 15px }

  .sm-p4  { padding:        20px }
  .sm-pt4 { padding-top:    20px }
  .sm-pr4 { padding-right:  20px }
  .sm-pb4 { padding-bottom: 20px }
  .sm-pl4 { padding-left:   20px }
  .sm-px4 { padding-left:   20px; padding-right:  20px }
  .sm-py4 { padding-top:    20px; padding-bottom: 20px }
}

@media (max-width: 767px) {
  .xs-p0  { padding:        0 }
  .xs-pt0 { padding-top:    0 }
  .xs-pr0 { padding-right:  0 }
  .xs-pb0 { padding-bottom: 0 }
  .xs-pl0 { padding-left:   0 }
  .xs-px0 { padding-left:   0; padding-right:  0 }
  .xs-py0 { padding-top:    0; padding-bottom: 0 }

  .xs-p1  { padding:        5px }
  .xs-pt1 { padding-top:    5px }
  .xs-pr1 { padding-right:  5px }
  .xs-pb1 { padding-bottom: 5px }
  .xs-pl1 { padding-left:   5px }
  .xs-px1 { padding-left:   5px; padding-right:  5px }
  .xs-py1 { padding-top:    5px; padding-bottom: 5px }

  .xs-p2  { padding:        10px }
  .xs-pt2 { padding-top:    10px }
  .xs-pr2 { padding-right:  10px }
  .xs-pb2 { padding-bottom: 10px }
  .xs-pl2 { padding-left:   10px }
  .xs-px2 { padding-left:   10px; padding-right:  10px }
  .xs-py2 { padding-top:    10px; padding-bottom: 10px }

  .xs-p3  { padding:        15px }
  .xs-pt3 { padding-top:    15px }
  .xs-pr3 { padding-right:  15px }
  .xs-pb3 { padding-bottom: 15px }
  .xs-pl3 { padding-left:   15px }
  .xs-px3 { padding-left:   15px; padding-right:  15px }
  .xs-py3 { padding-top:    15px; padding-bottom: 15px }

  .xs-p4  { padding:        20px }
  .xs-pt4 { padding-top:    20px }
  .xs-pr4 { padding-right:  20px }
  .xs-pb4 { padding-bottom: 20px }
  .xs-pl4 { padding-left:   20px }
  .xs-px4 { padding-left:   20px; padding-right:  20px }
  .xs-py4 { padding-top:    20px; padding-bottom: 20px }
}

.scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
}

.scrollbar::-webkit-scrollbar:vertical {
    width: 11px;
}

.scrollbar::-webkit-scrollbar:horizontal {
    height: 11px;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* If there are any invalid HTML5 elements in the form, automatically disable
 * the submit button */

form.form:invalid input[type=submit]:not([formnovalidate]) {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Any changes to this file should also be made to: */

/* https://github.com/buildkite/terminal-to-html/blob/master/assets/terminal.css */

.term, .term-container {
  background: #171717;
  border-radius: 5px;
  color: white;
  word-break: break-word;
  word-wrap: break-word;
  font-family: "SFMono-Regular", Monaco, Menlo, Consolas, "Liberation Mono", Courier, monospace;
  font-size: 12px;
  line-height: 20px;
  padding: 14px 18px;
  white-space: pre-wrap;
}

.term img, .term-container img { max-width: 100%; }

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

.term-fg1 { }

/* don't bold beccause it looks weird */

.term-fg2 { color: #838887; }

/* faint (decreased intensity) - same as gray really */

.term-fg3 { font-style: italic; }

/* italic */

.term-fg4 { text-decoration: underline; }

/* underline */

.term-fg5 { -webkit-animation: blink-animation 1s steps(3, start) infinite; animation: blink-animation 1s steps(3, start) infinite; }

/* blink */

.term-fg9 { text-decoration: line-through; }

/* crossed-out */

.term-fg30 { color: #666666; }

/* black (but we can't use black, so a diff color) */

.term-fg31 { color: #ff7070; }

/* red */

.term-fg32 { color: #b0f986; }

/* green */

.term-fg33 { color: #c6c502; }

/* yellow */

.term-fg34 { color: #8db7e0; }

/* blue */

.term-fg35 { color: #f271fb; }

/* magenta */

.term-fg36 { color: #6bf7ff; }

/* cyan */

/* high intense colors */

.term-fgi1 { color: #5ef765; }

.term-fgi90 { color: #838887; }

/* grey */

.term-fgi91 { color: #ff3333; }

/* red */

.term-fgi92 { color: #00FF00; }

/* green */

.term-fgi93 { color: #fffc67; }

/* yellow */

.term-fgi94 { color: #6871ff; }

/* blue */

.term-fgi95 { color: #ff76ff; }

/* magenta */

.term-fgi96 { color: #60fcff; }

/* cyan */

/* background colors */

.term-bg40 { background: #676767; }

/* grey */

.term-bg41 { background: #ff4343; }

/* red */

.term-bg42 { background: #99ff5f; }

/* green */

/* custom foreground/background combos for readability */

.term-fg31.term-bg40 { color: #F8A39F; }

/* xterm colors */

.term-fgx16 { color: #000000; }

.term-fgx17 { color: #00005f; }

.term-fgx18 { color: #000087; }

.term-fgx19 { color: #0000af; }

.term-fgx20 { color: #0000d7; }

.term-fgx21 { color: #0000ff; }

.term-fgx22 { color: #005f00; }

.term-fgx23 { color: #005f5f; }

.term-fgx24 { color: #005f87; }

.term-fgx25 { color: #005faf; }

.term-fgx26 { color: #005fd7; }

.term-fgx27 { color: #005fff; }

.term-fgx28 { color: #008700; }

.term-fgx29 { color: #00875f; }

.term-fgx30 { color: #008787; }

.term-fgx31 { color: #0087af; }

.term-fgx32 { color: #0087d7; }

.term-fgx33 { color: #0087ff; }

.term-fgx34 { color: #00af00; }

.term-fgx35 { color: #00af5f; }

.term-fgx36 { color: #00af87; }

.term-fgx37 { color: #00afaf; }

.term-fgx38 { color: #00afd7; }

.term-fgx39 { color: #00afff; }

.term-fgx40 { color: #00d700; }

.term-fgx41 { color: #00d75f; }

.term-fgx42 { color: #00d787; }

.term-fgx43 { color: #00d7af; }

.term-fgx44 { color: #00d7d7; }

.term-fgx45 { color: #00d7ff; }

.term-fgx46 { color: #00ff00; }

.term-fgx47 { color: #00ff5f; }

.term-fgx48 { color: #00ff87; }

.term-fgx49 { color: #00ffaf; }

.term-fgx50 { color: #00ffd7; }

.term-fgx51 { color: #00ffff; }

.term-fgx52 { color: #5f0000; }

.term-fgx53 { color: #5f005f; }

.term-fgx54 { color: #5f0087; }

.term-fgx55 { color: #5f00af; }

.term-fgx56 { color: #5f00d7; }

.term-fgx57 { color: #5f00ff; }

.term-fgx58 { color: #5f5f00; }

.term-fgx59 { color: #5f5f5f; }

.term-fgx60 { color: #5f5f87; }

.term-fgx61 { color: #5f5faf; }

.term-fgx62 { color: #5f5fd7; }

.term-fgx63 { color: #5f5fff; }

.term-fgx64 { color: #5f8700; }

.term-fgx65 { color: #5f875f; }

.term-fgx66 { color: #5f8787; }

.term-fgx67 { color: #5f87af; }

.term-fgx68 { color: #5f87d7; }

.term-fgx69 { color: #5f87ff; }

.term-fgx70 { color: #5faf00; }

.term-fgx71 { color: #5faf5f; }

.term-fgx72 { color: #5faf87; }

.term-fgx73 { color: #5fafaf; }

.term-fgx74 { color: #5fafd7; }

.term-fgx75 { color: #5fafff; }

.term-fgx76 { color: #5fd700; }

.term-fgx77 { color: #5fd75f; }

.term-fgx78 { color: #5fd787; }

.term-fgx79 { color: #5fd7af; }

.term-fgx80 { color: #5fd7d7; }

.term-fgx81 { color: #5fd7ff; }

.term-fgx82 { color: #5fff00; }

.term-fgx83 { color: #5fff5f; }

.term-fgx84 { color: #5fff87; }

.term-fgx85 { color: #5fffaf; }

.term-fgx86 { color: #5fffd7; }

.term-fgx87 { color: #5fffff; }

.term-fgx88 { color: #870000; }

.term-fgx89 { color: #87005f; }

.term-fgx90 { color: #870087; }

.term-fgx91 { color: #8700af; }

.term-fgx92 { color: #8700d7; }

.term-fgx93 { color: #8700ff; }

.term-fgx94 { color: #875f00; }

.term-fgx95 { color: #875f5f; }

.term-fgx96 { color: #875f87; }

.term-fgx97 { color: #875faf; }

.term-fgx98 { color: #875fd7; }

.term-fgx99 { color: #875fff; }

.term-fgx100 { color: #878700; }

.term-fgx101 { color: #87875f; }

.term-fgx102 { color: #878787; }

.term-fgx103 { color: #8787af; }

.term-fgx104 { color: #8787d7; }

.term-fgx105 { color: #8787ff; }

.term-fgx106 { color: #87af00; }

.term-fgx107 { color: #87af5f; }

.term-fgx108 { color: #87af87; }

.term-fgx109 { color: #87afaf; }

.term-fgx110 { color: #87afd7; }

.term-fgx111 { color: #87afff; }

.term-fgx112 { color: #87d700; }

.term-fgx113 { color: #87d75f; }

.term-fgx114 { color: #87d787; }

.term-fgx115 { color: #87d7af; }

.term-fgx116 { color: #87d7d7; }

.term-fgx117 { color: #87d7ff; }

.term-fgx118 { color: #87ff00; }

.term-fgx119 { color: #87ff5f; }

.term-fgx120 { color: #87ff87; }

.term-fgx121 { color: #87ffaf; }

.term-fgx122 { color: #87ffd7; }

.term-fgx123 { color: #87ffff; }

.term-fgx124 { color: #af0000; }

.term-fgx125 { color: #af005f; }

.term-fgx126 { color: #af0087; }

.term-fgx127 { color: #af00af; }

.term-fgx128 { color: #af00d7; }

.term-fgx129 { color: #af00ff; }

.term-fgx130 { color: #af5f00; }

.term-fgx131 { color: #af5f5f; }

.term-fgx132 { color: #af5f87; }

.term-fgx133 { color: #af5faf; }

.term-fgx134 { color: #af5fd7; }

.term-fgx135 { color: #af5fff; }

.term-fgx136 { color: #af8700; }

.term-fgx137 { color: #af875f; }

.term-fgx138 { color: #af8787; }

.term-fgx139 { color: #af87af; }

.term-fgx140 { color: #af87d7; }

.term-fgx141 { color: #af87ff; }

.term-fgx142 { color: #afaf00; }

.term-fgx143 { color: #afaf5f; }

.term-fgx144 { color: #afaf87; }

.term-fgx145 { color: #afafaf; }

.term-fgx146 { color: #afafd7; }

.term-fgx147 { color: #afafff; }

.term-fgx148 { color: #afd700; }

.term-fgx149 { color: #afd75f; }

.term-fgx150 { color: #afd787; }

.term-fgx151 { color: #afd7af; }

.term-fgx152 { color: #afd7d7; }

.term-fgx153 { color: #afd7ff; }

.term-fgx154 { color: #afff00; }

.term-fgx155 { color: #afff5f; }

.term-fgx156 { color: #afff87; }

.term-fgx157 { color: #afffaf; }

.term-fgx158 { color: #afffd7; }

.term-fgx159 { color: #afffff; }

.term-fgx160 { color: #d70000; }

.term-fgx161 { color: #d7005f; }

.term-fgx162 { color: #d70087; }

.term-fgx163 { color: #d700af; }

.term-fgx164 { color: #d700d7; }

.term-fgx165 { color: #d700ff; }

.term-fgx166 { color: #d75f00; }

.term-fgx167 { color: #d75f5f; }

.term-fgx168 { color: #d75f87; }

.term-fgx169 { color: #d75faf; }

.term-fgx170 { color: #d75fd7; }

.term-fgx171 { color: #d75fff; }

.term-fgx172 { color: #d78700; }

.term-fgx173 { color: #d7875f; }

.term-fgx174 { color: #d78787; }

.term-fgx175 { color: #d787af; }

.term-fgx176 { color: #d787d7; }

.term-fgx177 { color: #d787ff; }

.term-fgx178 { color: #d7af00; }

.term-fgx179 { color: #d7af5f; }

.term-fgx180 { color: #d7af87; }

.term-fgx181 { color: #d7afaf; }

.term-fgx182 { color: #d7afd7; }

.term-fgx183 { color: #d7afff; }

.term-fgx184 { color: #d7d700; }

.term-fgx185 { color: #d7d75f; }

.term-fgx186 { color: #d7d787; }

.term-fgx187 { color: #d7d7af; }

.term-fgx188 { color: #d7d7d7; }

.term-fgx189 { color: #d7d7ff; }

.term-fgx190 { color: #d7ff00; }

.term-fgx191 { color: #d7ff5f; }

.term-fgx192 { color: #d7ff87; }

.term-fgx193 { color: #d7ffaf; }

.term-fgx194 { color: #d7ffd7; }

.term-fgx195 { color: #d7ffff; }

.term-fgx196 { color: #ff0000; }

.term-fgx197 { color: #ff005f; }

.term-fgx198 { color: #ff0087; }

.term-fgx199 { color: #ff00af; }

.term-fgx200 { color: #ff00d7; }

.term-fgx201 { color: #ff00ff; }

.term-fgx202 { color: #ff5f00; }

.term-fgx203 { color: #ff5f5f; }

.term-fgx204 { color: #ff5f87; }

.term-fgx205 { color: #ff5faf; }

.term-fgx206 { color: #ff5fd7; }

.term-fgx207 { color: #ff5fff; }

.term-fgx208 { color: #ff8700; }

.term-fgx209 { color: #ff875f; }

.term-fgx210 { color: #ff8787; }

.term-fgx211 { color: #ff87af; }

.term-fgx212 { color: #ff87d7; }

.term-fgx213 { color: #ff87ff; }

.term-fgx214 { color: #ffaf00; }

.term-fgx215 { color: #ffaf5f; }

.term-fgx216 { color: #ffaf87; }

.term-fgx217 { color: #ffafaf; }

.term-fgx218 { color: #ffafd7; }

.term-fgx219 { color: #ffafff; }

.term-fgx220 { color: #ffd700; }

.term-fgx221 { color: #ffd75f; }

.term-fgx222 { color: #ffd787; }

.term-fgx223 { color: #ffd7af; }

.term-fgx224 { color: #ffd7d7; }

.term-fgx225 { color: #ffd7ff; }

.term-fgx226 { color: #ffff00; }

.term-fgx227 { color: #ffff5f; }

.term-fgx228 { color: #ffff87; }

.term-fgx229 { color: #ffffaf; }

.term-fgx230 { color: #ffffd7; }

.term-fgx231 { color: #ffffff; }

.term-fgx232 { color: #080808; }

.term-fgx233 { color: #121212; }

.term-fgx234 { color: #1c1c1c; }

.term-fgx235 { color: #262626; }

.term-fgx236 { color: #303030; }

.term-fgx237 { color: #3a3a3a; }

.term-fgx238 { color: #444444; }

.term-fgx239 { color: #4e4e4e; }

.term-fgx240 { color: #585858; }

.term-fgx241 { color: #626262; }

.term-fgx242 { color: #6c6c6c; }

.term-fgx243 { color: #767676; }

.term-fgx244 { color: #808080; }

.term-fgx245 { color: #8a8a8a; }

.term-fgx246 { color: #949494; }

.term-fgx247 { color: #9e9e9e; }

.term-fgx248 { color: #a8a8a8; }

.term-fgx249 { color: #b2b2b2; }

.term-fgx250 { color: #bcbcbc; }

.term-fgx251 { color: #c6c6c6; }

.term-fgx252 { color: #d0d0d0; }

.term-fgx253 { color: #dadada; }

.term-fgx254 { color: #e4e4e4; }

.term-fgx255 { color: #eeeeee; }

.code {
  font-family: "SFMono-Regular", Monaco, Menlo, Consolas, "Liberation Mono", Courier, monospace;
  /* It seems the monospace fonts are a little bigger than regular fonts, so
   * we'll squeeze them down to a fixed size */
  font-size: 85%;
  line-height: 17px;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}

/* If the code is applied to an inline code block, style with a border */

code.code {
  padding: 2px 5px;
  border: 1px solid #DDDDDD;
  color: #8E8E8E;
  border-radius: 3px;
}

/* Wrap multiple lines of code in a gray box, or if the class has been
 * specifically added */

pre.code, .code--boxed {
  padding: 10px;
  border: 1px solid #DDDDDD;
  background-color: #F9FAFB;
  border-radius: 3px;
}

/* Override any browser styles inside pre/code tags */

.code pre, .code code {
  font-family: inherit;
  line-height: inherit;
  font-size: inherit;
  white-space: inherit;
  word-wrap: inherit;
}

/* Colors copied from here: https://graphql.github.io/learn/queries/ */

.cm-s-yaml { color: #444 !important; }

/* Change default text color to not black */

.cm-s-yaml .cm-atom { color: #1F61A0 }

.cm-s-yaml .cm-string { color: #388a26 }

.cm-s-yaml .cm-meta { color: #555555 }

.cm-s-yaml .cm-keyword { color: #D2054E }

.cm-s-yaml .cm-number { color: #D2054E }

.cm-s-yaml .cm-variable { color: #D2054E }

.cm-s-yaml .cm-variable-2 { color: #D2054E }

.cm-s-yaml .cm-def { color: #999999 }

.cm-s-yaml .cm-comment { color: #999999 }

/* GraphQL theme is based on the same colors used here:
 * https://graphql.github.io/learn/queries/
 */

.cm-s-graphql .cm-property { color: #1F61A0 }

.cm-s-graphql .cm-string { color: #D64292 }

.cm-s-graphql .cm-keyword { color: #B11A04 }

.cm-s-graphql .cm-attribute { color: #8B2BB9 }

.cm-s-graphql .cm-variable { color: #397D13 }

.cm-s-graphql .cm-punctuation { color: #555555 }

.cm-s-graphql .cm-number { color: #2882F9 }

.cm-s-graphql .cm-def { color: #D2054E }

.cm-s-graphql .cm-atom { color: #CA9800 }

.cm-s-graphql .cm-comment { color: #999999 }

.cm-s-graphql .cm-builtin { color: #D47509 }

.cm-s-graphql .cm-qualifier { color: #1C92A9 }

.cm-s-graphql .cm-string-2 { color: #0B7FC7 }

.cm-s-graphql .cm-meta { color: #B33086 }

/* JSON */

.cm-s-json .cm-number { color: #2882F9 }

.cm-s-json .cm-property { color: #1F61A0 }

.cm-s-json .cm-string { color: #388a26 }

.cm-s-json .cm-builtin { color: #D47509 }

.cm-s-json .cm-punctuation { color: #555555 }

/* Shell */

.cm-s-shell .cm-string { color: #388a26 }

/* ERB */

.cm-s-erb { color: #444 !important; }

/* Change default text color to not black */

.cm-s-erb .cm-string { color: #388a26 }

.cm-s-erb .cm-def { color: #D2054E }

.cm-s-erb .cm-meta { color: #B33086 }

.cm-s-erb .cm-atom { color: #B33086 }

.cm-s-erb .cm-keyword { color: #B11A04 }

.cm-s-erb .cm-comment { color: #999999 }

.cm-s-erb .cm-punctuation { color: #555555 }

.cm-s-erb .cm-tag { color: #1F61A0 }

.cm-s-erb .cm-number { color: #2882F9 }

.cm-s-erb .cm-attribute { color: #8B2BB9 }

/* XML */

.cm-s-xml .cm-comment-pre { color: #999999 }

.cm-s-xml .cm-tag { color: #1F61A0 }

.cm-s-xml .cm-attribute { color: #8B2BB9 }

.cm-s-xml .cm-string { color: #388a26 }

/* HTML */

.cm-s-html .cm-comment-pre { color: #999999 }

.cm-s-html .cm-tag { color: #1F61A0 }

.cm-s-html .cm-attribute { color: #8B2BB9 }

.cm-s-html .cm-string { color: #388a26 }

.popup {
  background-color: #FFFFFF;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 6px;
  -webkit-box-shadow: rgba(0, 0, 0, .298039) 0px 4px 10px 0px, rgba(0, 0, 0, .027451) 0px 0px 0px 1px;
          box-shadow: rgba(0, 0, 0, .298039) 0px 4px 10px 0px, rgba(0, 0, 0, .027451) 0px 0px 0px 1px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 3;

  margin-top: 5px;
  padding-bottom: 5px;
  padding-top: 5px;

  /* Position the popup center relative to it's parent */
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transform-origin: left top;
          transform-origin: left top
}

.popup::before {
  position: absolute;
  top: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 20px;
  width: 32px;
  content: " ";
  /*URL encoded with https://yoksel.github.io/url-encoder/
     *
     * <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-475 266 32 20" enable-background="new -475 266 32 20" xml:space="preserve">
     *   <defs>
     *     <filter id="blur">
     *       <feGaussianBlur stdDeviation="1"></feGaussianBlur>
     *     </filter>
     *   </defs>
     *   <polygon points="-469,286 -459,276 -449,286 " filter="url(#blur)" opacity=".3" />
     *   <polygon fill="#FFFFFF" points="-469,286 -459,276 -449,286 "/>
     * </svg>
     **/
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='-475 266 32 20' enable-background='new -475 266 32 20' xml:space='preserve'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='1'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='-469,286 -459,276 -449,286 ' filter='url(%23blur)' opacity='.3' /%3E%3Cpolygon fill='%23FFFFFF' points='-469,286 -459,276 -449,286 '/%3E%3C/svg%3E%0A");
}

/* Animations for when it's use in conjunction with a `<details>` element */

@-webkit-keyframes popup-animation {
  from { -webkit-transform: scaleX(.8) scaleY(.5) translateX(-50%); transform: scaleX(.8) scaleY(.5) translateX(-50%); opacity: 1; }
  to { -webkit-transform: scaleX(1) scaleY(1) translateX(-50%); transform: scaleX(1) scaleY(1) translateX(-50%); opacity: 1; }
}

@keyframes popup-animation {
  from { -webkit-transform: scaleX(.8) scaleY(.5) translateX(-50%); transform: scaleX(.8) scaleY(.5) translateX(-50%); opacity: 1; }
  to { -webkit-transform: scaleX(1) scaleY(1) translateX(-50%); transform: scaleX(1) scaleY(1) translateX(-50%); opacity: 1; }
}

details > .popup {
  /* Animate the showing of the popup */
  will-change: opacity, transform;
  -webkit-animation: popup-animation 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
          animation: popup-animation 120ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

details:not([open]) > .popup {
  opacity: 0;
  -webkit-transform: scaleX(.8) scaleY(.5) translateX(-50%);
          transform: scaleX(.8) scaleY(.5) translateX(-50%);
}

details[open] > .popup {
  opacity: 1;
  -webkit-transform: scaleX(1) scaleY(1) translateX(-50%);
          transform: scaleX(1) scaleY(1) translateX(-50%);
}

/*! Basscss | http://basscss.com | MIT License */

/* Basscss Type Scale */

.h00 { font-size: 4rem }

.h0 { font-size: 3rem }

.h1 { font-size: 24px }

.h2 { font-size: 21px }

.h3 { font-size: 18px }

.h4 { font-size: 14px }

.h5 { font-size: 13px }

.h6 { font-size: 12px }

/* Basscss Typography */

.font-family-inherit { font-family: inherit }

.font-size-inherit { font-size: inherit }

.text-decoration-none { text-decoration: none }

.bold    { font-weight: bold; font-weight: 600 }

.regular { font-weight: normal }

.italic  { font-style: italic }

.caps    { text-transform: uppercase; letter-spacing: normal; }

.left-align   { text-align: left }

.center       { text-align: center }

.right-align  { text-align: right }

.justify      { text-align: justify }

.nowrap { white-space: nowrap }

.break-word { word-wrap: break-word }

.line-height-1 { line-height: 1 }

.line-height-2 { line-height: 1.125 }

.line-height-3 { line-height: 1.25 }

.line-height-4 { line-height: 1.5 }

.list-style-none { list-style: none }

.underline { text-decoration: underline }

.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-reset {
  list-style: none;
  padding-left: 0;
}

/* Basscss Layout */

.inline       { display: inline }

.block        { display: block }

.inline-block { display: inline-block }

.table        { display: table }

.table-cell   { display: table-cell }

.overflow-hidden { overflow: hidden }

.overflow-scroll { overflow: scroll }

.overflow-auto   { overflow: auto }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table
}

.clearfix:after { clear: both }

.left  { float: left }

.right { float: right }

.fit { max-width: 100% }

.max-width-1 { max-width: 24rem }

.max-width-2 { max-width: 32rem }

.max-width-3 { max-width: 48rem }

.max-width-4 { max-width: 64rem }

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

/* Basscss Align */

.align-baseline { vertical-align: baseline }

.align-top      { vertical-align: top }

.align-middle   { vertical-align: middle }

.align-bottom   { vertical-align: bottom }

/* Basscss Margin */

.m0  { margin:        0 }

.mt0 { margin-top:    0 }

.mr0 { margin-right:  0 }

.mb0 { margin-bottom: 0 }

.ml0 { margin-left:   0 }

.mx0 { margin-left:   0; margin-right:  0 }

.my0 { margin-top:    0; margin-bottom: 0 }

.m1  { margin:        5px }

.mt1 { margin-top:    5px }

.mr1 { margin-right:  5px }

.mb1 { margin-bottom: 5px }

.ml1 { margin-left:   5px }

.mx1 { margin-left:   5px; margin-right:  5px }

.my1 { margin-top:    5px; margin-bottom: 5px }

.m2  { margin:        10px }

.mt2 { margin-top:    10px }

.mr2 { margin-right:  10px }

.mb2 { margin-bottom: 10px }

.ml2 { margin-left:   10px }

.mx2 { margin-left:   10px; margin-right:  10px }

.my2 { margin-top:    10px; margin-bottom: 10px }

.m3  { margin:        15px }

.mt3 { margin-top:    15px }

.mr3 { margin-right:  15px }

.mb3 { margin-bottom: 15px }

.ml3 { margin-left:   15px }

.mx3 { margin-left:   15px; margin-right:  15px }

.my3 { margin-top:    15px; margin-bottom: 15px }

.m4  { margin:        20px }

.mt4 { margin-top:    20px }

.mr4 { margin-right:  20px }

.mb4 { margin-bottom: 20px }

.ml4 { margin-left:   20px }

.mx4 { margin-left:   20px; margin-right:  20px }

.my4 { margin-top:    20px; margin-bottom: 20px }

.mxn1 { margin-left: -5px; margin-right: -5px; }

.mxn2 { margin-left: -10px; margin-right: -10px; }

.mxn3 { margin-left: -15px; margin-right: -15px; }

.mxn4 { margin-left: -20px; margin-right: -20px; }

.m-auto  { margin: auto; }

.mt-auto { margin-top: auto }

.mr-auto { margin-right: auto }

.mb-auto { margin-bottom: auto }

.ml-auto { margin-left: auto }

.mx-auto { margin-left: auto; margin-right: auto; }

.my-auto { margin-top: auto; margin-bottom: auto; }

/* Basscss Padding */

.p0  { padding: 0 }

.pt0 { padding-top: 0 }

.pr0 { padding-right: 0 }

.pb0 { padding-bottom: 0 }

.pl0 { padding-left: 0 }

.px0 { padding-left: 0; padding-right:  0 }

.py0 { padding-top: 0;  padding-bottom: 0 }

.p1  { padding:        5px }

.pt1 { padding-top:    5px }

.pr1 { padding-right:  5px }

.pb1 { padding-bottom: 5px }

.pl1 { padding-left:   5px }

.py1 { padding-top:    5px; padding-bottom: 5px }

.px1 { padding-left:   5px; padding-right:  5px }

.p2  { padding:        10px }

.pt2 { padding-top:    10px }

.pr2 { padding-right:  10px }

.pb2 { padding-bottom: 10px }

.pl2 { padding-left:   10px }

.py2 { padding-top:    10px; padding-bottom: 10px }

.px2 { padding-left:   10px; padding-right:  10px }

.p3  { padding:        15px }

.pt3 { padding-top:    15px }

.pr3 { padding-right:  15px }

.pb3 { padding-bottom: 15px }

.pl3 { padding-left:   15px }

.py3 { padding-top:    15px; padding-bottom: 15px }

.px3 { padding-left:   15px; padding-right:  15px }

.p4  { padding:        20px }

.pt4 { padding-top:    20px }

.pr4 { padding-right:  20px }

.pb4 { padding-bottom: 20px }

.pl4 { padding-left:   20px }

.py4 { padding-top:    20px; padding-bottom: 20px }

.px4 { padding-left:   20px; padding-right:  20px }

/* Basscss Grid */

.col {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.col-right {
  float: right;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33333%;
}

.col-5 {
  width: 41.66667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33333%;
}

.col-8 {
  width: 66.66667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33333%;
}

.col-11 {
  width: 91.66667%;
}

.col-12 {
  width: 100%;
}

@media (min-width: 40em) {

  .sm-col {
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .sm-col-right {
    float: right;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .sm-col-1 {
    width: 8.33333%;
  }

  .sm-col-2 {
    width: 16.66667%;
  }

  .sm-col-3 {
    width: 25%;
  }

  .sm-col-4 {
    width: 33.33333%;
  }

  .sm-col-5 {
    width: 41.66667%;
  }

  .sm-col-6 {
    width: 50%;
  }

  .sm-col-7 {
    width: 58.33333%;
  }

  .sm-col-8 {
    width: 66.66667%;
  }

  .sm-col-9 {
    width: 75%;
  }

  .sm-col-10 {
    width: 83.33333%;
  }

  .sm-col-11 {
    width: 91.66667%;
  }

  .sm-col-12 {
    width: 100%;
  }

}

@media (min-width: 52em) {

  .md-col {
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .md-col-right {
    float: right;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .md-col-1 {
    width: 8.33333%;
  }

  .md-col-2 {
    width: 16.66667%;
  }

  .md-col-3 {
    width: 25%;
  }

  .md-col-4 {
    width: 33.33333%;
  }

  .md-col-5 {
    width: 41.66667%;
  }

  .md-col-6 {
    width: 50%;
  }

  .md-col-7 {
    width: 58.33333%;
  }

  .md-col-8 {
    width: 66.66667%;
  }

  .md-col-9 {
    width: 75%;
  }

  .md-col-10 {
    width: 83.33333%;
  }

  .md-col-11 {
    width: 91.66667%;
  }

  .md-col-12 {
    width: 100%;
  }

}

@media (min-width: 1200px) {

  .lg-col {
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .lg-col-right {
    float: right;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  .lg-col-1 {
    width: 8.33333%;
  }

  .lg-col-2 {
    width: 16.66667%;
  }

  .lg-col-3 {
    width: 25%;
  }

  .lg-col-4 {
    width: 33.33333%;
  }

  .lg-col-5 {
    width: 41.66667%;
  }

  .lg-col-6 {
    width: 50%;
  }

  .lg-col-7 {
    width: 58.33333%;
  }

  .lg-col-8 {
    width: 66.66667%;
  }

  .lg-col-9 {
    width: 75%;
  }

  .lg-col-10 {
    width: 83.33333%;
  }

  .lg-col-11 {
    width: 91.66667%;
  }

  .lg-col-12 {
    width: 100%;
  }

}

.flex { display: -webkit-box; display: -ms-flexbox; display: flex }

@media (min-width: 40em) {
  .sm-flex { display: -webkit-box; display: -ms-flexbox; display: flex }
}

@media (min-width: 52em) {
  .md-flex { display: -webkit-box; display: -ms-flexbox; display: flex }
}

@media (min-width: 1200px) {
  .lg-flex { display: -webkit-box; display: -ms-flexbox; display: flex }
}

.flex-column  { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column }

.flex-wrap    { -ms-flex-wrap: wrap; flex-wrap: wrap }

.items-start    { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start }

.items-end      { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end }

.items-center   { -webkit-box-align: center; -ms-flex-align: center; align-items: center }

.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline }

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

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

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

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

.self-baseline { -ms-flex-item-align: baseline; align-self: baseline }

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

.justify-start   { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }

.justify-end     { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end }

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

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

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

.justify-evenly  { -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly }

.content-start   { -ms-flex-line-pack: start; align-content: flex-start }

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

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

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

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

.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch }

/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */

.flex-auto {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
}

.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none }

.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0 }

.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1 }

.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2 }

.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3 }

.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999 }

/* Basscss Position */

.relative { position: relative }

.absolute { position: absolute }

.fixed    { position: fixed }

.top-0    { top: 0 }

.right-0  { right: 0 }

.bottom-0 { bottom: 0 }

.left-0   { left: 0 }

.z1 { z-index: 1 }

.z2 { z-index: 2 }

.z3 { z-index: 3 }

.z4 { z-index: 4 }

/* Basscss Border */

.border {
  border-style: solid;
  border-width: 1px;
}

.border-top {
  border-top-style: solid;
  border-top-width: 1px;
}

.border-right {
  border-right-style: solid;
  border-right-width: 1px;
}

.border-bottom {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.border-left {
  border-left-style: solid;
  border-left-width: 1px;
}

.border-none { border: 0 }

.rounded { border-radius: 3px }

.circle  { border-radius: 50% }

.rounded-top    { border-radius: 3px 3px 0 0 }

.rounded-right  { border-radius: 0 3px 3px 0 }

.rounded-bottom { border-radius: 0 0 3px 3px }

.rounded-left   { border-radius: 3px 0 0 3px }

.not-rounded { border-radius: 0 }

/* Basscss Hide */

.hide {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

@media (max-width: 767px) {
  .xs-hide { display: none !important }
}

@media (min-width: 768px) and (max-width: 991px) {
  .sm-hide { display: none !important }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .md-hide { display: none !important }
}

@media (min-width: 1200px) {
  .lg-hide { display: none !important }
}

.display-none { display: none !important }

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {

  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {

  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {

  .container {
    width: 1170px;
  }
}

@media (min-width: 1200px) {

  .container-widescreen {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Override the breakpoints set in basscss-hide so they match up with the container
 * widths above */

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

@media (min-width: 40em) {
  .sm-block { display: block !important }
}

@media (min-width: 52em) {
  .md-block { display: block !important }
}

@media (min-width: 1200px) {
  .lg-block { display: block !important }
}

.emoji {
  width: 1.23em;
  height: 1.23em;
  margin-left:.05em;
  margin-right:.05em;
  vertical-align: -.2em;
}

.tiny-kitemoji .emoji {
  width: 1em;
  height: 1em;
  vertical-align: -.1em;
}


/*# sourceMappingURL=app-9521e206329a1ea9c6fe.css.map*/