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%;
}

/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

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

.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}

.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}

.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}

.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}

.animate__animated.animate__delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}

.animate__animated.animate__delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}

.animate__animated.animate__delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}

.animate__animated.animate__delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}

.animate__animated.animate__faster {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}

.animate__animated.animate__fast {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}

.animate__animated.animate__slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}

.animate__animated.animate__slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}

@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
  .animate__animated[class*=Out] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from, 20%, 53%, to {
    -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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -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: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -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: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from, 20%, 53%, to {
    -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: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -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: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -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: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shakeX {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}

@-webkit-keyframes shakeY {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}

@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}

@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}

@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }
  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}

/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}

@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}

@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}

@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }
  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}

/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -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);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -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);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -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);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -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);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -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);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -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);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -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);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -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);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -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);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -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);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }
  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}

@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}

@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}

@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}

/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}

@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}

@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}

@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}

/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}

/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -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);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -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);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -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);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -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);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -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);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

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

.dropzone {
  min-height: 150px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  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: 3em 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 {
  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 {
  transform: scale(1.05, 1.05);
  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 {
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 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;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
}

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

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

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

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

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  left: 15%;
  right: 15%;
  border: 3px solid rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #fff;
  display: block;
  position: relative;
  height: 100%;
  width: 0;
  transition: width 300ms ease-in-out;
  border-radius: 17px;
}

.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;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #b10606;
  padding: 0.5em 1em;
  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 #b10606;
} 
.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;
} 
:root {
  --font-family-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --line-height-headers: 1.1;
  --line-height-body: 1.5;
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-xxxl: 2rem;
  --font-size-xxxxl: 2.5rem;
  --color-text-header: hsl(0, 1%, 16%);
  --color-text-body: hsl(0, 5%, 25%);
  --color-text-muted: hsl(0, 1%, 44%);
  --space-xxxs: 0.25rem;
  --space-xxs: 0.375rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 2.5rem;
  --space-xxxl: 3rem;
  --space-xxxxl: 4rem;
  --color-primary: navy;
  --color-primary-rotate: hsl(10, 73%, 54%);
  --color-primary-bg: hsl(0, 85%, 96%);
  --color-secondary: hsl(101, 45%, 56%);
  --color-secondary-rotate: hsl(120, 45%, 56%);
  --color-tertiary: hsl(49, 89%, 64%);
  --color-glint: hsl(210, 100%, 82%);
  --color-white: hsl(0, 0%, 100%);
  --color-background: hsl(30, 50%, 98%);
  --color-background2: hsla(30, 50%, 98%, 50%);
  --color-background3: hsla(0, 1%, 16%, 75%);
  --color-light: hsl(0, 6%, 93%);
  --color-dark: var(--color-text-header);
  --border-radius: 0.375rem;
  --border: solid 2px var(--color-light);
  --shadow-large: 2px 4px 10px hsl(0 0% 0% / 0.1);
  --shadow-small: 1px 3px 6px hsl(0 0% 0% / 0.1);
  --shadow-small-white: 1px 3px 6px hsl(0 0% 100% / 0.1);
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100vh;
  width: 100%;
}

body {
  display: grid;
  grid-template-rows: 10vh 90vh;
  min-height: 100%;
  background-color: var(--color-background);
  color: var(--color-text-body);
  line-height: var(--line-height-body);
  font-family: var(--font-family-sans);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  box-sizing: border-box;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text-header);
  line-height: var(--line-height-headers);
}

h1 {
  font-size: var(--font-size-xxxl);
}

h2 {
  font-size: var(--font-size-xxl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-l);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 200ms;
}
a:hover, a:focus, a:active {
  color: var(--color-primary-rotate);
}

@keyframes appear-then-fade {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10%, 80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes badgePop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spinOnce {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spinContinuous {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.badge-pop {
  animation: badgePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.btn {
  display: inline-block;
  padding: var(--space-xxs) var(--space-xxs);
  border-radius: var(--border-radius);
  background-origin: border-box;
  background-color: transparent;
  border: solid 2px transparent;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: filter 400ms, color 200ms;
}
.btn:hover, .btn:focus, .btn:focus-within, .btn:active {
  transition: filter 250ms, color 200ms;
}
.btn--primary {
  color: var(--color-white);
  background-image: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
}
.btn--primary:hover, .btn--primary:focus, .btn--primary:focus-within, .btn--primary:active {
  color: var(--color-white);
  filter: saturate(1.4) brightness(115%);
}
.btn--secondary {
  color: var(--color-white);
  background-image: linear-gradient(to right, var(--color-secondary), var(--color-secondary-rotate));
}
.btn--secondary:hover, .btn--secondary:focus, .btn--secondary:focus-within, .btn--secondary:active {
  color: var(--color-white);
  filter: saturate(1.2) brightness(110%);
}
.btn--light {
  color: var(--color-dark);
  background-color: var(--color-light);
}
.btn--light:hover, .btn--light:focus, .btn--light:focus-within, .btn--light:active {
  color: var(--color-dark);
  filter: brightness(92%);
}
.btn--dark {
  color: var(--color-white);
  border-color: var(--color-dark);
  background-color: var(--color-dark);
}
.btn--dark:hover, .btn--dark:focus, .btn--dark:focus-within, .btn--dark:active {
  color: var(--color-white);
}

.error-message {
  width: 100%;
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
  padding: var(--space-xs);
  border-radius: var(--border-radius);
}

.form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.form__group {
  flex: 1;
}
.form__input {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border);
  border-radius: var(--border-radius);
  outline: none;
  transition: box-shadow 250ms;
}
.form__input:focus {
  box-shadow: 0 0 0 2px var(--color-glint);
}
.form__input--invalid {
  border-color: var(--color-primary);
}

.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;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hidden {
  display: none !important;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  padding: var(--space-xs) var(--space-m);
  margin-bottom: var(--space-xxs);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-bottom: 2px solid rgba(158, 158, 158, 0.5);
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
}
.navbar__brand {
  grid-column: 1/2;
  font-weight: bold;
  font-size: var(--font-size-xl);
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar__brand a {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease;
}
.navbar__brand a:hover {
  text-shadow: 0 0 12px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar__prev_next {
  grid-column: 2/3;
  font-weight: bold;
  font-size: var(--font-size-xl);
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  align-self: center;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  justify-items: center;
  font-size: var(--font-size-s);
}
.navbar__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.navbar__sub {
  grid-row: 2/3;
  grid-column: 3/4;
}
.navbar__drop {
  grid-row: 1/2;
  grid-column: 3/4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 2rem;
}
.navbar__name {
  grid-column: 4/5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  grid-column-gap: var(--space-s);
  align-items: center;
  font-weight: bold;
  margin-left: auto;
  margin-right: var(--space-s);
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar__right {
  grid-column: 4/5;
  margin-left: auto;
}
.navbar__queue {
  position: relative;
  cursor: pointer;
  margin: 0 var(--space-s);
  white-space: nowrap;
}
.navbar__queue-count {
  display: inline-block;
  padding: 2px var(--space-s);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  border: 1px solid rgba(158, 158, 158, 0.4);
  transition: background 180ms ease;
}
.navbar__queue-count:hover {
  background: rgba(255, 255, 255, 0.95);
}
.navbar__queue-feed {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-xs);
  width: 380px;
  max-height: 320px;
  overflow-y: auto;
  list-style: none;
  padding: var(--space-xs);
  margin: var(--space-xxs) 0 0 0;
  border-radius: var(--border-radius);
  border: var(--border);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 2000;
}
.navbar__queue-feed li {
  padding: var(--space-xxs) var(--space-xs);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.navbar__queue-feed li:last-child {
  border-bottom: none;
}
.navbar__queue:hover .navbar__queue-feed, .navbar__queue:focus-within .navbar__queue-feed {
  display: block;
}
.navbar__bulk {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 var(--space-s);
  white-space: nowrap;
}
.navbar__bulk-badge {
  font-weight: bold;
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  padding: 2px var(--space-xs);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(158, 158, 158, 0.4);
}
.navbar__bulk-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-right: var(--space-xs);
  cursor: default;
}
.navbar__bulk-summary-wrap {
  position: relative;
}
.navbar__bulk-summary-wrap:hover .navbar__bulk-summary-wrap__bulk-selected-list {
  display: block;
}
.navbar__bulk-selected-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-xxs);
  max-width: 360px;
  max-height: 280px;
  overflow-y: auto;
  padding: var(--space-xs);
  border-radius: var(--border-radius);
  border: var(--border);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 2000;
}
.navbar__bulk-selected-list[hidden] {
  display: none;
}
.navbar__bulk-selected-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: var(--font-size-xs);
}
.navbar__bulk-selected-item:last-child {
  border-bottom: none;
}
.navbar__bulk-selected-title {
  color: var(--color-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar__bulk-selected-sku {
  color: var(--color-text-muted);
}
.navbar__bulk-btn {
  font-size: var(--font-size-xs) !important;
  padding: 2px 6px !important;
}

.last_sent a {
  color: lightcoral;
}

.main_tab_cont {
  display: grid;
  max-width: 80vw;
  align-items: center;
  justify-items: center;
  text-align: center;
  justify-content: center;
  align-content: center;
}

.lighet {
  text-align: center;
}

.header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  margin-top: var(--space-m);
  margin-bottom: var(--space-l);
}

@media (min-width: 50rem) {
  .header {
    margin-bottom: var(--space-xl);
  }
}
#menu {
  width: 200px;
  height: 100%;
  /*  undo popover styles  */
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1rem;
  margin: 0;
  left: auto;
  /*  glass effect  */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  /*  animate  */
  transition: translate 0.5s ease-out, display 0.5s ease-out allow-discrete, overlay 0.5s ease-out allow-discrete;
  translate: 250px 0;
}
#menu::backdrop {
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s;
}
#menu:popover-open {
  translate: 0 0;
}
#menu:popover-open::backdrop {
  opacity: 1;
}
@starting-style {
  #menu:popover-open {
    translate: 250px 0;
  }
  #menu:popover-open::backdrop {
    opacity: 0;
  }
}
#menu a {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  text-decoration: none;
  transition: all 0.3s ease;
}
#menu a:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.the_menu_box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.menu-header {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
  align-items: center;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: rgba(0, 123, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 123, 255, 0.5);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4), 0 0 30px rgba(0, 123, 255, 0.2), inset 0 0 20px rgba(0, 123, 255, 0.1);
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.6));
  color: white;
}
.menu-btn:hover {
  background: rgba(0, 123, 255, 0.35);
  border-color: rgba(0, 123, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 0 40px rgba(0, 123, 255, 0.3), inset 0 0 25px rgba(0, 123, 255, 0.15);
  filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.8));
}
.menu-btn img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
}
.menu-btn:hover img {
  filter: brightness(0) invert(1) drop-shadow(0 0 12px rgb(0, 123, 255)) drop-shadow(0 0 20px rgba(0, 123, 255, 0.8));
}
.menu-btn svg,
.menu-btn .icon {
  color: white;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
}

.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  background: rgba(220, 53, 69, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(220, 53, 69, 0.5);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4), 0 0 30px rgba(220, 53, 69, 0.2), inset 0 0 20px rgba(220, 53, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
  color: white;
  font-weight: 600;
}
.close-btn:hover {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 25px rgba(220, 53, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.8));
}
.close-btn svg,
.close-btn .icon {
  color: white;
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.8)) drop-shadow(0 0 15px rgba(220, 53, 69, 0.6));
}

.navbar-item {
  width: 100%;
  text-align: center;
}
.navbar-item .btn,
.navbar-item button {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  background: rgba(0, 123, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 123, 255, 0.5);
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4), 0 0 30px rgba(0, 123, 255, 0.2), inset 0 0 20px rgba(0, 123, 255, 0.1);
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.6));
  font-weight: 600;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.navbar-item .btn:hover,
.navbar-item button:hover {
  background: rgba(0, 123, 255, 0.35);
  border-color: rgba(0, 123, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 0 40px rgba(0, 123, 255, 0.3), inset 0 0 25px rgba(0, 123, 255, 0.15);
  filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.8));
  text-shadow: 0 0 12px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn svg,
