@import 'https://pro.fontawesome.com/releases/v5.3.1/css/all.css';

/**
 * Base
 * ==============================
 */

:root {
  --color-white: #fff;
  --color-off-white: #e7eaed;
  --color-black: #000;
  --color-blue: #74a9f7;
  --color-blue-light: #def3f7;
  --color-blue-faded: #8095af;
  --color-blue-vibrant: #2a82e6;
  --color-purple: #490761;
  --color-purple-secondary: #43065f;
  --color-purple-dark: #370549;
  --color-purple-light: #a483b0;
  --color-purple-vibrant: #711e8f;
  --color-green: #5be0a6;
  --color-green-pale: #7ce7b8;
  --color-dark-green: #008489;
  --color-dark-green-secondary: #00a699;
  --color-light-green: #19ab27;
  --color-green-light: #c5f4e0;
  --color-green-vibrant: #50f1ab;
  --color-pale-forest-green-opacity30: rgb(124 231 184 / 30%);
  --color-storm-cloud-blue-gray-opacity50: rgb(128 149 175 / 50%);
  --color-gray: #63768d;
  --color-gray-mid: #d9dde9;
  --color-gray2: #657483;
  --color-gray-quarternary: #525252;
  --color-charcoal: #4a4a4a;
  --color-gray-dark: #475567;
  --color-gray-dark-secondary: #444f60;
  --color-off-gray: #b1bac6;
  --color-baby-blue: #d0edf3;
  --color-baby-blue-light: #def3f7;
  --color-lavender-dark: #937dac;
  --color-lavender: #e0afe9;
  --color-lavender-light: #dcc6e0;
  --color-coffee-stain: #9b9b9b;
  --color-beige: #f4f2ee;
  --color-red: #df436e;
  --color-light-red: #d9003c;
  --color-yellow: #ffefca;
  --color-header: var(--color-purple);
  --color-text-white: #f1f7f8;
  --color-text-light: var(--color-gray-dark);
  --color-text: #425563;
  --color-text-dark: #425061;
  --color-primary: var(--color-green);
  --color-error: var(--color-red);
  --color-focus: var(--color-blue-vibrant);
  --color-error-light: #df7d98;
  --color-remove: #e0afe9;
  --color-remove-light: #dcc6e0;
  --color-layout-signup-background: var(--color-gray);
  --color-layout-signup-secondary-background: var(--color-green);
  --color-layout-signup-info: var(--color-baby-blue);
  --color-off-white2: #e6e9ee;
  --color-salmon: #f9d8d3;
  --color-iceburg-light: #f1f7f8;
  --color-iceburg: #d0edf3;
  --color-toupe: #f4f2ee;

  /* Theme - colors */
  --theme-brand-primary: var(--color-purple);
  --theme-brand-secondary: var(--color-green);
  --theme-text-heading: var(--color-header);
  --theme-text-primary: var(--color-text);
  --theme-text-secondary: var(--color-text-white);
  --theme-horizontal-rule: var(--color-gray);

  /* Theme - font sizes */
  --theme-font-size-h1: 67px;
  --theme-font-size-h2: 40px;
  --theme-font-size-h3: 28px;
  --theme-font-size-h4: 24px;
  --theme-font-size-h5: 18px;
  --theme-font-size-h6: 16px;
  --theme-font-size-body1: 16px;
  --theme-font-size-body2: 14px;
  --theme-font-size-body3: 12px;
  --theme-font-size-caption: 12px;
}

@media screen and (min-width: 768px) {
  :root {
    --theme-font-size-h1: 144px;
    --theme-font-size-h2: 54px;
    --theme-font-size-h3: 34px;
    --theme-font-size-h4: 25px;
    --theme-font-size-h5: 21px;
    --theme-font-size-h6: 16px;
    --theme-font-size-body1: 18px;
    --theme-font-size-body2: 16px;
    --theme-font-size-body3: 14px;
    --theme-font-size-caption: 14px;
  }
}

* {
  box-sizing: border-box;
  font-family: 'GTHaptik', Helvetica, sans-serif;
  -webkit-font-feature-settings: 'ss01=1, onum=1';
          font-feature-settings: 'ss01=1, onum=1';
  -webkit-font-feature-settings: 'ss01', 'onum';
          font-feature-settings: 'ss01', 'onum';
  font-feature-settings: 'ss01', 'onum';
  font-feature-settings: 'ss01', 'onum';
  font-feature-settings: 'ss01', 'onum';
  -webkit-overflow-scrolling: touch;
}

