@media (min-width: 961px) {
  .scrollbar-custom-none {
    scrollbar-width: none;
  }
}
.max-w-900 {
  max-width: 900px;
}

.max-h-900 {
  max-height: 900px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

.h-body-with-alert {
  height: calc(100vh - 48px);
}

.shadow-menu {
  box-shadow: 20px 0px 30px rgba(47, 102, 255, 0.03);
}

.star-bg {
  background-image: url(https://app.gomerlin.com.br/assets/dashboard/stars-bt-0effd0480db8c43a63f951ca62f609c68010956b6bd050e251a949adf4f90ee2.svg), linear-gradient(to right, #8164F1 10%, #FC72ED);
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

.bg-editor {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://app.gomerlin.com.br/assets/bg/bg-editor-b608b72f4b86b7579803c6798c72af67b65a2dcbc6491dfc87b392e417acc095.svg);
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.bg-editor::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.7);
  filter: opacity(70%);
}

.bg-editor-full {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(https://app.gomerlin.com.br/assets/bg/bg-editor-b608b72f4b86b7579803c6798c72af67b65a2dcbc6491dfc87b392e417acc095.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.jtk-connector {
  z-index: 9;
}

.object {
  z-index: 10;
}

.h-body {
  height: calc(100vh - 72px);
}

.h-editor-with-alert {
  height: calc(100vh - 120px);
}

.w-body {
  width: calc(100vw - 80px);
}

@media (min-width: 1441px) {
  .w-body {
    width: calc(100vw - 386px);
  }
}
.w-preview {
  width: calc(100% - 24rem);
}

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

.truncate-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#drag {
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: w-resize;
  z-index: 41;
}

.help-icon {
  font-size: 10px;
  color: #7a86a1;
}

.help-icon:focus {
  outline: 0;
}

.pickr button {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.1019607843);
}

#stepByStepPanel {
  transition: width 0.3s ease-in-out;
  top: 120px;
}

#stepByStepPanel .prose {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

#stepByStepPanel .flex-grow {
  min-height: 0;
}

.login-bg {
  background-image: url(https://app.gomerlin.com.br/assets/bg/signup-5095d4ed7a8661af661aaeda0dd4eda9b16d78d3fa2667b88b9f607b6ee20483.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.onboarding-bg {
  background-image: url(https://app.gomerlin.com.br/assets/bg/signup-5095d4ed7a8661af661aaeda0dd4eda9b16d78d3fa2667b88b9f607b6ee20483.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-merlin-tools {
  background-image: url(https://app.gomerlin.com.br/assets/bg/tools_bg-4fc70c0b77766f62067be3da33047be4ccac79cd522809a9e6ee202a3f7ebe65.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.video-uploader-button {
  border: #CACACA solid 1px;
  width: 170px;
  height: 150px;
  border-radius: 8px;
  background-color: #E5E5E5;
  color: #B3B3B3;
  text-align: center;
  display: block;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 26px 0px 26px;
  gap: 26px;
  font-size: 14px;
  line-height: 16px;
}

.skeleton {
  animation: skeleton-loading 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-loading {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
circle-progress::part(value) {
  stroke-width: 6px;
  stroke: #615EFF;
}

circle-progress::part(circle) {
  stroke-width: 0px;
}

circle-progress::part(text) {
  fill: #fff;
}

.table {
  display: grid;
  grid-template-columns: repeat(4, 2fr) 1fr;
  column-gap: 2rem;
  align-items: bottom;
  padding: 1rem;
  border-collapse: collapse;
}

.datefield {
  line-height: 1.12;
}

.table-5 {
  display: grid;
  grid-template-columns: repeat(5, 2fr) 1fr;
  column-gap: 2rem;
  align-items: bottom;
  padding: 1rem;
  border-collapse: collapse;
}

/* BASICS */
.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */
.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */
.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker {
  color: black;
}

.CodeMirror-guttermarker-subtle {
  color: #999;
}

/* CURSOR */
.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}

/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line > span::selection,
.cm-fat-cursor .CodeMirror-line > span > span::selection {
  background: transparent;
}

.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
  background: transparent;
}

.cm-fat-cursor {
  caret-color: transparent;
}

@-moz-keyframes blink {
  50% {
    background-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    background-color: transparent;
  }
}
@keyframes blink {
  50% {
    background-color: transparent;
  }
}
/* Can style cursor different in overwrite (non-insert) mode */
.cm-tab {
  display: inline-block;
  text-decoration: inherit;
}

.CodeMirror-rulers {
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  bottom: 0;
  overflow: hidden;
}

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0;
  bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */
.cm-s-default .cm-header {
  color: blue;
}

.cm-s-default .cm-quote {
  color: #090;
}

.cm-negative {
  color: #d44;
}

.cm-positive {
  color: #292;
}

.cm-header, .cm-strong {
  font-weight: bold;
}

.cm-em {
  font-style: italic;
}

.cm-link {
  text-decoration: underline;
}

.cm-strikethrough {
  text-decoration: line-through;
}

.cm-s-default .cm-keyword {
  color: #708;
}

.cm-s-default .cm-atom {
  color: #219;
}

.cm-s-default .cm-number {
  color: #164;
}

.cm-s-default .cm-def {
  color: #00f;
}

.cm-s-default .cm-variable-2 {
  color: #05a;
}

.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
  color: #085;
}

.cm-s-default .cm-comment {
  color: #a50;
}

.cm-s-default .cm-string {
  color: #a11;
}

.cm-s-default .cm-string-2 {
  color: #f50;
}

.cm-s-default .cm-meta {
  color: #555;
}

.cm-s-default .cm-qualifier {
  color: #555;
}

.cm-s-default .cm-builtin {
  color: #30a;
}

.cm-s-default .cm-bracket {
  color: #997;
}

.cm-s-default .cm-tag {
  color: #170;
}

.cm-s-default .cm-attribute {
  color: #00c;
}

.cm-s-default .cm-hr {
  color: #999;
}

.cm-s-default .cm-link {
  color: #00c;
}

.cm-s-default .cm-error {
  color: #f00;
}

.cm-invalidchar {
  color: #f00;
}

.CodeMirror-composing {
  border-bottom: 2px solid;
}

/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0;
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22;
}

.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, 0.3);
}

.CodeMirror-activeline-background {
  background: #e8f2ff;
}

/* STOP */
/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */
.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px;
  margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}

.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}

.CodeMirror-vscrollbar {
  right: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}

.CodeMirror-scrollbar-filler {
  right: 0;
  bottom: 0;
}

.CodeMirror-gutter-filler {
  left: 0;
  bottom: 0;
}

.CodeMirror-gutters {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  z-index: 3;
}

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}

.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}

.CodeMirror-gutter-background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
}

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-gutter-wrapper ::selection {
  background-color: transparent;
}

.CodeMirror-gutter-wrapper ::-moz-selection {
  background-color: transparent;
}

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}

.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-rtl pre {
  direction: rtl;
}

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}

.CodeMirror-measure pre {
  position: static;
}

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}

div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected {
  background: #d9d9d9;
}

.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0;
}

.CodeMirror-crosshair {
  cursor: crosshair;
}

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
  background: #d7d4f0;
}

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
  background: #d7d4f0;
}

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, 0.4);
}

/* Used to force a border model for a node */
.cm-force-border {
  padding-right: 0.1px;
}

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}
/* See issue #2901 */
.cm-tab-wrap-hack:after {
  content: "";
}

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
  background: none;
}

/*

    Name:       dracula
    Author:     Michael Kaminsky (http://github.com/mkaminsky11)

    Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)

*/
.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
  background-color: #282a36 !important;
  color: #f8f8f2 !important;
  border: none;
}

.cm-s-dracula .CodeMirror-gutters {
  color: #282a36;
}

.cm-s-dracula .CodeMirror-cursor {
  border-left: solid thin #f8f8f0;
}

.cm-s-dracula .CodeMirror-linenumber {
  color: #6D8A88;
}

.cm-s-dracula .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1);
}

.cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection {
  background: rgba(255, 255, 255, 0.1);
}

.cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
  background: rgba(255, 255, 255, 0.1);
}

.cm-s-dracula span.cm-comment {
  color: #6272a4;
}

.cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 {
  color: #f1fa8c;
}

.cm-s-dracula span.cm-number {
  color: #bd93f9;
}

.cm-s-dracula span.cm-variable {
  color: #50fa7b;
}

.cm-s-dracula span.cm-variable-2 {
  color: white;
}

.cm-s-dracula span.cm-def {
  color: #50fa7b;
}

.cm-s-dracula span.cm-operator {
  color: #ff79c6;
}

.cm-s-dracula span.cm-keyword {
  color: #ff79c6;
}

.cm-s-dracula span.cm-atom {
  color: #bd93f9;
}

.cm-s-dracula span.cm-meta {
  color: #f8f8f2;
}

.cm-s-dracula span.cm-tag {
  color: #ff79c6;
}

.cm-s-dracula span.cm-attribute {
  color: #50fa7b;
}

.cm-s-dracula span.cm-qualifier {
  color: #50fa7b;
}

.cm-s-dracula span.cm-property {
  color: #66d9ef;
}

.cm-s-dracula span.cm-builtin {
  color: #50fa7b;
}

.cm-s-dracula span.cm-variable-3, .cm-s-dracula span.cm-type {
  color: #ffb86c;
}

.cm-s-dracula .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.1);
}

.cm-s-dracula .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}

/*! Pickr 1.8.1 MIT | https://github.com/Simonwep/pickr */
.pickr {
  position: relative;
  overflow: visible;
  transform: translateY(0);
}

.pickr * {
  box-sizing: border-box;
  outline: none;
  border: none;
  -webkit-appearance: none;
}

.pickr .pcr-button {
  position: relative;
  height: 2em;
  width: 2em;
  padding: 0.5em;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  border-radius: 0.15em;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;
  background-size: 0;
  transition: all 0.3s;
}

.pickr .pcr-button:before {
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  z-index: -1;
  z-index: auto;
}

.pickr .pcr-button:after, .pickr .pcr-button:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.15em;
}

.pickr .pcr-button:after {
  transition: background 0.3s;
  background: var(--pcr-color);
}

.pickr .pcr-button.clear {
  background-size: 70%;
}

.pickr .pcr-button.clear:before {
  opacity: 0;
}

.pickr .pcr-button.clear:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px var(--pcr-color);
}

.pickr .pcr-button.disabled {
  cursor: not-allowed;
}

.pcr-app *, .pickr * {
  box-sizing: border-box;
  outline: none;
  border: none;
  -webkit-appearance: none;
}

.pcr-app button.pcr-active, .pcr-app button:focus, .pcr-app input.pcr-active, .pcr-app input:focus, .pickr button.pcr-active, .pickr button:focus, .pickr input.pcr-active, .pickr input:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px var(--pcr-color);
}

.pcr-app .pcr-palette, .pcr-app .pcr-slider, .pickr .pcr-palette, .pickr .pcr-slider {
  transition: box-shadow 0.3s;
}

.pcr-app .pcr-palette:focus, .pcr-app .pcr-slider:focus, .pickr .pcr-palette:focus, .pickr .pcr-slider:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.25);
}

.pcr-app {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  border-radius: 0.1em;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
  left: 0;
  top: 0;
}

.pcr-app.visible {
  transition: opacity 0.3s;
  visibility: visible;
  opacity: 1;
}

.pcr-app .pcr-swatches {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.75em;
}

.pcr-app .pcr-swatches.pcr-last {
  margin: 0;
}

@supports (display: grid) {
  .pcr-app .pcr-swatches {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, 1.75em);
  }
}
.pcr-app .pcr-swatches > button {
  font-size: 1em;
  position: relative;
  width: calc(1.75em - 5px);
  height: calc(1.75em - 5px);
  border-radius: 0.15em;
  cursor: pointer;
  margin: 2.5px;
  flex-shrink: 0;
  justify-self: center;
  transition: all 0.15s;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

.pcr-app .pcr-swatches > button:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 6px;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app .pcr-swatches > button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pcr-color);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.15em;
  box-sizing: border-box;
}

.pcr-app .pcr-swatches > button:hover {
  filter: brightness(1.05);
}

.pcr-app .pcr-swatches > button:not(.pcr-active) {
  box-shadow: none;
}

.pcr-app .pcr-interaction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -0.2em;
}

.pcr-app .pcr-interaction > * {
  margin: 0 0.2em;
}

.pcr-app .pcr-interaction input {
  letter-spacing: 0.07em;
  font-size: 0.75em;
  text-align: center;
  cursor: pointer;
  color: #75797e;
  background: #f1f3f4;
  border-radius: 0.15em;
  transition: all 0.15s;
  padding: 0.45em 0.5em;
  margin-top: 0.75em;
}

.pcr-app .pcr-interaction input:hover {
  filter: brightness(0.975);
}

.pcr-app .pcr-interaction input:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(66, 133, 244, 0.75);
}

.pcr-app .pcr-interaction .pcr-result {
  color: #75797e;
  text-align: left;
  flex: 1 1 8em;
  min-width: 8em;
  transition: all 0.2s;
  border-radius: 0.15em;
  background: #f1f3f4;
  cursor: text;
}

.pcr-app .pcr-interaction .pcr-result::-moz-selection {
  background: #4285f4;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-result::selection {
  background: #4285f4;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-type.active {
  color: #fff;
  background: #4285f4;
}

.pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear, .pcr-app .pcr-interaction .pcr-save {
  width: auto;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-cancel:hover, .pcr-app .pcr-interaction .pcr-clear:hover, .pcr-app .pcr-interaction .pcr-save:hover {
  filter: brightness(0.925);
}

.pcr-app .pcr-interaction .pcr-save {
  background: #4285f4;
}

.pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear {
  background: #f44250;
}

.pcr-app .pcr-interaction .pcr-cancel:focus, .pcr-app .pcr-interaction .pcr-clear:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(244, 66, 80, 0.75);
}

