/* Scoped to .dp-vf-tool (the converter wrapper on dplugins.com) so these utility
   classes can't override the site's Winden styles elsewhere on the page. */

.dp-vf-tool .visible {
  visibility: visible;
}

.dp-vf-tool .collapse {
  visibility: collapse;
}

.dp-vf-tool .relative {
  position: relative;
}

.dp-vf-tool .m-24 {
  margin: 6rem;
}

.dp-vf-tool .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.dp-vf-tool .my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.dp-vf-tool .my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.dp-vf-tool .-ml-2 {
  margin-left: -0.5rem;
}

.dp-vf-tool .ml-auto {
  margin-left: auto;
}

.dp-vf-tool .mt-2 {
  margin-top: 0.5rem;
}

.dp-vf-tool .block {
  display: block;
}

.dp-vf-tool .flex {
  display: flex;
}

.dp-vf-tool .table {
  display: table;
}

.dp-vf-tool .contents {
  display: contents;
}

.dp-vf-tool .hidden {
  display: none;
}

.dp-vf-tool .h-1 {
  height: 0.25rem;
}

.dp-vf-tool .w-full {
  width: 100%;
}

.dp-vf-tool .max-w-\[300px\] {
  max-width: 300px;
}

.dp-vf-tool .max-w-\[800px\] {
  max-width: 800px;
}

.dp-vf-tool .border-collapse {
  border-collapse: collapse;
}

.dp-vf-tool .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.dp-vf-tool .cursor-pointer {
  cursor: pointer;
}

.dp-vf-tool .resize {
  resize: both;
}

.dp-vf-tool .flex-col {
  flex-direction: column;
}

.dp-vf-tool .gap-2 {
  gap: 0.5rem;
}

.dp-vf-tool .gap-4 {
  gap: 1rem;
}

.dp-vf-tool .rounded-\[20px\] {
  border-radius: 20px;
}

.dp-vf-tool .rounded-full {
  border-radius: 9999px;
}

.dp-vf-tool .rounded-md {
  border-radius: 0.375rem;
}

.dp-vf-tool .border {
  border-width: 1px;
}

.dp-vf-tool .border-2 {
  border-width: 2px;
}

.dp-vf-tool .border-b {
  border-bottom-width: 1px;
}

.dp-vf-tool .border-solid {
  border-style: solid;
}

.dp-vf-tool .border-dashed {
  border-style: dashed;
}

.dp-vf-tool .border-\[\#ccc\] {
  --tw-border-opacity: 1;
  border-color: rgb(204 204 204 / var(--tw-border-opacity));
}

.dp-vf-tool .border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.dp-vf-tool .border-b-slate-300 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(203 213 225 / var(--tw-border-opacity));
}

.dp-vf-tool .bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.dp-vf-tool .bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.dp-vf-tool .bg-emerald-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
}

.dp-vf-tool .bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}

.dp-vf-tool .bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
}

.dp-vf-tool .bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.dp-vf-tool .p-24 {
  padding: 6rem;
}

.dp-vf-tool .p-4 {
  padding: 1rem;
}

.dp-vf-tool .px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.dp-vf-tool .py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.dp-vf-tool .py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.dp-vf-tool .text-center {
  text-align: center;
}

.dp-vf-tool .text-\[1\.5rem\] {
  font-size: 1.5rem;
}

.dp-vf-tool .text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.dp-vf-tool .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.dp-vf-tool .font-bold {
  font-weight: 700;
}

.dp-vf-tool .text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity));
}

.dp-vf-tool .text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dp-vf-tool .underline {
  text-decoration-line: underline;
}

.dp-vf-tool .outline {
  outline-style: solid;
}

:root {
  --stripe: #f7f5f6;
}

.dp-vf-tool #dropArea {
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(-45deg,
            transparent,
            transparent 1rem,
            var(--stripe) 1rem,
            var(--stripe) 2rem);
  background-size: 200% 200%;
}

.dp-vf-tool #dropArea.dragover {
  mix-blend-mode: multiply;
  background-image: repeating-linear-gradient(-45deg,
            transparent,
            transparent 1rem,
            var(--stripe) 1rem,
            var(--stripe) 2rem);
  background-size: 200% 200%;
  animation: barberpole 10s linear infinite;
}

@keyframes barberpole {
  100% {
    background-position: 100% 100%;
  }
}