/* Button Block Base Style
=================================================*/
/* Universal Button Variant Styles
=================================================*/
#siteWrapper.site-wrapper .sqs-button-element--primary {
  padding: var(--primary-button-padding-y) var(--primary-button-padding-x);
}
#siteWrapper.site-wrapper .sqs-button-element--primary {
  border-width: var(--primary-button-stroke);
}
#siteWrapper.site-wrapper .sqs-button-element--primary {
  line-height: normal;
  border-style: solid;
}
/* Specific Button Style Overrides
=================================================*/
/* Button Block Style Tweak: Solid
=================================================*/
body.primary-button-style-solid .sqs-button-element--primary {
  transition: 0.1s opacity linear;
  -webkit-backface-visibility: hidden;
}
@media (hover: hover) {
  body.primary-button-style-solid .sqs-button-element--primary:hover {
    opacity: 0.8;
  }
}
/* Button Block Style Tweak: Outline
=================================================*/
/* Primary Button Shape Tweak: Square
=================================================*/
/* Primary Button Shape Tweak: Rounded
=================================================*/
/* Primary Button Shape Tweak: Pill
=================================================*/
.primary-button-shape-pill .sqs-button-element--primary {
  border-radius: 300px;
}
/* Primary Button Shape Tweak: Oval
=================================================*/
/* Primary Button Shape Tweak: Petal
=================================================*/
/* Button Block Shape Tweak: Underline
=================================================*/
/* Primary Button Shape Tweak: Custom
=================================================*/
/* Secondary Button Shape Tweak: Square
=================================================*/
/* Secondary Button Shape Tweak: Rounded
=================================================*/
/* Secondary Button Shape Tweak: Pill
=================================================*/
/* Secondary Button Shape Tweak: Oval
=================================================*/
/* Secondary Button Shape Tweak: Underline
=================================================*/
/* Secondary Button Shape Tweak: Petal
=================================================*/
/* Secondary Button Shape Tweak: Custom
=================================================*/
/* Tertiary Button Shape Tweak: Square
=================================================*/
/* Tertiary Button Shape Tweak: Rounded
=================================================*/
/* Tertiary Button Shape Tweak: Pill
=================================================*/
/* Tertiary Button Shape Tweak: Oval
=================================================*/
/* Tertiry Button Shape Tweak: Underline
=================x================================*/
/* Tertiary Button Shape Tweak: Petal
=================================================*/
/* Tertiary Button Shape Tweak: Custom
=================================================*/
/* Extended styling for Form block with support for tweaks
=================================================*/
/* Form Field Padding */
/* Form Field Fill Tweak: Solid
=================================================*/
/* Form Field Fill Tweak: Outline
=================================================*/
/* Form Field Shape Tweak: Square
=================================================*/
.form-field-shape-square {
  /* Form Field Border Tweak: None
  =================================================*/
  /* Form Field Border Tweak: All
  =================================================*/
  /* Form Field Border Tweak: Bottom
  =================================================*/
}
/* Form Field Shape Tweak: Rounded
=================================================*/
/* Form Field Shape Tweak: Pill
=================================================*/
/* Form Field Shape Tweak: Custom
=================================================*/
/* Correct padding and border width for prefix element
=================================================*/
/* Form accessory
=================================================*/
/* Checkbox field */

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email {
  --background-color-hsl: var(--dynamic-fill-color-hsl, var(--fallback-white-hsl));
  --background-color-alpha: var(--dynamic-fill-color-a, 1);
  --background-color-alpha-default: var(--dynamic-fill-color-a, 1);
  --checked-background-color-hsl: var(--dynamic-border-color-hsl, var(--fallback-black-hsl));
  --checked-background-color-alpha: var(--dynamic-border-color-a, 1);
  --checked-background-color-alpha-default: var(--dynamic-border-color-a, 1);
  --checked-foreground-color: var(--dynamic-fill-color, #fafafa);
  --hover-alpha-modifier: var(--solid-hover-alpha-modifier);
  --checked-hover-alpha-modifier: var(--inverted-solid-hover-alpha-modifier);
}

.form-field-checkbox-fill-solid.form-field-checkbox-color-inverted .form-item.email label {
  column-gap: var(--form-field-checkbox-space-between-icon-and-text);
  cursor: pointer;
}
/* Radio field */
/* Survey field */
/* Form Spacing
=================================================*/
/* Form focus outlines
=================================================*/
input:focus {
  outline-style: solid;
  outline-color: var(--dynamic-border-color, var(--navigationLinkColor));
  outline-width: 2px;
  outline-offset: 2px !important;
}
/* Form input color
=================================================*/
/* Line color (Survey field and Line field)
=================================================*/
/* Form lightbox background color
=================================================*/
/* Override theme colors for the lightbox form if use-theme-color is toggled off
=================================================*/
/* Override text area height
=================================================*/
/* Effects configuration
================================================= */
/* Grid Normalization
================================================= */
/* Effects base config
================================================= */
/* Hover/Focus states global config
================================================= */
/* Hover/Focus states opacity config (3 available types - accent, opacity, scale-up)
================================================= */
/* Border thickness increase effect
================================================= */
/* Opacity change effect
================================================= */
/* Accent color effect (transform)
================================================= */
/* Scale up effect (transform)
================================================= */
/* Highlight base config (3 available types - single-trace, double-trace, glow)
================================================= */
/* Single & Double Trace Highlight Styles
================================================= */
@keyframes animation-form-field-fx-highlight-trace {
  0% {
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(0deg);
  }
  25% {
    left: min(50%, 2.5em);
    transform: translate3d(-50%, -50%, 0) scaleY(1.5) scaleX(1) rotate(90deg);
  }
  50% {
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(180deg);
  }
  75% {
    left: calc(100% - min(2.5em, 50%));
    transform: translate3d(-50%, -50%, 0) scaleY(1.5) scaleX(1) rotate(270deg);
  }
  100% {
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(360deg);
  }
}
/* Note: Separate namespace for double trace so animation progress is not retained on switch */
@keyframes animation-form-field-fx-highlight-double-trace {
  0% {
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(0deg);
  }
  25% {
    left: min(50%, 2.5em);
    transform: translate3d(-50%, -50%, 0) scaleY(1.5) scaleX(1) rotate(90deg);
  }
  50% {
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(180deg);
  }
  75% {
    left: calc(100% - min(2.5em, 50%));
    transform: translate3d(-50%, -50%, 0) scaleY(1.5) scaleX(1) rotate(270deg);
  }
  100% {
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(360deg);
  }
}
@keyframes animation-form-field-fx-highlight-trace-bottom {
  0% {
    left: calc(100% + 2.5em);
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(0deg);
  }
  100% {
    left: -2.5em;
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(0deg);
  }
}
/* Note: Separate namespace for double trace so animation progress is not retained on switch */
@keyframes animation-form-field-fx-highlight-double-trace-bottom {
  0% {
    left: calc(100% + 2.5em);
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(0deg);
  }
  100% {
    left: -2.5em;
    transform: translate3d(-50%, -50%, 0) scaleY(1) scaleX(3) rotate(0deg);
  }
}
/* Glow Highlight Styles
================================================= */
@keyframes animation-form-field-fx-highlight-glow {
  0% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}
@keyframes shake-three {
  0% {
    transform: translate3d(0, 0, 0);
  }
  16.666% {
    transform: translate3d(0.333rem, 0, 0);
  }
  33.333% {
    transform: translate3d(-0.333rem, 0, 0);
  }
  50% {
    transform: translate3d(0.333rem, 0, 0);
  }
  66.666% {
    transform: translate3d(-0.333rem, 0, 0);
  }
  83.333% {
    transform: translate3d(0.333rem, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* SPINNER button (conic gradient)
=================================================*/
@keyframes keyframes-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes keyframes-spinner-check {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}
/* CIRCLE button (spinning circle)
=================================================*/
@keyframes keyframes-circle {
  from,
  to {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(1440deg);
  }
}
@keyframes keyframes-circle-check {
  from {
    transform: translate3d(0%, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
/* BAR & ELLIPSIS button submitted state style (shared)
=================================================*/
@keyframes keyframes-check {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0%, 0, 0);
  }
}
/* BAR button (indeterminate progress)
=================================================*/
@keyframes keyframes-bar {
  from {
    transform: translate3d(-200%, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
/* ELLIPSIS button (3 dots)
=================================================*/
@keyframes keyframes-ellipsis-grow {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes keyframes-ellipsis-shrink {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
@keyframes keyframes-ellipsis-shift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(calc(0.35em * 2), 0);
  }
}
@keyframes anim-form-post-submit {
  from {
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* Button Block Base Style
=================================================*/
/* Universal Button Variant Styles
=================================================*/
#siteWrapper.site-wrapper .sqs-button-element--primary {
  padding: var(--primary-button-padding-y) var(--primary-button-padding-x);
}
#siteWrapper.site-wrapper .sqs-button-element--primary {
  border-width: var(--primary-button-stroke);
}
#siteWrapper.site-wrapper .sqs-button-element--primary {
  line-height: normal;
  border-style: solid;
}
/* Specific Button Style Overrides
=================================================*/
/* Button Block Style Tweak: Solid
=================================================*/
body.primary-button-style-solid .sqs-button-element--primary {
  transition: 0.1s opacity linear;
  -webkit-backface-visibility: hidden;
}
@media (hover: hover) {
  body.primary-button-style-solid .sqs-button-element--primary:hover {
    opacity: 0.8;
  }
}
/* Button Block Style Tweak: Outline
=================================================*/
/* Primary Button Shape Tweak: Square
=================================================*/
/* Primary Button Shape Tweak: Rounded
=================================================*/
/* Primary Button Shape Tweak: Pill
=================================================*/
.primary-button-shape-pill .sqs-button-element--primary {
  border-radius: 300px;
}
/* Primary Button Shape Tweak: Oval
=================================================*/
/* Primary Button Shape Tweak: Petal
=================================================*/
/* Button Block Shape Tweak: Underline
=================================================*/
/* Primary Button Shape Tweak: Custom
=================================================*/
/* Secondary Button Shape Tweak: Square
=================================================*/
/* Secondary Button Shape Tweak: Rounded
=================================================*/
/* Secondary Button Shape Tweak: Pill
=================================================*/
/* Secondary Button Shape Tweak: Oval
=================================================*/
/* Secondary Button Shape Tweak: Underline
=================================================*/
/* Secondary Button Shape Tweak: Petal
=================================================*/
/* Secondary Button Shape Tweak: Custom
=================================================*/
/* Tertiary Button Shape Tweak: Square
=================================================*/
/* Tertiary Button Shape Tweak: Rounded
=================================================*/
/* Tertiary Button Shape Tweak: Pill
=================================================*/
/* Tertiary Button Shape Tweak: Oval
=================================================*/
/* Tertiry Button Shape Tweak: Underline
=================x================================*/
/* Tertiary Button Shape Tweak: Petal
=================================================*/
/* Tertiary Button Shape Tweak: Custom
=================================================*/
/*
  Constants
  Role: A single location to organize variables that are utilized globally
*/
/*
  ================
  Z-index
  Role: Organize z-index overrides
  ================
*/
/*
  ================
  Breakpoints
  Role: Organize global breakpoint ranges
  ================
*/
/*
  ================
  Padding
  Role: Organize consistent padding
  ================
*/
/*
  ================
  Button
  Role: Organize button configurations
  ================
*/
/* These appear to be deprecated. */
/*
  ================
  Container
  Role: Container max width configuration
  ================
*/
/*
  ================
  Gallery Caption
  Role: gallery caption configuration
  ================
*/
/*===================================================
      GLOBAL ANIMATIONS

      Notes:
      - The reason why we want to use static CSS for pre-animation
      styling is because we want the pre-animation styling to be
      applied strictly before the post-animation styling is applied
      through the controller. This avoids a whole class of
      asynchronous issues.

      - tweak-global-animations-animation-curve: custom cubic-bezier value is so we can have easeOutExpo CSS style (https://easings.net/en#easeOutExpo)
 ===================================================*/
/*
 * Rule needed in order for clip and flex animations to work consistently for all image animation targets.
 * There are known edge cases in both Safari and Firefox's Intersection Observer when image or its parent container's
 * height is 0. Adding minimum height will allow the Intersection Observer to work in these 2 browsers.
 * This also fixes an issue in Chrome 97 where images with shapes in card/collage/overlap/stack layout do not render
 */
[data-animation-role='image'] {
  min-height: 1px;
}
@keyframes clipAnimation {
  0% {
    -webkit-clip-path: polygon(0 0, 10% 0, 0% 100%, 0% 100%);
    clip-path: polygon(0 0, 10% 0, 0% 100%, 0% 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
.preFade {
  opacity: 0;
  transition-property: opacity;
}
.fadeIn {
  opacity: 1 !important;
}
.slideIn {
  transform: translate(0, 0) !important;
}
.slideIn {
  opacity: 1 !important;
}

.tweak-global-animations-animation-type-slide header,
.tweak-global-animations-animation-type-slide footer,
.tweak-global-animations-animation-type-slide section > .content-wrapper {
  opacity: 0;
}

.tweak-global-animations-animation-type-slide[data-animation-state='booted'] header,
.tweak-global-animations-animation-type-slide[data-animation-state='booted'] footer,
.tweak-global-animations-animation-type-slide[data-animation-state='booted']
  section
  > .content-wrapper {
  opacity: 1;
}
@keyframes loading-dot-2 {
  from {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
}
@keyframes loading-dot-3 {
  from {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes gallery-image-enter-from-right {
  from {
    transform: translateX(101%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes gallery-image-exit-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-101%);
  }
}
@keyframes gallery-image-enter-from-left {
  from {
    transform: translateX(-101%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes gallery-image-exit-to-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(101%);
  }
}