.pcr-app .pcr-selection .pcr-picker {
  position: absolute;
  height: 18px;
  width: 18px;
  border: 2px solid #fff;
  border-radius: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pcr-app .pcr-selection .pcr-color-chooser, .pcr-app .pcr-selection .pcr-color-opacity, .pcr-app .pcr-selection .pcr-color-palette {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  cursor: grab;
  cursor: -webkit-grab;
}

.pcr-app .pcr-selection .pcr-color-chooser:active, .pcr-app .pcr-selection .pcr-color-opacity:active, .pcr-app .pcr-selection .pcr-color-palette:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.pcr-app[data-theme=classic] {
  width: 28.5em;
  max-width: 95vw;
  padding: 0.8em;
}

.pcr-app[data-theme=classic] .pcr-selection {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview {
  position: relative;
  z-index: 1;
  width: 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 0.75em;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color {
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
  border-radius: 0.15em 0.15em 0 0;
  z-index: 2;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color {
  border-radius: 0 0 0.15em 0.15em;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color {
  background: var(--pcr-color);
  width: 100%;
  height: 50%;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette {
  width: 100%;
  height: 8em;
  z-index: 1;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette {
  flex-grow: 1;
  border-radius: 0.15em;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity {
  margin-left: 0.75em;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker {
  left: 50%;
  transform: translateX(-50%);
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider {
  width: 8px;
  flex-grow: 1;
  border-radius: 50em;
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider {
  background: linear-gradient(180deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
}

.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider {
  background: linear-gradient(180deg, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 100%, 50%;
}

/*! Pickr 1.8.1 MIT | https://github.com/Simonwep/pickr */
.pickr {
  position: relative;
  overflow: visible;
  transform: translateY(0);
}

.pickr * {
  box-sizing: border-box;
  outline: none;
  border: none;
  -webkit-appearance: none;
}

.pickr .pcr-button {
  position: relative;
  height: 2em;
  width: 2em;
  padding: 0.5em;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  border-radius: 0.15em;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;
  background-size: 0;
  transition: all 0.3s;
}

.pickr .pcr-button:before {
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  z-index: -1;
  z-index: auto;
}

.pickr .pcr-button:after, .pickr .pcr-button:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.15em;
}

.pickr .pcr-button:after {
  transition: background 0.3s;
  background: var(--pcr-color);
}

.pickr .pcr-button.clear {
  background-size: 70%;
}

.pickr .pcr-button.clear:before {
  opacity: 0;
}

.pickr .pcr-button.clear:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px var(--pcr-color);
}

.pickr .pcr-button.disabled {
  cursor: not-allowed;
}

.pcr-app *, .pickr * {
  box-sizing: border-box;
  outline: none;
  border: none;
  -webkit-appearance: none;
}

.pcr-app button.pcr-active, .pcr-app button:focus, .pcr-app input.pcr-active, .pcr-app input:focus, .pickr button.pcr-active, .pickr button:focus, .pickr input.pcr-active, .pickr input:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px var(--pcr-color);
}

.pcr-app .pcr-palette, .pcr-app .pcr-slider, .pickr .pcr-palette, .pickr .pcr-slider {
  transition: box-shadow 0.3s;
}

.pcr-app .pcr-palette:focus, .pcr-app .pcr-slider:focus, .pickr .pcr-palette:focus, .pickr .pcr-slider:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.25);
}

.pcr-app {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  border-radius: 0.1em;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
  left: 0;
  top: 0;
}

.pcr-app.visible {
  transition: opacity 0.3s;
  visibility: visible;
  opacity: 1;
}

.pcr-app .pcr-swatches {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.75em;
}

.pcr-app .pcr-swatches.pcr-last {
  margin: 0;
}

@supports (display: grid) {
  .pcr-app .pcr-swatches {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, 1.75em);
  }
}
.pcr-app .pcr-swatches > button {
  font-size: 1em;
  position: relative;
  width: calc(1.75em - 5px);
  height: calc(1.75em - 5px);
  border-radius: 0.15em;
  cursor: pointer;
  margin: 2.5px;
  flex-shrink: 0;
  justify-self: center;
  transition: all 0.15s;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

.pcr-app .pcr-swatches > button:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 6px;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app .pcr-swatches > button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pcr-color);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.15em;
  box-sizing: border-box;
}

.pcr-app .pcr-swatches > button:hover {
  filter: brightness(1.05);
}

.pcr-app .pcr-swatches > button:not(.pcr-active) {
  box-shadow: none;
}

.pcr-app .pcr-interaction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -0.2em;
}

.pcr-app .pcr-interaction > * {
  margin: 0 0.2em;
}

.pcr-app .pcr-interaction input {
  letter-spacing: 0.07em;
  font-size: 0.75em;
  text-align: center;
  cursor: pointer;
  color: #75797e;
  background: #f1f3f4;
  border-radius: 0.15em;
  transition: all 0.15s;
  padding: 0.45em 0.5em;
  margin-top: 0.75em;
}

.pcr-app .pcr-interaction input:hover {
  filter: brightness(0.975);
}

.pcr-app .pcr-interaction input:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(66, 133, 244, 0.75);
}

.pcr-app .pcr-interaction .pcr-result {
  color: #75797e;
  text-align: left;
  flex: 1 1 8em;
  min-width: 8em;
  transition: all 0.2s;
  border-radius: 0.15em;
  background: #f1f3f4;
  cursor: text;
}

.pcr-app .pcr-interaction .pcr-result::-moz-selection {
  background: #4285f4;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-result::selection {
  background: #4285f4;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-type.active {
  color: #fff;
  background: #4285f4;
}

.pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear, .pcr-app .pcr-interaction .pcr-save {
  width: auto;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-cancel:hover, .pcr-app .pcr-interaction .pcr-clear:hover, .pcr-app .pcr-interaction .pcr-save:hover {
  filter: brightness(0.925);
}

.pcr-app .pcr-interaction .pcr-save {
  background: #4285f4;
}

.pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear {
  background: #f44250;
}

.pcr-app .pcr-interaction .pcr-cancel:focus, .pcr-app .pcr-interaction .pcr-clear:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(244, 66, 80, 0.75);
}

.pcr-app .pcr-selection .pcr-picker {
  position: absolute;
  height: 18px;
  width: 18px;
  border: 2px solid #fff;
  border-radius: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pcr-app .pcr-selection .pcr-color-chooser, .pcr-app .pcr-selection .pcr-color-opacity, .pcr-app .pcr-selection .pcr-color-palette {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  cursor: grab;
  cursor: -webkit-grab;
}

.pcr-app .pcr-selection .pcr-color-chooser:active, .pcr-app .pcr-selection .pcr-color-opacity:active, .pcr-app .pcr-selection .pcr-color-palette:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.pcr-app[data-theme=monolith] {
  width: 14.25em;
  max-width: 95vw;
  padding: 0.8em;
}

.pcr-app[data-theme=monolith] .pcr-selection {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color {
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
  border-radius: 0.15em 0 0 0.15em;
  z-index: 2;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color {
  border-radius: 0 0.15em 0.15em 0;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color {
  background: var(--pcr-color);
  width: 50%;
  height: 100%;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette {
  width: 100%;
  height: 8em;
  z-index: 1;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette {
  border-radius: 0.15em;
  width: 100%;
  height: 100%;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity {
  height: 0.5em;
  margin-top: 0.75em;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-picker {
  top: 50%;
  transform: translateY(-50%);
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
  flex-grow: 1;
  border-radius: 50em;
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider {
  background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
}

.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider {
  background: linear-gradient(90deg, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 100%, 0.25em;
}

/*! Pickr 1.8.1 MIT | https://github.com/Simonwep/pickr */
.pickr {
  position: relative;
  overflow: visible;
  transform: translateY(0);
}

.pickr * {
  box-sizing: border-box;
  outline: none;
  border: none;
  -webkit-appearance: none;
}

.pickr .pcr-button {
  position: relative;
  height: 2em;
  width: 2em;
  padding: 0.5em;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  border-radius: 0.15em;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;
  background-size: 0;
  transition: all 0.3s;
}

.pickr .pcr-button:before {
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  z-index: -1;
  z-index: auto;
}

.pickr .pcr-button:after, .pickr .pcr-button:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.15em;
}

.pickr .pcr-button:after {
  transition: background 0.3s;
  background: var(--pcr-color);
}

.pickr .pcr-button.clear {
  background-size: 70%;
}

.pickr .pcr-button.clear:before {
  opacity: 0;
}

.pickr .pcr-button.clear:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px var(--pcr-color);
}

.pickr .pcr-button.disabled {
  cursor: not-allowed;
}

.pcr-app *, .pickr * {
  box-sizing: border-box;
  outline: none;
  border: none;
  -webkit-appearance: none;
}

.pcr-app button.pcr-active, .pcr-app button:focus, .pcr-app input.pcr-active, .pcr-app input:focus, .pickr button.pcr-active, .pickr button:focus, .pickr input.pcr-active, .pickr input:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px var(--pcr-color);
}

.pcr-app .pcr-palette, .pcr-app .pcr-slider, .pickr .pcr-palette, .pickr .pcr-slider {
  transition: box-shadow 0.3s;
}

.pcr-app .pcr-palette:focus, .pcr-app .pcr-slider:focus, .pickr .pcr-palette:focus, .pickr .pcr-slider:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.25);
}

.pcr-app {
  position: fixed;
  display: flex;
  flex-direction: column;
  z-index: 10000;
  border-radius: 0.1em;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
  left: 0;
  top: 0;
}

.pcr-app.visible {
  transition: opacity 0.3s;
  visibility: visible;
  opacity: 1;
}

.pcr-app .pcr-swatches {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.75em;
}

.pcr-app .pcr-swatches.pcr-last {
  margin: 0;
}

@supports (display: grid) {
  .pcr-app .pcr-swatches {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, 1.75em);
  }
}
.pcr-app .pcr-swatches > button {
  font-size: 1em;
  position: relative;
  width: calc(1.75em - 5px);
  height: calc(1.75em - 5px);
  border-radius: 0.15em;
  cursor: pointer;
  margin: 2.5px;
  flex-shrink: 0;
  justify-self: center;
  transition: all 0.15s;
  overflow: hidden;
  background: transparent;
  z-index: 1;
}

.pcr-app .pcr-swatches > button:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 6px;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app .pcr-swatches > button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--pcr-color);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.15em;
  box-sizing: border-box;
}

.pcr-app .pcr-swatches > button:hover {
  filter: brightness(1.05);
}

.pcr-app .pcr-swatches > button:not(.pcr-active) {
  box-shadow: none;
}

.pcr-app .pcr-interaction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 -0.2em;
}

.pcr-app .pcr-interaction > * {
  margin: 0 0.2em;
}

.pcr-app .pcr-interaction input {
  letter-spacing: 0.07em;
  font-size: 0.75em;
  text-align: center;
  cursor: pointer;
  color: #75797e;
  background: #f1f3f4;
  border-radius: 0.15em;
  transition: all 0.15s;
  padding: 0.45em 0.5em;
  margin-top: 0.75em;
}

.pcr-app .pcr-interaction input:hover {
  filter: brightness(0.975);
}

.pcr-app .pcr-interaction input:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(66, 133, 244, 0.75);
}

.pcr-app .pcr-interaction .pcr-result {
  color: #75797e;
  text-align: left;
  flex: 1 1 8em;
  min-width: 8em;
  transition: all 0.2s;
  border-radius: 0.15em;
  background: #f1f3f4;
  cursor: text;
}

.pcr-app .pcr-interaction .pcr-result::-moz-selection {
  background: #4285f4;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-result::selection {
  background: #4285f4;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-type.active {
  color: #fff;
  background: #4285f4;
}

.pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear, .pcr-app .pcr-interaction .pcr-save {
  width: auto;
  color: #fff;
}

.pcr-app .pcr-interaction .pcr-cancel:hover, .pcr-app .pcr-interaction .pcr-clear:hover, .pcr-app .pcr-interaction .pcr-save:hover {
  filter: brightness(0.925);
}

.pcr-app .pcr-interaction .pcr-save {
  background: #4285f4;
}

.pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear {
  background: #f44250;
}

.pcr-app .pcr-interaction .pcr-cancel:focus, .pcr-app .pcr-interaction .pcr-clear:focus {
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(244, 66, 80, 0.75);
}

.pcr-app .pcr-selection .pcr-picker {
  position: absolute;
  height: 18px;
  width: 18px;
  border: 2px solid #fff;
  border-radius: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pcr-app .pcr-selection .pcr-color-chooser, .pcr-app .pcr-selection .pcr-color-opacity, .pcr-app .pcr-selection .pcr-color-palette {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  cursor: grab;
  cursor: -webkit-grab;
}

.pcr-app .pcr-selection .pcr-color-chooser:active, .pcr-app .pcr-selection .pcr-color-opacity:active, .pcr-app .pcr-selection .pcr-color-palette:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}

.pcr-app[data-theme=nano] {
  width: 14.25em;
  max-width: 95vw;
}

.pcr-app[data-theme=nano] .pcr-swatches {
  margin-top: 0.6em;
  padding: 0 0.6em;
}

.pcr-app[data-theme=nano] .pcr-interaction {
  padding: 0 0.6em 0.6em;
}

.pcr-app[data-theme=nano] .pcr-selection {
  display: grid;
  grid-gap: 0.6em;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 5fr auto auto;
  align-items: center;
  height: 10.5em;
  width: 100%;
  align-self: flex-start;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview {
  grid-area: 2/1/4/1;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-left: 0.6em;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color {
  display: none;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color {
  position: relative;
  background: var(--pcr-color);
  width: 2em;
  height: 2em;
  border-radius: 50em;
  overflow: hidden;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette {
  grid-area: 1/1/2/3;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette {
  border-radius: 0.15em;
  width: 100%;
  height: 100%;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 0.5em;
  border-radius: 0.15em;
  z-index: -1;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser {
  grid-area: 2/2/2/2;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
  grid-area: 3/2/3/2;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
  height: 0.5em;
  margin: 0 0.6em;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker {
  top: 50%;
  transform: translateY(-50%);
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider, .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
  flex-grow: 1;
  border-radius: 50em;
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider {
  background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
}

.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
  background: linear-gradient(90deg, transparent, #000), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
  background-size: 100%, 0.25em;
}

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}

trix-toolbar * {
  box-sizing: border-box;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}

trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}

@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

trix-toolbar .trix-dialogs {
  position: relative;
}

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}

trix-toolbar .trix-dialog--link {
  max-width: 600px;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}

trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}

trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}

trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}

trix-editor .attachment {
  position: relative;
}

trix-editor .attachment:hover {
  cursor: default;
}

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}

trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}

trix-editor .trix-button-group {
  display: inline-flex;
}

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}

trix-editor .trix-button.trix-active {
  background: #cbeefa;
}

trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}

trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}

trix-editor .trix-button--remove:hover {
  border-color: #333;
}

trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}

trix-editor .attachment__metadata-container {
  position: relative;
}

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}

trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}

.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}

.trix-content li {
  margin-left: 1em;
}

.trix-content [dir=rtl] li {
  margin-right: 1em;
}

.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}

.trix-content img {
  max-width: 100%;
  height: auto;
}

.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}

.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}

.trix-content .attachment__caption {
  text-align: center;
}

.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}

.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}

.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}

.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}

.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: #fff;
  padding: 20px 20px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}

.dropzone .dz-message .dz-button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

.dropzone .dz-preview:hover {
  z-index: 1000;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: #fff;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: #fff;
}

.dropzone .dz-preview .dz-error-message:after {
  content: "";
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

.dropzone, .dropzone * {
  box-sizing: border-box;
}

.dropzone {
  position: relative;
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 120px;
  margin: 0.5em;
}

.dropzone .dz-preview .dz-progress {
  display: block;
  height: 15px;
  border: 1px solid #aaa;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  display: block;
  height: 100%;
  width: 0;
  background: green;
}

.dropzone .dz-preview .dz-error-message {
  color: red;
  display: none;
}

.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  display: block;
}

.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
  position: absolute;
  display: none;
  left: 30px;
  top: 30px;
  width: 54px;
  height: 58px;
  left: 50%;
  margin-left: -27px;
}

.arrow {
  display: inline-block;
}

.arrow .curve {
  border: 2px solid #2CD4BE;
  border-color: transparent transparent transparent #2CD4BE;
  height: 90px;
  width: 50px;
  border-radius: 550px 0 0 550px;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
}

.arrow .point {
  position: relative;
  left: 48px;
  top: -3px;
}

.arrow .point:before, .arrow .point:after {
  border: 1px solid #2CD4BE;
  height: 20px;
  content: "";
  position: absolute;
}