html,
body {
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: auto;
}

a {
  color: var(--color-purple);
  text-decoration: none;
}

:where(ul:not(.preserve_default_browser_styles)) {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.ReactModal__Body--open {
  overflow: hidden !important;
}

@media screen and (min-width: 768px) {
  html,
  body {
    height: auto;
    width: auto;
  }
}

/**
 * Buttons
 *
 * Sizing and styling:
 *   btn-primary
 *   btn-secondary
 *   btn-outline
 *
 * Color:
 *   btn-assertive
 *   btn-success
 *   btn-muted
 *
 * ==============================
 */

/* Style: Default (primary/muted) */

.unstyled_btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: inherit;
  padding: 0;
}

.icon_btn {
  background: none;
  border: none;
  cursor: pointer;
  outline: inherit;
  padding: 0;
}

.icon_btn:focus-visible,
.unstyled_btn:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

.btn,
.btn-primary {
  display: inline-block;
  border-radius: 5px;
  background-color: var(--color-gray);
  padding: 20px;
  margin: 0 0 10px;
  text-decoration: none;
  min-width: 225px;
  font-size: 21px;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 1.5px;
  text-align: center;
  color: #fff;
  border: 3px solid var(--color-gray);
  transition: all 0.2s ease-in;
  cursor: pointer;
}

.btn:hover,
.btn-primary:hover {
  background-color: #849cb9;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%);
}

.btn:active,
.btn-primary:active {
  background-color: #3a4858;
  box-shadow: 0 0 2px 0 rgb(0 0 0 / 40%);
}

.btn:disabled,
.btn[disabled],
.btn.disabled,
.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary.disabled {
  opacity: 0.5;
  background-color: #8298a6;
  cursor: default;
}

/* Style: Secondary */

.btn-secondary {
  padding: 10px 20px;
}

/* Color: Assertive */

.btn-assertive {
  background-color: var(--color-purple);
  border-color: var(--color-purple);
  color: #d0edf3;
}

.btn-assertive:hover {
  background-color: #711e8f;
  border-color: #711e8f;
}

.btn-assertive:active {
  background-color: var(--color-purple-dark);
  border-color: #370549;
}

.btn-assertive:disabled,
.btn-assertive[disabled],
.btn-assertive.disabled {
  opacity: 0.5;
  background-color: var(--color-lavender-dark);
  border-color: var(--color-lavender-dark);
  color: #f1f0f9;
}

/* Color: Success */

.btn-success {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-purple);
}

.btn-success:hover {
  background-color: #50f1ab;
  border-color: #50f1ab;
}

.btn-success:active {
  background-color: #45c08a;
  border-color: #45c08a;
}

.btn-success:disabled,
.btn-success[disabled],
.btn-success.disabled {
  opacity: 0.5;
  background-color: #8fe7c5;
  border-color: #8fe7c5;
  color: #6c7793;
}

/* Modifiers */

.btn-block {
  display: block;
  min-width: 0;
  width: 100%;
}

/* Style: Outline */

.btn.btn-outline {
  background-color: transparent;
}

.btn-outline.btn,
.btn-outline.btn-primary {
  color: var(--color-gray);
}

.btn-outline.btn:hover,
.btn-outline.btn-primary:hover {
  color: #849cb9;
}

.btn-outline.btn:active,
.btn-outline.btn-primary:active {
  color: #3a4858;
}

.btn-outline.btn:disabled,
.btn-outline.btn[disabled],
.btn-outline.btn.disabled,
.btn-outline.btn-primary:disabled,
.btn-outline.btn-primary[disabled],
.btn-outline.btn-primary.disabled {
  color: #8298a6;
}

.btn-outline.btn-assertive {
  color: var(--color-purple);
}

.btn-outline.btn-assertive:hover {
  color: #711e8f;
}

.btn-outline.btn-assertive:active {
  color: var(--color-purple-dark);
}

.btn-outline.btn-assertive:disabled,
.btn-outline.btn-assertive[disabled],
.btn-outline.btn-assertive.disabled {
  color: var(--color-lavender-dark);
}

.btn-outline.btn-success {
  color: var(--color-primary);
}

.btn-outline.btn-success:hover {
  color: #50f1ab;
}

.btn-outline.btn-success:active {
  color: #45c08a;
}

