@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; -webkit-box-align: center; -webkit-box-pack: center; -ms-flex-align: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } h1 { border: 0; color: #444; font-size: 20px; font-weight: 500; margin: 0 0 20px; 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; } .dots li.done { background: #0073aa; } .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: #0073aa; } } .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; } @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 #aae4ff; box-shadow: 0 0 0 1px #aae4ff; opacity: 0.5; } 100% { -webkit-box-shadow: 0 0 0 1px #aae4ff; box-shadow: 0 0 0 1px #aae4ff; opacity: 0; -webkit-transform: scale(1.6); transform: scale(1.6); } } @keyframes sonarEffect { 0% { opacity: 1; } 40% { -webkit-box-shadow: 0 0 0 1px #aae4ff; box-shadow: 0 0 0 1px #aae4ff; opacity: 0.5; } 100% { -webkit-box-shadow: 0 0 0 1px #aae4ff; box-shadow: 0 0 0 1px #aae4ff; 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: #0073aa; -webkit-transform: scale(1.6); transform: scale(1.6); } 85% { background: #0073aa; -webkit-transform: scale(0.8); transform: scale(0.8); } 95% { background: #0073aa; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { background: #0073aa; -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: #0073aa; -webkit-transform: scale(1.6); transform: scale(1.6); } 85% { background: #0073aa; -webkit-transform: scale(0.8); transform: scale(0.8); } 95% { background: #0073aa; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { background: #0073aa; -webkit-transform: scale(1); transform: scale(1); } } svg:not(:root) { overflow: hidden; } .icon { margin-bottom: 2.8em; max-width: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .js--finished .icon:not(.icon--checkmark):not(.icon--help) { 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; 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: #0073aa; } .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: #0073aa; } .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: #0073aa; right: 12px; } .merlin__button--next:hover, .merlin__button--next:active { color: #005d8a; } .merlin__button--skip { left: 12px; } .merlin__button--skip:hover, .merlin__button--skip:active { color: #444; } .merlin__button--blue { background: #0073aa; color: #fff; } .merlin__button--blue:hover, .merlin__button--blue:active { background: #005d8a; 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; } .merlin__button--knockout:hover, .merlin__button--knockout:active { background: transparent; color: #0073aa; } .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: #0073aa; } 40% { stroke: #00ace1; } 66% { stroke: #0073aa; } 80%, 90% { stroke: #00ace1; } } @keyframes spinnerColor { 100%, 0% { stroke: #0073aa; } 40% { stroke: #00ace1; } 66% { stroke: #0073aa; } 80%, 90% { stroke: #00ace1; } } [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: #0073aa; } .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 { 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: #0073aa; } .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: #0073aa; 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: #0073aa; 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: #0073aa; } .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: #0073aa; border-color: #0073aa; -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: #0073aa; } .merlin__drawer--install-plugins li .merlin__status-class { display: none; } .merlin__drawer--install-plugins li .badge { background: #e6f3fa; border-radius: 3px; color: #0073aa !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; margin-right: 5px; } .merlin__drawer--install-plugins label i:before { background: #0073aa; 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: #0073aa; 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: #0073aa; } .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: #daf1dc; 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: #46b450; 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: #0073aa; } .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; } .checkbox:checked + label.warning i { background-color: orange; border-color: orange; }