.navbar-item button svg {
  flex-shrink: 0;
}
.navbar-item .btn span,
.navbar-item button span {
  line-height: 1.3;
}
.navbar-item .btn-nav--primary {
  background: rgba(0, 123, 255, 0.25);
  border: 2px solid rgba(0, 123, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4), 0 0 30px rgba(0, 123, 255, 0.2), inset 0 0 20px rgba(0, 123, 255, 0.1);
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.6));
}
.navbar-item .btn-nav--primary:hover {
  background: rgba(0, 123, 255, 0.35);
  border-color: rgba(0, 123, 255, 0.8);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 0 40px rgba(0, 123, 255, 0.3), inset 0 0 25px rgba(0, 123, 255, 0.15);
  filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.8));
  text-shadow: 0 0 12px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn-nav--success {
  background: rgba(40, 167, 69, 0.25);
  border: 2px solid rgba(40, 167, 69, 0.5);
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.4), 0 0 30px rgba(40, 167, 69, 0.2), inset 0 0 20px rgba(40, 167, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(40, 167, 69, 0.6));
}
.navbar-item .btn-nav--success:hover {
  background: rgba(40, 167, 69, 0.35);
  border-color: rgba(40, 167, 69, 0.8);
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.6), 0 0 40px rgba(40, 167, 69, 0.3), inset 0 0 25px rgba(40, 167, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(40, 167, 69, 0.8));
  text-shadow: 0 0 12px rgba(40, 167, 69, 0.8), 0 0 20px rgba(40, 167, 69, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn-nav--warning {
  background: rgba(255, 193, 7, 0.25);
  border: 2px solid rgba(255, 193, 7, 0.5);
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.4), 0 0 30px rgba(255, 193, 7, 0.2), inset 0 0 20px rgba(255, 193, 7, 0.1);
  filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
}
.navbar-item .btn-nav--warning:hover {
  background: rgba(255, 193, 7, 0.35);
  border-color: rgba(255, 193, 7, 0.8);
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.6), 0 0 40px rgba(255, 193, 7, 0.3), inset 0 0 25px rgba(255, 193, 7, 0.15);
  filter: drop-shadow(0 0 12px rgba(255, 193, 7, 0.8));
  text-shadow: 0 0 12px rgba(255, 193, 7, 0.8), 0 0 20px rgba(255, 193, 7, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn-nav--info {
  background: rgba(23, 162, 184, 0.25);
  border: 2px solid rgba(23, 162, 184, 0.5);
  box-shadow: 0 0 15px rgba(23, 162, 184, 0.4), 0 0 30px rgba(23, 162, 184, 0.2), inset 0 0 20px rgba(23, 162, 184, 0.1);
  filter: drop-shadow(0 0 8px rgba(23, 162, 184, 0.6));
}
.navbar-item .btn-nav--info:hover {
  background: rgba(23, 162, 184, 0.35);
  border-color: rgba(23, 162, 184, 0.8);
  box-shadow: 0 0 20px rgba(23, 162, 184, 0.6), 0 0 40px rgba(23, 162, 184, 0.3), inset 0 0 25px rgba(23, 162, 184, 0.15);
  filter: drop-shadow(0 0 12px rgba(23, 162, 184, 0.8));
  text-shadow: 0 0 12px rgba(23, 162, 184, 0.8), 0 0 20px rgba(23, 162, 184, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn-nav--secondary {
  background: rgba(108, 117, 125, 0.25);
  border: 2px solid rgba(108, 117, 125, 0.5);
  box-shadow: 0 0 15px rgba(108, 117, 125, 0.4), 0 0 30px rgba(108, 117, 125, 0.2), inset 0 0 20px rgba(108, 117, 125, 0.1);
  filter: drop-shadow(0 0 8px rgba(108, 117, 125, 0.6));
}
.navbar-item .btn-nav--secondary:hover {
  background: rgba(108, 117, 125, 0.35);
  border-color: rgba(108, 117, 125, 0.8);
  box-shadow: 0 0 20px rgba(108, 117, 125, 0.6), 0 0 40px rgba(108, 117, 125, 0.3), inset 0 0 25px rgba(108, 117, 125, 0.15);
  filter: drop-shadow(0 0 12px rgba(108, 117, 125, 0.8));
  text-shadow: 0 0 12px rgba(108, 117, 125, 0.8), 0 0 20px rgba(108, 117, 125, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn-nav--danger {
  background: rgba(220, 53, 69, 0.25);
  border: 2px solid rgba(220, 53, 69, 0.5);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4), 0 0 30px rgba(220, 53, 69, 0.2), inset 0 0 20px rgba(220, 53, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
}
.navbar-item .btn-nav--danger:hover {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.8);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 25px rgba(220, 53, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.8));
  text-shadow: 0 0 12px rgba(220, 53, 69, 0.8), 0 0 20px rgba(220, 53, 69, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn-nav--signout {
  background: rgba(220, 53, 69, 0.25);
  border: 2px solid rgba(220, 53, 69, 0.5);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4), 0 0 30px rgba(220, 53, 69, 0.2), inset 0 0 20px rgba(220, 53, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
}
.navbar-item .btn-nav--signout:hover {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.8);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 25px rgba(220, 53, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.8));
  text-shadow: 0 0 12px rgba(220, 53, 69, 0.8), 0 0 20px rgba(220, 53, 69, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item .btn--danger {
  background: rgba(220, 53, 69, 0.25);
  border: 2px solid rgba(220, 53, 69, 0.5);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4), 0 0 30px rgba(220, 53, 69, 0.2), inset 0 0 20px rgba(220, 53, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
}
.navbar-item .btn--danger:hover {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.8);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 25px rgba(220, 53, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.8));
  text-shadow: 0 0 12px rgba(220, 53, 69, 0.8), 0 0 20px rgba(220, 53, 69, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.navbar-item--divider {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.navbar-name {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-weight: 600;
}

.shop_prodder {
  grid-column: 1/2;
  display: grid;
  grid-template-columns: 3fr 2fr;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-large);
  height: 85vh;
  grid-template-rows: 50% 50%;
  grid-column-gap: var(--space-xs);
}

.first_page {
  grid-column: 1/2;
  grid-row: 1/3;
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-row-gap: var(--space-xs);
  max-height: 100%;
  align-content: start;
  justify-content: start;
  align-items: start;
  justify-items: center;
}

.all_results {
  display: grid;
  overflow: auto;
  grid-row-gap: var(--space-xs);
  width: 100%;
  transition: all 1s;
  height: 100%;
  justify-items: center;
  align-items: center;
}

.all_images {
  display: grid;
  overflow: auto;
  grid-row-gap: var(--space-xs);
  width: 100%;
  grid-template-rows: repeat(3, auto);
}

.second_page {
  grid-column: 2/3;
  grid-row: 1/3;
  max-height: 100%;
  overflow: auto;
  height: 100%;
}

.old_title {
  grid-row: 1/2;
  grid-column: 1/2;
  text-align: center;
  align-items: center;
  justify-items: center;
  grid-template-columns: 3fr 1fr;
  grid-row-gap: 1rem;
}

.titleskubox {
  display: grid;
}

.old_description {
  grid-row: 2/3;
  grid-column: 1/2;
  text-align: center;
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.old_des_title {
  grid-column: 1/3;
}

.photo_section {
  grid-column: 1/2;
  display: grid;
  grid-row-gap: var(--space-m);
  align-items: center;
  justify-items: center;
  overflow: scroll;
}

.photo_list {
  display: grid;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  grid-column-gap: var(--space-xs);
  padding: var(--space-xxs);
  height: 100%;
  justify-items: center;
  align-items: center;
}

.white {
  color: var(--color-white);
}

.photo_but {
  position: relative;
  margin: auto;
  display: grid;
  align-items: center;
  justify-items: center;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
  overflow: hidden;
}

.imager_box {
  display: grid;
  grid-row-gap: var(--space-xs);
  overflow: hidden;
  justify-items: center;
  align-items: center;
}

.photo_but img {
  transition: all 1s;
  display: block;
  width: 100%;
  max-height: 100%;
  transform: scale(1);
  overflow: hidden;
  object-fit: scale-down;
}

.photo_but:hover img {
  transform: scale(1.1);
}

.titlesearch {
  display: grid;
  grid-template-rows: 5vh 1fr;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  text-align: center;
}

.title_meta_results {
  display: grid;
  grid-row-gap: var(--space-xs);
  grid-template-rows: auto;
}

.result_type {
  text-align: center;
  box-shadow: var(--shadow-small);
  padding: var(--space-xxs);
  display: grid;
  grid-template-columns: 90% 10%;
  justify-items: center;
  align-items: center;
  color: var(--color-white) !important;
  background-color: var(--color-secondary);
  border-radius: var(--border-radius);
  width: 100%;
}

.result_type h4 {
  color: var(--color-white) !important;
}

.no_domain {
  text-align: center;
  box-shadow: var(--shadow-small);
  padding: var(--space-xxs);
  color: var(--color-white) !important;
  background-color: var(--color-primary);
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
  justify-items: center;
}

.no_domain h4 {
  color: var(--color-white) !important;
}

.meta_re {
  display: grid;
  grid-row-gap: var(--space-xs);
  align-items: center;
  justify-items: center;
  padding-bottom: var(--space-xs);
  max-width: 95%;
  width: 95%;
}

.meta_domain {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  width: 100%;
  padding: var(--space-xs);
}

.meta_title {
  border: var(--border);
  box-shadow: var(--shadow-small);
  border-radius: var(--border-radius);
  width: 95%;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template_rows: 1fr 1fr;
  grid-row-gap: var(--space-xs);
  padding: var(--space-xs);
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.meta_snippet {
  border: var(--border);
  box-shadow: var(--shadow-small);
  border-radius: var(--border-radius);
  width: 95%;
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template_rows: 1fr 1fr;
  grid-row-gap: var(--space-xs);
  padding: var(--space-xs);
  align-content: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.snip_but {
  align-items: center;
  justify-items: center;
  display: grid;
  height: 100%;
  grid-row-gap: var(--space-xs);
}

.meta_list {
  overflow-x: hidden;
  grid-row-gap: var(--space-xs);
  display: grid;
  align-items: center;
  justify-items: center;
}

.meta_list::-webkit-scrollbar {
  width: 1vw;
}

.meta_list::-webkit-scrollbar-track {
  background: var(--color-dark);
}

.meta_list::-webkit-scrollbar-thumb {
  background: var(--color-light);
}

.meta_list::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary-rotate);
}

.get_results {
  grid-row: 3/5;
  grid-column: 1/2;
  margin: auto;
}

.loading-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: var(--space-xs);
  align-items: center;
  justify-items: center;
  width: 50%;
  margin: auto;
}

.loading-box img {
  max-height: 200px;
}

.top-load {
  grid-column: 1/2;
  align-self: center;
  justify-self: center;
}

.barcode_color {
  background-color: darkmagenta !important;
}

.vendor_domain {
  background-color: darkgreen !important;
}

.meta_titler {
  background-color: darkorange !important;
}

.meta_manu {
  background-color: darkslategrey !important;
}

.hiddener {
  display: none !important;
}

.blue_color {
  color: darkblue !important;
}

.select_info {
  grid-column: 2/3;
  grid-row: 1/3;
  display: grid;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-large);
  width: 100%;
  height: 85vh;
  background-color: var(--color-background3);
  backdrop-filter: blur(25px);
  color: var(--color-light);
  justify-items: center;
  align-items: center;
  grid-row-gap: var(--space-xxs);
  grid-column-gap: var(--space-s);
  grid-template-rows: 1fr 1fr 2fr 2fr 8fr;
}

.shop_info {
  grid-column: 1/2;
}

.shop_photo {
  display: grid;
  justify-items: center;
  align-items: center;
}

.shop_photo img {
  max-height: 23vh;
  max-width: 90%;
}

.selected_buttons {
  display: grid;
  padding: var(--space-xxs);
  grid-column-gap: var(--space-xxs);
  justify-items: center;
  align-items: center;
  width: 100%;
}

.all_width {
  width: 100%;
}

.title_box {
  display: grid;
  width: 100%;
}

.form_spacing {
  display: grid;
  grid-template-columns: 9fr 1fr;
  grid-column-gap: var(--space-xs);
  width: 100%;
}

.image_spacing {
  width: 100%;
  height: 100%;
}

.font_small {
  font-size: var(--font-size-xs);
}

.in_form {
  grid-column: 1/3;
}

#selected_image {
  height: 100%;
}

.update_buttons {
  display: grid;
  grid-row-gap: var(--space-xs);
  align-items: center;
  justify-items: center;
}

.animate-cart-in {
  animation: fade-in 0.25s ease-out, slide-in 0.25s ease-out;
}

.animate-cart-out {
  animation: fade-out 0.25s ease-out, slide-out 0.25s ease-out;
}

.choose_box {
  grid-column: 1/3;
}

.bottom_area {
  display: grid;
  grid-column-gap: var(--space-xs);
  align-items: center;
  height: 100%;
  grid-template-rows: auto auto;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slide-in {
  from {
    transform: translateX(4rem);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(4rem);
  }
}
.selected_box {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-large);
  padding: var(--space-xs);
  background-color: var(--color-background3);
  color: var(--color-light);
  backdrop-filter: blur(25px);
  overflow-y: auto;
}

.titleboxer {
  text-align: center;
}

.new_description {
  border-color: darkmagenta !important;
}

.turbo-progress-bar {
  background: linear-gradient(to right, var(--color-primary), var(--color-primary-rotate));
}

.flash {
  position: fixed;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  max-width: 100%;
  width: max-content;
  padding: 0 var(--space-m);
}
.flash__message {
  font-size: var(--font-size-s);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-m);
  background-color: var(--color-dark);
  animation: appear-then-fade 4s both;
  border-radius: 999px;
}

.start_box {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: var(--space-xs);
  margin: auto;
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  border: 2px solid rgba(158, 158, 158, 0.5);
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
}
.start_box h1 {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.start_box p {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.home-action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 800px;
  margin-top: 1.5rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  text-decoration: none;
}
.action-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}
.action-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(0, 0, 0, 0.1);
}
.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.action-btn svg {
  flex-shrink: 0;
}
.action-btn span {
  line-height: 1.3;
}

.btn-primary {
  background: rgba(0, 123, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 123, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4), 0 0 30px rgba(0, 123, 255, 0.2), inset 0 0 20px rgba(0, 123, 255, 0.1);
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.6));
}
.btn-primary:hover {
  background: rgba(0, 123, 255, 0.35);
  border-color: rgba(0, 123, 255, 0.8);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 0 40px rgba(0, 123, 255, 0.3), inset 0 0 25px rgba(0, 123, 255, 0.15);
  filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.8));
}

.btn-success {
  background: rgba(40, 167, 69, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(40, 167, 69, 0.5);
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.4), 0 0 30px rgba(40, 167, 69, 0.2), inset 0 0 20px rgba(40, 167, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(40, 167, 69, 0.6));
}
.btn-success:hover {
  background: rgba(40, 167, 69, 0.35);
  border-color: rgba(40, 167, 69, 0.8);
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.6), 0 0 40px rgba(40, 167, 69, 0.3), inset 0 0 25px rgba(40, 167, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(40, 167, 69, 0.8));
}

.btn-warning {
  background: rgba(255, 193, 7, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 193, 7, 0.5);
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.4), 0 0 30px rgba(255, 193, 7, 0.2), inset 0 0 20px rgba(255, 193, 7, 0.1);
  filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.6));
}
.btn-warning:hover {
  background: rgba(255, 193, 7, 0.35);
  border-color: rgba(255, 193, 7, 0.8);
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.6), 0 0 40px rgba(255, 193, 7, 0.3), inset 0 0 25px rgba(255, 193, 7, 0.15);
  filter: drop-shadow(0 0 12px rgba(255, 193, 7, 0.8));
}

.btn-info {
  background: rgba(23, 162, 184, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(23, 162, 184, 0.5);
  box-shadow: 0 0 15px rgba(23, 162, 184, 0.4), 0 0 30px rgba(23, 162, 184, 0.2), inset 0 0 20px rgba(23, 162, 184, 0.1);
  filter: drop-shadow(0 0 8px rgba(23, 162, 184, 0.6));
}
.btn-info:hover {
  background: rgba(23, 162, 184, 0.35);
  border-color: rgba(23, 162, 184, 0.8);
  box-shadow: 0 0 20px rgba(23, 162, 184, 0.6), 0 0 40px rgba(23, 162, 184, 0.3), inset 0 0 25px rgba(23, 162, 184, 0.15);
  filter: drop-shadow(0 0 12px rgba(23, 162, 184, 0.8));
}

.btn-secondary {
  background: rgba(108, 117, 125, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(108, 117, 125, 0.5);
  box-shadow: 0 0 15px rgba(108, 117, 125, 0.4), 0 0 30px rgba(108, 117, 125, 0.2), inset 0 0 20px rgba(108, 117, 125, 0.1);
  filter: drop-shadow(0 0 8px rgba(108, 117, 125, 0.6));
}
.btn-secondary:hover {
  background: rgba(108, 117, 125, 0.35);
  border-color: rgba(108, 117, 125, 0.8);
  box-shadow: 0 0 20px rgba(108, 117, 125, 0.6), 0 0 40px rgba(108, 117, 125, 0.3), inset 0 0 25px rgba(108, 117, 125, 0.15);
  filter: drop-shadow(0 0 12px rgba(108, 117, 125, 0.8));
}

.btn-danger {
  background: rgba(220, 53, 69, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(220, 53, 69, 0.5);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4), 0 0 30px rgba(220, 53, 69, 0.2), inset 0 0 20px rgba(220, 53, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
}
.btn-danger:hover {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.8);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 25px rgba(220, 53, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.8));
}

.loginbox {
  margin: auto;
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: var(--space-s);
}

.form-inputs {
  display: grid;
  grid-row-gap: var(--space-s);
}

.form-label {
  text-align: center;
  font-weight: bold;
}

.form-actions {
  padding-top: var(--space-s);
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: var(--space-s);
}

.empty-state {
  grid-column: 2/3;
  padding: var(--space-m);
  border: var(--border);
  border-style: dashed;
  text-align: center;
}
.empty-state__text {
  font-size: var(--font-size-l);
  color: var(--color-light);
  font-weight: bold;
}

.detailer2 {
  /*grid-column: 2/3;*/
  display: grid;
  grid-template-rows: 20% 80%;
  grid-template-columns: 30% 70%;
  height: 40vh;
  backdrop-filter: blur(20px);
  grid-column: 2/3;
  grid-row: 1/2;
}

.selectmore {
  grid-column: 1/3;
  grid-row: 1/3;
  align-self: center;
  justify-self: center;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  justify-items: center;
  align-items: center;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.inline {
  display: flex;
  align-items: center;
}

.info_block {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.label_box {
  display: grid;
  align-items: center;
  justify-items: center;
}

.sp_index {
  display: grid;
  grid-template-columns: 4fr 1fr 2fr 2fr 3fr 2fr 1fr;
  color: white;
  text-align: left;
  height: 85vh;
  overflow-y: scroll;
  margin: 0.25em;
  width: 100%;
}

.headertop {
  position: sticky;
  top: 0;
  grid-column: 1/8;
  display: grid;
  grid-template-columns: 4fr 1fr 2fr 2fr 3fr 2fr 1fr;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  padding: 1rem;
  color: black;
  border-radius: 0.5rem;
  z-index: 1;
  width: 100%;
}

.the_prods {
  grid-column: 1/8;
  display: grid;
  grid-template-columns: 4fr 1fr 2fr 2fr 3fr 2fr 1fr;
  background-color: rgba(255, 255, 255, 0.95);
  grid-row-gap: 0.5em;
  padding: 0.25rem;
  margin: 0.12rem;
  border-radius: 0.5rem;
}

.sort {
  position: absolute;
  top: 1rem;
  left: 0.5rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.sort-desc {
  border-top: 6px solid white;
}

.sort-asc {
  border-bottom: 6px solid white;
}

.search_form {
  grid-column: 1/5;
  display: grid;
  grid-template-columns: 3fr 1fr;
  color: white;
  margin: 0.25em;
}

.resu {
  font-size: 0.9rem;
}

.product_list {
  display: grid;
  backdrop-filter: blur(20px) brightness(0.5);
  grid-template-rows: 1fr 1fr 8fr;
  max-height: 80vh;
  grid-column: 1/2;
  grid-row: 1/3;
}

.productlist {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr 1fr 1fr;
  text-align: center;
  place-items: center;
  margin: 0.25rem;
  color: var(--color-white);
}

.product_menus {
  display: grid;
  justify-items: center;
  align-content: center;
  grid-template-columns: 1fr 1fr;
}

.theitems {
  overflow-y: scroll;
}

.loading-indicator2 {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1/2;
  grid-row: 3/4;
}

.nores {
  margin: auto;
  text-align: center;
  color: white;
}

.new_order {
  grid-row: 1/2;
  grid-column: 2/3;
  align-self: center;
  justify-self: center;
}

.selectlist {
  grid-row: 1/2;
  grid-column: 1/2;
}

.white {
  color: white;
}

.resizer {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-row-gap: 1rem;
}

.lighet {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-row-gap: var(--space-xs);
  align-items: center;
  justify-items: center;
  padding-bottom: var(--space-xs);
  max-width: 95%;
  width: 95%;
}

.product_inform {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-row-gap: var(--space-xs);
  grid-column-gap: var(--space-xs);
  align-items: center;
  justify-items: center;
  align-content: center;
  justify-content: center;
  padding-bottom: var(--space-xs);
  text-align: center;
}

.form_style {
  display: grid;
  grid-row-gap: 1rem;
  align-items: center;
  justify-items: center;
}

.form_style img {
  max-height: 30vh;
}

.dropzone {
  display: grid;
  align-items: center;
  justify-items: center;
  max-width: 95%;
  width: 95%;
}

.enhanced-dropzone-container {
  margin: var(--space-l) 0;
  width: 100%;
  position: relative;
}

.enhanced-dropzone {
  display: flex;
  position: relative;
  min-height: 200px;
  width: 100%;
  border: 3px dashed var(--color-light);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 1;
}
.enhanced-dropzone:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.enhanced-dropzone.dragover {
  border-color: var(--color-secondary);
  background: rgba(40, 167, 69, 0.2);
  transform: scale(1.02);
  box-shadow: 0 8px 30px rgba(40, 167, 69, 0.3);
}
.enhanced-dropzone.dragover .dropzone-visual-content {
  opacity: 0.3;
}
.enhanced-dropzone.dragover .dropzone-drag-overlay {
  opacity: 1;
  visibility: visible;
}

.dropzone-visual-content {
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: var(--space-l);
  width: 100%;
  position: relative;
  z-index: 2;
}

.dropzone-icon {
  color: var(--color-text-muted);
  margin-bottom: var(--space-m);
  opacity: 0.7;
}
.dropzone-icon svg {
  margin: 0 auto;
  display: block;
  pointer-events: none;
}

.dropzone-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-header);
  margin-bottom: var(--space-s);
  pointer-events: none;
}

.dropzone-subtitle {
  font-size: var(--font-size-m);
  color: var(--color-text-muted);
  margin-bottom: var(--space-s);
  pointer-events: none;
}

.dropzone-formats {
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
  opacity: 0.8;
  pointer-events: none;
}

.dropzone-drag-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 167, 69, 0.9);
  color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  pointer-events: none;
  z-index: 3;
}

