.sendif-hidden {
  display: none !important;
}

.sendif-no-scroll { overflow:hidden!important }

.sendif-form__wrapper:not(.sendif-form__popup) {
  display: flex;
  justify-content: center;
}

.sendif-form__content-wrapper {
  width: var(--form-width);
}

.sendif-form__content {
  display: flex;
  width: var(--form-width);
  background-color: var(--form-background-color);
  border-radius: var(--form-border-radius);
  overflow: hidden;
  min-height: 200px;
}

.sendif-form__popup .sendif-form__content-wrapper {
  position: relative;
  z-index: 2;
  transform: translateY(18px) scale(.985);
  opacity: 0;
  transform-origin: center;
  transition: transform 300ms cubic-bezier(.2, .9, .3, 1), opacity 300ms cubic-bezier(.2, .9, .3, 1);
}

.sendif-form__popup.sendif-open .sendif-form__content-wrapper {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.sendif-form__popup {
  position: fixed;
  z-index: 9999;
  inset: 0;
  padding: 10px;
  pointer-events: none;
}
.sendif-form__popup.sendif-open {
  pointer-events: auto;
}
.sendif-form__popup .sendif-form__overlay {
  --overlay-bg: var(--overlay-color);
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(.2, .9, .3, 1);
  z-index: 1;
  /* subtle blur behind overlay (may be heavy on some devices) */
  backdrop-filter: blur(1.5px) saturate(1.05);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.05);
}

.sendif-form__popup .sendif-form__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  pointer-events: none;
  transition: background 240ms;
}

.sendif-form__popup.sendif-open .sendif-form__overlay {
  opacity: 1;
  pointer-events: auto;
}

.sendif-form__popup button.sendif-form__close {
  display: block;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 1px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--form-close-fill);
}

.sendif-form__popup button.sendif-form__close svg {
  width: var(--form-close-size);
  height: var(--form-close-size);
  color: var(--form-close-color);
}

.sendif-form__image-canvas {
  line-height: 0;
}

.sendif-form__image-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sendif-form__form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--form-fields-spacing);
  padding: var(--form-fields-padding);
  justify-content: center;
  width: 100%;
  height: 100%;
}

.sendif-form__form-fields button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sendif-form__image-canvas,
.sendif-form__form-fields-wrapper {
  width: calc(var(--form-width) / 2);
}

.form-fields__input-wrapper {
  position: relative;
}

#form-fields__input-otp-otp {
  display: flex;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

#form-fields__input-otp-otp .form-fields__input-otp {
  text-align: center;
}

#form-fields__input-wrapper-otp .resend-otp {
  font-size: 13px;
  width: 100%;
  padding: 0 4px;
  align-items: center;
  justify-content: space-between;
}

#form-fields__input-wrapper-otp .resend-otp button {
  color: blue;
  text-decoration: underline;
  border: none;
  background: none;
  cursor: pointer;
}

#form-fields__input-wrapper-otp .resend-otp button:disabled,
#form-fields__input-wrapper-otp .resend-otp .resend-otp-timer {
  opacity: 0.5;
  cursor: not-allowed;
}

.sendif-form__teaser {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  transition: transform 0.2s;
  transform: var(--teaser-transform);
  z-index: 999;
}
.sendif-form__teaser.teaser-alignment-middle-left,
.sendif-form__teaser.teaser-alignment-middle-right,
.sendif-form__teaser.teaser-alignment-top-right,
.sendif-form__teaser.teaser-alignment-top-left,
.sendif-form__teaser.teaser-alignment-top-center {
  transform: var(--teaser-transform) translateY(-60px);
}
.sendif-form__teaser.teaser-alignment-bottom-center,
.sendif-form__teaser.teaser-alignment-bottom-left,
.sendif-form__teaser.teaser-alignment-bottom-right {
  transform: var(--teaser-transform) translateY(60px);
}
.sendif-form__teaser.sendif-open {
  transform: var(--teaser-transform) translateY(0) !important;
}

.sendif-form__teaser-text {
  cursor: pointer;
  flex: 1;
}

.sendif-form__teaser-close {
  cursor: pointer;
}

