/*Import font from Typekit:*/
@import url('https://use.typekit.net/dbq5jeg.css');

html {
  background: var(--grayscale3);
}
body {
  margin: 0 auto;
  max-width: 1800px;
  background: var(--white);
  font-family: "Poppins","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  overflow-x: hidden !important;
  box-shadow: var(--z-shadow-2);
  text-wrap: pretty;
}
/* Variables
/* ---------------------------------------------------------- */
:root {
    /*//////////////////////////////////
    // COLORS
    //////////////////////////////////*/
    /* Primary Colors: */
    --primary1: #8885E1; // #5890E7;
    --primary2: #8885E1;
    --primary3: #AD77D2;
    --primary4: #C96ABC;
    --primary5: #DD5EA0;
    --primary6: #E75781;
    --primary7: #E75861;

    --primary-lighter-shade: #B0AEE;

    /* Grayscale: */
    --grayscale1: #FFFFFF;
    --grayscale2: #FAFAFA;
    --grayscale3: #F0F0F0;
    --grayscale4: #E1E1E1;
    --grayscale5: #CBCBCB;
    --grayscale6: #ACACAC;
    --grayscale7: #838383;
    --grayscale8: #515151;
    --grayscale9: #1C1C1C;

    --red: var(--primary7);  /* error */
    --orange: #E7B558;
    --yellow: #E7D958;  /* warning */
    --green: #58e797;   /* success */
    --purple: var(--primary3);
    --blue: var(--primary1);

    --white: var(--grayscale1);
    --gray-light: var(--grayscale4);
    --gray: var(--grayscale6);
    --gray-dark: var(--grayscale7);
    --black: var(--grayscale9);

    --black-as-rgb: 28, 28, 28;

    /*//////////////////////////////////
    // TYPOGRAPHY
    //////////////////////////////////*/
    --font-family: 'neue-haas-unica', sans-serif, system-ui;
    --font-color: var(--grayscale9);
    /* Font Weights: */
    --font-weight-light: 350;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    --line-height-large: 1.45;
    --line-height-regular: 1.2;
    --line-height-small: 1.1;

        --font-size-p: 1rem;
        --font-size-small: 0.75rem;
        --font-size-x-small: 0.65rem;


    /*//////////////////////////////////
    // LAYERS
    //////////////////////////////////*/

    /* Box Shadows */
    --z-shadow-0: none;
    --z-shadow-1: 0 4px 8px 0 rgba(var(--black-as-rgb), 0.06);
    --z-shadow-2: 0 8px 16px 0 rgba(var(--black-as-rgb), 0.12);
    --z-shadow-3: 0 12px 20px 0 rgba(var(--black-as-rgb), 0.18);
    --z-shadow-4: 0 16px 24px 0 rgba(var(--black-as-rgb), 0.24);
    --z-shadow-5: 0 20px 30px 0 rgba(var(--black-as-rgb), 0.30);

    /*//////////////////////////////////
    // LAYOUT
    //////////////////////////////////*/

    /* Media query breakpoints: */
    --large-desktop-width: 1223px; /* Large Desktops, 1224px and up */
    --medium-desktop-width: 1023px; /* Medium Desktops, 1024px and up */
    --tablet-width: 767px; /* Tablets, 768px and up */
    --large-mobile-width: 469px; /* Large Mobile, 470px and up */
    --mobile-width: 319px; /* Mobile, 320px and up */

    /* Max-widths: */
    --max-width-200: 200px;
    --max-width-300: 300px;
    --max-width-400: 400px;
    --max-width-600: 600px;
    --max-width-700: 700px;
    --max-width-800: 800px;
    --max-width-1000: 1000px;
    --max-width-1200: 1200px;
    --max-width-max: 1360px;

    /* Helpers for spatial/spacing: */
    --space-base: 5px;
    --space-5:  calc((var(--space-base) * 1)); /* 5px */
    --space-10: calc((var(--space-base) * 2)); /* 10px */
    --space-15: calc((var(--space-base) * 3)); /* 15px */
    --space-20: calc((var(--space-base) * 4)); /* 20px */
    --space-25: calc((var(--space-base) * 5)); /* 25px */
    --space-30: calc((var(--space-base) * 6)); /* 30px */
    --space-45: calc((var(--space-base) * 9)); /* 45px */
    --space-90: calc((var(--space-base) * 18)); /* 90px */

    /* Border-radii: */
    --border-radius-none: 0;
    --border-radius-small: 3px;
    --border-radius-regular: 8px;
    --border-radius-large: 12px;
    --border-radius-half: 50%;
    --border-radius-all: 100%;
}




/* MAIN STYLES
/* ---------------------------------------------------------- */
/*Type scale based on http://type-scale.com/?size=20&scale=1.333&text=A%20Visual%20Type%20Scale&webfont=Lato&font-family=Lato&font-weight=300&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333*/
*, html {
  font-family: var(--font-family);
  font-color: var(--font-color);
  font-weight: var(--font-weight-regular);
}
html {
  -webkit-font-smoothing: antialiased
}

.lowercase { text-transform: lowercase !important }
.normalcase, .nocase { text-transform: initial !important }

.text-decoration-line-through {
  text-decoration: line-through
}
.underline {
  text-decoration: underline;
}
.dotted-underline {
  display: inline-block;
  border-bottom: 1px dashed var(--grayscale7);
  padding-bottom: 2px;
  cursor: help;
}

.card-0 {
  box-shadow: var(--z-shadow-0);
  -webkit-box-shadow: var(--z-shadow-0);
  -moz-box-shadow: var(--z-shadow-0);
}
.max-width-200 {
  max-width:  var(--max-width-200);
}
.max-width-300 {
  max-width:  var(--max-width-300);
}

.max-width-400 {
  max-width:  var(--max-width-400);
}

.small {
  font-size: .875rem;
}

.topnav .navbar-brand {
  padding-top: 0;
  padding-bottom: 7px;
  max-width: 190px;
}
.topnav .navbar-brand img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 991.98px) {
  .topnav .navbar-nav .nav-link {
      text-align: center;
  }
  .topnav .navbar-brand img {
      min-width: initial;
  }
    .blog-post-page .blog-sidebar-cta-card-section {
        position: relative !important;
        top: initial !important;
    }
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: .6rem;
    padding-right: .6rem;
  }
}

.white-space-no-wrap {
  white-space: nowrap;
}

.growsurf-border-bottom,
.loyaltysurf-border-bottom {
  border-bottom: 1px solid #E1E1E1;
}
.growsurf-border-top,
.loyaltysurf-border-top {
  border-top: 1px solid #E1E1E1;
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: normal;
  text-wrap: balance;
}

#story .h1 > span, h1 > span,
#story .h2 > span, h2 > span,
#story .h3 > span, h3 > span,
#story .h4 > span, h4 > span,
#story .h5 > span, h5 > span,
#story .h6 > span, h6 > span {
  font-family: var(--font-family) !important;
  font-weight: var(--font-weight-bold) !important;
}

#story figcaption {
    display: none;
}
#story ol > li > p { margin-bottom: 0 }

.navbar-light .navbar-toggler {
    border-color: var(--grayscale5);
}
.ql-indent-1 {
  list-style-type: circle;
}

.display-inline-block { display: inline-block }
.display-inline-flex { display: inline-flex }
.display-flex { display: flex }
.align-items-center { align-items: center }
.justify-content-center { justify-content: center }
.justify-content-end { justify-content: end }
.justify-content-space-between { justify-content: space-between }

#footer a {
  color: var(--black);
  font-weight: var(--font-weight-light);
}
#footer .growsurf-label {
  color: var(--black);
}
#footer .nav {
  justify-content: space-between;
}

#footer li.nav-item {
    max-width: 238px;
}
.footer-description {
    max-width: 500px;
    margin: 0 auto;
}
.footer-logo {
    max-width: 190px;
}
@media (max-width: 768px) {
  #footer .nav .nav-item {
    padding-left: 0 !important;
    width: 50%;
  }
  #footer .nav {
    justify-content: flex-start;
  }

  #footer .growsurf-seo-links ul > li {
      width: 100% !important;
      max-width: initial !important;
  }
}

.customer-logos-container {
    background: var(--grayscale2);
    border-bottom: 1px solid var(--grayscale4);
    margin: 0 auto;
    width: 100%;
    padding: var(--space-30) 0;
    padding-bottom: var(--space-30);
}
.customer-logos-container-nested {
    background: var(--white);
        padding-bottom: 0;
    border-bottom: none;
}
.customer-logos-container-nested .customer-logos {
    max-width: none;
}
.customer-logos {
    margin: 0 auto;
    padding-bottom: var(--space-30);
    /*max-width: var(--max-width-1200);*/
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.customer-logos img {
    vertical-align: middle;
    margin: var(--space-30);
    margin-bottom: 10px;
    max-width: var(--space-90);
    transform: scale(1.1);
}
.customer-logos img[alt="SurveyMonkey"] { max-width: 170px; }
.customer-logos img[alt="Not Boring"] { max-width: 130px; }
.customer-logos img[alt="The Uptick"] { max-width: 130px; }
.customer-logos img[alt="Blockstack"] { max-width: 150px; }
.customer-logos img[alt="Bombora"] { max-width: 105px; top: -1px; position: relative; }
.customer-logos img[alt="Jolt"] { max-width: 40px; top: -2px; position: relative; }
.customer-logos img[alt="Microverse"] { max-width: 120px; top: -1px; position: relative; }
.customer-logos img[alt="Quartz"] { max-width: 110px; top: 0px; position: relative; }
.customer-logos img[alt="IMGN"] { max-width: 70px; top: 0px; position: relative; }
.customer-logos img[alt="PrimeWomen"] { max-width: 35px; top: -1px; position: relative; }
.customer-logos img[alt="Lululemon"] { max-width: 150px; }
.customer-logos img[alt="Indeed"] { top: -2px; position: relative; }
.customer-logos img[alt="Blue Medora"] { max-width: 150px; top: -4px; position: relative; }
.customer-logos img[alt="Charlie Finance"] { max-width: 80px; }
.customer-logos img[alt="Digital Marketer"] { max-width: 150px; }
.customer-logos img[alt="Vinovest"] { max-width: 50px; }
.customer-logos img[alt="MainStreet"] { max-width: 110px; }
.customer-logos img[alt="Solana"] { max-width: 120px; }
.customer-logos img[alt="Deliverr"] { max-width: 120px; }
.customer-logos img[alt="Willful"] { max-width: 80px; top: -2px; position: relative; }
.customer-logos img[alt="Alpha Foods"] { max-width: 45px; }
.customer-logos-container .trusted-by-text {
  text-align: center;
  margin-bottom: var(--space-10);
  margin-top: var(--space-30);
  color: var(--grayscale6);
}

 .customer-logos-container .trusted-by-text::before,
 .customer-logos-container .trusted-by-text::after {
  width: var(--space-45);
  height: 2px;
  background: var(--grayscale4);
  content: '';
  vertical-align: middle;
  display: inline-block;
  top: -1px;
  position: relative;
}
.customer-logos-container .trusted-by-text::before { margin-right: var(--space-20); }
.customer-logos-container .trusted-by-text::after { margin-left: var(--space-20); }

@media (max-width: 768px) {
    .customer-logos {
        display: block;
        text-align: center;
    }
    .customer-logos img {
        margin: var(--space-15);
    }
      .customer-logos-container .trusted-by-text {
        padding-left: 1rem;
        padding-right: 1rem;
      }

       .customer-logos-container .trusted-by-text::before,
       .customer-logos-container .trusted-by-text::after {
        display: none;
      }
}

.growsurf-label {
  font-weight: var(--font-weight-bold);
  letter-spacing: .05rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--grayscale7);
}

