/**
 * Breakpoint map for pre-defined mobile responsive points
 * (Intended to be used by "break-at" or "break-between" mixins)
 */
/**
 * Font map for imported font families
 * (Intended to be used by "font-family" mixin)
 */
:root {
  --usefulmarketing-ug-color-gray--light: #F0F0F0;
  --usefulmarketing-ug-color-gray--medium: #B3BABF;
  --usefulmarketing-ug-color-gray: #68757F;
  --usefulmarketing-ug-color-blue: #2A7DE1;
  --usefulmarketing-ug-color-blue--dark: #243746;
  --usefulmarketing-ug-color-yellow: #E7BD10;
  --usefulmarketing-ug-color-red: #DE414F;
  --usefulmarketing-ug-color-green: #4CAF50;
  --usefulmarketing-admin-header-bg: #0e3954;
  --usefulmarketing-admin-base-bg: #f7f9fc;
  --usefulmarketing-admin-width: 90rem;
  --usefulmarketing-admin-padding: 1.5rem;
}

.u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0) !important;
  pointer-events: none !important;
}

/**
 * Helper function to remove unit from number
 *
 * @param number, unit $number
 *  Numbered unit (i.e. 5px)
 *
 * @return number
 *  Number without unit (i.e. 5)
 */
/**
 * Helper function to convert pixel units to em units
 *
 * @param number $number
 *  Pixel count (w/o unit)
 * @param number $base
 *  Base reference number (i.e. parent's pixel count w/o unit)
 *
 * @return number
 *  Number converted in ems
 */
/**
 * Helper function to convert Adobe Illustrator letter-spacing into web spacing
 *
 * @param number $number
 *  Pixel count (w/o unit)
 *
 * @return number
 *  Number converted in ems and web-based letter-spacing
 */
/**
 * Center Position
 *
 * This mixin centers an element vertically or
 * horizontally through 'absolute' positioning.
 *
 * @param string $dir
 *  Direction to center from
 */
/**
 * Set Behind
 *
 * This mixin positions a child element behind the
 * content of the target element.
 *
 * @param string $el
 *  Element to position
 * @param int $z-i
 *  Z-index to assign target element
 */
/**
 * Set Overlay
 *
 * This mixin is used to expand a child element
 * entirely across its parent.
 */
/**
 * Center Position
 *
 * This mixin centers an element vertically or
 * horizontally through 'absolute' positioning.
 *
 * @param string $dir
 *  Direction to center from
 */
/**
 * Set Behind
 *
 * This mixin positions a child element behind the
 * content of the target element.
 *
 * @param string $el
 *  Element to position
 * @param int $z-i
 *  Z-index to assign target element
 */
/**
 * Set Overlay
 *
 * This mixin is used to expand a child element
 * entirely across its parent.
 */
/**
 * Transition
 *
 * This mixin adds transition(s) to an element.
 *
 * @param string/list $property
 *  CSS property or properties to target
 * @param unit $duration
 *  Time it will take for transition to complete
 * @param string $type
 *  Transition type
 */
/**
 * Transition
 *
 * This mixin adds transition(s) to an element.
 *
 * @param string/list $property
 *  CSS property or properties to target
 * @param unit $duration
 *  Time it will take for transition to complete
 * @param string $type
 *  Transition type
 */
/**
 * Background Size Cover
 * 
 * This mixin sets the target background size to cover.
 */
/**
 * Set Container Padding
 *
 * Mixin to force padding around element at mobile points.
 *
 * @param number $max-width
 *  Max width of container element
 * @param number $padding
 *  Padding for left and right side
 */
/**
 * Background Size Cover
 * 
 * This mixin sets the target background size to cover.
 */
/**
 * Set Container Padding
 *
 * Mixin to force padding around element at mobile points.
 *
 * @param number $max-width
 *  Max width of container element
 * @param number $padding
 *  Padding for left and right side
 */
/**
 * Font map for imported font families
 * (Intended to be used by "font-family" mixin)
 */
/**
 * Font Size
 *
 * This mixin sets the font size.
 *
 * @param number $font-size
 *  Font size in pixels w/o unit
 * @param number $line-height
 *  Font line-height in pixels w/o unit
 * @param number $letter-spacing
 *  Font letter-spacing in pixels w/o unit
 */
/**
 * Placeholder Color
 *
 * This mixin sets the color for an input's placeholder.
 *
 * @param string $color
 *  Hex or RGB value for text color
 */
/**
 * Font map for imported font families
 * (Intended to be used by "font-family" mixin)
 */
