@charset "UTF-8";
/*
Global styles for use across all components
*/
/*
Accessibility styles for use across all components
*/
.screen-reader-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

/*
  Sass Utils

  Weight: -9

  Styleguide Sass Utils
 */
/*
  map_deep_get()

  @function map-deep-get($map, $keys...)\
  Returns a nested value from a map.

  **Example:**
  ```
  $colors: (
    theme1: (
      red:    #FF0000,
      blue:   #0000FF
    ),
    theme2: (
      red:    #AA0000,
      green:  #00AA00
    )
  );

  background: map-deep-get($colors, theme1, red);
  ```

  $map - Map
  $keys - Keys to fetch

  Styleguide Sass Utils.Map Deep Get
*/
/*
  Colors and themes

  Sydney Waters has several themes. Each theme has 3 colors (`primary`, `secondary` and `tertiary`)
  with 4 shades each (`key`, `background`, `medium` and `dark`)
  and neutrals (greyscale) in 10% steps.
  Only the primary colors differ between the themes, the rest stays the same.

  Weight: -10

  Style guide: Colors
 */
/* button colors */
/* Breakout Colors */
/*
  map_next()

  @function map_next($map, $key)\
  Returns the next key in a map. Adjusted from zurb foundation.

  **Example:**

  $map - Map to traverse.
  $key - Key to use as a starting point.

  Styleguide Sass Utils.map_next
 */
/*
  icon_only()

  @mixin icon_only($content, $width, $height: $width)\
  turns an element into a fontawesome icon, accessibly hiding any additional text

  @todo: map for icon content

  **Example:**
  ```
  a {
    @include icon_only('\f00d', 3rem)
  }
  ```

  $content - fontawesome unicode for icon (https://fontawesome.com/icons/)
  $width - width of the element
  $height - height of the element. Defaults to width for square.

  Styleguide Sass Utils.icon_only
 */
/*
  Sass Utils

  Weight: -9

  Styleguide Sass Utils
 */
/*
  map_deep_get()

  @function map-deep-get($map, $keys...)\
  Returns a nested value from a map.

  **Example:**
  ```
  $colors: (
    theme1: (
      red:    #FF0000,
      blue:   #0000FF
    ),
    theme2: (
      red:    #AA0000,
      green:  #00AA00
    )
  );

  background: map-deep-get($colors, theme1, red);
  ```

  $map - Map
  $keys - Keys to fetch

  Styleguide Sass Utils.Map Deep Get
*/
.cmp-text {
  margin: 0 !important;
}
.cmp-text p:last-child {
  margin-bottom: 0;
}