/*===================================
=            Mixins SCSS            =
===================================*/
/*=====  End of Mixins  ======*/
/*===================================
=          Variables SCSS           =
===================================*/
/*=====  End of Variables SCSS  ======*/
.landing-hero-section {
  position: relative;
  border-bottom: 1px solid #E1E1E1;
  padding: 45px 15px;
  padding-bottom: 0;
  background: #FFFFFF;
  overflow-x: hidden;
}

.landing-hero-section .landing-hero-section-inner {
  margin: 0 auto;
  max-width: 1140px;
  text-align: left;
  z-index: 2;
  position: relative;
  padding: 45px 0;
  padding-top: 60px;
  min-height: 700px;
    padding-right: 15px;
    padding-left: 15px;
}

.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat {
  max-width: 600px;
  font-size: 1rem;
  font-weight: 350;
}

.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-title {
  font-weight: 700;
    font-size: -webkit-calc(4rem);
  font-size: calc(4rem);
  margin-bottom: 30px;
  line-height: 1.1;
  text-wrap: balance;
}


.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-description {
  font-size: 1.333rem;
  margin-bottom: 30px;
  font-weight: 350;
  line-height: 1.45;
  max-width: 560px;
}
@media only screen and (max-width: 1200px) {
  .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-title {
    font-size: 3.5rem;
  }
}
.capterra-reviews-image {
  display: inline-block;
  margin-top: 30px;
  max-width: 240px;
}

.capterra-reviews-image img {
  width: 100%;
}
.integration-partner-badge-image {
  display: inline-block;
  max-width: 200px;
}
.integration-partner-badge-image img {
  width: 100%;
}

.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-sub-description {
  font-weight: 700;
  font-size: 1.333rem;
  margin-bottom: 30px;
  line-height: 1.45;
}

.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .cta-action-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .cta-action-container .alternative-cta-text {
  font-size: 1rem;
  font-weight: 350;
  max-width: 400px;
  margin: 10px;
}

.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .text-under-button {
  font-size: 1rem;
  font-weight: 350;
  max-width: 430px;
}

.landing-hero-section .landing-chart-bg {
  position: absolute;
  margin-left: 60%;
  left: 0;
  margin-right: 30px;
  animation-fill-mode: both;
  -moz-animation: fadeIn 0.3s both ease-in;
  -o-animation: fadeIn 0.3s both ease-in;
  -webkit-animation: fadeIn 0.3s both ease-in;
  animation: fadeIn 0.3s both ease-in;
  background: url("https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/db3a9830-9a02-4d24-ac75-30ec19a16030.svg") right bottom no-repeat;
  bottom: 0;
  top: 100px;
  right: 0;
  content: '';
  max-width: 500px;
  height: 400px;
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -ms-transform-origin: bottom right;
  transform-origin: bottom right;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 1199px) {
    .landing-hero-section .landing-hero-section-inner {
        max-width: 960px;
    }
	.landing-hero-section {
		display: flex;
		/*flex-direction: column-reverse;*/
		flex-direction: column;
	}
	.landing-hero-section .landing-hero-section-inner .landing-hero-section-meat {
    max-width: none;
	}
  .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-description {
    max-width: none;
  }
	.landing-hero-section .landing-chart-bg {
        top: 0;
        right: 0;
        left: 0;
        margin: 0 auto;
		position: relative !important;
		max-width: 700px;
		width: 100%;
		height: 160px;
		margin-top: 70px;
		transform-origin: center;
		background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/db3a9830-9a02-4d24-ac75-30ec19a16030.svg) center center no-repeat;
		margin-bottom: -20px;
	}
}

@media (max-width: 991.98px) {
    .landing-hero-section .landing-hero-section-inner {
        max-width: 768px;
    }
}

@media (max-width: 469px) {
  .landing-hero-section .landing-hero-section-inner {
      padding: 0;
    padding-top: 60px;
    padding-bottom: 45px;
    max-height: initial;
  }

  .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-title {
    font-size: 2.369rem;
  }

  .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .cta-action-container {
    flex-direction: column;
  }

  .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .text-under-button {
    text-align: center;
  }

  .capterra-reviews-image {
    display: block;
    margin: 0 auto;
    margin-top: 20px;
  }

  .landing-hero-section .landing-chart-bg {
    /*left: -15px;*/
    /*width: calc(15px + 15px + 100%);*/
    /*opacity: 0.7;*/
        height: 120px;
    margin-top: 60px;
    -moz-animation: none;
    -o-animation: none;
    -webkit-animation: none;
    animation: none;
  }
}

button, .btn {
  font-weight: 700;
  outline: none !important;
  border: none;
  background: transparent;
  white-space: initial;
  text-decoration: none;
  text-transform: uppercase;
  background-clip: padding-box;
  /* stops bg color from leaking outside the border: */
  -webkit-border-radius: 3px;
  border-radius: 3px;
  transition: 0.3s;
  padding: 10px 15px;
}

button:hover, button:focus, button:active, .btn:hover, .btn:focus, .btn:active {
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}

button.btn-xs, .btn.btn-xs {
  padding: 7px 10px;
}

button.btn-md, .btn.btn-md {
  padding: 10px 15px;
}

button.btn-lg, .btn.btn-lg {
  /*padding: 20px 30px;*/
}

a, .link {
  font-weight: 500;
  cursor: hover;
  text-decoration: none;
  color: #8885E1;
  transition: 0.3s;
}

aa, .link {
  color: #8885E1;
}

aa:focus, aa:active, .link:focus, .link:active {
  color: var(--primary-lighter-shade);
}

aa:hover, .link:hover {
  color: #8885E1;
}

a:hover, a:focus, a:active, .link:hover, .link:focus, .link:active {
  text-decoration: none;
  transition: 0.3s;
  cursor: hover;
}

a[disabled], .link[disabled] {
  cursor: not-allowed !important;
  color: #CBCBCB !important;
}

a.underline:hover, a.underline:focus, a.underline:active, .link.underline:hover, .link.underline:focus, .link.underline:active {
  text-decoration: underline;
}

.btn-primary-blue, .btn-primary, .btn-cta {
  font-weight: 600 !important;
  color: #8885E1 !important;
  background: rgba(136, 133, 225, 0.08) !important;
}

