/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.module.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.styles-module__wrapped___2YHbs {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@keyframes styles-module__fadein___Uk9tY {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

/* stylelint-disable block-no-empty */

.dbutton {
}

/* stylelint-enable */

.styles-module__button___A4SLL {
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  outline: 0;
  display: inline-block;
  align-items: center;
  border-style: solid;
  white-space: nowrap;
  text-align: center;
  font-weight: 700;
  font-style: inherit;
  font-feature-settings: inherit;
  font-variant: inherit;
  font-family: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);

  padding: 0 15px;
  margin: 6px 6px;
  min-width: 88px;
  line-height: 32px;
  min-height: 32px;
  border-width: 2px;
  border-radius: 3px;
  font-size: 14px;
  color: white;
  cursor: pointer;
}

.styles-module__button___A4SLL::first-letter {
    text-transform: uppercase;
  }

.styles-module__button___A4SLL:disabled {
    pointer-events: none;
    opacity: 0.5;
  }

.styles-module__button___A4SLL .dicon {
  fill: white;
  position: relative;
  top: 4px;
}

.styles-module__icon___boTzt {
  min-width: auto;
}

.styles-module__iconLeft___ejLcl .dicon, .styles-module__iconRight___t_Uu5 .dicon {
    position: absolute;
  }

.styles-module__iconLeft___ejLcl::before {
    content: ' ';
    display: inline-block;
    margin-right: 8px;
    width: 24px;
  }

.styles-module__iconLeft___ejLcl .dicon {
    left: 6px;
  }

.styles-module__iconRight___t_Uu5::after {
    content: ' ';
    display: inline-block;
    margin-right: 8px;
    width: 24px;
  }

.styles-module__iconRight___t_Uu5 .dicon {
    right: 6px;
  }

.styles-module__primary___uq6dI {
  /* stylelint-enable */
}

/* stylelint-disable function-whitespace-after */

.styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G) {
    background-color: #086dd7;
    border-color: #086dd7;
  }

.styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G):hover {
      background-color: #0055bd;
      border-color: #0055bd;
    }

.styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF,
    .styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU {
      color: #086dd7;
    }

.styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF:hover, .styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU:hover {
        color: #0055bd;
      }

.styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5 .dicon,
    .styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl .dicon,
    .styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt .dicon {
      fill: #086dd7;
    }

.styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5:hover .dicon,
    .styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl:hover .dicon,
    .styles-module__primary___uq6dI:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt:hover .dicon {
      fill: #0055bd;
    }

.styles-module__secondary___hh1LO {
  /* stylelint-enable */
}

/* stylelint-disable function-whitespace-after */

.styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G) {
    background-color: #88d5c0;
    border-color: #88d5c0;
  }

.styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G):hover {
      background-color: #3ba08d;
      border-color: #3ba08d;
    }

.styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF,
    .styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU {
      color: #88d5c0;
    }

.styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF:hover, .styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU:hover {
        color: #3ba08d;
      }

.styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5 .dicon,
    .styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl .dicon,
    .styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt .dicon {
      fill: #88d5c0;
    }

.styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5:hover .dicon,
    .styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl:hover .dicon,
    .styles-module__secondary___hh1LO:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt:hover .dicon {
      fill: #3ba08d;
    }

.styles-module__warn___lGmyW {
  /* stylelint-enable */
}

/* stylelint-disable function-whitespace-after */

.styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G) {
    background-color: #fbb552;
    border-color: #fbb552;
  }

.styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G):hover {
      background-color: #dd7805;
      border-color: #dd7805;
    }

.styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF,
    .styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU {
      color: #fbb552;
    }

.styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF:hover, .styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU:hover {
        color: #dd7805;
      }

.styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5 .dicon,
    .styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl .dicon,
    .styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt .dicon {
      fill: #fbb552;
    }

.styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5:hover .dicon,
    .styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl:hover .dicon,
    .styles-module__warn___lGmyW:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt:hover .dicon {
      fill: #dd7805;
    }

.styles-module__new___yrr39 {
  /* stylelint-enable */
}

/* stylelint-disable function-whitespace-after */

.styles-module__new___yrr39:not(.styles-module__inverted___hDI8G) {
    background-color: #086dd7;
    border-color: #086dd7;
  }