/**
 * Font Size
 *
 * This mixin sets the font size.
 *
 * @param number $font-size
 *  Font size in pixels w/o unit
 * @param number $line-height
 *  Font line-height in pixels w/o unit
 * @param number $letter-spacing
 *  Font letter-spacing in pixels w/o unit
 */
/**
 * Placeholder Color
 *
 * This mixin sets the color for an input's placeholder.
 *
 * @param string $color
 *  Hex or RGB value for text color
 */
/**
 * Break At Point
 *
 * Wrapper mixin to define responsive CSS at given point.
 * (Requires breakpoints map under $breakpoints variable to use namespaced values)
 *
 * @param map-key/number $breakpoint
 *  Breakpoint map key (i.e. large-phone) or breakpoint pixel (i.e. 1200)
 * @param string $relativity
 *  Max or min relativity for breakpoint (default: max)
 */
/**
 * Break Between Points
 *
 * Wrapper mixin to define responsive CSS between (2) given points.
 * (Requires breakpoints map under $breakpoints variable to use namespaced values)
 *
 * @param map-key/number $min-breakpoint
 *  Minimum breakpoint map key (i.e. small-phone) or breakpoint pixel (i.e. 320)
 * @param map-key/number $max-breakpoint
 *  Maximum breakpoint map key (i.e. computer) or breakpoint pixel (i.e. 1200)
 */
/**
 * Break At Point
 *
 * Wrapper mixin to define responsive CSS at given point.
 * (Requires breakpoints map under $breakpoints variable to use namespaced values)
 *
 * @param map-key/number $breakpoint
 *  Breakpoint map key (i.e. large-phone) or breakpoint pixel (i.e. 1200)
 * @param string $relativity
 *  Max or min relativity for breakpoint (default: max)
 */
/**
 * Break Between Points
 *
 * Wrapper mixin to define responsive CSS between (2) given points.
 * (Requires breakpoints map under $breakpoints variable to use namespaced values)
 *
 * @param map-key/number $min-breakpoint
 *  Minimum breakpoint map key (i.e. small-phone) or breakpoint pixel (i.e. 320)
 * @param map-key/number $max-breakpoint
 *  Maximum breakpoint map key (i.e. computer) or breakpoint pixel (i.e. 1200)
 */