.drag-overlay-content {
  text-align: center;
  pointer-events: none;
}
.drag-overlay-content svg {
  margin: 0 auto var(--space-s);
  display: block;
  animation: bounce 2s infinite;
  pointer-events: none;
}
.drag-overlay-content span {
  font-size: var(--font-size-l);
  font-weight: 600;
  pointer-events: none;
}

.dropzone-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
  opacity: 0;
}

.image-preview-container {
  margin: var(--space-l) 0;
  width: 100%;
}

.preview-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: var(--space-l);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.preview-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  margin: 0 auto var(--space-m);
  display: block;
}

.preview-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.preview-filename {
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
  font-weight: 500;
  flex: 1;
  min-width: 200px;
}

.preview-remove-btn {
  flex-shrink: 0;
}

.action-buttons-container {
  display: grid;
  gap: var(--space-s);
  margin: var(--space-l) 0;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-m) var(--space-l);
  min-height: 50px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.action-btn.danger {
  background: rgba(220, 53, 69, 0.9) !important;
}
.action-btn.danger:hover {
  background: rgb(220, 53, 69) !important;
}
.action-btn svg {
  flex-shrink: 0;
}

.upload-notice {
  grid-column: 1/-1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m);
  background: rgba(40, 167, 69, 0.1);
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 8px;
  color: var(--color-text-body);
  font-size: var(--font-size-s);
  margin-top: var(--space-m);
}
.upload-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-secondary);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
@media (max-width: 640px) {
  .enhanced-dropzone {
    min-height: 160px;
  }
  .dropzone-visual-content {
    padding: var(--space-m);
  }
  .dropzone-icon svg {
    width: 48px;
    height: 48px;
  }
  .dropzone-title {
    font-size: var(--font-size-l);
  }
  .action-buttons-container {
    grid-template-columns: 1fr;
  }
  .preview-details {
    flex-direction: column;
    align-items: stretch;
  }
}
.image-resizer-v2-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 1rem;
  padding: 1rem;
  overflow: hidden;
}
@media (min-width: 50rem) {
  .image-resizer-v2-grid {
    gap: 1.5rem;
    padding: 1.5rem;
  }
}

.left-column,
.center-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  justify-content: center;
  align-items: stretch;
}
.left-column::-webkit-scrollbar,
.center-column::-webkit-scrollbar,
.right-column::-webkit-scrollbar {
  width: 6px;
}
.left-column::-webkit-scrollbar-track,
.center-column::-webkit-scrollbar-track,
.right-column::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.left-column::-webkit-scrollbar-thumb,
.center-column::-webkit-scrollbar-thumb,
.right-column::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
.left-column::-webkit-scrollbar-thumb:hover,
.center-column::-webkit-scrollbar-thumb:hover,
.right-column::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.column-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-header);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.column-title svg {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.search-card {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  border: 2px solid rgba(158, 158, 158, 0.5);
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
}
.search-card .column-title {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 2px solid rgba(0, 123, 255, 0.45);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) brightness(1.05);
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  transition: all 0.25s ease;
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.35), 0 0 22px rgba(0, 123, 255, 0.2), inset 0 0 14px rgba(0, 123, 255, 0.08);
  caret-color: #fff;
}
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.search-input:hover {
  border-color: rgba(0, 123, 255, 0.65);
  box-shadow: 0 0 14px rgba(0, 123, 255, 0.45), 0 0 28px rgba(0, 123, 255, 0.25), inset 0 0 18px rgba(0, 123, 255, 0.1);
}
.search-input:focus {
  outline: none;
  border-color: rgba(0, 123, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 18px rgba(0, 123, 255, 0.6), 0 0 34px rgba(0, 123, 255, 0.35), inset 0 0 22px rgba(0, 123, 255, 0.12);
}

.search-btn {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  background: rgba(0, 123, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 123, 255, 0.5);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4), 0 0 30px rgba(0, 123, 255, 0.2), inset 0 0 20px rgba(0, 123, 255, 0.1);
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.6));
}
.search-btn:hover {
  background: rgba(0, 123, 255, 0.35);
  border-color: rgba(0, 123, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 0 40px rgba(0, 123, 255, 0.3), inset 0 0 25px rgba(0, 123, 255, 0.15);
  filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.8));
}
.search-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5), 0 0 20px rgba(0, 123, 255, 0.25), inset 0 0 15px rgba(0, 123, 255, 0.2);
}
.search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.product-info-section {
  animation: fadeInUp 0.5s ease;
}

.product-card {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  border: 2px solid rgba(158, 158, 158, 0.3);
  box-shadow: 0 0 10px rgba(158, 158, 158, 0.25), 0 0 20px rgba(158, 158, 158, 0.15), inset 0 0 15px rgba(158, 158, 158, 0.08);
  filter: drop-shadow(0 0 6px rgba(158, 158, 158, 0.4));
}

.product-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-bottom: 0.75rem;
}
.product-card-title svg {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
}

.product-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.product-info-block {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
.product-info-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.lightspeed-block {
  border-color: rgba(255, 152, 0, 0.4);
}
.lightspeed-block:hover {
  border-color: rgba(255, 152, 0, 0.7);
  box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3);
}

.shopify-block {
  border-color: rgba(76, 175, 80, 0.4);
}
.shopify-block:hover {
  border-color: rgba(76, 175, 80, 0.7);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.no-shopify-block {
  border-color: rgba(158, 158, 158, 0.4);
  background: rgba(158, 158, 158, 0.05);
}

.info-header-compact {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
  width: 100%;
}

.info-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.info-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex: 1;
  text-align: center;
}

.info-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  flex-shrink: 0;
}
.info-icon svg {
  width: 20px;
  height: 20px;
}

.lightspeed-icon {
  background: rgba(255, 152, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 152, 0, 0.6);
  color: white;
  box-shadow: 0 0 10px 2px rgba(255, 152, 0, 0.5), 0 0 20px 4px rgba(255, 152, 0, 0.3), 0 0 30px 6px rgba(255, 152, 0, 0.2), inset 0 0 15px rgba(255, 152, 0, 0.2);
}

.shopify-icon {
  background: rgba(76, 175, 80, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(76, 175, 80, 0.6);
  color: white;
  box-shadow: 0 0 10px 2px rgba(76, 175, 80, 0.5), 0 0 20px 4px rgba(76, 175, 80, 0.3), 0 0 30px 6px rgba(76, 175, 80, 0.2), inset 0 0 15px rgba(76, 175, 80, 0.2);
}

.no-shopify-icon {
  background: rgba(158, 158, 158, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(158, 158, 158, 0.6);
  color: white;
  box-shadow: 0 0 10px 2px rgba(158, 158, 158, 0.5), 0 0 20px 4px rgba(158, 158, 158, 0.3), 0 0 30px 6px rgba(158, 158, 158, 0.2), inset 0 0 15px rgba(158, 158, 158, 0.2);
}

.info-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin: 0;
  line-height: 1.2;
}

.info-subtitle {
  font-size: 0.7rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin: 0.1rem 0 0;
  line-height: 1.2;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.info-value {
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.info-value[title] {
  cursor: help;
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  border-radius: var(--border-radius);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}

.badge-primary {
  background: rgba(255, 152, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 152, 0, 0.5);
  color: white;
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.4), 0 0 30px rgba(255, 152, 0, 0.2), inset 0 0 20px rgba(255, 152, 0, 0.1);
  filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));
}

.badge-secondary {
  background: rgba(76, 175, 80, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(76, 175, 80, 0.5);
  color: white;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.4), 0 0 30px rgba(76, 175, 80, 0.2), inset 0 0 20px rgba(76, 175, 80, 0.1);
  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.6));
}

.badge-count {
  background: rgba(108, 117, 125, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(108, 117, 125, 0.5);
  color: white;
  min-width: 26px;
  text-align: center;
  box-shadow: 0 0 15px rgba(108, 117, 125, 0.4), 0 0 30px rgba(108, 117, 125, 0.2), inset 0 0 20px rgba(108, 117, 125, 0.1);
  filter: drop-shadow(0 0 8px rgba(108, 117, 125, 0.6));
}

.info-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius);
  text-decoration: none;
  color: white;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.info-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.info-icon-btn svg {
  width: 18px;
  height: 18px;
}

.lightspeed-btn {
  background: rgba(255, 152, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 152, 0, 0.5);
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.4), 0 0 30px rgba(255, 152, 0, 0.2), inset 0 0 20px rgba(255, 152, 0, 0.1);
  filter: drop-shadow(0 0 8px rgba(255, 152, 0, 0.6));
}
.lightspeed-btn:hover {
  background: rgba(255, 152, 0, 0.35);
  border-color: rgba(255, 152, 0, 0.8);
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.6), 0 0 40px rgba(255, 152, 0, 0.3), inset 0 0 25px rgba(255, 152, 0, 0.15);
  filter: drop-shadow(0 0 12px rgba(255, 152, 0, 0.8));
}

.shopify-btn {
  background: rgba(76, 175, 80, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(76, 175, 80, 0.5);
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.4), 0 0 30px rgba(76, 175, 80, 0.2), inset 0 0 20px rgba(76, 175, 80, 0.1);
  filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.6));
}
.shopify-btn:hover {
  background: rgba(76, 175, 80, 0.35);
  border-color: rgba(76, 175, 80, 0.8);
  box-shadow: 0 0 20px rgba(76, 175, 80, 0.6), 0 0 40px rgba(76, 175, 80, 0.3), inset 0 0 25px rgba(76, 175, 80, 0.15);
  filter: drop-shadow(0 0 12px rgba(76, 175, 80, 0.8));
}

.no-shopify-message {
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-style: italic;
  text-align: center;
  padding: 0.3rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

.upload-card {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  border: 2px solid rgba(158, 158, 158, 0.5);
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
  height: 100%;
  display: flex;
  flex-direction: column;
}
.upload-card .column-title {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.dropzone-wrapper {
  width: 100%;
  position: relative;
  flex: 1;
  min-height: 250px;
  display: flex;
  flex-direction: column;
}

.enhanced-dropzone-v2 {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed rgba(0, 123, 255, 0.5);
  box-shadow: 0 0 12px 2px rgba(0, 123, 255, 0.4), 0 0 24px 6px rgba(0, 123, 255, 0.25), inset 0 0 18px rgba(0, 123, 255, 0.18);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px) brightness(1.15);
  -webkit-backdrop-filter: blur(25px) brightness(1.15);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: visible;
}
.enhanced-dropzone-v2:hover {
  border-color: rgba(0, 123, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px) brightness(1.2);
  -webkit-backdrop-filter: blur(30px) brightness(1.2);
  transform: translateY(-2px);
  box-shadow: 0 0 16px 3px rgba(0, 123, 255, 0.55), 0 0 32px 10px rgba(0, 123, 255, 0.35), inset 0 0 22px rgba(0, 123, 255, 0.22);
}
.enhanced-dropzone-v2.is-dragging {
  border-color: rgba(0, 180, 120, 0.85);
  background: rgba(76, 175, 80, 0.1);
  backdrop-filter: blur(30px) brightness(1.2);
  -webkit-backdrop-filter: blur(30px) brightness(1.2);
  transform: scale(1.02);
  box-shadow: 0 0 16px 3px rgba(0, 180, 120, 0.55), 0 0 32px 10px rgba(0, 180, 120, 0.35), inset 0 0 22px rgba(0, 180, 120, 0.22);
}

.dropzone-content {
  text-align: center;
  padding: 1.5rem;
  pointer-events: none;
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.is-dragging .dropzone-content {
  opacity: 0.3;
}
.dropzone-content.compact {
  justify-content: flex-end;
  padding: 0.75rem;
}
.dropzone-content.compact .dropzone-icon {
  display: none;
}
.dropzone-content.compact .dropzone-title {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.dropzone-content.compact .dropzone-text {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}
.dropzone-content.compact .dropzone-info {
  display: none;
}

.dropzone-icon-wrapper {
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.dropzone-icon {
  color: #fff;
  margin: 0 auto;
  opacity: 1;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 15px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 30px rgba(0, 123, 255, 0.6)) drop-shadow(0 0 45px rgba(0, 123, 255, 0.4));
}
.enhanced-dropzone-v2:hover .dropzone-icon {
  transform: scale(1.1);
  filter: drop-shadow(0 0 20px rgb(0, 123, 255)) drop-shadow(0 0 40px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 60px rgba(0, 123, 255, 0.6));
}

.dropzone-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.dropzone-text {
  font-size: 0.9rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.dropzone-info {
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease;
}

.dropzone-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.95) 0%, rgba(56, 142, 60, 0.95) 100%);
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 15;
}
.dropzone-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.dropzone-overlay svg {
  animation: bounce 2s infinite;
}

.dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.image-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  animation-duration: 0.5s;
  display: none;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
}
.image-preview[style*="display: flex"] {
  display: flex;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px) brightness(1.15);
  -webkit-backdrop-filter: blur(25px) brightness(1.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius);
  pointer-events: auto;
  flex-shrink: 0;
}
.preview-header strong {
  color: #fff;
  font-size: 1rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.preview-header .btn-clear-all {
  padding: 0.5rem 1rem;
  min-height: auto;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(220, 53, 69, 0.9) !important;
  border: 2px solid rgb(220, 53, 69);
}
.preview-header .btn-clear-all:hover {
  background: rgb(220, 53, 69) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  padding: 0.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100% - 80px);
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 123, 255, 0.6) rgba(0, 0, 0, 0.2);
}
.preview-grid::-webkit-scrollbar {
  width: 10px;
}
.preview-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  backdrop-filter: blur(10px);
}
.preview-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.6) 0%, rgba(0, 180, 120, 0.6) 100%);
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
.preview-grid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.8) 0%, rgba(0, 180, 120, 0.8) 100%);
}