.arrow .point:before {
  top: -14px;
  left: -10px;
  transform: rotate(135deg);
  -webkit-transform: rotate(46deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
}

.arrow .point:after {
  top: -26px;
  left: -10px;
  transform: rotate(-55deg);
  -webkit-transform: rotate(-55deg);
  -moz-transform: rotate(-55deg);
  -ms-transform: rotate(-55deg);
}

/*Custom form field style*/
form .field .pickr {
  display: inline-block;
}

.dropzone {
  @apply border-2 rounded-lg border-gray-400 border-dashed;
}
.dropzone.dz-drag-hover {
  @apply border-2 rounded-lg border-gray-200 border-dashed;
}
.dropzone.dz-drag-hover .dz-message {
  opacity: 0.9;
}

.input {
  @apply appearance-none block w-full bg-gray-100 text-gray-700 border border-gray-300 rounded py-3 px-4 leading-tight;
}

.input:focus {
  @apply outline-none bg-white border-gray-400;
}

.label {
  @apply block text-gray-700 text-sm font-bold mb-2;
}

.select {
  @apply appearance-none py-3 px-4 pr-8 block w-full bg-gray-100 border border-gray-300 text-gray-700
   rounded leading-tight;
  -webkit-appearance: none;
}

.select:focus {
  @apply outline-none bg-white border-gray-400;
}

.loader div {
  animation-duration: 0.5s;
}

.loader div:first-child {
  animation-delay: 0.1s;
}

.loader div:nth-child(2) {
  animation-delay: 0.3s;
}

.loader div:nth-child(3) {
  animation-delay: 0.6s;
}

trix-toolbar .trix-button-group--file-tools {
  display: none;
}

trix-toolbar .trix-button-group--history-tools {
  display: none;
}

trix-toolbar .trix-button-group--block-tools {
  margin-left: 0px !important;
  width: min-content;
  border-left: 0px;
  border-radius: 0px;
}

trix-toolbar .trix-button-group--text-tools {
  width: min-content;
  border-right: 0px;
  border-radius: 0px;
}

trix-toolbar .trix-button--icon {
  width: 2em;
}

trix-toolbar .trix-button-group {
  background-color: white;
  border: none;
  margin-bottom: 0px;
}

trix-toolbar .trix-button {
  border: #FFF;
}

trix-toolbar .trix-button-row {
  justify-content: center;
  margin-bottom: 4px;
  border: none;
}

trix-toolbar .trix-button:not(:first-child) {
  border: none;
}

.vivify {
  -webkit-animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.pulsate {
  -webkit-animation-name: pulsate;
  animation-name: pulsate;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@keyframes pulsate {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.blink {
  -webkit-animation-name: blink;
  animation-name: blink;
  -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.hitLeft {
  -webkit-animation-name: hitLeft;
  animation-name: hitLeft;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes hitLeft {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: translateX(20px) rotate(4deg);
    transform: translateX(20px) rotate(4deg);
  }
}
.hitRight {
  -webkit-animation-name: hitRight;
  animation-name: hitRight;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes hitRight {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  40% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: translateX(-20px) rotate(-4deg);
    transform: translateX(-20px) rotate(-4deg);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

@keyframes shake {
  10% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  30% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  40% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  60% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  70% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
}
.ball {
  -webkit-animation-name: ball;
  animation-name: ball;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@keyframes ball {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  20% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    -webkit-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
  }
  40% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  75% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  85% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.pullUp {
  -webkit-animation-name: pullUp;
  animation-name: pullUp;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes pullUp {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
  }
  30% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pullDown {
  -webkit-animation-name: pullDown;
  animation-name: pullDown;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes pullDown {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
  }
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pullLeft {
  -webkit-animation-name: pullLeft;
  animation-name: pullLeft;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes pullLeft {
  0% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: center left;
    transform-origin: center left;
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pullRight {
  -webkit-animation-name: pullRight;
  animation-name: pullRight;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes pullRight {
  0% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
  }
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: center right;
    transform-origin: center right;
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.jumpInLeft {
  -webkit-animation-name: jumpInLeft;
  animation-name: jumpInLeft;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes jumpInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
    transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
    transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
  }
  70% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
  }
  90% {
    -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
}
.jumpInRight {
  -webkit-animation-name: jumpInRight;
  animation-name: jumpInRight;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes jumpInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
    transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
    transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
  }
  70% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
  }
  90% {
    -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
}
.jumpOutRight {
  -webkit-animation-name: jumpOutRight;
  animation-name: jumpOutRight;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes jumpOutRight {
  0% {
    -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
  30% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(5deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
    transform: scale3d(1.2, 1.2, 1.2) rotate(-10deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
    transform: scale3d(0.5, 0.5, 0.5) rotate(90deg);
  }
}
.jumpOutLeft {
  -webkit-animation-name: jumpOutLeft;
  animation-name: jumpOutLeft;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes jumpOutLeft {
  0% {
    -webkit-transform: scale3d(1, 1, 1) rotate(0deg);
    transform: scale3d(1, 1, 1) rotate(0deg);
  }
  30% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
  }
  70% {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
    transform: scale3d(1.2, 1.2, 1.2) rotate(10deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
    transform: scale3d(0.5, 0.5, 0.5) rotate(-90deg);
  }
}
.rollInLeft {
  -webkit-animation-name: rollInLeft;
  animation-name: rollInLeft;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollInLeft {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(-400px) rotate(445deg);
    transform: translateX(-400px) rotate(445deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(20px) rotate(20deg);
    transform: translateX(20px) rotate(20deg);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
}
.rollInRight {
  -webkit-animation-name: rollInRight;
  animation-name: rollInRight;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollInRight {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(400px) rotate(-445deg);
    transform: translateX(400px) rotate(-445deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateX(-20px) rotate(-20deg);
    transform: translateX(-20px) rotate(-20deg);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
}
.rollInTop {
  -webkit-animation-name: rollInTop;
  animation-name: rollInTop;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollInTop {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateY(-400px) rotate(-445deg);
    transform: translateY(-400px) rotate(-445deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(20px) rotate(-20deg);
    transform: translateY(20px) rotate(-20deg);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
}
.rollInBottom {
  -webkit-animation-name: rollInBottom;
  animation-name: rollInBottom;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollInBottom {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateY(400px) rotate(-445deg);
    transform: translateY(400px) rotate(-445deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(-20px) rotate(-20deg);
    transform: translateY(-20px) rotate(-20deg);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
}
.rollOutLeft {
  -webkit-animation-name: rollOutLeft;
  animation-name: rollOutLeft;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollOutLeft {
  0% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateX(20px) rotate(-20deg);
    transform: translateX(20px) rotate(-20deg);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(-400px) rotate(-445deg);
    transform: translateX(-400px) rotate(-445deg);
  }
}
.rollOutRight {
  -webkit-animation-name: rollOutRight;
  animation-name: rollOutRight;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollOutRight {
  0% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateX(-20px) rotate(20deg);
    transform: translateX(-20px) rotate(20deg);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateX(400px) rotate(445deg);
    transform: translateX(400px) rotate(445deg);
  }
}
.rollOutTop {
  -webkit-animation-name: rollOutTop;
  animation-name: rollOutTop;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollOutTop {
  0% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(20px) rotate(20deg);
    transform: translateY(20px) rotate(20deg);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateY(-400px) rotate(445deg);
    transform: translateY(-400px) rotate(445deg);
  }
}
.rollOutBottom {
  -webkit-animation-name: rollOutBottom;
  animation-name: rollOutBottom;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes rollOutBottom {
  0% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-20px) rotate(-20deg);
    transform: translateY(-20px) rotate(-20deg);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translateY(400px) rotate(-445deg);
    transform: translateY(400px) rotate(-445deg);
  }
}
.popIn {
  -webkit-animation-name: popIn;
  animation-name: popIn;
}

@keyframes popIn {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(1.08, 1.08, 1.08);
    transform: scale3d(1.08, 1.08, 1.08);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.popInLeft {
  -webkit-animation-name: popInLeft;
  animation-name: popInLeft;
}

@keyframes popInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1);
    transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1);
  }
  40% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
    transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.popInRight {
  -webkit-animation-name: popInRight;
  animation-name: popInRight;
}

@keyframes popInRight {
  0% {
    -webkit-transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1);
    transform: translate3d(200px, 0, 0) scale3d(0.1, 0.1, 0.1);
    opacity: 0;
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
    transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.popInTop {
  -webkit-animation-name: popInTop;
  animation-name: popInTop;
}

@keyframes popInTop {
  0% {
    -webkit-transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1);
    transform: translate3d(0, -200px, 0) scale3d(0.1, 0.1, 0.1);
    opacity: 0;
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
    transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
    transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
.popInBottom {
  -webkit-animation-name: popInBottom;
  animation-name: popInBottom;
}

@keyframes popInBottom {
  0% {
    -webkit-transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1);
    transform: translate3d(0, 200px, 0) scale3d(0.1, 0.1, 0.1);
    opacity: 0;
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
    transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
    transform: translate3d(0, 0, 0) scale3d(1.03, 1.03, 1.03);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}
.popOut {
  -webkit-animation-name: popOut;
  animation-name: popOut;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes popOut {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.08, 1.08, 1.08);
    transform: scale3d(1.08, 1.08, 1.08);
  }
  80% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.popOutLeft {
  -webkit-animation-name: popOutLeft;
  animation-name: popOutLeft;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes popOutLeft {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
    transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0);
    transform: scale3d(0.5, 0.5, 0.5) translate3d(-200px, 0, 0);
  }
}
.popOutRight {
  -webkit-animation-name: popOutRight;
  animation-name: popOutRight;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes popOutRight {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
    transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0);
    transform: scale3d(0.5, 0.5, 0.5) translate3d(200px, 0, 0);
  }
}
.popOutTop {
  -webkit-animation-name: popOutTop;
  animation-name: popOutTop;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes popOutTop {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-transform-origin: top center;
    transform-origin: top center;
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
    transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0);
    transform: scale3d(0.5, 0.5, 0.5) translate3d(0, -400px, 0);
  }
}
.popOutBottom {
  -webkit-animation-name: popOutBottom;
  animation-name: popOutBottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes popOutBottom {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
    transform: scale3d(1.08, 1.08, 1.08) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0);
    transform: scale3d(0.5, 0.5, 0.5) translate3d(0, 400px, 0);
  }
}
.flip {
  -webkit-animation-name: flip;
  animation-name: flip;
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateY(-360deg) scale3d(1, 1, 1);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  50% {
    -webkit-transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2);
    transform: perspective(400px) rotateY(-180deg) scale3d(1.2, 1.2, 1.2);
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  to {
    -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
    -webkit-animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    animation-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  }
}
.flipInX {
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes flipInX {
  from {
    opacity: 0;
    -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
    transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
  }
  50% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateX(-20deg) scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
  }
}
.flipInY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes flipInY {
  from {
    opacity: 0;
    -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
    transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
  }
  50% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateY(-20deg) scale3d(1, 1, 1);
  }
  to {
    -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateX(0deg) scale3d(1, 1, 1);
  }
  60% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateX(-30deg) scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
    transform: perspective(400px) rotateX(90deg) scale3d(1.2, 1.2, 1.2);
  }
}
.flipOutY {
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateY(0deg) scale3d(1, 1, 1);
  }
  60% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1);
    transform: perspective(400px) rotateY(-30deg) scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
    transform: perspective(400px) rotateY(90deg) scale3d(1.2, 1.2, 1.2);
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeInRight {
  0% {
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeInLeft {
  0% {
    -webkit-transform: translate3d(-400px, 0, 0);
    transform: translate3d(-400px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInTop {
  -webkit-animation-name: fadeInTop;
  animation-name: fadeInTop;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeInTop {
  0% {
    -webkit-transform: translate3d(0, -400px, 0);
    transform: translate3d(0, -400px, 0);
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeInBottom {
  -webkit-animation-name: fadeInBottom;
  animation-name: fadeInBottom;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeInBottom {
  0% {
    -webkit-transform: translate3d(0, 400px, 0);
    transform: translate3d(0, 400px, 0);
    opacity: 0;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeOutLeft {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(-400px, 0, 0);
    transform: translate3d(-400px, 0, 0);
    opacity: 0;
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeOutRight {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
}
.fadeOutTop {
  -webkit-animation-name: fadeOutTop;
  animation-name: fadeOutTop;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeOutTop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 0;
  }
}
.fadeOutBottom {
  -webkit-animation-name: fadeOutBottom;
  animation-name: fadeOutBottom;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeOutBottom {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate3d(0, 300px, 0);
    transform: translate3d(0, 300px, 0);
    opacity: 0;
  }
}
.driveInLeft {
  -webkit-animation-name: driveInLeft;
  animation-name: driveInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveInLeft {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(-400px, 0, 0);
    transform: translate3d(-400px, 0, 0);
  }
  30% {
    opacity: 1;
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.driveInRight {
  -webkit-animation-name: driveInRight;
  animation-name: driveInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveInRight {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
  }
  30% {
    opacity: 1;
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.driveInTop {
  -webkit-animation-name: driveInTop;
  animation-name: driveInTop;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveInTop {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, -400px, 0);
    transform: translate3d(0, -400px, 0);
  }
  30% {
    opacity: 1;
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.driveInBottom {
  -webkit-animation-name: driveInBottom;
  animation-name: driveInBottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveInBottom {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, 300px, 0);
    transform: translate3d(0, 300px, 0);
  }
  30% {
    opacity: 1;
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.driveOutLeft {
  -webkit-animation-name: driveOutLeft;
  animation-name: driveOutLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveOutLeft {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(30px, 0, 0);
    transform: translate3d(30px, 0, 0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(-400px, 0, 0);
    transform: translate3d(-400px, 0, 0);
  }
}
.driveOutRight {
  -webkit-animation-name: driveOutRight;
  animation-name: driveOutRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveOutRight {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(-30px, 0, 0);
    transform: translate3d(-30px, 0, 0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
  }
}
.driveOutTop {
  -webkit-animation-name: driveOutTop;
  animation-name: driveOutTop;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveOutTop {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, -400px, 0);
    transform: translate3d(0, -400px, 0);
  }
}
.driveOutBottom {
  -webkit-animation-name: driveOutBottom;
  animation-name: driveOutBottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes driveOutBottom {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  30% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: translate3d(0, 300px, 0);
    transform: translate3d(0, 300px, 0);
  }
}
.spin {
  -webkit-animation-name: spin;
  animation-name: spin;
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
}

@keyframes spin {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  20% {
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: rotateZ(-20deg);
    transform: rotateZ(-20deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: rotateZ(380deg);
    transform: rotateZ(380deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}
.spinIn {
  -webkit-animation-name: spinIn;
  animation-name: spinIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes spinIn {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: rotateZ(0deg) scale3d(0, 0, 0);
    transform: rotateZ(0deg) scale3d(0, 0, 0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  50% {
    opacity: 1;
  }
  70% {
    -webkit-transform: rotateZ(380deg) scale3d(1, 1, 1);
    transform: rotateZ(380deg) scale3d(1, 1, 1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  100% {
    -webkit-transform: rotateZ(360deg) scale3d(1, 1, 1);
    transform: rotateZ(360deg) scale3d(1, 1, 1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}
.spinOut {
  -webkit-animation-name: spinOut;
  animation-name: spinOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes spinOut {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform: rotateZ(0deg) scale3d(1, 1, 1);
    transform: rotateZ(0deg) scale3d(1, 1, 1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  20% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: rotateZ(-20deg) scale3d(1, 1, 1);
    transform: rotateZ(-20deg) scale3d(1, 1, 1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    -webkit-transform: rotateZ(360deg) scale3d(0, 0, 0);
    transform: rotateZ(360deg) scale3d(0, 0, 0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
  }
}
.swoopInLeft {
  -webkit-animation-name: swoopInLeft;
  animation-name: swoopInLeft;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopInLeft {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0);
    transform: scaleX(1.5) translate3d(-400px, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
    transform: scaleX(1.2) translate3d(0, 0, 0);
  }
  65% {
    -webkit-transform: scaleX(1) translate3d(20px, 0, 0);
    transform: scaleX(1) translate3d(20px, 0, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1) translate3d(0, 0, 0);
    transform: scaleX(1) translate3d(0, 0, 0);
  }
}
.swoopInRight {
  -webkit-animation-name: swoopInRight;
  animation-name: swoopInRight;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopInRight {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0);
    transform: scaleX(1.5) translate3d(400px, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
    transform: scaleX(1.2) translate3d(0, 0, 0);
  }
  65% {
    -webkit-transform: scaleX(1) translate3d(-20px, 0, 0);
    transform: scaleX(1) translate3d(-20px, 0, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1) translate3d(0, 0, 0);
    transform: scaleX(1) translate3d(0, 0, 0);
  }
}
.swoopInTop {
  -webkit-animation-name: swoopInTop;
  animation-name: swoopInTop;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopInTop {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
    transform: scaleY(1.5) translate3d(0, -400px, 0);
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
    transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  65% {
    -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
    transform: scaleY(1) translate3d(0, 20px, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
    transform: scaleY(1) translate3d(0, 0, 0);
  }
}
.swoopInBottom {
  -webkit-animation-name: swoopInBottom;
  animation-name: swoopInBottom;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopInBottom {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, 250px, 0);
    transform: scaleY(1.5) translate3d(0, 250px, 0);
  }
  40% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
    transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  65% {
    -webkit-transform: scaleY(1) translate3d(0, -20px, 0);
    transform: scaleY(1) translate3d(0, -20px, 0);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
    transform: scaleY(1) translate3d(0, 0, 0);
  }
}
.swoopOutLeft {
  -webkit-animation-name: swoopOutLeft;
  animation-name: swoopOutLeft;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopOutLeft {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1) translate3d(0, 0, 0);
    transform: scaleX(1) translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-transform: scaleX(1) translate3d(20px, 0, 0);
    transform: scaleX(1) translate3d(20px, 0, 0);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
    transform: scaleX(1.2) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleX(1.5) translate3d(-400px, 0, 0);
    transform: scaleX(1.5) translate3d(-400px, 0, 0);
  }
}
.swoopOutRight {
  -webkit-animation-name: swoopOutRight;
  animation-name: swoopOutRight;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopOutRight {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1) translate3d(0, 0, 0);
    transform: scaleX(1) translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-transform: scaleX(1) translate3d(-20px, 0, 0);
    transform: scaleX(1) translate3d(-20px, 0, 0);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleX(1.2) translate3d(0, 0, 0);
    transform: scaleX(1.2) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleX(1.5) translate3d(400px, 0, 0);
    transform: scaleX(1.5) translate3d(400px, 0, 0);
  }
}
.swoopOutTop {
  -webkit-animation-name: swoopOutTop;
  animation-name: swoopOutTop;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopOutTop {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
    transform: scaleY(1) translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-transform: scaleY(1) translate3d(0, 20px, 0);
    transform: scaleY(1) translate3d(0, 20px, 0);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
    transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, -400px, 0);
    transform: scaleY(1.5) translate3d(0, -400px, 0);
  }
}
.swoopOutBottom {
  -webkit-animation-name: swoopOutBottom;
  animation-name: swoopOutBottom;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

@keyframes swoopOutBottom {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1) translate3d(0, 0, 0);
    transform: scaleY(1) translate3d(0, 0, 0);
  }
  40% {
    opacity: 1;
    -webkit-transform: scaleY(1) translate3d(0, -20px, 0);
    transform: scaleY(1) translate3d(0, -20px, 0);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scaleY(1.2) translate3d(0, 0, 0);
    transform: scaleY(1.2) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scaleY(1.5) translate3d(0, 200px, 0);
    transform: scaleY(1.5) translate3d(0, 200px, 0);
  }
}
.fold {
  -webkit-animation-name: fold;
  animation-name: fold;
}

@keyframes fold {
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: scale3d(1, 0.4, 1);
    transform: scale3d(1, 0.4, 1);
  }
  60% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }
  100% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -webkit-transform: scale3d(0.2, 0.2, 0.2);
    transform: scale3d(0.2, 0.2, 0.2);
  }
}
.unfold {
  -webkit-animation-name: unfold;
  animation-name: unfold;
}

@keyframes unfold {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
  }
  30% {
    opacity: 1;
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: scale3d(0.4, 0.4, 1);
    transform: scale3d(0.4, 0.4, 1);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    -webkit-transform: scale3d(0.4, 1, 1);
    transform: scale3d(0.4, 1, 1);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.delay-100 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.delay-150 {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}

.duration-100 {
  -webkit-animation-duration: 0.1s;
  animation-duration: 0.1s;
}

.duration-150 {
  -webkit-animation-duration: 150ms;
  animation-duration: 150ms;
}

.delay-200 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.delay-250 {
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
}

.duration-200 {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.duration-250 {
  -webkit-animation-duration: 250ms;
  animation-duration: 250ms;
}

.delay-300 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.delay-350 {
  -webkit-animation-delay: 350ms;
  animation-delay: 350ms;
}

.duration-300 {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.duration-350 {
  -webkit-animation-duration: 350ms;
  animation-duration: 350ms;
}

.delay-400 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.delay-450 {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}

.duration-400 {
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
}

.duration-450 {
  -webkit-animation-duration: 450ms;
  animation-duration: 450ms;
}

.delay-500 {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.delay-550 {
  -webkit-animation-delay: 550ms;
  animation-delay: 550ms;
}

.duration-500 {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.duration-550 {
  -webkit-animation-duration: 550ms;
  animation-duration: 550ms;
}

.delay-600 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.delay-650 {
  -webkit-animation-delay: 650ms;
  animation-delay: 650ms;
}

.duration-600 {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.duration-650 {
  -webkit-animation-duration: 650ms;
  animation-duration: 650ms;
}

.delay-700 {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.delay-750 {
  -webkit-animation-delay: 750ms;
  animation-delay: 750ms;
}

.duration-700 {
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
}

.duration-750 {
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
}

.delay-800 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.delay-850 {
  -webkit-animation-delay: 850ms;
  animation-delay: 850ms;
}

.duration-800 {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}

.duration-850 {
  -webkit-animation-duration: 850ms;
  animation-duration: 850ms;
}

.delay-900 {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.delay-950 {
  -webkit-animation-delay: 950ms;
  animation-delay: 950ms;
}

.duration-900 {
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
}

.duration-950 {
  -webkit-animation-duration: 950ms;
  animation-duration: 950ms;
}

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

.delay-1250 {
  -webkit-animation-delay: 1250ms;
  animation-delay: 1250ms;
}

.delay-1500 {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.delay-1750 {
  -webkit-animation-delay: 1750ms;
  animation-delay: 1750ms;
}

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

.duration-1250 {
  -webkit-animation-duration: 1250ms;
  animation-duration: 1250ms;
}

.duration-1500 {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.duration-1750 {
  -webkit-animation-duration: 1750ms;
  animation-duration: 1750ms;
}

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

.delay-2250 {
  -webkit-animation-delay: 2250ms;
  animation-delay: 2250ms;
}

.delay-2500 {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.delay-2750 {
  -webkit-animation-delay: 2750ms;
  animation-delay: 2750ms;
}

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

.duration-2250 {
  -webkit-animation-duration: 2250ms;
  animation-duration: 2250ms;
}

.duration-2500 {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

.duration-2750 {
  -webkit-animation-duration: 2750ms;
  animation-duration: 2750ms;
}

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

.delay-3250 {
  -webkit-animation-delay: 3250ms;
  animation-delay: 3250ms;
}

.delay-3500 {
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.delay-3750 {
  -webkit-animation-delay: 3750ms;
  animation-delay: 3750ms;
}

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

.duration-3250 {
  -webkit-animation-duration: 3250ms;
  animation-duration: 3250ms;
}

.duration-3500 {
  -webkit-animation-duration: 3.5s;
  animation-duration: 3.5s;
}

.duration-3750 {
  -webkit-animation-duration: 3750ms;
  animation-duration: 3750ms;
}

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

.delay-4250 {
  -webkit-animation-delay: 4250ms;
  animation-delay: 4250ms;
}

.delay-4500 {
  -webkit-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.delay-4750 {
  -webkit-animation-delay: 4750ms;
  animation-delay: 4750ms;
}

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

.duration-4250 {
  -webkit-animation-duration: 4250ms;
  animation-duration: 4250ms;
}

.duration-4500 {
  -webkit-animation-duration: 4.5s;
  animation-duration: 4.5s;
}

.duration-4750 {
  -webkit-animation-duration: 4750ms;
  animation-duration: 4750ms;
}

.delay-5000 {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.delay-5250 {
  -webkit-animation-delay: 5250ms;
  animation-delay: 5250ms;
}

.delay-5500 {
  -webkit-animation-delay: 5.5s;
  animation-delay: 5.5s;
}

.delay-5750 {
  -webkit-animation-delay: 5750ms;
  animation-delay: 5750ms;
}

.duration-5000 {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}

.duration-5250 {
  -webkit-animation-duration: 5250ms;
  animation-duration: 5250ms;
}

.duration-5500 {
  -webkit-animation-duration: 5.5s;
  animation-duration: 5.5s;
}

.duration-5750 {
  -webkit-animation-duration: 5750ms;
  animation-duration: 5750ms;
}

.duration-6000 {
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}

.duration-6250 {
  -webkit-animation-duration: 6250ms;
  animation-duration: 6250ms;
}

.duration-6500 {
  -webkit-animation-duration: 6.5s;
  animation-duration: 6.5s;
}

.duration-6750 {
  -webkit-animation-duration: 6750ms;
  animation-duration: 6750ms;
}

.duration-7000 {
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
}

.duration-7250 {
  -webkit-animation-duration: 7250ms;
  animation-duration: 7250ms;
}

.duration-7500 {
  -webkit-animation-duration: 7.5s;
  animation-duration: 7.5s;
}

.duration-7750 {
  -webkit-animation-duration: 7750ms;
  animation-duration: 7750ms;
}

.duration-8000 {
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}

.duration-8250 {
  -webkit-animation-duration: 8250ms;
  animation-duration: 8250ms;
}

.duration-8500 {
  -webkit-animation-duration: 8.5s;
  animation-duration: 8.5s;
}

.duration-8750 {
  -webkit-animation-duration: 8750ms;
  animation-duration: 8750ms;
}

.duration-9000 {
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
}

.duration-9250 {
  -webkit-animation-duration: 9250ms;
  animation-duration: 9250ms;
}

.duration-9500 {
  -webkit-animation-duration: 9.5s;
  animation-duration: 9.5s;
}

.duration-9750 {
  -webkit-animation-duration: 9750ms;
  animation-duration: 9750ms;
}

.duration-10000 {
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}

.duration-10250 {
  -webkit-animation-duration: 10250ms;
  animation-duration: 10250ms;
}

.duration-10500 {
  -webkit-animation-duration: 10.5s;
  animation-duration: 10.5s;
}

.duration-10750 {
  -webkit-animation-duration: 10750ms;
  animation-duration: 10750ms;
}

.g-sign-in-button {
  margin: 10px;
  display: inline-block;
  width: 240px;
  height: 50px;
  background-color: #4285f4;
  color: #fff;
  border-radius: 1px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
}

.g-sign-in-button:hover {
  cursor: pointer;
  -webkit-box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
  box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
}

.g-sign-in-button:active {
  background-color: #3367D6;
  transition: background-color 0.2s;
}

.g-sign-in-button .content-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

.g-sign-in-button img {
  width: 18px;
  height: 18px;
}

.g-sign-in-button .logo-wrapper {
  padding: 15px;
  background: #fff;
  width: 48px;
  height: 100%;
  border-radius: 1px;
  display: inline-block;
}

.g-sign-in-button .text-container {
  font-family: Roboto, arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.21px;
  font-size: 16px;
  line-height: 48px;
  vertical-align: top;
  border: none;
  display: inline-block;
  text-align: center;
  width: 180px;
}

.credit-card form {
  padding: 0 15px;
}

.credit-card {
  background-color: #fff;
  padding: 15px;
}

.credit-card fieldset {
  border-style: none;
  padding: 5px;
  margin-left: -5px;
  margin-right: -5px;
  border-radius: 8px;
}

.credit-card fieldset legend {
  float: left;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #8898aa;
  padding: 3px 10px 7px;
}

.credit-card .row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 15px;
}

.credit-card .row + .row {
  border-top: 1px solid #819efc;
}

.credit-card label {
  width: 15%;
  min-width: 70px;
  padding: 11px 0;
  color: #c4f0ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.credit-card .StripeElement {
  width: 100%;
  padding: 11px 15px 11px 0;
}

.credit-card input {
  width: 100%;
  padding: 11px 15px 11px 0;
  color: #fff;
  -webkit-animation: 1ms void-animation-out;
}

.credit-card input::-webkit-input-placeholder {
  color: #87bbfd;
}

.credit-card input::-moz-placeholder {
  color: #87bbfd;
}

.credit-card input:-ms-input-placeholder {
  color: #87bbfd;
}

.credit-card .card-only {
  display: block;
}

.credit-card .payment-request-available {
  display: none;
}

.credit-card fieldset legend + * {
  clear: both;
}

.credit-card input, .credit-card button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-style: none;
}

.credit-card input:-webkit-autofill {
  transition: background-color 100000000s;
  -webkit-animation: 1ms void-animation-out;
}

.credit-card input {
  -webkit-animation: 1ms void-animation-out;
}

.credit-card input::-webkit-input-placeholder {
  color: #9bacc8;
}

.credit-card input::-moz-placeholder {
  color: #9bacc8;
}

.credit-card input:-ms-input-placeholder {
  color: #9bacc8;
}

.credit-card .error svg .base {
  fill: #e25950;
}

.credit-card .error svg .glyph {
  fill: #f6f9fc;
}

.credit-card .error .message {
  color: #e25950;
}

.credit-card .success .icon .border {
  stroke: #ffc7ee;
}

.credit-card .success .icon .checkmark {
  stroke: #d782d9;
}

.credit-card .success .title {
  color: #32325d;
}

.credit-card .success .message {
  color: #8898aa;
}

.credit-card .success .reset path {
  fill: #d782d9;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

#chat {
  font-family: Poppins, sans-serif;
  font-size: 17px;
  line-height: 1.45em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  word-break: break-word;
}

.border-chat-merlin {
  border-radius: 21px;
}

.border-chat-popup-merlin {
  border-radius: 21px;
  border-bottom-right-radius: 2px;
}

/*----------------  WRAPPER ----------------*/
.chat-wrapper-fixed * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.chat-wrapper .dz-preview {
  display: none;
}

.chat-wrapper-fixed {
  bottom: 20px;
  right: 20px;
  position: fixed;
  height: 625px;
  width: 100%;
  max-height: 100vh;
  max-width: 390px;
}

.chat-wrapper {
  width: 100%;
  height: 625px;
  max-height: 100vh;
  max-width: 390px;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  border-radius: 17px;
  color: #445278;
  font-family: "Rubik", sans-serif;
  overflow: hidden;
}

@media (max-width: 767px) {
  .chat-wrapper-fixed {
    border-radius: 0px;
    height: 100%;
    max-height: unset;
    max-width: unset;
    bottom: 0;
    right: 0;
  }
  .chat-wrapper {
    border-radius: 0px;
    max-width: unset;
    height: 100%;
  }
}
.chat-wrapper input,
.chat-wrapper button,
.chat-wrapper textarea,
.chat-wrapper input:focus,
.chat-wrapper button:focus,
.chat-wrapper textarea:focus .chat-wrapper input:active,
.chat-wrapper button:active,
.chat-wrapper textarea:active {
  outline: none;
}

@media (min-width: 768px) {
  .chat-wrapper {
    font-size: 16px;
  }
}
@media (max-height: 645px), (max-width: 410px) {
  .chat-wrapper-fixed {
    bottom: 0;
    right: 0;
    height: 645px;
  }
  .chat-wrapper {
    height: 645px;
  }
}
@media (max-width: 410px) {
  .chat-wrapper,
  .chat-wrapper-fixed {
    max-width: 410px;
    height: 100vh;
  }
}
.chat-wrapper.full-width {
  max-width: 100%;
  max-height: 100%;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
}

/*----------------  HEADER ----------------*/
.chat-header-without-config {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;
}

.chat-header-without-config .info {
  position: relative;
  color: #fff;
  display: flex;
  width: 100%;
  padding: 20px 15px 0;
  height: 50px;
}

.chat-header-without-config .info .close {
  position: absolute;
  width: 24px;
  height: 23px;
  right: 5px;
  top: 30px;
  cursor: pointer;
  -webkit-mask-image: url(https://app.gomerlin.com.br/assets/bot/close-9627a75d0db82d32006a4b1a19ce50b2a2130396050557dd5661c6f6bfbc29cd.svg);
  mask-image: url(https://app.gomerlin.com.br/assets/bot/close-9627a75d0db82d32006a4b1a19ce50b2a2130396050557dd5661c6f6bfbc29cd.svg);
}

.chat-header {
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: column;
}

.chat-header .info {
  color: #fff;
  display: flex;
  width: 100%;
  padding: 20px 15px 0;
  height: 70px;
}

.chat-header .round {
  height: 20px;
  width: calc(100% + 8px);
  margin-left: -4px;
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  margin-top: -7px;
  z-index: 1;
}

.chat-header .info .icon {
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
}

.chat-header .info .text {
  padding: 0 10px;
  line-height: 20px;
  width: calc(100% - 34px - 24px);
}

.chat-header .info .text .title {
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
}

.chat-header .info .text .description {
  display: block;
  font-size: 13px;
  line-height: 13px;
}

.chat-header .info .close {
  width: 24px;
  height: 23px;
  cursor: pointer;
  -webkit-mask-image: url(https://app.gomerlin.com.br/assets/bot/close-9627a75d0db82d32006a4b1a19ce50b2a2130396050557dd5661c6f6bfbc29cd.svg);
  mask-image: url(https://app.gomerlin.com.br/assets/bot/close-9627a75d0db82d32006a4b1a19ce50b2a2130396050557dd5661c6f6bfbc29cd.svg);
}

.chat-header-icon {
  width: 34px;
  height: 34px;
  float: left;
  padding: 6px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/logo-3f13a7f19020408d3967b67568fce953e78b344059fdca3491fa313368e0df8d.svg);
}

.chat-header-text {
  float: left;
  padding: 0 10px;
  line-height: 20px;
  width: calc(100% - 34px - 24px);
}

.chat-header-text .title {
  text-transform: lowercase;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
}

.chat-header-text .description {
  display: block;
  font-size: 13px;
  line-height: 13px;
}

/*----------------  LIST ----------------*/
.chat-list {
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background-color: #fff;
}

@media (max-width: 767px) {
  .chat-list {
    border-radius: 13px 13px 0 0;
  }
}
.chat-wrapper.full-width .chat-list {
  padding-top: 0;
}

.chat-list-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 auto;
  padding-left: calc(50% - 300px);
  padding-right: calc(50% - 300px);
  padding-top: 20px;
  padding-bottom: 20px;
}

.chat-wrapper.full-width .chat-list-scroll {
  padding-top: 20px;
}

.chat-wrapper .chat-list.with-footer {
  padding-bottom: 52px;
}

.chat-list.with-header {
  margin-top: 70px;
  height: calc(100% - 70px);
  padding-top: 20px;
}

.chat-wrapper.full-width .chat-list.hide-header {
  border-radius: 0;
}

.chat-wrapper.full-width .chat-list.hide-footer {
  border-radius: 0;
}

.chat-list-row {
  width: 100%;
  float: left;
  position: relative;
  padding: 0 15px 4px 50px;
  word-wrap: break-word;
}

.chat-list-row:last-child {
  padding-bottom: 10px;
}

.chat-list-row:not(.chat-list-row-visitor) + .chat-list-row-visitor + .chat-list-row-visitor {
  margin-top: -6px;
}

.chat-list-row-visitor + .chat-list-row:not(.chat-list-row-visitor) {
  padding-top: 6px;
}

.chat-list-row-avatar {
  width: 32px;
  height: 32px;
  display: none;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  left: 10px;
  bottom: 10px;
}

@media (min-width: 768px) {
  .chat-list-row-avatar {
    width: 38px;
    height: 38px;
    left: 3px;
  }
}
.show-avatar .chat-list-row-avatar {
  display: block;
}

/*----------------  MESSAGE ----------------*/
.chat-list-row-message {
  padding: 13px 15px;
  max-width: 600px;
  line-height: 18px;
  float: left;
  background-color: #f4f8fc;
  border-radius: 10px 10px 10px 0;
}

.chat-list-row-message a {
  color: #5C40F5;
}

@media (min-width: 768px) {
  .chat-list-row-message {
    padding: 15px 18px;
  }
}
.chat-list-row-message.visitor {
  float: right;
  color: #fff;
  border-radius: 10px 10px 0 10px;
  background-color: #6461f2;
  border-bottom-right-radius: 0;
  word-wrap: break-word;
  max-width: 100%;
}

/*----------------  BUTTON ----------------*/
.chat-list-row-button {
  padding: 10px 25px;
  line-height: 18px;
  float: left;
  cursor: pointer;
  border-radius: 10px;
  background-color: #f4f8fc;
  border: 2px solid #e6edf7;
}

.chat-list-row-button.visitor {
  line-height: 18px;
  float: right;
  color: #fff;
  cursor: default;
  background-color: #6461f2;
  border-radius: 10px;
  border-bottom-right-radius: 0;
  word-wrap: break-word;
  max-width: 100%;
  border: none;
  margin: 6px 0 8px;
}

@media (min-width: 768px) {
  .chat-list-row-button {
    padding: 12px 25px;
  }
}
/*----------------  OPTIONS ----------------*/
.chat-list-row-option {
  float: left;
  width: 100%;
  max-width: 600px;
  cursor: pointer;
  padding: 10px 25px;
  line-height: 18px;
  border-radius: 20px;
  font-weight: 600;
  background-color: #f4f8fc;
  text-align: center;
  border: 2px solid #e6edf7;
}

.chat-list-row-option:hover,
.chat-list-row-option.selected {
  color: #fff;
  border-color: #6461f2;
  background-color: #6461f2;
}

.chat-list-row-option + .chat-list-row-option {
  margin-top: 10px;
}

.chat-list-row-search-option.multiple-choice span::before {
  content: " ";
  width: 16px;
  height: 16px;
  float: left;
  margin-top: 2px;
  margin-left: -5px;
  margin-right: 6px;
  -webkit-mask-image: url(https://app.gomerlin.com.br/assets/bot/check-e6d5146eb98784f2c725b96ee5a245ae310ee8c9f019d4b42e327697b37eb23d.svg);
  mask-image: url(https://app.gomerlin.com.br/assets/bot/check-e6d5146eb98784f2c725b96ee5a245ae310ee8c9f019d4b42e327697b37eb23d.svg);
  display: block;
  opacity: 0.5;
}

.chat-list-row-search-option.multiple-choice.selected span::before {
  opacity: 1;
}

/*----------------  ADRESS DROPDOWN ----------------*/
.pac-container {
  background-color: #f4f8fc !important;
  border: 2px solid #e7eef7 !important;
  box-shadow: none !important;
  margin-top: -2px;
  border-radius: 10px;
}

.pac-item {
  cursor: pointer !important;
}

.pac-item:first-child {
  border-top: none;
}

.pac-logo::after {
  display: none;
}

.pac-item-query {
  font-size: 12px !important;
}

/*----------------  SEARCH ----------------*/
.chat-list-row-search {
  max-width: 600px;
  width: 100%;
  float: left;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  border-radius: 5px;
  padding: 8px 8px 8px 35px;
  border: 2px solid #e6edf7;
  background-color: #f4f8fc;
  color: #445278;
  font-family: "Rubik", sans-serif;
}

.chat-list-row-search.address {
  padding-right: 32px;
}

.chat-list-row-search.filter-options {
  border-radius: 10px;
}

.chat-list-row-search.filter-options input {
  font-size: 13px;
}

@media (min-width: 768px) {
  .chat-list-row-search {
    font-size: 16px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}
.chat-list-row-search::placeholder {
  font-weight: 400;
}

.chat-list-row-search:focus {
  outline: none;
  box-shadow: none;
}

.input-error .chat-list-row-search {
  border-color: #e74c3c;
}

.input-error .chat-list-row-search:focus {
  border-color: #e74c3c;
}

.chat-list-row-search-icon {
  width: 22px;
  height: 22px;
  float: left;
  position: relative;
  margin-top: 9px;
  margin-bottom: -32px;
  margin-left: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/search-24208ee274359a5a4ff4960d038000b4e37d5e6ef2829d4fa66bab35abb3bc2c.svg);
}

@media (min-width: 768px) {
  .chat-list-row-search-icon {
    margin-top: 12px;
    margin-bottom: -35px;
  }
}
.chat-list-row-search-option-full {
  padding: 10px 15px;
  line-height: 18px;
  float: left;
  cursor: pointer;
  margin: 4px 0;
  border-radius: 20px;
  background-color: #f4f8fc;
  border: 2px solid #e6edf7;
  width: 100%;
  clear: both;
  text-align: center;
}

.chat-list-row-search-option {
  padding: 10px 15px;
  line-height: 18px;
  float: left;
  cursor: pointer;
  margin: 4px 0;
  border-radius: 20px;
  background-color: #f4f8fc;
  border: 2px solid #e6edf7;
  width: 100%;
  max-width: 600px;
  clear: both;
}

@media (min-width: 768px) {
  .chat-list-row-search-option {
    width: auto;
    padding: 12px 15px;
    margin-bottom: 8px !important;
  }
}
@media (min-width: 768px) {
  .full-width .chat-list-row-search-option,
  .is-searchable .chat-list-row-search-option {
    text-align: left;
  }
}
.full-width .chat-list-row-search-option,
.is-searchable .chat-list-row-search-option {
  margin: 4px 8px 4px 0;
  clear: none;
}

.chat-list-row.is-searchable:empty:before {
  content: "Nada aqui... Tente novamente com outros termos";
  font-size: smaller;
}

.chat-list-row-search-option img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  border-radius: 5px;
}

.chat-list-row-search-option:hover,
.chat-list-row-search-option.selected {
  color: #fff;
  border-color: #6461f2;
  background-color: #6461f2;
}

.chat-list-row-search-option-full:hover,
.chat-list-row-search-option-full.selected {
  color: #fff;
  border-color: #6461f2;
  background-color: #6461f2;
}

.chat-list-row-search-option.visitor {
  padding: 10px 25px;
  line-height: 18px;
  float: right;
  color: #fff;
  cursor: default;
  background-color: #6461f2;
  border-radius: 10px;
  border-bottom-right-radius: 0;
  word-wrap: break-word;
  max-width: 100%;
}

/*----------------  VIDEO ----------------*/
.chat-list-row-video {
  width: 100%;
  max-width: 600px;
  height: 0;
  position: relative;
  padding-bottom: 54%; /* 16:9 */
  overflow: hidden;
}

.chat-list-row-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 281px;
  border-radius: 10px;
}

.chat-list-row-video-legend {
  width: 100%;
  max-width: 600px;
  padding: 13px 15px;
  line-height: 18px;
  float: left;
  background-color: #f4f8fc;
  border-radius: 0 0 10px 10px;
}

/*----------------  IMAGE ----------------*/
.chat-list-row-image {
  max-width: 600px;
  max-height: 180px;
  height: auto;
  float: left;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .chat-list-row-image {
    max-width: 100%;
  }
}
/*----------------  INPUT ----------------*/
.chat-list-row-input-wrapper {
  width: 100%;
  max-width: 600px;
  padding: 13px 15px;
  line-height: 18px;
  float: left;
  background-color: #f4f8fc;
  border-radius: 10px 10px 10px 0;
}

.chat-list-row-input-legend {
  margin-bottom: 8px;
}

.chat-list-row-input {
  width: 100%;
  float: left;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  border-radius: 5px;
  padding: 8px 32px 8px 8px;
  border: 2px solid #e6edf7;
  background-color: #f4f8fc;
  color: #445278;
  font-family: "Rubik", sans-serif;
}

@media (min-width: 768px) {
  .chat-list-row-input {
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}
.input-error .chat-list-row-input {
  border-color: #e74c3c;
}

.input-error .chat-list-row-input:focus {
  border-color: #e74c3c;
}

.chat-list-row-input::placeholder {
  font-weight: 400;
}

.chat-list-row-input:focus {
  outline: none;
  box-shadow: none;
}

/*----------------  UPLOAD ----------------*/
.chat-list-row-upload-dropzone {
  max-width: 600px;
  padding: 15px;
  line-height: 18px;
  float: left;
  cursor: pointer;
  background-color: #f4f8fc;
  border-radius: 10px;
  border: 2px dotted #e7eef7;
  text-align: center;
  font-weight: 500;
}

/*----------------  FILE ----------------*/
.chat-list-row-upload-file {
  max-width: 600px;
  padding: 15px;
  line-height: 18px;
  float: left;
  cursor: pointer;
  background-color: #f4f8fc;
  border-radius: 10px;
  border: 2px dotted #e7eef7;
  text-align: center;
  font-weight: 500;
}

.chat-list-row-upload-file-center {
  width: 250px;
  margin: 0 auto;
}

.chat-list-row-upload-file-thumb {
  width: 120px;
  height: 70px;
  float: left;
  margin-right: 10px;
  border-radius: 10px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  background-color: #ffffff;
}

.chat-list-row-upload-dropzone-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/upload-16326cc8b18101dd68ae83cabd34e745cdad077a1d29887b60281a22f77d40a9.svg);
}

.chat-list-row-upload-dropzone-loading {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
}

.chat-list-row-upload-file-button {
  float: left;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12px;
  margin: 3px 0;
  cursor: pointer;
}

@media (min-width: 768px) {
  .chat-list-row-upload-file-button {
    font-size: 14px;
  }
}
.chat-list-row-upload-file-icon {
  float: left;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  margin-bottom: -2px;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/remove-fe94cd4f7828e1a94e049b5102c7e72401008aa083aa525fa641e7cb778ae344.png);
}

.chat-list-row-link {
  width: 38px;
  height: 38px;
  float: right;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #24dbd5;
  background-size: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/anexo-71c71cd9cdcb03c32c73d54c10786175b8d6d7321f8b6427911be14f29b60f06.svg);
}

/*----------------  TEXTAREA ----------------*/
.chat-list-row-textarea-wrapper {
  width: 100%;
  max-width: 600px;
  padding: 13px 15px;
  line-height: 18px;
  float: left;
  background-color: #f4f8fc;
  border-radius: 10px 10px 10px 0;
}

.chat-list-row-textarea-legend {
  margin-bottom: 8px;
}

@media (min-width: 768px) {
  .chat-list-row-textarea-legend {
    margin-bottom: 12px;
  }
}
.chat-list-row-textarea {
  width: 100%;
  float: left;
  padding: 8px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  border-radius: 5px;
  border: 2px solid #e6edf7;
  background-color: #f4f8fc;
  color: #445278;
  font-family: "Rubik", sans-serif;
  overflow-y: hidden;
  resize: none;
}

@media (min-width: 768px) {
  .chat-list-row-textarea {
    font-size: 16px;
    padding-right: 30px;
  }
}
.chat-list-row-textarea-wrapper + .chat-list-row-button {
  margin-top: 10px;
}

.chat-list-row-textarea::placeholder {
  font-weight: 400;
}

.chat-list-row-textarea:focus {
  outline: none;
  box-shadow: none;
}

.chat-list-row-textarea-submit {
  width: 24px;
  height: 24px;
  float: right;
  position: relative;
  margin-top: -30px;
  margin-right: 5px;
  background-size: contain;
  -webkit-mask-image: url(https://app.gomerlin.com.br/assets/bot/submit-55dd03f6082cbbaa19559c041178a4aab629f0bd6e2dc5abc6de25f826c1fa4c.svg);
  mask-image: url(https://app.gomerlin.com.br/assets/bot/submit-55dd03f6082cbbaa19559c041178a4aab629f0bd6e2dc5abc6de25f826c1fa4c.svg);
  outline: none !important;
  cursor: pointer;
  -webkit-mask-size: 20px 20px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right top;
  mask-size: 20px 20px;
  mask-repeat: no-repeat;
  mask-position: right top;
  border: none;
}

@media (min-width: 768px) {
  .chat-list-row-textarea-submit {
    margin-top: -32px;
    margin-right: 12px;
  }
}
.chat-list-row-textarea-submit:hover {
  outline: none !important;
}

.chat-list-row-textarea-submit:active {
  outline: none !important;
}

/*----------------  FOOTER ----------------*/
.chat-footer {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 52px;
  padding: 19px;
  position: absolute;
  background-color: #f4f8fc;
  text-align: center;
}

.chat-footer-arrow {
  opacity: 0.5;
  width: 28px;
  height: 28px;
  float: left;
  cursor: pointer;
  margin-top: -5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/up-40428cf12d80463948509608ee1a8d8af42518077d616d1c2c5a232b67f4c2ac.svg);
}

.chat-footer-arrow:hover {
  opacity: 1;
}

.chat-footer-arrow + .chat-footer-arrow {
  background-image: url(https://app.gomerlin.com.br/assets/bot/down-01b499af838d3afaf5c9d6c389160b73eaf5ab5f75038d7c80659c89a8615958.svg);
  margin-left: 20px;
}

.chat-footer-credit {
  color: #bdceea;
  font-size: 12px;
  display: flex;
  justify-content: center;
}

.chat-footer-credit-logo {
  width: 84px;
  height: 28px;
  margin-top: -4px;
  margin-left: 8px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/merlin-wt-93a2cf2bb53899916474b0a0e25f4b9e71f2bee17576a531b6b43a34a5492bb0.svg);
}

@media (max-width: 645px) {
  .chat-footer-credit {
    float: right;
  }
  .chat-footer-credit-logo {
    float: right;
  }
}
/*----------------  LOGIN ----------------*/
.chat-list-loading {
  margin: 10px 0px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: line 1s linear infinite alternate;
  -moz-animation: line 1s linear infinite alternate;
  animation: line 1s linear infinite alternate;
}

@-webkit-keyframes line {
  0% {
    background-color: rgb(0, 0, 0);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  25% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgb(0, 0, 0), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgb(0, 0, 0);
  }
}
@-moz-keyframes line {
  0% {
    background-color: rgb(0, 0, 0);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  25% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgb(0, 0, 0), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgb(0, 0, 0);
  }
}
@keyframes line {
  0% {
    background-color: rgb(0, 0, 0);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  25% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgb(0, 0, 0), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgb(0, 0, 0);
  }
}
/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.confirm-button:hover {
  filter: brightness(1.2);
}

.phone-variable-example {
  word-break: break-all;
  white-space: normal;
}

@font-face {
  font-family: Gogh;
  src: url(https://app.gomerlin.com.br/assets/gogh/Gogh-ExtraBold-64203c244ace7655339ab509dfac38ef177b850a1daef8b10c20a0523ebba3d9.otf);
}
@font-face {
  font-family: Avenir;
  src: url(https://app.gomerlin.com.br/assets/avenir-lt-pro/AvenirLTProRoman-77dc336c429c2bed63034b793648b4766affdc9e419ca3e7aaaff310ce2eefd2.otf);
}
@font-face {
  font-family: AvenirBold;
  src: url(https://app.gomerlin.com.br/assets/avenir-lt-pro/AvenirLTProHeavy-9dc87e533de087a90d6e71c1f7db10bcb81a5282a9b40d90c323b7a8e8ae1885.otf);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

#quiz {
  margin: 0;
  outline: 0;
  padding: 0;
  text-decoration: none;
  font-family: Gogh, sans-serif;
  background-color: #F9FAFC;
  color: #2B2B2B;
}

#quiz button {
  cursor: pointer;
}

#quiz button:hover {
  filter: brightness(1.2);
}

#quiz button:active {
  filter: brightness(0.8);
}

#quiz *::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #979797;
}

#quiz *::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #979797;
  opacity: 1;
}

#quiz *::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #979797;
  opacity: 1;
}

#quiz *:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #979797;
}

#quiz *::-ms-input-placeholder { /* Microsoft Edge */
  color: #979797;
}

#quiz *::placeholder { /* Most modern browsers support this now. */
  color: #979797;
}

#quiz.content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#quiz.content .header {
  margin-bottom: 48px;
}

#quiz.content .body {
  margin-bottom: 60px;
}

#quiz.content .body .title {
  margin-bottom: 60px;
  max-height: 40vh;
}

#quiz.content .body .title h1 {
  font-size: 42px;
  line-height: 54px;
  word-break: break-word;
}

@media only screen and (max-width: 767px) {
  #quiz.content .body .title h1 {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -1px;
  }
}
.content .body .description {
  margin-bottom: 60px;
}

#quiz.content .body .description {
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  color: #979797;
  font-family: Avenir, sans-serif;
}

@media (max-width: 767px) {
  #quiz.content .body .description div {
    font-size: 15px;
    line-height: 21px;
  }
}
#quiz.content .body .cta button {
  font-family: Gogh, sans-serif;
  background: #5C40F5;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 28px;
  padding: 10px 60px;
  min-width: 240px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 0;
  transition: 0.2s;
}

@media only screen and (max-width: 767px) {
  #quiz.content .body .cta button {
    font-size: 18px;
    line-height: 28px;
    padding: 10px 36px;
    min-width: 220px;
  }
}
#quiz.content .body .cta button:hover {
  filter: brightness(1.2);
}

#quiz.content .body .cta button:active {
  filter: brightness(0.8);
}

#quiz.content .body .cta button.inactive {
  background: #E4E4E4;
  color: #FFFFFF;
  pointer-events: none;
  cursor: not-allowed;
}

#quiz.content .footer {
  text-align: center;
}

#quiz.content .footer a {
  color: #B3BCD5;
  font-size: 12px;
  display: inline-flex;
  text-decoration: none;
}

#quiz.content .footer a .badge {
  width: 84px;
  height: 28px;
  margin-top: -4px;
  margin-left: 8px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/quiz/merlin-wt-93a2cf2bb53899916474b0a0e25f4b9e71f2bee17576a531b6b43a34a5492bb0.svg);
}

.component .single-input {
  width: 100%;
  display: flex;
  justify-content: center;
}

.component .single-input input[type=text] {
  padding: 10px 32px;
  width: 364px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border: 0;
  outline: 0;
  border-radius: 8px 0px 0px 8px;
  font-family: Gogh, sans-serif;
  font-size: 18px;
  text-align: left;
}

@media only screen and (max-width: 767px) {
  .component .single-input input[type=text] {
    width: calc(95% - 48px);
  }
}
.component .single-input input[type=text].input-error {
  border: 1px solid red;
}

.component .single-input textarea {
  padding: 10px 20px;
  width: 364px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border: 0;
  outline: 0;
  border-radius: 8px 8px 8px 8px;
  font-family: Gogh, sans-serif;
  font-size: 18px;
  text-align: left;
  resize: none;
}

@media only screen and (max-width: 767px) {
  .component .single-input textarea {
    width: calc(95% - 48px);
  }
}
.component .single-input textarea.input-error {
  border: 1px solid red;
}

.component .single-input button {
  background-color: #5C40F5;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.0980392157);
  border-radius: 0px 8px 8px 0px;
  border: 0;
  color: #FFFFFF;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

@media only screen and (max-width: 767px) {
  .component .single-input button {
    width: 48px;
  }
}
.component .single-input button .arrow {
  display: block;
  width: 22px;
  height: 13px;
  background-size: 22px 13px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/quiz/next_arrow-5bcf04efe0d603a84b1be29c42f29ac95bb36650a33eda1de9fa511cb449127a.svg);
}

@media only screen and (max-width: 767px) {
  .component .single-input button .arrow {
    width: 20px;
    height: 12px;
    background-size: 20px 12px;
  }
}
.component .single-input-description {
  padding-top: 12px;
  font-size: 18px;
  font-family: Avenir, sans-serif;
  color: #979797;
}

.component .drop-down {
  width: 100%;
}

.component .drop-down select {
  outline: 0;
  background-color: #ffffff;
  color: #2B2B2B;
  width: 420px;
  height: 60px;
  border: 0;
  padding: 16px 32px;
  font-family: Gogh, sans-serif;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%235C40F5' height='30' viewBox='0 0 24 24' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 99%;
  background-position-y: 16px;
  cursor: pointer;
}

@media only screen and (max-width: 767px) {
  .component .drop-down select {
    width: 95%;
  }
}
.component .drop-down select:required:invalid {
  color: #C1C1C1;
  font-family: Avenir, sans-serif;
  font-style: italic;
}

.component .drop-down select option:disabled {
  display: none;
}

.component .single-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.component .single-select label {
  width: 420px;
  margin: 6px 0;
  display: flex;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .component .single-select label {
    width: 95%;
  }
}
.component .single-select label input[type=radio] {
  margin: 12px -48px 12px 14px;
  z-index: 1;
}

.component .single-select label input[type=radio] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

@media only screen and (max-width: 767px) {
  .component .single-select label input[type=radio] {
    display: none;
  }
}
.component .single-select label .checkmark {
  position: absolute;
  top: 18px;
  left: 40px;
  height: 22px;
  width: 22px;
  background-color: #FFFFFF;
  border: 1px solid #E9E9E9;
  border-radius: 50%;
}

@media only screen and (max-width: 767px) {
  .component .single-select label .checkmark {
    display: none;
  }
}
.component .single-select label input[type=radio]:checked ~ .checkmark {
  background-color: #FFFFFF;
  border: none;
}

.component .single-select label .checkmark::after {
  display: none;
  content: "";
  position: absolute;
}

.component .single-select label .checkmark::after {
  content: "";
  left: 7.2px;
  top: 4px;
  width: 7px;
  height: 11px;
  transform: rotate(45deg);
  border-right: 3px solid #24dbd5;
  border-bottom: 3px solid #24dbd5;
}

.component .single-select label input[type=radio]:checked ~ .checkmark::after {
  display: block;
}

.component .single-select label .box {
  text-align: left;
  margin-left: 20px;
  background-color: #FFFFFF;
  color: #585858;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border-radius: 8px;
  min-height: 60px;
  width: 420px;
  padding: 0 16px 0 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

@media only screen and (max-width: 767px) {
  .component .single-select label .box {
    margin-left: 0;
    padding-left: 16px;
    width: 100%;
  }
}
.component .single-select label input[type=radio]:checked ~ .box {
  background-color: #24DBD5;
  color: #FFFFFF;
}

.component .single-select-small {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 672px;
  flex-wrap: wrap;
  justify-content: center;
}

@media only screen and (max-width: 767px) {
  .component .single-select-small {
    width: 100%;
  }
}
.component .single-select-small label {
  width: 200px;
  margin: 4px 12px;
  display: flex;
}

@media only screen and (max-width: 767px) {
  .component .single-select-small label {
    width: 95%;
  }
}
.component .single-select-small label input[type=radio] {
  margin: 12px -48px 12px 14px;
  z-index: 1;
  display: none;
}

@media only screen and (max-width: 767px) {
  .component .single-select-small label input[type=radio] {
    display: none;
  }
}
.component .single-select-small label span {
  text-align: center;
  background-color: #FFFFFF;
  color: #585858;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border-radius: 8px;
  height: unset;
  min-height: 120px;
  width: 200px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

@media only screen and (max-width: 767px) {
  .component .single-select-small label span {
    margin-left: 0;
    padding-left: 16px;
    width: 100%;
    height: unset;
    min-height: 60px;
  }
}
.component .single-select-small label input[type=radio]:checked + span {
  background-color: #24DBD5;
  color: #FFFFFF;
}

.component .multi-select-small {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 672px;
  flex-wrap: wrap;
  justify-content: center;
}

.component .multi-select-small label {
  width: 200px;
  margin: 4px 12px;
  display: flex;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .component .multi-select-small label {
    width: 95%;
  }
}
.component .multi-select-small label input[type=checkbox] {
  margin: 12px -48px 12px 14px;
  z-index: 1;
  display: none;
}

@media only screen and (max-width: 767px) {
  .component .multi-select-small label input[type=checkbox] {
    display: none;
  }
}
.component .multi-select-small label .checkmark {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 22px;
  width: 22px;
  background-color: #FFFFFF;
  border: 1px solid #E9E9E9;
  border-radius: 50%;
}

@media only screen and (max-width: 767px) {
  .component .multi-select-small label .checkmark {
    top: 18px;
    left: unset;
    right: 12px;
  }
}
.component .multi-select-small label input[type=checkbox]:checked ~ .checkmark {
  background-color: #FFFFFF;
  border: none;
}

.component .multi-select-small label .checkmark::after {
  display: none;
  content: "";
  position: absolute;
}

.component .multi-select-small label .checkmark::after {
  content: "";
  left: 7px;
  top: 3px;
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 3px solid #24DBD5;
  border-bottom: 3px solid #24DBD5;
}

.component .multi-select-small label input[type=checkbox]:checked ~ .checkmark::after {
  display: block;
}

.component .multi-select-small label .box {
  text-align: center;
  background-color: #FFFFFF;
  color: #585858;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border-radius: 8px;
  height: unset;
  min-height: 120px;
  width: 200px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

@media only screen and (max-width: 767px) {
  .component .multi-select-small label .box {
    margin-left: 0;
    padding-left: 16px;
    padding-right: 42px;
    width: 100%;
    height: unset;
    min-height: 60px;
    text-align: left;
    justify-content: flex-start;
  }
}
.component .multi-select-small label input[type=checkbox]:checked ~ .box {
  background-color: #24DBD5;
  color: #FFFFFF;
}

.component .quiz-range {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 767px) {
  .component .quiz-range {
    width: 85%;
  }
}
.component .quiz-range .selected {
  position: relative;
  width: 120px;
  height: 42px;
  background-color: #5C40F5;
  border-radius: 8px;
  color: #ffffff;
  border: 0;
  margin-left: -42px;
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 42px;
}

.component .quiz-range .selected::after {
  content: " ";
  display: block;
  border: solid 10px transparent;
  border-top-color: #5C40F5;
  position: absolute;
  top: 42px;
  left: 50px;
}

.component .quiz-range input[type=range] {
  width: 400px;
  margin-top: 29px;
  -webkit-appearance: none;
}

@media only screen and (max-width: 767px) {
  .component .quiz-range input[type=range] {
    width: unset;
  }
}
.component .quiz-range input[type=range]:focus {
  outline: none;
}

.component .quiz-range input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  box-shadow: none;
  background: #5C40F5;
  border-radius: 8px;
  border: 0px solid #010101;
}

.component .quiz-range input[type=range]::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  box-shadow: none;
  background: #5C40F5;
  border-radius: 8px;
  border: 0px solid #010101;
}

.component .quiz-range input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #5C40F5;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

.component .quiz-range input[type=range]::-moz-range-thumb {
  box-shadow: none;
  border: 0px solid #ffffff;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #5C40F5;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

.component .range input[type=range]::-moz-focus-outer {
  border: 0;
}

.component .range .min-max {
  display: flex;
  justify-content: space-between;
  font-family: AvenirBold, sans-serif;
  color: #979797;
  font-size: 18px;
  margin: 12px 2px;
}

.component .form {
  display: flex;
  width: 95%;
  flex-direction: column;
  align-items: center;
}

.component .form .field {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

@media only screen and (max-width: 767px) {
  .component .form .field {
    width: 100%;
  }
}
.component .form .field input {
  width: 100%;
  display: flex;
  justify-content: center;
}

.component .form .field input[type=text] {
  padding: 10px 20px;
  width: 364px;
  height: 42px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border: 0;
  outline: 0;
  border-radius: 8px;
  font-family: Gogh, sans-serif;
  font-size: 18px;
  text-align: left;
}

.component .form .field input[type=text].input-error {
  border: 1px solid red;
}

.component .form .field .description {
  color: #C1C1C1;
  font-family: Avenir, sans-serif;
  font-style: italic;
  margin: 22px 0px 2px 0px;
  padding: 0 10px 0 10px;
  word-break: break-all;
  text-align: left;
  width: 364px;
}

@media only screen and (max-width: 767px) {
  .component .form .field .description {
    width: calc(100% - 40px);
  }
}
.result {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.result .title {
  margin-bottom: 48px !important;
}

@media only screen and (max-width: 767px) {
  .result .title {
    margin-bottom: 24px !important;
  }
}
.result .title h1 {
  color: #2B2B2B;
  font-size: 32px !important;
  line-height: 42px !important;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .result .title h1 {
    font-size: 24px !important;
    line-height: 32px !important;
  }
}
.result .description {
  margin-bottom: 48px !important;
}

@media only screen and (max-width: 767px) {
  .result .description {
    margin-bottom: 24px !important;
  }
}
.result .description div {
  margin: 0;
}

.result .image {
  margin-top: 12px;
  margin-bottom: 60px;
}

.result .image img {
  max-width: 100%;
}

@media only screen and (max-width: 767px) {
  .result .image {
    width: 100%; /* FIXME */
    margin-top: 6px;
    margin-bottom: 30px !important;
  }
}
.result .text {
  background-color: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  margin-bottom: 48px;
}

@media only screen and (max-width: 767px) {
  .result .text {
    margin-bottom: 24px;
  }
}
.result .text .headline {
  color: #585858;
  font-size: 32px;
  line-height: 40px;
  padding: 36px 72px;
}

@media only screen and (max-width: 767px) {
  .result .text .headline {
    font-size: 20px;
    line-height: 28px;
    padding: 24px 48px;
  }
}
.result .text .content {
  color: #979797;
  font-family: Avenir, sans-serif;
  padding: 0 36px 24px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 72px);
  text-align: left;
}

/* custom-pages */
#quiz.content .custom-page {
  margin: 0;
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-page {
  font-family: Avenir;
}

.custom-page h1, h2, h3, h4, h5, h6 {
  font-size: revert;
}

.custom-page ul {
  list-style: initial;
  margin-left: 20px;
}

@media only screen and (min-width: 767px) {
  #quiz.content .custom-page {
    padding: 24px;
  }
  .topic div {
    margin-left: 0.5rem;
  }
}
.topic div {
  display: flex;
  line-height: 26px;
  font-family: Avenir, sans-serif;
}

/* single-columns */
#quiz.content .single-column {
  padding: 36px 20% 24px;
  margin: 0;
  text-align: center;
  overflow: auto;
}

@media only screen and (max-width: 767px) {
  #quiz.content .single-column {
    padding: 36px 8% 24px;
  }
}
#quiz.content .single-column .header .image {
  text-align: center;
}

#quiz.content .single-column .header .image img {
  height: 48px;
  display: inline-block;
}

/* Two Columns */
#quiz.content .two-columns {
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 100%;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns {
    display: flex;
    flex-direction: column;
  }
}
#quiz.content .two-columns .column-1 {
  width: 40%;
  height: 100%;
  text-align: left;
  background: #FFFFFF;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.0980392157);
  padding-left: 4%;
  padding-right: 1%;
  padding-top: 36px;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-1 {
    width: 100%;
    text-align: center;
    height: fit-content;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0;
  }
}
#quiz.content .two-columns .column-1 .header {
  margin-bottom: 80px;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-1 .header {
    margin: 20px 0;
    width: 100%;
  }
}
#quiz.content .two-columns .column-1 .header .image {
  text-align: left;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-1 .header .image {
    text-align: center;
  }
}
#quiz.content .two-columns .column-1 .header .image img {
  height: 36px;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-1 .header .image img {
    position: relative;
    top: 10px;
    left: 10px;
  }
}
#quiz.content .two-columns .column-1 .body {
  min-height: 55%;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-1 .body {
    min-height: unset;
    margin-bottom: 12px;
  }
}
#quiz.content .two-columns .column-1 .body .title {
  display: block;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-1 .body .title {
    display: none;
  }
}
#quiz.content .two-columns .column-1 .footer {
  text-align: left;
}

#quiz.content .two-columns .column-1 .footer .back {
  font-family: Avenir, sans-serif;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-1 .footer .back {
    position: relative;
    right: 10px;
    bottom: 33px;
  }
}
#quiz.content .two-columns .column-1 .footer .back a {
  color: #585858;
  font-size: 14px;
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: 8px;
}

#quiz.content .two-columns .column-1 .footer .back a .svg {
  width: 24px;
  height: 14px;
  background-size: 24px 14px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/quiz/back_arrow-008484f0bf053db8e68f9f481c823e7bbab962d88171211985534588fbe240a4.svg);
  display: block;
  position: relative;
  top: -2px;
}

#quiz.content .single-column .footer-back {
  text-align: left;
}

#quiz.content .single-column .footer-back .back {
  font-family: Avenir, sans-serif;
}

@media only screen and (max-width: 767px) {
  #quiz.content .single-column .footer-back .back {
    position: absolute;
    left: 10px;
    top: 33px;
  }
}
#quiz.content .single-column .footer-back .back a {
  color: #585858;
  font-size: 14px;
  display: flex;
  text-decoration: none;
  align-items: center;
  gap: 8px;
}

#quiz.content .single-column .footer-back .back a .svg {
  width: 24px;
  height: 14px;
  background-size: 24px 14px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/quiz/back_arrow-008484f0bf053db8e68f9f481c823e7bbab962d88171211985534588fbe240a4.svg);
  display: block;
  position: relative;
  top: -2px;
}

.merlin-upload-file {
  stroke: #615EFF;
}

#quiz.content .two-columns .column-2 {
  width: 60%;
  height: 100%;
  text-align: center;
  overflow: auto;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-2 {
    width: 100%;
    text-align: center;
  }
}
#quiz.content .two-columns .column-2 .header {
  margin: 0;
}

#quiz.content .two-columns .column-2 .body {
  margin: 0;
  min-height: 80%;
  padding: 7% 5% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#quiz.content .two-columns .column-2 .body .title {
  display: none;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-2 .body .title {
    display: block;
    margin-bottom: 16px;
  }
}
#quiz.content .two-columns .column-2 .body .component {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#quiz.content .two-columns .column-2 .body .cta {
  margin-top: 36px;
}

#quiz.content .two-columns .column-2 .footer {
  text-align: right;
  padding: 24px 4% 12px 0;
}

@media only screen and (max-width: 767px) {
  #quiz.content .two-columns .column-2 .footer {
    text-align: center;
    padding: 32px 0 20px;
  }
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6461F2;
  margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}

.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}

.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}

.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.centerize {
  text-align: center;
}

.quiz-list-row-upload-dropzone {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 525px;
  height: 304px;
  line-height: 18px;
  float: left;
  cursor: pointer;
  background-color: #F9FAFC;
  text-align: center;
  font-weight: 500;
  border: 2.75px dashed #615EFF;
  box-shadow: 0px 7px 8.75px rgba(0, 0, 0, 0.1);
  border-radius: 10.5px;
}

.quiz-file-subtitle {
  font-family: "Rubik";
  font-weight: initial;
  font-size: 12px;
  margin-top: 0.5rem;
}

.quiz-list-row-upload-dropzone-legend {
  margin-top: 0.5rem;
  font-size: 16px;
}

.quiz-list-row-upload-dropzone-loading {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
}

.quiz-list-loading {
  margin: 10px 0px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  -webkit-animation: line 1s linear infinite alternate;
  -moz-animation: line 1s linear infinite alternate;
  animation: line 1s linear infinite alternate;
}

@-webkit-keyframes line {
  0% {
    background-color: rgb(0, 0, 0);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  25% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgb(0, 0, 0), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgb(0, 0, 0);
  }
}
@-moz-keyframes line {
  0% {
    background-color: rgb(0, 0, 0);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  25% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgb(0, 0, 0), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgb(0, 0, 0);
  }
}
@keyframes line {
  0% {
    background-color: rgb(0, 0, 0);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  25% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgb(0, 0, 0), 24px 0px 0px 0px rgba(0, 0, 0, 0.2);
  }
  75% {
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 12px 0px 0px 0px rgba(0, 0, 0, 0.2), 24px 0px 0px 0px rgb(0, 0, 0);
  }
}
/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.dz-preview, .dz-file-preview {
  display: none;
}

#quiz.content .body .cta button:disabled,
#quiz.content .body .cta button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.quiz-list-row {
  width: 100%;
  position: relative;
  padding: 0 15px 4px 50px;
  word-wrap: break-word;
  margin: auto;
}

.quiz-list-row-upload-file {
  max-width: 600px;
  padding: 15px;
  line-height: 18px;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 500;
  text-align: center;
  margin: auto;
}

.quiz-list-row-upload-file-center {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.quiz-list-row-upload-file-thumb {
  width: 100% !important;
  height: 100%;
  margin-right: 10px;
  border-radius: 10px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 10px;
}

.chat-list-row-upload-dropzone-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/upload-16326cc8b18101dd68ae83cabd34e745cdad077a1d29887b60281a22f77d40a9.svg);
}