.styles-module__new___yrr39:not(.styles-module__inverted___hDI8G):hover {
      background-color: #0055bd;
      border-color: #0055bd;
    }

.styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF,
    .styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU {
      color: #086dd7;
    }

.styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF:hover, .styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU:hover {
        color: #0055bd;
      }

.styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5 .dicon,
    .styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl .dicon,
    .styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt .dicon {
      fill: #086dd7;
    }

.styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5:hover .dicon,
    .styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl:hover .dicon,
    .styles-module__new___yrr39:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt:hover .dicon {
      fill: #0055bd;
    }

.styles-module__panic___xx9ut {
  /* stylelint-enable */
}

/* stylelint-disable function-whitespace-after */

.styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G) {
    background-color: #d52536;
    border-color: #d52536;
  }

.styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G):hover {
      background-color: #e25d68;
      border-color: #e25d68;
    }

.styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF,
    .styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU {
      color: #d52536;
    }

.styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF:hover, .styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU:hover {
        color: #e25d68;
      }

.styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5 .dicon,
    .styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl .dicon,
    .styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt .dicon {
      fill: #d52536;
    }

.styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5:hover .dicon,
    .styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl:hover .dicon,
    .styles-module__panic___xx9ut:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt:hover .dicon {
      fill: #e25d68;
    }

.styles-module__dull___B7xUD {
  /* stylelint-enable */
}

/* stylelint-disable function-whitespace-after */

.styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G) {
    background-color: #8993a5;
    border-color: #8993a5;
  }

.styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G):hover {
      background-color: #505968;
      border-color: #505968;
    }

.styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF,
    .styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU {
      color: #8993a5;
    }

.styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__text___vRpqF:hover, .styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU:hover {
        color: #505968;
      }

.styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5 .dicon,
    .styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl .dicon,
    .styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt .dicon {
      fill: #8993a5;
    }

.styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconRight___t_Uu5:hover .dicon,
    .styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__outlined___UO0BU.styles-module__iconLeft___ejLcl:hover .dicon,
    .styles-module__dull___B7xUD:not(.styles-module__inverted___hDI8G).styles-module__icon___boTzt:hover .dicon {
      fill: #505968;
    }

.styles-module__icon___boTzt,
  .styles-module__icon___boTzt:hover,
  .styles-module__text___vRpqF,
  .styles-module__text___vRpqF:hover,
  .styles-module__outlined___UO0BU,
  .styles-module__outlined___UO0BU:hover {
    background: none !important;
  }

.styles-module__text___vRpqF,
  .styles-module__text___vRpqF:hover,
  .styles-module__icon___boTzt,
  .styles-module__icon___boTzt:hover {
    border: none !important;
  }

.styles-module__inverted___hDI8G {
  border-color: white;
  background-color: white;
  color: #1c90ed;
}

.styles-module__inverted___hDI8G:hover {
    background-color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.85);
  }

.styles-module__inverted___hDI8G.styles-module__outlined___UO0BU .dicon, .styles-module__inverted___hDI8G.styles-module__text___vRpqF .dicon {
      fill: white;
    }

.styles-module__inverted___hDI8G.styles-module__outlined___UO0BU,
  .styles-module__inverted___hDI8G.styles-module__text___vRpqF {

    color: white;
}

.styles-module__inverted___hDI8G.styles-module__text___vRpqF:hover {
    color: rgba(255, 255, 255, 0.85);
  }

.styles-module__inverted___hDI8G.styles-module__outlined___UO0BU:hover {
    color: #1c90ed;
  }

.styles-module__fullWidth___O6ysl {
  width: 100%;
}

.styles-module__skinny___LCzoO {
  /* Adjust for the skinnier border by adding more padding inside so the size is the same */
  padding: 1px 11px;
  border-width: 1px;
  font-weight: 600;
}

/* DESIGN SYSTEM COLOUR PALETTE */

/* Defined here https://www.figma.com/file/YrCXp3zztpwtcSD9XVge7Z/%E2%9C%A8Foundations?node-id=0%3A1 */

/* Storybook: https://storybook.internal.dckr.io/?path=/story/foundations-palettes--palettes */

/* All legacy should be transitioned to these */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* primary */

/* media queries */

/* lib/constants/sizes */

/* layout */

/* spacing */

/* misc */

/* body font sizes */

/* heading font sizes */

/* font family */