.preview-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px) brightness(1.15);
  -webkit-backdrop-filter: blur(25px) brightness(1.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: all 0.3s ease;
}
.preview-item:hover {
  border-color: rgba(0, 123, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 0 12px 2px rgba(0, 123, 255, 0.3), 0 0 24px 6px rgba(0, 123, 255, 0.15);
}

.preview-item-image-wrapper {
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--border-radius) - 2px);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.preview-loading,
.preview-error {
  color: #fff;
  font-size: 0.875rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.preview-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.preview-item-info span {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.preview-item-info small {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.btn-remove-item {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: bold;
  padding: 0;
}
.btn-remove-item:hover {
  background: rgb(220, 53, 69);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.6);
}
.btn-remove-item:active {
  transform: scale(0.95) rotate(90deg);
}

.btn-remove-item {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(220, 53, 69, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(220, 53, 69, 0.8);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.6), 0 0 20px rgba(220, 53, 69, 0.3);
  opacity: 0;
}
.preview-item:hover .btn-remove-item {
  opacity: 1;
}
.btn-remove-item:hover {
  background: rgb(220, 53, 69);
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.8), 0 0 30px rgba(220, 53, 69, 0.4);
}
.btn-remove-item:active {
  transform: scale(0.95);
}
.btn-remove-item svg {
  flex-shrink: 0;
}

.preview-img {
  max-width: 100%;
  height: calc(100% - 80px);
  object-fit: contain;
  border-radius: var(--border-radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  display: block;
  flex-shrink: 1;
}

.preview-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border: 2px solid rgba(158, 158, 158, 0.5);
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
  padding: 0.75rem;
  border-radius: var(--border-radius);
  margin-top: auto;
}

.preview-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 150px;
}
.preview-info svg {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
  flex-shrink: 0;
}

.preview-filename {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  word-break: break-word;
}

.btn-remove {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(220, 53, 69, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(220, 53, 69, 0.5);
  border-radius: var(--border-radius);
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4), 0 0 30px rgba(220, 53, 69, 0.2), inset 0 0 20px rgba(220, 53, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
}
.btn-remove:hover {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 25px rgba(220, 53, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.8));
}
.btn-remove:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.5), 0 0 20px rgba(220, 53, 69, 0.25), inset 0 0 15px rgba(220, 53, 69, 0.2);
}
.btn-remove svg {
  flex-shrink: 0;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  flex-shrink: 0;
  margin-top: auto;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border-radius: var(--border-radius);
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}
.action-btn:hover {
  transform: translateY(-2px);
}
.action-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(0, 0, 0, 0.1);
}
.action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.action-btn svg {
  flex-shrink: 0;
}
.action-btn span {
  line-height: 1.3;
}

.btn-primary {
  background: rgba(0, 123, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 123, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.4), 0 0 30px rgba(0, 123, 255, 0.2), inset 0 0 20px rgba(0, 123, 255, 0.1);
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.6));
}
.btn-primary:hover {
  background: rgba(0, 123, 255, 0.35);
  border-color: rgba(0, 123, 255, 0.8);
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 0 40px rgba(0, 123, 255, 0.3), inset 0 0 25px rgba(0, 123, 255, 0.15);
  filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.8));
}

.btn-success {
  background: rgba(40, 167, 69, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(40, 167, 69, 0.5);
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.4), 0 0 30px rgba(40, 167, 69, 0.2), inset 0 0 20px rgba(40, 167, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(40, 167, 69, 0.6));
}
.btn-success:hover {
  background: rgba(40, 167, 69, 0.35);
  border-color: rgba(40, 167, 69, 0.8);
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.6), 0 0 40px rgba(40, 167, 69, 0.3), inset 0 0 25px rgba(40, 167, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(40, 167, 69, 0.8));
}

.btn-danger {
  background: rgba(220, 53, 69, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(220, 53, 69, 0.5);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.4), 0 0 30px rgba(220, 53, 69, 0.2), inset 0 0 20px rgba(220, 53, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(220, 53, 69, 0.6));
}
.btn-danger:hover {
  background: rgba(220, 53, 69, 0.35);
  border-color: rgba(220, 53, 69, 0.8);
  box-shadow: 0 0 20px rgba(220, 53, 69, 0.6), 0 0 40px rgba(220, 53, 69, 0.3), inset 0 0 25px rgba(220, 53, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(220, 53, 69, 0.8));
}

.info-banner {
  grid-column: 1/-1;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(40, 167, 69, 0.1);
  border: 2px solid rgba(40, 167, 69, 0.3);
  border-radius: var(--border-radius);
  font-size: 0.8rem;
}
.info-banner span {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.info-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #28a745;
}

.csv-card-compact {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  border: 2px solid rgba(158, 158, 158, 0.5);
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
}
.csv-card-compact .column-title {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.csv-description-compact {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.csv-form-compact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.csv-upload-area-compact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.csv-file-label-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border: 3px dashed rgba(0, 123, 255, 0.5);
  box-shadow: 0 0 12px 2px rgba(0, 123, 255, 0.4), 0 0 24px 6px rgba(0, 123, 255, 0.25), inset 0 0 18px rgba(0, 123, 255, 0.18);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}
.csv-file-label-compact:hover {
  border-color: rgba(0, 123, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) brightness(1.15);
  -webkit-backdrop-filter: blur(20px) brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 0 16px 3px rgba(0, 123, 255, 0.55), 0 0 32px 10px rgba(0, 123, 255, 0.35), inset 0 0 22px rgba(0, 123, 255, 0.22);
}
.csv-file-label-compact svg {
  flex-shrink: 0;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
}

.csv-file-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.csv-file-info-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(76, 175, 80, 0.1);
  border: 2px solid rgba(76, 175, 80, 0.3);
  border-radius: var(--border-radius);
  color: var(--color-text-body);
  font-weight: 600;
  font-size: 0.85rem;
}
.csv-file-info-compact svg {
  color: #28a745;
  flex-shrink: 0;
}

.csv-actions-compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.csv-submit-btn-compact {
  width: 100%;
  padding: 0.75rem;
  background: rgba(40, 167, 69, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(40, 167, 69, 0.5);
  border-radius: var(--border-radius);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.4), 0 0 30px rgba(40, 167, 69, 0.2), inset 0 0 20px rgba(40, 167, 69, 0.1);
  filter: drop-shadow(0 0 8px rgba(40, 167, 69, 0.6));
}
.csv-submit-btn-compact:hover {
  background: rgba(40, 167, 69, 0.35);
  border-color: rgba(40, 167, 69, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(40, 167, 69, 0.6), 0 0 40px rgba(40, 167, 69, 0.3), inset 0 0 25px rgba(40, 167, 69, 0.15);
  filter: drop-shadow(0 0 12px rgba(40, 167, 69, 0.8));
}
.csv-submit-btn-compact:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.5), 0 0 20px rgba(40, 167, 69, 0.25), inset 0 0 15px rgba(40, 167, 69, 0.2);
}
.csv-submit-btn-compact:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.csv-example-btn-compact {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(108, 117, 125, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(108, 117, 125, 0.5);
  border-radius: var(--border-radius);
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(108, 117, 125, 0.4), 0 0 30px rgba(108, 117, 125, 0.2), inset 0 0 20px rgba(108, 117, 125, 0.1);
  filter: drop-shadow(0 0 8px rgba(108, 117, 125, 0.6));
}
.csv-example-btn-compact:hover {
  background: rgba(108, 117, 125, 0.35);
  border-color: rgba(108, 117, 125, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(108, 117, 125, 0.6), 0 0 40px rgba(108, 117, 125, 0.3), inset 0 0 25px rgba(108, 117, 125, 0.15);
  filter: drop-shadow(0 0 12px rgba(108, 117, 125, 0.8));
}
.csv-example-btn-compact:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 10px rgba(108, 117, 125, 0.5), 0 0 20px rgba(108, 117, 125, 0.25), inset 0 0 15px rgba(108, 117, 125, 0.2);
}
.csv-example-btn-compact svg {
  flex-shrink: 0;
}

.csv-instructions-compact {
  padding: 1rem;
  background: rgba(0, 123, 255, 0.05);
  border-radius: var(--border-radius);
  border-left: 3px solid var(--color-primary);
}

.csv-instructions-title-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-bottom: 0.75rem;
}
.csv-instructions-title-compact svg {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
}

.csv-instructions-list-compact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.csv-instructions-list-compact li {
  position: relative;
  padding-left: 1.25rem;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  line-height: 1.5;
  font-size: 0.8rem;
}
.csv-instructions-list-compact li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.preview-drop-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(0, 123, 255, 0.1);
  border: 2px dashed rgba(0, 123, 255, 0.3);
  border-radius: var(--border-radius);
  margin-top: 0.5rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.preview-drop-hint svg {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
  flex-shrink: 0;
}

.upload-status-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border: 2px solid rgba(158, 158, 158, 0.5);
  border-radius: var(--border-radius);
  margin-top: 1rem;
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(158, 158, 158, 0.3);
}

.status-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.status-title svg {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
}

.status-progress {
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.status-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.status-items::-webkit-scrollbar {
  width: 6px;
}
.status-items::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.status-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
.status-items::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
}
.status-item--pending {
  border-left: 3px solid rgba(108, 117, 125, 0.6);
}
.status-item--processing {
  border-left: 3px solid rgba(0, 123, 255, 0.6);
  animation: pulse 2s ease-in-out infinite;
}
.status-item--completed {
  border-left: 3px solid rgba(40, 167, 69, 0.6);
}
.status-item--failed {
  border-left: 3px solid rgba(220, 53, 69, 0.6);
}

.status-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-item--pending .status-item-icon {
  background: rgba(108, 117, 125, 0.2);
  color: rgba(255, 255, 255, 0.6);
}
.status-item--processing .status-item-icon {
  background: rgba(0, 123, 255, 0.2);
  color: #fff;
}
.status-item--completed .status-item-icon {
  background: rgba(40, 167, 69, 0.2);
  color: #4caf50;
}
.status-item--failed .status-item-icon {
  background: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}
.status-item-icon svg {
  flex-shrink: 0;
}
.status-item-icon svg.spin {
  animation: spin 1s linear infinite;
}

.status-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.status-item-filename {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-item-status {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.status-item--failed .status-item-status {
  color: #ff6b6b;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes progressSlideInUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes progressItemSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(-8px);
  }
}
@media (max-width: 1200px) {
  .image-resizer-v2-grid {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .dropzone-wrapper {
    min-height: 350px;
  }
}
@media (max-width: 1024px) {
  .image-resizer-v2-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .left-column,
  .center-column,
  .right-column {
    height: auto;
    overflow: visible;
    justify-content: flex-start;
  }
  .dropzone-wrapper {
    min-height: 300px;
  }
}
@media (max-width: 768px) {
  .image-resizer-v2-grid {
    padding: 0.75rem;
    gap: 0.75rem;
  }
  .column-title {
    font-size: 0.95rem;
  }
  .action-buttons {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .action-btn {
    font-size: 0.85rem;
    padding: 0.65rem;
  }
}
@media (max-width: 480px) {
  .image-resizer-v2-grid {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .column-title {
    font-size: 0.9rem;
  }
  .column-title svg {
    width: 18px;
    height: 18px;
  }
  .search-card,
  .upload-card,
  .product-card,
  .csv-card-compact {
    padding: 1rem;
  }
  .dropzone-wrapper {
    min-height: 250px;
  }
  .dropzone-icon {
    width: 60px;
    height: 60px;
  }
  .dropzone-title {
    font-size: 1rem;
  }
  .dropzone-text {
    font-size: 0.85rem;
  }
  .dropzone-info {
    font-size: 0.7rem;
  }
}
.upload-progress-container {
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border: 2px solid rgba(158, 158, 158, 0.5);
  box-shadow: 0 0 15px rgba(158, 158, 158, 0.4), 0 0 30px rgba(158, 158, 158, 0.2), inset 0 0 20px rgba(158, 158, 158, 0.1);
  filter: drop-shadow(0 0 8px rgba(158, 158, 158, 0.6));
  border-radius: var(--border-radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto;
  max-height: 100%;
  overflow: hidden;
  animation: progressSlideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.upload-progress-container.no-animation {
  animation: none;
}

.progress-header {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}
.progress-header h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.progress-header h3 svg {
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 123, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 123, 255, 0.6));
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.progress-product-info {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: calc(var(--border-radius) - 2px);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.progress-product-info .progress-product-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.progress-product-info .progress-product-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.progress-product-info .product-detail-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.progress-product-info .product-detail-item strong {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}
.progress-product-info .product-link {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: rgb(100, 181, 246);
  transition: all 0.2s ease;
}
.progress-product-info .product-link svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 4px rgba(100, 181, 246, 0.6));
}
.progress-product-info .product-link:hover {
  color: rgb(129, 212, 250);
  transform: translateY(-1px);
}
.progress-product-info .product-link:hover svg {
  filter: drop-shadow(0 0 8px rgba(100, 181, 246, 0.9));
}

.progress-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: calc(var(--border-radius) - 2px);
  gap: 1rem;
}

.progress-count {
  color: #fff;
  font-size: 1rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.progress-count strong {
  font-size: 1.1rem;
}

.progress-status {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.progress-status.status-processing {
  color: rgb(100, 181, 246);
}
.progress-status.status-complete {
  color: rgb(129, 199, 132);
}
.progress-status.status-error {
  color: rgb(239, 83, 80);
}

.progress-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 123, 255, 0.6) rgba(0, 0, 0, 0.2);
}
.progress-list::-webkit-scrollbar {
  width: 10px;
}
.progress-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  backdrop-filter: blur(10px);
}
.progress-list::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.6) 0%, rgba(0, 180, 120, 0.6) 100%);
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
.progress-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.8) 0%, rgba(0, 180, 120, 0.8) 100%);
}

.progress-item {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px) brightness(1.1);
  -webkit-backdrop-filter: blur(15px) brightness(1.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: calc(var(--border-radius) - 2px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: all 0.3s ease;
  opacity: 0;
  animation: progressItemSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.progress-item:nth-child(1) {
  animation-delay: 0s;
}
.progress-item:nth-child(2) {
  animation-delay: 0.05s;
}
.progress-item:nth-child(3) {
  animation-delay: 0.1s;
}
.progress-item:nth-child(4) {
  animation-delay: 0.15s;
}
.progress-item:nth-child(5) {
  animation-delay: 0.2s;
}
.progress-item:nth-child(6) {
  animation-delay: 0.25s;
}
.progress-item:nth-child(7) {
  animation-delay: 0.3s;
}
.progress-item:nth-child(8) {
  animation-delay: 0.35s;
}
.progress-item:nth-child(9) {
  animation-delay: 0.4s;
}
.progress-item:nth-child(10) {
  animation-delay: 0.45s;
}
.progress-item:hover {
  border-color: rgba(0, 123, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 0 12px 2px rgba(0, 123, 255, 0.3), 0 0 24px 6px rgba(0, 123, 255, 0.15);
}

.progress-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.progress-item-filename {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.progress-item-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.progress-item-status.status-pending {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(158, 158, 158, 0.3);
}
.progress-item-status.status-uploading {
  color: rgb(100, 181, 246);
  background: rgba(100, 181, 246, 0.2);
  animation: pulse 2s ease-in-out infinite;
}
.progress-item-status.status-success {
  color: rgb(129, 199, 132);
  background: rgba(129, 199, 132, 0.2);
}
.progress-item-status.status-error {
  color: rgb(239, 83, 80);
  background: rgba(239, 83, 80, 0.2);
}

.progress-item-message {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  margin-top: 0.25rem;
}

.progress-item-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.progress-item-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.8) 0%, rgba(0, 180, 120, 0.8) 100%);
  transition: width 0.3s ease;
  border-radius: 3px;
}

.progress-footer {
  flex-shrink: 0;
  padding-top: 1rem;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
}

.lp_index {
  display: grid;
  grid-template-columns: 4fr 1fr 2fr 2fr;
  color: white;
  text-align: left;
  height: 85vh;
  overflow-y: scroll;
  margin: 0.25em;
  width: 100%;
}

.lptop {
  position: sticky;
  top: 0;
  grid-column: 1/8;
  display: grid;
  grid-template-columns: 4fr 1fr 2fr 2fr;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  padding: 1rem;
  color: black;
  border-radius: 0.5rem;
  z-index: 1;
  width: 100%;
}

.the_lpprods {
  grid-column: 1/8;
  display: grid;
  grid-template-columns: 4fr 1fr 2fr 2fr;
  background-color: rgba(255, 255, 255, 0.95);
  grid-row-gap: 0.5em;
  padding: 0.25rem;
  margin: 0.12rem;
  border-radius: 0.5rem;
  color: darkblue;
}

.sort {
  position: absolute;
  top: 1rem;
  left: 0.5rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.sort-desc {
  border-top: 6px solid white;
}

.sort-asc {
  border-bottom: 6px solid white;
}

.search_former {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  color: white;
  margin: 0.25em;
  place-items: center center;
  place-content: center center;
}

#products {
  display: grid;
  grid-row-gap: 0.25rem;
  width: 100%;
}

.selected-highlight {
  background-color: peachpuff !important;
  border: 4px solid lightcoral !important; /* A border to make it pop */
}

.the_list {
  display: grid;
  grid-row-gap: 0.25rem;
}

.resu {
  font-size: 0.9rem;
}

.cont_inter {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 20px;
}

.grid-two-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.items_box {
  display: grid;
  grid-row-gap: 1rem;
  height: 82vh;
  overflow-y: auto;
}

.pager {
  justify-self: center;
}

.grid-one-column {
  display: grid;
  grid-template-columns: 1fr;
}

.the_item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0.25rem;
  grid-gap: 5px;
}

