@charset "UTF-8";
.merlin__body {
  background: #f1f1f1;
  -webkit-box-shadow: none;
  box-shadow: none;
  // -webkit-box-sizing: border-box;
  // box-sizing: border-box;
  // display: -webkit-box;
  // display: -webkit-flex;
  // display: -ms-flexbox;
  // display: flex;
  font-size: 14px;
  line-height: 1.7em;
  margin: 0 auto;
  padding: 0 !important;
  height: 100%;

  // -webkit-align-items: center;
  // align-items: center;
  // -webkit-box-align: center;
  // -webkit-box-pack: center;
  // -ms-flex-align: center;
  // -ms-flex-pack: center;
  // -webkit-justify-content: center;
  // justify-content: center;
  // min-width: 500px;
  // max-width: 600px;
}

h1 {
  border: 0;
  color: #444;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -1;
  margin: 0 0 10px;
  padding: 0;
}

p {
  font-size: 14px;
  line-height: 1.7em;
  margin: 0;
}

.merlin__input {
  border-radius: 3px;
  display: block;
  font-size: 12px;
  margin: 14px auto 0;
  padding: 4px 8px;
  width: 70%;
}

.lead + .merlin__button--knockout {
  z-index: -1;
}

p.lead {
  -webkit-animation: vanishOut 800ms linear alternate;
  animation: vanishOut 800ms linear alternate;
  z-index: 9999;
}

p.success {
  -webkit-animation: vanishIn 700ms linear alternate;
  animation: vanishIn 700ms linear alternate;
}

@-webkit-keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(70px);
    filter: blur(70px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
}

@keyframes vanishIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(70px);
    filter: blur(70px);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  @-webkit-keyframes vanishIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes vanishIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

@-webkit-keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(50px);
    filter: blur(50px);
  }
}

@keyframes vanishOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(0px);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(2, 2);
    transform: scale(2, 2);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-filter: blur(50px);
    filter: blur(50px);
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  @-webkit-keyframes vanishOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes vanishOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

.hidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  display: none;
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  -webkit-clip-path: circle(1% at 1% 1%);
  clip-path: circle(1% at 1% 1%);
}

.huh-launcher,
.huh-container {
  display: none !important;
}

.icon.icon--merlin {
  bottom: 15px;
  height: 75px;
  margin: 0;
  position: absolute;
  right: 15px;
  width: 50px;
}

.merlin__helper {
  bottom: 40px;
  position: absolute;
  right: 80px;
}

@-webkit-keyframes moveup {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-48px) scale(0.99);
    transform: translateY(-48px) scale(0.99);
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
}

@keyframes moveup {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateY(-42px);
    transform: translateY(-42px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-48px) scale(0.99);
    transform: translateY(-48px) scale(0.99);
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-30px) scale(0.94);
    transform: translateY(-30px) scale(0.94);
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-30px) scale(0.94);
    transform: translateY(-30px) scale(0.94);
    -webkit-transform-origin: top right;
    transform-origin: top right;
  }
}

@-webkit-keyframes thirdmessgae {
  0% {
    overflow: hidden;
  }
  100% {
    overflow: visibile;
  }
}

@keyframes thirdmessgae {
  0% {
    overflow: hidden;
  }
  100% {
    overflow: visibile;
  }
}

.from-me {
  background: #0b93f6;
  border-radius: 12px;
  bottom: 10px;
  color: white;
  margin-bottom: 0;
  opacity: 0;
  padding: 6px 15px 7px;
  position: relative;
  position: absolute;
  right: 0;
  -webkit-transform: translateY(50px) translateX(10px) scale(0.1);
  -ms-transform: translateY(50px) translateX(10px) scale(0.1);
  transform: translateY(50px) translateX(10px) scale(0.1);
  -webkit-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1);
  transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1);
  transition: transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1),
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms;
  transition: transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1),
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1);
  width: 300px;
}

.loaded .from-me:not(.is-third-message) {
  opacity: 1;
  -webkit-transform: translateY(0) translateX(0) scale(1);
  -ms-transform: translateY(0) translateX(0) scale(1);
  transform: translateY(0) translateX(0) scale(1);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
}

.loaded .from-me.with-second-message {
  -webkit-animation: moveup 1700ms ease-out 4200ms forwards;
  animation: moveup 1700ms ease-out 4200ms forwards;
}

.loaded .from-me.is-third-message {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  -webkit-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 7100ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 7000ms;
  transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 7100ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 7000ms;
  transition: transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 7000ms,
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 7100ms;
  transition: transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 7000ms,
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 7100ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 7000ms;
}

.from-me a {
  color: #fff;
}

.from-me p {
  font-size: 13px;
}

.from-me::before {
  border-bottom-left-radius: 16px 14px;
  border-right: 20px solid #0b93f6;
  bottom: -2px;
  content: '';
  height: 20px;
  position: absolute;
  right: -7px;
  -webkit-transform: translate(0, -2px);
  z-index: 0;
}

.from-me::after {
  background: #f1f1f1;
  border-bottom-left-radius: 10px;
  bottom: -2px;
  content: '';
  height: 20px;
  position: absolute;
  right: -56px;
  -webkit-transform: translate(-30px, -2px);
  width: 26px;
  z-index: 0;
}

.chat-bubble {
  background: #ddd;
  bottom: 8px;
  height: 34px;
  margin-left: auto;
  opacity: 0;
  position: absolute;
  right: 12px;
  -webkit-transform: translateY(50px) translateX(10px) scale(0.1);
  -ms-transform: translateY(50px) translateX(10px) scale(0.1);
  transform: translateY(50px) translateX(10px) scale(0.1);
  -webkit-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 4300ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 4200ms;
  transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 4300ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 4200ms;
  transition: transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 4200ms,
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 4300ms;
  transition: transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 4200ms,
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 4300ms,
    -webkit-transform 500ms cubic-bezier(0.694, 0.5, 0.1, 1) 4200ms;
  width: 24px;
}

.loaded .chat-bubble {
  -webkit-animation: fadeout 300ms ease-out 6500ms forwards;
  animation: fadeout 300ms ease-out 6500ms forwards;
  opacity: 1;
  -webkit-transform: translateY(0) translateX(0) scale(1);
  -ms-transform: translateY(0) translateX(0) scale(1);
  transform: translateY(0) translateX(0) scale(1);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
}

.chat-bubble:before {
  background: #ddd;
  border-radius: 50%;
  content: '';
  display: block;
  height: 34px;
  left: -17px;
  position: absolute;
  width: 34px;
  z-index: 1;
}

.chat-bubble:after {
  background: #ddd;
  border-radius: 50%;
  content: '';
  display: block;
  height: 34px;
  position: absolute;
  right: -17px;
  width: 34px;
  z-index: 1;
}

.chat-bubble .tail {
  background: #ddd;
  border-radius: 50%;
  bottom: -1px;
  height: 15px;
  position: absolute;
  right: -17px;
  width: 15px;
}

.chat-bubble .tail::before {
  background: #ddd;
  border-radius: 50%;
  bottom: -4px;
  content: '';
  display: block;
  height: 5px;
  position: absolute;
  right: -3px;
  width: 5px;
}

.chat-bubble .loading {
  left: 0;
  position: absolute;
  top: 14px;
  width: 30px;
  z-index: 10;
}

.chat-bubble .loading .dot {
  background: #c1c1c1;
  border-radius: 50%;
  display: block;
  float: left;
  height: 6px;
  margin: 0 0 0 3px;
  width: 6px;
}

.chat-bubble .loading .dot:first-child {
  margin: 0;
}