.quiz-list-row-upload-dropzone-loading {
  width: 24px;
  height: 24px;
  margin: 0 auto 8px;
}

.quiz-list-row-upload-file-button {
  padding: 10px;
  font-size: 12px;
  cursor: pointer;
}

@media (min-width: 768px) {
  .quiz-list-row-upload-file-button {
    font-size: 14px;
  }
}
.quiz-list-row-upload-file-icon {
  border: 1px solid rgb(239, 68, 68);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  text-align: center;
  line-height: 15px;
  vertical-align: middle;
  padding: 10px;
}

.quiz-list-row-upload-file-icon:hover {
  color: white;
  background-color: rgb(239, 68, 68);
}

.quiz-list-row-link {
  width: 38px;
  height: 38px;
  float: right;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 50%;
  background-color: #24dbd5;
  background-size: 45%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/bot/anexo-71c71cd9cdcb03c32c73d54c10786175b8d6d7321f8b6427911be14f29b60f06.svg);
}

.text-red-500 {
  color: rgb(239, 68, 68);
}

@font-face {
  font-family: Gogh;
  src: url(https://app.gomerlin.com.br/assets/gogh/Gogh-ExtraBold-64203c244ace7655339ab509dfac38ef177b850a1daef8b10c20a0523ebba3d9.otf);
}
@font-face {
  font-family: Avenir;
  src: url(https://app.gomerlin.com.br/assets/avenir-lt-pro/AvenirLTProRoman-77dc336c429c2bed63034b793648b4766affdc9e419ca3e7aaaff310ce2eefd2.otf);
}
@font-face {
  font-family: AvenirBold;
  src: url(https://app.gomerlin.com.br/assets/avenir-lt-pro/AvenirLTProHeavy-9dc87e533de087a90d6e71c1f7db10bcb81a5282a9b40d90c323b7a8e8ae1885.otf);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

#video {
  font-family: "Rubik", sans-serif;
}

#video button {
  cursor: pointer;
}

.video-js {
  position: absolute;
}

.video-js video {
  object-fit: cover;
}

.vjs-poster {
  width: 100%;
  background-position-x: center;
  background-position-y: center;
  background-size: cover;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
}

#video.content {
  height: 100%;
  background-color: #000;
}

.video-centerize {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.video-container {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.video-answer .footer {
  min-height: 42px;
  width: 100%;
  flex: 0;
  z-index: 1000000000000000000;
  background-color: #000000;
}

.video-answer .footer a {
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px 10px 0px 0px;
  background: #5C40F5;
}

.video-answer .footer a .badge {
  width: 80px;
  height: 23px;
  margin-top: -4px;
  margin-left: 8px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/video/logo-white-fa13a48787b33351e7f07bf7f6bb4ce496af47539d19f9817c3f2b407c60bce8.svg);
  background-size: 80px 23px;
}

.video-answer-new-section .footer {
  height: 42px;
  width: 100%;
  z-index: 1000000000000000000;
  background-color: rgba(0, 0, 0, 0);
}

.video-answer-new-section .footer a {
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px 10px 0px 0px;
  background: #5C40F5;
}

.video-answer-new-section .footer a .badge {
  width: 80px;
  height: 23px;
  margin-top: -4px;
  margin-left: 8px;
  background-repeat: no-repeat;
  background-image: url(https://app.gomerlin.com.br/assets/video/logo-white-fa13a48787b33351e7f07bf7f6bb4ce496af47539d19f9817c3f2b407c60bce8.svg);
  background-size: 80px 23px;
}

.video-player-container {
  width: 100%;
  height: 100%;
  max-width: 60vh;
}

.video-answer-new-section .back {
  cursor: pointer;
  position: absolute;
  left: 20px;
  top: 25px;
  z-index: 2147483647;
  height: 30px;
  width: 30px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-player-container .back {
  cursor: pointer;
  position: absolute;
  color: #fff;
  top: 25px;
  left: 20px;
  z-index: 2147483647;
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-video-dimensions {
  width: 100%;
  height: 100%;
}

.video-answer {
  display: flex;
  flex-flow: column;
  justify-content: end;
  height: 100%;
  width: 100%;
  max-height: 45%;
  z-index: 2147483647;
}

.video-answer-new-section {
  background: #F9FAFC;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  z-index: 2147483647;
}

.video-answer-new-section .video-replies {
  -webkit-box-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
  padding: 0px 26px 22px 26px;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0);
}

.video-answer .video-replies {
  -webkit-box-align: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
  padding: 0px 26px 22px 26px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 31.18%, rgba(0, 0, 0, 0.75) 100%);
  justify-content: end;
  max-height: 100%;
}

.video-replies .video-question {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  color: #fff;
  margin-bottom: 10px;
}

.video-answer-new-section .video-replies .video-question {
  color: black;
  text-align: center;
}

.video-answer-new-section .video-replies .video-description {
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  text-align: center;
  width: 70%;
}

/* CTA */
.video-replies .cta {
  margin-top: 18px;
}

.video-replies .cta .video-button.inactive {
  background: #BEBEBE;
  color: #9F9F9F;
}

.video-replies .cta button.inactive {
  background: #E4E4E4;
  color: #FFFFFF;
  pointer-events: none;
  cursor: not-allowed;
}

.video-replies .cta button {
  width: 100%;
  background: #5C40F5;
  color: #FFFFFF;
  padding: 10px 60px;
  min-width: 240px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 0;
  transition: 0.2s;
  min-height: 52px;
  font-family: Rubik;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0em;
}

.video-replies .cta button:hover {
  filter: brightness(1.2);
}

.video-replies .cta .video-button {
  background: #5C40F5;
  color: #FFFFFF;
  border-color: rgba(190, 206, 233, 0.2823529412);
  border-radius: 8px;
}

/* multi select options */
.video-replies .multi-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #1EDBD5 rgba(255, 255, 255, 0.2392156863);
  scrollbar-gutter: stable;
}

.video-replies .single-select::-webkit-scrollbar,
.video-replies .multi-select::-webkit-scrollbar {
  width: 5px;
  margin-left: 1px;
}

.video-replies .single-select::-webkit-scrollbar-track,
.video-replies .multi-select::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.2392156863);
  border-radius: 12px;
}