.the_item_title {
  font-size: 1rem;
  font-weight: bolder;
}

.the_item_details {
  display: grid;
  width: 100%;
}

.the_item_infobox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.the_item_label {
  color: darkred;
  font-weight: bold;
}

.the_item_price {
  color: darkgreen;
  justify-self: right;
  align-self: center;
  font-weight: bold;
}

.the_item_cost {
  color: darkred;
  justify-self: right;
  align-self: center;
  font-weight: bold;
}

.the_item_top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-items: center;
  width: 100%;
  grid-column: 1/3;
}

.the_item_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  justify-items: center;
  align-items: center;
  background-color: var(--color-dark) !important;
}

.the_image_item {
  display: grid;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0.25rem;
}

.the_image_item_top {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  justify-items: center;
  width: 100%;
  grid-column: 1/3;
}

.the_image_item_infobox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.the_image_item_bottom {
  display: grid;
  grid-template-columns: 3fr auto 3fr;
  width: 100%;
  grid-column: 1/3;
}

.the_image_item_lightspeed {
  text-align: center;
}

.the_image_item_shopify {
  text-align: center;
}

.the_image_image img {
  max-height: 40vh;
}

.the_image_wrap {
  display: grid;
}

.swiper-container {
  max-width: 100%; /* Limit the width of the carousel */
  overflow: hidden; /* Prevent images from stretching the carousel */
}

.swiper-slide {
  width: 33.33%; /* Each slide will take up a third of the carousel's width */
}

.the_image {
  max-width: 100%; /* Ensure the image does not stretch beyond its container */
  height: auto; /* Maintain aspect ratio */
}

.lab {
  /*width: 100%;*/
  /*text-orientation: upright;*/
  /*writing-mode: vertical-rl;*/
}

.formbox {
  place-self: center;
  display: grid;
  place-items: center;
  backdrop-filter: blur(40px) opacity(80%);
  padding: 2em;
}

.nosale {
  align-content: center;
  justify-content: center;
  display: grid;
  height: 100%;
}

.loading-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* or any specific height you want */
}

.recommended-product.shopify_style {
  background-color: rgba(65, 105, 225, 0.8); /* Royal blue with 80% opacity */
}

.on-purchase-order {
  background-color: lightyellow !important;
}

.recommended {
  color: rgb(65, 105, 225);
  font-weight: bold;
}

.inlines {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
}

.purchase_order__body {
  padding: 10px;
}

.purchase_order__footer {
  background-color: #f5f5f5;
  padding: 10px;
}

.purchase_order_header {
  background-color: #f5f5f5;
  padding: 2vh;
  text-align: center;
}

.purchase_order_header__title {
  text-align: center;
  display: grid;
  place-items: center center;
}

.purchase_order_container {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-column-gap: 0.5rem;
}

.purchase_order_line {
  display: grid;
  grid-template-columns: 2fr 6fr 1fr 2fr 1fr;
  text-align: center;
  align-items: center;
  justify-items: center;
}

.center-text {
  text-align: center;
}

.truncate-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Change this to the number of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.total-cost-container {
  display: flex;
  justify-content: center;
  text-align: right;
  white-space: nowrap;
  padding: 10px;
}

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

.purchase_order_lines_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.purchase_order_line_header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-weight: bold;
}

.delete-button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px; /* Adjust font size if needed */
  line-height: 1; /* Ensure the text is vertically centered */
}
.delete-button:hover {
  background-color: #ff1a1a;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.the_item.in-purchase-order {
  background-color: #333; /* Darker grey background */
}

.purchase_order_line.highlighted {
  background-color: #ffeb3b; /* Highlight color */
}

.the_item.highlight {
  background-color: #ffeb3b; /* Highlight color */
}

#purchase-order-button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#purchase_orders {
  height: 81vh;
  overflow-y: auto;
}

.purchase_order_line p[title] {
  position: relative;
}

.purch_top {
  transition: height 0.5s ease;
}

.print-order-form, .shopify_styler {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 500px;
  margin: 1.5rem auto 0;
}
.print-order-form .form-group, .shopify_styler .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.print-order-form .form-group label, .shopify_styler .form-group label {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-weight: 600;
  font-size: 1rem;
}
.print-order-form .modern-input, .shopify_styler .modern-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid rgba(0, 123, 255, 0.45);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px) brightness(1.05);
  -webkit-backdrop-filter: blur(12px) brightness(1.05);
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  transition: all 0.25s ease;
  box-shadow: 0 0 12px rgba(0, 123, 255, 0.35), 0 0 22px rgba(0, 123, 255, 0.2), inset 0 0 14px rgba(0, 123, 255, 0.08);
  caret-color: #fff;
}
.print-order-form .modern-input::placeholder, .shopify_styler .modern-input::placeholder {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.print-order-form .modern-input:hover, .shopify_styler .modern-input:hover {
  border-color: rgba(0, 123, 255, 0.65);
  box-shadow: 0 0 14px rgba(0, 123, 255, 0.45), 0 0 28px rgba(0, 123, 255, 0.25), inset 0 0 18px rgba(0, 123, 255, 0.1);
}
.print-order-form .modern-input:focus, .shopify_styler .modern-input:focus {
  outline: none;
  border-color: rgba(0, 123, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 18px rgba(0, 123, 255, 0.6), 0 0 34px rgba(0, 123, 255, 0.35), inset 0 0 22px rgba(0, 123, 255, 0.12);
}
.print-order-form button[type=submit], .shopify_styler button[type=submit] {
  margin-top: 0.5rem;
}

.info-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px) brightness(1.05);
  -webkit-backdrop-filter: blur(10px) brightness(1.05);
  border-radius: var(--border-radius);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), inset 0 0 15px rgba(255, 255, 255, 0.05);
}
.info-section h3 {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.info-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.info-section ul li {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.info-section ul li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: rgba(0, 123, 255, 0.8);
  font-size: 1.5rem;
  line-height: 1.2;
}
.info-section ul li a {
  color: rgba(0, 123, 255, 0.9);
  text-decoration: none;
  transition: all 0.3s ease;
  text-shadow: 0 0 8px rgba(0, 123, 255, 0.6), 0 0 15px rgba(0, 123, 255, 0.4), 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.info-section ul li a:hover {
  color: rgb(0, 123, 255);
  text-shadow: 0 0 12px rgba(0, 123, 255, 0.8), 0 0 20px rgba(0, 123, 255, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
  text-decoration: underline;
}

.grapher {
  backdrop-filter: blur(10px);
  display: grid;
  grid-template-columns: 1% 98% 1%;
  text-align: center;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  border-radius: 10px;
}

.graph_container {
  grid-column: 2/3;
  display: grid;
  grid-template-rows: 1fr 1fr 8fr;
  width: 100%;
  border: 1px solid black;
  border-radius: 10px;
}

.years, .thecharts, .thelabels, thelabels2, .yearsback {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-column-gap: 2px;
  width: 100%;
  height: 100%;
  text-align: center;
  backdrop-filter: blur(40px) opacity(80%);
  place-items: center;
  color: white;
  grid-column: 1/2;
}

.years {
  grid-row: 1/2;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px 10px 0 0;
}

.thecharts {
  grid-row: 3/4;
  place-items: end center;
  border-radius: 0 0 10px 10px;
}

.thelabels {
  grid-row: 2/3;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 10px 10px;
}

.thelabels2 {
  grid-row: 4/5;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 10px 10px;
}

.yearsback {
  grid-row: 1/4;
  z-index: -1;
  border-radius: 10px;
}

.bar {
  background-color: white;
  width: 100%;
  display: grid;
  align-content: end;
  transition: height 2s;
  font-weight: bold;
  color: black;
  height: 0;
  border-radius: 10px;
}

.oneyearback {
  height: 100%;
  width: 100%;
}

.oneyearback:nth-child(odd) {
  background-color: rgba(100, 100, 100, 0.5);
  border-radius: 10px 10px 0 0;
}

.oneyearback:nth-child(even) {
  background-color: rgba(200, 200, 200, 0.5);
  border-radius: 10px 10px 0 0;
}

.oneyearback::before {
  content: "\2";
}

.vendor-import-page {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m) 0 var(--space-xl);
}

main.container.container--auto-height {
  height: auto;
  align-self: start;
}

body.body--vendor-products {
  grid-template-rows: auto minmax(0, 1fr);
}

@keyframes vendorImportFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes vendorImportSoftPop {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes vendorImportPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.08);
  }
}
.vendor-import-browser,
.vendor-import-queue,
.vendor-import-linked-tools,
.vendor-import-toolbar,
.vendor-import-browser__empty-state,
.vendor-product-card {
  display: grid;
  gap: var(--space-s);
  animation: vendorImportFadeUp 480ms ease both;
}

.vendor-import-browser,
.vendor-import-queue,
.vendor-import-linked-tools,
.vendor-import-toolbar,
.vendor-import-browser__empty-state {
  padding: var(--space-m);
}

.vendor-import-browser__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
}

.vendor-import-browser__header-title {
  flex: 1 1 260px;
  display: grid;
  gap: var(--space-xxxs);
}

.vendor-import-browser__eyebrow {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vendor-import-browser h1,
.vendor-import-browser h2,
.vendor-import-toolbar h2,
.vendor-import-queue h2,
.vendor-import-browser__empty-state h2,
.vendor-product-card h2,
.vendor-product-card h3,
.vendor-product-card p,
.vendor-import-queue p {
  margin: 0;
  color: var(--color-dark);
}

.vendor-import-browser__intro,
.vendor-import-toolbar p,
.vendor-import-queue__summary,
.vendor-import-queue__empty,
.vendor-product-card__sku,
.vendor-product-card__status-box p,
.vendor-product-card__existing-note,
.vendor-product-card__defaults-hint {
  color: var(--color-text-body);
}

.vendor-import-browser__stats {
  display: flex;
  gap: var(--space-xs);
}

.vendor-import-browser__stat,
.vendor-import-queue__item,
.vendor-product-card__status-box,
.vendor-product-card__existing-note,
.vendor-product-card__facts-section,
.vendor-product-card__comparison-section,
.vendor-product-card__description-section {
  padding: var(--space-s);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: var(--shadow-small);
  background-color: rgba(255, 255, 255, 0.55);
}

.vendor-import-browser__stat span {
  display: inline;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.vendor-import-browser__stat span::after {
  content: ": ";
}

.vendor-import-browser__stat strong {
  color: var(--color-dark);
  font-size: var(--font-size-xs);
}

.vendor-import-browser__toolbar {
  position: sticky;
  top: var(--navbar-height, 48px);
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-xs);
  margin-bottom: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: var(--shadow-small);
}
.vendor-import-browser__toolbar .vendor-import-browser__field {
  flex: 0 1 auto;
  min-width: 140px;
}
.vendor-import-browser__toolbar .vendor-import-browser__field--search {
  flex: 3 1 280px;
  min-width: 200px;
}
.vendor-import-browser__toolbar .vendor-import-browser__toggle {
  flex: 0 1 auto;
  white-space: nowrap;
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.45);
  color: var(--color-dark);
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
}
.vendor-import-browser__toolbar .vendor-import-browser__toggle input[type=checkbox] {
  width: 13px;
  height: 13px;
  margin: 0;
}
.vendor-import-browser__toolbar .btn {
  white-space: nowrap;
}

.vendor-import-browser__toolbar label {
  display: block;
  text-align: center;
  font-weight: bold;
}

.vendor-import-browser__field {
  min-width: 0;
}

.vendor-import-browser__field--search {
  flex: 2 1 320px;
}

.vendor-import-browser__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 1 1 auto;
  padding: var(--space-xs) var(--space-s);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.45);
  color: var(--color-dark);
}

.vendor-import-browser__actions,
.vendor-import-linked-tools__actions,
.vendor-import-toolbar__actions,
.vendor-import-queue__header,
.vendor-import-queue__item-top,
.vendor-product-card__topbar,
.vendor-product-card__section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.vendor-product-card__description-heading-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.vendor-product-card__description-source {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: 2px var(--space-xxs);
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.05);
}

.vendor-product-card__research-btn {
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: var(--font-size-m);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.vendor-product-card__research-btn:hover {
  color: var(--color-primary-rotate);
  background-color: rgba(0, 0, 0, 0.06);
}
.vendor-product-card__research-btn.is-loading {
  animation: vendorImportPulseGlow 1.2s ease infinite;
  pointer-events: none;
}

.vendor-product-card__description-status-badge {
  font-size: var(--font-size-xs);
  padding: 2px var(--space-xxs);
  border-radius: 999px;
  background-color: rgba(101, 163, 13, 0.18);
  color: var(--color-dark);
}
.vendor-product-card__description-status-badge[hidden] {
  display: none;
}
.vendor-product-card__description-status-badge.is-generating {
  background-color: rgba(59, 130, 246, 0.18);
  animation: vendorImportPulseGlow 1.2s ease infinite;
}

.vendor-product-card__description.is-updated {
  animation: vendorDescriptionUpdatedFlash 1.8s ease;
}

@keyframes vendorDescriptionUpdatedFlash {
  0% {
    background-color: rgba(101, 163, 13, 0.28);
  }
  100% {
    background-color: transparent;
  }
}
.vendor-product-card__desc-form {
  display: grid;
  gap: var(--space-xs);
}
.vendor-product-card__desc-form textarea {
  width: 100%;
}
.vendor-product-card__desc-form[hidden] {
  display: none;
}

.vendor-product-card__desc-form-actions {
  display: flex;
  gap: var(--space-xs);
}

.vendor-import-linked-tools__actions,
.vendor-import-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-s);
}

.vendor-product-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.vendor-product-card__category-picker-section {
  display: grid;
  gap: var(--space-xs);
}

.vendor-product-card__category-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}
.vendor-product-card__category-main .vendor-product-card__defaults-hint {
  margin: 0;
}

.vendor-product-card__category-alternates {
  text-align: right;
}

.vendor-product-card__category-picker {
  margin-top: var(--space-xxs);
}

.vendor-product-card__category-picker label {
  display: block;
  margin-bottom: var(--space-xxxs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.vendor-import-browser__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.vendor-import-browser__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  animation: vendorImportSoftPop 360ms ease both;
}
.vendor-import-browser__chip strong {
  display: inline-flex;
  min-width: 1.5rem;
  justify-content: center;
  padding: 0 var(--space-xxxs);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--color-dark);
}
.vendor-import-browser__chip.is-active {
  box-shadow: 0 0 0 2px var(--color-glint), var(--shadow-small);
}

.vendor-import-browser__chip:hover,
.vendor-import-browser__chip:focus-visible {
  transform: translateY(-1px);
}

.vendor-import-linked-tools {
  display: grid;
  gap: var(--space-s);
}