.chat-bubble .loading .dot.one {
  -webkit-animation: cycleOne 1s ease-in-out infinite;
  animation: cycleOne 1s ease-in-out infinite;
}

.chat-bubble .loading .dot.two {
  -webkit-animation: cycleTwo 1s ease-in-out infinite;
}

.chat-bubble .loading .dot.three {
  -webkit-animation: cycleThree 1s ease-in-out infinite;
  animation: cycleThree 1s ease-in-out infinite;
}

@-webkit-keyframes cycleOne {
  0% {
    background: rgba(150, 150, 150, 0.4);
  }
  33.333% {
    background: #969696;
  }
  66.6667% {
    background: rgba(150, 150, 150, 0.4);
  }
  100% {
    background: rgba(150, 150, 150, 0.4);
  }
}

@keyframes cycleOne {
  0% {
    background: rgba(150, 150, 150, 0.4);
  }
  33.333% {
    background: #969696;
  }
  66.6667% {
    background: rgba(150, 150, 150, 0.4);
  }
  100% {
    background: rgba(150, 150, 150, 0.4);
  }
}

@-webkit-keyframes cycleTwo {
  0% {
    background: rgba(150, 150, 150, 0.4);
  }
  33.333% {
    background: rgba(150, 150, 150, 0.4);
  }
  66.6667% {
    background: #969696;
  }
  100% {
    background: rgba(150, 150, 150, 0.4);
  }
}

@keyframes cycleTwo {
  0% {
    background: rgba(150, 150, 150, 0.4);
  }
  33.333% {
    background: rgba(150, 150, 150, 0.4);
  }
  66.6667% {
    background: #969696;
  }
  100% {
    background: rgba(150, 150, 150, 0.4);
  }
}

@-webkit-keyframes cycleThree {
  0% {
    background: rgba(150, 150, 150, 0.4);
  }
  33.333% {
    background: rgba(150, 150, 150, 0.4);
  }
  66.6667% {
    background: rgba(150, 150, 150, 0.4);
  }
  100% {
    background: #969696;
  }
}

@keyframes cycleThree {
  0% {
    background: rgba(150, 150, 150, 0.4);
  }
  33.333% {
    background: rgba(150, 150, 150, 0.4);
  }
  66.6667% {
    background: rgba(150, 150, 150, 0.4);
  }
  100% {
    background: #969696;
  }
}

.dots {
  cursor: default;
  display: block;
  line-height: 1;
  list-style: none;
  margin: 0 auto;
  max-width: 140px;
  padding: 0;
  position: relative;
  top: 10px;
  z-index: 0;
}

.merlin__content--ready .dots {
  display: none;
}

.merlin__content--content .dots {
  -webkit-transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1);
}

body.exiting .merlin__content--content .dots {
  opacity: 0;
}

.dots li {
  background: #e9e9e9;
  border-radius: 999px;
  display: inline-block;
  height: 7px;
  margin: 0 0.01em;
  padding: 0;
  position: relative;
  top: -0.15em;
  -webkit-transition: background 300ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: background 300ms cubic-bezier(0.694, 0, 0.335, 1);
  width: 7px;
  z-index: 9999;
  a {
    color: #000;
  }
}

.dots li.done {
  background: #000;
}