.umktg-popup__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--umktg-popup-visual-width, 408px);
  background-color: var(--umktg-popup-visual-bg-color, var(--bg-color--accent, var(--bg--accent-color, #656C7A)));
}
.umktg-popup__image {
  -o-object-position: center;
  object-position: center;
}
.umktg-popup__image--cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.umktg-popup__image--contain {
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  padding: var(--umktg-popup-visual-padding, 20px);
  box-sizing: border-box;
}
@media screen and (max-width: 950px) {
  .umktg-popup__image--desktop {
    display: none;
  }
}
@media screen and (min-width: 951px) {
  .umktg-popup__image--mobile {
    display: none;
  }
}
.umktg-popup__pane, .umktg-popup__content, .umktg-popup__text, .umktg-popup__buttons {
  display: flex;
}
.umktg-popup__pane, .umktg-popup__content, .umktg-popup__text {
  flex-direction: column;
}
.umktg-popup__pane {
  justify-content: center;
  align-items: center;
  gap: var(--umktg-popup-gap, 20px);
  width: 100%;
  max-width: var(--umktg-popup-max-width, 588px);
  padding: var(--umktg-popup-padding, 40px);
  box-sizing: border-box;
}
.umktg-popup__logo {
  align-self: flex-start;
  max-height: var(--umktg-popup-logo-max-height, 50px);
}
.umktg-popup__content {
  gap: var(--umktg-popup-content-gap, 20px);
  width: 100%;
}
.umktg-popup__text {
  gap: var(--umktg-popup-text-gap, 5px);
}
.umktg-popup__buttons {
  align-items: center;
  gap: var(--umktg-popup-buttons-gap, 10px);
}
.umktg-popup .m-modal__wrapper,
.umktg-popup .umktg-modal__wrapper {
  max-height: var(--umktg-popup-max-height, calc(100% - 80px));
  padding: var(--umktg-popup-padding, 0);
  overflow: auto;
}
.umktg-popup .m-modal__content,
.umktg-popup .umktg-modal__content {
  display: flex;
  flex-direction: row-reverse;
}
@media screen and (min-width: 951px) {
  .umktg-popup--desktop-hide .umktg-popup__visual {
    display: none;
  }
  .umktg-popup--desktop-left .m-modal__content,
  .umktg-popup--desktop-left .umktg-modal__content {
    flex-direction: row-reverse;
  }
  .umktg-popup--desktop-right .m-modal__content,
  .umktg-popup--desktop-right .umktg-modal__content {
    flex-direction: row;
  }
  .umktg-popup--desktop-right .m-modal__close,
  .umktg-popup--desktop-right .umktg-modal__close {
    border: var(--umktg-wrapped-close-button-border--inverted, var(--umktg-button-border--inverted));
    box-shadow: var(--umktg-wrapped-close-button-shadow--inverted, var(--umktg-button-shadow--inverted));
    background-color: var(--umktg-wrapped-close-button-bg-color--inverted, var(--umktg-button-bg-color--inverted, #FFFFFF));
    color: var(--umktg-wrapped-close-button-line-color--inverted, var(--umktg-button-text-color--inverted, var(--umktg-button-bg-color, #3A5FFF)));
  }
  .umktg-popup--desktop-right .m-modal__close:is(a, button):hover,
  .umktg-popup--desktop-right .umktg-modal__close:is(a, button):hover {
    border: var(--umktg-wrapped-close-button-border-inverted--hover, var(--umktg-button-border--inverted-hover));
    box-shadow: var(--umktg-wrapped-close-button-shadow--inverted-hover, var(--umktg-button-shadow--inverted-hover));
    background-color: var(--umktg-wrapped-close-button-bg-color--inverted-hover, var(--umktg-button-bg-color--inverted-hover, #EFEFEF));
    color: var(--umktg-wrapped-close-button-line-color--inverted-hover, var(--umktg-button-text-color--inverted-hover, var(--umktg-button-bg-color, #3A5FFF)));
  }
}
@media screen and (max-width: 950px) {
  .umktg-popup--mobile-hide .umktg-popup__visual {
    display: none;
  }
  .umktg-popup--mobile-top .m-modal__content,
  .umktg-popup--mobile-top .umktg-modal__content {
    flex-direction: column-reverse;
  }
  .umktg-popup--mobile-top .m-modal__close,
  .umktg-popup--mobile-top .umktg-modal__close {
    border: var(--umktg-wrapped-close-button-border--inverted, var(--umktg-button-border--inverted));
    box-shadow: var(--umktg-wrapped-close-button-shadow--inverted, var(--umktg-button-shadow--inverted));
    background-color: var(--umktg-wrapped-close-button-bg-color--inverted, var(--umktg-button-bg-color--inverted, #FFFFFF));
    color: var(--umktg-wrapped-close-button-line-color--inverted, var(--umktg-button-text-color--inverted, var(--umktg-button-bg-color, #3A5FFF)));
  }
  .umktg-popup--mobile-top .m-modal__close:is(a, button):hover,
  .umktg-popup--mobile-top .umktg-modal__close:is(a, button):hover {
    border: var(--umktg-wrapped-close-button-border-inverted--hover, var(--umktg-button-border--inverted-hover));
    box-shadow: var(--umktg-wrapped-close-button-shadow--inverted-hover, var(--umktg-button-shadow--inverted-hover));
    background-color: var(--umktg-wrapped-close-button-bg-color--inverted-hover, var(--umktg-button-bg-color--inverted-hover, #EFEFEF));
    color: var(--umktg-wrapped-close-button-line-color--inverted-hover, var(--umktg-button-text-color--inverted-hover, var(--umktg-button-bg-color, #3A5FFF)));
  }
  .umktg-popup--mobile-bottom .m-modal__content,
  .umktg-popup--mobile-bottom .umktg-modal__content {
    flex-direction: column;
  }
}
@media screen and (max-width: 950px) {
  .umktg-popup__visual {
    width: 100%;
    height: var(--umktg-popup-visual-height--mobile, 200px);
  }
  .umktg-popup__pane {
    padding: var(--umktg-popup-padding--mobile, 20px);
  }
  .umktg-popup .m-modal__container,
  .umktg-popup .umktg-modal__container {
    padding-inline: var(--umktg-popup-content-padding--mobile, 20px) !important;
  }
  .umktg-popup .m-modal__wrapper,
  .umktg-popup .umktg-modal__wrapper {
    width: 100%;
    max-width: var(--umktg-popup-max-width--mobile, 450px);
    max-height: var(--umktg-popup-max-height--mobile, calc(100% - 40px));
  }
  .umktg-popup .m-modal__close,
  .umktg-popup .umktg-modal__close {
    top: 10px;
    right: 10px;
  }
}
/*# sourceMappingURL=useful-marketing-popups-addon.css.map */