.video-replies .single-select::-webkit-scrollbar-thumb,
.video-replies .multi-select::-webkit-scrollbar-thumb {
  background-color: #1EDBD5;
  border-radius: 12px;
}

.video-replies .multi-select label {
  width: 100%;
  margin: 5px 0;
  display: flex;
  position: relative;
}

.video-replies .multi-select label .checkmark::after {
  display: none;
  content: "";
  position: absolute;
}

.video-replies .multi-select label .checkmark::after {
  content: "";
  left: 7px;
  top: 3px;
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 3px solid #5C40F5;
  border-bottom: 3px solid #5C40F5;
}

.video-replies .multi-select label input[type=checkbox] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  margin: 12px -48px 12px 14px;
  z-index: 1;
}

.video-replies .multi-select label .checkmark {
  position: absolute;
  top: calc(50% - 13px);
  left: 20px;
  height: 22px;
  width: 22px;
  background-color: #FFFFFF;
  border: 1px solid #E9E9E9;
  border-radius: 5px;
}

.video-replies .multi-select label .box {
  text-align: left;
  border-radius: 8px;
  border: 1px solid #FFFFFF;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1411764706);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 500;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  min-height: 52px;
  padding: 0 16px 0 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

.video-replies .multi-select label input[type=checkbox]:checked ~ .checkmark {
  background-color: #FFFFFF;
  border: none;
}

.video-replies .multi-select label .checkmark::after {
  content: "";
  left: 7px;
  top: 3px;
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 3px solid #5C40F5;
  border-bottom: 3px solid #5C40F5;
}

.video-replies .multi-select label input[type=checkbox]:checked ~ .checkmark::after {
  display: block;
}

.video-replies .video-option label input[type=checkbox]:checked + span {
  background: rgba(92, 64, 245, 0.6);
  border: 1px solid #5D49F1;
  color: #FFFFFF;
}

.video-replies .video-option label input[type=checkbox]:checked ~ .box {
  background: rgba(92, 64, 245, 0.6);
  border: 1px solid #5D49F1;
  color: #FFFFFF;
}

/* single select option */
.video-replies .single-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #1EDBD5 rgba(255, 255, 255, 0.2392156863);
  scrollbar-gutter: stable;
}