.dots li.active {
  -webkit-animation: popIn 900ms forwards;
  animation: popIn 900ms forwards;

  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (prefers-reduced-motion: reduce) {
  .dots li.active {
    -webkit-animation: none;
    animation: none;
    background: #000;
  }
}

.dots li.active::after {
  -webkit-animation: sonarEffect 400ms ease-out 300ms;
  animation: sonarEffect 400ms ease-out 300ms;
  border-radius: 999px;
  content: '';
  display: inline-block;
  height: 8px;
  left: -0.037778em;
  position: absolute;
  top: -0.05em;
  -webkit-transition: -webkit-box-shadow 300ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: -webkit-box-shadow 300ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: box-shadow 300ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: box-shadow 300ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-box-shadow 300ms cubic-bezier(0.694, 0, 0.335, 1);
  width: 8px;
  z-index: -1;
  // background: #000;
}

@media screen and (prefers-reduced-motion: reduce) {
  .dots li.active::after {
    -webkit-animation: none;
    animation: none;
  }
}

@-webkit-keyframes sonarEffect {
  0% {
    opacity: 1;
  }
  40% {
    -webkit-box-shadow: 0 0 0 1px #444;
    box-shadow: 0 0 0 1px #444;
    opacity: 0.5;
  }
  100% {
    -webkit-box-shadow: 0 0 0 1px #444;
    box-shadow: 0 0 0 1px #444;
    opacity: 0;
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
  }
}

@keyframes sonarEffect {
  0% {
    opacity: 1;
  }
  40% {
    -webkit-box-shadow: 0 0 0 1px #444;
    box-shadow: 0 0 0 1px #444;
    opacity: 0.5;
  }
  100% {
    -webkit-box-shadow: 0 0 0 1px #444;
    box-shadow: 0 0 0 1px #444;
    opacity: 0;
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
  }
}

@-webkit-keyframes popIn {
  0% {
    background: #e3e3e3;
  }
  40% {
  }
  55% {
    background: #e3e3e3;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  65% {
    background: #444;
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
  }
  85% {
    background: #444;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  95% {
    background: #444;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    background: #444;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes popIn {
  0% {
    background: #e3e3e3;
  }
  40% {
  }
  55% {
    background: #e3e3e3;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  65% {
    background: #444;
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
  }
  85% {
    background: #444;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  95% {
    background: #444;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    background: #444;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

svg:not(:root) {
  overflow: hidden;
}

.icon {
  max-width: 100%;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.merlin__content--transition .svg_holder {
  margin-bottom: 30px;
}

.js--finished .icon:not(.icon--checkmark):not(.icon--help),
.js--finished .merlin__content--transition .svg_holder {
  opacity: 0;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: opacity 400ms cubic-bezier(0.694, 0, 0.335, 1) 0ms,
    -webkit-transform 400ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms;
  transition: opacity 400ms cubic-bezier(0.694, 0, 0.335, 1) 0ms,
    -webkit-transform 400ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms;
  transition: transform 400ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 400ms cubic-bezier(0.694, 0, 0.335, 1) 0ms,
    filter 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms;
  transition: transform 400ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 400ms cubic-bezier(0.694, 0, 0.335, 1) 0ms,
    filter 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms,
    -webkit-transform 400ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 300ms cubic-bezier(0.694, 0, 0.335, 1) 100ms;

  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.merlin__content {
  background: #fff;
  border-radius: 7px;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #444;
  display: block;
  margin: 1.5em auto 0;
  // width: 700px;
  overflow: hidden;
  padding: 60px 33px 35px;
  position: relative;
  text-align: center;
  zoom: 1;
}

.merlin__content--transition {
  opacity: 0;
  -webkit-transform: translateX(50%) scale(0.95);
  -ms-transform: translateX(50%) scale(0.95);
  transform: translateX(50%) scale(0.95);
  -webkit-transform-origin: 50%;
  -ms-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 500ms cubic-bezier(0.694, 0, 0.335, 1) 0;
  transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 500ms cubic-bezier(0.694, 0, 0.335, 1) 0;
  transition: transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    filter 500ms cubic-bezier(0.694, 0, 0.335, 1) 0;
  transition: transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    filter 500ms cubic-bezier(0.694, 0, 0.335, 1) 0,
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 500ms cubic-bezier(0.694, 0, 0.335, 1) 0;

  -webkit-filter: blur(10px);
  filter: blur(10px);
}

@media screen and (prefers-reduced-motion: reduce) {
  .merlin__content--transition {
    -webkit-transform: translateX(0) scale(1);
    -ms-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    -webkit-transition: opacity 300ms ease-in-out,
      -webkit-filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, -webkit-filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, filter 300ms ease-in-out,
      -webkit-filter 300ms ease-in-out;

    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
}

.merlin__content--welcome .merlin__content--transition {
  opacity: 1;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);

  -webkit-filter: blur(0);
  filter: blur(0);
}

.merlin__content--plugins .merlin__content__footer.no-plugins,
.merlin__content--welcome .merlin__content__footer {
  padding-top: 22px;
}

.merlin__content--plugins .merlin__content__footer {
  padding-top: 3px;
}

.merlin__content--license .merlin__content__footer {
  padding-top: 30px;
}

.merlin__content--license .merlin__content__footer.is-registered {
  padding-top: 87px;
}

.merlin__content--license .merlin__button--knockout {
  margin-top: 0;
  padding-bottom: 8px;
  padding-top: 8px;
}

.merlin__content--license-key {
  margin-top: 22px;
}

.merlin__content--license-key.has-error input {
  -webkit-animation: errorShake 0.4s 1 linear;
  animation: errorShake 0.4s 1 linear;
  border-color: #d54e21;
  -webkit-box-shadow: 0 0 2px rgba(213, 78, 33, 0.8);
  box-shadow: 0 0 2px rgba(213, 78, 33, 0.8);
}

.merlin__content--license-key label {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  -webkit-clip-path: circle(1% at 1% 1%);
  clip-path: circle(1% at 1% 1%);
}

.merlin__content--license-key-wrapper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 87%;
}

.merlin__content--license-key .icon {
  height: 27px;
  margin-bottom: 0;
  opacity: 0.6;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: fill 150ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 150ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: fill 150ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 150ms cubic-bezier(0.694, 0, 0.335, 1);
  width: 27px;
  z-index: 9999;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  fill: #7d8183;
}

@media screen and (prefers-reduced-motion: reduce) {
  .merlin__content--license-key .icon {
    -webkit-transition: fill 50ms ease-in-out, opacity 50ms ease-in-out;
    transition: fill 50ms ease-in-out, opacity 50ms ease-in-out;
  }
}

.merlin__content--license-key .icon:hover {
  opacity: 1;

  fill: #444;
}

.merlin__content--license-key a {
  height: 27px;
  position: absolute;
  right: 3px;
  top: 4px;
  width: 27px;
}

.merlin__content--license-key a::after {
  background: transparent;
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    color-stop(40%, #fff),
    to(rgba(255, 255, 255, 0))
  );
  background: -webkit-linear-gradient(right, #fff 40%, rgba(255, 255, 255, 0));
  background: linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0));
  border-radius: 3px;
  /* gradient on the right - to indicate it's possible to scroll */
  content: '';
  height: 27px;
  pointer-events: none;
  position: absolute;
  right: 23px;
  top: 0;
  width: 20px;
  z-index: 1;
}

.merlin__content--license-key a:active svg {
  -webkit-animation: small_pulse 200ms;
  animation: small_pulse 200ms;
  -webkit-animation-timing-function: cubic-bezier(0.694, 0, 0.335, 1);
  animation-timing-function: cubic-bezier(0.694, 0, 0.335, 1);

  -webkit-animation-fill-mode: none;
  animation-fill-mode: none;
}

.merlin__content--license-key input {
  background: transparent;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  display: inline-block;
  font-family: Menlo, Consolas, monaco, monospace;
  font-size: 11px;
  padding: 10px 27px 8px 9px;
  width: 100%;
}

.merlin__content--ready {
  padding-bottom: 12px;
}

body.loaded .merlin__content--transition {
  opacity: 1;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);

  -webkit-filter: blur(0);
  filter: blur(0);
}

body.exiting .merlin__content--transition {
  opacity: 0;
  -webkit-transform: translateX(-40%) scale(0.96);
  -ms-transform: translateX(-40%) scale(0.96);
  transform: translateX(-40%) scale(0.96);
  -webkit-transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 700ms cubic-bezier(0.694, 0, 0.335, 1) 0;
  transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 700ms cubic-bezier(0.694, 0, 0.335, 1) 0;
  transition: transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    filter 700ms cubic-bezier(0.694, 0, 0.335, 1) 0;
  transition: transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    filter 700ms cubic-bezier(0.694, 0, 0.335, 1) 0,
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 700ms cubic-bezier(0.694, 0, 0.335, 1) 0;

  -webkit-filter: blur(10px);
  filter: blur(10px);
}

@media screen and (prefers-reduced-motion: reduce) {
  body.exiting .merlin__content--transition {
    -webkit-transform: translateX(0) scale(1);
    -ms-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    -webkit-transition: opacity 300ms ease-in-out,
      -webkit-filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, -webkit-filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, filter 300ms ease-in-out,
      -webkit-filter 300ms ease-in-out;

    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
}

.merlin__content--welcome {
  -webkit-animation: animation 1000ms linear both 200ms;
  animation: animation 1000ms linear both 200ms;
  opacity: 0;
  -webkit-transition: opacity 400ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: opacity 400ms cubic-bezier(0.694, 0, 0.335, 1);
}

body.loaded .merlin__content--welcome {
  opacity: 1;
}

@media screen and (prefers-reduced-motion: reduce) {
  .merlin__content--welcome {
    -webkit-animation: none;
    animation: none;
    opacity: 1;
  }
}

@-webkit-keyframes animation {
  0% {
    -webkit-transform: matrix3d(
      0.5,
      0,
      0,
      0,
      0,
      0.5,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.5% {
    -webkit-transform: matrix3d(
      0.718,
      0,
      0,
      0,
      0,
      0.743,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.718, 0, 0, 0, 0, 0.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  5.51% {
    -webkit-transform: matrix3d(
      0.762,
      0,
      0,
      0,
      0,
      0.794,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.762, 0, 0, 0, 0, 0.794, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.01% {
    -webkit-transform: matrix3d(
      0.888,
      0,
      0,
      0,
      0,
      0.94,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.888, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  11.01% {
    -webkit-transform: matrix3d(
      0.941,
      0,
      0,
      0,
      0,
      0.998,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.941, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.51% {
    -webkit-transform: matrix3d(
      0.989,
      0,
      0,
      0,
      0,
      1.044,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.989, 0, 0, 0, 0, 1.044, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  16.52% {
    -webkit-transform: matrix3d(
      1.024,
      0,
      0,
      0,
      0,
      1.067,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.024, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.92% {
    -webkit-transform: matrix3d(
      1.033,
      0,
      0,
      0,
      0,
      1.07,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.033, 0, 0, 0, 0, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  21.92% {
    -webkit-transform: matrix3d(
      1.042,
      0,
      0,
      0,
      0,
      1.057,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.042, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(
      1.028,
      0,
      0,
      0,
      0,
      1.016,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.63% {
    -webkit-transform: matrix3d(
      1.013,
      0,
      0,
      0,
      0,
      0.997,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.013, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.24% {
    -webkit-transform: matrix3d(
      1.009,
      0,
      0,
      0,
      0,
      0.994,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.009, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.14% {
    -webkit-transform: matrix3d(
      1.003,
      0,
      0,
      0,
      0,
      0.992,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.003, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  50.55% {
    -webkit-transform: matrix3d(
      0.997,
      0,
      0,
      0,
      0,
      0.998,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.997, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  62.36% {
    -webkit-transform: matrix3d(
      0.999,
      0,
      0,
      0,
      0,
      1.001,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  79.08% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@keyframes animation {
  0% {
    -webkit-transform: matrix3d(
      0.5,
      0,
      0,
      0,
      0,
      0.5,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.5% {
    -webkit-transform: matrix3d(
      0.718,
      0,
      0,
      0,
      0,
      0.743,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.718, 0, 0, 0, 0, 0.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  5.51% {
    -webkit-transform: matrix3d(
      0.762,
      0,
      0,
      0,
      0,
      0.794,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.762, 0, 0, 0, 0, 0.794, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  9.01% {
    -webkit-transform: matrix3d(
      0.888,
      0,
      0,
      0,
      0,
      0.94,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.888, 0, 0, 0, 0, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  11.01% {
    -webkit-transform: matrix3d(
      0.941,
      0,
      0,
      0,
      0,
      0.998,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.941, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  13.51% {
    -webkit-transform: matrix3d(
      0.989,
      0,
      0,
      0,
      0,
      1.044,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.989, 0, 0, 0, 0, 1.044, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  16.52% {
    -webkit-transform: matrix3d(
      1.024,
      0,
      0,
      0,
      0,
      1.067,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.024, 0, 0, 0, 0, 1.067, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  17.92% {
    -webkit-transform: matrix3d(
      1.033,
      0,
      0,
      0,
      0,
      1.07,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.033, 0, 0, 0, 0, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  21.92% {
    -webkit-transform: matrix3d(
      1.042,
      0,
      0,
      0,
      0,
      1.057,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.042, 0, 0, 0, 0, 1.057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(
      1.028,
      0,
      0,
      0,
      0,
      1.016,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.028, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  34.63% {
    -webkit-transform: matrix3d(
      1.013,
      0,
      0,
      0,
      0,
      0.997,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.013, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  36.24% {
    -webkit-transform: matrix3d(
      1.009,
      0,
      0,
      0,
      0,
      0.994,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.009, 0, 0, 0, 0, 0.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  40.14% {
    -webkit-transform: matrix3d(
      1.003,
      0,
      0,
      0,
      0,
      0.992,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(1.003, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  50.55% {
    -webkit-transform: matrix3d(
      0.997,
      0,
      0,
      0,
      0,
      0.998,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.997, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  62.36% {
    -webkit-transform: matrix3d(
      0.999,
      0,
      0,
      0,
      0,
      1.001,
      0,
      0,
      0,
      0,
      1,
      0,
      0,
      0,
      0,
      1
    );
    transform: matrix3d(0.999, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  79.08% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  84.68% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@-webkit-keyframes small_pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  15% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes small_pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  15% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes errorShake {
  0% {
    -webkit-transform: translate(8px);
    transform: translate(8px);
  }
  20% {
    -webkit-transform: translate(-8px);
    transform: translate(-8px);
  }
  40% {
    -webkit-transform: translate(4px);
    transform: translate(4px);
  }
  60% {
    -webkit-transform: translate(-4px);
    transform: translate(-4px);
  }
  80% {
    -webkit-transform: translate(2px);
    transform: translate(2px);
  }
  100% {
    -webkit-transform: translate(0px);
    transform: translate(0px);
  }
}

@keyframes errorShake {
  0% {
    -webkit-transform: translate(8px);
    transform: translate(8px);
  }
  20% {
    -webkit-transform: translate(-8px);
    transform: translate(-8px);
  }
  40% {
    -webkit-transform: translate(4px);
    transform: translate(4px);
  }
  60% {
    -webkit-transform: translate(-4px);
    transform: translate(-4px);
  }
  80% {
    -webkit-transform: translate(2px);
    transform: translate(2px);
  }
  100% {
    -webkit-transform: translate(0px);
    transform: translate(0px);
  }
}

.merlin__button {
  background: #fff;
  border: 0;
  border-radius: 4px;
  color: #7d8183;
  cursor: pointer;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  padding: 8px 18px 9px;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: color 150ms cubic-bezier(0.694, 0, 0.335, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: color 150ms cubic-bezier(0.694, 0, 0.335, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1);
}

@media screen and (prefers-reduced-motion: reduce) {
  .merlin__button {
    -webkit-transition: color 50ms ease-in-out, background 50ms ease-in-out;
    transition: color 50ms ease-in-out, background 50ms ease-in-out;
  }
}

.merlin__button:hover {
  background: #f1f1f1;
}

.merlin__button:hover .chevron::after,
.merlin__button:hover .chevron::before {
  background: #444;
}

.merlin__button:active {
  background: #ebebeb;
}

.merlin__button span {
  display: inline-block;
}

.merlin__button--colorchange {
  -webkit-animation: colorchange 800ms infinite alternate;
  animation: colorchange 800ms infinite alternate;
}

.merlin__button--fullwidth {
  display: block;
  font-size: 14px;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-top: 9px;
  width: 60%;
  z-index: 999;
}

.merlin__button--next,
.merlin__button--skip {
  bottom: 12px;
  position: absolute;
}

.merlin__button--next {
  color: #444;
  right: 12px;
}

.merlin__button--next:hover,
.merlin__button--next:active {
  color: #757575;
}

.merlin__button--skip {
  left: 12px;
}

.merlin__button--skip:hover,
.merlin__button--skip:active {
  color: #444;
}

.merlin__button--blue {
  background: #444;
  color: #fff;
}

.merlin__button--blue:hover,
.merlin__button--blue:active {
  background: #757575;
  color: #fff;
}

.merlin__button--knockout {
  background: transparent;
  color: #7d8183;
  font-size: 14px;
  font-weight: 500;
  margin-left: -10px;
  padding-right: 25px;
  padding-top: 10px;
  -webkit-transition: color 150ms ease;
  transition: color 150ms ease;
  color: #444;
}

.merlin__button--knockout:hover,
.merlin__button--knockout:active {
  background: transparent;
  color: #444;
}

.merlin__button--no-chevron {
  margin-left: 0;
  margin-top: 3px;
  padding-right: 18px;
}

.merlin__button--loading:hover,
.merlin__button--loading:active {
  background: transparent;
}

.merlin__button--loading .merlin__button--loading__text {
  -webkit-transition: opacity 400ms cubic-bezier(0.18, 1, 0.21, 1) 400ms,
    -webkit-filter 4100ms cubic-bezier(0.18, 1, 0.21, 1);
  transition: opacity 400ms cubic-bezier(0.18, 1, 0.21, 1) 400ms,
    -webkit-filter 4100ms cubic-bezier(0.18, 1, 0.21, 1);
  transition: opacity 400ms cubic-bezier(0.18, 1, 0.21, 1) 400ms,
    filter 4100ms cubic-bezier(0.18, 1, 0.21, 1);
  transition: opacity 400ms cubic-bezier(0.18, 1, 0.21, 1) 400ms,
    filter 4100ms cubic-bezier(0.18, 1, 0.21, 1),
    -webkit-filter 4100ms cubic-bezier(0.18, 1, 0.21, 1);
}

.merlin__button--loading__spinner {
  left: 50%;
  margin-left: -12px;
  margin-top: -11px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: opacity 100ms ease,
    -webkit-transform 600ms cubic-bezier(0.18, 1, 0.21, 1) 200ms;
  transition: opacity 100ms ease,
    -webkit-transform 600ms cubic-bezier(0.18, 1, 0.21, 1) 200ms;
  transition: opacity 100ms ease,
    transform 600ms cubic-bezier(0.18, 1, 0.21, 1) 200ms;
  transition: opacity 100ms ease,
    transform 600ms cubic-bezier(0.18, 1, 0.21, 1) 200ms,
    -webkit-transform 600ms cubic-bezier(0.18, 1, 0.21, 1) 200ms;
}

.merlin__button--loading .merlin__button--loading__text {
  opacity: 0;

  -webkit-filter: blur(100px);
  filter: blur(100px);
}

.merlin__button--loading .merlin__button--loading__spinner {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.merlin__button--external::after {
  content: '➝';
  display: inline-block !important;
  font-size: 1em;
  margin-top: 0.05em;
  opacity: 0;
  padding-left: 0.25em;
  position: absolute;
  -webkit-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  transform: translateX(-5px);
  -webkit-transition: opacity 0.2s cubic-bezier(0, 0.25, 0.08, 1),
    -webkit-transform 0.2s cubic-bezier(0, 0.25, 0.08, 1);
  transition: opacity 0.2s cubic-bezier(0, 0.25, 0.08, 1),
    -webkit-transform 0.2s cubic-bezier(0, 0.25, 0.08, 1);
  transition: transform 0.2s cubic-bezier(0, 0.25, 0.08, 1),
    opacity 0.2s cubic-bezier(0, 0.25, 0.08, 1);
  transition: transform 0.2s cubic-bezier(0, 0.25, 0.08, 1),
    opacity 0.2s cubic-bezier(0, 0.25, 0.08, 1),
    -webkit-transform 0.2s cubic-bezier(0, 0.25, 0.08, 1);
}

.merlin__button--external:hover::after {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

#skip {
  display: inline-block;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

#close {
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

@-webkit-keyframes colorchange {
  0% {
    background: #fff;
  }
  100% {
    background: #f1f1f1;
  }
}

@keyframes colorchange {
  0% {
    background: #fff;
  }
  100% {
    background: #f1f1f1;
  }
}

.chevron {
  display: block;
  position: absolute;
  right: 10px;
  top: 58%;
  -webkit-transition: top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1),
    top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1),
    top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -ms-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1);
  z-index: 1;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.chevron::after,
.chevron::before {
  background: #7d8183;
  border-radius: 2px;
  content: ' ';
  display: block;
  height: 2px;
  position: absolute;
  top: 50%;
  -webkit-transition: top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1),
    top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1),
    top 900ms cubic-bezier(0.86, 0, 0.07, 1),
    background 150ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -webkit-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1),
    -ms-transform-origin 900ms cubic-bezier(0.86, 0, 0.07, 1);
  width: 10px;
  z-index: 1;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.chevron::before {
  right: 50%;
  -webkit-transform: rotate(40deg) scaleY(1);
  -ms-transform: rotate(40deg) scaleY(1);
  transform: rotate(40deg) scaleY(1);
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.chevron::after {
  left: 50%;
  -webkit-transform: rotate(-40deg) scaleY(1);
  -ms-transform: rotate(-40deg) scaleY(1);
  transform: rotate(-40deg) scaleY(1);
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

.merlin__drawer--open .chevron {
  top: 44%;
}

.merlin__drawer--open .chevron::before {
  -webkit-transform: rotate(-40deg) scaleY(1);
  -ms-transform: rotate(-40deg) scaleY(1);
  transform: rotate(-40deg) scaleY(1);
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.merlin__drawer--open .chevron::after {
  -webkit-transform: rotate(40deg) scaleY(1);
  -ms-transform: rotate(40deg) scaleY(1);
  transform: rotate(40deg) scaleY(1);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}

.merlin-spinner {
  -webkit-transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 50ms;
  transition: opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 50ms;
  width: 23px;
}

.merlin-spinner:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.exiting .merlin-spinner {
  opacity: 0;
}

.merlin-spinner__svg {
  // -webkit-animation: spinnerRotate 2s linear infinite;
  // animation: spinnerRotate 2s linear infinite;
  bottom: 0;
  height: 100%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
}

.merlin-spinner__svg .path {
  -webkit-animation: spinnerDash 1.5s ease-in-out infinite,
    spinnerColor 6s ease-in-out infinite;
  animation: spinnerDash 1.5s ease-in-out infinite,
    spinnerColor 6s ease-in-out infinite;

  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}

.merlin__select-spinner {
  display: none;
  height: 26px;
  left: auto;
  right: -29px;
  top: 0;
  width: 26px;
}

@-webkit-keyframes spinnerRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinnerRotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes spinnerDash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@-webkit-keyframes spinnerColor {
  100%,
  0% {
    stroke: #444;
  }
  40% {
    stroke: #6b6b6b;
  }
  66% {
    stroke: #444;
  }
  80%,
  90% {
    stroke: #6b6b6b;
  }
}

@keyframes spinnerColor {
  100%,
  0% {
    stroke: #444;
  }
  40% {
    stroke: #6b6b6b;
  }
  66% {
    stroke: #444;
  }
  80%,
  90% {
    stroke: #6b6b6b;
  }
}

[class*='hint--'] {
  display: inline-block;
  position: relative;
}

[class*='hint--']:before,
[class*='hint--']:after {
  font-weight: normal;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-transform: none;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 100ms ease;
  transition: 100ms ease;
  -webkit-transition-delay: 0ms;
  transition-delay: 0ms;
  visibility: hidden;
  z-index: 1000000;
}

[class*='hint--']:hover:before,
[class*='hint--']:hover:after {
  opacity: 1;
  visibility: visible;
}

[class*='hint--']:before {
  background: transparent;
  border: 6px solid transparent;
  content: '';
  position: absolute;
  z-index: 1000001;
}

[class*='hint--']:after {
  background: #383838;
  border-radius: 2px;
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 11px;
  line-height: 11px;
  padding: 5px 8px 6px 9px;
  white-space: nowrap;
}

[class*='hint--'][aria-label]:after {
  content: attr(aria-label);
}

[class*='hint--'][data-hint]:after {
  content: attr(data-hint);
}

[aria-label='']:before,
[aria-label='']:after,
[data-hint='']:before,
[data-hint='']:after {
  display: none !important;
}

.hint--top:before {
  border-top-color: #383838;
  margin-bottom: -11px;
}

.hint--top:before,
.hint--top:after {
  bottom: 103%;
  left: 50%;
}

.hint--top:before {
  left: calc(50% - 6px);
}

.hint--top:after {
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.hint--top:hover:after {
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.hint--right:before {
  border-right-color: #383838;
  margin-bottom: -6px;
  margin-left: -11px;
}

.hint--right:after {
  margin-bottom: -14px;
}

.hint--right:before,
.hint--right:after {
  bottom: 50%;
  left: 100%;
}

.hint--right:hover:before {
  -webkit-transform: translateX(8px);
  -ms-transform: translateX(8px);
  transform: translateX(8px);
}

.hint--right:hover:after {
  -webkit-transform: translateX(8px);
  -ms-transform: translateX(8px);
  transform: translateX(8px);
}

.return-to-dashboard {
  color: #7d8183;
  display: block;
  font-size: 13px;
  margin-top: 1em;
  padding: 1em;
  padding-bottom: 0;
  text-align: center;
  text-decoration: none;
  -webkit-transition: color 150ms ease,
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 150ms;
  transition: color 150ms ease,
    opacity 300ms cubic-bezier(0.694, 0, 0.335, 1) 150ms;
}

@media screen and (prefers-reduced-motion: reduce) {
  .return-to-dashboard {
    opacity: 1 !important;
  }
}

.merlin__body--welcome .return-to-dashboard {
  opacity: 0;
}

.merlin__body--welcome.loaded .return-to-dashboard {
  opacity: 1;
}

.return-to-dashboard.ignore {
  margin-top: 0.3em;
  padding: 0;
}

body:not(.merlin__body--welcome) .return-to-dashboard.ignore {
  opacity: 0;
  pointer-events: none;
}

.return-to-dashboard:hover {
  color: #000;
}

.merlin__drawer {
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
    opacity 300ms linear 600ms,
    max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms,
    -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
    opacity 300ms linear 600ms,
    max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms,
    -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
    padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 600ms,
    max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms;
  transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
    padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 600ms,
    max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms,
    -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
}

.merlin__drawer li {
  margin: 0;
  opacity: 0;
  padding: 4px 0;
  position: relative;
  text-align: center;
  -webkit-transform: translate3d(0, -15px, 0);
  transform: translate3d(0, -15px, 0);
  -webkit-transition: 0.25s ease;
  transition: 0.25s ease;
}

.merlin__drawer li:last-child {
  padding-bottom: 0;
}

.merlin__drawer li:nth-of-type(10) {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.merlin__drawer li:nth-of-type(9) {
  -webkit-transition-delay: 0.18s;
  transition-delay: 0.18s;
}

.merlin__drawer li:nth-of-type(8) {
  -webkit-transition-delay: 0.16s;
  transition-delay: 0.16s;
}

.merlin__drawer li:nth-of-type(7) {
  -webkit-transition-delay: 0.14s;
  transition-delay: 0.14s;
}

.merlin__drawer li:nth-of-type(6) {
  -webkit-transition-delay: 0.12s;
  transition-delay: 0.12s;
}

.merlin__drawer li:nth-of-type(5) {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.merlin__drawer li:nth-of-type(4) {
  -webkit-transition-delay: 0.08s;
  transition-delay: 0.08s;
}

.merlin__drawer li:nth-of-type(3) {
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s;
}

.merlin__drawer li:nth-of-type(2) {
  -webkit-transition-delay: 0.04s;
  transition-delay: 0.04s;
}

.merlin__drawer li:nth-of-type(1) {
  -webkit-transition-delay: 0.02s;
  transition-delay: 0.02s;
}

.merlin__drawer--open .merlin__drawer {
  margin-top: 30px;
  max-height: 400px;
  opacity: 1;
  pointer-events: inherit;
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
    opacity 300ms linear 200ms,
    max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms,
    -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
    opacity 300ms linear 200ms,
    max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms,
    -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
    padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 200ms,
    max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms;
  transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
    padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 200ms,
    max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms,
    -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
}

.merlin__drawer--open .merlin__drawer li {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(1) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(2) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(3) {
  -webkit-transition-delay: 0.45s;
  transition-delay: 0.45s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(4) {
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(5) {
  -webkit-transition-delay: 0.75s;
  transition-delay: 0.75s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(6) {
  -webkit-transition-delay: 0.9s;
  transition-delay: 0.9s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(7) {
  -webkit-transition-delay: 1.05s;
  transition-delay: 1.05s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(8) {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(9) {
  -webkit-transition-delay: 1.35s;
  transition-delay: 1.35s;
}

.merlin__drawer--open .merlin__drawer li:nth-of-type(10) {
  -webkit-transition-delay: 1.5s;
  transition-delay: 1.5s;
}

.merlin__drawer--open .merlin__button--next {
  -webkit-animation: colorchange 1s infinite alternate 1000ms;
  animation: colorchange 1s infinite alternate 1000ms;
}

.merlin__drawer--open .merlin__button--loading {
  -webkit-animation: none;
  animation: none;
}

.merlin__drawer--open #skip {
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

.merlin__drawer--open #close {
  display: inline-block;
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.merlin__drawer--import-content {
  padding-top: 3px;
}

.merlin__drawer--import-content li {
  color: #7d8183;
  padding: 2px 50px;
  text-align: left;
}

.merlin__drawer--import-content li:hover span {
  color: #444;
}

.merlin__drawer--import-content label {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 100%;
}

.merlin__drawer--import-content label span {
  -webkit-transition: color 100ms;
  transition: color 100ms;
}

.merlin__drawer--import-content label i {
  background-color: transparent;
  border: 2px solid #b2b7ba;
  border-radius: 50%;
  display: inline-block;
  float: right;
  height: 13px;
  margin-top: 3px;
  position: relative;
  text-align: left;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition: border-color 100ms, background-color 100ms,
    -webkit-transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  transition: border-color 100ms, background-color 100ms,
    -webkit-transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  transition: border-color 100ms, background-color 100ms,
    transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  transition: border-color 100ms, background-color 100ms,
    transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89),
    -webkit-transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  width: 13px;
}

.merlin__drawer--import-content label i:before {
  background: #444;
  border-radius: 2px;
  content: '';
  height: 2px;
  left: 0.2em;
  position: absolute;
  top: 0.4em;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: width 50ms ease 50ms;
  transition: width 50ms ease 50ms;
  width: 0;
}

.merlin__drawer--import-content label i:after {
  background: #444;
  border-radius: 2px;
  content: '';
  height: 2px;
  left: 4px;
  position: absolute;
  top: 0.67em;
  -webkit-transform: rotate(310deg);
  -ms-transform: rotate(310deg);
  transform: rotate(310deg);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: width 50ms ease;
  transition: width 50ms ease;
  width: 0;
}

.merlin__drawer--import-content label:hover i {
  border-color: #444;
}

.checkbox {
  display: none !important;
}

.checkbox:checked + label.installing i {
  -webkit-animation: colorchangeInstalling 800ms infinite alternate;
  animation: colorchangeInstalling 800ms infinite alternate;
  background-color: #ffb900;
  border-color: #ffb900;
  -webkit-transition: background-color 400ms cubic-bezier(0.18, 1, 0.21, 1),
    border-color 400ms cubic-bezier(0.18, 1, 0.21, 1);
  transition: background-color 400ms cubic-bezier(0.18, 1, 0.21, 1),
    border-color 400ms cubic-bezier(0.18, 1, 0.21, 1);
}

.checkbox:checked + label.success i {
  -webkit-animation: popInSuccess 500ms forwards;
  animation: popInSuccess 500ms forwards;
  background-color: #46b450;
  border-color: #46b450;
  -webkit-transition: background-color 400ms cubic-bezier(0.18, 1, 0.21, 1),
    border-color 400ms cubic-bezier(0.18, 1, 0.21, 1);
  transition: background-color 400ms cubic-bezier(0.18, 1, 0.21, 1),
    border-color 400ms cubic-bezier(0.18, 1, 0.21, 1);

  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media screen and (prefers-reduced-motion: reduce) {
  .checkbox:checked + label.success i {
    -webkit-animation: none;
    animation: none;
    background: #46b450;
  }
}

.checkbox:checked + label.error i {
  background-color: #d54e21;
  border-color: #d54e21;
  -webkit-transition: background-color 500ms cubic-bezier(0.18, 1, 0.21, 1)
      220ms,
    border-color 400ms cubic-bezier(0.18, 1, 0.21, 1) 220ms;
  transition: background-color 500ms cubic-bezier(0.18, 1, 0.21, 1) 220ms,
    border-color 400ms cubic-bezier(0.18, 1, 0.21, 1) 220ms;
}

.checkbox:checked + label i {
  background-color: #444;
  border-color: #444;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.checkbox:checked + label i:after {
  background: #fff;
  -webkit-transition: width 50ms ease 100ms;
  transition: width 50ms ease 100ms;
  width: 9px;
}

.checkbox:checked + label i:before {
  background: #fff;
  -webkit-transition: width 50ms ease 100ms;
  transition: width 50ms ease 100ms;
  width: 5px;
}

@-webkit-keyframes colorchangeInstalling {
  0% {
    background: #46b450;
    border-color: #46b450;
  }
  100% {
    background: #8dd394;
    border-color: #8dd394;
  }
}

@keyframes colorchangeInstalling {
  0% {
    background: #46b450;
    border-color: #46b450;
  }
  100% {
    background: #8dd394;
    border-color: #8dd394;
  }
}

@-webkit-keyframes popInSuccess {
  0% {
    background-color: #46b450;
    border-color: #46b450;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  45% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }
  65% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  85% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  95%,
  100% {
    background-color: #46b450;
    border-color: #46b450;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes popInSuccess {
  0% {
    background-color: #46b450;
    border-color: #46b450;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  45% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }
  65% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  85% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  95%,
  100% {
    background-color: #46b450;
    border-color: #46b450;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

.merlin__drawer--install-plugins {
  overflow: visible;
  text-align: left;
}

.merlin__drawer--open .merlin__drawer--install-plugins {
  padding-bottom: 1px;
}

.merlin__drawer--install-plugins li {
  color: #7d8183;
  padding: 2px 30px;
  text-align: left;
}

.merlin__drawer--install-plugins li:hover span {
  color: #000;
}

.merlin__drawer--install-plugins li .merlin__status-class {
  display: none;
}

.merlin__drawer--install-plugins li .badge {
  background: #e6f3fa;
  border-radius: 3px;
  color: #444 !important;
  font-size: 11px;
  font-weight: 500;
  margin-left: 1px;
  padding: 3px 5px;
  position: relative;
  text-transform: uppercase;
  top: -1px;
}

.merlin__drawer--install-plugins label {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 100%;
}

.merlin__drawer--install-plugins label span {
  -webkit-transition: color 100ms;
  transition: color 100ms;
}

.merlin__drawer--install-plugins label i {
  background-color: transparent;
  border: 2px solid #b2b7ba;
  border-radius: 50%;
  display: inline-block;
  float: right;
  height: 13px;
  margin-top: 3px;
  position: relative;
  text-align: left;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition: border-color 100ms, background-color 100ms,
    -webkit-transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  transition: border-color 100ms, background-color 100ms,
    -webkit-transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  transition: border-color 100ms, background-color 100ms,
    transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  transition: border-color 100ms, background-color 100ms,
    transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89),
    -webkit-transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  width: 13px;
}

.merlin__drawer--install-plugins label i:before {
  background: #444;
  border-radius: 2px;
  content: '';
  height: 2px;
  left: 0.2em;
  position: absolute;
  top: 0.4em;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: width 50ms ease 50ms;
  transition: width 50ms ease 50ms;
  width: 0;
}

.merlin__drawer--install-plugins label i:after {
  background: #444;
  border-radius: 2px;
  content: '';
  height: 2px;
  left: 4px;
  position: absolute;
  top: 0.67em;
  -webkit-transform: rotate(310deg);
  -ms-transform: rotate(310deg);
  transform: rotate(310deg);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: width 50ms ease;
  transition: width 50ms ease;
  width: 0;
}

.merlin__drawer--install-plugins label:hover i {
  border-color: #000;
}

.merlin__drawer--open .merlin__drawer--extras {
  padding-bottom: 30px;
}

.icon--checkmark {
  -webkit-animation: fill 0.4s ease-in-out 0.4s forwards,
    scale 0.3s ease-in-out 0.9s both;
  animation: fill 0.4s ease-in-out 0.4s forwards,
    scale 0.3s ease-in-out 0.9s both;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 0 #46b450;
  box-shadow: inset 0 0 0 #46b450;
  display: none;
  height: 110px;
  left: calc(50% - 55px);
  position: absolute;
  top: 20px;
  width: 110px;

  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2;
}

.js--finished .icon--checkmark {
  display: inline-block;
}

.icon--checkmark__check {
  -webkit-animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  stroke-dasharray: 48;
  stroke-dashoffset: 48;
}

.icon--checkmark__circle {
  -webkit-animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

  fill: none;
  stroke: #46b450;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-miterlimit: 10;
  stroke-width: 2;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes scale {
  0%,
  100% {
    -webkit-transform: none;
    transform: none;
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes scale {
  0%,
  100% {
    -webkit-transform: none;
    transform: none;
  }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1);
  }
}

@-webkit-keyframes fill {
  100% {
    -webkit-box-shadow: inset 0 0 0 100px #46b450;
    box-shadow: inset 0 0 0 100px #46b450;
  }
}

@keyframes fill {
  100% {
    -webkit-box-shadow: inset 0 0 0 100px #46b450;
    box-shadow: inset 0 0 0 100px #46b450;
  }
}

.merlin__content__footer {
  clear: both;
  margin-top: 2.75em;
}

.merlin__content__footer {
  *zoom: 1;
}

.merlin__content__footer:before,
.merlin__content__footer:after {
  content: '';
  display: table;
}

.merlin__content__footer:after {
  clear: both;
}

.merlin__content__footer--fullwidth {
  opacity: 0;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 500ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 500ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    filter 500ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    opacity 500ms cubic-bezier(0.694, 0, 0.335, 1),
    filter 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-transform 500ms cubic-bezier(0.694, 0, 0.335, 1),
    -webkit-filter 500ms cubic-bezier(0.694, 0, 0.335, 1);

  -webkit-filter: blur(10px);
  filter: blur(10px);
}

@media screen and (prefers-reduced-motion: reduce) {
  .merlin__content__footer--fullwidth {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: opacity 300ms ease-in-out,
      -webkit-filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, -webkit-filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
    transition: opacity 300ms ease-in-out, filter 300ms ease-in-out,
      -webkit-filter 300ms ease-in-out;

    -webkit-filter: blur(2px);
    filter: blur(2px);
  }
}

body.loaded .merlin__content__footer--fullwidth {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);

  -webkit-filter: blur(0);
  filter: blur(0);
}

.merlin__content__footer--nolinks {
  margin-bottom: 3.14em;
}

.merlin__content__footer--nolinks .merlin__button {
  margin-top: 0.57em;
}

.merlin__content--license .merlin__content__footer {
  margin-top: -0.24em;
}

.merlin__content--ready .merlin__content__footer {
  margin-top: 1.9em;
}

.merlin__content--ready .merlin__content__footer .merlin__button--knockout {
  margin-top: 10px;
}

.merlin__content--content .merlin__content__footer {
  -webkit-transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1);
  transition: opacity 500ms cubic-bezier(0.694, 0, 0.335, 1);
}

body.exiting .merlin__content--content .merlin__content__footer {
  opacity: 0;
}

.merlin__progress-bar {
  cursor: default;
  height: 100%;
}

.merlin__progress-bar .js-merlin-progress-bar {
  background-color: #e0e0e0;
  border-radius: 0;
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
}

.js-merlin-progress-bar-percentage {
  bottom: 0;
  color: #000;
  display: none !important;
  left: 0;
  line-height: 38px;
  position: absolute;
  right: 0;
  top: 0;
}

.merlin__button--loading .js-merlin-progress-bar-percentage {
  display: block !important;
}

.merlin__button--next[data-callback='install_content'] {
  background: #f1f1f1;
}

.merlin__select-control-wrapper {
  margin: 9px auto -4px;
  max-width: 200px;
  position: relative;
}

.merlin__select-control-wrapper .icon {
  height: 15px;
  opacity: 0.5;
  position: relative;
  top: 6px;
  width: 15px;

  fill: #7d8183;
}

.merlin__select-control-wrapper .icon:hover {
  opacity: 1;

  fill: #444;
}

.merlin__select-control-help {
  height: 26px;
  position: absolute;
  right: 7px;
  top: 0;
}

.merlin__select-control {
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 0 #eee;
  box-shadow: 0 1px 0 #eee;
  color: #555d66;
  cursor: pointer;
  display: block;
  font-size: 13px;
  font-weight: normal;
  height: 27px;
  line-height: 1;
  margin: 0;
  padding: 0;
  padding-left: 8px;
  width: 100%;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.merlin__select-control:hover {
  border-color: #999;
}

.merlin__select-control:focus {
  border-color: #5b9dd9;
}

.merlin__select-control select::-ms-expand {
  display: none;
}

.merlin__demo-import-preview {
  background-color: #f1f1f1;
  border-radius: 5px;
  margin: 20px 0;
  padding: 10px;
  width: calc(100% - 20px);
}

.merlin__demo-import-preview-image {
  width: 100%;
}

.merlin__drawer--open .is-multi-import {
  padding-bottom: 30px;
  -webkit-transition: padding 300ms cubic-bezier(0.75, 0, 0.25, 1) 100ms;
  transition: padding 300ms cubic-bezier(0.75, 0, 0.25, 1) 100ms;
}

.is-multi-import {
  -webkit-transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1);
  transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1);
}

.is-multi-import .merlin__content__footer {
  margin-top: 7px;
}

.barberry--step-info {
  margin-top: 20px;
  -webkit-animation: vanishIn 700ms linear alternate;
  animation: vanishIn 700ms linear alternate;
}

.barberry--step-info ul li {
  display: flex;
  align-items: center;
  text-align: left;
}

.barberry-info--content {
  padding: 0 20px;
}

.barberry--step-info ul li .value-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.barberry--step-info ul li .values {
  display: flex;
  width: 80px;
}

.barberry--step-info .badge {
  display: inline-block;
  line-height: 1;
  text-align: center;
  background: #e6f3fa;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 5px;
  position: relative;
  text-transform: uppercase;
  top: -1px;
  width: 20px;
}

.barberry--step-info .badge--green {
  background-color: #c6f7e2;
}

.barberry--step-info .badge--yellow {
  background-color: #fff3c4;
}

.barberry--step-info .badge--yellow span {
  color: #de911d;
}

.barberry--step-info .badge--red {
  background-color: #ffe3e3;
}

.barberry--step-info .badge--red span {
  color: #ab091e;
}

.demo--preview {
  display: none;
}

.demo--preview.active {
  display: block;
}

.demo--preview img {
  max-width: 200px;
  border-radius: 6px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
}

.barberry-info--content {
  display: flex;
  flex-direction: column;
}

.barberry-step--headers,
.barberry-step--content {
  display: flex;
}

.barberry-step--content {
  flex-direction: column;
}

.step--info {
  display: flex;
}

.header--first,
.content--first {
  flex: 0 0 40%;
  width: 40%;
}

.header--second,
.header--third,
.content--second,
.content--third,
.content--fourth {
  flex: 0 0 20%;
  width: 20%;
}

.header--third,
.content--third {
  padding-left: 10px;
  border-left: 1px solid #f4f4f4;
}

.content--second .value {
  color: #949494;
}

.content--third .value {
  font-weight: 600;
}

.content--third .value.value-php {
  width: 40px;
  display: inline-block;
  height: 17px;
  overflow: hidden;
}

.content--fourth {
  text-align: right;
}

.icon--blue,
.icon--question {
  height: 12px;
  width: 12px;
}

@media (max-width: 480px) {
  .merlin__content {
    width: 350px;
  }

  .step--info {
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .barberry-step--headers div {
    display: none;
  }

  .content--first {
    flex: 0 0 100%;
    width: 100%;
  }

  .content--fourth {
    margin-left: auto;
  }
}

.help {
  display: inline-block;
  margin-top: 10px;
}

.merlin__body {
  min-width: inherit;
  width: 100%;
  position: relative;
  a:not(.merlin__button) {
    color: #6b6b6b;
    transition: color 200ms ease-in;
    &:hover {
      color: #000;
    }
  }
  a:focus {
    color: #333;
    box-shadow: 0 0 3px 1px #ccc;
  }
  .merlin__wrapper {
    position: relative;
    margin: 0 auto;
    margin: 0;
    height: 100%;
    .merlin__wrapper_inner {
      position: absolute;
      max-width: 700px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      @media (max-width: 670px) {
        max-width: 600px;
      }
      @media (max-width: 480px) {
        max-width: 320px;
      }

      .merlin__wrapper_top {
        opacity: 0;
        -webkit-transition: opacity 600ms cubic-bezier(0.694, 0, 0.335, 2);
        transition: opacity 600ms cubic-bezier(0.694, 0, 0.335, 2);

        .merlin__logo {
        }

        .merlin_wizard_menu {
          padding: 0 0 37px;
          margin: 0;
          list-style: none;
          overflow: hidden;
          color: #ccc;
          width: 100%;
          display: inline-flex;

          li {
            width: 100px;
            float: left;
            padding: 0 0 0.8em;
            margin: 0;
            text-align: center;
            position: relative;
            border-bottom: 3px solid #ccc;
            line-height: 1.4em;
            color: #b2b2b2;
            font-size: 14px;
            line-height: 20px;
            @media (max-width: 480px) {
              font-size: 11px;
            }

            &.active,
            &.done {
              border-bottom: 3px solid #7a7a7a;
              span {
                color: #7a7a7a;
                font-weight: 500;
              }
              &:before {
                border: 4px solid #7a7a7a;
                background: #7a7a7a;
              }
            }
            &.done {
              &:before {
                background: #7a7a7a;
              }
            }

            &:first-child,
            &:last-child {
              width: 200px;
            }
            &:first-child {
              text-align: right;
              &:before {
                right: 50px;
                left: inherit;
                z-index: 99;
              }
              > span {
                padding-right: 30px;
              }
            }
            &:last-child {
              text-align: left;
              &:before {
                left: 50px;
                right: inherit;
                z-index: 99;
              }
              > span {
                padding-left: 30px;
              }
            }
            &:before {
              content: '';
              border: 3px solid #ccc;
              border-radius: 100%;
              width: 3px;
              height: 3px;
              position: absolute;
              bottom: 0;
              left: 50%;
              margin-left: -6px;
              margin-bottom: -6px;
              background: #fff;
            }
          }
        }
      }
      .merlin__content {
        margin: 0;
        width: 100%;
        // width: 700px;
      }
    }
  }
}

body.loaded .merlin__wrapper .merlin__wrapper_inner .merlin__wrapper_top {
  opacity: 1;
}

.merlin__content {
  .import_note {
    background-color: #f5f5f5;
    border-radius: 7px;
    padding: 15px;

    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
      opacity 300ms linear 600ms,
      max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms,
      -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
    transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
      opacity 300ms linear 600ms,
      max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms,
      -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
    transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
      padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 600ms,
      max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms;
    transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
      padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 600ms,
      max-height 700ms cubic-bezier(0.33, 0, 0.2, 1) 0ms,
      -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);

    p {
      color: #999;
      font-size: 13px;
    }
  }
}

.merlin__drawer--open {
  .import_note {
    padding: 15px;
    max-height: 400px;
    opacity: 1;
    pointer-events: inherit;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
      opacity 300ms linear 200ms,
      max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms,
      -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
    transition: padding 600ms cubic-bezier(0.75, 0, 0.25, 1),
      opacity 300ms linear 200ms,
      max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms,
      -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
    transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
      padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 200ms,
      max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms;
    transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1),
      padding 600ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms linear 200ms,
      max-height 900ms cubic-bezier(0.33, 0, 0.2, 1) 100ms,
      -webkit-transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
  }
}

.merlin__body--content {
  .merlin__drawer--import-content {
    display: none;
  }
}