.btn-outline.btn-success:disabled,
.btn-outline.btn-success[disabled],
.btn-outline.btn-success.disabled {
  color: #8fe7c5;
}

/* Style: Clear */

.btn.btn-clear {
  background-color: transparent;
  border-color: transparent;
}

.btn-clear.btn,
.btn-clear.btn-primary {
  color: var(--color-gray);
}

.btn-clear.btn:hover,
.btn-clear.btn-primary:hover {
  color: #849cb9;
}

.btn-clear.btn:active,
.btn-clear.btn-primary:active {
  color: #3a4858;
}

.btn-clear.btn:disabled,
.btn-clear.btn[disabled],
.btn-clear.btn.disabled,
.btn-clear.btn-primary:disabled,
.btn-clear.btn-primary[disabled],
.btn-clear.btn-primary.disabled {
  color: #8298a6;
}

.btn-clear.btn-assertive {
  color: var(--color-purple);
}

.btn-clear.btn-assertive:hover {
  color: #711e8f;
}

.btn-clear.btn-assertive:active {
  color: var(--color-purple-dark);
}

.btn-clear.btn-assertive:disabled,
.btn-clear.btn-assertive[disabled],
.btn-clear.btn-assertive.disabled {
  color: var(--color-lavender-dark);
}

.btn-clear.btn-success {
  color: var(--color-primary);
}

.btn-clear.btn-success:hover {
  color: #50f1ab;
}

.btn-clear.btn-success:active {
  color: #45c08a;
}

.btn-clear.btn-success:disabled,
.btn-clear.btn-success[disabled],
.btn-clear.btn-success.disabled {
  color: #8fe7c5;
}

/**
 * Slick carousel overrides
 * ==============================
 */

.slick-dots li {
  margin: 0;
  width: 18px;
}

.slick-dots li button {
  padding: 5px 4px;
  width: 18px;
}

.slick-dots li button::before {
  font-size: 8px;
  color: rgb(222 243 247);
  opacity: 0.5;
  width: 18px;
}

.slick-dots li.slick-active button::before {
  color: #fff;
  opacity: 1;
}

/**
* Slick dots light theme
* (For use on light backgrounds)
*/

.slick-dots.slick-dots--light li button::before {
  color: var(--color-gray);
}

.slick-dots.slick-dots--light li.slick-active button::before {
  color: var(--color-primary);
}

/**
* Default Divider lines
*/

.divider-line {
  border-width: 0;
  height: 1px;
  background: rgb(99 118 141 / 50%);
}

/**
* Braze Appboy Content Card overrides
*/

#root .ab-feed {
  width: 100%;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 20px 0;
}

.ab-feed-buttons-wrapper {
  display: none;
}

#root .ab-feed .ab-feed-body {
  width: 100%;
  display: flex;
  flex-flow: row;
  background: transparent;
  border: none;
  padding: 0;
}

.ab-feed .ab-feed-body .ab-card {
  opacity: 0.9;
  width: 281px;
  height: 138px;
  min-width: 281px;
  box-shadow: 0 2px 5px 0 rgb(128 149 175 / 20%);
  -webkit-backdrop-filter: blur(47.2px);
          backdrop-filter: blur(47.2px);
  border-radius: 5px;
  margin: 0 10px;
}

.ab-feed .ab-feed-body .ab-card:first-child {
  margin: 0 10px 0 0;
}

.ab-feed .ab-feed-body .ab-card:last-child {
  margin: 0 0 0 10px;
}

.ab-feed .ab-feed-body .ab-card .ab-image-area {
  height: 35px;
  width: 35px;
  padding: 20px 20px 0;
}

.ab-feed .ab-card .ab-card-body .ab-title {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 1.25;
  color: #425563;
}

.ab-feed .ab-card .ab-card-body .ab-description {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 13.75;
  color: var(--color-purple);
}

#root .ab-feed .ab-card .ab-close-button {
  opacity: 1;
  color: #425563;
}

@media screen and (min-width: 768px) {
  .ab-feed .ab-feed-body .ab-card {
    opacity: 0.9;
    width: 306px;
    height: 160px;
    min-width: 306px;
    box-shadow: 0 2px 5px 0 rgb(128 149 175 / 20%);
    -webkit-backdrop-filter: blur(47.2px);
            backdrop-filter: blur(47.2px);
    border-radius: 5px;
  }

  .ab-feed .ab-card .ab-card-body .ab-description {
    font-size: 18px;
    line-height: 1.33;
  }
}