.video-replies .single-select label {
  width: 100%;
  margin: 5px 0;
  display: flex;
  position: relative;
}

.video-replies .single-select label .checkmark::after {
  display: none;
  position: absolute;
  content: "";
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
}

.video-replies .video-option .multi-select label .checkmark::after {
  border-right: 3px solid #5C40F5;
  border-bottom: 3px solid #5C40F5;
}

.video-replies .single-select label input[type=radio] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  margin: 12px -48px 12px 14px;
  z-index: 1;
}

.video-replies .single-select label .checkmark {
  display: none;
  position: absolute;
  top: 16px;
  left: 20px;
  height: 22px;
  width: 22px;
  background-color: rgba(255, 255, 255, 0.1333333333);
  border: 1px solid #E9E9E9;
  border-radius: 50%;
}

.video-replies .video-option label span.box {
  background-color: rgba(255, 255, 255, 0.1411764706);
  color: #FFFFFF;
  border-color: #FFFFFF;
  border-radius: 8px;
}

.video-replies .single-select label .box {
  text-align: left;
  background-color: rgba(255, 255, 255, 0.1411764706);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 500;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border-radius: 8px;
  border: 1px solid #FFFFFF;
  min-height: 52px;
  width: 100%;
  padding: 0 16px 0 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  transition: 0.2s;
}