/* -----------------------------------------------------------------------------
 | Color Purpose Vars
----------------------------------------------------------------------------- */

/* lib/constants/variants */

/* CTA component colors */

/* cohesion font colors */

/* possibly used in mixins */

/* Autobuilds Colors */

/* audit logs colors */

/* State Colors */

/* are these being used in mixins? */

/* this variable is being overwritten in cloud/Core/object/components/State/styles.module.css */

/* -- These use colors not found in the styleguide -- */

/* - end -- */

/* Note: These are volumes states and not actual/valid object states.
 Added here for completion
*/

/* button */

/* select */

/* input */

/* stylelint-disable value-list-comma-newline-after */

/* box-shadow for store cards */

/* component: tab */

/* Publish flow */

/* Public Profile */

/* v2 */

/* Sign up form width */

/**
  This was extracted from the Wrapped component. There are subtle differences
  from the wrapped mixin, but they could probably be unified with a little
  effort.

  It's defined here as a rule rather than a mixin so it can be used with
  `composes`, which generally yields smaller code bundles.
*/

.wrapped {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 12px;
  padding-right: 12px;
}

/* https://goo.gl/Mus6xj */

/* Font sizes */

/* columns */

/* Three equal columns */

/* Rows */

/* TODO:  Use flex. Flexbox doesn't seem to work on iOS safari/chrome
          when overriding a lost column for small devices (?)(Registration page)
*/

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* flex does not work inside firefox buttons, this is a workaround
   http://stackoverflow.com/questions/24289251/flexbox-not-working-in-buttons-in-firefox */

/* Causes text that overflows in an element to be truncated with an ellipsis. */

/*
 A little trick for vertically centering text content that doesn't wrap when
 the element's height is known.
*/

@keyframes load8 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* The minimal set of changes to properly display formatted markdown
   A lot of these styles are based on https://github.com/sindresorhus/github-markdown-css/blob/gh-pages/github-markdown.css
*/

.dMarkdown {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  line-height: 1.5;
  color: #393f49;
  font-size: 14px;
  word-wrap: break-word;
}

.dMarkdown * {
    overflow-wrap: break-word;
  }

.dMarkdown h1,
  .dMarkdown h2 {
    padding-bottom: 5px;
    border-bottom: 1px solid #efeff2;
  }

.dMarkdown .button {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    align-items: center;
    border-style: solid;
    white-space: nowrap;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    transition:
      background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
      border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
      color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 0 10px;
    margin: 10px 0;
    min-width: 88px;
    line-height: 32px;
    min-height: 32px;
    border-width: 2px;
    border-radius: 3px;
    font-size: 14px;
    color: #393f49;
  }

.dMarkdown .button:hover {
      border-color: #8993a5;
      color: #8993a5;
    }

.dMarkdown .darkblue-btn {
    background-color: #086dd7;
    border-color: #086dd7;
    color: #ffffff;
  }

.dMarkdown .darkblue-btn:hover {
      border-color: #1c90ed;
      background-color: #1c90ed;
      color: #ffffff;
    }

.dMarkdown pre {
    word-wrap: normal;
    padding: 16px;
    overflow: auto;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f9f9fa;
    border: 1px solid #e1e2e6;
    border-radius: 3px;
  }

.dMarkdown code {
    padding: 0.1em 0.4em;
    background-color: #f5f5f5;
    font-size: 0.95em;
    border-radius: 1px;
  }

.dMarkdown a {
    text-decoration: none;
    color: #0f6c9e;
  }

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

.dMarkdown pre > code {
    padding: 0;
    margin: 0;
    font-size: 100%;
    line-height: 1.75;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
  }

.dMarkdown p {
    line-height: 1.75;
  }

.dMarkdown li {
    margin-top: 16px;
  }

.dMarkdown table {
    display: block;
    width: 100%;
    overflow: auto;
    margin-top: 0;
    margin-bottom: 16px;
    border-spacing: 0;
    border-collapse: collapse;
  }

.dMarkdown td,
  .dMarkdown th {
    padding: 0;
  }

.dMarkdown table th {
    font-weight: 600;
  }

.dMarkdown table th,
  .dMarkdown table td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
  }

.dMarkdown table tr {
    background-color: #ffffff;
    border-top: 1px solid #c6cbd1;
  }

.dMarkdown table tr:nth-child(2n) {
    background-color: #f6f8fa;
  }