.vendor-import-linked-tools p {
  margin: 0;
  color: var(--color-text-body);
  transition: color 180ms ease, opacity 180ms ease, transform 220ms ease;
}

.vendor-import-linked-tools__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.vendor-import-linked-tools__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xxxs) var(--space-s);
  border-radius: 999px;
  border: var(--border);
  background-color: rgba(255, 255, 255, 0.62);
  color: var(--color-dark);
  font-size: var(--font-size-xs);
  font-weight: 600;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
  animation: vendorImportSoftPop 380ms ease both;
}
.vendor-import-linked-tools__badge strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  padding: 0 var(--space-xxxs);
  border-radius: 999px;
  background-color: rgba(59, 130, 246, 0.14);
  color: var(--color-dark);
}

.vendor-import-linked-tools__badge:hover,
.vendor-import-linked-tools__badge:focus-within {
  transform: translateY(-1px);
  box-shadow: var(--shadow-small);
}

.vendor-import-linked-tools__hint {
  color: var(--color-text-body);
}

.vendor-import-browser__presets,
.vendor-import-browser__presets-header,
.vendor-import-browser__presets-form,
.vendor-import-browser__presets-list,
.vendor-import-browser__preset-card,
.vendor-import-browser__preset-copy,
.vendor-import-browser__preset-actions {
  display: grid;
  gap: var(--space-xs);
}

.vendor-import-browser__presets {
  padding: var(--space-s);
  border-radius: var(--border-radius);
  border: var(--border);
  background-color: rgba(255, 255, 255, 0.42);
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.vendor-import-browser__presets-form {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}

.vendor-import-browser__presets-status,
.vendor-import-browser__presets-empty,
.vendor-import-browser__preset-copy p,
.vendor-import-toolbar__mode,
.vendor-import-queue__item-bottom small {
  margin: 0;
  color: var(--color-text-body);
}

.vendor-import-browser__presets-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.vendor-import-browser__preset-card {
  padding: var(--space-s);
  border-radius: var(--border-radius);
  border: var(--border);
  background-color: rgba(255, 255, 255, 0.58);
  box-shadow: var(--shadow-small);
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
  animation: vendorImportSoftPop 420ms ease both;
}
.vendor-import-browser__preset-card.is-active {
  box-shadow: 0 0 0 2px var(--color-glint), var(--shadow-small);
}

.vendor-import-browser__preset-card:hover,
.vendor-import-browser__preset-card:focus-within {
  transform: translateY(-2px);
}

.vendor-import-browser__preset-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vendor-import-browser__preset-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: var(--space-xxxs) var(--space-s);
  background-color: rgba(59, 130, 246, 0.14);
  color: var(--color-dark);
  font-size: var(--font-size-xs);
  font-weight: bold;
}

.vendor-products-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

.pagination-container {
  justify-self: center;
  padding: var(--space-s) 0 var(--space-xl);
}

.vendor-import-browser__pagination-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}

.vendor-import-browser__pagination-status {
  color: var(--color-text-body);
}

.vendor-import-browser__load-more {
  min-width: 12rem;
}

.vendor-import-browser__end-message {
  color: var(--color-text-muted);
  text-align: center;
}

.btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.vendor-import-toolbar {
  position: sticky;
  top: 0.5rem;
  z-index: 15;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.vendor-product-card {
  padding: var(--space-m);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: var(--shadow-large);
  background-color: var(--color-background2);
  color: var(--color-dark);
  backdrop-filter: blur(25px);
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.vendor-product-card.is-selected {
  box-shadow: 0 0 0 2px var(--color-glint), var(--shadow-large);
  transform: translateY(-1px);
}
.vendor-product-card.is-focused {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45), var(--shadow-large);
}
.vendor-product-card.is-imported {
  opacity: 0;
  transform: scale(0.985);
}
.vendor-product-card[hidden] {
  display: none;
}

.vendor-products-container > .vendor-product-card {
  animation-duration: 520ms;
}

.vendor-products-container > .vendor-product-card:nth-child(2n) {
  animation-delay: 40ms;
}

.vendor-products-container > .vendor-product-card:nth-child(3n) {
  animation-delay: 80ms;
}

.vendor-products-container > .vendor-product-card:nth-child(4n) {
  animation-delay: 120ms;
}

.vendor-product-card__selector,
.vendor-product-card__vendor,
.vendor-product-card__readiness,
.vendor-product-card__chip,
.vendor-product-card__status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxxs);
  border-radius: 999px;
  padding: var(--space-xxxs) var(--space-s);
  font-size: var(--font-size-xs);
  font-weight: bold;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.vendor-product-card__selector,
.vendor-product-card__vendor {
  border: var(--border);
  background-color: rgba(255, 255, 255, 0.65);
}

.vendor-product-card__selector input {
  margin: 0;
}

.vendor-product-card__selector--inline {
  margin-left: auto;
}

.vendor-product-card__readiness--ready,
.vendor-product-card__chip.is-success,
.vendor-product-card__status-pill.is-success {
  background-color: rgba(101, 163, 13, 0.18);
  color: var(--color-dark);
}

.vendor-product-card__readiness--warning,
.vendor-product-card__chip.is-warning,
.vendor-product-card__status-pill.is-partial_success,
.vendor-product-card__status-pill.is-uploading_image,
.vendor-product-card__status-pill.is-finalizing {
  background-color: rgba(245, 158, 11, 0.18);
  color: var(--color-dark);
}

.vendor-product-card__chip.is-danger,
.vendor-product-card__status-pill.is-failed,
.vendor-product-card__status-pill.is-not_found {
  background-color: rgba(220, 38, 38, 0.14);
  color: var(--color-dark);
}

.vendor-product-card__status-pill.is-idle,
.vendor-product-card__status-pill.is-queued,
.vendor-product-card__status-pill.is-processing,
.vendor-product-card__status-pill.is-evaluating_sync,
.vendor-product-card__status-pill.is-checking_duplicates,
.vendor-product-card__status-pill.is-inferring_defaults,
.vendor-product-card__status-pill.is-creating,
.vendor-product-card__status-pill.is-syncing {
  background-color: rgba(59, 130, 246, 0.14);
  color: var(--color-dark);
}

.vendor-product-card__layout {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
}

.vendor-product-card__media-column,
.vendor-product-card__content,
.vendor-product-card__facts,
.vendor-product-card__comparison-grid,
.vendor-import-queue__list {
  display: grid;
  gap: var(--space-xs);
}

.vendor-product-card__media-column > * {
  min-width: 0;
}

.vendor-product-card__image-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 190px;
  padding: var(--space-xxs);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  flex-shrink: 0;
}

.vendor-product-card__image-wrap {
  position: relative;
  width: 150px;
}

.vendor-product-card__image-popout {
  display: none;
  position: absolute;
  width: 420px;
  z-index: 100;
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
  padding: var(--space-xxs);
  background-color: #fff;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.vendor-product-card__image-popout-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.vendor-product-card__image,
.vendor-product-card__image-placeholder {
  width: 100%;
  height: 100%;
}

.vendor-product-card__image {
  object-fit: contain;
}

.vendor-product-card__image-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.vendor-product-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-s);
  border-top: var(--border);
}

.vendor-product-card__footer .vendor-product-card__action-form {
  flex: 0 0 auto;
}

.vendor-product-card__media-column .vendor-product-card__action-form {
  flex: 1 1 100%;
}

.vendor-product-card__media-column .vendor-product-card__button {
  width: 100%;
  white-space: normal;
  font-size: var(--font-size-xs);
  line-height: 1.25;
}

.vendor-product-card__button {
  white-space: nowrap;
}

.vendor-product-card__button.is-loading {
  opacity: 0.75;
  animation: vendorImportPulseGlow 1.2s ease infinite;
}

.vendor-product-card__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-s);
}

.vendor-product-card__title-col {
  min-width: 0;
}

.vendor-product-card__availability {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  justify-content: flex-end;
}

.vendor-product-card__facts {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.vendor-product-card__facts div {
  display: grid;
  gap: var(--space-xxxs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--border-radius);
  border: var(--border);
  box-shadow: var(--shadow-small);
  background-color: rgba(255, 255, 255, 0.55);
}

.vendor-product-card__facts dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  font-weight: bold;
}

.vendor-product-card__facts dd {
  margin: 0;
  color: var(--color-dark);
  word-break: break-word;
}

.vendor-product-card__price-value {
  color: #15803d;
  font-weight: bold;
}

.vendor-product-card__weight-value {
  color: var(--color-dark);
}

.vendor-product-card__default-badge {
  display: inline-block;
  margin-left: var(--space-xxs);
  padding: 1px var(--space-xxs);
  border-radius: 999px;
  background-color: rgba(245, 158, 11, 0.18);
  color: #92400e;
  font-size: var(--font-size-xs);
  font-weight: bold;
  vertical-align: middle;
}

.vendor-product-card__exchange-value {
  color: #2563eb;
  font-weight: bold;
}

.vendor-product-card__exchange-label,
.vendor-product-card__price-op {
  color: var(--color-dark);
}

.vendor-product-card__fact--nowrap {
  grid-column: span 2;
  width: fit-content;
  max-width: 100%;
  justify-self: start;
}
.vendor-product-card__fact--nowrap dd {
  white-space: nowrap;
}

.vendor-product-card__fact--wide {
  grid-column: span 2;
  justify-self: stretch;
}

.vendor-product-card__fact--hoverable dd {
  position: relative;
  cursor: default;
}

.vendor-product-card__fact-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vendor-product-card__fact-popout {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-xxs);
  max-width: 420px;
  padding: var(--space-xs) var(--space-s);
  background-color: #fff;
  border: var(--border);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  z-index: 100;
  pointer-events: none;
  word-break: break-word;
}

.vendor-product-card__fact--hoverable dd:hover .vendor-product-card__fact-popout {
  display: block;
}

.vendor-product-card__import-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-m);
  align-items: start;
}

.vendor-product-card__import-col {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}
.vendor-product-card__import-col h4 {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
  padding-bottom: var(--space-xxxs);
  border-bottom: var(--border);
}

.vendor-product-card__import-col--editable {
  background-color: rgba(255, 255, 255, 0.55);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: var(--space-s);
}

.vendor-product-card__editable-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: center;
}
.vendor-product-card__editable-row .vendor-product-card__editable-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  font-weight: bold;
}

.vendor-product-card__editable-display {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  min-width: 0;
}

.vendor-product-card__editable-value {
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.vendor-product-card__edit-btn {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 180ms ease, background-color 180ms ease;
}
.vendor-product-card__edit-btn:hover {
  color: var(--color-dark);
  background-color: rgba(0, 0, 0, 0.06);
}

.vendor-product-card__editable-form {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  min-width: 0;
}
.vendor-product-card__editable-form input {
  flex: 1;
  min-width: 0;
}
.vendor-product-card__editable-form[hidden] {
  display: none;
}

.vendor-product-card__editable-display[hidden] {
  display: none;
}

.vendor-product-card__edit-save,
.vendor-product-card__edit-cancel {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  white-space: nowrap;
}

.vendor-product-card__description {
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  padding: var(--space-xxs) var(--space-xs);
  margin: calc(var(--space-xxs) * -1) calc(var(--space-xs) * -1);
  border-radius: 6px;
}

.vendor-product-card__comparison-summary,
.vendor-product-card__comparison-row header,
.vendor-product-card__comparison-values {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
}

.vendor-product-card__comparison-summary {
  cursor: pointer;
  list-style: none;
}
.vendor-product-card__comparison-summary::-webkit-details-marker {
  display: none;
}
.vendor-product-card__comparison-summary p,
.vendor-product-card__comparison-summary h3 {
  margin: 0;
}

.vendor-product-card__comparison-grid {
  margin-top: var(--space-s);
}

.vendor-product-card__comparison-row {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-s);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.46);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
  animation: vendorImportSoftPop 420ms ease both;
}
.vendor-product-card__comparison-row h4,
.vendor-product-card__comparison-row p,
.vendor-product-card__comparison-row strong {
  margin: 0;
}
.vendor-product-card__comparison-row.is-changed {
  border-color: rgba(245, 158, 11, 0.35);
}
.vendor-product-card__comparison-row.is-missing-vendor {
  border-color: rgba(220, 38, 38, 0.22);
}
.vendor-product-card__comparison-row.is-missing-existing {
  border-color: rgba(59, 130, 246, 0.24);
}
.vendor-product-card__comparison-row.is-same {
  border-color: rgba(101, 163, 13, 0.25);
}

.vendor-product-card__comparison-row:hover,
.vendor-product-card__comparison-row:focus-within {
  transform: translateY(-1px);
  box-shadow: var(--shadow-small);
}

.vendor-product-card__comparison-values {
  align-items: stretch;
}
.vendor-product-card__comparison-values > div {
  flex: 1 1 220px;
  display: grid;
  gap: var(--space-xxxs);
}
.vendor-product-card__comparison-values p {
  color: var(--color-text-body);
  word-break: break-word;
}

.vendor-product-card__comparison-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xxxs);
  border-radius: 999px;
  padding: var(--space-xxxs) var(--space-s);
  font-size: var(--font-size-xs);
  font-weight: bold;
}
.vendor-product-card__comparison-pill.is-same {
  background-color: rgba(101, 163, 13, 0.18);
  color: var(--color-dark);
}
.vendor-product-card__comparison-pill.is-changed {
  background-color: rgba(245, 158, 11, 0.18);
  color: var(--color-dark);
}
.vendor-product-card__comparison-pill.is-missing-vendor {
  background-color: rgba(220, 38, 38, 0.14);
  color: var(--color-dark);
}
.vendor-product-card__comparison-pill.is-missing-existing {
  background-color: rgba(59, 130, 246, 0.14);
  color: var(--color-dark);
}

.vendor-product-card__missing-copy {
  color: var(--color-primary);
}

.vendor-product-card__defaults-hint {
  padding-top: var(--space-xxxs);
  border-top: 1px solid var(--color-light);
}

.vendor-product-card__audio-accordion {
  margin-top: var(--space-s);
  border-top: 1px solid var(--color-light);
  padding-top: var(--space-xs);
}
.vendor-product-card__audio-accordion summary {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  list-style: none;
  font-weight: bold;
  color: var(--color-dark);
  font-size: var(--font-size-sm);
  user-select: none;
}
.vendor-product-card__audio-accordion summary::-webkit-details-marker {
  display: none;
}
.vendor-product-card__audio-accordion[open] .vendor-product-card__audio-toggle {
  transform: rotate(45deg);
}

.vendor-product-card__audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.06);
  font-weight: bold;
  transition: transform 180ms ease;
}

.vendor-product-card__audio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 280px));
  gap: var(--space-s);
  padding-top: var(--space-xs);
}

.vendor-product-card__audio-track {
  display: grid;
  gap: var(--space-xxxs);
  align-items: start;
}

.vendor-product-card__audio-name {
  font-size: var(--font-size-sm);
  color: var(--color-dark);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vendor-product-card__audio-player {
  width: 100%;
  height: 32px;
}

.vendor-import-queue__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vendor-import-queue__item strong,
.vendor-import-queue__item span,
.vendor-import-queue__item p {
  color: var(--color-dark);
}

.vendor-import-queue__item span {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

.vendor-import-queue__item {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
  animation: vendorImportSoftPop 420ms ease both;
}

.vendor-import-queue__item:hover,
.vendor-import-queue__item:focus-within {
  transform: translateY(-1px);
  box-shadow: var(--shadow-small);
}

.vendor-import-queue__item-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}

.vendor-import-queue__jump {
  border: var(--border);
  border-radius: 999px;
  padding: var(--space-xxxs) var(--space-s);
  background-color: rgba(255, 255, 255, 0.72);
  color: var(--color-dark);
  font-size: var(--font-size-xs);
  font-weight: bold;
  cursor: pointer;
}

.vendor-import-queue__jump:hover,
.vendor-import-queue__jump:focus-visible {
  box-shadow: 0 0 0 2px var(--color-glint);
  outline: none;
}

.vendor-import-queue__item.is-success,
.vendor-import-queue__item.is-partial_success {
  border-color: rgba(101, 163, 13, 0.25);
}

.vendor-import-queue__item.is-failed,
.vendor-import-queue__item.is-not_found {
  border-color: rgba(220, 38, 38, 0.2);
}

.vendor-import-queue__item.is-queued,
.vendor-import-queue__item.is-processing,
.vendor-import-queue__item.is-evaluating_sync,
.vendor-import-queue__item.is-checking_duplicates,
.vendor-import-queue__item.is-inferring_defaults,
.vendor-import-queue__item.is-creating,
.vendor-import-queue__item.is-syncing,
.vendor-import-queue__item.is-uploading_image,
.vendor-import-queue__item.is-finalizing {
  border-color: rgba(59, 130, 246, 0.2);
}

.vendor-import-browser__empty-state {
  text-align: center;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--border-radius);
  border: var(--border);
  background-color: rgba(255, 255, 255, 0.38);
}