.video-replies .video-option label input[type=radio]:checked + span {
  background: rgba(92, 64, 245, 0.6);
  border: 1px solid #FFFFFF;
  color: rgba(255, 255, 255, 0.1411764706);
}

.video-replies .single-select label input[type=radio]:checked ~ .checkmark {
  background-color: rgba(255, 255, 255, 0.1411764706);
}

.video-replies .video-option label input[type=radio]:checked ~ .box {
  background: rgba(92, 64, 245, 0.6);
  border: 1px solid #5C40F5;
  color: #FFFFFF;
}

.video-replies .video-option .single-select label .checkmark::after {
  border-right: 3px solid #FFFFFF;
  border-bottom: 3px solid #FFFFFF;
}

.video-replies .single-select label input[type=radio]:checked ~ .checkmark::after {
  display: block;
}

/* single input */
.video-replies .single-input input[type=text].input-error {
  border: 1px solid red;
}

.video-replies .single-input {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.video-replies .single-input input[type=text] {
  padding: 12px 16px;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border: 0;
  outline: 0;
  border-radius: 8px;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.video-replies .single-input .cta {
  width: 100%;
}

/* single input textarea */
.video-replies .single-input {
  margin-top: 8px;
  width: 100%;
}

::-webkit-input-placeholder {
  font-style: italic;
}

:-moz-placeholder {
  font-style: italic;
}

::-moz-placeholder {
  font-style: italic;
}

:-ms-input-placeholder {
  font-style: italic;
}

.video-replies .single-input textarea {
  padding: 12px 16px;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.0470588235);
  border: 0;
  outline: 0;
  border-radius: 8px 8px 8px 8px;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  resize: none;
}

@media (min-width: 769px) {
  .video-container {
    position: static;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: row;
  }
  .video-player-container {
    position: relative;
  }
  .video-answer-new-section,
  .video-answer {
    position: relative;
    max-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .video-answer .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 84px;
    width: 100%;
    z-index: 1000000000000000000;
    background-color: #F9FAFC;
  }
  .video-answer-new-section .footer {
    position: absolute;
    bottom: 34px;
  }
  .video-answer-new-section .footer a,
  .video-answer .footer a {
    color: #B3BCD5;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px 10px 0px 0px;
    background: #F9FAFC;
    line-height: 23px;
  }
  .video-answer-new-section .footer a .badge,
  .video-answer .footer a .badge {
    width: 121px;
    height: 34px;
    margin-top: -4px;
    margin-left: 8px;
    background-repeat: no-repeat;
    background-image: url(https://app.gomerlin.com.br/assets/video/merlin-wt-93a2cf2bb53899916474b0a0e25f4b9e71f2bee17576a531b6b43a34a5492bb0.svg);
    background-size: 121px 34px;
  }
  .video-answer-new-section .video-replies,
  .video-answer .video-replies {
    height: 100%;
    position: static;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    transition: all 0.3s ease-in-out 0s;
    width: 100%;
    background: #F9FAFC;
  }
  .video-answer-new-section .video-replies .video-question {
    color: black;
    text-align: center;
    font-size: 48px;
    line-height: 55px;
    text-align: center;
  }
  .video-answer-new-section .video-replies .video-description {
    font-size: 28px;
    line-height: 32px;
    font-weight: 400;
    text-align: center;
  }
  .video-replies .video-question {
    color: black;
    text-align: center;
    margin-bottom: 40px;
    font-size: 40px;
    line-height: 50px;
  }
  /* single select option */
  .video-replies .single-select label {
    width: 500px;
  }
  .video-replies .single-select label .box {
    margin-left: 20px;
    background-color: #FFFFFF;
    color: #585858;
    box-shadow: 0px 2px 12px -1px rgba(0, 0, 0, 0.1098039216);
    border-radius: 8px;
    width: 466px;
    min-height: 78px;
    padding: 0 16px 0 16px;
    font-size: 30px;
    font-weight: 500;
    line-height: 35px;
  }
  .video-replies .single-select label .checkmark {
    left: 40px;
  }
  .video-replies .video-option label input[type=radio]:checked + span {
    background: #5C40F5;
    color: #FFFFFF;
  }
  .video-replies .video-option label input[type=radio]:checked ~ .box {
    background: #5C40F5;
    color: #FFFFFF;
  }
  .video-replies .video-option label span.box {
    background-color: #FFFFFF;
    color: #000000;
    border-color: rgba(0, 0, 0, 0);
    border-radius: 8px;
    box-shadow: 0px 2px 12px -1px rgba(0, 0, 0, 0.1098039216);
    font-size: 30px;
    font-weight: 500;
    line-height: 35px;
  }
  .video-replies .single-select label .checkmark::after {
    left: 6px;
    border-right: 3px solid #5C40F5;
    border-bottom: 3px solid #5C40F5;
  }
  .video-replies .video-option .multi-select label .checkmark::after {
    border-right: 3px solid #5C40F5;
    border-bottom: 3px solid #5C40F5;
  }
  .video-replies .single-select label input[type=radio]:checked ~ .checkmark {
    background-color: #FFFFFF;
  }
  /* multi select options */
  .video-replies .multi-select label {
    width: 500px;
  }
  .video-replies .multi-select label .box {
    width: 466px;
    margin-left: 20px;
    background-color: #FFFFFF;
    color: #585858;
    box-shadow: 0px 2px 12px -1px rgba(0, 0, 0, 0.1098039216);
    min-height: 79px;
    padding: 0 16px 0 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
  }
  .video-replies .multi-select label .checkmark {
    left: 40px;
  }
  .video-replies .video-option label input[type=checkbox]:checked + span {
    background: #5C40F5;
    color: #FFFFFF;
  }
  .video-replies .video-option label input[type=checkbox]:checked ~ .box {
    background: #5C40F5;
    color: #FFFFFF;
  }
  /* single input textarea */
  .video-replies .cta {
    width: 428px;
  }
  .video-replies .video-textarea input[type=text] {
    background-color: rgba(100, 97, 242, 0.0705882353);
    color: #2B2B2B;
    border-color: rgba(101, 102, 238, 0.4823529412);
  }
  .video-replies .single-input textarea {
    width: 428px;
  }
  .video-replies .video-textarea input[type=text] {
    background-color: #FFF;
    color: #2B2B2B;
    border-color: #6566EE;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .video-replies .single-input textarea.input-error {
    border: 1px solid red;
  }
  /* single input */
  .video-replies .single-input input[type=text] {
    width: 428px;
  }
  .video-replies .single-input {
    width: 428px;
  }
  .video-replies .single-input button {
    background-color: rgb(92, 64, 245);
    box-shadow: rgba(0, 0, 0, 0.098) 0px 4px 10px;
    border-radius: 8px;
    border: 0px;
    color: rgb(255, 255, 255);
    width: 428px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease 0s;
  }
  .video-replies button.video-button-next {
    background: #5C40F5;
    color: #FFFFFF;
    border-color: rgba(190, 206, 233, 0.2823529412);
    border-radius: 8px;
  }
  .video-js .vjs-play-control {
    display: none !important;
  }
  .video-js .vjs-duration {
    right: 80px !important;
  }
  .vjs-time-divider {
    right: 85px !important;
  }
  .video-js .vjs-current-time {
    right: 120px !important;
  }
}
/* Video css */
.vjs-fluid {
  overflow: hidden;
}

.video-js .vjs-control-bar {
  display: block;
  top: 0px;
  height: 10px;
}

.vjs-control {
  position: absolute;
  width: 100%;
}

.video-js .vjs-control {
  width: 100%;
  margin-bottom: 20px;
  position: absolute;
  right: 12px;
}

.vjs-progress-control {
  top: 0px;
  left: 0;
  width: 100%;
  margin: 0 0;
}

.video-js .vjs-progress-control .vjs-progress-holder {
  position: absolute;
  left: 0;
  margin: 0 0;
  height: 10px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1294117647);
}

.video-js .vjs-load-progress {
  background-color: rgba(0, 0, 0, 0);
}

.video-js .vjs-load-progress div {
  background-color: rgba(0, 0, 0, 0.1294117647);
}

.video-js .vjs-play-progress {
  background-color: #5D49F1;
  border-radius: 0 18px 18px 0;
}

.vjs-play-progress,
.vjs-load-progress {
  height: 10px;
}

.vjs-play-progress:before {
  display: none;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,
.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
  visibility: visible;
  opacity: 1;
}

.video-js .vjs-big-play-button {
  top: 50%;
  left: 50%;
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  font-size: 6rem;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:hover {
  background-color: rgba(0, 0, 0, 0);
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover {
  width: 100%;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal {
  display: none;
}

.video-js .vjs-play-control {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid white;
  border-radius: 50%;
  top: 25px;
  right: 60px;
}

:focus-visible {
  outline: none;
}

.video-js .vjs-play-control .vjs-icon-placeholder:before,
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before {
  top: -3px;
}

.video-js .vjs-mute-control {
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid white;
  border-radius: 50%;
  top: 25px;
}

.video-js .vjs-mute-control span:before {
  top: 0;
  left: 50%;
  transform: translate(-52%, -3px);
}

.vjs-time-divider,
.video-js .vjs-duration,
.video-js .vjs-current-time {
  display: block;
  width: 20px;
  position: absolute;
  top: 20px;
}

.video-js .vjs-time-control {
  font-size: 14px;
}

.video-js .vjs-duration {
  right: 115px;
  font-size: 14px;
  font-weight: bold;
}

.vjs-time-divider {
  right: 120px;
  font-size: 14px;
}

.video-js .vjs-current-time {
  right: 155px;
  font-size: 14px;
}

.vjs-button .vjs-icon-placeholder:before {
  font-size: 1.3rem;
}