.sendif-form__inline-loader {
  min-height: 150px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* HTML: <div class="loader"></div> */
.sendif-loader {
  display: block !important;
  width: 30px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid #ede7f6;
  border-right-color: #673ab7;
  animation: l2 1s infinite linear;
}

@keyframes l2 {
  to {
    transform: rotate(1turn)
  }
}

/* popup alignment */
/* --- Top Row --- */
.sendif-form__popup.alignment-top-left .sendif-form__content-wrapper {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

.sendif-form__popup.alignment-top-center .sendif-form__content-wrapper {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.sendif-form__popup.alignment-top-right .sendif-form__content-wrapper {
  top: 0;
  right: 0;
  transform: translate(0, 0);
}

/* --- Middle Row --- */
.sendif-form__popup.alignment-middle-left .sendif-form__content-wrapper {
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.sendif-form__popup.alignment-middle-center .sendif-form__content-wrapper {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sendif-form__popup.alignment-middle-right .sendif-form__content-wrapper {
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

/* --- Bottom Row --- */
.sendif-form__popup.alignment-bottom-left .sendif-form__content-wrapper {
  top: 0;
  left: 0;
  transform: translate(0, -100%);
}

.sendif-form__popup.alignment-bottom-center .sendif-form__content-wrapper {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
}

.sendif-form__popup.alignment-bottom-right .sendif-form__content-wrapper {
  top: 100%;
  left: 100%;
  transform: translate(-100%, -100%);
}

.sendif-form__wrapper.image-left .sendif-form__content {
  flex-direction: row;
}

.sendif-form__wrapper.image-left .sendif-form__content .sendif-form__image-canvas {
  border-radius: var(--form-corner-radius) 0 0 var(--form-corner-radius);
}


.sendif-form__wrapper.image-right .sendif-form__content {
  flex-direction: row-reverse;
}

.sendif-form__wrapper.image-right .sendif-form__content .sendif-form__image-canvas {
  border-radius: 0 var(--form-corner-radius) var(--form-corner-radius) 0;
}

.sendif-form__wrapper.image-top .sendif-form__content {
  flex-direction: column;
}

.sendif-form__wrapper.image-top .sendif-form__content .sendif-form__image-canvas {
  border-radius: var(--form-corner-radius) var(--form-corner-radius) 0 0;
}

.sendif-form__wrapper.image-top .sendif-form__content .sendif-form__form-fields-wrapper,
.sendif-form__wrapper.image-top .sendif-form__content .sendif-form__image-canvas {
  width: 100%;
  height: 50%;
}

.sendif-form__wrapper.image-bottom .sendif-form__content {
  flex-direction: column-reverse;
}

.sendif-form__wrapper.image-bottom .sendif-form__content .sendif-form__image-canvas {
  border-radius: 0 0 var(--form-corner-radius) var(--form-corner-radius);
}

.sendif-form__wrapper.image-bottom .sendif-form__content .sendif-form__form-fields-wrapper,
.sendif-form__wrapper.image-bottom .sendif-form__content .sendif-form__image-canvas {
  width: 100%;
  height: 50%;
}

@media (max-width: 767px) {
  .sendif-form__content {
    flex-direction: column;
    width: calc(var(--form-width) / 2);

    max-width: 500px !important;
    min-width: 240px !important;
  }

  .sendif-form__content .image-canvas {
    border-radius: var(--form-corner-radius) var(--form-corner-radius) 0 0;
  }

  .sendif-form__content .sendif-form__image-canvas,
  .sendif-form__content .sendif-form__form-fields-wrapper {
    max-width: 500px !important;
    min-width: 240px !important;
    width: 100%;
  }
}

.sendif-form__wrapper.no-image .sendif-form__image-canvas {
  display: none;
}

.sendif-form__wrapper.no-image .sendif-form__form-fields-wrapper {
  width: 100%;
}

.sendif-form__form-fields .form-fields__input-wrapper label {
  line-height: 1.5;
}

.sendif-form__form-fields .flex {
  display: flex
}

.sendif-form__form-fields .flex-column {
  display: flex;
  flex-direction: column
}

.sendif-form__form-fields .gap-05 {
  gap: 4px
}

.sendif-form__form-fields .gap-1 {
  gap: 8px
}

.sendif-form__form-fields .align-center {
  align-items: center;
}

.sendif-form__form-fields .justify-center {
  justify-content: center;
}


/* CSS rules for font sizes */
.ql-size-1px {
  font-size: 1px;
}

.ql-size-2px {
  font-size: 2px;
}

.ql-size-3px {
  font-size: 3px;
}

.ql-size-4px {
  font-size: 4px;
}

.ql-size-5px {
  font-size: 5px;
}

.ql-size-6px {
  font-size: 6px;
}

.ql-size-7px {
  font-size: 7px;
}

.ql-size-8px {
  font-size: 8px;
}

.ql-size-9px {
  font-size: 9px;
}

.ql-size-10px {
  font-size: 10px;
}

.ql-size-11px {
  font-size: 11px;
}

.ql-size-12px {
  font-size: 12px;
}

.ql-size-13px {
  font-size: 13px;
}

.ql-size-14px {
  font-size: 14px;
}

.ql-size-15px {
  font-size: 15px;
}

.ql-size-16px {
  font-size: 16px;
}

.ql-size-17px {
  font-size: 17px;
}

.ql-size-18px {
  font-size: 18px;
}

.ql-size-19px {
  font-size: 19px;
}

.ql-size-20px {
  font-size: 20px;
}

.ql-size-21px {
  font-size: 21px;
}

.ql-size-22px {
  font-size: 22px;
}

.ql-size-23px {
  font-size: 23px;
}

.ql-size-24px {
  font-size: 24px;
}

.ql-size-25px {
  font-size: 25px;
}

.ql-size-26px {
  font-size: 26px;
}

.ql-size-27px {
  font-size: 27px;
}

.ql-size-28px {
  font-size: 28px;
}

.ql-size-29px {
  font-size: 29px;
}

.ql-size-30px {
  font-size: 30px;
}

.ql-size-31px {
  font-size: 31px;
}

.ql-size-32px {
  font-size: 32px;
}

.ql-size-33px {
  font-size: 33px;
}

.ql-size-34px {
  font-size: 34px;
}

.ql-size-35px {
  font-size: 35px;
}

.ql-size-36px {
  font-size: 36px;
}

.ql-size-37px {
  font-size: 37px;
}

.ql-size-38px {
  font-size: 38px;
}

.ql-size-39px {
  font-size: 39px;
}

.ql-size-40px {
  font-size: 40px;
}

.ql-size-41px {
  font-size: 41px;
}

.ql-size-42px {
  font-size: 42px;
}

.ql-size-43px {
  font-size: 43px;
}

.ql-size-44px {
  font-size: 44px;
}

.ql-size-45px {
  font-size: 45px;
}

.ql-size-46px {
  font-size: 46px;
}

.ql-size-47px {
  font-size: 47px;
}

.ql-size-48px {
  font-size: 48px;
}

.ql-size-49px {
  font-size: 49px;
}

.ql-size-50px {
  font-size: 50px;
}

.ql-size-51px {
  font-size: 51px;
}

.ql-size-52px {
  font-size: 52px;
}

.ql-size-53px {
  font-size: 53px;
}

.ql-size-54px {
  font-size: 54px;
}

.ql-size-55px {
  font-size: 55px;
}

.ql-size-56px {
  font-size: 56px;
}

.ql-size-57px {
  font-size: 57px;
}

.ql-size-58px {
  font-size: 58px;
}

.ql-size-59px {
  font-size: 59px;
}

.ql-size-60px {
  font-size: 60px;
}

.ql-size-61px {
  font-size: 61px;
}

.ql-size-62px {
  font-size: 62px;
}

.ql-size-63px {
  font-size: 63px;
}

.ql-size-64px {
  font-size: 64px;
}

.ql-size-65px {
  font-size: 65px;
}

.ql-size-66px {
  font-size: 66px;
}

.ql-size-67px {
  font-size: 67px;
}

.ql-size-68px {
  font-size: 68px;
}

.ql-size-69px {
  font-size: 69px;
}

.ql-size-70px {
  font-size: 70px;
}

.ql-size-71px {
  font-size: 71px;
}

.ql-size-72px {
  font-size: 72px;
}

.ql-size-73px {
  font-size: 73px;
}

.ql-size-74px {
  font-size: 74px;
}

.ql-size-75px {
  font-size: 75px;
}

.ql-size-76px {
  font-size: 76px;
}

.ql-size-77px {
  font-size: 77px;
}

.ql-size-78px {
  font-size: 78px;
}

.ql-size-79px {
  font-size: 79px;
}

.ql-size-80px {
  font-size: 80px;
}

.ql-size-81px {
  font-size: 81px;
}

.ql-size-82px {
  font-size: 82px;
}

.ql-size-83px {
  font-size: 83px;
}

.ql-size-84px {
  font-size: 84px;
}

.ql-size-85px {
  font-size: 85px;
}

.ql-size-86px {
  font-size: 86px;
}

.ql-size-87px {
  font-size: 87px;
}

.ql-size-88px {
  font-size: 88px;
}

.ql-size-89px {
  font-size: 89px;
}

.ql-size-90px {
  font-size: 90px;
}

.ql-size-91px {
  font-size: 91px;
}

.ql-size-92px {
  font-size: 92px;
}

.ql-size-93px {
  font-size: 93px;
}

.ql-size-94px {
  font-size: 94px;
}

.ql-size-95px {
  font-size: 95px;
}

.ql-size-96px {
  font-size: 96px;
}

.ql-blank {
  text-align: center
}

.ql-align-right {
  text-align: right
}

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

.ql-align-justify {
  text-align: justify
}

.ql-font-monospace {
  font-family: Monaco, Courier New, monospace
}

h1.sendif-form__text,
h2.sendif-form__text,
h3.sendif-form__text,
h4.sendif-form__text,
h5.sendif-form__text,
h6.sendif-form__text,
p.sendif-form__text {
  margin: 0;
  padding: 12px;
  line-height: 1.42;
}

h1.sendif-form__text {
  font-size: 26px;
}

.sendif-form__form-fields p {
  font-size: 13px;
  padding: 0;
  margin: 0;
}