.btn-group__label {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 62px;
}

.vendor-import-presets-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  list-style: none;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--border-radius);
  border: var(--border);
  background-color: rgba(255, 255, 255, 0.42);
  font-size: var(--font-size-s);
  font-weight: 600;
  color: var(--color-dark);
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.vendor-import-presets-toggle::-webkit-details-marker {
  display: none;
}
.vendor-import-presets-toggle .vendor-import-presets-toggle__icon {
  transition: transform 200ms ease;
}

details[open] .vendor-import-presets-toggle .vendor-import-presets-toggle__icon {
  transform: rotate(90deg);
}

.vendor-import-presets-toggle:hover {
  background-color: rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow-small);
}

.vendor-product-card__field-label {
  margin: 0 !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--color-text-muted) !important;
}

.vendor-product-card__facts-section h3,
.vendor-product-card__description-section h3,
.vendor-product-card__comparison-section h3 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.vendor-product-card__facts-section h3::before,
.vendor-product-card__description-section h3::before,
.vendor-product-card__comparison-section h3::before {
  content: "";
  display: block;
  width: 3px;
  height: 1em;
  border-radius: 2px;
  background-color: var(--color-primary, rgba(59, 130, 246, 0.7));
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .vendor-import-browser__presets-form {
    grid-template-columns: 1fr;
  }
  .vendor-product-card__layout {
    grid-template-columns: 1fr;
  }
  .vendor-product-card__image-shell {
    width: 100%;
    height: 200px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vendor-import-browser,
  .vendor-import-queue,
  .vendor-import-linked-tools,
  .vendor-import-toolbar,
  .vendor-import-browser__empty-state,
  .vendor-product-card,
  .vendor-import-linked-tools__badge,
  .vendor-import-browser__chip,
  .vendor-import-browser__preset-card,
  .vendor-product-card__comparison-row,
  .vendor-import-queue__item,
  .vendor-product-card__button.is-loading {
    animation: none !important;
    transition: none !important;
  }
}
/* Reorder Tool 2.0 — order bar, card order-line forms, sales graph */
.order-bar {
  margin-bottom: var(--space-m);
  border: 1px solid var(--color-light);
  border-radius: var(--border-radius);
  background: var(--color-white);
  box-shadow: var(--shadow-small);
  position: sticky;
  top: 70px;
  z-index: 30;
}

.order-bar__notice {
  padding: var(--space-xs) var(--space-m);
  background: var(--color-primary-bg);
  border-bottom: 1px solid var(--color-light);
  font-size: var(--font-size-s);
}
.order-bar__notice a {
  margin-left: var(--space-xs);
  font-weight: bold;
}

.order-bar__summary {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  cursor: pointer;
  flex-wrap: wrap;
}

.order-bar__summary-main {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.order-bar__title {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.order-bar__tabs {
  display: flex;
  gap: var(--space-xxs);
  flex-wrap: wrap;
}

.order-bar__tab {
  border: 1px solid var(--color-light);
  background: var(--color-background);
  border-radius: var(--border-radius);
  padding: var(--space-xxxs) var(--space-xs);
  font-size: var(--font-size-s);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
}
.order-bar__tab.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

.order-bar__tab-count {
  background: var(--color-white);
  color: var(--color-text-body);
  border-radius: 999px;
  padding: 0 var(--space-xxs);
  font-size: var(--font-size-xs);
  min-width: 1.25em;
  text-align: center;
}

.order-bar__totals {
  display: flex;
  gap: var(--space-m);
  white-space: nowrap;
}

.order-bar__total {
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
}

.order-bar__total--cost strong {
  color: var(--color-text-header);
}

.order-bar__toggle {
  border: 1px solid var(--color-light);
  background: none;
  border-radius: var(--border-radius);
  padding: var(--space-xxxs) var(--space-s);
  cursor: pointer;
  font-size: var(--font-size-s);
}

.order-bar__panel {
  border-top: 1px solid var(--color-light);
  padding: var(--space-m);
  background: var(--color-background);
}

.order-bar__panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-s);
  font-size: var(--font-size-m);
  color: var(--color-text-muted);
}

.order-bar__failed {
  background: hsl(0, 85%, 96%);
  border: 1px solid hsl(0, 60%, 85%);
  border-radius: var(--border-radius);
  padding: var(--space-xs) var(--space-s);
  margin-bottom: var(--space-s);
  font-size: var(--font-size-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.order-bar__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  max-height: 320px;
  overflow-y: auto;
}

.order-bar__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: var(--space-s);
  background: var(--color-white);
  border: 1px solid var(--color-light);
  border-radius: var(--border-radius);
  padding: var(--space-xxs) var(--space-s);
  font-size: var(--font-size-s);
}

.order-bar__line-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-bar__line-sku {
  color: var(--color-text-muted);
}

.order-bar__line-qty {
  font-weight: bold;
}

.order-bar__line-cost {
  font-weight: bold;
}

.order-bar__remove-btn {
  border: none;
  background: none;
  color: hsl(0, 67%, 50%);
  cursor: pointer;
  font-size: var(--font-size-s);
}

.order-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-m);
  flex-wrap: wrap;
}

.order-bar__send-status {
  margin: 0;
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
  flex-basis: 100%;
}

.order-bar__send-btn--confirming {
  background: hsl(0, 67%, 50%);
}

.order-bar__hint,
.order-bar__empty {
  margin: var(--space-s) 0 0;
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
}

/* Card order-line form */
.vendor-product-card__order-line {
  margin-bottom: var(--space-s);
}

.vendor-order-line__form {
  display: flex;
  gap: var(--space-xxs);
  align-items: stretch;
}

.vendor-order-line__input {
  width: 72px;
  text-align: center;
}

.vendor-order-line__submit {
  flex: 1;
  white-space: nowrap;
}

.vendor-order-line__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  margin-top: var(--space-xxs);
}

.vendor-order-line__chip {
  font-size: var(--font-size-xs);
  border-radius: 999px;
  padding: 0 var(--space-xxs);
  border: 1px solid var(--color-light);
}
.vendor-order-line__chip.is-recommended {
  background: hsl(101, 45%, 88%);
  color: hsl(101, 40%, 22%);
  font-weight: bold;
}
.vendor-order-line__chip.is-suggested {
  background: var(--color-primary-bg);
  color: var(--color-text-body);
}
.vendor-order-line__chip.is-in-order {
  background: var(--color-light);
  color: var(--color-text-body);
}
.vendor-order-line__chip.is-sent {
  background: var(--color-tertiary);
}

.vendor-order-line__hint {
  border: 1px dashed var(--color-light);
  background: none;
  border-radius: var(--border-radius);
  font-size: var(--font-size-xs);
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0 var(--space-xxs);
}

/* Sales graph v2 */
.sales-graph {
  border: 1px solid var(--color-light);
  border-radius: var(--border-radius);
  background: var(--color-background);
  padding: var(--space-s);
}

.sales-graph__summary {
  display: flex;
  gap: var(--space-m);
  flex-wrap: wrap;
  font-size: var(--font-size-s);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.sales-graph__scroll {
  overflow-x: auto;
}

.sales-graph__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(14px, 1fr));
  column-gap: 2px;
  min-width: calc(var(--cols) * 16px);
}

.sales-graph__years,
.sales-graph__bars,
.sales-graph__labels {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
}

.sales-graph__years {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sales-graph__year {
  text-align: center;
  border-bottom: 1px solid var(--color-light);
  padding: var(--space-xxxs) 0;
}

.sales-graph__bars {
  height: 64px;
  align-items: end;
}

.sales-graph__bar {
  background: var(--color-primary);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  position: relative;
  transition: height 2s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.sales-graph__bar-label {
  font-size: var(--font-size-xs);
  color: var(--color-white);
  transform: translateY(-1.2em);
  white-space: nowrap;
}

.sales-graph__labels {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sales-graph__label {
  text-align: center;
}

/* Recommended chip on cards */
.vendor-product-card__chip.is-info {
  background: hsl(210, 100%, 88%);
  color: hsl(210, 90%, 22%);
  border: 1px solid hsl(210, 80%, 75%);
}

.vendor-product-card__sales-section {
  border-top: 1px solid var(--color-light);
  padding-top: var(--space-s);
  margin-top: var(--space-m);
}

.vendor-dashboard {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: hidden;
}

.vendor-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.vendor-dashboard__banner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0.5rem;
  z-index: 50;
}

.vendor-dashboard__banner-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vendor-dashboard__banner-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-header);
}

.vendor-dashboard__banner-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.vendor-dashboard__banner-right {
  min-width: 260px;
  max-width: 380px;
  flex: 1 0 auto;
}

.vendor-dashboard__banner-stat {
  text-align: center;
}

.vendor-dashboard__banner-value {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.vendor-dashboard__banner-label {
  font-size: 0.85rem;
  color: var(--color-text-header);
  opacity: 0.7;
}

.vendor-dashboard__banner-stat--warn .vendor-dashboard__banner-value {
  color: hsl(10, 73%, 54%);
}

.vendor-dashboard-card {
  padding: 1.5rem;
}

.vendor-dashboard-card__header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
}

.vendor-dashboard-card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.vendor-dashboard-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-header);
  margin: 0;
}

.vendor-dashboard-card__badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.vendor-dashboard-card__status {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.vendor-dashboard-card__status--fresh {
  color: hsl(142, 56%, 39%);
  background: hsla(142, 56%, 39%, 0.1);
}

.vendor-dashboard-card__status--aging {
  color: hsl(36, 89%, 44%);
  background: hsla(36, 89%, 44%, 0.1);
}

.vendor-dashboard-card__status--stale {
  color: hsl(10, 73%, 54%);
  background: hsla(10, 73%, 54%, 0.1);
}

.vendor-dashboard-card__status--synced {
  color: hsl(210, 60%, 40%);
  background: hsla(210, 60%, 50%, 0.1);
}

.vd-tooltip {
  position: relative;
  cursor: default;
  border-bottom: 1px dotted var(--color-text-header);
}

.vd-tooltip__popup {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.4rem;
  z-index: 100;
  background: hsl(0, 0%, 20%);
  color: hsl(0, 0%, 95%);
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.6;
}

.vd-tooltip:hover .vd-tooltip__popup,
.vd-tooltip:focus-within .vd-tooltip__popup {
  display: block;
}

.vd-tooltip__row strong {
  font-weight: 600;
  min-width: 48px;
  display: inline-block;
}

.vendor-dashboard-card__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-header);
  opacity: 0.8;
  margin-bottom: 0.15rem;
}

.vendor-dashboard-card__age {
  background: hsla(210, 100%, 50%, 0.06);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.vendor-dashboard-card__age-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-header);
  opacity: 0.5;
  margin-bottom: 0.15rem;
}

.vendor-dashboard-card__age-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}

.vendor-dashboard-card__age-ago {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-header);
  opacity: 0.6;
  margin-left: 0.5rem;
}

.vendor-dashboard-card__age-value--warn {
  color: hsl(10, 73%, 54%);
}

.vendor-dashboard-card__age-note {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-text-header);
  opacity: 0.45;
  font-style: italic;
}

.vendor-dashboard-card__meta--warn {
  color: hsl(10, 73%, 54%);
  opacity: 1;
  font-weight: 600;
}

.vendor-dashboard-card__section {
  margin-bottom: 1rem;
}

.vendor-dashboard-card__section--issues {
  background: hsla(10, 73%, 54%, 0.06);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.vendor-dashboard-card__section--oop {
  background: hsla(210, 20%, 60%, 0.06);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
}

.vendor-dashboard-card__oop {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.vendor-dashboard-card__oop-count {
  font-weight: 700;
  color: hsl(210, 15%, 40%);
  min-width: 30px;
}

.vendor-dashboard-card__oop-label {
  color: var(--color-text-header);
  opacity: 0.6;
  font-size: 0.78rem;
}

.vendor-dashboard-card__section-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-header);
  opacity: 0.55;
  margin: 0 0 0.5rem 0;
}

.vendor-dashboard-card__table {
  background: hsl(0, 0%, 100%);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid hsla(0, 0%, 0%, 0.08);
}

.vd-table__row {
  display: grid;
  grid-template-columns: 85px 1fr 70px auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.06);
}

.vd-table__row:last-child {
  border-bottom: none;
}

.vd-table__row--header {
  background: hsl(210, 20%, 96%);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(0, 0%, 35%);
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
}

.vd-table__col--field {
  font-size: 0.82rem;
  font-weight: 600;
  color: hsl(0, 0%, 20%);
}

.vd-table__col--count {
  font-size: 0.75rem;
  color: hsl(0, 0%, 35%);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vd-table__col--status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.vd-table__bar-track {
  height: 7px;
  background: hsl(0, 0%, 88%);
  border-radius: 999px;
  overflow: hidden;
}

.vd-table__bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}

.vd-table__bar-fill--good {
  background: hsl(142, 56%, 39%);
}

.vd-table__bar-fill--ok {
  background: hsl(36, 89%, 44%);
}

.vd-table__bar-fill--low {
  background: hsl(10, 73%, 54%);
}