.btn-primary-blue:focus, .btn-primary:focus, .btn-cta:focus, .btn-primary-blue:active, .btn-primary:active, .btn-cta:active {
  color: var(--primary-lighter-shade) !important;
  background: rgba(96, 92, 215, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary-blue:hover, .btn-primary:hover, .btn-cta:hover {
  color: #8885E1 !important;
  background: rgba(96, 92, 215, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-blue[disabled], [disabled].btn-primary, [disabled].btn-cta {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-purple {
  font-weight: 600 !important;
  color: #AD77D2 !important;
  background: rgba(173, 119, 210, 0.08) !important;
}

.btn-primary-purple:focus, .btn-primary-purple:active {
  color: #c49ddf !important;
  background: rgba(150, 81, 197, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary-purple:hover {
  color: #9651c5 !important;
  background: rgba(150, 81, 197, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-purple[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-red, .btn-danger {
  font-weight: 600 !important;
  color: #E75861 !important;
  background: rgba(231, 88, 97, 0.08) !important;
}

.btn-primary-red:focus, .btn-danger:focus, .btn-primary-red:active, .btn-danger:active {
  color: #ed858b !important;
  background: rgba(225, 43, 55, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary-red:hover, .btn-danger:hover {
  color: #e12b37 !important;
  background: rgba(225, 43, 55, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-red[disabled], [disabled].btn-danger {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-orange, .btn-warning {
  font-weight: 600 !important;
  color: #E7B558 !important;
  background: rgba(231, 181, 88, 0.08) !important;
}

.btn-primary-orange:focus, .btn-warning:focus, .btn-primary-orange:active, .btn-warning:active {
  color: #edc985 !important;
  background: rgba(225, 161, 43, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary-orange:hover, .btn-warning:hover {
  color: #e1a12b !important;
  background: rgba(225, 161, 43, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-orange[disabled], [disabled].btn-warning {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-purple {
  font-weight: 600 !important;
  color: #AD77D2 !important;
  background: rgba(173, 119, 210, 0.08) !important;
}

.btn-primary-purple:focus, .btn-primary-purple:active {
  color: #c49ddf !important;
  background: rgba(150, 81, 197, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary-purple:hover {
  color: #9651c5 !important;
  background: rgba(150, 81, 197, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-purple[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-green, .btn-success {
  font-weight: 600 !important;
  color: #58e797 !important;
  background: rgba(88, 231, 151, 0.08) !important;
}

.btn-primary-green:focus, .btn-success:focus, .btn-primary-green:active, .btn-success:active {
  color: #85edb3 !important;
  background: rgba(43, 225, 123, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary-green:hover, .btn-success:hover {
  color: #2be17b !important;
  background: rgba(43, 225, 123, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-green[disabled], [disabled].btn-success {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-yellow {
  font-weight: 600 !important;
  color: #E7D958 !important;
  background: rgba(231, 217, 88, 0.08) !important;
}

.btn-primary-yellow:focus, .btn-primary-yellow:active {
  color: #ede385 !important;
  background: rgba(225, 207, 43, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary-yellow:hover {
  color: #e1cf2b !important;
  background: rgba(225, 207, 43, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-yellow[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-info {
  font-weight: 600 !important;
  color: #8885E1 !important;
  background: rgba(136, 133, 225, 0.08) !important;
}

.btn-info:focus, .btn-info:active {
  color: #b0aeeb !important;
  background: rgba(96, 92, 215, 0.08) !important;
  box-shadow: none !important;
}

.btn-info:hover {
  color: #605cd7 !important;
  background: rgba(96, 92, 215, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-info[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary1 {
  font-weight: 600 !important;
  color: #8885E1 !important;
  background: rgba(136, 133, 225, 0.08) !important;
}

.btn-primary1:focus, .btn-primary1:active {
  color: var(--primary-lighter-shade) !important;
  background: rgba(43, 114, 225, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary1:hover {
  color: #8885E1 !important;
  background: rgba(43, 114, 225, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary1[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary2 {
  font-weight: 600 !important;
  color: #8885E1 !important;
  background: rgba(136, 133, 225, 0.08) !important;
}

.btn-primary2:focus, .btn-primary2:active {
  color: #b0aeeb !important;
  background: rgba(96, 92, 215, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary2:hover {
  color: #605cd7 !important;
  background: rgba(96, 92, 215, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary2[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary3 {
  font-weight: 600 !important;
  color: #AD77D2 !important;
  background: rgba(173, 119, 210, 0.08) !important;
}

.btn-primary3:focus, .btn-primary3:active {
  color: #c49ddf !important;
  background: rgba(150, 81, 197, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary3:hover {
  color: #9651c5 !important;
  background: rgba(150, 81, 197, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary3[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary4 {
  font-weight: 600 !important;
  color: #C96ABC !important;
  background: rgba(201, 106, 188, 0.08) !important;
}

.btn-primary4:focus, .btn-primary4:active {
  color: #d78fcd !important;
  background: rgba(187, 69, 171, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary4:hover {
  color: #bb45ab !important;
  background: rgba(187, 69, 171, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary4[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary5 {
  font-weight: 600 !important;
  color: #DD5EA0 !important;
  background: rgba(221, 94, 160, 0.08) !important;
}

.btn-primary5:focus, .btn-primary5:active {
  color: #e688b9 !important;
  background: rgba(212, 52, 135, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary5:hover {
  color: #d43487 !important;
  background: rgba(212, 52, 135, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary5[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary6 {
  font-weight: 600 !important;
  color: #E75781 !important;
  background: rgba(231, 87, 129, 0.08) !important;
}

.btn-primary6:focus, .btn-primary6:active {
  color: #ed84a2 !important;
  background: rgba(225, 42, 96, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary6:hover {
  color: #e12a60 !important;
  background: rgba(225, 42, 96, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary6[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary7 {
  font-weight: 600 !important;
  color: #E75861 !important;
  background: rgba(231, 88, 97, 0.08) !important;
}

.btn-primary7:focus, .btn-primary7:active {
  color: #ed858b !important;
  background: rgba(225, 43, 55, 0.08) !important;
  box-shadow: none !important;
}

.btn-primary7:hover {
  color: #e12b37 !important;
  background: rgba(225, 43, 55, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary7[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-grayscale1 {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.btn-grayscale1:focus, .btn-grayscale1:active {
  color: white !important;
  background: rgba(230, 230, 230, 0.08) !important;
  box-shadow: none !important;
}

.btn-grayscale1:hover {
  color: #e6e6e6 !important;
  background: rgba(230, 230, 230, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-grayscale1[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-grayscale2 {
  font-weight: 600 !important;
  color: #FAFAFA !important;
  background: rgba(250, 250, 250, 0.08) !important;
}

.btn-grayscale2:focus, .btn-grayscale2:active {
  color: white !important;
  background: rgba(225, 225, 225, 0.08) !important;
  box-shadow: none !important;
}

.btn-grayscale2:hover {
  color: #e1e1e1 !important;
  background: rgba(225, 225, 225, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-grayscale2[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-grayscale3 {
  font-weight: 600 !important;
  color: #F0F0F0 !important;
  background: rgba(240, 240, 240, 0.08) !important;
}

.btn-grayscale3:focus, .btn-grayscale3:active {
  color: white !important;
  background: rgba(214, 214, 214, 0.08) !important;
  box-shadow: none !important;
}

.btn-grayscale3:hover {
  color: #d6d6d6 !important;
  background: rgba(214, 214, 214, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-grayscale3[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-grayscale4 {
  font-weight: 600 !important;
  color: #E1E1E1 !important;
  background: rgba(225, 225, 225, 0.08) !important;
}

.btn-grayscale4:focus, .btn-grayscale4:active {
  color: #fbfbfb !important;
  background: rgba(200, 200, 200, 0.08) !important;
  box-shadow: none !important;
}

.btn-grayscale4:hover {
  color: #c8c8c8 !important;
  background: rgba(200, 200, 200, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-grayscale4[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-grayscale5 {
  font-weight: 600 !important;
  color: #CBCBCB !important;
  background: rgba(203, 203, 203, 0.08) !important;
}

.btn-grayscale5:focus, .btn-grayscale5:active {
  color: #e5e5e5 !important;
  background: rgba(178, 178, 178, 0.08) !important;
  box-shadow: none !important;
}

.btn-grayscale5:hover {
  color: #b2b2b2 !important;
  background: rgba(178, 178, 178, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-grayscale5[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-grayscale6 {
  font-weight: 600 !important;
  color: #ACACAC !important;
  background: rgba(172, 172, 172, 0.08) !important;
}

.btn-grayscale6:focus, .btn-grayscale6:active {
  color: #c6c6c6 !important;
  background: rgba(147, 147, 147, 0.08) !important;
  box-shadow: none !important;
}

.btn-grayscale6:hover {
  color: #939393 !important;
  background: rgba(147, 147, 147, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-grayscale6[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-grayscale7 {
  font-weight: 600 !important;
  color: #838383 !important;
  background: rgba(131, 131, 131, 0.08) !important;
}

.btn-grayscale7:focus, .btn-grayscale7:active {
  color: #9c9c9c !important;
  background: rgba(106, 106, 106, 0.08) !important;
  box-shadow: none !important;
}

.btn-grayscale7:hover {
  color: #6a6a6a !important;
  background: rgba(106, 106, 106, 0.08) !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-grayscale7[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-blue-solid, .btn-primary-solid, .btn-cta-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #8885E1 !important;
}

.btn-primary-blue-solid:focus, .btn-primary-solid:focus, .btn-cta-solid:focus, .btn-primary-blue-solid:active, .btn-primary-solid:active, .btn-cta-solid:active {
  color: white !important;
  background: #8885E1 !important;
  box-shadow: none !important;
}

.btn-primary-blue-solid:hover, .btn-primary-solid:hover, .btn-cta-solid:hover {
  color: #e6e6e6 !important;
  background: #8885E1 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-blue-solid[disabled], [disabled].btn-primary-solid, [disabled].btn-cta-solid {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-purple-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #AD77D2 !important;
}

.btn-primary-purple-solid:focus, .btn-primary-purple-solid:active {
  color: white !important;
  background: #9651c5 !important;
  box-shadow: none !important;
}

.btn-primary-purple-solid:hover {
  color: #e6e6e6 !important;
  background: #9651c5 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-purple-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-red-solid, .btn-danger-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #E75861 !important;
}

.btn-primary-red-solid:focus, .btn-danger-solid:focus, .btn-primary-red-solid:active, .btn-danger-solid:active {
  color: white !important;
  background: #e12b37 !important;
  box-shadow: none !important;
}

.btn-primary-red-solid:hover, .btn-danger-solid:hover {
  color: #e6e6e6 !important;
  background: #e12b37 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-red-solid[disabled], [disabled].btn-danger-solid {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-orange-solid, .btn-warning-solid {
  font-weight: 600 !important;
  color: rgba(36, 41, 46, 0.7) !important;
  background: #E7B558 !important;
}

.btn-primary-orange-solid:focus, .btn-warning-solid:focus, .btn-primary-orange-solid:active, .btn-warning-solid:active {
  color: rgba(58, 67, 75, 0.7) !important;
  background: #e1a12b !important;
  box-shadow: none !important;
}

.btn-primary-orange-solid:hover, .btn-warning-solid:hover {
  color: rgba(14, 16, 17, 0.7) !important;
  background: #e1a12b !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-orange-solid[disabled], [disabled].btn-warning-solid {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-purple-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #AD77D2 !important;
}

.btn-primary-purple-solid:focus, .btn-primary-purple-solid:active {
  color: white !important;
  background: #9651c5 !important;
  box-shadow: none !important;
}

.btn-primary-purple-solid:hover {
  color: #e6e6e6 !important;
  background: #9651c5 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-purple-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-green-solid, .btn-success-solid {
  font-weight: 600 !important;
  color: rgba(36, 41, 46, 0.7) !important;
  background: #58e797 !important;
}

.btn-primary-green-solid:focus, .btn-success-solid:focus, .btn-primary-green-solid:active, .btn-success-solid:active {
  color: rgba(58, 67, 75, 0.7) !important;
  background: #2be17b !important;
  box-shadow: none !important;
}

.btn-primary-green-solid:hover, .btn-success-solid:hover {
  color: rgba(14, 16, 17, 0.7) !important;
  background: #2be17b !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-green-solid[disabled], [disabled].btn-success-solid {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary-yellow-solid {
  font-weight: 600 !important;
  color: rgba(36, 41, 46, 0.7) !important;
  background: #E7D958 !important;
}

.btn-primary-yellow-solid:focus, .btn-primary-yellow-solid:active {
  color: rgba(58, 67, 75, 0.7) !important;
  background: #e1cf2b !important;
  box-shadow: none !important;
}

.btn-primary-yellow-solid:hover {
  color: rgba(14, 16, 17, 0.7) !important;
  background: #e1cf2b !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary-yellow-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-info-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #8885E1 !important;
}

.btn-info-solid:focus, .btn-info-solid:active {
  color: white !important;
  background: #605cd7 !important;
  box-shadow: none !important;
}

.btn-info-solid:hover {
  color: #e6e6e6 !important;
  background: #605cd7 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-info-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary1-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #8885E1 !important;
}

.btn-primary1-solid:focus, .btn-primary1-solid:active {
  color: white !important;
  background: #8885E1 !important;
  box-shadow: none !important;
}

.btn-primary1-solid:hover {
  color: #e6e6e6 !important;
  background: #8885E1 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary1-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary2-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #8885E1 !important;
}

.btn-primary2-solid:focus, .btn-primary2-solid:active {
  color: white !important;
  background: #605cd7 !important;
  box-shadow: none !important;
}

.btn-primary2-solid:hover {
  color: #e6e6e6 !important;
  background: #605cd7 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary2-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary3-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #AD77D2 !important;
}

.btn-primary3-solid:focus, .btn-primary3-solid:active {
  color: white !important;
  background: #9651c5 !important;
  box-shadow: none !important;
}

.btn-primary3-solid:hover {
  color: #e6e6e6 !important;
  background: #9651c5 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary3-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary4-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #C96ABC !important;
}

.btn-primary4-solid:focus, .btn-primary4-solid:active {
  color: white !important;
  background: #bb45ab !important;
  box-shadow: none !important;
}

.btn-primary4-solid:hover {
  color: #e6e6e6 !important;
  background: #bb45ab !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary4-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary5-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #DD5EA0 !important;
}

.btn-primary5-solid:focus, .btn-primary5-solid:active {
  color: white !important;
  background: #d43487 !important;
  box-shadow: none !important;
}

.btn-primary5-solid:hover {
  color: #e6e6e6 !important;
  background: #d43487 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary5-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary6-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #E75781 !important;
}

.btn-primary6-solid:focus, .btn-primary6-solid:active {
  color: white !important;
  background: #e12a60 !important;
  box-shadow: none !important;
}

.btn-primary6-solid:hover {
  color: #e6e6e6 !important;
  background: #e12a60 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary6-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-primary7-solid {
  font-weight: 600 !important;
  color: #FFFFFF !important;
  background: #E75861 !important;
}

.btn-primary7-solid:focus, .btn-primary7-solid:active {
  color: white !important;
  background: #e12b37 !important;
  box-shadow: none !important;
}

.btn-primary7-solid:hover {
  color: #e6e6e6 !important;
  background: #e12b37 !important;
  box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important;
}

.btn-primary7-solid[disabled] {
  cursor: not-allowed !important;
  color: rgba(36, 41, 46, 0.5) !important;
  background: #E1E1E1 !important;
  box-shadow: none !important;
}

.btn-back {
  font-weight: 500 !important;
  font-size: 0.75rem;
  display: inline-block;
  padding: 5px;
  text-transform: uppercase;
}

.btn-back:before {
  content: "➔";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  display: inline-block;
  margin-right: 5px;
  margin-left: -3px;
  position: relative;
  top: 1px;
}

.btn-forward {
  font-weight: 500 !important;
  display: inline-block;
  text-transform: uppercase;
}

.btn-forward:after {
  content: "➔";
  display: inline-block;
  margin-left: 5px;
  margin-right: -3px;
  position: relative;
  top: -1px;
}

.btn-expand {
  font-weight: 500 !important;
  display: inline-block;
  padding: 5px;
  text-transform: uppercase;
}

.btn-expand:after {
  content: "▼";
  display: inline-block;
  margin-left: 5px;
  margin-right: -3px;
  position: relative;
}

.btn-expand.expanded:after {
  content: "▲";
}

.max-width-700 {
    max-width: 700px;
}
.max-width-800 {
    max-width: 800px;
}
.max-width-960 {
    max-width: 960px;
}
.margin-0-auto {
    margin: 0 auto;
}

@media (max-width: 768px) {
    .testimonial-card {
        background: none;
    }
    .testimonial-card .text-white {
        color: var(--black);
    }
}


.masonry {
    -webkit-column-count: 2; /*4*/
  -moz-column-count:2; /*4*/
  column-count: 2; /*4*/
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
   margin: 1.5em;
   margin-bottom: 20px;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.masonry.masonry-3 {
    -webkit-column-count: 3; /*4*/
  -moz-column-count:3; /*4*/
  column-count: 3; /*4*/
}

.masonry .card {
    display: inline-block;
    margin: 0 0 1.5em;
    width: 100%;
  -webkit-transition:1s ease all;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: var(--z-shadow-1);
    -webkit-box-shadow: var(--z-shadow-1);
    -moz-box-shadow: var(--z-shadow-1);
    border: none;
    outline: none;
}
@media only screen and (min-width: 1201px) {
    .masonry {
        -moz-column-count: 2; /*4*/
        -webkit-column-count: 2; /*4*/
        column-count: 2; /*4*/
    }
    .masonry.masonry-3 {
        -webkit-column-count: 3; /*4*/
      -moz-column-count:3; /*4*/
      column-count: 3; /*4*/
    }
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
    .masonry.masonry-3 {
      -webkit-column-count: 2; /*4*/
      -moz-column-count:2; /*4*/
      column-count: 2; /*4*/
    }
}

@media only screen and (max-width: 768px){
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (max-width: 469px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

    .masonry.masonry-3 {
      -webkit-column-count: 1; /*4*/
      -moz-column-count:1; /*4*/
      column-count: 1; /*4*/
    }
}
.reward-types-section {
}

.reward-types-section .reward-types-section-inner {
  max-width: 800px;
  margin: 0 auto;
}

.reward-types-section .active-list-card {
  box-shadow: var(--z-shadow-1);
  -webkit-box-shadow: var(--z-shadow-1);
  -moz-box-shadow: var(--z-shadow-1);
  display: flex;
  align-items: stretch;
  border: 3px solid transparent;
  background: #FFFFFF;
  position: relative;
  font-weight: 400;
  background-clip: padding-box;
  border-radius: 8px;
}
.reward-types-section .active-list-card + .active-list-card {
  margin-top: 20px;
}

.reward-types-section .active-list-card-title-and-description {
  background: #FAFAFA;
  color: #1C1C1C;
  min-width: 280px;
  max-width: 280px;
  margin: -2px 0 -3px -3px;
  border-radius: 8px 0 0 8px;
  padding: 30px;
}
.reward-types-section .active-list-card-title-and-description p {
  /*line-height: var(--line-height-regular);*/
  margin-bottom: 0;
}

.reward-types-section .active-list-card .active-list-card-examples-label {
  color: #ACACAC;
  cursor: pointer;
  text-transform: uppercase;
  position: absolute;
  left: calc(280px + 3px);
  left: -webkit-calc(280px + 3px);
  left: -moz-calc(280px + 3px);
  margin-left: 20px;
  margin-top: 0;
  top: 30px;
  margin-bottom: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  display: block;
}

.reward-types-section .active-list-card .active-list-card-content {
  margin-top: 25px;
  width: calc(100% - 280px);
  padding: 30px;
}

.reward-types-section .reward-examples {
  display: flex;
  flex-wrap: wrap;
}

.reward-examples .reward-example {
  margin: 10px 0 20px 0;
  padding-left: 0;
}

.reward-examples .reward-example img {
  max-height: 15px;
  margin-bottom: 10px;
}

.reward-examples .reward-example p {
  font-size: 0.75rem;
  color: #515151;
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .reward-types-section .active-list-card-title-and-description {
    min-width: initial;
    max-width: initial;
    width: calc(100% + 3px + 3px);
    width: -moz-calc(100% + 3px + 3px);
    width: -webkit-calc(100% + 3px + 3px);
    border-radius: 8px 8px 0 0;
    padding: 15px;
  }
  .reward-types-section .active-list-card .active-list-card-content {
    width: 100%;
    padding: 0 15px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .reward-examples .reward-example {
    padding-right: 0;
  }
  .reward-types-section .active-list-card {
    display: block;
  }
  .reward-types-section .active-list-card .active-list-card-examples-label {
    position: relative;
    left: 0;
    margin-left: 15px;
    top: 0;
    margin-top: 20px;
    margin-bottom: 0;
  }
}

.line-height-small {
    line-height: var(--line-height-small);
}
.line-height-regular {
    line-height: var(--line-height-regular);
}
.display-block {
    display: block;
}

.bg-primary-light-opaque {
    background-color: rgba(136, 133, 225, 0.08);
}

.features-container .icon-inline {
  width: 40px;
  height: 40px;
}

.features-container .icon-inline:before {
  position: absolute;
  content: '';
  height: 50px;
  width: 50px;
  z-index: 1;
  left: 22.5px;
  top: 5px;
  -webkit-mask-box-image-outset: fill;
  transform: scale(0.5);
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

.ic-link:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/54c869ab-8ac3-4b57-8aa0-8d3fe8e4e5c6.svg) right bottom no-repeat;
}
.ic-html:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/7e7fd648-3947-490d-ae5a-460104b7d791.svg) right bottom no-repeat;
}
.ic-premium-whitelabel:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/e70449c5-8985-44a5-86f3-da41056e2ea4.svg) right bottom no-repeat;
}
.ic-domain:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1a7d5d05-b80b-45da-8818-d9105e255a54.svg) right bottom no-repeat;
}
.ic-social-share:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/36b9a1ac-5154-4370-9614-3e6528f7ed39.svg) right bottom no-repeat;
}
.ic-premium-webhooks:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/29f58f2d-0201-4512-a303-9f8c7c813f96.svg) right bottom no-repeat;
}
.ic-trophy:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1ef5624e-f3dd-485b-baf5-8b34476cba8d.svg) right bottom no-repeat;
}
.ic-reward:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/ef12dc7b-daf1-4424-b540-a48e7fe9555e.svg) right bottom no-repeat;
}
.ic-mobile-friendly:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/d22fdbbf-92df-4b30-9fb5-ff5900068d27.svg) right bottom no-repeat;
}
.ic-contacts:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1925c276-b736-4505-8060-8d8143859034.svg) right bottom no-repeat;
}
.ic-no-coding-required:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/4465df04-e414-4001-8f72-7a7c28743095.svg) right bottom no-repeat;
}
.ic-rocket:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/21999ec8-5667-4727-b4d8-f3483a16809c.svg) right bottom no-repeat;
}
.ic-notification:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1a34dacb-fdc2-4baf-a9c6-5e861e9a82a0.svg) right bottom no-repeat;
}
.ic-key:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/ae8bb0ba-4cca-49b7-95fa-706fcb2b8b38.svg) right bottom no-repeat;
}
.ic-localization:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/bd24043d-b6b5-47e4-acb3-f0d0efb3906b.svg) right bottom no-repeat;
}
.ic-analytics:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/f7865687-f94b-452f-af8f-c5366d788f5f.svg) right bottom no-repeat;
}
.ic-premium-contact-import:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/ca40054b-5c55-448b-ac64-9f6610b44a09.svg) right bottom no-repeat;
}
.ic-identity:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/2345f4ad-118a-4b35-8805-bfd44917efbd.svg) right bottom no-repeat;
}
.ic-offline:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/e8bafb30-eda1-4bfc-a470-596350408643.svg) right bottom no-repeat;
}
.ic-palette:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/b680a381-1c90-43aa-a6bb-e7eef61c1fe0.svg) right bottom no-repeat;
}
.ic-whitelabel:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/47d00df6-4e70-41b7-ab0c-052089d57986.svg) right bottom no-repeat;
}
.ic-status-widget:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/6dfe7052-86be-4618-a109-65e244cf4f24.svg) right bottom no-repeat;
}
.ic-stopwatch:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/15691039-7252-46c7-9c9e-94472423b5b3.svg) right bottom no-repeat;
}
.ic-support:before {
  background: url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/74980570-e92c-44a8-bc48-228813818327.svg) right bottom no-repeat;
}

.grayscale2 {
    background: var(--grayscale2);
}

.integrations-container div[data-toggle="tooltip"] > img {
    max-width: 50px;
}

.cursor-pointer {
    cursor: pointer;
}

.testimonials-container .testimonial-logo {
    max-width: 120px;
    height: auto;
}

.testimonials-container .testimonial-logo[alt="Willful"] {
  max-width: 80px;
}
.testimonials-container .testimonial-logo[alt="Charlie Finance"] {
  max-width: 80px;
}
.testimonials-container .testimonial-logo[alt="IMGN Media"] {
  max-width: 70px;
}
.testimonials-container .testimonial-logo[alt="Volumio"] {
  max-width: 110px;
}

.customer-blockquote {
    font-size: 1rem;
}

.cta-text-under-btn {
  font-size: 1rem;
  font-weight: 350;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 10px;
}

.browser-mockup-container {
  position: relative
}

.browser-mockup-container .browser-mockup {
    border-top: 2em solid rgba(225, 225, 225, 0.4);
    /*box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.18);*/
    position: relative;
    background-clip: padding-box;
    border-radius: 3px 3px 0 0;
}



.browser-mockup-container .browser-mockup:before {
display: block;
    position: absolute;
    content: '';
    top: -1.25em;
    left: 1em;
    width: 0.5em;
    height: 0.5em;
    background-clip: padding-box;
    border-radius: 50%;
    background: #FF5F57;
    box-shadow: 0 0 0 2px #FF5F57, 1.5em 0 0 2px #FFBD2E, 3em 0 0 2px #28C940;
}
.browser-mockup-container .browser-mockup .browser-content {
    background: #FFFFFF;
    position: relative;
    overflow-y: hidden;
    height: calc(100vh - 10px - 2em - 85px - 128px - 30px);
    min-height: calc(100vh - 10px - 2em - 85px - 128px - 30px);
}
.browser-mockup-container .browser-mockup:after {
    content: '';
    position: absolute;
    width: 100%;
    border-top: 1px solid #E1E1E1;
    top: 0;
    z-index: 1;
    display: none
}
.preview-content .wistia_embed > div {
  border-radius: 0 0 3px 3px;
}
.preview-content {
  overflow: hidden;
}

.browser-mockup-container .preview-content {
    background: var(--black);
    top: 2em;
    overflow-y: hidden;
    position: absolute;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    width: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    height: calc(100% - 2em);
    min-height: calc(100% - 2em);
}
.browser-mockup-container .preview-content .design-preview-container {
        height: 100%;
    width: 100%;
    overflow: auto;
}

.dropdown-item.growsurf-label:hover {
    background-color: initial;
    color: var(--grayscale7);
}

.growsurf-dropdown-menu {
  padding: 1rem 0;
  box-shadow: var(--z-shadow-5);
  border: none;
}
.growsurf-dropdown-menu .dropdown-item.growsurf-label {
  padding-bottom: 0;
}
.growsurf-dropdown-menu-fixed-width .dropdown-item {
  min-width: 280px;
}
.growsurf-dropdown-menu .dropdown-item.active,
.growsurf-dropdown-menu .dropdown-item:active {
    color: var(--black);
    background-color: #f8f9fa !important;
}
.growsurf-dropdown-menu2 .dropdown-item {
    padding: 2px 1.5rem;
}
.growsurf-dropdown-menu2 .dropdown-item small {
  white-space: initial;
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  line-height: var(--line-height-regular);
  font-size: var(--font-size-small);
}


.card1 {
  box-shadow: var(--z-shadow-1);
}
.card2 {
  box-shadow: var(--z-shadow-2);
}
.card3 {
  box-shadow: var(--z-shadow-3);
}
.card4 {
  box-shadow: var(--z-shadow-4);
}
.card5 {
  box-shadow: var(--z-shadow-5);
}


.product-tour {
  margin: 0 auto;
}
.product-tour .product-tour-inner {
  max-width: none;
  margin: 0 auto;
}
.product-tour .feature {
  padding: 45px 0;
}
.product-tour .feature:nth-child(odd) .feature-inner .features-img-block {
  order: -1;
}

.product-tour .product-tour-inner .feature .feature-inner {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.product-tour .product-tour-inner .feature .feature-inner .features-img-block {
    max-width: 500px;
}
.product-tour .product-tour-inner .feature .feature-inner .features-text-block {
    padding: 20px;
    flex-grow: 1;
    max-width: 500px;
}
.product-tour .product-tour-inner .feature .feature-inner .features-text-block .features-text-block-title {
  font-size: 1.777rem;
  margin-bottom: 20px;
  font-weight: 500;
}
.product-tour .product-tour-inner .feature .feature-inner .features-text-block .features-text-block-description * {
  font-weight: 350;
}

@media only screen and (max-width: 991.98px) {
    .product-tour .product-tour-inner .feature .feature-inner {
      flex-direction: column;
    }
  .product-tour .product-tour-inner .feature .feature-inner .features-img-block {
    order: -1 !important;
    max-width: 500px;
    margin-bottom: 20px;
  }
    .product-tour .product-tour-inner .feature .feature-inner .features-text-block {
        padding: 0;
    }
}

.growsurf-website-section {
  margin: 0 auto;
  text-align: center;
  max-width: 960px;
  position: relative;
}

.growsurf-website-section h1, .growsurf-website-section .h1,
.growsurf-website-section .headline {
  font-size: -webkit-calc(4rem);
  font-size: calc(4rem);
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
  letter-spacing: normal;
}

@media only screen and (max-width: 1200px) {
  .growsurf-website-section h1, .growsurf-website-section .h1,
  .growsurf-website-section .headline {
    font-size: 2.5rem;
  }
}

.growsurf-website-section h2,
.growsurf-website-section .subheadline {
  max-width: 800px;
    margin: 0 auto;
  margin-top: 2rem!important;
  margin-bottom: 2rem!important;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
}

/*.growsurf-website-section-decoration {*/
/*    content: '';*/
/*    background: var(--white);*/
/*    height: 300px;*/
/*    width: 200px;*/
/*    left: -150px;*/
/*    z-index: -1;*/
/*    display: block;*/
/*    position: absolute;*/
/*    opacity: 1.00;*/
/*    margin-top: 80px;*/
/*}*/
/*.growsurf-website-section-decoration:before {*/
/*    content: '';*/
/*    background-image: radial-gradient(circle at 1px 1px, var(--blue) 1px, transparent 0);*/
/*    background-size: 15px 15px;*/
/*    opacity: 0.7;*/
/*    height: 300px;*/
/*    width: 200px;*/
/*    z-index: -3;*/
/*    display: block;*/
/*    position: absolute;*/
/*    -webkit-transform: rotate(15deg);*/
/*        -ms-transform: rotate(15deg);*/
/*            transform: rotate(15deg);*/
/*    left: -35px;*/
/*    top: -90px;*/
/*}*/
/*.growsurf-website-section-decoration:after {*/
/*    content: '';*/
/*    background: var(--blue);*/
/*    height: 300px;*/
/*    width: 200px;*/
/*    left: -20px;*/
/*    z-index: -2;*/
/*    display: block;*/
/*    position: absolute;*/
/*    -webkit-transform: rotate(12deg);*/
/*        -ms-transform: rotate(12deg);*/
/*            transform: rotate(12deg);*/
/*    top: -40px;*/
/*    opacity: 0.08;*/
/*    border-radius: 1rem;*/
/*}*/
/*.growsurf-website-section-decoration.decoration2 {*/
/*  right: -120px;*/
/*  left: initial;*/
/*  margin-top: 120px;*/
/*}*/
/*.growsurf-website-section-decoration.decoration2:before {*/
/*  right: -35px;*/
/*  left: initial;*/
/*    -webkit-transform: rotate(-10deg);*/
/*        -ms-transform: rotate(-10deg);*/
/*            transform: rotate(-10deg);*/
/*}*/
/*.growsurf-website-section-decoration.decoration2:after {*/
/*  right: -20px;*/
/*  left: initial;*/
/*  top: 120px;*/
/*    -webkit-transform: rotate(-15deg);*/
/*        -ms-transform: rotate(-15deg);*/
/*            transform: rotate(-15deg);*/
/*}*/

/*@media (max-width: 768px) {*/
/*  .growsurf-website-section-decoration {*/
/*    display: none;*/
/*  }*/
/*}*/

/*.growsurf-website-section-decoration.reverse {*/
/*    -webkit-transform: scale(-1,1);*/
/*        -ms-transform: scale(-1,1);*/
/*            transform: scale(-1,1);*/
/*}*/

nav.topnav.active {
  box-shadow: var(--z-shadow-1);
  -webkit-box-shadow: var(--z-shadow-1);
  transition: all 0.3s;
}


.ancillary-benefits-icon {
    background: rgba(136, 133, 225, 0.08);
    display: inline-block;
    padding: 20px;
    border-radius: 100%;
}

.testimonials-container-embedded .masonry {
  display: flex
}

.add-on-services-embedded .masonry {
    display: flex;
}

.single-testimonial .masonry {
  display: flex;
  justify-content: center;
  column-count: 1;
  -webkit-column-count: 1;
  margin: 0 auto;
}

.single-testimonial .masonry .card {
  display: flex;
  max-width: 800px;
}

.testimonials-container-embedded .masonry .card {
  /*box-shadow: none;*/
  /*-webkit-box-shadow: none;*/
}

@media (max-width: 768px) {
  .testimonials-container-embedded .masonry {
    flex-direction: column;
  }
  .add-on-services-embedded .masonry {
    flex-direction: column;
  }
}

.case-study-internal-link {
  padding: 1rem 1.5rem;
  margin-left: -1.5rem;
  background: rgba(136, 133, 225, 0.08);
  margin-right: -1.5rem;
  margin-bottom: -1.5rem;
  display: block;
}

.denoted-comment {
    font-size: 0.9rem;
}

.form-control {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
  border: none;
  padding: .45rem 10px;
}
.form-control.form-control-no-shadow {
    box-shadow: none;
}

.form-control.form-control-border {
    border: 1px solid var(--grayscale4) !important;
}

.form-control.form-control-border:hover,
.form-control.form-control-border:focus,
.form-control.form-control-border:active {
  border: 1px solid transparent;
}

.form-control:hover,
.form-control:focus,
.form-control:active {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.3s;
}

.form-control.form-control-no-shadow:hover,
.form-control.form-control-no-shadow:focus,
.form-control.form-control-no-shadow:active {
    border: 1px solid transparent;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.3s;
}

.grayscale3 {
    background: var(--grayscale3);
}
.grayscale2 {
    background: var(--grayscale2);
}
.white {
    background: var(--white);
}

.form-control-lg {
  padding-left: 1rem;
  padding-right: 1rem;
}
.form-inline-signup-email {
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.form-inline-signup-email .form-control[name="email"] {
    border-radius: 3px 0 0 3px;
    border: 1px solid transparent;
}
.form-inline-signup-email .btn {
   line-height: initial;
   border-radius: 0 3px 3px 0;
   white-space: nowrap;
}

.form-group {
  margin-bottom: 0;
}



@media (max-width: 1199px) {
    nav.navbar .form-inline-signup-email {
      flex-flow: row;
    }
    nav.navbar .form-inline-signup-email .btn {
      min-width: fit-content;
    }
}

@media (max-width: 991.98px) {
    nav.navbar .form-inline-signup-email {
        flex: initial;
    }
    nav.navbar .form-inline-signup-email .btn {
      min-width: initial;
    }
}
.legal-page p {
  margin-bottom: 0;
}

.pricing-start-here-tag::before {
    content: "↓ Start here and auto-scale as you go";
    position: absolute;
    font-size: x-small;
    top: 1px;
    background: var(--grayscale2);
    color: var(--grayscale8);
    padding: 3px 10px;
    border-radius: 10px 10px 0 0;
    border-top: 1px solid var(--grayscale4);
    border-left: 1px solid var(--grayscale4);
    border-right: 1px solid var(--grayscale4);
    box-shadow: var(--z-shadow-1);
}

.pricing-table-container .pricing-header {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  min-width: 277px;
  max-width: 300px;
  background: var(--white);
  text-align: left !important;
  z-index: 3;
  padding-top: 20px;
}

.pricing-table-container .pricing-header2 {
  min-width: 277px  ;
  max-width: 300px;
  background: var(--white);
  text-align: left !important;
  z-index: 3;
  font-size: 1.2rem;
  position: relative;
}

.pricing-table-container {
    line-height: var(--line-height-regular);
  /*margin-top: 3rem;*/
}

.pricing-table-container .table > tbody > tr {
    line-height: var(--line-height-regular);
}
.pricing-table-container .table > tbody > tr:nth-child(1) {
    /*border-bottom: 1px solid #dee2e6;*/
    margin-bottom: 0;
}

.pricing-table-contaner .table > tbody + tbody {
  border-top: none !important;
}

.pricing-table-container .pricing-header h2 {
    font-size: var(--font-size-p);
}


.pricing-plan-main-card {
  padding: 20px;
}

ul.pricing-plan-main-card-features-list {
  padding-left: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--gray-light);
  margin-top: 10px;
}
ul.pricing-plan-main-card-features-list li {
  list-style-type: none;
  position: relative;
  margin-bottom: 5px;
}

ul.pricing-plan-main-card-features-list li:before {
  content: "\f00c"; /* Check icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -30px; /* Adjust this to move the icon closer or further from the text */
  color: var(--blue);
}

.pricing-plan-main-card .yearly-savings {
  position: absolute;
  top: 0;
  right: 0;
  font-size: small;
  color: var(--blue);
  padding: 2px 6px;
  border-radius: 12px;
  font-weight: bold;
  outline: 1px solid var(--blue);
}
.pricing-plan-main-card .yearly-savings .savings {
  font-weight: bold;
}

.pricing-plan-main-card .yearly-total {
  font-size: x-small;
  position: absolute;
  color: var(--gray-dark);
}
.pricing-plan-main-card .billed-monthly {
  font-size: x-small;
  position: absolute;
  color: var(--gray-dark);
  margin-top: 8px;
}

.pricing-plan-title {
    font-size: 1.5rem !important;
    font-weight: var(--font-weight-bold);
}
.pricing-table-container .pricing-header .form-control {
    max-width: 300px;
}

.pricing-table-container .pricing-header-input-container {
    position: relative;
}

.pricing-table-container .table th[scope="row"] {
    text-align: left;
    max-width: 300px;
    padding: .5rem .75rem;
  z-index: 1;
  background: var(--white);
}

@media (max-width: 991.98px) {
    .hide-on-tablet {
        display: none;
    }
    .pricing-table-container {
        overflow-y: auto;
    }
    .pricing-table-container .pricing-header {
        top: 0 !important;
    }

    .pricing-table-container .table th[scope="row"] {
        /* position: sticky;
        position: -webkit-sticky;
        left: 0; */
    }
    img[alt="Get 2 months free with a Yearly plan"] {
      margin-left: initial !important;
    }
}

.faq-section .faq-block h4 {
    font-size: var(--font-size-p);
}

.faq-section .faq-block {
    font-size: var(--font-size-p);
    margin: 1rem 0;
    margin-bottom: 0;
}
.faq-section .faq-block div > p {
    margin-bottom: 1rem;
}

.pricing-toggle-button {
    color: var(--grayscale4);
    border-radius: 0 3px 3px 0;
  /*min-width: 140px;*/
}
.pricing-toggle-button.planactive {
    background: var(--blue) !important;
    color: var(--white) !important;
    border: 2px solid var(--blue);
}

.pricing-toggle-button {
    color: var(--grayscale7) !important;
    border: 2px solid var(--grayscale4);
}

.pricing-plan-cta-button {
    width: 100%;
    max-width: 300px;
}

.pricing-feature-separator-row {
    /*background: var(--grayscale2);    */
  font-weight: var(--font-weight-bold);
  color: var(--black);
  font-size: 1.2rem;
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
}

.pricing-table-container .fa.fa-check {
    color: var(--blue);
}
.pricing-table-container .fa.fa-times {
    opacity: 0.2;
}

.pricing-plan-cta-button-container {
    margin-bottom: 0;
    /*display: none;*/
}

.pricing-table-container .table > tbody > tr:nth-child(2) > th,
.pricing-table-container .table > tbody > tr:nth-child(2) > td {
    /*border-top: none !important;*/
}

.pricing-plan-features-summary {
    line-height: var(--line-height-large);
    padding: 1rem 0;
    /*border-bottom: 1px solid #dee2e6 !important;*/
}
.pricing-header .lead {
    margin-left: -3px;
    color: var(--grayscale8);
}

.pricing-table-container.collapse:not(.show) {
    max-height: 610px;
    display: block;
    overflow-y: hidden;
}

.pricing-table-container.collapse:not(.show) .pricing-header {
  top: initial;
}

.pricing-table-container.collapse.show {
    margin-bottom: 100px; /* height of the .toggle-full-pricing-features-table:before */
}

.toggle-full-pricing-features-table {
    z-index: 2;
    text-align: center;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: -10px;
    padding-bottom: 10px;
}

.toggle-full-pricing-features-table > a:after {
    content: '↓' !important;
    margin-left: 5px;
}

.toggle-full-pricing-features-table > a.collapsed:after {
    content: '↑' !important;
    margin-left: 5px;
}

.toggle-full-pricing-features-table:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%);
  width: 100%;
  height: 100px;
}

.toggle-full-pricing-features-table a {
    z-index: 2;
    position: relative;
}

    .share-icons {
        position: fixed;
        top: 30%;
        left: 15px;
        z-index: 1000;
    }

    .border-w-2px {
        border-width: 2px !important;
    }

.alert-success > p {
    margin-bottom: 0;
}


.generic-section {
  margin: 0 auto;
}
.generic-section .generic-section-inner {
  max-width: none;
  margin: 0 auto;
}
.generic-section .feature {
  padding: 45px 0;
}
.generic-section .feature:nth-child(odd) .feature-inner .features-img-block {
  order: -1;
}

.generic-section .generic-section-inner .feature .feature-inner {
  margin: 0 auto;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.generic-section .generic-section-inner .feature .feature-inner .features-img-block {
    max-width: 500px;
}
.generic-section .generic-section-inner .feature .feature-inner .features-text-block {
    padding: 20px;
    flex-grow: 1;
    max-width: 500px;
}
.generic-section .generic-section-inner .feature .feature-inner .features-text-block .features-text-block-title {
  font-size: 1.777rem;
  margin-bottom: 20px;
  font-weight: 500;
}
.generic-section .generic-section-inner .feature .feature-inner .features-text-block .features-text-block-description * {
  font-weight: 350;
}

@media only screen and (max-width: 991.98px) {
    .generic-section .generic-section-inner .feature .feature-inner {
      flex-direction: column;
    }
  .generic-section .generic-section-inner .feature .feature-inner .features-img-block {
    order: -1 !important;
    max-width: 500px;
    margin-bottom: 20px;
  }
    .generic-section .generic-section-inner .feature .feature-inner .features-text-block {
        padding: 0;
    }
}
.top-25 {top: 25%!important}html{scroll-behavior: smooth;}[data-toggle="modal"] {cursor: pointer;}
.integration-page-image {
    width: 100%;
    max-width: 100px;
}

.view-all-integrations {
  margin-top: -2rem;
  padding-bottom: 3rem;
}
.view-all-integrations .container {
  padding-left: 15px;
}
@media (max-width: 768px) {
  .view-all-integrations {
    margin-top: -2rem;
    padding-bottom: 2rem;
  }
  .view-all-integrations .container {
    padding-left: 0;
  }
}
@media (max-width: 576px) {
  .view-all-integrations {
    margin-top: -2rem;
    padding-bottom: 3rem;
  }
  .view-all-integrations .container {
    padding-left: 15px;
  }
}

.black-text {
  color: var(--black);
}

.hide {
    display: none;
}

.landing-page-section .landing-hero-section {
  border-bottom: none
}

canvas{
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.chartjs-container {
  max-width: 1140px; width: 100%; margin: 0 auto; display: block;
  padding-right: 15px;
  padding-left: 15px;
}


@-webkit-keyframes loading-progress {
   0% {
     left: 0;
     transform: translateX(-100%);
  }
   100% {
     left: 100%;
     transform: translateX(0%);
  }
}
 @-moz-keyframes loading-progress {
   0% {
     left: 0;
     transform: translateX(-100%);
  }
   100% {
     left: 100%;
     transform: translateX(0%);
  }
}
 @-ms-keyframes loading-progress {
   0% {
     left: 0;
     transform: translateX(-100%);
  }
   100% {
     left: 100%;
     transform: translateX(0%);
  }
}
 @keyframes loading-progress {
   0% {
     left: 0;
     transform: translateX(-100%);
  }
   100% {
     left: 100%;
     transform: translateX(0%);
  }
}

 .badge.badge-primary {
    background: var(--blue);
    display: block;
    width: fit-content;
}
.badge-in-open-page {
    background: var(--blue);
    font-size: var(--font-size-small);
    margin-left: 4px;
    line-height: var(--line-height-regular);
}
.open-goal {
  width: 100%;
  position: relative;
}
.open-goal .open-goal-top {
  text-align: left;
  margin-bottom: 5px;
}
.open-goal .open-goal-progress-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.open-goal .open-goal-progress-bar {
  position: relative;
  max-width: 100%;
  z-index: 3;
  height: 10px;
  background: #8885E1;
  margin-bottom: 5px;
  overflow: hidden;
}
.open-goal .open-goal-progress-bar.goal-achieved {
    background: var(--blue);
}
.open-goal .open-goal-progress-bar.goal-achieved:after {
    display: none;
}

.open-goal .open-goal-progress-bar:after {
  z-index: 4;
  -webkit-animation: loading-progress 2s infinite ease-in-out;
  animation: loading-progress 2s infinite ease-in-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  content: '';
  position: absolute;
  height: 100%;
  width: 30%;
  top: 0;
  opacity: 0.4;
  background: var(--purple);
}

.open-goal .open-goal-progress-bar-background {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 10px;
  width: 100%;
  border: 1px solid var(--grayscale4);
  overflow: hidden;
}
*[data-grsf-metric] {
  font-weight: bold
}

.open-announcement-banner-container {
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    background: #515151;
    position: sticky;
    z-index: 10;
    max-width: 400px;
    margin: 0 auto;
    font-size: small;
    width: fit-content;
    border-radius: 200px;
    padding: 10px 15px;
    top: 82px;
    margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
}
.open-announcement-banner-container a {
    color: white;
}
.open-announcement-banner-inner {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

@media (max-width: 469px) {
  .open-announcement-banner-container {
    position: relative;
    top: 0
  }
}

.tooltip {
    z-index: 99999;
}
.pricing-modal-window {
  position: fixed;
  background-color: rgba(0,0,0,.8);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  overflow: scroll;
}
.pricing-modal-window .pricing-table-container .pricing-header {
  top:  0;
  max-width: 200px;
}
.pricing-modal-window .pricing-table-container .pricing-header .form-control {
  max-width: none;
}
.pricing-modal-window .pricing-plan-cta-button {
  max-width: none;
}
.pricing-modal-window:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.pricing-modal-window-inner {
  width: 100%;
  padding: var(--space-20);
  background: var(--white);
}
.pricing-modal-close {
  box-shadow: var(--z-shadow-2);
  color: var(--grayscale7);
  position: fixed;
  right: var(--space-10);
  text-align: right;
  top: var(--space-10);
  text-decoration: none;
  z-index: 10;
  background: var(--white);
  padding: 3px 10px;
  border-radius: 12px;
}
.team-avatars-on-open-page {
  white-space: nowrap;
  overflow: auto
}
.feature-block-logo-section {
  /*display: flex;*/
}

.feature-block-logo-section .feature-block-logo-section-label {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}

.feature-block-logo-section .feature-block-logo-section-logos-and-texts {
  display: flex;
  flex-direction: column;
}

.feature-block-logo-section .feature-block-logo-section-logos-and-texts .feature-block-logo-section-logo-and-text {
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.feature-block-logo-section .feature-block-logo {
  max-width: 20px;
  margin-right: 10px;
  max-height: fit-content;
}

@media only screen and (max-width: 768px){
  .feature-block-logo-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-block-logo-section .feature-block-logo-section-label {
    margin-bottom: 10px;
  }
}

.growsurf-popup-intent-modal {
}

.growsurf-popup-intent-modal .modal-content {
	padding: var(--space-20);
	border: none;
	max-width: 460px;
	box-shadow: var(--z-shadow-5);
	margin: 0 auto;
	margin-top: 5%;
}

.growsurf-popup-intent-modal .modal-content .modal-exit-button {
	position: absolute;
	right: var(--space-5);
	top: 0;
	padding: var(--space-10);
	opacity: 0.5;
	transition: 0.3s;
	cursor: pointer;
}
.growsurf-popup-intent-modal .modal-content .modal-exit-button:hover {
	opacity: 1.0;
	transition: 0.3s;
}
.ouibounce-modal-backdrop {
    opacity: 0.7;
}

/* Multi-Part CSS */
.growsurf-popup-intent-modal input[type=checkbox] {
  /* Position the checkbox in upper left corner */
  position: absolute;
  opacity: 0;
}

/*Get rid of the 'companyType' radio circles */
.growsurf-popup-intent-modal input[name="companyType"]{
    display: none;
}
/*Only show the 'companyType' radio circle when it is selected */
.growsurf-popup-intent-modal input[name="companyType"]:checked{
    display: initial;
}

/* Styling Parts */
.growsurf-popup-intent-modal #part1,
.growsurf-popup-intent-modal #part2,
.growsurf-popup-intent-modal #part1-inline,
.growsurf-popup-intent-modal #part2-inline {
  z-index: 2;
  display: block;
  height: auto;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

/* Hidden Parts */
.growsurf-popup-intent-modal #part2,
.growsurf-popup-intent-modal #part2-inline {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* Show Step 2 & Hide Step 1 (in popup lead form) */
.growsurf-popup-intent-modal #step2:checked ~ #part2 {
  opacity: 1;
  height: auto;
}

.growsurf-popup-intent-modal #step2:checked ~ #part1 {
  opacity: 0;
  height: 0;
  display: none;
}

/* Show Step 2 & Hide Step 1 (in inline lead form) */
.growsurf-popup-intent-modal #step2-inline:checked ~ #part2-inline {
  opacity: 1;
  height: auto;
}

.growsurf-popup-intent-modal #step2-inline:checked ~ #part1-inline {
  opacity: 0;
  height: 0;
  display: none;
}

.growsurf-popup-intent-modal-inline {
}

.growsurf-popup-intent-modal-inline .modal-content {
  max-width: 1140px !important;
  box-shadow: var(--z-shadow-0);
}

.text-blue, .blue-text {
    color: var(--blue);
}
.width-100 {
    width: 100%;
}
.bold {
    font-weight: bold;
}
.cursor-rocket:hover {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto !important
}
.text-transform-initial {
    text-transform: initial;
}
.use-cases-menu-container {
    display:  flex;
}

.use-cases-menu-container .use-cases-menu-container-column {
    min-width: 250px;
}

.use-cases-menu-container .use-cases-menu-container-column:nth-child(2) {
    border-left: 1px solid #E1E1E1;
}
.icp-nav-icon {
  max-width: 20px;
  margin-right: 10px;
}

@media (max-width: 469px) {
    .use-cases-menu-container {
        flex-direction:  column;
    }
    .use-cases-menu-container .use-cases-menu-container-column:nth-child(2) {
        border-top: 1px solid #E1E1E1;
        border-left: none;
        margin-top: 10px;
        padding-top: 10px;
    }
}
.footer-integration-img {
	max-width: 12px;
	margin-right: 5px;
}

.blog-post-page .blog-sidebar-cta-card-section {
    /*position: sticky;*/
    /*top: 90px;*/
    /*z-index: 2;    */
}

.growsurf-main-navbar {
	position: sticky !important;
	margin-bottom: -60px;
  flex-direction: column;
}
.vertical-align-bottom {
	vertical-align: bottom !important;
}
.border-top-none {
	border-top: none !important;
}
.pricing-plan-image-free {
	max-width: 71px;
}
.pricing-plan-image-startup {
	max-width: 99px;
}
.pricing-plan-image-business {
	max-width: 178px;
}
.pricing-plan-image-elite {
	max-width: 221px;
}
.icp-image {
	max-width: 160px;
	padding: 20px;
	margin-bottom: 10px;
}
.icp-hero-image {
	max-width: 320px;
	margin-top: 20px;
}
.nav-tabs-overflow {
  flex-wrap: nowrap;
  overflow: auto;
  white-space: nowrap;
}
.demo-iframe-video {
	border: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 463px;
	overflow: hidden;
}


.inline-blog-cta {
	display:  flex;
	margin-top:  var(--space-45);
	margin-bottom:  var(--space-45);
	flex-direction: row;
	    background: var(--grayscale2) !important;
    color: var(--grayscale9) !important;
}
.inline-blog-cta .inline-blog-cta-left-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
	padding-left: 10px;
	padding-right: 10px;
}
.inline-blog-cta .inline-blog-cta-right-side {
	margin-left: auto;
}

.inline-blog-cta .inline-blog-cta-right-side .inline-blog-cta-right-side-image  {
	display: flex;
	align-items: center;
	justify-content: end;
	max-width:  var(--max-width-400);
	padding-left: 10px;
	padding-right: 10px;
}

@media (max-width: 576px) {
	.inline-blog-cta {
		flex-direction: column-reverse;
	}
	.inline-blog-cta .inline-blog-cta-left-side {
		text-align:  center;
	}
	.inline-blog-cta .inline-blog-cta-right-side {
		margin: 0 auto;
		margin-bottom:  20px;
	}
	.inline-blog-cta .inline-blog-cta-right-side .inline-blog-cta-right-side-image  {
		justify-content: center;
	}
}

.video-js-in-demo-cta-section {
    top: 0!important;
    bottom: 0!important;
    position: absolute!important;
    left: 0!important;
    right: 0!important;
    background-color: rgba(0,0,0,0.4) !important;
}

.video-js-in-demo-cta-section .vjs-big-play-button {
  margin-left: -1em !important;
}

@media only screen and (max-width: 469px) {
    .demo-cta-section-container .features-img-block {
        max-width: 400px;
    }
}

.jumbotron:nth-of-type(1) {
  border-bottom: 1px solid #E1E1E1;
  padding-bottom: 5rem;
}

.blog-sidebar-cta {
  background: var(--grayscale2) !important;
  color: var(--grayscale9) !important;
}
.blog-sidebar-cta h3 {
    margin-bottom: 1rem;
}
.blog-sidebar-inline-cta {
    margin-top: 3rem;
}
.blog-sidebar-inline-cta {
    padding: 3rem 1.5rem !important;
}
.blog-sidebar-cta-email-input {
  border-color: transparent !important;
}
.blog-sidebar-cta-form-group {

}
.blog-sidebar-cta-image {
  max-width: 120px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.growsurf-page-link {
  color: var(--white);
  background: ;
}

#story .h1,
#story h1,
#story .h2,
#story h2,
#story .h3,
#story h3,
#story .h4,
#story h4,
#story .h5,
#story h5,
#story .h6,
#story h6 {
  margin: 2rem 0;
}

#story {
  margin-top: 0;
}
#story img {
  margin: 1.5rem 0;
  margin-bottom: 0;
  cursor: hover;
}
#story figcaption {
    font-size: .85em;
    font-style: italic;
    color: var(--grayscale8);
    margin-bottom: 3rem;
    /*border-bottom: 1px solid var(--grayscale4);*/
    padding-bottom: 0.5rem;
    position: relative;
    margin-left: 40px;
}
#story figcaption:before {
    position: absolute;
    left: -25px;
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    background: transparent url(https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/8435d2f5-beb4-44a1-a81e-18db7affe7f7.png) no-repeat 0 0;
    background-size: cover;
    top: -3px;
    opacity: 0.7;
    transform: rotate(14deg);
    -webkit-transform: rotate(14deg);
}


#story hr {
    margin: 4vw 0;
}
#story blockquote {
  font-size: 1.1em;
  margin: 4vw 0;
  margin-top: 1.5rem;
  font-family: var(--open-sans);
  font-style: italic;
  color: #515151;
  padding: 1.2em 30px 1.3em 75px;
  border-left: 8px solid #8885E1;
  line-height: 1.6;
  position: relative;
  background: #F0F0F0;
}
#story blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #8885E1;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.tweet-this {
    margin-top: 10px;
    position: absolute;
    right: 20px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
    -o-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
}
.tweet-this a {
    border-radius: 3px;
    font-weight: bold;
    font-style: normal !important;
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 10px 15px;
    background: #00aced;
    color: #fcfcfc;
}
.tweet-this a:hover, .tweet-this a:focus, .tweet-this a:active {
    color: #fcfcfc;
}
.tweet-this a:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    background: transparent url(https://s3-us-west-2.amazonaws.com/growsurf-blog/2019/10/twitter.png) no-repeat 0 0;
    background-size: cover;
    top: 3px;
    position: relative;
}

@media only screen and (max-width: 991.98px) {
  body > .jumbotron > .container > .row > .col-lg-8.pr-5 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body > .jumbotron > .container > .row > .col-lg-4 > div > .row > .col-12.mb-2 > a > .row > .col-4 {
    max-width: 140px;
  }

  .blog-sidebar-cta {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

@media only screen and (max-width: 767.98px) {
  body > .jumbotron > .container > .row > .col-lg-8.pr-5 {
    padding-right: 15px !important;
    padding-left: 15px !important;
  }
}

.clickable-img {
    cursor: pointer;
}

.readRemainingGauge {
  font-family: var(--font-family) !important;
  background: rgba(0,0,0,.8) !important;
  z-index: 9999999 !important;
}
.optional-tag {
	font-size: var(--font-size-small);
	padding: 2px 5px;
	background: var(--grayscale4);
}
.input-usd-container {
  display: flex;
  align-items: center;
  position: relative;
}
.input-usd-container input {
	padding-left: 50px;
}
.input-usd-container::before {
  content: '$';
  position: absolute;
  vertical-align: middle;
  background: var(--grayscale3);
  height: 50px;
  line-height: 1;
  width: 40px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.roi-calculator-roi-section {
  padding: 20px;
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
max-width: 420px;
width: 100%;
}

@media only screen and (max-width: 991.98px) {
	.roi-calculator-section {
		flex-direction: column;
	}
	.roi-calculator-roi-section {
		padding: 20px !important;
		margin: 0 auto !important;
		width: 100% !important;
		max-width: none !important;
		margin-top: 40px !important;
	}
}
@media (max-width: 768px) {
	.roi-calculator-questions .roi-calculator-question {
		flex-direction: column;
	}
}

.red-text {
    color: var(--red);
}

/*
  Allow angular.js to be loaded in body, hiding cloaked elements until
  templates compile.  The !important is important given that there may be
  other selectors that are more specific or come later and might alter display.
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

.cc-window {
	right: 1em !important;
	left: initial !important;
	z-index: 9999999999 !important;
}

@media screen and (max-width: 414px) and (orientation: portrait),
screen and (max-width: 736px) and (orientation: landscape) {
	.cc-window {
		right: 0 !important;
		left: 0 !important;
	}
}

.integration-logo-in-pricing {
	margin-right: 5px;
	margin-top: -5px;
	display: inline-block;
	width: 18px;
	height: auto;
}

.social-logo-in-pricing {
    margin-right: -5px;
    margin-top: -2px;
    display: inline-block;
    width: 30px;
    height: auto;
    margin-left: -5px;
}

.hero-customer-section {
    position: absolute;
    right: -10px;
    top: 90px;
    max-width: 620px;
    width: 100%;
    margin-top: 0px;
    z-index: 3;
}
.hero-customer-quote {
    z-index:  2;
    position: relative;

    animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
.hero-customer-quote-inner {
    background:  white;
    margin-top: -30px;
    margin-left: -30px;
}
.hero-customer-quote-person-avatar {
    max-width:  50px;
}
.hero-customer-quote-company-logo {
    max-width: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.hero-customer-section .preview-content:after {
  background: linear-gradient(to top,
    white 10%,
    rgba(255, 255, 255, 0.978) 18.55%,
    rgba(255, 255, 255, 0.925) 25.93%,
    rgba(255, 255, 255, 0.857) 32.23%,
    rgba(255, 255, 255, 0.781) 37.9%,
    rgba(255, 255, 255, 0.701) 43.12%,
    rgba(255, 255, 255, 0.62) 48.07%,
    rgba(255, 255, 255, 0.538) 52.84%,
    rgba(255, 255, 255, 0.455) 57.61%,
    rgba(255, 255, 255, 0.373) 62.38%,
    rgba(255, 255, 255, 0.291) 67.33%,
    rgba(255, 255, 255, 0.212) 72.55%,
    rgba(255, 255, 255, 0.138) 78.22%,
    rgba(255, 255, 255, 0.07) 84.61%,
    rgba(255, 255, 255, 0.019) 92.08%,
    rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100%;
  z-index:  1;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0.8;
}

@media (max-width: 1199px) {
    .hero-customer-section {
        position: relative;
        right: initial;
        top: initial;
        margin: 0 auto;
        margin-top: -30px;
    }
    .hero-customer-quote-inner {
        margin: -30px;
        margin-bottom: 60px;
    }
}

@keyframes fadein {
    from { opacity:0; }
    to { opacity:1; }
}
@-moz-keyframes fadein { /* Firefox */
    from { opacity:0; }
    to { opacity:1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from { opacity:0; }
    to { opacity:1; }
}
@-o-keyframes fadein { /* Opera */
    from { opacity:0; }
    to { opacity: 1; }
}

.cc-window {
    padding-left: 80px !important;
}
.cc-window::before {
    content: '';
    opacity:  0.7;
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    left: 22px;
    margin-top: 5px;

    background-image: url("https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/bfa08b5a-1774-421d-8263-e8ca17727311.svg"); /* https://d1pnnwteuly8z3.cloudfront.net/images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/9e03e318-5b6a-44b6-a932-46bcfb9b9300.svg */
    background-color: transparent; /* Used if the image is unavailable */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}

.blog-category-tag {
    padding: 2px 8px;
    display: inline-block;
    background: rgba(136, 133, 225,0.12);
    font-size: 0.75rem;
    border-radius: 4px;
    color: #8885E1;
    margin-bottom: 10px !important;
    margin-right: 5px;
}

.toggle-service-button {
    color: var(--grayscale4);
    border-radius: 0 3px 3px 0;
  min-width: 140px;
}
.toggle-service-button.serviceactive {
    background: var(--blue) !important;
    color: var(--white) !important;
    border: 2px solid var(--blue);
}

.toggle-service-button {
    color: var(--grayscale7) !important;
    border: 2px solid var(--grayscale4);
}

/* Hide free plan elements */
.free-plan-element {
	/* display: none; */
}

.landing-social-proof-badges {
	transform: scale(0.8);
	 -webkit-transform: scale(0.8);
	 transform-origin-x: 0;
	 -webkit-transform-origin-x: 0;
	 -ms-transform-origin-x: 0;
}

@media (max-width: 768px) {
	.landing-social-proof-badges {
			margin: 0 auto;
	    text-align: center;
	    width: 100%;
	    display: block;

		 transform-origin-x: initial;
		 -webkit-transform-origin-x: initial;
		 -ms-transform-origin-x: initial;
	}
}

.announcement-banner {
  background: #8885E1;
  color: #fff;
  padding: 5px;
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 1;
  position: relative;
  line-height: 1.3;
}

.form-control::-webkit-input-placeholder { color: #ACACAC; }
.form-control:-ms-input-placeholder { color: #ACACAC; }
.form-control::placeholder { color: #ACACAC; }

.text-primary { color: var(--primary1) !important }

.muted-image-caption-via-javascript a {
  color: var(--grayscale6);
  text-decoration: underline;
}

s,
strike { text-decoration: none; position: relative; }
s::before,
strike::before {
    top: 50%; /*tweak this to adjust the vertical position if it's off a bit due to your font family */
    background:var(--red);
    opacity: .7;
    content: '';
    width: 110%;
    position: absolute;
    height: .2em;
    border-radius: .2em;
    left: -10%;
    white-space: nowrap;
    display: block;
    transform: rotate(-15deg);
}
s.straight::before,
strike.straight::before {
  transform: rotate(0deg);
  left: -1%;
  width: 102%;
}


#story .table-container {
  overflow: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  box-shadow: var(--z-shadow-1);
  -webkit-box-shadow: var(--z-shadow-1);
}

#story table {
  width: 100%;
  border-collapse: collapse;
  overflow: auto;
  display: inline-table;
  overflow-x: auto;
  background: var(--white);
  -webkit-overflow-scrolling: touch;
  min-width: 400px;
  background-clip: padding-box;
 /* stops bg color from leaking outside the border: */
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
#story table thead tr {
  background-color: var(--grayscale3);
  font-weight: 700;
}
#story table thead tr th {
  font-weight: bold;
}
#story table th, #story table td {
  text-align: left;
  padding: 10px 15px;
}
#story table tbody tr td:first-child {
  font-weight: 700;
}
#story table tbody tr:nth-of-type(even) {
  background-color: var(--grayscale2);
}
#story table tbody tr:last-of-type {
  border-bottom: none;
}

.blog-post-cover-image {
  display: block;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: padding-box;
}
.col-12 .blog-post-cover-image-thumbnail {
  height: 400px;
}
@media (max-width: 768px) {
  .col-12 .blog-post-cover-image-thumbnail {
    height: 220px;
  }
}
.blog-post-cover-image-thumbnail {
  display: block;
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-clip: padding-box;
}

.handwritten-text {
  max-height: 44px;
  opacity: 0.6;
}

.social-proof-pill {
  border-radius: 100px;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-proof-pill-text {
  text-align: center;
}




.product-header+.container {
  margin-top: 30px;
}
    .product-header {
        background: #fafafa;
        padding: 5px;
        z-index: 1;
        position: absolute;
        border-bottom: 1px solid #e1e1e1;
        justify-content: flex-start;
        align-items: flex-start;
        display: flex;
        width: 100%;
        margin-bottom: 0.5rem;
        margin-top: -0.5rem;
        left: 0;
        right: 0;
    }
    .product-header-inner {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        font-size: 12px;
    }
    .product-header-left-side {
        white-space: nowrap;
        font-weight: 500;
    }
    .product-header-product-name-and-description-container {

    }
    .product-header-product-name-and-description {
        color: #000;
        cursor: pointer;
    }
    .product-header-product-name {
        margin-right: 1px;
    }
    .product-header-product-description {
        opacity: 0.7;
        font-weight: 500;
    }
    .product-header-product-description span {
        font-weight: 500;
    }
    .product-header-dropdown-caret {
        max-width: 12px;
        position: relative;
        margin-top: -1px;
        margin-left: 2px;
        opacity: 0.5;
    }
    .product-header-right-side {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-header-right-side-item {
        position: relative;
        margin-right: .6rem;
        margin-left: .6rem;
    }
    .product-header-right-side-item > a {
        font-size: 12px;
        color: rgba(0, 0, 0, .5);
    }
    .product-header-book-demo-btn {
        font-size: 12px;
        text-transform: initial;
        padding: 2px 5px;
        margin-top: -6px;
        margin-bottom: -3px;
    }
    .product-header-book-demo-btn-avatar {
        max-width: 19px;
        margin-right: 6px;
        border-radius: 3px;
        margin-top: -11px;
        margin-bottom: -8px;
        position: relative;
        margin-left: -4px;
    }
    .growsurf-product-dropdown-menu {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .growsurf-product-dropdown-menu .dropdown-item {
        padding-top: 10px;
        padding-bottom: 10px;
        white-space: normal;
        font-size: 14px;
        line-height: 1.1;
    }
    .growsurf-product-dropdown-menu .dropdown-item.active {
        background: #F0F0F0 !important;
    }
    .growsurf-product-dropdown-menu .dropdown-item img {
        margin-top: 5px;
        margin-bottom: 2px;
    }
    .growsurf-product-dropdown-menu-show-until-mobile {
        display: initial;
    }
    .growsurf-product-dropdown-menu-show-until-mobile.product-header-right-side {
        display: flex;
    }
    .growsurf-product-dropdown-menu-hide-until-mobile {
        display: none !important;
    }
    @media (max-width: 991.98px) {
        .product-header-inner {
            padding-left: 0;
            padding-right: 0;
        }
        .product-header-right-side-item:last-child {
            margin-right: 0;
        }
    }
    @media (max-width: 576px) {
        .product-header-inner {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    @media (max-width: 350px) {
        .growsurf-product-dropdown-menu .dropdown-item {
            min-width: 220px;
            max-width: 220px;
        }
    }
    /* For GrowSurf */
    @media (max-width: 400px) {
        .growsurf-product-dropdown-menu-show-until-mobile { display: none !important; }
        .growsurf-product-dropdown-menu-hide-until-mobile { display: initial !important; }
    }


    .landing-hero-section-centered-elements.landing-hero-section .landing-hero-section-inner {
      align-items: center;
      text-align: center;
      min-height: initial !important;
    }
    .landing-hero-section-centered-elements .landing-hero-section-meat {
      max-width: none !important;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .landing-hero-section-centered-elements .landing-hero-section-inner .landing-hero-description {
        max-width: 800px !important;
    }

.scrolling-reward-template-wrapper-item {
  display: inline-block;
  padding: 0 10px;
  text-align: left;
  margin-bottom: 20px;
}
.scrolling-reward-template-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scrolling-reward-template-item > div {
      display: flex;
    flex-direction: column;
    margin-left: 10px;
    margin-right: 20px;
    font-size: 14px;
}
.scrolling-reward-template-item > div > span {
  font-size: 14px !important;
  font-weight: bold;
}
.scrolling-reward-template-item img {
  max-width: 60px;
}
@media (max-width: 576px) {
  .scrolling-reward-template-wrapper-item {
    display: inline-block;
    padding: 0;
    text-align: left;
    margin-bottom: 10px;
  }
  .scrolling-reward-template-item > div {
    margin-right: 10px; margin-left: 5px;
  }
  .reward-template-row {
    transform: scale(0.9, 0.9);
    margin-bottom: -10px;
  }
  .scrolling-rewards-fade {
    width: 30px !important
  }
}

.highlight {
  background: rgba(231, 217, 88, .5)
}

.customer-description-title {
    font-size: 2rem;
    line-height: 1.1;
}
.customer-description-section-left {
  padding-right: 20px;
  position: relative;
  margin-top: -10px;
}
.customer-description-section-right {
  padding-left: 20px;
}
@media (max-width: 768px) {
  .customer-description-section {
    flex-direction: column;
  }
  .customer-description-section-left {
    padding-right: 0;
    padding-top: 20px;
    margin-top: 0;
  }
  .customer-description-section-right {
    padding-left: 0;
    padding-top: 60px;
  }
}

.customer-description-checklist-item {
  padding-bottom: 30px;
  display: flex;
  text-wrap: pretty;
}
.customer-description-checklist-item-text {
  margin-left: 20px;
  margin-top: -7px;
}

.faq-button {
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
.faq-button:hover,
.faq-button:active,
.faq-button:focus {
    color: var(--black);
}
.faq-button.collapsed .fa.fa-chevron-up {
    transform: rotate(180deg);
}


/* For tooltips that have a GIF: */
.tooltip-inner:has(img[src$=".gif"]) { max-width: 460px; padding: 10px; }
.tooltip-inner:has(img[src$=".gif"]) img[src$=".gif"] { margin-top: 10px; }
.tooltip.show:has(img[src$=".gif"]) { opacity: 1.0; } /* we need the GIF to not be 0.9 opaque like normal tooltips */

/* Highlight-flash keyframes */
@keyframes highlight-flash {
  0% {
    background: var(--yellow);
  }
  33% {
    background: none;
  }
  66% {
    background: var(--yellow);
  }
  100% {
    background: none;
  }
}

.highlight-flash {
  animation: highlight-flash 2s both ease;
}