.no-min-height {
  min-height: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

.cmp-image__link {
  text-decoration: none !important;
}

.sw-table-heading {
  background-color: #BEEEFC;
}
.sw-table-heading div p {
  font-weight: 600;
}

@media (max-width: 773px) {
  .sw-table-heading {
    background-color: unset;
  }
  .sw-table-heading div p {
    font-weight: normal;
  }
}
.sw-logo .cmp-image__image {
  border-radius: 0px !important;
}

/* CDC overriding styles */
.cdc-container .sw-screen .sw-spacer.sw-bg-transparent {
  background: #f7f7fb;
}

/* Typography
 * Rules
 * Markup: kss-example-typography.hbs
 * Weight: -10
 * Style guide: Typography
 */
/* Typography Sass
 * We use [typey] to generate better typography rules.
 * Use Typey’s functions (font-size, line-height, etc.) and rhythm-based spacing.
 * Style guide: Typography.Sass
 */
/* Module imports (Dart Sass) */
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts: https://clicktime.symantec.com/3Fj6dGyuY3ycqUawJuouCkm7Vc?u=http%3A%2F%2Fwww.monotype.com%2F
*/
@font-face {
  font-family: "Rustica";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("clientlib-cdc/site/styles/src/assets/resources/fonts/rustica/Rustica_normal_normal_400.woff2") format("woff2"), url("clientlib-cdc/site/styles/src/assets/resources/fonts/rustica/Rustica_normal_normal_400.woff") format("woff");
}
@font-face {
  font-family: "Rustica";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("clientlib-cdc/site/styles/src/assets/resources/fonts/rustica/Rustica_normal_normal_500.woff2") format("woff2"), url("clientlib-cdc/site/styles/src/assets/resources/fonts/rustica/Rustica_normal_normal_500.woff") format("woff");
}
@font-face {
  font-family: "Rustica";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("clientlib-cdc/site/styles/src/assets/resources/fonts/rustica/Rustica_normal_normal_700.woff2") format("woff2"), url("clientlib-cdc/site/styles/src/assets/resources/fonts/rustica/Rustica_normal_normal_700.woff") format("woff");
}
/*
  Sass Utils

  Weight: -9

  Styleguide Sass Utils
 */
/*
  map_deep_get()

  @function map-deep-get($map, $keys...)\
  Returns a nested value from a map.

  **Example:**
  ```
  $colors: (
    theme1: (
      red:    #FF0000,
      blue:   #0000FF
    ),
    theme2: (
      red:    #AA0000,
      green:  #00AA00
    )
  );

  background: map-deep-get($colors, theme1, red);
  ```

  $map - Map
  $keys - Keys to fetch

  Styleguide Sass Utils.Map Deep Get
*/
/* Typey setup (keep as-is) */
/* Commonly used typeface settings (do not include font-size/line-height here) */
/* Optional theme-specific maps (if you have them in your project). 
 * Leave undefined if you only use `theme: central`.
 */
/* Responsive typography styles */
/* typestyle_at_breakpoint($typestyle, $bp, $theme)
 * Emits declarations for one breakpoint block from a typestyle map.
 * Used internally by `typeset(...)`.
 * Style guide: Typography.Sass.typestyle_at_breakpoint()
 */
/* typeset($typestyle, $theme)
 * Emits responsive typography rules based on $typestyles.
 * Style guide: Typography.Sass.typeset()
 */
/* fa-icon($color)
 * Utility to emit a Font Awesome chevron (content + font family/weight).
 * Note: Requires Font Awesome CSS loaded globally.
 */
/* get_spacing($spacing, $context: $base-line-height)
 * Return rhythm-based spacing values (works in calc()).
 * Example: padding: get_spacing(1 2);
 */
/*
  Sass Utils

  Weight: -9

  Styleguide Sass Utils
 */
/*
  map_deep_get()

  @function map-deep-get($map, $keys...)\
  Returns a nested value from a map.

  **Example:**
  ```
  $colors: (
    theme1: (
      red:    #FF0000,
      blue:   #0000FF
    ),
    theme2: (
      red:    #AA0000,
      green:  #00AA00
    )
  );

  background: map-deep-get($colors, theme1, red);
  ```

  $map - Map
  $keys - Keys to fetch

  Styleguide Sass Utils.Map Deep Get
*/
* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: #252425;
  font-weight: normal;
}

button {
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

p {
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  color: #252425;
  font-weight: normal;
}

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

.sw-show {
  display: block;
}

/* Alignment Css */
.sw-left-align {
  text-align: left;
}

.sw-right-align {
  text-align: right;
}

/* Float Css */
.sw-float-left {
  float: left;
}

.sw-float-right {
  float: right;
}

/* Smart Data Css */
.container.sw-smartDataContainer {
  top: 0;
  background-color: #fff;
  padding: 0 !important;
  margin-bottom: 20px;
}
.container.sw-smartDataContainer > .cmp-container {
  padding-top: 30px;
}

/* Full Width Container Mobile */
@media (max-width: 773px) {
  .sw-child-mobile-fw .container {
    width: 100% !important;
  }
}

/* React Container */
.aem-GridColumn.aem-GridColumn--default--none::after {
  content: "";
  display: table;
  clear: both;
}

.react-app-container.aem-GridColumn::after {
  content: "";
  display: table;
  clear: both;
}

/* Background Css */
.sw-sdp-bg {
  background-color: #fafafa;
}

.sw-bg-blue {
  background-color: #f7f7fb;
}

.sw-bg-white {
  background-color: #fff;
}

/* Padding Css */
.sw-padBot-0 {
  padding-bottom: 0px;
}

.sw-padBot-5 {
  padding-bottom: 5px;
}

.sw-padBot-10 {
  padding-bottom: 10px;
}

.sw-padBot-15 {
  padding-bottom: 15px;
}

.sw-padBot-20 {
  padding-bottom: 20px;
}

.sw-padBot-25 {
  padding-bottom: 25px;
}

.sw-padBot-30 {
  padding-bottom: 30px;
}

.sw-padBot-35 {
  padding-bottom: 35px;
}

.sw-padBot-40 {
  padding-bottom: 40px;
}

.sw-padBot-45 {
  padding-bottom: 45px;
}

.sw-padBot-50 {
  padding-bottom: 50px;
}

.sw-padBot-60 {
  padding-bottom: 60px;
}

.sw-padBot-65 {
  padding-bottom: 65px;
}

.sw-padBot-70 {
  padding-bottom: 70px;
}

.sw-padBot-75 {
  padding-bottom: 75px;
}

.sw-padBot-80 {
  padding-bottom: 80px;
}

.sw-padBot-90 {
  padding-bottom: 90px;
}

.sw-padBot-100 {
  padding-bottom: 100px;
}

.sw-padBot-105 {
  padding-bottom: 105px;
}

.sw-padBot-120 {
  padding-bottom: 120px;
}

.sw-padTop-0 {
  padding-top: 0px;
}

.sw-padTop-15 {
  padding-top: 15px;
}

.sw-padTop-30 {
  padding-top: 30px;
}

.sw-padTop-45 {
  padding-top: 45px;
}

.sw-padTop-60 {
  padding-top: 60px;
}

.sw-padTop-75 {
  padding-top: 75px;
}

.sw-padTop-90 {
  padding-top: 90px;
}

.sw-padTop-105 {
  padding-top: 105px;
}

.sw-padTop-120 {
  padding-top: 120px;
}

.sw-semi-bold-f {
  font-weight: 600;
}

/* loader css */
.circular {
  animation: rotate 2s linear infinite;
  height: 25px;
  transform-origin: center center;
  width: 25px;
  margin: 10px auto;
  display: block;
  position: absolute;
  z-index: 1;
}

.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #2BACCC;
  }
  40% {
    stroke: #00259b;
  }
  66% {
    stroke: #46e6be;
  }
  80%, 90% {
    stroke: #46e6be;
  }
}
.sw-no-scroll {
  overflow: hidden;
}