.vd-badge {
  font-size: 0.63rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.vd-badge--actionable {
  color: hsl(36, 95%, 28%);
  background: hsl(36, 90%, 92%);
  border: 1px solid hsla(36, 70%, 55%, 0.3);
}

.vd-badge--both {
  color: hsl(10, 70%, 35%);
  background: hsl(10, 60%, 93%);
  border: 1px solid hsla(10, 50%, 55%, 0.25);
}

.vd-badge--failed {
  color: hsl(0, 75%, 32%);
  background: hsl(0, 65%, 93%);
  border: 1px solid hsla(0, 60%, 55%, 0.3);
}

.vendor-dashboard-card__match-info {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.vendor-dashboard-card__match-stat {
  text-align: center;
}

.vendor-dashboard-card__match-value {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
}

.vendor-dashboard-card__match-label {
  font-size: 0.72rem;
  color: var(--color-text-header);
  opacity: 0.6;
}

.vendor-dashboard-card__match-stat--key .vendor-dashboard-card__match-value {
  color: var(--color-text-header);
  opacity: 0.65;
  font-weight: 500;
}

.vendor-dashboard-card__match-bar {
  margin-top: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--color-text-header);
  opacity: 0.65;
}

.vendor-dashboard-card__match-track {
  flex: 1;
  height: 6px;
  background: hsla(0, 0%, 0%, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.vendor-dashboard-card__match-fill {
  height: 100%;
  border-radius: 999px;
  background: hsl(142, 56%, 39%);
  transition: width 0.6s ease;
}

.vendor-dashboard-card__unmatched {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed hsla(0, 0%, 0%, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.vendor-dashboard-card__unmatched-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.73rem;
}

.vendor-dashboard-card__unmatched-val {
  font-weight: 700;
  color: var(--color-text-header);
  opacity: 0.8;
}

.vendor-dashboard-card__unmatched-lbl {
  color: var(--color-text-header);
  opacity: 0.5;
}

.vendor-dashboard-card__unmatched-row--fallback .vendor-dashboard-card__unmatched-val {
  color: hsl(210, 100%, 50%);
}

.vendor-dashboard-card__unmatched--fallback {
  border-color: hsla(210, 100%, 50%, 0.2);
  background: hsla(210, 100%, 50%, 0.04);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
}

.vendor-dashboard-card__updates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.vendor-dashboard-card__update-tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: hsla(210, 100%, 50%, 0.08);
  color: var(--color-primary);
  font-weight: 500;
}

.vendor-dashboard-card__issues-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.vendor-dashboard-card__issue {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.vendor-dashboard-card__issue-count {
  font-weight: 700;
  color: hsl(10, 73%, 54%);
  min-width: 30px;
}

.vendor-dashboard-card__issue-label {
  color: var(--color-text-header);
  opacity: 0.75;
}

.vd-badge--failed {
  color: hsl(0, 75%, 32%);
  background: hsl(0, 65%, 93%);
  border: 1px solid hsla(0, 60%, 55%, 0.3);
}

.vd-search {
  display: flex;
  gap: 0.4rem;
}

.vd-search__input {
  flex: 1;
  padding: 0.45rem 0.65rem;
  border: 1px solid hsla(0, 0%, 0%, 0.15);
  border-radius: 6px;
  font-size: 0.85rem;
  background: hsl(0, 0%, 100%);
  outline: none;
}

.vd-search__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px hsla(210, 100%, 50%, 0.15);
}

.vd-search__btn {
  padding: 0.45rem 0.85rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.vd-search__btn:hover {
  opacity: 0.9;
}

.vd-search__result {
  margin-top: 0.75rem;
}

.vd-search__card {
  background: hsl(0, 0%, 100%);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  border: 1px solid hsla(0, 0%, 0%, 0.1);
}

.vd-search__card-status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 0.4rem;
}

.vd-search__card-status--matched {
  color: hsl(142, 56%, 39%);
  background: hsla(142, 56%, 39%, 0.1);
}

.vd-search__card-status--unmatched {
  color: hsl(10, 73%, 54%);
  background: hsla(10, 73%, 54%, 0.08);
}

.vd-search__card-body {
  margin-bottom: 0.4rem;
}

.vd-search__card-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-header);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.vd-search__card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  font-size: 0.72rem;
  color: var(--color-text-header);
  opacity: 0.7;
}

.vd-search__card-meta strong {
  font-weight: 600;
  opacity: 0.8;
}

.vd-search__card-matched {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: hsl(142, 56%, 39%);
}

.vd-search__card-link {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 0.35rem;
}

.vd-search__card-link:hover {
  text-decoration: underline;
}

.vd-search__card-fields {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.vd-search__field {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.vd-search__field--yes {
  color: hsl(142, 56%, 39%);
  background: hsla(142, 56%, 39%, 0.08);
}

.vd-search__field--no {
  color: hsl(10, 73%, 54%);
  background: hsla(10, 73%, 54%, 0.06);
}

.toastify {
  padding: 0 !important;
  -webkit-backdrop-filter: blur(15px) brightness(1.1) !important;
  backdrop-filter: blur(15px) brightness(1.1) !important;
  font-family: inherit;
}
.toastify .toast-close {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
  opacity: 0.8;
  font-size: 20px;
  font-weight: bold;
  padding: 0 8px;
  transition: opacity 0.2s ease;
}
.toastify .toast-close:hover {
  opacity: 1;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 10px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
}
.toastify .toastify-text {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
}

.toastify.on {
  animation: toastify-fade-in 0.3s ease-out;
}

.toastify.off {
  animation: toastify-fade-out 0.3s ease-out;
}

@keyframes toastify-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toastify-fade-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}
.author-norm-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1rem;
  min-height: 80vh;
}
.author-norm-page > turbo-frame,
.author-norm-page > * {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.author-norm-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 860px;
  padding: 1rem 1.5rem;
}
.author-norm-stats .stats-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.author-norm-stats .stats-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
}
.author-norm-stats .stats-value {
  font-size: 0.95rem;
  font-weight: 600;
}
.author-norm-stats .stats-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.3s;
}
.author-norm-stats .stats-badge--pending {
  background: rgba(255, 193, 7, 0.25);
  border: 2px solid rgba(255, 193, 7, 0.7);
  color: #ffd64a;
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.35);
}
.author-norm-stats .stats-actions {
  margin-left: auto;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.author-norm-stats .stats-scan-btns {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.author-norm-stats .stats-scan-btn {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.author-norm-stats .stats-scanning-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #88d8ff;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(23, 162, 184, 0.15);
  border: 1px solid rgba(23, 162, 184, 0.5);
}

.applying-toast {
  position: sticky;
  top: 0.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 860px;
  padding: 0.75rem 1.25rem;
  border-radius: var(--border-radius);
  background: rgba(23, 162, 184, 0.18);
  border: 1.5px solid rgba(23, 162, 184, 0.55);
  color: #88d8ff;
  font-size: 0.92rem;
  box-shadow: 0 0 18px rgba(23, 162, 184, 0.25);
  backdrop-filter: blur(10px);
}
.applying-toast strong {
  color: #fff;
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}
.applying-toast .toast-spinner .spin-icon {
  animation: spinContinuous 1.2s linear infinite;
  display: block;
}
.applying-toast .toast-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.4;
}
.applying-toast .toast-jobs-line {
  font-size: 0.88rem;
  opacity: 0.85;
}
.applying-toast .toast-records-line {
  font-size: 0.96rem;
  font-weight: 500;
}

.author-pair-card {
  width: 100%;
  max-width: 860px;
  padding: 2.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  overflow: hidden;
}
.author-pair-card--done {
  text-align: center;
  gap: 1.25rem;
  padding: 3.5rem 2rem;
}

.pair-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.pair-progress .progress-label {
  font-size: 0.8rem;
  opacity: 0.7;
}
.pair-progress .progress-bar-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.pair-progress .progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd64a, #ff7b45);
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}

.pair-question {
  width: 100%;
  text-align: center;
}
.pair-question .pair-question__intro {
  font-size: 1.15rem;
  opacity: 0.65;
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pair-options {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
}

.pair-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.pair-option__name {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  letter-spacing: -0.01em;
}

.pair-custom-inline {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.pair-custom-inline__toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.55;
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  transition: opacity 0.2s, background 0.2s;
  letter-spacing: 0.01em;
}
.pair-custom-inline__toggle:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.07);
}
.pair-custom-inline .pair-custom__form--inline {
  width: 100%;
}
.pair-custom-inline .pair-custom__form--inline .custom-input-row {
  flex-wrap: wrap;
  justify-content: center;
}
.pair-custom-inline .pair-custom__form--inline .custom-name-input {
  font-size: 0.9rem;
  padding: 0.45rem 0.75rem;
  min-width: 150px;
}
.pair-custom-inline .pair-custom__form--inline .pair-btn--custom {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
}

.pair-or {
  font-size: 1.3rem;
  font-weight: 600;
  opacity: 0.5;
  align-self: center;
  padding: 0 0.5rem;
  font-style: italic;
}

.stat-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  animation: fadeUp 0.4s ease both;
  cursor: help;
  position: relative;
}
.stat-bubble:hover {
  filter: brightness(1.2);
  transform: scale(1.06);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.stat-bubble__info-icon {
  opacity: 0.6;
  flex-shrink: 0;
}
.stat-bubble--a {
  background: rgba(40, 167, 69, 0.2);
  border: 1.5px solid rgba(40, 167, 69, 0.6);
  color: #76e897;
  box-shadow: 0 0 10px rgba(40, 167, 69, 0.25);
  animation-delay: 0.15s;
}
.stat-bubble--b {
  background: rgba(108, 117, 125, 0.2);
  border: 1.5px solid rgba(108, 117, 125, 0.5);
  color: #c8cdd2;
  box-shadow: 0 0 8px rgba(108, 117, 125, 0.2);
  animation-delay: 0.25s;
}

#nic-tooltip {
  position: absolute;
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 16px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  /* top is set programmatically — do NOT transition it or repositioning will animate */
}
#nic-tooltip.nic-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nic-tooltip {
  background: #1a1f2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  font-size: 0.84rem;
  color: #d4d8e0;
  line-height: 1.45;
}

.nic-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 0;
}
.nic-loading__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: nicDotPulse 1.1s ease-in-out infinite;
}
.nic-loading__dot:nth-child(2) {
  animation-delay: 0.18s;
}
.nic-loading__dot:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes nicDotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
  }
}
.nic-empty,
.nic-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.65;
  font-style: italic;
  font-size: 0.82rem;
  padding: 0.25rem 0;
}

.nic-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.nic-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nic-badge--single {
  background: rgba(23, 162, 184, 0.2);
  border: 1px solid rgba(23, 162, 184, 0.55);
  color: #64d0e8;
}
.nic-badge--multi {
  background: rgba(255, 193, 7, 0.18);
  border: 1px solid rgba(255, 193, 7, 0.5);
  color: #ffd64a;
}

.nic-price-range {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-left: auto;
}

.nic-single {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.nic-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nic-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.nic-meta-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.nic-meta-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.5;
  white-space: nowrap;
  flex-shrink: 0;
}

.nic-meta-value {
  font-size: 0.82rem;
  font-weight: 500;
  color: #c8d0dd;
  word-break: break-word;
}

.nic-links {
  margin-top: 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.nic-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  transition: background 0.15s, color 0.15s;
}
.nic-link--shopify {
  background: rgba(150, 191, 99, 0.15);
  border: 1px solid rgba(150, 191, 99, 0.4);
  color: #96bf63;
}
.nic-link--shopify:hover {
  background: rgba(150, 191, 99, 0.28);
  color: #b8dc82;
}
.nic-link--absent {
  font-size: 0.78rem;
  opacity: 0.45;
  font-style: italic;
}

.nic-summary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nic-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.nic-section__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.45;
  margin-bottom: 0.2rem;
}
.nic-section__hint {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  opacity: 0.6;
}

.nic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
}
.nic-row__label {
  color: #c8d0dd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.nic-row__count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #879099;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

.nic-sample-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.79rem;
  color: #a0a8b4;
  padding: 0.18rem 0;
}
.nic-sample-title::before {
  content: "·";
  opacity: 0.4;
  flex-shrink: 0;
}
.nic-sample-title:hover > .nic-title-sub,
.nic-sample-title > .nic-title-sub:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s;
}

.nic-title-ls-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.15s;
  text-decoration: none;
}
.nic-title-ls-icon:hover {
  color: #64d0e8;
}

.nic-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.nic-title-sub {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  width: 230px;
  background: #141827;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9px;
  padding: 0.75rem 0.85rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 12px 36px rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease 0.1s, transform 0.12s ease 0.1s;
  z-index: 10001;
}
.nic-title-sub__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #eef0f4;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.nic-title-sub__rows {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-bottom: 0.55rem;
}
.nic-title-sub__row {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.78rem;
}
.nic-title-sub__label {
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.45;
  white-space: nowrap;
  flex-shrink: 0;
  width: 48px;
}
.nic-title-sub__value {
  color: #c8d0dd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.nic-title-sub__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.77rem;
  font-weight: 600;
  color: #64d0e8;
  text-decoration: none;
  width: 100%;
  transition: color 0.15s;
}
.nic-title-sub__link:hover {
  color: #a0e8f8;
}

mark.diff-mark {
  display: inline;
  border-radius: 3px;
  padding: 0 2px;
  font-style: normal;
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

mark.diff-mark--a {
  background: rgba(255, 120, 60, 0.22);
  border-bottom: 2px solid rgba(255, 140, 60, 0.85);
}

mark.diff-mark--b {
  background: rgba(56, 189, 248, 0.18);
  border-bottom: 2px solid rgba(56, 189, 248, 0.75);
}

.pair-diff-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.6);
  user-select: none;
}

.diff-legend-sep {
  opacity: 0.4;
}

.diff-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 5px;
  border-radius: 2px;
}
.diff-legend-swatch--a {
  background: rgba(255, 140, 60, 0.7);
  box-shadow: 0 1px 4px rgba(255, 140, 60, 0.4);
}
.diff-legend-swatch--b {
  background: rgba(56, 189, 248, 0.7);
  box-shadow: 0 1px 4px rgba(56, 189, 248, 0.4);
}

.pair-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.pair-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s, filter 0.18s;
  text-decoration: none;
}
.pair-btn:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.15);
}
.pair-btn:active {
  transform: translateY(0) scale(0.97);
}
.pair-btn--a {
  background: rgba(40, 167, 69, 0.25);
  border: 2px solid rgba(40, 167, 69, 0.6);
  color: #76e897;
  box-shadow: 0 0 18px rgba(40, 167, 69, 0.3);
}
.pair-btn--a:hover {
  box-shadow: 0 0 28px rgba(40, 167, 69, 0.55);
}
.pair-btn--b {
  background: rgba(108, 117, 125, 0.2);
  border: 2px solid rgba(108, 117, 125, 0.5);
  color: #c8cdd2;
  box-shadow: 0 0 12px rgba(108, 117, 125, 0.2);
}
.pair-btn--b:hover {
  box-shadow: 0 0 20px rgba(108, 117, 125, 0.4);
}
.pair-btn--custom {
  background: rgba(255, 193, 7, 0.2);
  border: 2px solid rgba(255, 193, 7, 0.55);
  color: #ffd64a;
  box-shadow: 0 0 12px rgba(255, 193, 7, 0.25);
  white-space: nowrap;
}
.pair-btn--custom:hover {
  box-shadow: 0 0 22px rgba(255, 193, 7, 0.5);
}
.pair-btn--not-duplicate {
  background: rgba(220, 53, 69, 0.15);
  border: 2px solid rgba(220, 53, 69, 0.45);
  color: #f08090;
  box-shadow: 0 0 12px rgba(220, 53, 69, 0.2);
  font-size: 0.9rem;
  padding: 0.7rem 1.3rem;
}
.pair-btn--not-duplicate:hover {
  box-shadow: 0 0 22px rgba(220, 53, 69, 0.45);
}

.pair-custom {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.pair-custom__toggle {
  font-size: 0.9rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.pair-custom__toggle:hover {
  opacity: 1;
}
.pair-custom__form {
  width: 100%;
  max-width: 560px;
}

.custom-input-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.custom-name-input {
  flex: 1;
  min-width: 200px;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--border-radius);
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.custom-name-input::placeholder {
  opacity: 0.45;
}
.custom-name-input:focus {
  border-color: rgba(255, 193, 7, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}

.pair-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: -0.5rem;
}

.pair-skip {
  margin-top: -0.5rem;
}
.pair-skip__btn {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.45;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.2s;
  padding: 0.25rem 0.5rem;
}
.pair-skip__btn:hover {
  opacity: 0.85;
}

.done-icon {
  font-size: 3.5rem;
  line-height: 1;
}

.done-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
}

.done-body {
  opacity: 0.7;
  font-size: 1rem;
  max-width: 400px;
}

.container {
  grid-row: 2/3;
  width: 100%;
  height: 100%;
  padding-right: var(--space-xs);
  padding-left: var(--space-xs);
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
@media (min-width: 50rem) {
  .container {
    padding-right: var(--space-m);
    padding-left: var(--space-m);
    max-width: 100%;
  }
}

.top_first_page {
  grid-column: 1/2;
}

.top_second_page {
  grid-column: 2/3;
}

.inner_cont {
  width: 100%;
  display: grid;
  grid-template-columns: 6fr minmax(auto, 40%);
  grid-row-gap: var(--space-s);
  justify-items: center;
  align-items: center;
  grid-column-gap: var(--space-xs);
}

.start-grid {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100vw;
  height: 90vh;
}

.shopify_style {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-small);
  border: var(--border);
  padding: var(--space-xxs);
  background-color: var(--color-background2);
  color: var(--color-dark);
  backdrop-filter: blur(25px);
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius: var(--border-radius);
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--color-dark);
  border-radius: var(--border-radius);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: var(--border-radius);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
  border-radius: var(--border-radius);
}

.main_tab_cont {
  display: grid;
  max-width: 80vw;
  align-items: center;
  justify-items: center;
  text-align: center;
  justify-content: center;
  align-content: center;
}

.lighet {
  text-align: center;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.navbar-brand .navbar-item {
  color: #fff;
  text-decoration: none;
}

/* Styles for the burger icon */
.navbar-burger {
  display: block; /* Always display the burger */
  cursor: pointer;
}

.navbar-burger span {
  background: #fff;
  display: block;
  height: 3px;
  width: 25px;
  margin: 5px 0;
}

.navbar-menu.is-active {
  display: block; /* Show the menu when .is-active is added */
}

.navbar-menu {
  display: none; /* Menu is hidden by default */
  position: absolute; /* Optional: Adjust based on your design */
  right: 0;
  top: 100%; /* Below the navbar */
  background-color: #333; /* Match the navbar background color */
}

.navbar-end {
  align-items: center;
}

.navbar-link {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem;
  transition: background-color 0.3s;
}

.navbar-link:hover {
  background-color: #555;
}

.last_sent {
  grid-column: 3/4;
}