/* Slide animations (right to left) */
.slide-in-right {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in-right 0.5s forwards;
  overflow-x: hidden;
}

.slide-out-right {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out-right 0.5s forwards;
  overflow-x: hidden;
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
@keyframes slide-out-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Slide animations (left to right) */
.slide-in-left {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in-left 0.5s forwards;
  overflow-x: hidden;
}

.slide-out-left {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out-left 0.5s forwards;
  overflow-x: hidden;
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
@keyframes slide-out-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .circular { /* IE11 */
    border: 2px solid #00259b;
    border-radius: 100%;
    border-top-color: #2BACCC;
  }
}
/* Remove Tooltip from Form */
.guideContainerWrapperNode .tooltip {
  display: none !important;
}

/* CSS for stretched Background */
.sw-stretched-bg {
  width: 100vw;
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
}

.sw-up-layout {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.sw-up-overlay {
  position: relative;
  top: -150px;
}
@media (max-width: 1150px) {
  .sw-up-overlay {
    top: 0px;
  }
}

/* Style for print layout */
@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background-color: white !important;
  }
  html {
    font-size: 12pt;
  }
  .sw-feature-panel-img {
    display: none !important;
  }
  .sw-header-search {
    display: none !important;
  }
  .breadcrumb {
    display: none !important;
  }
  .sw-header-links {
    display: none !important;
  }
  .sw-login-dropdown {
    display: none !important;
  }
  .sw-hamburger-menu {
    display: none !important;
  }
  .sw-header .sw-header-wrapper {
    box-shadow: none !important;
    padding: 0 0 0 0 !important;
  }
  .sw-grey-separator {
    display: none !important;
  }
  .sw-blue-separator .cmp-separator {
    display: none !important;
  }
  .map-frame {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .sw-header .sw-header-wrapper .sw-logo-wrapper .sw-image-container img {
    content: url("../../../content/dam/sydneywater/urban-plunge/sw-logo-trans.png");
    -moz-margin-start: -46px;
  }
  .inpagenavigation {
    display: none !important;
  }
  .footer {
    display: none !important;
  }
  .hide-gsp-print-summary {
    display: none;
  }
  .quicklinks {
    display: none !important;
  }
  .youtube {
    display: none !important;
  }
  .sw-breakout-container {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .MuiPaper-root {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .cx-widget {
    display: none !important;
  }
  tr {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .sw-image-container {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .sw-campaign-img {
    display: none !important;
  }
  .hp-single-tile {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .up-footer {
    display: none !important;
  }
  .sw-category-container .sw-category-item .category-item .sw-image-container {
    height: 100% !important;
  }
  .campaign {
    min-height: 0px !important;
  }
  .featurepanel {
    margin-top: 20px;
  }
  .sw-feature-panel-wrapper .sw-feature-panel-text-wrapper {
    width: 100% !important;
    position: relative !important;
  }
  .sw-feature-panel-wrapper .sw-feature-panel-text {
    padding-top: 20px !important;
  }
  .navigation {
    display: none !important;
  }
  .sw-advertisement-img {
    display: block no-repeat !important;
    height: 100% !important;
  }
  .pwd-link-container {
    display: none !important;
  }
  .sw-category-container .sw-category-item .category-item .sw-image-container img {
    margin-top: 1px;
  }
  .cmp-tabs__tablist {
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
  .sw-inter-comp-space {
    padding-bottom: 10px !important;
  }
  .sw-blue-separator {
    padding: 20px 0 !important;
  }
}
/* Style for payments */
.payment-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #505050;
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
}
.payment-container .payment-type-container {
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.payment-container .pay-options {
  display: flex;
  flex-direction: row;
}
.payment-container .flx-center {
  display: flex;
  align-items: center;
}
.payment-container .pl-5 {
  padding-left: 5px;
}
.payment-container .checkbox-el {
  position: relative;
  margin-left: 4px;
  width: 20px;
  float: left;
  margin: 2px 10px 2px 1px;
  height: 20px;
  border-radius: 50%;
  vertical-align: middle;
  border: 2px solid #505050;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
}
.payment-container .checkbox-el-active {
  border: 1px solid #00259b !important;
}
.payment-container .checkbox-el input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}
.payment-container .checkbox-circle {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(0.5);
  transition: all 0.25s ease-in;
}
.payment-container .checkbox-circle-active {
  background-color: #00259b;
  transform: scale(1.5);
}
.payment-container .direct-debit-info {
  padding: 5px 30px 20px 30px;
  display: none;
}
.payment-container .dc-card-surcharge {
  padding-left: 30px;
  padding-right: 30px;
  display: none;
}
@media (max-width: 991px) {
  .payment-container .dc-card-surcharge {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;
  }
}
.payment-container .sw-dc-change-card {
  display: none;
  margin: 20px 0px 20px 35px;
}
@media (max-width: 991px) {
  .payment-container .sw-dc-change-card {
    margin-left: 3px !important;
  }
}
@media (max-width: 773px) {
  .payment-container .saved-dc-container {
    width: 99%;
  }
}
.payment-container .sw-cbm-pay-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.payment-container-active {
  border: 1px solid #00259b !important;
  box-shadow: 0px 0px 0px 1px #00259b;
}

.sw-gpay-btn-cust {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  background-repeat: no-repeat;
  background-position: center;
}

.sw-cbm-btn-pad {
  margin-left: 0px !important;
}

.sw-cbm-btn-pad button {
  margin-left: 0px !important;
}

.sw-payment-request-btn-ctr {
  width: 200px;
  height: 50px;
}

.payment-option-disabled {
  opacity: 0.5;
}

.westpac-qs-frame {
  padding-left: 30px;
  padding-right: 30px;
}
@media (max-width: 991px) {
  .westpac-qs-frame {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.sw-apple-cust-btn {
  display: none;
}

.prf-file-top-8 {
  position: relative;
  float: right;
  padding-right: 0px !important;
  top: -8px;
}
@media (max-width: 991px) {
  .prf-file-top-8 {
    float: none;
    padding-left: 0px !important;
  }
}
@media (max-width: 773px) {
  .prf-file-top-8 {
    float: none;
    padding-left: 0px !important;
  }
}

.prf-file-top-10 {
  position: relative;
  float: right;
  padding-right: 0px !important;
  top: -8px;
}
@media (max-width: 991px) {
  .prf-file-top-10 {
    float: none;
    padding-left: 0px !important;
  }
}
@media (max-width: 773px) {
  .prf-file-top-10 {
    float: none;
    padding-left: 0px !important;
  }
}

.prf-bnf-dt-top {
  position: relative;
  float: right;
  padding-right: 0px !important;
  top: -60px;
}
@media (max-width: 991px) {
  .prf-bnf-dt-top {
    float: none;
    padding-left: 0px !important;
    top: 0px;
  }
}
@media (max-width: 773px) {
  .prf-bnf-dt-top {
    float: none;
    padding-left: 0px !important;
    top: 0px;
  }
}

.prf-addl-attch {
  position: relative;
  float: right;
  padding-right: 0px !important;
  top: -20px;
}
@media (max-width: 991px) {
  .prf-addl-attch {
    float: none;
    padding-left: 0px !important;
    top: 0px;
  }
}
@media (max-width: 773px) {
  .prf-addl-attch {
    float: none;
    padding-left: 0px !important;
    top: 0px;
  }
}

.prf-sol-attch {
  position: relative;
  float: right;
  padding-right: 0px !important;
  top: -70px;
}
@media (max-width: 991px) {
  .prf-sol-attch {
    float: none;
    padding-left: 0px !important;
    top: 0px;
  }
}
@media (max-width: 773px) {
  .prf-sol-attch {
    float: none;
    padding-left: 0px !important;
    top: 0px;
  }
}

.prf-panel-spc {
  padding-left: 10px;
  padding-right: 10px;
}
@media (max-width: 760px) {
  .prf-panel-spc {
    padding-left: 8.83%;
    padding-right: 8.83%;
  }
}

.experiencefragment.aem-GridColumn.aem-GridColumn--default--12 {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 773px) {
  .widerLayout {
    max-width: 774px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
}
@media (max-width: 1199px) {
  .widerLayout {
    max-width: 774px !important;
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
}

.sw-cmp-container-full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -49vw !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
@media (max-width: 1149px) {
  .sw-cmp-container-full-width {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
.sw-cmp-container-full-width > div {
  max-width: 1110px;
  margin: 0 auto;
}

ul,
ol {
  padding-inline-start: 17px;
}

/*
  Loader

  Loader animation on page load
  Markup: loader.hbs
  Style guide: Components.loader
*/
.sw-loader-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sw-loader-text {
  text-align: center;
  margin-top: 40px;
  max-width: 230px;
  padding: 0 10px;
}
.sw-loader-text p {
  margin: 0;
  color: #00006E;
  line-height: 1.125rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#innerCircle {
  fill: #ffffff !important;
}

.outerWrap {
  height: 230px;
  width: 230px;
  justify-content: center;
}

.rippleOuter {
  position: absolute;
}

.wrap {
  width: 100px;
  height: 200px;
  margin: 0 auto;
}

.drop {
  background: #00259b;
  border-radius: 100% 5% 100% 100%;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 10px;
  margin-left: -20px;
  position: absolute;
  transform: rotate(-45deg);
}

.drop circle {
  fill: #00259b;
}

.drop-wrap {
  animation: drop 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0s infinite;
}

.drop-outer {
  position: absolute;
  box-sizing: border-box;
  /* border: 1px solid #333; */
  width: 100px;
  height: 200px;
  overflow: hidden;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  background-clip: padding-box;
}

.ripple {
  position: absolute;
  box-sizing: border-box;
  width: 240px;
  height: 240px;
  top: 68px;
  left: -70px;
  perspective: 100;
  transform: rotateX(65deg);
}

.ripple .ripple-svg {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: 0;
}

.ripple .ripple-svg circle {
  fill: none;
  stroke: #46e6be;
  stroke-width: 10px;
}

.ripple-1 {
  animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}
.ripple-1 .ripple-svg {
  animation: fade-in-out 2s linear 0s infinite;
}
.ripple-1 .ripple-svg circle {
  animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s infinite;
}

.ripple-2 {
  animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}
.ripple-2 .ripple-svg {
  animation: fade-in-out 2s linear 0.2s infinite;
}
.ripple-2 .ripple-svg circle {
  animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s infinite;
}

.ripple-3 {
  animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}
.ripple-3 .ripple-svg {
  animation: fade-in-out 2s linear 0.35s infinite;
}
.ripple-3 .ripple-svg circle {
  animation: border 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s infinite;
}

@keyframes drop {
  0% {
    transform: scale3d(0.01, 0.01, 0.01) translateY(0);
  }
  10% {
    transform: scale3d(1, 1, 1);
  }
  44% {
    transform: scale3d(1, 1, 1) translateY(220px);
  }
  100% {
    transform: scale3d(1, 1, 1) translateY(220px);
  }
}
@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ripple {
  0% {
    transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2);
  }
  42% {
    transform: rotateX(65deg) scale3d(0.2, 0.2, 0.2);
  }
  100% {
    transform: rotateX(65deg) scale3d(0.9, 0.9, 0.9);
  }
}
@keyframes border {
  0% {
    stroke-width: 3px;
  }
  42% {
    stroke-width: 2px;
  }
  100% {
    stroke-width: 1px;
  }
}
/*
  Text

  Styling different Text Components
  Markup: text.hbs
  Style guide: Components.Text
*/
h1 {
  color: #000C6E;
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.27px;
  margin: 0 0 28px;
}
@media (max-width: 773px) {
  h1 {
    font-size: 1.75rem;
    line-height: 2rem;
    letter-spacing: 0.21px;
    margin: 0 0 39px;
  }
}

h2 {
  color: #000C6E;
  font-size: 2rem;
  line-height: 2rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.24px;
  margin: 0 0 27px;
}
@media (max-width: 773px) {
  h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: 0.18px;
    margin: 0 0 38px;
  }
}

h3 {
  color: #000C6E;
  font-size: 1.75rem;
  line-height: 1.75rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.21px;
  margin: 0 0 23px;
}
@media (max-width: 773px) {
  h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: 0.15px;
    margin: 0 0 26px;
  }
}

h4 {
  letter-spacing: 0.18px;
  margin: 0 0 19px;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 24px;
  font-weight: 500;
  color: #000C6E;
}
@media (max-width: 773px) {
  h4 {
    font-size: 1.125rem;
    line-height: 1.125rem;
    letter-spacing: 0.14px;
    margin: 0 0 25px;
  }
}

h5 {
  letter-spacing: 0.15px;
  margin: 0 0 27px;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  line-height: 20px;
  font-weight: 500;
  color: #000C6E;
}
@media (max-width: 773px) {
  h5 {
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.12px;
    margin: 0 0 31px;
  }
}

h6 {
  color: #000C6E;
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.12px;
  margin: 0 0 19px;
}
@media (max-width: 773px) {
  h6 {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1px;
    margin: 0 0 31px;
  }
}

p {
  color: rgba(0, 0, 0, 0.8705882353);
  font-size: 1rem;
  line-height: 1.375rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  letter-spacing: 0.12px;
}
@media (max-width: 773px) {
  p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1px;
  }
}

.small-text {
  color: rgba(0, 0, 0, 0.8705882353);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: normal;
  letter-spacing: 0.14px;
}
@media (max-width: 773px) {
  .small-text {
    font-size: 0.75rem;
    line-height: 1.25rem;
    letter-spacing: 0.1px;
  }
}

.section-text {
  color: #00259b;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 450;
  letter-spacing: 0.1px;
}
@media (max-width: 773px) {
  .section-text {
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.1px;
  }
}

.sw-blue {
  color: #000C6E;
}

.sw-semibold {
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8705882353);
}
@media (max-width: 773px) {
  .sw-semibold {
    font-size: 0.875rem;
  }
}

.cmp-text h2 {
  padding: 10px 0 30px 0;
  margin: 0;
}
.cmp-text h3, .cmp-text h4, .cmp-text h5, .cmp-text h6 {
  padding: 10px 0 20px 0;
  margin: 0;
}
.cmp-text p {
  padding: 0 0 30px 0;
  margin: 0;
}
.cmp-text p:has(+ ul), .cmp-text p:has(+ ol) {
  padding-bottom: 7px;
}
.cmp-text ul,
.cmp-text ol {
  padding: 0 0 30px 0;
  margin: 0;
  padding-inline-start: 17px;
}
.cmp-text ul li,
.cmp-text ol li {
  color: rgba(0, 0, 0, 0.8705882353);
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.375rem;
}
@media (max-width: 773px) {
  .cmp-text ul li,
  .cmp-text ol li {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.cmp-text ul li + li,
.cmp-text ol li + li {
  margin-top: 7px;
}
.cmp-text ul li::marker {
  font-size: 1.25rem;
}

.richtext-container ul,
.richtext-container ol {
  margin: 10px 0 16px;
}
.richtext-container ul li,
.richtext-container ol li {
  color: rgba(0, 0, 0, 0.8705882353);
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.375rem;
}
@media (max-width: 773px) {
  .richtext-container ul li,
  .richtext-container ol li {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.richtext-container ul li + li,
.richtext-container ol li + li {
  margin-top: 7px;
}

.sw-loader-text {
  text-align: center;
  margin-top: 40px;
  max-width: 230px;
  padding: 0 10px;
}
.sw-loader-text p {
  margin: 0;
  color: #00006E;
  line-height: 1.125rem;
  font-family: "Rustica", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}